\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 *\n * @param {CalendarModel} options - Specifies the Calendar model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function Calendar(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * To Initialize the control rendering.\n *\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 if (this.getModuleName() === 'calendar') {\n this.setEnable(this.enabled);\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 };\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 (!isNullOrUndefined(this.timezone)) {\n tempValue = _super.prototype.getDate.call(this, tempValue, this.timezone);\n }\n if (value && isNullOrUndefined(this.timezone)) {\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: tempValue }, 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 *\n * @returns {void}\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 * @returns {void}\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, e) {\n var tempDays = _super.prototype.renderDays.call(this, currentDate, this.value, this.isMultiSelection, this.values, isCustomDate, e);\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 e && e.type === 'click' && e.currentTarget.classList.contains(OTHERMONTH) ? this.changeHandler(e) : 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 if (copyValues.toString().indexOf(this.getIdValue(e, null).toString()) === -1) {\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.previousDates = true;\n }\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 *\n * @returns {string} Return the component name.\n * @private\n */\n Calendar.prototype.getModuleName = function () {\n _super.prototype.getModuleName.call(this);\n return 'calendar';\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the properties to be maintained upon browser refresh.\n *\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 /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Called internally if any of the property value changed.\n *\n * @param {CalendarModel} newProp - Returns the dynamic property value of the component.\n * @param {CalendarModel} oldProp - Returns the previous property value of the component.\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 *\n * @returns {void}\n */\n Calendar.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n if (this.getModuleName() === 'calendar') {\n this.changedArgs = null;\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 *\n * @param {string} view - Specifies the view of the Calendar.\n * @param {Date} date - Specifies the focused date in a view.\n * @param {boolean} isCustomDate - Specifies whether the calendar is rendered with custom today date or not.\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 /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the current view of the Calendar.\n *\n * @returns {string}\n\n */\n Calendar.prototype.currentView = function () {\n return _super.prototype.currentView.call(this);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * This method is used to add the single or multiple dates to the values property of the Calendar.\n *\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 *\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 *\n * @param {Date} date - Specifies date value to be set.\n * @private\n * @returns {void}\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 // eslint-disable-next-line @typescript-eslint/no-unused-vars\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 // eslint-disable-next-line use-isnan\n if (!this.isMultiSelection && +this.value !== Number.NaN && (!isNullOrUndefined(this.value) &&\n !isNullOrUndefined(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","/**\n * Function helps to find which highlightSearch is to call based on your data.\n *\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 * @returns {void}\n */\nexport function highlightSearch(element, query, ignoreCase, type) {\n if (query === '') {\n return;\n }\n else {\n var ignoreRegex = ignoreCase ? 'gim' : 'gm';\n // eslint-disable-next-line\n query = /^[a-zA-Z0-9- ]*$/.test(query) ? query : query.replace(/[\\-\\[\\]\\/\\{\\}\\(\\)\\*\\+\\?\\.\\\\\\^\\$\\|]/g, '\\\\$&');\n var replaceQuery = type === 'StartsWith' ? '^(' + query + ')' : type === 'EndsWith' ?\n '(' + query + ')$' : '(' + query + ')';\n // eslint-disable-next-line security/detect-non-literal-regexp\n findTextNode(element, new RegExp(replaceQuery, ignoreRegex));\n }\n}\n/* eslint-enable jsdoc/require-param, valid-jsdoc */\n/**\n *\n * @param {HTMLElement} element - Specifies the element.\n * @param {RegExp} pattern - Specifies the regex to match the searched text.\n * @returns {void}\n */\nfunction findTextNode(element, pattern) {\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 var value = element.childNodes[index].nodeValue.trim().replace(pattern, '
$1');\n element.childNodes[index].nodeValue = '';\n element.innerHTML = element.innerHTML.trim() + value;\n break;\n }\n else {\n findTextNode(element.childNodes[index], pattern);\n }\n }\n}\n/**\n * Function helps to remove highlighted element based on your data.\n *\n * @param {HTMLElement} content - Specifies an content element.\n * @returns {void}\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// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n///
\nimport { Property, EventHandler, isNullOrUndefined, detach } from '@syncfusion/ej2-base';\nimport { Event, Complex } from '@syncfusion/ej2-base';\nimport { removeClass, 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';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { DataManager, Predicate, Query } from '@syncfusion/ej2-data';\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 * @param {AutoCompleteModel} options - Specifies the AutoComplete model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function AutoComplete(options, element) {\n var _this_1 = _super.call(this, options, element) || this;\n _this_1.isFiltered = false;\n _this_1.searchList = false;\n return _this_1;\n }\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\n */\n AutoComplete.prototype.preRender = function () {\n _super.prototype.preRender.call(this);\n };\n AutoComplete.prototype.getLocaleName = function () {\n return 'auto-complete';\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 if ((!this.enableVirtualization) || (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource)))) {\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) && !this.enableVirtualization) {\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 if (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {\n var takeValue = this.getTakeValue();\n filterQuery.skip(this.virtualItemStartIndex);\n filterQuery.take(takeValue);\n filterQuery.requiresCount();\n }\n return filterQuery;\n };\n AutoComplete.prototype.searchLists = function (e) {\n var _this_1 = this;\n this.isTyped = true;\n this.isDataFetched = this.isSelectCustom = false;\n this.checkAndResetCache();\n if (isNullOrUndefined(this.list)) {\n _super.prototype.renderList.call(this, e, true);\n }\n this.queryString = this.filterInput.value;\n if (e.type !== 'mousedown' && (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, null, e);\n return;\n }\n this.isSelected = false;\n this.activeIndex = null;\n var eventArgs = {\n preventDefaultAction: false,\n text: this.filterInput.value,\n updateData: function (dataSource, query, fields) {\n if (eventArgs.cancel) {\n return;\n }\n _this_1.isFiltered = true;\n _this_1.filterAction(dataSource, query, fields);\n },\n cancel: false\n };\n this.trigger('filtering', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel && !_this_1.isFiltered && !eventArgs.preventDefaultAction) {\n _this_1.searchList = true;\n _this_1.filterAction(_this_1.dataSource, null, _this_1.fields, e);\n }\n });\n };\n /**\n * To filter the data from given data source by using query\n *\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 * @returns {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, e) {\n this.beforePopupOpen = true;\n var isNoDataElement = this.list.classList.contains('e-nodata');\n if (this.queryString !== '' && (this.queryString.length >= this.minLength)) {\n if (this.enableVirtualization && this.isFiltering() && this.isTyped) {\n this.isPreventScrollAction = true;\n this.list.scrollTop = 0;\n this.previousStartIndex = 0;\n this.virtualListInfo = null;\n }\n this.resetList(dataSource, fields, query, e);\n if (this.enableVirtualization && isNoDataElement && !this.list.classList.contains('e-nodata')) {\n if (!this.list.querySelector('.e-virtual-ddl-content')) {\n this.list.appendChild(this.createElement('div', {\n className: 'e-virtual-ddl-content',\n styles: this.getTransformValues()\n })).appendChild(this.list.querySelector('.e-list-parent'));\n }\n if (!this.list.querySelector('.e-virtual-ddl')) {\n var virualElement = this.createElement('div', {\n id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()\n });\n document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);\n }\n }\n if ((this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount != 0)) {\n this.getFilteringSkeletonCount();\n }\n }\n else {\n this.hidePopup(e);\n this.beforePopupOpen = false;\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 this.checkAndResetCache();\n }\n if (this.beforePopupOpen) {\n this.hidePopup();\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n AutoComplete.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n if (!this.enableVirtualization) {\n this.fixedHeaderElement = null;\n }\n if ((this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount != 0)) {\n this.getFilteringSkeletonCount();\n }\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 dataSource = this.listData;\n var type = this.typeOfData(dataSource).typeof;\n var searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase, dataSource, this.fields, type);\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 this.selectedLI = 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 this.setHoverList(li);\n this.selectedLI = li;\n this.setScrollPosition(e);\n if (this.autofill && this.isPopupOpen) {\n this.preventAutoFill = false;\n var isKeyNavigate = (e && e.action === 'down' || e.action === 'up' ||\n e.action === 'home' || e.action === 'end' || e.action === 'pageUp' || e.action === 'pageDown');\n _super.prototype.setAutoFill.call(this, li, isKeyNavigate);\n }\n }\n else {\n _super.prototype.setSelection.call(this, li, e);\n }\n };\n AutoComplete.prototype.listOption = function (dataSource, fieldsSettings) {\n var _this_1 = this;\n var fields = _super.prototype.listOption.call(this, dataSource, fieldsSettings);\n if (isNullOrUndefined(fields.itemCreated)) {\n fields.itemCreated = function (e) {\n if (_this_1.highlight) {\n if (_this_1.element.tagName === _this_1.getNgDirective() && _this_1.itemTemplate) {\n setTimeout(function () {\n highlightSearch(e.item, _this_1.queryString, _this_1.ignoreCase, _this_1.filterType);\n }, 0);\n }\n else {\n var isHtmlElement = /<[^>]*>/g.test(e.item.innerText);\n if (isHtmlElement) {\n e.item.innerText = e.item.innerText.replace(/[\\u00A0-\\u9999<>&]/g, function (match) { return \"&#\" + match.charCodeAt(0) + \";\"; });\n }\n highlightSearch(e.item, _this_1.queryString, _this_1.ignoreCase, _this_1.filterType);\n }\n }\n };\n }\n else {\n var itemCreated_1 = fields.itemCreated;\n fields.itemCreated = function (e) {\n if (_this_1.highlight) {\n highlightSearch(e.item, _this_1.queryString, _this_1.ignoreCase, _this_1.filterType);\n }\n itemCreated_1.apply(_this_1, [e]);\n };\n }\n return fields;\n };\n AutoComplete.prototype.isFiltering = function () {\n return true;\n };\n AutoComplete.prototype.renderPopup = function (e) {\n if (!this.enableVirtualization) {\n this.list.scrollTop = 0;\n }\n _super.prototype.renderPopup.call(this, e);\n };\n AutoComplete.prototype.isEditTextBox = function () {\n return false;\n };\n AutoComplete.prototype.isPopupButton = function () {\n return this.showPopupButton;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n AutoComplete.prototype.isSelectFocusItem = function (element) {\n return false;\n };\n AutoComplete.prototype.setInputValue = function (newProp, oldProp) {\n var oldValue = oldProp && oldProp.text ? oldProp.text : oldProp ? oldProp.value : oldProp;\n var value = newProp && newProp.text ? newProp.text : newProp && newProp.value ? newProp.value : this.value;\n if (value && this.typedString === '' && !this.allowCustom && !(this.dataSource instanceof DataManager)) {\n var checkFields_1_1 = this.typeOfData(this.dataSource).typeof === 'string' ? '' : this.fields.value;\n var listLength_1 = this.getItems().length;\n var query = new Query();\n var _this_2 = this;\n new DataManager(this.dataSource).executeQuery(query.where(new Predicate(checkFields_1_1, 'equal', value)))\n .then(function (e) {\n if (e.result.length > 0) {\n _this_2.value = checkFields_1_1 !== '' ? e.result[0][_this_2.fields.value].toString() : e.result[0].toString();\n _this_2.addItem(e.result, listLength_1);\n _this_2.updateValues();\n }\n else {\n newProp && newProp.text ? _this_2.setOldText(oldValue) : newProp && newProp.value ? _this_2.setOldValue(oldValue) : _this_2.updateValues();\n }\n });\n }\n else if (newProp) {\n newProp.text ? this.setOldText(oldValue) : this.setOldValue(oldValue);\n }\n };\n /**\n * Search the entered text and show it in the suggestion list if available.\n *\n * @returns {void}\n\n */\n AutoComplete.prototype.showPopup = function (e) {\n if (!this.enabled) {\n return;\n }\n if (this.beforePopupOpen) {\n this.refreshPopup();\n return;\n }\n this.beforePopupOpen = true;\n this.preventAutoFill = true;\n if (isNullOrUndefined(this.list)) {\n this.renderList(e);\n }\n else {\n this.resetList(this.dataSource, this.fields, null, e);\n }\n };\n /**\n * Hides the popup if it is in open state.\n *\n * @returns {void}\n */\n AutoComplete.prototype.hidePopup = function (e) {\n _super.prototype.hidePopup.call(this, e);\n this.activeIndex = null;\n this.virtualListInfo = this.viewPortInfo;\n this.previousStartIndex = this.viewPortInfo.startIndex;\n this.startIndex = this.viewPortInfo.startIndex;\n this.previousEndIndex = this.viewPortInfo.endIndex;\n };\n /**\n * Dynamically change the value of properties.\n *\n * @param {AutoCompleteModel} newProp - Returns the dynamic property value of the component.\n * @param {AutoCompleteModel} oldProp - Returns the previous property value of the component.\n * @private\n * @returns {void}\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 var button = Input.appendSpan(dropDownListClasses.icon, this.inputWrapper.container, this.createElement);\n this.inputWrapper.buttons[0] = button;\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\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 {\n detach(this.inputWrapper.buttons[0]);\n this.inputWrapper.buttons[0] = null;\n }\n break;\n default: {\n // eslint-disable-next-line max-len\n var atcProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, atcProps.newProperty, atcProps.oldProperty);\n break;\n }\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);\n }\n }\n }\n };\n /**\n * Return the module name of this component.\n *\n * @private\n * @returns {string} Return the module name of this component.\n */\n AutoComplete.prototype.getModuleName = function () {\n return 'autocomplete';\n };\n /**\n * To initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n AutoComplete.prototype.render = function () {\n _super.prototype.render.call(this);\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","/**\n * Specifies class names\n */\n/** @hidden */\nexport var rowCell = 'e-rowcell';\n/** @hidden */\nexport var gridHeader = 'e-gridheader';\n/** @hidden */\nexport var gridContent = 'e-gridcontent';\n/** @hidden */\nexport var gridFooter = 'e-gridfooter';\n/** @hidden */\nexport var headerContent = 'e-headercontent';\n/** @hidden */\nexport var movableContent = 'e-movablecontent';\n/** @hidden */\nexport var movableHeader = 'e-movableheader';\n/** @hidden */\nexport var frozenContent = 'e-frozencontent';\n/** @hidden */\nexport var frozenHeader = 'e-frozenheader';\n/** @hidden */\nexport var content = 'e-content';\n/** @hidden */\nexport var table = 'e-table';\n/** @hidden */\nexport var row = 'e-row';\n/** @hidden */\nexport var gridChkBox = 'e-gridchkbox';\n/** @hidden */\nexport var editedRow = 'e-editedrow';\n/** @hidden */\nexport var addedRow = 'e-addedrow';\n/**\n * Specifies repeated strings\n */\n/** @hidden */\nexport var changedRecords = 'changedRecords';\n/** @hidden */\nexport var addedRecords = 'addedRecords';\n/** @hidden */\nexport var deletedRecords = 'deletedRecords';\n/** @hidden */\nexport var leftRight = 'Left-Right';\n/** @hidden */\nexport var frozenRight = 'frozen-right';\n/** @hidden */\nexport var frozenLeft = 'frozen-left';\n/** @hidden */\nexport var dataColIndex = 'data-colindex';\n/** @hidden */\nexport var ariaColIndex = 'aria-colindex';\n/** @hidden */\nexport var dataRowIndex = 'data-rowindex';\n/** @hidden */\nexport var ariaRowIndex = 'aria-rowindex';\n/** @hidden */\nexport var tbody = 'tbody';\n/** @hidden */\nexport var colGroup = 'colgroup';\n/** @hidden */\nexport var open = 'open';\n/** @hidden */\nexport var change = 'change';\n/** @hidden */\nexport var focus = 'focus';\n/** @hidden */\nexport var create = 'created';\n/** @hidden */\nexport var beforeOpen = 'beforeOpen';\n/** @hidden */\nexport var downArrow = 'downArrow';\n/** @hidden */\nexport var upArrow = 'upArrow';\n/** @hidden */\nexport var pageUp = 'PageUp';\n/** @hidden */\nexport var pageDown = 'PageDown';\n/** @hidden */\nexport var enter = 'enter';\n/** @hidden */\nexport var shiftEnter = 'shiftEnter';\n/** @hidden */\nexport var tab = 'tab';\n/** @hidden */\nexport var shiftTab = 'shiftTab';\n/** @hidden */\nexport var initialFrozenColumnIndex = 'initialFrozenColumnIndex';\n","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, setValue } 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', 'id'];\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 *\n * @private\n * @param {RadioButtonModel} options - Specifies Radio button model\n * @param {string | HTMLInputElement} element - Specifies target element\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 var type = typeof this.value;\n if (this.isVue && type === 'boolean') {\n value = value === 'true' ? true : false;\n }\n this.trigger('change', { value: value, event: event });\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isAngular) {\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 *\n * @returns {void}\n */\n RadioButton.prototype.destroy = function () {\n var _this = this;\n var radioWrap = this.wrapper;\n _super.prototype.destroy.call(this);\n if (radioWrap) {\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 this.element = this.wrapper;\n if (this.refreshing) {\n ['e-control', 'e-radio', 'e-lib'].forEach(function (key) {\n _this.element.classList.add(key);\n });\n setValue('ej2_instances', [this], this.element);\n }\n }\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 *\n * @method getSelectedValue\n * @returns {string} - Selected Value\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 *\n * @private\n * @returns {string} - Persist Data\n */\n RadioButton.prototype.getPersistData = function () {\n return this.addOnPersist(['checked']);\n };\n RadioButton.prototype.getWrapper = function () {\n if (this.element) {\n return this.element.parentElement;\n }\n else {\n return null;\n }\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 var type = typeof this.value;\n if (this.isVue && type === 'boolean') {\n value = value === 'true' ? true : false;\n }\n if (this.isVue ? this.value && type !== 'boolean' && !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([wrapper], this.cssClass.replace(/\\s+/g, ' ').trim().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.labelMouseDownHandler = function (e) {\n var rippleSpan = this.getLabel().getElementsByClassName(RIPPLE)[0];\n rippleMouseHandler(e, rippleSpan);\n };\n RadioButton.prototype.labelMouseLeaveHandler = function (e) {\n var rippleSpan = this.getLabel().getElementsByClassName(RIPPLE)[0];\n if (rippleSpan) {\n var rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');\n for (var i = rippleElem.length - 1; i > 0; i--) {\n rippleSpan.removeChild(rippleSpan.childNodes[i]);\n }\n rippleMouseHandler(e, rippleSpan);\n }\n };\n RadioButton.prototype.labelMouseUpHandler = function (e) {\n var rippleSpan = this.getLabel().getElementsByClassName(RIPPLE)[0];\n if (rippleSpan) {\n var rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');\n for (var i = rippleElem.length - 1; i > 0; i--) {\n rippleSpan.removeChild(rippleSpan.childNodes[i]);\n }\n rippleMouseHandler(e, rippleSpan);\n }\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 *\n * @private\n * @param {RadioButtonModel} newProp - Specifies New Properties\n * @param {RadioButtonModel} oldProp - Specifies Old Properties\n * @returns {void}\n */\n RadioButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var wrap = this.getWrapper();\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([wrap], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([wrap], newProp.cssClass.replace(/\\s+/g, ' ').trim().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 var type = typeof this.htmlAttributes.value;\n if (!isNullOrUndefined(this.htmlAttributes) && (this.htmlAttributes.value || type === 'boolean' && !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 *\n * @private\n * @returns {void}\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 *\n * @private\n * @returns {void}\n */\n RadioButton.prototype.render = function () {\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.renderComplete();\n this.wrapper = this.getWrapper();\n };\n RadioButton.prototype.setDisabled = function () {\n this.element.disabled = true;\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n RadioButton.prototype.setText = function (text) {\n var label = this.getLabel();\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 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 var wrapper = this.element.parentElement;\n if (ATTRIBUTES.indexOf(key) > -1) {\n if (key === 'class') {\n addClass([wrapper], this.htmlAttributes[\"\" + key].replace(/\\s+/g, ' ').trim().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 else {\n wrapper.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n };\n RadioButton.prototype.unWireEvents = function () {\n var label = this.wrapper;\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.getElementsByTagName('label')[0];\n if (rippleLabel) {\n EventHandler.remove(rippleLabel, 'mousedown', this.labelMouseDownHandler);\n EventHandler.remove(rippleLabel, 'mouseup', this.labelMouseUpHandler);\n EventHandler.remove(rippleLabel, 'mouseleave', this.labelMouseLeaveHandler);\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.labelMouseDownHandler, this);\n EventHandler.add(rippleLabel, 'mouseup', this.labelMouseUpHandler, this);\n EventHandler.add(rippleLabel, 'mouseleave', this.labelMouseLeaveHandler, 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 *\n * @public\n * @returns {void}\n */\n RadioButton.prototype.click = function () {\n this.element.click();\n };\n /**\n * Sets the focus to RadioButton\n * its native method\n *\n * @public\n * @returns {void}\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})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { merge, isNullOrUndefined, extend, Property } from '@syncfusion/ej2-base';\nimport { Query, DataUtil } from '@syncfusion/ej2-data';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { getUid, templateCompiler, getForeignData, getObject } from '../base/util';\n/**\n * Represents Grid `Column` model class.\n */\nvar Column = /** @class */ (function () {\n function Column(options, parent) {\n var _this = this;\n /**\n * If `disableHtmlEncode` is set to true, it encodes the HTML of the header and content cells.\n *\n * @default true\n */\n this.disableHtmlEncode = true;\n /**\n * If `allowSorting` set to false, then it disables sorting option of a particular column.\n * By default all columns are sortable.\n *\n * @default true\n */\n this.allowSorting = true;\n /**\n * If `allowResizing` is set to false, it disables resize option of a particular column.\n * By default all the columns can be resized.\n *\n * @default true\n */\n this.allowResizing = true;\n /**\n * If `allowFiltering` set to false, then it disables filtering option and filter bar element of a particular column.\n * By default all columns are filterable.\n *\n * @default true\n */\n this.allowFiltering = true;\n /**\n * If `allowGrouping` set to false, then it disables grouping of a particular column.\n * By default all columns are groupable.\n *\n * @default true\n */\n this.allowGrouping = true;\n /**\n * If `allowReordering` set to false, then it disables reorder of a particular column.\n * By default all columns can be reorder.\n *\n * @default true\n */\n this.allowReordering = true;\n /**\n * If `showColumnMenu` set to false, then it disable the column menu of a particular column.\n * By default column menu will show for all columns\n *\n * @default true\n */\n this.showColumnMenu = true;\n /**\n * If `enableGroupByFormat` set to true, then it groups the particular column by formatted values.\n *\n * @default true\n */\n this.enableGroupByFormat = false;\n /**\n * If `allowEditing` set to false, then it disables editing of a particular column.\n * By default all columns are editable.\n *\n * @default true\n */\n this.allowEditing = true;\n /**\n * It is used to customize the default filter options for a specific columns.\n * * type - Specifies the filter type as menu or checkbox.\n * * ui - to render custom component for specific column it has following functions.\n * * ui.create – It is used for creating custom components.\n * * ui.read - It is used for read the value from the component.\n * * ui.write - It is used to apply component model as dynamically.\n * {% codeBlock src=\"grid/filter-menu-api/index.ts\" %}{% endcodeBlock %}\n *\n * > Check the [`Filter UI`](../../grid/filtering/filter-menu/#custom-component-in-filter-menu) for its customization.\n *\n * @default {}\n */\n this.filter = {};\n /**\n * If `showInColumnChooser` set to false, then hide the particular column in column chooser.\n * By default all columns are displayed in column Chooser.\n *\n * @default true\n */\n this.showInColumnChooser = true;\n /**\n * Defines the `IEditCell` object to customize default edit cell.\n *\n * @default {}\n */\n this.edit = {};\n /**\n * If `allowSearching` set to false, then it disables Searching of a particular column.\n * By default all columns allow Searching.\n *\n * @default true\n */\n this.allowSearching = true;\n /**\n * If `autoFit` set to true, then the particular column content width will be\n * adjusted based on its content in the initial rendering itself.\n * Setting this property as true is equivalent to calling `autoFitColumns` method in the `dataBound` event.\n *\n * @default false\n */\n this.autoFit = false;\n this.sortDirection = 'Descending';\n /**\n * @returns {Function} returns the edit template\n * @hidden */\n this.getEditTemplate = function () { return _this.editTemplateFn; };\n /**\n * @returns {Function} returns the filter template\n * @hidden */\n this.getFilterTemplate = function () { return _this.filterTemplateFn; };\n merge(this, options);\n this.parent = parent;\n if (this.type === 'none') {\n this.type = null;\n }\n else if (this.type) {\n this.type = typeof (this.type) === 'string' ? this.type.toLowerCase() : undefined;\n }\n if (this.editType) {\n this.editType = this.editType.toLowerCase();\n }\n if (isNullOrUndefined(this.uid)) {\n this.uid = getUid('grid-column');\n }\n var valueFormatter = new ValueFormatter();\n if (options.format && (options.format.skeleton || (options.format.format &&\n typeof options.format.format === 'string'))) {\n this.setFormatter(valueFormatter.getFormatFunction(extend({}, options.format)));\n this.setParser(valueFormatter.getParserFunction(options.format));\n }\n this.toJSON = function () {\n var col = {};\n var skip = ['filter', 'dataSource', 'headerText', 'template', 'headerTemplate', 'edit',\n 'editTemplate', 'filterTemplate', 'commandsTemplate', 'parent'];\n var keys = Object.keys(_this);\n for (var i = 0; i < keys.length; i++) {\n if (keys[parseInt(i.toString(), 10)] === 'columns') {\n col[keys[parseInt(i.toString(), 10)]] = [];\n for (var j = 0; j < _this[keys[parseInt(i.toString(), 10)]].length; j++) {\n col[keys[parseInt(i.toString(), 10)]].push(_this[keys[parseInt(i.toString(), 10)]][parseInt(j.toString(), 10)].toJSON());\n }\n }\n else if (skip.indexOf(keys[parseInt(i.toString(), 10)]) < 0) {\n col[keys[parseInt(i.toString(), 10)]] = _this[keys[parseInt(i.toString(), 10)]];\n }\n }\n return col;\n };\n if (!this.field) {\n this.allowFiltering = false;\n this.allowGrouping = false;\n this.allowSorting = false;\n if (this.columns) {\n this.allowResizing = this.columns.some(function (col) {\n return col.allowResizing;\n });\n }\n }\n if (this.commands && !this.textAlign) {\n this.textAlign = 'Right';\n }\n if (this.template || this.commandsTemplate) {\n this.templateFn = templateCompiler(this.template || this.commandsTemplate);\n }\n if (this.headerTemplate) {\n this.headerTemplateFn = templateCompiler(this.headerTemplate);\n }\n if (!isNullOrUndefined(this.filter) && this.filter.itemTemplate) {\n this.fltrTemplateFn = templateCompiler(this.filter.itemTemplate);\n }\n if (this.editTemplate) {\n this.editTemplateFn = templateCompiler(this.editTemplate);\n }\n if (this.filterTemplate) {\n this.filterTemplateFn = templateCompiler(this.filterTemplate);\n }\n if (this.isForeignColumn() &&\n (isNullOrUndefined(this.editType) || this.editType === 'dropdownedit' || this.editType === 'defaultedit')) {\n this.editType = 'dropdownedit';\n if (this.edit.params && this.edit.params.dataSource) {\n this.edit.params.ddEditedData = true;\n }\n this.edit.params = extend({\n dataSource: this.dataSource,\n query: new Query(), fields: { value: this.foreignKeyField || this.field, text: this.foreignKeyValue }\n }, this.edit.params);\n }\n if (this.sortComparer) {\n var a_1 = this.sortComparer;\n this.sortComparer = function (x, y, xObj, yObj) {\n if (typeof a_1 === 'string') {\n a_1 = getObject(a_1, window);\n }\n if (_this.sortDirection === 'Descending') {\n var z = x;\n x = y;\n y = z;\n var obj = xObj;\n xObj = yObj;\n yObj = obj;\n }\n return a_1(x, y, xObj, yObj);\n };\n }\n if (!this.sortComparer && this.isForeignColumn()) {\n this.sortComparer = function (x, y) {\n x = getObject(_this.foreignKeyValue, getForeignData(_this, {}, x)[0]);\n y = getObject(_this.foreignKeyValue, getForeignData(_this, {}, y)[0]);\n return _this.sortDirection === 'Descending' ? DataUtil.fnDescending(x, y) : DataUtil.fnAscending(x, y);\n };\n }\n }\n /**\n * @returns {string} returns the sort direction\n * @hidden */\n Column.prototype.getSortDirection = function () {\n return this.sortDirection;\n };\n /**\n * @param {string} direction - specifies the direction\n * @returns {void}\n * @hidden\n */\n Column.prototype.setSortDirection = function (direction) {\n this.sortDirection = direction;\n };\n /**\n * @returns {freezeTable} returns the FreezeTable\n * @hidden */\n Column.prototype.getFreezeTableName = function () {\n return this.freezeTable;\n };\n /**\n * @param {Column} column - specifies the column\n * @returns {void}\n * @hidden\n */\n Column.prototype.setProperties = function (column) {\n //Angular two way binding\n var keys = Object.keys(column);\n for (var i = 0; i < keys.length; i++) {\n this[keys[parseInt(i.toString(), 10)]] = column[keys[parseInt(i.toString(), 10)]];\n //Refresh the react columnTemplates on state change\n if (this.parent && this.parent.isReact) {\n if (keys[parseInt(i.toString(), 10)] === 'template') {\n this.templateFn = templateCompiler(column[keys[parseInt(i.toString(), 10)]]);\n this.parent.refreshReactColumnTemplateByUid(this.uid, true);\n }\n else if (keys[parseInt(i.toString(), 10)] === 'headerTemplate') {\n this.headerTemplateFn = templateCompiler(column[keys[parseInt(i.toString(), 10)]]);\n this.parent.refreshReactHeaderTemplateByUid(this.uid);\n }\n else if (keys[parseInt(i.toString(), 10)] === 'editTemplate') {\n this.editTemplateFn = templateCompiler(column[keys[parseInt(i.toString(), 10)]]);\n }\n }\n }\n };\n /**\n * @returns {boolean} returns true for foreign column\n * @hidden\n * It defines the column is foreign key column or not.\n */\n Column.prototype.isForeignColumn = function () {\n return !!(this.dataSource && this.foreignKeyValue);\n };\n /**\n * @returns {Function} returns the function\n * @hidden\n */\n Column.prototype.getFormatter = function () {\n return this.formatFn;\n };\n /**\n * @param {Function} value - specifies the value\n * @returns {void}\n * @hidden\n */\n Column.prototype.setFormatter = function (value) {\n this.formatFn = value;\n };\n /**\n * @returns {Function} returns the function\n * @hidden */\n Column.prototype.getParser = function () {\n return this.parserFn;\n };\n /**\n * @param {Function} value - specifies the value\n * @returns {void}\n * @hidden\n */\n Column.prototype.setParser = function (value) {\n this.parserFn = value;\n };\n /**\n * @returns {Function} returns the function\n * @hidden */\n Column.prototype.getColumnTemplate = function () {\n return this.templateFn;\n };\n /**\n * @returns {Function} returns the function\n * @hidden */\n Column.prototype.getHeaderTemplate = function () {\n return this.headerTemplateFn;\n };\n /**\n * @returns {Function} returns the function\n * @hidden */\n Column.prototype.getFilterItemTemplate = function () {\n return this.fltrTemplateFn;\n };\n /**\n * @returns {string} returns the string\n * @hidden */\n Column.prototype.getDomSetter = function () {\n return this.disableHtmlEncode ? 'textContent' : 'innerHTML';\n };\n return Column;\n}());\nexport { Column };\n/**\n * Define options for custom command buttons.\n */\nvar CommandColumnModel = /** @class */ (function () {\n function CommandColumnModel() {\n }\n __decorate([\n Property()\n ], CommandColumnModel.prototype, \"title\", void 0);\n __decorate([\n Property()\n ], CommandColumnModel.prototype, \"type\", void 0);\n __decorate([\n Property()\n ], CommandColumnModel.prototype, \"buttonOption\", void 0);\n return CommandColumnModel;\n}());\nexport { CommandColumnModel };\n/**\n * Defines Grid column\n */\nvar GridColumn = /** @class */ (function (_super) {\n __extends(GridColumn, _super);\n function GridColumn() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], GridColumn.prototype, \"columns\", void 0);\n return GridColumn;\n}(Column));\nexport { GridColumn };\n/**\n * Defines stacked grid column\n */\nvar StackedColumn = /** @class */ (function (_super) {\n __extends(StackedColumn, _super);\n function StackedColumn() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n return StackedColumn;\n}(GridColumn));\nexport { StackedColumn };\n","import { Browser, EventHandler } from '@syncfusion/ej2-base';\nimport { addClass, removeClass } from '@syncfusion/ej2-base';\nimport { formatUnit, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { getScrollBarWidth, getUpdateUsingRaf } from '../base/util';\nimport { scroll, contentReady, uiUpdate, onEmpty, headerRefreshed, textWrapRefresh, virtualScrollEdit, infiniteScrollHandler, closeFilterDialog } from '../base/constant';\nimport { lazyLoadScrollHandler, checkScrollReset } from '../base/constant';\nimport { ColumnWidthService } from '../services/width-controller';\nimport * as literals from '../base/string-literals';\nimport * as events from '../base/constant';\n/**\n * The `Scroll` module is used to handle scrolling behaviour.\n */\nvar Scroll = /** @class */ (function () {\n /**\n * Constructor for the Grid scrolling.\n *\n * @param {IGrid} parent - specifies the IGrid\n * @hidden\n */\n function Scroll(parent) {\n //To maintain scroll state on grid actions.\n this.previousValues = { top: 0, left: 0 };\n this.oneTimeReady = true;\n this.parent = parent;\n this.widthService = new ColumnWidthService(parent);\n this.addEventListener();\n }\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Scroll.prototype.getModuleName = function () {\n return 'scroll';\n };\n /**\n * @param {boolean} uiupdate - specifies the uiupdate\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.setWidth = function (uiupdate) {\n this.parent.element.style.width = formatUnit(this.parent.width);\n if (uiupdate) {\n this.widthService.setWidthToColumns();\n }\n if (this.parent.toolbarModule && this.parent.toolbarModule.toolbar &&\n this.parent.toolbarModule.toolbar.element) {\n var tlbrElement = this.parent.toolbarModule.toolbar.element;\n var tlbrLeftElement = tlbrElement.querySelector('.e-toolbar-left');\n var tlbrCenterElement = tlbrElement.querySelector('.e-toolbar-center');\n var tlbrRightElement = tlbrElement.querySelector('.e-toolbar-right');\n var tlbrItems = tlbrElement.querySelector('.e-toolbar-items');\n var tlbrLeftWidth = tlbrLeftElement ? tlbrLeftElement.clientWidth : 0;\n var tlbrCenterWidth = tlbrCenterElement ? tlbrCenterElement.clientWidth : 0;\n var tlbrRightWidth = tlbrRightElement ? tlbrRightElement.clientWidth : 0;\n var tlbrItemsWidth = tlbrItems ? tlbrItems.clientWidth : 0;\n var tlbrWidth = tlbrElement ? tlbrElement.clientWidth : 0;\n if (!this.parent.enableAdaptiveUI || tlbrLeftWidth > tlbrWidth || tlbrCenterWidth > tlbrWidth || tlbrRightWidth > tlbrWidth ||\n tlbrItemsWidth > tlbrWidth) {\n this.parent.toolbarModule.toolbar.refreshOverflow();\n }\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.setHeight = function () {\n var mHdrHeight = 0;\n var content = this.parent.getContent().querySelector('.' + literals.content);\n var height = this.parent.height;\n if (this.parent.enableColumnVirtualization && this.parent.isFrozenGrid() && this.parent.height !== 'auto'\n && this.parent.height.toString().indexOf('%') < 0) {\n height = parseInt(height, 10) - Scroll.getScrollBarWidth();\n }\n if (!this.parent.enableVirtualization && this.parent.frozenRows && this.parent.height !== 'auto') {\n var tbody = this.parent.getHeaderContent()\n .querySelector(literals.tbody + ':not(.e-masked-tbody)');\n mHdrHeight = tbody ? tbody.offsetHeight : 0;\n if (tbody && mHdrHeight) {\n var add = tbody.getElementsByClassName(literals.addedRow).length;\n var height_1 = add * this.parent.getRowHeight();\n mHdrHeight -= height_1;\n }\n else if (!this.parent.isInitialLoad && this.parent.loadingIndicator.indicatorType === 'Shimmer'\n && this.parent.getHeaderContent().querySelector('.e-masked-table')) {\n height = parseInt(height, 10) - (this.parent.frozenRows * this.parent.getRowHeight());\n }\n content.style.height = formatUnit(height - mHdrHeight);\n }\n else {\n content.style.height = formatUnit(height);\n }\n this.ensureOverflow(content);\n if (this.parent.isFrozenGrid()) {\n this.refresh();\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.setPadding = function () {\n var content = this.parent.getHeaderContent();\n var scrollWidth = Scroll.getScrollBarWidth() - this.getThreshold();\n var cssProps = this.getCssProperties();\n content.querySelector('.' + literals.headerContent).style[cssProps.border] = scrollWidth > 0 ? '1px' : '0px';\n content.style[cssProps.padding] = scrollWidth > 0 ? scrollWidth + 'px' : '0px';\n };\n /**\n * @param {boolean} rtl - specifies the rtl\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.removePadding = function (rtl) {\n var cssProps = this.getCssProperties(rtl);\n var hDiv = this.parent.getHeaderContent().querySelector('.' + literals.headerContent);\n hDiv.style[cssProps.border] = '';\n hDiv.parentElement.style[cssProps.padding] = '';\n var footerDiv = this.parent.getFooterContent();\n if (footerDiv && footerDiv.classList.contains('e-footerpadding')) {\n footerDiv.classList.remove('e-footerpadding');\n }\n };\n /**\n * Refresh makes the Grid adoptable with the height of parent container.\n *\n * > The [`height`](./#height) must be set to 100%.\n *\n * @returns {void}\n */\n Scroll.prototype.refresh = function () {\n if (this.parent.height !== '100%') {\n return;\n }\n var content = this.parent.getContent();\n this.parent.element.style.height = '100%';\n var height = this.widthService.getSiblingsHeight(content);\n content.style.height = 'calc(100% - ' + height + 'px)'; //Set the height to the '.' + literals.gridContent;\n };\n Scroll.prototype.getThreshold = function () {\n /* Some browsers places the scroller outside the content,\n * hence the padding should be adjusted.*/\n var appName = Browser.info.name;\n if (appName === 'mozilla') {\n return 0.5;\n }\n return 1;\n };\n /**\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(onEmpty, this.wireEvents, this);\n this.parent.on(contentReady, this.wireEvents, this);\n this.parent.on(uiUpdate, this.onPropertyChanged, this);\n this.parent.on(textWrapRefresh, this.wireEvents, this);\n this.parent.on(headerRefreshed, this.setScrollLeft, this);\n };\n /**\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(onEmpty, this.wireEvents);\n this.parent.off(contentReady, this.wireEvents);\n this.parent.off(uiUpdate, this.onPropertyChanged);\n this.parent.off(textWrapRefresh, this.wireEvents);\n this.parent.off(headerRefreshed, this.setScrollLeft);\n this.unwireEvents();\n };\n Scroll.prototype.unwireEvents = function () {\n if (this.parent.frozenRows && this.header) {\n EventHandler.remove(this.header, 'touchstart pointerdown', this.setPageXY);\n EventHandler.remove(this.header, 'touchmove pointermove', this.onTouchScroll);\n }\n var mScrollBar = this.parent.getContent() ? this.parent.getContent().querySelector('.e-movablescrollbar') : null;\n if (this.parent.isFrozenGrid() && this.parent.enableColumnVirtualization) {\n if (mScrollBar) {\n EventHandler.remove(mScrollBar, 'scroll', this.onCustomScrollbarScroll);\n }\n if (this.content) {\n EventHandler.remove(this.content, 'scroll', this.onCustomScrollbarScroll);\n EventHandler.remove(this.content, 'touchstart pointerdown', this.setPageXY);\n if (!(/macintosh|ipad/.test(Browser.userAgent.toLowerCase()) && Browser.isDevice)) {\n EventHandler.remove(this.content, 'touchmove pointermove', this.onTouchScroll);\n }\n }\n if (this.header) {\n EventHandler.remove(this.header, 'scroll', this.onCustomScrollbarScroll);\n EventHandler.remove(this.header, 'touchstart pointerdown', this.setPageXY);\n EventHandler.remove(this.header, 'touchmove pointermove', this.onTouchScroll);\n }\n }\n if (this.content) {\n EventHandler.remove(this.content, 'scroll', this.contentScrollHandler);\n }\n if (this.header) {\n EventHandler.remove(this.header, 'scroll', this.headerScrollHandler);\n }\n this.contentScrollHandler = null;\n this.headerScrollHandler = null;\n if (this.parent.aggregates.length && this.parent.getFooterContent()) {\n EventHandler.remove(this.parent.getFooterContent().firstChild, 'scroll', this.onContentScroll);\n }\n };\n Scroll.prototype.setScrollLeft = function () {\n this.parent.getHeaderContent().querySelector('.' + literals.headerContent).scrollLeft = this.previousValues.left;\n };\n Scroll.prototype.onContentScroll = function (scrollTarget) {\n var _this = this;\n var element = scrollTarget;\n var isHeader = element.classList.contains(literals.headerContent);\n return function (e) {\n if (_this.content.querySelector(literals.tbody) === null || _this.parent.isPreventScrollEvent) {\n return;\n }\n var target = e.target;\n if (_this.parent.frozenRows) {\n if (_this.content.scrollTop > 0 && _this.parent.frozenRows) {\n addClass([_this.parent.element], 'e-top-shadow');\n }\n else {\n removeClass([_this.parent.element], 'e-top-shadow');\n }\n }\n if (_this.parent.element.querySelectorAll('.e-leftfreeze,.e-fixedfreeze,.e-rightfreeze').length) {\n var errorFreeze = _this.parent.getContent().querySelectorAll('.e-freezeerror:not([style*=\"display: none\"])');\n var errorFixed = _this.parent.getContent().querySelectorAll('.e-fixederror:not([style*=\"display: none\"])');\n if (target.scrollLeft !== 0 && _this.parent.getVisibleFrozenLeftCount()) {\n addClass([_this.parent.element], 'e-left-shadow');\n }\n else {\n removeClass([_this.parent.element], 'e-left-shadow');\n }\n var widthVal = Math.round((_this.parent.enableRtl ? target.scrollWidth + target.scrollLeft : target.scrollWidth - target.scrollLeft) +\n (_this.parent.height === 'auto' ? 0 : 1));\n if (widthVal === target.offsetWidth && _this.parent.getVisibleFrozenRightCount()) {\n removeClass([_this.parent.element], 'e-right-shadow');\n }\n else {\n addClass([_this.parent.element], 'e-right-shadow');\n }\n var rows = [].slice.call(_this.parent.getContent().querySelectorAll('.e-row:not(.e-hiddenrow)'));\n if (((rows.length === 1 && errorFreeze.length) ||\n (_this.parent.element.querySelector('.e-freeze-autofill:not([style*=\"display: none\"])')) ||\n errorFixed.length) && target.scrollLeft !== _this.previousValues.left) {\n target.scrollLeft = _this.previousValues.left;\n return;\n }\n if (rows.length !== 1 && (errorFreeze.length || errorFixed.length) && target.scrollTop !== _this.previousValues.top) {\n target.scrollTop = _this.previousValues.top;\n return;\n }\n }\n var left = target.scrollLeft;\n if (!isNullOrUndefined(_this.parent.infiniteScrollModule) && _this.parent.enableInfiniteScrolling && !_this.parent.isEdit) {\n _this.parent.notify(infiniteScrollHandler, { target: e.target, isLeft: _this.previousValues.left !== left });\n }\n if (_this.parent.groupSettings.columns.length && _this.parent.groupSettings.enableLazyLoading) {\n var isDown = _this.previousValues.top < _this.parent.getContent().firstElementChild.scrollTop;\n _this.parent.notify(lazyLoadScrollHandler, { scrollDown: isDown });\n }\n _this.parent.notify(virtualScrollEdit, {});\n var isFooter = target.classList.contains('e-summarycontent');\n if (_this.previousValues.left === left) {\n _this.previousValues.top = !isHeader ? _this.previousValues.top : target.scrollTop;\n return;\n }\n _this.parent.notify(closeFilterDialog, e);\n element.scrollLeft = left;\n if (isFooter) {\n _this.header.scrollLeft = left;\n }\n _this.previousValues.left = left;\n _this.parent.notify(scroll, { left: left });\n };\n };\n Scroll.prototype.onCustomScrollbarScroll = function (cont, hdr) {\n var _this = this;\n var content = cont;\n var header = hdr;\n return function (e) {\n if (_this.content.querySelector(literals.tbody) === null) {\n return;\n }\n var target = e.target;\n var left = target.scrollLeft;\n if (_this.previousValues.left === left) {\n return;\n }\n content.scrollLeft = left;\n header.scrollLeft = left;\n _this.previousValues.left = left;\n _this.parent.notify(scroll, { left: left });\n if (_this.parent.isDestroyed) {\n return;\n }\n };\n };\n Scroll.prototype.onTouchScroll = function (scrollTarget) {\n var _this = this;\n var element = scrollTarget;\n return function (e) {\n if (e.pointerType === 'mouse') {\n return;\n }\n var isFrozen = _this.parent.isFrozenGrid();\n var pageXY = _this.getPointXY(e);\n var left = element.scrollLeft + (_this.pageXY.x - pageXY.x);\n var mHdr = _this.parent.getHeaderContent().querySelector('.' + literals.headerContent);\n var mCont = _this.parent.getContent().querySelector('.' + literals.content);\n if (_this.previousValues.left === left || (left < 0 || (mHdr.scrollWidth - mHdr.clientWidth) < left)) {\n return;\n }\n e.preventDefault();\n mHdr.scrollLeft = left;\n mCont.scrollLeft = left;\n if (isFrozen && _this.parent.enableColumnVirtualization) {\n var scrollBar = _this.parent.getContent().querySelector('.e-movablescrollbar');\n scrollBar.scrollLeft = left;\n }\n _this.pageXY.x = pageXY.x;\n _this.previousValues.left = left;\n };\n };\n Scroll.prototype.setPageXY = function () {\n var _this = this;\n return function (e) {\n if (e.pointerType === 'mouse') {\n return;\n }\n _this.pageXY = _this.getPointXY(e);\n };\n };\n Scroll.prototype.getPointXY = function (e) {\n var pageXY = { x: 0, y: 0 };\n if (e.touches && e.touches.length) {\n pageXY.x = e.touches[0].pageX;\n pageXY.y = e.touches[0].pageY;\n }\n else {\n pageXY.x = e.pageX;\n pageXY.y = e.pageY;\n }\n return pageXY;\n };\n Scroll.prototype.getScrollbleParent = function (node) {\n if (node === null) {\n return null;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var parent = isNullOrUndefined(node.tagName) ? node.scrollingElement : node;\n var overflowY = document.defaultView.getComputedStyle(parent, null).overflowY;\n if (parent.scrollHeight > parent.clientHeight && overflowY !== 'hidden'\n && overflowY !== 'visible' || node.tagName === 'HTML' || node.tagName === 'BODY') {\n return node;\n }\n else {\n return this.getScrollbleParent(node.parentNode);\n }\n };\n /**\n * @param {boolean} isAdd - specifies whether adding/removing the event\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.addStickyListener = function (isAdd) {\n this.parentElement = this.getScrollbleParent(this.parent.element.parentElement);\n if (isAdd && this.parentElement) {\n this.eventElement = this.parentElement.tagName === 'HTML' || this.parentElement.tagName === 'BODY' ? document :\n this.parentElement;\n EventHandler.add(this.eventElement, 'scroll', this.makeStickyHeader, this);\n }\n else if (this.eventElement) {\n EventHandler.remove(this.eventElement, 'scroll', this.makeStickyHeader);\n this.eventElement = null;\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.resizeFrozenRowBorder = function () {\n var div;\n if (!this.parent.element.querySelector('.e-frozenrow-border')) {\n div = this.parent.createElement('div', { className: 'e-frozenrow-border' });\n this.parent.element.insertBefore(div, this.parent.element.querySelector('.e-gridcontent'));\n }\n else {\n div = this.parent.element.querySelector('.e-frozenrow-border');\n }\n var scrollWidth = this.parent.height !== 'auto' ? Scroll.getScrollBarWidth() : 0;\n div.style.width = (this.parent.element.offsetWidth - scrollWidth) - 0.5 + 'px';\n };\n Scroll.prototype.wireEvents = function () {\n var _this = this;\n if (this.oneTimeReady) {\n var frzCols = this.parent.isFrozenGrid();\n this.content = this.parent.getContent().querySelector('.' + literals.content);\n this.header = this.parent.getHeaderContent().querySelector('.' + literals.headerContent);\n var mScrollBar = this.parent.getContent().querySelector('.e-movablescrollbar');\n if (this.parent.frozenRows && this.header && this.content) {\n EventHandler.add(this.header, 'touchstart pointerdown', this.setPageXY(), this);\n EventHandler.add(this.header, 'touchmove pointermove', this.onTouchScroll(this.content), this);\n }\n if (frzCols && mScrollBar && this.parent.enableColumnVirtualization) {\n EventHandler.add(mScrollBar, 'scroll', this.onCustomScrollbarScroll(this.content, this.header), this);\n EventHandler.add(this.content, 'scroll', this.onCustomScrollbarScroll(mScrollBar, this.header), this);\n EventHandler.add(this.header, 'scroll', this.onCustomScrollbarScroll(mScrollBar, this.content), this);\n EventHandler.add(this.header, 'touchstart pointerdown', this.setPageXY(), this);\n EventHandler.add(this.header, 'touchmove pointermove', this.onTouchScroll(this.content), this);\n EventHandler.add(this.content, 'touchstart pointerdown', this.setPageXY(), this);\n if (!(/macintosh|ipad/.test(Browser.userAgent.toLowerCase()) && Browser.isDevice)) {\n EventHandler.add(this.content, 'touchmove pointermove', this.onTouchScroll(this.header), this);\n }\n }\n this.contentScrollHandler = this.onContentScroll(this.header);\n this.headerScrollHandler = this.onContentScroll(this.content);\n EventHandler.add(this.content, 'scroll', this.contentScrollHandler, this);\n EventHandler.add(this.header, 'scroll', this.headerScrollHandler, this);\n if (this.parent.aggregates.length) {\n EventHandler.add(this.parent.getFooterContent().firstChild, 'scroll', this.onContentScroll(this.content), this);\n }\n if (this.parent.enableStickyHeader) {\n this.addStickyListener(true);\n }\n this.refresh();\n this.oneTimeReady = false;\n }\n var table = this.parent.getContentTable();\n var sLeft;\n var sHeight;\n var clientHeight;\n getUpdateUsingRaf(function () {\n sLeft = _this.header.scrollLeft;\n sHeight = table.scrollHeight;\n clientHeight = _this.parent.getContent().clientHeight;\n }, function () {\n var args = { cancel: false };\n _this.parent.notify(checkScrollReset, args);\n if (sHeight < clientHeight && _this.parent.height !== 'auto') {\n _this.setLastRowCell();\n }\n if (_this.parent.frozenRows) {\n _this.resizeFrozenRowBorder();\n }\n if (!_this.parent.enableVirtualization && !_this.parent.enableInfiniteScrolling) {\n if (!args.cancel) {\n _this.header.scrollLeft = _this.previousValues.left;\n _this.content.scrollLeft = _this.previousValues.left;\n _this.content.scrollTop = _this.previousValues.top;\n }\n }\n if (!_this.parent.enableColumnVirtualization) {\n _this.content.scrollLeft = sLeft;\n if (_this.parent.isFrozenGrid()) {\n _this.previousValues.left = sLeft;\n }\n }\n });\n this.parent.isPreventScrollEvent = false;\n };\n /**\n * @returns {void} returns void\n * @hidden\n */\n Scroll.prototype.setLastRowCell = function () {\n var table = this.parent.getContentTable();\n if (table.querySelector('tr:nth-last-child(2)')) {\n removeClass(table.querySelector('tr:nth-last-child(2)').querySelectorAll('td'), 'e-lastrowcell');\n }\n addClass(table.querySelectorAll('tr:last-child td'), 'e-lastrowcell');\n };\n /**\n * @param {boolean} rtl - specifies the rtl\n * @returns {ScrollCss} returns the ScrollCss\n * @hidden\n */\n Scroll.prototype.getCssProperties = function (rtl) {\n var css = {};\n var enableRtl = isNullOrUndefined(rtl) ? this.parent.enableRtl : rtl;\n css.border = enableRtl ? 'borderLeftWidth' : 'borderRightWidth';\n css.padding = enableRtl ? 'paddingLeft' : 'paddingRight';\n return css;\n };\n Scroll.prototype.ensureOverflow = function (content) {\n content.style.overflowY = this.parent.height === 'auto' ? 'auto' : 'scroll';\n };\n Scroll.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n this.setPadding();\n this.oneTimeReady = true;\n if (this.parent.height === 'auto') {\n this.removePadding();\n }\n this.wireEvents();\n this.setHeight();\n var width = 'width';\n this.setWidth(!isNullOrUndefined(e.properties[\"\" + width]));\n };\n Scroll.prototype.makeStickyHeader = function () {\n if (this.parent.enableStickyHeader && this.parent.element && this.parent.getContent()) {\n var contentRect = this.parent.getContent().getClientRects()[0];\n if (contentRect) {\n var headerEle = this.parent.getHeaderContent();\n var toolbarEle = this.parent.element.querySelector('.e-toolbar');\n var groupHeaderEle = this.parent.element.querySelector('.e-groupdroparea');\n var height = headerEle.offsetHeight + (toolbarEle ? toolbarEle.offsetHeight : 0) +\n (groupHeaderEle ? groupHeaderEle.offsetHeight : 0);\n var parentTop = this.parentElement.getClientRects()[0].top;\n var top_1 = contentRect.top - (parentTop < 0 ? 0 : parentTop);\n var left = contentRect.left;\n var colMenuEle = document.body.querySelector('#' + this.parent.element.id + '_columnmenu');\n if (top_1 < height && contentRect.bottom > 0) {\n headerEle.classList.add('e-sticky');\n var elemTop = 0;\n if (groupHeaderEle && this.parent.groupSettings.showDropArea) {\n this.setSticky(groupHeaderEle, elemTop, contentRect.width, left, true);\n elemTop += groupHeaderEle.getClientRects()[0].height;\n }\n if (toolbarEle) {\n this.setSticky(toolbarEle, elemTop, contentRect.width, left, true);\n elemTop += toolbarEle.getClientRects()[0].height;\n }\n this.setSticky(headerEle, elemTop, contentRect.width, left, true);\n if (!isNullOrUndefined(colMenuEle)) {\n colMenuEle.style.position = 'fixed';\n colMenuEle.style.top = height + 'px';\n }\n }\n else {\n if (headerEle.classList.contains('e-sticky')) {\n this.setSticky(headerEle, null, null, null, false);\n if (toolbarEle) {\n this.setSticky(toolbarEle, null, null, null, false);\n }\n if (groupHeaderEle) {\n this.setSticky(groupHeaderEle, null, null, null, false);\n }\n var ccDlg = this.parent.element.querySelector('.e-ccdlg');\n if (ccDlg) {\n ccDlg.classList.remove('e-sticky');\n }\n if (!isNullOrUndefined(colMenuEle)) {\n colMenuEle.style.position = 'absolute';\n var topStyle = contentRect.top - parentTop;\n colMenuEle.style.top = topStyle + 'px';\n }\n }\n }\n this.parent.notify(events.stickyScrollComplete, {});\n }\n }\n };\n Scroll.prototype.setSticky = function (ele, top, width, left, isAdd) {\n if (isAdd) {\n ele.style.width = width + 'px';\n ele.classList.add('e-sticky');\n }\n else {\n ele.classList.remove('e-sticky');\n }\n ele.style.top = top != null ? top + 'px' : '';\n ele.style.left = left !== null ? parseInt(ele.style.left, 10) !== left ? left + 'px' : ele.style.left : '';\n };\n /**\n * @returns {void}\n * @hidden\n */\n Scroll.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (!gridElement || (!gridElement.querySelector('.' + literals.gridHeader) && !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n this.removeEventListener();\n //Remove Dom event\n var cont = this.parent.getContent().querySelector('.' + literals.content);\n EventHandler.remove(cont, 'scroll', this.onContentScroll);\n if (this.parent.enableStickyHeader) {\n this.addStickyListener(false);\n }\n //Remove padding\n this.removePadding();\n removeClass([this.parent.getHeaderContent().querySelector('.' + literals.headerContent)], literals.headerContent);\n removeClass([cont], literals.content);\n //Remove height\n cont.style.height = '';\n //Remove width\n this.parent.element.style.width = '';\n };\n /**\n * Function to get the scrollbar width of the browser.\n *\n * @returns {number} return the width\n * @hidden\n */\n Scroll.getScrollBarWidth = function () {\n return getScrollBarWidth();\n };\n return Scroll;\n}());\nexport { Scroll };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { Row } from '../models/row';\nimport { Column } from '../models/column';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { calculateAggregate, getUid } from '../base/util';\nimport { CellType } from '../base/enum';\nimport { Cell } from '../models/cell';\n/**\n * Summary row model generator\n *\n * @hidden\n */\nvar SummaryModelGenerator = /** @class */ (function () {\n /**\n * Constructor for Summary row model generator\n *\n * @param {IGrid} parent - specifies the IGrid\n */\n function SummaryModelGenerator(parent) {\n this.parent = parent;\n }\n SummaryModelGenerator.prototype.getData = function () {\n var _this = this;\n var rows = [];\n var row = this.parent.aggregates.slice();\n for (var i = 0; i < row.length; i++) {\n var columns = row[parseInt(i.toString(), 10)].columns.filter(function (column) {\n return !(column.footerTemplate || column.groupFooterTemplate || column.groupCaptionTemplate)\n || _this.columnSelector(column);\n });\n if (columns.length) {\n rows.push({ columns: columns });\n }\n }\n return rows;\n };\n SummaryModelGenerator.prototype.columnSelector = function (column) {\n return column.footerTemplate !== undefined;\n };\n SummaryModelGenerator.prototype.getColumns = function (start) {\n var columns = [];\n if (this.parent.detailTemplate || !isNullOrUndefined(this.parent.childGrid)) {\n columns.push(new Column({}));\n }\n if (this.parent.allowGrouping) {\n for (var i = 0; i < this.parent.groupSettings.columns.length; i++) {\n columns.push(new Column({}));\n }\n }\n if (this.parent.isRowDragable() && !start) {\n columns.push(new Column({}));\n }\n columns.push.apply(columns, this.parent.getColumns());\n return columns;\n };\n SummaryModelGenerator.prototype.generateRows = function (input, args, start, end, columns) {\n if (input.length === 0) {\n if (args === undefined || !args.count) {\n return [];\n }\n }\n var data = this.buildSummaryData(input, args);\n var rows = [];\n var row = this.getData();\n for (var i = 0; i < row.length; i++) {\n rows.push(this.getGeneratedRow(row[parseInt(i.toString(), 10)], data[parseInt(i.toString(), 10)], args ? args.level : undefined, start, end, args ? args.parentUid : undefined, columns));\n }\n return rows;\n };\n SummaryModelGenerator.prototype.getGeneratedRow = function (summaryRow, data, raw, start, end, parentUid, columns) {\n var tmp = [];\n var indents = this.getIndentByLevel();\n var isDetailGridAlone = !isNullOrUndefined(this.parent.childGrid);\n var indentLength = this.parent.getIndentCount();\n if (this.parent.groupSettings.columns.length && this.parent.allowRowDragAndDrop) {\n indents.push('e-indentcelltop');\n }\n else if (this.parent.isRowDragable() && !start) {\n indents = ['e-indentcelltop'];\n }\n var values = columns ? columns : this.getColumns(start);\n for (var i = 0; i < values.length; i++) {\n tmp.push(this.getGeneratedCell(values[parseInt(i.toString(), 10)], summaryRow, i >= indentLength ? this.getCellType() :\n i === 0 && this.parent.childGrid ? CellType.DetailFooterIntent : CellType.Indent, indents[parseInt(i.toString(), 10)], isDetailGridAlone));\n }\n var row = new Row({ data: data, attributes: { class: 'e-summaryrow' } });\n row.cells = tmp;\n row.uid = getUid('grid-row');\n row.parentUid = parentUid;\n row.isAggregateRow = true;\n row.visible = tmp.some(function (cell) { return cell.isDataCell && cell.visible; });\n return row;\n };\n SummaryModelGenerator.prototype.getGeneratedCell = function (column, summaryRow, cellType, indent, isDetailGridAlone) {\n //Get the summary column by display\n var sColumn = summaryRow.columns.filter(function (scolumn) { return scolumn.columnName === column.field; })[0];\n var attrs = {\n 'style': { 'textAlign': column.textAlign },\n 'e-mappinguid': column.uid, index: column.index\n };\n if (indent) {\n attrs.class = indent;\n }\n if (isNullOrUndefined(indent) && isDetailGridAlone) {\n attrs.class = 'e-detailindentcelltop';\n }\n var opt = {\n 'visible': column.visible,\n 'isDataCell': !isNullOrUndefined(sColumn),\n 'isTemplate': sColumn && !isNullOrUndefined(sColumn.footerTemplate\n || sColumn.groupFooterTemplate || sColumn.groupCaptionTemplate),\n 'column': sColumn || {},\n 'attributes': attrs,\n 'cellType': cellType\n };\n opt.column.headerText = column.headerText;\n return new Cell(opt);\n };\n SummaryModelGenerator.prototype.buildSummaryData = function (data, args) {\n var dummy = [];\n var summaryRows = this.getData();\n var single = {};\n for (var i = 0; i < summaryRows.length; i++) {\n single = {};\n var column = summaryRows[parseInt(i.toString(), 10)].columns;\n for (var j = 0; j < column.length; j++) {\n single = this.setTemplate(column[parseInt(j.toString(), 10)], (args && args.aggregates) ? args : data, single);\n }\n dummy.push(single);\n }\n return dummy;\n };\n SummaryModelGenerator.prototype.getIndentByLevel = function () {\n return this.parent.groupSettings.columns.map(function () { return 'e-indentcelltop'; });\n };\n SummaryModelGenerator.prototype.setTemplate = function (column, data, single) {\n var types = column.type;\n var helper = {};\n var formatFn = column.getFormatter() || (function () { return function (a) { return a; }; })();\n var group = data;\n if (!(types instanceof Array)) {\n types = [column.type];\n }\n for (var i = 0; i < types.length; i++) {\n var key = column.field + ' - ' + types[parseInt(i.toString(), 10)].toLowerCase();\n var disp = column.columnName;\n var val = types[parseInt(i.toString(), 10)] !== 'Custom' && group.aggregates && key in group.aggregates ? group.aggregates[\"\" + key] :\n calculateAggregate(types[parseInt(i.toString(), 10)], group.aggregates ? group : data, column, this.parent);\n single[\"\" + disp] = single[\"\" + disp] || {};\n single[\"\" + disp][\"\" + key] = val;\n single[\"\" + disp][types[parseInt(i.toString(), 10)]] = !isNullOrUndefined(val) ? formatFn(val) : ' ';\n if (group.field) {\n single[\"\" + disp].field = group.field;\n single[\"\" + disp].key = group.key;\n }\n }\n helper.format = column.getFormatter();\n column.setTemplate(helper);\n return single;\n };\n SummaryModelGenerator.prototype.getCellType = function () {\n return CellType.Summary;\n };\n return SummaryModelGenerator;\n}());\nexport { SummaryModelGenerator };\nvar GroupSummaryModelGenerator = /** @class */ (function (_super) {\n __extends(GroupSummaryModelGenerator, _super);\n function GroupSummaryModelGenerator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n GroupSummaryModelGenerator.prototype.columnSelector = function (column) {\n return column.groupFooterTemplate !== undefined;\n };\n GroupSummaryModelGenerator.prototype.getIndentByLevel = function (level) {\n if (level === void 0) { level = this.parent.groupSettings.columns.length; }\n if (this.parent.allowRowDragAndDrop && this.parent.groupSettings.columns.length) {\n level -= 1;\n }\n return this.parent.groupSettings.columns.map(function (v, indx) { return indx <= level - 1 ? '' : 'e-indentcelltop'; });\n };\n GroupSummaryModelGenerator.prototype.getCellType = function () {\n return CellType.GroupSummary;\n };\n return GroupSummaryModelGenerator;\n}(SummaryModelGenerator));\nexport { GroupSummaryModelGenerator };\nvar CaptionSummaryModelGenerator = /** @class */ (function (_super) {\n __extends(CaptionSummaryModelGenerator, _super);\n function CaptionSummaryModelGenerator() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n CaptionSummaryModelGenerator.prototype.columnSelector = function (column) {\n return column.groupCaptionTemplate !== undefined;\n };\n CaptionSummaryModelGenerator.prototype.getData = function () {\n var initVal = { columns: [] };\n return [_super.prototype.getData.call(this).reduce(function (prev, cur) {\n prev.columns = prev.columns.concat(cur.columns);\n return prev;\n }, initVal)];\n };\n CaptionSummaryModelGenerator.prototype.isEmpty = function () {\n return (this.getData()[0].columns || []).length === 0;\n };\n CaptionSummaryModelGenerator.prototype.getCellType = function () {\n return CellType.CaptionSummary;\n };\n return CaptionSummaryModelGenerator;\n}(SummaryModelGenerator));\nexport { CaptionSummaryModelGenerator };\n","import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nexport var ButtonsDirective = vueDefineComponent({\n inject: { custom: { default: null } },\n render: function (createElement) {\n if (!isExecute) {\n var h = !isExecute ? gh : createElement;\n var slots = null;\n if (!isNullOrUndefined(this.$slots.default)) {\n slots = !isExecute ? this.$slots.default() : this.$slots.default;\n }\n return h('div', { class: 'e-directive' }, slots);\n }\n return;\n },\n updated: function () {\n if (!isExecute && this.custom) {\n this.custom();\n }\n },\n methods: {\n getTag: function () {\n return 'e-buttons';\n }\n }\n});\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 */\nexport var DialogButtonDirective = vueDefineComponent({\n render: function () {\n return;\n },\n methods: {\n getTag: function () {\n return 'e-dialogbutton';\n }\n }\n});\nexport var DialogButtonPlugin = {\n name: 'e-dialogbutton',\n install: function (Vue) {\n Vue.component(DialogButtonPlugin.name, DialogButtonDirective);\n }\n};\n","import { ComponentBase, gh, getProps, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { isUndefined } from '@syncfusion/ej2-base';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { ButtonsDirective, DialogButtonDirective, ButtonsPlugin, DialogButtonPlugin } from './buttons.directive';\nexport var properties = ['isLazyUpdate', 'plugins', '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'];\nexport var testProp = getProps({ props: properties });\nexport var props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);\nemitProbs.push('modelchanged', 'update:modelValue');\nfor (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {\n var props_1 = modelProps_1[_i];\n emitProbs.push('update:' + props_1);\n}\n/**\n * Represents the VueJS Dialog component\n * ```html\n *
\n * ```\n */\nexport var DialogComponent = vueDefineComponent({\n name: 'DialogComponent',\n mixins: [ComponentBase],\n props: props,\n watch: watch,\n emits: emitProbs,\n model: { event: 'modelchanged' },\n provide: function () { return { custom: this.custom }; },\n data: function () {\n return {\n ej2Instances: new Dialog({}),\n propKeys: properties,\n models: modelProps,\n hasChildDirective: true,\n hasInjectedModules: false,\n tagMapper: { \"e-buttons\": \"e-dialogbutton\" },\n tagNameMapper: {},\n isVue3: !isExecute,\n templateCollection: {},\n };\n },\n created: function () {\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 this.ej2Instances.clearTemplate = this.clearTemplate;\n this.updated = this.updated;\n },\n render: function (createElement) {\n var h = !isExecute ? gh : createElement;\n var slots = null;\n if (!isNullOrUndefined(this.$slots.default)) {\n slots = !isExecute ? this.$slots.default() : this.$slots.default;\n }\n return h('div', slots);\n },\n methods: {\n clearTemplate: function (templateNames) {\n if (!templateNames) {\n templateNames = Object.keys(this.templateCollection || {});\n }\n if (templateNames.length && this.templateCollection) {\n for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {\n var tempName = templateNames_1[_i];\n var elementCollection = this.templateCollection[tempName];\n if (elementCollection && elementCollection.length) {\n for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {\n var ele = elementCollection_1[_a];\n var destroy = getValue('__vue__.$destroy', ele);\n if (destroy) {\n ele.__vue__.$destroy();\n }\n if (ele.innerHTML) {\n ele.innerHTML = '';\n }\n }\n delete this.templateCollection[tempName];\n }\n }\n }\n },\n setProperties: function (prop, muteOnChange) {\n var _this = this;\n if (this.isVue3) {\n this.models = !this.models ? this.ej2Instances.referModels : this.models;\n }\n if (this.ej2Instances && this.ej2Instances._setProperties) {\n this.ej2Instances._setProperties(prop, muteOnChange);\n }\n if (prop && this.models && this.models.length) {\n Object.keys(prop).map(function (key) {\n _this.models.map(function (model) {\n if ((key === model) && !(/datasource/i.test(key))) {\n if (_this.isVue3) {\n _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);\n }\n else {\n _this.$emit('update:' + key, prop[key]);\n _this.$emit('modelchanged', prop[key]);\n }\n }\n });\n });\n }\n },\n trigger: function (eventName, eventProp, successHandler) {\n if (!isExecute) {\n this.models = !this.models ? this.ej2Instances.referModels : this.models;\n }\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 if (!isExecute) {\n this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);\n this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);\n this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);\n }\n else {\n if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {\n this.$emit('update:' + propKey, eventProp[propKey]);\n this.$emit('modelchanged', eventProp[propKey]);\n }\n }\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 if (!isExecute) {\n this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);\n this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);\n }\n else {\n this.$emit('update:' + propKey, eventProp[propKey]);\n this.$emit('modelchanged', eventProp[propKey]);\n }\n }\n }\n if ((this.ej2Instances && this.ej2Instances._trigger)) {\n this.ej2Instances._trigger(eventName, eventProp, successHandler);\n }\n },\n custom: function () {\n this.updated();\n },\n getButtons: function (index) {\n return this.ej2Instances.getButtons(index);\n },\n getDimension: function () {\n return this.ej2Instances.getDimension();\n },\n hide: function (event) {\n return this.ej2Instances.hide(event);\n },\n refreshPosition: function () {\n return this.ej2Instances.refreshPosition();\n },\n sanitizeHelper: function (value) {\n return this.ej2Instances.sanitizeHelper(value);\n },\n show: function (isFullScreen) {\n return this.ej2Instances.show(isFullScreen);\n },\n }\n});\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","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.strikeThrough = 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 this.strike = false;\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 _this.push(row);\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","/* eslint-disable */\nvar Utils = /** @class */ (function () {\n function Utils() {\n }\n Utils.bitReverse = function (value) {\n return (Utils.reverseBits[value & 15] << 12\n | Utils.reverseBits[(value >> 4) & 15] << 8\n | Utils.reverseBits[(value >> 8) & 15] << 4\n | Utils.reverseBits[value >> 12]);\n };\n Utils.bitConverterToInt32 = function (value, index) {\n return value[index] | value[index + 1] << 8 | value[index + 2] << 16 | value[index + 3] << 24;\n };\n Utils.bitConverterToInt16 = function (value, index) {\n return value[index] | value[index + 1] << 8;\n };\n Utils.bitConverterToUInt32 = function (value) {\n var uint = new Uint32Array(1);\n uint[0] = value;\n return uint[0];\n };\n Utils.bitConverterToUInt16 = function (value, index) {\n var uint = new Uint16Array(1);\n uint[0] = (value[index] | value[index + 1] << 8);\n return uint[0];\n };\n Utils.bitConverterUintToInt32 = function (value) {\n var uint = new Int32Array(1);\n uint[0] = value;\n return uint[0];\n };\n Utils.bitConverterInt32ToUint = function (value) {\n var uint = new Uint32Array(1);\n uint[0] = value;\n return uint[0];\n };\n Utils.bitConverterInt32ToInt16 = function (value) {\n var uint = new Int16Array(1);\n uint[0] = value;\n return uint[0];\n };\n Utils.byteToString = function (value) {\n var str = '';\n for (var i = 0; i < value.length; i++) {\n str += String.fromCharCode(value[i]);\n }\n return str;\n };\n Utils.byteIntToString = function (value) {\n var str = '';\n for (var i = 0; i < value.length; i++) {\n str += String.fromCharCode(value[i]);\n }\n return str;\n };\n Utils.arrayCopy = function (source, sourceIndex, destination, destinationIndex, dataToCopy) {\n var temp = new Uint8Array(source.buffer, sourceIndex);\n var data = temp.subarray(0, dataToCopy);\n destination.set(data, destinationIndex);\n };\n Utils.mergeArray = function (arrayOne, arrayTwo) {\n var mergedArray = new Uint8Array(arrayOne.length + arrayTwo.length);\n mergedArray.set(arrayOne);\n mergedArray.set(arrayTwo, arrayOne.length);\n return mergedArray;\n };\n /**\n * @private\n */\n Utils.encodedString = function (input) {\n var keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';\n var chr1;\n var chr2;\n var chr3;\n var encode1;\n var encode2;\n var encode3;\n var encode4;\n var count = 0;\n var resultIndex = 0;\n /*let dataUrlPrefix: string = 'data:';*/\n input = input.replace(/[^A-Za-z0-9\\+\\/\\=]/g, '');\n var totalLength = input.length * 3 / 4;\n if (input.charAt(input.length - 1) === keyStr.charAt(64)) {\n totalLength--;\n }\n if (input.charAt(input.length - 2) === keyStr.charAt(64)) {\n totalLength--;\n }\n if (totalLength % 1 !== 0) {\n // totalLength is not an integer, the length does not match a valid\n // base64 content. That can happen if:\n // - the input is not a base64 content\n // - the input is *almost* a base64 content, with a extra chars at the\n // beginning or at the end\n // - the input uses a base64 variant (base64url for example)\n throw new Error('Invalid base64 input, bad content length.');\n }\n var output = new Uint8Array(totalLength | 0);\n while (count < input.length) {\n encode1 = keyStr.indexOf(input.charAt(count++));\n encode2 = keyStr.indexOf(input.charAt(count++));\n encode3 = keyStr.indexOf(input.charAt(count++));\n encode4 = keyStr.indexOf(input.charAt(count++));\n chr1 = (encode1 << 2) | (encode2 >> 4);\n chr2 = ((encode2 & 15) << 4) | (encode3 >> 2);\n chr3 = ((encode3 & 3) << 6) | encode4;\n output[resultIndex++] = chr1;\n if (encode3 !== 64) {\n output[resultIndex++] = chr2;\n }\n if (encode4 !== 64) {\n output[resultIndex++] = chr3;\n }\n }\n return output;\n };\n Utils.reverseBits = [0, 8, 4, 12, 2, 10, 6, 14, 1, 9, 5, 13, 3, 11, 7, 15];\n Utils.huffCodeLengthOrders = [16, 17, 18, 0, 8, 7, 9, 6, 10, 5, 11, 4, 12, 3, 13, 2, 14, 1, 15];\n return Utils;\n}());\nexport { Utils };\n/* eslint-enable */ \n","/* eslint-disable */\nimport { Utils } from './index';\nvar DecompressorHuffmanTree = /** @class */ (function () {\n function DecompressorHuffmanTree(lengths) {\n this.buildTree(lengths);\n }\n DecompressorHuffmanTree.init = function () {\n var lengths;\n var index;\n // Generate huffman tree for lengths.\n lengths = new Uint8Array(288);\n index = 0;\n while (index < 144) {\n lengths[index++] = 8;\n }\n while (index < 256) {\n lengths[index++] = 9;\n }\n while (index < 280) {\n lengths[index++] = 7;\n }\n while (index < 288) {\n lengths[index++] = 8;\n }\n DecompressorHuffmanTree.m_LengthTree = new DecompressorHuffmanTree(lengths);\n // Generate huffman tree for distances.\n lengths = new Uint8Array(32);\n index = 0;\n while (index < 32) {\n lengths[index++] = 5;\n }\n DecompressorHuffmanTree.m_DistanceTree = new DecompressorHuffmanTree(lengths);\n };\n ///
\n /// Prepares data for generating huffman tree.\n /// \n ///
Array of counts of each code length.\n ///
Numerical values of the smallest code for each code length.\n ///
Array of code lengths.\n ///
Calculated tree size.\n ///
Code.\n DecompressorHuffmanTree.prototype.prepareData = function (blCount, nextCode, lengths) {\n var code = 0;\n var treeSize = 512;\n // Count number of codes for each code length.\n for (var i = 0; i < lengths.length; i++) {\n var length_1 = lengths[i];\n if (length_1 > 0) {\n blCount[length_1]++;\n }\n }\n for (var bits = 1; bits <= DecompressorHuffmanTree.MAX_BITLEN; bits++) {\n nextCode[bits] = code;\n code += blCount[bits] << (16 - bits);\n if (bits >= 10) {\n var start = nextCode[bits] & 0x1ff80;\n var end = code & 0x1ff80;\n treeSize += (end - start) >> (16 - bits);\n }\n }\n /* if( code != 65536 )\n throw new ZipException( \"Code lengths don't add up properly.\" );*/\n return { 'code': code, 'treeSize': treeSize };\n };\n ///
\n /// Generates huffman tree.\n /// \n ///
Array of counts of each code length.\n ///
Numerical values of the smallest code for each code length.\n ///
Precalculated code.\n ///
Array of code lengths.\n ///
Calculated size of the tree.\n ///
Generated tree.\n DecompressorHuffmanTree.prototype.treeFromData = function (blCount, nextCode, lengths, code, treeSize) {\n var tree = new Int16Array(treeSize);\n var pointer = 512;\n var increment = 1 << 7;\n for (var bits = DecompressorHuffmanTree.MAX_BITLEN; bits >= 10; bits--) {\n var end = code & 0x1ff80;\n code -= blCount[bits] << (16 - bits);\n var start = code & 0x1ff80;\n for (var i = start; i < end; i += increment) {\n tree[Utils.bitReverse(i)] = Utils.bitConverterInt32ToInt16((-pointer << 4) | bits);\n pointer += 1 << (bits - 9);\n }\n }\n for (var i = 0; i < lengths.length; i++) {\n var bits = lengths[i];\n if (bits == 0) {\n continue;\n }\n code = nextCode[bits];\n var revcode = Utils.bitReverse(code);\n if (bits <= 9) {\n do {\n tree[revcode] = Utils.bitConverterInt32ToInt16((i << 4) | bits);\n revcode += 1 << bits;\n } while (revcode < 512);\n }\n else {\n var subTree = tree[revcode & 511];\n var treeLen = 1 << (subTree & 15);\n subTree = -(subTree >> 4);\n do {\n tree[subTree | (revcode >> 9)] = Utils.bitConverterInt32ToInt16((i << 4) | bits);\n revcode += 1 << bits;\n } while (revcode < treeLen);\n }\n nextCode[bits] = code + (1 << (16 - bits));\n }\n return tree;\n };\n ///
\n /// Builds huffman tree from array of code lengths.\n /// \n ///
Array of code lengths.\n DecompressorHuffmanTree.prototype.buildTree = function (lengths) {\n // Count of codes for each code length.\n var blCount = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];\n // Numerical value of the smallest code for each code length.\n var nextCode = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];\n var prepareData = this.prepareData(blCount, nextCode, lengths);\n this.m_Tree = this.treeFromData(blCount, nextCode, lengths, prepareData.code, prepareData.treeSize);\n };\n ///
\n /// Reads and decompresses one symbol.\n /// \n ///
\n ///
\n DecompressorHuffmanTree.prototype.unpackSymbol = function (input) {\n var lookahead;\n var symbol;\n if ((lookahead = input.peekBits(9)) >= 0) {\n if ((symbol = this.m_Tree[lookahead]) >= 0) {\n input.skipBits((symbol & 15));\n return symbol >> 4;\n }\n var subtree = -(symbol >> 4);\n var bitlen = symbol & 15;\n if ((lookahead = input.peekBits(bitlen)) >= 0) {\n symbol = this.m_Tree[subtree | (lookahead >> 9)];\n input.skipBits((symbol & 15));\n return symbol >> 4;\n }\n else {\n var bits = input.availableBits;\n lookahead = input.peekBits(bits);\n symbol = this.m_Tree[subtree | (lookahead >> 9)];\n if ((symbol & 15) <= bits) {\n input.skipBits((symbol & 15));\n return symbol >> 4;\n }\n else {\n return -1;\n }\n }\n }\n else {\n var bits = input.availableBits;\n lookahead = input.peekBits(bits);\n symbol = this.m_Tree[lookahead];\n if (symbol >= 0 && (symbol & 15) <= bits) {\n input.skipBits((symbol & 15));\n return symbol >> 4;\n }\n else {\n return -1;\n }\n }\n };\n Object.defineProperty(DecompressorHuffmanTree, \"lengthTree\", {\n ///
\n /// GET huffman tree for encoding and decoding lengths.\n /// \n get: function () {\n return this.m_LengthTree;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(DecompressorHuffmanTree, \"distanceTree\", {\n ///
\n /// GET huffman tree for encoding and decoding distances.\n /// \n get: function () {\n return this.m_DistanceTree;\n },\n enumerable: true,\n configurable: true\n });\n ///
\n /// Maximum count of bits.\n /// \n DecompressorHuffmanTree.MAX_BITLEN = 15;\n return DecompressorHuffmanTree;\n}());\nexport { DecompressorHuffmanTree };\n/* eslint-enable */ \n","/* eslint-disable */\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 /// \n ///
Current checksum.\n ///
Data byte array.\n ///
Offset in the buffer.\n ///
Length of data to be used from the stream.\n ChecksumCalculator.ChecksumUpdate = function (checksum, buffer, offset, length) {\n var checkSumUInt = checksum;\n var s1 = checkSumUInt & 65535;\n var s2 = checkSumUInt >> this.DEF_CHECKSUM_BIT_OFFSET;\n while (length > 0) {\n var steps = Math.min(length, this.DEF_CHECKSUM_ITERATIONSCOUNT);\n length -= steps;\n while (--steps >= 0) {\n s1 = s1 + (buffer[offset++] & 255);\n s2 = s2 + s1;\n }\n s1 %= this.DEF_CHECKSUM_BASE;\n s2 %= this.DEF_CHECKSUM_BASE;\n }\n checkSumUInt = (s2 << this.DEF_CHECKSUM_BIT_OFFSET) | s1;\n checksum = checkSumUInt;\n };\n ///
\n /// Generates checksum by calculating checksum of the\n /// given buffer.\n /// \n ///
Data byte array.\n ///
Offset in the buffer.\n ///
Length of data to be used from the stream.\n ChecksumCalculator.ChecksumGenerate = function (buffer, offset, length) {\n var result = 1;\n ChecksumCalculator.ChecksumUpdate(result, buffer, offset, length);\n return result;\n };\n ///
\n /// Bits offset, used in adler checksum calculation.\n /// \n ChecksumCalculator.DEF_CHECKSUM_BIT_OFFSET = 16;\n ///
\n /// Lagrest prime, less than 65535\n /// \n ChecksumCalculator.DEF_CHECKSUM_BASE = 65521;\n ///
\n /// Count of iteration used in calculated of the adler checksumm.\n /// \n ChecksumCalculator.DEF_CHECKSUM_ITERATIONSCOUNT = 3800;\n return ChecksumCalculator;\n}());\nexport { ChecksumCalculator };\n/* eslint-enable */ \n","/* eslint-disable */\nimport { DecompressorHuffmanTree } from './decompressor-huffman-tree';\nimport { Utils } from './utils';\nimport { ChecksumCalculator } from './checksum-calculator';\nvar CompressedStreamReader = /** @class */ (function () {\n function CompressedStreamReader(stream, bNoWrap) {\n ///
\n /// Code lengths for the code length alphabet.\n /// \n this.defaultHuffmanDynamicTree = [16, 17, 18, 0, 8, 7, 9, 6, 10, 5, 11, 4, 12, 3, 13, 2, 14, 1, 15];\n ///
\n /// Mask for compression method to be decoded from 16-bit header.\n /// \n this.DEF_HEADER_METHOD_MASK = 15 << 8;\n ///
\n /// Mask for compression info to be decoded from 16-bit header.\n /// \n this.DEF_HEADER_INFO_MASK = 240 << 8;\n ///
\n /// Mask for check bits to be decoded from 16-bit header.\n /// \n this.DEF_HEADER_FLAGS_FCHECK = 31;\n ///
\n /// Mask for dictionary presence to be decoded from 16-bit header.\n /// \n this.DEF_HEADER_FLAGS_FDICT = 32;\n ///
\n /// Mask for compression level to be decoded from 16-bit header.\n /// \n this.DEF_HEADER_FLAGS_FLEVEL = 192;\n ///
\n /// Maximum size of the data window.\n /// \n this.DEF_MAX_WINDOW_SIZE = 65535;\n ///
\n /// Maximum length of the repeatable block.\n /// \n this.DEF_HUFFMAN_REPEATE_MAX = 258;\n ///
\n /// End of the block sign.\n /// \n this.DEF_HUFFMAN_END_BLOCK = 256;\n ///
\n /// Minimal length code.\n /// \n this.DEF_HUFFMAN_LENGTH_MINIMUMCODE = 257;\n ///
\n /// Maximal length code.\n /// \n this.DEF_HUFFMAN_LENGTH_MAXIMUMCODE = 285;\n ///
\n /// Maximal distance code.\n /// \n this.DEF_HUFFMAN_DISTANCE_MAXIMUMCODE = 29;\n ///
\n /// Currently calculated checksum,\n /// based on Adler32 algorithm.\n /// \n this.mCheckSum = 1;\n ///
\n /// Currently read 4 bytes.\n /// \n this.tBuffer = 0;\n ///
\n /// Count of bits that are in buffer.\n /// \n this.mBufferedBits = 0;\n ///
\n /// Temporary buffer.\n /// \n this.mTempBuffer = new Uint8Array(4);\n ///
\n /// 32k buffer for unpacked data.\n /// \n this.mBlockBuffer = new Uint8Array(this.DEF_MAX_WINDOW_SIZE);\n ///
\n /// No wrap mode.\n /// \n this.mbNoWrap = false;\n ///
\n /// Window size, can not be larger than 32k.\n /// \n this.mWindowSize = 0;\n ///
\n /// Current position in output stream.\n /// Current in-block position can be extracted by applying Int16.MaxValue mask.\n /// \n this.mCurrentPosition = 0;\n ///
\n /// Data length.\n /// Current in-block position can be extracted by applying Int16.MaxValue mask.\n /// \n this.mDataLength = 0;\n ///
\n /// Specifies wheather next block can to be read.\n /// Reading can be denied because the header of the last block have been read.\n /// \n this.mbCanReadNextBlock = true;\n ///
\n /// Specifies wheather user can read more data from stream.\n /// \n this.mbCanReadMoreData = true;\n ///
\n /// Specifies wheather checksum has been read.\n /// \n this.mbCheckSumRead = false;\n if (stream == null) {\n throw new DOMException('stream');\n }\n if (stream.length === 0) {\n throw new DOMException('stream - string can not be empty');\n }\n DecompressorHuffmanTree.init();\n this.mInputStream = new Stream(stream);\n this.mbNoWrap = bNoWrap;\n if (!this.mbNoWrap) {\n this.readZLibHeader();\n }\n this.decodeBlockHeader();\n }\n Object.defineProperty(CompressedStreamReader.prototype, \"mBuffer\", {\n get: function () {\n return this.tBuffer;\n },\n set: function (value) {\n this.tBuffer = value;\n },\n enumerable: true,\n configurable: true\n });\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 ///
\n /// Reads specified count of bits without adjusting position.\n /// \n ///
Count of bits to be read.\n ///
Read value.\n CompressedStreamReader.prototype.peekBits = function (count) {\n if (count < 0) {\n throw new DOMException('count', 'Bits count can not be less than zero.');\n }\n if (count > 32) {\n throw new DOMException('count', 'Count of bits is too large.');\n }\n // If buffered data is not enough to give result,\n // fill buffer.\n if (this.mBufferedBits < count) {\n this.fillBuffer();\n }\n // If you want to read 4 bytes and there is partial data in\n // buffer, than you will fail.\n if (this.mBufferedBits < count) {\n return -1;\n }\n // Create bitmask for reading of count bits\n var bitMask = ~(4294967295 << count);\n var result = Utils.bitConverterUintToInt32(this.mBuffer & bitMask);\n //Debug.WriteLine( /*new string( ' ', 32 - mBufferedBits + (int)( ( 32 - mBufferedBits ) / 8 ) ) + BitsToString( (int)mBuffer, mBufferedBits ) + \" \" + BitsToString( result, count ) +*/ \" \" + result.ToString() );\n return result;\n };\n CompressedStreamReader.prototype.fillBuffer = function () {\n var length = 4 - (this.mBufferedBits >> 3) -\n (((this.mBufferedBits & 7) !== 0) ? 1 : 0);\n if (length === 0) {\n return;\n }\n //TODO: fix this\n var bytesRead = this.mInputStream.read(this.mTempBuffer, 0, length);\n for (var i = 0; i < bytesRead; i++) {\n this.mBuffer = Utils.bitConverterInt32ToUint(this.mBuffer |\n (Utils.bitConverterInt32ToUint(this.mTempBuffer[i] << this.mBufferedBits)));\n this.mBufferedBits += 8;\n }\n //TODO: fix this\n };\n ///
\n /// Skips specified count of bits.\n /// \n ///
Count of bits to be skipped.\n CompressedStreamReader.prototype.skipBits = function (count) {\n if (count < 0) {\n throw new DOMException('count', 'Bits count can not be less than zero.');\n }\n if (count === 0) {\n return;\n }\n if (count >= this.mBufferedBits) {\n count -= this.mBufferedBits;\n this.mBufferedBits = 0;\n this.mBuffer = 0;\n // if something left, skip it.\n if (count > 0) {\n // Skip entire bytes.\n this.mInputStream.position += (count >> 3); //TODO: fix this\n count &= 7;\n // Skip bits.\n if (count > 0) {\n this.fillBuffer();\n this.mBufferedBits -= count;\n this.mBuffer = Utils.bitConverterInt32ToUint(this.mBuffer >>> count);\n }\n }\n }\n else {\n this.mBufferedBits -= count;\n this.mBuffer = Utils.bitConverterInt32ToUint(this.mBuffer >>> count);\n }\n };\n Object.defineProperty(CompressedStreamReader.prototype, \"availableBits\", {\n get: function () {\n return this.mBufferedBits;\n },\n enumerable: true,\n configurable: true\n });\n ///
\n /// Reads ZLib header with compression method and flags.\n /// \n CompressedStreamReader.prototype.readZLibHeader = function () {\n // first 8 bits - compression Method and flags\n // 8 other - flags\n var header = this.readInt16();\n //Debug.WriteLine( BitsToString( header ) );\n if (header === -1) {\n throw new DOMException('Header of the stream can not be read.');\n }\n if (header % 31 !== 0) {\n throw new DOMException('Header checksum illegal');\n }\n if ((header & this.DEF_HEADER_METHOD_MASK) !== (8 << 8)) {\n throw new DOMException('Unsupported compression method.');\n }\n this.mWindowSize = Math.pow(2, ((header & this.DEF_HEADER_INFO_MASK) >> 12) + 8);\n if (this.mWindowSize > 65535) {\n throw new DOMException('Unsupported window size for deflate compression method.');\n }\n if ((header & this.DEF_HEADER_FLAGS_FDICT) >> 5 === 1) {\n // Get dictionary.\n throw new DOMException('Custom dictionary is not supported at the moment.');\n }\n };\n ///
\n /// TODO: place correct comment here\n /// \n ///
\n /// TODO: place correct comment here\n /// \n CompressedStreamReader.prototype.readInt16 = function () {\n var result = (this.readBits(8) << 8);\n result |= this.readBits(8);\n return result;\n };\n ///
\n /// Reads specified count of bits from stream.\n /// \n ///
Count of bits to be read.\n ///
\n /// TODO: place correct comment here\n /// \n CompressedStreamReader.prototype.readBits = function (count) {\n var result = this.peekBits(count);\n if (result === -1) {\n return -1;\n }\n this.mBufferedBits -= count;\n this.mBuffer = Utils.bitConverterInt32ToUint(this.mBuffer >>> count);\n return result;\n };\n ///
\n /// Reads and decodes block of data.\n /// \n ///
True if buffer was empty and new data was read, otherwise - False.\n CompressedStreamReader.prototype.decodeBlockHeader = function () {\n if (!this.mbCanReadNextBlock) {\n return false;\n }\n var bFinalBlock = this.readBits(1);\n if (bFinalBlock === -1) {\n return false;\n }\n var blockType = this.readBits(2);\n if (blockType === -1) {\n return false;\n }\n this.mbCanReadNextBlock = (bFinalBlock === 0);\n // ChecksumReset();\n switch (blockType) {\n case 0:\n // Uncompressed data\n this.mbReadingUncompressed = true;\n this.skipToBoundary();\n var length_1 = this.readInt16Inverted();\n var lengthComplement = this.readInt16Inverted();\n if (length_1 !== (lengthComplement ^ 0xffff)) {\n throw new DOMException('Wrong block length.');\n }\n if (length_1 > 65535) {\n throw new DOMException('Uncompressed block length can not be more than 65535.');\n }\n this.mUncompressedDataLength = length_1;\n this.mCurrentLengthTree = null;\n this.mCurrentDistanceTree = null;\n break;\n case 1:\n // Compressed data with fixed huffman codes.\n this.mbReadingUncompressed = false;\n this.mUncompressedDataLength = -1;\n this.mCurrentLengthTree = DecompressorHuffmanTree.lengthTree;\n this.mCurrentDistanceTree = DecompressorHuffmanTree.distanceTree;\n break;\n case 2:\n // Compressed data with dynamic huffman codes.\n this.mbReadingUncompressed = false;\n this.mUncompressedDataLength = -1;\n var trees = this.decodeDynamicHeader(this.mCurrentLengthTree, this.mCurrentDistanceTree);\n this.mCurrentLengthTree = trees.lengthTree;\n this.mCurrentDistanceTree = trees.distanceTree;\n break;\n default:\n throw new DOMException('Wrong block type.');\n }\n return true;\n };\n ///
\n /// Discards left-most partially used byte.\n /// \n CompressedStreamReader.prototype.skipToBoundary = function () {\n this.mBuffer = Utils.bitConverterInt32ToUint(this.mBuffer >>> (this.mBufferedBits & 7));\n this.mBufferedBits &= ~7;\n };\n ///
\n /// TODO: place correct comment here\n /// \n ///
\n /// TODO: place correct comment here\n /// \n CompressedStreamReader.prototype.readInt16Inverted = function () {\n var result = (this.readBits(8));\n result |= this.readBits(8) << 8;\n return result;\n };\n ///
\n /// Reades dynamic huffman codes from block header.\n /// \n ///
Literals/Lengths tree.\n ///
Distances tree.\n CompressedStreamReader.prototype.decodeDynamicHeader = function (lengthTree, distanceTree) {\n var bLastSymbol = 0;\n var iLengthsCount = this.readBits(5);\n var iDistancesCount = this.readBits(5);\n var iCodeLengthsCount = this.readBits(4);\n if (iLengthsCount < 0 || iDistancesCount < 0 || iCodeLengthsCount < 0) {\n throw new DOMException('Wrong dynamic huffman codes.');\n }\n iLengthsCount += 257;\n iDistancesCount += 1;\n var iResultingCodeLengthsCount = iLengthsCount + iDistancesCount;\n var arrResultingCodeLengths = new Uint8Array(iResultingCodeLengthsCount);\n var arrDecoderCodeLengths = new Uint8Array(19);\n iCodeLengthsCount += 4;\n var iCurrentCode = 0;\n while (iCurrentCode < iCodeLengthsCount) {\n var len = this.readBits(3);\n if (len < 0) {\n throw new DOMException('Wrong dynamic huffman codes.');\n }\n arrDecoderCodeLengths[this.defaultHuffmanDynamicTree[iCurrentCode++]] = len;\n }\n var treeInternalDecoder = new DecompressorHuffmanTree(arrDecoderCodeLengths);\n iCurrentCode = 0;\n for (;;) {\n var symbol = void 0;\n var bNeedBreak = false;\n symbol = treeInternalDecoder.unpackSymbol(this);\n while ((symbol & ~15) === 0) {\n arrResultingCodeLengths[iCurrentCode++] = bLastSymbol = symbol;\n if (iCurrentCode === iResultingCodeLengthsCount) {\n bNeedBreak = true;\n break;\n }\n symbol = treeInternalDecoder.unpackSymbol(this);\n }\n if (bNeedBreak) {\n break;\n }\n if (symbol < 0) {\n throw new DOMException('Wrong dynamic huffman codes.');\n }\n if (symbol >= 17) {\n bLastSymbol = 0;\n }\n else if (iCurrentCode === 0) {\n throw new DOMException('Wrong dynamic huffman codes.');\n }\n var miRepSymbol = symbol - 16;\n var bits = CompressedStreamReader.DEF_HUFFMAN_DYNTREE_REPEAT_BITS[miRepSymbol];\n var count = this.readBits(bits);\n if (count < 0) {\n throw new DOMException('Wrong dynamic huffman codes.');\n }\n count += CompressedStreamReader.DEF_HUFFMAN_DYNTREE_REPEAT_MINIMUMS[miRepSymbol];\n if (iCurrentCode + count > iResultingCodeLengthsCount) {\n throw new DOMException('Wrong dynamic huffman codes.');\n }\n while (count-- > 0) {\n arrResultingCodeLengths[iCurrentCode++] = bLastSymbol;\n }\n if (iCurrentCode === iResultingCodeLengthsCount) {\n break;\n }\n }\n var tempArray = new Uint8Array(iLengthsCount);\n tempArray.set(arrResultingCodeLengths.subarray(0, iLengthsCount), 0);\n //sourceArray, sourceIndex, destinationArray, destinationIndex, length\n //Array.copy( arrResultingCodeLengths, 0, tempArray, 0, iLengthsCount );\n lengthTree = new DecompressorHuffmanTree(tempArray);\n tempArray = arrResultingCodeLengths.slice(iLengthsCount, iLengthsCount + iDistancesCount);\n //Array.copy( arrResultingCodeLengths, iLengthsCount, tempArray, 0, iDistancesCount );\n distanceTree = new DecompressorHuffmanTree(tempArray);\n return { 'lengthTree': lengthTree, 'distanceTree': distanceTree };\n };\n ///
\n /// Decodes huffman codes.\n /// \n ///
True if some data was read.\n CompressedStreamReader.prototype.readHuffman = function () {\n var free = this.DEF_MAX_WINDOW_SIZE - (this.mDataLength - this.mCurrentPosition);\n var dataRead = false;\n //long maxdistance = DEF_MAX_WINDOW_SIZE >> 1;\n var readdata = {};\n // DEF_HUFFMAN_REPEATE_MAX - longest repeatable block, we should always reserve space for it because\n // if we should not, we will have buffer overrun.\n while (free >= this.DEF_HUFFMAN_REPEATE_MAX) {\n var symbol = void 0;\n symbol = this.mCurrentLengthTree.unpackSymbol(this);\n // Only codes 0..255 are valid independent symbols.\n while (((symbol) & ~0xff) === 0) {\n readdata[(this.mDataLength + 1) % this.DEF_MAX_WINDOW_SIZE] = symbol;\n this.mBlockBuffer[this.mDataLength++ % this.DEF_MAX_WINDOW_SIZE] = symbol;\n dataRead = true;\n if (--free < this.DEF_HUFFMAN_REPEATE_MAX) {\n return true;\n }\n //if( (mDataLength - mCurrentPosition ) < maxdistance ) return true;\n symbol = this.mCurrentLengthTree.unpackSymbol(this);\n }\n if (symbol < this.DEF_HUFFMAN_LENGTH_MINIMUMCODE) {\n if (symbol < this.DEF_HUFFMAN_END_BLOCK) {\n throw new DOMException('Illegal code.');\n }\n var numDataRead = dataRead ? 1 : 0;\n this.mbCanReadMoreData = this.decodeBlockHeader();\n var numReadMore = (this.mbCanReadMoreData) ? 1 : 0;\n return (numDataRead | numReadMore) ? true : false;\n }\n if (symbol > this.DEF_HUFFMAN_LENGTH_MAXIMUMCODE) {\n throw new DOMException('Illegal repeat code length.');\n }\n var iRepeatLength = CompressedStreamReader.DEF_HUFFMAN_REPEAT_LENGTH_BASE[symbol -\n this.DEF_HUFFMAN_LENGTH_MINIMUMCODE];\n var iRepeatExtraBits = CompressedStreamReader.DEF_HUFFMAN_REPEAT_LENGTH_EXTENSION[symbol -\n this.DEF_HUFFMAN_LENGTH_MINIMUMCODE];\n if (iRepeatExtraBits > 0) {\n var extra = this.readBits(iRepeatExtraBits);\n if (extra < 0) {\n throw new DOMException('Wrong data.');\n }\n iRepeatLength += extra;\n }\n // Unpack repeat distance.\n symbol = this.mCurrentDistanceTree.unpackSymbol(this);\n if (symbol < 0 || symbol > CompressedStreamReader.DEF_HUFFMAN_REPEAT_DISTANCE_BASE.length) {\n throw new DOMException('Wrong distance code.');\n }\n var iRepeatDistance = CompressedStreamReader.DEF_HUFFMAN_REPEAT_DISTANCE_BASE[symbol];\n iRepeatExtraBits = CompressedStreamReader.DEF_HUFFMAN_REPEAT_DISTANCE_EXTENSION[symbol];\n if (iRepeatExtraBits > 0) {\n var extra = this.readBits(iRepeatExtraBits);\n if (extra < 0) {\n throw new DOMException('Wrong data.');\n }\n iRepeatDistance += extra;\n }\n // Copy data in slow repeat mode\n for (var i = 0; i < iRepeatLength; i++) {\n this.mBlockBuffer[this.mDataLength % this.DEF_MAX_WINDOW_SIZE] =\n this.mBlockBuffer[(this.mDataLength - iRepeatDistance) % this.DEF_MAX_WINDOW_SIZE];\n this.mDataLength++;\n free--;\n }\n dataRead = true;\n }\n return dataRead;\n };\n ///
\n /// Reads data to buffer.\n /// \n ///
Output buffer for data.\n ///
Offset in output data.\n ///
Length of the data to be read.\n ///
Count of bytes actually read.\n CompressedStreamReader.prototype.read = function (buffer, offset, length) {\n if (buffer == null) {\n throw new DOMException('buffer');\n }\n if (offset < 0 || offset > buffer.length - 1) {\n throw new DOMException('offset', 'Offset does not belong to specified buffer.');\n }\n if (length < 0 || length > buffer.length - offset) {\n throw new DOMException('length', 'Length is illegal.');\n }\n var initialLength = length;\n while (length > 0) {\n // Read from internal buffer.\n if (this.mCurrentPosition < this.mDataLength) {\n // Position in buffer array.\n var inBlockPosition = (this.mCurrentPosition % this.DEF_MAX_WINDOW_SIZE);\n // We can not read more than we have in buffer at once,\n // and we not read more than till the array end.\n var dataToCopy = Math.min(this.DEF_MAX_WINDOW_SIZE - inBlockPosition, (this.mDataLength - this.mCurrentPosition));\n // Reading not more, than the rest of the buffer.\n dataToCopy = Math.min(dataToCopy, length);\n //sourceArray, sourceIndex, destinationArray, destinationIndex, length\n // Copy data.\n //Array.Copy( mBlockBuffer, inBlockPosition, buffer, offset, dataToCopy );\n //buffer.set(this.mBlockBuffer.slice(inBlockPosition, dataToCopy), offset);\n Utils.arrayCopy(this.mBlockBuffer, inBlockPosition, buffer, offset, dataToCopy);\n // Correct position, length,\n this.mCurrentPosition += dataToCopy;\n offset += dataToCopy;\n length -= dataToCopy;\n }\n else {\n if (!this.mbCanReadMoreData) {\n break;\n }\n var oldDataLength = this.mDataLength;\n if (!this.mbReadingUncompressed) {\n if (!this.readHuffman()) {\n break;\n }\n }\n else {\n if (this.mUncompressedDataLength === 0) {\n // If there is no more data in stream, just exit.\n this.mbCanReadMoreData = this.decodeBlockHeader();\n if (!(this.mbCanReadMoreData)) {\n break;\n }\n }\n else {\n // Position of the data end in block buffer.\n var inBlockPosition = (this.mDataLength % this.DEF_MAX_WINDOW_SIZE);\n var dataToRead = Math.min(this.mUncompressedDataLength, this.DEF_MAX_WINDOW_SIZE - inBlockPosition);\n var dataRead = this.readPackedBytes(this.mBlockBuffer, inBlockPosition, dataToRead);\n if (dataToRead !== dataRead) {\n throw new DOMException('Not enough data in stream.');\n }\n this.mUncompressedDataLength -= dataRead;\n this.mDataLength += dataRead;\n }\n }\n if (oldDataLength < this.mDataLength) {\n var start = (oldDataLength % this.DEF_MAX_WINDOW_SIZE);\n var end = (this.mDataLength % this.DEF_MAX_WINDOW_SIZE);\n if (start < end) {\n this.checksumUpdate(this.mBlockBuffer, start, end - start);\n }\n else {\n this.checksumUpdate(this.mBlockBuffer, start, this.DEF_MAX_WINDOW_SIZE - start);\n if (end > 0) {\n this.checksumUpdate(this.mBlockBuffer, 0, end);\n }\n }\n }\n }\n }\n if (!this.mbCanReadMoreData && !this.mbCheckSumRead && !this.mbNoWrap) {\n this.skipToBoundary();\n var checkSum = this.readInt32();\n //Debug.Assert( checkSum == mCheckSum, \"\" );\n if (checkSum !== this.mCheckSum) {\n throw new DOMException('Checksum check failed.');\n }\n this.mbCheckSumRead = true;\n }\n return initialLength - length;\n };\n ///
\n /// Reads array of bytes.\n /// \n ///
Output buffer.\n ///
Offset in output buffer.\n ///
Length of the data to be read.\n ///
Count of bytes actually read to the buffer.\n CompressedStreamReader.prototype.readPackedBytes = function (buffer, offset, length) {\n if (buffer == null) {\n throw new DOMException('buffer');\n }\n if (offset < 0 || offset > buffer.length - 1) {\n throw new DOMException('offset\", \"Offset can not be less than zero or greater than buffer length - 1.');\n }\n if (length < 0) {\n throw new DOMException('length\", \"Length can not be less than zero.');\n }\n if (length > buffer.length - offset) {\n throw new DOMException('length\", \"Length is too large.');\n }\n if ((this.mBufferedBits & 7) !== 0) {\n throw new DOMException('Reading of unalligned data is not supported.');\n }\n if (length === 0) {\n return 0;\n }\n var result = 0;\n while (this.mBufferedBits > 0 && length > 0) {\n buffer[offset++] = (this.mBuffer);\n this.mBufferedBits -= 8;\n this.mBuffer = Utils.bitConverterInt32ToUint(this.mBuffer >>> 8);\n length--;\n result++;\n }\n if (length > 0) {\n //TODO: Fix this.\n result += this.mInputStream.read(buffer, offset, length);\n }\n return result;\n };\n ///
\n /// TODO: place correct comment here\n /// \n ///
\n /// TODO: place correct comment here\n /// \n CompressedStreamReader.prototype.readInt32 = function () {\n var result = this.readBits(8) << 24;\n result |= this.readBits(8) << 16;\n result |= this.readBits(8) << 8;\n result |= this.readBits(8);\n return result;\n };\n ///
\n /// Updates checksum by calculating checksum of the\n /// given buffer and adding it to current value.\n /// \n ///
Data byte array.\n ///
Offset in the buffer.\n ///
Length of data to be used from the stream.\n CompressedStreamReader.prototype.checksumUpdate = function (buffer, offset, length) {\n ChecksumCalculator.ChecksumUpdate(this.mCheckSum, buffer, offset, length);\n };\n CompressedStreamReader.DEF_REVERSE_BITS = new Uint8Array([0, 8, 4, 12, 2, 10, 6, 14, 1, 9, 5, 13, 3, 11, 7, 15]);\n ///
\n /// Minimum count of repetions.\n /// \n CompressedStreamReader.DEF_HUFFMAN_DYNTREE_REPEAT_MINIMUMS = [3, 3, 11];\n ///
\n /// Bits, that responds for different repetion modes.\n /// \n CompressedStreamReader.DEF_HUFFMAN_DYNTREE_REPEAT_BITS = [2, 3, 7];\n ///
\n /// Length bases.\n /// \n CompressedStreamReader.DEF_HUFFMAN_REPEAT_LENGTH_BASE = [\n 3, 4, 5, 6, 7, 8, 9, 10, 11, 13, 15, 17, 19, 23, 27, 31,\n 35, 43, 51, 59, 67, 83, 99, 115, 131, 163, 195, 227, 258\n ];\n ///
\n /// Length extended bits count.\n /// \n CompressedStreamReader.DEF_HUFFMAN_REPEAT_LENGTH_EXTENSION = [\n 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2,\n 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 0\n ];\n ///
\n /// Distance bases.\n /// \n CompressedStreamReader.DEF_HUFFMAN_REPEAT_DISTANCE_BASE = [\n 1, 2, 3, 4, 5, 7, 9, 13, 17, 25, 33, 49, 65, 97, 129, 193,\n 257, 385, 513, 769, 1025, 1537, 2049, 3073, 4097, 6145,\n 8193, 12289, 16385, 24577\n ];\n ///
\n /// Distance extanded bits count.\n /// \n CompressedStreamReader.DEF_HUFFMAN_REPEAT_DISTANCE_EXTENSION = [\n 0, 0, 0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6,\n 7, 7, 8, 8, 9, 9, 10, 10, 11, 11,\n 12, 12, 13, 13\n ];\n return CompressedStreamReader;\n}());\nexport { CompressedStreamReader };\nvar Stream = /** @class */ (function () {\n function Stream(input) {\n this.position = 0;\n this.inputStream = new Uint8Array(input.buffer);\n }\n Object.defineProperty(Stream.prototype, \"length\", {\n get: function () {\n return this.inputStream.buffer.byteLength;\n },\n enumerable: true,\n configurable: true\n });\n Stream.prototype.read = function (buffer, start, length) {\n var temp = new Uint8Array(this.inputStream.buffer, this.position + start);\n var data = temp.subarray(0, length);\n buffer.set(data, 0);\n this.position += data.byteLength;\n return data.byteLength;\n };\n Stream.prototype.readByte = function () {\n return this.inputStream[this.position++];\n };\n Stream.prototype.write = function (inputBuffer, offset, count) {\n Utils.arrayCopy(inputBuffer, 0, this.inputStream, this.position + offset, count);\n // this.inputStream = new Uint8Array(this.inputStream.buffer, this.position + offset);\n // this.inputStream.set(inputBuffer, offset);\n this.position += count;\n };\n Stream.prototype.toByteArray = function () {\n return new Uint8Array(this.inputStream.buffer);\n };\n return Stream;\n}());\nexport { Stream };\n/* eslint-enable */ \n","/* eslint-disable */\nimport { CompressedStreamWriter, Stream, CompressedStreamReader } from './index';\nimport { Save } from '@syncfusion/ej2-file-utils';\nimport { Utils } from './utils';\nvar CRC32TABLE = [];\n///
\n/// Size of the int value in bytes.\n/// \nvar INT_SIZE = 4;\n///
\n/// Size of the short value in bytes.\n/// \nvar SHORT_SIZE = 2;\n///
\n/// End of central directory signature.\n/// \nvar CentralDirectoryEndSignature = 0x06054b50;\n///
\n/// Offset to the size field in the End of central directory record.\n/// \nvar CentralDirSizeOffset = 12;\n///
\n/// Central header signature.\n/// \nvar CentralHeaderSignature = 0x02014b50;\n///
\n/// Buffer size.\n/// \nvar BufferSize = 4096;\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, \"items\", {\n get: function () {\n return this.files;\n },\n enumerable: true,\n configurable: true\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 ZipArchive.prototype.open = function (base64String) {\n //return promise = new Promise((resolve: Function, reject: Function) => {\n var zipArchive = this;\n var zipByteArray = Utils.encodedString(base64String);\n if (zipByteArray.length == 0)\n throw new DOMException(\"stream\");\n var stream = new Stream(zipByteArray);\n //let lCentralDirEndPosition = this.findValueFromEnd( arrBuffer, Constants.CentralDirectoryEndSignature, 65557 );\n var lCentralDirEndPosition = ZipArchive.findValueFromEnd(stream, CentralDirectoryEndSignature, 65557);\n if (lCentralDirEndPosition < 0)\n throw new DOMException(\"Can't locate end of central directory record. Possible wrong file format or archive is corrupt.\");\n // Step2. Locate central directory and iterate through all items\n stream.position = lCentralDirEndPosition + CentralDirSizeOffset;\n var iCentralDirSize = ZipArchive.ReadInt32(stream);\n var lCentralDirPosition = lCentralDirEndPosition - iCentralDirSize;\n // verify that this is really central directory\n stream.position = lCentralDirPosition;\n this.readCentralDirectoryDataAndExtractItems(stream);\n //});\n // let zipArchive: ZipArchive = this;\n //let promise: Promise
;\n // return promise = new Promise((resolve: Function, reject: Function) => {\n // let reader: FileReader = new FileReader();\n // reader.onload = (e: Event) => {\n // let data: Uint8Array = new Uint8Array((e.target as any).result);\n // let zipReader: ZipReader = new ZipReader(data);\n // zipReader.readEntries().then((entries: ZipEntry[]) => {\n // for (let i: number = 0; i < entries.length; i++) {\n // let entry: ZipEntry = entries[i];\n // let item: ZipArchiveItem = new ZipArchiveItem(zipArchive, entry.fileName);\n // item.data = entry.data;\n // item.compressionMethod = entry.compressionMethod;\n // item.crc = entry.crc;\n // item.lastModified = entry.lastModified;\n // item.lastModifiedDate = entry.lastModifiedDate;\n // item.size = entry.size;\n // item.uncompressedSize = entry.uncompressedSize;\n // zipArchive.addItem(item);\n // }\n // resolve(zipArchive);\n // });\n // };\n // reader.readAsArrayBuffer(fileName);\n // });\n };\n /// \n /// Read central directory record from the stream.\n /// \n /// Stream to read from.\n ZipArchive.prototype.readCentralDirectoryDataAndExtractItems = function (stream) {\n if (stream == null)\n throw new DOMException(\"stream\");\n var itemHelper;\n while (ZipArchive.ReadInt32(stream) == CentralHeaderSignature) {\n itemHelper = new ZipArchiveItemHelper();\n itemHelper.readCentralDirectoryData(stream);\n itemHelper;\n // let item: ZipArchiveItem = new ZipArchiveItem(this);\n // item.ReadCentralDirectoryData(stream);\n // m_arrItems.Add(item);\n }\n itemHelper.readData(stream, itemHelper.checkCrc);\n itemHelper.decompressData();\n this.files.push(new ZipArchiveItem(itemHelper.unCompressedStream.buffer, itemHelper.name));\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 ZipArchive.findValueFromEnd = function (stream, value, maxCount) {\n if (stream == null)\n throw new DOMException(\"stream\");\n // if( !stream.CanSeek || !stream.CanRead )\n // throw new ArgumentOutOfRangeException( \"We need to have seekable and readable stream.\" );\n // read last 4 bytes and compare with required value\n var lStreamSize = stream.inputStream.buffer.byteLength;\n if (lStreamSize < 4)\n return -1;\n var arrBuffer = new Uint8Array(4);\n var lLastPos = Math.max(0, lStreamSize - maxCount);\n var lCurrentPosition = lStreamSize - 1 - INT_SIZE;\n stream.position = lCurrentPosition;\n stream.read(arrBuffer, 0, INT_SIZE);\n var uiCurValue = arrBuffer[0];\n var bFound = (uiCurValue == value);\n if (!bFound) {\n while (lCurrentPosition > lLastPos) {\n // remove unnecessary byte and replace it with new value.\n uiCurValue <<= 8;\n lCurrentPosition--;\n stream.position = lCurrentPosition;\n uiCurValue += stream.readByte();\n if (uiCurValue == value) {\n bFound = true;\n break;\n }\n }\n }\n return bFound ? lCurrentPosition : -1;\n };\n /// \n /// Extracts Int32 value from the stream.\n /// \n /// Stream to read data from.\n /// Extracted value.\n ZipArchive.ReadInt32 = function (stream) {\n var buffer = new Uint8Array(INT_SIZE);\n if (stream.read(buffer, 0, INT_SIZE) != INT_SIZE) {\n throw new DOMException(\"Unable to read value at the specified position - end of stream was reached.\");\n }\n return Utils.bitConverterToInt32(buffer, 0);\n };\n /// \n /// Extracts Int16 value from the stream.\n /// \n /// Stream to read data from.\n /// Extracted value.\n ZipArchive.ReadInt16 = function (stream) {\n var buffer = new Uint8Array(SHORT_SIZE);\n if (stream.read(buffer, 0, SHORT_SIZE) != SHORT_SIZE) {\n throw new DOMException(\"Unable to read value at the specified position - end of stream was reached.\");\n }\n return Utils.bitConverterToInt16(buffer, 0);\n };\n /// \n /// Extracts unsigned Int16 value from the stream.\n /// \n /// Stream to read data from.\n /// Extracted value.\n ZipArchive.ReadUInt16 = function (stream) {\n {\n var buffer = new Uint8Array(SHORT_SIZE);\n if (stream.read(buffer, 0, SHORT_SIZE) != SHORT_SIZE) {\n throw new DOMException(\"Unable to read value at the specified position - end of stream was reached.\");\n }\n return Utils.bitConverterToInt16(buffer, 0);\n }\n };\n return ZipArchive;\n}());\nexport { ZipArchive };\nvar ZipArchiveItemHelper = /** @class */ (function () {\n function ZipArchiveItemHelper() {\n /// \n /// Zip header signature.\n /// \n this.headerSignature = 0x04034b50;\n /// \n /// Indicates whether we should check Crc value when reading item's data. Check\n /// is performed when user gets access to decompressed data for the first time.\n /// \n this.checkCrc = true;\n /// \n /// Crc.\n /// \n this.crc32 = 0;\n }\n /// \n /// Read data from the stream based on the central directory.\n /// \n /// Stream to read data from, stream.Position must point at just after correct file header.\n ZipArchiveItemHelper.prototype.readCentralDirectoryData = function (stream) {\n // on the current moment we ignore \"version made by\" and \"version needed to extract\" fields.\n stream.position += 4;\n this.options = ZipArchive.ReadInt16(stream);\n this.compressionMethod = ZipArchive.ReadInt16(stream);\n this.checkCrc = (this.compressionMethod != 99); //COmpression.Defalte != SecurityConstants.AES\n //m_bCompressed = true;\n // on the current moment we ignore \"last mod file time\" and \"last mod file date\" fields.\n var lastModified = ZipArchive.ReadInt32(stream);\n //LastModified = ConvertToDateTime(lastModified);\n this.crc32 = Utils.bitConverterToUInt32(ZipArchive.ReadInt32(stream));\n this.compressedSize = ZipArchive.ReadInt32(stream);\n this.originalSize = ZipArchive.ReadInt32(stream);\n var iFileNameLength = ZipArchive.ReadInt16(stream);\n var iExtraFieldLenth = ZipArchive.ReadInt16(stream);\n var iCommentLength = ZipArchive.ReadInt16(stream);\n // on the current moment we ignore and \"disk number start\" (2 bytes),\n // \"internal file attributes\" (2 bytes).\n stream.position += 4;\n this.externalAttributes = ZipArchive.ReadInt32(stream);\n this.localHeaderOffset = ZipArchive.ReadInt32(stream);\n var arrBuffer = new Uint8Array(iFileNameLength);\n stream.read(arrBuffer, 0, iFileNameLength);\n var m_strItemName = Utils.byteToString(arrBuffer);\n m_strItemName = m_strItemName.replace(\"\\\\\", \"/\");\n this.name = m_strItemName;\n stream.position += iExtraFieldLenth + iCommentLength;\n if (this.options != 0)\n this.options = 0;\n };\n /// \n /// Reads zipped data from the stream.\n /// \n /// Stream to read data from.\n /// Indicates whether we should check crc value after data decompression.\n ZipArchiveItemHelper.prototype.readData = function (stream, checkCrc) {\n if (stream.length == 0)\n throw new DOMException(\"stream\");\n stream.position = this.localHeaderOffset;\n this.checkCrc = checkCrc;\n this.readLocalHeader(stream);\n this.readCompressedData(stream);\n };\n ZipArchiveItemHelper.prototype.decompressData = function () {\n if (this.compressionMethod == 8) {\n if (this.originalSize > 0) {\n this.decompressDataOld();\n }\n }\n };\n ZipArchiveItemHelper.prototype.decompressDataOld = function () {\n var reader = new CompressedStreamReader(this.compressedStream, true);\n var decompressedData;\n if (this.originalSize > 0)\n decompressedData = new Stream(new Uint8Array(this.originalSize));\n var arrBuffer = new Uint8Array(BufferSize);\n var iReadBytes;\n var past = new Uint8Array(0);\n while ((iReadBytes = reader.read(arrBuffer, 0, BufferSize)) > 0) {\n // past = new Uint8Array(decompressedData.length);\n // let currentBlock: Uint8Array = arrBuffer.subarray(0, iReadBytes);\n decompressedData.write(arrBuffer.subarray(0, iReadBytes), 0, iReadBytes);\n }\n this.unCompressedStream = decompressedData.toByteArray();\n // this.originalSize = decompressedData.Length;\n // m_bControlStream = true;\n // m_streamData = decompressedData;\n // decompressedData.SetLength( m_lOriginalSize );\n // decompressedData.Capacity = ( int )m_lOriginalSize;\n if (this.checkCrc) {\n //TODO: fix this\n //CheckCrc(decompressedData.ToArray());\n }\n //m_streamData.Position = 0;\n };\n /// \n /// Extracts local header from the stream.\n /// \n /// Stream to read data from.\n ZipArchiveItemHelper.prototype.readLocalHeader = function (stream) {\n if (stream.length == 0)\n throw new DOMException(\"stream\");\n if (ZipArchive.ReadInt32(stream) != this.headerSignature)\n throw new DOMException(\"Can't find local header signature - wrong file format or file is corrupt.\");\n // TODO: it is good to verify data read from the central directory record,\n // but on the current moment we simply skip it.\n stream.position += 22;\n var iNameLength = ZipArchive.ReadInt16(stream);\n var iExtraLength = ZipArchive.ReadUInt16(stream);\n if (this.compressionMethod == 99) //SecurityConstants.AES\n {\n // stream.Position += iNameLength + 8;\n // m_archive.EncryptionAlgorithm = (EncryptionAlgorithm)stream.ReadByte();\n // m_actualCompression = new byte[2];\n // stream.Read(m_actualCompression, 0, 2);\n }\n else if (iExtraLength > 2) {\n stream.position += iNameLength;\n var headerVal = ZipArchive.ReadInt16(stream);\n if (headerVal == 0x0017) //PKZipEncryptionHeader\n throw new DOMException(\"UnSupported\");\n else\n stream.position += iExtraLength - 2;\n }\n else\n stream.position += iNameLength + iExtraLength;\n };\n /// \n /// Extracts compressed data from the stream.\n /// \n /// Stream to read data from.\n ZipArchiveItemHelper.prototype.readCompressedData = function (stream) {\n var dataStream;\n if (this.compressedSize > 0) {\n var iBytesLeft = this.compressedSize;\n dataStream = new Stream(new Uint8Array(iBytesLeft));\n var arrBuffer = new Uint8Array(BufferSize);\n while (iBytesLeft > 0) {\n var iBytesToRead = Math.min(iBytesLeft, BufferSize);\n if (stream.read(arrBuffer, 0, iBytesToRead) != iBytesToRead)\n throw new DOMException(\"End of file reached - wrong file format or file is corrupt.\");\n dataStream.write(arrBuffer.subarray(0, iBytesToRead), 0, iBytesToRead);\n iBytesLeft -= iBytesToRead;\n }\n // if(m_archive.Password != null)\n // {\n // byte[] dataBuffer = new byte[dataStream.Length];\n // dataBuffer = dataStream.ToArray();\n // dataStream=new MemoryStream( Decrypt(dataBuffer));\n // }\n this.compressedStream = new Uint8Array(dataStream.inputStream);\n // m_bControlStream = true;\n }\n else if (this.compressedSize < 0) //If compression size is negative, then read until the next header signature reached.\n {\n // MemoryStream dataStream = new MemoryStream();\n // int bt = 0;\n // bool proceed=true;\n // while (proceed)\n // {\n // if ((bt = stream.ReadByte()) == Constants.HeaderSignatureStartByteValue)\n // {\n // stream.Position -= 1;\n // int headerSignature = ZipArchive.ReadInt32(stream);\n // if (headerSignature==Constants.CentralHeaderSignature || headerSignature==Constants.CentralHeaderSignature)\n // {\n // proceed = false;\n // }\n // stream.Position -= 3;\n // }\n // if (proceed)\n // dataStream.WriteByte((byte)bt);\n // }\n // m_streamData = dataStream;\n // m_lCompressedSize = m_streamData.Length;\n // m_bControlStream = true;\n }\n else if (this.compressedSize == 0) {\n // m_streamData = new MemoryStream();\n }\n };\n return ZipArchiveItemHelper;\n}());\nexport { ZipArchiveItemHelper };\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, \"dataStream\", {\n get: function () {\n return this.decompressedStream;\n },\n enumerable: true,\n configurable: true\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/* eslint-enable */ \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';\nimport { Encoding } from '@syncfusion/ej2-file-utils';\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 += '\\r\\n';\n count++;\n }\n this.parseRow(row);\n }\n else {\n throw Error('Row index is missing.');\n }\n }\n this.csvStr += '\\r\\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 || value.indexOf('\\\"') !== -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 /**\n * Returns a Blob object containing CSV data with optional encoding.\n * @param {string} [encodingType] - The supported encoding types are \"ansi\", \"unicode\" and \"utf8\".\n */\n /* tslint:disable:no-any */\n CsvHelper.prototype.saveAsBlob = function (encodingType) {\n if (encodingType != undefined) {\n var encoding = new Encoding();\n var encodeString = 'UTF-8';\n if (encodingType.toUpperCase() == \"ANSI\") {\n encoding.type = 'Ansi';\n encodeString = 'ANSI';\n }\n else if (encodingType.toUpperCase() == \"UNICODE\") {\n encoding.type = 'Unicode';\n encodeString = 'UNICODE';\n }\n else {\n encoding.type = 'Utf8';\n encodeString = 'UTF-8';\n }\n var buffer = encoding.getBytes(this.csvStr, 0, this.csvStr.length);\n return new Blob([buffer], { type: 'text/csv;charset=' + encodeString });\n }\n else\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 += '' + this.processString(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 += '' + this.processString(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 //strikeThrough\n if (json.strikeThrough !== null && json.strikeThrough !== undefined) {\n cellStyle.strikeThrough = json.strikeThrough;\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.changeNumberFormats = function (value) {\n if (typeof value == \"string\") {\n var regex = new RegExp(this.currency, 'g');\n value = value.replace(regex, '[$' + this.currency + ']');\n }\n else if (typeof value == \"object\") {\n for (var i = 0; i < value.length; i++) {\n value[i] = value[i].replace(this.currency, '[$' + this.currency + ']');\n }\n }\n return value;\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 if (this.currency.length > 1) {\n returnFormat = this.changeNumberFormats(returnFormat);\n }\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.strike === toCompareStyle.strikeThrough &&\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.strikeThrough === toCompareStyle.strikeThrough &&\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 /**\n * Returns a Promise with a Blob based on the specified BlobSaveType and optional encoding.\n * @param {BlobSaveType} blobSaveType - A string indicating the type of Blob to generate ('text/csv' or other).\n * @param {string} [encodingType] - The supported encoding types are \"ansi\", \"unicode\" and \"utf8\".\n */\n /* tslint:disable:no-any */\n Workbook.prototype.saveAsBlob = function (blobSaveType, encodingType) {\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(encodingType);\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 var sheetName = this.worksheets[i].name;\n sheetName = sheetName.replace(\"&\", \"&\");\n sheetName = sheetName.replace(\"<\", \"<\");\n sheetName = sheetName.replace(\">\", \">\");\n sheetName = sheetName.replace(\"\\\"\", \""\");\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 pic.lastRow -= 1;\n pic.lastColumn -= 1;\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 - 1].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 (typeof value == \"string\") {\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 if (value.indexOf('\\v') !== -1) {\n value = value.replace(/\\v/g, '_x000B_');\n }\n }\n else if (typeof value == \"object\") {\n for (var i = 0; i < value.length; i++) {\n if (value[i].indexOf('&') !== -1) {\n value[i] = value[i].replace(/&/g, '&');\n }\n if (value[i].indexOf('<') !== -1) {\n value[i] = value[i].replace(/') !== -1) {\n value[i] = value[i].replace(/>/g, '>');\n }\n if (value[i].indexOf('\\v') !== -1) {\n value[i] = value[i].replace(/\\v/g, '_x000B_');\n }\n }\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.strike = style.strikeThrough;\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 if (font.strike) {\n fontStyle += '\n * \n * ```\n */\nvar Toolbar = /** @class */ (function (_super) {\n __extends(Toolbar, _super);\n /**\n * Initializes a new instance of the Toolbar class.\n *\n * @param {ToolbarModel} options - Specifies Toolbar model properties as options.\n * @param { string | HTMLElement} 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 _this.orientationChangeContext = _this.orientationChange.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 *\n * @returns {void}.\n */\n Toolbar.prototype.destroy = function () {\n var _this = this;\n if (this.isReact || this.isAngular) {\n this.clearTemplate();\n }\n var btnItems = this.element.querySelectorAll('.e-control.e-btn');\n [].slice.call(btnItems).forEach(function (el) {\n if (!isNOU(el) && !isNOU(el.ej2_instances) && !isNOU(el.ej2_instances[0]) && !(el.ej2_instances[0].isDestroyed)) {\n el.ej2_instances[0].destroy();\n }\n });\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 this.destroyItems();\n while (this.element.lastElementChild) {\n this.element.removeChild(this.element.lastElementChild);\n }\n if (this.trgtEle) {\n this.element.appendChild(this.ctrlTem);\n this.trgtEle = null;\n this.ctrlTem = null;\n }\n if (this.popObj) {\n this.popObj.destroy();\n detach(this.popObj.element);\n }\n if (this.activeEle) {\n this.activeEle = null;\n }\n this.popObj = null;\n this.tbarAlign = null;\n this.tbarItemsCol = [];\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', 'role'].forEach(function (attrb) {\n return _this.element.removeAttribute(attrb);\n });\n _super.prototype.destroy.call(this);\n };\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\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 window.addEventListener('orientationchange', this.orientationChangeContext);\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.updateTabIndex('0');\n };\n Toolbar.prototype.updateTabIndex = function (tabIndex) {\n var ele = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');\n if (!isNOU(ele) && !isNOU(ele.firstElementChild)) {\n var dataTabIndex = ele.firstElementChild.getAttribute('data-tabindex');\n if (dataTabIndex && dataTabIndex === '-1' && ele.firstElementChild.tagName !== 'INPUT') {\n ele.firstElementChild.setAttribute('tabindex', tabIndex);\n }\n }\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 window.removeEventListener('orientationchange', this.orientationChangeContext);\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) { detach(el); });\n }\n if (this.tbarAlign) {\n var tbarItems = this.element.querySelector('.' + CLS_ITEMS);\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 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 var value = e.action === 'moveUp' ? 'previous' : 'next';\n var ele;\n var nodes;\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 if (clst) {\n var popupCheck = closest(clst, '.e-popup');\n var extendedPopup = this.element.querySelector('.' + CLS_EXTENDABLECLASS);\n if (this.overflowMode === 'Extended' && extendedPopup && extendedPopup.classList.contains('e-popup-open')) {\n popupCheck = e.action === 'end' ? extendedPopup : null;\n }\n if (popupCheck) {\n if (isVisible(this.popObj.element)) {\n nodes = [].slice.call(popupCheck.children);\n if (e.action === 'home') {\n ele = this.focusFirstVisibleEle(nodes);\n }\n else {\n ele = this.focusLastVisibleEle(nodes);\n }\n }\n }\n else {\n nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')');\n if (e.action === 'home') {\n ele = this.focusFirstVisibleEle(nodes);\n }\n else {\n ele = this.focusLastVisibleEle(nodes);\n }\n }\n if (ele) {\n this.elementFocus(ele);\n }\n }\n break;\n case 'moveUp':\n case 'moveDown':\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)) {\n popEle.lastElementChild.firstChild.focus();\n }\n else if (value === 'next' && popEle.lastElementChild === clst) {\n popFrstEle.firstChild.focus();\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 }\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 tbrNavChk = trgt.classList.contains(CLS_TBARNAV);\n var tbarScrollChk = trgt.classList.contains(CLS_TBARSCRLNAV);\n var 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 *\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 if (value) {\n rootEle.classList.add(CLS_DISABLE);\n }\n else {\n rootEle.classList.remove(CLS_DISABLE);\n }\n if (this.activeEle) {\n this.activeEle.setAttribute('tabindex', this.activeEle.getAttribute('data-tabindex'));\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 return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el) || !el.classList.contains(CLS_ITEM);\n };\n Toolbar.prototype.focusFirstVisibleEle = function (nodes) {\n var element;\n var index = 0;\n while (index < nodes.length) {\n var ele = nodes[parseInt(index.toString(), 10)];\n if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE)) {\n return ele;\n }\n index++;\n }\n return element;\n };\n Toolbar.prototype.focusLastVisibleEle = function (nodes) {\n var element;\n var index = nodes.length - 1;\n while (index >= 0) {\n var ele = nodes[parseInt(index.toString(), 10)];\n if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE)) {\n return ele;\n }\n index--;\n }\n return element;\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 else if (!isNOU(closest)) {\n var tbrItems = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')' + ':not(.' + CLS_DISABLE + ')' + ':not(.' + CLS_HIDDEN + ')');\n if (pos === 'next' && tbrItems) {\n this.elementFocus(tbrItems[0]);\n }\n else if (pos === 'previous' && tbrItems) {\n this.elementFocus(tbrItems[tbrItems.length - 1]);\n }\n }\n };\n Toolbar.prototype.clickHandler = function (e) {\n var _this = this;\n var trgt = e.target;\n var ele = this.element;\n var isPopupElement = !isNOU(closest(trgt, '.' + CLS_POPUPCLASS));\n var clsList = trgt.classList;\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 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 *\n * @private\n * @returns {void}\n */\n Toolbar.prototype.render = function () {\n var _this = this;\n this.initialize();\n this.renderControl();\n this.wireEvents();\n this.renderComplete();\n if (this.isReact && this.portals && this.portals.length > 0) {\n this.renderReactTemplates(function () {\n _this.refreshOverflow();\n });\n }\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',\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[parseInt(i.toString(), 10)], i);\n if (this.tbarEle.indexOf(innerItem) === -1) {\n this.tbarEle.push(innerItem);\n }\n if (!this.tbarAlign) {\n this.tbarItemAlign(items[parseInt(i.toString(), 10)], itemEleDom, i);\n }\n innerPos = itemEleDom.querySelector('.e-toolbar-' + items[parseInt(i.toString(), 10)].align.toLowerCase());\n if (innerPos) {\n if (!(items[parseInt(i.toString(), 10)].showAlwaysInPopup && items[parseInt(i.toString(), 10)].overflow !== 'Show')) {\n this.tbarAlgEle[(items[parseInt(i.toString(), 10)].align + 's').toLowerCase()].push(innerItem);\n }\n innerPos.appendChild(innerItem);\n }\n else {\n itemEleDom.appendChild(innerItem);\n }\n }\n if (this.isReact) {\n var portals = 'portals';\n this.notify('render-react-toolbar-template', this[\"\" + portals]);\n this.renderReactTemplates();\n }\n };\n /**\n * @hidden\n * @returns {void}\n */\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 if (this.cssClass) {\n addClass([innerItems[0]], this.cssClass.split(' '));\n }\n var scrollEle = this.scrollModule.element.querySelector('.' + CLS_HSCROLLBAR + ', .' + 'e-vscroll-bar');\n if (scrollEle) {\n scrollEle.removeAttribute('tabindex');\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 *\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 var ariaAttr = {\n 'tabindex': '0', 'role': 'button', 'aria-haspopup': 'true',\n 'aria-label': 'overflow'\n };\n attributes(this.element.querySelector('.' + CLS_TBARNAV), ariaAttr);\n };\n Toolbar.prototype.separator = function () {\n var element = this.element;\n var eleItem = [].slice.call(element.querySelectorAll('.' + CLS_SEPARATOR));\n var multiVar = element.querySelector('.' + CLS_MULTIROW_SEPARATOR);\n var extendVar = element.querySelector('.' + CLS_EXTENDABLE_SEPARATOR);\n var 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[parseInt(i.toString(), 10)].offsetLeft < 30 && eleItem[parseInt(i.toString(), 10)].offsetLeft !== 0) {\n if (this.overflowMode === 'MultiRow') {\n eleItem[parseInt(i.toString(), 10)].classList.add(CLS_MULTIROW_SEPARATOR);\n }\n else if (this.overflowMode === 'Extended') {\n eleItem[parseInt(i.toString(), 10)].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 poppedEle = [].slice.call(selectAll('.' + CLS_POPUP, element.querySelector('.' + CLS_ITEMS)));\n var nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);\n var nodeIndex = 0;\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[parseInt(index.toString(), 10)]);\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[parseInt(i.toString(), 10)];\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 sepHeight;\n var sepItem;\n if (this.overflowMode === 'Extended') {\n sepItem = element.querySelector('.' + CLS_SEPARATOR);\n sepHeight =\n (element.style.height === 'auto' || element.style.height === '') ? null : (sepItem && sepItem.offsetHeight);\n }\n var eleItem = element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_POPUP + ')');\n var eleHeight = (element.style.height === 'auto' || element.style.height === '') ? null : (eleItem && eleItem.offsetHeight);\n var ele;\n var popupPri = [];\n if (select('#' + element.id + '_popup.' + CLS_POPUPCLASS, element)) {\n ele = select('#' + element.id + '_popup.' + CLS_POPUPCLASS, element);\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 if (this.cssClass) {\n addClass([ele], this.cssClass.split(' '));\n }\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 if (this.overflowMode === 'Extended') {\n popup.width = parseFloat(eleStyles.width) + ((parseFloat(eleStyles.borderRightWidth)) * 2);\n popup.offsetX = 0;\n }\n popup.appendTo(ele);\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 }\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 if (isOpen) {\n this.add(this.element, CLS_EXTENDEDPOPOPEN);\n }\n else {\n this.remove(this.element, CLS_EXTENDEDPOPOPEN);\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\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 popupNav.setAttribute('aria-expanded', 'true');\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[parseInt(i.toString(), 10)];\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 var popupOffset = popupEle.getBoundingClientRect();\n if (popupOffset.right > document.documentElement.clientWidth && popupOffset.width > toolEle.getBoundingClientRect().width) {\n popObj.collision = { Y: 'none' };\n popObj.dataBind();\n }\n popObj.refreshPosition();\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Toolbar.prototype.popupClose = function (e) {\n var element = this.element;\n var popupNav = element.querySelector('.' + CLS_TBARNAV);\n popupNav.setAttribute('aria-expanded', 'false');\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[parseInt(i.toString(), 10)]);\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[parseInt(i.toString(), 10)] === this.tbarEle[0];\n if (fstEleCheck) {\n this.tbarEleMrgn = mrgn;\n }\n eleOffset = this.isVertical ? inEle[parseInt(i.toString(), 10)].offsetHeight : inEle[parseInt(i.toString(), 10)].offsetWidth;\n var eleWid_1 = fstEleCheck ? (eleOffset + mrgn) : eleOffset;\n if (checkClass(inEle[parseInt(i.toString(), 10)], [CLS_POPPRI]) && popPriority) {\n inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);\n if (this.isVertical) {\n setStyle(inEle[parseInt(i.toString(), 10)], { display: 'none', minHeight: eleWid_1 + 'px' });\n }\n else {\n setStyle(inEle[parseInt(i.toString(), 10)], { display: 'none', minWidth: eleWid_1 + 'px' });\n }\n itemPopCount++;\n }\n if (this.isVertical) {\n checkoffset =\n (inEle[parseInt(i.toString(), 10)].offsetTop + inEle[parseInt(i.toString(), 10)].offsetHeight + mrgn) > eleWidth;\n }\n else {\n checkoffset =\n (inEle[parseInt(i.toString(), 10)].offsetLeft + inEle[parseInt(i.toString(), 10)].offsetWidth + mrgn) > eleWidth;\n }\n if (checkoffset) {\n if (inEle[parseInt(i.toString(), 10)].classList.contains(CLS_SEPARATOR)) {\n if (this.overflowMode === 'Extended') {\n var sepEle = inEle[parseInt(i.toString(), 10)];\n if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);\n itemPopCount++;\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[parseInt(i.toString(), 10)].classList.contains(CLS_TBAROVERFLOW) && pre) {\n eleWidth -= ((this.isVertical ? inEle[parseInt(i.toString(), 10)].offsetHeight :\n inEle[parseInt(i.toString(), 10)].offsetWidth) + (mrgn));\n }\n else if (!checkClass(inEle[parseInt(i.toString(), 10)], [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);\n if (this.isVertical) {\n setStyle(inEle[parseInt(i.toString(), 10)], { display: 'none', minHeight: eleWid_1 + 'px' });\n }\n else {\n setStyle(inEle[parseInt(i.toString(), 10)], { display: 'none', minWidth: eleWid_1 + 'px' });\n }\n itemPopCount++;\n }\n else {\n eleWidth -= ((this.isVertical ? inEle[parseInt(i.toString(), 10)].offsetHeight :\n inEle[parseInt(i.toString(), 10)].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', 'button');\n element.appendChild(nav);\n };\n Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid, ig, eleStyles) {\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 eleSep.style.display = 'unset';\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 setStyle(el, eleStyles);\n if (prevSep.classList.contains(CLS_SEPARATOR)) {\n prevSep.style.display = 'none';\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 innerEle = ele.querySelector('.' + CLS_ITEMS);\n var popNav = ele.querySelector('.' + CLS_TBARNAV);\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 }\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 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 var inlineStyles = { minWidth: el.style.minWidth, height: el.style.height, minHeight: el.style.minHeight };\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[parseInt(index.toString(), 10)].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, inlineStyles);\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 var 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 if (this.enableRtl) {\n innerItem[2].style.top = popWid;\n }\n else {\n innerItem[2].style.bottom = popWid;\n }\n }\n else {\n if (this.enableRtl) {\n innerItem[2].style.left = popWid;\n }\n else {\n innerItem[2].style.right = popWid;\n }\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 if (this.enableRtl) {\n innerItem[1].style.marginBottom = mrgn;\n }\n else {\n innerItem[1].style.marginTop = mrgn;\n }\n }\n else {\n if (this.enableRtl) {\n innerItem[1].style.marginRight = mrgn;\n }\n else {\n innerItem[1].style.marginLeft = mrgn;\n }\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 if (!isNOU(ele.firstElementChild)) {\n ele.firstElementChild.setAttribute('aria-disabled', 'false');\n }\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[parseInt(i.toString(), 10)];\n if (keyVal === 'class') {\n this.add(element, attr[\"\" + keyVal]);\n }\n else {\n element.setAttribute(keyVal, attr[\"\" + keyVal]);\n }\n }\n };\n /**\n * Enables or disables the specified Toolbar item.\n *\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 if (!isNOU(ele.firstElementChild)) {\n ele.firstElementChild.setAttribute('aria-disabled', 'false');\n }\n }\n else {\n ele.classList.add(CLS_DISABLE);\n if (!isNOU(ele.firstElementChild)) {\n ele.firstElementChild.setAttribute('aria-disabled', 'true');\n }\n }\n };\n if (!isNOU(len) && len >= 1) {\n for (var a = 0, element = [].slice.call(elements); a < len; a++) {\n var itemElement = element[parseInt(a.toString(), 10)];\n if (typeof (itemElement) === 'number') {\n ele = this.getElementByIndex(itemElement);\n if (isNOU(ele)) {\n return;\n }\n else {\n elements[parseInt(a.toString(), 10)] = ele;\n }\n }\n else {\n ele = itemElement;\n }\n enable(isEnable, ele);\n }\n if (isEnable) {\n removeClass(elements, CLS_DISABLE);\n }\n else {\n addClass(elements, CLS_DISABLE);\n }\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[parseInt(index.toString(), 10)]) {\n return this.tbarEle[parseInt(index.toString(), 10)];\n }\n return null;\n };\n /**\n * Adds new items to the Toolbar that accepts an array as Toolbar items.\n *\n * @param {ItemModel[]} 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 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[parseInt(algIndex.toString(), 10)];\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[parseInt(algIndex.toString(), 10)];\n ele.insertBefore(innerEle, ele.children[parseInt(index.toString(), 10)]);\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[parseInt(index.toString(), 10)]);\n }\n this.items.splice(index, 0, item);\n if (item.template) {\n this.tbarEle.splice(this.tbarEle.length - 1, 1);\n }\n this.tbarEle.splice(index, 0, innerEle);\n index++;\n this.offsetWid = itemsDiv.offsetWidth;\n }\n }\n itemsDiv.style.width = '';\n this.renderOverflowMode();\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 *\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 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[parseInt(index.toString(), 10)] && innerItems[parseInt(index.toString(), 10)]) {\n var eleIdx = this.tbarEle.indexOf(innerItems[parseInt(index.toString(), 10)]);\n if (this.tbarAlign) {\n var indexAgn = this.tbarAlgEle[(this.items[parseInt(eleIdx.toString(), 10)].align + 's').toLowerCase()].indexOf(this.tbarEle[parseInt(eleIdx.toString(), 10)]);\n this.tbarAlgEle[(this.items[parseInt(eleIdx.toString(), 10)].align + 's').toLowerCase()].splice(parseInt(indexAgn.toString(), 10), 1);\n }\n if (this.isReact) {\n this.clearToolbarTemplate(innerItems[parseInt(index.toString(), 10)]);\n }\n var btnItem = innerItems[parseInt(index.toString(), 10)].querySelector('.e-control.e-btn');\n if (!isNOU(btnItem) && !isNOU(btnItem.ej2_instances[0]) && !(btnItem.ej2_instances[0].isDestroyed)) {\n btnItem.ej2_instances[0].destroy();\n }\n detach(innerItems[parseInt(index.toString(), 10)]);\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 var regEx = new RegExp(/<(?=.*? .*?\\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\\/\\1>/i);\n val = (typeof (templateProp) === 'string') ? templateProp.trim() : templateProp;\n try {\n if (typeof (templateProp) === 'object' && !isNOU(templateProp.tagName)) {\n innerEle.appendChild(templateProp);\n }\n else if (typeof (templateProp) === 'string' && regEx.test(val)) {\n innerEle.innerHTML = val;\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 else {\n templateFn = templateCompiler(val);\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, undefined, undefined, this.root);\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 if (item.id) {\n ele.id = item.id;\n }\n else {\n ele.id = getUniqueID('tbr-ipt');\n }\n innerEle.appendChild(ele);\n eleObj.appendTo(ele);\n }\n this.add(innerEle, CLS_TEMPLATE);\n var firstChild = innerEle.firstElementChild;\n if (!isNOU(firstChild)) {\n firstChild.setAttribute('tabindex', isNOU(firstChild.getAttribute(\"tabIndex\")) ? '-1' : this.getDataTabindex(firstChild));\n firstChild.setAttribute('data-tabindex', isNOU(firstChild.getAttribute(\"tabIndex\")) ? '-1' : this.getDataTabindex(firstChild));\n }\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 if (item.id) {\n dom.id = item.id;\n }\n else {\n dom.id = getUniqueID('e-tbr-btn');\n }\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 dom;\n var innerEle = this.createElement('div', { className: CLS_ITEM });\n var tempDom = this.createElement('div', {\n innerHTML: this.enableHtmlSanitizer && !isNOU(item.tooltipText) ?\n 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', isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString());\n dom.setAttribute('data-tabindex', isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString());\n dom.setAttribute('aria-label', (item.text || item.tooltipText));\n dom.setAttribute('aria-disabled', 'false');\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.getDataTabindex = function (ele) {\n return isNOU(ele.getAttribute('data-tabindex')) ? '-1' : ele.getAttribute('data-tabindex');\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', this.getDataTabindex(this.activeEle));\n }\n this.activeEle = curEle;\n if (this.getDataTabindex(this.activeEle) === '-1') {\n if (isNOU(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {\n this.updateTabIndex('-1');\n curEle.removeAttribute('tabindex');\n }\n else {\n var tabIndex = parseInt(this.getDataTabindex(this.activeEle)) + 1;\n this.activeEle.setAttribute('tabindex', tabIndex.toString());\n }\n }\n };\n Toolbar.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Returns the current module name.\n *\n * @returns {string} - Returns the module name as 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 if (this.isReact || this.isAngular) {\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 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.orientationChange = function () {\n var _this = this;\n setTimeout(function () {\n _this.resize();\n }, 500);\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 Toolbar.prototype.updateHideEleTabIndex = function (ele, isHidden, isElement, eleIndex, innerItems) {\n if (isElement) {\n eleIndex = innerItems.indexOf(ele);\n }\n var nextEle = innerItems[++eleIndex];\n while (nextEle) {\n var skipEle = this.eleContains(nextEle);\n if (!skipEle) {\n var dataTabIndex = nextEle.firstElementChild.getAttribute('data-tabindex');\n if (isHidden && dataTabIndex === '-1') {\n nextEle.firstElementChild.setAttribute('tabindex', '0');\n }\n else if (dataTabIndex !== nextEle.firstElementChild.getAttribute('tabindex')) {\n nextEle.firstElementChild.setAttribute('tabindex', dataTabIndex);\n }\n break;\n }\n nextEle = innerItems[++eleIndex];\n }\n };\n Toolbar.prototype.clearToolbarTemplate = function (templateEle) {\n if (this.registeredTemplate && this.registeredTemplate[\"\" + 'template']) {\n var registeredTemplates = this.registeredTemplate;\n for (var index = 0; index < registeredTemplates[\"\" + 'template'].length; index++) {\n var registeredItem = registeredTemplates[\"\" + 'template'][parseInt(index.toString(), 10)].rootNodes[0];\n var closestItem = closest(registeredItem, '.' + CLS_ITEM);\n if (!isNOU(closestItem) && closestItem === templateEle) {\n this.clearTemplate(['template'], [registeredTemplates[\"\" + 'template'][parseInt(index.toString(), 10)]]);\n break;\n }\n }\n }\n else if (this.portals && this.portals.length > 0) {\n var portals = this.portals;\n for (var index = 0; index < portals.length; index++) {\n var portalItem = portals[parseInt(index.toString(), 10)];\n var closestItem = closest(portalItem.containerInfo, '.' + CLS_ITEM);\n if (!isNOU(closestItem) && closestItem === templateEle) {\n this.clearTemplate(['template'], index);\n break;\n }\n }\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 *\n * @param {ToolbarModel} newProp - It contains new value of the data.\n * @param {ToolbarModel} oldProp - It contains old value of the data.\n * @returns {void}\n * @private\n */\n Toolbar.prototype.onPropertyChanged = function (newProp, oldProp) {\n var tEle = this.element;\n var wid = tEle.offsetWidth;\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)) {\n var changedProb = Object.keys(newProp.items);\n for (var i = 0; i < changedProb.length; i++) {\n var index = parseInt(Object.keys(newProp.items)[parseInt(i.toString(), 10)], 10);\n var property = Object.keys(newProp.items[parseInt(index.toString(), 10)])[0];\n var newProperty = Object(newProp.items[parseInt(index.toString(), 10)])[\"\" + 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[parseInt(index.toString(), 10)].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 if (this.isReact && this.items[parseInt(index.toString(), 10)].template) {\n this.clearToolbarTemplate(itemCol[parseInt(index.toString(), 10)]);\n }\n detach(itemCol[parseInt(index.toString(), 10)]);\n this.tbarEle.splice(index, 1);\n this.addItems([this.items[parseInt(index.toString(), 10)]], index);\n this.items.splice(index, 1);\n if (this.items[parseInt(index.toString(), 10)].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 setStyle(tEle, { 'width': formatUnit(newProp.width) });\n this.refreshOverflow();\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 if (newProp.enableRtl) {\n this.add(tEle, CLS_RTL);\n }\n else {\n this.remove(tEle, CLS_RTL);\n }\n if (!isNOU(this.scrollModule)) {\n if (newProp.enableRtl) {\n this.add(this.scrollModule.element, CLS_RTL);\n }\n else {\n this.remove(this.scrollModule.element, CLS_RTL);\n }\n }\n if (!isNOU(this.popObj)) {\n if (newProp.enableRtl) {\n this.add(this.popObj.element, CLS_RTL);\n }\n else {\n this.remove(this.popObj.element, CLS_RTL);\n }\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 *\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 ele;\n if (!isElement && isNOU(eleIndex)) {\n return;\n }\n var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (isElement) {\n ele = index;\n }\n else if (this.tbarEle[parseInt(eleIndex.toString(), 10)]) {\n var innerItems_1 = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n ele = innerItems_1[parseInt(eleIndex.toString(), 10)];\n }\n if (ele) {\n if (value) {\n ele.classList.add(CLS_HIDDEN);\n if (!ele.classList.contains(CLS_SEPARATOR)) {\n if (isNOU(ele.firstElementChild.getAttribute('tabindex')) ||\n ele.firstElementChild.getAttribute('tabindex') !== '-1') {\n this.updateHideEleTabIndex(ele, value, isElement, eleIndex, innerItems);\n }\n }\n }\n else {\n ele.classList.remove(CLS_HIDDEN);\n if (!ele.classList.contains(CLS_SEPARATOR)) {\n this.updateHideEleTabIndex(ele, value, isElement, eleIndex, innerItems);\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","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 { Touch, Component, EventHandler, selectAll, getUniqueID } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, Property, Browser, detach } from '@syncfusion/ej2-base';\nimport { classList, isNullOrUndefined } from '@syncfusion/ej2-base';\nvar CLS_ROOT = 'e-hscroll';\nvar CLS_RTL = 'e-rtl';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_HSCROLLBAR = 'e-hscroll-bar';\nvar CLS_HSCROLLCON = 'e-hscroll-content';\nvar CLS_NAVARROW = 'e-nav-arrow';\nvar CLS_NAVRIGHTARROW = 'e-nav-right-arrow';\nvar CLS_NAVLEFTARROW = 'e-nav-left-arrow';\nvar CLS_HSCROLLNAV = 'e-scroll-nav';\nvar CLS_HSCROLLNAVRIGHT = 'e-scroll-right-nav';\nvar CLS_HSCROLLNAVLEFT = 'e-scroll-left-nav';\nvar CLS_DEVICE = 'e-scroll-device';\nvar CLS_OVERLAY = 'e-scroll-overlay';\nvar CLS_RIGHTOVERLAY = 'e-scroll-right-overlay';\nvar CLS_LEFTOVERLAY = 'e-scroll-left-overlay';\nvar OVERLAY_MAXWID = 40;\n/**\n * HScroll module is introduces horizontal scroller when content exceeds the current viewing area.\n * It can be useful for the components like Toolbar, Tab which needs horizontal scrolling alone.\n * Hidden content can be view by touch moving or icon click.\n * ```html\n *
\n * \n * ```\n */\nvar HScroll = /** @class */ (function (_super) {\n __extends(HScroll, _super);\n /**\n * Initializes a new instance of the HScroll class.\n *\n * @param {HScrollModel} options - Specifies HScroll model properties as options.\n * @param {string | HTMLElement} element - Specifies the element for which horizontal scrolling applies.\n */\n function HScroll(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\n */\n HScroll.prototype.preRender = function () {\n this.browser = Browser.info.name;\n this.browserCheck = this.browser === 'mozilla';\n this.isDevice = Browser.isDevice;\n this.customStep = true;\n var element = this.element;\n this.ieCheck = this.browser === 'edge' || this.browser === 'msie';\n this.initialize();\n if (element.id === '') {\n element.id = getUniqueID('hscroll');\n this.uniqueId = true;\n }\n element.style.display = 'block';\n if (this.enableRtl) {\n element.classList.add(CLS_RTL);\n }\n };\n /**\n * To Initialize the horizontal scroll rendering\n *\n * @private\n * @returns {void}\n */\n HScroll.prototype.render = function () {\n this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this), swipe: this.swipeHandler.bind(this) });\n EventHandler.add(this.scrollEle, 'scroll', this.scrollHandler, this);\n if (!this.isDevice) {\n this.createNavIcon(this.element);\n }\n else {\n this.element.classList.add(CLS_DEVICE);\n this.createOverlay(this.element);\n }\n this.setScrollState();\n };\n HScroll.prototype.setScrollState = function () {\n if (isNullOrUndefined(this.scrollStep) || this.scrollStep < 0) {\n this.scrollStep = this.scrollEle.offsetWidth;\n this.customStep = false;\n }\n else {\n this.customStep = true;\n }\n };\n HScroll.prototype.initialize = function () {\n var scrollEle = this.createElement('div', { className: CLS_HSCROLLCON });\n var scrollDiv = this.createElement('div', { className: CLS_HSCROLLBAR });\n scrollDiv.setAttribute('tabindex', '-1');\n var ele = this.element;\n var innerEle = [].slice.call(ele.children);\n for (var _i = 0, innerEle_1 = innerEle; _i < innerEle_1.length; _i++) {\n var ele_1 = innerEle_1[_i];\n scrollEle.appendChild(ele_1);\n }\n scrollDiv.appendChild(scrollEle);\n ele.appendChild(scrollDiv);\n scrollDiv.style.overflowX = 'hidden';\n this.scrollEle = scrollDiv;\n this.scrollItems = scrollEle;\n };\n HScroll.prototype.getPersistData = function () {\n var keyEntity = ['scrollStep'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Returns the current module name.\n *\n * @returns {string} - It returns the current module name.\n * @private\n */\n HScroll.prototype.getModuleName = function () {\n return 'hScroll';\n };\n /**\n * Removes the control from the DOM and also removes all its related events.\n *\n * @returns {void}\n */\n HScroll.prototype.destroy = function () {\n var ele = this.element;\n ele.style.display = '';\n ele.classList.remove(CLS_ROOT);\n ele.classList.remove(CLS_DEVICE);\n ele.classList.remove(CLS_RTL);\n var nav = selectAll('.e-' + ele.id + '_nav.' + CLS_HSCROLLNAV, ele);\n var overlay = selectAll('.' + CLS_OVERLAY, ele);\n [].slice.call(overlay).forEach(function (ele) {\n detach(ele);\n });\n for (var _i = 0, _a = [].slice.call(this.scrollItems.children); _i < _a.length; _i++) {\n var elem = _a[_i];\n ele.appendChild(elem);\n }\n if (this.uniqueId) {\n this.element.removeAttribute('id');\n }\n detach(this.scrollEle);\n if (nav.length > 0) {\n detach(nav[0]);\n if (!isNullOrUndefined(nav[1])) {\n detach(nav[1]);\n }\n }\n EventHandler.remove(this.scrollEle, 'scroll', this.scrollHandler);\n this.touchModule.destroy();\n this.touchModule = null;\n _super.prototype.destroy.call(this);\n };\n /**\n * Specifies the value to disable/enable the HScroll component.\n * When set to `true` , the component will be disabled.\n *\n * @param {boolean} value - Based on this Boolean value, HScroll will be enabled (false) or disabled (true).\n * @returns {void}.\n */\n HScroll.prototype.disable = function (value) {\n var navEles = selectAll('.e-scroll-nav:not(.' + CLS_DISABLE + ')', this.element);\n if (value) {\n this.element.classList.add(CLS_DISABLE);\n }\n else {\n this.element.classList.remove(CLS_DISABLE);\n }\n [].slice.call(navEles).forEach(function (el) {\n el.setAttribute('tabindex', !value ? '0' : '-1');\n });\n };\n HScroll.prototype.createOverlay = function (element) {\n var id = element.id.concat('_nav');\n var rightOverlayEle = this.createElement('div', { className: CLS_OVERLAY + ' ' + CLS_RIGHTOVERLAY });\n var clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);\n var rightEle = this.createElement('div', { id: id.concat('_right'), className: clsRight });\n var navItem = this.createElement('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n rightEle.appendChild(navItem);\n var leftEle = this.createElement('div', { className: CLS_OVERLAY + ' ' + CLS_LEFTOVERLAY });\n if (this.ieCheck) {\n rightEle.classList.add('e-ie-align');\n }\n element.appendChild(rightOverlayEle);\n element.appendChild(rightEle);\n element.insertBefore(leftEle, element.firstChild);\n this.eventBinding([rightEle]);\n };\n HScroll.prototype.createNavIcon = function (element) {\n var id = element.id.concat('_nav');\n var clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);\n var rightAttributes = { 'role': 'button', 'id': id.concat('_right'), 'aria-label': 'Scroll right' };\n var nav = this.createElement('div', { className: clsRight, attrs: rightAttributes });\n nav.setAttribute('aria-disabled', 'false');\n var navItem = this.createElement('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n var clsLeft = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVLEFT);\n var leftAttributes = { 'role': 'button', 'id': id.concat('_left'), 'aria-label': 'Scroll left' };\n var navEle = this.createElement('div', { className: clsLeft + ' ' + CLS_DISABLE, attrs: leftAttributes });\n navEle.setAttribute('aria-disabled', 'true');\n var navLeftItem = this.createElement('div', { className: CLS_NAVLEFTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n navEle.appendChild(navLeftItem);\n nav.appendChild(navItem);\n element.appendChild(nav);\n element.insertBefore(navEle, element.firstChild);\n if (this.ieCheck) {\n nav.classList.add('e-ie-align');\n navEle.classList.add('e-ie-align');\n }\n this.eventBinding([nav, navEle]);\n };\n HScroll.prototype.onKeyPress = function (e) {\n var _this = this;\n if (e.key === 'Enter') {\n var timeoutFun_1 = function () {\n _this.keyTimeout = true;\n _this.eleScrolling(10, e.target, true);\n };\n this.keyTimer = window.setTimeout(function () {\n timeoutFun_1();\n }, 100);\n }\n };\n HScroll.prototype.onKeyUp = function (e) {\n if (e.key !== 'Enter') {\n return;\n }\n if (this.keyTimeout) {\n this.keyTimeout = false;\n }\n else {\n e.target.click();\n }\n clearTimeout(this.keyTimer);\n };\n HScroll.prototype.eventBinding = function (ele) {\n var _this = this;\n [].slice.call(ele).forEach(function (el) {\n new Touch(el, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });\n el.addEventListener('keydown', _this.onKeyPress.bind(_this));\n el.addEventListener('keyup', _this.onKeyUp.bind(_this));\n el.addEventListener('mouseup', _this.repeatScroll.bind(_this));\n el.addEventListener('touchend', _this.repeatScroll.bind(_this));\n el.addEventListener('contextmenu', function (e) {\n e.preventDefault();\n });\n EventHandler.add(el, 'click', _this.clickEventHandler, _this);\n });\n };\n HScroll.prototype.repeatScroll = function () {\n clearInterval(this.timeout);\n };\n HScroll.prototype.tabHoldHandler = function (e) {\n var _this = this;\n var trgt = e.originalEvent.target;\n trgt = this.contains(trgt, CLS_HSCROLLNAV) ? trgt.firstElementChild : trgt;\n var scrollDis = 10;\n var timeoutFun = function () {\n _this.eleScrolling(scrollDis, trgt, true);\n };\n this.timeout = window.setInterval(function () {\n timeoutFun();\n }, 50);\n };\n HScroll.prototype.contains = function (ele, className) {\n return ele.classList.contains(className);\n };\n HScroll.prototype.eleScrolling = function (scrollDis, trgt, isContinuous) {\n var rootEle = this.element;\n var classList = trgt.classList;\n if (classList.contains(CLS_HSCROLLNAV)) {\n classList = trgt.querySelector('.' + CLS_NAVARROW).classList;\n }\n if (this.contains(rootEle, CLS_RTL) && this.browserCheck) {\n scrollDis = -scrollDis;\n }\n if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {\n if (classList.contains(CLS_NAVRIGHTARROW)) {\n this.frameScrollRequest(scrollDis, 'add', isContinuous);\n }\n else {\n this.frameScrollRequest(scrollDis, '', isContinuous);\n }\n }\n else {\n if (classList.contains(CLS_NAVLEFTARROW)) {\n this.frameScrollRequest(scrollDis, 'add', isContinuous);\n }\n else {\n this.frameScrollRequest(scrollDis, '', isContinuous);\n }\n }\n };\n HScroll.prototype.clickEventHandler = function (e) {\n this.eleScrolling(this.scrollStep, e.target, false);\n };\n HScroll.prototype.swipeHandler = function (e) {\n var swipeEle = this.scrollEle;\n var distance;\n if (e.velocity <= 1) {\n distance = e.distanceX / (e.velocity * 10);\n }\n else {\n distance = e.distanceX / e.velocity;\n }\n var start = 0.5;\n var animate = function () {\n var step = Math.sin(start);\n if (step <= 0) {\n window.cancelAnimationFrame(step);\n }\n else {\n if (e.swipeDirection === 'Left') {\n swipeEle.scrollLeft += distance * step;\n }\n else if (e.swipeDirection === 'Right') {\n swipeEle.scrollLeft -= distance * step;\n }\n start -= 0.5;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n HScroll.prototype.scrollUpdating = function (scrollVal, action) {\n if (action === 'add') {\n this.scrollEle.scrollLeft += scrollVal;\n }\n else {\n this.scrollEle.scrollLeft -= scrollVal;\n }\n if (this.enableRtl && this.scrollEle.scrollLeft > 0) {\n this.scrollEle.scrollLeft = 0;\n }\n };\n HScroll.prototype.frameScrollRequest = function (scrollVal, action, isContinuous) {\n var _this = this;\n var step = 10;\n if (isContinuous) {\n this.scrollUpdating(scrollVal, action);\n return;\n }\n if (!this.customStep) {\n [].slice.call(selectAll('.' + CLS_OVERLAY, this.element)).forEach(function (el) {\n scrollVal -= el.offsetWidth;\n });\n }\n var animate = function () {\n var scrollValue;\n var scrollStep;\n if (_this.contains(_this.element, CLS_RTL) && _this.browserCheck) {\n scrollValue = -scrollVal;\n scrollStep = -step;\n }\n else {\n scrollValue = scrollVal;\n scrollStep = step;\n }\n if (scrollValue < step) {\n window.cancelAnimationFrame(scrollStep);\n }\n else {\n _this.scrollUpdating(scrollStep, action);\n scrollVal -= scrollStep;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n HScroll.prototype.touchHandler = function (e) {\n var ele = this.scrollEle;\n var distance = e.distanceX;\n if ((this.ieCheck) && this.contains(this.element, CLS_RTL)) {\n distance = -distance;\n }\n if (e.scrollDirection === 'Left') {\n ele.scrollLeft = ele.scrollLeft + distance;\n }\n else if (e.scrollDirection === 'Right') {\n ele.scrollLeft = ele.scrollLeft - distance;\n }\n };\n HScroll.prototype.arrowDisabling = function (addDisable, removeDisable) {\n if (this.isDevice) {\n var arrowEle = isNullOrUndefined(addDisable) ? removeDisable : addDisable;\n var arrowIcon = arrowEle.querySelector('.' + CLS_NAVARROW);\n if (isNullOrUndefined(addDisable)) {\n classList(arrowIcon, [CLS_NAVRIGHTARROW], [CLS_NAVLEFTARROW]);\n }\n else {\n classList(arrowIcon, [CLS_NAVLEFTARROW], [CLS_NAVRIGHTARROW]);\n }\n }\n else if (addDisable && removeDisable) {\n addDisable.classList.add(CLS_DISABLE);\n addDisable.setAttribute('aria-disabled', 'true');\n addDisable.removeAttribute('tabindex');\n removeDisable.classList.remove(CLS_DISABLE);\n removeDisable.setAttribute('aria-disabled', 'false');\n removeDisable.setAttribute('tabindex', '0');\n }\n this.repeatScroll();\n };\n HScroll.prototype.scrollHandler = function (e) {\n var target = e.target;\n var width = target.offsetWidth;\n var rootEle = this.element;\n var navLeftEle = this.element.querySelector('.' + CLS_HSCROLLNAVLEFT);\n var navRightEle = this.element.querySelector('.' + CLS_HSCROLLNAVRIGHT);\n var leftOverlay = this.element.querySelector('.' + CLS_LEFTOVERLAY);\n var rightOverlay = this.element.querySelector('.' + CLS_RIGHTOVERLAY);\n var scrollLeft = target.scrollLeft;\n if (scrollLeft <= 0) {\n scrollLeft = -scrollLeft;\n }\n if (this.isDevice) {\n if (this.enableRtl && !(this.browserCheck || this.ieCheck)) {\n leftOverlay = this.element.querySelector('.' + CLS_RIGHTOVERLAY);\n rightOverlay = this.element.querySelector('.' + CLS_LEFTOVERLAY);\n }\n if (scrollLeft < OVERLAY_MAXWID) {\n leftOverlay.style.width = scrollLeft + 'px';\n }\n else {\n leftOverlay.style.width = '40px';\n }\n if ((target.scrollWidth - Math.ceil(width + scrollLeft)) < OVERLAY_MAXWID) {\n rightOverlay.style.width = (target.scrollWidth - Math.ceil(width + scrollLeft)) + 'px';\n }\n else {\n rightOverlay.style.width = '40px';\n }\n }\n if (scrollLeft === 0) {\n this.arrowDisabling(navLeftEle, navRightEle);\n }\n else if (Math.ceil(width + scrollLeft + .1) >= target.scrollWidth) {\n this.arrowDisabling(navRightEle, navLeftEle);\n }\n else {\n var disEle = this.element.querySelector('.' + CLS_HSCROLLNAV + '.' + CLS_DISABLE);\n if (disEle) {\n disEle.classList.remove(CLS_DISABLE);\n disEle.setAttribute('aria-disabled', 'false');\n disEle.setAttribute('tabindex', '0');\n }\n }\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of property that changed.\n *\n * @param {HScrollModel} newProp - It contains the new value of data.\n * @param {HScrollModel} oldProp - It contains the old value of data.\n * @returns {void}\n * @private\n */\n HScroll.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'scrollStep':\n this.setScrollState();\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.element.classList.add(CLS_RTL) : this.element.classList.remove(CLS_RTL);\n break;\n }\n }\n };\n __decorate([\n Property(null)\n ], HScroll.prototype, \"scrollStep\", void 0);\n HScroll = __decorate([\n NotifyPropertyChanges\n ], HScroll);\n return HScroll;\n}(Component));\nexport { HScroll };\n","import { extend, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { closest as closestElement, removeClass, classList, remove } from '@syncfusion/ej2-base';\nimport { getElementIndex, inArray, parentsUntil, getPosition, isActionPrevent } from '../base/util';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\n/**\n *\n * The `Reorder` module is used for reordering columns.\n */\nvar Reorder = /** @class */ (function () {\n /**\n * Constructor for the Grid reorder module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @hidden\n */\n function Reorder(parent) {\n this.idx = 0;\n this.parent = parent;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.headerDrop, this.headerDrop, this);\n this.parent.on(events.uiUpdate, this.enableAfterRender, this);\n this.parent.on(events.reorderComplete, this.onActionComplete, this);\n this.parent.on(events.columnDrag, this.drag, this);\n this.parent.on(events.columnDragStart, this.dragStart, this);\n this.parent.on(events.columnDragStop, this.dragStop, this);\n this.parent.on(events.headerDrop, this.headerDrop, this);\n this.parent.on(events.headerRefreshed, this.createReorderElement, this);\n this.parent.on(events.keyPressed, this.keyPressHandler, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n Reorder.prototype.chkDropPosition = function (srcElem, destElem) {\n var col = this.parent.getColumnByUid(destElem.firstElementChild.getAttribute('e-mappinguid'));\n var bool = col ? !col.lockColumn : true;\n return ((srcElem.parentElement.isEqualNode(destElem.parentElement) || this.parent.enableColumnVirtualization)\n || (this.parent.isFrozenGrid()\n && Array.prototype.indexOf.call(closestElement(srcElem, 'thead').children, srcElem.parentElement)\n === Array.prototype.indexOf.call(closestElement(destElem, 'thead').children, destElem.parentElement)))\n && this.targetParentContainerIndex(srcElem, destElem) > -1 && bool;\n };\n Reorder.prototype.chkDropAllCols = function (srcElem, destElem) {\n var isFound;\n var headers = this.getHeaderCells();\n var header;\n while (!isFound && headers.length > 0) {\n header = headers.pop();\n isFound = srcElem !== header && this.targetParentContainerIndex(srcElem, destElem) > -1;\n }\n return isFound;\n };\n Reorder.prototype.findColParent = function (col, cols, parent) {\n // eslint-disable-next-line no-self-assign\n parent = parent;\n for (var i = 0, len = cols.length; i < len; i++) {\n if (col === cols[parseInt(i.toString(), 10)]) {\n return true;\n }\n else if (cols[parseInt(i.toString(), 10)].columns) {\n var cnt = parent.length;\n parent.push(cols[parseInt(i.toString(), 10)]);\n if (!this.findColParent(col, cols[parseInt(i.toString(), 10)].columns, parent)) {\n parent.splice(cnt, parent.length - cnt);\n }\n else {\n return true;\n }\n }\n }\n return false;\n };\n Reorder.prototype.getColumnsModel = function (cols, isNotStackedHeader) {\n var columnModel = [];\n var subCols = [];\n for (var i = 0, len = cols.length; i < len; i++) {\n if (!isNullOrUndefined(cols[parseInt(i.toString(), 10)])) {\n if (cols[parseInt(i.toString(), 10)].visible) {\n columnModel.push(cols[parseInt(i.toString(), 10)]);\n }\n else if (isNotStackedHeader) {\n columnModel.push(cols[parseInt(i.toString(), 10)]);\n }\n if (cols[parseInt(i.toString(), 10)].columns) {\n subCols = subCols.concat(cols[parseInt(i.toString(), 10)].columns);\n }\n }\n }\n if (subCols.length) {\n columnModel = columnModel.concat(this.getColumnsModel(subCols));\n }\n return columnModel;\n };\n Reorder.prototype.headerDrop = function (e) {\n var gObj = this.parent;\n var dropElement = this.element.querySelector('.e-headercelldiv') || this.element.querySelector('.e-stackedheadercelldiv');\n var uId = dropElement.getAttribute('e-mappinguid');\n var column = gObj.getColumnByUid(uId);\n if (!closestElement(e.target, 'th') || (!isNullOrUndefined(column) && (!column.allowReordering || column.lockColumn))) {\n this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), column: column });\n return;\n }\n var destElem = closestElement(e.target, '.e-headercell');\n var destElemDiv = destElem.querySelector('.e-headercelldiv') || destElem.querySelector('.e-stackedheadercelldiv');\n var destElemUid = destElemDiv.getAttribute('e-mappinguid');\n if (!isNullOrUndefined(destElemUid)) {\n var destColumn = gObj.getColumnByUid(destElemUid);\n if (isNullOrUndefined(destColumn) || !destColumn.allowReordering || destColumn.lockColumn) {\n this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), column: column, destColumn: destColumn });\n return;\n }\n }\n if (destElem && !(!this.chkDropPosition(this.element, destElem) || !this.chkDropAllCols(this.element, destElem))) {\n if (this.parent.enableColumnVirtualization) {\n var columns = this.parent.columns;\n var sourceUid_1 = this.element.querySelector('.e-headercelldiv').getAttribute('e-mappinguid');\n var col = this.parent.columns.filter(function (col) { return col.uid === sourceUid_1; });\n var colMatchIndex_1 = null;\n var column_1 = col[0];\n var destUid_1 = destElem.querySelector('.e-headercelldiv').getAttribute('e-mappinguid');\n columns.some(function (col, index) {\n if (col.uid === destUid_1) {\n colMatchIndex_1 = index;\n return col.uid === destUid_1;\n }\n return false;\n });\n if (!isNullOrUndefined(colMatchIndex_1)) {\n this.moveColumns(colMatchIndex_1, column_1);\n }\n }\n else {\n var newIndex = this.targetParentContainerIndex(this.element, destElem);\n var uid = this.element.firstElementChild.getAttribute('e-mappinguid');\n this.destElement = destElem;\n this.parent.notify(events.setReorderDestinationElement, { ele: destElem });\n if (uid) {\n this.moveColumns(newIndex, this.parent.getColumnByUid(uid));\n }\n else {\n var headers = this.getHeaderCells();\n var oldIdx = getElementIndex(this.element, headers);\n var columns = this.getColumnsModel(this.parent.columns);\n this.moveColumns(newIndex, columns[parseInt(oldIdx.toString(), 10)]);\n }\n }\n }\n };\n Reorder.prototype.isActionPrevent = function (gObj) {\n return isActionPrevent(gObj);\n };\n Reorder.prototype.moveColumns = function (destIndex, column, reorderByColumn, preventRefresh) {\n var gObj = this.parent;\n if (this.isActionPrevent(gObj)) {\n gObj.notify(events.preventBatch, { instance: this, handler: this.moveColumns, arg1: destIndex, arg2: column });\n return;\n }\n var parent = this.getColParent(column, this.parent.columns);\n var cols = parent ? parent.columns : this.parent.columns;\n var srcIdx = inArray(column, cols);\n if ((parent || this.parent.lockcolPositionCount) && !reorderByColumn &&\n !this.parent.enableColumnVirtualization) {\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].field === column.field) {\n srcIdx = i;\n break;\n }\n }\n var col = this.parent.getColumnByUid(this.destElement.firstElementChild.getAttribute('e-mappinguid'));\n if (col) {\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].field === col.field) {\n destIndex = i;\n break;\n }\n }\n }\n else {\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].headerText === this.destElement.innerText.trim()) {\n destIndex = i;\n }\n }\n }\n }\n if (!gObj.allowReordering || srcIdx === destIndex || srcIdx === -1 || destIndex === -1) {\n return;\n }\n cols.splice(destIndex, 0, cols.splice(srcIdx, 1)[0]);\n var args = { column: column, destIndex: destIndex, columns: cols, parent: parent, cancel: false };\n gObj.notify(events.refreshFrozenColumns, args);\n if (args.cancel) {\n return;\n }\n if (this.parent.isFrozenGrid()) {\n if (this.parent.frozenColumns) {\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].freeze === 'Left') {\n cols[parseInt(i.toString(), 10)].freeze = undefined;\n }\n }\n }\n else {\n if (this.parent.getFrozenLeftCount() > destIndex) {\n column.freeze = 'Left';\n }\n else if ((cols.length - this.parent.getFrozenRightColumnsCount()) <= destIndex) {\n column.freeze = 'Right';\n }\n else {\n column.freeze = column.freeze === 'Fixed' ? 'Fixed' : undefined;\n }\n }\n }\n gObj.getColumns(true);\n gObj.notify(events.columnPositionChanged, { fromIndex: destIndex, toIndex: srcIdx });\n if (preventRefresh !== false) {\n gObj.notify(events.modelChanged, {\n type: events.actionBegin, requestType: 'reorder', fromIndex: destIndex, toIndex: srcIdx, toColumnUid: column.uid\n });\n }\n if (this.parent.isFrozenGrid()) {\n var cols_1 = this.parent.columns;\n this.idx = 0;\n this.refreshColumnIndex(cols_1);\n this.parent.notify(events.refreshFrozenPosition, {});\n }\n };\n Reorder.prototype.refreshColumnIndex = function (cols) {\n for (var i = 0; i < cols.length; i++) {\n cols[parseInt(i.toString(), 10)].index = this.idx;\n this.idx++;\n if (cols[parseInt(i.toString(), 10)].columns && cols[parseInt(i.toString(), 10)].columns.length) {\n this.refreshColumnIndex(cols[parseInt(i.toString(), 10)].columns);\n }\n }\n };\n Reorder.prototype.targetParentContainerIndex = function (srcElem, destElem) {\n var cols = this.parent.columns;\n var headers = this.getHeaderCells();\n var stackedHdrColumn = this.parent.getStackedColumns(cols);\n var stackedCols = [];\n if (stackedHdrColumn.length) {\n stackedCols = this.getAllStackedheaderParentColumns(headers);\n }\n var flatColumns = stackedHdrColumn.length && stackedCols.length ?\n this.getColumnsModel(stackedCols) : this.getColumnsModel(cols, true);\n var parent = this.getColParent(flatColumns[getElementIndex(srcElem, headers)], cols);\n cols = parent ? parent.columns : cols;\n return inArray(flatColumns[getElementIndex(destElem, headers)], cols);\n };\n Reorder.prototype.getAllStackedheaderParentColumns = function (headers) {\n var stackedCols = [];\n for (var i = 0; i < headers.length; i++) {\n if (headers[parseInt(i.toString(), 10)].classList.contains('e-hide')) {\n headers.splice(i, 1);\n i--;\n }\n else if (headers[parseInt(i.toString(), 10)].closest('thead').firstChild === headers[parseInt(i.toString(), 10)].parentElement) {\n stackedCols.push(this.parent.getColumnByUid(headers[parseInt(i.toString(), 10)].firstElementChild.getAttribute('e-mappinguid')));\n }\n }\n return stackedCols;\n };\n Reorder.prototype.getHeaderCells = function () {\n return [].slice.call(this.parent.element.getElementsByClassName('e-headercell'));\n };\n Reorder.prototype.getColParent = function (column, columns) {\n var parents = [];\n this.findColParent(column, columns, parents);\n return parents[parents.length - 1];\n };\n Reorder.prototype.reorderSingleColumn = function (fromFName, toFName) {\n var fColumn = this.parent.enableColumnVirtualization ?\n this.parent.columns.filter(function (col) { return col.field === fromFName; })[0]\n : this.parent.getColumnByField(fromFName);\n var toColumn = this.parent.enableColumnVirtualization ?\n this.parent.columns.filter(function (col) { return col.field === toFName; })[0]\n : this.parent.getColumnByField(toFName);\n if ((!isNullOrUndefined(fColumn) && (!fColumn.allowReordering || fColumn.lockColumn)) ||\n (!isNullOrUndefined(toColumn) && (!toColumn.allowReordering || toColumn.lockColumn))) {\n this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), column: fColumn, destColumn: toColumn });\n return;\n }\n var column = toColumn;\n var parent = this.getColParent(column, this.parent.columns);\n var columns = parent ? parent.columns : this.parent.columns;\n var destIndex = inArray(column, columns);\n if (destIndex > -1) {\n this.moveColumns(destIndex, fColumn, true);\n }\n };\n Reorder.prototype.reorderMultipleColumns = function (fromFNames, toFName) {\n var toIndex = this.parent.getColumnIndexByField(toFName);\n var toColumn = this.parent.getColumnByField(toFName);\n if (toIndex < 0 || (!isNullOrUndefined(toColumn) && (!toColumn.allowReordering || toColumn.lockColumn))) {\n return;\n }\n for (var i = 0; i < fromFNames.length; i++) {\n var column = this.parent.getColumnByField(fromFNames[parseInt(i.toString(), 10)]);\n if (!isNullOrUndefined(column) && (!column.allowReordering || column.lockColumn)) {\n return;\n }\n }\n for (var i = 0; i < fromFNames.length; i++) {\n var column = this.parent.getColumnByIndex(toIndex);\n var parent_1 = this.getColParent(column, this.parent.columns);\n var columns = parent_1 ? parent_1.columns : this.parent.columns;\n var destIndex = inArray(column, columns);\n if (destIndex > -1) {\n this.moveColumns(destIndex, this.parent.getColumnByField(fromFNames[parseInt(i.toString(), 10)]), true, true);\n }\n if (this.parent.getColumnIndexByField(fromFNames[i + 1]) >= destIndex) {\n toIndex++; //R to L\n }\n }\n };\n Reorder.prototype.moveTargetColumn = function (column, toIndex) {\n if (toIndex > -1) {\n this.moveColumns(toIndex, column, true);\n }\n };\n Reorder.prototype.reorderSingleColumnByTarget = function (fieldName, toIndex) {\n this.moveTargetColumn(this.parent.getColumnByField(fieldName), toIndex);\n };\n Reorder.prototype.reorderMultipleColumnByTarget = function (fieldName, toIndex) {\n for (var i = 0; i < fieldName.length; i++) {\n this.reorderSingleColumnByTarget(fieldName[parseInt(i.toString(), 10)], toIndex);\n }\n };\n /**\n * Changes the position of the Grid columns by field names.\n *\n * @param {string | string[]} fromFName - Defines the origin field names.\n * @param {string} toFName - Defines the destination field name.\n * @returns {void}\n */\n Reorder.prototype.reorderColumns = function (fromFName, toFName) {\n if (typeof fromFName === 'string') {\n this.reorderSingleColumn(fromFName, toFName);\n this.fromCol = fromFName;\n }\n else {\n this.reorderMultipleColumns(fromFName, toFName);\n this.fromCol = fromFName[0];\n }\n };\n /**\n * Changes the position of the Grid columns by field index.\n *\n * @param {number} fromIndex - Defines the origin field index.\n * @param {number} toIndex - Defines the destination field index.\n * @returns {void}\n */\n Reorder.prototype.reorderColumnByIndex = function (fromIndex, toIndex) {\n this.moveTargetColumn(this.parent.getColumnByIndex(fromIndex), toIndex);\n };\n /**\n * Changes the position of the Grid columns by field index.\n *\n * @param {string | string[]} fieldName - Defines the field name.\n * @param {number} toIndex - Defines the destination field index.\n * @returns {void}\n */\n Reorder.prototype.reorderColumnByTargetIndex = function (fieldName, toIndex) {\n if (typeof fieldName === 'string') {\n this.reorderSingleColumnByTarget(fieldName, toIndex);\n }\n else {\n this.reorderMultipleColumnByTarget(fieldName, toIndex);\n }\n };\n Reorder.prototype.enableAfterRender = function (e) {\n if (e.module === this.getModuleName() && e.enable) {\n this.createReorderElement();\n }\n };\n Reorder.prototype.createReorderElement = function (e) {\n if (e && e.args && e.args.isXaxis) {\n this.setDisplay('none');\n }\n var header = this.parent.element.querySelector('.' + literals.headerContent);\n this.upArrow = header.appendChild(this.parent\n .createElement('div', { className: 'e-icons e-icon-reorderuparrow e-reorderuparrow', attrs: { style: 'display:none' } }));\n this.downArrow = header.appendChild(this.parent\n .createElement('div', { className: 'e-icons e-icon-reorderdownarrow e-reorderdownarrow', attrs: { style: 'display:none' } }));\n };\n /**\n * The function used to trigger onActionComplete\n *\n * @param {NotifyArgs} e - specified the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Reorder.prototype.onActionComplete = function (e) {\n this.parent.trigger(events.actionComplete, extend(e, { type: events.actionComplete }));\n var target = this.fromCol && this.parent.getColumnHeaderByField(this.fromCol);\n if (target) {\n this.parent.focusModule.onClick({ target: target }, true);\n }\n };\n /**\n * To destroy the reorder\n *\n * @returns {void}\n * @hidden\n */\n Reorder.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (this.parent.isDestroyed || !gridElement || (!gridElement.querySelector('.' + literals.gridHeader) &&\n !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n if (this.upArrow.parentNode) {\n remove(this.upArrow);\n }\n if (this.downArrow.parentNode) {\n remove(this.downArrow);\n }\n this.parent.off(events.headerDrop, this.headerDrop);\n this.parent.off(events.uiUpdate, this.enableAfterRender);\n this.parent.off(events.reorderComplete, this.onActionComplete);\n this.parent.off(events.columnDrag, this.drag);\n this.parent.off(events.columnDragStart, this.dragStart);\n this.parent.off(events.columnDragStop, this.dragStop);\n this.parent.off(events.headerRefreshed, this.createReorderElement);\n this.parent.off(events.keyPressed, this.keyPressHandler);\n this.parent.off(events.destroy, this.destroy);\n //call ejdrag and drop destroy\n };\n Reorder.prototype.keyPressHandler = function (e) {\n var gObj = this.parent;\n var isMacLike = /(Mac)/i.test(navigator.platform);\n if (isMacLike && e.metaKey) {\n if (e.action === 'leftArrow') {\n e.action = 'ctrlLeftArrow';\n }\n else if (e.action === 'rightArrow') {\n e.action = 'ctrlRightArrow';\n }\n }\n switch (e.action) {\n case 'ctrlLeftArrow':\n case 'ctrlRightArrow':\n // eslint-disable-next-line no-case-declarations\n var element = gObj.focusModule.currentInfo.element;\n if (element && element.classList.contains('e-headercell')) {\n var column = gObj.getColumnByUid(element.firstElementChild.getAttribute('e-mappinguid'));\n var visibleCols = gObj.getVisibleColumns();\n var index = visibleCols.indexOf(column);\n var toCol = e.action === 'ctrlLeftArrow' ? visibleCols[index - 1] : visibleCols[index + 1];\n if (toCol && toCol.field && column.field) {\n this.reorderColumns(column.field, toCol.field);\n }\n }\n break;\n }\n };\n Reorder.prototype.drag = function (e) {\n var gObj = this.parent;\n var target = e.target;\n var closest = closestElement(target, '.e-headercell:not(.e-stackedHeaderCell)');\n var cloneElement = gObj.element.querySelector('.e-cloneproperties');\n var content = gObj.getContent().firstElementChild;\n var isLeft = this.x > getPosition(e.event).x + content.scrollLeft;\n removeClass([].slice.call(gObj.getHeaderTable().getElementsByClassName('e-reorderindicate')), ['e-reorderindicate']);\n this.setDisplay('none');\n this.stopTimer();\n classList(cloneElement, ['e-defaultcur'], ['e-notallowedcur']);\n this.updateScrollPostion(e.event);\n if (closest && !closest.isEqualNode(this.element)) {\n target = closest;\n //consider stacked, detail header cell\n var uid = target.querySelector('.e-headercelldiv, .e-stackedheadercelldiv').getAttribute('e-mappinguid');\n if (!(!this.chkDropPosition(this.element, target) || !this.chkDropAllCols(this.element, target)) &&\n gObj.getColumnByUid(uid).allowReordering && e.column.allowReordering) {\n this.updateArrowPosition(target, isLeft);\n classList(target, ['e-allowDrop', 'e-reorderindicate'], []);\n }\n else if (!(gObj.allowGrouping && parentsUntil(e.target, 'e-groupdroparea'))) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n }\n }\n else {\n if (closest && closest.isEqualNode(this.element) &&\n !((gObj.allowGrouping && e.column.allowGrouping) || e.column.allowReordering)) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n }\n else if (!closest && !(gObj.allowGrouping && parentsUntil(e.target, 'e-groupdroparea'))) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n }\n }\n if (!e.column.allowReordering || e.column.lockColumn) {\n return;\n }\n gObj.trigger(events.columnDrag, { target: target, draggableType: 'headercell', column: e.column });\n };\n Reorder.prototype.updateScrollPostion = function (e) {\n var _this = this;\n var x = getPosition(e).x;\n var cliRect = this.parent.element.getBoundingClientRect();\n var cliRectBaseRight = cliRect.right;\n var cliRectBaseLeft = cliRect.left;\n var scrollElem = this.parent.getContent().firstElementChild;\n if (x > cliRectBaseLeft && x < cliRectBaseLeft + 35) {\n this.timer = window.setInterval(function () { _this.setScrollLeft(scrollElem, true); }, 50);\n }\n else if (x < cliRectBaseRight && x > cliRectBaseRight - 35) {\n this.timer = window.setInterval(function () { _this.setScrollLeft(scrollElem, false); }, 50);\n }\n };\n Reorder.prototype.setScrollLeft = function (scrollElem, isLeft) {\n var scrollLeft = scrollElem.scrollLeft;\n scrollElem.scrollLeft = scrollElem.scrollLeft + (isLeft ? -5 : 5);\n if (scrollLeft !== scrollElem.scrollLeft) {\n this.setDisplay('none');\n }\n };\n Reorder.prototype.stopTimer = function () {\n window.clearInterval(this.timer);\n };\n Reorder.prototype.updateArrowPosition = function (target, isLeft) {\n var cliRect = target.getBoundingClientRect();\n var cliRectBase = this.parent.element.getBoundingClientRect();\n if ((isLeft && cliRect.left < cliRectBase.left) || (!isLeft && cliRect.right > cliRectBase.right)) {\n return;\n }\n var isSticky = this.parent.getHeaderContent().classList.contains('e-sticky');\n this.upArrow.style.top = isSticky ? cliRect.top + cliRect.height + 'px' : cliRect.top + cliRect.height - cliRectBase.top + 'px';\n this.downArrow.style.top = isSticky ? cliRect.top - 7 + 'px' : cliRect.top - cliRectBase.top - 7 + 'px';\n this.upArrow.style.left = this.downArrow.style.left = isSticky ? (isLeft ? cliRect.left : cliRect.right) - 4 + 'px' :\n (isLeft ? cliRect.left : cliRect.right) - cliRectBase.left - 4 + 'px';\n this.setDisplay('');\n };\n Reorder.prototype.dragStart = function (e) {\n var gObj = this.parent;\n var target = e.target;\n this.element = target.classList.contains('e-headercell') ? target :\n parentsUntil(target, 'e-headercell');\n if (!e.column.allowReordering || e.column.lockColumn) {\n return;\n }\n var content = gObj.getContent().firstElementChild;\n this.x = getPosition(e.event).x + content.scrollLeft;\n gObj.trigger(events.columnDragStart, {\n target: target, draggableType: 'headercell', column: e.column\n });\n };\n Reorder.prototype.dragStop = function (e) {\n var gObj = this.parent;\n this.setDisplay('none');\n this.stopTimer();\n if (!e.cancel) {\n gObj.trigger(events.columnDrop, { target: e.target, draggableType: 'headercell', column: e.column });\n }\n removeClass([].slice.call(gObj.getHeaderTable().getElementsByClassName('e-reorderindicate')), ['e-reorderindicate']);\n };\n Reorder.prototype.setDisplay = function (display) {\n this.upArrow.style.display = display;\n this.downArrow.style.display = display;\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} return the module name\n * @private\n */\n Reorder.prototype.getModuleName = function () {\n return 'reorder';\n };\n return Reorder;\n}());\nexport { Reorder };\n","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 { addStickyColumnPosition, appendChildren } from '../base/util';\nimport { destroy, commandColumnDestroy } from '../base/constant';\n/**\n * `CommandColumn` used to render command column in grid\n *\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.childRefs = [];\n _this.element = _this.parent.createElement('TD', {\n className: 'e-rowcell e-unboundcell', attrs: {\n tabindex: '-1', role: 'gridcell'\n }\n });\n _this.parent.on(destroy, _this.destroyButtons, _this);\n _this.parent.on(commandColumnDestroy, _this.destroyButtons, _this);\n return _this;\n }\n CommandColumnRenderer.prototype.destroyButtons = function (args) {\n for (var i = 0; i < this.childRefs.length; i++) {\n if (this.childRefs[parseInt(i.toString(), 10)] && !this.childRefs[parseInt(i.toString(), 10)].isDestroyed) {\n this.childRefs[parseInt(i.toString(), 10)].destroy();\n if (this.childRefs[parseInt(i.toString(), 10)].element) {\n this.childRefs[parseInt(i.toString(), 10)].element.innerHTML = '';\n }\n }\n }\n this.childRefs = [];\n if (args.type === 'refreshCommandColumn') {\n var elem = this.parent.element.querySelectorAll('.e-unboundcell');\n if (elem.length) {\n for (var i = 0; i < elem.length; i++) {\n if (elem[parseInt(i.toString(), 10)]) {\n if (elem[parseInt(i.toString(), 10)].querySelector('.e-unboundcelldiv')) {\n elem[parseInt(i.toString(), 10)].querySelector('.e-unboundcelldiv').innerHTML = '';\n }\n elem[parseInt(i.toString(), 10)].innerHTML = '';\n }\n }\n elem = null;\n }\n }\n else {\n this.parent.off(destroy, this.destroyButtons);\n this.parent.off(commandColumnDestroy, this.destroyButtons);\n }\n };\n /**\n * Function to render the cell content based on Column object.\n *\n * @param {cell
} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @param {Object} attributes - specifies the attributes\n * @param {boolean} isVirtualEdit - specifies virtual scroll editing\n * @returns {Element} returns the element\n */\n CommandColumnRenderer.prototype.render = function (cell, data, attributes, isVirtualEdit) {\n var node = this.element.cloneNode();\n var uid = 'uid';\n node.appendChild(this.unbounDiv.cloneNode());\n node.setAttribute('aria-label', this.localizer.getConstant('CommandColumnAria') + 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.enableVirtualization && this.parent.isEdit) || isVirtualEdit) {\n addClass([].slice.call(node.getElementsByClassName('e-edit-delete')), 'e-hide');\n removeClass([].slice.call(node.getElementsByClassName('e-save-cancel')), 'e-hide');\n }\n else {\n addClass([].slice.call(node.getElementsByClassName('e-save-cancel')), 'e-hide');\n removeClass([].slice.call(node.getElementsByClassName('e-edit-delete')), 'e-hide');\n }\n if (this.parent.isFrozenGrid()) {\n addStickyColumnPosition(this.parent, cell.column, node);\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 buttonOption.buttonOption.cssClass = this.parent.cssClass ?\n buttonOption.buttonOption.cssClass + ' ' + this.parent.cssClass : buttonOption.buttonOption.cssClass;\n var buttonObj = new Button(buttonOption.buttonOption, button);\n this.childRefs.push(buttonObj);\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 } from '@syncfusion/ej2-base';\nimport { click, keyPressed, commandClick, initialEnd, destroy } from '../base/constant';\nimport { CellType } from '../base/enum';\nimport { CommandColumnRenderer } from '../renderer/command-column-renderer';\nimport { getUid } from '../base/util';\nimport * as literals from '../base/string-literals';\n/**\n * `CommandColumn` used to handle the command column actions.\n *\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 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, '.' + literals.row).getAttribute('data-uid'));\n var cols = this.parent.columnModel;\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].commands) {\n var commandCols = cols[parseInt(i.toString(), 10)].commands;\n for (var j = 0; j < commandCols.length; j++) {\n var idInString = 'uid';\n var typeInString = 'type';\n if (commandCols[parseInt(j.toString(), 10)][\"\" + idInString] === uid && commandCols[parseInt(j.toString(), 10)][\"\" + typeInString] === type) {\n commandColumn = commandCols[parseInt(j.toString(), 10)];\n }\n else {\n var buttons = [].slice.call(closest(target, '.e-unboundcell').querySelectorAll('button'));\n var index = buttons.findIndex(function (ele) { return ele === target; });\n if (index < commandCols.length && commandCols[parseInt(index.toString(), 10)][\"\" + typeInString] === type &&\n String(commandCols[parseInt(j.toString(), 10)][\"\" + idInString]) === uid) {\n commandColumn = commandCols[parseInt(index.toString(), 10)];\n }\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(literals.dataRowIndex), 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 * @returns {string} returns the module name\n */\n CommandColumn.prototype.getModuleName = function () {\n return 'commandColumn';\n };\n /**\n * To destroy CommandColumn.\n *\n * @function destroy\n * @returns {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 this.parent.off(destroy, this.destroy);\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 this.parent.on(destroy, this.destroy, 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 var uid = 'uid';\n var col = this.parent.columnModel;\n for (var i = 0; i < col.length; i++) {\n if (col[parseInt(i.toString(), 10)].commands) {\n var commandCol = col[parseInt(i.toString(), 10)].commands;\n for (var j = 0; j < commandCol.length; j++) {\n commandCol[parseInt(j.toString(), 10)][\"\" + uid] = getUid('gridcommand');\n }\n }\n }\n };\n return CommandColumn;\n}());\nexport { CommandColumn };\n","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./User.vue?vue&type=style&index=0&id=114bf4ef&prod&lang=css\"","import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nexport var TabItemsDirective = vueDefineComponent({\n inject: { custom: { default: null } },\n render: function (createElement) {\n if (!isExecute) {\n var h = !isExecute ? gh : createElement;\n var slots = null;\n if (!isNullOrUndefined(this.$slots.default)) {\n slots = !isExecute ? this.$slots.default() : this.$slots.default;\n }\n return h('div', { class: 'e-directive' }, slots);\n }\n return;\n },\n updated: function () {\n if (!isExecute && this.custom) {\n this.custom();\n }\n },\n methods: {\n getTag: function () {\n return 'e-tabitems';\n }\n }\n});\nexport var TabItemsPlugin = {\n name: 'e-tabitems',\n install: function (Vue) {\n Vue.component(TabItemsPlugin.name, TabItemsDirective);\n }\n};\n/**\n * 'e-tabitem' directive represent a item of the Vue Tab\n * It must be contained in a Tab component(`ejs-tab`).\n * ```html\n * \n * \n * \n * \n * \n * \n * ```\n */\nexport var TabItemDirective = vueDefineComponent({\n render: function () {\n return;\n },\n methods: {\n getTag: function () {\n return 'e-tabitem';\n }\n }\n});\nexport var TabItemPlugin = {\n name: 'e-tabitem',\n install: function (Vue) {\n Vue.component(TabItemPlugin.name, TabItemDirective);\n }\n};\n","import { ComponentBase, gh, getProps, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { Tab } from '@syncfusion/ej2-navigations';\nimport { TabItemsDirective, TabItemDirective, TabItemsPlugin, TabItemPlugin } from './items.directive';\nexport var properties = ['isLazyUpdate', 'plugins', 'allowDragAndDrop', 'animation', 'clearTemplates', 'cssClass', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'headerPlacement', 'height', 'heightAdjustMode', 'items', 'loadOn', 'locale', 'overflowMode', 'reorderActiveTab', 'scrollStep', 'selectedItem', 'showCloseButton', 'width', 'added', 'adding', 'created', 'destroyed', 'dragged', 'dragging', 'onDragStart', 'removed', 'removing', 'selected', 'selecting'];\nexport var modelProps = [];\nexport var testProp = getProps({ props: properties });\nexport var props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);\nemitProbs.push('modelchanged', 'update:modelValue');\nfor (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {\n var props_1 = modelProps_1[_i];\n emitProbs.push('update:' + props_1);\n}\n/**\n * Represents the VueJS Tab Component.\n * ```html\n * \n * ```\n */\nexport var TabComponent = vueDefineComponent({\n name: 'TabComponent',\n mixins: [ComponentBase],\n props: props,\n watch: watch,\n emits: emitProbs,\n provide: function () { return { custom: this.custom }; },\n data: function () {\n return {\n ej2Instances: new Tab({}),\n propKeys: properties,\n models: modelProps,\n hasChildDirective: true,\n hasInjectedModules: false,\n tagMapper: { \"e-tabitems\": \"e-tabitem\" },\n tagNameMapper: { \"e-tabitems\": \"e-items\" },\n isVue3: !isExecute,\n templateCollection: {},\n };\n },\n created: function () {\n this.bindProperties();\n this.ej2Instances._setProperties = this.ej2Instances.setProperties;\n this.ej2Instances.setProperties = this.setProperties;\n this.ej2Instances.clearTemplate = this.clearTemplate;\n this.updated = this.updated;\n },\n render: function (createElement) {\n var h = !isExecute ? gh : createElement;\n var slots = null;\n if (!isNullOrUndefined(this.$slots.default)) {\n slots = !isExecute ? this.$slots.default() : this.$slots.default;\n }\n return h('div', slots);\n },\n methods: {\n clearTemplate: function (templateNames) {\n if (!templateNames) {\n templateNames = Object.keys(this.templateCollection || {});\n }\n if (templateNames.length && this.templateCollection) {\n for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {\n var tempName = templateNames_1[_i];\n var elementCollection = this.templateCollection[tempName];\n if (elementCollection && elementCollection.length) {\n for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {\n var ele = elementCollection_1[_a];\n var destroy = getValue('__vue__.$destroy', ele);\n if (destroy) {\n ele.__vue__.$destroy();\n }\n if (ele.innerHTML) {\n ele.innerHTML = '';\n }\n }\n delete this.templateCollection[tempName];\n }\n }\n }\n },\n setProperties: function (prop, muteOnChange) {\n var _this = this;\n if (this.isVue3) {\n this.models = !this.models ? this.ej2Instances.referModels : this.models;\n }\n if (this.ej2Instances && this.ej2Instances._setProperties) {\n this.ej2Instances._setProperties(prop, muteOnChange);\n }\n if (prop && this.models && this.models.length) {\n Object.keys(prop).map(function (key) {\n _this.models.map(function (model) {\n if ((key === model) && !(/datasource/i.test(key))) {\n if (_this.isVue3) {\n _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);\n }\n else {\n _this.$emit('update:' + key, prop[key]);\n _this.$emit('modelchanged', prop[key]);\n }\n }\n });\n });\n }\n },\n custom: function () {\n this.updated();\n },\n addTab: function (items, index) {\n return this.ej2Instances.addTab(items, index);\n },\n disable: function (value) {\n return this.ej2Instances.disable(value);\n },\n enableTab: function (index, value) {\n return this.ej2Instances.enableTab(index, value);\n },\n getItemIndex: function (tabItemId) {\n return this.ej2Instances.getItemIndex(tabItemId);\n },\n hideTab: function (index, value) {\n return this.ej2Instances.hideTab(index, value);\n },\n refresh: function () {\n return this.ej2Instances.refresh();\n },\n refreshActiveTab: function () {\n return this.ej2Instances.refreshActiveTab();\n },\n refreshActiveTabBorder: function () {\n return this.ej2Instances.refreshActiveTabBorder();\n },\n removeTab: function (index) {\n return this.ej2Instances.removeTab(index);\n },\n select: function (args, event) {\n return this.ej2Instances.select(args, event);\n },\n }\n});\nexport var TabPlugin = {\n name: 'ejs-tab',\n install: function (Vue) {\n Vue.component(TabPlugin.name, TabComponent);\n Vue.component(TabItemPlugin.name, TabItemDirective);\n Vue.component(TabItemsPlugin.name, TabItemsDirective);\n }\n};\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('ejs-tab',{ref:\"userTabs\",attrs:{\"id\":\"element\",\"selectedItem\":_vm.selectedItem}},[_c('e-tabitems',[_c('e-tabitem',{attrs:{\"header\":_vm.headerText1,\"content\":_vm.userTemplate}}),_c('e-tabitem',{attrs:{\"header\":_vm.headerText2,\"content\":_vm.groupsAndPermissionsTemplate}})],1)],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('CRow',[_c('CCol',{attrs:{\"col\":\"\"}},[_c('ejs-grid',{ref:\"grid\",attrs:{\"dataSource\":_vm.userData,\"allowFiltering\":true,\"allowPaging\":true,\"allowResizing\":true,\"toolbarClick\":_vm.toolbarClick,\"allowExcelExport\":true,\"excelExportComplete\":_vm.excelExportComplete,\"allowReordering\":true,\"allowSorting\":true,\"editSettings\":_vm.editSettings,\"toolbar\":_vm.toolbar,\"pageSettings\":_vm.pageSettings,\"actionBegin\":_vm.actionBegin,\"actionComplete\":_vm.actionComplete,\"actionFailure\":_vm.actionFailure,\"filterSettings\":_vm.filterOptions}},[_c('e-columns',[_c('e-column',{attrs:{\"field\":\"id\",\"headerText\":\"Id\",\"width\":\"120\",\"isPrimaryKey\":true,\"visible\":false}}),_c('e-column',{attrs:{\"field\":\"firstName\",\"headerText\":\"First Name\",\"validationRules\":_vm.nameRules,\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"lastName\",\"headerText\":\"Last Name\",\"validationRules\":_vm.nameRules,\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"email\",\"headerText\":\"Email\",\"textAlign\":\"Left\",\"validationRules\":_vm.emailRules,\"width\":\"90\"}}),_c('e-column',{attrs:{\"field\":\"userGroupId\",\"headerText\":\"Role\",\"textAlign\":\"Right\",\"validationRules\":_vm.requiredRules,\"editType\":\"dropdownedit\",\"edit\":_vm.roleParams,\"foreignKeyField\":\"id\",\"foreignKeyValue\":\"name\",\"dataSource\":_vm.userGroups,\"width\":\"90\"}}),_c('e-column',{attrs:{\"field\":\"clientIds\",\"headerText\":\"Clients\",\"visible\":false,\"textAlign\":\"Right\",\"editType\":\"dropdownedit\",\"edit\":_vm.clientParams,\"dataSource\":_vm.clientsNew,\"width\":\"90\"},model:{value:(_vm.data.clientId),callback:function ($$v) {_vm.$set(_vm.data, \"clientId\", $$v)},expression:\"data.clientId\"}}),_c('e-column',{attrs:{\"field\":\"selectall\",\"headerText\":\"selectAll\",\"textAlign\":\"Right\",\"displayAsCheckBox\":\"true\",\"allowEditing\":true,\"editType\":\"booleanedit\",\"width\":\"90\",\"edit\":_vm.checkboxParams,\"type\":\"boolean\",\"visible\":false}})],1)],1),_c('ejs-dialog',{ref:\"confirmDialog\",staticClass:\"custom-dialog\",attrs:{\"visible\":_vm.dialogVisible,\"width\":'300px',\"header\":'Confirmation',\"content\":'Are you sure you want to resend the invite?',\"showCloseIcon\":true,\"buttons\":_vm.dialogButtons,\"position\":{ X: 'center', Y: 'top' }},on:{\"close\":_vm.closeDialog}})],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./User.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./User.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./User.vue?vue&type=template&id=114bf4ef\"\nimport script from \"./User.vue?vue&type=script&lang=js\"\nexport * from \"./User.vue?vue&type=script&lang=js\"\nimport style0 from \"./User.vue?vue&type=style&index=0&id=114bf4ef&prod&lang=css\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\n/* custom blocks */\nimport block0 from \"./User.vue?vue&type=custom&index=0&blockType=div\"\nif (typeof block0 === 'function') block0(component)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('CRow',[_c('CCol',{attrs:{\"col\":\"\"}},[_c('ejs-grid',{ref:\"grid\",attrs:{\"dataSource\":_vm.groupData,\"allowFiltering\":true,\"commandClick\":_vm.commandClick,\"allowPaging\":true,\"allowResizing\":true,\"toolbarClick\":_vm.toolbarClick,\"allowExcelExport\":true,\"excelExportComplete\":_vm.excelExportComplete,\"allowReordering\":true,\"allowSorting\":true,\"editSettings\":_vm.editSettings,\"toolbar\":_vm.toolbar,\"pageSettings\":_vm.pageSettings,\"actionComplete\":_vm.actionComplete,\"actionBegin\":_vm.actionBegin,\"actionFailure\":_vm.actionFailure,\"filterSettings\":_vm.filterOptions,\"queryCellInfo\":_vm.queryCellInfo}},[_c('e-columns',[_c('e-column',{attrs:{\"field\":\"userGroupId\",\"headerText\":\"Id\",\"width\":\"120\",\"isPrimaryKey\":true,\"visible\":false}}),_c('e-column',{attrs:{\"field\":\"name\",\"headerText\":\"Group Name\",\"validationRules\":_vm.requiredRules,\"width\":\"120\"}}),_c('e-column',{attrs:{\"headerText\":\"Actions\",\"width\":\"50\",\"textAlign\":\"left\",\"commands\":_vm.commands}})],1)],1)],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UserGroup.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UserGroup.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./UserGroup.vue?vue&type=template&id=24e78d88\"\nimport script from \"./UserGroup.vue?vue&type=script&lang=js\"\nexport * from \"./UserGroup.vue?vue&type=script&lang=js\"\nimport style0 from \"./UserGroup.vue?vue&type=style&index=0&id=24e78d88&prod&lang=css\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n\r\n\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UsersMain.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UsersMain.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./UsersMain.vue?vue&type=template&id=4a8fb070&scoped=true\"\nimport script from \"./UsersMain.vue?vue&type=script&lang=js\"\nexport * from \"./UsersMain.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"4a8fb070\",\n null\n \n)\n\nexport default component.exports","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, foreignKeyData) {\n this.hideColumnInclude = false;\n this.foreignKeyData = {};\n this.parent = parent;\n if (!parent.parentDetails && foreignKeyData) {\n this.foreignKeyData = foreignKeyData;\n }\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[parseInt(i.toString(), 10)];\n options.index = startIndex;\n if (gObj.childGrid || gObj.detailTemplate) {\n if (gObj.hierarchyPrintMode === 'All') {\n options.isExpand = true;\n }\n else if (gObj.hierarchyPrintMode === 'Expanded' &&\n this.parent.expandedRows && this.parent.expandedRows[parseInt(startIndex.toString(), 10)]) {\n options.isExpand = gObj.expandedRows[parseInt(startIndex.toString(), 10)].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[parseInt(i.toString(), 10)].dataSource) ?\n new DataManager(fColumns[parseInt(i.toString(), 10)].dataSource.result) :\n fColumns[parseInt(i.toString(), 10)].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[parseInt(j.toString(), 10)].field] = e[parseInt(j.toString(), 10)].result;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-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[parseInt(i.toString(), 10)] = new Row({});\n rows[parseInt(i.toString(), 10)].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[parseInt(i.toString(), 10)].commands) {\n rows = this.appendGridCells(columns[parseInt(i.toString(), 10)], 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[parseInt(index.toString(), 10)].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[parseInt(index.toString(), 10)].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[parseInt(i.toString(), 10)].visible && !isIgnoreFirstCell) {\n isIgnoreFirstCell = true;\n }\n gridRows = this.appendGridCells(cols.columns[parseInt(i.toString(), 10)], 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 - 1; j < len_1; j++) {\n if (gridObj.enableColumnVirtualization && columnIndexes.indexOf(j) === -1) {\n continue;\n }\n rows[parseInt(i.toString(), 10)].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[parseInt(i.toString(), 10)], 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 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 childGridObj.isExportGrid = true;\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[parseInt(i.toString(), 10)].type !== 'checkbox') {\n actualGridColumns.push(gridColumns[parseInt(i.toString(), 10)]);\n }\n }\n return actualGridColumns;\n };\n /**\n * Gets the foreignkey data.\n *\n * @returns {ForeignKeyFormat} returns the foreignkey data\n * @hidden\n */\n ExportHelper.prototype.getForeignKeyData = function () {\n return this.foreignKeyData;\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 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 /**\n * Used to format the exporting cell value\n *\n * @param {ExportHelperArgs} args - Specifies cell details.\n * @returns {string} returns formated value\n * @hidden\n */\n ExportValueFormatter.prototype.formatCellValue = function (args) {\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 if (typeof args.column.format === 'string') {\n args.column.format = { format: args.column.format };\n }\n return args.value || args.value === 0 ?\n this.internationalization.getNumberFormat(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 === 'dateonly' || 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' || args.column.type === 'dateonly') {\n format = { type: 'date', skeleton: cFormat };\n }\n else if (args.column.type === 'time') {\n format = { type: 'time', skeleton: cFormat };\n }\n else {\n format = { 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 var customFormat = void 0;\n if (args.column.type === 'date' || args.column.type === 'dateonly') {\n customFormat = {\n type: args.column.format.type,\n format: args.column.format.format, skeleton: args.column.format.skeleton\n };\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 } 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';\nimport { defaultCurrencyCode } from '@syncfusion/ej2-base';\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 *\n * @param {IGrid} parent - specifies the IGrid\n * @param {ServiceLocator} locator - specifies the ServiceLocator\n * @hidden\n */\n function ExcelExport(parent, locator) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-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.isChild = false;\n this.isElementIdChanged = false;\n this.gridPool = {};\n this.sheet = {};\n this.grpFooterTemplates = [];\n this.footerTemplates = [];\n this.aggIndex = 0;\n this.totalAggregates = 0;\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 * @returns {string} returns 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 *\n * @param {IGrid} grid - Defines the grid.\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 {boolean} isCsv - true if export to CSV.\n * @param {boolean} isBlob - true if isBlob is enabled.\n * @returns {Promise} - Returns the map for export.\n */\n // eslint-disable-next-line\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 Child = 'isChild';\n var csv = 'isCsv';\n var workbk = 'workbook';\n var isMultiEx = 'isMultipleExport';\n this.gridPool = {};\n if ((grid.childGrid || grid.detailTemplate) && !(!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, isChild: this.isChild,\n grpFooterTemplates: this.grpFooterTemplates\n };\n gObj.trigger(events.beforeExcelExport, args);\n if (args[\"\" + cancel]) {\n return new Promise(function (resolve) {\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 this.isChild = args[\"\" + Child];\n this.grpFooterTemplates = args['grpFooterTemplates'];\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 } : { gridInstance: this.parent });\n this.parent.log('exporting_complete', this.getModuleName());\n resolve(this.book);\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ExcelExport.prototype.processRecords = function (gObj, exportProperties, isMultipleExport, workbook) {\n var _this = this;\n if (gObj.allowGrouping && gObj.groupSettings.enableLazyLoading && gObj.groupSettings.columns.length) {\n if (isNullOrUndefined(exportProperties)) {\n exportProperties = { hierarchyExportMode: 'All' };\n }\n else {\n exportProperties.hierarchyExportMode = exportProperties.hierarchyExportMode || 'All';\n }\n }\n if (!isNullOrUndefined(exportProperties) && !isNullOrUndefined(exportProperties.dataSource)) {\n exportProperties.dataSource = exportProperties.dataSource instanceof DataManager ?\n exportProperties.dataSource : new DataManager(exportProperties.dataSource);\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) {\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) {\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 ExcelExport.prototype.processInnerRecords = function (gObj, exportProperties, \n // eslint-disable-next-line @typescript-eslint/no-explicit-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 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 this.sheet.images = [];\n }\n else if (this.expType === 'NewSheet') {\n this.workSheet = workbook.worksheets;\n this.rows = [];\n this.columns = [];\n this.sheet.images = [];\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.sheet.images = workbook.worksheets[0].images;\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 // eslint-disable-next-line @typescript-eslint/no-unused-vars\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 // eslint-disable-next-line @typescript-eslint/no-explicit-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 headerRowLen = exportProperties.header ? exportProperties.header.headerRows ||\n exportProperties.header.rows.length : 0;\n var autoFilters = {\n row: colDepth + headerRowLen, 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 (isExportPropertiesPresent && !isNullOrUndefined(exportProperties.separator)\n && exportProperties.separator !== ',') {\n separator = exportProperties.separator;\n }\n var book = new Workbook(_this.book, 'csv', gObj.locale, defaultCurrencyCode, 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, defaultCurrencyCode);\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[parseInt(i.toString(), 10)];\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 if (!isNullOrUndefined(exportProperties) && !isNullOrUndefined(exportProperties.theme)) {\n this.theme = exportProperties.theme;\n }\n if ((gObj.childGrid || gObj.detailTemplate) && !isNullOrUndefined(exportProperties)) {\n gObj.hierarchyPrintMode = exportProperties.hierarchyExportMode || 'Expanded';\n }\n var helper = new ExportHelper(gObj, this.helper.getForeignKeyData());\n var gColumns = isExportColumns(exportProperties) ?\n prepareColumns(exportProperties.columns, gObj.enableColumnVirtualization) :\n helper.getGridExportColumns(gObj.columns);\n var headerRow = helper.getHeaders(gColumns, this.includeHiddenColumn);\n var groupIndent = gObj.groupSettings.columns.length ? gObj.groupSettings.columns.length - 1 : 0;\n excelRows = this.processHeaderContent(gObj, headerRow, groupIndent, excelRows);\n if (!isNullOrUndefined(exportProperties) && Object.keys(exportProperties).length &&\n isNullOrUndefined(exportProperties.dataSource)) {\n if (exportProperties.exportType === 'CurrentPage' && (!gObj.groupSettings.enableLazyLoading\n || gObj.getDataModule().isRemote())) {\n excelRows = this.processRecordContent(gObj, r, headerRow, exportProperties, gObj.currentViewData, excelRows, helper);\n }\n else if (gObj.groupSettings.enableLazyLoading && !gObj.getDataModule().isRemote()) {\n var groupData = void 0;\n if (!isNullOrUndefined(exportProperties) && Object.keys(exportProperties).length) {\n var isAllPage = exportProperties.exportType === 'CurrentPage'\n ? false : true;\n var groupQuery = gObj.getDataModule().generateQuery(isAllPage);\n var lazyloadData = gObj.getDataModule().dataManager.executeLocal(groupQuery);\n groupQuery.lazyLoad = [];\n var fName = 'fn';\n if (!isAllPage) {\n for (var i = 0; i < groupQuery.queries.length; i++) {\n if (groupQuery.queries[parseInt(i.toString(), 10)]['' + fName] === 'onPage') {\n groupQuery.queries[parseInt(i.toString(), 10)].e.pageSize = lazyloadData.reduce(function (acc, curr) { return acc + curr['count']; }, 0);\n }\n }\n }\n if (exportProperties.hierarchyExportMode === 'All') {\n groupData = gObj.getDataModule().dataManager.executeLocal(groupQuery);\n }\n else if (exportProperties.hierarchyExportMode === 'Expanded' || exportProperties.hierarchyExportMode === 'None' ||\n isNullOrUndefined(exportProperties.hierarchyExportMode)) {\n groupData = gObj.getDataModule().dataManager.executeLocal(groupQuery);\n var lazQuery = this.parent.contentModule.lazyLoadQuery;\n for (var i = 0; i < lazQuery.length; i++) {\n var query = lazQuery[parseInt(i.toString(), 10)];\n var where = query[0];\n for (var j = 0; j < groupData.length; j++) {\n var data = groupData[parseInt(j.toString(), 10)];\n if (data['key'] === where['value']) {\n lazyloadData[parseInt(i.toString(), 10)] = groupData[parseInt(j.toString(), 10)];\n }\n }\n }\n groupData = lazyloadData;\n }\n }\n else {\n groupData = gObj.currentViewData;\n }\n excelRows = this.processRecordContent(gObj, r, headerRow, exportProperties, groupData, excelRows, helper);\n }\n else {\n excelRows = this.processRecordContent(gObj, r, headerRow, exportProperties, undefined, excelRows, helper);\n }\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 this.capTemplate = undefined;\n this.footerTemplates = [];\n this.grpFooterTemplates = [];\n this.aggIndex = 0;\n this.totalAggregates = 0;\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) && !this.parent.groupSettings.enableLazyLoading) {\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 ExcelExport.prototype.processGroupedRows = function (\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n 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 // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var cell = {};\n cell.index = (index + level) - 1;\n var col = gObj.getColumnByField(item.field);\n // eslint-disable-next-line @typescript-eslint/no-explicit-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', data: item };\n this.parent.trigger(events.exportGroupCaption, cArgs);\n cell.value = cArgs.captionText;\n cell.style = this.getCaptionThemeStyle(this.theme);\n if (!isNullOrUndefined(cArgs.style)) {\n cell.style = this.mergeOptions(cell.style, cArgs.style);\n }\n var captionModelGen = new CaptionSummaryModelGenerator(gObj);\n var groupCaptionSummaryRows = captionModelGen.generateRows(item);\n this.fillAggregates(gObj, groupCaptionSummaryRows, (dataSource.level + dataSource.childLevels) - 1, 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 // eslint-disable-next-line @typescript-eslint/no-explicit-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 - 1) + dataSource.childLevels, true);\n }\n else {\n startIndex = this.processRecordRows(gObj, item.items, headerRow, (level - 1), startIndex, excelExportProperties, excelRows, helper);\n this.processAggregates(gObj, item, excelRows, undefined, (level - 1), true);\n }\n }\n };\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[parseInt(c.toString(), 10)];\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 if (column.type === 'dateonly' && typeof value === 'string' && value) {\n var arr = value.split(/[^0-9.]/);\n value = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10));\n }\n 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 // eslint-disable-next-line @typescript-eslint/no-explicit-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 templateRowHeight = this.setImage(excelCellArgs, idx);\n if (excelCellArgs.image.height && excelCellArgs.value !== '') {\n templateRowHeight += 30;\n }\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[parseInt(styleIndex.toString(), 10)], 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 // eslint-disable-next-line @typescript-eslint/no-explicit-any\n excelRow.height = templateRowHeight;\n }\n if (this.groupedColLength && this.groupedColLength < 8 && (level + 1) > 0) {\n excelRow.grouping = { outlineLevel: (level + 1), isCollapsed: true };\n excelRows.push(excelRow);\n }\n else {\n excelRows.push(excelRow);\n }\n if ((row.isExpand || this.isChild) && (!isNullOrUndefined(gObj.childGrid) || !isNullOrUndefined(gObj.detailTemplate))) {\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 else {\n var args = { parentRow: row, row: excelRow, value: {}, action: 'excelexport', gridInstance: gObj };\n this.parent.trigger(events.exportDetailTemplate, args);\n excelRow.childRows = this.processDetailTemplate(args);\n }\n }\n gObj.notify(events.exportRowDataBound, { rowObj: row, type: 'excel', excelRows: excelRows });\n }\n return startIndex;\n };\n ExcelExport.prototype.processDetailTemplate = function (templateData) {\n var _this = this;\n var rows = [];\n var templateRowHeight;\n var detailIndent = 2;\n var detailCellIndex;\n if (templateData.value.columnHeader || templateData.value.rows) {\n var processCell_1 = function (currentCell, isHeader) {\n var cell = {};\n if (isNullOrUndefined(currentCell.index)) {\n currentCell.index = detailCellIndex;\n detailCellIndex++;\n }\n cell.index = currentCell.index + detailIndent;\n if (!isNullOrUndefined(currentCell.value)) {\n cell.value = currentCell.value;\n }\n if (!isNullOrUndefined(currentCell.colSpan)) {\n cell.colSpan = currentCell.colSpan;\n }\n if (!isNullOrUndefined(currentCell.rowSpan)) {\n cell.rowSpan = currentCell.rowSpan;\n }\n if (isHeader) {\n cell.style = _this.getHeaderThemeStyle(_this.theme);\n }\n else {\n cell.style = _this.getRecordThemeStyle(_this.theme);\n }\n if (!isNullOrUndefined(currentCell.style)) {\n var cellStyle = {\n fontColor: currentCell.style.fontColor,\n fontName: currentCell.style.fontName,\n fontSize: currentCell.style.fontSize,\n hAlign: currentCell.style.excelHAlign,\n vAlign: currentCell.style.excelVAlign,\n rotation: currentCell.style.excelRotation,\n bold: currentCell.style.bold,\n indent: currentCell.style.indent,\n italic: currentCell.style.italic,\n underline: currentCell.style.underline,\n backColor: currentCell.style.backColor,\n wrapText: currentCell.style.wrapText,\n borders: currentCell.style.excelBorders,\n numberFormat: currentCell.style.excelNumberFormat,\n type: currentCell.style.excelType,\n strikeThrough: currentCell.style.strikeThrough\n };\n cell.style = _this.mergeOptions(cellStyle, cell.style);\n }\n if (!isNullOrUndefined(currentCell.image) && !isNullOrUndefined(currentCell.image.base64)) {\n if (currentCell.rowSpan > 1) {\n _this.setImage(currentCell, cell.index);\n }\n else {\n templateRowHeight = _this.setImage(currentCell, cell.index);\n if (currentCell.image.height && currentCell.value !== '') {\n templateRowHeight += 30;\n }\n }\n }\n if (!isNullOrUndefined(currentCell.hyperLink)) {\n cell.hyperlink = { target: currentCell.hyperLink.target };\n cell.value = currentCell.hyperLink.displayText;\n }\n return cell;\n };\n var processRow = function (currentRow, isHeader) {\n var excelDetailCells = [];\n detailCellIndex = 0;\n for (var j = 0; j < currentRow.cells.length; j++) {\n var currentCell = currentRow.cells[parseInt(j.toString(), 10)];\n var detailCell = processCell_1(currentCell, isHeader);\n excelDetailCells.push(detailCell);\n }\n var row = { index: _this.rowLength++, cells: excelDetailCells };\n if (!isNullOrUndefined(templateRowHeight)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n row.height = templateRowHeight;\n templateRowHeight = null;\n }\n rows.push(row);\n };\n if (templateData.value.columnHeader) {\n for (var i = 0; i < templateData.value.columnHeader.length; i++) {\n processRow(templateData.value.columnHeader[parseInt(i.toString(), 10)], true);\n }\n }\n if (templateData.value.rows) {\n for (var i = 0; i < templateData.value.rows.length; i++) {\n processRow(templateData.value.rows[parseInt(i.toString(), 10)]);\n }\n }\n }\n else if (templateData.value.image) {\n templateRowHeight = this.setImage(templateData.value, detailIndent);\n var row = {\n index: this.rowLength++,\n cells: [{\n index: detailIndent,\n style: this.getRecordThemeStyle(this.theme)\n }]\n };\n if (!isNullOrUndefined(templateRowHeight)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n row.height = templateRowHeight;\n templateRowHeight = null;\n }\n rows.push(row);\n }\n else if (templateData.value.text) {\n var row = {\n index: this.rowLength++,\n cells: [{\n index: detailIndent,\n value: templateData.value.text,\n style: this.getRecordThemeStyle(this.theme)\n }]\n };\n rows.push(row);\n }\n else if (templateData.value.hyperLink) {\n var row = {\n index: this.rowLength++,\n cells: [{\n index: 2,\n hyperlink: { target: templateData.value.hyperLink.target },\n value: templateData.value.hyperLink.displayText,\n style: this.getRecordThemeStyle(this.theme)\n }]\n };\n rows.push(row);\n }\n for (var i = 0; i < rows.length; i++) {\n rows[parseInt(i.toString(), 10)].grouping = {\n outlineLevel: 1, isCollapsed: !templateData.parentRow.isExpand, isHidden: !templateData.parentRow.isExpand\n };\n }\n return rows;\n };\n ExcelExport.prototype.setImage = function (args, idx) {\n if (isNullOrUndefined(this.sheet.images)) {\n this.sheet.images = [];\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var excelImage = {\n image: args.image.base64, row: this.rowLength, column: idx,\n lastRow: this.rowLength, lastColumn: idx\n };\n if (args.image.width && args.image.height) {\n excelImage.width = args.image.width;\n excelImage.height = args.image.height;\n }\n this.sheet.images.push(excelImage);\n this.columns[idx - 1].width = args.image.width || this.columns[idx - 1].width;\n return args.image.height || 50;\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[parseInt(i.toString(), 10)].grouping = { outlineLevel: intent + childGridObj\n .childGridLevel, 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 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 indent = gObj.groupSettings.columns.length ? indent - 1 : indent;\n excelRows = this.fillAggregates(gObj, sRows, indent, excelRows);\n }\n }\n return excelRows;\n };\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 // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var eCell = {};\n var columnsDetails = {};\n if (!isNullOrUndefined(cell.attributes.index)) {\n columnsDetails = this.parent.getColumnByIndex(cell.attributes.index);\n }\n if (cell.cellType === CellType.DetailFooterIntent || columnsDetails.type === 'checkbox') {\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(gObj, CellType.Summary, cell.column.footerTemplate, cell, row);\n }\n else if (groupFooterTemplate) {\n eCell.value = this.getAggreateValue(gObj, CellType.GroupSummary, cell.column.groupFooterTemplate, cell, row);\n }\n else if (groupCaptionTemplate) {\n eCell.value = this.getAggreateValue(gObj, 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 cell: cell\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 var dummyOutlineLevel = 'outlineLevel';\n var dummyGrouping = 'grouping';\n if (this.groupedColLength < 8 && this.groupedColLength > 0 && !(gObj.groupSettings.enableLazyLoading && isNullOrUndefined(excelRows[excelRows.length - 1][\"\" + dummyGrouping]))) {\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 (gObj, 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 || this.parent.isVue3 || this.parent.isAngular) &&\n !(typeof cell.column.footerTemplate === 'string' || typeof cell.column.groupFooterTemplate === 'string' || typeof cell.column.groupCaptionTemplate === 'string')) {\n txt = data[(cell.column.type)];\n return !isNullOrUndefined(txt) ? (txt) : '';\n }\n else {\n txt = (templateFn[getEnumValue(CellType, cell.cellType)](data));\n }\n return !isNullOrUndefined(txt[0]) ? 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[parseInt(index.toString(), 10)] !== 'name') {\n result[attrname[parseInt(index.toString(), 10)]] = JSON1[attrname[parseInt(index.toString(), 10)]];\n }\n }\n attrname = Object.keys(JSON2);\n for (var index = 0; index < attrname.length; index++) {\n if (attrname[parseInt(index.toString(), 10)] !== 'name') {\n result[attrname[parseInt(index.toString(), 10)]] = JSON2[attrname[parseInt(index.toString(), 10)]];\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.headerRotation = function (args) {\n var degree = args.style.rotation;\n if (degree <= 90 && degree >= 0) {\n args.style.hAlign = 'Left';\n }\n else if (degree > 90 && degree <= 180) {\n args.style.hAlign = 'Right';\n }\n else {\n degree = 180;\n args.style.hAlign = 'Right';\n }\n args.style.rotation = degree;\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 col = 0; col < gridColumns.length; col++) {\n this.parseStyles(gObj, gridColumns[parseInt(col.toString(), 10)], this.getRecordThemeStyle(this.theme), indent + col + 1);\n }\n var templateRowHeight;\n for (var row = 0; row < gridRows.length; row++) {\n var currentCellIndex = 1 + indent;\n var cells = [];\n for (var column = 0; column < gridRows[parseInt(row.toString(), 10)].cells.length; column++) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var style = {};\n var cell = {};\n var gridCell = gridRows[parseInt(row.toString(), 10)].cells[parseInt(column.toString(), 10)];\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 if (excelHeaderCellArgs.style.rotation) {\n this.headerRotation(excelHeaderCellArgs);\n }\n if (!isNullOrUndefined(excelHeaderCellArgs.image) && !isNullOrUndefined(excelHeaderCellArgs.image.base64)) {\n templateRowHeight = this.setImage(excelHeaderCellArgs, currentCellIndex);\n }\n if (!isNullOrUndefined(excelHeaderCellArgs.hyperLink)) {\n excelHeaderCellArgs.cell.hyperlink = { target: excelHeaderCellArgs.hyperLink.target };\n cell.value = excelHeaderCellArgs.hyperLink.displayText || cell.value;\n }\n cell.style = excelHeaderCellArgs.style;\n cells.push(cell);\n currentCellIndex++;\n }\n var excelRow = { index: this.rowLength++, cells: cells };\n if (!isNullOrUndefined(templateRowHeight)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n excelRow.height = templateRowHeight;\n }\n excelRows.push(excelRow);\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[parseInt(row.toString(), 10)];\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[parseInt(cellId.toString(), 10)];\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[parseInt(row.toString(), 10)];\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 === 'dateonly' ? 'date' : format.type.toLowerCase();\n }\n }\n else {\n style.numberFormat = col.format;\n style.type = col.type === 'dateonly' ? 'date' : 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' && !gObj.childGridLevel) {\n this.columns.push({ index: index + gObj.childGridLevel, width: typeof col.width === 'number' ?\n col.width : this.helper.getConvertedWidth(col.width) });\n }\n };\n ExcelExport.prototype.destroy = function () {\n //destroy for exporting\n };\n return ExcelExport;\n}());\nexport { ExcelExport };\n","import { print as printWindow, createElement, detach, classList, selectAll, extend } from '@syncfusion/ej2-base';\nimport { getPrintGridModel } from '../base/util';\nimport { Grid } from '../base/grid';\nimport * as events from '../base/constant';\nimport { Deferred } from '@syncfusion/ej2-data';\nimport * as literals from '../base/string-literals';\n/**\n * @returns {string[]} returns the cloned property\n * @hidden\n */\nexport function getCloneProperties() {\n return ['aggregates', 'allowGrouping', 'allowFiltering', 'allowMultiSorting', 'allowReordering', 'allowSorting',\n 'allowTextWrap', 'childGrid', 'columns', 'currentViewData', 'dataSource', 'detailTemplate', 'enableAltRow',\n 'enableColumnVirtualization', 'filterSettings', 'gridLines',\n 'groupSettings', 'height', 'locale', 'pageSettings', 'printMode', 'query', 'queryString', 'enableRtl',\n 'rowHeight', 'rowTemplate', 'sortSettings', 'textWrapSettings', 'allowPaging', 'hierarchyPrintMode', 'searchSettings',\n 'queryCellInfo', 'beforeDataBound'];\n}\n/**\n *\n * The `Print` module is used to handle print action.\n */\nvar Print = /** @class */ (function () {\n /**\n * Constructor for the Grid print module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {Scroll} scrollModule - specifies the scroll module\n * @hidden\n */\n function Print(parent, scrollModule) {\n this.isAsyncPrint = false;\n this.defered = new Deferred();\n this.parent = parent;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.contentReady, this.isContentReady(), this);\n this.actionBeginFunction = this.actionBegin.bind(this);\n this.parent.addEventListener(events.actionBegin, this.actionBeginFunction);\n this.parent.on(events.onEmpty, this.onEmpty.bind(this));\n this.parent.on(events.hierarchyPrint, this.hierarchyPrint, this);\n this.scrollModule = scrollModule;\n }\n Print.prototype.isContentReady = function () {\n var _this = this;\n if (this.isPrintGrid() && (this.parent.hierarchyPrintMode === 'None' || !this.parent.childGrid)) {\n return this.contentReady;\n }\n return function () {\n _this.defered.promise.then(function () {\n _this.contentReady();\n });\n if (_this.isPrintGrid()) {\n _this.hierarchyPrint();\n }\n };\n };\n Print.prototype.hierarchyPrint = function () {\n this.removeColGroup(this.parent);\n var printGridObj = window.printGridObj;\n if (printGridObj && !printGridObj.element.querySelector('[aria-busy=true')) {\n printGridObj.printModule.defered.resolve();\n }\n };\n /**\n * By default, prints all the Grid pages and hides the pager.\n * > You can customize print options using the\n * [`printMode`](./printmode/).\n *\n * @returns {void}\n */\n Print.prototype.print = function () {\n this.renderPrintGrid();\n };\n Print.prototype.onEmpty = function () {\n if (this.isPrintGrid()) {\n this.contentReady();\n }\n };\n Print.prototype.actionBegin = function () {\n if (this.isPrintGrid()) {\n this.isAsyncPrint = true;\n }\n };\n Print.prototype.renderPrintGrid = function () {\n var gObj = this.parent;\n var element = createElement('div', {\n id: this.parent.element.id + '_print', className: gObj.element.className + ' e-print-grid'\n });\n element.classList.remove('e-gridhover');\n document.body.appendChild(element);\n var printGrid = new Grid(getPrintGridModel(gObj, gObj.hierarchyPrintMode));\n for (var i = 0; i < printGrid.columns.length; i++) {\n printGrid.columns[parseInt(i.toString(), 10)] = extend({}, printGrid.columns[parseInt(i.toString(), 10)]);\n if (gObj.isFrozenGrid() && !gObj.getFrozenColumns()) {\n printGrid.columns[parseInt(i.toString(), 10)].freeze = undefined;\n }\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.parent.isAngular) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n printGrid.viewContainerRef = this.parent.viewContainerRef;\n }\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n printGrid.load = function () { };\n printGrid.query = gObj.getQuery().clone();\n window.printGridObj = printGrid;\n printGrid.isPrinting = true;\n var modules = printGrid.getInjectedModules();\n var injectedModues = gObj.getInjectedModules();\n if (!modules || modules.length !== injectedModues.length) {\n printGrid.setInjectedModules(injectedModues);\n }\n gObj.notify(events.printGridInit, { element: element, printgrid: printGrid });\n this.parent.log('exporting_begin', this.getModuleName());\n printGrid.registeredTemplate = this.parent.registeredTemplate;\n printGrid.isVue = this.parent.isVue;\n printGrid.appendTo(element);\n if (!gObj.isVue3) {\n printGrid.trigger = gObj.trigger;\n }\n };\n Print.prototype.contentReady = function () {\n if (this.isPrintGrid()) {\n var gObj = this.parent;\n if (this.isAsyncPrint) {\n this.printGrid();\n return;\n }\n var args = {\n requestType: 'print',\n element: gObj.element,\n selectedRows: gObj.getContentTable().querySelectorAll('tr[aria-selected=\"true\"]'),\n cancel: false,\n hierarchyPrintMode: gObj.hierarchyPrintMode\n };\n if (!this.isAsyncPrint) {\n gObj.trigger(events.beforePrint, args);\n }\n if (args.cancel) {\n detach(gObj.element);\n return;\n }\n if (!this.isAsyncPrint) {\n this.printGrid();\n }\n }\n };\n Print.prototype.printGrid = function () {\n var gObj = this.parent;\n // Height adjustment on print grid\n if (gObj.height !== 'auto') { // if scroller enabled\n var cssProps = this.scrollModule.getCssProperties();\n var contentDiv = gObj.element.querySelector('.' + literals.content);\n var headerDiv = gObj.element.querySelector('.' + literals.gridHeader);\n contentDiv.style.height = 'auto';\n contentDiv.style.overflowY = 'auto';\n headerDiv.style[cssProps.padding] = '';\n headerDiv.firstElementChild.style[cssProps.border] = '';\n }\n // Grid alignment adjustment on grouping\n if (gObj.allowGrouping) {\n if (!gObj.groupSettings.columns.length) {\n gObj.element.querySelector('.e-groupdroparea').style.display = 'none';\n }\n else {\n this.removeColGroup(gObj);\n }\n }\n // hide horizontal scroll\n for (var _i = 0, _a = [].slice.call(gObj.element.getElementsByClassName(literals.content)); _i < _a.length; _i++) {\n var element = _a[_i];\n element.style.overflowX = 'hidden';\n }\n // Hide the waiting popup\n var waitingPop = [].slice.call(gObj.element.getElementsByClassName('e-spin-show'));\n for (var _b = 0, _c = [].slice.call(waitingPop); _b < _c.length; _b++) {\n var element = _c[_b];\n classList(element, ['e-spin-hide'], ['e-spin-show']);\n }\n this.printGridElement(gObj);\n gObj.isPrinting = false;\n delete window.printGridObj;\n var args = {\n element: gObj.element\n };\n gObj.trigger(events.printComplete, args);\n gObj.destroy();\n this.parent.log('exporting_complete', this.getModuleName());\n };\n Print.prototype.printGridElement = function (gObj) {\n classList(gObj.element, ['e-print-grid-layout'], ['e-print-grid']);\n if (gObj.isPrinting) {\n detach(gObj.element);\n }\n this.printWind = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');\n this.printWind.moveTo(0, 0);\n this.printWind.resizeTo(screen.availWidth, screen.availHeight);\n this.printWind = printWindow(gObj.element, this.printWind);\n };\n Print.prototype.removeColGroup = function (gObj) {\n var depth = gObj.groupSettings.columns.length;\n var element = gObj.element;\n var id = '#' + gObj.element.id;\n if (!depth) {\n return;\n }\n var groupCaption = selectAll('.e-groupcaption', element);\n var colSpan = groupCaption[depth - 1].getAttribute('colspan');\n for (var i = 0; i < groupCaption.length; i++) {\n groupCaption[parseInt(i.toString(), 10)].setAttribute('colspan', colSpan);\n }\n var colGroups = selectAll(\"colgroup\" + id + \"colgroup\", element);\n var contentColGroups = selectAll('.e-content colgroup', element);\n var footerColGroups = selectAll('.e-summarycontent colgroup', element);\n this.hideColGroup(colGroups, depth);\n this.hideColGroup(contentColGroups, depth);\n this.hideColGroup(footerColGroups, depth);\n };\n Print.prototype.hideColGroup = function (colGroups, depth) {\n for (var i = 0; i < colGroups.length; i++) {\n for (var j = 0; j < depth; j++) {\n colGroups[parseInt(i.toString(), 10)].children[parseInt(j.toString(), 10)].style.display = 'none';\n }\n }\n };\n /**\n * To destroy the print\n *\n * @returns {boolean} returns the isPrintGrid or not\n * @hidden\n */\n Print.prototype.isPrintGrid = function () {\n return this.parent.element.id.indexOf('_print') > 0 && this.parent.isPrinting;\n };\n /**\n * To destroy the print\n *\n * @returns {void}\n * @hidden\n */\n Print.prototype.destroy = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.contentReady, this.contentReady.bind(this));\n this.parent.removeEventListener(events.actionBegin, this.actionBeginFunction);\n this.parent.off(events.onEmpty, this.onEmpty.bind(this));\n this.parent.off(events.hierarchyPrint, this.hierarchyPrint);\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Print.prototype.getModuleName = function () {\n return 'print';\n };\n Print.printGridProp = getCloneProperties().concat([events.beforePrint, events.printComplete, events.load]);\n return Print;\n}());\nexport { Print };\n","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/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { EventHandler, Property, Internationalization, NotifyPropertyChanges } 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, ChildProperty } 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 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 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'];\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport var TimePickerBase;\n(function (TimePickerBase) {\n // eslint-disable-next-line max-len, jsdoc/require-jsdoc\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 // eslint-disable-next-line @typescript-eslint/no-unused-vars\n formatOptions = { format: timeFormat, type: 'time', calendar: 'islamic' };\n }\n var start;\n var interval = step * 60000;\n var listItems = [];\n var timeCollections = [];\n start = +(min.setMilliseconds(0));\n var 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 = {}));\nvar TimeMaskPlaceholder = /** @class */ (function (_super) {\n __extends(TimeMaskPlaceholder, _super);\n function TimeMaskPlaceholder() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('day')\n ], TimeMaskPlaceholder.prototype, \"day\", void 0);\n __decorate([\n Property('month')\n ], TimeMaskPlaceholder.prototype, \"month\", void 0);\n __decorate([\n Property('year')\n ], TimeMaskPlaceholder.prototype, \"year\", void 0);\n __decorate([\n Property('day of the week')\n ], TimeMaskPlaceholder.prototype, \"dayOfTheWeek\", void 0);\n __decorate([\n Property('hour')\n ], TimeMaskPlaceholder.prototype, \"hour\", void 0);\n __decorate([\n Property('minute')\n ], TimeMaskPlaceholder.prototype, \"minute\", void 0);\n __decorate([\n Property('second')\n ], TimeMaskPlaceholder.prototype, \"second\", void 0);\n return TimeMaskPlaceholder;\n}(ChildProperty));\nexport { TimeMaskPlaceholder };\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 * @param {TimePickerModel} options - Specifies the TimePicker model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function TimePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.liCollections = [];\n _this.timeCollections = [];\n _this.disableItemCollection = [];\n _this.invalidValueString = null;\n _this.isAngular = false;\n _this.preventChange = false;\n _this.maskedDateValue = '';\n _this.moduleName = _this.getModuleName();\n _this.timeOptions = options;\n return _this;\n }\n /**\n * Initialize the event handler\n *\n * @returns {void}\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 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 // element creation\n TimePicker.prototype.render = function () {\n this.initialize();\n this.createInputElement();\n this.updateHtmlAttributeToWrapper();\n this.setTimeAllowEdit();\n this.setEnable();\n this.validateInterval();\n this.bindEvents();\n this.validateDisable();\n this.setTimeZone();\n this.setValue(this.getFormattedValue(this.value));\n if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType === 'Always' || !this.floatLabelType || !this.placeholder)) {\n this.updateInputValue(this.maskedDateValue);\n this.checkErrorState(this.maskedDateValue);\n }\n this.anchor = this.inputElement;\n this.inputElement.setAttribute('value', this.inputElement.value);\n this.inputEleValue = this.getDateObject(this.inputElement.value);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {\n this.enabled = false;\n }\n this.renderComplete();\n };\n TimePicker.prototype.setTimeZone = function () {\n if (!isNullOrUndefined(this.serverTimezoneOffset) && this.value) {\n var clientTimeZoneDiff = new Date().getTimezoneOffset() / 60;\n var serverTimezoneDiff = this.serverTimezoneOffset;\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 };\n TimePicker.prototype.isDayLightSaving = function () {\n var firstOffset = new Date(this.value.getFullYear(), 0, 1).getTimezoneOffset();\n var secondOffset = new Date(this.value.getFullYear(), 6, 1).getTimezoneOffset();\n return (this.value.getTimezoneOffset() < Math.max(firstOffset, secondOffset));\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 if (!isNullOrUndefined(this.value)) {\n this.popupCreation();\n this.popupObj.destroy();\n this.popupWrapper = this.popupObj = null;\n }\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 if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\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 if (this.fullScreenMode && Browser.isDevice) {\n this.cssClass += ' ' + \"e-popup-expand\";\n }\n var updatedCssClassesValue = this.cssClass;\n var isBindClearAction = this.enableMask ? false : true;\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 bindClearAction: isBindClearAction,\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-autocomplete': 'list', 'tabindex': '0',\n 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',\n '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: '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: '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 // eslint-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 // eslint-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.requiredModules = function () {\n var modules = [];\n if (this.enableMask) {\n modules.push({ args: [this], member: 'MaskedDateTime' });\n }\n return modules;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n TimePicker.prototype.cldrFormat = function (type) {\n var cldrDateTimeString;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDateTimeString = (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 this.hide();\n this.unBindEvents();\n var ariaAttribute = {\n 'aria-autocomplete': 'list', 'tabindex': '0',\n 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',\n '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 if (!isNullOrUndefined(this.cloneElement.getAttribute('tabindex'))) {\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.inputElement.removeAttribute('tabindex');\n }\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 this.rippleFn = null;\n this.openPopupEventArgs = null;\n this.selectedElement = null;\n this.listTag = null;\n this.liCollections = null;\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 this.popupWrapper = this.createElement('div', {\n className: ROOT + ' ' + POPUP,\n attrs: { 'id': this.element.id + '_popup', 'style': 'visibility:hidden' }\n });\n this.popupWrapper.setAttribute('aria-label', this.element.id);\n this.popupWrapper.setAttribute('role', 'dialog');\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.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 this.createListItems();\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 };\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.removeAttribute('aria-activedescendant');\n remove(_this.popupObj.element);\n _this.popupObj.destroy();\n _this.popupWrapper.innerHTML = '';\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 if (Browser.isDevice && this.fullScreenMode) {\n this.popupObj.element.style.maxHeight = \"100%\";\n this.popupObj.element.style.width = \"100%\";\n }\n else {\n this.popupObj.element.style.maxHeight = POPUPDIMENSION;\n }\n if (Browser.isDevice && this.fullScreenMode) {\n var modelHeader = this.createElement('div', { className: 'e-model-header' });\n var modelTitleSpan = this.createElement(\"span\", { className: \"e-model-title\" });\n modelTitleSpan.textContent = \"Select time\";\n var modelCloseIcon = this.createElement(\"span\", { className: \"e-popup-close\" });\n EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.timePopupCloseHandler, this);\n modelHeader.appendChild(modelCloseIcon);\n modelHeader.appendChild(modelTitleSpan);\n this.popupWrapper.insertBefore(modelHeader, this.popupWrapper.firstElementChild);\n }\n };\n TimePicker.prototype.timePopupCloseHandler = function (e) {\n this.hide();\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: '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.enableMask && this.inputElement.value === this.maskedDateValue)) {\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('dayPeriods.format.wide', getDefaultDateObject());\n }\n else {\n var gregorianFormat = '.dates.calendars.gregorian.dayPeriods.format.abbreviated';\n var mainVal = '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 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.timeCollections[0];\n var scrollTime = 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 = (getValue('dateFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDate = (this.getCultureDateObject(cldrData, '' + this.locale));\n }\n return cldrDate;\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 = (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 = (getValue('timeFormats.medium', getDefaultDateObject()));\n }\n else {\n cldrTime = (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 this.interopAdaptor.invokeMethodAsync('OnTimeIconClick');\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 e.preventDefault();\n if (this.isPopupOpen()) {\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 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 if (this.enableMask) {\n event.preventDefault();\n this.notify('setMaskSelection', {\n module: 'MaskedDateTime'\n });\n return;\n }\n else {\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 };\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 // eslint-disable-next-line no-self-assign\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') || ((event.action == 'home' || event.action == 'end' || event.action == 'up' || event.action == 'down') && !this.isPopupOpen() && !this.enableMask))) {\n event.preventDefault();\n }\n switch (event.action) {\n case 'home':\n case 'end':\n case 'up':\n case 'down':\n if (!this.isPopupOpen()) {\n this.popupCreation();\n this.popupObj.destroy();\n this.popupObj = this.popupWrapper = null;\n }\n if (this.enableMask && !this.readonly && !this.isPopupOpen()) {\n event.preventDefault();\n this.notify('keyDownHandler', {\n module: 'MaskedDateTime',\n e: event\n });\n }\n if (this.isPopupOpen()) {\n this.keyHandler(event);\n }\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.updateValue(this.valueWithMinutes, event);\n }\n else {\n this.updateValue(this.inputElement.value, event);\n }\n this.hide();\n this.isNavigate = false;\n if (this.isPopupOpen()) {\n event.stopPropagation();\n }\n break;\n case 'open':\n this.show(event);\n break;\n case 'escape':\n this.updateInputValue(this.objToString(this.value));\n if (this.enableMask) {\n if (!this.value) {\n this.updateInputValue(this.maskedDateValue);\n }\n this.createMask();\n }\n this.previousState(this.value);\n this.hide();\n break;\n case 'close':\n this.hide();\n break;\n case 'right':\n case 'left':\n case 'tab':\n case 'shiftTab':\n if (!this.isPopupOpen() && this.enableMask && !this.readonly) {\n if ((this.inputElement.selectionStart === 0 && this.inputElement.selectionEnd === this.inputElement.value.length) ||\n (this.inputElement.selectionEnd !== this.inputElement.value.length && event.action === 'tab') ||\n (this.inputElement.selectionStart !== 0 && event.action === 'shiftTab') || (event.action === 'left' || event.action === 'right')) {\n event.preventDefault();\n }\n this.notify('keyDownHandler', { module: 'MaskedDateTime',\n e: event\n });\n }\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.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 _this.inputElement.removeAttribute('aria-owns');\n _this.inputElement.removeAttribute('aria-controls');\n _this.inputElement.removeAttribute('aria-activedescendant');\n EventHandler.remove(document, 'mousedown touchstart', _this.documentClickHandler);\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)) {\n this.checkValue(li.getAttribute('data-value'));\n if (this.enableMask) {\n this.createMask();\n }\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 };\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 // eslint-disable-next-line @typescript-eslint/no-unused-vars\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 if (this.enableMask) {\n this.createMask();\n }\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.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 EventHandler.add(this.inputElement, 'input', this.inputEventHandler, this);\n if (this.enableMask) {\n EventHandler.add(this.inputElement, 'keydown', this.keydownHandler, this);\n }\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.keydownHandler = function (e) {\n switch (e.code) {\n case 'Delete':\n if (this.enableMask && !this.popupObj && !this.readonly) {\n this.notify('keyDownHandler', {\n module: 'MaskedDateTime',\n e: e\n });\n }\n break;\n default:\n break;\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.checkDateValue(this.inputEleValue);\n if (this.element.tagName === 'EJS-TIMEPICKER') {\n val = null;\n timeValue = '';\n this.inputElement.setAttribute('value', '');\n }\n this.setProperties({ value: val }, true);\n this.prevDate = this.value;\n this.valueWithMinutes = this.value;\n this.initValue = this.value;\n if (this.inputElement) {\n this.updateInputValue(timeValue);\n if (this.enableMask) {\n if (!timeValue) {\n this.updateInputValue(this.maskedDateValue);\n }\n this.createMask();\n }\n this.checkErrorState(timeValue);\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.inputEventHandler = function () {\n if (this.enableMask) {\n this.notify('inputHandler', {\n module: 'MaskedDateTime'\n });\n }\n };\n TimePicker.prototype.unBindEvents = function () {\n if (this.inputWrapper) {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', 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 EventHandler.remove(this.inputElement, 'input', this.inputEventHandler);\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) && !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.popupWrapper) {\n this.popupWrapper.scrollTop = 0;\n }\n if (this.enableMask) {\n this.notify('clearHandler', {\n module: 'MaskedDateTime'\n });\n }\n if (closest(this.element, 'form')) {\n var element = this.element;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n TimePicker.prototype.clear = function (event) {\n this.setProperties({ value: null }, true);\n this.initValue = null;\n this.resetState();\n this.raiseClearedEvent(event);\n this.changeEvent(event);\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 if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '' || 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 if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.inputElement.getAttribute(prop) === 'readonly' ||\n this.inputElement.getAttribute(prop) === '' || 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 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 ((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 break;\n case 'max':\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 break;\n case 'value':\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 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 if (this.enableMask) {\n if (!inputVal) {\n this.updateInputValue(this.maskedDateValue);\n }\n if (isNullOrUndefined(val) && value !== this.maskedDateValue) {\n this.createMask();\n }\n if (isNullOrUndefined(val) && value === this.maskedDateValue) {\n this.updateInputValue(this.maskedDateValue);\n }\n }\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) {\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.getDateObject(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 if (this.enableMask) {\n if (!value_1) {\n this.updateInputValue(this.maskedDateValue);\n }\n }\n }\n else {\n this.updateInputValue(time);\n if (this.enableMask) {\n if (time === '') {\n this.updateInputValue(this.maskedDateValue);\n }\n if (isNullOrUndefined(time) && value !== this.maskedDateValue) {\n this.createMask();\n }\n if (isNullOrUndefined(time) && value === this.maskedDateValue) {\n this.updateInputValue(this.maskedDateValue);\n }\n }\n }\n return time;\n };\n TimePicker.prototype.createMask = function () {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n };\n TimePicker.prototype.findNextElement = function (event) {\n var textVal = (this.inputElement).value;\n var value = isNullOrUndefined(this.valueWithMinutes) ? this.createDateObj(textVal) :\n this.getDateObject(this.valueWithMinutes);\n var timeVal = null;\n var count = this.liCollections.length;\n var collections = this.timeCollections;\n if (!isNullOrUndefined(this.checkDateValue(value)) || !isNullOrUndefined(this.activeIndex)) {\n if (event.action === 'home') {\n var index = this.validLiElement(0);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n }\n else if (event.action === 'end') {\n var index = this.validLiElement(collections.length - 1, true);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n }\n else {\n if (event.action === 'down') {\n for (var i = 0; i < count; i++) {\n if (+value < this.timeCollections[i]) {\n var index = this.validLiElement(i);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n break;\n }\n else if (i === count - 1) {\n var index = this.validLiElement(0);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n break;\n }\n }\n }\n else {\n for (var i = count - 1; i >= 0; i--) {\n if (+value > this.timeCollections[i]) {\n var index = this.validLiElement(i, true);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n break;\n }\n else if (i === 0) {\n var index = this.validLiElement(count - 1);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n break;\n }\n }\n }\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.elementValue(isNullOrUndefined(timeVal) ? null : new Date(timeVal));\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 this.elementValue(new Date(this.timeCollections[index]));\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 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 return elementIndex;\n };\n TimePicker.prototype.keyHandler = function (event) {\n if (isNullOrUndefined(this.step) || this.step <= 0 || !isNullOrUndefined(this.inputWrapper)\n && this.inputWrapper.buttons[0].classList.contains(DISABLED)) {\n return;\n }\n var count = this.timeCollections.length;\n if (isNullOrUndefined(this.getActiveElement()) || this.getActiveElement().length === 0) {\n if (this.liCollections.length > 0) {\n if (isNullOrUndefined(this.value) && isNullOrUndefined(this.activeIndex)) {\n var index = this.validLiElement(0, event.action === 'down' ? false : true);\n this.activeIndex = index;\n this.selectedElement = this.liCollections[index];\n this.elementValue(new Date(this.timeCollections[index]));\n }\n else {\n this.findNextElement(event);\n }\n }\n else {\n this.findNextElement(event);\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 nextItem = isNullOrUndefined(this.timeCollections[index]) ?\n this.timeCollections[0] : this.timeCollections[index];\n }\n else if (event.action === 'home') {\n var index = this.validLiElement(0);\n this.activeIndex = index;\n nextItem = this.timeCollections[index];\n }\n else if (event.action === 'end') {\n var index = this.validLiElement(count - 1, true);\n this.activeIndex = index;\n nextItem = this.timeCollections[index];\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.elementValue(new Date(nextItem));\n }\n this.isNavigate = true;\n this.setHover(this.selectedElement, NAVIGATION);\n this.setActiveDescendant();\n if (this.enableMask) {\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 getValue('main.' + c + '.dates.calendars.gregorian.timeFormats.short', ld);\n };\n TimePicker.prototype.getCultureDateObject = function (ld, c) {\n return 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 if (this.enableMask && this.value) {\n this.createMask();\n }\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) && this.value) {\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });\n }\n else {\n this.inputElement.removeAttribute('aria-activedescendant');\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.timeCollections[i] === +this.getDateObject(this.valueWithMinutes))) {\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 = 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': '-1' } });\n var start;\n var interval = this.step * 60000;\n var listItems = [];\n this.timeCollections = [];\n this.disableItemCollection = [];\n start = +(this.getDateObject(this.initMin).setMilliseconds(0));\n var 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', 'tabindex': '0' });\n append([this.listTag], this.listWrapper);\n };\n TimePicker.prototype.documentClickHandler = function (event) {\n var target = event.target;\n if ((!isNullOrUndefined(this.popupObj) && !isNullOrUndefined(this.inputWrapper) && (this.inputWrapper.container.contains(target) && event.type !== 'mousedown' ||\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 && (!target.classList.contains('e-dlg-overlay'))) {\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 if (this.enableMask && this.maskedDateValue && this.placeholder && this.floatLabelType !== 'Always') {\n if (this.inputElement.value === this.maskedDateValue && !this.value && (this.floatLabelType === 'Auto' || this.floatLabelType === 'Never' || this.placeholder)) {\n this.updateInputValue('');\n }\n }\n removeClass([this.inputWrapper.container], [FOCUS]);\n if (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 this.cursorDetails = null;\n this.isNavigate = false;\n if (this.inputElement.value === '') {\n this.invalidValueString = null;\n }\n var blurArguments = {\n model: this\n };\n this.trigger('blur', blurArguments);\n };\n /**\n * Focuses out the TimePicker textbox element.\n *\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\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\n };\n if (!this.readonly && !Browser.isDevice && !this.enableMask) {\n this.selectInputText();\n }\n if (this.enableMask && !this.inputElement.value && this.placeholder) {\n if (this.maskedDateValue && !this.value && (this.floatLabelType === 'Auto' || this.floatLabelType === 'Never' || this.placeholder)) {\n this.updateInputValue(this.maskedDateValue);\n this.inputElement.selectionStart = 0;\n this.inputElement.selectionEnd = this.inputElement.value.length;\n }\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 *\n * @returns {void}\n */\n TimePicker.prototype.focusIn = function () {\n if (document.activeElement !== this.inputElement && this.enabled) {\n this.inputElement.focus();\n }\n };\n /**\n * Hides the TimePicker popup.\n *\n * @returns {void}\n\n */\n TimePicker.prototype.hide = function () {\n this.closePopup(100, null);\n this.clearIconState();\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Opens the popup to show the list items.\n *\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.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 _this.openPopupEventArgs = eventArgs;\n if (!_this.openPopupEventArgs.cancel && !_this.inputWrapper.buttons[0].classList.contains(DISABLED)) {\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 attributes(_this.inputElement, { 'aria-owns': _this.inputElement.id + '_options' });\n attributes(_this.inputElement, { 'aria-controls': _this.inputElement.id });\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 _this.popupWrapper = _this.listTag = undefined;\n _this.liCollections = _this.timeCollections = _this.disableItemCollection = [];\n _this.popupObj = null;\n }\n });\n if (Browser.isDevice) {\n var dlgOverlay = this.createElement('div', { className: 'e-dlg-overlay' });\n dlgOverlay.style.zIndex = (this.zIndex - 1).toString();\n this.mobileTimePopupWrap.appendChild(dlgOverlay);\n }\n }\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\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 /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the properties to be maintained upon browser refresh.\n *\n * @returns {string}\n */\n TimePicker.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * To get component name\n *\n * @returns {string} Returns the 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 *\n * @param {TimePickerModel} newProp - Returns the dynamic property value of the component.\n * @param {TimePickerModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\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 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 this.setProperties({ enableRtl: newProp.enableRtl }, true);\n this.setEnableRtl();\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 this.getProperty(newProp, prop);\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 if (this.timeOptions && this.timeOptions.placeholder == null) {\n this.updatePlaceHolder();\n }\n this.setValue(this.value);\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n }\n break;\n case 'width':\n setStyleAttribute(this.inputWrapper.container, { 'width': this.setWidth(newProp.width) });\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n break;\n case 'format':\n this.setProperties({ format: newProp.format }, true);\n this.checkTimeFormat();\n this.setValue(this.value);\n if (this.enableMask) {\n this.createMask();\n if (!this.value) {\n this.updateInputValue(this.maskedDateValue);\n }\n }\n break;\n case 'value':\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 if (this.enableMask && isNullOrUndefined(newProp.value)) {\n this.updateInputValue(this.maskedDateValue);\n this.checkErrorState(this.maskedDateValue);\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 if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\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 if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n break;\n case 'strictMode':\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 break;\n case 'scrollTo':\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 break;\n case 'enableMask':\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n this.updateInputValue(this.maskedDateValue);\n }\n else {\n if (this.inputElement.value === this.maskedDateValue) {\n this.updateInputValue('');\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, \"fullScreenMode\", 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 Property(false)\n ], TimePicker.prototype, \"enableMask\", void 0);\n __decorate([\n Property({ day: 'day', month: 'month', year: 'year', hour: 'hour', minute: 'minute', second: 'second', dayOfTheWeek: 'day of the week' })\n ], TimePicker.prototype, \"maskPlaceholder\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"serverTimezoneOffset\", 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/* eslint-enable @typescript-eslint/no-explicit-any */\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// eslint-disable-next-line @typescript-eslint/triple-slash-reference\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 } 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 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 * @param {DateTimePickerModel} options - Specifies the DateTimePicker model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\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.moduleName = _this.getModuleName();\n _this.formatRegex = /dddd|ddd|dd|d|MMMM|MMM|MM|M|yyyy|yyy|yy|y|'[^']*'|'[^']*'/g;\n _this.dateFormatString = '';\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 *\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 *\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: this\n };\n if (this.isTimePopupOpen()) {\n this.hide(e);\n }\n this.trigger('blur', blurArguments);\n };\n /**\n * To destroy the widget.\n *\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 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',\n 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off'\n };\n if (this.inputElement) {\n Input.removeAttributes(ariaAttribute, this.inputElement);\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 this.liCollections = null;\n this.rippleFn = null;\n this.selectedElement = null;\n this.listTag = null;\n this.timeIcon = null;\n this.popupObject = null;\n this.preventArgs = null;\n this.keyboardModule = null;\n _super.prototype.destroy.call(this);\n };\n /**\n * To Initialize the control rendering.\n *\n * @returns {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 if (typeof (this.min) === 'string') {\n this.min = this.checkDateValue(new Date(this.min));\n }\n if (typeof (this.max) === 'string') {\n this.max = this.checkDateValue(new Date(this.max));\n }\n if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {\n this.enabled = false;\n }\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 if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n }\n this.setValue(true);\n if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType === 'Always' || !this.floatLabelType || !this.placeholder)) {\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\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 if (this.floatLabelType === 'Auto') {\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n }\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-date-time-icon');\n }\n this.renderComplete();\n };\n DateTimePicker.prototype.setValue = function (isDynamic) {\n if (isDynamic === void 0) { isDynamic = false; }\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, isDynamic);\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: '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 = (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: '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 = (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 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 this.cldrDateTimeFormat().replace(this.formatRegex, this.TimePopupFormat());\n dateObject = this.globalize.parseDate(this.inputElement.value, {\n format: this.dateFormatString, 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 : 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 + '_options' });\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 if (!Browser.isDevice || (Browser.isDevice && !this.fullScreenMode)) {\n this.popupObject.refreshPosition(this.inputElement);\n }\n if (Browser.isDevice && this.fullScreenMode) {\n this.dateTimeWrapper.style.left = '0px';\n }\n if (Browser.isDevice) {\n var dlgOverlay = this.createElement('div', { className: 'e-dlg-overlay' });\n dlgOverlay.style.zIndex = (this.zIndex - 1).toString();\n this.timeModal.appendChild(dlgOverlay);\n }\n }\n }\n };\n DateTimePicker.prototype.openPopup = function (e) {\n var _this = this;\n this.preventArgs = {\n cancel: false,\n popup: 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 attributes(_this.inputElement, { 'aria-owns': _this.inputElement.id + '_options' });\n attributes(_this.inputElement, { 'aria-controls': _this.inputElement.id });\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) && event.type !== 'mousedown' ||\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 && !isNullOrUndefined(this.inputWrapper) && target !== this.inputWrapper.container && !target.classList.contains('e-dlg-overlay')) {\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.removeAttribute('aria-activedescendant');\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 if (Browser.isDevice && this.fullScreenMode) {\n this.popupObject.element.style.display = \"flex\";\n this.popupObject.element.style.maxHeight = \"100%\";\n this.popupObject.element.style.width = \"100%\";\n }\n else {\n this.popupObject.element.style.maxHeight = POPUPDIMENSION;\n }\n if (Browser.isDevice && this.fullScreenMode) {\n var modelWrapper = createElement('div', { className: 'e-datetime-mob-popup-wrap' });\n var modelHeader = this.createElement('div', { className: 'e-model-header' });\n var modelTitleSpan = this.createElement(\"span\", { className: \"e-model-title\" });\n modelTitleSpan.textContent = \"Select time\";\n var modelCloseIcon = this.createElement(\"span\", { className: \"e-popup-close\" });\n EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.dateTimeCloseHandler, this);\n var timeContent = this.dateTimeWrapper.querySelector(\".e-content\");\n modelHeader.appendChild(modelCloseIcon);\n modelHeader.appendChild(modelTitleSpan);\n modelWrapper.appendChild(modelHeader);\n modelWrapper.appendChild(timeContent);\n this.dateTimeWrapper.insertBefore(modelWrapper, this.dateTimeWrapper.firstElementChild);\n }\n };\n DateTimePicker.prototype.dateTimeCloseHandler = function (e) {\n this.hide();\n };\n DateTimePicker.prototype.setDimension = function (width) {\n if (typeof width === 'number') {\n width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n // eslint-disable-next-line no-self-assign\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 if (Browser.isDevice && this.fullScreenMode) {\n return popupHeight;\n }\n else {\n return popupHeight > height ? height : popupHeight;\n }\n };\n DateTimePicker.prototype.changeEvent = function (e) {\n _super.prototype.changeEvent.call(this, e);\n if ((this.value && this.value.valueOf()) !== (this.previousDateTime && +this.previousDateTime.valueOf())) {\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.previousDate = this.value;\n }\n };\n DateTimePicker.prototype.setTimeScrollPosition = function () {\n var 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 if (Browser.isDevice && this.fullScreenMode) {\n var listContent = this.dateTimeWrapper.querySelector('.e-content');\n listContent.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION + lineHeight / HALFPOSITION)) : height;\n }\n else {\n this.dateTimeWrapper.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION + lineHeight / HALFPOSITION)) : height;\n }\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 if (this.enableMask) {\n this.createMask();\n }\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.createMask = function () {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\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 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) && this.value) {\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });\n }\n else {\n this.inputElement.removeAttribute('aria-activedescendant');\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 = 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.TimePopupFormat = function () {\n var format = '';\n var formatCount = 0;\n var proxy = this;\n function formatValueSpecifier(formattext) {\n switch (formattext) {\n case 'd':\n case 'dd':\n case 'ddd':\n case 'dddd':\n case 'M':\n case 'MM':\n case 'MMM':\n case 'MMMM':\n case 'y':\n case 'yy':\n case 'yyy':\n case 'yyyy':\n if (format == '') {\n format = format + formattext;\n }\n else {\n format = format + \"/\" + formattext;\n }\n formatCount = formatCount + 1;\n break;\n }\n if (formatCount > 2) {\n proxy.dateFormatString = format;\n }\n return format;\n }\n return formatValueSpecifier;\n };\n DateTimePicker.prototype.endTime = function (date) {\n var tempEndValue;\n var end;\n var tempMax = this.max;\n var 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: 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 // eslint-disable-next-line @typescript-eslint/no-unused-vars\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 this.inputElement.removeAttribute('aria-owns');\n this.inputElement.removeAttribute('aria-controls');\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 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 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 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 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 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 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 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 if (this.enableMask) {\n modules.push(this.maskedDateModule());\n }\n return modules;\n };\n DateTimePicker.prototype.maskedDateModule = function () {\n var modules = { args: [this], member: 'MaskedDateTime' };\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: '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]) ?\n 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 *\n * @param {DateTimePickerModel} newProp - Returns the dynamic property value of the component.\n * @param {DateTimePickerModel} oldProp - Returns the previous property value of the component.\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 this.invalidValueString = null;\n this.checkInvalidValue(newProp.value);\n newProp.value = this.value;\n newProp.value = this.validateValue(newProp.value);\n if (this.enableMask) {\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(this.getFormattedValue(newProp.value), this.inputElement, this.floatLabelType, this.showClearButton);\n }\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 this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n if (this.enableMask && this.value) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n }\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 if (this.dateTimeOptions && this.dateTimeOptions.placeholder == null) {\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);\n }\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 if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n if (!this.value) {\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n }\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.inputElement);\n if (this.enabled) {\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\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 Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-date-time-icon');\n }\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 if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-date-time-icon');\n }\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 case 'enableMask':\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n if (this.inputElement.value === this.maskedDateValue) {\n this.maskedDateValue = '';\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\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 }\n };\n /**\n * To get component name.\n *\n * @returns {string} Returns the 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(false)\n ], DateTimePicker.prototype, \"fullScreenMode\", 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 Property(false)\n ], DateTimePicker.prototype, \"enableMask\", void 0);\n __decorate([\n Property({ day: 'day', month: 'month', year: 'year', hour: 'hour', minute: 'minute', second: 'second', dayOfTheWeek: 'day of the week' })\n ], DateTimePicker.prototype, \"maskPlaceholder\", 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 } from '@syncfusion/ej2-base';\nimport { Internationalization, setCulture } from '@syncfusion/ej2-base';\n/**\n * ValueFormatter class to globalize the value.\n *\n * @hidden\n */\nvar ValueFormatter = /** @class */ (function () {\n function ValueFormatter(cultureName) {\n this.intl = new Internationalization();\n if (!isNullOrUndefined(cultureName)) {\n this.intl.culture = cultureName;\n }\n }\n ValueFormatter.prototype.getFormatFunction = function (format) {\n if (format.type) {\n return this.intl.getDateFormat(format);\n }\n else {\n return this.intl.getNumberFormat(format);\n }\n };\n ValueFormatter.prototype.getParserFunction = function (format) {\n if (format.type) {\n return this.intl.getDateParser(format);\n }\n else {\n return this.intl.getNumberParser(format);\n }\n };\n ValueFormatter.prototype.fromView = function (value, format, type) {\n if ((type === 'date' || type === 'datetime' || type === 'number') && (!isNullOrUndefined(format))) {\n return format(value);\n }\n else {\n return value;\n }\n };\n ValueFormatter.prototype.toView = function (value, format) {\n var result = value;\n if (!isNullOrUndefined(format) && !isNullOrUndefined(value)) {\n result = format(value);\n }\n return result;\n };\n ValueFormatter.prototype.setCulture = function (cultureName) {\n if (!isNullOrUndefined(cultureName)) {\n setCulture(cultureName);\n }\n };\n return ValueFormatter;\n}());\nexport { ValueFormatter };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined, getValue, closest } from '@syncfusion/ej2-base';\nimport { attributes } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { appendChildren, addStickyColumnPosition } from '../base/util';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport * as events from '../base/constant';\n/**\n * FilterCellRenderer class which responsible for building filter cell.\n *\n * @hidden\n */\nvar FilterCellRenderer = /** @class */ (function (_super) {\n __extends(FilterCellRenderer, _super);\n function FilterCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', { className: 'e-filterbarcell', attrs: { role: 'columnheader' } });\n return _this;\n }\n /**\n * Function to return the wrapper for the TH content.\n *\n * @returns {string} returns the gui\n */\n FilterCellRenderer.prototype.getGui = function () {\n return this.parent.createElement('div');\n };\n /**\n * Function to render the cell content based on Column object.\n *\n * @param {Cell} cell\n * @param {Object} data\n */\n /* tslint:disable-next-line:max-func-body-length */\n FilterCellRenderer.prototype.render = function (cell, data) {\n var tr = this.parent.element.querySelector('.e-filterbar');\n var node = this.element.cloneNode();\n var innerDIV = this.getGui();\n var input;\n var column = cell.column;\n tr.appendChild(node);\n node.setAttribute('e-mappinguid', column.uid);\n if (column.filterTemplate) {\n var fltrData = {};\n if (data) {\n fltrData[column.field] = data[column.field];\n }\n var col = 'column';\n fltrData[\"\" + col] = column;\n if (column.visible) {\n var isReactCompiler = this.parent.isReact && typeof (column.filterTemplate) !== 'string';\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n var tempID = this.parent.element.id + column.uid + 'filterTemplate';\n if (isReactCompiler || isReactChild) {\n column.getFilterTemplate()(fltrData, this.parent, 'filterTemplate', tempID, null, null, node);\n this.parent.renderTemplates();\n }\n else {\n var element = column.getFilterTemplate()(fltrData, this.parent, 'filterTemplate', tempID);\n appendChildren(node, element);\n }\n }\n else {\n node.classList.add('e-hide');\n }\n }\n else {\n if (column.type !== 'checkbox') {\n if ((isNullOrUndefined(column.allowFiltering) || column.allowFiltering) && !isNullOrUndefined(column.filterBarTemplate)) {\n node.classList.add('e-fltrtemp');\n attributes(innerDIV, {\n 'class': 'e-fltrtempdiv'\n });\n if (isNullOrUndefined(column.filterBarTemplate.create)) {\n input = this.parent.createElement('input', {\n id: column.field + '_filterBarcell', className: 'e-filterUi_input e-filtertext e-fltrTemp',\n attrs: { type: 'search', title: column.headerText }\n });\n innerDIV.appendChild(input);\n }\n else {\n var args = { column: column, node: Element };\n var temp = column.filterBarTemplate.create;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n input = temp(args);\n if (typeof input === 'string') {\n var div = this.parent.createElement('div');\n div.innerHTML = input;\n input = div.firstChild;\n }\n attributes(innerDIV, {\n class: 'e-filterUi_input e-filtertext e-fltrTemp',\n title: column.headerText,\n id: column.field + '_filterBarcell'\n });\n innerDIV.appendChild(input);\n }\n }\n else {\n attributes(innerDIV, {\n 'class': 'e-filterdiv e-fltrinputdiv'\n });\n input = this.parent.createElement('input', {\n id: column.field + '_filterBarcell', className: 'e-filtertext',\n attrs: {\n type: 'search', title: column.headerText + cell.attributes.title,\n value: data[cell.column.field] ? data[cell.column.field] : ''\n }\n });\n innerDIV.appendChild(input);\n var args = {\n element: input, floatLabelType: 'Never',\n properties: {\n enableRtl: this.parent.enableRtl, showClearButton: true, cssClass: this.parent.cssClass\n }\n };\n Input.createInput(args, this.parent.createElement);\n }\n //TODO: apply intial filtering\n if (column.allowFiltering === false || column.field === '' || isNullOrUndefined(column.field)) {\n input.setAttribute('disabled', 'true');\n input.classList.add('e-disable');\n }\n var clearIconElem = innerDIV.querySelector('.e-clear-icon');\n if (clearIconElem) {\n clearIconElem.setAttribute('title', this.parent.localeObj.getConstant('ClearButton'));\n }\n if (!column.visible) {\n node.classList.add('e-hide');\n }\n this.appendHtml(node, innerDIV);\n // render's the dropdownlist component if showFilterBarOperator sets to true\n if (this.parent.filterSettings.showFilterBarOperator && this.parent.filterSettings.type === 'FilterBar' &&\n !this.parent.isPrinting && isNullOrUndefined(column.filterTemplate) && isNullOrUndefined(column.filterBarTemplate)) {\n this.operatorIconRender(innerDIV, column, cell);\n }\n if ((isNullOrUndefined(column.allowFiltering) || column.allowFiltering) && !isNullOrUndefined(column.filterBarTemplate)) {\n var templateWrite = column.filterBarTemplate.write;\n var args = { element: input, column: column };\n if (typeof templateWrite === 'string') {\n templateWrite = getValue(templateWrite, window);\n }\n templateWrite.call(this, args);\n }\n }\n }\n if (this.parent.isFrozenGrid()) {\n addStickyColumnPosition(this.parent, column, node);\n }\n return node;\n };\n /**\n * Function to specifies how the result content to be placed in the cell.\n *\n * @param {Element} node - specifies the node\n * @param {string|Element} innerHtml - specifies the innerHTML\n * @returns {Element} retruns the element\n */\n FilterCellRenderer.prototype.appendHtml = function (node, innerHtml) {\n node.appendChild(innerHtml);\n return node;\n };\n FilterCellRenderer.prototype.operatorIconRender = function (innerDIV, column, cell) {\n var gObj = this.parent;\n var operators;\n var fbicon = this.parent.createElement('input', {\n className: ' e-filterbaroperator e-icons e-icon-filter',\n id: cell.column.uid\n });\n innerDIV.querySelector('span').appendChild(fbicon);\n if (column.filter && column.filter.operator) {\n operators = column.filter.operator;\n }\n else if (gObj.filterSettings.columns.length) {\n for (var i = 0, a = gObj.filterSettings.columns; i < a.length; i++) {\n var col = a[parseInt(i.toString(), 10)];\n if (col.field === column.field) {\n operators = col.operator;\n break;\n }\n else {\n operators = 'equal';\n }\n }\n }\n else {\n operators = 'equal';\n }\n if (!isNullOrUndefined(gObj.filterModule.operators[column.field])) {\n operators = gObj.filterModule.operators[column.field];\n }\n this.dropOptr = new DropDownList({\n fields: { text: 'text', value: 'value' },\n popupHeight: 'auto',\n value: operators,\n width: '0px',\n enabled: column.allowFiltering,\n popupWidth: 'auto',\n enableRtl: this.parent.enableRtl,\n change: this.internalEvent.bind(this),\n beforeOpen: function () {\n var operator = gObj.filterModule.customOperators;\n this.dataSource = operator[gObj.getColumnByUid(this.element.id).type + 'Operator'];\n for (var i = 0; i < this.dataSource.length; i++) {\n if (column.filter && column.filter.operator && isNullOrUndefined(gObj.filterModule.operators[column.field]) &&\n this.dataSource[parseInt(i.toString(), 10)].value === column.filter.operator) {\n this.value = column.filter.operator;\n }\n }\n },\n cssClass: this.parent.cssClass ? 'e-popup-flbar' + ' ' + this.parent.cssClass : 'e-popup-flbar'\n });\n this.dropOptr.appendTo(fbicon);\n var spanElmt = closest(this.dropOptr.element, 'span');\n spanElmt.classList.add('e-filterbardropdown');\n spanElmt.removeAttribute('tabindex');\n };\n FilterCellRenderer.prototype.internalEvent = function (e) {\n var gObj = this.parent;\n var col = gObj.getColumnByUid(e.element.getAttribute('id'));\n e.column = col;\n gObj.filterModule.operators[col.field] = e.value;\n gObj.notify(events.getFilterBarOperator, e);\n };\n return FilterCellRenderer;\n}(CellRenderer));\nexport { FilterCellRenderer };\n","import { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Query, DataManager } from '@syncfusion/ej2-data';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\n/**\n * `filter operators` render boolean column.\n *\n * @hidden\n */\nvar FlMenuOptrUI = /** @class */ (function () {\n function FlMenuOptrUI(parent, customFltrOperators, serviceLocator, filterSettings) {\n this.ddOpen = this.dropDownOpen.bind(this);\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.filterSettings = filterSettings;\n this.customFilterOperators = customFltrOperators;\n if (this.parent) {\n this.parent.on(events.filterMenuClose, this.destroyDropDownList, this);\n this.parent.on(events.destroy, this.destroyDropDownList, this);\n }\n }\n /**\n * @param {Element} dlgConetntEle - specifies the content element\n * @param {Element} target - specifies the target\n * @param {Column} column - specifies the column\n * @param {Dialog} dlgObj - specifies the dialog\n * @param {Object[]} operator - specifies the operator list\n * @returns {void}\n * @hidden\n */\n // eslint-disable-next-line max-len\n FlMenuOptrUI.prototype.renderOperatorUI = function (dlgConetntEle, target, column, dlgObj, operator) {\n this.dialogObj = dlgObj;\n var optr = column.type + 'Operator';\n this.optrData = this.customOptr = !isNullOrUndefined(operator) ? operator :\n (!isNullOrUndefined(this.parent.filterSettings.operators) && !isNullOrUndefined(this.parent.filterSettings.operators[\"\" + optr])) ?\n this.parent.filterSettings.operators[\"\" + optr] : this.customFilterOperators[\"\" + optr];\n var dropDatasource = this.customOptr;\n var selectedValue = this.dropSelectedVal(column, optr);\n var optrDiv = this.parent.createElement('div', { className: 'e-flm_optrdiv' });\n dlgConetntEle.appendChild(optrDiv);\n var optrInput = this.parent.createElement('input', { id: column.uid + '-floptr' });\n optrDiv.appendChild(optrInput);\n this.dropOptr = new DropDownList({\n dataSource: dropDatasource,\n fields: { text: 'text', value: 'value' },\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n enableRtl: this.parent.enableRtl,\n text: selectedValue,\n // eslint-disable-next-line @typescript-eslint/tslint/config\n change: function () {\n var valInput = document.querySelector('.e-flmenu-valuediv').querySelector('input');\n if (this.value === 'isempty' || this.value === 'isnotempty' ||\n this.value === 'isnull' || this.value === 'isnotnull') {\n valInput['ej2_instances'][0]['enabled'] = false;\n }\n else if (!isNullOrUndefined(valInput.getAttribute('disabled'))) {\n valInput['ej2_instances'][0]['enabled'] = true;\n }\n }\n });\n this.dropOptr.addEventListener(literals['open'], this.ddOpen);\n this.dropOptr.appendTo('#' + column.uid + '-floptr');\n };\n FlMenuOptrUI.prototype.renderResponsiveDropDownList = function (args) {\n args.popup.element.style.width = '100%';\n };\n FlMenuOptrUI.prototype.dropDownOpen = function (args) {\n args.popup.element.style.zIndex = (this.dialogObj.zIndex + 1).toString();\n if (this.parent.enableAdaptiveUI) {\n this.renderResponsiveDropDownList(args);\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n FlMenuOptrUI.prototype.dropSelectedVal = function (col, optr) {\n var selValue = '';\n var columns = this.parent.filterSettings.columns;\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var column = columns_1[_i];\n if (col.field === column.field || (col.isForeignColumn() && col.foreignKeyValue === column.field)) {\n var selectedField = new DataManager(this.optrData).executeLocal(new Query().where('value', 'equal', column.operator));\n selValue = !isNullOrUndefined(selectedField[0]) ? selectedField[0].text : '';\n }\n }\n if (selValue === '') { // rewuired or not\n if (col.filter.operator) {\n var optrLen = Object.keys(this.optrData).length;\n for (var i = 0; i < optrLen; i++) {\n if (this.optrData[parseInt(i.toString(), 10)].value === col.filter.operator) {\n selValue = this.optrData[parseInt(i.toString(), 10)].text;\n }\n }\n }\n else {\n selValue = this.optrData[0].text;\n }\n }\n return selValue;\n };\n /**\n * @returns {string} returns the operator\n * @hidden\n */\n FlMenuOptrUI.prototype.getFlOperator = function () {\n return this.dropOptr.value;\n };\n FlMenuOptrUI.prototype.destroyDropDownList = function () {\n if (this.dropOptr.isDestroyed) {\n return;\n }\n this.dropOptr.removeEventListener(literals['open'], this.ddOpen);\n this.dropOptr.destroy();\n this.parent.off(events.filterMenuClose, this.destroyDropDownList);\n this.parent.off(events.destroy, this.destroyDropDownList);\n };\n return FlMenuOptrUI;\n}());\nexport { FlMenuOptrUI };\n","import { AutoComplete } from '@syncfusion/ej2-dropdowns';\nimport { DataManager, Query, Predicate } from '@syncfusion/ej2-data';\nimport { Browser, isNullOrUndefined, extend, getValue } from '@syncfusion/ej2-base';\nimport { getZIndexCalcualtion, eventPromise } from '../base/util';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\n/**\n * `string filterui` render string column.\n *\n * @hidden\n */\nvar StringFilterUI = /** @class */ (function () {\n function StringFilterUI(parent, serviceLocator, filterSettings) {\n this.parent = parent;\n this.serLocator = serviceLocator;\n this.filterSettings = filterSettings;\n if (this.parent) {\n this.parent.on(events.filterMenuClose, this.destroy, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n }\n StringFilterUI.prototype.create = function (args) {\n this.instance = this.parent.createElement('input', { className: 'e-flmenu-input', id: 'strui-' + args.column.uid });\n args.target.appendChild(this.instance);\n this.dialogObj = args.dialogObj;\n this.processDataOperation(args);\n };\n StringFilterUI.prototype.processDataOperation = function (args) {\n var _this = this;\n if (args.column.isForeignColumn()) {\n this.parent.getDataModule().dataManager.executeQuery(this.parent.getDataModule().generateQuery(true))\n .then(function (result) { _this.getAutoCompleteOptions(args, result); });\n return;\n }\n this.getAutoCompleteOptions(args);\n };\n StringFilterUI.prototype.getAutoCompleteOptions = function (args, result) {\n var isForeignColumn = args.column.isForeignColumn();\n var foreignColumnQuery;\n if (isForeignColumn) {\n var filteredData = CheckBoxFilterBase.getDistinct(result.result, args.column.field)\n .records || [];\n var filterQuery = void 0;\n for (var i = 0; i < filteredData.length; i++) {\n if (filterQuery) {\n filterQuery = filterQuery.or(args.column.field, 'contains', filteredData[parseInt(i.toString(), 10)][args.column.field], this.parent\n .filterSettings.enableCaseSensitivity, this.parent.filterSettings.ignoreAccent);\n }\n else {\n filterQuery = new Predicate(args.column.field, 'contains', filteredData[parseInt(i.toString(), 10)][args.column.field], this.parent\n .filterSettings.enableCaseSensitivity, this.parent.filterSettings.ignoreAccent);\n }\n }\n foreignColumnQuery = new Query().where(filterQuery);\n foreignColumnQuery.params = this.parent.query.params;\n }\n var dataSource = isForeignColumn ? args.column.dataSource : this.parent.dataSource;\n var fields = { value: isForeignColumn ? args.column.foreignKeyValue : args.column.field };\n var autoComplete = new AutoComplete(extend({\n dataSource: dataSource instanceof DataManager ? dataSource : new DataManager(dataSource),\n fields: fields,\n locale: this.parent.locale,\n enableRtl: this.parent.enableRtl,\n query: isForeignColumn ? foreignColumnQuery : this.parent.getDataModule().generateQuery(true, true),\n sortOrder: 'Ascending',\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n autofill: true,\n placeholder: args.localizeText.getConstant('EnterValue'),\n actionBegin: function () {\n if (this.query.queries.length && this.query.queries[0].fn === 'onWhere' && this.query.queries[0].e\n && this.query.queries[0].e.predicates) {\n for (var i = 0; i < this.query.queries[0].e.predicates.length; i++) {\n if (this.properties.fields.value === this.query.queries[0].e.predicates[\"\" + i].field) {\n this.query.queries[0].e.predicates.splice(i, 1);\n i = i - 1;\n }\n }\n if (!this.query.queries[0].e.predicates.length) {\n this.query.queries.splice(0, 1);\n }\n }\n }\n }, args.column.filter.params));\n this.acFocus = this.focus(autoComplete, args);\n this.acComplete = this.actionComplete(autoComplete);\n this.acOpen = this.openPopup.bind(this);\n autoComplete.addEventListener(literals.focus, this.acFocus);\n autoComplete.addEventListener(literals['open'], this.acOpen);\n autoComplete.addEventListener(events.actionComplete, this.acComplete);\n if (dataSource && 'result' in dataSource) {\n var query = this.parent.getQuery ? this.parent.getQuery().clone() : new Query();\n var defObj = eventPromise({ requestType: 'stringfilterrequest' }, query);\n this.parent.trigger(events.dataStateChange, defObj.state);\n var def = defObj.deffered;\n def.promise.then(function (e) {\n autoComplete.dataSource = new DataManager(e);\n });\n }\n this.actObj = autoComplete;\n this.actObj.appendTo(this.instance);\n if (isForeignColumn) {\n this.parent.filterModule.filterModule.afterRenderFilterUI();\n }\n };\n StringFilterUI.prototype.write = function (args) {\n if (args.filteredValue !== '' && !isNullOrUndefined(args.filteredValue)) {\n var struiObj = document.querySelector('#strui-' + args.column.uid).ej2_instances[0];\n struiObj.value = args.filteredValue;\n }\n };\n StringFilterUI.prototype.read = function (element, column, filterOptr, filterObj) {\n var actuiObj = document.querySelector('#strui-' + column.uid).ej2_instances[0];\n if (Browser.isDevice) {\n actuiObj.hidePopup();\n actuiObj.focusOut();\n }\n var filterValue = actuiObj.value;\n if (isNullOrUndefined(filterValue) || filterValue === '') {\n filterValue = null;\n }\n filterObj.filterByColumn(column.field, filterOptr, filterValue, 'and', this.parent.filterSettings.enableCaseSensitivity);\n };\n StringFilterUI.prototype.openPopup = function (args) {\n getZIndexCalcualtion(args, this.dialogObj);\n };\n StringFilterUI.prototype.focus = function (actObj, args) {\n return function () {\n actObj.filterType = args.getOptrInstance.getFlOperator();\n };\n };\n StringFilterUI.prototype.actionComplete = function (actObj) {\n return function (e) {\n e.result = e.result.filter(function (obj, index, arr) {\n return arr.map(function (mapObj) {\n return (getValue(actObj.fields.value, mapObj));\n }).indexOf(getValue((actObj.fields.value), obj)) === index;\n });\n };\n };\n StringFilterUI.prototype.destroy = function () {\n if (!this.actObj || this.actObj.isDestroyed) {\n return;\n }\n this.actObj.removeEventListener(literals.focus, this.acFocus);\n this.actObj.removeEventListener(literals['open'], this.acOpen);\n this.actObj.removeEventListener(events.actionComplete, this.acComplete);\n this.actObj.destroy();\n this.parent.off(events.filterMenuClose, this.destroy);\n this.parent.off(events.destroy, this.destroy);\n };\n return StringFilterUI;\n}());\nexport { StringFilterUI };\n","import { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { extend, isUndefined } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\n/**\n * `numberfilterui` render number column.\n *\n * @hidden\n */\nvar NumberFilterUI = /** @class */ (function () {\n function NumberFilterUI(parent, serviceLocator, filterSettings) {\n this.filterSettings = filterSettings;\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n if (this.parent) {\n this.parent.on(events.filterMenuClose, this.destroy, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n }\n NumberFilterUI.prototype.keyEventHandler = function (args) {\n if (args.keyCode === 13 || args.keyCode === 9) {\n var evt = document.createEvent('HTMLEvents');\n evt.initEvent('change', false, true);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.dispatchEvent(evt);\n }\n };\n NumberFilterUI.prototype.create = function (args) {\n this.instance = this.parent.createElement('input', { className: 'e-flmenu-input', id: 'numberui-' + args.column.uid });\n args.target.appendChild(this.instance);\n this.numericTxtObj = new NumericTextBox(extend({\n format: typeof (args.column.format) === 'string' || isUndefined(args.column.format) ? args.column.format :\n args.column.format.format,\n locale: this.parent.locale,\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n placeholder: args.localizeText.getConstant('EnterValue'),\n enableRtl: this.parent.enableRtl\n }, args.column.filter.params));\n this.numericTxtObj.appendTo(this.instance);\n };\n NumberFilterUI.prototype.write = function (args) {\n var numberuiObj = document.querySelector('#numberui-' + args.column.uid).ej2_instances[0];\n numberuiObj.element.addEventListener('keydown', this.keyEventHandler);\n numberuiObj.value = args.filteredValue;\n };\n NumberFilterUI.prototype.read = function (element, column, filterOptr, filterObj) {\n var numberuiObj = document.querySelector('#numberui-' + column.uid).ej2_instances[0];\n var filterValue = numberuiObj.value;\n filterObj.filterByColumn(column.field, filterOptr, filterValue, 'and', true);\n };\n NumberFilterUI.prototype.destroy = function () {\n if (!this.numericTxtObj || this.numericTxtObj.isDestroyed) {\n return;\n }\n this.numericTxtObj.destroy();\n this.parent.off(events.filterMenuClose, this.destroy);\n this.parent.off(events.destroy, this.destroy);\n };\n return NumberFilterUI;\n}());\nexport { NumberFilterUI };\n","import { getZIndexCalcualtion } from '../base/util';\nimport { Query, DataManager, DataUtil } from '@syncfusion/ej2-data';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\n/**\n * `boolfilterui` render boolean column.\n *\n * @hidden\n */\nvar BooleanFilterUI = /** @class */ (function () {\n function BooleanFilterUI(parent, serviceLocator, filterSettings) {\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.filterSettings = filterSettings;\n if (this.parent) {\n this.parent.on(events.filterMenuClose, this.destroy, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n }\n BooleanFilterUI.prototype.create = function (args) {\n var isForeignColumn = args.column.isForeignColumn();\n var dataSource = isForeignColumn ? args.column.dataSource : this.parent.dataSource;\n var fields = isForeignColumn ? args.column.foreignKeyValue : args.column.field;\n this.elem = this.parent.createElement('input', { className: 'e-flmenu-input', id: 'bool-ui-' + args.column.uid });\n args.target.appendChild(this.elem);\n this.dialogObj = args.dialogObj;\n this.dropInstance = new DropDownList(extend({\n dataSource: dataSource instanceof DataManager ?\n dataSource : new DataManager(dataSource),\n query: new Query().select(fields),\n fields: { text: fields, value: fields },\n placeholder: args.localizeText.getConstant('SelectValue'),\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n locale: this.parent.locale,\n enableRtl: this.parent.enableRtl\n }, args.column.filter.params));\n this.ddOpen = this.openPopup.bind(this);\n this.ddComplete = this.actionComplete(fields);\n this.dropInstance.addEventListener(literals['open'], this.ddOpen);\n this.dropInstance.addEventListener(events.actionComplete, this.ddComplete);\n this.dropInstance.appendTo(this.elem);\n };\n BooleanFilterUI.prototype.write = function (args) {\n var drpuiObj = document.querySelector('#bool-ui-' + args.column.uid).ej2_instances[0];\n if (!isNullOrUndefined(args.filteredValue)) {\n drpuiObj.value = args.filteredValue;\n }\n };\n BooleanFilterUI.prototype.read = function (element, column, filterOptr, filterObj) {\n var drpuiObj = document.querySelector('#bool-ui-' + column.uid).ej2_instances[0];\n var filterValue = drpuiObj.value;\n filterObj.filterByColumn(column.field, filterOptr, filterValue, 'and', false);\n };\n BooleanFilterUI.prototype.openPopup = function (args) {\n getZIndexCalcualtion(args, this.dialogObj);\n };\n BooleanFilterUI.prototype.actionComplete = function (fields) {\n return function (e) {\n e.result = DataUtil.distinct(e.result, fields, true);\n };\n };\n BooleanFilterUI.prototype.destroy = function () {\n if (!this.dropInstance || this.dropInstance.isDestroyed) {\n return;\n }\n this.dropInstance.removeEventListener(literals['open'], this.ddOpen);\n this.dropInstance.removeEventListener(events.actionComplete, this.ddComplete);\n this.dropInstance.destroy();\n this.parent.off(events.filterMenuClose, this.destroy);\n this.parent.off(events.destroy, this.destroy);\n };\n return BooleanFilterUI;\n}());\nexport { BooleanFilterUI };\n","import { DatePicker, DateTimePicker } from '@syncfusion/ej2-calendars';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { getCustomDateFormat } from '../base/util';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\n/**\n * `datefilterui` render date column.\n *\n * @hidden\n */\nvar DateFilterUI = /** @class */ (function () {\n function DateFilterUI(parent, serviceLocator, filterSettings) {\n this.dpOpen = this.openPopup.bind(this);\n this.parent = parent;\n this.locator = serviceLocator;\n this.fltrSettings = filterSettings;\n if (this.parent) {\n this.parent.on(events.filterMenuClose, this.destroy, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n }\n DateFilterUI.prototype.create = function (args) {\n var format = getCustomDateFormat(args.column.format, args.column.type);\n this.dialogObj = args.dialogObj;\n this.inputElem = this.parent.createElement('input', { className: 'e-flmenu-input', id: 'dateui-' + args.column.uid });\n args.target.appendChild(this.inputElem);\n if (args.column.type === 'date' || args.column.type === 'dateonly') {\n this.datePickerObj = new DatePicker(extend({\n format: format,\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n placeholder: args.localizeText.getConstant('ChooseDate'),\n width: '100%',\n locale: this.parent.locale,\n enableRtl: this.parent.enableRtl\n }, args.column.filter.params));\n }\n else if (args.column.type === 'datetime') {\n this.datePickerObj = new DateTimePicker(extend({\n format: format,\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n placeholder: args.localizeText.getConstant('ChooseDate'),\n width: '100%',\n locale: this.parent.locale,\n enableRtl: this.parent.enableRtl\n }, args.column.filter.params));\n }\n this.datePickerObj.addEventListener(literals['open'], this.dpOpen);\n this.datePickerObj.appendTo(this.inputElem);\n };\n DateFilterUI.prototype.write = function (args) {\n var dateuiObj = document.querySelector('#dateui-' + args.column.uid).ej2_instances[0];\n dateuiObj.value = !isNullOrUndefined(args.filteredValue) ? new Date(args.filteredValue) : null;\n };\n DateFilterUI.prototype.read = function (element, column, filterOptr, filterObj) {\n var dateuiObj = document.querySelector('#dateui-' + column.uid).ej2_instances[0];\n var filterValue = dateuiObj.value;\n filterValue = isNullOrUndefined(filterValue) ? null : filterValue;\n filterObj.filterByColumn(column.field, filterOptr, filterValue, 'and', true);\n };\n DateFilterUI.prototype.openPopup = function (args) {\n args.popup.element.style.zIndex = (this.dialogObj.zIndex + 1).toString();\n };\n DateFilterUI.prototype.destroy = function () {\n this.parent.off(events.filterMenuClose, this.destroy);\n this.parent.off(events.destroy, this.destroy);\n if (isNullOrUndefined(this.datePickerObj) || this.datePickerObj.isDestroyed) {\n return;\n }\n this.datePickerObj.removeEventListener(literals['open'], this.dpOpen);\n this.datePickerObj.destroy();\n };\n return DateFilterUI;\n}());\nexport { DateFilterUI };\n","import { isNullOrUndefined, getValue, remove } from '@syncfusion/ej2-base';\nimport { Browser } from '@syncfusion/ej2-base';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { FlMenuOptrUI } from './filter-menu-operator';\nimport { StringFilterUI } from './string-filter-ui';\nimport { NumberFilterUI } from './number-filter-ui';\nimport { BooleanFilterUI } from './boolean-filter-ui';\nimport { DateFilterUI } from './date-filter-ui';\nimport { getFilterMenuPostion, parentsUntil, appendChildren, clearReactVueTemplates } from '../base/util';\nimport * as events from '../base/constant';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\n/**\n * `filter menu` render boolean column.\n *\n * @hidden\n */\nvar FilterMenuRenderer = /** @class */ (function () {\n function FilterMenuRenderer(parent, filterSettings, serviceLocator, customFltrOperators, fltrObj) {\n this.isDialogOpen = false;\n this.maxHeight = '350px';\n this.isMenuCheck = false;\n this.colTypes = {\n 'string': StringFilterUI, 'number': NumberFilterUI, 'date': DateFilterUI, 'dateonly': DateFilterUI, 'boolean': BooleanFilterUI, 'datetime': DateFilterUI\n };\n this.parent = parent;\n this.filterSettings = filterSettings;\n this.serviceLocator = serviceLocator;\n this.customFilterOperators = customFltrOperators;\n this.filterObj = fltrObj;\n this.flMuiObj = new FlMenuOptrUI(this.parent, this.customFilterOperators, this.serviceLocator);\n this.l10n = this.serviceLocator.getService('localization');\n this.menuFilterBase = new CheckBoxFilterBase(parent);\n }\n FilterMenuRenderer.prototype.clearCustomFilter = function (col) {\n this.clearBtnClick(col);\n };\n FilterMenuRenderer.prototype.applyCustomFilter = function (args) {\n this.filterBtnClick(args.col);\n };\n FilterMenuRenderer.prototype.openDialog = function (args) {\n this.options = args;\n this.col = this.parent.getColumnByField(args.field);\n if (isNullOrUndefined(this.col.filter) || (isNullOrUndefined(this.col.filter.type) || this.col.filter.type === 'Menu')) { ///\n this.renderDlgContent(args.target, this.col);\n }\n };\n FilterMenuRenderer.prototype.closeDialog = function (target) {\n if (!this.dlgObj) {\n return;\n }\n if (this.parent.isReact || this.parent.isVue) {\n clearReactVueTemplates(this.parent, ['filterTemplate']);\n }\n var elem = document.getElementById(this.dlgObj.element.id);\n if (this.dlgObj && !this.dlgObj.isDestroyed && elem) {\n var argument = { cancel: false, column: this.col, target: target, element: elem };\n this.parent.notify(events.filterMenuClose, argument);\n if (argument.cancel) {\n return;\n }\n this.isDialogOpen = false;\n if (this.isMenuCheck) {\n this.menuFilterBase.unWireEvents();\n this.parent.off(events.cBoxFltrComplete, this.actionComplete);\n this.isMenuCheck = false;\n }\n this.dlgObj.destroy();\n remove(elem);\n }\n this.parent.notify(events.filterDialogClose, {});\n };\n FilterMenuRenderer.prototype.renderDlgContent = function (target, column) {\n var args = {\n requestType: events.filterBeforeOpen,\n columnName: column.field, columnType: column.type\n };\n var filterModel = 'filterModel';\n args[\"\" + filterModel] = this;\n this.parent.trigger(events.actionBegin, args);\n var mainDiv = this.parent.createElement('div', { className: 'e-flmenu-maindiv', id: column.uid + '-flmenu' });\n this.dlgDiv = this.parent.createElement('div', { className: 'e-flmenu', id: column.uid + '-flmdlg' });\n this.dlgDiv.setAttribute('aria-label', this.l10n.getConstant('FilterMenuDialogARIA'));\n if (this.parent.enableAdaptiveUI) {\n var responsiveCnt = document.querySelector('.e-resfilter > .e-dlg-content > .e-mainfilterdiv');\n responsiveCnt.appendChild(this.dlgDiv);\n }\n else {\n this.parent.element.appendChild(this.dlgDiv);\n }\n this.dlgObj = new Dialog({\n showCloseIcon: false,\n closeOnEscape: false,\n locale: this.parent.locale,\n visible: false,\n enableRtl: this.parent.enableRtl,\n created: this.dialogCreated.bind(this, target, column),\n position: this.parent.element.classList.contains('e-device') ? { X: 'center', Y: 'center' } : { X: '', Y: '' },\n target: this.parent.element.classList.contains('e-device') ? document.body : this.parent.element,\n buttons: [{\n click: this.filterBtnClick.bind(this, column),\n buttonModel: {\n content: this.l10n.getConstant('FilterButton'), isPrimary: true,\n cssClass: this.parent.cssClass ? 'e-flmenu-okbtn' + ' ' + this.parent.cssClass : 'e-flmenu-okbtn'\n }\n },\n {\n click: this.clearBtnClick.bind(this, column),\n buttonModel: { content: this.l10n.getConstant('ClearButton'),\n cssClass: this.parent.cssClass ? 'e-flmenu-cancelbtn' + ' ' + this.parent.cssClass : 'e-flmenu-cancelbtn' }\n }],\n content: mainDiv,\n width: (!isNullOrUndefined(parentsUntil(target, 'e-bigger'))) || this.parent.element.classList.contains('e-device') ? 260 : 250,\n animationSettings: { effect: 'None' },\n cssClass: this.parent.cssClass ? 'e-filter-popup' + ' ' + this.parent.cssClass : 'e-filter-popup'\n });\n var isStringTemplate = 'isStringTemplate';\n this.dlgObj[\"\" + isStringTemplate] = true;\n this.renderResponsiveDialog();\n this.dlgObj.appendTo(this.dlgDiv);\n };\n FilterMenuRenderer.prototype.renderResponsiveDialog = function () {\n var gObj = this.parent;\n if (gObj.enableAdaptiveUI) {\n this.dlgObj.position = { X: '', Y: '' };\n this.dlgObj.target = document.querySelector('.e-resfilter > .e-dlg-content > .e-mainfilterdiv');\n this.dlgObj.width = '100%';\n this.dlgObj.isModal = false;\n this.dlgObj.buttons = [{}];\n }\n };\n FilterMenuRenderer.prototype.dialogCreated = function (target, column) {\n if (!Browser.isDevice && target) {\n getFilterMenuPostion(target, this.dlgObj);\n }\n this.currentDialogCreatedColumn = column;\n this.renderFilterUI(target, column);\n if (!(column.isForeignColumn() && !(!isNullOrUndefined(column.filter) && !isNullOrUndefined(column.filter.ui)\n && !isNullOrUndefined(column.filter.ui.create)))) {\n this.afterRenderFilterUI();\n }\n if (!isNullOrUndefined(column.filterTemplate)) {\n this.dlgDiv.querySelector('.e-flmenu-valuediv').firstElementChild.focus();\n this.dlgDiv.querySelector('.e-flmenu-valuediv').firstElementChild.classList.add('e-input-focus');\n }\n else if (!isNullOrUndefined(this.dlgDiv.querySelector('.e-flmenu-input'))) {\n this.dlgDiv.querySelector('.e-flmenu-input').focus();\n this.dlgDiv.querySelector('.e-flmenu-input').parentElement.classList.add('e-input-focus');\n }\n };\n /**\n * Function to notify filterDialogCreated and trigger actionComplete\n *\n * @returns {void}\n * @hidden\n */\n FilterMenuRenderer.prototype.afterRenderFilterUI = function () {\n var column = this.currentDialogCreatedColumn;\n if (column.showColumnMenu) {\n this.parent.notify(events.filterDialogCreated, {});\n }\n if (this.parent.enableAdaptiveUI) {\n this.dlgObj.element.style.left = '0px';\n this.dlgObj.element.style.maxHeight = 'none';\n }\n else {\n this.dlgObj.element.style.maxHeight = this.maxHeight;\n }\n this.dlgObj.show();\n var optrInput = this.dlgObj.element.querySelector('.e-flm_optrdiv').querySelector('input');\n var valInput = this.dlgObj.element.querySelector('.e-flmenu-valuediv').querySelector('input');\n if (optrInput.value === 'Empty' || optrInput.value === 'Not Empty' ||\n optrInput.value === 'Null' || optrInput.value === 'Not Null') {\n valInput['ej2_instances'][0]['enabled'] = false;\n }\n else if (!isNullOrUndefined(valInput && valInput.getAttribute('disabled'))) {\n valInput['ej2_instances'][0]['enabled'] = true;\n }\n if (!column.filterTemplate) {\n this.writeMethod(column, this.dlgObj.element.querySelector('#' + column.uid + '-flmenu'));\n }\n var args = {\n requestType: events.filterAfterOpen,\n columnName: column.field, columnType: column.type\n };\n var filterModel = 'filterModel';\n args[\"\" + filterModel] = this;\n this.isDialogOpen = true;\n if (!this.isMenuCheck) {\n this.parent.trigger(events.actionComplete, args);\n }\n };\n FilterMenuRenderer.prototype.renderFilterUI = function (target, col) {\n var dlgConetntEle = this.dlgObj.element.querySelector('.e-flmenu-maindiv');\n this.parent.log('column_type_missing', { column: col });\n this.renderOperatorUI(dlgConetntEle, target, col);\n this.renderFlValueUI(dlgConetntEle, target, col);\n };\n FilterMenuRenderer.prototype.renderOperatorUI = function (dlgConetntEle, target, column) {\n this.flMuiObj.renderOperatorUI(dlgConetntEle, target, column, this.dlgObj, this.filterObj.menuOperator);\n };\n FilterMenuRenderer.prototype.renderFlValueUI = function (dlgConetntEle, target, column) {\n var valueDiv = this.parent.createElement('div', { className: 'e-flmenu-valuediv' });\n var fObj = this.filterObj;\n dlgConetntEle.appendChild(valueDiv);\n var instanceofFilterUI = new this.colTypes[column.type](this.parent, this.serviceLocator, this.parent.filterSettings);\n if (column.filterTemplate) {\n var fltrData = {};\n var valueInString = 'value';\n fltrData[column.field] = fltrData[\"\" + valueInString] = fObj.values[column.field];\n if (column.foreignKeyValue) {\n fltrData[column.foreignKeyValue] = fObj.values[column.field];\n fltrData[column.field] = undefined;\n }\n var col = 'column';\n fltrData[\"\" + col] = column;\n var isReactCompiler = this.parent.isReact && typeof (column.filterTemplate) !== 'string';\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n var tempID = this.parent.element.id + column.uid + 'filterTemplate';\n if (isReactCompiler || isReactChild) {\n column.getFilterTemplate()(fltrData, this.parent, 'filterTemplate', tempID, null, null, valueDiv);\n this.parent.renderTemplates();\n }\n else {\n var compElement = column.getFilterTemplate()(fltrData, this.parent, 'filterTemplate', tempID);\n appendChildren(valueDiv, compElement);\n }\n if (this.isMenuCheck) {\n this.menuFilterBase.cBox = this.dlgObj.element.querySelector('.e-checkboxlist.e-fields');\n this.menuFilterBase.wireEvents();\n this.parent.on(events.cBoxFltrComplete, this.actionComplete, this);\n this.menuFilterBase.getAllData();\n }\n }\n else {\n if (!isNullOrUndefined(column.filter) && !isNullOrUndefined(column.filter.ui)\n && !isNullOrUndefined(column.filter.ui.create)) {\n var temp = column.filter.ui.create;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n temp({\n column: column, target: valueDiv,\n getOptrInstance: this.flMuiObj, dialogObj: this.dlgObj\n });\n }\n else {\n instanceofFilterUI.create({\n column: column, target: valueDiv,\n getOptrInstance: this.flMuiObj, localizeText: this.l10n, dialogObj: this.dlgObj\n });\n }\n }\n };\n FilterMenuRenderer.prototype.writeMethod = function (col, dlgContentEle) {\n var flValue;\n var target = dlgContentEle.querySelector('.e-flmenu-valinput');\n var instanceofFilterUI = new this.colTypes[col.type](this.parent, this.serviceLocator, this.parent.filterSettings);\n var columns = this.filterSettings.columns;\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var column = columns_1[_i];\n if (col.uid === column.uid) {\n flValue = column.value;\n }\n }\n if (!isNullOrUndefined(col.filter) && !isNullOrUndefined(col.filter.ui)\n && !isNullOrUndefined(col.filter.ui.write)) {\n var temp = col.filter.ui.write;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n temp({ column: col, target: target, parent: this.parent, filteredValue: flValue });\n }\n else {\n instanceofFilterUI.write({ column: col, target: target, parent: this.parent, filteredValue: flValue });\n }\n };\n FilterMenuRenderer.prototype.filterBtnClick = function (col) {\n var flValue;\n var targ = this.dlgObj.element.querySelector('.e-flmenu-valuediv input');\n var flOptrValue = this.flMuiObj.getFlOperator();\n var instanceofFilterUI = new this.colTypes[col.type](this.parent, this.serviceLocator, this.parent.filterSettings);\n if (col.filterTemplate) {\n var element = this.dlgDiv.querySelector('.e-flmenu-valuediv');\n var fltrValue = void 0;\n if (element.children[0].value) {\n fltrValue = element.children[0].value;\n }\n else {\n if (!isNullOrUndefined(element.children[0].ej2_instances)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n fltrValue = (this.parent.isAngular ? element.children[0] :\n element.querySelector('input')).ej2_instances[0].value;\n }\n else {\n var eControl = element.querySelector('.e-control');\n if (!isNullOrUndefined(eControl)) {\n fltrValue = col.type === 'boolean' ? eControl.checked :\n !isNullOrUndefined(eControl.ej2_instances) ?\n eControl.ej2_instances[0].value :\n eControl.value;\n }\n }\n }\n this.filterObj.filterByColumn(col.field, flOptrValue, fltrValue);\n }\n else {\n if (!isNullOrUndefined(col.filter) &&\n !isNullOrUndefined(col.filter.ui) && !isNullOrUndefined(col.filter.ui.read)) {\n var temp = col.filter.ui.read;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n // eslint-disable-next-line\n flValue = temp({ element: targ, column: col, operator: flOptrValue, fltrObj: this.filterObj });\n }\n else {\n instanceofFilterUI.read(targ, col, flOptrValue, this.filterObj);\n }\n }\n this.closeDialog();\n if (this.parent.showColumnMenu) {\n this.parent.notify(events.afterFilterColumnMenuClose, {});\n }\n };\n FilterMenuRenderer.prototype.closeResponsiveDialog = function () {\n this.closeDialog();\n };\n FilterMenuRenderer.prototype.clearBtnClick = function (column) {\n this.filterObj.removeFilteredColsByField(column.field);\n this.closeDialog();\n };\n FilterMenuRenderer.prototype.destroy = function () {\n this.closeDialog();\n };\n /**\n * @returns {FilterUI} returns the filterUI\n * @hidden\n */\n FilterMenuRenderer.prototype.getFilterUIInfo = function () {\n return { field: this.col.field, operator: this.flMuiObj.getFlOperator() };\n };\n FilterMenuRenderer.prototype.renderCheckBoxMenu = function () {\n this.isMenuCheck = true;\n this.menuFilterBase.updateModel(this.options);\n this.menuFilterBase.getAndSetChkElem(this.options);\n this.dlgObj.buttons = [{\n click: this.menuFilterBase.btnClick.bind(this.menuFilterBase),\n buttonModel: {\n content: this.menuFilterBase.getLocalizedLabel('FilterButton'),\n cssClass: 'e-primary', isPrimary: true\n }\n },\n {\n click: this.menuFilterBase.btnClick.bind(this.menuFilterBase),\n buttonModel: { cssClass: 'e-flat', content: this.menuFilterBase.getLocalizedLabel('ClearButton') }\n }];\n this.menuFilterBase.dialogObj = this.dlgObj;\n this.menuFilterBase.dlg = this.dlgObj.element;\n this.menuFilterBase.dlg.classList.add('e-menucheckbox');\n this.menuFilterBase.dlg.classList.remove('e-checkboxfilter');\n this.maxHeight = '800px';\n return this.menuFilterBase.sBox.innerHTML;\n };\n FilterMenuRenderer.prototype.actionComplete = function (args) {\n if (this.isMenuCheck) {\n this.parent.trigger(events.actionComplete, args);\n }\n };\n return FilterMenuRenderer;\n}());\nexport { FilterMenuRenderer };\n","import * as events from '../base/constant';\nimport { isActionPrevent } from '../base/util';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\n/**\n * @hidden\n * `CheckBoxFilter` module is used to handle filtering action.\n */\nvar CheckBoxFilter = /** @class */ (function () {\n /**\n * Constructor for checkbox filtering module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {FilterSettings} filterSettings - specifies the filtersettings\n * @param {ServiceLocator} serviceLocator - specifies the ServiceLocator\n * @hidden\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n function CheckBoxFilter(parent, filterSettings, serviceLocator) {\n this.parent = parent;\n this.isresetFocus = true;\n this.checkBoxBase = new CheckBoxFilterBase(parent);\n this.addEventListener();\n }\n /**\n * To destroy the check box filter.\n *\n * @returns {void}\n * @hidden\n */\n CheckBoxFilter.prototype.destroy = function () {\n this.removeEventListener();\n this.checkBoxBase.closeDialog();\n };\n CheckBoxFilter.prototype.openDialog = function (options) {\n this.checkBoxBase.openDialog(options);\n this.parent.log('column_type_missing', { column: options.column });\n };\n CheckBoxFilter.prototype.closeDialog = function () {\n this.destroy();\n if (this.isresetFocus) {\n this.parent.notify(events.restoreFocus, {});\n }\n };\n CheckBoxFilter.prototype.closeResponsiveDialog = function () {\n this.checkBoxBase.closeDialog();\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} - returns the module name\n * @private\n */\n CheckBoxFilter.prototype.getModuleName = function () {\n return 'checkboxFilter';\n };\n CheckBoxFilter.prototype.actionBegin = function (args) {\n this.parent.trigger(events.actionBegin, args);\n };\n CheckBoxFilter.prototype.actionComplete = function (args) {\n this.parent.trigger(events.actionComplete, args);\n };\n CheckBoxFilter.prototype.actionPrevent = function (args) {\n if (isActionPrevent(this.parent)) {\n this.parent.notify(events.preventBatch, args);\n args.cancel = true;\n }\n };\n CheckBoxFilter.prototype.clearCustomFilter = function (col) {\n this.checkBoxBase.clearFilter(col);\n };\n CheckBoxFilter.prototype.applyCustomFilter = function () {\n this.checkBoxBase.fltrBtnHandler();\n this.checkBoxBase.closeDialog();\n };\n CheckBoxFilter.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.cBoxFltrBegin, this.actionBegin, this);\n this.parent.on(events.cBoxFltrComplete, this.actionComplete, this);\n this.parent.on(events.fltrPrevent, this.actionPrevent, this);\n };\n CheckBoxFilter.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.cBoxFltrBegin, this.actionBegin);\n this.parent.off(events.cBoxFltrComplete, this.actionComplete);\n this.parent.off(events.fltrPrevent, this.actionPrevent);\n };\n return CheckBoxFilter;\n}());\nexport { CheckBoxFilter };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { EventHandler, remove, Browser } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Query, DataManager, Predicate } from '@syncfusion/ej2-data';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { DropDownList, AutoComplete } from '@syncfusion/ej2-dropdowns';\nimport { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { RadioButton, CheckBox } from '@syncfusion/ej2-buttons';\nimport { distinctStringValues, isComplexField, getComplexFieldID, getCustomDateFormat, applyBiggerTheme, performComplexDataOperation, registerEventHandlers, removeEventHandlers, clearReactVueTemplates } from '../base/util';\nimport { DatePicker, DateTimePicker } from '@syncfusion/ej2-calendars';\nimport { parentsUntil, appendChildren, extend, eventPromise } from '../base/util';\nimport * as events from '../base/constant';\nimport { ContextMenu } from '@syncfusion/ej2-navigations';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\nimport * as literals from '../base/string-literals';\n/**\n * @hidden\n * `ExcelFilter` module is used to handle filtering action.\n */\nvar ExcelFilterBase = /** @class */ (function (_super) {\n __extends(ExcelFilterBase, _super);\n /**\n * Constructor for excel filtering module\n *\n * @param {IXLFilter} parent - parent details\n * @param {Object} customFltrOperators - operator details\n * @hidden\n */\n function ExcelFilterBase(parent, customFltrOperators) {\n var _this = _super.call(this, parent) || this;\n _this.childRefs = [];\n _this.eventHandlers = {};\n _this.isDevice = false;\n _this.focusedMenuItem = null;\n _this.customFilterOperators = customFltrOperators;\n _this.isExcel = true;\n return _this;\n }\n ExcelFilterBase.prototype.getCMenuDS = function (type, operator) {\n var options = {\n number: ['Equal', 'NotEqual', '', 'LessThan', 'LessThanOrEqual', 'GreaterThan',\n 'GreaterThanOrEqual', 'Between', '', 'CustomFilter'],\n string: ['Equal', 'NotEqual', '', 'StartsWith', 'EndsWith', '', 'Contains', 'NotContains', '', 'CustomFilter']\n };\n options.date = options.number;\n options.datetime = options.number;\n options.dateonly = options.number;\n var model = [];\n for (var i = 0; i < options[\"\" + type].length; i++) {\n if (options[\"\" + type][parseInt(i.toString(), 10)].length) {\n if (operator) {\n model.push({\n text: this.getLocalizedLabel(options[\"\" + type][parseInt(i.toString(), 10)]) + '...',\n iconCss: 'e-icons e-icon-check ' + (operator === options[\"\" + type][parseInt(i.toString(), 10)].toLowerCase() ? '' : 'e-emptyicon')\n });\n }\n else {\n model.push({\n text: this.getLocalizedLabel(options[\"\" + type][parseInt(i.toString(), 10)]) + '...'\n });\n }\n }\n else {\n model.push({ separator: true });\n }\n }\n return model;\n };\n /**\n * To destroy the filter bar.\n *\n * @returns {void}\n * @hidden\n */\n ExcelFilterBase.prototype.destroy = function () {\n if (this.dlg) {\n this.unwireExEvents();\n _super.prototype.closeDialog.call(this);\n }\n if (!this.isDevice && this.menuObj) {\n var li = this.menuObj.element.querySelector('li.e-focused');\n if (!(li && parentsUntil(li, 'e-excel-menu'))) {\n this.destroyCMenu();\n }\n }\n if (this.dlgObj && !this.dlgObj.isDestroyed) {\n this.removeDialog();\n }\n };\n ExcelFilterBase.prototype.createMenu = function (type, isFiltered, isCheckIcon, eleOptions) {\n var options = { string: 'TextFilter', date: 'DateFilter', dateonly: 'DateFilter', datetime: 'DateTimeFilter', number: 'NumberFilter' };\n this.menu = this.parent.createElement('div', { className: 'e-contextmenu-wrapper' });\n if (this.parent.enableRtl) {\n this.menu.classList.add('e-rtl');\n }\n else {\n this.menu.classList.remove('e-rtl');\n }\n if (this.parent.cssClass) {\n this.menu.classList.add(this.parent.cssClass);\n }\n var ul = this.parent.createElement('ul');\n var icon = isFiltered ? 'e-excl-filter-icon e-filtered' : 'e-excl-filter-icon';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.parent.allowSorting && this.parent.getModuleName() === 'grid'\n && !this.options.isResponsiveFilter) {\n var hdrele = this.parent.getColumnHeaderByUid(eleOptions.uid).getAttribute('aria-sort');\n var colIsSort = this.parent.getColumnByField(eleOptions.field).allowSorting;\n var isAsc = (!colIsSort || hdrele === 'ascending') ? 'e-disabled e-excel-ascending' : 'e-excel-ascending';\n var isDesc = (!colIsSort || hdrele === 'descending') ? 'e-disabled e-excel-descending' : 'e-excel-descending';\n var ascName = (type === 'string') ? this.getLocalizedLabel('SortAtoZ') : (type === 'datetime' || type === 'date') ?\n this.getLocalizedLabel('SortByOldest') : this.getLocalizedLabel('SortSmallestToLargest');\n var descName = (type === 'string') ? this.getLocalizedLabel('SortZtoA') : (type === 'datetime' || type === 'date') ?\n this.getLocalizedLabel('SortByNewest') : this.getLocalizedLabel('SortLargestToSmallest');\n ul.appendChild(this.createMenuElem(ascName, isAsc, 'e-sortascending'));\n ul.appendChild(this.createMenuElem(descName, isDesc, 'e-sortdescending'));\n var separator = this.parent.createElement('li', { className: 'e-separator e-menu-item e-excel-separator' });\n ul.appendChild(separator);\n }\n if (!this.options.isResponsiveFilter) {\n ul.appendChild(this.createMenuElem(this.getLocalizedLabel('ClearFilter'), isFiltered ? '' : 'e-disabled', icon));\n }\n if (type !== 'boolean') {\n ul.appendChild(this.createMenuElem(this.getLocalizedLabel(options[\"\" + type]), 'e-submenu', isCheckIcon && this.ensureTextFilter() ? 'e-icon-check' : icon + ' e-emptyicon', true));\n }\n this.menu.appendChild(ul);\n this.parent.notify(events.beforeFltrcMenuOpen, { element: this.menu });\n this.parent.notify(events.refreshCustomFilterClearBtn, { isFiltered: isFiltered });\n };\n ExcelFilterBase.prototype.createMenuElem = function (val, className, iconName, isSubMenu) {\n var li = this.parent.createElement('li', { className: className + ' e-menu-item' });\n li.innerHTML = val;\n li.tabIndex = li.classList.contains('e-disabled') ? -1 : 0;\n li.insertBefore(this.parent.createElement('span', { className: 'e-menu-icon e-icons ' + iconName, attrs: { 'aria-hidden': 'true' } }), li.firstChild);\n if (isSubMenu) {\n li.appendChild(this.parent.createElement('span', { className: 'e-icons e-caret' }));\n }\n return li;\n };\n ExcelFilterBase.prototype.wireExEvents = function () {\n if (!Browser.isDevice) {\n EventHandler.add(this.dlg, 'mouseover', this.hoverHandler, this);\n }\n EventHandler.add(this.dlg, 'click', this.clickExHandler, this);\n EventHandler.add(this.dlg, 'keyup', this.keyUp, this);\n EventHandler.add(this.dlg, 'keydown', this.keyDown, this);\n };\n ExcelFilterBase.prototype.unwireExEvents = function () {\n if (!Browser.isDevice) {\n EventHandler.remove(this.dlg, 'mouseover', this.hoverHandler);\n }\n EventHandler.remove(this.dlg, 'click', this.clickExHandler);\n EventHandler.remove(this.dlg, 'keyup', this.keyUp);\n EventHandler.remove(this.dlg, 'keydown', this.keyDown);\n };\n ExcelFilterBase.prototype.clickExHandler = function (e) {\n var options = { string: 'TextFilter', date: 'DateFilter', datetime: 'DateTimeFilter', number: 'NumberFilter' };\n var menuItem = parentsUntil(e.target, 'e-menu-item');\n if (menuItem) {\n if (this.getLocalizedLabel('ClearFilter') === menuItem.innerText.trim()) {\n this.clearFilter();\n this.closeDialog();\n }\n else if ((this.options.isResponsiveFilter || Browser.isDevice)\n && this.getLocalizedLabel(options[this.options.type]) === menuItem.innerText.trim()) {\n this.hoverHandler(e);\n }\n }\n };\n ExcelFilterBase.prototype.focusNextOrPrevElement = function (e, focusableElements, focusClassName) {\n var nextIndex = (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) ? focusableElements.indexOf(document.activeElement) - 1\n : focusableElements.indexOf(document.activeElement) + 1;\n var nextElement = focusableElements[((nextIndex + focusableElements.length) % focusableElements.length)];\n // Set focus on the next / previous element\n if (nextElement) {\n nextElement.focus();\n var focusClass = nextElement.classList.contains('e-chk-hidden') ? 'e-chkfocus' : focusClassName;\n var target = nextElement.classList.contains('e-chk-hidden') ? parentsUntil(nextElement, 'e-ftrchk') : parentsUntil(nextElement, 'e-menu-item');\n this.excelSetFocus(target, focusClass);\n }\n };\n ExcelFilterBase.prototype.keyUp = function (e) {\n if ((e.key === 'Tab' && e.shiftKey) || e.key === 'Tab') {\n var focusClass = e.target.classList.contains('e-chk-hidden') ? 'e-chkfocus' : 'e-menufocus';\n var target = e.target.classList.contains('e-menu-item')\n ? parentsUntil(e.target, 'e-menu-item') : parentsUntil(e.target, 'e-ftrchk');\n this.excelSetFocus(target, focusClass);\n }\n else if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !e.altKey) {\n e.preventDefault();\n var focusableElements = Array.from(this.dlg.querySelectorAll('input, button, [tabindex]:not([tabindex=\"-1\"]), .e-menu-item:not(.e-disabled):not(.e-separator)'));\n this.focusNextOrPrevElement(e, focusableElements, 'e-menufocus');\n }\n else if ((e.key === 'Enter' || e.code === 'ArrowRight') && e.target.classList.contains('e-menu-item')) {\n e.preventDefault();\n e.target.click();\n if (e.target.classList.contains('e-submenu')) {\n this.hoverHandler(e);\n this.menuObj.element.querySelector('.e-menu-item').focus();\n this.excelSetFocus(parentsUntil(this.menuObj.element.querySelector('.e-menu-item'), 'e-menu-item'), 'e-focused');\n this.focusedMenuItem = this.menuObj.element.querySelector('.e-menu-item');\n }\n }\n };\n ExcelFilterBase.prototype.keyDown = function (e) {\n //prevented up and down arrow key press default functionality to prevent the browser scroll when performing keyboard navigation in excel filter element.\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n }\n };\n ExcelFilterBase.prototype.excelSetFocus = function (elem, className) {\n var prevElem = document.querySelector('.' + className);\n if (prevElem) {\n prevElem.classList.remove(className);\n }\n if (elem) {\n elem.classList.add(className);\n }\n };\n ExcelFilterBase.prototype.destroyCMenu = function () {\n this.isCMenuOpen = false;\n if (this.menuObj && !this.menuObj.isDestroyed) {\n this.menuObj.destroy();\n EventHandler.remove(this.menuObj.element, 'keydown', this.contextKeyDownHandler);\n remove(this.cmenu);\n this.parent.notify(events.renderResponsiveCmenu, { target: null, header: '', isOpen: false, col: this.options.column });\n }\n };\n ExcelFilterBase.prototype.hoverHandler = function (e) {\n if (this.options.isResponsiveFilter && e.type === 'mouseover') {\n return;\n }\n var target = e.target.querySelector('.e-contextmenu');\n var li = parentsUntil(e.target, 'e-menu-item');\n var focused = this.menu.querySelector('.e-focused');\n var isSubMenu;\n if (focused) {\n focused.classList.remove('e-focused');\n }\n if (li) {\n li.classList.add('e-focused');\n isSubMenu = li.classList.contains('e-submenu');\n }\n if (target) {\n return;\n }\n if (!isSubMenu) {\n var submenu = this.menu.querySelector('.e-submenu');\n if (!isNullOrUndefined(submenu)) {\n submenu.classList.remove('e-selected');\n }\n this.destroyCMenu();\n }\n var selectedMenu = this.ensureTextFilter();\n if (!this.isCMenuOpen && isSubMenu) {\n li.classList.add('e-selected');\n this.isCMenuOpen = true;\n var menuOptions = {\n items: this.getCMenuDS(this.options.type, selectedMenu ? selectedMenu.replace(/\\s/g, '') : undefined),\n select: this.selectHandler.bind(this),\n onClose: this.destroyCMenu.bind(this),\n enableRtl: this.parent.enableRtl,\n animationSettings: { effect: 'None' },\n beforeClose: this.preventClose.bind(this),\n cssClass: this.options.isResponsiveFilter && this.parent.cssClass ?\n 'e-res-contextmenu-wrapper' + ' ' + this.parent.cssClass : this.options.isResponsiveFilter ?\n 'e-res-contextmenu-wrapper' : this.parent.cssClass ? this.parent.cssClass : ''\n };\n this.parent.element.appendChild(this.cmenu);\n this.menuObj = new ContextMenu(menuOptions, this.cmenu);\n EventHandler.add(this.menuObj.element, 'keydown', this.contextKeyDownHandler, this);\n var client = this.menu.querySelector('.e-submenu').getBoundingClientRect();\n var pos = { top: 0, left: 0 };\n if (this.options.isResponsiveFilter) {\n var options = { string: 'TextFilter', date: 'DateFilter', datetime: 'DateTimeFilter', number: 'NumberFilter' };\n var content = document.querySelector('.e-responsive-dialog > .e-dlg-header-content');\n var height = content.offsetHeight + 4;\n this.menuObj.element.style.height = 'calc(100% - ' + height + 'px)';\n this.menuObj['open'](height, 0, document.body);\n var header = this.getLocalizedLabel(options[this.options.type]);\n this.parent.notify(events.renderResponsiveCmenu, {\n target: this.menuObj.element.parentElement, header: header, isOpen: true\n });\n }\n else {\n if (Browser.isDevice) {\n this.isDevice = true;\n var contextRect = this.getContextBounds();\n pos.top = (window.innerHeight - contextRect.height) / 2;\n pos.left = (window.innerWidth - contextRect.width) / 2;\n this.closeDialog();\n this.isDevice = false;\n }\n else {\n pos.top = Browser.isIE ? window.pageYOffset + client.top : window.scrollY + client.top;\n pos.left = this.getCMenuYPosition(this.dlg);\n }\n this.menuObj['open'](pos.top, pos.left, e.target);\n }\n applyBiggerTheme(this.parent.element, this.menuObj.element.parentElement);\n }\n };\n ExcelFilterBase.prototype.contextKeyDownHandler = function (e) {\n if ((e.key === 'Tab' && e.shiftKey) || e.key === 'Tab') {\n e.preventDefault();\n var focusableElements = Array.from(this.menuObj.element.querySelectorAll('[tabindex]:not([tabindex=\"-1\"]), .e-menu-item:not(.e-disabled):not(.e-separator)'));\n // Focus the next / previous context menu item\n this.focusNextOrPrevElement(e, focusableElements, 'e-focused');\n }\n else if (e.key === 'ArrowLeft' || e.key === 'Escape') {\n e.preventDefault();\n this.menuObj.close();\n this.focusedMenuItem = null;\n document.querySelector('.e-submenu.e-menu-item').classList.remove('e-selected');\n document.querySelector('.e-submenu.e-menu-item').focus();\n }\n };\n ExcelFilterBase.prototype.ensureTextFilter = function () {\n var selectedMenu;\n var predicates = this.existingPredicate[this.options.field];\n if (predicates && predicates.length === 2) {\n if (predicates[0].operator === 'greaterthanorequal' && predicates[1].operator === 'lessthanorequal') {\n selectedMenu = 'between';\n }\n else {\n selectedMenu = 'customfilter';\n }\n }\n else {\n if (predicates && predicates.length === 1) {\n this.optrData = this.customFilterOperators[this.options.type + 'Operator'];\n selectedMenu = predicates[0].operator;\n }\n }\n return selectedMenu;\n };\n ExcelFilterBase.prototype.preventClose = function (args) {\n if (this.options && this.options.isResponsiveFilter && args.event) {\n var target = args.event.target;\n var isFilterBack = target.classList.contains('e-resfilterback')\n || target.classList.contains('e-res-back-btn') || target.classList.contains('e-menu-item');\n args.cancel = !isFilterBack;\n }\n else {\n if (args.event instanceof MouseEvent && args.event.target.classList.contains('e-submenu')) {\n args.cancel = true;\n }\n }\n };\n ExcelFilterBase.prototype.getContextBounds = function () {\n this.menuObj.element.style.display = 'block';\n return this.menuObj.element.getBoundingClientRect();\n };\n ExcelFilterBase.prototype.getCMenuYPosition = function (target) {\n var contextWidth = this.getContextBounds().width;\n var targetPosition = target.getBoundingClientRect();\n var leftPos = targetPosition.right + contextWidth - this.parent.element.clientWidth;\n var targetBorder = target.offsetWidth - target.clientWidth;\n targetBorder = targetBorder ? targetBorder + 1 : 0;\n return (leftPos < 1) ? (targetPosition.right + 1 - targetBorder) : (targetPosition.left - contextWidth - 1 + targetBorder);\n };\n ExcelFilterBase.prototype.openDialog = function (options) {\n var _this = this;\n this.updateModel(options);\n this.getAndSetChkElem(options);\n this.showDialog(options);\n if (options.cancel) {\n return;\n }\n this.dialogObj.dataBind();\n var filterLength = (this.existingPredicate[options.field] && this.existingPredicate[options.field].length) ||\n this.options.filteredColumns.filter(function (col) {\n return _this.options.field === col.field;\n }).length;\n this.createMenu(options.type, filterLength > 0, (filterLength === 1 || filterLength === 2), options);\n this.dlg.insertBefore(this.menu, this.dlg.firstChild);\n this.dlg.classList.add('e-excelfilter');\n if (this.parent.enableRtl) {\n this.dlg.classList.add('e-rtl');\n }\n this.dlg.classList.remove('e-checkboxfilter');\n this.cmenu = this.parent.createElement('ul', { className: 'e-excel-menu' });\n if (options.column.showColumnMenu) {\n this.parent.notify(events.filterDialogCreated, {});\n }\n this.wireExEvents();\n };\n ExcelFilterBase.prototype.closeDialog = function () {\n this.destroy();\n };\n ExcelFilterBase.prototype.selectHandler = function (e) {\n if (e.item) {\n this.parent.notify(events.filterCmenuSelect, {});\n this.menuItem = e.item;\n this.closeDialog();\n this.renderDialogue(e);\n }\n };\n /**\n * @hidden\n * @param {MenuEventArgs} e - event args\n * @returns {void}\n */\n ExcelFilterBase.prototype.renderDialogue = function (e) {\n var _this = this;\n var target = e ? e.element : undefined;\n var column = this.options.field;\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var mainDiv = this.parent.createElement('div', {\n className: 'e-xlfl-maindiv',\n id: isComplex ? complexFieldName + '-xlflmenu' : column + '-xlflmenu'\n });\n this.dlgDiv = this.parent.createElement('div', {\n className: 'e-xlflmenu',\n id: isComplex ? complexFieldName + '-xlfldlg' : column + '-xlfldlg'\n });\n if (this.options.isResponsiveFilter) {\n var responsiveCnt = document.querySelector('.e-resfilter > .e-dlg-content > .e-xl-customfilterdiv');\n responsiveCnt.appendChild(this.dlgDiv);\n }\n else {\n this.parent.element.appendChild(this.dlgDiv);\n }\n this.dlgObj = new Dialog({\n header: this.getLocalizedLabel('CustomFilter'),\n isModal: true,\n overlayClick: this.removeDialog.bind(this),\n showCloseIcon: true,\n locale: this.parent.locale,\n closeOnEscape: true,\n target: document.body,\n // target: this.parent.element,\n visible: false,\n enableRtl: this.parent.enableRtl,\n open: function () {\n var rows = [].slice.call(_this.dlgObj.element.querySelectorAll('table.e-xlfl-table tr.e-xlfl-fields'));\n for (var i = 0; i < rows.length; i++) {\n var valInput = rows[i].children[1].querySelector('.e-control');\n var dropDownList = rows[i]\n .querySelector('.e-dropdownlist.e-control')['ej2_instances'][0];\n if (dropDownList.value === 'isempty' || dropDownList.value === 'isnotempty' ||\n dropDownList.value === 'isnull' || dropDownList.value === 'isnotnull') {\n valInput['ej2_instances'][0]['enabled'] = false;\n }\n else if (valInput && !isNullOrUndefined(valInput.getAttribute('disabled'))) {\n valInput['ej2_instances'][0]['enabled'] = true;\n }\n }\n var row = _this.dlgObj.element.querySelector('table.e-xlfl-table>tr');\n if (_this.options.column.filterTemplate) {\n var templateField_1 = isComplexField(_this.options.column.field) ?\n getComplexFieldID(_this.options.column.field) : _this.options.column.field;\n var isReactCompiler = _this.parent.isReact && typeof (_this.options.column.filterTemplate) !== 'string';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var isReactChild = _this.parent.parentDetails && _this.parent.parentDetails.parentInstObj &&\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _this.parent.parentDetails.parentInstObj.isReact;\n if (isReactCompiler || isReactChild) {\n _this.parent.renderTemplates(function () {\n row.querySelector('#' + templateField_1 + '-xlfl-frstvalue').focus();\n });\n }\n else {\n row.querySelector('#' + templateField_1 + '-xlfl-frstvalue').focus();\n }\n }\n else {\n //(row.cells[1].querySelector('input:not([type=hidden])') as HTMLElement).focus();\n }\n },\n close: this.removeDialog.bind(this),\n created: this.createdDialog.bind(this, target, column),\n buttons: [{\n click: this.filterBtnClick.bind(this, column),\n buttonModel: {\n content: this.getLocalizedLabel('OKButton'), isPrimary: true,\n cssClass: this.parent.cssClass ? 'e-xlfl-okbtn' + ' ' + this.parent.cssClass : 'e-xlfl-okbtn'\n }\n },\n {\n click: this.removeDialog.bind(this),\n buttonModel: { content: this.getLocalizedLabel('CancelButton'),\n cssClass: this.parent.cssClass ? 'e-xlfl-cancelbtn' + ' ' + this.parent.cssClass : 'e-xlfl-cancelbtn' }\n }],\n content: mainDiv,\n width: 430,\n animationSettings: { effect: 'None' },\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n var isStringTemplate = 'isStringTemplate';\n this.dlgObj[\"\" + isStringTemplate] = true;\n this.renderResponsiveDialog();\n this.dlgDiv.setAttribute('aria-label', this.getLocalizedLabel('CustomFilterDialogARIA'));\n this.childRefs.push(this.dlgObj);\n this.dlgObj.appendTo(this.dlgDiv);\n };\n ExcelFilterBase.prototype.renderResponsiveDialog = function () {\n if (this.options.isResponsiveFilter) {\n var rowResponsiveDlg = document.querySelector('.e-row-responsive-filter');\n if (rowResponsiveDlg) {\n rowResponsiveDlg.classList.remove('e-row-responsive-filter');\n }\n this.dlgObj.buttons = [{}];\n this.dlgObj.header = undefined;\n this.dlgObj.position = { X: '', Y: '' };\n this.dlgObj.target = document.querySelector('.e-resfilter > .e-dlg-content > .e-xl-customfilterdiv');\n this.dlgObj.width = '100%';\n this.dlgObj.isModal = false;\n this.dlgObj.showCloseIcon = false;\n }\n };\n /**\n * @hidden\n * @returns {void}\n */\n ExcelFilterBase.prototype.removeDialog = function () {\n this.parent.notify(events.customFilterClose, {});\n if ((this.parent.isReact || this.parent.isVue) && this.parent.destroyTemplate !== undefined) {\n clearReactVueTemplates(this.parent, ['filterTemplate']);\n }\n this.removeObjects(this.childRefs);\n remove(this.dlgDiv);\n this.parent.notify(events.filterDialogClose, {});\n };\n ExcelFilterBase.prototype.createdDialog = function (target, column) {\n this.renderCustomFilter(target, column);\n this.dlgObj.element.style.left = '0px';\n if (!this.options.isResponsiveFilter) {\n this.dlgObj.element.style.top = '0px';\n }\n else {\n var content = document.querySelector('.e-responsive-dialog > .e-dlg-header-content');\n var height = content.offsetHeight + 4;\n this.dlgObj.element.style.top = height + 'px';\n }\n if (!this.options.isResponsiveFilter && Browser.isDevice && window.innerWidth < 440) {\n this.dlgObj.element.style.width = '90%';\n }\n this.parent.notify(events.beforeCustomFilterOpen, { column: column, dialog: this.dialogObj });\n this.dlgObj.show();\n applyBiggerTheme(this.parent.element, this.dlgObj.element.parentElement);\n };\n ExcelFilterBase.prototype.renderCustomFilter = function (target, column) {\n var dlgConetntEle = this.dlgObj.element.querySelector('.e-xlfl-maindiv');\n var dlgFields = this.parent.createElement('div', { innerHTML: this.getLocalizedLabel('ShowRowsWhere'), className: 'e-xlfl-dlgfields' });\n dlgConetntEle.appendChild(dlgFields);\n //column name\n var fieldSet = this.parent.createElement('div', { innerHTML: this.options.displayName, className: 'e-xlfl-fieldset' });\n dlgConetntEle.appendChild(fieldSet);\n this.renderFilterUI(column, dlgConetntEle);\n };\n /**\n * @hidden\n * @param {string} col - Defines column details\n * @returns {void}\n */\n ExcelFilterBase.prototype.filterBtnClick = function (col) {\n var isComplex = !isNullOrUndefined(col) && isComplexField(col);\n var complexFieldName = !isNullOrUndefined(col) && getComplexFieldID(col);\n var colValue = isComplex ? complexFieldName : col;\n var fValue = this.dlgDiv.querySelector('#' + colValue + '-xlfl-frstvalue').ej2_instances[0];\n var fOperator = this.dlgDiv.querySelector('#' + colValue + '-xlfl-frstoptr').ej2_instances[0];\n var sValue = this.dlgDiv.querySelector('#' + colValue + '-xlfl-secndvalue').ej2_instances[0];\n var sOperator = this.dlgDiv.querySelector('#' + colValue + '-xlfl-secndoptr').ej2_instances[0];\n var checkBoxValue;\n if (this.options.type === 'string') {\n var checkBox = this.dlgDiv.querySelector('#' + colValue + '-xlflmtcase').ej2_instances[0];\n checkBoxValue = checkBox.checked;\n }\n var andRadio = this.dlgDiv.querySelector('#' + colValue + 'e-xlfl-frstpredicate').ej2_instances[0];\n var predicate = (andRadio.checked ? 'and' : 'or');\n if (sValue.value === null) {\n predicate = 'or';\n }\n this.filterByColumn(this.options.field, fOperator.value, fValue.value, predicate, checkBoxValue, this.options.ignoreAccent, sOperator.value, sValue.value);\n this.removeDialog();\n };\n /**\n * @hidden\n * Filters grid row by column name with given options.\n *\n * @param {string} fieldName - Defines the field name of the filter column.\n * @param {string} firstOperator - Defines the first operator by how to filter records.\n * @param {string | number | Date | boolean} firstValue - Defines the first value which is used to filter records.\n * @param {string} predicate - Defines the relationship between one filter query with another by using AND or OR predicate.\n * @param {boolean} matchCase - If ignore case set to true, then filter records with exact match or else\n * filter records with case insensitive(uppercase and lowercase letters treated as same).\n * @param {boolean} ignoreAccent - If ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.\n * @param {string} secondOperator - Defines the second operator by how to filter records.\n * @param {string | number | Date | boolean} secondValue - Defines the first value which is used to filter records.\n * @returns {void}\n */\n ExcelFilterBase.prototype.filterByColumn = function (fieldName, firstOperator, firstValue, predicate, matchCase, ignoreAccent, secondOperator, secondValue) {\n var col = this.parent.getColumnByField ? this.parent.getColumnByField(fieldName) : this.options.column;\n var field = this.isForeignColumn(col) ? col.foreignKeyValue : fieldName;\n var fColl = [];\n var mPredicate;\n var arg = {\n instance: this, handler: this.filterByColumn, arg1: fieldName, arg2: firstOperator, arg3: firstValue, arg4: predicate,\n arg5: matchCase, arg6: ignoreAccent, arg7: secondOperator, arg8: secondValue, cancel: false\n };\n this.parent.notify(events.fltrPrevent, arg);\n if (arg.cancel) {\n return;\n }\n fColl.push({\n field: field,\n predicate: predicate,\n matchCase: matchCase,\n ignoreAccent: ignoreAccent,\n operator: firstOperator,\n value: arg.arg3,\n type: this.options.type\n });\n mPredicate = new Predicate(field, firstOperator.toLowerCase(), arg.arg3, !matchCase, ignoreAccent);\n if (!isNullOrUndefined(secondValue) && !isNullOrUndefined(secondOperator)) {\n fColl.push({\n field: field,\n predicate: predicate,\n matchCase: matchCase,\n ignoreAccent: ignoreAccent,\n operator: secondOperator,\n value: arg.arg8,\n type: this.options.type\n });\n mPredicate = mPredicate[\"\" + predicate](field, secondOperator.toLowerCase(), secondValue, !matchCase, ignoreAccent);\n }\n var args = {\n action: 'filtering', filterCollection: fColl, field: this.options.field,\n ejpredicate: mPredicate, actualPredicate: fColl\n };\n if (this.isForeignColumn(col)) {\n this.foreignKeyFilter(args, fColl, mPredicate);\n }\n else {\n this.options.handler(args);\n }\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderOperatorUI = function (column, table, elementID, predicates, isFirst) {\n var fieldElement = this.parent.createElement('tr', { className: 'e-xlfl-fields', attrs: { role: 'row' } });\n table.appendChild(fieldElement);\n var xlfloptr = this.parent.createElement('td', { className: 'e-xlfl-optr' });\n fieldElement.appendChild(xlfloptr);\n var optrDiv = this.parent.createElement('div', { className: 'e-xlfl-optrdiv' });\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var optrInput = this.parent\n .createElement('input', { id: isComplex ? complexFieldName + elementID : column + elementID });\n optrDiv.appendChild(optrInput);\n xlfloptr.appendChild(optrDiv);\n var optr = this.options.type + 'Operator';\n var dropDatasource = this.customFilterOperators[\"\" + optr];\n this.optrData = dropDatasource;\n var selectedValue = this.dropSelectedVal(this.options.column, predicates, isFirst);\n //Trailing three dots are sliced.\n var menuText = '';\n if (this.menuItem) {\n menuText = this.menuItem.text.slice(0, -3);\n if (menuText !== this.getLocalizedLabel('CustomFilter')) {\n selectedValue = isFirst ? menuText : undefined;\n }\n if (menuText === this.getLocalizedLabel('Between')) {\n selectedValue = this.getLocalizedLabel(isFirst ? 'GreaterThanOrEqual' : 'LessThanOrEqual');\n }\n }\n var col = this.options.column;\n var dropOptr = new DropDownList(extend({\n dataSource: dropDatasource,\n fields: { text: 'text', value: 'value' },\n text: selectedValue,\n enableRtl: this.parent.enableRtl,\n cssClass: this.parent.cssClass ? this.parent.cssClass : null\n }, col.filter.params));\n this.childRefs.push(dropOptr);\n var evt = { 'open': this.dropDownOpen.bind(this), 'change': this.dropDownValueChange.bind(this) };\n registerEventHandlers(optrInput.id, [literals.open, literals.change], evt, this);\n dropOptr.addEventListener(literals['open'], this.eventHandlers[optrInput.id][literals.open]);\n dropOptr.addEventListener(literals.change, this.eventHandlers[optrInput.id][literals.change]);\n dropOptr.appendTo(optrInput);\n var operator = this.getSelectedValue(selectedValue);\n return { fieldElement: fieldElement, operator: operator };\n };\n ExcelFilterBase.prototype.removeHandlersFromComponent = function (component) {\n if (component.element.classList.contains('e-dropdownlist')) {\n removeEventHandlers(component, [literals.open, literals.change], this);\n }\n else if (component.element.classList.contains('e-autocomplete')) {\n removeEventHandlers(component, [events.actionComplete, literals.focus], this);\n }\n };\n ExcelFilterBase.prototype.dropDownOpen = function (args) {\n args.popup.element.style.zIndex = (this.dialogObj.zIndex + 1).toString();\n };\n ExcelFilterBase.prototype.dropDownValueChange = function (args) {\n if (args.element.id.includes('-xlfl-frstoptr')) {\n this.firstOperator = args.value.toString();\n }\n else {\n this.secondOperator = args.value.toString();\n }\n var valInput = args.element.closest('.e-xlfl-fields').children[1].querySelector('.e-control');\n var dropDownList = args.element['ej2_instances'][0];\n if (dropDownList.value === 'isempty' || dropDownList.value === 'isnotempty' ||\n dropDownList.value === 'isnull' || dropDownList.value === 'isnotnull') {\n valInput['ej2_instances'][0]['enabled'] = false;\n }\n else if (!isNullOrUndefined(valInput.getAttribute('disabled'))) {\n valInput['ej2_instances'][0]['enabled'] = true;\n }\n };\n /**\n * @hidden\n * @returns {FilterUI} returns filter UI\n */\n ExcelFilterBase.prototype.getFilterUIInfo = function () {\n return { firstOperator: this.firstOperator, secondOperator: this.secondOperator, field: this.options.field };\n };\n ExcelFilterBase.prototype.getSelectedValue = function (text) {\n var selectedField = new DataManager(this.optrData).executeLocal(new Query().where('text', 'equal', text));\n return !isNullOrUndefined(selectedField[0]) ? selectedField[0].value : '';\n };\n ExcelFilterBase.prototype.dropSelectedVal = function (col, predicates, isFirst) {\n var operator;\n if (predicates && predicates.length > 0) {\n operator = predicates.length === 2 ?\n (isFirst ? predicates[0].operator : predicates[1].operator) :\n (isFirst ? predicates[0].operator : undefined);\n }\n else if (isFirst && col.type === 'string' && !col.filter.operator) {\n operator = 'startswith';\n }\n else {\n operator = isFirst ? col.filter.operator || 'equal' : undefined;\n }\n return this.getSelectedText(operator);\n };\n ExcelFilterBase.prototype.getSelectedText = function (operator) {\n var selectedField = new DataManager(this.optrData).executeLocal(new Query().where('value', 'equal', operator));\n return !isNullOrUndefined(selectedField[0]) ? selectedField[0].text : '';\n };\n ExcelFilterBase.prototype.renderFilterUI = function (column, dlgConetntEle) {\n var predicates = this.existingPredicate[\"\" + column];\n var table = this.parent.createElement('table', { className: 'e-xlfl-table', attrs: { role: 'grid' } });\n dlgConetntEle.appendChild(table);\n var colGroup = this.parent.createElement(literals.colGroup);\n colGroup.innerHTML = '';\n table.appendChild(colGroup);\n //Renders first dropdown\n var optr = this.renderOperatorUI(column, table, '-xlfl-frstoptr', predicates, true);\n this.firstOperator = optr.operator;\n //Renders first value\n this.renderFlValueUI(column, optr, '-xlfl-frstvalue', predicates, true);\n var predicate = this.parent.createElement('tr', { className: 'e-xlfl-predicate', attrs: { role: 'row' } });\n table.appendChild(predicate);\n //Renders first radion button\n this.renderRadioButton(column, predicate, predicates);\n //Renders second dropdown\n optr = this.renderOperatorUI(column, table, '-xlfl-secndoptr', predicates, false);\n this.secondOperator = optr.operator;\n //Renders second text box\n this.renderFlValueUI(column, optr, '-xlfl-secndvalue', predicates, false);\n };\n ExcelFilterBase.prototype.renderRadioButton = function (column, tr, predicates) {\n var td = this.parent.createElement('td', { className: 'e-xlfl-radio', attrs: { 'colSpan': '2' } });\n tr.appendChild(td);\n var radioDiv = this.parent\n .createElement('div', { className: 'e-xlfl-radiodiv', attrs: { 'style': 'display: inline-block' } });\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var frstpredicate = this.parent.createElement('input', { id: isComplex ? complexFieldName + 'e-xlfl-frstpredicate' : column + 'e-xlfl-frstpredicate', attrs: { 'type': 'radio' } });\n var secndpredicate = this.parent.createElement('input', { id: isComplex ? complexFieldName + 'e-xlfl-secndpredicate' : column + 'e-xlfl-secndpredicate', attrs: { 'type': 'radio' } });\n //appends into div\n radioDiv.appendChild(frstpredicate);\n radioDiv.appendChild(secndpredicate);\n td.appendChild(radioDiv);\n if (this.options.type === 'string') {\n this.renderMatchCase(column, tr, td, '-xlflmtcase', predicates);\n }\n // Initialize AND RadioButton component.\n var andRadio = new RadioButton({\n label: this.getLocalizedLabel('AND'),\n name: 'default', checked: true,\n enableRtl: this.parent.enableRtl,\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n this.childRefs.push(andRadio);\n // Initialize OR RadioButton component.\n var orRadio = new RadioButton({\n label: this.getLocalizedLabel('OR'),\n name: 'default',\n enableRtl: this.parent.enableRtl,\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n this.childRefs.push(orRadio);\n var flValue = predicates && predicates.length === 2 ? predicates[1].predicate : 'and';\n if (flValue === 'and') {\n andRadio.checked = true;\n orRadio.checked = false;\n }\n else {\n orRadio.checked = true;\n andRadio.checked = false;\n }\n // Render initialized RadioButton.\n andRadio.appendTo(frstpredicate);\n orRadio.appendTo(secndpredicate);\n andRadio.element.nextElementSibling.classList.add('e-xlfl-radio-and');\n orRadio.element.nextElementSibling.classList.add('e-xlfl-radio-or');\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ExcelFilterBase.prototype.removeObjects = function (elements) {\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var obj = elements_1[_i];\n if (obj && !obj.isDestroyed) {\n this.removeHandlersFromComponent(obj);\n obj.destroy();\n }\n }\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderFlValueUI = function (column, optr, elementId, predicates, isFirst) {\n var value = this.parent.createElement('td', { className: 'e-xlfl-value' });\n optr.fieldElement.appendChild(value);\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var valueDiv = this.parent.createElement('div', { className: 'e-xlfl-valuediv' });\n var isFilteredCol = this.options.filteredColumns.some(function (col) { return column === col.field; });\n var fltrPredicates = this.options.filteredColumns.filter(function (col) { return col.field === column; });\n if (this.options.column.filterTemplate) {\n var data = {};\n var columnObj = this.options.column;\n if (isFilteredCol && elementId) {\n data = this.getExcelFilterData(elementId, data, columnObj, predicates, fltrPredicates);\n }\n var isReactCompiler = this.parent.isReact && typeof (this.options.column.filterTemplate) !== 'string';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.parent.parentDetails.parentInstObj.isReact;\n var tempID = this.parent.element.id + columnObj.uid + 'filterTemplate';\n if (isReactCompiler || isReactChild) {\n this.options.column.getFilterTemplate()(data, this.parent, 'filterTemplate', tempID, null, null, valueDiv);\n }\n else {\n var element = this.options.column.getFilterTemplate()(data, this.parent, 'filterTemplate', tempID);\n appendChildren(valueDiv, element);\n }\n if (isReactCompiler || isReactChild) {\n this.parent.renderTemplates(function () {\n valueDiv.querySelector('input').id = isComplex ? complexFieldName + elementId : column + elementId;\n value.appendChild(valueDiv);\n });\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (this.parent.isAngular ? valueDiv.children[0] : valueDiv.querySelector('input')).id = isComplex ?\n complexFieldName + elementId : column + elementId;\n value.appendChild(valueDiv);\n }\n }\n else {\n var valueInput = this.parent\n .createElement('input', { id: isComplex ? complexFieldName + elementId : column + elementId });\n valueDiv.appendChild(valueInput);\n value.appendChild(valueDiv);\n var flValue = void 0;\n var predicate = void 0;\n if (predicates && predicates.length > 0) {\n predicate = predicates.length === 2 ?\n (isFirst ? predicates[0] : predicates[1]) :\n (isFirst ? predicates[0] : undefined);\n flValue = (predicate && predicate.operator === optr.operator) ? predicate.value : undefined;\n if (isNullOrUndefined(flValue)) {\n flValue = undefined;\n }\n }\n var types = {\n 'string': this.renderAutoComplete.bind(this),\n 'number': this.renderNumericTextBox.bind(this),\n 'date': this.renderDate.bind(this),\n 'dateonly': this.renderDate.bind(this),\n 'datetime': this.renderDateTime.bind(this)\n };\n types[this.options.type](this.options, column, valueInput, flValue, this.parent.enableRtl);\n }\n };\n ExcelFilterBase.prototype.getExcelFilterData = function (elementId, data, columnObj, predicates, fltrPredicates) {\n var predIndex = elementId === '-xlfl-frstvalue' ? 0 : 1;\n if (elementId === '-xlfl-frstvalue' || fltrPredicates.length > 1) {\n data = { column: predicates instanceof Array ? predicates[parseInt(predIndex.toString(), 10)] : predicates };\n var indx = this.options.column.columnData && fltrPredicates.length > 1 ?\n (this.options.column.columnData.length === 1 ? 0 : 1) : predIndex;\n data[this.options.field] = columnObj.foreignKeyValue ?\n this.options.column.columnData[parseInt(indx.toString(), 10)][columnObj.foreignKeyValue] :\n fltrPredicates[parseInt(indx.toString(), 10)].value;\n if (this.options.foreignKeyValue) {\n data[this.options.foreignKeyValue] = this.options.column\n .columnData[parseInt(indx.toString(), 10)][columnObj.foreignKeyValue];\n }\n }\n return data;\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderMatchCase = function (column, tr, matchCase, elementId, predicates) {\n var matchCaseDiv = this.parent.createElement('div', { className: 'e-xlfl-matchcasediv', attrs: { 'style': 'display: inline-block' } });\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var matchCaseInput = this.parent.createElement('input', { id: isComplex ? complexFieldName + elementId : column + elementId, attrs: { 'type': 'checkbox' } });\n matchCaseDiv.appendChild(matchCaseInput);\n matchCase.appendChild(matchCaseDiv);\n var flValue = predicates && predicates.length > 0 ?\n (predicates && predicates.length === 2 ? predicates[1].matchCase : predicates[0].matchCase) :\n false;\n // Initialize Match Case check box.\n var checkbox = new CheckBox({\n label: this.getLocalizedLabel('MatchCase'),\n enableRtl: this.parent.enableRtl, checked: flValue,\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n this.childRefs.push(checkbox);\n // Render initialized CheckBox.\n checkbox.appendTo(matchCaseInput);\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderDate = function (options, column, inputValue, fValue, isRtl) {\n var format = getCustomDateFormat(options.format, options.type) || options.format;\n var datePicker = new DatePicker(extend({\n format: format,\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n placeholder: this.getLocalizedLabel('CustomFilterDatePlaceHolder'),\n width: '100%',\n enableRtl: isRtl,\n value: new Date(fValue),\n locale: this.parent.locale\n }, options.column.filter.params));\n this.childRefs.push(datePicker);\n datePicker.appendTo(inputValue);\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderDateTime = function (options, column, inputValue, fValue, isRtl) {\n var format = getCustomDateFormat(options.format, options.type);\n var dateTimePicker = new DateTimePicker(extend({\n format: format,\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n placeholder: this.getLocalizedLabel('CustomFilterDatePlaceHolder'),\n width: '100%',\n enableRtl: isRtl,\n value: new Date(fValue),\n locale: this.parent.locale\n }, options.column.filter.params));\n this.childRefs.push(dateTimePicker);\n dateTimePicker.appendTo(inputValue);\n };\n ExcelFilterBase.prototype.completeAction = function (e) {\n e.result = distinctStringValues(e.result);\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderNumericTextBox = function (options, column, inputValue, fValue, isRtl) {\n var numericTextBox = new NumericTextBox(extend({\n format: options.format,\n placeholder: this.getLocalizedLabel('CustomFilterPlaceHolder'),\n enableRtl: isRtl,\n value: fValue,\n locale: this.parent.locale,\n cssClass: this.parent.cssClass ? this.parent.cssClass : null\n }, options.column.filter.params));\n this.childRefs.push(numericTextBox);\n numericTextBox.appendTo(inputValue);\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderAutoComplete = function (options, column, inputValue, fValue, isRtl) {\n var colObj = this.options.column;\n var isForeignColumn = this.isForeignColumn(colObj);\n var dataSource = isForeignColumn ? colObj.dataSource : options.dataSource;\n var fields = { value: isForeignColumn ? colObj.foreignKeyValue : column };\n var actObj = new AutoComplete(extend({\n dataSource: dataSource instanceof DataManager ? dataSource : new DataManager(dataSource),\n fields: fields,\n query: this.getQuery(),\n sortOrder: 'Ascending',\n locale: this.parent.locale,\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n autofill: true,\n placeholder: this.getLocalizedLabel('CustomFilterPlaceHolder'),\n enableRtl: isRtl,\n text: fValue\n }, colObj.filter.params));\n if (dataSource && 'result' in dataSource) {\n var defObj = eventPromise({ requestType: 'stringfilterrequest' }, this.getQuery());\n this.parent.trigger(events.dataStateChange, defObj.state);\n var def = defObj.deffered;\n def.promise.then(function (e) {\n actObj.dataSource = new DataManager(e);\n });\n }\n this.childRefs.push(actObj);\n var evt = { 'actionComplete': this.acActionComplete(actObj, column), 'focus': this.acFocus(actObj, column, options, inputValue) };\n registerEventHandlers(inputValue.id, [events.actionComplete, literals.focus], evt, this);\n actObj.addEventListener(literals.focus, this.eventHandlers[inputValue.id][literals.focus]);\n actObj.addEventListener(events.actionComplete, this.eventHandlers[inputValue.id][events.actionComplete]);\n actObj.appendTo(inputValue);\n };\n ExcelFilterBase.prototype.acActionComplete = function (actObj, column) {\n return function (e) {\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n e.result = e.result.filter(function (obj, index, arr) {\n return arr.map(function (mapObject) {\n return isComplex ? performComplexDataOperation(actObj.fields.value, mapObject)\n : mapObject[actObj.fields.value];\n }).indexOf(isComplex ? performComplexDataOperation(actObj.fields.value, obj) :\n obj[actObj.fields.value]) === index;\n });\n };\n };\n ExcelFilterBase.prototype.acFocus = function (actObj, column, options, inputValue) {\n var _this = this;\n return function () {\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var columnvalue = isComplex ? complexFieldName : column;\n actObj.filterType = _this.dlgDiv.querySelector('#' + columnvalue +\n (inputValue.id === (columnvalue + '-xlfl-frstvalue') ?\n '-xlfl-frstoptr' :\n '-xlfl-secndoptr')).ej2_instances[0].value;\n actObj.ignoreCase = options.type === 'string' ?\n !_this.dlgDiv.querySelector('#' + columnvalue + '-xlflmtcase').ej2_instances[0].checked :\n true;\n actObj.filterType = !isNullOrUndefined(actObj.filterType) ? actObj.filterType :\n 'equal';\n };\n };\n return ExcelFilterBase;\n}(CheckBoxFilterBase));\nexport { ExcelFilterBase };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { ExcelFilterBase } from '../common/excel-filter-base';\nimport { CheckBoxFilter } from './checkbox-filter';\nimport * as events from '../base/constant';\n/**\n * @hidden\n * `ExcelFilter` module is used to handle filtering action.\n */\nvar ExcelFilter = /** @class */ (function (_super) {\n __extends(ExcelFilter, _super);\n /**\n * Constructor for excelbox filtering module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {FilterSettings} filterSettings - specifies the Filtersettings\n * @param {ServiceLocator} serviceLocator - specifies the serviceLocator\n * @param {object} customFltrOperators - specifies the customFltrOperators\n * @hidden\n */\n function ExcelFilter(parent, filterSettings, serviceLocator, customFltrOperators) {\n var _this = _super.call(this, parent, filterSettings, serviceLocator) || this;\n _this.parent = parent;\n _this.isresetFocus = true;\n _this.excelFilterBase = new ExcelFilterBase(parent, customFltrOperators);\n return _this;\n }\n /**\n * To destroy the excel filter.\n *\n * @returns {void}\n * @hidden\n */\n ExcelFilter.prototype.destroy = function () {\n this.excelFilterBase.closeDialog();\n };\n ExcelFilter.prototype.openDialog = function (options) {\n this.excelFilterBase.openDialog(options);\n };\n ExcelFilter.prototype.closeDialog = function () {\n this.excelFilterBase.closeDialog();\n if (this.isresetFocus) {\n this.parent.notify(events.restoreFocus, {});\n }\n };\n ExcelFilter.prototype.clearCustomFilter = function (col) {\n this.excelFilterBase.clearFilter(col);\n };\n ExcelFilter.prototype.closeResponsiveDialog = function (isCustomFilter) {\n if (isCustomFilter) {\n this.excelFilterBase.removeDialog();\n }\n else {\n this.closeDialog();\n }\n };\n ExcelFilter.prototype.applyCustomFilter = function (args) {\n if (!args.isCustomFilter) {\n this.excelFilterBase.fltrBtnHandler();\n this.excelFilterBase.closeDialog();\n }\n else {\n this.excelFilterBase.filterBtnClick(args.col.field);\n }\n };\n ExcelFilter.prototype.filterByColumn = function (fieldName, firstOperator, firstValue, predicate, matchCase, ignoreAccent, secondOperator, secondValue) {\n this.excelFilterBase.filterByColumn(fieldName, firstOperator, firstValue, predicate, matchCase, ignoreAccent, secondOperator, secondValue);\n };\n /**\n * @returns {FilterUI} returns the filterUI\n * @hidden\n */\n ExcelFilter.prototype.getFilterUIInfo = function () {\n return this.excelFilterBase.getFilterUIInfo();\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n ExcelFilter.prototype.getModuleName = function () {\n return 'excelFilter';\n };\n return ExcelFilter;\n}(CheckBoxFilter));\nexport { ExcelFilter };\n","import { EventHandler, isNullOrUndefined, extend, closest, getValue } from '@syncfusion/ej2-base';\nimport { getActualPropFromColl, isActionPrevent, getColumnByForeignKeyValue } from '../base/util';\nimport { remove, matches } from '@syncfusion/ej2-base';\nimport { DataUtil, Query, DataManager } from '@syncfusion/ej2-data';\nimport * as events from '../base/constant';\nimport { CellType, ResponsiveDialogAction } from '../base/enum';\nimport { RowRenderer } from '../renderer/row-renderer';\nimport { Cell } from '../models/cell';\nimport { Row } from '../models/row';\nimport { FilterCellRenderer } from '../renderer/filter-cell-renderer';\nimport { parentsUntil, addFixedColumnBorder, applyStickyLeftRightPosition } from '../base/util';\nimport { FilterMenuRenderer } from '../renderer/filter-menu-renderer';\nimport { CheckBoxFilter } from '../actions/checkbox-filter';\nimport { ExcelFilter } from '../actions/excel-filter';\nimport * as literals from '../base/string-literals';\nimport { Input } from '@syncfusion/ej2-inputs';\n/**\n *\n * The `Filter` module is used to handle filtering action.\n */\nvar Filter = /** @class */ (function () {\n /**\n * Constructor for Grid filtering module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {FilterSettings} filterSettings - specifies the filterSettings\n * @param {ServiceLocator} serviceLocator - specifes the serviceLocator\n * @hidden\n */\n function Filter(parent, filterSettings, serviceLocator) {\n this.predicate = 'and';\n this.contentRefresh = true;\n this.filterByMethod = true;\n this.refresh = true;\n this.values = {};\n this.operators = {};\n this.cellText = {};\n this.nextFlMenuOpen = '';\n this.type = { 'Menu': FilterMenuRenderer, 'CheckBox': CheckBoxFilter, 'Excel': ExcelFilter };\n /** @hidden */\n this.filterOperators = {\n contains: 'contains', endsWith: 'endswith', equal: 'equal', greaterThan: 'greaterthan', greaterThanOrEqual: 'greaterthanorequal',\n lessThan: 'lessthan', lessThanOrEqual: 'lessthanorequal', notEqual: 'notequal', startsWith: 'startswith', wildCard: 'wildcard',\n isNull: 'isnull', notNull: 'notnull', like: 'like'\n };\n this.fltrDlgDetails = { field: '', isOpen: false };\n /** @hidden */\n this.skipNumberInput = ['=', ' ', '!'];\n this.skipStringInput = ['>', '<', '='];\n this.actualPredicate = {};\n this.parent = parent;\n this.filterSettings = filterSettings;\n this.serviceLocator = serviceLocator;\n this.addEventListener();\n this.setFullScreenDialog();\n }\n /**\n * To render filter bar when filtering enabled.\n *\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Filter.prototype.render = function (e) {\n if (DataUtil.getObject('args.isFrozen', e)) {\n return;\n }\n var gObj = this.parent;\n this.l10n = this.serviceLocator.getService('localization');\n this.getLocalizedCustomOperators();\n if (this.parent.filterSettings.type === 'FilterBar') {\n if (gObj.columns.length) {\n var fltrElem = this.parent.element.querySelector('.e-filterbar');\n if (fltrElem) {\n remove(fltrElem);\n }\n var rowRenderer = new RowRenderer(this.serviceLocator, CellType.Filter, gObj);\n var cellrender = this.serviceLocator.getService('cellRendererFactory');\n cellrender.addCellRenderer(CellType.Filter, new FilterCellRenderer(this.parent, this.serviceLocator));\n this.valueFormatter = this.serviceLocator.getService('valueFormatter');\n rowRenderer.element = this.parent.createElement('tr', { className: 'e-filterbar', attrs: { role: 'row' } });\n var row = this.generateRow();\n row.data = this.values;\n this.parent.getHeaderContent().querySelector('thead:not(.e-masked-thead)').appendChild(rowRenderer.element);\n var rowdrag = this.parent.element.querySelector('.e-rowdragheader');\n this.element = rowRenderer.render(row, gObj.getColumns(), null, null, rowRenderer.element);\n if (this.element.querySelectorAll('.e-leftfreeze').length &&\n (this.element.querySelectorAll('.e-indentcell').length || this.element.querySelectorAll('.e-grouptopleftcell').length)) {\n var td = this.element.querySelectorAll('.e-indentcell, .e-grouptopleftcell');\n for (var i = 0; i < td.length; i++) {\n td[parseInt(i.toString(), 10)].classList.add('e-leftfreeze');\n applyStickyLeftRightPosition(td[parseInt(i.toString(), 10)], i * 30, this.parent.enableRtl, 'Left');\n }\n }\n addFixedColumnBorder(this.element);\n var detail = this.element.querySelector('.e-detailheadercell');\n if (detail) {\n detail.className = 'e-filterbarcell e-mastercell';\n }\n if (rowdrag) {\n if (rowdrag.classList.contains('e-leftfreeze')) {\n rowdrag.className = 'e-dragheadercell e-mastercell e-leftfreeze';\n }\n else {\n rowdrag.className = 'e-filterbarcell e-mastercell';\n }\n }\n var gCells = [].slice.call(this.element.getElementsByClassName('e-grouptopleftcell'));\n if (gCells.length) {\n gCells[gCells.length - 1].classList.add('e-lastgrouptopleftcell');\n }\n this.wireEvents();\n this.parent.notify(events.freezeRender, { case: 'filter' });\n }\n }\n };\n /**\n * To show the responsive custom filter dialog\n *\n * @param {boolean} enable - specifes dialog open\n * @returns {void}\n * @hidden\n */\n Filter.prototype.showCustomFilter = function (enable) {\n this.responsiveDialogRenderer.isCustomDialog = enable;\n this.responsiveDialogRenderer.showResponsiveDialog(this.column);\n };\n Filter.prototype.renderResponsiveChangeAction = function (args) {\n this.responsiveDialogRenderer.action = args.action;\n };\n /**\n * To create the filter module.\n *\n * @param {Column} col - specifies the filtering column name\n * @returns {void}\n * @hidden\n */\n Filter.prototype.setFilterModel = function (col) {\n var type = col.filter.type || this.parent.filterSettings.type;\n this.filterModule = new this.type[\"\" + type](this.parent, this.parent.filterSettings, this.serviceLocator, this.customOperators, this);\n };\n /**\n * To destroy the filter bar.\n *\n * @returns {void}\n * @hidden\n */\n Filter.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (!gridElement || (!gridElement.querySelector('.' + literals.gridHeader) && !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n if (this.filterModule) {\n this.filterModule.destroy();\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (!this.parent.refreshing && (this.parent.isDestroyed || !this.parent.allowFiltering)) {\n this.filterSettings.columns = [];\n }\n this.updateFilterMsg();\n this.removeEventListener();\n this.unWireEvents();\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.showFilterBarOperator) {\n var dropdownlist = [].slice.call(this.element.getElementsByClassName('e-filterbaroperator'));\n for (var i = 0; i < dropdownlist.length; i++) {\n if (dropdownlist[parseInt(i.toString(), 10)].ej2_instances[0]) {\n dropdownlist[parseInt(i.toString(), 10)].ej2_instances[0].destroy();\n }\n }\n }\n if (this.element) {\n if (this.element.parentElement) {\n remove(this.element);\n }\n var filterBarElement = this.parent.getHeaderContent().querySelector('.e-filterbar');\n if (filterBarElement) {\n remove(filterBarElement);\n }\n }\n };\n Filter.prototype.setFullScreenDialog = function () {\n if (this.serviceLocator) {\n this.serviceLocator.registerAdaptiveService(this, this.parent.enableAdaptiveUI, ResponsiveDialogAction.isFilter);\n }\n };\n Filter.prototype.generateRow = function () {\n var options = {};\n var row = new Row(options);\n row.cells = this.generateCells();\n return row;\n };\n Filter.prototype.generateCells = function () {\n //TODO: generate dummy column for group, detail, stacked row here for filtering;\n var cells = [];\n if (this.parent.allowGrouping) {\n for (var c = 0, len = this.parent.groupSettings.columns.length; c < len; c++) {\n cells.push(this.generateCell({}, CellType.HeaderIndent));\n }\n }\n if (this.parent.detailTemplate || this.parent.childGrid) {\n cells.push(this.generateCell({}, CellType.DetailHeader));\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() !== 'Right') {\n cells.push(this.generateCell({}, CellType.RowDragHIcon));\n }\n for (var _i = 0, _a = this.parent.getColumns(); _i < _a.length; _i++) {\n var dummy = _a[_i];\n cells.push(this.generateCell(dummy));\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() === 'Right') {\n cells.push(this.generateCell({}, CellType.RowDragHIcon));\n }\n return cells;\n };\n Filter.prototype.generateCell = function (column, cellType) {\n var opt = {\n 'visible': column.visible,\n 'isDataCell': false,\n 'rowId': '',\n 'column': column,\n 'cellType': cellType ? cellType : CellType.Filter,\n 'attributes': { title: this.l10n.getConstant('FilterbarTitle') }\n };\n return new Cell(opt);\n };\n /**\n * To update filterSettings when applying filter.\n *\n * @returns {void}\n * @hidden\n */\n Filter.prototype.updateModel = function () {\n var col = this.column.isForeignColumn() ? this.parent.getColumnByUid(this.column.uid) :\n this.parent.getColumnByField(this.fieldName);\n this.filterObjIndex = this.getFilteredColsIndexByField(col);\n this.prevFilterObject = this.filterSettings.columns[this.filterObjIndex];\n var arrayVal = Array.isArray(this.value) ? this.value : [this.value];\n var moduleName = this.parent.dataSource.adaptor && this.parent.dataSource.adaptor.getModuleName ? this.parent.dataSource.adaptor.getModuleName() : undefined;\n for (var i = 0, len = arrayVal.length; i < len; i++) {\n var field = col.isForeignColumn() ? col.foreignKeyValue : this.fieldName;\n var isMenuNotEqual = this.operator === 'notequal';\n this.currentFilterObject = {\n field: field, uid: col.uid, isForeignKey: col.isForeignColumn(), operator: this.operator,\n value: arrayVal[parseInt(i.toString(), 10)], predicate: this.predicate,\n matchCase: this.matchCase, ignoreAccent: this.ignoreAccent, actualFilterValue: {}, actualOperator: {}\n };\n var index = this.getFilteredColsIndexByField(col);\n if (index > -1 && !Array.isArray(this.value)) {\n this.filterSettings.columns[parseInt(index.toString(), 10)] = this.currentFilterObject;\n }\n else {\n this.filterSettings.columns.push(this.currentFilterObject);\n }\n if (!this.column.isForeignColumn() && isNullOrUndefined(this.value) && (this.operator === 'equal' ||\n this.operator === 'notequal') && (moduleName !== 'ODataAdaptor' && moduleName !== 'ODataV4Adaptor')) {\n for (var i_1 = 0; i_1 < this.filterSettings.columns.length; i_1++) {\n if (this.filterSettings.columns[\"\" + i_1].field === field &&\n (this.filterSettings.columns[\"\" + i_1].operator === 'equal' || this.filterSettings.columns[\"\" + i_1].operator === 'notequal')\n && isNullOrUndefined(this.filterSettings.columns[\"\" + i_1].value)) {\n this.filterSettings.columns.splice(i_1, 1);\n i_1 = i_1 - 1;\n }\n }\n if (col.type === 'string') {\n this.filterSettings.columns.push({\n field: field, ignoreAccent: this.ignoreAccent, matchCase: this.matchCase,\n operator: this.operator, predicate: isMenuNotEqual ? 'and' : 'or', value: ''\n });\n }\n this.filterSettings.columns.push({\n field: field, ignoreAccent: this.ignoreAccent, matchCase: this.matchCase,\n operator: this.operator, predicate: isMenuNotEqual ? 'and' : 'or', value: undefined\n });\n this.filterSettings.columns.push({\n field: field, ignoreAccent: this.ignoreAccent, matchCase: this.matchCase,\n operator: this.operator, predicate: isMenuNotEqual ? 'and' : 'or', value: null\n });\n }\n }\n // eslint-disable-next-line no-self-assign\n this.filterSettings.columns = this.filterSettings.columns;\n this.parent.dataBind();\n };\n Filter.prototype.getFilteredColsIndexByField = function (col) {\n var cols = this.filterSettings.columns;\n for (var i = 0, len = cols.length; i < len; i++) {\n if (cols[parseInt(i.toString(), 10)].uid === col.uid || (col.isForeignColumn()\n && this.parent.getColumnByUid(col.uid).field === col.foreignKeyValue)) {\n return i;\n }\n }\n return -1;\n };\n /**\n * To trigger action complete event.\n *\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Filter.prototype.onActionComplete = function (e) {\n var args = !this.isRemove ? {\n currentFilterObject: this.currentFilterObject,\n /* tslint:disable:no-string-literal */\n currentFilteringColumn: !isNullOrUndefined(this.column) ? this.column.field : undefined,\n /* tslint:enable:no-string-literal */\n columns: this.filterSettings.columns, requestType: 'filtering', type: events.actionComplete\n } : {\n requestType: 'filtering', type: events.actionComplete\n };\n this.parent.trigger(events.actionComplete, extend(e, args));\n this.isRemove = false;\n };\n Filter.prototype.wireEvents = function () {\n EventHandler.add(this.parent.getHeaderContent(), 'keyup', this.keyUpHandlerImmediate, this);\n };\n Filter.prototype.unWireEvents = function () {\n EventHandler.remove(this.parent.getHeaderContent(), 'keyup', this.keyUpHandlerImmediate);\n };\n Filter.prototype.enableAfterRender = function (e) {\n if (e.module === this.getModuleName() && e.enable) {\n this.parent.getHeaderTable().classList.add('e-sortfilter');\n this.render();\n }\n };\n Filter.prototype.refreshFilterValue = function () {\n this.parent.removeEventListener(events.beforeDataBound, this.refreshFilterValueFn);\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.columns.length &&\n !this.parent.getCurrentViewRecords().length) {\n this.initialEnd();\n }\n };\n Filter.prototype.initialEnd = function () {\n this.parent.off(events.contentReady, this.initialEnd);\n if (this.parent.getColumns().length && this.filterSettings.columns.length) {\n var gObj = this.parent;\n this.contentRefresh = false;\n this.initialLoad = true;\n for (var _i = 0, _a = gObj.filterSettings.columns; _i < _a.length; _i++) {\n var col = _a[_i];\n this.filterByColumn(col.field, col.operator, col.value, col.predicate, col.matchCase, col.ignoreAccent, col.actualFilterValue, col.actualOperator, col.isForeignKey);\n }\n this.initialLoad = false;\n this.updateFilterMsg();\n this.contentRefresh = true;\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Filter.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.setFullScreenDialog, this.setFullScreenDialog, this);\n this.parent.on(events.uiUpdate, this.enableAfterRender, this);\n this.parent.on(events.filterComplete, this.onActionComplete, this);\n this.parent.on(events.inBoundModelChanged, this.onPropertyChanged, this);\n this.parent.on(events.keyPressed, this.keyUpHandler, this);\n this.parent.on(events.columnPositionChanged, this.columnPositionChanged, this);\n this.parent.on(events.headerRefreshed, this.render, this);\n this.parent.on(events.contentReady, this.initialEnd, this);\n this.parent.on(events.filterMenuClose, this.filterMenuClose, this);\n this.parent.on(events.renderResponsiveChangeAction, this.renderResponsiveChangeAction, this);\n this.docClickHandler = this.clickHandler.bind(this);\n EventHandler.add(document, 'click', this.docClickHandler, this);\n EventHandler.add(this.parent.element, 'mousedown', this.refreshClearIcon, this);\n this.parent.on(events.filterOpen, this.columnMenuFilter, this);\n this.parent.on(events.click, this.filterIconClickHandler, this);\n this.parent.on('persist-data-changed', this.initialEnd, this);\n this.parent.on(events.closeFilterDialog, this.clickHandler, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.refreshFilterValueFn = this.refreshFilterValue.bind(this);\n this.parent.addEventListener(events.beforeDataBound, this.refreshFilterValueFn);\n };\n /**\n * @returns {void}\n * @hidden\n */\n Filter.prototype.removeEventListener = function () {\n EventHandler.remove(document, 'click', this.docClickHandler);\n EventHandler.remove(this.parent.element, 'mousedown', this.refreshClearIcon);\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.setFullScreenDialog, this.setFullScreenDialog);\n this.parent.off(events.uiUpdate, this.enableAfterRender);\n this.parent.off(events.filterComplete, this.onActionComplete);\n this.parent.off(events.inBoundModelChanged, this.onPropertyChanged);\n this.parent.off(events.keyPressed, this.keyUpHandler);\n this.parent.off(events.columnPositionChanged, this.columnPositionChanged);\n this.parent.off(events.headerRefreshed, this.render);\n this.parent.off(events.filterOpen, this.columnMenuFilter);\n this.parent.off(events.filterMenuClose, this.filterMenuClose);\n this.parent.off(events.renderResponsiveChangeAction, this.renderResponsiveChangeAction);\n this.parent.off(events.click, this.filterIconClickHandler);\n this.parent.off(events.closeFilterDialog, this.clickHandler);\n this.parent.off(events.destroy, this.destroy);\n };\n Filter.prototype.refreshClearIcon = function (e) {\n if (this.parent.allowFiltering && this.parent.filterSettings.type === 'FilterBar' &&\n e.target.closest('th') && e.target.closest('th').classList.contains('e-filterbarcell') &&\n e.target.classList.contains('e-clear-icon')) {\n var targetText = e.target.previousElementSibling;\n Input.setValue(null, targetText, 'Never', true);\n if (this.filterSettings.mode === 'Immediate') {\n this.removeFilteredColsByField(targetText.id.slice(0, -14)); //Length of _filterBarcell = 14\n }\n }\n };\n Filter.prototype.filterMenuClose = function () {\n this.fltrDlgDetails.isOpen = false;\n };\n /**\n * Filters the Grid row by fieldName, filterOperator, and filterValue.\n *\n * @param {string} fieldName - Defines the field name of the filter column.\n * @param {string} filterOperator - Defines the operator to filter records.\n * @param {string | number | Date | boolean} filterValue - Defines the value which is used to filter records.\n * @param {string} predicate - Defines the relationship of one filter query with another by using AND or OR predicate.\n * @param {boolean} matchCase - If match case is set to true, then the filter records\n * the exact match or
filters records that are case insensitive (uppercase and lowercase letters treated the same).\n * @param {boolean} ignoreAccent - If ignoreAccent set to true, then filter ignores the diacritic characters or accents while filtering.\n * @param {string} actualFilterValue - Defines the actual filter value for the filter column.\n * @param {string} actualOperator - Defines the actual filter operator for the filter column.\n * @param {boolean} isForeignColumn - Defines whether it is a foreign key column.\n * @returns {void}\n */\n Filter.prototype.filterByColumn = function (fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator, isForeignColumn) {\n var _this = this;\n var gObj = this.parent;\n var filterCell;\n this.column = gObj.grabColumnByFieldFromAllCols(fieldName, isForeignColumn);\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.showFilterBarOperator\n && isNullOrUndefined(this.column.filterBarTemplate) && isNullOrUndefined(this.column.filterTemplate)) {\n filterOperator = this.getOperatorName(fieldName);\n }\n if (filterOperator === 'like' && filterValue && filterValue.indexOf('%') === -1) {\n filterValue = '%' + filterValue + '%';\n }\n if (!this.column) {\n return;\n }\n if (this.filterSettings.type === 'FilterBar') {\n filterCell = gObj.getHeaderContent().querySelector('[id=\\'' + this.column.field + '_filterBarcell\\']');\n }\n if (!isNullOrUndefined(this.column.allowFiltering) && !this.column.allowFiltering) {\n this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), columnName: this.column.headerText });\n return;\n }\n if (isActionPrevent(gObj)) {\n gObj.notify(events.preventBatch, {\n instance: this, handler: this.filterByColumn, arg1: fieldName, arg2: filterOperator, arg3: filterValue, arg4: predicate,\n arg5: matchCase, arg6: ignoreAccent, arg7: actualFilterValue, arg8: actualOperator\n });\n return;\n }\n this.predicate = predicate ? predicate : Array.isArray(filterValue) ? 'or' : 'and';\n this.value = filterValue;\n this.matchCase = matchCase || false;\n this.ignoreAccent = this.ignoreAccent = !isNullOrUndefined(ignoreAccent) ? ignoreAccent : this.parent.filterSettings.ignoreAccent;\n this.fieldName = fieldName;\n this.operator = filterOperator;\n filterValue = !isNullOrUndefined(filterValue) ? filterValue.toString() : filterValue;\n if (filterValue === '') {\n filterValue = null;\n }\n if (this.column.type === 'number' || this.column.type === 'date') {\n this.matchCase = true;\n }\n if (filterCell && this.filterSettings.type === 'FilterBar') {\n if ((filterValue && filterValue.length < 1) || (!this.filterByMethod &&\n this.checkForSkipInput(this.column, filterValue))) {\n this.filterStatusMsg = (filterValue && filterValue.length < 1) ? '' : this.l10n.getConstant('InvalidFilterMessage');\n this.updateFilterMsg();\n return;\n }\n if (filterCell.value !== filterValue) {\n filterCell.value = filterValue;\n }\n }\n if (!isNullOrUndefined(this.column.format)) {\n this.applyColumnFormat(filterValue);\n if (this.initialLoad && this.filterSettings.type === 'FilterBar') {\n filterCell.value = this.values[this.column.field];\n }\n }\n else {\n this.values[this.column.field] = filterValue; //this line should be above updateModel\n }\n var predObj = {\n field: this.fieldName,\n predicate: predicate,\n matchCase: matchCase,\n ignoreAccent: ignoreAccent,\n operator: this.operator,\n value: this.value,\n type: this.column.type\n };\n var filterColumn = this.parent.filterSettings.columns.filter(function (fColumn) {\n return (fColumn.field === _this.fieldName);\n });\n if (filterColumn.length > 1 && !isNullOrUndefined(this.actualPredicate[this.fieldName])) {\n this.actualPredicate[this.fieldName].push(predObj);\n }\n else {\n this.actualPredicate[this.fieldName] = [predObj];\n }\n if (this.checkAlreadyColFiltered(this.column.field)) {\n return;\n }\n this.updateModel();\n };\n Filter.prototype.applyColumnFormat = function (filterValue) {\n var _this = this;\n var getFlvalue = (this.column.type === 'date' || this.column.type === 'datetime' || this.column.type === 'dateonly') ?\n new Date(filterValue) : parseFloat(filterValue);\n if ((this.column.type === 'date' || this.column.type === 'datetime' || this.column.type === 'dateonly') && filterValue &&\n Array.isArray(this.value) && filterValue.split(',').length > 1) {\n this.values[this.column.field] = ((filterValue).split(',')).map(function (val) {\n if (val === '') {\n val = null;\n }\n return _this.setFormatForFlColumn(new Date(val), _this.column);\n });\n }\n else {\n this.values[this.column.field] = this.setFormatForFlColumn(getFlvalue, this.column);\n }\n };\n // To skip the second time request to server while applying initial filtering - EJ2-44361\n Filter.prototype.skipUid = function (col) {\n var flag = true;\n var colLen = Object.keys((col));\n for (var i = 0; i < colLen.length; i++) {\n var key = Object.keys(col[colLen[parseInt(i.toString(), 10)]]);\n if (key.length === 1 && key[0] === 'uid') {\n flag = false;\n }\n }\n return flag;\n };\n Filter.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n for (var _i = 0, _a = Object.keys(e.properties); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'columns':\n // eslint-disable-next-line no-case-declarations\n var col = 'columns';\n // eslint-disable-next-line no-case-declarations\n var args = {\n currentFilterObject: this.currentFilterObject, currentFilteringColumn: this.column ?\n this.column.field : undefined, action: 'filter', columns: this.filterSettings.columns,\n requestType: 'filtering', type: events.actionBegin, cancel: false\n };\n if (this.contentRefresh && this.skipUid(e.properties[\"\" + col])) {\n this.parent.notify(events.modelChanged, args);\n if (args.cancel) {\n if ((this.filterSettings.type === 'CheckBox' || this.filterSettings.type === 'Excel')) {\n this.filterSettings.columns = (this.actualData.length <= 1) ? this.checkboxPrevFilterObject :\n this.checkboxFilterObject;\n this.actualPredicate[this.column.field] = this.filterSettings.columns;\n var col_1 = this.parent.getColumnByField(this.column.field);\n var iconClass = this.parent.showColumnMenu && col_1.showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';\n var filterIconElement = this.parent.getColumnHeaderByField(this.column.field)\n .querySelector(iconClass);\n if (this.checkboxPrevFilterObject.length === 0) {\n filterIconElement.classList.remove('e-filtered');\n }\n else {\n filterIconElement.classList.add('e-filtered');\n }\n }\n else {\n if (isNullOrUndefined(this.prevFilterObject)) {\n this.filterSettings.columns.splice(this.filterSettings.columns.length - 1, 1);\n }\n else {\n this.filterSettings.columns[this.filterObjIndex] = this.prevFilterObject;\n }\n }\n return;\n }\n this.updateFilterIcon();\n this.refreshFilterSettings();\n this.updateFilterMsg();\n this.updateFilter();\n }\n break;\n case 'showFilterBarStatus':\n if (e.properties[\"\" + prop]) {\n this.updateFilterMsg();\n }\n else if (this.parent.allowPaging) {\n this.parent.updateExternalMessage('');\n }\n break;\n case 'showFilterBarOperator':\n case 'type':\n this.parent.refreshHeader();\n this.refreshFilterSettings();\n if (this.parent.height === '100%') {\n this.parent.scrollModule.refresh();\n }\n break;\n }\n }\n };\n Filter.prototype.refreshFilterSettings = function () {\n if (this.filterSettings.type === 'FilterBar') {\n for (var i = 0; i < this.filterSettings.columns.length; i++) {\n this.column = this.parent.grabColumnByUidFromAllCols(this.filterSettings.columns[parseInt(i.toString(), 10)].uid);\n var filterValue = this.filterSettings.columns[parseInt(i.toString(), 10)].value;\n filterValue = !isNullOrUndefined(filterValue) && filterValue.toString();\n if (!isNullOrUndefined(this.column.format)) {\n this.applyColumnFormat(filterValue);\n }\n else {\n var key = this.filterSettings.columns[parseInt(i.toString(), 10)].field;\n this.values[\"\" + key] = this.filterSettings.columns[parseInt(i.toString(), 10)].value;\n }\n var filterElement = this.getFilterBarElement(this.column.field);\n if (filterElement) {\n if (this.cellText[this.filterSettings.columns[parseInt(i.toString(), 10)].field] !== ''\n && !isNullOrUndefined(this.cellText[this.filterSettings.columns[parseInt(i.toString(), 10)].field])) {\n filterElement.value = this.cellText[this.column.field];\n }\n else {\n filterElement.value = this.filterSettings.columns[parseInt(i.toString(), 10)].value;\n }\n }\n }\n if (this.filterSettings.columns.length === 0) {\n var col = this.parent.getColumns();\n for (var i = 0; i < col.length; i++) {\n var filterElement = this.getFilterBarElement(col[parseInt(i.toString(), 10)].field);\n if (filterElement && filterElement.value !== '') {\n filterElement.value = '';\n delete this.values[col[parseInt(i.toString(), 10)].field];\n }\n }\n }\n }\n };\n Filter.prototype.updateFilterIcon = function () {\n if (this.filterSettings.columns.length === 0 && this.parent.element.querySelector('.e-filtered')) {\n var fltrIconElement = [].slice.call(this.parent.element.getElementsByClassName('e-filtered'));\n for (var i = 0, len = fltrIconElement.length; i < len; i++) {\n fltrIconElement[parseInt(i.toString(), 10)].classList.remove('e-filtered');\n }\n }\n };\n Filter.prototype.getFilterBarElement = function (col) {\n var selector = '[id=\\'' + col + '_filterBarcell\\']';\n var filterElement;\n if (selector && !isNullOrUndefined(this.element)) {\n filterElement = this.element.querySelector(selector);\n }\n return filterElement;\n };\n /**\n * @private\n * @returns {void}\n */\n Filter.prototype.refreshFilter = function () {\n this.refreshFilterSettings();\n this.updateFilterMsg();\n };\n /**\n * Clears all the filtered rows of the Grid.\n *\n * @param {string[]} fields - returns the fields\n * @returns {void}\n */\n Filter.prototype.clearFiltering = function (fields) {\n var _this = this;\n var cols = getActualPropFromColl(this.filterSettings.columns);\n if (!isNullOrUndefined(fields)) {\n this.refresh = false;\n fields.forEach(function (field) { _this.removeFilteredColsByField(field, false); });\n this.parent.setProperties({ filterSettings: { columns: this.filterSettings.columns } }, true);\n this.parent.renderModule.refresh();\n this.refresh = true;\n return;\n }\n if (isActionPrevent(this.parent)) {\n this.parent.notify(events.preventBatch, { instance: this, handler: this.clearFiltering });\n return;\n }\n for (var i = 0; i < cols.length; i++) {\n cols[parseInt(i.toString(), 10)].uid = cols[parseInt(i.toString(), 10)].uid\n || this.parent.getColumnByField(cols[parseInt(i.toString(), 10)].field).uid;\n }\n var colUid = cols.map(function (f) { return f.uid; });\n var filteredcols = colUid.filter(function (item, pos) { return colUid.indexOf(item) === pos; });\n this.refresh = false;\n for (var i = 0, len = filteredcols.length; i < len; i++) {\n this.removeFilteredColsByField(this.parent.getColumnByUid(filteredcols[parseInt(i.toString(), 10)]).field, false);\n }\n this.refresh = true;\n if (filteredcols.length) {\n this.parent.renderModule.refresh();\n }\n if (this.parent.filterSettings.columns.length === 0 && this.parent.element.querySelector('.e-filtered')) {\n var fltrElement = [].slice.call(this.parent.element.getElementsByClassName('e-filtered'));\n for (var i = 0, len = fltrElement.length; i < len; i++) {\n fltrElement[0].classList.remove('e-filtered');\n }\n }\n this.isRemove = true;\n this.filterStatusMsg = '';\n this.updateFilterMsg();\n };\n Filter.prototype.checkAlreadyColFiltered = function (field) {\n var columns = this.filterSettings.columns;\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var col = columns_1[_i];\n if (col.field === field && col.value === this.value &&\n col.operator === this.operator && col.predicate === this.predicate) {\n return true;\n }\n }\n return false;\n };\n Filter.prototype.columnMenuFilter = function (args) {\n this.column = args.col;\n var ele = closest(args.target, '#' + args.id);\n if (args.isClose && !ele) {\n this.filterModule.closeDialog();\n }\n else if (ele) {\n this.filterDialogOpen(this.column, args.target);\n }\n };\n Filter.prototype.filterDialogOpen = function (col, target, left, top) {\n if (this.filterModule) {\n this.filterModule.isresetFocus = false;\n this.filterModule.closeDialog();\n }\n this.setFilterModel(col);\n this.filterModule.openDialog(this.createOptions(col, target, left, top));\n };\n /**\n * Create filter dialog options\n *\n * @param {Column} col - Filtering column detail.\n * @param {Element} target - Filter dialog target.\n * @param {number} left - Filter dialog left position.\n * @param {number} top - Filter dialog top position.\n * @returns {Object} returns the created dialog options\n * @hidden\n */\n Filter.prototype.createOptions = function (col, target, left, top) {\n var gObj = this.parent;\n var dataSource = col.filter.dataSource || gObj.dataSource && 'result' in gObj.dataSource ? gObj.dataSource :\n gObj.getDataModule().dataManager;\n var type = col.filter.type || this.parent.filterSettings.type;\n var options = {\n type: col.type, field: col.field, displayName: col.headerText,\n dataSource: dataSource, format: col.format, height: 800, columns: gObj.getColumns(),\n filteredColumns: gObj.filterSettings.columns, target: target, dataManager: gObj.getDataModule().dataManager,\n formatFn: col.getFormatter(), ignoreAccent: gObj.filterSettings.ignoreAccent,\n parserFn: col.getParser(), query: gObj.query, template: col.getFilterItemTemplate(),\n hideSearchbox: isNullOrUndefined(col.filter.hideSearchbox) ? false : col.filter.hideSearchbox,\n handler: this.filterHandler.bind(this), localizedStrings: gObj.getLocaleConstants(),\n position: { X: left, Y: top }, column: col, foreignKeyValue: col.foreignKeyValue,\n actualPredicate: this.actualPredicate, localeObj: gObj.localeObj,\n isRemote: gObj.getDataModule().isRemote(), allowCaseSensitive: this.filterSettings.enableCaseSensitivity,\n isResponsiveFilter: this.parent.enableAdaptiveUI,\n operator: this.actualPredicate[col.field] && type === 'Menu' ? this.actualPredicate[col.field][0].operator : 'equal',\n parentTotalDataCount: gObj.getDataModule().isRemote() && gObj.allowPaging ? gObj.pagerModule.pagerObj.totalRecordsCount :\n gObj.getDataModule().isRemote() ? gObj.totalDataRecordsCount : gObj.getFilteredRecords().length,\n parentCurrentViewDataCount: gObj.currentViewData.length,\n parentFilteredLocalRecords: !gObj.getDataModule().isRemote() ? gObj.getFilteredRecords() : []\n };\n return options;\n };\n /**\n * Removes filtered column by field name.\n *\n * @param {string} field - Defines column field name to remove filter.\n * @param {boolean} isClearFilterBar - Specifies whether the filter bar value needs to be cleared.\n * @returns {void}\n * @hidden\n */\n Filter.prototype.removeFilteredColsByField = function (field, isClearFilterBar) {\n var fCell;\n var cols = this.filterSettings.columns;\n if (isActionPrevent(this.parent)) {\n var args = { instance: this, handler: this.removeFilteredColsByField, arg1: field, arg2: isClearFilterBar };\n this.parent.notify(events.preventBatch, args);\n return;\n }\n var colUid = cols.map(function (f) { return f.uid; });\n var filteredColsUid = colUid.filter(function (item, pos) { return colUid.indexOf(item) === pos; });\n if (!isNullOrUndefined(this.column)) {\n var col = this.column.isForeignColumn() ? this.parent.getColumnByUid(this.column.uid) :\n this.parent.getColumnByField(field);\n this.filterObjIndex = this.getFilteredColsIndexByField(col);\n this.prevFilterObject = this.filterSettings.columns[this.filterObjIndex];\n }\n var _loop_1 = function (i, len) {\n cols[parseInt(i.toString(), 10)].uid = cols[parseInt(i.toString(), 10)].uid\n || this_1.parent.getColumnByField(cols[parseInt(i.toString(), 10)].field).uid;\n var len_1 = cols.length;\n var column = this_1.parent.grabColumnByUidFromAllCols(filteredColsUid[parseInt(i.toString(), 10)]);\n if (column.field === field || (column.field === column.foreignKeyValue && column.isForeignColumn())) {\n var currentPred = this_1.filterSettings.columns.filter(function (e) {\n return e.uid === column.uid;\n })[0];\n if (this_1.filterSettings.type === 'FilterBar' && !isClearFilterBar) {\n var selector = '[id=\\'' + column.field + '_filterBarcell\\']';\n fCell = this_1.parent.getHeaderContent().querySelector(selector);\n if (fCell) {\n fCell.value = '';\n delete this_1.values[\"\" + field];\n }\n }\n while (len_1--) {\n if (cols[parseInt(len_1.toString(), 10)].uid === column.uid) {\n cols.splice(len_1, 1);\n }\n }\n var fltrElement = this_1.parent.getColumnHeaderByField(column.field);\n if (this_1.filterSettings.type !== 'FilterBar' || this_1.parent.showColumnMenu) {\n var iconClass = this_1.parent.showColumnMenu && column.showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';\n fltrElement.querySelector(iconClass).classList.remove('e-filtered');\n }\n this_1.isRemove = true;\n if (this_1.actualPredicate[\"\" + field]) {\n delete this_1.actualPredicate[\"\" + field];\n }\n if (this_1.values[\"\" + field]) {\n delete this_1.values[\"\" + field];\n }\n if (this_1.refresh) {\n this_1.parent.notify(events.modelChanged, {\n requestType: 'filtering', type: events.actionBegin, currentFilterObject: currentPred,\n currentFilterColumn: column, action: 'clearFilter'\n });\n }\n return \"break\";\n }\n };\n var this_1 = this;\n for (var i = 0, len = filteredColsUid.length; i < len; i++) {\n var state_1 = _loop_1(i, len);\n if (state_1 === \"break\")\n break;\n }\n this.updateFilterMsg();\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Filter.prototype.getModuleName = function () {\n return 'filter';\n };\n Filter.prototype.keyUpHandlerImmediate = function (e) {\n if (e.keyCode !== 13) {\n this.keyUpHandler(e);\n }\n };\n Filter.prototype.keyUpHandler = function (e) {\n var gObj = this.parent;\n var target = e.target;\n if (target && matches(target, '.e-filterbar input')) {\n var closeHeaderEle = closest(target, 'th.e-filterbarcell');\n this.column = gObj.getColumnByUid(closeHeaderEle.getAttribute('e-mappinguid'));\n if (!this.column) {\n return;\n }\n if (e.action === 'altDownArrow' && this.parent.filterSettings.showFilterBarOperator) {\n var dropDownListInput = closest(target, 'span').querySelector('.e-filterbaroperator');\n dropDownListInput.ej2_instances[0].showPopup();\n dropDownListInput.focus();\n }\n if ((this.filterSettings.mode === 'Immediate' || (e.keyCode === 13 &&\n !e.target.classList.contains('e-filterbaroperator')))\n && e.keyCode !== 9 && !this.column.filterTemplate) {\n this.value = target.value.trim();\n this.processFilter(e);\n }\n }\n if (e.action === 'altDownArrow' && this.filterSettings.type !== 'FilterBar' && !parentsUntil(e.target, 'e-toolbar')\n && isNullOrUndefined(this.parent.element.querySelector('.e-filter-popup'))) {\n var element = gObj.focusModule.currentInfo.element;\n if (element && element.classList.contains('e-headercell')) {\n var column = gObj.getColumnByUid(element.firstElementChild.getAttribute('e-mappinguid'));\n this.openMenuByField(column.field);\n this.parent.focusModule.clearIndicator();\n }\n }\n if (e.action === 'escape' && this.filterSettings.type === 'Menu' && this.filterModule) {\n this.filterModule.closeDialog();\n gObj.notify(events.restoreFocus, {});\n }\n };\n Filter.prototype.updateCrossIcon = function (element) {\n if (element.value.length) {\n element.nextElementSibling.classList.remove('e-hide');\n }\n };\n Filter.prototype.updateFilterMsg = function () {\n if (this.filterSettings.type === 'FilterBar') {\n var gObj = this.parent;\n var getFormatFlValue = void 0;\n var columns = this.filterSettings.columns;\n var column = void 0;\n if (!this.filterSettings.showFilterBarStatus) {\n return;\n }\n if (columns.length > 0 && this.filterStatusMsg !== this.l10n.getConstant('InvalidFilterMessage')) {\n this.filterStatusMsg = '';\n for (var index = 0; index < columns.length; index++) {\n column = gObj.grabColumnByUidFromAllCols(columns[parseInt(index.toString(), 10)].uid)\n || gObj.grabColumnByFieldFromAllCols(columns[parseInt(index.toString(), 10)].field, columns[parseInt(index.toString(), 10)].isForeignKey);\n if (index) {\n this.filterStatusMsg += ' && ';\n }\n if (!isNullOrUndefined(column.format)) {\n var flValue = (column.type === 'date' || column.type === 'datetime' || column.type === 'dateonly') ?\n this.valueFormatter.fromView(this.values[column.field], column.getParser(), (column.type === 'dateonly' ? 'date' : column.type)) :\n this.values[column.field];\n if (!(column.type === 'date' || column.type === 'datetime' || column.type === 'dateonly')) {\n var formater = this.serviceLocator.getService('valueFormatter');\n getFormatFlValue = formater.toView(flValue, column.getParser()).toString();\n }\n else {\n getFormatFlValue = this.setFormatForFlColumn(flValue, column);\n }\n this.filterStatusMsg += column.headerText + ': ' + getFormatFlValue;\n }\n else {\n this.filterStatusMsg += column.headerText + ': ' + this.values[column.field];\n }\n }\n }\n if (gObj.allowPaging) {\n gObj.updateExternalMessage(this.filterStatusMsg);\n }\n //TODO: virtual paging\n this.filterStatusMsg = '';\n }\n };\n Filter.prototype.setFormatForFlColumn = function (value, column) {\n var formater = this.serviceLocator.getService('valueFormatter');\n return formater.toView(value, column.getFormatter()).toString();\n };\n Filter.prototype.checkForSkipInput = function (column, value) {\n var isSkip;\n if (column.type === 'number') {\n if (DataUtil.operatorSymbols[\"\" + value] || this.skipNumberInput.indexOf(value) > -1) {\n isSkip = true;\n }\n }\n else if (column.type === 'string') {\n for (var _i = 0, value_1 = value; _i < value_1.length; _i++) {\n var val = value_1[_i];\n if (this.skipStringInput.indexOf(val) > -1) {\n isSkip = true;\n }\n }\n }\n return isSkip;\n };\n Filter.prototype.processFilter = function (e) {\n this.stopTimer();\n this.startTimer(e);\n };\n Filter.prototype.startTimer = function (e) {\n var _this = this;\n this.timer = window.setInterval(function () { _this.onTimerTick(); }, e.keyCode === 13 ? 0 : this.filterSettings.immediateModeDelay);\n };\n Filter.prototype.stopTimer = function () {\n window.clearInterval(this.timer);\n };\n Filter.prototype.onTimerTick = function () {\n var selector = '[id=\\'' + this.column.field + '_filterBarcell\\']';\n var filterElement = this.element.querySelector(selector);\n if (!filterElement) {\n filterElement = this.parent.getHeaderContent().querySelector(selector);\n }\n var filterValue;\n this.cellText[this.column.field] = filterElement.value;\n this.stopTimer();\n if (!isNullOrUndefined(this.column.filterBarTemplate)) {\n var templateRead = this.column.filterBarTemplate.read;\n if (typeof templateRead === 'string') {\n templateRead = getValue(templateRead, window);\n }\n if (!isNullOrUndefined(templateRead)) {\n this.value = templateRead.call(this, filterElement);\n }\n }\n else {\n filterValue = JSON.parse(JSON.stringify(filterElement.value));\n }\n if (isNullOrUndefined(this.value) || this.value === '') {\n this.removeFilteredColsByField(this.column.field);\n return;\n }\n this.validateFilterValue(this.value);\n this.filterByMethod = false;\n this.filterByColumn(this.column.field, this.operator, this.value, this.predicate, this.filterSettings.enableCaseSensitivity, this.ignoreAccent, this.column.isForeignColumn());\n this.filterByMethod = true;\n filterElement.value = filterValue;\n this.updateFilterMsg();\n };\n Filter.prototype.validateFilterValue = function (value) {\n var skipInput;\n var index;\n this.matchCase = this.filterSettings.enableCaseSensitivity;\n switch (this.column.type) {\n case 'number':\n if (this.column.filter.operator) {\n this.operator = this.column.filter.operator;\n }\n else {\n this.operator = this.filterOperators.equal;\n }\n skipInput = ['>', '<', '=', '!'];\n for (var i = 0; i < value.length; i++) {\n if (skipInput.indexOf(value[parseInt(i.toString(), 10)]) > -1) {\n index = i;\n break;\n }\n }\n this.getOperator(value.substring(index));\n if (index !== 0) {\n this.value = value.substring(0, index);\n }\n if (this.value !== '' && value.length >= 1) {\n this.value = this.valueFormatter.fromView(this.value, this.column.getParser(), this.column.type);\n }\n if (isNaN(this.value)) {\n this.filterStatusMsg = this.l10n.getConstant('InvalidFilterMessage');\n }\n break;\n case 'date':\n case 'datetime':\n this.operator = this.filterOperators.equal;\n if (this.value !== '' && !(this.value instanceof Date)) {\n this.getOperator(value);\n this.value = this.valueFormatter.fromView(this.value, this.column.getParser(), this.column.type);\n if (isNullOrUndefined(this.value)) {\n this.filterStatusMsg = this.l10n.getConstant('InvalidFilterMessage');\n }\n }\n break;\n case 'string':\n this.matchCase = false;\n if (this.column.filter.operator) {\n this.operator = this.column.filter.operator;\n }\n else {\n if (value.indexOf('*') !== -1 || value.indexOf('?') !== -1 || value.indexOf('%3f') !== -1) {\n this.operator = this.filterOperators.wildCard;\n }\n else if (value.indexOf('%') !== -1) {\n this.operator = this.filterOperators.like;\n }\n else {\n this.operator = this.filterOperators.startsWith;\n }\n }\n break;\n case 'boolean':\n if (value.toLowerCase() === 'true' || value === '1') {\n this.value = true;\n }\n else if (value.toLowerCase() === 'false' || value === '0') {\n this.value = false;\n }\n else if (value.length) {\n this.filterStatusMsg = this.l10n.getConstant('InvalidFilterMessage');\n }\n this.operator = this.filterOperators.equal;\n break;\n default:\n if (this.column.filter.operator) {\n this.operator = this.column.filter.operator;\n }\n else {\n this.operator = this.filterOperators.equal;\n }\n }\n };\n Filter.prototype.getOperator = function (value) {\n var singleOp = value.charAt(0);\n var multipleOp = value.slice(0, 2);\n var operators = extend({ '=': this.filterOperators.equal, '!': this.filterOperators.notEqual }, DataUtil.operatorSymbols);\n // eslint-disable-next-line no-prototype-builtins\n if (operators.hasOwnProperty(singleOp) || operators.hasOwnProperty(multipleOp)) {\n this.operator = operators[\"\" + singleOp];\n this.value = value.substring(1);\n if (!this.operator) {\n this.operator = operators[\"\" + multipleOp];\n this.value = value.substring(2);\n }\n }\n if (this.operator === this.filterOperators.lessThan || this.operator === this.filterOperators.greaterThan) {\n if (this.value.charAt(0) === '=') {\n this.operator = this.operator + 'orequal';\n this.value = this.value.substring(1);\n }\n }\n };\n Filter.prototype.columnPositionChanged = function () {\n if (this.parent.filterSettings.type !== 'FilterBar') {\n return;\n }\n };\n Filter.prototype.getLocalizedCustomOperators = function () {\n var numOptr = [\n { value: 'equal', text: this.l10n.getConstant('Equal') },\n { value: 'greaterthan', text: this.l10n.getConstant('GreaterThan') },\n { value: 'greaterthanorequal', text: this.l10n.getConstant('GreaterThanOrEqual') },\n { value: 'lessthan', text: this.l10n.getConstant('LessThan') },\n { value: 'lessthanorequal', text: this.l10n.getConstant('LessThanOrEqual') },\n { value: 'notequal', text: this.l10n.getConstant('NotEqual') },\n { value: 'isnull', text: this.l10n.getConstant('IsNull') },\n { value: 'isnotnull', text: this.l10n.getConstant('NotNull') }\n ];\n this.customOperators = {\n stringOperator: [\n { value: 'startswith', text: this.l10n.getConstant('StartsWith') },\n { value: 'endswith', text: this.l10n.getConstant('EndsWith') },\n { value: 'contains', text: this.l10n.getConstant('Contains') },\n { value: 'equal', text: this.l10n.getConstant('Equal') },\n { value: 'isempty', text: this.l10n.getConstant('IsEmpty') },\n { value: 'doesnotstartwith', text: this.l10n.getConstant('NotStartsWith') },\n { value: 'doesnotendwith', text: this.l10n.getConstant('NotEndsWith') },\n { value: 'doesnotcontain', text: this.l10n.getConstant('NotContains') },\n { value: 'notequal', text: this.l10n.getConstant('NotEqual') },\n { value: 'isnotempty', text: this.l10n.getConstant('IsNotEmpty') },\n { value: 'like', text: this.l10n.getConstant('Like') }\n ],\n numberOperator: numOptr,\n dateOperator: numOptr,\n datetimeOperator: numOptr,\n dateonlyOperator: numOptr,\n booleanOperator: [\n { value: 'equal', text: this.l10n.getConstant('Equal') },\n { value: 'notequal', text: this.l10n.getConstant('NotEqual') }\n ]\n };\n };\n /**\n * @param {string} field - specifies the field name\n * @returns {void}\n * @hidden\n */\n Filter.prototype.openMenuByField = function (field) {\n var gObj = this.parent;\n if (gObj.enableAdaptiveUI) {\n this.showCustomFilter(false);\n return;\n }\n var column = gObj.getColumnByField(field);\n var header = gObj.getColumnHeaderByField(field);\n var target = header.querySelector('.e-filtermenudiv');\n if (!target) {\n return;\n }\n var gClient = gObj.element.getBoundingClientRect();\n var fClient = target.getBoundingClientRect();\n this.filterDialogOpen(column, target, fClient.right - gClient.left, fClient.bottom - gClient.top);\n };\n Filter.prototype.filterIconClickHandler = function (e) {\n var target = e.target;\n if (target.classList.contains('e-filtermenudiv') && (this.parent.filterSettings.type === 'Menu' ||\n this.parent.filterSettings.type === 'CheckBox' || this.parent.filterSettings.type === 'Excel')) {\n var gObj = this.parent;\n var col = gObj.getColumnByUid(parentsUntil(target, 'e-headercell').firstElementChild.getAttribute('e-mappinguid'));\n this.column = col;\n if (this.fltrDlgDetails.field === col.field && this.fltrDlgDetails.isOpen) {\n return;\n }\n if (this.filterModule) {\n this.filterModule.closeDialog();\n }\n this.fltrDlgDetails = { field: col.field, isOpen: true };\n this.openMenuByField(col.field);\n }\n };\n Filter.prototype.clickHandler = function (e) {\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.showFilterBarOperator) {\n if (parentsUntil(e.target, 'e-filterbarcell') &&\n e.target.classList.contains('e-input-group-icon')) {\n var filterOperatorElement = closest(e.target, 'div').\n querySelector('.e-filterbaroperator');\n if (filterOperatorElement) {\n filterOperatorElement.focus();\n }\n else {\n e.target.focus();\n }\n }\n if (e.target.classList.contains('e-list-item')) {\n var inputId = document.querySelector('.e-popup-open').getAttribute('id').replace('_popup', '');\n if (inputId.indexOf('grid-column') !== -1) {\n closest(document.getElementById(inputId), 'div').querySelector('.e-filtertext').focus();\n }\n }\n }\n if (this.filterSettings.mode === 'Immediate' || this.parent.filterSettings.type === 'Menu' ||\n this.parent.filterSettings.type === 'CheckBox' || this.parent.filterSettings.type === 'Excel') {\n var target = e.target;\n var datepickerEle = target.classList.contains('e-day'); // due to datepicker popup cause\n var dialog = parentsUntil(this.parent.element, 'e-dialog');\n var hasDialog = false;\n var popupEle = parentsUntil(target, 'e-popup');\n var hasDialogClosed = this.parent.element.classList.contains('e-device') ? document.querySelector('.e-filter-popup')\n : this.parent.element.querySelector('.e-filter-popup');\n if (dialog && popupEle) {\n hasDialog = dialog.id === popupEle.id;\n }\n if ((this.filterModule && hasDialogClosed && (parentsUntil(target, 'e-excel-ascending') ||\n parentsUntil(target, 'e-excel-descending')))) {\n this.filterModule.closeDialog(target);\n }\n if (parentsUntil(target, 'e-filter-popup') || target.classList.contains('e-filtermenudiv')) {\n return;\n }\n else if (this.filterModule && !parentsUntil(target, 'e-date-overflow') && (!parentsUntil(target, 'e-popup-wrapper')\n && (!closest(target, '.e-filter-item.e-menu-item'))) && !datepickerEle\n && !(parentsUntil(target, 'e-search-wrapper') && !hasDialogClosed)) {\n if ((hasDialog && (!parentsUntil(target, 'e-filter-popup'))\n && (!parentsUntil(target, 'e-popup-flmenu'))) || (!popupEle && hasDialogClosed)) {\n this.filterModule.isresetFocus = parentsUntil(target, 'e-grid') &&\n parentsUntil(target, 'e-grid').id === this.parent.element.id && !(parentsUntil(target, 'e-search-wrapper')\n && hasDialogClosed);\n this.filterModule.closeDialog(target);\n }\n }\n }\n };\n Filter.prototype.filterHandler = function (args) {\n this.actualPredicate[args.field] = args.actualPredicate;\n this.actualData = Object.keys(this.actualPredicate);\n var dataManager = new DataManager(this.filterSettings.columns);\n var query = new Query().where('field', this.filterOperators.equal, args.field);\n this.checkboxFilterObject = dataManager.dataSource.json;\n this.checkboxPrevFilterObject = dataManager.executeLocal(query);\n for (var i = 0; i < this.checkboxPrevFilterObject.length; i++) {\n var index = -1;\n for (var j = 0; j < this.filterSettings.columns.length; j++) {\n if (this.checkboxPrevFilterObject[parseInt(i.toString(), 10)].field ===\n this.filterSettings.columns[parseInt(j.toString(), 10)].field) {\n index = j;\n break;\n }\n }\n if (index !== -1) {\n this.filterSettings.columns.splice(index, 1);\n }\n }\n if (this.values[args.field]) {\n delete this.values[args.field];\n }\n var col = this.parent.getColumnByField(args.field);\n var iconClass = this.parent.showColumnMenu && col.showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';\n var filterIconElement = this.parent.getColumnHeaderByField(args.field).querySelector(iconClass);\n if (args.action === 'filtering') {\n this.filterSettings.columns = this.filterSettings.columns.concat(args.filterCollection);\n if (this.filterSettings.columns.length && filterIconElement) {\n filterIconElement.classList.add('e-filtered');\n }\n }\n else {\n if (filterIconElement) {\n filterIconElement.classList.remove('e-filtered');\n }\n args.requestType = 'filtering';\n this.parent.renderModule.refresh(args); //hot-fix onpropertychanged not working for object { array }\n }\n this.parent.dataBind();\n };\n Filter.prototype.updateFilter = function () {\n var cols = this.filterSettings.columns;\n this.actualPredicate = {};\n for (var i = 0; i < cols.length; i++) {\n this.column = this.parent.getColumnByField(cols[parseInt(i.toString(), 10)].field) ||\n getColumnByForeignKeyValue(cols[parseInt(i.toString(), 10)].field, this.parent.getForeignKeyColumns());\n var fieldName = cols[parseInt(i.toString(), 10)].field;\n if (!this.parent.getColumnByField(cols[parseInt(i.toString(), 10)].field)) {\n fieldName = getColumnByForeignKeyValue(cols[parseInt(i.toString(), 10)].field, this.parent.getForeignKeyColumns()).field;\n }\n this.refreshFilterIcon(fieldName, cols[parseInt(i.toString(), 10)].operator, cols[parseInt(i.toString(), 10)].value, cols[parseInt(i.toString(), 10)].type, cols[parseInt(i.toString(), 10)].predicate, cols[parseInt(i.toString(), 10)].matchCase, cols[parseInt(i.toString(), 10)].ignoreAccent, cols[parseInt(i.toString(), 10)].uid);\n }\n };\n Filter.prototype.refreshFilterIcon = function (fieldName, operator, value, type, predicate, matchCase, ignoreAccent, uid) {\n var obj = {\n field: fieldName,\n predicate: predicate,\n matchCase: matchCase,\n ignoreAccent: ignoreAccent,\n operator: operator,\n value: value,\n type: type\n };\n if (this.actualPredicate[\"\" + fieldName]) {\n this.actualPredicate[\"\" + fieldName].push(obj);\n }\n else {\n this.actualPredicate[\"\" + fieldName] = [obj];\n }\n var field = uid ? this.parent.grabColumnByUidFromAllCols(uid).field : fieldName;\n this.addFilteredClass(field);\n };\n Filter.prototype.addFilteredClass = function (fieldName) {\n var filterIconElement;\n var col = this.parent.getColumnByField(fieldName);\n if (this.parent.showColumnMenu && col.showColumnMenu) {\n filterIconElement = this.parent.getColumnHeaderByField(fieldName).querySelector('.e-columnmenu');\n }\n else if (col) {\n filterIconElement = this.parent.getColumnHeaderByField(fieldName).querySelector('.e-icon-filter');\n }\n if (filterIconElement) {\n filterIconElement.classList.add('e-filtered');\n }\n };\n /**\n * @hidden\n * @returns {FilterUI} returns the FilterUI\n */\n Filter.prototype.getFilterUIInfo = function () {\n return this.filterModule ? this.filterModule.getFilterUIInfo() : {};\n };\n /**\n * @param {string} field - specifies the field name\n * @returns {string} returns the operator name\n * @hidden\n */\n Filter.prototype.getOperatorName = function (field) {\n return document.getElementById(this.parent.getColumnByField(field).uid).ej2_instances[0].value;\n };\n /**\n * Renders checkbox items in Menu filter dialog.\n *\n * @returns {void}\n */\n Filter.prototype.renderCheckboxOnFilterMenu = function () {\n return this.filterModule.renderCheckBoxMenu();\n };\n return Filter;\n}());\nexport { Filter };\n","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// eslint-disable-next-line @typescript-eslint/triple-slash-reference\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';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { DataManager, Predicate, Query } from '@syncfusion/ej2-data';\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 * @param {ComboBoxModel} options - Specifies the ComboBox model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function ComboBox(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\n */\n ComboBox.prototype.preRender = function () {\n _super.prototype.preRender.call(this);\n };\n ComboBox.prototype.getLocaleName = function () {\n return 'combo-box';\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.onBlurHandler, 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 EventHandler.add(window, 'resize', this.windowResize, 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.onBlurHandler = function (e) {\n var inputValue = this.inputElement && this.inputElement.value === '' ?\n null : this.inputElement && this.inputElement.value;\n if (!isNullOrUndefined(this.listData) && !isNullOrUndefined(inputValue) && inputValue !== this.text) {\n this.customValue(e);\n }\n _super.prototype.onBlurHandler.call(this, e);\n };\n ComboBox.prototype.targetElement = function () {\n return this.inputElement;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\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 // eslint-disable-next-line @typescript-eslint/no-unused-vars\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 var isExistItem = !isNullOrUndefined(li) ? true : false;\n if (this.enableVirtualization && this.value) {\n var fields = (this.fields.value) ? this.fields.value : '';\n if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {\n var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));\n if (getItem && getItem.length > 0) {\n this.itemData = getItem[0];\n isExistItem = true;\n var dataItem = this.getItemData();\n if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {\n this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });\n }\n }\n }\n else {\n var getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));\n if (getItem && getItem.length > 0) {\n this.itemData = getItem[0];\n isExistItem = true;\n var dataItem = this.getItemData();\n if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {\n this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });\n }\n }\n }\n }\n if (li) {\n this.setSelection(li, null);\n }\n else if ((!this.enableVirtualization && this.allowCustom) || (this.allowCustom && this.enableVirtualization && !isExistItem)) {\n this.valueMuteChange(this.value);\n }\n else if (!this.enableVirtualization || (this.enableVirtualization && !isExistItem)) {\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 'role': 'combobox',\n 'aria-autocomplete': 'both',\n 'aria-labelledby': this.hiddenElement.id,\n 'aria-expanded': 'false',\n 'aria-readonly': this.readonly.toString(),\n 'autocomplete': '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 var searchBoxContainer = (this.isFiltering() || (this.isReact && this.getModuleName() === 'combobox')) ? this.inputWrapper : inputObject;\n return searchBoxContainer;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n ComboBox.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n var _this = this;\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n if (this.isSelectCustom) {\n this.removeSelection();\n }\n if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped && !this.enableVirtualization) {\n setTimeout(function () {\n _this.inlineSearch();\n });\n }\n };\n ComboBox.prototype.getFocusElement = function () {\n var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();\n var selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : this.list;\n var isSelected = dataItem.text && dataItem.text.toString() === 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 dataSource = this.sortedData;\n var type = this.typeOfData(dataSource).typeof;\n var activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type);\n if (this.enableVirtualization && inputValue !== '' && this.getModuleName() !== 'autocomplete' && this.isTyped && !this.allowFiltering) {\n var updatingincrementalindex = false;\n if ((this.viewPortInfo.endIndex >= this.incrementalEndIndex && this.incrementalEndIndex <= this.totalItemCount) || this.incrementalEndIndex == 0) {\n updatingincrementalindex = true;\n this.incrementalStartIndex = this.incrementalEndIndex;\n if (this.incrementalEndIndex == 0) {\n this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;\n }\n else {\n this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;\n }\n this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);\n updatingincrementalindex = true;\n }\n if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {\n this.updateIncrementalView(0, this.itemCount);\n }\n activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);\n while (isNullOrUndefined(activeItem) && this.incrementalEndIndex < this.totalItemCount) {\n this.incrementalStartIndex = this.incrementalEndIndex;\n this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;\n this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);\n updatingincrementalindex = true;\n if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {\n this.updateIncrementalView(0, this.itemCount);\n }\n activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);\n if (!isNullOrUndefined(activeItem)) {\n break;\n }\n if (isNullOrUndefined(activeItem) && this.incrementalEndIndex >= this.totalItemCount) {\n this.incrementalStartIndex = 0;\n this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;\n break;\n }\n }\n if (activeItem.index) {\n if ((!(this.viewPortInfo.startIndex >= activeItem.index)) || (!(activeItem.index >= this.viewPortInfo.endIndex))) {\n var startIndex = activeItem.index - ((this.itemCount / 2) - 2) > 0 ? activeItem.index - ((this.itemCount / 2) - 2) : 0;\n var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;\n if (startIndex != this.viewPortInfo.startIndex) {\n this.updateIncrementalView(startIndex, endIndex);\n }\n }\n }\n if (!isNullOrUndefined(activeItem.item)) {\n var index_1 = this.getIndexByValue(activeItem.item.getAttribute('data-value')) - this.skeletonCount;\n if (index_1 > this.itemCount / 2) {\n var startIndex = this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) < this.totalItemCount ? this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) : this.totalItemCount;\n var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;\n this.updateIncrementalView(startIndex, endIndex);\n }\n activeItem.item = this.getElementByValue(activeItem.item.getAttribute('data-value'));\n }\n else {\n this.updateIncrementalView(0, this.itemCount);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();\n this.list.scrollTop = 0;\n }\n if (activeItem && activeItem.item) {\n activeItem.item = this.getElementByValue(activeItem.item.getAttribute('data-value'));\n }\n }\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 if (!this.enableVirtualization) {\n this.list.scrollTop = count * height + fixedHead;\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();\n if (this.enableVirtualization && !this.fields.groupBy) {\n var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? activeElement.offsetTop + (this.virtualListInfo.startIndex * activeElement.offsetHeight) : activeElement.offsetTop;\n this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * activeElement.offsetHeight);\n }\n }\n addClass([activeElement], dropDownListClasses.focus);\n }\n }\n else {\n if (this.isSelectCustom && this.inputElement.value.trim() !== '') {\n this.removeFocus();\n if (!this.enableVirtualization) {\n this.list.scrollTop = 0;\n }\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 }, !this.allowCustom);\n }\n };\n /**\n * Shows the spinner loader.\n *\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 *\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, isHover);\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 }\n if (this.isFiltering() && !isNullOrUndefined(e) && e.target === this.inputWrapper.clearButton) {\n this.searchLists(e);\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 if (!isNullOrUndefined(this.list)) {\n if (!this.enableVirtualization) {\n this.list.scrollTop = 0;\n }\n var focusItem = this.list.querySelector('.' + dropDownListClasses.li);\n this.setHoverList(focusItem);\n }\n }\n else {\n this.activeIndex = null;\n this.removeSelection();\n if (this.liCollections && this.liCollections.length > 0 && !this.isCustomFilter) {\n this.removeFocus();\n }\n }\n };\n ComboBox.prototype.incrementalSearch = function (e) {\n this.showPopup(e);\n if (!isNullOrUndefined(this.listData)) {\n this.inlineSearch(e);\n e.preventDefault();\n }\n };\n ComboBox.prototype.setAutoFillSelection = function (currentValue, isKeyNavigate) {\n if (isKeyNavigate === void 0) { isKeyNavigate = false; }\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 if (isKeyNavigate) {\n Input.setValue(currentValue, this.inputElement, this.floatLabelType, this.showClearButton);\n this.inputElement.setSelectionRange(0, this.inputElement.value.length);\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.onBlurHandler);\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 EventHandler.remove(window, 'resize', this.windowResize);\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(e);\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 ComboBox.prototype.targetFocus = function (e) {\n if (Browser.isDevice && !this.allowFiltering) {\n this.preventFocus = false;\n }\n this.onFocus(e);\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n };\n ComboBox.prototype.dropDownClick = function (e) {\n e.preventDefault();\n if (Browser.isDevice && !this.isFiltering()) {\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 // eslint-disable-next-line max-len\n var 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 *\n * @param {ComboBoxModel} newProp - Returns the dynamic property value of the component.\n * @param {ComboBoxModel} oldProp - Returns the previous property value of the component.\n * @private\n * @returns {void}\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 this.setReadOnly();\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 // eslint-disable-next-line max-len\n var 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 /**\n * To initialize the control rendering.\n *\n * @private\n * @returns {void}\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 * Return the module name of this component.\n *\n * @private\n * @returns {string} Return the module name of this component.\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 *\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 * @returns {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 *\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 * @returns {void}\n\n */\n ComboBox.prototype.filter = function (dataSource, query, fields) {\n _super.prototype.filter.call(this, dataSource, query, fields);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Opens the popup that displays the list of items.\n *\n * @returns {void}\n\n */\n ComboBox.prototype.showPopup = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n _super.prototype.showPopup.call(this, e);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Hides the popup if it is in open state.\n *\n * @returns {void}\n\n */\n ComboBox.prototype.hidePopup = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\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 = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : null;\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 dataSource = this.sortedData;\n var type = this.typeOfData(dataSource).typeof;\n var searchItem = Search(this.inputElement.value, this.liCollections, 'Equal', true, dataSource, this.fields, type);\n this.selectedLI = searchItem.item;\n if (isNullOrUndefined(searchItem.index)) {\n searchItem.index = Search(this.inputElement.value, this.liCollections, 'StartsWith', true, dataSource, this.fields, type).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 *\n * @returns {void}\n */\n ComboBox.prototype.focusIn = function () {\n if (!this.enabled) {\n return;\n }\n if (Browser.isDevice && !this.isFiltering()) {\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 *\n * @returns {void}\n\n */\n ComboBox.prototype.clear = function () {\n this.value = null;\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Moves the focus from the component if the component is already focused.\n *\n * @returns {void}\n\n */\n ComboBox.prototype.focusOut = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n _super.prototype.focusOut.call(this, e);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets all the list items bound on this component.\n *\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 *\n * @param { string | number } value - Specifies the value of the list item.\n * @returns {Object}\n\n */\n ComboBox.prototype.getDataByValue = function (value) {\n return _super.prototype.getDataByValue.call(this, value);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\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","import { isNullOrUndefined, extend, addClass, removeClass } from '@syncfusion/ej2-base';\nimport { attributes as addAttributes } from '@syncfusion/ej2-base';\nimport { rowDataBound, queryCellInfo } from '../base/constant';\nimport { setStyleAndAttributes, getObject, extendObjWithFn, applyStickyLeftRightPosition, groupCaptionRowLeftRightPos, resetColspanGroupCaption } from '../base/util';\nimport { CellType } from '../base/enum';\nimport { CellMergeRender } from './cell-merge-renderer';\nimport * as literals from '../base/string-literals';\n/**\n * RowRenderer class which responsible for building row content.\n *\n * @hidden\n */\nvar RowRenderer = /** @class */ (function () {\n function RowRenderer(serviceLocator, cellType, parent) {\n this.isSpan = false;\n this.cellType = cellType;\n this.serviceLocator = serviceLocator;\n this.parent = parent;\n this.element = this.parent.createElement('tr', { attrs: { role: 'row' } });\n }\n /* eslint-disable */\n /**\n * Function to render the row content based on Column[] and data.\n *\n * @param {Row} row - specifies the row\n * @param {Column[]} columns - specifies the columns\n * @param {Object} attributes - specifies the attributes\n * @param {string} rowTemplate - specifies the rowTemplate\n * @param {Element} cloneNode - specifies the cloneNode\n * @returns {Element} returns the element\n */\n /* eslint-enable */\n RowRenderer.prototype.render = function (row, columns, attributes, rowTemplate, cloneNode) {\n return this.refreshRow(row, columns, attributes, rowTemplate, cloneNode);\n };\n /* eslint-disable */\n /**\n * Function to refresh the row content based on Column[] and data.\n *\n * @param {Row} row - specifies the row\n * @param {Column[]} columns - specifies the column\n * @param {boolean} isChanged - specifies isChanged\n * @param {Object} attributes - specifies the attributes\n * @param {string} rowTemplate - specifies the rowTemplate\n * @returns {void}\n */\n /* eslint-enable */\n RowRenderer.prototype.refresh = function (row, columns, isChanged, attributes, rowTemplate) {\n var _this = this;\n if (isChanged) {\n row.data = extendObjWithFn({}, row.changes);\n this.refreshMergeCells(row);\n }\n var node = this.parent.element.querySelector('[data-uid=' + row.uid + ']');\n var tr = this.refreshRow(row, columns, attributes, rowTemplate, null, isChanged);\n var cells = [].slice.call(tr.cells);\n var tempCells = [].slice.call(node.querySelectorAll('.e-templatecell'));\n if (this.parent.isReact && tempCells.length) {\n var _loop_1 = function (col) {\n if (col.template) {\n setTimeout(function () {\n _this.parent.refreshReactColumnTemplateByUid(col.uid, true);\n }, 0);\n return \"break\";\n }\n };\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var col = columns_1[_i];\n var state_1 = _loop_1(col);\n if (state_1 === \"break\")\n break;\n }\n }\n var attr = [].slice.call(tr.attributes);\n attr.map(function (item) {\n node.setAttribute(item['name'], item['value']);\n });\n node.innerHTML = '';\n for (var _a = 0, cells_1 = cells; _a < cells_1.length; _a++) {\n var cell = cells_1[_a];\n node.appendChild(cell);\n }\n };\n // tslint:disable-next-line:max-func-body-length\n RowRenderer.prototype.refreshRow = function (row, columns, attributes, rowTemplate, cloneNode, isEdit) {\n var tr = !isNullOrUndefined(cloneNode) ? cloneNode : this.element.cloneNode();\n var rowArgs = { data: row.data };\n var cellArgs = { data: row.data };\n var chekBoxEnable = this.parent.getColumns().filter(function (col) { return col.type === 'checkbox' && col.field; })[0];\n var value = false;\n if (chekBoxEnable) {\n value = getObject(chekBoxEnable.field, rowArgs.data);\n }\n var selIndex = this.parent.getSelectedRowIndexes();\n if (row.isDataRow) {\n row.isSelected = selIndex.indexOf(row.index) > -1 || value;\n }\n if (row.isDataRow && this.parent.isCheckBoxSelection\n && this.parent.checkAllRows === 'Check' && (this.parent.enableVirtualization || this.parent.enableInfiniteScrolling)) {\n row.isSelected = true;\n if (selIndex.indexOf(row.index) === -1) {\n selIndex.push(row.index);\n }\n }\n this.buildAttributeFromRow(tr, row);\n addAttributes(tr, extend({}, attributes, {}));\n setStyleAndAttributes(tr, row.attributes);\n var cellRendererFact = this.serviceLocator.getService('cellRendererFactory');\n var _loop_2 = function (i, len) {\n var cell = row.cells[parseInt(i.toString(), 10)];\n cell.isSelected = row.isSelected;\n cell.isColumnSelected = cell.column.isSelected;\n var cellRenderer = cellRendererFact.getCellRenderer(row.cells[parseInt(i.toString(), 10)].cellType\n || CellType.Data);\n var attrs = { 'index': !isNullOrUndefined(row.index) ? row.index.toString() : '' };\n if (row.isExpand && row.cells[parseInt(i.toString(), 10)].cellType === CellType.DetailExpand) {\n attrs['class'] = this_1.parent.isPrinting ? 'e-detailrowcollapse' : 'e-detailrowexpand';\n }\n var td = cellRenderer.render(row.cells[parseInt(i.toString(), 10)], row.data, attrs, row.isExpand, isEdit);\n if (row.cells[parseInt(i.toString(), 10)].cellType !== CellType.Filter) {\n if (row.cells[parseInt(i.toString(), 10)].cellType === CellType.Data\n || row.cells[parseInt(i.toString(), 10)].cellType === CellType.CommandColumn) {\n var isReactChild = this_1.parent.parentDetails && this_1.parent.parentDetails.parentInstObj &&\n this_1.parent.parentDetails.parentInstObj.isReact;\n if (((this_1.parent.isReact && this_1.parent.requireTemplateRef) || (isReactChild &&\n this_1.parent.parentDetails.parentInstObj.requireTemplateRef)) && cell.isTemplate) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var thisRef_1 = this_1;\n thisRef_1.parent.renderTemplates(function () {\n if (typeof (cell.column.template) !== 'string') {\n var ariaAttr = td.getAttribute('aria-label');\n td.setAttribute('aria-label', td.innerText + ariaAttr);\n }\n thisRef_1.parent.trigger(queryCellInfo, extend(cellArgs, {\n cell: td, column: cell.column, colSpan: 1,\n rowSpan: 1, foreignKeyData: row.cells[parseInt(i.toString(), 10)].foreignKeyData,\n requestType: thisRef_1.parent.requestTypeAction\n }));\n });\n }\n else {\n this_1.parent.trigger(queryCellInfo, extend(cellArgs, {\n cell: td, column: cell.column, colSpan: 1,\n rowSpan: 1, foreignKeyData: row.cells[parseInt(i.toString(), 10)].foreignKeyData,\n requestType: this_1.parent.requestTypeAction\n }));\n }\n var isRowSpanned = false;\n if (row.index > 0 && this_1.isSpan) {\n var rowsObject = this_1.parent.getRowsObject();\n var prevRowCells = this_1.parent.groupSettings.columns.length > 0 &&\n !rowsObject[row.index - 1].isDataRow ? rowsObject[row.index].cells : rowsObject[row.index - 1].cells;\n var uid_1 = 'uid';\n var prevRowCell = prevRowCells.filter(function (cell) {\n return cell.column.uid === row.cells[parseInt(i.toString(), 10)].column[\"\" + uid_1];\n })[0];\n isRowSpanned = prevRowCell.isRowSpanned ? prevRowCell.isRowSpanned : prevRowCell.rowSpanRange > 1;\n }\n if (cellArgs.colSpan > 1 || row.cells[parseInt(i.toString(), 10)].cellSpan > 1 || cellArgs.rowSpan > 1\n || 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[parseInt(i.toString(), 10)].isSpanned) {\n tr.appendChild(td);\n }\n }\n };\n var this_1 = this;\n for (var i = 0, len = row.cells.length; i < len; i++) {\n _loop_2(i, len);\n }\n var emptyColspan = 0;\n if (this.parent.groupSettings.columns.length && this.parent.getFrozenLeftColumnsCount()) {\n if (tr.classList.contains('e-groupcaptionrow')) {\n var freezeCells = [].slice.call(tr.querySelectorAll('.e-leftfreeze,.e-unfreeze,.e-rightfreeze,.e-fixedfreeze,.e-freezerightborder,.e-freezeleftborder'));\n if (freezeCells.length) {\n removeClass(freezeCells, ['e-leftfreeze', 'e-unfreeze', 'e-rightfreeze', 'e-fixedfreeze', 'e-freezerightborder', 'e-freezeleftborder']);\n }\n if (tr.querySelector('.e-summarycell')) {\n groupCaptionRowLeftRightPos(tr, this.parent);\n }\n else {\n for (var j = 0; j < tr.childNodes.length; j++) {\n var td = tr.childNodes[parseInt(j.toString(), 10)];\n td.classList.add('e-leftfreeze');\n applyStickyLeftRightPosition(td, j * 30, this.parent.enableRtl, 'Left');\n if (td.classList.contains('e-groupcaption')) {\n var oldColspan = parseInt(td.getAttribute('colspan'), 10);\n var colspan = resetColspanGroupCaption(this.parent, j);\n td.setAttribute('colspan', colspan.toString());\n emptyColspan = oldColspan - colspan;\n }\n }\n if (emptyColspan) {\n var td = this.parent.createElement('TD', {\n className: 'e-groupcaption',\n attrs: { colspan: emptyColspan.toString(), id: this.parent.element.id + 'captioncell', tabindex: '-1' }\n });\n tr.appendChild(td);\n }\n }\n }\n if (tr.querySelectorAll('.e-leftfreeze').length &&\n (tr.querySelectorAll('.e-indentcell').length || tr.querySelectorAll('.e-grouptopleftcell').length)) {\n var td = tr.querySelectorAll('.e-indentcell, .e-grouptopleftcell');\n for (var i = 0; i < td.length; i++) {\n td[parseInt(i.toString(), 10)].classList.add('e-leftfreeze');\n applyStickyLeftRightPosition(td[parseInt(i.toString(), 10)], i * 30, this.parent.enableRtl, 'Left');\n }\n }\n }\n var args = { row: tr, rowHeight: this.parent.rowHeight };\n if (row.isDataRow) {\n var eventArg_1 = extend(rowArgs, args);\n eventArg_1.isSelectable = true;\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n var cellTemplate = eventArg_1.row.querySelectorAll('.e-templatecell');\n if (((this.parent.isReact && this.parent.requireTemplateRef) || (isReactChild &&\n this.parent.parentDetails.parentInstObj.requireTemplateRef)) && cellTemplate.length) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var thisRef_2 = this;\n thisRef_2.parent.renderTemplates(function () {\n thisRef_2.parent.trigger(rowDataBound, eventArg_1);\n if (!eventArg_1.isSelectable) {\n row.isSelectable = eventArg_1.isSelectable;\n thisRef_2.disableRowSelection(thisRef_2, row, args, eventArg_1);\n }\n });\n }\n else {\n this.parent.trigger(rowDataBound, eventArg_1);\n }\n row.isSelectable = eventArg_1.isSelectable;\n var isDraggable = this.parent.isRowDragable();\n if (this.parent.allowPaging && this.parent.selectionSettings.persistSelection) {\n var primaryKey_1 = this.parent.getPrimaryKeyFieldNames()[0];\n var pKey_1 = row.data ? row.data[\"\" + primaryKey_1] : null;\n var SelectedRecords = eventArg_1.isSelectable ? this.parent.partialSelectedRecords :\n this.parent.disableSelectedRecords;\n if (!SelectedRecords.some(function (data) { return data[\"\" + primaryKey_1] === pKey_1; })) {\n SelectedRecords.push(row.data);\n }\n }\n if (!eventArg_1.isSelectable) {\n this.disableRowSelection(this, row, args, eventArg_1);\n }\n if (this.parent.childGrid || isDraggable || this.parent.detailTemplate) {\n var td = tr.querySelectorAll('.e-rowcell:not(.e-hide)')[0];\n if (td) {\n td.classList.add('e-detailrowvisible');\n }\n }\n }\n if (this.parent.enableVirtualization) {\n rowArgs.rowHeight = this.parent.rowHeight;\n }\n if (rowArgs.rowHeight) {\n tr.style.height = rowArgs.rowHeight + 'px';\n }\n else if (this.parent.rowHeight && (tr.querySelector('.e-headercell') || tr.querySelector('.e-groupcaption'))) {\n tr.style.height = this.parent.rowHeight + 'px';\n }\n if (row.cssClass) {\n tr.classList.add(row.cssClass);\n }\n if (row.lazyLoadCssClass) {\n tr.classList.add(row.lazyLoadCssClass);\n }\n if (this.parent.rowRenderingMode === 'Vertical' && this.parent.allowTextWrap && (this.parent.textWrapSettings.wrapMode === 'Header'\n || this.parent.textWrapSettings.wrapMode === 'Both')) {\n tr.classList.add('e-verticalwrap');\n }\n var vFTable = this.parent.enableColumnVirtualization;\n if (!vFTable && this.parent.aggregates.length && this.parent.element.scrollHeight > this.parent.height) {\n for (var i = 0; i < this.parent.aggregates.length; i++) {\n var property = 'properties';\n var column = 'columns';\n if (this.parent.aggregates[parseInt(i.toString(), 10)][\"\" + property][\"\" + column][0].footerTemplate) {\n var summarycell = [].slice.call(tr.getElementsByClassName('e-summarycell'));\n if (summarycell.length) {\n var lastSummaryCell = (summarycell[summarycell.length - 1]);\n addClass([lastSummaryCell], ['e-lastsummarycell']);\n var firstSummaryCell = (summarycell[0]);\n addClass([firstSummaryCell], ['e-firstsummarycell']);\n }\n }\n }\n }\n return tr;\n };\n RowRenderer.prototype.disableRowSelection = function (thisRef, row, args, eventArg) {\n var selIndex = this.parent.getSelectedRowIndexes();\n this.parent.selectionModule.isPartialSelection = true;\n row.isSelected = false;\n var selRowIndex = selIndex.indexOf(row.index);\n if (selRowIndex > -1) {\n selIndex.splice(selRowIndex, 1);\n }\n var chkBox = args.row.querySelectorAll('.e-rowcell.e-gridchkbox');\n var isDrag = eventArg.row.querySelector('.e-rowdragdrop');\n var cellIdx = thisRef.parent.groupSettings.columns.length + (isDrag || thisRef.parent.isDetail() ? 1 : 0);\n for (var i = 0; i < chkBox.length; i++) {\n chkBox[parseInt(i.toString(), 10)].firstElementChild.classList.add('e-checkbox-disabled');\n chkBox[parseInt(i.toString(), 10)].querySelector('.e-frame').classList.remove('e-check');\n }\n if (row.cells.length) {\n for (var i = cellIdx; i < row.cells.length; i++) {\n var cell = eventArg.row.querySelector('.e-rowcell[data-colindex=\"' + row.cells[parseInt(i.toString(), 10)].index + '\"]');\n if (cell) {\n removeClass([cell], ['e-selectionbackground', 'e-active']);\n }\n }\n }\n if (isDrag) {\n removeClass([isDrag], ['e-selectionbackground', 'e-active']);\n }\n };\n ;\n RowRenderer.prototype.refreshMergeCells = function (row) {\n for (var _i = 0, _a = row.cells; _i < _a.length; _i++) {\n var cell = _a[_i];\n cell.isSpanned = false;\n }\n return row;\n };\n /* eslint-disable */\n /**\n * Function to check and add alternative row css class.\n *\n * @param {Element} tr - specifies the tr element\n * @param {Row} row - specifies the row\n * @returns {void}\n */\n /* eslint-enable */\n RowRenderer.prototype.buildAttributeFromRow = function (tr, row) {\n var attr = {};\n var prop = { 'rowindex': literals.dataRowIndex, 'dataUID': 'data-uid', 'ariaSelected': 'aria-selected' };\n var classes = [];\n if (row.isDataRow) {\n classes.push(literals.row);\n }\n if (row.isAltRow) {\n classes.push('e-altrow');\n }\n if (row.isCaptionRow) {\n classes.push('e-groupcaptionrow');\n }\n if (row.isAggregateRow && row.parentUid) {\n classes.push('e-groupfooterrow');\n }\n if (!isNullOrUndefined(row.index)) {\n attr[literals.ariaRowIndex] = row.index + 1;\n attr[prop.rowindex] = row.index;\n }\n if (row.rowSpan) {\n attr.rowSpan = row.rowSpan;\n }\n if (row.uid) {\n attr[prop.dataUID] = row.uid;\n }\n if (row.isSelected) {\n attr[prop.ariaSelected] = true;\n }\n if (row.visible === false) {\n classes.push('e-hide');\n }\n attr.class = classes;\n setStyleAndAttributes(tr, attr);\n };\n return RowRenderer;\n}());\nexport { RowRenderer };\n","import { isNullOrUndefined, getValue, setValue } from '@syncfusion/ej2-base';\nimport { Row } from '../models/row';\nimport { CellType } from '../base/enum';\nimport { Cell } from '../models/cell';\nimport { getUid } from '../base/util';\nimport { getForeignData } from '../../grid/base/util';\nimport * as events from '../base/constant';\n/**\n * RowModelGenerator is used to generate grid data rows.\n *\n * @hidden\n */\nvar RowModelGenerator = /** @class */ (function () {\n /**\n * Constructor for header renderer module\n *\n * @param {IGrid} parent - specifies the IGrid\n */\n function RowModelGenerator(parent) {\n this.parent = parent;\n }\n RowModelGenerator.prototype.generateRows = function (data, args) {\n var rows = [];\n var startIndex = this.parent.enableVirtualization && args ? args.startIndex : 0;\n startIndex = this.parent.enableInfiniteScrolling && args ? this.getInfiniteIndex(args) : startIndex;\n if (this.parent.enableImmutableMode && args && args.startIndex) {\n startIndex = args.startIndex;\n }\n for (var i = 0, len = Object.keys(data).length; i < len; i++, startIndex++) {\n rows[parseInt(i.toString(), 10)] = this.generateRow(data[parseInt(i.toString(), 10)], startIndex);\n }\n return rows;\n };\n RowModelGenerator.prototype.ensureColumns = function () {\n //TODO: generate dummy column for group, detail here;\n var cols = [];\n if (this.parent.detailTemplate || this.parent.childGrid) {\n var args = {};\n this.parent.notify(events.detailIndentCellInfo, args);\n cols.push(this.generateCell(args, null, CellType.DetailExpand));\n }\n if (this.parent.isRowDragable()) {\n cols.push(this.generateCell({}, null, CellType.RowDragIcon));\n }\n return cols;\n };\n RowModelGenerator.prototype.generateRow = function (data, index, cssClass, indent, pid, tIndex, parentUid) {\n var options = {};\n options.foreignKeyData = {};\n options.uid = getUid('grid-row');\n options.data = data;\n options.index = index;\n options.indent = indent;\n options.tIndex = tIndex;\n options.isDataRow = true;\n options.parentGid = pid;\n options.parentUid = parentUid;\n if (this.parent.isPrinting) {\n if (this.parent.hierarchyPrintMode === 'All') {\n options.isExpand = true;\n }\n else if (this.parent.hierarchyPrintMode === 'Expanded' && this.parent.expandedRows && this.parent.expandedRows[parseInt(index.toString(), 10)]) {\n options.isExpand = this.parent.expandedRows[parseInt(index.toString(), 10)].isExpand;\n }\n }\n options.cssClass = cssClass;\n options.isAltRow = this.parent.enableAltRow ? index % 2 !== 0 : false;\n options.isAltRow = this.parent.enableAltRow ? index % 2 !== 0 : false;\n options.isSelected = this.parent.getSelectedRowIndexes().indexOf(index) > -1;\n this.refreshForeignKeyRow(options);\n var cells = this.ensureColumns();\n var row = new Row(options, this.parent);\n row.cells = this.parent.getFrozenMode() === 'Right' ? this.generateCells(options).concat(cells)\n : cells.concat(this.generateCells(options));\n return row;\n };\n RowModelGenerator.prototype.refreshForeignKeyRow = function (options) {\n var foreignKeyColumns = this.parent.getForeignKeyColumns();\n for (var i = 0; i < foreignKeyColumns.length; i++) {\n setValue(foreignKeyColumns[parseInt(i.toString(), 10)].field, getForeignData(foreignKeyColumns[parseInt(i.toString(), 10)], options.data), options.foreignKeyData);\n }\n };\n RowModelGenerator.prototype.generateCells = function (options) {\n var dummies = this.parent.getColumns();\n var tmp = [];\n for (var i = 0; i < dummies.length; i++) {\n tmp.push(this.generateCell(dummies[parseInt(i.toString(), 10)], options.uid, isNullOrUndefined(dummies[parseInt(i.toString(), 10)].commands) ? undefined : CellType.CommandColumn, null, i, options.foreignKeyData));\n }\n return tmp;\n };\n /**\n *\n * @param {Column} column - Defines column details\n * @param {string} rowId - Defines row id\n * @param {CellType} cellType - Defines cell type\n * @param {number} colSpan - Defines colSpan\n * @param {number} oIndex - Defines index\n * @param {Object} foreignKeyData - Defines foreign key data\n * @returns {Cell} returns cell model\n * @hidden\n */\n RowModelGenerator.prototype.generateCell = function (column, rowId, cellType, colSpan, oIndex, foreignKeyData) {\n var opt = {\n 'visible': column.visible,\n 'isDataCell': !isNullOrUndefined(column.field || column.template),\n 'isTemplate': !isNullOrUndefined(column.template),\n 'rowID': rowId,\n 'column': column,\n 'cellType': !isNullOrUndefined(cellType) ? cellType : CellType.Data,\n 'colSpan': colSpan,\n 'commands': column.commands,\n 'isForeignKey': column.isForeignColumn && column.isForeignColumn(),\n 'foreignKeyData': column.isForeignColumn && column.isForeignColumn() && getValue(column.field, foreignKeyData)\n };\n if (opt.isDataCell || opt.column.type === 'checkbox' || opt.commands) {\n opt.index = oIndex;\n }\n return new Cell(opt);\n };\n RowModelGenerator.prototype.refreshRows = function (input) {\n for (var i = 0; i < input.length; i++) {\n this.refreshForeignKeyRow(input[parseInt(i.toString(), 10)]);\n input[parseInt(i.toString(), 10)].cells = this.generateCells(input[parseInt(i.toString(), 10)]);\n }\n return input;\n };\n RowModelGenerator.prototype.getInfiniteIndex = function (args) {\n return args.requestType === 'infiniteScroll' || args.requestType === 'delete' || args.action === 'add'\n ? (isNullOrUndefined(args.startIndex) ? args['index'] : args.startIndex) : 0;\n };\n return RowModelGenerator;\n}());\nexport { RowModelGenerator };\n","/**\n * Defines types of Cell\n *\n * @hidden\n */\nexport var CellType;\n(function (CellType) {\n /** Defines CellType as Data */\n CellType[CellType[\"Data\"] = 0] = \"Data\";\n /** Defines CellType as Header */\n CellType[CellType[\"Header\"] = 1] = \"Header\";\n /** Defines CellType as Summary */\n CellType[CellType[\"Summary\"] = 2] = \"Summary\";\n /** Defines CellType as GroupSummary */\n CellType[CellType[\"GroupSummary\"] = 3] = \"GroupSummary\";\n /** Defines CellType as CaptionSummary */\n CellType[CellType[\"CaptionSummary\"] = 4] = \"CaptionSummary\";\n /** Defines CellType as Filter */\n CellType[CellType[\"Filter\"] = 5] = \"Filter\";\n /** Defines CellType as Indent */\n CellType[CellType[\"Indent\"] = 6] = \"Indent\";\n /** Defines CellType as GroupCaption */\n CellType[CellType[\"GroupCaption\"] = 7] = \"GroupCaption\";\n /** Defines CellType as GroupCaptionEmpty */\n CellType[CellType[\"GroupCaptionEmpty\"] = 8] = \"GroupCaptionEmpty\";\n /** Defines CellType as Expand */\n CellType[CellType[\"Expand\"] = 9] = \"Expand\";\n /** Defines CellType as HeaderIndent */\n CellType[CellType[\"HeaderIndent\"] = 10] = \"HeaderIndent\";\n /** Defines CellType as StackedHeader */\n CellType[CellType[\"StackedHeader\"] = 11] = \"StackedHeader\";\n /** Defines CellType as DetailHeader */\n CellType[CellType[\"DetailHeader\"] = 12] = \"DetailHeader\";\n /** Defines CellType as DetailExpand */\n CellType[CellType[\"DetailExpand\"] = 13] = \"DetailExpand\";\n /** Defines CellType as CommandColumn */\n CellType[CellType[\"CommandColumn\"] = 14] = \"CommandColumn\";\n /** Defines CellType as DetailFooterIntent */\n CellType[CellType[\"DetailFooterIntent\"] = 15] = \"DetailFooterIntent\";\n /** Defines CellType as RowDrag */\n CellType[CellType[\"RowDragIcon\"] = 16] = \"RowDragIcon\";\n /** Defines CellType as RowDragHeader */\n CellType[CellType[\"RowDragHIcon\"] = 17] = \"RowDragHIcon\";\n})(CellType || (CellType = {}));\n/**\n * Defines types of Render\n *\n * @hidden\n */\nexport var RenderType;\n(function (RenderType) {\n /** Defines RenderType as Header */\n RenderType[RenderType[\"Header\"] = 0] = \"Header\";\n /** Defines RenderType as Content */\n RenderType[RenderType[\"Content\"] = 1] = \"Content\";\n /** Defines RenderType as Summary */\n RenderType[RenderType[\"Summary\"] = 2] = \"Summary\";\n})(RenderType || (RenderType = {}));\n/**\n * Defines Predefined toolbar items.\n *\n * @hidden\n */\nexport var ToolbarItem;\n(function (ToolbarItem) {\n ToolbarItem[ToolbarItem[\"Add\"] = 0] = \"Add\";\n ToolbarItem[ToolbarItem[\"Edit\"] = 1] = \"Edit\";\n ToolbarItem[ToolbarItem[\"Update\"] = 2] = \"Update\";\n ToolbarItem[ToolbarItem[\"Delete\"] = 3] = \"Delete\";\n ToolbarItem[ToolbarItem[\"Cancel\"] = 4] = \"Cancel\";\n ToolbarItem[ToolbarItem[\"Print\"] = 5] = \"Print\";\n ToolbarItem[ToolbarItem[\"Search\"] = 6] = \"Search\";\n ToolbarItem[ToolbarItem[\"ColumnChooser\"] = 7] = \"ColumnChooser\";\n ToolbarItem[ToolbarItem[\"PdfExport\"] = 8] = \"PdfExport\";\n ToolbarItem[ToolbarItem[\"ExcelExport\"] = 9] = \"ExcelExport\";\n ToolbarItem[ToolbarItem[\"CsvExport\"] = 10] = \"CsvExport\";\n ToolbarItem[ToolbarItem[\"WordExport\"] = 11] = \"WordExport\";\n})(ToolbarItem || (ToolbarItem = {}));\n/**\n * Defines types of responsive dialogs\n *\n * @hidden\n */\nexport var ResponsiveDialogAction;\n(function (ResponsiveDialogAction) {\n /** Defines dialog type as Edit */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isEdit\"] = 0] = \"isEdit\";\n /** Defines dialog type as Add */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isAdd\"] = 1] = \"isAdd\";\n /** Defines dialog type as Sort */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isSort\"] = 2] = \"isSort\";\n /** Defines dialog type as Filter */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isFilter\"] = 3] = \"isFilter\";\n /** Defines dialog type as ColMenu */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isColMenu\"] = 4] = \"isColMenu\";\n /** Defines dialog type as ColumChooser */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isColumnChooser\"] = 5] = \"isColumnChooser\";\n})(ResponsiveDialogAction || (ResponsiveDialogAction = {}));\n/**\n * Defines responsive toolbar actions\n *\n * @hidden\n */\nexport var ResponsiveToolbarAction;\n(function (ResponsiveToolbarAction) {\n /** Defines initial responsive toolbar buttons */\n ResponsiveToolbarAction[ResponsiveToolbarAction[\"isInitial\"] = 0] = \"isInitial\";\n /** Defines responsive toolbar search */\n ResponsiveToolbarAction[ResponsiveToolbarAction[\"isSearch\"] = 1] = \"isSearch\";\n})(ResponsiveToolbarAction || (ResponsiveToolbarAction = {}));\n","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 { Touch, Component, EventHandler, selectAll, getUniqueID, removeClass } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, Property, Browser, detach, createElement as buildTag } from '@syncfusion/ej2-base';\nimport { classList, isNullOrUndefined } from '@syncfusion/ej2-base';\nvar CLS_ROOT = 'e-vscroll';\nvar CLS_RTL = 'e-rtl';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_VSCROLLBAR = 'e-vscroll-bar';\nvar CLS_VSCROLLCON = 'e-vscroll-content';\nvar CLS_NAVARROW = 'e-nav-arrow';\nvar CLS_NAVUPARROW = 'e-nav-up-arrow';\nvar CLS_NAVDOWNARROW = 'e-nav-down-arrow';\nvar CLS_VSCROLLNAV = 'e-scroll-nav';\nvar CLS_VSCROLLNAVUP = 'e-scroll-up-nav';\nvar CLS_VSCROLLNAVDOWN = 'e-scroll-down-nav';\nvar CLS_DEVICE = 'e-scroll-device';\nvar CLS_OVERLAY = 'e-scroll-overlay';\nvar CLS_UPOVERLAY = 'e-scroll-up-overlay';\nvar CLS_DOWNOVERLAY = 'e-scroll-down-overlay';\nvar OVERLAY_MAXWID = 40;\n/**\n * VScroll module is introduces vertical scroller when content exceeds the current viewing area.\n * It can be useful for the components like Toolbar, Tab which needs vertical scrolling alone.\n * Hidden content can be view by touch moving or icon click.\n * ```html\n * \n * \n * ```\n */\nvar VScroll = /** @class */ (function (_super) {\n __extends(VScroll, _super);\n /**\n * Initializes a new instance of the VScroll class.\n *\n * @param {VScrollModel} options - Specifies VScroll model properties as options.\n * @param {string | HTMLElement} element - Specifies the element for which vertical scrolling applies.\n */\n function VScroll(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\n */\n VScroll.prototype.preRender = function () {\n this.browser = Browser.info.name;\n this.browserCheck = this.browser === 'mozilla';\n this.isDevice = Browser.isDevice;\n this.customStep = true;\n var ele = this.element;\n this.ieCheck = this.browser === 'edge' || this.browser === 'msie';\n this.initialize();\n if (ele.id === '') {\n ele.id = getUniqueID('vscroll');\n this.uniqueId = true;\n }\n ele.style.display = 'block';\n if (this.enableRtl) {\n ele.classList.add(CLS_RTL);\n }\n };\n /**\n * To Initialize the vertical scroll rendering\n *\n * @private\n * @returns {void}\n */\n VScroll.prototype.render = function () {\n this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this), swipe: this.swipeHandler.bind(this) });\n EventHandler.add(this.scrollEle, 'scroll', this.scrollEventHandler, this);\n if (!this.isDevice) {\n this.createNavIcon(this.element);\n }\n else {\n this.element.classList.add(CLS_DEVICE);\n this.createOverlayElement(this.element);\n }\n this.setScrollState();\n EventHandler.add(this.element, 'wheel', this.wheelEventHandler, this);\n };\n VScroll.prototype.setScrollState = function () {\n if (isNullOrUndefined(this.scrollStep) || this.scrollStep < 0) {\n this.scrollStep = this.scrollEle.offsetHeight;\n this.customStep = false;\n }\n else {\n this.customStep = true;\n }\n };\n VScroll.prototype.initialize = function () {\n var scrollCnt = buildTag('div', { className: CLS_VSCROLLCON });\n var scrollBar = buildTag('div', { className: CLS_VSCROLLBAR });\n scrollBar.setAttribute('tabindex', '-1');\n var ele = this.element;\n var innerEle = [].slice.call(ele.children);\n for (var _i = 0, innerEle_1 = innerEle; _i < innerEle_1.length; _i++) {\n var ele_1 = innerEle_1[_i];\n scrollCnt.appendChild(ele_1);\n }\n scrollBar.appendChild(scrollCnt);\n ele.appendChild(scrollBar);\n scrollBar.style.overflow = 'hidden';\n this.scrollEle = scrollBar;\n this.scrollItems = scrollCnt;\n };\n VScroll.prototype.getPersistData = function () {\n var keyEntity = ['scrollStep'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Returns the current module name.\n *\n * @returns {string} - It returns the current module name.\n * @private\n */\n VScroll.prototype.getModuleName = function () {\n return 'vScroll';\n };\n /**\n * Removes the control from the DOM and also removes all its related events.\n *\n * @returns {void}\n */\n VScroll.prototype.destroy = function () {\n var el = this.element;\n el.style.display = '';\n removeClass([this.element], [CLS_ROOT, CLS_DEVICE, CLS_RTL]);\n var navs = selectAll('.e-' + el.id + '_nav.' + CLS_VSCROLLNAV, el);\n var overlays = selectAll('.' + CLS_OVERLAY, el);\n [].slice.call(overlays).forEach(function (ele) {\n detach(ele);\n });\n for (var _i = 0, _a = [].slice.call(this.scrollItems.children); _i < _a.length; _i++) {\n var elem = _a[_i];\n el.appendChild(elem);\n }\n if (this.uniqueId) {\n this.element.removeAttribute('id');\n }\n detach(this.scrollEle);\n if (navs.length > 0) {\n detach(navs[0]);\n if (!isNullOrUndefined(navs[1])) {\n detach(navs[1]);\n }\n }\n EventHandler.remove(this.scrollEle, 'scroll', this.scrollEventHandler);\n this.touchModule.destroy();\n this.touchModule = null;\n _super.prototype.destroy.call(this);\n };\n /**\n * Specifies the value to disable/enable the VScroll component.\n * When set to `true` , the component will be disabled.\n *\n * @param {boolean} value - Based on this Boolean value, VScroll will be enabled (false) or disabled (true).\n * @returns {void}.\n */\n VScroll.prototype.disable = function (value) {\n var navEle = selectAll('.e-scroll-nav:not(.' + CLS_DISABLE + ')', this.element);\n if (value) {\n this.element.classList.add(CLS_DISABLE);\n }\n else {\n this.element.classList.remove(CLS_DISABLE);\n }\n [].slice.call(navEle).forEach(function (el) {\n el.setAttribute('tabindex', !value ? '0' : '-1');\n });\n };\n VScroll.prototype.createOverlayElement = function (element) {\n var id = element.id.concat('_nav');\n var downOverlayEle = buildTag('div', { className: CLS_OVERLAY + ' ' + CLS_DOWNOVERLAY });\n var clsDown = 'e-' + element.id.concat('_nav ' + CLS_VSCROLLNAV + ' ' + CLS_VSCROLLNAVDOWN);\n var downEle = buildTag('div', { id: id.concat('down'), className: clsDown });\n var navItem = buildTag('div', { className: CLS_NAVDOWNARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n downEle.appendChild(navItem);\n var upEle = buildTag('div', { className: CLS_OVERLAY + ' ' + CLS_UPOVERLAY });\n if (this.ieCheck) {\n downEle.classList.add('e-ie-align');\n }\n element.appendChild(downOverlayEle);\n element.appendChild(downEle);\n element.insertBefore(upEle, element.firstChild);\n this.eventBinding([downEle]);\n };\n VScroll.prototype.createNavIcon = function (element) {\n var id = element.id.concat('_nav');\n var clsDown = 'e-' + element.id.concat('_nav ' + CLS_VSCROLLNAV + ' ' + CLS_VSCROLLNAVDOWN);\n var nav = buildTag('div', { id: id.concat('_down'), className: clsDown });\n nav.setAttribute('aria-disabled', 'false');\n var navItem = buildTag('div', { className: CLS_NAVDOWNARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n var clsUp = 'e-' + element.id.concat('_nav ' + CLS_VSCROLLNAV + ' ' + CLS_VSCROLLNAVUP);\n var navElement = buildTag('div', { id: id.concat('_up'), className: clsUp + ' ' + CLS_DISABLE });\n navElement.setAttribute('aria-disabled', 'true');\n var navUpItem = buildTag('div', { className: CLS_NAVUPARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n navElement.appendChild(navUpItem);\n nav.appendChild(navItem);\n nav.setAttribute('tabindex', '0');\n element.appendChild(nav);\n element.insertBefore(navElement, element.firstChild);\n if (this.ieCheck) {\n nav.classList.add('e-ie-align');\n navElement.classList.add('e-ie-align');\n }\n this.eventBinding([nav, navElement]);\n };\n VScroll.prototype.onKeyPress = function (ev) {\n var _this = this;\n if (ev.key === 'Enter') {\n var timeoutFun_1 = function () {\n _this.keyTimeout = true;\n _this.eleScrolling(10, ev.target, true);\n };\n this.keyTimer = window.setTimeout(function () {\n timeoutFun_1();\n }, 100);\n }\n };\n VScroll.prototype.onKeyUp = function (ev) {\n if (ev.key !== 'Enter') {\n return;\n }\n if (this.keyTimeout) {\n this.keyTimeout = false;\n }\n else {\n ev.target.click();\n }\n clearTimeout(this.keyTimer);\n };\n VScroll.prototype.eventBinding = function (element) {\n var _this = this;\n [].slice.call(element).forEach(function (ele) {\n new Touch(ele, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });\n ele.addEventListener('keydown', _this.onKeyPress.bind(_this));\n ele.addEventListener('keyup', _this.onKeyUp.bind(_this));\n ele.addEventListener('mouseup', _this.repeatScroll.bind(_this));\n ele.addEventListener('touchend', _this.repeatScroll.bind(_this));\n ele.addEventListener('contextmenu', function (e) {\n e.preventDefault();\n });\n EventHandler.add(ele, 'click', _this.clickEventHandler, _this);\n });\n };\n VScroll.prototype.repeatScroll = function () {\n clearInterval(this.timeout);\n };\n VScroll.prototype.tabHoldHandler = function (ev) {\n var _this = this;\n var trgt = ev.originalEvent.target;\n trgt = this.contains(trgt, CLS_VSCROLLNAV) ? trgt.firstElementChild : trgt;\n var scrollDistance = 10;\n var timeoutFun = function () {\n _this.eleScrolling(scrollDistance, trgt, true);\n };\n this.timeout = window.setInterval(function () {\n timeoutFun();\n }, 50);\n };\n VScroll.prototype.contains = function (element, className) {\n return element.classList.contains(className);\n };\n VScroll.prototype.eleScrolling = function (scrollDis, trgt, isContinuous) {\n var classList = trgt.classList;\n if (classList.contains(CLS_VSCROLLNAV)) {\n classList = trgt.querySelector('.' + CLS_NAVARROW).classList;\n }\n if (classList.contains(CLS_NAVDOWNARROW)) {\n this.frameScrollRequest(scrollDis, 'add', isContinuous);\n }\n else if (classList.contains(CLS_NAVUPARROW)) {\n this.frameScrollRequest(scrollDis, '', isContinuous);\n }\n };\n VScroll.prototype.clickEventHandler = function (event) {\n this.eleScrolling(this.scrollStep, event.target, false);\n };\n VScroll.prototype.wheelEventHandler = function (e) {\n e.preventDefault();\n this.frameScrollRequest(this.scrollStep, (e.deltaY > 0 ? 'add' : ''), false);\n };\n VScroll.prototype.swipeHandler = function (e) {\n var swipeElement = this.scrollEle;\n var distance;\n if (e.velocity <= 1) {\n distance = e.distanceY / (e.velocity * 10);\n }\n else {\n distance = e.distanceY / e.velocity;\n }\n var start = 0.5;\n var animate = function () {\n var step = Math.sin(start);\n if (step <= 0) {\n window.cancelAnimationFrame(step);\n }\n else {\n if (e.swipeDirection === 'Up') {\n swipeElement.scrollTop += distance * step;\n }\n else if (e.swipeDirection === 'Down') {\n swipeElement.scrollTop -= distance * step;\n }\n start -= 0.02;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n VScroll.prototype.scrollUpdating = function (scrollVal, action) {\n if (action === 'add') {\n this.scrollEle.scrollTop += scrollVal;\n }\n else {\n this.scrollEle.scrollTop -= scrollVal;\n }\n };\n VScroll.prototype.frameScrollRequest = function (scrollValue, action, isContinuous) {\n var _this = this;\n var step = 10;\n if (isContinuous) {\n this.scrollUpdating(scrollValue, action);\n return;\n }\n if (!this.customStep) {\n [].slice.call(selectAll('.' + CLS_OVERLAY, this.element)).forEach(function (el) {\n scrollValue -= el.offsetHeight;\n });\n }\n var animate = function () {\n if (scrollValue < step) {\n window.cancelAnimationFrame(step);\n }\n else {\n _this.scrollUpdating(step, action);\n scrollValue -= step;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n VScroll.prototype.touchHandler = function (e) {\n var el = this.scrollEle;\n var distance = e.distanceY;\n if (e.scrollDirection === 'Up') {\n el.scrollTop = el.scrollTop + distance;\n }\n else if (e.scrollDirection === 'Down') {\n el.scrollTop = el.scrollTop - distance;\n }\n };\n VScroll.prototype.arrowDisabling = function (addDisableCls, removeDisableCls) {\n if (this.isDevice) {\n var arrowEle = isNullOrUndefined(addDisableCls) ? removeDisableCls : addDisableCls;\n var arrowIcon = arrowEle.querySelector('.' + CLS_NAVARROW);\n if (isNullOrUndefined(addDisableCls)) {\n classList(arrowIcon, [CLS_NAVDOWNARROW], [CLS_NAVUPARROW]);\n }\n else {\n classList(arrowIcon, [CLS_NAVUPARROW], [CLS_NAVDOWNARROW]);\n }\n }\n else {\n addDisableCls.classList.add(CLS_DISABLE);\n addDisableCls.setAttribute('aria-disabled', 'true');\n addDisableCls.removeAttribute('tabindex');\n removeDisableCls.classList.remove(CLS_DISABLE);\n removeDisableCls.setAttribute('aria-disabled', 'false');\n removeDisableCls.setAttribute('tabindex', '0');\n }\n this.repeatScroll();\n };\n VScroll.prototype.scrollEventHandler = function (e) {\n var target = e.target;\n var height = target.offsetHeight;\n var navUpEle = this.element.querySelector('.' + CLS_VSCROLLNAVUP);\n var navDownEle = this.element.querySelector('.' + CLS_VSCROLLNAVDOWN);\n var upOverlay = this.element.querySelector('.' + CLS_UPOVERLAY);\n var downOverlay = this.element.querySelector('.' + CLS_DOWNOVERLAY);\n var scrollTop = target.scrollTop;\n if (scrollTop <= 0) {\n scrollTop = -scrollTop;\n }\n if (this.isDevice) {\n if (scrollTop < OVERLAY_MAXWID) {\n upOverlay.style.height = scrollTop + 'px';\n }\n else {\n upOverlay.style.height = '40px';\n }\n if ((target.scrollHeight - Math.ceil(height + scrollTop)) < OVERLAY_MAXWID) {\n downOverlay.style.height = (target.scrollHeight - Math.ceil(height + scrollTop)) + 'px';\n }\n else {\n downOverlay.style.height = '40px';\n }\n }\n if (scrollTop === 0) {\n this.arrowDisabling(navUpEle, navDownEle);\n }\n else if (Math.ceil(height + scrollTop + .1) >= target.scrollHeight) {\n this.arrowDisabling(navDownEle, navUpEle);\n }\n else {\n var disEle = this.element.querySelector('.' + CLS_VSCROLLNAV + '.' + CLS_DISABLE);\n if (disEle) {\n disEle.classList.remove(CLS_DISABLE);\n disEle.setAttribute('aria-disabled', 'false');\n disEle.setAttribute('tabindex', '0');\n }\n }\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of property that changed.\n *\n * @param {VScrollModel} newProp - It contains the new value of data.\n * @param {VScrollModel} oldProp - It contains the old value of data.\n * @returns {void}\n * @private\n */\n VScroll.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'scrollStep':\n this.setScrollState();\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n this.element.classList.add(CLS_RTL);\n }\n else {\n this.element.classList.remove(CLS_RTL);\n }\n break;\n }\n }\n };\n __decorate([\n Property(null)\n ], VScroll.prototype, \"scrollStep\", void 0);\n VScroll = __decorate([\n NotifyPropertyChanges\n ], VScroll);\n return VScroll;\n}(Component));\nexport { VScroll };\n","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 { selectAll, select, createElement, Base, detach } from '@syncfusion/ej2-base';\nimport { extend, isNullOrUndefined, EventHandler } from '@syncfusion/ej2-base';\nimport { Property, NotifyPropertyChanges, Event, onIntlChange } from '@syncfusion/ej2-base';\nimport { Internationalization, L10n } from '@syncfusion/ej2-base';\n/**\n * global declarations\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport var regex = {\n /* eslint-disable no-useless-escape */\n EMAIL: new RegExp('^[A-Za-z0-9._%+-]{1,}@[A-Za-z0-9._%+-]{1,}([.]{1}[a-zA-Z0-9]{2,}' +\n '|[.]{1}[a-zA-Z0-9]{2,4}[.]{1}[a-zA-Z0-9]{2,4})$'),\n /* eslint-disable-next-line security/detect-unsafe-regex */\n URL: /^(?:http(s)?:\\/\\/)?[\\w.-]+(?:\\.[\\w\\.-]+)+[\\w\\-\\._~:/?#[\\]@!\\$&'\\(\\)\\*\\+,;=.]+$/m,\n DATE_ISO: new RegExp('^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$'),\n DIGITS: new RegExp('^[0-9]*$'),\n PHONE: new RegExp('^[+]?[0-9]{9,13}$'),\n CREDITCARD: new RegExp('^\\\\d{13,16}$')\n /* eslint-enable no-useless-escape */\n};\n/**\n * ErrorOption values\n *\n * @private\n */\nexport var ErrorOption;\n(function (ErrorOption) {\n /**\n * Defines the error message.\n */\n ErrorOption[ErrorOption[\"Message\"] = 0] = \"Message\";\n /**\n * Defines the error element type.\n */\n ErrorOption[ErrorOption[\"Label\"] = 1] = \"Label\";\n})(ErrorOption || (ErrorOption = {}));\n/**\n * FormValidator class enables you to validate the form fields based on your defined rules\n * ```html\n *
\n * \n * ```\n */\nvar FormValidator = /** @class */ (function (_super) {\n __extends(FormValidator, _super);\n /**\n * Initializes the FormValidator.\n *\n * @param {string | HTMLFormElement} element - Specifies the element to render as component.\n * @param {FormValidatorModel} options - Specifies the FormValidator model.\n * @private\n */\n function FormValidator(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.validated = [];\n _this.errorRules = [];\n _this.allowSubmit = false;\n _this.required = 'required';\n _this.infoElement = null;\n _this.inputElement = null;\n _this.selectQuery = 'input:not([type=reset]):not([type=button]), select, textarea';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _this.localyMessage = {};\n /**\n * Specifies the default messages for validation rules.\n *\n * @default { List of validation message }\n */\n _this.defaultMessages = {\n required: 'This field is required.',\n email: 'Please enter a valid email address.',\n url: 'Please enter a valid URL.',\n date: 'Please enter a valid date.',\n dateIso: 'Please enter a valid date ( ISO ).',\n creditcard: 'Please enter valid card number',\n number: 'Please enter a valid number.',\n digits: 'Please enter only digits.',\n maxLength: 'Please enter no more than {0} characters.',\n minLength: 'Please enter at least {0} characters.',\n rangeLength: 'Please enter a value between {0} and {1} characters long.',\n range: 'Please enter a value between {0} and {1}.',\n max: 'Please enter a value less than or equal to {0}.',\n min: 'Please enter a value greater than or equal to {0}.',\n regex: 'Please enter a correct value.',\n tel: 'Please enter a valid phone number.',\n pattern: 'Please enter a correct pattern value.',\n equalTo: 'Please enter the valid match text'\n };\n if (typeof _this.rules === 'undefined') {\n _this.rules = {};\n }\n _this.l10n = new L10n('formValidator', _this.defaultMessages, _this.locale);\n if (_this.locale) {\n _this.localeFunc();\n }\n onIntlChange.on('notifyExternalChange', _this.afterLocalization, _this);\n element = typeof element === 'string' ? select(element, document) : element;\n // Set novalidate to prevent default HTML5 form validation\n if (_this.element != null) {\n _this.element.setAttribute('novalidate', '');\n _this.inputElements = selectAll(_this.selectQuery, _this.element);\n _this.createHTML5Rules();\n _this.wireEvents();\n }\n else {\n return undefined;\n }\n return _this;\n }\n FormValidator_1 = FormValidator;\n /* eslint-enable @typescript-eslint/no-explicit-any */\n /**\n * Add validation rules to the corresponding input element based on `name` attribute.\n *\n * @param {string} name `name` of form field.\n * @param {Object} rules Validation rules for the corresponding element.\n * @returns {void}\n */\n FormValidator.prototype.addRules = function (name, rules) {\n if (name) {\n // eslint-disable-next-line no-prototype-builtins\n if (this.rules.hasOwnProperty(name)) {\n extend(this.rules[\"\" + name], rules, {});\n }\n else {\n this.rules[\"\" + name] = rules;\n }\n }\n };\n /**\n * Remove validation to the corresponding field based on name attribute.\n * When no parameter is passed, remove all the validations in the form.\n *\n * @param {string} name Input name attribute value.\n * @param {string[]} rules List of validation rules need to be remove from the corresponding element.\n * @returns {void}\n */\n FormValidator.prototype.removeRules = function (name, rules) {\n if (!name && !rules) {\n this.rules = {};\n }\n else if (this.rules[\"\" + name] && !rules) {\n delete this.rules[\"\" + name];\n }\n else if (!isNullOrUndefined(this.rules[\"\" + name] && rules)) {\n for (var i = 0; i < rules.length; i++) {\n delete this.rules[\"\" + name][rules[parseInt(i.toString())]];\n }\n }\n else {\n return;\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Validate the current form values using defined rules.\n * Returns `true` when the form is valid otherwise `false`\n *\n * @param {string} selected - Optional parameter to validate specified element.\n * @returns {boolean}\n */\n FormValidator.prototype.validate = function (selected) {\n var rules = Object.keys(this.rules);\n if (selected && rules.length) {\n this.validateRules(selected);\n //filter the selected element it don't have any valid input element\n return rules.indexOf(selected) !== -1 && this.errorRules.filter(function (data) {\n return data.name === selected;\n }).length === 0;\n }\n else {\n this.errorRules = [];\n for (var _i = 0, rules_1 = rules; _i < rules_1.length; _i++) {\n var name_1 = rules_1[_i];\n this.validateRules(name_1);\n }\n return this.errorRules.length === 0;\n }\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Reset the value of all the fields in form.\n *\n * @returns {void}\n */\n FormValidator.prototype.reset = function () {\n this.element.reset();\n this.clearForm();\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Get input element by name.\n *\n * @param {string} name - Input element name attribute value.\n * @returns {HTMLInputElement}\n */\n FormValidator.prototype.getInputElement = function (name) {\n this.inputElement = (select('[name=\"' + name + '\"]', this.element));\n return this.inputElement;\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Destroy the form validator object and error elements.\n *\n * @returns {void}\n */\n FormValidator.prototype.destroy = function () {\n this.reset();\n this.unwireEvents();\n this.rules = {};\n var elements = selectAll('.' + this.errorClass + ', .' + this.validClass, this.element);\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var element = elements_1[_i];\n detach(element);\n }\n _super.prototype.destroy.call(this);\n this.infoElement = null;\n onIntlChange.off('notifyExternalChange', this.afterLocalization);\n };\n /**\n * @param {FormValidatorModel} newProp - Returns the dynamic property value of the component.\n * @param {FormValidatorModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n FormValidator.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 'locale':\n this.localeFunc();\n break;\n }\n }\n };\n /**\n * @private\n * @returns {void}\n */\n FormValidator.prototype.localeFunc = function () {\n for (var _i = 0, _a = Object.keys(this.defaultMessages); _i < _a.length; _i++) {\n var key = _a[_i];\n this.l10n.setLocale(this.locale);\n var value = this.l10n.getConstant(key);\n this.localyMessage[\"\" + key] = value;\n }\n };\n /**\n * @private\n * @returns {string} - Returns the component name.\n */\n FormValidator.prototype.getModuleName = function () {\n return 'formvalidator';\n };\n /**\n * @param {any} args - Specifies the culture name.\n * @private\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types\n FormValidator.prototype.afterLocalization = function (args) {\n this.locale = args.locale;\n this.localeFunc();\n };\n /**\n * Allows you to refresh the form validator base events to the elements inside the form.\n *\n * @returns {void}\n */\n FormValidator.prototype.refresh = function () {\n this.unwireEvents();\n this.inputElements = selectAll(this.selectQuery, this.element);\n this.wireEvents();\n };\n FormValidator.prototype.clearForm = function () {\n this.errorRules = [];\n this.validated = [];\n var elements = selectAll(this.selectQuery, this.element);\n for (var _i = 0, elements_2 = elements; _i < elements_2.length; _i++) {\n var element = elements_2[_i];\n var input = element;\n input.removeAttribute('aria-invalid');\n var inputParent = input.parentElement;\n var grandParent = inputParent.parentElement;\n if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (input.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {\n inputParent.classList.remove(this.errorClass);\n }\n else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {\n grandParent.classList.remove(this.errorClass);\n }\n else {\n input.classList.remove(this.errorClass);\n }\n if (input.name.length > 0) {\n this.getInputElement(input.name);\n this.getErrorElement(input.name);\n this.hideMessage(input.name);\n }\n if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (input.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {\n inputParent.classList.remove(this.validClass);\n }\n else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {\n grandParent.classList.remove(this.validClass);\n }\n else {\n input.classList.remove(this.validClass);\n }\n }\n };\n FormValidator.prototype.createHTML5Rules = function () {\n var defRules = ['required', 'validateHidden', 'regex', 'rangeLength', 'maxLength', 'minLength', 'dateIso', 'digits',\n 'pattern', 'data-val-required', 'type', 'data-validation', 'min', 'max', 'range', 'equalTo', 'data-val-minlength-min',\n 'data-val-equalto-other', 'data-val-maxlength-max', 'data-val-range-min', 'data-val-regex-pattern', 'data-val-length-max',\n 'data-val-creditcard', 'data-val-phone'];\n var acceptedTypes = ['hidden', 'email', 'url', 'date', 'number', 'tel'];\n for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {\n var input = _a[_i];\n // Default attribute rules\n var allRule = {};\n for (var _b = 0, defRules_1 = defRules; _b < defRules_1.length; _b++) {\n var rule = defRules_1[_b];\n if (input.getAttribute(rule) !== null) {\n switch (rule) {\n case 'required':\n this.defRule(input, allRule, rule, input.required);\n break;\n case 'data-validation':\n rule = input.getAttribute(rule);\n this.defRule(input, allRule, rule, true);\n break;\n case 'type':\n if (acceptedTypes.indexOf(input.type) !== -1) {\n this.defRule(input, allRule, input.type, true);\n }\n break;\n case 'rangeLength':\n case 'range':\n this.defRule(input, allRule, rule, JSON.parse(input.getAttribute(rule)));\n break;\n case 'equalTo':\n {\n var id = input.getAttribute(rule);\n this.defRule(input, allRule, rule, id);\n }\n break;\n default:\n if (input.getAttribute('data-val') === 'true') {\n this.annotationRule(input, allRule, rule, input.getAttribute(rule));\n }\n else {\n this.defRule(input, allRule, rule, input.getAttribute(rule));\n }\n }\n }\n }\n //adding pattern type validation\n if (Object.keys(allRule).length !== 0) {\n this.addRules(input.name, allRule);\n }\n }\n };\n FormValidator.prototype.annotationRule = function (input, ruleCon, ruleName, value) {\n var annotationRule = ruleName.split('-');\n var rulesList = ['required', 'creditcard', 'phone', 'maxlength', 'minlength', 'range', 'regex', 'equalto'];\n var ruleFirstName = annotationRule[annotationRule.length - 1];\n var ruleSecondName = annotationRule[annotationRule.length - 2];\n if (rulesList.indexOf(ruleFirstName) !== -1) {\n switch (ruleFirstName) {\n case 'required':\n this.defRule(input, ruleCon, 'required', value);\n break;\n case 'creditcard':\n this.defRule(input, ruleCon, 'creditcard', value);\n break;\n case 'phone':\n this.defRule(input, ruleCon, 'tel', value);\n break;\n }\n }\n else if (rulesList.indexOf(ruleSecondName) !== -1) {\n switch (ruleSecondName) {\n case 'maxlength':\n this.defRule(input, ruleCon, 'maxLength', value);\n break;\n case 'minlength':\n this.defRule(input, ruleCon, 'minLength', value);\n break;\n case 'range':\n {\n var minvalue = input.getAttribute('data-val-range-min');\n var maxvalue = input.getAttribute('data-val-range-max');\n this.defRule(input, ruleCon, 'range', [minvalue, maxvalue]);\n }\n break;\n case 'equalto':\n {\n var id = input.getAttribute(ruleName).split('.');\n this.defRule(input, ruleCon, 'equalTo', id[id.length - 1]);\n }\n break;\n case 'regex':\n this.defRule(input, ruleCon, 'regex', value);\n break;\n }\n }\n };\n FormValidator.prototype.defRule = function (input, ruleCon, ruleName, value) {\n var message = input.getAttribute('data-' + ruleName + '-message');\n var annotationMessage = input.getAttribute('data-val-' + ruleName);\n var customMessage;\n if (this.rules[input.name] && ruleName !== 'validateHidden' && ruleName !== 'hidden') {\n this.getInputElement(input.name);\n customMessage = this.getErrorMessage(this.rules[input.name][\"\" + ruleName], ruleName);\n }\n if (message) {\n value = [value, message];\n }\n else if (annotationMessage) {\n value = [value, annotationMessage];\n }\n else if (customMessage) {\n value = [value, customMessage];\n }\n ruleCon[\"\" + ruleName] = value;\n };\n // Wire events to the form elements\n FormValidator.prototype.wireEvents = function () {\n for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {\n var input = _a[_i];\n if (FormValidator_1.isCheckable(input)) {\n EventHandler.add(input, 'click', this.clickHandler, this);\n }\n else if (input.tagName === 'SELECT') {\n EventHandler.add(input, 'change', this.changeHandler, this);\n }\n else {\n EventHandler.add(input, 'focusout', this.focusOutHandler, this);\n EventHandler.add(input, 'keyup', this.keyUpHandler, this);\n }\n }\n EventHandler.add(this.element, 'submit', this.submitHandler, this);\n EventHandler.add(this.element, 'reset', this.resetHandler, this);\n };\n // UnWire events to the form elements\n FormValidator.prototype.unwireEvents = function () {\n for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {\n var input = _a[_i];\n EventHandler.clearEvents(input);\n }\n EventHandler.remove(this.element, 'submit', this.submitHandler);\n EventHandler.remove(this.element, 'reset', this.resetHandler);\n };\n // Handle input element focusout event\n FormValidator.prototype.focusOutHandler = function (e) {\n this.trigger('focusout', e);\n //FormValidator.triggerCallback(this.focusout, e);\n var element = e.target;\n if (this.rules[element.name]) {\n if (this.rules[element.name][this.required] || element.value.length > 0) {\n this.validate(element.name);\n }\n else if (this.validated.indexOf(element.name) === -1) {\n this.validated.push(element.name);\n }\n }\n };\n // Handle input element keyup event\n FormValidator.prototype.keyUpHandler = function (e) {\n this.trigger('keyup', e);\n var element = e.target;\n // List of keys need to prevent while validation\n var excludeKeys = [16, 17, 18, 20, 35, 36, 37, 38, 39, 40, 45, 144, 225];\n if (e.which === 9 && (!this.rules[element.name] || (this.rules[element.name] && !this.rules[element.name][this.required]))) {\n return;\n }\n if (this.validated.indexOf(element.name) !== -1 && this.rules[element.name] && excludeKeys.indexOf(e.which) === -1) {\n this.validate(element.name);\n }\n };\n // Handle input click event\n FormValidator.prototype.clickHandler = function (e) {\n this.trigger('click', e);\n var element = e.target;\n // If element type is not submit allow validation\n if (element.type !== 'submit') {\n this.validate(element.name);\n }\n else if (element.getAttribute('formnovalidate') !== null) {\n // Prevent form validation, if submit button has formnovalidate attribute\n this.allowSubmit = true;\n }\n };\n // Handle input change event\n FormValidator.prototype.changeHandler = function (e) {\n this.trigger('change', e);\n var element = e.target;\n this.validate(element.name);\n };\n // Handle form submit event\n FormValidator.prototype.submitHandler = function (e) {\n this.trigger('submit', e);\n //FormValidator.triggerCallback(this.submit, e);\n // Prevent form submit if validation failed\n if (!this.allowSubmit && !this.validate()) {\n e.preventDefault();\n }\n else {\n this.allowSubmit = false;\n }\n };\n // Handle form reset\n FormValidator.prototype.resetHandler = function () {\n this.clearForm();\n };\n // Validate each rule based on input element name\n FormValidator.prototype.validateRules = function (name) {\n if (!this.rules[\"\" + name]) {\n return;\n }\n var rules = Object.keys(this.rules[\"\" + name]);\n var hiddenType = false;\n var validateHiddenType = false;\n var vhPos = rules.indexOf('validateHidden');\n var hPos = rules.indexOf('hidden');\n this.getInputElement(name);\n if (hPos !== -1) {\n hiddenType = true;\n }\n if (vhPos !== -1) {\n validateHiddenType = true;\n }\n if (!hiddenType || (hiddenType && validateHiddenType)) {\n if (vhPos !== -1) {\n rules.splice(vhPos, 1);\n }\n if (hPos !== -1) {\n rules.splice((hPos - 1), 1);\n }\n this.getErrorElement(name);\n for (var _i = 0, rules_2 = rules; _i < rules_2.length; _i++) {\n var rule = rules_2[_i];\n var errorMessage = this.getErrorMessage(this.rules[\"\" + name][\"\" + rule], rule);\n var errorRule = { name: name, message: errorMessage };\n var eventArgs = {\n inputName: name,\n element: this.inputElement,\n message: errorMessage\n };\n if (!this.isValid(name, rule) && !this.inputElement.classList.contains(this.ignore)) {\n this.removeErrorRules(name);\n this.errorRules.push(errorRule);\n // Set aria attributes to invalid elements\n this.inputElement.setAttribute('aria-invalid', 'true');\n this.inputElement.setAttribute('aria-describedby', this.inputElement.id + '-info');\n var inputParent = this.inputElement.parentElement;\n var grandParent = inputParent.parentElement;\n if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {\n inputParent.classList.add(this.errorClass);\n inputParent.classList.remove(this.validClass);\n }\n else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {\n grandParent.classList.add(this.errorClass);\n grandParent.classList.remove(this.validClass);\n }\n else {\n this.inputElement.classList.add(this.errorClass);\n this.inputElement.classList.remove(this.validClass);\n }\n if (!this.infoElement) {\n this.createErrorElement(name, errorRule.message, this.inputElement);\n }\n else {\n this.showMessage(errorRule);\n }\n eventArgs.errorElement = this.infoElement;\n eventArgs.status = 'failure';\n if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {\n inputParent.classList.add(this.errorClass);\n inputParent.classList.remove(this.validClass);\n }\n else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {\n grandParent.classList.add(this.errorClass);\n grandParent.classList.remove(this.validClass);\n }\n else {\n this.inputElement.classList.add(this.errorClass);\n this.inputElement.classList.remove(this.validClass);\n }\n this.optionalValidationStatus(name, eventArgs);\n this.trigger('validationComplete', eventArgs);\n // Set aria-required to required rule elements\n if (rule === 'required') {\n this.inputElement.setAttribute('aria-required', 'true');\n }\n break;\n }\n else {\n this.hideMessage(name);\n eventArgs.status = 'success';\n this.trigger('validationComplete', eventArgs);\n }\n }\n }\n else {\n return;\n }\n };\n // Update the optional validation status\n FormValidator.prototype.optionalValidationStatus = function (name, refer) {\n if (!this.rules[\"\" + name][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {\n this.infoElement.innerHTML = this.inputElement.value;\n this.infoElement.setAttribute('aria-invalid', 'false');\n refer.status = '';\n this.hideMessage(name);\n }\n };\n // Check the input element whether it's value satisfy the validation rule or not\n FormValidator.prototype.isValid = function (name, rule) {\n var params = this.rules[\"\" + name][\"\" + rule];\n var param = (params instanceof Array && typeof params[1] === 'string') ? params[0] : params;\n var currentRule = this.rules[\"\" + name][\"\" + rule];\n var args = { value: this.inputElement.value, param: param, element: this.inputElement, formElement: this.element };\n this.trigger('validationBegin', args);\n if (!args.param && rule === 'required') {\n return true;\n }\n if (currentRule && typeof currentRule[0] === 'function') {\n var fn = currentRule[0];\n return fn.call(this, { element: this.inputElement, value: this.inputElement.value });\n }\n else if (FormValidator_1.isCheckable(this.inputElement)) {\n if (rule !== 'required') {\n return true;\n }\n return selectAll('input[name=\"' + name + '\"]:checked', this.element).length > 0;\n }\n else {\n return FormValidator_1.checkValidator[\"\" + rule](args);\n }\n };\n // Return default error message or custom error message\n FormValidator.prototype.getErrorMessage = function (ruleValue, rule) {\n var message = this.inputElement.getAttribute('data-' + rule + '-message') ?\n this.inputElement.getAttribute('data-' + rule + '-message') :\n (ruleValue instanceof Array && typeof ruleValue[1] === 'string') ? ruleValue[1] :\n (Object.keys(this.localyMessage).length !== 0) ? this.localyMessage[\"\" + rule] : this.defaultMessages[\"\" + rule];\n var formats = message.match(/{(\\d)}/g);\n if (!isNullOrUndefined(formats)) {\n for (var i = 0; i < formats.length; i++) {\n var value = ruleValue instanceof Array ? ruleValue[parseInt(i.toString())] : ruleValue;\n message = message.replace(formats[parseInt(i.toString())], value);\n }\n }\n return message;\n };\n // Create error element based on name and error message\n FormValidator.prototype.createErrorElement = function (name, message, input) {\n var errorElement = createElement(this.errorElement, {\n className: this.errorClass,\n innerHTML: message,\n attrs: { for: name }\n });\n // Create message design if errorOption is message\n if (this.errorOption === ErrorOption.Message) {\n errorElement.classList.remove(this.errorClass);\n errorElement.classList.add('e-message');\n errorElement = createElement(this.errorContainer, { className: this.errorClass, innerHTML: errorElement.outerHTML });\n }\n errorElement.id = this.inputElement.name + '-info';\n // Append error message into MVC error message element\n if (this.element.querySelector('[data-valmsg-for=\"' + input.id + '\"]')) {\n this.element.querySelector('[data-valmsg-for=\"' + input.id + '\"]').appendChild(errorElement);\n }\n else if (input.hasAttribute('data-msg-containerid') === true) {\n // Append error message into custom div element\n var containerId = input.getAttribute('data-msg-containerid');\n var divElement = select('#' + containerId, this.element);\n divElement.appendChild(errorElement);\n }\n else if (this.customPlacement != null) {\n // Call custom placement function if customPlacement is not null\n this.customPlacement.call(this, this.inputElement, errorElement);\n }\n else {\n var inputParent = this.inputElement.parentElement;\n var grandParent = inputParent.parentElement;\n if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {\n grandParent.insertBefore(errorElement, inputParent.nextSibling);\n }\n else if (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper')) {\n grandParent.parentElement.insertBefore(errorElement, grandParent.nextSibling);\n }\n else {\n inputParent.insertBefore(errorElement, this.inputElement.nextSibling);\n }\n }\n errorElement.style.display = 'block';\n this.getErrorElement(name);\n this.validated.push(name);\n this.checkRequired(name);\n };\n // Get error element by name\n FormValidator.prototype.getErrorElement = function (name) {\n this.infoElement = select(this.errorElement + '.' + this.errorClass, this.inputElement.parentElement);\n if (!this.infoElement) {\n this.infoElement = select(this.errorElement + '.' + this.errorClass + '[for=\"' + name + '\"]', this.element);\n }\n return this.infoElement;\n };\n // Remove existing rule from errorRules object\n FormValidator.prototype.removeErrorRules = function (name) {\n for (var i = 0; i < this.errorRules.length; i++) {\n var rule = this.errorRules[parseInt(i.toString())];\n if (rule.name === name) {\n this.errorRules.splice(i, 1);\n }\n }\n };\n // Show error message to the input element\n FormValidator.prototype.showMessage = function (errorRule) {\n this.infoElement.style.display = 'block';\n this.infoElement.innerHTML = errorRule.message;\n this.checkRequired(errorRule.name);\n };\n // Hide error message based on input name\n FormValidator.prototype.hideMessage = function (name) {\n if (this.infoElement) {\n this.infoElement.style.display = 'none';\n this.removeErrorRules(name);\n var inputParent = this.inputElement.parentElement;\n var grandParent = inputParent.parentElement;\n if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {\n inputParent.classList.add(this.validClass);\n inputParent.classList.remove(this.errorClass);\n }\n else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {\n grandParent.classList.add(this.validClass);\n grandParent.classList.remove(this.errorClass);\n }\n else {\n this.inputElement.classList.add(this.validClass);\n this.inputElement.classList.remove(this.errorClass);\n }\n this.inputElement.setAttribute('aria-invalid', 'false');\n }\n };\n // Check whether the input element have required rule and its value is not empty\n FormValidator.prototype.checkRequired = function (name) {\n if (!this.rules[\"\" + name][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {\n this.infoElement.innerHTML = this.inputElement.value;\n this.infoElement.setAttribute('aria-invalid', 'false');\n this.hideMessage(name);\n }\n };\n // Return boolean result if the input have chekcable or submit types\n FormValidator.isCheckable = function (input) {\n var inputType = input.getAttribute('type');\n return inputType && (inputType === 'checkbox' || inputType === 'radio' || inputType === 'submit');\n };\n var FormValidator_1;\n // List of function to validate the rules\n FormValidator.checkValidator = {\n required: function (option) {\n return !isNaN(Date.parse(option.value)) ? !isNaN(new Date(option.value).getTime()) : option.value.toString().length > 0;\n },\n email: function (option) {\n return regex.EMAIL.test(option.value);\n },\n url: function (option) {\n return regex.URL.test(option.value);\n },\n dateIso: function (option) {\n return regex.DATE_ISO.test(option.value);\n },\n tel: function (option) {\n return regex.PHONE.test(option.value);\n },\n creditcard: function (option) {\n return regex.CREDITCARD.test(option.value);\n },\n number: function (option) {\n return !isNaN(Number(option.value)) && option.value.indexOf(' ') === -1;\n },\n digits: function (option) {\n return regex.DIGITS.test(option.value);\n },\n maxLength: function (option) {\n return option.value.length <= option.param;\n },\n minLength: function (option) {\n return option.value.length >= option.param;\n },\n rangeLength: function (option) {\n var param = option.param;\n return option.value.length >= param[0] && option.value.length <= param[1];\n },\n range: function (option) {\n var param = option.param;\n return !isNaN(Number(option.value)) && Number(option.value) >= param[0] && Number(option.value) <= param[1];\n },\n date: function (option) {\n if (!isNullOrUndefined(option.param) && (typeof (option.param) === 'string' && option.param !== '')) {\n var globalize = new Internationalization;\n var dateOptions = { format: option.param.toString(), type: 'dateTime', skeleton: 'yMd' };\n var dateValue = globalize.parseDate(option.value, dateOptions);\n return (!isNullOrUndefined(dateValue) && dateValue instanceof Date && !isNaN(+dateValue));\n }\n else {\n return !isNaN(new Date(option.value).getTime());\n }\n },\n max: function (option) {\n if (!isNaN(Number(option.value))) {\n // Maximum rule validation for number\n return +option.value <= option.param;\n }\n // Maximum rule validation for date\n return new Date(option.value).getTime() <= new Date(JSON.parse(JSON.stringify(option.param))).getTime();\n },\n min: function (option) {\n if (!isNaN(Number(option.value))) {\n // Minimum rule validation for number\n return +option.value >= option.param;\n }\n else if ((option.value).indexOf(',') !== -1) {\n var uNum = (option.value).replace(/,/g, '');\n return parseFloat(uNum) >= option.param;\n }\n else {\n // Minimum rule validation for date\n return new Date(option.value).getTime() >= new Date(JSON.parse(JSON.stringify(option.param))).getTime();\n }\n },\n regex: function (option) {\n /* eslint-disable-next-line security/detect-non-literal-regexp */\n return new RegExp(option.param).test(option.value);\n },\n equalTo: function (option) {\n var compareTo = option.formElement.querySelector('#' + option.param);\n option.param = compareTo.value;\n return option.param === option.value;\n }\n };\n __decorate([\n Property('')\n ], FormValidator.prototype, \"locale\", void 0);\n __decorate([\n Property('e-hidden')\n ], FormValidator.prototype, \"ignore\", void 0);\n __decorate([\n Property()\n ], FormValidator.prototype, \"rules\", void 0);\n __decorate([\n Property('e-error')\n ], FormValidator.prototype, \"errorClass\", void 0);\n __decorate([\n Property('e-valid')\n ], FormValidator.prototype, \"validClass\", void 0);\n __decorate([\n Property('label')\n ], FormValidator.prototype, \"errorElement\", void 0);\n __decorate([\n Property('div')\n ], FormValidator.prototype, \"errorContainer\", void 0);\n __decorate([\n Property(ErrorOption.Label)\n ], FormValidator.prototype, \"errorOption\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"focusout\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"keyup\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"click\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"submit\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"validationBegin\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"validationComplete\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"customPlacement\", void 0);\n FormValidator = FormValidator_1 = __decorate([\n NotifyPropertyChanges\n ], FormValidator);\n return FormValidator;\n}(Base));\nexport { FormValidator };\n","import { ComponentBase, gh, getProps, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nexport var properties = ['isLazyUpdate', 'plugins', 'content', 'cssClass', 'disabled', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'iconCss', 'iconPosition', 'isPrimary', 'isToggle', 'locale', 'created'];\nexport var modelProps = [];\nexport var testProp = getProps({ props: properties });\nexport var props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);\nemitProbs.push('modelchanged', 'update:modelValue');\nfor (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {\n var props_1 = modelProps_1[_i];\n emitProbs.push('update:' + props_1);\n}\n/**\n * Represents the Essential JS 2 VueJS Button Component\n * ```html\n *
Button\n * ```\n */\nexport var ButtonComponent = vueDefineComponent({\n name: 'ButtonComponent',\n mixins: [ComponentBase],\n props: props,\n watch: watch,\n emits: emitProbs,\n provide: function () { return { custom: this.custom }; },\n data: function () {\n return {\n ej2Instances: new Button({}),\n propKeys: properties,\n models: modelProps,\n hasChildDirective: false,\n hasInjectedModules: false,\n tagMapper: {},\n tagNameMapper: {},\n isVue3: !isExecute,\n templateCollection: {},\n };\n },\n created: function () {\n this.bindProperties();\n this.ej2Instances._setProperties = this.ej2Instances.setProperties;\n this.ej2Instances.setProperties = this.setProperties;\n this.ej2Instances.clearTemplate = this.clearTemplate;\n this.updated = this.updated;\n },\n render: function (createElement) {\n var h = !isExecute ? gh : createElement;\n var slots = null;\n if (!isNullOrUndefined(this.$slots.default)) {\n slots = !isExecute ? this.$slots.default() : this.$slots.default;\n }\n return h('button', slots);\n },\n methods: {\n clearTemplate: function (templateNames) {\n if (!templateNames) {\n templateNames = Object.keys(this.templateCollection || {});\n }\n if (templateNames.length && this.templateCollection) {\n for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {\n var tempName = templateNames_1[_i];\n var elementCollection = this.templateCollection[tempName];\n if (elementCollection && elementCollection.length) {\n for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {\n var ele = elementCollection_1[_a];\n var destroy = getValue('__vue__.$destroy', ele);\n if (destroy) {\n ele.__vue__.$destroy();\n }\n if (ele.innerHTML) {\n ele.innerHTML = '';\n }\n }\n delete this.templateCollection[tempName];\n }\n }\n }\n },\n setProperties: function (prop, muteOnChange) {\n var _this = this;\n if (this.isVue3) {\n this.models = !this.models ? this.ej2Instances.referModels : this.models;\n }\n if (this.ej2Instances && this.ej2Instances._setProperties) {\n this.ej2Instances._setProperties(prop, muteOnChange);\n }\n if (prop && this.models && this.models.length) {\n Object.keys(prop).map(function (key) {\n _this.models.map(function (model) {\n if ((key === model) && !(/datasource/i.test(key))) {\n if (_this.isVue3) {\n _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);\n }\n else {\n _this.$emit('update:' + key, prop[key]);\n _this.$emit('modelchanged', prop[key]);\n }\n }\n });\n });\n }\n },\n custom: function () {\n this.updated();\n },\n click: function () {\n return this.ej2Instances.click();\n },\n focusIn: function () {\n return this.ej2Instances.focusIn();\n },\n }\n});\nexport var ButtonPlugin = {\n name: 'ejs-button',\n install: function (Vue) {\n Vue.component(ButtonPlugin.name, ButtonComponent);\n }\n};\n","import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, closest as getClosest, remove } from '@syncfusion/ej2-base';\nimport { classList } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\nimport { RowRenderer } from './row-renderer';\nimport { Cell } from '../models/cell';\nimport { Row } from '../models/row';\nimport * as events from '../base/constant';\nimport { Draggable, Droppable } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { parentsUntil, wrap, measureColumnDepth, appendChildren, addFixedColumnBorder } from '../base/util';\nimport * as literals from '../base/string-literals';\n// eslint-disable-next-line valid-jsdoc\n/**\n * Content module is used to render grid content\n *\n * @hidden\n */\nvar HeaderRender = /** @class */ (function () {\n /**\n * Constructor for header renderer module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {ServiceLocator} serviceLocator - specifies the serviceLocator\n */\n function HeaderRender(parent, serviceLocator) {\n var _this = this;\n this.frzIdx = 0;\n this.notfrzIdx = 0;\n this.isFirstCol = false;\n this.isReplaceDragEle = true;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n this.helper = function (e) {\n var gObj = _this.parent;\n var target = _this.draggable.currentStateTarget;\n var parentEle = parentsUntil(target, 'e-headercell');\n if (!(gObj.allowReordering || gObj.allowGrouping) || (!isNullOrUndefined(parentEle)\n && parentEle.getElementsByClassName('e-checkselectall').length > 0)) {\n return false;\n }\n var visualElement = _this.parent.createElement('div', { className: 'e-cloneproperties e-dragclone e-headerclone' });\n var element = target.classList.contains('e-headercell') ? target : parentEle;\n if (!element || (!gObj.allowReordering && element.classList.contains('e-stackedheadercell'))) {\n return false;\n }\n var height = element.offsetHeight;\n var headercelldiv = element.querySelector('.e-headercelldiv') || element.querySelector('.e-stackedheadercelldiv');\n var col;\n if (headercelldiv) {\n if (element.querySelector('.e-stackedheadercelldiv')) {\n col = gObj.getStackedHeaderColumnByHeaderText(headercelldiv.innerText.trim(), gObj.columns);\n }\n else {\n col = gObj.getColumnByUid(headercelldiv.getAttribute('e-mappinguid'));\n }\n _this.column = col;\n if (_this.column.lockColumn) {\n return false;\n }\n visualElement.setAttribute('e-mappinguid', _this.column.uid);\n }\n if (col && !isNullOrUndefined(col.headerTemplate)) {\n if (!isNullOrUndefined(col.headerTemplate)) {\n var colIndex = gObj.getColumnIndexByField(col.field);\n var result = col.getHeaderTemplate()(extend({ 'index': colIndex }, col), gObj, 'headerTemplate');\n var isReactCompiler = gObj.isReact && typeof (col.headerTemplate) !== 'string';\n var isReactChild = gObj.parentDetails && gObj.parentDetails.parentInstObj &&\n gObj.parentDetails.parentInstObj.isReact;\n if (isReactCompiler || isReactChild) {\n gObj.renderTemplates();\n }\n appendChildren(visualElement, result);\n }\n else {\n visualElement.innerHTML = col.headerTemplate;\n }\n if (!isNullOrUndefined(visualElement.firstChild) && visualElement.firstChild.nodeType === 1) {\n visualElement.firstChild.style.pointerEvents = 'none';\n }\n }\n else {\n visualElement.innerHTML = headercelldiv ?\n col.headerText : element.firstElementChild.innerHTML;\n }\n visualElement.style.width = element.offsetWidth + 'px';\n visualElement.style.height = element.offsetHeight + 'px';\n visualElement.style.lineHeight = (height - 6).toString() + 'px';\n gObj.element.appendChild(visualElement);\n return visualElement;\n };\n this.dragStart = function (e) {\n var gObj = _this.parent;\n gObj.element.querySelector('.e-gridpopup').style.display = 'none';\n gObj.notify(events.columnDragStart, { target: _this.draggable.currentStateTarget, column: _this.column, event: e.event });\n };\n this.drag = function (e) {\n var gObj = _this.parent;\n var target = e.target;\n if (target) {\n var closest = getClosest(target, '.e-grid');\n var cloneElement = _this.parent.element.querySelector('.e-cloneproperties');\n if (!closest || closest.getAttribute('id') !== gObj.element.getAttribute('id')) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n if (gObj.allowReordering) {\n gObj.element.querySelector('.e-reorderuparrow').style.display = 'none';\n gObj.element.querySelector('.e-reorderdownarrow').style.display = 'none';\n }\n if (!gObj.groupSettings.allowReordering) {\n return;\n }\n }\n gObj.notify(events.columnDrag, { target: e.target, column: _this.column, event: e.event });\n }\n };\n this.dragStop = function (e) {\n var gObj = _this.parent;\n var cancel;\n gObj.element.querySelector('.e-gridpopup').style.display = 'none';\n if ((!parentsUntil(e.target, 'e-headercell') && !parentsUntil(e.target, 'e-groupdroparea')) ||\n (!gObj.allowReordering && parentsUntil(e.target, 'e-headercell')) ||\n (!e.helper.getAttribute('e-mappinguid') && parentsUntil(e.target, 'e-groupdroparea'))) {\n remove(e.helper);\n cancel = true;\n }\n gObj.notify(events.columnDragStop, { target: e.target, event: e.event, column: _this.column, cancel: cancel });\n };\n this.drop = function (e) {\n var gObj = _this.parent;\n var uid = e.droppedElement.getAttribute('e-mappinguid');\n var closest = getClosest(e.target, '.e-grid');\n remove(e.droppedElement);\n if (closest && closest.getAttribute('id') !== gObj.element.getAttribute('id') ||\n !(gObj.allowReordering || gObj.allowGrouping)) {\n return;\n }\n gObj.notify(events.headerDrop, { target: e.target, uid: uid, droppedElement: e.droppedElement });\n };\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.ariaService = this.serviceLocator.getService('ariaService');\n this.widthService = this.serviceLocator.getService('widthService');\n if (this.parent.isDestroyed) {\n return;\n }\n if (!this.parent.enableColumnVirtualization) {\n this.parent.on(events.columnVisibilityChanged, this.setVisible, this);\n }\n this.parent.on(events.columnPositionChanged, this.colPosRefresh, this);\n this.parent.on(events.initialEnd, this.renderCustomToolbar, this);\n if (this.parent.rowRenderingMode === 'Vertical') {\n this.parent.on(events.uiUpdate, this.updateCustomResponsiveToolbar, this);\n }\n }\n /**\n * The function is used to render grid header div\n *\n * @returns {void}\n */\n HeaderRender.prototype.renderPanel = function () {\n var div = this.parent.element.querySelector('.' + literals.gridHeader);\n var isRendered = (div != null);\n div = isRendered ? div : this.parent.createElement('div', { className: 'e-gridheader' });\n var innerDiv = isRendered ? div.querySelector('.' + literals.headerContent) :\n this.parent.createElement('div', { className: literals.headerContent });\n this.toggleStackClass(div);\n div.appendChild(innerDiv);\n this.setPanel(div);\n if (!isRendered) {\n this.parent.element.appendChild(div);\n }\n };\n /**\n * The function is used to render grid header div\n *\n * @returns {void}\n */\n HeaderRender.prototype.renderTable = function () {\n var headerDiv = this.getPanel();\n headerDiv.appendChild(this.createHeaderTable());\n this.setTable(headerDiv.querySelector('.' + literals.table));\n this.initializeHeaderDrag();\n this.initializeHeaderDrop();\n this.parent.notify(events.headerRefreshed, { rows: this.rows });\n };\n /**\n * Get the header content div element of grid\n *\n * @returns {Element} returns the element\n */\n HeaderRender.prototype.getPanel = function () {\n return this.headerPanel;\n };\n /**\n * Set the header content div element of grid\n *\n * @param {Element} panel - specifies the panel element\n * @returns {void}\n */\n HeaderRender.prototype.setPanel = function (panel) {\n this.headerPanel = panel;\n };\n /**\n * Get the header table element of grid\n *\n * @returns {Element} returns the element\n */\n HeaderRender.prototype.getTable = function () {\n return this.headerTable;\n };\n /**\n * Set the header table element of grid\n *\n * @param {Element} table - specifies the table element\n * @returns {void}\n */\n HeaderRender.prototype.setTable = function (table) {\n this.headerTable = table;\n };\n /**\n * Get the header colgroup element\n *\n * @returns {Element} returns the element\n */\n HeaderRender.prototype.getColGroup = function () {\n return this.colgroup;\n };\n /**\n * Set the header colgroup element\n *\n * @param {Element} colGroup - specifies the colgroup\n * @returns {Element} returns the element\n */\n HeaderRender.prototype.setColGroup = function (colGroup) {\n return this.colgroup = colGroup;\n };\n /**\n * Get the header row element collection.\n *\n * @returns {Element[]} returns the element\n */\n HeaderRender.prototype.getRows = function () {\n var table = this.getTable();\n return table.tHead.rows;\n };\n /**\n * The function is used to create header table elements\n *\n * @returns {Element} returns the element\n * @hidden\n */\n HeaderRender.prototype.createHeaderTable = function () {\n var table = this.createTable();\n var innerDiv = this.getPanel().querySelector('.' + literals.headerContent);\n innerDiv.appendChild(table);\n return innerDiv;\n };\n /**\n * The function is used to create header table elements\n *\n * @param {Element} tableEle - specifies the table Element\n * @param {freezeTable} tableName - specifies the table name\n * @returns {Element} returns the element\n * @hidden\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n HeaderRender.prototype.createHeader = function (tableEle, tableName) {\n if (tableEle === void 0) { tableEle = null; }\n var gObj = this.parent;\n if (this.getTable()) {\n remove(this.getTable());\n }\n var table = this.parent.createElement('table', { className: literals.table, attrs: { cellspacing: '0.25px', role: 'presentation' } });\n var findHeaderRow = this.createHeaderContent(tableName);\n var thead = findHeaderRow.thead;\n var tbody = this.parent.createElement(literals.tbody, { className: this.parent.frozenRows ? '' : 'e-hide', attrs: { role: 'rowgroup' } });\n this.caption = this.parent.createElement('caption', { innerHTML: this.parent.element.id + '_header_table', className: 'e-hide' });\n var colGroup = this.parent.createElement(literals.colGroup);\n var rowBody = this.parent.createElement('tr', { attrs: { role: 'row' } });\n var bodyCell;\n var rows = this.rows = findHeaderRow.rows;\n for (var i = 0, len = rows.length; i < len; i++) {\n for (var j = 0, len_1 = rows[parseInt(i.toString(), 10)].cells.length; j < len_1; j++) {\n bodyCell = this.parent.createElement('td');\n rowBody.appendChild(bodyCell);\n }\n }\n if (gObj.allowFiltering || gObj.allowSorting || gObj.allowGrouping) {\n table.classList.add('e-sortfilter');\n }\n this.updateColGroup(colGroup);\n tbody.appendChild(rowBody);\n table.appendChild(this.setColGroup(colGroup));\n table.appendChild(thead);\n table.appendChild(tbody);\n table.appendChild(this.caption);\n return table;\n };\n /**\n * @param {Element} tableEle - specifies the column\n * @returns {Element} returns the element\n * @hidden\n */\n HeaderRender.prototype.createTable = function (tableEle) {\n if (tableEle === void 0) { tableEle = null; }\n return this.createHeader(tableEle);\n };\n HeaderRender.prototype.createHeaderContent = function (tableName) {\n var gObj = this.parent;\n var columns = gObj.getColumns();\n var thead = this.parent.createElement('thead', { attrs: { 'role': 'rowgroup' } });\n var colHeader = this.parent.createElement('tr', { className: 'e-columnheader', attrs: { role: 'row' } });\n var rowRenderer = new RowRenderer(this.serviceLocator, CellType.Header, gObj);\n rowRenderer.element = colHeader;\n var rows = [];\n var headerRow;\n this.colDepth = measureColumnDepth(gObj.columns);\n for (var i = 0, len = this.colDepth; i < len; i++) {\n rows[parseInt(i.toString(), 10)] = this.generateRow(i);\n rows[parseInt(i.toString(), 10)].cells = [];\n }\n rows = this.ensureColumns(rows);\n rows = this.getHeaderCells(rows, tableName);\n if (gObj.isRowDragable() && this.parent.getFrozenMode() === 'Right') {\n for (var i = 0, len = rows.length; i < len; i++) {\n rows[parseInt(i.toString(), 10)].cells.push(this.generateCell({}, CellType.RowDragHIcon));\n }\n }\n for (var i = 0, len = this.colDepth; i < len; i++) {\n headerRow = rowRenderer.render(rows[parseInt(i.toString(), 10)], columns);\n if (this.parent.rowHeight && headerRow.querySelector('.e-headercell')) {\n headerRow.style.height = this.parent.rowHeight + 'px';\n }\n addFixedColumnBorder(headerRow);\n thead.appendChild(headerRow);\n }\n var findHeaderRow = {\n thead: thead,\n rows: rows\n };\n return findHeaderRow;\n };\n HeaderRender.prototype.updateColGroup = function (colGroup) {\n var cols = this.parent.getColumns();\n var col;\n var indexes = this.parent.getColumnIndexesInView();\n colGroup.id = this.parent.element.id + literals.colGroup;\n if (this.parent.allowGrouping) {\n for (var i = 0, len = this.parent.groupSettings.columns.length; i < len; i++) {\n if (this.parent.enableColumnVirtualization && indexes.indexOf(i) === -1) {\n continue;\n }\n col = this.parent.createElement('col', { className: 'e-group-intent' });\n colGroup.appendChild(col);\n }\n }\n if (this.parent.detailTemplate || this.parent.childGrid) {\n col = this.parent.createElement('col', { className: 'e-detail-intent' });\n colGroup.appendChild(col);\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() !== 'Right') {\n col = this.parent.createElement('col', { className: 'e-drag-intent' });\n colGroup.appendChild(col);\n }\n for (var i = 0, len = cols.length; i < len; i++) {\n col = this.parent.createElement('col');\n if (cols[parseInt(i.toString(), 10)].visible === false) {\n setStyleAttribute(col, { 'display': 'none' });\n }\n colGroup.appendChild(col);\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() === 'Right') {\n col = this.parent.createElement('col', { className: 'e-drag-intent' });\n colGroup.appendChild(col);\n }\n return colGroup;\n };\n HeaderRender.prototype.ensureColumns = function (rows) {\n //TODO: generate dummy column for group, detail, stacked row here; ensureColumns here\n var gObj = this.parent;\n var indexes = this.parent.getColumnIndexesInView();\n for (var i = 0, len = rows.length; i < len; i++) {\n if (gObj.allowGrouping) {\n for (var c = 0, len_2 = gObj.groupSettings.columns.length; c < len_2; c++) {\n if (this.parent.enableColumnVirtualization && indexes.indexOf(c) === -1) {\n continue;\n }\n rows[parseInt(i.toString(), 10)].cells.push(this.generateCell({}, CellType.HeaderIndent));\n }\n }\n if (gObj.detailTemplate || gObj.childGrid) {\n var args = {};\n this.parent.notify(events.detailIndentCellInfo, args);\n rows[parseInt(i.toString(), 10)].cells.push(this.generateCell(args, CellType.DetailHeader));\n }\n if (gObj.isRowDragable() && this.parent.getFrozenMode() !== 'Right') {\n rows[parseInt(i.toString(), 10)].cells.push(this.generateCell({}, CellType.RowDragHIcon));\n }\n }\n return rows;\n };\n HeaderRender.prototype.getHeaderCells = function (rows, tableName) {\n var thead = this.parent.getHeaderTable() && this.parent.getHeaderTable().querySelector('thead');\n var cols = this.parent.enableColumnVirtualization ?\n this.parent.getColumns(this.parent.enablePersistence) : this.parent.columns;\n this.frzIdx = 0;\n this.notfrzIdx = 0;\n if (this.parent.lockcolPositionCount) {\n for (var i = 0; i < cols.length; i++) {\n this.lockColsRendered = false;\n rows = this.appendCells(cols[parseInt(i.toString(), 10)], rows, 0, i === 0, false, i === (cols.length - 1), thead, tableName, false);\n }\n }\n for (var i = 0, len = cols.length; i < len; i++) {\n this.notfrzIdx = 0;\n this.lockColsRendered = true;\n rows = this.appendCells(cols[parseInt(i.toString(), 10)], rows, 0, i === 0, false, i === (len - 1), thead, tableName, false);\n }\n return rows;\n };\n HeaderRender.prototype.appendCells = function (cols, rows, index, isFirstObj, isFirstCol, isLastCol, isMovable, tableName, isStackLastCol) {\n var lastCol = isLastCol ? isStackLastCol ? 'e-laststackcell' : 'e-lastcell' : '';\n var isLockColumn = !this.parent.lockcolPositionCount\n || (cols.lockColumn && !this.lockColsRendered) || (!cols.lockColumn && this.lockColsRendered);\n if (!cols.columns) {\n if (isLockColumn) {\n rows[parseInt(index.toString(), 10)].cells.push(this.generateCell(cols, CellType.Header, this.colDepth - index, (isFirstObj ? '' : (isFirstCol ? 'e-firstcell' : '')) + lastCol, index, this.parent.getColumnIndexByUid(cols.uid)));\n }\n if (this.parent.lockcolPositionCount) {\n if ((this.frzIdx + this.notfrzIdx < this.parent.frozenColumns) &&\n ((cols.lockColumn && !this.lockColsRendered) || (!cols.lockColumn && this.lockColsRendered))) {\n this.frzIdx++;\n }\n else {\n this.notfrzIdx++;\n }\n }\n else {\n this.frzIdx++;\n }\n }\n else {\n this.isFirstCol = false;\n var colSpan = this.getCellCnt(cols, 0);\n if (colSpan) {\n var stackedLockColsCount = this.getStackedLockColsCount(cols, 0);\n var isStackedLockColumn = this.parent.lockcolPositionCount === 0\n || (!this.lockColsRendered && stackedLockColsCount !== 0)\n || (this.lockColsRendered && (colSpan - stackedLockColsCount) !== 0);\n if (isStackedLockColumn) {\n rows[parseInt(index.toString(), 10)].cells.push(new Cell({\n cellType: CellType.StackedHeader, column: cols,\n colSpan: this.getColSpan(colSpan, stackedLockColsCount),\n className: isFirstObj ? '' : (isFirstCol ? 'e-firstcell' : '')\n }));\n }\n }\n if (this.parent.lockcolPositionCount && !this.lockColsRendered) {\n for (var i = 0; i < cols.columns.length; i++) {\n rows = this.appendCells(cols.columns[parseInt(i.toString(), 10)], rows, index + 1, isFirstObj, i === 0, i === (cols.columns.length - 1) && isLastCol, isMovable, tableName, false);\n }\n }\n if (this.lockColsRendered) {\n for (var i = 0, len = cols.columns.length; i < len; i++) {\n isFirstObj = isFirstObj && i === 0;\n var isFirstCol_1 = this.isFirstCol = cols.columns[parseInt(i.toString(), 10)].visible\n && !isFirstObj;\n var isLaststackedCol = i === (len - 1) && isLastCol;\n rows = this.appendCells(cols.columns[parseInt(i.toString(), 10)], rows, index + 1, isFirstObj, isFirstCol_1 && !isLaststackedCol, isLaststackedCol, isMovable, tableName, true);\n }\n }\n }\n return rows;\n };\n HeaderRender.prototype.getStackedLockColsCount = function (col, lockColsCount) {\n if (col.columns) {\n for (var i = 0; i < col.columns.length; i++) {\n lockColsCount = this.getStackedLockColsCount(col.columns[parseInt(i.toString(), 10)], lockColsCount);\n }\n }\n else if (col.lockColumn) {\n lockColsCount++;\n }\n return lockColsCount;\n };\n HeaderRender.prototype.getColSpan = function (colSpan, stackedLockColsCount) {\n colSpan = !this.lockColsRendered ? stackedLockColsCount : colSpan - stackedLockColsCount;\n return colSpan;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n HeaderRender.prototype.generateRow = function (index) {\n return new Row({});\n };\n HeaderRender.prototype.generateCell = function (column, cellType, rowSpan, className, rowIndex, colIndex) {\n var opt = {\n 'visible': column.visible,\n 'isDataCell': false,\n 'isTemplate': !isNullOrUndefined(column.headerTemplate),\n 'rowID': '',\n 'column': column,\n 'cellType': cellType,\n 'rowSpan': rowSpan,\n 'className': className,\n 'index': rowIndex,\n 'colIndex': colIndex\n };\n if (!opt.rowSpan || opt.rowSpan < 2) {\n delete opt.rowSpan;\n }\n return new Cell(opt);\n };\n /**\n * Function to hide header table column based on visible property\n *\n * @param {Column[]} columns - specifies the column\n * @returns {void}\n */\n HeaderRender.prototype.setVisible = function (columns) {\n var gObj = this.parent;\n var displayVal;\n var idx;\n for (var c = 0, clen = columns.length; c < clen; c++) {\n var column = columns[parseInt(c.toString(), 10)];\n idx = gObj.getNormalizedColumnIndex(column.uid);\n displayVal = column.visible ? '' : 'none';\n setStyleAttribute(this.getColGroup().children[parseInt(idx.toString(), 10)], { 'display': displayVal });\n }\n this.refreshUI();\n };\n HeaderRender.prototype.colPosRefresh = function () {\n this.refreshUI();\n };\n /**\n * Refresh the header of the Grid.\n *\n * @returns {void}\n */\n HeaderRender.prototype.refreshUI = function () {\n var headerDiv = this.getPanel();\n this.toggleStackClass(headerDiv);\n var table = this.freezeReorder ? this.headerPanel.querySelector('.' + literals.movableHeader).querySelector('.' + literals.table)\n : this.getTable();\n var tableName = undefined;\n if (table) {\n remove(table);\n table.removeChild(table.firstChild);\n table.removeChild(table.childNodes[0]);\n var colGroup = this.parent.createElement(literals.colGroup);\n var findHeaderRow = this.createHeaderContent(tableName);\n this.rows = findHeaderRow.rows;\n table.insertBefore(findHeaderRow.thead, table.firstChild);\n this.updateColGroup(colGroup);\n table.insertBefore(this.setColGroup(colGroup), table.firstChild);\n this.appendContent(table);\n this.parent.notify(events.colGroupRefresh, {});\n this.widthService.setWidthToColumns();\n this.parent.updateDefaultCursor();\n this.initializeHeaderDrag();\n var rows = [].slice.call(headerDiv.querySelectorAll('tr.e-columnheader'));\n for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {\n var row = rows_1[_i];\n var gCells = [].slice.call(row.getElementsByClassName('e-grouptopleftcell'));\n if (gCells.length) {\n gCells[gCells.length - 1].classList.add('e-lastgrouptopleftcell');\n }\n }\n this.parent.notify(events.headerRefreshed, { rows: this.rows });\n if (this.parent.enableColumnVirtualization && parentsUntil(table, literals.movableHeader)) {\n this.parent.notify(events.headerRefreshed, { rows: this.rows, args: { isFrozen: false, isXaxis: true } });\n }\n if (this.parent.allowTextWrap && this.parent.textWrapSettings.wrapMode === 'Header') {\n wrap(rows, true);\n }\n }\n var firstHeaderCell = this.parent.getHeaderContent().querySelector('.e-headercell:not(.e-hide)');\n if (!isNullOrUndefined(firstHeaderCell)) {\n firstHeaderCell.tabIndex = 0;\n }\n };\n HeaderRender.prototype.toggleStackClass = function (div) {\n var column = this.parent.columns;\n var stackedHdr = column.some(function (column) { return !isNullOrUndefined(column.columns); });\n if (stackedHdr) {\n div.classList.add('e-stackedheader');\n }\n else {\n div.classList.remove('e-stackedheader');\n }\n };\n HeaderRender.prototype.appendContent = function (table) {\n this.getPanel().querySelector('.' + literals.headerContent).appendChild(table);\n };\n HeaderRender.prototype.getCellCnt = function (col, cnt) {\n if (col.columns) {\n for (var i = 0, len = col.columns.length; i < len; i++) {\n cnt = this.getCellCnt(col.columns[parseInt(i.toString(), 10)], cnt);\n }\n }\n else {\n if (col.visible) {\n cnt++;\n }\n }\n return cnt;\n };\n HeaderRender.prototype.initializeHeaderDrag = function () {\n var gObj = this.parent;\n if (!(this.parent.allowReordering || (this.parent.allowGrouping && this.parent.groupSettings.showDropArea))) {\n return;\n }\n this.draggable = new Draggable(gObj.getHeaderContent(), {\n dragTarget: '.e-headercell',\n distance: 5,\n helper: this.helper,\n dragStart: this.dragStart,\n drag: this.drag,\n dragStop: this.dragStop,\n abort: '.e-rhandler',\n isReplaceDragEle: this.isReplaceDragEle\n });\n this.parent.on(events.destroy, this.droppableDestroy, this);\n };\n HeaderRender.prototype.initializeHeaderDrop = function () {\n var gObj = this.parent;\n this.droppable = new Droppable(gObj.getHeaderContent(), {\n accept: '.e-dragclone',\n drop: this.drop\n });\n this.parent.on(events.destroy, this.droppableDestroy, this);\n };\n HeaderRender.prototype.droppableDestroy = function () {\n if (this.droppable && !this.droppable.isDestroyed) {\n this.droppable.destroy();\n }\n if (this.draggable && !this.draggable.isDestroyed) {\n this.draggable.destroy();\n }\n };\n HeaderRender.prototype.renderCustomToolbar = function () {\n var _this = this;\n var gObj = this.parent;\n if (gObj.rowRenderingMode === 'Vertical' && !gObj.toolbar\n && (gObj.allowSorting || (gObj.allowFiltering && gObj.filterSettings.type !== 'FilterBar'))) {\n var div = gObj.createElement('div', { className: 'e-res-toolbar e-toolbar' });\n var toolbarItems = gObj.createElement('div', { className: 'e-toolbar-items' });\n var toolbarLeft = gObj.createElement('div', { className: 'e-toolbar-left' });\n var count = this.parent.allowFiltering && this.parent.allowSorting ? 2 : 1;\n for (var i = 0; i < count; i++) {\n var toolbarItem = gObj.createElement('div', { className: 'e-toolbar-item e-gridresponsiveicons e-icons e-tbtn-align' });\n var cls = count === 1 ? this.parent.allowSorting ? 'sort'\n : 'filter' : i === 1 ? 'sort' : 'filter';\n var button = gObj.createElement('button', { className: 'e-tbar-btn e-control e-btn e-lib e-icon-btn' });\n var span = gObj.createElement('span', { className: 'e-btn-icon e-res' + cls + '-icon e-icons' });\n button.appendChild(span);\n var btnObj = new Button({\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n btnObj.appendTo(button);\n button.onclick = function (e) {\n if (e.target.classList.contains('e-ressort-btn')\n || e.target.classList.contains('e-ressort-icon')) {\n _this.parent.showResponsiveCustomSort();\n }\n else {\n _this.parent.showResponsiveCustomFilter();\n }\n };\n toolbarItem.appendChild(button);\n toolbarLeft.appendChild(toolbarItem);\n }\n toolbarItems.appendChild(toolbarLeft);\n div.appendChild(toolbarItems);\n gObj.element.insertBefore(div, this.parent.element.querySelector('.' + literals.gridHeader));\n }\n else {\n if (gObj.enableAdaptiveUI && !gObj.toolbar) {\n gObj.getContent().classList.add('e-responsive-header');\n }\n }\n };\n HeaderRender.prototype.updateCustomResponsiveToolbar = function (args) {\n var resToolbar = this.parent.element.querySelector('.e-responsive-toolbar');\n if (args.module === 'toolbar') {\n if (resToolbar) {\n remove(resToolbar);\n }\n else {\n this.renderCustomToolbar();\n }\n }\n };\n return HeaderRender;\n}());\nexport { HeaderRender };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined, extend, addClass } from '@syncfusion/ej2-base';\nimport { attributes } from '@syncfusion/ej2-base';\nimport { setStyleAndAttributes, appendChildren, addStickyColumnPosition } from '../base/util';\nimport { CellRenderer } from './cell-renderer';\nimport { AriaService } from '../services/aria-service';\nimport { createCheckBox } from '@syncfusion/ej2-buttons';\nimport { headerCellInfo } from '../base/constant';\n/**\n * HeaderCellRenderer class which responsible for building header cell content.\n *\n * @hidden\n */\nvar HeaderCellRenderer = /** @class */ (function (_super) {\n __extends(HeaderCellRenderer, _super);\n function HeaderCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent\n .createElement('TH', { className: 'e-headercell', attrs: { tabindex: '-1', role: 'columnheader' } });\n _this.ariaService = new AriaService();\n _this.hTxtEle = _this.parent.createElement('span', { className: 'e-headertext' });\n _this.sortEle = _this.parent.createElement('div', { className: 'e-sortfilterdiv e-icons', attrs: { 'aria-hidden': 'true' } });\n _this.gui = _this.parent.createElement('div');\n _this.chkAllBox = _this.parent.createElement('input', { className: 'e-checkselectall', attrs: { 'type': 'checkbox', 'aria-label': _this.localizer.getConstant('SelectAllCheckbox') } });\n return _this;\n }\n /**\n * Function to return the wrapper for the TH content.\n *\n * @returns {string | Element} returns the element\n */\n HeaderCellRenderer.prototype.getGui = function () {\n return this.gui.cloneNode();\n };\n /**\n * Function to render the cell content based on Column object.\n *\n * @param {Cell} cell - specifies the column\n * @param {Object} data - specifies the data\n * @param {object} attributes - specifies the aattributes\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n HeaderCellRenderer.prototype.render = function (cell, data, attributes) {\n var node = this.element.cloneNode();\n var fltrMenuEle = this.parent.createElement('div', { className: 'e-filtermenudiv e-icons e-icon-filter', attrs: { 'aria-hidden': 'true' } });\n return this.prepareHeader(cell, node, fltrMenuEle);\n };\n /**\n * Function to refresh the cell content based on Column object.\n *\n * @param {Cell} cell - specifies the cell\n * @param {Element} node - specifies the noe\n * @returns {Element} returns the element\n */\n HeaderCellRenderer.prototype.refresh = function (cell, node) {\n this.clean(node);\n var fltrMenuEle = this.parent.createElement('div', { className: 'e-filtermenudiv e-icons e-icon-filter', attrs: { 'aria-hidden': 'true' } });\n return this.prepareHeader(cell, node, fltrMenuEle);\n };\n HeaderCellRenderer.prototype.clean = function (node) {\n node.innerHTML = '';\n };\n /* tslint:disable-next-line:max-func-body-length */\n HeaderCellRenderer.prototype.prepareHeader = function (cell, node, fltrMenuEle) {\n var column = cell.column;\n var ariaAttr = {};\n var elementDesc = '';\n //Prepare innerHtml\n var innerDIV = this.getGui();\n var hValueAccer;\n attributes(innerDIV, {\n 'e-mappinguid': column.uid,\n 'class': 'e-headercelldiv'\n });\n if (!isNullOrUndefined(column.headerValueAccessor)) {\n hValueAccer = this.getValue(column.headerText, column);\n }\n if (column.type !== 'checkbox') {\n var value = column.headerText;\n if (!isNullOrUndefined(hValueAccer)) {\n value = hValueAccer;\n }\n var headerText = this.hTxtEle.cloneNode();\n headerText[column.getDomSetter()] = this.parent.sanitize(value);\n innerDIV.appendChild(headerText);\n }\n else {\n column.editType = 'booleanedit';\n var checkAllWrap = createCheckBox(this.parent.createElement, false, { checked: false, label: ' ' });\n this.chkAllBox.id = 'checkbox-' + column.uid;\n checkAllWrap.insertBefore(this.chkAllBox.cloneNode(), checkAllWrap.firstChild);\n if (this.parent.cssClass) {\n addClass([checkAllWrap], [this.parent.cssClass]);\n }\n innerDIV.appendChild(checkAllWrap);\n innerDIV.classList.add('e-headerchkcelldiv');\n }\n this.buildAttributeFromCell(node, cell);\n this.appendHtml(node, innerDIV);\n node.appendChild(this.sortEle.cloneNode());\n if ((this.parent.allowFiltering && this.parent.filterSettings.type !== 'FilterBar') &&\n (column.allowFiltering && !isNullOrUndefined(column.field)) &&\n !(this.parent.showColumnMenu && column.showColumnMenu)) {\n attributes(fltrMenuEle, {\n 'e-mappinguid': 'e-flmenu-' + column.uid\n });\n elementDesc = elementDesc.length ? elementDesc + '. ' + this.localizer.getConstant('FilterDescription') : this.localizer.getConstant('FilterDescription');\n node.classList.add('e-fltr-icon');\n var matchFlColumns = [];\n if (this.parent.filterSettings.columns.length && this.parent.filterSettings.columns.length !== matchFlColumns.length) {\n var foreignColumn = this.parent.getForeignKeyColumns();\n for (var index = 0; index < this.parent.columns.length; index++) {\n for (var count = 0; count < this.parent.filterSettings.columns.length; count++) {\n if (this.parent.filterSettings.columns[parseInt(count.toString(), 10)].field === column.field\n || (foreignColumn.length\n && column.foreignKeyValue === this.parent.filterSettings.columns[parseInt(count.toString(), 10)].field)) {\n fltrMenuEle.classList.add('e-filtered');\n matchFlColumns.push(column.field);\n break;\n }\n }\n }\n }\n node.appendChild(fltrMenuEle.cloneNode());\n }\n if (cell.className) {\n node.classList.add(cell.className);\n }\n if (column.customAttributes) {\n setStyleAndAttributes(node, column.customAttributes);\n }\n if (this.parent.allowSorting && column.allowSorting) {\n ariaAttr.sort = 'none';\n elementDesc = elementDesc.length ? elementDesc + '. ' + this.localizer.getConstant('SortDescription') : this.localizer.getConstant('SortDescription');\n }\n if ((this.parent.allowGrouping && column.allowGrouping) || this.parent.allowReordering && column.allowReordering) {\n ariaAttr.grabbed = false;\n elementDesc = elementDesc.length ? elementDesc + '. ' + this.localizer.getConstant('GroupDescription') : this.localizer.getConstant('GroupDescription');\n }\n if (this.parent.showColumnMenu && column.type !== 'checkbox' && !column.template) {\n elementDesc = elementDesc.length ? elementDesc + '. ' + this.localizer.getConstant('ColumnMenuDescription') : this.localizer.getConstant('ColumnMenuDescription');\n }\n node = this.extendPrepareHeader(column, node);\n var result;\n var gridObj = this.parent;\n var colIndex = gridObj.getColumnIndexByField(column.field);\n if (!isNullOrUndefined(column.headerTemplate)) {\n //need to pass the template id for blazor headertemplate\n var headerTempID = gridObj.element.id + column.uid + 'headerTemplate';\n var str = 'isStringTemplate';\n var col = column;\n var isReactCompiler = this.parent.isReact && typeof (column.headerTemplate) !== 'string';\n var isReactChild_1 = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n if (isReactCompiler || isReactChild_1) {\n var copied = { 'index': colIndex };\n node.firstElementChild.innerHTML = '';\n column.getHeaderTemplate()(extend(copied, col), gridObj, 'headerTemplate', headerTempID, this.parent[\"\" + str], null, node.firstElementChild);\n this.parent.renderTemplates();\n }\n else {\n result = column.getHeaderTemplate()(extend({ 'index': colIndex }, col), gridObj, 'headerTemplate', headerTempID, this.parent[\"\" + str], undefined, undefined, this.parent['root']);\n node.firstElementChild.innerHTML = '';\n appendChildren(node.firstElementChild, result);\n }\n }\n this.ariaService.setOptions(node, ariaAttr);\n if (!isNullOrUndefined(column.headerTextAlign) || !isNullOrUndefined(column.textAlign)) {\n var alignment = column.headerTextAlign || column.textAlign;\n innerDIV.style.textAlign = alignment;\n if (alignment === 'Right' || alignment === 'Left') {\n node.classList.add(alignment === 'Right' ? 'e-rightalign' : 'e-leftalign');\n }\n else if (alignment === 'Center') {\n node.classList.add('e-centeralign');\n }\n }\n if (column.clipMode === 'Clip' || (!column.clipMode && this.parent.clipMode === 'Clip')) {\n node.classList.add('e-gridclip');\n }\n else if ((column.clipMode === 'EllipsisWithTooltip' || (!column.clipMode && this.parent.clipMode === 'EllipsisWithTooltip'))\n && !(gridObj.allowTextWrap && (gridObj.textWrapSettings.wrapMode === 'Header'\n || gridObj.textWrapSettings.wrapMode === 'Both'))) {\n if (column.type !== 'checkbox') {\n node.classList.add('e-ellipsistooltip');\n }\n }\n if (elementDesc) {\n var titleElem = (this.parent.createElement('span', { id: 'headerTitle-' + column.uid, innerHTML: elementDesc, attrs: { style: 'display:none' } }));\n node.appendChild(titleElem);\n node.setAttribute('aria-describedby', titleElem.id);\n }\n node.setAttribute('aria-rowspan', (!isNullOrUndefined(cell.rowSpan) ? cell.rowSpan : 1).toString());\n node.setAttribute('aria-colspan', '1');\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n if (((this.parent.isReact && this.parent.requireTemplateRef)\n || (isReactChild && this.parent.parentDetails.parentInstObj.requireTemplateRef))\n && !isNullOrUndefined(column.headerTemplate)) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var thisRef_1 = this;\n thisRef_1.parent.renderTemplates(function () {\n thisRef_1.parent.trigger(headerCellInfo, { cell: cell, node: node });\n });\n }\n else {\n this.parent.trigger(headerCellInfo, { cell: cell, node: node });\n }\n if (this.parent.isFrozenGrid()) {\n addStickyColumnPosition(this.parent, column, node);\n }\n return node;\n };\n HeaderCellRenderer.prototype.getValue = function (field, column) {\n return column.headerValueAccessor(field, column);\n };\n HeaderCellRenderer.prototype.extendPrepareHeader = function (column, node) {\n if (this.parent.showColumnMenu && column.showColumnMenu && !isNullOrUndefined(column.field)) {\n var element = (this.parent.createElement('div', { className: 'e-icons e-columnmenu', attrs: { 'aria-hidden': 'true' } }));\n var matchFilteredColumns = [];\n if (this.parent.filterSettings.columns.length && this.parent.filterSettings.columns.length !== matchFilteredColumns.length) {\n for (var i = 0; i < this.parent.columns.length; i++) {\n for (var j = 0; j < this.parent.filterSettings.columns.length; j++) {\n if (this.parent.filterSettings.columns[parseInt(j.toString(), 10)].field === column.field) {\n element.classList.add('e-filtered');\n matchFilteredColumns.push(column.field);\n break;\n }\n }\n }\n }\n node.classList.add('e-fltr-icon');\n node.appendChild(element);\n }\n if (this.parent.allowResizing) {\n var handler = this.parent.createElement('div');\n handler.className = column.allowResizing ? 'e-rhandler e-rcursor' : 'e-rsuppress';\n node.appendChild(handler);\n }\n return node;\n };\n /**\n * Function to specifies how the result content to be placed in the cell.\n *\n * @param {Element} node - specifies the node\n * @param {string|Element} innerHtml - specifies the innerHtml\n * @returns {Element} returns the element\n */\n HeaderCellRenderer.prototype.appendHtml = function (node, innerHtml) {\n node.appendChild(innerHtml);\n return node;\n };\n return HeaderCellRenderer;\n}(CellRenderer));\nexport { HeaderCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\nimport { headerCellInfo } from '../base/constant';\nimport { setStyleAndAttributes, appendChildren, frozenDirection, isChildColumn, applyStickyLeftRightPosition } from '../base/util';\n/**\n * StackedHeaderCellRenderer class which responsible for building stacked header cell content.\n *\n * @hidden\n */\nvar StackedHeaderCellRenderer = /** @class */ (function (_super) {\n __extends(StackedHeaderCellRenderer, _super);\n function StackedHeaderCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', {\n className: 'e-headercell e-stackedheadercell', attrs: {\n tabindex: '-1', role: 'columnheader'\n }\n });\n return _this;\n }\n /**\n * Function to render the cell content based on Column object.\n *\n * @param {Cell
} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @param {object} attributes - specifies the attributes\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n StackedHeaderCellRenderer.prototype.render = function (cell, data, attributes) {\n var node = this.element.cloneNode();\n var div = this.parent.createElement('div', {\n className: 'e-stackedheadercelldiv',\n attrs: { 'e-mappinguid': cell.column.uid }\n });\n var column = cell.column;\n node.appendChild(div);\n if (!isNullOrUndefined(column.headerTemplate)) {\n appendChildren(div, column.getHeaderTemplate()(column, this.parent, 'headerTemplate'));\n }\n else {\n this.appendHtml(div, this.parent.sanitize(column.headerText), column.getDomSetter());\n }\n if (cell.column.toolTip) {\n node.setAttribute('title', cell.column.toolTip);\n }\n if (column.clipMode === 'Clip' || (!column.clipMode && this.parent.clipMode === 'Clip')) {\n node.classList.add('e-gridclip');\n }\n else if (column.clipMode === 'EllipsisWithTooltip' || (!column.clipMode && this.parent.clipMode === 'EllipsisWithTooltip')) {\n node.classList.add('e-ellipsistooltip');\n }\n if (!isNullOrUndefined(cell.column.textAlign)) {\n div.style.textAlign = cell.column.textAlign;\n }\n if (cell.column.customAttributes) {\n setStyleAndAttributes(node, cell.column.customAttributes);\n }\n node.setAttribute('colspan', cell.colSpan.toString());\n node.setAttribute('aria-colspan', cell.colSpan.toString());\n node.setAttribute('aria-rowspan', '1');\n if (this.parent.allowResizing) {\n var handler = this.parent.createElement('div');\n handler.className = cell.column.allowResizing ? 'e-rhandler e-rcursor' : 'e-rsuppress';\n node.appendChild(handler);\n }\n if (cell.className) {\n node.classList.add(cell.className);\n }\n this.parent.trigger(headerCellInfo, { cell: cell, node: node });\n if (frozenDirection(column) === 'Left') {\n node.classList.add('e-leftfreeze');\n if (column.border === 'Left') {\n node.classList.add('e-freezeleftborder');\n }\n if (column.index === 0) {\n applyStickyLeftRightPosition(node, (this.parent.getIndentCount() * 30), this.parent.enableRtl, 'Left');\n }\n else {\n var cols = this.parent.getColumns();\n var width = this.parent.getIndentCount() * 30;\n for (var i = 0; i < cols.length; i++) {\n if (column.index < cols[parseInt(i.toString(), 10)].index) {\n break;\n }\n if (cols[parseInt(i.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(i.toString(), 10)].width.toString());\n }\n }\n applyStickyLeftRightPosition(node, width, this.parent.enableRtl, 'Left');\n }\n }\n else if (frozenDirection(column) === 'Right') {\n node.classList.add('e-rightfreeze');\n var cols = this.parent.getColumns();\n var width = this.parent.getFrozenMode() === 'Right' && this.parent.isRowDragable() ? 30 : 0;\n for (var i = cols.length - 1; i >= 0; i--) {\n if (isChildColumn(column, cols[parseInt(i.toString(), 10)].uid) || column.index > cols[parseInt(i.toString(), 10)].index) {\n break;\n }\n if (cols[parseInt(i.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(i.toString(), 10)].width.toString());\n }\n }\n applyStickyLeftRightPosition(node, width, this.parent.enableRtl, 'Right');\n if (column.border === 'Right') {\n node.classList.add('e-freezerightborder');\n }\n }\n else if (frozenDirection(column) === 'Fixed') {\n node.classList.add('e-fixedfreeze');\n var cols = this.parent.getColumns();\n var width = 0;\n if (this.parent.getVisibleFrozenLeftCount()) {\n width = this.parent.getIndentCount() * 30;\n }\n else if (this.parent.getFrozenMode() === 'Right') {\n width = this.parent.groupSettings.columns.length * 30;\n }\n for (var i = 0; i < cols.length; i++) {\n if (column.index > cols[parseInt(i.toString(), 10)].index) {\n if ((cols[parseInt(i.toString(), 10)].freeze === 'Left' || cols[parseInt(i.toString(), 10)].isFrozen) ||\n cols[parseInt(i.toString(), 10)].freeze === 'Fixed') {\n if (cols[parseInt(i.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(i.toString(), 10)].width.toString());\n }\n }\n }\n }\n applyStickyLeftRightPosition(node, width - 1, this.parent.enableRtl, 'Left');\n width = this.parent.getFrozenMode() === 'Right' && this.parent.isRowDragable() ? 30 : 0;\n for (var i = cols.length - 1; i >= 0; i--) {\n if (column.index < cols[parseInt(i.toString(), 10)].index) {\n if (isChildColumn(column, cols[parseInt(i.toString(), 10)].uid) ||\n column.index > cols[parseInt(i.toString(), 10)].index) {\n break;\n }\n if (cols[parseInt(i.toString(), 10)].freeze === 'Right' || cols[parseInt(i.toString(), 10)].freeze === 'Fixed') {\n if (cols[parseInt(i.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(i.toString(), 10)].width.toString());\n }\n }\n }\n }\n applyStickyLeftRightPosition(node, width - 1, this.parent.enableRtl, 'Right');\n }\n else {\n node.classList.add('e-unfreeze');\n }\n return node;\n };\n return StackedHeaderCellRenderer;\n}(CellRenderer));\nexport { StackedHeaderCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { setStyleAndAttributes } from '../base/util';\nimport { CellRenderer } from './cell-renderer';\n/**\n * IndentCellRenderer class which responsible for building group indent cell.\n *\n * @hidden\n */\nvar IndentCellRenderer = /** @class */ (function (_super) {\n __extends(IndentCellRenderer, _super);\n function IndentCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TD', { className: 'e-indentcell' });\n return _this;\n }\n /**\n * Function to render the indent cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n IndentCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n setStyleAndAttributes(node, cell.attributes);\n return node;\n };\n return IndentCellRenderer;\n}(CellRenderer));\nexport { IndentCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\nimport { appendChildren, templateCompiler } from '../base/util';\nimport { CellType } from '../base/enum';\n/**\n * GroupCaptionCellRenderer class which responsible for building group caption cell.\n *\n * @hidden\n */\nvar GroupCaptionCellRenderer = /** @class */ (function (_super) {\n __extends(GroupCaptionCellRenderer, _super);\n function GroupCaptionCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.cellUid = 0;\n _this.element = _this.parent\n .createElement('TD', { className: 'e-groupcaption',\n attrs: { id: _this.parent.element.id + 'captioncell', tabindex: '-1' } });\n return _this;\n }\n /**\n * Function to render the cell content based on Column object.\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the GroupedData\n * @returns {Element} returns the element\n */\n GroupCaptionCellRenderer.prototype.render = function (cell, data) {\n this.element.id = this.parent.element.id + 'captioncell' + this.cellUid++;\n var node = this.element.cloneNode();\n var gObj = this.parent;\n var column = cell.column;\n var domSetter = column.getDomSetter ? column.getDomSetter() : 'innerHTML';\n var result;\n var fKeyValue;\n var gTemplateValue;\n data.headerText = cell.column.headerText;\n if (cell.isForeignKey) {\n fKeyValue = this.format(cell.column, cell.column.valueAccessor('foreignKey', data, cell.column));\n }\n var value = cell.isForeignKey ? fKeyValue : cell.column.enableGroupByFormat ? data.key :\n this.format(cell.column, cell.column.valueAccessor('key', data, cell.column));\n for (var j = 0; j < gObj.aggregates.length; j++) {\n var _loop_1 = function (i) {\n if (gObj.getVisibleColumns()[0].field === gObj.aggregates[parseInt(j.toString(), 10)].columns[parseInt(i.toString(), 10)]\n .field && gObj.aggregates[parseInt(j.toString(), 10)].columns[parseInt(i.toString(), 10)].groupCaptionTemplate) {\n var gCaptionTemp = gObj.aggregates[parseInt(j.toString(), 10)]\n .columns[parseInt(i.toString(), 10)].groupCaptionTemplate;\n if (typeof gCaptionTemp === 'string' && gCaptionTemp.includes('$')) {\n gTemplateValue = gObj.aggregates[parseInt(j.toString(), 10)].columns[parseInt(i.toString(), 10)]\n .groupCaptionTemplate.split('$')[0] + data[gObj.getVisibleColumns()[0].field][gObj\n .aggregates[parseInt(j.toString(), 10)].columns[parseInt(i.toString(), 10)].type] +\n gObj.aggregates[parseInt(j.toString(), 10)].columns[parseInt(i.toString(), 10)]\n .groupCaptionTemplate.split('}')[1];\n }\n else {\n var column_1 = (gObj.aggregates[parseInt(j.toString(), 10)]\n .columns[parseInt(i.toString(), 10)]);\n var tempObj = column_1.getTemplate(CellType.CaptionSummary);\n var tempID = '';\n if (!isNullOrUndefined(tempObj)) {\n var tempValue_1 = tempObj.fn(data[column_1.columnName], this_1.parent, tempObj.property, tempID);\n if (this_1.parent.isReact && typeof column_1.groupCaptionTemplate !== 'string') {\n this_1.parent.renderTemplates(function () {\n if (tempValue_1 && tempValue_1.length) {\n if (!isNullOrUndefined(gObj.groupSettings.captionTemplate)) {\n node.appendChild(tempValue_1[0]);\n }\n else {\n node.innerText += ' ' + tempValue_1[0].textContent;\n }\n }\n });\n }\n else {\n if (tempValue_1 && tempValue_1.length) {\n if (!isNullOrUndefined(gObj.groupSettings.captionTemplate)) {\n gTemplateValue = tempValue_1;\n }\n else {\n gTemplateValue = tempValue_1[0].textContent;\n }\n }\n }\n }\n }\n return \"break\";\n }\n };\n var this_1 = this;\n for (var i = 0; i < gObj.aggregates[parseInt(j.toString(), 10)].columns.length; i++) {\n var state_1 = _loop_1(i);\n if (state_1 === \"break\")\n break;\n }\n }\n if (!isNullOrUndefined(gObj.groupSettings.captionTemplate)) {\n var isReactCompiler = this.parent.isReact && typeof (gObj.groupSettings.captionTemplate) !== 'string';\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n if (isReactCompiler || isReactChild) {\n var tempID = gObj.element.id + 'captionTemplate';\n templateCompiler(gObj.groupSettings.captionTemplate)(data, this.parent, 'captionTemplate', tempID, null, null, node);\n this.parent.renderTemplates();\n }\n else if (this.parent.isVue) {\n result = templateCompiler(gObj.groupSettings.captionTemplate)(data, this.parent);\n }\n else {\n result = templateCompiler(gObj.groupSettings.captionTemplate)(data);\n }\n if (!isReactCompiler && !isReactChild) {\n appendChildren(node, result);\n if (gTemplateValue && gTemplateValue.length && gTemplateValue[0].textContent) {\n node.appendChild(gTemplateValue[0]);\n }\n }\n }\n else {\n if (gObj.groupSettings.enableLazyLoading) {\n node[\"\" + domSetter] = this.parent.sanitize(cell.column.headerText) + ': ' + this.parent.sanitize(value) +\n (gTemplateValue ? ' ' + gTemplateValue : '');\n }\n else {\n node[\"\" + domSetter] = this.parent.sanitize(cell.column.headerText) + ': ' + this.parent.sanitize(value) +\n ' - ' + data.count + ' ' + (data.count < 2 ? this.localizer.getConstant('Item') : this.localizer.getConstant('Items'))\n + (gTemplateValue ? ' ' + gTemplateValue : '');\n }\n }\n node.setAttribute('colspan', cell.colSpan.toString());\n node.setAttribute('aria-label', node.innerHTML + this.localizer.getConstant('GroupCaption'));\n node.setAttribute('title', node.textContent);\n return node;\n };\n return GroupCaptionCellRenderer;\n}(CellRenderer));\nexport { GroupCaptionCellRenderer };\n/**\n * GroupCaptionEmptyCellRenderer class which responsible for building group caption empty cell.\n *\n * @hidden\n */\nvar GroupCaptionEmptyCellRenderer = /** @class */ (function (_super) {\n __extends(GroupCaptionEmptyCellRenderer, _super);\n function GroupCaptionEmptyCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TD', { className: 'e-groupcaption' });\n return _this;\n }\n /**\n * Function to render the cell content based on Column object.\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the Object\n * @param {string} data.field - Defines the field\n * @param {string} data.key - Defines the key\n * @param {number} data.count - Defines the count\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n GroupCaptionEmptyCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.innerHTML = ' ';\n node.setAttribute('colspan', cell.colSpan.toString());\n return node;\n };\n return GroupCaptionEmptyCellRenderer;\n}(CellRenderer));\nexport { GroupCaptionEmptyCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { IndentCellRenderer } from './indent-cell-renderer';\nimport { CellType } from '../base/enum';\n/**\n * ExpandCellRenderer class which responsible for building group expand cell.\n *\n * @hidden\n */\nvar ExpandCellRenderer = /** @class */ (function (_super) {\n __extends(ExpandCellRenderer, _super);\n function ExpandCellRenderer() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Function to render the expand cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @param {string} data.field - Defines the field\n * @param {string} data.key - Defines the key\n * @param {Object} attr - specifies the attribute\n * @param {boolean} isExpand - specifies isexpand\n * @returns {Element} returns the element\n */\n ExpandCellRenderer.prototype.render = function (cell, data, attr, isExpand) {\n var node = this.element.cloneNode();\n node.setAttribute('ej-mappingname', data.field);\n node.setAttribute('ej-mappingvalue', data.key);\n node.setAttribute('aria-expanded', isExpand ? 'true' : 'false');\n node.setAttribute('tabindex', '-1');\n if (this.parent.infiniteScrollSettings && this.parent.infiniteScrollSettings.enableCache) {\n cell.cellType = CellType.Indent;\n node.className = isExpand ? 'e-recordplusexpand e-disablepointer' : 'e-recordpluscollapse e-disablepointer';\n }\n else {\n node.className = isExpand ? 'e-recordplusexpand' : 'e-recordpluscollapse';\n node.appendChild(this.parent.createElement('a', {\n className: isExpand ? 'e-icons e-gdiagonaldown e-icon-gdownarrow' : 'e-icons e-gnextforward e-icon-grightarrow',\n attrs: { href: '#', 'title': isExpand ? 'expanded' : 'collapsed' }\n }));\n }\n return node;\n };\n return ExpandCellRenderer;\n}(IndentCellRenderer));\nexport { ExpandCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { CellRenderer } from './cell-renderer';\n/**\n * HeaderIndentCellRenderer class which responsible for building header indent cell.\n *\n * @hidden\n */\nvar HeaderIndentCellRenderer = /** @class */ (function (_super) {\n __extends(HeaderIndentCellRenderer, _super);\n function HeaderIndentCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', { className: 'e-grouptopleftcell' });\n return _this;\n }\n /**\n * Function to render the indent cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n HeaderIndentCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.appendChild(this.parent.createElement('div', { className: 'e-headercelldiv e-emptycell', innerHTML: '' }));\n return node;\n };\n return HeaderIndentCellRenderer;\n}(CellRenderer));\nexport { HeaderIndentCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { CellRenderer } from './cell-renderer';\n/**\n * DetailHeaderIndentCellRenderer class which responsible for building detail header indent cell.\n *\n * @hidden\n */\nvar DetailHeaderIndentCellRenderer = /** @class */ (function (_super) {\n __extends(DetailHeaderIndentCellRenderer, _super);\n function DetailHeaderIndentCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', { className: 'e-detailheadercell' });\n return _this;\n }\n /**\n * Function to render the detail indent cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DetailHeaderIndentCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.appendChild(this.parent.createElement('div', { className: 'e-emptycell' }));\n return node;\n };\n return DetailHeaderIndentCellRenderer;\n}(CellRenderer));\nexport { DetailHeaderIndentCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\n/**\n * ExpandCellRenderer class which responsible for building group expand cell.\n *\n * @hidden\n */\nvar DetailExpandCellRenderer = /** @class */ (function (_super) {\n __extends(DetailExpandCellRenderer, _super);\n function DetailExpandCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TD', {\n className: 'e-detailrowcollapse',\n attrs: { 'aria-expanded': 'false', tabindex: '-1' }\n });\n return _this;\n }\n /**\n * Function to render the detail expand cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @param {Object} attributes - specifies the attributes\n * @returns {Element} returns the element\n */\n DetailExpandCellRenderer.prototype.render = function (cell, data, attributes) {\n var node = this.element.cloneNode();\n if (attributes && !isNullOrUndefined(attributes['class'])) {\n node.className = '';\n node.className = attributes['class'];\n node.appendChild(this.parent.createElement('a', { className: 'e-icons e-dtdiagonaldown e-icon-gdownarrow', attrs: {\n href: '#', 'title': this.localizer.getConstant('Expanded')\n } }));\n }\n else {\n node.appendChild(this.parent.createElement('a', { className: 'e-icons e-dtdiagonalright e-icon-grightarrow', attrs: {\n href: '#', 'title': this.localizer.getConstant('Collapsed')\n } }));\n }\n if (cell.isSelected) {\n node.classList.add('e-selectionbackground', 'e-active');\n }\n return node;\n };\n return DetailExpandCellRenderer;\n}(CellRenderer));\nexport { DetailExpandCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { CellRenderer } from './cell-renderer';\nimport { applyStickyLeftRightPosition } from '../base/util';\n/**\n * ExpandCellRenderer class which responsible for building group expand cell.\n *\n * @hidden\n */\nvar RowDragDropRenderer = /** @class */ (function (_super) {\n __extends(RowDragDropRenderer, _super);\n function RowDragDropRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TD', {\n className: 'e-rowdragdrop e-rowdragdropcell',\n attrs: { tabindex: '-1', role: 'gridcell' }\n });\n return _this;\n }\n /**\n * Function to render the detail expand cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n RowDragDropRenderer.prototype.render = function (cell, data) {\n var nodeElement = this.element.cloneNode();\n nodeElement.appendChild(this.parent.createElement('div', {\n className: 'e-icons e-rowcelldrag e-dtdiagonalright e-icon-rowdragicon',\n attrs: { 'aria-hidden': 'true' }\n }));\n if (cell.isSelected) {\n nodeElement.classList.add('e-selectionbackground');\n nodeElement.classList.add('e-active');\n }\n if (this.parent.getVisibleFrozenRightCount() || this.parent.getVisibleFrozenLeftCount()) {\n nodeElement.classList.add('e-leftfreeze');\n var width = this.parent.getFrozenMode() === 'Right' ? 0 : this.parent.groupSettings.columns.length * 30;\n applyStickyLeftRightPosition(nodeElement, width, this.parent.enableRtl, this.parent.getFrozenMode() === 'Right' ? 'Right' : 'Left');\n }\n return nodeElement;\n };\n return RowDragDropRenderer;\n}(CellRenderer));\nexport { RowDragDropRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { createElement } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\nimport { applyStickyLeftRightPosition } from '../base/util';\n/**\n * DetailHeaderIndentCellRenderer class which responsible for building detail header indent cell.\n *\n * @hidden\n */\nvar RowDragDropHeaderRenderer = /** @class */ (function (_super) {\n __extends(RowDragDropHeaderRenderer, _super);\n function RowDragDropHeaderRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', { className: 'e-rowdragheader' });\n return _this;\n }\n /**\n * Function to render the detail indent cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n RowDragDropHeaderRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.appendChild(createElement('div', { className: 'e-emptycell' }));\n if (this.parent.getVisibleFrozenRightCount() || this.parent.getVisibleFrozenLeftCount()) {\n node.classList.add('e-leftfreeze');\n var width = this.parent.getFrozenMode() === 'Right' ? 0 : this.parent.groupSettings.columns.length * 30;\n applyStickyLeftRightPosition(node, width, this.parent.enableRtl, this.parent.getFrozenMode() === 'Right' ? 'Right' : 'Left');\n }\n return node;\n };\n return RowDragDropHeaderRenderer;\n}(CellRenderer));\nexport { RowDragDropHeaderRenderer };\n","import { remove, resetBlazorTemplate, blazorTemplates, getValue } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { DataManager, Query, Deferred, Predicate, DataUtil } from '@syncfusion/ej2-data';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { RenderType, CellType } from '../base/enum';\nimport { Data } from '../actions/data';\nimport { Column } from '../models/column';\nimport { Row } from '../models/row';\nimport { Cell } from '../models/cell';\nimport * as events from '../base/constant';\nimport { prepareColumns, setFormatter, isGroupAdaptive, getDatePredicate, getObject, clearReactVueTemplates } from '../base/util';\nimport { ContentRender } from '../renderer/content-renderer';\nimport { HeaderRender } from '../renderer/header-renderer';\nimport { CellRenderer } from '../renderer/cell-renderer';\nimport { HeaderCellRenderer } from '../renderer/header-cell-renderer';\nimport { StackedHeaderCellRenderer } from '../renderer/stacked-cell-renderer';\nimport { IndentCellRenderer } from '../renderer/indent-cell-renderer';\nimport { GroupCaptionCellRenderer, GroupCaptionEmptyCellRenderer } from '../renderer/caption-cell-renderer';\nimport { ExpandCellRenderer } from '../renderer/expand-cell-renderer';\nimport { HeaderIndentCellRenderer } from '../renderer/header-indent-renderer';\nimport { DetailHeaderIndentCellRenderer } from '../renderer/detail-header-indent-renderer';\nimport { DetailExpandCellRenderer } from '../renderer/detail-expand-cell-renderer';\nimport { RowDragDropRenderer } from './row-drag-drop-renderer';\nimport { RowDragDropHeaderRenderer } from '../renderer/row-drag-header-indent-render';\nimport * as literals from '../base/string-literals';\n/**\n * Content module is used to render grid content\n *\n * @hidden\n */\nvar Render = /** @class */ (function () {\n /**\n * Constructor for render module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {ServiceLocator} locator - specifies the serviceLocator\n */\n function Render(parent, locator) {\n this.emptyGrid = false;\n this.counter = 0;\n this.parent = parent;\n this.locator = locator;\n this.data = new Data(parent, locator);\n this.l10n = locator.getService('localization');\n this.ariaService = this.locator.getService('ariaService');\n this.renderer = this.locator.getService('rendererFactory');\n this.addEventListener();\n }\n /**\n * To initialize grid header, content and footer rendering\n *\n * @returns {void}\n */\n Render.prototype.render = function () {\n var gObj = this.parent;\n this.headerRenderer = this.renderer.getRenderer(RenderType.Header);\n this.contentRenderer = this.renderer.getRenderer(RenderType.Content);\n this.headerRenderer.renderPanel();\n this.contentRenderer.renderPanel();\n if (gObj.getColumns().length) {\n this.isLayoutRendered = true;\n this.headerRenderer.renderTable();\n this.contentRenderer.renderTable();\n this.emptyRow(false);\n }\n this.parent.scrollModule.setWidth();\n this.parent.scrollModule.setHeight();\n if (this.parent.height !== 'auto') {\n this.parent.scrollModule.setPadding();\n }\n this.refreshDataManager();\n };\n /**\n * Refresh the entire Grid.\n *\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n */\n Render.prototype.refresh = function (e) {\n var _this = this;\n if (e === void 0) { e = { requestType: 'refresh' }; }\n var gObj = this.parent;\n gObj.notify(e.requestType + \"-begin\", e);\n gObj.trigger(events.actionBegin, e, function (args) {\n if (args === void 0) { args = { requestType: 'refresh' }; }\n if (args.cancel) {\n gObj.notify(events.cancelBegin, args);\n if (args.action === 'clearFilter' && _this.parent.filterSettings.type === 'Menu') {\n _this.parent.filterSettings.columns[_this.parent.filterModule.filterObjIndex] = _this.parent.filterModule.prevFilterObject;\n var iconClass = _this.parent.showColumnMenu && _this.parent.filterModule['column'].showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';\n var col = _this.parent.element.querySelector('[e-mappinguid=\"' + _this.parent.filterModule['column'].uid + '\"]').parentElement;\n var flIcon = col.querySelector(iconClass);\n if (!isNullOrUndefined(_this.parent.filterModule.prevFilterObject)) {\n flIcon.classList.add('e-filtered');\n }\n }\n if (args.action === 'clear-filter' && (_this.parent.filterSettings.type === 'CheckBox' || _this.parent.filterSettings.type === 'Excel')) {\n _this.parent.filterSettings.columns = _this.parent.filterModule.checkboxPrevFilterObject;\n }\n if (args.requestType === 'grouping') {\n // Remove the dropped column name from groupsettings.columns if args.cancel is true \n var index = gObj.groupSettings.columns.indexOf(args.columnName);\n if (index !== -1) {\n gObj.setProperties({ groupSettings: { Columns: gObj.groupSettings.columns.splice(index, 1) } }, true);\n gObj.setProperties({ sortSettings: { Columns: gObj.sortSettings.columns.splice(index, 1) } }, true);\n var column = gObj.getColumnByField(args.columnName);\n var headerCell = gObj.getColumnHeaderByField(column.field);\n column.visible = (!isNullOrUndefined(headerCell) && !headerCell.classList.contains('e-hide'));\n }\n }\n return;\n }\n if (gObj.allowSelection && (args.action === 'clearFilter' || args.action === 'clear-filter' ||\n (args.requestType === 'searching' && args.searchString === '') || args.action === 'add')) {\n gObj.selectionModule['rmtHdrChkbxClicked'] = false;\n }\n if (gObj.allowPaging && gObj.pageSettings.pageSizes && gObj.pagerModule.pagerObj.isAllPage &&\n (args.action === 'add' && args.requestType === 'save') && gObj.pagerModule.pagerObj.checkAll) {\n gObj.setProperties({ pageSettings: { pageSize: gObj.pageSettings.pageSize + 1 } }, true);\n }\n if (args.requestType === 'delete' && gObj.allowPaging) {\n var dataLength = args.data.length;\n var count = gObj.pageSettings.totalRecordsCount - dataLength;\n var currentViewData = gObj.getCurrentViewRecords().length;\n // eslint-disable-next-line max-len\n if ((!(currentViewData - dataLength) && count && ((gObj.pageSettings.currentPage - 1) * gObj.pageSettings.pageSize) === count) || (count && count <= dataLength)) {\n gObj.prevPageMoving = true;\n gObj.setProperties({\n pageSettings: {\n totalRecordsCount: count, currentPage: Math.ceil(count / gObj.pageSettings.pageSize)\n }\n }, true);\n gObj.pagerModule.pagerObj.totalRecordsCount = count;\n }\n }\n if (args.requestType === 'reorder' && _this.parent.dataSource && 'result' in _this.parent.dataSource) {\n _this.contentRenderer.refreshContentRows(args);\n }\n else if ((args.requestType === 'paging' || args.requestType === 'columnstate' || args.requestType === 'reorder')\n && _this.parent.groupSettings.enableLazyLoading && _this.parent.groupSettings.columns.length\n && (_this.parent.enableVirtualization ? _this.parent.lazyLoadRender :\n _this.parent.contentModule).getGroupCache()[_this.parent.pageSettings.currentPage]) {\n _this.contentRenderer.refreshContentRows(args);\n }\n else {\n _this.refreshDataManager(args);\n }\n });\n };\n /**\n * @returns {void}\n * @hidden\n */\n Render.prototype.resetTemplates = function () {\n var gObj = this.parent;\n var gridColumns = gObj.getColumns();\n if (gObj.detailTemplate) {\n var detailTemplateID = gObj.element.id + 'detailTemplate';\n blazorTemplates[\"\" + detailTemplateID] = [];\n resetBlazorTemplate(detailTemplateID, 'DetailTemplate');\n }\n if (gObj.groupSettings.captionTemplate) {\n resetBlazorTemplate(gObj.element.id + 'captionTemplate', 'CaptionTemplate');\n }\n if (gObj.rowTemplate) {\n resetBlazorTemplate(gObj.element.id + 'rowTemplate', 'RowTemplate');\n }\n if (gObj.toolbarTemplate) {\n resetBlazorTemplate(gObj.element.id + 'toolbarTemplate', 'ToolbarTemplate');\n }\n if (gObj.pageSettings.template) {\n resetBlazorTemplate(gObj.element.id + '_template', 'pageSettings');\n }\n for (var i = 0; i < gridColumns.length; i++) {\n if (gridColumns[parseInt(i.toString(), 10)].template) {\n blazorTemplates[gObj.element.id + gridColumns[parseInt(i.toString(), 10)].uid] = [];\n resetBlazorTemplate(gObj.element.id + gridColumns[parseInt(i.toString(), 10)].uid, 'Template');\n }\n if (gridColumns[parseInt(i.toString(), 10)].headerTemplate) {\n resetBlazorTemplate(gObj.element.id + gridColumns[parseInt(i.toString(), 10)].uid + 'headerTemplate', 'HeaderTemplate');\n }\n if (gridColumns[parseInt(i.toString(), 10)].filterTemplate) {\n resetBlazorTemplate(gObj.element.id + gridColumns[parseInt(i.toString(), 10)].uid + 'filterTemplate', 'FilterTemplate');\n }\n }\n var guid = 'guid';\n for (var k = 0; k < gObj.aggregates.length; k++) {\n for (var j = 0; j < gObj.aggregates[parseInt(k.toString(), 10)].columns.length; j++) {\n if (gObj.aggregates[parseInt(k.toString(), 10)].columns[parseInt(j.toString(), 10)].footerTemplate) {\n var tempID = gObj.element.id + gObj.aggregates[parseInt(k.toString(), 10)].columns[parseInt(j.toString(), 10)][\"\" + guid] + 'footerTemplate';\n resetBlazorTemplate(tempID, 'FooterTemplate');\n }\n if (gObj.aggregates[parseInt(k.toString(), 10)].columns[parseInt(j.toString(), 10)].groupFooterTemplate) {\n var tempID = gObj.element.id + gObj.aggregates[parseInt(k.toString(), 10)].columns[parseInt(j.toString(), 10)][\"\" + guid] + 'groupFooterTemplate';\n resetBlazorTemplate(tempID, 'GroupFooterTemplate');\n }\n if (gObj.aggregates[parseInt(k.toString(), 10)].columns[parseInt(j.toString(), 10)].groupCaptionTemplate) {\n var tempID = gObj.element.id + gObj.aggregates[parseInt(k.toString(), 10)].columns[parseInt(j.toString(), 10)][\"\" + guid] + 'groupCaptionTemplate';\n resetBlazorTemplate(tempID, 'GroupCaptionTemplate');\n }\n }\n }\n };\n Render.prototype.refreshComplete = function (e) {\n this.parent.trigger(events.actionComplete, e);\n };\n /**\n * The function is used to refresh the dataManager\n *\n * @param {NotifyArgs} args - specifies the args\n * @returns {void}\n */\n Render.prototype.refreshDataManager = function (args) {\n var _this = this;\n if (args === void 0) { args = {}; }\n var gObj = this.parent;\n var maskRow = (gObj.loadingIndicator.indicatorType === 'Shimmer' && args.requestType !== 'virtualscroll'\n && args.requestType !== 'infiniteScroll') || ((args.requestType === 'virtualscroll' || args.requestType === 'infiniteScroll')\n && gObj.enableVirtualMaskRow);\n if (args.requestType !== 'virtualscroll' && !args.isCaptionCollapse && !maskRow) {\n this.parent.showSpinner();\n }\n if (maskRow) {\n gObj.showMaskRow(args.requestType === 'virtualscroll' ? args.virtualInfo.sentinelInfo.axis\n : args.requestType === 'infiniteScroll' ? args.direction : undefined);\n }\n this.parent.notify(events.resetInfiniteBlocks, args);\n this.emptyGrid = false;\n var dataManager;\n var isFActon = this.isNeedForeignAction();\n this.ariaService.setBusy(this.parent.getContent().querySelector('.' + literals.content), true);\n if (isFActon) {\n var deffered = new Deferred();\n dataManager = this.getFData(deffered, args);\n }\n if (!dataManager) {\n if (gObj.allowPaging && !gObj.getDataModule().dataManager.dataSource.offline && gObj.pageSettings\n && gObj.pageSettings.pageSizes && gObj.pagerModule && gObj.pagerModule.pagerObj && gObj.pagerModule.pagerObj.isAllPage) {\n gObj.pagerModule.pagerObj.isAllPage = undefined;\n }\n dataManager = this.data.getData(args, this.data.generateQuery().requiresCount());\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n dataManager = dataManager.then(function (e) {\n var query = _this.data.generateQuery().requiresCount();\n if (_this.emptyGrid) {\n var def = new Deferred();\n def.resolve({ result: [], count: 0 });\n return def.promise;\n }\n return _this.data.getData(args, query);\n });\n }\n if (this.parent.getForeignKeyColumns().length && (!isFActon || this.parent.searchSettings.key.length)) {\n var deffered_1 = new Deferred();\n dataManager = dataManager.then(function (e) {\n _this.parent.notify(events.getForeignKeyData, { dataManager: dataManager, result: e, promise: deffered_1, action: args });\n return deffered_1.promise;\n });\n }\n if (this.parent.groupSettings.disablePageWiseAggregates && this.parent.groupSettings.columns.length) {\n dataManager = dataManager.then(function (e) { return _this.validateGroupRecords(e); });\n }\n dataManager.then(function (e) { return _this.dataManagerSuccess(e, args); })\n .catch(function (e) { return _this.dataManagerFailure(e, args); });\n };\n Render.prototype.getFData = function (deferred, args) {\n this.parent.notify(events.getForeignKeyData, { isComplex: true, promise: deferred, action: args });\n return deferred.promise;\n };\n Render.prototype.isNeedForeignAction = function () {\n var gObj = this.parent;\n return !!((gObj.allowFiltering && gObj.filterSettings.columns.length) ||\n (gObj.searchSettings.key.length)) && this.foreignKey(this.parent.getForeignKeyColumns());\n };\n Render.prototype.foreignKey = function (columns) {\n var _this = this;\n return columns.some(function (col) {\n var fbool = false;\n fbool = _this.parent.filterSettings.columns.some(function (value) {\n return col.uid === value.uid;\n });\n return !!(fbool || _this.parent.searchSettings.key.length);\n });\n };\n Render.prototype.sendBulkRequest = function (args) {\n var _this = this;\n args.requestType = 'batchsave';\n var gObj = this.parent;\n if (gObj.allowPaging && gObj.pageSettings.pageSizes && gObj.pagerModule.pagerObj.isAllPage && gObj.pagerModule.pagerObj.checkAll) {\n var dataLength = args['changes'].addedRecords.length;\n if (dataLength) {\n gObj.setProperties({ pageSettings: { pageSize: gObj.pageSettings.pageSize + dataLength } }, true);\n }\n }\n if (gObj.allowPaging && (args.changes.addedRecords.length ||\n args.changes.deletedRecords.length ||\n args.changes.changedRecords.length) && gObj.pageSettings\n && gObj.pageSettings.pageSizes && gObj.pagerModule && gObj.pagerModule.pagerObj\n && !gObj.getDataModule().dataManager.dataSource.offline && gObj.pagerModule.pagerObj.isAllPage) {\n gObj.pagerModule.pagerObj.isAllPage = undefined;\n }\n var promise = this.data.saveChanges(args.changes, this.parent.getPrimaryKeyFieldNames()[0], args.original);\n var query = this.data.generateQuery().requiresCount();\n if (this.data.dataManager.dataSource.offline) {\n this.refreshDataManager({ requestType: 'batchsave' });\n return;\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n promise.then(function (e) {\n _this.data.getData(args, query)\n .then(function (e) { return _this.dmSuccess(e, args); })\n .catch(function (e) { return _this.dmFailure(e, args); });\n })\n .catch(function (e) { return _this.dmFailure(e, args); });\n }\n };\n Render.prototype.dmSuccess = function (e, args) {\n this.dataManagerSuccess(e, args);\n };\n Render.prototype.dmFailure = function (e, args) {\n this.dataManagerFailure(e, args);\n };\n /**\n * Render empty row to Grid which is used at the time to represent to no records.\n *\n * @returns {void}\n * @hidden\n */\n Render.prototype.renderEmptyRow = function () {\n this.emptyRow(true);\n };\n Render.prototype.emptyRow = function (isTrigger) {\n var gObj = this.parent;\n var tbody = this.contentRenderer.getTable().querySelector(literals.tbody);\n if (!isNullOrUndefined(tbody)) {\n remove(tbody);\n }\n tbody = this.parent.createElement(literals.tbody, { attrs: { role: 'rowgroup' } });\n var spanCount = gObj.allowRowDragAndDrop && isNullOrUndefined(gObj.rowDropSettings.targetID) ? 1 : 0;\n if (gObj.detailTemplate || gObj.childGrid) {\n ++spanCount;\n }\n var tr = this.parent.createElement('tr', { className: 'e-emptyrow', attrs: { role: 'row' } });\n var td;\n if (gObj.emptyRecordTemplate) {\n var emptyRecordTemplateID = gObj.element.id + 'emptyRecordTemplate';\n td = this.parent.createElement('td', { attrs: { colspan: (gObj.getVisibleColumns().length + spanCount + gObj.groupSettings.columns.length).toString() } });\n if (gObj.isVue) {\n td.appendChild(gObj.getEmptyRecordTemplate()(gObj.dataSource, gObj, 'emptyRecordTemplate', emptyRecordTemplateID, undefined, undefined, undefined, this.parent['root'])[1]);\n }\n else {\n td.appendChild(gObj.getEmptyRecordTemplate()(gObj.dataSource, gObj, 'emptyRecordTemplate', emptyRecordTemplateID, undefined, undefined, undefined, this.parent['root'])[0]);\n }\n if (gObj.isReact) {\n this.parent.renderTemplates();\n }\n }\n else {\n td = this.parent.createElement('td', {\n innerHTML: this.l10n.getConstant('EmptyRecord'),\n attrs: { colspan: (gObj.getVisibleColumns().length + spanCount + gObj.groupSettings.columns.length).toString() }\n });\n }\n if (gObj.isFrozenGrid()) {\n td.classList.add('e-leftfreeze');\n td.style.left = 0 + 'px';\n }\n if (gObj.frozenRows && gObj.element.querySelector('.e-frozenrow-border')) {\n this.parent.element.querySelector('.e-frozenrow-border').classList.add('e-frozenrow-empty');\n }\n tr.appendChild(td);\n tbody.appendChild(tr);\n this.contentRenderer.renderEmpty(tbody);\n if (isTrigger) {\n 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[parseInt(i.toString(), 10)].field || '', data);\n if (!isNullOrUndefined(columns[parseInt(i.toString(), 10)][\"\" + cFormat])) {\n columns[parseInt(i.toString(), 10)].format = columns[parseInt(i.toString(), 10)][\"\" + cFormat];\n }\n if (!isNullOrUndefined(columns[parseInt(i.toString(), 10)].validationRules)\n && !isNullOrUndefined(columns[parseInt(i.toString(), 10)].validationRules[\"\" + equalTo])) {\n columns[parseInt(i.toString(), 10)].validationRules[\"\" + equalTo][0] = this.parent.element.id + columns[parseInt(i.toString(), 10)].validationRules[\"\" + equalTo][0];\n }\n if (columns[parseInt(i.toString(), 10)].isForeignColumn() && columns[parseInt(i.toString(), 10)].columnData) {\n value = getObject(columns[parseInt(i.toString(), 10)].foreignKeyValue || '', columns[parseInt(i.toString(), 10)].columnData[0]);\n }\n if (!isNullOrUndefined(value)) {\n this.isColTypeDef = true;\n if (!columns[parseInt(i.toString(), 10)].type) {\n columns[parseInt(i.toString(), 10)].type = value.getDay ? (value.getHours() > 0 || value.getMinutes() > 0 ||\n value.getSeconds() > 0 || value.getMilliseconds() > 0 ? 'datetime' : 'date') : typeof (value);\n }\n }\n else {\n columns[parseInt(i.toString(), 10)].type = columns[parseInt(i.toString(), 10)].type || null;\n }\n var valueFormatter = new ValueFormatter();\n if (columns[parseInt(i.toString(), 10)].format && (columns[parseInt(i.toString(), 10)].format.skeleton\n || (columns[parseInt(i.toString(), 10)].format.format &&\n typeof columns[parseInt(i.toString(), 10)].format.format === 'string'))) {\n columns[parseInt(i.toString(), 10)].setFormatter(valueFormatter.getFormatFunction(extend({}, columns[parseInt(i.toString(), 10)].format)));\n columns[parseInt(i.toString(), 10)].setParser(valueFormatter.getParserFunction(columns[parseInt(i.toString(), 10)].format));\n }\n if (typeof (columns[parseInt(i.toString(), 10)].format) === 'string') {\n setFormatter(this.locator, columns[parseInt(i.toString(), 10)]);\n }\n else if (!columns[parseInt(i.toString(), 10)].format && columns[parseInt(i.toString(), 10)].type === 'number') {\n columns[parseInt(i.toString(), 10)].setParser(fmtr.getParserFunction({ format: 'n2' }));\n }\n if (columns[parseInt(i.toString(), 10)].type === 'dateonly' && !columns[parseInt(i.toString(), 10)].format) {\n columns[parseInt(i.toString(), 10)].format = 'yMd';\n setFormatter(this.locator, columns[parseInt(i.toString(), 10)]);\n }\n }\n };\n /**\n * @param {ReturnType} e - specifies the return type\n * @param {NotifyArgs} args - specifies the Notifyargs\n * @returns {void}\n * @hidden\n */\n // tslint:disable-next-line:max-func-body-length\n Render.prototype.dataManagerSuccess = function (e, args) {\n var _this = this;\n var gObj = this.parent;\n this.contentRenderer = this.renderer.getRenderer(RenderType.Content);\n this.headerRenderer = this.renderer.getRenderer(RenderType.Header);\n e.actionArgs = args;\n var isInfiniteDelete = this.parent.enableInfiniteScrolling && !this.parent.infiniteScrollSettings.enableCache &&\n !gObj.groupSettings.enableLazyLoading && (args.requestType === 'delete' || (args.requestType === 'save' &&\n this.parent.infiniteScrollModule.requestType === 'add' && !(gObj.sortSettings.columns.length ||\n gObj.filterSettings.columns.length || this.parent.groupSettings.columns.length || gObj.searchSettings.key)));\n // tslint:disable-next-line:max-func-body-length\n gObj.trigger(events.beforeDataBound, e, function (dataArgs) {\n if (dataArgs.cancel) {\n return;\n }\n dataArgs.result = isNullOrUndefined(dataArgs.result) ? [] : dataArgs.result;\n var len = Object.keys(dataArgs.result).length;\n if (_this.parent.isDestroyed) {\n return;\n }\n if ((!gObj.getColumns().length && !len) && !(gObj.columns.length && gObj.columns[0] instanceof Column)) {\n gObj.hideSpinner();\n return;\n }\n if (_this.isInfiniteEnd(args) && !len) {\n _this.parent.notify(events.infiniteEditHandler, { e: args, result: e.result, count: e.count, agg: e.aggregates });\n return;\n }\n _this.parent.isEdit = false;\n _this.parent.notify(events.editReset, {});\n _this.parent.notify(events.tooltipDestroy, {});\n if (args && args.requestType !== 'infiniteScroll') {\n _this.parent.notify(events.commandColumnDestroy, { type: 'refreshCommandColumn' });\n }\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 (dataArgs.count && !gObj.allowPaging && (gObj.enableVirtualization || gObj.enableInfiniteScrolling)) {\n gObj.totalDataRecordsCount = dataArgs.count;\n }\n if (!len && dataArgs.count && gObj.allowPaging && args && args.requestType !== 'delete') {\n if (_this.parent.groupSettings.enableLazyLoading\n && (args.requestType === 'grouping' || args.requestType === 'ungrouping')) {\n _this.parent.notify(events.groupComplete, args);\n }\n gObj.prevPageMoving = true;\n gObj.pageSettings.totalRecordsCount = dataArgs.count;\n if (args.requestType !== 'paging') {\n gObj.pageSettings.currentPage = Math.ceil(dataArgs.count / gObj.pageSettings.pageSize);\n }\n gObj.dataBind();\n return;\n }\n if ((!gObj.getColumns().length && len || !_this.isLayoutRendered) && !isGroupAdaptive(gObj)) {\n gObj.removeMaskRow();\n _this.updatesOnInitialRender(dataArgs);\n }\n if (!_this.isColTypeDef && gObj.getCurrentViewRecords()) {\n if (_this.data.dataManager.dataSource.offline && gObj.dataSource && gObj.dataSource.length) {\n _this.updateColumnType(gObj.dataSource[0]);\n }\n else {\n _this.updateColumnType(gObj.getCurrentViewRecords()[0]);\n }\n }\n if (!_this.parent.isInitialLoad && _this.parent.groupSettings.disablePageWiseAggregates &&\n !_this.parent.groupSettings.columns.length) {\n dataArgs.result = _this.parent.dataSource instanceof Array ? _this.parent.dataSource : _this.parent.currentViewData;\n }\n if ((_this.parent.isReact || _this.parent.isVue) && !isNullOrUndefined(args) && args.requestType !== 'infiniteScroll' && !args.isFrozen) {\n clearReactVueTemplates(_this.parent, ['footerTemplate']);\n }\n if (_this.parent.isAngular && _this.parent.allowGrouping && _this.parent.groupSettings.captionTemplate\n && !(!isNullOrUndefined(args) && args.requestType === 'infiniteScroll')) {\n _this.parent.destroyTemplate(['groupSettings_captionTemplate']);\n }\n _this.parent.notify(events.dataReady, extend({ count: dataArgs.count, result: dataArgs.result, aggregates: dataArgs.aggregates }, args));\n if ((gObj.groupSettings.columns.length || (args && args.requestType === 'ungrouping'))\n && (args && args.requestType !== 'filtering')) {\n _this.headerRenderer.refreshUI();\n }\n if (len) {\n if (isGroupAdaptive(gObj)) {\n var content = 'content';\n args.scrollTop = { top: _this.contentRenderer[\"\" + content].scrollTop };\n }\n if (!isInfiniteDelete) {\n if (_this.parent.enableImmutableMode) {\n _this.contentRenderer.immutableModeRendering(args);\n }\n else {\n _this.contentRenderer.refreshContentRows(args);\n }\n }\n else {\n _this.parent.notify(events.infiniteEditHandler, { e: args, result: e.result, count: e.count, agg: e.aggregates });\n }\n }\n else {\n if (args && args.isCaptionCollapse) {\n return;\n }\n if (!gObj.getColumns().length) {\n gObj.element.innerHTML = '';\n alert(_this.l10n.getConstant('EmptyDataSourceError')); //ToDO: change this alert as dialog\n return;\n }\n _this.contentRenderer.setRowElements([]);\n _this.contentRenderer.setRowObjects([]);\n _this.ariaService.setBusy(_this.parent.getContent().querySelector('.' + literals.content), false);\n gObj.removeMaskRow();\n _this.renderEmptyRow();\n if (gObj.enableColumnVirtualization && !len) {\n _this.parent.notify(events.contentReady, { rows: gObj.getRowsObject(), args: {} });\n }\n if (args) {\n var action = (args.requestType || '').toLowerCase() + '-complete';\n _this.parent.notify(action, args);\n if (args.requestType === 'batchsave') {\n args.cancel = false;\n args.rows = [];\n args.isFrozen = !args.isFrozen;\n _this.parent.trigger(events.actionComplete, args);\n }\n }\n if (_this.parent.autoFit) {\n _this.parent.preventAdjustColumns();\n }\n _this.parent.hideSpinner();\n }\n _this.parent.notify(events.toolbarRefresh, {});\n _this.setRowCount(_this.parent.getCurrentViewRecords().length);\n if ('query' in e) {\n _this.parent.getDataModule().isQueryInvokedFromData = false;\n }\n });\n };\n /**\n * @param {object} e - specifies the object\n * @param {Object[]} e.result - specifies the result\n * @param {NotifyArgs} args - specifies the args\n * @returns {void}\n * @hidden\n */\n Render.prototype.dataManagerFailure = function (e, args) {\n if (!isNullOrUndefined(this.parent.contentModule)) {\n this.ariaService.setOptions(this.parent.getContent().querySelector('.' + literals.content), { busy: false, invalid: true });\n this.setRowCount(1);\n }\n this.parent.trigger(events.actionFailure, { error: e });\n this.parent.hideSpinner();\n this.parent.removeMaskRow();\n if (args.requestType === 'save' || args.requestType === 'delete'\n || args.name === 'bulk-save') {\n return;\n }\n this.parent.currentViewData = [];\n this.renderEmptyRow();\n if (!this.parent.isInitialLoad) {\n this.parent.focusModule.setFirstFocusableTabIndex();\n }\n this.parent.log('actionfailure', { error: e });\n };\n Render.prototype.setRowCount = function (dataRowCount) {\n this.ariaService.setOptions(this.parent.element, {\n rowcount: dataRowCount ? dataRowCount.toString() : '1'\n });\n };\n Render.prototype.isInfiniteEnd = function (args) {\n return this.parent.enableInfiniteScrolling && !this.parent.infiniteScrollSettings.enableCache && args.requestType === 'delete';\n };\n Render.prototype.updatesOnInitialRender = function (e) {\n this.isLayoutRendered = true;\n var isEmptyCol = false;\n if (this.parent.columns.length < 1) {\n this.buildColumns(e.result[0]);\n isEmptyCol = true;\n }\n prepareColumns(this.parent.columns, null, this.parent);\n if (isEmptyCol) {\n this.parent.notify(events.refreshSplitFrozenColumn, {});\n }\n this.headerRenderer.renderTable();\n this.contentRenderer.renderTable();\n this.parent.isAutoGen = true;\n this.parent.notify(events.autoCol, {});\n };\n Render.prototype.iterateComplexColumns = function (obj, field, split) {\n var keys = Object.keys(obj);\n for (var i = 0; i < keys.length; i++) {\n var childKeys = typeof obj[keys[parseInt(i.toString(), 10)]] === 'object'\n && obj[keys[parseInt(i.toString(), 10)]] && !(obj[keys[parseInt(i.toString(), 10)]] instanceof Date) ?\n Object.keys(obj[keys[parseInt(i.toString(), 10)]]) : [];\n if (childKeys.length) {\n this.iterateComplexColumns(obj[keys[parseInt(i.toString(), 10)]], field + (keys[parseInt(i.toString(), 10)] + '.'), split);\n }\n else {\n split[this.counter] = field + keys[parseInt(i.toString(), 10)];\n this.counter++;\n }\n }\n };\n Render.prototype.buildColumns = function (record) {\n var cols = [];\n var complexCols = {};\n this.iterateComplexColumns(record, '', complexCols);\n var columns = Object.keys(complexCols).filter(function (e) { return complexCols[\"\" + e] !== 'BlazId'; }).\n map(function (field) { return complexCols[\"\" + field]; });\n for (var i = 0, len = columns.length; i < len; i++) {\n cols[parseInt(i.toString(), 10)] = { 'field': columns[parseInt(i.toString(), 10)] };\n if (this.parent.enableColumnVirtualization) {\n cols[parseInt(i.toString(), 10)].width = !isNullOrUndefined(cols[parseInt(i.toString(), 10)].width) ?\n cols[parseInt(i.toString(), 10)].width : 200;\n }\n }\n this.parent.setProperties({ 'columns': cols }, true);\n };\n Render.prototype.instantiateRenderer = function () {\n this.renderer.addRenderer(RenderType.Header, new HeaderRender(this.parent, this.locator));\n this.renderer.addRenderer(RenderType.Content, new ContentRender(this.parent, this.locator));\n var cellrender = this.locator.getService('cellRendererFactory');\n cellrender.addCellRenderer(CellType.Header, new HeaderCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.Data, new CellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.StackedHeader, new StackedHeaderCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.Indent, new IndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.GroupCaption, new GroupCaptionCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.GroupCaptionEmpty, new GroupCaptionEmptyCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.Expand, new ExpandCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.HeaderIndent, new HeaderIndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.StackedHeader, new StackedHeaderCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.DetailHeader, new DetailHeaderIndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.RowDragHIcon, new RowDragDropHeaderRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.DetailExpand, new DetailExpandCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.DetailFooterIntent, new IndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.RowDragIcon, new RowDragDropRenderer(this.parent, this.locator));\n };\n Render.prototype.addEventListener = function () {\n var _this = this;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.initialLoad, this.instantiateRenderer, this);\n this.parent.on('refreshdataSource', this.dataManagerSuccess, this);\n this.parent.on(events.modelChanged, this.refresh, this);\n this.parent.on(events.refreshComplete, this.refreshComplete, this);\n this.parent.on(events.bulkSave, this.sendBulkRequest, this);\n this.parent.on(events.showEmptyGrid, function () { _this.emptyGrid = true; }, this);\n this.parent.on(events.autoCol, this.dynamicColumnChange, this);\n };\n /**\n * @param {ReturnType} e - specifies the Return type\n * @returns {Promise