\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 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 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 if (!this.isMultiSelection && +this.value !== Number.NaN && (!isNullOrUndefined(this.value) && !isNullOrUndefined(this.previousDate) && +new Date(this.value.toDateString()) !== +new Date(this.previousDate.toDateString()) || this.previousDate == null\n && !isNaN(+this.value))) {\n this.changeEvent(e);\n }\n else if (!isNullOrUndefined(this.values) && this.previousValues !== this.values.length) {\n this.changeEvent(e);\n this.previousValues = this.values.length;\n }\n };\n __decorate([\n Property(null)\n ], Calendar.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], Calendar.prototype, \"values\", void 0);\n __decorate([\n Property(false)\n ], Calendar.prototype, \"isMultiSelection\", void 0);\n __decorate([\n Event()\n ], Calendar.prototype, \"change\", void 0);\n Calendar = __decorate([\n NotifyPropertyChanges\n ], Calendar);\n return Calendar;\n}(CalendarBase));\nexport { Calendar };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n///
\nimport { EventHandler, Property, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, Animation, Event, extend, L10n, Browser, formatUnit } from '@syncfusion/ej2-base';\nimport { detach, addClass, removeClass, closest, attributes } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, setValue, getUniqueID } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { Calendar } from '../calendar/calendar';\n//class constant defination\nvar DATEWRAPPER = 'e-date-wrapper';\nvar ROOT = 'e-datepicker';\nvar LIBRARY = 'e-lib';\nvar CONTROL = 'e-control';\nvar POPUPWRAPPER = 'e-popup-wrapper';\nvar INPUTWRAPPER = 'e-input-group-icon';\nvar POPUP = 'e-popup';\nvar INPUTCONTAINER = 'e-input-group';\nvar INPUTFOCUS = 'e-input-focus';\nvar INPUTROOT = 'e-input';\nvar ERROR = 'e-error';\nvar ACTIVE = 'e-active';\nvar OVERFLOW = 'e-date-overflow';\nvar DATEICON = 'e-date-icon';\nvar CLEARICON = 'e-clear-icon';\nvar ICONS = 'e-icons';\nvar OPENDURATION = 300;\nvar OFFSETVALUE = 4;\nvar SELECTED = 'e-selected';\nvar FOCUSEDDATE = 'e-focused-date';\nvar NONEDIT = 'e-non-edit';\nvar containerAttr = ['title', 'class', 'style'];\n/**\n * Represents the DatePicker component that allows user to select\n * or enter a date value.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar DatePicker = /** @class */ (function (_super) {\n __extends(DatePicker, _super);\n /**\n * Constructor for creating the widget.\n *\n * @param {DatePickerModel} options - Specifies the DatePicker model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function DatePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.previousElementValue = '';\n _this.isDateIconClicked = false;\n _this.isAltKeyPressed = false;\n _this.isInteracted = true;\n _this.invalidValueString = null;\n _this.checkPreviousValue = null;\n _this.maskedDateValue = '';\n _this.isAngular = false;\n _this.preventChange = false;\n _this.isIconClicked = false;\n _this.isDynamicValueChanged = false;\n _this.moduleName = _this.getModuleName();\n _this.isFocused = false;\n _this.datepickerOptions = options;\n return _this;\n }\n /**\n * To Initialize the control rendering.\n *\n * @returns {void}\n * @private\n */\n DatePicker.prototype.render = function () {\n this.initialize();\n this.bindEvents();\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 this.renderComplete();\n this.setTimeZone(this.serverTimezoneOffset);\n };\n DatePicker.prototype.setTimeZone = function (offsetValue) {\n if (!isNullOrUndefined(this.serverTimezoneOffset) && this.value) {\n var clientTimeZoneDiff = new Date().getTimezoneOffset() / 60;\n var serverTimezoneDiff = offsetValue;\n var timeZoneDiff = serverTimezoneDiff + clientTimeZoneDiff;\n timeZoneDiff = this.isDayLightSaving() ? timeZoneDiff-- : timeZoneDiff;\n this.value = new Date((this.value).getTime() + (timeZoneDiff * 60 * 60 * 1000));\n this.updateInput();\n }\n };\n DatePicker.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 DatePicker.prototype.setAllowEdit = 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.updateIconState();\n };\n DatePicker.prototype.updateIconState = function () {\n if (!this.allowEdit && this.inputWrapper && !this.readonly) {\n if (this.inputElement.value === '') {\n removeClass([this.inputWrapper.container], [NONEDIT]);\n }\n else {\n addClass([this.inputWrapper.container], [NONEDIT]);\n }\n }\n else if (this.inputWrapper) {\n removeClass([this.inputWrapper.container], [NONEDIT]);\n }\n };\n DatePicker.prototype.initialize = function () {\n this.checkInvalidValue(this.value);\n if (this.enableMask) {\n this.notify(\"createMask\", {\n module: \"MaskedDateTime\",\n });\n }\n this.createInput();\n this.updateHtmlAttributeToWrapper();\n this.setAllowEdit();\n this.updateInput();\n if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType == 'Always' || !this.floatLabelType || !this.placeholder)) {\n this.updateInputValue(this.maskedDateValue);\n }\n this.previousElementValue = this.inputElement.value;\n this.previousDate = !isNullOrUndefined(this.value) ? new Date(+this.value) : null;\n this.inputElement.setAttribute('value', this.inputElement.value);\n this.inputValueCopy = this.value;\n };\n DatePicker.prototype.createInput = function () {\n var ariaAttrs = {\n 'aria-atomic': 'true', 'aria-expanded': 'false',\n 'role': 'combobox', 'autocomplete': 'off', 'autocorrect': 'off',\n 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-invalid': 'false'\n };\n if (this.getModuleName() === 'datepicker') {\n var l10nLocale = { placeholder: this.placeholder };\n this.globalize = new Internationalization(this.locale);\n this.l10n = new L10n('datepicker', l10nLocale, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n }\n var updatedCssClassValues = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValues = (this.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n var isBindClearAction = this.enableMask ? false : true;\n this.inputWrapper = Input.createInput({\n element: this.inputElement,\n floatLabelType: this.floatLabelType,\n bindClearAction: isBindClearAction,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassValues,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton\n },\n buttons: [INPUTWRAPPER + ' ' + DATEICON + ' ' + ICONS]\n }, this.createElement);\n this.setWidth(this.width);\n if (this.inputElement.name !== '') {\n this.inputElement.setAttribute('name', '' + this.inputElement.getAttribute('name'));\n }\n else {\n this.inputElement.setAttribute('name', '' + this.element.id);\n }\n attributes(this.inputElement, ariaAttrs);\n if (!this.enabled) {\n this.inputElement.setAttribute('aria-disabled', 'true');\n this.inputElement.tabIndex = -1;\n }\n else {\n this.inputElement.setAttribute('aria-disabled', 'false');\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n Input.addAttributes({ 'aria-label': 'select' }, this.inputWrapper.buttons[0]);\n addClass([this.inputWrapper.container], DATEWRAPPER);\n };\n DatePicker.prototype.updateInput = function (isDynamic) {\n if (isDynamic === void 0) { isDynamic = false; }\n var formatOptions;\n if (this.value && !this.isCalendar() && !isDynamic) {\n this.disabledDates();\n }\n if (isNaN(+new Date(this.checkValue(this.value)))) {\n this.setProperties({ value: null }, true);\n }\n if (this.strictMode) {\n //calls the Calendar processDate protected method to update the date value according to the strictMode true behaviour.\n _super.prototype.validateDate.call(this);\n this.minMaxUpdates();\n _super.prototype.minMaxUpdate.call(this);\n }\n if (!isNullOrUndefined(this.value)) {\n var dateValue = this.value;\n var dateString = void 0;\n var tempFormat = !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat;\n if (this.getModuleName() === 'datetimepicker') {\n if (this.calendarMode === 'Gregorian') {\n dateString = this.globalize.formatDate(this.value, {\n format: tempFormat, type: 'dateTime', skeleton: 'yMd'\n });\n }\n else {\n dateString = this.globalize.formatDate(this.value, {\n format: tempFormat, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n });\n }\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n dateString = this.globalize.formatDate(this.value, formatOptions);\n }\n if ((+dateValue <= +this.max) && (+dateValue >= +this.min)) {\n this.updateInputValue(dateString);\n }\n else {\n var value = (+dateValue >= +this.max || !+this.value) || (!+this.value || +dateValue <= +this.min);\n if (!this.strictMode && value) {\n this.updateInputValue(dateString);\n }\n }\n }\n if (isNullOrUndefined(this.value) && this.strictMode) {\n if (!this.enableMask) {\n this.updateInputValue('');\n }\n else {\n this.updateInputValue(this.maskedDateValue);\n this.notify(\"createMask\", {\n module: \"MaskedDateTime\",\n });\n }\n }\n if (!this.strictMode && isNullOrUndefined(this.value) && this.invalidValueString) {\n this.updateInputValue(this.invalidValueString);\n }\n this.changedArgs = { value: this.value };\n this.errorClass();\n this.updateIconState();\n };\n DatePicker.prototype.minMaxUpdates = function () {\n if (!isNullOrUndefined(this.value) && this.value < this.min && this.min <= this.max && this.strictMode) {\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 && this.strictMode) {\n this.setProperties({ value: this.max }, true);\n this.changedArgs = { value: this.value };\n }\n }\n };\n DatePicker.prototype.checkStringValue = function (val) {\n var returnDate = null;\n var formatOptions = null;\n var formatDateTime = null;\n if (this.getModuleName() === 'datetimepicker') {\n var culture = new Internationalization(this.locale);\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: 'yMd' };\n formatDateTime = { format: culture.getDatePattern({ skeleton: 'yMd' }), type: 'dateTime' };\n }\n else {\n formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n formatDateTime = { format: culture.getDatePattern({ skeleton: 'yMd' }), type: 'dateTime', calendar: 'islamic' };\n }\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n }\n returnDate = this.checkDateValue(this.globalize.parseDate(val, formatOptions));\n if (isNullOrUndefined(returnDate) && (this.getModuleName() === 'datetimepicker')) {\n returnDate = this.checkDateValue(this.globalize.parseDate(val, formatDateTime));\n }\n return returnDate;\n };\n DatePicker.prototype.checkInvalidValue = function (value) {\n if (!(value instanceof Date) && !isNullOrUndefined(value)) {\n var valueDate = null;\n var valueString = value;\n if (typeof value === 'number') {\n valueString = value.toString();\n }\n var formatOptions = null;\n var formatDateTime = null;\n if (this.getModuleName() === 'datetimepicker') {\n var culture = new Internationalization(this.locale);\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: 'yMd' };\n formatDateTime = { format: culture.getDatePattern({ skeleton: 'yMd' }), type: 'dateTime' };\n }\n else {\n formatOptions = { format: this.dateTimeFormat, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n formatDateTime = { format: culture.getDatePattern({ skeleton: 'yMd' }), type: 'dateTime', calendar: 'islamic' };\n }\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n }\n var invalid = false;\n if (typeof valueString !== 'string') {\n valueString = null;\n invalid = true;\n }\n else {\n if (typeof valueString === 'string') {\n valueString = valueString.trim();\n }\n valueDate = this.checkStringValue(valueString);\n if (!valueDate) {\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(valueString) || isNaN(+new Date(this.checkValue(valueString)))) {\n invalid = true;\n }\n else {\n valueDate = new Date(valueString);\n }\n }\n }\n if (invalid) {\n if (!this.strictMode) {\n this.invalidValueString = valueString;\n }\n this.setProperties({ value: null }, true);\n }\n else {\n this.setProperties({ value: valueDate }, true);\n }\n }\n };\n DatePicker.prototype.bindInputEvent = function () {\n if (!isNullOrUndefined(this.formatString) || this.enableMask) {\n if (this.enableMask || this.formatString.indexOf('y') === -1) {\n EventHandler.add(this.inputElement, 'input', this.inputHandler, this);\n }\n else {\n EventHandler.remove(this.inputElement, 'input', this.inputHandler);\n }\n }\n };\n DatePicker.prototype.bindEvents = function () {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateIconHandler, this);\n EventHandler.add(this.inputElement, 'mouseup', this.mouseUpHandler, this);\n EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);\n EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);\n if (this.enableMask) {\n EventHandler.add(this.inputElement, 'keydown', this.keydownHandler, this);\n }\n this.bindInputEvent();\n // To prevent the twice triggering.\n EventHandler.add(this.inputElement, 'change', this.inputChangeHandler, this);\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);\n }\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.resetFormHandler, this);\n }\n this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);\n this.keyboardModules = new KeyboardEvents(this.inputElement, {\n eventName: 'keydown',\n keyAction: this.inputKeyActionHandle.bind(this),\n keyConfigs: this.defaultKeyConfigs\n });\n };\n DatePicker.prototype.keydownHandler = function (e) {\n switch (e.code) {\n case 'ArrowLeft':\n case 'ArrowRight':\n case 'ArrowUp':\n case 'ArrowDown':\n case 'Home':\n case 'End':\n case 'Delete':\n if (this.enableMask && !this.popupObj && !this.readonly) {\n if (e.code !== 'Delete') {\n e.preventDefault();\n }\n this.notify(\"keyDownHandler\", {\n module: \"MaskedDateTime\",\n e: e\n });\n }\n break;\n default:\n break;\n }\n };\n DatePicker.prototype.unBindEvents = function () {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateIconHandler);\n EventHandler.remove(this.inputElement, 'mouseup', this.mouseUpHandler);\n EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n EventHandler.remove(this.inputElement, 'change', this.inputChangeHandler);\n if (this.enableMask) {\n EventHandler.remove(this.inputElement, 'keydown', this.keydownHandler);\n }\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler);\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.resetFormHandler);\n }\n };\n DatePicker.prototype.resetFormHandler = function () {\n if (!this.enabled) {\n return;\n }\n if (!this.inputElement.disabled) {\n var value = this.inputElement.getAttribute('value');\n if (this.element.tagName === 'EJS-DATEPICKER' || this.element.tagName === 'EJS-DATETIMEPICKER') {\n value = '';\n this.inputValueCopy = null;\n this.inputElement.setAttribute('value', '');\n }\n this.setProperties({ value: this.inputValueCopy }, true);\n this.restoreValue();\n if (this.inputElement) {\n this.updateInputValue(value);\n this.errorClass();\n }\n }\n };\n DatePicker.prototype.restoreValue = function () {\n this.currentDate = this.value ? this.value : new Date();\n this.previousDate = this.value;\n this.previousElementValue = (isNullOrUndefined(this.inputValueCopy)) ? '' :\n this.globalize.formatDate(this.inputValueCopy, {\n format: this.formatString, type: 'dateTime', skeleton: 'yMd'\n });\n };\n DatePicker.prototype.inputChangeHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n e.stopPropagation();\n };\n DatePicker.prototype.bindClearEvent = function () {\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);\n }\n };\n DatePicker.prototype.resetHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n e.preventDefault();\n this.clear(e);\n };\n DatePicker.prototype.mouseUpHandler = function (e) {\n if (this.enableMask) {\n e.preventDefault();\n this.notify(\"setMaskSelection\", {\n module: \"MaskedDateTime\"\n });\n }\n };\n DatePicker.prototype.clear = function (event) {\n this.setProperties({ value: null }, true);\n if (!this.enableMask) {\n this.updateInputValue('');\n }\n var clearedArgs = {\n event: event\n };\n this.trigger('cleared', clearedArgs);\n this.invalidValueString = '';\n this.updateInput();\n this.popupUpdate();\n this.changeEvent(event);\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 DatePicker.prototype.preventEventBubbling = function (e) {\n e.preventDefault();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.interopAdaptor.invokeMethodAsync('OnDateIconClick');\n };\n DatePicker.prototype.updateInputValue = function (value) {\n Input.setValue(value, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n DatePicker.prototype.dateIconHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n this.isIconClicked = true;\n if (Browser.isDevice) {\n this.inputElement.setAttribute('readonly', '');\n this.inputElement.blur();\n }\n e.preventDefault();\n if (!this.readonly) {\n if (this.isCalendar()) {\n this.hide(e);\n }\n else {\n this.isDateIconClicked = true;\n this.show(null, e);\n if (this.getModuleName() === 'datetimepicker') {\n this.inputElement.focus();\n }\n this.inputElement.focus();\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n addClass(this.inputWrapper.buttons, ACTIVE);\n }\n }\n this.isIconClicked = false;\n };\n DatePicker.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 (!isNullOrUndefined(this.htmlAttributes[key])) {\n if (containerAttr.indexOf(key) > -1) {\n if (key === 'class') {\n var updatedClassValues = (this.htmlAttributes[key].replace(/\\s+/g, ' ')).trim();\n if (updatedClassValues !== '') {\n addClass([this.inputWrapper.container], updatedClassValues.split(' '));\n }\n }\n else if (key === 'style') {\n var setStyle = this.inputWrapper.container.getAttribute(key);\n if (!isNullOrUndefined(setStyle)) {\n if (setStyle.charAt(setStyle.length - 1) === ';') {\n setStyle = setStyle + this.htmlAttributes[key];\n }\n else {\n setStyle = setStyle + ';' + this.htmlAttributes[key];\n }\n }\n else {\n setStyle = this.htmlAttributes[key];\n }\n this.inputWrapper.container.setAttribute(key, setStyle);\n }\n else {\n this.inputWrapper.container.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n }\n };\n DatePicker.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 (containerAttr.indexOf(key) < 0) {\n this.inputElement.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n };\n DatePicker.prototype.updateCssClass = 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 Input.setCssClass(newCssClass, [this.inputWrapper.container], oldCssClass);\n if (this.popupWrapper) {\n Input.setCssClass(newCssClass, [this.popupWrapper], oldCssClass);\n }\n };\n DatePicker.prototype.calendarKeyActionHandle = function (e) {\n switch (e.action) {\n case 'escape':\n if (this.isCalendar()) {\n this.hide(e);\n }\n else {\n this.inputWrapper.container.children[this.index].blur();\n }\n break;\n case 'enter':\n if (!this.isCalendar()) {\n this.show(null, e);\n }\n else {\n if (+this.value !== +this.currentDate && !this.isCalendar()) {\n this.inputWrapper.container.children[this.index].focus();\n }\n }\n if (this.getModuleName() === 'datetimepicker') {\n this.inputElement.focus();\n }\n break;\n case 'tab':\n this.hide(e);\n }\n };\n DatePicker.prototype.inputFocusHandler = function () {\n this.isFocused = true;\n if (!this.enabled) {\n return;\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 var focusArguments = {\n model: this\n };\n this.isDateIconClicked = false;\n this.trigger('focus', focusArguments);\n this.updateIconState();\n if (this.openOnFocus && !this.isIconClicked) {\n this.show();\n }\n };\n DatePicker.prototype.inputHandler = function () {\n this.isPopupClicked = false;\n if (this.enableMask) {\n this.notify(\"inputHandler\", {\n module: \"MaskedDateTime\"\n });\n }\n };\n DatePicker.prototype.inputBlurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n this.strictModeUpdate();\n if (this.inputElement.value === '' && isNullOrUndefined(this.value)) {\n this.invalidValueString = null;\n this.updateInputValue('');\n }\n this.updateInput();\n this.popupUpdate();\n this.changeTrigger(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 this.errorClass();\n if (this.isCalendar() && document.activeElement === this.inputElement) {\n this.hide(e);\n }\n if (this.getModuleName() === 'datepicker') {\n var blurArguments = {\n model: this\n };\n this.trigger('blur', blurArguments);\n }\n if (this.isCalendar()) {\n this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);\n this.calendarKeyboardModules = new KeyboardEvents(this.calendarElement.children[1].firstElementChild, {\n eventName: 'keydown',\n keyAction: this.calendarKeyActionHandle.bind(this),\n keyConfigs: this.defaultKeyConfigs\n });\n }\n this.isPopupClicked = false;\n };\n DatePicker.prototype.documentHandler = function (e) {\n if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(e.target) && e.type !== 'mousedown' ||\n (this.popupObj.element && this.popupObj.element.contains(e.target)))) && e.type !== 'touchstart') {\n e.preventDefault();\n }\n var target = e.target;\n if (!(closest(target, '.e-datepicker.e-popup-wrapper'))\n && !(closest(target, '.' + INPUTCONTAINER) === this.inputWrapper.container)\n && (!target.classList.contains('e-day'))) {\n this.hide(e);\n this.focusOut();\n }\n else if (closest(target, '.e-datepicker.e-popup-wrapper')) {\n // Fix for close the popup when select the previously selected value.\n if (target.classList.contains('e-day')\n && !isNullOrUndefined(e.target.parentElement)\n && e.target.parentElement.classList.contains('e-selected')\n && closest(target, '.e-content')\n && closest(target, '.e-content').classList.contains('e-' + this.depth.toLowerCase())) {\n this.hide(e);\n }\n else if (closest(target, '.e-footer-container')\n && target.classList.contains('e-today')\n && target.classList.contains('e-btn')\n && (+new Date(+this.value) === +_super.prototype.generateTodayVal.call(this, this.value))) {\n this.hide(e);\n }\n }\n };\n DatePicker.prototype.inputKeyActionHandle = function (e) {\n var clickedView = this.currentView();\n switch (e.action) {\n case 'altUpArrow':\n this.isAltKeyPressed = false;\n this.hide(e);\n this.inputElement.focus();\n break;\n case 'altDownArrow':\n this.isAltKeyPressed = true;\n this.strictModeUpdate();\n this.updateInput();\n this.changeTrigger(e);\n if (this.getModuleName() === 'datepicker') {\n this.show(null, e);\n }\n break;\n case 'escape':\n this.hide(e);\n break;\n case 'enter':\n this.strictModeUpdate();\n this.updateInput();\n this.popupUpdate();\n this.changeTrigger(e);\n this.errorClass();\n if (!this.isCalendar() && document.activeElement === this.inputElement) {\n this.hide(e);\n }\n if (this.isCalendar()) {\n e.preventDefault();\n e.stopPropagation();\n }\n break;\n case 'tab':\n case 'shiftTab':\n var start = this.inputElement.selectionStart;\n var end = this.inputElement.selectionEnd;\n if (this.enableMask && !this.popupObj && !this.readonly) {\n var length_1 = this.inputElement.value.length;\n if ((start == 0 && end == length_1) || (end !== length_1 && e.action == 'tab') || (start !== 0 && e.action == 'shiftTab')) {\n e.preventDefault();\n }\n this.notify(\"keyDownHandler\", {\n module: \"MaskedDateTime\",\n e: e\n });\n start = this.inputElement.selectionStart;\n end = this.inputElement.selectionEnd;\n }\n this.strictModeUpdate();\n this.updateInput();\n this.popupUpdate();\n this.changeTrigger(e);\n this.errorClass();\n if (this.enableMask) {\n this.inputElement.selectionStart = start;\n this.inputElement.selectionEnd = end;\n }\n this.hide(e);\n break;\n default:\n this.defaultAction(e);\n // Fix for close the popup when select the previously selected value.\n if (e.action === 'select' && clickedView === this.depth) {\n this.hide(e);\n }\n }\n };\n DatePicker.prototype.defaultAction = function (e) {\n this.previousDate = ((!isNullOrUndefined(this.value) && new Date(+this.value)) || null);\n if (this.isCalendar()) {\n _super.prototype.keyActionHandle.call(this, e);\n if (this.isCalendar()) {\n attributes(this.inputElement, {\n 'aria-activedescendant': '' + this.setActiveDescendant()\n });\n }\n }\n };\n DatePicker.prototype.popupUpdate = function () {\n if ((isNullOrUndefined(this.value)) && (!isNullOrUndefined(this.previousDate)) ||\n (+this.value !== +this.previousDate)) {\n if (this.popupObj) {\n if (this.popupObj.element.querySelectorAll('.' + SELECTED).length > 0) {\n removeClass(this.popupObj.element.querySelectorAll('.' + SELECTED), [SELECTED]);\n }\n }\n if (!isNullOrUndefined(this.value)) {\n if ((+this.value >= +this.min) && (+this.value <= +this.max)) {\n var targetdate = new Date(this.checkValue(this.value));\n _super.prototype.navigateTo.call(this, 'Month', targetdate);\n }\n }\n }\n };\n DatePicker.prototype.strictModeUpdate = function () {\n var format;\n var formatOptions;\n if (this.getModuleName() === 'datetimepicker') {\n format = !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat;\n }\n else {\n format = isNullOrUndefined(this.formatString) ? this.formatString : this.formatString.replace('dd', 'd');\n }\n if (!isNullOrUndefined(format)) {\n var len = format.split('M').length - 1;\n if (len < 3) {\n format = format.replace('MM', 'M');\n }\n }\n var dateOptions;\n if (this.getModuleName() === 'datetimepicker') {\n if (this.calendarMode === 'Gregorian') {\n dateOptions = {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd'\n };\n }\n else {\n dateOptions = {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n };\n }\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: format, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n formatOptions = { format: format, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n dateOptions = formatOptions;\n }\n var date;\n if (typeof this.inputElement.value === 'string') {\n this.inputElement.value = this.inputElement.value.trim();\n }\n if ((this.getModuleName() === 'datetimepicker')) {\n if (this.checkDateValue(this.globalize.parseDate(this.inputElement.value, dateOptions))) {\n date = this.globalize.parseDate(this.inputElement.value, dateOptions);\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n formatOptions = { type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n date = this.globalize.parseDate(this.inputElement.value, formatOptions);\n }\n }\n else {\n date = this.globalize.parseDate(this.inputElement.value, dateOptions);\n date = (!isNullOrUndefined(date) && isNaN(+date)) ? null : date;\n if (!isNullOrUndefined(this.formatString) && this.inputElement.value !== '' && this.strictMode) {\n if ((this.isPopupClicked || (!this.isPopupClicked && this.inputElement.value === this.previousElementValue))\n && this.formatString.indexOf('y') === -1) {\n date.setFullYear(this.value.getFullYear());\n }\n }\n }\n // EJ2-35061 - To prevent change event from triggering twice when using strictmode and format property\n if ((this.getModuleName() === 'datepicker') && (this.value && !isNaN(+this.value)) && date) {\n date.setHours(this.value.getHours(), this.value.getMinutes(), this.value.getSeconds(), this.value.getMilliseconds());\n }\n if (this.strictMode && date) {\n this.updateInputValue(this.globalize.formatDate(date, dateOptions));\n if (this.inputElement.value !== this.previousElementValue) {\n this.setProperties({ value: date }, true);\n }\n }\n else if (!this.strictMode) {\n if (this.inputElement.value !== this.previousElementValue) {\n this.setProperties({ value: date }, true);\n }\n }\n if (this.strictMode && !date && this.inputElement.value === (this.enableMask ? this.maskedDateValue : '')) {\n this.setProperties({ value: null }, true);\n }\n if (isNaN(+this.value)) {\n this.setProperties({ value: null }, true);\n }\n if (isNullOrUndefined(this.value)) {\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n }\n };\n DatePicker.prototype.createCalendar = function () {\n var _this = this;\n this.popupWrapper = this.createElement('div', { className: '' + ROOT + ' ' + POPUPWRAPPER });\n if (!isNullOrUndefined(this.cssClass)) {\n this.popupWrapper.className += ' ' + this.cssClass;\n }\n if (Browser.isDevice) {\n this.modelHeader();\n this.modal = this.createElement('div');\n this.modal.className = '' + ROOT + ' e-date-modal';\n document.body.className += ' ' + OVERFLOW;\n this.modal.style.display = 'block';\n document.body.appendChild(this.modal);\n }\n //this.calendarElement represent the Calendar object from the Calendar class.\n this.calendarElement.querySelector('table tbody').className = '';\n this.popupObj = new Popup(this.popupWrapper, {\n content: this.calendarElement,\n relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,\n position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },\n offsetY: OFFSETVALUE,\n targetType: 'container',\n enableRtl: this.enableRtl,\n zIndex: this.zIndex,\n collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },\n open: function () {\n if (_this.getModuleName() !== 'datetimepicker') {\n if (document.activeElement !== _this.inputElement) {\n _this.defaultKeyConfigs = extend(_this.defaultKeyConfigs, _this.keyConfigs);\n _this.calendarElement.children[1].firstElementChild.focus();\n _this.calendarKeyboardModules = new KeyboardEvents(_this.calendarElement.children[1].firstElementChild, {\n eventName: 'keydown',\n keyAction: _this.calendarKeyActionHandle.bind(_this),\n keyConfigs: _this.defaultKeyConfigs\n });\n _this.calendarKeyboardModules = new KeyboardEvents(_this.inputWrapper.container.children[_this.index], {\n eventName: 'keydown',\n keyAction: _this.calendarKeyActionHandle.bind(_this),\n keyConfigs: _this.defaultKeyConfigs\n });\n }\n }\n }, close: function () {\n if (_this.isDateIconClicked) {\n _this.inputWrapper.container.children[_this.index].focus();\n }\n if (_this.value) {\n _this.disabledDates();\n }\n if (_this.popupObj) {\n _this.popupObj.destroy();\n }\n _this.resetCalendar();\n detach(_this.popupWrapper);\n _this.popupObj = _this.popupWrapper = null;\n _this.preventArgs = null;\n _this.calendarKeyboardModules = null;\n _this.setAriaAttributes();\n }, targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hide();\n }\n }\n });\n this.popupObj.element.className += ' ' + this.cssClass;\n this.setAriaAttributes();\n };\n DatePicker.prototype.setAriaDisabled = function () {\n if (!this.enabled) {\n this.inputElement.setAttribute('aria-disabled', 'true');\n this.inputElement.tabIndex = -1;\n }\n else {\n this.inputElement.setAttribute('aria-disabled', 'false');\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n };\n DatePicker.prototype.modelHeader = function () {\n var dateOptions;\n var modelHeader = this.createElement('div', { className: 'e-model-header' });\n var yearHeading = this.createElement('h1', { className: 'e-model-year' });\n var h2 = this.createElement('div');\n var daySpan = this.createElement('span', { className: 'e-model-day' });\n var monthSpan = this.createElement('span', { className: 'e-model-month' });\n if (this.calendarMode === 'Gregorian') {\n dateOptions = { format: 'y', skeleton: 'dateTime' };\n }\n else {\n dateOptions = { format: 'y', skeleton: 'dateTime', calendar: 'islamic' };\n }\n yearHeading.textContent = '' + this.globalize.formatDate(this.value || new Date(), dateOptions);\n if (this.calendarMode === 'Gregorian') {\n dateOptions = { format: 'E', skeleton: 'dateTime' };\n }\n else {\n dateOptions = { format: 'E', skeleton: 'dateTime', calendar: 'islamic' };\n }\n daySpan.textContent = '' + this.globalize.formatDate(this.value || new Date(), dateOptions) + ', ';\n if (this.calendarMode === 'Gregorian') {\n dateOptions = { format: 'MMM d', skeleton: 'dateTime' };\n }\n else {\n dateOptions = { format: 'MMM d', skeleton: 'dateTime', calendar: 'islamic' };\n }\n monthSpan.textContent = '' + this.globalize.formatDate(this.value || new Date(), dateOptions);\n modelHeader.appendChild(yearHeading);\n h2.appendChild(daySpan);\n h2.appendChild(monthSpan);\n modelHeader.appendChild(h2);\n this.calendarElement.insertBefore(modelHeader, this.calendarElement.firstElementChild);\n };\n DatePicker.prototype.changeTrigger = function (event) {\n if (this.inputElement.value !== this.previousElementValue) {\n if (((this.previousDate && this.previousDate.valueOf()) !== (this.value && this.value.valueOf()))) {\n if (this.isDynamicValueChanged && this.isCalendar()) {\n this.popupUpdate();\n }\n this.changedArgs.value = this.value;\n this.changedArgs.event = event || null;\n this.changedArgs.element = this.element;\n this.changedArgs.isInteracted = !isNullOrUndefined(event);\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', this.changedArgs);\n }\n this.previousElementValue = this.inputElement.value;\n this.previousDate = !isNaN(+new Date(this.checkValue(this.value))) ? new Date(this.checkValue(this.value)) : null;\n this.isInteracted = true;\n }\n }\n };\n DatePicker.prototype.navigatedEvent = function () {\n this.trigger('navigated', this.navigatedArgs);\n };\n DatePicker.prototype.changeEvent = function (event) {\n if (((this.previousDate && this.previousDate.valueOf()) !== (this.value && this.value.valueOf()))) {\n this.selectCalendar(event);\n this.changedArgs.event = event ? event : null;\n this.changedArgs.element = this.element;\n this.changedArgs.isInteracted = this.isInteracted;\n if (!this.isDynamicValueChanged) {\n this.trigger('change', this.changedArgs);\n }\n this.previousDate = this.value && new Date(+this.value);\n if (!this.isDynamicValueChanged) {\n this.hide(event);\n }\n this.previousElementValue = this.inputElement.value;\n this.errorClass();\n }\n };\n DatePicker.prototype.requiredModules = function () {\n var modules = [];\n if (this) {\n modules.push({ args: [this], member: 'islamic' });\n }\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 DatePicker.prototype.selectCalendar = function (e) {\n var date;\n var tempFormat;\n var formatOptions;\n if (this.getModuleName() === 'datetimepicker') {\n tempFormat = !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat;\n }\n else {\n tempFormat = this.formatString;\n }\n if (this.value) {\n if (this.getModuleName() === 'datetimepicker') {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: tempFormat, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n formatOptions = { format: tempFormat, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n date = this.globalize.formatDate(this.changedArgs.value, formatOptions);\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n date = this.globalize.formatDate(this.changedArgs.value, formatOptions);\n }\n if (this.enableMask) {\n this.notify(\"createMask\", {\n module: \"MaskedDateTime\",\n });\n }\n }\n if (!isNullOrUndefined(date)) {\n this.updateInputValue(date);\n if (this.enableMask) {\n this.notify(\"setMaskSelection\", {\n module: \"MaskedDateTime\"\n });\n }\n }\n };\n DatePicker.prototype.isCalendar = function () {\n if (this.popupWrapper && this.popupWrapper.classList.contains('' + POPUPWRAPPER)) {\n return true;\n }\n return false;\n };\n DatePicker.prototype.setWidth = function (width) {\n if (typeof width === 'number') {\n this.inputWrapper.container.style.width = formatUnit(this.width);\n }\n else if (typeof width === 'string') {\n this.inputWrapper.container.style.width = (width.match(/px|%|em/)) ? (this.width) : (formatUnit(this.width));\n }\n else {\n this.inputWrapper.container.style.width = '100%';\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Shows the Calendar.\n *\n * @returns {void}\n\n */\n DatePicker.prototype.show = function (type, e) {\n var _this = this;\n if ((this.enabled && this.readonly) || !this.enabled || this.popupObj) {\n return;\n }\n else {\n var prevent_1 = true;\n var outOfRange = void 0;\n if (!isNullOrUndefined(this.value) && !(+this.value >= +this.min && +this.value <= +this.max)) {\n outOfRange = new Date(this.checkValue(this.value));\n this.setProperties({ 'value': null }, true);\n }\n else {\n outOfRange = this.value || null;\n }\n if (!this.isCalendar()) {\n _super.prototype.render.call(this);\n this.setProperties({ 'value': outOfRange || null }, true);\n this.previousDate = outOfRange;\n this.createCalendar();\n }\n if (Browser.isDevice) {\n this.mobilePopupWrapper = this.createElement('div', { className: 'e-datepick-mob-popup-wrap' });\n document.body.appendChild(this.mobilePopupWrapper);\n }\n this.preventArgs = {\n preventDefault: function () {\n prevent_1 = false;\n },\n popup: this.popupObj,\n event: e || null,\n cancel: false,\n appendTo: Browser.isDevice ? this.mobilePopupWrapper : document.body\n };\n var eventArgs = this.preventArgs;\n this.trigger('open', eventArgs, function (eventArgs) {\n _this.preventArgs = eventArgs;\n if (prevent_1 && !_this.preventArgs.cancel) {\n addClass(_this.inputWrapper.buttons, ACTIVE);\n _this.preventArgs.appendTo.appendChild(_this.popupWrapper);\n _this.popupObj.refreshPosition(_this.inputElement);\n var openAnimation = {\n name: 'FadeIn',\n duration: Browser.isDevice ? 0 : OPENDURATION\n };\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 // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _super.prototype.setOverlayIndex.call(_this, _this.mobilePopupWrapper, _this.popupObj.element, _this.modal, Browser.isDevice);\n _this.setAriaAttributes();\n }\n else {\n _this.popupObj.destroy();\n _this.popupWrapper = _this.popupObj = null;\n }\n if (!isNullOrUndefined(_this.inputElement) && _this.inputElement.value === '') {\n if (!isNullOrUndefined(_this.tableBodyElement) && _this.tableBodyElement.querySelectorAll('td.e-selected').length > 0) {\n addClass([_this.tableBodyElement.querySelector('td.e-selected')], FOCUSEDDATE);\n removeClass(_this.tableBodyElement.querySelectorAll('td.e-selected'), SELECTED);\n }\n }\n EventHandler.add(document, 'mousedown touchstart', _this.documentHandler, _this);\n });\n }\n };\n /**\n * Hide the Calendar.\n *\n * @returns {void}\n\n */\n DatePicker.prototype.hide = function (event) {\n var _this = this;\n if (!isNullOrUndefined(this.popupWrapper)) {\n var prevent_2 = true;\n this.preventArgs = {\n preventDefault: function () {\n prevent_2 = false;\n },\n popup: this.popupObj,\n event: event || null,\n cancel: false\n };\n removeClass(this.inputWrapper.buttons, ACTIVE);\n removeClass([document.body], OVERFLOW);\n var eventArgs = this.preventArgs;\n if (this.isCalendar()) {\n this.trigger('close', eventArgs, function (eventArgs) {\n _this.closeEventCallback(prevent_2, eventArgs);\n });\n }\n else {\n this.closeEventCallback(prevent_2, 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 /* eslint-enable valid-jsdoc, jsdoc/require-param */\n DatePicker.prototype.closeEventCallback = function (prevent, eventArgs) {\n this.preventArgs = eventArgs;\n if (this.isCalendar() && (prevent && !this.preventArgs.cancel)) {\n this.popupObj.hide();\n this.isAltKeyPressed = false;\n this.keyboardModule.destroy();\n removeClass(this.inputWrapper.buttons, ACTIVE);\n }\n this.setAriaAttributes();\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.mobilePopupWrapper)) {\n this.mobilePopupWrapper.remove();\n this.mobilePopupWrapper = null;\n }\n }\n EventHandler.remove(document, 'mousedown touchstart', this.documentHandler);\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n this.setAllowEdit();\n };\n /* eslint-disable jsdoc/require-param */\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DatePicker.prototype.focusIn = function (triggerEvent) {\n if (document.activeElement !== this.inputElement && this.enabled) {\n this.inputElement.focus();\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n };\n /* eslint-enable jsdoc/require-param */\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n DatePicker.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement) {\n removeClass([this.inputWrapper.container], [INPUTFOCUS]);\n this.inputElement.blur();\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the current view of the DatePicker.\n *\n * @returns {string}\n\n */\n DatePicker.prototype.currentView = function () {\n var currentView;\n if (this.calendarElement) {\n // calls the Calendar currentView public method\n currentView = _super.prototype.currentView.call(this);\n }\n return currentView;\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Navigates to specified month or year or decade view of the DatePicker.\n *\n * @param {string} view - Specifies the view of the calendar.\n * @param {Date} date - Specifies the focused date in a view.\n * @returns {void}\n\n */\n DatePicker.prototype.navigateTo = function (view, date) {\n if (this.calendarElement) {\n // calls the Calendar navigateTo public method\n _super.prototype.navigateTo.call(this, view, date);\n }\n };\n /**\n * To destroy the widget.\n *\n * @returns {void}\n */\n DatePicker.prototype.destroy = function () {\n this.unBindEvents();\n _super.prototype.destroy.call(this);\n this.keyboardModules.destroy();\n if (this.popupObj && this.popupObj.element.classList.contains(POPUP)) {\n _super.prototype.destroy.call(this);\n }\n var ariaAttrs = {\n 'aria-atomic': 'true', 'aria-disabled': 'true',\n 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false'\n };\n if (this.inputElement) {\n Input.removeAttributes(ariaAttrs, this.inputElement);\n if (!isNullOrUndefined(this.inputElementCopy.getAttribute('tabindex'))) {\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.inputElement.removeAttribute('tabindex');\n }\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);\n this.ensureInputAttribute();\n }\n if (this.isCalendar()) {\n if (this.popupWrapper) {\n detach(this.popupWrapper);\n }\n this.popupObj = this.popupWrapper = null;\n this.keyboardModule.destroy();\n }\n if (this.ngTag === null) {\n if (this.inputElement) {\n this.inputWrapper.container.insertAdjacentElement('afterend', this.inputElement);\n removeClass([this.inputElement], [INPUTROOT]);\n }\n removeClass([this.element], [ROOT]);\n detach(this.inputWrapper.container);\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.resetFormHandler);\n }\n };\n DatePicker.prototype.ensureInputAttribute = function () {\n var prop = [];\n for (var i = 0; i < this.inputElement.attributes.length; i++) {\n prop[i] = this.inputElement.attributes[i].name;\n }\n for (var i = 0; i < prop.length; i++) {\n if (isNullOrUndefined(this.inputElementCopy.getAttribute(prop[i]))) {\n if (prop[i].toLowerCase() === 'value') {\n this.inputElement.value = '';\n }\n this.inputElement.removeAttribute(prop[i]);\n }\n else {\n if (prop[i].toLowerCase() === 'value') {\n this.inputElement.value = this.inputElementCopy.getAttribute(prop[i]);\n }\n this.inputElement.setAttribute(prop[i], this.inputElementCopy.getAttribute(prop[i]));\n }\n }\n };\n /**\n * Initialize the event handler\n *\n * @returns {void}\n * @private\n */\n DatePicker.prototype.preRender = function () {\n this.inputElementCopy = this.element.cloneNode(true);\n removeClass([this.inputElementCopy], [ROOT, CONTROL, LIBRARY]);\n this.inputElement = this.element;\n this.formElement = closest(this.inputElement, 'form');\n this.index = this.showClearButton ? 2 : 1;\n this.ngTag = null;\n if (this.element.tagName === 'EJS-DATEPICKER' || this.element.tagName === 'EJS-DATETIMEPICKER') {\n this.ngTag = this.element.tagName;\n this.inputElement = this.createElement('input');\n this.element.appendChild(this.inputElement);\n }\n if (this.element.getAttribute('id')) {\n if (this.ngTag !== null) {\n this.inputElement.id = this.element.getAttribute('id') + '_input';\n }\n }\n else {\n if (this.getModuleName() === 'datetimepicker') {\n this.element.id = getUniqueID('ej2-datetimepicker');\n if (this.ngTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n else {\n this.element.id = getUniqueID('ej2-datepicker');\n if (this.ngTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n }\n if (this.ngTag !== null) {\n this.validationAttribute(this.element, this.inputElement);\n }\n this.updateHtmlAttributeToElement();\n this.defaultKeyConfigs = this.getDefaultKeyConfig();\n this.checkHtmlAttributes(false);\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n _super.prototype.preRender.call(this);\n };\n DatePicker.prototype.getDefaultKeyConfig = function () {\n this.defaultKeyConfigs = {\n altUpArrow: 'alt+uparrow',\n altDownArrow: 'alt+downarrow',\n escape: 'escape',\n enter: 'enter',\n controlUp: 'ctrl+38',\n controlDown: 'ctrl+40',\n moveDown: 'downarrow',\n moveUp: 'uparrow',\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n select: 'enter',\n home: 'home',\n end: 'end',\n pageUp: 'pageup',\n pageDown: 'pagedown',\n shiftPageUp: 'shift+pageup',\n shiftPageDown: 'shift+pagedown',\n controlHome: 'ctrl+home',\n controlEnd: 'ctrl+end',\n shiftTab: 'shift+tab',\n tab: 'tab'\n };\n return this.defaultKeyConfigs;\n };\n DatePicker.prototype.validationAttribute = function (target, inputElement) {\n var nameAttribute = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');\n inputElement.setAttribute('name', nameAttribute);\n target.removeAttribute('name');\n var attribute = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attribute.length; i++) {\n if (isNullOrUndefined(target.getAttribute(attribute[i]))) {\n continue;\n }\n var attr = target.getAttribute(attribute[i]);\n inputElement.setAttribute(attribute[i], attr);\n target.removeAttribute(attribute[i]);\n }\n };\n DatePicker.prototype.checkFormat = function () {\n var culture = new Internationalization(this.locale);\n if (this.format) {\n if (typeof this.format === 'string') {\n this.formatString = this.format;\n }\n else if (this.format.skeleton !== '' && !isNullOrUndefined(this.format.skeleton)) {\n var skeletonString = this.format.skeleton;\n if (this.getModuleName() === 'datetimepicker') {\n this.formatString = culture.getDatePattern({ skeleton: skeletonString, type: 'dateTime' });\n }\n else {\n this.formatString = culture.getDatePattern({ skeleton: skeletonString, type: 'date' });\n }\n }\n else {\n if (this.getModuleName() === 'datetimepicker') {\n this.formatString = this.dateTimeFormat;\n }\n else {\n this.formatString = null;\n }\n }\n }\n else {\n this.formatString = null;\n }\n };\n DatePicker.prototype.checkHtmlAttributes = function (dynamic) {\n this.globalize = new Internationalization(this.locale);\n this.checkFormat();\n this.checkView();\n var attributes = dynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['value', 'min', 'max', 'disabled', 'readonly', 'style', 'name', 'placeholder', 'type'];\n var options;\n if (this.getModuleName() === 'datetimepicker') {\n if (this.calendarMode === 'Gregorian') {\n options = {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd'\n };\n }\n else {\n options = {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n };\n }\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n options = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n options = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n }\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.datepickerOptions) || (this.datepickerOptions['enabled'] === undefined)) || dynamic)) {\n var enabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '' ||\n this.inputElement.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !dynamic);\n }\n break;\n case 'readonly':\n if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['readonly'] === undefined)) || dynamic)) {\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 }, !dynamic);\n }\n break;\n case 'placeholder':\n if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['placeholder'] === undefined)) || dynamic)) {\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, !dynamic);\n }\n break;\n case 'style':\n this.inputElement.setAttribute('style', '' + this.inputElement.getAttribute(prop));\n break;\n case 'name':\n this.inputElement.setAttribute('name', '' + this.inputElement.getAttribute(prop));\n break;\n case 'value':\n if (((isNullOrUndefined(this.datepickerOptions) || (this.datepickerOptions['value'] === undefined)) || dynamic)) {\n var value = this.inputElement.getAttribute(prop);\n this.setProperties(setValue(prop, this.globalize.parseDate(value, options), {}), !dynamic);\n }\n break;\n case 'min':\n if ((+this.min === +new Date(1900, 0, 1)) || dynamic) {\n var min = this.inputElement.getAttribute(prop);\n this.setProperties(setValue(prop, this.globalize.parseDate(min), {}), !dynamic);\n }\n break;\n case 'max':\n if ((+this.max === +new Date(2099, 11, 31)) || dynamic) {\n var max = this.inputElement.getAttribute(prop);\n this.setProperties(setValue(prop, this.globalize.parseDate(max), {}), !dynamic);\n }\n break;\n case 'type':\n if (this.inputElement.getAttribute(prop) !== 'text') {\n this.inputElement.setAttribute('type', 'text');\n }\n break;\n }\n }\n }\n };\n /**\n * To get component name.\n *\n * @returns {string} Returns the component name.\n * @private\n */\n DatePicker.prototype.getModuleName = function () {\n return 'datepicker';\n };\n DatePicker.prototype.disabledDates = function () {\n var formatOptions;\n var globalize;\n var valueCopy = this.checkDateValue(this.value) ? new Date(+this.value) : new Date(this.checkValue(this.value));\n var previousValCopy = this.previousDate;\n //calls the Calendar render method to check the disabled dates through renderDayCell event and update the input value accordingly.\n this.minMaxUpdates();\n _super.prototype.render.call(this);\n this.previousDate = previousValCopy;\n var date = valueCopy && +(valueCopy);\n var dateIdString = '*[id^=\"/id\"]'.replace('/id', '' + date);\n if (!this.strictMode) {\n if (typeof this.value === 'string' || ((typeof this.value === 'object') && (+this.value) !== (+valueCopy))) {\n this.setProperties({ value: valueCopy }, true);\n }\n }\n if (!isNullOrUndefined(this.calendarElement.querySelectorAll(dateIdString)[0])) {\n if (this.calendarElement.querySelectorAll(dateIdString)[0].classList.contains('e-disabled')) {\n if (!this.strictMode) {\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n }\n }\n }\n var inputVal;\n if (this.getModuleName() === 'datetimepicker') {\n if (this.calendarMode === 'Gregorian') {\n globalize = this.globalize.formatDate(valueCopy, {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd'\n });\n }\n else {\n globalize = this.globalize.formatDate(valueCopy, {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n });\n }\n inputVal = globalize;\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n formatOptions = { format: this.formatString, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n inputVal = this.globalize.formatDate(valueCopy, formatOptions);\n }\n if (!this.popupObj) {\n this.updateInputValue(inputVal);\n if (this.enableMask) {\n this.updateInputValue(this.maskedDateValue);\n this.notify(\"createMask\", {\n module: \"MaskedDateTime\",\n });\n }\n }\n };\n DatePicker.prototype.setAriaAttributes = function () {\n if (this.isCalendar()) {\n Input.addAttributes({ 'aria-expanded': 'true' }, this.inputElement);\n attributes(this.inputElement, { 'aria-owns': this.inputElement.id + '_options' });\n if (this.value) {\n attributes(this.inputElement, { 'aria-activedescendant': '' + this.setActiveDescendant() });\n }\n }\n else {\n Input.addAttributes({ 'aria-expanded': 'false' }, this.inputElement);\n this.inputElement.removeAttribute('aria-owns');\n this.inputElement.removeAttribute('aria-activedescendant');\n }\n };\n DatePicker.prototype.errorClass = function () {\n var dateIdString = '*[id^=\"/id\"]'.replace('/id', '' + (+this.value));\n var isDisabledDate = this.calendarElement &&\n this.calendarElement.querySelectorAll(dateIdString)[0] &&\n this.calendarElement.querySelectorAll(dateIdString)[0].classList.contains('e-disabled');\n if ((!isNullOrUndefined(this.value) && !(+new Date(+this.value).setMilliseconds(0) >= +this.min\n && +new Date(+this.value).setMilliseconds(0) <= +this.max))\n || (!this.strictMode && this.inputElement.value !== '' && this.inputElement.value !== this.maskedDateValue && isNullOrUndefined(this.value) || isDisabledDate)) {\n addClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'true' });\n }\n else {\n removeClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'false' });\n }\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {DatePickerModel} newProp - Returns the dynamic property value of the component.\n * @param {DatePickerModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n DatePicker.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.isInteracted = false;\n this.invalidValueString = null;\n this.checkInvalidValue(newProp.value);\n newProp.value = this.value;\n this.previousElementValue = this.inputElement.value;\n if (isNullOrUndefined(this.value)) {\n this.updateInputValue('');\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n }\n this.updateInput(true);\n if (+this.previousDate !== +this.value) {\n this.changeTrigger(null);\n }\n this.isInteracted = true;\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n if (this.enableMask) {\n this.notify(\"createMask\", {\n module: \"MaskedDateTime\",\n });\n }\n break;\n case 'format':\n this.checkFormat();\n this.bindInputEvent();\n this.updateInput();\n if (this.enableMask) {\n this.notify(\"createMask\", {\n module: \"MaskedDateTime\",\n });\n if (!this.value) {\n this.updateInputValue(this.maskedDateValue);\n }\n }\n break;\n case 'allowEdit':\n this.setAllowEdit();\n break;\n case 'placeholder':\n Input.setPlaceholder(this.placeholder, this.inputElement);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.inputElement);\n this.setAriaDisabled();\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToElement();\n this.updateHtmlAttributeToWrapper();\n this.checkHtmlAttributes(true);\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.placeholder, this.inputElement);\n this.updateInput();\n if (this.enableMask) {\n this.notify(\"createMask\", {\n module: \"MaskedDateTime\",\n });\n }\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n break;\n case 'start':\n case 'depth':\n this.checkView();\n if (this.calendarElement) {\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n }\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'showClearButton':\n Input.setClearButton(this.showClearButton, this.inputElement, this.inputWrapper);\n this.bindClearEvent();\n this.index = this.showClearButton ? 2 : 1;\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-icon');\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 'enableMask':\n if (this.enableMask) {\n this.notify(\"createMask\", {\n module: \"MaskedDateTime\",\n });\n this.updateInputValue(this.maskedDateValue);\n this.bindInputEvent();\n }\n else {\n if (this.inputElement.value === this.maskedDateValue) {\n this.updateInputValue('');\n }\n }\n break;\n default:\n if (this.calendarElement && this.isCalendar()) {\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n }\n break;\n }\n if (!this.isDynamicValueChanged && !this.isIconClicked) {\n this.hide(null);\n }\n this.isDynamicValueChanged = false;\n }\n };\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], DatePicker.prototype, \"strictMode\", void 0);\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"format\", void 0);\n __decorate([\n Property(true)\n ], DatePicker.prototype, \"enabled\", void 0);\n __decorate([\n Property({})\n ], DatePicker.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"values\", void 0);\n __decorate([\n Property(false)\n ], DatePicker.prototype, \"isMultiSelection\", void 0);\n __decorate([\n Property(true)\n ], DatePicker.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(true)\n ], DatePicker.prototype, \"allowEdit\", void 0);\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"keyConfigs\", void 0);\n __decorate([\n Property(false)\n ], DatePicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(1000)\n ], DatePicker.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], DatePicker.prototype, \"readonly\", void 0);\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"placeholder\", void 0);\n __decorate([\n Property('Never')\n ], DatePicker.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"serverTimezoneOffset\", void 0);\n __decorate([\n Property(false)\n ], DatePicker.prototype, \"openOnFocus\", void 0);\n __decorate([\n Property(false)\n ], DatePicker.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 ], DatePicker.prototype, \"maskPlaceholder\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"cleared\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"destroyed\", void 0);\n DatePicker = __decorate([\n NotifyPropertyChanges\n ], DatePicker);\n return DatePicker;\n}(Calendar));\nexport { DatePicker };\n","/**\n * IncrementalSearch module file\n */\nvar queryString = '';\nvar prevString = '';\nvar matches = [];\nvar activeClass = 'e-active';\nvar prevElementId = '';\n/**\n * Search and focus the list item based on key code matches with list text content\n *\n * @param { number } keyCode - Specifies the key code which pressed on keyboard events.\n * @param { HTMLElement[]} items - Specifies an array of HTMLElement, from which matches find has done.\n * @param { number } selectedIndex - Specifies the selected item in list item, so that search will happen\n * after selected item otherwise it will do from initial.\n * @param { boolean } ignoreCase - Specifies the case consideration when search has done.\n * @param {string} elementId - Specifies the list element ID.\n * @returns {Element} Returns list item based on key code matches with list text content.\n */\nexport function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId) {\n queryString += String.fromCharCode(keyCode);\n setTimeout(function () {\n queryString = '';\n }, 1000);\n var index;\n queryString = ignoreCase ? queryString.toLowerCase() : queryString;\n if (prevElementId === elementId && prevString === queryString) {\n for (var i = 0; i < matches.length; i++) {\n if (matches[i].classList.contains(activeClass)) {\n index = i;\n break;\n }\n }\n index = index + 1;\n return matches[index] ? matches[index] : matches[0];\n }\n else {\n var listItems = items;\n var strLength = queryString.length;\n var text = void 0;\n var item = void 0;\n selectedIndex = selectedIndex ? selectedIndex + 1 : 0;\n var i = selectedIndex;\n matches = [];\n do {\n if (i === listItems.length) {\n i = -1;\n }\n if (i === -1) {\n index = 0;\n }\n else {\n index = i;\n }\n item = listItems[index];\n text = ignoreCase ? item.innerText.toLowerCase() : item.innerText;\n if (text.substr(0, strLength) === queryString) {\n matches.push(listItems[index]);\n }\n i++;\n } while (i !== selectedIndex);\n prevString = queryString;\n prevElementId = elementId;\n return matches[0];\n }\n}\n/**\n * Search the list item based on given input value matches with search type.\n *\n * @param {string} inputVal - Specifies the given input value.\n * @param {HTMLElement[]} items - Specifies the list items.\n * @param {SearchType} searchType - Specifies the filter type.\n * @param {boolean} ignoreCase - Specifies the case sensitive option for search operation.\n * @returns {Element | number} Returns the search matched items.\n */\nexport function Search(inputVal, items, searchType, ignoreCase) {\n var listItems = items;\n ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;\n var itemData = { item: null, index: null };\n if (inputVal && inputVal.length) {\n var strLength = inputVal.length;\n var queryStr = ignoreCase ? inputVal.toLocaleLowerCase() : inputVal;\n queryStr = escapeCharRegExp(queryStr);\n for (var i = 0, itemsData = listItems; i < itemsData.length; i++) {\n var item = itemsData[i];\n var text = (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\\s+|\\s+$/g, '');\n if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr) || (searchType === 'EndsWith' && text.substr(text.length - queryStr.length) === queryStr) || (searchType === 'Contains' && new RegExp(queryStr, \"g\").test(text))) {\n itemData.item = item;\n itemData.index = i;\n return { item: item, index: i };\n }\n }\n return itemData;\n }\n return itemData;\n}\nexport function escapeCharRegExp(value) {\n return value.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\nexport function resetIncrementalSearchValues(elementId) {\n if (prevElementId === elementId) {\n prevElementId = '';\n prevString = '';\n queryString = '';\n matches = [];\n }\n}\n","/* eslint-disable no-inner-declarations */\nimport { extend, merge, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { attributes, prepend, isVisible, append, addClass } from '@syncfusion/ej2-base';\nimport { compile } from '@syncfusion/ej2-base';\nimport { DataManager, Query } from '@syncfusion/ej2-data';\nexport var cssClass = {\n li: 'e-list-item',\n ul: 'e-list-parent e-ul',\n group: 'e-list-group-item',\n icon: 'e-list-icon',\n text: 'e-list-text',\n check: 'e-list-check',\n checked: 'e-checked',\n selected: 'e-selected',\n expanded: 'e-expanded',\n textContent: 'e-text-content',\n hasChild: 'e-has-child',\n level: 'e-level',\n url: 'e-list-url',\n collapsible: 'e-icon-collapsible',\n disabled: 'e-disabled',\n image: 'e-list-img',\n iconWrapper: 'e-icon-wrapper',\n anchorWrap: 'e-anchor-wrap',\n navigable: 'e-navigable'\n};\n/**\n * Base List Generator\n */\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport var ListBase;\n(function (ListBase) {\n /**\n *\n * Default mapped fields.\n */\n ListBase.defaultMappedFields = {\n id: 'id',\n text: 'text',\n url: 'url',\n value: 'value',\n isChecked: 'isChecked',\n enabled: 'enabled',\n expanded: 'expanded',\n selected: 'selected',\n iconCss: 'iconCss',\n child: 'child',\n isVisible: 'isVisible',\n hasChildren: 'hasChildren',\n tooltip: 'tooltip',\n htmlAttributes: 'htmlAttributes',\n urlAttributes: 'urlAttributes',\n imageAttributes: 'imageAttributes',\n imageUrl: 'imageUrl',\n groupBy: null,\n sortBy: null\n };\n var defaultAriaAttributes = {\n level: 1,\n listRole: 'presentation',\n itemRole: 'presentation',\n groupItemRole: 'group',\n itemText: 'list-item',\n wrapperRole: 'presentation'\n };\n var defaultListBaseOptions = {\n showCheckBox: false,\n showIcon: false,\n enableHtmlSanitizer: false,\n expandCollapse: false,\n fields: ListBase.defaultMappedFields,\n ariaAttributes: defaultAriaAttributes,\n listClass: '',\n itemClass: '',\n processSubChild: false,\n sortOrder: 'None',\n template: null,\n groupTemplate: null,\n headerTemplate: null,\n expandIconClass: 'e-icon-collapsible',\n moduleName: 'list',\n expandIconPosition: 'Right',\n itemNavigable: false\n };\n /**\n * Function helps to created and return the UL Li element based on your data.\n *\n * @param {createElementParams} createElement - Specifies an array of JSON data.\n *\n * @param {{Object}[]} dataSource - Specifies an array of JSON data.\n *\n * @param {ListBaseOptions} options? - Specifies the list options that need to provide.\n *\n * @param {boolean} isSingleLevel? - Specifies the list options that need to provide.\n *\n * @param {any} componentInstance? - Specifies the list options that need to provide.\n *\n * @returns {createElement} createListFromJson - Specifies the list options that need to provide.\n */\n function createList(createElement, dataSource, \n // eslint-disable-next-line\n options, isSingleLevel, componentInstance) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var type = typeofData(dataSource).typeof;\n if (type === 'string' || type === 'number') {\n return createListFromArray(createElement, dataSource, isSingleLevel, options, componentInstance);\n }\n else {\n return createListFromJson(createElement, dataSource, options, ariaAttributes.level, isSingleLevel, componentInstance);\n }\n }\n ListBase.createList = createList;\n /**\n * Function helps to created an element list based on string array input .\n *\n * @param {createElementParams} createElement - Specifies an array of JSON data.\n *\n * @param {{Object}[]} dataSource - Specifies an array of JSON data.\n *\n * @param {ListBaseOptions} options? - Specifies the list options that need to provide.\n *\n * @param {boolean} isSingleLevel? - Specifies the list options that need to provide.\n *\n * @param {any} componentInstance? - Specifies the list options that need to provide.\n *\n * @returns {createElement} generateUL - returns the list options that need to provide.\n */\n function createListFromArray(createElement, dataSource, \n // tslint:disable-next-line\n // eslint-disable-next-line\n isSingleLevel, options, componentInstance) {\n var subChild = createListItemFromArray(createElement, dataSource, isSingleLevel, options, componentInstance);\n return generateUL(createElement, subChild, null, options);\n }\n ListBase.createListFromArray = createListFromArray;\n /**\n * Function helps to created an element list based on string array input .\n *\n * @param {createElementParams} createElement - Specifies an array of JSON data.\n *\n * @param {{Object}[]} dataSource - Specifies an array of JSON data.\n *\n * @param {ListBaseOptions} options? - Specifies the list options that need to provide.\n *\n * @param {boolean} isSingleLevel? - Specifies the list options that need to provide.\n *\n * @param {any} componentInstance? - Specifies the list options that need to provide.\n *\n * @returns {HTMLElement[]} subChild - returns the list options that need to provide.\n */\n function createListItemFromArray(createElement, dataSource, \n // eslint-disable-next-line\n isSingleLevel, options, componentInstance) {\n var subChild = [];\n var curOpt = extend({}, defaultListBaseOptions, options);\n cssClass = getModuleClass(curOpt.moduleName);\n var id = generateId(); // generate id for drop-down-list option.\n for (var i = 0; i < dataSource.length; i++) {\n if (isNullOrUndefined(dataSource[i])) {\n continue;\n }\n var li = void 0;\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: dataSource[i],\n options: curOpt\n };\n curOpt.itemCreating(curData);\n }\n if (isSingleLevel) {\n li = generateSingleLevelLI(createElement, dataSource[i], undefined, null, null, [], null, id, i, options);\n }\n else {\n li = generateLI(createElement, dataSource[i], undefined, null, null, options, componentInstance);\n }\n if (curOpt.itemCreated && typeof curOpt.itemCreated === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: dataSource[i],\n item: li,\n options: curOpt\n };\n curOpt.itemCreated(curData);\n }\n subChild.push(li);\n }\n return subChild;\n }\n ListBase.createListItemFromArray = createListItemFromArray;\n /**\n * Function helps to created an element list based on array of JSON input .\n *\n * @param {createElementParams} createElement - Specifies an array of JSON data.\n *\n * @param {{Object}[]} dataSource - Specifies an array of JSON data.\n *\n * @param {ListBaseOptions} options? - Specifies the list options that need to provide.\n *\n * @param {boolean} isSingleLevel? - Specifies the list options that need to provide.\n *\n * @param {number} level? - Specifies the list options that need to provide.\n *\n * @param {any} componentInstance? - Specifies the list options that need to provide.\n *\n * @returns {HTMLElement[]} child - returns the list options that need to provide.\n */\n function createListItemFromJson(createElement, dataSource, \n // eslint-disable-next-line\n options, level, isSingleLevel, componentInstance) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n cssClass = getModuleClass(curOpt.moduleName);\n var fields = (componentInstance &&\n (componentInstance.getModuleName() === 'listview' || componentInstance.getModuleName() === 'multiselect'))\n ? curOpt.fields : extend({}, ListBase.defaultMappedFields, curOpt.fields);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var id;\n var checkboxElement = [];\n if (level) {\n ariaAttributes.level = level;\n }\n var child = [];\n var li;\n var anchorElement;\n if (dataSource && dataSource.length && !isNullOrUndefined(typeofData(dataSource).item) &&\n // eslint-disable-next-line no-prototype-builtins\n !typeofData(dataSource).item.hasOwnProperty(fields.id)) {\n id = generateId(); // generate id for drop-down-list option.\n }\n for (var i = 0; i < dataSource.length; i++) {\n var fieldData = getFieldValues(dataSource[i], fields);\n if (isNullOrUndefined(dataSource[i])) {\n continue;\n }\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: fieldData[fields.text],\n options: curOpt,\n fields: fields\n };\n curOpt.itemCreating(curData);\n }\n var curItem = dataSource[i];\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n fieldData = getFieldValues(dataSource[i], fields);\n }\n // eslint-disable-next-line no-prototype-builtins\n if (fieldData.hasOwnProperty(fields.id) && !isNullOrUndefined(fieldData[fields.id])) {\n id = fieldData[fields.id];\n }\n var innerEle = [];\n if (curOpt.showCheckBox) {\n if (curOpt.itemNavigable && (fieldData[fields.url] || fieldData[fields.urlAttributes])) {\n checkboxElement.push(createElement('input', { className: cssClass.check, attrs: { type: 'checkbox' } }));\n }\n else {\n innerEle.push(createElement('input', { className: cssClass.check, attrs: { type: 'checkbox' } }));\n }\n }\n if (isSingleLevel === true) {\n // eslint-disable-next-line no-prototype-builtins\n if (curOpt.showIcon && fieldData.hasOwnProperty(fields.iconCss) && !isNullOrUndefined(fieldData[fields.iconCss])) {\n innerEle.push(createElement('span', { className: cssClass.icon + ' ' + fieldData[fields.iconCss] }));\n }\n li = generateSingleLevelLI(createElement, curItem, fieldData, fields, curOpt.itemClass, innerEle, \n // eslint-disable-next-line no-prototype-builtins\n (curItem.hasOwnProperty('isHeader') &&\n curItem.isHeader) ? true : false, id, i, options);\n anchorElement = li.querySelector('.' + cssClass.anchorWrap);\n if (curOpt.itemNavigable && checkboxElement.length) {\n prepend(checkboxElement, li.firstElementChild);\n }\n }\n else {\n li = generateLI(createElement, curItem, fieldData, fields, curOpt.itemClass, options, componentInstance);\n li.classList.add(cssClass.level + '-' + ariaAttributes.level);\n li.setAttribute('aria-level', ariaAttributes.level.toString());\n anchorElement = li.querySelector('.' + cssClass.anchorWrap);\n // eslint-disable-next-line no-prototype-builtins\n if (fieldData.hasOwnProperty(fields.tooltip)) {\n li.setAttribute('title', fieldData[fields.tooltip]);\n }\n // eslint-disable-next-line no-prototype-builtins\n if (fieldData.hasOwnProperty(fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {\n setAttribute(li, fieldData[fields.htmlAttributes]);\n }\n // eslint-disable-next-line no-prototype-builtins\n if (fieldData.hasOwnProperty(fields.enabled) && fieldData[fields.enabled] === false) {\n li.classList.add(cssClass.disabled);\n }\n // eslint-disable-next-line no-prototype-builtins\n if (fieldData.hasOwnProperty(fields.isVisible) && fieldData[fields.isVisible] === false) {\n li.style.display = 'none';\n }\n // eslint-disable-next-line no-prototype-builtins\n if (fieldData.hasOwnProperty(fields.imageUrl) && !isNullOrUndefined(fieldData[fields.imageUrl])\n && !curOpt.template) {\n var attr = { src: fieldData[fields.imageUrl] };\n merge(attr, fieldData[fields.imageAttributes]);\n var imageElemnt = createElement('img', { className: cssClass.image, attrs: attr });\n if (anchorElement) {\n anchorElement.insertAdjacentElement('afterbegin', imageElemnt);\n }\n else {\n prepend([imageElemnt], li.firstElementChild);\n }\n }\n // eslint-disable-next-line no-prototype-builtins\n if (curOpt.showIcon && fieldData.hasOwnProperty(fields.iconCss) &&\n !isNullOrUndefined(fieldData[fields.iconCss]) && !curOpt.template) {\n var iconElement = createElement('div', { className: cssClass.icon + ' ' + fieldData[fields.iconCss] });\n if (anchorElement) {\n anchorElement.insertAdjacentElement('afterbegin', iconElement);\n }\n else {\n prepend([iconElement], li.firstElementChild);\n }\n }\n if (innerEle.length) {\n prepend(innerEle, li.firstElementChild);\n }\n if (curOpt.itemNavigable && checkboxElement.length) {\n prepend(checkboxElement, li.firstElementChild);\n }\n processSubChild(createElement, fieldData, fields, dataSource, curOpt, li, ariaAttributes.level);\n }\n if (anchorElement) {\n addClass([li], [cssClass.navigable]);\n }\n if (curOpt.itemCreated && typeof curOpt.itemCreated === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: fieldData[fields.text],\n item: li,\n options: curOpt,\n fields: fields\n };\n curOpt.itemCreated(curData);\n }\n checkboxElement = [];\n child.push(li);\n }\n return child;\n }\n ListBase.createListItemFromJson = createListItemFromJson;\n /**\n * Function helps to created an element list based on array of JSON input .\n *\n * @param {createElementParams} createElement - Specifies an array of JSON data.\n *\n * @param {{Object}[]} dataSource - Specifies an array of JSON data.\n *\n * @param {ListBaseOptions} options? - Specifies the list options that need to provide.\n *\n * @param {number} level? - Specifies the list options that need to provide.\n *\n * @param {boolean} isSingleLevel? - Specifies the list options that need to provide.\n *\n * @param {any} componentInstance? - Specifies the list options that need to provide.\n *\n * @returns {createElement} generateUL - Specifies the list options that need to provide.\n */\n function createListFromJson(createElement, dataSource, \n // eslint-disable-next-line\n options, level, isSingleLevel, componentInstance) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var li = createListItemFromJson(createElement, dataSource, options, level, isSingleLevel, componentInstance);\n return generateUL(createElement, li, curOpt.listClass, options);\n }\n ListBase.createListFromJson = createListFromJson;\n /**\n * Return the next or previous visible element.\n *\n * @param {Element[]|NodeList} elementArray - An element array to find next or previous element.\n * @param {Element} li - An element to find next or previous after this element.\n * @param {boolean} isPrevious? - Specify when the need get previous element from array.\n */\n function getSiblingLI(elementArray, element, isPrevious) {\n cssClass = getModuleClass(defaultListBaseOptions.moduleName);\n if (!elementArray || !elementArray.length) {\n return void 0;\n }\n var siblingLI;\n var liIndex;\n var liCollections = Array.prototype.slice.call(elementArray);\n if (element) {\n liIndex = indexOf(element, liCollections);\n }\n else {\n liIndex = (isPrevious === true ? liCollections.length : -1);\n }\n siblingLI = liCollections[liIndex + (isPrevious === true ? -1 : 1)];\n while (siblingLI && (!isVisible(siblingLI) || siblingLI.classList.contains(cssClass.disabled))) {\n liIndex = liIndex + (isPrevious === true ? -1 : 1);\n siblingLI = liCollections[liIndex];\n }\n return siblingLI;\n }\n ListBase.getSiblingLI = getSiblingLI;\n /**\n * Return the index of the li element\n *\n * @param {Element} item - An element to find next or previous after this element.\n * @param {Element[]} elementArray - An element array to find index of given li.\n */\n function indexOf(item, elementArray) {\n if (!elementArray || !item) {\n return void 0;\n }\n else {\n var liCollections = elementArray;\n liCollections = Array.prototype.slice.call(elementArray);\n return liCollections.indexOf(item);\n }\n }\n ListBase.indexOf = indexOf;\n /**\n * Returns the grouped data from given dataSource.\n *\n * @param {{Object}[]} dataSource - The JSON data which is necessary to process.\n * @param {FieldsMapping} fields - Fields that are mapped from the data source.\n * @param {SortOrder} sortOrder- Specifies final result sort order.\n */\n function groupDataSource(dataSource, fields, sortOrder) {\n if (sortOrder === void 0) { sortOrder = 'None'; }\n var curFields = extend({}, ListBase.defaultMappedFields, fields);\n var cusQuery = new Query().group(curFields.groupBy);\n // need to remove once sorting issues fixed in DataManager\n cusQuery = addSorting(sortOrder, 'key', cusQuery);\n var ds = getDataSource(dataSource, cusQuery);\n dataSource = [];\n for (var j = 0; j < ds.length; j++) {\n var itemObj = ds[j].items;\n var grpItem = {};\n var hdr = 'isHeader';\n grpItem[curFields.text] = ds[j].key;\n grpItem[hdr] = true;\n var newtext = curFields.text;\n if (newtext === 'id') {\n newtext = 'text';\n grpItem[newtext] = ds[j].key;\n }\n grpItem._id = 'group-list-item-' + (ds[j].key ?\n ds[j].key.toString().trim() : 'undefined');\n grpItem.items = itemObj;\n dataSource.push(grpItem);\n for (var k = 0; k < itemObj.length; k++) {\n dataSource.push(itemObj[k]);\n }\n }\n return dataSource;\n }\n ListBase.groupDataSource = groupDataSource;\n /**\n * Returns a sorted query object.\n *\n * @param {SortOrder} sortOrder - Specifies that sort order.\n * @param {string} sortBy - Specifies sortBy fields.\n * @param {Query} query - Pass if any existing query.\n */\n function addSorting(sortOrder, sortBy, query) {\n if (query === void 0) { query = new Query(); }\n if (sortOrder === 'Ascending') {\n query.sortBy(sortBy, 'ascending', true);\n }\n else if (sortOrder === 'Descending') {\n query.sortBy(sortBy, 'descending', true);\n }\n else {\n for (var i = 0; i < query.queries.length; i++) {\n if (query.queries[i].fn === 'onSortBy') {\n query.queries.splice(i, 1);\n }\n }\n }\n return query;\n }\n ListBase.addSorting = addSorting;\n /**\n * Return an array of JSON Data that processed based on queries.\n *\n * @param {{Object}[]} dataSource - Specifies local JSON data source.\n *\n * @param {Query} query - Specifies query that need to process.\n */\n function getDataSource(dataSource, query) {\n // eslint-disable-next-line\n return new DataManager(dataSource)\n .executeLocal(query);\n }\n ListBase.getDataSource = getDataSource;\n /**\n * Created JSON data based the UL and LI element\n *\n * @param {HTMLElement|Element} element - UL element that need to convert as a JSON\n * @param {ListBaseOptions} options? - Specifies listbase option for fields.\n */\n function createJsonFromElement(element, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var fields = extend({}, ListBase.defaultMappedFields, curOpt.fields);\n var curEle = element.cloneNode(true);\n // eslint-disable-next-line\n var jsonAr = [];\n curEle.classList.add('json-parent');\n var childs = curEle.querySelectorAll('.json-parent>li');\n curEle.classList.remove('json-parent');\n for (var i = 0; i < childs.length; i++) {\n var li = childs[i];\n var anchor = li.querySelector('a');\n var ul = li.querySelector('ul');\n // eslint-disable-next-line\n var json = {};\n var childNodes = anchor ? anchor.childNodes : li.childNodes;\n var keys = Object.keys(childNodes);\n for (var i_1 = 0; i_1 < childNodes.length; i_1++) {\n if (!(childNodes[Number(keys[i_1])]).hasChildNodes()) {\n json[fields.text] = childNodes[Number(keys[i_1])].textContent;\n }\n }\n var attributes_1 = getAllAttributes(li);\n if (attributes_1.id) {\n json[fields.id] = attributes_1.id;\n delete attributes_1.id;\n }\n else {\n json[fields.id] = generateId();\n }\n if (Object.keys(attributes_1).length) {\n json[fields.htmlAttributes] = attributes_1;\n }\n if (anchor) {\n attributes_1 = getAllAttributes(anchor);\n if (Object.keys(attributes_1).length) {\n json[fields.urlAttributes] = attributes_1;\n }\n }\n if (ul) {\n json[fields.child] = createJsonFromElement(ul, options);\n }\n jsonAr.push(json);\n }\n return jsonAr;\n }\n ListBase.createJsonFromElement = createJsonFromElement;\n function typeofData(data) {\n var match = { typeof: null, item: null };\n for (var i = 0; i < data.length; i++) {\n if (!isNullOrUndefined(data[i])) {\n return match = { typeof: typeof data[i], item: data[i] };\n }\n }\n return match;\n }\n function setAttribute(element, elementAttributes) {\n var attr = {};\n merge(attr, elementAttributes);\n if (attr.class) {\n addClass([element], attr.class.split(' '));\n delete attr.class;\n }\n attributes(element, attr);\n }\n function getAllAttributes(element) {\n var attributes = {};\n var attr = element.attributes;\n for (var index = 0; index < attr.length; index++) {\n attributes[attr[index].nodeName] = attr[index].nodeValue;\n }\n return attributes;\n }\n /**\n * Created UL element from content template.\n *\n * @param {string} template - that need to convert and generate li element.\n * @param {{Object}[]} dataSource - Specifies local JSON data source.\n * @param {ListBaseOptions} options? - Specifies listbase option for fields.\n */\n function renderContentTemplate(createElement, template, dataSource, \n // eslint-disable-next-line\n fields, options, componentInstance) {\n cssClass = getModuleClass(defaultListBaseOptions.moduleName);\n var ulElement = createElement('ul', { className: cssClass.ul, attrs: { role: 'presentation' } });\n var curOpt = extend({}, defaultListBaseOptions, options);\n var curFields = extend({}, ListBase.defaultMappedFields, fields);\n // eslint-disable-next-line\n var compiledString = compileTemplate(template);\n var liCollection = [];\n var value;\n var id = generateId(); // generate id for drop-down-list option.\n for (var i = 0; i < dataSource.length; i++) {\n var fieldData = getFieldValues(dataSource[i], curFields);\n var curItem = dataSource[i];\n var isHeader = curItem.isHeader;\n if (typeof dataSource[i] === 'string' || typeof dataSource[i] === 'number') {\n value = curItem;\n }\n else {\n value = fieldData[curFields.value];\n }\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: curItem,\n text: value,\n options: curOpt,\n fields: curFields\n };\n curOpt.itemCreating(curData);\n }\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n fieldData = getFieldValues(dataSource[i], curFields);\n if (typeof dataSource[i] === 'string' || typeof dataSource[i] === 'number') {\n value = curItem;\n }\n else {\n value = fieldData[curFields.value];\n }\n }\n var li = createElement('li', {\n id: id + '-' + i,\n className: isHeader ? cssClass.group : cssClass.li, attrs: { role: 'presentation' }\n });\n if (isHeader) {\n if (typeof dataSource[i] === 'string' || typeof dataSource[i] === 'number') {\n li.innerText = curItem;\n }\n else {\n li.innerText = fieldData[curFields.text];\n }\n }\n else {\n var currentID = isHeader ? curOpt.groupTemplateID : curOpt.templateID;\n if (isHeader) {\n if (componentInstance && componentInstance.getModuleName() != 'listview') {\n // eslint-disable-next-line\n var compiledElement = compiledString(curItem, componentInstance, 'headerTemplate', currentID, !!curOpt.isStringTemplate, null, li);\n if (compiledElement) {\n append(compiledElement, li);\n }\n }\n else {\n append(compiledString(curItem, componentInstance, 'headerTemplate', currentID, !!curOpt.isStringTemplate), li);\n }\n }\n else {\n if (componentInstance && componentInstance.getModuleName() !== 'listview') {\n // eslint-disable-next-line\n var compiledElement = compiledString(curItem, componentInstance, 'template', currentID, !!curOpt.isStringTemplate, null, li);\n if (compiledElement) {\n append(compiledElement, li);\n }\n }\n else {\n append(compiledString(curItem, componentInstance, 'template', currentID, !!curOpt.isStringTemplate), li);\n }\n }\n li.setAttribute('data-value', isNullOrUndefined(value) ? 'null' : value);\n li.setAttribute('role', 'option');\n }\n if (curOpt.itemCreated && typeof curOpt.itemCreated === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: curItem,\n text: value,\n item: li,\n options: curOpt,\n fields: curFields\n };\n curOpt.itemCreated(curData);\n }\n liCollection.push(li);\n }\n append(liCollection, ulElement);\n return ulElement;\n }\n ListBase.renderContentTemplate = renderContentTemplate;\n /**\n * Created header items from group template.\n *\n * @param {string} template - that need to convert and generate li element.\n *\n * @param {{Object}[]} dataSource - Specifies local JSON data source.\n *\n * @param {FieldsMapping} fields - Specifies fields for mapping the dataSource.\n *\n * @param {Element[]} headerItems? - Specifies listbase header items.\n */\n // tslint:disable-next-line\n function renderGroupTemplate(groupTemplate, groupDataSource, fields, \n // eslint-disable-next-line\n headerItems, options, componentInstance) {\n // eslint-disable-next-line @typescript-eslint/ban-types\n var compiledString = compileTemplate(groupTemplate);\n var curFields = extend({}, ListBase.defaultMappedFields, fields);\n var curOpt = extend({}, defaultListBaseOptions, options);\n var category = curFields.groupBy;\n for (var _i = 0, headerItems_1 = headerItems; _i < headerItems_1.length; _i++) {\n var header = headerItems_1[_i];\n var headerData = {};\n headerData[category] = header.textContent;\n header.innerHTML = '';\n if (componentInstance && componentInstance.getModuleName() !== \"listview\") {\n // eslint-disable-next-line\n var compiledElement = compiledString(headerData, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, header);\n if (compiledElement) {\n append(compiledElement, header);\n }\n }\n else {\n append(compiledString(headerData, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate), header);\n }\n }\n return headerItems;\n }\n ListBase.renderGroupTemplate = renderGroupTemplate;\n function generateId() {\n return Math.floor((1 + Math.random()) * 0x10000)\n .toString(16)\n .substring(1);\n }\n ListBase.generateId = generateId;\n function processSubChild(createElement, fieldData, fields, ds, options, element, level) {\n // Get SubList\n var subDS = fieldData[fields.child] || [];\n var hasChildren = fieldData[fields.hasChildren];\n //Create Sub child\n if (subDS.length) {\n hasChildren = true;\n element.classList.add(cssClass.hasChild);\n if (options.processSubChild) {\n var subLi = createListFromJson(createElement, subDS, options, ++level);\n element.appendChild(subLi);\n }\n }\n // Create expand and collapse node\n if (!!options.expandCollapse && hasChildren && !options.template) {\n element.firstElementChild.classList.add(cssClass.iconWrapper);\n // eslint-disable-next-line @typescript-eslint/ban-types\n var expandElement = options.expandIconPosition === 'Left' ? prepend : append;\n expandElement([createElement('div', { className: 'e-icons ' + options.expandIconClass })], element.querySelector('.' + cssClass.textContent));\n }\n }\n function generateSingleLevelLI(createElement, item, fieldData, fields, className, innerElements, grpLI, id, index, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var text = item;\n var value = item;\n var dataSource;\n if (typeof item !== 'string' && typeof item !== 'number' && typeof item !== 'boolean') {\n dataSource = item;\n text = (typeof fieldData[fields.text] === 'boolean' || typeof fieldData[fields.text] === 'number') ?\n fieldData[fields.text] : (fieldData[fields.text] || '');\n value = fieldData[fields.value];\n }\n var elementID;\n if (!isNullOrUndefined(dataSource) && !isNullOrUndefined(fieldData[fields.id])\n && fieldData[fields.id] !== '') {\n elementID = id;\n }\n else {\n elementID = id + '-' + index;\n }\n var li = createElement('li', {\n className: (grpLI === true ? cssClass.group : cssClass.li) + ' ' + (isNullOrUndefined(className) ? '' : className),\n id: elementID, attrs: (ariaAttributes.groupItemRole !== '' && ariaAttributes.itemRole !== '' ?\n { role: (grpLI === true ? ariaAttributes.groupItemRole : ariaAttributes.itemRole) } : {})\n });\n // eslint-disable-next-line no-prototype-builtins\n if (dataSource && fieldData.hasOwnProperty(fields.enabled) && fieldData[fields.enabled].toString() === 'false') {\n li.classList.add(cssClass.disabled);\n }\n if (grpLI) {\n li.innerText = text;\n }\n else {\n li.setAttribute('data-value', isNullOrUndefined(value) ? 'null' : value);\n li.setAttribute('role', 'option');\n // eslint-disable-next-line no-prototype-builtins\n if (dataSource && fieldData.hasOwnProperty(fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {\n setAttribute(li, fieldData[fields.htmlAttributes]);\n }\n if (innerElements.length && !curOpt.itemNavigable) {\n append(innerElements, li);\n }\n if (dataSource && (fieldData[fields.url] || (fieldData[fields.urlAttributes] &&\n fieldData[fields.urlAttributes].href))) {\n li.appendChild(anchorTag(createElement, dataSource, fields, text, innerElements, curOpt.itemNavigable));\n }\n else {\n if (innerElements.length && curOpt.itemNavigable) {\n append(innerElements, li);\n }\n li.appendChild(document.createTextNode(text));\n }\n }\n return li;\n }\n function getModuleClass(moduleName) {\n var moduleClass;\n // eslint-disable-next-line\n return moduleClass = {\n li: \"e-\" + moduleName + \"-item\",\n ul: \"e-\" + moduleName + \"-parent e-ul\",\n group: \"e-\" + moduleName + \"-group-item\",\n icon: \"e-\" + moduleName + \"-icon\",\n text: \"e-\" + moduleName + \"-text\",\n check: \"e-\" + moduleName + \"-check\",\n checked: 'e-checked',\n selected: 'e-selected',\n expanded: 'e-expanded',\n textContent: 'e-text-content',\n hasChild: 'e-has-child',\n level: 'e-level',\n url: \"e-\" + moduleName + \"-url\",\n collapsible: 'e-icon-collapsible',\n disabled: 'e-disabled',\n image: \"e-\" + moduleName + \"-img\",\n iconWrapper: 'e-icon-wrapper',\n anchorWrap: 'e-anchor-wrap',\n navigable: 'e-navigable'\n };\n }\n function anchorTag(createElement, dataSource, fields, text, innerElements, isFullNavigation) {\n var fieldData = getFieldValues(dataSource, fields);\n var attr = { href: fieldData[fields.url] };\n // eslint-disable-next-line no-prototype-builtins\n if (fieldData.hasOwnProperty(fields.urlAttributes) && fieldData[fields.urlAttributes]) {\n merge(attr, fieldData[fields.urlAttributes]);\n attr.href = fieldData[fields.url] ? fieldData[fields.url] :\n fieldData[fields.urlAttributes].href;\n }\n var anchorTag;\n if (!isFullNavigation) {\n anchorTag = createElement('a', { className: cssClass.text + ' ' + cssClass.url, innerHTML: text });\n }\n else {\n anchorTag = createElement('a', { className: cssClass.text + ' ' + cssClass.url });\n var anchorWrapper = createElement('div', { className: cssClass.anchorWrap });\n if (innerElements && innerElements.length) {\n append(innerElements, anchorWrapper);\n }\n anchorWrapper.appendChild(document.createTextNode(text));\n append([anchorWrapper], anchorTag);\n }\n setAttribute(anchorTag, attr);\n return anchorTag;\n }\n // tslint:disable-next-line\n /* tslint:disable:align */\n function generateLI(createElement, item, fieldData, \n // eslint-disable-next-line\n fields, className, options, componentInstance) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var text = item;\n var uID;\n var grpLI;\n var dataSource;\n if (typeof item !== 'string' && typeof item !== 'number') {\n dataSource = item;\n text = fieldData[fields.text] || '';\n // tslint:disable-next-line\n uID = (isNullOrUndefined(fieldData['_id'])) ? fieldData[fields.id] : fieldData['_id'];\n // eslint-disable-next-line no-prototype-builtins\n grpLI = (item.hasOwnProperty('isHeader') && item.isHeader)\n ? true : false;\n }\n if (options && options.enableHtmlSanitizer) {\n // eslint-disable-next-line no-self-assign\n text = text;\n }\n var li = createElement('li', {\n className: (grpLI === true ? cssClass.group : cssClass.li) + ' ' + (isNullOrUndefined(className) ? '' : className),\n attrs: (ariaAttributes.groupItemRole !== '' && ariaAttributes.itemRole !== '' ?\n { role: (grpLI === true ? ariaAttributes.groupItemRole : ariaAttributes.itemRole) } : {})\n });\n if (!isNullOrUndefined(uID) === true) {\n li.setAttribute('data-uid', uID);\n }\n else {\n li.setAttribute('data-uid', generateId());\n }\n if (grpLI && options && options.groupTemplate) {\n // eslint-disable-next-line @typescript-eslint/ban-types\n var compiledString = compileTemplate(options.groupTemplate);\n if (componentInstance && componentInstance.getModuleName() !== \"listview\") {\n // eslint-disable-next-line\n var compiledElement = compiledString(item, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate, null, li);\n if (compiledElement) {\n append(compiledElement, li);\n }\n }\n else {\n append(compiledString(item, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate), li);\n }\n }\n else if (!grpLI && options && options.template) {\n // eslint-disable-next-line @typescript-eslint/ban-types\n var compiledString = compileTemplate(options.template);\n if (componentInstance && componentInstance.getModuleName() !== 'listview') {\n // eslint-disable-next-line\n var compiledElement = compiledString(item, componentInstance, 'template', curOpt.templateID, !!curOpt.isStringTemplate, null, li);\n if (compiledElement) {\n append(compiledElement, li);\n }\n }\n else {\n append(compiledString(item, componentInstance, 'template', curOpt.templateID, !!curOpt.isStringTemplate), li);\n }\n }\n else {\n var innerDiv = createElement('div', {\n className: cssClass.textContent,\n attrs: (ariaAttributes.wrapperRole !== '' ? { role: ariaAttributes.wrapperRole } : {})\n });\n if (dataSource && (fieldData[fields.url] || (fieldData[fields.urlAttributes] &&\n fieldData[fields.urlAttributes].href))) {\n innerDiv.appendChild(anchorTag(createElement, dataSource, fields, text, null, curOpt.itemNavigable));\n }\n else {\n var element = createElement('span', {\n className: cssClass.text,\n attrs: (ariaAttributes.itemText !== '' ? { role: ariaAttributes.itemText } : {})\n });\n if (options && options.enableHtmlSanitizer) {\n element.innerText = text;\n }\n else {\n element.innerHTML = text;\n }\n innerDiv.appendChild(element);\n }\n li.appendChild(innerDiv);\n }\n return li;\n }\n /**\n * Returns UL element based on the given LI element.\n *\n * @param {HTMLElement[]} liElement - Specifies array of LI element.\n *\n * @param {string} className? - Specifies class name that need to be added in UL element.\n *\n * @param {ListBaseOptions} options? - Specifies ListBase options.\n */\n function generateUL(createElement, liElement, className, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n cssClass = getModuleClass(curOpt.moduleName);\n var ulElement = createElement('ul', {\n className: cssClass.ul + ' ' + (isNullOrUndefined(className) ? '' : className),\n attrs: (ariaAttributes.listRole !== '' ? { role: ariaAttributes.listRole } : {})\n });\n append(liElement, ulElement);\n return ulElement;\n }\n ListBase.generateUL = generateUL;\n /**\n * Returns LI element with additional DIV tag based on the given LI element.\n *\n * @param {liElement} liElement - Specifies LI element.\n *\n * @param {string} className? - Specifies class name that need to be added in created DIV element.\n *\n * @param {ListBaseOptions} options? - Specifies ListBase options.\n */\n function generateIcon(createElement, liElement, className, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n cssClass = getModuleClass(curOpt.moduleName);\n // eslint-disable-next-line @typescript-eslint/ban-types\n var expandElement = curOpt.expandIconPosition === 'Left' ? prepend : append;\n expandElement([createElement('div', {\n className: 'e-icons ' + curOpt.expandIconClass + ' ' +\n (isNullOrUndefined(className) ? '' : className)\n })], liElement.querySelector('.' + cssClass.textContent));\n return liElement;\n }\n ListBase.generateIcon = generateIcon;\n})(ListBase || (ListBase = {}));\n/**\n * Used to get dataSource item from complex data using fields.\n *\n * @param {Object} dataSource - Specifies an JSON or String data.\n *\n * @param {FieldsMapping} fields - Fields that are mapped from the dataSource.\n */\nexport function getFieldValues(dataItem, fields) {\n var fieldData = {};\n if (isNullOrUndefined(dataItem) || typeof (dataItem) === 'string' || typeof (dataItem) === 'number'\n || !isNullOrUndefined(dataItem.isHeader)) {\n return dataItem;\n }\n else {\n for (var _i = 0, _a = Object.keys(fields); _i < _a.length; _i++) {\n var field = _a[_i];\n var dataField = fields[field];\n var value = !isNullOrUndefined(dataField) &&\n typeof (dataField) === 'string' ? getValue(dataField, dataItem) : undefined;\n if (!isNullOrUndefined(value)) {\n fieldData[dataField] = value;\n }\n }\n }\n return fieldData;\n}\nfunction compileTemplate(template) {\n if (template) {\n try {\n if (document.querySelector(template)) {\n return compile(document.querySelector(template).innerHTML.trim());\n }\n else {\n return compile(template);\n }\n }\n catch (e) {\n return compile(template);\n }\n }\n return undefined;\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, addClass, append, Property, Event, L10n, compile } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, extend, removeClass, prepend, isNullOrUndefined, detach, getValue } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, rippleEffect, ChildProperty, Complex } from '@syncfusion/ej2-base';\nimport { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';\nimport { ListBase } from '@syncfusion/ej2-lists';\nimport { select, selectAll } from '@syncfusion/ej2-base';\nvar FieldSettings = /** @class */ (function (_super) {\n __extends(FieldSettings, _super);\n function FieldSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], FieldSettings.prototype, \"text\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"value\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"iconCss\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"groupBy\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"htmlAttributes\", void 0);\n return FieldSettings;\n}(ChildProperty));\nexport { FieldSettings };\nexport var dropDownBaseClasses = {\n root: 'e-dropdownbase',\n rtl: 'e-rtl',\n content: 'e-content',\n selected: 'e-active',\n hover: 'e-hover',\n noData: 'e-nodata',\n fixedHead: 'e-fixed-head',\n focus: 'e-item-focus',\n li: 'e-list-item',\n group: 'e-list-group-item',\n disabled: 'e-disabled',\n grouping: 'e-dd-group'\n};\nvar ITEMTEMPLATE_PROPERTY = 'ItemTemplate';\nvar DISPLAYTEMPLATE_PROPERTY = 'DisplayTemplate';\nvar SPINNERTEMPLATE_PROPERTY = 'SpinnerTemplate';\nvar VALUETEMPLATE_PROPERTY = 'ValueTemplate';\nvar GROUPTEMPLATE_PROPERTY = 'GroupTemplate';\nvar HEADERTEMPLATE_PROPERTY = 'HeaderTemplate';\nvar FOOTERTEMPLATE_PROPERTY = 'FooterTemplate';\nvar NORECORDSTEMPLATE_PROPERTY = 'NoRecordsTemplate';\nvar ACTIONFAILURETEMPLATE_PROPERTY = 'ActionFailureTemplate';\nvar HIDE_GROUPLIST = 'e-hide-group-header';\n/**\n * DropDownBase component will generate the list items based on given data and act as base class to drop-down related components\n */\nvar DropDownBase = /** @class */ (function (_super) {\n __extends(DropDownBase, _super);\n /**\n * * Constructor for DropDownBase class\n *\n * @param {DropDownBaseModel} options - Specifies the DropDownBase model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function DropDownBase(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.preventChange = false;\n _this.isAngular = false;\n _this.isPreventChange = false;\n _this.isDynamicDataChange = false;\n _this.addedNewItem = false;\n return _this;\n }\n DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {\n var newProperty = new Object();\n var oldProperty = new Object();\n var propName = function (prop) {\n return prop;\n };\n newProperty[propName(prop)] = newProp[propName(prop)];\n oldProperty[propName(prop)] = oldProp[propName(prop)];\n var data = new Object();\n data.newProperty = newProperty;\n data.oldProperty = oldProperty;\n return data;\n };\n DropDownBase.prototype.getValueByText = function (text, ignoreCase, ignoreAccent) {\n var value = null;\n if (!isNullOrUndefined(this.listData)) {\n if (ignoreCase) {\n value = this.checkValueCase(text, true, ignoreAccent);\n }\n else {\n value = this.checkValueCase(text, false, ignoreAccent);\n }\n }\n return value;\n };\n DropDownBase.prototype.checkValueCase = function (text, ignoreCase, ignoreAccent, isTextByValue) {\n var _this = this;\n var value = null;\n if (isTextByValue) {\n value = text;\n }\n var dataSource = this.listData;\n var fields = this.fields;\n var type = this.typeOfData(dataSource).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n for (var _i = 0, dataSource_1 = dataSource; _i < dataSource_1.length; _i++) {\n var item = dataSource_1[_i];\n if (!isNullOrUndefined(item)) {\n if (ignoreAccent) {\n value = this.checkingAccent(String(item), text, ignoreCase);\n }\n else {\n if (ignoreCase) {\n if (this.checkIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n else {\n if (this.checkNonIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase, isTextByValue);\n }\n }\n }\n }\n }\n }\n else {\n if (ignoreCase) {\n dataSource.filter(function (item) {\n var itemValue = getValue(fields.value, item);\n if (!isNullOrUndefined(itemValue) && _this.checkIgnoreCase(getValue(fields.text, item).toString(), text)) {\n value = getValue(fields.value, item);\n }\n });\n }\n else {\n if (isTextByValue) {\n var compareValue_1 = null;\n compareValue_1 = value;\n dataSource.filter(function (item) {\n var itemValue = getValue(fields.value, item);\n if (!isNullOrUndefined(itemValue) && !isNullOrUndefined(value) && itemValue.toString() === compareValue_1.toString()) {\n value = getValue(fields.text, item);\n }\n });\n }\n else {\n dataSource.filter(function (item) {\n if (_this.checkNonIgnoreCase(getValue(fields.text, item), text)) {\n value = getValue(fields.value, item);\n }\n });\n }\n }\n }\n return value;\n };\n DropDownBase.prototype.checkingAccent = function (item, text, ignoreCase) {\n var dataItem = DataUtil.ignoreDiacritics(String(item));\n var textItem = DataUtil.ignoreDiacritics(text.toString());\n var value = null;\n if (ignoreCase) {\n if (this.checkIgnoreCase(dataItem, textItem)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n else {\n if (this.checkNonIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n return value;\n };\n DropDownBase.prototype.checkIgnoreCase = function (item, text) {\n return String(item).toLowerCase() === text.toString().toLowerCase() ? true : false;\n };\n DropDownBase.prototype.checkNonIgnoreCase = function (item, text) {\n return String(item) === text.toString() ? true : false;\n };\n DropDownBase.prototype.getItemValue = function (dataItem, typedText, ignoreCase, isTextByValue) {\n var value = null;\n var dataSource = this.listData;\n var type = this.typeOfData(dataSource).typeof;\n if (isTextByValue) {\n value = dataItem.toString();\n }\n else {\n if (ignoreCase) {\n value = type === 'string' ? String(dataItem) : this.getFormattedValue(String(dataItem));\n }\n else {\n value = type === 'string' ? typedText : this.getFormattedValue(typedText);\n }\n }\n return value;\n };\n DropDownBase.prototype.templateCompiler = function (baseTemplate) {\n var checkTemplate = false;\n if (baseTemplate) {\n try {\n checkTemplate = (selectAll(baseTemplate, document).length) ? true : false;\n }\n catch (exception) {\n checkTemplate = false;\n }\n }\n return checkTemplate;\n };\n DropDownBase.prototype.l10nUpdate = function (actionFailure) {\n var ele = this.getModuleName() === 'listbox' ? this.ulElement : this.list;\n if (this.noRecordsTemplate !== 'No records found' || this.actionFailureTemplate !== 'Request failed') {\n var template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;\n var compiledString = void 0;\n var templateId = actionFailure ? this.actionFailureTemplateId : this.noRecordsTemplateId;\n ele.innerHTML = '';\n var tempaltecheck = this.templateCompiler(template);\n if (tempaltecheck) {\n compiledString = compile(select(template, document).innerHTML.trim());\n }\n else {\n compiledString = compile(template);\n }\n var templateName = actionFailure ? 'actionFailureTemplate' : 'noRecordsTemplate';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var noDataCompTemp = compiledString({}, this, templateName, templateId, this.isStringTemplate, null, ele);\n if (noDataCompTemp && noDataCompTemp.length > 0) {\n for (var i = 0; i < noDataCompTemp.length; i++) {\n ele.appendChild(noDataCompTemp[i]);\n }\n }\n this.renderReactTemplates();\n }\n else {\n var l10nLocale = { noRecordsTemplate: 'No records found', actionFailureTemplate: 'Request failed' };\n var componentLocale = new L10n(this.getLocaleName(), {}, this.locale);\n if (componentLocale.getConstant('actionFailureTemplate') !== '') {\n this.l10n = componentLocale;\n }\n else {\n this.l10n = new L10n(this.getModuleName() === 'listbox' ? 'listbox' :\n this.getModuleName() === 'mention' ? 'mention' : 'dropdowns', l10nLocale, this.locale);\n }\n var content = actionFailure ?\n this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');\n if (this.getModuleName() === 'listbox') {\n var liElem = this.createElement('li');\n liElem.textContent = content;\n ele.appendChild(liElem);\n liElem.classList.add('e-list-nrt');\n liElem.setAttribute('role', 'option');\n }\n else {\n ele.innerHTML = content;\n }\n }\n };\n DropDownBase.prototype.getLocaleName = function () {\n return 'drop-down-base';\n };\n DropDownBase.prototype.getTextByValue = function (value) {\n var text = this.checkValueCase(value, false, false, true);\n return text;\n };\n DropDownBase.prototype.getFormattedValue = function (value) {\n if (this.listData && this.listData.length) {\n var item = this.typeOfData(this.listData);\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'number'\n || item.typeof === 'number') {\n return parseFloat(value);\n }\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'boolean'\n || item.typeof === 'boolean') {\n return ((value === 'true') || ('' + value === 'true'));\n }\n }\n return value;\n };\n /**\n * Sets RTL to dropdownbase wrapper\n *\n * @returns {void}\n */\n DropDownBase.prototype.setEnableRtl = function () {\n if (this.list) {\n this.enableRtlElements.push(this.list);\n }\n if (this.enableRtl) {\n addClass(this.enableRtlElements, dropDownBaseClasses.rtl);\n }\n else {\n removeClass(this.enableRtlElements, dropDownBaseClasses.rtl);\n }\n };\n /**\n * Initialize the Component.\n *\n * @returns {void}\n */\n DropDownBase.prototype.initialize = function (e) {\n this.bindEvent = true;\n this.actionFailureTemplateId = \"\" + this.element.id + ACTIONFAILURETEMPLATE_PROPERTY;\n if (this.element.tagName === 'UL') {\n var jsonElement = ListBase.createJsonFromElement(this.element);\n this.setProperties({ fields: { text: 'text', value: 'text' } }, true);\n this.resetList(jsonElement, this.fields);\n }\n else if (this.element.tagName === 'SELECT') {\n var dataSource = this.dataSource instanceof Array ? (this.dataSource.length > 0 ? true : false)\n : !isNullOrUndefined(this.dataSource) ? true : false;\n if (!dataSource) {\n this.renderItemsBySelect();\n }\n else if (this.isDynamicDataChange) {\n this.setListData(this.dataSource, this.fields, this.query);\n }\n }\n else {\n this.setListData(this.dataSource, this.fields, this.query, e);\n }\n };\n /**\n * Get the properties to be maintained in persisted state.\n *\n * @returns {string} Returns the persisted data of the component.\n */\n DropDownBase.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Sets the enabled state to DropDownBase.\n *\n * @returns {void}\n */\n DropDownBase.prototype.setEnabled = function () {\n this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');\n };\n /**\n * Sets the enabled state to DropDownBase.\n *\n * @param {string} value - Specifies the attribute values to add on the input element.\n * @returns {void}\n */\n DropDownBase.prototype.updateDataAttribute = function (value) {\n var invalidAttr = ['class', 'style', 'id', 'type', 'aria-expanded', 'aria-autocomplete', 'aria-readonly'];\n var attr = {};\n for (var a = 0; a < this.element.attributes.length; a++) {\n if (invalidAttr.indexOf(this.element.attributes[a].name) === -1 &&\n !(this.getModuleName() === 'dropdownlist' && this.element.attributes[a].name === 'readonly')) {\n attr[this.element.attributes[a].name] = this.element.getAttribute(this.element.attributes[a].name);\n }\n }\n extend(attr, value, attr);\n this.setProperties({ htmlAttributes: attr }, true);\n };\n DropDownBase.prototype.renderItemsBySelect = function () {\n var element = this.element;\n var fields = { value: 'value', text: 'text' };\n var jsonElement = [];\n var group = element.querySelectorAll('select>optgroup');\n var option = element.querySelectorAll('select>option');\n this.getJSONfromOption(jsonElement, option, fields);\n if (group.length) {\n for (var i = 0; i < group.length; i++) {\n var item = group[i];\n var optionGroup = {};\n optionGroup[fields.text] = item.label;\n optionGroup.isHeader = true;\n var child = item.querySelectorAll('option');\n jsonElement.push(optionGroup);\n this.getJSONfromOption(jsonElement, child, fields);\n }\n element.querySelectorAll('select>option');\n }\n this.updateFields(fields.text, fields.value, this.fields.groupBy, this.fields.htmlAttributes, this.fields.iconCss);\n this.resetList(jsonElement, fields);\n };\n DropDownBase.prototype.updateFields = function (text, value, groupBy, htmlAttributes, iconCss) {\n var field = {\n 'fields': {\n text: text,\n value: value,\n groupBy: !isNullOrUndefined(groupBy) ? groupBy : this.fields && this.fields.groupBy,\n htmlAttributes: !isNullOrUndefined(htmlAttributes) ? htmlAttributes : this.fields && this.fields.htmlAttributes,\n iconCss: !isNullOrUndefined(iconCss) ? iconCss : this.fields && this.fields.iconCss\n }\n };\n this.setProperties(field, true);\n };\n DropDownBase.prototype.getJSONfromOption = function (items, options, fields) {\n for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {\n var option = options_1[_i];\n var json = {};\n json[fields.text] = option.innerText;\n json[fields.value] = !isNullOrUndefined(option.getAttribute(fields.value)) ?\n option.getAttribute(fields.value) : option.innerText;\n items.push(json);\n }\n };\n /**\n * Execute before render the list items\n *\n * @private\n * @returns {void}\n */\n DropDownBase.prototype.preRender = function () {\n // there is no event handler\n this.scrollTimer = -1;\n this.enableRtlElements = [];\n this.isRequested = false;\n this.isDataFetched = false;\n this.itemTemplateId = \"\" + this.element.id + ITEMTEMPLATE_PROPERTY;\n this.displayTemplateId = \"\" + this.element.id + DISPLAYTEMPLATE_PROPERTY;\n this.spinnerTemplateId = \"\" + this.element.id + SPINNERTEMPLATE_PROPERTY;\n this.valueTemplateId = \"\" + this.element.id + VALUETEMPLATE_PROPERTY;\n this.groupTemplateId = \"\" + this.element.id + GROUPTEMPLATE_PROPERTY;\n this.headerTemplateId = \"\" + this.element.id + HEADERTEMPLATE_PROPERTY;\n this.footerTemplateId = \"\" + this.element.id + FOOTERTEMPLATE_PROPERTY;\n this.noRecordsTemplateId = \"\" + this.element.id + NORECORDSTEMPLATE_PROPERTY;\n };\n /**\n * Creates the list items of DropDownBase component.\n *\n * @param {Object[] | string[] | number[] | DataManager | boolean[]} dataSource - Specifies the data to generate the list.\n * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.\n * @param {Query} query - Accepts the external Query that execute along with data processing.\n * @returns {void}\n */\n DropDownBase.prototype.setListData = function (dataSource, fields, query, event) {\n var _this = this;\n fields = fields ? fields : this.fields;\n var ulElement;\n this.isActive = true;\n var eventArgs = { cancel: false, data: dataSource, query: query };\n this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;\n this.trigger('actionBegin', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n _this.showSpinner();\n if (dataSource instanceof DataManager) {\n _this.isRequested = true;\n if (_this.isDataFetched) {\n _this.emptyDataRequest(fields);\n return;\n }\n eventArgs.data.executeQuery(_this.getQuery(eventArgs.query)).then(function (e) {\n _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;\n _this.trigger('actionComplete', e, function (e) {\n if (!e.cancel) {\n var listItems = e.result;\n if (listItems.length === 0) {\n _this.isDataFetched = true;\n }\n ulElement = _this.renderItems(listItems, fields);\n if (_this.groupTemplate) {\n _this.renderGroupTemplate(ulElement);\n }\n _this.onActionComplete(ulElement, listItems, e);\n _this.isRequested = false;\n _this.bindChildItems(listItems, ulElement, fields, e);\n }\n });\n }).catch(function (e) {\n _this.isRequested = false;\n _this.onActionFailure(e);\n _this.hideSpinner();\n });\n }\n else {\n var dataManager = new DataManager(eventArgs.data);\n var listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);\n var localDataArgs = { cancel: false, result: listItems };\n _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;\n _this.trigger('actionComplete', localDataArgs, function (localDataArgs) {\n if (!localDataArgs.cancel) {\n ulElement = _this.renderItems(localDataArgs.result, fields);\n _this.onActionComplete(ulElement, localDataArgs.result, event);\n if (_this.groupTemplate) {\n _this.renderGroupTemplate(ulElement);\n }\n _this.bindChildItems(localDataArgs.result, ulElement, fields);\n setTimeout(function () {\n if (_this.getModuleName() === 'multiselect' && _this.itemTemplate != null && (ulElement.childElementCount > 0 && (ulElement.children[0].childElementCount > 0 || (_this.fields.groupBy && ulElement.children[1] && ulElement.children[1].childElementCount > 0)))) {\n _this.updateDataList();\n }\n });\n }\n });\n }\n }\n });\n };\n DropDownBase.prototype.bindChildItems = function (listItems, ulElement, fields, e) {\n var _this = this;\n if (listItems.length >= 100 && this.getModuleName() === 'autocomplete') {\n setTimeout(function () {\n var childNode = _this.remainingItems(_this.sortedData, fields);\n append(childNode, ulElement);\n _this.liCollections = _this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n _this.updateListValues();\n _this.raiseDataBound(listItems, e);\n }, 0);\n }\n else {\n this.raiseDataBound(listItems, e);\n }\n };\n DropDownBase.prototype.updateListValues = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.findListElement = function (list, findNode, attribute, value) {\n var liElement = null;\n if (list) {\n var listArr = [].slice.call(list.querySelectorAll(findNode));\n for (var index = 0; index < listArr.length; index++) {\n if (listArr[index].getAttribute(attribute) === (value + '')) {\n liElement = listArr[index];\n break;\n }\n }\n }\n return liElement;\n };\n DropDownBase.prototype.raiseDataBound = function (listItems, e) {\n this.hideSpinner();\n var dataBoundEventArgs = {\n items: listItems,\n e: e\n };\n this.trigger('dataBound', dataBoundEventArgs);\n };\n DropDownBase.prototype.remainingItems = function (dataSource, fields) {\n var spliceData = new DataManager(dataSource).executeLocal(new Query().skip(100));\n if (this.itemTemplate) {\n var listElements = this.templateListItem(spliceData, fields);\n return [].slice.call(listElements.childNodes);\n }\n var type = this.typeOfData(spliceData).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n return ListBase.createListItemFromArray(this.createElement, spliceData, true, this.listOption(spliceData, fields), this);\n }\n return ListBase.createListItemFromJson(this.createElement, spliceData, this.listOption(spliceData, fields), 1, true, this);\n };\n DropDownBase.prototype.emptyDataRequest = function (fields) {\n var listItems = [];\n this.onActionComplete(this.renderItems(listItems, fields), listItems);\n this.isRequested = false;\n this.hideSpinner();\n };\n DropDownBase.prototype.showSpinner = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.hideSpinner = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.onActionFailure = function (e) {\n this.liCollections = [];\n this.trigger('actionFailure', e);\n this.l10nUpdate(true);\n addClass([this.list], dropDownBaseClasses.noData);\n };\n /* eslint-disable @typescript-eslint/no-unused-vars */\n DropDownBase.prototype.onActionComplete = function (ulElement, list, e) {\n /* eslint-enable @typescript-eslint/no-unused-vars */\n this.listData = list;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.clearTemplate(['itemTemplate', 'groupTemplate', 'actionFailureTemplate', 'noRecordsTemplate']);\n }\n this.fixedHeaderElement = isNullOrUndefined(this.fixedHeaderElement) ? this.fixedHeaderElement : null;\n if (this.getModuleName() === 'multiselect' && this.properties.allowCustomValue && this.fields.groupBy) {\n for (var i = 0; i < ulElement.childElementCount; i++) {\n if (ulElement.children[i].classList.contains('e-list-group-item')) {\n if (isNullOrUndefined(ulElement.children[i].innerHTML) || ulElement.children[i].innerHTML == \"\") {\n addClass([ulElement.children[i]], HIDE_GROUPLIST);\n }\n }\n }\n }\n if (!isNullOrUndefined(this.list)) {\n this.list.innerHTML = '';\n this.list.appendChild(ulElement);\n this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n this.ulElement = this.list.querySelector('ul');\n this.postRender(this.list, list, this.bindEvent);\n }\n };\n /* eslint-disable @typescript-eslint/no-unused-vars */\n DropDownBase.prototype.postRender = function (listElement, list, bindEvent) {\n /* eslint-enable @typescript-eslint/no-unused-vars */\n var focusItem = listElement.querySelector('.' + dropDownBaseClasses.li);\n var selectedItem = listElement.querySelector('.' + dropDownBaseClasses.selected);\n if (focusItem && !selectedItem) {\n focusItem.classList.add(dropDownBaseClasses.focus);\n }\n if (list.length <= 0) {\n this.l10nUpdate();\n addClass([listElement], dropDownBaseClasses.noData);\n }\n else {\n listElement.classList.remove(dropDownBaseClasses.noData);\n }\n };\n /**\n * Get the query to do the data operation before list item generation.\n *\n * @param {Query} query - Accepts the external Query that execute along with data processing.\n * @returns {Query} Returns the query to do the data query operation.\n */\n DropDownBase.prototype.getQuery = function (query) {\n return query ? query : this.query ? this.query : new Query();\n };\n /**\n * To render the template content for group header element.\n *\n * @param {HTMLElement} listEle - Specifies the group list elements.\n * @returns {void}\n */\n DropDownBase.prototype.renderGroupTemplate = function (listEle) {\n if (this.fields.groupBy !== null && this.dataSource || this.element.querySelector('.' + dropDownBaseClasses.group)) {\n var dataSource = this.dataSource;\n var option = { groupTemplateID: this.groupTemplateId, isStringTemplate: this.isStringTemplate };\n var headerItems = listEle.querySelectorAll('.' + dropDownBaseClasses.group);\n var groupcheck = this.templateCompiler(this.groupTemplate);\n if (groupcheck) {\n var groupValue = select(this.groupTemplate, document).innerHTML.trim();\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var tempHeaders = ListBase.renderGroupTemplate(groupValue, dataSource, this.fields.properties, headerItems, option, this);\n //EJ2-55168- Group checkbox is not working with group template\n if (this.isGroupChecking) {\n for (var i = 0; i < tempHeaders.length; i++) {\n this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });\n }\n }\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var tempHeaders = ListBase.renderGroupTemplate(this.groupTemplate, dataSource, this.fields.properties, headerItems, option, this);\n //EJ2-55168- Group checkbox is not working with group template\n if (this.isGroupChecking) {\n for (var i = 0; i < tempHeaders.length; i++) {\n this.notify('addItem', { module: 'CheckBoxSelection', item: tempHeaders[i] });\n }\n }\n }\n this.renderReactTemplates();\n }\n };\n /**\n * To create the ul li list items\n *\n * @param {object []} dataSource - Specifies the data to generate the list.\n * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.\n * @returns {HTMLElement} Return the ul li list items.\n */\n DropDownBase.prototype.createListItems = function (dataSource, fields) {\n if (dataSource && fields.groupBy || this.element.querySelector('optgroup')) {\n if (fields.groupBy) {\n if (this.sortOrder !== 'None') {\n dataSource = this.getSortedDataSource(dataSource);\n }\n dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);\n }\n addClass([this.list], dropDownBaseClasses.grouping);\n }\n else {\n dataSource = this.getSortedDataSource(dataSource);\n }\n var options = this.listOption(dataSource, fields);\n var spliceData = (dataSource.length > 100) ?\n new DataManager(dataSource).executeLocal(new Query().take(100))\n : dataSource;\n this.sortedData = dataSource;\n return ListBase.createList(this.createElement, (this.getModuleName() === 'autocomplete') ? spliceData : dataSource, options, true, this);\n };\n DropDownBase.prototype.listOption = function (dataSource, fields) {\n var iconCss = isNullOrUndefined(fields.iconCss) ? false : true;\n var fieldValues = !isNullOrUndefined(fields.properties) ?\n fields.properties : fields;\n var options = (fields.text !== null || fields.value !== null) ? {\n fields: fieldValues,\n showIcon: iconCss, ariaAttributes: { groupItemRole: 'presentation' }\n } : { fields: { value: 'text' } };\n return extend({}, options, fields, true);\n };\n DropDownBase.prototype.setFloatingHeader = function (e) {\n if (isNullOrUndefined(this.fixedHeaderElement)) {\n this.fixedHeaderElement = this.createElement('div', { className: dropDownBaseClasses.fixedHead });\n if (!this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {\n this.fixedHeaderElement.style.display = 'none';\n }\n prepend([this.fixedHeaderElement], this.list);\n this.setFixedHeader();\n }\n if (!isNullOrUndefined(this.fixedHeaderElement) && this.fixedHeaderElement.style.zIndex === '0') {\n this.setFixedHeader();\n }\n this.scrollStop(e);\n };\n DropDownBase.prototype.scrollStop = function (e) {\n var target = !isNullOrUndefined(e) ? e.target : this.list;\n var liHeight = parseInt(getComputedStyle(this.getValidLi(), null).getPropertyValue('height'), 10);\n var topIndex = Math.round(target.scrollTop / liHeight);\n var liCollections = this.list.querySelectorAll('li' + ':not(.e-hide-listitem)');\n for (var i = topIndex; i > -1; i--) {\n if (!isNullOrUndefined(liCollections[i]) && liCollections[i].classList.contains(dropDownBaseClasses.group)) {\n var currentLi = liCollections[i];\n this.fixedHeaderElement.innerHTML = currentLi.innerHTML;\n this.fixedHeaderElement.style.top = target.scrollTop + 'px';\n this.fixedHeaderElement.style.display = 'block';\n break;\n }\n else {\n this.fixedHeaderElement.style.display = 'none';\n this.fixedHeaderElement.style.top = 'none';\n }\n }\n };\n DropDownBase.prototype.getValidLi = function () {\n return this.liCollections[0];\n };\n /**\n * To render the list items\n *\n * @param {object[]} listData - Specifies the list of array of data.\n * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.\n * @returns {HTMLElement} Return the list items.\n */\n DropDownBase.prototype.renderItems = function (listData, fields) {\n var ulElement;\n if (this.itemTemplate && listData) {\n var dataSource = listData;\n if (dataSource && fields.groupBy) {\n if (this.sortOrder !== 'None') {\n dataSource = this.getSortedDataSource(dataSource);\n }\n dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);\n }\n else {\n dataSource = this.getSortedDataSource(dataSource);\n }\n this.sortedData = dataSource;\n var spliceData = (dataSource.length > 100) ?\n new DataManager(dataSource).executeLocal(new Query().take(100))\n : dataSource;\n ulElement = this.templateListItem((this.getModuleName() === 'autocomplete') ? spliceData : dataSource, fields);\n }\n else {\n ulElement = this.createListItems(listData, fields);\n }\n return ulElement;\n };\n DropDownBase.prototype.templateListItem = function (dataSource, fields) {\n var option = this.listOption(dataSource, fields);\n option.templateID = this.itemTemplateId;\n option.isStringTemplate = this.isStringTemplate;\n var itemcheck = this.templateCompiler(this.itemTemplate);\n if (itemcheck) {\n var itemValue = select(this.itemTemplate, document).innerHTML.trim();\n return ListBase.renderContentTemplate(this.createElement, itemValue, dataSource, fields.properties, option, this);\n }\n else {\n return ListBase.renderContentTemplate(this.createElement, this.itemTemplate, dataSource, fields.properties, option, this);\n }\n };\n DropDownBase.prototype.typeOfData = function (items) {\n var item = { typeof: null, item: null };\n for (var i = 0; (!isNullOrUndefined(items) && i < items.length); i++) {\n if (!isNullOrUndefined(items[i])) {\n var listDataType = typeof (items[i]) === 'string' ||\n typeof (items[i]) === 'number' || typeof (items[i]) === 'boolean';\n var isNullData = listDataType ? isNullOrUndefined(items[i]) :\n isNullOrUndefined(getValue((this.fields.value ? this.fields.value : 'value'), items[i]));\n if (!isNullData) {\n return item = { typeof: typeof items[i], item: items[i] };\n }\n }\n }\n return item;\n };\n DropDownBase.prototype.setFixedHeader = function () {\n this.list.parentElement.style.display = 'block';\n var borderWidth = 0;\n if (this.list && this.list.parentElement) {\n borderWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-width'), 10);\n /*Shorthand property not working in Firefox for getComputedStyle method.\n Refer bug report https://bugzilla.mozilla.org/show_bug.cgi?id=137688\n Refer alternate solution https://stackoverflow.com/a/41696234/9133493*/\n if (isNaN(borderWidth)) {\n var borderTopWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-top-width'), 10);\n var borderBottomWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-bottom-width'), 10);\n var borderLeftWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-left-width'), 10);\n var borderRightWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-right-width'), 10);\n borderWidth = (borderTopWidth + borderBottomWidth + borderLeftWidth + borderRightWidth);\n }\n }\n var liWidth = this.getValidLi().offsetWidth - borderWidth;\n this.fixedHeaderElement.style.width = liWidth.toString() + 'px';\n setStyleAttribute(this.fixedHeaderElement, { zIndex: 10 });\n var firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group + ':not(.e-hide-listitem)');\n this.fixedHeaderElement.innerHTML = firstLi.innerHTML;\n };\n DropDownBase.prototype.getSortedDataSource = function (dataSource) {\n if (dataSource && this.sortOrder !== 'None') {\n var textField = this.fields.text ? this.fields.text : 'text';\n if (this.typeOfData(dataSource).typeof === 'string' || this.typeOfData(dataSource).typeof === 'number'\n || this.typeOfData(dataSource).typeof === 'boolean') {\n textField = '';\n }\n dataSource = ListBase.getDataSource(dataSource, ListBase.addSorting(this.sortOrder, textField));\n }\n return dataSource;\n };\n /**\n * Return the index of item which matched with given value in data source\n *\n * @param {string | number | boolean} value - Specifies given value.\n * @returns {number} Returns the index of the item.\n */\n DropDownBase.prototype.getIndexByValue = function (value) {\n var index;\n var listItems = this.getItems();\n for (var i = 0; i < listItems.length; i++) {\n if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {\n index = i;\n break;\n }\n }\n return index;\n };\n /**\n * To dispatch the event manually\n *\n * @param {HTMLElement} element - Specifies the element to dispatch the event.\n * @param {string} type - Specifies the name of the event.\n * @returns {void}\n */\n DropDownBase.prototype.dispatchEvent = function (element, type) {\n var evt = document.createEvent('HTMLEvents');\n evt.initEvent(type, false, true);\n element.dispatchEvent(evt);\n };\n /**\n * To set the current fields\n *\n * @returns {void}\n */\n DropDownBase.prototype.setFields = function () {\n if (this.fields.value && !this.fields.text) {\n this.updateFields(this.fields.value, this.fields.value);\n }\n else if (!this.fields.value && this.fields.text) {\n this.updateFields(this.fields.text, this.fields.text);\n }\n else if (!this.fields.value && !this.fields.text) {\n this.updateFields('text', 'text');\n }\n };\n /**\n * reset the items list.\n *\n * @param {Object[] | string[] | number[] | DataManager | boolean[]} dataSource - Specifies the data to generate the list.\n * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.\n * @param {Query} query - Accepts the external Query that execute along with data processing.\n * @returns {void}\n */\n DropDownBase.prototype.resetList = function (dataSource, fields, query, e) {\n if (this.list) {\n if ((this.element.tagName === 'SELECT' && this.element.options.length > 0)\n || (this.element.tagName === 'UL' && this.element.childNodes.length > 0)) {\n var data = dataSource instanceof Array ? (dataSource.length > 0)\n : !isNullOrUndefined(dataSource);\n if (!data && this.selectData && this.selectData.length > 0) {\n dataSource = this.selectData;\n }\n }\n dataSource = this.getModuleName() === 'combobox' && this.selectData && dataSource instanceof Array && dataSource.length < this.selectData.length && this.addedNewItem ? this.selectData : dataSource;\n this.addedNewItem = false;\n this.setListData(dataSource, fields, query, e);\n }\n };\n DropDownBase.prototype.updateSelectElementData = function (isFiltering) {\n if (isFiltering && isNullOrUndefined(this.selectData) && this.listData && this.listData.length > 0) {\n this.selectData = this.listData;\n }\n };\n DropDownBase.prototype.updateSelection = function () {\n // This is for after added the item, need to update the selected index values.\n };\n DropDownBase.prototype.renderList = function () {\n // This is for render the list items.\n this.render();\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownBase.prototype.updateDataSource = function (props) {\n this.resetList(this.dataSource);\n };\n DropDownBase.prototype.setUpdateInitial = function (props, newProp) {\n this.isDataFetched = false;\n var updateData = {};\n for (var j = 0; props.length > j; j++) {\n if (newProp[props[j]] && props[j] === 'fields') {\n this.setFields();\n updateData[props[j]] = newProp[props[j]];\n }\n else if (newProp[props[j]]) {\n updateData[props[j]] = newProp[props[j]];\n }\n }\n if (Object.keys(updateData).length > 0) {\n if (Object.keys(updateData).indexOf('dataSource') === -1) {\n updateData.dataSource = this.dataSource;\n }\n this.updateDataSource(updateData);\n }\n };\n /**\n * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.\n *\n * @param {DropDownBaseModel} newProp - Returns the dynamic property value of the component.\n * @param {DropDownBaseModel} oldProp - Returns the previous property value of the component.\n * @private\n * @returns {void}\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownBase.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (this.getModuleName() === 'dropdownbase') {\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n }\n this.setUpdateInitial(['sortOrder', 'itemTemplate'], newProp);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'query':\n case 'sortOrder':\n case 'dataSource':\n case 'itemTemplate':\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'enabled':\n this.setEnabled();\n break;\n case 'groupTemplate':\n this.renderGroupTemplate(this.list);\n if (this.ulElement && this.fixedHeaderElement) {\n var firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group);\n this.fixedHeaderElement.innerHTML = firstLi.innerHTML;\n }\n break;\n case 'locale':\n if (this.list && (!isNullOrUndefined(this.liCollections) && this.liCollections.length === 0)) {\n this.l10nUpdate();\n }\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n this.setZIndex();\n break;\n }\n }\n };\n /**\n * Build and render the component\n *\n * @param {boolean} isEmptyData - Specifies the component to initialize with list data or not.\n * @private\n * @returns {void}\n */\n DropDownBase.prototype.render = function (e, isEmptyData) {\n this.list = this.createElement('div', { className: dropDownBaseClasses.content, attrs: { 'tabindex': '0' } });\n this.list.classList.add(dropDownBaseClasses.root);\n this.setFields();\n var rippleModel = { duration: 300, selector: '.' + dropDownBaseClasses.li };\n this.rippleFun = rippleEffect(this.list, rippleModel);\n var group = this.element.querySelector('select>optgroup');\n if ((this.fields.groupBy || !isNullOrUndefined(group)) && !this.isGroupChecking) {\n EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);\n }\n if (this.getModuleName() === 'dropdownbase') {\n if (this.element.getAttribute('tabindex')) {\n this.list.setAttribute('tabindex', this.element.getAttribute('tabindex'));\n }\n removeClass([this.element], dropDownBaseClasses.root);\n this.element.style.display = 'none';\n var wrapperElement = this.createElement('div');\n this.element.parentElement.insertBefore(wrapperElement, this.element);\n wrapperElement.appendChild(this.element);\n wrapperElement.appendChild(this.list);\n }\n this.setEnableRtl();\n this.setEnabled();\n if (!isEmptyData) {\n this.initialize(e);\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 DropDownBase.prototype.getModuleName = function () {\n return 'dropdownbase';\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 DropDownBase.prototype.getItems = function () {\n return this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Adds a new item to the popup list. By default, new item appends to the list as the last item,\n * but you can insert based on the index parameter.\n *\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 DropDownBase.prototype.addItem = function (items, itemIndex) {\n if (!this.list || (this.list.textContent === this.noRecordsTemplate && this.getModuleName() !== 'listbox')) {\n this.renderList();\n }\n if (this.sortOrder !== 'None' && isNullOrUndefined(itemIndex)) {\n var newList = [].slice.call(this.listData);\n newList.push(items);\n newList = this.getSortedDataSource(newList);\n if (this.fields.groupBy) {\n newList = ListBase.groupDataSource(newList, this.fields.properties, this.sortOrder);\n itemIndex = newList.indexOf(items);\n }\n else {\n itemIndex = newList.indexOf(items);\n }\n }\n var itemsCount = this.getItems().length;\n var selectedItemValue = this.list.querySelector('.' + dropDownBaseClasses.selected);\n items = (items instanceof Array ? items : [items]);\n var index;\n index = (isNullOrUndefined(itemIndex) || itemIndex < 0 || itemIndex > itemsCount - 1) ? itemsCount : itemIndex;\n var fields = this.fields;\n if (items && fields.groupBy) {\n items = ListBase.groupDataSource(items, fields.properties);\n }\n var liCollections = [];\n for (var i = 0; i < items.length; i++) {\n var item = items[i];\n var isHeader = item.isHeader;\n var li = this.createElement('li', { className: isHeader ? dropDownBaseClasses.group : dropDownBaseClasses.li, id: 'option-add-' + i });\n var itemText = item instanceof Object ? getValue(fields.text, item) : item;\n if (isHeader) {\n li.innerText = itemText;\n }\n if (this.itemTemplate && !isHeader) {\n var itemCheck = this.templateCompiler(this.itemTemplate);\n var compiledString = itemCheck ? compile(select(this.itemTemplate, document).innerHTML.trim()) : compile(this.itemTemplate);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var addItemTemplate = compiledString(item, this, 'itemTemplate', this.itemTemplateId, this.isStringTemplate, null, li);\n if (addItemTemplate) {\n append(addItemTemplate, li);\n }\n }\n else if (!isHeader) {\n li.appendChild(document.createTextNode(itemText));\n }\n li.setAttribute('data-value', item instanceof Object ? getValue(fields.value, item) : item);\n li.setAttribute('role', 'option');\n this.notify('addItem', { module: 'CheckBoxSelection', item: li });\n liCollections.push(li);\n this.listData.push(item);\n if (this.sortOrder === 'None' && isNullOrUndefined(itemIndex) && index === 0) {\n index = null;\n }\n this.updateActionCompleteData(li, item, index);\n //Listbox event\n this.trigger('beforeItemRender', { element: li, item: item });\n }\n if (itemsCount === 0 && isNullOrUndefined(this.list.querySelector('ul'))) {\n this.list.innerHTML = '';\n this.list.classList.remove(dropDownBaseClasses.noData);\n this.list.appendChild(this.ulElement);\n this.liCollections = liCollections;\n append(liCollections, this.ulElement);\n this.updateAddItemList(this.list, itemsCount);\n }\n else {\n if (this.getModuleName() === 'listbox' && itemsCount === 0) {\n this.ulElement.innerHTML = '';\n }\n var attr = [];\n for (var i = 0; i < items.length; i++) {\n var listGroupItem = this.ulElement.querySelectorAll('.e-list-group-item');\n for (var j = 0; j < listGroupItem.length; j++) {\n attr[j] = listGroupItem[j].innerText;\n }\n if (attr.indexOf(liCollections[i].innerText) > -1 && fields.groupBy) {\n for (var j = 0; j < listGroupItem.length; j++) {\n if (attr[j] === liCollections[i].innerText) {\n if (this.sortOrder === 'None') {\n this.ulElement.insertBefore(liCollections[i + 1], listGroupItem[j + 1]);\n }\n else {\n this.ulElement.insertBefore(liCollections[i + 1], this.ulElement.childNodes[itemIndex]);\n }\n i = i + 1;\n break;\n }\n }\n }\n else {\n if (this.liCollections[index]) {\n this.liCollections[index].parentNode.insertBefore(liCollections[i], this.liCollections[index]);\n }\n else {\n this.ulElement.appendChild(liCollections[i]);\n }\n }\n var tempLi = [].slice.call(this.liCollections);\n tempLi.splice(index, 0, liCollections[i]);\n this.liCollections = tempLi;\n index += 1;\n if (this.getModuleName() === 'multiselect') {\n this.updateDataList();\n }\n }\n }\n if (selectedItemValue || itemIndex === 0) {\n this.updateSelection();\n }\n this.addedNewItem = true;\n };\n DropDownBase.prototype.validationAttribute = function (target, hidden) {\n var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');\n hidden.setAttribute('name', name);\n target.removeAttribute('name');\n var attributes = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attributes.length; i++) {\n if (!target.getAttribute(attributes[i])) {\n continue;\n }\n var attr = target.getAttribute(attributes[i]);\n hidden.setAttribute(attributes[i], attr);\n target.removeAttribute(attributes[i]);\n }\n };\n DropDownBase.prototype.setZIndex = function () {\n // this is for component wise\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownBase.prototype.updateActionCompleteData = function (li, item, index) {\n // this is for ComboBox custom value\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownBase.prototype.updateAddItemList = function (list, itemCount) {\n // this is for multiselect add item\n };\n DropDownBase.prototype.updateDataList = function () {\n // this is for multiselect update list items\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\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 DropDownBase.prototype.getDataByValue = function (value) {\n if (!isNullOrUndefined(this.listData)) {\n var type = this.typeOfData(this.listData).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n for (var _i = 0, _a = this.listData; _i < _a.length; _i++) {\n var item = _a[_i];\n if (!isNullOrUndefined(item) && item === value) {\n return item;\n }\n }\n }\n else {\n for (var _b = 0, _c = this.listData; _b < _c.length; _b++) {\n var item = _c[_b];\n if (!isNullOrUndefined(item) && getValue((this.fields.value ? this.fields.value : 'value'), item) === value) {\n return item;\n }\n }\n }\n }\n return null;\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Removes the component from the DOM and detaches all its related event handlers. It also removes the attributes and classes.\n *\n * @method destroy\n * @returns {void}\n */\n DropDownBase.prototype.destroy = function () {\n if (document.body.contains(this.list)) {\n EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);\n if (!isNullOrUndefined(this.rippleFun)) {\n this.rippleFun();\n }\n detach(this.list);\n }\n _super.prototype.destroy.call(this);\n };\n __decorate([\n Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)\n ], DropDownBase.prototype, \"fields\", void 0);\n __decorate([\n Property(false)\n ], DropDownBase.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"itemTemplate\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"groupTemplate\", void 0);\n __decorate([\n Property('No records found')\n ], DropDownBase.prototype, \"noRecordsTemplate\", void 0);\n __decorate([\n Property('Request failed')\n ], DropDownBase.prototype, \"actionFailureTemplate\", void 0);\n __decorate([\n Property('None')\n ], DropDownBase.prototype, \"sortOrder\", void 0);\n __decorate([\n Property(true)\n ], DropDownBase.prototype, \"enabled\", void 0);\n __decorate([\n Property([])\n ], DropDownBase.prototype, \"dataSource\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"query\", void 0);\n __decorate([\n Property('StartsWith')\n ], DropDownBase.prototype, \"filterType\", void 0);\n __decorate([\n Property(true)\n ], DropDownBase.prototype, \"ignoreCase\", void 0);\n __decorate([\n Property(1000)\n ], DropDownBase.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], DropDownBase.prototype, \"ignoreAccent\", void 0);\n __decorate([\n Property()\n ], DropDownBase.prototype, \"locale\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionBegin\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionComplete\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionFailure\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"dataBound\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"destroyed\", void 0);\n DropDownBase = __decorate([\n NotifyPropertyChanges\n ], DropDownBase);\n return DropDownBase;\n}(Component));\nexport { DropDownBase };\n","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, compile, KeyboardEvents, append, select } from '@syncfusion/ej2-base';\nimport { attributes, isNullOrUndefined, getUniqueID, formatUnit, isUndefined, getValue } from '@syncfusion/ej2-base';\nimport { Animation, Browser, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, closest, prepend, detach, classList } from '@syncfusion/ej2-base';\nimport { Popup, isCollide, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { incrementalSearch, resetIncrementalSearchValues } from '../common/incremental-search';\nimport { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';\nimport { DataManager, Query, Predicate } from '@syncfusion/ej2-data';\n// don't use space in classnames\nexport var dropDownListClasses = {\n root: 'e-dropdownlist',\n hover: dropDownBaseClasses.hover,\n selected: dropDownBaseClasses.selected,\n rtl: dropDownBaseClasses.rtl,\n li: dropDownBaseClasses.li,\n disable: dropDownBaseClasses.disabled,\n base: dropDownBaseClasses.root,\n focus: dropDownBaseClasses.focus,\n input: 'e-input-group',\n inputFocus: 'e-input-focus',\n icon: 'e-input-group-icon e-ddl-icon',\n iconAnimation: 'e-icon-anim',\n value: 'e-input-value',\n device: 'e-ddl-device',\n backIcon: 'e-input-group-icon e-back-icon e-icons',\n filterBarClearIcon: 'e-input-group-icon e-clear-icon e-icons',\n filterInput: 'e-input-filter',\n filterParent: 'e-filter-parent',\n mobileFilter: 'e-ddl-device-filter',\n footer: 'e-ddl-footer',\n header: 'e-ddl-header',\n clearIcon: 'e-clear-icon',\n clearIconHide: 'e-clear-icon-hide',\n popupFullScreen: 'e-popup-full-page',\n disableIcon: 'e-ddl-disable-icon',\n hiddenElement: 'e-ddl-hidden'\n};\nvar inputObject = {\n container: null,\n buttons: []\n};\n/**\n * The DropDownList component contains a list of predefined values from which you can\n * choose a single value.\n * ```html\n *
\n * ```\n * ```typescript\n * let dropDownListObj:DropDownList = new DropDownList();\n * dropDownListObj.appendTo(\"#list\");\n * ```\n */\nvar DropDownList = /** @class */ (function (_super) {\n __extends(DropDownList, _super);\n /**\n * * Constructor for creating the DropDownList component.\n *\n * @param {DropDownListModel} options - Specifies the DropDownList model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function DropDownList(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isListSearched = false;\n _this.preventChange = false;\n _this.isAngular = false;\n return _this;\n }\n /**\n * Initialize the event handler.\n *\n * @private\n * @returns {void}\n */\n DropDownList.prototype.preRender = function () {\n this.valueTempElement = null;\n this.element.style.opacity = '0';\n this.initializeData();\n _super.prototype.preRender.call(this);\n this.activeIndex = this.index;\n this.queryString = '';\n };\n DropDownList.prototype.initializeData = function () {\n this.isPopupOpen = false;\n this.isDocumentClick = false;\n this.isInteracted = false;\n this.isFilterFocus = false;\n this.beforePopupOpen = false;\n this.initial = true;\n this.initRemoteRender = false;\n this.isNotSearchList = false;\n this.isTyped = false;\n this.isSelected = false;\n this.preventFocus = false;\n this.preventAutoFill = false;\n this.isValidKey = false;\n this.typedString = '';\n this.isEscapeKey = false;\n this.isPreventBlur = false;\n this.isTabKey = false;\n this.actionCompleteData = { isUpdated: false };\n this.actionData = { isUpdated: false };\n this.prevSelectPoints = {};\n this.isSelectCustom = false;\n this.isDropDownClick = false;\n this.preventAltUp = false;\n this.isCustomFilter = false;\n this.isSecondClick = false;\n this.previousValue = null;\n this.keyConfigure = {\n tab: 'tab',\n enter: '13',\n escape: '27',\n end: '35',\n home: '36',\n down: '40',\n up: '38',\n pageUp: '33',\n pageDown: '34',\n open: 'alt+40',\n close: 'shift+tab',\n hide: 'alt+38',\n space: '32'\n };\n };\n DropDownList.prototype.setZIndex = function () {\n if (this.popupObj) {\n this.popupObj.setProperties({ 'zIndex': this.zIndex });\n }\n };\n DropDownList.prototype.renderList = function (e, isEmptyData) {\n _super.prototype.render.call(this, e, isEmptyData);\n this.unWireListEvents();\n this.wireListEvents();\n };\n DropDownList.prototype.floatLabelChange = function () {\n if (this.getModuleName() === 'dropdownlist' && this.floatLabelType === 'Auto') {\n var floatElement = this.inputWrapper.container.querySelector('.e-float-text');\n if (this.inputElement.value !== '' || this.isInteracted) {\n classList(floatElement, ['e-label-top'], ['e-label-bottom']);\n }\n else {\n classList(floatElement, ['e-label-bottom'], ['e-label-top']);\n }\n }\n };\n DropDownList.prototype.resetHandler = function (e) {\n e.preventDefault();\n this.clearAll(e);\n };\n DropDownList.prototype.resetFocusElement = function () {\n this.removeHover();\n this.removeSelection();\n this.removeFocus();\n this.list.scrollTop = 0;\n if (this.getModuleName() !== 'autocomplete' && !isNullOrUndefined(this.ulElement)) {\n var li = this.ulElement.querySelector('.' + dropDownListClasses.li);\n if (li) {\n li.classList.add(dropDownListClasses.focus);\n }\n }\n };\n DropDownList.prototype.clearAll = function (e, properties) {\n this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;\n if (isNullOrUndefined(properties) || (!isNullOrUndefined(properties) &&\n (isNullOrUndefined(properties.dataSource) ||\n (!(properties.dataSource instanceof DataManager) && properties.dataSource.length === 0)))) {\n this.isActive = true;\n this.resetSelection(properties);\n }\n var dataItem = this.getItemData();\n if (this.previousValue === dataItem.value) {\n return;\n }\n this.onChangeEvent(e);\n };\n DropDownList.prototype.resetSelection = function (properties) {\n if (this.list) {\n if ((!isNullOrUndefined(properties) &&\n (isNullOrUndefined(properties.dataSource) ||\n (!(properties.dataSource instanceof DataManager) && properties.dataSource.length === 0)))) {\n this.selectedLI = null;\n this.actionCompleteData.isUpdated = false;\n this.actionCompleteData.ulElement = null;\n this.actionCompleteData.list = null;\n this.resetList(properties.dataSource);\n }\n else {\n if (this.allowFiltering && this.getModuleName() !== 'autocomplete'\n && !isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list)) {\n this.onActionComplete(this.actionCompleteData.ulElement.cloneNode(true), this.actionCompleteData.list);\n }\n this.resetFocusElement();\n }\n }\n this.hiddenElement.innerHTML = '';\n this.inputElement.value = '';\n this.value = null;\n this.itemData = null;\n this.text = null;\n this.index = null;\n this.activeIndex = null;\n this.item = null;\n this.queryString = '';\n if (this.valueTempElement) {\n detach(this.valueTempElement);\n this.inputElement.style.display = 'block';\n this.valueTempElement = null;\n }\n this.setSelection(null, null);\n this.isSelectCustom = false;\n this.updateIconState();\n this.cloneElements();\n };\n DropDownList.prototype.setHTMLAttributes = function () {\n if (Object.keys(this.htmlAttributes).length) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var htmlAttr = _a[_i];\n if (htmlAttr === 'class') {\n var updatedClassValue = (this.htmlAttributes[htmlAttr].replace(/\\s+/g, ' ')).trim();\n if (updatedClassValue !== '') {\n addClass([this.inputWrapper.container], updatedClassValue.split(' '));\n }\n }\n else if (htmlAttr === 'disabled' && this.htmlAttributes[htmlAttr] === 'disabled') {\n this.enabled = false;\n this.setEnable();\n }\n else if (htmlAttr === 'readonly' && !isNullOrUndefined(this.htmlAttributes[htmlAttr])) {\n this.readonly = true;\n this.dataBind();\n }\n else if (htmlAttr === 'style') {\n this.inputWrapper.container.setAttribute('style', this.htmlAttributes[htmlAttr]);\n }\n else {\n var defaultAttr = ['title', 'id', 'placeholder',\n 'role', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];\n var validateAttr = ['name', 'required'];\n if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {\n defaultAttr.push('tabindex');\n }\n if (validateAttr.indexOf(htmlAttr) > -1 || htmlAttr.indexOf('data') === 0) {\n this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else if (defaultAttr.indexOf(htmlAttr) > -1) {\n if (htmlAttr === 'placeholder') {\n Input.setPlaceholder(this.htmlAttributes[htmlAttr], this.inputElement);\n }\n else {\n this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n }\n else {\n this.inputWrapper.container.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n }\n }\n }\n if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {\n this.inputWrapper.container.removeAttribute('tabindex');\n }\n };\n DropDownList.prototype.getAriaAttributes = function () {\n return {\n 'aria-disabled': 'false',\n 'role': 'combobox',\n 'aria-expanded': 'false',\n 'aria-live': 'polite',\n 'aria-labelledby': this.hiddenElement.id\n };\n };\n DropDownList.prototype.setEnableRtl = function () {\n Input.setEnableRtl(this.enableRtl, [this.inputElement.parentElement]);\n if (this.popupObj) {\n this.popupObj.enableRtl = this.enableRtl;\n this.popupObj.dataBind();\n }\n };\n DropDownList.prototype.setEnable = function () {\n Input.setEnabled(this.enabled, this.inputElement);\n if (this.enabled) {\n removeClass([this.inputWrapper.container], dropDownListClasses.disable);\n this.inputElement.setAttribute('aria-disabled', 'false');\n this.targetElement().setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.hidePopup();\n addClass([this.inputWrapper.container], dropDownListClasses.disable);\n this.inputElement.setAttribute('aria-disabled', 'true');\n this.targetElement().tabIndex = -1;\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} Returns the persisted data of the component.\n */\n DropDownList.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n DropDownList.prototype.getLocaleName = function () {\n return 'drop-down-list';\n };\n DropDownList.prototype.preventTabIndex = function (element) {\n if (this.getModuleName() === 'dropdownlist') {\n element.tabIndex = -1;\n }\n };\n DropDownList.prototype.targetElement = function () {\n return this.inputWrapper.container;\n };\n DropDownList.prototype.getNgDirective = function () {\n return 'EJS-DROPDOWNLIST';\n };\n DropDownList.prototype.getElementByText = function (text) {\n return this.getElementByValue(this.getValueByText(text));\n };\n DropDownList.prototype.getElementByValue = function (value) {\n var item;\n var listItems = this.getItems();\n for (var _i = 0, listItems_1 = listItems; _i < listItems_1.length; _i++) {\n var liItem = listItems_1[_i];\n if (this.getFormattedValue(liItem.getAttribute('data-value')) === value) {\n item = liItem;\n break;\n }\n }\n return item;\n };\n DropDownList.prototype.initValue = function () {\n this.renderList();\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n else {\n this.updateValues();\n }\n };\n DropDownList.prototype.updateValues = function () {\n if (!isNullOrUndefined(this.value)) {\n this.setSelection(this.getElementByValue(this.value), null);\n }\n else if (this.text && isNullOrUndefined(this.value)) {\n var element = this.getElementByText(this.text);\n if (isNullOrUndefined(element)) {\n this.setProperties({ text: null });\n return;\n }\n else {\n this.setSelection(element, null);\n }\n }\n else {\n this.setSelection(this.liCollections[this.activeIndex], null);\n }\n this.setHiddenValue();\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n DropDownList.prototype.onBlurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n var target = e.relatedTarget;\n var currentTarget = e.target;\n var isPreventBlur = this.isPreventBlur;\n this.isPreventBlur = false;\n //IE 11 - issue\n if (isPreventBlur && !this.isDocumentClick && this.isPopupOpen && (!isNullOrUndefined(currentTarget) ||\n !this.isFilterLayout() && isNullOrUndefined(target))) {\n if (this.getModuleName() === 'dropdownlist' && this.allowFiltering && this.isPopupOpen) {\n this.filterInput.focus();\n }\n else {\n this.targetElement().focus();\n }\n return;\n }\n if (this.isDocumentClick || (!isNullOrUndefined(this.popupObj)\n && document.body.contains(this.popupObj.element) &&\n this.popupObj.element.classList.contains(dropDownListClasses.mobileFilter))) {\n if (!this.beforePopupOpen) {\n this.isDocumentClick = false;\n }\n return;\n }\n if (((this.getModuleName() === 'dropdownlist' && !this.isFilterFocus && target !== this.inputElement)\n && (document.activeElement !== target || (document.activeElement === target &&\n currentTarget.classList.contains(dropDownListClasses.inputFocus)))) ||\n (isNullOrUndefined(target) && this.getModuleName() === 'dropdownlist' && this.allowFiltering &&\n currentTarget !== this.inputWrapper.container) || this.getModuleName() !== 'dropdownlist' &&\n !this.inputWrapper.container.contains(target) || this.isTabKey) {\n this.isDocumentClick = this.isPopupOpen ? true : false;\n this.focusOutAction(e);\n this.isTabKey = false;\n }\n if (this.isRequested && !this.isPopupOpen && !this.isPreventBlur) {\n this.isActive = false;\n this.beforePopupOpen = false;\n }\n };\n DropDownList.prototype.focusOutAction = function (e) {\n this.isInteracted = false;\n this.focusOut(e);\n this.onFocusOut();\n };\n DropDownList.prototype.onFocusOut = function () {\n if (!this.enabled) {\n return;\n }\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(null);\n }\n this.floatLabelChange();\n this.dispatchEvent(this.hiddenElement, 'change');\n if (this.getModuleName() === 'dropdownlist' && this.element.tagName !== 'INPUT') {\n this.dispatchEvent(this.inputElement, 'blur');\n }\n if (this.inputWrapper.clearButton) {\n addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n this.trigger('blur');\n };\n DropDownList.prototype.onFocus = function (e) {\n if (!this.isInteracted) {\n this.isInteracted = true;\n var args = { isInteracted: e ? true : false, event: e };\n this.trigger('focus', args);\n }\n this.updateIconState();\n };\n DropDownList.prototype.resetValueHandler = function (e) {\n var formElement = closest(this.inputElement, 'form');\n if (formElement && e.target === formElement) {\n var val = (this.element.tagName === this.getNgDirective()) ? null : this.inputElement.getAttribute('value');\n this.text = val;\n }\n };\n DropDownList.prototype.wireEvent = function () {\n EventHandler.add(this.inputWrapper.container, 'mousedown', this.dropDownClick, this);\n EventHandler.add(this.inputWrapper.container, 'focus', this.focusIn, this);\n EventHandler.add(this.inputWrapper.container, 'keypress', this.onSearch, this);\n this.bindCommonEvent();\n };\n DropDownList.prototype.bindCommonEvent = function () {\n EventHandler.add(this.targetElement(), 'blur', this.onBlurHandler, this);\n var formElement = closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.add(formElement, 'reset', this.resetValueHandler, this);\n }\n if (!Browser.isDevice) {\n this.keyboardModule = new KeyboardEvents(this.targetElement(), {\n keyAction: this.keyActionHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'\n });\n }\n else {\n this.keyboardModule = new KeyboardEvents(this.targetElement(), {\n keyAction: this.mobileKeyActionHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'\n });\n }\n this.bindClearEvent();\n };\n DropDownList.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);\n }\n };\n DropDownList.prototype.unBindCommonEvent = function () {\n if (this.targetElement()) {\n EventHandler.remove(this.targetElement(), 'blur', this.onBlurHandler);\n }\n var formElement = this.inputElement && closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.remove(formElement, 'reset', this.resetValueHandler);\n }\n if (!Browser.isDevice) {\n this.keyboardModule.destroy();\n }\n if (this.showClearButton) {\n EventHandler.remove(this.inputWrapper.clearButton, 'mousedown', this.resetHandler);\n }\n };\n DropDownList.prototype.updateIconState = function () {\n if (this.showClearButton) {\n if (this.inputElement.value !== '' && !this.readonly) {\n removeClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n else {\n addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n }\n };\n /**\n * Event binding for list\n *\n * @returns {void}\n */\n DropDownList.prototype.wireListEvents = function () {\n EventHandler.add(this.list, 'click', this.onMouseClick, this);\n EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);\n };\n DropDownList.prototype.onSearch = function (e) {\n if (e.charCode !== 32 && e.charCode !== 13) {\n if (this.list === undefined) {\n this.renderList();\n }\n this.searchKeyEvent = e;\n this.onServerIncrementalSearch(e);\n }\n };\n DropDownList.prototype.onServerIncrementalSearch = function (e) {\n if (!this.isRequested && !isNullOrUndefined(this.list) &&\n !isNullOrUndefined(this.list.querySelector('li')) && this.enabled && !this.readonly) {\n this.incrementalSearch(e);\n }\n };\n DropDownList.prototype.onMouseClick = function (e) {\n var target = e.target;\n var li = closest(target, '.' + dropDownBaseClasses.li);\n if (!this.isValidLI(li)) {\n return;\n }\n this.setSelection(li, e);\n if (Browser.isDevice && this.isFilterLayout()) {\n history.back();\n }\n else {\n var delay = 100;\n this.closePopup(delay, e);\n }\n };\n DropDownList.prototype.onMouseOver = function (e) {\n var currentLi = closest(e.target, '.' + dropDownBaseClasses.li);\n this.setHover(currentLi);\n };\n DropDownList.prototype.setHover = function (li) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {\n this.removeHover();\n addClass([li], dropDownBaseClasses.hover);\n }\n };\n DropDownList.prototype.onMouseLeave = function () {\n this.removeHover();\n };\n DropDownList.prototype.removeHover = function () {\n if (this.list) {\n var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.hover);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, dropDownBaseClasses.hover);\n }\n }\n };\n DropDownList.prototype.isValidLI = function (li) {\n return (li && li.hasAttribute('role') && li.getAttribute('role') === 'option');\n };\n DropDownList.prototype.incrementalSearch = function (e) {\n if (this.liCollections.length > 0) {\n var li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id);\n if (!isNullOrUndefined(li)) {\n this.setSelection(li, e);\n this.setScrollPosition();\n }\n }\n };\n /**\n * Hides the spinner loader.\n *\n * @returns {void}\n */\n DropDownList.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n removeClass([this.spinnerElement], dropDownListClasses.disableIcon);\n this.spinnerElement.innerHTML = '';\n this.spinnerElement = null;\n }\n };\n /**\n * Shows the spinner loader.\n *\n * @returns {void}\n */\n DropDownList.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n this.spinnerElement = Browser.isDevice && !isNullOrUndefined(this.filterInputObj) && this.filterInputObj.buttons[1] ||\n !isNullOrUndefined(this.filterInputObj) && this.filterInputObj.buttons[0] || this.inputWrapper.buttons[0];\n addClass([this.spinnerElement], dropDownListClasses.disableIcon);\n createSpinner({\n target: this.spinnerElement,\n width: Browser.isDevice ? '16px' : '14px'\n }, this.createElement);\n showSpinner(this.spinnerElement);\n }\n };\n DropDownList.prototype.keyActionHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n var preventAction = e.action === 'pageUp' || e.action === 'pageDown';\n var preventHomeEnd = this.getModuleName() !== 'dropdownlist' && (e.action === 'home' || e.action === 'end');\n this.isEscapeKey = e.action === 'escape';\n this.isTabKey = !this.isPopupOpen && e.action === 'tab';\n var isNavAction = e.action === 'down' || e.action === 'up' || e.action === 'home' || e.action === 'end';\n var isNavigation = (e.action === 'down' || e.action === 'up' || e.action === 'pageUp' || e.action === 'pageDown'\n || e.action === 'home' || e.action === 'end');\n if ((this.isEditTextBox() || preventAction || preventHomeEnd) && !this.isPopupOpen) {\n return;\n }\n if (!this.readonly) {\n var isTabAction = e.action === 'tab' || e.action === 'close';\n if (this.list === undefined && !this.isRequested && !isTabAction && e.action !== 'escape') {\n this.searchKeyEvent = e;\n this.renderList(e);\n }\n if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&\n isNavigation && this.liCollections.length === 0) || this.isRequested) {\n return;\n }\n if ((isTabAction && this.getModuleName() !== 'autocomplete') && this.isPopupOpen\n || e.action === 'escape') {\n e.preventDefault();\n }\n this.isSelected = e.action === 'escape' ? false : this.isSelected;\n this.isTyped = (isNavigation || e.action === 'escape') ? false : this.isTyped;\n switch (e.action) {\n case 'down':\n case 'up':\n this.updateUpDownAction(e);\n break;\n case 'pageUp':\n this.pageUpSelection(this.activeIndex - this.getPageCount(), e);\n e.preventDefault();\n break;\n case 'pageDown':\n this.pageDownSelection(this.activeIndex + this.getPageCount(), e);\n e.preventDefault();\n break;\n case 'home':\n this.updateHomeEndAction(e);\n break;\n case 'end':\n this.updateHomeEndAction(e);\n break;\n case 'space':\n if (this.getModuleName() === 'dropdownlist') {\n if (!this.beforePopupOpen) {\n this.showPopup();\n }\n }\n break;\n case 'open':\n this.showPopup(e);\n break;\n case 'hide':\n this.preventAltUp = this.isPopupOpen;\n this.hidePopup(e);\n this.focusDropDown(e);\n break;\n case 'enter':\n this.selectCurrentItem(e);\n break;\n case 'tab':\n this.selectCurrentValueOnTab(e);\n break;\n case 'escape':\n case 'close':\n if (this.isPopupOpen) {\n this.hidePopup(e);\n this.focusDropDown(e);\n }\n break;\n }\n }\n };\n DropDownList.prototype.updateUpDownAction = function (e) {\n var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);\n if (this.isSelectFocusItem(focusEle)) {\n this.setSelection(focusEle, e);\n }\n else if (!isNullOrUndefined(this.liCollections)) {\n var index = e.action === 'down' ? this.activeIndex + 1 : this.activeIndex - 1;\n var startIndex = 0;\n if (this.getModuleName() === 'autocomplete') {\n startIndex = e.action === 'down' && isNullOrUndefined(this.activeIndex) ? 0 : this.liCollections.length - 1;\n index = index < 0 ? this.liCollections.length - 1 : index === this.liCollections.length ? 0 : index;\n }\n var nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex] : this.liCollections[index];\n if (!isNullOrUndefined(nextItem)) {\n this.setSelection(nextItem, e);\n }\n }\n e.preventDefault();\n };\n DropDownList.prototype.updateHomeEndAction = function (e) {\n if (this.getModuleName() === 'dropdownlist') {\n var findLi = 0;\n if (e.action === 'home') {\n findLi = 0;\n }\n else {\n findLi = this.getItems().length - 1;\n }\n e.preventDefault();\n if (this.activeIndex === findLi) {\n return;\n }\n this.setSelection(this.liCollections[findLi], e);\n }\n };\n DropDownList.prototype.selectCurrentValueOnTab = function (e) {\n if (this.getModuleName() === 'autocomplete') {\n this.selectCurrentItem(e);\n }\n else {\n if (this.isPopupOpen) {\n this.hidePopup(e);\n this.focusDropDown(e);\n }\n }\n };\n DropDownList.prototype.mobileKeyActionHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n if ((this.isEditTextBox()) && !this.isPopupOpen) {\n return;\n }\n if (!this.readonly) {\n if (this.list === undefined && !this.isRequested) {\n this.searchKeyEvent = e;\n this.renderList();\n }\n if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&\n this.liCollections.length === 0) || this.isRequested) {\n return;\n }\n if (e.action === 'enter') {\n this.selectCurrentItem(e);\n }\n }\n };\n DropDownList.prototype.selectCurrentItem = function (e) {\n if (this.isPopupOpen) {\n var li = this.list.querySelector('.' + dropDownListClasses.focus);\n if (li) {\n this.setSelection(li, e);\n this.isTyped = false;\n }\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n this.hidePopup(e);\n this.focusDropDown(e);\n }\n else {\n this.showPopup();\n }\n };\n DropDownList.prototype.isSelectFocusItem = function (element) {\n return !isNullOrUndefined(element);\n };\n DropDownList.prototype.getPageCount = function () {\n var liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :\n getComputedStyle(this.getItems()[0], null).getPropertyValue('height');\n return Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));\n };\n DropDownList.prototype.pageUpSelection = function (steps, event) {\n var previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];\n this.setSelection(previousItem, event);\n };\n DropDownList.prototype.pageDownSelection = function (steps, event) {\n var list = this.getItems();\n var previousItem = steps <= list.length ? this.liCollections[steps - 1] : this.liCollections[list.length - 1];\n this.setSelection(previousItem, event);\n };\n DropDownList.prototype.unWireEvent = function () {\n EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);\n EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);\n EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);\n this.unBindCommonEvent();\n };\n /**\n * Event un binding for list items.\n *\n * @returns {void}\n */\n DropDownList.prototype.unWireListEvents = function () {\n EventHandler.remove(this.list, 'click', this.onMouseClick);\n EventHandler.remove(this.list, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);\n };\n DropDownList.prototype.checkSelector = function (id) {\n return '[id=\"' + id.replace(/(:|\\.|\\[|\\]|,|=|@|\\\\|\\/|#)/g, '\\\\$1') + '\"]';\n };\n DropDownList.prototype.onDocumentClick = function (e) {\n var target = e.target;\n if (!(!isNullOrUndefined(this.popupObj) && closest(target, this.checkSelector(this.popupObj.element.id))) &&\n !this.inputWrapper.container.contains(e.target)) {\n if (this.inputWrapper.container.classList.contains(dropDownListClasses.inputFocus) || this.isPopupOpen) {\n this.isDocumentClick = true;\n var isActive = this.isRequested;\n this.isInteracted = false;\n this.hidePopup(e);\n if (!isActive) {\n this.onFocusOut();\n this.inputWrapper.container.classList.remove(dropDownListClasses.inputFocus);\n }\n }\n }\n else if (target !== this.inputElement && !(this.allowFiltering && target === this.filterInput)\n && !(this.getModuleName() === 'combobox' &&\n !this.allowFiltering && Browser.isDevice && target === this.inputWrapper.buttons[0])) {\n this.isPreventBlur = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.targetElement() ||\n document.activeElement === this.filterInput);\n e.preventDefault();\n }\n };\n DropDownList.prototype.activeStateChange = function () {\n if (this.isDocumentClick) {\n this.hidePopup();\n this.onFocusOut();\n this.inputWrapper.container.classList.remove(dropDownListClasses.inputFocus);\n }\n };\n DropDownList.prototype.focusDropDown = function (e) {\n if (!this.initial && this.isFilterLayout()) {\n this.focusIn(e);\n }\n };\n DropDownList.prototype.dropDownClick = function (e) {\n if (e.which === 3 || e.button === 2) {\n return;\n }\n if (this.targetElement().classList.contains(dropDownListClasses.disable) || this.inputWrapper.clearButton === e.target) {\n return;\n }\n var target = e.target;\n if (target !== this.inputElement && !(this.allowFiltering && target === this.filterInput) && this.getModuleName() !== 'combobox') {\n e.preventDefault();\n }\n if (!this.readonly) {\n if (this.isPopupOpen) {\n this.hidePopup(e);\n if (this.isFilterLayout()) {\n this.focusDropDown(e);\n }\n }\n else {\n this.focusIn(e);\n this.floatLabelChange();\n this.queryString = this.inputElement.value.trim() === '' ? null : this.inputElement.value;\n this.isDropDownClick = true;\n this.showPopup(e);\n }\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy_1 = this;\n // eslint-disable-next-line max-len\n var duration = (this.element.tagName === this.getNgDirective() && this.itemTemplate) ? 500 : 100;\n if (!this.isSecondClick) {\n setTimeout(function () {\n proxy_1.cloneElements();\n proxy_1.isSecondClick = true;\n }, duration);\n }\n }\n else {\n this.focusIn(e);\n }\n };\n DropDownList.prototype.cloneElements = function () {\n if (this.list) {\n var ulElement = this.list.querySelector('ul');\n if (ulElement) {\n ulElement = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;\n this.actionCompleteData.ulElement = ulElement;\n }\n }\n };\n DropDownList.prototype.updateSelectedItem = function (li, e, preventSelect, isSelection) {\n var _this = this;\n this.removeSelection();\n li.classList.add(dropDownBaseClasses.selected);\n this.removeHover();\n var value = this.getFormattedValue(li.getAttribute('data-value'));\n var selectedData = this.getDataByValue(value);\n if (!this.initial && !preventSelect && !isNullOrUndefined(e)) {\n var items = this.detachChanges(selectedData);\n this.isSelected = true;\n var eventArgs = {\n e: e,\n item: li,\n itemData: items,\n isInteracted: e ? true : false,\n cancel: false\n };\n this.trigger('select', eventArgs, function (eventArgs) {\n if (eventArgs.cancel) {\n li.classList.remove(dropDownBaseClasses.selected);\n }\n else {\n _this.selectEventCallback(li, e, preventSelect, selectedData, value);\n if (isSelection) {\n _this.setSelectOptions(li, e);\n }\n }\n });\n }\n else {\n this.selectEventCallback(li, e, preventSelect, selectedData, value);\n if (isSelection) {\n this.setSelectOptions(li, e);\n }\n }\n };\n DropDownList.prototype.selectEventCallback = function (li, e, preventSelect, selectedData, value) {\n this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;\n this.item = li;\n this.itemData = selectedData;\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n if (focusedItem) {\n removeClass([focusedItem], dropDownBaseClasses.focus);\n }\n li.setAttribute('aria-selected', 'true');\n this.activeIndex = this.getIndexByValue(value);\n };\n DropDownList.prototype.activeItem = function (li) {\n if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.selected)) {\n this.removeSelection();\n li.classList.add(dropDownBaseClasses.selected);\n this.removeHover();\n li.setAttribute('aria-selected', 'true');\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownList.prototype.setValue = function (e) {\n var dataItem = this.getItemData();\n if (dataItem.value === null) {\n Input.setValue(null, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(dataItem.text, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n if (this.valueTemplate && this.itemData !== null) {\n this.setValueTemplate();\n }\n else if (!isNullOrUndefined(this.valueTempElement) && this.inputElement.previousSibling === this.valueTempElement) {\n detach(this.valueTempElement);\n this.inputElement.style.display = 'block';\n }\n var clearIcon = dropDownListClasses.clearIcon;\n var isFilterElement = this.isFiltering() && this.filterInput && (this.getModuleName() === 'combobox');\n var clearElement = isFilterElement && this.filterInput.parentElement.querySelector('.' + clearIcon);\n if (this.isFiltering() && clearElement) {\n clearElement.style.removeProperty('visibility');\n }\n if (this.previousValue === dataItem.value) {\n this.isSelected = false;\n return true;\n }\n else {\n this.isSelected = !this.initial ? true : false;\n this.isSelectCustom = false;\n if (this.getModuleName() === 'dropdownlist') {\n this.updateIconState();\n }\n return false;\n }\n };\n DropDownList.prototype.setSelection = function (li, e) {\n if (this.isValidLI(li) && (!li.classList.contains(dropDownBaseClasses.selected) || (this.isPopupOpen && this.isSelected\n && li.classList.contains(dropDownBaseClasses.selected)))) {\n this.updateSelectedItem(li, e, false, true);\n }\n else {\n this.setSelectOptions(li, e);\n }\n };\n DropDownList.prototype.setSelectOptions = function (li, e) {\n if (this.list) {\n this.removeHover();\n }\n this.previousSelectedLI = (!isNullOrUndefined(this.selectedLI)) ? this.selectedLI : null;\n this.selectedLI = li;\n if (this.setValue(e)) {\n return;\n }\n if ((!this.isPopupOpen && !isNullOrUndefined(li)) || (this.isPopupOpen && !isNullOrUndefined(e) &&\n (e.type !== 'keydown' || e.type === 'keydown' && e.action === 'enter'))) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n if (this.isPopupOpen && !isNullOrUndefined(this.selectedLI) && this.itemData !== null && (!e || e.type !== 'click')) {\n this.setScrollPosition(e);\n }\n if (Browser.info.name !== 'mozilla') {\n attributes(this.inputElement, { 'aria-label': this.inputElement.value });\n attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id != '' ? this.inputElement.id : this.element.id });\n this.targetElement().removeAttribute('aria-live');\n }\n };\n DropDownList.prototype.dropdownCompiler = function (dropdownTemplate) {\n var checkTemplate = false;\n if (dropdownTemplate) {\n try {\n checkTemplate = (document.querySelectorAll(dropdownTemplate).length) ? true : false;\n }\n catch (exception) {\n checkTemplate = false;\n }\n }\n return checkTemplate;\n };\n DropDownList.prototype.setValueTemplate = function () {\n var compiledString;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.clearTemplate(['valueTemplate']);\n if (this.valueTempElement) {\n detach(this.valueTempElement);\n this.inputElement.style.display = 'block';\n this.valueTempElement = null;\n }\n }\n if (!this.valueTempElement) {\n this.valueTempElement = this.createElement('span', { className: dropDownListClasses.value });\n this.inputElement.parentElement.insertBefore(this.valueTempElement, this.inputElement);\n this.inputElement.style.display = 'none';\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (!this.isReact) {\n this.valueTempElement.innerHTML = '';\n }\n var valuecheck = this.dropdownCompiler(this.valueTemplate);\n if (valuecheck) {\n compiledString = compile(document.querySelector(this.valueTemplate).innerHTML.trim());\n }\n else {\n compiledString = compile(this.valueTemplate);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var valueCompTemp = compiledString(this.itemData, this, 'valueTemplate', this.valueTemplateId, this.isStringTemplate, null, this.valueTempElement);\n if (valueCompTemp && valueCompTemp.length > 0) {\n for (var i = 0; i < valueCompTemp.length; i++) {\n this.valueTempElement.appendChild(valueCompTemp[i]);\n }\n }\n this.renderReactTemplates();\n };\n DropDownList.prototype.removeSelection = function () {\n if (this.list) {\n var selectedItems = this.list.querySelectorAll('.' + dropDownBaseClasses.selected);\n if (selectedItems.length) {\n removeClass(selectedItems, dropDownBaseClasses.selected);\n selectedItems[0].removeAttribute('aria-selected');\n }\n }\n };\n DropDownList.prototype.getItemData = function () {\n var fields = this.fields;\n var dataItem = null;\n dataItem = this.itemData;\n var dataValue;\n var dataText;\n if (!isNullOrUndefined(dataItem)) {\n dataValue = getValue(fields.value, dataItem);\n dataText = getValue(fields.text, dataItem);\n }\n var value = (!isNullOrUndefined(dataItem) &&\n !isUndefined(dataValue) ? dataValue : dataItem);\n var text = (!isNullOrUndefined(dataItem) &&\n !isUndefined(dataValue) ? dataText : dataItem);\n return { value: value, text: text };\n };\n /**\n * To trigger the change event for list.\n *\n * @param {MouseEvent | KeyboardEvent | TouchEvent} eve - Specifies the event arguments.\n * @returns {void}\n */\n DropDownList.prototype.onChangeEvent = function (eve) {\n var dataItem = this.getItemData();\n var index = this.isSelectCustom ? null : this.activeIndex;\n this.setProperties({ 'index': index, 'text': dataItem.text, 'value': dataItem.value }, true);\n this.detachChangeEvent(eve);\n };\n DropDownList.prototype.detachChanges = function (value) {\n var items;\n if (typeof value === 'string' ||\n typeof value === 'boolean' ||\n typeof value === 'number') {\n items = Object.defineProperties({}, {\n value: {\n value: value,\n enumerable: true\n },\n text: {\n value: value,\n enumerable: true\n }\n });\n }\n else {\n items = value;\n }\n return items;\n };\n DropDownList.prototype.detachChangeEvent = function (eve) {\n this.isSelected = false;\n this.previousValue = this.value;\n this.activeIndex = this.index;\n this.typedString = !isNullOrUndefined(this.text) ? this.text : '';\n if (!this.initial) {\n var items = this.detachChanges(this.itemData);\n var preItems = void 0;\n if (typeof this.previousItemData === 'string' ||\n typeof this.previousItemData === 'boolean' ||\n typeof this.previousItemData === 'number') {\n preItems = Object.defineProperties({}, {\n value: {\n value: this.previousItemData,\n enumerable: true\n },\n text: {\n value: this.previousItemData,\n enumerable: true\n }\n });\n }\n else {\n preItems = this.previousItemData;\n }\n this.setHiddenValue();\n var eventArgs = {\n e: eve,\n item: this.item,\n itemData: items,\n previousItem: this.previousSelectedLI,\n previousItemData: preItems,\n isInteracted: eve ? true : false,\n value: this.value,\n element: this.element,\n event: eve\n };\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', eventArgs);\n }\n }\n if ((isNullOrUndefined(this.value) || this.value === '') && this.floatLabelType !== 'Always') {\n removeClass([this.inputWrapper.container], 'e-valid-input');\n }\n };\n DropDownList.prototype.setHiddenValue = function () {\n if (!isNullOrUndefined(this.value)) {\n if (this.hiddenElement.querySelector('option')) {\n var selectedElement = this.hiddenElement.querySelector('option');\n selectedElement.textContent = this.text;\n selectedElement.setAttribute('value', this.value.toString());\n }\n else {\n this.hiddenElement.innerHTML = '
';\n var selectedElement = this.hiddenElement.querySelector('option');\n selectedElement.setAttribute('value', this.value.toString());\n }\n }\n else {\n this.hiddenElement.innerHTML = '';\n }\n };\n /**\n * Filter bar implementation\n *\n * @param {KeyboardEventArgs} e - Specifies the event arguments.\n * @returns {void}\n */\n DropDownList.prototype.onFilterUp = function (e) {\n if (!(e.ctrlKey && e.keyCode === 86) && (this.isValidKey || e.keyCode === 40 || e.keyCode === 38)) {\n this.isValidKey = false;\n switch (e.keyCode) {\n case 38: //up arrow\n case 40: //down arrow\n if (this.getModuleName() === 'autocomplete' && !this.isPopupOpen && !this.preventAltUp && !this.isRequested) {\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n else {\n this.preventAutoFill = false;\n }\n this.preventAltUp = false;\n e.preventDefault();\n break;\n case 46: //delete\n case 8: //backspace\n this.typedString = this.filterInput.value;\n if (!this.isPopupOpen && this.typedString !== '' || this.isPopupOpen && this.queryString.length > 0) {\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n else if (this.typedString === '' && this.queryString === '' && this.getModuleName() !== 'autocomplete') {\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n else if (this.typedString === '') {\n if (this.list) {\n this.resetFocusElement();\n }\n this.activeIndex = null;\n if (this.getModuleName() !== 'dropdownlist') {\n this.preventAutoFill = true;\n this.searchLists(e);\n if (this.getModuleName() === 'autocomplete') {\n this.hidePopup();\n }\n }\n }\n e.preventDefault();\n break;\n default:\n this.typedString = this.filterInput.value;\n this.preventAutoFill = false;\n this.searchLists(e);\n break;\n }\n }\n else {\n this.isValidKey = false;\n }\n };\n DropDownList.prototype.onFilterDown = function (e) {\n switch (e.keyCode) {\n case 13: //enter\n break;\n case 40: //down arrow\n case 38: //up arrow\n this.queryString = this.filterInput.value;\n e.preventDefault();\n break;\n case 9: //tab\n if (this.isPopupOpen && this.getModuleName() !== 'autocomplete') {\n e.preventDefault();\n }\n break;\n default:\n this.prevSelectPoints = this.getSelectionPoints();\n this.queryString = this.filterInput.value;\n break;\n }\n };\n DropDownList.prototype.removeFillSelection = function () {\n if (this.isInteracted) {\n var selection = this.getSelectionPoints();\n this.inputElement.setSelectionRange(selection.end, selection.end);\n }\n };\n DropDownList.prototype.getQuery = function (query) {\n var filterQuery;\n if (!this.isCustomFilter && this.allowFiltering && this.filterInput) {\n filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();\n var filterType = this.typedString === '' ? 'contains' : this.filterType;\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', filterType, this.typedString, this.ignoreCase, this.ignoreAccent);\n }\n else {\n var fields = (this.fields.text) ? this.fields.text : '';\n filterQuery.where(fields, filterType, this.typedString, this.ignoreCase, this.ignoreAccent);\n }\n }\n else {\n filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();\n }\n return filterQuery;\n };\n DropDownList.prototype.getSelectionPoints = function () {\n var input = this.inputElement;\n return { start: Math.abs(input.selectionStart), end: Math.abs(input.selectionEnd) };\n };\n DropDownList.prototype.searchLists = function (e) {\n var _this = this;\n this.isTyped = true;\n this.activeIndex = null;\n this.isListSearched = true;\n if (this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon)) {\n var clearElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n clearElement.style.visibility = this.filterInput.value === '' ? 'hidden' : 'visible';\n }\n this.isDataFetched = false;\n if (this.isFiltering()) {\n var eventArgs_1 = {\n preventDefaultAction: false,\n text: this.filterInput.value,\n updateData: function (dataSource, query, fields) {\n if (eventArgs_1.cancel) {\n return;\n }\n _this.isCustomFilter = true;\n _this.filteringAction(dataSource, query, fields);\n },\n baseEventArgs: e,\n cancel: false\n };\n this.trigger('filtering', eventArgs_1, function (eventArgs) {\n if (!eventArgs.cancel && !_this.isCustomFilter && !eventArgs.preventDefaultAction) {\n _this.filteringAction(_this.dataSource, null, _this.fields);\n }\n });\n }\n };\n /**\n * 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 DropDownList.prototype.filter = function (dataSource, query, fields) {\n this.isCustomFilter = true;\n this.filteringAction(dataSource, query, fields);\n };\n DropDownList.prototype.filteringAction = function (dataSource, query, fields) {\n if (!isNullOrUndefined(this.filterInput)) {\n this.beforePopupOpen = (!this.isPopupOpen && this.getModuleName() === 'combobox' && this.filterInput.value === '') ?\n false : true;\n if (this.filterInput.value.trim() === '' && !this.itemTemplate) {\n this.actionCompleteData.isUpdated = false;\n this.isTyped = false;\n if (!isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list)) {\n this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list);\n }\n this.isTyped = true;\n if (!isNullOrUndefined(this.itemData) && this.getModuleName() === 'dropdownlist') {\n this.focusIndexItem();\n this.setScrollPosition();\n }\n this.isNotSearchList = true;\n }\n else {\n this.isNotSearchList = false;\n query = (this.filterInput.value.trim() === '') ? null : query;\n this.resetList(dataSource, fields, query);\n }\n this.renderReactTemplates();\n }\n };\n DropDownList.prototype.setSearchBox = function (popupElement) {\n if (this.isFiltering()) {\n var parentElement = popupElement.querySelector('.' + dropDownListClasses.filterParent) ?\n popupElement.querySelector('.' + dropDownListClasses.filterParent) : this.createElement('span', {\n className: dropDownListClasses.filterParent\n });\n this.filterInput = this.createElement('input', {\n attrs: { type: 'text' },\n className: dropDownListClasses.filterInput\n });\n this.element.parentNode.insertBefore(this.filterInput, this.element);\n var backIcon = false;\n if (Browser.isDevice) {\n backIcon = true;\n }\n this.filterInputObj = Input.createInput({\n element: this.filterInput,\n buttons: backIcon ?\n [dropDownListClasses.backIcon, dropDownListClasses.filterBarClearIcon] : [dropDownListClasses.filterBarClearIcon],\n properties: { placeholder: this.filterBarPlaceholder }\n }, this.createElement);\n if (!isNullOrUndefined(this.cssClass)) {\n if (this.cssClass.split(' ').indexOf('e-outline') !== -1) {\n addClass([this.filterInputObj.container], 'e-outline');\n }\n else if (this.cssClass.split(' ').indexOf('e-filled') !== -1) {\n addClass([this.filterInputObj.container], 'e-filled');\n }\n }\n append([this.filterInputObj.container], parentElement);\n prepend([parentElement], popupElement);\n attributes(this.filterInput, {\n 'aria-disabled': 'false',\n 'role': 'combobox',\n 'autocomplete': 'off',\n 'autocapitalize': 'off',\n 'spellcheck': 'false'\n });\n this.clearIconElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n if (!Browser.isDevice && this.clearIconElement) {\n EventHandler.add(this.clearIconElement, 'click', this.clearText, this);\n this.clearIconElement.style.visibility = 'hidden';\n }\n if (!Browser.isDevice) {\n this.searchKeyModule = new KeyboardEvents(this.filterInput, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigure,\n eventName: 'keydown'\n });\n }\n else {\n this.searchKeyModule = new KeyboardEvents(this.filterInput, {\n keyAction: this.mobileKeyActionHandler.bind(this),\n keyConfigs: this.keyConfigure,\n eventName: 'keydown'\n });\n }\n EventHandler.add(this.filterInput, 'input', this.onInput, this);\n EventHandler.add(this.filterInput, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.filterInput, 'keydown', this.onFilterDown, this);\n EventHandler.add(this.filterInput, 'blur', this.onBlurHandler, this);\n EventHandler.add(this.filterInput, 'paste', this.pasteHandler, this);\n return this.filterInputObj;\n }\n else {\n return inputObject;\n }\n };\n DropDownList.prototype.onInput = function (e) {\n this.isValidKey = true;\n // For filtering works in mobile firefox.\n if (Browser.isDevice && Browser.info.name === 'mozilla') {\n this.typedString = this.filterInput.value;\n this.preventAutoFill = true;\n this.searchLists(e);\n }\n };\n DropDownList.prototype.pasteHandler = function (e) {\n var _this = this;\n setTimeout(function () {\n _this.typedString = _this.filterInput.value;\n _this.searchLists(e);\n });\n };\n DropDownList.prototype.onActionFailure = function (e) {\n _super.prototype.onActionFailure.call(this, e);\n if (this.beforePopupOpen) {\n this.renderPopup();\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownList.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n var _this = this;\n if (this.isNotSearchList) {\n this.isNotSearchList = false;\n return;\n }\n if (this.isActive) {\n var selectedItem = this.selectedLI ? this.selectedLI.cloneNode(true) : null;\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n this.updateSelectElementData(this.allowFiltering);\n if (this.isRequested && !isNullOrUndefined(this.searchKeyEvent) && this.searchKeyEvent.type === 'keydown') {\n this.isRequested = false;\n this.keyActionHandler(this.searchKeyEvent);\n this.searchKeyEvent = null;\n }\n if (this.isRequested && !isNullOrUndefined(this.searchKeyEvent)) {\n this.incrementalSearch(this.searchKeyEvent);\n this.searchKeyEvent = null;\n }\n this.list.scrollTop = 0;\n if (!isNullOrUndefined(ulElement)) {\n attributes(ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });\n }\n if (this.initRemoteRender) {\n this.initial = true;\n this.activeIndex = this.index;\n this.initRemoteRender = false;\n if (this.value && this.dataSource instanceof DataManager) {\n var checkField_1 = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;\n var fieldValue_1 = this.fields.value.split('.');\n var checkVal = list.some(function (x) { return isNullOrUndefined(x[checkField_1]) && fieldValue_1.length > 1 ? _this.checkFieldValue(x, fieldValue_1) === _this.value : x[checkField_1] === _this.value; });\n if (!checkVal) {\n this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField_1, 'equal', this.value)))\n .then(function (e) {\n if (e.result.length > 0) {\n _this.addItem(e.result, list.length);\n _this.updateValues();\n }\n else {\n _this.updateValues();\n }\n });\n }\n else {\n this.updateValues();\n }\n }\n else {\n this.updateValues();\n }\n this.initial = false;\n }\n else if (this.getModuleName() === 'autocomplete' && this.value) {\n this.setInputValue();\n }\n if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {\n if (!this.actionCompleteData.isUpdated || ((!this.isCustomFilter\n && !this.isFilterFocus) || (isNullOrUndefined(this.itemData) && this.allowFiltering)\n && ((this.dataSource instanceof DataManager)\n || (!isNullOrUndefined(this.dataSource) && !isNullOrUndefined(this.dataSource.length) &&\n this.dataSource.length !== 0)))) {\n if (this.itemTemplate && (this.element.tagName === 'EJS-COMBOBOX' || this.element.tagName === 'EJS-DROPDOWNLIST') && this.allowFiltering) {\n setTimeout(function () {\n _this.updateActionCompleteDataValues(ulElement, list);\n }, 0);\n }\n else {\n this.updateActionCompleteDataValues(ulElement, list);\n }\n }\n this.addNewItem(list, selectedItem);\n if (!isNullOrUndefined(this.itemData)) {\n this.focusIndexItem();\n }\n }\n if (this.beforePopupOpen) {\n this.renderPopup(e);\n }\n }\n };\n DropDownList.prototype.checkFieldValue = function (list, fieldValue) {\n var checkField = list;\n fieldValue.forEach(function (value) {\n checkField = checkField[value];\n });\n return checkField;\n };\n DropDownList.prototype.updateActionCompleteDataValues = function (ulElement, list) {\n this.actionCompleteData = { ulElement: ulElement.cloneNode(true), list: list, isUpdated: true };\n if (this.actionData.list !== this.actionCompleteData.list && this.actionCompleteData.ulElement && this.actionCompleteData.list) {\n this.actionData = this.actionCompleteData;\n }\n };\n DropDownList.prototype.addNewItem = function (listData, newElement) {\n var _this = this;\n if (!isNullOrUndefined(this.itemData) && !isNullOrUndefined(newElement)) {\n var value_1 = this.getItemData().value;\n var isExist = listData.some(function (data) {\n return (((typeof data === 'string' || typeof data === 'number') && data === value_1) ||\n (getValue(_this.fields.value, data) === value_1));\n });\n if (!isExist) {\n this.addItem(this.itemData);\n }\n }\n };\n DropDownList.prototype.updateActionCompleteData = function (li, item, index) {\n var _this = this;\n if (this.getModuleName() !== 'autocomplete' && this.actionCompleteData.ulElement) {\n if (this.itemTemplate && this.element.tagName === 'EJS-COMBOBOX' && this.allowFiltering) {\n setTimeout(function () {\n _this.actionCompleteDataUpdate(li, item, index);\n }, 0);\n }\n else {\n this.actionCompleteDataUpdate(li, item, index);\n }\n }\n };\n DropDownList.prototype.actionCompleteDataUpdate = function (li, item, index) {\n if (index != null) {\n this.actionCompleteData.ulElement.insertBefore(li.cloneNode(true), this.actionCompleteData.ulElement.childNodes[index]);\n }\n else {\n this.actionCompleteData.ulElement.appendChild(li.cloneNode(true));\n }\n if (this.isFiltering() && this.actionCompleteData.list.indexOf(item) < 0) {\n this.actionCompleteData.list.push(item);\n }\n };\n DropDownList.prototype.focusIndexItem = function () {\n var value = this.getItemData().value;\n this.activeIndex = this.getIndexByValue(value);\n var element = this.findListElement(this.list, 'li', 'data-value', value);\n this.selectedLI = element;\n this.activeItem(element);\n this.removeFocus();\n };\n DropDownList.prototype.updateSelection = function () {\n var selectedItem = this.list.querySelector('.' + dropDownBaseClasses.selected);\n if (selectedItem) {\n this.setProperties({ 'index': this.getIndexByValue(selectedItem.getAttribute('data-value')) });\n this.activeIndex = this.index;\n }\n else {\n this.removeFocus();\n this.list.querySelector('.' + dropDownBaseClasses.li).classList.add(dropDownListClasses.focus);\n }\n };\n DropDownList.prototype.removeFocus = function () {\n var highlightedItem = this.list.querySelectorAll('.' + dropDownListClasses.focus);\n if (highlightedItem && highlightedItem.length) {\n removeClass(highlightedItem, dropDownListClasses.focus);\n }\n };\n DropDownList.prototype.renderPopup = function (e) {\n var _this = this;\n if (this.popupObj && document.body.contains(this.popupObj.element)) {\n this.refreshPopup();\n return;\n }\n var args = { cancel: false };\n this.trigger('beforeOpen', args, function (args) {\n if (!args.cancel) {\n var popupEle = _this.createElement('div', {\n id: _this.element.id + '_popup', className: 'e-ddl e-popup ' + (_this.cssClass != null ? _this.cssClass : '')\n });\n var searchBox = _this.setSearchBox(popupEle);\n _this.listHeight = formatUnit(_this.popupHeight);\n if (_this.headerTemplate) {\n _this.setHeaderTemplate(popupEle);\n }\n append([_this.list], popupEle);\n if (_this.footerTemplate) {\n _this.setFooterTemplate(popupEle);\n }\n document.body.appendChild(popupEle);\n popupEle.style.visibility = 'hidden';\n if (_this.popupHeight !== 'auto') {\n _this.searchBoxHeight = 0;\n if (!isNullOrUndefined(searchBox.container)) {\n _this.searchBoxHeight = (searchBox.container.parentElement).getBoundingClientRect().height;\n _this.listHeight = (parseInt(_this.listHeight, 10) - (_this.searchBoxHeight)).toString() + 'px';\n }\n if (_this.headerTemplate) {\n _this.header = _this.header ? _this.header : popupEle.querySelector('.e-ddl-header');\n var height = Math.round(_this.header.getBoundingClientRect().height);\n _this.listHeight = (parseInt(_this.listHeight, 10) - (height + _this.searchBoxHeight)).toString() + 'px';\n }\n if (_this.footerTemplate) {\n _this.footer = _this.footer ? _this.footer : popupEle.querySelector('.e-ddl-footer');\n var height = Math.round(_this.footer.getBoundingClientRect().height);\n _this.listHeight = (parseInt(_this.listHeight, 10) - (height + _this.searchBoxHeight)).toString() + 'px';\n }\n _this.list.style.maxHeight = (parseInt(_this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property\n popupEle.style.maxHeight = formatUnit(_this.popupHeight);\n }\n else {\n popupEle.style.height = 'auto';\n }\n var offsetValue = 0;\n var left = void 0;\n if (!isNullOrUndefined(_this.selectedLI) && (!isNullOrUndefined(_this.activeIndex) && _this.activeIndex >= 0)) {\n _this.setScrollPosition();\n }\n else {\n _this.list.scrollTop = 0;\n }\n if (Browser.isDevice && (!_this.allowFiltering && (_this.getModuleName() === 'dropdownlist' ||\n (_this.isDropDownClick && _this.getModuleName() === 'combobox')))) {\n offsetValue = _this.getOffsetValue(popupEle);\n var firstItem = _this.isEmptyList() ? _this.list : _this.liCollections[0];\n left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -\n parseInt(getComputedStyle(_this.inputElement).paddingLeft, 10) +\n parseInt(getComputedStyle(_this.inputElement.parentElement).borderLeftWidth, 10));\n }\n _this.getFocusElement();\n _this.createPopup(popupEle, offsetValue, left);\n _this.checkCollision(popupEle);\n if (Browser.isDevice) {\n _this.popupObj.element.classList.add(dropDownListClasses.device);\n if (_this.getModuleName() === 'dropdownlist' || (_this.getModuleName() === 'combobox'\n && !_this.allowFiltering && _this.isDropDownClick)) {\n _this.popupObj.collision = { X: 'fit', Y: 'fit' };\n }\n if (_this.isFilterLayout()) {\n _this.popupObj.element.classList.add(dropDownListClasses.mobileFilter);\n _this.popupObj.position = { X: 0, Y: 0 };\n _this.popupObj.dataBind();\n attributes(_this.popupObj.element, { style: 'left:0px;right:0px;top:0px;bottom:0px;' });\n addClass([document.body, _this.popupObj.element], dropDownListClasses.popupFullScreen);\n _this.setSearchBoxPosition();\n _this.backIconElement = searchBox.container.querySelector('.e-back-icon');\n _this.clearIconElement = searchBox.container.querySelector('.' + dropDownListClasses.clearIcon);\n EventHandler.add(_this.backIconElement, 'click', _this.clickOnBackIcon, _this);\n EventHandler.add(_this.clearIconElement, 'click', _this.clearText, _this);\n }\n }\n popupEle.style.visibility = 'visible';\n addClass([popupEle], 'e-popup-close');\n var scrollParentElements = _this.popupObj.getScrollableParent(_this.inputWrapper.container);\n for (var _i = 0, scrollParentElements_1 = scrollParentElements; _i < scrollParentElements_1.length; _i++) {\n var element = scrollParentElements_1[_i];\n EventHandler.add(element, 'scroll', _this.scrollHandler, _this);\n }\n if (Browser.isDevice && _this.isFilterLayout()) {\n EventHandler.add(_this.list, 'scroll', _this.listScroll, _this);\n }\n if (!isNullOrUndefined(_this.list)) {\n _this.unWireListEvents();\n _this.wireListEvents();\n }\n _this.selectedElementID = _this.selectedLI ? _this.selectedLI.id : null;\n attributes(_this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': _this.inputElement.id + '_options', 'aria-activedescendant': _this.selectedElementID });\n _this.inputElement.setAttribute('aria-expanded', 'true');\n if (_this.selectedElementID == null) {\n _this.targetElement().removeAttribute('aria-activedescendant');\n }\n var inputParent = _this.isFiltering() ? _this.filterInput.parentElement : _this.inputWrapper.container;\n addClass([inputParent], [dropDownListClasses.inputFocus]);\n var animModel = { name: 'FadeIn', duration: 100 };\n _this.beforePopupOpen = true;\n var popupInstance = _this.popupObj;\n var eventArgs = { popup: popupInstance, event: e, cancel: false, animation: animModel };\n _this.trigger('open', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n addClass([_this.inputWrapper.container], [dropDownListClasses.iconAnimation]);\n _this.renderReactTemplates();\n _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.element : null);\n }\n else {\n _this.beforePopupOpen = false;\n _this.destroyPopup();\n }\n });\n }\n else {\n _this.beforePopupOpen = false;\n }\n });\n };\n DropDownList.prototype.checkCollision = function (popupEle) {\n if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'dropdownlist' || this.isDropDownClick))) {\n var collision = isCollide(popupEle);\n if (collision.length > 0) {\n popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';\n }\n this.popupObj.resolveCollision();\n }\n };\n DropDownList.prototype.getOffsetValue = function (popupEle) {\n var popupStyles = getComputedStyle(popupEle);\n var borderTop = parseInt(popupStyles.borderTopWidth, 10);\n var borderBottom = parseInt(popupStyles.borderBottomWidth, 10);\n return this.setPopupPosition(borderTop + borderBottom);\n };\n DropDownList.prototype.createPopup = function (element, offsetValue, left) {\n var _this = this;\n this.popupObj = new Popup(element, {\n width: this.setWidth(), targetType: 'relative',\n relateTo: this.inputWrapper.container, collision: { X: 'flip', Y: 'flip' }, offsetY: offsetValue,\n enableRtl: this.enableRtl, offsetX: left, position: { X: 'left', Y: 'bottom' },\n zIndex: this.zIndex,\n close: function () {\n if (!_this.isDocumentClick) {\n _this.focusDropDown();\n }\n // eslint-disable-next-line\n if (_this.isReact) {\n _this.clearTemplate(['headerTemplate', 'footerTemplate']);\n }\n var isResetItem = (_this.getModuleName() === 'autocomplete') ? true : false;\n _this.isNotSearchList = false;\n _this.isDocumentClick = false;\n _this.destroyPopup();\n if (_this.isFiltering() && _this.actionCompleteData.list && _this.actionCompleteData.list[0]) {\n _this.isActive = true;\n _this.onActionComplete(_this.actionCompleteData.ulElement, _this.actionCompleteData.list, null, true);\n }\n },\n open: function () {\n EventHandler.add(document, 'mousedown', _this.onDocumentClick, _this);\n _this.isPopupOpen = true;\n var actionList = _this.actionCompleteData && _this.actionCompleteData.ulElement &&\n _this.actionCompleteData.ulElement.querySelector('li');\n var ulElement = _this.list.querySelector('ul li');\n if (_this.isFiltering() && _this.itemTemplate && (_this.element.tagName === _this.getNgDirective()) &&\n (actionList && ulElement && actionList.textContent !== ulElement.textContent) &&\n _this.element.tagName !== 'EJS-COMBOBOX') {\n _this.cloneElements();\n }\n if (_this.isFilterLayout()) {\n removeClass([_this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n _this.isFilterFocus = true;\n _this.filterInput.focus();\n if (_this.inputWrapper.clearButton) {\n addClass([_this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n }\n _this.activeStateChange();\n },\n targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hidePopup();\n }\n }\n });\n };\n DropDownList.prototype.isEmptyList = function () {\n return !isNullOrUndefined(this.liCollections) && this.liCollections.length === 0;\n };\n DropDownList.prototype.getFocusElement = function () {\n // combo-box used this method\n };\n DropDownList.prototype.isFilterLayout = function () {\n return this.getModuleName() === 'dropdownlist' && this.allowFiltering;\n };\n DropDownList.prototype.scrollHandler = function () {\n if (Browser.isDevice && ((this.getModuleName() === 'dropdownlist' &&\n !this.isFilterLayout()) || (this.getModuleName() === 'combobox' && !this.allowFiltering && this.isDropDownClick))) {\n this.hidePopup();\n }\n };\n DropDownList.prototype.setSearchBoxPosition = function () {\n var searchBoxHeight = this.filterInput.parentElement.getBoundingClientRect().height;\n this.popupObj.element.style.maxHeight = '100%';\n this.popupObj.element.style.width = '100%';\n this.list.style.maxHeight = (window.innerHeight - searchBoxHeight) + 'px';\n this.list.style.height = (window.innerHeight - searchBoxHeight) + 'px';\n var clearElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n detach(this.filterInput);\n clearElement.parentElement.insertBefore(this.filterInput, clearElement);\n };\n DropDownList.prototype.setPopupPosition = function (border) {\n var offsetValue;\n var popupOffset = border;\n var selectedLI = this.list.querySelector('.' + dropDownListClasses.focus) || this.selectedLI;\n var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];\n var lastItem = this.isEmptyList() ? this.list : this.liCollections[this.getItems().length - 1];\n var liHeight = firstItem.getBoundingClientRect().height;\n var listHeight = this.list.offsetHeight / 2;\n var height = isNullOrUndefined(selectedLI) ? firstItem.offsetTop : selectedLI.offsetTop;\n var lastItemOffsetValue = lastItem.offsetTop;\n if (lastItemOffsetValue - listHeight < height && !isNullOrUndefined(this.liCollections) &&\n this.liCollections.length > 0 && !isNullOrUndefined(selectedLI)) {\n var count = this.list.offsetHeight / liHeight;\n var paddingBottom = parseInt(getComputedStyle(this.list).paddingBottom, 10);\n offsetValue = (count - (this.liCollections.length - this.activeIndex)) * liHeight - popupOffset + paddingBottom;\n this.list.scrollTop = selectedLI.offsetTop;\n }\n else if (height > listHeight) {\n offsetValue = listHeight - liHeight / 2;\n this.list.scrollTop = height - listHeight + liHeight / 2;\n }\n else {\n offsetValue = height;\n }\n var inputHeight = this.inputWrapper.container.offsetHeight;\n offsetValue = offsetValue + liHeight + popupOffset - ((liHeight - inputHeight) / 2);\n return -offsetValue;\n };\n DropDownList.prototype.setWidth = function () {\n var width = formatUnit(this.popupWidth);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.inputWrapper.container.offsetWidth * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n if (Browser.isDevice && (!this.allowFiltering && (this.getModuleName() === 'dropdownlist' ||\n (this.isDropDownClick && this.getModuleName() === 'combobox')))) {\n var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];\n width = (parseInt(width, 10) + (parseInt(getComputedStyle(firstItem).textIndent, 10) -\n parseInt(getComputedStyle(this.inputElement).paddingLeft, 10) +\n parseInt(getComputedStyle(this.inputElement.parentElement).borderLeftWidth, 10)) * 2) + 'px';\n }\n return width;\n };\n DropDownList.prototype.scrollBottom = function (isInitial) {\n if (!isNullOrUndefined(this.selectedLI)) {\n var currentOffset = this.list.offsetHeight;\n var nextBottom = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;\n var nextOffset = this.list.scrollTop + nextBottom - currentOffset;\n nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 : nextOffset;\n var boxRange = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;\n boxRange = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n boxRange - this.fixedHeaderElement.offsetHeight : boxRange;\n if (this.activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextBottom > currentOffset || !(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = nextOffset;\n }\n }\n };\n DropDownList.prototype.scrollTop = function () {\n if (!isNullOrUndefined(this.selectedLI)) {\n var nextOffset = this.selectedLI.offsetTop - this.list.scrollTop;\n nextOffset = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n nextOffset - this.fixedHeaderElement.offsetHeight : nextOffset;\n var boxRange = (this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop);\n if (this.activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextOffset < 0) {\n this.list.scrollTop = this.list.scrollTop + nextOffset;\n }\n else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = this.selectedLI.offsetTop - (this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n this.fixedHeaderElement.offsetHeight : 0);\n }\n }\n };\n DropDownList.prototype.isEditTextBox = function () {\n return false;\n };\n DropDownList.prototype.isFiltering = function () {\n return this.allowFiltering;\n };\n DropDownList.prototype.isPopupButton = function () {\n return true;\n };\n DropDownList.prototype.setScrollPosition = function (e) {\n if (!isNullOrUndefined(e)) {\n switch (e.action) {\n case 'pageDown':\n case 'down':\n case 'end':\n this.scrollBottom();\n break;\n default:\n this.scrollTop();\n break;\n }\n }\n else {\n this.scrollBottom(true);\n }\n };\n DropDownList.prototype.clearText = function () {\n this.filterInput.value = this.typedString = '';\n this.searchLists(null);\n };\n DropDownList.prototype.listScroll = function () {\n this.filterInput.blur();\n };\n DropDownList.prototype.setEleWidth = function (width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.inputWrapper.container.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.inputWrapper.container.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n };\n DropDownList.prototype.closePopup = function (delay, e) {\n var _this = this;\n this.isTyped = false;\n if (!(this.popupObj && document.body.contains(this.popupObj.element) && this.beforePopupOpen)) {\n return;\n }\n EventHandler.remove(document, 'mousedown', this.onDocumentClick);\n this.isActive = false;\n this.filterInputObj = null;\n this.isDropDownClick = false;\n this.preventAutoFill = false;\n var scrollableParentElements = this.popupObj.getScrollableParent(this.inputWrapper.container);\n for (var _i = 0, scrollableParentElements_1 = scrollableParentElements; _i < scrollableParentElements_1.length; _i++) {\n var element = scrollableParentElements_1[_i];\n EventHandler.remove(element, 'scroll', this.scrollHandler);\n }\n if (Browser.isDevice && this.isFilterLayout()) {\n removeClass([document.body, this.popupObj.element], dropDownListClasses.popupFullScreen);\n EventHandler.remove(this.list, 'scroll', this.listScroll);\n }\n if (this.isFilterLayout()) {\n if (!Browser.isDevice) {\n this.searchKeyModule.destroy();\n if (this.clearIconElement) {\n EventHandler.remove(this.clearIconElement, 'click', this.clearText);\n }\n }\n if (this.backIconElement) {\n EventHandler.remove(this.backIconElement, 'click', this.clickOnBackIcon);\n EventHandler.remove(this.clearIconElement, 'click', this.clearText);\n }\n EventHandler.remove(this.filterInput, 'input', this.onInput);\n EventHandler.remove(this.filterInput, 'keyup', this.onFilterUp);\n EventHandler.remove(this.filterInput, 'keydown', this.onFilterDown);\n EventHandler.remove(this.filterInput, 'blur', this.onBlurHandler);\n EventHandler.remove(this.filterInput, 'paste', this.pasteHandler);\n this.filterInput = null;\n }\n attributes(this.targetElement(), { 'aria-expanded': 'false' });\n this.inputElement.setAttribute('aria-expanded', 'false');\n this.targetElement().removeAttribute('aria-owns');\n this.targetElement().removeAttribute('aria-activedescendant');\n this.inputWrapper.container.classList.remove(dropDownListClasses.iconAnimation);\n if (this.isFiltering()) {\n this.actionCompleteData.isUpdated = false;\n }\n this.beforePopupOpen = false;\n var animModel = {\n name: 'FadeOut',\n duration: 100,\n delay: delay ? delay : 0\n };\n var popupInstance = this.popupObj;\n var eventArgs = { popup: popupInstance, cancel: false, animation: animModel, event: e || null };\n this.trigger('close', eventArgs, function (eventArgs) {\n if (!isNullOrUndefined(_this.popupObj) &&\n !isNullOrUndefined(_this.popupObj.element.querySelector('.e-fixed-head'))) {\n var fixedHeader = _this.popupObj.element.querySelector('.e-fixed-head');\n fixedHeader.parentNode.removeChild(fixedHeader);\n _this.fixedHeaderElement = null;\n }\n if (!eventArgs.cancel) {\n if (_this.getModuleName() === 'autocomplete') {\n _this.rippleFun();\n }\n if (_this.isPopupOpen) {\n _this.popupObj.hide(new Animation(eventArgs.animation));\n }\n else {\n _this.destroyPopup();\n }\n }\n });\n };\n DropDownList.prototype.destroyPopup = function () {\n this.isPopupOpen = false;\n this.isFilterFocus = false;\n this.popupObj.destroy();\n detach(this.popupObj.element);\n };\n DropDownList.prototype.clickOnBackIcon = function () {\n this.hidePopup();\n this.focusIn();\n };\n /**\n * To Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n DropDownList.prototype.render = function () {\n if (this.element.tagName === 'INPUT') {\n this.inputElement = this.element;\n if (isNullOrUndefined(this.inputElement.getAttribute('role'))) {\n this.inputElement.setAttribute('role', 'combobox');\n }\n if (isNullOrUndefined(this.inputElement.getAttribute('type'))) {\n this.inputElement.setAttribute('type', 'text');\n }\n this.inputElement.setAttribute('aria-expanded', 'false');\n }\n else {\n this.inputElement = this.createElement('input', { attrs: { role: 'combobox', type: 'text' } });\n if (this.element.tagName !== this.getNgDirective()) {\n this.element.style.display = 'none';\n }\n this.element.parentElement.insertBefore(this.inputElement, this.element);\n this.preventTabIndex(this.inputElement);\n }\n var updatedCssClassValues = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValues = (this.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(closest(this.element, \"fieldset\")) && closest(this.element, \"fieldset\").disabled) {\n this.enabled = false;\n }\n this.inputWrapper = Input.createInput({\n element: this.inputElement,\n buttons: this.isPopupButton() ? [dropDownListClasses.icon] : null,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.getModuleName() === 'dropdownlist' ? true : this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassValues,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton\n }\n }, this.createElement);\n if (this.element.tagName === this.getNgDirective()) {\n this.element.appendChild(this.inputWrapper.container);\n }\n else {\n this.inputElement.parentElement.insertBefore(this.element, this.inputElement);\n }\n this.hiddenElement = this.createElement('select', {\n attrs: { 'aria-hidden': 'true', 'tabindex': '-1', 'class': dropDownListClasses.hiddenElement }\n });\n prepend([this.hiddenElement], this.inputWrapper.container);\n this.validationAttribute(this.element, this.hiddenElement);\n this.setReadOnly();\n this.setFields();\n this.inputWrapper.container.style.width = formatUnit(this.width);\n this.inputWrapper.container.classList.add('e-ddl');\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');\n }\n this.wireEvent();\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n var id = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');\n this.element.id = id;\n this.hiddenElement.id = id + '_hidden';\n this.targetElement().setAttribute('tabindex', this.tabIndex);\n attributes(this.targetElement(), this.getAriaAttributes());\n this.updateDataAttribute(this.htmlAttributes);\n this.setHTMLAttributes();\n if (this.targetElement() === this.inputElement) {\n this.inputElement.removeAttribute('aria-labelledby');\n }\n if (this.value !== null || this.activeIndex !== null || this.text !== null) {\n this.initValue();\n }\n else if (this.element.tagName === 'SELECT' && this.element.options[0]) {\n var selectElement = this.element;\n this.value = selectElement.options[selectElement.selectedIndex].value;\n this.text = isNullOrUndefined(this.value) ? null : selectElement.options[selectElement.selectedIndex].textContent;\n this.initValue();\n }\n this.preventTabIndex(this.element);\n if (!this.enabled) {\n this.targetElement().tabIndex = -1;\n }\n this.initial = false;\n this.element.style.opacity = '';\n this.inputElement.onselect = function (e) {\n e.stopImmediatePropagation();\n };\n this.inputElement.onchange = function (e) {\n e.stopImmediatePropagation();\n };\n if (this.element.hasAttribute('autofocus')) {\n this.focusIn();\n }\n if (!isNullOrUndefined(this.text)) {\n this.inputElement.setAttribute('value', this.text);\n }\n if (this.element.hasAttribute('data-val')) {\n this.element.setAttribute('data-val', 'false');\n }\n var floatLabelElement = this.inputWrapper.container.getElementsByClassName('e-float-text')[0];\n if (!isNullOrUndefined(this.element.id) && this.element.id !== '' && !isNullOrUndefined(floatLabelElement)) {\n floatLabelElement.id = 'label_' + this.element.id.replace(/ /g, '_');\n attributes(this.inputElement, { 'aria-labelledby': floatLabelElement.id });\n }\n this.renderComplete();\n };\n DropDownList.prototype.setFooterTemplate = function (popupEle) {\n var compiledString;\n if (this.footer) {\n if (this.isReact) {\n this.clearTemplate(['footerTemplate']);\n }\n else {\n this.footer.innerHTML = '';\n }\n }\n else {\n this.footer = this.createElement('div');\n addClass([this.footer], dropDownListClasses.footer);\n }\n var footercheck = this.dropdownCompiler(this.footerTemplate);\n if (footercheck) {\n compiledString = compile(select(this.footerTemplate, document).innerHTML.trim());\n }\n else {\n compiledString = compile(this.footerTemplate);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var footerCompTemp = compiledString({}, this, 'footerTemplate', this.footerTemplateId, this.isStringTemplate, null, this.footer);\n if (footerCompTemp && footerCompTemp.length > 0) {\n for (var i = 0; i < footerCompTemp.length; i++) {\n this.footer.appendChild(footerCompTemp[i]);\n }\n }\n append([this.footer], popupEle);\n };\n DropDownList.prototype.setHeaderTemplate = function (popupEle) {\n var compiledString;\n if (this.header) {\n this.header.innerHTML = '';\n }\n else {\n this.header = this.createElement('div');\n addClass([this.header], dropDownListClasses.header);\n }\n var headercheck = this.dropdownCompiler(this.headerTemplate);\n if (headercheck) {\n compiledString = compile(select(this.headerTemplate, document).innerHTML.trim());\n }\n else {\n compiledString = compile(this.headerTemplate);\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var headerCompTemp = compiledString({}, this, 'headerTemplate', this.headerTemplateId, this.isStringTemplate, null, this.header);\n if (headerCompTemp && headerCompTemp.length) {\n for (var i = 0; i < headerCompTemp.length; i++) {\n this.header.appendChild(headerCompTemp[i]);\n }\n }\n var contentEle = popupEle.querySelector('div.e-content');\n popupEle.insertBefore(this.header, contentEle);\n };\n DropDownList.prototype.setOldText = function (text) {\n this.text = text;\n };\n DropDownList.prototype.setOldValue = function (value) {\n this.value = value;\n };\n DropDownList.prototype.refreshPopup = function () {\n if (!isNullOrUndefined(this.popupObj) && document.body.contains(this.popupObj.element) &&\n ((this.allowFiltering && !(Browser.isDevice && this.isFilterLayout())) || this.getModuleName() === 'autocomplete')) {\n removeClass([this.popupObj.element], 'e-popup-close');\n this.popupObj.refreshPosition(this.inputWrapper.container);\n this.popupObj.resolveCollision();\n }\n };\n DropDownList.prototype.checkData = function (newProp) {\n if (newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource)) && this.itemTemplate && this.allowFiltering &&\n !(this.isListSearched && (newProp.dataSource instanceof DataManager))) {\n this.list = null;\n this.actionCompleteData = { ulElement: null, list: null, isUpdated: false };\n }\n this.isListSearched = false;\n var isChangeValue = Object.keys(newProp).indexOf('value') !== -1 && isNullOrUndefined(newProp.value);\n var isChangeText = Object.keys(newProp).indexOf('text') !== -1 && isNullOrUndefined(newProp.text);\n if (this.getModuleName() !== 'autocomplete' && this.allowFiltering && (isChangeValue || isChangeText)) {\n this.itemData = null;\n }\n if (this.allowFiltering && newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource))) {\n this.actionCompleteData = { ulElement: null, list: null, isUpdated: false };\n this.actionData = this.actionCompleteData;\n }\n else if (this.allowFiltering && newProp.query && !isNullOrUndefined(Object.keys(newProp.query))) {\n this.actionCompleteData = this.getModuleName() === 'combobox' ?\n { ulElement: null, list: null, isUpdated: false } : this.actionCompleteData;\n this.actionData = this.actionCompleteData;\n }\n };\n DropDownList.prototype.updateDataSource = function (props) {\n if (this.inputElement.value !== '' || (!isNullOrUndefined(props) && (isNullOrUndefined(props.dataSource)\n || (!(props.dataSource instanceof DataManager) && props.dataSource.length === 0)))) {\n this.clearAll(null, props);\n }\n if ((this.fields.groupBy && props.fields) && !this.isGroupChecking && this.list) {\n EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);\n EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);\n }\n if (!(!isNullOrUndefined(props) && (isNullOrUndefined(props.dataSource)\n || (!(props.dataSource instanceof DataManager) && props.dataSource.length === 0))) || !(props.dataSource === [])) {\n this.typedString = '';\n this.resetList(this.dataSource);\n }\n if (!this.isCustomFilter && !this.isFilterFocus && document.activeElement !== this.filterInput) {\n this.checkCustomValue();\n }\n };\n DropDownList.prototype.checkCustomValue = function () {\n this.itemData = this.getDataByValue(this.value);\n var dataItem = this.getItemData();\n this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });\n };\n DropDownList.prototype.updateInputFields = function () {\n if (this.getModuleName() === 'dropdownlist') {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n };\n /**\n * Dynamically change the value of properties.\n *\n * @private\n * @param {DropDownListModel} newProp - Returns the dynamic property value of the component.\n * @param {DropDownListModel} oldProp - Returns the previous previous value of the component.\n * @returns {void}\n */\n DropDownList.prototype.onPropertyChanged = function (newProp, oldProp) {\n var _this = this;\n if (this.getModuleName() === 'dropdownlist') {\n this.checkData(newProp);\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n }\n var _loop_1 = function (prop) {\n switch (prop) {\n case 'query':\n case 'dataSource': break;\n case 'htmlAttributes':\n this_1.setHTMLAttributes();\n break;\n case 'width':\n this_1.setEleWidth(newProp.width);\n Input.calculateWidth(this_1.inputElement, this_1.inputWrapper.container);\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this_1.inputElement);\n break;\n case 'filterBarPlaceholder':\n if (this_1.filterInput) {\n Input.setPlaceholder(newProp.filterBarPlaceholder, this_1.filterInput);\n }\n break;\n case 'readonly':\n if (this_1.getModuleName() !== 'dropdownlist') {\n Input.setReadonly(newProp.readonly, this_1.inputElement);\n }\n this_1.setReadOnly();\n break;\n case 'cssClass':\n this_1.setCssClass(newProp.cssClass, oldProp.cssClass);\n Input.calculateWidth(this_1.inputElement, this_1.inputWrapper.container);\n break;\n case 'enableRtl':\n this_1.setEnableRtl();\n break;\n case 'enabled':\n this_1.setEnable();\n break;\n case 'text':\n if (newProp.text === null) {\n this_1.clearAll();\n break;\n }\n if (!this_1.list) {\n if (this_1.dataSource instanceof DataManager) {\n this_1.initRemoteRender = true;\n }\n this_1.renderList();\n }\n if (!this_1.initRemoteRender) {\n var li = this_1.getElementByText(newProp.text);\n if (!this_1.checkValidLi(li)) {\n if (this_1.liCollections && this_1.liCollections.length === 100 &&\n this_1.getModuleName() === 'autocomplete' && this_1.listData.length > 100) {\n this_1.setSelectionData(newProp.text, oldProp.text, 'text');\n }\n else if (newProp.text && this_1.dataSource instanceof DataManager) {\n var listLength_1 = this_1.getItems().length;\n var checkField = isNullOrUndefined(this_1.fields.text) ? this_1.fields.value : this_1.fields.text;\n this_1.typedString = '';\n this_1.dataSource.executeQuery(this_1.getQuery(this_1.query).where(new Predicate(checkField, 'equal', newProp.text)))\n .then(function (e) {\n if (e.result.length > 0) {\n _this.addItem(e.result, listLength_1);\n _this.updateValues();\n }\n else {\n _this.setOldText(oldProp.text);\n }\n });\n }\n else if (this_1.getModuleName() === 'autocomplete') {\n this_1.setInputValue(newProp, oldProp);\n }\n else {\n this_1.setOldText(oldProp.text);\n }\n }\n this_1.updateInputFields();\n }\n break;\n case 'value':\n if (newProp.value === null) {\n this_1.clearAll();\n break;\n }\n this_1.notify('beforeValueChange', { newProp: newProp }); // gird component value type change\n if (!this_1.list) {\n if (this_1.dataSource instanceof DataManager) {\n this_1.initRemoteRender = true;\n }\n this_1.renderList();\n }\n if (!this_1.initRemoteRender) {\n var item = this_1.getElementByValue(newProp.value);\n if (!this_1.checkValidLi(item)) {\n if (this_1.liCollections && this_1.liCollections.length === 100 &&\n this_1.getModuleName() === 'autocomplete' && this_1.listData.length > 100) {\n this_1.setSelectionData(newProp.value, oldProp.value, 'value');\n }\n else if (newProp.value && this_1.dataSource instanceof DataManager) {\n var listLength_2 = this_1.getItems().length;\n var checkField = isNullOrUndefined(this_1.fields.value) ? this_1.fields.text : this_1.fields.value;\n this_1.typedString = '';\n this_1.dataSource.executeQuery(this_1.getQuery(this_1.query).where(new Predicate(checkField, 'equal', newProp.value)))\n .then(function (e) {\n if (e.result.length > 0) {\n _this.addItem(e.result, listLength_2);\n _this.updateValues();\n }\n else {\n _this.setOldValue(oldProp.value);\n }\n });\n }\n else if (this_1.getModuleName() === 'autocomplete') {\n this_1.setInputValue(newProp, oldProp);\n }\n else {\n this_1.setOldValue(oldProp.value);\n }\n }\n this_1.updateInputFields();\n this_1.preventChange = this_1.isAngular && this_1.preventChange ? !this_1.preventChange : this_1.preventChange;\n }\n break;\n case 'index':\n if (newProp.index === null) {\n this_1.clearAll();\n break;\n }\n if (!this_1.list) {\n if (this_1.dataSource instanceof DataManager) {\n this_1.initRemoteRender = true;\n }\n this_1.renderList();\n }\n if (!this_1.initRemoteRender && this_1.liCollections) {\n var element = this_1.liCollections[newProp.index];\n if (!this_1.checkValidLi(element)) {\n if (this_1.liCollections && this_1.liCollections.length === 100 &&\n this_1.getModuleName() === 'autocomplete' && this_1.listData.length > 100) {\n this_1.setSelectionData(newProp.index, oldProp.index, 'index');\n }\n else {\n this_1.index = oldProp.index;\n }\n }\n this_1.updateInputFields();\n }\n break;\n case 'footerTemplate':\n if (this_1.popupObj) {\n this_1.setFooterTemplate(this_1.popupObj.element);\n }\n break;\n case 'headerTemplate':\n if (this_1.popupObj) {\n this_1.setHeaderTemplate(this_1.popupObj.element);\n }\n break;\n case 'valueTemplate':\n if (!isNullOrUndefined(this_1.itemData) && this_1.valueTemplate != null) {\n this_1.setValueTemplate();\n }\n break;\n case 'allowFiltering':\n if (this_1.allowFiltering) {\n this_1.actionCompleteData = { ulElement: this_1.ulElement,\n list: this_1.listData, isUpdated: true };\n this_1.actionData = this_1.actionCompleteData;\n this_1.updateSelectElementData(this_1.allowFiltering);\n }\n break;\n case 'floatLabelType':\n Input.removeFloating(this_1.inputWrapper);\n Input.addFloating(this_1.inputElement, newProp.floatLabelType, this_1.placeholder, this_1.createElement);\n if (!isNullOrUndefined(this_1.inputWrapper.buttons[0]) && this_1.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0] && this_1.floatLabelType !== 'Never') {\n this_1.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n break;\n case 'showClearButton':\n Input.setClearButton(newProp.showClearButton, this_1.inputElement, this_1.inputWrapper, null, this_1.createElement);\n this_1.bindClearEvent();\n break;\n default:\n {\n // eslint-disable-next-line max-len\n var ddlProps = this_1.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this_1, ddlProps.newProperty, ddlProps.oldProperty);\n }\n break;\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n _loop_1(prop);\n }\n };\n DropDownList.prototype.checkValidLi = function (element) {\n if (this.isValidLI(element)) {\n this.setSelection(element, null);\n return true;\n }\n return false;\n };\n DropDownList.prototype.setSelectionData = function (newProp, oldProp, prop) {\n var _this = this;\n var li;\n this.updateListValues = function () {\n if (prop === 'text') {\n li = _this.getElementByText(newProp);\n if (!_this.checkValidLi(li)) {\n _this.setOldText(oldProp);\n }\n }\n else if (prop === 'value') {\n li = _this.getElementByValue(newProp);\n if (!_this.checkValidLi(li)) {\n _this.setOldValue(oldProp);\n }\n }\n else if (prop === 'index') {\n li = _this.liCollections[newProp];\n if (!_this.checkValidLi(li)) {\n _this.index = oldProp;\n }\n }\n };\n };\n DropDownList.prototype.setReadOnly = function () {\n if (this.readonly) {\n addClass([this.inputWrapper.container], ['e-readonly']);\n }\n else {\n removeClass([this.inputWrapper.container], ['e-readonly']);\n }\n };\n DropDownList.prototype.setInputValue = function (newProp, oldProp) {\n };\n DropDownList.prototype.setCssClass = function (newClass, oldClass) {\n if (!isNullOrUndefined(oldClass)) {\n oldClass = (oldClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(newClass)) {\n newClass = (newClass.replace(/\\s+/g, ' ')).trim();\n }\n Input.setCssClass(newClass, [this.inputWrapper.container], oldClass);\n if (this.popupObj) {\n Input.setCssClass(newClass, [this.popupObj.element], oldClass);\n }\n };\n /**\n * Return the module name of this component.\n *\n * @private\n * @returns {string} Return the module name of this component.\n */\n DropDownList.prototype.getModuleName = function () {\n return 'dropdownlist';\n };\n /**\n * Opens the popup that displays the list of items.\n *\n * @returns {void}\n */\n DropDownList.prototype.showPopup = function (e) {\n if (!this.enabled) {\n return;\n }\n if (this.isFiltering() && this.dataSource instanceof DataManager && (this.actionData.list != this.actionCompleteData.list) &&\n this.actionData.list && this.actionData.ulElement) {\n this.actionCompleteData = this.actionData;\n this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list, null, true);\n }\n if (this.beforePopupOpen) {\n this.refreshPopup();\n return;\n }\n this.beforePopupOpen = true;\n if (this.isFiltering() && !this.isActive && this.actionCompleteData.list && this.actionCompleteData.list[0]) {\n this.isActive = true;\n this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list, null, true);\n }\n else if (isNullOrUndefined(this.list) || !isUndefined(this.list) && (this.list.classList.contains(dropDownBaseClasses.noData) ||\n this.list.querySelectorAll('.' + dropDownBaseClasses.li).length <= 0)) {\n this.renderList(e);\n }\n this.invokeRenderPopup(e);\n };\n DropDownList.prototype.invokeRenderPopup = function (e) {\n if (Browser.isDevice && this.isFilterLayout()) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy_2 = this;\n window.onpopstate = function () {\n proxy_2.hidePopup();\n };\n history.pushState({}, '');\n }\n if (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData)) {\n this.renderPopup(e);\n }\n attributes(this.targetElement(), { 'aria-activedescendant': this.selectedElementID });\n if (this.selectedElementID == null) {\n this.targetElement().removeAttribute('aria-activedescendant');\n }\n };\n DropDownList.prototype.renderHightSearch = function () {\n // update high light search\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Hides the popup if it is in an open state.\n *\n * @returns {void}\n */\n DropDownList.prototype.hidePopup = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n if (this.isEscapeKey && this.getModuleName() === 'dropdownlist') {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.isEscapeKey = false;\n if (!isNullOrUndefined(this.index)) {\n var element = this.findListElement(this.ulElement, 'li', 'data-value', this.value);\n this.selectedLI = this.liCollections[this.index] || element;\n if (this.selectedLI) {\n this.updateSelectedItem(this.selectedLI, null, true);\n if (this.valueTemplate && this.itemData !== null) {\n this.setValueTemplate();\n }\n }\n }\n else {\n this.resetSelection();\n }\n }\n this.closePopup(0, e);\n var dataItem = this.getItemData();\n var isSelectVal = !isNullOrUndefined(this.selectedLI);\n if (this.inputElement && this.inputElement.value.trim() === '' && !this.isInteracted && (this.isSelectCustom ||\n isSelectVal && this.inputElement.value !== dataItem.text)) {\n this.isSelectCustom = false;\n this.clearAll(e);\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Sets the focus on the component for interaction.\n *\n * @returns {void}\n */\n DropDownList.prototype.focusIn = function (e) {\n if (!this.enabled) {\n return;\n }\n if (this.targetElement().classList.contains(dropDownListClasses.disable)) {\n return;\n }\n var isFocused = false;\n if (this.preventFocus && Browser.isDevice) {\n this.inputWrapper.container.tabIndex = 1;\n this.inputWrapper.container.focus();\n this.preventFocus = false;\n isFocused = true;\n }\n if (!isFocused) {\n this.targetElement().focus();\n }\n addClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n this.onFocus(e);\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n };\n /**\n * Moves the focus from the component if the component is already focused.\n *\n * @returns {void}\n */\n DropDownList.prototype.focusOut = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n if (!this.enabled) {\n return;\n }\n this.isTyped = true;\n this.hidePopup(e);\n if (this.targetElement()) {\n this.targetElement().blur();\n }\n removeClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.\n *\n * @method destroy\n * @returns {void}\n */\n DropDownList.prototype.destroy = function () {\n this.isActive = false;\n resetIncrementalSearchValues(this.element.id);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.clearTemplate();\n }\n this.hidePopup();\n this.unWireEvent();\n if (this.list) {\n this.unWireListEvents();\n }\n if (this.element && !this.element.classList.contains('e-' + this.getModuleName())) {\n return;\n }\n if (this.inputElement) {\n var attrArray = ['readonly', 'aria-disabled', 'placeholder', 'aria-labelledby',\n 'aria-expanded', 'autocomplete', 'aria-readonly', 'autocapitalize',\n 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-describedby', 'aria-label'];\n for (var i = 0; i < attrArray.length; i++) {\n this.inputElement.removeAttribute(attrArray[i]);\n }\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n this.inputElement.classList.remove('e-input');\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n }\n this.element.style.display = 'block';\n if (this.inputWrapper.container.parentElement.tagName === this.getNgDirective()) {\n detach(this.inputWrapper.container);\n }\n else {\n this.inputWrapper.container.parentElement.insertBefore(this.element, this.inputWrapper.container);\n detach(this.inputWrapper.container);\n }\n _super.prototype.destroy.call(this);\n };\n /* 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 DropDownList.prototype.getItems = function () {\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n return this.ulElement ? _super.prototype.getItems.call(this) : [];\n };\n /**\n * Gets the data Object that matches the given value.\n *\n * @param { string | number } value - Specifies the value of the list item.\n * @returns {Object}\n */\n DropDownList.prototype.getDataByValue = function (value) {\n return _super.prototype.getDataByValue.call(this, value);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Allows you to clear the selected values from the component.\n *\n * @returns {void}\n */\n DropDownList.prototype.clear = function () {\n this.value = null;\n };\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"cssClass\", void 0);\n __decorate([\n Property('100%')\n ], DropDownList.prototype, \"width\", void 0);\n __decorate([\n Property('300px')\n ], DropDownList.prototype, \"popupHeight\", void 0);\n __decorate([\n Property('100%')\n ], DropDownList.prototype, \"popupWidth\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"placeholder\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"filterBarPlaceholder\", void 0);\n __decorate([\n Property({})\n ], DropDownList.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"query\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"headerTemplate\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property(false)\n ], DropDownList.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(false)\n ], DropDownList.prototype, \"readonly\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"text\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], DropDownList.prototype, \"index\", void 0);\n __decorate([\n Property('Never')\n ], DropDownList.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(false)\n ], DropDownList.prototype, \"showClearButton\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"filtering\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], DropDownList.prototype, \"focus\", void 0);\n DropDownList = __decorate([\n NotifyPropertyChanges\n ], DropDownList);\n return DropDownList;\n}(DropDownBase));\nexport { DropDownList };\n","var instances = 'ej2_instances';\nvar uid = 0;\nvar isBlazorPlatform = false;\n/**\n * Function to check whether the platform is blazor or not.\n *\n * @returns {void} result\n * @private\n */\nexport function disableBlazorMode() {\n isBlazorPlatform = false;\n}\n/**\n * Create Instance from constructor function with desired parameters.\n *\n * @param {Function} classFunction - Class function to which need to create instance\n * @param {any[]} params - Parameters need to passed while creating instance\n * @returns {any} ?\n * @private\n */\n// eslint-disable-next-line\nexport function createInstance(classFunction, params) {\n var arrayParam = params;\n arrayParam.unshift(undefined);\n return new (Function.prototype.bind.apply(classFunction, arrayParam));\n}\n/**\n * To run a callback function immediately after the browser has completed other operations.\n *\n * @param {Function} handler - callback function to be triggered.\n * @returns {Function} ?\n * @private\n */\nexport function setImmediate(handler) {\n var unbind;\n // eslint-disable-next-line\n var num = new Uint16Array(5);\n var intCrypto = window.msCrypto || window.crypto;\n intCrypto.getRandomValues(num);\n var secret = 'ej2' + combineArray(num);\n // eslint-disable-next-line\n var messageHandler = function (event) {\n if (event.source === window && typeof event.data === 'string' && event.data.length <= 32 && event.data === secret) {\n handler();\n unbind();\n }\n };\n window.addEventListener('message', messageHandler, false);\n window.postMessage(secret, '*');\n return unbind = function () {\n window.removeEventListener('message', messageHandler);\n handler = messageHandler = secret = undefined;\n };\n}\n/**\n * To get nameSpace value from the desired object.\n *\n * @param {string} nameSpace - String value to the get the inner object\n * @param {any} obj - Object to get the inner object value.\n * @returns {any} ?\n * @private\n */\n// eslint-disable-next-line\nexport function getValue(nameSpace, obj) {\n // eslint-disable-next-line\n var value = obj;\n var splits = nameSpace.replace(/\\[/g, '.').replace(/\\]/g, '').split('.');\n for (var i = 0; i < splits.length && !isUndefined(value); i++) {\n value = value[splits[parseInt(i.toString(), 10)]];\n }\n return value;\n}\n/**\n * To set value for the nameSpace in desired object.\n *\n * @param {string} nameSpace - String value to the get the inner object\n * @param {any} value - Value that you need to set.\n * @param {any} obj - Object to get the inner object value.\n * @returns {any} ?\n * @private\n */\n// eslint-disable-next-line\nexport function setValue(nameSpace, value, obj) {\n var keys = nameSpace.replace(/\\[/g, '.').replace(/\\]/g, '').split('.');\n // eslint-disable-next-line\n var start = obj || {};\n // eslint-disable-next-line\n var fromObj = start;\n var i;\n var length = keys.length;\n var key;\n for (i = 0; i < length; i++) {\n key = keys[parseInt(i.toString(), 10)];\n if (i + 1 === length) {\n fromObj[\"\" + key] = value === undefined ? {} : value;\n }\n else if (isNullOrUndefined(fromObj[\"\" + key])) {\n fromObj[\"\" + key] = {};\n }\n fromObj = fromObj[\"\" + key];\n }\n return start;\n}\n/**\n * Delete an item from Object\n *\n * @param {any} obj - Object in which we need to delete an item.\n * @param {string} key - String value to the get the inner object\n * @returns {void} ?\n * @private\n */\n// eslint-disable-next-line\nexport function deleteObject(obj, key) {\n delete obj[\"\" + key];\n}\n/**\n *@private\n */\n// eslint-disable-next-line\nexport var containerObject = typeof window !== 'undefined' ? window : {};\n/**\n * Check weather the given argument is only object.\n *\n * @param {any} obj - Object which is need to check.\n * @returns {boolean} ?\n * @private\n */\n// eslint-disable-next-line\nexport function isObject(obj) {\n var objCon = {};\n return (!isNullOrUndefined(obj) && obj.constructor === objCon.constructor);\n}\n/**\n * To get enum value by giving the string.\n *\n * @param {any} enumObject - Enum object.\n * @param {string} enumValue - Enum value to be searched\n * @returns {any} ?\n * @private\n */\n// eslint-disable-next-line\nexport function getEnumValue(enumObject, enumValue) {\n // eslint-disable-next-line\n return enumObject[enumValue];\n}\n/**\n * Merge the source object into destination object.\n *\n * @param {any} source - source object which is going to merge with destination object\n * @param {any} destination - object need to be merged\n * @returns {void} ?\n * @private\n */\nexport function merge(source, destination) {\n if (!isNullOrUndefined(destination)) {\n var temrObj = source;\n var tempProp = destination;\n var keys = Object.keys(destination);\n var deepmerge = 'deepMerge';\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n if (!isNullOrUndefined(temrObj[\"\" + deepmerge]) && (temrObj[\"\" + deepmerge].indexOf(key) !== -1) &&\n (isObject(tempProp[\"\" + key]) || Array.isArray(tempProp[\"\" + key]))) {\n extend(temrObj[\"\" + key], temrObj[\"\" + key], tempProp[\"\" + key], true);\n }\n else {\n temrObj[\"\" + key] = tempProp[\"\" + key];\n }\n }\n }\n}\n/**\n * Extend the two object with newer one.\n *\n * @param {any} copied - Resultant object after merged\n * @param {Object} first - First object need to merge\n * @param {Object} second - Second object need to merge\n * @param {boolean} deep ?\n * @returns {Object} ?\n * @private\n */\nexport function extend(copied, first, second, deep) {\n var result = copied && typeof copied === 'object' ? copied : {};\n var length = arguments.length;\n if (deep) {\n length = length - 1;\n }\n var _loop_1 = function (i) {\n // eslint-disable-next-line\n if (!arguments_1[i]) {\n return \"continue\";\n }\n // eslint-disable-next-line\n var obj1 = arguments_1[i];\n Object.keys(obj1).forEach(function (key) {\n var src = result[\"\" + key];\n var copy = obj1[\"\" + key];\n var clone;\n var isArrayChanged = Array.isArray(copy) && Array.isArray(src) && (copy.length !== src.length);\n // eslint-disable-next-line\n var blazorEventExtend = isBlazor() ? (!(src instanceof Event) && !isArrayChanged) : true;\n if (deep && blazorEventExtend && (isObject(copy) || Array.isArray(copy))) {\n if (isObject(copy)) {\n clone = src ? src : {};\n // eslint-disable-next-line\n if (Array.isArray(clone) && clone.hasOwnProperty('isComplexArray')) {\n extend(clone, {}, copy, deep);\n }\n else {\n result[\"\" + key] = extend(clone, {}, copy, deep);\n }\n }\n else {\n /* istanbul ignore next */\n clone = isBlazor() ? src && Object.keys(copy).length : src ? src : [];\n // eslint-disable-next-line\n result[\"\" + key] = extend([], clone, copy, (clone && clone.length) || (copy && copy.length));\n }\n }\n else {\n result[\"\" + key] = copy;\n }\n });\n };\n var arguments_1 = arguments;\n for (var i = 1; i < length; i++) {\n _loop_1(i);\n }\n return result;\n}\n/**\n * To check whether the object is null or undefined.\n *\n * @param {Object} value - To check the object is null or undefined\n * @returns {boolean} ?\n * @private\n */\nexport function isNullOrUndefined(value) {\n return value === undefined || value === null;\n}\n/**\n * To check whether the object is undefined.\n *\n * @param {Object} value - To check the object is undefined\n * @returns {boolean} ?\n * @private\n */\nexport function isUndefined(value) {\n return ('undefined' === typeof value);\n}\n/**\n * To return the generated unique name\n *\n * @param {string} definedName - To concatenate the unique id to provided name\n * @returns {string} ?\n * @private\n */\nexport function getUniqueID(definedName) {\n return definedName + '_' + uid++;\n}\n/**\n * It limits the rate at which a function can fire. The function will fire only once every provided second instead of as quickly.\n *\n * @param {Function} eventFunction - Specifies the function to run when the event occurs\n * @param {number} delay - A number that specifies the milliseconds for function delay call option\n * @returns {Function} ?\n * @private\n */\nexport function debounce(eventFunction, delay) {\n // eslint-disable-next-line\n var out;\n return function () {\n var _this = this;\n // eslint-disable-next-line\n var args = arguments;\n var later = function () {\n out = null;\n return eventFunction.apply(_this, args);\n };\n clearTimeout(out);\n out = setTimeout(later, delay);\n };\n}\n/**\n * To convert the object to string for query url\n *\n * @param {Object} data ?\n * @returns {string} ?\n * @private\n */\n// eslint-disable-next-line\nexport function queryParams(data) {\n var array = [];\n var keys = Object.keys(data);\n for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {\n var key = keys_2[_i];\n array.push(encodeURIComponent(key) + '=' + encodeURIComponent('' + data[\"\" + key]));\n }\n return array.join('&');\n}\n/**\n * To check whether the given array contains object.\n *\n * @param {any} value - Specifies the T type array to be checked.\n * @returns {boolean} ?\n * @private\n */\nexport function isObjectArray(value) {\n var parser = Object.prototype.toString;\n if (parser.call(value) === '[object Array]') {\n if (parser.call(value[0]) === '[object Object]') {\n return true;\n }\n }\n return false;\n}\n/**\n * To check whether the child element is descendant to parent element or parent and child are same element.\n *\n * @param {Element} child - Specifies the child element to compare with parent.\n * @param {Element} parent - Specifies the parent element.\n * @returns {boolean} ?\n * @private\n */\nexport function compareElementParent(child, parent) {\n var node = child;\n if (node === parent) {\n return true;\n }\n else if (node === document || !node) {\n return false;\n }\n else {\n return compareElementParent(node.parentNode, parent);\n }\n}\n/**\n * To throw custom error message.\n *\n * @param {string} message - Specifies the error message to be thrown.\n * @returns {void} ?\n * @private\n */\nexport function throwError(message) {\n try {\n throw new Error(message);\n }\n catch (e) {\n // eslint-disable-next-line\n throw e.message + '\\n' + e.stack;\n }\n}\n/**\n * This function is used to print given element\n *\n * @param {Element} element - Specifies the print content element.\n * @param {Window} printWindow - Specifies the print window.\n * @returns {Window} ?\n * @private\n */\nexport function print(element, printWindow) {\n var div = document.createElement('div');\n var links = [].slice.call(document.getElementsByTagName('head')[0].querySelectorAll('base, link, style'));\n var blinks = [].slice.call(document.getElementsByTagName('body')[0].querySelectorAll('link, style'));\n if (blinks.length) {\n for (var l = 0, len = blinks.length; l < len; l++) {\n links.push(blinks[parseInt(l.toString(), 10)]);\n }\n }\n var reference = '';\n if (isNullOrUndefined(printWindow)) {\n printWindow = window.open('', 'print', 'height=452,width=1024,tabbar=no');\n }\n div.appendChild(element.cloneNode(true));\n for (var i = 0, len = links.length; i < len; i++) {\n reference += links[parseInt(i.toString(), 10)].outerHTML;\n }\n printWindow.document.write(' ' + reference + '' + div.innerHTML +\n '' + '');\n printWindow.document.close();\n printWindow.focus();\n // eslint-disable-next-line\n var interval = setInterval(function () {\n if (printWindow.ready) {\n printWindow.print();\n printWindow.close();\n clearInterval(interval);\n }\n }, 500);\n return printWindow;\n}\n/**\n * Function to normalize the units applied to the element.\n *\n * @param {number|string} value ?\n * @returns {string} result\n * @private\n */\nexport function formatUnit(value) {\n var result = value + '';\n if (result.match(/auto|cm|mm|in|px|pt|pc|%|em|ex|ch|rem|vw|vh|vmin|vmax/)) {\n return result;\n }\n return result + 'px';\n}\n/**\n * Function to check whether the platform is blazor or not.\n *\n * @returns {void} result\n * @private\n */\nexport function enableBlazorMode() {\n isBlazorPlatform = true;\n}\n/**\n * Function to check whether the platform is blazor or not.\n *\n * @returns {boolean} result\n * @private\n */\nexport function isBlazor() {\n return isBlazorPlatform;\n}\n/**\n * Function to convert xPath to DOM element in blazor platform\n *\n * @returns {HTMLElement} result\n * @param {HTMLElement | object} element ?\n * @private\n */\nexport function getElement(element) {\n var xPath = 'xPath';\n if (!(element instanceof Node) && isBlazor() && !isNullOrUndefined(element[\"\" + xPath])) {\n return document.evaluate(element[\"\" + xPath], document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;\n }\n return element;\n}\n/**\n * Function to fetch the Instances of a HTML element for the given component.\n *\n * @param {string | HTMLElement} element ?\n * @param {any} component ?\n * @returns {Object} ?\n * @private\n */\n// eslint-disable-next-line\nexport function getInstance(element, component) {\n // eslint-disable-next-line\n var elem = (typeof (element) === 'string') ? document.querySelector(element) : element;\n if (elem[\"\" + instances]) {\n for (var _i = 0, _a = elem[\"\" + instances]; _i < _a.length; _i++) {\n var inst = _a[_i];\n if (inst instanceof component) {\n return inst;\n }\n }\n }\n return null;\n}\n/**\n * Function to add instances for the given element.\n *\n * @param {string | HTMLElement} element ?\n * @param {Object} instance ?\n * @returns {void} ?\n * @private\n */\nexport function addInstance(element, instance) {\n // eslint-disable-next-line\n var elem = (typeof (element) === 'string') ? document.querySelector(element) : element;\n if (elem[\"\" + instances]) {\n elem[\"\" + instances].push(instance);\n }\n else {\n elem[\"\" + instances] = [instance];\n }\n}\n/**\n * Function to generate the unique id.\n *\n * @returns {any} ?\n * @private\n */\n// eslint-disable-next-line\nexport function uniqueID() {\n if ((typeof window) === 'undefined') {\n return;\n }\n // eslint-disable-next-line\n var num = new Uint16Array(5);\n var intCrypto = window.msCrypto || window.crypto;\n return intCrypto.getRandomValues(num);\n}\n/**\n *\n * @param {Int16Array} num ?\n * @returns {string} ?\n */\nfunction combineArray(num) {\n var ret = '';\n for (var i = 0; i < 5; i++) {\n ret += (i ? ',' : '') + num[parseInt(i.toString(), 10)];\n }\n return ret;\n}\n","/**\n * Parser\n */\nvar defaultNumberingSystem = {\n 'latn': {\n '_digits': '0123456789',\n '_type': 'numeric'\n }\n};\nimport { isUndefined, getValue, isBlazor } from '../util';\nvar defaultNumberSymbols = {\n 'decimal': '.',\n 'group': ',',\n 'percentSign': '%',\n 'plusSign': '+',\n 'minusSign': '-',\n 'infinity': '∞',\n 'nan': 'NaN',\n 'exponential': 'E'\n};\nvar latnNumberSystem = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];\n/**\n * Interface for parser base\n *\n * @private\n */\nvar ParserBase = /** @class */ (function () {\n function ParserBase() {\n }\n /**\n * Returns the cldr object for the culture specifies\n *\n * @param {Object} obj - Specifies the object from which culture object to be acquired.\n * @param {string} cName - Specifies the culture name.\n * @returns {Object} ?\n */\n ParserBase.getMainObject = function (obj, cName) {\n var value = isBlazor() ? cName : 'main.' + cName;\n return getValue(value, obj);\n };\n /**\n * Returns the numbering system object from given cldr data.\n *\n * @param {Object} obj - Specifies the object from which number system is acquired.\n * @returns {Object} ?\n */\n ParserBase.getNumberingSystem = function (obj) {\n return getValue('supplemental.numberingSystems', obj) || this.numberingSystems;\n };\n /**\n * Returns the reverse of given object keys or keys specified.\n *\n * @param {Object} prop - Specifies the object to be reversed.\n * @param {number[]} keys - Optional parameter specifies the custom keyList for reversal.\n * @returns {Object} ?\n */\n ParserBase.reverseObject = function (prop, keys) {\n var propKeys = keys || Object.keys(prop);\n var res = {};\n for (var _i = 0, propKeys_1 = propKeys; _i < propKeys_1.length; _i++) {\n var key = propKeys_1[_i];\n // eslint-disable-next-line\n if (!res.hasOwnProperty(prop[key])) {\n // eslint-disable-next-line\n res[prop[key]] = key;\n }\n }\n return res;\n };\n /**\n * Returns the symbol regex by skipping the escape sequence.\n *\n * @param {string[]} props - Specifies the array values to be skipped.\n * @returns {RegExp} ?\n */\n ParserBase.getSymbolRegex = function (props) {\n var regexStr = props.map(function (str) {\n return str.replace(/([.*+?^=!:${}()|[\\]/\\\\])/g, '\\\\$1');\n }).join('|');\n return new RegExp(regexStr, 'g');\n };\n /**\n *\n * @param {Object} prop ?\n * @returns {Object} ?\n */\n ParserBase.getSymbolMatch = function (prop) {\n var matchKeys = Object.keys(defaultNumberSymbols);\n var ret = {};\n for (var _i = 0, matchKeys_1 = matchKeys; _i < matchKeys_1.length; _i++) {\n var key = matchKeys_1[_i];\n // eslint-disable-next-line\n ret[prop[key]] = defaultNumberSymbols[key];\n }\n return ret;\n };\n /**\n * Returns regex string for provided value\n *\n * @param {string} val ?\n * @returns {string} ?\n */\n ParserBase.constructRegex = function (val) {\n var len = val.length;\n var ret = '';\n for (var i = 0; i < len; i++) {\n if (i !== len - 1) {\n ret += val[parseInt(i.toString(), 10)] + '|';\n }\n else {\n ret += val[parseInt(i.toString(), 10)];\n }\n }\n return ret;\n };\n /**\n * Returns the replaced value of matching regex and obj mapper.\n *\n * @param {string} value - Specifies the values to be replaced.\n * @param {RegExp} regex - Specifies the regex to search.\n * @param {Object} obj - Specifies the object matcher to be replace value parts.\n * @returns {string} ?\n */\n ParserBase.convertValueParts = function (value, regex, obj) {\n return value.replace(regex, function (str) {\n // eslint-disable-next-line\n return obj[str];\n });\n };\n /**\n * Returns default numbering system object for formatting from cldr data\n *\n * @param {Object} obj ?\n * @returns {NumericObject} ?\n */\n ParserBase.getDefaultNumberingSystem = function (obj) {\n var ret = {};\n ret.obj = getValue('numbers', obj);\n ret.nSystem = getValue('defaultNumberingSystem', ret.obj);\n return ret;\n };\n /**\n * Returns the replaced value of matching regex and obj mapper.\n *\n * @param {Object} curObj ?\n * @param {Object} numberSystem ?\n * @param {boolean} needSymbols ?\n * @param {boolean} blazorMode ?\n * @returns {Object} ?\n */\n ParserBase.getCurrentNumericOptions = function (curObj, numberSystem, needSymbols, blazorMode) {\n var ret = {};\n var cur = this.getDefaultNumberingSystem(curObj);\n if (!isUndefined(cur.nSystem) || blazorMode) {\n var digits = blazorMode ? getValue('obj.mapperDigits', cur) : getValue(cur.nSystem + '._digits', numberSystem);\n if (!isUndefined(digits)) {\n ret.numericPair = this.reverseObject(digits, latnNumberSystem);\n ret.numberParseRegex = new RegExp(this.constructRegex(digits), 'g');\n ret.numericRegex = '[' + digits[0] + '-' + digits[9] + ']';\n if (needSymbols) {\n ret.numericRegex = digits[0] + '-' + digits[9];\n ret.symbolNumberSystem = getValue(blazorMode ? 'numberSymbols' : 'symbols-numberSystem-' + cur.nSystem, cur.obj);\n ret.symbolMatch = this.getSymbolMatch(ret.symbolNumberSystem);\n ret.numberSystem = cur.nSystem;\n }\n }\n }\n return ret;\n };\n /**\n * Returns number mapper object for the provided cldr data\n *\n * @param {Object} curObj ?\n * @param {Object} numberSystem ?\n * @param {boolean} isNumber ?\n * @returns {NumberMapper} ?\n */\n // eslint-disable-next-line\n ParserBase.getNumberMapper = function (curObj, numberSystem, isNumber) {\n var ret = { mapper: {} };\n var cur = this.getDefaultNumberingSystem(curObj);\n if (!isUndefined(cur.nSystem)) {\n ret.numberSystem = cur.nSystem;\n ret.numberSymbols = getValue('symbols-numberSystem-' + cur.nSystem, cur.obj);\n ret.timeSeparator = getValue('timeSeparator', ret.numberSymbols);\n var digits = getValue(cur.nSystem + '._digits', numberSystem);\n if (!isUndefined(digits)) {\n for (var _i = 0, latnNumberSystem_1 = latnNumberSystem; _i < latnNumberSystem_1.length; _i++) {\n var i = latnNumberSystem_1[_i];\n // eslint-disable-next-line\n ret.mapper[i] = digits[i];\n }\n }\n }\n return ret;\n };\n ParserBase.nPair = 'numericPair';\n ParserBase.nRegex = 'numericRegex';\n ParserBase.numberingSystems = defaultNumberingSystem;\n return ParserBase;\n}());\nexport { ParserBase };\n/**\n * @private\n */\nvar blazorCurrencyData = {\n 'DJF': 'Fdj',\n 'ERN': 'Nfk',\n 'ETB': 'Br',\n 'NAD': '$',\n 'ZAR': 'R',\n 'XAF': 'FCFA',\n 'GHS': 'GH₵',\n 'XDR': 'XDR',\n 'AED': 'د.إ.',\n 'BHD': 'د.ب.',\n 'DZD': 'د.ج.',\n 'EGP': 'ج.م.',\n 'ILS': '₪',\n 'IQD': 'د.ع.',\n 'JOD': 'د.ا.',\n 'KMF': 'CF',\n 'KWD': 'د.ك.',\n 'LBP': 'ل.ل.',\n 'LYD': 'د.ل.',\n 'MAD': 'د.م.',\n 'MRU': 'أ.م.',\n 'OMR': 'ر.ع.',\n 'QAR': 'ر.ق.',\n 'SAR': 'ر.س.',\n 'SDG': 'ج.س.',\n 'SOS': 'S',\n 'SSP': '£',\n 'SYP': 'ل.س.',\n 'TND': 'د.ت.',\n 'YER': 'ر.ي.',\n 'CLP': '$',\n 'INR': '₹',\n 'TZS': 'TSh',\n 'EUR': '€',\n 'AZN': '₼',\n 'RUB': '₽',\n 'BYN': 'Br',\n 'ZMW': 'K',\n 'BGN': 'лв.',\n 'NGN': '₦',\n 'XOF': 'CFA',\n 'BDT': '৳',\n 'CNY': '¥',\n 'BAM': 'КМ',\n 'UGX': 'USh',\n 'USD': '$',\n 'CZK': 'Kč',\n 'GBP': '£',\n 'DKK': 'kr.',\n 'KES': 'Ksh',\n 'CHF': 'CHF',\n 'MVR': 'ރ.',\n 'BTN': 'Nu.',\n 'XCD': 'EC$',\n 'AUD': '$',\n 'BBD': '$',\n 'BIF': 'FBu',\n 'BMD': '$',\n 'BSD': '$',\n 'BWP': 'P',\n 'BZD': '$',\n 'CAD': '$',\n 'NZD': '$',\n 'FJD': '$',\n 'FKP': '£',\n 'GIP': '£',\n 'GMD': 'D',\n 'GYD': '$',\n 'HKD': '$',\n 'IDR': 'Rp',\n 'JMD': '$',\n 'KYD': '$',\n 'LRD': '$',\n 'MGA': 'Ar',\n 'MOP': 'MOP$',\n 'MUR': 'Rs',\n 'MWK': 'MK',\n 'MYR': 'RM',\n 'PGK': 'K',\n 'PHP': '₱',\n 'PKR': 'Rs',\n 'RWF': 'RF',\n 'SBD': '$',\n 'SCR': 'SR',\n 'SEK': 'kr',\n 'SGD': '$',\n 'SHP': '£',\n 'SLL': 'Le',\n 'ANG': 'NAf.',\n 'SZL': 'E',\n 'TOP': 'T$',\n 'TTD': '$',\n 'VUV': 'VT',\n 'WST': 'WS$',\n 'ARS': '$',\n 'BOB': 'Bs',\n 'BRL': 'R$',\n 'COP': '$',\n 'CRC': '₡',\n 'CUP': '$',\n 'DOP': '$',\n 'GTQ': 'Q',\n 'HNL': 'L',\n 'MXN': '$',\n 'NIO': 'C$',\n 'PAB': 'B/.',\n 'PEN': 'S/',\n 'PYG': '₲',\n 'UYU': '$',\n 'VES': 'Bs.S',\n 'IRR': 'ريال',\n 'GNF': 'FG',\n 'CDF': 'FC',\n 'HTG': 'G',\n 'XPF': 'FCFP',\n 'HRK': 'kn',\n 'HUF': 'Ft',\n 'AMD': '֏',\n 'ISK': 'kr',\n 'JPY': '¥',\n 'GEL': '₾',\n 'CVE': '',\n 'KZT': '₸',\n 'KHR': '៛',\n 'KPW': '₩',\n 'KRW': '₩',\n 'KGS': 'сом',\n 'AOA': 'Kz',\n 'LAK': '₭',\n 'MZN': 'MTn',\n 'MKD': 'ден',\n 'MNT': '₮',\n 'BND': '$',\n 'MMK': 'K',\n 'NOK': 'kr',\n 'NPR': 'रु',\n 'AWG': 'Afl.',\n 'SRD': '$',\n 'PLN': 'zł',\n 'AFN': '؋',\n 'STN': 'Db',\n 'MDL': 'L',\n 'RON': 'lei',\n 'UAH': '₴',\n 'LKR': 'රු.',\n 'ALL': 'Lekë',\n 'RSD': 'дин.',\n 'TJS': 'смн',\n 'THB': '฿',\n 'TMT': 'm.',\n 'TRY': '₺',\n 'UZS': 'сўм',\n 'VND': '₫',\n 'TWD': 'NT$'\n};\n/**\n *\n * @param {string} currencyCode ?\n * @returns {string} ?\n */\nexport function getBlazorCurrencySymbol(currencyCode) {\n return getValue(currencyCode || '', blazorCurrencyData);\n}\n","/***\n * Hijri parser\n */\n// eslint-disable-next-line\nexport var HijriParser;\n(function (HijriParser) {\n var dateCorrection = [28607, 28636, 28665, 28695, 28724, 28754, 28783, 28813, 28843, 28872, 28901, 28931, 28960, 28990,\n 29019, 29049, 29078, 29108, 29137, 29167, 29196, 29226, 29255, 29285, 29315, 29345, 29375, 29404, 29434, 29463, 29492, 29522,\n 29551, 29580, 29610, 29640, 29669, 29699, 29729, 29759, 29788, 29818, 29847, 29876, 29906, 29935, 29964, 29994, 30023, 30053,\n 30082, 30112, 30141, 30171, 30200, 30230, 30259, 30289, 30318, 30348, 30378, 30408, 30437, 30467, 30496, 30526, 30555, 30585,\n 30614, 30644, 30673, 30703, 30732, 30762, 30791, 30821, 30850, 30880, 30909, 30939, 30968, 30998, 31027, 31057, 31086, 31116,\n 31145, 31175, 31204, 31234, 31263, 31293, 31322, 31352, 31381, 31411, 31441, 31471, 31500, 31530, 31559, 31589, 31618, 31648,\n 31676, 31706, 31736, 31766, 31795, 31825, 31854, 31884, 31913, 31943, 31972, 32002, 32031, 32061, 32090, 32120, 32150, 32180,\n 32209, 32239, 32268, 32298, 32327, 32357, 32386, 32416, 32445, 32475, 32504, 32534, 32563, 32593, 32622, 32652, 32681, 32711,\n 32740, 32770, 32799, 32829, 32858, 32888, 32917, 32947, 32976, 33006, 33035, 33065, 33094, 33124, 33153, 33183, 33213, 33243,\n 33272, 33302, 33331, 33361, 33390, 33420, 33450, 33479, 33509, 33539, 33568, 33598, 33627, 33657, 33686, 33716, 33745, 33775,\n 33804, 33834, 33863, 33893, 33922, 33952, 33981, 34011, 34040, 34069, 34099, 34128, 34158, 34187, 34217, 34247, 34277, 34306,\n 34336, 34365, 34395, 34424, 34454, 34483, 34512, 34542, 34571, 34601, 34631, 34660, 34690, 34719, 34749, 34778, 34808, 34837,\n 34867, 34896, 34926, 34955, 34985, 35015, 35044, 35074, 35103, 35133, 35162, 35192, 35222, 35251, 35280, 35310, 35340, 35370,\n 35399, 35429, 35458, 35488, 35517, 35547, 35576, 35605, 35635, 35665, 35694, 35723, 35753, 35782, 35811, 35841, 35871, 35901,\n 35930, 35960, 35989, 36019, 36048, 36078, 36107, 36136, 36166, 36195, 36225, 36254, 36284, 36314, 36343, 36373, 36403, 36433,\n 36462, 36492, 36521, 36551, 36580, 36610, 36639, 36669, 36698, 36728, 36757, 36786, 36816, 36845, 36875, 36904, 36934, 36963,\n 36993, 37022, 37052, 37081, 37111, 37141, 37170, 37200, 37229, 37259, 37288, 37318, 37347, 37377, 37406, 37436, 37465, 37495,\n 37524, 37554, 37584, 37613, 37643, 37672, 37701, 37731, 37760, 37790, 37819, 37849, 37878, 37908, 37938, 37967, 37997, 38027,\n 38056, 38085, 38115, 38144, 38174, 38203, 38233, 38262, 38292, 38322, 38351, 38381, 38410, 38440, 38469, 38499, 38528, 38558,\n 38587, 38617, 38646, 38676, 38705, 38735, 38764, 38794, 38823, 38853, 38882, 38912, 38941, 38971, 39001, 39030, 39059, 39089,\n 39118, 39148, 39178, 39208, 39237, 39267, 39297, 39326, 39355, 39385, 39414, 39444, 39473, 39503, 39532, 39562, 39592, 39621,\n 39650, 39680, 39709, 39739, 39768, 39798, 39827, 39857, 39886, 39916, 39946, 39975, 40005, 40035, 40064, 40094, 40123, 40153,\n 40182, 40212, 40241, 40271, 40300, 40330, 40359, 40389, 40418, 40448, 40477, 40507, 40536, 40566, 40595, 40625, 40655, 40685,\n 40714, 40744, 40773, 40803, 40832, 40862, 40892, 40921, 40951, 40980, 41009, 41039, 41068, 41098, 41127, 41157, 41186, 41216,\n 41245, 41275, 41304, 41334, 41364, 41393, 41422, 41452, 41481, 41511, 41540, 41570, 41599, 41629, 41658, 41688, 41718, 41748,\n 41777, 41807, 41836, 41865, 41894, 41924, 41953, 41983, 42012, 42042, 42072, 42102, 42131, 42161, 42190, 42220, 42249, 42279,\n 42308, 42337, 42367, 42397, 42426, 42456, 42485, 42515, 42545, 42574, 42604, 42633, 42662, 42692, 42721, 42751, 42780, 42810,\n 42839, 42869, 42899, 42929, 42958, 42988, 43017, 43046, 43076, 43105, 43135, 43164, 43194, 43223, 43253, 43283, 43312, 43342,\n 43371, 43401, 43430, 43460, 43489, 43519, 43548, 43578, 43607, 43637, 43666, 43696, 43726, 43755, 43785, 43814, 43844, 43873,\n 43903, 43932, 43962, 43991, 44021, 44050, 44080, 44109, 44139, 44169, 44198, 44228, 44258, 44287, 44317, 44346, 44375, 44405,\n 44434, 44464, 44493, 44523, 44553, 44582, 44612, 44641, 44671, 44700, 44730, 44759, 44788, 44818, 44847, 44877, 44906, 44936,\n 44966, 44996, 45025, 45055, 45084, 45114, 45143, 45172, 45202, 45231, 45261, 45290, 45320, 45350, 45380, 45409, 45439, 45468,\n 45498, 45527, 45556, 45586, 45615, 45644, 45674, 45704, 45733, 45763, 45793, 45823, 45852, 45882, 45911, 45940, 45970, 45999,\n 46028, 46058, 46088, 46117, 46147, 46177, 46206, 46236, 46265, 46295, 46324, 46354, 46383, 46413, 46442, 46472, 46501, 46531,\n 46560, 46590, 46620, 46649, 46679, 46708, 46738, 46767, 46797, 46826, 46856, 46885, 46915, 46944, 46974, 47003, 47033, 47063,\n 47092, 47122, 47151, 47181, 47210, 47240, 47269, 47298, 47328, 47357, 47387, 47417, 47446, 47476, 47506, 47535, 47565, 47594,\n 47624, 47653, 47682, 47712, 47741, 47771, 47800, 47830, 47860, 47890, 47919, 47949, 47978, 48008, 48037, 48066, 48096, 48125,\n 48155, 48184, 48214, 48244, 48273, 48303, 48333, 48362, 48392, 48421, 48450, 48480, 48509, 48538, 48568, 48598, 48627, 48657,\n 48687, 48717, 48746, 48776, 48805, 48834, 48864, 48893, 48922, 48952, 48982, 49011, 49041, 49071, 49100, 49130, 49160, 49189,\n 49218, 49248, 49277, 49306, 49336, 49365, 49395, 49425, 49455, 49484, 49514, 49543, 49573, 49602, 49632, 49661, 49690, 49720,\n 49749, 49779, 49809, 49838, 49868, 49898, 49927, 49957, 49986, 50016, 50045, 50075, 50104, 50133, 50163, 50192, 50222, 50252,\n 50281, 50311, 50340, 50370, 50400, 50429, 50459, 50488, 50518, 50547, 50576, 50606, 50635, 50665, 50694, 50724, 50754, 50784,\n 50813, 50843, 50872, 50902, 50931, 50960, 50990, 51019, 51049, 51078, 51108, 51138, 51167, 51197, 51227, 51256, 51286, 51315,\n 51345, 51374, 51403, 51433, 51462, 51492, 51522, 51552, 51582, 51611, 51641, 51670, 51699, 51729, 51758, 51787, 51816, 51846,\n 51876, 51906, 51936, 51965, 51995, 52025, 52054, 52083, 52113, 52142, 52171, 52200, 52230, 52260, 52290, 52319, 52349, 52379,\n 52408, 52438, 52467, 52497, 52526, 52555, 52585, 52614, 52644, 52673, 52703, 52733, 52762, 52792, 52822, 52851, 52881, 52910,\n 52939, 52969, 52998, 53028, 53057, 53087, 53116, 53146, 53176, 53205, 53235, 53264, 53294, 53324, 53353, 53383, 53412, 53441,\n 53471, 53500, 53530, 53559, 53589, 53619, 53648, 53678, 53708, 53737, 53767, 53796, 53825, 53855, 53884, 53913, 53943, 53973,\n 54003, 54032, 54062, 54092, 54121, 54151, 54180, 54209, 54239, 54268, 54297, 54327, 54357, 54387, 54416, 54446, 54476, 54505,\n 54535, 54564, 54593, 54623, 54652, 54681, 54711, 54741, 54770, 54800, 54830, 54859, 54889, 54919, 54948, 54977, 55007, 55036,\n 55066, 55095, 55125, 55154, 55184, 55213, 55243, 55273, 55302, 55332, 55361, 55391, 55420, 55450, 55479, 55508, 55538, 55567,\n 55597, 55627, 55657, 55686, 55716, 55745, 55775, 55804, 55834, 55863, 55892, 55922, 55951, 55981, 56011, 56040, 56070, 56100,\n 56129, 56159, 56188, 56218, 56247, 56276, 56306, 56335, 56365, 56394, 56424, 56454, 56483, 56513, 56543, 56572, 56601, 56631,\n 56660, 56690, 56719, 56749, 56778, 56808, 56837, 56867, 56897, 56926, 56956, 56985, 57015, 57044, 57074, 57103, 57133, 57162,\n 57192, 57221, 57251, 57280, 57310, 57340, 57369, 57399, 57429, 57458, 57487, 57517, 57546, 57576, 57605, 57634, 57664, 57694,\n 57723, 57753, 57783, 57813, 57842, 57871, 57901, 57930, 57959, 57989, 58018, 58048, 58077, 58107, 58137, 58167, 58196, 58226,\n 58255, 58285, 58314, 58343, 58373, 58402, 58432, 58461, 58491, 58521, 58551, 58580, 58610, 58639, 58669, 58698, 58727, 58757,\n 58786, 58816, 58845, 58875, 58905, 58934, 58964, 58994, 59023, 59053, 59082, 59111, 59141, 59170, 59200, 59229, 59259, 59288,\n 59318, 59348, 59377, 59407, 59436, 59466, 59495, 59525, 59554, 59584, 59613, 59643, 59672, 59702, 59731, 59761, 59791, 59820,\n 59850, 59879, 59909, 59939, 59968, 59997, 60027, 60056, 60086, 60115, 60145, 60174, 60204, 60234, 60264, 60293, 60323, 60352,\n 60381, 60411, 60440, 60469, 60499, 60528, 60558, 60588, 60618, 60648, 60677, 60707, 60736, 60765, 60795, 60824, 60853, 60883,\n 60912, 60942, 60972, 61002, 61031, 61061, 61090, 61120, 61149, 61179, 61208, 61237, 61267, 61296, 61326, 61356, 61385, 61415,\n 61445, 61474, 61504, 61533, 61563, 61592, 61621, 61651, 61680, 61710, 61739, 61769, 61799, 61828, 61858, 61888, 61917, 61947,\n 61976, 62006, 62035, 62064, 62094, 62123, 62153, 62182, 62212, 62242, 62271, 62301, 62331, 62360, 62390, 62419, 62448, 62478,\n 62507, 62537, 62566, 62596, 62625, 62655, 62685, 62715, 62744, 62774, 62803, 62832, 62862, 62891, 62921, 62950, 62980, 63009,\n 63039, 63069, 63099, 63128, 63157, 63187, 63216, 63246, 63275, 63305, 63334, 63363, 63393, 63423, 63453, 63482, 63512, 63541,\n 63571, 63600, 63630, 63659, 63689, 63718, 63747, 63777, 63807, 63836, 63866, 63895, 63925, 63955, 63984, 64014, 64043, 64073,\n 64102, 64131, 64161, 64190, 64220, 64249, 64279, 64309, 64339, 64368, 64398, 64427, 64457, 64486, 64515, 64545, 64574, 64603,\n 64633, 64663, 64692, 64722, 64752, 64782, 64811, 64841, 64870, 64899, 64929, 64958, 64987, 65017, 65047, 65076, 65106, 65136,\n 65166, 65195, 65225, 65254, 65283, 65313, 65342, 65371, 65401, 65431, 65460, 65490, 65520, 65549, 65579, 65608, 65638, 65667,\n 65697, 65726, 65755, 65785, 65815, 65844, 65874, 65903, 65933, 65963, 65992, 66022, 66051, 66081, 66110, 66140, 66169, 66199,\n 66228, 66258, 66287, 66317, 66346, 66376, 66405, 66435, 66465, 66494, 66524, 66553, 66583, 66612, 66641, 66671, 66700, 66730,\n 66760, 66789, 66819, 66849, 66878, 66908, 66937, 66967, 66996, 67025, 67055, 67084, 67114, 67143, 67173, 67203, 67233, 67262,\n 67292, 67321, 67351, 67380, 67409, 67439, 67468, 67497, 67527, 67557, 67587, 67617, 67646, 67676, 67705, 67735, 67764, 67793,\n 67823, 67852, 67882, 67911, 67941, 67971, 68000, 68030, 68060, 68089, 68119, 68148, 68177, 68207, 68236, 68266, 68295, 68325,\n 68354, 68384, 68414, 68443, 68473, 68502, 68532, 68561, 68591, 68620, 68650, 68679, 68708, 68738, 68768, 68797, 68827, 68857,\n 68886, 68916, 68946, 68975, 69004, 69034, 69063, 69092, 69122, 69152, 69181, 69211, 69240, 69270, 69300, 69330, 69359, 69388,\n 69418, 69447, 69476, 69506, 69535, 69565, 69595, 69624, 69654, 69684, 69713, 69743, 69772, 69802, 69831, 69861, 69890, 69919,\n 69949, 69978, 70008, 70038, 70067, 70097, 70126, 70156, 70186, 70215, 70245, 70274, 70303, 70333, 70362, 70392, 70421, 70451,\n 70481, 70510, 70540, 70570, 70599, 70629, 70658, 70687, 70717, 70746, 70776, 70805, 70835, 70864, 70894, 70924, 70954, 70983,\n 71013, 71042, 71071, 71101, 71130, 71159, 71189, 71218, 71248, 71278, 71308, 71337, 71367, 71397, 71426, 71455, 71485, 71514,\n 71543, 71573, 71602, 71632, 71662, 71691, 71721, 71751, 71781, 71810, 71839, 71869, 71898, 71927, 71957, 71986, 72016, 72046,\n 72075, 72105, 72135, 72164, 72194, 72223, 72253, 72282, 72311, 72341, 72370, 72400, 72429, 72459, 72489, 72518, 72548, 72577,\n 72607, 72637, 72666, 72695, 72725, 72754, 72784, 72813, 72843, 72872, 72902, 72931, 72961, 72991, 73020, 73050, 73080, 73109,\n 73139, 73168, 73197, 73227, 73256, 73286, 73315, 73345, 73375, 73404, 73434, 73464, 73493, 73523, 73552, 73581, 73611, 73640,\n 73669, 73699, 73729, 73758, 73788, 73818, 73848, 73877, 73907, 73936, 73965, 73995, 74024, 74053, 74083, 74113, 74142, 74172,\n 74202, 74231, 74261, 74291, 74320, 74349, 74379, 74408, 74437, 74467, 74497, 74526, 74556, 74586, 74615, 74645, 74675, 74704,\n 74733, 74763, 74792, 74822, 74851, 74881, 74910, 74940, 74969, 74999, 75029, 75058, 75088, 75117, 75147, 75176, 75206, 75235,\n 75264, 75294, 75323, 75353, 75383, 75412, 75442, 75472, 75501, 75531, 75560, 75590, 75619, 75648, 75678, 75707, 75737, 75766,\n 75796, 75826, 75856, 75885, 75915, 75944, 75974, 76003, 76032, 76062, 76091, 76121, 76150, 76180, 76210, 76239, 76269, 76299,\n 76328, 76358, 76387, 76416, 76446, 76475, 76505, 76534, 76564, 76593, 76623, 76653, 76682, 76712, 76741, 76771, 76801, 76830,\n 76859, 76889, 76918, 76948, 76977, 77007, 77036, 77066, 77096, 77125, 77155, 77185, 77214, 77243, 77273, 77302, 77332, 77361,\n 77390, 77420, 77450, 77479, 77509, 77539, 77569, 77598, 77627, 77657, 77686, 77715, 77745, 77774, 77804, 77833, 77863, 77893,\n 77923, 77952, 77982, 78011, 78041, 78070, 78099, 78129, 78158, 78188, 78217, 78247, 78277, 78307, 78336, 78366, 78395, 78425,\n 78454, 78483, 78513, 78542, 78572, 78601, 78631, 78661, 78690, 78720, 78750, 78779, 78808, 78838, 78867, 78897, 78926, 78956,\n 78985, 79015, 79044, 79074, 79104, 79133, 79163, 79192, 79222, 79251, 79281, 79310, 79340, 79369, 79399, 79428, 79458, 79487,\n 79517, 79546, 79576, 79606, 79635, 79665, 79695, 79724, 79753, 79783, 79812, 79841, 79871, 79900, 79930, 79960, 79990\n ];\n /**\n *\n * @param {Date} gDate ?\n * @returns {Object} ?\n */\n function getHijriDate(gDate) {\n var day = gDate.getDate();\n var month = gDate.getMonth();\n var year = gDate.getFullYear();\n var tMonth = month + 1;\n var tYear = year;\n if (tMonth < 3) {\n tYear -= 1;\n tMonth += 12;\n }\n var yPrefix = Math.floor(tYear / 100.);\n var julilanOffset = yPrefix - Math.floor(yPrefix / 4.) - 2;\n var julianNumber = Math.floor(365.25 * (tYear + 4716)) + Math.floor(30.6001 * (tMonth + 1)) + day - julilanOffset - 1524;\n yPrefix = Math.floor((julianNumber - 1867216.25) / 36524.25);\n julilanOffset = yPrefix - Math.floor(yPrefix / 4.) + 1;\n var b = julianNumber + julilanOffset + 1524;\n var c = Math.floor((b - 122.1) / 365.25);\n var d = Math.floor(365.25 * c);\n var tempMonth = Math.floor((b - d) / 30.6001);\n day = (b - d) - Math.floor(30.6001 * tempMonth);\n month = Math.floor((b - d) / 20.6001);\n if (month > 13) {\n c += 1;\n month -= 12;\n }\n month -= 1;\n year = c - 4716;\n var modifiedJulianDate = julianNumber - 2400000;\n // date calculation for year after 2077\n var iyear = 10631. / 30.;\n var z = julianNumber - 1948084;\n var cyc = Math.floor(z / 10631.);\n z = z - 10631 * cyc;\n var j = Math.floor((z - 0.1335) / iyear);\n var iy = 30 * cyc + j;\n z = z - Math.floor(j * iyear + 0.1335);\n var im = Math.floor((z + 28.5001) / 29.5);\n /* istanbul ignore next */\n if (im === 13) {\n im = 12;\n }\n var tempDay = z - Math.floor(29.5001 * im - 29);\n var i = 0;\n for (; i < dateCorrection.length; i++) {\n if (dateCorrection[parseInt(i.toString(), 10)] > modifiedJulianDate) {\n break;\n }\n }\n var iln = i + 16260;\n var ii = Math.floor((iln - 1) / 12);\n var hYear = ii + 1;\n var hmonth = iln - 12 * ii;\n var hDate = modifiedJulianDate - dateCorrection[i - 1] + 1;\n if ((hDate + '').length > 2) {\n hDate = tempDay;\n hmonth = im;\n hYear = iy;\n }\n return { year: hYear, month: hmonth, date: hDate };\n }\n HijriParser.getHijriDate = getHijriDate;\n /**\n *\n * @param {number} year ?\n * @param {number} month ?\n * @param {number} day ?\n * @returns {Date} ?\n */\n function toGregorian(year, month, day) {\n var iy = year;\n var im = month;\n var id = day;\n var ii = iy - 1;\n var iln = (ii * 12) + 1 + (im - 1);\n var i = iln - 16260;\n var mcjdn = id + dateCorrection[i - 1] - 1;\n var julianDate = mcjdn + 2400000;\n var z = Math.floor(julianDate + 0.5);\n var a = Math.floor((z - 1867216.25) / 36524.25);\n a = z + 1 + a - Math.floor(a / 4);\n var b = a + 1524;\n var c = Math.floor((b - 122.1) / 365.25);\n var d = Math.floor(365.25 * c);\n var e = Math.floor((b - d) / 30.6001);\n var gDay = b - d - Math.floor(e * 30.6001);\n var gMonth = e - (e > 13.5 ? 13 : 1);\n var gYear = c - (gMonth > 2.5 ? 4716 : 4715);\n /* istanbul ignore next */\n if (gYear <= 0) {\n gMonth--;\n } // No year zero\n return new Date(gYear + '/' + (gMonth) + '/' + gDay);\n }\n HijriParser.toGregorian = toGregorian;\n})(HijriParser || (HijriParser = {}));\n","import { ParserBase as parser } from './parser-base';\nimport { IntlBase as base } from './intl-base';\nimport { isUndefined, throwError, getValue, isBlazor } from '../util';\nimport { HijriParser } from '../hijri-parser';\nimport { isNullOrUndefined, extend } from '../util';\nvar abbreviateRegexGlobal = /\\/MMMMM|MMMM|MMM|a|LLLL|LLL|EEEEE|EEEE|E|K|cccc|ccc|WW|W|G+|z+/gi;\nvar standalone = 'stand-alone';\nvar weekdayKey = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];\nexport var basicPatterns = ['short', 'medium', 'long', 'full'];\nvar timeSetter = {\n m: 'getMinutes',\n h: 'getHours',\n H: 'getHours',\n s: 'getSeconds',\n d: 'getDate',\n f: 'getMilliseconds'\n};\nexport var datePartMatcher = {\n 'M': 'month',\n 'd': 'day',\n 'E': 'weekday',\n 'c': 'weekday',\n 'y': 'year',\n 'm': 'minute',\n 'h': 'hour',\n 'H': 'hour',\n 's': 'second',\n 'L': 'month',\n 'a': 'designator',\n 'z': 'timeZone',\n 'Z': 'timeZone',\n 'G': 'era',\n 'f': 'milliseconds'\n};\nvar timeSeparator = 'timeSeparator';\n/* tslint:disable no-any */\n/**\n * Date Format is a framework provides support for date formatting.\n *\n * @private\n */\nvar DateFormat = /** @class */ (function () {\n function DateFormat() {\n }\n /**\n * Returns the formatter function for given skeleton.\n *\n * @param {string} culture - Specifies the culture name to be which formatting.\n * @param {DateFormatOptions} option - Specific the format in which date will format.\n * @param {Object} cldr - Specifies the global cldr data collection.\n * @returns {Function} ?\n */\n DateFormat.dateFormat = function (culture, option, cldr) {\n var _this = this;\n var dependable = base.getDependables(cldr, culture, option.calendar);\n var numObject = getValue('parserObject.numbers', dependable);\n var dateObject = dependable.dateObject;\n var formatOptions = { isIslamic: base.islamicRegex.test(option.calendar) };\n if (isBlazor() && option.isServerRendered) {\n option = base.compareBlazorDateFormats(option, culture);\n }\n var resPattern = option.format ||\n base.getResultantPattern(option.skeleton, dependable.dateObject, option.type, false, isBlazor() ? culture : '');\n formatOptions.dateSeperator = isBlazor() ? getValue('dateSeperator', dateObject) : base.getDateSeparator(dependable.dateObject);\n if (isUndefined(resPattern)) {\n throwError('Format options or type given must be invalid');\n }\n else {\n resPattern = base.ConvertDateToWeekFormat(resPattern);\n if (isBlazor()) {\n resPattern = resPattern.replace(/tt/, 'a');\n }\n formatOptions.pattern = resPattern;\n formatOptions.numMapper = isBlazor() ?\n extend({}, numObject) : parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr));\n var patternMatch = resPattern.match(abbreviateRegexGlobal) || [];\n for (var _i = 0, patternMatch_1 = patternMatch; _i < patternMatch_1.length; _i++) {\n var str = patternMatch_1[_i];\n var len = str.length;\n var char = str[0];\n if (char === 'K') {\n char = 'h';\n }\n switch (char) {\n case 'E':\n case 'c':\n if (isBlazor()) {\n // eslint-disable-next-line\n formatOptions.weekday = getValue('days.' + base.monthIndex[len], dateObject);\n }\n else {\n // eslint-disable-next-line\n formatOptions.weekday = dependable.dateObject[base.days][standalone][base.monthIndex[len]];\n }\n break;\n case 'M':\n case 'L':\n if (isBlazor()) {\n // eslint-disable-next-line\n formatOptions.month = getValue('months.' + base.monthIndex[len], dateObject);\n }\n else {\n // eslint-disable-next-line\n formatOptions.month = dependable.dateObject[base.month][standalone][base.monthIndex[len]];\n }\n break;\n case 'a':\n formatOptions.designator = isBlazor() ?\n getValue('dayPeriods', dateObject) : getValue('dayPeriods.format.wide', dateObject);\n break;\n case 'G':\n // eslint-disable-next-line\n var eText = (len <= 3) ? 'eraAbbr' : (len === 4) ? 'eraNames' : 'eraNarrow';\n formatOptions.era = isBlazor() ? getValue('eras', dateObject) : getValue('eras.' + eText, dependable.dateObject);\n break;\n case 'z':\n formatOptions.timeZone = getValue('dates.timeZoneNames', dependable.parserObject);\n break;\n }\n }\n }\n return function (value) {\n if (isNaN(value.getDate())) {\n return null;\n }\n return _this.intDateFormatter(value, formatOptions);\n };\n };\n /**\n * Returns formatted date string based on options passed.\n *\n * @param {Date} value ?\n * @param {FormatOptions} options ?\n * @returns {string} ?\n */\n DateFormat.intDateFormatter = function (value, options) {\n var pattern = options.pattern;\n var ret = '';\n var matches = pattern.match(base.dateParseRegex);\n var dObject = this.getCurrentDateValue(value, options.isIslamic);\n for (var _i = 0, matches_1 = matches; _i < matches_1.length; _i++) {\n var match = matches_1[_i];\n var length_1 = match.length;\n var char = match[0];\n if (char === 'K') {\n char = 'h';\n }\n var curval = void 0;\n var curvalstr = '';\n var isNumber = void 0;\n var processNumber = void 0;\n var curstr = '';\n switch (char) {\n case 'M':\n case 'L':\n curval = dObject.month;\n if (length_1 > 2) {\n // eslint-disable-next-line\n ret += options.month[curval];\n }\n else {\n isNumber = true;\n }\n break;\n case 'E':\n case 'c':\n // eslint-disable-next-line\n ret += options.weekday[weekdayKey[value.getDay()]];\n break;\n case 'H':\n case 'h':\n case 'm':\n case 's':\n case 'd':\n case 'f':\n isNumber = true;\n if (char === 'd') {\n curval = dObject.date;\n }\n else if (char === 'f') {\n isNumber = false;\n processNumber = true;\n // eslint-disable-next-line\n curvalstr = value[timeSetter[char]]().toString();\n curvalstr = curvalstr.substring(0, length_1);\n var curlength = curvalstr.length;\n if (length_1 !== curlength) {\n if (length_1 > 3) {\n continue;\n }\n for (var i = 0; i < length_1 - curlength; i++) {\n curvalstr = '0' + curvalstr.toString();\n }\n }\n curstr += curvalstr;\n }\n else {\n // eslint-disable-next-line\n curval = value[timeSetter[char]]();\n }\n if (char === 'h') {\n curval = curval % 12 || 12;\n }\n break;\n case 'y':\n processNumber = true;\n curstr += dObject.year;\n if (length_1 === 2) {\n curstr = curstr.substr(curstr.length - 2);\n }\n break;\n case 'a':\n // eslint-disable-next-line\n var desig = value.getHours() < 12 ? 'am' : 'pm';\n // eslint-disable-next-line\n ret += options.designator[desig];\n break;\n case 'G':\n // eslint-disable-next-line\n var dec = value.getFullYear() < 0 ? 0 : 1;\n // eslint-disable-next-line\n var retu = options.era[dec];\n if (isNullOrUndefined(retu)) {\n // eslint-disable-next-line\n retu = options.era[dec ? 0 : 1];\n }\n ret += retu || '';\n break;\n case '\\'':\n ret += (match === '\\'\\'') ? '\\'' : match.replace(/'/g, '');\n break;\n case 'z':\n // eslint-disable-next-line\n var timezone = value.getTimezoneOffset();\n // eslint-disable-next-line\n var pattern_1 = (length_1 < 4) ? '+H;-H' : options.timeZone.hourFormat;\n pattern_1 = pattern_1.replace(/:/g, options.numMapper.timeSeparator);\n if (timezone === 0) {\n ret += options.timeZone.gmtZeroFormat;\n }\n else {\n processNumber = true;\n curstr = this.getTimeZoneValue(timezone, pattern_1);\n }\n curstr = options.timeZone.gmtFormat.replace(/\\{0\\}/, curstr);\n break;\n case ':':\n // eslint-disable-next-line\n ret += options.numMapper.numberSymbols[timeSeparator];\n break;\n case '/':\n ret += options.dateSeperator;\n break;\n case 'W':\n isNumber = true;\n curval = base.getWeekOfYear(value);\n break;\n default:\n ret += match;\n }\n if (isNumber) {\n processNumber = true;\n curstr = this.checkTwodigitNumber(curval, length_1);\n }\n if (processNumber) {\n ret += parser.convertValueParts(curstr, base.latnParseRegex, options.numMapper.mapper);\n }\n }\n return ret;\n };\n DateFormat.getCurrentDateValue = function (value, isIslamic) {\n if (isIslamic) {\n return HijriParser.getHijriDate(value);\n }\n return { year: value.getFullYear(), month: value.getMonth() + 1, date: value.getDate() };\n };\n /**\n * Returns two digit numbers for given value and length\n *\n * @param {number} val ?\n * @param {number} len ?\n * @returns {string} ?\n */\n DateFormat.checkTwodigitNumber = function (val, len) {\n var ret = val + '';\n if (len === 2 && ret.length !== 2) {\n return '0' + ret;\n }\n return ret;\n };\n /**\n * Returns the value of the Time Zone.\n *\n * @param {number} tVal ?\n * @param {string} pattern ?\n * @returns {string} ?\n * @private\n */\n DateFormat.getTimeZoneValue = function (tVal, pattern) {\n var _this = this;\n var splt = pattern.split(';');\n var curPattern = splt[tVal > 0 ? 1 : 0];\n var no = Math.abs(tVal);\n return curPattern = curPattern.replace(/HH?|mm/g, function (str) {\n var len = str.length;\n var ishour = str.indexOf('H') !== -1;\n return _this.checkTwodigitNumber(Math.floor(ishour ? (no / 60) : (no % 60)), len);\n });\n };\n return DateFormat;\n}());\nexport { DateFormat };\n","import { isUndefined, throwError, isNullOrUndefined, extend, isBlazor, getValue } from '../util';\nimport { defaultCurrencyCode } from '../internationalization';\nimport { IntlBase as base } from './intl-base';\nimport { ParserBase as parser } from './parser-base';\nvar errorText = {\n 'ms': 'minimumSignificantDigits',\n 'ls': 'maximumSignificantDigits',\n 'mf': 'minimumFractionDigits',\n 'lf': 'maximumFractionDigits'\n};\nvar integerError = 'minimumIntegerDigits';\nvar percentSign = 'percentSign';\nvar minusSign = 'minusSign';\nvar spaceRegex = /\\s/;\nvar mapper = ['infinity', 'nan', 'group', 'decimal', 'exponential'];\nvar infinity = 'infinity';\nvar nan = 'nan';\n/**\n * Module for number formatting.\n *\n * @private\n */\nvar NumberFormat = /** @class */ (function () {\n function NumberFormat() {\n }\n /**\n * Returns the formatter function for given skeleton.\n *\n * @param {string} culture - Specifies the culture name to be which formatting.\n * @param {NumberFormatOptions} option - Specific the format in which number will format.\n * @param {Object} cldr - Specifies the global cldr data collection.\n * @returns {Function} ?\n */\n NumberFormat.numberFormatter = function (culture, option, cldr) {\n var _this = this;\n var fOptions = extend({}, option);\n var cOptions = {};\n var dOptions = {};\n var symbolPattern;\n var dependable = base.getDependables(cldr, culture, '', true);\n var numObject = dependable.numericObject;\n dOptions.numberMapper = isBlazor() ? extend({}, numObject) :\n parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr), true);\n dOptions.currencySymbol = isBlazor() ? getValue('currencySymbol', numObject) : base.getCurrencySymbol(dependable.numericObject, fOptions.currency || defaultCurrencyCode, option.altSymbol);\n /* eslint-disable @typescript-eslint/no-explicit-any */\n dOptions.percentSymbol = isBlazor() ? getValue('numberSymbols.percentSign', numObject) :\n dOptions.numberMapper.numberSymbols[\"\" + percentSign];\n dOptions.minusSymbol = isBlazor() ? getValue('numberSymbols.minusSign', numObject) :\n dOptions.numberMapper.numberSymbols[\"\" + minusSign];\n var symbols = dOptions.numberMapper.numberSymbols;\n if ((option.format) && !(base.formatRegex.test(option.format))) {\n cOptions = base.customFormat(option.format, dOptions, dependable.numericObject);\n }\n else {\n extend(fOptions, base.getProperNumericSkeleton(option.format || 'N'));\n fOptions.isCurrency = fOptions.type === 'currency';\n fOptions.isPercent = fOptions.type === 'percent';\n if (!isBlazor()) {\n symbolPattern = base.getSymbolPattern(fOptions.type, dOptions.numberMapper.numberSystem, dependable.numericObject, fOptions.isAccount);\n }\n fOptions.groupOne = this.checkValueRange(fOptions.maximumSignificantDigits, fOptions.minimumSignificantDigits, true);\n this.checkValueRange(fOptions.maximumFractionDigits, fOptions.minimumFractionDigits, false, true);\n if (!isUndefined(fOptions.fractionDigits)) {\n fOptions.minimumFractionDigits = fOptions.maximumFractionDigits = fOptions.fractionDigits;\n }\n if (isUndefined(fOptions.useGrouping)) {\n fOptions.useGrouping = true;\n }\n if (fOptions.isCurrency && !isBlazor()) {\n symbolPattern = symbolPattern.replace(/\\u00A4/g, base.defaultCurrency);\n }\n if (!isBlazor()) {\n var split = symbolPattern.split(';');\n cOptions.nData = base.getFormatData(split[1] || '-' + split[0], true, dOptions.currencySymbol);\n cOptions.pData = base.getFormatData(split[0], false, dOptions.currencySymbol);\n if (fOptions.useGrouping) {\n fOptions.groupSeparator = symbols[mapper[2]];\n fOptions.groupData = this.getGroupingDetails(split[0]);\n }\n }\n else {\n cOptions.nData = extend({}, {}, getValue(fOptions.type + 'nData', numObject));\n cOptions.pData = extend({}, {}, getValue(fOptions.type + 'pData', numObject));\n if (fOptions.type === 'currency' && option.currency) {\n base.replaceBlazorCurrency([cOptions.pData, cOptions.nData], dOptions.currencySymbol, option.currency);\n }\n }\n var minFrac = isUndefined(fOptions.minimumFractionDigits);\n if (minFrac) {\n fOptions.minimumFractionDigits = cOptions.nData.minimumFraction;\n }\n if (isUndefined(fOptions.maximumFractionDigits)) {\n var mval = cOptions.nData.maximumFraction;\n fOptions.maximumFractionDigits = isUndefined(mval) && fOptions.isPercent ? 0 : mval;\n }\n var mfrac = fOptions.minimumFractionDigits;\n var lfrac = fOptions.maximumFractionDigits;\n if (!isUndefined(mfrac) && !isUndefined(lfrac)) {\n if (mfrac > lfrac) {\n fOptions.maximumFractionDigits = mfrac;\n }\n }\n }\n extend(cOptions.nData, fOptions);\n extend(cOptions.pData, fOptions);\n return function (value) {\n if (isNaN(value)) {\n return symbols[mapper[1]];\n }\n else if (!isFinite(value)) {\n return symbols[mapper[0]];\n }\n return _this.intNumberFormatter(value, cOptions, dOptions);\n };\n };\n /**\n * Returns grouping details for the pattern provided\n *\n * @param {string} pattern ?\n * @returns {GroupDetails} ?\n */\n NumberFormat.getGroupingDetails = function (pattern) {\n var ret = {};\n var match = pattern.match(base.negativeDataRegex);\n if (match && match[4]) {\n var pattern_1 = match[4];\n var p = pattern_1.lastIndexOf(',');\n if (p !== -1) {\n var temp = pattern_1.split('.')[0];\n ret.primary = (temp.length - p) - 1;\n var s = pattern_1.lastIndexOf(',', p - 1);\n if (s !== -1) {\n ret.secondary = p - 1 - s;\n }\n }\n }\n return ret;\n };\n /**\n * Returns if the provided integer range is valid.\n *\n * @param {number} val1 ?\n * @param {number} val2 ?\n * @param {boolean} checkbothExist ?\n * @param {boolean} isFraction ?\n * @returns {boolean} ?\n */\n NumberFormat.checkValueRange = function (val1, val2, checkbothExist, isFraction) {\n var decide = isFraction ? 'f' : 's';\n var dint = 0;\n var str1 = errorText['l' + decide];\n // eslint-disable-next-line\n var str2 = errorText['m' + decide];\n if (!isUndefined(val1)) {\n this.checkRange(val1, str1, isFraction);\n dint++;\n }\n if (!isUndefined(val2)) {\n this.checkRange(val2, str2, isFraction);\n dint++;\n }\n if (dint === 2) {\n if (val1 < val2) {\n throwError(str2 + 'specified must be less than the' + str1);\n }\n else {\n return true;\n }\n }\n else if (checkbothExist && dint === 1) {\n throwError('Both' + str2 + 'and' + str2 + 'must be present');\n }\n return false;\n };\n /**\n * Check if the provided fraction range is valid\n *\n * @param {number} val ?\n * @param {string} text ?\n * @param {boolean} isFraction ?\n * @returns {void} ?\n */\n NumberFormat.checkRange = function (val, text, isFraction) {\n var range = isFraction ? [0, 20] : [1, 21];\n if (val < range[0] || val > range[1]) {\n throwError(text + 'value must be within the range' + range[0] + 'to' + range[1]);\n }\n };\n /**\n * Returns formatted numeric string for provided formatting options\n *\n * @param {number} value ?\n * @param {base.GenericFormatOptions} fOptions ?\n * @param {CommonOptions} dOptions ?\n * @returns {string} ?\n */\n NumberFormat.intNumberFormatter = function (value, fOptions, dOptions) {\n var curData;\n if (isUndefined(fOptions.nData.type)) {\n return undefined;\n }\n else {\n if (value < 0) {\n value = value * -1;\n curData = fOptions.nData;\n }\n else if (value === 0) {\n curData = fOptions.zeroData || fOptions.pData;\n }\n else {\n curData = fOptions.pData;\n }\n var fValue = '';\n if (curData.isPercent) {\n value = value * 100;\n }\n if (curData.groupOne) {\n fValue = this.processSignificantDigits(value, curData.minimumSignificantDigits, curData.maximumSignificantDigits);\n }\n else {\n fValue = this.processFraction(value, curData.minimumFractionDigits, curData.maximumFractionDigits);\n if (curData.minimumIntegerDigits) {\n fValue = this.processMinimumIntegers(fValue, curData.minimumIntegerDigits);\n }\n }\n if (curData.type === 'scientific') {\n fValue = value.toExponential(curData.maximumFractionDigits);\n fValue = fValue.replace('e', dOptions.numberMapper.numberSymbols[mapper[4]]);\n }\n fValue = fValue.replace('.', dOptions.numberMapper.numberSymbols[mapper[3]]);\n fValue = curData.format === \"#,###,,;(#,###,,)\" ? this.customPivotFormat(parseInt(fValue)) : fValue;\n if (curData.useGrouping) {\n /* eslint-disable @typescript-eslint/no-explicit-any */\n fValue = this.groupNumbers(fValue, curData.groupData.primary, curData.groupSeparator || ',', dOptions.numberMapper.numberSymbols[mapper[3]] || '.', curData.groupData.secondary);\n }\n fValue = parser.convertValueParts(fValue, base.latnParseRegex, dOptions.numberMapper.mapper);\n if (curData.nlead === 'N/A') {\n return curData.nlead;\n }\n else {\n return curData.nlead + fValue + curData.nend;\n }\n }\n };\n /**\n * Returns significant digits processed numeric string\n *\n * @param {number} value ?\n * @param {number} min ?\n * @param {number} max ?\n * @returns {string} ?\n */\n NumberFormat.processSignificantDigits = function (value, min, max) {\n var temp = value + '';\n var tn;\n var length = temp.length;\n if (length < min) {\n return value.toPrecision(min);\n }\n else {\n temp = value.toPrecision(max);\n tn = +temp;\n return tn + '';\n }\n };\n /**\n * Returns grouped numeric string\n *\n * @param {string} val ?\n * @param {number} level1 ?\n * @param {string} sep ?\n * @param {string} decimalSymbol ?\n * @param {number} level2 ?\n * @returns {string} ?\n */\n NumberFormat.groupNumbers = function (val, level1, sep, decimalSymbol, level2) {\n var flag = !isNullOrUndefined(level2) && level2 !== 0;\n var split = val.split(decimalSymbol);\n var prefix = split[0];\n var length = prefix.length;\n var str = '';\n while (length > level1) {\n str = prefix.slice(length - level1, length) + (str.length ?\n (sep + str) : '');\n length -= level1;\n if (flag) {\n level1 = level2;\n flag = false;\n }\n }\n split[0] = prefix.slice(0, length) + (str.length ? sep : '') + str;\n return split.join(decimalSymbol);\n };\n /**\n * Returns fraction processed numeric string\n *\n * @param {number} value ?\n * @param {number} min ?\n * @param {number} max ?\n * @returns {string} ?\n */\n NumberFormat.processFraction = function (value, min, max) {\n var temp = (value + '').split('.')[1];\n var length = temp ? temp.length : 0;\n if (min && length < min) {\n var ret = '';\n if (length === 0) {\n ret = value.toFixed(min);\n }\n else {\n ret += value;\n for (var j = 0; j < min - length; j++) {\n ret += '0';\n }\n return ret;\n }\n return value.toFixed(min);\n }\n else if (!isNullOrUndefined(max) && (length > max || max === 0)) {\n return value.toFixed(max);\n }\n return value + '';\n };\n /**\n * Returns integer processed numeric string\n *\n * @param {string} value ?\n * @param {number} min ?\n * @returns {string} ?\n */\n NumberFormat.processMinimumIntegers = function (value, min) {\n var temp = value.split('.');\n var lead = temp[0];\n var len = lead.length;\n if (len < min) {\n for (var i = 0; i < min - len; i++) {\n lead = '0' + lead;\n }\n temp[0] = lead;\n }\n return temp.join('.');\n };\n /**\n * Returns custom format for pivot table\n *\n * @param {number} value ?\n */\n NumberFormat.customPivotFormat = function (value) {\n if (value >= 500000) {\n value /= 1000000;\n var _a = value.toString().split(\".\"), integer = _a[0], decimal = _a[1];\n return decimal && +decimal.substring(0, 1) >= 5\n ? Math.ceil(value).toString()\n : Math.floor(value).toString();\n }\n return \"\";\n };\n return NumberFormat;\n}());\nexport { NumberFormat };\n","import { IntlBase as base } from './intl-base';\nimport { ParserBase as parser } from './parser-base';\nimport { isUndefined, throwError, getValue, isNullOrUndefined, isBlazor } from '../util';\nimport { datePartMatcher } from './date-formatter';\nimport { HijriParser } from '../hijri-parser';\nvar standalone = 'stand-alone';\nvar latnRegex = /^[0-9]*$/;\nvar timeSetter = {\n minute: 'setMinutes',\n hour: 'setHours',\n second: 'setSeconds',\n day: 'setDate',\n month: 'setMonth',\n milliseconds: 'setMilliseconds'\n};\nvar month = 'months';\n/* tslint:disable no-any */\n/**\n * Date Parser.\n *\n * @private\n */\nvar DateParser = /** @class */ (function () {\n function DateParser() {\n }\n /**\n * Returns the parser function for given skeleton.\n *\n * @param {string} culture - Specifies the culture name to be which formatting.\n * @param {DateFormatOptions} option - Specific the format in which string date will be parsed.\n * @param {Object} cldr - Specifies the global cldr data collection.\n * @returns {Function} ?\n */\n DateParser.dateParser = function (culture, option, cldr) {\n var _this = this;\n var dependable = base.getDependables(cldr, culture, option.calendar);\n var numOptions = parser.getCurrentNumericOptions(dependable.parserObject, parser.getNumberingSystem(cldr), false, isBlazor());\n var parseOptions = {};\n if (isBlazor() && option.isServerRendered) {\n option = base.compareBlazorDateFormats(option, culture);\n }\n var resPattern = option.format ||\n base.getResultantPattern(option.skeleton, dependable.dateObject, option.type, false, isBlazor() ? culture : '');\n var regexString = '';\n var hourOnly;\n if (isUndefined(resPattern)) {\n throwError('Format options or type given must be invalid');\n }\n else {\n resPattern = base.ConvertDateToWeekFormat(resPattern);\n parseOptions = { isIslamic: base.islamicRegex.test(option.calendar), pattern: resPattern, evalposition: {}, culture: culture };\n var patternMatch = resPattern.match(base.dateParseRegex) || [];\n var length_1 = patternMatch.length;\n var gmtCorrection = 0;\n var zCorrectTemp = 0;\n var isgmtTraversed = false;\n var nRegx = numOptions.numericRegex;\n // eslint-disable-next-line\n var numMapper = isBlazor() ? dependable.parserObject.numbers :\n parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr));\n for (var i = 0; i < length_1; i++) {\n var str = patternMatch[parseInt(i.toString(), 10)];\n var len = str.length;\n var char = (str[0] === 'K') ? 'h' : str[0];\n var isNumber = void 0;\n var canUpdate = void 0;\n // eslint-disable-next-line\n var charKey = datePartMatcher[char];\n var optional = (len === 2) ? '' : '?';\n if (isgmtTraversed) {\n gmtCorrection = zCorrectTemp;\n isgmtTraversed = false;\n }\n switch (char) {\n case 'E':\n case 'c':\n // eslint-disable-next-line\n var weekData = void 0;\n if (isBlazor()) {\n // eslint-disable-next-line\n weekData = getValue('days.' + base.monthIndex[len], dependable.dateObject);\n }\n else {\n // eslint-disable-next-line\n weekData = dependable.dateObject[base.days][standalone][base.monthIndex[len]];\n }\n // eslint-disable-next-line\n var weekObject = parser.reverseObject(weekData);\n // tslint:enable\n regexString += '(' + Object.keys(weekObject).join('|') + ')';\n break;\n case 'M':\n case 'L':\n case 'd':\n case 'm':\n case 's':\n case 'h':\n case 'H':\n case 'f':\n canUpdate = true;\n if ((char === 'M' || char === 'L') && len > 2) {\n var monthData = void 0;\n if (isBlazor()) {\n // eslint-disable-next-line\n monthData = getValue('months.' + base.monthIndex[len], dependable.dateObject);\n }\n else {\n // eslint-disable-next-line\n monthData = dependable.dateObject[month][standalone][base.monthIndex[len]];\n }\n // eslint-disable-next-line\n parseOptions[charKey] = parser.reverseObject(monthData);\n // eslint-disable-next-line\n regexString += '(' + Object.keys(parseOptions[charKey]).join('|') + ')';\n }\n else if (char === 'f') {\n if (len > 3) {\n continue;\n }\n isNumber = true;\n regexString += '(' + nRegx + nRegx + '?' + nRegx + '?' + ')';\n }\n else {\n isNumber = true;\n regexString += '(' + nRegx + nRegx + optional + ')';\n }\n if (char === 'h') {\n parseOptions.hour12 = true;\n }\n break;\n case 'W':\n // eslint-disable-next-line\n var opt = len === 1 ? '?' : '';\n regexString += '(' + nRegx + opt + nRegx + ')';\n break;\n case 'y':\n canUpdate = isNumber = true;\n if (len === 2) {\n regexString += '(' + nRegx + nRegx + ')';\n }\n else {\n regexString += '(' + nRegx + '{' + len + ',})';\n }\n break;\n case 'a':\n canUpdate = true;\n // eslint-disable-next-line\n var periodValur = isBlazor() ?\n getValue('dayPeriods', dependable.dateObject) :\n getValue('dayPeriods.format.wide', dependable.dateObject);\n // eslint-disable-next-line\n parseOptions[charKey] = parser.reverseObject(periodValur);\n // eslint-disable-next-line\n regexString += '(' + Object.keys(parseOptions[charKey]).join('|') + ')';\n break;\n case 'G':\n canUpdate = true;\n // eslint-disable-next-line\n var eText = (len <= 3) ? 'eraAbbr' : (len === 4) ? 'eraNames' : 'eraNarrow';\n // eslint-disable-next-line\n parseOptions[charKey] = parser.reverseObject(isBlazor() ?\n getValue('eras', dependable.dateObject) : getValue('eras.' + eText, dependable.dateObject));\n // eslint-disable-next-line\n regexString += '(' + Object.keys(parseOptions[charKey]).join('|') + '?)';\n break;\n case 'z':\n // eslint-disable-next-line\n var tval = new Date().getTimezoneOffset();\n canUpdate = (tval !== 0);\n // eslint-disable-next-line\n parseOptions[charKey] = getValue('dates.timeZoneNames', dependable.parserObject);\n // eslint-disable-next-line\n var tzone = parseOptions[charKey];\n hourOnly = (len < 4);\n // eslint-disable-next-line\n var hpattern = hourOnly ? '+H;-H' : tzone.hourFormat;\n hpattern = hpattern.replace(/:/g, numMapper.timeSeparator);\n regexString += '(' + this.parseTimeZoneRegx(hpattern, tzone, nRegx) + ')?';\n isgmtTraversed = true;\n zCorrectTemp = hourOnly ? 6 : 12;\n break;\n case '\\'':\n // eslint-disable-next-line\n var iString = str.replace(/'/g, '');\n regexString += '(' + iString + ')?';\n break;\n default:\n regexString += '([\\\\D])';\n break;\n }\n if (canUpdate) {\n parseOptions.evalposition[\"\" + charKey] = { isNumber: isNumber, pos: i + 1 + gmtCorrection, hourOnly: hourOnly };\n }\n if (i === length_1 - 1 && !isNullOrUndefined(regexString)) {\n parseOptions.parserRegex = new RegExp('^' + regexString + '$', 'i');\n }\n }\n }\n return function (value) {\n var parsedDateParts = _this.internalDateParse(value, parseOptions, numOptions);\n if (isNullOrUndefined(parsedDateParts) || !Object.keys(parsedDateParts).length) {\n return null;\n }\n if (parseOptions.isIslamic) {\n var dobj = {};\n var tYear = parsedDateParts.year;\n var tDate = parsedDateParts.day;\n var tMonth = parsedDateParts.month;\n var ystrig = tYear ? (tYear + '') : '';\n var is2DigitYear = (ystrig.length === 2);\n if (!tYear || !tMonth || !tDate || is2DigitYear) {\n dobj = HijriParser.getHijriDate(new Date());\n }\n if (is2DigitYear) {\n tYear = parseInt((dobj.year + '').slice(0, 2) + ystrig, 10);\n }\n // tslint:disable-next-line\n var dateObject = HijriParser.toGregorian(tYear || dobj.year, tMonth || dobj.month, tDate || dobj.date);\n parsedDateParts.year = dateObject.getFullYear();\n parsedDateParts.month = dateObject.getMonth() + 1;\n parsedDateParts.day = dateObject.getDate();\n }\n return _this.getDateObject(parsedDateParts);\n };\n };\n /* tslint:disable */\n /**\n * Returns date object for provided date options\n *\n * @param {DateParts} options ?\n * @param {Date} value ?\n * @returns {Date} ?\n */\n DateParser.getDateObject = function (options, value) {\n var res = value || new Date();\n res.setMilliseconds(0);\n var tKeys = ['hour', 'minute', 'second', 'milliseconds', 'month', 'day'];\n var y = options.year;\n var desig = options.designator;\n var tzone = options.timeZone;\n if (!isUndefined(y)) {\n var len = (y + '').length;\n if (len <= 2) {\n var century = Math.floor(res.getFullYear() / 100) * 100;\n y += century;\n }\n res.setFullYear(y);\n }\n for (var _i = 0, tKeys_1 = tKeys; _i < tKeys_1.length; _i++) {\n var key = tKeys_1[_i];\n // eslint-disable-next-line\n var tValue = options[key];\n if (isUndefined(tValue) && key === 'day') {\n res.setDate(1);\n }\n if (!isUndefined(tValue)) {\n if (key === 'month') {\n tValue -= 1;\n if (tValue < 0 || tValue > 11) {\n return new Date('invalid');\n }\n var pDate = res.getDate();\n res.setDate(1);\n // eslint-disable-next-line\n res[timeSetter[key]](tValue);\n var lDate = new Date(res.getFullYear(), tValue + 1, 0).getDate();\n res.setDate(pDate < lDate ? pDate : lDate);\n }\n else {\n if (key === 'day') {\n var lastDay = new Date(res.getFullYear(), res.getMonth() + 1, 0).getDate();\n if ((tValue < 1 || tValue > lastDay)) {\n return null;\n }\n }\n // eslint-disable-next-line\n res[timeSetter[key]](tValue);\n }\n }\n }\n if (!isUndefined(desig)) {\n var hour = res.getHours();\n if (desig === 'pm') {\n res.setHours(hour + (hour === 12 ? 0 : 12));\n }\n else if (hour === 12) {\n res.setHours(0);\n }\n }\n if (!isUndefined(tzone)) {\n var tzValue = tzone - res.getTimezoneOffset();\n if (tzValue !== 0) {\n res.setMinutes(res.getMinutes() + tzValue);\n }\n }\n return res;\n };\n /**\n * Returns date parsing options for provided value along with parse and numeric options\n *\n * @param {string} value ?\n * @param {ParseOptions} parseOptions ?\n * @param {NumericOptions} num ?\n * @returns {DateParts} ?\n */\n DateParser.internalDateParse = function (value, parseOptions, num) {\n var matches = value.match(parseOptions.parserRegex);\n var retOptions = { 'hour': 0, 'minute': 0, 'second': 0 };\n if (isNullOrUndefined(matches)) {\n return null;\n }\n else {\n var props = Object.keys(parseOptions.evalposition);\n for (var _i = 0, props_1 = props; _i < props_1.length; _i++) {\n var prop = props_1[_i];\n var curObject = parseOptions.evalposition[\"\" + prop];\n var matchString = matches[curObject.pos];\n if (curObject.isNumber) {\n // eslint-disable-next-line\n retOptions[prop] = this.internalNumberParser(matchString, num);\n }\n else {\n if (prop === 'timeZone' && !isUndefined(matchString)) {\n var pos = curObject.pos;\n var val = void 0;\n var tmatch = matches[pos + 1];\n var flag = !isUndefined(tmatch);\n if (curObject.hourOnly) {\n val = this.getZoneValue(flag, tmatch, matches[pos + 4], num) * 60;\n }\n else {\n val = this.getZoneValue(flag, tmatch, matches[pos + 7], num) * 60;\n val += this.getZoneValue(flag, matches[pos + 4], matches[pos + 10], num);\n }\n if (!isNullOrUndefined(val)) {\n retOptions[\"\" + prop] = val;\n }\n }\n else {\n // eslint-disable-next-line\n matchString = ((prop === 'month') && (!parseOptions.isIslamic) && (parseOptions.culture === 'en' || parseOptions.culture === 'en-GB' || parseOptions.culture === 'en-US'))\n ? matchString[0].toUpperCase() + matchString.substring(1).toLowerCase() : matchString;\n // eslint-disable-next-line\n retOptions[prop] = parseOptions[prop][matchString];\n }\n }\n }\n if (parseOptions.hour12) {\n retOptions.hour12 = true;\n }\n }\n return retOptions;\n };\n /**\n * Returns parsed number for provided Numeric string and Numeric Options\n *\n * @param {string} value ?\n * @param {NumericOptions} option ?\n * @returns {number} ?\n */\n DateParser.internalNumberParser = function (value, option) {\n value = parser.convertValueParts(value, option.numberParseRegex, option.numericPair);\n if (latnRegex.test(value)) {\n return +value;\n }\n return null;\n };\n /**\n * Returns parsed time zone RegExp for provided hour format and time zone\n *\n * @param {string} hourFormat ?\n * @param {base.TimeZoneOptions} tZone ?\n * @param {string} nRegex ?\n * @returns {string} ?\n */\n DateParser.parseTimeZoneRegx = function (hourFormat, tZone, nRegex) {\n var pattern = tZone.gmtFormat;\n var ret;\n var cRegex = '(' + nRegex + ')' + '(' + nRegex + ')';\n var splitStr;\n ret = hourFormat.replace('+', '\\\\+');\n if (hourFormat.indexOf('HH') !== -1) {\n ret = ret.replace(/HH|mm/g, '(' + cRegex + ')');\n }\n else {\n ret = ret.replace(/H|m/g, '(' + cRegex + '?)');\n }\n // eslint-disable-next-line\n splitStr = (ret.split(';').map(function (str) {\n return pattern.replace('{0}', str);\n }));\n ret = splitStr.join('|') + '|' + tZone.gmtZeroFormat;\n return ret;\n };\n /**\n * Returns zone based value.\n *\n * @param {boolean} flag ?\n * @param {string} val1 ?\n * @param {string} val2 ?\n * @param {NumericOptions} num ?\n * @returns {number} ?\n */\n DateParser.getZoneValue = function (flag, val1, val2, num) {\n var ival = flag ? val1 : val2;\n if (!ival) {\n return 0;\n }\n var value = this.internalNumberParser(ival, num);\n if (flag) {\n return -value;\n }\n return value;\n };\n return DateParser;\n}());\nexport { DateParser };\n","import { extend, isNullOrUndefined, isBlazor, getValue } from '../util';\nimport { ParserBase as parser } from './parser-base';\nimport { IntlBase as base } from './intl-base';\nvar parseRegex = /^([^0-9]*)(([0-9,]*[0-9]+)(\\.[0-9]+)?)([Ee][+-]?[0-9]+)?([^0-9]*)$/;\nvar groupRegex = /,/g;\nvar keys = ['minusSign', 'infinity'];\n/**\n * Module for Number Parser.\n *\n * @private\n */\nvar NumberParser = /** @class */ (function () {\n function NumberParser() {\n }\n /**\n * Returns the parser function for given skeleton.\n *\n * @param {string} culture - Specifies the culture name to be which formatting.\n * @param {NumberFormatOptions} option - Specific the format in which number will parsed.\n * @param {Object} cldr - Specifies the global cldr data collection.\n * @returns {Function} ?\n */\n NumberParser.numberParser = function (culture, option, cldr) {\n var _this = this;\n var dependable = base.getDependables(cldr, culture, '', true);\n var parseOptions = { custom: true };\n var numOptions;\n if ((base.formatRegex.test(option.format)) || !(option.format)) {\n extend(parseOptions, base.getProperNumericSkeleton(option.format || 'N'));\n parseOptions.custom = false;\n if (!parseOptions.fractionDigits) {\n if (option.maximumFractionDigits) {\n parseOptions.maximumFractionDigits = option.maximumFractionDigits;\n }\n }\n }\n else {\n extend(parseOptions, base.customFormat(option.format, null, null));\n }\n var numbers = getValue('numbers', dependable.parserObject);\n // eslint-disable-next-line\n numOptions = parser.getCurrentNumericOptions(dependable.parserObject, parser.getNumberingSystem(cldr), true, isBlazor());\n parseOptions.symbolRegex = parser.getSymbolRegex(Object.keys(numOptions.symbolMatch));\n // eslint-disable-next-line\n parseOptions.infinity = numOptions.symbolNumberSystem[keys[1]];\n var symbolpattern;\n if (!isBlazor()) {\n symbolpattern = base.getSymbolPattern(parseOptions.type, numOptions.numberSystem, dependable.numericObject, parseOptions.isAccount);\n if (symbolpattern) {\n symbolpattern = symbolpattern.replace(/\\u00A4/g, base.defaultCurrency);\n var split = symbolpattern.split(';');\n parseOptions.nData = base.getFormatData(split[1] || '-' + split[0], true, '');\n parseOptions.pData = base.getFormatData(split[0], true, '');\n }\n }\n else {\n parseOptions.nData = extend({}, {}, getValue(parseOptions.type + 'nData', numbers));\n parseOptions.pData = extend({}, {}, getValue(parseOptions.type + 'pData', numbers));\n if (parseOptions.type === 'currency' && option.currency) {\n base.replaceBlazorCurrency([parseOptions.pData, parseOptions.nData], getValue('currencySymbol', numbers), option.currency);\n }\n }\n return function (value) {\n return _this.getParsedNumber(value, parseOptions, numOptions);\n };\n };\n /**\n * Returns parsed number for the provided formatting options\n *\n * @param {string} value ?\n * @param {NumericParts} options ?\n * @param {NumericOptions} numOptions ?\n * @returns {number} ?\n */\n NumberParser.getParsedNumber = function (value, options, numOptions) {\n var isNegative;\n var isPercent;\n var tempValue;\n var lead;\n var end;\n var ret;\n if (value.indexOf(options.infinity) !== -1) {\n return Infinity;\n }\n else {\n value = parser.convertValueParts(value, options.symbolRegex, numOptions.symbolMatch);\n value = parser.convertValueParts(value, numOptions.numberParseRegex, numOptions.numericPair);\n value = value.indexOf('-') !== -1 ? value.replace('-.', '-0.') : value;\n if (value.indexOf('.') === 0) {\n value = '0' + value;\n }\n var matches = value.match(parseRegex);\n if (isNullOrUndefined(matches)) {\n return NaN;\n }\n lead = matches[1];\n tempValue = matches[2];\n var exponent = matches[5];\n end = matches[6];\n isNegative = options.custom ? ((lead === options.nData.nlead) && (end === options.nData.nend)) :\n ((lead.indexOf(options.nData.nlead) !== -1) && (end.indexOf(options.nData.nend) !== -1));\n isPercent = isNegative ?\n options.nData.isPercent :\n options.pData.isPercent;\n tempValue = tempValue.replace(groupRegex, '');\n if (exponent) {\n tempValue += exponent;\n }\n ret = +tempValue;\n if (options.type === 'percent' || isPercent) {\n ret = ret / 100;\n }\n if (options.custom || options.fractionDigits) {\n ret = parseFloat(ret.toFixed(options.custom ?\n (isNegative ? options.nData.maximumFractionDigits : options.pData.maximumFractionDigits) : options.fractionDigits));\n }\n if (options.maximumFractionDigits) {\n ret = this.convertMaxFracDigits(tempValue, options, ret, isNegative);\n }\n if (isNegative) {\n ret *= -1;\n }\n return ret;\n }\n };\n NumberParser.convertMaxFracDigits = function (value, options, ret, isNegative) {\n var decimalSplitValue = value.split('.');\n if (decimalSplitValue[1] && decimalSplitValue[1].length > options.maximumFractionDigits) {\n ret = +(ret.toFixed(options.custom ?\n (isNegative ? options.nData.maximumFractionDigits : options.pData.maximumFractionDigits) : options.maximumFractionDigits));\n }\n return ret;\n };\n return NumberParser;\n}());\nexport { NumberParser };\n","import { isNullOrUndefined, getValue, extend, isBlazor } from './util';\nvar Observer = /** @class */ (function () {\n function Observer(context) {\n this.ranArray = [];\n this.boundedEvents = {};\n if (isNullOrUndefined(context)) {\n return;\n }\n this.context = context;\n }\n /**\n * To attach handler for given property in current context.\n *\n * @param {string} property - specifies the name of the event.\n * @param {Function} handler - Specifies the handler function to be called while event notified.\n * @param {Object} context - Specifies the context binded to the handler.\n * @param {string} id - specifies the random generated id.\n * @returns {void}\n */\n Observer.prototype.on = function (property, handler, context, id) {\n if (isNullOrUndefined(handler)) {\n return;\n }\n var cntxt = context || this.context;\n if (this.notExist(property)) {\n this.boundedEvents[\"\" + property] = [{ handler: handler, context: cntxt }];\n return;\n }\n if (!isNullOrUndefined(id)) {\n if (this.ranArray.indexOf(id) === -1) {\n this.ranArray.push(id);\n this.boundedEvents[\"\" + property].push({ handler: handler, context: cntxt, id: id });\n }\n }\n else if (!this.isHandlerPresent(this.boundedEvents[\"\" + property], handler)) {\n this.boundedEvents[\"\" + property].push({ handler: handler, context: cntxt });\n }\n };\n /**\n * To remove handlers from a event attached using on() function.\n *\n * @param {string} property - specifies the name of the event.\n * @param {Function} handler - Optional argument specifies the handler function to be called while event notified.\n * @param {string} id - specifies the random generated id.\n * @returns {void} ?\n */\n Observer.prototype.off = function (property, handler, id) {\n if (this.notExist(property)) {\n return;\n }\n var curObject = getValue(property, this.boundedEvents);\n if (handler) {\n for (var i = 0; i < curObject.length; i++) {\n if (id) {\n if (curObject[parseInt(i.toString(), 10)].id === id) {\n curObject.splice(i, 1);\n var indexLocation = this.ranArray.indexOf(id);\n if (indexLocation !== -1) {\n this.ranArray.splice(indexLocation, 1);\n }\n break;\n }\n }\n else if (handler === curObject[parseInt(i.toString(), 10)].handler) {\n curObject.splice(i, 1);\n break;\n }\n }\n }\n else {\n delete this.boundedEvents[\"\" + property];\n }\n };\n /**\n * To notify the handlers in the specified event.\n *\n * @param {string} property - Specifies the event to be notify.\n * @param {Object} argument - Additional parameters to pass while calling the handler.\n * @param {Function} successHandler - this function will invoke after event successfully triggered\n * @param {Function} errorHandler - this function will invoke after event if it was failure to call.\n * @returns {void} ?\n */\n Observer.prototype.notify = function (property, argument, successHandler, errorHandler) {\n if (this.notExist(property)) {\n if (successHandler) {\n successHandler.call(this, argument);\n }\n return;\n }\n if (argument) {\n argument.name = property;\n }\n var blazor = 'Blazor';\n var curObject = getValue(property, this.boundedEvents).slice(0);\n if (window[\"\" + blazor]) {\n return this.blazorCallback(curObject, argument, successHandler, errorHandler, 0);\n }\n else {\n for (var _i = 0, curObject_1 = curObject; _i < curObject_1.length; _i++) {\n var cur = curObject_1[_i];\n cur.handler.call(cur.context, argument);\n }\n if (successHandler) {\n successHandler.call(this, argument);\n }\n }\n };\n Observer.prototype.blazorCallback = function (objs, argument, successHandler, errorHandler, index) {\n var _this = this;\n var isTrigger = index === objs.length - 1;\n if (index < objs.length) {\n var obj_1 = objs[parseInt(index.toString(), 10)];\n var promise = obj_1.handler.call(obj_1.context, argument);\n if (promise && typeof promise.then === 'function') {\n if (!successHandler) {\n return promise;\n }\n promise.then(function (data) {\n data = typeof data === 'string' && _this.isJson(data) ? JSON.parse(data, _this.dateReviver) : data;\n extend(argument, argument, data, true);\n if (successHandler && isTrigger) {\n successHandler.call(obj_1.context, argument);\n }\n else {\n return _this.blazorCallback(objs, argument, successHandler, errorHandler, index + 1);\n }\n }).catch(function (data) {\n if (errorHandler) {\n errorHandler.call(obj_1.context, typeof data === 'string' &&\n _this.isJson(data) ? JSON.parse(data, _this.dateReviver) : data);\n }\n });\n }\n else if (successHandler && isTrigger) {\n successHandler.call(obj_1.context, argument);\n }\n else {\n return this.blazorCallback(objs, argument, successHandler, errorHandler, index + 1);\n }\n }\n };\n // eslint-disable-next-line\n Observer.prototype.dateReviver = function (key, value) {\n var dPattern = /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}/;\n if (isBlazor && typeof value === 'string' && value.match(dPattern) !== null) {\n return (new Date(value));\n }\n return (value);\n };\n Observer.prototype.isJson = function (value) {\n try {\n JSON.parse(value);\n }\n catch (e) {\n return false;\n }\n return true;\n };\n /**\n * To destroy handlers in the event\n *\n * @returns {void} ?\n */\n Observer.prototype.destroy = function () {\n this.boundedEvents = this.context = undefined;\n };\n /**\n * Returns if the property exists.\n *\n * @param {string} prop ?\n * @returns {boolean} ?\n */\n Observer.prototype.notExist = function (prop) {\n // eslint-disable-next-line\n return this.boundedEvents.hasOwnProperty(prop) === false || this.boundedEvents[prop].length <= 0;\n };\n /**\n * Returns if the handler is present.\n *\n * @param {BoundOptions[]} boundedEvents ?\n * @param {Function} handler ?\n * @returns {boolean} ?\n */\n Observer.prototype.isHandlerPresent = function (boundedEvents, handler) {\n for (var _i = 0, boundedEvents_1 = boundedEvents; _i < boundedEvents_1.length; _i++) {\n var cur = boundedEvents_1[_i];\n if (cur.handler === handler) {\n return true;\n }\n }\n return false;\n };\n return Observer;\n}());\nexport { Observer };\n","import { DateFormat } from './intl/date-formatter';\nimport { NumberFormat } from './intl/number-formatter';\nimport { DateParser } from './intl/date-parser';\nimport { NumberParser } from './intl/number-parser';\nimport { IntlBase } from './intl/intl-base';\nimport { extend, getValue, isBlazor } from './util';\nimport { Observer } from './observer';\n/**\n * Specifies the observer used for external change detection.\n */\nexport var onIntlChange = new Observer();\n/**\n * Specifies the default rtl status for EJ2 components.\n */\nexport var rightToLeft = false;\n/**\n * Specifies the CLDR data loaded for internationalization functionalities.\n *\n * @private\n */\nexport var cldrData = {};\n/**\n * Specifies the default culture value to be considered.\n *\n * @private\n */\nexport var defaultCulture = 'en-US';\n/**\n * Specifies default currency code to be considered\n *\n * @private\n */\nexport var defaultCurrencyCode = 'USD';\nvar mapper = ['numericObject', 'dateObject'];\n/**\n * Internationalization class provides support to parse and format the number and date object to the desired format.\n * ```typescript\n * // To set the culture globally\n * setCulture('en-GB');\n *\n * // To set currency code globally\n * setCurrencyCode('EUR');\n *\n * //Load cldr data\n * loadCldr(gregorainData);\n * loadCldr(timeZoneData);\n * loadCldr(numbersData);\n * loadCldr(numberSystemData);\n *\n * // To use formatter in component side\n * let Intl:Internationalization = new Internationalization();\n *\n * // Date formatting\n * let dateFormatter: Function = Intl.getDateFormat({skeleton:'long',type:'dateTime'});\n * dateFormatter(new Date('11/2/2016'));\n * dateFormatter(new Date('25/2/2030'));\n * Intl.formatDate(new Date(),{skeleton:'E'});\n *\n * //Number formatting\n * let numberFormatter: Function = Intl.getNumberFormat({skeleton:'C5'})\n * numberFormatter(24563334);\n * Intl.formatNumber(123123,{skeleton:'p2'});\n *\n * // Date parser\n * let dateParser: Function = Intl.getDateParser({skeleton:'short',type:'time'});\n * dateParser('10:30 PM');\n * Intl.parseDate('10',{skeleton:'H'});\n * ```\n */\nvar Internationalization = /** @class */ (function () {\n function Internationalization(cultureName) {\n if (cultureName) {\n this.culture = cultureName;\n }\n }\n /**\n * Returns the format function for given options.\n *\n * @param {DateFormatOptions} options - Specifies the format options in which the format function will return.\n * @returns {Function} ?\n */\n Internationalization.prototype.getDateFormat = function (options) {\n return DateFormat.dateFormat(this.getCulture(), options || { type: 'date', skeleton: 'short' }, cldrData);\n };\n /**\n * Returns the format function for given options.\n *\n * @param {NumberFormatOptions} options - Specifies the format options in which the format function will return.\n * @returns {Function} ?\n */\n Internationalization.prototype.getNumberFormat = function (options) {\n if (options && !options.currency) {\n options.currency = defaultCurrencyCode;\n }\n if (isBlazor() && options && !options.format) {\n options.minimumFractionDigits = 0;\n }\n return NumberFormat.numberFormatter(this.getCulture(), options || {}, cldrData);\n };\n /**\n * Returns the parser function for given options.\n *\n * @param {DateFormatOptions} options - Specifies the format options in which the parser function will return.\n * @returns {Function} ?\n */\n Internationalization.prototype.getDateParser = function (options) {\n return DateParser.dateParser(this.getCulture(), options || { skeleton: 'short', type: 'date' }, cldrData);\n };\n /**\n * Returns the parser function for given options.\n *\n * @param {NumberFormatOptions} options - Specifies the format options in which the parser function will return.\n * @returns {Function} ?\n */\n Internationalization.prototype.getNumberParser = function (options) {\n if (isBlazor() && options && !options.format) {\n options.minimumFractionDigits = 0;\n }\n return NumberParser.numberParser(this.getCulture(), options || { format: 'N' }, cldrData);\n };\n /**\n * Returns the formatted string based on format options.\n *\n * @param {number} value - Specifies the number to format.\n * @param {NumberFormatOptions} option - Specifies the format options in which the number will be formatted.\n * @returns {string} ?\n */\n Internationalization.prototype.formatNumber = function (value, option) {\n return this.getNumberFormat(option)(value);\n };\n /**\n * Returns the formatted date string based on format options.\n *\n * @param {Date} value - Specifies the number to format.\n * @param {DateFormatOptions} option - Specifies the format options in which the number will be formatted.\n * @returns {string} ?\n */\n Internationalization.prototype.formatDate = function (value, option) {\n return this.getDateFormat(option)(value);\n };\n /**\n * Returns the date object for given date string and options.\n *\n * @param {string} value - Specifies the string to parse.\n * @param {DateFormatOptions} option - Specifies the parse options in which the date string will be parsed.\n * @returns {Date} ?\n */\n Internationalization.prototype.parseDate = function (value, option) {\n return this.getDateParser(option)(value);\n };\n /**\n * Returns the number object from the given string value and options.\n *\n * @param {string} value - Specifies the string to parse.\n * @param {NumberFormatOptions} option - Specifies the parse options in which the string number will be parsed.\n * @returns {number} ?\n */\n Internationalization.prototype.parseNumber = function (value, option) {\n return this.getNumberParser(option)(value);\n };\n /**\n * Returns Native Date Time Pattern\n *\n * @param {DateFormatOptions} option - Specifies the parse options for resultant date time pattern.\n * @param {boolean} isExcelFormat - Specifies format value to be converted to excel pattern.\n * @returns {string} ?\n * @private\n */\n Internationalization.prototype.getDatePattern = function (option, isExcelFormat) {\n return IntlBase.getActualDateTimeFormat(this.getCulture(), option, cldrData, isExcelFormat);\n };\n /**\n * Returns Native Number Pattern\n *\n * @param {NumberFormatOptions} option - Specifies the parse options for resultant number pattern.\n * @param {boolean} isExcel ?\n * @returns {string} ?\n * @private\n */\n Internationalization.prototype.getNumberPattern = function (option, isExcel) {\n return IntlBase.getActualNumberFormat(this.getCulture(), option, cldrData, isExcel);\n };\n /**\n * Returns the First Day of the Week\n *\n * @returns {number} ?\n */\n Internationalization.prototype.getFirstDayOfWeek = function () {\n return IntlBase.getWeekData(this.getCulture(), cldrData);\n };\n /**\n * Returns the culture\n *\n * @returns {string} ?\n */\n Internationalization.prototype.getCulture = function () {\n return this.culture || defaultCulture;\n };\n return Internationalization;\n}());\nexport { Internationalization };\n/**\n * Set the default culture to all EJ2 components\n *\n * @param {string} cultureName - Specifies the culture name to be set as default culture.\n * @returns {void} ?\n */\nexport function setCulture(cultureName) {\n defaultCulture = cultureName;\n onIntlChange.notify('notifyExternalChange', { 'locale': defaultCulture });\n}\n/**\n * Set the default currency code to all EJ2 components\n *\n * @param {string} currencyCode Specifies the culture name to be set as default culture.\n * @returns {void} ?\n */\nexport function setCurrencyCode(currencyCode) {\n defaultCurrencyCode = currencyCode;\n onIntlChange.notify('notifyExternalChange', { 'currencyCode': defaultCurrencyCode });\n}\n/**\n * Load the CLDR data into context\n *\n * @param {Object[]} data Specifies the CLDR data's to be used for formatting and parser.\n * @returns {void} ?\n */\nexport function loadCldr() {\n var data = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n data[_i] = arguments[_i];\n }\n for (var _a = 0, data_1 = data; _a < data_1.length; _a++) {\n var obj = data_1[_a];\n extend(cldrData, obj, {}, true);\n }\n}\n/**\n * To enable or disable RTL functionality for all components globally.\n *\n * @param {boolean} status - Optional argument Specifies the status value to enable or disable rtl option.\n * @returns {void} ?\n */\nexport function enableRtl(status) {\n if (status === void 0) { status = true; }\n rightToLeft = status;\n onIntlChange.notify('notifyExternalChange', { enableRtl: rightToLeft });\n}\n/**\n * To get the numeric CLDR object for given culture\n *\n * @param {string} locale - Specifies the locale for which numericObject to be returned.\n * @param {string} type ?\n * @returns {Object} ?\n * @ignore\n * @private\n */\nexport function getNumericObject(locale, type) {\n // eslint-disable-next-line\n var numObject = IntlBase.getDependables(cldrData, locale, '', true)[mapper[0]];\n // eslint-disable-next-line\n var dateObject = IntlBase.getDependables(cldrData, locale, '')[mapper[1]];\n var numSystem = getValue('defaultNumberingSystem', numObject);\n var symbPattern = isBlazor() ? getValue('numberSymbols', numObject) : getValue('symbols-numberSystem-' + numSystem, numObject);\n var pattern = IntlBase.getSymbolPattern(type || 'decimal', numSystem, numObject, false);\n return extend(symbPattern, IntlBase.getFormatData(pattern, true, '', true), { 'dateSeparator': IntlBase.getDateSeparator(dateObject) });\n}\n/**\n * To get the numeric CLDR number base object for given culture\n *\n * @param {string} locale - Specifies the locale for which numericObject to be returned.\n * @param {string} currency - Specifies the currency for which numericObject to be returned.\n * @returns {string} ?\n * @ignore\n * @private\n */\nexport function getNumberDependable(locale, currency) {\n // eslint-disable-next-line\n var numObject = IntlBase.getDependables(cldrData, locale, '', true);\n // eslint-disable-next-line\n return IntlBase.getCurrencySymbol(numObject.numericObject, currency);\n}\n/**\n * To get the default date CLDR object.\n *\n * @param {string} mode ?\n * @returns {Object} ?\n * @ignore\n * @private\n */\nexport function getDefaultDateObject(mode) {\n // eslint-disable-next-line\n return IntlBase.getDependables(cldrData, '', mode, false)[mapper[1]];\n}\n","import { defaultCurrencyCode } from '../internationalization';\nimport { getValue, isNullOrUndefined, extend, isBlazor } from '../util';\nimport { ParserBase as parser, getBlazorCurrencySymbol } from './parser-base';\nimport { DateFormat } from './date-formatter';\nimport { NumberFormat } from './number-formatter';\nimport { isUndefined } from '../util';\nexport var blazorCultureFormats = {\n 'en-US': {\n 'd': 'M/d/y',\n 'D': 'EEEE, MMMM d, y',\n 'f': 'EEEE, MMMM d, y h:mm a',\n 'F': 'EEEE, MMMM d, y h:mm:s a',\n 'g': 'M/d/y h:mm a',\n 'G': 'M/d/yyyy h:mm:ss tt',\n 'm': 'MMMM d',\n 'M': 'MMMM d',\n 'r': 'ddd, dd MMM yyyy HH\\':\\'mm\\':\\'ss \\'GMT\\'',\n 'R': 'ddd, dd MMM yyyy HH\\':\\'mm\\':\\'ss \\'GMT\\'',\n 's': 'yyyy\\'-\\'MM\\'-\\'dd\\'T\\'HH\\':\\'mm\\':\\'ss',\n 't': 'h:mm tt',\n 'T': 'h:m:s tt',\n 'u': 'yyyy\\'-\\'MM\\'-\\'dd HH\\':\\'mm\\':\\'ss\\'Z\\'',\n 'U': 'dddd, MMMM d, yyyy h:mm:ss tt',\n 'y': 'MMMM yyyy',\n 'Y': 'MMMM yyyy'\n }\n};\n/**\n * Date base common constants and function for date parser and formatter.\n */\n// eslint-disable-next-line\nexport var IntlBase;\n(function (IntlBase) {\n // tslint:disable-next-line:max-line-length\n IntlBase.negativeDataRegex = /^(('[^']+'|''|[^*#@0,.E])*)(\\*.)?((([#,]*[0,]*0+)(\\.0*[0-9]*#*)?)|([#,]*@+#*))(E\\+?0+)?(('[^']+'|''|[^*#@0,.E])*)$/;\n IntlBase.customRegex = /^(('[^']+'|''|[^*#@0,.])*)(\\*.)?((([0#,]*[0,]*[0#]*[0#\\ ]*)(\\.[0#]*)?)|([#,]*@+#*))(E\\+?0+)?(('[^']+'|''|[^*#@0,.E])*)$/;\n IntlBase.latnParseRegex = /0|1|2|3|4|5|6|7|8|9/g;\n var fractionRegex = /[0-9]/g;\n IntlBase.defaultCurrency = '$';\n var mapper = ['infinity', 'nan', 'group', 'decimal'];\n var patternRegex = /G|M|L|H|c|'| a|yy|y|EEEE|E/g;\n var patternMatch = {\n 'G': '',\n 'M': 'm',\n 'L': 'm',\n 'H': 'h',\n 'c': 'd',\n '\\'': '\"',\n ' a': ' AM/PM',\n 'yy': 'yy',\n 'y': 'yyyy',\n 'EEEE': 'dddd',\n 'E': 'ddd'\n };\n IntlBase.dateConverterMapper = /dddd|ddd/ig;\n var defaultFirstDay = 'sun';\n IntlBase.islamicRegex = /^islamic/;\n var firstDayMapper = {\n 'sun': 0,\n 'mon': 1,\n 'tue': 2,\n 'wed': 3,\n 'thu': 4,\n 'fri': 5,\n 'sat': 6\n };\n IntlBase.formatRegex = /(^[ncpae]{1})([0-1]?[0-9]|20)?$/i;\n IntlBase.currencyFormatRegex = /(^[ca]{1})([0-1]?[0-9]|20)?$/i;\n IntlBase.curWithoutNumberRegex = /(c|a)$/ig;\n var typeMapper = {\n '$': 'isCurrency',\n '%': 'isPercent',\n '-': 'isNegative',\n 0: 'nlead',\n 1: 'nend'\n };\n IntlBase.dateParseRegex = /([a-z])\\1*|'([^']|'')+'|''|./gi;\n IntlBase.basicPatterns = ['short', 'medium', 'long', 'full'];\n /* tslint:disable:quotemark */\n IntlBase.defaultObject = {\n 'dates': {\n 'calendars': {\n 'gregorian': {\n 'months': {\n 'stand-alone': {\n 'abbreviated': {\n '1': 'Jan',\n '2': 'Feb',\n '3': 'Mar',\n '4': 'Apr',\n '5': 'May',\n '6': 'Jun',\n '7': 'Jul',\n '8': 'Aug',\n '9': 'Sep',\n '10': 'Oct',\n '11': 'Nov',\n '12': 'Dec'\n },\n 'narrow': {\n '1': 'J',\n '2': 'F',\n '3': 'M',\n '4': 'A',\n '5': 'M',\n '6': 'J',\n '7': 'J',\n '8': 'A',\n '9': 'S',\n '10': 'O',\n '11': 'N',\n '12': 'D'\n },\n 'wide': {\n '1': 'January',\n '2': 'February',\n '3': 'March',\n '4': 'April',\n '5': 'May',\n '6': 'June',\n '7': 'July',\n '8': 'August',\n '9': 'September',\n '10': 'October',\n '11': 'November',\n '12': 'December'\n }\n }\n },\n 'days': {\n 'stand-alone': {\n 'abbreviated': {\n 'sun': 'Sun',\n 'mon': 'Mon',\n 'tue': 'Tue',\n 'wed': 'Wed',\n 'thu': 'Thu',\n 'fri': 'Fri',\n 'sat': 'Sat'\n },\n 'narrow': {\n 'sun': 'S',\n 'mon': 'M',\n 'tue': 'T',\n 'wed': 'W',\n 'thu': 'T',\n 'fri': 'F',\n 'sat': 'S'\n },\n 'short': {\n 'sun': 'Su',\n 'mon': 'Mo',\n 'tue': 'Tu',\n 'wed': 'We',\n 'thu': 'Th',\n 'fri': 'Fr',\n 'sat': 'Sa'\n },\n 'wide': {\n 'sun': 'Sunday',\n 'mon': 'Monday',\n 'tue': 'Tuesday',\n 'wed': 'Wednesday',\n 'thu': 'Thursday',\n 'fri': 'Friday',\n 'sat': 'Saturday'\n }\n }\n },\n 'dayPeriods': {\n 'format': {\n 'wide': {\n 'am': 'AM',\n 'pm': 'PM'\n }\n }\n },\n 'eras': {\n 'eraNames': {\n '0': 'Before Christ',\n '0-alt-variant': 'Before Common Era',\n '1': 'Anno Domini',\n '1-alt-variant': 'Common Era'\n },\n 'eraAbbr': {\n '0': 'BC',\n '0-alt-variant': 'BCE',\n '1': 'AD',\n '1-alt-variant': 'CE'\n },\n 'eraNarrow': {\n '0': 'B',\n '0-alt-variant': 'BCE',\n '1': 'A',\n '1-alt-variant': 'CE'\n }\n },\n 'dateFormats': {\n 'full': 'EEEE, MMMM d, y',\n 'long': 'MMMM d, y',\n 'medium': 'MMM d, y',\n 'short': 'M/d/yy'\n },\n 'timeFormats': {\n 'full': 'h:mm:ss a zzzz',\n 'long': 'h:mm:ss a z',\n 'medium': 'h:mm:ss a',\n 'short': 'h:mm a'\n },\n 'dateTimeFormats': {\n 'full': '{1} \\'at\\' {0}',\n 'long': '{1} \\'at\\' {0}',\n 'medium': '{1}, {0}',\n 'short': '{1}, {0}',\n 'availableFormats': {\n 'd': 'd',\n 'E': 'ccc',\n 'Ed': 'd E',\n 'Ehm': 'E h:mm a',\n 'EHm': 'E HH:mm',\n 'Ehms': 'E h:mm:ss a',\n 'EHms': 'E HH:mm:ss',\n 'Gy': 'y G',\n 'GyMMM': 'MMM y G',\n 'GyMMMd': 'MMM d, y G',\n 'GyMMMEd': 'E, MMM d, y G',\n 'h': 'h a',\n 'H': 'HH',\n 'hm': 'h:mm a',\n 'Hm': 'HH:mm',\n 'hms': 'h:mm:ss a',\n 'Hms': 'HH:mm:ss',\n 'hmsv': 'h:mm:ss a v',\n 'Hmsv': 'HH:mm:ss v',\n 'hmv': 'h:mm a v',\n 'Hmv': 'HH:mm v',\n 'M': 'L',\n 'Md': 'M/d',\n 'MEd': 'E, M/d',\n 'MMM': 'LLL',\n 'MMMd': 'MMM d',\n 'MMMEd': 'E, MMM d',\n 'MMMMd': 'MMMM d',\n 'ms': 'mm:ss',\n 'y': 'y',\n 'yM': 'M/y',\n 'yMd': 'M/d/y',\n 'yMEd': 'E, M/d/y',\n 'yMMM': 'MMM y',\n 'yMMMd': 'MMM d, y',\n 'yMMMEd': 'E, MMM d, y',\n 'yMMMM': 'MMMM y'\n }\n }\n },\n 'islamic': {\n 'months': {\n 'stand-alone': {\n 'abbreviated': {\n '1': 'Muh.',\n '2': 'Saf.',\n '3': 'Rab. I',\n '4': 'Rab. II',\n '5': 'Jum. I',\n '6': 'Jum. II',\n '7': 'Raj.',\n '8': 'Sha.',\n '9': 'Ram.',\n '10': 'Shaw.',\n '11': 'Dhuʻl-Q.',\n '12': 'Dhuʻl-H.'\n },\n 'narrow': {\n '1': '1',\n '2': '2',\n '3': '3',\n '4': '4',\n '5': '5',\n '6': '6',\n '7': '7',\n '8': '8',\n '9': '9',\n '10': '10',\n '11': '11',\n '12': '12'\n },\n 'wide': {\n '1': 'Muharram',\n '2': 'Safar',\n '3': 'Rabiʻ I',\n '4': 'Rabiʻ II',\n '5': 'Jumada I',\n '6': 'Jumada II',\n '7': 'Rajab',\n '8': 'Shaʻban',\n '9': 'Ramadan',\n '10': 'Shawwal',\n '11': 'Dhuʻl-Qiʻdah',\n '12': 'Dhuʻl-Hijjah'\n }\n }\n },\n 'days': {\n 'stand-alone': {\n 'abbreviated': {\n 'sun': 'Sun',\n 'mon': 'Mon',\n 'tue': 'Tue',\n 'wed': 'Wed',\n 'thu': 'Thu',\n 'fri': 'Fri',\n 'sat': 'Sat'\n },\n 'narrow': {\n 'sun': 'S',\n 'mon': 'M',\n 'tue': 'T',\n 'wed': 'W',\n 'thu': 'T',\n 'fri': 'F',\n 'sat': 'S'\n },\n 'short': {\n 'sun': 'Su',\n 'mon': 'Mo',\n 'tue': 'Tu',\n 'wed': 'We',\n 'thu': 'Th',\n 'fri': 'Fr',\n 'sat': 'Sa'\n },\n 'wide': {\n 'sun': 'Sunday',\n 'mon': 'Monday',\n 'tue': 'Tuesday',\n 'wed': 'Wednesday',\n 'thu': 'Thursday',\n 'fri': 'Friday',\n 'sat': 'Saturday'\n }\n }\n },\n 'dayPeriods': {\n 'format': {\n 'wide': {\n 'am': 'AM',\n 'pm': 'PM'\n }\n }\n },\n 'eras': {\n 'eraNames': {\n '0': 'AH'\n },\n 'eraAbbr': {\n '0': 'AH'\n },\n 'eraNarrow': {\n '0': 'AH'\n }\n },\n 'dateFormats': {\n 'full': 'EEEE, MMMM d, y G',\n 'long': 'MMMM d, y G',\n 'medium': 'MMM d, y G',\n 'short': 'M/d/y GGGGG'\n },\n 'timeFormats': {\n 'full': 'h:mm:ss a zzzz',\n 'long': 'h:mm:ss a z',\n 'medium': 'h:mm:ss a',\n 'short': 'h:mm a'\n },\n 'dateTimeFormats': {\n 'full': '{1} \\'at\\' {0}',\n 'long': '{1} \\'at\\' {0}',\n 'medium': '{1}, {0}',\n 'short': '{1}, {0}',\n 'availableFormats': {\n 'd': 'd',\n 'E': 'ccc',\n 'Ed': 'd E',\n 'Ehm': 'E h:mm a',\n 'EHm': 'E HH:mm',\n 'Ehms': 'E h:mm:ss a',\n 'EHms': 'E HH:mm:ss',\n 'Gy': 'y G',\n 'GyMMM': 'MMM y G',\n 'GyMMMd': 'MMM d, y G',\n 'GyMMMEd': 'E, MMM d, y G',\n 'h': 'h a',\n 'H': 'HH',\n 'hm': 'h:mm a',\n 'Hm': 'HH:mm',\n 'hms': 'h:mm:ss a',\n 'Hms': 'HH:mm:ss',\n 'M': 'L',\n 'Md': 'M/d',\n 'MEd': 'E, M/d',\n 'MMM': 'LLL',\n 'MMMd': 'MMM d',\n 'MMMEd': 'E, MMM d',\n 'MMMMd': 'MMMM d',\n 'ms': 'mm:ss',\n 'y': 'y G',\n 'yyyy': 'y G',\n 'yyyyM': 'M/y GGGGG',\n 'yyyyMd': 'M/d/y GGGGG',\n 'yyyyMEd': 'E, M/d/y GGGGG',\n 'yyyyMMM': 'MMM y G',\n 'yyyyMMMd': 'MMM d, y G',\n 'yyyyMMMEd': 'E, MMM d, y G',\n 'yyyyMMMM': 'MMMM y G',\n 'yyyyQQQ': 'QQQ y G',\n 'yyyyQQQQ': 'QQQQ y G'\n }\n }\n }\n },\n 'timeZoneNames': {\n 'hourFormat': '+HH:mm;-HH:mm',\n 'gmtFormat': 'GMT{0}',\n 'gmtZeroFormat': 'GMT'\n }\n },\n 'numbers': {\n 'currencies': {\n 'USD': {\n 'displayName': 'US Dollar',\n 'symbol': '$',\n 'symbol-alt-narrow': '$'\n },\n 'EUR': {\n 'displayName': 'Euro',\n 'symbol': '€',\n 'symbol-alt-narrow': '€'\n },\n 'GBP': {\n 'displayName': 'British Pound',\n 'symbol-alt-narrow': '£'\n }\n },\n 'defaultNumberingSystem': 'latn',\n 'minimumGroupingDigits': '1',\n 'symbols-numberSystem-latn': {\n 'decimal': '.',\n 'group': ',',\n 'list': ';',\n 'percentSign': '%',\n 'plusSign': '+',\n 'minusSign': '-',\n 'exponential': 'E',\n 'superscriptingExponent': '×',\n 'perMille': '‰',\n 'infinity': '∞',\n 'nan': 'NaN',\n 'timeSeparator': ':'\n },\n 'decimalFormats-numberSystem-latn': {\n 'standard': '#,##0.###'\n },\n 'percentFormats-numberSystem-latn': {\n 'standard': '#,##0%'\n },\n 'currencyFormats-numberSystem-latn': {\n 'standard': '¤#,##0.00',\n 'accounting': '¤#,##0.00;(¤#,##0.00)'\n },\n 'scientificFormats-numberSystem-latn': {\n 'standard': '#E0'\n }\n }\n };\n IntlBase.blazorDefaultObject = {\n 'numbers': {\n 'mapper': {\n '0': '0',\n '1': '1',\n '2': '2',\n '3': '3',\n '4': '4',\n '5': '5',\n '6': '6',\n '7': '7',\n '8': '8',\n '9': '9'\n },\n 'mapperDigits': '0123456789',\n 'numberSymbols': {\n 'decimal': '.',\n 'group': ',',\n 'plusSign': '+',\n 'minusSign': '-',\n 'percentSign': '%',\n 'nan': 'NaN',\n 'timeSeparator': ':',\n 'infinity': '∞'\n },\n 'timeSeparator': ':',\n 'currencySymbol': '$',\n 'currencypData': {\n 'nlead': '$',\n 'nend': '',\n 'groupSeparator': ',',\n 'groupData': {\n 'primary': 3\n },\n 'maximumFraction': 2,\n 'minimumFraction': 2\n },\n 'percentpData': {\n 'nlead': '',\n 'nend': '%',\n 'groupSeparator': ',',\n 'groupData': {\n 'primary': 3\n },\n 'maximumFraction': 2,\n 'minimumFraction': 2\n },\n 'percentnData': {\n 'nlead': '-',\n 'nend': '%',\n 'groupSeparator': ',',\n 'groupData': {\n 'primary': 3\n },\n 'maximumFraction': 2,\n 'minimumFraction': 2\n },\n 'currencynData': {\n 'nlead': '($',\n 'nend': ')',\n 'groupSeparator': ',',\n 'groupData': {\n 'primary': 3\n },\n 'maximumFraction': 2,\n 'minimumFraction': 2\n },\n 'decimalnData': {\n 'nlead': '-',\n 'nend': '',\n 'groupData': {\n 'primary': 3\n },\n 'maximumFraction': 2,\n 'minimumFraction': 2\n },\n 'decimalpData': {\n 'nlead': '',\n 'nend': '',\n 'groupData': {\n 'primary': 3\n },\n 'maximumFraction': 2,\n 'minimumFraction': 2\n }\n },\n 'dates': {\n 'dayPeriods': {\n 'am': 'AM',\n 'pm': 'PM'\n },\n 'dateSeperator': '/',\n 'days': {\n 'abbreviated': {\n 'sun': 'Sun',\n 'mon': 'Mon',\n 'tue': 'Tue',\n 'wed': 'Wed',\n 'thu': 'Thu',\n 'fri': 'Fri',\n 'sat': 'Sat'\n },\n 'short': {\n 'sun': 'Su',\n 'mon': 'Mo',\n 'tue': 'Tu',\n 'wed': 'We',\n 'thu': 'Th',\n 'fri': 'Fr',\n 'sat': 'Sa'\n },\n 'wide': {\n 'sun': 'Sunday',\n 'mon': 'Monday',\n 'tue': 'Tuesday',\n 'wed': 'Wednesday',\n 'thu': 'Thursday',\n 'fri': 'Friday',\n 'sat': 'Saturday'\n }\n },\n 'months': {\n 'abbreviated': {\n '1': 'Jan',\n '2': 'Feb',\n '3': 'Mar',\n '4': 'Apr',\n '5': 'May',\n '6': 'Jun',\n '7': 'Jul',\n '8': 'Aug',\n '9': 'Sep',\n '10': 'Oct',\n '11': 'Nov',\n '12': 'Dec'\n },\n 'wide': {\n '1': 'January',\n '2': 'February',\n '3': 'March',\n '4': 'April',\n '5': 'May',\n '6': 'June',\n '7': 'July',\n '8': 'August',\n '9': 'September',\n '10': 'October',\n '11': 'November',\n '12': 'December'\n }\n },\n 'eras': {\n '1': 'AD'\n }\n }\n };\n /* tslint:enable:quotemark */\n IntlBase.monthIndex = {\n 3: 'abbreviated',\n 4: 'wide',\n 5: 'narrow',\n 1: 'abbreviated'\n };\n /**\n *\n */\n IntlBase.month = 'months';\n IntlBase.days = 'days';\n /**\n * Default numerber Object\n */\n IntlBase.patternMatcher = {\n C: 'currency',\n P: 'percent',\n N: 'decimal',\n A: 'currency',\n E: 'scientific'\n };\n /**\n * Returns the resultant pattern based on the skeleton, dateObject and the type provided\n *\n * @private\n * @param {string} skeleton ?\n * @param {Object} dateObject ?\n * @param {string} type ?\n * @param {boolean} isIslamic ?\n * @param {string} blazorCulture ?\n * @returns {string} ?\n */\n function getResultantPattern(skeleton, dateObject, type, isIslamic, blazorCulture) {\n var resPattern;\n var iType = type || 'date';\n if (blazorCulture) {\n resPattern = compareBlazorDateFormats({ skeleton: skeleton }, blazorCulture).format ||\n compareBlazorDateFormats({ skeleton: 'd' }, 'en-US').format;\n }\n else {\n if (IntlBase.basicPatterns.indexOf(skeleton) !== -1) {\n resPattern = getValue(iType + 'Formats.' + skeleton, dateObject);\n if (iType === 'dateTime') {\n var dPattern = getValue('dateFormats.' + skeleton, dateObject);\n var tPattern = getValue('timeFormats.' + skeleton, dateObject);\n resPattern = resPattern.replace('{1}', dPattern).replace('{0}', tPattern);\n }\n }\n else {\n resPattern = getValue('dateTimeFormats.availableFormats.' + skeleton, dateObject);\n }\n if (isUndefined(resPattern) && skeleton === 'yMd') {\n resPattern = 'M/d/y';\n }\n }\n return resPattern;\n }\n IntlBase.getResultantPattern = getResultantPattern;\n /**\n * Returns the dependable object for provided cldr data and culture\n *\n * @private\n * @param {Object} cldr ?\n * @param {string} culture ?\n * @param {string} mode ?\n * @param {boolean} isNumber ?\n * @returns {any} ?\n */\n function getDependables(cldr, culture, mode, isNumber) {\n var ret = {};\n var calendartype = mode || 'gregorian';\n ret.parserObject = parser.getMainObject(cldr, culture) || (isBlazor() ? IntlBase.blazorDefaultObject : IntlBase.defaultObject);\n if (isNumber) {\n ret.numericObject = getValue('numbers', ret.parserObject);\n }\n else {\n var dateString = isBlazor() ? 'dates' : ('dates.calendars.' + calendartype);\n ret.dateObject = getValue(dateString, ret.parserObject);\n }\n return ret;\n }\n IntlBase.getDependables = getDependables;\n /**\n * Returns the symbol pattern for provided parameters\n *\n * @private\n * @param {string} type ?\n * @param {string} numSystem ?\n * @param {Object} obj ?\n * @param {boolean} isAccount ?\n * @returns {string} ?\n */\n function getSymbolPattern(type, numSystem, obj, isAccount) {\n return getValue(type + 'Formats-numberSystem-' +\n numSystem + (isAccount ? '.accounting' : '.standard'), obj) || (isAccount ? getValue(type + 'Formats-numberSystem-' +\n numSystem + '.standard', obj) : '');\n }\n IntlBase.getSymbolPattern = getSymbolPattern;\n /**\n *\n * @param {string} format ?\n * @returns {string} ?\n */\n function ConvertDateToWeekFormat(format) {\n var convertMapper = format.match(IntlBase.dateConverterMapper);\n if (convertMapper && isBlazor()) {\n var tempString = convertMapper[0].length === 3 ? 'EEE' : 'EEEE';\n return format.replace(IntlBase.dateConverterMapper, tempString);\n }\n return format;\n }\n IntlBase.ConvertDateToWeekFormat = ConvertDateToWeekFormat;\n /**\n *\n * @param {DateFormatOptions} formatOptions ?\n * @param {string} culture ?\n * @returns {DateFormatOptions} ?\n */\n function compareBlazorDateFormats(formatOptions, culture) {\n var format = formatOptions.format || formatOptions.skeleton;\n var curFormatMapper = getValue((culture || 'en-US') + '.' + format, blazorCultureFormats);\n if (!curFormatMapper) {\n curFormatMapper = getValue('en-US.' + format, blazorCultureFormats);\n }\n if (curFormatMapper) {\n curFormatMapper = ConvertDateToWeekFormat(curFormatMapper);\n formatOptions.format = curFormatMapper.replace(/tt/, 'a');\n }\n return formatOptions;\n }\n IntlBase.compareBlazorDateFormats = compareBlazorDateFormats;\n /**\n * Returns proper numeric skeleton\n *\n * @private\n * @param {string} skeleton ?\n * @returns {any} ?\n */\n function getProperNumericSkeleton(skeleton) {\n var matches = skeleton.match(IntlBase.formatRegex);\n var ret = {};\n var pattern = matches[1].toUpperCase();\n ret.isAccount = (pattern === 'A');\n // eslint-disable-next-line\n ret.type = IntlBase.patternMatcher[pattern];\n if (skeleton.length > 1) {\n ret.fractionDigits = parseInt(matches[2], 10);\n }\n return ret;\n }\n IntlBase.getProperNumericSkeleton = getProperNumericSkeleton;\n /**\n * Returns format data for number formatting like minimum fraction, maximum fraction, etc..,\n *\n * @private\n * @param {string} pattern ?\n * @param {boolean} needFraction ?\n * @param {string} cSymbol ?\n * @param {boolean} fractionOnly ?\n * @returns {any} ?\n */\n function getFormatData(pattern, needFraction, cSymbol, fractionOnly) {\n var nData = fractionOnly ? {} : { nlead: '', nend: '' };\n var match = pattern.match(IntlBase.customRegex);\n if (match) {\n if (!fractionOnly) {\n nData.nlead = changeCurrencySymbol(match[1], cSymbol);\n nData.nend = changeCurrencySymbol(match[10], cSymbol);\n nData.groupPattern = match[4];\n }\n var fraction = match[7];\n if (fraction && needFraction) {\n var fmatch = fraction.match(fractionRegex);\n if (!isNullOrUndefined(fmatch)) {\n nData.minimumFraction = fmatch.length;\n }\n else {\n nData.minimumFraction = 0;\n }\n nData.maximumFraction = fraction.length - 1;\n }\n }\n return nData;\n }\n IntlBase.getFormatData = getFormatData;\n /**\n * Changes currency symbol\n *\n * @private\n * @param {string} val ?\n * @param {string} sym ?\n * @returns {string} ?\n */\n function changeCurrencySymbol(val, sym) {\n if (val) {\n return val.replace(IntlBase.defaultCurrency, sym);\n }\n return '';\n }\n IntlBase.changeCurrencySymbol = changeCurrencySymbol;\n /**\n * Returns currency symbol based on currency code ?\n *\n * @private\n * @param {Object} numericObject ?\n * @param {string} currencyCode ?\n * @param {string} altSymbol ?\n * @returns {string} ?\n */\n function getCurrencySymbol(numericObject, currencyCode, altSymbol) {\n var symbol = altSymbol ? ('.' + altSymbol) : '.symbol';\n var getCurrency = getValue('currencies.' + currencyCode + symbol, numericObject) ||\n getValue('currencies.' + currencyCode + '.symbol-alt-narrow', numericObject) || '$';\n return getCurrency;\n }\n IntlBase.getCurrencySymbol = getCurrencySymbol;\n /**\n * Returns formatting options for custom number format\n *\n * @private\n * @param {string} format ?\n * @param {CommonOptions} dOptions ?\n * @param {any} obj ?\n * @returns {any} ?\n */\n function customFormat(format, dOptions, obj) {\n var options = {};\n var formatSplit = format.split(';');\n var data = ['pData', 'nData', 'zeroData'];\n for (var i = 0; i < formatSplit.length; i++) {\n // eslint-disable-next-line\n options[data[i]] = customNumberFormat(formatSplit[i], dOptions, obj);\n }\n if (isNullOrUndefined(options.nData)) {\n options.nData = extend({}, options.pData);\n options.nData.nlead = isNullOrUndefined(dOptions) ? '-' + options.nData.nlead : dOptions.minusSymbol + options.nData.nlead;\n }\n return options;\n }\n IntlBase.customFormat = customFormat;\n /**\n * Returns custom formatting options\n *\n * @private\n * @param {string} format ?\n * @param {CommonOptions} dOptions ?\n * @param {Object} numObject ?\n * @returns {any} ?\n */\n function customNumberFormat(format, dOptions, numObject) {\n var cOptions = { type: 'decimal', minimumFractionDigits: 0, maximumFractionDigits: 0 };\n var pattern = format.match(IntlBase.customRegex);\n if (isNullOrUndefined(pattern) || (pattern[5] === '' && format !== 'N/A')) {\n cOptions.type = undefined;\n return cOptions;\n }\n cOptions.nlead = pattern[1];\n cOptions.nend = pattern[10];\n var integerPart = pattern[6];\n var spaceCapture = integerPart.match(/\\ $/g) ? true : false;\n var spaceGrouping = integerPart.replace(/\\ $/g, '').indexOf(' ') !== -1;\n cOptions.useGrouping = integerPart.indexOf(',') !== -1 || spaceGrouping;\n integerPart = integerPart.replace(/,/g, '');\n var fractionPart = pattern[7];\n if (integerPart.indexOf('0') !== -1) {\n cOptions.minimumIntegerDigits = integerPart.length - integerPart.indexOf('0');\n }\n if (!isNullOrUndefined(fractionPart)) {\n cOptions.minimumFractionDigits = fractionPart.lastIndexOf('0');\n cOptions.maximumFractionDigits = fractionPart.lastIndexOf('#');\n if (cOptions.minimumFractionDigits === -1) {\n cOptions.minimumFractionDigits = 0;\n }\n if (cOptions.maximumFractionDigits === -1 || cOptions.maximumFractionDigits < cOptions.minimumFractionDigits) {\n cOptions.maximumFractionDigits = cOptions.minimumFractionDigits;\n }\n }\n if (!isNullOrUndefined(dOptions)) {\n extend(cOptions, isCurrencyPercent([cOptions.nlead, cOptions.nend], '$', dOptions.currencySymbol));\n if (!cOptions.isCurrency) {\n extend(cOptions, isCurrencyPercent([cOptions.nlead, cOptions.nend], '%', dOptions.percentSymbol));\n }\n }\n else {\n extend(cOptions, isCurrencyPercent([cOptions.nlead, cOptions.nend], '%', '%'));\n }\n if (!isNullOrUndefined(numObject)) {\n var symbolPattern = getSymbolPattern(cOptions.type, dOptions.numberMapper.numberSystem, numObject, false);\n if (cOptions.useGrouping) {\n // eslint-disable-next-line\n cOptions.groupSeparator = spaceGrouping ? ' ' : dOptions.numberMapper.numberSymbols[mapper[2]];\n cOptions.groupData = NumberFormat.getGroupingDetails(symbolPattern.split(';')[0]);\n }\n cOptions.nlead = cOptions.nlead.replace(/'/g, '');\n cOptions.nend = spaceCapture ? ' ' + cOptions.nend.replace(/'/g, '') : cOptions.nend.replace(/'/g, '');\n }\n return cOptions;\n }\n IntlBase.customNumberFormat = customNumberFormat;\n /**\n * Returns formatting options for currency or percent type\n *\n * @private\n * @param {string[]} parts ?\n * @param {string} actual ?\n * @param {string} symbol ?\n * @returns {any} ?\n */\n function isCurrencyPercent(parts, actual, symbol) {\n var options = { nlead: parts[0], nend: parts[1] };\n for (var i = 0; i < 2; i++) {\n var part = parts[parseInt(i.toString(), 10)];\n var loc = part.indexOf(actual);\n if ((loc !== -1) && ((loc < part.indexOf('\\'')) || (loc > part.lastIndexOf('\\'')))) {\n // eslint-disable-next-line\n options[typeMapper[i]] = part.substr(0, loc) + symbol + part.substr(loc + 1);\n // eslint-disable-next-line\n options[typeMapper[actual]] = true;\n options.type = options.isCurrency ? 'currency' : 'percent';\n break;\n }\n }\n return options;\n }\n IntlBase.isCurrencyPercent = isCurrencyPercent;\n /**\n * Returns culture based date separator\n *\n * @private\n * @param {Object} dateObj ?\n * @returns {string} ?\n */\n function getDateSeparator(dateObj) {\n var value = (getValue('dateFormats.short', dateObj) || '').match(/[dM]([^dM])[dM]/i);\n return value ? value[1] : '/';\n }\n IntlBase.getDateSeparator = getDateSeparator;\n /**\n * Returns Native Date Time pattern\n *\n * @private\n * @param {string} culture ?\n * @param {DateFormatOptions} options ?\n * @param {Object} cldr ?\n * @param {boolean} isExcelFormat ?\n * @returns {string} ?\n */\n function getActualDateTimeFormat(culture, options, cldr, isExcelFormat) {\n var dependable = getDependables(cldr, culture, options.calendar);\n if (isBlazor()) {\n options = compareBlazorDateFormats(options, culture);\n }\n var actualPattern = options.format || getResultantPattern(options.skeleton, dependable.dateObject, options.type);\n if (isExcelFormat) {\n actualPattern = actualPattern.replace(patternRegex, function (pattern) {\n // eslint-disable-next-line\n return patternMatch[pattern];\n });\n if (actualPattern.indexOf('z') !== -1) {\n var tLength = actualPattern.match(/z/g).length;\n var timeZonePattern = void 0;\n var options_1 = { 'timeZone': {} };\n options_1.numMapper = parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr));\n options_1.timeZone = getValue('dates.timeZoneNames', dependable.parserObject);\n var value = new Date();\n var timezone = value.getTimezoneOffset();\n var pattern = (tLength < 4) ? '+H;-H' : options_1.timeZone.hourFormat;\n pattern = pattern.replace(/:/g, options_1.numMapper.timeSeparator);\n if (timezone === 0) {\n timeZonePattern = options_1.timeZone.gmtZeroFormat;\n }\n else {\n timeZonePattern = DateFormat.getTimeZoneValue(timezone, pattern);\n timeZonePattern = options_1.timeZone.gmtFormat.replace(/\\{0\\}/, timeZonePattern);\n }\n actualPattern = actualPattern.replace(/[z]+/, '\"' + timeZonePattern + '\"');\n }\n actualPattern = actualPattern.replace(/ $/, '');\n }\n return actualPattern;\n }\n IntlBase.getActualDateTimeFormat = getActualDateTimeFormat;\n /**\n *\n * @param {string} actual ?\n * @param {any} option ?\n * @returns {any} ?\n */\n // eslint-disable-next-line\n function processSymbol(actual, option) {\n if (actual.indexOf(',') !== -1) {\n // eslint-disable-next-line\n var split = actual.split(',');\n actual = (split[0] + getValue('numberMapper.numberSymbols.group', option) +\n split[1].replace('.', getValue('numberMapper.numberSymbols.decimal', option)));\n }\n else {\n actual = actual.replace('.', getValue('numberMapper.numberSymbols.decimal', option));\n }\n return actual;\n }\n /**\n * Returns Native Number pattern\n *\n * @private\n * @param {string} culture ?\n * @param {NumberFormatOptions} options ?\n * @param {Object} cldr ?\n * @param {boolean} isExcel ?\n * @returns {string} ?\n */\n function getActualNumberFormat(culture, options, cldr, isExcel) {\n var dependable = getDependables(cldr, culture, '', true);\n var parseOptions = { custom: true };\n var numrericObject = dependable.numericObject;\n var minFrac;\n var curObj = {};\n var curMatch = (options.format || '').match(IntlBase.currencyFormatRegex);\n var type = IntlBase.formatRegex.test(options.format) ? getProperNumericSkeleton(options.format || 'N') : {};\n var dOptions = {};\n if (curMatch) {\n dOptions.numberMapper = isBlazor() ?\n extend({}, dependable.numericObject) :\n parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr), true);\n var curCode = isBlazor() ? getValue('currencySymbol', dependable.numericObject) :\n getCurrencySymbol(dependable.numericObject, options.currency || defaultCurrencyCode, options.altSymbol);\n var symbolPattern = getSymbolPattern('currency', dOptions.numberMapper.numberSystem, dependable.numericObject, (/a/i).test(options.format));\n symbolPattern = symbolPattern.replace(/\\u00A4/g, curCode);\n var split = symbolPattern.split(';');\n curObj.hasNegativePattern = isBlazor() ? true : (split.length > 1);\n curObj.nData = isBlazor() ? getValue(type.type + 'nData', numrericObject) :\n getFormatData(split[1] || '-' + split[0], true, curCode);\n curObj.pData = isBlazor() ? getValue(type.type + 'pData', numrericObject) :\n getFormatData(split[0], false, curCode);\n if (!curMatch[2] && !options.minimumFractionDigits && !options.maximumFractionDigits) {\n minFrac = getFormatData(symbolPattern.split(';')[0], true, '', true).minimumFraction;\n }\n }\n var actualPattern;\n if ((IntlBase.formatRegex.test(options.format)) || !(options.format)) {\n extend(parseOptions, getProperNumericSkeleton(options.format || 'N'));\n parseOptions.custom = false;\n actualPattern = '###0';\n if (parseOptions.fractionDigits || options.minimumFractionDigits || options.maximumFractionDigits || minFrac) {\n var defaultMinimum = 0;\n if (parseOptions.fractionDigits) {\n options.minimumFractionDigits = options.maximumFractionDigits = parseOptions.fractionDigits;\n }\n actualPattern = fractionDigitsPattern(actualPattern, minFrac || parseOptions.fractionDigits ||\n options.minimumFractionDigits || defaultMinimum, options.maximumFractionDigits || defaultMinimum);\n }\n if (options.minimumIntegerDigits) {\n actualPattern = minimumIntegerPattern(actualPattern, options.minimumIntegerDigits);\n }\n if (options.useGrouping) {\n actualPattern = groupingPattern(actualPattern);\n }\n if (parseOptions.type === 'currency' || (parseOptions.type && isBlazor())) {\n if (isBlazor() && parseOptions.type !== 'currency') {\n curObj.pData = getValue(parseOptions.type + 'pData', numrericObject);\n curObj.nData = getValue(parseOptions.type + 'nData', numrericObject);\n }\n var cPattern = actualPattern;\n actualPattern = curObj.pData.nlead + cPattern + curObj.pData.nend;\n if (curObj.hasNegativePattern || isBlazor()) {\n actualPattern += ';' + curObj.nData.nlead + cPattern + curObj.nData.nend;\n }\n }\n if (parseOptions.type === 'percent' && !isBlazor()) {\n actualPattern += ' %';\n }\n }\n else {\n actualPattern = options.format.replace(/'/g, '\"');\n }\n if (Object.keys(dOptions).length > 0) {\n actualPattern = !isExcel ? processSymbol(actualPattern, dOptions) : actualPattern;\n }\n return actualPattern;\n }\n IntlBase.getActualNumberFormat = getActualNumberFormat;\n /**\n *\n * @param {string} pattern ?\n * @param {number} minDigits ?\n * @param {number} maxDigits ?\n * @returns {string} ?\n */\n function fractionDigitsPattern(pattern, minDigits, maxDigits) {\n pattern += '.';\n for (var a = 0; a < minDigits; a++) {\n pattern += '0';\n }\n if (minDigits < maxDigits) {\n var diff = maxDigits - minDigits;\n for (var b = 0; b < diff; b++) {\n pattern += '#';\n }\n }\n return pattern;\n }\n IntlBase.fractionDigitsPattern = fractionDigitsPattern;\n /**\n *\n * @param {string} pattern ?\n * @param {number} digits ?\n * @returns {string} ?\n */\n function minimumIntegerPattern(pattern, digits) {\n var temp = pattern.split('.');\n var integer = '';\n for (var x = 0; x < digits; x++) {\n integer += '0';\n }\n return temp[1] ? (integer + '.' + temp[1]) : integer;\n }\n IntlBase.minimumIntegerPattern = minimumIntegerPattern;\n /**\n *\n * @param {string} pattern ?\n * @returns {string} ?\n */\n function groupingPattern(pattern) {\n var temp = pattern.split('.');\n var integer = temp[0];\n var no = 3 - integer.length % 3;\n var hash = (no && no === 1) ? '#' : (no === 2 ? '##' : '');\n integer = hash + integer;\n pattern = '';\n for (var x = integer.length - 1; x > 0; x = x - 3) {\n pattern = ',' + integer[x - 2] + integer[x - 1] + integer[parseInt(x.toString(), 10)] + pattern;\n }\n pattern = pattern.slice(1);\n return temp[1] ? (pattern + '.' + temp[1]) : pattern;\n }\n IntlBase.groupingPattern = groupingPattern;\n /**\n *\n * @param {string} culture ?\n * @param {Object} cldr ?\n * @returns {number} ?\n */\n function getWeekData(culture, cldr) {\n var firstDay = defaultFirstDay;\n var mapper = getValue('supplemental.weekData.firstDay', cldr);\n var iCulture = culture;\n if ((/en-/).test(iCulture)) {\n iCulture = iCulture.slice(3);\n }\n iCulture = iCulture.slice(0, 2).toUpperCase() + iCulture.substr(2);\n if (mapper) {\n firstDay = mapper[\"\" + iCulture] || mapper[iCulture.slice(0, 2)] || defaultFirstDay;\n }\n return firstDayMapper[\"\" + firstDay];\n }\n IntlBase.getWeekData = getWeekData;\n /**\n * @private\n * @param {any} pData ?\n * @param {string} aCurrency ?\n * @param {string} rCurrency ?\n * @returns {void} ?\n */\n function replaceBlazorCurrency(pData, aCurrency, rCurrency) {\n var iCurrency = getBlazorCurrencySymbol(rCurrency);\n if (aCurrency !== iCurrency) {\n for (var _i = 0, pData_1 = pData; _i < pData_1.length; _i++) {\n var data = pData_1[_i];\n data.nend = data.nend.replace(aCurrency, iCurrency);\n data.nlead = data.nlead.replace(aCurrency, iCurrency);\n }\n }\n }\n IntlBase.replaceBlazorCurrency = replaceBlazorCurrency;\n /**\n * @private\n * @param {Date} date ?\n * @returns {number} ?\n */\n function getWeekOfYear(date) {\n var newYear = new Date(date.getFullYear(), 0, 1);\n var day = newYear.getDay();\n var weeknum;\n day = (day >= 0 ? day : day + 7);\n var daynum = Math.floor((date.getTime() - newYear.getTime() -\n (date.getTimezoneOffset() - newYear.getTimezoneOffset()) * 60000) / 86400000) + 1;\n if (day < 4) {\n weeknum = Math.floor((daynum + day - 1) / 7) + 1;\n if (weeknum > 52) {\n var nYear = new Date(date.getFullYear() + 1, 0, 1);\n var nday = nYear.getDay();\n nday = nday >= 0 ? nday : nday + 7;\n weeknum = nday < 4 ? 1 : 53;\n }\n }\n else {\n weeknum = Math.floor((daynum + day - 1) / 7);\n }\n return weeknum;\n }\n IntlBase.getWeekOfYear = getWeekOfYear;\n})(IntlBase || (IntlBase = {}));\n","import { isNullOrUndefined, merge } from './util';\nvar headerRegex = /^(.*?):[ \\t]*([^\\r\\n]*)$/gm;\nvar defaultType = 'GET';\n/**\n * Ajax class provides ability to make asynchronous HTTP request to the server\n * ```typescript\n * var ajax = new Ajax(\"index.html\", \"GET\", true);\n * ajax.send().then(\n * function (value) {\n * console.log(value);\n * },\n * function (reason) {\n * console.log(reason);\n * });\n * ```\n */\nvar Ajax = /** @class */ (function () {\n /**\n * Constructor for Ajax class\n *\n * @param {string|Object} options ?\n * @param {string} type ?\n * @param {boolean} async ?\n * @returns defaultType any\n */\n function Ajax(options, type, async, contentType) {\n /**\n * A boolean value indicating whether the request should be sent asynchronous or not.\n *\n * @default true\n */\n this.mode = true;\n /**\n * A boolean value indicating whether to ignore the promise reject.\n *\n * @private\n * @default true\n */\n this.emitError = true;\n this.options = {};\n if (typeof options === 'string') {\n this.url = options;\n this.type = type ? type.toUpperCase() : defaultType;\n this.mode = !isNullOrUndefined(async) ? async : true;\n }\n else if (typeof options === 'object') {\n this.options = options;\n merge(this, this.options);\n }\n this.type = this.type ? this.type.toUpperCase() : defaultType;\n this.contentType = (this.contentType !== undefined) ? this.contentType : contentType;\n }\n /**\n *\n * Send the request to server.\n *\n * @param {any} data - To send the user data\n * @return {Promise} ?\n */\n Ajax.prototype.send = function (data) {\n var _this = this;\n this.data = isNullOrUndefined(data) ? this.data : data;\n var eventArgs = {\n cancel: false,\n httpRequest: null\n };\n var promise = new Promise(function (resolve, reject) {\n _this.httpRequest = new XMLHttpRequest();\n _this.httpRequest.onreadystatechange = function () { _this.stateChange(resolve, reject); };\n if (!isNullOrUndefined(_this.onLoad)) {\n _this.httpRequest.onload = _this.onLoad;\n }\n if (!isNullOrUndefined(_this.onProgress)) {\n _this.httpRequest.onprogress = _this.onProgress;\n }\n /* istanbul ignore next */\n if (!isNullOrUndefined(_this.onAbort)) {\n _this.httpRequest.onabort = _this.onAbort;\n }\n /* istanbul ignore next */\n if (!isNullOrUndefined(_this.onError)) {\n _this.httpRequest.onerror = _this.onError;\n }\n //** Upload Events **/\n /* istanbul ignore next */\n if (!isNullOrUndefined(_this.onUploadProgress)) {\n _this.httpRequest.upload.onprogress = _this.onUploadProgress;\n }\n _this.httpRequest.open(_this.type, _this.url, _this.mode);\n // Set default headers\n if (!isNullOrUndefined(_this.data) && _this.contentType !== null) {\n _this.httpRequest.setRequestHeader('Content-Type', _this.contentType || 'application/json; charset=utf-8');\n }\n if (_this.beforeSend) {\n eventArgs.httpRequest = _this.httpRequest;\n _this.beforeSend(eventArgs);\n }\n if (!eventArgs.cancel) {\n _this.httpRequest.send(!isNullOrUndefined(_this.data) ? _this.data : null);\n }\n });\n return promise;\n };\n Ajax.prototype.successHandler = function (data) {\n if (this.onSuccess) {\n this.onSuccess(data, this);\n }\n return data;\n };\n Ajax.prototype.failureHandler = function (reason) {\n if (this.onFailure) {\n this.onFailure(this.httpRequest);\n }\n return reason;\n };\n Ajax.prototype.stateChange = function (resolve, reject) {\n var data = this.httpRequest.responseText;\n if (this.dataType && this.dataType.toLowerCase() === 'json') {\n if (data === '') {\n data = undefined;\n }\n else {\n try {\n data = JSON.parse(data);\n }\n catch (error) {\n // no exception handle\n }\n }\n }\n if (this.httpRequest.readyState === 4) {\n //success range should be 200 to 299\n if ((this.httpRequest.status >= 200 && this.httpRequest.status <= 299) || this.httpRequest.status === 304) {\n resolve(this.successHandler(data));\n }\n else {\n if (this.emitError) {\n reject(new Error(this.failureHandler(this.httpRequest.statusText)));\n }\n else {\n resolve();\n }\n }\n }\n };\n /**\n * To get the response header from XMLHttpRequest\n *\n * @param {string} key Key to search in the response header\n * @returns {string} ?\n */\n Ajax.prototype.getResponseHeader = function (key) {\n var responseHeaders;\n var header;\n // eslint-disable-next-line\n responseHeaders = {};\n var headers = headerRegex.exec(this.httpRequest.getAllResponseHeaders());\n while (headers) {\n responseHeaders[headers[1].toLowerCase()] = headers[2];\n headers = headerRegex.exec(this.httpRequest.getAllResponseHeaders());\n }\n // eslint-disable-next-line\n header = responseHeaders[key.toLowerCase()];\n return isNullOrUndefined(header) ? null : header;\n };\n return Ajax;\n}());\nexport { Ajax };\n","import { isUndefined } from './util';\nvar REGX_MOBILE = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile/i;\nvar REGX_IE = /msie|trident/i;\nvar REGX_IE11 = /Trident\\/7\\./;\nvar REGX_IOS = /(ipad|iphone|ipod touch)/i;\nvar REGX_IOS7 = /(ipad|iphone|ipod touch);.*os 7_\\d|(ipad|iphone|ipod touch);.*os 8_\\d/i;\nvar REGX_ANDROID = /android/i;\nvar REGX_WINDOWS = /trident|windows phone|edge/i;\nvar REGX_VERSION = /(version)[ /]([\\w.]+)/i;\nvar REGX_BROWSER = {\n OPERA: /(opera|opr)(?:.*version|)[ /]([\\w.]+)/i,\n EDGE: /(edge)(?:.*version|)[ /]([\\w.]+)/i,\n CHROME: /(chrome|crios)[ /]([\\w.]+)/i,\n PANTHOMEJS: /(phantomjs)[ /]([\\w.]+)/i,\n SAFARI: /(safari)[ /]([\\w.]+)/i,\n WEBKIT: /(webkit)[ /]([\\w.]+)/i,\n MSIE: /(msie|trident) ([\\w.]+)/i,\n MOZILLA: /(mozilla)(?:.*? rv:([\\w.]+)|)/i\n};\n/* istanbul ignore else */\nif (typeof window !== 'undefined') {\n window.browserDetails = window.browserDetails || {};\n}\n/**\n * Get configuration details for Browser\n *\n * @private\n */\nvar Browser = /** @class */ (function () {\n function Browser() {\n }\n Browser.extractBrowserDetail = function () {\n var browserInfo = { culture: {} };\n var keys = Object.keys(REGX_BROWSER);\n var clientInfo = [];\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n clientInfo = Browser.userAgent.match(REGX_BROWSER[\"\" + key]);\n if (clientInfo) {\n browserInfo.name = (clientInfo[1].toLowerCase() === 'opr' ? 'opera' : clientInfo[1].toLowerCase());\n browserInfo.name = (clientInfo[1].toLowerCase() === 'crios' ? 'chrome' : browserInfo.name);\n browserInfo.version = clientInfo[2];\n browserInfo.culture.name = browserInfo.culture.language = navigator.language;\n // eslint-disable-next-line\n if (!!Browser.userAgent.match(REGX_IE11)) {\n browserInfo.name = 'msie';\n break;\n }\n var version = Browser.userAgent.match(REGX_VERSION);\n if (browserInfo.name === 'safari' && version) {\n browserInfo.version = version[2];\n }\n break;\n }\n }\n return browserInfo;\n };\n /**\n * To get events from the browser\n *\n * @param {string} event - type of event triggered.\n * @returns {boolean}\n */\n Browser.getEvent = function (event) {\n // eslint-disable-next-line\n var events = {\n start: {\n isPointer: 'pointerdown', isTouch: 'touchstart', isDevice: 'mousedown'\n },\n move: {\n isPointer: 'pointermove', isTouch: 'touchmove', isDevice: 'mousemove'\n },\n end: {\n isPointer: 'pointerup', isTouch: 'touchend', isDevice: 'mouseup'\n },\n cancel: {\n isPointer: 'pointercancel', isTouch: 'touchcancel', isDevice: 'mouseleave'\n }\n };\n return (Browser.isPointer ? events[\"\" + event].isPointer :\n (Browser.isTouch ? events[\"\" + event].isTouch + (!Browser.isDevice ? ' ' + events[\"\" + event].isDevice : '')\n : events[\"\" + event].isDevice));\n };\n /**\n * To get the Touch start event from browser\n *\n * @returns {string}\n */\n Browser.getTouchStartEvent = function () {\n return Browser.getEvent('start');\n };\n /**\n * To get the Touch end event from browser\n *\n * @returns {string}\n */\n Browser.getTouchEndEvent = function () {\n return Browser.getEvent('end');\n };\n /**\n * To get the Touch move event from browser\n *\n * @returns {string}\n */\n Browser.getTouchMoveEvent = function () {\n return Browser.getEvent('move');\n };\n /**\n * To cancel the touch event from browser\n *\n * @returns {string}\n */\n Browser.getTouchCancelEvent = function () {\n return Browser.getEvent('cancel');\n };\n /**\n * To get the value based on provided key and regX\n *\n * @param {string} key ?\n * @param {RegExp} regX ?\n * @returns {Object} ?\n */\n Browser.getValue = function (key, regX) {\n var browserDetails = typeof window !== 'undefined' ? window.browserDetails : {};\n if (typeof navigator !== 'undefined' && navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 && Browser.isTouch === true) {\n browserDetails['isIos'] = true;\n browserDetails['isDevice'] = true;\n browserDetails['isTouch'] = true;\n browserDetails['isPointer'] = true;\n }\n if ('undefined' === typeof browserDetails[\"\" + key]) {\n return browserDetails[\"\" + key] = regX.test(Browser.userAgent);\n }\n return browserDetails[\"\" + key];\n };\n Object.defineProperty(Browser, \"userAgent\", {\n get: function () {\n return Browser.uA;\n },\n //Properties\n /**\n * Property specifies the userAgent of the browser. Default userAgent value is based on the browser.\n * Also we can set our own userAgent.\n *\n * @param {string} uA ?\n */\n set: function (uA) {\n Browser.uA = uA;\n window.browserDetails = {};\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"info\", {\n //Read Only Properties\n /**\n * Property is to get the browser information like Name, Version and Language\n *\n * @returns {BrowserInfo} ?\n */\n get: function () {\n if (isUndefined(window.browserDetails.info)) {\n return window.browserDetails.info = Browser.extractBrowserDetail();\n }\n return window.browserDetails.info;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isIE\", {\n /**\n * Property is to get whether the userAgent is based IE.\n *\n * @returns {boolean} ?\n */\n get: function () {\n return Browser.getValue('isIE', REGX_IE);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isTouch\", {\n /**\n * Property is to get whether the browser has touch support.\n *\n * @returns {boolean} ?\n */\n get: function () {\n if (isUndefined(window.browserDetails.isTouch)) {\n return (window.browserDetails.isTouch =\n ('ontouchstart' in window.navigator) ||\n (window &&\n window.navigator &&\n (window.navigator.maxTouchPoints > 0)) || ('ontouchstart' in window));\n }\n return window.browserDetails.isTouch;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isPointer\", {\n /**\n * Property is to get whether the browser has Pointer support.\n *\n * @returns {boolean} ?\n */\n get: function () {\n if (isUndefined(window.browserDetails.isPointer)) {\n return window.browserDetails.isPointer = ('pointerEnabled' in window.navigator);\n }\n return window.browserDetails.isPointer;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isMSPointer\", {\n /**\n * Property is to get whether the browser has MSPointer support.\n *\n * @returns {boolean} ?\n */\n get: function () {\n if (isUndefined(window.browserDetails.isMSPointer)) {\n return window.browserDetails.isMSPointer = ('msPointerEnabled' in window.navigator);\n }\n return window.browserDetails.isMSPointer;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isDevice\", {\n /**\n * Property is to get whether the userAgent is device based.\n *\n * @returns {boolean} ?\n */\n get: function () {\n return Browser.getValue('isDevice', REGX_MOBILE);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isIos\", {\n /**\n * Property is to get whether the userAgent is IOS.\n *\n * @returns {boolean} ?\n */\n get: function () {\n return Browser.getValue('isIos', REGX_IOS);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isIos7\", {\n /**\n * Property is to get whether the userAgent is Ios7.\n *\n * @returns {boolean} ?\n */\n get: function () {\n return Browser.getValue('isIos7', REGX_IOS7);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isAndroid\", {\n /**\n * Property is to get whether the userAgent is Android.\n *\n * @returns {boolean} ?\n */\n get: function () {\n return Browser.getValue('isAndroid', REGX_ANDROID);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isWebView\", {\n /**\n * Property is to identify whether application ran in web view.\n *\n * @returns {boolean} ?\n */\n get: function () {\n if (isUndefined(window.browserDetails.isWebView)) {\n window.browserDetails.isWebView = !(isUndefined(window.cordova) && isUndefined(window.PhoneGap)\n && isUndefined(window.phonegap) && window.forge !== 'object');\n return window.browserDetails.isWebView;\n }\n return window.browserDetails.isWebView;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isWindows\", {\n /**\n * Property is to get whether the userAgent is Windows.\n *\n * @returns {boolean} ?\n */\n get: function () {\n return Browser.getValue('isWindows', REGX_WINDOWS);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"touchStartEvent\", {\n /**\n * Property is to get the touch start event. It returns event name based on browser.\n *\n * @returns {string} ?\n */\n get: function () {\n if (isUndefined(window.browserDetails.touchStartEvent)) {\n return window.browserDetails.touchStartEvent = Browser.getTouchStartEvent();\n }\n return window.browserDetails.touchStartEvent;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"touchMoveEvent\", {\n /**\n * Property is to get the touch move event. It returns event name based on browser.\n *\n * @returns {string} ?\n */\n get: function () {\n if (isUndefined(window.browserDetails.touchMoveEvent)) {\n return window.browserDetails.touchMoveEvent = Browser.getTouchMoveEvent();\n }\n return window.browserDetails.touchMoveEvent;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"touchEndEvent\", {\n /**\n * Property is to get the touch end event. It returns event name based on browser.\n *\n * @returns {string} ?\n */\n get: function () {\n if (isUndefined(window.browserDetails.touchEndEvent)) {\n return window.browserDetails.touchEndEvent = Browser.getTouchEndEvent();\n }\n return window.browserDetails.touchEndEvent;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"touchCancelEvent\", {\n /**\n * Property is to cancel the touch end event.\n *\n * @returns {string} ?\n */\n get: function () {\n if (isUndefined(window.browserDetails.touchCancelEvent)) {\n return window.browserDetails.touchCancelEvent = Browser.getTouchCancelEvent();\n }\n return window.browserDetails.touchCancelEvent;\n },\n enumerable: true,\n configurable: true\n });\n /* istanbul ignore next */\n Browser.uA = typeof navigator !== 'undefined' ? navigator.userAgent : '';\n return Browser;\n}());\nexport { Browser };\n","import { debounce, extend } from './util';\nimport { Browser } from './browser';\n/**\n * EventHandler class provides option to add, remove, clear and trigger events to a HTML DOM element\n * ```html\n *
\n * \n * ```\n */\nvar EventHandler = /** @class */ (function () {\n function EventHandler() {\n }\n // to get the event data based on element\n EventHandler.addOrGetEventData = function (element) {\n if ('__eventList' in element) {\n return element.__eventList.events;\n }\n else {\n element.__eventList = {};\n return element.__eventList.events = [];\n }\n };\n /**\n * Add an event to the specified DOM element.\n *\n * @param {any} element - Target HTML DOM element\n * @param {string} eventName - A string that specifies the name of the event\n * @param {Function} listener - Specifies the function to run when the event occurs\n * @param {Object} bindTo - A object that binds 'this' variable in the event handler\n * @param {number} intDebounce - Specifies at what interval given event listener should be triggered.\n * @returns {Function} ?\n */\n EventHandler.add = function (element, eventName, listener, bindTo, intDebounce) {\n var eventData = EventHandler.addOrGetEventData(element);\n var debounceListener;\n if (intDebounce) {\n debounceListener = debounce(listener, intDebounce);\n }\n else {\n debounceListener = listener;\n }\n if (bindTo) {\n debounceListener = debounceListener.bind(bindTo);\n }\n var event = eventName.split(' ');\n for (var i = 0; i < event.length; i++) {\n eventData.push({\n name: event[parseInt(i.toString(), 10)],\n listener: listener,\n debounce: debounceListener\n });\n if (Browser.isIE) {\n element.addEventListener(event[parseInt(i.toString(), 10)], debounceListener);\n }\n else {\n element.addEventListener(event[parseInt(i.toString(), 10)], debounceListener, { passive: false });\n }\n }\n return debounceListener;\n };\n /**\n * Remove an event listener that has been attached before.\n *\n * @param {any} element - Specifies the target html element to remove the event\n * @param {string} eventName - A string that specifies the name of the event to remove\n * @param {Function} listener - Specifies the function to remove\n * @returns {void} ?\n */\n EventHandler.remove = function (element, eventName, listener) {\n var eventData = EventHandler.addOrGetEventData(element);\n var event = eventName.split(' ');\n var _loop_1 = function (j) {\n var index = -1;\n var debounceListener;\n if (eventData && eventData.length !== 0) {\n eventData.some(function (x, i) {\n return x.name === event[parseInt(j.toString(), 10)] && x.listener === listener ?\n (index = i, debounceListener = x.debounce, true) : false;\n });\n }\n if (index !== -1) {\n eventData.splice(index, 1);\n }\n if (debounceListener) {\n element.removeEventListener(event[parseInt(j.toString(), 10)], debounceListener);\n }\n };\n for (var j = 0; j < event.length; j++) {\n _loop_1(j);\n }\n };\n /**\n * Clear all the event listeners that has been previously attached to the element.\n *\n * @param {any} element - Specifies the target html element to clear the events\n * @returns {void} ?\n */\n EventHandler.clearEvents = function (element) {\n var eventData;\n var copyData;\n // eslint-disable-next-line\n eventData = EventHandler.addOrGetEventData(element);\n // eslint-disable-next-line\n copyData = extend([], copyData, eventData);\n for (var i = 0; i < copyData.length; i++) {\n element.removeEventListener(copyData[parseInt(i.toString(), 10)].name, copyData[parseInt(i.toString(), 10)].debounce);\n eventData.shift();\n }\n };\n /**\n * Trigger particular event of the element.\n *\n * @param {any} element - Specifies the target html element to trigger the events\n * @param {string} eventName - Specifies the event to trigger for the specified element.\n * Can be a custom event, or any of the standard events.\n * @param {any} eventProp - Additional parameters to pass on to the event properties\n * @returns {void} ?\n */\n EventHandler.trigger = function (element, eventName, eventProp) {\n var eventData = EventHandler.addOrGetEventData(element);\n for (var _i = 0, eventData_1 = eventData; _i < eventData_1.length; _i++) {\n var event_1 = eventData_1[_i];\n if (event_1.name === eventName) {\n event_1.debounce.call(this, eventProp);\n }\n }\n };\n return EventHandler;\n}());\nexport { EventHandler };\n","/**\n * Functions related to dom operations.\n */\nimport { EventHandler } from './event-handler';\nimport { isNullOrUndefined, getValue, setValue, isObject, extend } from './util';\nvar SVG_REG = /^svg|^path|^g/;\n/**\n * Function to create Html element.\n *\n * @param {string} tagName - Name of the tag, id and class names.\n * @param {ElementProperties} properties - Object to set properties in the element.\n * @param {ElementProperties} properties.id - To set the id to the created element.\n * @param {ElementProperties} properties.className - To add classes to the element.\n * @param {ElementProperties} properties.innerHTML - To set the innerHTML to element.\n * @param {ElementProperties} properties.styles - To set the some custom styles to element.\n * @param {ElementProperties} properties.attrs - To set the attributes to element.\n * @returns {any} ?\n * @private\n */\nexport function createElement(tagName, properties) {\n var element = (SVG_REG.test(tagName) ? document.createElementNS('http://www.w3.org/2000/svg', tagName) : document.createElement(tagName));\n if (typeof (properties) === 'undefined') {\n return element;\n }\n element.innerHTML = (properties.innerHTML ? properties.innerHTML : '');\n if (properties.className !== undefined) {\n element.className = properties.className;\n }\n if (properties.id !== undefined) {\n element.id = properties.id;\n }\n if (properties.styles !== undefined) {\n element.setAttribute('style', properties.styles);\n }\n if (properties.attrs !== undefined) {\n attributes(element, properties.attrs);\n }\n return element;\n}\n/**\n * The function used to add the classes to array of elements\n *\n * @param {Element[]|NodeList} elements - An array of elements that need to add a list of classes\n * @param {string|string[]} classes - String or array of string that need to add an individual element as a class\n * @returns {any} .\n * @private\n */\nexport function addClass(elements, classes) {\n var classList = getClassList(classes);\n for (var _i = 0, _a = elements; _i < _a.length; _i++) {\n var ele = _a[_i];\n for (var _b = 0, classList_1 = classList; _b < classList_1.length; _b++) {\n var className = classList_1[_b];\n if (isObject(ele)) {\n var curClass = getValue('attributes.className', ele);\n if (isNullOrUndefined(curClass)) {\n setValue('attributes.className', className, ele);\n }\n else if (!new RegExp('\\\\b' + className + '\\\\b', 'i').test(curClass)) {\n setValue('attributes.className', curClass + ' ' + className, ele);\n }\n }\n else {\n if (!ele.classList.contains(className)) {\n ele.classList.add(className);\n }\n }\n }\n }\n return elements;\n}\n/**\n * The function used to add the classes to array of elements\n *\n * @param {Element[]|NodeList} elements - An array of elements that need to remove a list of classes\n * @param {string|string[]} classes - String or array of string that need to add an individual element as a class\n * @returns {any} .\n * @private\n */\nexport function removeClass(elements, classes) {\n var classList = getClassList(classes);\n for (var _i = 0, _a = elements; _i < _a.length; _i++) {\n var ele = _a[_i];\n var flag = isObject(ele);\n var canRemove = flag ? getValue('attributes.className', ele) : ele.className !== '';\n if (canRemove) {\n for (var _b = 0, classList_2 = classList; _b < classList_2.length; _b++) {\n var className = classList_2[_b];\n if (flag) {\n var classes_1 = getValue('attributes.className', ele);\n var classArr = classes_1.split(' ');\n var index = classArr.indexOf(className);\n if (index !== -1) {\n classArr.splice(index, 1);\n }\n setValue('attributes.className', classArr.join(' '), ele);\n }\n else {\n ele.classList.remove(className);\n }\n }\n }\n }\n return elements;\n}\n/**\n * The function used to get classlist.\n *\n * @param {string | string[]} classes - An element the need to check visibility\n * @returns {string[]} ?\n * @private\n */\nfunction getClassList(classes) {\n var classList = [];\n if (typeof classes === 'string') {\n classList.push(classes);\n }\n else {\n classList = classes;\n }\n return classList;\n}\n/**\n * The function used to check element is visible or not.\n *\n * @param {Element|Node} element - An element the need to check visibility\n * @returns {boolean} ?\n * @private\n */\nexport function isVisible(element) {\n var ele = element;\n return (ele.style.visibility === '' && ele.offsetWidth > 0);\n}\n/**\n * The function used to insert an array of elements into a first of the element.\n *\n * @param {Element[]|NodeList} fromElements - An array of elements that need to prepend.\n * @param {Element} toElement - An element that is going to prepend.\n * @param {boolean} isEval - ?\n * @returns {Element[] | NodeList} ?\n * @private\n */\nexport function prepend(fromElements, toElement, isEval) {\n var docFrag = document.createDocumentFragment();\n for (var _i = 0, _a = fromElements; _i < _a.length; _i++) {\n var ele = _a[_i];\n docFrag.appendChild(ele);\n }\n toElement.insertBefore(docFrag, toElement.firstElementChild);\n if (isEval) {\n executeScript(toElement);\n }\n return fromElements;\n}\n/**\n * The function used to insert an array of elements into last of the element.\n *\n * @param {Element[]|NodeList} fromElements - An array of elements that need to append.\n * @param {Element} toElement - An element that is going to prepend.\n * @param {boolean} isEval - ?\n * @returns {Element[] | NodeList} ?\n * @private\n */\nexport function append(fromElements, toElement, isEval) {\n var docFrag = document.createDocumentFragment();\n for (var _i = 0, _a = fromElements; _i < _a.length; _i++) {\n var ele = _a[_i];\n docFrag.appendChild(ele);\n }\n toElement.appendChild(docFrag);\n if (isEval) {\n executeScript(toElement);\n }\n return fromElements;\n}\n/**\n * The function is used to evaluate script from Ajax request\n *\n * @param {Element} ele - An element is going to evaluate the script\n * @returns {void} ?\n */\nfunction executeScript(ele) {\n var eleArray = ele.querySelectorAll('script');\n eleArray.forEach(function (element) {\n var script = document.createElement('script');\n script.text = element.innerHTML;\n document.head.appendChild(script);\n detach(script);\n });\n}\n/**\n * The function used to remove the element from parentnode\n *\n * @param {Element|Node|HTMLElement} element - An element that is going to detach from the Dom\n * @returns {any} ?\n * @private\n */\n// eslint-disable-next-line\nexport function detach(element) {\n var parentNode = element.parentNode;\n if (parentNode) {\n return parentNode.removeChild(element);\n }\n}\n/**\n * The function used to remove the element from Dom also clear the bounded events\n *\n * @param {Element|Node|HTMLElement} element - An element remove from the Dom\n * @returns {void} ?\n * @private\n */\nexport function remove(element) {\n var parentNode = element.parentNode;\n EventHandler.clearEvents(element);\n parentNode.removeChild(element);\n}\n/**\n * The function helps to set multiple attributes to an element\n *\n * @param {Element|Node} element - An element that need to set attributes.\n * @param {string} attributes - JSON Object that is going to as attributes.\n * @returns {Element} ?\n * @private\n */\n// eslint-disable-next-line\nexport function attributes(element, attributes) {\n var keys = Object.keys(attributes);\n var ele = element;\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n if (isObject(ele)) {\n var iKey = key;\n if (key === 'tabindex') {\n iKey = 'tabIndex';\n }\n ele.attributes[\"\" + iKey] = attributes[\"\" + key];\n }\n else {\n ele.setAttribute(key, attributes[\"\" + key]);\n }\n }\n return ele;\n}\n/**\n * The function selects the element from giving context.\n *\n * @param {string} selector - Selector string need fetch element\n * @param {Document|Element} context - It is an optional type, That specifies a Dom context.\n * @param {boolean} needsVDOM ?\n * @returns {any} ?\n * @private\n */\n// eslint-disable-next-line\nexport function select(selector, context, needsVDOM) {\n if (context === void 0) { context = document; }\n selector = querySelectId(selector);\n return context.querySelector(selector);\n}\n/**\n * The function selects an array of element from the given context.\n *\n * @param {string} selector - Selector string need fetch element\n * @param {Document|Element} context - It is an optional type, That specifies a Dom context.\n * @param {boolean} needsVDOM ?\n * @returns {HTMLElement[]} ?\n * @private\n */\n// eslint-disable-next-line\nexport function selectAll(selector, context, needsVDOM) {\n if (context === void 0) { context = document; }\n selector = querySelectId(selector);\n var nodeList = context.querySelectorAll(selector);\n return nodeList;\n}\n/**\n * The function selects an id of element from the given context.\n *\n * @param {string} selector - Selector string need fetch element\n * @returns {string} ?\n * @private\n */\nfunction querySelectId(selector) {\n var charRegex = /(!|\"|\\$|%|&|'|\\(|\\)|\\*|\\/|:|;|<|=|\\?|@|\\]|\\^|`|{|}|\\||\\+|~)/g;\n if (selector.match(/#[0-9]/g) || selector.match(charRegex)) {\n var idList = selector.split(',');\n for (var i = 0; i < idList.length; i++) {\n var list = idList[parseInt(i.toString(), 10)].split(' ');\n for (var j = 0; j < list.length; j++) {\n if (list[parseInt(j.toString(), 10)].indexOf('#') > -1) {\n if (!list[parseInt(j.toString(), 10)].match(/\\[.*\\]/)) {\n var splitId = list[parseInt(j.toString(), 10)].split('#');\n if (splitId[1].match(/^\\d/) || splitId[1].match(charRegex)) {\n var setId = list[parseInt(j.toString(), 10)].split('.');\n setId[0] = setId[0].replace(/#/, '[id=\\'') + '\\']';\n list[parseInt(j.toString(), 10)] = setId.join('.');\n }\n }\n }\n }\n idList[parseInt(i.toString(), 10)] = list.join(' ');\n }\n return idList.join(',');\n }\n return selector;\n}\n/**\n * Returns single closest parent element based on class selector.\n *\n * @param {Element} element - An element that need to find the closest element.\n * @param {string} selector - A classSelector of closest element.\n * @returns {Element} ?\n * @private\n */\nexport function closest(element, selector) {\n var el = element;\n if (typeof el.closest === 'function') {\n return el.closest(selector);\n }\n while (el && el.nodeType === 1) {\n if (matches(el, selector)) {\n return el;\n }\n el = el.parentNode;\n }\n return null;\n}\n/**\n * Returns all sibling elements of the given element.\n *\n * @param {Element|Node} element - An element that need to get siblings.\n * @returns {Element[]} ?\n * @private\n */\nexport function siblings(element) {\n var siblings = [];\n var childNodes = Array.prototype.slice.call(element.parentNode.childNodes);\n for (var _i = 0, childNodes_1 = childNodes; _i < childNodes_1.length; _i++) {\n var curNode = childNodes_1[_i];\n if (curNode.nodeType === Node.ELEMENT_NODE && element !== curNode) {\n siblings.push(curNode);\n }\n }\n return siblings;\n}\n/**\n * set the value if not exist. Otherwise set the existing value\n *\n * @param {HTMLElement} element - An element to which we need to set value.\n * @param {string} property - Property need to get or set.\n * @param {string} value - value need to set.\n * @returns {string} ?\n * @private\n */\nexport function getAttributeOrDefault(element, property, value) {\n var attrVal;\n var isObj = isObject(element);\n if (isObj) {\n attrVal = getValue('attributes.' + property, element);\n }\n else {\n attrVal = element.getAttribute(property);\n }\n if (isNullOrUndefined(attrVal) && value) {\n if (!isObj) {\n element.setAttribute(property, value.toString());\n }\n else {\n element.attributes[\"\" + property] = value;\n }\n attrVal = value;\n }\n return attrVal;\n}\n/**\n * Set the style attributes to Html element.\n *\n * @param {HTMLElement} element - Element which we want to set attributes\n * @param {any} attrs - Set the given attributes to element\n * @returns {void} ?\n * @private\n */\nexport function setStyleAttribute(element, attrs) {\n if (attrs !== undefined) {\n Object.keys(attrs).forEach(function (key) {\n // eslint-disable-next-line\n element.style[key] = attrs[key];\n });\n }\n}\n/**\n * Method for add and remove classes to a dom element.\n *\n * @param {Element} element - Element for add and remove classes\n * @param {string[]} addClasses - List of classes need to be add to the element\n * @param {string[]} removeClasses - List of classes need to be remove from the element\n * @returns {void} ?\n * @private\n */\nexport function classList(element, addClasses, removeClasses) {\n addClass([element], addClasses);\n removeClass([element], removeClasses);\n}\n/**\n * Method to check whether the element matches the given selector.\n *\n * @param {Element} element - Element to compare with the selector.\n * @param {string} selector - String selector which element will satisfy.\n * @returns {void} ?\n * @private\n */\nexport function matches(element, selector) {\n // eslint-disable-next-line\n var matches = element.matches || element.msMatchesSelector || element.webkitMatchesSelector;\n if (matches) {\n return matches.call(element, selector);\n }\n else {\n return [].indexOf.call(document.querySelectorAll(selector), element) !== -1;\n }\n}\n/**\n * Method to get the html text from DOM.\n *\n * @param {HTMLElement} ele - Element to compare with the selector.\n * @param {string} innerHTML - String selector which element will satisfy.\n * @returns {void} ?\n * @private\n */\nexport function includeInnerHTML(ele, innerHTML) {\n ele.innerHTML = innerHTML;\n}\n/**\n * Method to get the containsclass.\n *\n * @param {HTMLElement} ele - Element to compare with the selector.\n * @param {string} className - String selector which element will satisfy.\n * @returns {any} ?\n * @private\n */\n// eslint-disable-next-line\nexport function containsClass(ele, className) {\n if (isObject(ele)) {\n // eslint-disable-next-line\n return new RegExp('\\\\b' + className + '\\\\b', 'i').test(ele.attributes.className);\n }\n else {\n return ele.classList.contains(className);\n }\n}\n/**\n * Method to check whether the element matches the given selector.\n *\n * @param {Object} element - Element to compare with the selector.\n * @param {boolean} deep ?\n * @returns {any} ?\n * @private\n */\n// eslint-disable-next-line\nexport function cloneNode(element, deep) {\n if (isObject(element)) {\n if (deep) {\n return extend({}, {}, element, true);\n }\n }\n else {\n return element.cloneNode(deep);\n }\n}\n","import { isUndefined, isNullOrUndefined, merge, setImmediate, setValue, isBlazor, getValue, extend } from './util';\nimport { addClass, removeClass } from './dom';\nimport { Observer } from './observer';\nvar isColEName = new RegExp(']');\n/* tslint:enable:no-any */\n/**\n * Base library module is common module for Framework modules like touch,keyboard and etc.,\n *\n * @private\n */\nvar Base = /** @class */ (function () {\n /**\n * Base constructor accept options and element\n *\n * @param {Object} options ?\n * @param {string} element ?\n */\n function Base(options, element) {\n this.isRendered = false;\n this.isComplexArraySetter = false;\n this.isServerRendered = false;\n this.allowServerDataBinding = true;\n this.isProtectedOnChange = true;\n this.properties = {};\n this.changedProperties = {};\n this.oldProperties = {};\n this.bulkChanges = {};\n this.refreshing = false;\n this.ignoreCollectionWatch = false;\n // eslint-disable-next-line\n this.finalUpdate = function () { };\n this.childChangedProperties = {};\n this.modelObserver = new Observer(this);\n if (!isUndefined(element)) {\n if ('string' === typeof (element)) {\n this.element = document.querySelector(element);\n }\n else {\n this.element = element;\n }\n if (!isNullOrUndefined(this.element)) {\n this.isProtectedOnChange = false;\n this.addInstance();\n }\n }\n if (!isUndefined(options)) {\n this.setProperties(options, true);\n }\n this.isDestroyed = false;\n }\n /** Property base section */\n /**\n * Function used to set bunch of property at a time.\n *\n * @private\n * @param {Object} prop - JSON object which holds components properties.\n * @param {boolean} muteOnChange ? - Specifies to true when we set properties.\n * @returns {void} ?\n */\n Base.prototype.setProperties = function (prop, muteOnChange) {\n var prevDetection = this.isProtectedOnChange;\n this.isProtectedOnChange = !!muteOnChange;\n merge(this, prop);\n if (muteOnChange !== true) {\n merge(this.changedProperties, prop);\n this.dataBind();\n }\n else if (isBlazor() && this.isRendered) {\n this.serverDataBind(prop);\n }\n this.finalUpdate();\n this.changedProperties = {};\n this.oldProperties = {};\n this.isProtectedOnChange = prevDetection;\n };\n /**\n * Calls for child element data bind\n *\n * @param {Object} obj ?\n * @param {Object} parent ?\n * @returns {void} ?\n */\n // tslint:disable-next-line:no-any\n Base.callChildDataBind = function (obj, parent) {\n var keys = Object.keys(obj);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n if (parent[\"\" + key] instanceof Array) {\n for (var _a = 0, _b = parent[\"\" + key]; _a < _b.length; _a++) {\n var obj_1 = _b[_a];\n if (obj_1.dataBind !== undefined) {\n obj_1.dataBind();\n }\n }\n }\n else {\n parent[\"\" + key].dataBind();\n }\n }\n };\n Base.prototype.clearChanges = function () {\n this.finalUpdate();\n this.changedProperties = {};\n this.oldProperties = {};\n this.childChangedProperties = {};\n };\n /**\n * Bind property changes immediately to components\n *\n * @returns {void} ?\n */\n Base.prototype.dataBind = function () {\n Base.callChildDataBind(this.childChangedProperties, this);\n if (Object.getOwnPropertyNames(this.changedProperties).length) {\n var prevDetection = this.isProtectedOnChange;\n var newChanges = this.changedProperties;\n var oldChanges = this.oldProperties;\n this.clearChanges();\n this.isProtectedOnChange = true;\n this.onPropertyChanged(newChanges, oldChanges);\n this.isProtectedOnChange = prevDetection;\n }\n };\n /* tslint:disable:no-any */\n Base.prototype.serverDataBind = function (newChanges) {\n if (!isBlazor()) {\n return;\n }\n newChanges = newChanges ? newChanges : {};\n extend(this.bulkChanges, {}, newChanges, true);\n var sfBlazor = 'sfBlazor';\n if (this.allowServerDataBinding && window[\"\" + sfBlazor].updateModel) {\n window[\"\" + sfBlazor].updateModel(this);\n this.bulkChanges = {};\n }\n };\n /* tslint:enable:no-any */\n Base.prototype.saveChanges = function (key, newValue, oldValue) {\n if (isBlazor()) {\n // tslint:disable-next-line:no-any\n var newChanges = {};\n newChanges[\"\" + key] = newValue;\n this.serverDataBind(newChanges);\n }\n if (this.isProtectedOnChange) {\n return;\n }\n this.oldProperties[\"\" + key] = oldValue;\n this.changedProperties[\"\" + key] = newValue;\n this.finalUpdate();\n this.finalUpdate = setImmediate(this.dataBind.bind(this));\n };\n /** Event Base Section */\n /**\n * Adds the handler to the given event listener.\n *\n * @param {string} eventName - A String that specifies the name of the event\n * @param {Function} handler - Specifies the call to run when the event occurs.\n * @returns {void} ?\n */\n Base.prototype.addEventListener = function (eventName, handler) {\n this.modelObserver.on(eventName, handler);\n };\n /**\n * Removes the handler from the given event listener.\n *\n * @param {string} eventName - A String that specifies the name of the event to remove\n * @param {Function} handler - Specifies the function to remove\n * @returns {void} ?\n */\n Base.prototype.removeEventListener = function (eventName, handler) {\n this.modelObserver.off(eventName, handler);\n };\n /**\n * Triggers the handlers in the specified event.\n *\n * @private\n * @param {string} eventName - Specifies the event to trigger for the specified component properties.\n * Can be a custom event, or any of the standard events.\n * @param {Event} eventProp - Additional parameters to pass on to the event properties\n * @param {Function} successHandler - this function will invoke after event successfully triggered\n * @param {Function} errorHandler - this function will invoke after event if it failured to call.\n * @returns {void} ?\n */\n Base.prototype.trigger = function (eventName, eventProp, successHandler, errorHandler) {\n var _this = this;\n if (this.isDestroyed !== true) {\n var prevDetection = this.isProtectedOnChange;\n this.isProtectedOnChange = false;\n var data = this.modelObserver.notify(eventName, eventProp, successHandler, errorHandler);\n if (isColEName.test(eventName)) {\n var handler = getValue(eventName, this);\n if (handler) {\n var blazor = 'Blazor';\n if (window[\"\" + blazor]) {\n var promise = handler.call(this, eventProp);\n if (promise && typeof promise.then === 'function') {\n if (!successHandler) {\n data = promise;\n }\n else {\n promise.then(function (data) {\n if (successHandler) {\n data = typeof data === 'string' && _this.modelObserver.isJson(data) ?\n JSON.parse(data) : data;\n successHandler.call(_this, data);\n }\n }).catch(function (data) {\n if (errorHandler) {\n data = typeof data === 'string' && _this.modelObserver.isJson(data) ? JSON.parse(data) : data;\n errorHandler.call(_this, data);\n }\n });\n }\n }\n else if (successHandler) {\n successHandler.call(this, eventProp);\n }\n }\n else {\n handler.call(this, eventProp);\n if (successHandler) {\n successHandler.call(this, eventProp);\n }\n }\n }\n else if (successHandler) {\n successHandler.call(this, eventProp);\n }\n }\n this.isProtectedOnChange = prevDetection;\n return data;\n }\n };\n /**\n * To maintain instance in base class\n *\n * @returns {void} ?\n */\n Base.prototype.addInstance = function () {\n // Add module class to the root element\n var moduleClass = 'e-' + this.getModuleName().toLowerCase();\n addClass([this.element], ['e-lib', moduleClass]);\n if (!isNullOrUndefined(this.element.ej2_instances)) {\n this.element.ej2_instances.push(this);\n }\n else {\n setValue('ej2_instances', [this], this.element);\n }\n };\n /**\n * To remove the instance from the element\n *\n * @returns {void} ?\n */\n Base.prototype.destroy = function () {\n var _this = this;\n // eslint-disable-next-line\n this.element.ej2_instances =\n this.element.ej2_instances.filter(function (i) { return i !== _this; });\n removeClass([this.element], ['e-' + this.getModuleName()]);\n if (this.element.ej2_instances.length === 0) {\n // Remove module class from the root element\n removeClass([this.element], ['e-lib']);\n }\n this.clearChanges();\n this.modelObserver.destroy();\n this.isDestroyed = true;\n };\n return Base;\n}());\nexport { Base };\n/**\n * Global function to get the component instance from the rendered element.\n *\n * @param {HTMLElement} elem Specifies the HTMLElement or element id string.\n * @param {string} comp Specifies the component module name or Component.\n * @returns {any} ?\n */\n// tslint:disable-next-line:no-any\nexport function getComponent(elem, comp) {\n var instance;\n var i;\n var ele = typeof elem === 'string' ? document.getElementById(elem) : elem;\n for (i = 0; i < ele.ej2_instances.length; i++) {\n instance = ele.ej2_instances[parseInt(i.toString(), 10)];\n if (typeof comp === 'string') {\n var compName = instance.getModuleName();\n if (comp === compName) {\n return instance;\n }\n }\n else {\n // tslint:disable-next-line:no-any\n if (instance instanceof comp) {\n return instance;\n }\n }\n }\n return undefined;\n}\n/**\n * Function to remove the child instances.\n *\n * @param {HTMLElement} element ?\n * @return {void}\n * @private\n */\n// tslint:disable-next-line:no-any\nexport function removeChildInstance(element) {\n // tslint:disable-next-line:no-any\n var childEle = [].slice.call(element.getElementsByClassName('e-control'));\n for (var i = 0; i < childEle.length; i++) {\n var compName = childEle[parseInt(i.toString(), 10)].classList[1].split('e-')[1];\n // tslint:disable-next-line:no-any\n var compInstance = getComponent(childEle[parseInt(i.toString(), 10)], compName);\n if (!isUndefined(compInstance)) {\n compInstance.destroy();\n }\n }\n}\n","import { createInstance, isUndefined, merge, extend, getValue } from './util';\n/**\n * Returns the Class Object\n *\n * @param {ClassObject} instance - instance of ClassObject\n * @param {string} curKey - key of the current instance\n * @param {Object} defaultValue - default Value\n * @param {Object[]} type ?\n * @returns {ClassObject} ?\n */\n// eslint-disable-next-line\nfunction getObject(instance, curKey, defaultValue, type) {\n // eslint-disable-next-line\n if (!instance.properties.hasOwnProperty(curKey) || !(instance.properties[curKey] instanceof type)) {\n instance.properties[\"\" + curKey] = createInstance(type, [instance, curKey, defaultValue]);\n }\n return instance.properties[\"\" + curKey];\n}\n/**\n * Returns object array\n *\n * @param {ClassObject} instance ?\n * @param {string} curKey ?\n * @param {Object[]} defaultValue ?\n * @param {Object} type ?\n * @param {boolean} isSetter ?\n * @param {boolean} isFactory ?\n * @returns {Object[]} ?\n */\n// eslint-disable-next-line\nfunction getObjectArray(instance, curKey, defaultValue, type, isSetter, isFactory) {\n var result = [];\n var len = defaultValue ? defaultValue.length : 0;\n for (var i = 0; i < len; i++) {\n var curType = type;\n if (isFactory) {\n curType = type(defaultValue[parseInt(i.toString(), 10)], instance);\n }\n if (isSetter) {\n var inst = createInstance(curType, [instance, curKey, {}, true]);\n inst.setProperties(defaultValue[parseInt(i.toString(), 10)], true);\n result.push(inst);\n }\n else {\n result.push(createInstance(curType, [instance, curKey, defaultValue[parseInt(i.toString(), 10)], false]));\n }\n }\n return result;\n}\n/**\n * Returns the properties of the object\n *\n * @param {Object} defaultValue ?\n * @param {string} curKey ?\n * @returns {void} ?\n */\nfunction propertyGetter(defaultValue, curKey) {\n return function () {\n // eslint-disable-next-line\n if (!this.properties.hasOwnProperty(curKey)) {\n this.properties[\"\" + curKey] = defaultValue;\n }\n return this.properties[\"\" + curKey];\n };\n}\n/**\n * Set the properties for the object\n *\n * @param {Object} defaultValue ?\n * @param {string} curKey ?\n * @returns {void} ?\n */\nfunction propertySetter(defaultValue, curKey) {\n return function (newValue) {\n if (this.properties[\"\" + curKey] !== newValue) {\n // eslint-disable-next-line\n var oldVal = this.properties.hasOwnProperty(curKey) ? this.properties[curKey] : defaultValue;\n this.saveChanges(curKey, newValue, oldVal);\n this.properties[\"\" + curKey] = newValue;\n }\n };\n}\n/**\n * Returns complex objects\n *\n * @param {Object} defaultValue ?\n * @param {string} curKey ?\n * @param {Object[]} type ?\n * @returns {void} ?\n */\n// eslint-disable-next-line\nfunction complexGetter(defaultValue, curKey, type) {\n return function () {\n return getObject(this, curKey, defaultValue, type);\n };\n}\n/**\n * Sets complex objects\n *\n * @param {Object} defaultValue ?\n * @param {string} curKey ?\n * @param {Object[]} type ?\n * @returns {void} ?\n */\nfunction complexSetter(defaultValue, curKey, type) {\n return function (newValue) {\n getObject(this, curKey, defaultValue, type).setProperties(newValue);\n };\n}\n/**\n *\n * @param {Object} defaultValue ?\n * @param {string} curKey ?\n * @param {FunctionConstructor} type ?\n * @returns {void} ?\n */\n// eslint-disable-next-line\nfunction complexFactoryGetter(defaultValue, curKey, type) {\n return function () {\n var curType = type({});\n // eslint-disable-next-line\n if (this.properties.hasOwnProperty(curKey)) {\n return this.properties[\"\" + curKey];\n }\n else {\n return getObject(this, curKey, defaultValue, curType);\n }\n };\n}\n/**\n *\n * @param {Object} defaultValue ?\n * @param {string} curKey ?\n * @param {Object[]} type ?\n * @returns {void} ?\n */\nfunction complexFactorySetter(defaultValue, curKey, type) {\n return function (newValue) {\n var curType = type(newValue, this);\n getObject(this, curKey, defaultValue, curType).setProperties(newValue);\n };\n}\n/**\n *\n * @param {Object[]} defaultValue ?\n * @param {string} curKey ?\n * @param {Object[]} type ?\n * @returns {void} ?\n */\nfunction complexArrayGetter(defaultValue, curKey, type) {\n return function () {\n var _this = this;\n // eslint-disable-next-line\n if (!this.properties.hasOwnProperty(curKey)) {\n var defCollection = getObjectArray(this, curKey, defaultValue, type, false);\n this.properties[\"\" + curKey] = defCollection;\n }\n var ignore = ((this.controlParent !== undefined && this.controlParent.ignoreCollectionWatch)\n || this.ignoreCollectionWatch);\n // eslint-disable-next-line\n if (!this.properties[curKey].hasOwnProperty('push') && !ignore) {\n ['push', 'pop'].forEach(function (extendFunc) {\n var descriptor = {\n value: complexArrayDefinedCallback(extendFunc, curKey, type, _this.properties[\"\" + curKey]).bind(_this),\n configurable: true\n };\n Object.defineProperty(_this.properties[\"\" + curKey], extendFunc, descriptor);\n });\n }\n // eslint-disable-next-line\n if (!this.properties[curKey].hasOwnProperty('isComplexArray')) {\n Object.defineProperty(this.properties[\"\" + curKey], 'isComplexArray', { value: true });\n }\n return this.properties[\"\" + curKey];\n };\n}\n/**\n *\n * @param {Object[]} defaultValue ?\n * @param {string} curKey ?\n * @param {Object[]} type ?\n * @returns {void} ?\n */\nfunction complexArraySetter(defaultValue, curKey, type) {\n return function (newValue) {\n this.isComplexArraySetter = true;\n var oldValueCollection = getObjectArray(this, curKey, defaultValue, type, false);\n var newValCollection = getObjectArray(this, curKey, newValue, type, true);\n this.isComplexArraySetter = false;\n this.saveChanges(curKey, newValCollection, oldValueCollection);\n this.properties[\"\" + curKey] = newValCollection;\n };\n}\n/**\n *\n * @param {Object[]} defaultValue ?\n * @param {string} curKey ?\n * @param {Object[]} type ?\n * @returns {void} ?\n */\nfunction complexArrayFactorySetter(defaultValue, curKey, type) {\n return function (newValue) {\n // eslint-disable-next-line\n var oldValueCollection = this.properties.hasOwnProperty(curKey) ? this.properties[curKey] : defaultValue;\n var newValCollection = getObjectArray(this, curKey, newValue, type, true, true);\n this.saveChanges(curKey, newValCollection, oldValueCollection);\n this.properties[\"\" + curKey] = newValCollection;\n };\n}\n/**\n *\n * @param {Object[]} defaultValue ?\n * @param {string} curKey ?\n * @param {FunctionConstructor} type ?\n * @returns {void} ?\n */\nfunction complexArrayFactoryGetter(defaultValue, curKey, type) {\n return function () {\n var curType = type({});\n // eslint-disable-next-line\n if (!this.properties.hasOwnProperty(curKey)) {\n var defCollection = getObjectArray(this, curKey, defaultValue, curType, false);\n this.properties[\"\" + curKey] = defCollection;\n }\n return this.properties[\"\" + curKey];\n };\n}\n/**\n *\n * @param {string} dFunc ?\n * @param {string} curKey ?\n * @param {Object} type ?\n * @param {Object} prop ?\n * @returns {Object} ?\n */\nfunction complexArrayDefinedCallback(dFunc, curKey, type, prop) {\n /* tslint:disable no-function-expression */\n return function () {\n var newValue = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n newValue[_i] = arguments[_i];\n }\n var keyString = this.propName ? this.getParentKey() + '.' + curKey + '-' : curKey + '-';\n switch (dFunc) {\n case 'push':\n for (var i = 0; i < newValue.length; i++) {\n Array.prototype[\"\" + dFunc].apply(prop, [newValue[parseInt(i.toString(), 10)]]);\n var model_1 = getArrayModel(keyString + (prop.length - 1), newValue[parseInt(i.toString(), 10)], !this.controlParent, dFunc);\n this.serverDataBind(model_1, newValue[parseInt(i.toString(), 10)], false, dFunc);\n }\n break;\n case 'pop':\n Array.prototype[\"\" + dFunc].apply(prop);\n // eslint-disable-next-line\n var model = getArrayModel(keyString + prop.length, null, !this.controlParent, dFunc);\n this.serverDataBind(model, { ejsAction: 'pop' }, false, dFunc);\n break;\n }\n return prop;\n };\n}\n/**\n *\n * @param {string} keyString ?\n * @param {Object} value ?\n * @param {boolean} isControlParent ?\n * @param {string} arrayFunction ?\n * @returns {Object} ?\n */\nfunction getArrayModel(keyString, value, isControlParent, arrayFunction) {\n var modelObject = keyString;\n if (isControlParent) {\n modelObject = {};\n modelObject[\"\" + keyString] = value;\n if (value && typeof value === 'object') {\n var action = 'ejsAction';\n modelObject[\"\" + keyString][\"\" + action] = arrayFunction;\n }\n }\n return modelObject;\n}\n// eslint-disable-next-line\n/**\n * Method used to create property. General syntax below.\n *\n * @param {Object} defaultValue - Specifies the default value of property.\n * @returns {PropertyDecorator} ?\n * ```\n * @Property('TypeScript')\n * propertyName: Type;\n * ```\n * @private\n */\nexport function Property(defaultValue) {\n return function (target, key) {\n var propertyDescriptor = {\n set: propertySetter(defaultValue, key),\n get: propertyGetter(defaultValue, key),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'prop', defaultValue);\n };\n}\n/**\n * Method used to create complex property. General syntax below.\n *\n * @param {any} defaultValue - Specifies the default value of property.\n * @param {Function} type - Specifies the class type of complex object.\n * @returns {PropertyDecorator} ?\n * ```\n * @Complex
({},Type)\n * propertyName: Type;\n * ```\n * @private\n */\nexport function Complex(defaultValue, type) {\n return function (target, key) {\n var propertyDescriptor = {\n set: complexSetter(defaultValue, key, type),\n get: complexGetter(defaultValue, key, type),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'complexProp', defaultValue, type);\n };\n}\n/**\n * Method used to create complex Factory property. General syntax below.\n *\n * @param {Function} type - Specifies the class factory type of complex object.\n * @returns {PropertyDecorator} ?\n * ```\n * @ComplexFactory(defaultType, factoryFunction)\n * propertyName: Type1 | Type2;\n * ```\n * @private\n */\nexport function ComplexFactory(type) {\n return function (target, key) {\n var propertyDescriptor = {\n set: complexFactorySetter({}, key, type),\n get: complexFactoryGetter({}, key, type),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'complexProp', {}, type);\n };\n}\n/**\n * Method used to create complex array property. General syntax below.\n *\n * @param {any} defaultValue - Specifies the default value of property.\n * @param {Function} type - Specifies the class type of complex object.\n * @returns {PropertyDecorator} ?\n * ```\n * @Collection([], Type);\n * propertyName: Type;\n * ```\n * @private\n */\nexport function Collection(defaultValue, type) {\n return function (target, key) {\n var propertyDescriptor = {\n set: complexArraySetter(defaultValue, key, type),\n get: complexArrayGetter(defaultValue, key, type),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'colProp', defaultValue, type);\n };\n}\n/**\n * Method used to create complex factory array property. General syntax below.\n *\n * @param {Function} type - Specifies the class type of complex object.\n * @returns {PropertyCollectionInfo} ?\n * ```\n * @Collection([], Type);\n * propertyName: Type;\n * ```\n * @private\n */\nexport function CollectionFactory(type) {\n return function (target, key) {\n var propertyDescriptor = {\n set: complexArrayFactorySetter([], key, type),\n get: complexArrayFactoryGetter([], key, type),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'colProp', {}, type);\n };\n}\n/**\n * Method used to create event property. General syntax below.\n *\n * @returns {PropertyDecorator} ?\n * ```\n * @Event(()=>{return true;})\n * ```\n * @private\n */\nexport function Event() {\n return function (target, key) {\n var eventDescriptor = {\n set: function (newValue) {\n var oldValue = this.properties[\"\" + key];\n if (oldValue !== newValue) {\n var finalContext = getParentContext(this, key);\n if (isUndefined(oldValue) === false) {\n finalContext.context.removeEventListener(finalContext.prefix, oldValue);\n }\n finalContext.context.addEventListener(finalContext.prefix, newValue);\n this.properties[\"\" + key] = newValue;\n }\n },\n get: propertyGetter(undefined, key),\n enumerable: true,\n configurable: true\n };\n Object.defineProperty(target, key, eventDescriptor);\n addPropertyCollection(target, key, 'event');\n };\n}\n/**\n * NotifyPropertyChanges is triggers the call back when the property has been changed.\n *\n * @param {Function} classConstructor ?\n * @returns {void} ?\n * ```\n * @NotifyPropertyChanges\n * class DemoClass implements INotifyPropertyChanged {\n *\n * @Property()\n * property1: string;\n *\n * dataBind: () => void;\n *\n * constructor() { }\n *\n * onPropertyChanged(newProp: any, oldProp: any) {\n * // Called when property changed\n * }\n * }\n * ```\n * @private\n */\n// eslint-disable-next-line\nexport function NotifyPropertyChanges(classConstructor) {\n /** Need to code */\n}\n/**\n * Method used to create the builderObject for the target component.\n *\n * @param {BuildInfo} target ?\n * @param {string} key ?\n * @param {string} propertyType ?\n * @param {Object} defaultValue ?\n * @param {Function} type ?\n * @returns {void} ?\n * @private\n */\nfunction addPropertyCollection(target, key, propertyType, defaultValue, type) {\n if (isUndefined(target.propList)) {\n target.propList = {\n props: [],\n complexProps: [],\n colProps: [],\n events: [],\n propNames: [],\n complexPropNames: [],\n colPropNames: [],\n eventNames: []\n };\n }\n // eslint-disable-next-line\n target.propList[propertyType + 's'].push({\n propertyName: key,\n defaultValue: defaultValue,\n type: type\n });\n // eslint-disable-next-line\n target.propList[propertyType + 'Names'].push(key);\n}\n/**\n * Returns an object containing the builder properties\n *\n * @param {Function} component ?\n * @returns {Object} ?\n * @private\n */\nfunction getBuilderProperties(component) {\n if (isUndefined(component.prototype.builderObject)) {\n component.prototype.builderObject = {\n properties: {}, propCollections: [], add: function () {\n this.isPropertyArray = true;\n this.propCollections.push(extend({}, this.properties, {}));\n }\n };\n var rex = /complex/;\n for (var _i = 0, _a = Object.keys(component.prototype.propList); _i < _a.length; _i++) {\n var key = _a[_i];\n var _loop_1 = function (prop) {\n if (rex.test(key)) {\n component.prototype.builderObject[prop.propertyName] = function (value) {\n var childType = {};\n merge(childType, getBuilderProperties(prop.type));\n value(childType);\n var tempValue;\n if (!childType.isPropertyArray) {\n tempValue = extend({}, childType.properties, {});\n }\n else {\n tempValue = childType.propCollections;\n }\n this.properties[prop.propertyName] = tempValue;\n childType.properties = {};\n childType.propCollections = [];\n childType.isPropertyArray = false;\n return this;\n };\n }\n else {\n component.prototype.builderObject[prop.propertyName] = function (value) {\n this.properties[prop.propertyName] = value;\n return this;\n };\n }\n };\n for (var _b = 0, _c = component.prototype.propList[\"\" + key]; _b < _c.length; _b++) {\n var prop = _c[_b];\n _loop_1(prop);\n }\n }\n }\n return component.prototype.builderObject;\n}\n/**\n * Method used to create builder for the components\n *\n * @param {any} component -specifies the target component for which builder to be created.\n * @returns {Object} ?\n * @private\n */\nexport function CreateBuilder(component) {\n var builderFunction = function (element) {\n this.element = element;\n return this;\n };\n var instanceFunction = function (element) {\n // eslint-disable-next-line\n if (!builderFunction.prototype.hasOwnProperty('create')) {\n builderFunction.prototype = getBuilderProperties(component);\n builderFunction.prototype.create = function () {\n var temp = extend({}, {}, this.properties);\n this.properties = {};\n return new component(temp, this.element);\n };\n }\n return new builderFunction(element);\n };\n return instanceFunction;\n}\n/**\n * Returns parent options for the object\n *\n * @param {Object} context ?\n * @param {string} prefix ?\n * @returns {ParentOption} ?\n * @private\n */\nfunction getParentContext(context, prefix) {\n // eslint-disable-next-line\n if (context.hasOwnProperty('parentObj') === false) {\n return { context: context, prefix: prefix };\n }\n else {\n var curText = getValue('propName', context);\n if (curText) {\n prefix = curText + '-' + prefix;\n }\n return getParentContext(getValue('parentObj', context), prefix);\n }\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { createElement, selectAll, closest } from './dom';\nimport { Base } from './base';\nimport { Browser } from './browser';\nimport { EventHandler } from './event-handler';\nimport { Property, NotifyPropertyChanges, Event } from './notify-property-change';\n/**\n * The Animation framework provide options to animate the html DOM elements\n * ```typescript\n * let animeObject = new Animation({\n * name: 'SlideLeftIn',\n * duration: 1000\n * });\n * animeObject.animate('#anime1');\n * animeObject.animate('#anime2', { duration: 500 });\n * ```\n */\nvar Animation = /** @class */ (function (_super) {\n __extends(Animation, _super);\n function Animation(options) {\n var _this = _super.call(this, options, undefined) || this;\n /**\n * @private\n */\n _this.easing = {\n ease: 'cubic-bezier(0.250, 0.100, 0.250, 1.000)',\n linear: 'cubic-bezier(0.250, 0.250, 0.750, 0.750)',\n easeIn: 'cubic-bezier(0.420, 0.000, 1.000, 1.000)',\n easeOut: 'cubic-bezier(0.000, 0.000, 0.580, 1.000)',\n easeInOut: 'cubic-bezier(0.420, 0.000, 0.580, 1.000)',\n elasticInOut: 'cubic-bezier(0.5,-0.58,0.38,1.81)',\n elasticIn: 'cubic-bezier(0.17,0.67,0.59,1.81)',\n elasticOut: 'cubic-bezier(0.7,-0.75,0.99,1.01)'\n };\n return _this;\n }\n Animation_1 = Animation;\n /**\n * Applies animation to the current element.\n *\n * @param {string | HTMLElement} element - Element which needs to be animated.\n * @param {AnimationModel} options - Overriding default animation settings.\n * @returns {void} ?\n */\n Animation.prototype.animate = function (element, options) {\n options = !options ? {} : options;\n var model = this.getModel(options);\n if (typeof element === 'string') {\n var elements = Array.prototype.slice.call(selectAll(element, document));\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var element_1 = elements_1[_i];\n model.element = element_1;\n Animation_1.delayAnimation(model);\n }\n }\n else {\n model.element = element;\n Animation_1.delayAnimation(model);\n }\n };\n /**\n * Stop the animation effect on animated element.\n *\n * @param {HTMLElement} element - Element which needs to be stop the animation.\n * @param {AnimationOptions} model - Handling the animation model at stop function.\n * @return {void}\n */\n Animation.stop = function (element, model) {\n element.style.animation = '';\n element.removeAttribute('e-animate');\n var animationId = element.getAttribute('e-animation-id');\n if (animationId) {\n var frameId = parseInt(animationId, 10);\n cancelAnimationFrame(frameId);\n element.removeAttribute('e-animation-id');\n }\n if (model && model.end) {\n model.end.call(this, model);\n }\n };\n /**\n * Set delay to animation element\n *\n * @param {AnimationModel} model ?\n * @returns {void}\n */\n Animation.delayAnimation = function (model) {\n if (animationMode === 'Disable') {\n if (model.begin) {\n model.begin.call(this, model);\n }\n if (model.end) {\n model.end.call(this, model);\n }\n }\n else {\n if (model.delay) {\n setTimeout(function () { Animation_1.applyAnimation(model); }, model.delay);\n }\n else {\n Animation_1.applyAnimation(model);\n }\n }\n };\n /**\n * Triggers animation\n *\n * @param {AnimationModel} model ?\n * @returns {void}\n */\n Animation.applyAnimation = function (model) {\n var _this = this;\n model.timeStamp = 0;\n var step = 0;\n var timerId = 0;\n var prevTimeStamp = 0;\n var duration = model.duration;\n model.element.setAttribute('e-animate', 'true');\n var startAnimation = function (timeStamp) {\n try {\n if (timeStamp) {\n // let step: number = model.timeStamp = timeStamp - startTime;\n /** phantomjs workaround for timestamp fix */\n prevTimeStamp = prevTimeStamp === 0 ? timeStamp : prevTimeStamp;\n model.timeStamp = (timeStamp + model.timeStamp) - prevTimeStamp;\n prevTimeStamp = timeStamp;\n /** phantomjs workaround end */\n // trigger animation begin event\n if (!step && model.begin) {\n model.begin.call(_this, model);\n }\n step = step + 1;\n var avg = model.timeStamp / step;\n if (model.timeStamp < duration && model.timeStamp + avg < duration && model.element.getAttribute('e-animate')) {\n // apply animation effect to the current element\n model.element.style.animation = model.name + ' ' + model.duration + 'ms ' + model.timingFunction;\n if (model.progress) {\n model.progress.call(_this, model);\n }\n // repeat requestAnimationFrame\n requestAnimationFrame(startAnimation);\n }\n else {\n // clear requestAnimationFrame\n cancelAnimationFrame(timerId);\n model.element.removeAttribute('e-animation-id');\n model.element.removeAttribute('e-animate');\n model.element.style.animation = '';\n if (model.end) {\n model.end.call(_this, model);\n }\n }\n }\n else {\n //startTime = performance.now();\n // set initial requestAnimationFrame\n timerId = requestAnimationFrame(startAnimation);\n model.element.setAttribute('e-animation-id', timerId.toString());\n }\n }\n catch (e) {\n cancelAnimationFrame(timerId);\n model.element.removeAttribute('e-animation-id');\n if (model.fail) {\n model.fail.call(_this, e);\n }\n }\n };\n startAnimation();\n };\n /**\n * Returns Animation Model\n *\n * @param {AnimationModel} options ?\n * @returns {AnimationModel} ?\n */\n Animation.prototype.getModel = function (options) {\n return {\n name: options.name || this.name,\n delay: options.delay || this.delay,\n duration: (options.duration !== undefined ? options.duration : this.duration),\n begin: options.begin || this.begin,\n end: options.end || this.end,\n fail: options.fail || this.fail,\n progress: options.progress || this.progress,\n timingFunction: this.easing[options.timingFunction] ? this.easing[options.timingFunction] :\n (options.timingFunction || this.easing[this.timingFunction])\n };\n };\n /**\n * @private\n * @param {AnimationModel} newProp ?\n * @param {AnimationModel} oldProp ?\n * @returns {void} ?\n */\n // eslint-disable-next-line\n Animation.prototype.onPropertyChanged = function (newProp, oldProp) {\n // no code needed\n };\n /**\n * Returns module name as animation\n *\n * @private\n * @returns {void} ?\n */\n Animation.prototype.getModuleName = function () {\n return 'animation';\n };\n /**\n *\n * @private\n * @returns {void} ?\n */\n Animation.prototype.destroy = function () {\n //Override base destroy;\n };\n var Animation_1;\n __decorate([\n Property('FadeIn')\n ], Animation.prototype, \"name\", void 0);\n __decorate([\n Property(400)\n ], Animation.prototype, \"duration\", void 0);\n __decorate([\n Property('ease')\n ], Animation.prototype, \"timingFunction\", void 0);\n __decorate([\n Property(0)\n ], Animation.prototype, \"delay\", void 0);\n __decorate([\n Event()\n ], Animation.prototype, \"progress\", void 0);\n __decorate([\n Event()\n ], Animation.prototype, \"begin\", void 0);\n __decorate([\n Event()\n ], Animation.prototype, \"end\", void 0);\n __decorate([\n Event()\n ], Animation.prototype, \"fail\", void 0);\n Animation = Animation_1 = __decorate([\n NotifyPropertyChanges\n ], Animation);\n return Animation;\n}(Base));\nexport { Animation };\n/**\n * Ripple provides material theme's wave effect when an element is clicked\n * ```html\n * \n * \n * ```\n *\n * @private\n * @param {HTMLElement} element - Target element\n * @param {RippleOptions} rippleOptions - Ripple options .\n * @param {Function} done .\n * @returns {void} .\n */\nexport function rippleEffect(element, rippleOptions, done) {\n var rippleModel = getRippleModel(rippleOptions);\n if (rippleModel.rippleFlag === false || (rippleModel.rippleFlag === undefined && !isRippleEnabled)) {\n return (function () {\n // do nothing.\n });\n }\n element.setAttribute('data-ripple', 'true');\n EventHandler.add(element, 'mousedown', rippleHandler, { parent: element, rippleOptions: rippleModel });\n EventHandler.add(element, 'mouseup', rippleUpHandler, { parent: element, rippleOptions: rippleModel, done: done });\n EventHandler.add(element, 'mouseleave', rippleLeaveHandler, { parent: element, rippleOptions: rippleModel });\n if (Browser.isPointer) {\n EventHandler.add(element, 'transitionend', rippleLeaveHandler, { parent: element, rippleOptions: rippleModel });\n }\n return (function () {\n element.removeAttribute('data-ripple');\n EventHandler.remove(element, 'mousedown', rippleHandler);\n EventHandler.remove(element, 'mouseup', rippleUpHandler);\n EventHandler.remove(element, 'mouseleave', rippleLeaveHandler);\n EventHandler.remove(element, 'transitionend', rippleLeaveHandler);\n });\n}\n/**\n * Handler for ripple model\n *\n * @param {RippleOptions} rippleOptions ?\n * @returns {RippleOptions} ?\n */\nfunction getRippleModel(rippleOptions) {\n var rippleModel = {\n selector: rippleOptions && rippleOptions.selector ? rippleOptions.selector : null,\n ignore: rippleOptions && rippleOptions.ignore ? rippleOptions.ignore : null,\n rippleFlag: rippleOptions && rippleOptions.rippleFlag,\n isCenterRipple: rippleOptions && rippleOptions.isCenterRipple,\n duration: rippleOptions && rippleOptions.duration ? rippleOptions.duration : 350\n };\n return rippleModel;\n}\n/**\n * Handler for ripple event\n *\n * @param {MouseEvent} e ?\n * @returns {void} ?\n * @private\n */\nfunction rippleHandler(e) {\n var target = (e.target);\n var selector = this.rippleOptions.selector;\n var element = selector ? closest(target, selector) : target;\n if (!element || (this.rippleOptions && closest(target, this.rippleOptions.ignore))) {\n return;\n }\n var offset = element.getBoundingClientRect();\n var offsetX = e.pageX - document.body.scrollLeft;\n var offsetY = e.pageY - ((!document.body.scrollTop && document.documentElement) ?\n document.documentElement.scrollTop : document.body.scrollTop);\n var pageX = Math.max(Math.abs(offsetX - offset.left), Math.abs(offsetX - offset.right));\n var pageY = Math.max(Math.abs(offsetY - offset.top), Math.abs(offsetY - offset.bottom));\n var radius = Math.sqrt(pageX * pageX + pageY * pageY);\n var diameter = radius * 2 + 'px';\n var x = offsetX - offset.left - radius;\n var y = offsetY - offset.top - radius;\n if (this.rippleOptions && this.rippleOptions.isCenterRipple) {\n x = 0;\n y = 0;\n diameter = '100%';\n }\n element.classList.add('e-ripple');\n var duration = this.rippleOptions.duration.toString();\n var styles = 'width: ' + diameter + ';height: ' + diameter + ';left: ' + x + 'px;top: ' + y + 'px;' +\n 'transition-duration: ' + duration + 'ms;';\n var rippleElement = createElement('div', { className: 'e-ripple-element', styles: styles });\n element.appendChild(rippleElement);\n window.getComputedStyle(rippleElement).getPropertyValue('opacity');\n rippleElement.style.transform = 'scale(1)';\n if (element !== this.parent) {\n EventHandler.add(element, 'mouseleave', rippleLeaveHandler, { parent: this.parent, rippleOptions: this.rippleOptions });\n }\n}\n/**\n * Handler for ripple element mouse up event\n *\n * @param {MouseEvent} e ?\n * @returns {void} ?\n * @private\n */\nfunction rippleUpHandler(e) {\n removeRipple(e, this);\n}\n/**\n * Handler for ripple element mouse move event\n *\n * @param {MouseEvent} e ?\n * @returns {void} ?\n * @private\n */\nfunction rippleLeaveHandler(e) {\n removeRipple(e, this);\n}\n/**\n * Handler for removing ripple element\n *\n * @param {MouseEvent} e ?\n * @param {RippleArgs} eventArgs ?\n * @returns {void} ?\n * @private\n */\nfunction removeRipple(e, eventArgs) {\n var duration = eventArgs.rippleOptions.duration;\n var target = (e.target);\n var selector = eventArgs.rippleOptions.selector;\n var element = selector ? closest(target, selector) : target;\n if (!element || (element && element.className.indexOf('e-ripple') === -1)) {\n return;\n }\n var rippleElements = selectAll('.e-ripple-element', element);\n var rippleElement = rippleElements[rippleElements.length - 1];\n if (rippleElement) {\n rippleElement.style.opacity = '0.5';\n }\n if (eventArgs.parent !== element) {\n EventHandler.remove(element, 'mouseleave', rippleLeaveHandler);\n }\n /* tslint:disable:align */\n setTimeout(function () {\n if (rippleElement && rippleElement.parentNode) {\n rippleElement.parentNode.removeChild(rippleElement);\n }\n if (!element.getElementsByClassName('e-ripple-element').length) {\n element.classList.remove('e-ripple');\n }\n if (eventArgs.done) {\n eventArgs.done(e);\n }\n }, duration);\n}\nexport var isRippleEnabled = false;\n/**\n * Animation Module provides support to enable ripple effect functionality to Essential JS 2 components.\n *\n * @param {boolean} isRipple Specifies the boolean value to enable or disable ripple effect.\n * @returns {boolean} ?\n */\nexport function enableRipple(isRipple) {\n isRippleEnabled = isRipple;\n return isRippleEnabled;\n}\n/**\n * Defines the Modes of Global animation.\n *\n * @private\n */\nexport var animationMode = '';\n/**\n * Method for set the Global animation modes for Syncfusion Blazor components.\n *\n * @param {string} value - Specifies the animation mode.\n * @returns {void}\n */\nexport function setGlobalAnimation(value) {\n animationMode = value;\n}\n","/**\n * Module loading operations\n */\nimport { createInstance, setValue, getValue, deleteObject } from './util';\nvar MODULE_SUFFIX = 'Module';\nvar ModuleLoader = /** @class */ (function () {\n function ModuleLoader(parent) {\n this.loadedModules = [];\n this.parent = parent;\n }\n /**\n * Inject required modules in component library\n *\n * @returns {void} ?\n * @param {ModuleDeclaration[]} requiredModules - Array of modules to be required\n * @param {Function[]} moduleList - Array of modules to be injected from sample side\n */\n ModuleLoader.prototype.inject = function (requiredModules, moduleList) {\n var reqLength = requiredModules.length;\n if (reqLength === 0) {\n this.clean();\n return;\n }\n if (this.loadedModules.length) {\n this.clearUnusedModule(requiredModules);\n }\n for (var i = 0; i < reqLength; i++) {\n var modl = requiredModules[parseInt(i.toString(), 10)];\n for (var _i = 0, moduleList_1 = moduleList; _i < moduleList_1.length; _i++) {\n var module = moduleList_1[_i];\n var modName = modl.member;\n if (module && module.prototype.getModuleName() === modl.member && !this.isModuleLoaded(modName)) {\n var moduleObject = createInstance(module, modl.args);\n var memberName = this.getMemberName(modName);\n if (modl.isProperty) {\n setValue(memberName, module, this.parent);\n }\n else {\n setValue(memberName, moduleObject, this.parent);\n }\n var loadedModule = modl;\n loadedModule.member = memberName;\n this.loadedModules.push(loadedModule);\n }\n }\n }\n };\n /**\n * To remove the created object while destroying the control\n *\n * @returns {void}\n */\n ModuleLoader.prototype.clean = function () {\n for (var _i = 0, _a = this.loadedModules; _i < _a.length; _i++) {\n var modules = _a[_i];\n if (!modules.isProperty) {\n getValue(modules.member, this.parent).destroy();\n }\n }\n this.loadedModules = [];\n };\n /**\n * Removes all unused modules\n *\n * @param {ModuleDeclaration[]} moduleList ?\n * @returns {void} ?\n */\n ModuleLoader.prototype.clearUnusedModule = function (moduleList) {\n var _this = this;\n var usedModules = moduleList.map(function (arg) { return _this.getMemberName(arg.member); });\n var removableModule = this.loadedModules.filter(function (module) {\n return usedModules.indexOf(module.member) === -1;\n });\n for (var _i = 0, removableModule_1 = removableModule; _i < removableModule_1.length; _i++) {\n var mod = removableModule_1[_i];\n if (!mod.isProperty) {\n getValue(mod.member, this.parent).destroy();\n }\n this.loadedModules.splice(this.loadedModules.indexOf(mod), 1);\n deleteObject(this.parent, mod.member);\n }\n };\n /**\n * To get the name of the member.\n *\n * @param {string} name ?\n * @returns {string} ?\n */\n ModuleLoader.prototype.getMemberName = function (name) {\n return name[0].toLowerCase() + name.substring(1) + MODULE_SUFFIX;\n };\n /**\n * Returns boolean based on whether the module specified is loaded or not\n *\n * @param {string} modName ?\n * @returns {boolean} ?\n */\n ModuleLoader.prototype.isModuleLoaded = function (modName) {\n for (var _i = 0, _a = this.loadedModules; _i < _a.length; _i++) {\n var mod = _a[_i];\n if (mod.member === this.getMemberName(modName)) {\n return true;\n }\n }\n return false;\n };\n return ModuleLoader;\n}());\nexport { ModuleLoader };\n","import { getValue, setValue, merge, isBlazor } from './util';\nimport { Base } from './base';\n/**\n * To detect the changes for inner properties.\n *\n * @private\n */\nvar ChildProperty = /** @class */ (function () {\n function ChildProperty(parent, propName, defaultValue, isArray) {\n this.isComplexArraySetter = false;\n this.properties = {};\n this.changedProperties = {};\n this.childChangedProperties = {};\n this.oldProperties = {};\n // eslint-disable-next-line\n this.finalUpdate = function () { };\n this.callChildDataBind = getValue('callChildDataBind', Base);\n this.parentObj = parent;\n this.controlParent = this.parentObj.controlParent || this.parentObj;\n this.propName = propName;\n this.isParentArray = isArray;\n this.setProperties(defaultValue, true);\n }\n /**\n * Updates the property changes\n *\n * @param {boolean} val ?\n * @param {string} propName ?\n * @returns {void} ?\n */\n ChildProperty.prototype.updateChange = function (val, propName) {\n if (val === true) {\n this.parentObj.childChangedProperties[\"\" + propName] = val;\n }\n else {\n delete this.parentObj.childChangedProperties[\"\" + propName];\n }\n if (this.parentObj.updateChange) {\n this.parentObj.updateChange(val, this.parentObj.propName);\n }\n };\n /**\n * Updates time out duration\n *\n * @returns {void} ?\n */\n ChildProperty.prototype.updateTimeOut = function () {\n if (this.parentObj.updateTimeOut) {\n this.parentObj.finalUpdate();\n this.parentObj.updateTimeOut();\n }\n else {\n var changeTime_1 = setTimeout(this.parentObj.dataBind.bind(this.parentObj));\n var clearUpdate = function () {\n clearTimeout(changeTime_1);\n };\n this.finalUpdate = clearUpdate;\n }\n };\n /**\n * Clears changed properties\n *\n * @returns {void} ?\n */\n ChildProperty.prototype.clearChanges = function () {\n this.finalUpdate();\n this.updateChange(false, this.propName);\n this.oldProperties = {};\n this.changedProperties = {};\n };\n /**\n * Set property changes\n *\n * @param {Object} prop ?\n * @param {boolean} muteOnChange ?\n * @returns {void} ?\n */\n ChildProperty.prototype.setProperties = function (prop, muteOnChange) {\n if (muteOnChange === true) {\n merge(this, prop);\n this.updateChange(false, this.propName);\n this.clearChanges();\n }\n else {\n merge(this, prop);\n }\n };\n /**\n * Binds data\n *\n * @returns {void} ?\n */\n ChildProperty.prototype.dataBind = function () {\n this.callChildDataBind(this.childChangedProperties, this);\n if (this.isParentArray) {\n var curIndex = this.parentObj[this.propName].indexOf(this);\n if (Object.keys(this.changedProperties).length) {\n setValue(this.propName + '.' + curIndex, this.changedProperties, this.parentObj.changedProperties);\n setValue(this.propName + '.' + curIndex, this.oldProperties, this.parentObj.oldProperties);\n }\n }\n else {\n this.parentObj.changedProperties[this.propName] = this.changedProperties;\n this.parentObj.oldProperties[this.propName] = this.oldProperties;\n }\n this.clearChanges();\n };\n /**\n * Saves changes to newer values\n *\n * @param {string} key ?\n * @param {Object} newValue ?\n * @param {Object} oldValue ?\n * @param {boolean} restrictServerDataBind ?\n * @returns {void} ?\n */\n ChildProperty.prototype.saveChanges = function (key, newValue, oldValue, restrictServerDataBind) {\n if (this.controlParent.isProtectedOnChange) {\n return;\n }\n if (!restrictServerDataBind) {\n this.serverDataBind(key, newValue, true);\n }\n this.oldProperties[\"\" + key] = oldValue;\n this.changedProperties[\"\" + key] = newValue;\n this.updateChange(true, this.propName);\n this.finalUpdate();\n this.updateTimeOut();\n };\n ChildProperty.prototype.serverDataBind = function (key, value, isSaveChanges, action) {\n if (isBlazor() && !this.parentObj.isComplexArraySetter) {\n var parent_1;\n var newChanges = {};\n var parentKey = isSaveChanges ? this.getParentKey(true) + '.' + key : key;\n /* istanbul ignore else */\n if (parentKey.indexOf('.') !== -1) {\n var complexKeys = parentKey.split('.');\n parent_1 = newChanges;\n for (var i = 0; i < complexKeys.length; i++) {\n var isFinal = i === complexKeys.length - 1;\n parent_1[complexKeys[parseInt(i.toString(), 10)]] = isFinal ? value : {};\n parent_1 = isFinal ? parent_1 : parent_1[complexKeys[parseInt(i.toString(), 10)]];\n }\n }\n else {\n newChanges[\"\" + parentKey] = {};\n parent_1 = newChanges[\"\" + parentKey];\n newChanges[\"\" + parentKey][\"\" + key] = value;\n }\n /* istanbul ignore next */\n if (this.isParentArray) {\n var actionProperty = 'ejsAction';\n parent_1[\"\" + actionProperty] = action ? action : 'none';\n }\n this.controlParent.serverDataBind(newChanges);\n }\n };\n ChildProperty.prototype.getParentKey = function (isSaveChanges) {\n // eslint-disable-next-line\n var index = '';\n var propName = this.propName;\n /* istanbul ignore next */\n if (this.isParentArray) {\n index = this.parentObj[this.propName].indexOf(this);\n var valueLength = this.parentObj[this.propName].length;\n valueLength = isSaveChanges ? valueLength : (valueLength > 0 ? valueLength - 1 : 0);\n index = index !== -1 ? '-' + index : '-' + valueLength;\n propName = propName + index;\n }\n if (this.controlParent !== this.parentObj) {\n propName = this.parentObj.getParentKey() + '.' + this.propName + index;\n }\n return propName;\n };\n return ChildProperty;\n}());\nexport { ChildProperty };\n","import { createElement } from './dom';\nimport { getValue, containerObject, setValue, isNullOrUndefined } from './util';\nexport var componentList = ['grid', 'pivotview', 'treegrid', 'spreadsheet', 'rangeNavigator', 'DocumentEditor', 'listbox', 'PdfViewer', 'richtexteditor', 'DashboardLayout', 'chart', 'stockChart', 'circulargauge', 'diagram', 'heatmap', 'lineargauge', 'maps', 'smithchart', 'barcode', 'sparkline', 'treemap', 'bulletChart', 'kanban', 'daterangepicker', 'schedule', 'gantt', 'signature', 'query-builder', 'drop-down-tree', 'carousel', 'filemanager', 'uploader', 'accordion', 'tab', 'treeview'];\nvar bypassKey = [115, 121, 110, 99, 102, 117, 115, 105,\n 111, 110, 46, 105, 115, 76, 105, 99, 86, 97, 108,\n 105, 100, 97, 116, 101, 100];\nvar accountURL;\n/**\n * License validation module\n *\n * @private\n */\nvar LicenseValidator = /** @class */ (function () {\n function LicenseValidator(key) {\n this.isValidated = false;\n this.isLicensed = true;\n this.version = '20.4';\n this.platform = /JavaScript|ASPNET|ASPNETCORE|ASPNETMVC|FileFormats/i;\n this.errors = {\n noLicense: 'This application was built using a trial version of Syncfusion Essential Studio.' +\n ' To remove the license validation message permanently, a valid license key must be included.',\n trailExpired: 'This application was built using a trial version of Syncfusion Essential Studio.' +\n ' To remove the license validation message permanently, a valid license key must be included.',\n versionMismatched: 'The included Syncfusion license key is invalid.',\n platformMismatched: 'The included Syncfusion license key is invalid.',\n invalidKey: 'The included Syncfusion license key is invalid.'\n };\n /**\n * To manage licensing operation.\n */\n this.manager = (function () {\n var licKey = null;\n /**\n * Sets the license key.\n *\n * @param {string} key - Specifies the license key.\n * @returns {void}\n */\n function set(key) { licKey = key; }\n /**\n * Gets the license key.\n *\n * @returns {string} -Gets the license key.\n */\n function get() { return licKey; }\n return {\n setKey: set,\n getKey: get\n };\n })();\n /**\n * To manage npx licensing operation.\n */\n this.npxManager = (function () {\n var npxLicKey = 'npxKeyReplace';\n /**\n * Gets the license key.\n *\n * @returns {string} - Gets the license key.\n */\n function get() { return npxLicKey; }\n return {\n getKey: get\n };\n })();\n this.manager.setKey(key);\n }\n /**\n * To validate the provided license key.\n */\n LicenseValidator.prototype.validate = function () {\n var contentKey = [115, 121, 110, 99, 102, 117, 115, 105, 111, 110, 46,\n 108, 105, 99, 101, 110, 115, 101, 67, 111, 110, 116, 101, 110, 116];\n var URLKey = [115, 121, 110, 99, 102, 117, 115, 105, 111, 110, 46,\n 99, 108, 97, 105, 109, 65, 99, 99, 111, 117, 110, 116, 85, 82, 76];\n if (!this.isValidated && (containerObject && !getValue(convertToChar(bypassKey), containerObject) && !getValue('Blazor', containerObject))) {\n var validateMsg = void 0;\n var validateURL = void 0;\n if ((this.manager && this.manager.getKey()) || (this.npxManager && this.npxManager.getKey() !== 'npxKeyReplace')) {\n var result = this.getInfoFromKey();\n if (result && result.length) {\n for (var _i = 0, result_1 = result; _i < result_1.length; _i++) {\n var res = result_1[_i];\n if (!this.platform.test(res.platform) || res.invalidPlatform) {\n validateMsg = this.errors.platformMismatched;\n }\n else if (res.version.indexOf(this.version) === -1) {\n validateMsg = this.errors.versionMismatched;\n validateMsg = validateMsg.replace('##LicenseVersion', res.version);\n validateMsg = validateMsg.replace('##Requireversion', this.version + '.x');\n }\n else if (res.expiryDate) {\n var expDate = new Date(res.expiryDate);\n var currDate = new Date();\n if (expDate !== currDate && expDate < currDate) {\n validateMsg = this.errors.trailExpired;\n }\n else {\n break;\n }\n }\n }\n }\n else {\n validateMsg = this.errors.invalidKey;\n }\n }\n else {\n var licenseContent = getValue(convertToChar(contentKey), containerObject);\n validateURL = getValue(convertToChar(URLKey), containerObject);\n if (licenseContent && licenseContent !== '') {\n validateMsg = licenseContent;\n }\n else {\n validateMsg = this.errors.noLicense;\n }\n }\n if (validateMsg && typeof document !== 'undefined' && !isNullOrUndefined(document)) {\n accountURL = (validateURL && validateURL !== '') ? validateURL : \"https://www.syncfusion.com/account/claim-license-key?pl=SmF2YVNjcmlwdA==&vs=MjAuNA==\";\n var errorDiv = createElement('div', {\n innerHTML: \"
\" + validateMsg + ' ' + 'Claim your free account'\n });\n errorDiv.setAttribute('style', \"position: fixed;\\n top: 10px;\\n left: 10px;\\n right: 10px;\\n font-size: 14px;\\n background: #EEF2FF;\\n color: #222222;\\n z-index: 999999999;\\n text-align: left;\\n border: 1px solid #EEEEEE;\\n padding: 10px 11px 10px 50px;\\n border-radius: 8px;\\n font-family: Helvetica Neue, Helvetica, Arial;\");\n document.body.appendChild(errorDiv);\n this.isLicensed = false;\n }\n this.isValidated = true;\n setValue(convertToChar(bypassKey), this.isValidated, containerObject);\n }\n return this.isLicensed;\n };\n LicenseValidator.prototype.getDecryptedData = function (key) {\n try {\n return atob(key);\n }\n catch (error) {\n return '';\n }\n };\n /**\n * Get license information from key.\n *\n * @returns {IValidator} - Get license information from key.\n */\n LicenseValidator.prototype.getInfoFromKey = function () {\n try {\n var licKey = '';\n var pkey = [5439488, 7929856, 5111808, 6488064, 4587520, 7667712, 5439488,\n 6881280, 5177344, 7208960, 4194304, 4456448, 6619136, 7733248, 5242880, 7077888,\n 6356992, 7602176, 4587520, 7274496, 7471104, 7143424];\n var decryptedStr = [];\n var resultArray = [];\n var invalidPlatform = false;\n var isNpxKey = false;\n if (this.manager.getKey()) {\n licKey = this.manager.getKey();\n }\n else {\n isNpxKey = true;\n licKey = this.npxManager.getKey().split('npxKeyReplace')[1];\n }\n var licKeySplit = licKey.split(';');\n for (var _i = 0, licKeySplit_1 = licKeySplit; _i < licKeySplit_1.length; _i++) {\n var lKey = licKeySplit_1[_i];\n var decodeStr = this.getDecryptedData(lKey);\n if (!decodeStr) {\n continue;\n }\n var k = 0;\n var buffr = '';\n if (!isNpxKey) {\n for (var i = 0; i < decodeStr.length; i++, k++) {\n if (k === pkey.length) {\n k = 0;\n }\n var c = decodeStr.charCodeAt(i);\n buffr += String.fromCharCode(c ^ (pkey[parseInt(k.toString(), 10)] >> 16));\n }\n }\n else {\n var charKey = decodeStr[decodeStr.length - 1];\n var decryptedKey = [];\n for (var i = 0; i < decodeStr.length; i++) {\n decryptedKey[parseInt(i.toString(), 10)] = decodeStr[parseInt(i.toString(), 10)].charCodeAt(0) - charKey.charCodeAt(0);\n }\n for (var i = 0; i < decryptedKey.length; i++) {\n buffr += String.fromCharCode(decryptedKey[parseInt(i.toString(), 10)]);\n }\n }\n if (this.platform.test(buffr)) {\n decryptedStr = buffr.split(';');\n invalidPlatform = false;\n // checked the length to verify the key in proper strucutre\n if (decryptedStr.length > 3) {\n resultArray.push({ platform: decryptedStr[0],\n version: decryptedStr[1],\n expiryDate: decryptedStr[2] });\n }\n }\n else if (buffr && buffr.split(';').length > 3) {\n invalidPlatform = true;\n }\n }\n if (invalidPlatform && !resultArray.length) {\n return [{ invalidPlatform: invalidPlatform }];\n }\n else {\n return resultArray.length ? resultArray : null;\n }\n }\n catch (error) {\n return null;\n }\n };\n return LicenseValidator;\n}());\nvar licenseValidator = new LicenseValidator();\n/**\n * Converts the given number to characters.\n *\n * @param {number} cArr - Specifies the license key as number.\n * @returns {string}\n */\nfunction convertToChar(cArr) {\n var ret = '';\n for (var _i = 0, cArr_1 = cArr; _i < cArr_1.length; _i++) {\n var arr = cArr_1[_i];\n ret += String.fromCharCode(arr);\n }\n return ret;\n}\n/**\n * To set license key.\n *\n * @param {string} key - license key\n * @returns {void}\n */\nexport function registerLicense(key) {\n licenseValidator = new LicenseValidator(key);\n}\nexport var validateLicense = function (key) {\n if (key) {\n registerLicense(key);\n }\n return licenseValidator.validate();\n};\nexport var getVersion = function () {\n return licenseValidator.version;\n};\n// Method for create overlay over the sample\nexport var createLicenseOverlay = function () {\n var bannerTemplate = \"\\n \\n
\\n
\\n
![](\\\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ2IiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMTQ2IDMyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNDAuNTk2NSAxNS4wMDc4SDMyLjQyNUMzMS41NTU3IDE1LjAwNzggMzAuOTAzNyAxNS4xODEyIDMwLjUxMjUgMTUuNDg0NkMzMC4xMjEzIDE1LjgzMTQgMjkuOTA0IDE2LjMwODIgMjkuOTA0IDE3LjA0NTFDMjkuOTA0IDE3LjYwODYgMzAuMDc3OCAxOC4wNDIxIDMwLjQyNTYgMTguMzAyMkMzMC43NzMzIDE4LjYwNTYgMzEuMjk0OSAxOC43MzU2IDMxLjk5MDMgMTguNzM1NkgzNi4zMzY5QzM4LjExODkgMTguNzM1NiAzOS40MjI5IDE5LjA4MjQgNDAuMTYxOCAxOS43MzI2QzQwLjk0NDIgMjAuNDI2MiA0MS4yOTE5IDIxLjU1MzIgNDEuMjkxOSAyMy4xMTM3QzQxLjI5MTkgMjQuNzE3NiA0MC44NTcyIDI1Ljg4OCAzOS45ODc5IDI2LjY2ODJDMzkuMTE4NiAyNy40MDUxIDM3LjcyNzcgMjcuNzk1MyAzNS44NTg3IDI3Ljc5NTNIMjcuMDc4N1YyNS4wMjFIMzUuMzM3MkMzNi4yOTM0IDI1LjAyMSAzNi45NDU0IDI0Ljg5MSAzNy4zMzY2IDI0LjYzMDlDMzcuNzI3NyAyNC4zNzA4IDM3LjkwMTYgMjMuODk0IDM3LjkwMTYgMjMuMjg3MUMzNy45MDE2IDIyLjYzNjkgMzcuNzI3NyAyMi4xNjAxIDM3LjM4IDIxLjlDMzcuMDMyMyAyMS42Mzk5IDM2LjQyMzggMjEuNDY2NSAzNS41NTQ1IDIxLjQ2NjVIMzEuNjQyNkMyOS44NjA1IDIxLjQ2NjUgMjguNTEzMSAyMS4xMTk4IDI3LjY4NzMgMjAuMzgyOEMyNi44NjE0IDE5LjY0NTkgMjYuNDI2OCAxOC41MTg5IDI2LjQyNjggMTcuMDAxN0MyNi40MjY4IDE1LjM1NDUgMjYuODYxNCAxNC4xNDA4IDI3LjczMDcgMTMuMzYwNkMyOC42IDEyLjU4MDMgMjkuOTkwOSAxMi4yMzM1IDMxLjkwMzQgMTIuMjMzNUg0MC41OTY1VjE1LjAwNzhaIiBmaWxsPSIjMzU0M0E4Ii8+CjxwYXRoIGQ9Ik00OC4wNzI3IDI1LjI4MTFINTAuNTA2OFYxNi4zOTQ5SDUzLjU0OTNWMjcuNTM1MkM1My41NDkzIDI5LjA1MjQgNTMuMjAxNiAzMC4xNzk0IDUyLjUwNjIgMzAuOTE2M0M1MS44MTA3IDMxLjY1MzIgNTAuNzI0MSAzMiA0OS4yNDYzIDMySDQzLjMzNVYyOS42NTkySDQ4LjcyNDdDNDkuMjg5NyAyOS42NTkyIDQ5Ljc2NzkgMjkuNTI5MiA1MC4wNzIxIDI5LjIyNThDNTAuMzc2NCAyOC45NjU3IDUwLjU1MDIgMjguNTMyMiA1MC41NTAyIDI4LjAxMlYyNy44Mzg2SDQ3Ljg5ODlDNDYuMjAzNyAyNy44Mzg2IDQ0Ljk0MzIgMjcuNDkxOSA0NC4yNDc4IDI2Ljg0MTZDNDMuNTA4OSAyNi4xNDgxIDQzLjE2MTEgMjUuMDY0NCA0My4xNjExIDIzLjQ2MDVWMTYuMzk0OUg0Ni4xNjAyVjIzLjIwMDVDNDYuMTYwMiAyNC4wNjc0IDQ2LjI5MDYgMjQuNjMwOSA0Ni41NTE0IDI0Ljg5MUM0Ni43MjUzIDI1LjE1MTEgNDcuMjQ2OSAyNS4yODExIDQ4LjA3MjcgMjUuMjgxMVoiIGZpbGw9IiMzNTQzQTgiLz4KPHBhdGggZD0iTTU1Ljg5NjUgMTYuMzk0OUg2MS41OTA0QzYzLjMyOTEgMTYuMzk0OSA2NC41NDYxIDE2LjY5ODMgNjUuMjg1IDE3LjM0ODVDNjYuMDIzOSAxNy45OTg4IDY2LjM3MTYgMTkuMDgyNCA2Ni4zNzE2IDIwLjU1NjNWMjcuNzk1M0g2My4zMjkxVjIwLjk0NjRDNjMuMzI5MSAyMC4wNzk0IDYzLjE5ODcgMTkuNTE1OSA2Mi45Mzc5IDE5LjI5OTJDNjIuNjc3MSAxOS4wMzkxIDYyLjE1NTUgMTguOTA5MSA2MS4zMjk3IDE4LjkwOTFINTguODk1NlYyNy44Mzg2SDU1Ljg1M1YxNi4zOTQ5SDU1Ljg5NjVaIiBmaWxsPSIjMzU0M0E4Ii8+CjxwYXRoIGQ9Ik03NC45MzQyIDI1LjM2NzhINzguMTUwNlYyNy43OTUySDc0LjAyMTRDNzIuOTc4MiAyNy43OTUyIDcyLjEwODkgMjcuNjY1MiA3MS40NTcgMjcuNDkxOEM3MC44MDUgMjcuMjc1IDcwLjE5NjUgMjYuOTI4MyA2OS43MTgzIDI2LjQ1MTRDNjkuMTk2OCAyNS45MzEzIDY4Ljc2MjEgMjUuMjgxMSA2OC40NTc4IDI0LjU0NDJDNjguMTUzNiAyMy44MDcyIDY4LjAyMzIgMjIuOTgzNiA2OC4wMjMyIDIyLjE2QzY4LjAyMzIgMjEuMjkzMSA2OC4xNTM2IDIwLjQ2OTUgNjguNDU3OCAxOS42ODkyQzY4Ljc2MjEgMTguOTA5IDY5LjE1MzMgMTguMzAyMSA2OS43MTgzIDE3Ljc4MTlDNzAuMjM5OSAxNy4zMDUxIDcwLjgwNSAxNi45NTgzIDcxLjUwMDQgMTYuNzQxNkM3Mi4xOTU5IDE2LjUyNDkgNzMuMDIxNyAxNi40MzgyIDc0LjA2NDkgMTYuNDM4Mkg3OC4xOTQxVjE4LjkwOUg3NC45MzQyQzczLjQ5OTggMTguOTA5IDcyLjU0MzYgMTkuMTY5MSA3MS45Nzg1IDE5LjY0NTlDNzEuNDU2OSAyMC4xMjI3IDcxLjE1MjcgMjAuOTg5NyA3MS4xNTI3IDIyLjIwMzRDNzEuMTUyNyAyMi44OTY5IDcxLjI4MzEgMjMuNDYwNSA3MS41MDA0IDIzLjkzNzNDNzEuNzE3NyAyNC40MTQxIDcyLjA2NTUgMjQuNzYwOSA3Mi41MDAxIDI1LjA2NDNDNzIuNzE3NCAyNS4xOTQ0IDcyLjk3ODIgMjUuMjgxMSA3My4yODI1IDI1LjM2NzhDNzMuNjMwMiAyNS4zMjQ0IDc0LjE1MTggMjUuMzY3OCA3NC45MzQyIDI1LjM2NzhaIiBmaWxsPSIjMzU0M0E4Ii8+CjxwYXRoIGQ9Ik04MC44NDU2IDE4LjY0ODlINzguNjcyNFYxNi4zNTE1SDgwLjg0NTZWMTUuMTgxMUM4MC44NDU2IDE0LjAxMDggODEuMDYzIDEzLjIzMDUgODEuNDk3NiAxMi44NDA0QzgxLjkzMjMgMTIuNDUwMyA4Mi43NTgxIDEyLjIzMzUgODMuOTc1MSAxMi4yMzM1SDg2Ljg0MzhWMTQuNDAwOUg4NS40MDk1Qzg0Ljg4NzkgMTQuNDAwOSA4NC41NDAyIDE0LjQ4NzYgODQuMzIyOSAxNC42NjFDODQuMTA1NSAxNC44MzQ0IDgzLjk3NTEgMTUuMDk0NSA4My45NzUxIDE1LjQ0MTJWMTYuMzUxNUg4Ni44NDM4VjE4LjY0ODlIODMuOTc1MVYyNy43OTUzSDgwLjg0NTZWMTguNjQ4OVoiIGZpbGw9IiMzNTQzQTgiLz4KPHBhdGggZD0iTTk4LjQwNTYgMjcuNzk1M0g5Mi43MTE2QzkxLjAxNjUgMjcuNzk1MyA4OS44NDI5IDI3LjQ0ODUgODkuMDYwNSAyNi43OTgzQzg4LjMyMTYgMjYuMTQ4MSA4Ny45MzA0IDI1LjA2NDQgODcuOTMwNCAyMy41OTA2VjE2LjM5NDlIOTAuOTI5NVYyMy40MTcyQzkwLjkyOTUgMjQuMTk3NCA5MS4wNTk5IDI0LjY3NDMgOTEuMzIwNyAyNC45MzQ0QzkxLjU4MTUgMjUuMTk0NCA5Mi4xMDMxIDI1LjMyNDUgOTIuOTI4OSAyNS4zMjQ1SDk1LjM2M1YxNi4zOTQ5SDk4LjQwNTZWMjcuNzk1M1oiIGZpbGw9IiMzNTQzQTgiLz4KPHBhdGggZD0iTTEwMC42MjIgMjUuNDExMkgxMDcuMDExQzEwNy41NzcgMjUuNDExMiAxMDguMDExIDI1LjMyNDUgMTA4LjI3MiAyNS4xNTExQzEwOC41MzMgMjQuOTc3NyAxMDguNjYzIDI0LjY3NDMgMTA4LjY2MyAyNC4zMjc1QzEwOC42NjMgMjMuOTM3NCAxMDguNTMzIDIzLjY3NzMgMTA4LjI3MiAyMy40NjA1QzEwOC4wMTEgMjMuMjg3MSAxMDcuNTc3IDIzLjIwMDUgMTA3LjA1NSAyMy4yMDA1SDEwNC40NDdDMTAyLjg4MiAyMy4yMDA1IDEwMS44MzkgMjIuOTgzNyAxMDEuMzE4IDIyLjUwNjlDMTAwLjc1MiAyMi4wMzAxIDEwMC40OTIgMjEuMjA2NSAxMDAuNDkyIDE5Ljk5MjdDMTAwLjQ5MiAxOC43NzkgMTAwLjgzOSAxNy44Njg3IDEwMS40OTEgMTcuMjYxOEMxMDIuMTQzIDE2LjY5ODMgMTAzLjE4NyAxNi4zOTQ5IDEwNC41MzQgMTYuMzk0OUgxMTEuMDU0VjE4Ljc3OUgxMDUuNzA4QzEwNC44MzggMTguNzc5IDEwNC4yNzMgMTguODY1NyAxMDQuMDEyIDE4Ljk5NTdDMTAzLjc1MiAxOS4xNjkxIDEwMy42MjEgMTkuNDI5MiAxMDMuNjIxIDE5LjgxOTRDMTAzLjYyMSAyMC4xNjYxIDEwMy43NTIgMjAuNDI2MiAxMDMuOTY5IDIwLjU5OTZDMTA0LjE4NiAyMC43NzMgMTA0LjU3NyAyMC44NTk3IDEwNS4wNTYgMjAuODU5N0gxMDcuNzk0QzEwOS4wNTQgMjAuODU5NyAxMTAuMDExIDIxLjE2MzEgMTEwLjY2MyAyMS43MjY2QzExMS4zMTUgMjIuMjkwMiAxMTEuNjYyIDIzLjE1NzEgMTExLjY2MiAyNC4yNDA4QzExMS42NjIgMjUuMjgxMSAxMTEuMzU4IDI2LjE0ODEgMTEwLjc5MyAyNi43OTgzQzExMC4yMjggMjcuNDQ4NSAxMDkuNDQ2IDI3Ljc5NTMgMTA4LjUzMyAyNy43OTUzSDEwMC43MDlWMjUuNDExMkgxMDAuNjIyWiIgZmlsbD0iIzM1NDNBOCIvPgo8cGF0aCBkPSJNMTE2LjU3NCAxNS4wOTQ0SDExMy40MDFWMTIuMjc2OUgxMTYuNTc0VjE1LjA5NDRaTTExNi41NzQgMjcuNzk1M0gxMTMuNDAxVjE2LjM5NDlIMTE2LjU3NFYyNy43OTUzWiIgZmlsbD0iIzM1NDNBOCIvPgo8cGF0aCBkPSJNMTMwLjMwOSAyMi4xMTY3QzEzMC4zMDkgMjMuODkzOSAxMjkuNzQ0IDI1LjMyNDQgMTI4LjY1NyAyNi40MDgxQzEyNy41NzEgMjcuNDkxOCAxMjYuMDkzIDI4LjAxMiAxMjQuMjI0IDI4LjAxMkMxMjIuMzU1IDI4LjAxMiAxMjAuODc3IDI3LjQ5MTggMTE5Ljc5IDI2LjQwODFDMTE4LjcwNCAyNS4zMjQ0IDExOC4xMzkgMjMuODkzOSAxMTguMTM5IDIyLjExNjdDMTE4LjEzOSAyMC4zMzk0IDExOC43MDQgMTguOTA5IDExOS43OSAxNy44MjUzQzEyMC44NzcgMTYuNzQxNiAxMjIuMzk4IDE2LjIyMTQgMTI0LjIyNCAxNi4yMjE0QzEyNi4wNDkgMTYuMjIxNCAxMjcuNTI3IDE2Ljc0MTYgMTI4LjY1NyAxNy44MjUzQzEyOS43NDQgMTguODY1NiAxMzAuMzA5IDIwLjI5NjEgMTMwLjMwOSAyMi4xMTY3Wk0xMjEuMjY4IDIyLjExNjdDMTIxLjI2OCAyMy4yMDA0IDEyMS41MjkgMjQuMDY3MyAxMjIuMDUxIDI0LjY3NDJDMTIyLjU3MiAyNS4yODExIDEyMy4yNjggMjUuNTg0NSAxMjQuMTggMjUuNTg0NUMxMjUuMDkzIDI1LjU4NDUgMTI1Ljc4OSAyNS4yODExIDEyNi4zMSAyNC42NzQyQzEyNi44MzIgMjQuMDY3MyAxMjcuMDkzIDIzLjIwMDQgMTI3LjA5MyAyMi4xMTY3QzEyNy4wOTMgMjEuMDMzIDEyNi44MzIgMjAuMTY2MSAxMjYuMzEgMTkuNjAyNUMxMjUuNzg5IDE4Ljk5NTcgMTI1LjA5MyAxOC42OTIyIDEyNC4xMzcgMTguNjkyMkMxMjMuMjI0IDE4LjY5MjIgMTIyLjUyOSAxOC45OTU3IDEyMi4wMDcgMTkuNjAyNUMxMjEuNTI5IDIwLjE2NjEgMTIxLjI2OCAyMS4wMzMgMTIxLjI2OCAyMi4xMTY3WiIgZmlsbD0iIzM1NDNBOCIvPgo8cGF0aCBkPSJNMTMxLjc4NyAxNi4zOTQ5SDEzNy40ODFDMTM5LjIxOSAxNi4zOTQ5IDE0MC40MzYgMTYuNjk4MyAxNDEuMTc1IDE3LjM0ODVDMTQxLjkxNCAxNy45OTg4IDE0Mi4yNjIgMTkuMDgyNCAxNDIuMjYyIDIwLjU1NjNWMjcuNzk1M0gxMzkuMjE5VjIwLjk0NjRDMTM5LjIxOSAyMC4wNzk0IDEzOS4wODkgMTkuNTE1OSAxMzguODI4IDE5LjI5OTJDMTM4LjU2NyAxOS4wMzkxIDEzOC4wNDYgMTguOTA5MSAxMzcuMjIgMTguOTA5MUgxMzQuNzg2VjI3LjgzODZIMTMxLjc0M1YxNi4zOTQ5SDEzMS43ODdaIiBmaWxsPSIjMzU0M0E4Ii8+CjxwYXRoIGQ9Ik03LjEyODMxIDMuNzM3NDNIMFYxMC44NDY0SDcuMTI4MzFWMy43Mzc0M1oiIGZpbGw9IiMzNTQzQTgiLz4KPHBhdGggZD0iTTIzLjI1MTMgLTIuMTU3MjVlLTA1TDE4LjU1MTMgNS41MTY4NUwyNC4wODMxIDEwLjIwNDFMMjguNzgzMSA0LjY4NzI1TDIzLjI1MTMgLTIuMTU3MjVlLTA1WiIgZmlsbD0iI0ZGODYwMCIvPgo8cGF0aCBkPSJNMTUuNjA0MSAzLjczNzQzSDguNDc1ODNWMTAuODQ2NEgxNS42MDQxVjMuNzM3NDNaIiBmaWxsPSIjMzU0M0E4Ii8+CjxwYXRoIGQ9Ik03LjEyODMxIDEyLjE5MDJIMFYxOS4yOTkySDcuMTI4MzFWMTIuMTkwMloiIGZpbGw9IiMzNTQzQTgiLz4KPHBhdGggZD0iTTE1LjYwNDEgMTIuMTkwMkg4LjQ3NTgzVjE5LjI5OTJIMTUuNjA0MVYxMi4xOTAyWiIgZmlsbD0iIzM1NDNBOCIvPgo8cGF0aCBkPSJNMjQuMDc5NyAxMi4xOTAySDE2Ljk1MTRWMTkuMjk5MkgyNC4wNzk3VjEyLjE5MDJaIiBmaWxsPSIjRkY4NjAwIi8+CjxwYXRoIGQ9Ik03LjEyODMxIDIwLjY4NjNIMFYyNy43OTUzSDcuMTI4MzFWMjAuNjg2M1oiIGZpbGw9IiMzNTQzQTgiLz4KPHBhdGggZD0iTTE1LjYwNDEgMjAuNjg2M0g4LjQ3NTgzVjI3Ljc5NTNIMTUuNjA0MVYyMC42ODYzWiIgZmlsbD0iIzM1NDNBOCIvPgo8cGF0aCBkPSJNMjQuMTIzMiAyMC42ODYzSDE2Ljk5NDlWMjcuNzk1M0gyNC4xMjMyVjIwLjY4NjNaIiBmaWxsPSIjMzU0M0E4Ii8+CjxwYXRoIGQ9Ik0xNDYgMTUuODMxM0MxNDYgMTYuODcxNyAxNDUuMTc0IDE3LjY5NTMgMTQ0LjEzMSAxNy42OTUzQzE0My4wODggMTcuNjk1MyAxNDIuMjYyIDE2Ljg3MTcgMTQyLjI2MiAxNS44MzEzQzE0Mi4yNjIgMTQuNzkxIDE0My4wODggMTQuMDEwNyAxNDQuMTMxIDE0LjAxMDdDMTQ1LjEzMSAxMy45Njc0IDE0NiAxNC43OTEgMTQ2IDE1LjgzMTNaTTE0Mi45NTcgMTQuNzkxQzE0Mi42OTcgMTUuMDUxMSAxNDIuNTY2IDE1LjQ0MTIgMTQyLjU2NiAxNS44MzEzQzE0Mi41NjYgMTYuNjk4MyAxNDMuMjYyIDE3LjM5MTggMTQ0LjEzMSAxNy4zOTE4QzE0NSAxNy4zOTE4IDE0NS42OTYgMTYuNjk4MyAxNDUuNjk2IDE1LjgzMTNDMTQ1LjY5NiAxNS4wMDc3IDE0NSAxNC4yNzA4IDE0NC4xNzQgMTQuMjcwOEMxNDMuNjUzIDE0LjI3MDggMTQzLjI2MiAxNC40NDQyIDE0Mi45NTcgMTQuNzkxWk0xNDQuODcgMTYuOTE1SDE0NC40NzlMMTQzLjkxNCAxNi4wOTE0VjE2LjkxNUgxNDMuNjA5VjE0Ljc0NzZIMTQzLjk1N0MxNDQuNDM1IDE0Ljc0NzYgMTQ0LjY1MyAxNC45NjQ0IDE0NC42NTMgMTUuMzU0NUMxNDQuNjUzIDE1LjY1NzkgMTQ0LjQ3OSAxNS44NzQ3IDE0NC4xNzQgMTUuOTYxNEwxNDQuODcgMTYuOTE1Wk0xNDQuMDQ0IDE1LjY1NzlDMTQ0LjI2MSAxNS42NTc5IDE0NC4zOTIgMTUuNTI3OSAxNDQuMzkyIDE1LjM1NDVDMTQ0LjM5MiAxNS4xMzc4IDE0NC4yNjEgMTUuMDUxMSAxNDQuMDAxIDE1LjA1MTFIMTQzLjkxNFYxNS42NTc5SDE0NC4wNDRaIiBmaWxsPSIjMzU0M0E4Ii8+Cjwvc3ZnPgo=\\\")
\\n
\\n
Claim your FREE account and get a key in less than a minute
\\n
\\n - Access to a 30-day free trial of any of our products.
\\n - Access to 24x5 support by developers via the support tickets, forum, feature & feedback page and chat.
\\n - 200+ ebooks on the latest technologies, industry trends, and research topics.\\n
\\n - Largest collection of over 7,000 flat and wireframe icons for free with Syncfusion Metro Studio.
\\n - Free and unlimited access to Syncfusion technical blogs and whitepapers.
\\n
\\n
Syncfusion is trusted by 29,000+ businesses worldwide
\\n
![](\\\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODIwIiBoZWlnaHQ9IjU2IiB2aWV3Qm94PSIwIDAgODIwIDU2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00MjcuNjE3IDIyLjU2NTlWMjQuNzIyNkM0MjYuNTU4IDI0LjM2MzggNDI1LjM5OCAyNC4xNTQ0IDQyNC40NzQgMjQuMTU0NEM0MjMuMzMzIDI0LjE1NDQgNDIyLjY5OCAyNC40OTEyIDQyMi42OTggMjUuMDk2M0M0MjIuNjk4IDI1LjQ4MjQgNDIyLjk3NiAyNS43MzgzIDQyMy43NzMgMjYuMDg1NEw0MjUuOTE3IDI3LjAxNzRDNDI3LjYzMyAyNy43NjM5IDQyOC40OTcgMjguODUzIDQyOC40OTcgMzAuMjY4MUM0MjguNDk3IDMyLjQ1MjIgNDI2LjU0NiAzMy44MyA0MjMuNDUyIDMzLjgzQzQyMi4zMjQgMzMuODMgNDIxLjAxOCAzMy42NzM2IDQxOS42MzYgMzMuMzcwOVYzMS4xNDE2QzQyMS4wMDYgMzEuNTAyOCA0MjIuMjYyIDMxLjY5NTcgNDIzLjIzOSAzMS42OTU3QzQyNC41MTggMzEuNjk1NyA0MjUuMjAzIDMxLjM1MDYgNDI1LjIwMyAzMC43MDc0QzQyNS4yMDMgMzAuMzIwOCA0MjQuOTM1IDMwLjAzNjcgNDI0LjMyMiAyOS43NzE3TDQyMS45NzUgMjguNzU5M0M0MjAuMjM2IDI4LjAwNzggNDE5LjQzMyAyNi45OTU0IDQxOS40MzMgMjUuNTUyMUM0MTkuNDMzIDIzLjQ4MzcgNDIxLjMxNCAyMi4xNjQ5IDQyNC4yNjUgMjIuMTY0OUM0MjUuMjk4IDIyLjE2NDkgNDI2LjU3IDIyLjMxNzEgNDI3LjYxNyAyMi41NjU5VjIyLjU2NTlaTTQzMC4xNjcgMjIuMzkwOUg0MzMuNjM1VjMzLjYwMzlINDMwLjE2N1YyMi4zOTA5Wk00NDQuOTExIDIyLjM5MDlWMjQuNDQ1MUg0MzkuNjc1VjI2Ljk3NDJINDQ0LjI0OVYyOC44MzIzSDQzOS42NzVWMzEuNDU0M0g0NDQuOTc4VjMzLjYwMzlINDM2LjMwNVYyMi4zOTA5SDQ0NC45MTFaTTQ2MS4yOTQgMjIuMzkwOVYzMy42MDM5SDQ1Ny45MzlWMjYuMjIzNkw0NTQuNjUyIDMzLjY5MTVINDUyLjUzMUw0NDkuMjY2IDI2LjIyMzZWMzMuNjAzOUg0NDYuOTQ5VjIyLjM5MDlINDUxLjE4NEw0NTQuMTc4IDI5LjIxMTRMNDU3LjE1NiAyMi4zOTA5SDQ2MS4yOTRWMjIuMzkwOVpNNDcyLjU3OSAyMi4zOTA5VjI0LjQ0NTFINDY3LjMzNVYyNi45NzQySDQ3MS45MDhWMjguODMyM0g0NjcuMzM1VjMxLjQ1NDNINDcyLjYzOFYzMy42MDM5SDQ2My45NTdWMjIuMzkwOUg0NzIuNTc5Wk00ODQuNzk0IDIyLjM5MDlWMzMuNjAzOUg0ODEuMDkzTDQ3Ni45MjYgMjYuNDEyM1YzMy42MDM5SDQ3NC42MDhWMjIuMzkwOUg0NzguNDA3TDQ4Mi40ODQgMjkuNDg3NlYyMi4zOTA5SDQ4NC43OTRaTTQ5NC44NTggMjIuNTY1OVYyNC43MjI2QzQ5My44MDcgMjQuMzY2MyA0OTIuNjQgMjQuMTU0NCA0OTEuNzMyIDI0LjE1NDRDNDkwLjU3MyAyNC4xNTQ0IDQ4OS45MzkgMjQuNDg1OCA0ODkuOTM5IDI1LjA5M0M0ODkuOTM5IDI1LjQ4ODYgNDkwLjE5OCAyNS43MjUgNDkxLjAyMyAyNi4wODU5TDQ5My4xNTcgMjcuMDE3OEM0OTQuODg1IDI3Ljc3MjIgNDk1LjczOSAyOC44NTE4IDQ5NS43MzkgMzAuMjgzNUM0OTUuNzM5IDMyLjQ1NTkgNDkzLjc4NiAzMy44MzA4IDQ5MC42OTkgMzMuODMwOEM0ODkuNTY5IDMzLjgzMDggNDg4LjI1OSAzMy42NzM2IDQ4Ni44NzggMzMuMzcxN1YzMS4xNDI0QzQ4OC4yNDcgMzEuNTAyOCA0ODkuNDk5IDMxLjY5NjUgNDkwLjQ3IDMxLjY5NjVDNDkxLjc0IDMxLjY5NjUgNDkyLjQ0NCAzMS4zNTE1IDQ5Mi40NDQgMzAuNzI4NUM0OTIuNDQ0IDMwLjMxNjMgNDkyLjE5NyAzMC4wNTA0IDQ5MS41NTUgMjkuNzcyNUw0ODkuMjE4IDI4Ljc2MDFDNDg3LjQ2NyAyOC4wMDI4IDQ4Ni42NzQgMjcuMDAyIDQ4Ni42NzQgMjUuNTUzM0M0ODYuNjc0IDIzLjQ4NjIgNDg4LjU1NiAyMi4xNjY1IDQ5MS41IDIyLjE2NjVDNDkyLjUzNiAyMi4xNjUzIDQ5My44MTMgMjIuMzE3MSA0OTQuODU4IDIyLjU2NTlWMjIuNTY1OVoiIGZpbGw9IiMwMEEwQjAiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzUyLjQxMyAyNi44MTlDMzUwLjk5MiAyNS4yNzU5IDM0OS42MzggMjMuODMxNSAzNDguMzQ5IDIyLjE1NzRMMzQ3LjkyIDIxLjU5OTVDMzQ5LjQwNiAyMS4zNjkzIDM1MC42OTUgMjAuMzg0OCAzNTAuNjk1IDE4Ljc0MzNDMzUwLjY5NSAxNy4yMzMxIDM0OS41MzkgMTYuMjQ4MiAzNDcuODIxIDE2LjI0ODJDMzQ2LjU5OCAxNi4yNDgyIDM0NS43MDYgMTYuMzEzNyAzNDUuMjQzIDE2LjMxMzdDMzQ0LjcxNSAxNi4zMTM3IDM0NC4yODUgMTYuMzEzNyAzNDMuNzkgMTYuMjgwOEMzNDMuODU2IDE4LjE1MjEgMzQzLjg4OSAxOC4yODM0IDM0My44ODkgMTkuNDMyMlYyMy42MzQzQzM0My44ODkgMjQuNDU1MyAzNDMuODU2IDI1LjI3NTkgMzQzLjc5IDI2LjgxODZDMzQ0LjE1MyAyNi43MjAyIDM0NC41MTcgMjYuNzIwMiAzNDQuNzgxIDI2LjcyMDJDMzQ1LjA0NSAyNi43MjAyIDM0NS40MDkgMjYuNzUzMSAzNDUuNzA2IDI2LjgxODZDMzQ1LjY0IDI1Ljc2NzkgMzQ1LjYwNyAyNC4wMjgzIDM0NS42MDcgMjMuNjM0M1YyMS4yMDUxQzM0Ny4xNiAyMy4yMDc3IDM0OS4yMDkgMjUuNjY5NSAzNTAuMDAxIDI2LjgxODZDMzUwLjM5OCAyNi43MjAyIDM1MC43MjggMjYuNzIwMiAzNTEuMTI0IDI2LjcyMDJDMzUxLjQ1NSAyNi43MjA2IDM1MS45MTggMjYuNzIwNiAzNTIuNDEzIDI2LjgxOVYyNi44MTlaTTM0OC44NzggMTkuMDA2QzM0OC44NzggMjAuMDIzNCAzNDguMzE3IDIxLjIwNTQgMzQ2Ljc5NyAyMS4yMDU0QzM0Ni40IDIxLjIwNTQgMzQ2LjAwMyAyMS4yMDU0IDM0NS42MDcgMjEuMTcyNVYxNy4wNjg4QzM0Ni4wMDMgMTYuOTcwNCAzNDYuNDk5IDE2LjkwNDYgMzQ2Ljc2MyAxNi45MDQ2QzM0OC4wODUgMTYuOTA0OSAzNDguODc4IDE3LjY2IDM0OC44NzggMTkuMDA2VjE5LjAwNlpNMzgyLjM4IDI2Ljg4NDVDMzgxLjgxOSAyNi4yOTM2IDM4MC45NiAyNS4zNDE3IDM4MC4xMzQgMjQuNDIyM0MzODAuODI4IDIzLjY2NzIgMzgxLjU1NSAyMi41NTEgMzgxLjk4NCAyMS41OTkxQzM4MS43MTkgMjEuNDY3OCAzODEuMzU2IDIxLjIwNTEgMzgxLjA5MiAyMC45NzUzQzM4MC45OTMgMjEuNzk1OSAzODAuNDMyIDIyLjg3OTIgMzc5LjYzOSAyMy44MzE1QzM3OC41MTUgMjIuNTE4NSAzNzguMjE4IDIyLjE1NzQgMzc3LjE5MyAyMC43Nzg1QzM3OC41ODEgMTkuODkyMSAzNzkuMjQyIDE4Ljg3NDMgMzc5LjI0MiAxOC4wNTM3QzM3OS4yNDIgMTcuMTAxNyAzNzguNTgxIDE2LjExNjkgMzc2Ljk2MiAxNi4xMTY5QzM3NS4yMTEgMTYuMTE2OSAzNzQuMzUyIDE3LjIwMDIgMzc0LjM1MiAxOC40ODAzQzM3NC4zNTIgMTkuMjM1NCAzNzQuNTUgMTkuODkxNyAzNzUuMzc2IDIwLjk3NTNDMzc0LjA1NCAyMS42OTc1IDM3Mi43NjYgMjIuNzQ3OSAzNzIuNzY2IDI0LjQyMjNDMzcyLjc2NiAyNi4wNjM5IDM3NC4wODcgMjYuOTE3NCAzNzUuNzA3IDI2LjkxNzRDMzc3LjE5MyAyNi45MTc0IDM3OC4xNTEgMjYuMzI2NiAzNzguOTEyIDI1LjYzNjlMMzc5LjkwMiAyNi44MTlDMzgwLjIgMjYuNzg2MSAzODAuNTMxIDI2LjcyMDYgMzgwLjg2MSAyNi43MjA2QzM4MS4zMjQgMjYuNzIwNiAzODEuODUyIDI2Ljc4NjEgMzgyLjM4IDI2Ljg4NDVWMjYuODg0NVpNMzgzLjM3MiA0MC4wMTU4QzM4MS45MTggMzguNDczIDM4MC41OTcgMzcuMDYxMiAzNzkuMzA4IDM1LjM4NzFMMzc4Ljg3OCAzNC44Mjg4QzM4MC4zMzIgMzQuNTk5MSAzODEuNjU0IDMzLjYxNSAzODEuNjU0IDMxLjk0MDFDMzgxLjY1NCAzMC40NjMyIDM4MC40OTggMjkuNDQ1NCAzNzguNzc5IDI5LjQ0NTRDMzc3LjU1NyAyOS40NDU0IDM3Ni42MzIgMjkuNTQzNSAzNzYuMTY5IDI5LjU0MzVDMzc1LjY3MyAyOS41NDM1IDM3NS4yNDQgMjkuNTQzNSAzNzQuNzQ4IDI5LjQ3NzZDMzc0LjgxNCAzMS4zODIyIDM3NC44NDggMzEuNDgwMiAzNzQuODQ4IDMyLjYyOTRWMzYuODMxMUMzNzQuODQ4IDM3LjY1MjQgMzc0LjgxNCAzOC41MDUyIDM3NC43NDggNDAuMDE1NEMzNzUuMTEyIDM5Ljk0OTYgMzc1LjQ3NSAzOS45NDk2IDM3NS43MDcgMzkuOTQ5NkMzNzYuMDA0IDM5Ljk0OTYgMzc2LjM2OCAzOS45NDk2IDM3Ni42MzIgNDAuMDE1NEMzNzYuNTY1IDM4Ljk5OCAzNzYuNTMzIDM3LjI1ODEgMzc2LjUzMyAzNi44MzExVjM0LjQzNDhDMzc4LjExOSAzNi40MDQyIDM4MC4xNjcgMzguODk5NiAzODAuOTYgNDAuMDE1NEMzODEuMzU2IDM5Ljk0OTYgMzgxLjY4NyAzOS45NDk2IDM4Mi4wODMgMzkuOTQ5NkMzODIuMzggMzkuOTUgMzgyLjg3NiAzOS45NSAzODMuMzcyIDQwLjAxNThaTTM2Mi4xNiAyNi44MTlDMzYwLjk3MSAyNS41NzE1IDM1OC44ODkgMjIuOTc4IDM1OC4wNjMgMjEuOTkzNUwzNTcuMjM3IDIwLjk3NTdDMzU4LjA5NiAxOS45NTgzIDM1OC42OSAxOS4zMzQxIDM1OS4zMTkgMTguNTc5QzM2MC4wNDUgMTcuNzkxIDM2MC43MDYgMTYuOTcwNCAzNjEuNDk5IDE2LjI0ODJDMzYxLjEzNiAxNi4zMTM3IDM2MC45MzcgMTYuMzEzNyAzNjAuNzM5IDE2LjMxMzdDMzYwLjU0MSAxNi4zMTM3IDM2MC4zNDMgMTYuMzEzNyAzNjAuMTQ0IDE2LjI0ODJDMzU5LjkxMyAxNi42MDkzIDM1OS41NSAxNy4wNjg4IDM1OS4xNTMgMTcuNTI4N0MzNTguNzU2IDE3Ljk1NTYgMzU4LjM2IDE4LjM4MjIgMzU4LjA2MyAxOC43NDMzQzM1Ny4yMzYgMTkuNjk1MiAzNTYuNzc0IDIwLjE1NDcgMzU1LjU4NSAyMS4yNzA5VjE5LjQ2NTVDMzU1LjU4NSAxOC40MTUxIDM1NS41ODUgMTcuNzI1NSAzNTUuNjUxIDE2LjI0ODJDMzU1LjMyMSAxNi4zMTM3IDM1NC45NTcgMTYuMzEzNyAzNTQuNzI2IDE2LjMxMzdDMzU0LjQ2MSAxNi4zMTM3IDM1NC4wMzIgMTYuMzEzNyAzNTMuNzY4IDE2LjI0ODJDMzUzLjgzMyAxNy44MjM5IDM1My44NjcgMTguMjgzNCAzNTMuODY3IDE5LjQzMjVWMjMuNjM0N0MzNTMuODY3IDI0LjY4NSAzNTMuODMzIDI1LjMwODggMzUzLjc2OCAyNi44MTlDMzU0LjE2NCAyNi43MjA2IDM1NC40OTUgMjYuNzIwNiAzNTQuNzI2IDI2LjcyMDZDMzU0Ljk1NyAyNi43MjA2IDM1NS4zNTMgMjYuNzUzNSAzNTUuNjUxIDI2LjgxOUMzNTUuNTg1IDI1LjE0NDkgMzU1LjU4NSAyNC4xNTk3IDM1NS41ODUgMjMuNjM0N1YyMS40MzUyQzM1Ni44MDcgMjIuODc5NiAzNTguNjkgMjUuMjQzMyAzNTkuNzQ4IDI2LjgxOUMzNjAuMTMgMjYuNzU2MyAzNjAuNTE3IDI2LjcyMzQgMzYwLjkwNSAyNi43MjA2QzM2MS4yMDIgMjYuNzIwNiAzNjEuNjY1IDI2LjcyMDYgMzYyLjE2IDI2LjgxOVYyNi44MTlaTTM3Mi42MDEgNDAuMDE1OEMzNzIuNTY4IDM5Ljg1MTkgMzcyLjUzNSAzOS43MjA2IDM3Mi41MzUgMzkuNTIzNEMzNzIuNTM1IDM5LjM5MjggMzcyLjU2OCAzOS4yMjgxIDM3Mi42MDEgMzkuMDk2NEMzNzEuMjggMzkuMTI5NyAzNjguOTAxIDM5LjE5NTIgMzY4LjM3MiAzOS4xOTUyVjM0LjY2NDlDMzY5LjY5NCAzNC42NjQ5IDM3MC45ODIgMzQuNjY0OSAzNzIuMjcgMzQuNzk2M0MzNzIuMjM4IDM0LjYzMjQgMzcyLjIwNCAzNC40Njc3IDM3Mi4yMDQgMzQuMzM2NEMzNzIuMjA0IDM0LjIwNTggMzcyLjIwNCAzNC4wNDE5IDM3Mi4yNyAzMy44NDQ3QzM3MS4zNDYgMzMuOTQyOCAzNjkuMTk4IDMzLjk3NiAzNjguMzcyIDMzLjk3NlYzMC4yNjZDMzY5LjgyNiAzMC4yNjYgMzcwLjY4NSAzMC4yNjYgMzcxLjE4IDMwLjI5OTNMMzcyLjUwMiAzMC4zNjUxQzM3Mi40MzYgMzAuMTY3OSAzNzIuNDM2IDMwLjA2OTIgMzcyLjQzNiAyOS45MDUzQzM3Mi40MzYgMjkuNzQxNCAzNzIuNDM2IDI5LjcwODEgMzcyLjUwMiAyOS40NDU4QzM3MS40MTEgMjkuNDc4MyAzNjkuOTI1IDI5LjU0MzggMzY5LjI2NCAyOS41NDM4QzM2OC44MDIgMjkuNTQzOCAzNjcuMzQ4IDI5LjUxMTMgMzY2LjU4NyAyOS40NDU4QzM2Ni42NTQgMzAuMjY2NCAzNjYuNjg2IDMxLjYxMjMgMzY2LjY4NiAzMi41NjQyVjM2Ljg2NTFDMzY2LjY4NiAzNy40ODg1IDM2Ni42MiAzOC43MzU3IDM2Ni41ODcgNDAuMDE2MkMzNjcuNTEzIDM5Ljk1MDMgMzY4LjgwMiAzOS45NTAzIDM2OS4yNjQgMzkuOTUwM0MzNzAuMDI0IDM5Ljk1IDM3MS42NDMgMzkuOTUgMzcyLjYwMSA0MC4wMTU4Wk0zNjQuNjA1IDM5LjEyOTRDMzY0LjQ0IDM4LjgwMDggMzY0LjM0MSAzOC4zMDg4IDM2NC4yNzUgMzguMDQ2MUMzNjIuOTIgMzkuMTYxOSAzNjEuOTk1IDM5LjM5MjQgMzYwLjkzOCAzOS4zOTI0QzM1OC41OTIgMzkuMzkyNCAzNTcuMzM3IDM3LjI5MTMgMzU3LjMzNyAzNC42NjQ5QzM1Ny4zMzcgMzEuNzQzNiAzNTguNzU3IDMwLjAzNjIgMzYxLjE2OSAzMC4wMzYyQzM2Mi40MjUgMzAuMDM2MiAzNjMuNjE0IDMwLjU5NDUgMzY0LjE3NiAzMS4xNTI4QzM2NC4yMDggMzAuODg5OCAzNjQuMzA4IDMwLjM2NDggMzY0LjQ3MyAzMC4wNjg4QzM2My4zMTYgMjkuNTExMyAzNjIuMjU5IDI5LjM0NjYgMzYxLjEwMiAyOS4zNDY2QzM1Ny4yMzcgMjkuMzQ2NiAzNTUuNDUzIDMxLjc0MzYgMzU1LjQ1MyAzNC44Mjg4QzM1NS40NTMgMzguMzA5MSAzNTcuNzk4IDQwLjE0NzEgMzYwLjczOSA0MC4xNDcxQzM2Mi40MjUgNDAuMTQ3MSAzNjMuODEyIDM5LjYyMjIgMzY0LjYwNSAzOS4xMjk0VjM5LjEyOTRaTTM0Mi4zMDMgMjYuODE5QzM0MC41MTkgMjMuNDA0OSAzMzguOCAxOS4xMzczIDMzNy41NzggMTYuMTE2OUgzMzcuMzhDMzM2LjU4NyAxOC4wMjA3IDMzNS4xMzMgMjEuMjcwOSAzMzQuNzM3IDIyLjE4OTlDMzM0LjI3NCAyMy4zMDYxIDMzMy4yNSAyNS41MDU2IDMzMi41ODkgMjYuODE4NkMzMzIuODAzIDI2Ljc1MzggMzMzLjAyNiAyNi43MjA2IDMzMy4yNSAyNi43MjAyQzMzMy40NDggMjYuNzIwMiAzMzMuNjEzIDI2Ljc1MzEgMzMzLjg0NSAyNi44MTg2QzMzNC4xNzUgMjUuOTMyMiAzMzQuNjM4IDI0LjgxNiAzMzUuMTMzIDIzLjYzNDNDMzM1Ljc5NCAyMy42MDE0IDMzNi4zODkgMjMuNTY4OCAzMzYuOTg0IDIzLjU2ODhDMzM3LjYxMiAyMy41Njg4IDMzOC4yNzIgMjMuNjAxNCAzMzguOTMzIDIzLjYzNDNMMzM5LjU5NCAyNS4yMUwzNDAuMjU1IDI2LjgxODZDMzQwLjcxNyAyNi43MjAyIDM0MS4wOCAyNi43MjAyIDM0MS4zMTIgMjYuNzIwMkMzNDEuNjA5IDI2LjcyMDYgMzQxLjg3MyAyNi43MjA2IDM0Mi4zMDMgMjYuODE5VjI2LjgxOVpNMzUzLjYzNiAyOS40NDU0QzM1My40MzggMjkuNTExMyAzNTMuMjczIDI5LjU0MzUgMzUzLjEwNyAyOS41NDM1QzM1Mi45MDkgMjkuNTQzNSAzNTIuNzQ0IDI5LjUxMDkgMzUyLjU0NiAyOS40NDU0QzM1Mi42NDQgMzAuNzU4NCAzNTIuNjc4IDMyLjA3MTQgMzUyLjY3OCAzMy4zNTE5VjM2LjczMzRDMzUyLjE0OSAzNi4yNzM2IDM1MC44NiAzNS4wOTE5IDM0OS4zNzQgMzMuNzEzQzM0Ny44NiAzMi4zMDc0IDM0Ni4zOTQgMzAuODUxMSAzNDQuOTc5IDI5LjM0NjZIMzQ0Ljc0OEMzNDQuNzgxIDMwLjgyNDMgMzQ0LjgxNCAzMi40IDM0NC44MTQgMzMuODExNFYzNS44Nzk5QzM0NC44MTQgMzcuNjUyOCAzNDQuODE0IDM4LjYwNDcgMzQ0LjcxNSA0MC4wMTYyQzM0NC45OCAzOS45NTAzIDM0NS4xMTIgMzkuOTUwMyAzNDUuMzEgMzkuOTUwM0MzNDUuNDQyIDM5Ljk1MDMgMzQ1LjU3NSAzOS45NTAzIDM0NS44MDYgNDAuMDE2MkMzNDUuNzQgMzguNjcwNiAzNDUuNzA3IDM2LjQ3MDggMzQ1LjcwNyAzNS44Nzk5VjMyLjU5NjhDMzQ4LjE4NSAzNC44NjI1IDM1MS4yMjQgMzcuODgyNiAzNTMuNDcxIDQwLjE0NzVIMzUzLjYwM0MzNTMuNjAzIDM4LjkzMjkgMzUzLjUzNyAzNy43MTc5IDM1My41MzcgMzYuNTA0VjM0LjYzMjdDMzUzLjUzNiAzMi40MzI1IDM1My41MzYgMzEuMzQ5MyAzNTMuNjM2IDI5LjQ0NTRaTTM0Mi41NjcgNDAuMDE1OEMzNDIuNTM0IDM5Ljg1MTkgMzQyLjUwMSAzOS43MjA2IDM0Mi41MDEgMzkuNTIzNEMzNDIuNTAxIDM5LjM5MjggMzQyLjUzNCAzOS4yMjgxIDM0Mi41NjcgMzkuMDk2NEMzNDEuMjQ2IDM5LjEyOTcgMzM4Ljg2NyAzOS4xOTUyIDMzOC4zNzEgMzkuMTk1MlYzNC42NjQ5QzMzOS42NiAzNC42NjQ5IDM0MC45NDggMzQuNjY0OSAzNDIuMjM3IDM0Ljc5NjNDMzQyLjIwNCAzNC42MzI0IDM0Mi4xNzEgMzQuNDY3NyAzNDIuMTcxIDM0LjMzNjRDMzQyLjE3MSAzNC4yMDU4IDM0Mi4xNzEgMzQuMDQxOSAzNDIuMjM3IDMzLjg0NDdDMzQxLjMxMiAzMy45NDI4IDMzOS4xOTcgMzMuOTc2IDMzOC4zNzEgMzMuOTc2VjMwLjI2NkMzMzkuNzkyIDMwLjI2NiAzNDAuNjUxIDMwLjI2NiAzNDEuMTc5IDMwLjI5OTNMMzQyLjQ2OCAzMC4zNjUxQzM0Mi40MzUgMzAuMTY3OSAzNDIuNDM1IDMwLjA2OTIgMzQyLjQzNSAyOS45MDUzQzM0Mi40MzUgMjkuNzQxNCAzNDIuNDM1IDI5LjY3NTUgMzQyLjQ2OCAyOS40NDU4QzM0MS4zNzggMjkuNDc4MyAzMzkuODkxIDI5LjU0MzggMzM5LjIzIDI5LjU0MzhDMzM4Ljc2NyAyOS41NDM4IDMzNy4zMTQgMjkuNTExMyAzMzYuNTU0IDI5LjQ0NThDMzM2LjYyIDMwLjI2NjQgMzM2LjY1MyAzMS42MTIzIDMzNi42NTMgMzIuNTY0MlYzNi44NjUxQzMzNi42NTMgMzcuNDg4NSAzMzYuNTg3IDM4LjczNTcgMzM2LjU1NCA0MC4wMTYyQzMzNy41MTIgMzkuOTUwMyAzMzguNzY3IDM5Ljk1MDMgMzM5LjIzIDM5Ljk1MDNDMzM5Ljk5IDM5Ljk1IDM0MS42NDIgMzkuOTUgMzQyLjU2NyA0MC4wMTU4VjQwLjAxNThaTTMzMS4yMDEgMjYuODE5QzMzMC42NzMgMjMuMjQwNiAzMzAuMjEgMTkuNDk4NCAzMjkuODQ3IDE2LjExNjlDMzI5Ljc0OCAxNi4xNDk4IDMyOS43MTQgMTYuMTQ5OCAzMjkuNjQ5IDE2LjExNjlDMzI4Ljk1NSAxNy4zMzE1IDMyOC4xNjIgMTguNjQ0NSAzMjcuNTY3IDE5LjU2MzlDMzI3LjAwNiAyMC40NTAzIDMyNi4zNDUgMjEuNTAwNyAzMjUuNTg1IDIyLjYxNjlDMzIzLjk5OSAyMC41ODE3IDMyMi4zNDcgMTguMDIxMSAzMjEuMjU2IDE2LjExNjlDMzIxLjE5IDE2LjE0OTggMzIxLjE1NyAxNi4xMTY5IDMyMS4wOTEgMTYuMTE2OUMzMjAuNzI4IDE5LjQ5OCAzMjAuMjMyIDIzLjI3MzIgMzE5LjczNiAyNi44MTlDMzIwLjAwMSAyNi43MjA2IDMyMC4xNjYgMjYuNzIwNiAzMjAuMjk4IDI2LjcyMDZDMzIwLjQ5NiAyNi43MjA2IDMyMC42MjggMjYuNzUzNSAzMjAuODU5IDI2LjgxOUMzMjAuOTkyIDI0LjQ1NTMgMzIxLjI1NiAyMi4xMjQ0IDMyMS41NTMgMTkuNjYyM0MzMjIuODQyIDIxLjUzMzYgMzIzLjk2NSAyMy4xNDIyIDMyNS4yMjEgMjQuODQ5M0MzMjYuMjc4IDIzLjIwNzcgMzI3LjM2OCAyMS40MzQ4IDMyOC41NTggMTkuNjI5NEMzMjguODg4IDIyLjE1NyAzMjkuMTg2IDI0LjQ1NTMgMzI5LjM1MSAyNi44MTlDMzI5Ljc4IDI2LjcyMDYgMzMwLjA3OCAyNi43MjA2IDMzMC4yNzYgMjYuNzIwNkMzMzAuNTQgMjYuNzIwNiAzMzAuODA1IDI2LjcyMDYgMzMxLjIwMSAyNi44MTlWMjYuODE5Wk0zMzQuOTY4IDMyLjIwMjhDMzM0Ljk2OCAzMC4yOTg5IDMzMy40NDggMjkuNDQ1NCAzMzEuNTk4IDI5LjQ0NTRDMzMwLjc3MiAyOS40NDU0IDMyOS44OCAyOS41NDM1IDMyOS4yNTIgMjkuNTQzNUMzMjkuMDIxIDI5LjU0MzUgMzI4LjUyNSAyOS41NDM1IDMyNy45OTcgMjkuNDc3NkMzMjguMDMgMzAuNTI4MyAzMjguMDk2IDMxLjQxNDggMzI4LjA5NiAzMi40MzIyVjM2LjkyOTVDMzI4LjA5NiAzNy45MTQ4IDMyOC4wMyAzOC45OTggMzI3Ljk5NyA0MC4wMTU0QzMyOC40MjYgMzkuOTQ5NiAzMjguNzI0IDM5Ljk0OTYgMzI4LjkyMiAzOS45NDk2QzMyOS4xNTMgMzkuOTQ5NiAzMjkuNDg0IDM5Ljk0OTYgMzI5Ljg4IDQwLjAxNTRDMzI5LjgxNSAzOS4wMzE5IDMyOS43ODIgMzguMDQ2NSAzMjkuNzgxIDM3LjA2MDlWMzUuNDJDMzMwLjE0NSAzNS40NTI2IDMzMC41MDggMzUuNDUyNiAzMzAuOTA1IDM1LjQ1MjZDMzMyLjgyIDM1LjQ1MjYgMzM0Ljk2OCAzNC43MzA0IDMzNC45NjggMzIuMjAyOFYzMi4yMDI4Wk0zMjYuMDE0IDM2Ljg5NzNDMzI2LjAxNCAzNS4yNTU4IDMyNC45MjQgMzQuNTMzNiAzMjMuMDQgMzMuNzQ1NkMzMjEuNjg2IDMzLjE4OCAzMjAuOTkyIDMyLjY5NTYgMzIwLjk5MiAzMS42NDQ1QzMyMC45OTIgMzAuNjYgMzIxLjc1MiAzMC4wMzYyIDMyMy4wMDggMzAuMDM2MkMzMjMuODM0IDMwLjAzNjIgMzI0LjU2MSAzMC4zMzE1IDMyNS4yMjIgMzAuODU2OEMzMjUuMjg3IDMwLjQ5NTcgMzI1LjQ1MyAzMC4xMzQ3IDMyNS42NTEgMjkuODM5NEMzMjQuODU4IDI5LjQ3ODMgMzIzLjk5OSAyOS4zNDcgMzIzLjA3NCAyOS4zNDdDMzIwLjM2NSAyOS4zNDcgMzE5LjUwNSAzMC44OTA1IDMxOS41MDUgMzIuMjAzNUMzMTkuNTA1IDMzLjgxMTggMzIwLjI5OSAzNC41NjcyIDMyMi4zNDcgMzUuMzU1M0MzMjMuNjM2IDM1Ljg0NyAzMjQuMjk2IDM2LjQ3MTEgMzI0LjI5NiAzNy41NTQ0QzMyNC4yOTYgMzguNzAzNSAzMjMuNDM3IDM5LjQyNTcgMzIyLjI0OCAzOS40MjU3QzMyMS41NTQgMzkuNDI1NyAzMjAuMzY1IDM5LjA2NDYgMzE5LjUzOSAzOC4zMDk5QzMxOS41MDUgMzguNzM2MSAzMTkuNTA1IDM5LjEzMDQgMzE5LjM3MyAzOS40OTE1QzMxOS45MDIgMzkuNzU0NiAzMjEuMTI1IDQwLjE0NzkgMzIyLjIxNSA0MC4xNDc5QzMyNC45OSA0MC4xNDcxIDMyNi4wMTQgMzguNDM5NyAzMjYuMDE0IDM2Ljg5NzNWMzYuODk3M1pNMzc4LjE1MiAxNy45ODgyQzM3OC4xNTIgMTguOTczIDM3Ny40NTggMTkuNjYyMyAzNzYuNzY0IDIwLjIyMDJDMzc2LjMwMSAxOS41NjM5IDM3NS43NCAxOC42NzcxIDM3NS43NCAxNy45ODgyQzM3NS43NCAxNy4yMzMxIDM3Ni4yNjggMTYuODA2MSAzNzYuOTk1IDE2LjgwNjFDMzc3Ljk4NyAxNi44MDY1IDM3OC4xNTIgMTcuNjkyNiAzNzguMTUyIDE3Ljk4ODJWMTcuOTg4MlpNMzc4LjQ4MiAyNS4wMTMyQzM3OC4xMTkgMjUuMzQxNyAzNzcuMjYgMjUuOTY1NSAzNzYuNTMzIDI1Ljk2NTVDMzc1LjU3NCAyNS45NjU1IDM3NC40MTggMjUuMjc1OSAzNzQuNDE4IDIzLjc5ODZDMzc0LjQxOCAyMi40ODU1IDM3NS4yNzcgMjEuODk0NyAzNzUuODA2IDIxLjU2NjVDMzc3LjAyOCAyMy4yNDA2IDM3Ny4wOTUgMjMuMzM5MSAzNzguNDgyIDI1LjAxMzJaTTM3OS44MDQgMzIuMjAyOEMzNzkuODA0IDMzLjI1MzUgMzc5LjI3NSAzNC40MDI2IDM3Ny43NTUgMzQuNDAyNkMzNzcuMzI2IDM0LjQwMjYgMzc2LjkyOSAzNC40MDI2IDM3Ni41MzMgMzQuMzY5M1YzMC4yNjU2QzM3Ni45MjkgMzAuMTY3NiAzNzcuNDI1IDMwLjEzNDMgMzc3LjcyMiAzMC4xMzQzQzM3OS4wMTEgMzAuMTM0MyAzNzkuODA0IDMwLjg4OTggMzc5LjgwNCAzMi4yMDI4Wk0zMzguNjAyIDIyLjgxNDFDMzM3LjkwOSAyMi44NDY2IDMzNy41NDUgMjIuODQ2NiAzMzcuMDgyIDIyLjg0NjZDMzM2LjUyMSAyMi44NDY2IDMzNi4xOSAyMi44NDY2IDMzNS40NjMgMjIuODE0MUwzMzcuMDgyIDE5LjAwNkwzMzguNjAyIDIyLjgxNDFaTTMzMy4xNTEgMzIuMzAwOEMzMzMuMTUxIDMzLjgxMTEgMzMyLjI1OCAzNC43OTU5IDMzMC44MDUgMzQuNzk1OUMzMzAuNTA3IDM0Ljc5NTkgMzMwLjE3NyAzNC43OTU5IDMyOS43OCAzNC43MzAxVjMwLjIzMjdDMzMwLjI0MyAzMC4xNjY5IDMzMC42MzkgMzAuMTMzOSAzMzEuMDM2IDMwLjEzMzlDMzMyLjQyNCAzMC4xMzQzIDMzMy4xNTEgMzEuMDIxMSAzMzMuMTUxIDMyLjMwMDhaTTM2OS41MjggMjMuNjY3NkMzNjkuNTI4IDIyLjAyNiAzNjguNDM4IDIxLjMwMzkgMzY2LjU1NSAyMC41MTYyQzM2NS4yIDE5Ljk1ODMgMzY0LjUwNiAxOS40OTg4IDM2NC41MDYgMTguNDE1MUMzNjQuNTA2IDE3LjQ2MzIgMzY1LjI2NiAxNi44MDY1IDM2Ni41MjEgMTYuODA2NUMzNjcuMzQ4IDE2LjgwNjUgMzY4LjA3NSAxNy4xMDE3IDM2OC43MzUgMTcuNjI3NUMzNjguODAyIDE3LjI2NjQgMzY4Ljk2NyAxNi45MDQ5IDM2OS4xMzEgMTYuNjQyMkMzNjguMzcyIDE2LjI4MTEgMzY3LjQ3OSAxNi4xMTcyIDM2Ni41ODcgMTYuMTE3MkMzNjMuOTQ0IDE2LjExNzIgMzYyLjk4NiAxNy42NiAzNjIuOTg2IDE5LjAwNkMzNjIuOTg2IDIwLjU4MTcgMzYzLjgxMiAyMS4zMzY4IDM2NS44NjEgMjIuMTI0NEMzNjcuMTQ5IDIyLjYxNjkgMzY3LjgxIDIzLjI0MDYgMzY3LjgxIDI0LjM1NjhDMzY3LjgxIDI1LjQ3MyAzNjYuOTUxIDI2LjE5NTIgMzY1Ljc2MiAyNi4xOTUyQzM2NS4wMzUgMjYuMTk1MiAzNjMuODc5IDI1LjgzNDEgMzYzLjA1MiAyNS4xMTE5QzM2My4wMiAyNS41Mzg5IDM2Mi45ODYgMjUuOSAzNjIuODg3IDI2LjI2MTFDMzYzLjM4MyAyNi41MjM4IDM2NC42MDYgMjYuOTE3NCAzNjUuNzI5IDI2LjkxNzRDMzY4LjUwNCAyNi45MTc0IDM2OS41MjggMjUuMjQzMyAzNjkuNTI4IDIzLjY2NzZWMjMuNjY3NloiIGZpbGw9IiMwMzY1NTUiLz4NCjxwYXRoIGQ9Ik02NDAuNDE2IDIwLjU1NzNDNjM4LjY3MSAxOS44MzU0IDYzNy42MzEgMTkuNTU1MSA2MzYuNTk4IDE5LjU1NTFDNjM1LjUxNCAxOS41NTUxIDYzNC44MTkgMTkuOTE3IDYzNC44MTkgMjAuNDc2NUM2MzQuODE5IDIyLjE2NDUgNjQwLjk2MiAyMS42ODkzIDY0MC45NjIgMjUuNTkzNkM2NDAuOTYyIDI3Ljc0NjQgNjM5LjAyNCAyOC45OTc0IDYzNi4zMzIgMjguOTk3NEM2MzQuMjIgMjguOTk3NCA2MzMuMTggMjguNDg4IDYzMS45ODMgMjcuOTExNlYyNS40OTYyQzYzMy43MSAyNi41NjM1IDYzNC43NjggMjYuOTQwMSA2MzYuMTAxIDI2Ljk0MDFDNjM3LjI1NiAyNi45NDAxIDYzNy44NzkgMjYuNTYzNSA2MzcuODc5IDI1LjkwNjNDNjM3Ljg3OSAyNC4wNjg1IDYzMS43MzcgMjQuNzQxNSA2MzEuNzM3IDIwLjcyMTNDNjMxLjczNyAxOC43ODI3IDYzMy41MzQgMTcuNDk5IDYzNi4zMzIgMTcuNDk5QzYzNy42ODIgMTcuNDk5IDYzOC45MDEgMTcuNzYzNSA2NDAuNDE2IDE4LjM3MDdWMjAuNTU3M1pNNjQ5LjAxNiAyOC40ODQxQzY0Ny45OTIgMjguODMwNiA2NDcuMTI2IDI4Ljk5NTQgNjQ2LjI2MiAyOC45OTU0QzY0My40MDIgMjguOTk1NCA2NDEuNTUyIDI3LjQ0MjIgNjQxLjU1MiAyNS4wNzkyQzY0MS41NTIgMjIuNzU5NCA2NDMuNDczIDIxLjEyMDIgNjQ2LjE1NiAyMS4xMjAyQzY0Ni45ODUgMjEuMTIwMiA2NDguMDQ0IDIxLjMxODIgNjQ4Ljg5MSAyMS42MTIzVjIzLjM4ODFDNjQ4LjIyMSAyMy4wNTYyIDY0Ny40NDQgMjIuODc0MSA2NDYuODA5IDIyLjg3NDFDNjQ1LjI3MyAyMi44NzQxIDY0NC4yODYgMjMuNzM0MyA2NDQuMjg2IDI1LjA2MTlDNjQ0LjI4NiAyNi40MDggNjQ1LjI1NiAyNy4yOTQgNjQ2LjcyIDI3LjI5NEM2NDcuMzM3IDI3LjI5NCA2NDcuODg2IDI3LjE2MjMgNjQ5LjAxNiAyNi43NjhMNjQ5LjAxNiAyOC40ODQxWk02NzEuMzIgMjQuMjA5QzY3MS40MjUgMjMuMTU0OCA2NzIuMDgxIDIyLjU0NTcgNjczLjA4NyAyMi41NDU3QzY3NC4wNzYgMjIuNTQ1NyA2NzQuNzQ2IDIzLjE3MjEgNjc0Ljg1MiAyNC4yMDlINjcxLjMyWk02NzIuOTEgMjEuMTIyOUM2NzAuNCAyMS4xMjI5IDY2OC42MTQgMjIuNzc1NSA2NjguNjE0IDI1LjEwMTJDNjY4LjYxNCAyNy40NDQxIDY3MC40NzEgMjguOTk1NCA2NzMuMzM1IDI4Ljk5NTRDNjczLjk3IDI4Ljk5NTQgNjc1LjUwNCAyOC45OTU0IDY3Ni45NjYgMjcuOTg3VjI2LjUwNDJDNjc1Ljc2OSAyNy4yOTkzIDY3NC45NzcgMjcuNTczMSA2NzMuOTU1IDI3LjU3MzFDNjcyLjM0MSAyNy41NzMxIDY3MS4zNTQgMjYuNzk0OSA2NzEuMjY1IDI1LjQ2NjZINjc3LjExQzY3Ny4yMzIgMjIuNjkzOSA2NzUuMjc5IDIxLjEyMjkgNjcyLjkxIDIxLjEyMjlWMjEuMTIyOVpNNjc4LjA5OSAyOC44NTcySDY4MC42NTRWMjEuMjYyN0g2NzguMDk5VjI4Ljg1NzJaTTY4Ny43NjcgMjYuNzgxNUM2ODcuMjM0IDI3LjIyODEgNjg2Ljc5MiAyNy40MDcyIDY4Ni4yNDYgMjcuNDA3MkM2ODUuMDQzIDI3LjQwNzIgNjg0LjI4MSAyNi40ODM4IDY4NC4yODEgMjUuMTAwNEM2ODQuMjgxIDIzLjU4NDEgNjg1LjA0MyAyMi43MTAxIDY4Ni4zMzEgMjIuNzEwMUM2ODYuNzkyIDIyLjcxMDEgNjg3LjM5NCAyMi45MDggNjg3Ljc2NyAyMy4xNTU5VjI2Ljc4MTVaTTY4Ny43NjcgMTcuNjM5MVYyMS41OTU4QzY4Ny4wNzYgMjEuMjg0NyA2ODYuMzg4IDIxLjEyMDIgNjg1LjY0NCAyMS4xMjAyQzY4My4zMTMgMjEuMTIwMiA2ODEuNyAyMi43MjY2IDY4MS43IDI1LjA1MDdDNjgxLjcgMjcuMzI0OCA2ODMuMzEzIDI4Ljk5NzQgNjg1LjUgMjguOTk3NEM2ODYuMzY3IDI4Ljk5NzQgNjg3LjAzNyAyOC43ODU2IDY4Ny43NjcgMjguMjQzNVYyOC44NTQ5SDY5MC4zMjJWMTcuNjM5MUg2ODcuNzY3Wk02OTQuMTA1IDI0LjIwOUM2OTQuMjExIDIzLjE1NDggNjk0Ljg2NCAyMi41NDU3IDY5NS44NjggMjIuNTQ1N0M2OTYuODU4IDIyLjU0NTcgNjk3LjUzNSAyMy4xNzIxIDY5Ny42NDEgMjQuMjA5SDY5NC4xMDVaTTY5NS42OTQgMjEuMTIyOUM2OTMuMTg0IDIxLjEyMjkgNjkxLjQgMjIuNzc1NSA2OTEuNCAyNS4xMDEyQzY5MS40IDI3LjQ0NDEgNjkzLjI1OSAyOC45OTU0IDY5Ni4xMTkgMjguOTk1NEM2OTYuNzUzIDI4Ljk5NTQgNjk4LjI5IDI4Ljk5NTQgNjk5Ljc1NSAyNy45ODdWMjYuNTA0MkM2OTguNTU3IDI3LjI5OTMgNjk3Ljc2MyAyNy41NzMxIDY5Ni43MzYgMjcuNTczMUM2OTUuMTMxIDI3LjU3MzEgNjk0LjE0IDI2Ljc5NDkgNjk0LjA1MSAyNS40NjY2SDY5OS44OTRDNzAwLjAxNSAyMi42OTM5IDY5OC4wNjEgMjEuMTIyOSA2OTUuNjk0IDIxLjEyMjkiIGZpbGw9IiMwMDlFNEQiLz4NCjxwYXRoIGQ9Ik03MDMuNzIxIDIzLjQzNjhINzAzLjc1OEM3MDQuNTE3IDIxLjg1NjIgNzA1LjM2NiAyMS4xMTUgNzA2LjM1MiAyMS4xMTVDNzA2Ljg2MiAyMS4xMTUgNzA3LjMwMyAyMS4yOTY0IDcwOC4wNDQgMjEuODA3Nkw3MDcuMzQxIDIzLjkxMzNDNzA2LjY3IDIzLjUxODYgNzA2LjIyOSAyMy4zNTM1IDcwNS44MjMgMjMuMzUzNUM3MDQuODg2IDIzLjM1MzUgNzA0LjI4NiAyNC4xNzc1IDcwMy43MjEgMjUuNTcwNFYyOC44NDY2SDcwMS4xNjJWMjEuMjU0MUg3MDMuNzIxVjIzLjQzNjhaTTY4MC43NzUgMTguMDY3NEM2ODEuMDE1IDE4LjY1NzUgNjgwLjU4MyAxOS40ODA1IDY3OS44MTQgMTkuOTA0QzY3OS4wNDEgMjAuMzI3MSA2NzguMjI0IDIwLjE5MjggNjc3Ljk4NiAxOS42MDI3QzY3Ny43NDMgMTkuMDExNyA2NzguMTczIDE4LjE4NzcgNjc4Ljk0NSAxNy43NjY2QzY3OS43MTYgMTcuMzQxMSA2ODAuNTMzIDE3LjQ3NTkgNjgwLjc3NSAxOC4wNjc0WiIgZmlsbD0iIzAwOUU0RCIvPg0KPHBhdGggZD0iTTY1OC4yMiAyNC4wMjMxQzY1OC4yMiAyMS45NjUxIDY1Ni43MTkgMjEuMTIyNiA2NTUuMjM5IDIxLjEyMjZDNjU0LjIzMiAyMS4xMjI2IDY1My40MDQgMjEuNTE4NCA2NTIuNjY0IDIyLjM5MjFINjUyLjYyOVYxNy42MzkySDY1MC4wNzFWMjguODM1M0g2NTIuNjI5VjI0LjAyMzFDNjUzLjIyOCAyMy4yMTYxIDY1My43MzggMjIuODcxMSA2NTQuMzM4IDIyLjg3MTFDNjU1LjEzNCAyMi44NzExIDY1NS42NjIgMjMuMzk4NiA2NTUuNjYyIDI0LjUzMjlWMjcuMjAwOEM2NTYuNTIgMjYuNzg5NiA2NTcuMzkzIDI2LjUzNzQgNjU4LjIyIDI2LjQ0MzhWMjQuMDIzMVpNNjY0LjYzNiAyMS4xMTk5QzY2My41OTQgMjEuMTE5OSA2NjIuNzk5IDIxLjQ4MTEgNjYxLjk4NCAyMi4zNDkzVjIxLjI2MjRINjU5LjQyOFYyNi40MjM0QzY2MC4zMTMgMjYuNTA1OCA2NjEuNDQzIDI2Ljg4NDcgNjYxLjk4NCAyNy41MTA0VjIzLjk2MzRDNjYyLjY1NyAyMy4wMjMyIDY2My4xMzQgMjIuNzA5NyA2NjMuNzcgMjIuNzA5N0M2NjQuNDk0IDIyLjcwOTcgNjY1LjA0NSAyMy4xNTU2IDY2NS4wNDUgMjQuMjI2NFYyOC44MzcySDY2Ny42MDJWMjQuMDI4OUM2NjcuNjAyIDIxLjc5MjYgNjY1LjkwOCAyMS4xMTk5IDY2NC42MzYgMjEuMTE5OVYyMS4xMTk5Wk02NjkuMDE1IDMxLjAxODFINjY2LjA0M1YzMi45ODY0SDY2OC45MDlWMzMuODMxMkg2NjYuMDQzVjM1Ljg2MTlINjY5LjEwM1YzNi43MDU1SDY2NS4wNDZWMzAuMTc1Mkg2NjkuMDE1TDY2OS4wMTUgMzEuMDE4MVpNNjcxLjQ0MiAzNi43MDkzSDY3Mi4zNTJWMzAuMTczM0g2NzEuNDQyVjM2LjcwOTNaTTY3Ni44NTkgMzMuMDQ4NEM2NzcuNTA0IDMzLjA0ODQgNjc3LjkwNCAzMy40NjMxIDY3Ny45MzUgMzQuMTE0Mkg2NzUuNjE2QzY3NS43NDIgMzMuNDM0MiA2NzYuMTYxIDMzLjA0ODQgNjc2Ljg1OSAzMy4wNDg0Wk02NzUuNiAzNC42ODFINjc4Ljg0MkM2NzguODQyIDMzLjA4NjkgNjc4LjA2MiAzMi4zMTggNjc2LjgzOCAzMi4zMThDNjc1LjU2OSAzMi4zMTggNjc0LjY4OCAzMy4xOTI0IDY3NC42ODggMzQuNDk2OUM2NzQuNjg4IDM1LjY4OSA2NzUuNDg0IDM2Ljc4OTggNjc2LjkxNyAzNi43ODk4QzY3Ny42OTggMzYuNzg5OCA2NzguMjAzIDM2LjYyODEgNjc4Ljc2MyAzNi4yODJWMzUuNDU2QzY3OC4yMjIgMzUuNzg1NiA2NzcuNjk4IDM1Ljk3NTggNjc3LjE0NyAzNS45NzU4QzY3Ni4yNjUgMzUuOTc1OCA2NzUuNzQyIDM1LjUzNSA2NzUuNiAzNC42ODA2VjM0LjY4MVpNNjg0Ljc4NiAzMy41MzA5QzY4NC4yNjMgMzMuMTk2NiA2ODMuOTE0IDMzLjA5ODUgNjgzLjUxNSAzMy4wOTg1QzY4Mi42ODIgMzMuMDk4NSA2ODIuMTA1IDMzLjY5NDUgNjgyLjEwNSAzNC41NjdDNjgyLjEwNSAzNS40NTYgNjgyLjcxOSAzNS45OTE2IDY4My42NjggMzUuOTkxNkM2ODQuMDU4IDM1Ljk5MTYgNjg0LjQzIDM1Ljg5NzMgNjg0Ljg4OCAzNS43MDU5VjM2LjU0MjZDNjg0LjU4MiAzNi42Nzc0IDY4My45OTcgMzYuNzg5OCA2ODMuNTE1IDM2Ljc4OThDNjgyLjEzNiAzNi43ODk4IDY4MS4xOCAzNS45MDYyIDY4MS4xOCAzNC42NDMyQzY4MS4xOCAzMy4yMTc4IDY4Mi4wNTQgMzIuMzE4IDY4My40NTMgMzIuMzE4QzY4My45ODcgMzIuMzE4IDY4NC4zNDYgMzIuNDMzOSA2ODQuNzg3IDMyLjYxNDVMNjg0Ljc4NiAzMy41MzA5Wk02ODguOTM0IDMyLjQwMDRINjkwLjM5NVYzMy4xNjUxSDY4OC45MzRWMzUuMzc1MkM2ODguOTM0IDM1Ljg4MTEgNjg5LjMyNyAzNi4wMjc0IDY4OS41OTMgMzYuMDI3NEM2ODkuOTIyIDM2LjAyNzQgNjkwLjI2MiAzNS45MiA2OTAuNjMgMzUuNzA3OVYzNi41MDM3QzY5MC4zMSAzNi42Njc4IDY4OS44MiAzNi43ODk4IDY4OS41MTkgMzYuNzg5OEM2ODguNTI4IDM2Ljc4OTggNjg4LjAyNyAzNi4yMTYxIDY4OC4wMjcgMzUuNDM5MVYzMy4xNjUxSDY4Ny4yMjRWMzMuMDcwM0w2ODguOTM0IDMxLjUxMDJWMzIuNDAwNFpNNjkzLjg3NiAzMi40MDA0VjMzLjM5NjlINjkzLjg5NUM2OTQuMzU5IDMyLjYzNDUgNjk0LjggMzIuMzE4IDY5NS4yMyAzMi4zMThDNjk1LjYwMSAzMi4zMTggNjk1Ljk0NyAzMi40ODAxIDY5Ni4zMjkgMzIuODE2Nkw2OTUuODQ3IDMzLjU2NDRDNjk1LjU3IDMzLjMwOTEgNjk1LjIxMSAzMy4xMzMxIDY5NC45OTUgMzMuMTMzMUM2OTQuMzY4IDMzLjEzMzEgNjkzLjg3NiAzMy43MjY4IDY5My44NzYgMzQuNDYyNlYzNi43MDkzSDY5Mi45NjdWMzIuNDAwNEg2OTMuODc2Wk03MDUuNjU3IDMzLjUzMDlDNzA1LjEzMSAzMy4xOTY2IDcwNC43ODIgMzMuMDk4NSA3MDQuMzgxIDMzLjA5ODVDNzAzLjU0OSAzMy4wOTg1IDcwMi45NzcgMzMuNjk0NSA3MDIuOTc3IDM0LjU2N0M3MDIuOTc3IDM1LjQ1NiA3MDMuNTkyIDM1Ljk5MTYgNzA0LjUzNSAzNS45OTE2QzcwNC45MjUgMzUuOTkxNiA3MDUuMjk1IDM1Ljg5NzMgNzA1Ljc2IDM1LjcwNTlWMzYuNTQyNkM3MDUuNDQ3IDM2LjY3NzQgNzA0Ljg2MiAzNi43ODk4IDcwNC4zOCAzNi43ODk4QzcwMy4wMDQgMzYuNzg5OCA3MDIuMDQ0IDM1LjkwNjIgNzAyLjA0NCAzNC42NDMyQzcwMi4wNDQgMzMuMjE3OCA3MDIuOTIyIDMyLjMxOCA3MDQuMzIgMzIuMzE4QzcwNC44NTUgMzIuMzE4IDcwNS4yMTIgMzIuNDMzOSA3MDUuNjU3IDMyLjYxNDVMNzA1LjY1NyAzMy41MzA5Wk02OTguNzQyIDM2LjcwOTNINjk5LjY1MlYzMi40MDA4SDY5OC43NDJWMzYuNzA5M1oiIGZpbGw9IiMwMDlFNEQiLz4NCjxwYXRoIGQ9Ik02OTkuNjg0IDMwLjg1MjVDNjk5Ljc3MyAzMS4wNjA0IDY5OS42MTggMzEuMzU0NCA2OTkuMzQ0IDMxLjUwNDFDNjk5LjA2OCAzMS42NTQzIDY5OC43NzYgMzEuNjA2MiA2OTguNjkzIDMxLjM5NzhDNjk4LjYxIDMxLjE4NzQgNjk4Ljc2MSAzMC44OTU4IDY5OS4wMzggMzAuNzQ1NkM2OTkuMzExIDMwLjU5MzUgNjk5LjYwMSAzMC42NDIxIDY5OS42ODQgMzAuODUyNVYzMC44NTI1Wk02NTguOTQgMzEuMjAwOUM2NTguNzc5IDMxLjIwMDkgNjU4LjcxMSAzMS4yMjU1IDY1OC42NDYgMzEuMjkzOEM2NTguNjIgMzEuMzIwMyA2NTguNjEgMzEuMzQ3MiA2NTguNiAzMS40MDExTDY1Ny43ODQgMzQuMjg3QzY1Ny41OTMgMzUuMjk5MiA2NTYuMjU5IDM2LjMwOTkgNjU0LjUyMSAzNi4zMDk5SDY1Mi4xMDRMNjUyLjUyMyAzNC44MjdINjU0LjA3NkM2NTQuMjM0IDM0LjgyNyA2NTQuMzU4IDM0Ljc3MjEgNjU0LjQ2MiAzNC42NjQzQzY1NC41IDM0LjYyMjUgNjU0LjU1IDM0LjU1NyA2NTQuNTU2IDM0LjQ4OTZMNjU1LjIwMSAzMS45NjgxQzY1NS4zOTEgMzAuOTU1NSA2NTYuNTM4IDI5LjgzNjkgNjU4LjI3NiAyOS44MzY5SDY2MC43NTFMNjYwLjQzNSAzMS4yMDA5SDY1OC45NFpNNjU5LjQ5NyAzMi45NTk2TDY1OS43NzMgMzIuMDI1OUg2NjIuMjg4QzY2Mi41OTggMzAuNjcyIDY2Mi4zNTQgMjkuNDE3NyA2NjEuNDczIDI4LjU5NjFDNjU5LjY4OSAyNi45MzMyIDY1NS45NTcgMjcuNDk4MyA2NTMuMTc3IDI5Ljk3NzlDNjUyLjc0MyAzMC4zNjMgNjUyLjM3NiAzMC43NzkzIDY1Mi4wNDIgMzEuMjA0OEg2NTMuNTU2TDY1My4yMDQgMzIuMTQwNEg2NTEuMzk1QzY1MS4yMjIgMzIuNDM1NCA2NTEuMDYgMzIuNzI4MSA2NTAuOTM2IDMzLjAyNUg2NTMuMDgxTDY1Mi43MzcgMzMuOTYwN0g2NTAuNjNDNjUwLjI2OSAzNS4zOTAxIDY1MC40OTkgMzYuNzIzMyA2NTEuNDA2IDM3LjU2OTlDNjUzLjE2NyAzOS4yMTE2IDY1Ni44ODggMzguNjM0NiA2NTkuNjY3IDM2LjE1NTRDNjYwLjE1MyAzNS43MjQyIDY2MC41NTUgMzUuMjU4NyA2NjAuOTE4IDM0Ljc4MDhINjU4Ljk3M0w2NTkuMjY5IDMzLjg0NzFINjYxLjU0M0M2NjEuNzEgMzMuNTUwMSA2NjEuODYzIDMzLjI1NjUgNjYxLjk4MyAzMi45NTk2SDY1OS40OTdaIiBmaWxsPSIjMDA5RTREIi8+DQo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNThfMTExKSI+DQo8cGF0aCBkPSJNNzc1LjA2OCA0MS4yMjc0Qzc2Ni4yODUgNDIuMDQ2MyA3NTcuMTMxIDQwLjc1NjQgNzU1Ljg0OCAzMy44MTlDNzU1LjIyMSAzMC4zOTkgNzU2Ljc2NSAyNi43NzI1IDc1OC44MSAyNC41MTg0VjIzLjMxNDhDNzU1LjEyNiAyNi41OCA3NTMuMTMgMzAuNzExNSA3NTQuMjggMzUuNTkyQzc1NS43NDggNDEuODUxOCA3NjMuNjAzIDQ1LjM5NjcgNzc1LjU5NSA0NC4yMTk1Qzc4MC4zNDIgNDMuNzU0NSA3ODYuNTUgNDIuMjEyIDc5MC44NjkgMzkuODE0NFYzNi40MTA5Qzc4Ni45NDkgMzguNzcxMyA3ODAuNDY4IDQwLjcyMTEgNzc1LjA2OCA0MS4yMjc0VjQxLjIyNzRaTTc5OC4yMDUgMjMuMjMzNUM3OTYuMTIyIDEyLjk1MzMgNzc2LjM3MyAxMi4zMDE2IDc2My42NDMgMjAuMTMzOFYyMC45OTg5Qzc3Ni4zNTkgMTQuMzkxNSA3OTQuMzk1IDE0LjQzMTcgNzk2LjAzNyAyMy45MDE2Qzc5Ni41ODkgMjcuMDM0MiA3OTQuODQzIDMwLjI5NzggNzkxLjcyMyAzMi4xNzdWMzQuNjM0MkM3OTUuNDc2IDMzLjI0MzIgNzk5LjMyNCAyOC43NDQyIDc5OC4yMDUgMjMuMjMzNVYyMy4yMzM1WiIgZmlsbD0iIzBFN0RDMiIvPg0KPHBhdGggZD0iTTc5MC4xNTkgMjEuNzM2OEg3ODcuODU2VjMyLjEwM0M3ODcuODU2IDMzLjMxNzkgNzg4LjQzNyAzNC4zNzQ0IDc5MC4xNTkgMzQuNTQzMlYyMS43MzY4Wk03NjIuNzM5IDI1LjUyMTdINzYwLjQzMkw3NjAuNDMxIDMyLjI5NDNDNzYwLjQzMSAzMy41MTM0IDc2MS4wMTMgMzQuNTY4OCA3NjIuNzM5IDM0LjczNDRWMjUuNTIxN1YyNS41MjE3Wk03NjAuNDMyIDIyLjA1MjFINzYyLjczMlYyNC4yNTg0SDc2MC40MzJWMjIuMDUyMVpNNzc2LjUzIDM0LjYyNzJDNzc0LjY2NiAzNC42MjcyIDc3My44NzcgMzMuMzE3NyA3NzMuODc3IDMyLjAyOFYyMy4wMzU1SDc3Ni4xNlYyNS41MjE3SDc3Ny44NzlWMjcuMzg1M0g3NzYuMTZWMzEuODg1NEM3NzYuMTYgMzIuNDExMyA3NzYuNDA3IDMyLjcwNDQgNzc2Ljk1IDMyLjcwNDRINzc3Ljg3OVYzNC42MjcyTDc3Ni41MyAzNC42MjcyVjM0LjYyNzJaTTc4MC43MzEgMzAuNzk2MUM3ODAuNzMxIDMxLjk3NjggNzgxLjQ2MSAzMi44NDQ2IDc4Mi43NTQgMzIuODQ0NkM3ODMuNzY2IDMyLjg0NDYgNzg0LjI2NiAzMi41NjA1IDc4NC44NSAzMS45NzY4TDc4Ni4yNjEgMzMuMzM0OUM3ODUuMzU3IDM0LjIzNzkgNzg0LjQwOSAzNC43ODcgNzgyLjczNyAzNC43ODdDNzgwLjU1MiAzNC43ODcgNzc4LjQ1OSAzMy41ODE5IDc3OC40NTkgMzAuMDY4NkM3NzguNDU5IDI3LjA2NTEgNzgwLjI4OCAyNS4zNjczIDc4Mi42ODYgMjUuMzY3M0M3ODUuMTI0IDI1LjM2NzMgNzg2LjUyNSAyNy4zNTQ5IDc4Ni41MjUgMjkuOTYzOVYzMC43OTYzSDc4MC43MzFWMzAuNzk2MVpNNzgyLjU4NiAyNy4yNzU2Qzc4MS44MDUgMjcuMjc1NiA3ODEuMjA0IDI3LjY4MjMgNzgwLjk1IDI4LjIzMDlDNzgwLjgwMiAyOC41NjA3IDc4MC43NDcgMjguODE3NyA3ODAuNzMxIDI5LjIyMjlINzg0LjI0OUM3ODQuMjA0IDI4LjIzMDkgNzgzLjc1OSAyNy4yNzU2IDc4Mi41ODYgMjcuMjc1NlpNNzY4LjkzOSAyNy4zODUzQzc2OS42MDggMjcuMzg1MyA3NjkuODg3IDI3LjcxOTggNzY5Ljg4NyAyOC4yNjI2VjM0LjY0MDZINzcyLjE3VjI4LjI0OTJDNzcyLjE3IDI2Ljk1NDIgNzcxLjQ4NyAyNS41MjQxIDc2OS40ODIgMjUuNTI0MUw3NjQuNzY2IDI1LjUyMTdWMzQuNjQwNkg3NjcuMDVWMjcuMzg1M0g3NjguOTM5VjI3LjM4NTNaTTc5Mi42MzcgMjMuNTg5MUM3OTIuMTI5IDIzLjU4OTEgNzkxLjcyNCAyMy4xNzU0IDc5MS43MjQgMjIuNjYyOUM3OTEuNzI0IDIyLjE1MjkgNzkyLjEyOSAyMS43MzY4IDc5Mi42MzcgMjEuNzM2OEM3OTMuMTQyIDIxLjczNjggNzkzLjU1NiAyMi4xNTI5IDc5My41NTYgMjIuNjYyOUM3OTMuNTU2IDIzLjE3NTQgNzkzLjE0MiAyMy41ODkxIDc5Mi42MzcgMjMuNTg5MVpNNzkyLjYzNyAyMS44OTEyQzc5Mi4yMTggMjEuODkxMiA3OTEuODgyIDIyLjI0MDcgNzkxLjg4MiAyMi42NjI5Qzc5MS44ODIgMjMuMDg3NiA3OTIuMjE4IDIzLjQzMDkgNzkyLjYzNyAyMy40MzA5Qzc5My4wNTUgMjMuNDMwOSA3OTMuNDAyIDIzLjA4NzYgNzkzLjQwMiAyMi42NjI5Qzc5My40MDIgMjIuMjQwNyA3OTMuMDU1IDIxLjg5MTIgNzkyLjYzNyAyMS44OTEyWk03OTMuMDQzIDIzLjIxOEg3OTIuODcyQzc5Mi44NjQgMjMuMjE3OSA3OTIuODU3IDIzLjIxNTcgNzkyLjg1MSAyMy4yMTE2Qzc5Mi44NDUgMjMuMjA3NSA3OTIuODQgMjMuMjAxNyA3OTIuODM3IDIzLjE5NDlMNzkyLjYwNSAyMi43OTdDNzkyLjU5OCAyMi43ODg1IDc5Mi41NzkgMjIuNzc4OCA3OTIuNTczIDIyLjc3ODhINzkyLjQ2N1YyMy4xNzU0Qzc5Mi40NjcgMjMuMTk1IDc5Mi40NTMgMjMuMjE4MSA3OTIuNDI4IDIzLjIxODFINzkyLjI3NEM3OTIuMjUxIDIzLjIxODEgNzkyLjIzNSAyMy4xOTUgNzkyLjIzNSAyMy4xNzU0VjIyLjE3NDlDNzkyLjIzNSAyMi4xMTY0IDc5Mi4yNTQgMjIuMDkyNCA3OTIuMzA1IDIyLjA4NUM3OTIuMzYxIDIyLjA3OSA3OTIuNTA1IDIyLjA3MTYgNzkyLjU4NiAyMi4wNzE2Qzc5Mi44NzIgMjIuMDcxNiA3OTMuMDM5IDIyLjE1NjYgNzkzLjAzOSAyMi40MjQ0VjIyLjQ0NEM3OTMuMDM5IDIyLjYwOTQgNzkyLjk1OSAyMi42OTk1IDc5Mi44MzMgMjIuNzM5N0w3OTMuMDc0IDIzLjE1NDdDNzkzLjA3OCAyMy4xNjQgNzkzLjA4IDIzLjE3MzkgNzkzLjA4IDIzLjE4NEM3OTMuMDggMjMuMTk5NyA3OTMuMDcyIDIzLjIxOCA3OTMuMDQzIDIzLjIxOFYyMy4yMThaTTc5Mi44MjEgMjIuNDI0NEM3OTIuODIxIDIyLjMxMjcgNzkyLjc1MiAyMi4yNzczIDc5Mi42MDUgMjIuMjc3M0g3OTIuNDU5VjIyLjU5NDdDNzkyLjQ4MiAyMi41OTQ3IDc5Mi41ODYgMjIuNTk5NiA3OTIuNjA1IDIyLjU5OTZDNzkyLjc1MiAyMi41OTk2IDc5Mi44MjEgMjIuNTUgNzkyLjgyMSAyMi40NDRWMjIuNDI0NFoiIGZpbGw9IiMwRTdEQzIiLz4NCjwvZz4NCjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMV81OF8xMTEpIj4NCjxwYXRoIGQ9Ik01MzMuNzczIDIwLjk5MTFDNTI5LjI2MyAyMC45OTExIDUyNS41OTkgMjQuNjU0NyA1MjUuNTk5IDI5LjE2NDRDNTI1LjU5OSAzMy42NzQxIDUyOS4yNjMgMzcuMzM3NyA1MzMuNzczIDM3LjMzNzdDNTM4LjI4MiAzNy4zMzc3IDU0MS45NDYgMzMuNjc0MSA1NDEuOTQ2IDI5LjE2NDRDNTQxLjk0NiAyNC42NTQ3IDUzOC4yODIgMjAuOTkxMSA1MzMuNzczIDIwLjk5MTFaTTUzMy43NzMgMzYuNTE4NkM1MjkuNzEzIDM2LjUxODYgNTI2LjQxOSAzMy4yMTUgNTI2LjQxOSAyOS4xNjQ0QzUyNi40MTkgMjUuMTEzNyA1MjkuNzEzIDIxLjgxMDIgNTMzLjc3MyAyMS44MTAyQzUzNy44MzIgMjEuODEwMiA1NDEuMTI3IDI1LjExMzcgNTQxLjEyNyAyOS4xNjQ0QzU0MS4xMjcgMzMuMjE1IDUzNy44MzIgMzYuNTE4NiA1MzMuNzczIDM2LjUxODZaIiBmaWxsPSJibGFjayIvPg0KPHBhdGggZD0iTTUzNi42OSAyMy45MjUyQzUzNi42NjMgMjMuOTA3MiA1MzYuNjI3IDIzLjg5ODIgNTM2LjU5MSAyMy44OTgyQzUzNi40ODMgMjMuODk4MiA1MzYuNDAyIDIzLjk3OTIgNTM2LjQwMiAyNC4wODczVjI2LjY0MzdDNTM2LjQwMiAyNi43MzM3IDUzNi4zMyAyNi44MDU3IDUzNi4yNCAyNi44MDU3SDUzMS4yOUM1MzEuMiAyNi44MDU3IDUzMS4xMzcgMjYuNzMzNyA1MzEuMTI4IDI2LjY0MzdWMjQuMDg3M0M1MzEuMTI4IDI0LjA1MTMgNTMxLjExOSAyNC4wMjQyIDUzMS4xMDEgMjMuOTg4MkM1MzEuMDQ3IDIzLjg5ODIgNTMwLjkzIDIzLjg3MTIgNTMwLjgzOSAyMy45MjUyQzUyOS4wMTIgMjUuMDUwNCA1MjcuOTA1IDI3LjAwMzcgNTI3LjkwNSAyOS4xNjQxQzUyNy45MDUgMzEuMzI0NCA1MjkuMDEyIDMzLjI3NzcgNTMwLjg1NyAzNC40MDI5QzUzMC44ODUgMzQuNDIwOSA1MzAuOTIxIDM0LjQyOTkgNTMwLjk1NyAzNC40Mjk5QzUzMS4wNjUgMzQuNDI5OSA1MzEuMTQ2IDM0LjM0ODkgNTMxLjE0NiAzNC4yNDA5VjMxLjY4NDVDNTMxLjE0NiAzMS41OTQ0IDUzMS4yMTggMzEuNTMxNCA1MzEuMzA4IDMxLjUyMjRINTM2LjI1OEM1MzYuMzQ4IDMxLjUyMjQgNTM2LjQyIDMxLjU5NDQgNTM2LjQyIDMxLjY4NDVWMzQuMjQwOUM1MzYuNDIgMzQuMjc2OSA1MzYuNDI5IDM0LjMwMzkgNTM2LjQ0NyAzNC4zMzk5QzUzNi41MDEgMzQuNDI5OSA1MzYuNjE4IDM0LjQ1NjkgNTM2LjcwOCAzNC40MDI5QzUzOC41NTQgMzMuMjc3NyA1MzkuNjYxIDMxLjMyNDQgNTM5LjY2MSAyOS4xNjQxQzUzOS42NjEgMjcuMDAzNyA1MzguNTM2IDI1LjA1MDQgNTM2LjY5IDIzLjkyNTJWMjMuOTI1MlpNNTMwLjE5MSAzMi4zNjg2TDUzMC4yMTggMzIuNjc0Nkw1MzAuMDIgMzIuNDMxNkM1MjguNDk5IDMwLjUxNDMgNTI4LjQ5OSAyNy44MDQ4IDUzMC4wMiAyNS44ODc1TDUzMC4xOTEgMjUuNjcxNUw1MzAuMjE4IDI1LjY0NDVMNTMwLjE5MSAyNS45NTk2QzUzMC4xNjQgMjYuMjExNiA1MzAuMTU1IDI2LjQ3MjYgNTMwLjE1NSAyNi43MzM3VjMxLjU4NTRDNTMwLjE1NSAzMS44NDY1IDUzMC4xNzMgMzIuMTA3NSA1MzAuMTkxIDMyLjM2ODZaTTUzNi40MDIgMzAuMzg4M0M1MzYuNDAyIDMwLjQ3ODMgNTM2LjMzIDMwLjU1MDMgNTM2LjI0IDMwLjU1MDNINTMxLjI5QzUzMS4yIDMwLjU1MDMgNTMxLjEzNyAzMC40NzgzIDUzMS4xMjggMzAuMzg4M1YyNy45Mzk5QzUzMS4xMjggMjcuODQ5OSA1MzEuMiAyNy43Nzc4IDUzMS4yOSAyNy43Nzc4SDUzNi4yNEM1MzYuMzMgMjcuNzc3OCA1MzYuNDAyIDI3Ljg0OTkgNTM2LjQwMiAyNy45Mzk5VjMwLjM4ODNaTTUzNy41MTkgMzIuNDMxNkw1MzcuMzIxIDMyLjY3NDZMNTM3LjM0OCAzMi4zNjg2QzUzNy4zNzUgMzIuMTE2NSA1MzcuMzg0IDMxLjg1NTUgNTM3LjM4NCAzMS41OTQ0VjI2LjczMzdDNTM3LjM4NCAyNi40NzI2IDUzNy4zNzUgMjYuMjExNiA1MzcuMzQ4IDI1Ljk1OTZMNTM3LjMzOSAyNS44MjQ1TDUzNy4zMyAyNS42ODA1VjI1LjY0NDVMNTM3LjUxOSAyNS44ODc1QzUzOC4yNTcgMjYuODA1NyA1MzguNjYyIDI3Ljk3NTkgNTM4LjY2MiAyOS4xNTUxQzUzOC42NjIgMzAuMzM0MiA1MzguMjU3IDMxLjUxMzQgNTM3LjUxOSAzMi40MzE2VjMyLjQzMTZaIiBmaWxsPSJibGFjayIvPg0KPHBhdGggZD0iTTU1NC4yNzYgMjkuMDIwMkM1NTQuMjMxIDI5LjAwMjIgNTU0LjE3NyAyOC45ODQyIDU1NC4xNzcgMjguOTMwMkM1NTQuMTc3IDI4Ljg5NDIgNTU0LjE5NSAyOC44NjcyIDU1NC4yMzEgMjguODQ5MkM1NTQuMjk0IDI4LjgyMjIgNTU1Ljg1MSAyOC4yNjQxIDU1NS44NTEgMjYuNDI3OEM1NTUuODUxIDI0LjM4NDUgNTU0LjQ3NCAyMy4xNjkzIDU1Mi4xNTIgMjMuMTY5M0g1NDYuNTI2VjM1LjE3NzJINTUyLjY2NUM1NTQuNDU2IDM1LjE3NzIgNTU2LjM4MiAzMy45MDggNTU2LjM4MiAzMS44NjQ2QzU1Ni4zODIgMjkuOTExMyA1NTQuOTA2IDI5LjIyNzIgNTU0LjI3NiAyOS4wMjAyVjI5LjAyMDJaTTU0OS4zNjEgMjUuNjI2N0M1NDkuMzYxIDI1LjU4MTcgNTQ5LjM5NyAyNS41NDU2IDU0OS40NDIgMjUuNTQ1Nkg1NTEuNjc1QzU1Mi40MTMgMjUuNTQ1NiA1NTIuOTE3IDI2LjA0MDcgNTUyLjkxNyAyNi43Nzg4QzU1Mi45MTcgMjcuMzU0OSA1NTIuNDY3IDI3Ljk3NiA1NTEuNjIxIDI3Ljk3Nkg1NDkuNDQyQzU0OS4zOTcgMjcuOTc2IDU0OS4zNjEgMjcuOTQgNTQ5LjM2MSAyNy44OTVWMjUuNjI2N1pNNTUxLjY3NSAzMi44MDk4SDU0OS40NDJDNTQ5LjM5NyAzMi44MDk4IDU0OS4zNjEgMzIuNzczOCA1NDkuMzYxIDMyLjcyODhWMzAuMzM0NEM1NDkuMzYxIDMwLjI4OTQgNTQ5LjM5NyAzMC4yNTM0IDU0OS40NDIgMzAuMjUzNEg1NTEuNjIxQzU1Mi42OTIgMzAuMjUzNCA1NTMuMzA0IDMwLjcxMjUgNTUzLjMwNCAzMS41MjI2QzU1My4zMDQgMzIuMzU5NyA1NTIuNzM3IDMyLjgwOTggNTUxLjY3NSAzMi44MDk4VjMyLjgwOThaTTU3NS4zODQgMjcuOTQ5TDU3NC45NTIgMjcuODU5QzU3My45OCAyNy42NTIgNTczLjAzNSAyNy4zOTA5IDU3My4wMzUgMjYuNTUzOEM1NzMuMDM1IDI1LjcxNjcgNTczLjgxOCAyNS4zMzg2IDU3NC41OTIgMjUuMzM4NkM1NzUuNTAxIDI1LjMzODYgNTc2LjQwMSAyNS43NDM3IDU3Ny4wODYgMjYuNDQ1OEw1NzguODY4IDI0LjY4MTVDNTc4LjEwMyAyMy44MzU0IDU3Ni43NDQgMjIuODYzMiA1NzQuNTQ3IDIyLjg2MzJDNTcxLjkwMSAyMi44NjMyIDU3MC4xMTggMjQuMzY2NSA1NzAuMTE4IDI2LjYwNzhDNTcwLjExOCAyOC45NzUyIDU3MS45ODIgMjkuODY2MyA1NzMuNTQ4IDMwLjE5OTRMNTczLjk3MSAzMC4yODk0QzU3NS40OTIgMzAuNjEzNSA1NzYuMjEyIDMwLjg1NjUgNTc2LjIxMiAzMS43MjA2QzU3Ni4yMTIgMzIuNDk0NyA1NzUuNTE5IDMzLjAwNzggNTc0LjQ5MyAzMy4wMDc4QzU3My4yODcgMzMuMDA3OCA1NzIuMjE2IDMyLjQ3NjcgNTcxLjQwNiAzMS40Nzc2TDU2OS41NzggMzMuMjY4OUM1NzAuNTUxIDM0LjQyMTEgNTcxLjgzOCAzNS40NjUyIDU3NC41MjkgMzUuNDY1MkM1NzYuODI1IDM1LjQ2NTIgNTc5LjE1NiAzNC4xMzMgNTc5LjE1NiAzMS41NzY2QzU3OS4xNDcgMjguOTU3MiA1NzcuMzY1IDI4LjM2MzEgNTc1LjM4NCAyNy45NDlWMjcuOTQ5Wk01OTkuMTAzIDIzLjE2OTNWMjcuNTYyQzU5OS4xMDMgMjcuNjA3IDU5OS4wNjcgMjcuNjQzIDU5OS4wMjIgMjcuNjQzSDU5NS4zMzFDNTk1LjI4NiAyNy42NDMgNTk1LjI1IDI3LjYwNyA1OTUuMjUgMjcuNTYyVjIzLjE2OTNINTkyLjIyNlYzNS4xNzcySDU5NS4yNVYzMC40NjA0QzU5NS4yNSAzMC40MTU0IDU5NS4yODYgMzAuMzc5NCA1OTUuMzMxIDMwLjM3OTRINTk5LjAyMkM1OTkuMDY3IDMwLjM3OTQgNTk5LjEwMyAzMC40MTU0IDU5OS4xMDMgMzAuNDYwNFYzNS4xNzcySDYwMi4xNDZWMjMuMTY5M0g1OTkuMTAzWk01ODYuMTQxIDMyLjcxOThDNTg0Ljc4MiAzMi43MTk4IDU4My4zMTUgMzEuNTg1NiA1ODMuMzE1IDI5LjA5MjJDNTgzLjMxNSAyNi44MTQ4IDU4NC42OTIgMjUuNjI2NyA1ODYuMDUxIDI1LjYyNjdDNTg3LjA0MSAyNS42MjY3IDU4Ny43MzQgMjYuMDQwNyA1ODguMjgzIDI2Ljk1ODlMNTkwLjYwNiAyNS40MTk2QzU4OS40MTggMjMuNjczMyA1ODguMDA0IDIyLjg4MTIgNTg2LjAzMyAyMi44ODEyQzU4Mi4xNzEgMjIuODgxMiA1ODAuNDQzIDI2LjAwNDcgNTgwLjQ0MyAyOS4wOTIyQzU4MC40NDMgMzIuODQ1OCA1ODIuNzI5IDM1LjQ2NTIgNTg1Ljk5NyAzNS40NjUyQzU4OC40MjcgMzUuNDY1MiA1ODkuNTM1IDM0LjU3NDEgNTkwLjY5NiAzMi45MjY4TDU4OC4zNTUgMzEuMzUxNkM1ODcuODMzIDMyLjE5NzcgNTg3LjI2NiAzMi43MTk4IDU4Ni4xNDEgMzIuNzE5OFpNNTYzLjE3OCAyMi44NjMyQzU1OS44NzUgMjIuODYzMiA1NTcuNjYxIDI1LjM5MjYgNTU3LjY2MSAyOS4xNjQyQzU1Ny42NjEgMzIuOTM1OCA1NTkuODc1IDM1LjQ2NTIgNTYzLjE3OCAzNS40NjUyQzU2Ni40ODIgMzUuNDY1MiA1NjguNjk2IDMyLjkzNTggNTY4LjY5NiAyOS4xNjQyQzU2OC42OTYgMjUuMzkyNiA1NjYuNDgyIDIyLjg2MzIgNTYzLjE3OCAyMi44NjMyVjIyLjg2MzJaTTU2My4xNzggMzIuNzE5OEM1NjEuNTU4IDMyLjcxOTggNTYwLjUxNCAzMS4zMjQ2IDU2MC41MTQgMjkuMTY0MkM1NjAuNTE0IDI3LjAxMjkgNTYxLjU1OCAyNS42MjY3IDU2My4xNzggMjUuNjI2N0M1NjQuODA4IDI1LjYyNjcgNTY1Ljg2MSAyNy4wMTI5IDU2NS44NjEgMjkuMTY0MkM1NjUuODYxIDMxLjMyNDYgNTY0LjgwOCAzMi43MTk4IDU2My4xNzggMzIuNzE5OFoiIGZpbGw9IiNGODAwMDAiLz4NCjwvZz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQ2LjM0NCAyMi4xODExQzE0Ny41OTUgMjIuMjg1NCAxNDguODQ1IDIxLjU1NTMgMTQ5LjYyNyAyMC42Mjk4QzE1MC4zOTUgMTkuNjc4MSAxNTAuOTAzIDE4LjQwMDUgMTUwLjc3MyAxNy4wOTY5QzE0OS42NjYgMTcuMTQ5MSAxNDguMjk4IDE3LjgyNjkgMTQ3LjUxNyAxOC43Nzg2QzE0Ni44IDE5LjU5OTkgMTQ2LjE4OCAyMC45Mjk2IDE0Ni4zNDQgMjIuMTgxMVpNMTQ3Ljg0MSAyMy4wNzk3QzE0OC42NTMgMjIuNzYwNiAxNDkuNjU4IDIyLjM2NTYgMTUwLjc2IDIyLjQyOTFDMTUxLjQ2MyAyMi40ODEyIDE1My40OTUgMjIuNjg5OCAxNTQuNzk4IDI0LjYxOTJDMTU0Ljc5MiAyNC42MjM3IDE1NC43NzggMjQuNjMyMyAxNTQuNzU5IDI0LjY0NUMxNTQuNDM2IDI0Ljg1NDggMTUyLjM5IDI2LjE4NzEgMTUyLjQxNCAyOC44MTY5QzE1Mi40MzkgMzEuOTQ5OSAxNTQuOTg4IDMzLjExODMgMTU1LjMyMiAzMy4yNzExQzE1NS4zNDQgMzMuMjgxMSAxNTUuMzU2IDMzLjI4NjcgMTU1LjM1OCAzMy4yODgzQzE1NS4zNTYgMzMuMjkyNiAxNTUuMzU0IDMzLjMwMSAxNTUuMzUgMzMuMzEzM0MxNTUuMjgzIDMzLjUyODggMTU0Ljg0NSAzNC45NDg5IDE1My44NDcgMzYuNDA0QzE1Mi45MjIgMzcuNzU5OCAxNTEuOTcxIDM5LjA4OTUgMTUwLjQ2IDM5LjExNTZDMTQ5Ljc0OSAzOS4xMjgzIDE0OS4yNyAzOC45MjExIDE0OC43NzIgMzguNzA1NEMxNDguMjQ3IDM4LjQ3ODUgMTQ3LjcwMSAzOC4yNDIyIDE0Ni44NCAzOC4yNDIyQzE0NS45NDcgMzguMjQyMiAxNDUuMzc2IDM4LjQ4NDggMTQ0LjgyNiAzOC43MTg0QzE0NC4zNDggMzguOTIxNCAxNDMuODg3IDM5LjExNzQgMTQzLjI0NSAzOS4xNDE3QzE0MS43ODYgMzkuMTkzOCAxNDAuNjc5IDM3LjcwNzcgMTM5Ljc1NCAzNi4zNTE5QzEzNy44NjYgMzMuNjE0MyAxMzYuNDIgMjguNjM0NCAxMzguMzc0IDI1LjI3MUMxMzkuMzI1IDIzLjU4OTMgMTQxLjA1NyAyMi41MzM0IDE0Mi45MTkgMjIuNTA3M0MxNDMuNzMyIDIyLjQ5MjUgMTQ0LjUwNyAyMi44MDA2IDE0NS4xODQgMjMuMDcwMUMxNDUuNzAyIDIzLjI3NTggMTQ2LjE2MiAyMy40NTg5IDE0Ni41NCAyMy40NTg5QzE0Ni44NzcgMjMuNDU4OSAxNDcuMzE5IDIzLjI4NTEgMTQ3Ljg0MSAyMy4wNzk3WiIgZmlsbD0iYmxhY2siLz4NCjxwYXRoIGQ9Ik0zNi44NTg3IDM3LjUyNDFIMzEuOTg3NEwzNS4wMzQyIDE5LjY2NjhIMzkuOTA1MkwzNi44NTg3IDM3LjUyNDFaIiBmaWxsPSIjMDA1NzlGIi8+DQo8cGF0aCBkPSJNNTQuNTE1NyAyMC4xMDQxQzUzLjU1NDkgMTkuNzQyOCA1Mi4wMzA5IDE5LjM0MzggNTAuMTQ2NiAxOS4zNDM4QzQ1LjMzNjEgMTkuMzQzOCA0MS45NDg2IDIxLjc3NTMgNDEuOTI3OCAyNS4yNTE2QzQxLjg4NzggMjcuODE2NSA0NC4zNTMxIDI5LjI0MSA0Ni4xOTcgMzAuMDk2MkM0OC4wODE2IDMwLjk3MDEgNDguNzIyMyAzMS41NDA1IDQ4LjcyMjMgMzIuMzE5NEM0OC43MDMxIDMzLjUxNTcgNDcuMTk5NCAzNC4wNjcyIDQ1Ljc5NjkgMzQuMDY3MkM0My44NTIxIDM0LjA2NzIgNDIuODEgMzMuNzgyOSA0MS4yMjY0IDMzLjExNzNMNDAuNTg1IDMyLjgzMkwzOS45MDMzIDM2Ljg0MDZDNDEuMDQ1OCAzNy4zMzM5IDQzLjE1MDcgMzcuNzcxNyA0NS4zMzYxIDM3Ljc5MDlDNTAuNDQ3MyAzNy43OTA5IDUzLjc3NDkgMzUuMzk3MSA1My44MTQzIDMxLjY5MjVDNTMuODMzOCAyOS42NTk3IDUyLjUzMiAyOC4xMDIgNDkuNzI1NCAyNi44MjkyQzQ4LjAyMTcgMjYuMDEyMSA0Ni45NzgzIDI1LjQ2MTIgNDYuOTc4MyAyNC42MjUyQzQ2Ljk5ODMgMjMuODY1MiA0Ny44NjA4IDIzLjA4NjggNDkuNzg0IDIzLjA4NjhDNTEuMzY3NyAyMy4wNDg2IDUyLjUzMTIgMjMuNDA5NCA1My40MTI2IDIzLjc3MDVMNTMuODUzMiAyMy45NjAxTDU0LjUxNTcgMjAuMTA0MVoiIGZpbGw9IiMwMDU3OUYiLz4NCjxwYXRoIGQ9Ik02MC45OTI0IDMxLjE5NzlDNjEuMzkzNiAzMC4xNzIgNjIuOTM3MiAyNi4yMDE2IDYyLjkzNzIgMjYuMjAxNkM2Mi45MTcgMjYuMjM5NyA2My4zMzc2IDI1LjE1NjggNjMuNTc4MSAyNC40OTE5TDYzLjkxODYgMjYuMDMwNkM2My45MTg2IDI2LjAzMDYgNjQuODQxIDMwLjMwNTEgNjUuMDQxNCAzMS4xOTc5QzY0LjI4IDMxLjE5NzkgNjEuOTU0NiAzMS4xOTc5IDYwLjk5MjQgMzEuMTk3OVpNNjcuMDA1NCAxOS42NjY4SDYzLjIzNzRDNjIuMDc1NSAxOS42NjY4IDYxLjE5MjcgMTkuOTg5NSA2MC42OTE0IDIxLjE0ODRMNTMuNDU1OCAzNy41MjM5SDU4LjU2NzFDNTguNTY3MSAzNy41MjM5IDU5LjQwODUgMzUuMzE5OSA1OS41ODk0IDM0Ljg0NTJDNjAuMTUwMSAzNC44NDUyIDY1LjEyMjMgMzQuODQ1MiA2NS44NDM3IDM0Ljg0NTJDNjUuOTgzNSAzNS40NzIxIDY2LjQyNDkgMzcuNTIzOSA2Ni40MjQ5IDM3LjUyMzlINzAuOTM1Mkw2Ny4wMDU0IDE5LjY2NjhWMTkuNjY2OFoiIGZpbGw9IiMwMDU3OUYiLz4NCjxwYXRoIGQ9Ik0yNy45MTggMTkuNjY2OEwyMy4xNDc1IDMxLjg0MzhMMjIuNjI2MiAyOS4zNzQxQzIxLjc0NDIgMjYuNTI0NSAxOC45NzgxIDIzLjQyODQgMTUuODkxNCAyMS44ODlMMjAuMjYxIDM3LjUwNTJIMjUuNDEyMkwzMy4wNjkgMTkuNjY2OEgyNy45MThWMTkuNjY2OFoiIGZpbGw9IiMwMDU3OUYiLz4NCjxwYXRoIGQ9Ik0xOC43MTg0IDE5LjY2NjhIMTAuODgxMUwxMC44MDA5IDIwLjAyNzZDMTYuOTE0NSAyMS41MDk1IDIwLjk2MzUgMjUuMDgxNSAyMi42MjcgMjkuMzc0OUwyMC45MjMyIDIxLjE2NzlDMjAuNjQyNyAyMC4wMjc0IDE5Ljc4MDcgMTkuNzA0NCAxOC43MTg0IDE5LjY2NjhaIiBmaWxsPSIjRkFBNjFBIi8+DQo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDJfNThfMTExKSI+DQo8cGF0aCBkPSJNMjIxLjE1OCAxNy40OTlWMTguOTM1NkgyMzEuMzA2VjE3LjQ5OUgyMjEuMTU4Wk0yMzIuNzQ0IDE3LjQ5OVYxOC45MzU2SDI0Ny4yMDZDMjQ3LjIwNiAxOC45MzU2IDI0NS43MjkgMTcuNDk5IDI0My43NzMgMTcuNDk5SDIzMi43NDRaTTI1MC4wNDMgMTcuNDk5VjE4LjkzNTZIMjU4Ljc5M0wyNTguMjczIDE3LjQ5OUgyNTAuMDQzWk0yNjUuMDY1IDE3LjQ5OUwyNjQuNTQ2IDE4LjkzNTZIMjczLjIxNlYxNy40OTlIMjY1LjA2NVpNMjIxLjE1OCAyMC4yOTI5VjIxLjcyOTZIMjMxLjMwNlYyMC4yOTI5SDIyMS4xNThaTTIzMi43NDQgMjAuMjk1VjIxLjcyOTdIMjQ4Ljg4NEMyNDguODg0IDIxLjcyOTcgMjQ4LjY5NiAyMC42MjM5IDI0OC4zNjcgMjAuMjk1SDIzMi43NDRaTTI1MC4wNDMgMjAuMjk1VjIxLjcyOTdIMjU5Ljc1MkwyNTkuMjcxIDIwLjI5NUgyNTAuMDQzWk0yNjQuMDI3IDIwLjI5NUwyNjMuNTQ2IDIxLjcyOTdIMjczLjIxNlYyMC4yOTVIMjY0LjAyN1YyMC4yOTVaTTIyNC4wNzQgMjMuMDg2OVYyNC41MjU3SDIyOC40NjlWMjMuMDg2OUgyMjQuMDc0VjIzLjA4NjlaTTIzNS42NjEgMjMuMDg2OVYyNC41MjU3SDI0MC4wNTZWMjMuMDg2OUgyMzUuNjYxVjIzLjA4NjlaTTI0NC4zMzEgMjMuMDg2OVYyNC41MjU3SDI0OC43MjZDMjQ4LjcyNiAyNC41MjU3IDI0OS4wMDUgMjMuNzY1OSAyNDkuMDA1IDIzLjA4NjlIMjQ0LjMzMVYyMy4wODY5Wk0yNTIuOTYgMjMuMDg2OVYyNC41MjU3SDI2MC43NTJMMjYwLjIzMiAyMy4wODY5SDI1Mi45NlYyMy4wODY5Wk0yNjMuMDY5IDIzLjA4NjlMMjYyLjU0OCAyNC41MjU3SDI3MC4zNzlWMjMuMDg2OUgyNjMuMDY5VjIzLjA4NjlaTTIyNC4wNzQgMjUuODgzVjI3LjMxOTdIMjI4LjQ2OVYyNS44ODNIMjI0LjA3NFYyNS44ODNaTTIzNS42NjEgMjUuODgzVjI3LjMxOTdIMjQ2Ljg4N0MyNDYuODg3IDI3LjMxOTcgMjQ3LjgyNiAyNi41ODI1IDI0OC4xMjUgMjUuODgzSDIzNS42NjFaTTI1Mi45NiAyNS44ODNWMjcuMzE5N0gyNTcuMzU1VjI2LjUyTDI1Ny42MzQgMjcuMzE5N0gyNjUuNjg0TDI2NS45ODQgMjYuNTJWMjcuMzE5N0gyNzAuMzc5VjI1Ljg4M0gyNjIuMTI5TDI2MS42OTEgMjcuMDk5OUwyNjEuMjUxIDI1Ljg4M0gyNTIuOTZaTTIyNC4wNzQgMjguNjc3VjMwLjExMzdIMjI4LjQ2OVYyOC42NzdIMjI0LjA3NFpNMjM1LjY2MSAyOC42NzdWMzAuMTEzN0gyNDguMTI1QzI0Ny44MjYgMjkuNDE2NSAyNDYuODg3IDI4LjY3NyAyNDYuODg3IDI4LjY3N0gyMzUuNjYxWk0yNTIuOTYgMjguNjc3VjMwLjExMzdIMjU3LjM1NVYyOC42NzdIMjUyLjk2Wk0yNTguMTUzIDI4LjY3N0wyNTguNjg1IDMwLjExMzdIMjY0LjcyMUwyNjUuMjI2IDI4LjY3N0gyNTguMTUzWk0yNjUuOTg0IDI4LjY3N1YzMC4xMTM3SDI3MC4zNzlWMjguNjc3SDI2NS45ODRaTTIyNC4wNzQgMzEuNDcxVjMyLjkwNzZIMjI4LjQ2OVYzMS40NzFIMjI0LjA3NFpNMjM1LjY2MSAzMS40NzFWMzIuOTA3NkgyNDAuMDU2VjMxLjQ3MUgyMzUuNjYxWk0yNDQuMzMxIDMxLjQ3MVYzMi45MDc2SDI0OS4wMDVDMjQ5LjAwNSAzMi4yMjk2IDI0OC43MjYgMzEuNDcxIDI0OC43MjYgMzEuNDcxSDI0NC4zMzFWMzEuNDcxWk0yNTIuOTYgMzEuNDcxVjMyLjkwNzZIMjU3LjM1NVYzMS40NzFIMjUyLjk2Wk0yNTkuMTUxIDMxLjQ3MUwyNTkuNjY2IDMyLjkwNzZIMjYzLjcxM0wyNjQuMjMyIDMxLjQ3MUgyNTkuMTUxWk0yNjUuOTg0IDMxLjQ3MVYzMi45MDc2SDI3MC4zNzlWMzEuNDcxSDI2NS45ODRaTTIyMS4yMzcgMzQuMjY1VjM1LjcwMzdIMjMxLjM4NlYzNC4yNjVIMjIxLjIzN1pNMjMyLjc0NCAzNC4yNjVWMzUuNzAzN0gyNDguMzY3QzI0OC42OTYgMzUuMzc0MyAyNDguODg0IDM0LjI2NSAyNDguODg0IDM0LjI2NUgyMzIuNzQ0VjM0LjI2NVpNMjUwLjEyMyAzNC4yNjVWMzUuNzAzN0gyNTcuMzU1VjM0LjI2NUgyNTAuMTIzWk0yNjAuMTUxIDM0LjI2NUwyNjAuNjggMzUuNzAzN0gyNjIuNzM5TDI2My4yMzYgMzQuMjY1SDI2MC4xNTFaTTI2NS45ODQgMzQuMjY1VjM1LjcwMzdIMjczLjI5NVYzNC4yNjVIMjY1Ljk4NFpNMjIxLjIzNyAzNy4wNjFWMzguNDk3N0gyMzEuMzg2VjM3LjA2MUgyMjEuMjM3Wk0yMzIuNzQ0IDM3LjA2MVYzOC40OTU2SDI0My43NzNDMjQ1LjcyOSAzOC40OTU2IDI0Ny4yMDYgMzcuMDYxIDI0Ny4yMDYgMzcuMDYxSDIzMi43NDRaTTI1MC4xMjMgMzcuMDYxVjM4LjQ5NzdIMjU3LjM1NVYzNy4wNjFIMjUwLjEyM1pNMjYxLjE1NSAzNy4wNjFMMjYxLjY2NCAzOC40OTM2TDI2MS43NTIgMzguNDk1NkwyNjIuMjY5IDM3LjA2MUgyNjEuMTU1VjM3LjA2MVpNMjY1Ljk4NCAzNy4wNjFWMzguNDk3N0gyNzMuMjk1VjM3LjA2MUgyNjUuOTg0WiIgZmlsbD0iIzFGNzBDMSIvPg0KPC9nPg0KPGRlZnM+DQo8Y2xpcFBhdGggaWQ9ImNsaXAwXzU4XzExMSI+DQo8cmVjdCB3aWR0aD0iNDQuNDQ3MyIgaGVpZ2h0PSIyOS42MzE1IiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzUzLjk1NSAxNC44MTU1KSIvPg0KPC9jbGlwUGF0aD4NCjxjbGlwUGF0aCBpZD0iY2xpcDFfNThfMTExIj4NCjxyZWN0IHdpZHRoPSI3Ni41NDgxIiBoZWlnaHQ9IjE2LjM1MDciIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MjUuNTk5IDIwLjk4ODkpIi8+DQo8L2NsaXBQYXRoPg0KPGNsaXBQYXRoIGlkPSJjbGlwMl81OF8xMTEiPg0KPHJlY3Qgd2lkdGg9IjUyLjEzNzIiIGhlaWdodD0iMjAuOTk4NyIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyMS4xNTggMTcuNDk5KSIvPg0KPC9jbGlwUGF0aD4NCjwvZGVmcz4NCjwvc3ZnPg0K\\\")
\\n
Claim your FREE account\\n
\\n
\\n
Draggable
\n * \n * ```\n */\nvar Draggable = /** @class */ (function (_super) {\n __extends(Draggable, _super);\n function Draggable(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.dragLimit = Draggable_1.getDefaultPosition();\n _this.borderWidth = Draggable_1.getDefaultPosition();\n _this.padding = Draggable_1.getDefaultPosition();\n _this.diffX = 0;\n _this.prevLeft = 0;\n _this.prevTop = 0;\n _this.dragProcessStarted = false;\n _this.eleTop = 0;\n /* eslint-disable @typescript-eslint/no-explicit-any */\n _this.tapHoldTimer = 0;\n _this.externalInitialize = false;\n _this.diffY = 0;\n _this.parentScrollX = 0;\n _this.parentScrollY = 0;\n _this.droppables = {};\n _this.bind();\n return _this;\n }\n Draggable_1 = Draggable;\n Draggable.prototype.bind = function () {\n this.toggleEvents();\n if (Browser.isIE) {\n addClass([this.element], 'e-block-touch');\n }\n this.droppables[this.scope] = {};\n };\n Draggable.getDefaultPosition = function () {\n return extend({}, defaultPosition);\n };\n Draggable.prototype.toggleEvents = function (isUnWire) {\n var ele;\n if (!isUndefined(this.handle)) {\n ele = select(this.handle, this.element);\n }\n var handler = (this.enableTapHold && Browser.isDevice && Browser.isTouch) ? this.mobileInitialize : this.initialize;\n if (isUnWire) {\n EventHandler.remove(ele || this.element, Browser.touchStartEvent, handler);\n }\n else {\n EventHandler.add(ele || this.element, Browser.touchStartEvent, handler, this);\n }\n };\n /* istanbul ignore next */\n Draggable.prototype.mobileInitialize = function (evt) {\n var _this = this;\n var target = evt.currentTarget;\n this.tapHoldTimer = setTimeout(function () {\n _this.externalInitialize = true;\n _this.removeTapholdTimer();\n _this.initialize(evt, target);\n }, this.tapHoldThreshold);\n EventHandler.add(document, Browser.touchMoveEvent, this.removeTapholdTimer, this);\n EventHandler.add(document, Browser.touchEndEvent, this.removeTapholdTimer, this);\n };\n /* istanbul ignore next */\n Draggable.prototype.removeTapholdTimer = function () {\n clearTimeout(this.tapHoldTimer);\n EventHandler.remove(document, Browser.touchMoveEvent, this.removeTapholdTimer);\n EventHandler.remove(document, Browser.touchEndEvent, this.removeTapholdTimer);\n };\n /* istanbul ignore next */\n Draggable.prototype.getScrollableParent = function (element, axis) {\n var scroll = { 'vertical': 'scrollHeight', 'horizontal': 'scrollWidth' };\n var client = { 'vertical': 'clientHeight', 'horizontal': 'clientWidth' };\n if (isNullOrUndefined(element)) {\n return null;\n }\n if (element[scroll[\"\" + axis]] > element[client[\"\" + axis]]) {\n if (axis === 'vertical' ? element.scrollTop > 0 : element.scrollLeft > 0) {\n if (axis === 'vertical') {\n this.parentScrollY = this.parentScrollY +\n (this.parentScrollY === 0 ? element.scrollTop : element.scrollTop - this.parentScrollY);\n this.tempScrollHeight = element.scrollHeight;\n }\n else {\n this.parentScrollX = this.parentScrollX +\n (this.parentScrollX === 0 ? element.scrollLeft : element.scrollLeft - this.parentScrollX);\n this.tempScrollWidth = element.scrollWidth;\n }\n if (!isNullOrUndefined(element)) {\n return this.getScrollableParent(element.parentNode, axis);\n }\n else {\n return element;\n }\n }\n else {\n return this.getScrollableParent(element.parentNode, axis);\n }\n }\n else {\n return this.getScrollableParent(element.parentNode, axis);\n }\n };\n Draggable.prototype.getScrollableValues = function () {\n this.parentScrollX = 0;\n this.parentScrollY = 0;\n var isModalDialog = this.element.classList.contains('e-dialog') && this.element.classList.contains('e-dlg-modal');\n var verticalScrollParent = this.getScrollableParent(this.element.parentNode, 'vertical');\n var horizontalScrollParent = this.getScrollableParent(this.element.parentNode, 'horizontal');\n };\n Draggable.prototype.initialize = function (evt, curTarget) {\n this.currentStateTarget = evt.target;\n if (this.isDragStarted()) {\n return;\n }\n else {\n this.isDragStarted(true);\n this.externalInitialize = false;\n }\n this.target = (evt.currentTarget || curTarget);\n this.dragProcessStarted = false;\n if (this.abort) {\n /* tslint:disable no-any */\n var abortSelectors = this.abort;\n if (typeof abortSelectors === 'string') {\n abortSelectors = [abortSelectors];\n }\n for (var i = 0; i < abortSelectors.length; i++) {\n if (!isNullOrUndefined(closest(evt.target, abortSelectors[parseInt(i.toString(), 10)]))) {\n /* istanbul ignore next */\n if (this.isDragStarted()) {\n this.isDragStarted(true);\n }\n return;\n }\n }\n }\n if (this.preventDefault && !isUndefined(evt.changedTouches) && evt.type !== 'touchstart') {\n evt.preventDefault();\n }\n this.element.setAttribute('aria-grabbed', 'true');\n var intCoord = this.getCoordinates(evt);\n this.initialPosition = { x: intCoord.pageX, y: intCoord.pageY };\n if (!this.clone) {\n var pos = this.element.getBoundingClientRect();\n this.getScrollableValues();\n if (evt.clientX === evt.pageX) {\n this.parentScrollX = 0;\n }\n if (evt.clientY === evt.pageY) {\n this.parentScrollY = 0;\n }\n this.relativeXPosition = intCoord.pageX - (pos.left + this.parentScrollX);\n this.relativeYPosition = intCoord.pageY - (pos.top + this.parentScrollY);\n }\n if (this.externalInitialize) {\n this.intDragStart(evt);\n }\n else {\n EventHandler.add(document, Browser.touchMoveEvent, this.intDragStart, this);\n EventHandler.add(document, Browser.touchEndEvent, this.intDestroy, this);\n }\n this.toggleEvents(true);\n if (evt.type !== 'touchstart' && this.isPreventSelect) {\n document.body.classList.add('e-prevent-select');\n }\n this.externalInitialize = false;\n EventHandler.trigger(document.documentElement, Browser.touchStartEvent, evt);\n };\n Draggable.prototype.intDragStart = function (evt) {\n this.removeTapholdTimer();\n var isChangeTouch = !isUndefined(evt.changedTouches);\n if (isChangeTouch && (evt.changedTouches.length !== 1)) {\n return;\n }\n var intCordinate = this.getCoordinates(evt);\n var pos;\n var styleProp = getComputedStyle(this.element);\n this.margin = {\n left: parseInt(styleProp.marginLeft, 10),\n top: parseInt(styleProp.marginTop, 10),\n right: parseInt(styleProp.marginRight, 10),\n bottom: parseInt(styleProp.marginBottom, 10)\n };\n var element = this.element;\n if (this.clone && this.dragTarget) {\n var intClosest = closest(evt.target, this.dragTarget);\n if (!isNullOrUndefined(intClosest)) {\n element = intClosest;\n }\n }\n /* istanbul ignore next */\n if (this.isReplaceDragEle) {\n element = this.currentStateCheck(evt.target, element);\n }\n this.offset = this.calculateParentPosition(element);\n this.position = this.getMousePosition(evt, this.isDragScroll);\n var x = this.initialPosition.x - intCordinate.pageX;\n var y = this.initialPosition.y - intCordinate.pageY;\n var distance = Math.sqrt((x * x) + (y * y));\n if ((distance >= this.distance || this.externalInitialize)) {\n var ele = this.getHelperElement(evt);\n if (!ele || isNullOrUndefined(ele)) {\n return;\n }\n if (isChangeTouch) {\n evt.preventDefault();\n }\n var dragTargetElement = this.helperElement = ele;\n this.parentClientRect = this.calculateParentPosition(dragTargetElement.offsetParent);\n if (this.dragStart) {\n var curTarget = this.getProperTargetElement(evt);\n var args = {\n event: evt,\n element: element,\n target: curTarget,\n bindEvents: isBlazor() ? this.bindDragEvents.bind(this) : null,\n dragElement: dragTargetElement\n };\n this.trigger('dragStart', args);\n }\n if (this.dragArea) {\n this.setDragArea();\n }\n else {\n this.dragLimit = { left: 0, right: 0, bottom: 0, top: 0 };\n this.borderWidth = { top: 0, left: 0 };\n }\n pos = { left: this.position.left - this.parentClientRect.left, top: this.position.top - this.parentClientRect.top };\n if (this.clone && !this.enableTailMode) {\n this.diffX = this.position.left - this.offset.left;\n this.diffY = this.position.top - this.offset.top;\n }\n this.getScrollableValues();\n // when drag element has margin-top\n var styles = getComputedStyle(element);\n var marginTop = parseFloat(styles.marginTop);\n /* istanbul ignore next */\n if (this.clone && marginTop !== 0) {\n pos.top += marginTop;\n }\n this.eleTop = !isNaN(parseFloat(styles.top)) ? parseFloat(styles.top) - this.offset.top : 0;\n /* istanbul ignore next */\n // if (this.eleTop > 0) {\n // pos.top += this.eleTop;\n // }\n if (this.enableScrollHandler && !this.clone) {\n pos.top -= this.parentScrollY;\n pos.left -= this.parentScrollX;\n }\n var posValue = this.getProcessedPositionValue({\n top: (pos.top - this.diffY) + 'px',\n left: (pos.left - this.diffX) + 'px'\n });\n if (this.dragArea && typeof this.dragArea !== 'string' && this.dragArea.classList.contains('e-kanban-content') && this.dragArea.style.position === 'relative') {\n pos.top += this.dragArea.scrollTop;\n }\n this.dragElePosition = { top: pos.top, left: pos.left };\n setStyleAttribute(dragTargetElement, this.getDragPosition({ position: 'absolute', left: posValue.left, top: posValue.top }));\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDragStart);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDestroy);\n if (!isBlazor()) {\n this.bindDragEvents(dragTargetElement);\n }\n }\n };\n Draggable.prototype.bindDragEvents = function (dragTargetElement) {\n if (isVisible(dragTargetElement)) {\n EventHandler.add(document, Browser.touchMoveEvent, this.intDrag, this);\n EventHandler.add(document, Browser.touchEndEvent, this.intDragStop, this);\n this.setGlobalDroppables(false, this.element, dragTargetElement);\n }\n else {\n this.toggleEvents();\n document.body.classList.remove('e-prevent-select');\n }\n };\n Draggable.prototype.elementInViewport = function (el) {\n this.top = el.offsetTop;\n this.left = el.offsetLeft;\n this.width = el.offsetWidth;\n this.height = el.offsetHeight;\n while (el.offsetParent) {\n el = el.offsetParent;\n this.top += el.offsetTop;\n this.left += el.offsetLeft;\n }\n return (this.top >= window.pageYOffset &&\n this.left >= window.pageXOffset &&\n (this.top + this.height) <= (window.pageYOffset + window.innerHeight) &&\n (this.left + this.width) <= (window.pageXOffset + window.innerWidth));\n };\n Draggable.prototype.getProcessedPositionValue = function (value) {\n if (this.queryPositionInfo) {\n return this.queryPositionInfo(value);\n }\n return value;\n };\n Draggable.prototype.calculateParentPosition = function (ele) {\n if (isNullOrUndefined(ele)) {\n return { left: 0, top: 0 };\n }\n var rect = ele.getBoundingClientRect();\n var style = getComputedStyle(ele);\n return {\n left: (rect.left + window.pageXOffset) - parseInt(style.marginLeft, 10),\n top: (rect.top + window.pageYOffset) - parseInt(style.marginTop, 10)\n };\n };\n // tslint:disable-next-line:max-func-body-length\n Draggable.prototype.intDrag = function (evt) {\n if (!isUndefined(evt.changedTouches) && (evt.changedTouches.length !== 1)) {\n return;\n }\n if (this.clone && evt.changedTouches && Browser.isDevice && Browser.isTouch) {\n evt.preventDefault();\n }\n var left;\n var top;\n this.position = this.getMousePosition(evt, this.isDragScroll);\n var docHeight = this.getDocumentWidthHeight('Height');\n if (docHeight < this.position.top) {\n this.position.top = docHeight;\n }\n var docWidth = this.getDocumentWidthHeight('Width');\n if (docWidth < this.position.left) {\n this.position.left = docWidth;\n }\n if (this.drag) {\n var curTarget = this.getProperTargetElement(evt);\n this.trigger('drag', { event: evt, element: this.element, target: curTarget });\n }\n var eleObj = this.checkTargetElement(evt);\n if (eleObj.target && eleObj.instance) {\n /* tslint:disable no-any */\n var flag = true;\n if (this.hoverObject) {\n if (this.hoverObject.instance !== eleObj.instance) {\n this.triggerOutFunction(evt, eleObj);\n }\n else {\n flag = false;\n }\n }\n if (flag) {\n eleObj.instance.dragData[this.scope] = this.droppables[this.scope];\n eleObj.instance.intOver(evt, eleObj.target);\n this.hoverObject = eleObj;\n }\n }\n else if (this.hoverObject) {\n this.triggerOutFunction(evt, eleObj);\n }\n var helperElement = this.droppables[this.scope].helper;\n this.parentClientRect = this.calculateParentPosition(this.helperElement.offsetParent);\n var tLeft = this.parentClientRect.left;\n var tTop = this.parentClientRect.top;\n var intCoord = this.getCoordinates(evt);\n var pagex = intCoord.pageX;\n var pagey = intCoord.pageY;\n var dLeft = this.position.left - this.diffX;\n var dTop = this.position.top - this.diffY;\n var styles = getComputedStyle(helperElement);\n if (this.dragArea) {\n if (this.pageX !== pagex || this.skipDistanceCheck) {\n var helperWidth = helperElement.offsetWidth + (parseFloat(styles.marginLeft)\n + parseFloat(styles.marginRight));\n if (this.dragLimit.left > dLeft && dLeft > 0) {\n left = this.dragLimit.left;\n }\n else if (this.dragLimit.right + window.pageXOffset < dLeft + helperWidth && dLeft > 0) {\n left = dLeft - (dLeft - this.dragLimit.right) + window.pageXOffset - helperWidth;\n }\n else {\n left = dLeft < 0 ? this.dragLimit.left : dLeft;\n }\n }\n if (this.pageY !== pagey || this.skipDistanceCheck) {\n var helperHeight = helperElement.offsetHeight + (parseFloat(styles.marginTop)\n + parseFloat(styles.marginBottom));\n if (this.dragLimit.top > dTop && dTop > 0) {\n top = this.dragLimit.top;\n }\n else if (this.dragLimit.bottom + window.pageYOffset < dTop + helperHeight && dTop > 0) {\n top = dTop - (dTop - this.dragLimit.bottom) + window.pageYOffset - helperHeight;\n }\n else {\n top = dTop < 0 ? this.dragLimit.top : dTop;\n }\n }\n }\n else {\n left = dLeft;\n top = dTop;\n }\n var iTop = tTop + this.borderWidth.top;\n var iLeft = tLeft + this.borderWidth.left;\n if (this.dragProcessStarted) {\n if (isNullOrUndefined(top)) {\n top = this.prevTop;\n }\n if (isNullOrUndefined(left)) {\n left = this.prevLeft;\n }\n }\n var draEleTop;\n var draEleLeft;\n if (this.helperElement.classList.contains('e-treeview')) {\n if (this.dragArea) {\n this.dragLimit.top = this.clone ? this.dragLimit.top : 0;\n draEleTop = (top - iTop) < 0 ? this.dragLimit.top : (top - this.borderWidth.top);\n draEleLeft = (left - iLeft) < 0 ? this.dragLimit.left : (left - this.borderWidth.left);\n }\n else {\n draEleTop = top - this.borderWidth.top;\n draEleLeft = left - this.borderWidth.left;\n }\n }\n else {\n if (this.dragArea) {\n this.dragLimit.top = this.clone ? this.dragLimit.top : 0;\n draEleTop = (top - iTop) < 0 ? this.dragLimit.top : (top - iTop);\n draEleLeft = (left - iLeft) < 0 ? this.dragElePosition.left : (left - iLeft);\n }\n else {\n draEleTop = top - iTop;\n draEleLeft = left - iLeft;\n }\n }\n var marginTop = parseFloat(getComputedStyle(this.element).marginTop);\n // when drag-element has margin-top\n /* istanbul ignore next */\n if (marginTop > 0) {\n if (this.clone) {\n draEleTop += marginTop;\n if (dTop < 0) {\n if ((marginTop + dTop) >= 0) {\n draEleTop = marginTop + dTop;\n }\n else {\n draEleTop -= marginTop;\n }\n }\n draEleTop = (this.dragLimit.bottom < draEleTop) ? this.dragLimit.bottom : draEleTop;\n }\n if ((top - iTop) < 0) {\n if (dTop + marginTop + (helperElement.offsetHeight - iTop) >= 0) {\n var tempDraEleTop = this.dragLimit.top + dTop - iTop;\n if ((tempDraEleTop + marginTop + iTop) < 0) {\n draEleTop -= marginTop + iTop;\n }\n else {\n draEleTop = tempDraEleTop;\n }\n }\n else {\n draEleTop -= marginTop + iTop;\n }\n }\n }\n if (this.dragArea && this.helperElement.classList.contains('e-treeview')) {\n var helperHeight = helperElement.offsetHeight + (parseFloat(styles.marginTop)\n + parseFloat(styles.marginBottom));\n draEleTop = (draEleTop + helperHeight) > this.dragLimit.bottom ? (this.dragLimit.bottom - helperHeight) : draEleTop;\n }\n /* istanbul ignore next */\n // if(this.eleTop > 0) {\n // draEleTop += this.eleTop;\n // }\n if (this.enableScrollHandler && !this.clone) {\n draEleTop -= this.parentScrollY;\n draEleLeft -= this.parentScrollX;\n }\n if (this.dragArea && typeof this.dragArea !== 'string' && this.dragArea.classList.contains('e-kanban-content') && this.dragArea.style.position === 'relative') {\n draEleTop += this.dragArea.scrollTop;\n }\n var dragValue = this.getProcessedPositionValue({ top: draEleTop + 'px', left: draEleLeft + 'px' });\n setStyleAttribute(helperElement, this.getDragPosition(dragValue));\n if (!this.elementInViewport(helperElement) && this.enableAutoScroll && !this.helperElement.classList.contains('e-treeview')) {\n this.helperElement.scrollIntoView();\n }\n var elements = document.querySelectorAll(':hover');\n if (this.enableAutoScroll && this.helperElement.classList.contains('e-treeview')) {\n if (elements.length === 0) {\n elements = this.getPathElements(evt);\n }\n /* tslint:disable no-any */\n var scrollParent = this.getScrollParent(elements, false);\n if (this.elementInViewport(this.helperElement)) {\n this.getScrollPosition(scrollParent, draEleTop);\n }\n else if (!this.elementInViewport(this.helperElement)) {\n elements = [].slice.call(document.querySelectorAll(':hover'));\n if (elements.length === 0) {\n elements = this.getPathElements(evt);\n }\n scrollParent = this.getScrollParent(elements, true);\n this.getScrollPosition(scrollParent, draEleTop);\n }\n }\n this.dragProcessStarted = true;\n this.prevLeft = left;\n this.prevTop = top;\n this.position.left = left;\n this.position.top = top;\n this.pageX = pagex;\n this.pageY = pagey;\n };\n /* tslint:disable no-any */\n Draggable.prototype.getScrollParent = function (node, reverse) {\n /* tslint:disable no-any */\n var nodeEl = reverse ? node.reverse() : node;\n var hasScroll;\n for (var i = nodeEl.length - 1; i >= 0; i--) {\n hasScroll = window.getComputedStyle(nodeEl[parseInt(i.toString(), 10)])['overflow-y'];\n if ((hasScroll === 'auto' || hasScroll === 'scroll')\n && nodeEl[parseInt(i.toString(), 10)].scrollHeight > nodeEl[parseInt(i.toString(), 10)].clientHeight) {\n return nodeEl[parseInt(i.toString(), 10)];\n }\n }\n hasScroll = window.getComputedStyle(document.scrollingElement)['overflow-y'];\n if (hasScroll === 'visible') {\n document.scrollingElement.style.overflow = 'auto';\n return document.scrollingElement;\n }\n };\n Draggable.prototype.getScrollPosition = function (nodeEle, draEleTop) {\n if (nodeEle && nodeEle === document.scrollingElement) {\n if ((nodeEle.clientHeight + document.scrollingElement.scrollTop - this.helperElement.clientHeight) < draEleTop\n && nodeEle.getBoundingClientRect().height + this.parentClientRect.top > draEleTop) {\n nodeEle.scrollTop += this.helperElement.clientHeight;\n }\n else if (nodeEle.scrollTop > draEleTop - this.helperElement.clientHeight) {\n nodeEle.scrollTop -= this.helperElement.clientHeight;\n }\n }\n else if (nodeEle && nodeEle !== document.scrollingElement) {\n if ((nodeEle.clientHeight + nodeEle.getBoundingClientRect().top - this.helperElement.clientHeight + document.scrollingElement.scrollTop) < draEleTop) {\n nodeEle.scrollTop += this.helperElement.clientHeight;\n }\n else if (nodeEle.getBoundingClientRect().top > (draEleTop - this.helperElement.clientHeight - document.scrollingElement.scrollTop)) {\n nodeEle.scrollTop -= this.helperElement.clientHeight;\n }\n }\n };\n Draggable.prototype.getPathElements = function (evt) {\n var elementTop = evt.clientX > 0 ? evt.clientX : 0;\n var elementLeft = evt.clientY > 0 ? evt.clientY : 0;\n return document.elementsFromPoint(elementTop, elementLeft);\n };\n Draggable.prototype.triggerOutFunction = function (evt, eleObj) {\n this.hoverObject.instance.intOut(evt, eleObj.target);\n this.hoverObject.instance.dragData[this.scope] = null;\n this.hoverObject = null;\n };\n Draggable.prototype.getDragPosition = function (dragValue) {\n var temp = extend({}, dragValue);\n if (this.axis) {\n if (this.axis === 'x') {\n delete temp.top;\n }\n else if (this.axis === 'y') {\n delete temp.left;\n }\n }\n return temp;\n };\n Draggable.prototype.getDocumentWidthHeight = function (str) {\n var docBody = document.body;\n var docEle = document.documentElement;\n var returnValue = Math.max(docBody['scroll' + str], docEle['scroll' + str], docBody['offset' + str], docEle['offset' + str], docEle['client' + str]);\n return returnValue;\n };\n Draggable.prototype.intDragStop = function (evt) {\n this.dragProcessStarted = false;\n if (!isUndefined(evt.changedTouches) && (evt.changedTouches.length !== 1)) {\n return;\n }\n var type = ['touchend', 'pointerup', 'mouseup'];\n if (type.indexOf(evt.type) !== -1) {\n if (this.dragStop) {\n var curTarget = this.getProperTargetElement(evt);\n this.trigger('dragStop', { event: evt, element: this.element, target: curTarget, helper: this.helperElement });\n }\n this.intDestroy(evt);\n }\n else {\n this.element.setAttribute('aria-grabbed', 'false');\n }\n var eleObj = this.checkTargetElement(evt);\n if (eleObj.target && eleObj.instance) {\n eleObj.instance.dragStopCalled = true;\n eleObj.instance.dragData[this.scope] = this.droppables[this.scope];\n eleObj.instance.intDrop(evt, eleObj.target);\n }\n this.setGlobalDroppables(true);\n document.body.classList.remove('e-prevent-select');\n };\n /**\n * @private\n */\n Draggable.prototype.intDestroy = function (evt) {\n this.dragProcessStarted = false;\n this.toggleEvents();\n document.body.classList.remove('e-prevent-select');\n this.element.setAttribute('aria-grabbed', 'false');\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDragStart);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDragStop);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDestroy);\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDrag);\n if (this.isDragStarted()) {\n this.isDragStarted(true);\n }\n };\n // triggers when property changed\n Draggable.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Draggable.prototype.getModuleName = function () {\n return 'draggable';\n };\n Draggable.prototype.isDragStarted = function (change) {\n if (change) {\n isDraggedObject.isDragged = !isDraggedObject.isDragged;\n }\n return isDraggedObject.isDragged;\n };\n Draggable.prototype.setDragArea = function () {\n var eleWidthBound;\n var eleHeightBound;\n var top = 0;\n var left = 0;\n var ele;\n var type = typeof this.dragArea;\n if (type === 'string') {\n ele = select(this.dragArea);\n }\n else {\n ele = this.dragArea;\n }\n if (ele) {\n var elementArea = ele.getBoundingClientRect();\n eleWidthBound = ele.scrollWidth ? ele.scrollWidth : elementArea.right - elementArea.left;\n eleHeightBound = ele.scrollHeight ? (this.dragArea && !isNullOrUndefined(this.helperElement) && this.helperElement.classList.contains('e-treeview')) ? ele.clientHeight : ele.scrollHeight : elementArea.bottom - elementArea.top;\n var keys = ['Top', 'Left', 'Bottom', 'Right'];\n var styles = getComputedStyle(ele);\n for (var i = 0; i < keys.length; i++) {\n var key = keys[parseInt(i.toString(), 10)];\n var tborder = styles['border' + key + 'Width'];\n var tpadding = styles['padding' + key];\n var lowerKey = key.toLowerCase();\n this.borderWidth[\"\" + lowerKey] = isNaN(parseFloat(tborder)) ? 0 : parseFloat(tborder);\n this.padding[\"\" + lowerKey] = isNaN(parseFloat(tpadding)) ? 0 : parseFloat(tpadding);\n }\n if (this.dragArea && !isNullOrUndefined(this.helperElement) && this.helperElement.classList.contains('e-treeview')) {\n top = elementArea.top + document.scrollingElement.scrollTop;\n }\n else {\n top = elementArea.top;\n }\n left = elementArea.left;\n this.dragLimit.left = left + this.borderWidth.left + this.padding.left;\n this.dragLimit.top = ele.offsetTop + this.borderWidth.top + this.padding.top;\n this.dragLimit.right = left + eleWidthBound - (this.borderWidth.right + this.padding.right);\n this.dragLimit.bottom = top + eleHeightBound - (this.borderWidth.bottom + this.padding.bottom);\n }\n };\n Draggable.prototype.getProperTargetElement = function (evt) {\n var intCoord = this.getCoordinates(evt);\n var ele;\n var prevStyle = this.helperElement.style.pointerEvents || '';\n var isPointer = evt.type.indexOf('pointer') !== -1 && Browser.info.name === 'safari' && parseInt(Browser.info.version) > 12;\n if (compareElementParent(evt.target, this.helperElement) || evt.type.indexOf('touch') !== -1 || isPointer) {\n this.helperElement.style.pointerEvents = 'none';\n ele = document.elementFromPoint(intCoord.clientX, intCoord.clientY);\n this.helperElement.style.pointerEvents = prevStyle;\n }\n else {\n ele = evt.target;\n }\n return ele;\n };\n /* istanbul ignore next */\n Draggable.prototype.currentStateCheck = function (ele, oldEle) {\n var elem;\n if (!isNullOrUndefined(this.currentStateTarget) && this.currentStateTarget !== ele) {\n elem = this.currentStateTarget;\n }\n else {\n elem = !isNullOrUndefined(oldEle) ? oldEle : ele;\n }\n return elem;\n };\n Draggable.prototype.getMousePosition = function (evt, isdragscroll) {\n /* tslint:disable no-any */\n var dragEle = evt.srcElement !== undefined ? evt.srcElement : evt.target;\n var intCoord = this.getCoordinates(evt);\n var pageX;\n var pageY;\n var isOffsetParent = isNullOrUndefined(dragEle.offsetParent);\n /* istanbul ignore next */\n if (isdragscroll) {\n pageX = this.clone ? intCoord.pageX :\n (intCoord.pageX + (isOffsetParent ? 0 : dragEle.offsetParent.scrollLeft)) - this.relativeXPosition;\n pageY = this.clone ? intCoord.pageY :\n (intCoord.pageY + (isOffsetParent ? 0 : dragEle.offsetParent.scrollTop)) - this.relativeYPosition;\n }\n else {\n pageX = this.clone ? intCoord.pageX : (intCoord.pageX + window.pageXOffset) - this.relativeXPosition;\n pageY = this.clone ? intCoord.pageY : (intCoord.pageY + window.pageYOffset) - this.relativeYPosition;\n }\n if (this.element && this.element.classList.length > 0 && this.element.classList.value.indexOf(\"e-dialog\") === -1 && document.scrollingElement) {\n var isVerticalScroll = document.scrollingElement.scrollHeight > 0 && document.scrollingElement.scrollHeight > document.scrollingElement.clientHeight && document.scrollingElement.scrollTop > 0;\n var isHorrizontalScroll = document.scrollingElement.scrollWidth > 0 && document.scrollingElement.scrollWidth > document.scrollingElement.clientWidth && document.scrollingElement.scrollLeft > 0;\n pageX = isHorrizontalScroll ? pageX - document.scrollingElement.scrollLeft : pageX;\n pageY = isVerticalScroll ? pageY - document.scrollingElement.scrollTop : pageY;\n }\n return {\n left: pageX - (this.margin.left + this.cursorAt.left),\n top: pageY - (this.margin.top + this.cursorAt.top)\n };\n };\n Draggable.prototype.getCoordinates = function (evt) {\n if (evt.type.indexOf('touch') > -1) {\n return evt.changedTouches[0];\n }\n return evt;\n };\n Draggable.prototype.getHelperElement = function (evt) {\n var element;\n if (this.clone) {\n if (this.helper) {\n element = this.helper({ sender: evt, element: this.target });\n }\n else {\n element = createElement('div', { className: 'e-drag-helper e-block-touch', innerHTML: 'Draggable' });\n document.body.appendChild(element);\n }\n }\n else {\n element = this.element;\n }\n return element;\n };\n Draggable.prototype.setGlobalDroppables = function (reset, drag, helper) {\n this.droppables[this.scope] = reset ? null : {\n draggable: drag,\n helper: helper,\n draggedElement: this.element\n };\n };\n Draggable.prototype.checkTargetElement = function (evt) {\n var target = this.getProperTargetElement(evt);\n var dropIns = this.getDropInstance(target);\n if (!dropIns && target && !isNullOrUndefined(target.parentNode)) {\n var parent_1 = closest(target.parentNode, '.e-droppable') || target.parentElement;\n if (parent_1) {\n dropIns = this.getDropInstance(parent_1);\n }\n }\n return { target: target, instance: dropIns };\n };\n Draggable.prototype.getDropInstance = function (ele) {\n var name = 'getModuleName';\n var drop;\n var eleInst = ele && ele.ej2_instances;\n if (eleInst) {\n for (var _i = 0, eleInst_1 = eleInst; _i < eleInst_1.length; _i++) {\n var inst = eleInst_1[_i];\n if (inst[\"\" + name]() === 'droppable') {\n drop = inst;\n break;\n }\n }\n }\n return drop;\n };\n Draggable.prototype.destroy = function () {\n this.toggleEvents(true);\n _super.prototype.destroy.call(this);\n };\n var Draggable_1;\n __decorate([\n Complex({}, Position)\n ], Draggable.prototype, \"cursorAt\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"clone\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"dragArea\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"isDragScroll\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"isReplaceDragEle\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"isPreventSelect\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"drag\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"dragStart\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"dragStop\", void 0);\n __decorate([\n Property(1)\n ], Draggable.prototype, \"distance\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"handle\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"abort\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"helper\", void 0);\n __decorate([\n Property('default')\n ], Draggable.prototype, \"scope\", void 0);\n __decorate([\n Property('')\n ], Draggable.prototype, \"dragTarget\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"axis\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"queryPositionInfo\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableTailMode\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"skipDistanceCheck\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"preventDefault\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableAutoScroll\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableTapHold\", void 0);\n __decorate([\n Property(750)\n ], Draggable.prototype, \"tapHoldThreshold\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableScrollHandler\", void 0);\n Draggable = Draggable_1 = __decorate([\n NotifyPropertyChanges\n ], Draggable);\n return Draggable;\n}(Base));\nexport { Draggable };\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 { Base } from './base';\nimport { Browser } from './browser';\nimport { isVisible, matches } from './dom';\nimport { Property, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { EventHandler } from './event-handler';\nimport { compareElementParent } from './util';\n/**\n * Droppable Module provides support to enable droppable functionality in Dom Elements.\n * ```html\n * Droppable
\n * \n * ```\n */\nvar Droppable = /** @class */ (function (_super) {\n __extends(Droppable, _super);\n function Droppable(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.mouseOver = false;\n _this.dragData = {};\n _this.dragStopCalled = false;\n _this.bind();\n return _this;\n }\n Droppable.prototype.bind = function () {\n this.wireEvents();\n };\n Droppable.prototype.wireEvents = function () {\n EventHandler.add(this.element, Browser.touchEndEvent, this.intDrop, this);\n };\n // triggers when property changed\n // eslint-disable-next-line\n Droppable.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Droppable.prototype.getModuleName = function () {\n return 'droppable';\n };\n Droppable.prototype.intOver = function (event, element) {\n if (!this.mouseOver) {\n var drag = this.dragData[this.scope];\n this.trigger('over', { event: event, target: element, dragData: drag });\n this.mouseOver = true;\n }\n };\n Droppable.prototype.intOut = function (event, element) {\n if (this.mouseOver) {\n this.trigger('out', { evt: event, target: element });\n this.mouseOver = false;\n }\n };\n Droppable.prototype.intDrop = function (evt, element) {\n if (!this.dragStopCalled) {\n return;\n }\n else {\n this.dragStopCalled = false;\n }\n var accept = true;\n var drag = this.dragData[this.scope];\n var isDrag = drag ? (drag.helper && isVisible(drag.helper)) : false;\n var area;\n if (isDrag) {\n area = this.isDropArea(evt, drag.helper, element);\n if (this.accept) {\n accept = matches(drag.helper, this.accept);\n }\n }\n if (isDrag && this.drop && area.canDrop && accept) {\n this.trigger('drop', { event: evt, target: area.target, droppedElement: drag.helper, dragData: drag });\n }\n this.mouseOver = false;\n };\n Droppable.prototype.isDropArea = function (evt, helper, element) {\n var area = { canDrop: true, target: element || evt.target };\n var isTouch = evt.type === 'touchend';\n if (isTouch || area.target === helper) {\n helper.style.display = 'none';\n var coord = isTouch ? (evt.changedTouches[0]) : evt;\n var ele = document.elementFromPoint(coord.clientX, coord.clientY);\n area.canDrop = false;\n area.canDrop = compareElementParent(ele, this.element);\n if (area.canDrop) {\n area.target = ele;\n }\n helper.style.display = '';\n }\n return area;\n };\n Droppable.prototype.destroy = function () {\n EventHandler.remove(this.element, Browser.touchEndEvent, this.intDrop);\n _super.prototype.destroy.call(this);\n };\n __decorate([\n Property()\n ], Droppable.prototype, \"accept\", void 0);\n __decorate([\n Property('default')\n ], Droppable.prototype, \"scope\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"drop\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"over\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"out\", void 0);\n Droppable = __decorate([\n NotifyPropertyChanges\n ], Droppable);\n return Droppable;\n}(Base));\nexport { Droppable };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { Base } from './base';\nvar keyCode = {\n 'backspace': 8,\n 'tab': 9,\n 'enter': 13,\n 'shift': 16,\n 'control': 17,\n 'alt': 18,\n 'pause': 19,\n 'capslock': 20,\n 'space': 32,\n 'escape': 27,\n 'pageup': 33,\n 'pagedown': 34,\n 'end': 35,\n 'home': 36,\n 'leftarrow': 37,\n 'uparrow': 38,\n 'rightarrow': 39,\n 'downarrow': 40,\n 'insert': 45,\n 'delete': 46,\n 'f1': 112,\n 'f2': 113,\n 'f3': 114,\n 'f4': 115,\n 'f5': 116,\n 'f6': 117,\n 'f7': 118,\n 'f8': 119,\n 'f9': 120,\n 'f10': 121,\n 'f11': 122,\n 'f12': 123,\n 'semicolon': 186,\n 'plus': 187,\n 'comma': 188,\n 'minus': 189,\n 'dot': 190,\n 'forwardslash': 191,\n 'graveaccent': 192,\n 'openbracket': 219,\n 'backslash': 220,\n 'closebracket': 221,\n 'singlequote': 222\n};\n/**\n * KeyboardEvents class enables you to bind key action desired key combinations for ex., Ctrl+A, Delete, Alt+Space etc.\n * ```html\n *
;\n * \n * ```\n */\nvar KeyboardEvents = /** @class */ (function (_super) {\n __extends(KeyboardEvents, _super);\n /**\n * Initializes the KeyboardEvents\n *\n * @param {HTMLElement} element ?\n * @param {KeyboardEventsModel} options ?\n */\n function KeyboardEvents(element, options) {\n var _this = _super.call(this, options, element) || this;\n /**\n * To handle a key press event returns null\n *\n * @param {KeyboardEventArgs} e ?\n * @returns {void} ?\n */\n _this.keyPressHandler = function (e) {\n var isAltKey = e.altKey;\n var isCtrlKey = e.ctrlKey;\n var isShiftKey = e.shiftKey;\n var curkeyCode = e.which;\n var keys = Object.keys(_this.keyConfigs);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n var configCollection = _this.keyConfigs[\"\" + key].split(',');\n for (var _a = 0, configCollection_1 = configCollection; _a < configCollection_1.length; _a++) {\n var rconfig = configCollection_1[_a];\n var rKeyObj = KeyboardEvents_1.getKeyConfigData(rconfig.trim());\n if (isAltKey === rKeyObj.altKey && isCtrlKey === rKeyObj.ctrlKey &&\n isShiftKey === rKeyObj.shiftKey && curkeyCode === rKeyObj.keyCode) {\n e.action = key;\n if (_this.keyAction) {\n _this.keyAction(e);\n }\n }\n }\n }\n };\n _this.bind();\n return _this;\n }\n KeyboardEvents_1 = KeyboardEvents;\n /**\n * Unwire bound events and destroy the instance.\n *\n * @returns {void} ?\n */\n KeyboardEvents.prototype.destroy = function () {\n this.unwireEvents();\n _super.prototype.destroy.call(this);\n };\n /**\n * Function can be used to specify certain action if a property is changed\n *\n * @param {KeyboardEventsModel} newProp ?\n * @param {KeyboardEventsModel} oldProp ?\n * @returns {void} ?\n * @private\n */\n // eslint-disable-next-line\n KeyboardEvents.prototype.onPropertyChanged = function (newProp, oldProp) {\n // No code are needed\n };\n KeyboardEvents.prototype.bind = function () {\n this.wireEvents();\n };\n /**\n * To get the module name, returns 'keyboard'.\n *\n * @returns {string} ?\n * @private\n */\n KeyboardEvents.prototype.getModuleName = function () {\n return 'keyboard';\n };\n /**\n * Wiring event handlers to events\n *\n * @returns {void} ?\n * @private\n */\n KeyboardEvents.prototype.wireEvents = function () {\n this.element.addEventListener(this.eventName, this.keyPressHandler);\n };\n /**\n * Unwiring event handlers to events\n *\n * @returns {void} ?\n * @private\n */\n KeyboardEvents.prototype.unwireEvents = function () {\n this.element.removeEventListener(this.eventName, this.keyPressHandler);\n };\n /**\n * To get the key configuration data\n *\n * @param {string} config - configuration data\n * @returns {KeyData} ?\n */\n KeyboardEvents.getKeyConfigData = function (config) {\n if (config in this.configCache) {\n return this.configCache[\"\" + config];\n }\n var keys = config.toLowerCase().split('+');\n var keyData = {\n altKey: (keys.indexOf('alt') !== -1 ? true : false),\n ctrlKey: (keys.indexOf('ctrl') !== -1 ? true : false),\n shiftKey: (keys.indexOf('shift') !== -1 ? true : false),\n keyCode: null\n };\n if (keys[keys.length - 1].length > 1 && !!Number(keys[keys.length - 1])) {\n keyData.keyCode = Number(keys[keys.length - 1]);\n }\n else {\n keyData.keyCode = KeyboardEvents_1.getKeyCode(keys[keys.length - 1]);\n }\n KeyboardEvents_1.configCache[\"\" + config] = keyData;\n return keyData;\n };\n // Return the keycode value as string\n KeyboardEvents.getKeyCode = function (keyVal) {\n return keyCode[\"\" + keyVal] || keyVal.toUpperCase().charCodeAt(0);\n };\n var KeyboardEvents_1;\n KeyboardEvents.configCache = {};\n __decorate([\n Property({})\n ], KeyboardEvents.prototype, \"keyConfigs\", void 0);\n __decorate([\n Property('keyup')\n ], KeyboardEvents.prototype, \"eventName\", void 0);\n __decorate([\n Event()\n ], KeyboardEvents.prototype, \"keyAction\", void 0);\n KeyboardEvents = KeyboardEvents_1 = __decorate([\n NotifyPropertyChanges\n ], KeyboardEvents);\n return KeyboardEvents;\n}(Base));\nexport { KeyboardEvents };\n","import { extend, isNullOrUndefined } from './util';\nimport { defaultCulture } from './internationalization';\n/**\n * L10n modules provides localized text for different culture.\n * ```typescript\n * import {setCulture} from '@syncfusion/ts-base-library';\n * //load global locale object common for all components.\n * L10n.load({\n * 'fr-BE': {\n * 'button': {\n * 'check': 'vérifié'\n * }\n * }\n * });\n * //set globale default locale culture.\n * setCulture('fr-BE');\n * let instance: L10n = new L10n('button', {\n * check: 'checked'\n * });\n * //Get locale text for current property.\n * instance.getConstant('check');\n * //Change locale culture in a component.\n * instance.setLocale('en-US');\n * ```\n */\nvar L10n = /** @class */ (function () {\n /**\n * Constructor\n *\n * @param {string} controlName ?\n * @param {Object} localeStrings ?\n * @param {string} locale ?\n */\n function L10n(controlName, localeStrings, locale) {\n this.controlName = controlName;\n this.localeStrings = localeStrings;\n this.setLocale(locale || defaultCulture);\n }\n /**\n * Sets the locale text\n *\n * @param {string} locale ?\n * @returns {void} ?\n */\n L10n.prototype.setLocale = function (locale) {\n var intLocale = this.intGetControlConstant(L10n.locale, locale);\n this.currentLocale = intLocale || this.localeStrings;\n };\n /**\n * Sets the global locale for all components.\n *\n * @param {Object} localeObject - specifies the localeObject to be set as global locale.\n * @returns {void} ?\n */\n L10n.load = function (localeObject) {\n this.locale = extend(this.locale, localeObject, {}, true);\n };\n /**\n * Returns current locale text for the property based on the culture name and control name.\n *\n * @param {string} prop - specifies the property for which localize text to be returned.\n * @returns {string} ?\n */\n L10n.prototype.getConstant = function (prop) {\n // Removed conditional operator because this method does not return correct value when passing 0 as value in localization\n if (!isNullOrUndefined(this.currentLocale[\"\" + prop])) {\n return this.currentLocale[\"\" + prop];\n }\n else {\n return this.localeStrings[\"\" + prop] || '';\n }\n };\n /**\n * Returns the control constant object for current object and the locale specified.\n *\n * @param {Object} curObject ?\n * @param {string} locale ?\n * @returns {Object} ?\n */\n L10n.prototype.intGetControlConstant = function (curObject, locale) {\n if ((curObject)[\"\" + locale]) {\n return (curObject)[\"\" + locale][this.controlName];\n }\n return null;\n };\n L10n.locale = {};\n return L10n;\n}());\nexport { L10n };\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 { extend } from './util';\nimport { Property, Complex, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { Browser } from './browser';\nimport { Base } from './base';\nimport { ChildProperty } from './child-property';\nimport { EventHandler } from './event-handler';\n/**\n * SwipeSettings is a framework module that provides support to handle swipe event like swipe up, swipe right, etc..,\n */\nvar SwipeSettings = /** @class */ (function (_super) {\n __extends(SwipeSettings, _super);\n function SwipeSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(50)\n ], SwipeSettings.prototype, \"swipeThresholdDistance\", void 0);\n return SwipeSettings;\n}(ChildProperty));\nexport { SwipeSettings };\nvar swipeRegex = /(Up|Down)/;\n/**\n * Touch class provides support to handle the touch event like tap, double tap, tap hold, etc..,\n * ```typescript\n * let node: HTMLElement;\n * let touchObj: Touch = new Touch({\n * element: node,\n * tap: function (e) {\n * // tap handler function code\n * }\n * tapHold: function (e) {\n * // tap hold handler function code\n * }\n * scroll: function (e) {\n * // scroll handler function code\n * }\n * swipe: function (e) {\n * // swipe handler function code\n * }\n * });\n * ```\n */\nvar Touch = /** @class */ (function (_super) {\n __extends(Touch, _super);\n /* End-Properties */\n function Touch(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.touchAction = true;\n _this.tapCount = 0;\n /**\n *\n * @param {MouseEventArgs | TouchEventArgs} evt ?\n * @returns {void} ?\n */\n _this.startEvent = function (evt) {\n if (_this.touchAction === true) {\n var point = _this.updateChangeTouches(evt);\n if (evt.changedTouches !== undefined) {\n _this.touchAction = false;\n }\n _this.isTouchMoved = false;\n _this.movedDirection = '';\n _this.startPoint = _this.lastMovedPoint = { clientX: point.clientX, clientY: point.clientY };\n _this.startEventData = point;\n _this.hScrollLocked = _this.vScrollLocked = false;\n _this.tStampStart = Date.now();\n _this.timeOutTapHold = setTimeout(function () { _this.tapHoldEvent(evt); }, _this.tapHoldThreshold);\n EventHandler.add(_this.element, Browser.touchMoveEvent, _this.moveEvent, _this);\n EventHandler.add(_this.element, Browser.touchEndEvent, _this.endEvent, _this);\n EventHandler.add(_this.element, Browser.touchCancelEvent, _this.cancelEvent, _this);\n }\n };\n /**\n *\n * @param {MouseEventArgs | TouchEventArgs} evt ?\n * @returns {void} ?\n */\n _this.moveEvent = function (evt) {\n var point = _this.updateChangeTouches(evt);\n _this.movedPoint = point;\n _this.isTouchMoved = !(point.clientX === _this.startPoint.clientX && point.clientY === _this.startPoint.clientY);\n var eScrollArgs = {};\n if (_this.isTouchMoved) {\n clearTimeout(_this.timeOutTapHold);\n _this.calcScrollPoints(evt);\n var scrollArg = {\n startEvents: _this.startEventData,\n originalEvent: evt, startX: _this.startPoint.clientX,\n startY: _this.startPoint.clientY, distanceX: _this.distanceX,\n distanceY: _this.distanceY, scrollDirection: _this.scrollDirection,\n velocity: _this.getVelocity(point)\n };\n eScrollArgs = extend(eScrollArgs, {}, scrollArg);\n _this.trigger('scroll', eScrollArgs);\n _this.lastMovedPoint = { clientX: point.clientX, clientY: point.clientY };\n }\n };\n /**\n *\n * @param {MouseEventArgs | TouchEventArgs} evt ?\n * @returns {void} ?\n */\n _this.cancelEvent = function (evt) {\n clearTimeout(_this.timeOutTapHold);\n clearTimeout(_this.timeOutTap);\n _this.tapCount = 0;\n _this.swipeFn(evt);\n EventHandler.remove(_this.element, Browser.touchCancelEvent, _this.cancelEvent);\n };\n /**\n *\n * @param {MouseEventArgs | TouchEventArgs} evt ?\n * @returns {void} ?\n */\n _this.endEvent = function (evt) {\n _this.swipeFn(evt);\n if (!_this.isTouchMoved) {\n if (typeof _this.tap === 'function') {\n _this.trigger('tap', { originalEvent: evt, tapCount: ++_this.tapCount });\n _this.timeOutTap = setTimeout(function () {\n _this.tapCount = 0;\n }, _this.tapThreshold);\n }\n }\n _this.modeclear();\n };\n /**\n *\n * @param {MouseEventArgs | TouchEventArgs} evt ?\n * @returns {void} ?\n */\n _this.swipeFn = function (evt) {\n clearTimeout(_this.timeOutTapHold);\n clearTimeout(_this.timeOutTap);\n var point = _this.updateChangeTouches(evt);\n var diffX = point.clientX - _this.startPoint.clientX;\n var diffY = point.clientY - _this.startPoint.clientY;\n diffX = Math.floor(diffX < 0 ? -1 * diffX : diffX);\n diffY = Math.floor(diffY < 0 ? -1 * diffY : diffX);\n _this.isTouchMoved = diffX > 1 || diffY > 1;\n var isFirefox = (/Firefox/).test(Browser.userAgent);\n if (isFirefox && point.clientX === 0 && point.clientY === 0 && evt.type === 'mouseup') {\n _this.isTouchMoved = false;\n }\n _this.endPoint = point;\n _this.calcPoints(evt);\n var swipeArgs = {\n originalEvent: evt,\n startEvents: _this.startEventData,\n startX: _this.startPoint.clientX,\n startY: _this.startPoint.clientY,\n distanceX: _this.distanceX, distanceY: _this.distanceY, swipeDirection: _this.movedDirection,\n velocity: _this.getVelocity(point)\n };\n if (_this.isTouchMoved) {\n var eSwipeArgs = void 0;\n var tDistance = _this.swipeSettings.swipeThresholdDistance;\n // eslint-disable-next-line\n eSwipeArgs = extend(eSwipeArgs, _this.defaultArgs, swipeArgs);\n var canTrigger = false;\n var ele = _this.element;\n var scrollBool = _this.isScrollable(ele);\n var moved = swipeRegex.test(_this.movedDirection);\n if ((tDistance < _this.distanceX && !moved) || (tDistance < _this.distanceY && moved)) {\n if (!scrollBool) {\n canTrigger = true;\n }\n else {\n canTrigger = _this.checkSwipe(ele, moved);\n }\n }\n if (canTrigger) {\n _this.trigger('swipe', eSwipeArgs);\n }\n }\n _this.modeclear();\n };\n _this.modeclear = function () {\n _this.modeClear = setTimeout(function () {\n _this.touchAction = true;\n }, (typeof _this.tap !== 'function' ? 0 : 20));\n _this.lastTapTime = new Date().getTime();\n EventHandler.remove(_this.element, Browser.touchMoveEvent, _this.moveEvent);\n EventHandler.remove(_this.element, Browser.touchEndEvent, _this.endEvent);\n EventHandler.remove(_this.element, Browser.touchCancelEvent, _this.cancelEvent);\n };\n _this.bind();\n return _this;\n }\n // triggers when property changed\n /**\n *\n * @private\n * @param {TouchModel} newProp ?\n * @param {TouchModel} oldProp ?\n * @returns {void} ?\n */\n // eslint-disable-next-line\n Touch.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Touch.prototype.bind = function () {\n this.wireEvents();\n if (Browser.isIE) {\n this.element.classList.add('e-block-touch');\n }\n };\n /**\n * To destroy the touch instance.\n *\n * @returns {void}\n */\n Touch.prototype.destroy = function () {\n this.unwireEvents();\n _super.prototype.destroy.call(this);\n };\n // Need to changes the event binding once we updated the event handler.\n Touch.prototype.wireEvents = function () {\n EventHandler.add(this.element, Browser.touchStartEvent, this.startEvent, this);\n };\n Touch.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, Browser.touchStartEvent, this.startEvent);\n };\n /**\n * Returns module name as touch\n *\n * @returns {string} ?\n * @private\n */\n Touch.prototype.getModuleName = function () {\n return 'touch';\n };\n /**\n * Returns if the HTML element is Scrollable.\n *\n * @param {HTMLElement} element - HTML Element to check if Scrollable.\n * @returns {boolean} ?\n */\n Touch.prototype.isScrollable = function (element) {\n var eleStyle = getComputedStyle(element);\n var style = eleStyle.overflow + eleStyle.overflowX + eleStyle.overflowY;\n if ((/(auto|scroll)/).test(style)) {\n return true;\n }\n return false;\n };\n /**\n *\n * @param {MouseEventArgs | TouchEventArgs} evt ?\n * @returns {void} ?\n */\n Touch.prototype.tapHoldEvent = function (evt) {\n this.tapCount = 0;\n this.touchAction = true;\n var eTapArgs;\n EventHandler.remove(this.element, Browser.touchMoveEvent, this.moveEvent);\n EventHandler.remove(this.element, Browser.touchEndEvent, this.endEvent);\n // eslint-disable-next-line\n eTapArgs = { originalEvent: evt };\n this.trigger('tapHold', eTapArgs);\n EventHandler.remove(this.element, Browser.touchCancelEvent, this.cancelEvent);\n };\n Touch.prototype.calcPoints = function (evt) {\n var point = this.updateChangeTouches(evt);\n this.defaultArgs = { originalEvent: evt };\n this.distanceX = Math.abs((Math.abs(point.clientX) - Math.abs(this.startPoint.clientX)));\n this.distanceY = Math.abs((Math.abs(point.clientY) - Math.abs(this.startPoint.clientY)));\n if (this.distanceX > this.distanceY) {\n this.movedDirection = (point.clientX > this.startPoint.clientX) ? 'Right' : 'Left';\n }\n else {\n this.movedDirection = (point.clientY < this.startPoint.clientY) ? 'Up' : 'Down';\n }\n };\n Touch.prototype.calcScrollPoints = function (evt) {\n var point = this.updateChangeTouches(evt);\n this.defaultArgs = { originalEvent: evt };\n this.distanceX = Math.abs((Math.abs(point.clientX) - Math.abs(this.lastMovedPoint.clientX)));\n this.distanceY = Math.abs((Math.abs(point.clientY) - Math.abs(this.lastMovedPoint.clientY)));\n if ((this.distanceX > this.distanceY || this.hScrollLocked === true) && this.vScrollLocked === false) {\n this.scrollDirection = (point.clientX > this.lastMovedPoint.clientX) ? 'Right' : 'Left';\n this.hScrollLocked = true;\n }\n else {\n this.scrollDirection = (point.clientY < this.lastMovedPoint.clientY) ? 'Up' : 'Down';\n this.vScrollLocked = true;\n }\n };\n Touch.prototype.getVelocity = function (pnt) {\n var newX = pnt.clientX;\n var newY = pnt.clientY;\n var newT = Date.now();\n var xDist = newX - this.startPoint.clientX;\n var yDist = newY - this.startPoint.clientX;\n var interval = newT - this.tStampStart;\n return Math.sqrt(xDist * xDist + yDist * yDist) / interval;\n };\n // eslint-disable-next-line\n Touch.prototype.checkSwipe = function (ele, flag) {\n var keys = ['scroll', 'offset'];\n var temp = flag ? ['Height', 'Top'] : ['Width', 'Left'];\n if ((ele[keys[0] + temp[0]] <= ele[keys[1] + temp[0]])) {\n return true;\n }\n return (ele[keys[0] + temp[1]] === 0) ||\n (ele[keys[1] + temp[0]] + ele[keys[0] + temp[1]] >= ele[keys[0] + temp[0]]);\n };\n Touch.prototype.updateChangeTouches = function (evt) {\n var point = evt.changedTouches && evt.changedTouches.length !== 0 ? evt.changedTouches[0] : evt;\n return point;\n };\n __decorate([\n Event()\n ], Touch.prototype, \"tap\", void 0);\n __decorate([\n Event()\n ], Touch.prototype, \"tapHold\", void 0);\n __decorate([\n Event()\n ], Touch.prototype, \"swipe\", void 0);\n __decorate([\n Event()\n ], Touch.prototype, \"scroll\", void 0);\n __decorate([\n Property(350)\n ], Touch.prototype, \"tapThreshold\", void 0);\n __decorate([\n Property(750)\n ], Touch.prototype, \"tapHoldThreshold\", void 0);\n __decorate([\n Complex({}, SwipeSettings)\n ], Touch.prototype, \"swipeSettings\", void 0);\n Touch = __decorate([\n NotifyPropertyChanges\n ], Touch);\n return Touch;\n}(Base));\nexport { Touch };\n","/**\n * Template Engine\n */\nvar LINES = new RegExp('\\\\n|\\\\r|\\\\s\\\\s+', 'g');\nvar QUOTES = new RegExp(/'|\"/g);\nvar IF_STMT = new RegExp('if ?\\\\(');\nvar ELSEIF_STMT = new RegExp('else if ?\\\\(');\nvar ELSE_STMT = new RegExp('else');\nvar FOR_STMT = new RegExp('for ?\\\\(');\nvar IF_OR_FOR = new RegExp('(/if|/for)');\nvar CALL_FUNCTION = new RegExp('\\\\((.*)\\\\)', '');\nvar NOT_NUMBER = new RegExp('^[0-9]+$', 'g');\nvar WORD = new RegExp('[\\\\w\"\\'.\\\\s+]+', 'g');\nvar DBL_QUOTED_STR = new RegExp('\"(.*?)\"', 'g');\nvar WORDIF = new RegExp('[\\\\w\"\\'@#$.\\\\s-+]+', 'g');\nvar exp = new RegExp('\\\\${([^}]*)}', 'g');\n// let cachedTemplate: Object = {};\nvar ARR_OBJ = /^\\..*/gm;\nvar SINGLE_SLASH = /\\\\/gi;\nvar DOUBLE_SLASH = /\\\\\\\\/gi;\nvar WORDFUNC = new RegExp('[\\\\w\"\\'@#$.\\\\s+]+', 'g');\nvar WINDOWFUNC = /\\window\\./gm;\n/**\n * The function to set regular expression for template expression string.\n *\n * @param {RegExp} value - Value expression.\n * @returns {RegExp} ?\n * @private\n */\nexport function expression(value) {\n if (value) {\n exp = value;\n }\n return exp;\n}\n// /**\n// * To render the template string from the given data.\n// * @param {string} template - String Template.\n// * @param {Object[]|JSON} data - DataSource for the template.\n// * @param {Object} helper? - custom helper object.\n// */\n// export function template(template: string, data: JSON, helper?: Object): string {\n// let hash: string = hashCode(template);\n// let tmpl: Function;\n// if (!cachedTemplate[hash]) {\n// tmpl = cachedTemplate[hash] = compile(template, helper);\n// } else {\n// tmpl = cachedTemplate[hash];\n// }\n// return tmpl(data);\n// }\n/**\n * Compile the template string into template function.\n *\n * @param {string} template - The template string which is going to convert.\n * @param {Object} helper - Helper functions as an object.\n * @param {boolean} ignorePrefix ?\n * @returns {string} ?\n * @private\n */\nexport function compile(template, helper, ignorePrefix) {\n var argName = 'data';\n var evalExpResult = evalExp(template, argName, helper, ignorePrefix);\n // eslint-disable-next-line\n var condtion = \"var valueRegEx = (/value=\\\\'([A-Za-z0-9 _]*)((.)([\\\\w)(!-;?-\\u25A0\\\\s]+)['])/g);\\n var hrefRegex = (/(?:href)([\\\\s='\\\"./]+)([\\\\w-./?=&\\\\\\\\#\\\"]+)((.)([\\\\w)(!-;/?-\\u25A0\\\\s]+)['])/g);\\n if(str.match(valueRegEx)){\\n var check = str.match(valueRegEx);\\n var str1 = str;\\n for (var i=0; i < check.length; i++) {\\n var check1 = str.match(valueRegEx)[i].split('value=')[1];\\n var change = check1.match(/^'/) !== null ? check1.replace(/^'/, '\\\"') : check1;\\n change =change.match(/.$/)[0] === '\\\\'' ? change.replace(/.$/,'\\\"') : change;\\n str1 = str1.replace(check1, change);\\n }\\n str = str.replace(str, str1);\\n }\\n else if (str.match(/(?:href='')/) === null) {\\n if(str.match(hrefRegex)) {\\n var check = str.match(hrefRegex);\\n var str1 = str;\\n for (var i=0; i < check.length; i++) {\\n var check1 = str.match(hrefRegex)[i].split('href=')[1];\\n if (check1) {\\n var change = check1.match(/^'/) !== null ? check1.replace(/^'/, '\\\"') : check1;\\n change =change.match(/.$/)[0] === '\\\\'' ? change.replace(/.$/,'\\\"') : change;\\n str1 = str1.replace(check1, change);\\n }\\n }\\n str = str.replace(str, str1);\\n }\\n }\\n \";\n var fnCode = 'var str=\\\"' + evalExpResult + '\\\";' + condtion + ' return str;';\n var fn = new Function(argName, fnCode);\n return fn.bind(helper);\n}\n/** function used to evaluate the function expression\n *\n * @param {string} str ?\n * @param {string} nameSpace ?\n * @param {Object} helper ?\n * @param {boolean} ignorePrefix ?\n * @returns {string} ?\n */\nfunction evalExp(str, nameSpace, helper, ignorePrefix) {\n var varCOunt = 0;\n /**\n * Variable containing Local Keys\n */\n var localKeys = [];\n var isClass = str.match(/class=\"([^\"]+|)\\s{2}/g);\n var singleSpace = '';\n if (isClass) {\n isClass.forEach(function (value) {\n singleSpace = value.replace(/\\s\\s+/g, ' ');\n str = str.replace(value, singleSpace);\n });\n }\n return str.replace(LINES, '').replace(DBL_QUOTED_STR, '\\'$1\\'').replace(exp, \n // eslint-disable-next-line\n function (match, cnt, offset, matchStr) {\n var SPECIAL_CHAR = /@|#|\\$/gm;\n var matches = cnt.match(CALL_FUNCTION);\n // matches to detect any function calls\n if (matches) {\n var rlStr = matches[1];\n if (ELSEIF_STMT.test(cnt)) {\n //handling else-if condition\n cnt = '\";} ' + cnt.replace(matches[1], rlStr.replace(WORD, function (str) {\n str = str.trim();\n return addNameSpace(str, !(QUOTES.test(str)) && (localKeys.indexOf(str) === -1), nameSpace, localKeys, ignorePrefix);\n })) + '{ \\n str = str + \"';\n }\n else if (IF_STMT.test(cnt)) {\n //handling if condition\n cnt = '\"; ' + cnt.replace(matches[1], rlStr.replace(WORDIF, function (strs) {\n return HandleSpecialCharArrObj(strs, nameSpace, localKeys, ignorePrefix);\n })) + '{ \\n str = str + \"';\n }\n else if (FOR_STMT.test(cnt)) {\n //handling for condition\n var rlStr_1 = matches[1].split(' of ');\n // replace for each into actual JavaScript\n // eslint-disable-next-line\n cnt = '\"; ' + cnt.replace(matches[1], function (mtc) {\n localKeys.push(rlStr_1[0]);\n localKeys.push(rlStr_1[0] + 'Index');\n varCOunt = varCOunt + 1;\n // tslint:disable-next-line\n return 'var i' + varCOunt + '=0; i' + varCOunt + ' < ' + addNameSpace(rlStr_1[1], true, nameSpace, localKeys, ignorePrefix) + '.length; i' + varCOunt + '++';\n }) + '{ \\n ' + rlStr_1[0] + '= ' + addNameSpace(rlStr_1[1], true, nameSpace, localKeys, ignorePrefix)\n + '[i' + varCOunt + ']; \\n var ' + rlStr_1[0] + 'Index=i' + varCOunt + '; \\n str = str + \"';\n }\n else {\n //helper function handling\n var fnStr = cnt.split('(');\n // eslint-disable-next-line\n var fNameSpace = (helper && helper.hasOwnProperty(fnStr[0]) ? 'this.' : 'global');\n fNameSpace = (/\\./.test(fnStr[0]) ? '' : fNameSpace);\n var ftArray = matches[1].split(',');\n if (matches[1].length !== 0 && !(/data/).test(ftArray[0]) && !(/window./).test(ftArray[0])) {\n matches[1] = (fNameSpace === 'global' ? nameSpace + '.' + matches[1] : matches[1]);\n }\n var splRegexp = /@|\\$|#/gm;\n var arrObj = /\\]\\./gm;\n if (WINDOWFUNC.test(cnt) && arrObj.test(cnt) || splRegexp.test(cnt)) {\n var splArrRegexp = /@|\\$|#|\\]\\./gm;\n if (splArrRegexp.test(cnt)) {\n // tslint:disable-next-line\n cnt = '\"+ ' + (fNameSpace === 'global' ? '' : fNameSpace) + cnt.replace(matches[1], rlStr.replace(WORDFUNC, function (strs) {\n return HandleSpecialCharArrObj(strs, nameSpace, localKeys, ignorePrefix);\n })) + '+ \"';\n }\n }\n else {\n cnt = '\" + ' + (fNameSpace === 'global' ? '' : fNameSpace) +\n cnt.replace(rlStr, addNameSpace(matches[1].replace(/,( |)data.|,/gi, ',' + nameSpace + '.').replace(/,( |)data.window/gi, ',window'), (fNameSpace === 'global' ? false : true), nameSpace, localKeys, ignorePrefix)) +\n '+\"';\n }\n }\n }\n else if (ELSE_STMT.test(cnt)) {\n // handling else condition\n cnt = '\"; ' + cnt.replace(ELSE_STMT, '} else { \\n str = str + \"');\n // eslint-disable-next-line\n }\n else if (!!cnt.match(IF_OR_FOR)) {\n // close condition\n cnt = cnt.replace(IF_OR_FOR, '\"; \\n } \\n str = str + \"');\n }\n else if (SPECIAL_CHAR.test(cnt)) {\n // template string with double slash with special character\n if (cnt.match(SINGLE_SLASH)) {\n cnt = SlashReplace(cnt);\n }\n cnt = '\"+' + NameSpaceForspecialChar(cnt, (localKeys.indexOf(cnt) === -1), nameSpace, localKeys) + '\"]+\"';\n }\n else {\n // template string with double slash\n if (cnt.match(SINGLE_SLASH)) {\n cnt = SlashReplace(cnt);\n cnt = '\"+' + NameSpaceForspecialChar(cnt, (localKeys.indexOf(cnt) === -1), nameSpace, localKeys) + '\"]+\"';\n }\n else {\n // evaluate normal expression\n cnt = cnt !== '' ? '\"+' + addNameSpace(cnt.replace(/,/gi, '+' + nameSpace + '.'), (localKeys.indexOf(cnt) === -1), nameSpace, localKeys, ignorePrefix) + '+\"' : ' ';\n }\n }\n return cnt;\n });\n}\n/**\n *\n * @param {string} str ?\n * @param {boolean} addNS ?\n * @param {string} nameSpace ?\n * @param {string[]} ignoreList ?\n * @param {boolean} ignorePrefix ?\n * @returns {string} ?\n */\nfunction addNameSpace(str, addNS, nameSpace, ignoreList, ignorePrefix) {\n return ((addNS && !(NOT_NUMBER.test(str)) && ignoreList.indexOf(str.split('.')[0]) === -1 && !ignorePrefix) ? nameSpace + '.' + str : str);\n}\n/**\n *\n * @param {string} str ?\n * @param {boolean} addNS ?\n * @param {string} nameSpace ?\n * @param {string[]} ignoreList ?\n * @returns {string} ?\n */\nfunction NameSpaceArrObj(str, addNS, nameSpace, ignoreList) {\n var arrObjReg = /^\\..*/gm;\n return ((addNS && !(NOT_NUMBER.test(str)) &&\n ignoreList.indexOf(str.split('.')[0]) === -1 && !(arrObjReg.test(str))) ? nameSpace + '.' + str : str);\n}\n// // Create hashCode for template string to storeCached function\n// function hashCode(str: string): string {\n// return str.split('').reduce((a: number, b: string) => { a = ((a << 5) - a) + b.charCodeAt(0); return a & a; }, 0).toString();\n// }\n/**\n *\n * @param {string} str ?\n * @param {boolean} addNS ?\n * @param {string} nameSpace ?\n * @param {string[]} ignoreList ?\n * @returns {string} ?\n */\nfunction NameSpaceForspecialChar(str, addNS, nameSpace, ignoreList) {\n return ((addNS && !(NOT_NUMBER.test(str)) && ignoreList.indexOf(str.split('.')[0]) === -1) ? nameSpace + '[\"' + str : str);\n}\n// eslint-disable-next-line\nfunction SlashReplace(tempStr) {\n var double = '\\\\\\\\';\n if (tempStr.match(DOUBLE_SLASH)) {\n // eslint-disable-next-line\n tempStr = tempStr;\n }\n else {\n tempStr = tempStr.replace(SINGLE_SLASH, double);\n }\n return tempStr;\n}\n/**\n *\n * @param {string} str ?\n * @param {string} nameSpaceNew ?\n * @param {string[]} keys ?\n * @param {boolean} ignorePrefix ?\n * @returns {string} ?\n */\nfunction HandleSpecialCharArrObj(str, nameSpaceNew, keys, ignorePrefix) {\n str = str.trim();\n var windowFunc = /\\window\\./gm;\n if (!windowFunc.test(str)) {\n var quotes = /'|\"/gm;\n var splRegexp = /@|\\$|#/gm;\n if (splRegexp.test(str)) {\n str = NameSpaceForspecialChar(str, (keys.indexOf(str) === -1), nameSpaceNew, keys) + '\"]';\n }\n if (ARR_OBJ.test(str)) {\n return NameSpaceArrObj(str, !(quotes.test(str)) && (keys.indexOf(str) === -1), nameSpaceNew, keys);\n }\n else {\n return addNameSpace(str, !(quotes.test(str)) && (keys.indexOf(str) === -1), nameSpaceNew, keys, ignorePrefix);\n }\n }\n else {\n return str;\n }\n}\n","/**\n * Template Engine Bridge\n */\nimport { compile as render } from './template';\nimport { createElement } from './dom';\nimport { isNullOrUndefined, isBlazor } from './util';\nvar HAS_ROW = /^[\\n\\r.]+ 0) {\n elements.forEach(function (element) {\n detach(element);\n });\n }\n else {\n return;\n }\n };\n SanitizeHtmlHelper.removeJsEvents = function () {\n var elements = this.wrapElement.querySelectorAll('[' + jsEvents.join('],[') + ']');\n if (elements.length > 0) {\n elements.forEach(function (element) {\n jsEvents.forEach(function (attr) {\n if (element.hasAttribute(attr)) {\n element.removeAttribute(attr);\n }\n });\n });\n }\n else {\n return;\n }\n };\n SanitizeHtmlHelper.removeXssAttrs = function () {\n var _this = this;\n // eslint-disable-next-line\n this.removeAttrs.forEach(function (item, index) {\n var elements = _this.wrapElement.querySelectorAll(item.selector);\n if (elements.length > 0) {\n elements.forEach(function (element) {\n element.removeAttribute(item.attribute);\n });\n }\n });\n };\n return SanitizeHtmlHelper;\n}());\nexport { SanitizeHtmlHelper };\n","/**\n * Base modules\n */\nexport * from './intl/intl-base';\nexport * from './ajax';\nexport * from './animation';\nexport * from './base';\nexport * from './browser';\nexport * from './component';\nexport * from './child-property';\nexport * from './draggable';\nexport * from './droppable';\nexport * from './event-handler';\nexport * from './internationalization';\nexport * from './keyboard';\nexport * from './l10n';\nexport * from './module-loader';\nexport * from './notify-property-change';\nexport * from './touch';\nexport * from './hijri-parser';\nexport * from './template-engine';\nexport * from './util';\nexport * from './dom';\nexport * from './observer';\nexport * from './sanitize-helper';\nexport * from './validate-lic';\n","/**\n * index\n */\nexport * from './src/index';\n","/**\n * Position library\n */\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nvar elementRect;\nvar popupRect;\nvar element;\nvar parentDocument;\nvar fixedParent = false;\n/**\n *\n * @param {HTMLElement} anchor - specifies the element\n * @param {HTMLElement} element - specifies the element\n * @returns {OffsetPosition} - returns the value\n */\nexport function calculateRelativeBasedPosition(anchor, element) {\n var fixedElement = false;\n var anchorPos = { left: 0, top: 0 };\n var tempAnchor = anchor;\n if (!anchor || !element) {\n return anchorPos;\n }\n if (isNullOrUndefined(element.offsetParent) && element.style.position === 'fixed') {\n fixedElement = true;\n }\n while ((element.offsetParent || fixedElement) && anchor && element.offsetParent !== anchor) {\n anchorPos.left += anchor.offsetLeft;\n anchorPos.top += anchor.offsetTop;\n anchor = anchor.offsetParent;\n }\n anchor = tempAnchor;\n while ((element.offsetParent || fixedElement) && anchor && element.offsetParent !== anchor) {\n anchorPos.left -= anchor.scrollLeft;\n anchorPos.top -= anchor.scrollTop;\n anchor = anchor.parentElement;\n }\n return anchorPos;\n}\n/**\n *\n * @param {Element} currentElement - specifies the element\n * @param {string} positionX - specifies the position\n * @param {string} positionY - specifies the position\n * @param {boolean} parentElement - specifies the boolean\n * @param {ClientRect} targetValues - specifies the client\n * @returns {OffsetPosition} - returns the position\n */\nexport function calculatePosition(currentElement, positionX, positionY, parentElement, targetValues) {\n popupRect = undefined;\n popupRect = targetValues;\n fixedParent = parentElement ? true : false;\n if (!currentElement) {\n return { left: 0, top: 0 };\n }\n if (!positionX) {\n positionX = 'left';\n }\n if (!positionY) {\n positionY = 'top';\n }\n parentDocument = currentElement.ownerDocument;\n element = currentElement;\n var pos = { left: 0, top: 0 };\n return updatePosition(positionX.toLowerCase(), positionY.toLowerCase(), pos);\n}\n/**\n *\n * @param {number} value - specifies the number\n * @param {OffsetPosition} pos - specifies the position\n * @returns {void}\n */\nfunction setPosx(value, pos) {\n pos.left = value;\n}\n/**\n *\n * @param {number} value - specifies the number\n * @param {OffsetPosition} pos - specifies the position\n * @returns {void}\n */\nfunction setPosy(value, pos) {\n pos.top = value;\n}\n/**\n *\n * @param {string} posX - specifies the position\n * @param {string} posY - specifies the position\n * @param {OffsetPosition} pos - specifies the position\n * @returns {OffsetPosition} - returns the postion\n */\nfunction updatePosition(posX, posY, pos) {\n elementRect = element.getBoundingClientRect();\n switch (posY + posX) {\n case 'topcenter':\n setPosx(getElementHCenter(), pos);\n setPosy(getElementTop(), pos);\n break;\n case 'topright':\n setPosx(getElementRight(), pos);\n setPosy(getElementTop(), pos);\n break;\n case 'centercenter':\n setPosx(getElementHCenter(), pos);\n setPosy(getElementVCenter(), pos);\n break;\n case 'centerright':\n setPosx(getElementRight(), pos);\n setPosy(getElementVCenter(), pos);\n break;\n case 'centerleft':\n setPosx(getElementLeft(), pos);\n setPosy(getElementVCenter(), pos);\n break;\n case 'bottomcenter':\n setPosx(getElementHCenter(), pos);\n setPosy(getElementBottom(), pos);\n break;\n case 'bottomright':\n setPosx(getElementRight(), pos);\n setPosy(getElementBottom(), pos);\n break;\n case 'bottomleft':\n setPosx(getElementLeft(), pos);\n setPosy(getElementBottom(), pos);\n break;\n default:\n case 'topleft':\n setPosx(getElementLeft(), pos);\n setPosy(getElementTop(), pos);\n break;\n }\n element = null;\n return pos;\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getBodyScrollTop() {\n return parentDocument.documentElement.scrollTop || parentDocument.body.scrollTop;\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getBodyScrollLeft() {\n return parentDocument.documentElement.scrollLeft || parentDocument.body.scrollLeft;\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getElementBottom() {\n return fixedParent ? elementRect.bottom : elementRect.bottom + getBodyScrollTop();\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getElementVCenter() {\n return getElementTop() + (elementRect.height / 2);\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getElementTop() {\n return fixedParent ? elementRect.top : elementRect.top + getBodyScrollTop();\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getElementLeft() {\n return elementRect.left + getBodyScrollLeft();\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getElementRight() {\n var popupWidth = (element && element.classList.contains('e-date-range-wrapper')) ? (popupRect ? popupRect.width : 0) :\n (popupRect && (elementRect.width >= popupRect.width) ? popupRect.width : 0);\n return elementRect.right + getBodyScrollLeft() - popupWidth;\n}\n/**\n * @returns {number} - specifies the number value\n */\nfunction getElementHCenter() {\n return getElementLeft() + (elementRect.width / 2);\n}\n","/**\n * Collision module.\n */\nimport { calculatePosition } from './position';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nvar parentDocument;\nvar targetContainer;\n/**\n *\n * @param {HTMLElement} element - specifies the element\n * @param {HTMLElement} viewPortElement - specifies the element\n * @param {CollisionCoordinates} axis - specifies the collision coordinates\n * @param {OffsetPosition} position - specifies the position\n * @returns {void}\n */\nexport function fit(element, viewPortElement, axis, position) {\n if (viewPortElement === void 0) { viewPortElement = null; }\n if (axis === void 0) { axis = { X: false, Y: false }; }\n if (!axis.Y && !axis.X) {\n return { left: 0, top: 0 };\n }\n var elemData = element.getBoundingClientRect();\n targetContainer = viewPortElement;\n parentDocument = element.ownerDocument;\n if (!position) {\n position = calculatePosition(element, 'left', 'top');\n }\n if (axis.X) {\n var containerWidth = targetContainer ? getTargetContainerWidth() : getViewPortWidth();\n var containerLeft = ContainerLeft();\n var containerRight = ContainerRight();\n var overLeft = containerLeft - position.left;\n var overRight = position.left + elemData.width - containerRight;\n if (elemData.width > containerWidth) {\n if (overLeft > 0 && overRight <= 0) {\n position.left = containerRight - elemData.width;\n }\n else if (overRight > 0 && overLeft <= 0) {\n position.left = containerLeft;\n }\n else {\n position.left = overLeft > overRight ? (containerRight - elemData.width) : containerLeft;\n }\n }\n else if (overLeft > 0) {\n position.left += overLeft;\n }\n else if (overRight > 0) {\n position.left -= overRight;\n }\n }\n if (axis.Y) {\n var containerHeight = targetContainer ? getTargetContainerHeight() : getViewPortHeight();\n var containerTop = ContainerTop();\n var containerBottom = ContainerBottom();\n var overTop = containerTop - position.top;\n var overBottom = position.top + elemData.height - containerBottom;\n if (elemData.height > containerHeight) {\n if (overTop > 0 && overBottom <= 0) {\n position.top = containerBottom - elemData.height;\n }\n else if (overBottom > 0 && overTop <= 0) {\n position.top = containerTop;\n }\n else {\n position.top = overTop > overBottom ? (containerBottom - elemData.height) : containerTop;\n }\n }\n else if (overTop > 0) {\n position.top += overTop;\n }\n else if (overBottom > 0) {\n position.top -= overBottom;\n }\n }\n return position;\n}\n/**\n *\n * @param {HTMLElement} element - specifies the html element\n * @param {HTMLElement} viewPortElement - specifies the html element\n * @param {number} x - specifies the number\n * @param {number} y - specifies the number\n * @returns {string[]} - returns the string value\n */\nexport function isCollide(element, viewPortElement, x, y) {\n if (viewPortElement === void 0) { viewPortElement = null; }\n var elemOffset = calculatePosition(element, 'left', 'top');\n if (x) {\n elemOffset.left = x;\n }\n if (y) {\n elemOffset.top = y;\n }\n var data = [];\n targetContainer = viewPortElement;\n parentDocument = element.ownerDocument;\n var elementRect = element.getBoundingClientRect();\n var top = elemOffset.top;\n var left = elemOffset.left;\n var right = elemOffset.left + elementRect.width;\n var bottom = elemOffset.top + elementRect.height;\n // eslint-disable-next-line\n var topData = '', leftData = '';\n var yAxis = topCollideCheck(top, bottom);\n var xAxis = leftCollideCheck(left, right);\n if (yAxis.topSide) {\n data.push('top');\n }\n if (xAxis.rightSide) {\n data.push('right');\n }\n if (xAxis.leftSide) {\n data.push('left');\n }\n if (yAxis.bottomSide) {\n data.push('bottom');\n }\n return data;\n}\n/**\n *\n * @param {HTMLElement} element - specifies the element\n * @param {HTMLElement} target - specifies the element\n * @param {number} offsetX - specifies the number\n * @param {number} offsetY - specifies the number\n * @param {string} positionX - specifies the string value\n * @param {string} positionY - specifies the string value\n * @param {HTMLElement} viewPortElement - specifies the element\n * @param {CollisionCoordinates} axis - specifies the collision axis\n * @param {boolean} fixedParent - specifies the boolean\n * @returns {void}\n */\nexport function flip(element, target, offsetX, offsetY, positionX, positionY, viewPortElement, \n/* eslint-disable */\naxis, fixedParent) {\n if (viewPortElement === void 0) { viewPortElement = null; }\n if (axis === void 0) { axis = { X: true, Y: true }; }\n if (!target || !element || !positionX || !positionY || (!axis.X && !axis.Y)) {\n return;\n }\n var tEdge = { TL: null,\n TR: null,\n BL: null,\n BR: null\n }, eEdge = {\n TL: null,\n TR: null,\n BL: null,\n BR: null\n /* eslint-enable */\n };\n var elementRect;\n if (window.getComputedStyle(element).display === 'none') {\n var oldVisibility = element.style.visibility;\n element.style.visibility = 'hidden';\n element.style.display = 'block';\n elementRect = element.getBoundingClientRect();\n element.style.removeProperty('display');\n element.style.visibility = oldVisibility;\n }\n else {\n elementRect = element.getBoundingClientRect();\n }\n var pos = {\n posX: positionX, posY: positionY, offsetX: offsetX, offsetY: offsetY, position: { left: 0, top: 0 }\n };\n targetContainer = viewPortElement;\n parentDocument = target.ownerDocument;\n updateElementData(target, tEdge, pos, fixedParent, elementRect);\n setPosition(eEdge, pos, elementRect);\n if (axis.X) {\n leftFlip(target, eEdge, tEdge, pos, elementRect, true);\n }\n if (axis.Y && tEdge.TL.top > -1) {\n topFlip(target, eEdge, tEdge, pos, elementRect, true);\n }\n setPopup(element, pos, elementRect);\n}\n/**\n *\n * @param {HTMLElement} element - specifies the element\n * @param {PositionLocation} pos - specifies the location\n * @param {ClientRect} elementRect - specifies the client rect\n * @returns {void}\n */\nfunction setPopup(element, pos, elementRect) {\n //eslint-disable-next-line\n var left = 0, top = 0;\n if (element.offsetParent != null\n && (getComputedStyle(element.offsetParent).position === 'absolute' ||\n getComputedStyle(element.offsetParent).position === 'relative')) {\n var data = calculatePosition(element.offsetParent, 'left', 'top', false, elementRect);\n left = data.left;\n top = data.top;\n }\n element.style.top = (pos.position.top + pos.offsetY - (top)) + 'px';\n element.style.left = (pos.position.left + pos.offsetX - (left)) + 'px';\n}\n/**\n *\n * @param {HTMLElement} target - specifies the element\n * @param {EdgeOffset} edge - specifies the offset\n * @param {PositionLocation} pos - specifies theloaction\n * @param {boolean} fixedParent - specifies the boolean\n * @param {ClientRect} elementRect - specifies the client rect\n * @returns {void}\n */\nfunction updateElementData(target, edge, pos, fixedParent, elementRect) {\n pos.position = calculatePosition(target, pos.posX, pos.posY, fixedParent, elementRect);\n edge.TL = calculatePosition(target, 'left', 'top', fixedParent, elementRect);\n edge.TR = calculatePosition(target, 'right', 'top', fixedParent, elementRect);\n edge.BR = calculatePosition(target, 'left', 'bottom', fixedParent, elementRect);\n edge.BL = calculatePosition(target, 'right', 'bottom', fixedParent, elementRect);\n}\n/**\n *\n * @param {EdgeOffset} eStatus - specifies the status\n * @param {PositionLocation} pos - specifies the location\n * @param {ClientRect} elementRect - specifies the client\n * @returns {void}\n */\nfunction setPosition(eStatus, pos, elementRect) {\n eStatus.TL = { top: pos.position.top + pos.offsetY, left: pos.position.left + pos.offsetX };\n eStatus.TR = { top: eStatus.TL.top, left: eStatus.TL.left + elementRect.width };\n eStatus.BL = { top: eStatus.TL.top + elementRect.height,\n left: eStatus.TL.left };\n eStatus.BR = { top: eStatus.TL.top + elementRect.height,\n left: eStatus.TL.left + elementRect.width };\n}\n/**\n *\n * @param {number} left - specifies the number\n * @param {number} right - specifies the number\n * @returns {LeftCorners} - returns the value\n */\nfunction leftCollideCheck(left, right) {\n //eslint-disable-next-line\n var leftSide = false, rightSide = false;\n if (((left - getBodyScrollLeft()) < ContainerLeft())) {\n leftSide = true;\n }\n if (right > ContainerRight()) {\n rightSide = true;\n }\n return { leftSide: leftSide, rightSide: rightSide };\n}\n/**\n *\n * @param {HTMLElement} target - specifies the element\n * @param {EdgeOffset} edge - specifes the element\n * @param {EdgeOffset} tEdge - specifies the edge offset\n * @param {PositionLocation} pos - specifes the location\n * @param {ClientRect} elementRect - specifies the client\n * @param {boolean} deepCheck - specifies the boolean value\n * @returns {void}\n */\nfunction leftFlip(target, edge, tEdge, pos, elementRect, deepCheck) {\n var collideSide = leftCollideCheck(edge.TL.left, edge.TR.left);\n if ((tEdge.TL.left - getBodyScrollLeft()) <= ContainerLeft()) {\n collideSide.leftSide = false;\n }\n if (tEdge.TR.left > ContainerRight()) {\n collideSide.rightSide = false;\n }\n if ((collideSide.leftSide && !collideSide.rightSide) || (!collideSide.leftSide && collideSide.rightSide)) {\n if (pos.posX === 'right') {\n pos.posX = 'left';\n }\n else {\n pos.posX = 'right';\n }\n pos.offsetX = pos.offsetX + elementRect.width;\n pos.offsetX = -1 * pos.offsetX;\n pos.position = calculatePosition(target, pos.posX, pos.posY, false);\n setPosition(edge, pos, elementRect);\n if (deepCheck) {\n leftFlip(target, edge, tEdge, pos, elementRect, false);\n }\n }\n}\n/**\n *\n * @param {HTMLElement} target - specifies the element\n * @param {EdgeOffset} edge - specifies the offset\n * @param {EdgeOffset} tEdge - specifies the offset\n * @param {PositionLocation} pos - specifies the location\n * @param {ClientRect} elementRect - specifies the client rect\n * @param {boolean} deepCheck - specifies the boolean\n * @returns {void}\n */\nfunction topFlip(target, edge, tEdge, pos, elementRect, deepCheck) {\n var collideSide = topCollideCheck(edge.TL.top, edge.BL.top);\n if ((tEdge.TL.top - getBodyScrollTop()) <= ContainerTop()) {\n collideSide.topSide = false;\n }\n if (tEdge.BL.top >= ContainerBottom() && target.getBoundingClientRect().bottom < window.innerHeight) {\n collideSide.bottomSide = false;\n }\n if ((collideSide.topSide && !collideSide.bottomSide) || (!collideSide.topSide && collideSide.bottomSide)) {\n if (pos.posY === 'top') {\n pos.posY = 'bottom';\n }\n else {\n pos.posY = 'top';\n }\n pos.offsetY = pos.offsetY + elementRect.height;\n pos.offsetY = -1 * pos.offsetY;\n pos.position = calculatePosition(target, pos.posX, pos.posY, false, elementRect);\n setPosition(edge, pos, elementRect);\n if (deepCheck) {\n topFlip(target, edge, tEdge, pos, elementRect, false);\n }\n }\n}\n/**\n *\n * @param {number} top - specifies the number\n * @param {number} bottom - specifies the number\n * @returns {TopCorners} - retyrns the value\n */\nfunction topCollideCheck(top, bottom) {\n //eslint-disable-next-line\n var topSide = false, bottomSide = false;\n if ((top - getBodyScrollTop()) < ContainerTop()) {\n topSide = true;\n }\n if (bottom > ContainerBottom()) {\n bottomSide = true;\n }\n return { topSide: topSide, bottomSide: bottomSide };\n}\n/**\n * @returns {void}\n */\nfunction getTargetContainerWidth() {\n return targetContainer.getBoundingClientRect().width;\n}\n/**\n * @returns {void}\n */\nfunction getTargetContainerHeight() {\n return targetContainer.getBoundingClientRect().height;\n}\n/**\n * @returns {void}\n */\nfunction getTargetContainerLeft() {\n return targetContainer.getBoundingClientRect().left;\n}\n/**\n * @returns {void}\n */\nfunction getTargetContainerTop() {\n return targetContainer.getBoundingClientRect().top;\n}\n//eslint-disable-next-line\nfunction ContainerTop() {\n if (targetContainer) {\n return getTargetContainerTop();\n }\n return 0;\n}\n//eslint-disable-next-line\nfunction ContainerLeft() {\n if (targetContainer) {\n return getTargetContainerLeft();\n }\n return 0;\n}\n//eslint-disable-next-line\nfunction ContainerRight() {\n if (targetContainer) {\n return (getBodyScrollLeft() + getTargetContainerLeft() + getTargetContainerWidth());\n }\n return (getBodyScrollLeft() + getViewPortWidth());\n}\n//eslint-disable-next-line\nfunction ContainerBottom() {\n if (targetContainer) {\n return (getBodyScrollTop() + getTargetContainerTop() + getTargetContainerHeight());\n }\n return (getBodyScrollTop() + getViewPortHeight());\n}\n/**\n * @returns {void}\n */\nfunction getBodyScrollTop() {\n // if(targetContainer)\n // return targetContainer.scrollTop;\n return parentDocument.documentElement.scrollTop || parentDocument.body.scrollTop;\n}\n/**\n * @returns {void}\n */\nfunction getBodyScrollLeft() {\n // if(targetContainer)\n // return targetContainer.scrollLeft;\n return parentDocument.documentElement.scrollLeft || parentDocument.body.scrollLeft;\n}\n/**\n * @returns {void}\n */\nfunction getViewPortHeight() {\n return window.innerHeight;\n}\n/**\n * @returns {void}\n */\nfunction getViewPortWidth() {\n var windowWidth = window.innerWidth;\n var documentReact = document.documentElement.getBoundingClientRect();\n var offsetWidth = (isNullOrUndefined(document.documentElement)) ? 0 : documentReact.width;\n return windowWidth - (windowWidth - offsetWidth);\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { setStyleAttribute, addClass, removeClass, ChildProperty, Complex } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base';\nimport { Browser } from '@syncfusion/ej2-base';\nimport { calculatePosition, calculateRelativeBasedPosition } from '../common/position';\nimport { Animation, Property, Event, Component } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { EventHandler } from '@syncfusion/ej2-base';\nimport { flip, fit, isCollide } from '../common/collision';\n/**\n * Specifies the offset position values.\n */\nvar PositionData = /** @class */ (function (_super) {\n __extends(PositionData, _super);\n function PositionData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('left')\n ], PositionData.prototype, \"X\", void 0);\n __decorate([\n Property('top')\n ], PositionData.prototype, \"Y\", void 0);\n return PositionData;\n}(ChildProperty));\nexport { PositionData };\n// don't use space in classNames\nvar CLASSNAMES = {\n ROOT: 'e-popup',\n RTL: 'e-rtl',\n OPEN: 'e-popup-open',\n CLOSE: 'e-popup-close'\n};\n/**\n * Represents the Popup Component\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Popup = /** @class */ (function (_super) {\n __extends(Popup, _super);\n function Popup(element, options) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Called internally if any of the property value changed.\n *\n * @param {PopupModel} newProp - specifies the new property\n * @param {PopupModel} oldProp - specifies the old property\n * @private\n * @returns {void}\n */\n Popup.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 'width':\n setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });\n break;\n case 'height':\n setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'zIndex':\n setStyleAttribute(this.element, { 'zIndex': newProp.zIndex });\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'position':\n case 'relateTo':\n this.refreshPosition();\n break;\n case 'offsetX':\n // eslint-disable-next-line\n var x = newProp.offsetX - oldProp.offsetX;\n this.element.style.left = (parseInt(this.element.style.left, 10) + (x)).toString() + 'px';\n break;\n case 'offsetY':\n // eslint-disable-next-line\n var y = newProp.offsetY - oldProp.offsetY;\n this.element.style.top = (parseInt(this.element.style.top, 10) + (y)).toString() + 'px';\n break;\n case 'content':\n this.setContent();\n break;\n case 'actionOnScroll':\n if (newProp.actionOnScroll !== 'none') {\n this.wireScrollEvents();\n }\n else {\n this.unwireScrollEvents();\n }\n break;\n }\n }\n };\n /**\n * gets the Component module name.\n *\n * @returns {void}\n * @private\n */\n Popup.prototype.getModuleName = function () {\n return 'popup';\n };\n /**\n * To resolve if any collision occurs.\n *\n * @returns {void}\n */\n Popup.prototype.resolveCollision = function () {\n this.checkCollision();\n };\n /**\n * gets the persisted state properties of the Component.\n *\n * @returns {void}\n */\n Popup.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * To destroy the control.\n *\n * @returns {void}\n */\n Popup.prototype.destroy = function () {\n if (this.element.classList.contains('e-popup-open')) {\n this.unwireEvents();\n }\n this.element.classList.remove(CLASSNAMES.ROOT, CLASSNAMES.RTL, CLASSNAMES.OPEN, CLASSNAMES.CLOSE);\n _super.prototype.destroy.call(this);\n };\n /**\n * To Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n Popup.prototype.render = function () {\n this.element.classList.add(CLASSNAMES.ROOT);\n var styles = {};\n if (this.zIndex !== 1000) {\n styles.zIndex = this.zIndex;\n }\n if (this.width !== 'auto') {\n styles.width = formatUnit(this.width);\n }\n if (this.height !== 'auto') {\n styles.height = formatUnit(this.height);\n }\n setStyleAttribute(this.element, styles);\n this.fixedParent = false;\n this.setEnableRtl();\n this.setContent();\n };\n Popup.prototype.wireEvents = function () {\n if (Browser.isDevice) {\n EventHandler.add(window, 'orientationchange', this.orientationOnChange, this);\n }\n if (this.actionOnScroll !== 'none') {\n this.wireScrollEvents();\n }\n };\n Popup.prototype.wireScrollEvents = function () {\n if (this.getRelateToElement()) {\n for (var _i = 0, _a = this.getScrollableParent(this.getRelateToElement()); _i < _a.length; _i++) {\n var parent_1 = _a[_i];\n EventHandler.add(parent_1, 'scroll', this.scrollRefresh, this);\n }\n }\n };\n Popup.prototype.unwireEvents = function () {\n if (Browser.isDevice) {\n EventHandler.remove(window, 'orientationchange', this.orientationOnChange);\n }\n if (this.actionOnScroll !== 'none') {\n this.unwireScrollEvents();\n }\n };\n Popup.prototype.unwireScrollEvents = function () {\n if (this.getRelateToElement()) {\n for (var _i = 0, _a = this.getScrollableParent(this.getRelateToElement()); _i < _a.length; _i++) {\n var parent_2 = _a[_i];\n EventHandler.remove(parent_2, 'scroll', this.scrollRefresh);\n }\n }\n };\n Popup.prototype.getRelateToElement = function () {\n var relateToElement = this.relateTo === '' || isNullOrUndefined(this.relateTo) ?\n document.body : this.relateTo;\n this.setProperties({ relateTo: relateToElement }, true);\n return ((typeof this.relateTo) === 'string') ?\n document.querySelector(this.relateTo) : this.relateTo;\n };\n Popup.prototype.scrollRefresh = function (e) {\n if (this.actionOnScroll === 'reposition') {\n if (!isNullOrUndefined(this.element) && !(this.element.offsetParent === e.target ||\n (this.element.offsetParent && this.element.offsetParent.tagName === 'BODY' &&\n e.target.parentElement == null))) {\n this.refreshPosition();\n }\n }\n else if (this.actionOnScroll === 'hide') {\n this.hide();\n }\n if (this.actionOnScroll !== 'none') {\n if (this.getRelateToElement()) {\n var targetVisible = this.isElementOnViewport(this.getRelateToElement(), e.target);\n if (!targetVisible && !this.targetInvisibleStatus) {\n this.trigger('targetExitViewport');\n this.targetInvisibleStatus = true;\n }\n else if (targetVisible) {\n this.targetInvisibleStatus = false;\n }\n }\n }\n };\n /**\n * This method is to get the element visibility on viewport when scroll\n * the page. This method will returns true even though 1 px of element\n * part is in visible.\n *\n * @param {HTMLElement} relateToElement - specifies the element\n * @param {HTMLElement} scrollElement - specifies the scroll element\n * @returns {boolean} - retruns the boolean\n */\n // eslint-disable-next-line\n Popup.prototype.isElementOnViewport = function (relateToElement, scrollElement) {\n var scrollParents = this.getScrollableParent(relateToElement);\n for (var parent_3 = 0; parent_3 < scrollParents.length; parent_3++) {\n if (this.isElementVisible(relateToElement, scrollParents[parent_3])) {\n continue;\n }\n else {\n return false;\n }\n }\n return true;\n };\n Popup.prototype.isElementVisible = function (relateToElement, scrollElement) {\n var rect = this.checkGetBoundingClientRect(relateToElement);\n if (!rect.height || !rect.width) {\n return false;\n }\n if (!isNullOrUndefined(this.checkGetBoundingClientRect(scrollElement))) {\n var parent_4 = scrollElement.getBoundingClientRect();\n return !(rect.bottom < parent_4.top) &&\n (!(rect.bottom > parent_4.bottom) &&\n (!(rect.right > parent_4.right) &&\n !(rect.left < parent_4.left)));\n }\n else {\n var win = window;\n var windowView = {\n top: win.scrollY,\n left: win.scrollX,\n right: win.scrollX + win.outerWidth,\n bottom: win.scrollY + win.outerHeight\n };\n var off = calculatePosition(relateToElement);\n var ele = {\n top: off.top,\n left: off.left,\n right: off.left + rect.width,\n bottom: off.top + rect.height\n };\n var elementView = {\n top: windowView.bottom - ele.top,\n left: windowView.right - ele.left,\n bottom: ele.bottom - windowView.top,\n right: ele.right - windowView.left\n };\n return elementView.top > 0\n && elementView.left > 0\n && elementView.right > 0\n && elementView.bottom > 0;\n }\n };\n /**\n * Initialize the event handler\n *\n * @returns {void}\n * @private\n */\n Popup.prototype.preRender = function () {\n //There is no event handler\n };\n Popup.prototype.setEnableRtl = function () {\n this.reposition();\n // eslint-disable-next-line\n this.enableRtl ? this.element.classList.add(CLASSNAMES.RTL) : this.element.classList.remove(CLASSNAMES.RTL);\n };\n Popup.prototype.setContent = function () {\n if (!isNullOrUndefined(this.content)) {\n this.element.innerHTML = '';\n if (typeof (this.content) === 'string') {\n this.element.textContent = this.content;\n }\n else {\n var relateToElem = this.getRelateToElement();\n // eslint-disable-next-line\n var props = this.content.props;\n if (!relateToElem.classList.contains('e-dropdown-btn') || isNullOrUndefined(props)) {\n this.element.appendChild(this.content);\n }\n }\n }\n };\n Popup.prototype.orientationOnChange = function () {\n var _this = this;\n setTimeout(function () {\n _this.refreshPosition();\n }, 200);\n };\n // eslint-disable-next-line\n /**\n * Based on the `relative` element and `offset` values, `Popup` element position will refreshed.\n *\n * @returns {void}\n */\n Popup.prototype.refreshPosition = function (target, collision) {\n if (!isNullOrUndefined(target)) {\n this.checkFixedParent(target);\n }\n this.reposition();\n if (!collision) {\n this.checkCollision();\n }\n };\n Popup.prototype.reposition = function () {\n var pos;\n var position;\n var relateToElement = this.getRelateToElement();\n if (typeof this.position.X === 'number' && typeof this.position.Y === 'number') {\n pos = { left: this.position.X, top: this.position.Y };\n }\n else if ((typeof this.position.X === 'string' && typeof this.position.Y === 'number') ||\n (typeof this.position.X === 'number' && typeof this.position.Y === 'string')) {\n var parentDisplay = void 0;\n var display = this.element.style.display;\n this.element.style.display = 'block';\n if (this.element.classList.contains('e-dlg-modal')) {\n parentDisplay = this.element.parentElement.style.display;\n this.element.parentElement.style.display = 'block';\n }\n position = this.getAnchorPosition(relateToElement, this.element, this.position, this.offsetX, this.offsetY);\n if (typeof this.position.X === 'string') {\n pos = { left: position.left, top: this.position.Y };\n }\n else {\n pos = { left: this.position.X, top: position.top };\n }\n this.element.style.display = display;\n if (this.element.classList.contains('e-dlg-modal')) {\n this.element.parentElement.style.display = parentDisplay;\n }\n }\n else if (relateToElement) {\n var display = this.element.style.display;\n this.element.style.display = 'block';\n pos = this.getAnchorPosition(relateToElement, this.element, this.position, this.offsetX, this.offsetY);\n this.element.style.display = display;\n }\n else {\n pos = { left: 0, top: 0 };\n }\n if (!isNullOrUndefined(pos)) {\n this.element.style.left = pos.left + 'px';\n this.element.style.top = pos.top + 'px';\n }\n };\n Popup.prototype.checkGetBoundingClientRect = function (ele) {\n var eleRect;\n try {\n eleRect = ele.getBoundingClientRect();\n return eleRect;\n }\n catch (error) {\n return null;\n }\n };\n Popup.prototype.getAnchorPosition = function (anchorEle, ele, position, offsetX, offsetY) {\n var eleRect = this.checkGetBoundingClientRect(ele);\n var anchorRect = this.checkGetBoundingClientRect(anchorEle);\n if (isNullOrUndefined(eleRect) || isNullOrUndefined(anchorRect)) {\n return null;\n }\n var anchor = anchorEle;\n var anchorPos = { left: 0, top: 0 };\n if (ele.offsetParent && ele.offsetParent.tagName === 'BODY' && anchorEle.tagName === 'BODY') {\n anchorPos = calculatePosition(anchorEle);\n }\n else {\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName !== 'BODY')) {\n ele = ele.parentElement;\n }\n anchorPos = calculateRelativeBasedPosition(anchor, ele);\n }\n switch (position.X) {\n default:\n case 'left':\n break;\n case 'center':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.left += (window.innerWidth / 2 - eleRect.width / 2);\n }\n else if (this.targetType === 'container') {\n anchorPos.left += (anchorRect.width / 2 - eleRect.width / 2);\n }\n else {\n anchorPos.left += (anchorRect.width / 2);\n }\n break;\n case 'right':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.left += (window.innerWidth - eleRect.width);\n }\n else if (this.targetType === 'container') {\n anchorPos.left += (anchorRect.width - eleRect.width);\n }\n else {\n anchorPos.left += (anchorRect.width);\n }\n break;\n }\n switch (position.Y) {\n default:\n case 'top':\n break;\n case 'center':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.top += (window.innerHeight / 2 - eleRect.height / 2);\n }\n else if (this.targetType === 'container') {\n anchorPos.top += (anchorRect.height / 2 - eleRect.height / 2);\n }\n else {\n anchorPos.top += (anchorRect.height / 2);\n }\n break;\n case 'bottom':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.top += (window.innerHeight - eleRect.height);\n }\n else if (this.targetType === 'container') {\n anchorPos.top += (anchorRect.height - eleRect.height);\n }\n else {\n anchorPos.top += (anchorRect.height);\n }\n break;\n }\n anchorPos.left += offsetX;\n anchorPos.top += offsetY;\n return anchorPos;\n };\n Popup.prototype.callFlip = function (param) {\n var relateToElement = this.getRelateToElement();\n flip(this.element, relateToElement, this.offsetX, this.offsetY, this.position.X, this.position.Y, this.viewPortElement, param, this.fixedParent);\n };\n Popup.prototype.callFit = function (param) {\n if (isCollide(this.element, this.viewPortElement).length !== 0) {\n if (isNullOrUndefined(this.viewPortElement)) {\n var data = fit(this.element, this.viewPortElement, param);\n if (param.X) {\n this.element.style.left = data.left + 'px';\n }\n if (param.Y) {\n this.element.style.top = data.top + 'px';\n }\n }\n else {\n var elementRect = this.checkGetBoundingClientRect(this.element);\n var viewPortRect = this.checkGetBoundingClientRect(this.viewPortElement);\n if (isNullOrUndefined(elementRect) || isNullOrUndefined(viewPortRect)) {\n return null;\n }\n if (param && param.Y === true) {\n if (viewPortRect.top > elementRect.top) {\n this.element.style.top = '0px';\n }\n else if (viewPortRect.bottom < elementRect.bottom) {\n this.element.style.top = parseInt(this.element.style.top, 10) - (elementRect.bottom - viewPortRect.bottom) + 'px';\n }\n }\n if (param && param.X === true) {\n if (viewPortRect.right < elementRect.right) {\n this.element.style.left = parseInt(this.element.style.left, 10) - (elementRect.right - viewPortRect.right) + 'px';\n }\n else if (viewPortRect.left > elementRect.left) {\n this.element.style.left = parseInt(this.element.style.left, 10) + (viewPortRect.left - elementRect.left) + 'px';\n }\n }\n }\n }\n };\n Popup.prototype.checkCollision = function () {\n var horz = this.collision.X;\n var vert = this.collision.Y;\n if (horz === 'none' && vert === 'none') {\n return;\n }\n if (horz === 'flip' && vert === 'flip') {\n this.callFlip({ X: true, Y: true });\n }\n else if (horz === 'fit' && vert === 'fit') {\n this.callFit({ X: true, Y: true });\n }\n else {\n if (horz === 'flip') {\n this.callFlip({ X: true, Y: false });\n }\n else if (vert === 'flip') {\n this.callFlip({ Y: true, X: false });\n }\n if (horz === 'fit') {\n this.callFit({ X: true, Y: false });\n }\n else if (vert === 'fit') {\n this.callFit({ X: false, Y: true });\n }\n }\n };\n /**\n * Shows the popup element from screen.\n *\n * @returns {void}\n * @param {AnimationModel} animationOptions - specifies the model\n * @param { HTMLElement } relativeElement - To calculate the zIndex value dynamically.\n */\n Popup.prototype.show = function (animationOptions, relativeElement) {\n var _this = this;\n var relateToElement = this.getRelateToElement();\n if (relateToElement.classList.contains('e-filemanager')) {\n this.fmDialogContainer = this.element.getElementsByClassName('e-file-select-wrap')[0];\n }\n this.wireEvents();\n if (!isNullOrUndefined(this.fmDialogContainer) && Browser.isIos) {\n this.fmDialogContainer.style.display = 'block';\n }\n if (this.zIndex === 1000 || !isNullOrUndefined(relativeElement)) {\n var zIndexElement = (isNullOrUndefined(relativeElement)) ? this.element : relativeElement;\n this.zIndex = getZindexPartial(zIndexElement);\n setStyleAttribute(this.element, { 'zIndex': this.zIndex });\n }\n animationOptions = (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?\n animationOptions : this.showAnimation;\n if (this.collision.X !== 'none' || this.collision.Y !== 'none') {\n removeClass([this.element], CLASSNAMES.CLOSE);\n addClass([this.element], CLASSNAMES.OPEN);\n this.checkCollision();\n removeClass([this.element], CLASSNAMES.OPEN);\n addClass([this.element], CLASSNAMES.CLOSE);\n }\n if (!isNullOrUndefined(animationOptions)) {\n animationOptions.begin = function () {\n if (!_this.isDestroyed) {\n removeClass([_this.element], CLASSNAMES.CLOSE);\n addClass([_this.element], CLASSNAMES.OPEN);\n }\n };\n animationOptions.end = function () {\n if (!_this.isDestroyed) {\n _this.trigger('open');\n }\n };\n new Animation(animationOptions).animate(this.element);\n }\n else {\n removeClass([this.element], CLASSNAMES.CLOSE);\n addClass([this.element], CLASSNAMES.OPEN);\n this.trigger('open');\n }\n };\n /**\n * Hides the popup element from screen.\n *\n * @param {AnimationModel} animationOptions - To give the animation options.\n * @returns {void}\n */\n Popup.prototype.hide = function (animationOptions) {\n var _this = this;\n animationOptions = (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?\n animationOptions : this.hideAnimation;\n if (!isNullOrUndefined(animationOptions)) {\n animationOptions.end = function () {\n if (!_this.isDestroyed) {\n removeClass([_this.element], CLASSNAMES.OPEN);\n addClass([_this.element], CLASSNAMES.CLOSE);\n _this.trigger('close');\n }\n };\n new Animation(animationOptions).animate(this.element);\n }\n else {\n removeClass([this.element], CLASSNAMES.OPEN);\n addClass([this.element], CLASSNAMES.CLOSE);\n this.trigger('close');\n }\n this.unwireEvents();\n };\n /**\n * Gets scrollable parent elements for the given element.\n *\n * @returns {void}\n * @param { HTMLElement } element - Specify the element to get the scrollable parents of it.\n */\n Popup.prototype.getScrollableParent = function (element) {\n this.checkFixedParent(element);\n return getScrollableParent(element, this.fixedParent);\n };\n Popup.prototype.checkFixedParent = function (element) {\n var parent = element.parentElement;\n while (parent && parent.tagName !== 'HTML') {\n var parentStyle = getComputedStyle(parent);\n if (parentStyle.position === 'fixed' && !isNullOrUndefined(this.element) && this.element.offsetParent &&\n this.element.offsetParent.tagName === 'BODY' && getComputedStyle(this.element.offsetParent).overflow !== 'hidden') {\n this.element.style.top = window.scrollY > parseInt(this.element.style.top, 10) ?\n formatUnit(window.scrollY - parseInt(this.element.style.top, 10))\n : formatUnit(parseInt(this.element.style.top, 10) - window.scrollY);\n this.element.style.position = 'fixed';\n this.fixedParent = true;\n }\n parent = parent.parentElement;\n if (!isNullOrUndefined(this.element) && isNullOrUndefined(this.element.offsetParent) && parentStyle.position === 'fixed'\n && this.element.style.position === 'fixed') {\n this.fixedParent = true;\n }\n }\n };\n __decorate([\n Property('auto')\n ], Popup.prototype, \"height\", void 0);\n __decorate([\n Property('auto')\n ], Popup.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"content\", void 0);\n __decorate([\n Property('container')\n ], Popup.prototype, \"targetType\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"viewPortElement\", void 0);\n __decorate([\n Property({ X: 'none', Y: 'none' })\n ], Popup.prototype, \"collision\", void 0);\n __decorate([\n Property('')\n ], Popup.prototype, \"relateTo\", void 0);\n __decorate([\n Complex({}, PositionData)\n ], Popup.prototype, \"position\", void 0);\n __decorate([\n Property(0)\n ], Popup.prototype, \"offsetX\", void 0);\n __decorate([\n Property(0)\n ], Popup.prototype, \"offsetY\", void 0);\n __decorate([\n Property(1000)\n ], Popup.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], Popup.prototype, \"enableRtl\", void 0);\n __decorate([\n Property('reposition')\n ], Popup.prototype, \"actionOnScroll\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"showAnimation\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"hideAnimation\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"targetExitViewport\", void 0);\n Popup = __decorate([\n NotifyPropertyChanges\n ], Popup);\n return Popup;\n}(Component));\nexport { Popup };\n/**\n * Gets scrollable parent elements for the given element.\n *\n * @param { HTMLElement } element - Specify the element to get the scrollable parents of it.\n * @param {boolean} fixedParent - specifies the parent element\n * @private\n * @returns {void}\n */\nexport function getScrollableParent(element, fixedParent) {\n var eleStyle = getComputedStyle(element);\n var scrollParents = [];\n var overflowRegex = /(auto|scroll)/;\n var parent = element.parentElement;\n while (parent && parent.tagName !== 'HTML') {\n var parentStyle = getComputedStyle(parent);\n if (!(eleStyle.position === 'absolute' && parentStyle.position === 'static')\n && overflowRegex.test(parentStyle.overflow + parentStyle.overflowY + parentStyle.overflowX)) {\n scrollParents.push(parent);\n }\n parent = parent.parentElement;\n }\n if (!fixedParent) {\n scrollParents.push(document);\n }\n return scrollParents;\n}\n/**\n * Gets the maximum z-index of the given element.\n *\n * @returns {void}\n * @param { HTMLElement } element - Specify the element to get the maximum z-index of it.\n * @private\n */\nexport function getZindexPartial(element) {\n // upto body traversal\n var parent = element.parentElement;\n var parentZindex = [];\n while (parent) {\n if (parent.tagName !== 'BODY') {\n var index = document.defaultView.getComputedStyle(parent, null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(parent, null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n parentZindex.push(index);\n }\n parent = parent.parentElement;\n }\n else {\n break;\n }\n }\n var childrenZindex = [];\n for (var i = 0; i < document.body.children.length; i++) {\n if (!element.isEqualNode(document.body.children[i])) {\n var index = document.defaultView.getComputedStyle(document.body.children[i], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(document.body.children[i], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n childrenZindex.push(index);\n }\n }\n }\n childrenZindex.push('999');\n var siblingsZindex = [];\n if (!isNullOrUndefined(element.parentElement) && element.parentElement.tagName !== 'BODY') {\n var childNodes = [].slice.call(element.parentElement.children);\n for (var i = 0; i < childNodes.length; i++) {\n if (!element.isEqualNode(childNodes[i])) {\n var index = document.defaultView.getComputedStyle(childNodes[i], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(childNodes[i], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n siblingsZindex.push(index);\n }\n }\n }\n }\n var finalValue = parentZindex.concat(childrenZindex, siblingsZindex);\n // eslint-disable-next-line\n var currentZindexValue = Math.max.apply(Math, finalValue) + 1;\n return currentZindexValue > 2147483647 ? 2147483647 : currentZindexValue;\n}\n/**\n * Gets the maximum z-index of the page.\n *\n * @returns {void}\n * @param { HTMLElement } tagName - Specify the tagName to get the maximum z-index of it.\n * @private\n */\nexport function getMaxZindex(tagName) {\n if (tagName === void 0) { tagName = ['*']; }\n var maxZindex = [];\n for (var i = 0; i < tagName.length; i++) {\n var elements = document.getElementsByTagName(tagName[i]);\n for (var i_1 = 0; i_1 < elements.length; i_1++) {\n var index = document.defaultView.getComputedStyle(elements[i_1], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(elements[i_1], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n maxZindex.push(index);\n }\n }\n }\n // eslint-disable-next-line\n var currentZindexValue = Math.max.apply(Math, maxZindex) + 1;\n return currentZindexValue > 2147483647 ? 2147483647 : currentZindexValue;\n}\n","/**\n * @hidden\n\n */\nexport var created = 'create';\n/**\n * @hidden\n\n */\nexport var destroyed = 'destroy';\n/**\n * @hidden\n\n */\nexport var tableclass = 'tableclass';\n/**\n * @hidden\n\n */\nexport var load = 'load';\n/**\n * Specifies Rich Text Editor internal events\n */\n/**\n * @hidden\n\n */\nexport var initialLoad = 'initial-load';\n/**\n * @hidden\n\n */\nexport var contentChanged = 'content-changed';\n/**\n * @hidden\n\n */\nexport var initialEnd = 'initial-end';\n/**\n * @hidden\n\n */\nexport var iframeMouseDown = 'iframe-click';\n/**\n * @hidden\n\n */\nexport var destroy = 'destroy';\n/**\n * @hidden\n\n */\nexport var toolbarClick = 'toolbarClick';\n/**\n * @hidden\n\n */\nexport var toolbarRefresh = 'toolbar-refresh';\n/**\n * @hidden\n\n */\nexport var refreshBegin = 'refresh-begin';\n/**\n * @hidden\n\n */\nexport var toolbarUpdated = 'toolbar-updated';\n/**\n * @hidden\n\n */\nexport var bindOnEnd = 'bind-on-end';\n/**\n * @hidden\n\n */\nexport var renderColorPicker = 'render-color-picker';\n/**\n * @hidden\n\n */\nexport var htmlToolbarClick = 'html-toolbar-click';\n/**\n * @hidden\n\n */\nexport var markdownToolbarClick = 'markdown-toolbar-click';\n/**\n * @hidden\n\n */\nexport var destroyColorPicker = 'destroy-color-picker';\n/**\n * @hidden\n\n */\nexport var modelChanged = 'model-changed';\n/**\n * @hidden\n\n */\nexport var tableModulekeyUp = 'tableModulekeyUp';\n/**\n * @hidden\n\n */\nexport var keyUp = 'keyUp';\n/**\n * @hidden\n\n */\nexport var keyDown = 'keyDown';\n/**\n * @hidden\n\n */\nexport var mouseUp = 'mouseUp';\n/**\n * @hidden\n\n */\nexport var toolbarCreated = 'toolbarCreated';\n/**\n * @hidden\n\n */\nexport var toolbarRenderComplete = 'toolbarRenderComplete';\n/**\n * @hidden\n\n */\nexport var enableFullScreen = 'enableFullScreen';\n/**\n * @hidden\n\n */\nexport var disableFullScreen = 'disableFullScreen';\n/**\n * @hidden\n\n */\nexport var dropDownSelect = 'dropDownSelect';\n/**\n * @hidden\n\n */\nexport var beforeDropDownItemRender = 'beforeDropDownItemRender';\n/**\n * @hidden\n\n */\nexport var execCommandCallBack = 'execCommandCallBack';\n/**\n * @hidden\n\n */\nexport var imageToolbarAction = 'image-toolbar-action';\n/**\n * @hidden\n\n */\nexport var audioToolbarAction = 'audio-toolbar-action';\n/**\n * @hidden\n\n */\nexport var videoToolbarAction = 'video-toolbar-action';\n/**\n * @hidden\n\n */\nexport var linkToolbarAction = 'link-toolbar-action';\n/**\n * @hidden\n\n */\nexport var windowResize = 'resize';\n/**\n * @hidden\n\n */\nexport var resizeStart = 'resizeStart';\n/**\n * @hidden\n\n */\nexport var onResize = 'resizing';\n/**\n * @hidden\n\n */\nexport var resizeStop = 'resizeStop';\n/**\n * @hidden\n\n */\nexport var undo = 'undo';\n/**\n * @hidden\n\n */\nexport var redo = 'redo';\n/**\n * @hidden\n\n */\nexport var insertLink = 'insertLink';\n/**\n * @hidden\n\n */\nexport var unLink = 'unLink';\n/**\n * @hidden\n\n */\nexport var editLink = 'editLink';\n/**\n * @hidden\n\n */\nexport var openLink = 'openLink';\n/**\n * @hidden\n\n */\nexport var actionBegin = 'actionBegin';\n/**\n * @hidden\n\n */\nexport var actionComplete = 'actionComplete';\n/**\n * @hidden\n\n */\nexport var updatedToolbarStatus = 'updatedToolbarStatus';\n/**\n * @hidden\n\n */\nexport var actionSuccess = 'actionSuccess';\n/**\n * @hidden\n\n */\nexport var updateToolbarItem = 'updateToolbarItem';\n/**\n * @hidden\n\n */\nexport var insertImage = 'insertImage';\n/**\n * @hidden\n\n */\nexport var insertAudio = 'insertAudio';\n/**\n * @hidden\n\n */\nexport var insertVideo = 'insertVideo';\n/**\n * @hidden\n\n */\nexport var insertCompleted = 'insertCompleted';\n/**\n * @hidden\n\n */\nexport var imageLeft = 'justifyLeft';\n/**\n * @hidden\n\n */\nexport var imageRight = 'justifyRight';\n/**\n * @hidden\n\n */\nexport var imageCenter = 'justifyCenter';\n/**\n * @hidden\n\n */\nexport var imageBreak = 'break';\n/**\n * @hidden\n\n */\nexport var imageInline = 'inline';\n/**\n * @hidden\n\n */\nexport var imageLink = 'insertImgLink';\n/**\n * @hidden\n\n */\nexport var imageAlt = 'imgAltText';\n/**\n * @hidden\n\n */\nexport var imageDelete = 'delete';\n/**\n * @hidden\n\n */\nexport var audioDelete = 'delete';\n/**\n * @hidden\n\n */\nexport var videoDelete = 'delete';\n/**\n * @hidden\n\n */\nexport var imageCaption = 'caption';\n/**\n * @hidden\n\n */\nexport var imageSize = 'imageSize';\n/**\n * @hidden\n\n */\nexport var videoSize = 'videoSize';\n/**\n * @hidden\n\n */\nexport var sourceCode = 'sourceCode';\n/**\n * @hidden\n\n */\nexport var updateSource = 'updateSource';\n/**\n * @hidden\n\n */\nexport var toolbarOpen = 'toolbarOpen';\n/**\n * @hidden\n\n */\nexport var beforeDropDownOpen = 'beforeDropDownOpen';\n/**\n * @hidden\n\n */\nexport var selectionSave = 'selection-save';\n/**\n * @hidden\n\n */\nexport var selectionRestore = 'selection-restore';\n/**\n * @hidden\n\n */\nexport var expandPopupClick = 'expandPopupClick';\n/**\n * @hidden\n\n */\nexport var count = 'count';\n/**\n * @hidden\n\n */\nexport var contentFocus = 'contentFocus';\n/**\n * @hidden\n\n */\nexport var contentBlur = 'contentBlur';\n/**\n * @hidden\n\n */\nexport var mouseDown = 'mouseDown';\n/**\n * @hidden\n\n */\nexport var sourceCodeMouseDown = 'sourceCodeMouseDown';\n/**\n * @hidden\n\n */\nexport var editAreaClick = 'editAreaClick';\n/**\n * @hidden\n\n */\nexport var scroll = 'scroll';\n/**\n * @hidden\n\n */\nexport var contentscroll = 'contentscroll';\n/**\n * @hidden\n\n */\nexport var colorPickerChanged = 'colorPickerChanged';\n/**\n * @hidden\n\n */\nexport var tableColorPickerChanged = 'tableColorPickerChanged';\n/**\n * @hidden\n\n */\nexport var focusChange = 'focusChange';\n/**\n * @hidden\n\n */\nexport var selectAll = 'selectAll';\n/**\n * @hidden\n\n */\nexport var selectRange = 'selectRange';\n/**\n * @hidden\n\n */\nexport var getSelectedHtml = 'getSelectedHtml';\n/**\n * @hidden\n\n */\nexport var renderInlineToolbar = 'renderInlineToolbar';\n/**\n * @hidden\n\n */\nexport var paste = 'paste-content';\n/**\n * @hidden\n\n */\nexport var imgModule = 'imageModule';\n/**\n * @hidden\n\n */\nexport var rtlMode = 'rtl-mode';\n/**\n * @hidden\n\n */\nexport var createTable = 'createTable';\n/**\n * @hidden\n\n */\nexport var docClick = 'docClick';\n/**\n * @hidden\n\n */\nexport var tableToolbarAction = 'table-toolbar-action';\n/**\n * @hidden\n\n */\nexport var checkUndo = 'checkUndoStack';\n/**\n * @hidden\n\n */\nexport var readOnlyMode = 'readOnlyMode';\n/**\n * @hidden\n\n */\nexport var moduleDestroy = 'moduleDestroy';\n/**\n * @hidden\n\n */\nexport var pasteClean = 'pasteClean';\n/**\n * @hidden\n\n */\nexport var enterHandler = 'enterHandler';\n/**\n * @hidden\n\n */\nexport var beforeDialogOpen = 'beforeDialogOpen';\n/**\n * @hidden\n\n */\nexport var clearDialogObj = 'clearDialogObj';\n/**\n * @hidden\n\n */\nexport var dialogOpen = 'dialogOpen';\n/**\n * @hidden\n\n */\nexport var beforeDialogClose = 'beforeDialogClose';\n/**\n * @hidden\n\n */\nexport var dialogClose = 'dialogClose';\n/**\n * @hidden\n\n */\nexport var beforeQuickToolbarOpen = 'beforeQuickToolbarOpen';\n/**\n * @hidden\n\n */\nexport var quickToolbarOpen = 'quickToolbarOpen';\n/**\n * @hidden\n\n */\nexport var quickToolbarClose = 'quickToolbarClose';\n/**\n * @hidden\n\n */\nexport var popupHide = 'popupHide';\n/**\n * @hidden\n\n */\nexport var imageSelected = 'imageSelected';\n/**\n * @hidden\n\n */\nexport var imageUploading = 'imageUploading';\n/**\n * @hidden\n\n */\nexport var imageUploadSuccess = 'imageUploadSuccess';\n/**\n * @hidden\n\n */\nexport var imageUploadFailed = 'imageUploadFailed';\n/**\n * @hidden\n\n */\nexport var imageRemoving = 'imageRemoving';\n/**\n * @hidden\n\n */\nexport var fileSelected = 'fileSelected';\n/**\n * @hidden\n\n */\nexport var fileUploading = 'fileUploading';\n/**\n * @hidden\n\n */\nexport var fileUploadSuccess = 'fileUploadSuccess';\n/**\n * @hidden\n\n */\nexport var fileUploadFailed = 'fileUploadFailed';\n/**\n * @hidden\n\n */\nexport var fileRemoving = 'fileRemoving';\n/**\n * @hidden\n\n */\nexport var afterImageDelete = 'afterImageDelete';\n/**\n * @hidden\n\n */\nexport var afterMediaDelete = 'afterMediaDelete';\n/**\n * @hidden\n\n */\nexport var drop = 'drop';\n/**\n * @hidden\n\n */\nexport var xhtmlValidation = 'xhtmlValidation';\n/**\n * @hidden\n\n */\nexport var beforeImageUpload = 'beforeImageUpload';\n/**\n * @hidden\n\n */\nexport var beforeFileUpload = 'beforeFileUpload';\n/**\n * @hidden\n\n */\nexport var resizeInitialized = 'resizeInitialized';\n/**\n * @hidden\n\n */\nexport var renderFileManager = 'renderFileManager';\n/**\n * @hidden\n\n */\nexport var beforeImageDrop = 'beforeImageDrop';\n/**\n * @hidden\n\n */\nexport var dynamicModule = 'dynamicModule';\n/**\n * @hidden\n\n */\nexport var beforePasteCleanup = 'beforePasteCleanup';\n/**\n * @hidden\n\n */\nexport var afterPasteCleanup = 'afterPasteCleanup';\n/**\n * @hidden\n\n */\nexport var updateTbItemsStatus = 'updateTbItemsStatus';\n/**\n * @hidden\n\n */\nexport var showLinkDialog = 'showLinkDialog';\n/**\n * @hidden\n\n */\nexport var closeLinkDialog = 'closeLinkDialog';\n/**\n * @hidden\n\n */\nexport var showImageDialog = 'showImageDialog';\n/**\n * @hidden\n\n */\nexport var showAudioDialog = 'showAudioDialog';\n/**\n * @hidden\n\n */\nexport var showVideoDialog = 'showVideoDialog';\n/**\n * @hidden\n\n */\nexport var closeImageDialog = 'closeImageDialog';\n/**\n * @hidden\n\n */\nexport var closeAudioDialog = 'closeAudioDialog';\n/**\n * @hidden\n\n */\nexport var closeVideoDialog = 'closeVideoDialog';\n/**\n * @hidden\n\n */\nexport var showTableDialog = 'showTableDialog';\n/**\n * @hidden\n\n */\nexport var closeTableDialog = 'closeTableDialog';\n/**\n * @hidden\n\n */\nexport var bindCssClass = 'closeTableDialog';\n/**\n * @hidden\n\n */\nexport var blockEmptyNodes = \"address:empty, article:empty, aside:empty, blockquote:empty,\\n details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,\\n h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, li:empty, main:empty, nav:empty,\\n noscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty\";\n/**\n * @hidden\n\n */\nexport var inlineEmptyNodes = \"a:empty, abbr:empty, acronym:empty, b:empty, bdi:empty, bdo:empty, big:empty, button:empty,\\ncanvas:empty, cite:empty, code:empty, data:empty, datalist:empty, del:empty, dfn:empty, em:empty, font:empty, i:empty, iframe:empty,\\nins:empty, kbd:empty, label:empty, map:empty, mark:empty, meter:empty, noscript:empty, object:empty, output:empty, picture:empty, progress:empty,\\nq:empty, ruby:empty, s:empty, samp:empty, script:empty, select:empty, slot:empty, small:empty, span:empty, strong:empty, strike:empty, sub:empty, sup:empty, svg:empty,\\ntemplate:empty, textarea:empty, time:empty, u:empty, tt:empty, var:empty, wbr:empty\";\n","/**\n * Rich Text Editor classes defined here.\n */\n/**\n * @hidden\n\n */\nexport var CLS_RTE = 'e-richtexteditor';\n/**\n * @hidden\n\n */\nexport var CLS_RTL = 'e-rtl';\n/**\n * @hidden\n\n */\nexport var CLS_CONTENT = 'e-content';\n/**\n * @hidden\n\n */\nexport var CLS_DISABLED = 'e-disabled';\n/**\n * @hidden\n\n */\nexport var CLS_SCRIPT_SHEET = 'rte-iframe-script-sheet';\n/**\n * @hidden\n\n */\nexport var CLS_STYLE_SHEET = 'rte-iframe-style-sheet';\n/**\n * @hidden\n\n */\nexport var CLS_TOOLBAR = 'e-rte-toolbar';\n/**\n * @hidden\n\n */\nexport var CLS_TB_FIXED = 'e-rte-tb-fixed';\n/**\n * @hidden\n\n */\nexport var CLS_TB_FLOAT = 'e-rte-tb-float';\n/**\n * @hidden\n\n */\nexport var CLS_TB_ABS_FLOAT = 'e-rte-tb-abs-float';\n/**\n * @hidden\n\n */\nexport var CLS_INLINE = 'e-rte-inline';\n/**\n * @hidden\n\n */\nexport var CLS_TB_INLINE = 'e-rte-tb-inline';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_EXPAND_TB = 'e-rte-tb-expand';\n/**\n * @hidden\n\n */\nexport var CLS_FULL_SCREEN = 'e-rte-full-screen';\n/**\n * @hidden\n\n */\nexport var CLS_QUICK_TB = 'e-rte-quick-toolbar';\n/**\n * @hidden\n\n */\nexport var CLS_POP = 'e-rte-pop';\n/**\n * @hidden\n\n */\nexport var CLS_TB_STATIC = 'e-tb-static';\n/**\n * @hidden\n\n */\nexport var CLS_QUICK_POP = 'e-rte-quick-popup';\n/**\n * @hidden\n\n */\nexport var CLS_QUICK_DROPDOWN = 'e-quick-dropdown';\n/**\n * @hidden\n\n */\nexport var CLS_IMAGE_POP = 'e-rte-image-popup';\n/**\n * @hidden\n\n */\nexport var CLS_INLINE_POP = 'e-rte-inline-popup';\n/**\n * @hidden\n\n */\nexport var CLS_INLINE_DROPDOWN = 'e-rte-inline-dropdown';\n/**\n * @hidden\n\n */\nexport var CLS_DROPDOWN_POPUP = 'e-rte-dropdown-popup';\n/**\n * @hidden\n\n */\nexport var CLS_DROPDOWN_ICONS = 'e-rte-dropdown-icons';\n/**\n * @hidden\n\n */\nexport var CLS_DROPDOWN_ITEMS = 'e-rte-dropdown-items';\n/**\n * @hidden\n\n */\nexport var CLS_DROPDOWN_BTN = 'e-rte-dropdown-btn';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_CONTENT = 'e-rte-content';\n/**\n * @hidden\n\n */\nexport var CLS_TB_ITEM = 'e-toolbar-item';\n/**\n * @hidden\n\n */\nexport var CLS_TB_EXTENDED = 'e-toolbar-extended';\n/**\n * @hidden\n\n */\nexport var CLS_TB_WRAP = 'e-toolbar-wrapper';\n/**\n * @hidden\n\n */\nexport var CLS_POPUP = 'e-popup';\n/**\n * @hidden\n\n */\nexport var CLS_SEPARATOR = 'e-separator';\n/**\n * @hidden\n\n */\nexport var CLS_MINIMIZE = 'e-minimize';\n/**\n * @hidden\n\n */\nexport var CLS_MAXIMIZE = 'e-maximize';\n/**\n * @hidden\n\n */\nexport var CLS_BACK = 'e-back';\n/**\n * @hidden\n\n */\nexport var CLS_SHOW = 'e-show';\n/**\n * @hidden\n\n */\nexport var CLS_HIDE = 'e-hide';\n/**\n * @hidden\n\n */\nexport var CLS_VISIBLE = 'e-visible';\n/**\n * @hidden\n\n */\nexport var CLS_FOCUS = 'e-focused';\n/**\n * @hidden\n\n */\nexport var CLS_RM_WHITE_SPACE = 'e-remove-white-space';\n/**\n * @hidden\n\n */\nexport var CLS_IMGRIGHT = 'e-imgright';\n/**\n * @hidden\n\n */\nexport var CLS_IMGLEFT = 'e-imgleft';\n/**\n * @hidden\n\n */\nexport var CLS_IMGCENTER = 'e-imgcenter';\n/**\n * @hidden\n\n */\nexport var CLS_IMGBREAK = 'e-imgbreak';\n/**\n * @hidden\n\n */\nexport var CLS_AUDIOBREAK = 'e-audio-break';\n/**\n * @hidden\n\n */\nexport var CLS_CLICKELEM = 'e-clickelem';\n/**\n * @hidden\n\n */\nexport var CLS_VID_CLICK_ELEM = 'e-video-clickelem';\n/**\n * @hidden\n\n */\nexport var CLS_AUDIOWRAP = 'e-audio-wrap';\n/**\n * @hidden\n\n */\nexport var CLS_VIDEOWRAP = 'e-video-wrap';\n/**\n * @hidden\n\n */\nexport var CLS_VIDEOBREAK = 'e-video-break';\n/**\n * @hidden\n\n */\nexport var CLS_CAPTION = 'e-img-caption';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_CAPTION = 'e-rte-img-caption';\n/**\n * @hidden\n\n */\nexport var CLS_CAPINLINE = 'e-caption-inline';\n/**\n * @hidden\n\n */\nexport var CLS_IMGINLINE = 'e-imginline';\n/**\n * @hidden\n\n */\nexport var CLS_AUDIOINLINE = 'e-audio-inline';\n/**\n * @hidden\n\n */\nexport var CLS_VIDEOINLINE = 'e-video-inline';\n/**\n * @hidden\n\n */\nexport var CLS_COUNT = 'e-rte-character-count';\n/**\n * @hidden\n\n */\nexport var CLS_WARNING = 'e-warning';\n/**\n * @hidden\n\n */\nexport var CLS_ERROR = 'e-error';\n/**\n * @hidden\n\n */\nexport var CLS_ICONS = 'e-icons';\n/**\n * @hidden\n\n */\nexport var CLS_ACTIVE = 'e-active';\n/**\n * @hidden\n\n */\nexport var CLS_EXPAND_OPEN = 'e-expand-open';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_ELEMENTS = 'e-rte-elements';\n/**\n * @hidden\n\n */\nexport var CLS_TB_BTN = 'e-tbar-btn';\n/**\n * @hidden\n\n */\nexport var CLS_HR_SEPARATOR = 'e-rte-horizontal-separator';\n/**\n * @hidden\n\n */\nexport var CLS_TB_IOS_FIX = 'e-tbar-ios-fixed';\n/**\n * @hidden\n\n */\nexport var CLS_LIST_PRIMARY_CONTENT = 'e-rte-list-primary-content';\n/**\n * @hidden\n\n */\nexport var CLS_NUMBERFORMATLIST_TB_BTN = 'e-rte-numberformatlist-dropdown';\n/**\n * @hidden\n\n */\nexport var CLS_BULLETFORMATLIST_TB_BTN = 'e-rte-bulletformatlist-dropdown';\n/**\n * @hidden\n\n */\nexport var CLS_FORMATS_TB_BTN = 'e-formats-tbar-btn';\n/**\n * @hidden\n\n */\nexport var CLS_FONT_NAME_TB_BTN = 'e-font-name-tbar-btn';\n/**\n * @hidden\n\n */\nexport var CLS_FONT_SIZE_TB_BTN = 'e-font-size-tbar-btn';\n/**\n * @hidden\n\n */\nexport var CLS_ALIGN_TB_BTN = 'e-alignment-tbar-btn';\n/**\n * @hidden\n\n */\nexport var CLS_FONT_COLOR_TARGET = 'e-rte-fontcolor-element';\n/**\n * @hidden\n\n */\nexport var CLS_BACKGROUND_COLOR_TARGET = 'e-rte-backgroundcolor-element';\n/**\n * @hidden\n\n */\nexport var CLS_COLOR_CONTENT = 'e-rte-color-content';\n/**\n * @hidden\n\n */\nexport var CLS_FONT_COLOR_DROPDOWN = 'e-rte-fontcolor-dropdown';\n/**\n * @hidden\n\n */\nexport var CLS_BACKGROUND_COLOR_DROPDOWN = 'e-rte-backgroundcolor-dropdown';\n/**\n * @hidden\n\n */\nexport var CLS_COLOR_PALETTE = 'e-rte-square-palette';\n/**\n * @hidden\n\n */\nexport var CLS_FONT_COLOR_PICKER = 'e-rte-fontcolor-colorpicker';\n/**\n * @hidden\n\n */\nexport var CLS_BACKGROUND_COLOR_PICKER = 'e-rte-backgroundcolor-colorpicker';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_READONLY = 'e-rte-readonly';\n/**\n * @hidden\n\n */\nexport var CLS_TABLE_SEL = 'e-cell-select';\n/**\n * @hidden\n\n */\nexport var CLS_TB_DASH_BOR = 'e-dashed-border';\n/**\n * @hidden\n\n */\nexport var CLS_TB_ALT_BOR = 'e-alternate-border';\n/**\n * @hidden\n\n */\nexport var CLS_TB_COL_RES = 'e-column-resize';\n/**\n * @hidden\n\n */\nexport var CLS_TB_ROW_RES = 'e-row-resize';\n/**\n * @hidden\n\n */\nexport var CLS_TB_BOX_RES = 'e-table-box';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_HIDDEN = 'e-rte-hidden';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_PASTE_KEEP_FORMAT = 'e-rte-keepformat';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_PASTE_REMOVE_FORMAT = 'e-rte-removeformat';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_PASTE_PLAIN_FORMAT = 'e-rte-plainformat';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_PASTE_OK = 'e-rte-pasteok';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_PASTE_CANCEL = 'e-rte-pastecancel';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_DIALOG_MIN_HEIGHT = 'e-rte-dialog-minheight';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_RES_HANDLE = 'e-resize-handle';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_RES_EAST = 'e-south-east';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_IMAGE = 'e-rte-image';\n/**\n * @hidden\n\n */\nexport var CLS_RESIZE = 'e-resize';\n/**\n * @hidden\n\n */\nexport var CLS_IMG_FOCUS = 'e-img-focus';\n/**\n * @hidden\n\n */\nexport var CLS_AUD_FOCUS = 'e-audio-focus';\n/**\n * @hidden\n\n */\nexport var CLS_VID_FOCUS = 'e-video-focus';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_DRAG_IMAGE = 'e-rte-drag-image';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_UPLOAD_POPUP = 'e-rte-upload-popup';\n/**\n * @hidden\n\n */\nexport var CLS_POPUP_OPEN = 'e-popup-open';\n/**\n * @hidden\n\n */\nexport var CLS_IMG_RESIZE = 'e-img-resize';\n/**\n * @hidden\n\n */\nexport var CLS_DROPAREA = 'e-droparea';\n/**\n * @hidden\n\n */\nexport var CLS_IMG_INNER = 'e-img-inner';\n/**\n * @hidden\n\n */\nexport var CLS_UPLOAD_FILES = 'e-upload-files';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_DIALOG_UPLOAD = 'e-rte-dialog-upload';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_RES_CNT = 'e-rte-resize';\n/**\n * @hidden\n\n */\nexport var CLS_CUSTOM_TILE = 'e-custom-tile';\n/**\n * @hidden\n\n */\nexport var CLS_NOCOLOR_ITEM = 'e-nocolor-item';\n/**\n * @hidden\n\n */\nexport var CLS_TABLE = 'e-rte-table';\n/**\n * @hidden\n\n */\nexport var CLS_TABLE_BORDER = 'e-rte-table-border';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_TABLE_RESIZE = 'e-rte-table-resize';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_FIXED_TB_EXPAND = 'e-rte-fixed-tb-expand';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_TB_ENABLED = 'e-rte-toolbar-enabled';\n/**\n * @hidden\n\n */\nexport var CLS_RTE_RES_WEST = 'e-south-west';\n","/**\n * Defines types of Render\n *\n * @hidden\n\n */\nexport var RenderType;\n(function (RenderType) {\n /* eslint-disable */\n /** Defines RenderType as Toolbar */\n RenderType[RenderType[\"Toolbar\"] = 0] = \"Toolbar\";\n /** Defines RenderType as Content */\n RenderType[RenderType[\"Content\"] = 1] = \"Content\";\n /** Defines RenderType as Popup */\n RenderType[RenderType[\"Popup\"] = 2] = \"Popup\";\n /** Defines RenderType as LinkToolbar */\n RenderType[RenderType[\"LinkToolbar\"] = 3] = \"LinkToolbar\";\n /** Defines RenderType as TextToolbar */\n RenderType[RenderType[\"TextToolbar\"] = 4] = \"TextToolbar\";\n /** Defines RenderType as ImageToolbar */\n RenderType[RenderType[\"ImageToolbar\"] = 5] = \"ImageToolbar\";\n /** Defines RenderType as AudioToolbar */\n RenderType[RenderType[\"AudioToolbar\"] = 6] = \"AudioToolbar\";\n /** Defines RenderType as AudioToolbar */\n RenderType[RenderType[\"VideoToolbar\"] = 7] = \"VideoToolbar\";\n /** Defines RenderType as InlineToolbar */\n RenderType[RenderType[\"InlineToolbar\"] = 8] = \"InlineToolbar\";\n /** Defines RenderType as TableToolbar */\n RenderType[RenderType[\"TableToolbar\"] = 9] = \"TableToolbar\";\n /* eslint-enable */\n})(RenderType || (RenderType = {}));\n/**\n * Defines types to be used as Toolbar.\n */\nexport var ToolbarType;\n(function (ToolbarType) {\n /* eslint-disable */\n /** Defines ToolbarType as Standard */\n ToolbarType[\"Expand\"] = \"Expand\";\n /** Defines ToolbarType as MultiRow */\n ToolbarType[\"MultiRow\"] = \"MultiRow\";\n /** Defines ToolbarType as Scrollable */\n ToolbarType[\"Scrollable\"] = \"Scrollable\";\n /* eslint-enable */\n})(ToolbarType || (ToolbarType = {}));\n/**\n * Defines the type of dialog, which open or close in the Rich Text Editor.\n */\nexport var DialogType;\n(function (DialogType) {\n /* eslint-disable */\n /** Defines ToolbarType as Standard */\n DialogType[\"InsertLink\"] = \"InsertLink\";\n /** Defines ToolbarType as MultiRow */\n DialogType[\"InsertImage\"] = \"InsertImage\";\n /** Defines DialogType as Audio*/\n DialogType[\"InsertAudio\"] = \"InsertAudio\";\n /** Defines DialogType as Video*/\n DialogType[\"InsertVideo\"] = \"InsertVideo\";\n /** Defines ToolbarType as Scrollable */\n DialogType[\"InsertTable\"] = \"InsertTable\";\n /* eslint-enable */\n})(DialogType || (DialogType = {}));\n","import { RenderType } from '../base/enum';\nimport * as events from '../base/constant';\n/**\n * Content module is used to render Rich Text Editor content\n *\n * @hidden\n\n */\nvar Render = /** @class */ (function () {\n /**\n * Constructor for render module\n *\n * @param {IRichTextEditor} parent - specifies the parent\n * @param {ServiceLocator} locator - specifies the locator.\n * @returns {void}\n */\n function Render(parent, locator) {\n this.parent = parent;\n this.locator = locator;\n this.renderer = this.locator.getService('rendererFactory');\n this.addEventListener();\n }\n /**\n * To initialize Rich Text Editor header, content and footer rendering\n *\n * @returns {void}\n * @hidden\n\n */\n Render.prototype.render = function () {\n // eslint-disable-next-line\n var rteObj = this.parent;\n this.contentRenderer = this.renderer.getRenderer(RenderType.Content);\n this.contentRenderer.renderPanel();\n };\n /**\n * Refresh the entire RichTextEditor.\n *\n * @param {NotifyArgs} e - specifies the arguments.\n * @returns {void}\n */\n Render.prototype.refresh = function (e) {\n if (e === void 0) { e = { requestType: 'refresh' }; }\n this.parent.notify(e.requestType + \"-begin\", e);\n };\n /**\n * Destroy the entire RichTextEditor.\n *\n * @returns {void}\n */\n Render.prototype.destroy = function () {\n this.removeEventListener();\n };\n Render.prototype.moduleDestroy = function () {\n this.parent = null;\n };\n Render.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.modelChanged, this.refresh, this);\n this.parent.on(events.keyUp, this.keyUp, this);\n this.parent.on(events.moduleDestroy, this.moduleDestroy, this);\n };\n Render.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.modelChanged, this.refresh);\n this.parent.off(events.keyUp, this.keyUp);\n this.parent.off(events.moduleDestroy, this.moduleDestroy);\n };\n Render.prototype.keyUp = function (e) {\n if (this.parent.editorMode === 'HTML') {\n switch (e.args.which) {\n case 46:\n case 8:\n // eslint-disable-next-line\n var childNodes = this.parent.contentModule.getEditPanel().childNodes;\n if ((childNodes.length === 0) ||\n (childNodes.length === 1 && childNodes[0].childNodes.length === 0 && ((childNodes[0].tagName === 'BR') ||\n ((childNodes[0].tagName === 'P' || childNodes[0].tagName === 'DIV') && childNodes[0].textContent === '')))) {\n var node = this.parent.contentModule.getEditPanel();\n if (this.parent.enterKey === 'DIV') {\n node.innerHTML = '
';\n }\n else if (this.parent.enterKey === 'BR') {\n node.innerHTML = '
';\n }\n else {\n node.innerHTML = '
';\n }\n this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), node.childNodes[0], 0);\n }\n break;\n }\n }\n };\n return Render;\n}());\nexport { Render };\n","/**\n * Constant values for Common\n */\n/**\n * Keydown event trigger\n *\n * @hidden\n */\nexport var KEY_DOWN = 'keydown';\n/**\n * Undo and Redo action HTML plugin events\n *\n * @hidden\n */\nexport var ACTION = 'action';\n/**\n * Formats plugin events\n *\n * @hidden\n */\nexport var FORMAT_TYPE = 'format-type';\n/**\n * Keydown handler event trigger\n *\n * @hidden\n */\nexport var KEY_DOWN_HANDLER = 'keydown-handler';\n/**\n * List plugin events\n *\n * @hidden\n */\nexport var LIST_TYPE = 'list-type';\n/**\n * Keyup handler event trigger\n *\n * @hidden\n */\nexport var KEY_UP_HANDLER = 'keyup-handler';\n/**\n * Keyup event trigger\n *\n * @hidden\n */\nexport var KEY_UP = 'keyup';\n/**\n * Model changed plugin event trigger\n *\n * @hidden\n */\nexport var MODEL_CHANGED_PLUGIN = 'model_changed_plugin';\n/**\n * Model changed event trigger\n *\n * @hidden\n */\nexport var MODEL_CHANGED = 'model_changed';\n/**\n * PasteCleanup plugin for MSWord content\n *\n * @hidden\n */\nexport var MS_WORD_CLEANUP_PLUGIN = 'ms_word_cleanup_plugin';\n/**\n * PasteCleanup for MSWord content\n *\n * @hidden\n */\nexport var MS_WORD_CLEANUP = 'ms_word_cleanup';\n/**\n * ActionBegin event callback\n *\n * @hidden\n */\nexport var ON_BEGIN = 'onBegin';\n/**\n * Callback for spacelist action\n *\n * @hidden\n */\nexport var SPACE_ACTION = 'actionBegin';\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, NotifyPropertyChanges, Event } from '@syncfusion/ej2-base';\nimport { Base } from '@syncfusion/ej2-base';\nvar keyCode = {\n 'backspace': 8,\n 'tab': 9,\n 'enter': 13,\n 'shift': 16,\n 'control': 17,\n 'alt': 18,\n 'pause': 19,\n 'capslock': 20,\n 'space': 32,\n 'escape': 27,\n 'pageup': 33,\n 'pagedown': 34,\n 'end': 35,\n 'home': 36,\n 'leftarrow': 37,\n 'uparrow': 38,\n 'rightarrow': 39,\n 'downarrow': 40,\n 'insert': 45,\n 'delete': 46,\n 'f1': 112,\n 'f2': 113,\n 'f3': 114,\n 'f4': 115,\n 'f5': 116,\n 'f6': 117,\n 'f7': 118,\n 'f8': 119,\n 'f9': 120,\n 'f10': 121,\n 'f11': 122,\n 'f12': 123,\n 'semicolon': 186,\n 'plus': 187,\n 'comma': 188,\n 'minus': 189,\n 'dot': 190,\n 'forwardslash': 191,\n 'graveaccent': 192,\n 'openbracket': 219,\n 'backslash': 220,\n 'closebracket': 221,\n 'singlequote': 222,\n ']': 221,\n '[': 219,\n '=': 187\n};\n/**\n * KeyboardEvents class enables you to bind key action desired key combinations for ex., Ctrl+A, Delete, Alt+Space etc.\n * ```html\n *
;\n * \n * ```\n *\n * @hidden\n\n */\nvar KeyboardEvents = /** @class */ (function (_super) {\n __extends(KeyboardEvents, _super);\n /**\n * Initializes the KeyboardEvents\n *\n * @param {HTMLElement} element - specifies the elements.\n * @param {KeyboardEventsModel} options - specify the options\n */\n function KeyboardEvents(element, options) {\n var _this = _super.call(this, options, element) || this;\n /**\n * To handle a key press event returns null\n *\n * @param {KeyboardEventArgs} e - specifies the event arguments.\n * @returns {void}\n */\n _this.keyPressHandler = function (e) {\n /* eslint-disable */\n var isAltKey = e.altKey;\n var isCtrlKey = e.ctrlKey;\n var isShiftKey = e.shiftKey;\n var isMetaKey = e.metaKey;\n /* eslint-enable */\n var curkeyCode = e.which;\n var keys = Object.keys(_this.keyConfigs);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n var configCollection = _this.keyConfigs[\"\" + key].split(',');\n for (var _a = 0, configCollection_1 = configCollection; _a < configCollection_1.length; _a++) {\n var rconfig = configCollection_1[_a];\n var rKeyObj = KeyboardEvents_1.getKeyConfigData(rconfig.trim());\n if (isAltKey === rKeyObj.altKey && (isCtrlKey === rKeyObj.ctrlKey || isMetaKey) &&\n isShiftKey === rKeyObj.shiftKey && curkeyCode === rKeyObj.keyCode) {\n e.action = key;\n }\n }\n }\n if (_this.keyAction) {\n _this.keyAction(e);\n }\n };\n _this.bind();\n return _this;\n }\n KeyboardEvents_1 = KeyboardEvents;\n /**\n * Unwire bound events and destroy the instance.\n *\n * @returns {void}\n */\n KeyboardEvents.prototype.destroy = function () {\n this.unwireEvents();\n _super.prototype.destroy.call(this);\n };\n /**\n * Function can be used to specify certain action if a property is changed\n *\n * @param {KeyboardEventsModel} newProp - specifies the keyboard event.\n * @param {KeyboardEventsModel} oldProp - specifies the old property.\n * @returns {void}\n * @private\n */\n // eslint-disable-next-line\n KeyboardEvents.prototype.onPropertyChanged = function (newProp, oldProp) {\n // No code are needed\n };\n KeyboardEvents.prototype.bind = function () {\n this.wireEvents();\n };\n /**\n * To get the module name, returns 'keyboard'.\n *\n * @returns {void}\n */\n KeyboardEvents.prototype.getModuleName = function () {\n return 'keyboard';\n };\n /**\n * Wiring event handlers to events\n *\n * @returns {void}\n */\n KeyboardEvents.prototype.wireEvents = function () {\n this.element.addEventListener(this.eventName, this.keyPressHandler);\n };\n /**\n * Unwiring event handlers to events\n *\n * @returns {void}\n */\n KeyboardEvents.prototype.unwireEvents = function () {\n this.element.removeEventListener(this.eventName, this.keyPressHandler);\n };\n /**\n * To get the key configuration data\n *\n * @param {string} config - configuration data\n * @returns {KeyData} - specifies the key data\n */\n KeyboardEvents.getKeyConfigData = function (config) {\n if (config in this.configCache) {\n return this.configCache[\"\" + config];\n }\n var keys = config.toLowerCase().split('+');\n var keyData = {\n altKey: (keys.indexOf('alt') !== -1 ? true : false),\n ctrlKey: (keys.indexOf('ctrl') !== -1 ? true : false),\n shiftKey: (keys.indexOf('shift') !== -1 ? true : false),\n keyCode: null\n };\n if (keys[keys.length - 1].length > 1 && !!Number(keys[keys.length - 1])) {\n keyData.keyCode = Number(keys[keys.length - 1]);\n }\n else {\n keyData.keyCode = KeyboardEvents_1.getKeyCode(keys[keys.length - 1]);\n }\n KeyboardEvents_1.configCache[\"\" + config] = keyData;\n return keyData;\n };\n // Return the keycode value as string\n KeyboardEvents.getKeyCode = function (keyVal) {\n return keyCode[\"\" + keyVal] || keyVal.toUpperCase().charCodeAt(0);\n };\n var KeyboardEvents_1;\n KeyboardEvents.configCache = {};\n __decorate([\n Property({})\n ], KeyboardEvents.prototype, \"keyConfigs\", void 0);\n __decorate([\n Property('keyup')\n ], KeyboardEvents.prototype, \"eventName\", void 0);\n __decorate([\n Event()\n ], KeyboardEvents.prototype, \"keyAction\", void 0);\n KeyboardEvents = KeyboardEvents_1 = __decorate([\n NotifyPropertyChanges\n ], KeyboardEvents);\n return KeyboardEvents;\n}(Base));\nexport { KeyboardEvents };\n","import { removeClass, selectAll, isNullOrUndefined, EventHandler } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport { CLS_EXPAND_OPEN, CLS_TB_ITEM, CLS_ACTIVE } from '../base/classes';\nimport * as CONSTANT from '../../common/constant';\nimport { RenderType } from '../base/enum';\nimport { KeyboardEvents } from '../actions/keyboard';\n/**\n * Content module is used to render Rich Text Editor content\n *\n * @hidden\n\n */\nvar ViewSource = /** @class */ (function () {\n /**\n * Constructor for view source module\n *\n * @param {IRichTextEditor} parent - specifies the parent element.\n * @param {ServiceLocator} locator - specifies the locator.\n * @returns {void}\n */\n function ViewSource(parent, locator) {\n this.parent = parent;\n var serviceLocator = locator;\n this.rendererFactory = serviceLocator.getService('rendererFactory');\n this.addEventListener();\n }\n ViewSource.prototype.addEventListener = function () {\n this.parent.on(events.sourceCode, this.sourceCode, this);\n this.parent.on(events.initialEnd, this.onInitialEnd, this);\n this.parent.on(events.updateSource, this.updateSourceCode, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.moduleDestroy, this.moduleDestroy, this);\n };\n ViewSource.prototype.onInitialEnd = function () {\n this.parent.formatter.editorManager.observer.on(CONSTANT.KEY_DOWN_HANDLER, this.onKeyDown, this);\n };\n ViewSource.prototype.removeEventListener = function () {\n this.unWireEvent();\n this.parent.off(events.sourceCode, this.sourceCode);\n this.parent.off(events.updateSource, this.updateSourceCode);\n this.parent.off(events.initialEnd, this.onInitialEnd);\n this.parent.off(events.destroy, this.destroy);\n this.parent.off(events.moduleDestroy, this.moduleDestroy);\n this.parent.formatter.editorManager.observer.off(CONSTANT.KEY_DOWN_HANDLER, this.onKeyDown);\n };\n ViewSource.prototype.getSourceCode = function () {\n return this.parent.createElement('textarea', { className: 'e-rte-srctextarea' + ' ' + this.parent.cssClass });\n };\n ViewSource.prototype.wireEvent = function (element) {\n this.keyboardModule = new KeyboardEvents(element, {\n keyAction: this.previewKeyDown.bind(this), keyConfigs: this.parent.formatter.keyConfig, eventName: 'keydown'\n });\n EventHandler.add(this.previewElement, 'mousedown', this.mouseDownHandler, this);\n };\n ViewSource.prototype.unWireEvent = function () {\n if (this.keyboardModule) {\n this.keyboardModule.destroy();\n }\n if (this.previewElement) {\n EventHandler.remove(this.previewElement, 'mousedown', this.mouseDownHandler);\n }\n };\n ViewSource.prototype.wireBaseKeyDown = function () {\n this.parent.keyboardModule = new KeyboardEvents(this.contentModule.getEditPanel(), {\n keyAction: this.parent.keyDown.bind(this.parent), keyConfigs: this.parent.formatter.keyConfig, eventName: 'keydown'\n });\n };\n ViewSource.prototype.unWireBaseKeyDown = function () {\n this.parent.keyboardModule.destroy();\n };\n ViewSource.prototype.mouseDownHandler = function (e) {\n this.parent.notify(events.sourceCodeMouseDown, { args: e });\n };\n ViewSource.prototype.previewKeyDown = function (event) {\n switch (event.action) {\n case 'html-source':\n this.updateSourceCode(event);\n event.preventDefault();\n break;\n case 'toolbar-focus':\n if (this.parent.toolbarSettings.enable) {\n var selector = '.e-toolbar-item[aria-disabled=\"false\"][title] [tabindex]';\n this.parent.toolbarModule.baseToolbar.toolbarObj.element.querySelector(selector).focus();\n }\n break;\n }\n };\n ViewSource.prototype.onKeyDown = function (e) {\n switch (e.event.action) {\n case 'html-source':\n e.event.preventDefault();\n this.sourceCode(e);\n e.callBack({\n requestType: 'SourceCode',\n editorMode: 'HTML',\n event: e.event\n });\n break;\n }\n };\n /**\n * sourceCode method\n *\n * @param {ClickEventArgs} args - specifies the click event.\n * @returns {void}\n * @hidden\n\n */\n ViewSource.prototype.sourceCode = function (args) {\n this.parent.isBlur = false;\n this.parent.trigger(events.actionBegin, { requestType: 'SourceCode', targetItem: 'SourceCode', args: args });\n var tbItems = selectAll('.' + CLS_TB_ITEM, this.parent.element);\n this.contentModule = this.rendererFactory.getRenderer(RenderType.Content);\n this.parent.notify(events.updateToolbarItem, {\n targetItem: 'SourceCode', updateItem: 'Preview',\n baseToolbar: this.parent.getBaseToolbarObject()\n });\n if (isNullOrUndefined(this.previewElement)) {\n this.previewElement = this.getSourceCode();\n }\n this.parent.updateValueData();\n if (this.parent.iframeSettings.enable) {\n var rteContent = void 0;\n if (isNullOrUndefined(this.parent.element.querySelector('#' + this.parent.element.id + '_source-view'))) {\n rteContent = this.parent.createElement('div', {\n className: 'e-source-content', id: this.parent.element.id + '_source-view'\n });\n }\n else {\n rteContent = this.parent.element.querySelector('#' + this.parent.element.id + '_source-view');\n }\n rteContent.appendChild(this.previewElement);\n this.parent.element.appendChild(rteContent);\n rteContent.style.height = this.contentModule.getPanel().style.height;\n rteContent.style.marginTop = this.contentModule.getPanel().style.marginTop;\n this.getPanel().value = this.getTextAreaValue();\n this.contentModule.getPanel().style.display = 'none';\n rteContent.style.display = 'block';\n this.getPanel().style.display = 'block';\n }\n else {\n this.contentModule.getPanel().appendChild(this.previewElement);\n this.getPanel().value = this.getTextAreaValue();\n this.contentModule.getEditPanel().style.display = 'none';\n this.previewElement.style.display = 'block';\n }\n this.parent.isBlur = false;\n this.parent.disableToolbarItem(this.parent.toolbarSettings.items);\n this.parent.enableToolbarItem('SourceCode');\n if (this.parent.getToolbar()) {\n removeClass([this.parent.getToolbar()], [CLS_EXPAND_OPEN]);\n }\n removeClass(tbItems, [CLS_ACTIVE]);\n this.parent.setContentHeight('sourceCode', true);\n this.wireEvent(this.previewElement);\n this.unWireBaseKeyDown();\n this.previewElement.focus();\n this.parent.updateValue();\n if (!isNullOrUndefined(this.parent.placeholder) && !this.parent.iframeSettings.enable) {\n var placeHolderWrapper = this.parent.element.querySelector('.rte-placeholder.e-rte-placeholder');\n placeHolderWrapper.style.display = 'none';\n }\n this.parent.trigger(events.actionComplete, { requestType: 'SourceCode', targetItem: 'SourceCode', args: args });\n this.parent.invokeChangeEvent();\n };\n /**\n * updateSourceCode method\n *\n * @param {ClickEventArgs} args - specifies the click event.\n * @returns {void}\n * @hidden\n\n */\n ViewSource.prototype.updateSourceCode = function (args) {\n this.parent.isBlur = false;\n this.parent.trigger(events.actionBegin, { requestType: 'Preview', targetItem: 'Preview', args: args });\n var editHTML = this.getPanel();\n this.parent.notify(events.updateToolbarItem, {\n targetItem: 'Preview', updateItem: 'SourceCode',\n baseToolbar: this.parent.getBaseToolbarObject()\n });\n var serializeValue = this.parent.serializeValue(editHTML.value);\n var value;\n if (serializeValue === null || serializeValue === '') {\n if (this.parent.enterKey === 'DIV') {\n value = '
';\n }\n else if (this.parent.enterKey === 'BR') {\n value = '
';\n }\n else {\n value = '
';\n }\n }\n else {\n value = serializeValue;\n }\n if (this.parent.iframeSettings.enable) {\n editHTML.parentElement.style.display = 'none';\n editHTML.style.display = 'none';\n this.contentModule.getPanel().style.display = 'block';\n this.contentModule.getEditPanel().innerHTML = value;\n }\n else {\n editHTML.style.display = 'none';\n this.contentModule.getEditPanel().style.display = 'block';\n this.contentModule.getEditPanel().innerHTML = value;\n }\n this.parent.isBlur = false;\n this.parent.enableToolbarItem(this.parent.toolbarSettings.items);\n if (this.parent.getToolbar()) {\n removeClass([this.parent.getToolbar()], [CLS_EXPAND_OPEN]);\n }\n this.parent.setContentHeight('preview', true);\n this.unWireEvent();\n this.wireBaseKeyDown();\n this.contentModule.getEditPanel().focus();\n this.parent.updateValue();\n if (!isNullOrUndefined(this.parent.placeholder) && this.contentModule.getEditPanel().innerText.length === 0) {\n var placeHolderWrapper = this.parent.element.querySelector('.rte-placeholder.e-rte-placeholder');\n placeHolderWrapper.style.display = 'block';\n }\n this.parent.trigger(events.actionComplete, { requestType: 'Preview', targetItem: 'Preview', args: args });\n this.parent.formatter.enableUndo(this.parent);\n this.parent.addAudioVideoWrapper();\n this.parent.invokeChangeEvent();\n this.parent.notify(events.tableclass, {});\n };\n ViewSource.prototype.getTextAreaValue = function () {\n return (this.contentModule.getEditPanel().innerHTML === '
') ||\n (this.contentModule.getEditPanel().innerHTML === '
') ||\n (this.contentModule.getEditPanel().innerHTML === '
') ||\n (this.contentModule.getEditPanel().childNodes.length === 1 &&\n (this.contentModule.getEditPanel().childNodes[0].tagName === 'P' &&\n this.contentModule.getEditPanel().innerHTML.length === 7) ||\n (this.contentModule.getEditPanel().childNodes[0].tagName === 'DIV' &&\n this.contentModule.getEditPanel().innerHTML.length === 11)) ? '' : this.parent.value;\n };\n /**\n * getPanel method\n *\n * @returns {void}\n * @hidden\n\n */\n ViewSource.prototype.getPanel = function () {\n return this.parent.element && this.parent.element.querySelector('.e-rte-srctextarea');\n };\n /**\n * getViewPanel method\n *\n * @returns {void}\n * @hidden\n\n */\n ViewSource.prototype.getViewPanel = function () {\n return (this.parent.iframeSettings.enable && this.getPanel()) ? this.getPanel().parentElement : this.getPanel();\n };\n /**\n * Destroy the entire RichTextEditor.\n *\n * @returns {void}\n * @hidden\n\n */\n ViewSource.prototype.destroy = function () {\n this.removeEventListener();\n };\n ViewSource.prototype.moduleDestroy = function () {\n this.parent = null;\n };\n return ViewSource;\n}());\nexport { ViewSource };\n","/**\n * @hidden\n\n */\nexport var executeGroup = {\n 'bold': {\n command: 'Style',\n subCommand: 'Bold',\n value: 'strong'\n },\n 'italic': {\n command: 'Style',\n subCommand: 'Italic',\n value: 'em'\n },\n 'underline': {\n command: 'Style',\n subCommand: 'Underline',\n value: 'span'\n },\n 'strikeThrough': {\n command: 'Style',\n subCommand: 'StrikeThrough',\n value: 'span'\n },\n 'insertCode': {\n command: 'Formats',\n subCommand: 'Pre',\n value: 'pre'\n },\n 'superscript': {\n command: 'Effects',\n subCommand: 'SuperScript',\n value: 'sup'\n },\n 'subscript': {\n command: 'Effects',\n subCommand: 'SubScript',\n value: 'sub'\n },\n 'uppercase': {\n command: 'Casing',\n subCommand: 'UpperCase'\n },\n 'lowercase': {\n command: 'Casing',\n subCommand: 'LowerCase'\n },\n 'fontColor': {\n command: 'font',\n subCommand: 'fontcolor',\n value: '#ff0000'\n },\n 'fontName': {\n command: 'font',\n subCommand: 'fontname',\n value: 'Segoe UI'\n },\n 'fontSize': {\n command: 'font',\n subCommand: 'fontsize',\n value: '10pt'\n },\n 'backColor': {\n command: 'font',\n subCommand: 'backgroundcolor',\n value: '#ffff00'\n },\n 'justifyCenter': {\n command: 'Alignments',\n subCommand: 'JustifyCenter'\n },\n 'justifyFull': {\n command: 'Alignments',\n subCommand: 'JustifyFull'\n },\n 'justifyLeft': {\n command: 'Alignments',\n subCommand: 'JustifyLeft'\n },\n 'justifyRight': {\n command: 'Alignments',\n subCommand: 'JustifyRight'\n },\n 'undo': {\n command: 'Actions',\n subCommand: 'Undo'\n },\n 'redo': {\n command: 'Actions',\n subCommand: 'Redo'\n },\n 'createLink': {\n command: 'Links',\n subCommand: 'createLink'\n },\n 'editLink': {\n command: 'Links',\n subCommand: 'createLink'\n },\n 'createImage': {\n command: 'Images',\n subCommand: 'Images'\n },\n 'formatBlock': {\n command: 'Formats',\n value: 'P'\n },\n 'heading': {\n command: 'Formats',\n value: 'H1'\n },\n 'indent': {\n command: 'Indents',\n subCommand: 'Indent'\n },\n 'outdent': {\n command: 'Indents',\n subCommand: 'Outdent'\n },\n 'insertHTML': {\n command: 'InsertHTML',\n subCommand: 'InsertHTML',\n value: ''\n },\n 'insertText': {\n command: 'InsertText',\n subCommand: 'InsertText',\n value: ''\n },\n 'insertHorizontalRule': {\n command: 'InsertHTML',\n subCommand: 'InsertHTML',\n value: '
'\n },\n 'insertImage': {\n command: 'Images',\n subCommand: 'Image'\n },\n 'insertAudio': {\n command: 'Audios',\n subCommand: 'Audio'\n },\n 'insertVideo': {\n command: 'Videos',\n subCommand: 'Video'\n },\n 'editImage': {\n command: 'Images',\n subCommand: 'Image'\n },\n 'insertTable': {\n command: 'Table',\n subCommand: 'CreateTable'\n },\n 'insertBrOnReturn': {\n command: 'InsertHTML',\n subCommand: 'InsertHTML',\n value: '
'\n },\n 'insertOrderedList': {\n command: 'Lists',\n value: 'OL'\n },\n 'insertUnorderedList': {\n command: 'Lists',\n value: 'UL'\n },\n 'insertParagraph': {\n command: 'Formats',\n value: 'P'\n },\n 'removeFormat': {\n command: 'Clear',\n subCommand: 'ClearFormat'\n }\n};\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * ServiceLocator\n *\n * @hidden\n\n */\nvar ServiceLocator = /** @class */ (function () {\n function ServiceLocator() {\n this.services = {};\n }\n /* eslint-disable */\n /**\n * register method\n *\n * @param {string} name - specifies the name.\n * @param {T} type - specifies the type.\n * @returns {void}\n * @hidden\n\n */\n /* eslint-enable */\n ServiceLocator.prototype.register = function (name, type) {\n if (isNullOrUndefined(this.services[\"\" + name])) {\n this.services[\"\" + name] = type;\n }\n };\n /**\n * getService method\n *\n * @param {string} name - specifies the name.\n * @returns {void}\n * @hidden\n\n */\n ServiceLocator.prototype.getService = function (name) {\n if (isNullOrUndefined(this.services[\"\" + name])) {\n // eslint-disable-next-line\n throw \"The service \" + name + \" is not registered\";\n }\n return this.services[\"\" + name];\n };\n return ServiceLocator;\n}());\nexport { ServiceLocator };\n","import { isNullOrUndefined, getEnumValue } from '@syncfusion/ej2-base';\nimport { RenderType } from '../base/enum';\n/**\n * RendererFactory\n *\n * @hidden\n\n */\nvar RendererFactory = /** @class */ (function () {\n function RendererFactory() {\n this.rendererMap = {};\n }\n /**\n * addRenderer method\n *\n * @param {RenderType} name - specifies the render type\n * @param {IRenderer} type - specifies the renderer.\n * @returns {void}\n * @hidden\n\n */\n RendererFactory.prototype.addRenderer = function (name, type) {\n var rName = getEnumValue(RenderType, name);\n if (isNullOrUndefined(this.rendererMap[\"\" + rName])) {\n this.rendererMap[\"\" + rName] = type;\n }\n };\n /**\n * getRenderer method\n *\n * @param {RenderType} name - specifies the render type\n * @returns {void}\n * @hidden\n\n */\n RendererFactory.prototype.getRenderer = function (name) {\n var rName = getEnumValue(RenderType, name);\n if (isNullOrUndefined(this.rendererMap[\"\" + rName])) {\n // eslint-disable-next-line\n throw \"The renderer \" + rName + \" is not found\";\n }\n else {\n return this.rendererMap[\"\" + rName];\n }\n };\n return RendererFactory;\n}());\nexport { RendererFactory };\n","import * as events from '../base/constant';\n/**\n * `ExecCommandCallBack` module is used to run the editor manager command\n */\nvar ExecCommandCallBack = /** @class */ (function () {\n function ExecCommandCallBack(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n ExecCommandCallBack.prototype.addEventListener = function () {\n this.parent.on(events.execCommandCallBack, this.commandCallBack, this);\n this.parent.on(events.destroy, this.removeEventListener, this);\n };\n ExecCommandCallBack.prototype.commandCallBack = function (args) {\n if (args.requestType !== 'Undo' && args.requestType !== 'Redo') {\n this.parent.formatter.saveData();\n }\n this.parent.notify(events.toolbarRefresh, { args: args });\n this.parent.notify(events.count, {});\n };\n ExecCommandCallBack.prototype.removeEventListener = function () {\n this.parent.off(events.execCommandCallBack, this.commandCallBack);\n this.parent.off(events.destroy, this.removeEventListener);\n };\n return ExecCommandCallBack;\n}());\nexport { ExecCommandCallBack };\n","var instances = 'ej2_instances';\nvar uid = 0;\nvar isBlazorPlatform = false;\n/**\n * Function to check whether the platform is blazor or not.\n *\n * @returns {void} result\n * @private\n */\nexport function disableBlazorMode() {\n isBlazorPlatform = false;\n}\n/**\n * Create Instance from constructor function with desired parameters.\n *\n * @param {Function} classFunction - Class function to which need to create instance\n * @param {any[]} params - Parameters need to passed while creating instance\n * @returns {any} ?\n * @private\n */\n// eslint-disable-next-line\nexport function createInstance(classFunction, params) {\n var arrayParam = params;\n arrayParam.unshift(undefined);\n return new (Function.prototype.bind.apply(classFunction, arrayParam));\n}\n/**\n * To run a callback function immediately after the browser has completed other operations.\n *\n * @param {Function} handler - callback function to be triggered.\n * @returns {Function} ?\n * @private\n */\nexport function setImmediate(handler) {\n var unbind;\n // eslint-disable-next-line\n var num = new Uint16Array(5);\n var intCrypto = window.msCrypto || window.crypto;\n intCrypto.getRandomValues(num);\n var secret = 'ej2' + combineArray(num);\n // eslint-disable-next-line\n var messageHandler = function (event) {\n if (event.source === window && typeof event.data === 'string' && event.data.length <= 32 && event.data === secret) {\n handler();\n unbind();\n }\n };\n window.addEventListener('message', messageHandler, false);\n window.postMessage(secret, '*');\n return unbind = function () {\n window.removeEventListener('message', messageHandler);\n handler = messageHandler = secret = undefined;\n };\n}\n/**\n * To get nameSpace value from the desired object.\n *\n * @param {string} nameSpace - String value to the get the inner object\n * @param {any} obj - Object to get the inner object value.\n * @returns {any} ?\n * @private\n */\n// eslint-disable-next-line\nexport function getValue(nameSpace, obj) {\n // eslint-disable-next-line\n var value = obj;\n var splits = nameSpace.replace(/\\[/g, '.').replace(/\\]/g, '').split('.');\n for (var i = 0; i < splits.length && !isUndefined(value); i++) {\n value = value[splits[parseInt(i.toString(), 10)]];\n }\n return value;\n}\n/**\n * To set value for the nameSpace in desired object.\n *\n * @param {string} nameSpace - String value to the get the inner object\n * @param {any} value - Value that you need to set.\n * @param {any} obj - Object to get the inner object value.\n * @returns {any} ?\n * @private\n */\n// eslint-disable-next-line\nexport function setValue(nameSpace, value, obj) {\n var keys = nameSpace.replace(/\\[/g, '.').replace(/\\]/g, '').split('.');\n // eslint-disable-next-line\n var start = obj || {};\n // eslint-disable-next-line\n var fromObj = start;\n var i;\n var length = keys.length;\n var key;\n for (i = 0; i < length; i++) {\n key = keys[parseInt(i.toString(), 10)];\n if (i + 1 === length) {\n fromObj[\"\" + key] = value === undefined ? {} : value;\n }\n else if (isNullOrUndefined(fromObj[\"\" + key])) {\n fromObj[\"\" + key] = {};\n }\n fromObj = fromObj[\"\" + key];\n }\n return start;\n}\n/**\n * Delete an item from Object\n *\n * @param {any} obj - Object in which we need to delete an item.\n * @param {string} key - String value to the get the inner object\n * @returns {void} ?\n * @private\n */\n// eslint-disable-next-line\nexport function deleteObject(obj, key) {\n delete obj[\"\" + key];\n}\n/**\n *@private\n */\n// eslint-disable-next-line\nexport var containerObject = typeof window !== 'undefined' ? window : {};\n/**\n * Check weather the given argument is only object.\n *\n * @param {any} obj - Object which is need to check.\n * @returns {boolean} ?\n * @private\n */\n// eslint-disable-next-line\nexport function isObject(obj) {\n var objCon = {};\n return (!isNullOrUndefined(obj) && obj.constructor === objCon.constructor);\n}\n/**\n * To get enum value by giving the string.\n *\n * @param {any} enumObject - Enum object.\n * @param {string} enumValue - Enum value to be searched\n * @returns {any} ?\n * @private\n */\n// eslint-disable-next-line\nexport function getEnumValue(enumObject, enumValue) {\n // eslint-disable-next-line\n return enumObject[enumValue];\n}\n/**\n * Merge the source object into destination object.\n *\n * @param {any} source - source object which is going to merge with destination object\n * @param {any} destination - object need to be merged\n * @returns {void} ?\n * @private\n */\nexport function merge(source, destination) {\n if (!isNullOrUndefined(destination)) {\n var temrObj = source;\n var tempProp = destination;\n var keys = Object.keys(destination);\n var deepmerge = 'deepMerge';\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n if (!isNullOrUndefined(temrObj[\"\" + deepmerge]) && (temrObj[\"\" + deepmerge].indexOf(key) !== -1) &&\n (isObject(tempProp[\"\" + key]) || Array.isArray(tempProp[\"\" + key]))) {\n extend(temrObj[\"\" + key], temrObj[\"\" + key], tempProp[\"\" + key], true);\n }\n else {\n temrObj[\"\" + key] = tempProp[\"\" + key];\n }\n }\n }\n}\n/**\n * Extend the two object with newer one.\n *\n * @param {any} copied - Resultant object after merged\n * @param {Object} first - First object need to merge\n * @param {Object} second - Second object need to merge\n * @param {boolean} deep ?\n * @returns {Object} ?\n * @private\n */\nexport function extend(copied, first, second, deep) {\n var result = copied && typeof copied === 'object' ? copied : {};\n var length = arguments.length;\n if (deep) {\n length = length - 1;\n }\n var _loop_1 = function (i) {\n // eslint-disable-next-line\n if (!arguments_1[i]) {\n return \"continue\";\n }\n // eslint-disable-next-line\n var obj1 = arguments_1[i];\n Object.keys(obj1).forEach(function (key) {\n var src = result[\"\" + key];\n var copy = obj1[\"\" + key];\n var clone;\n var isArrayChanged = Array.isArray(copy) && Array.isArray(src) && (copy.length !== src.length);\n // eslint-disable-next-line\n var blazorEventExtend = isBlazor() ? (!(src instanceof Event) && !isArrayChanged) : true;\n if (deep && blazorEventExtend && (isObject(copy) || Array.isArray(copy))) {\n if (isObject(copy)) {\n clone = src ? src : {};\n // eslint-disable-next-line\n if (Array.isArray(clone) && clone.hasOwnProperty('isComplexArray')) {\n extend(clone, {}, copy, deep);\n }\n else {\n result[\"\" + key] = extend(clone, {}, copy, deep);\n }\n }\n else {\n /* istanbul ignore next */\n clone = isBlazor() ? src && Object.keys(copy).length : src ? src : [];\n // eslint-disable-next-line\n result[\"\" + key] = extend([], clone, copy, (clone && clone.length) || (copy && copy.length));\n }\n }\n else {\n result[\"\" + key] = copy;\n }\n });\n };\n var arguments_1 = arguments;\n for (var i = 1; i < length; i++) {\n _loop_1(i);\n }\n return result;\n}\n/**\n * To check whether the object is null or undefined.\n *\n * @param {Object} value - To check the object is null or undefined\n * @returns {boolean} ?\n * @private\n */\nexport function isNullOrUndefined(value) {\n return value === undefined || value === null;\n}\n/**\n * To check whether the object is undefined.\n *\n * @param {Object} value - To check the object is undefined\n * @returns {boolean} ?\n * @private\n */\nexport function isUndefined(value) {\n return ('undefined' === typeof value);\n}\n/**\n * To return the generated unique name\n *\n * @param {string} definedName - To concatenate the unique id to provided name\n * @returns {string} ?\n * @private\n */\nexport function getUniqueID(definedName) {\n return definedName + '_' + uid++;\n}\n/**\n * It limits the rate at which a function can fire. The function will fire only once every provided second instead of as quickly.\n *\n * @param {Function} eventFunction - Specifies the function to run when the event occurs\n * @param {number} delay - A number that specifies the milliseconds for function delay call option\n * @returns {Function} ?\n * @private\n */\nexport function debounce(eventFunction, delay) {\n // eslint-disable-next-line\n var out;\n return function () {\n var _this = this;\n // eslint-disable-next-line\n var args = arguments;\n var later = function () {\n out = null;\n return eventFunction.apply(_this, args);\n };\n clearTimeout(out);\n out = setTimeout(later, delay);\n };\n}\n/**\n * To convert the object to string for query url\n *\n * @param {Object} data ?\n * @returns {string} ?\n * @private\n */\n// eslint-disable-next-line\nexport function queryParams(data) {\n var array = [];\n var keys = Object.keys(data);\n for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {\n var key = keys_2[_i];\n array.push(encodeURIComponent(key) + '=' + encodeURIComponent('' + data[\"\" + key]));\n }\n return array.join('&');\n}\n/**\n * To check whether the given array contains object.\n *\n * @param {any} value - Specifies the T type array to be checked.\n * @returns {boolean} ?\n * @private\n */\nexport function isObjectArray(value) {\n var parser = Object.prototype.toString;\n if (parser.call(value) === '[object Array]') {\n if (parser.call(value[0]) === '[object Object]') {\n return true;\n }\n }\n return false;\n}\n/**\n * To check whether the child element is descendant to parent element or parent and child are same element.\n *\n * @param {Element} child - Specifies the child element to compare with parent.\n * @param {Element} parent - Specifies the parent element.\n * @returns {boolean} ?\n * @private\n */\nexport function compareElementParent(child, parent) {\n var node = child;\n if (node === parent) {\n return true;\n }\n else if (node === document || !node) {\n return false;\n }\n else {\n return compareElementParent(node.parentNode, parent);\n }\n}\n/**\n * To throw custom error message.\n *\n * @param {string} message - Specifies the error message to be thrown.\n * @returns {void} ?\n * @private\n */\nexport function throwError(message) {\n try {\n throw new Error(message);\n }\n catch (e) {\n // eslint-disable-next-line\n throw e.message + '\\n' + e.stack;\n }\n}\n/**\n * This function is used to print given element\n *\n * @param {Element} element - Specifies the print content element.\n * @param {Window} printWindow - Specifies the print window.\n * @returns {Window} ?\n * @private\n */\nexport function print(element, printWindow) {\n var div = document.createElement('div');\n var links = [].slice.call(document.getElementsByTagName('head')[0].querySelectorAll('base, link, style'));\n var blinks = [].slice.call(document.getElementsByTagName('body')[0].querySelectorAll('link, style'));\n if (blinks.length) {\n for (var l = 0, len = blinks.length; l < len; l++) {\n links.push(blinks[parseInt(l.toString(), 10)]);\n }\n }\n var reference = '';\n if (isNullOrUndefined(printWindow)) {\n printWindow = window.open('', 'print', 'height=452,width=1024,tabbar=no');\n }\n div.appendChild(element.cloneNode(true));\n for (var i = 0, len = links.length; i < len; i++) {\n reference += links[parseInt(i.toString(), 10)].outerHTML;\n }\n printWindow.document.write(' ' + reference + '' + div.innerHTML +\n '' + '');\n printWindow.document.close();\n printWindow.focus();\n // eslint-disable-next-line\n var interval = setInterval(function () {\n if (printWindow.ready) {\n printWindow.print();\n printWindow.close();\n clearInterval(interval);\n }\n }, 500);\n return printWindow;\n}\n/**\n * Function to normalize the units applied to the element.\n *\n * @param {number|string} value ?\n * @returns {string} result\n * @private\n */\nexport function formatUnit(value) {\n var result = value + '';\n if (result.match(/auto|cm|mm|in|px|pt|pc|%|em|ex|ch|rem|vw|vh|vmin|vmax/)) {\n return result;\n }\n return result + 'px';\n}\n/**\n * Function to check whether the platform is blazor or not.\n *\n * @returns {void} result\n * @private\n */\nexport function enableBlazorMode() {\n isBlazorPlatform = true;\n}\n/**\n * Function to check whether the platform is blazor or not.\n *\n * @returns {boolean} result\n * @private\n */\nexport function isBlazor() {\n return isBlazorPlatform;\n}\n/**\n * Function to convert xPath to DOM element in blazor platform\n *\n * @returns {HTMLElement} result\n * @param {HTMLElement | object} element ?\n * @private\n */\nexport function getElement(element) {\n var xPath = 'xPath';\n if (!(element instanceof Node) && isBlazor() && !isNullOrUndefined(element[\"\" + xPath])) {\n return document.evaluate(element[\"\" + xPath], document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;\n }\n return element;\n}\n/**\n * Function to fetch the Instances of a HTML element for the given component.\n *\n * @param {string | HTMLElement} element ?\n * @param {any} component ?\n * @returns {Object} ?\n * @private\n */\n// eslint-disable-next-line\nexport function getInstance(element, component) {\n // eslint-disable-next-line\n var elem = (typeof (element) === 'string') ? document.querySelector(element) : element;\n if (elem[\"\" + instances]) {\n for (var _i = 0, _a = elem[\"\" + instances]; _i < _a.length; _i++) {\n var inst = _a[_i];\n if (inst instanceof component) {\n return inst;\n }\n }\n }\n return null;\n}\n/**\n * Function to add instances for the given element.\n *\n * @param {string | HTMLElement} element ?\n * @param {Object} instance ?\n * @returns {void} ?\n * @private\n */\nexport function addInstance(element, instance) {\n // eslint-disable-next-line\n var elem = (typeof (element) === 'string') ? document.querySelector(element) : element;\n if (elem[\"\" + instances]) {\n elem[\"\" + instances].push(instance);\n }\n else {\n elem[\"\" + instances] = [instance];\n }\n}\n/**\n * Function to generate the unique id.\n *\n * @returns {any} ?\n * @private\n */\n// eslint-disable-next-line\nexport function uniqueID() {\n if ((typeof window) === 'undefined') {\n return;\n }\n // eslint-disable-next-line\n var num = new Uint16Array(5);\n var intCrypto = window.msCrypto || window.crypto;\n return intCrypto.getRandomValues(num);\n}\n/**\n *\n * @param {Int16Array} num ?\n * @returns {string} ?\n */\nfunction combineArray(num) {\n var ret = '';\n for (var i = 0; i < 5; i++) {\n ret += (i ? ',' : '') + num[parseInt(i.toString(), 10)];\n }\n return ret;\n}\n","/**\n * Parser\n */\nvar defaultNumberingSystem = {\n 'latn': {\n '_digits': '0123456789',\n '_type': 'numeric'\n }\n};\nimport { isUndefined, getValue, isBlazor } from '../util';\nvar defaultNumberSymbols = {\n 'decimal': '.',\n 'group': ',',\n 'percentSign': '%',\n 'plusSign': '+',\n 'minusSign': '-',\n 'infinity': '∞',\n 'nan': 'NaN',\n 'exponential': 'E'\n};\nvar latnNumberSystem = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];\n/**\n * Interface for parser base\n *\n * @private\n */\nvar ParserBase = /** @class */ (function () {\n function ParserBase() {\n }\n /**\n * Returns the cldr object for the culture specifies\n *\n * @param {Object} obj - Specifies the object from which culture object to be acquired.\n * @param {string} cName - Specifies the culture name.\n * @returns {Object} ?\n */\n ParserBase.getMainObject = function (obj, cName) {\n var value = isBlazor() ? cName : 'main.' + cName;\n return getValue(value, obj);\n };\n /**\n * Returns the numbering system object from given cldr data.\n *\n * @param {Object} obj - Specifies the object from which number system is acquired.\n * @returns {Object} ?\n */\n ParserBase.getNumberingSystem = function (obj) {\n return getValue('supplemental.numberingSystems', obj) || this.numberingSystems;\n };\n /**\n * Returns the reverse of given object keys or keys specified.\n *\n * @param {Object} prop - Specifies the object to be reversed.\n * @param {number[]} keys - Optional parameter specifies the custom keyList for reversal.\n * @returns {Object} ?\n */\n ParserBase.reverseObject = function (prop, keys) {\n var propKeys = keys || Object.keys(prop);\n var res = {};\n for (var _i = 0, propKeys_1 = propKeys; _i < propKeys_1.length; _i++) {\n var key = propKeys_1[_i];\n // eslint-disable-next-line\n if (!res.hasOwnProperty(prop[key])) {\n // eslint-disable-next-line\n res[prop[key]] = key;\n }\n }\n return res;\n };\n /**\n * Returns the symbol regex by skipping the escape sequence.\n *\n * @param {string[]} props - Specifies the array values to be skipped.\n * @returns {RegExp} ?\n */\n ParserBase.getSymbolRegex = function (props) {\n var regexStr = props.map(function (str) {\n return str.replace(/([.*+?^=!:${}()|[\\]/\\\\])/g, '\\\\$1');\n }).join('|');\n return new RegExp(regexStr, 'g');\n };\n /**\n *\n * @param {Object} prop ?\n * @returns {Object} ?\n */\n ParserBase.getSymbolMatch = function (prop) {\n var matchKeys = Object.keys(defaultNumberSymbols);\n var ret = {};\n for (var _i = 0, matchKeys_1 = matchKeys; _i < matchKeys_1.length; _i++) {\n var key = matchKeys_1[_i];\n // eslint-disable-next-line\n ret[prop[key]] = defaultNumberSymbols[key];\n }\n return ret;\n };\n /**\n * Returns regex string for provided value\n *\n * @param {string} val ?\n * @returns {string} ?\n */\n ParserBase.constructRegex = function (val) {\n var len = val.length;\n var ret = '';\n for (var i = 0; i < len; i++) {\n if (i !== len - 1) {\n ret += val[parseInt(i.toString(), 10)] + '|';\n }\n else {\n ret += val[parseInt(i.toString(), 10)];\n }\n }\n return ret;\n };\n /**\n * Returns the replaced value of matching regex and obj mapper.\n *\n * @param {string} value - Specifies the values to be replaced.\n * @param {RegExp} regex - Specifies the regex to search.\n * @param {Object} obj - Specifies the object matcher to be replace value parts.\n * @returns {string} ?\n */\n ParserBase.convertValueParts = function (value, regex, obj) {\n return value.replace(regex, function (str) {\n // eslint-disable-next-line\n return obj[str];\n });\n };\n /**\n * Returns default numbering system object for formatting from cldr data\n *\n * @param {Object} obj ?\n * @returns {NumericObject} ?\n */\n ParserBase.getDefaultNumberingSystem = function (obj) {\n var ret = {};\n ret.obj = getValue('numbers', obj);\n ret.nSystem = getValue('defaultNumberingSystem', ret.obj);\n return ret;\n };\n /**\n * Returns the replaced value of matching regex and obj mapper.\n *\n * @param {Object} curObj ?\n * @param {Object} numberSystem ?\n * @param {boolean} needSymbols ?\n * @param {boolean} blazorMode ?\n * @returns {Object} ?\n */\n ParserBase.getCurrentNumericOptions = function (curObj, numberSystem, needSymbols, blazorMode) {\n var ret = {};\n var cur = this.getDefaultNumberingSystem(curObj);\n if (!isUndefined(cur.nSystem) || blazorMode) {\n var digits = blazorMode ? getValue('obj.mapperDigits', cur) : getValue(cur.nSystem + '._digits', numberSystem);\n if (!isUndefined(digits)) {\n ret.numericPair = this.reverseObject(digits, latnNumberSystem);\n ret.numberParseRegex = new RegExp(this.constructRegex(digits), 'g');\n ret.numericRegex = '[' + digits[0] + '-' + digits[9] + ']';\n if (needSymbols) {\n ret.numericRegex = digits[0] + '-' + digits[9];\n ret.symbolNumberSystem = getValue(blazorMode ? 'numberSymbols' : 'symbols-numberSystem-' + cur.nSystem, cur.obj);\n ret.symbolMatch = this.getSymbolMatch(ret.symbolNumberSystem);\n ret.numberSystem = cur.nSystem;\n }\n }\n }\n return ret;\n };\n /**\n * Returns number mapper object for the provided cldr data\n *\n * @param {Object} curObj ?\n * @param {Object} numberSystem ?\n * @param {boolean} isNumber ?\n * @returns {NumberMapper} ?\n */\n // eslint-disable-next-line\n ParserBase.getNumberMapper = function (curObj, numberSystem, isNumber) {\n var ret = { mapper: {} };\n var cur = this.getDefaultNumberingSystem(curObj);\n if (!isUndefined(cur.nSystem)) {\n ret.numberSystem = cur.nSystem;\n ret.numberSymbols = getValue('symbols-numberSystem-' + cur.nSystem, cur.obj);\n ret.timeSeparator = getValue('timeSeparator', ret.numberSymbols);\n var digits = getValue(cur.nSystem + '._digits', numberSystem);\n if (!isUndefined(digits)) {\n for (var _i = 0, latnNumberSystem_1 = latnNumberSystem; _i < latnNumberSystem_1.length; _i++) {\n var i = latnNumberSystem_1[_i];\n // eslint-disable-next-line\n ret.mapper[i] = digits[i];\n }\n }\n }\n return ret;\n };\n ParserBase.nPair = 'numericPair';\n ParserBase.nRegex = 'numericRegex';\n ParserBase.numberingSystems = defaultNumberingSystem;\n return ParserBase;\n}());\nexport { ParserBase };\n/**\n * @private\n */\nvar blazorCurrencyData = {\n 'DJF': 'Fdj',\n 'ERN': 'Nfk',\n 'ETB': 'Br',\n 'NAD': '$',\n 'ZAR': 'R',\n 'XAF': 'FCFA',\n 'GHS': 'GH₵',\n 'XDR': 'XDR',\n 'AED': 'د.إ.',\n 'BHD': 'د.ب.',\n 'DZD': 'د.ج.',\n 'EGP': 'ج.م.',\n 'ILS': '₪',\n 'IQD': 'د.ع.',\n 'JOD': 'د.ا.',\n 'KMF': 'CF',\n 'KWD': 'د.ك.',\n 'LBP': 'ل.ل.',\n 'LYD': 'د.ل.',\n 'MAD': 'د.م.',\n 'MRU': 'أ.م.',\n 'OMR': 'ر.ع.',\n 'QAR': 'ر.ق.',\n 'SAR': 'ر.س.',\n 'SDG': 'ج.س.',\n 'SOS': 'S',\n 'SSP': '£',\n 'SYP': 'ل.س.',\n 'TND': 'د.ت.',\n 'YER': 'ر.ي.',\n 'CLP': '$',\n 'INR': '₹',\n 'TZS': 'TSh',\n 'EUR': '€',\n 'AZN': '₼',\n 'RUB': '₽',\n 'BYN': 'Br',\n 'ZMW': 'K',\n 'BGN': 'лв.',\n 'NGN': '₦',\n 'XOF': 'CFA',\n 'BDT': '৳',\n 'CNY': '¥',\n 'BAM': 'КМ',\n 'UGX': 'USh',\n 'USD': '$',\n 'CZK': 'Kč',\n 'GBP': '£',\n 'DKK': 'kr.',\n 'KES': 'Ksh',\n 'CHF': 'CHF',\n 'MVR': 'ރ.',\n 'BTN': 'Nu.',\n 'XCD': 'EC$',\n 'AUD': '$',\n 'BBD': '$',\n 'BIF': 'FBu',\n 'BMD': '$',\n 'BSD': '$',\n 'BWP': 'P',\n 'BZD': '$',\n 'CAD': '$',\n 'NZD': '$',\n 'FJD': '$',\n 'FKP': '£',\n 'GIP': '£',\n 'GMD': 'D',\n 'GYD': '$',\n 'HKD': '$',\n 'IDR': 'Rp',\n 'JMD': '$',\n 'KYD': '$',\n 'LRD': '$',\n 'MGA': 'Ar',\n 'MOP': 'MOP$',\n 'MUR': 'Rs',\n 'MWK': 'MK',\n 'MYR': 'RM',\n 'PGK': 'K',\n 'PHP': '₱',\n 'PKR': 'Rs',\n 'RWF': 'RF',\n 'SBD': '$',\n 'SCR': 'SR',\n 'SEK': 'kr',\n 'SGD': '$',\n 'SHP': '£',\n 'SLL': 'Le',\n 'ANG': 'NAf.',\n 'SZL': 'E',\n 'TOP': 'T$',\n 'TTD': '$',\n 'VUV': 'VT',\n 'WST': 'WS$',\n 'ARS': '$',\n 'BOB': 'Bs',\n 'BRL': 'R$',\n 'COP': '$',\n 'CRC': '₡',\n 'CUP': '$',\n 'DOP': '$',\n 'GTQ': 'Q',\n 'HNL': 'L',\n 'MXN': '$',\n 'NIO': 'C$',\n 'PAB': 'B/.',\n 'PEN': 'S/',\n 'PYG': '₲',\n 'UYU': '$',\n 'VES': 'Bs.S',\n 'IRR': 'ريال',\n 'GNF': 'FG',\n 'CDF': 'FC',\n 'HTG': 'G',\n 'XPF': 'FCFP',\n 'HRK': 'kn',\n 'HUF': 'Ft',\n 'AMD': '֏',\n 'ISK': 'kr',\n 'JPY': '¥',\n 'GEL': '₾',\n 'CVE': '',\n 'KZT': '₸',\n 'KHR': '៛',\n 'KPW': '₩',\n 'KRW': '₩',\n 'KGS': 'сом',\n 'AOA': 'Kz',\n 'LAK': '₭',\n 'MZN': 'MTn',\n 'MKD': 'ден',\n 'MNT': '₮',\n 'BND': '$',\n 'MMK': 'K',\n 'NOK': 'kr',\n 'NPR': 'रु',\n 'AWG': 'Afl.',\n 'SRD': '$',\n 'PLN': 'zł',\n 'AFN': '؋',\n 'STN': 'Db',\n 'MDL': 'L',\n 'RON': 'lei',\n 'UAH': '₴',\n 'LKR': 'රු.',\n 'ALL': 'Lekë',\n 'RSD': 'дин.',\n 'TJS': 'смн',\n 'THB': '฿',\n 'TMT': 'm.',\n 'TRY': '₺',\n 'UZS': 'сўм',\n 'VND': '₫',\n 'TWD': 'NT$'\n};\n/**\n *\n * @param {string} currencyCode ?\n * @returns {string} ?\n */\nexport function getBlazorCurrencySymbol(currencyCode) {\n return getValue(currencyCode || '', blazorCurrencyData);\n}\n","/***\n * Hijri parser\n */\n// eslint-disable-next-line\nexport var HijriParser;\n(function (HijriParser) {\n var dateCorrection = [28607, 28636, 28665, 28695, 28724, 28754, 28783, 28813, 28843, 28872, 28901, 28931, 28960, 28990,\n 29019, 29049, 29078, 29108, 29137, 29167, 29196, 29226, 29255, 29285, 29315, 29345, 29375, 29404, 29434, 29463, 29492, 29522,\n 29551, 29580, 29610, 29640, 29669, 29699, 29729, 29759, 29788, 29818, 29847, 29876, 29906, 29935, 29964, 29994, 30023, 30053,\n 30082, 30112, 30141, 30171, 30200, 30230, 30259, 30289, 30318, 30348, 30378, 30408, 30437, 30467, 30496, 30526, 30555, 30585,\n 30614, 30644, 30673, 30703, 30732, 30762, 30791, 30821, 30850, 30880, 30909, 30939, 30968, 30998, 31027, 31057, 31086, 31116,\n 31145, 31175, 31204, 31234, 31263, 31293, 31322, 31352, 31381, 31411, 31441, 31471, 31500, 31530, 31559, 31589, 31618, 31648,\n 31676, 31706, 31736, 31766, 31795, 31825, 31854, 31884, 31913, 31943, 31972, 32002, 32031, 32061, 32090, 32120, 32150, 32180,\n 32209, 32239, 32268, 32298, 32327, 32357, 32386, 32416, 32445, 32475, 32504, 32534, 32563, 32593, 32622, 32652, 32681, 32711,\n 32740, 32770, 32799, 32829, 32858, 32888, 32917, 32947, 32976, 33006, 33035, 33065, 33094, 33124, 33153, 33183, 33213, 33243,\n 33272, 33302, 33331, 33361, 33390, 33420, 33450, 33479, 33509, 33539, 33568, 33598, 33627, 33657, 33686, 33716, 33745, 33775,\n 33804, 33834, 33863, 33893, 33922, 33952, 33981, 34011, 34040, 34069, 34099, 34128, 34158, 34187, 34217, 34247, 34277, 34306,\n 34336, 34365, 34395, 34424, 34454, 34483, 34512, 34542, 34571, 34601, 34631, 34660, 34690, 34719, 34749, 34778, 34808, 34837,\n 34867, 34896, 34926, 34955, 34985, 35015, 35044, 35074, 35103, 35133, 35162, 35192, 35222, 35251, 35280, 35310, 35340, 35370,\n 35399, 35429, 35458, 35488, 35517, 35547, 35576, 35605, 35635, 35665, 35694, 35723, 35753, 35782, 35811, 35841, 35871, 35901,\n 35930, 35960, 35989, 36019, 36048, 36078, 36107, 36136, 36166, 36195, 36225, 36254, 36284, 36314, 36343, 36373, 36403, 36433,\n 36462, 36492, 36521, 36551, 36580, 36610, 36639, 36669, 36698, 36728, 36757, 36786, 36816, 36845, 36875, 36904, 36934, 36963,\n 36993, 37022, 37052, 37081, 37111, 37141, 37170, 37200, 37229, 37259, 37288, 37318, 37347, 37377, 37406, 37436, 37465, 37495,\n 37524, 37554, 37584, 37613, 37643, 37672, 37701, 37731, 37760, 37790, 37819, 37849, 37878, 37908, 37938, 37967, 37997, 38027,\n 38056, 38085, 38115, 38144, 38174, 38203, 38233, 38262, 38292, 38322, 38351, 38381, 38410, 38440, 38469, 38499, 38528, 38558,\n 38587, 38617, 38646, 38676, 38705, 38735, 38764, 38794, 38823, 38853, 38882, 38912, 38941, 38971, 39001, 39030, 39059, 39089,\n 39118, 39148, 39178, 39208, 39237, 39267, 39297, 39326, 39355, 39385, 39414, 39444, 39473, 39503, 39532, 39562, 39592, 39621,\n 39650, 39680, 39709, 39739, 39768, 39798, 39827, 39857, 39886, 39916, 39946, 39975, 40005, 40035, 40064, 40094, 40123, 40153,\n 40182, 40212, 40241, 40271, 40300, 40330, 40359, 40389, 40418, 40448, 40477, 40507, 40536, 40566, 40595, 40625, 40655, 40685,\n 40714, 40744, 40773, 40803, 40832, 40862, 40892, 40921, 40951, 40980, 41009, 41039, 41068, 41098, 41127, 41157, 41186, 41216,\n 41245, 41275, 41304, 41334, 41364, 41393, 41422, 41452, 41481, 41511, 41540, 41570, 41599, 41629, 41658, 41688, 41718, 41748,\n 41777, 41807, 41836, 41865, 41894, 41924, 41953, 41983, 42012, 42042, 42072, 42102, 42131, 42161, 42190, 42220, 42249, 42279,\n 42308, 42337, 42367, 42397, 42426, 42456, 42485, 42515, 42545, 42574, 42604, 42633, 42662, 42692, 42721, 42751, 42780, 42810,\n 42839, 42869, 42899, 42929, 42958, 42988, 43017, 43046, 43076, 43105, 43135, 43164, 43194, 43223, 43253, 43283, 43312, 43342,\n 43371, 43401, 43430, 43460, 43489, 43519, 43548, 43578, 43607, 43637, 43666, 43696, 43726, 43755, 43785, 43814, 43844, 43873,\n 43903, 43932, 43962, 43991, 44021, 44050, 44080, 44109, 44139, 44169, 44198, 44228, 44258, 44287, 44317, 44346, 44375, 44405,\n 44434, 44464, 44493, 44523, 44553, 44582, 44612, 44641, 44671, 44700, 44730, 44759, 44788, 44818, 44847, 44877, 44906, 44936,\n 44966, 44996, 45025, 45055, 45084, 45114, 45143, 45172, 45202, 45231, 45261, 45290, 45320, 45350, 45380, 45409, 45439, 45468,\n 45498, 45527, 45556, 45586, 45615, 45644, 45674, 45704, 45733, 45763, 45793, 45823, 45852, 45882, 45911, 45940, 45970, 45999,\n 46028, 46058, 46088, 46117, 46147, 46177, 46206, 46236, 46265, 46295, 46324, 46354, 46383, 46413, 46442, 46472, 46501, 46531,\n 46560, 46590, 46620, 46649, 46679, 46708, 46738, 46767, 46797, 46826, 46856, 46885, 46915, 46944, 46974, 47003, 47033, 47063,\n 47092, 47122, 47151, 47181, 47210, 47240, 47269, 47298, 47328, 47357, 47387, 47417, 47446, 47476, 47506, 47535, 47565, 47594,\n 47624, 47653, 47682, 47712, 47741, 47771, 47800, 47830, 47860, 47890, 47919, 47949, 47978, 48008, 48037, 48066, 48096, 48125,\n 48155, 48184, 48214, 48244, 48273, 48303, 48333, 48362, 48392, 48421, 48450, 48480, 48509, 48538, 48568, 48598, 48627, 48657,\n 48687, 48717, 48746, 48776, 48805, 48834, 48864, 48893, 48922, 48952, 48982, 49011, 49041, 49071, 49100, 49130, 49160, 49189,\n 49218, 49248, 49277, 49306, 49336, 49365, 49395, 49425, 49455, 49484, 49514, 49543, 49573, 49602, 49632, 49661, 49690, 49720,\n 49749, 49779, 49809, 49838, 49868, 49898, 49927, 49957, 49986, 50016, 50045, 50075, 50104, 50133, 50163, 50192, 50222, 50252,\n 50281, 50311, 50340, 50370, 50400, 50429, 50459, 50488, 50518, 50547, 50576, 50606, 50635, 50665, 50694, 50724, 50754, 50784,\n 50813, 50843, 50872, 50902, 50931, 50960, 50990, 51019, 51049, 51078, 51108, 51138, 51167, 51197, 51227, 51256, 51286, 51315,\n 51345, 51374, 51403, 51433, 51462, 51492, 51522, 51552, 51582, 51611, 51641, 51670, 51699, 51729, 51758, 51787, 51816, 51846,\n 51876, 51906, 51936, 51965, 51995, 52025, 52054, 52083, 52113, 52142, 52171, 52200, 52230, 52260, 52290, 52319, 52349, 52379,\n 52408, 52438, 52467, 52497, 52526, 52555, 52585, 52614, 52644, 52673, 52703, 52733, 52762, 52792, 52822, 52851, 52881, 52910,\n 52939, 52969, 52998, 53028, 53057, 53087, 53116, 53146, 53176, 53205, 53235, 53264, 53294, 53324, 53353, 53383, 53412, 53441,\n 53471, 53500, 53530, 53559, 53589, 53619, 53648, 53678, 53708, 53737, 53767, 53796, 53825, 53855, 53884, 53913, 53943, 53973,\n 54003, 54032, 54062, 54092, 54121, 54151, 54180, 54209, 54239, 54268, 54297, 54327, 54357, 54387, 54416, 54446, 54476, 54505,\n 54535, 54564, 54593, 54623, 54652, 54681, 54711, 54741, 54770, 54800, 54830, 54859, 54889, 54919, 54948, 54977, 55007, 55036,\n 55066, 55095, 55125, 55154, 55184, 55213, 55243, 55273, 55302, 55332, 55361, 55391, 55420, 55450, 55479, 55508, 55538, 55567,\n 55597, 55627, 55657, 55686, 55716, 55745, 55775, 55804, 55834, 55863, 55892, 55922, 55951, 55981, 56011, 56040, 56070, 56100,\n 56129, 56159, 56188, 56218, 56247, 56276, 56306, 56335, 56365, 56394, 56424, 56454, 56483, 56513, 56543, 56572, 56601, 56631,\n 56660, 56690, 56719, 56749, 56778, 56808, 56837, 56867, 56897, 56926, 56956, 56985, 57015, 57044, 57074, 57103, 57133, 57162,\n 57192, 57221, 57251, 57280, 57310, 57340, 57369, 57399, 57429, 57458, 57487, 57517, 57546, 57576, 57605, 57634, 57664, 57694,\n 57723, 57753, 57783, 57813, 57842, 57871, 57901, 57930, 57959, 57989, 58018, 58048, 58077, 58107, 58137, 58167, 58196, 58226,\n 58255, 58285, 58314, 58343, 58373, 58402, 58432, 58461, 58491, 58521, 58551, 58580, 58610, 58639, 58669, 58698, 58727, 58757,\n 58786, 58816, 58845, 58875, 58905, 58934, 58964, 58994, 59023, 59053, 59082, 59111, 59141, 59170, 59200, 59229, 59259, 59288,\n 59318, 59348, 59377, 59407, 59436, 59466, 59495, 59525, 59554, 59584, 59613, 59643, 59672, 59702, 59731, 59761, 59791, 59820,\n 59850, 59879, 59909, 59939, 59968, 59997, 60027, 60056, 60086, 60115, 60145, 60174, 60204, 60234, 60264, 60293, 60323, 60352,\n 60381, 60411, 60440, 60469, 60499, 60528, 60558, 60588, 60618, 60648, 60677, 60707, 60736, 60765, 60795, 60824, 60853, 60883,\n 60912, 60942, 60972, 61002, 61031, 61061, 61090, 61120, 61149, 61179, 61208, 61237, 61267, 61296, 61326, 61356, 61385, 61415,\n 61445, 61474, 61504, 61533, 61563, 61592, 61621, 61651, 61680, 61710, 61739, 61769, 61799, 61828, 61858, 61888, 61917, 61947,\n 61976, 62006, 62035, 62064, 62094, 62123, 62153, 62182, 62212, 62242, 62271, 62301, 62331, 62360, 62390, 62419, 62448, 62478,\n 62507, 62537, 62566, 62596, 62625, 62655, 62685, 62715, 62744, 62774, 62803, 62832, 62862, 62891, 62921, 62950, 62980, 63009,\n 63039, 63069, 63099, 63128, 63157, 63187, 63216, 63246, 63275, 63305, 63334, 63363, 63393, 63423, 63453, 63482, 63512, 63541,\n 63571, 63600, 63630, 63659, 63689, 63718, 63747, 63777, 63807, 63836, 63866, 63895, 63925, 63955, 63984, 64014, 64043, 64073,\n 64102, 64131, 64161, 64190, 64220, 64249, 64279, 64309, 64339, 64368, 64398, 64427, 64457, 64486, 64515, 64545, 64574, 64603,\n 64633, 64663, 64692, 64722, 64752, 64782, 64811, 64841, 64870, 64899, 64929, 64958, 64987, 65017, 65047, 65076, 65106, 65136,\n 65166, 65195, 65225, 65254, 65283, 65313, 65342, 65371, 65401, 65431, 65460, 65490, 65520, 65549, 65579, 65608, 65638, 65667,\n 65697, 65726, 65755, 65785, 65815, 65844, 65874, 65903, 65933, 65963, 65992, 66022, 66051, 66081, 66110, 66140, 66169, 66199,\n 66228, 66258, 66287, 66317, 66346, 66376, 66405, 66435, 66465, 66494, 66524, 66553, 66583, 66612, 66641, 66671, 66700, 66730,\n 66760, 66789, 66819, 66849, 66878, 66908, 66937, 66967, 66996, 67025, 67055, 67084, 67114, 67143, 67173, 67203, 67233, 67262,\n 67292, 67321, 67351, 67380, 67409, 67439, 67468, 67497, 67527, 67557, 67587, 67617, 67646, 67676, 67705, 67735, 67764, 67793,\n 67823, 67852, 67882, 67911, 67941, 67971, 68000, 68030, 68060, 68089, 68119, 68148, 68177, 68207, 68236, 68266, 68295, 68325,\n 68354, 68384, 68414, 68443, 68473, 68502, 68532, 68561, 68591, 68620, 68650, 68679, 68708, 68738, 68768, 68797, 68827, 68857,\n 68886, 68916, 68946, 68975, 69004, 69034, 69063, 69092, 69122, 69152, 69181, 69211, 69240, 69270, 69300, 69330, 69359, 69388,\n 69418, 69447, 69476, 69506, 69535, 69565, 69595, 69624, 69654, 69684, 69713, 69743, 69772, 69802, 69831, 69861, 69890, 69919,\n 69949, 69978, 70008, 70038, 70067, 70097, 70126, 70156, 70186, 70215, 70245, 70274, 70303, 70333, 70362, 70392, 70421, 70451,\n 70481, 70510, 70540, 70570, 70599, 70629, 70658, 70687, 70717, 70746, 70776, 70805, 70835, 70864, 70894, 70924, 70954, 70983,\n 71013, 71042, 71071, 71101, 71130, 71159, 71189, 71218, 71248, 71278, 71308, 71337, 71367, 71397, 71426, 71455, 71485, 71514,\n 71543, 71573, 71602, 71632, 71662, 71691, 71721, 71751, 71781, 71810, 71839, 71869, 71898, 71927, 71957, 71986, 72016, 72046,\n 72075, 72105, 72135, 72164, 72194, 72223, 72253, 72282, 72311, 72341, 72370, 72400, 72429, 72459, 72489, 72518, 72548, 72577,\n 72607, 72637, 72666, 72695, 72725, 72754, 72784, 72813, 72843, 72872, 72902, 72931, 72961, 72991, 73020, 73050, 73080, 73109,\n 73139, 73168, 73197, 73227, 73256, 73286, 73315, 73345, 73375, 73404, 73434, 73464, 73493, 73523, 73552, 73581, 73611, 73640,\n 73669, 73699, 73729, 73758, 73788, 73818, 73848, 73877, 73907, 73936, 73965, 73995, 74024, 74053, 74083, 74113, 74142, 74172,\n 74202, 74231, 74261, 74291, 74320, 74349, 74379, 74408, 74437, 74467, 74497, 74526, 74556, 74586, 74615, 74645, 74675, 74704,\n 74733, 74763, 74792, 74822, 74851, 74881, 74910, 74940, 74969, 74999, 75029, 75058, 75088, 75117, 75147, 75176, 75206, 75235,\n 75264, 75294, 75323, 75353, 75383, 75412, 75442, 75472, 75501, 75531, 75560, 75590, 75619, 75648, 75678, 75707, 75737, 75766,\n 75796, 75826, 75856, 75885, 75915, 75944, 75974, 76003, 76032, 76062, 76091, 76121, 76150, 76180, 76210, 76239, 76269, 76299,\n 76328, 76358, 76387, 76416, 76446, 76475, 76505, 76534, 76564, 76593, 76623, 76653, 76682, 76712, 76741, 76771, 76801, 76830,\n 76859, 76889, 76918, 76948, 76977, 77007, 77036, 77066, 77096, 77125, 77155, 77185, 77214, 77243, 77273, 77302, 77332, 77361,\n 77390, 77420, 77450, 77479, 77509, 77539, 77569, 77598, 77627, 77657, 77686, 77715, 77745, 77774, 77804, 77833, 77863, 77893,\n 77923, 77952, 77982, 78011, 78041, 78070, 78099, 78129, 78158, 78188, 78217, 78247, 78277, 78307, 78336, 78366, 78395, 78425,\n 78454, 78483, 78513, 78542, 78572, 78601, 78631, 78661, 78690, 78720, 78750, 78779, 78808, 78838, 78867, 78897, 78926, 78956,\n 78985, 79015, 79044, 79074, 79104, 79133, 79163, 79192, 79222, 79251, 79281, 79310, 79340, 79369, 79399, 79428, 79458, 79487,\n 79517, 79546, 79576, 79606, 79635, 79665, 79695, 79724, 79753, 79783, 79812, 79841, 79871, 79900, 79930, 79960, 79990\n ];\n /**\n *\n * @param {Date} gDate ?\n * @returns {Object} ?\n */\n function getHijriDate(gDate) {\n var day = gDate.getDate();\n var month = gDate.getMonth();\n var year = gDate.getFullYear();\n var tMonth = month + 1;\n var tYear = year;\n if (tMonth < 3) {\n tYear -= 1;\n tMonth += 12;\n }\n var yPrefix = Math.floor(tYear / 100.);\n var julilanOffset = yPrefix - Math.floor(yPrefix / 4.) - 2;\n var julianNumber = Math.floor(365.25 * (tYear + 4716)) + Math.floor(30.6001 * (tMonth + 1)) + day - julilanOffset - 1524;\n yPrefix = Math.floor((julianNumber - 1867216.25) / 36524.25);\n julilanOffset = yPrefix - Math.floor(yPrefix / 4.) + 1;\n var b = julianNumber + julilanOffset + 1524;\n var c = Math.floor((b - 122.1) / 365.25);\n var d = Math.floor(365.25 * c);\n var tempMonth = Math.floor((b - d) / 30.6001);\n day = (b - d) - Math.floor(30.6001 * tempMonth);\n month = Math.floor((b - d) / 20.6001);\n if (month > 13) {\n c += 1;\n month -= 12;\n }\n month -= 1;\n year = c - 4716;\n var modifiedJulianDate = julianNumber - 2400000;\n // date calculation for year after 2077\n var iyear = 10631. / 30.;\n var z = julianNumber - 1948084;\n var cyc = Math.floor(z / 10631.);\n z = z - 10631 * cyc;\n var j = Math.floor((z - 0.1335) / iyear);\n var iy = 30 * cyc + j;\n z = z - Math.floor(j * iyear + 0.1335);\n var im = Math.floor((z + 28.5001) / 29.5);\n /* istanbul ignore next */\n if (im === 13) {\n im = 12;\n }\n var tempDay = z - Math.floor(29.5001 * im - 29);\n var i = 0;\n for (; i < dateCorrection.length; i++) {\n if (dateCorrection[parseInt(i.toString(), 10)] > modifiedJulianDate) {\n break;\n }\n }\n var iln = i + 16260;\n var ii = Math.floor((iln - 1) / 12);\n var hYear = ii + 1;\n var hmonth = iln - 12 * ii;\n var hDate = modifiedJulianDate - dateCorrection[i - 1] + 1;\n if ((hDate + '').length > 2) {\n hDate = tempDay;\n hmonth = im;\n hYear = iy;\n }\n return { year: hYear, month: hmonth, date: hDate };\n }\n HijriParser.getHijriDate = getHijriDate;\n /**\n *\n * @param {number} year ?\n * @param {number} month ?\n * @param {number} day ?\n * @returns {Date} ?\n */\n function toGregorian(year, month, day) {\n var iy = year;\n var im = month;\n var id = day;\n var ii = iy - 1;\n var iln = (ii * 12) + 1 + (im - 1);\n var i = iln - 16260;\n var mcjdn = id + dateCorrection[i - 1] - 1;\n var julianDate = mcjdn + 2400000;\n var z = Math.floor(julianDate + 0.5);\n var a = Math.floor((z - 1867216.25) / 36524.25);\n a = z + 1 + a - Math.floor(a / 4);\n var b = a + 1524;\n var c = Math.floor((b - 122.1) / 365.25);\n var d = Math.floor(365.25 * c);\n var e = Math.floor((b - d) / 30.6001);\n var gDay = b - d - Math.floor(e * 30.6001);\n var gMonth = e - (e > 13.5 ? 13 : 1);\n var gYear = c - (gMonth > 2.5 ? 4716 : 4715);\n /* istanbul ignore next */\n if (gYear <= 0) {\n gMonth--;\n } // No year zero\n return new Date(gYear + '/' + (gMonth) + '/' + gDay);\n }\n HijriParser.toGregorian = toGregorian;\n})(HijriParser || (HijriParser = {}));\n","import { ParserBase as parser } from './parser-base';\nimport { IntlBase as base } from './intl-base';\nimport { isUndefined, throwError, getValue, isBlazor } from '../util';\nimport { HijriParser } from '../hijri-parser';\nimport { isNullOrUndefined, extend } from '../util';\nvar abbreviateRegexGlobal = /\\/MMMMM|MMMM|MMM|a|LLLL|LLL|EEEEE|EEEE|E|K|cccc|ccc|WW|W|G+|z+/gi;\nvar standalone = 'stand-alone';\nvar weekdayKey = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];\nexport var basicPatterns = ['short', 'medium', 'long', 'full'];\nvar timeSetter = {\n m: 'getMinutes',\n h: 'getHours',\n H: 'getHours',\n s: 'getSeconds',\n d: 'getDate',\n f: 'getMilliseconds'\n};\nexport var datePartMatcher = {\n 'M': 'month',\n 'd': 'day',\n 'E': 'weekday',\n 'c': 'weekday',\n 'y': 'year',\n 'm': 'minute',\n 'h': 'hour',\n 'H': 'hour',\n 's': 'second',\n 'L': 'month',\n 'a': 'designator',\n 'z': 'timeZone',\n 'Z': 'timeZone',\n 'G': 'era',\n 'f': 'milliseconds'\n};\nvar timeSeparator = 'timeSeparator';\n/* tslint:disable no-any */\n/**\n * Date Format is a framework provides support for date formatting.\n *\n * @private\n */\nvar DateFormat = /** @class */ (function () {\n function DateFormat() {\n }\n /**\n * Returns the formatter function for given skeleton.\n *\n * @param {string} culture - Specifies the culture name to be which formatting.\n * @param {DateFormatOptions} option - Specific the format in which date will format.\n * @param {Object} cldr - Specifies the global cldr data collection.\n * @returns {Function} ?\n */\n DateFormat.dateFormat = function (culture, option, cldr) {\n var _this = this;\n var dependable = base.getDependables(cldr, culture, option.calendar);\n var numObject = getValue('parserObject.numbers', dependable);\n var dateObject = dependable.dateObject;\n var formatOptions = { isIslamic: base.islamicRegex.test(option.calendar) };\n if (isBlazor() && option.isServerRendered) {\n option = base.compareBlazorDateFormats(option, culture);\n }\n var resPattern = option.format ||\n base.getResultantPattern(option.skeleton, dependable.dateObject, option.type, false, isBlazor() ? culture : '');\n formatOptions.dateSeperator = isBlazor() ? getValue('dateSeperator', dateObject) : base.getDateSeparator(dependable.dateObject);\n if (isUndefined(resPattern)) {\n throwError('Format options or type given must be invalid');\n }\n else {\n resPattern = base.ConvertDateToWeekFormat(resPattern);\n if (isBlazor()) {\n resPattern = resPattern.replace(/tt/, 'a');\n }\n formatOptions.pattern = resPattern;\n formatOptions.numMapper = isBlazor() ?\n extend({}, numObject) : parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr));\n var patternMatch = resPattern.match(abbreviateRegexGlobal) || [];\n for (var _i = 0, patternMatch_1 = patternMatch; _i < patternMatch_1.length; _i++) {\n var str = patternMatch_1[_i];\n var len = str.length;\n var char = str[0];\n if (char === 'K') {\n char = 'h';\n }\n switch (char) {\n case 'E':\n case 'c':\n if (isBlazor()) {\n // eslint-disable-next-line\n formatOptions.weekday = getValue('days.' + base.monthIndex[len], dateObject);\n }\n else {\n // eslint-disable-next-line\n formatOptions.weekday = dependable.dateObject[base.days][standalone][base.monthIndex[len]];\n }\n break;\n case 'M':\n case 'L':\n if (isBlazor()) {\n // eslint-disable-next-line\n formatOptions.month = getValue('months.' + base.monthIndex[len], dateObject);\n }\n else {\n // eslint-disable-next-line\n formatOptions.month = dependable.dateObject[base.month][standalone][base.monthIndex[len]];\n }\n break;\n case 'a':\n formatOptions.designator = isBlazor() ?\n getValue('dayPeriods', dateObject) : getValue('dayPeriods.format.wide', dateObject);\n break;\n case 'G':\n // eslint-disable-next-line\n var eText = (len <= 3) ? 'eraAbbr' : (len === 4) ? 'eraNames' : 'eraNarrow';\n formatOptions.era = isBlazor() ? getValue('eras', dateObject) : getValue('eras.' + eText, dependable.dateObject);\n break;\n case 'z':\n formatOptions.timeZone = getValue('dates.timeZoneNames', dependable.parserObject);\n break;\n }\n }\n }\n return function (value) {\n if (isNaN(value.getDate())) {\n return null;\n }\n return _this.intDateFormatter(value, formatOptions);\n };\n };\n /**\n * Returns formatted date string based on options passed.\n *\n * @param {Date} value ?\n * @param {FormatOptions} options ?\n * @returns {string} ?\n */\n DateFormat.intDateFormatter = function (value, options) {\n var pattern = options.pattern;\n var ret = '';\n var matches = pattern.match(base.dateParseRegex);\n var dObject = this.getCurrentDateValue(value, options.isIslamic);\n for (var _i = 0, matches_1 = matches; _i < matches_1.length; _i++) {\n var match = matches_1[_i];\n var length_1 = match.length;\n var char = match[0];\n if (char === 'K') {\n char = 'h';\n }\n var curval = void 0;\n var curvalstr = '';\n var isNumber = void 0;\n var processNumber = void 0;\n var curstr = '';\n switch (char) {\n case 'M':\n case 'L':\n curval = dObject.month;\n if (length_1 > 2) {\n // eslint-disable-next-line\n ret += options.month[curval];\n }\n else {\n isNumber = true;\n }\n break;\n case 'E':\n case 'c':\n // eslint-disable-next-line\n ret += options.weekday[weekdayKey[value.getDay()]];\n break;\n case 'H':\n case 'h':\n case 'm':\n case 's':\n case 'd':\n case 'f':\n isNumber = true;\n if (char === 'd') {\n curval = dObject.date;\n }\n else if (char === 'f') {\n isNumber = false;\n processNumber = true;\n // eslint-disable-next-line\n curvalstr = value[timeSetter[char]]().toString();\n curvalstr = curvalstr.substring(0, length_1);\n var curlength = curvalstr.length;\n if (length_1 !== curlength) {\n if (length_1 > 3) {\n continue;\n }\n for (var i = 0; i < length_1 - curlength; i++) {\n curvalstr = '0' + curvalstr.toString();\n }\n }\n curstr += curvalstr;\n }\n else {\n // eslint-disable-next-line\n curval = value[timeSetter[char]]();\n }\n if (char === 'h') {\n curval = curval % 12 || 12;\n }\n break;\n case 'y':\n processNumber = true;\n curstr += dObject.year;\n if (length_1 === 2) {\n curstr = curstr.substr(curstr.length - 2);\n }\n break;\n case 'a':\n // eslint-disable-next-line\n var desig = value.getHours() < 12 ? 'am' : 'pm';\n // eslint-disable-next-line\n ret += options.designator[desig];\n break;\n case 'G':\n // eslint-disable-next-line\n var dec = value.getFullYear() < 0 ? 0 : 1;\n // eslint-disable-next-line\n var retu = options.era[dec];\n if (isNullOrUndefined(retu)) {\n // eslint-disable-next-line\n retu = options.era[dec ? 0 : 1];\n }\n ret += retu || '';\n break;\n case '\\'':\n ret += (match === '\\'\\'') ? '\\'' : match.replace(/'/g, '');\n break;\n case 'z':\n // eslint-disable-next-line\n var timezone = value.getTimezoneOffset();\n // eslint-disable-next-line\n var pattern_1 = (length_1 < 4) ? '+H;-H' : options.timeZone.hourFormat;\n pattern_1 = pattern_1.replace(/:/g, options.numMapper.timeSeparator);\n if (timezone === 0) {\n ret += options.timeZone.gmtZeroFormat;\n }\n else {\n processNumber = true;\n curstr = this.getTimeZoneValue(timezone, pattern_1);\n }\n curstr = options.timeZone.gmtFormat.replace(/\\{0\\}/, curstr);\n break;\n case ':':\n // eslint-disable-next-line\n ret += options.numMapper.numberSymbols[timeSeparator];\n break;\n case '/':\n ret += options.dateSeperator;\n break;\n case 'W':\n isNumber = true;\n curval = base.getWeekOfYear(value);\n break;\n default:\n ret += match;\n }\n if (isNumber) {\n processNumber = true;\n curstr = this.checkTwodigitNumber(curval, length_1);\n }\n if (processNumber) {\n ret += parser.convertValueParts(curstr, base.latnParseRegex, options.numMapper.mapper);\n }\n }\n return ret;\n };\n DateFormat.getCurrentDateValue = function (value, isIslamic) {\n if (isIslamic) {\n return HijriParser.getHijriDate(value);\n }\n return { year: value.getFullYear(), month: value.getMonth() + 1, date: value.getDate() };\n };\n /**\n * Returns two digit numbers for given value and length\n *\n * @param {number} val ?\n * @param {number} len ?\n * @returns {string} ?\n */\n DateFormat.checkTwodigitNumber = function (val, len) {\n var ret = val + '';\n if (len === 2 && ret.length !== 2) {\n return '0' + ret;\n }\n return ret;\n };\n /**\n * Returns the value of the Time Zone.\n *\n * @param {number} tVal ?\n * @param {string} pattern ?\n * @returns {string} ?\n * @private\n */\n DateFormat.getTimeZoneValue = function (tVal, pattern) {\n var _this = this;\n var splt = pattern.split(';');\n var curPattern = splt[tVal > 0 ? 1 : 0];\n var no = Math.abs(tVal);\n return curPattern = curPattern.replace(/HH?|mm/g, function (str) {\n var len = str.length;\n var ishour = str.indexOf('H') !== -1;\n return _this.checkTwodigitNumber(Math.floor(ishour ? (no / 60) : (no % 60)), len);\n });\n };\n return DateFormat;\n}());\nexport { DateFormat };\n","import { isUndefined, throwError, isNullOrUndefined, extend, isBlazor, getValue } from '../util';\nimport { defaultCurrencyCode } from '../internationalization';\nimport { IntlBase as base } from './intl-base';\nimport { ParserBase as parser } from './parser-base';\nvar errorText = {\n 'ms': 'minimumSignificantDigits',\n 'ls': 'maximumSignificantDigits',\n 'mf': 'minimumFractionDigits',\n 'lf': 'maximumFractionDigits'\n};\nvar integerError = 'minimumIntegerDigits';\nvar percentSign = 'percentSign';\nvar minusSign = 'minusSign';\nvar spaceRegex = /\\s/;\nvar mapper = ['infinity', 'nan', 'group', 'decimal', 'exponential'];\nvar infinity = 'infinity';\nvar nan = 'nan';\n/**\n * Module for number formatting.\n *\n * @private\n */\nvar NumberFormat = /** @class */ (function () {\n function NumberFormat() {\n }\n /**\n * Returns the formatter function for given skeleton.\n *\n * @param {string} culture - Specifies the culture name to be which formatting.\n * @param {NumberFormatOptions} option - Specific the format in which number will format.\n * @param {Object} cldr - Specifies the global cldr data collection.\n * @returns {Function} ?\n */\n NumberFormat.numberFormatter = function (culture, option, cldr) {\n var _this = this;\n var fOptions = extend({}, option);\n var cOptions = {};\n var dOptions = {};\n var symbolPattern;\n var dependable = base.getDependables(cldr, culture, '', true);\n var numObject = dependable.numericObject;\n dOptions.numberMapper = isBlazor() ? extend({}, numObject) :\n parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr), true);\n dOptions.currencySymbol = isBlazor() ? getValue('currencySymbol', numObject) : base.getCurrencySymbol(dependable.numericObject, fOptions.currency || defaultCurrencyCode, option.altSymbol);\n /* eslint-disable @typescript-eslint/no-explicit-any */\n dOptions.percentSymbol = isBlazor() ? getValue('numberSymbols.percentSign', numObject) :\n dOptions.numberMapper.numberSymbols[\"\" + percentSign];\n dOptions.minusSymbol = isBlazor() ? getValue('numberSymbols.minusSign', numObject) :\n dOptions.numberMapper.numberSymbols[\"\" + minusSign];\n var symbols = dOptions.numberMapper.numberSymbols;\n if ((option.format) && !(base.formatRegex.test(option.format))) {\n cOptions = base.customFormat(option.format, dOptions, dependable.numericObject);\n }\n else {\n extend(fOptions, base.getProperNumericSkeleton(option.format || 'N'));\n fOptions.isCurrency = fOptions.type === 'currency';\n fOptions.isPercent = fOptions.type === 'percent';\n if (!isBlazor()) {\n symbolPattern = base.getSymbolPattern(fOptions.type, dOptions.numberMapper.numberSystem, dependable.numericObject, fOptions.isAccount);\n }\n fOptions.groupOne = this.checkValueRange(fOptions.maximumSignificantDigits, fOptions.minimumSignificantDigits, true);\n this.checkValueRange(fOptions.maximumFractionDigits, fOptions.minimumFractionDigits, false, true);\n if (!isUndefined(fOptions.fractionDigits)) {\n fOptions.minimumFractionDigits = fOptions.maximumFractionDigits = fOptions.fractionDigits;\n }\n if (isUndefined(fOptions.useGrouping)) {\n fOptions.useGrouping = true;\n }\n if (fOptions.isCurrency && !isBlazor()) {\n symbolPattern = symbolPattern.replace(/\\u00A4/g, base.defaultCurrency);\n }\n if (!isBlazor()) {\n var split = symbolPattern.split(';');\n cOptions.nData = base.getFormatData(split[1] || '-' + split[0], true, dOptions.currencySymbol);\n cOptions.pData = base.getFormatData(split[0], false, dOptions.currencySymbol);\n if (fOptions.useGrouping) {\n fOptions.groupSeparator = symbols[mapper[2]];\n fOptions.groupData = this.getGroupingDetails(split[0]);\n }\n }\n else {\n cOptions.nData = extend({}, {}, getValue(fOptions.type + 'nData', numObject));\n cOptions.pData = extend({}, {}, getValue(fOptions.type + 'pData', numObject));\n if (fOptions.type === 'currency' && option.currency) {\n base.replaceBlazorCurrency([cOptions.pData, cOptions.nData], dOptions.currencySymbol, option.currency);\n }\n }\n var minFrac = isUndefined(fOptions.minimumFractionDigits);\n if (minFrac) {\n fOptions.minimumFractionDigits = cOptions.nData.minimumFraction;\n }\n if (isUndefined(fOptions.maximumFractionDigits)) {\n var mval = cOptions.nData.maximumFraction;\n fOptions.maximumFractionDigits = isUndefined(mval) && fOptions.isPercent ? 0 : mval;\n }\n var mfrac = fOptions.minimumFractionDigits;\n var lfrac = fOptions.maximumFractionDigits;\n if (!isUndefined(mfrac) && !isUndefined(lfrac)) {\n if (mfrac > lfrac) {\n fOptions.maximumFractionDigits = mfrac;\n }\n }\n }\n extend(cOptions.nData, fOptions);\n extend(cOptions.pData, fOptions);\n return function (value) {\n if (isNaN(value)) {\n return symbols[mapper[1]];\n }\n else if (!isFinite(value)) {\n return symbols[mapper[0]];\n }\n return _this.intNumberFormatter(value, cOptions, dOptions);\n };\n };\n /**\n * Returns grouping details for the pattern provided\n *\n * @param {string} pattern ?\n * @returns {GroupDetails} ?\n */\n NumberFormat.getGroupingDetails = function (pattern) {\n var ret = {};\n var match = pattern.match(base.negativeDataRegex);\n if (match && match[4]) {\n var pattern_1 = match[4];\n var p = pattern_1.lastIndexOf(',');\n if (p !== -1) {\n var temp = pattern_1.split('.')[0];\n ret.primary = (temp.length - p) - 1;\n var s = pattern_1.lastIndexOf(',', p - 1);\n if (s !== -1) {\n ret.secondary = p - 1 - s;\n }\n }\n }\n return ret;\n };\n /**\n * Returns if the provided integer range is valid.\n *\n * @param {number} val1 ?\n * @param {number} val2 ?\n * @param {boolean} checkbothExist ?\n * @param {boolean} isFraction ?\n * @returns {boolean} ?\n */\n NumberFormat.checkValueRange = function (val1, val2, checkbothExist, isFraction) {\n var decide = isFraction ? 'f' : 's';\n var dint = 0;\n var str1 = errorText['l' + decide];\n // eslint-disable-next-line\n var str2 = errorText['m' + decide];\n if (!isUndefined(val1)) {\n this.checkRange(val1, str1, isFraction);\n dint++;\n }\n if (!isUndefined(val2)) {\n this.checkRange(val2, str2, isFraction);\n dint++;\n }\n if (dint === 2) {\n if (val1 < val2) {\n throwError(str2 + 'specified must be less than the' + str1);\n }\n else {\n return true;\n }\n }\n else if (checkbothExist && dint === 1) {\n throwError('Both' + str2 + 'and' + str2 + 'must be present');\n }\n return false;\n };\n /**\n * Check if the provided fraction range is valid\n *\n * @param {number} val ?\n * @param {string} text ?\n * @param {boolean} isFraction ?\n * @returns {void} ?\n */\n NumberFormat.checkRange = function (val, text, isFraction) {\n var range = isFraction ? [0, 20] : [1, 21];\n if (val < range[0] || val > range[1]) {\n throwError(text + 'value must be within the range' + range[0] + 'to' + range[1]);\n }\n };\n /**\n * Returns formatted numeric string for provided formatting options\n *\n * @param {number} value ?\n * @param {base.GenericFormatOptions} fOptions ?\n * @param {CommonOptions} dOptions ?\n * @returns {string} ?\n */\n NumberFormat.intNumberFormatter = function (value, fOptions, dOptions) {\n var curData;\n if (isUndefined(fOptions.nData.type)) {\n return undefined;\n }\n else {\n if (value < 0) {\n value = value * -1;\n curData = fOptions.nData;\n }\n else if (value === 0) {\n curData = fOptions.zeroData || fOptions.pData;\n }\n else {\n curData = fOptions.pData;\n }\n var fValue = '';\n if (curData.isPercent) {\n value = value * 100;\n }\n if (curData.groupOne) {\n fValue = this.processSignificantDigits(value, curData.minimumSignificantDigits, curData.maximumSignificantDigits);\n }\n else {\n fValue = this.processFraction(value, curData.minimumFractionDigits, curData.maximumFractionDigits);\n if (curData.minimumIntegerDigits) {\n fValue = this.processMinimumIntegers(fValue, curData.minimumIntegerDigits);\n }\n }\n if (curData.type === 'scientific') {\n fValue = value.toExponential(curData.maximumFractionDigits);\n fValue = fValue.replace('e', dOptions.numberMapper.numberSymbols[mapper[4]]);\n }\n fValue = fValue.replace('.', dOptions.numberMapper.numberSymbols[mapper[3]]);\n fValue = curData.format === \"#,###,,;(#,###,,)\" ? this.customPivotFormat(parseInt(fValue)) : fValue;\n if (curData.useGrouping) {\n /* eslint-disable @typescript-eslint/no-explicit-any */\n fValue = this.groupNumbers(fValue, curData.groupData.primary, curData.groupSeparator || ',', dOptions.numberMapper.numberSymbols[mapper[3]] || '.', curData.groupData.secondary);\n }\n fValue = parser.convertValueParts(fValue, base.latnParseRegex, dOptions.numberMapper.mapper);\n if (curData.nlead === 'N/A') {\n return curData.nlead;\n }\n else {\n return curData.nlead + fValue + curData.nend;\n }\n }\n };\n /**\n * Returns significant digits processed numeric string\n *\n * @param {number} value ?\n * @param {number} min ?\n * @param {number} max ?\n * @returns {string} ?\n */\n NumberFormat.processSignificantDigits = function (value, min, max) {\n var temp = value + '';\n var tn;\n var length = temp.length;\n if (length < min) {\n return value.toPrecision(min);\n }\n else {\n temp = value.toPrecision(max);\n tn = +temp;\n return tn + '';\n }\n };\n /**\n * Returns grouped numeric string\n *\n * @param {string} val ?\n * @param {number} level1 ?\n * @param {string} sep ?\n * @param {string} decimalSymbol ?\n * @param {number} level2 ?\n * @returns {string} ?\n */\n NumberFormat.groupNumbers = function (val, level1, sep, decimalSymbol, level2) {\n var flag = !isNullOrUndefined(level2) && level2 !== 0;\n var split = val.split(decimalSymbol);\n var prefix = split[0];\n var length = prefix.length;\n var str = '';\n while (length > level1) {\n str = prefix.slice(length - level1, length) + (str.length ?\n (sep + str) : '');\n length -= level1;\n if (flag) {\n level1 = level2;\n flag = false;\n }\n }\n split[0] = prefix.slice(0, length) + (str.length ? sep : '') + str;\n return split.join(decimalSymbol);\n };\n /**\n * Returns fraction processed numeric string\n *\n * @param {number} value ?\n * @param {number} min ?\n * @param {number} max ?\n * @returns {string} ?\n */\n NumberFormat.processFraction = function (value, min, max) {\n var temp = (value + '').split('.')[1];\n var length = temp ? temp.length : 0;\n if (min && length < min) {\n var ret = '';\n if (length === 0) {\n ret = value.toFixed(min);\n }\n else {\n ret += value;\n for (var j = 0; j < min - length; j++) {\n ret += '0';\n }\n return ret;\n }\n return value.toFixed(min);\n }\n else if (!isNullOrUndefined(max) && (length > max || max === 0)) {\n return value.toFixed(max);\n }\n return value + '';\n };\n /**\n * Returns integer processed numeric string\n *\n * @param {string} value ?\n * @param {number} min ?\n * @returns {string} ?\n */\n NumberFormat.processMinimumIntegers = function (value, min) {\n var temp = value.split('.');\n var lead = temp[0];\n var len = lead.length;\n if (len < min) {\n for (var i = 0; i < min - len; i++) {\n lead = '0' + lead;\n }\n temp[0] = lead;\n }\n return temp.join('.');\n };\n /**\n * Returns custom format for pivot table\n *\n * @param {number} value ?\n */\n NumberFormat.customPivotFormat = function (value) {\n if (value >= 500000) {\n value /= 1000000;\n var _a = value.toString().split(\".\"), integer = _a[0], decimal = _a[1];\n return decimal && +decimal.substring(0, 1) >= 5\n ? Math.ceil(value).toString()\n : Math.floor(value).toString();\n }\n return \"\";\n };\n return NumberFormat;\n}());\nexport { NumberFormat };\n","import { IntlBase as base } from './intl-base';\nimport { ParserBase as parser } from './parser-base';\nimport { isUndefined, throwError, getValue, isNullOrUndefined, isBlazor } from '../util';\nimport { datePartMatcher } from './date-formatter';\nimport { HijriParser } from '../hijri-parser';\nvar standalone = 'stand-alone';\nvar latnRegex = /^[0-9]*$/;\nvar timeSetter = {\n minute: 'setMinutes',\n hour: 'setHours',\n second: 'setSeconds',\n day: 'setDate',\n month: 'setMonth',\n milliseconds: 'setMilliseconds'\n};\nvar month = 'months';\n/* tslint:disable no-any */\n/**\n * Date Parser.\n *\n * @private\n */\nvar DateParser = /** @class */ (function () {\n function DateParser() {\n }\n /**\n * Returns the parser function for given skeleton.\n *\n * @param {string} culture - Specifies the culture name to be which formatting.\n * @param {DateFormatOptions} option - Specific the format in which string date will be parsed.\n * @param {Object} cldr - Specifies the global cldr data collection.\n * @returns {Function} ?\n */\n DateParser.dateParser = function (culture, option, cldr) {\n var _this = this;\n var dependable = base.getDependables(cldr, culture, option.calendar);\n var numOptions = parser.getCurrentNumericOptions(dependable.parserObject, parser.getNumberingSystem(cldr), false, isBlazor());\n var parseOptions = {};\n if (isBlazor() && option.isServerRendered) {\n option = base.compareBlazorDateFormats(option, culture);\n }\n var resPattern = option.format ||\n base.getResultantPattern(option.skeleton, dependable.dateObject, option.type, false, isBlazor() ? culture : '');\n var regexString = '';\n var hourOnly;\n if (isUndefined(resPattern)) {\n throwError('Format options or type given must be invalid');\n }\n else {\n resPattern = base.ConvertDateToWeekFormat(resPattern);\n parseOptions = { isIslamic: base.islamicRegex.test(option.calendar), pattern: resPattern, evalposition: {}, culture: culture };\n var patternMatch = resPattern.match(base.dateParseRegex) || [];\n var length_1 = patternMatch.length;\n var gmtCorrection = 0;\n var zCorrectTemp = 0;\n var isgmtTraversed = false;\n var nRegx = numOptions.numericRegex;\n // eslint-disable-next-line\n var numMapper = isBlazor() ? dependable.parserObject.numbers :\n parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr));\n for (var i = 0; i < length_1; i++) {\n var str = patternMatch[parseInt(i.toString(), 10)];\n var len = str.length;\n var char = (str[0] === 'K') ? 'h' : str[0];\n var isNumber = void 0;\n var canUpdate = void 0;\n // eslint-disable-next-line\n var charKey = datePartMatcher[char];\n var optional = (len === 2) ? '' : '?';\n if (isgmtTraversed) {\n gmtCorrection = zCorrectTemp;\n isgmtTraversed = false;\n }\n switch (char) {\n case 'E':\n case 'c':\n // eslint-disable-next-line\n var weekData = void 0;\n if (isBlazor()) {\n // eslint-disable-next-line\n weekData = getValue('days.' + base.monthIndex[len], dependable.dateObject);\n }\n else {\n // eslint-disable-next-line\n weekData = dependable.dateObject[base.days][standalone][base.monthIndex[len]];\n }\n // eslint-disable-next-line\n var weekObject = parser.reverseObject(weekData);\n // tslint:enable\n regexString += '(' + Object.keys(weekObject).join('|') + ')';\n break;\n case 'M':\n case 'L':\n case 'd':\n case 'm':\n case 's':\n case 'h':\n case 'H':\n case 'f':\n canUpdate = true;\n if ((char === 'M' || char === 'L') && len > 2) {\n var monthData = void 0;\n if (isBlazor()) {\n // eslint-disable-next-line\n monthData = getValue('months.' + base.monthIndex[len], dependable.dateObject);\n }\n else {\n // eslint-disable-next-line\n monthData = dependable.dateObject[month][standalone][base.monthIndex[len]];\n }\n // eslint-disable-next-line\n parseOptions[charKey] = parser.reverseObject(monthData);\n // eslint-disable-next-line\n regexString += '(' + Object.keys(parseOptions[charKey]).join('|') + ')';\n }\n else if (char === 'f') {\n if (len > 3) {\n continue;\n }\n isNumber = true;\n regexString += '(' + nRegx + nRegx + '?' + nRegx + '?' + ')';\n }\n else {\n isNumber = true;\n regexString += '(' + nRegx + nRegx + optional + ')';\n }\n if (char === 'h') {\n parseOptions.hour12 = true;\n }\n break;\n case 'W':\n // eslint-disable-next-line\n var opt = len === 1 ? '?' : '';\n regexString += '(' + nRegx + opt + nRegx + ')';\n break;\n case 'y':\n canUpdate = isNumber = true;\n if (len === 2) {\n regexString += '(' + nRegx + nRegx + ')';\n }\n else {\n regexString += '(' + nRegx + '{' + len + ',})';\n }\n break;\n case 'a':\n canUpdate = true;\n // eslint-disable-next-line\n var periodValur = isBlazor() ?\n getValue('dayPeriods', dependable.dateObject) :\n getValue('dayPeriods.format.wide', dependable.dateObject);\n // eslint-disable-next-line\n parseOptions[charKey] = parser.reverseObject(periodValur);\n // eslint-disable-next-line\n regexString += '(' + Object.keys(parseOptions[charKey]).join('|') + ')';\n break;\n case 'G':\n canUpdate = true;\n // eslint-disable-next-line\n var eText = (len <= 3) ? 'eraAbbr' : (len === 4) ? 'eraNames' : 'eraNarrow';\n // eslint-disable-next-line\n parseOptions[charKey] = parser.reverseObject(isBlazor() ?\n getValue('eras', dependable.dateObject) : getValue('eras.' + eText, dependable.dateObject));\n // eslint-disable-next-line\n regexString += '(' + Object.keys(parseOptions[charKey]).join('|') + '?)';\n break;\n case 'z':\n // eslint-disable-next-line\n var tval = new Date().getTimezoneOffset();\n canUpdate = (tval !== 0);\n // eslint-disable-next-line\n parseOptions[charKey] = getValue('dates.timeZoneNames', dependable.parserObject);\n // eslint-disable-next-line\n var tzone = parseOptions[charKey];\n hourOnly = (len < 4);\n // eslint-disable-next-line\n var hpattern = hourOnly ? '+H;-H' : tzone.hourFormat;\n hpattern = hpattern.replace(/:/g, numMapper.timeSeparator);\n regexString += '(' + this.parseTimeZoneRegx(hpattern, tzone, nRegx) + ')?';\n isgmtTraversed = true;\n zCorrectTemp = hourOnly ? 6 : 12;\n break;\n case '\\'':\n // eslint-disable-next-line\n var iString = str.replace(/'/g, '');\n regexString += '(' + iString + ')?';\n break;\n default:\n regexString += '([\\\\D])';\n break;\n }\n if (canUpdate) {\n parseOptions.evalposition[\"\" + charKey] = { isNumber: isNumber, pos: i + 1 + gmtCorrection, hourOnly: hourOnly };\n }\n if (i === length_1 - 1 && !isNullOrUndefined(regexString)) {\n parseOptions.parserRegex = new RegExp('^' + regexString + '$', 'i');\n }\n }\n }\n return function (value) {\n var parsedDateParts = _this.internalDateParse(value, parseOptions, numOptions);\n if (isNullOrUndefined(parsedDateParts) || !Object.keys(parsedDateParts).length) {\n return null;\n }\n if (parseOptions.isIslamic) {\n var dobj = {};\n var tYear = parsedDateParts.year;\n var tDate = parsedDateParts.day;\n var tMonth = parsedDateParts.month;\n var ystrig = tYear ? (tYear + '') : '';\n var is2DigitYear = (ystrig.length === 2);\n if (!tYear || !tMonth || !tDate || is2DigitYear) {\n dobj = HijriParser.getHijriDate(new Date());\n }\n if (is2DigitYear) {\n tYear = parseInt((dobj.year + '').slice(0, 2) + ystrig, 10);\n }\n // tslint:disable-next-line\n var dateObject = HijriParser.toGregorian(tYear || dobj.year, tMonth || dobj.month, tDate || dobj.date);\n parsedDateParts.year = dateObject.getFullYear();\n parsedDateParts.month = dateObject.getMonth() + 1;\n parsedDateParts.day = dateObject.getDate();\n }\n return _this.getDateObject(parsedDateParts);\n };\n };\n /* tslint:disable */\n /**\n * Returns date object for provided date options\n *\n * @param {DateParts} options ?\n * @param {Date} value ?\n * @returns {Date} ?\n */\n DateParser.getDateObject = function (options, value) {\n var res = value || new Date();\n res.setMilliseconds(0);\n var tKeys = ['hour', 'minute', 'second', 'milliseconds', 'month', 'day'];\n var y = options.year;\n var desig = options.designator;\n var tzone = options.timeZone;\n if (!isUndefined(y)) {\n var len = (y + '').length;\n if (len <= 2) {\n var century = Math.floor(res.getFullYear() / 100) * 100;\n y += century;\n }\n res.setFullYear(y);\n }\n for (var _i = 0, tKeys_1 = tKeys; _i < tKeys_1.length; _i++) {\n var key = tKeys_1[_i];\n // eslint-disable-next-line\n var tValue = options[key];\n if (isUndefined(tValue) && key === 'day') {\n res.setDate(1);\n }\n if (!isUndefined(tValue)) {\n if (key === 'month') {\n tValue -= 1;\n if (tValue < 0 || tValue > 11) {\n return new Date('invalid');\n }\n var pDate = res.getDate();\n res.setDate(1);\n // eslint-disable-next-line\n res[timeSetter[key]](tValue);\n var lDate = new Date(res.getFullYear(), tValue + 1, 0).getDate();\n res.setDate(pDate < lDate ? pDate : lDate);\n }\n else {\n if (key === 'day') {\n var lastDay = new Date(res.getFullYear(), res.getMonth() + 1, 0).getDate();\n if ((tValue < 1 || tValue > lastDay)) {\n return null;\n }\n }\n // eslint-disable-next-line\n res[timeSetter[key]](tValue);\n }\n }\n }\n if (!isUndefined(desig)) {\n var hour = res.getHours();\n if (desig === 'pm') {\n res.setHours(hour + (hour === 12 ? 0 : 12));\n }\n else if (hour === 12) {\n res.setHours(0);\n }\n }\n if (!isUndefined(tzone)) {\n var tzValue = tzone - res.getTimezoneOffset();\n if (tzValue !== 0) {\n res.setMinutes(res.getMinutes() + tzValue);\n }\n }\n return res;\n };\n /**\n * Returns date parsing options for provided value along with parse and numeric options\n *\n * @param {string} value ?\n * @param {ParseOptions} parseOptions ?\n * @param {NumericOptions} num ?\n * @returns {DateParts} ?\n */\n DateParser.internalDateParse = function (value, parseOptions, num) {\n var matches = value.match(parseOptions.parserRegex);\n var retOptions = { 'hour': 0, 'minute': 0, 'second': 0 };\n if (isNullOrUndefined(matches)) {\n return null;\n }\n else {\n var props = Object.keys(parseOptions.evalposition);\n for (var _i = 0, props_1 = props; _i < props_1.length; _i++) {\n var prop = props_1[_i];\n var curObject = parseOptions.evalposition[\"\" + prop];\n var matchString = matches[curObject.pos];\n if (curObject.isNumber) {\n // eslint-disable-next-line\n retOptions[prop] = this.internalNumberParser(matchString, num);\n }\n else {\n if (prop === 'timeZone' && !isUndefined(matchString)) {\n var pos = curObject.pos;\n var val = void 0;\n var tmatch = matches[pos + 1];\n var flag = !isUndefined(tmatch);\n if (curObject.hourOnly) {\n val = this.getZoneValue(flag, tmatch, matches[pos + 4], num) * 60;\n }\n else {\n val = this.getZoneValue(flag, tmatch, matches[pos + 7], num) * 60;\n val += this.getZoneValue(flag, matches[pos + 4], matches[pos + 10], num);\n }\n if (!isNullOrUndefined(val)) {\n retOptions[\"\" + prop] = val;\n }\n }\n else {\n // eslint-disable-next-line\n matchString = ((prop === 'month') && (!parseOptions.isIslamic) && (parseOptions.culture === 'en' || parseOptions.culture === 'en-GB' || parseOptions.culture === 'en-US'))\n ? matchString[0].toUpperCase() + matchString.substring(1).toLowerCase() : matchString;\n // eslint-disable-next-line\n retOptions[prop] = parseOptions[prop][matchString];\n }\n }\n }\n if (parseOptions.hour12) {\n retOptions.hour12 = true;\n }\n }\n return retOptions;\n };\n /**\n * Returns parsed number for provided Numeric string and Numeric Options\n *\n * @param {string} value ?\n * @param {NumericOptions} option ?\n * @returns {number} ?\n */\n DateParser.internalNumberParser = function (value, option) {\n value = parser.convertValueParts(value, option.numberParseRegex, option.numericPair);\n if (latnRegex.test(value)) {\n return +value;\n }\n return null;\n };\n /**\n * Returns parsed time zone RegExp for provided hour format and time zone\n *\n * @param {string} hourFormat ?\n * @param {base.TimeZoneOptions} tZone ?\n * @param {string} nRegex ?\n * @returns {string} ?\n */\n DateParser.parseTimeZoneRegx = function (hourFormat, tZone, nRegex) {\n var pattern = tZone.gmtFormat;\n var ret;\n var cRegex = '(' + nRegex + ')' + '(' + nRegex + ')';\n var splitStr;\n ret = hourFormat.replace('+', '\\\\+');\n if (hourFormat.indexOf('HH') !== -1) {\n ret = ret.replace(/HH|mm/g, '(' + cRegex + ')');\n }\n else {\n ret = ret.replace(/H|m/g, '(' + cRegex + '?)');\n }\n // eslint-disable-next-line\n splitStr = (ret.split(';').map(function (str) {\n return pattern.replace('{0}', str);\n }));\n ret = splitStr.join('|') + '|' + tZone.gmtZeroFormat;\n return ret;\n };\n /**\n * Returns zone based value.\n *\n * @param {boolean} flag ?\n * @param {string} val1 ?\n * @param {string} val2 ?\n * @param {NumericOptions} num ?\n * @returns {number} ?\n */\n DateParser.getZoneValue = function (flag, val1, val2, num) {\n var ival = flag ? val1 : val2;\n if (!ival) {\n return 0;\n }\n var value = this.internalNumberParser(ival, num);\n if (flag) {\n return -value;\n }\n return value;\n };\n return DateParser;\n}());\nexport { DateParser };\n","import { extend, isNullOrUndefined, isBlazor, getValue } from '../util';\nimport { ParserBase as parser } from './parser-base';\nimport { IntlBase as base } from './intl-base';\nvar parseRegex = /^([^0-9]*)(([0-9,]*[0-9]+)(\\.[0-9]+)?)([Ee][+-]?[0-9]+)?([^0-9]*)$/;\nvar groupRegex = /,/g;\nvar keys = ['minusSign', 'infinity'];\n/**\n * Module for Number Parser.\n *\n * @private\n */\nvar NumberParser = /** @class */ (function () {\n function NumberParser() {\n }\n /**\n * Returns the parser function for given skeleton.\n *\n * @param {string} culture - Specifies the culture name to be which formatting.\n * @param {NumberFormatOptions} option - Specific the format in which number will parsed.\n * @param {Object} cldr - Specifies the global cldr data collection.\n * @returns {Function} ?\n */\n NumberParser.numberParser = function (culture, option, cldr) {\n var _this = this;\n var dependable = base.getDependables(cldr, culture, '', true);\n var parseOptions = { custom: true };\n var numOptions;\n if ((base.formatRegex.test(option.format)) || !(option.format)) {\n extend(parseOptions, base.getProperNumericSkeleton(option.format || 'N'));\n parseOptions.custom = false;\n if (!parseOptions.fractionDigits) {\n if (option.maximumFractionDigits) {\n parseOptions.maximumFractionDigits = option.maximumFractionDigits;\n }\n }\n }\n else {\n extend(parseOptions, base.customFormat(option.format, null, null));\n }\n var numbers = getValue('numbers', dependable.parserObject);\n // eslint-disable-next-line\n numOptions = parser.getCurrentNumericOptions(dependable.parserObject, parser.getNumberingSystem(cldr), true, isBlazor());\n parseOptions.symbolRegex = parser.getSymbolRegex(Object.keys(numOptions.symbolMatch));\n // eslint-disable-next-line\n parseOptions.infinity = numOptions.symbolNumberSystem[keys[1]];\n var symbolpattern;\n if (!isBlazor()) {\n symbolpattern = base.getSymbolPattern(parseOptions.type, numOptions.numberSystem, dependable.numericObject, parseOptions.isAccount);\n if (symbolpattern) {\n symbolpattern = symbolpattern.replace(/\\u00A4/g, base.defaultCurrency);\n var split = symbolpattern.split(';');\n parseOptions.nData = base.getFormatData(split[1] || '-' + split[0], true, '');\n parseOptions.pData = base.getFormatData(split[0], true, '');\n }\n }\n else {\n parseOptions.nData = extend({}, {}, getValue(parseOptions.type + 'nData', numbers));\n parseOptions.pData = extend({}, {}, getValue(parseOptions.type + 'pData', numbers));\n if (parseOptions.type === 'currency' && option.currency) {\n base.replaceBlazorCurrency([parseOptions.pData, parseOptions.nData], getValue('currencySymbol', numbers), option.currency);\n }\n }\n return function (value) {\n return _this.getParsedNumber(value, parseOptions, numOptions);\n };\n };\n /**\n * Returns parsed number for the provided formatting options\n *\n * @param {string} value ?\n * @param {NumericParts} options ?\n * @param {NumericOptions} numOptions ?\n * @returns {number} ?\n */\n NumberParser.getParsedNumber = function (value, options, numOptions) {\n var isNegative;\n var isPercent;\n var tempValue;\n var lead;\n var end;\n var ret;\n if (value.indexOf(options.infinity) !== -1) {\n return Infinity;\n }\n else {\n value = parser.convertValueParts(value, options.symbolRegex, numOptions.symbolMatch);\n value = parser.convertValueParts(value, numOptions.numberParseRegex, numOptions.numericPair);\n value = value.indexOf('-') !== -1 ? value.replace('-.', '-0.') : value;\n if (value.indexOf('.') === 0) {\n value = '0' + value;\n }\n var matches = value.match(parseRegex);\n if (isNullOrUndefined(matches)) {\n return NaN;\n }\n lead = matches[1];\n tempValue = matches[2];\n var exponent = matches[5];\n end = matches[6];\n isNegative = options.custom ? ((lead === options.nData.nlead) && (end === options.nData.nend)) :\n ((lead.indexOf(options.nData.nlead) !== -1) && (end.indexOf(options.nData.nend) !== -1));\n isPercent = isNegative ?\n options.nData.isPercent :\n options.pData.isPercent;\n tempValue = tempValue.replace(groupRegex, '');\n if (exponent) {\n tempValue += exponent;\n }\n ret = +tempValue;\n if (options.type === 'percent' || isPercent) {\n ret = ret / 100;\n }\n if (options.custom || options.fractionDigits) {\n ret = parseFloat(ret.toFixed(options.custom ?\n (isNegative ? options.nData.maximumFractionDigits : options.pData.maximumFractionDigits) : options.fractionDigits));\n }\n if (options.maximumFractionDigits) {\n ret = this.convertMaxFracDigits(tempValue, options, ret, isNegative);\n }\n if (isNegative) {\n ret *= -1;\n }\n return ret;\n }\n };\n NumberParser.convertMaxFracDigits = function (value, options, ret, isNegative) {\n var decimalSplitValue = value.split('.');\n if (decimalSplitValue[1] && decimalSplitValue[1].length > options.maximumFractionDigits) {\n ret = +(ret.toFixed(options.custom ?\n (isNegative ? options.nData.maximumFractionDigits : options.pData.maximumFractionDigits) : options.maximumFractionDigits));\n }\n return ret;\n };\n return NumberParser;\n}());\nexport { NumberParser };\n","import { isNullOrUndefined, getValue, extend, isBlazor } from './util';\nvar Observer = /** @class */ (function () {\n function Observer(context) {\n this.ranArray = [];\n this.boundedEvents = {};\n if (isNullOrUndefined(context)) {\n return;\n }\n this.context = context;\n }\n /**\n * To attach handler for given property in current context.\n *\n * @param {string} property - specifies the name of the event.\n * @param {Function} handler - Specifies the handler function to be called while event notified.\n * @param {Object} context - Specifies the context binded to the handler.\n * @param {string} id - specifies the random generated id.\n * @returns {void}\n */\n Observer.prototype.on = function (property, handler, context, id) {\n if (isNullOrUndefined(handler)) {\n return;\n }\n var cntxt = context || this.context;\n if (this.notExist(property)) {\n this.boundedEvents[\"\" + property] = [{ handler: handler, context: cntxt }];\n return;\n }\n if (!isNullOrUndefined(id)) {\n if (this.ranArray.indexOf(id) === -1) {\n this.ranArray.push(id);\n this.boundedEvents[\"\" + property].push({ handler: handler, context: cntxt, id: id });\n }\n }\n else if (!this.isHandlerPresent(this.boundedEvents[\"\" + property], handler)) {\n this.boundedEvents[\"\" + property].push({ handler: handler, context: cntxt });\n }\n };\n /**\n * To remove handlers from a event attached using on() function.\n *\n * @param {string} property - specifies the name of the event.\n * @param {Function} handler - Optional argument specifies the handler function to be called while event notified.\n * @param {string} id - specifies the random generated id.\n * @returns {void} ?\n */\n Observer.prototype.off = function (property, handler, id) {\n if (this.notExist(property)) {\n return;\n }\n var curObject = getValue(property, this.boundedEvents);\n if (handler) {\n for (var i = 0; i < curObject.length; i++) {\n if (id) {\n if (curObject[parseInt(i.toString(), 10)].id === id) {\n curObject.splice(i, 1);\n var indexLocation = this.ranArray.indexOf(id);\n if (indexLocation !== -1) {\n this.ranArray.splice(indexLocation, 1);\n }\n break;\n }\n }\n else if (handler === curObject[parseInt(i.toString(), 10)].handler) {\n curObject.splice(i, 1);\n break;\n }\n }\n }\n else {\n delete this.boundedEvents[\"\" + property];\n }\n };\n /**\n * To notify the handlers in the specified event.\n *\n * @param {string} property - Specifies the event to be notify.\n * @param {Object} argument - Additional parameters to pass while calling the handler.\n * @param {Function} successHandler - this function will invoke after event successfully triggered\n * @param {Function} errorHandler - this function will invoke after event if it was failure to call.\n * @returns {void} ?\n */\n Observer.prototype.notify = function (property, argument, successHandler, errorHandler) {\n if (this.notExist(property)) {\n if (successHandler) {\n successHandler.call(this, argument);\n }\n return;\n }\n if (argument) {\n argument.name = property;\n }\n var blazor = 'Blazor';\n var curObject = getValue(property, this.boundedEvents).slice(0);\n if (window[\"\" + blazor]) {\n return this.blazorCallback(curObject, argument, successHandler, errorHandler, 0);\n }\n else {\n for (var _i = 0, curObject_1 = curObject; _i < curObject_1.length; _i++) {\n var cur = curObject_1[_i];\n cur.handler.call(cur.context, argument);\n }\n if (successHandler) {\n successHandler.call(this, argument);\n }\n }\n };\n Observer.prototype.blazorCallback = function (objs, argument, successHandler, errorHandler, index) {\n var _this = this;\n var isTrigger = index === objs.length - 1;\n if (index < objs.length) {\n var obj_1 = objs[parseInt(index.toString(), 10)];\n var promise = obj_1.handler.call(obj_1.context, argument);\n if (promise && typeof promise.then === 'function') {\n if (!successHandler) {\n return promise;\n }\n promise.then(function (data) {\n data = typeof data === 'string' && _this.isJson(data) ? JSON.parse(data, _this.dateReviver) : data;\n extend(argument, argument, data, true);\n if (successHandler && isTrigger) {\n successHandler.call(obj_1.context, argument);\n }\n else {\n return _this.blazorCallback(objs, argument, successHandler, errorHandler, index + 1);\n }\n }).catch(function (data) {\n if (errorHandler) {\n errorHandler.call(obj_1.context, typeof data === 'string' &&\n _this.isJson(data) ? JSON.parse(data, _this.dateReviver) : data);\n }\n });\n }\n else if (successHandler && isTrigger) {\n successHandler.call(obj_1.context, argument);\n }\n else {\n return this.blazorCallback(objs, argument, successHandler, errorHandler, index + 1);\n }\n }\n };\n // eslint-disable-next-line\n Observer.prototype.dateReviver = function (key, value) {\n var dPattern = /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}/;\n if (isBlazor && typeof value === 'string' && value.match(dPattern) !== null) {\n return (new Date(value));\n }\n return (value);\n };\n Observer.prototype.isJson = function (value) {\n try {\n JSON.parse(value);\n }\n catch (e) {\n return false;\n }\n return true;\n };\n /**\n * To destroy handlers in the event\n *\n * @returns {void} ?\n */\n Observer.prototype.destroy = function () {\n this.boundedEvents = this.context = undefined;\n };\n /**\n * Returns if the property exists.\n *\n * @param {string} prop ?\n * @returns {boolean} ?\n */\n Observer.prototype.notExist = function (prop) {\n // eslint-disable-next-line\n return this.boundedEvents.hasOwnProperty(prop) === false || this.boundedEvents[prop].length <= 0;\n };\n /**\n * Returns if the handler is present.\n *\n * @param {BoundOptions[]} boundedEvents ?\n * @param {Function} handler ?\n * @returns {boolean} ?\n */\n Observer.prototype.isHandlerPresent = function (boundedEvents, handler) {\n for (var _i = 0, boundedEvents_1 = boundedEvents; _i < boundedEvents_1.length; _i++) {\n var cur = boundedEvents_1[_i];\n if (cur.handler === handler) {\n return true;\n }\n }\n return false;\n };\n return Observer;\n}());\nexport { Observer };\n","import { DateFormat } from './intl/date-formatter';\nimport { NumberFormat } from './intl/number-formatter';\nimport { DateParser } from './intl/date-parser';\nimport { NumberParser } from './intl/number-parser';\nimport { IntlBase } from './intl/intl-base';\nimport { extend, getValue, isBlazor } from './util';\nimport { Observer } from './observer';\n/**\n * Specifies the observer used for external change detection.\n */\nexport var onIntlChange = new Observer();\n/**\n * Specifies the default rtl status for EJ2 components.\n */\nexport var rightToLeft = false;\n/**\n * Specifies the CLDR data loaded for internationalization functionalities.\n *\n * @private\n */\nexport var cldrData = {};\n/**\n * Specifies the default culture value to be considered.\n *\n * @private\n */\nexport var defaultCulture = 'en-US';\n/**\n * Specifies default currency code to be considered\n *\n * @private\n */\nexport var defaultCurrencyCode = 'USD';\nvar mapper = ['numericObject', 'dateObject'];\n/**\n * Internationalization class provides support to parse and format the number and date object to the desired format.\n * ```typescript\n * // To set the culture globally\n * setCulture('en-GB');\n *\n * // To set currency code globally\n * setCurrencyCode('EUR');\n *\n * //Load cldr data\n * loadCldr(gregorainData);\n * loadCldr(timeZoneData);\n * loadCldr(numbersData);\n * loadCldr(numberSystemData);\n *\n * // To use formatter in component side\n * let Intl:Internationalization = new Internationalization();\n *\n * // Date formatting\n * let dateFormatter: Function = Intl.getDateFormat({skeleton:'long',type:'dateTime'});\n * dateFormatter(new Date('11/2/2016'));\n * dateFormatter(new Date('25/2/2030'));\n * Intl.formatDate(new Date(),{skeleton:'E'});\n *\n * //Number formatting\n * let numberFormatter: Function = Intl.getNumberFormat({skeleton:'C5'})\n * numberFormatter(24563334);\n * Intl.formatNumber(123123,{skeleton:'p2'});\n *\n * // Date parser\n * let dateParser: Function = Intl.getDateParser({skeleton:'short',type:'time'});\n * dateParser('10:30 PM');\n * Intl.parseDate('10',{skeleton:'H'});\n * ```\n */\nvar Internationalization = /** @class */ (function () {\n function Internationalization(cultureName) {\n if (cultureName) {\n this.culture = cultureName;\n }\n }\n /**\n * Returns the format function for given options.\n *\n * @param {DateFormatOptions} options - Specifies the format options in which the format function will return.\n * @returns {Function} ?\n */\n Internationalization.prototype.getDateFormat = function (options) {\n return DateFormat.dateFormat(this.getCulture(), options || { type: 'date', skeleton: 'short' }, cldrData);\n };\n /**\n * Returns the format function for given options.\n *\n * @param {NumberFormatOptions} options - Specifies the format options in which the format function will return.\n * @returns {Function} ?\n */\n Internationalization.prototype.getNumberFormat = function (options) {\n if (options && !options.currency) {\n options.currency = defaultCurrencyCode;\n }\n if (isBlazor() && options && !options.format) {\n options.minimumFractionDigits = 0;\n }\n return NumberFormat.numberFormatter(this.getCulture(), options || {}, cldrData);\n };\n /**\n * Returns the parser function for given options.\n *\n * @param {DateFormatOptions} options - Specifies the format options in which the parser function will return.\n * @returns {Function} ?\n */\n Internationalization.prototype.getDateParser = function (options) {\n return DateParser.dateParser(this.getCulture(), options || { skeleton: 'short', type: 'date' }, cldrData);\n };\n /**\n * Returns the parser function for given options.\n *\n * @param {NumberFormatOptions} options - Specifies the format options in which the parser function will return.\n * @returns {Function} ?\n */\n Internationalization.prototype.getNumberParser = function (options) {\n if (isBlazor() && options && !options.format) {\n options.minimumFractionDigits = 0;\n }\n return NumberParser.numberParser(this.getCulture(), options || { format: 'N' }, cldrData);\n };\n /**\n * Returns the formatted string based on format options.\n *\n * @param {number} value - Specifies the number to format.\n * @param {NumberFormatOptions} option - Specifies the format options in which the number will be formatted.\n * @returns {string} ?\n */\n Internationalization.prototype.formatNumber = function (value, option) {\n return this.getNumberFormat(option)(value);\n };\n /**\n * Returns the formatted date string based on format options.\n *\n * @param {Date} value - Specifies the number to format.\n * @param {DateFormatOptions} option - Specifies the format options in which the number will be formatted.\n * @returns {string} ?\n */\n Internationalization.prototype.formatDate = function (value, option) {\n return this.getDateFormat(option)(value);\n };\n /**\n * Returns the date object for given date string and options.\n *\n * @param {string} value - Specifies the string to parse.\n * @param {DateFormatOptions} option - Specifies the parse options in which the date string will be parsed.\n * @returns {Date} ?\n */\n Internationalization.prototype.parseDate = function (value, option) {\n return this.getDateParser(option)(value);\n };\n /**\n * Returns the number object from the given string value and options.\n *\n * @param {string} value - Specifies the string to parse.\n * @param {NumberFormatOptions} option - Specifies the parse options in which the string number will be parsed.\n * @returns {number} ?\n */\n Internationalization.prototype.parseNumber = function (value, option) {\n return this.getNumberParser(option)(value);\n };\n /**\n * Returns Native Date Time Pattern\n *\n * @param {DateFormatOptions} option - Specifies the parse options for resultant date time pattern.\n * @param {boolean} isExcelFormat - Specifies format value to be converted to excel pattern.\n * @returns {string} ?\n * @private\n */\n Internationalization.prototype.getDatePattern = function (option, isExcelFormat) {\n return IntlBase.getActualDateTimeFormat(this.getCulture(), option, cldrData, isExcelFormat);\n };\n /**\n * Returns Native Number Pattern\n *\n * @param {NumberFormatOptions} option - Specifies the parse options for resultant number pattern.\n * @param {boolean} isExcel ?\n * @returns {string} ?\n * @private\n */\n Internationalization.prototype.getNumberPattern = function (option, isExcel) {\n return IntlBase.getActualNumberFormat(this.getCulture(), option, cldrData, isExcel);\n };\n /**\n * Returns the First Day of the Week\n *\n * @returns {number} ?\n */\n Internationalization.prototype.getFirstDayOfWeek = function () {\n return IntlBase.getWeekData(this.getCulture(), cldrData);\n };\n /**\n * Returns the culture\n *\n * @returns {string} ?\n */\n Internationalization.prototype.getCulture = function () {\n return this.culture || defaultCulture;\n };\n return Internationalization;\n}());\nexport { Internationalization };\n/**\n * Set the default culture to all EJ2 components\n *\n * @param {string} cultureName - Specifies the culture name to be set as default culture.\n * @returns {void} ?\n */\nexport function setCulture(cultureName) {\n defaultCulture = cultureName;\n onIntlChange.notify('notifyExternalChange', { 'locale': defaultCulture });\n}\n/**\n * Set the default currency code to all EJ2 components\n *\n * @param {string} currencyCode Specifies the culture name to be set as default culture.\n * @returns {void} ?\n */\nexport function setCurrencyCode(currencyCode) {\n defaultCurrencyCode = currencyCode;\n onIntlChange.notify('notifyExternalChange', { 'currencyCode': defaultCurrencyCode });\n}\n/**\n * Load the CLDR data into context\n *\n * @param {Object[]} data Specifies the CLDR data's to be used for formatting and parser.\n * @returns {void} ?\n */\nexport function loadCldr() {\n var data = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n data[_i] = arguments[_i];\n }\n for (var _a = 0, data_1 = data; _a < data_1.length; _a++) {\n var obj = data_1[_a];\n extend(cldrData, obj, {}, true);\n }\n}\n/**\n * To enable or disable RTL functionality for all components globally.\n *\n * @param {boolean} status - Optional argument Specifies the status value to enable or disable rtl option.\n * @returns {void} ?\n */\nexport function enableRtl(status) {\n if (status === void 0) { status = true; }\n rightToLeft = status;\n onIntlChange.notify('notifyExternalChange', { enableRtl: rightToLeft });\n}\n/**\n * To get the numeric CLDR object for given culture\n *\n * @param {string} locale - Specifies the locale for which numericObject to be returned.\n * @param {string} type ?\n * @returns {Object} ?\n * @ignore\n * @private\n */\nexport function getNumericObject(locale, type) {\n // eslint-disable-next-line\n var numObject = IntlBase.getDependables(cldrData, locale, '', true)[mapper[0]];\n // eslint-disable-next-line\n var dateObject = IntlBase.getDependables(cldrData, locale, '')[mapper[1]];\n var numSystem = getValue('defaultNumberingSystem', numObject);\n var symbPattern = isBlazor() ? getValue('numberSymbols', numObject) : getValue('symbols-numberSystem-' + numSystem, numObject);\n var pattern = IntlBase.getSymbolPattern(type || 'decimal', numSystem, numObject, false);\n return extend(symbPattern, IntlBase.getFormatData(pattern, true, '', true), { 'dateSeparator': IntlBase.getDateSeparator(dateObject) });\n}\n/**\n * To get the numeric CLDR number base object for given culture\n *\n * @param {string} locale - Specifies the locale for which numericObject to be returned.\n * @param {string} currency - Specifies the currency for which numericObject to be returned.\n * @returns {string} ?\n * @ignore\n * @private\n */\nexport function getNumberDependable(locale, currency) {\n // eslint-disable-next-line\n var numObject = IntlBase.getDependables(cldrData, locale, '', true);\n // eslint-disable-next-line\n return IntlBase.getCurrencySymbol(numObject.numericObject, currency);\n}\n/**\n * To get the default date CLDR object.\n *\n * @param {string} mode ?\n * @returns {Object} ?\n * @ignore\n * @private\n */\nexport function getDefaultDateObject(mode) {\n // eslint-disable-next-line\n return IntlBase.getDependables(cldrData, '', mode, false)[mapper[1]];\n}\n","import { defaultCurrencyCode } from '../internationalization';\nimport { getValue, isNullOrUndefined, extend, isBlazor } from '../util';\nimport { ParserBase as parser, getBlazorCurrencySymbol } from './parser-base';\nimport { DateFormat } from './date-formatter';\nimport { NumberFormat } from './number-formatter';\nimport { isUndefined } from '../util';\nexport var blazorCultureFormats = {\n 'en-US': {\n 'd': 'M/d/y',\n 'D': 'EEEE, MMMM d, y',\n 'f': 'EEEE, MMMM d, y h:mm a',\n 'F': 'EEEE, MMMM d, y h:mm:s a',\n 'g': 'M/d/y h:mm a',\n 'G': 'M/d/yyyy h:mm:ss tt',\n 'm': 'MMMM d',\n 'M': 'MMMM d',\n 'r': 'ddd, dd MMM yyyy HH\\':\\'mm\\':\\'ss \\'GMT\\'',\n 'R': 'ddd, dd MMM yyyy HH\\':\\'mm\\':\\'ss \\'GMT\\'',\n 's': 'yyyy\\'-\\'MM\\'-\\'dd\\'T\\'HH\\':\\'mm\\':\\'ss',\n 't': 'h:mm tt',\n 'T': 'h:m:s tt',\n 'u': 'yyyy\\'-\\'MM\\'-\\'dd HH\\':\\'mm\\':\\'ss\\'Z\\'',\n 'U': 'dddd, MMMM d, yyyy h:mm:ss tt',\n 'y': 'MMMM yyyy',\n 'Y': 'MMMM yyyy'\n }\n};\n/**\n * Date base common constants and function for date parser and formatter.\n */\n// eslint-disable-next-line\nexport var IntlBase;\n(function (IntlBase) {\n // tslint:disable-next-line:max-line-length\n IntlBase.negativeDataRegex = /^(('[^']+'|''|[^*#@0,.E])*)(\\*.)?((([#,]*[0,]*0+)(\\.0*[0-9]*#*)?)|([#,]*@+#*))(E\\+?0+)?(('[^']+'|''|[^*#@0,.E])*)$/;\n IntlBase.customRegex = /^(('[^']+'|''|[^*#@0,.])*)(\\*.)?((([0#,]*[0,]*[0#]*[0#\\ ]*)(\\.[0#]*)?)|([#,]*@+#*))(E\\+?0+)?(('[^']+'|''|[^*#@0,.E])*)$/;\n IntlBase.latnParseRegex = /0|1|2|3|4|5|6|7|8|9/g;\n var fractionRegex = /[0-9]/g;\n IntlBase.defaultCurrency = '$';\n var mapper = ['infinity', 'nan', 'group', 'decimal'];\n var patternRegex = /G|M|L|H|c|'| a|yy|y|EEEE|E/g;\n var patternMatch = {\n 'G': '',\n 'M': 'm',\n 'L': 'm',\n 'H': 'h',\n 'c': 'd',\n '\\'': '\"',\n ' a': ' AM/PM',\n 'yy': 'yy',\n 'y': 'yyyy',\n 'EEEE': 'dddd',\n 'E': 'ddd'\n };\n IntlBase.dateConverterMapper = /dddd|ddd/ig;\n var defaultFirstDay = 'sun';\n IntlBase.islamicRegex = /^islamic/;\n var firstDayMapper = {\n 'sun': 0,\n 'mon': 1,\n 'tue': 2,\n 'wed': 3,\n 'thu': 4,\n 'fri': 5,\n 'sat': 6\n };\n IntlBase.formatRegex = /(^[ncpae]{1})([0-1]?[0-9]|20)?$/i;\n IntlBase.currencyFormatRegex = /(^[ca]{1})([0-1]?[0-9]|20)?$/i;\n IntlBase.curWithoutNumberRegex = /(c|a)$/ig;\n var typeMapper = {\n '$': 'isCurrency',\n '%': 'isPercent',\n '-': 'isNegative',\n 0: 'nlead',\n 1: 'nend'\n };\n IntlBase.dateParseRegex = /([a-z])\\1*|'([^']|'')+'|''|./gi;\n IntlBase.basicPatterns = ['short', 'medium', 'long', 'full'];\n /* tslint:disable:quotemark */\n IntlBase.defaultObject = {\n 'dates': {\n 'calendars': {\n 'gregorian': {\n 'months': {\n 'stand-alone': {\n 'abbreviated': {\n '1': 'Jan',\n '2': 'Feb',\n '3': 'Mar',\n '4': 'Apr',\n '5': 'May',\n '6': 'Jun',\n '7': 'Jul',\n '8': 'Aug',\n '9': 'Sep',\n '10': 'Oct',\n '11': 'Nov',\n '12': 'Dec'\n },\n 'narrow': {\n '1': 'J',\n '2': 'F',\n '3': 'M',\n '4': 'A',\n '5': 'M',\n '6': 'J',\n '7': 'J',\n '8': 'A',\n '9': 'S',\n '10': 'O',\n '11': 'N',\n '12': 'D'\n },\n 'wide': {\n '1': 'January',\n '2': 'February',\n '3': 'March',\n '4': 'April',\n '5': 'May',\n '6': 'June',\n '7': 'July',\n '8': 'August',\n '9': 'September',\n '10': 'October',\n '11': 'November',\n '12': 'December'\n }\n }\n },\n 'days': {\n 'stand-alone': {\n 'abbreviated': {\n 'sun': 'Sun',\n 'mon': 'Mon',\n 'tue': 'Tue',\n 'wed': 'Wed',\n 'thu': 'Thu',\n 'fri': 'Fri',\n 'sat': 'Sat'\n },\n 'narrow': {\n 'sun': 'S',\n 'mon': 'M',\n 'tue': 'T',\n 'wed': 'W',\n 'thu': 'T',\n 'fri': 'F',\n 'sat': 'S'\n },\n 'short': {\n 'sun': 'Su',\n 'mon': 'Mo',\n 'tue': 'Tu',\n 'wed': 'We',\n 'thu': 'Th',\n 'fri': 'Fr',\n 'sat': 'Sa'\n },\n 'wide': {\n 'sun': 'Sunday',\n 'mon': 'Monday',\n 'tue': 'Tuesday',\n 'wed': 'Wednesday',\n 'thu': 'Thursday',\n 'fri': 'Friday',\n 'sat': 'Saturday'\n }\n }\n },\n 'dayPeriods': {\n 'format': {\n 'wide': {\n 'am': 'AM',\n 'pm': 'PM'\n }\n }\n },\n 'eras': {\n 'eraNames': {\n '0': 'Before Christ',\n '0-alt-variant': 'Before Common Era',\n '1': 'Anno Domini',\n '1-alt-variant': 'Common Era'\n },\n 'eraAbbr': {\n '0': 'BC',\n '0-alt-variant': 'BCE',\n '1': 'AD',\n '1-alt-variant': 'CE'\n },\n 'eraNarrow': {\n '0': 'B',\n '0-alt-variant': 'BCE',\n '1': 'A',\n '1-alt-variant': 'CE'\n }\n },\n 'dateFormats': {\n 'full': 'EEEE, MMMM d, y',\n 'long': 'MMMM d, y',\n 'medium': 'MMM d, y',\n 'short': 'M/d/yy'\n },\n 'timeFormats': {\n 'full': 'h:mm:ss a zzzz',\n 'long': 'h:mm:ss a z',\n 'medium': 'h:mm:ss a',\n 'short': 'h:mm a'\n },\n 'dateTimeFormats': {\n 'full': '{1} \\'at\\' {0}',\n 'long': '{1} \\'at\\' {0}',\n 'medium': '{1}, {0}',\n 'short': '{1}, {0}',\n 'availableFormats': {\n 'd': 'd',\n 'E': 'ccc',\n 'Ed': 'd E',\n 'Ehm': 'E h:mm a',\n 'EHm': 'E HH:mm',\n 'Ehms': 'E h:mm:ss a',\n 'EHms': 'E HH:mm:ss',\n 'Gy': 'y G',\n 'GyMMM': 'MMM y G',\n 'GyMMMd': 'MMM d, y G',\n 'GyMMMEd': 'E, MMM d, y G',\n 'h': 'h a',\n 'H': 'HH',\n 'hm': 'h:mm a',\n 'Hm': 'HH:mm',\n 'hms': 'h:mm:ss a',\n 'Hms': 'HH:mm:ss',\n 'hmsv': 'h:mm:ss a v',\n 'Hmsv': 'HH:mm:ss v',\n 'hmv': 'h:mm a v',\n 'Hmv': 'HH:mm v',\n 'M': 'L',\n 'Md': 'M/d',\n 'MEd': 'E, M/d',\n 'MMM': 'LLL',\n 'MMMd': 'MMM d',\n 'MMMEd': 'E, MMM d',\n 'MMMMd': 'MMMM d',\n 'ms': 'mm:ss',\n 'y': 'y',\n 'yM': 'M/y',\n 'yMd': 'M/d/y',\n 'yMEd': 'E, M/d/y',\n 'yMMM': 'MMM y',\n 'yMMMd': 'MMM d, y',\n 'yMMMEd': 'E, MMM d, y',\n 'yMMMM': 'MMMM y'\n }\n }\n },\n 'islamic': {\n 'months': {\n 'stand-alone': {\n 'abbreviated': {\n '1': 'Muh.',\n '2': 'Saf.',\n '3': 'Rab. I',\n '4': 'Rab. II',\n '5': 'Jum. I',\n '6': 'Jum. II',\n '7': 'Raj.',\n '8': 'Sha.',\n '9': 'Ram.',\n '10': 'Shaw.',\n '11': 'Dhuʻl-Q.',\n '12': 'Dhuʻl-H.'\n },\n 'narrow': {\n '1': '1',\n '2': '2',\n '3': '3',\n '4': '4',\n '5': '5',\n '6': '6',\n '7': '7',\n '8': '8',\n '9': '9',\n '10': '10',\n '11': '11',\n '12': '12'\n },\n 'wide': {\n '1': 'Muharram',\n '2': 'Safar',\n '3': 'Rabiʻ I',\n '4': 'Rabiʻ II',\n '5': 'Jumada I',\n '6': 'Jumada II',\n '7': 'Rajab',\n '8': 'Shaʻban',\n '9': 'Ramadan',\n '10': 'Shawwal',\n '11': 'Dhuʻl-Qiʻdah',\n '12': 'Dhuʻl-Hijjah'\n }\n }\n },\n 'days': {\n 'stand-alone': {\n 'abbreviated': {\n 'sun': 'Sun',\n 'mon': 'Mon',\n 'tue': 'Tue',\n 'wed': 'Wed',\n 'thu': 'Thu',\n 'fri': 'Fri',\n 'sat': 'Sat'\n },\n 'narrow': {\n 'sun': 'S',\n 'mon': 'M',\n 'tue': 'T',\n 'wed': 'W',\n 'thu': 'T',\n 'fri': 'F',\n 'sat': 'S'\n },\n 'short': {\n 'sun': 'Su',\n 'mon': 'Mo',\n 'tue': 'Tu',\n 'wed': 'We',\n 'thu': 'Th',\n 'fri': 'Fr',\n 'sat': 'Sa'\n },\n 'wide': {\n 'sun': 'Sunday',\n 'mon': 'Monday',\n 'tue': 'Tuesday',\n 'wed': 'Wednesday',\n 'thu': 'Thursday',\n 'fri': 'Friday',\n 'sat': 'Saturday'\n }\n }\n },\n 'dayPeriods': {\n 'format': {\n 'wide': {\n 'am': 'AM',\n 'pm': 'PM'\n }\n }\n },\n 'eras': {\n 'eraNames': {\n '0': 'AH'\n },\n 'eraAbbr': {\n '0': 'AH'\n },\n 'eraNarrow': {\n '0': 'AH'\n }\n },\n 'dateFormats': {\n 'full': 'EEEE, MMMM d, y G',\n 'long': 'MMMM d, y G',\n 'medium': 'MMM d, y G',\n 'short': 'M/d/y GGGGG'\n },\n 'timeFormats': {\n 'full': 'h:mm:ss a zzzz',\n 'long': 'h:mm:ss a z',\n 'medium': 'h:mm:ss a',\n 'short': 'h:mm a'\n },\n 'dateTimeFormats': {\n 'full': '{1} \\'at\\' {0}',\n 'long': '{1} \\'at\\' {0}',\n 'medium': '{1}, {0}',\n 'short': '{1}, {0}',\n 'availableFormats': {\n 'd': 'd',\n 'E': 'ccc',\n 'Ed': 'd E',\n 'Ehm': 'E h:mm a',\n 'EHm': 'E HH:mm',\n 'Ehms': 'E h:mm:ss a',\n 'EHms': 'E HH:mm:ss',\n 'Gy': 'y G',\n 'GyMMM': 'MMM y G',\n 'GyMMMd': 'MMM d, y G',\n 'GyMMMEd': 'E, MMM d, y G',\n 'h': 'h a',\n 'H': 'HH',\n 'hm': 'h:mm a',\n 'Hm': 'HH:mm',\n 'hms': 'h:mm:ss a',\n 'Hms': 'HH:mm:ss',\n 'M': 'L',\n 'Md': 'M/d',\n 'MEd': 'E, M/d',\n 'MMM': 'LLL',\n 'MMMd': 'MMM d',\n 'MMMEd': 'E, MMM d',\n 'MMMMd': 'MMMM d',\n 'ms': 'mm:ss',\n 'y': 'y G',\n 'yyyy': 'y G',\n 'yyyyM': 'M/y GGGGG',\n 'yyyyMd': 'M/d/y GGGGG',\n 'yyyyMEd': 'E, M/d/y GGGGG',\n 'yyyyMMM': 'MMM y G',\n 'yyyyMMMd': 'MMM d, y G',\n 'yyyyMMMEd': 'E, MMM d, y G',\n 'yyyyMMMM': 'MMMM y G',\n 'yyyyQQQ': 'QQQ y G',\n 'yyyyQQQQ': 'QQQQ y G'\n }\n }\n }\n },\n 'timeZoneNames': {\n 'hourFormat': '+HH:mm;-HH:mm',\n 'gmtFormat': 'GMT{0}',\n 'gmtZeroFormat': 'GMT'\n }\n },\n 'numbers': {\n 'currencies': {\n 'USD': {\n 'displayName': 'US Dollar',\n 'symbol': '$',\n 'symbol-alt-narrow': '$'\n },\n 'EUR': {\n 'displayName': 'Euro',\n 'symbol': '€',\n 'symbol-alt-narrow': '€'\n },\n 'GBP': {\n 'displayName': 'British Pound',\n 'symbol-alt-narrow': '£'\n }\n },\n 'defaultNumberingSystem': 'latn',\n 'minimumGroupingDigits': '1',\n 'symbols-numberSystem-latn': {\n 'decimal': '.',\n 'group': ',',\n 'list': ';',\n 'percentSign': '%',\n 'plusSign': '+',\n 'minusSign': '-',\n 'exponential': 'E',\n 'superscriptingExponent': '×',\n 'perMille': '‰',\n 'infinity': '∞',\n 'nan': 'NaN',\n 'timeSeparator': ':'\n },\n 'decimalFormats-numberSystem-latn': {\n 'standard': '#,##0.###'\n },\n 'percentFormats-numberSystem-latn': {\n 'standard': '#,##0%'\n },\n 'currencyFormats-numberSystem-latn': {\n 'standard': '¤#,##0.00',\n 'accounting': '¤#,##0.00;(¤#,##0.00)'\n },\n 'scientificFormats-numberSystem-latn': {\n 'standard': '#E0'\n }\n }\n };\n IntlBase.blazorDefaultObject = {\n 'numbers': {\n 'mapper': {\n '0': '0',\n '1': '1',\n '2': '2',\n '3': '3',\n '4': '4',\n '5': '5',\n '6': '6',\n '7': '7',\n '8': '8',\n '9': '9'\n },\n 'mapperDigits': '0123456789',\n 'numberSymbols': {\n 'decimal': '.',\n 'group': ',',\n 'plusSign': '+',\n 'minusSign': '-',\n 'percentSign': '%',\n 'nan': 'NaN',\n 'timeSeparator': ':',\n 'infinity': '∞'\n },\n 'timeSeparator': ':',\n 'currencySymbol': '$',\n 'currencypData': {\n 'nlead': '$',\n 'nend': '',\n 'groupSeparator': ',',\n 'groupData': {\n 'primary': 3\n },\n 'maximumFraction': 2,\n 'minimumFraction': 2\n },\n 'percentpData': {\n 'nlead': '',\n 'nend': '%',\n 'groupSeparator': ',',\n 'groupData': {\n 'primary': 3\n },\n 'maximumFraction': 2,\n 'minimumFraction': 2\n },\n 'percentnData': {\n 'nlead': '-',\n 'nend': '%',\n 'groupSeparator': ',',\n 'groupData': {\n 'primary': 3\n },\n 'maximumFraction': 2,\n 'minimumFraction': 2\n },\n 'currencynData': {\n 'nlead': '($',\n 'nend': ')',\n 'groupSeparator': ',',\n 'groupData': {\n 'primary': 3\n },\n 'maximumFraction': 2,\n 'minimumFraction': 2\n },\n 'decimalnData': {\n 'nlead': '-',\n 'nend': '',\n 'groupData': {\n 'primary': 3\n },\n 'maximumFraction': 2,\n 'minimumFraction': 2\n },\n 'decimalpData': {\n 'nlead': '',\n 'nend': '',\n 'groupData': {\n 'primary': 3\n },\n 'maximumFraction': 2,\n 'minimumFraction': 2\n }\n },\n 'dates': {\n 'dayPeriods': {\n 'am': 'AM',\n 'pm': 'PM'\n },\n 'dateSeperator': '/',\n 'days': {\n 'abbreviated': {\n 'sun': 'Sun',\n 'mon': 'Mon',\n 'tue': 'Tue',\n 'wed': 'Wed',\n 'thu': 'Thu',\n 'fri': 'Fri',\n 'sat': 'Sat'\n },\n 'short': {\n 'sun': 'Su',\n 'mon': 'Mo',\n 'tue': 'Tu',\n 'wed': 'We',\n 'thu': 'Th',\n 'fri': 'Fr',\n 'sat': 'Sa'\n },\n 'wide': {\n 'sun': 'Sunday',\n 'mon': 'Monday',\n 'tue': 'Tuesday',\n 'wed': 'Wednesday',\n 'thu': 'Thursday',\n 'fri': 'Friday',\n 'sat': 'Saturday'\n }\n },\n 'months': {\n 'abbreviated': {\n '1': 'Jan',\n '2': 'Feb',\n '3': 'Mar',\n '4': 'Apr',\n '5': 'May',\n '6': 'Jun',\n '7': 'Jul',\n '8': 'Aug',\n '9': 'Sep',\n '10': 'Oct',\n '11': 'Nov',\n '12': 'Dec'\n },\n 'wide': {\n '1': 'January',\n '2': 'February',\n '3': 'March',\n '4': 'April',\n '5': 'May',\n '6': 'June',\n '7': 'July',\n '8': 'August',\n '9': 'September',\n '10': 'October',\n '11': 'November',\n '12': 'December'\n }\n },\n 'eras': {\n '1': 'AD'\n }\n }\n };\n /* tslint:enable:quotemark */\n IntlBase.monthIndex = {\n 3: 'abbreviated',\n 4: 'wide',\n 5: 'narrow',\n 1: 'abbreviated'\n };\n /**\n *\n */\n IntlBase.month = 'months';\n IntlBase.days = 'days';\n /**\n * Default numerber Object\n */\n IntlBase.patternMatcher = {\n C: 'currency',\n P: 'percent',\n N: 'decimal',\n A: 'currency',\n E: 'scientific'\n };\n /**\n * Returns the resultant pattern based on the skeleton, dateObject and the type provided\n *\n * @private\n * @param {string} skeleton ?\n * @param {Object} dateObject ?\n * @param {string} type ?\n * @param {boolean} isIslamic ?\n * @param {string} blazorCulture ?\n * @returns {string} ?\n */\n function getResultantPattern(skeleton, dateObject, type, isIslamic, blazorCulture) {\n var resPattern;\n var iType = type || 'date';\n if (blazorCulture) {\n resPattern = compareBlazorDateFormats({ skeleton: skeleton }, blazorCulture).format ||\n compareBlazorDateFormats({ skeleton: 'd' }, 'en-US').format;\n }\n else {\n if (IntlBase.basicPatterns.indexOf(skeleton) !== -1) {\n resPattern = getValue(iType + 'Formats.' + skeleton, dateObject);\n if (iType === 'dateTime') {\n var dPattern = getValue('dateFormats.' + skeleton, dateObject);\n var tPattern = getValue('timeFormats.' + skeleton, dateObject);\n resPattern = resPattern.replace('{1}', dPattern).replace('{0}', tPattern);\n }\n }\n else {\n resPattern = getValue('dateTimeFormats.availableFormats.' + skeleton, dateObject);\n }\n if (isUndefined(resPattern) && skeleton === 'yMd') {\n resPattern = 'M/d/y';\n }\n }\n return resPattern;\n }\n IntlBase.getResultantPattern = getResultantPattern;\n /**\n * Returns the dependable object for provided cldr data and culture\n *\n * @private\n * @param {Object} cldr ?\n * @param {string} culture ?\n * @param {string} mode ?\n * @param {boolean} isNumber ?\n * @returns {any} ?\n */\n function getDependables(cldr, culture, mode, isNumber) {\n var ret = {};\n var calendartype = mode || 'gregorian';\n ret.parserObject = parser.getMainObject(cldr, culture) || (isBlazor() ? IntlBase.blazorDefaultObject : IntlBase.defaultObject);\n if (isNumber) {\n ret.numericObject = getValue('numbers', ret.parserObject);\n }\n else {\n var dateString = isBlazor() ? 'dates' : ('dates.calendars.' + calendartype);\n ret.dateObject = getValue(dateString, ret.parserObject);\n }\n return ret;\n }\n IntlBase.getDependables = getDependables;\n /**\n * Returns the symbol pattern for provided parameters\n *\n * @private\n * @param {string} type ?\n * @param {string} numSystem ?\n * @param {Object} obj ?\n * @param {boolean} isAccount ?\n * @returns {string} ?\n */\n function getSymbolPattern(type, numSystem, obj, isAccount) {\n return getValue(type + 'Formats-numberSystem-' +\n numSystem + (isAccount ? '.accounting' : '.standard'), obj) || (isAccount ? getValue(type + 'Formats-numberSystem-' +\n numSystem + '.standard', obj) : '');\n }\n IntlBase.getSymbolPattern = getSymbolPattern;\n /**\n *\n * @param {string} format ?\n * @returns {string} ?\n */\n function ConvertDateToWeekFormat(format) {\n var convertMapper = format.match(IntlBase.dateConverterMapper);\n if (convertMapper && isBlazor()) {\n var tempString = convertMapper[0].length === 3 ? 'EEE' : 'EEEE';\n return format.replace(IntlBase.dateConverterMapper, tempString);\n }\n return format;\n }\n IntlBase.ConvertDateToWeekFormat = ConvertDateToWeekFormat;\n /**\n *\n * @param {DateFormatOptions} formatOptions ?\n * @param {string} culture ?\n * @returns {DateFormatOptions} ?\n */\n function compareBlazorDateFormats(formatOptions, culture) {\n var format = formatOptions.format || formatOptions.skeleton;\n var curFormatMapper = getValue((culture || 'en-US') + '.' + format, blazorCultureFormats);\n if (!curFormatMapper) {\n curFormatMapper = getValue('en-US.' + format, blazorCultureFormats);\n }\n if (curFormatMapper) {\n curFormatMapper = ConvertDateToWeekFormat(curFormatMapper);\n formatOptions.format = curFormatMapper.replace(/tt/, 'a');\n }\n return formatOptions;\n }\n IntlBase.compareBlazorDateFormats = compareBlazorDateFormats;\n /**\n * Returns proper numeric skeleton\n *\n * @private\n * @param {string} skeleton ?\n * @returns {any} ?\n */\n function getProperNumericSkeleton(skeleton) {\n var matches = skeleton.match(IntlBase.formatRegex);\n var ret = {};\n var pattern = matches[1].toUpperCase();\n ret.isAccount = (pattern === 'A');\n // eslint-disable-next-line\n ret.type = IntlBase.patternMatcher[pattern];\n if (skeleton.length > 1) {\n ret.fractionDigits = parseInt(matches[2], 10);\n }\n return ret;\n }\n IntlBase.getProperNumericSkeleton = getProperNumericSkeleton;\n /**\n * Returns format data for number formatting like minimum fraction, maximum fraction, etc..,\n *\n * @private\n * @param {string} pattern ?\n * @param {boolean} needFraction ?\n * @param {string} cSymbol ?\n * @param {boolean} fractionOnly ?\n * @returns {any} ?\n */\n function getFormatData(pattern, needFraction, cSymbol, fractionOnly) {\n var nData = fractionOnly ? {} : { nlead: '', nend: '' };\n var match = pattern.match(IntlBase.customRegex);\n if (match) {\n if (!fractionOnly) {\n nData.nlead = changeCurrencySymbol(match[1], cSymbol);\n nData.nend = changeCurrencySymbol(match[10], cSymbol);\n nData.groupPattern = match[4];\n }\n var fraction = match[7];\n if (fraction && needFraction) {\n var fmatch = fraction.match(fractionRegex);\n if (!isNullOrUndefined(fmatch)) {\n nData.minimumFraction = fmatch.length;\n }\n else {\n nData.minimumFraction = 0;\n }\n nData.maximumFraction = fraction.length - 1;\n }\n }\n return nData;\n }\n IntlBase.getFormatData = getFormatData;\n /**\n * Changes currency symbol\n *\n * @private\n * @param {string} val ?\n * @param {string} sym ?\n * @returns {string} ?\n */\n function changeCurrencySymbol(val, sym) {\n if (val) {\n return val.replace(IntlBase.defaultCurrency, sym);\n }\n return '';\n }\n IntlBase.changeCurrencySymbol = changeCurrencySymbol;\n /**\n * Returns currency symbol based on currency code ?\n *\n * @private\n * @param {Object} numericObject ?\n * @param {string} currencyCode ?\n * @param {string} altSymbol ?\n * @returns {string} ?\n */\n function getCurrencySymbol(numericObject, currencyCode, altSymbol) {\n var symbol = altSymbol ? ('.' + altSymbol) : '.symbol';\n var getCurrency = getValue('currencies.' + currencyCode + symbol, numericObject) ||\n getValue('currencies.' + currencyCode + '.symbol-alt-narrow', numericObject) || '$';\n return getCurrency;\n }\n IntlBase.getCurrencySymbol = getCurrencySymbol;\n /**\n * Returns formatting options for custom number format\n *\n * @private\n * @param {string} format ?\n * @param {CommonOptions} dOptions ?\n * @param {any} obj ?\n * @returns {any} ?\n */\n function customFormat(format, dOptions, obj) {\n var options = {};\n var formatSplit = format.split(';');\n var data = ['pData', 'nData', 'zeroData'];\n for (var i = 0; i < formatSplit.length; i++) {\n // eslint-disable-next-line\n options[data[i]] = customNumberFormat(formatSplit[i], dOptions, obj);\n }\n if (isNullOrUndefined(options.nData)) {\n options.nData = extend({}, options.pData);\n options.nData.nlead = isNullOrUndefined(dOptions) ? '-' + options.nData.nlead : dOptions.minusSymbol + options.nData.nlead;\n }\n return options;\n }\n IntlBase.customFormat = customFormat;\n /**\n * Returns custom formatting options\n *\n * @private\n * @param {string} format ?\n * @param {CommonOptions} dOptions ?\n * @param {Object} numObject ?\n * @returns {any} ?\n */\n function customNumberFormat(format, dOptions, numObject) {\n var cOptions = { type: 'decimal', minimumFractionDigits: 0, maximumFractionDigits: 0 };\n var pattern = format.match(IntlBase.customRegex);\n if (isNullOrUndefined(pattern) || (pattern[5] === '' && format !== 'N/A')) {\n cOptions.type = undefined;\n return cOptions;\n }\n cOptions.nlead = pattern[1];\n cOptions.nend = pattern[10];\n var integerPart = pattern[6];\n var spaceCapture = integerPart.match(/\\ $/g) ? true : false;\n var spaceGrouping = integerPart.replace(/\\ $/g, '').indexOf(' ') !== -1;\n cOptions.useGrouping = integerPart.indexOf(',') !== -1 || spaceGrouping;\n integerPart = integerPart.replace(/,/g, '');\n var fractionPart = pattern[7];\n if (integerPart.indexOf('0') !== -1) {\n cOptions.minimumIntegerDigits = integerPart.length - integerPart.indexOf('0');\n }\n if (!isNullOrUndefined(fractionPart)) {\n cOptions.minimumFractionDigits = fractionPart.lastIndexOf('0');\n cOptions.maximumFractionDigits = fractionPart.lastIndexOf('#');\n if (cOptions.minimumFractionDigits === -1) {\n cOptions.minimumFractionDigits = 0;\n }\n if (cOptions.maximumFractionDigits === -1 || cOptions.maximumFractionDigits < cOptions.minimumFractionDigits) {\n cOptions.maximumFractionDigits = cOptions.minimumFractionDigits;\n }\n }\n if (!isNullOrUndefined(dOptions)) {\n extend(cOptions, isCurrencyPercent([cOptions.nlead, cOptions.nend], '$', dOptions.currencySymbol));\n if (!cOptions.isCurrency) {\n extend(cOptions, isCurrencyPercent([cOptions.nlead, cOptions.nend], '%', dOptions.percentSymbol));\n }\n }\n else {\n extend(cOptions, isCurrencyPercent([cOptions.nlead, cOptions.nend], '%', '%'));\n }\n if (!isNullOrUndefined(numObject)) {\n var symbolPattern = getSymbolPattern(cOptions.type, dOptions.numberMapper.numberSystem, numObject, false);\n if (cOptions.useGrouping) {\n // eslint-disable-next-line\n cOptions.groupSeparator = spaceGrouping ? ' ' : dOptions.numberMapper.numberSymbols[mapper[2]];\n cOptions.groupData = NumberFormat.getGroupingDetails(symbolPattern.split(';')[0]);\n }\n cOptions.nlead = cOptions.nlead.replace(/'/g, '');\n cOptions.nend = spaceCapture ? ' ' + cOptions.nend.replace(/'/g, '') : cOptions.nend.replace(/'/g, '');\n }\n return cOptions;\n }\n IntlBase.customNumberFormat = customNumberFormat;\n /**\n * Returns formatting options for currency or percent type\n *\n * @private\n * @param {string[]} parts ?\n * @param {string} actual ?\n * @param {string} symbol ?\n * @returns {any} ?\n */\n function isCurrencyPercent(parts, actual, symbol) {\n var options = { nlead: parts[0], nend: parts[1] };\n for (var i = 0; i < 2; i++) {\n var part = parts[parseInt(i.toString(), 10)];\n var loc = part.indexOf(actual);\n if ((loc !== -1) && ((loc < part.indexOf('\\'')) || (loc > part.lastIndexOf('\\'')))) {\n // eslint-disable-next-line\n options[typeMapper[i]] = part.substr(0, loc) + symbol + part.substr(loc + 1);\n // eslint-disable-next-line\n options[typeMapper[actual]] = true;\n options.type = options.isCurrency ? 'currency' : 'percent';\n break;\n }\n }\n return options;\n }\n IntlBase.isCurrencyPercent = isCurrencyPercent;\n /**\n * Returns culture based date separator\n *\n * @private\n * @param {Object} dateObj ?\n * @returns {string} ?\n */\n function getDateSeparator(dateObj) {\n var value = (getValue('dateFormats.short', dateObj) || '').match(/[dM]([^dM])[dM]/i);\n return value ? value[1] : '/';\n }\n IntlBase.getDateSeparator = getDateSeparator;\n /**\n * Returns Native Date Time pattern\n *\n * @private\n * @param {string} culture ?\n * @param {DateFormatOptions} options ?\n * @param {Object} cldr ?\n * @param {boolean} isExcelFormat ?\n * @returns {string} ?\n */\n function getActualDateTimeFormat(culture, options, cldr, isExcelFormat) {\n var dependable = getDependables(cldr, culture, options.calendar);\n if (isBlazor()) {\n options = compareBlazorDateFormats(options, culture);\n }\n var actualPattern = options.format || getResultantPattern(options.skeleton, dependable.dateObject, options.type);\n if (isExcelFormat) {\n actualPattern = actualPattern.replace(patternRegex, function (pattern) {\n // eslint-disable-next-line\n return patternMatch[pattern];\n });\n if (actualPattern.indexOf('z') !== -1) {\n var tLength = actualPattern.match(/z/g).length;\n var timeZonePattern = void 0;\n var options_1 = { 'timeZone': {} };\n options_1.numMapper = parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr));\n options_1.timeZone = getValue('dates.timeZoneNames', dependable.parserObject);\n var value = new Date();\n var timezone = value.getTimezoneOffset();\n var pattern = (tLength < 4) ? '+H;-H' : options_1.timeZone.hourFormat;\n pattern = pattern.replace(/:/g, options_1.numMapper.timeSeparator);\n if (timezone === 0) {\n timeZonePattern = options_1.timeZone.gmtZeroFormat;\n }\n else {\n timeZonePattern = DateFormat.getTimeZoneValue(timezone, pattern);\n timeZonePattern = options_1.timeZone.gmtFormat.replace(/\\{0\\}/, timeZonePattern);\n }\n actualPattern = actualPattern.replace(/[z]+/, '\"' + timeZonePattern + '\"');\n }\n actualPattern = actualPattern.replace(/ $/, '');\n }\n return actualPattern;\n }\n IntlBase.getActualDateTimeFormat = getActualDateTimeFormat;\n /**\n *\n * @param {string} actual ?\n * @param {any} option ?\n * @returns {any} ?\n */\n // eslint-disable-next-line\n function processSymbol(actual, option) {\n if (actual.indexOf(',') !== -1) {\n // eslint-disable-next-line\n var split = actual.split(',');\n actual = (split[0] + getValue('numberMapper.numberSymbols.group', option) +\n split[1].replace('.', getValue('numberMapper.numberSymbols.decimal', option)));\n }\n else {\n actual = actual.replace('.', getValue('numberMapper.numberSymbols.decimal', option));\n }\n return actual;\n }\n /**\n * Returns Native Number pattern\n *\n * @private\n * @param {string} culture ?\n * @param {NumberFormatOptions} options ?\n * @param {Object} cldr ?\n * @param {boolean} isExcel ?\n * @returns {string} ?\n */\n function getActualNumberFormat(culture, options, cldr, isExcel) {\n var dependable = getDependables(cldr, culture, '', true);\n var parseOptions = { custom: true };\n var numrericObject = dependable.numericObject;\n var minFrac;\n var curObj = {};\n var curMatch = (options.format || '').match(IntlBase.currencyFormatRegex);\n var type = IntlBase.formatRegex.test(options.format) ? getProperNumericSkeleton(options.format || 'N') : {};\n var dOptions = {};\n if (curMatch) {\n dOptions.numberMapper = isBlazor() ?\n extend({}, dependable.numericObject) :\n parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr), true);\n var curCode = isBlazor() ? getValue('currencySymbol', dependable.numericObject) :\n getCurrencySymbol(dependable.numericObject, options.currency || defaultCurrencyCode, options.altSymbol);\n var symbolPattern = getSymbolPattern('currency', dOptions.numberMapper.numberSystem, dependable.numericObject, (/a/i).test(options.format));\n symbolPattern = symbolPattern.replace(/\\u00A4/g, curCode);\n var split = symbolPattern.split(';');\n curObj.hasNegativePattern = isBlazor() ? true : (split.length > 1);\n curObj.nData = isBlazor() ? getValue(type.type + 'nData', numrericObject) :\n getFormatData(split[1] || '-' + split[0], true, curCode);\n curObj.pData = isBlazor() ? getValue(type.type + 'pData', numrericObject) :\n getFormatData(split[0], false, curCode);\n if (!curMatch[2] && !options.minimumFractionDigits && !options.maximumFractionDigits) {\n minFrac = getFormatData(symbolPattern.split(';')[0], true, '', true).minimumFraction;\n }\n }\n var actualPattern;\n if ((IntlBase.formatRegex.test(options.format)) || !(options.format)) {\n extend(parseOptions, getProperNumericSkeleton(options.format || 'N'));\n parseOptions.custom = false;\n actualPattern = '###0';\n if (parseOptions.fractionDigits || options.minimumFractionDigits || options.maximumFractionDigits || minFrac) {\n var defaultMinimum = 0;\n if (parseOptions.fractionDigits) {\n options.minimumFractionDigits = options.maximumFractionDigits = parseOptions.fractionDigits;\n }\n actualPattern = fractionDigitsPattern(actualPattern, minFrac || parseOptions.fractionDigits ||\n options.minimumFractionDigits || defaultMinimum, options.maximumFractionDigits || defaultMinimum);\n }\n if (options.minimumIntegerDigits) {\n actualPattern = minimumIntegerPattern(actualPattern, options.minimumIntegerDigits);\n }\n if (options.useGrouping) {\n actualPattern = groupingPattern(actualPattern);\n }\n if (parseOptions.type === 'currency' || (parseOptions.type && isBlazor())) {\n if (isBlazor() && parseOptions.type !== 'currency') {\n curObj.pData = getValue(parseOptions.type + 'pData', numrericObject);\n curObj.nData = getValue(parseOptions.type + 'nData', numrericObject);\n }\n var cPattern = actualPattern;\n actualPattern = curObj.pData.nlead + cPattern + curObj.pData.nend;\n if (curObj.hasNegativePattern || isBlazor()) {\n actualPattern += ';' + curObj.nData.nlead + cPattern + curObj.nData.nend;\n }\n }\n if (parseOptions.type === 'percent' && !isBlazor()) {\n actualPattern += ' %';\n }\n }\n else {\n actualPattern = options.format.replace(/'/g, '\"');\n }\n if (Object.keys(dOptions).length > 0) {\n actualPattern = !isExcel ? processSymbol(actualPattern, dOptions) : actualPattern;\n }\n return actualPattern;\n }\n IntlBase.getActualNumberFormat = getActualNumberFormat;\n /**\n *\n * @param {string} pattern ?\n * @param {number} minDigits ?\n * @param {number} maxDigits ?\n * @returns {string} ?\n */\n function fractionDigitsPattern(pattern, minDigits, maxDigits) {\n pattern += '.';\n for (var a = 0; a < minDigits; a++) {\n pattern += '0';\n }\n if (minDigits < maxDigits) {\n var diff = maxDigits - minDigits;\n for (var b = 0; b < diff; b++) {\n pattern += '#';\n }\n }\n return pattern;\n }\n IntlBase.fractionDigitsPattern = fractionDigitsPattern;\n /**\n *\n * @param {string} pattern ?\n * @param {number} digits ?\n * @returns {string} ?\n */\n function minimumIntegerPattern(pattern, digits) {\n var temp = pattern.split('.');\n var integer = '';\n for (var x = 0; x < digits; x++) {\n integer += '0';\n }\n return temp[1] ? (integer + '.' + temp[1]) : integer;\n }\n IntlBase.minimumIntegerPattern = minimumIntegerPattern;\n /**\n *\n * @param {string} pattern ?\n * @returns {string} ?\n */\n function groupingPattern(pattern) {\n var temp = pattern.split('.');\n var integer = temp[0];\n var no = 3 - integer.length % 3;\n var hash = (no && no === 1) ? '#' : (no === 2 ? '##' : '');\n integer = hash + integer;\n pattern = '';\n for (var x = integer.length - 1; x > 0; x = x - 3) {\n pattern = ',' + integer[x - 2] + integer[x - 1] + integer[parseInt(x.toString(), 10)] + pattern;\n }\n pattern = pattern.slice(1);\n return temp[1] ? (pattern + '.' + temp[1]) : pattern;\n }\n IntlBase.groupingPattern = groupingPattern;\n /**\n *\n * @param {string} culture ?\n * @param {Object} cldr ?\n * @returns {number} ?\n */\n function getWeekData(culture, cldr) {\n var firstDay = defaultFirstDay;\n var mapper = getValue('supplemental.weekData.firstDay', cldr);\n var iCulture = culture;\n if ((/en-/).test(iCulture)) {\n iCulture = iCulture.slice(3);\n }\n iCulture = iCulture.slice(0, 2).toUpperCase() + iCulture.substr(2);\n if (mapper) {\n firstDay = mapper[\"\" + iCulture] || mapper[iCulture.slice(0, 2)] || defaultFirstDay;\n }\n return firstDayMapper[\"\" + firstDay];\n }\n IntlBase.getWeekData = getWeekData;\n /**\n * @private\n * @param {any} pData ?\n * @param {string} aCurrency ?\n * @param {string} rCurrency ?\n * @returns {void} ?\n */\n function replaceBlazorCurrency(pData, aCurrency, rCurrency) {\n var iCurrency = getBlazorCurrencySymbol(rCurrency);\n if (aCurrency !== iCurrency) {\n for (var _i = 0, pData_1 = pData; _i < pData_1.length; _i++) {\n var data = pData_1[_i];\n data.nend = data.nend.replace(aCurrency, iCurrency);\n data.nlead = data.nlead.replace(aCurrency, iCurrency);\n }\n }\n }\n IntlBase.replaceBlazorCurrency = replaceBlazorCurrency;\n /**\n * @private\n * @param {Date} date ?\n * @returns {number} ?\n */\n function getWeekOfYear(date) {\n var newYear = new Date(date.getFullYear(), 0, 1);\n var day = newYear.getDay();\n var weeknum;\n day = (day >= 0 ? day : day + 7);\n var daynum = Math.floor((date.getTime() - newYear.getTime() -\n (date.getTimezoneOffset() - newYear.getTimezoneOffset()) * 60000) / 86400000) + 1;\n if (day < 4) {\n weeknum = Math.floor((daynum + day - 1) / 7) + 1;\n if (weeknum > 52) {\n var nYear = new Date(date.getFullYear() + 1, 0, 1);\n var nday = nYear.getDay();\n nday = nday >= 0 ? nday : nday + 7;\n weeknum = nday < 4 ? 1 : 53;\n }\n }\n else {\n weeknum = Math.floor((daynum + day - 1) / 7);\n }\n return weeknum;\n }\n IntlBase.getWeekOfYear = getWeekOfYear;\n})(IntlBase || (IntlBase = {}));\n","import { isNullOrUndefined, merge } from './util';\nvar headerRegex = /^(.*?):[ \\t]*([^\\r\\n]*)$/gm;\nvar defaultType = 'GET';\n/**\n * Ajax class provides ability to make asynchronous HTTP request to the server\n * ```typescript\n * var ajax = new Ajax(\"index.html\", \"GET\", true);\n * ajax.send().then(\n * function (value) {\n * console.log(value);\n * },\n * function (reason) {\n * console.log(reason);\n * });\n * ```\n */\nvar Ajax = /** @class */ (function () {\n /**\n * Constructor for Ajax class\n *\n * @param {string|Object} options ?\n * @param {string} type ?\n * @param {boolean} async ?\n * @returns defaultType any\n */\n function Ajax(options, type, async, contentType) {\n /**\n * A boolean value indicating whether the request should be sent asynchronous or not.\n *\n * @default true\n */\n this.mode = true;\n /**\n * A boolean value indicating whether to ignore the promise reject.\n *\n * @private\n * @default true\n */\n this.emitError = true;\n this.options = {};\n if (typeof options === 'string') {\n this.url = options;\n this.type = type ? type.toUpperCase() : defaultType;\n this.mode = !isNullOrUndefined(async) ? async : true;\n }\n else if (typeof options === 'object') {\n this.options = options;\n merge(this, this.options);\n }\n this.type = this.type ? this.type.toUpperCase() : defaultType;\n this.contentType = (this.contentType !== undefined) ? this.contentType : contentType;\n }\n /**\n *\n * Send the request to server.\n *\n * @param {any} data - To send the user data\n * @return {Promise} ?\n */\n Ajax.prototype.send = function (data) {\n var _this = this;\n this.data = isNullOrUndefined(data) ? this.data : data;\n var eventArgs = {\n cancel: false,\n httpRequest: null\n };\n var promise = new Promise(function (resolve, reject) {\n _this.httpRequest = new XMLHttpRequest();\n _this.httpRequest.onreadystatechange = function () { _this.stateChange(resolve, reject); };\n if (!isNullOrUndefined(_this.onLoad)) {\n _this.httpRequest.onload = _this.onLoad;\n }\n if (!isNullOrUndefined(_this.onProgress)) {\n _this.httpRequest.onprogress = _this.onProgress;\n }\n /* istanbul ignore next */\n if (!isNullOrUndefined(_this.onAbort)) {\n _this.httpRequest.onabort = _this.onAbort;\n }\n /* istanbul ignore next */\n if (!isNullOrUndefined(_this.onError)) {\n _this.httpRequest.onerror = _this.onError;\n }\n //** Upload Events **/\n /* istanbul ignore next */\n if (!isNullOrUndefined(_this.onUploadProgress)) {\n _this.httpRequest.upload.onprogress = _this.onUploadProgress;\n }\n _this.httpRequest.open(_this.type, _this.url, _this.mode);\n // Set default headers\n if (!isNullOrUndefined(_this.data) && _this.contentType !== null) {\n _this.httpRequest.setRequestHeader('Content-Type', _this.contentType || 'application/json; charset=utf-8');\n }\n if (_this.beforeSend) {\n eventArgs.httpRequest = _this.httpRequest;\n _this.beforeSend(eventArgs);\n }\n if (!eventArgs.cancel) {\n _this.httpRequest.send(!isNullOrUndefined(_this.data) ? _this.data : null);\n }\n });\n return promise;\n };\n Ajax.prototype.successHandler = function (data) {\n if (this.onSuccess) {\n this.onSuccess(data, this);\n }\n return data;\n };\n Ajax.prototype.failureHandler = function (reason) {\n if (this.onFailure) {\n this.onFailure(this.httpRequest);\n }\n return reason;\n };\n Ajax.prototype.stateChange = function (resolve, reject) {\n var data = this.httpRequest.responseText;\n if (this.dataType && this.dataType.toLowerCase() === 'json') {\n if (data === '') {\n data = undefined;\n }\n else {\n try {\n data = JSON.parse(data);\n }\n catch (error) {\n // no exception handle\n }\n }\n }\n if (this.httpRequest.readyState === 4) {\n //success range should be 200 to 299\n if ((this.httpRequest.status >= 200 && this.httpRequest.status <= 299) || this.httpRequest.status === 304) {\n resolve(this.successHandler(data));\n }\n else {\n if (this.emitError) {\n reject(new Error(this.failureHandler(this.httpRequest.statusText)));\n }\n else {\n resolve();\n }\n }\n }\n };\n /**\n * To get the response header from XMLHttpRequest\n *\n * @param {string} key Key to search in the response header\n * @returns {string} ?\n */\n Ajax.prototype.getResponseHeader = function (key) {\n var responseHeaders;\n var header;\n // eslint-disable-next-line\n responseHeaders = {};\n var headers = headerRegex.exec(this.httpRequest.getAllResponseHeaders());\n while (headers) {\n responseHeaders[headers[1].toLowerCase()] = headers[2];\n headers = headerRegex.exec(this.httpRequest.getAllResponseHeaders());\n }\n // eslint-disable-next-line\n header = responseHeaders[key.toLowerCase()];\n return isNullOrUndefined(header) ? null : header;\n };\n return Ajax;\n}());\nexport { Ajax };\n","import { isUndefined } from './util';\nvar REGX_MOBILE = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile/i;\nvar REGX_IE = /msie|trident/i;\nvar REGX_IE11 = /Trident\\/7\\./;\nvar REGX_IOS = /(ipad|iphone|ipod touch)/i;\nvar REGX_IOS7 = /(ipad|iphone|ipod touch);.*os 7_\\d|(ipad|iphone|ipod touch);.*os 8_\\d/i;\nvar REGX_ANDROID = /android/i;\nvar REGX_WINDOWS = /trident|windows phone|edge/i;\nvar REGX_VERSION = /(version)[ /]([\\w.]+)/i;\nvar REGX_BROWSER = {\n OPERA: /(opera|opr)(?:.*version|)[ /]([\\w.]+)/i,\n EDGE: /(edge)(?:.*version|)[ /]([\\w.]+)/i,\n CHROME: /(chrome|crios)[ /]([\\w.]+)/i,\n PANTHOMEJS: /(phantomjs)[ /]([\\w.]+)/i,\n SAFARI: /(safari)[ /]([\\w.]+)/i,\n WEBKIT: /(webkit)[ /]([\\w.]+)/i,\n MSIE: /(msie|trident) ([\\w.]+)/i,\n MOZILLA: /(mozilla)(?:.*? rv:([\\w.]+)|)/i\n};\n/* istanbul ignore else */\nif (typeof window !== 'undefined') {\n window.browserDetails = window.browserDetails || {};\n}\n/**\n * Get configuration details for Browser\n *\n * @private\n */\nvar Browser = /** @class */ (function () {\n function Browser() {\n }\n Browser.extractBrowserDetail = function () {\n var browserInfo = { culture: {} };\n var keys = Object.keys(REGX_BROWSER);\n var clientInfo = [];\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n clientInfo = Browser.userAgent.match(REGX_BROWSER[\"\" + key]);\n if (clientInfo) {\n browserInfo.name = (clientInfo[1].toLowerCase() === 'opr' ? 'opera' : clientInfo[1].toLowerCase());\n browserInfo.name = (clientInfo[1].toLowerCase() === 'crios' ? 'chrome' : browserInfo.name);\n browserInfo.version = clientInfo[2];\n browserInfo.culture.name = browserInfo.culture.language = navigator.language;\n // eslint-disable-next-line\n if (!!Browser.userAgent.match(REGX_IE11)) {\n browserInfo.name = 'msie';\n break;\n }\n var version = Browser.userAgent.match(REGX_VERSION);\n if (browserInfo.name === 'safari' && version) {\n browserInfo.version = version[2];\n }\n break;\n }\n }\n return browserInfo;\n };\n /**\n * To get events from the browser\n *\n * @param {string} event - type of event triggered.\n * @returns {boolean}\n */\n Browser.getEvent = function (event) {\n // eslint-disable-next-line\n var events = {\n start: {\n isPointer: 'pointerdown', isTouch: 'touchstart', isDevice: 'mousedown'\n },\n move: {\n isPointer: 'pointermove', isTouch: 'touchmove', isDevice: 'mousemove'\n },\n end: {\n isPointer: 'pointerup', isTouch: 'touchend', isDevice: 'mouseup'\n },\n cancel: {\n isPointer: 'pointercancel', isTouch: 'touchcancel', isDevice: 'mouseleave'\n }\n };\n return (Browser.isPointer ? events[\"\" + event].isPointer :\n (Browser.isTouch ? events[\"\" + event].isTouch + (!Browser.isDevice ? ' ' + events[\"\" + event].isDevice : '')\n : events[\"\" + event].isDevice));\n };\n /**\n * To get the Touch start event from browser\n *\n * @returns {string}\n */\n Browser.getTouchStartEvent = function () {\n return Browser.getEvent('start');\n };\n /**\n * To get the Touch end event from browser\n *\n * @returns {string}\n */\n Browser.getTouchEndEvent = function () {\n return Browser.getEvent('end');\n };\n /**\n * To get the Touch move event from browser\n *\n * @returns {string}\n */\n Browser.getTouchMoveEvent = function () {\n return Browser.getEvent('move');\n };\n /**\n * To cancel the touch event from browser\n *\n * @returns {string}\n */\n Browser.getTouchCancelEvent = function () {\n return Browser.getEvent('cancel');\n };\n /**\n * To get the value based on provided key and regX\n *\n * @param {string} key ?\n * @param {RegExp} regX ?\n * @returns {Object} ?\n */\n Browser.getValue = function (key, regX) {\n var browserDetails = typeof window !== 'undefined' ? window.browserDetails : {};\n if (typeof navigator !== 'undefined' && navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 && Browser.isTouch === true) {\n browserDetails['isIos'] = true;\n browserDetails['isDevice'] = true;\n browserDetails['isTouch'] = true;\n browserDetails['isPointer'] = true;\n }\n if ('undefined' === typeof browserDetails[\"\" + key]) {\n return browserDetails[\"\" + key] = regX.test(Browser.userAgent);\n }\n return browserDetails[\"\" + key];\n };\n Object.defineProperty(Browser, \"userAgent\", {\n get: function () {\n return Browser.uA;\n },\n //Properties\n /**\n * Property specifies the userAgent of the browser. Default userAgent value is based on the browser.\n * Also we can set our own userAgent.\n *\n * @param {string} uA ?\n */\n set: function (uA) {\n Browser.uA = uA;\n window.browserDetails = {};\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"info\", {\n //Read Only Properties\n /**\n * Property is to get the browser information like Name, Version and Language\n *\n * @returns {BrowserInfo} ?\n */\n get: function () {\n if (isUndefined(window.browserDetails.info)) {\n return window.browserDetails.info = Browser.extractBrowserDetail();\n }\n return window.browserDetails.info;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isIE\", {\n /**\n * Property is to get whether the userAgent is based IE.\n *\n * @returns {boolean} ?\n */\n get: function () {\n return Browser.getValue('isIE', REGX_IE);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isTouch\", {\n /**\n * Property is to get whether the browser has touch support.\n *\n * @returns {boolean} ?\n */\n get: function () {\n if (isUndefined(window.browserDetails.isTouch)) {\n return (window.browserDetails.isTouch =\n ('ontouchstart' in window.navigator) ||\n (window &&\n window.navigator &&\n (window.navigator.maxTouchPoints > 0)) || ('ontouchstart' in window));\n }\n return window.browserDetails.isTouch;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isPointer\", {\n /**\n * Property is to get whether the browser has Pointer support.\n *\n * @returns {boolean} ?\n */\n get: function () {\n if (isUndefined(window.browserDetails.isPointer)) {\n return window.browserDetails.isPointer = ('pointerEnabled' in window.navigator);\n }\n return window.browserDetails.isPointer;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isMSPointer\", {\n /**\n * Property is to get whether the browser has MSPointer support.\n *\n * @returns {boolean} ?\n */\n get: function () {\n if (isUndefined(window.browserDetails.isMSPointer)) {\n return window.browserDetails.isMSPointer = ('msPointerEnabled' in window.navigator);\n }\n return window.browserDetails.isMSPointer;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isDevice\", {\n /**\n * Property is to get whether the userAgent is device based.\n *\n * @returns {boolean} ?\n */\n get: function () {\n return Browser.getValue('isDevice', REGX_MOBILE);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isIos\", {\n /**\n * Property is to get whether the userAgent is IOS.\n *\n * @returns {boolean} ?\n */\n get: function () {\n return Browser.getValue('isIos', REGX_IOS);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isIos7\", {\n /**\n * Property is to get whether the userAgent is Ios7.\n *\n * @returns {boolean} ?\n */\n get: function () {\n return Browser.getValue('isIos7', REGX_IOS7);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isAndroid\", {\n /**\n * Property is to get whether the userAgent is Android.\n *\n * @returns {boolean} ?\n */\n get: function () {\n return Browser.getValue('isAndroid', REGX_ANDROID);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isWebView\", {\n /**\n * Property is to identify whether application ran in web view.\n *\n * @returns {boolean} ?\n */\n get: function () {\n if (isUndefined(window.browserDetails.isWebView)) {\n window.browserDetails.isWebView = !(isUndefined(window.cordova) && isUndefined(window.PhoneGap)\n && isUndefined(window.phonegap) && window.forge !== 'object');\n return window.browserDetails.isWebView;\n }\n return window.browserDetails.isWebView;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isWindows\", {\n /**\n * Property is to get whether the userAgent is Windows.\n *\n * @returns {boolean} ?\n */\n get: function () {\n return Browser.getValue('isWindows', REGX_WINDOWS);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"touchStartEvent\", {\n /**\n * Property is to get the touch start event. It returns event name based on browser.\n *\n * @returns {string} ?\n */\n get: function () {\n if (isUndefined(window.browserDetails.touchStartEvent)) {\n return window.browserDetails.touchStartEvent = Browser.getTouchStartEvent();\n }\n return window.browserDetails.touchStartEvent;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"touchMoveEvent\", {\n /**\n * Property is to get the touch move event. It returns event name based on browser.\n *\n * @returns {string} ?\n */\n get: function () {\n if (isUndefined(window.browserDetails.touchMoveEvent)) {\n return window.browserDetails.touchMoveEvent = Browser.getTouchMoveEvent();\n }\n return window.browserDetails.touchMoveEvent;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"touchEndEvent\", {\n /**\n * Property is to get the touch end event. It returns event name based on browser.\n *\n * @returns {string} ?\n */\n get: function () {\n if (isUndefined(window.browserDetails.touchEndEvent)) {\n return window.browserDetails.touchEndEvent = Browser.getTouchEndEvent();\n }\n return window.browserDetails.touchEndEvent;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"touchCancelEvent\", {\n /**\n * Property is to cancel the touch end event.\n *\n * @returns {string} ?\n */\n get: function () {\n if (isUndefined(window.browserDetails.touchCancelEvent)) {\n return window.browserDetails.touchCancelEvent = Browser.getTouchCancelEvent();\n }\n return window.browserDetails.touchCancelEvent;\n },\n enumerable: true,\n configurable: true\n });\n /* istanbul ignore next */\n Browser.uA = typeof navigator !== 'undefined' ? navigator.userAgent : '';\n return Browser;\n}());\nexport { Browser };\n","import { debounce, extend } from './util';\nimport { Browser } from './browser';\n/**\n * EventHandler class provides option to add, remove, clear and trigger events to a HTML DOM element\n * ```html\n *
\n * \n * ```\n */\nvar EventHandler = /** @class */ (function () {\n function EventHandler() {\n }\n // to get the event data based on element\n EventHandler.addOrGetEventData = function (element) {\n if ('__eventList' in element) {\n return element.__eventList.events;\n }\n else {\n element.__eventList = {};\n return element.__eventList.events = [];\n }\n };\n /**\n * Add an event to the specified DOM element.\n *\n * @param {any} element - Target HTML DOM element\n * @param {string} eventName - A string that specifies the name of the event\n * @param {Function} listener - Specifies the function to run when the event occurs\n * @param {Object} bindTo - A object that binds 'this' variable in the event handler\n * @param {number} intDebounce - Specifies at what interval given event listener should be triggered.\n * @returns {Function} ?\n */\n EventHandler.add = function (element, eventName, listener, bindTo, intDebounce) {\n var eventData = EventHandler.addOrGetEventData(element);\n var debounceListener;\n if (intDebounce) {\n debounceListener = debounce(listener, intDebounce);\n }\n else {\n debounceListener = listener;\n }\n if (bindTo) {\n debounceListener = debounceListener.bind(bindTo);\n }\n var event = eventName.split(' ');\n for (var i = 0; i < event.length; i++) {\n eventData.push({\n name: event[parseInt(i.toString(), 10)],\n listener: listener,\n debounce: debounceListener\n });\n if (Browser.isIE) {\n element.addEventListener(event[parseInt(i.toString(), 10)], debounceListener);\n }\n else {\n element.addEventListener(event[parseInt(i.toString(), 10)], debounceListener, { passive: false });\n }\n }\n return debounceListener;\n };\n /**\n * Remove an event listener that has been attached before.\n *\n * @param {any} element - Specifies the target html element to remove the event\n * @param {string} eventName - A string that specifies the name of the event to remove\n * @param {Function} listener - Specifies the function to remove\n * @returns {void} ?\n */\n EventHandler.remove = function (element, eventName, listener) {\n var eventData = EventHandler.addOrGetEventData(element);\n var event = eventName.split(' ');\n var _loop_1 = function (j) {\n var index = -1;\n var debounceListener;\n if (eventData && eventData.length !== 0) {\n eventData.some(function (x, i) {\n return x.name === event[parseInt(j.toString(), 10)] && x.listener === listener ?\n (index = i, debounceListener = x.debounce, true) : false;\n });\n }\n if (index !== -1) {\n eventData.splice(index, 1);\n }\n if (debounceListener) {\n element.removeEventListener(event[parseInt(j.toString(), 10)], debounceListener);\n }\n };\n for (var j = 0; j < event.length; j++) {\n _loop_1(j);\n }\n };\n /**\n * Clear all the event listeners that has been previously attached to the element.\n *\n * @param {any} element - Specifies the target html element to clear the events\n * @returns {void} ?\n */\n EventHandler.clearEvents = function (element) {\n var eventData;\n var copyData;\n // eslint-disable-next-line\n eventData = EventHandler.addOrGetEventData(element);\n // eslint-disable-next-line\n copyData = extend([], copyData, eventData);\n for (var i = 0; i < copyData.length; i++) {\n element.removeEventListener(copyData[parseInt(i.toString(), 10)].name, copyData[parseInt(i.toString(), 10)].debounce);\n eventData.shift();\n }\n };\n /**\n * Trigger particular event of the element.\n *\n * @param {any} element - Specifies the target html element to trigger the events\n * @param {string} eventName - Specifies the event to trigger for the specified element.\n * Can be a custom event, or any of the standard events.\n * @param {any} eventProp - Additional parameters to pass on to the event properties\n * @returns {void} ?\n */\n EventHandler.trigger = function (element, eventName, eventProp) {\n var eventData = EventHandler.addOrGetEventData(element);\n for (var _i = 0, eventData_1 = eventData; _i < eventData_1.length; _i++) {\n var event_1 = eventData_1[_i];\n if (event_1.name === eventName) {\n event_1.debounce.call(this, eventProp);\n }\n }\n };\n return EventHandler;\n}());\nexport { EventHandler };\n","/**\n * Functions related to dom operations.\n */\nimport { EventHandler } from './event-handler';\nimport { isNullOrUndefined, getValue, setValue, isObject, extend } from './util';\nvar SVG_REG = /^svg|^path|^g/;\n/**\n * Function to create Html element.\n *\n * @param {string} tagName - Name of the tag, id and class names.\n * @param {ElementProperties} properties - Object to set properties in the element.\n * @param {ElementProperties} properties.id - To set the id to the created element.\n * @param {ElementProperties} properties.className - To add classes to the element.\n * @param {ElementProperties} properties.innerHTML - To set the innerHTML to element.\n * @param {ElementProperties} properties.styles - To set the some custom styles to element.\n * @param {ElementProperties} properties.attrs - To set the attributes to element.\n * @returns {any} ?\n * @private\n */\nexport function createElement(tagName, properties) {\n var element = (SVG_REG.test(tagName) ? document.createElementNS('http://www.w3.org/2000/svg', tagName) : document.createElement(tagName));\n if (typeof (properties) === 'undefined') {\n return element;\n }\n element.innerHTML = (properties.innerHTML ? properties.innerHTML : '');\n if (properties.className !== undefined) {\n element.className = properties.className;\n }\n if (properties.id !== undefined) {\n element.id = properties.id;\n }\n if (properties.styles !== undefined) {\n element.setAttribute('style', properties.styles);\n }\n if (properties.attrs !== undefined) {\n attributes(element, properties.attrs);\n }\n return element;\n}\n/**\n * The function used to add the classes to array of elements\n *\n * @param {Element[]|NodeList} elements - An array of elements that need to add a list of classes\n * @param {string|string[]} classes - String or array of string that need to add an individual element as a class\n * @returns {any} .\n * @private\n */\nexport function addClass(elements, classes) {\n var classList = getClassList(classes);\n for (var _i = 0, _a = elements; _i < _a.length; _i++) {\n var ele = _a[_i];\n for (var _b = 0, classList_1 = classList; _b < classList_1.length; _b++) {\n var className = classList_1[_b];\n if (isObject(ele)) {\n var curClass = getValue('attributes.className', ele);\n if (isNullOrUndefined(curClass)) {\n setValue('attributes.className', className, ele);\n }\n else if (!new RegExp('\\\\b' + className + '\\\\b', 'i').test(curClass)) {\n setValue('attributes.className', curClass + ' ' + className, ele);\n }\n }\n else {\n if (!ele.classList.contains(className)) {\n ele.classList.add(className);\n }\n }\n }\n }\n return elements;\n}\n/**\n * The function used to add the classes to array of elements\n *\n * @param {Element[]|NodeList} elements - An array of elements that need to remove a list of classes\n * @param {string|string[]} classes - String or array of string that need to add an individual element as a class\n * @returns {any} .\n * @private\n */\nexport function removeClass(elements, classes) {\n var classList = getClassList(classes);\n for (var _i = 0, _a = elements; _i < _a.length; _i++) {\n var ele = _a[_i];\n var flag = isObject(ele);\n var canRemove = flag ? getValue('attributes.className', ele) : ele.className !== '';\n if (canRemove) {\n for (var _b = 0, classList_2 = classList; _b < classList_2.length; _b++) {\n var className = classList_2[_b];\n if (flag) {\n var classes_1 = getValue('attributes.className', ele);\n var classArr = classes_1.split(' ');\n var index = classArr.indexOf(className);\n if (index !== -1) {\n classArr.splice(index, 1);\n }\n setValue('attributes.className', classArr.join(' '), ele);\n }\n else {\n ele.classList.remove(className);\n }\n }\n }\n }\n return elements;\n}\n/**\n * The function used to get classlist.\n *\n * @param {string | string[]} classes - An element the need to check visibility\n * @returns {string[]} ?\n * @private\n */\nfunction getClassList(classes) {\n var classList = [];\n if (typeof classes === 'string') {\n classList.push(classes);\n }\n else {\n classList = classes;\n }\n return classList;\n}\n/**\n * The function used to check element is visible or not.\n *\n * @param {Element|Node} element - An element the need to check visibility\n * @returns {boolean} ?\n * @private\n */\nexport function isVisible(element) {\n var ele = element;\n return (ele.style.visibility === '' && ele.offsetWidth > 0);\n}\n/**\n * The function used to insert an array of elements into a first of the element.\n *\n * @param {Element[]|NodeList} fromElements - An array of elements that need to prepend.\n * @param {Element} toElement - An element that is going to prepend.\n * @param {boolean} isEval - ?\n * @returns {Element[] | NodeList} ?\n * @private\n */\nexport function prepend(fromElements, toElement, isEval) {\n var docFrag = document.createDocumentFragment();\n for (var _i = 0, _a = fromElements; _i < _a.length; _i++) {\n var ele = _a[_i];\n docFrag.appendChild(ele);\n }\n toElement.insertBefore(docFrag, toElement.firstElementChild);\n if (isEval) {\n executeScript(toElement);\n }\n return fromElements;\n}\n/**\n * The function used to insert an array of elements into last of the element.\n *\n * @param {Element[]|NodeList} fromElements - An array of elements that need to append.\n * @param {Element} toElement - An element that is going to prepend.\n * @param {boolean} isEval - ?\n * @returns {Element[] | NodeList} ?\n * @private\n */\nexport function append(fromElements, toElement, isEval) {\n var docFrag = document.createDocumentFragment();\n for (var _i = 0, _a = fromElements; _i < _a.length; _i++) {\n var ele = _a[_i];\n docFrag.appendChild(ele);\n }\n toElement.appendChild(docFrag);\n if (isEval) {\n executeScript(toElement);\n }\n return fromElements;\n}\n/**\n * The function is used to evaluate script from Ajax request\n *\n * @param {Element} ele - An element is going to evaluate the script\n * @returns {void} ?\n */\nfunction executeScript(ele) {\n var eleArray = ele.querySelectorAll('script');\n eleArray.forEach(function (element) {\n var script = document.createElement('script');\n script.text = element.innerHTML;\n document.head.appendChild(script);\n detach(script);\n });\n}\n/**\n * The function used to remove the element from parentnode\n *\n * @param {Element|Node|HTMLElement} element - An element that is going to detach from the Dom\n * @returns {any} ?\n * @private\n */\n// eslint-disable-next-line\nexport function detach(element) {\n var parentNode = element.parentNode;\n if (parentNode) {\n return parentNode.removeChild(element);\n }\n}\n/**\n * The function used to remove the element from Dom also clear the bounded events\n *\n * @param {Element|Node|HTMLElement} element - An element remove from the Dom\n * @returns {void} ?\n * @private\n */\nexport function remove(element) {\n var parentNode = element.parentNode;\n EventHandler.clearEvents(element);\n parentNode.removeChild(element);\n}\n/**\n * The function helps to set multiple attributes to an element\n *\n * @param {Element|Node} element - An element that need to set attributes.\n * @param {string} attributes - JSON Object that is going to as attributes.\n * @returns {Element} ?\n * @private\n */\n// eslint-disable-next-line\nexport function attributes(element, attributes) {\n var keys = Object.keys(attributes);\n var ele = element;\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n if (isObject(ele)) {\n var iKey = key;\n if (key === 'tabindex') {\n iKey = 'tabIndex';\n }\n ele.attributes[\"\" + iKey] = attributes[\"\" + key];\n }\n else {\n ele.setAttribute(key, attributes[\"\" + key]);\n }\n }\n return ele;\n}\n/**\n * The function selects the element from giving context.\n *\n * @param {string} selector - Selector string need fetch element\n * @param {Document|Element} context - It is an optional type, That specifies a Dom context.\n * @param {boolean} needsVDOM ?\n * @returns {any} ?\n * @private\n */\n// eslint-disable-next-line\nexport function select(selector, context, needsVDOM) {\n if (context === void 0) { context = document; }\n selector = querySelectId(selector);\n return context.querySelector(selector);\n}\n/**\n * The function selects an array of element from the given context.\n *\n * @param {string} selector - Selector string need fetch element\n * @param {Document|Element} context - It is an optional type, That specifies a Dom context.\n * @param {boolean} needsVDOM ?\n * @returns {HTMLElement[]} ?\n * @private\n */\n// eslint-disable-next-line\nexport function selectAll(selector, context, needsVDOM) {\n if (context === void 0) { context = document; }\n selector = querySelectId(selector);\n var nodeList = context.querySelectorAll(selector);\n return nodeList;\n}\n/**\n * The function selects an id of element from the given context.\n *\n * @param {string} selector - Selector string need fetch element\n * @returns {string} ?\n * @private\n */\nfunction querySelectId(selector) {\n var charRegex = /(!|\"|\\$|%|&|'|\\(|\\)|\\*|\\/|:|;|<|=|\\?|@|\\]|\\^|`|{|}|\\||\\+|~)/g;\n if (selector.match(/#[0-9]/g) || selector.match(charRegex)) {\n var idList = selector.split(',');\n for (var i = 0; i < idList.length; i++) {\n var list = idList[parseInt(i.toString(), 10)].split(' ');\n for (var j = 0; j < list.length; j++) {\n if (list[parseInt(j.toString(), 10)].indexOf('#') > -1) {\n if (!list[parseInt(j.toString(), 10)].match(/\\[.*\\]/)) {\n var splitId = list[parseInt(j.toString(), 10)].split('#');\n if (splitId[1].match(/^\\d/) || splitId[1].match(charRegex)) {\n var setId = list[parseInt(j.toString(), 10)].split('.');\n setId[0] = setId[0].replace(/#/, '[id=\\'') + '\\']';\n list[parseInt(j.toString(), 10)] = setId.join('.');\n }\n }\n }\n }\n idList[parseInt(i.toString(), 10)] = list.join(' ');\n }\n return idList.join(',');\n }\n return selector;\n}\n/**\n * Returns single closest parent element based on class selector.\n *\n * @param {Element} element - An element that need to find the closest element.\n * @param {string} selector - A classSelector of closest element.\n * @returns {Element} ?\n * @private\n */\nexport function closest(element, selector) {\n var el = element;\n if (typeof el.closest === 'function') {\n return el.closest(selector);\n }\n while (el && el.nodeType === 1) {\n if (matches(el, selector)) {\n return el;\n }\n el = el.parentNode;\n }\n return null;\n}\n/**\n * Returns all sibling elements of the given element.\n *\n * @param {Element|Node} element - An element that need to get siblings.\n * @returns {Element[]} ?\n * @private\n */\nexport function siblings(element) {\n var siblings = [];\n var childNodes = Array.prototype.slice.call(element.parentNode.childNodes);\n for (var _i = 0, childNodes_1 = childNodes; _i < childNodes_1.length; _i++) {\n var curNode = childNodes_1[_i];\n if (curNode.nodeType === Node.ELEMENT_NODE && element !== curNode) {\n siblings.push(curNode);\n }\n }\n return siblings;\n}\n/**\n * set the value if not exist. Otherwise set the existing value\n *\n * @param {HTMLElement} element - An element to which we need to set value.\n * @param {string} property - Property need to get or set.\n * @param {string} value - value need to set.\n * @returns {string} ?\n * @private\n */\nexport function getAttributeOrDefault(element, property, value) {\n var attrVal;\n var isObj = isObject(element);\n if (isObj) {\n attrVal = getValue('attributes.' + property, element);\n }\n else {\n attrVal = element.getAttribute(property);\n }\n if (isNullOrUndefined(attrVal) && value) {\n if (!isObj) {\n element.setAttribute(property, value.toString());\n }\n else {\n element.attributes[\"\" + property] = value;\n }\n attrVal = value;\n }\n return attrVal;\n}\n/**\n * Set the style attributes to Html element.\n *\n * @param {HTMLElement} element - Element which we want to set attributes\n * @param {any} attrs - Set the given attributes to element\n * @returns {void} ?\n * @private\n */\nexport function setStyleAttribute(element, attrs) {\n if (attrs !== undefined) {\n Object.keys(attrs).forEach(function (key) {\n // eslint-disable-next-line\n element.style[key] = attrs[key];\n });\n }\n}\n/**\n * Method for add and remove classes to a dom element.\n *\n * @param {Element} element - Element for add and remove classes\n * @param {string[]} addClasses - List of classes need to be add to the element\n * @param {string[]} removeClasses - List of classes need to be remove from the element\n * @returns {void} ?\n * @private\n */\nexport function classList(element, addClasses, removeClasses) {\n addClass([element], addClasses);\n removeClass([element], removeClasses);\n}\n/**\n * Method to check whether the element matches the given selector.\n *\n * @param {Element} element - Element to compare with the selector.\n * @param {string} selector - String selector which element will satisfy.\n * @returns {void} ?\n * @private\n */\nexport function matches(element, selector) {\n // eslint-disable-next-line\n var matches = element.matches || element.msMatchesSelector || element.webkitMatchesSelector;\n if (matches) {\n return matches.call(element, selector);\n }\n else {\n return [].indexOf.call(document.querySelectorAll(selector), element) !== -1;\n }\n}\n/**\n * Method to get the html text from DOM.\n *\n * @param {HTMLElement} ele - Element to compare with the selector.\n * @param {string} innerHTML - String selector which element will satisfy.\n * @returns {void} ?\n * @private\n */\nexport function includeInnerHTML(ele, innerHTML) {\n ele.innerHTML = innerHTML;\n}\n/**\n * Method to get the containsclass.\n *\n * @param {HTMLElement} ele - Element to compare with the selector.\n * @param {string} className - String selector which element will satisfy.\n * @returns {any} ?\n * @private\n */\n// eslint-disable-next-line\nexport function containsClass(ele, className) {\n if (isObject(ele)) {\n // eslint-disable-next-line\n return new RegExp('\\\\b' + className + '\\\\b', 'i').test(ele.attributes.className);\n }\n else {\n return ele.classList.contains(className);\n }\n}\n/**\n * Method to check whether the element matches the given selector.\n *\n * @param {Object} element - Element to compare with the selector.\n * @param {boolean} deep ?\n * @returns {any} ?\n * @private\n */\n// eslint-disable-next-line\nexport function cloneNode(element, deep) {\n if (isObject(element)) {\n if (deep) {\n return extend({}, {}, element, true);\n }\n }\n else {\n return element.cloneNode(deep);\n }\n}\n","import { isUndefined, isNullOrUndefined, merge, setImmediate, setValue, isBlazor, getValue, extend } from './util';\nimport { addClass, removeClass } from './dom';\nimport { Observer } from './observer';\nvar isColEName = new RegExp(']');\n/* tslint:enable:no-any */\n/**\n * Base library module is common module for Framework modules like touch,keyboard and etc.,\n *\n * @private\n */\nvar Base = /** @class */ (function () {\n /**\n * Base constructor accept options and element\n *\n * @param {Object} options ?\n * @param {string} element ?\n */\n function Base(options, element) {\n this.isRendered = false;\n this.isComplexArraySetter = false;\n this.isServerRendered = false;\n this.allowServerDataBinding = true;\n this.isProtectedOnChange = true;\n this.properties = {};\n this.changedProperties = {};\n this.oldProperties = {};\n this.bulkChanges = {};\n this.refreshing = false;\n this.ignoreCollectionWatch = false;\n // eslint-disable-next-line\n this.finalUpdate = function () { };\n this.childChangedProperties = {};\n this.modelObserver = new Observer(this);\n if (!isUndefined(element)) {\n if ('string' === typeof (element)) {\n this.element = document.querySelector(element);\n }\n else {\n this.element = element;\n }\n if (!isNullOrUndefined(this.element)) {\n this.isProtectedOnChange = false;\n this.addInstance();\n }\n }\n if (!isUndefined(options)) {\n this.setProperties(options, true);\n }\n this.isDestroyed = false;\n }\n /** Property base section */\n /**\n * Function used to set bunch of property at a time.\n *\n * @private\n * @param {Object} prop - JSON object which holds components properties.\n * @param {boolean} muteOnChange ? - Specifies to true when we set properties.\n * @returns {void} ?\n */\n Base.prototype.setProperties = function (prop, muteOnChange) {\n var prevDetection = this.isProtectedOnChange;\n this.isProtectedOnChange = !!muteOnChange;\n merge(this, prop);\n if (muteOnChange !== true) {\n merge(this.changedProperties, prop);\n this.dataBind();\n }\n else if (isBlazor() && this.isRendered) {\n this.serverDataBind(prop);\n }\n this.finalUpdate();\n this.changedProperties = {};\n this.oldProperties = {};\n this.isProtectedOnChange = prevDetection;\n };\n /**\n * Calls for child element data bind\n *\n * @param {Object} obj ?\n * @param {Object} parent ?\n * @returns {void} ?\n */\n // tslint:disable-next-line:no-any\n Base.callChildDataBind = function (obj, parent) {\n var keys = Object.keys(obj);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n if (parent[\"\" + key] instanceof Array) {\n for (var _a = 0, _b = parent[\"\" + key]; _a < _b.length; _a++) {\n var obj_1 = _b[_a];\n if (obj_1.dataBind !== undefined) {\n obj_1.dataBind();\n }\n }\n }\n else {\n parent[\"\" + key].dataBind();\n }\n }\n };\n Base.prototype.clearChanges = function () {\n this.finalUpdate();\n this.changedProperties = {};\n this.oldProperties = {};\n this.childChangedProperties = {};\n };\n /**\n * Bind property changes immediately to components\n *\n * @returns {void} ?\n */\n Base.prototype.dataBind = function () {\n Base.callChildDataBind(this.childChangedProperties, this);\n if (Object.getOwnPropertyNames(this.changedProperties).length) {\n var prevDetection = this.isProtectedOnChange;\n var newChanges = this.changedProperties;\n var oldChanges = this.oldProperties;\n this.clearChanges();\n this.isProtectedOnChange = true;\n this.onPropertyChanged(newChanges, oldChanges);\n this.isProtectedOnChange = prevDetection;\n }\n };\n /* tslint:disable:no-any */\n Base.prototype.serverDataBind = function (newChanges) {\n if (!isBlazor()) {\n return;\n }\n newChanges = newChanges ? newChanges : {};\n extend(this.bulkChanges, {}, newChanges, true);\n var sfBlazor = 'sfBlazor';\n if (this.allowServerDataBinding && window[\"\" + sfBlazor].updateModel) {\n window[\"\" + sfBlazor].updateModel(this);\n this.bulkChanges = {};\n }\n };\n /* tslint:enable:no-any */\n Base.prototype.saveChanges = function (key, newValue, oldValue) {\n if (isBlazor()) {\n // tslint:disable-next-line:no-any\n var newChanges = {};\n newChanges[\"\" + key] = newValue;\n this.serverDataBind(newChanges);\n }\n if (this.isProtectedOnChange) {\n return;\n }\n this.oldProperties[\"\" + key] = oldValue;\n this.changedProperties[\"\" + key] = newValue;\n this.finalUpdate();\n this.finalUpdate = setImmediate(this.dataBind.bind(this));\n };\n /** Event Base Section */\n /**\n * Adds the handler to the given event listener.\n *\n * @param {string} eventName - A String that specifies the name of the event\n * @param {Function} handler - Specifies the call to run when the event occurs.\n * @returns {void} ?\n */\n Base.prototype.addEventListener = function (eventName, handler) {\n this.modelObserver.on(eventName, handler);\n };\n /**\n * Removes the handler from the given event listener.\n *\n * @param {string} eventName - A String that specifies the name of the event to remove\n * @param {Function} handler - Specifies the function to remove\n * @returns {void} ?\n */\n Base.prototype.removeEventListener = function (eventName, handler) {\n this.modelObserver.off(eventName, handler);\n };\n /**\n * Triggers the handlers in the specified event.\n *\n * @private\n * @param {string} eventName - Specifies the event to trigger for the specified component properties.\n * Can be a custom event, or any of the standard events.\n * @param {Event} eventProp - Additional parameters to pass on to the event properties\n * @param {Function} successHandler - this function will invoke after event successfully triggered\n * @param {Function} errorHandler - this function will invoke after event if it failured to call.\n * @returns {void} ?\n */\n Base.prototype.trigger = function (eventName, eventProp, successHandler, errorHandler) {\n var _this = this;\n if (this.isDestroyed !== true) {\n var prevDetection = this.isProtectedOnChange;\n this.isProtectedOnChange = false;\n var data = this.modelObserver.notify(eventName, eventProp, successHandler, errorHandler);\n if (isColEName.test(eventName)) {\n var handler = getValue(eventName, this);\n if (handler) {\n var blazor = 'Blazor';\n if (window[\"\" + blazor]) {\n var promise = handler.call(this, eventProp);\n if (promise && typeof promise.then === 'function') {\n if (!successHandler) {\n data = promise;\n }\n else {\n promise.then(function (data) {\n if (successHandler) {\n data = typeof data === 'string' && _this.modelObserver.isJson(data) ?\n JSON.parse(data) : data;\n successHandler.call(_this, data);\n }\n }).catch(function (data) {\n if (errorHandler) {\n data = typeof data === 'string' && _this.modelObserver.isJson(data) ? JSON.parse(data) : data;\n errorHandler.call(_this, data);\n }\n });\n }\n }\n else if (successHandler) {\n successHandler.call(this, eventProp);\n }\n }\n else {\n handler.call(this, eventProp);\n if (successHandler) {\n successHandler.call(this, eventProp);\n }\n }\n }\n else if (successHandler) {\n successHandler.call(this, eventProp);\n }\n }\n this.isProtectedOnChange = prevDetection;\n return data;\n }\n };\n /**\n * To maintain instance in base class\n *\n * @returns {void} ?\n */\n Base.prototype.addInstance = function () {\n // Add module class to the root element\n var moduleClass = 'e-' + this.getModuleName().toLowerCase();\n addClass([this.element], ['e-lib', moduleClass]);\n if (!isNullOrUndefined(this.element.ej2_instances)) {\n this.element.ej2_instances.push(this);\n }\n else {\n setValue('ej2_instances', [this], this.element);\n }\n };\n /**\n * To remove the instance from the element\n *\n * @returns {void} ?\n */\n Base.prototype.destroy = function () {\n var _this = this;\n // eslint-disable-next-line\n this.element.ej2_instances =\n this.element.ej2_instances.filter(function (i) { return i !== _this; });\n removeClass([this.element], ['e-' + this.getModuleName()]);\n if (this.element.ej2_instances.length === 0) {\n // Remove module class from the root element\n removeClass([this.element], ['e-lib']);\n }\n this.clearChanges();\n this.modelObserver.destroy();\n this.isDestroyed = true;\n };\n return Base;\n}());\nexport { Base };\n/**\n * Global function to get the component instance from the rendered element.\n *\n * @param {HTMLElement} elem Specifies the HTMLElement or element id string.\n * @param {string} comp Specifies the component module name or Component.\n * @returns {any} ?\n */\n// tslint:disable-next-line:no-any\nexport function getComponent(elem, comp) {\n var instance;\n var i;\n var ele = typeof elem === 'string' ? document.getElementById(elem) : elem;\n for (i = 0; i < ele.ej2_instances.length; i++) {\n instance = ele.ej2_instances[parseInt(i.toString(), 10)];\n if (typeof comp === 'string') {\n var compName = instance.getModuleName();\n if (comp === compName) {\n return instance;\n }\n }\n else {\n // tslint:disable-next-line:no-any\n if (instance instanceof comp) {\n return instance;\n }\n }\n }\n return undefined;\n}\n/**\n * Function to remove the child instances.\n *\n * @param {HTMLElement} element ?\n * @return {void}\n * @private\n */\n// tslint:disable-next-line:no-any\nexport function removeChildInstance(element) {\n // tslint:disable-next-line:no-any\n var childEle = [].slice.call(element.getElementsByClassName('e-control'));\n for (var i = 0; i < childEle.length; i++) {\n var compName = childEle[parseInt(i.toString(), 10)].classList[1].split('e-')[1];\n // tslint:disable-next-line:no-any\n var compInstance = getComponent(childEle[parseInt(i.toString(), 10)], compName);\n if (!isUndefined(compInstance)) {\n compInstance.destroy();\n }\n }\n}\n","import { createInstance, isUndefined, merge, extend, getValue } from './util';\n/**\n * Returns the Class Object\n *\n * @param {ClassObject} instance - instance of ClassObject\n * @param {string} curKey - key of the current instance\n * @param {Object} defaultValue - default Value\n * @param {Object[]} type ?\n * @returns {ClassObject} ?\n */\n// eslint-disable-next-line\nfunction getObject(instance, curKey, defaultValue, type) {\n // eslint-disable-next-line\n if (!instance.properties.hasOwnProperty(curKey) || !(instance.properties[curKey] instanceof type)) {\n instance.properties[\"\" + curKey] = createInstance(type, [instance, curKey, defaultValue]);\n }\n return instance.properties[\"\" + curKey];\n}\n/**\n * Returns object array\n *\n * @param {ClassObject} instance ?\n * @param {string} curKey ?\n * @param {Object[]} defaultValue ?\n * @param {Object} type ?\n * @param {boolean} isSetter ?\n * @param {boolean} isFactory ?\n * @returns {Object[]} ?\n */\n// eslint-disable-next-line\nfunction getObjectArray(instance, curKey, defaultValue, type, isSetter, isFactory) {\n var result = [];\n var len = defaultValue ? defaultValue.length : 0;\n for (var i = 0; i < len; i++) {\n var curType = type;\n if (isFactory) {\n curType = type(defaultValue[parseInt(i.toString(), 10)], instance);\n }\n if (isSetter) {\n var inst = createInstance(curType, [instance, curKey, {}, true]);\n inst.setProperties(defaultValue[parseInt(i.toString(), 10)], true);\n result.push(inst);\n }\n else {\n result.push(createInstance(curType, [instance, curKey, defaultValue[parseInt(i.toString(), 10)], false]));\n }\n }\n return result;\n}\n/**\n * Returns the properties of the object\n *\n * @param {Object} defaultValue ?\n * @param {string} curKey ?\n * @returns {void} ?\n */\nfunction propertyGetter(defaultValue, curKey) {\n return function () {\n // eslint-disable-next-line\n if (!this.properties.hasOwnProperty(curKey)) {\n this.properties[\"\" + curKey] = defaultValue;\n }\n return this.properties[\"\" + curKey];\n };\n}\n/**\n * Set the properties for the object\n *\n * @param {Object} defaultValue ?\n * @param {string} curKey ?\n * @returns {void} ?\n */\nfunction propertySetter(defaultValue, curKey) {\n return function (newValue) {\n if (this.properties[\"\" + curKey] !== newValue) {\n // eslint-disable-next-line\n var oldVal = this.properties.hasOwnProperty(curKey) ? this.properties[curKey] : defaultValue;\n this.saveChanges(curKey, newValue, oldVal);\n this.properties[\"\" + curKey] = newValue;\n }\n };\n}\n/**\n * Returns complex objects\n *\n * @param {Object} defaultValue ?\n * @param {string} curKey ?\n * @param {Object[]} type ?\n * @returns {void} ?\n */\n// eslint-disable-next-line\nfunction complexGetter(defaultValue, curKey, type) {\n return function () {\n return getObject(this, curKey, defaultValue, type);\n };\n}\n/**\n * Sets complex objects\n *\n * @param {Object} defaultValue ?\n * @param {string} curKey ?\n * @param {Object[]} type ?\n * @returns {void} ?\n */\nfunction complexSetter(defaultValue, curKey, type) {\n return function (newValue) {\n getObject(this, curKey, defaultValue, type).setProperties(newValue);\n };\n}\n/**\n *\n * @param {Object} defaultValue ?\n * @param {string} curKey ?\n * @param {FunctionConstructor} type ?\n * @returns {void} ?\n */\n// eslint-disable-next-line\nfunction complexFactoryGetter(defaultValue, curKey, type) {\n return function () {\n var curType = type({});\n // eslint-disable-next-line\n if (this.properties.hasOwnProperty(curKey)) {\n return this.properties[\"\" + curKey];\n }\n else {\n return getObject(this, curKey, defaultValue, curType);\n }\n };\n}\n/**\n *\n * @param {Object} defaultValue ?\n * @param {string} curKey ?\n * @param {Object[]} type ?\n * @returns {void} ?\n */\nfunction complexFactorySetter(defaultValue, curKey, type) {\n return function (newValue) {\n var curType = type(newValue, this);\n getObject(this, curKey, defaultValue, curType).setProperties(newValue);\n };\n}\n/**\n *\n * @param {Object[]} defaultValue ?\n * @param {string} curKey ?\n * @param {Object[]} type ?\n * @returns {void} ?\n */\nfunction complexArrayGetter(defaultValue, curKey, type) {\n return function () {\n var _this = this;\n // eslint-disable-next-line\n if (!this.properties.hasOwnProperty(curKey)) {\n var defCollection = getObjectArray(this, curKey, defaultValue, type, false);\n this.properties[\"\" + curKey] = defCollection;\n }\n var ignore = ((this.controlParent !== undefined && this.controlParent.ignoreCollectionWatch)\n || this.ignoreCollectionWatch);\n // eslint-disable-next-line\n if (!this.properties[curKey].hasOwnProperty('push') && !ignore) {\n ['push', 'pop'].forEach(function (extendFunc) {\n var descriptor = {\n value: complexArrayDefinedCallback(extendFunc, curKey, type, _this.properties[\"\" + curKey]).bind(_this),\n configurable: true\n };\n Object.defineProperty(_this.properties[\"\" + curKey], extendFunc, descriptor);\n });\n }\n // eslint-disable-next-line\n if (!this.properties[curKey].hasOwnProperty('isComplexArray')) {\n Object.defineProperty(this.properties[\"\" + curKey], 'isComplexArray', { value: true });\n }\n return this.properties[\"\" + curKey];\n };\n}\n/**\n *\n * @param {Object[]} defaultValue ?\n * @param {string} curKey ?\n * @param {Object[]} type ?\n * @returns {void} ?\n */\nfunction complexArraySetter(defaultValue, curKey, type) {\n return function (newValue) {\n this.isComplexArraySetter = true;\n var oldValueCollection = getObjectArray(this, curKey, defaultValue, type, false);\n var newValCollection = getObjectArray(this, curKey, newValue, type, true);\n this.isComplexArraySetter = false;\n this.saveChanges(curKey, newValCollection, oldValueCollection);\n this.properties[\"\" + curKey] = newValCollection;\n };\n}\n/**\n *\n * @param {Object[]} defaultValue ?\n * @param {string} curKey ?\n * @param {Object[]} type ?\n * @returns {void} ?\n */\nfunction complexArrayFactorySetter(defaultValue, curKey, type) {\n return function (newValue) {\n // eslint-disable-next-line\n var oldValueCollection = this.properties.hasOwnProperty(curKey) ? this.properties[curKey] : defaultValue;\n var newValCollection = getObjectArray(this, curKey, newValue, type, true, true);\n this.saveChanges(curKey, newValCollection, oldValueCollection);\n this.properties[\"\" + curKey] = newValCollection;\n };\n}\n/**\n *\n * @param {Object[]} defaultValue ?\n * @param {string} curKey ?\n * @param {FunctionConstructor} type ?\n * @returns {void} ?\n */\nfunction complexArrayFactoryGetter(defaultValue, curKey, type) {\n return function () {\n var curType = type({});\n // eslint-disable-next-line\n if (!this.properties.hasOwnProperty(curKey)) {\n var defCollection = getObjectArray(this, curKey, defaultValue, curType, false);\n this.properties[\"\" + curKey] = defCollection;\n }\n return this.properties[\"\" + curKey];\n };\n}\n/**\n *\n * @param {string} dFunc ?\n * @param {string} curKey ?\n * @param {Object} type ?\n * @param {Object} prop ?\n * @returns {Object} ?\n */\nfunction complexArrayDefinedCallback(dFunc, curKey, type, prop) {\n /* tslint:disable no-function-expression */\n return function () {\n var newValue = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n newValue[_i] = arguments[_i];\n }\n var keyString = this.propName ? this.getParentKey() + '.' + curKey + '-' : curKey + '-';\n switch (dFunc) {\n case 'push':\n for (var i = 0; i < newValue.length; i++) {\n Array.prototype[\"\" + dFunc].apply(prop, [newValue[parseInt(i.toString(), 10)]]);\n var model_1 = getArrayModel(keyString + (prop.length - 1), newValue[parseInt(i.toString(), 10)], !this.controlParent, dFunc);\n this.serverDataBind(model_1, newValue[parseInt(i.toString(), 10)], false, dFunc);\n }\n break;\n case 'pop':\n Array.prototype[\"\" + dFunc].apply(prop);\n // eslint-disable-next-line\n var model = getArrayModel(keyString + prop.length, null, !this.controlParent, dFunc);\n this.serverDataBind(model, { ejsAction: 'pop' }, false, dFunc);\n break;\n }\n return prop;\n };\n}\n/**\n *\n * @param {string} keyString ?\n * @param {Object} value ?\n * @param {boolean} isControlParent ?\n * @param {string} arrayFunction ?\n * @returns {Object} ?\n */\nfunction getArrayModel(keyString, value, isControlParent, arrayFunction) {\n var modelObject = keyString;\n if (isControlParent) {\n modelObject = {};\n modelObject[\"\" + keyString] = value;\n if (value && typeof value === 'object') {\n var action = 'ejsAction';\n modelObject[\"\" + keyString][\"\" + action] = arrayFunction;\n }\n }\n return modelObject;\n}\n// eslint-disable-next-line\n/**\n * Method used to create property. General syntax below.\n *\n * @param {Object} defaultValue - Specifies the default value of property.\n * @returns {PropertyDecorator} ?\n * ```\n * @Property('TypeScript')\n * propertyName: Type;\n * ```\n * @private\n */\nexport function Property(defaultValue) {\n return function (target, key) {\n var propertyDescriptor = {\n set: propertySetter(defaultValue, key),\n get: propertyGetter(defaultValue, key),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'prop', defaultValue);\n };\n}\n/**\n * Method used to create complex property. General syntax below.\n *\n * @param {any} defaultValue - Specifies the default value of property.\n * @param {Function} type - Specifies the class type of complex object.\n * @returns {PropertyDecorator} ?\n * ```\n * @Complex({},Type)\n * propertyName: Type;\n * ```\n * @private\n */\nexport function Complex(defaultValue, type) {\n return function (target, key) {\n var propertyDescriptor = {\n set: complexSetter(defaultValue, key, type),\n get: complexGetter(defaultValue, key, type),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'complexProp', defaultValue, type);\n };\n}\n/**\n * Method used to create complex Factory property. General syntax below.\n *\n * @param {Function} type - Specifies the class factory type of complex object.\n * @returns {PropertyDecorator} ?\n * ```\n * @ComplexFactory(defaultType, factoryFunction)\n * propertyName: Type1 | Type2;\n * ```\n * @private\n */\nexport function ComplexFactory(type) {\n return function (target, key) {\n var propertyDescriptor = {\n set: complexFactorySetter({}, key, type),\n get: complexFactoryGetter({}, key, type),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'complexProp', {}, type);\n };\n}\n/**\n * Method used to create complex array property. General syntax below.\n *\n * @param {any} defaultValue - Specifies the default value of property.\n * @param {Function} type - Specifies the class type of complex object.\n * @returns {PropertyDecorator} ?\n * ```\n * @Collection([], Type);\n * propertyName: Type;\n * ```\n * @private\n */\nexport function Collection(defaultValue, type) {\n return function (target, key) {\n var propertyDescriptor = {\n set: complexArraySetter(defaultValue, key, type),\n get: complexArrayGetter(defaultValue, key, type),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'colProp', defaultValue, type);\n };\n}\n/**\n * Method used to create complex factory array property. General syntax below.\n *\n * @param {Function} type - Specifies the class type of complex object.\n * @returns {PropertyCollectionInfo} ?\n * ```\n * @Collection([], Type);\n * propertyName: Type;\n * ```\n * @private\n */\nexport function CollectionFactory(type) {\n return function (target, key) {\n var propertyDescriptor = {\n set: complexArrayFactorySetter([], key, type),\n get: complexArrayFactoryGetter([], key, type),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'colProp', {}, type);\n };\n}\n/**\n * Method used to create event property. General syntax below.\n *\n * @returns {PropertyDecorator} ?\n * ```\n * @Event(()=>{return true;})\n * ```\n * @private\n */\nexport function Event() {\n return function (target, key) {\n var eventDescriptor = {\n set: function (newValue) {\n var oldValue = this.properties[\"\" + key];\n if (oldValue !== newValue) {\n var finalContext = getParentContext(this, key);\n if (isUndefined(oldValue) === false) {\n finalContext.context.removeEventListener(finalContext.prefix, oldValue);\n }\n finalContext.context.addEventListener(finalContext.prefix, newValue);\n this.properties[\"\" + key] = newValue;\n }\n },\n get: propertyGetter(undefined, key),\n enumerable: true,\n configurable: true\n };\n Object.defineProperty(target, key, eventDescriptor);\n addPropertyCollection(target, key, 'event');\n };\n}\n/**\n * NotifyPropertyChanges is triggers the call back when the property has been changed.\n *\n * @param {Function} classConstructor ?\n * @returns {void} ?\n * ```\n * @NotifyPropertyChanges\n * class DemoClass implements INotifyPropertyChanged {\n *\n * @Property()\n * property1: string;\n *\n * dataBind: () => void;\n *\n * constructor() { }\n *\n * onPropertyChanged(newProp: any, oldProp: any) {\n * // Called when property changed\n * }\n * }\n * ```\n * @private\n */\n// eslint-disable-next-line\nexport function NotifyPropertyChanges(classConstructor) {\n /** Need to code */\n}\n/**\n * Method used to create the builderObject for the target component.\n *\n * @param {BuildInfo} target ?\n * @param {string} key ?\n * @param {string} propertyType ?\n * @param {Object} defaultValue ?\n * @param {Function} type ?\n * @returns {void} ?\n * @private\n */\nfunction addPropertyCollection(target, key, propertyType, defaultValue, type) {\n if (isUndefined(target.propList)) {\n target.propList = {\n props: [],\n complexProps: [],\n colProps: [],\n events: [],\n propNames: [],\n complexPropNames: [],\n colPropNames: [],\n eventNames: []\n };\n }\n // eslint-disable-next-line\n target.propList[propertyType + 's'].push({\n propertyName: key,\n defaultValue: defaultValue,\n type: type\n });\n // eslint-disable-next-line\n target.propList[propertyType + 'Names'].push(key);\n}\n/**\n * Returns an object containing the builder properties\n *\n * @param {Function} component ?\n * @returns {Object} ?\n * @private\n */\nfunction getBuilderProperties(component) {\n if (isUndefined(component.prototype.builderObject)) {\n component.prototype.builderObject = {\n properties: {}, propCollections: [], add: function () {\n this.isPropertyArray = true;\n this.propCollections.push(extend({}, this.properties, {}));\n }\n };\n var rex = /complex/;\n for (var _i = 0, _a = Object.keys(component.prototype.propList); _i < _a.length; _i++) {\n var key = _a[_i];\n var _loop_1 = function (prop) {\n if (rex.test(key)) {\n component.prototype.builderObject[prop.propertyName] = function (value) {\n var childType = {};\n merge(childType, getBuilderProperties(prop.type));\n value(childType);\n var tempValue;\n if (!childType.isPropertyArray) {\n tempValue = extend({}, childType.properties, {});\n }\n else {\n tempValue = childType.propCollections;\n }\n this.properties[prop.propertyName] = tempValue;\n childType.properties = {};\n childType.propCollections = [];\n childType.isPropertyArray = false;\n return this;\n };\n }\n else {\n component.prototype.builderObject[prop.propertyName] = function (value) {\n this.properties[prop.propertyName] = value;\n return this;\n };\n }\n };\n for (var _b = 0, _c = component.prototype.propList[\"\" + key]; _b < _c.length; _b++) {\n var prop = _c[_b];\n _loop_1(prop);\n }\n }\n }\n return component.prototype.builderObject;\n}\n/**\n * Method used to create builder for the components\n *\n * @param {any} component -specifies the target component for which builder to be created.\n * @returns {Object} ?\n * @private\n */\nexport function CreateBuilder(component) {\n var builderFunction = function (element) {\n this.element = element;\n return this;\n };\n var instanceFunction = function (element) {\n // eslint-disable-next-line\n if (!builderFunction.prototype.hasOwnProperty('create')) {\n builderFunction.prototype = getBuilderProperties(component);\n builderFunction.prototype.create = function () {\n var temp = extend({}, {}, this.properties);\n this.properties = {};\n return new component(temp, this.element);\n };\n }\n return new builderFunction(element);\n };\n return instanceFunction;\n}\n/**\n * Returns parent options for the object\n *\n * @param {Object} context ?\n * @param {string} prefix ?\n * @returns {ParentOption} ?\n * @private\n */\nfunction getParentContext(context, prefix) {\n // eslint-disable-next-line\n if (context.hasOwnProperty('parentObj') === false) {\n return { context: context, prefix: prefix };\n }\n else {\n var curText = getValue('propName', context);\n if (curText) {\n prefix = curText + '-' + prefix;\n }\n return getParentContext(getValue('parentObj', context), prefix);\n }\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { createElement, selectAll, closest } from './dom';\nimport { Base } from './base';\nimport { Browser } from './browser';\nimport { EventHandler } from './event-handler';\nimport { Property, NotifyPropertyChanges, Event } from './notify-property-change';\n/**\n * The Animation framework provide options to animate the html DOM elements\n * ```typescript\n * let animeObject = new Animation({\n * name: 'SlideLeftIn',\n * duration: 1000\n * });\n * animeObject.animate('#anime1');\n * animeObject.animate('#anime2', { duration: 500 });\n * ```\n */\nvar Animation = /** @class */ (function (_super) {\n __extends(Animation, _super);\n function Animation(options) {\n var _this = _super.call(this, options, undefined) || this;\n /**\n * @private\n */\n _this.easing = {\n ease: 'cubic-bezier(0.250, 0.100, 0.250, 1.000)',\n linear: 'cubic-bezier(0.250, 0.250, 0.750, 0.750)',\n easeIn: 'cubic-bezier(0.420, 0.000, 1.000, 1.000)',\n easeOut: 'cubic-bezier(0.000, 0.000, 0.580, 1.000)',\n easeInOut: 'cubic-bezier(0.420, 0.000, 0.580, 1.000)',\n elasticInOut: 'cubic-bezier(0.5,-0.58,0.38,1.81)',\n elasticIn: 'cubic-bezier(0.17,0.67,0.59,1.81)',\n elasticOut: 'cubic-bezier(0.7,-0.75,0.99,1.01)'\n };\n return _this;\n }\n Animation_1 = Animation;\n /**\n * Applies animation to the current element.\n *\n * @param {string | HTMLElement} element - Element which needs to be animated.\n * @param {AnimationModel} options - Overriding default animation settings.\n * @returns {void} ?\n */\n Animation.prototype.animate = function (element, options) {\n options = !options ? {} : options;\n var model = this.getModel(options);\n if (typeof element === 'string') {\n var elements = Array.prototype.slice.call(selectAll(element, document));\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var element_1 = elements_1[_i];\n model.element = element_1;\n Animation_1.delayAnimation(model);\n }\n }\n else {\n model.element = element;\n Animation_1.delayAnimation(model);\n }\n };\n /**\n * Stop the animation effect on animated element.\n *\n * @param {HTMLElement} element - Element which needs to be stop the animation.\n * @param {AnimationOptions} model - Handling the animation model at stop function.\n * @return {void}\n */\n Animation.stop = function (element, model) {\n element.style.animation = '';\n element.removeAttribute('e-animate');\n var animationId = element.getAttribute('e-animation-id');\n if (animationId) {\n var frameId = parseInt(animationId, 10);\n cancelAnimationFrame(frameId);\n element.removeAttribute('e-animation-id');\n }\n if (model && model.end) {\n model.end.call(this, model);\n }\n };\n /**\n * Set delay to animation element\n *\n * @param {AnimationModel} model ?\n * @returns {void}\n */\n Animation.delayAnimation = function (model) {\n if (animationMode === 'Disable') {\n if (model.begin) {\n model.begin.call(this, model);\n }\n if (model.end) {\n model.end.call(this, model);\n }\n }\n else {\n if (model.delay) {\n setTimeout(function () { Animation_1.applyAnimation(model); }, model.delay);\n }\n else {\n Animation_1.applyAnimation(model);\n }\n }\n };\n /**\n * Triggers animation\n *\n * @param {AnimationModel} model ?\n * @returns {void}\n */\n Animation.applyAnimation = function (model) {\n var _this = this;\n model.timeStamp = 0;\n var step = 0;\n var timerId = 0;\n var prevTimeStamp = 0;\n var duration = model.duration;\n model.element.setAttribute('e-animate', 'true');\n var startAnimation = function (timeStamp) {\n try {\n if (timeStamp) {\n // let step: number = model.timeStamp = timeStamp - startTime;\n /** phantomjs workaround for timestamp fix */\n prevTimeStamp = prevTimeStamp === 0 ? timeStamp : prevTimeStamp;\n model.timeStamp = (timeStamp + model.timeStamp) - prevTimeStamp;\n prevTimeStamp = timeStamp;\n /** phantomjs workaround end */\n // trigger animation begin event\n if (!step && model.begin) {\n model.begin.call(_this, model);\n }\n step = step + 1;\n var avg = model.timeStamp / step;\n if (model.timeStamp < duration && model.timeStamp + avg < duration && model.element.getAttribute('e-animate')) {\n // apply animation effect to the current element\n model.element.style.animation = model.name + ' ' + model.duration + 'ms ' + model.timingFunction;\n if (model.progress) {\n model.progress.call(_this, model);\n }\n // repeat requestAnimationFrame\n requestAnimationFrame(startAnimation);\n }\n else {\n // clear requestAnimationFrame\n cancelAnimationFrame(timerId);\n model.element.removeAttribute('e-animation-id');\n model.element.removeAttribute('e-animate');\n model.element.style.animation = '';\n if (model.end) {\n model.end.call(_this, model);\n }\n }\n }\n else {\n //startTime = performance.now();\n // set initial requestAnimationFrame\n timerId = requestAnimationFrame(startAnimation);\n model.element.setAttribute('e-animation-id', timerId.toString());\n }\n }\n catch (e) {\n cancelAnimationFrame(timerId);\n model.element.removeAttribute('e-animation-id');\n if (model.fail) {\n model.fail.call(_this, e);\n }\n }\n };\n startAnimation();\n };\n /**\n * Returns Animation Model\n *\n * @param {AnimationModel} options ?\n * @returns {AnimationModel} ?\n */\n Animation.prototype.getModel = function (options) {\n return {\n name: options.name || this.name,\n delay: options.delay || this.delay,\n duration: (options.duration !== undefined ? options.duration : this.duration),\n begin: options.begin || this.begin,\n end: options.end || this.end,\n fail: options.fail || this.fail,\n progress: options.progress || this.progress,\n timingFunction: this.easing[options.timingFunction] ? this.easing[options.timingFunction] :\n (options.timingFunction || this.easing[this.timingFunction])\n };\n };\n /**\n * @private\n * @param {AnimationModel} newProp ?\n * @param {AnimationModel} oldProp ?\n * @returns {void} ?\n */\n // eslint-disable-next-line\n Animation.prototype.onPropertyChanged = function (newProp, oldProp) {\n // no code needed\n };\n /**\n * Returns module name as animation\n *\n * @private\n * @returns {void} ?\n */\n Animation.prototype.getModuleName = function () {\n return 'animation';\n };\n /**\n *\n * @private\n * @returns {void} ?\n */\n Animation.prototype.destroy = function () {\n //Override base destroy;\n };\n var Animation_1;\n __decorate([\n Property('FadeIn')\n ], Animation.prototype, \"name\", void 0);\n __decorate([\n Property(400)\n ], Animation.prototype, \"duration\", void 0);\n __decorate([\n Property('ease')\n ], Animation.prototype, \"timingFunction\", void 0);\n __decorate([\n Property(0)\n ], Animation.prototype, \"delay\", void 0);\n __decorate([\n Event()\n ], Animation.prototype, \"progress\", void 0);\n __decorate([\n Event()\n ], Animation.prototype, \"begin\", void 0);\n __decorate([\n Event()\n ], Animation.prototype, \"end\", void 0);\n __decorate([\n Event()\n ], Animation.prototype, \"fail\", void 0);\n Animation = Animation_1 = __decorate([\n NotifyPropertyChanges\n ], Animation);\n return Animation;\n}(Base));\nexport { Animation };\n/**\n * Ripple provides material theme's wave effect when an element is clicked\n * ```html\n * \n * \n * ```\n *\n * @private\n * @param {HTMLElement} element - Target element\n * @param {RippleOptions} rippleOptions - Ripple options .\n * @param {Function} done .\n * @returns {void} .\n */\nexport function rippleEffect(element, rippleOptions, done) {\n var rippleModel = getRippleModel(rippleOptions);\n if (rippleModel.rippleFlag === false || (rippleModel.rippleFlag === undefined && !isRippleEnabled)) {\n return (function () {\n // do nothing.\n });\n }\n element.setAttribute('data-ripple', 'true');\n EventHandler.add(element, 'mousedown', rippleHandler, { parent: element, rippleOptions: rippleModel });\n EventHandler.add(element, 'mouseup', rippleUpHandler, { parent: element, rippleOptions: rippleModel, done: done });\n EventHandler.add(element, 'mouseleave', rippleLeaveHandler, { parent: element, rippleOptions: rippleModel });\n if (Browser.isPointer) {\n EventHandler.add(element, 'transitionend', rippleLeaveHandler, { parent: element, rippleOptions: rippleModel });\n }\n return (function () {\n element.removeAttribute('data-ripple');\n EventHandler.remove(element, 'mousedown', rippleHandler);\n EventHandler.remove(element, 'mouseup', rippleUpHandler);\n EventHandler.remove(element, 'mouseleave', rippleLeaveHandler);\n EventHandler.remove(element, 'transitionend', rippleLeaveHandler);\n });\n}\n/**\n * Handler for ripple model\n *\n * @param {RippleOptions} rippleOptions ?\n * @returns {RippleOptions} ?\n */\nfunction getRippleModel(rippleOptions) {\n var rippleModel = {\n selector: rippleOptions && rippleOptions.selector ? rippleOptions.selector : null,\n ignore: rippleOptions && rippleOptions.ignore ? rippleOptions.ignore : null,\n rippleFlag: rippleOptions && rippleOptions.rippleFlag,\n isCenterRipple: rippleOptions && rippleOptions.isCenterRipple,\n duration: rippleOptions && rippleOptions.duration ? rippleOptions.duration : 350\n };\n return rippleModel;\n}\n/**\n * Handler for ripple event\n *\n * @param {MouseEvent} e ?\n * @returns {void} ?\n * @private\n */\nfunction rippleHandler(e) {\n var target = (e.target);\n var selector = this.rippleOptions.selector;\n var element = selector ? closest(target, selector) : target;\n if (!element || (this.rippleOptions && closest(target, this.rippleOptions.ignore))) {\n return;\n }\n var offset = element.getBoundingClientRect();\n var offsetX = e.pageX - document.body.scrollLeft;\n var offsetY = e.pageY - ((!document.body.scrollTop && document.documentElement) ?\n document.documentElement.scrollTop : document.body.scrollTop);\n var pageX = Math.max(Math.abs(offsetX - offset.left), Math.abs(offsetX - offset.right));\n var pageY = Math.max(Math.abs(offsetY - offset.top), Math.abs(offsetY - offset.bottom));\n var radius = Math.sqrt(pageX * pageX + pageY * pageY);\n var diameter = radius * 2 + 'px';\n var x = offsetX - offset.left - radius;\n var y = offsetY - offset.top - radius;\n if (this.rippleOptions && this.rippleOptions.isCenterRipple) {\n x = 0;\n y = 0;\n diameter = '100%';\n }\n element.classList.add('e-ripple');\n var duration = this.rippleOptions.duration.toString();\n var styles = 'width: ' + diameter + ';height: ' + diameter + ';left: ' + x + 'px;top: ' + y + 'px;' +\n 'transition-duration: ' + duration + 'ms;';\n var rippleElement = createElement('div', { className: 'e-ripple-element', styles: styles });\n element.appendChild(rippleElement);\n window.getComputedStyle(rippleElement).getPropertyValue('opacity');\n rippleElement.style.transform = 'scale(1)';\n if (element !== this.parent) {\n EventHandler.add(element, 'mouseleave', rippleLeaveHandler, { parent: this.parent, rippleOptions: this.rippleOptions });\n }\n}\n/**\n * Handler for ripple element mouse up event\n *\n * @param {MouseEvent} e ?\n * @returns {void} ?\n * @private\n */\nfunction rippleUpHandler(e) {\n removeRipple(e, this);\n}\n/**\n * Handler for ripple element mouse move event\n *\n * @param {MouseEvent} e ?\n * @returns {void} ?\n * @private\n */\nfunction rippleLeaveHandler(e) {\n removeRipple(e, this);\n}\n/**\n * Handler for removing ripple element\n *\n * @param {MouseEvent} e ?\n * @param {RippleArgs} eventArgs ?\n * @returns {void} ?\n * @private\n */\nfunction removeRipple(e, eventArgs) {\n var duration = eventArgs.rippleOptions.duration;\n var target = (e.target);\n var selector = eventArgs.rippleOptions.selector;\n var element = selector ? closest(target, selector) : target;\n if (!element || (element && element.className.indexOf('e-ripple') === -1)) {\n return;\n }\n var rippleElements = selectAll('.e-ripple-element', element);\n var rippleElement = rippleElements[rippleElements.length - 1];\n if (rippleElement) {\n rippleElement.style.opacity = '0.5';\n }\n if (eventArgs.parent !== element) {\n EventHandler.remove(element, 'mouseleave', rippleLeaveHandler);\n }\n /* tslint:disable:align */\n setTimeout(function () {\n if (rippleElement && rippleElement.parentNode) {\n rippleElement.parentNode.removeChild(rippleElement);\n }\n if (!element.getElementsByClassName('e-ripple-element').length) {\n element.classList.remove('e-ripple');\n }\n if (eventArgs.done) {\n eventArgs.done(e);\n }\n }, duration);\n}\nexport var isRippleEnabled = false;\n/**\n * Animation Module provides support to enable ripple effect functionality to Essential JS 2 components.\n *\n * @param {boolean} isRipple Specifies the boolean value to enable or disable ripple effect.\n * @returns {boolean} ?\n */\nexport function enableRipple(isRipple) {\n isRippleEnabled = isRipple;\n return isRippleEnabled;\n}\n/**\n * Defines the Modes of Global animation.\n *\n * @private\n */\nexport var animationMode = '';\n/**\n * Method for set the Global animation modes for Syncfusion Blazor components.\n *\n * @param {string} value - Specifies the animation mode.\n * @returns {void}\n */\nexport function setGlobalAnimation(value) {\n animationMode = value;\n}\n","/**\n * Module loading operations\n */\nimport { createInstance, setValue, getValue, deleteObject } from './util';\nvar MODULE_SUFFIX = 'Module';\nvar ModuleLoader = /** @class */ (function () {\n function ModuleLoader(parent) {\n this.loadedModules = [];\n this.parent = parent;\n }\n /**\n * Inject required modules in component library\n *\n * @returns {void} ?\n * @param {ModuleDeclaration[]} requiredModules - Array of modules to be required\n * @param {Function[]} moduleList - Array of modules to be injected from sample side\n */\n ModuleLoader.prototype.inject = function (requiredModules, moduleList) {\n var reqLength = requiredModules.length;\n if (reqLength === 0) {\n this.clean();\n return;\n }\n if (this.loadedModules.length) {\n this.clearUnusedModule(requiredModules);\n }\n for (var i = 0; i < reqLength; i++) {\n var modl = requiredModules[parseInt(i.toString(), 10)];\n for (var _i = 0, moduleList_1 = moduleList; _i < moduleList_1.length; _i++) {\n var module = moduleList_1[_i];\n var modName = modl.member;\n if (module && module.prototype.getModuleName() === modl.member && !this.isModuleLoaded(modName)) {\n var moduleObject = createInstance(module, modl.args);\n var memberName = this.getMemberName(modName);\n if (modl.isProperty) {\n setValue(memberName, module, this.parent);\n }\n else {\n setValue(memberName, moduleObject, this.parent);\n }\n var loadedModule = modl;\n loadedModule.member = memberName;\n this.loadedModules.push(loadedModule);\n }\n }\n }\n };\n /**\n * To remove the created object while destroying the control\n *\n * @returns {void}\n */\n ModuleLoader.prototype.clean = function () {\n for (var _i = 0, _a = this.loadedModules; _i < _a.length; _i++) {\n var modules = _a[_i];\n if (!modules.isProperty) {\n getValue(modules.member, this.parent).destroy();\n }\n }\n this.loadedModules = [];\n };\n /**\n * Removes all unused modules\n *\n * @param {ModuleDeclaration[]} moduleList ?\n * @returns {void} ?\n */\n ModuleLoader.prototype.clearUnusedModule = function (moduleList) {\n var _this = this;\n var usedModules = moduleList.map(function (arg) { return _this.getMemberName(arg.member); });\n var removableModule = this.loadedModules.filter(function (module) {\n return usedModules.indexOf(module.member) === -1;\n });\n for (var _i = 0, removableModule_1 = removableModule; _i < removableModule_1.length; _i++) {\n var mod = removableModule_1[_i];\n if (!mod.isProperty) {\n getValue(mod.member, this.parent).destroy();\n }\n this.loadedModules.splice(this.loadedModules.indexOf(mod), 1);\n deleteObject(this.parent, mod.member);\n }\n };\n /**\n * To get the name of the member.\n *\n * @param {string} name ?\n * @returns {string} ?\n */\n ModuleLoader.prototype.getMemberName = function (name) {\n return name[0].toLowerCase() + name.substring(1) + MODULE_SUFFIX;\n };\n /**\n * Returns boolean based on whether the module specified is loaded or not\n *\n * @param {string} modName ?\n * @returns {boolean} ?\n */\n ModuleLoader.prototype.isModuleLoaded = function (modName) {\n for (var _i = 0, _a = this.loadedModules; _i < _a.length; _i++) {\n var mod = _a[_i];\n if (mod.member === this.getMemberName(modName)) {\n return true;\n }\n }\n return false;\n };\n return ModuleLoader;\n}());\nexport { ModuleLoader };\n","import { getValue, setValue, merge, isBlazor } from './util';\nimport { Base } from './base';\n/**\n * To detect the changes for inner properties.\n *\n * @private\n */\nvar ChildProperty = /** @class */ (function () {\n function ChildProperty(parent, propName, defaultValue, isArray) {\n this.isComplexArraySetter = false;\n this.properties = {};\n this.changedProperties = {};\n this.childChangedProperties = {};\n this.oldProperties = {};\n // eslint-disable-next-line\n this.finalUpdate = function () { };\n this.callChildDataBind = getValue('callChildDataBind', Base);\n this.parentObj = parent;\n this.controlParent = this.parentObj.controlParent || this.parentObj;\n this.propName = propName;\n this.isParentArray = isArray;\n this.setProperties(defaultValue, true);\n }\n /**\n * Updates the property changes\n *\n * @param {boolean} val ?\n * @param {string} propName ?\n * @returns {void} ?\n */\n ChildProperty.prototype.updateChange = function (val, propName) {\n if (val === true) {\n this.parentObj.childChangedProperties[\"\" + propName] = val;\n }\n else {\n delete this.parentObj.childChangedProperties[\"\" + propName];\n }\n if (this.parentObj.updateChange) {\n this.parentObj.updateChange(val, this.parentObj.propName);\n }\n };\n /**\n * Updates time out duration\n *\n * @returns {void} ?\n */\n ChildProperty.prototype.updateTimeOut = function () {\n if (this.parentObj.updateTimeOut) {\n this.parentObj.finalUpdate();\n this.parentObj.updateTimeOut();\n }\n else {\n var changeTime_1 = setTimeout(this.parentObj.dataBind.bind(this.parentObj));\n var clearUpdate = function () {\n clearTimeout(changeTime_1);\n };\n this.finalUpdate = clearUpdate;\n }\n };\n /**\n * Clears changed properties\n *\n * @returns {void} ?\n */\n ChildProperty.prototype.clearChanges = function () {\n this.finalUpdate();\n this.updateChange(false, this.propName);\n this.oldProperties = {};\n this.changedProperties = {};\n };\n /**\n * Set property changes\n *\n * @param {Object} prop ?\n * @param {boolean} muteOnChange ?\n * @returns {void} ?\n */\n ChildProperty.prototype.setProperties = function (prop, muteOnChange) {\n if (muteOnChange === true) {\n merge(this, prop);\n this.updateChange(false, this.propName);\n this.clearChanges();\n }\n else {\n merge(this, prop);\n }\n };\n /**\n * Binds data\n *\n * @returns {void} ?\n */\n ChildProperty.prototype.dataBind = function () {\n this.callChildDataBind(this.childChangedProperties, this);\n if (this.isParentArray) {\n var curIndex = this.parentObj[this.propName].indexOf(this);\n if (Object.keys(this.changedProperties).length) {\n setValue(this.propName + '.' + curIndex, this.changedProperties, this.parentObj.changedProperties);\n setValue(this.propName + '.' + curIndex, this.oldProperties, this.parentObj.oldProperties);\n }\n }\n else {\n this.parentObj.changedProperties[this.propName] = this.changedProperties;\n this.parentObj.oldProperties[this.propName] = this.oldProperties;\n }\n this.clearChanges();\n };\n /**\n * Saves changes to newer values\n *\n * @param {string} key ?\n * @param {Object} newValue ?\n * @param {Object} oldValue ?\n * @param {boolean} restrictServerDataBind ?\n * @returns {void} ?\n */\n ChildProperty.prototype.saveChanges = function (key, newValue, oldValue, restrictServerDataBind) {\n if (this.controlParent.isProtectedOnChange) {\n return;\n }\n if (!restrictServerDataBind) {\n this.serverDataBind(key, newValue, true);\n }\n this.oldProperties[\"\" + key] = oldValue;\n this.changedProperties[\"\" + key] = newValue;\n this.updateChange(true, this.propName);\n this.finalUpdate();\n this.updateTimeOut();\n };\n ChildProperty.prototype.serverDataBind = function (key, value, isSaveChanges, action) {\n if (isBlazor() && !this.parentObj.isComplexArraySetter) {\n var parent_1;\n var newChanges = {};\n var parentKey = isSaveChanges ? this.getParentKey(true) + '.' + key : key;\n /* istanbul ignore else */\n if (parentKey.indexOf('.') !== -1) {\n var complexKeys = parentKey.split('.');\n parent_1 = newChanges;\n for (var i = 0; i < complexKeys.length; i++) {\n var isFinal = i === complexKeys.length - 1;\n parent_1[complexKeys[parseInt(i.toString(), 10)]] = isFinal ? value : {};\n parent_1 = isFinal ? parent_1 : parent_1[complexKeys[parseInt(i.toString(), 10)]];\n }\n }\n else {\n newChanges[\"\" + parentKey] = {};\n parent_1 = newChanges[\"\" + parentKey];\n newChanges[\"\" + parentKey][\"\" + key] = value;\n }\n /* istanbul ignore next */\n if (this.isParentArray) {\n var actionProperty = 'ejsAction';\n parent_1[\"\" + actionProperty] = action ? action : 'none';\n }\n this.controlParent.serverDataBind(newChanges);\n }\n };\n ChildProperty.prototype.getParentKey = function (isSaveChanges) {\n // eslint-disable-next-line\n var index = '';\n var propName = this.propName;\n /* istanbul ignore next */\n if (this.isParentArray) {\n index = this.parentObj[this.propName].indexOf(this);\n var valueLength = this.parentObj[this.propName].length;\n valueLength = isSaveChanges ? valueLength : (valueLength > 0 ? valueLength - 1 : 0);\n index = index !== -1 ? '-' + index : '-' + valueLength;\n propName = propName + index;\n }\n if (this.controlParent !== this.parentObj) {\n propName = this.parentObj.getParentKey() + '.' + this.propName + index;\n }\n return propName;\n };\n return ChildProperty;\n}());\nexport { ChildProperty };\n","import { createElement } from './dom';\nimport { getValue, containerObject, setValue, isNullOrUndefined } from './util';\nexport var componentList = ['grid', 'pivotview', 'treegrid', 'spreadsheet', 'rangeNavigator', 'DocumentEditor', 'listbox', 'PdfViewer', 'richtexteditor', 'DashboardLayout', 'chart', 'stockChart', 'circulargauge', 'diagram', 'heatmap', 'lineargauge', 'maps', 'smithchart', 'barcode', 'sparkline', 'treemap', 'bulletChart', 'kanban', 'daterangepicker', 'schedule', 'gantt', 'signature', 'query-builder', 'drop-down-tree', 'carousel', 'filemanager', 'uploader', 'accordion', 'tab', 'treeview'];\nvar bypassKey = [115, 121, 110, 99, 102, 117, 115, 105,\n 111, 110, 46, 105, 115, 76, 105, 99, 86, 97, 108,\n 105, 100, 97, 116, 101, 100];\nvar accountURL;\n/**\n * License validation module\n *\n * @private\n */\nvar LicenseValidator = /** @class */ (function () {\n function LicenseValidator(key) {\n this.isValidated = false;\n this.isLicensed = true;\n this.version = '20.4';\n this.platform = /JavaScript|ASPNET|ASPNETCORE|ASPNETMVC|FileFormats/i;\n this.errors = {\n noLicense: 'This application was built using a trial version of Syncfusion Essential Studio.' +\n ' To remove the license validation message permanently, a valid license key must be included.',\n trailExpired: 'This application was built using a trial version of Syncfusion Essential Studio.' +\n ' To remove the license validation message permanently, a valid license key must be included.',\n versionMismatched: 'The included Syncfusion license key is invalid.',\n platformMismatched: 'The included Syncfusion license key is invalid.',\n invalidKey: 'The included Syncfusion license key is invalid.'\n };\n /**\n * To manage licensing operation.\n */\n this.manager = (function () {\n var licKey = null;\n /**\n * Sets the license key.\n *\n * @param {string} key - Specifies the license key.\n * @returns {void}\n */\n function set(key) { licKey = key; }\n /**\n * Gets the license key.\n *\n * @returns {string} -Gets the license key.\n */\n function get() { return licKey; }\n return {\n setKey: set,\n getKey: get\n };\n })();\n /**\n * To manage npx licensing operation.\n */\n this.npxManager = (function () {\n var npxLicKey = 'npxKeyReplace';\n /**\n * Gets the license key.\n *\n * @returns {string} - Gets the license key.\n */\n function get() { return npxLicKey; }\n return {\n getKey: get\n };\n })();\n this.manager.setKey(key);\n }\n /**\n * To validate the provided license key.\n */\n LicenseValidator.prototype.validate = function () {\n var contentKey = [115, 121, 110, 99, 102, 117, 115, 105, 111, 110, 46,\n 108, 105, 99, 101, 110, 115, 101, 67, 111, 110, 116, 101, 110, 116];\n var URLKey = [115, 121, 110, 99, 102, 117, 115, 105, 111, 110, 46,\n 99, 108, 97, 105, 109, 65, 99, 99, 111, 117, 110, 116, 85, 82, 76];\n if (!this.isValidated && (containerObject && !getValue(convertToChar(bypassKey), containerObject) && !getValue('Blazor', containerObject))) {\n var validateMsg = void 0;\n var validateURL = void 0;\n if ((this.manager && this.manager.getKey()) || (this.npxManager && this.npxManager.getKey() !== 'npxKeyReplace')) {\n var result = this.getInfoFromKey();\n if (result && result.length) {\n for (var _i = 0, result_1 = result; _i < result_1.length; _i++) {\n var res = result_1[_i];\n if (!this.platform.test(res.platform) || res.invalidPlatform) {\n validateMsg = this.errors.platformMismatched;\n }\n else if (res.version.indexOf(this.version) === -1) {\n validateMsg = this.errors.versionMismatched;\n validateMsg = validateMsg.replace('##LicenseVersion', res.version);\n validateMsg = validateMsg.replace('##Requireversion', this.version + '.x');\n }\n else if (res.expiryDate) {\n var expDate = new Date(res.expiryDate);\n var currDate = new Date();\n if (expDate !== currDate && expDate < currDate) {\n validateMsg = this.errors.trailExpired;\n }\n else {\n break;\n }\n }\n }\n }\n else {\n validateMsg = this.errors.invalidKey;\n }\n }\n else {\n var licenseContent = getValue(convertToChar(contentKey), containerObject);\n validateURL = getValue(convertToChar(URLKey), containerObject);\n if (licenseContent && licenseContent !== '') {\n validateMsg = licenseContent;\n }\n else {\n validateMsg = this.errors.noLicense;\n }\n }\n if (validateMsg && typeof document !== 'undefined' && !isNullOrUndefined(document)) {\n accountURL = (validateURL && validateURL !== '') ? validateURL : \"https://www.syncfusion.com/account/claim-license-key?pl=SmF2YVNjcmlwdA==&vs=MjAuNA==\";\n var errorDiv = createElement('div', {\n innerHTML: \"\" + validateMsg + ' ' + 'Claim your free account'\n });\n errorDiv.setAttribute('style', \"position: fixed;\\n top: 10px;\\n left: 10px;\\n right: 10px;\\n font-size: 14px;\\n background: #EEF2FF;\\n color: #222222;\\n z-index: 999999999;\\n text-align: left;\\n border: 1px solid #EEEEEE;\\n padding: 10px 11px 10px 50px;\\n border-radius: 8px;\\n font-family: Helvetica Neue, Helvetica, Arial;\");\n document.body.appendChild(errorDiv);\n this.isLicensed = false;\n }\n this.isValidated = true;\n setValue(convertToChar(bypassKey), this.isValidated, containerObject);\n }\n return this.isLicensed;\n };\n LicenseValidator.prototype.getDecryptedData = function (key) {\n try {\n return atob(key);\n }\n catch (error) {\n return '';\n }\n };\n /**\n * Get license information from key.\n *\n * @returns {IValidator} - Get license information from key.\n */\n LicenseValidator.prototype.getInfoFromKey = function () {\n try {\n var licKey = '';\n var pkey = [5439488, 7929856, 5111808, 6488064, 4587520, 7667712, 5439488,\n 6881280, 5177344, 7208960, 4194304, 4456448, 6619136, 7733248, 5242880, 7077888,\n 6356992, 7602176, 4587520, 7274496, 7471104, 7143424];\n var decryptedStr = [];\n var resultArray = [];\n var invalidPlatform = false;\n var isNpxKey = false;\n if (this.manager.getKey()) {\n licKey = this.manager.getKey();\n }\n else {\n isNpxKey = true;\n licKey = this.npxManager.getKey().split('npxKeyReplace')[1];\n }\n var licKeySplit = licKey.split(';');\n for (var _i = 0, licKeySplit_1 = licKeySplit; _i < licKeySplit_1.length; _i++) {\n var lKey = licKeySplit_1[_i];\n var decodeStr = this.getDecryptedData(lKey);\n if (!decodeStr) {\n continue;\n }\n var k = 0;\n var buffr = '';\n if (!isNpxKey) {\n for (var i = 0; i < decodeStr.length; i++, k++) {\n if (k === pkey.length) {\n k = 0;\n }\n var c = decodeStr.charCodeAt(i);\n buffr += String.fromCharCode(c ^ (pkey[parseInt(k.toString(), 10)] >> 16));\n }\n }\n else {\n var charKey = decodeStr[decodeStr.length - 1];\n var decryptedKey = [];\n for (var i = 0; i < decodeStr.length; i++) {\n decryptedKey[parseInt(i.toString(), 10)] = decodeStr[parseInt(i.toString(), 10)].charCodeAt(0) - charKey.charCodeAt(0);\n }\n for (var i = 0; i < decryptedKey.length; i++) {\n buffr += String.fromCharCode(decryptedKey[parseInt(i.toString(), 10)]);\n }\n }\n if (this.platform.test(buffr)) {\n decryptedStr = buffr.split(';');\n invalidPlatform = false;\n // checked the length to verify the key in proper strucutre\n if (decryptedStr.length > 3) {\n resultArray.push({ platform: decryptedStr[0],\n version: decryptedStr[1],\n expiryDate: decryptedStr[2] });\n }\n }\n else if (buffr && buffr.split(';').length > 3) {\n invalidPlatform = true;\n }\n }\n if (invalidPlatform && !resultArray.length) {\n return [{ invalidPlatform: invalidPlatform }];\n }\n else {\n return resultArray.length ? resultArray : null;\n }\n }\n catch (error) {\n return null;\n }\n };\n return LicenseValidator;\n}());\nvar licenseValidator = new LicenseValidator();\n/**\n * Converts the given number to characters.\n *\n * @param {number} cArr - Specifies the license key as number.\n * @returns {string}\n */\nfunction convertToChar(cArr) {\n var ret = '';\n for (var _i = 0, cArr_1 = cArr; _i < cArr_1.length; _i++) {\n var arr = cArr_1[_i];\n ret += String.fromCharCode(arr);\n }\n return ret;\n}\n/**\n * To set license key.\n *\n * @param {string} key - license key\n * @returns {void}\n */\nexport function registerLicense(key) {\n licenseValidator = new LicenseValidator(key);\n}\nexport var validateLicense = function (key) {\n if (key) {\n registerLicense(key);\n }\n return licenseValidator.validate();\n};\nexport var getVersion = function () {\n return licenseValidator.version;\n};\n// Method for create overlay over the sample\nexport var createLicenseOverlay = function () {\n var bannerTemplate = \"\\n \\n
\\n
\\n
\\n
\\n
Claim your FREE account and get a key in less than a minute
\\n
\\n - Access to a 30-day free trial of any of our products.
\\n - Access to 24x5 support by developers via the support tickets, forum, feature & feedback page and chat.
\\n - 200+ ebooks on the latest technologies, industry trends, and research topics.\\n
\\n - Largest collection of over 7,000 flat and wireframe icons for free with Syncfusion Metro Studio.
\\n - Free and unlimited access to Syncfusion technical blogs and whitepapers.
\\n
\\n
Syncfusion is trusted by 29,000+ businesses worldwide
\\n
\\n
Claim your FREE account\\n
\\n
\\n
Draggable
\n * \n * ```\n */\nvar Draggable = /** @class */ (function (_super) {\n __extends(Draggable, _super);\n function Draggable(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.dragLimit = Draggable_1.getDefaultPosition();\n _this.borderWidth = Draggable_1.getDefaultPosition();\n _this.padding = Draggable_1.getDefaultPosition();\n _this.diffX = 0;\n _this.prevLeft = 0;\n _this.prevTop = 0;\n _this.dragProcessStarted = false;\n _this.eleTop = 0;\n /* eslint-disable @typescript-eslint/no-explicit-any */\n _this.tapHoldTimer = 0;\n _this.externalInitialize = false;\n _this.diffY = 0;\n _this.parentScrollX = 0;\n _this.parentScrollY = 0;\n _this.droppables = {};\n _this.bind();\n return _this;\n }\n Draggable_1 = Draggable;\n Draggable.prototype.bind = function () {\n this.toggleEvents();\n if (Browser.isIE) {\n addClass([this.element], 'e-block-touch');\n }\n this.droppables[this.scope] = {};\n };\n Draggable.getDefaultPosition = function () {\n return extend({}, defaultPosition);\n };\n Draggable.prototype.toggleEvents = function (isUnWire) {\n var ele;\n if (!isUndefined(this.handle)) {\n ele = select(this.handle, this.element);\n }\n var handler = (this.enableTapHold && Browser.isDevice && Browser.isTouch) ? this.mobileInitialize : this.initialize;\n if (isUnWire) {\n EventHandler.remove(ele || this.element, Browser.touchStartEvent, handler);\n }\n else {\n EventHandler.add(ele || this.element, Browser.touchStartEvent, handler, this);\n }\n };\n /* istanbul ignore next */\n Draggable.prototype.mobileInitialize = function (evt) {\n var _this = this;\n var target = evt.currentTarget;\n this.tapHoldTimer = setTimeout(function () {\n _this.externalInitialize = true;\n _this.removeTapholdTimer();\n _this.initialize(evt, target);\n }, this.tapHoldThreshold);\n EventHandler.add(document, Browser.touchMoveEvent, this.removeTapholdTimer, this);\n EventHandler.add(document, Browser.touchEndEvent, this.removeTapholdTimer, this);\n };\n /* istanbul ignore next */\n Draggable.prototype.removeTapholdTimer = function () {\n clearTimeout(this.tapHoldTimer);\n EventHandler.remove(document, Browser.touchMoveEvent, this.removeTapholdTimer);\n EventHandler.remove(document, Browser.touchEndEvent, this.removeTapholdTimer);\n };\n /* istanbul ignore next */\n Draggable.prototype.getScrollableParent = function (element, axis) {\n var scroll = { 'vertical': 'scrollHeight', 'horizontal': 'scrollWidth' };\n var client = { 'vertical': 'clientHeight', 'horizontal': 'clientWidth' };\n if (isNullOrUndefined(element)) {\n return null;\n }\n if (element[scroll[\"\" + axis]] > element[client[\"\" + axis]]) {\n if (axis === 'vertical' ? element.scrollTop > 0 : element.scrollLeft > 0) {\n if (axis === 'vertical') {\n this.parentScrollY = this.parentScrollY +\n (this.parentScrollY === 0 ? element.scrollTop : element.scrollTop - this.parentScrollY);\n this.tempScrollHeight = element.scrollHeight;\n }\n else {\n this.parentScrollX = this.parentScrollX +\n (this.parentScrollX === 0 ? element.scrollLeft : element.scrollLeft - this.parentScrollX);\n this.tempScrollWidth = element.scrollWidth;\n }\n if (!isNullOrUndefined(element)) {\n return this.getScrollableParent(element.parentNode, axis);\n }\n else {\n return element;\n }\n }\n else {\n return this.getScrollableParent(element.parentNode, axis);\n }\n }\n else {\n return this.getScrollableParent(element.parentNode, axis);\n }\n };\n Draggable.prototype.getScrollableValues = function () {\n this.parentScrollX = 0;\n this.parentScrollY = 0;\n var isModalDialog = this.element.classList.contains('e-dialog') && this.element.classList.contains('e-dlg-modal');\n var verticalScrollParent = this.getScrollableParent(this.element.parentNode, 'vertical');\n var horizontalScrollParent = this.getScrollableParent(this.element.parentNode, 'horizontal');\n };\n Draggable.prototype.initialize = function (evt, curTarget) {\n this.currentStateTarget = evt.target;\n if (this.isDragStarted()) {\n return;\n }\n else {\n this.isDragStarted(true);\n this.externalInitialize = false;\n }\n this.target = (evt.currentTarget || curTarget);\n this.dragProcessStarted = false;\n if (this.abort) {\n /* tslint:disable no-any */\n var abortSelectors = this.abort;\n if (typeof abortSelectors === 'string') {\n abortSelectors = [abortSelectors];\n }\n for (var i = 0; i < abortSelectors.length; i++) {\n if (!isNullOrUndefined(closest(evt.target, abortSelectors[parseInt(i.toString(), 10)]))) {\n /* istanbul ignore next */\n if (this.isDragStarted()) {\n this.isDragStarted(true);\n }\n return;\n }\n }\n }\n if (this.preventDefault && !isUndefined(evt.changedTouches) && evt.type !== 'touchstart') {\n evt.preventDefault();\n }\n this.element.setAttribute('aria-grabbed', 'true');\n var intCoord = this.getCoordinates(evt);\n this.initialPosition = { x: intCoord.pageX, y: intCoord.pageY };\n if (!this.clone) {\n var pos = this.element.getBoundingClientRect();\n this.getScrollableValues();\n if (evt.clientX === evt.pageX) {\n this.parentScrollX = 0;\n }\n if (evt.clientY === evt.pageY) {\n this.parentScrollY = 0;\n }\n this.relativeXPosition = intCoord.pageX - (pos.left + this.parentScrollX);\n this.relativeYPosition = intCoord.pageY - (pos.top + this.parentScrollY);\n }\n if (this.externalInitialize) {\n this.intDragStart(evt);\n }\n else {\n EventHandler.add(document, Browser.touchMoveEvent, this.intDragStart, this);\n EventHandler.add(document, Browser.touchEndEvent, this.intDestroy, this);\n }\n this.toggleEvents(true);\n if (evt.type !== 'touchstart' && this.isPreventSelect) {\n document.body.classList.add('e-prevent-select');\n }\n this.externalInitialize = false;\n EventHandler.trigger(document.documentElement, Browser.touchStartEvent, evt);\n };\n Draggable.prototype.intDragStart = function (evt) {\n this.removeTapholdTimer();\n var isChangeTouch = !isUndefined(evt.changedTouches);\n if (isChangeTouch && (evt.changedTouches.length !== 1)) {\n return;\n }\n var intCordinate = this.getCoordinates(evt);\n var pos;\n var styleProp = getComputedStyle(this.element);\n this.margin = {\n left: parseInt(styleProp.marginLeft, 10),\n top: parseInt(styleProp.marginTop, 10),\n right: parseInt(styleProp.marginRight, 10),\n bottom: parseInt(styleProp.marginBottom, 10)\n };\n var element = this.element;\n if (this.clone && this.dragTarget) {\n var intClosest = closest(evt.target, this.dragTarget);\n if (!isNullOrUndefined(intClosest)) {\n element = intClosest;\n }\n }\n /* istanbul ignore next */\n if (this.isReplaceDragEle) {\n element = this.currentStateCheck(evt.target, element);\n }\n this.offset = this.calculateParentPosition(element);\n this.position = this.getMousePosition(evt, this.isDragScroll);\n var x = this.initialPosition.x - intCordinate.pageX;\n var y = this.initialPosition.y - intCordinate.pageY;\n var distance = Math.sqrt((x * x) + (y * y));\n if ((distance >= this.distance || this.externalInitialize)) {\n var ele = this.getHelperElement(evt);\n if (!ele || isNullOrUndefined(ele)) {\n return;\n }\n if (isChangeTouch) {\n evt.preventDefault();\n }\n var dragTargetElement = this.helperElement = ele;\n this.parentClientRect = this.calculateParentPosition(dragTargetElement.offsetParent);\n if (this.dragStart) {\n var curTarget = this.getProperTargetElement(evt);\n var args = {\n event: evt,\n element: element,\n target: curTarget,\n bindEvents: isBlazor() ? this.bindDragEvents.bind(this) : null,\n dragElement: dragTargetElement\n };\n this.trigger('dragStart', args);\n }\n if (this.dragArea) {\n this.setDragArea();\n }\n else {\n this.dragLimit = { left: 0, right: 0, bottom: 0, top: 0 };\n this.borderWidth = { top: 0, left: 0 };\n }\n pos = { left: this.position.left - this.parentClientRect.left, top: this.position.top - this.parentClientRect.top };\n if (this.clone && !this.enableTailMode) {\n this.diffX = this.position.left - this.offset.left;\n this.diffY = this.position.top - this.offset.top;\n }\n this.getScrollableValues();\n // when drag element has margin-top\n var styles = getComputedStyle(element);\n var marginTop = parseFloat(styles.marginTop);\n /* istanbul ignore next */\n if (this.clone && marginTop !== 0) {\n pos.top += marginTop;\n }\n this.eleTop = !isNaN(parseFloat(styles.top)) ? parseFloat(styles.top) - this.offset.top : 0;\n /* istanbul ignore next */\n // if (this.eleTop > 0) {\n // pos.top += this.eleTop;\n // }\n if (this.enableScrollHandler && !this.clone) {\n pos.top -= this.parentScrollY;\n pos.left -= this.parentScrollX;\n }\n var posValue = this.getProcessedPositionValue({\n top: (pos.top - this.diffY) + 'px',\n left: (pos.left - this.diffX) + 'px'\n });\n if (this.dragArea && typeof this.dragArea !== 'string' && this.dragArea.classList.contains('e-kanban-content') && this.dragArea.style.position === 'relative') {\n pos.top += this.dragArea.scrollTop;\n }\n this.dragElePosition = { top: pos.top, left: pos.left };\n setStyleAttribute(dragTargetElement, this.getDragPosition({ position: 'absolute', left: posValue.left, top: posValue.top }));\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDragStart);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDestroy);\n if (!isBlazor()) {\n this.bindDragEvents(dragTargetElement);\n }\n }\n };\n Draggable.prototype.bindDragEvents = function (dragTargetElement) {\n if (isVisible(dragTargetElement)) {\n EventHandler.add(document, Browser.touchMoveEvent, this.intDrag, this);\n EventHandler.add(document, Browser.touchEndEvent, this.intDragStop, this);\n this.setGlobalDroppables(false, this.element, dragTargetElement);\n }\n else {\n this.toggleEvents();\n document.body.classList.remove('e-prevent-select');\n }\n };\n Draggable.prototype.elementInViewport = function (el) {\n this.top = el.offsetTop;\n this.left = el.offsetLeft;\n this.width = el.offsetWidth;\n this.height = el.offsetHeight;\n while (el.offsetParent) {\n el = el.offsetParent;\n this.top += el.offsetTop;\n this.left += el.offsetLeft;\n }\n return (this.top >= window.pageYOffset &&\n this.left >= window.pageXOffset &&\n (this.top + this.height) <= (window.pageYOffset + window.innerHeight) &&\n (this.left + this.width) <= (window.pageXOffset + window.innerWidth));\n };\n Draggable.prototype.getProcessedPositionValue = function (value) {\n if (this.queryPositionInfo) {\n return this.queryPositionInfo(value);\n }\n return value;\n };\n Draggable.prototype.calculateParentPosition = function (ele) {\n if (isNullOrUndefined(ele)) {\n return { left: 0, top: 0 };\n }\n var rect = ele.getBoundingClientRect();\n var style = getComputedStyle(ele);\n return {\n left: (rect.left + window.pageXOffset) - parseInt(style.marginLeft, 10),\n top: (rect.top + window.pageYOffset) - parseInt(style.marginTop, 10)\n };\n };\n // tslint:disable-next-line:max-func-body-length\n Draggable.prototype.intDrag = function (evt) {\n if (!isUndefined(evt.changedTouches) && (evt.changedTouches.length !== 1)) {\n return;\n }\n if (this.clone && evt.changedTouches && Browser.isDevice && Browser.isTouch) {\n evt.preventDefault();\n }\n var left;\n var top;\n this.position = this.getMousePosition(evt, this.isDragScroll);\n var docHeight = this.getDocumentWidthHeight('Height');\n if (docHeight < this.position.top) {\n this.position.top = docHeight;\n }\n var docWidth = this.getDocumentWidthHeight('Width');\n if (docWidth < this.position.left) {\n this.position.left = docWidth;\n }\n if (this.drag) {\n var curTarget = this.getProperTargetElement(evt);\n this.trigger('drag', { event: evt, element: this.element, target: curTarget });\n }\n var eleObj = this.checkTargetElement(evt);\n if (eleObj.target && eleObj.instance) {\n /* tslint:disable no-any */\n var flag = true;\n if (this.hoverObject) {\n if (this.hoverObject.instance !== eleObj.instance) {\n this.triggerOutFunction(evt, eleObj);\n }\n else {\n flag = false;\n }\n }\n if (flag) {\n eleObj.instance.dragData[this.scope] = this.droppables[this.scope];\n eleObj.instance.intOver(evt, eleObj.target);\n this.hoverObject = eleObj;\n }\n }\n else if (this.hoverObject) {\n this.triggerOutFunction(evt, eleObj);\n }\n var helperElement = this.droppables[this.scope].helper;\n this.parentClientRect = this.calculateParentPosition(this.helperElement.offsetParent);\n var tLeft = this.parentClientRect.left;\n var tTop = this.parentClientRect.top;\n var intCoord = this.getCoordinates(evt);\n var pagex = intCoord.pageX;\n var pagey = intCoord.pageY;\n var dLeft = this.position.left - this.diffX;\n var dTop = this.position.top - this.diffY;\n var styles = getComputedStyle(helperElement);\n if (this.dragArea) {\n if (this.pageX !== pagex || this.skipDistanceCheck) {\n var helperWidth = helperElement.offsetWidth + (parseFloat(styles.marginLeft)\n + parseFloat(styles.marginRight));\n if (this.dragLimit.left > dLeft && dLeft > 0) {\n left = this.dragLimit.left;\n }\n else if (this.dragLimit.right + window.pageXOffset < dLeft + helperWidth && dLeft > 0) {\n left = dLeft - (dLeft - this.dragLimit.right) + window.pageXOffset - helperWidth;\n }\n else {\n left = dLeft < 0 ? this.dragLimit.left : dLeft;\n }\n }\n if (this.pageY !== pagey || this.skipDistanceCheck) {\n var helperHeight = helperElement.offsetHeight + (parseFloat(styles.marginTop)\n + parseFloat(styles.marginBottom));\n if (this.dragLimit.top > dTop && dTop > 0) {\n top = this.dragLimit.top;\n }\n else if (this.dragLimit.bottom + window.pageYOffset < dTop + helperHeight && dTop > 0) {\n top = dTop - (dTop - this.dragLimit.bottom) + window.pageYOffset - helperHeight;\n }\n else {\n top = dTop < 0 ? this.dragLimit.top : dTop;\n }\n }\n }\n else {\n left = dLeft;\n top = dTop;\n }\n var iTop = tTop + this.borderWidth.top;\n var iLeft = tLeft + this.borderWidth.left;\n if (this.dragProcessStarted) {\n if (isNullOrUndefined(top)) {\n top = this.prevTop;\n }\n if (isNullOrUndefined(left)) {\n left = this.prevLeft;\n }\n }\n var draEleTop;\n var draEleLeft;\n if (this.helperElement.classList.contains('e-treeview')) {\n if (this.dragArea) {\n this.dragLimit.top = this.clone ? this.dragLimit.top : 0;\n draEleTop = (top - iTop) < 0 ? this.dragLimit.top : (top - this.borderWidth.top);\n draEleLeft = (left - iLeft) < 0 ? this.dragLimit.left : (left - this.borderWidth.left);\n }\n else {\n draEleTop = top - this.borderWidth.top;\n draEleLeft = left - this.borderWidth.left;\n }\n }\n else {\n if (this.dragArea) {\n this.dragLimit.top = this.clone ? this.dragLimit.top : 0;\n draEleTop = (top - iTop) < 0 ? this.dragLimit.top : (top - iTop);\n draEleLeft = (left - iLeft) < 0 ? this.dragElePosition.left : (left - iLeft);\n }\n else {\n draEleTop = top - iTop;\n draEleLeft = left - iLeft;\n }\n }\n var marginTop = parseFloat(getComputedStyle(this.element).marginTop);\n // when drag-element has margin-top\n /* istanbul ignore next */\n if (marginTop > 0) {\n if (this.clone) {\n draEleTop += marginTop;\n if (dTop < 0) {\n if ((marginTop + dTop) >= 0) {\n draEleTop = marginTop + dTop;\n }\n else {\n draEleTop -= marginTop;\n }\n }\n draEleTop = (this.dragLimit.bottom < draEleTop) ? this.dragLimit.bottom : draEleTop;\n }\n if ((top - iTop) < 0) {\n if (dTop + marginTop + (helperElement.offsetHeight - iTop) >= 0) {\n var tempDraEleTop = this.dragLimit.top + dTop - iTop;\n if ((tempDraEleTop + marginTop + iTop) < 0) {\n draEleTop -= marginTop + iTop;\n }\n else {\n draEleTop = tempDraEleTop;\n }\n }\n else {\n draEleTop -= marginTop + iTop;\n }\n }\n }\n if (this.dragArea && this.helperElement.classList.contains('e-treeview')) {\n var helperHeight = helperElement.offsetHeight + (parseFloat(styles.marginTop)\n + parseFloat(styles.marginBottom));\n draEleTop = (draEleTop + helperHeight) > this.dragLimit.bottom ? (this.dragLimit.bottom - helperHeight) : draEleTop;\n }\n /* istanbul ignore next */\n // if(this.eleTop > 0) {\n // draEleTop += this.eleTop;\n // }\n if (this.enableScrollHandler && !this.clone) {\n draEleTop -= this.parentScrollY;\n draEleLeft -= this.parentScrollX;\n }\n if (this.dragArea && typeof this.dragArea !== 'string' && this.dragArea.classList.contains('e-kanban-content') && this.dragArea.style.position === 'relative') {\n draEleTop += this.dragArea.scrollTop;\n }\n var dragValue = this.getProcessedPositionValue({ top: draEleTop + 'px', left: draEleLeft + 'px' });\n setStyleAttribute(helperElement, this.getDragPosition(dragValue));\n if (!this.elementInViewport(helperElement) && this.enableAutoScroll && !this.helperElement.classList.contains('e-treeview')) {\n this.helperElement.scrollIntoView();\n }\n var elements = document.querySelectorAll(':hover');\n if (this.enableAutoScroll && this.helperElement.classList.contains('e-treeview')) {\n if (elements.length === 0) {\n elements = this.getPathElements(evt);\n }\n /* tslint:disable no-any */\n var scrollParent = this.getScrollParent(elements, false);\n if (this.elementInViewport(this.helperElement)) {\n this.getScrollPosition(scrollParent, draEleTop);\n }\n else if (!this.elementInViewport(this.helperElement)) {\n elements = [].slice.call(document.querySelectorAll(':hover'));\n if (elements.length === 0) {\n elements = this.getPathElements(evt);\n }\n scrollParent = this.getScrollParent(elements, true);\n this.getScrollPosition(scrollParent, draEleTop);\n }\n }\n this.dragProcessStarted = true;\n this.prevLeft = left;\n this.prevTop = top;\n this.position.left = left;\n this.position.top = top;\n this.pageX = pagex;\n this.pageY = pagey;\n };\n /* tslint:disable no-any */\n Draggable.prototype.getScrollParent = function (node, reverse) {\n /* tslint:disable no-any */\n var nodeEl = reverse ? node.reverse() : node;\n var hasScroll;\n for (var i = nodeEl.length - 1; i >= 0; i--) {\n hasScroll = window.getComputedStyle(nodeEl[parseInt(i.toString(), 10)])['overflow-y'];\n if ((hasScroll === 'auto' || hasScroll === 'scroll')\n && nodeEl[parseInt(i.toString(), 10)].scrollHeight > nodeEl[parseInt(i.toString(), 10)].clientHeight) {\n return nodeEl[parseInt(i.toString(), 10)];\n }\n }\n hasScroll = window.getComputedStyle(document.scrollingElement)['overflow-y'];\n if (hasScroll === 'visible') {\n document.scrollingElement.style.overflow = 'auto';\n return document.scrollingElement;\n }\n };\n Draggable.prototype.getScrollPosition = function (nodeEle, draEleTop) {\n if (nodeEle && nodeEle === document.scrollingElement) {\n if ((nodeEle.clientHeight + document.scrollingElement.scrollTop - this.helperElement.clientHeight) < draEleTop\n && nodeEle.getBoundingClientRect().height + this.parentClientRect.top > draEleTop) {\n nodeEle.scrollTop += this.helperElement.clientHeight;\n }\n else if (nodeEle.scrollTop > draEleTop - this.helperElement.clientHeight) {\n nodeEle.scrollTop -= this.helperElement.clientHeight;\n }\n }\n else if (nodeEle && nodeEle !== document.scrollingElement) {\n if ((nodeEle.clientHeight + nodeEle.getBoundingClientRect().top - this.helperElement.clientHeight + document.scrollingElement.scrollTop) < draEleTop) {\n nodeEle.scrollTop += this.helperElement.clientHeight;\n }\n else if (nodeEle.getBoundingClientRect().top > (draEleTop - this.helperElement.clientHeight - document.scrollingElement.scrollTop)) {\n nodeEle.scrollTop -= this.helperElement.clientHeight;\n }\n }\n };\n Draggable.prototype.getPathElements = function (evt) {\n var elementTop = evt.clientX > 0 ? evt.clientX : 0;\n var elementLeft = evt.clientY > 0 ? evt.clientY : 0;\n return document.elementsFromPoint(elementTop, elementLeft);\n };\n Draggable.prototype.triggerOutFunction = function (evt, eleObj) {\n this.hoverObject.instance.intOut(evt, eleObj.target);\n this.hoverObject.instance.dragData[this.scope] = null;\n this.hoverObject = null;\n };\n Draggable.prototype.getDragPosition = function (dragValue) {\n var temp = extend({}, dragValue);\n if (this.axis) {\n if (this.axis === 'x') {\n delete temp.top;\n }\n else if (this.axis === 'y') {\n delete temp.left;\n }\n }\n return temp;\n };\n Draggable.prototype.getDocumentWidthHeight = function (str) {\n var docBody = document.body;\n var docEle = document.documentElement;\n var returnValue = Math.max(docBody['scroll' + str], docEle['scroll' + str], docBody['offset' + str], docEle['offset' + str], docEle['client' + str]);\n return returnValue;\n };\n Draggable.prototype.intDragStop = function (evt) {\n this.dragProcessStarted = false;\n if (!isUndefined(evt.changedTouches) && (evt.changedTouches.length !== 1)) {\n return;\n }\n var type = ['touchend', 'pointerup', 'mouseup'];\n if (type.indexOf(evt.type) !== -1) {\n if (this.dragStop) {\n var curTarget = this.getProperTargetElement(evt);\n this.trigger('dragStop', { event: evt, element: this.element, target: curTarget, helper: this.helperElement });\n }\n this.intDestroy(evt);\n }\n else {\n this.element.setAttribute('aria-grabbed', 'false');\n }\n var eleObj = this.checkTargetElement(evt);\n if (eleObj.target && eleObj.instance) {\n eleObj.instance.dragStopCalled = true;\n eleObj.instance.dragData[this.scope] = this.droppables[this.scope];\n eleObj.instance.intDrop(evt, eleObj.target);\n }\n this.setGlobalDroppables(true);\n document.body.classList.remove('e-prevent-select');\n };\n /**\n * @private\n */\n Draggable.prototype.intDestroy = function (evt) {\n this.dragProcessStarted = false;\n this.toggleEvents();\n document.body.classList.remove('e-prevent-select');\n this.element.setAttribute('aria-grabbed', 'false');\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDragStart);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDragStop);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDestroy);\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDrag);\n if (this.isDragStarted()) {\n this.isDragStarted(true);\n }\n };\n // triggers when property changed\n Draggable.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Draggable.prototype.getModuleName = function () {\n return 'draggable';\n };\n Draggable.prototype.isDragStarted = function (change) {\n if (change) {\n isDraggedObject.isDragged = !isDraggedObject.isDragged;\n }\n return isDraggedObject.isDragged;\n };\n Draggable.prototype.setDragArea = function () {\n var eleWidthBound;\n var eleHeightBound;\n var top = 0;\n var left = 0;\n var ele;\n var type = typeof this.dragArea;\n if (type === 'string') {\n ele = select(this.dragArea);\n }\n else {\n ele = this.dragArea;\n }\n if (ele) {\n var elementArea = ele.getBoundingClientRect();\n eleWidthBound = ele.scrollWidth ? ele.scrollWidth : elementArea.right - elementArea.left;\n eleHeightBound = ele.scrollHeight ? (this.dragArea && !isNullOrUndefined(this.helperElement) && this.helperElement.classList.contains('e-treeview')) ? ele.clientHeight : ele.scrollHeight : elementArea.bottom - elementArea.top;\n var keys = ['Top', 'Left', 'Bottom', 'Right'];\n var styles = getComputedStyle(ele);\n for (var i = 0; i < keys.length; i++) {\n var key = keys[parseInt(i.toString(), 10)];\n var tborder = styles['border' + key + 'Width'];\n var tpadding = styles['padding' + key];\n var lowerKey = key.toLowerCase();\n this.borderWidth[\"\" + lowerKey] = isNaN(parseFloat(tborder)) ? 0 : parseFloat(tborder);\n this.padding[\"\" + lowerKey] = isNaN(parseFloat(tpadding)) ? 0 : parseFloat(tpadding);\n }\n if (this.dragArea && !isNullOrUndefined(this.helperElement) && this.helperElement.classList.contains('e-treeview')) {\n top = elementArea.top + document.scrollingElement.scrollTop;\n }\n else {\n top = elementArea.top;\n }\n left = elementArea.left;\n this.dragLimit.left = left + this.borderWidth.left + this.padding.left;\n this.dragLimit.top = ele.offsetTop + this.borderWidth.top + this.padding.top;\n this.dragLimit.right = left + eleWidthBound - (this.borderWidth.right + this.padding.right);\n this.dragLimit.bottom = top + eleHeightBound - (this.borderWidth.bottom + this.padding.bottom);\n }\n };\n Draggable.prototype.getProperTargetElement = function (evt) {\n var intCoord = this.getCoordinates(evt);\n var ele;\n var prevStyle = this.helperElement.style.pointerEvents || '';\n var isPointer = evt.type.indexOf('pointer') !== -1 && Browser.info.name === 'safari' && parseInt(Browser.info.version) > 12;\n if (compareElementParent(evt.target, this.helperElement) || evt.type.indexOf('touch') !== -1 || isPointer) {\n this.helperElement.style.pointerEvents = 'none';\n ele = document.elementFromPoint(intCoord.clientX, intCoord.clientY);\n this.helperElement.style.pointerEvents = prevStyle;\n }\n else {\n ele = evt.target;\n }\n return ele;\n };\n /* istanbul ignore next */\n Draggable.prototype.currentStateCheck = function (ele, oldEle) {\n var elem;\n if (!isNullOrUndefined(this.currentStateTarget) && this.currentStateTarget !== ele) {\n elem = this.currentStateTarget;\n }\n else {\n elem = !isNullOrUndefined(oldEle) ? oldEle : ele;\n }\n return elem;\n };\n Draggable.prototype.getMousePosition = function (evt, isdragscroll) {\n /* tslint:disable no-any */\n var dragEle = evt.srcElement !== undefined ? evt.srcElement : evt.target;\n var intCoord = this.getCoordinates(evt);\n var pageX;\n var pageY;\n var isOffsetParent = isNullOrUndefined(dragEle.offsetParent);\n /* istanbul ignore next */\n if (isdragscroll) {\n pageX = this.clone ? intCoord.pageX :\n (intCoord.pageX + (isOffsetParent ? 0 : dragEle.offsetParent.scrollLeft)) - this.relativeXPosition;\n pageY = this.clone ? intCoord.pageY :\n (intCoord.pageY + (isOffsetParent ? 0 : dragEle.offsetParent.scrollTop)) - this.relativeYPosition;\n }\n else {\n pageX = this.clone ? intCoord.pageX : (intCoord.pageX + window.pageXOffset) - this.relativeXPosition;\n pageY = this.clone ? intCoord.pageY : (intCoord.pageY + window.pageYOffset) - this.relativeYPosition;\n }\n if (this.element && this.element.classList.length > 0 && this.element.classList.value.indexOf(\"e-dialog\") === -1 && document.scrollingElement) {\n var isVerticalScroll = document.scrollingElement.scrollHeight > 0 && document.scrollingElement.scrollHeight > document.scrollingElement.clientHeight && document.scrollingElement.scrollTop > 0;\n var isHorrizontalScroll = document.scrollingElement.scrollWidth > 0 && document.scrollingElement.scrollWidth > document.scrollingElement.clientWidth && document.scrollingElement.scrollLeft > 0;\n pageX = isHorrizontalScroll ? pageX - document.scrollingElement.scrollLeft : pageX;\n pageY = isVerticalScroll ? pageY - document.scrollingElement.scrollTop : pageY;\n }\n return {\n left: pageX - (this.margin.left + this.cursorAt.left),\n top: pageY - (this.margin.top + this.cursorAt.top)\n };\n };\n Draggable.prototype.getCoordinates = function (evt) {\n if (evt.type.indexOf('touch') > -1) {\n return evt.changedTouches[0];\n }\n return evt;\n };\n Draggable.prototype.getHelperElement = function (evt) {\n var element;\n if (this.clone) {\n if (this.helper) {\n element = this.helper({ sender: evt, element: this.target });\n }\n else {\n element = createElement('div', { className: 'e-drag-helper e-block-touch', innerHTML: 'Draggable' });\n document.body.appendChild(element);\n }\n }\n else {\n element = this.element;\n }\n return element;\n };\n Draggable.prototype.setGlobalDroppables = function (reset, drag, helper) {\n this.droppables[this.scope] = reset ? null : {\n draggable: drag,\n helper: helper,\n draggedElement: this.element\n };\n };\n Draggable.prototype.checkTargetElement = function (evt) {\n var target = this.getProperTargetElement(evt);\n var dropIns = this.getDropInstance(target);\n if (!dropIns && target && !isNullOrUndefined(target.parentNode)) {\n var parent_1 = closest(target.parentNode, '.e-droppable') || target.parentElement;\n if (parent_1) {\n dropIns = this.getDropInstance(parent_1);\n }\n }\n return { target: target, instance: dropIns };\n };\n Draggable.prototype.getDropInstance = function (ele) {\n var name = 'getModuleName';\n var drop;\n var eleInst = ele && ele.ej2_instances;\n if (eleInst) {\n for (var _i = 0, eleInst_1 = eleInst; _i < eleInst_1.length; _i++) {\n var inst = eleInst_1[_i];\n if (inst[\"\" + name]() === 'droppable') {\n drop = inst;\n break;\n }\n }\n }\n return drop;\n };\n Draggable.prototype.destroy = function () {\n this.toggleEvents(true);\n _super.prototype.destroy.call(this);\n };\n var Draggable_1;\n __decorate([\n Complex({}, Position)\n ], Draggable.prototype, \"cursorAt\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"clone\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"dragArea\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"isDragScroll\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"isReplaceDragEle\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"isPreventSelect\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"drag\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"dragStart\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"dragStop\", void 0);\n __decorate([\n Property(1)\n ], Draggable.prototype, \"distance\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"handle\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"abort\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"helper\", void 0);\n __decorate([\n Property('default')\n ], Draggable.prototype, \"scope\", void 0);\n __decorate([\n Property('')\n ], Draggable.prototype, \"dragTarget\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"axis\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"queryPositionInfo\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableTailMode\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"skipDistanceCheck\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"preventDefault\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableAutoScroll\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableTapHold\", void 0);\n __decorate([\n Property(750)\n ], Draggable.prototype, \"tapHoldThreshold\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableScrollHandler\", void 0);\n Draggable = Draggable_1 = __decorate([\n NotifyPropertyChanges\n ], Draggable);\n return Draggable;\n}(Base));\nexport { Draggable };\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 { Base } from './base';\nimport { Browser } from './browser';\nimport { isVisible, matches } from './dom';\nimport { Property, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { EventHandler } from './event-handler';\nimport { compareElementParent } from './util';\n/**\n * Droppable Module provides support to enable droppable functionality in Dom Elements.\n * ```html\n * Droppable
\n * \n * ```\n */\nvar Droppable = /** @class */ (function (_super) {\n __extends(Droppable, _super);\n function Droppable(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.mouseOver = false;\n _this.dragData = {};\n _this.dragStopCalled = false;\n _this.bind();\n return _this;\n }\n Droppable.prototype.bind = function () {\n this.wireEvents();\n };\n Droppable.prototype.wireEvents = function () {\n EventHandler.add(this.element, Browser.touchEndEvent, this.intDrop, this);\n };\n // triggers when property changed\n // eslint-disable-next-line\n Droppable.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Droppable.prototype.getModuleName = function () {\n return 'droppable';\n };\n Droppable.prototype.intOver = function (event, element) {\n if (!this.mouseOver) {\n var drag = this.dragData[this.scope];\n this.trigger('over', { event: event, target: element, dragData: drag });\n this.mouseOver = true;\n }\n };\n Droppable.prototype.intOut = function (event, element) {\n if (this.mouseOver) {\n this.trigger('out', { evt: event, target: element });\n this.mouseOver = false;\n }\n };\n Droppable.prototype.intDrop = function (evt, element) {\n if (!this.dragStopCalled) {\n return;\n }\n else {\n this.dragStopCalled = false;\n }\n var accept = true;\n var drag = this.dragData[this.scope];\n var isDrag = drag ? (drag.helper && isVisible(drag.helper)) : false;\n var area;\n if (isDrag) {\n area = this.isDropArea(evt, drag.helper, element);\n if (this.accept) {\n accept = matches(drag.helper, this.accept);\n }\n }\n if (isDrag && this.drop && area.canDrop && accept) {\n this.trigger('drop', { event: evt, target: area.target, droppedElement: drag.helper, dragData: drag });\n }\n this.mouseOver = false;\n };\n Droppable.prototype.isDropArea = function (evt, helper, element) {\n var area = { canDrop: true, target: element || evt.target };\n var isTouch = evt.type === 'touchend';\n if (isTouch || area.target === helper) {\n helper.style.display = 'none';\n var coord = isTouch ? (evt.changedTouches[0]) : evt;\n var ele = document.elementFromPoint(coord.clientX, coord.clientY);\n area.canDrop = false;\n area.canDrop = compareElementParent(ele, this.element);\n if (area.canDrop) {\n area.target = ele;\n }\n helper.style.display = '';\n }\n return area;\n };\n Droppable.prototype.destroy = function () {\n EventHandler.remove(this.element, Browser.touchEndEvent, this.intDrop);\n _super.prototype.destroy.call(this);\n };\n __decorate([\n Property()\n ], Droppable.prototype, \"accept\", void 0);\n __decorate([\n Property('default')\n ], Droppable.prototype, \"scope\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"drop\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"over\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"out\", void 0);\n Droppable = __decorate([\n NotifyPropertyChanges\n ], Droppable);\n return Droppable;\n}(Base));\nexport { Droppable };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { Base } from './base';\nvar keyCode = {\n 'backspace': 8,\n 'tab': 9,\n 'enter': 13,\n 'shift': 16,\n 'control': 17,\n 'alt': 18,\n 'pause': 19,\n 'capslock': 20,\n 'space': 32,\n 'escape': 27,\n 'pageup': 33,\n 'pagedown': 34,\n 'end': 35,\n 'home': 36,\n 'leftarrow': 37,\n 'uparrow': 38,\n 'rightarrow': 39,\n 'downarrow': 40,\n 'insert': 45,\n 'delete': 46,\n 'f1': 112,\n 'f2': 113,\n 'f3': 114,\n 'f4': 115,\n 'f5': 116,\n 'f6': 117,\n 'f7': 118,\n 'f8': 119,\n 'f9': 120,\n 'f10': 121,\n 'f11': 122,\n 'f12': 123,\n 'semicolon': 186,\n 'plus': 187,\n 'comma': 188,\n 'minus': 189,\n 'dot': 190,\n 'forwardslash': 191,\n 'graveaccent': 192,\n 'openbracket': 219,\n 'backslash': 220,\n 'closebracket': 221,\n 'singlequote': 222\n};\n/**\n * KeyboardEvents class enables you to bind key action desired key combinations for ex., Ctrl+A, Delete, Alt+Space etc.\n * ```html\n *
;\n * \n * ```\n */\nvar KeyboardEvents = /** @class */ (function (_super) {\n __extends(KeyboardEvents, _super);\n /**\n * Initializes the KeyboardEvents\n *\n * @param {HTMLElement} element ?\n * @param {KeyboardEventsModel} options ?\n */\n function KeyboardEvents(element, options) {\n var _this = _super.call(this, options, element) || this;\n /**\n * To handle a key press event returns null\n *\n * @param {KeyboardEventArgs} e ?\n * @returns {void} ?\n */\n _this.keyPressHandler = function (e) {\n var isAltKey = e.altKey;\n var isCtrlKey = e.ctrlKey;\n var isShiftKey = e.shiftKey;\n var curkeyCode = e.which;\n var keys = Object.keys(_this.keyConfigs);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n var configCollection = _this.keyConfigs[\"\" + key].split(',');\n for (var _a = 0, configCollection_1 = configCollection; _a < configCollection_1.length; _a++) {\n var rconfig = configCollection_1[_a];\n var rKeyObj = KeyboardEvents_1.getKeyConfigData(rconfig.trim());\n if (isAltKey === rKeyObj.altKey && isCtrlKey === rKeyObj.ctrlKey &&\n isShiftKey === rKeyObj.shiftKey && curkeyCode === rKeyObj.keyCode) {\n e.action = key;\n if (_this.keyAction) {\n _this.keyAction(e);\n }\n }\n }\n }\n };\n _this.bind();\n return _this;\n }\n KeyboardEvents_1 = KeyboardEvents;\n /**\n * Unwire bound events and destroy the instance.\n *\n * @returns {void} ?\n */\n KeyboardEvents.prototype.destroy = function () {\n this.unwireEvents();\n _super.prototype.destroy.call(this);\n };\n /**\n * Function can be used to specify certain action if a property is changed\n *\n * @param {KeyboardEventsModel} newProp ?\n * @param {KeyboardEventsModel} oldProp ?\n * @returns {void} ?\n * @private\n */\n // eslint-disable-next-line\n KeyboardEvents.prototype.onPropertyChanged = function (newProp, oldProp) {\n // No code are needed\n };\n KeyboardEvents.prototype.bind = function () {\n this.wireEvents();\n };\n /**\n * To get the module name, returns 'keyboard'.\n *\n * @returns {string} ?\n * @private\n */\n KeyboardEvents.prototype.getModuleName = function () {\n return 'keyboard';\n };\n /**\n * Wiring event handlers to events\n *\n * @returns {void} ?\n * @private\n */\n KeyboardEvents.prototype.wireEvents = function () {\n this.element.addEventListener(this.eventName, this.keyPressHandler);\n };\n /**\n * Unwiring event handlers to events\n *\n * @returns {void} ?\n * @private\n */\n KeyboardEvents.prototype.unwireEvents = function () {\n this.element.removeEventListener(this.eventName, this.keyPressHandler);\n };\n /**\n * To get the key configuration data\n *\n * @param {string} config - configuration data\n * @returns {KeyData} ?\n */\n KeyboardEvents.getKeyConfigData = function (config) {\n if (config in this.configCache) {\n return this.configCache[\"\" + config];\n }\n var keys = config.toLowerCase().split('+');\n var keyData = {\n altKey: (keys.indexOf('alt') !== -1 ? true : false),\n ctrlKey: (keys.indexOf('ctrl') !== -1 ? true : false),\n shiftKey: (keys.indexOf('shift') !== -1 ? true : false),\n keyCode: null\n };\n if (keys[keys.length - 1].length > 1 && !!Number(keys[keys.length - 1])) {\n keyData.keyCode = Number(keys[keys.length - 1]);\n }\n else {\n keyData.keyCode = KeyboardEvents_1.getKeyCode(keys[keys.length - 1]);\n }\n KeyboardEvents_1.configCache[\"\" + config] = keyData;\n return keyData;\n };\n // Return the keycode value as string\n KeyboardEvents.getKeyCode = function (keyVal) {\n return keyCode[\"\" + keyVal] || keyVal.toUpperCase().charCodeAt(0);\n };\n var KeyboardEvents_1;\n KeyboardEvents.configCache = {};\n __decorate([\n Property({})\n ], KeyboardEvents.prototype, \"keyConfigs\", void 0);\n __decorate([\n Property('keyup')\n ], KeyboardEvents.prototype, \"eventName\", void 0);\n __decorate([\n Event()\n ], KeyboardEvents.prototype, \"keyAction\", void 0);\n KeyboardEvents = KeyboardEvents_1 = __decorate([\n NotifyPropertyChanges\n ], KeyboardEvents);\n return KeyboardEvents;\n}(Base));\nexport { KeyboardEvents };\n","import { extend, isNullOrUndefined } from './util';\nimport { defaultCulture } from './internationalization';\n/**\n * L10n modules provides localized text for different culture.\n * ```typescript\n * import {setCulture} from '@syncfusion/ts-base-library';\n * //load global locale object common for all components.\n * L10n.load({\n * 'fr-BE': {\n * 'button': {\n * 'check': 'vérifié'\n * }\n * }\n * });\n * //set globale default locale culture.\n * setCulture('fr-BE');\n * let instance: L10n = new L10n('button', {\n * check: 'checked'\n * });\n * //Get locale text for current property.\n * instance.getConstant('check');\n * //Change locale culture in a component.\n * instance.setLocale('en-US');\n * ```\n */\nvar L10n = /** @class */ (function () {\n /**\n * Constructor\n *\n * @param {string} controlName ?\n * @param {Object} localeStrings ?\n * @param {string} locale ?\n */\n function L10n(controlName, localeStrings, locale) {\n this.controlName = controlName;\n this.localeStrings = localeStrings;\n this.setLocale(locale || defaultCulture);\n }\n /**\n * Sets the locale text\n *\n * @param {string} locale ?\n * @returns {void} ?\n */\n L10n.prototype.setLocale = function (locale) {\n var intLocale = this.intGetControlConstant(L10n.locale, locale);\n this.currentLocale = intLocale || this.localeStrings;\n };\n /**\n * Sets the global locale for all components.\n *\n * @param {Object} localeObject - specifies the localeObject to be set as global locale.\n * @returns {void} ?\n */\n L10n.load = function (localeObject) {\n this.locale = extend(this.locale, localeObject, {}, true);\n };\n /**\n * Returns current locale text for the property based on the culture name and control name.\n *\n * @param {string} prop - specifies the property for which localize text to be returned.\n * @returns {string} ?\n */\n L10n.prototype.getConstant = function (prop) {\n // Removed conditional operator because this method does not return correct value when passing 0 as value in localization\n if (!isNullOrUndefined(this.currentLocale[\"\" + prop])) {\n return this.currentLocale[\"\" + prop];\n }\n else {\n return this.localeStrings[\"\" + prop] || '';\n }\n };\n /**\n * Returns the control constant object for current object and the locale specified.\n *\n * @param {Object} curObject ?\n * @param {string} locale ?\n * @returns {Object} ?\n */\n L10n.prototype.intGetControlConstant = function (curObject, locale) {\n if ((curObject)[\"\" + locale]) {\n return (curObject)[\"\" + locale][this.controlName];\n }\n return null;\n };\n L10n.locale = {};\n return L10n;\n}());\nexport { L10n };\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 { extend } from './util';\nimport { Property, Complex, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { Browser } from './browser';\nimport { Base } from './base';\nimport { ChildProperty } from './child-property';\nimport { EventHandler } from './event-handler';\n/**\n * SwipeSettings is a framework module that provides support to handle swipe event like swipe up, swipe right, etc..,\n */\nvar SwipeSettings = /** @class */ (function (_super) {\n __extends(SwipeSettings, _super);\n function SwipeSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(50)\n ], SwipeSettings.prototype, \"swipeThresholdDistance\", void 0);\n return SwipeSettings;\n}(ChildProperty));\nexport { SwipeSettings };\nvar swipeRegex = /(Up|Down)/;\n/**\n * Touch class provides support to handle the touch event like tap, double tap, tap hold, etc..,\n * ```typescript\n * let node: HTMLElement;\n * let touchObj: Touch = new Touch({\n * element: node,\n * tap: function (e) {\n * // tap handler function code\n * }\n * tapHold: function (e) {\n * // tap hold handler function code\n * }\n * scroll: function (e) {\n * // scroll handler function code\n * }\n * swipe: function (e) {\n * // swipe handler function code\n * }\n * });\n * ```\n */\nvar Touch = /** @class */ (function (_super) {\n __extends(Touch, _super);\n /* End-Properties */\n function Touch(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.touchAction = true;\n _this.tapCount = 0;\n /**\n *\n * @param {MouseEventArgs | TouchEventArgs} evt ?\n * @returns {void} ?\n */\n _this.startEvent = function (evt) {\n if (_this.touchAction === true) {\n var point = _this.updateChangeTouches(evt);\n if (evt.changedTouches !== undefined) {\n _this.touchAction = false;\n }\n _this.isTouchMoved = false;\n _this.movedDirection = '';\n _this.startPoint = _this.lastMovedPoint = { clientX: point.clientX, clientY: point.clientY };\n _this.startEventData = point;\n _this.hScrollLocked = _this.vScrollLocked = false;\n _this.tStampStart = Date.now();\n _this.timeOutTapHold = setTimeout(function () { _this.tapHoldEvent(evt); }, _this.tapHoldThreshold);\n EventHandler.add(_this.element, Browser.touchMoveEvent, _this.moveEvent, _this);\n EventHandler.add(_this.element, Browser.touchEndEvent, _this.endEvent, _this);\n EventHandler.add(_this.element, Browser.touchCancelEvent, _this.cancelEvent, _this);\n }\n };\n /**\n *\n * @param {MouseEventArgs | TouchEventArgs} evt ?\n * @returns {void} ?\n */\n _this.moveEvent = function (evt) {\n var point = _this.updateChangeTouches(evt);\n _this.movedPoint = point;\n _this.isTouchMoved = !(point.clientX === _this.startPoint.clientX && point.clientY === _this.startPoint.clientY);\n var eScrollArgs = {};\n if (_this.isTouchMoved) {\n clearTimeout(_this.timeOutTapHold);\n _this.calcScrollPoints(evt);\n var scrollArg = {\n startEvents: _this.startEventData,\n originalEvent: evt, startX: _this.startPoint.clientX,\n startY: _this.startPoint.clientY, distanceX: _this.distanceX,\n distanceY: _this.distanceY, scrollDirection: _this.scrollDirection,\n velocity: _this.getVelocity(point)\n };\n eScrollArgs = extend(eScrollArgs, {}, scrollArg);\n _this.trigger('scroll', eScrollArgs);\n _this.lastMovedPoint = { clientX: point.clientX, clientY: point.clientY };\n }\n };\n /**\n *\n * @param {MouseEventArgs | TouchEventArgs} evt ?\n * @returns {void} ?\n */\n _this.cancelEvent = function (evt) {\n clearTimeout(_this.timeOutTapHold);\n clearTimeout(_this.timeOutTap);\n _this.tapCount = 0;\n _this.swipeFn(evt);\n EventHandler.remove(_this.element, Browser.touchCancelEvent, _this.cancelEvent);\n };\n /**\n *\n * @param {MouseEventArgs | TouchEventArgs} evt ?\n * @returns {void} ?\n */\n _this.endEvent = function (evt) {\n _this.swipeFn(evt);\n if (!_this.isTouchMoved) {\n if (typeof _this.tap === 'function') {\n _this.trigger('tap', { originalEvent: evt, tapCount: ++_this.tapCount });\n _this.timeOutTap = setTimeout(function () {\n _this.tapCount = 0;\n }, _this.tapThreshold);\n }\n }\n _this.modeclear();\n };\n /**\n *\n * @param {MouseEventArgs | TouchEventArgs} evt ?\n * @returns {void} ?\n */\n _this.swipeFn = function (evt) {\n clearTimeout(_this.timeOutTapHold);\n clearTimeout(_this.timeOutTap);\n var point = _this.updateChangeTouches(evt);\n var diffX = point.clientX - _this.startPoint.clientX;\n var diffY = point.clientY - _this.startPoint.clientY;\n diffX = Math.floor(diffX < 0 ? -1 * diffX : diffX);\n diffY = Math.floor(diffY < 0 ? -1 * diffY : diffX);\n _this.isTouchMoved = diffX > 1 || diffY > 1;\n var isFirefox = (/Firefox/).test(Browser.userAgent);\n if (isFirefox && point.clientX === 0 && point.clientY === 0 && evt.type === 'mouseup') {\n _this.isTouchMoved = false;\n }\n _this.endPoint = point;\n _this.calcPoints(evt);\n var swipeArgs = {\n originalEvent: evt,\n startEvents: _this.startEventData,\n startX: _this.startPoint.clientX,\n startY: _this.startPoint.clientY,\n distanceX: _this.distanceX, distanceY: _this.distanceY, swipeDirection: _this.movedDirection,\n velocity: _this.getVelocity(point)\n };\n if (_this.isTouchMoved) {\n var eSwipeArgs = void 0;\n var tDistance = _this.swipeSettings.swipeThresholdDistance;\n // eslint-disable-next-line\n eSwipeArgs = extend(eSwipeArgs, _this.defaultArgs, swipeArgs);\n var canTrigger = false;\n var ele = _this.element;\n var scrollBool = _this.isScrollable(ele);\n var moved = swipeRegex.test(_this.movedDirection);\n if ((tDistance < _this.distanceX && !moved) || (tDistance < _this.distanceY && moved)) {\n if (!scrollBool) {\n canTrigger = true;\n }\n else {\n canTrigger = _this.checkSwipe(ele, moved);\n }\n }\n if (canTrigger) {\n _this.trigger('swipe', eSwipeArgs);\n }\n }\n _this.modeclear();\n };\n _this.modeclear = function () {\n _this.modeClear = setTimeout(function () {\n _this.touchAction = true;\n }, (typeof _this.tap !== 'function' ? 0 : 20));\n _this.lastTapTime = new Date().getTime();\n EventHandler.remove(_this.element, Browser.touchMoveEvent, _this.moveEvent);\n EventHandler.remove(_this.element, Browser.touchEndEvent, _this.endEvent);\n EventHandler.remove(_this.element, Browser.touchCancelEvent, _this.cancelEvent);\n };\n _this.bind();\n return _this;\n }\n // triggers when property changed\n /**\n *\n * @private\n * @param {TouchModel} newProp ?\n * @param {TouchModel} oldProp ?\n * @returns {void} ?\n */\n // eslint-disable-next-line\n Touch.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Touch.prototype.bind = function () {\n this.wireEvents();\n if (Browser.isIE) {\n this.element.classList.add('e-block-touch');\n }\n };\n /**\n * To destroy the touch instance.\n *\n * @returns {void}\n */\n Touch.prototype.destroy = function () {\n this.unwireEvents();\n _super.prototype.destroy.call(this);\n };\n // Need to changes the event binding once we updated the event handler.\n Touch.prototype.wireEvents = function () {\n EventHandler.add(this.element, Browser.touchStartEvent, this.startEvent, this);\n };\n Touch.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, Browser.touchStartEvent, this.startEvent);\n };\n /**\n * Returns module name as touch\n *\n * @returns {string} ?\n * @private\n */\n Touch.prototype.getModuleName = function () {\n return 'touch';\n };\n /**\n * Returns if the HTML element is Scrollable.\n *\n * @param {HTMLElement} element - HTML Element to check if Scrollable.\n * @returns {boolean} ?\n */\n Touch.prototype.isScrollable = function (element) {\n var eleStyle = getComputedStyle(element);\n var style = eleStyle.overflow + eleStyle.overflowX + eleStyle.overflowY;\n if ((/(auto|scroll)/).test(style)) {\n return true;\n }\n return false;\n };\n /**\n *\n * @param {MouseEventArgs | TouchEventArgs} evt ?\n * @returns {void} ?\n */\n Touch.prototype.tapHoldEvent = function (evt) {\n this.tapCount = 0;\n this.touchAction = true;\n var eTapArgs;\n EventHandler.remove(this.element, Browser.touchMoveEvent, this.moveEvent);\n EventHandler.remove(this.element, Browser.touchEndEvent, this.endEvent);\n // eslint-disable-next-line\n eTapArgs = { originalEvent: evt };\n this.trigger('tapHold', eTapArgs);\n EventHandler.remove(this.element, Browser.touchCancelEvent, this.cancelEvent);\n };\n Touch.prototype.calcPoints = function (evt) {\n var point = this.updateChangeTouches(evt);\n this.defaultArgs = { originalEvent: evt };\n this.distanceX = Math.abs((Math.abs(point.clientX) - Math.abs(this.startPoint.clientX)));\n this.distanceY = Math.abs((Math.abs(point.clientY) - Math.abs(this.startPoint.clientY)));\n if (this.distanceX > this.distanceY) {\n this.movedDirection = (point.clientX > this.startPoint.clientX) ? 'Right' : 'Left';\n }\n else {\n this.movedDirection = (point.clientY < this.startPoint.clientY) ? 'Up' : 'Down';\n }\n };\n Touch.prototype.calcScrollPoints = function (evt) {\n var point = this.updateChangeTouches(evt);\n this.defaultArgs = { originalEvent: evt };\n this.distanceX = Math.abs((Math.abs(point.clientX) - Math.abs(this.lastMovedPoint.clientX)));\n this.distanceY = Math.abs((Math.abs(point.clientY) - Math.abs(this.lastMovedPoint.clientY)));\n if ((this.distanceX > this.distanceY || this.hScrollLocked === true) && this.vScrollLocked === false) {\n this.scrollDirection = (point.clientX > this.lastMovedPoint.clientX) ? 'Right' : 'Left';\n this.hScrollLocked = true;\n }\n else {\n this.scrollDirection = (point.clientY < this.lastMovedPoint.clientY) ? 'Up' : 'Down';\n this.vScrollLocked = true;\n }\n };\n Touch.prototype.getVelocity = function (pnt) {\n var newX = pnt.clientX;\n var newY = pnt.clientY;\n var newT = Date.now();\n var xDist = newX - this.startPoint.clientX;\n var yDist = newY - this.startPoint.clientX;\n var interval = newT - this.tStampStart;\n return Math.sqrt(xDist * xDist + yDist * yDist) / interval;\n };\n // eslint-disable-next-line\n Touch.prototype.checkSwipe = function (ele, flag) {\n var keys = ['scroll', 'offset'];\n var temp = flag ? ['Height', 'Top'] : ['Width', 'Left'];\n if ((ele[keys[0] + temp[0]] <= ele[keys[1] + temp[0]])) {\n return true;\n }\n return (ele[keys[0] + temp[1]] === 0) ||\n (ele[keys[1] + temp[0]] + ele[keys[0] + temp[1]] >= ele[keys[0] + temp[0]]);\n };\n Touch.prototype.updateChangeTouches = function (evt) {\n var point = evt.changedTouches && evt.changedTouches.length !== 0 ? evt.changedTouches[0] : evt;\n return point;\n };\n __decorate([\n Event()\n ], Touch.prototype, \"tap\", void 0);\n __decorate([\n Event()\n ], Touch.prototype, \"tapHold\", void 0);\n __decorate([\n Event()\n ], Touch.prototype, \"swipe\", void 0);\n __decorate([\n Event()\n ], Touch.prototype, \"scroll\", void 0);\n __decorate([\n Property(350)\n ], Touch.prototype, \"tapThreshold\", void 0);\n __decorate([\n Property(750)\n ], Touch.prototype, \"tapHoldThreshold\", void 0);\n __decorate([\n Complex({}, SwipeSettings)\n ], Touch.prototype, \"swipeSettings\", void 0);\n Touch = __decorate([\n NotifyPropertyChanges\n ], Touch);\n return Touch;\n}(Base));\nexport { Touch };\n","/**\n * Template Engine\n */\nvar LINES = new RegExp('\\\\n|\\\\r|\\\\s\\\\s+', 'g');\nvar QUOTES = new RegExp(/'|\"/g);\nvar IF_STMT = new RegExp('if ?\\\\(');\nvar ELSEIF_STMT = new RegExp('else if ?\\\\(');\nvar ELSE_STMT = new RegExp('else');\nvar FOR_STMT = new RegExp('for ?\\\\(');\nvar IF_OR_FOR = new RegExp('(/if|/for)');\nvar CALL_FUNCTION = new RegExp('\\\\((.*)\\\\)', '');\nvar NOT_NUMBER = new RegExp('^[0-9]+$', 'g');\nvar WORD = new RegExp('[\\\\w\"\\'.\\\\s+]+', 'g');\nvar DBL_QUOTED_STR = new RegExp('\"(.*?)\"', 'g');\nvar WORDIF = new RegExp('[\\\\w\"\\'@#$.\\\\s-+]+', 'g');\nvar exp = new RegExp('\\\\${([^}]*)}', 'g');\n// let cachedTemplate: Object = {};\nvar ARR_OBJ = /^\\..*/gm;\nvar SINGLE_SLASH = /\\\\/gi;\nvar DOUBLE_SLASH = /\\\\\\\\/gi;\nvar WORDFUNC = new RegExp('[\\\\w\"\\'@#$.\\\\s+]+', 'g');\nvar WINDOWFUNC = /\\window\\./gm;\n/**\n * The function to set regular expression for template expression string.\n *\n * @param {RegExp} value - Value expression.\n * @returns {RegExp} ?\n * @private\n */\nexport function expression(value) {\n if (value) {\n exp = value;\n }\n return exp;\n}\n// /**\n// * To render the template string from the given data.\n// * @param {string} template - String Template.\n// * @param {Object[]|JSON} data - DataSource for the template.\n// * @param {Object} helper? - custom helper object.\n// */\n// export function template(template: string, data: JSON, helper?: Object): string {\n// let hash: string = hashCode(template);\n// let tmpl: Function;\n// if (!cachedTemplate[hash]) {\n// tmpl = cachedTemplate[hash] = compile(template, helper);\n// } else {\n// tmpl = cachedTemplate[hash];\n// }\n// return tmpl(data);\n// }\n/**\n * Compile the template string into template function.\n *\n * @param {string} template - The template string which is going to convert.\n * @param {Object} helper - Helper functions as an object.\n * @param {boolean} ignorePrefix ?\n * @returns {string} ?\n * @private\n */\nexport function compile(template, helper, ignorePrefix) {\n var argName = 'data';\n var evalExpResult = evalExp(template, argName, helper, ignorePrefix);\n // eslint-disable-next-line\n var condtion = \"var valueRegEx = (/value=\\\\'([A-Za-z0-9 _]*)((.)([\\\\w)(!-;?-\\u25A0\\\\s]+)['])/g);\\n var hrefRegex = (/(?:href)([\\\\s='\\\"./]+)([\\\\w-./?=&\\\\\\\\#\\\"]+)((.)([\\\\w)(!-;/?-\\u25A0\\\\s]+)['])/g);\\n if(str.match(valueRegEx)){\\n var check = str.match(valueRegEx);\\n var str1 = str;\\n for (var i=0; i < check.length; i++) {\\n var check1 = str.match(valueRegEx)[i].split('value=')[1];\\n var change = check1.match(/^'/) !== null ? check1.replace(/^'/, '\\\"') : check1;\\n change =change.match(/.$/)[0] === '\\\\'' ? change.replace(/.$/,'\\\"') : change;\\n str1 = str1.replace(check1, change);\\n }\\n str = str.replace(str, str1);\\n }\\n else if (str.match(/(?:href='')/) === null) {\\n if(str.match(hrefRegex)) {\\n var check = str.match(hrefRegex);\\n var str1 = str;\\n for (var i=0; i < check.length; i++) {\\n var check1 = str.match(hrefRegex)[i].split('href=')[1];\\n if (check1) {\\n var change = check1.match(/^'/) !== null ? check1.replace(/^'/, '\\\"') : check1;\\n change =change.match(/.$/)[0] === '\\\\'' ? change.replace(/.$/,'\\\"') : change;\\n str1 = str1.replace(check1, change);\\n }\\n }\\n str = str.replace(str, str1);\\n }\\n }\\n \";\n var fnCode = 'var str=\\\"' + evalExpResult + '\\\";' + condtion + ' return str;';\n var fn = new Function(argName, fnCode);\n return fn.bind(helper);\n}\n/** function used to evaluate the function expression\n *\n * @param {string} str ?\n * @param {string} nameSpace ?\n * @param {Object} helper ?\n * @param {boolean} ignorePrefix ?\n * @returns {string} ?\n */\nfunction evalExp(str, nameSpace, helper, ignorePrefix) {\n var varCOunt = 0;\n /**\n * Variable containing Local Keys\n */\n var localKeys = [];\n var isClass = str.match(/class=\"([^\"]+|)\\s{2}/g);\n var singleSpace = '';\n if (isClass) {\n isClass.forEach(function (value) {\n singleSpace = value.replace(/\\s\\s+/g, ' ');\n str = str.replace(value, singleSpace);\n });\n }\n return str.replace(LINES, '').replace(DBL_QUOTED_STR, '\\'$1\\'').replace(exp, \n // eslint-disable-next-line\n function (match, cnt, offset, matchStr) {\n var SPECIAL_CHAR = /@|#|\\$/gm;\n var matches = cnt.match(CALL_FUNCTION);\n // matches to detect any function calls\n if (matches) {\n var rlStr = matches[1];\n if (ELSEIF_STMT.test(cnt)) {\n //handling else-if condition\n cnt = '\";} ' + cnt.replace(matches[1], rlStr.replace(WORD, function (str) {\n str = str.trim();\n return addNameSpace(str, !(QUOTES.test(str)) && (localKeys.indexOf(str) === -1), nameSpace, localKeys, ignorePrefix);\n })) + '{ \\n str = str + \"';\n }\n else if (IF_STMT.test(cnt)) {\n //handling if condition\n cnt = '\"; ' + cnt.replace(matches[1], rlStr.replace(WORDIF, function (strs) {\n return HandleSpecialCharArrObj(strs, nameSpace, localKeys, ignorePrefix);\n })) + '{ \\n str = str + \"';\n }\n else if (FOR_STMT.test(cnt)) {\n //handling for condition\n var rlStr_1 = matches[1].split(' of ');\n // replace for each into actual JavaScript\n // eslint-disable-next-line\n cnt = '\"; ' + cnt.replace(matches[1], function (mtc) {\n localKeys.push(rlStr_1[0]);\n localKeys.push(rlStr_1[0] + 'Index');\n varCOunt = varCOunt + 1;\n // tslint:disable-next-line\n return 'var i' + varCOunt + '=0; i' + varCOunt + ' < ' + addNameSpace(rlStr_1[1], true, nameSpace, localKeys, ignorePrefix) + '.length; i' + varCOunt + '++';\n }) + '{ \\n ' + rlStr_1[0] + '= ' + addNameSpace(rlStr_1[1], true, nameSpace, localKeys, ignorePrefix)\n + '[i' + varCOunt + ']; \\n var ' + rlStr_1[0] + 'Index=i' + varCOunt + '; \\n str = str + \"';\n }\n else {\n //helper function handling\n var fnStr = cnt.split('(');\n // eslint-disable-next-line\n var fNameSpace = (helper && helper.hasOwnProperty(fnStr[0]) ? 'this.' : 'global');\n fNameSpace = (/\\./.test(fnStr[0]) ? '' : fNameSpace);\n var ftArray = matches[1].split(',');\n if (matches[1].length !== 0 && !(/data/).test(ftArray[0]) && !(/window./).test(ftArray[0])) {\n matches[1] = (fNameSpace === 'global' ? nameSpace + '.' + matches[1] : matches[1]);\n }\n var splRegexp = /@|\\$|#/gm;\n var arrObj = /\\]\\./gm;\n if (WINDOWFUNC.test(cnt) && arrObj.test(cnt) || splRegexp.test(cnt)) {\n var splArrRegexp = /@|\\$|#|\\]\\./gm;\n if (splArrRegexp.test(cnt)) {\n // tslint:disable-next-line\n cnt = '\"+ ' + (fNameSpace === 'global' ? '' : fNameSpace) + cnt.replace(matches[1], rlStr.replace(WORDFUNC, function (strs) {\n return HandleSpecialCharArrObj(strs, nameSpace, localKeys, ignorePrefix);\n })) + '+ \"';\n }\n }\n else {\n cnt = '\" + ' + (fNameSpace === 'global' ? '' : fNameSpace) +\n cnt.replace(rlStr, addNameSpace(matches[1].replace(/,( |)data.|,/gi, ',' + nameSpace + '.').replace(/,( |)data.window/gi, ',window'), (fNameSpace === 'global' ? false : true), nameSpace, localKeys, ignorePrefix)) +\n '+\"';\n }\n }\n }\n else if (ELSE_STMT.test(cnt)) {\n // handling else condition\n cnt = '\"; ' + cnt.replace(ELSE_STMT, '} else { \\n str = str + \"');\n // eslint-disable-next-line\n }\n else if (!!cnt.match(IF_OR_FOR)) {\n // close condition\n cnt = cnt.replace(IF_OR_FOR, '\"; \\n } \\n str = str + \"');\n }\n else if (SPECIAL_CHAR.test(cnt)) {\n // template string with double slash with special character\n if (cnt.match(SINGLE_SLASH)) {\n cnt = SlashReplace(cnt);\n }\n cnt = '\"+' + NameSpaceForspecialChar(cnt, (localKeys.indexOf(cnt) === -1), nameSpace, localKeys) + '\"]+\"';\n }\n else {\n // template string with double slash\n if (cnt.match(SINGLE_SLASH)) {\n cnt = SlashReplace(cnt);\n cnt = '\"+' + NameSpaceForspecialChar(cnt, (localKeys.indexOf(cnt) === -1), nameSpace, localKeys) + '\"]+\"';\n }\n else {\n // evaluate normal expression\n cnt = cnt !== '' ? '\"+' + addNameSpace(cnt.replace(/,/gi, '+' + nameSpace + '.'), (localKeys.indexOf(cnt) === -1), nameSpace, localKeys, ignorePrefix) + '+\"' : ' ';\n }\n }\n return cnt;\n });\n}\n/**\n *\n * @param {string} str ?\n * @param {boolean} addNS ?\n * @param {string} nameSpace ?\n * @param {string[]} ignoreList ?\n * @param {boolean} ignorePrefix ?\n * @returns {string} ?\n */\nfunction addNameSpace(str, addNS, nameSpace, ignoreList, ignorePrefix) {\n return ((addNS && !(NOT_NUMBER.test(str)) && ignoreList.indexOf(str.split('.')[0]) === -1 && !ignorePrefix) ? nameSpace + '.' + str : str);\n}\n/**\n *\n * @param {string} str ?\n * @param {boolean} addNS ?\n * @param {string} nameSpace ?\n * @param {string[]} ignoreList ?\n * @returns {string} ?\n */\nfunction NameSpaceArrObj(str, addNS, nameSpace, ignoreList) {\n var arrObjReg = /^\\..*/gm;\n return ((addNS && !(NOT_NUMBER.test(str)) &&\n ignoreList.indexOf(str.split('.')[0]) === -1 && !(arrObjReg.test(str))) ? nameSpace + '.' + str : str);\n}\n// // Create hashCode for template string to storeCached function\n// function hashCode(str: string): string {\n// return str.split('').reduce((a: number, b: string) => { a = ((a << 5) - a) + b.charCodeAt(0); return a & a; }, 0).toString();\n// }\n/**\n *\n * @param {string} str ?\n * @param {boolean} addNS ?\n * @param {string} nameSpace ?\n * @param {string[]} ignoreList ?\n * @returns {string} ?\n */\nfunction NameSpaceForspecialChar(str, addNS, nameSpace, ignoreList) {\n return ((addNS && !(NOT_NUMBER.test(str)) && ignoreList.indexOf(str.split('.')[0]) === -1) ? nameSpace + '[\"' + str : str);\n}\n// eslint-disable-next-line\nfunction SlashReplace(tempStr) {\n var double = '\\\\\\\\';\n if (tempStr.match(DOUBLE_SLASH)) {\n // eslint-disable-next-line\n tempStr = tempStr;\n }\n else {\n tempStr = tempStr.replace(SINGLE_SLASH, double);\n }\n return tempStr;\n}\n/**\n *\n * @param {string} str ?\n * @param {string} nameSpaceNew ?\n * @param {string[]} keys ?\n * @param {boolean} ignorePrefix ?\n * @returns {string} ?\n */\nfunction HandleSpecialCharArrObj(str, nameSpaceNew, keys, ignorePrefix) {\n str = str.trim();\n var windowFunc = /\\window\\./gm;\n if (!windowFunc.test(str)) {\n var quotes = /'|\"/gm;\n var splRegexp = /@|\\$|#/gm;\n if (splRegexp.test(str)) {\n str = NameSpaceForspecialChar(str, (keys.indexOf(str) === -1), nameSpaceNew, keys) + '\"]';\n }\n if (ARR_OBJ.test(str)) {\n return NameSpaceArrObj(str, !(quotes.test(str)) && (keys.indexOf(str) === -1), nameSpaceNew, keys);\n }\n else {\n return addNameSpace(str, !(quotes.test(str)) && (keys.indexOf(str) === -1), nameSpaceNew, keys, ignorePrefix);\n }\n }\n else {\n return str;\n }\n}\n","/**\n * Template Engine Bridge\n */\nimport { compile as render } from './template';\nimport { createElement } from './dom';\nimport { isNullOrUndefined, isBlazor } from './util';\nvar HAS_ROW = /^[\\n\\r.]+ 0) {\n elements.forEach(function (element) {\n detach(element);\n });\n }\n else {\n return;\n }\n };\n SanitizeHtmlHelper.removeJsEvents = function () {\n var elements = this.wrapElement.querySelectorAll('[' + jsEvents.join('],[') + ']');\n if (elements.length > 0) {\n elements.forEach(function (element) {\n jsEvents.forEach(function (attr) {\n if (element.hasAttribute(attr)) {\n element.removeAttribute(attr);\n }\n });\n });\n }\n else {\n return;\n }\n };\n SanitizeHtmlHelper.removeXssAttrs = function () {\n var _this = this;\n // eslint-disable-next-line\n this.removeAttrs.forEach(function (item, index) {\n var elements = _this.wrapElement.querySelectorAll(item.selector);\n if (elements.length > 0) {\n elements.forEach(function (element) {\n element.removeAttribute(item.attribute);\n });\n }\n });\n };\n return SanitizeHtmlHelper;\n}());\nexport { SanitizeHtmlHelper };\n","/**\n * Base modules\n */\nexport * from './intl/intl-base';\nexport * from './ajax';\nexport * from './animation';\nexport * from './base';\nexport * from './browser';\nexport * from './component';\nexport * from './child-property';\nexport * from './draggable';\nexport * from './droppable';\nexport * from './event-handler';\nexport * from './internationalization';\nexport * from './keyboard';\nexport * from './l10n';\nexport * from './module-loader';\nexport * from './notify-property-change';\nexport * from './touch';\nexport * from './hijri-parser';\nexport * from './template-engine';\nexport * from './util';\nexport * from './dom';\nexport * from './observer';\nexport * from './sanitize-helper';\nexport * from './validate-lic';\n","/**\n * index\n */\nexport * from './src/index';\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Specifies the Ajax settings of the File Manager.\n */\nvar AjaxSettings = /** @class */ (function (_super) {\n __extends(AjaxSettings, _super);\n function AjaxSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], AjaxSettings.prototype, \"downloadUrl\", void 0);\n __decorate([\n Property(null)\n ], AjaxSettings.prototype, \"getImageUrl\", void 0);\n __decorate([\n Property(null)\n ], AjaxSettings.prototype, \"uploadUrl\", void 0);\n __decorate([\n Property(null)\n ], AjaxSettings.prototype, \"url\", void 0);\n return AjaxSettings;\n}(ChildProperty));\nexport { AjaxSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\nexport var fileItems = ['Open', '|', 'Cut', 'Copy', '|', 'Delete', 'Download', 'Rename', '|', 'Details'];\nexport var folderItems = ['Open', '|', 'Cut', 'Copy', 'Paste', '|', 'Delete', 'Rename', 'Download', '|', 'Details'];\nexport var layoutItems = [\n 'SortBy', 'View', 'Refresh', '|', 'Paste', '|', 'NewFolder', 'Upload', '|', 'Details', '|', 'SelectAll'\n];\n/**\n * Specifies the ContextMenu settings of the File Manager.\n */\nvar ContextMenuSettings = /** @class */ (function (_super) {\n __extends(ContextMenuSettings, _super);\n function ContextMenuSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(fileItems)\n ], ContextMenuSettings.prototype, \"file\", void 0);\n __decorate([\n Property(folderItems)\n ], ContextMenuSettings.prototype, \"folder\", void 0);\n __decorate([\n Property(layoutItems)\n ], ContextMenuSettings.prototype, \"layout\", void 0);\n __decorate([\n Property(true)\n ], ContextMenuSettings.prototype, \"visible\", void 0);\n return ContextMenuSettings;\n}(ChildProperty));\nexport { ContextMenuSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Specifies the columns in the details view of the file manager.\n */\nexport var columnArray = [\n {\n field: 'name', headerText: 'Name', minWidth: 120, isPrimaryKey: true,\n template: '${name}', customAttributes: { class: 'e-fe-grid-name' }\n },\n {\n field: '_fm_modified', headerText: 'DateModified', type: 'dateTime',\n format: 'MMMM dd, yyyy HH:mm', minWidth: 120, width: '190'\n },\n {\n field: 'size', headerText: 'Size', minWidth: 90, width: '110', template: '${size}'\n }\n];\n/**\n * Specifies the grid settings of the File Manager.\n */\nvar DetailsViewSettings = /** @class */ (function (_super) {\n __extends(DetailsViewSettings, _super);\n function DetailsViewSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], DetailsViewSettings.prototype, \"columnResizing\", void 0);\n __decorate([\n Property(columnArray)\n ], DetailsViewSettings.prototype, \"columns\", void 0);\n return DetailsViewSettings;\n}(ChildProperty));\nexport { DetailsViewSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Specifies the navigationpane settings of the File Manager.\n */\nvar NavigationPaneSettings = /** @class */ (function (_super) {\n __extends(NavigationPaneSettings, _super);\n function NavigationPaneSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('650px')\n ], NavigationPaneSettings.prototype, \"maxWidth\", void 0);\n __decorate([\n Property('240px')\n ], NavigationPaneSettings.prototype, \"minWidth\", void 0);\n __decorate([\n Property(true)\n ], NavigationPaneSettings.prototype, \"visible\", void 0);\n __decorate([\n Property('None')\n ], NavigationPaneSettings.prototype, \"sortOrder\", void 0);\n return NavigationPaneSettings;\n}(ChildProperty));\nexport { NavigationPaneSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Specifies the Search settings of the File Manager.\n */\nvar SearchSettings = /** @class */ (function (_super) {\n __extends(SearchSettings, _super);\n function SearchSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], SearchSettings.prototype, \"allowSearchOnTyping\", void 0);\n __decorate([\n Property('contains')\n ], SearchSettings.prototype, \"filterType\", void 0);\n __decorate([\n Property(true)\n ], SearchSettings.prototype, \"ignoreCase\", void 0);\n __decorate([\n Property(null)\n ], SearchSettings.prototype, \"placeholder\", void 0);\n return SearchSettings;\n}(ChildProperty));\nexport { SearchSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\nexport var toolbarItems = ['NewFolder', 'Upload', 'Cut', 'Copy', 'Paste', 'Delete', 'Download', 'Rename',\n 'SortBy', 'Refresh', 'Selection', 'View', 'Details'];\n/**\n * Specifies the Toolbar settings of the FileManager.\n */\nvar ToolbarSettings = /** @class */ (function (_super) {\n __extends(ToolbarSettings, _super);\n function ToolbarSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(toolbarItems)\n ], ToolbarSettings.prototype, \"items\", void 0);\n __decorate([\n Property(true)\n ], ToolbarSettings.prototype, \"visible\", void 0);\n return ToolbarSettings;\n}(ChildProperty));\nexport { ToolbarSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Specifies the Ajax settings of the File Manager.\n */\nvar UploadSettings = /** @class */ (function (_super) {\n __extends(UploadSettings, _super);\n function UploadSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], UploadSettings.prototype, \"allowedExtensions\", void 0);\n __decorate([\n Property(true)\n ], UploadSettings.prototype, \"autoUpload\", void 0);\n __decorate([\n Property(false)\n ], UploadSettings.prototype, \"autoClose\", void 0);\n __decorate([\n Property(false)\n ], UploadSettings.prototype, \"directoryUpload\", void 0);\n __decorate([\n Property(0)\n ], UploadSettings.prototype, \"minFileSize\", void 0);\n __decorate([\n Property(30000000)\n ], UploadSettings.prototype, \"maxFileSize\", void 0);\n return UploadSettings;\n}(ChildProperty));\nexport { UploadSettings };\n","/* eslint-disable */\n/**\n * Export items model\n */\nexport var templateItems = ['alignments', 'formats', 'fontname', 'fontsize', 'fontcolor', 'backgroundcolor', 'align', 'display', 'audiolayoutoption', 'videolayoutoption', 'videoalign', 'tablerows', 'tablecolumns', 'tablecell', 'tablecellhorizontalalign', 'tablecellverticalalign', 'styles', 'numberformatlist', 'bulletformatlist'];\nexport var tools = {\n 'alignments': {\n 'id': 'Alignments',\n 'icon': 'e-alignments',\n 'tooltip': 'Alignments',\n 'command': 'Alignments',\n 'subCommand': 'Alignments'\n },\n 'justifyleft': {\n 'id': 'JustifyLeft',\n 'icon': 'e-justify-left',\n 'tooltip': 'JustifyLeft',\n 'command': 'Alignments',\n 'subCommand': 'JustifyLeft'\n },\n 'justifycenter': {\n 'id': 'JustifyCenter',\n 'icon': 'e-justify-center',\n 'tooltip': 'JustifyCenter',\n 'command': 'Alignments',\n 'subCommand': 'JustifyCenter'\n },\n 'justifyright': {\n 'id': 'JustifyRight',\n 'icon': 'e-justify-right',\n 'tooltip': 'JustifyRight',\n 'command': 'Alignments',\n 'subCommand': 'JustifyRight'\n },\n 'justifyfull': {\n 'id': 'JustifyFull',\n 'icon': 'e-justify-full',\n 'tooltip': 'JustifyFull',\n 'command': 'Alignments',\n 'subCommand': 'JustifyFull'\n },\n 'fontname': {\n 'id': 'FontName',\n 'icon': 'e-font-name',\n 'tooltip': 'Font Name',\n 'command': 'Font',\n 'subCommand': 'FontName'\n },\n 'fontsize': {\n 'id': 'FontSize',\n 'icon': 'e-font-size',\n 'tooltip': 'Font Size',\n 'command': 'Font',\n 'subCommand': 'FontSize'\n },\n 'fontcolor': {\n 'id': 'FontColor',\n 'icon': 'e-rte-font-color',\n 'tooltip': 'Font Color',\n 'command': 'Font',\n 'subCommand': 'FontColor',\n 'value': '#ff0000ff'\n },\n 'backgroundcolor': {\n 'id': 'BackgroundColor',\n 'icon': 'e-background-color',\n 'tooltip': 'Background Color',\n 'command': 'Font',\n 'subCommand': 'BackgroundColor',\n 'value': '#ffff00ff'\n },\n 'bold': {\n 'id': 'Bold',\n 'icon': 'e-bold',\n 'tooltip': 'Bold',\n 'command': 'Style',\n 'subCommand': 'Bold'\n },\n 'italic': {\n 'id': 'Italic',\n 'icon': 'e-italic',\n 'tooltip': 'Italic',\n 'command': 'Style',\n 'subCommand': 'Italic'\n },\n 'underline': {\n 'id': 'Underline',\n 'icon': 'e-underline',\n 'tooltip': 'Underline',\n 'command': 'Style',\n 'subCommand': 'Underline'\n },\n 'strikethrough': {\n 'id': 'StrikeThrough',\n 'icon': 'e-strike-through',\n 'tooltip': 'StrikeThrough',\n 'command': 'Style',\n 'subCommand': 'StrikeThrough'\n },\n 'clearformat': {\n 'id': 'ClearFormat',\n 'icon': 'e-clear-format',\n 'tooltip': 'Clear Format',\n 'command': 'Clear',\n 'subCommand': 'ClearFormat'\n },\n 'clearall': {\n 'id': 'ClearAll',\n 'icon': 'e-clear-all',\n 'tooltip': 'Clear All',\n 'command': 'Clear',\n 'subCommand': 'ClearAll'\n },\n 'cut': {\n 'id': 'Cut',\n 'icon': 'e-cut',\n 'tooltip': 'Cut',\n 'command': 'ClipBoard',\n 'subCommand': 'Cut'\n },\n 'copy': {\n 'id': 'Copy',\n 'icon': 'e-copy',\n 'tooltip': 'Copy',\n 'command': 'ClipBoard',\n 'subCommand': 'Copy'\n },\n 'paste': {\n 'id': 'Paste',\n 'icon': 'e-paste',\n 'tooltip': 'Paste',\n 'command': 'ClipBoard',\n 'subCommand': 'Paste'\n },\n 'unorderedlist': {\n 'id': 'UnorderedList',\n 'icon': 'e-unorder-list',\n 'tooltip': 'Bulleted List',\n 'command': 'Lists',\n 'subCommand': 'UL'\n },\n 'orderedlist': {\n 'id': 'OrderedList',\n 'icon': 'e-order-list',\n 'tooltip': 'Numbered List',\n 'command': 'Lists',\n 'subCommand': 'OL'\n },\n 'numberformatlist': {\n 'id': 'NumberFormatList',\n 'icon': 'e-order-list',\n 'tooltip': 'Number Format List',\n 'command': 'NumberFormatList',\n 'subCommand': 'NumberFormatList'\n },\n 'bulletformatlist': {\n 'id': 'BulletFormatList',\n 'icon': 'e-unorder-list',\n 'tooltip': 'Bullet Format List',\n 'command': 'BulletFormatList',\n 'subCommand': 'BulletFormatList'\n },\n 'indent': {\n 'id': 'Indent',\n 'icon': 'e-indent',\n 'tooltip': 'Increase Indent',\n 'command': 'Indents',\n 'subCommand': 'Indent'\n },\n 'outdent': {\n 'id': 'Outdent',\n 'icon': 'e-outdent',\n 'tooltip': 'Decrease Indent',\n 'command': 'Indents',\n 'subCommand': 'Outdent'\n },\n 'undo': {\n 'id': 'Undo',\n 'icon': 'e-undo',\n 'tooltip': 'Undo',\n 'command': 'Actions',\n 'subCommand': 'Undo'\n },\n 'redo': {\n 'id': 'Redo',\n 'icon': 'e-redo',\n 'tooltip': 'Redo',\n 'command': 'Actions',\n 'subCommand': 'Redo'\n },\n 'superscript': {\n 'id': 'SuperScript',\n 'icon': 'e-super-script',\n 'tooltip': 'Superscript',\n 'command': 'Effects',\n 'subCommand': 'SuperScript'\n },\n 'subscript': {\n 'id': 'SubScript',\n 'icon': 'e-sub-script',\n 'tooltip': 'Subscript',\n 'command': 'Effects',\n 'subCommand': 'SubScript'\n },\n 'createlink': {\n 'id': 'CreateLink',\n 'icon': 'e-create-link',\n 'tooltip': 'Insert Hyperlink',\n 'command': 'Links',\n 'subCommand': 'CreateLink'\n },\n 'openlink': {\n 'id': 'OpenLink',\n 'icon': 'e-open-link',\n 'tooltip': 'Open Link',\n 'command': 'Links',\n 'subCommand': 'OpenLink'\n },\n 'editlink': {\n 'id': 'EditLink',\n 'icon': 'e-edit-link',\n 'tooltip': 'Edit Link',\n 'command': 'Links',\n 'subCommand': 'EditLink'\n },\n 'removelink': {\n 'id': 'RemoveLink',\n 'icon': 'e-remove-link',\n 'tooltip': 'Remove Link',\n 'command': 'Links',\n 'subCommand': 'RemoveLink'\n },\n 'image': {\n 'id': 'Image',\n 'icon': 'e-image',\n 'tooltip': 'Insert Image',\n 'command': 'Images',\n 'subCommand': 'Image'\n },\n 'audio': {\n 'id': 'Audio',\n 'icon': 'e-audio',\n 'tooltip': 'Insert Audio',\n 'command': 'Audios',\n 'subCommand': 'Audio'\n },\n 'video': {\n 'id': 'Video',\n 'icon': 'e-video',\n 'tooltip': 'Insert Video',\n 'command': 'Videos',\n 'subCommand': 'Video'\n },\n 'filemanager': {\n 'id': 'FileManager',\n 'icon': 'e-rte-file-manager',\n 'tooltip': 'File Manager',\n 'command': 'Files',\n 'subCommand': 'File'\n },\n 'createtable': {\n 'id': 'CreateTable',\n 'icon': 'e-create-table',\n 'tooltip': 'Create Table',\n 'command': 'Table',\n 'subCommand': 'CreateTable'\n },\n 'removetable': {\n 'id': 'removeTable',\n 'icon': 'e-remove-table',\n 'tooltip': 'Remove Table',\n 'command': 'removeTable',\n 'subCommand': 'removeTable'\n },\n 'replace': {\n 'id': 'Replace',\n 'icon': 'e-replace',\n 'tooltip': 'Replace',\n 'command': 'Images',\n 'subCommand': 'Replace'\n },\n 'audioreplace': {\n 'id': 'AudioReplace',\n 'icon': 'e-audio-replace',\n 'tooltip': 'Audio Replace',\n 'command': 'Audios',\n 'subCommand': 'AudioReplace'\n },\n 'audioremove': {\n 'id': 'AudioRemove',\n 'icon': 'e-audio-remove',\n 'tooltip': 'Audio Remove',\n 'command': 'Audios',\n 'subCommand': 'AudioRemove'\n },\n 'audiolayoutoption': {\n 'id': 'AudioLayoutOption',\n 'icon': 'e-audio-display',\n 'tooltip': 'Audio LayoutOption',\n 'command': 'Audios',\n 'subCommand': 'AudioLayoutOption'\n },\n 'videoreplace': {\n 'id': 'VideoReplace',\n 'icon': 'e-video-replace',\n 'tooltip': 'Video Replace',\n 'command': 'Videos',\n 'subCommand': 'VideoReplace'\n },\n 'videoalign': {\n 'id': 'VideoAlign',\n 'icon': 'e-video-align',\n 'tooltip': 'Video Align',\n 'command': 'Videos',\n 'subCommand': 'VideoAlign'\n },\n 'videoremove': {\n 'id': 'VideoRemove',\n 'icon': 'e-video-remove',\n 'tooltip': 'Video Remove',\n 'command': 'Videos',\n 'subCommand': 'VideoRemove'\n },\n 'videolayoutoption': {\n 'id': 'VideoLayoutOption',\n 'icon': 'e-video-display',\n 'tooltip': 'Video LayoutOption',\n 'command': 'Videos',\n 'subCommand': 'VideoLayoutOption'\n },\n 'videodimension': {\n 'id': 'VideoDimension',\n 'icon': 'e-video-dimension',\n 'tooltip': 'Video Dimension',\n 'command': 'Videos',\n 'subCommand': 'VideoDimension'\n },\n 'align': {\n 'id': 'Align',\n 'icon': 'e-align',\n 'tooltip': 'Align',\n 'command': 'Images',\n 'subCommand': 'Align'\n },\n 'caption': {\n 'id': 'Caption',\n 'icon': 'e-caption',\n 'tooltip': 'Image Caption',\n 'command': 'Images',\n 'subCommand': 'Caption'\n },\n 'remove': {\n 'id': 'Remove',\n 'icon': 'e-remove',\n 'tooltip': 'Remove',\n 'command': 'Images',\n 'subCommand': 'Remove'\n },\n 'openimagelink': {\n 'id': 'OpenImageLink',\n 'icon': 'e-open-link',\n 'tooltip': 'Open Link',\n 'command': 'Images',\n 'subCommand': 'OpenImageLink'\n },\n 'editimagelink': {\n 'id': 'EditImageLink',\n 'icon': 'e-edit-link',\n 'tooltip': 'Edit Link',\n 'command': 'Images',\n 'subCommand': 'EditImageLink'\n },\n 'removeimagelink': {\n 'id': 'RemoveImageLink',\n 'icon': 'e-remove-link',\n 'tooltip': 'Remove Link',\n 'command': 'Images',\n 'subCommand': 'RemoveImageLink'\n },\n 'insertlink': {\n 'id': 'InsertLink',\n 'icon': 'e-insert-link',\n 'tooltip': 'Insert Link',\n 'command': 'Images',\n 'subCommand': 'InsertLink'\n },\n 'display': {\n 'id': 'Display',\n 'icon': 'e-display',\n 'tooltip': 'Display',\n 'command': 'Images',\n 'subCommand': 'Display'\n },\n 'alttext': {\n 'id': 'AltText',\n 'icon': 'e-alt-text',\n 'tooltip': 'Alternative Text',\n 'command': 'Images',\n 'subCommand': 'AltText'\n },\n 'dimension': {\n 'id': 'Dimension',\n 'icon': 'e-img-dimension',\n 'tooltip': 'Change Size',\n 'command': 'Images',\n 'subCommand': 'Dimension'\n },\n 'fullscreen': {\n 'id': 'Maximize',\n 'icon': 'e-maximize',\n 'tooltip': 'Maximize',\n 'command': 'View',\n 'subCommand': 'Maximize'\n },\n 'maximize': {\n 'id': 'Maximize',\n 'icon': 'e-maximize',\n 'tooltip': 'Maximize',\n 'command': 'FullScreen',\n 'subCommand': 'Maximize'\n },\n 'minimize': {\n 'id': 'Minimize',\n 'icon': 'e-minimize',\n 'tooltip': 'Minimize',\n 'command': 'FullScreen',\n 'subCommand': 'Minimize'\n },\n 'lowercase': {\n 'id': 'LowerCase',\n 'icon': 'e-lower-case',\n 'tooltip': 'Lower Case',\n 'command': 'Casing',\n 'subCommand': 'LowerCase'\n },\n 'uppercase': {\n 'id': 'UpperCase',\n 'icon': 'e-upper-case',\n 'tooltip': 'Upper Case',\n 'command': 'Casing',\n 'subCommand': 'UpperCase'\n },\n 'print': {\n 'id': 'Print',\n 'icon': 'e-print',\n 'tooltip': 'Print',\n 'command': 'Print',\n 'subCommand': 'Print'\n },\n 'formats': {\n 'id': 'Formats',\n 'icon': 'e-formats',\n 'tooltip': 'Formats',\n 'command': 'Formats',\n 'subCommand': 'Formats'\n },\n 'sourcecode': {\n 'id': 'SourceCode',\n 'icon': 'e-source-code',\n 'tooltip': 'Source Code',\n 'command': 'SourceCode',\n 'subCommand': 'SourceCode'\n },\n 'preview': {\n 'id': 'Preview',\n 'icon': 'e-preview',\n 'tooltip': 'Preview',\n 'command': 'Preview',\n 'subCommand': 'Preview'\n },\n 'viewside': {\n 'id': 'ViewSide',\n 'icon': 'e-view-side',\n 'tooltip': 'ViewSide',\n 'command': 'ViewSide',\n 'subCommand': 'ViewSide'\n },\n 'insertcode': {\n 'id': 'InsertCode',\n 'icon': 'e-insert-code',\n 'tooltip': 'Insert Code',\n 'command': 'Formats',\n 'subCommand': 'Pre'\n },\n 'tableheader': {\n 'id': 'TableHeader',\n 'icon': 'e-table-header',\n 'tooltip': 'Table Header',\n 'command': 'Table',\n 'subCommand': 'TableHeader'\n },\n 'tableremove': {\n 'id': 'TableRemove',\n 'icon': 'e-table-remove',\n 'tooltip': 'Table Remove',\n 'command': 'Table',\n 'subCommand': 'TableRemove'\n },\n 'tablerows': {\n 'id': 'TableRows',\n 'icon': 'e-table-rows',\n 'tooltip': 'Table Rows',\n 'command': 'Table',\n 'subCommand': 'TableRows'\n },\n 'tablecolumns': {\n 'id': 'TableColumns',\n 'icon': 'e-table-columns',\n 'tooltip': 'Table Columns',\n 'command': 'Table',\n 'subCommand': 'TableColumns'\n },\n 'tablecell': {\n 'id': 'TableCell',\n 'icon': 'e-table-cell',\n 'tooltip': 'Table Cell',\n 'command': 'Table',\n 'subCommand': 'TableCell'\n },\n 'tablecellbackground': {\n 'id': 'TableCellBackground',\n 'icon': 'e-table-cell-background',\n 'tooltip': 'Table Cell Background',\n 'command': 'Table',\n 'subCommand': 'TableCellBackground'\n },\n 'tablecellhorizontalalign': {\n 'id': 'TableCellHorizontalAlign',\n 'icon': 'e-table-cell-horizontalAlign',\n 'tooltip': 'Table Cell HorizontalAlign',\n 'command': 'Table',\n 'subCommand': 'TableCellHorizontalAlign'\n },\n 'tablecellverticalalign': {\n 'id': 'TableCellVerticalAlign',\n 'icon': 'e-table-cell-verticalAlign',\n 'tooltip': 'Table Cell VerticalAlign',\n 'command': 'Table',\n 'subCommand': 'TableCellVerticalAlign'\n },\n 'tableeditproperties': {\n 'id': 'TableEditProperties',\n 'icon': 'e-table-edit-properties',\n 'tooltip': 'Table Edit Properties',\n 'command': 'Table',\n 'subCommand': 'TableEditProperties'\n },\n 'styles': {\n 'id': 'Styles',\n 'icon': 'e-table-styles',\n 'tooltip': 'Styles',\n 'command': 'Table',\n 'subCommand': 'Styles'\n }\n};\nvar alignmentLocale = [\n { locale: 'alignmentsDropDownLeft', value: 'JustifyLeft' },\n { locale: 'alignmentsDropDownCenter', value: 'JustifyCenter' },\n { locale: 'alignmentsDropDownRight', value: 'JustifyRight' },\n { locale: 'alignmentsDropDownJustify', value: 'JustifyFull' }\n];\nexport var alignmentItems = [\n { iconCss: 'e-icons e-justify-left', text: 'Align Left', command: 'Alignments', subCommand: 'JustifyLeft' },\n { iconCss: 'e-icons e-justify-center', text: 'Align Center', command: 'Alignments', subCommand: 'JustifyCenter' },\n { iconCss: 'e-icons e-justify-right', text: 'Align Right', command: 'Alignments', subCommand: 'JustifyRight' },\n { iconCss: 'e-icons e-justify-full', text: 'Align Justify', command: 'Alignments', subCommand: 'JustifyFull' }\n];\nexport var imageAlignItems = [\n { iconCss: 'e-icons e-justify-left', command: 'Images', subCommand: 'JustifyLeft' },\n { iconCss: 'e-icons e-justify-center', command: 'Images', subCommand: 'JustifyCenter' },\n { iconCss: 'e-icons e-justify-right', command: 'Images', subCommand: 'JustifyRight' },\n];\nexport var videoAlignItems = [\n { iconCss: 'e-icons e-justify-left', command: 'Videos', subCommand: 'JustifyLeft' },\n { iconCss: 'e-icons e-justify-center', command: 'Videos', subCommand: 'JustifyCenter' },\n { iconCss: 'e-icons e-justify-right', command: 'Videos', subCommand: 'JustifyRight' },\n];\nvar displayLocale = [\n { locale: 'imageDisplayDropDownInline', value: 'Inline' },\n { locale: 'imageDisplayDropDownBreak', value: 'Break' }\n];\nvar audioLayoutOptionLocale = [\n { locale: 'audioLayoutOptionDropDownInline', value: 'Inline' },\n { locale: 'audioLayoutOptionDropDownBreak', value: 'Break' }\n];\nvar videoLayoutOptionLocale = [\n { locale: 'videoLayoutOptionDropDownInline', value: 'Inline' },\n { locale: 'videoLayoutOptionDropDownBreak', value: 'Break' }\n];\nexport var imageDisplayItems = [\n { text: 'Inline', cssClass: 'e-inline', command: 'Images', subCommand: 'Inline' },\n { text: 'Break', cssClass: 'e-break', command: 'Images', subCommand: 'Break' },\n];\nexport var audioLayoutOptionItems = [\n { text: 'Inline', cssClass: 'e-audio-inline', command: 'Audios', subCommand: 'Inline' },\n { text: 'Break', cssClass: 'e-audio-break', command: 'Audios', subCommand: 'Break' },\n];\nexport var videoLayoutOptionItems = [\n { text: 'Inline', cssClass: 'e-video-inline', command: 'Videos', subCommand: 'Inline' },\n { text: 'Break', cssClass: 'e-video-break', command: 'Videos', subCommand: 'Break' },\n];\nexport var tableCellItems = [\n { iconCss: 'e-icons e-cell-merge', text: 'Merge cells', command: 'Table', subCommand: 'Merge' },\n { iconCss: 'e-icons e-cell-horizontal-split', text: 'Horizontal split', command: 'Table', subCommand: 'HorizontalSplit' },\n { iconCss: 'e-icons e-cell-vertical-split', text: 'Vertical split', command: 'Table', subCommand: 'VerticalSplit' },\n];\nvar tableRowLocale = [\n { locale: 'tableInsertRowDropDownBefore', value: 'InsertRowBefore' },\n { locale: 'tableInsertRowDropDownAfter', value: 'InsertRowAfter' },\n { locale: 'tableInsertRowDropDownDelete', value: 'DeleteRow' }\n];\nexport var tableRowsItems = [\n { iconCss: 'e-icons e-insert-row-before', text: 'Insert row before', command: 'Table', subCommand: 'InsertRowBefore' },\n { iconCss: 'e-icons e-insert-row-after', text: 'Insert row after', command: 'Table', subCommand: 'InsertRowAfter' },\n { iconCss: 'e-icons e-delete-row', text: 'Delete row', command: 'Table', subCommand: 'DeleteRow' },\n];\nvar tableColumnLocale = [\n { locale: 'tableInsertColumnDropDownLeft', value: 'InsertColumnLeft' },\n { locale: 'tableInsertColumnDropDownRight', value: 'InsertColumnRight' },\n { locale: 'tableInsertColumnDropDownDelete', value: 'DeleteColumn' }\n];\nexport var tableColumnsItems = [\n { iconCss: 'e-icons e-insert-column-left', text: 'Insert column left', command: 'Table', subCommand: 'InsertColumnLeft' },\n { iconCss: 'e-icons e-insert-column-right', text: 'Insert column right', command: 'Table', subCommand: 'InsertColumnRight' },\n { iconCss: 'e-icons e-delete-column', text: 'Delete column', command: 'Table', subCommand: 'DeleteColumn' },\n];\nvar tableVerticalLocale = [\n { locale: 'tableVerticalAlignDropDownTop', value: 'AlignTop' },\n { locale: 'tableVerticalAlignDropDownMiddle', value: 'AlignMiddle' },\n { locale: 'tableVerticalAlignDropDownBottom', value: 'AlignBottom' }\n];\nexport var TableCellVerticalAlignItems = [\n { iconCss: 'e-icons e-align-top', text: 'Align Top', command: 'Table', subCommand: 'AlignTop' },\n { iconCss: 'e-icons e-align-middle', text: 'Align Middle', command: 'Table', subCommand: 'AlignMiddle' },\n { iconCss: 'e-icons e-align-bottom', text: 'Align Bottom', command: 'Table', subCommand: 'AlignBottom' },\n];\nvar tableStyleLocale = [\n { locale: 'tableStylesDropDownDashedBorder', value: 'Dashed' },\n { locale: 'tableStylesDropDownAlternateRows', value: 'Alternate' }\n];\nexport var TableStyleItems = [\n { text: 'Dashed Borders', cssClass: 'e-dashed-borders', command: 'Table', subCommand: 'Dashed' },\n { text: 'Alternate Rows', cssClass: 'e-alternate-rows', command: 'Table', subCommand: 'Alternate' }\n];\nexport var predefinedItems = ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments',\n 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', 'Undo', 'Redo'];\nexport var fontFamily = [\n { cssClass: 'e-segoe-ui', text: 'Segoe UI', command: 'Font', subCommand: 'FontName', value: 'Segoe UI' },\n { cssClass: 'e-arial', text: 'Arial', command: 'Font', subCommand: 'FontName', value: 'Arial,Helvetica,sans-serif' },\n { cssClass: 'e-georgia', text: 'Georgia', command: 'Font', subCommand: 'FontName', value: 'Georgia,serif' },\n { cssClass: 'e-impact', text: 'Impact', command: 'Font', subCommand: 'FontName', value: 'Impact,Charcoal,sans-serif' },\n { cssClass: 'e-tahoma', text: 'Tahoma', command: 'Font', subCommand: 'FontName', value: 'Tahoma,Geneva,sans-serif' },\n { cssClass: 'e-times-new-roman', text: 'Times New Roman', command: 'Font', subCommand: 'FontName', value: 'Times New Roman,Times,serif' },\n { cssClass: 'e-verdana', text: 'Verdana', command: 'Font', subCommand: 'FontName', value: 'Verdana,Geneva,sans-serif' }\n];\nexport var fontSize = [\n { text: '8 pt', value: '8pt' },\n { text: '10 pt', value: '10pt' },\n { text: '12 pt', value: '12pt' },\n { text: '14 pt', value: '14pt' },\n { text: '18 pt', value: '18pt' },\n { text: '24 pt', value: '24pt' },\n { text: '36 pt', value: '36pt' }\n];\nexport var formatItems = [\n { cssClass: 'e-paragraph', text: 'Paragraph', command: 'Formats', subCommand: 'P', value: 'P' },\n { cssClass: 'e-code', text: 'Code', command: 'Formats', subCommand: 'Pre', value: 'Pre' },\n { cssClass: 'e-quote', text: 'Quotation', command: 'Formats', subCommand: 'BlockQuote', value: 'BlockQuote' },\n { cssClass: 'e-h1', text: 'Heading 1', command: 'Formats', subCommand: 'H1', value: 'H1' },\n { cssClass: 'e-h2', text: 'Heading 2', command: 'Formats', subCommand: 'H2', value: 'H2' },\n { cssClass: 'e-h3', text: 'Heading 3', command: 'Formats', subCommand: 'H3', value: 'H3' },\n { cssClass: 'e-h4', text: 'Heading 4', command: 'Formats', subCommand: 'H4', value: 'H4' }\n];\nexport var fontColor = {\n 'Custom': [\n '', '#000000', '#e7e6e6', '#44546a', '#4472c4', '#ed7d31', '#a5a5a5', '#ffc000', '#70ad47', '#ff0000',\n '#f2f2f2', '#808080', '#cfcdcd', '#d5dce4', '#d9e2f3', '#fbe4d5', '#ededed', '#fff2cc', '#e2efd9', '#ffcccc',\n '#d9d9d9', '#595959', '#aeaaaa', '#acb9ca', '#b4c6e7', '#f7caac', '#dbdbdb', '#ffe599', '#c5e0b3', '#ff8080',\n '#bfbfbf', '#404040', '#747070', '#8496b0', '#8eaadb', '#f4b083', '#c9c9c9', '#ffd966', '#a8d08d', '#ff3333',\n '#a6a6a6', '#262626', '#3b3838', '#323e4f', '#2f5496', '#c45911', '#7b7b7b', '#bf8f00', '#538135', '#b30000',\n '#7f7f7f', '#0d0d0d', '#161616', '#212934', '#1f3763', '#823b0b', '#525252', '#7f5f00', '#375623', '#660000'\n ]\n};\nexport var backgroundColor = {\n 'Custom': [\n '', '#000000', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#ff0000', '#000080', '#800080', '#996633',\n '#f2f2f2', '#808080', '#ffffcc', '#b3ffb3', '#ccffff', '#ccccff', '#ffcccc', '#ccccff', '#ff80ff', '#f2e6d9',\n '#d9d9d9', '#595959', '#ffff80', '#80ff80', '#b3ffff', '#8080ff', '#ff8080', '#8080ff', '#ff00ff', '#dfbf9f',\n '#bfbfbf', '#404040', '#ffff33', '#33ff33', '#33ffff', '#3333ff', '#ff3333', '#0000b3', '#b300b3', '#c68c53',\n '#a6a6a6', '#262626', '#e6e600', '#00b300', '#009999', '#000099', '#b30000', '#000066', '#660066', '#86592d',\n '#7f7f7f', '#0d0d0d', '#999900', '#006600', '#006666', '#000066', '#660000', '#00004d', '#4d004d', '#734d26'\n ]\n};\nexport var numberFormatList = [\n { text: 'None', command: 'Lists', subCommand: 'NumberFormatList', value: 'none' },\n { text: 'Number', command: 'Lists', subCommand: 'NumberFormatList', value: 'decimal' },\n { text: 'Lower Greek', command: 'Lists', subCommand: 'NumberFormatList', value: 'lowerGreek' },\n { text: 'Lower Roman', command: 'Lists', subCommand: 'NumberFormatList', value: 'lowerRoman' },\n { text: 'Upper Alpha', command: 'Lists', subCommand: 'NumberFormatList', value: 'upperAlpha' },\n { text: 'Lower Alpha', command: 'Lists', subCommand: 'NumberFormatList', value: 'lowerAlpha' },\n { text: 'Upper Roman', command: 'Lists', subCommand: 'NumberFormatList', value: 'upperRoman' },\n];\nexport var bulletFormatList = [\n { text: 'None', command: 'Lists', subCommand: 'BulletFormatList', value: 'none' },\n { text: 'Disc', command: 'Lists', subCommand: 'BulletFormatList', value: 'disc' },\n { text: 'Circle', command: 'Lists', subCommand: 'BulletFormatList', value: 'circle' },\n { text: 'Square', command: 'Lists', subCommand: 'BulletFormatList', value: 'square' },\n];\nfunction getLocale(self, localeItems, item) {\n for (var i = 0; localeItems.length > i; i++) {\n if (localeItems[i].value === item.subCommand) {\n return self.localeObj.getConstant(localeItems[i].locale);\n }\n }\n return item.text;\n}\nexport function updateDropDownLocale(self) {\n alignmentItems.forEach(function (item, i) {\n alignmentItems[i].text = getLocale(self, alignmentLocale, alignmentItems[i]);\n });\n imageDisplayItems.forEach(function (item, i) {\n imageDisplayItems[i].text = getLocale(self, displayLocale, imageDisplayItems[i]);\n });\n audioLayoutOptionItems.forEach(function (item, i) {\n audioLayoutOptionItems[i].text = getLocale(self, audioLayoutOptionLocale, audioLayoutOptionItems[i]);\n });\n videoLayoutOptionItems.forEach(function (item, i) {\n videoLayoutOptionItems[i].text = getLocale(self, videoLayoutOptionLocale, videoLayoutOptionItems[i]);\n });\n tableRowsItems.forEach(function (item, i) {\n tableRowsItems[i].text = getLocale(self, tableRowLocale, tableRowsItems[i]);\n });\n tableColumnsItems.forEach(function (item, i) {\n tableColumnsItems[i].text = getLocale(self, tableColumnLocale, tableColumnsItems[i]);\n });\n TableCellVerticalAlignItems.forEach(function (item, i) {\n TableCellVerticalAlignItems[i].text = getLocale(self, tableVerticalLocale, TableCellVerticalAlignItems[i]);\n });\n TableStyleItems.forEach(function (item, i) {\n TableStyleItems[i].text = getLocale(self, tableStyleLocale, TableStyleItems[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};\nimport { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';\nimport { AjaxSettings, ContextMenuSettings } from '@syncfusion/ej2-filemanager';\nimport { DetailsViewSettings, NavigationPaneSettings } from '@syncfusion/ej2-filemanager';\nimport { SearchSettings } from '@syncfusion/ej2-filemanager';\nimport { ToolbarSettings as FileToolbarSettings } from '@syncfusion/ej2-filemanager';\nimport { UploadSettings } from '@syncfusion/ej2-filemanager';\nimport { ToolbarType } from '../base/enum';\nimport { backgroundColor, fontColor, fontFamily, fontSize, formatItems, predefinedItems, TableStyleItems, numberFormatList, bulletFormatList } from './items';\n/**\n * Configures the toolbar settings of the RichTextEditor.\n */\nvar ToolbarSettings = /** @class */ (function (_super) {\n __extends(ToolbarSettings, _super);\n function ToolbarSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], ToolbarSettings.prototype, \"enable\", void 0);\n __decorate([\n Property(true)\n ], ToolbarSettings.prototype, \"enableFloating\", void 0);\n __decorate([\n Property(ToolbarType.Expand)\n ], ToolbarSettings.prototype, \"type\", void 0);\n __decorate([\n Property(predefinedItems)\n ], ToolbarSettings.prototype, \"items\", void 0);\n __decorate([\n Property({})\n ], ToolbarSettings.prototype, \"itemConfigs\", void 0);\n return ToolbarSettings;\n}(ChildProperty));\nexport { ToolbarSettings };\n/**\n * Configures the image settings of the RichTextEditor.\n */\nvar ImageSettings = /** @class */ (function (_super) {\n __extends(ImageSettings, _super);\n function ImageSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(['.jpeg', '.jpg', '.png'])\n ], ImageSettings.prototype, \"allowedTypes\", void 0);\n __decorate([\n Property('inline')\n ], ImageSettings.prototype, \"display\", void 0);\n __decorate([\n Property('Blob')\n ], ImageSettings.prototype, \"saveFormat\", void 0);\n __decorate([\n Property('auto')\n ], ImageSettings.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], ImageSettings.prototype, \"height\", void 0);\n __decorate([\n Property(null)\n ], ImageSettings.prototype, \"saveUrl\", void 0);\n __decorate([\n Property(null)\n ], ImageSettings.prototype, \"path\", void 0);\n __decorate([\n Property(true)\n ], ImageSettings.prototype, \"resize\", void 0);\n __decorate([\n Property(null)\n ], ImageSettings.prototype, \"removeUrl\", void 0);\n __decorate([\n Property(0)\n ], ImageSettings.prototype, \"minWidth\", void 0);\n __decorate([\n Property(null)\n ], ImageSettings.prototype, \"maxWidth\", void 0);\n __decorate([\n Property(0)\n ], ImageSettings.prototype, \"minHeight\", void 0);\n __decorate([\n Property(null)\n ], ImageSettings.prototype, \"maxHeight\", void 0);\n __decorate([\n Property(false)\n ], ImageSettings.prototype, \"resizeByPercent\", void 0);\n return ImageSettings;\n}(ChildProperty));\nexport { ImageSettings };\n/**\n * Configures the audio settings of the RichTextEditor.\n */\nvar AudioSettings = /** @class */ (function (_super) {\n __extends(AudioSettings, _super);\n function AudioSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(['.wav', '.mp3', '.m4a', '.wma'])\n ], AudioSettings.prototype, \"allowedTypes\", void 0);\n __decorate([\n Property('Inline')\n ], AudioSettings.prototype, \"layoutOption\", void 0);\n __decorate([\n Property('Blob')\n ], AudioSettings.prototype, \"saveFormat\", void 0);\n __decorate([\n Property(null)\n ], AudioSettings.prototype, \"saveUrl\", void 0);\n __decorate([\n Property(null)\n ], AudioSettings.prototype, \"removeUrl\", void 0);\n __decorate([\n Property(null)\n ], AudioSettings.prototype, \"path\", void 0);\n return AudioSettings;\n}(ChildProperty));\nexport { AudioSettings };\n/**\n * Configures the video settings of the RichTextEditor.\n */\nvar VideoSettings = /** @class */ (function (_super) {\n __extends(VideoSettings, _super);\n function VideoSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(['.mp4', '.mov', '.wmv', '.avi'])\n ], VideoSettings.prototype, \"allowedTypes\", void 0);\n __decorate([\n Property('Inline')\n ], VideoSettings.prototype, \"layoutOption\", void 0);\n __decorate([\n Property('Blob')\n ], VideoSettings.prototype, \"saveFormat\", void 0);\n __decorate([\n Property('auto')\n ], VideoSettings.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], VideoSettings.prototype, \"height\", void 0);\n __decorate([\n Property(null)\n ], VideoSettings.prototype, \"saveUrl\", void 0);\n __decorate([\n Property(null)\n ], VideoSettings.prototype, \"path\", void 0);\n __decorate([\n Property(true)\n ], VideoSettings.prototype, \"resize\", void 0);\n __decorate([\n Property(null)\n ], VideoSettings.prototype, \"removeUrl\", void 0);\n __decorate([\n Property(0)\n ], VideoSettings.prototype, \"minWidth\", void 0);\n __decorate([\n Property(null)\n ], VideoSettings.prototype, \"maxWidth\", void 0);\n __decorate([\n Property(0)\n ], VideoSettings.prototype, \"minHeight\", void 0);\n __decorate([\n Property(null)\n ], VideoSettings.prototype, \"maxHeight\", void 0);\n __decorate([\n Property(false)\n ], VideoSettings.prototype, \"resizeByPercent\", void 0);\n return VideoSettings;\n}(ChildProperty));\nexport { VideoSettings };\n/**\n * Configures the file manager settings of the RichTextEditor.\n */\nvar FileManagerSettings = /** @class */ (function (_super) {\n __extends(FileManagerSettings, _super);\n function FileManagerSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({ getImageUrl: null, url: null, uploadUrl: null }, AjaxSettings)\n ], FileManagerSettings.prototype, \"ajaxSettings\", void 0);\n __decorate([\n Property(false)\n ], FileManagerSettings.prototype, \"allowDragAndDrop\", void 0);\n __decorate([\n Complex({ visible: true, file: ['Open', '|', 'Cut', 'Copy', '|', 'Delete', 'Rename', '|', 'Details'], folder: ['Open', '|', 'Cut', 'Copy', 'Paste', '|', 'Delete', 'Rename', '|', 'Details'], layout: ['SortBy', 'View', 'Refresh', '|', 'Paste', '|', 'NewFolder', 'Upload', '|', 'Details', '|', 'SelectAll'] }, ContextMenuSettings)\n ], FileManagerSettings.prototype, \"contextMenuSettings\", void 0);\n __decorate([\n Property('')\n ], FileManagerSettings.prototype, \"cssClass\", void 0);\n __decorate([\n Complex({}, DetailsViewSettings)\n ], FileManagerSettings.prototype, \"detailsViewSettings\", void 0);\n __decorate([\n Property(false)\n ], FileManagerSettings.prototype, \"enable\", void 0);\n __decorate([\n Complex({ maxWidth: '650px', minWidth: '240px', visible: true }, NavigationPaneSettings)\n ], FileManagerSettings.prototype, \"navigationPaneSettings\", void 0);\n __decorate([\n Property('/')\n ], FileManagerSettings.prototype, \"path\", void 0);\n __decorate([\n Property(null)\n ], FileManagerSettings.prototype, \"rootAliasName\", void 0);\n __decorate([\n Complex({}, SearchSettings)\n ], FileManagerSettings.prototype, \"searchSettings\", void 0);\n __decorate([\n Property(true)\n ], FileManagerSettings.prototype, \"showFileExtension\", void 0);\n __decorate([\n Property(false)\n ], FileManagerSettings.prototype, \"showHiddenItems\", void 0);\n __decorate([\n Property(true)\n ], FileManagerSettings.prototype, \"showThumbnail\", void 0);\n __decorate([\n Property('Ascending')\n ], FileManagerSettings.prototype, \"sortOrder\", void 0);\n __decorate([\n Complex({ visible: true, items: ['NewFolder', 'Upload', 'Cut', 'Copy', 'Paste', 'Delete', 'Download', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details'] }, FileToolbarSettings)\n ], FileManagerSettings.prototype, \"toolbarSettings\", void 0);\n __decorate([\n Complex({ autoUpload: true, minFileSize: 0, maxFileSize: 30000000, allowedExtensions: '', autoClose: false }, UploadSettings)\n ], FileManagerSettings.prototype, \"uploadSettings\", void 0);\n __decorate([\n Property('LargeIcons')\n ], FileManagerSettings.prototype, \"view\", void 0);\n return FileManagerSettings;\n}(ChildProperty));\nexport { FileManagerSettings };\nvar TableSettings = /** @class */ (function (_super) {\n __extends(TableSettings, _super);\n function TableSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('100%')\n ], TableSettings.prototype, \"width\", void 0);\n __decorate([\n Property(TableStyleItems)\n ], TableSettings.prototype, \"styles\", void 0);\n __decorate([\n Property(true)\n ], TableSettings.prototype, \"resize\", void 0);\n __decorate([\n Property(0)\n ], TableSettings.prototype, \"minWidth\", void 0);\n __decorate([\n Property(null)\n ], TableSettings.prototype, \"maxWidth\", void 0);\n return TableSettings;\n}(ChildProperty));\nexport { TableSettings };\n/**\n * Configures the quick toolbar settings of the RichTextEditor.\n */\nvar QuickToolbarSettings = /** @class */ (function (_super) {\n __extends(QuickToolbarSettings, _super);\n function QuickToolbarSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], QuickToolbarSettings.prototype, \"enable\", void 0);\n __decorate([\n Property(false)\n ], QuickToolbarSettings.prototype, \"showOnRightClick\", void 0);\n __decorate([\n Property('hide')\n ], QuickToolbarSettings.prototype, \"actionOnScroll\", void 0);\n __decorate([\n Property(['Open', 'Edit', 'UnLink'])\n ], QuickToolbarSettings.prototype, \"link\", void 0);\n __decorate([\n Property(['Replace', 'Align', 'Caption', 'Remove', '-', 'InsertLink', 'OpenImageLink', 'EditImageLink', 'RemoveImageLink', 'Display', 'AltText', 'Dimension'])\n ], QuickToolbarSettings.prototype, \"image\", void 0);\n __decorate([\n Property(['AudioReplace', 'AudioRemove', 'AudioLayoutOption'])\n ], QuickToolbarSettings.prototype, \"audio\", void 0);\n __decorate([\n Property(['VideoReplace', 'VideoAlign', 'VideoRemove', 'VideoLayoutOption', 'VideoDimension'])\n ], QuickToolbarSettings.prototype, \"video\", void 0);\n __decorate([\n Property(['Cut', 'Copy', 'Paste'])\n ], QuickToolbarSettings.prototype, \"text\", void 0);\n __decorate([\n Property(['TableHeader', 'TableRows', 'TableColumns', 'BackgroundColor', '-', 'TableRemove', 'Alignments', 'TableCellVerticalAlign', 'Styles'])\n ], QuickToolbarSettings.prototype, \"table\", void 0);\n return QuickToolbarSettings;\n}(ChildProperty));\nexport { QuickToolbarSettings };\n/**\n * Configures the Paste Cleanup settings of the RichTextEditor.\n */\nvar PasteCleanupSettings = /** @class */ (function (_super) {\n __extends(PasteCleanupSettings, _super);\n function PasteCleanupSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], PasteCleanupSettings.prototype, \"prompt\", void 0);\n __decorate([\n Property(null)\n ], PasteCleanupSettings.prototype, \"deniedAttrs\", void 0);\n __decorate([\n Property(['background', 'background-color', 'border', 'border-bottom', 'border-left', 'border-radius', 'border-right', 'border-style', 'border-top', 'border-width', 'clear', 'color', 'cursor', 'direction', 'display', 'float', 'font', 'font-family', 'font-size', 'font-weight', 'font-style', 'height', 'left', 'line-height', 'list-style-type', 'margin', 'margin-top', 'margin-left', 'margin-right', 'margin-bottom', 'max-height', 'max-width', 'min-height', 'min-width', 'overflow', 'overflow-x', 'overflow-y', 'padding', 'padding-bottom', 'padding-left', 'padding-right', 'padding-top', 'position', 'right', 'table-layout', 'text-align', 'text-decoration', 'text-indent', 'top', 'vertical-align', 'visibility', 'white-space', 'width'])\n ], PasteCleanupSettings.prototype, \"allowedStyleProps\", void 0);\n __decorate([\n Property(null)\n ], PasteCleanupSettings.prototype, \"deniedTags\", void 0);\n __decorate([\n Property(true)\n ], PasteCleanupSettings.prototype, \"keepFormat\", void 0);\n __decorate([\n Property(false)\n ], PasteCleanupSettings.prototype, \"plainText\", void 0);\n return PasteCleanupSettings;\n}(ChildProperty));\nexport { PasteCleanupSettings };\n/**\n * Configures the font family settings of the RichTextEditor.\n */\nvar FontFamily = /** @class */ (function (_super) {\n __extends(FontFamily, _super);\n function FontFamily() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], FontFamily.prototype, \"default\", void 0);\n __decorate([\n Property('65px')\n ], FontFamily.prototype, \"width\", void 0);\n __decorate([\n Property(fontFamily)\n ], FontFamily.prototype, \"items\", void 0);\n return FontFamily;\n}(ChildProperty));\nexport { FontFamily };\n/**\n * Configures the font size settings of the RichTextEditor.\n */\nvar FontSize = /** @class */ (function (_super) {\n __extends(FontSize, _super);\n function FontSize() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], FontSize.prototype, \"default\", void 0);\n __decorate([\n Property('35px')\n ], FontSize.prototype, \"width\", void 0);\n __decorate([\n Property(fontSize)\n ], FontSize.prototype, \"items\", void 0);\n return FontSize;\n}(ChildProperty));\nexport { FontSize };\n/**\n * Configures the format settings of the RichTextEditor.\n */\nvar Format = /** @class */ (function (_super) {\n __extends(Format, _super);\n function Format() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], Format.prototype, \"default\", void 0);\n __decorate([\n Property('65px')\n ], Format.prototype, \"width\", void 0);\n __decorate([\n Property(formatItems)\n ], Format.prototype, \"types\", void 0);\n return Format;\n}(ChildProperty));\nexport { Format };\n/**\n * Configures the font Color settings of the RichTextEditor.\n */\nvar FontColor = /** @class */ (function (_super) {\n __extends(FontColor, _super);\n function FontColor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('#ff0000')\n ], FontColor.prototype, \"default\", void 0);\n __decorate([\n Property('Palette')\n ], FontColor.prototype, \"mode\", void 0);\n __decorate([\n Property(10)\n ], FontColor.prototype, \"columns\", void 0);\n __decorate([\n Property(fontColor)\n ], FontColor.prototype, \"colorCode\", void 0);\n __decorate([\n Property(false)\n ], FontColor.prototype, \"modeSwitcher\", void 0);\n return FontColor;\n}(ChildProperty));\nexport { FontColor };\n/**\n * Configures the background Color settings of the RichTextEditor.\n */\nvar BackgroundColor = /** @class */ (function (_super) {\n __extends(BackgroundColor, _super);\n function BackgroundColor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('#ffff00')\n ], BackgroundColor.prototype, \"default\", void 0);\n __decorate([\n Property('Palette')\n ], BackgroundColor.prototype, \"mode\", void 0);\n __decorate([\n Property(10)\n ], BackgroundColor.prototype, \"columns\", void 0);\n __decorate([\n Property(backgroundColor)\n ], BackgroundColor.prototype, \"colorCode\", void 0);\n __decorate([\n Property(false)\n ], BackgroundColor.prototype, \"modeSwitcher\", void 0);\n return BackgroundColor;\n}(ChildProperty));\nexport { BackgroundColor };\n/**\n * Configures the numberFormatList settings of the RichTextEditor.\n */\nvar NumberFormatList = /** @class */ (function (_super) {\n __extends(NumberFormatList, _super);\n function NumberFormatList() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(numberFormatList)\n ], NumberFormatList.prototype, \"types\", void 0);\n return NumberFormatList;\n}(ChildProperty));\nexport { NumberFormatList };\n/**\n * Configures the bulletFormatList settings of the RichTextEditor.\n */\nvar BulletFormatList = /** @class */ (function (_super) {\n __extends(BulletFormatList, _super);\n function BulletFormatList() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(bulletFormatList)\n ], BulletFormatList.prototype, \"types\", void 0);\n return BulletFormatList;\n}(ChildProperty));\nexport { BulletFormatList };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';\n/**\n * Objects used for configuring the iframe resources properties.\n */\nvar Resources = /** @class */ (function (_super) {\n __extends(Resources, _super);\n function Resources() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property([])\n ], Resources.prototype, \"styles\", void 0);\n __decorate([\n Property([])\n ], Resources.prototype, \"scripts\", void 0);\n return Resources;\n}(ChildProperty));\nexport { Resources };\n/**\n * Configures the iframe settings of the RTE.\n */\nvar IFrameSettings = /** @class */ (function (_super) {\n __extends(IFrameSettings, _super);\n function IFrameSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], IFrameSettings.prototype, \"enable\", void 0);\n __decorate([\n Property(null)\n ], IFrameSettings.prototype, \"attributes\", void 0);\n __decorate([\n Complex({}, Resources)\n ], IFrameSettings.prototype, \"resources\", void 0);\n return IFrameSettings;\n}(ChildProperty));\nexport { IFrameSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Configures the inlineMode property of the RTE.\n */\nvar InlineMode = /** @class */ (function (_super) {\n __extends(InlineMode, _super);\n function InlineMode() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], InlineMode.prototype, \"enable\", void 0);\n __decorate([\n Property(true)\n ], InlineMode.prototype, \"onSelection\", void 0);\n return InlineMode;\n}(ChildProperty));\nexport { InlineMode };\n","/* eslint-disable */\n/**\n * Export default locale\n */\nexport var defaultLocale = {\n 'alignments': 'Alignments',\n 'justifyLeft': 'Align Left',\n 'justifyCenter': 'Align Center',\n 'justifyRight': 'Align Right',\n 'justifyFull': 'Align Justify',\n 'fontName': 'Font Name',\n 'fontSize': 'Font Size',\n 'fontColor': 'Font Color',\n 'backgroundColor': 'Background Color',\n 'bold': 'Bold',\n 'italic': 'Italic',\n 'underline': 'Underline',\n 'strikethrough': 'Strikethrough',\n 'clearFormat': 'Clear Format',\n 'clearAll': 'Clear All',\n 'cut': 'Cut',\n 'copy': 'Copy',\n 'paste': 'Paste',\n 'unorderedList': 'Bulleted List',\n 'orderedList': 'Numbered List',\n 'indent': 'Increase Indent',\n 'outdent': 'Decrease Indent',\n 'undo': 'Undo',\n 'redo': 'Redo',\n 'superscript': 'Superscript',\n 'subscript': 'Subscript',\n 'createLink': 'Insert Link',\n 'openLink': 'Open Link',\n 'editLink': 'Edit Link',\n 'removeLink': 'Remove Link',\n 'image': 'Insert Image',\n 'audio': 'Insert Audio',\n 'video': 'Insert Video',\n 'replace': 'Replace',\n 'numberFormatList': 'Number Format List',\n 'bulletFormatList': 'Bullet Format List',\n 'audioReplace': 'Replace',\n 'videoReplace': 'Replace',\n 'videoAlign': 'Align',\n 'videoDimension': 'Dimension',\n 'audioRemove': 'Remove',\n 'videoRemove': 'Remove',\n 'audioLayoutOption': 'Layout option',\n 'videoLayoutOption': 'Layout option',\n 'align': 'Align',\n 'caption': 'Image Caption',\n 'remove': 'Remove',\n 'insertLink': 'Insert Link',\n 'display': 'Display',\n 'altText': 'Alternative Text',\n 'dimension': 'Change Size',\n 'fullscreen': 'Maximize',\n 'maximize': 'Maximize',\n 'minimize': 'Minimize',\n 'lowerCase': 'Lower Case',\n 'upperCase': 'Upper Case',\n 'print': 'Print',\n 'formats': 'Formats',\n 'sourcecode': 'Code View',\n 'preview': 'Preview',\n 'viewside': 'ViewSide',\n 'insertCode': 'Insert Code',\n 'linkText': 'Display Text',\n 'linkTooltipLabel': 'Title',\n 'linkWebUrl': 'Web Address',\n 'linkTitle': 'Enter a title',\n 'linkurl': 'http://example.com',\n 'linkOpenInNewWindow': 'Open Link in New Window',\n 'linkHeader': 'Insert Link',\n 'dialogInsert': 'Insert',\n 'dialogCancel': 'Cancel',\n 'dialogUpdate': 'Update',\n 'imageHeader': 'Insert Image',\n 'audioHeader': 'Insert Audio',\n 'videoHeader': 'Insert Video',\n 'imageLinkHeader': 'You can also provide a link from the web',\n 'audioLinkHeader': 'You can also provide a link from the web',\n 'videoLinkHeader': 'Web URL',\n 'embedVideoLinkHeader': 'Media Embed URL',\n 'mdimageLink': 'Please provide a URL for your image',\n 'imageUploadMessage': 'Drop image here or browse to upload',\n 'audioUploadMessage': 'Drop an audio file or browse to upload',\n 'videoUploadMessage': 'Drop a video file or browse to upload',\n 'imageDeviceUploadMessage': 'Click here to upload',\n 'audioDeviceUploadMessage': 'Click here to upload',\n 'videoDeviceUploadMessage': 'Click here to upload',\n 'imageAlternateText': 'Alternate Text',\n 'alternateHeader': 'Alternative Text',\n 'browse': 'Browse',\n 'imageUrl': 'http://example.com/image.png',\n 'audioUrl': 'http://example.com/audio.mp3',\n 'videoUrl': 'http://example.com/video.mp3',\n 'webUrl': 'Web URL',\n 'embedUrl': 'Embed Code',\n 'imageCaption': 'Caption',\n 'imageSizeHeader': 'Image Size',\n 'videoSizeHeader': 'Video Size',\n 'imageHeight': 'Height',\n 'imageWidth': 'Width',\n 'videoHeight': 'Height',\n 'videoWidth': 'Width',\n 'textPlaceholder': 'Enter Text',\n 'inserttablebtn': 'Insert Table',\n 'tabledialogHeader': 'Insert Table',\n 'tableWidth': 'Width',\n 'cellpadding': 'Cell Padding',\n 'cellspacing': 'Cell Spacing',\n 'columns': 'Number of columns',\n 'rows': 'Number of rows',\n 'tableRows': 'Table Rows',\n 'tableColumns': 'Table Columns',\n 'tableCellHorizontalAlign': 'Table Cell Horizontal Align',\n 'tableCellVerticalAlign': 'Table Cell Vertical Align',\n 'createTable': 'Create Table',\n 'removeTable': 'Remove Table',\n 'tableHeader': 'Table Header',\n 'tableRemove': 'Table Remove',\n 'tableCellBackground': 'Table Cell Background',\n 'tableEditProperties': 'Table Edit Properties',\n 'styles': 'Styles',\n 'insertColumnLeft': 'Insert Column Left',\n 'insertColumnRight': 'Insert Column Right',\n 'deleteColumn': 'Delete Column',\n 'insertRowBefore': 'Insert Row Before',\n 'insertRowAfter': 'Insert Row After',\n 'deleteRow': 'Delete Row',\n 'tableEditHeader': 'Edit Table',\n 'TableHeadingText': 'Heading',\n 'TableColText': 'Col',\n 'imageInsertLinkHeader': 'Insert Link',\n 'editImageHeader': 'Edit Image',\n 'editAudioHeader': 'Edit Audio',\n 'editVideoHeader': 'Edit Video',\n \"alignmentsDropDownLeft\": 'Align Left',\n \"alignmentsDropDownCenter\": 'Align Center',\n \"alignmentsDropDownRight\": 'Align Right',\n \"alignmentsDropDownJustify\": 'Align Justify',\n \"imageDisplayDropDownInline\": 'Inline',\n \"imageDisplayDropDownBreak\": 'Break',\n \"audioLayoutOptionDropDownInline\": 'Inline',\n \"audioLayoutOptionDropDownBreak\": 'Break',\n \"videoLayoutOptionDropDownInline\": 'Inline',\n \"videoLayoutOptionDropDownBreak\": 'Break',\n \"tableInsertRowDropDownBefore\": 'Insert row before',\n \"tableInsertRowDropDownAfter\": 'Insert row after',\n \"tableInsertRowDropDownDelete\": 'Delete row',\n \"tableInsertColumnDropDownLeft\": 'Insert column left',\n \"tableInsertColumnDropDownRight\": 'Insert column right',\n \"tableInsertColumnDropDownDelete\": 'Delete column',\n \"tableVerticalAlignDropDownTop\": 'Align Top',\n \"tableVerticalAlignDropDownMiddle\": 'Align Middle',\n \"tableVerticalAlignDropDownBottom\": 'Align Bottom',\n \"tableStylesDropDownDashedBorder\": 'Dashed Borders',\n \"tableStylesDropDownAlternateRows\": 'Alternate Rows',\n 'pasteFormat': 'Paste Format',\n 'pasteFormatContent': 'Choose the formatting action',\n 'plainText': 'Plain Text',\n 'cleanFormat': 'Clean',\n 'keepFormat': 'Keep',\n 'pasteDialogOk': 'OK',\n 'pasteDialogCancel': 'Cancel',\n 'fileManager': 'File Manager',\n 'fileDialogHeader': 'File Browser',\n \"formatsDropDownParagraph\": 'Paragraph',\n 'formatsDropDownCode': 'Code',\n 'formatsDropDownQuotation': 'Quotation',\n 'formatsDropDownHeading1': 'Heading 1',\n 'formatsDropDownHeading2': 'Heading 2',\n 'formatsDropDownHeading3': 'Heading 3',\n 'formatsDropDownHeading4': 'Heading 4',\n 'fontNameSegoeUI': 'Segoe UI',\n 'fontNameArial': 'Arial',\n 'fontNameGeorgia': 'Georgia',\n 'fontNameImpact': 'Impact',\n 'fontNameTahoma': 'Tahoma',\n 'fontNameTimesNewRoman': 'Times New Roman',\n 'fontNameVerdana': 'Verdana',\n 'numberFormatListNumber': 'Number',\n 'numberFormatListLowerAlpha': 'LowerAlpha',\n 'numberFormatListUpperAlpha': 'UpperAlpha',\n 'numberFormatListLowerRoman': 'LowerRoman',\n 'numberFormatListUpperRoman': 'UpperRoman',\n 'numberFormatListLowerGreek': 'LowerGreek',\n 'bulletFormatListDisc': 'Disc',\n 'bulletFormatListCircle': 'Circle',\n 'bulletFormatListSquare': 'Square',\n 'numberFormatListNone': 'None',\n 'bulletFormatListNone': 'None'\n};\nexport var toolsLocale = {\n 'alignments': 'alignments',\n 'justifyleft': 'justifyLeft',\n 'justifycenter': 'justifyCenter',\n 'justifyright': 'justifyRight',\n 'justifyfull': 'justifyFull',\n 'fontname': 'fontName',\n 'fontsize': 'fontSize',\n 'fontcolor': 'fontColor',\n 'backgroundcolor': 'backgroundColor',\n 'bold': 'bold',\n 'italic': 'italic',\n 'underline': 'underline',\n 'strikethrough': 'strikethrough',\n 'clearformat': 'clearFormat',\n 'clearall': 'clearAll',\n 'cut': 'cut',\n 'copy': 'copy',\n 'paste': 'paste',\n 'unorderedlist': 'unorderedList',\n 'orderedlist': 'orderedList',\n 'indent': 'indent',\n 'outdent': 'outdent',\n 'numberformatlist': 'numberFormatList',\n 'bulletformatlist': 'bulletFormatList',\n 'undo': 'undo',\n 'redo': 'redo',\n 'superscript': 'superscript',\n 'subscript': 'subscript',\n 'createlink': 'createLink',\n 'openlink': 'openLink',\n 'editlink': 'editLink',\n 'removelink': 'removeLink',\n 'openimagelink': 'openLink',\n 'editimagelink': 'editLink',\n 'removeimagelink': 'removeLink',\n 'image': 'image',\n 'audio': 'audio',\n 'video': 'video',\n 'replace': 'replace',\n 'audioreplace': 'audioReplace',\n 'videoreplace': 'videoReplace',\n 'videoalign': 'videoAlign',\n 'videodimension': 'videoDimension',\n 'audioremove': 'audioRemove',\n 'videoremove': 'videoRemove',\n 'audiolayoutoption': 'audioLayoutOption',\n 'videolayoutoption': 'videoLayoutOption',\n 'align': 'align',\n 'caption': 'caption',\n 'remove': 'remove',\n 'insertlink': 'insertLink',\n 'display': 'display',\n 'alttext': 'altText',\n 'dimension': 'dimension',\n 'fullscreen': 'fullscreen',\n 'maximize': 'maximize',\n 'minimize': 'minimize',\n 'lowercase': 'lowerCase',\n 'uppercase': 'upperCase',\n 'print': 'print',\n 'formats': 'formats',\n 'sourcecode': 'sourcecode',\n 'preview': 'preview',\n 'viewside': 'viewside',\n 'insertcode': 'insertCode',\n 'tablerows': 'tableRows',\n 'tablecolumns': 'tableColumns',\n 'tablecellhorizontalalign': 'tableCellHorizontalAlign',\n 'tablecellverticalalign': 'tableCellVerticalAlign',\n 'createtable': 'createTable',\n 'removetable': 'removeTable',\n 'tableheader': 'tableHeader',\n 'tableremove': 'tableRemove',\n 'tablecellbackground': 'tableCellBackground',\n 'tableeditproperties': 'tableEditProperties',\n 'styles': 'styles',\n 'insertcolumnleft': 'insertColumnLeft',\n 'insertcolumnright': 'insertColumnRight',\n 'deletecolumn': 'deleteColumn',\n 'aligntop': 'AlignTop',\n 'alignmiddle': 'AlignMiddle',\n 'alignbottom': 'AlignBottom',\n 'insertrowbefore': 'insertRowBefore',\n 'insertrowafter': 'insertRowAfter',\n 'deleterow': 'deleteRow'\n};\nexport var fontNameLocale = [\n { locale: 'fontNameSegoeUI', value: 'Segoe UI' },\n { locale: 'fontNameArial', value: 'Arial,Helvetica,sans-serif' },\n { locale: 'fontNameGeorgia', value: 'Georgia,serif' },\n { locale: 'fontNameImpact', value: 'Impact,Charcoal,sans-serif' },\n { locale: 'fontNameTahoma', value: 'Tahoma,Geneva,sans-serif' },\n { locale: 'fontNameTimesNewRoman', value: 'Times New Roman,Times,serif' },\n { locale: 'fontNameVerdana', value: 'Verdana,Geneva,sans-serif' }\n];\nexport var formatsLocale = [\n { locale: 'formatsDropDownParagraph', value: 'P' },\n { locale: 'formatsDropDownCode', value: 'Pre' },\n { locale: 'formatsDropDownQuotation', value: 'BlockQuote' },\n { locale: 'formatsDropDownHeading1', value: 'H1' },\n { locale: 'formatsDropDownHeading2', value: 'H2' },\n { locale: 'formatsDropDownHeading3', value: 'H3' },\n { locale: 'formatsDropDownHeading4', value: 'H4' }\n];\nexport var numberFormatListLocale = [\n { locale: 'numberFormatListNone', value: 'none' },\n { locale: 'numberFormatListNumber', value: 'decimal' },\n { locale: 'numberFormatListLowerAlpha', value: 'lower-alpha' },\n { locale: 'numberFormatListUpperAlpha', value: 'upper-alpha' },\n { locale: 'numberFormatListLowerRoman', value: 'lower-roman' },\n { locale: 'numberFormatListUpperRoman', value: 'upper-roman' },\n { locale: 'numberFormatListLowerGreek', value: 'lower-greek' }\n];\nexport var bulletFormatListLocale = [\n { locale: 'bulletFormatListNone', value: 'none' },\n { locale: 'bulletFormatListDisc', value: 'disc' },\n { locale: 'bulletFormatListCircle', value: 'circle' },\n { locale: 'bulletFormatListSquare', value: 'square' },\n];\n","/**\n * @param {string} htmlAttributes - specifies the string value\n * @param {IRichTextEditor} rte - specifies the rte value\n * @param {boolean} isFrame - specifies the boolean value\n * @param {boolean} initial - specifies the boolean value\n * @returns {void}\n * @hidden\n */\nexport function setAttributes(htmlAttributes, rte, isFrame, initial) {\n var target;\n if (isFrame) {\n var iFrame = rte.contentModule.getDocument();\n target = iFrame.querySelector('body');\n }\n else {\n target = rte.element;\n }\n if (Object.keys(htmlAttributes).length) {\n for (var _i = 0, _a = Object.keys(htmlAttributes); _i < _a.length; _i++) {\n var htmlAttr = _a[_i];\n if (htmlAttr === 'class') {\n target.classList.add(htmlAttributes[\"\" + htmlAttr]);\n }\n else if (htmlAttr === 'disabled' && htmlAttributes[\"\" + htmlAttr] === 'disabled') {\n rte.enabled = false;\n rte.setEnable();\n }\n else if (htmlAttr === 'readonly' && htmlAttributes[\"\" + htmlAttr] === 'readonly') {\n rte.readonly = true;\n rte.setReadOnly(initial);\n }\n else if (htmlAttr === 'style') {\n target.setAttribute('style', htmlAttributes[\"\" + htmlAttr]);\n }\n else if (htmlAttr === 'tabindex') {\n rte.inputElement.setAttribute('tabindex', htmlAttributes[\"\" + htmlAttr]);\n }\n else if (htmlAttr === 'placeholder') {\n rte.placeholder = htmlAttributes[\"\" + htmlAttr];\n rte.setPlaceHolder();\n }\n else {\n var validateAttr = ['name', 'required'];\n if (validateAttr.indexOf(htmlAttr) > -1) {\n rte.valueContainer.setAttribute(htmlAttr, htmlAttributes[\"\" + htmlAttr]);\n }\n else {\n target.setAttribute(htmlAttr, htmlAttributes[\"\" + htmlAttr]);\n }\n }\n }\n }\n}\n","import { Browser, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';\nimport { getScrollableParent } from '@syncfusion/ej2-popups';\nimport * as events from '../base/constant';\nimport * as classes from '../base/classes';\nimport { addClass, removeClass } from '@syncfusion/ej2-base';\n/**\n * `FullScreen` module is used to maximize and minimize screen\n */\nvar FullScreen = /** @class */ (function () {\n function FullScreen(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n /**\n * showFullScreen method\n *\n * @param {MouseEvent} event - specifies the mouse event\n * @returns {void}\n * @hidden\n\n */\n FullScreen.prototype.showFullScreen = function (event) {\n var _this = this;\n if (this.parent.toolbarSettings.enable === true && this.parent.editorMode !== 'Markdown'\n && !isNOU(this.parent.quickToolbarModule)) {\n this.parent.quickToolbarModule.hideQuickToolbars();\n }\n this.scrollableParent = getScrollableParent(this.parent.element);\n if (!this.parent.element.classList.contains(classes.CLS_FULL_SCREEN)) {\n var evenArgs = {\n cancel: false,\n requestType: 'Maximize',\n targetItem: 'Maximize',\n args: event\n };\n this.parent.trigger(events.actionBegin, evenArgs, function (beginEventArgs) {\n if (!beginEventArgs.cancel) {\n if (_this.parent.toolbarSettings.enableFloating &&\n !_this.parent.inlineMode.enable && _this.parent.toolbarSettings.enable) {\n _this.parent.getToolbarElement().style.width = '100%';\n _this.parent.getToolbarElement().style.top = '0px';\n }\n _this.parent.element.classList.add(classes.CLS_FULL_SCREEN);\n _this.toggleParentOverflow(true);\n var isExpand = _this.parent.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0 ? true : false;\n _this.parent.setContentHeight(null, isExpand);\n if (_this.parent.toolbarModule) {\n if (!_this.parent.getBaseToolbarObject().toolbarObj.items[0].properties) {\n _this.parent.getBaseToolbarObject().toolbarObj.removeItems(0);\n }\n if (Browser.isDevice) {\n _this.parent.toolbarModule.removeFixedTBarClass();\n }\n _this.parent.toolbarModule.updateItem({\n targetItem: 'Maximize',\n updateItem: 'Minimize',\n baseToolbar: _this.parent.getBaseToolbarObject()\n });\n }\n _this.parent.refreshUI();\n _this.parent.trigger(events.actionComplete, { requestType: 'Maximize', targetItem: 'Maximize', args: event });\n }\n });\n }\n };\n /**\n * hideFullScreen method\n *\n * @param {MouseEvent} event - specifies the mouse event\n * @returns {void}\n * @hidden\n\n */\n FullScreen.prototype.hideFullScreen = function (event) {\n var _this = this;\n if (this.parent.toolbarSettings.enable === true && this.parent.editorMode !== 'Markdown'\n && !isNOU(this.parent.quickToolbarModule)) {\n this.parent.quickToolbarModule.hideQuickToolbars();\n }\n if (this.parent.element.classList.contains(classes.CLS_FULL_SCREEN)) {\n var evenArgs = {\n cancel: false,\n requestType: 'Minimize',\n targetItem: 'Minimize',\n args: event\n };\n this.parent.trigger(events.actionBegin, evenArgs, function (beginEventArgs) {\n if (!beginEventArgs.cancel) {\n _this.parent.element.classList.remove(classes.CLS_FULL_SCREEN);\n var elem = document.querySelectorAll('.e-rte-overflow');\n for (var i = 0; i < elem.length; i++) {\n removeClass([elem[i]], ['e-rte-overflow']);\n }\n var isExpand = _this.parent.element.querySelectorAll('.e-toolbar-extended.e-popup-open').length > 0 ? true : false;\n _this.parent.setContentHeight(null, isExpand);\n if (_this.parent.toolbarModule) {\n if (!_this.parent.getBaseToolbarObject().toolbarObj.items[0].properties) {\n _this.parent.getBaseToolbarObject().toolbarObj.removeItems(0);\n }\n _this.parent.toolbarModule.updateItem({\n targetItem: 'Minimize',\n updateItem: 'Maximize',\n baseToolbar: _this.parent.getBaseToolbarObject()\n });\n if (Browser.isDevice && _this.parent.inlineMode.enable) {\n _this.parent.toolbarModule.addFixedTBarClass();\n }\n }\n _this.parent.refreshUI();\n _this.parent.trigger(events.actionComplete, { requestType: 'Minimize', targetItem: 'Minimize', args: event });\n }\n });\n }\n };\n // eslint-disable-next-line\n FullScreen.prototype.toggleParentOverflow = function (isAdd) {\n if (isNOU(this.scrollableParent)) {\n return;\n }\n for (var i = 0; i < this.scrollableParent.length; i++) {\n if (this.scrollableParent[i].nodeName === '#document') {\n var elem = document.querySelector('body');\n addClass([elem], ['e-rte-overflow']);\n }\n else {\n var elem = this.scrollableParent[i];\n addClass([elem], ['e-rte-overflow']);\n }\n }\n };\n FullScreen.prototype.onKeyDown = function (event) {\n var originalEvent = event.args;\n switch (originalEvent.action) {\n case 'full-screen':\n this.showFullScreen(event.args);\n originalEvent.preventDefault();\n break;\n case 'escape':\n this.hideFullScreen(event.args);\n originalEvent.preventDefault();\n break;\n }\n };\n FullScreen.prototype.addEventListener = function () {\n this.parent.on(events.keyDown, this.onKeyDown, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.moduleDestroy, this.moduleDestroy, this);\n };\n FullScreen.prototype.removeEventListener = function () {\n this.parent.off(events.keyDown, this.onKeyDown);\n this.parent.off(events.destroy, this.destroy);\n this.parent.off(events.moduleDestroy, this.moduleDestroy);\n };\n /**\n * destroy method\n *\n * @returns {void}\n * @hidden\n\n */\n FullScreen.prototype.destroy = function () {\n if (this.parent.element.classList.contains(classes.CLS_FULL_SCREEN)) {\n this.toggleParentOverflow(false);\n }\n var elem = document.querySelectorAll('.e-rte-overflow');\n for (var i = 0; i < elem.length; i++) {\n removeClass([elem[i]], ['e-rte-overflow']);\n }\n this.removeEventListener();\n };\n FullScreen.prototype.moduleDestroy = function () {\n this.parent = null;\n };\n return FullScreen;\n}());\nexport { FullScreen };\n","import { isNullOrUndefined as isNOU, detach, Browser } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\n/**\n * `EnterKey` module is used to handle enter key press actions.\n */\nvar EnterKeyAction = /** @class */ (function () {\n function EnterKeyAction(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n EnterKeyAction.prototype.addEventListener = function () {\n this.parent.on(events.enterHandler, this.enterHandler, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.moduleDestroy, this.moduleDestroy, this);\n };\n EnterKeyAction.prototype.destroy = function () {\n this.removeEventListener();\n };\n EnterKeyAction.prototype.moduleDestroy = function () {\n this.parent = null;\n };\n EnterKeyAction.prototype.removeEventListener = function () {\n this.parent.off(events.enterHandler, this.enterHandler);\n this.parent.off(events.destroy, this.destroy);\n this.parent.off(events.moduleDestroy, this.moduleDestroy);\n };\n EnterKeyAction.prototype.getRangeNode = function () {\n this.range = this.parent.getRange();\n this.startNode = this.range.startContainer.nodeName === '#text' ? this.range.startContainer.parentElement :\n this.range.startContainer;\n this.endNode = this.range.endContainer.nodeName === '#text' ? this.range.endContainer.parentElement :\n this.range.endContainer;\n };\n EnterKeyAction.prototype.enterHandler = function (e) {\n var _this = this;\n this.getRangeNode();\n var isTableEnter = true;\n this.formatTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote'];\n if (!isNOU(this.startNode.closest('TABLE')) && !isNOU(this.endNode.closest('TABLE'))) {\n isTableEnter = false;\n var curElement = this.startNode;\n var blockElement = curElement;\n while (!this.parent.formatter.editorManager.domNode.isBlockNode(curElement)) {\n curElement = curElement.parentElement;\n blockElement = curElement;\n }\n isTableEnter = blockElement.tagName === 'TD' || blockElement.tagName === 'TBODY' ? false : true;\n }\n if (e.args.which === 13 && e.args.code === 'Enter') {\n if (isNOU(this.startNode.closest('LI,UL,OL')) && isNOU(this.endNode.closest('LI,UL,OL')) && isTableEnter &&\n isNOU(this.startNode.closest('PRE')) && isNOU(this.endNode.closest('PRE'))) {\n var shiftKey_1 = e.args.shiftKey;\n var actionBeginArgs = {\n cancel: false,\n name: events.actionBegin,\n requestType: shiftKey_1 ? 'ShiftEnterAction' : 'EnterAction',\n originalEvent: e.args\n };\n this.parent.trigger(events.actionBegin, actionBeginArgs, function (actionBeginArgs) {\n if (!actionBeginArgs.cancel) {\n if (!(_this.range.startOffset === _this.range.endOffset && _this.range.startContainer === _this.range.endContainer)) {\n if (!(_this.range.startContainer.nodeName === 'SPAN' && (_this.range.startContainer.classList.contains('e-video-wrap') ||\n _this.range.startContainer.classList.contains('e-audio-wrap')))) {\n _this.range.deleteContents();\n }\n if (_this.range.startContainer.nodeName === '#text' && _this.range.startContainer.textContent.length === 0 &&\n _this.range.startContainer.parentElement !== _this.parent.inputElement) {\n if (_this.parent.enterKey === 'BR') {\n _this.range.startContainer.parentElement.innerHTML = '';\n }\n else {\n _this.range.startContainer.parentElement.innerHTML = '
';\n }\n }\n else if (_this.range.startContainer === _this.parent.inputElement && _this.range.startContainer.innerHTML === '') {\n _this.range.startContainer.innerHTML = '
';\n var focusElem = _this.range.startContainer.childNodes[_this.range.startOffset];\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), focusElem, 0);\n }\n else if (_this.parent.inputElement === _this.range.startContainer) {\n var focusElem = _this.range.startContainer.childNodes[_this.range.startOffset];\n if (focusElem.nodeName === '#text' && focusElem.textContent.length === 0) {\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), focusElem, focusElem.textContent.length === 0 ? 0 : focusElem.previousSibling.textContent.length);\n }\n else {\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), focusElem, focusElem.textContent.length >= 0 ? 0 : 1);\n if (focusElem.previousSibling.textContent.length === 0) {\n detach(focusElem.previousSibling);\n if (!shiftKey_1) {\n var currentFocusElem = !isNOU(focusElem.lastChild) ? focusElem.lastChild : focusElem;\n while (!isNOU(currentFocusElem) && currentFocusElem.nodeName !== '#text' && currentFocusElem.nodeName !== 'BR') {\n currentFocusElem = currentFocusElem.lastChild;\n }\n if (currentFocusElem.nodeName !== 'BR' && currentFocusElem.parentElement.textContent.length === 0 && currentFocusElem.parentElement.innerHTML.length === 0 &&\n currentFocusElem.parentElement.nodeName !== 'BR') {\n currentFocusElem.parentElement.appendChild(_this.parent.createElement('BR'));\n }\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), currentFocusElem.nodeName === 'BR' ? currentFocusElem : currentFocusElem.parentElement, currentFocusElem.parentElement.textContent.length >= 0 || currentFocusElem.nodeName === 'BR' ? 0 : 1);\n }\n }\n else if (focusElem.textContent.length === 0) {\n var currentFocusElem = focusElem.previousSibling.nodeName === '#text' ? focusElem.previousSibling : focusElem.previousSibling.lastChild;\n while (!isNOU(currentFocusElem) && currentFocusElem.nodeName !== '#text') {\n currentFocusElem = currentFocusElem.lastChild;\n }\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), currentFocusElem, currentFocusElem.textContent.length);\n detach(focusElem);\n }\n else if (_this.parent.enterKey !== 'BR' &&\n focusElem.previousSibling.textContent.length !== 0 && focusElem.textContent.length !== 0) {\n e.args.preventDefault();\n return;\n }\n }\n _this.getRangeNode();\n }\n }\n if (_this.range.startContainer === _this.range.endContainer &&\n _this.range.startOffset === _this.range.endOffset && _this.range.startContainer === _this.parent.inputElement) {\n if (!isNOU(_this.range.startContainer.childNodes[_this.range.startOffset]) &&\n !isNOU(_this.range.startContainer.childNodes[_this.range.startOffset].previousElementSibling) &&\n _this.range.startContainer.childNodes[_this.range.startOffset].previousElementSibling.nodeName === 'TABLE') {\n _this.parent.tableModule.removeResizeElement();\n }\n if (!(_this.parent.inputElement.childNodes.length === 1 && _this.parent.inputElement.childNodes[0].nodeName === 'TABLE')) {\n if (isNOU(_this.range.startContainer.childNodes[_this.range.startOffset])) {\n var currentLastElem = _this.range.startContainer.childNodes[_this.range.startOffset - 1];\n while (currentLastElem.lastChild !== null && currentLastElem.nodeName !== '#text') {\n currentLastElem = currentLastElem.lastChild;\n }\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), currentLastElem, (currentLastElem.nodeName === 'BR' ? 0 : currentLastElem.textContent.length));\n }\n else {\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), _this.range.startContainer.childNodes[_this.range.startOffset], 0);\n }\n }\n _this.getRangeNode();\n }\n if ((_this.parent.enterKey === 'P' && !shiftKey_1) || (_this.parent.enterKey === 'DIV' && !shiftKey_1) ||\n (_this.parent.shiftEnterKey === 'P' && shiftKey_1) ||\n (_this.parent.shiftEnterKey === 'DIV' && shiftKey_1)) {\n if (_this.range.startOffset === 1 && _this.parent.inputElement.childNodes.length === 1 && _this.parent.inputElement.childNodes[0].nodeName === 'TABLE') {\n var newElem = _this.createInsertElement(shiftKey_1);\n newElem.appendChild(_this.parent.createElement('BR'));\n _this.parent.inputElement.appendChild(newElem);\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), newElem, 0);\n }\n else {\n var nearBlockNode = void 0;\n if (isTableEnter && _this.parent.formatter.editorManager.domNode.isBlockNode(_this.startNode)) {\n nearBlockNode = _this.startNode;\n }\n else {\n nearBlockNode = _this.parent.formatter.editorManager.domNode.blockParentNode(_this.startNode);\n }\n var isMediaNode = false; // To check the image audio and video node cases\n var isFocusedFirst = false;\n if (_this.range.startOffset !== 0 && _this.range.endOffset !== 0 &&\n _this.range.startContainer === _this.range.endContainer && !(!isNOU(nearBlockNode.childNodes[0])\n && nearBlockNode.childNodes[0].nodeName === 'IMG' && nearBlockNode.querySelectorAll('img,audio,video').length > 0)) {\n var startNodeText = _this.range.startContainer.textContent;\n var splitFirstText = startNodeText.substring(0, _this.range.startOffset);\n // eslint-disable-next-line max-len\n if (splitFirstText.charCodeAt(_this.range.startOffset - 1) !== 160 && splitFirstText.trim().length === 0) {\n isFocusedFirst = true;\n }\n }\n else if (_this.range.startOffset === 0 && _this.range.endOffset === 0) {\n isFocusedFirst = true;\n }\n _this.removeBRElement(nearBlockNode);\n var fireFoxEnterAtMiddle = Browser.userAgent.indexOf('Firefox') !== -1 && _this.range.startOffset === 0 && _this.range.startContainer === _this.range.endContainer &&\n _this.range.startContainer.nodeName === '#text' && !_this.parent.formatter.editorManager.domNode.isBlockNode(_this.range.startContainer.previousSibling) &&\n _this.range.startContainer.parentElement === _this.range.startContainer.previousSibling.parentElement;\n // eslint-disable-next-line max-len\n if (!fireFoxEnterAtMiddle && ((_this.range.startOffset === 0 && _this.range.endOffset === 0) || isFocusedFirst) &&\n !(!isNOU(_this.range.startContainer.previousSibling) &&\n (_this.range.startContainer.previousSibling.nodeName === 'IMG' || _this.range.startContainer.previousSibling.nodeName === 'BR'))) {\n var isNearBlockLengthZero = void 0;\n var newElem = void 0;\n if (!isNOU(_this.range.startContainer.childNodes) && _this.range.startContainer.textContent.length === 0 &&\n (_this.range.startContainer.querySelectorAll('img,audio,video').length > 0 ||\n _this.range.startContainer.nodeName === 'IMG' || _this.range.startContainer.nodeName === 'TABLE')) {\n newElem = _this.createInsertElement(shiftKey_1);\n isMediaNode = true;\n isNearBlockLengthZero = false;\n }\n else {\n if ((nearBlockNode.textContent.trim().length !== 0 ||\n nearBlockNode.childNodes[0].nodeName === 'IMG' ||\n (nearBlockNode.textContent.trim() === '' && nearBlockNode.querySelectorAll('img,audio,video').length > 0))) {\n if ((_this.range.startOffset === _this.range.endOffset && _this.range.startOffset !== 0)) {\n newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, false).cloneNode(true);\n }\n else {\n newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, true).cloneNode(true);\n isMediaNode = true;\n }\n isNearBlockLengthZero = false;\n }\n else {\n newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, true).cloneNode(true);\n isNearBlockLengthZero = true;\n }\n }\n var insertElem = void 0;\n if (_this.formatTags.indexOf(newElem.nodeName.toLocaleLowerCase()) < 0) {\n insertElem = _this.createInsertElement(shiftKey_1);\n }\n else {\n insertElem = _this.parent.createElement(newElem.nodeName);\n }\n while (newElem.firstChild) {\n insertElem.appendChild(newElem.firstChild);\n }\n nearBlockNode.parentElement.insertBefore(insertElem, nearBlockNode);\n if (!isNearBlockLengthZero) {\n var currentFocusElem = insertElem;\n var finalFocusElem = void 0;\n if (_this.range.startOffset === _this.range.endOffset && _this.range.startOffset !== 0) {\n while (!isNOU(currentFocusElem) && currentFocusElem.nodeName !== '#text' &&\n currentFocusElem.nodeName !== 'BR') {\n finalFocusElem = currentFocusElem;\n currentFocusElem = currentFocusElem.lastChild;\n }\n }\n else {\n finalFocusElem = currentFocusElem;\n }\n finalFocusElem.innerHTML = '
';\n if (!isMediaNode) {\n detach(nearBlockNode);\n }\n }\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), insertElem.nextElementSibling, 0);\n }\n else if (nearBlockNode.textContent.length === 0 && !(!isNOU(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG')) {\n if (!isNOU(nearBlockNode.children[0]) && nearBlockNode.children[0].tagName !== 'BR') {\n var newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, false).cloneNode(true);\n _this.parent.formatter.editorManager.domNode.insertAfter(newElem, nearBlockNode);\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), newElem, newElem.textContent.length >= 0 ? 0 : 1);\n }\n else {\n var insertElem = _this.createInsertElement(shiftKey_1);\n insertElem.innerHTML = '
';\n _this.parent.formatter.editorManager.domNode.insertAfter(insertElem, nearBlockNode);\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), insertElem, 0);\n }\n }\n else if (_this.range.startContainer === _this.range.endContainer && _this.range.startContainer.nodeName === 'SPAN' &&\n (_this.range.startContainer.classList.contains('e-video-wrap') ||\n _this.range.startContainer.classList.contains('e-audio-wrap'))) {\n if (nearBlockNode.textContent.trim().length > 0) {\n var newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, true);\n var audioVideoElem = !isNOU(newElem.previousSibling.querySelector('.e-video-wrap')) ?\n newElem.previousSibling.querySelector('.e-video-wrap') : newElem.previousSibling.querySelector('.e-audio-wrap');\n var isBRInserted = false;\n var lastNode = audioVideoElem.previousSibling;\n while (!isNOU(lastNode) && lastNode.nodeName !== '#text') {\n lastNode = lastNode.lastChild;\n }\n if (isNOU(lastNode)) {\n var brElm = _this.parent.createElement('br');\n audioVideoElem.parentElement.appendChild(brElm);\n isBRInserted = true;\n }\n if (isBRInserted) {\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), audioVideoElem.parentElement, 0);\n }\n else {\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), lastNode, lastNode.textContent.length);\n }\n detach(audioVideoElem);\n }\n else {\n var newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, true);\n var focusElem = newElem.previousSibling;\n while (!isNOU(focusElem.firstChild)) {\n detach(focusElem.firstChild);\n }\n var brElm = _this.parent.createElement('br');\n focusElem.appendChild(brElm);\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), focusElem, 0);\n }\n if (!isNOU(_this.parent.audioModule)) {\n _this.parent.audioModule.hideAudioQuickToolbar();\n }\n if (!isNOU(_this.parent.videoModule)) {\n _this.parent.videoModule.hideVideoQuickToolbar();\n }\n }\n else {\n var newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, true);\n if (!isNOU(newElem.childNodes[0]) && newElem.childNodes[0].nodeName === '#text' &&\n newElem.childNodes[0].textContent.length === 0) {\n detach(newElem.childNodes[0]);\n }\n if (newElem.textContent.trim().length === 0) {\n var brElm = _this.parent.createElement('br');\n if (_this.startNode.nodeName === 'A') {\n var startParentElem = _this.startNode.parentElement;\n _this.startNode.parentElement.insertBefore(brElm, _this.startNode);\n detach(_this.startNode);\n _this.startNode = startParentElem;\n }\n else {\n if (_this.startNode.nodeName !== 'BR') {\n _this.startNode.appendChild(brElm);\n }\n }\n if (newElem.childNodes[0].textContent === '\\n') {\n detach(newElem.childNodes[0]);\n }\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), _this.startNode, 0);\n }\n if (((_this.parent.enterKey === 'P' || _this.parent.enterKey === 'DIV') && !shiftKey_1) || ((_this.parent.shiftEnterKey === 'DIV' ||\n _this.parent.shiftEnterKey === 'P') && shiftKey_1)) {\n var isHeadingTag = _this.formatTags.indexOf(newElem.nodeName.toLocaleLowerCase());\n if ((isHeadingTag < 0) || (isHeadingTag >= 0 && newElem.textContent.trim().length === 0)) {\n var insertElm = _this.createInsertElement(shiftKey_1);\n while (newElem.firstChild) {\n insertElm.appendChild(newElem.firstChild);\n }\n _this.parent.formatter.editorManager.domNode.insertAfter(insertElm, newElem);\n detach(newElem);\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), _this.parent.formatter.editorManager.domNode.isBlockNode(_this.startNode) ?\n insertElm : _this.startNode, 0);\n }\n }\n }\n }\n e.args.preventDefault();\n }\n if ((_this.parent.enterKey === 'BR' && !shiftKey_1) || (_this.parent.shiftEnterKey === 'BR' && shiftKey_1)) {\n var currentParent = void 0;\n if (!_this.parent.formatter.editorManager.domNode.isBlockNode(_this.startNode)) {\n var currentNode = _this.startNode;\n var previousNode = currentNode;\n while (!_this.parent.formatter.editorManager.domNode.isBlockNode(currentNode)) {\n previousNode = currentNode;\n currentNode = currentNode.parentElement;\n }\n currentParent = currentNode === _this.parent.inputElement ?\n previousNode : currentNode;\n }\n else {\n currentParent = _this.startNode;\n }\n _this.removeBRElement(currentParent);\n var isEmptyBrInserted = false;\n var currentParentLastChild = currentParent.lastChild;\n while (!isNOU(currentParentLastChild) && !(currentParentLastChild.nodeName === '#text' || currentParentLastChild.nodeName === 'BR'\n || currentParentLastChild.nodeName === 'IMG')) {\n currentParentLastChild = currentParentLastChild.lastChild;\n }\n var isLastNodeLength = _this.range.startContainer === currentParentLastChild ?\n _this.range.startContainer.textContent.length : currentParent.textContent.length;\n var isImageElement = (_this.range.startContainer.nodeName === 'IMG' || (_this.range.startContainer.childNodes.length > 0\n && _this.range.startContainer.childNodes[_this.range.startOffset].nodeName === 'IMG'));\n if (currentParent !== _this.parent.inputElement &&\n _this.parent.formatter.editorManager.domNode.isBlockNode(currentParent) &&\n _this.range.startOffset === _this.range.endOffset &&\n (_this.range.startOffset === isLastNodeLength ||\n (currentParent.textContent.trim().length === 0 && isImageElement))) {\n var focusBRElem = _this.parent.createElement('br');\n if (_this.range.startOffset === 0 && _this.range.startContainer.nodeName === 'TABLE') {\n _this.range.startContainer.parentElement.insertBefore(focusBRElem, _this.range.startContainer);\n }\n else {\n if (currentParentLastChild.nodeName === 'BR' && currentParent.textContent.length === 0) {\n _this.parent.formatter.editorManager.domNode.insertAfter(focusBRElem, currentParentLastChild);\n }\n else if (_this.range.startOffset === 0 && _this.range.endOffset === 0 && isImageElement) {\n var imageElement = _this.range.startContainer.nodeName === 'IMG' ? _this.range.startContainer :\n _this.range.startContainer.childNodes[_this.range.startOffset];\n currentParent.insertBefore(focusBRElem, imageElement);\n focusBRElem = imageElement;\n }\n else {\n var lineBreakBRElem = _this.parent.createElement('br');\n _this.parent.formatter.editorManager.domNode.insertAfter(focusBRElem, _this.range.startContainer);\n _this.parent.formatter.editorManager.domNode.insertAfter(lineBreakBRElem, _this.range.startContainer);\n }\n }\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), focusBRElem, 0);\n }\n else if (!isNOU(currentParent) && currentParent !== _this.parent.inputElement && currentParent.nodeName !== 'BR') {\n if (currentParent.textContent.trim().length === 0 || (currentParent.textContent.trim().length === 1 &&\n currentParent.textContent.charCodeAt(0) === 8203)) {\n var newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, currentParent, true).cloneNode(true);\n _this.parent.formatter.editorManager.domNode.insertAfter(newElem, currentParent);\n var outerBRElem = _this.parent.createElement('br');\n newElem.parentElement.insertBefore(outerBRElem, newElem);\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), newElem, 0);\n }\n else {\n var newElem = void 0;\n var outerBRElem = _this.parent.createElement('br');\n if (_this.range.startOffset === 0 && _this.range.endOffset === 0 &&\n !isNOU(currentParent.previousSibling) && currentParent.previousSibling.nodeName === 'BR') {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, currentParent, false).cloneNode(true);\n _this.parent.formatter.editorManager.domNode.insertAfter(outerBRElem, currentParent);\n _this.insertFocusContent();\n var currentFocusElem = outerBRElem.nextSibling;\n while (!isNOU(currentFocusElem) && currentFocusElem.nodeName !== '#text') {\n currentFocusElem = currentFocusElem.lastChild;\n }\n _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), currentFocusElem, 0);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n isEmptyBrInserted = true;\n }\n else {\n _this.insertBRElement();\n }\n }\n }\n else {\n _this.insertBRElement();\n }\n e.args.preventDefault();\n }\n _this.parent.trigger(events.actionComplete, { requestType: shiftKey_1 ? 'ShiftEnterAction' : 'EnterAction', args: e.args });\n }\n });\n }\n }\n };\n EnterKeyAction.prototype.removeBRElement = function (currentElement) {\n if (Browser.userAgent.indexOf('Firefox') !== -1 &&\n this.range.endOffset === currentElement.textContent.length && (currentElement.textContent.length !== 0 ||\n currentElement.querySelectorAll('BR').length > 1) &&\n !isNOU(currentElement.lastChild) && currentElement.lastChild.nodeName === 'BR') {\n detach(currentElement.lastChild);\n }\n };\n EnterKeyAction.prototype.insertBRElement = function () {\n var isEmptyBrInserted = false;\n var isFocusTextNode = true;\n if (this.range.endContainer.textContent.length === 0 && this.range.startContainer.nodeName === 'BR') {\n isFocusTextNode = false;\n }\n var brElm = this.parent.createElement('br');\n if (this.startNode.nodeName === 'BR' && this.endNode.nodeName === 'BR' && this.range.startOffset === 0 && this.range.startOffset === this.range.endOffset) {\n this.parent.formatter.editorManager.domNode.insertAfter(brElm, this.startNode);\n isEmptyBrInserted = true;\n }\n else {\n if (this.startNode === this.parent.inputElement && !isNOU(this.range.startContainer.previousSibling) &&\n this.range.startContainer.previousSibling.nodeName === 'BR' && this.range.startContainer.textContent.length === 0) {\n isEmptyBrInserted = true;\n }\n this.range.insertNode(brElm);\n }\n if (isEmptyBrInserted || (!isNOU(brElm.nextElementSibling) && brElm.nextElementSibling.tagName === 'BR') || (!isNOU(brElm.nextSibling) && brElm.nextSibling.textContent.length > 0)) {\n this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), !isNOU(brElm.nextSibling) && isFocusTextNode ? brElm.nextSibling : brElm, 0);\n isEmptyBrInserted = false;\n }\n else {\n var brElm2 = this.parent.createElement('br');\n this.range.insertNode(brElm2);\n this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), brElm, 0);\n }\n };\n EnterKeyAction.prototype.insertFocusContent = function () {\n if (this.range.startContainer.textContent.length === 0) {\n if (this.range.startContainer.nodeName === '#text') {\n this.range.startContainer.parentElement.innerHTML = '';\n }\n else {\n this.range.startContainer.innerHTML = '';\n }\n }\n };\n EnterKeyAction.prototype.createInsertElement = function (shiftKey) {\n var insertElem;\n if ((this.parent.enterKey === 'DIV' && !shiftKey) || (this.parent.shiftEnterKey === 'DIV' && shiftKey)) {\n insertElem = this.parent.createElement('div');\n }\n else if ((this.parent.enterKey === 'P' && !shiftKey) || (this.parent.shiftEnterKey === 'P' && shiftKey)) {\n insertElem = this.parent.createElement('p');\n }\n return insertElem;\n };\n return EnterKeyAction;\n}());\nexport { EnterKeyAction };\n","/**\n * Defines util methods used by Rich Text Editor.\n */\nimport { isNullOrUndefined as isNOU, addClass, removeClass, selectAll, createElement } from '@syncfusion/ej2-base';\nimport { Browser, detach, SanitizeHtmlHelper, extend } from '@syncfusion/ej2-base';\nimport * as classes from '../base/classes';\nimport * as CONSTANT from '../base/constant';\nimport * as model from '../models/items';\nimport { toolsLocale, fontNameLocale, formatsLocale, numberFormatListLocale, bulletFormatListLocale } from '../models/default-locale';\nvar undoRedoItems = ['Undo', 'Redo'];\nvar inlineNode = ['a', 'abbr', 'acronym', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button',\n 'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'font', 'i', 'iframe', 'img', 'input',\n 'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress',\n 'q', 'ruby', 's', 'samp', 'script', 'select', 'slot', 'small', 'span', 'strong', 'strike', 'sub', 'sup', 'svg',\n 'template', 'textarea', 'time', 'u', 'tt', 'var', 'video', 'wbr'];\n/**\n * @param {string} val - specifies the string value\n * @param {string} items - specifies the value\n * @returns {number} - returns the number value\n * @hidden\n */\nexport function getIndex(val, items) {\n var index = -1;\n items.some(function (item, i) {\n if (typeof item === 'string' && val === item.toLocaleLowerCase()) {\n index = i;\n return true;\n }\n return false;\n });\n return index;\n}\n/**\n * @param {Element} element - specifies the element\n * @param {string} className - specifies the string value\n * @returns {boolean} - returns the boolean value\n * @hidden\n */\nexport function hasClass(element, className) {\n var hasClass = false;\n if (element.classList.contains(className)) {\n hasClass = true;\n }\n return hasClass;\n}\n/**\n * @param {IDropDownItemModel} items - specifies the item model\n * @param {string} value - specifies the string value\n * @param {string} type - specifies the string value\n * @param {string} returnType - specifies the return type\n * @returns {string} - returns the string value\n * @hidden\n */\nexport function getDropDownValue(items, value, type, returnType) {\n var data;\n var result;\n for (var k = 0; k < items.length; k++) {\n if (type === 'value' && items[k].value.toLocaleLowerCase() === value.toLocaleLowerCase()) {\n data = items[k];\n break;\n }\n else if (type === 'text' && items[k].text.toLocaleLowerCase() === value.toLocaleLowerCase()) {\n data = items[k];\n break;\n }\n else if (type === 'subCommand' && items[k].subCommand.toLocaleLowerCase() === value.toLocaleLowerCase()) {\n data = items[k];\n break;\n }\n }\n if (!isNOU(data)) {\n switch (returnType) {\n case 'text':\n result = data.text;\n break;\n case 'value':\n result = data.value;\n break;\n case 'iconCss':\n result = data.iconCss;\n break;\n }\n }\n return result;\n}\n/**\n * @returns {boolean} - returns the boolean value\n * @hidden\n */\nexport function isIDevice() {\n var result = false;\n if (Browser.isDevice && Browser.isIos) {\n result = true;\n }\n return result;\n}\n/**\n * @param {string} value - specifies the value\n * @returns {string} - returns the string value\n * @hidden\n */\nexport function getFormattedFontSize(value) {\n if (isNOU(value)) {\n return '';\n }\n return value;\n}\n/**\n * @param {MouseEvent} e - specifies the mouse event\n * @param {HTMLElement} parentElement - specifies the parent element\n * @param {boolean} isIFrame - specifies the boolean value\n * @returns {number} - returns the number\n * @hidden\n */\nexport function pageYOffset(e, parentElement, isIFrame) {\n var y = 0;\n if (isIFrame) {\n y = window.pageYOffset + parentElement.getBoundingClientRect().top + e.clientY;\n }\n else {\n y = e.pageY;\n }\n return y;\n}\n/**\n * @param {string} item - specifies the string\n * @param {ServiceLocator} serviceLocator - specifies the service locator\n * @returns {string} - returns the string\n * @hidden\n */\nexport function getTooltipText(item, serviceLocator) {\n var i10n = serviceLocator.getService('rteLocale');\n var itemLocale = toolsLocale[\"\" + item];\n var tooltipText = i10n.getConstant(itemLocale);\n return tooltipText;\n}\n/**\n * @param {ISetToolbarStatusArgs} e - specifies the e element\n * @param {boolean} isPopToolbar - specifies the boolean value\n * @param {IRichTextEditor} self - specifies the parent element\n * @returns {void}\n * @hidden\n */\nexport function setToolbarStatus(e, isPopToolbar, self) {\n updateDropDownFontFormatLocale(self);\n var dropDown = e.dropDownModule;\n var data = e.args;\n var keys = Object.keys(e.args);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n for (var j = 0; j < e.tbItems.length; j++) {\n var item = e.tbItems[j].subCommand;\n var itemStr = item && item.toLocaleLowerCase();\n if (item && (itemStr === key) || (item === 'UL' && key === 'unorderedlist') || (item === 'OL' && key === 'orderedlist') ||\n (itemStr === 'pre' && key === 'insertcode')) {\n if (typeof data[\"\" + key] === 'boolean') {\n if (data[\"\" + key] === true) {\n addClass([e.tbElements[j]], [classes.CLS_ACTIVE]);\n }\n else {\n removeClass([e.tbElements[j]], [classes.CLS_ACTIVE]);\n }\n }\n else if ((typeof data[\"\" + key] === 'string' || data[\"\" + key] === null) &&\n getIndex(key, e.parent.toolbarSettings.items) > -1) {\n var value = ((data[\"\" + key]) ? data[\"\" + key] : '');\n var result = '';\n switch (key) {\n case 'formats': {\n if (isNOU(dropDown.formatDropDown) || isPopToolbar ||\n (!isNOU(dropDown.formatDropDown) && dropDown.formatDropDown.isDestroyed)) {\n break;\n }\n var formatItems = e.parent.format.types;\n var formatContent = isNOU(e.parent.format.default) ? formatItems[0].text :\n e.parent.format.default;\n result = getDropDownValue(formatItems, value, 'subCommand', 'text');\n dropDown.formatDropDown.content = ('' +\n ''\n + (isNOU(result) ? formatContent : result) +\n '');\n dropDown.formatDropDown.dataBind();\n break;\n }\n case 'alignments': {\n if (isNOU(dropDown.alignDropDown) ||\n (!isNOU(dropDown.alignDropDown) && dropDown.alignDropDown.isDestroyed)) {\n break;\n }\n var alignItems = model.alignmentItems;\n result = getDropDownValue(alignItems, value, 'subCommand', 'iconCss');\n dropDown.alignDropDown.iconCss = isNOU(result) ? 'e-icons e-justify-left' : result;\n dropDown.alignDropDown.dataBind();\n break;\n }\n case 'fontname': {\n if (isNOU(dropDown.fontNameDropDown) || isPopToolbar ||\n (!isNOU(dropDown.fontNameDropDown) && dropDown.fontNameDropDown.isDestroyed)) {\n break;\n }\n var fontNameItems = e.parent.fontFamily.items;\n result = getDropDownValue(fontNameItems, value, 'value', 'text');\n var fontNameContent = isNOU(e.parent.fontFamily.default) ? fontNameItems[0].text :\n e.parent.fontFamily.default;\n var name_1 = (isNOU(result) ? fontNameContent : result);\n e.tbElements[j].title = name_1;\n dropDown.fontNameDropDown.content = ('' +\n ''\n + name_1 + '');\n dropDown.fontNameDropDown.dataBind();\n break;\n }\n case 'fontsize': {\n if (isNOU(dropDown.fontSizeDropDown) ||\n (!isNOU(dropDown.fontSizeDropDown) && dropDown.fontSizeDropDown.isDestroyed)) {\n break;\n }\n var fontSizeItems = e.parent.fontSize.items;\n var fontSizeContent = isNOU(e.parent.fontSize.default) ? fontSizeItems[1].text :\n e.parent.fontSize.default;\n result = getDropDownValue(fontSizeItems, (value === '' ? fontSizeContent.replace(/\\s/g, '') : value), 'value', 'text');\n dropDown.fontSizeDropDown.content = ('' +\n ''\n + getFormattedFontSize(result) + '');\n dropDown.fontSizeDropDown.dataBind();\n break;\n }\n }\n }\n }\n }\n }\n}\n/**\n * @param {string} items - specifies the string value\n * @returns {string[]} - returns the array value\n * @hidden\n */\nexport function getCollection(items) {\n if (typeof items === 'object') {\n return items;\n }\n else {\n return [items];\n }\n}\n/**\n * @param {string[]} items - specifies the array of string value\n * @param {IToolbarItemModel} toolbarItems - specifies the tool bar model\n * @returns {number} - returns the number\n * @hidden\n */\nexport function getTBarItemsIndex(items, toolbarItems) {\n var itemsIndex = [];\n for (var i = 0; i < items.length; i++) {\n for (var j = 0; j < toolbarItems.length; j++) {\n if (toolbarItems[j].type === 'Separator') {\n continue;\n }\n else {\n if (items[i] === 'OrderedList' && toolbarItems[j].subCommand === 'OL') {\n itemsIndex.push(j);\n break;\n }\n else if (items[i] === 'UnorderedList' && toolbarItems[j].subCommand === 'UL') {\n itemsIndex.push(j);\n break;\n }\n else if (items[i] === 'InsertCode' && toolbarItems[j].subCommand === 'Pre') {\n itemsIndex.push(j);\n break;\n }\n else if (items[i] === 'FileManager' && toolbarItems[j].subCommand === 'File') {\n itemsIndex.push(j);\n break;\n }\n else if (typeof (items[i]) === 'object' && items[i].command === 'Custom') {\n itemsIndex.push(i);\n break;\n }\n else if (items[i] === toolbarItems[j].subCommand) {\n itemsIndex.push(j);\n break;\n }\n }\n }\n }\n return itemsIndex;\n}\n/**\n * @param {BaseToolbar} baseToolbar - specifies the base\n * @param {boolean} undoRedoStatus - specifies the boolean value\n * @returns {void}\n * @hidden\n */\nexport function updateUndoRedoStatus(baseToolbar, undoRedoStatus) {\n var i = 0;\n var trgItems = getTBarItemsIndex(getCollection(undoRedoItems), baseToolbar.toolbarObj.items);\n var tbItems = selectAll('.' + classes.CLS_TB_ITEM, baseToolbar.toolbarObj.element);\n var keys = Object.keys(undoRedoStatus);\n for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {\n var key = keys_2[_i];\n var target = tbItems[trgItems[i]];\n if (target) {\n baseToolbar.toolbarObj.enableItems(target, undoRedoStatus[\"\" + key]);\n }\n i++;\n }\n}\n/**\n * To dispatch the event manually\n *\n * @param {Element} element - specifies the element.\n * @param {string} type - specifies the string type.\n * @returns {void}\n * @hidden\n\n */\nexport function dispatchEvent(element, type) {\n var evt = document.createEvent('HTMLEvents');\n evt.initEvent(type, false, true);\n element.dispatchEvent(evt);\n}\n/**\n * To parse the HTML\n *\n * @param {string} value - specifies the string value\n * @returns {DocumentFragment} - returns the document\n * @hidden\n */\nexport function parseHtml(value) {\n var tempNode = createElement('template');\n tempNode.innerHTML = value;\n if (tempNode.content instanceof DocumentFragment) {\n return tempNode.content;\n }\n else {\n return document.createRange().createContextualFragment(value);\n }\n}\n/**\n * @param {Document} docElement - specifies the document element\n * @param {Element} node - specifies the node\n * @returns {Node[]} - returns the node array\n * @hidden\n */\nexport function getTextNodesUnder(docElement, node) {\n var nodes = [];\n for (node = node.firstChild; node; node = node.nextSibling) {\n if (node.nodeType === 3) {\n nodes.push(node);\n }\n else {\n nodes = nodes.concat(getTextNodesUnder(docElement, node));\n }\n }\n return nodes;\n}\n/**\n * @param {IToolsItemConfigs} obj - specifies the configuration\n * @returns {void}\n * @hidden\n */\nexport function toObjectLowerCase(obj) {\n var convertedValue = {};\n var keys = Object.keys(obj);\n for (var i = 0; i < Object.keys(obj).length; i++) {\n convertedValue[keys[i].toLocaleLowerCase()] = obj[keys[i]];\n }\n return convertedValue;\n}\n/**\n * @param {string} value - specifies the string value\n * @param {IRichTextEditor} rteObj - specifies the rte object\n * @returns {string} - returns the string\n * @hidden\n */\nexport function getEditValue(value, rteObj) {\n var val;\n if (value !== null && value !== '') {\n val = rteObj.enableHtmlEncode ? updateTextNode(decode(value), rteObj) : updateTextNode(value, rteObj);\n rteObj.setProperties({ value: val }, true);\n }\n else {\n if (rteObj.enterKey === 'DIV') {\n val = rteObj.enableHtmlEncode ? '<div><br/></div>' : '
';\n }\n else if (rteObj.enterKey === 'BR') {\n val = rteObj.enableHtmlEncode ? '<br/>' : '
';\n }\n else {\n val = rteObj.enableHtmlEncode ? '<p><br/></p>' : '
';\n }\n }\n return val;\n}\n/**\n * @param {string} value - specifies the value\n * @param {IRichTextEditor} rteObj - specifies the rich text editor instance.\n * @returns {string} - returns the string\n * @hidden\n */\nexport function updateTextNode(value, rteObj) {\n var tempNode = document.createElement('div');\n var resultElm = document.createElement('div');\n var childNodes = tempNode.childNodes;\n tempNode.innerHTML = value;\n tempNode.setAttribute('class', 'tempDiv');\n if (childNodes.length > 0) {\n var isPreviousInlineElem = void 0;\n var previousParent = void 0;\n var insertElem = void 0;\n while (tempNode.firstChild) {\n var emptyBlockElem = tempNode.querySelectorAll(CONSTANT.blockEmptyNodes);\n for (var i = 0; i < emptyBlockElem.length; i++) {\n emptyBlockElem[i].innerHTML = '
';\n }\n var emptyInlineElem = tempNode.querySelectorAll(CONSTANT.inlineEmptyNodes);\n for (var i = 0; i < emptyInlineElem.length; i++) {\n emptyInlineElem[i].innerHTML = '';\n }\n if (rteObj.enterKey !== 'BR' && ((tempNode.firstChild.nodeName === '#text' &&\n (tempNode.firstChild.textContent.indexOf('\\n') < 0 || tempNode.firstChild.textContent.trim() !== '')) ||\n inlineNode.indexOf(tempNode.firstChild.nodeName.toLocaleLowerCase()) >= 0)) {\n if (!isPreviousInlineElem) {\n if (rteObj.enterKey === 'DIV') {\n insertElem = createElement('div');\n }\n else {\n insertElem = createElement('p');\n }\n resultElm.appendChild(insertElem);\n insertElem.appendChild(tempNode.firstChild);\n }\n else {\n previousParent.appendChild(tempNode.firstChild);\n }\n previousParent = insertElem;\n isPreviousInlineElem = true;\n }\n else if (tempNode.firstChild.nodeName === '#text' && (tempNode.firstChild.textContent === '\\n' ||\n (tempNode.firstChild.textContent.indexOf('\\n') >= 0 && tempNode.firstChild.textContent.trim() === ''))) {\n detach(tempNode.firstChild);\n }\n else {\n resultElm.appendChild(tempNode.firstChild);\n isPreviousInlineElem = false;\n }\n }\n var imageElm = resultElm.querySelectorAll('img');\n for (var i = 0; i < imageElm.length; i++) {\n if (!imageElm[i].classList.contains(classes.CLS_RTE_IMAGE)) {\n imageElm[i].classList.add(classes.CLS_RTE_IMAGE);\n }\n if (!(imageElm[i].classList.contains(classes.CLS_IMGINLINE) ||\n imageElm[i].classList.contains(classes.CLS_IMGBREAK))) {\n imageElm[i].classList.add(classes.CLS_IMGINLINE);\n }\n }\n }\n return resultElm.innerHTML;\n}\n/**\n * @param {IRichTextEditor} rteObj - specifies the rte object\n * @returns {string} - returns the value based on enter configuration.\n * @hidden\n */\nexport function getDefaultValue(rteObj) {\n var currentVal;\n if (rteObj.enterKey === 'DIV') {\n currentVal = rteObj.enableHtmlEncode ? '<div><br/></div>' : '
';\n }\n else if (rteObj.enterKey === 'BR') {\n currentVal = rteObj.enableHtmlEncode ? '<br/>' : '
';\n }\n else {\n currentVal = rteObj.enableHtmlEncode ? '<p><br/></p>' : '
';\n }\n return currentVal;\n}\n/**\n * @param {string} value - specifies the value\n * @returns {boolean} - returns the boolean value\n * @hidden\n */\nexport function isEditableValueEmpty(value) {\n return (value === '
' || value === '<p><br></p>'\n || value === '
' || value === '<div><br></div>'\n || value === '
' || value === '<br>'\n || value === '') ? true : false;\n}\n/**\n * @param {string} value - specifies the string value\n * @returns {string} - returns the string\n * @hidden\n */\nexport function decode(value) {\n return value.replace(/&/g, '&').replace(/</g, '<')\n .replace(/</g, '<').replace(/>/g, '>')\n .replace(/>/g, '>').replace(/ /g, ' ')\n .replace(/ /g, ' ').replace(/"/g, '');\n}\n/**\n * @param {string} value - specifies the string value\n * @param {IRichTextEditor} parent - specifies the rte\n * @returns {string} - returns the string value\n * @hidden\n */\nexport function sanitizeHelper(value, parent) {\n if (parent.enableHtmlSanitizer) {\n var item = SanitizeHtmlHelper.beforeSanitize();\n var beforeEvent = {\n cancel: false,\n helper: null\n };\n extend(item, item, beforeEvent);\n parent.trigger('beforeSanitizeHtml', item);\n if (item.cancel && !isNOU(item.helper)) {\n value = item.helper(value);\n }\n else if (!item.cancel) {\n value = SanitizeHtmlHelper.serializeValue(item, value);\n }\n }\n return value;\n}\n/**\n * @param {string} dataUrl - specifies the string value\n * @returns {BaseToolbar} - returns the value\n * @hidden\n */\n//Converting the base64 url to blob\nexport function convertToBlob(dataUrl) {\n var arr = dataUrl.split(',');\n var mime = arr[0].match(/:(.*?);/)[1];\n var bstr = atob(arr[1]);\n var n = bstr.length;\n var u8arr = new Uint8Array(n);\n while (n--) {\n u8arr[n] = bstr.charCodeAt(n);\n }\n return new Blob([u8arr], { type: mime });\n}\n/**\n * @param {IRichTextEditor} self - specifies the rte\n * @param {string} localeItems - specifies the locale items\n * @param {IDropDownItemModel} item - specifies the dropdown item\n * @returns {string} - returns the value\n * @hidden\n */\nexport function getLocaleFontFormat(self, localeItems, item) {\n for (var i = 0; localeItems.length > i; i++) {\n if (localeItems[i].value === item.value || localeItems[i].value === item.subCommand) {\n return self.localeObj.getConstant(localeItems[i].locale);\n }\n }\n return item.text;\n}\n/**\n * @param {IRichTextEditor} self - specifies the rte\n * @returns {void}\n * @hidden\n */\nexport function updateDropDownFontFormatLocale(self) {\n model.fontFamily.forEach(function (item, i) {\n model.fontFamily[i].text = getLocaleFontFormat(self, fontNameLocale, model.fontFamily[i]);\n });\n model.formatItems.forEach(function (item, i) {\n model.formatItems[i].text = getLocaleFontFormat(self, formatsLocale, model.formatItems[i]);\n });\n model.numberFormatList.forEach(function (item, i) {\n model.numberFormatList[i].text = getLocaleFontFormat(self, numberFormatListLocale, model.numberFormatList[i]);\n });\n model.bulletFormatList.forEach(function (item, i) {\n model.bulletFormatList[i].text = getLocaleFontFormat(self, bulletFormatListLocale, model.bulletFormatList[i]);\n });\n}\n","import { detach, getUniqueID, rippleEffect, setValue, attributes } from '@syncfusion/ej2-base';\nimport { getValue, addClass, deleteObject } from '@syncfusion/ej2-base';\n/**\n * Initialize wrapper element for angular.\n *\n * @private\n *\n * @param {CreateElementArgs} createElement - Specifies created element args\n * @param {string} tag - Specifies tag name\n * @param {string} type - Specifies type name\n * @param {HTMLInputElement} element - Specifies input element\n * @param {string} WRAPPER - Specifies wrapper element\n * @param {string} role - Specifies role\n * @returns {HTMLInputElement} - Input Element\n */\nexport function wrapperInitialize(createElement, tag, type, element, WRAPPER, role) {\n var input = element;\n if (element.tagName === tag) {\n var ejInstance = getValue('ej2_instances', element);\n input = createElement('input', { attrs: { 'type': type } });\n var props = ['change', 'cssClass', 'label', 'labelPosition', 'id'];\n for (var index = 0, len = element.attributes.length; index < len; index++) {\n if (props.indexOf(element.attributes[index].nodeName) === -1) {\n input.setAttribute(element.attributes[index].nodeName, element.attributes[index].nodeValue);\n }\n }\n attributes(element, { 'class': WRAPPER });\n element.appendChild(input);\n setValue('ej2_instances', ejInstance, input);\n deleteObject(element, 'ej2_instances');\n }\n return input;\n}\n/**\n * Get the text node.\n *\n * @param {HTMLElement} element - Specifies html element\n * @private\n * @returns {Node} - Text node.\n */\nexport function getTextNode(element) {\n var node;\n var childnode = element.childNodes;\n for (var i = 0; i < childnode.length; i++) {\n node = childnode[i];\n if (node.nodeType === 3) {\n return node;\n }\n }\n return null;\n}\n/**\n * Destroy the button components.\n *\n * @private\n * @param {Switch | CheckBox} ejInst - Specifies eJ2 Instance\n * @param {Element} wrapper - Specifies wrapper element\n * @param {string} tagName - Specifies tag name\n * @returns {void}\n */\nexport function destroy(ejInst, wrapper, tagName) {\n if (tagName === 'INPUT') {\n wrapper.parentNode.insertBefore(ejInst.element, wrapper);\n detach(wrapper);\n ejInst.element.checked = false;\n ['name', 'value', 'disabled'].forEach(function (key) {\n ejInst.element.removeAttribute(key);\n });\n }\n else {\n ['role', 'aria-checked', 'class'].forEach(function (key) {\n wrapper.removeAttribute(key);\n });\n wrapper.innerHTML = '';\n }\n}\n/**\n * Initialize control pre rendering.\n *\n * @private\n * @param {Switch | CheckBox} proxy - Specifies proxy\n * @param {string} control - Specifies control\n * @param {string} wrapper - Specifies wrapper element\n * @param {HTMLInputElement} element - Specifies input element\n * @param {string} moduleName - Specifies module name\n * @returns {void}\n */\nexport function preRender(proxy, control, wrapper, element, moduleName) {\n element = wrapperInitialize(proxy.createElement, control, 'checkbox', element, wrapper, moduleName);\n proxy.element = element;\n if (proxy.element.getAttribute('type') !== 'checkbox') {\n proxy.element.setAttribute('type', 'checkbox');\n }\n if (!proxy.element.id) {\n proxy.element.id = getUniqueID('e-' + moduleName);\n }\n}\n/**\n * Creates CheckBox component UI with theming and ripple support.\n *\n * @private\n * @param {CreateElementArgs} createElement - Specifies Created Element args\n * @param {boolean} enableRipple - Specifies ripple effect\n * @param {CheckBoxUtilModel} options - Specifies Checkbox util Model\n * @returns {Element} - Checkbox Element\n */\nexport function createCheckBox(createElement, enableRipple, options) {\n if (enableRipple === void 0) { enableRipple = false; }\n if (options === void 0) { options = {}; }\n var wrapper = createElement('div', { className: 'e-checkbox-wrapper e-css' });\n if (options.cssClass) {\n addClass([wrapper], options.cssClass.split(' '));\n }\n if (options.enableRtl) {\n wrapper.classList.add('e-rtl');\n }\n if (enableRipple) {\n var rippleSpan = createElement('span', { className: 'e-ripple-container' });\n rippleEffect(rippleSpan, { isCenterRipple: true, duration: 400 });\n wrapper.appendChild(rippleSpan);\n }\n var frameSpan = createElement('span', { className: 'e-frame e-icons' });\n if (options.checked) {\n frameSpan.classList.add('e-check');\n }\n wrapper.appendChild(frameSpan);\n if (options.label) {\n var labelSpan = createElement('span', { className: 'e-label' });\n if (options.disableHtmlEncode) {\n labelSpan.textContent = options.label;\n }\n else {\n labelSpan.innerHTML = options.label;\n }\n wrapper.appendChild(labelSpan);\n }\n return wrapper;\n}\n/**\n * Handles ripple mouse.\n *\n * @private\n * @param {MouseEvent} e - Specifies mouse event\n * @param {Element} rippleSpan - Specifies Ripple span element\n * @returns {void}\n */\nexport function rippleMouseHandler(e, rippleSpan) {\n if (rippleSpan) {\n var event_1 = document.createEvent('MouseEvents');\n event_1.initEvent(e.type, false, true);\n rippleSpan.dispatchEvent(event_1);\n }\n}\n/**\n * Append hidden input to given element\n *\n * @private\n * @param {Switch | CheckBox} proxy - Specifies Proxy\n * @param {Element} wrap - Specifies Wrapper ELement\n * @returns {void}\n */\nexport function setHiddenInput(proxy, wrap) {\n if (proxy.element.getAttribute('ejs-for')) {\n wrap.appendChild(proxy.createElement('input', {\n attrs: { 'name': proxy.name || proxy.element.name, 'value': 'false', 'type': 'hidden' }\n }));\n }\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, NotifyPropertyChanges, Component, isBlazor, isRippleEnabled } from '@syncfusion/ej2-base';\nimport { addClass, Event, detach, removeClass } from '@syncfusion/ej2-base';\nimport { rippleEffect, EventHandler, Observer, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { getTextNode } from '../common/common';\n/**\n * Defines the icon position of button.\n */\nexport var IconPosition;\n(function (IconPosition) {\n /**\n * Positions the Icon at the left of the text content in the Button.\n */\n IconPosition[\"Left\"] = \"Left\";\n /**\n * Positions the Icon at the right of the text content in the Button.\n */\n IconPosition[\"Right\"] = \"Right\";\n /**\n * Positions the Icon at the top of the text content in the Button.\n */\n IconPosition[\"Top\"] = \"Top\";\n /**\n * Positions the Icon at the bottom of the text content in the Button.\n */\n IconPosition[\"Bottom\"] = \"Bottom\";\n})(IconPosition || (IconPosition = {}));\nexport var buttonObserver = new Observer();\nvar cssClassName = {\n RTL: 'e-rtl',\n BUTTON: 'e-btn',\n PRIMARY: 'e-primary',\n ICONBTN: 'e-icon-btn'\n};\n/**\n * The Button is a graphical user interface element that triggers an event on its click action. It can contain a text, an image, or both.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Button = /** @class */ (function (_super) {\n __extends(Button, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {ButtonModel} options - Specifies the button model\n * @param {string|HTMLButtonElement} element - Specifies the target element\n */\n function Button(options, element) {\n return _super.call(this, options, element) || this;\n }\n Button.prototype.preRender = function () {\n // pre render code snippets\n };\n /**\n * Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n Button.prototype.render = function () {\n this.initialize();\n this.removeRippleEffect = rippleEffect(this.element, { selector: '.' + cssClassName.BUTTON });\n this.renderComplete();\n };\n Button.prototype.initialize = function () {\n if (this.cssClass) {\n addClass([this.element], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n if (this.isPrimary) {\n this.element.classList.add(cssClassName.PRIMARY);\n }\n if (!isBlazor() || (isBlazor() && this.getModuleName() !== 'progress-btn')) {\n if (this.content) {\n var tempContent = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(this.content) : this.content;\n this.element.innerHTML = tempContent;\n }\n this.setIconCss();\n }\n if (this.enableRtl) {\n this.element.classList.add(cssClassName.RTL);\n }\n if (this.disabled) {\n this.controlStatus(this.disabled);\n }\n else {\n this.wireEvents();\n }\n };\n Button.prototype.controlStatus = function (disabled) {\n this.element.disabled = disabled;\n };\n Button.prototype.setIconCss = function () {\n if (this.iconCss) {\n var span = this.createElement('span', { className: 'e-btn-icon ' + this.iconCss });\n if (!this.element.textContent.trim()) {\n this.element.classList.add(cssClassName.ICONBTN);\n }\n else {\n span.classList.add('e-icon-' + this.iconPosition.toLowerCase());\n if (this.iconPosition === 'Top' || this.iconPosition === 'Bottom') {\n this.element.classList.add('e-' + this.iconPosition.toLowerCase() + '-icon-btn');\n }\n }\n var node = this.element.childNodes[0];\n if (node && (this.iconPosition === 'Left' || this.iconPosition === 'Top')) {\n this.element.insertBefore(span, node);\n }\n else {\n this.element.appendChild(span);\n }\n }\n };\n Button.prototype.wireEvents = function () {\n if (this.isToggle) {\n EventHandler.add(this.element, 'click', this.btnClickHandler, this);\n }\n };\n Button.prototype.unWireEvents = function () {\n if (this.isToggle) {\n EventHandler.remove(this.element, 'click', this.btnClickHandler);\n }\n };\n Button.prototype.btnClickHandler = function () {\n if (this.element.classList.contains('e-active')) {\n this.element.classList.remove('e-active');\n }\n else {\n this.element.classList.add('e-active');\n }\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n Button.prototype.destroy = function () {\n var classList = [cssClassName.PRIMARY, cssClassName.RTL, cssClassName.ICONBTN, 'e-success', 'e-info', 'e-danger',\n 'e-warning', 'e-flat', 'e-outline', 'e-small', 'e-bigger', 'e-active', 'e-round',\n 'e-top-icon-btn', 'e-bottom-icon-btn'];\n if (this.cssClass) {\n classList = classList.concat(this.cssClass.split(' '));\n }\n _super.prototype.destroy.call(this);\n removeClass([this.element], classList);\n if (!this.element.getAttribute('class')) {\n this.element.removeAttribute('class');\n }\n if (this.disabled) {\n this.element.removeAttribute('disabled');\n }\n if (this.content) {\n this.element.innerHTML = this.element.innerHTML.replace(this.content, '');\n }\n var span = this.element.querySelector('span.e-btn-icon');\n if (span) {\n detach(span);\n }\n this.unWireEvents();\n if (isRippleEnabled) {\n this.removeRippleEffect();\n }\n };\n /**\n * Get component name.\n *\n * @returns {string} - Module name\n * @private\n */\n Button.prototype.getModuleName = function () {\n return 'btn';\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist Data\n * @private\n */\n Button.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Dynamically injects the required modules to the component.\n *\n * @private\n * @returns {void}\n */\n Button.Inject = function () {\n // Inject code snippets\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {ButtonModel} newProp - Specifies new properties\n * @param {ButtonModel} oldProp - Specifies old properties\n * @returns {void}\n * @private\n */\n Button.prototype.onPropertyChanged = function (newProp, oldProp) {\n var span = this.element.querySelector('span.e-btn-icon');\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'isPrimary':\n if (newProp.isPrimary) {\n this.element.classList.add(cssClassName.PRIMARY);\n }\n else {\n this.element.classList.remove(cssClassName.PRIMARY);\n }\n break;\n case 'disabled':\n this.controlStatus(newProp.disabled);\n break;\n case 'iconCss': {\n if (span) {\n if (newProp.iconCss) {\n span.className = 'e-btn-icon ' + newProp.iconCss;\n if (this.element.textContent.trim()) {\n if (this.iconPosition === 'Left') {\n span.classList.add('e-icon-left');\n }\n else {\n span.classList.add('e-icon-right');\n }\n }\n }\n else {\n detach(span);\n }\n }\n else {\n this.setIconCss();\n }\n break;\n }\n case 'iconPosition':\n removeClass([this.element], ['e-top-icon-btn', 'e-bottom-icon-btn']);\n span = this.element.querySelector('span.e-btn-icon');\n if (span) {\n detach(span);\n }\n this.setIconCss();\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.replace(/\\s+/g, ' ').trim().split(' '));\n }\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n this.element.classList.add(cssClassName.RTL);\n }\n else {\n this.element.classList.remove(cssClassName.RTL);\n }\n break;\n case 'content': {\n var node = getTextNode(this.element);\n if (!node) {\n this.element.classList.remove(cssClassName.ICONBTN);\n }\n if (!isBlazor() || (isBlazor() && !this.isServerRendered && this.getModuleName() !== 'progress-btn')) {\n if (this.enableHtmlSanitizer) {\n newProp.content = SanitizeHtmlHelper.sanitize(newProp.content);\n }\n this.element.innerHTML = newProp.content;\n this.setIconCss();\n }\n break;\n }\n case 'isToggle':\n if (newProp.isToggle) {\n EventHandler.add(this.element, 'click', this.btnClickHandler, this);\n }\n else {\n EventHandler.remove(this.element, 'click', this.btnClickHandler);\n removeClass([this.element], ['e-active']);\n }\n break;\n }\n }\n };\n /**\n * Click the button element\n * its native method\n *\n * @public\n * @returns {void}\n */\n Button.prototype.click = function () {\n this.element.click();\n };\n /**\n * Sets the focus to Button\n * its native method\n *\n * @public\n * @returns {void}\n */\n Button.prototype.focusIn = function () {\n this.element.focus();\n };\n __decorate([\n Property('Left')\n ], Button.prototype, \"iconPosition\", void 0);\n __decorate([\n Property('')\n ], Button.prototype, \"iconCss\", void 0);\n __decorate([\n Property(false)\n ], Button.prototype, \"disabled\", void 0);\n __decorate([\n Property(false)\n ], Button.prototype, \"isPrimary\", void 0);\n __decorate([\n Property('')\n ], Button.prototype, \"cssClass\", void 0);\n __decorate([\n Property('')\n ], Button.prototype, \"content\", void 0);\n __decorate([\n Property(false)\n ], Button.prototype, \"isToggle\", void 0);\n __decorate([\n Property()\n ], Button.prototype, \"locale\", void 0);\n __decorate([\n Property(false)\n ], Button.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Event()\n ], Button.prototype, \"created\", void 0);\n Button = __decorate([\n NotifyPropertyChanges\n ], Button);\n return Button;\n}(Component));\nexport { Button };\n","/**\n * Resize library\n */\nimport { isNullOrUndefined as isNOU, createElement, EventHandler, detach, Browser } from '@syncfusion/ej2-base';\n/* eslint-disable */\nvar elementClass = ['north-west', 'north', 'north-east', 'west', 'east', 'south-west', 'south', 'south-east'];\nvar RESIZE_HANDLER = 'e-resize-handle';\nvar FOCUSED_HANDLER = 'e-focused-handle';\nvar DIALOG_RESIZABLE = 'e-dlg-resizable';\nvar RESTRICT_LEFT = ['e-restrict-left'];\nvar RESIZE_WITHIN_VIEWPORT = 'e-resize-viewport';\nvar dialogBorderResize = ['north', 'west', 'east', 'south'];\nvar targetElement;\nvar selectedHandler;\nvar originalWidth = 0;\nvar originalHeight = 0;\nvar originalX = 0;\nvar originalY = 0;\nvar originalMouseX = 0;\nvar originalMouseY = 0;\nvar minHeight;\nvar maxHeight;\nvar minWidth;\nvar maxWidth;\nvar containerElement;\nvar resizeStart = null;\nvar resize = null;\nvar resizeEnd = null;\n/* eslint-enable */\nvar resizeWestWidth;\nvar setLeft = true;\nvar previousWidth = 0;\nvar setWidth = true;\n// eslint-disable-next-line\nvar proxy;\n/**\n *\n * @param {ResizeArgs} args - specifies the resize args\n * @returns {void}\n */\nexport function createResize(args) {\n resizeStart = args.resizeBegin;\n resize = args.resizing;\n resizeEnd = args.resizeComplete;\n targetElement = getDOMElement(args.element);\n containerElement = getDOMElement(args.boundary);\n var directions = args.direction.split(' ');\n for (var i = 0; i < directions.length; i++) {\n if (dialogBorderResize.indexOf(directions[i]) >= 0 && directions[i]) {\n setBorderResizeElm(directions[i]);\n }\n else if (directions[i].trim() !== '') {\n var resizeHandler = createElement('div', { className: 'e-icons ' + RESIZE_HANDLER + ' ' + 'e-' + directions[i] });\n targetElement.appendChild(resizeHandler);\n }\n }\n minHeight = args.minHeight;\n minWidth = args.minWidth;\n maxWidth = args.maxWidth;\n maxHeight = args.maxHeight;\n if (args.proxy && args.proxy.element && args.proxy.element.classList.contains('e-dialog')) {\n wireEvents(args.proxy);\n }\n else {\n wireEvents();\n }\n}\n/**\n *\n * @param {string} direction - specifies the string\n * @returns {void}\n */\nfunction setBorderResizeElm(direction) {\n calculateValues();\n var borderBottom = createElement('span', {\n attrs: {\n 'unselectable': 'on', 'contenteditable': 'false'\n }\n });\n borderBottom.setAttribute('class', 'e-dialog-border-resize e-' + direction);\n if (direction === 'south') {\n borderBottom.style.height = '2px';\n borderBottom.style.width = '100%';\n borderBottom.style.bottom = '0px';\n borderBottom.style.left = '0px';\n }\n if (direction === 'north') {\n borderBottom.style.height = '2px';\n borderBottom.style.width = '100%';\n borderBottom.style.top = '0px';\n borderBottom.style.left = '0px';\n }\n if (direction === 'east') {\n borderBottom.style.height = '100%';\n borderBottom.style.width = '2px';\n borderBottom.style.right = '0px';\n borderBottom.style.top = '0px';\n }\n if (direction === 'west') {\n borderBottom.style.height = '100%';\n borderBottom.style.width = '2px';\n borderBottom.style.left = '0px';\n borderBottom.style.top = '0px';\n }\n targetElement.appendChild(borderBottom);\n}\n/**\n *\n * @param {string} element - specifies the element\n * @returns {HTMLElement} - returns the element\n */\nfunction getDOMElement(element) {\n var domElement;\n if (!isNOU(element)) {\n if (typeof (element) === 'string') {\n domElement = document.querySelector(element);\n }\n else {\n domElement = element;\n }\n }\n return domElement;\n}\n// eslint-disable-next-line\nfunction wireEvents(args) {\n if (isNOU(args)) {\n args = this;\n }\n var resizers = targetElement.querySelectorAll('.' + RESIZE_HANDLER);\n for (var i = 0; i < resizers.length; i++) {\n selectedHandler = resizers[i];\n EventHandler.add(selectedHandler, 'mousedown', onMouseDown, args);\n var eventName = (Browser.info.name === 'msie') ? 'pointerdown' : 'touchstart';\n EventHandler.add(selectedHandler, eventName, onTouchStart, args);\n }\n var borderResizers = targetElement.querySelectorAll('.e-dialog-border-resize');\n if (!isNOU(borderResizers)) {\n for (var i = 0; i < borderResizers.length; i++) {\n selectedHandler = borderResizers[i];\n EventHandler.add(selectedHandler, 'mousedown', onMouseDown, args);\n var eventName = (Browser.info.name === 'msie') ? 'pointerdown' : 'touchstart';\n EventHandler.add(selectedHandler, eventName, onTouchStart, args);\n }\n }\n}\n/* istanbul ignore next */\n/**\n *\n * @param {string} e - specifies the string\n * @returns {string} - returns the string\n */\nfunction getEventType(e) {\n return (e.indexOf('mouse') > -1) ? 'mouse' : 'touch';\n}\n/* istanbul ignore next */\n/**\n *\n * @param {MouseEvent} e - specifies the mouse event\n * @returns {void}\n */\nfunction onMouseDown(e) {\n e.preventDefault();\n targetElement = e.target.parentElement;\n calculateValues();\n originalMouseX = e.pageX;\n originalMouseY = e.pageY;\n e.target.classList.add(FOCUSED_HANDLER);\n if (!isNOU(resizeStart)) {\n proxy = this;\n if (resizeStart(e, proxy) === true) {\n return;\n }\n }\n if (this.targetEle && targetElement && targetElement.querySelector('.' + DIALOG_RESIZABLE)) {\n containerElement = this.target === ('body' || 'document.body' || document.body) ? null : this.targetEle;\n maxWidth = this.targetEle.clientWidth;\n maxHeight = this.targetEle.clientHeight;\n }\n var target = (isNOU(containerElement)) ? document : containerElement;\n EventHandler.add(target, 'mousemove', onMouseMove, this);\n EventHandler.add(document, 'mouseup', onMouseUp, this);\n for (var i = 0; i < RESTRICT_LEFT.length; i++) {\n if (targetElement.classList.contains(RESTRICT_LEFT[i])) {\n setLeft = false;\n }\n else {\n setLeft = true;\n }\n }\n}\n/* istanbul ignore next */\n/**\n *\n * @param {MouseEvent} e - specifies the event\n * @returns {void}\n */\nfunction onMouseUp(e) {\n var touchMoveEvent = (Browser.info.name === 'msie') ? 'pointermove' : 'touchmove';\n var touchEndEvent = (Browser.info.name === 'msie') ? 'pointerup' : 'touchend';\n var target = (isNOU(containerElement)) ? document : containerElement;\n var eventName = (Browser.info.name === 'msie') ? 'pointerdown' : 'touchstart';\n EventHandler.remove(target, 'mousemove', onMouseMove);\n EventHandler.remove(target, touchMoveEvent, onMouseMove);\n EventHandler.remove(target, eventName, onMouseMove);\n if (!isNOU(document.body.querySelector('.' + FOCUSED_HANDLER))) {\n document.body.querySelector('.' + FOCUSED_HANDLER).classList.remove(FOCUSED_HANDLER);\n }\n if (!isNOU(resizeEnd)) {\n proxy = this;\n resizeEnd(e, proxy);\n }\n EventHandler.remove(document, 'mouseup', onMouseUp);\n EventHandler.remove(document, touchEndEvent, onMouseUp);\n}\n/* istanbul ignore next */\n/**\n * @returns {void}\n */\nfunction calculateValues() {\n originalWidth = parseFloat(getComputedStyle(targetElement, null).getPropertyValue('width').replace('px', ''));\n originalHeight = parseFloat(getComputedStyle(targetElement, null).getPropertyValue('height').replace('px', ''));\n originalX = targetElement.getBoundingClientRect().left;\n originalY = targetElement.getBoundingClientRect().top;\n}\n/* istanbul ignore next */\n/**\n *\n * @param {MouseEvent} e - specifies the event\n * @returns {void}\n */\nfunction onTouchStart(e) {\n targetElement = e.target.parentElement;\n calculateValues();\n var dialogResizeElement = targetElement.classList.contains('e-dialog');\n if ((e.target.classList.contains(RESIZE_HANDLER) || e.target.classList.contains('e-dialog-border-resize')) && dialogResizeElement) {\n e.target.classList.add(FOCUSED_HANDLER);\n }\n var coordinates = e.touches ? e.changedTouches[0] : e;\n originalMouseX = coordinates.pageX;\n originalMouseY = coordinates.pageY;\n if (!isNOU(resizeStart)) {\n proxy = this;\n if (resizeStart(e, proxy) === true) {\n return;\n }\n }\n var touchMoveEvent = (Browser.info.name === 'msie') ? 'pointermove' : 'touchmove';\n var touchEndEvent = (Browser.info.name === 'msie') ? 'pointerup' : 'touchend';\n var target = (isNOU(containerElement)) ? document : containerElement;\n EventHandler.add(target, touchMoveEvent, onMouseMove, this);\n EventHandler.add(document, touchEndEvent, onMouseUp, this);\n}\n/* istanbul ignore next */\n/**\n *\n * @param {MouseEvent} e - specifies the event\n * @returns {void}\n */\nfunction onMouseMove(e) {\n if (e.target.classList.contains(RESIZE_HANDLER) && e.target.classList.contains(FOCUSED_HANDLER)) {\n selectedHandler = e.target;\n }\n else if (!isNOU(document.body.querySelector('.' + FOCUSED_HANDLER))) {\n selectedHandler = document.body.querySelector('.' + FOCUSED_HANDLER);\n }\n if (!isNOU(selectedHandler)) {\n var resizeTowards = '';\n for (var i = 0; i < elementClass.length; i++) {\n if (selectedHandler.classList.contains('e-' + elementClass[i])) {\n resizeTowards = elementClass[i];\n }\n }\n if (!isNOU(resize)) {\n proxy = this;\n resize(e, proxy);\n }\n switch (resizeTowards) {\n case 'south':\n resizeSouth(e);\n break;\n case 'north':\n resizeNorth(e);\n break;\n case 'west':\n resizeWest(e);\n break;\n case 'east':\n resizeEast(e);\n break;\n case 'south-east':\n resizeSouth(e);\n resizeEast(e);\n break;\n case 'south-west':\n resizeSouth(e);\n resizeWest(e);\n break;\n case 'north-east':\n resizeNorth(e);\n resizeEast(e);\n break;\n case 'north-west':\n resizeNorth(e);\n resizeWest(e);\n break;\n default: break;\n }\n }\n}\n/* istanbul ignore next */\n/**\n *\n * @param {HTMLElement} element - specifies the eleemnt\n * @returns {ClientRect} - returns the client\n */\nfunction getClientRectValues(element) {\n return element.getBoundingClientRect();\n}\n/* istanbul ignore next */\n// eslint-disable-next-line\nfunction resizeSouth(e) {\n var documentHeight = document.documentElement.clientHeight;\n var calculateValue = false;\n var coordinates = e.touches ? e.changedTouches[0] : e;\n var currentpageY = coordinates.pageY;\n var targetRectValues = getClientRectValues(targetElement);\n var containerRectValues;\n if (!isNOU(containerElement)) {\n containerRectValues = getClientRectValues(containerElement);\n }\n if (!isNOU(containerElement)) {\n calculateValue = true;\n }\n else if (isNOU(containerElement) && ((documentHeight - currentpageY) >= 0 || (targetRectValues.top < 0))) {\n calculateValue = true;\n }\n var calculatedHeight = originalHeight + (currentpageY - originalMouseY);\n calculatedHeight = (calculatedHeight > minHeight) ? calculatedHeight : minHeight;\n var containerTop = 0;\n if (!isNOU(containerElement)) {\n containerTop = containerRectValues.top;\n }\n var borderValue = isNOU(containerElement) ? 0 : containerElement.offsetHeight - containerElement.clientHeight;\n var topWithoutborder = (targetRectValues.top - containerTop) - (borderValue / 2);\n topWithoutborder = (topWithoutborder < 0) ? 0 : topWithoutborder;\n if (targetRectValues.top > 0 && (topWithoutborder + calculatedHeight) > maxHeight) {\n calculateValue = false;\n if (targetElement.classList.contains(RESIZE_WITHIN_VIEWPORT)) {\n return;\n }\n targetElement.style.height = (maxHeight - parseInt(topWithoutborder.toString(), 10)) + 'px';\n return;\n }\n var targetTop = 0;\n if (calculateValue) {\n if (targetRectValues.top < 0 && (documentHeight + (targetRectValues.height + targetRectValues.top) > 0)) {\n targetTop = targetRectValues.top;\n if ((calculatedHeight + targetTop) <= 30) {\n calculatedHeight = (targetRectValues.height - (targetRectValues.height + targetRectValues.top)) + 30;\n }\n }\n if (((calculatedHeight + targetRectValues.top) >= maxHeight)) {\n targetElement.style.height = targetRectValues.height +\n (documentHeight - (targetRectValues.height + targetRectValues.top)) + 'px';\n }\n var calculatedTop = (isNOU(containerElement)) ? targetTop : topWithoutborder;\n if (calculatedHeight >= minHeight && ((calculatedHeight + calculatedTop) <= maxHeight)) {\n targetElement.style.height = calculatedHeight + 'px';\n }\n }\n}\n/* istanbul ignore next */\n// eslint-disable-next-line\nfunction resizeNorth(e) {\n var calculateValue = false;\n var boundaryRectValues;\n var pageY = (getEventType(e.type) === 'mouse') ? e.pageY : e.touches[0].pageY;\n var targetRectValues = getClientRectValues(targetElement);\n if (!isNOU(containerElement)) {\n boundaryRectValues = getClientRectValues(containerElement);\n }\n if (!isNOU(containerElement) && (targetRectValues.top - boundaryRectValues.top) > 0) {\n calculateValue = true;\n }\n else if (isNOU(containerElement) && pageY > 0) {\n calculateValue = true;\n }\n var currentHeight = originalHeight - (pageY - originalMouseY);\n if (calculateValue) {\n if (currentHeight >= minHeight && currentHeight <= maxHeight) {\n var containerTop = 0;\n if (!isNOU(containerElement)) {\n containerTop = boundaryRectValues.top;\n }\n var top_1 = (originalY - containerTop) + (pageY - originalMouseY);\n top_1 = top_1 > 0 ? top_1 : 1;\n targetElement.style.height = currentHeight + 'px';\n targetElement.style.top = top_1 + 'px';\n }\n }\n}\n/* istanbul ignore next */\n// eslint-disable-next-line\nfunction resizeWest(e) {\n var documentWidth = document.documentElement.clientWidth;\n var calculateValue = false;\n var rectValues;\n if (!isNOU(containerElement)) {\n rectValues = getClientRectValues(containerElement);\n }\n var pageX = (getEventType(e.type) === 'mouse') ? e.pageX : e.touches[0].pageX;\n var targetRectValues = getClientRectValues(targetElement);\n var borderValue = isNOU(containerElement) ? 0 : containerElement.offsetWidth - containerElement.clientWidth;\n /* eslint-disable */\n var left = isNOU(containerElement) ? 0 : rectValues.left;\n var containerWidth = isNOU(containerElement) ? 0 : rectValues.width;\n /* eslint-enable */\n if (isNOU(resizeWestWidth)) {\n if (!isNOU(containerElement)) {\n resizeWestWidth = (((targetRectValues.left - left) - borderValue / 2)) + targetRectValues.width;\n resizeWestWidth = resizeWestWidth + (containerWidth - borderValue - resizeWestWidth);\n }\n else {\n resizeWestWidth = documentWidth;\n }\n }\n if (!isNOU(containerElement) &&\n (Math.floor((targetRectValues.left - rectValues.left) + targetRectValues.width +\n (rectValues.right - targetRectValues.right)) - borderValue) <= maxWidth) {\n calculateValue = true;\n }\n else if (isNOU(containerElement) && pageX >= 0) {\n calculateValue = true;\n }\n var calculatedWidth = originalWidth - (pageX - originalMouseX);\n if (setLeft) {\n calculatedWidth = (calculatedWidth > resizeWestWidth) ? resizeWestWidth : calculatedWidth;\n }\n if (calculateValue) {\n if (calculatedWidth >= minWidth && calculatedWidth <= maxWidth) {\n var containerLeft = 0;\n if (!isNOU(containerElement)) {\n containerLeft = rectValues.left;\n }\n var left_1 = (originalX - containerLeft) + (pageX - originalMouseX);\n left_1 = (left_1 > 0) ? left_1 : 1;\n if (calculatedWidth !== previousWidth && setWidth) {\n targetElement.style.width = calculatedWidth + 'px';\n }\n if (setLeft) {\n targetElement.style.left = left_1 + 'px';\n if (left_1 === 1) {\n setWidth = false;\n }\n else {\n setWidth = true;\n }\n }\n }\n }\n previousWidth = calculatedWidth;\n}\n/* istanbul ignore next */\n// eslint-disable-next-line\nfunction resizeEast(e) {\n var documentWidth = document.documentElement.clientWidth;\n var calculateValue = false;\n var containerRectValues;\n if (!isNOU(containerElement)) {\n containerRectValues = getClientRectValues(containerElement);\n }\n var coordinates = e.touches ? e.changedTouches[0] : e;\n var pageX = coordinates.pageX;\n var targetRectValues = getClientRectValues(targetElement);\n if (!isNOU(containerElement) && (((targetRectValues.left - containerRectValues.left) + targetRectValues.width) <= maxWidth\n || (targetRectValues.right - containerRectValues.left) >= targetRectValues.width)) {\n calculateValue = true;\n }\n else if (isNOU(containerElement) && (documentWidth - pageX) > 0) {\n calculateValue = true;\n }\n var calculatedWidth = originalWidth + (pageX - originalMouseX);\n var containerLeft = 0;\n if (!isNOU(containerElement)) {\n containerLeft = containerRectValues.left;\n }\n if (((targetRectValues.left - containerLeft) + calculatedWidth) > maxWidth) {\n calculateValue = false;\n if (targetElement.classList.contains(RESIZE_WITHIN_VIEWPORT)) {\n return;\n }\n targetElement.style.width = maxWidth - (targetRectValues.left - containerLeft) + 'px';\n }\n if (calculateValue) {\n if (calculatedWidth >= minWidth && calculatedWidth <= maxWidth) {\n targetElement.style.width = calculatedWidth + 'px';\n }\n }\n}\n/* istanbul ignore next */\n/**\n *\n * @param {number} minimumHeight - specifies the number\n * @returns {void}\n */\nexport function setMinHeight(minimumHeight) {\n minHeight = minimumHeight;\n}\n/**\n *\n * @param {number} value - specifies the number value\n * @returns {void}\n */\nexport function setMaxWidth(value) {\n maxWidth = value;\n}\n/**\n *\n * @param {number} value - specifies the number value\n * @returns {void}\n */\nexport function setMaxHeight(value) {\n maxHeight = value;\n}\n/**\n * @returns {void}\n */\nexport function removeResize() {\n var handlers = targetElement.querySelectorAll('.' + RESIZE_HANDLER);\n for (var i = 0; i < handlers.length; i++) {\n detach(handlers[i]);\n }\n var borderResizers = targetElement.querySelectorAll('.e-dialog-border-resize');\n if (!isNOU(borderResizers)) {\n for (var i = 0; i < borderResizers.length; i++) {\n detach(borderResizers[i]);\n }\n }\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\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, Property, Event, Collection, L10n, Complex, compile, createElement } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty, isBlazor } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit, append, EventHandler, Draggable, extend } from '@syncfusion/ej2-base';\nimport { SanitizeHtmlHelper, Browser } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { Popup, PositionData, getZindexPartial } from '../popup/popup';\nimport { createResize, removeResize, setMinHeight, setMaxWidth, setMaxHeight } from '../common/resize';\nvar ButtonProps = /** @class */ (function (_super) {\n __extends(ButtonProps, _super);\n function ButtonProps() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], ButtonProps.prototype, \"isFlat\", void 0);\n __decorate([\n Property()\n ], ButtonProps.prototype, \"buttonModel\", void 0);\n __decorate([\n Property('Button')\n ], ButtonProps.prototype, \"type\", void 0);\n __decorate([\n Event()\n ], ButtonProps.prototype, \"click\", void 0);\n return ButtonProps;\n}(ChildProperty));\nexport { ButtonProps };\n/**\n * Configures the animation properties for both open and close the dialog.\n */\nvar AnimationSettings = /** @class */ (function (_super) {\n __extends(AnimationSettings, _super);\n function AnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Fade')\n ], AnimationSettings.prototype, \"effect\", void 0);\n __decorate([\n Property(400)\n ], AnimationSettings.prototype, \"duration\", void 0);\n __decorate([\n Property(0)\n ], AnimationSettings.prototype, \"delay\", void 0);\n return AnimationSettings;\n}(ChildProperty));\nexport { AnimationSettings };\nvar ROOT = 'e-dialog';\nvar RTL = 'e-rtl';\nvar DLG_HEADER_CONTENT = 'e-dlg-header-content';\nvar DLG_HEADER = 'e-dlg-header';\nvar DLG_FOOTER_CONTENT = 'e-footer-content';\nvar MODAL_DLG = 'e-dlg-modal';\nvar DLG_CONTENT = 'e-dlg-content';\nvar DLG_CLOSE_ICON = 'e-icon-dlg-close';\nvar DLG_OVERLAY = 'e-dlg-overlay';\nvar DLG_TARGET = 'e-dlg-target';\nvar DLG_CONTAINER = 'e-dlg-container';\nvar SCROLL_DISABLED = 'e-scroll-disabled';\nvar DLG_PRIMARY_BUTTON = 'e-primary';\nvar ICON = 'e-icons';\nvar POPUP_ROOT = 'e-popup';\nvar DEVICE = 'e-device';\nvar FULLSCREEN = 'e-dlg-fullscreen';\nvar DLG_CLOSE_ICON_BTN = 'e-dlg-closeicon-btn';\nvar DLG_HIDE = 'e-popup-close';\nvar DLG_SHOW = 'e-popup-open';\nvar DLG_UTIL_DEFAULT_TITLE = 'Information';\nvar DLG_UTIL_ROOT = 'e-scroll-disabled';\nvar DLG_UTIL_ALERT = 'e-alert-dialog';\nvar DLG_UTIL_CONFIRM = 'e-confirm-dialog';\nvar DLG_RESIZABLE = 'e-dlg-resizable';\nvar DLG_RESTRICT_LEFT_VALUE = 'e-restrict-left';\nvar DLG_RESTRICT_WIDTH_VALUE = 'e-resize-viewport';\nvar DLG_REF_ELEMENT = 'e-dlg-ref-element';\nvar DLG_USER_ACTION_CLOSED = 'user action';\nvar DLG_CLOSE_ICON_CLOSED = 'close icon';\nvar DLG_ESCAPE_CLOSED = 'escape';\nvar DLG_OVERLAYCLICK_CLOSED = 'overlayClick';\nvar DLG_DRAG = 'e-draggable';\n/**\n * Represents the dialog component that displays the information and get input from the user.\n * Two types of dialog components are `Modal and Modeless (non-modal)` depending on its interaction with parent application.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Dialog = /** @class */ (function (_super) {\n __extends(Dialog, _super);\n /*\n * * Constructor for creating the widget\n *\n * @param\n * @param\n * @hidden\n */\n function Dialog(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.needsID = true;\n return _this;\n }\n /**\n *Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.render = function () {\n this.initialize();\n this.initRender();\n this.wireEvents();\n if (this.width === '100%') {\n this.element.style.width = '';\n }\n if (this.minHeight !== '') {\n this.element.style.minHeight = formatUnit(this.minHeight);\n }\n if (this.enableResize) {\n this.setResize();\n if (this.animationSettings.effect === 'None') {\n this.getMinHeight();\n }\n }\n this.renderComplete();\n };\n Dialog.prototype.initializeValue = function () {\n this.dlgClosedBy = DLG_USER_ACTION_CLOSED;\n };\n /**\n *Initialize the event handler\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.preRender = function () {\n var _this = this;\n this.initializeValue();\n this.headerContent = null;\n this.allowMaxHeight = true;\n this.preventVisibility = true;\n this.clonedEle = this.element.cloneNode(true);\n this.closeIconClickEventHandler = function (event) {\n _this.dlgClosedBy = DLG_CLOSE_ICON_CLOSED;\n _this.hide(event);\n };\n this.dlgOverlayClickEventHandler = function (event) {\n _this.dlgClosedBy = DLG_OVERLAYCLICK_CLOSED;\n event.preventFocus = false;\n _this.trigger('overlayClick', event, function (overlayClickEventArgs) {\n if (!overlayClickEventArgs.preventFocus) {\n _this.focusContent();\n }\n _this.dlgClosedBy = DLG_USER_ACTION_CLOSED;\n });\n };\n var localeText = { close: 'Close' };\n this.l10n = new L10n('dialog', localeText, this.locale);\n this.checkPositionData();\n if (isNullOrUndefined(this.target)) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.target = document.body;\n this.isProtectedOnChange = prevOnChange;\n }\n };\n Dialog.prototype.isNumberValue = function (value) {\n var isNumber = /^[-+]?\\d*\\.?\\d+$/.test(value);\n return isNumber;\n };\n Dialog.prototype.checkPositionData = function () {\n if (!isNullOrUndefined(this.position)) {\n if (!isNullOrUndefined(this.position.X) && (typeof (this.position.X) !== 'number')) {\n var isNumber = this.isNumberValue(this.position.X);\n if (isNumber) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.position.X = parseFloat(this.position.X);\n this.isProtectedOnChange = prevOnChange;\n }\n }\n if (!isNullOrUndefined(this.position.Y) && (typeof (this.position.Y) !== 'number')) {\n var isNumber = this.isNumberValue(this.position.Y);\n if (isNumber) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.position.Y = parseFloat(this.position.Y);\n this.isProtectedOnChange = prevOnChange;\n }\n }\n }\n };\n Dialog.prototype.getEle = function (list, selector) {\n var element = undefined;\n for (var i = 0; i < list.length; i++) {\n if (list[i].classList.contains(selector)) {\n element = list[i];\n break;\n }\n }\n return element;\n };\n /* istanbul ignore next */\n Dialog.prototype.getMinHeight = function () {\n var computedHeaderHeight = '0px';\n var computedFooterHeight = '0px';\n if (!isNullOrUndefined(this.element.querySelector('.' + DLG_HEADER_CONTENT))) {\n computedHeaderHeight = getComputedStyle(this.headerContent).height;\n }\n var footerEle = this.getEle(this.element.children, DLG_FOOTER_CONTENT);\n if (!isNullOrUndefined(footerEle)) {\n computedFooterHeight = getComputedStyle(footerEle).height;\n }\n var headerHeight = parseInt(computedHeaderHeight.slice(0, computedHeaderHeight.indexOf('p')), 10);\n var footerHeight = parseInt(computedFooterHeight.slice(0, computedFooterHeight.indexOf('p')), 10);\n setMinHeight(headerHeight + 30 + (isNaN(footerHeight) ? 0 : footerHeight));\n return (headerHeight + 30 + footerHeight);\n };\n Dialog.prototype.onResizeStart = function (args, dialogObj) {\n dialogObj.trigger('resizeStart', args);\n return args.cancel;\n };\n Dialog.prototype.onResizing = function (args, dialogObj) {\n dialogObj.trigger('resizing', args);\n };\n Dialog.prototype.onResizeComplete = function (args, dialogObj) {\n dialogObj.trigger('resizeStop', args);\n };\n Dialog.prototype.setResize = function () {\n if (this.enableResize) {\n if (this.isBlazorServerRender() && !isNullOrUndefined(this.element.querySelector('.e-icons.e-resize-handle'))) {\n return;\n }\n this.element.classList.add(DLG_RESIZABLE);\n var computedHeight = getComputedStyle(this.element).minHeight;\n var computedWidth = getComputedStyle(this.element).minWidth;\n var direction = '';\n for (var i = 0; i < this.resizeHandles.length; i++) {\n if (this.resizeHandles[i] === 'All') {\n direction = 'south north east west north-east north-west south-east south-west';\n break;\n }\n else {\n var directionValue = '';\n switch (this.resizeHandles[i].toString()) {\n case 'SouthEast':\n directionValue = 'south-east';\n break;\n case 'SouthWest':\n directionValue = 'south-west';\n break;\n case 'NorthEast':\n directionValue = 'north-east';\n break;\n case 'NorthWest':\n directionValue = 'north-west';\n break;\n default:\n directionValue = this.resizeHandles[i].toString();\n break;\n }\n direction += directionValue.toLocaleLowerCase() + ' ';\n }\n }\n if (this.enableRtl && direction.trim() === 'south-east') {\n direction = 'south-west';\n }\n else if (this.enableRtl && direction.trim() === 'south-west') {\n direction = 'south-east';\n }\n if (this.isModal && this.enableRtl) {\n this.element.classList.add(DLG_RESTRICT_LEFT_VALUE);\n }\n else if (this.isModal && this.target === document.body) {\n this.element.classList.add(DLG_RESTRICT_WIDTH_VALUE);\n }\n createResize({\n element: this.element,\n direction: direction,\n minHeight: parseInt(computedHeight.slice(0, computedWidth.indexOf('p')), 10),\n maxHeight: this.targetEle.clientHeight,\n minWidth: parseInt(computedWidth.slice(0, computedWidth.indexOf('p')), 10),\n maxWidth: this.targetEle.clientWidth,\n boundary: this.target === document.body ? null : this.targetEle,\n resizeBegin: this.onResizeStart.bind(this),\n resizeComplete: this.onResizeComplete.bind(this),\n resizing: this.onResizing.bind(this),\n proxy: this\n });\n this.wireWindowResizeEvent();\n }\n else {\n removeResize();\n this.unWireWindowResizeEvent();\n if (this.isModal) {\n this.element.classList.remove(DLG_RESTRICT_LEFT_VALUE);\n }\n else {\n this.element.classList.remove(DLG_RESTRICT_WIDTH_VALUE);\n }\n this.element.classList.remove(DLG_RESIZABLE);\n }\n };\n Dialog.prototype.getFocusElement = function (target) {\n var value = 'input,select,textarea,button:enabled,a,[contenteditable=\"true\"],[tabindex]';\n var items = target.querySelectorAll(value);\n return { element: items[items.length - 1] };\n };\n /* istanbul ignore next */\n Dialog.prototype.keyDown = function (event) {\n var _this = this;\n if (event.keyCode === 9) {\n if (this.isModal) {\n var buttonObj = void 0;\n if (!isNullOrUndefined(this.btnObj)) {\n buttonObj = this.btnObj[this.btnObj.length - 1];\n }\n if ((isNullOrUndefined(this.btnObj)) && (!isNullOrUndefined(this.ftrTemplateContent))) {\n buttonObj = this.getFocusElement(this.ftrTemplateContent);\n }\n if (isNullOrUndefined(this.btnObj) && isNullOrUndefined(this.ftrTemplateContent) && !isNullOrUndefined(this.contentEle)) {\n buttonObj = this.getFocusElement(this.contentEle);\n }\n if (!isNullOrUndefined(buttonObj) && document.activeElement === buttonObj.element && !event.shiftKey) {\n event.preventDefault();\n this.focusableElements(this.element).focus();\n }\n if (document.activeElement === this.focusableElements(this.element) && event.shiftKey) {\n event.preventDefault();\n if (!isNullOrUndefined(buttonObj)) {\n buttonObj.element.focus();\n }\n }\n }\n }\n var element = document.activeElement;\n var isTagName = (['input', 'textarea'].indexOf(element.tagName.toLowerCase()) > -1);\n var isContentEdit = false;\n if (!isTagName) {\n isContentEdit = element.hasAttribute('contenteditable') && element.getAttribute('contenteditable') === 'true';\n }\n if (event.keyCode === 27 && this.closeOnEscape) {\n this.dlgClosedBy = DLG_ESCAPE_CLOSED;\n var query = document.querySelector('.e-popup-open:not(.e-dialog)');\n // 'document.querySelector' is used to find the elements rendered based on body\n if (!(!isNullOrUndefined(query) && !query.classList.contains(\"e-toolbar-pop\"))) {\n this.hide(event);\n }\n }\n if ((event.keyCode === 13 && !event.ctrlKey && element.tagName.toLowerCase() !== 'textarea' &&\n isTagName && !isNullOrUndefined(this.primaryButtonEle)) ||\n (event.keyCode === 13 && event.ctrlKey && (element.tagName.toLowerCase() === 'textarea' ||\n isContentEdit)) && !isNullOrUndefined(this.primaryButtonEle)) {\n var buttonIndex_1;\n var firstPrimary = this.buttons.some(function (data, index) {\n buttonIndex_1 = index;\n // eslint-disable-next-line\n var buttonModel = data.buttonModel;\n return !isNullOrUndefined(buttonModel) && buttonModel.isPrimary === true;\n });\n if (firstPrimary && typeof (this.buttons[buttonIndex_1].click) === 'function') {\n setTimeout(function () {\n _this.buttons[buttonIndex_1].click.call(_this, event);\n });\n }\n }\n };\n /**\n * Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.initialize = function () {\n if (!isNullOrUndefined(this.target)) {\n this.targetEle = ((typeof this.target) === 'string') ?\n document.querySelector(this.target) : this.target;\n }\n if (!this.isBlazorServerRender()) {\n addClass([this.element], ROOT);\n }\n if (Browser.isDevice) {\n addClass([this.element], DEVICE);\n }\n if (!this.isBlazorServerRender()) {\n this.setCSSClass();\n }\n this.setMaxHeight();\n };\n /**\n * Initialize the rendering\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.initRender = function () {\n var _this = this;\n this.initialRender = true;\n if (!this.isBlazorServerRender()) {\n attributes(this.element, { role: 'dialog' });\n }\n if (this.zIndex === 1000) {\n this.setzIndex(this.element, false);\n this.calculatezIndex = true;\n }\n else {\n this.calculatezIndex = false;\n }\n if (this.isBlazorServerRender() && isNullOrUndefined(this.headerContent)) {\n this.headerContent = this.element.getElementsByClassName('e-dlg-header-content')[0];\n }\n if (this.isBlazorServerRender() && isNullOrUndefined(this.contentEle)) {\n this.contentEle = this.element.querySelector('#' + this.element.id + '_dialog-content');\n }\n if (!this.isBlazorServerRender()) {\n this.setTargetContent();\n if (this.header !== '' && !isNullOrUndefined(this.header)) {\n this.setHeader();\n }\n this.renderCloseIcon();\n this.setContent();\n if (this.footerTemplate !== '' && !isNullOrUndefined(this.footerTemplate)) {\n this.setFooterTemplate();\n }\n else if (!isNullOrUndefined(this.buttons[0].buttonModel)) {\n this.setButton();\n }\n }\n if (this.isBlazorServerRender()) {\n if (!isNullOrUndefined(this.buttons[0].buttonModel) && this.footerTemplate === '') {\n this.setButton();\n }\n }\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n if (!this.isBlazorServerRender()) {\n attributes(this.element, { 'aria-modal': (this.isModal ? 'true' : 'false') });\n if (this.isModal) {\n this.setIsModal();\n }\n }\n if (this.isBlazorServerRender() && isNullOrUndefined(this.dlgContainer)) {\n this.dlgContainer = this.element.parentElement;\n for (var i = 0, childNodes = this.dlgContainer.children; i < childNodes.length; i++) {\n if (childNodes[i].classList.contains('e-dlg-overlay')) {\n this.dlgOverlay = childNodes[i];\n }\n }\n }\n if (this.element.classList.contains(DLG_UTIL_ALERT) !== true && this.element.classList.contains(DLG_UTIL_CONFIRM) !== true\n && !isNullOrUndefined(this.element.parentElement)) {\n var parentEle = this.isModal ? this.dlgContainer.parentElement : this.element.parentElement;\n this.refElement = this.createElement('div', { className: DLG_REF_ELEMENT });\n parentEle.insertBefore(this.refElement, (this.isModal ? this.dlgContainer : this.element));\n }\n if (!isNullOrUndefined(this.targetEle)) {\n // eslint-disable-next-line\n this.isModal ? this.targetEle.appendChild(this.dlgContainer) : this.targetEle.appendChild(this.element);\n }\n this.popupObj = new Popup(this.element, {\n height: this.height,\n width: this.width,\n zIndex: this.zIndex,\n relateTo: this.target,\n actionOnScroll: 'none',\n enableRtl: this.enableRtl,\n // eslint-disable-next-line\n open: function (event) {\n var eventArgs = {\n container: _this.isModal ? _this.dlgContainer : _this.element,\n element: _this.element,\n target: _this.target,\n preventFocus: false\n };\n if (_this.enableResize) {\n _this.resetResizeIcon();\n }\n _this.trigger('open', eventArgs, function (openEventArgs) {\n if (!openEventArgs.preventFocus) {\n _this.focusContent();\n }\n });\n },\n // eslint-disable-next-line\n close: function (event) {\n if (_this.isModal) {\n addClass([_this.dlgOverlay], 'e-fade');\n }\n _this.unBindEvent(_this.element);\n if (_this.isModal) {\n _this.dlgContainer.style.display = 'none';\n }\n _this.trigger('close', _this.closeArgs);\n var activeEle = document.activeElement;\n if (!isNullOrUndefined(activeEle) && !isNullOrUndefined((activeEle).blur)) {\n activeEle.blur();\n }\n if (!isNullOrUndefined(_this.storeActiveElement) && !isNullOrUndefined(_this.storeActiveElement.focus)) {\n _this.storeActiveElement.focus();\n }\n }\n });\n this.positionChange();\n this.setEnableRTL();\n if (!this.isBlazorServerRender()) {\n addClass([this.element], DLG_HIDE);\n if (this.isModal) {\n this.setOverlayZindex();\n }\n }\n if (this.visible) {\n this.show();\n }\n else {\n if (this.isModal) {\n this.dlgOverlay.style.display = 'none';\n }\n }\n this.initialRender = false;\n };\n Dialog.prototype.resetResizeIcon = function () {\n var dialogConHeight = this.getMinHeight();\n if (this.targetEle.offsetHeight < dialogConHeight) {\n var className = this.enableRtl ? 'e-south-west' : 'e-south-east';\n var resizeIcon = this.element.querySelector('.' + className);\n if (!isNullOrUndefined(resizeIcon)) {\n resizeIcon.style.bottom = '-' + dialogConHeight.toString() + 'px';\n }\n }\n };\n Dialog.prototype.setOverlayZindex = function (zIndexValue) {\n var zIndex;\n if (isNullOrUndefined(zIndexValue)) {\n zIndex = parseInt(this.element.style.zIndex, 10) ? parseInt(this.element.style.zIndex, 10) : this.zIndex;\n }\n else {\n zIndex = zIndexValue;\n }\n this.dlgOverlay.style.zIndex = (zIndex - 1).toString();\n this.dlgContainer.style.zIndex = zIndex.toString();\n };\n Dialog.prototype.positionChange = function () {\n if (this.isModal) {\n if (!isNaN(parseFloat(this.position.X)) && !isNaN(parseFloat(this.position.Y))) {\n this.setPopupPosition();\n }\n else if ((!isNaN(parseFloat(this.position.X)) && isNaN(parseFloat(this.position.Y)))\n || (isNaN(parseFloat(this.position.X)) && !isNaN(parseFloat(this.position.Y)))) {\n this.setPopupPosition();\n }\n else {\n this.element.style.top = '0px';\n this.element.style.left = '0px';\n this.dlgContainer.classList.add('e-dlg-' + this.position.X + '-' + this.position.Y);\n }\n }\n else {\n this.setPopupPosition();\n }\n };\n Dialog.prototype.setPopupPosition = function () {\n this.popupObj.setProperties({\n position: {\n X: this.position.X, Y: this.position.Y\n }\n });\n };\n Dialog.prototype.setAllowDragging = function () {\n var _this = this;\n var handleContent = '.' + DLG_HEADER_CONTENT;\n if (!this.element.classList.contains(DLG_DRAG)) {\n this.dragObj = new Draggable(this.element, {\n clone: false,\n isDragScroll: true,\n abort: '.e-dlg-closeicon-btn',\n handle: handleContent,\n dragStart: function (event) {\n _this.trigger('dragStart', event, function (dragEventArgs) {\n if (isBlazor()) {\n dragEventArgs.bindEvents(event.dragElement);\n }\n });\n },\n dragStop: function (event) {\n if (_this.isModal) {\n if (!isNullOrUndefined(_this.position)) {\n _this.dlgContainer.classList.remove('e-dlg-' + _this.position.X + '-' + _this.position.Y);\n }\n // Reset the dialog position after drag completion.\n _this.element.style.position = 'relative';\n }\n _this.trigger('dragStop', event);\n _this.element.classList.remove(DLG_RESTRICT_LEFT_VALUE);\n },\n drag: function (event) {\n _this.trigger('drag', event);\n }\n });\n if (!isNullOrUndefined(this.targetEle)) {\n this.dragObj.dragArea = this.targetEle;\n }\n }\n };\n Dialog.prototype.setButton = function () {\n if (!this.isBlazorServerRender()) {\n this.buttonContent = [];\n this.btnObj = [];\n // eslint-disable-next-line\n var primaryBtnFlag = true;\n for (var i = 0; i < this.buttons.length; i++) {\n var buttonType = !isNullOrUndefined(this.buttons[i].type) ? this.buttons[i].type.toLowerCase() : 'button';\n var btn = this.createElement('button', { className: this.cssClass, attrs: { type: buttonType } });\n this.buttonContent.push(btn.outerHTML);\n }\n this.setFooterTemplate();\n }\n var footerBtn;\n for (var i = 0, childNodes = this.element.children; i < childNodes.length; i++) {\n if (childNodes[i].classList.contains(DLG_FOOTER_CONTENT)) {\n footerBtn = childNodes[i].querySelectorAll('button');\n }\n }\n for (var i = 0; i < this.buttons.length; i++) {\n if (!this.isBlazorServerRender()) {\n this.btnObj[i] = new Button(this.buttons[i].buttonModel);\n }\n if (this.isBlazorServerRender()) {\n this.ftrTemplateContent = this.element.querySelector('.' + DLG_FOOTER_CONTENT);\n }\n if (!isNullOrUndefined(this.ftrTemplateContent) && footerBtn.length > 0) {\n if (typeof (this.buttons[i].click) === 'function') {\n EventHandler.add(footerBtn[i], 'click', this.buttons[i].click, this);\n }\n if (typeof (this.buttons[i].click) === 'object') {\n EventHandler.add(footerBtn[i], 'click', this.buttonClickHandler.bind(this, i), this);\n }\n }\n if (!this.isBlazorServerRender() && !isNullOrUndefined(this.ftrTemplateContent)) {\n this.btnObj[i].appendTo(this.ftrTemplateContent.children[i]);\n if (this.buttons[i].isFlat) {\n this.btnObj[i].element.classList.add('e-flat');\n }\n this.primaryButtonEle = this.element.getElementsByClassName('e-primary')[0];\n }\n }\n };\n Dialog.prototype.buttonClickHandler = function (index) {\n this.trigger('buttons[' + index + '].click', {});\n };\n Dialog.prototype.setContent = function () {\n this.contentEle = this.createElement('div', { className: DLG_CONTENT, id: this.element.id + '_dialog-content' });\n if (this.innerContentElement) {\n this.contentEle.appendChild(this.innerContentElement);\n }\n else if (!isNullOrUndefined(this.content) && this.content !== '' || !this.initialRender) {\n // eslint-disable-next-line\n var blazorContain = Object.keys(window);\n if (typeof (this.content) === 'string' && !isBlazor()) {\n this.setTemplate(this.content, this.contentEle, 'content');\n }\n else if (this.content instanceof HTMLElement) {\n this.contentEle.appendChild(this.content);\n }\n else {\n this.setTemplate(this.content, this.contentEle, 'content');\n }\n }\n if (!isNullOrUndefined(this.headerContent)) {\n this.element.insertBefore(this.contentEle, this.element.children[1]);\n }\n else {\n this.element.insertBefore(this.contentEle, this.element.children[0]);\n }\n if (this.height === 'auto') {\n if (!this.isBlazorServerRender() && Browser.isIE && this.element.style.width === '' && !isNullOrUndefined(this.width)) {\n this.element.style.width = formatUnit(this.width);\n }\n this.setMaxHeight();\n }\n };\n Dialog.prototype.setTemplate = function (template, toElement, prop) {\n var templateFn;\n var templateProps;\n // eslint-disable-next-line\n var blazorContain = Object.keys(window);\n if (toElement.classList.contains(DLG_HEADER)) {\n templateProps = this.element.id + 'header';\n }\n else if (toElement.classList.contains(DLG_FOOTER_CONTENT)) {\n templateProps = this.element.id + 'footerTemplate';\n }\n else {\n templateProps = this.element.id + 'content';\n }\n var templateValue;\n if (!isNullOrUndefined(template.outerHTML)) {\n toElement.appendChild(template);\n }\n else if ((typeof template === 'string') || (typeof template !== 'string') || (isBlazor() && !this.isStringTemplate)) {\n if ((typeof template === 'string')) {\n template = this.sanitizeHelper(template);\n }\n if (this.isVue || typeof template !== 'string') {\n templateFn = compile(template);\n templateValue = template;\n }\n else {\n toElement.innerHTML = template;\n }\n }\n var fromElements = [];\n if (!isNullOrUndefined(templateFn)) {\n var isString = (isBlazor() &&\n !this.isStringTemplate && (templateValue).indexOf('Blazor') === 0) ?\n this.isStringTemplate : true;\n for (var _i = 0, _a = templateFn({}, this, prop, templateProps, isString); _i < _a.length; _i++) {\n var item = _a[_i];\n fromElements.push(item);\n }\n append([].slice.call(fromElements), toElement);\n }\n };\n /*\n * @returns {void}\n * @hidden\n * @value\n */\n Dialog.prototype.sanitizeHelper = function (value) {\n if (this.enableHtmlSanitizer) {\n var dialogItem = SanitizeHtmlHelper.beforeSanitize();\n var beforeEvent = {\n cancel: false,\n helper: null\n };\n extend(dialogItem, dialogItem, beforeEvent);\n this.trigger('beforeSanitizeHtml', dialogItem);\n if (dialogItem.cancel && !isNullOrUndefined(dialogItem.helper)) {\n value = dialogItem.helper(value);\n }\n else if (!dialogItem.cancel) {\n value = SanitizeHtmlHelper.serializeValue(dialogItem, value);\n }\n }\n return value;\n };\n Dialog.prototype.setMaxHeight = function () {\n if (!this.allowMaxHeight) {\n return;\n }\n var display = this.element.style.display;\n this.element.style.display = 'none';\n this.element.style.maxHeight = (!isNullOrUndefined(this.target)) && (this.targetEle.offsetHeight < window.innerHeight) ?\n (this.targetEle.offsetHeight - 20) + 'px' : (window.innerHeight - 20) + 'px';\n this.element.style.display = display;\n if (Browser.isIE && this.height === 'auto' && !isNullOrUndefined(this.contentEle)\n && this.element.offsetHeight < this.contentEle.offsetHeight) {\n this.element.style.height = 'inherit';\n }\n };\n Dialog.prototype.setEnableRTL = function () {\n if (!this.isBlazorServerRender()) {\n // eslint-disable-next-line\n this.enableRtl ? addClass([this.element], RTL) : removeClass([this.element], RTL);\n }\n if (!isNullOrUndefined(this.element.querySelector('.e-resize-handle'))) {\n removeResize();\n this.setResize();\n }\n };\n Dialog.prototype.setTargetContent = function () {\n var _this = this;\n if (isNullOrUndefined(this.content) || this.content === '') {\n var isContent = this.element.innerHTML.replace(/\\s|<(\\/?|\\/?)(!--!--)>/g, '') !== '';\n if (this.element.children.length > 0 || isContent) {\n this.innerContentElement = document.createDocumentFragment();\n [].slice.call(this.element.childNodes).forEach(function (el) {\n if (el.nodeType !== 8) {\n _this.innerContentElement.appendChild(el);\n }\n });\n }\n }\n };\n Dialog.prototype.setHeader = function () {\n if (this.headerEle) {\n this.headerEle.innerHTML = '';\n }\n else {\n this.headerEle = this.createElement('div', { id: this.element.id + '_title', className: DLG_HEADER });\n }\n this.createHeaderContent();\n this.headerContent.appendChild(this.headerEle);\n this.setTemplate(this.header, this.headerEle, 'header');\n attributes(this.element, { 'aria-labelledby': this.element.id });\n this.element.insertBefore(this.headerContent, this.element.children[0]);\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n };\n Dialog.prototype.setFooterTemplate = function () {\n if (this.ftrTemplateContent) {\n this.ftrTemplateContent.innerHTML = '';\n }\n else {\n this.ftrTemplateContent = this.createElement('div', {\n className: DLG_FOOTER_CONTENT\n });\n }\n if (this.footerTemplate !== '' && !isNullOrUndefined(this.footerTemplate)) {\n this.setTemplate(this.footerTemplate, this.ftrTemplateContent, 'footerTemplate');\n }\n else {\n this.ftrTemplateContent.innerHTML = this.buttonContent.join('');\n }\n this.element.appendChild(this.ftrTemplateContent);\n };\n Dialog.prototype.createHeaderContent = function () {\n if (isNullOrUndefined(this.headerContent)) {\n this.headerContent = this.createElement('div', { id: this.element.id + '_dialog-header', className: DLG_HEADER_CONTENT });\n }\n };\n Dialog.prototype.renderCloseIcon = function () {\n if (this.showCloseIcon) {\n this.closeIcon = this.createElement('button', { className: DLG_CLOSE_ICON_BTN, attrs: { type: 'button' } });\n this.closeIconBtnObj = new Button({ cssClass: 'e-flat', iconCss: DLG_CLOSE_ICON + ' ' + ICON });\n this.closeIconTitle();\n if (!isNullOrUndefined(this.headerContent)) {\n prepend([this.closeIcon], this.headerContent);\n }\n else {\n this.createHeaderContent();\n prepend([this.closeIcon], this.headerContent);\n this.element.insertBefore(this.headerContent, this.element.children[0]);\n }\n this.closeIconBtnObj.appendTo(this.closeIcon);\n }\n };\n Dialog.prototype.closeIconTitle = function () {\n this.l10n.setLocale(this.locale);\n var closeIconTitle = this.l10n.getConstant('close');\n this.closeIcon.setAttribute('title', closeIconTitle);\n this.closeIcon.setAttribute('aria-label', closeIconTitle);\n };\n Dialog.prototype.setCSSClass = function (oldCSSClass) {\n if (oldCSSClass) {\n removeClass([this.element], oldCSSClass.split(' '));\n if (this.isModal && !isNullOrUndefined(this.dlgContainer)) {\n removeClass([this.dlgContainer], oldCSSClass.split(' '));\n }\n }\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n if (this.isModal && !isNullOrUndefined(this.dlgContainer)) {\n addClass([this.dlgContainer], this.cssClass.split(' '));\n }\n }\n };\n Dialog.prototype.setIsModal = function () {\n this.dlgContainer = this.createElement('div', { className: DLG_CONTAINER });\n this.setCSSClass();\n this.element.classList.remove(DLG_SHOW);\n this.element.parentNode.insertBefore(this.dlgContainer, this.element);\n this.dlgContainer.appendChild(this.element);\n addClass([this.element], MODAL_DLG);\n this.dlgOverlay = this.createElement('div', { className: DLG_OVERLAY });\n this.dlgOverlay.style.zIndex = (this.zIndex - 1).toString();\n this.dlgContainer.appendChild(this.dlgOverlay);\n };\n Dialog.prototype.getValidFocusNode = function (items) {\n var node;\n for (var u = 0; u < items.length; u++) {\n node = items[u];\n if ((node.clientHeight > 0 || (node.tagName.toLowerCase() === 'a' && node.hasAttribute('href'))) && node.tabIndex > -1 &&\n !node.disabled && !this.disableElement(node, '[disabled],[aria-disabled=\"true\"],[type=\"hidden\"]')) {\n return node;\n }\n else {\n node = null;\n }\n }\n return node;\n };\n Dialog.prototype.focusableElements = function (content) {\n if (!isNullOrUndefined(content)) {\n var value = 'input,select,textarea,button,a,[contenteditable=\"true\"],[tabindex]';\n var items = content.querySelectorAll(value);\n return this.getValidFocusNode(items);\n }\n return null;\n };\n Dialog.prototype.getAutoFocusNode = function (container) {\n var node = container.querySelector('.' + DLG_CLOSE_ICON_BTN);\n var value = '[autofocus]';\n var items = container.querySelectorAll(value);\n var validNode = this.getValidFocusNode(items);\n if (isBlazor()) {\n this.primaryButtonEle = this.element.getElementsByClassName('e-primary')[0];\n }\n if (!isNullOrUndefined(validNode)) {\n node = validNode;\n }\n else {\n validNode = this.focusableElements(this.contentEle);\n if (!isNullOrUndefined(validNode)) {\n return node = validNode;\n }\n else if (!isNullOrUndefined(this.primaryButtonEle)) {\n return this.element.querySelector('.' + DLG_PRIMARY_BUTTON);\n }\n }\n return node;\n };\n Dialog.prototype.disableElement = function (element, t) {\n var elementMatch = element ? element.matches || element.webkitMatchesSelector || element.msGetRegionContent : null;\n if (elementMatch) {\n for (; element; element = element.parentNode) {\n if (element instanceof Element && elementMatch.call(element, t)) {\n /* istanbul ignore next */\n return element;\n }\n }\n }\n return null;\n };\n Dialog.prototype.focusContent = function () {\n var element = this.getAutoFocusNode(this.element);\n var node = !isNullOrUndefined(element) ? element : this.element;\n var userAgent = Browser.userAgent;\n if (userAgent.indexOf('MSIE ') > 0 || userAgent.indexOf('Trident/') > 0) {\n this.element.focus();\n }\n node.focus();\n this.unBindEvent(this.element);\n this.bindEvent(this.element);\n };\n Dialog.prototype.bindEvent = function (element) {\n EventHandler.add(element, 'keydown', this.keyDown, this);\n };\n Dialog.prototype.unBindEvent = function (element) {\n EventHandler.remove(element, 'keydown', this.keyDown);\n };\n Dialog.prototype.updateSanitizeContent = function () {\n if (!this.isBlazorServerRender()) {\n this.contentEle.innerHTML = this.sanitizeHelper(this.content);\n }\n };\n Dialog.prototype.isBlazorServerRender = function () {\n return isBlazor() && this.isServerRendered;\n };\n /**\n * Module required function\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.getModuleName = function () {\n return 'dialog';\n };\n /**\n * Called internally if any of the property value changed\n *\n * @param {DialogModel} newProp - specifies the new property\n * @param {DialogModel} oldProp - specifies the old property\n * @private\n * @returns {void}\n */\n Dialog.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'content':\n if (!isNullOrUndefined(this.content) && this.content !== '') {\n if (this.isBlazorServerRender()) {\n this.contentEle = this.element.querySelector('.e-dlg-content');\n }\n if (!isNullOrUndefined(this.contentEle) && this.contentEle.getAttribute('role') !== 'dialog') {\n if (!this.isBlazorServerRender()) {\n this.contentEle.innerHTML = '';\n }\n if (typeof (this.content) === 'function') {\n this.clearTemplate(['content']);\n detach(this.contentEle);\n this.contentEle = null;\n this.setContent();\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n typeof (this.content) === 'string' ? (this.isBlazorServerRender() && (this.contentEle.innerText === '')) ?\n this.contentEle.insertAdjacentHTML('beforeend', this.sanitizeHelper(this.content)) :\n this.updateSanitizeContent() : this.contentEle.appendChild(this.content);\n }\n this.setMaxHeight();\n }\n else {\n if (!this.isBlazorServerRender() ||\n isNullOrUndefined(this.element.querySelector('.e-dlg-content'))) {\n this.setContent();\n }\n }\n }\n else if (!isNullOrUndefined(this.contentEle)) {\n detach(this.contentEle);\n this.contentEle = null;\n }\n break;\n case 'header':\n if (this.header === '' || isNullOrUndefined(this.header)) {\n if (this.headerEle) {\n detach(this.headerEle);\n this.headerEle = null;\n }\n }\n else {\n if (!this.isBlazorServerRender() ||\n isNullOrUndefined(this.element.querySelector('.e-dlg-header-content'))) {\n this.setHeader();\n }\n }\n break;\n case 'footerTemplate':\n if (this.footerTemplate === '' || isNullOrUndefined(this.footerTemplate)) {\n if (!this.ftrTemplateContent) {\n return;\n }\n detach(this.ftrTemplateContent);\n this.ftrTemplateContent = null;\n this.buttons = [{}];\n }\n else {\n if (!this.isBlazorServerRender() ||\n isNullOrUndefined(this.element.querySelector('.e-footer-content'))) {\n this.setFooterTemplate();\n }\n this.buttons = [{}];\n }\n break;\n case 'showCloseIcon':\n if (this.element.getElementsByClassName(DLG_CLOSE_ICON).length > 0) {\n if (!this.showCloseIcon && (this.header === '' || isNullOrUndefined(this.header))) {\n detach(this.headerContent);\n this.headerContent = null;\n }\n else if (!this.showCloseIcon) {\n detach(this.closeIcon);\n }\n else {\n if (this.isBlazorServerRender()) {\n this.wireEvents();\n }\n }\n }\n else {\n if (!this.isBlazorServerRender()) {\n this.renderCloseIcon();\n }\n this.wireEvents();\n }\n break;\n case 'locale':\n if (this.showCloseIcon) {\n this.closeIconTitle();\n }\n break;\n case 'visible':\n // eslint-disable-next-line\n this.visible ? this.show() : this.hide();\n break;\n case 'isModal':\n this.updateIsModal();\n break;\n case 'height':\n setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'width':\n setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });\n break;\n case 'zIndex':\n this.popupObj.zIndex = this.zIndex;\n if (this.isModal) {\n this.setOverlayZindex(this.zIndex);\n }\n if (this.element.style.zIndex !== this.zIndex.toString()) {\n this.calculatezIndex = false;\n }\n break;\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n case 'buttons': {\n var buttonCount = this.buttons.length;\n if (!isNullOrUndefined(this.ftrTemplateContent) && !this.isBlazorServerRender()) {\n detach(this.ftrTemplateContent);\n this.ftrTemplateContent = null;\n }\n for (var i = 0; i < buttonCount; i++) {\n if (!isNullOrUndefined(this.buttons[i].buttonModel)) {\n this.footerTemplate = '';\n this.setButton();\n }\n }\n break;\n }\n case 'allowDragging':\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n else {\n this.dragObj.destroy();\n }\n break;\n case 'target':\n this.setTarget(newProp.target);\n break;\n case 'position':\n this.checkPositionData();\n if (this.isModal) {\n var positionX = isNullOrUndefined(oldProp.position.X) ? this.position.X : oldProp.position.X;\n var positionY = isNullOrUndefined(oldProp.position.Y) ? this.position.Y : oldProp.position.Y;\n if (this.dlgContainer.classList.contains('e-dlg-' + positionX + '-' + positionY)) {\n this.dlgContainer.classList.remove('e-dlg-' + positionX + '-' + positionY);\n }\n }\n this.positionChange();\n break;\n case 'enableRtl':\n this.setEnableRTL();\n break;\n case 'enableResize':\n this.setResize();\n break;\n case 'minHeight':\n if (this.minHeight !== '') {\n this.element.style.minHeight = formatUnit(this.minHeight);\n }\n break;\n }\n }\n };\n Dialog.prototype.setTarget = function (target) {\n this.popupObj.relateTo = target;\n this.target = target;\n this.targetEle = ((typeof this.target) === 'string') ?\n document.querySelector(this.target) : this.target;\n if (this.dragObj) {\n this.dragObj.dragArea = this.targetEle;\n }\n this.setMaxHeight();\n if (this.isModal) {\n this.updateIsModal();\n }\n if (this.enableResize) {\n this.setResize();\n }\n };\n Dialog.prototype.updateIsModal = function () {\n this.element.setAttribute('aria-modal', this.isModal ? 'true' : 'false');\n if (this.isModal) {\n if (isNullOrUndefined(this.dlgOverlay)) {\n this.setIsModal();\n this.element.style.top = '0px';\n this.element.style.left = '0px';\n if (!isNullOrUndefined(this.targetEle)) {\n this.targetEle.appendChild(this.dlgContainer);\n }\n }\n }\n else {\n removeClass([this.element], MODAL_DLG);\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n detach(this.dlgOverlay);\n while (this.dlgContainer.firstChild) {\n this.dlgContainer.parentElement.insertBefore(this.dlgContainer.firstChild, this.dlgContainer);\n }\n this.dlgContainer.parentElement.removeChild(this.dlgContainer);\n }\n if (this.visible) {\n this.show();\n }\n this.positionChange();\n if (this.isModal && this.dlgOverlay) {\n EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);\n }\n };\n Dialog.prototype.setzIndex = function (zIndexElement, setPopupZindex) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n var currentzIndex = getZindexPartial(zIndexElement);\n this.zIndex = currentzIndex > this.zIndex ? currentzIndex : this.zIndex;\n this.isProtectedOnChange = prevOnChange;\n if (setPopupZindex) {\n this.popupObj.zIndex = this.zIndex;\n }\n };\n Dialog.prototype.windowResizeHandler = function () {\n setMaxWidth(this.targetEle.clientWidth);\n setMaxHeight(this.targetEle.clientHeight);\n this.setMaxHeight();\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * To destroy the widget\n *\n * @returns {void}\n */\n Dialog.prototype.destroy = function () {\n if (this.isDestroyed) {\n return;\n }\n var classArray = [RTL, MODAL_DLG, DLG_RESIZABLE, DLG_RESTRICT_LEFT_VALUE, FULLSCREEN, DEVICE];\n var attrs = ['role', 'aria-modal', 'aria-labelledby', 'aria-describedby', 'aria-grabbed', 'tabindex', 'style'];\n removeClass([this.targetEle], [DLG_TARGET, SCROLL_DISABLED]);\n if (!isNullOrUndefined(this.element) && this.element.classList.contains(FULLSCREEN)) {\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n if (this.isModal) {\n removeClass([(!isNullOrUndefined(this.targetEle) ? this.targetEle : document.body)], SCROLL_DISABLED);\n }\n this.unWireEvents();\n if (!isNullOrUndefined(this.btnObj)) {\n for (var i = 0; i < this.btnObj.length; i++) {\n this.btnObj[i].destroy();\n }\n }\n if (!isNullOrUndefined(this.closeIconBtnObj)) {\n this.closeIconBtnObj.destroy();\n }\n if (!isNullOrUndefined(this.dragObj)) {\n this.dragObj.destroy();\n }\n if (!isNullOrUndefined(this.popupObj.element) && this.popupObj.element.classList.contains(POPUP_ROOT)) {\n this.popupObj.destroy();\n }\n removeClass([this.element], classArray);\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n removeClass([this.element], this.cssClass.split(' '));\n }\n if (!isNullOrUndefined(this.refElement) && !isNullOrUndefined(this.refElement.parentElement)) {\n this.refElement.parentElement.insertBefore((this.isModal ? this.dlgContainer : this.element), this.refElement);\n detach(this.refElement);\n this.refElement = undefined;\n }\n if (this.isModal && !this.isBlazorServerRender()) {\n detach(this.dlgOverlay);\n this.dlgContainer.parentNode.insertBefore(this.element, this.dlgContainer);\n detach(this.dlgContainer);\n }\n if (!this.isBlazorServerRender()) {\n this.element.innerHTML = this.clonedEle.innerHTML;\n }\n if (this.isBlazorServerRender()) {\n if (!isNullOrUndefined(this.element.children)) {\n for (var i = 0; i <= this.element.children.length; i++) {\n i = i - i;\n detach(this.element.children[i]);\n }\n }\n }\n for (var i = 0; i < attrs.length; i++) {\n this.element.removeAttribute(attrs[i]);\n }\n if (!this.isBlazorServerRender()) {\n _super.prototype.destroy.call(this);\n }\n else {\n this.isDestroyed = true;\n }\n // eslint-disable-next-line\n if (this.isReact) {\n this.clearTemplate();\n }\n };\n Dialog.prototype.wireWindowResizeEvent = function () {\n window.addEventListener('resize', this.windowResizeHandler.bind(this));\n };\n Dialog.prototype.unWireWindowResizeEvent = function () {\n window.removeEventListener('resize', this.windowResizeHandler.bind(this));\n };\n /**\n * Binding event to the element while widget creation\n *\n * @returns {void}\n * @hidden\n */\n Dialog.prototype.wireEvents = function () {\n if (this.isBlazorServerRender() && this.showCloseIcon) {\n this.closeIcon = this.element.getElementsByClassName('e-dlg-closeicon-btn')[0];\n }\n if (this.showCloseIcon) {\n EventHandler.add(this.closeIcon, 'click', this.closeIconClickEventHandler, this);\n }\n if (this.isModal && this.dlgOverlay) {\n EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);\n }\n };\n /**\n * Unbinding event to the element while widget destroy\n *\n * @returns {void}\n * @hidden\n */\n Dialog.prototype.unWireEvents = function () {\n if (this.showCloseIcon) {\n EventHandler.remove(this.closeIcon, 'click', this.closeIconClickEventHandler);\n }\n if (this.isModal) {\n EventHandler.remove(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler);\n }\n if (this.buttons.length > 0 && !isNullOrUndefined(this.buttons[0].buttonModel) && this.footerTemplate === '') {\n for (var i = 0; i < this.buttons.length; i++) {\n if (typeof (this.buttons[i].click) === 'function') {\n EventHandler.remove(this.ftrTemplateContent.children[i], 'click', this.buttons[i].click);\n }\n }\n }\n };\n /**\n * Refreshes the dialog's position when the user changes its header and footer height/width dynamically.\n *\n * @returns {void}\n */\n Dialog.prototype.refreshPosition = function () {\n this.popupObj.refreshPosition();\n };\n /**\n * Returns the current width and height of the Dialog\n *\n * @returns {DialogDimension}- returns the dialog element Dimension.\n * @public\n */\n Dialog.prototype.getDimension = function () {\n var dialogWidth = this.element.offsetWidth;\n var dialogHeight = this.element.offsetHeight;\n return { width: dialogWidth, height: dialogHeight };\n };\n /**\n * Opens the dialog if it is in hidden state.\n * To open the dialog with full screen width, set the parameter to true.\n *\n * @param { boolean } isFullScreen - Enable the fullScreen Dialog.\n * @returns {void}\n */\n Dialog.prototype.show = function (isFullScreen) {\n var _this = this;\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n if (!this.element.classList.contains(DLG_SHOW) || (!isNullOrUndefined(isFullScreen))) {\n if (!isNullOrUndefined(isFullScreen)) {\n this.fullScreen(isFullScreen);\n }\n var eventArgs_1 = isBlazor() ? {\n cancel: false,\n element: this.element,\n container: this.isModal ? this.dlgContainer : this.element,\n maxHeight: this.element.style.maxHeight\n } : {\n cancel: false,\n element: this.element,\n container: this.isModal ? this.dlgContainer : this.element,\n target: this.target,\n maxHeight: this.element.style.maxHeight\n };\n this.trigger('beforeOpen', eventArgs_1, function (beforeOpenArgs) {\n if (!beforeOpenArgs.cancel) {\n if (_this.element.style.maxHeight !== eventArgs_1.maxHeight) {\n _this.allowMaxHeight = false;\n _this.element.style.maxHeight = eventArgs_1.maxHeight;\n }\n _this.storeActiveElement = document.activeElement;\n _this.element.tabIndex = -1;\n if (_this.isModal && (!isNullOrUndefined(_this.dlgOverlay))) {\n _this.dlgOverlay.style.display = 'block';\n _this.dlgContainer.style.display = 'flex';\n removeClass([_this.dlgOverlay], 'e-fade');\n if (!isNullOrUndefined(_this.targetEle)) {\n if (_this.targetEle === document.body) {\n _this.dlgContainer.style.position = 'fixed';\n }\n else {\n _this.dlgContainer.style.position = 'absolute';\n }\n _this.dlgOverlay.style.position = 'absolute';\n _this.element.style.position = 'relative';\n addClass([_this.targetEle], [DLG_TARGET, SCROLL_DISABLED]);\n }\n else {\n addClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n }\n var openAnimation = {\n name: _this.animationSettings.effect + 'In',\n duration: _this.animationSettings.duration,\n delay: _this.animationSettings.delay\n };\n var zIndexElement = (_this.isModal) ? _this.element.parentElement : _this.element;\n if (_this.calculatezIndex) {\n _this.setzIndex(zIndexElement, true);\n setStyleAttribute(_this.element, { 'zIndex': _this.zIndex });\n if (_this.isModal) {\n _this.setOverlayZindex(_this.zIndex);\n }\n }\n // eslint-disable-next-line\n _this.animationSettings.effect === 'None' ? _this.popupObj.show() : _this.popupObj.show(openAnimation);\n _this.dialogOpen = true;\n var prevOnChange = _this.isProtectedOnChange;\n _this.isProtectedOnChange = true;\n _this.visible = true;\n _this.preventVisibility = true;\n _this.isProtectedOnChange = prevOnChange;\n }\n });\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * Closes the dialog if it is in visible state.\n *\n * @param { Event } event - specifies the event\n * @returns {void}\n */\n Dialog.prototype.hide = function (event) {\n var _this = this;\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n if (this.preventVisibility) {\n var eventArgs = isBlazor() ? {\n cancel: false,\n isInteracted: event ? true : false,\n element: this.element,\n container: this.isModal ? this.dlgContainer : this.element,\n event: event\n } : {\n cancel: false,\n isInteracted: event ? true : false,\n element: this.element,\n target: this.target,\n container: this.isModal ? this.dlgContainer : this.element,\n event: event,\n closedBy: this.dlgClosedBy\n };\n this.closeArgs = eventArgs;\n this.trigger('beforeClose', eventArgs, function (beforeCloseArgs) {\n if (!beforeCloseArgs.cancel) {\n if (_this.isModal) {\n if (!isNullOrUndefined(_this.targetEle)) {\n removeClass([_this.targetEle], [DLG_TARGET, SCROLL_DISABLED]);\n }\n }\n if (document.body.classList.contains(DLG_TARGET) &&\n document.body.classList.contains(SCROLL_DISABLED)) {\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n var closeAnimation = {\n name: _this.animationSettings.effect + 'Out',\n duration: _this.animationSettings.duration,\n delay: _this.animationSettings.delay\n };\n // eslint-disable-next-line\n _this.animationSettings.effect === 'None' ? _this.popupObj.hide() : _this.popupObj.hide(closeAnimation);\n _this.dialogOpen = false;\n var prevOnChange = _this.isProtectedOnChange;\n _this.isProtectedOnChange = true;\n _this.visible = false;\n _this.preventVisibility = false;\n _this.isProtectedOnChange = prevOnChange;\n }\n _this.dlgClosedBy = DLG_USER_ACTION_CLOSED;\n });\n }\n };\n // eslint-disable-next-line\n /**\n * Specifies to view the Full screen Dialog.\n *\n * @returns {void}\n * @private\n */\n Dialog.prototype.fullScreen = function (args) {\n /* eslint-disable */\n var top = this.element.offsetTop;\n var left = this.element.offsetLeft;\n /* eslint-enable */\n if (args) {\n this.element.style.top = document.scrollingElement.scrollTop + 'px';\n addClass([this.element], FULLSCREEN);\n var display = this.element.style.display;\n this.element.style.display = 'none';\n this.element.style.maxHeight = (!isNullOrUndefined(this.target)) ?\n (this.targetEle.offsetHeight) + 'px' : (window.innerHeight) + 'px';\n this.element.style.display = display;\n addClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n if (this.allowDragging && !isNullOrUndefined(this.dragObj)) {\n this.dragObj.destroy();\n }\n }\n else {\n removeClass([this.element], FULLSCREEN);\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n }\n return args;\n };\n /**\n * Returns the dialog button instances.\n * Based on that, you can dynamically change the button states.\n *\n * @param { number } index - Index of the button.\n * @returns {Button} - returns the button element\n */\n Dialog.prototype.getButtons = function (index) {\n if (!isNullOrUndefined(index)) {\n return this.btnObj[index];\n }\n return this.btnObj;\n };\n __decorate([\n Property('')\n ], Dialog.prototype, \"content\", void 0);\n __decorate([\n Property(true)\n ], Dialog.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"showCloseIcon\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"isModal\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"header\", void 0);\n __decorate([\n Property(true)\n ], Dialog.prototype, \"visible\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"enableResize\", void 0);\n __decorate([\n Property(['South-East'])\n ], Dialog.prototype, \"resizeHandles\", void 0);\n __decorate([\n Property('auto')\n ], Dialog.prototype, \"height\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"minHeight\", void 0);\n __decorate([\n Property('100%')\n ], Dialog.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"cssClass\", void 0);\n __decorate([\n Property(1000)\n ], Dialog.prototype, \"zIndex\", void 0);\n __decorate([\n Property(null)\n ], Dialog.prototype, \"target\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"allowDragging\", void 0);\n __decorate([\n Collection([{}], ButtonProps)\n ], Dialog.prototype, \"buttons\", void 0);\n __decorate([\n Property(true)\n ], Dialog.prototype, \"closeOnEscape\", void 0);\n __decorate([\n Complex({}, AnimationSettings)\n ], Dialog.prototype, \"animationSettings\", void 0);\n __decorate([\n Complex({ X: 'center', Y: 'center' }, PositionData)\n ], Dialog.prototype, \"position\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"beforeSanitizeHtml\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"dragStart\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"dragStop\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"drag\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"overlayClick\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"resizeStart\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"resizing\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"resizeStop\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"destroyed\", void 0);\n Dialog = __decorate([\n NotifyPropertyChanges\n ], Dialog);\n return Dialog;\n}(Component));\nexport { Dialog };\n/**\n * Base for creating Alert and Confirmation Dialog through util method.\n */\n// eslint-disable-next-line\nexport var DialogUtility;\n(function (DialogUtility) {\n /**\n * An alert dialog box is used to display warning like messages to the users.\n * ```\n * Eg : DialogUtility.alert('Alert message');\n *\n * ```\n */\n /* istanbul ignore next */\n /**\n *\n * @param {AlertDialogArgs} args - specifies the string\n * @returns {Dialog} - returns the dialog element.\n */\n function alert(args) {\n // eslint-disable-next-line\n var dialogComponent;\n var dialogElement = createElement('div', { 'className': DLG_UTIL_ALERT });\n document.body.appendChild(dialogElement);\n var alertDialogObj;\n var okButtonModel = [{\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n }];\n if (typeof (args) === 'string') {\n alertDialogObj = createDialog({ content: args,\n position: { X: 'center', Y: 'top' },\n isModal: true, header: DLG_UTIL_DEFAULT_TITLE,\n buttons: okButtonModel }, dialogElement);\n }\n else {\n alertDialogObj = createDialog(alertOptions(args), dialogElement);\n }\n alertDialogObj.close = function () {\n if (args && args.close) {\n args.close.apply(alertDialogObj);\n }\n alertDialogObj.destroy();\n if (alertDialogObj.element.classList.contains('e-dlg-modal')) {\n alertDialogObj.element.parentElement.remove();\n alertDialogObj.target.classList.remove(DLG_UTIL_ROOT);\n }\n else {\n alertDialogObj.element.remove();\n }\n };\n return alertDialogObj;\n }\n DialogUtility.alert = alert;\n /**\n * A confirm dialog displays a specified message along with ‘OK’ and ‘Cancel’ button.\n * ```\n * Eg : DialogUtility.confirm('Confirm dialog message');\n *\n * ```\n */\n /* istanbul ignore next */\n /**\n *\n * @param {ConfirmDialogArgs} args - specifies the args\n * @returns {Dialog} - returns te element\n */\n function confirm(args) {\n // eslint-disable-next-line\n var dialogComponent;\n var dialogElement = createElement('div', { 'className': DLG_UTIL_CONFIRM });\n document.body.appendChild(dialogElement);\n var confirmDialogObj;\n var okCancelButtonModel = [{\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n }, {\n buttonModel: { content: 'Cancel' },\n click: function () {\n this.hide();\n }\n }];\n if (typeof (args) === 'string') {\n confirmDialogObj = createDialog({ position: { X: 'center', Y: 'top' }, content: args, isModal: true,\n header: DLG_UTIL_DEFAULT_TITLE, buttons: okCancelButtonModel\n }, dialogElement);\n }\n else {\n confirmDialogObj = createDialog(confirmOptions(args), dialogElement);\n }\n confirmDialogObj.close = function () {\n if (args && args.close) {\n args.close.apply(confirmDialogObj);\n }\n confirmDialogObj.destroy();\n if (confirmDialogObj.element.classList.contains('e-dlg-modal')) {\n confirmDialogObj.element.parentElement.remove();\n confirmDialogObj.target.classList.remove(DLG_UTIL_ROOT);\n }\n else {\n confirmDialogObj.element.remove();\n }\n };\n return confirmDialogObj;\n }\n DialogUtility.confirm = confirm;\n // eslint-disable-next-line\n function createDialog(options, element) {\n var dialogObject = new Dialog(options);\n dialogObject.appendTo(element);\n return dialogObject;\n }\n // eslint-disable-next-line\n function alertOptions(option) {\n var options = {};\n options.buttons = [];\n options = formOptions(options, option);\n options = setAlertButtonModel(options, option);\n return options;\n }\n // eslint-disable-next-line\n function confirmOptions(option) {\n var options = {};\n options.buttons = [];\n options = formOptions(options, option);\n options = setConfirmButtonModel(options, option);\n return options;\n }\n // eslint-disable-next-line\n function formOptions(options, option) {\n options.header = !isNullOrUndefined(option.title) ? option.title : DLG_UTIL_DEFAULT_TITLE;\n options.content = !isNullOrUndefined(option.content) ? option.content : '';\n options.isModal = !isNullOrUndefined(option.isModal) ? option.isModal : true;\n options.showCloseIcon = !isNullOrUndefined(option.showCloseIcon) ? option.showCloseIcon : false;\n options.allowDragging = !isNullOrUndefined(option.isDraggable) ? option.isDraggable : false;\n options.closeOnEscape = !isNullOrUndefined(option.closeOnEscape) ? option.closeOnEscape : false;\n options.position = !isNullOrUndefined(option.position) ? option.position : { X: 'center', Y: 'top' };\n options.animationSettings = !isNullOrUndefined(option.animationSettings) ? option.animationSettings :\n { effect: 'Fade', duration: 400, delay: 0 };\n options.cssClass = !isNullOrUndefined(option.cssClass) ? option.cssClass : '';\n options.zIndex = !isNullOrUndefined(option.zIndex) ? option.zIndex : 1000;\n // eslint-disable-next-line\n options.open = !isNullOrUndefined(option.open) ? option.open : null;\n options.width = !isNullOrUndefined(option.width) ? option.width : 'auto';\n options.height = !isNullOrUndefined(option.height) ? option.height : 'auto';\n return options;\n }\n // eslint-disable-next-line\n function setAlertButtonModel(options, option) {\n var alertButtonModel = [{\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n }];\n if (!isNullOrUndefined(option.okButton)) {\n options.buttons[0] = formButtonModel(options.buttons[0], option.okButton, alertButtonModel[0]);\n }\n else {\n options.buttons = alertButtonModel;\n }\n return options;\n }\n // eslint-disable-next-line\n function setConfirmButtonModel(options, option) {\n var okButtonModel = {\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n };\n var cancelButtonModel = {\n buttonModel: { content: 'Cancel' },\n click: function () {\n this.hide();\n }\n };\n if (!isNullOrUndefined(option.okButton)) {\n options.buttons[0] = formButtonModel(options.buttons[0], option.okButton, okButtonModel);\n }\n else {\n options.buttons[0] = okButtonModel;\n }\n if (!isNullOrUndefined(option.cancelButton)) {\n options.buttons[1] = formButtonModel(options.buttons[1], option.cancelButton, cancelButtonModel);\n }\n else {\n options.buttons[1] = cancelButtonModel;\n }\n return options;\n }\n // eslint-disable-next-line\n function formButtonModel(buttonModel, option, buttonPropModel) {\n var buttonProps = buttonPropModel;\n if (!isNullOrUndefined(option.text)) {\n buttonProps.buttonModel.content = option.text;\n }\n if (!isNullOrUndefined(option.icon)) {\n buttonProps.buttonModel.iconCss = option.icon;\n }\n if (!isNullOrUndefined(option.cssClass)) {\n buttonProps.buttonModel.cssClass = option.cssClass;\n }\n if (!isNullOrUndefined(option.click)) {\n buttonProps.click = option.click;\n }\n return buttonProps;\n }\n})(DialogUtility || (DialogUtility = {}));\n","import { Dialog } from '@syncfusion/ej2-popups';\nimport { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\n/**\n * Dialog Renderer\n */\nvar DialogRenderer = /** @class */ (function () {\n function DialogRenderer(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n DialogRenderer.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.moduleDestroy, this.moduleDestroy, this);\n this.parent.on(events.destroy, this.removeEventListener, this);\n };\n DialogRenderer.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.destroy, this.removeEventListener);\n this.parent.off(events.moduleDestroy, this.moduleDestroy);\n };\n /**\n * dialog render method\n *\n * @param {DialogModel} e - specifies the dialog model.\n * @returns {void}\n * @hidden\n\n */\n DialogRenderer.prototype.render = function (e) {\n var dlgObj;\n e.beforeOpen = this.beforeOpen.bind(this);\n e.open = this.open.bind(this);\n if (isNOU(e.close)) {\n e.close = this.close.bind(this);\n }\n e.beforeClose = this.beforeClose.bind(this);\n // eslint-disable-next-line\n dlgObj = new Dialog(e);\n dlgObj.isStringTemplate = true;\n return dlgObj;\n };\n DialogRenderer.prototype.beforeOpen = function (args) {\n this.parent.trigger(events.beforeDialogOpen, args, this.beforeOpenCallback.bind(this, args));\n };\n DialogRenderer.prototype.beforeOpenCallback = function (args) {\n if (args.cancel) {\n this.parent.notify(events.clearDialogObj, null);\n }\n };\n DialogRenderer.prototype.open = function (args) {\n this.parent.trigger(events.dialogOpen, args);\n };\n DialogRenderer.prototype.beforeClose = function (args) {\n this.parent.trigger(events.beforeDialogClose, args, function (closeArgs) {\n if (!closeArgs.cancel) {\n if (closeArgs.container.classList.contains('e-popup-close')) {\n closeArgs.cancel = true;\n }\n }\n });\n };\n /**\n * dialog close method\n *\n * @param {Object} args - specifies the arguments.\n * @returns {void}\n * @hidden\n\n */\n DialogRenderer.prototype.close = function (args) {\n this.parent.trigger(events.dialogClose, args);\n };\n DialogRenderer.prototype.moduleDestroy = function () {\n this.parent = null;\n };\n return DialogRenderer;\n}());\nexport { DialogRenderer };\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 __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Complex, Browser, addClass, select, detach } from '@syncfusion/ej2-base';\nimport { Property, NotifyPropertyChanges, formatUnit, L10n, closest } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, Event, removeClass, print as printWindow, attributes } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined as isNOU, compile, append, extend, debounce } from '@syncfusion/ej2-base';\nimport { Touch as EJ2Touch } from '@syncfusion/ej2-base';\nimport { getScrollableParent } from '@syncfusion/ej2-popups';\nimport * as events from '../base/constant';\nimport * as classes from '../base/classes';\nimport { Render } from '../renderer/render';\nimport { ViewSource } from '../renderer/view-source';\nimport { executeGroup } from './interface';\nimport { ServiceLocator } from '../services/service-locator';\nimport { RendererFactory } from '../services/renderer-factory';\nimport { RenderType, ToolbarType, DialogType } from './enum';\nimport { ExecCommandCallBack } from '../actions/execute-command-callback';\nimport { KeyboardEvents } from '../actions/keyboard';\nimport { ToolbarSettings, ImageSettings, AudioSettings, VideoSettings, QuickToolbarSettings, FontFamily, FontSize, Format, NumberFormatList, BulletFormatList } from '../models/toolbar-settings';\nimport { FileManagerSettings } from '../models/toolbar-settings';\nimport { TableSettings, PasteCleanupSettings } from '../models/toolbar-settings';\nimport { FontColor, BackgroundColor } from '../models/toolbar-settings';\nimport { IFrameSettings } from '../models/iframe-settings';\nimport { InlineMode } from '../models/inline-mode';\nimport { defaultLocale } from '../models/default-locale';\nimport { setAttributes } from '../actions/html-attributes';\nimport { FullScreen } from '../actions/full-screen';\nimport { EnterKeyAction } from '../actions/enter-key';\nimport * as CONSTANT from '../../common/constant';\nimport { dispatchEvent, getEditValue, isIDevice, decode, isEditableValueEmpty, getDefaultValue } from '../base/util';\nimport { DialogRenderer } from '../renderer/dialog-renderer';\n/**\n * Represents the Rich Text Editor component.\n * ```html\n *
\n * \n * ```\n */\nvar RichTextEditor = /** @class */ (function (_super) {\n __extends(RichTextEditor, _super);\n function RichTextEditor(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.needsID = true;\n return _this;\n }\n /**\n * To provide the array of modules needed for component rendering\n *\n * @returns {ModuleDeclaration[]} - specifies the declaration.\n * @hidden\n\n */\n RichTextEditor.prototype.requiredModules = function () {\n var modules = [];\n if (this.toolbarSettings.enable) {\n modules.push({ member: 'toolbar', args: [this, this.serviceLocator] });\n modules.push({\n member: 'link',\n args: [this, this.serviceLocator]\n });\n modules.push({\n member: 'table',\n args: [this, this.serviceLocator]\n });\n modules.push({\n member: 'image',\n args: [this, this.serviceLocator]\n });\n if (this.quickToolbarSettings.enable) {\n modules.push({ member: 'quickToolbar', args: [this, this.serviceLocator] });\n }\n }\n if (this.showCharCount) {\n modules.push({ member: 'count', args: [this, this.serviceLocator] });\n }\n if (this.editorMode === 'Markdown') {\n modules.push({ member: 'markdownEditor', args: [this, this.serviceLocator] });\n }\n if (this.editorMode === 'HTML') {\n modules.push({ member: 'htmlEditor', args: [this, this.serviceLocator] });\n modules.push({ member: 'pasteCleanup', args: [this, this.serviceLocator] });\n modules.push({\n member: 'audio',\n args: [this, this.serviceLocator]\n });\n modules.push({\n member: 'video',\n args: [this, this.serviceLocator]\n });\n }\n if (this.fileManagerSettings.enable) {\n modules.push({ member: 'fileManager', args: [this, this.serviceLocator] });\n }\n if (this.enableResize) {\n modules.push({ member: 'resize', args: [this] });\n }\n return modules;\n };\n RichTextEditor.prototype.updateEnable = function () {\n if (this.enabled) {\n removeClass([this.element], classes.CLS_DISABLED);\n this.element.setAttribute('aria-disabled', 'false');\n if (!isNOU(this.htmlAttributes.tabindex)) {\n this.inputElement.setAttribute('tabindex', this.htmlAttributes.tabindex);\n }\n else {\n this.inputElement.setAttribute('tabindex', '0');\n }\n }\n else {\n if (this.getToolbar()) {\n removeClass(this.getToolbar().querySelectorAll('.' + classes.CLS_ACTIVE), classes.CLS_ACTIVE);\n removeClass([this.getToolbar()], [classes.CLS_TB_FLOAT, classes.CLS_TB_ABS_FLOAT]);\n }\n addClass([this.element], classes.CLS_DISABLED);\n this.element.tabIndex = -1;\n this.element.setAttribute('aria-disabled', 'true');\n this.inputElement.setAttribute('tabindex', '-1');\n }\n };\n /**\n * setEnable method\n *\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.setEnable = function () {\n this.updateEnable();\n // eslint-disable-next-line\n (this.enabled) ? this.eventInitializer() : this.unWireEvents();\n };\n RichTextEditor.prototype.initializeValue = function () {\n this.isFocusOut = false;\n this.isRTE = false;\n this.isBlur = true;\n this.defaultResetValue = null;\n this.isResizeInitialized = false;\n };\n /**\n * For internal use only - Initialize the event handler;\n *\n * @returns {void}\n * @hidden\n * @private\n */\n RichTextEditor.prototype.preRender = function () {\n this.initializeValue();\n this.onBlurHandler = this.blurHandler.bind(this);\n this.onFocusHandler = this.focusHandler.bind(this);\n this.onResizeHandler = this.resizeHandler.bind(this);\n this.clickPoints = { clientX: 0, clientY: 0 };\n this.initialValue = this.value;\n this.serviceLocator = new ServiceLocator;\n this.initializeServices();\n this.setContainer();\n this.persistData();\n setStyleAttribute(this.element, { 'width': formatUnit(this.width) });\n attributes(this.element, { role: 'application' });\n };\n RichTextEditor.prototype.persistData = function () {\n if (this.enablePersistence && this.originalElement.tagName === 'TEXTAREA') {\n this.element.id = this.originalElement.id + '_wrapper';\n var data = window.localStorage.getItem(this.getModuleName() + this.element.id);\n if (!(isNOU(data) || (data === ''))) {\n this.setProperties(JSON.parse(data), true);\n }\n }\n };\n RichTextEditor.prototype.setContainer = function () {\n this.originalElement = this.element.cloneNode(true);\n if (this.value === null || this.valueTemplate !== null) {\n this.setValue();\n }\n if (this.element.hasAttribute('tabindex')) {\n this.htmlAttributes = { 'tabindex': this.element.getAttribute('tabindex') };\n this.element.removeAttribute('tabindex');\n }\n this.element.innerHTML = '';\n var invalidAttr = ['class', 'style', 'id', 'ejs-for'];\n var htmlAttr = {};\n for (var a = 0; a < this.element.attributes.length; a++) {\n if (invalidAttr.indexOf(this.element.attributes[a].name) === -1 &&\n !(/^data-val/.test(this.element.attributes[a].name))) { // data-val for asp.net core data annotation validation.\n htmlAttr[this.element.attributes[a].name] = this.element.getAttribute(this.element.attributes[a].name);\n }\n }\n extend(htmlAttr, this.htmlAttributes, htmlAttr);\n this.setProperties({ htmlAttributes: htmlAttr }, true);\n if (!isNOU(this.htmlAttributes.id)) {\n this.element.id = this.htmlAttributes.id;\n }\n if (this.element.tagName === 'TEXTAREA') {\n var rteOuterWrapper = this.createElement('div', {\n className: this.element.getAttribute('class')\n });\n this.element.innerHTML = '';\n this.element.parentElement.insertBefore(rteOuterWrapper, this.element);\n this.valueContainer = this.element;\n removeClass([this.valueContainer], this.element.getAttribute('class').split(' '));\n this.element = rteOuterWrapper;\n }\n else {\n this.valueContainer = this.createElement('textarea', {\n id: this.getID() + '-value',\n attrs: { 'aria-labelledby': this.getID() }\n });\n }\n this.valueContainer.name = this.getID();\n addClass([this.valueContainer], classes.CLS_RTE_HIDDEN);\n if (!isNOU(this.cssClass)) {\n var currentClassList = this.cssClass.split(' ');\n for (var i = 0; i < currentClassList.length; i++) {\n addClass([this.valueContainer], currentClassList[i]);\n }\n }\n this.element.appendChild(this.valueContainer);\n };\n /**\n * getPersistData method\n *\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n /**\n * Focuses the Rich Text Editor component\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.focusIn = function () {\n if (this.enabled) {\n this.inputElement.focus();\n this.focusHandler({});\n }\n };\n /**\n * Blurs the Rich Text Editor component\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.focusOut = function () {\n if (this.enabled) {\n this.inputElement.blur();\n this.blurHandler({});\n }\n };\n /**\n * Selects all the content in RichTextEditor\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.selectAll = function () {\n this.notify(events.selectAll, {});\n };\n /**\n * Selects a content range or an element\n *\n * @param {Range} range - Specify the range which you want to select within the content.\n * The method used to select a particular sentence or word or entire document.\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.selectRange = function (range) {\n this.notify(events.selectRange, { range: range });\n };\n /**\n * Retrieves the HTML markup content from currently selected content of RichTextEditor.\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.getSelection = function () {\n var str = '';\n this.notify(events.getSelectedHtml, {\n callBack: function (txt) {\n str = txt;\n }\n });\n return str;\n };\n /**\n * Executes the commands\n *\n * @returns {void}\n * @param {CommandName} commandName - Specifies the name of the command to be executed.\n * @param {string | HTMLElement | ILinkCommandsArgs | IImageCommandsArgs} value - Specifies the value that you want to execute.\n * @param {ExecuteCommandOption} option - specifies the command option\n * @public\n */\n RichTextEditor.prototype.executeCommand = function (commandName, value, option) {\n value = this.htmlPurifier(commandName, value);\n if (this.editorMode === 'HTML') {\n var range = this.getRange();\n if (this.iframeSettings.enable) {\n this.formatter.editorManager.nodeSelection.Clear(this.element.ownerDocument);\n }\n var toFocus = (this.iframeSettings.enable &&\n range.startContainer === this.inputElement) ? true : !this.inputElement.contains(range.startContainer);\n if (toFocus) {\n this.focusIn();\n }\n }\n var tool = executeGroup[\"\" + commandName];\n if (option && option.undo) {\n if (option.undo && this.formatter.getUndoRedoStack().length === 0) {\n this.formatter.saveData();\n }\n }\n if (this.maxLength !== -1 && !isNOU(tool.command)) {\n var currentInsertContentLength = 0;\n if (tool.command === 'Links') {\n currentInsertContentLength = value.text.length === 0 ?\n value.url.length : value.text.length;\n }\n if (tool.command === 'Images' || tool.command === 'Table' || tool.command === 'Files') {\n currentInsertContentLength = 1;\n }\n if (tool.command === 'InsertHTML') {\n if (!isNOU(value)) {\n var tempElem = this.createElement('div');\n tempElem.innerHTML = value;\n currentInsertContentLength = tempElem.textContent.length;\n }\n else if (!isNOU(tool.value) && (tool.value === '
' || tool.value === '
')) {\n currentInsertContentLength = 1;\n }\n }\n if (tool.command === 'InsertText') {\n currentInsertContentLength = value.length;\n }\n var currentLength = this.getText().trim().length;\n var selectionLength = this.getSelection().length;\n var totalLength = (currentLength - selectionLength) + currentInsertContentLength;\n if (!(this.maxLength === -1 || totalLength <= this.maxLength)) {\n return;\n }\n }\n this.formatter.editorManager.execCommand(tool.command, tool.subCommand ? tool.subCommand : (value ? value : tool.value), null, null, (value ? value : tool.value), (value ? value : tool.value));\n if (option && option.undo) {\n this.formatter.saveData();\n this.formatter.enableUndo(this);\n }\n this.setPlaceHolder();\n this.notify(events.contentChanged, {});\n };\n RichTextEditor.prototype.htmlPurifier = function (command, value) {\n if (this.editorMode === 'HTML') {\n switch (command) {\n case 'insertHTML':\n if (this.enableHtmlSanitizer) {\n if (typeof value === 'string') {\n value = this.htmlEditorModule.sanitizeHelper(value);\n }\n else {\n value = this.htmlEditorModule.sanitizeHelper(value.outerHTML);\n }\n }\n break;\n case 'insertTable':\n if (isNOU(value.width)) {\n value.width = { minWidth: this.tableSettings.minWidth,\n maxWidth: this.tableSettings.maxWidth, width: this.tableSettings.width };\n }\n break;\n case 'insertImage': {\n var temp = this.createElement('img', {\n attrs: {\n src: value.url\n }\n });\n var imageValue = temp.outerHTML;\n if (this.enableHtmlSanitizer) {\n imageValue = this.htmlEditorModule.sanitizeHelper(temp.outerHTML);\n }\n var url = (imageValue !== '' && (this.createElement('div', {\n innerHTML: imageValue\n }).firstElementChild).getAttribute('src')) || null;\n url = !isNOU(url) ? url : '';\n value.url = url;\n if (isNOU(value.width)) {\n value.width = { minWidth: this.insertImageSettings.minWidth,\n maxWidth: this.insertImageSettings.maxWidth, width: this.insertImageSettings.width };\n }\n if (isNOU(value.height)) {\n value.height = { minHeight: this.insertImageSettings.minHeight,\n maxHeight: this.insertImageSettings.maxHeight, height: this.insertImageSettings.height };\n }\n break;\n }\n case 'insertAudio': {\n var wrapTemp = this.createElement('audio', {\n attrs: {\n controls: ''\n }\n });\n var temp = this.createElement('source', {\n attrs: {\n src: value.url,\n type: value.url && value.url.split('.').length > 0\n ? 'audio/' + value.url.split('.')[value.url.split('.').length - 1] : ''\n }\n });\n wrapTemp.appendChild(temp);\n var audioValue = wrapTemp.outerHTML;\n if (this.enableHtmlSanitizer) {\n audioValue = this.htmlEditorModule.sanitizeHelper(wrapTemp.outerHTML);\n }\n var url = (audioValue !== '' && (this.createElement('div', {\n innerHTML: audioValue\n }).firstElementChild.firstElementChild).getAttribute('src')) || null;\n url = !isNOU(url) ? url : '';\n value.url = url;\n break;\n }\n case 'insertVideo': {\n var wrapTemp = this.createElement('video', {\n attrs: {\n controls: ''\n }\n });\n var temp = this.createElement('source', {\n attrs: {\n src: value.url,\n type: value.url && value.url.split('.').length > 0\n ? 'video/' + value.url.split('.')[value.url.split('.').length - 1] : ''\n }\n });\n wrapTemp.appendChild(temp);\n var audioValue = wrapTemp.outerHTML;\n if (this.enableHtmlSanitizer) {\n audioValue = this.htmlEditorModule.sanitizeHelper(temp.outerHTML);\n }\n var url = (audioValue !== '' && (this.createElement('div', {\n innerHTML: audioValue\n }).firstElementChild).getAttribute('src')) || null;\n url = !isNOU(url) ? url : '';\n value.url = url;\n if (isNOU(value.width)) {\n value.width = { minWidth: this.insertVideoSettings.minWidth,\n maxWidth: this.insertVideoSettings.maxWidth, width: this.insertVideoSettings.width };\n }\n if (isNOU(value.height)) {\n value.height = { minHeight: this.insertVideoSettings.minHeight,\n maxHeight: this.insertVideoSettings.maxHeight, height: this.insertVideoSettings.height };\n }\n break;\n }\n case 'createLink': {\n var tempNode = this.createElement('a', {\n attrs: {\n href: value.url\n }\n });\n var linkValue = tempNode.outerHTML;\n if (this.enableHtmlSanitizer) {\n linkValue = this.htmlEditorModule.sanitizeHelper(tempNode.outerHTML);\n }\n var href = (linkValue !== '' && (this.createElement('div', {\n innerHTML: linkValue\n }).firstElementChild).getAttribute('href')) || null;\n href = !isNOU(href) ? href : '';\n value.url = href;\n break;\n }\n }\n }\n return value;\n };\n RichTextEditor.prototype.encode = function (value) {\n var divNode = this.createElement('div');\n divNode.innerText = value.trim();\n // eslint-disable-next-line\n return divNode.innerHTML.replace(/
/gi, '\\n');\n };\n /**\n * For internal use only - To Initialize the component rendering.\n *\n * @returns {void}\n * @private\n\n */\n RichTextEditor.prototype.render = function () {\n if (this.value && !this.valueTemplate) {\n this.setProperties({ value: this.serializeValue(this.value) }, true);\n }\n this.renderModule = new Render(this, this.serviceLocator);\n this.sourceCodeModule = new ViewSource(this, this.serviceLocator);\n this.notify(events.initialLoad, {});\n this.trigger(events.load);\n this.RTERender();\n // eslint-disable-next-line\n var execCommandCallBack = new ExecCommandCallBack(this);\n this.notify(events.initialEnd, {});\n if (this.enableXhtml) {\n this.setProperties({ value: this.getXhtml() }, true);\n }\n if (this.toolbarSettings.enable && this.toolbarSettings.type === 'Expand' && !isNOU(this.getToolbar()) &&\n (this.toolbarSettings.items.indexOf('Undo') > -1 && this.toolbarSettings.items.indexOf('Redo') > -1)) {\n this.disableToolbarItem(['Undo', 'Redo']);\n }\n this.setContentHeight();\n if (this.value !== null) {\n this.valueContainer.defaultValue = this.value;\n }\n // eslint-disable-next-line\n (!this.enabled) ? this.unWireEvents() : this.eventInitializer();\n this.notify(events.bindCssClass, { cssClass: this.cssClass });\n this.addAudioVideoWrapper();\n this.notify(events.tableclass, {});\n this.renderComplete();\n };\n /**\n * addAudioVideoWrapper method\n *\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.addAudioVideoWrapper = function () {\n var _this = this;\n var insertElem;\n var audioElm = this.element.querySelectorAll('audio');\n for (var i = 0; i < audioElm.length; i++) {\n if (!audioElm[i].classList.contains('e-rte-audio')) {\n audioElm[i].classList.add('e-rte-audio');\n audioElm[i].classList.add(classes.CLS_AUDIOINLINE);\n }\n // eslint-disable-next-line max-len\n if (!audioElm[i].parentElement.classList.contains(classes.CLS_CLICKELEM) && !audioElm[i].parentElement.classList.contains(classes.CLS_AUDIOWRAP)) {\n var audioWrapElem = this.createElement('span', { className: classes.CLS_AUDIOWRAP });\n audioWrapElem.setAttribute('style', 'width:300px; margin:0 auto;');\n audioWrapElem.contentEditable = 'false';\n var audioInnerWrapElem = this.createElement('span', { className: classes.CLS_CLICKELEM });\n audioWrapElem.appendChild(audioInnerWrapElem);\n audioElm[i].parentNode.insertBefore(audioWrapElem, audioElm[i].nextSibling);\n audioInnerWrapElem.appendChild(audioElm[i]);\n if (audioWrapElem.nextElementSibling === null) {\n insertElem = this.createElement('br');\n audioWrapElem.parentNode.insertBefore(insertElem, audioWrapElem.nextSibling);\n }\n }\n }\n var videoElm = this.element.querySelectorAll('video');\n for (var i = 0; i < videoElm.length; i++) {\n if (!videoElm[i].classList.contains('e-rte-video')) {\n videoElm[i].classList.add('e-rte-video');\n videoElm[i].classList.add(classes.CLS_VIDEOINLINE);\n }\n // eslint-disable-next-line max-len\n if (!videoElm[i].parentElement.classList.contains(classes.CLS_CLICKELEM) && !videoElm[i].parentElement.classList.contains(classes.CLS_VIDEOWRAP)) {\n var videoWrapElem = this.createElement('span', { className: classes.CLS_VIDEOWRAP });\n videoWrapElem.contentEditable = 'false';\n videoElm[i].parentNode.insertBefore(videoWrapElem, videoElm[i].nextSibling);\n videoWrapElem.appendChild(videoElm[i]);\n if (videoWrapElem.nextElementSibling === null) {\n insertElem = this.createElement('br');\n videoWrapElem.parentNode.insertBefore(insertElem, videoWrapElem.nextSibling);\n }\n }\n if (Browser.userAgent.indexOf('Firefox') !== -1) {\n // eslint-disable-next-line\n videoElm[i].addEventListener('play', function (args) {\n _this.notify(events.mouseDown, { args: args });\n _this.notify('editAreaClick', { args: args });\n });\n // eslint-disable-next-line\n videoElm[i].addEventListener('pause', function (args) {\n _this.notify(events.mouseDown, { args: args });\n _this.notify('editAreaClick', { args: args });\n });\n }\n }\n };\n /**\n * For internal use only - Initialize the event handler\n *\n * @returns {void}\n * @private\n\n * @hidden\n */\n RichTextEditor.prototype.eventInitializer = function () {\n this.wireEvents();\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n RichTextEditor.prototype.cleanList = function (e) {\n var range = this.getRange();\n var currentStartContainer = range.startContainer;\n var currentEndContainer = range.endContainer;\n var currentStartOffset = range.startOffset;\n var isSameContainer = currentStartContainer === currentEndContainer ? true : false;\n var endNode = range.endContainer.nodeName === '#text' ? range.endContainer.parentElement :\n range.endContainer;\n var closestLI = closest(endNode, 'LI');\n var isDetached = false;\n if (!isNOU(closestLI) && endNode.textContent.length === range.endOffset &&\n !range.collapsed && isNOU(endNode.nextElementSibling)) {\n for (var i = 0; i < closestLI.childNodes.length; i++) {\n if (closestLI.childNodes[i].nodeName === '#text' && closestLI.childNodes[i].textContent.trim().length === 0) {\n detach(closestLI.childNodes[i]);\n isDetached = true;\n i--;\n }\n }\n var currentLastElem = closestLI;\n while (currentLastElem.lastChild !== null && currentLastElem.nodeName !== '#text') {\n currentLastElem = currentLastElem.lastChild;\n }\n if (isDetached) {\n var currentLast = currentLastElem.nodeName === 'BR' && !isNOU(currentLastElem.previousSibling) ?\n currentLastElem.previousSibling : currentLastElem;\n this.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), isSameContainer ? currentLast : currentStartContainer, currentLast, currentStartOffset, (currentLast.nodeName === 'BR' ? 0 : currentLast.textContent.length));\n }\n }\n };\n /**\n * For internal use only - keydown the event handler;\n *\n * @param {KeyboardEvent} e - specifies the event.\n * @returns {void}\n * @private\n\n * @hidden\n */\n RichTextEditor.prototype.keyDown = function (e) {\n this.notify(events.keyDown, { member: 'keydown', args: e });\n this.restrict(e);\n if (this.editorMode === 'HTML') {\n this.cleanList(e);\n }\n if (this.editorMode === 'HTML' && ((e.which === 8 && e.code === 'Backspace') || (e.which === 46 && e.code === 'Delete'))) {\n var range = this.getRange();\n var startNode = range.startContainer.nodeName === '#text' ? range.startContainer.parentElement :\n range.startContainer;\n if (closest(startNode, 'pre') &&\n (e.which === 8 && range.startContainer.textContent.charCodeAt(range.startOffset - 1) === 8203) ||\n (e.which === 46 && range.startContainer.textContent.charCodeAt(range.startOffset) === 8203)) {\n // eslint-disable-next-line\n var regEx = new RegExp(String.fromCharCode(8203), 'g');\n var pointer = e.which === 8 ? range.startOffset - 1 : range.startOffset;\n range.startContainer.textContent = range.startContainer.textContent.replace(regEx, '');\n this.formatter.editorManager.nodeSelection.setCursorPoint(this.contentModule.getDocument(), range.startContainer, pointer);\n }\n else if ((e.code === 'Backspace' && e.which === 8) &&\n range.startContainer.textContent.charCodeAt(0) === 8203 && range.collapsed) {\n var parentEle = range.startContainer.parentElement;\n var index = void 0;\n var i = void 0;\n for (i = 0; i < parentEle.childNodes.length; i++) {\n if (parentEle.childNodes[i] === range.startContainer) {\n index = i;\n }\n }\n var bool = true;\n var removeNodeArray = [];\n for (i = index; i >= 0; i--) {\n // eslint-disable-next-line max-len\n if (parentEle.childNodes[i].nodeType === 3 && parentEle.childNodes[i].textContent.charCodeAt(0) === 8203 && bool) {\n removeNodeArray.push(i);\n }\n else {\n bool = false;\n }\n }\n if (removeNodeArray.length > 0) {\n for (i = removeNodeArray.length - 1; i > 0; i--) {\n parentEle.childNodes[removeNodeArray[i]].textContent = '';\n }\n }\n this.formatter.editorManager.nodeSelection.setCursorPoint(this.contentModule.getDocument(), range.startContainer, range.startOffset);\n }\n }\n if (this.formatter.getUndoRedoStack().length === 0) {\n this.formatter.saveData();\n }\n if (e.action !== 'insert-link' &&\n (e.action && e.action !== 'paste' && e.action !== 'space'\n || e.which === 9 || (e.code === 'Backspace' && e.which === 8))) {\n this.formatter.process(this, null, e);\n switch (e.action) {\n case 'toolbar-focus':\n if (this.toolbarSettings.enable) {\n // eslint-disable-next-line\n var selector = '.e-toolbar-item[aria-disabled=\"false\"][title] [tabindex]';\n this.toolbarModule.baseToolbar.toolbarObj.element.querySelector(selector).focus();\n }\n break;\n case 'escape':\n this.contentModule.getEditPanel().focus();\n break;\n }\n }\n if (!isNOU(this.placeholder)) {\n if ((!isNOU(this.placeHolderWrapper)) && (this.inputElement.textContent.length !== 1)) {\n this.placeHolderWrapper.style.display = 'none';\n }\n else {\n this.setPlaceHolder();\n }\n }\n this.autoResize();\n };\n RichTextEditor.prototype.keyUp = function (e) {\n if (this.editorMode === 'HTML') {\n var range = this.getRange();\n if (Browser.userAgent.indexOf('Firefox') !== -1 && range.startContainer.nodeName === '#text' &&\n range.startContainer.parentElement === this.inputElement && this.enterKey !== 'BR') {\n var range_1 = this.getRange();\n var tempElem = this.createElement(this.enterKey);\n range_1.startContainer.parentElement.insertBefore(tempElem, range_1.startContainer);\n tempElem.appendChild(range_1.startContainer);\n this.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), tempElem.childNodes[0], tempElem.childNodes[0], tempElem.childNodes[0].textContent.length, tempElem.childNodes[0].textContent.length);\n }\n }\n this.notify(events.keyUp, { member: 'keyup', args: e });\n if (e.keyCode === 39 || e.keyCode === 37) {\n this.notify(events.tableModulekeyUp, { member: 'tableModulekeyUp', args: e });\n }\n if (e.code === 'KeyX' && e.which === 88 && e.keyCode === 88 && e.ctrlKey && (this.inputElement.innerHTML === '' ||\n this.inputElement.innerHTML === '
')) {\n this.inputElement.innerHTML = getEditValue(getDefaultValue(this), this);\n }\n var allowedKeys = e.which === 32 || e.which === 13 || e.which === 8 || e.which === 46;\n if (((e.key !== 'shift' && !e.ctrlKey) && e.key && e.key.length === 1 || allowedKeys) || (this.editorMode === 'Markdown'\n && ((e.key !== 'shift' && !e.ctrlKey) && e.key && e.key.length === 1 || allowedKeys)) && !this.inlineMode.enable) {\n this.formatter.onKeyHandler(this, e);\n }\n if (this.inputElement && this.inputElement.textContent.length !== 0\n || this.element.querySelectorAll('.e-toolbar-item.e-active').length > 0) {\n this.notify(events.toolbarRefresh, { args: e });\n }\n if (!isNOU(this.placeholder)) {\n if (!(e.key === 'Enter' && e.keyCode === 13) && (this.inputElement.innerHTML === '
' || this.inputElement.innerHTML === '
' ||\n this.inputElement.innerHTML === '
')) {\n this.setPlaceHolder();\n }\n }\n };\n /**\n * @param {string} value - specifies the value.\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.serializeValue = function (value) {\n if (this.editorMode === 'HTML' && !isNOU(value)) {\n if (this.enableHtmlEncode) {\n value = this.htmlEditorModule.sanitizeHelper(decode(value));\n value = this.encode(value);\n }\n else {\n value = this.htmlEditorModule.sanitizeHelper(value);\n value = this.enableXhtml ? this.htmlEditorModule.xhtmlValidation.selfEncloseValidation(value) : value;\n }\n }\n return value;\n };\n /**\n * This method will clean up the HTML against cross-site scripting attack and return the HTML as string.\n * It's only applicable to editorMode as `HTML`.\n *\n * @param {string} value - Specifies the value that you want to sanitize.\n * @returns {string} - specifies the the string value\n */\n RichTextEditor.prototype.sanitizeHtml = function (value) {\n return this.serializeValue(value);\n };\n /**\n * updateValue method\n *\n * @param {string} value - specifies the string value.\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.updateValue = function (value) {\n if (isNOU(value)) {\n var inputVal = this.inputElement.innerHTML;\n this.setProperties({ value: isEditableValueEmpty(inputVal) ? null : inputVal });\n }\n else {\n this.setProperties({ value: value });\n }\n };\n RichTextEditor.prototype.triggerEditArea = function (e) {\n if (!isIDevice()) {\n this.notify(events.editAreaClick, { member: 'editAreaClick', args: e });\n }\n else {\n var touch = (e.touches ? e.changedTouches[0] : e);\n if (this.clickPoints.clientX === touch.clientX && this.clickPoints.clientY === touch.clientY) {\n this.notify(events.editAreaClick, { member: 'editAreaClick', args: e });\n }\n }\n };\n RichTextEditor.prototype.notifyMouseUp = function (e) {\n var touch = (e.touches ? e.changedTouches[0] : e);\n this.notify(events.mouseUp, { member: 'mouseUp', args: e,\n touchData: { prevClientX: this.clickPoints.clientX, prevClientY: this.clickPoints.clientY,\n clientX: touch.clientX, clientY: touch.clientY }\n });\n if (this.inputElement && ((this.editorMode === 'HTML' && this.inputElement.textContent.length !== 0) ||\n (this.editorMode === 'Markdown' && this.inputElement.value.length !== 0)) || (e.target && (e.target.nodeName === 'VIDEO'\n || e.target.querySelectorAll('.' + classes.CLS_VIDEOWRAP).length > 0) || (e.target && e.target.nodeName !== 'BR' &&\n (e.target.classList.contains(classes.CLS_AUDIOWRAP) ||\n e.target.classList.contains(classes.CLS_CLICKELEM) ||\n e.target.classList.contains(classes.CLS_VID_CLICK_ELEM))))) {\n this.notify(events.toolbarRefresh, { args: e });\n }\n this.triggerEditArea(e);\n };\n RichTextEditor.prototype.mouseUp = function (e) {\n if (this.quickToolbarSettings.showOnRightClick && Browser.isDevice) {\n var target = e.target;\n var closestTable = closest(target, 'table');\n if (target && target.nodeName === 'A' || target.nodeName === 'IMG' || (target.nodeName === 'TD' || target.nodeName === 'TH' ||\n target.nodeName === 'TABLE' || (closestTable && this.contentModule.getEditPanel().contains(closestTable)))) {\n return;\n }\n }\n this.notifyMouseUp(e);\n if (e.detail === 3) {\n var range = this.getRange();\n var selection = this.formatter.editorManager.domNode.getSelection();\n if (/\\s+$/.test(selection.toString())) {\n if (!isNOU(range.startContainer.parentElement) && (!isNOU(range.startContainer.parentElement.nextSibling) &&\n (range.startContainer.parentElement.nextSibling.nodeType !== 3 ||\n /\\s+$/.test(range.startContainer.parentElement.nextSibling.textContent)) || range.startOffset === range.endOffset)\n || range.startContainer.parentElement.tagName.toLocaleLowerCase() === 'li') {\n range.setStart(range.startContainer, range.startOffset);\n range.setEnd(range.startContainer, range.startContainer.textContent.length);\n }\n }\n }\n };\n /**\n * @param {Function} module - specifies the module function.\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.ensureModuleInjected = function (module) {\n return this.getInjectedModules().indexOf(module) >= 0;\n };\n /**\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.onCopy = function () {\n this.contentModule.getDocument().execCommand('copy', false, null);\n };\n /**\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.onCut = function () {\n this.contentModule.getDocument().execCommand('cut', false, null);\n };\n /**\n * @param {KeyboardEvent} e - specifies the keyboard event.\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.onPaste = function (e) {\n var _this = this;\n var evenArgs = {\n originalEvent: e,\n cancel: false,\n requestType: 'Paste'\n };\n this.trigger(events.actionBegin, evenArgs, function (pasteArgs) {\n var currentLength = _this.inputElement.textContent.length;\n var selectionLength = _this.getSelection().length;\n var pastedContentLength = (isNOU(e) || isNOU(e.clipboardData))\n ? 0 : e.clipboardData.getData('text/plain').length;\n var totalLength = (currentLength - selectionLength) + pastedContentLength;\n if (_this.editorMode === 'Markdown') {\n var args_1 = { requestType: 'Paste', editorMode: _this.editorMode, event: e };\n setTimeout(function () {\n _this.formatter.onSuccess(_this, args_1);\n }, 0);\n if (!(_this.maxLength === -1 || totalLength <= _this.maxLength)) {\n e.preventDefault();\n }\n return;\n }\n if (!pasteArgs.cancel && _this.inputElement.contentEditable === 'true' &&\n (_this.maxLength === -1 || totalLength <= _this.maxLength)) {\n if (!isNOU(_this.pasteCleanupModule)) {\n _this.notify(events.pasteClean, { args: e });\n }\n else {\n var args_2 = { requestType: 'Paste', editorMode: _this.editorMode, event: e };\n var value = null;\n var htmlValue = false;\n if (e && !isNOU(e.clipboardData)) {\n value = e.clipboardData.getData('text/plain');\n htmlValue = e.clipboardData.getData('text/html').indexOf('MsoNormal') > 0;\n }\n var file = e && e.clipboardData && e.clipboardData.items.length > 0 ?\n e.clipboardData.items[0].getAsFile() : null;\n if (value !== null) {\n _this.notify(events.paste, {\n file: file,\n args: e,\n text: value,\n isWordPaste: htmlValue\n });\n }\n setTimeout(function () {\n _this.formatter.onSuccess(_this, args_2);\n }, 0);\n }\n }\n else {\n e.preventDefault();\n }\n });\n };\n /**\n * @param {string} action - specifies the string value.\n * @param {MouseEvent} event - specifies the event.\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.clipboardAction = function (action, event) {\n switch (action.toLowerCase()) {\n case 'cut':\n this.onCut();\n this.formatter.onSuccess(this, {\n requestType: 'Cut',\n editorMode: this.editorMode,\n event: event\n });\n break;\n case 'copy':\n this.onCopy();\n this.formatter.onSuccess(this, {\n requestType: 'Copy',\n editorMode: this.editorMode,\n event: event\n });\n break;\n case 'paste':\n this.onPaste(event);\n break;\n }\n };\n /**\n * Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).\n *\n * @returns {void}\n */\n RichTextEditor.prototype.destroy = function () {\n if (this.isDestroyed || !this.isRendered) {\n return;\n }\n if (!isNOU(this.timeInterval)) {\n clearInterval(this.timeInterval);\n this.timeInterval = null;\n }\n if (this.element.offsetParent === null) {\n if (!isNOU(this.toolbarModule)) {\n this.toolbarModule.destroy();\n }\n this.notify(events.moduleDestroy, {});\n return;\n }\n this.notify(events.destroy, {});\n this.destroyDependentModules();\n this.unWireEvents();\n if (this.originalElement.tagName === 'TEXTAREA') {\n this.element.parentElement.insertBefore(this.valueContainer, this.element);\n this.valueContainer.id = this.getID();\n this.valueContainer.removeAttribute('name');\n detach(this.element);\n if (this.originalElement.innerHTML.trim() !== '') {\n this.valueContainer.value = this.originalElement.innerHTML.trim();\n this.setProperties({ value: (!isNOU(this.initialValue) ? this.initialValue : null) }, true);\n }\n else {\n this.valueContainer.value = this.valueContainer.defaultValue;\n }\n this.element = this.valueContainer;\n for (var i = 0; i < this.originalElement.classList.length; i++) {\n addClass([this.element], this.originalElement.classList[i]);\n }\n if (!isNOU(this.cssClass)) {\n var currentClassList = this.cssClass.split(' ');\n for (var i = 0; i < currentClassList.length; i++) {\n addClass([this.element], currentClassList[i]);\n }\n }\n removeClass([this.element], classes.CLS_RTE_HIDDEN);\n }\n else {\n if (this.originalElement.innerHTML.trim() !== '') {\n this.element.innerHTML = this.originalElement.innerHTML.trim();\n this.setProperties({ value: (!isNOU(this.initialValue) ? this.initialValue : null) }, true);\n }\n else {\n this.element.innerHTML = '';\n }\n }\n if (this.placeholder && this.placeHolderWrapper) {\n this.placeHolderWrapper = null;\n }\n if (!isNOU(this.cssClass)) {\n var allClassName = this.cssClass.split(' ');\n for (var i = 0; i < allClassName.length; i++) {\n if (allClassName[i].trim() !== '') {\n removeClass([this.element], allClassName[i]);\n }\n }\n }\n this.removeHtmlAttributes();\n this.removeAttributes();\n _super.prototype.destroy.call(this);\n this.isRendered = false;\n if (this.enablePersistence) {\n window.localStorage.removeItem(this.getModuleName() + this.element.id);\n }\n };\n RichTextEditor.prototype.removeHtmlAttributes = function () {\n if (this.htmlAttributes) {\n var keys = Object.keys(this.htmlAttributes);\n for (var i = 0; i < keys.length && this.element.hasAttribute(keys[i]); i++) {\n this.element.removeAttribute(keys[i]);\n }\n }\n };\n RichTextEditor.prototype.removeAttributes = function () {\n if (!this.enabled) {\n removeClass([this.element], classes.CLS_DISABLED);\n }\n if (this.enableRtl) {\n removeClass([this.element], classes.CLS_RTL);\n }\n if (this.readonly) {\n removeClass([this.element], classes.CLS_RTE_READONLY);\n }\n if (this.element.style.width !== '' && this.originalElement.style.width === '') {\n this.element.style.removeProperty('width');\n }\n if (this.element.style.height !== '' && this.originalElement.style.height === '') {\n this.element.style.removeProperty('height');\n }\n this.element.removeAttribute('aria-disabled');\n this.element.removeAttribute('role');\n this.element.removeAttribute('tabindex');\n };\n RichTextEditor.prototype.destroyDependentModules = function () {\n /* destroy dependent modules */\n this.renderModule.destroy();\n this.formatter.editorManager.undoRedoManager.destroy();\n this.sourceCodeModule.destroy();\n };\n /**\n * Returns the HTML or Text inside the RichTextEditor.\n *\n * @returns {Element} - specifies the element.\n */\n RichTextEditor.prototype.getContent = function () {\n return this.contentModule.getPanel();\n };\n /**\n * Returns the text content as string.\n *\n * @returns {string} - specifies the string value.\n */\n RichTextEditor.prototype.getText = function () {\n return this.contentModule.getText();\n };\n /**\n * Returns the html value of the selected content as string.\n *\n * @returns {string} - specifies the string value.\n */\n RichTextEditor.prototype.getSelectedHtml = function () {\n var range;\n var wrapperElm = this.createElement('div');\n var selection = this.contentModule.getDocument().getSelection();\n if (selection.rangeCount > 0) {\n range = selection.getRangeAt(0);\n var selectedHtml = range.cloneContents();\n wrapperElm.appendChild(selectedHtml);\n }\n return wrapperElm.innerHTML;\n };\n /**\n * It shows the inline quick toolbar\n *\n * @returns {void}\n */\n RichTextEditor.prototype.showInlineToolbar = function () {\n if (this.inlineMode.enable) {\n var currentRange = this.getRange();\n var targetElm = currentRange.endContainer.nodeName === '#text' ?\n currentRange.endContainer.parentElement : currentRange.endContainer;\n var x = currentRange.getClientRects()[0].left;\n var y = currentRange.getClientRects()[0].top;\n this.quickToolbarModule.showInlineQTBar(x, y, targetElm);\n }\n };\n /**\n * It hides the inline quick toolbar\n *\n * @returns {void}\n */\n RichTextEditor.prototype.hideInlineToolbar = function () {\n this.quickToolbarModule.hideInlineQTBar();\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {void}\n * @private\n\n */\n RichTextEditor.prototype.getModuleName = function () {\n return 'richtexteditor';\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {RichTextEditorModel} newProp - specifies the the property.\n * @param {RichTextEditorModel} oldProp - specifies the old property.\n * @returns {void}\n * @hidden\n\n */\n /* eslint-disable */\n RichTextEditor.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 'enterKey':\n case 'value': {\n var nVal = void 0;\n if (prop === 'enterKey') {\n if (this.value === null || this.value === '
' || this.value === '
' ||\n this.value === '
') {\n nVal = null;\n }\n else {\n nVal = this.value;\n }\n }\n else {\n nVal = newProp[prop];\n }\n var val = this.editorMode === 'HTML' ? getEditValue(nVal, this) : nVal;\n if ((!isNOU(nVal) && nVal !== '') || prop === 'enterKey') {\n this.value = this.serializeValue(((this.enableHtmlEncode) ? this.encode(decode(val)) : val));\n }\n this.updatePanelValue();\n if (this.inputElement) {\n this.notify(events.tableclass, {});\n }\n this.setPlaceHolder();\n this.notify(events.xhtmlValidation, { module: 'XhtmlValidation', newProp: newProp, oldProp: oldProp });\n if (this.enableXhtml) {\n this.setProperties({ value: this.getXhtml() }, true);\n }\n if (this.showCharCount) {\n this.countModule.refresh();\n }\n this.addAudioVideoWrapper();\n break;\n }\n case 'valueTemplate':\n this.setValue(true);\n if (this.showCharCount) {\n this.countModule.refresh();\n }\n break;\n case 'width':\n this.setWidth(newProp[prop]);\n if (this.toolbarSettings.enable && !this.inlineMode.enable) {\n this.toolbarModule.refreshToolbarOverflow();\n this.resizeHandler();\n }\n break;\n case 'height':\n this.setHeight(newProp[prop]);\n this.setContentHeight();\n this.autoResize();\n break;\n case 'readonly':\n this.setReadOnly(false);\n break;\n case 'cssClass':\n this.element.classList.remove(oldProp[prop]);\n this.setCssClass(newProp[prop]);\n this.notify(events.bindCssClass, { cssClass: newProp[prop], oldCssClass: oldProp[prop] });\n break;\n case 'enabled':\n this.setEnable();\n break;\n case 'enableRtl':\n this.updateRTL();\n break;\n case 'placeholder':\n this.placeholder = newProp[prop];\n this.setPlaceHolder();\n break;\n case 'htmlAttributes':\n setAttributes(this.htmlAttributes, this, false, false);\n break;\n case 'iframeSettings': {\n var frameSetting = oldProp[prop];\n if (frameSetting.resources) {\n var iframe = this.contentModule.getDocument();\n var header = iframe.querySelector('head');\n var files = void 0;\n if (frameSetting.resources.scripts) {\n files = header.querySelectorAll('.' + classes.CLS_SCRIPT_SHEET);\n this.removeSheets(files);\n }\n if (frameSetting.resources.styles) {\n files = header.querySelectorAll('.' + classes.CLS_STYLE_SHEET);\n this.removeSheets(files);\n }\n }\n this.setIframeSettings();\n break;\n }\n case 'locale':\n _super.prototype.refresh.call(this);\n break;\n case 'inlineMode':\n this.notify(events.modelChanged, { module: 'quickToolbar', newProp: newProp, oldProp: oldProp });\n this.setContentHeight();\n break;\n case 'toolbarSettings':\n this.notify(events.modelChanged, { module: 'toolbar', newProp: newProp, oldProp: oldProp });\n this.setContentHeight();\n break;\n case 'maxLength':\n if (this.showCharCount) {\n this.countModule.refresh();\n }\n break;\n case 'showCharCount':\n if (newProp[prop] && this.countModule) {\n this.countModule.renderCount();\n }\n else if (newProp[prop] === false && this.countModule) {\n this.countModule.destroy();\n }\n break;\n case 'enableHtmlEncode':\n this.updateValueData();\n this.updatePanelValue();\n this.setPlaceHolder();\n if (this.showCharCount) {\n this.countModule.refresh();\n }\n break;\n case 'undoRedoSteps':\n case 'undoRedoTimer':\n this.formatter.editorManager.observer.notify(CONSTANT.MODEL_CHANGED, { newProp: newProp, oldProp: oldProp });\n break;\n case 'enableXhtml':\n this.notify(events.xhtmlValidation, { module: 'XhtmlValidation', newProp: newProp, oldProp: oldProp });\n break;\n case 'quickToolbarSettings':\n newProp.quickToolbarSettings.showOnRightClick ? this.wireContextEvent() : this.unWireContextEvent();\n this.notify(events.modelChanged, { newProp: newProp, oldProp: oldProp });\n break;\n default:\n this.notify(events.modelChanged, { newProp: newProp, oldProp: oldProp });\n break;\n }\n }\n };\n /* eslint-enable */\n /**\n * @hidden\n * @returns {void}\n\n */\n RichTextEditor.prototype.updateValueData = function () {\n if (this.enableHtmlEncode) {\n this.setProperties({ value: this.encode(decode(this.inputElement.innerHTML)) }, true);\n }\n else {\n this.setProperties({\n value: /<[a-z][\\s\\S]*>/i.test(this.inputElement.innerHTML) ? this.inputElement.innerHTML :\n decode(this.inputElement.innerHTML)\n });\n }\n };\n RichTextEditor.prototype.removeSheets = function (srcList) {\n var i;\n for (i = 0; i < srcList.length; i++) {\n detach(srcList[i]);\n }\n };\n RichTextEditor.prototype.updatePanelValue = function () {\n var value = this.value;\n value = (this.enableHtmlEncode && this.value) ? decode(value) : value;\n var getTextArea = this.element.querySelector('.e-rte-srctextarea');\n if (value) {\n if (getTextArea && getTextArea.style.display === 'block') {\n getTextArea.value = this.value;\n }\n if (this.valueContainer) {\n this.valueContainer.value = (this.enableHtmlEncode) ? this.value : value;\n }\n if (this.editorMode === 'HTML' && this.inputElement && this.inputElement.innerHTML.replace('&', '&').trim() !== value.trim()) {\n this.inputElement.innerHTML = value;\n }\n else if (this.editorMode === 'Markdown' && this.inputElement\n && this.inputElement.value.trim() !== value.trim()) {\n this.inputElement.value = value;\n }\n }\n else {\n if (getTextArea && getTextArea.style.display === 'block') {\n getTextArea.value = '';\n }\n if (this.editorMode === 'HTML') {\n if (this.enterKey === 'DIV') {\n this.inputElement.innerHTML = '
';\n }\n else if (this.enterKey === 'BR') {\n this.inputElement.innerHTML = '
';\n }\n else {\n this.inputElement.innerHTML = '
';\n if (value === '' && this.formatter && this.inputElement) {\n this.formatter.editorManager.nodeSelection.setCursorPoint(this.contentModule.getDocument(), this.inputElement.firstElementChild, this.inputElement.firstElementChild.childElementCount);\n }\n }\n }\n else {\n this.inputElement.value = '';\n }\n if (this.valueContainer) {\n this.valueContainer.value = '';\n }\n }\n if (this.showCharCount) {\n this.countModule.refresh();\n }\n };\n RichTextEditor.prototype.setHeight = function (height) {\n if (height !== 'auto') {\n this.element.style.height = formatUnit(height);\n }\n else {\n this.element.style.height = 'auto';\n }\n if (this.toolbarSettings.type === 'Expand' && (typeof (this.height) === 'string' &&\n this.height.indexOf('px') > -1 || typeof (this.height) === 'number')) {\n this.element.classList.add(classes.CLS_RTE_FIXED_TB_EXPAND);\n }\n else {\n this.element.classList.remove(classes.CLS_RTE_FIXED_TB_EXPAND);\n }\n };\n /**\n * setPlaceHolder method\n *\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.setPlaceHolder = function () {\n if (this.inputElement && this.placeholder && this.iframeSettings.enable !== true) {\n if (this.editorMode !== 'Markdown') {\n if (!this.placeHolderWrapper) {\n this.placeHolderWrapper = this.createElement('span', { className: 'rte-placeholder e-rte-placeholder' + ' ' + this.cssClass });\n if (this.inputElement) {\n this.inputElement.parentElement.insertBefore(this.placeHolderWrapper, this.inputElement);\n }\n attributes(this.placeHolderWrapper, {\n 'style': 'font-size: 14px; margin-left: 0px; margin-right: 0px;'\n });\n }\n this.placeHolderWrapper.innerHTML = this.placeholder;\n if (this.inputElement.textContent.length === 0 && this.inputElement.childNodes.length < 2 && !isNOU(this.inputElement.firstChild) && (this.inputElement.firstChild.nodeName === 'BR' ||\n ((this.inputElement.firstChild.nodeName === 'P' || this.inputElement.firstChild.nodeName === 'DIV') && !isNOU(this.inputElement.firstChild.firstChild) &&\n this.inputElement.firstChild.firstChild.nodeName === 'BR'))) {\n this.placeHolderWrapper.style.display = 'block';\n }\n else {\n this.placeHolderWrapper.style.display = 'none';\n }\n }\n else {\n this.inputElement.setAttribute('placeholder', this.placeholder);\n }\n }\n };\n RichTextEditor.prototype.setWidth = function (width) {\n if (width !== 'auto') {\n setStyleAttribute(this.element, { 'width': formatUnit(this.width) });\n }\n else {\n this.element.style.width = 'auto';\n }\n };\n RichTextEditor.prototype.setCssClass = function (cssClass) {\n if (!isNOU(cssClass)) {\n var allClassName = cssClass.split(' ');\n for (var i = 0; i < allClassName.length; i++) {\n if (allClassName[i].trim() !== '') {\n this.element.classList.add(allClassName[i]);\n }\n }\n }\n };\n RichTextEditor.prototype.updateRTL = function () {\n this.notify(events.rtlMode, { enableRtl: this.enableRtl });\n if (this.enableRtl) {\n this.element.classList.add(classes.CLS_RTL);\n this.inputElement.classList.add(classes.CLS_RTL);\n }\n else {\n this.element.classList.remove(classes.CLS_RTL);\n this.inputElement.classList.remove(classes.CLS_RTL);\n }\n };\n RichTextEditor.prototype.updateReadOnly = function () {\n this.notify(events.readOnlyMode, { editPanel: this.inputElement, mode: this.readonly });\n };\n /**\n * setReadOnly method\n *\n * @param {boolean} initial - specifies the boolean value\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.setReadOnly = function (initial) {\n this.updateReadOnly();\n if (!initial) {\n if (this.readonly && this.enabled) {\n this.unbindEvents();\n }\n else if (this.enabled) {\n this.bindEvents();\n }\n }\n };\n /**\n * By default, prints all the pages of the RichTextEditor.\n *\n * @returns {void}\n */\n RichTextEditor.prototype.print = function () {\n var _this = this;\n var printWind;\n var printArgs = {\n element: this.inputElement,\n requestType: 'print',\n cancel: false\n };\n this.trigger(events.actionBegin, printArgs, function (printingArgs) {\n printWind = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth);\n if (Browser.info.name === 'msie') {\n printWind.resizeTo(screen.availWidth, screen.availHeight);\n }\n printWind = printWindow(_this.inputElement, printWind);\n if (!printingArgs.cancel) {\n var actionArgs = {\n requestType: 'print'\n };\n _this.trigger(events.actionComplete, actionArgs);\n }\n });\n };\n /**\n * Refresh the view of the editor.\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.refreshUI = function () {\n this.renderModule.refresh();\n };\n /**\n * Shows the Rich Text Editor component in full-screen mode.\n *\n * @returns {void}\n */\n RichTextEditor.prototype.showFullScreen = function () {\n this.fullScreenModule.showFullScreen();\n };\n /**\n * Enables the give toolbar items in the Rich Text Editor component.\n *\n * @returns {void}\n * @param {string | string[]} items - Specifies the single or collection of items\n * @param {boolean} muteToolbarUpdate enable/disables the toolbar item status in RichTextEditor.\n * that you want to be enable in Rich Text Editor’s Toolbar.\n *\n * @public\n */\n RichTextEditor.prototype.enableToolbarItem = function (items, muteToolbarUpdate) {\n this.toolbarModule.enableTBarItems(this.getBaseToolbarObject(), items, true, muteToolbarUpdate);\n };\n /**\n * Disables the given toolbar items in the Rich Text Editor component.\n *\n * @returns {void}\n * @param {string | string[]} items - Specifies the single or collection of items\n * @param {boolean} muteToolbarUpdate enable/disables the toolbar item status in RichTextEditor.\n * that you want to be disable in Rich Text Editor’s Toolbar.\n *\n * @public\n */\n RichTextEditor.prototype.disableToolbarItem = function (items, muteToolbarUpdate) {\n this.toolbarModule.enableTBarItems(this.getBaseToolbarObject(), items, false, muteToolbarUpdate);\n };\n /**\n * Removes the give toolbar items from the Rich Text Editor component.\n *\n * @returns {void}\n * @param {string | string[]} items - Specifies the single or collection of items\n * that you want to be remove from Rich Text Editor’s Toolbar.\n *\n * @public\n */\n RichTextEditor.prototype.removeToolbarItem = function (items) {\n this.toolbarModule.removeTBarItems(items);\n };\n /**\n * Get the selected range from the RichTextEditor's content.\n *\n * @returns {void}\n * @public\n\n */\n RichTextEditor.prototype.getRange = function () {\n return this.formatter.editorManager.nodeSelection.getRange(this.contentModule.getDocument());\n };\n RichTextEditor.prototype.initializeServices = function () {\n this.serviceLocator.register('rendererFactory', new RendererFactory);\n this.serviceLocator.register('rteLocale', this.localeObj = new L10n(this.getModuleName(), defaultLocale, this.locale));\n this.serviceLocator.register('dialogRenderObject', new DialogRenderer(this));\n };\n RichTextEditor.prototype.RTERender = function () {\n var rendererFactory = this.serviceLocator.getService('rendererFactory');\n this.contentModule = rendererFactory.getRenderer(RenderType.Content);\n this.fullScreenModule = new FullScreen(this);\n this.enterKeyModule = new EnterKeyAction(this);\n this.renderModule.render();\n this.inputElement = this.contentModule.getEditPanel();\n this.setHeight(this.height);\n setAttributes(this.htmlAttributes, this, false, true);\n if (this.iframeSettings) {\n this.setIframeSettings();\n }\n this.setCssClass(this.cssClass);\n this.updateEnable();\n this.setPlaceHolder();\n this.updateRTL();\n this.updateReadOnly();\n this.updatePanelValue();\n if (this.enableHtmlEncode && !isNOU(this.value)) {\n this.setProperties({ value: this.encode(decode(this.value)) });\n }\n };\n RichTextEditor.prototype.setIframeSettings = function () {\n if (this.iframeSettings.resources) {\n var styleSrc = this.iframeSettings.resources.styles;\n var scriptSrc = this.iframeSettings.resources.scripts;\n if (this.iframeSettings.resources.scripts.length > 0) {\n this.InjectSheet(true, scriptSrc);\n }\n if (this.iframeSettings.resources.styles.length > 0) {\n this.InjectSheet(false, styleSrc);\n }\n }\n if (this.iframeSettings.attributes) {\n setAttributes(this.iframeSettings.attributes, this, true, false);\n }\n };\n RichTextEditor.prototype.InjectSheet = function (scriptSheet, srcList) {\n try {\n if (srcList && srcList.length > 0) {\n var iFrame = this.contentModule.getDocument();\n var target = iFrame.querySelector('head');\n for (var i = 0; i < srcList.length; i++) {\n if (scriptSheet) {\n var scriptEle = this.createScriptElement();\n scriptEle.src = srcList[i];\n target.appendChild(scriptEle);\n }\n else {\n var styleEle = this.createStyleElement();\n styleEle.href = srcList[i];\n target.appendChild(styleEle);\n }\n }\n }\n }\n catch (e) {\n return;\n }\n };\n RichTextEditor.prototype.createScriptElement = function () {\n var scriptEle = this.createElement('script', {\n className: classes.CLS_SCRIPT_SHEET\n });\n scriptEle.type = 'text/javascript';\n return scriptEle;\n };\n RichTextEditor.prototype.createStyleElement = function () {\n var styleEle = this.createElement('link', {\n className: classes.CLS_STYLE_SHEET\n });\n styleEle.rel = 'stylesheet';\n return styleEle;\n };\n RichTextEditor.prototype.setValue = function (isPropertyChange) {\n var _this = this;\n if (this.valueTemplate) {\n var regEx = new RegExp(/<(?=.*? .*?\\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\\/\\1>/i);\n if (regEx.test(this.valueTemplate)) {\n this.setProperties({ value: this.valueTemplate });\n }\n else {\n var compiledTemplate = compile(this.valueTemplate)('', this, 'valueTemplate');\n if (typeof this.valueTemplate !== 'string' && this.isReact) {\n this.displayTempElem = this.createElement('div');\n for (var i = 0; i < compiledTemplate.length; i++) {\n var item = compiledTemplate[i];\n append([item], this.displayTempElem);\n }\n this.renderTemplates(function () {\n _this.inputElement.innerHTML = _this.displayTempElem.childNodes[0].innerHTML;\n _this.setProperties({ value: _this.inputElement.innerHTML.trim() });\n });\n }\n else {\n var appendElem = this.element;\n if (isPropertyChange) {\n this.inputElement.innerHTML = '';\n appendElem = this.inputElement;\n }\n for (var i = 0; i < compiledTemplate.length; i++) {\n var item = compiledTemplate[i];\n append([item], appendElem);\n }\n this.setProperties({ value: appendElem.innerHTML.trim() });\n this.renderReactTemplates();\n }\n }\n }\n else {\n // eslint-disable-next-line\n var innerHtml = !isNOU(this.element.innerHTML) && this.element.innerHTML.replace(/<(\\/?|\\!?)(!--!--)>/g, '').trim();\n if (innerHtml !== '') {\n if (this.element.tagName === 'TEXTAREA') {\n this.setProperties({ value: decode(innerHtml) });\n }\n else {\n this.setProperties({ value: innerHtml });\n }\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n RichTextEditor.prototype.renderTemplates = function (callBack) {\n this.renderReactTemplates(callBack);\n };\n RichTextEditor.prototype.updateResizeFlag = function () {\n this.isResizeInitialized = true;\n };\n /**\n * Image max width calculation method\n *\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.getInsertImgMaxWidth = function () {\n var maxWidth = this.insertImageSettings.maxWidth;\n // eslint-disable-next-line\n var imgPadding = 12;\n var imgResizeBorder = 2;\n var editEle = this.contentModule.getEditPanel();\n var eleStyle = window.getComputedStyle(editEle);\n var editEleMaxWidth = editEle.offsetWidth - (imgPadding + imgResizeBorder +\n parseFloat(eleStyle.paddingLeft.split('px')[0]) + parseFloat(eleStyle.paddingRight.split('px')[0]) +\n parseFloat(eleStyle.marginLeft.split('px')[0]) + parseFloat(eleStyle.marginRight.split('px')[0]));\n return isNOU(maxWidth) ? editEleMaxWidth : maxWidth;\n };\n /**\n * Video max width calculation method\n *\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.getInsertVidMaxWidth = function () {\n var maxWidth = this.insertVideoSettings.maxWidth;\n // eslint-disable-next-line\n var vidPadding = 12;\n var vidResizeBorder = 2;\n var editEle = this.contentModule.getEditPanel();\n var eleStyle = window.getComputedStyle(editEle);\n var editEleMaxWidth = editEle.offsetWidth - (vidPadding + vidResizeBorder +\n parseFloat(eleStyle.paddingLeft.split('px')[0]) + parseFloat(eleStyle.paddingRight.split('px')[0]) +\n parseFloat(eleStyle.marginLeft.split('px')[0]) + parseFloat(eleStyle.marginRight.split('px')[0]));\n return isNOU(maxWidth) ? editEleMaxWidth : maxWidth;\n };\n /**\n * setContentHeight method\n *\n * @param {string} target - specifies the target value.\n * @param {boolean} isExpand - specifies the bollean value.\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.setContentHeight = function (target, isExpand) {\n var heightValue;\n var topValue = 0;\n var rteHeightPercent;\n var heightPercent = typeof (this.height) === 'string' && this.height.indexOf('%') > -1;\n var cntEle = (this.sourceCodeModule.getPanel() &&\n this.sourceCodeModule.getPanel().parentElement.style.display === 'block') ? this.sourceCodeModule.getPanel().parentElement :\n this.contentModule.getPanel();\n var rteHeight = this.element.offsetHeight;\n if (rteHeight === 0 && this.height !== 'auto' && !this.getToolbar()) {\n rteHeight = parseInt(this.height, 10);\n if (heightPercent) {\n rteHeightPercent = this.height;\n }\n }\n var tbHeight = this.getToolbar() ? this.toolbarModule.getToolbarHeight() : 0;\n var rzHandle = this.element.querySelector('.' + classes.CLS_RTE_RES_HANDLE);\n var rzHeight = this.enableResize ? (!isNOU(rzHandle) ? (rzHandle.offsetHeight + 8) : 0) : 0;\n var expandPopHeight = this.getToolbar() ? this.toolbarModule.getExpandTBarPopHeight() : 0;\n if (this.toolbarSettings.type === ToolbarType.Expand && isExpand) {\n heightValue = (this.height === 'auto' && rzHeight === 0) ? 'auto' : rteHeight - (tbHeight + expandPopHeight + rzHeight) + 'px';\n topValue = (!this.toolbarSettings.enableFloating) ? expandPopHeight : 0;\n }\n else {\n if (this.height === 'auto' && !(this.element.classList.contains('e-rte-full-screen')) && !this.isResizeInitialized) {\n heightValue = 'auto';\n }\n else {\n heightValue = heightPercent && rteHeightPercent ? rteHeightPercent : rteHeight - (tbHeight + rzHeight) + 'px';\n }\n }\n if (target !== 'windowResize') {\n if (this.iframeSettings.enable) {\n if (heightValue !== 'auto') {\n setStyleAttribute(cntEle, { height: heightValue, marginTop: topValue + 'px' });\n }\n }\n else {\n setStyleAttribute(cntEle, { height: heightValue, marginTop: topValue + 'px' });\n }\n }\n if (this.iframeSettings.enable && target === 'sourceCode') {\n var codeElement = select('.' + classes.CLS_RTE_CONTENT, this.element);\n setStyleAttribute(codeElement, { height: heightValue, marginTop: topValue + 'px' });\n }\n if (this.toolbarSettings.enableFloating && this.getToolbar() && !this.inlineMode.enable) {\n var tbWrapHeight = (isExpand ? (tbHeight + expandPopHeight) : tbHeight) + 'px';\n setStyleAttribute(this.getToolbar().parentElement, { height: tbWrapHeight });\n }\n if (rzHeight === 0) {\n this.autoResize();\n }\n };\n /**\n * Retrieves the HTML from RichTextEditor.\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.getHtml = function () {\n return this.serializeValue(this.contentModule.getEditPanel().innerHTML);\n };\n /**\n * Retrieves the Rich Text Editor's XHTML validated HTML content when `enableXhtml` property is enabled.\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.getXhtml = function () {\n var currentValue = this.value;\n if (!isNOU(currentValue) && this.enableXhtml) {\n currentValue = this.htmlEditorModule.xhtmlValidation.selfEncloseValidation(currentValue);\n }\n return currentValue;\n };\n /**\n * Shows the source HTML/MD markup.\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.showSourceCode = function () {\n if (this.readonly) {\n return;\n }\n this.notify(events.sourceCode, {});\n };\n /**\n * Returns the maximum number of characters in the Rich Text Editor.\n *\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.getCharCount = function () {\n var htmlText = this.editorMode === 'Markdown' ? this.inputElement.value.trim() :\n this.inputElement.textContent.trim();\n var htmlLength;\n if (this.editorMode !== 'Markdown' && htmlText.indexOf('\\u200B') !== -1) {\n htmlLength = htmlText.replace(/\\u200B/g, '').length;\n }\n else {\n htmlLength = htmlText.length;\n }\n return htmlLength;\n };\n /**\n * Show the dialog in the Rich Text Editor.\n *\n * @param {DialogType} type - specifies the dialog type.\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.showDialog = function (type) {\n if (type === DialogType.InsertLink) {\n this.notify(events.showLinkDialog, {});\n }\n else if (type === DialogType.InsertImage) {\n this.notify(events.showImageDialog, {});\n }\n else if (type === DialogType.InsertAudio) {\n this.notify(events.showAudioDialog, {});\n }\n else if (type === DialogType.InsertVideo) {\n this.notify(events.showVideoDialog, {});\n }\n else if (type === DialogType.InsertTable) {\n this.notify(events.showTableDialog, {});\n }\n };\n /**\n * Close the dialog in the Rich Text Editor.\n *\n * @param {DialogType} type - specifies the dialog type.\n * @returns {void}\n * @public\n */\n RichTextEditor.prototype.closeDialog = function (type) {\n if (type === DialogType.InsertLink) {\n this.notify(events.closeLinkDialog, {});\n }\n else if (type === DialogType.InsertImage) {\n this.notify(events.closeImageDialog, {});\n }\n else if (type === DialogType.InsertAudio) {\n this.notify(events.closeAudioDialog, {});\n }\n else if (type === DialogType.InsertVideo) {\n this.notify(events.closeVideoDialog, {});\n }\n else if (type === DialogType.InsertTable) {\n this.notify(events.closeTableDialog, {});\n }\n };\n /**\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.getBaseToolbarObject = function () {\n var tbObj;\n if (this.inlineMode.enable && (!Browser.isDevice || isIDevice())) {\n tbObj = this.quickToolbarModule && this.quickToolbarModule.getInlineBaseToolbar();\n }\n else {\n tbObj = this.toolbarModule && this.toolbarModule.getBaseToolbar();\n }\n return tbObj;\n };\n /**\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.getToolbar = function () {\n return this.toolbarModule ? this.toolbarModule.getToolbarElement() : null;\n };\n /**\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.getToolbarElement = function () {\n return this.toolbarModule && this.toolbarModule.getToolbarElement();\n };\n /**\n * @returns {void}\n * getID method\n *\n * @hidden\n\n */\n RichTextEditor.prototype.getID = function () {\n return (this.originalElement.tagName === 'TEXTAREA' ? this.valueContainer.id : this.element.id);\n };\n RichTextEditor.prototype.mouseDownHandler = function (e) {\n var touch = (e.touches ? e.changedTouches[0] : e);\n addClass([this.element], [classes.CLS_FOCUS]);\n this.preventDefaultResize(e);\n this.notify(events.mouseDown, { args: e });\n this.clickPoints = { clientX: touch.clientX, clientY: touch.clientY };\n };\n RichTextEditor.prototype.preventImgResize = function (e) {\n if (e.target.nodeName.toLocaleLowerCase() === 'img') {\n e.preventDefault();\n }\n };\n /**\n * preventDefaultResize method\n *\n * @param {FocusEvent} e - specifies the event.\n * @returns {void}\n * @hidden\n\n */\n // eslint-disable-next-line\n RichTextEditor.prototype.preventDefaultResize = function (e) {\n if (Browser.info.name === 'msie') {\n this.contentModule.getEditPanel().addEventListener('mscontrolselect', this.preventImgResize);\n }\n else if (Browser.info.name === 'mozilla') {\n this.contentModule.getDocument().execCommand('enableObjectResizing', false, 'false');\n this.contentModule.getDocument().execCommand('enableInlineTableEditing', false, 'false');\n }\n };\n // eslint-disable-next-line\n RichTextEditor.prototype.defaultResize = function (e) {\n if (Browser.info.name === 'msie') {\n this.contentModule.getEditPanel().removeEventListener('mscontrolselect', this.preventImgResize);\n }\n else if (Browser.info.name === 'mozilla') {\n this.contentModule.getDocument().execCommand('enableObjectResizing', true, 'true');\n this.contentModule.getDocument().execCommand('enableInlineTableEditing', true, 'true');\n }\n };\n RichTextEditor.prototype.resizeHandler = function () {\n var isExpand = false;\n if (!document.body.contains(this.element)) {\n document.defaultView.removeEventListener('resize', this.onResizeHandler, true);\n return;\n }\n if (this.toolbarSettings.enable && !this.inlineMode.enable) {\n this.toolbarModule.refreshToolbarOverflow();\n isExpand = this.toolbarModule.baseToolbar.toolbarObj.element.classList.contains(classes.CLS_EXPAND_OPEN);\n }\n this.setContentHeight('windowResize', isExpand);\n this.notify(events.windowResize, null);\n };\n RichTextEditor.prototype.scrollHandler = function (e) {\n if (this.element) {\n this.notify(events.scroll, { args: e });\n }\n };\n RichTextEditor.prototype.contentScrollHandler = function (e) {\n this.notify(events.contentscroll, { args: e });\n };\n RichTextEditor.prototype.focusHandler = function (e) {\n if ((!this.isRTE || this.isFocusOut)) {\n this.isRTE = this.isFocusOut ? false : true;\n this.isFocusOut = false;\n addClass([this.element], [classes.CLS_FOCUS]);\n if (this.editorMode === 'HTML') {\n this.cloneValue = (this.inputElement.innerHTML === '
' || this.inputElement.innerHTML === '
' ||\n this.inputElement.innerHTML === '
') ? null : this.enableHtmlEncode ?\n this.encode(decode(this.inputElement.innerHTML)) : this.inputElement.innerHTML;\n }\n else {\n this.cloneValue = this.inputElement.value === '' ? null :\n this.inputElement.value;\n }\n var active = document.activeElement;\n if (active === this.element || active === this.getToolbarElement() || active === this.contentModule.getEditPanel()\n || ((this.iframeSettings.enable && active === this.contentModule.getPanel()) &&\n e.target && !e.target.classList.contains('e-img-inner')\n && (e.target && e.target.parentElement\n && !e.target.parentElement.classList.contains('e-img-wrap')))\n || closest(active, '.e-rte-toolbar') === this.getToolbarElement()) {\n this.contentModule.getEditPanel().focus();\n if (!isNOU(this.getToolbarElement())) {\n this.getToolbarElement().setAttribute('tabindex', '-1');\n var items = this.getToolbarElement().querySelectorAll('[tabindex=\"0\"]');\n for (var i = 0; i < items.length; i++) {\n items[i].setAttribute('tabindex', '-1');\n }\n }\n }\n this.preventDefaultResize(e);\n this.trigger('focus', { event: e, isInteracted: Object.keys(e).length === 0 ? false : true });\n if (!isNOU(this.saveInterval) && this.saveInterval > 0 && !this.autoSaveOnIdle) {\n this.timeInterval = setInterval(this.updateValueOnIdle.bind(this), this.saveInterval);\n }\n EventHandler.add(document, 'mousedown', this.onDocumentClick, this);\n }\n if (!isNOU(this.getToolbarElement())) {\n var toolbarItem = this.getToolbarElement().querySelectorAll('input,select,button,a,[tabindex]');\n for (var i = 0; i < toolbarItem.length; i++) {\n if ((!toolbarItem[i].classList.contains('e-rte-dropdown-btn') &&\n !toolbarItem[i].classList.contains('e-insert-table-btn')) &&\n (!toolbarItem[i].hasAttribute('tabindex') ||\n toolbarItem[i].getAttribute('tabindex') !== '-1')) {\n toolbarItem[i].setAttribute('tabindex', '-1');\n }\n }\n }\n };\n RichTextEditor.prototype.getUpdatedValue = function () {\n var value;\n if (!isNOU(this.tableModule)) {\n this.tableModule.removeResizeElement();\n }\n var getTextArea = this.element.querySelector('.e-rte-srctextarea');\n if (this.editorMode === 'HTML') {\n value = (this.inputElement.innerHTML === '
' || this.inputElement.innerHTML === '
'\n || this.inputElement.innerHTML === '
') ? null : this.enableHtmlEncode ?\n this.encode(decode(this.inputElement.innerHTML)) : this.inputElement.innerHTML;\n if (getTextArea && getTextArea.style.display === 'block') {\n value = getTextArea.value;\n }\n }\n else {\n value = this.inputElement.value === '' ? null :\n this.inputElement.value;\n }\n return value;\n };\n RichTextEditor.prototype.updateValueOnIdle = function () {\n if (!isNOU(this.tableModule) && !isNOU(this.inputElement.querySelector('.e-table-box.e-rbox-select'))) {\n return;\n }\n this.setProperties({ value: this.getUpdatedValue() }, true);\n this.valueContainer.value = this.value;\n this.isValueChangeBlurhandler = false;\n this.invokeChangeEvent();\n };\n RichTextEditor.prototype.updateIntervalValue = function () {\n clearTimeout(this.idleInterval);\n this.idleInterval = setTimeout(this.updateValueOnIdle.bind(this), 0);\n };\n RichTextEditor.prototype.updateStatus = function (e) {\n if (!isNOU(e.html) || !isNOU(e.markdown)) {\n var status_1 = this.formatter.editorManager.undoRedoManager.getUndoStatus();\n var eventArgs = {\n undo: status_1.undo,\n redo: status_1.redo,\n html: e.html,\n markdown: e.markdown\n };\n this.trigger(events.updatedToolbarStatus, eventArgs);\n }\n };\n RichTextEditor.prototype.onDocumentClick = function (e) {\n var target = e.target;\n var rteElement = closest(target, '.' + classes.CLS_RTE);\n if (!this.element.contains(e.target) && document !== e.target && rteElement !== this.element &&\n !closest(target, '[aria-owns=\"' + this.getID() + '\"]')) {\n this.isBlur = true;\n this.isRTE = false;\n }\n this.notify(events.docClick, { args: e });\n if (Browser.info.name !== 'msie' && e.detail > 3) {\n e.preventDefault();\n }\n };\n RichTextEditor.prototype.blurHandler = function (e) {\n var trg = e.relatedTarget;\n if (trg) {\n var rteElement = closest(trg, '.' + classes.CLS_RTE);\n if (rteElement && rteElement === this.element) {\n this.isBlur = false;\n if (trg === this.getToolbarElement()) {\n trg.setAttribute('tabindex', '-1');\n }\n }\n else if (closest(trg, '[aria-owns=\"' + this.getID() + '\"]')) {\n this.isBlur = false;\n }\n else {\n this.isBlur = true;\n trg = null;\n }\n }\n if (this.isBlur && isNOU(trg)) {\n removeClass([this.element], [classes.CLS_FOCUS]);\n this.notify(events.focusChange, {});\n var value = this.getUpdatedValue();\n this.setProperties({ value: value });\n this.notify(events.toolbarRefresh, { args: e, documentNode: document });\n this.isValueChangeBlurhandler = true;\n this.invokeChangeEvent();\n this.isFocusOut = true;\n this.isBlur = false;\n dispatchEvent(this.valueContainer, 'focusout');\n this.defaultResize(e);\n this.trigger('blur', { event: e, isInteracted: Object.keys(e).length === 0 ? false : true });\n if (!isNOU(this.timeInterval)) {\n clearInterval(this.timeInterval);\n this.timeInterval = null;\n }\n EventHandler.remove(document, 'mousedown', this.onDocumentClick);\n }\n else {\n this.isRTE = true;\n }\n };\n /**\n * invokeChangeEvent method\n *\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.contentChanged = function () {\n if (this.autoSaveOnIdle) {\n if (!isNOU(this.saveInterval)) {\n clearTimeout(this.timeInterval);\n this.timeInterval = setTimeout(this.updateIntervalValue.bind(this), this.saveInterval);\n }\n }\n };\n /**\n * invokeChangeEvent method\n *\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.invokeChangeEvent = function () {\n var currentValue;\n if (this.enableXhtml) {\n currentValue = this.getXhtml();\n }\n else {\n currentValue = this.value;\n }\n var eventArgs = {\n value: currentValue,\n isInteracted: this.isValueChangeBlurhandler\n };\n if (this.value !== this.cloneValue) {\n this.trigger('change', eventArgs);\n this.cloneValue = this.value;\n }\n };\n /**\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.wireScrollElementsEvents = function () {\n this.scrollParentElements = getScrollableParent(this.element);\n for (var _i = 0, _a = this.scrollParentElements; _i < _a.length; _i++) {\n var element = _a[_i];\n EventHandler.add(element, 'scroll', this.scrollHandler, this);\n }\n if (!this.iframeSettings.enable) {\n EventHandler.add(this.contentModule.getPanel(), 'scroll', this.contentScrollHandler, this);\n }\n };\n RichTextEditor.prototype.wireContextEvent = function () {\n if (this.quickToolbarSettings.showOnRightClick) {\n EventHandler.add(this.inputElement, 'contextmenu', this.contextHandler, this);\n if (Browser.isDevice) {\n this.touchModule = new EJ2Touch(this.inputElement, { tapHold: this.touchHandler.bind(this), tapHoldThreshold: 500 });\n }\n }\n };\n RichTextEditor.prototype.unWireContextEvent = function () {\n EventHandler.remove(this.inputElement, 'contextmenu', this.contextHandler);\n if (Browser.isDevice && this.touchModule) {\n this.touchModule.destroy();\n }\n };\n /**\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.unWireScrollElementsEvents = function () {\n this.scrollParentElements = getScrollableParent(this.element);\n for (var _i = 0, _a = this.scrollParentElements; _i < _a.length; _i++) {\n var element = _a[_i];\n EventHandler.remove(element, 'scroll', this.scrollHandler);\n }\n if (!this.iframeSettings.enable) {\n EventHandler.remove(this.contentModule.getPanel(), 'scroll', this.contentScrollHandler);\n }\n };\n RichTextEditor.prototype.touchHandler = function (e) {\n this.notifyMouseUp(e.originalEvent);\n this.triggerEditArea(e.originalEvent);\n };\n RichTextEditor.prototype.contextHandler = function (e) {\n var closestElem = closest(e.target, 'a, table, img');\n if (this.inlineMode.onSelection === false || (!isNOU(closestElem) && this.inputElement.contains(closestElem)\n && (closestElem.tagName === 'IMG' || closestElem.tagName === 'TABLE' || closestElem.tagName === 'A'))) {\n e.preventDefault();\n }\n };\n RichTextEditor.prototype.resetHandler = function () {\n var defaultValue = this.valueContainer.defaultValue.trim();\n this.setProperties({ value: defaultValue === '' ? null : defaultValue });\n };\n /**\n * @returns {void}\n * @hidden\n\n */\n RichTextEditor.prototype.autoResize = function () {\n var _this = this;\n if (this.height === 'auto') {\n if (this.editorMode === 'Markdown') {\n setTimeout(function () {\n _this.setAutoHeight(_this.inputElement);\n }, 0);\n }\n else if (this.iframeSettings.enable) {\n var iframeElement_1 = this.element.querySelector('#' + this.getID() + '_rte-view');\n setTimeout(function () {\n _this.setAutoHeight(iframeElement_1);\n }, 100);\n this.inputElement.style.overflow = 'hidden';\n }\n }\n else {\n this.inputElement.style.overflow = null;\n }\n };\n RichTextEditor.prototype.setAutoHeight = function (element) {\n if (!isNOU(element)) {\n element.style.height = '';\n element.style.height = this.inputElement.scrollHeight + 'px';\n element.style.overflow = 'hidden';\n }\n };\n RichTextEditor.prototype.wireEvents = function () {\n this.element.addEventListener('focusin', this.onFocusHandler, true);\n this.element.addEventListener('focusout', this.onBlurHandler, true);\n this.on(events.contentChanged, this.contentChanged, this);\n this.on(events.resizeInitialized, this.updateResizeFlag, this);\n this.on(events.updateTbItemsStatus, this.updateStatus, this);\n if (this.readonly && this.enabled) {\n return;\n }\n this.bindEvents();\n };\n RichTextEditor.prototype.restrict = function (e) {\n if (this.maxLength >= 0) {\n var element = this.editorMode === 'Markdown' ? this.contentModule.getText() :\n (e && e.currentTarget.textContent);\n if (!element) {\n return;\n }\n var array = [8, 16, 17, 37, 38, 39, 40, 46, 65];\n var arrayKey = void 0;\n for (var i = 0; i <= array.length - 1; i++) {\n if (e.which === array[i]) {\n if (e.ctrlKey && e.which === 65) {\n return;\n }\n else if (e.which !== 65) {\n arrayKey = array[i];\n return;\n }\n }\n }\n if ((element.length >= this.maxLength && this.maxLength !== -1) && e.which !== arrayKey) {\n e.preventDefault();\n }\n }\n };\n RichTextEditor.prototype.bindEvents = function () {\n this.keyboardModule = new KeyboardEvents(this.inputElement, {\n keyAction: this.keyDown.bind(this), keyConfigs: __assign({}, this.formatter.keyConfig, this.keyConfig), eventName: 'keydown'\n });\n var formElement = closest(this.valueContainer, 'form');\n if (formElement) {\n EventHandler.add(formElement, 'reset', this.resetHandler, this);\n }\n EventHandler.add(this.inputElement, 'keyup', this.keyUp, this);\n EventHandler.add(this.inputElement, 'paste', this.onPaste, this);\n EventHandler.add(this.inputElement, Browser.touchEndEvent, debounce(this.mouseUp, 30), this);\n EventHandler.add(this.inputElement, Browser.touchStartEvent, this.mouseDownHandler, this);\n this.wireContextEvent();\n this.formatter.editorManager.observer.on(CONSTANT.KEY_DOWN_HANDLER, this.editorKeyDown, this);\n this.element.ownerDocument.defaultView.addEventListener('resize', this.onResizeHandler, true);\n if (this.iframeSettings.enable) {\n EventHandler.add(this.inputElement, 'focusin', this.focusHandler, this);\n EventHandler.add(this.inputElement, 'focusout', this.blurHandler, this);\n EventHandler.add(this.inputElement.ownerDocument, 'scroll', this.contentScrollHandler, this);\n EventHandler.add(this.inputElement.ownerDocument, Browser.touchStartEvent, this.onIframeMouseDown, this);\n }\n this.wireScrollElementsEvents();\n };\n RichTextEditor.prototype.onIframeMouseDown = function (e) {\n this.isBlur = false;\n this.currentTarget = e.target;\n this.notify(events.iframeMouseDown, e);\n };\n RichTextEditor.prototype.editorKeyDown = function (e) {\n switch (e.event.action) {\n case 'copy':\n this.onCopy();\n break;\n case 'cut':\n this.onCut();\n break;\n case 'tab':\n if (this.iframeSettings.enable) {\n this.isBlur = true;\n }\n break;\n }\n if (e.callBack && (e.event.action === 'copy' || e.event.action === 'cut' || e.event.action === 'delete')) {\n e.callBack({\n requestType: e.event.action,\n editorMode: 'HTML',\n event: e.event\n });\n }\n };\n RichTextEditor.prototype.unWireEvents = function () {\n this.element.removeEventListener('focusin', this.onFocusHandler, true);\n this.element.removeEventListener('focusout', this.onBlurHandler, true);\n this.off(events.contentChanged, this.contentChanged);\n this.off(events.resizeInitialized, this.updateResizeFlag);\n this.off(events.updateTbItemsStatus, this.updateStatus);\n if (this.readonly && this.enabled) {\n return;\n }\n this.unbindEvents();\n };\n RichTextEditor.prototype.unbindEvents = function () {\n if (this.keyboardModule) {\n this.keyboardModule.destroy();\n }\n var formElement = closest(this.valueContainer, 'form');\n if (formElement) {\n EventHandler.remove(formElement, 'reset', this.resetHandler);\n }\n EventHandler.remove(this.inputElement, 'keyup', this.keyUp);\n EventHandler.remove(this.inputElement, 'paste', this.onPaste);\n EventHandler.remove(this.inputElement, Browser.touchEndEvent, debounce(this.mouseUp, 30));\n EventHandler.remove(this.inputElement, Browser.touchStartEvent, this.mouseDownHandler);\n this.unWireContextEvent();\n if (this.formatter) {\n this.formatter.editorManager.observer.off(CONSTANT.KEY_DOWN_HANDLER, this.editorKeyDown);\n }\n this.element.ownerDocument.defaultView.removeEventListener('resize', this.onResizeHandler, true);\n if (this.iframeSettings.enable) {\n EventHandler.remove(this.inputElement, 'focusin', this.focusHandler);\n EventHandler.remove(this.inputElement, 'focusout', this.blurHandler);\n EventHandler.remove(this.inputElement.ownerDocument, 'scroll', this.contentScrollHandler);\n EventHandler.remove(this.inputElement.ownerDocument, Browser.touchStartEvent, this.onIframeMouseDown);\n }\n this.unWireScrollElementsEvents();\n };\n __decorate([\n Complex({}, ToolbarSettings)\n ], RichTextEditor.prototype, \"toolbarSettings\", void 0);\n __decorate([\n Complex({}, QuickToolbarSettings)\n ], RichTextEditor.prototype, \"quickToolbarSettings\", void 0);\n __decorate([\n Complex({}, PasteCleanupSettings)\n ], RichTextEditor.prototype, \"pasteCleanupSettings\", void 0);\n __decorate([\n Complex({}, IFrameSettings)\n ], RichTextEditor.prototype, \"iframeSettings\", void 0);\n __decorate([\n Complex({}, ImageSettings)\n ], RichTextEditor.prototype, \"insertImageSettings\", void 0);\n __decorate([\n Complex({}, AudioSettings)\n ], RichTextEditor.prototype, \"insertAudioSettings\", void 0);\n __decorate([\n Complex({}, VideoSettings)\n ], RichTextEditor.prototype, \"insertVideoSettings\", void 0);\n __decorate([\n Complex({}, TableSettings)\n ], RichTextEditor.prototype, \"tableSettings\", void 0);\n __decorate([\n Property(0)\n ], RichTextEditor.prototype, \"floatingToolbarOffset\", void 0);\n __decorate([\n Complex({}, InlineMode)\n ], RichTextEditor.prototype, \"inlineMode\", void 0);\n __decorate([\n Complex({}, FileManagerSettings)\n ], RichTextEditor.prototype, \"fileManagerSettings\", void 0);\n __decorate([\n Property('100%')\n ], RichTextEditor.prototype, \"width\", void 0);\n __decorate([\n Property(false)\n ], RichTextEditor.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(false)\n ], RichTextEditor.prototype, \"enableResize\", void 0);\n __decorate([\n Property({})\n ], RichTextEditor.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(null)\n ], RichTextEditor.prototype, \"placeholder\", void 0);\n __decorate([\n Property(false)\n ], RichTextEditor.prototype, \"autoSaveOnIdle\", void 0);\n __decorate([\n Property(false)\n ], RichTextEditor.prototype, \"readonly\", void 0);\n __decorate([\n Property(true)\n ], RichTextEditor.prototype, \"enabled\", void 0);\n __decorate([\n Property(true)\n ], RichTextEditor.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property(false)\n ], RichTextEditor.prototype, \"enableHtmlEncode\", void 0);\n __decorate([\n Property(false)\n ], RichTextEditor.prototype, \"enableXhtml\", void 0);\n __decorate([\n Property('auto')\n ], RichTextEditor.prototype, \"height\", void 0);\n __decorate([\n Property(null)\n ], RichTextEditor.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], RichTextEditor.prototype, \"value\", void 0);\n __decorate([\n Property('P')\n ], RichTextEditor.prototype, \"enterKey\", void 0);\n __decorate([\n Property('BR')\n ], RichTextEditor.prototype, \"shiftEnterKey\", void 0);\n __decorate([\n Property(30)\n ], RichTextEditor.prototype, \"undoRedoSteps\", void 0);\n __decorate([\n Property(300)\n ], RichTextEditor.prototype, \"undoRedoTimer\", void 0);\n __decorate([\n Property('HTML')\n ], RichTextEditor.prototype, \"editorMode\", void 0);\n __decorate([\n Property(null)\n ], RichTextEditor.prototype, \"keyConfig\", void 0);\n __decorate([\n Property(false)\n ], RichTextEditor.prototype, \"showCharCount\", void 0);\n __decorate([\n Property(false)\n ], RichTextEditor.prototype, \"enableTabKey\", void 0);\n __decorate([\n Property(false)\n ], RichTextEditor.prototype, \"enableAutoUrl\", void 0);\n __decorate([\n Property(-1)\n ], RichTextEditor.prototype, \"maxLength\", void 0);\n __decorate([\n Complex({}, Format)\n ], RichTextEditor.prototype, \"format\", void 0);\n __decorate([\n Complex({}, NumberFormatList)\n ], RichTextEditor.prototype, \"numberFormatList\", void 0);\n __decorate([\n Complex({}, BulletFormatList)\n ], RichTextEditor.prototype, \"bulletFormatList\", void 0);\n __decorate([\n Complex({}, FontFamily)\n ], RichTextEditor.prototype, \"fontFamily\", void 0);\n __decorate([\n Complex({}, FontSize)\n ], RichTextEditor.prototype, \"fontSize\", void 0);\n __decorate([\n Complex({}, FontColor)\n ], RichTextEditor.prototype, \"fontColor\", void 0);\n __decorate([\n Complex({}, BackgroundColor)\n ], RichTextEditor.prototype, \"backgroundColor\", void 0);\n __decorate([\n Property(null)\n ], RichTextEditor.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property(10000)\n ], RichTextEditor.prototype, \"saveInterval\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"actionBegin\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"actionComplete\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"beforeDialogOpen\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"dialogOpen\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"beforeDialogClose\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"dialogClose\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"beforeQuickToolbarOpen\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"quickToolbarOpen\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"quickToolbarClose\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"toolbarStatusUpdate\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"updatedToolbarStatus\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"imageSelected\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"beforeImageUpload\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"imageUploading\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"imageUploadSuccess\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"imageUploadFailed\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"imageRemoving\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"afterImageDelete\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"fileSelected\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"beforeFileUpload\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"fileUploading\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"fileUploadSuccess\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"fileUploadFailed\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"fileRemoving\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"afterMediaDelete\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"beforeSanitizeHtml\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"toolbarClick\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"resizing\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"resizeStart\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"resizeStop\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"beforePasteCleanup\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"afterPasteCleanup\", void 0);\n __decorate([\n Event()\n ], RichTextEditor.prototype, \"beforeImageDrop\", void 0);\n __decorate([\n Property(null)\n ], RichTextEditor.prototype, \"formatter\", void 0);\n RichTextEditor = __decorate([\n NotifyPropertyChanges\n ], RichTextEditor);\n return RichTextEditor;\n}(Component));\nexport { RichTextEditor };\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 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","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]);\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};\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, EventHandler, Property, Event } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { selectAll, setStyleAttribute as setStyle, select } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined as isNOU, getUniqueID, formatUnit, Collection, compile as templateCompiler } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty, Browser, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { calculatePosition } from '@syncfusion/ej2-popups';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { HScroll } from '../common/h-scroll';\nimport { VScroll } from '../common/v-scroll';\nvar CLS_VERTICAL = 'e-vertical';\nvar CLS_ITEMS = 'e-toolbar-items';\nvar CLS_ITEM = 'e-toolbar-item';\nvar CLS_RTL = 'e-rtl';\nvar CLS_SEPARATOR = 'e-separator';\nvar CLS_POPUPICON = 'e-popup-up-icon';\nvar CLS_POPUPDOWN = 'e-popup-down-icon';\nvar CLS_POPUPOPEN = 'e-popup-open';\nvar CLS_TEMPLATE = 'e-template';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_POPUPTEXT = 'e-toolbar-text';\nvar CLS_TBARTEXT = 'e-popup-text';\nvar CLS_TBAROVERFLOW = 'e-overflow-show';\nvar CLS_POPOVERFLOW = 'e-overflow-hide';\nvar CLS_TBARBTN = 'e-tbar-btn';\nvar CLS_TBARNAV = 'e-hor-nav';\nvar CLS_TBARSCRLNAV = 'e-scroll-nav';\nvar CLS_TBARRIGHT = 'e-toolbar-right';\nvar CLS_TBARLEFT = 'e-toolbar-left';\nvar CLS_TBARCENTER = 'e-toolbar-center';\nvar CLS_TBARPOS = 'e-tbar-pos';\nvar CLS_HSCROLLCNT = 'e-hscroll-content';\nvar CLS_VSCROLLCNT = 'e-vscroll-content';\nvar CLS_HSCROLLBAR = 'e-hscroll-bar';\nvar CLS_POPUPNAV = 'e-hor-nav';\nvar CLS_POPUPCLASS = 'e-toolbar-pop';\nvar CLS_POPUP = 'e-toolbar-popup';\nvar CLS_TBARBTNTEXT = 'e-tbar-btn-text';\nvar CLS_TBARNAVACT = 'e-nav-active';\nvar CLS_TBARIGNORE = 'e-ignore';\nvar CLS_POPPRI = 'e-popup-alone';\nvar CLS_HIDDEN = 'e-hidden';\nvar CLS_MULTIROW = 'e-toolbar-multirow';\nvar CLS_MULTIROWPOS = 'e-multirow-pos';\nvar CLS_MULTIROW_SEPARATOR = 'e-multirow-separator';\nvar CLS_EXTENDABLE_SEPARATOR = 'e-extended-separator';\nvar CLS_EXTEANDABLE_TOOLBAR = 'e-extended-toolbar';\nvar CLS_EXTENDABLECLASS = 'e-toolbar-extended';\nvar CLS_EXTENDPOPUP = 'e-expended-nav';\nvar CLS_EXTENDEDPOPOPEN = 'e-tbar-extended';\n/**\n * An item object that is used to configure Toolbar commands.\n */\nvar Item = /** @class */ (function (_super) {\n __extends(Item, _super);\n function Item() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Item.prototype, \"id\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"text\", void 0);\n __decorate([\n Property('auto')\n ], Item.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"showAlwaysInPopup\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"prefixIcon\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"suffixIcon\", void 0);\n __decorate([\n Property(true)\n ], Item.prototype, \"visible\", void 0);\n __decorate([\n Property('None')\n ], Item.prototype, \"overflow\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"template\", void 0);\n __decorate([\n Property('Button')\n ], Item.prototype, \"type\", void 0);\n __decorate([\n Property('Both')\n ], Item.prototype, \"showTextOn\", void 0);\n __decorate([\n Property(null)\n ], Item.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"tooltipText\", void 0);\n __decorate([\n Property('Left')\n ], Item.prototype, \"align\", void 0);\n __decorate([\n Event()\n ], Item.prototype, \"click\", void 0);\n __decorate([\n Property(-1)\n ], Item.prototype, \"tabIndex\", void 0);\n return Item;\n}(ChildProperty));\nexport { Item };\n/**\n * The Toolbar control contains a group of commands that are aligned horizontally.\n * ```html\n *
\n * \n * ```\n */\nvar Toolbar = /** @class */ (function (_super) {\n __extends(Toolbar, _super);\n /**\n * Initializes a new instance of the Toolbar class.\n *\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 /**\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 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 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 = nodes[0];\n }\n else {\n ele = nodes[nodes.length - 1];\n }\n }\n }\n else {\n nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')');\n if (e.action === 'home') {\n ele = nodes[0];\n }\n else {\n ele = nodes[nodes.length - 1];\n }\n }\n if (ele) {\n this.elementFocus(ele);\n }\n }\n break;\n case 'moveUp':\n case 'moveDown':\n 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.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 this.initialize();\n this.renderControl();\n this.wireEvents();\n this.renderComplete();\n };\n Toolbar.prototype.initialize = function () {\n var width = formatUnit(this.width);\n var height = formatUnit(this.height);\n if (Browser.info.name !== 'msie' || this.height !== 'auto' || this.overflowMode === 'MultiRow') {\n setStyle(this.element, { 'height': height });\n }\n setStyle(this.element, { 'width': width });\n var ariaAttr = {\n 'role': 'toolbar', 'aria-disabled': 'false',\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 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 + ':not(.' + CLS_POPUP + ')');\n sepHeight = (element.style.height === 'auto' || element.style.height === '') ? null : 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 if (itemCount === itemPopCount) {\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 }\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) {\n var ignoreCount = ig;\n var popEle = this.popObj.element;\n var query = '.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_TBAROVERFLOW + ')';\n var priEleCnt = selectAll('.' + CLS_POPUP + ':not(.' + CLS_TBAROVERFLOW + ')', popEle).length;\n var checkClass = function (ele, val) {\n return ele.classList.contains(val);\n };\n if (selectAll(query, inEle).length === 0) {\n var eleSep = inEle.children[indx - (indx - sepPri) - 1];\n var ignoreCheck = (!isNOU(eleSep) && checkClass(eleSep, CLS_TBARIGNORE));\n if ((!isNOU(eleSep) && checkClass(eleSep, CLS_SEPARATOR) && !isVisible(eleSep)) || ignoreCheck) {\n var sepDisplay = 'none';\n eleSep.style.display = 'inherit';\n var eleSepWidth = eleSep.offsetWidth + (parseFloat(window.getComputedStyle(eleSep).marginRight) * 2);\n var prevSep = eleSep.previousElementSibling;\n if ((elWid + eleSepWidth) < wid || des) {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - (indx - sepPri)]);\n if (!isNOU(prevSep)) {\n prevSep.style.display = '';\n }\n }\n else {\n if (prevSep.classList.contains(CLS_SEPARATOR)) {\n prevSep.style.display = sepDisplay;\n }\n }\n eleSep.style.display = '';\n }\n else {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - (indx - sepPri)]);\n }\n }\n else {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - priEleCnt]);\n }\n };\n Toolbar.prototype.popupRefresh = function (popupEle, destroy) {\n var _this = this;\n var ele = this.element;\n var isVer = this.isVertical;\n var 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 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);\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 ele.setAttribute('aria-disabled', 'false');\n _this.add(ele, CLS_ITEM);\n }\n });\n };\n Toolbar.prototype.renderItems = function () {\n var ele = this.element;\n var items = this.items;\n if (this.trgtEle != null) {\n this.ctrlTemplate();\n }\n else if (ele && items.length > 0) {\n var itemEleDom = void 0;\n if (ele && ele.children.length > 0) {\n itemEleDom = ele.querySelector('.' + CLS_ITEMS);\n }\n if (!itemEleDom) {\n itemEleDom = this.createElement('div', { className: CLS_ITEMS });\n }\n this.itemsAlign(items, itemEleDom);\n ele.appendChild(itemEleDom);\n }\n };\n Toolbar.prototype.setAttr = function (attr, element) {\n var key = Object.keys(attr);\n var keyVal;\n for (var i = 0; i < key.length; i++) {\n keyVal = key[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 ele.setAttribute('aria-disabled', 'false');\n }\n else {\n ele.classList.add(CLS_DISABLE);\n ele.setAttribute('aria-disabled', 'true');\n }\n };\n if (!isNOU(len) && len >= 1) {\n for (var a = 0, element = [].slice.call(elements); a < len; a++) {\n var itemElement = element[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.clearTemplate();\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);\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 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 innerEle.setAttribute('aria-disabled', 'false');\n var tempDom = this.createElement('div', {\n innerHTML: this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(item.tooltipText) : item.tooltipText\n });\n if (!this.tbarEle) {\n this.tbarEle = [];\n }\n if (item.htmlAttributes) {\n this.setAttr(item.htmlAttributes, innerEle);\n }\n if (item.tooltipText) {\n innerEle.setAttribute('title', tempDom.textContent);\n }\n if (item.cssClass) {\n innerEle.className = innerEle.className + ' ' + item.cssClass;\n }\n if (item.template) {\n this.templateRender(item.template, innerEle, item, index);\n }\n else {\n switch (item.type) {\n case 'Button':\n dom = this.buttonRendering(item, innerEle);\n dom.setAttribute('tabindex', 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 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 this.activeEle.setAttribute('tabindex', this.getDataTabindex(this.activeEle));\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.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 /**\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 (typeof newProperty !== 'function') {\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.clearTemplate();\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 }\n else {\n this.itemsRerender(newProp.items);\n }\n break;\n case 'width':\n setStyle(tEle, { 'width': formatUnit(newProp.width) });\n this.renderOverflowMode();\n if (this.popObj && wid < tEle.offsetWidth) {\n this.popupRefresh(this.popObj.element, false);\n }\n break;\n case 'height':\n setStyle(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'overflowMode':\n this.destroyMode();\n this.renderOverflowMode();\n if (this.enableRtl) {\n this.add(tEle, CLS_RTL);\n }\n this.refreshOverflow();\n break;\n case 'enableRtl':\n 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 { ChildProperty, extend, deleteObject, Property, addClass, isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * @param {Object} props - Specifies the properties\n * @param {string[]} model - Specifies the model\n * @returns {Object} Component Model\n */\nexport function getModel(props, model) {\n var obj = extend({}, props);\n for (var _i = 0, _a = Object.keys(obj); _i < _a.length; _i++) {\n var prop = _a[_i];\n if ((model).indexOf(prop) < 0) {\n deleteObject(obj, prop);\n }\n }\n return obj;\n}\n/** @hidden\n * @param {HTMLElement} ul - Specifies the UL element\n * @param {number} keyCode - Specifies the keycode\n * @returns {void}\n */\nexport function upDownKeyHandler(ul, keyCode) {\n var defaultIdx = keyCode === 40 ? 0 : ul.childElementCount - 1;\n var liIdx = defaultIdx;\n var li;\n var selectedLi = ul.querySelector('.e-selected');\n if (selectedLi) {\n selectedLi.classList.remove('e-selected');\n }\n for (var i = 0, len = ul.children.length; i < len; i++) {\n if (ul.children[i].classList.contains('e-focused')) {\n li = ul.children[i];\n liIdx = i;\n li.classList.remove('e-focused');\n if (keyCode === 40) {\n liIdx++;\n }\n else {\n liIdx--;\n }\n if (liIdx === (keyCode === 40 ? ul.childElementCount : -1)) {\n liIdx = defaultIdx;\n }\n }\n }\n li = ul.children[liIdx];\n liIdx = isValidLI(ul, li, liIdx, keyCode);\n if (liIdx !== -1) {\n addClass([ul.children[liIdx]], 'e-focused');\n ul.children[liIdx].focus();\n }\n}\n/**\n * Get Valid LI element\n *\n * @param {HTMLElement} ul - Specifies the UL element\n * @param {Element} li - Specifies the LI element\n * @param {number} index - Specifies the index\n * @param {number} keyCode - Specifies the keycode\n * @param {number} count - Specifies the count\n * @returns {number} - Index\n */\nfunction isValidLI(ul, li, index, keyCode, count) {\n if (count === void 0) { count = 0; }\n if (li.classList.contains('e-separator') || li.classList.contains('e-disabled')) {\n if (index === (keyCode === 40 ? ul.childElementCount - 1 : 0)) {\n index = keyCode === 40 ? 0 : ul.childElementCount - 1;\n }\n else {\n if (keyCode === 40) {\n index++;\n }\n else {\n index--;\n }\n }\n }\n li = ul.children[index];\n if (li.classList.contains('e-separator') || li.classList.contains('e-disabled')) {\n count++;\n if (count === ul.childElementCount) {\n return index = -1;\n }\n index = isValidLI(ul, li, index, keyCode, count);\n }\n return index;\n}\n/** @hidden\n * @param {HTMLElement} popup - Specifies the popup element.\n * @returns {void}\n */\nexport function setBlankIconStyle(popup, blankIcon) {\n var blankIconList = [].slice.call(popup.getElementsByClassName('e-blank-icon'));\n if (blankIcon) {\n var menuItem = [].slice.call(popup.getElementsByClassName('e-item'));\n menuItem.forEach(function (li) {\n if (li.style.paddingLeft || li.style.paddingRight) {\n li.removeAttribute('style');\n }\n });\n }\n if (!blankIconList.length) {\n return;\n }\n var iconLi = popup.querySelector('.e-item:not(.e-blank-icon):not(.e-separator)');\n if (isNullOrUndefined(iconLi)) {\n return;\n }\n if (iconLi.classList.contains('e-url')) {\n iconLi = iconLi.querySelector('.e-menu-url');\n }\n var icon = iconLi.querySelector('.e-menu-icon');\n var cssProp;\n var enableRtl = popup.classList.contains('e-rtl');\n if (enableRtl) {\n cssProp = { padding: 'paddingRight', margin: 'marginLeft' };\n }\n else {\n cssProp = { padding: 'paddingLeft', margin: 'marginRight' };\n }\n /* eslint-disable */\n var size = parseInt(getComputedStyle(icon).fontSize, 10) + parseInt((enableRtl ? getComputedStyle(icon)[cssProp.margin] : getComputedStyle(icon)[cssProp.margin]), 10)\n + parseInt(getComputedStyle(iconLi).paddingLeft, 10) + \"px\";\n blankIconList.forEach(function (li) {\n if (li.classList.contains('e-url')) {\n li.querySelector('.e-menu-url').style[cssProp.padding] = size;\n }\n else {\n li.style[cssProp.padding] = size;\n }\n });\n /* eslint-enable */\n}\n/**\n * Defines the items of Split Button/DropDownButton.\n */\nvar Item = /** @class */ (function (_super) {\n __extends(Item, _super);\n function Item() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Item.prototype, \"iconCss\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"id\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"separator\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"text\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"url\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"disabled\", void 0);\n return Item;\n}(ChildProperty));\nexport { Item };\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 { Collection, Event, NotifyPropertyChanges, detach, Property, EventHandler, isRippleEnabled } from '@syncfusion/ej2-base';\nimport { addClass, getUniqueID, rippleEffect, getComponent } from '@syncfusion/ej2-base';\nimport { attributes, Component, closest, select, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { classList, removeClass } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { upDownKeyHandler } from './../common/common';\nimport { getModel, Item, setBlankIconStyle } from './../common/common';\nvar classNames = {\n DISABLED: 'e-disabled',\n FOCUS: 'e-focused',\n ICON: 'e-menu-icon',\n ITEM: 'e-item',\n POPUP: 'e-dropdown-popup',\n RTL: 'e-rtl',\n SEPARATOR: 'e-separator',\n VERTICAL: 'e-vertical'\n};\n/**\n * DropDownButton component is used to toggle contextual overlays for displaying list of action items.\n * It can contain both text and images.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar DropDownButton = /** @class */ (function (_super) {\n __extends(DropDownButton, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {DropDownButtonModel} options - Specifies dropdown button model\n * @param {string|HTMLButtonElement} element - Specifies element\n * @hidden\n */\n function DropDownButton(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isPopupCreated = true;\n return _this;\n }\n DropDownButton.prototype.preRender = function () {\n /** */\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist data\n */\n DropDownButton.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * To open/close DropDownButton popup based on current state of the DropDownButton.\n *\n * @returns {void}\n */\n DropDownButton.prototype.toggle = function () {\n if (this.canOpen()) {\n this.openPopUp();\n }\n else {\n this.closePopup();\n }\n };\n /**\n * Initialize the Component rendering\n *\n * @returns {void}\n * @private\n */\n DropDownButton.prototype.render = function () {\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.renderComplete();\n };\n /**\n * Adds a new item to the menu. By default, new item appends to the list as the last item,\n * but you can insert based on the text parameter.\n *\n * @param { ItemModel[] } items - Specifies an array of JSON data.\n * @param { string } text - Specifies the text to insert the newly added item in the menu.\n * @returns {void}.\n */\n DropDownButton.prototype.addItems = function (items, text) {\n var newItem;\n var idx = this.items.length;\n for (var j = 0, len = this.items.length; j < len; j++) {\n if (text === this.items[j].text) {\n idx = j;\n break;\n }\n }\n for (var i = items.length - 1; i >= 0; i--) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n newItem = new Item(this, 'items', items[i], true);\n this.items.splice(idx, 0, newItem);\n }\n if (!this.canOpen()) {\n this.createItems();\n }\n };\n /**\n * Removes the items from the menu.\n *\n * @param { string[] } items - Specifies an array of string to remove the items.\n * @param { string } isUniqueId - Set `true` if specified items is a collection of unique id.\n * @returns {void}.\n */\n DropDownButton.prototype.removeItems = function (items, isUniqueId) {\n var refresh = false;\n for (var i = 0, len = items.length; i < len; i++) {\n for (var j = 0, len_1 = this.items.length; j < len_1; j++) {\n if (items[i] === (isUniqueId ? this.items[j].id : this.items[j].text)) {\n this.items.splice(j, 1);\n refresh = true;\n break;\n }\n }\n }\n if (refresh && this.getULElement()) {\n this.createItems();\n }\n };\n DropDownButton.prototype.createPopup = function () {\n var _a;\n var div = this.createElement('div', {\n className: classNames.POPUP,\n id: this.element.id + '-popup'\n });\n document.body.appendChild(div);\n this.dropDown = new Popup(div, {\n relateTo: this.element,\n collision: { X: 'fit', Y: 'flip' },\n position: { X: 'left', Y: 'bottom' },\n targetType: 'relative',\n content: this.target ? this.getTargetElement() : '',\n enableRtl: this.enableRtl\n });\n if (this.dropDown.element.style.position === 'fixed') {\n this.dropDown.refreshPosition(this.element);\n }\n this.dropDown.hide();\n attributes(this.element, (_a = {},\n _a['aria-haspopup'] = this.items.length || this.target ? 'true' : 'false',\n _a['aria-expanded'] = 'false',\n _a['type'] = 'button',\n _a['aria-label'] = this.element.textContent ? this.element.textContent : 'dropdownbutton',\n _a));\n if (this.cssClass) {\n addClass([div], this.cssClass.split(' '));\n }\n this.isPopupCreated = true;\n };\n DropDownButton.prototype.getTargetElement = function () {\n return typeof (this.target) === 'string' ? select(this.target) : this.target;\n };\n DropDownButton.prototype.createItems = function (appendItems) {\n var items = this.items;\n var showIcon = this.hasIcon(this.items, 'iconCss');\n var span;\n var item;\n var li;\n var eventArgs;\n var ul = this.getULElement();\n if (ul) {\n ul.innerHTML = '';\n }\n else {\n ul = this.createElement('ul', {\n attrs: { 'role': 'menu', 'tabindex': '0' }\n });\n }\n for (var i = 0; i < items.length; i++) {\n item = items[i];\n var tempItem = item.text;\n li = this.createElement('li', {\n innerHTML: item.url ? '' : tempItem,\n className: item.separator ? classNames.ITEM + ' ' + classNames.SEPARATOR : classNames.ITEM,\n attrs: item.separator ? { 'role': 'separator', 'tabindex': '-1' } : { 'role': 'menuitem', 'tabindex': '-1', 'aria-label': tempItem },\n id: item.id ? item.id : getUniqueID('e-' + this.getModuleName() + '-item')\n });\n if (this.enableHtmlSanitizer) {\n li.textContent = item.url ? '' : tempItem;\n }\n else {\n li.innerHTML = item.url ? '' : tempItem;\n }\n if (item.url) {\n li.appendChild(this.createAnchor(item));\n li.classList.add('e-url');\n }\n if (item.iconCss) {\n span = this.createElement('span', { className: classNames.ICON + ' ' + item.iconCss });\n if (item.url) {\n li.childNodes[0].appendChild(span);\n }\n else {\n li.insertBefore(span, li.childNodes[0]);\n }\n }\n else {\n if (showIcon && !item.separator) {\n li.classList.add('e-blank-icon');\n }\n }\n if (item.disabled) {\n li.classList.add('e-disabled');\n }\n eventArgs = { item: item, element: li };\n this.trigger('beforeItemRender', eventArgs);\n ul.appendChild(li);\n }\n if (appendItems) {\n this.getPopUpElement().appendChild(ul);\n }\n if (showIcon) {\n setBlankIconStyle(this.getPopUpElement());\n }\n };\n DropDownButton.prototype.hasIcon = function (items, field) {\n for (var i = 0, len = items.length; i < len; i++) {\n if (items[i][\"\" + field]) {\n return true;\n }\n }\n return false;\n };\n DropDownButton.prototype.createAnchor = function (item) {\n var tempItem = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(item.text) : item.text;\n return this.createElement('a', { className: 'e-menu-text e-menu-url', innerHTML: tempItem, attrs: { 'href': item.url } });\n };\n DropDownButton.prototype.initialize = function () {\n this.button = new Button({\n iconCss: this.iconCss, iconPosition: this.iconPosition, cssClass: this.cssClass, content: this.content,\n disabled: this.disabled, enableRtl: this.enableRtl, enablePersistence: this.enablePersistence\n });\n this.button.createElement = this.createElement;\n this.button.appendTo(this.element);\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n this.appendArrowSpan();\n this.setActiveElem([this.element]);\n if ((this.target && !this.isColorPicker()) || !this.createPopupOnClick) {\n this.createPopup();\n }\n else {\n this.isPopupCreated = false;\n }\n };\n DropDownButton.prototype.isColorPicker = function () {\n if (!this.element) {\n return false;\n }\n var prevElem = this.element.previousSibling;\n if (prevElem && prevElem.classList && prevElem.classList.contains('e-split-colorpicker')) {\n return true;\n }\n return false;\n };\n DropDownButton.prototype.appendArrowSpan = function () {\n this.element.appendChild(this.createElement('span', {\n className: 'e-btn-icon e-icons ' + 'e-icon-' + (this.cssClass.indexOf(classNames.VERTICAL) > -1\n ? 'bottom' : 'right') + ' e-caret'\n }));\n };\n DropDownButton.prototype.setActiveElem = function (elem) {\n this.activeElem = elem;\n };\n /**\n * Get component name.\n *\n * @returns {string} - Module Name\n * @private\n */\n DropDownButton.prototype.getModuleName = function () {\n return 'dropdown-btn';\n };\n DropDownButton.prototype.canOpen = function () {\n var val = false;\n if (this.isPopupCreated) {\n val = this.getPopUpElement().classList.contains('e-popup-close');\n }\n return val;\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n DropDownButton.prototype.destroy = function () {\n var _this = this;\n _super.prototype.destroy.call(this);\n if (this.getModuleName() === 'dropdown-btn') {\n var classList_1;\n if (this.element.querySelector('span.e-caret')) {\n detach(this.element.querySelector('span.e-caret'));\n }\n if (this.cssClass) {\n classList_1 = this.cssClass.split(' ');\n }\n this.button.destroy();\n if (classList_1) {\n removeClass([this.element], classList_1);\n }\n removeClass(this.activeElem, ['e-active']);\n var attrList = this.element.getAttribute('class') ? ['aria-haspopup', 'aria-expanded', 'aria-owns', 'type']\n : ['aria-haspopup', 'aria-expanded', 'aria-owns', 'type', 'class'];\n attrList.forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n this.popupUnWireEvents();\n this.destroyPopup();\n this.isPopupCreated = false;\n if (!this.disabled) {\n this.unWireEvents();\n }\n }\n };\n DropDownButton.prototype.destroyPopup = function () {\n if (this.isPopupCreated) {\n this.dropDown.destroy();\n if (this.getPopUpElement()) {\n var popupEle = document.getElementById(this.getPopUpElement().id);\n if (popupEle) {\n removeClass([popupEle], ['e-popup-open', 'e-popup-close']);\n detach(popupEle);\n }\n }\n EventHandler.remove(this.getPopUpElement(), 'click', this.clickHandler);\n EventHandler.remove(this.getPopUpElement(), 'keydown', this.keyBoardHandler);\n if (this.isPopupCreated) {\n this.dropDown = undefined;\n }\n }\n this.isPopupCreated = false;\n };\n DropDownButton.prototype.getPopUpElement = function () {\n var val = null;\n if (this.dropDown) {\n val = this.dropDown.element;\n }\n return val;\n };\n DropDownButton.prototype.getULElement = function () {\n var val = null;\n if (this.getPopUpElement()) {\n val = this.getPopUpElement().children[0];\n }\n return val;\n };\n DropDownButton.prototype.wireEvents = function () {\n this.delegateMousedownHandler = this.mousedownHandler.bind(this);\n if (!this.createPopupOnClick) {\n EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);\n }\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyBoardHandler, this);\n };\n DropDownButton.prototype.popupWireEvents = function () {\n var popupElement = this.getPopUpElement();\n if (this.createPopupOnClick) {\n EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);\n }\n if (popupElement) {\n EventHandler.add(popupElement, 'click', this.clickHandler, this);\n EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);\n if (this.closeActionEvents) {\n EventHandler.add(popupElement, this.closeActionEvents, this.focusoutHandler, this);\n }\n }\n this.rippleFn = rippleEffect(popupElement, { selector: '.' + classNames.ITEM });\n };\n DropDownButton.prototype.popupUnWireEvents = function () {\n var popupElement = this.getPopUpElement();\n if (this.createPopupOnClick) {\n EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);\n }\n if (popupElement && popupElement.parentElement) {\n EventHandler.remove(popupElement, 'click', this.clickHandler);\n EventHandler.remove(popupElement, 'keydown', this.keyBoardHandler);\n if (this.closeActionEvents) {\n EventHandler.remove(popupElement, this.closeActionEvents, this.focusoutHandler);\n }\n }\n if (isRippleEnabled && this.rippleFn) {\n this.rippleFn();\n }\n };\n /**\n * Handles the keyboard interactions.\n *\n * @param {KeyboardEventArgs} e - Specifies keyboard event args.\n * @returns {void}\n * @hidden\n */\n DropDownButton.prototype.keyBoardHandler = function (e) {\n if (e.target === this.element && (e.keyCode === 9 || (!e.altKey && e.keyCode === 40) || e.keyCode === 38)) {\n return;\n }\n switch (e.keyCode) {\n case 38:\n case 40:\n if (e.altKey && (e.keyCode === 38 || e.keyCode === 40)) {\n this.keyEventHandler(e);\n }\n else {\n this.upDownKeyHandler(e);\n }\n break;\n case 9:\n case 13:\n case 27:\n case 32:\n this.keyEventHandler(e);\n break;\n }\n };\n DropDownButton.prototype.upDownKeyHandler = function (e) {\n if (this.target && (e.keyCode === 38 || e.keyCode === 40)) {\n return;\n }\n e.preventDefault();\n upDownKeyHandler(this.getULElement(), e.keyCode);\n };\n DropDownButton.prototype.keyEventHandler = function (e) {\n if (this.target && (e.keyCode === 13 || e.keyCode === 9)) {\n return;\n }\n if (e.target && e.target.className.indexOf('e-edit-template') > -1 && e.keyCode === 32) {\n return;\n }\n if (e.keyCode !== 9) {\n e.preventDefault();\n }\n if (e.keyCode === 27 || e.keyCode === 38 || e.keyCode === 9) {\n if (!this.canOpen()) {\n this.closePopup(e, this.element);\n }\n }\n else {\n this.clickHandler(e);\n }\n };\n DropDownButton.prototype.getLI = function (elem) {\n return elem.tagName === 'LI' ? elem : closest(elem, 'li');\n };\n DropDownButton.prototype.mousedownHandler = function (e) {\n var trgt = e.target;\n if (this.dropDown && !this.canOpen() && !(closest(trgt, '[id=\"' + this.getPopUpElement().id + '\"]')\n || closest(trgt, '[id=\"' + this.element.id + '\"]'))) {\n this.closePopup(e);\n }\n };\n DropDownButton.prototype.focusoutHandler = function (e) {\n if (this.isPopupCreated && !this.canOpen()) {\n var liTarget = e.relatedTarget;\n if (liTarget && liTarget.className.indexOf('e-item') > -1) {\n var li = this.getLI(liTarget);\n if (li) {\n var liIdx = Array.prototype.indexOf.call(this.getULElement().children, li);\n var item = this.items[liIdx];\n if (item) {\n var selectEventArgs = { element: li, item: item };\n this.trigger('select', selectEventArgs);\n }\n }\n }\n this.closePopup(e);\n }\n };\n DropDownButton.prototype.clickHandler = function (e) {\n var trgt = e.target;\n if (closest(trgt, '[id=\"' + this.element.id + '\"]')) {\n if (!this.createPopupOnClick || (this.target && !this.isColorPicker())) {\n if (this.getPopUpElement().classList.contains('e-popup-close')) {\n this.openPopUp(e);\n }\n else {\n this.closePopup(e);\n }\n }\n else if (this.isPopupCreated) {\n this.closePopup(e, this.activeElem[0]);\n }\n else {\n this.createPopup();\n this.openPopUp(e);\n }\n }\n else {\n if (closest(trgt, '[id=\"' + this.getPopUpElement().id + '\"]')) {\n var eventArgs = void 0;\n var liIdx = void 0;\n var item = void 0;\n var li = this.getLI(trgt);\n if (li) {\n liIdx = Array.prototype.indexOf.call(this.getULElement().children, li);\n item = this.items[liIdx];\n if (item) {\n eventArgs = { element: li, item: item };\n this.trigger('select', eventArgs);\n }\n this.closePopup(e, this.activeElem[0]);\n }\n }\n }\n };\n DropDownButton.prototype.openPopUp = function (e) {\n var _this = this;\n if (e === void 0) { e = null; }\n var isReact = false;\n var popupElem = this.getPopUpElement();\n if (!this.target) {\n this.createItems(true);\n }\n else {\n if (this.activeElem.length > 1) {\n var splitButton = getComponent(this.activeElem[0], 'split-btn');\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (splitButton.isReact && popupElem.childNodes.length < 1) {\n isReact = true;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n splitButton.appendReactElement(this.getTargetElement(), this.getPopUpElement());\n this.renderReactTemplates();\n }\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact && popupElem.childNodes.length < 1) {\n isReact = true;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.appendReactElement(this.getTargetElement(), this.getPopUpElement());\n this.renderReactTemplates();\n }\n }\n }\n var ul = this.getULElement();\n this.popupWireEvents();\n var beforeOpenArgs = { element: ul, items: this.items, event: e, cancel: false };\n this.trigger('beforeOpen', beforeOpenArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n var ul_1 = _this.getULElement();\n _this.dropDown.show(null, _this.element);\n addClass([_this.element], 'e-active');\n _this.element.setAttribute('aria-expanded', 'true');\n _this.element.setAttribute('aria-owns', _this.getPopUpElement().id);\n if (ul_1) {\n ul_1.focus();\n }\n var openArgs = { element: ul_1, items: _this.items };\n _this.trigger('open', openArgs);\n }\n });\n };\n DropDownButton.prototype.closePopup = function (e, focusEle) {\n var _this = this;\n if (e === void 0) { e = null; }\n var ul = this.getULElement();\n var beforeCloseArgs = { element: ul, items: this.items, event: e, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n var popupElement = _this.getPopUpElement();\n if (popupElement) {\n EventHandler.remove(popupElement, 'keydown', _this.keyBoardHandler);\n }\n _this.popupUnWireEvents();\n var ul_2 = _this.getULElement();\n var selectedLi = void 0;\n if (ul_2) {\n selectedLi = ul_2.querySelector('.e-selected');\n }\n if (selectedLi) {\n selectedLi.classList.remove('e-selected');\n }\n _this.dropDown.hide();\n removeClass(_this.activeElem, 'e-active');\n _this.element.setAttribute('aria-expanded', 'false');\n _this.element.removeAttribute('aria-owns');\n if (focusEle) {\n focusEle.focus();\n }\n var closeArgs = { element: ul_2, items: _this.items };\n _this.trigger('close', closeArgs);\n if (!_this.target && ul_2) {\n detach(ul_2);\n }\n if (!_this.target || _this.isColorPicker()) {\n if (_this.createPopupOnClick) {\n _this.destroyPopup();\n }\n }\n if (_this.target) {\n _this.isPopupCreated = _this.createPopupOnClick ? false : true;\n }\n }\n else {\n if (ul) {\n ul.focus();\n }\n }\n });\n };\n DropDownButton.prototype.unWireEvents = function () {\n if (!this.createPopupOnClick) {\n EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);\n }\n EventHandler.remove(this.element, 'click', this.clickHandler);\n EventHandler.remove(this.element, 'keydown', this.keyBoardHandler);\n if (this.isPopupCreated) {\n EventHandler.remove(this.getPopUpElement(), 'click', this.clickHandler);\n EventHandler.remove(this.getPopUpElement(), 'keydown', this.keyBoardHandler);\n }\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {DropDownButtonModel} newProp - Specifies new properties\n * @param {DropDownButtonModel} oldProp - Specifies old properties\n * @returns {void}\n * @private\n */\n DropDownButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var btnModel = ['content', 'cssClass', 'iconCss', 'iconPosition', 'disabled', 'enableRtl'];\n this.button.setProperties(getModel(newProp, btnModel));\n var popupElement;\n if (this.isPopupCreated) {\n popupElement = this.getPopUpElement();\n this.dropDown.setProperties(getModel(newProp, ['enableRtl']));\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'content':\n if (!this.element.querySelector('span.e-caret')) {\n this.appendArrowSpan();\n }\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.unWireEvents();\n if (this.isPopupCreated && !this.canOpen()) {\n this.closePopup();\n }\n }\n else {\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (newProp.cssClass.indexOf(classNames.VERTICAL) > -1 || oldProp.cssClass.indexOf(classNames.VERTICAL) > -1) {\n if (!this.element.querySelector('span.e-caret')) {\n this.appendArrowSpan();\n }\n var arrowSpan = this.element.querySelector('span.e-caret');\n newProp.cssClass.indexOf(classNames.VERTICAL) > -1 ? classList(arrowSpan, ['e-icon-bottom'], ['e-icon-right'])\n : classList(arrowSpan, ['e-icon-right'], ['e-icon-bottom']);\n }\n if (this.isPopupCreated) {\n if (oldProp.cssClass) {\n removeClass([popupElement], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([popupElement], newProp.cssClass.split(' '));\n }\n }\n break;\n case 'target':\n this.dropDown.content = this.getTargetElement();\n this.dropDown.dataBind();\n break;\n case 'items':\n if (this.isPopupCreated && this.getULElement()) {\n this.createItems();\n }\n break;\n case 'createPopupOnClick':\n if (newProp.createPopupOnClick) {\n this.destroyPopup();\n }\n else {\n this.createPopup();\n }\n break;\n }\n }\n };\n /**\n * Sets the focus to DropDownButton\n * its native method\n *\n * @public\n * @returns {void}\n */\n DropDownButton.prototype.focusIn = function () {\n this.element.focus();\n };\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"content\", void 0);\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], DropDownButton.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"iconCss\", void 0);\n __decorate([\n Property('Left')\n ], DropDownButton.prototype, \"iconPosition\", void 0);\n __decorate([\n Property(false)\n ], DropDownButton.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Collection([], Item)\n ], DropDownButton.prototype, \"items\", void 0);\n __decorate([\n Property(false)\n ], DropDownButton.prototype, \"createPopupOnClick\", void 0);\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"target\", void 0);\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"closeActionEvents\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"beforeItemRender\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"created\", void 0);\n DropDownButton = __decorate([\n NotifyPropertyChanges\n ], DropDownButton);\n return DropDownButton;\n}(Component));\nexport { DropDownButton };\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 { Event, remove, addClass, removeClass, detach, getValue, setValue } from '@syncfusion/ej2-base';\nimport { EventHandler, Collection, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';\nimport { attributes, getUniqueID, getInstance, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { getModel, Item } from './../common/common';\nimport { DropDownButton } from '../drop-down-button/drop-down-button';\nvar RTL = 'e-rtl';\nvar TAGNAME = 'EJS-SPLITBUTTON';\n/**\n * SplitButton component has primary and secondary button. Primary button is used to select\n * default action and secondary button is used to toggle contextual overlays for displaying list of\n * action items. It can contain both text and images.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar SplitButton = /** @class */ (function (_super) {\n __extends(SplitButton, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {SplitButtonModel} options - Specifies the splitbutton model\n * @param {string|HTMLButtonElement} element - Specifies the element\n * @hidden\n */\n function SplitButton(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize Angular support.\n *\n * @private\n * @returns {void}\n */\n SplitButton.prototype.preRender = function () {\n var ele = this.element;\n if (ele.tagName === TAGNAME) {\n var ejInstance = getValue('ej2_instances', ele);\n var btn = this.createElement('button', { attrs: { 'type': 'button' } });\n var wrapper = this.createElement(TAGNAME, { className: 'e-' + this.getModuleName() + '-wrapper' });\n for (var idx = 0, len = ele.attributes.length; idx < len; idx++) {\n btn.setAttribute(ele.attributes[idx].nodeName, ele.attributes[idx].nodeValue);\n }\n ele.parentNode.insertBefore(wrapper, ele);\n detach(ele);\n ele = btn;\n wrapper.appendChild(ele);\n setValue('ej2_instances', ejInstance, ele);\n this.wrapper = wrapper;\n this.element = ele;\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n };\n /**\n * Initialize the Component rendering.\n *\n * @returns {void}\n * @private\n */\n SplitButton.prototype.render = function () {\n this.initWrapper();\n this.createPrimaryButton();\n this.renderControl();\n };\n SplitButton.prototype.renderControl = function () {\n this.createSecondaryButton();\n this.setActiveElem([this.element, this.secondaryBtnObj.element]);\n this.setAria();\n this.wireEvents();\n this.renderComplete();\n };\n /**\n * Adds a new item to the menu. By default, new item appends to the list as the last item,\n * but you can insert based on the text parameter.\n *\n * @param { ItemModel[] } items - Specifies an array of JSON data.\n * @param { string } text - Specifies the text to insert the newly added item in the menu.\n * @returns {void}.\n */\n SplitButton.prototype.addItems = function (items, text) {\n _super.prototype.addItems.call(this, items, text);\n this.secondaryBtnObj.items = this.items;\n };\n /**\n * Removes the items from the menu.\n *\n * @param { string[] } items - Specifies an array of string to remove the items.\n * @param { string } isUniqueId - Set `true` if specified items is a collection of unique id.\n * @returns {void}.\n */\n SplitButton.prototype.removeItems = function (items, isUniqueId) {\n _super.prototype.removeItems.call(this, items, isUniqueId);\n this.secondaryBtnObj.items = this.items;\n };\n SplitButton.prototype.initWrapper = function () {\n if (!this.wrapper) {\n this.wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });\n this.element.parentNode.insertBefore(this.wrapper, this.element);\n }\n this.element.classList.remove('e-' + this.getModuleName());\n if (this.enableRtl) {\n this.wrapper.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([this.wrapper], this.cssClass.split(' '));\n }\n };\n SplitButton.prototype.createPrimaryButton = function () {\n var btnModel = {\n cssClass: this.cssClass,\n enableRtl: this.enableRtl,\n iconCss: this.iconCss,\n iconPosition: this.iconPosition,\n content: this.content,\n disabled: this.disabled\n };\n this.primaryBtnObj = new Button(btnModel);\n this.primaryBtnObj.createElement = this.createElement;\n this.primaryBtnObj.appendTo(this.element);\n this.element.classList.add('e-' + this.getModuleName());\n this.element.type = 'button';\n this.wrapper.appendChild(this.element);\n };\n SplitButton.prototype.createSecondaryButton = function () {\n var _this = this;\n var btnElem = this.createElement('button', {\n className: 'e-icon-btn',\n attrs: { 'tabindex': '-1' },\n id: this.element.id + '_dropdownbtn'\n });\n this.wrapper.appendChild(btnElem);\n var dropDownBtnModel = {\n cssClass: this.cssClass,\n disabled: this.disabled,\n enableRtl: this.enableRtl,\n items: this.items,\n target: this.target,\n createPopupOnClick: this.createPopupOnClick\n };\n dropDownBtnModel.beforeItemRender = function (args) {\n if (_this.createPopupOnClick) {\n _this.secondaryBtnObj.dropDown.relateTo = _this.wrapper;\n _this.dropDown = _this.secondaryBtnObj.dropDown;\n }\n _this.trigger('beforeItemRender', args);\n };\n dropDownBtnModel.open = function (args) {\n _this.trigger('open', args);\n };\n dropDownBtnModel.close = function (args) {\n _this.trigger('close', args);\n };\n dropDownBtnModel.select = function (args) {\n _this.trigger('select', args);\n };\n dropDownBtnModel.beforeOpen = function (args) {\n if (_this.createPopupOnClick && _this.items.length == 0) {\n _this.secondaryBtnObj.dropDown.relateTo = _this.wrapper;\n _this.dropDown = _this.secondaryBtnObj.dropDown;\n }\n var callBackPromise = new Deferred();\n _this.trigger('beforeOpen', args, function (observedArgs) {\n callBackPromise.resolve(observedArgs);\n });\n return callBackPromise;\n };\n dropDownBtnModel.beforeClose = function (args) {\n var callBackPromise = new Deferred();\n _this.trigger('beforeClose', args, function (observedArgs) {\n callBackPromise.resolve(observedArgs);\n });\n return callBackPromise;\n };\n this.secondaryBtnObj = new DropDownButton(dropDownBtnModel);\n this.secondaryBtnObj.createElement = this.createElement;\n this.secondaryBtnObj.appendTo(btnElem);\n if (!this.createPopupOnClick) {\n this.secondaryBtnObj.dropDown.relateTo = this.wrapper;\n this.dropDown = this.secondaryBtnObj.dropDown;\n }\n this.secondaryBtnObj.activeElem = [this.element, this.secondaryBtnObj.element];\n this.secondaryBtnObj.element.querySelector('.e-btn-icon').classList.remove('e-icon-right');\n };\n SplitButton.prototype.setAria = function () {\n attributes(this.element, {\n 'aria-expanded': 'false', 'aria-haspopup': 'true',\n 'aria-label': this.element.textContent + ' splitbutton', 'aria-owns': this.element.id + '_dropdownbtn-popup'\n });\n };\n /**\n * Get component name.\n *\n * @returns {string} - Module Name\n * @private\n */\n SplitButton.prototype.getModuleName = function () {\n return 'split-btn';\n };\n /**\n * To open/close SplitButton popup based on current state of the SplitButton.\n *\n * @returns {void}\n */\n SplitButton.prototype.toggle = function () {\n this.secondaryBtnObj.toggle();\n };\n SplitButton.prototype.destroy = function () {\n var _this = this;\n var classList = [RTL];\n if (this.cssClass) {\n classList = classList.concat(this.cssClass.split(' '));\n }\n if (this.element) {\n var element = document.getElementById(this.element.id);\n if (element && element.parentElement === this.wrapper) {\n if (this.wrapper.tagName === TAGNAME) {\n this.wrapper.innerHTML = '';\n removeClass([this.wrapper], ['e-rtl', 'e-' + this.getModuleName() + '-wrapper']);\n removeClass([this.wrapper], this.cssClass.split(' '));\n }\n else {\n removeClass([this.element], classList);\n ['aria-label', 'aria-haspopup', 'aria-expanded', 'aria-owns', 'type'].forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n this.wrapper.parentNode.insertBefore(this.element, this.wrapper);\n remove(this.wrapper);\n }\n this.unWireEvents();\n }\n }\n this.primaryBtnObj.destroy();\n this.secondaryBtnObj.destroy();\n _super.prototype.destroy.call(this);\n if (!this.element.getAttribute('class')) {\n this.element.removeAttribute('class');\n }\n };\n SplitButton.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.primaryBtnClickHandler, this);\n new KeyboardEvents(this.element, {\n keyAction: this.btnKeyBoardHandler.bind(this),\n keyConfigs: {\n altdownarrow: 'alt+downarrow'\n }\n });\n };\n SplitButton.prototype.unWireEvents = function () {\n EventHandler.remove(this.element, 'click', this.primaryBtnClickHandler);\n getInstance(this.element, KeyboardEvents).destroy();\n };\n SplitButton.prototype.primaryBtnClickHandler = function () {\n this.trigger('click', { element: this.element });\n };\n SplitButton.prototype.btnKeyBoardHandler = function (e) {\n switch (e.action) {\n case 'altdownarrow':\n this.clickHandler(e);\n break;\n }\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {SplitButtonModel} newProp - Specifies new properties\n * @param {SplitButtonModel} oldProp - Specifies old properties\n * @returns {void}\n */\n SplitButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var model = ['content', 'iconCss', 'iconPosition', 'cssClass', 'disabled', 'enableRtl'];\n this.primaryBtnObj.setProperties(getModel(newProp, model));\n model = ['beforeOpen', 'beforeItemRender', 'select', 'open',\n 'close', 'cssClass', 'disabled', 'enableRtl', 'createPopupOnClick'];\n if (Object.keys(newProp).indexOf('items') > -1) {\n this.secondaryBtnObj.items = newProp.items;\n this.secondaryBtnObj.dataBind();\n }\n this.secondaryBtnObj.setProperties(getModel(newProp, model));\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([this.wrapper], oldProp.cssClass.split(' '));\n }\n addClass([this.wrapper], newProp.cssClass.split(' '));\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n addClass([this.wrapper], RTL);\n }\n else {\n removeClass([this.wrapper], RTL);\n }\n break;\n }\n }\n };\n /**\n * Sets the focus to SplitButton\n * its native method\n *\n * @public\n * @returns {void}\n */\n SplitButton.prototype.focusIn = function () {\n this.element.focus();\n };\n __decorate([\n Property('')\n ], SplitButton.prototype, \"content\", void 0);\n __decorate([\n Property('')\n ], SplitButton.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], SplitButton.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], SplitButton.prototype, \"iconCss\", void 0);\n __decorate([\n Property('Left')\n ], SplitButton.prototype, \"iconPosition\", void 0);\n __decorate([\n Property(false)\n ], SplitButton.prototype, \"createPopupOnClick\", void 0);\n __decorate([\n Collection([], Item)\n ], SplitButton.prototype, \"items\", void 0);\n __decorate([\n Property('')\n ], SplitButton.prototype, \"target\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"beforeItemRender\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"click\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"created\", void 0);\n SplitButton = __decorate([\n NotifyPropertyChanges\n ], SplitButton);\n return SplitButton;\n}(DropDownButton));\nexport { SplitButton };\n/**\n * Deferred is used to handle asynchronous operation.\n */\nvar Deferred = /** @class */ (function () {\n function Deferred() {\n var _this = this;\n /**\n * Promise is an object that represents a value that may not be available yet, but will be resolved at some point in the future.\n */\n this.promise = new Promise(function (resolve, reject) {\n _this.resolve = resolve;\n _this.reject = reject;\n });\n /**\n * Defines the callback function triggers when the Deferred object is rejected.\n */\n this.catch = this.promise.catch.bind(this.promise);\n /**\n * Defines the callback function triggers when the Deferred object is resolved.\n */\n this.then = this.promise.then.bind(this.promise);\n }\n return Deferred;\n}());\nexport { Deferred };\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, Property, ChildProperty, Event, append, compile } from '@syncfusion/ej2-base';\nimport { EventHandler, Touch, Browser, Animation as PopupAnimation } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, getUniqueID, formatUnit, select, selectAll } from '@syncfusion/ej2-base';\nimport { attributes, closest, removeClass, addClass, remove } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, Complex, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { Popup } from '../popup/popup';\nimport { calculatePosition } from '../common/position';\nimport { isCollide, fit } from '../common/collision';\nvar TOUCHEND_HIDE_DELAY = 1500;\nvar TAPHOLD_THRESHOLD = 500;\nvar SHOW_POINTER_TIP_GAP = 0;\nvar HIDE_POINTER_TIP_GAP = 8;\nvar MOUSE_TRAIL_GAP = 2;\nvar POINTER_ADJUST = 2;\nvar ROOT = 'e-tooltip';\nvar RTL = 'e-rtl';\nvar DEVICE = 'e-bigger';\nvar ICON = 'e-icons';\nvar CLOSE = 'e-tooltip-close';\nvar TOOLTIP_WRAP = 'e-tooltip-wrap';\nvar CONTENT = 'e-tip-content';\nvar ARROW_TIP = 'e-arrow-tip';\nvar ARROW_TIP_OUTER = 'e-arrow-tip-outer';\nvar ARROW_TIP_INNER = 'e-arrow-tip-inner';\nvar TIP_BOTTOM = 'e-tip-bottom';\nvar TIP_TOP = 'e-tip-top';\nvar TIP_LEFT = 'e-tip-left';\nvar TIP_RIGHT = 'e-tip-right';\nvar POPUP_ROOT = 'e-popup';\nvar POPUP_OPEN = 'e-popup-open';\nvar POPUP_CLOSE = 'e-popup-close';\nvar POPUP_LIB = 'e-lib';\nvar HIDE_POPUP = 'e-hidden';\nvar POPUP_CONTAINER = 'e-tooltip-popup-container';\nvar Animation = /** @class */ (function (_super) {\n __extends(Animation, _super);\n function Animation() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property({ effect: 'FadeIn', duration: 150, delay: 0 })\n ], Animation.prototype, \"open\", void 0);\n __decorate([\n Property({ effect: 'FadeOut', duration: 150, delay: 0 })\n ], Animation.prototype, \"close\", void 0);\n return Animation;\n}(ChildProperty));\nexport { Animation };\n/**\n * Represents the Tooltip component that displays a piece of information about the target element on mouse hover.\n * ```html\n *
Show Tooltip
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Tooltip = /** @class */ (function (_super) {\n __extends(Tooltip, _super);\n /* eslint-enable */\n /**\n * Constructor for creating the Tooltip Component\n *\n * @param {TooltipModel} options - specifies the options for the constructor\n * @param {string| HTMLElement} element - specifies the element for the constructor\n *\n */\n function Tooltip(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.mouseMoveEvent = null;\n _this.mouseMoveTarget = null;\n _this.containerElement = null;\n _this.isBodyContainer = true;\n return _this;\n }\n Tooltip.prototype.initialize = function () {\n this.formatPosition();\n addClass([this.element], ROOT);\n this.element.setAttribute('tabindex', '0');\n };\n Tooltip.prototype.formatPosition = function () {\n var _a, _b;\n if (this.position.indexOf('Top') === 0 || this.position.indexOf('Bottom') === 0) {\n _a = this.position.split(/(?=[A-Z])/), this.tooltipPositionY = _a[0], this.tooltipPositionX = _a[1];\n }\n else {\n _b = this.position.split(/(?=[A-Z])/), this.tooltipPositionX = _b[0], this.tooltipPositionY = _b[1];\n }\n };\n Tooltip.prototype.renderArrow = function () {\n this.setTipClass(this.position);\n var tip = this.createElement('div', { className: ARROW_TIP + ' ' + this.tipClass });\n tip.appendChild(this.createElement('div', { className: ARROW_TIP_OUTER + ' ' + this.tipClass }));\n tip.appendChild(this.createElement('div', { className: ARROW_TIP_INNER + ' ' + this.tipClass }));\n this.tooltipEle.appendChild(tip);\n };\n Tooltip.prototype.setTipClass = function (position) {\n if (position.indexOf('Right') === 0) {\n this.tipClass = TIP_LEFT;\n }\n else if (position.indexOf('Bottom') === 0) {\n this.tipClass = TIP_TOP;\n }\n else if (position.indexOf('Left') === 0) {\n this.tipClass = TIP_RIGHT;\n }\n else {\n this.tipClass = TIP_BOTTOM;\n }\n };\n Tooltip.prototype.renderPopup = function (target) {\n var elePos = this.mouseTrail ? { top: 0, left: 0 } : this.getTooltipPosition(target);\n this.tooltipEle.classList.remove(POPUP_LIB);\n this.popupObj = new Popup(this.tooltipEle, {\n height: this.height,\n width: this.width,\n position: { X: elePos.left, Y: elePos.top },\n enableRtl: this.enableRtl,\n open: this.openPopupHandler.bind(this),\n close: this.closePopupHandler.bind(this)\n });\n };\n Tooltip.prototype.getTooltipPosition = function (target) {\n this.tooltipEle.style.display = 'block';\n var pos = calculatePosition(target, this.tooltipPositionX, this.tooltipPositionY, !this.isBodyContainer, this.isBodyContainer ? null : this.containerElement.getBoundingClientRect());\n var offsetPos = this.calculateTooltipOffset(this.position);\n var collisionPosition = this.calculateElementPosition(pos, offsetPos);\n var collisionLeft = collisionPosition[0];\n var collisionTop = collisionPosition[1];\n var elePos = this.collisionFlipFit(target, collisionLeft, collisionTop);\n this.tooltipEle.style.display = '';\n return elePos;\n };\n Tooltip.prototype.windowResize = function () {\n this.reposition(this.findTarget());\n };\n Tooltip.prototype.reposition = function (target) {\n if (this.popupObj && target) {\n var elePos = this.getTooltipPosition(target);\n this.popupObj.position = { X: elePos.left, Y: elePos.top };\n this.popupObj.dataBind();\n }\n };\n Tooltip.prototype.openPopupHandler = function () {\n if (!this.mouseTrail && this.needTemplateReposition()) {\n this.reposition(this.findTarget());\n }\n this.trigger('afterOpen', this.tooltipEventArgs);\n this.tooltipEventArgs = null;\n };\n Tooltip.prototype.closePopupHandler = function () {\n if (this.isReact && !(this.opensOn === \"Click\" && typeof (this.content) === 'function')) {\n this.clearTemplate(['content']);\n }\n this.clear();\n this.trigger('afterClose', this.tooltipEventArgs);\n this.tooltipEventArgs = null;\n };\n Tooltip.prototype.calculateTooltipOffset = function (position) {\n var pos = { top: 0, left: 0 };\n var tooltipEleWidth = this.tooltipEle.offsetWidth;\n var tooltipEleHeight = this.tooltipEle.offsetHeight;\n var arrowEle = select('.' + ARROW_TIP, this.tooltipEle);\n var tipWidth = arrowEle ? arrowEle.offsetWidth : 0;\n var tipHeight = arrowEle ? arrowEle.offsetHeight : 0;\n var tipAdjust = (this.showTipPointer ? SHOW_POINTER_TIP_GAP : HIDE_POINTER_TIP_GAP);\n var tipHeightAdjust = (tipHeight / 2) + POINTER_ADJUST + (this.tooltipEle.offsetHeight - this.tooltipEle.clientHeight);\n var tipWidthAdjust = (tipWidth / 2) + POINTER_ADJUST + (this.tooltipEle.offsetWidth - this.tooltipEle.clientWidth);\n if (this.mouseTrail) {\n tipAdjust += MOUSE_TRAIL_GAP;\n }\n switch (position) {\n case 'RightTop':\n pos.left += tipWidth + tipAdjust;\n pos.top -= tooltipEleHeight - tipHeightAdjust;\n break;\n case 'RightCenter':\n pos.left += tipWidth + tipAdjust;\n pos.top -= (tooltipEleHeight / 2);\n break;\n case 'RightBottom':\n pos.left += tipWidth + tipAdjust;\n pos.top -= (tipHeightAdjust);\n break;\n case 'BottomRight':\n pos.top += (tipHeight + tipAdjust);\n pos.left -= (tipWidthAdjust);\n break;\n case 'BottomCenter':\n pos.top += (tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth / 2);\n break;\n case 'BottomLeft':\n pos.top += (tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth - tipWidthAdjust);\n break;\n case 'LeftBottom':\n pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);\n pos.top -= (tipHeightAdjust);\n break;\n case 'LeftCenter':\n pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);\n pos.top -= (tooltipEleHeight / 2);\n break;\n case 'LeftTop':\n pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);\n pos.top -= (tooltipEleHeight - tipHeightAdjust);\n break;\n case 'TopLeft':\n pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth - tipWidthAdjust);\n break;\n case 'TopRight':\n pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);\n pos.left -= (tipWidthAdjust);\n break;\n default:\n pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);\n pos.left -= (tooltipEleWidth / 2);\n break;\n }\n pos.left += this.offsetX;\n pos.top += this.offsetY;\n return pos;\n };\n Tooltip.prototype.updateTipPosition = function (position) {\n var selEle = selectAll('.' + ARROW_TIP + ',.' + ARROW_TIP_OUTER + ',.' + ARROW_TIP_INNER, this.tooltipEle);\n var removeList = [TIP_BOTTOM, TIP_TOP, TIP_LEFT, TIP_RIGHT];\n removeClass(selEle, removeList);\n this.setTipClass(position);\n addClass(selEle, this.tipClass);\n };\n Tooltip.prototype.adjustArrow = function (target, position, tooltipPositionX, tooltipPositionY) {\n if (this.showTipPointer === false) {\n return;\n }\n this.updateTipPosition(position);\n var leftValue;\n var topValue;\n this.tooltipEle.style.display = 'block';\n var tooltipWidth = this.tooltipEle.clientWidth;\n var tooltipHeight = this.tooltipEle.clientHeight;\n var arrowEle = select('.' + ARROW_TIP, this.tooltipEle);\n var arrowInnerELe = select('.' + ARROW_TIP_INNER, this.tooltipEle);\n var tipWidth = arrowEle.offsetWidth;\n var tipHeight = arrowEle.offsetHeight;\n this.tooltipEle.style.display = '';\n if (this.tipClass === TIP_BOTTOM || this.tipClass === TIP_TOP) {\n if (this.tipClass === TIP_BOTTOM) {\n topValue = '99.9%';\n // Arrow icon aligned -2px height from ArrowOuterTip div\n arrowInnerELe.style.top = '-' + (tipHeight - 2) + 'px';\n }\n else {\n topValue = -(tipHeight - 1) + 'px';\n // Arrow icon aligned -6px height from ArrowOuterTip div\n arrowInnerELe.style.top = '-' + (tipHeight - 6) + 'px';\n }\n if (target) {\n var tipPosExclude = tooltipPositionX !== 'Center' || (tooltipWidth > target.offsetWidth) || this.mouseTrail;\n if ((tipPosExclude && tooltipPositionX === 'Left') || (!tipPosExclude && this.tipPointerPosition === 'End')) {\n leftValue = (tooltipWidth - tipWidth - POINTER_ADJUST) + 'px';\n }\n else if ((tipPosExclude && tooltipPositionX === 'Right') || (!tipPosExclude && this.tipPointerPosition === 'Start')) {\n leftValue = POINTER_ADJUST + 'px';\n }\n else if ((tipPosExclude) && (this.tipPointerPosition === 'End' || this.tipPointerPosition === 'Start')) {\n leftValue = (this.tipPointerPosition === 'End') ? ((target.offsetWidth + ((this.tooltipEle.offsetWidth - target.offsetWidth) / 2)) - (tipWidth / 2)) - POINTER_ADJUST + 'px'\n : ((this.tooltipEle.offsetWidth - target.offsetWidth) / 2) - (tipWidth / 2) + POINTER_ADJUST + 'px';\n }\n else {\n leftValue = ((tooltipWidth / 2) - (tipWidth / 2)) + 'px';\n }\n }\n }\n else {\n if (this.tipClass === TIP_RIGHT) {\n leftValue = '99.9%';\n // Arrow icon aligned -2px left from ArrowOuterTip div\n arrowInnerELe.style.left = '-' + (tipWidth - 2) + 'px';\n }\n else {\n leftValue = -(tipWidth - 1) + 'px';\n // Arrow icon aligned -2px from ArrowOuterTip width\n arrowInnerELe.style.left = (-(tipWidth) + (tipWidth - 2)) + 'px';\n }\n var tipPosExclude = tooltipPositionY !== 'Center' || (tooltipHeight > target.offsetHeight) || this.mouseTrail;\n if ((tipPosExclude && tooltipPositionY === 'Top') || (!tipPosExclude && this.tipPointerPosition === 'End')) {\n topValue = (tooltipHeight - tipHeight - POINTER_ADJUST) + 'px';\n }\n else if ((tipPosExclude && tooltipPositionY === 'Bottom') || (!tipPosExclude && this.tipPointerPosition === 'Start')) {\n topValue = POINTER_ADJUST + 'px';\n }\n else {\n topValue = ((tooltipHeight / 2) - (tipHeight / 2)) + 'px';\n }\n }\n arrowEle.style.top = topValue;\n arrowEle.style.left = leftValue;\n };\n Tooltip.prototype.renderContent = function (target) {\n var tooltipContent = select('.' + CONTENT, this.tooltipEle);\n if (this.cssClass) {\n addClass([this.tooltipEle], this.cssClass.split(' '));\n }\n if (target && !isNullOrUndefined(target.getAttribute('title'))) {\n target.setAttribute('data-content', target.getAttribute('title'));\n target.removeAttribute('title');\n }\n if (!isNullOrUndefined(this.content)) {\n tooltipContent.innerHTML = '';\n if (this.content instanceof HTMLElement) {\n tooltipContent.appendChild(this.content);\n }\n else if (typeof this.content === 'string') {\n if (this.enableHtmlSanitizer) {\n this.setProperties({ content: SanitizeHtmlHelper.sanitize(this.content) }, true);\n }\n // eslint-disable-next-line\n var tempFunction = compile(this.content);\n var tempArr = tempFunction({}, this, 'content', this.element.id + 'content', undefined, undefined, tooltipContent);\n if (tempArr) {\n if (this.enableHtmlParse) {\n var nodeList = tempArr.length;\n for (var i = 0; i < nodeList; i++) {\n tooltipContent[append(tempArr, tooltipContent), 'innerHTML'] = this.content;\n }\n }\n else {\n tooltipContent['textContent'] = this.content;\n }\n }\n }\n else {\n // eslint-disable-next-line\n var templateFunction = compile(this.content);\n var tempArr = templateFunction({}, this, 'content', this.element.id + 'content', undefined, undefined, tooltipContent);\n if (tempArr) {\n append(tempArr, tooltipContent);\n }\n this.renderReactTemplates();\n }\n }\n else {\n if (target && !isNullOrUndefined(target.getAttribute('data-content'))) {\n tooltipContent.innerHTML = target.getAttribute('data-content');\n }\n }\n };\n Tooltip.prototype.renderCloseIcon = function () {\n if (!this.isSticky) {\n return;\n }\n var tipClose = this.createElement('div', { className: ICON + ' ' + CLOSE });\n this.tooltipEle.appendChild(tipClose);\n EventHandler.add(tipClose, Browser.touchStartEvent, this.onStickyClose, this);\n };\n Tooltip.prototype.addDescribedBy = function (target, id) {\n var describedby = (target.getAttribute('aria-describedby') || '').split(/\\s+/);\n if (describedby.indexOf(id) < 0) {\n describedby.push(id);\n }\n attributes(target, { 'aria-describedby': describedby.join(' ').trim(), 'data-tooltip-id': id });\n };\n Tooltip.prototype.removeDescribedBy = function (target) {\n var id = target.getAttribute('data-tooltip-id');\n var describedby = (target.getAttribute('aria-describedby') || '').split(/\\s+/);\n var index = describedby.indexOf(id);\n if (index !== -1) {\n describedby.splice(index, 1);\n }\n target.removeAttribute('data-tooltip-id');\n var orgdescribedby = describedby.join(' ').trim();\n if (orgdescribedby) {\n target.setAttribute('aria-describedby', orgdescribedby);\n }\n else {\n target.removeAttribute('aria-describedby');\n }\n };\n Tooltip.prototype.tapHoldHandler = function (evt) {\n clearTimeout(this.autoCloseTimer);\n this.targetHover(evt.originalEvent);\n };\n Tooltip.prototype.touchEndHandler = function (e) {\n var _this = this;\n if (this.isSticky) {\n return;\n }\n // eslint-disable-next-line\n var close = function () {\n _this.close();\n };\n this.autoCloseTimer = setTimeout(close, TOUCHEND_HIDE_DELAY);\n };\n Tooltip.prototype.targetClick = function (e) {\n var target;\n if (this.target) {\n target = closest(e.target, this.target);\n }\n else {\n target = this.element;\n }\n if (isNullOrUndefined(target)) {\n return;\n }\n if (target.getAttribute('data-tooltip-id') === null) {\n this.targetHover(e);\n }\n else if (!this.isSticky) {\n this.hideTooltip(this.animation.close, e, target);\n }\n };\n Tooltip.prototype.targetHover = function (e) {\n var target;\n if (this.target) {\n target = closest(e.target, this.target);\n }\n else {\n target = this.element;\n }\n if (isNullOrUndefined(target) || (target.getAttribute('data-tooltip-id') !== null && this.closeDelay === 0)) {\n return;\n }\n var targetList = [].slice.call(selectAll('[data-tooltip-id= \"' + this.ctrlId + '_content\"]', document));\n for (var _i = 0, targetList_1 = targetList; _i < targetList_1.length; _i++) {\n var target_1 = targetList_1[_i];\n this.restoreElement(target_1);\n }\n // eslint-disable-next-line security/detect-non-literal-fs-filename -- Safe as no value holds user input\n this.showTooltip(target, this.animation.open, e);\n };\n Tooltip.prototype.mouseMoveBeforeOpen = function (e) {\n this.mouseMoveEvent = e;\n };\n Tooltip.prototype.mouseMoveBeforeRemove = function () {\n if (this.mouseMoveTarget) {\n EventHandler.remove(this.mouseMoveTarget, 'mousemove touchstart', this.mouseMoveBeforeOpen);\n }\n };\n Tooltip.prototype.showTooltip = function (target, showAnimation, e) {\n var _this = this;\n clearTimeout(this.showTimer);\n clearTimeout(this.hideTimer);\n if (this.openDelay && this.mouseTrail) {\n this.mouseMoveBeforeRemove();\n this.mouseMoveTarget = target;\n EventHandler.add(this.mouseMoveTarget, 'mousemove touchstart', this.mouseMoveBeforeOpen, this);\n }\n this.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: this.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n // eslint-disable-next-line\n var observeCallback = function (beforeRenderArgs) {\n _this.beforeRenderCallback(beforeRenderArgs, target, e, showAnimation);\n };\n this.trigger('beforeRender', this.tooltipEventArgs, observeCallback.bind(this));\n };\n Tooltip.prototype.beforeRenderCallback = function (beforeRenderArgs, target, e, showAnimation) {\n if (beforeRenderArgs.cancel) {\n this.isHidden = true;\n this.clear();\n this.mouseMoveBeforeRemove();\n }\n else {\n this.isHidden = false;\n if (isNullOrUndefined(this.tooltipEle)) {\n this.ctrlId = this.element.getAttribute('id') ?\n getUniqueID(this.element.getAttribute('id')) : getUniqueID('tooltip');\n this.tooltipEle = this.createElement('div', {\n className: TOOLTIP_WRAP + ' ' + POPUP_ROOT + ' ' + POPUP_LIB, attrs: {\n role: 'tooltip', 'aria-hidden': 'false', 'id': this.ctrlId + '_content'\n }, styles: 'width:' +\n formatUnit(this.width) + ';height:' + formatUnit(this.height) + ';position:absolute;'\n });\n this.tooltipBeforeRender(target, this);\n this.tooltipAfterRender(target, e, showAnimation, this);\n }\n else {\n if (target) {\n this.adjustArrow(target, this.position, this.tooltipPositionX, this.tooltipPositionY);\n this.addDescribedBy(target, this.ctrlId + '_content');\n this.renderContent(target);\n PopupAnimation.stop(this.tooltipEle);\n this.reposition(target);\n this.tooltipAfterRender(target, e, showAnimation, this);\n }\n }\n }\n };\n Tooltip.prototype.appendContainer = function (ctrlObj) {\n if (typeof this.container == 'string') {\n if (this.container === 'body') {\n this.containerElement = document.body;\n }\n else {\n this.isBodyContainer = false;\n this.containerElement = select(this.container, document);\n }\n }\n else if (this.container instanceof HTMLElement) {\n this.containerElement = this.container;\n this.isBodyContainer = this.containerElement.tagName === 'BODY';\n }\n if (!this.isBodyContainer) {\n addClass([this.containerElement], POPUP_CONTAINER);\n }\n this.containerElement.appendChild(ctrlObj.tooltipEle);\n };\n Tooltip.prototype.tooltipBeforeRender = function (target, ctrlObj) {\n if (target) {\n if (Browser.isDevice) {\n addClass([ctrlObj.tooltipEle], DEVICE);\n }\n if (ctrlObj.width !== 'auto') {\n ctrlObj.tooltipEle.style.maxWidth = formatUnit(ctrlObj.width);\n }\n ctrlObj.tooltipEle.appendChild(ctrlObj.createElement('div', { className: CONTENT }));\n this.appendContainer(ctrlObj);\n removeClass([ctrlObj.tooltipEle], HIDE_POPUP);\n ctrlObj.addDescribedBy(target, ctrlObj.ctrlId + '_content');\n ctrlObj.renderContent(target);\n addClass([ctrlObj.tooltipEle], POPUP_OPEN);\n if (ctrlObj.showTipPointer) {\n ctrlObj.renderArrow();\n }\n ctrlObj.renderCloseIcon();\n ctrlObj.renderPopup(target);\n ctrlObj.adjustArrow(target, ctrlObj.position, ctrlObj.tooltipPositionX, ctrlObj.tooltipPositionY);\n PopupAnimation.stop(ctrlObj.tooltipEle);\n ctrlObj.reposition(target);\n }\n };\n Tooltip.prototype.tooltipAfterRender = function (target, e, showAnimation, ctrlObj) {\n if (target) {\n removeClass([ctrlObj.tooltipEle], POPUP_OPEN);\n addClass([ctrlObj.tooltipEle], POPUP_CLOSE);\n ctrlObj.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: ctrlObj.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n if (ctrlObj.needTemplateReposition() && !ctrlObj.mouseTrail) {\n ctrlObj.tooltipEle.style.display = 'none';\n }\n // eslint-disable-next-line\n var observeCallback = function (observedArgs) {\n ctrlObj.beforeOpenCallback(observedArgs, target, showAnimation, e);\n };\n ctrlObj.trigger('beforeOpen', ctrlObj.tooltipEventArgs, observeCallback.bind(ctrlObj));\n }\n };\n Tooltip.prototype.beforeOpenCallback = function (observedArgs, target, showAnimation, e) {\n var _this = this;\n if (observedArgs.cancel) {\n this.isHidden = true;\n this.clear();\n this.mouseMoveBeforeRemove();\n this.restoreElement(target);\n }\n else {\n // eslint-disable-next-line\n var openAnimation_1 = {\n name: showAnimation.effect,\n duration: showAnimation.duration,\n delay: showAnimation.delay,\n timingFunction: 'easeOut'\n };\n if (showAnimation.effect === 'None') {\n openAnimation_1 = undefined;\n }\n if (this.openDelay > 0) {\n // eslint-disable-next-line\n var show = function () {\n if (_this.mouseTrail) {\n EventHandler.add(target, 'mousemove touchstart mouseenter', _this.onMouseMove, _this);\n }\n if (_this.popupObj) {\n _this.popupObj.show(openAnimation_1, target);\n if (_this.mouseMoveEvent && _this.mouseTrail) {\n _this.onMouseMove(_this.mouseMoveEvent);\n }\n }\n };\n this.showTimer = setTimeout(show, this.openDelay);\n }\n else {\n if (this.popupObj) {\n this.popupObj.show(openAnimation_1, target);\n }\n }\n }\n if (e) {\n this.wireMouseEvents(e, target);\n }\n };\n Tooltip.prototype.needTemplateReposition = function () {\n // eslint-disable-next-line\n var tooltip = this;\n return !isNullOrUndefined(tooltip.viewContainerRef)\n && typeof tooltip.viewContainerRef !== 'string';\n };\n Tooltip.prototype.checkCollision = function (target, x, y) {\n var elePos = {\n left: x, top: y, position: this.position,\n horizontal: this.tooltipPositionX, vertical: this.tooltipPositionY\n };\n var affectedPos = isCollide(this.tooltipEle, this.checkCollideTarget(), x, y);\n if (affectedPos.length > 0) {\n elePos.horizontal = affectedPos.indexOf('left') >= 0 ? 'Right' : affectedPos.indexOf('right') >= 0 ? 'Left' :\n this.tooltipPositionX;\n elePos.vertical = affectedPos.indexOf('top') >= 0 ? 'Bottom' : affectedPos.indexOf('bottom') >= 0 ? 'Top' :\n this.tooltipPositionY;\n }\n return elePos;\n };\n Tooltip.prototype.calculateElementPosition = function (pos, offsetPos) {\n return [this.isBodyContainer ? pos.left + offsetPos.left :\n (pos.left - this.containerElement.offsetLeft) + offsetPos.left + window.pageXOffset + this.containerElement.scrollLeft,\n this.isBodyContainer ? pos.top + offsetPos.top :\n (pos.top - this.containerElement.offsetTop) + offsetPos.top + window.pageYOffset + this.containerElement.scrollTop];\n };\n Tooltip.prototype.collisionFlipFit = function (target, x, y) {\n var elePos = this.checkCollision(target, x, y);\n var newpos = elePos.position;\n if (this.tooltipPositionY !== elePos.vertical) {\n newpos = ((this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?\n elePos.vertical + this.tooltipPositionX : this.tooltipPositionX + elePos.vertical);\n }\n if (this.tooltipPositionX !== elePos.horizontal) {\n if (newpos.indexOf('Left') === 0) {\n elePos.vertical = (newpos === 'LeftTop' || newpos === 'LeftCenter') ? 'Top' : 'Bottom';\n newpos = (elePos.vertical + 'Left');\n }\n if (newpos.indexOf('Right') === 0) {\n elePos.vertical = (newpos === 'RightTop' || newpos === 'RightCenter') ? 'Top' : 'Bottom';\n newpos = (elePos.vertical + 'Right');\n }\n elePos.horizontal = this.tooltipPositionX;\n }\n this.tooltipEventArgs = {\n type: null, cancel: false, target: target, event: null,\n element: this.tooltipEle, collidedPosition: newpos\n };\n this.trigger('beforeCollision', this.tooltipEventArgs);\n var elePosVertical = elePos.vertical;\n var elePosHorizontal = elePos.horizontal;\n if (elePos.position !== newpos) {\n var pos = calculatePosition(target, elePosHorizontal, elePosVertical, !this.isBodyContainer, this.isBodyContainer ? null : this.containerElement.getBoundingClientRect());\n this.adjustArrow(target, newpos, elePosHorizontal, elePosVertical);\n var offsetPos = this.calculateTooltipOffset(newpos);\n offsetPos.top -= this.getOffSetPosition('TopBottom', newpos, this.offsetY);\n offsetPos.left -= this.getOffSetPosition('RightLeft', newpos, this.offsetX);\n elePos.position = newpos;\n var elePosition = this.calculateElementPosition(pos, offsetPos);\n elePos.left = elePosition[0];\n elePos.top = elePosition[1];\n }\n else {\n this.adjustArrow(target, newpos, elePosHorizontal, elePosVertical);\n }\n var eleOffset = { left: elePos.left, top: elePos.top };\n var left = this.isBodyContainer ?\n fit(this.tooltipEle, this.checkCollideTarget(), { X: true, Y: false }, eleOffset).left : eleOffset.left;\n this.tooltipEle.style.display = 'block';\n if (this.showTipPointer && (newpos.indexOf('Bottom') === 0 || newpos.indexOf('Top') === 0)) {\n var arrowEle = select('.' + ARROW_TIP, this.tooltipEle);\n var arrowleft = parseInt(arrowEle.style.left, 10) - (left - elePos.left);\n if (arrowleft < 0) {\n arrowleft = 0;\n }\n else if ((arrowleft + arrowEle.offsetWidth) > this.tooltipEle.clientWidth) {\n arrowleft = this.tooltipEle.clientWidth - arrowEle.offsetWidth;\n }\n arrowEle.style.left = arrowleft.toString() + 'px';\n }\n this.tooltipEle.style.display = '';\n eleOffset.left = left;\n return eleOffset;\n };\n Tooltip.prototype.getOffSetPosition = function (positionString, newPos, offsetType) {\n return ((positionString.indexOf(this.position.split(/(?=[A-Z])/)[0]) !== -1) &&\n (positionString.indexOf(newPos.split(/(?=[A-Z])/)[0]) !== -1)) ? (2 * offsetType) : 0;\n };\n Tooltip.prototype.checkCollideTarget = function () {\n return !this.windowCollision && this.target ? this.element : null;\n };\n Tooltip.prototype.hideTooltip = function (hideAnimation, e, targetElement) {\n var _this = this;\n if (this.closeDelay > 0) {\n clearTimeout(this.hideTimer);\n clearTimeout(this.showTimer);\n // eslint-disable-next-line\n var hide = function () {\n if (_this.closeDelay && _this.tooltipEle && _this.isTooltipOpen) {\n return;\n }\n _this.tooltipHide(hideAnimation, e, targetElement);\n };\n this.hideTimer = setTimeout(hide, this.closeDelay);\n }\n else {\n this.tooltipHide(hideAnimation, e, targetElement);\n }\n };\n Tooltip.prototype.tooltipHide = function (hideAnimation, e, targetElement) {\n var _this = this;\n var target;\n if (e) {\n target = this.target ? (targetElement || e.target) : this.element;\n }\n else {\n target = select('[data-tooltip-id= \"' + this.ctrlId + '_content\"]', document);\n }\n this.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: this.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n // this line commented for close the tooltip popup element even the target element destroyed in a page.\n //if (isNullOrUndefined(target)) { return; }\n this.trigger('beforeClose', this.tooltipEventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.mouseMoveBeforeRemove();\n _this.popupHide(hideAnimation, target);\n }\n else {\n _this.isHidden = false;\n }\n });\n this.tooltipEventArgs = null;\n };\n Tooltip.prototype.popupHide = function (hideAnimation, target) {\n if (target) {\n this.restoreElement(target);\n }\n this.isHidden = true;\n // eslint-disable-next-line\n var closeAnimation = {\n name: hideAnimation.effect,\n duration: hideAnimation.duration,\n delay: hideAnimation.delay,\n timingFunction: 'easeIn'\n };\n if (hideAnimation.effect === 'None') {\n closeAnimation = undefined;\n }\n if (this.popupObj) {\n this.popupObj.hide(closeAnimation);\n }\n };\n Tooltip.prototype.restoreElement = function (target) {\n this.unwireMouseEvents(target);\n if (!isNullOrUndefined(target.getAttribute('data-content'))) {\n target.setAttribute('title', target.getAttribute('data-content'));\n target.removeAttribute('data-content');\n }\n this.removeDescribedBy(target);\n };\n Tooltip.prototype.clear = function () {\n if (this.tooltipEle) {\n removeClass([this.tooltipEle], POPUP_CLOSE);\n addClass([this.tooltipEle], POPUP_OPEN);\n }\n if (this.isHidden) {\n if (this.popupObj) {\n this.popupObj.destroy();\n }\n if (this.tooltipEle) {\n remove(this.tooltipEle);\n }\n this.tooltipEle = null;\n this.popupObj = null;\n }\n };\n Tooltip.prototype.tooltipHover = function (e) {\n if (this.tooltipEle) {\n this.isTooltipOpen = true;\n }\n };\n Tooltip.prototype.tooltipMouseOut = function (e) {\n this.isTooltipOpen = false;\n this.hideTooltip(this.animation.close, e, this.findTarget());\n };\n Tooltip.prototype.onMouseOut = function (e) {\n var enteredElement = e.relatedTarget;\n // don't close the tooltip only if it is tooltip content element\n if (enteredElement && !this.mouseTrail) {\n var checkForTooltipElement = closest(enteredElement, \".\" + TOOLTIP_WRAP + \".\" + POPUP_LIB + \".\" + POPUP_ROOT);\n if (checkForTooltipElement) {\n EventHandler.add(checkForTooltipElement, 'mouseleave', this.tooltipElementMouseOut, this);\n }\n else {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n if (this.closeDelay === 0) {\n this.clear();\n }\n }\n }\n else {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n this.clear();\n }\n };\n Tooltip.prototype.tooltipElementMouseOut = function (e) {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n EventHandler.remove(this.element, 'mouseleave', this.tooltipElementMouseOut);\n this.clear();\n };\n Tooltip.prototype.onStickyClose = function (e) {\n this.close();\n };\n Tooltip.prototype.onMouseMove = function (event) {\n var eventPageX = 0;\n var eventPageY = 0;\n if (event.type.indexOf('touch') > -1) {\n event.preventDefault();\n eventPageX = event.touches[0].pageX;\n eventPageY = event.touches[0].pageY;\n }\n else {\n eventPageX = event.pageX;\n eventPageY = event.pageY;\n }\n PopupAnimation.stop(this.tooltipEle);\n removeClass([this.tooltipEle], POPUP_CLOSE);\n addClass([this.tooltipEle], POPUP_OPEN);\n this.adjustArrow(event.target, this.position, this.tooltipPositionX, this.tooltipPositionY);\n var pos = this.calculateTooltipOffset(this.position);\n var x = eventPageX + pos.left + this.offsetX;\n var y = eventPageY + pos.top + this.offsetY;\n var elePos = this.checkCollision(event.target, x, y);\n if (this.tooltipPositionX !== elePos.horizontal || this.tooltipPositionY !== elePos.vertical) {\n var newpos = (this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?\n elePos.vertical + elePos.horizontal : elePos.horizontal + elePos.vertical;\n elePos.position = newpos;\n this.adjustArrow(event.target, elePos.position, elePos.horizontal, elePos.vertical);\n var colpos = this.calculateTooltipOffset(elePos.position);\n elePos.left = eventPageX + colpos.left - this.offsetX;\n elePos.top = eventPageY + colpos.top - this.offsetY;\n }\n this.tooltipEle.style.left = elePos.left + 'px';\n this.tooltipEle.style.top = elePos.top + 'px';\n };\n Tooltip.prototype.keyDown = function (event) {\n if (this.tooltipEle && event.keyCode === 27) {\n this.close();\n }\n };\n Tooltip.prototype.touchEnd = function (e) {\n if (this.tooltipEle && closest(e.target, '.' + ROOT) === null && !this.isSticky) {\n this.close();\n }\n };\n Tooltip.prototype.scrollHandler = function (e) {\n if (this.tooltipEle) {\n if (!(closest(e.target, \".\" + TOOLTIP_WRAP + \".\" + POPUP_LIB + \".\" + POPUP_ROOT))) {\n this.close();\n }\n }\n };\n /**\n * Core method that initializes the control rendering.\n *\n * @private\n * @returns {void}\n */\n Tooltip.prototype.render = function () {\n this.initialize();\n this.wireEvents(this.opensOn);\n this.renderComplete();\n };\n /**\n * Initializes the values of private members.\n *\n * @private\n * @returns {void}\n */\n Tooltip.prototype.preRender = function () {\n this.tipClass = TIP_BOTTOM;\n this.tooltipPositionX = 'Center';\n this.tooltipPositionY = 'Top';\n this.isHidden = true;\n };\n /**\n * Binding events to the Tooltip element.\n *\n * @hidden\n * @param {string} trigger - specify the trigger string to the function\n * @returns {void}\n *\n */\n Tooltip.prototype.wireEvents = function (trigger) {\n var triggerList = this.getTriggerList(trigger);\n for (var _i = 0, triggerList_1 = triggerList; _i < triggerList_1.length; _i++) {\n var opensOn = triggerList_1[_i];\n if (opensOn === 'Custom') {\n return;\n }\n if (opensOn === 'Focus') {\n this.wireFocusEvents();\n EventHandler.add(this.element, 'DOMNodeInserted', this.updateTarget, this);\n }\n if (opensOn === 'Click') {\n EventHandler.add(this.element, Browser.touchStartEvent, this.targetClick, this);\n }\n if (opensOn === 'Hover') {\n if (Browser.isDevice) {\n this.touchModule = new Touch(this.element, {\n tapHoldThreshold: TAPHOLD_THRESHOLD,\n tapHold: this.tapHoldHandler.bind(this)\n });\n EventHandler.add(this.element, Browser.touchEndEvent, this.touchEndHandler, this);\n }\n else {\n EventHandler.add(this.element, 'mouseover', this.targetHover, this);\n }\n }\n }\n EventHandler.add(document, 'touchend', this.touchEnd, this);\n EventHandler.add(document, 'scroll wheel', this.scrollHandler, this);\n EventHandler.add(window, 'resize', this.windowResize, this);\n EventHandler.add(document, 'keydown', this.keyDown, this);\n };\n Tooltip.prototype.updateTarget = function (e) {\n if (!isNullOrUndefined(this.targetsList) && !isNullOrUndefined(this.target)) {\n var target = [].slice.call(selectAll(this.target, this.element));\n if (target.length !== this.targetsList.length) {\n this.unwireEvents(this.opensOn);\n this.wireEvents(this.opensOn);\n }\n }\n };\n Tooltip.prototype.getTriggerList = function (trigger) {\n if (trigger === 'Auto') {\n trigger = (Browser.isDevice) ? 'Hover' : 'Hover Focus';\n }\n return trigger.split(' ');\n };\n Tooltip.prototype.wireFocusEvents = function () {\n if (!isNullOrUndefined(this.target)) {\n var targetList = [].slice.call(selectAll(this.target, this.element));\n this.targetsList = targetList;\n for (var _i = 0, targetList_2 = targetList; _i < targetList_2.length; _i++) {\n var target = targetList_2[_i];\n target.setAttribute('tabindex', '0');\n EventHandler.add(target, 'focus', this.targetHover, this);\n }\n }\n else {\n EventHandler.add(this.element, 'focus', this.targetHover, this);\n }\n };\n Tooltip.prototype.wireMouseEvents = function (e, target) {\n if (this.tooltipEle) {\n if (!this.isSticky) {\n if (e.type === 'focus') {\n EventHandler.add(target, 'blur', this.onMouseOut, this);\n }\n if (e.type === 'mouseover') {\n EventHandler.add(target, 'mouseleave', this.onMouseOut, this);\n }\n if (this.closeDelay) {\n EventHandler.add(this.tooltipEle, 'mouseenter', this.tooltipHover, this);\n EventHandler.add(this.tooltipEle, 'mouseleave', this.tooltipMouseOut, this);\n }\n }\n if (this.mouseTrail && this.openDelay === 0) {\n EventHandler.add(target, 'mousemove touchstart mouseenter', this.onMouseMove, this);\n }\n target.setAttribute(\"tabindex\", \"0\");\n }\n };\n /**\n * Unbinding events from the element on widget destroy.\n *\n * @hidden\n *\n * @param {string} trigger - specify the trigger string to the function\n * @returns {void}\n *\n */\n Tooltip.prototype.unwireEvents = function (trigger) {\n var triggerList = this.getTriggerList(trigger);\n for (var _i = 0, triggerList_2 = triggerList; _i < triggerList_2.length; _i++) {\n var opensOn = triggerList_2[_i];\n if (opensOn === 'Custom') {\n return;\n }\n if (opensOn === 'Focus') {\n this.unwireFocusEvents();\n EventHandler.remove(this.element, 'DOMNodeInserted', this.updateTarget);\n }\n if (opensOn === 'Click') {\n EventHandler.remove(this.element, Browser.touchStartEvent, this.targetClick);\n }\n if (opensOn === 'Hover') {\n if (Browser.isDevice) {\n if (this.touchModule) {\n this.touchModule.destroy();\n }\n EventHandler.remove(this.element, Browser.touchEndEvent, this.touchEndHandler);\n }\n else {\n EventHandler.remove(this.element, 'mouseover', this.targetHover);\n }\n }\n }\n EventHandler.remove(document, 'touchend', this.touchEnd);\n EventHandler.remove(document, 'scroll wheel', this.scrollHandler);\n EventHandler.remove(window, 'resize', this.windowResize);\n EventHandler.remove(document, 'keydown', this.keyDown);\n };\n Tooltip.prototype.unwireFocusEvents = function () {\n if (!isNullOrUndefined(this.target)) {\n var targetList = [].slice.call(selectAll(this.target, this.element));\n for (var _i = 0, targetList_3 = targetList; _i < targetList_3.length; _i++) {\n var target = targetList_3[_i];\n target.removeAttribute('tabindex');\n EventHandler.remove(target, 'focus', this.targetHover);\n }\n }\n else {\n EventHandler.remove(this.element, 'focus', this.targetHover);\n }\n };\n Tooltip.prototype.unwireMouseEvents = function (target) {\n if (!this.isSticky) {\n var triggerList = this.getTriggerList(this.opensOn);\n for (var _i = 0, triggerList_3 = triggerList; _i < triggerList_3.length; _i++) {\n var opensOn = triggerList_3[_i];\n if (opensOn === 'Focus') {\n EventHandler.remove(target, 'blur', this.onMouseOut);\n }\n if (opensOn === 'Hover' && !Browser.isDevice) {\n EventHandler.remove(target, 'mouseleave', this.onMouseOut);\n }\n }\n if (this.closeDelay) {\n EventHandler.remove(target, 'mouseenter', this.tooltipHover);\n EventHandler.remove(target, 'mouseleave', this.tooltipMouseOut);\n }\n }\n if (this.mouseTrail) {\n EventHandler.remove(target, 'mousemove touchstart mouseenter', this.onMouseMove);\n }\n };\n Tooltip.prototype.findTarget = function () {\n var target = select('[data-tooltip-id= \"' + this.ctrlId + '_content\"]', document);\n return target;\n };\n /**\n * Core method to return the component name.\n *\n * @private\n *\n * @returns {string} - this method returns module name.\n */\n Tooltip.prototype.getModuleName = function () {\n return 'tooltip';\n };\n /**\n * Returns the properties to be maintained in the persisted state.\n *\n * @private\n *\n * @returns {string} - this method returns persisted data.\n */\n Tooltip.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Called internally, if any of the property value changed.\n *\n * @private\n *\n * @param {TooltipModel} newProp - this param gives new property values to the method\n * @param {TooltipModel} oldProp - this param gives old property values to the method\n * @returns {void}\n *\n */\n Tooltip.prototype.onPropertyChanged = function (newProp, oldProp) {\n var targetElement = this.findTarget();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n if (this.tooltipEle && targetElement) {\n this.tooltipEle.style.width = this.tooltipEle.style.maxWidth = formatUnit(newProp.width);\n this.reposition(targetElement);\n }\n break;\n case 'height':\n if (this.tooltipEle && targetElement) {\n this.tooltipEle.style.height = formatUnit(newProp.height);\n this.reposition(targetElement);\n }\n break;\n case 'content':\n if (this.tooltipEle) {\n this.renderContent();\n }\n break;\n case 'opensOn':\n this.unwireEvents(oldProp.opensOn);\n this.wireEvents(newProp.opensOn);\n break;\n case 'position':\n this.formatPosition();\n if (this.tooltipEle && targetElement) {\n var arrowInnerELe = select('.' + ARROW_TIP_INNER, this.tooltipEle);\n arrowInnerELe.style.top = arrowInnerELe.style.left = null;\n this.reposition(targetElement);\n }\n break;\n case 'tipPointerPosition':\n if (this.tooltipEle && targetElement) {\n this.reposition(targetElement);\n }\n break;\n case 'offsetX':\n if (this.tooltipEle) {\n var x = newProp.offsetX - oldProp.offsetX;\n this.tooltipEle.style.left = (parseInt(this.tooltipEle.style.left, 10) + (x)).toString() + 'px';\n }\n break;\n case 'offsetY':\n if (this.tooltipEle) {\n var y = newProp.offsetY - oldProp.offsetY;\n this.tooltipEle.style.top = (parseInt(this.tooltipEle.style.top, 10) + (y)).toString() + 'px';\n }\n break;\n case 'cssClass':\n if (this.tooltipEle) {\n if (oldProp.cssClass) {\n removeClass([this.tooltipEle], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.tooltipEle], newProp.cssClass.split(' '));\n }\n }\n break;\n case 'enableRtl':\n if (this.tooltipEle) {\n if (this.enableRtl) {\n addClass([this.tooltipEle], RTL);\n }\n else {\n removeClass([this.tooltipEle], RTL);\n }\n }\n break;\n case 'container':\n if (!isNullOrUndefined(this.containerElement)) {\n removeClass([this.containerElement], POPUP_CONTAINER);\n }\n this.container = newProp.container;\n if (this.tooltipEle && targetElement) {\n this.appendContainer(this);\n this.reposition(targetElement);\n }\n }\n }\n };\n /**\n * It is used to show the Tooltip on the specified target with specific animation settings.\n *\n * @param {HTMLElement} element - Target element where the Tooltip is to be displayed. (It is an optional parameter)\n * @param {TooltipAnimationSettings} animation - Sets the specific animation, while showing the Tooltip on the screen. (It is an optional parameter)\n * @returns {void}\n */\n Tooltip.prototype.open = function (element, animation) {\n if (isNullOrUndefined(animation)) {\n animation = this.animation.open;\n }\n if (isNullOrUndefined(element)) {\n element = this.element;\n }\n if (element.style.display === 'none') {\n return;\n }\n this.showTooltip(element, animation);\n };\n /**\n * It is used to hide the Tooltip with specific animation effect.\n *\n * @param {TooltipAnimationSettings} animation - Sets the specific animation when hiding Tooltip from the screen. (It is an optional parameter)\n * @returns {void}\n */\n Tooltip.prototype.close = function (animation) {\n if (!animation) {\n animation = this.animation.close;\n }\n this.hideTooltip(animation);\n };\n /**\n * It is used to refresh the Tooltip content and its position.\n *\n * @param {HTMLElement} target - Target element where the Tooltip content or position needs to be refreshed.\n * @returns {void}\n */\n Tooltip.prototype.refresh = function (target) {\n if (this.tooltipEle) {\n this.renderContent(target);\n }\n if (this.popupObj && target) {\n this.reposition(target);\n }\n };\n /**\n * It is used to destroy the Tooltip component.\n * @method destroy\n * @returns {void}\n * @memberof Tooltip\n */\n Tooltip.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n if (this.tooltipEle) {\n remove(this.tooltipEle);\n }\n if (this.popupObj) {\n this.popupObj.destroy();\n }\n removeClass([this.element], ROOT);\n this.unwireEvents(this.opensOn);\n this.unwireMouseEvents(this.element);\n this.tooltipEle = null;\n this.popupObj = null;\n };\n __decorate([\n Property('auto')\n ], Tooltip.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Tooltip.prototype, \"height\", void 0);\n __decorate([\n Property()\n ], Tooltip.prototype, \"content\", void 0);\n __decorate([\n Property('body')\n ], Tooltip.prototype, \"container\", void 0);\n __decorate([\n Property()\n ], Tooltip.prototype, \"target\", void 0);\n __decorate([\n Property('TopCenter')\n ], Tooltip.prototype, \"position\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"offsetX\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"offsetY\", void 0);\n __decorate([\n Property(true)\n ], Tooltip.prototype, \"showTipPointer\", void 0);\n __decorate([\n Property(true)\n ], Tooltip.prototype, \"enableHtmlParse\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"windowCollision\", void 0);\n __decorate([\n Property('Auto')\n ], Tooltip.prototype, \"tipPointerPosition\", void 0);\n __decorate([\n Property('Auto')\n ], Tooltip.prototype, \"opensOn\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"mouseTrail\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"isSticky\", void 0);\n __decorate([\n Complex({}, Animation)\n ], Tooltip.prototype, \"animation\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"openDelay\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"closeDelay\", void 0);\n __decorate([\n Property()\n ], Tooltip.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeRender\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"afterOpen\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"afterClose\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeCollision\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"destroyed\", void 0);\n Tooltip = __decorate([\n NotifyPropertyChanges\n ], Tooltip);\n return Tooltip;\n}(Component));\nexport { Tooltip };\n","/* eslint-disable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */\nimport { createElement, attributes, addClass, removeClass, detach, classList } from '@syncfusion/ej2-base';\nimport { closest, formatUnit, isNullOrUndefined, remove } from '@syncfusion/ej2-base';\nvar CLASSNAMES = {\n RTL: 'e-rtl',\n DISABLE: 'e-disabled',\n INPUT: 'e-input',\n TEXTAREA: 'e-multi-line-input',\n INPUTGROUP: 'e-input-group',\n FLOATINPUT: 'e-float-input',\n FLOATLINE: 'e-float-line',\n FLOATTEXT: 'e-float-text',\n FLOATTEXTCONTENT: 'e-float-text-content',\n CLEARICON: 'e-clear-icon',\n CLEARICONHIDE: 'e-clear-icon-hide',\n LABELTOP: 'e-label-top',\n LABELBOTTOM: 'e-label-bottom',\n NOFLOATLABEL: 'e-no-float-label',\n INPUTCUSTOMTAG: 'e-input-custom-tag',\n FLOATCUSTOMTAG: 'e-float-custom-tag'\n};\n/**\n * Base for Input creation through util methods.\n */\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport var Input;\n(function (Input) {\n var privateInputObj = {\n container: null,\n buttons: [],\n clearButton: null\n };\n var floatType;\n var isBindClearAction = true;\n /**\n * Create a wrapper to input element with multiple span elements and set the basic properties to input based components.\n * ```\n * E.g : Input.createInput({ element: element, floatLabelType : \"Auto\", properties: { placeholder: 'Search' } });\n * ```\n *\n */\n function createInput(args, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var inputObject = { container: null, buttons: [], clearButton: null };\n floatType = args.floatLabelType;\n isBindClearAction = args.bindClearAction;\n if (isNullOrUndefined(args.floatLabelType) || args.floatLabelType === 'Never') {\n inputObject.container = createInputContainer(args, CLASSNAMES.INPUTGROUP, CLASSNAMES.INPUTCUSTOMTAG, 'span', makeElement);\n args.element.parentNode.insertBefore(inputObject.container, args.element);\n addClass([args.element], CLASSNAMES.INPUT);\n inputObject.container.appendChild(args.element);\n }\n else {\n createFloatingInput(args, inputObject, makeElement);\n }\n bindInitialEvent(args);\n if (!isNullOrUndefined(args.properties) && !isNullOrUndefined(args.properties.showClearButton) &&\n args.properties.showClearButton && args.element.tagName !== 'TEXTAREA') {\n setClearButton(args.properties.showClearButton, args.element, inputObject, true, makeElement);\n inputObject.clearButton.setAttribute('role', 'button');\n if (inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT)) {\n addClass([inputObject.container], CLASSNAMES.INPUTGROUP);\n }\n }\n if (!isNullOrUndefined(args.buttons) && args.element.tagName !== 'TEXTAREA') {\n for (var i = 0; i < args.buttons.length; i++) {\n inputObject.buttons.push(appendSpan(args.buttons[i], inputObject.container, makeElement));\n }\n }\n if (!isNullOrUndefined(args.element) && args.element.tagName === 'TEXTAREA') {\n addClass([inputObject.container], CLASSNAMES.TEXTAREA);\n }\n validateInputType(inputObject.container, args.element);\n inputObject = setPropertyValue(args, inputObject);\n createSpanElement(inputObject.container, makeElement);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n privateInputObj = inputObject;\n return inputObject;\n }\n Input.createInput = createInput;\n function bindInitialEvent(args) {\n checkInputValue(args.floatLabelType, args.element);\n args.element.addEventListener('focus', function () {\n var parent = getParentNode(this);\n if (parent.classList.contains('e-input-group') || parent.classList.contains('e-outline')\n || parent.classList.contains('e-filled')) {\n parent.classList.add('e-input-focus');\n }\n setTimeout(function () {\n Input.calculateWidth(args.element, parent);\n }, 80);\n });\n args.element.addEventListener('blur', function () {\n var parent = getParentNode(this);\n if (parent.classList.contains('e-input-group') || parent.classList.contains('e-outline')\n || parent.classList.contains('e-filled')) {\n parent.classList.remove('e-input-focus');\n }\n setTimeout(function () {\n Input.calculateWidth(args.element, parent);\n }, 80);\n });\n args.element.addEventListener('input', function () {\n checkInputValue(floatType, args.element);\n });\n }\n Input.bindInitialEvent = bindInitialEvent;\n function checkInputValue(floatLabelType, inputElement) {\n var inputValue = inputElement.value;\n if (inputValue !== '' && !isNullOrUndefined(inputValue) && inputElement.parentElement) {\n inputElement.parentElement.classList.add('e-valid-input');\n }\n else if (floatLabelType !== 'Always' && inputElement.parentElement) {\n inputElement.parentElement.classList.remove('e-valid-input');\n }\n }\n function _focusFn() {\n var label = getParentNode(this).getElementsByClassName('e-float-text')[0];\n if (!isNullOrUndefined(label)) {\n addClass([label], CLASSNAMES.LABELTOP);\n if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) {\n removeClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n }\n function _blurFn() {\n var parent = getParentNode(this);\n if ((parent.getElementsByTagName('textarea')[0]) ? parent.getElementsByTagName('textarea')[0].value === '' :\n parent.getElementsByTagName('input')[0].value === '') {\n var label = parent.getElementsByClassName('e-float-text')[0];\n if (!isNullOrUndefined(label)) {\n if (label.classList.contains(CLASSNAMES.LABELTOP)) {\n removeClass([label], CLASSNAMES.LABELTOP);\n }\n addClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n }\n function wireFloatingEvents(element) {\n element.addEventListener('focus', _focusFn);\n element.addEventListener('blur', _blurFn);\n }\n Input.wireFloatingEvents = wireFloatingEvents;\n function unwireFloatingEvents(element) {\n element.removeEventListener('focus', _focusFn);\n element.removeEventListener('blur', _blurFn);\n }\n function createFloatingInput(args, inputObject, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n if (args.floatLabelType === 'Auto') {\n wireFloatingEvents(args.element);\n }\n if (isNullOrUndefined(inputObject.container)) {\n inputObject.container = createInputContainer(args, CLASSNAMES.FLOATINPUT, CLASSNAMES.FLOATCUSTOMTAG, 'div', makeElement);\n if (args.element.parentNode) {\n args.element.parentNode.insertBefore(inputObject.container, args.element);\n }\n }\n else {\n if (!isNullOrUndefined(args.customTag)) {\n inputObject.container.classList.add(CLASSNAMES.FLOATCUSTOMTAG);\n }\n inputObject.container.classList.add(CLASSNAMES.FLOATINPUT);\n }\n var floatLinelement = makeElement('span', { className: CLASSNAMES.FLOATLINE });\n var floatLabelElement = makeElement('label', { className: CLASSNAMES.FLOATTEXT });\n if (!isNullOrUndefined(args.element.id) && args.element.id !== '') {\n floatLabelElement.id = 'label_' + args.element.id.replace(/ /g, '_');\n attributes(args.element, { 'aria-labelledby': floatLabelElement.id });\n }\n if (!isNullOrUndefined(args.element.placeholder) && args.element.placeholder !== '') {\n floatLabelElement.innerText = encodePlaceHolder(args.element.placeholder);\n args.element.removeAttribute('placeholder');\n }\n if (!isNullOrUndefined(args.properties) && !isNullOrUndefined(args.properties.placeholder) &&\n args.properties.placeholder !== '') {\n floatLabelElement.innerText = encodePlaceHolder(args.properties.placeholder);\n }\n if (!floatLabelElement.innerText) {\n inputObject.container.classList.add(CLASSNAMES.NOFLOATLABEL);\n }\n if (inputObject.container.classList.contains('e-float-icon-left')) {\n var inputWrap = inputObject.container.querySelector('.e-input-in-wrap');\n inputWrap.appendChild(args.element);\n inputWrap.appendChild(floatLinelement);\n inputWrap.appendChild(floatLabelElement);\n }\n else {\n inputObject.container.appendChild(args.element);\n inputObject.container.appendChild(floatLinelement);\n inputObject.container.appendChild(floatLabelElement);\n }\n updateLabelState(args.element.value, floatLabelElement);\n if (args.floatLabelType === 'Always') {\n if (floatLabelElement.classList.contains(CLASSNAMES.LABELBOTTOM)) {\n removeClass([floatLabelElement], CLASSNAMES.LABELBOTTOM);\n }\n addClass([floatLabelElement], CLASSNAMES.LABELTOP);\n }\n if (args.floatLabelType === 'Auto') {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n args.element.addEventListener('input', function (event) {\n updateLabelState(args.element.value, floatLabelElement, args.element);\n });\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n args.element.addEventListener('blur', function (event) {\n updateLabelState(args.element.value, floatLabelElement);\n });\n }\n if (!isNullOrUndefined(args.element.getAttribute('id'))) {\n floatLabelElement.setAttribute('for', args.element.getAttribute('id'));\n }\n }\n function checkFloatLabelType(type, container) {\n if (type === 'Always' && container.classList.contains('e-outline')) {\n container.classList.add('e-valid-input');\n }\n }\n function setPropertyValue(args, inputObject) {\n if (!isNullOrUndefined(args.properties)) {\n for (var _i = 0, _a = Object.keys(args.properties); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'cssClass':\n setCssClass(args.properties.cssClass, [inputObject.container]);\n checkFloatLabelType(args.floatLabelType, inputObject.container);\n break;\n case 'enabled':\n setEnabled(args.properties.enabled, args.element, args.floatLabelType, inputObject.container);\n break;\n case 'enableRtl':\n setEnableRtl(args.properties.enableRtl, [inputObject.container]);\n break;\n case 'placeholder':\n setPlaceholder(args.properties.placeholder, args.element);\n break;\n case 'readonly':\n setReadonly(args.properties.readonly, args.element);\n break;\n }\n }\n }\n return inputObject;\n }\n function updateIconState(value, button, readonly) {\n if (value && !readonly) {\n removeClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n else {\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n }\n function updateLabelState(value, label, element) {\n if (element === void 0) { element = null; }\n if (value) {\n addClass([label], CLASSNAMES.LABELTOP);\n if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) {\n removeClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n else {\n var isNotFocused = element != null ? element !== document.activeElement : true;\n if (isNotFocused) {\n if (label.classList.contains(CLASSNAMES.LABELTOP)) {\n removeClass([label], CLASSNAMES.LABELTOP);\n }\n addClass([label], CLASSNAMES.LABELBOTTOM);\n }\n }\n }\n function getParentNode(element) {\n var parentNode = isNullOrUndefined(element.parentNode) ? element\n : element.parentNode;\n if (parentNode && parentNode.classList.contains('e-input-in-wrap')) {\n parentNode = parentNode.parentNode;\n }\n return parentNode;\n }\n /**\n * To create clear button.\n */\n function createClearButton(element, inputObject, initial, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var button = makeElement('span', { className: CLASSNAMES.CLEARICON });\n var container = inputObject.container;\n if (!isNullOrUndefined(initial)) {\n container.appendChild(button);\n }\n else {\n var baseElement = inputObject.container.classList.contains(CLASSNAMES.FLOATINPUT) ?\n inputObject.container.querySelector('.' + CLASSNAMES.FLOATTEXT) : element;\n baseElement.insertAdjacentElement('afterend', button);\n }\n if (!isNullOrUndefined(container) &&\n container.classList.contains(CLASSNAMES.FLOATINPUT)) {\n addClass([container], CLASSNAMES.INPUTGROUP);\n }\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n wireClearBtnEvents(element, button, container);\n button.setAttribute('aria-label', 'close');\n return button;\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n function wireClearBtnEvents(element, button, container) {\n if (isBindClearAction == undefined || isBindClearAction) {\n button.addEventListener('click', function (event) {\n if (!(element.classList.contains(CLASSNAMES.DISABLE) || element.readOnly)) {\n event.preventDefault();\n if (element !== document.activeElement) {\n element.focus();\n }\n element.value = '';\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n });\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n element.addEventListener('input', function (event) {\n updateIconState(element.value, button);\n });\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n element.addEventListener('focus', function (event) {\n updateIconState(element.value, button, element.readOnly);\n });\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n element.addEventListener('blur', function (event) {\n setTimeout(function () {\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }, 200);\n });\n }\n Input.wireClearBtnEvents = wireClearBtnEvents;\n function destroy() {\n privateInputObj = null;\n }\n Input.destroy = destroy;\n function validateLabel(element, floatLabelType) {\n var parent = getParentNode(element);\n if (parent.classList.contains(CLASSNAMES.FLOATINPUT) && floatLabelType === 'Auto') {\n var label = getParentNode(element).getElementsByClassName('e-float-text')[0];\n updateLabelState(element.value, label, element);\n }\n }\n /**\n * To create input box contianer.\n */\n function createInputContainer(args, className, tagClass, tag, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var container;\n if (!isNullOrUndefined(args.customTag)) {\n container = makeElement(args.customTag, { className: className });\n container.classList.add(tagClass);\n }\n else {\n container = makeElement(tag, { className: className });\n }\n container.classList.add('e-control-wrapper');\n return container;\n }\n function encodePlaceHolder(placeholder) {\n var result = '';\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n var spanEle = document.createElement('span');\n spanEle.innerHTML = '
';\n var hiddenInput = (spanEle.children[0]);\n result = hiddenInput.placeholder;\n }\n return result;\n }\n /**\n * Sets the value to the input element.\n * ```\n * E.g : Input.setValue('content', element, \"Auto\", true );\n * ```\n *\n * @param {string} value - Specify the value of the input element.\n * @param {HTMLInputElement | HTMLTextAreaElement} element - The element on which the specified value is updated.\n * @param {string} floatLabelType - Specify the float label type of the input element.\n * @param {boolean} clearButton - Boolean value to specify whether the clear icon is enabled / disabled on the input.\n */\n function setValue(value, element, floatLabelType, clearButton) {\n element.value = value;\n calculateWidth(element, element.parentElement);\n if ((!isNullOrUndefined(floatLabelType)) && floatLabelType === 'Auto') {\n validateLabel(element, floatLabelType);\n }\n if (!isNullOrUndefined(clearButton) && clearButton) {\n var parentElement = getParentNode(element);\n if (!isNullOrUndefined(parentElement)) {\n var button = parentElement.getElementsByClassName(CLASSNAMES.CLEARICON)[0];\n if (!isNullOrUndefined(button)) {\n if (element.value && !isNullOrUndefined(parentElement) && parentElement.classList.contains('e-input-focus')) {\n removeClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n else {\n addClass([button], CLASSNAMES.CLEARICONHIDE);\n }\n }\n }\n }\n checkInputValue(floatLabelType, element);\n }\n Input.setValue = setValue;\n /**\n * Sets the single or multiple cssClass to wrapper of input element.\n * ```\n * E.g : Input.setCssClass('e-custom-class', [element]);\n * ```\n *\n * @param {string} cssClass - Css class names which are needed to add.\n * @param {Element[] | NodeList} elements - The elements which are needed to add / remove classes.\n * @param {string} oldClass\n * - Css class names which are needed to remove. If old classes are need to remove, can give this optional parameter.\n */\n function setCssClass(cssClass, elements, oldClass) {\n if (!isNullOrUndefined(oldClass) && oldClass !== '') {\n removeClass(elements, oldClass.split(' '));\n }\n if (!isNullOrUndefined(cssClass) && cssClass !== '') {\n addClass(elements, cssClass.split(' '));\n }\n }\n Input.setCssClass = setCssClass;\n /**\n * Set the width to the placeholder when it overflows on the button such as spinbutton, clearbutton, icon etc\n * ```\n * E.g : Input.calculateWidth(element, container);\n * ```\n *\n * @param {any} element - Input element which is need to add.\n * @param {HTMLElement} container - The parent element which is need to get the label span to calculate width\n */\n function calculateWidth(element, container, moduleName) {\n var elementWidth = moduleName === 'multiselect' ? element : element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'));\n if (!isNullOrUndefined(container.getElementsByClassName('e-float-text-content')[0])) {\n if (container.getElementsByClassName('e-float-text-content')[0].classList.contains('e-float-text-overflow')) {\n container.getElementsByClassName('e-float-text-content')[0].classList.remove('e-float-text-overflow');\n }\n if (elementWidth < container.getElementsByClassName('e-float-text-content')[0].clientWidth || elementWidth === container.getElementsByClassName('e-float-text-content')[0].clientWidth) {\n container.getElementsByClassName('e-float-text-content')[0].classList.add('e-float-text-overflow');\n }\n }\n }\n Input.calculateWidth = calculateWidth;\n /**\n * Set the width to the wrapper of input element.\n * ```\n * E.g : Input.setWidth('200px', container);\n * ```\n *\n * @param {number | string} width - Width value which is need to add.\n * @param {HTMLElement} container - The element on which the width is need to add.\n */\n function setWidth(width, container) {\n if (typeof width === 'number') {\n container.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n container.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n calculateWidth(container.firstChild, container);\n }\n Input.setWidth = setWidth;\n /**\n * Set the placeholder attribute to the input element.\n * ```\n * E.g : Input.setPlaceholder('Search here', element);\n * ```\n *\n * @param {string} placeholder - Placeholder value which is need to add.\n * @param {HTMLInputElement | HTMLTextAreaElement} element - The element on which the placeholder is need to add.\n */\n function setPlaceholder(placeholder, element) {\n placeholder = encodePlaceHolder(placeholder);\n var parentElement = getParentNode(element);\n if (parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n parentElement.getElementsByClassName('e-float-text-content')[0] ? parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].children[0].textContent = placeholder : parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = placeholder;\n parentElement.classList.remove(CLASSNAMES.NOFLOATLABEL);\n element.removeAttribute('placeholder');\n }\n else {\n parentElement.classList.add(CLASSNAMES.NOFLOATLABEL);\n parentElement.getElementsByClassName('e-float-text-content')[0] ? parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].children[0].textContent = '' : parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';\n }\n }\n else {\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n attributes(element, { 'placeholder': placeholder });\n }\n else {\n element.removeAttribute('placeholder');\n }\n }\n }\n Input.setPlaceholder = setPlaceholder;\n /**\n * Set the read only attribute to the input element\n * ```\n * E.g : Input.setReadonly(true, element);\n * ```\n *\n * @param {boolean} isReadonly\n * - Boolean value to specify whether to set read only. Setting \"True\" value enables read only.\n * @param {HTMLInputElement | HTMLTextAreaElement} element\n * - The element which is need to enable read only.\n */\n function setReadonly(isReadonly, element, floatLabelType) {\n if (isReadonly) {\n attributes(element, { readonly: '' });\n }\n else {\n element.removeAttribute('readonly');\n }\n if (!isNullOrUndefined(floatLabelType)) {\n validateLabel(element, floatLabelType);\n }\n }\n Input.setReadonly = setReadonly;\n /**\n * Displays the element direction from right to left when its enabled.\n * ```\n * E.g : Input.setEnableRtl(true, [inputObj.container]);\n * ```\n *\n * @param {boolean} isRtl\n * - Boolean value to specify whether to set RTL. Setting \"True\" value enables the RTL mode.\n * @param {Element[] | NodeList} elements\n * - The elements that are needed to enable/disable RTL.\n */\n function setEnableRtl(isRtl, elements) {\n if (isRtl) {\n addClass(elements, CLASSNAMES.RTL);\n }\n else {\n removeClass(elements, CLASSNAMES.RTL);\n }\n }\n Input.setEnableRtl = setEnableRtl;\n /**\n * Enables or disables the given input element.\n * ```\n * E.g : Input.setEnabled(false, element);\n * ```\n *\n * @param {boolean} isEnable\n * - Boolean value to specify whether to enable or disable.\n * @param {HTMLInputElement | HTMLTextAreaElement} element\n * - Element to be enabled or disabled.\n */\n function setEnabled(isEnable, element, floatLabelType, inputContainer) {\n var disabledAttrs = { 'disabled': 'disabled', 'aria-disabled': 'true' };\n var considerWrapper = isNullOrUndefined(inputContainer) ? false : true;\n if (isEnable) {\n element.classList.remove(CLASSNAMES.DISABLE);\n removeAttributes(disabledAttrs, element);\n if (considerWrapper) {\n removeClass([inputContainer], CLASSNAMES.DISABLE);\n }\n }\n else {\n element.classList.add(CLASSNAMES.DISABLE);\n addAttributes(disabledAttrs, element);\n if (considerWrapper) {\n addClass([inputContainer], CLASSNAMES.DISABLE);\n }\n }\n if (!isNullOrUndefined(floatLabelType)) {\n validateLabel(element, floatLabelType);\n }\n }\n Input.setEnabled = setEnabled;\n function setClearButton(isClear, element, inputObject, initial, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n if (isClear) {\n inputObject.clearButton = createClearButton(element, inputObject, initial, makeElement);\n }\n else {\n remove(inputObject.clearButton);\n inputObject.clearButton = null;\n }\n }\n Input.setClearButton = setClearButton;\n /**\n * Removing the multiple attributes from the given element such as \"disabled\",\"id\" , etc.\n * ```\n * E.g : Input.removeAttributes({ 'disabled': 'disabled', 'aria-disabled': 'true' }, element);\n * ```\n *\n * @param {string} attrs\n * - Array of attributes which are need to removed from the element.\n * @param {HTMLInputElement | HTMLElement} element\n * - Element on which the attributes are needed to be removed.\n */\n function removeAttributes(attrs, element) {\n for (var _i = 0, _a = Object.keys(attrs); _i < _a.length; _i++) {\n var key = _a[_i];\n var parentElement = getParentNode(element);\n if (key === 'disabled') {\n element.classList.remove(CLASSNAMES.DISABLE);\n }\n if (key === 'disabled' && parentElement.classList.contains(CLASSNAMES.INPUTGROUP)) {\n parentElement.classList.remove(CLASSNAMES.DISABLE);\n }\n if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';\n }\n else {\n element.removeAttribute(key);\n }\n }\n }\n Input.removeAttributes = removeAttributes;\n /**\n * Adding the multiple attributes to the given element such as \"disabled\",\"id\" , etc.\n * ```\n * E.g : Input.addAttributes({ 'id': 'inputpopup' }, element);\n * ```\n *\n * @param {string} attrs\n * - Array of attributes which is added to element.\n * @param {HTMLInputElement | HTMLElement} element\n * - Element on which the attributes are needed to be added.\n */\n function addAttributes(attrs, element) {\n for (var _i = 0, _a = Object.keys(attrs); _i < _a.length; _i++) {\n var key = _a[_i];\n var parentElement = getParentNode(element);\n if (key === 'disabled') {\n element.classList.add(CLASSNAMES.DISABLE);\n }\n if (key === 'disabled' && parentElement.classList.contains(CLASSNAMES.INPUTGROUP)) {\n parentElement.classList.add(CLASSNAMES.DISABLE);\n }\n if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {\n parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = attrs[key];\n }\n else {\n element.setAttribute(key, attrs[key]);\n }\n }\n }\n Input.addAttributes = addAttributes;\n function removeFloating(input) {\n var container = input.container;\n if (!isNullOrUndefined(container) && container.classList.contains(CLASSNAMES.FLOATINPUT)) {\n var inputEle = container.querySelector('textarea') ? container.querySelector('textarea') :\n container.querySelector('input');\n var placeholder = container.querySelector('.' + CLASSNAMES.FLOATTEXT).textContent;\n var clearButton = container.querySelector('.e-clear-icon') !== null;\n detach(container.querySelector('.' + CLASSNAMES.FLOATLINE));\n detach(container.querySelector('.' + CLASSNAMES.FLOATTEXT));\n classList(container, [CLASSNAMES.INPUTGROUP], [CLASSNAMES.FLOATINPUT]);\n unwireFloatingEvents(inputEle);\n attributes(inputEle, { 'placeholder': placeholder });\n inputEle.classList.add(CLASSNAMES.INPUT);\n if (!clearButton && inputEle.tagName === 'INPUT') {\n inputEle.removeAttribute('required');\n }\n }\n }\n Input.removeFloating = removeFloating;\n function addFloating(input, type, placeholder, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var container = closest(input, '.' + CLASSNAMES.INPUTGROUP);\n floatType = type;\n if (type !== 'Never') {\n var customTag = container.tagName;\n customTag = customTag !== 'DIV' && customTag !== 'SPAN' ? customTag : null;\n var args = { element: input, floatLabelType: type,\n customTag: customTag, properties: { placeholder: placeholder } };\n var iconEle = container.querySelector('.e-clear-icon');\n var inputObj = { container: container };\n input.classList.remove(CLASSNAMES.INPUT);\n createFloatingInput(args, inputObj, makeElement);\n createSpanElement(inputObj.container, makeElement);\n calculateWidth(args.element, inputObj.container);\n var isPrependIcon = container.classList.contains('e-float-icon-left');\n if (isNullOrUndefined(iconEle)) {\n if (isPrependIcon) {\n var inputWrap = container.querySelector('.e-input-in-wrap');\n iconEle = inputWrap.querySelector('.e-input-group-icon');\n }\n else {\n iconEle = container.querySelector('.e-input-group-icon');\n }\n }\n if (isNullOrUndefined(iconEle)) {\n if (isPrependIcon) {\n iconEle = container.querySelector('.e-input-group-icon');\n }\n if (isNullOrUndefined(iconEle)) {\n container.classList.remove(CLASSNAMES.INPUTGROUP);\n }\n }\n else {\n var floatLine = container.querySelector('.' + CLASSNAMES.FLOATLINE);\n var floatText = container.querySelector('.' + CLASSNAMES.FLOATTEXT);\n var wrapper = isPrependIcon ? container.querySelector('.e-input-in-wrap') : container;\n wrapper.insertBefore(input, iconEle);\n wrapper.insertBefore(floatLine, iconEle);\n wrapper.insertBefore(floatText, iconEle);\n }\n }\n checkFloatLabelType(type, input.parentElement);\n }\n Input.addFloating = addFloating;\n /**\n * Create the span inside the label and add the label text into the span textcontent\n * ```\n * E.g : Input.createSpanElement(inputObject, makeElement);\n * ```\n *\n * @param {InputObject} inputObject\n * - Element which is need to get the label\n * @param {createElementParams} makeElement\n * - Element which is need to create the span\n */\n function createSpanElement(inputObject, makeElement) {\n if (inputObject.classList.contains('e-outline') && inputObject.getElementsByClassName('e-float-text')[0]) {\n var labelSpanElement = makeElement('span', { className: CLASSNAMES.FLOATTEXTCONTENT });\n labelSpanElement.innerHTML = inputObject.getElementsByClassName('e-float-text')[0].innerHTML;\n inputObject.getElementsByClassName('e-float-text')[0].innerHTML = '';\n inputObject.getElementsByClassName('e-float-text')[0].appendChild(labelSpanElement);\n }\n }\n Input.createSpanElement = createSpanElement;\n /**\n * Enable or Disable the ripple effect on the icons inside the Input. Ripple effect is only applicable for material theme.\n * ```\n * E.g : Input.setRipple(true, [inputObjects]);\n * ```\n *\n * @param {boolean} isRipple\n * - Boolean value to specify whether to enable the ripple effect.\n * @param {InputObject[]} inputObj\n * - Specify the collection of input objects.\n */\n function setRipple(isRipple, inputObj) {\n for (var i = 0; i < inputObj.length; i++) {\n _internalRipple(isRipple, inputObj[i].container);\n }\n }\n Input.setRipple = setRipple;\n function _internalRipple(isRipple, container, button) {\n var argsButton = [];\n argsButton.push(button);\n var buttons = isNullOrUndefined(button) ?\n container.querySelectorAll('.e-input-group-icon') : argsButton;\n if (isRipple && buttons.length > 0) {\n for (var index = 0; index < buttons.length; index++) {\n buttons[index].addEventListener('mousedown', _onMouseDownRipple, false);\n buttons[index].addEventListener('mouseup', _onMouseUpRipple, false);\n }\n }\n else if (buttons.length > 0) {\n for (var index = 0; index < buttons.length; index++) {\n buttons[index].removeEventListener('mousedown', _onMouseDownRipple, this);\n buttons[index].removeEventListener('mouseup', _onMouseUpRipple, this);\n }\n }\n }\n function _onMouseRipple(container, button) {\n if (!container.classList.contains('e-disabled') && !container.querySelector('input').readOnly) {\n button.classList.add('e-input-btn-ripple');\n }\n }\n function _onMouseDownRipple() {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var ele = this;\n var parentEle = this.parentElement;\n while (!parentEle.classList.contains('e-input-group')) {\n parentEle = parentEle.parentElement;\n }\n _onMouseRipple(parentEle, ele);\n }\n function _onMouseUpRipple() {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var ele = this;\n setTimeout(function () {\n ele.classList.remove('e-input-btn-ripple');\n }, 500);\n }\n function createIconEle(iconClass, makeElement) {\n var button = makeElement('span', { className: iconClass });\n button.classList.add('e-input-group-icon');\n return button;\n }\n /**\n * Creates a new span element with the given icons added and append it in container element.\n * ```\n * E.g : Input.addIcon('append', 'e-icon-spin', inputObj.container, inputElement);\n * ```\n *\n * @param {string} position - Specify the icon placement on the input.Possible values are append and prepend.\n * @param {string | string[]} icons - Icon classes which are need to add to the span element which is going to created.\n * Span element acts as icon or button element for input.\n * @param {HTMLElement} container - The container on which created span element is going to append.\n * @param {HTMLElement} input - The inputElement on which created span element is going to prepend.\n */\n /* eslint-disable @typescript-eslint/indent */\n function addIcon(position, icons, container, input, internalCreate) {\n /* eslint-enable @typescript-eslint/indent */\n var result = typeof (icons) === 'string' ? icons.split(',')\n : icons;\n if (position.toLowerCase() === 'append') {\n for (var _i = 0, result_1 = result; _i < result_1.length; _i++) {\n var icon = result_1[_i];\n appendSpan(icon, container, internalCreate);\n }\n }\n else {\n for (var _a = 0, result_2 = result; _a < result_2.length; _a++) {\n var icon = result_2[_a];\n prependSpan(icon, container, input, internalCreate);\n }\n }\n if (container.getElementsByClassName('e-input-group-icon')[0] && container.getElementsByClassName('e-float-text-overflow')[0]) {\n container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n }\n Input.addIcon = addIcon;\n /**\n * Creates a new span element with the given icons added and prepend it in input element.\n * ```\n * E.g : Input.prependSpan('e-icon-spin', inputObj.container, inputElement);\n * ```\n *\n * @param {string} iconClass - Icon classes which are need to add to the span element which is going to created.\n * Span element acts as icon or button element for input.\n * @param {HTMLElement} container - The container on which created span element is going to append.\n * @param {HTMLElement} inputElement - The inputElement on which created span element is going to prepend.\n */\n /* eslint-disable @typescript-eslint/indent */\n function prependSpan(iconClass, container, inputElement, internalCreateElement) {\n /* eslint-enable @typescript-eslint/indent */\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var button = createIconEle(iconClass, makeElement);\n container.classList.add('e-float-icon-left');\n var innerWrapper = container.querySelector('.e-input-in-wrap');\n if (isNullOrUndefined(innerWrapper)) {\n innerWrapper = makeElement('span', { className: 'e-input-in-wrap' });\n inputElement.parentNode.insertBefore(innerWrapper, inputElement);\n var result = container.querySelectorAll(inputElement.tagName + ' ~ *');\n innerWrapper.appendChild(inputElement);\n for (var i = 0; i < result.length; i++) {\n innerWrapper.appendChild(result[i]);\n }\n }\n innerWrapper.parentNode.insertBefore(button, innerWrapper);\n if (!container.classList.contains(CLASSNAMES.INPUTGROUP)) {\n container.classList.add(CLASSNAMES.INPUTGROUP);\n }\n _internalRipple(true, container, button);\n return button;\n }\n Input.prependSpan = prependSpan;\n /**\n * Creates a new span element with the given icons added and append it in container element.\n * ```\n * E.g : Input.appendSpan('e-icon-spin', inputObj.container);\n * ```\n *\n * @param {string} iconClass - Icon classes which are need to add to the span element which is going to created.\n * Span element acts as icon or button element for input.\n * @param {HTMLElement} container - The container on which created span element is going to append.\n */\n function appendSpan(iconClass, container, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n var button = createIconEle(iconClass, makeElement);\n if (!container.classList.contains(CLASSNAMES.INPUTGROUP)) {\n container.classList.add(CLASSNAMES.INPUTGROUP);\n }\n var wrap = (container.classList.contains('e-float-icon-left')) ? container.querySelector('.e-input-in-wrap') :\n container;\n wrap.appendChild(button);\n _internalRipple(true, container, button);\n return button;\n }\n Input.appendSpan = appendSpan;\n function validateInputType(containerElement, input) {\n if (input.type === 'hidden') {\n containerElement.classList.add('e-hidden');\n }\n else if (containerElement.classList.contains('e-hidden')) {\n containerElement.classList.remove('e-hidden');\n }\n }\n Input.validateInputType = validateInputType;\n})(Input || (Input = {}));\n/* eslint-enable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Property, Event, Browser, L10n, getUniqueID } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { attributes, addClass, removeClass, detach, closest } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, getValue, formatUnit, setValue, merge } from '@syncfusion/ej2-base';\nimport { Internationalization, getNumericObject } from '@syncfusion/ej2-base';\nimport { Input } from '../input/input';\nvar ROOT = 'e-control-wrapper e-numeric';\nvar SPINICON = 'e-input-group-icon';\nvar SPINUP = 'e-spin-up';\nvar SPINDOWN = 'e-spin-down';\nvar ERROR = 'e-error';\nvar INCREMENT = 'increment';\nvar DECREMENT = 'decrement';\nvar INTREGEXP = new RegExp('^(-)?(\\\\d*)$');\nvar DECIMALSEPARATOR = '.';\nvar COMPONENT = 'e-numerictextbox';\nvar CONTROL = 'e-control';\nvar NUMERIC_FOCUS = 'e-input-focus';\nvar HIDDENELEMENT = 'e-numeric-hidden';\nvar wrapperAttributes = ['title', 'style', 'class'];\nvar selectionTimeOut = 0;\n/**\n * Represents the NumericTextBox component that allows the user to enter only numeric values.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar NumericTextBox = /** @class */ (function (_super) {\n __extends(NumericTextBox, _super);\n /**\n *\n * @param {NumericTextBoxModel} options - Specifies the NumericTextBox model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function NumericTextBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isVue = false;\n _this.preventChange = false;\n _this.isAngular = false;\n _this.isDynamicChange = false;\n _this.numericOptions = options;\n return _this;\n }\n NumericTextBox.prototype.preRender = function () {\n this.isPrevFocused = false;\n this.decimalSeparator = '.';\n // eslint-disable-next-line no-useless-escape\n this.intRegExp = new RegExp('/^(-)?(\\d*)$/');\n this.isCalled = false;\n var ejInstance = getValue('ej2_instances', this.element);\n this.cloneElement = this.element.cloneNode(true);\n removeClass([this.cloneElement], [CONTROL, COMPONENT, 'e-lib']);\n this.angularTagName = null;\n this.formEle = closest(this.element, 'form');\n if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {\n this.angularTagName = this.element.tagName;\n var input = this.createElement('input');\n var index = 0;\n for (index; index < this.element.attributes.length; index++) {\n var attributeName = this.element.attributes[index].nodeName;\n if (attributeName !== 'id' && attributeName !== 'class') {\n input.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);\n input.innerHTML = this.element.innerHTML;\n }\n else if (attributeName === 'class') {\n input.setAttribute(attributeName, this.element.className.split(' ').filter(function (item) { return item.indexOf('ng-') !== 0; }).join(' '));\n }\n }\n if (this.element.hasAttribute('name')) {\n this.element.removeAttribute('name');\n }\n this.element.classList.remove('e-control', 'e-numerictextbox');\n this.element.appendChild(input);\n this.element = input;\n setValue('ej2_instances', ejInstance, this.element);\n }\n attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off' });\n var localeText = {\n incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: this.placeholder\n };\n this.l10n = new L10n('numerictextbox', localeText, this.locale);\n if (this.l10n.getConstant('placeholder') !== '') {\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n }\n if (!this.element.hasAttribute('id')) {\n this.element.setAttribute('id', getUniqueID('numerictextbox'));\n }\n this.isValidState = true;\n this.inputStyle = null;\n this.inputName = null;\n this.cultureInfo = {};\n this.initCultureInfo();\n this.initCultureFunc();\n this.prevValue = this.value;\n this.updateHTMLAttrToElement();\n this.checkAttributes(false);\n if (this.formEle) {\n this.inputEleValue = this.value;\n }\n this.validateMinMax();\n this.validateStep();\n if (this.placeholder === null) {\n this.updatePlaceholder();\n }\n };\n /**\n * To Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n NumericTextBox.prototype.render = function () {\n if (this.element.tagName.toLowerCase() === 'input') {\n this.createWrapper();\n if (this.showSpinButton) {\n this.spinBtnCreation();\n }\n this.setElementWidth(this.width);\n if (!this.container.classList.contains('e-input-group')) {\n this.container.classList.add('e-input-group');\n }\n this.changeValue(this.value === null || isNaN(this.value) ?\n null : this.strictMode ? this.trimValue(this.value) : this.value);\n this.wireEvents();\n if (this.value !== null && !isNaN(this.value)) {\n if (this.decimals) {\n this.setProperties({ value: this.roundNumber(this.value, this.decimals) }, true);\n }\n }\n if (this.element.getAttribute('value') || this.value) {\n this.element.setAttribute('value', this.element.value);\n this.hiddenInput.setAttribute('value', this.hiddenInput.value);\n }\n this.elementPrevValue = this.element.value;\n if (this.element.hasAttribute('data-val')) {\n this.element.setAttribute('data-val', 'false');\n }\n if (!isNullOrUndefined(closest(this.element, \"fieldset\")) && closest(this.element, \"fieldset\").disabled) {\n this.enabled = false;\n }\n this.renderComplete();\n }\n };\n NumericTextBox.prototype.checkAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['value', 'min', 'max', 'step', 'disabled', 'readonly', 'style', 'name', 'placeholder'];\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.element.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.element.getAttribute(prop) === 'disabled' || this.element.getAttribute(prop) === ''\n || this.element.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.element.getAttribute(prop) === 'readonly' || this.element.getAttribute(prop) === ''\n || this.element.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.element.placeholder }, !isDynamic);\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['value'] === undefined)) || isDynamic) {\n var setNumber = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n this.setProperties(setValue(prop, setNumber, {}), !isDynamic);\n }\n break;\n case 'min':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['min'] === undefined)) || isDynamic) {\n var minValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (minValue !== null && !isNaN(minValue)) {\n this.setProperties(setValue(prop, minValue, {}), !isDynamic);\n }\n }\n break;\n case 'max':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['max'] === undefined)) || isDynamic) {\n var maxValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (maxValue !== null && !isNaN(maxValue)) {\n this.setProperties(setValue(prop, maxValue, {}), !isDynamic);\n }\n }\n break;\n case 'step':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['step'] === undefined)) || isDynamic) {\n var stepValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (stepValue !== null && !isNaN(stepValue)) {\n this.setProperties(setValue(prop, stepValue, {}), !isDynamic);\n }\n }\n break;\n case 'style':\n this.inputStyle = this.element.getAttribute(prop);\n break;\n case 'name':\n this.inputName = this.element.getAttribute(prop);\n break;\n default:\n {\n var value = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if ((value !== null && !isNaN(value)) || (prop === 'value')) {\n this.setProperties(setValue(prop, value, {}), true);\n }\n }\n break;\n }\n }\n }\n };\n NumericTextBox.prototype.updatePlaceholder = function () {\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n };\n NumericTextBox.prototype.initCultureFunc = function () {\n this.instance = new Internationalization(this.locale);\n };\n NumericTextBox.prototype.initCultureInfo = function () {\n this.cultureInfo.format = this.format;\n if (getValue('currency', this) !== null) {\n setValue('currency', this.currency, this.cultureInfo);\n this.setProperties({ currencyCode: this.currency }, true);\n }\n };\n /* Wrapper creation */\n NumericTextBox.prototype.createWrapper = function () {\n var updatedCssClassValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValue = this.getNumericValidClassList(this.cssClass);\n }\n var inputObj = Input.createInput({\n element: this.element,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassValue,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton,\n enabled: this.enabled\n }\n }, this.createElement);\n this.inputWrapper = inputObj;\n this.container = inputObj.container;\n this.container.setAttribute('class', ROOT + ' ' + this.container.getAttribute('class'));\n this.updateHTMLAttrToWrapper();\n if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n this.hiddenInput = (this.createElement('input', { attrs: { type: 'text',\n 'validateHidden': 'true', 'class': HIDDENELEMENT } }));\n this.inputName = this.inputName !== null ? this.inputName : this.element.id;\n this.element.removeAttribute('name');\n attributes(this.hiddenInput, { 'name': this.inputName });\n this.container.insertBefore(this.hiddenInput, this.container.childNodes[1]);\n this.updateDataAttribute(false);\n if (this.inputStyle !== null) {\n attributes(this.container, { 'style': this.inputStyle });\n }\n };\n NumericTextBox.prototype.updateDataAttribute = function (isDynamic) {\n var attr = {};\n if (!isDynamic) {\n for (var a = 0; a < this.element.attributes.length; a++) {\n attr[this.element.attributes[a].name] = this.element.getAttribute(this.element.attributes[a].name);\n }\n }\n else {\n attr = this.htmlAttributes;\n }\n for (var _i = 0, _a = Object.keys(attr); _i < _a.length; _i++) {\n var key = _a[_i];\n if (key.indexOf('data') === 0) {\n this.hiddenInput.setAttribute(key, attr[\"\" + key]);\n }\n }\n };\n NumericTextBox.prototype.updateHTMLAttrToElement = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var pro = _a[_i];\n if (wrapperAttributes.indexOf(pro) < 0) {\n this.element.setAttribute(pro, this.htmlAttributes[\"\" + pro]);\n }\n }\n }\n };\n NumericTextBox.prototype.updateCssClass = function (newClass, oldClass) {\n Input.setCssClass(this.getNumericValidClassList(newClass), [this.container], this.getNumericValidClassList(oldClass));\n };\n NumericTextBox.prototype.getNumericValidClassList = function (numericClassName) {\n var result = numericClassName;\n if (!isNullOrUndefined(numericClassName) && numericClassName !== '') {\n result = (numericClassName.replace(/\\s+/g, ' ')).trim();\n }\n return result;\n };\n NumericTextBox.prototype.updateHTMLAttrToWrapper = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var pro = _a[_i];\n if (wrapperAttributes.indexOf(pro) > -1) {\n if (pro === 'class') {\n var updatedClassValue = this.getNumericValidClassList(this.htmlAttributes[\"\" + pro]);\n if (updatedClassValue !== '') {\n addClass([this.container], updatedClassValue.split(' '));\n }\n }\n else if (pro === 'style') {\n var numericStyle = this.container.getAttribute(pro);\n numericStyle = !isNullOrUndefined(numericStyle) ? (numericStyle + this.htmlAttributes[\"\" + pro]) :\n this.htmlAttributes[\"\" + pro];\n this.container.setAttribute(pro, numericStyle);\n }\n else {\n this.container.setAttribute(pro, this.htmlAttributes[\"\" + pro]);\n }\n }\n }\n }\n };\n NumericTextBox.prototype.setElementWidth = function (width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.container.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.container.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n };\n /* Spinner creation */\n NumericTextBox.prototype.spinBtnCreation = function () {\n this.spinDown = Input.appendSpan(SPINICON + ' ' + SPINDOWN, this.container, this.createElement);\n attributes(this.spinDown, {\n 'title': this.l10n.getConstant('decrementTitle')\n });\n this.spinUp = Input.appendSpan(SPINICON + ' ' + SPINUP, this.container, this.createElement);\n attributes(this.spinUp, {\n 'title': this.l10n.getConstant('incrementTitle')\n });\n this.wireSpinBtnEvents();\n };\n NumericTextBox.prototype.validateMinMax = function () {\n if (!(typeof (this.min) === 'number' && !isNaN(this.min))) {\n this.setProperties({ min: -(Number.MAX_VALUE) }, true);\n }\n if (!(typeof (this.max) === 'number' && !isNaN(this.max))) {\n this.setProperties({ max: Number.MAX_VALUE }, true);\n }\n if (this.decimals !== null) {\n if (this.min !== -(Number.MAX_VALUE)) {\n this.setProperties({ min: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.min)) }, true);\n }\n if (this.max !== (Number.MAX_VALUE)) {\n this.setProperties({ max: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.max)) }, true);\n }\n }\n this.setProperties({ min: this.min > this.max ? this.max : this.min }, true);\n if (this.min !== -(Number.MAX_VALUE)) {\n attributes(this.element, { 'aria-valuemin': this.min.toString() });\n }\n if (this.max !== (Number.MAX_VALUE)) {\n attributes(this.element, { 'aria-valuemax': this.max.toString() });\n }\n };\n NumericTextBox.prototype.formattedValue = function (decimals, value) {\n return this.instance.getNumberFormat({\n maximumFractionDigits: decimals,\n minimumFractionDigits: decimals, useGrouping: false\n })(value);\n };\n NumericTextBox.prototype.validateStep = function () {\n if (this.decimals !== null) {\n this.setProperties({ step: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.step)) }, true);\n }\n };\n NumericTextBox.prototype.action = function (operation, event) {\n this.isInteract = true;\n var value = this.isFocused ? this.instance.getNumberParser({ format: 'n' })(this.element.value) : this.value;\n this.changeValue(this.performAction(value, this.step, operation));\n this.raiseChangeEvent(event);\n };\n NumericTextBox.prototype.checkErrorClass = function () {\n if (this.isValidState) {\n removeClass([this.container], ERROR);\n }\n else {\n addClass([this.container], ERROR);\n }\n attributes(this.element, { 'aria-invalid': this.isValidState ? 'false' : 'true' });\n };\n NumericTextBox.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);\n }\n };\n NumericTextBox.prototype.resetHandler = function (e) {\n e.preventDefault();\n if (!(this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide')) || this.inputWrapper.container.classList.contains('e-static-clear')) {\n this.clear(e);\n }\n this.isInteract = true;\n this.raiseChangeEvent(e);\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n NumericTextBox.prototype.clear = function (event) {\n this.setProperties({ value: null }, true);\n this.setElementValue('');\n this.hiddenInput.value = '';\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.resetFormHandler = function () {\n if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {\n this.updateValue(null);\n }\n else {\n this.updateValue(this.inputEleValue);\n }\n };\n NumericTextBox.prototype.setSpinButton = function () {\n if (!isNullOrUndefined(this.spinDown)) {\n attributes(this.spinDown, {\n 'title': this.l10n.getConstant('decrementTitle'),\n 'aria-label': this.l10n.getConstant('decrementTitle')\n });\n }\n if (!isNullOrUndefined(this.spinUp)) {\n attributes(this.spinUp, {\n 'title': this.l10n.getConstant('incrementTitle'),\n 'aria-label': this.l10n.getConstant('incrementTitle')\n });\n }\n };\n NumericTextBox.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'blur', this.focusOutHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'input', this.inputHandler, this);\n EventHandler.add(this.element, 'keypress', this.keyPressHandler, this);\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n EventHandler.add(this.element, 'paste', this.pasteHandler, this);\n if (this.enabled) {\n this.bindClearEvent();\n if (this.formEle) {\n EventHandler.add(this.formEle, 'reset', this.resetFormHandler, this);\n }\n }\n };\n NumericTextBox.prototype.wireSpinBtnEvents = function () {\n /* bind spin button events */\n EventHandler.add(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner, this);\n EventHandler.add(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner, this);\n EventHandler.add(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);\n };\n NumericTextBox.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'blur', this.focusOutHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n EventHandler.remove(this.element, 'input', this.inputHandler);\n EventHandler.remove(this.element, 'keydown', this.keyDownHandler);\n EventHandler.remove(this.element, 'keypress', this.keyPressHandler);\n EventHandler.remove(this.element, 'change', this.changeHandler);\n EventHandler.remove(this.element, 'paste', this.pasteHandler);\n if (this.formEle) {\n EventHandler.remove(this.formEle, 'reset', this.resetFormHandler);\n }\n };\n NumericTextBox.prototype.unwireSpinBtnEvents = function () {\n /* unbind spin button events */\n EventHandler.remove(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner);\n EventHandler.remove(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner);\n EventHandler.remove(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner);\n };\n NumericTextBox.prototype.changeHandler = function (event) {\n event.stopPropagation();\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n }\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput, event);\n };\n NumericTextBox.prototype.raiseChangeEvent = function (event) {\n if (this.prevValue !== this.value) {\n var eventArgs = {};\n this.changeEventArgs = { value: this.value, previousValue: this.prevValue, isInteracted: this.isInteract,\n isInteraction: this.isInteract, event: event };\n if (event) {\n this.changeEventArgs.event = event;\n }\n if (this.changeEventArgs.event === undefined) {\n this.changeEventArgs.isInteracted = false;\n this.changeEventArgs.isInteraction = false;\n }\n merge(eventArgs, this.changeEventArgs);\n this.prevValue = this.value;\n this.isInteract = false;\n this.elementPrevValue = this.element.value;\n this.preventChange = false;\n this.trigger('change', eventArgs);\n }\n };\n NumericTextBox.prototype.pasteHandler = function () {\n var _this = this;\n if (!this.enabled || this.readonly) {\n return;\n }\n var beforeUpdate = this.element.value;\n setTimeout(function () {\n if (!_this.numericRegex().test(_this.element.value)) {\n _this.setElementValue(beforeUpdate);\n }\n });\n };\n NumericTextBox.prototype.preventHandler = function () {\n var _this = this;\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n setTimeout(function () {\n if (_this.element.selectionStart > 0) {\n var currentPos = _this.element.selectionStart;\n var prevPos = _this.element.selectionStart - 1;\n var start = 0;\n var valArray = _this.element.value.split('');\n var numericObject = getNumericObject(_this.locale);\n var decimalSeparator = getValue('decimal', numericObject);\n var ignoreKeyCode = decimalSeparator.charCodeAt(0);\n if (_this.element.value[prevPos] === ' ' && _this.element.selectionStart > 0 && !iOS) {\n if (isNullOrUndefined(_this.prevVal)) {\n _this.element.value = _this.element.value.trim();\n }\n else if (prevPos !== 0) {\n _this.element.value = _this.prevVal;\n }\n else if (prevPos === 0) {\n _this.element.value = _this.element.value.trim();\n }\n _this.element.setSelectionRange(prevPos, prevPos);\n }\n else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) &&\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== 45) {\n if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 1]) !==\n valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 1]) &&\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === ignoreKeyCode) ||\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== ignoreKeyCode) {\n _this.element.value = _this.element.value.substring(0, prevPos) +\n _this.element.value.substring(currentPos, _this.element.value.length);\n _this.element.setSelectionRange(prevPos, prevPos);\n if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) && _this.element.selectionStart > 0\n && _this.element.value.length) {\n _this.preventHandler();\n }\n }\n }\n else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 2])) && _this.element.selectionStart > 1 &&\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== 45) {\n if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 2]) !==\n valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 2]) &&\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) === ignoreKeyCode) ||\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== ignoreKeyCode) {\n _this.element.setSelectionRange(prevPos, prevPos);\n _this.nextEle = _this.element.value[_this.element.selectionStart];\n _this.cursorPosChanged = true;\n _this.preventHandler();\n }\n }\n if (_this.cursorPosChanged === true && _this.element.value[_this.element.selectionStart] === _this.nextEle &&\n isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1]))) {\n _this.element.setSelectionRange(_this.element.selectionStart + 1, _this.element.selectionStart + 1);\n _this.cursorPosChanged = false;\n _this.nextEle = null;\n }\n if (_this.element.value.trim() === '') {\n _this.element.setSelectionRange(start, start);\n }\n if (_this.element.selectionStart > 0) {\n if ((_this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === 45) && _this.element.selectionStart > 1) {\n if (isNullOrUndefined(_this.prevVal)) {\n // eslint-disable-next-line no-self-assign\n _this.element.value = _this.element.value;\n }\n else {\n _this.element.value = _this.prevVal;\n }\n _this.element.setSelectionRange(_this.element.selectionStart, _this.element.selectionStart);\n }\n if (_this.element.value[_this.element.selectionStart - 1] === decimalSeparator && _this.decimals === 0 && _this.validateDecimalOnType) {\n _this.element.value = _this.element.value.substring(0, prevPos) +\n _this.element.value.substring(currentPos, _this.element.value.length);\n }\n }\n _this.prevVal = _this.element.value;\n }\n });\n };\n NumericTextBox.prototype.keyUpHandler = function () {\n if (!this.enabled || this.readonly) {\n return;\n }\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n if (!iOS && Browser.isDevice) {\n this.preventHandler();\n }\n var parseValue = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n parseValue = parseValue === null || isNaN(parseValue) ? null : parseValue;\n this.hiddenInput.value = parseValue || parseValue === 0 ? parseValue.toString() : null;\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.inputHandler = function (event) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias\n var numerictextboxObj = this;\n if (!this.enabled || this.readonly) {\n return;\n }\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n var fireFox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n if ((fireFox || iOS) && Browser.isDevice) {\n this.preventHandler();\n }\n /* istanbul ignore next */\n if (this.isAngular\n && this.element.value !== getValue('decimal', getNumericObject(this.locale))\n && this.element.value !== getValue('minusSign', getNumericObject(this.locale))) {\n var parsedValue = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n parsedValue = isNaN(parsedValue) ? null : parsedValue;\n numerictextboxObj.localChange({ value: parsedValue });\n this.preventChange = true;\n }\n if (this.isVue) {\n var current = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n var previous = this.instance.getNumberParser({ format: 'n' })(this.elementPrevValue);\n //EJ2-54963-if type \".\" or \".0\" or \"-.0\" it converts to \"0\" automatically when binding v-model\n var nonZeroRegex = new RegExp('[^0-9]+$');\n if (nonZeroRegex.test(this.element.value) || ((this.elementPrevValue.indexOf('.') !== -1 || this.elementPrevValue.indexOf('-') !== -1) && this.element.value[this.element.value.length - 1] === '0')) {\n current = this.value;\n }\n var eventArgs = {\n event: event,\n value: (current === null || isNaN(current) ? null : current),\n previousValue: (previous === null || isNaN(previous) ? null : previous)\n };\n this.preventChange = true;\n this.elementPrevValue = this.element.value;\n this.trigger('input', eventArgs);\n }\n };\n NumericTextBox.prototype.keyDownHandler = function (event) {\n if (!this.readonly) {\n switch (event.keyCode) {\n case 38:\n event.preventDefault();\n this.action(INCREMENT, event);\n break;\n case 40:\n event.preventDefault();\n this.action(DECREMENT, event);\n break;\n default: break;\n }\n }\n };\n NumericTextBox.prototype.performAction = function (value, step, operation) {\n if (value === null || isNaN(value)) {\n value = 0;\n }\n var updatedValue = operation === INCREMENT ? value + step : value - step;\n updatedValue = this.correctRounding(value, step, updatedValue);\n return this.strictMode ? this.trimValue(updatedValue) : updatedValue;\n };\n NumericTextBox.prototype.correctRounding = function (value, step, result) {\n var floatExp = new RegExp('[,.](.*)');\n var floatValue = floatExp.test(value.toString());\n var floatStep = floatExp.test(step.toString());\n if (floatValue || floatStep) {\n var valueCount = floatValue ? floatExp.exec(value.toString())[0].length : 0;\n var stepCount = floatStep ? floatExp.exec(step.toString())[0].length : 0;\n var max = Math.max(valueCount, stepCount);\n return value = this.roundValue(result, max);\n }\n return result;\n };\n NumericTextBox.prototype.roundValue = function (result, precision) {\n precision = precision || 0;\n var divide = Math.pow(10, precision);\n return result *= divide, result = Math.round(result) / divide;\n };\n NumericTextBox.prototype.updateValue = function (value, event) {\n if (event) {\n this.isInteract = true;\n }\n if (value !== null && !isNaN(value)) {\n if (this.decimals) {\n value = this.roundNumber(value, this.decimals);\n }\n }\n this.changeValue(value === null || isNaN(value) ? null : this.strictMode ? this.trimValue(value) : value);\n /* istanbul ignore next */\n if (!this.isDynamicChange) {\n this.raiseChangeEvent(event);\n }\n };\n NumericTextBox.prototype.updateCurrency = function (prop, propVal) {\n setValue(prop, propVal, this.cultureInfo);\n this.updateValue(this.value);\n };\n NumericTextBox.prototype.changeValue = function (value) {\n if (!(value || value === 0)) {\n value = null;\n this.setProperties({ value: value }, true);\n }\n else {\n var numberOfDecimals = this.getNumberOfDecimals(value);\n this.setProperties({ value: this.roundNumber(value, numberOfDecimals) }, true);\n }\n this.modifyText();\n if (!this.strictMode) {\n this.validateState();\n }\n };\n NumericTextBox.prototype.modifyText = function () {\n if (this.value || this.value === 0) {\n var value = this.formatNumber();\n var elementValue = this.isFocused ? value : this.instance.getNumberFormat(this.cultureInfo)(this.value);\n this.setElementValue(elementValue);\n attributes(this.element, { 'aria-valuenow': value });\n this.hiddenInput.value = this.value.toString();\n if (this.value !== null && this.serverDecimalSeparator) {\n this.hiddenInput.value = this.hiddenInput.value.replace('.', this.serverDecimalSeparator);\n }\n }\n else {\n this.setElementValue('');\n this.element.removeAttribute('aria-valuenow');\n this.hiddenInput.value = null;\n }\n };\n NumericTextBox.prototype.setElementValue = function (val, element) {\n Input.setValue(val, (element ? element : this.element), this.floatLabelType, this.showClearButton);\n };\n NumericTextBox.prototype.validateState = function () {\n this.isValidState = true;\n if (this.value || this.value === 0) {\n this.isValidState = !(this.value > this.max || this.value < this.min);\n }\n this.checkErrorClass();\n };\n NumericTextBox.prototype.getNumberOfDecimals = function (value) {\n var numberOfDecimals;\n // eslint-disable-next-line no-useless-escape\n var EXPREGEXP = new RegExp('[eE][\\-+]?([0-9]+)');\n var valueString = value.toString();\n if (EXPREGEXP.test(valueString)) {\n var result = EXPREGEXP.exec(valueString);\n if (!isNullOrUndefined(result)) {\n valueString = value.toFixed(Math.min(parseInt(result[1], 10), 20));\n }\n }\n var decimalPart = valueString.split('.')[1];\n numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;\n if (this.decimals !== null) {\n numberOfDecimals = numberOfDecimals < this.decimals ? numberOfDecimals : this.decimals;\n }\n return numberOfDecimals;\n };\n NumericTextBox.prototype.formatNumber = function () {\n var numberOfDecimals = this.getNumberOfDecimals(this.value);\n return this.instance.getNumberFormat({\n maximumFractionDigits: numberOfDecimals,\n minimumFractionDigits: numberOfDecimals, useGrouping: false\n })(this.value);\n };\n NumericTextBox.prototype.trimValue = function (value) {\n if (value > this.max) {\n return this.max;\n }\n if (value < this.min) {\n return this.min;\n }\n return value;\n };\n NumericTextBox.prototype.roundNumber = function (value, precision) {\n var result = value;\n var decimals = precision || 0;\n var result1 = result.toString().split('e');\n result = Math.round(Number(result1[0] + 'e' + (result1[1] ? (Number(result1[1]) + decimals) : decimals)));\n var result2 = result.toString().split('e');\n result = Number(result2[0] + 'e' + (result2[1] ? (Number(result2[1]) - decimals) : -decimals));\n return Number(result.toFixed(decimals));\n };\n NumericTextBox.prototype.cancelEvent = function (event) {\n event.preventDefault();\n return false;\n };\n NumericTextBox.prototype.keyPressHandler = function (event) {\n if (!this.enabled || this.readonly) {\n return true;\n }\n if (!Browser.isDevice && Browser.info.version === '11.0' && event.keyCode === 13) {\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput, event);\n return true;\n }\n if (event.which === 0 || event.metaKey || event.ctrlKey || event.keyCode === 8 || event.keyCode === 13) {\n return true;\n }\n var currentChar = String.fromCharCode(event.which);\n var decimalSeparator = getValue('decimal', getNumericObject(this.locale));\n var isAlterNumPadDecimalChar = event.code === \"NumpadDecimal\" && currentChar !== decimalSeparator;\n //EJ2-59813-replace the culture decimal separator value with numberpad decimal separator value when culture decimal separator and numberpad decimal separator are different\n if (isAlterNumPadDecimalChar) {\n currentChar = decimalSeparator;\n }\n var text = this.element.value;\n text = text.substring(0, this.element.selectionStart) + currentChar + text.substring(this.element.selectionEnd);\n if (!this.numericRegex().test(text)) {\n event.preventDefault();\n event.stopPropagation();\n return false;\n }\n else {\n //EJ2-59813-update the numberpad decimal separator and update the cursor position\n if (isAlterNumPadDecimalChar) {\n var start = this.element.selectionStart + 1;\n this.element.value = text;\n this.element.setSelectionRange(start, start);\n event.preventDefault();\n event.stopPropagation();\n }\n return true;\n }\n };\n NumericTextBox.prototype.numericRegex = function () {\n var numericObject = getNumericObject(this.locale);\n var decimalSeparator = getValue('decimal', numericObject);\n var fractionRule = '*';\n if (decimalSeparator === DECIMALSEPARATOR) {\n decimalSeparator = '\\\\' + decimalSeparator;\n }\n if (this.decimals === 0 && this.validateDecimalOnType) {\n return INTREGEXP;\n }\n if (this.decimals && this.validateDecimalOnType) {\n fractionRule = '{0,' + this.decimals + '}';\n }\n // eslint-disable-next-line detect-non-literal-regexp\n return new RegExp('^(-)?(((\\\\d+(' + decimalSeparator + '\\\\d' + fractionRule +\n ')?)|(' + decimalSeparator + '\\\\d' + fractionRule + ')))?$');\n };\n NumericTextBox.prototype.mouseWheel = function (event) {\n event.preventDefault();\n var delta;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var rawEvent = event;\n if (rawEvent.wheelDelta) {\n delta = rawEvent.wheelDelta / 120;\n }\n else if (rawEvent.detail) {\n delta = -rawEvent.detail / 3;\n }\n if (delta > 0) {\n this.action(INCREMENT, event);\n }\n else if (delta < 0) {\n this.action(DECREMENT, event);\n }\n this.cancelEvent(event);\n };\n NumericTextBox.prototype.focusHandler = function (event) {\n var _this = this;\n clearTimeout(selectionTimeOut);\n this.focusEventArgs = { event: event, value: this.value, container: this.container };\n this.trigger('focus', this.focusEventArgs);\n if (!this.enabled || this.readonly) {\n return;\n }\n this.isFocused = true;\n removeClass([this.container], ERROR);\n this.prevValue = this.value;\n if ((this.value || this.value === 0)) {\n var formatValue_1 = this.formatNumber();\n this.setElementValue(formatValue_1);\n if (!this.isPrevFocused) {\n if (!Browser.isDevice && Browser.info.version === '11.0') {\n this.element.setSelectionRange(0, formatValue_1.length);\n }\n else {\n var delay = (Browser.isDevice && Browser.isIos) ? 600 : 0;\n selectionTimeOut = setTimeout(function () {\n _this.element.setSelectionRange(0, formatValue_1.length);\n }, delay);\n }\n }\n }\n if (!Browser.isDevice) {\n EventHandler.add(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel, this);\n }\n };\n NumericTextBox.prototype.focusOutHandler = function (event) {\n var _this = this;\n this.blurEventArgs = { event: event, value: this.value, container: this.container };\n this.trigger('blur', this.blurEventArgs);\n if (!this.enabled || this.readonly) {\n return;\n }\n if (this.isPrevFocused) {\n event.preventDefault();\n if (Browser.isDevice) {\n var value_1 = this.element.value;\n this.element.focus();\n this.isPrevFocused = false;\n var ele_1 = this.element;\n setTimeout(function () {\n _this.setElementValue(value_1, ele_1);\n }, 200);\n }\n }\n else {\n this.isFocused = false;\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n }\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput);\n if (!Browser.isDevice) {\n EventHandler.remove(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel);\n }\n }\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var focusEvent = document.createEvent('FocusEvent');\n focusEvent.initEvent('focusout', false, true);\n element.dispatchEvent(focusEvent);\n }\n };\n NumericTextBox.prototype.mouseDownOnSpinner = function (event) {\n var _this = this;\n if (this.isFocused) {\n this.isPrevFocused = true;\n event.preventDefault();\n }\n if (!this.getElementData(event)) {\n return;\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var result = this.getElementData(event);\n var target = event.currentTarget;\n var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;\n EventHandler.add(target, 'mouseleave', this.mouseUpClick, this);\n this.timeOut = setInterval(function () {\n _this.isCalled = true;\n _this.action(action, event);\n }, 150);\n EventHandler.add(document, 'mouseup', this.mouseUpClick, this);\n };\n NumericTextBox.prototype.touchMoveOnSpinner = function (event) {\n var target;\n if (event.type === \"touchmove\") {\n var touchEvent = event.touches;\n target = touchEvent.length && document.elementFromPoint(touchEvent[0].pageX, touchEvent[0].pageY);\n }\n else {\n target = document.elementFromPoint(event.clientX, event.clientY);\n }\n if (!(target.classList.contains(SPINICON))) {\n clearInterval(this.timeOut);\n }\n };\n NumericTextBox.prototype.mouseUpOnSpinner = function (event) {\n this.prevValue = this.value;\n if (this.isPrevFocused) {\n this.element.focus();\n if (!Browser.isDevice) {\n this.isPrevFocused = false;\n }\n }\n if (!Browser.isDevice) {\n event.preventDefault();\n }\n if (!this.getElementData(event)) {\n return;\n }\n var target = event.currentTarget;\n var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;\n EventHandler.remove(target, 'mouseleave', this.mouseUpClick);\n if (!this.isCalled) {\n this.action(action, event);\n }\n this.isCalled = false;\n EventHandler.remove(document, 'mouseup', this.mouseUpClick);\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.getElementData = function (event) {\n if ((event.which && event.which === 3) || (event.button && event.button === 2)\n || !this.enabled || this.readonly) {\n return false;\n }\n clearInterval(this.timeOut);\n return true;\n };\n NumericTextBox.prototype.floatLabelTypeUpdate = function () {\n Input.removeFloating(this.inputWrapper);\n var hiddenInput = this.hiddenInput;\n this.hiddenInput.remove();\n Input.addFloating(this.element, this.floatLabelType, this.placeholder, this.createElement);\n this.container.insertBefore(hiddenInput, this.container.childNodes[1]);\n };\n NumericTextBox.prototype.mouseUpClick = function (event) {\n event.stopPropagation();\n clearInterval(this.timeOut);\n this.isCalled = false;\n EventHandler.remove(this.spinUp, 'mouseleave', this.mouseUpClick);\n EventHandler.remove(this.spinDown, 'mouseleave', this.mouseUpClick);\n };\n /**\n * Increments the NumericTextBox value with the specified step value.\n *\n * @param {number} step - Specifies the value used to increment the NumericTextBox value.\n * if its not given then numeric value will be incremented based on the step property value.\n * @returns {void}\n */\n NumericTextBox.prototype.increment = function (step) {\n if (step === void 0) { step = this.step; }\n this.isInteract = false;\n this.changeValue(this.performAction(this.value, step, INCREMENT));\n this.raiseChangeEvent();\n };\n /**\n * Decrements the NumericTextBox value with specified step value.\n *\n * @param {number} step - Specifies the value used to decrement the NumericTextBox value.\n * if its not given then numeric value will be decremented based on the step property value.\n * @returns {void}\n */\n NumericTextBox.prototype.decrement = function (step) {\n if (step === void 0) { step = this.step; }\n this.isInteract = false;\n this.changeValue(this.performAction(this.value, step, DECREMENT));\n this.raiseChangeEvent();\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it maintains the initial input element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n NumericTextBox.prototype.destroy = function () {\n this.unwireEvents();\n detach(this.hiddenInput);\n if (this.showSpinButton) {\n this.unwireSpinBtnEvents();\n detach(this.spinUp);\n detach(this.spinDown);\n }\n var attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',\n 'aria-disabled', 'autocapitalize', 'spellcheck', 'aria-autocomplete', 'tabindex',\n 'aria-valuemin', 'aria-valuemax', 'aria-valuenow', 'aria-invalid'];\n for (var i = 0; i < attrArray.length; i++) {\n this.element.removeAttribute(attrArray[i]);\n }\n this.element.classList.remove('e-input');\n this.container.insertAdjacentElement('afterend', this.element);\n detach(this.container);\n this.spinUp = null;\n this.spinDown = null;\n this.container = null;\n this.hiddenInput = null;\n this.changeEventArgs = null;\n this.blurEventArgs = null;\n this.focusEventArgs = null;\n this.inputWrapper = null;\n Input.destroy();\n _super.prototype.destroy.call(this);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns */\n /**\n * Returns the value of NumericTextBox with the format applied to the NumericTextBox.\n *\n */\n NumericTextBox.prototype.getText = function () {\n return this.element.value;\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns */\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n NumericTextBox.prototype.focusIn = function () {\n if (document.activeElement !== this.element && this.enabled) {\n this.element.focus();\n addClass([this.container], [NUMERIC_FOCUS]);\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n NumericTextBox.prototype.focusOut = function () {\n if (document.activeElement === this.element && this.enabled) {\n this.element.blur();\n removeClass([this.container], [NUMERIC_FOCUS]);\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n * @returns {string}\n */\n NumericTextBox.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Calls internally if any of the property value is changed.\n *\n * @param {NumericTextBoxModel} newProp - Returns the dynamic property value of the component.\n * @param {NumericTextBoxModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n NumericTextBox.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 'width':\n this.setElementWidth(newProp.width);\n Input.calculateWidth(this.element, this.container);\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'enabled':\n Input.setEnabled(newProp.enabled, this.element);\n this.bindClearEvent();\n break;\n case 'enableRtl':\n Input.setEnableRtl(newProp.enableRtl, [this.container]);\n break;\n case 'readonly':\n Input.setReadonly(newProp.readonly, this.element);\n if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n else {\n this.element.removeAttribute('aria-readonly');\n }\n break;\n case 'htmlAttributes':\n this.updateHTMLAttrToElement();\n this.updateHTMLAttrToWrapper();\n this.updateDataAttribute(true);\n this.checkAttributes(true);\n Input.validateInputType(this.container, this.element);\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.element);\n Input.calculateWidth(this.element, this.container);\n break;\n case 'step':\n this.step = newProp.step;\n this.validateStep();\n break;\n case 'showSpinButton':\n this.updateSpinButton(newProp);\n break;\n case 'showClearButton':\n this.updateClearButton(newProp);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n this.floatLabelTypeUpdate();\n break;\n case 'value':\n this.isDynamicChange = (this.isAngular || this.isVue) && this.preventChange;\n this.updateValue(newProp.value);\n if (this.isDynamicChange) {\n this.preventChange = false;\n this.isDynamicChange = false;\n }\n break;\n case 'min':\n case 'max':\n setValue(prop, getValue(prop, newProp), this);\n this.validateMinMax();\n this.updateValue(this.value);\n break;\n case 'strictMode':\n this.strictMode = newProp.strictMode;\n this.updateValue(this.value);\n this.validateState();\n break;\n case 'locale':\n this.initCultureFunc();\n this.l10n.setLocale(this.locale);\n this.setSpinButton();\n this.updatePlaceholder();\n Input.setPlaceholder(this.placeholder, this.element);\n this.updateValue(this.value);\n break;\n case 'currency':\n {\n var propVal = getValue(prop, newProp);\n this.setProperties({ currencyCode: propVal }, true);\n this.updateCurrency(prop, propVal);\n }\n break;\n case 'currencyCode':\n {\n var propValue = getValue(prop, newProp);\n this.setProperties({ currency: propValue }, true);\n this.updateCurrency('currency', propValue);\n }\n break;\n case 'format':\n setValue(prop, getValue(prop, newProp), this);\n this.initCultureInfo();\n this.updateValue(this.value);\n break;\n case 'decimals':\n this.decimals = newProp.decimals;\n this.updateValue(this.value);\n }\n }\n };\n NumericTextBox.prototype.updateClearButton = function (newProp) {\n Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper, undefined, this.createElement);\n this.bindClearEvent();\n };\n NumericTextBox.prototype.updateSpinButton = function (newProp) {\n if (newProp.showSpinButton) {\n this.spinBtnCreation();\n }\n else {\n detach(this.spinUp);\n detach(this.spinDown);\n }\n };\n /**\n * Gets the component name\n *\n * @returns {string} Returns the component name.\n * @private\n */\n NumericTextBox.prototype.getModuleName = function () {\n return 'numerictextbox';\n };\n __decorate([\n Property('')\n ], NumericTextBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"value\", void 0);\n __decorate([\n Property(-(Number.MAX_VALUE))\n ], NumericTextBox.prototype, \"min\", void 0);\n __decorate([\n Property(Number.MAX_VALUE)\n ], NumericTextBox.prototype, \"max\", void 0);\n __decorate([\n Property(1)\n ], NumericTextBox.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"placeholder\", void 0);\n __decorate([\n Property({})\n ], NumericTextBox.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"showSpinButton\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"readonly\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property('n2')\n ], NumericTextBox.prototype, \"format\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"decimals\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"currency\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"currencyCode\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"strictMode\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"validateDecimalOnType\", void 0);\n __decorate([\n Property('Never')\n ], NumericTextBox.prototype, \"floatLabelType\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"blur\", void 0);\n NumericTextBox = __decorate([\n NotifyPropertyChanges\n ], NumericTextBox);\n return NumericTextBox;\n}(Component));\nexport { NumericTextBox };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Property, Event, Complex, Collection } from '@syncfusion/ej2-base';\nimport { L10n, Internationalization } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty } from '@syncfusion/ej2-base';\nimport { attributes, addClass, removeClass, setStyleAttribute, detach, closest } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit, Browser, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { Tooltip, getZindexPartial } from '@syncfusion/ej2-popups';\n/**\n * Configures the ticks data of the Slider.\n */\nvar TicksData = /** @class */ (function (_super) {\n __extends(TicksData, _super);\n function TicksData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('None')\n ], TicksData.prototype, \"placement\", void 0);\n __decorate([\n Property(10)\n ], TicksData.prototype, \"largeStep\", void 0);\n __decorate([\n Property(1)\n ], TicksData.prototype, \"smallStep\", void 0);\n __decorate([\n Property(false)\n ], TicksData.prototype, \"showSmallTicks\", void 0);\n __decorate([\n Property(null)\n ], TicksData.prototype, \"format\", void 0);\n return TicksData;\n}(ChildProperty));\nexport { TicksData };\n/**\n * It illustrates the color track data in slider.\n * {% codeBlock src='slider/colorrange/index.md' %}{% endcodeBlock %}\n */\nvar ColorRangeData = /** @class */ (function (_super) {\n __extends(ColorRangeData, _super);\n function ColorRangeData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], ColorRangeData.prototype, \"color\", void 0);\n __decorate([\n Property(null)\n ], ColorRangeData.prototype, \"start\", void 0);\n __decorate([\n Property(null)\n ], ColorRangeData.prototype, \"end\", void 0);\n return ColorRangeData;\n}(ChildProperty));\nexport { ColorRangeData };\n/**\n * It illustrates the limit data in slider.\n * {% codeBlock src='slider/limits/index.md' %}{% endcodeBlock %}\n */\nvar LimitData = /** @class */ (function (_super) {\n __extends(LimitData, _super);\n function LimitData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], LimitData.prototype, \"enabled\", void 0);\n __decorate([\n Property(null)\n ], LimitData.prototype, \"minStart\", void 0);\n __decorate([\n Property(null)\n ], LimitData.prototype, \"minEnd\", void 0);\n __decorate([\n Property(null)\n ], LimitData.prototype, \"maxStart\", void 0);\n __decorate([\n Property(null)\n ], LimitData.prototype, \"maxEnd\", void 0);\n __decorate([\n Property(false)\n ], LimitData.prototype, \"startHandleFixed\", void 0);\n __decorate([\n Property(false)\n ], LimitData.prototype, \"endHandleFixed\", void 0);\n return LimitData;\n}(ChildProperty));\nexport { LimitData };\n/**\n * It illustrates the tooltip data in slider.\n */\nvar TooltipData = /** @class */ (function (_super) {\n __extends(TooltipData, _super);\n function TooltipData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], TooltipData.prototype, \"cssClass\", void 0);\n __decorate([\n Property('Before')\n ], TooltipData.prototype, \"placement\", void 0);\n __decorate([\n Property('Focus')\n ], TooltipData.prototype, \"showOn\", void 0);\n __decorate([\n Property(false)\n ], TooltipData.prototype, \"isVisible\", void 0);\n __decorate([\n Property(null)\n ], TooltipData.prototype, \"format\", void 0);\n return TooltipData;\n}(ChildProperty));\nexport { TooltipData };\nvar bootstrapTooltipOffset = 6;\nvar bootstrap4TooltipOffset = 3;\nvar classNames = {\n root: 'e-slider',\n rtl: 'e-rtl',\n sliderHiddenInput: 'e-slider-input',\n controlWrapper: 'e-control-wrapper',\n sliderHandle: 'e-handle',\n rangeBar: 'e-range',\n sliderButton: 'e-slider-button',\n firstButton: 'e-first-button',\n secondButton: 'e-second-button',\n scale: 'e-scale',\n tick: 'e-tick',\n large: 'e-large',\n tickValue: 'e-tick-value',\n sliderTooltip: 'e-slider-tooltip',\n sliderHover: 'e-slider-hover',\n sliderFirstHandle: 'e-handle-first',\n sliderSecondHandle: 'e-handle-second',\n sliderDisabled: 'e-disabled',\n sliderContainer: 'e-slider-container',\n horizontalTooltipBefore: 'e-slider-horizontal-before',\n horizontalTooltipAfter: 'e-slider-horizontal-after',\n verticalTooltipBefore: 'e-slider-vertical-before',\n verticalTooltipAfter: 'e-slider-vertical-after',\n materialTooltip: 'e-material-tooltip',\n materialTooltipOpen: 'e-material-tooltip-open',\n materialTooltipActive: 'e-tooltip-active',\n materialSlider: 'e-material-slider',\n sliderTrack: 'e-slider-track',\n sliderHorizantalColor: 'e-slider-horizantal-color',\n sliderVerticalColor: 'e-slider-vertical-color',\n sliderHandleFocused: 'e-handle-focused',\n verticalSlider: 'e-vertical',\n horizontalSlider: 'e-horizontal',\n sliderHandleStart: 'e-handle-start',\n sliderTooltipStart: 'e-material-tooltip-start',\n sliderTabHandle: 'e-tab-handle',\n sliderButtonIcon: 'e-button-icon',\n sliderSmallSize: 'e-small-size',\n sliderTickPosition: 'e-tick-pos',\n sliderFirstTick: 'e-first-tick',\n sliderLastTick: 'e-last-tick',\n sliderButtonClass: 'e-slider-btn',\n sliderTooltipWrapper: 'e-tooltip-wrap',\n sliderTabTrack: 'e-tab-track',\n sliderTabRange: 'e-tab-range',\n sliderActiveHandle: 'e-handle-active',\n sliderMaterialHandle: 'e-material-handle',\n sliderMaterialRange: 'e-material-range',\n sliderMaterialDefault: 'e-material-default',\n materialTooltipShow: 'e-material-tooltip-show',\n materialTooltipHide: 'e-material-tooltip-hide',\n readonly: 'e-read-only',\n limits: 'e-limits',\n limitBarDefault: 'e-limit-bar',\n limitBarFirst: 'e-limit-first',\n limitBarSecond: 'e-limit-second',\n dragHorizontal: 'e-drag-horizontal',\n dragVertical: 'e-drag-vertical'\n};\n/**\n * The Slider component allows the user to select a value or range\n * of values in-between a min and max range, by dragging the handle over the slider bar.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Slider = /** @class */ (function (_super) {\n __extends(Slider, _super);\n function Slider(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.horDir = 'left';\n _this.verDir = 'bottom';\n _this.transition = {\n handle: 'left .4s cubic-bezier(.25, .8, .25, 1), right .4s cubic-bezier(.25, .8, .25, 1), ' +\n 'top .4s cubic-bezier(.25, .8, .25, 1) , bottom .4s cubic-bezier(.25, .8, .25, 1)',\n rangeBar: 'all .4s cubic-bezier(.25, .8, .25, 1)'\n };\n _this.transitionOnMaterialTooltip = {\n handle: 'left 1ms ease-out, right 1ms ease-out, bottom 1ms ease-out, top 1ms ease-out',\n rangeBar: 'left 1ms ease-out, right 1ms ease-out, bottom 1ms ease-out, width 1ms ease-out, height 1ms ease-out'\n };\n _this.scaleTransform = 'transform .4s cubic-bezier(.25, .8, .25, 1)';\n _this.customAriaText = null;\n _this.drag = true;\n _this.isDragComplete = false;\n _this.initialTooltip = true;\n return _this;\n }\n Slider.prototype.preRender = function () {\n // eslint-disable-next-line\n var localeText = { incrementTitle: 'Increase', decrementTitle: 'Decrease' };\n this.l10n = new L10n('slider', localeText, this.locale);\n this.isElementFocused = false;\n this.tickElementCollection = [];\n this.tooltipFormatInfo = {};\n this.ticksFormatInfo = {};\n this.initCultureInfo();\n this.initCultureFunc();\n this.formChecker();\n };\n Slider.prototype.formChecker = function () {\n var formElement = closest(this.element, 'form');\n if (formElement) {\n this.isForm = true;\n // this condition needs to be checked, if the slider is going to be refreshed by `refresh()`\n // then we need to revert the slider `value` back to `formResetValue` to preserve the initial value\n if (!isNullOrUndefined(this.formResetValue)) {\n this.setProperties({ 'value': this.formResetValue }, true);\n }\n this.formResetValue = this.value;\n if (this.type === 'Range' &&\n (isNullOrUndefined(this.formResetValue) || typeof (this.formResetValue) !== 'object')) {\n this.formResetValue = [parseFloat(formatUnit(this.min)), parseFloat(formatUnit(this.max))];\n }\n else if (isNullOrUndefined(this.formResetValue)) {\n this.formResetValue = parseFloat(formatUnit(this.min));\n }\n this.formElement = formElement;\n }\n else {\n this.isForm = false;\n }\n };\n Slider.prototype.initCultureFunc = function () {\n this.internationalization = new Internationalization(this.locale);\n };\n Slider.prototype.initCultureInfo = function () {\n this.tooltipFormatInfo.format = (!isNullOrUndefined(this.tooltip.format)) ? this.tooltip.format : null;\n this.ticksFormatInfo.format = (!isNullOrUndefined(this.ticks.format)) ? this.ticks.format : null;\n };\n Slider.prototype.formatString = function (value, formatInfo) {\n var formatValue = null;\n var formatString = null;\n if ((value || value === 0)) {\n formatValue = this.formatNumber(value);\n var numberOfDecimals = this.numberOfDecimals(value);\n formatString = this.internationalization.getNumberFormat(formatInfo)(this.makeRoundNumber(value, numberOfDecimals));\n }\n return { elementVal: formatValue, formatString: formatString };\n };\n Slider.prototype.formatNumber = function (value) {\n var numberOfDecimals = this.numberOfDecimals(value);\n return this.internationalization.getNumberFormat({\n maximumFractionDigits: numberOfDecimals,\n minimumFractionDigits: numberOfDecimals, useGrouping: false\n })(value);\n };\n Slider.prototype.numberOfDecimals = function (value) {\n var decimalPart = value.toString().split('.')[1];\n var numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;\n return numberOfDecimals;\n };\n Slider.prototype.makeRoundNumber = function (value, precision) {\n var decimals = precision || 0;\n return Number(value.toFixed(decimals));\n };\n Slider.prototype.fractionalToInteger = function (value) {\n value = (this.numberOfDecimals(value) === 0) ? Number(value).toFixed(this.noOfDecimals) : value;\n var tens = 1;\n for (var i = 0; i < this.noOfDecimals; i++) {\n tens *= 10;\n }\n value = Number((value * tens).toFixed(0));\n return value;\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n Slider.prototype.render = function () {\n var _this = this;\n this.initialize();\n this.initRender();\n this.wireEvents();\n this.setZindex();\n this.renderComplete();\n if (this.element.tagName === 'EJS-SLIDER') {\n if (this.getTheme(this.sliderContainer) == \"none\") {\n setTimeout(function () {\n _this.refresh();\n }, 0);\n }\n }\n };\n Slider.prototype.initialize = function () {\n addClass([this.element], classNames.root);\n this.setCSSClass();\n };\n Slider.prototype.setElementWidth = function (width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.sliderContainer.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.sliderContainer.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n };\n Slider.prototype.setCSSClass = function (oldCSSClass) {\n if (oldCSSClass) {\n removeClass([this.element], oldCSSClass.split(' '));\n }\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n };\n Slider.prototype.setEnabled = function () {\n if (!this.enabled) {\n addClass([this.sliderContainer], [classNames.sliderDisabled]);\n if (this.tooltip.isVisible && this.tooltipElement && this.tooltip.showOn === 'Always') {\n this.tooltipElement.classList.add(classNames.sliderDisabled);\n }\n this.unwireEvents();\n }\n else {\n removeClass([this.sliderContainer], [classNames.sliderDisabled]);\n if (this.tooltip.isVisible && this.tooltipElement && this.tooltip.showOn === 'Always') {\n this.tooltipElement.classList.remove(classNames.sliderDisabled);\n }\n this.wireEvents();\n }\n };\n Slider.prototype.getTheme = function (container) {\n var theme = window.getComputedStyle(container, ':after').getPropertyValue('content');\n return theme.replace(/['\"]+/g, '');\n };\n /**\n * Initialize the rendering\n * @private\n */\n Slider.prototype.initRender = function () {\n this.sliderContainer = this.createElement('div', { className: classNames.sliderContainer + ' ' + classNames.controlWrapper });\n this.element.parentNode.insertBefore(this.sliderContainer, this.element);\n this.sliderContainer.appendChild(this.element);\n this.sliderTrack = this.createElement('div', { className: classNames.sliderTrack });\n this.element.appendChild(this.sliderTrack);\n this.setElementWidth(this.width);\n this.element.tabIndex = -1;\n this.getThemeInitialization();\n this.setHandler();\n this.createRangeBar();\n if (this.limits.enabled) {\n this.createLimitBar();\n }\n this.setOrientClass();\n this.hiddenInput = (this.createElement('input', {\n attrs: {\n type: 'hidden', value: (isNullOrUndefined(this.value) ? this.min.toString() : this.value.toString()),\n name: this.element.getAttribute('name') || this.element.getAttribute('id') ||\n '_' + (Math.random() * 1000).toFixed(0) + 'slider', class: classNames.sliderHiddenInput\n }\n }));\n this.hiddenInput.tabIndex = -1;\n this.sliderContainer.appendChild(this.hiddenInput);\n if (this.showButtons) {\n this.setButtons();\n }\n this.setEnableRTL();\n if (this.type === 'Range') {\n this.rangeValueUpdate();\n }\n else {\n this.value = isNullOrUndefined(this.value) ? parseFloat(formatUnit(this.min.toString())) : this.value;\n }\n this.previousVal = this.type !== 'Range' ? this.checkHandleValue(parseFloat(formatUnit(this.value.toString()))) :\n [this.checkHandleValue(parseFloat(formatUnit(this.value[0].toString()))),\n this.checkHandleValue(parseFloat(formatUnit(this.value[1].toString())))];\n this.previousChanged = this.previousVal;\n if (!isNullOrUndefined(this.element.hasAttribute('name'))) {\n this.element.removeAttribute('name');\n }\n this.setValue();\n if (this.limits.enabled) {\n this.setLimitBar();\n }\n if (this.ticks.placement !== 'None') {\n this.renderScale();\n }\n if (this.tooltip.isVisible) {\n this.renderTooltip();\n }\n if (!this.enabled) {\n addClass([this.sliderContainer], [classNames.sliderDisabled]);\n }\n else {\n removeClass([this.sliderContainer], [classNames.sliderDisabled]);\n }\n if (this.readonly) {\n addClass([this.sliderContainer], [classNames.readonly]);\n }\n else {\n removeClass([this.sliderContainer], [classNames.readonly]);\n }\n };\n Slider.prototype.getThemeInitialization = function () {\n this.isMaterial = this.getTheme(this.sliderContainer) === 'material'\n || this.getTheme(this.sliderContainer) === 'material-dark';\n this.isBootstrap = this.getTheme(this.sliderContainer) === 'bootstrap'\n || this.getTheme(this.sliderContainer) === 'bootstrap-dark';\n this.isBootstrap4 = this.getTheme(this.sliderContainer) === 'bootstrap4';\n this.isTailwind = this.getTheme(this.sliderContainer) === 'tailwind' || this.getTheme(this.sliderContainer) === 'tailwind-dark';\n this.isBootstrap5 = this.getTheme(this.sliderContainer) === 'bootstrap5';\n this.isFluent = this.getTheme(this.sliderContainer) === 'FluentUI';\n this.isMaterialTooltip = this.isMaterial && this.type !== 'Range' && this.tooltip.isVisible;\n };\n Slider.prototype.createRangeBar = function () {\n if (this.type !== 'Default') {\n this.rangeBar = (this.createElement('div', { attrs: { class: classNames.rangeBar } }));\n this.element.appendChild(this.rangeBar);\n if (this.drag && this.type === 'Range') {\n if (this.orientation === 'Horizontal') {\n this.rangeBar.classList.add(classNames.dragHorizontal);\n }\n else {\n this.rangeBar.classList.add(classNames.dragVertical);\n }\n }\n }\n };\n Slider.prototype.createLimitBar = function () {\n var firstElementClassName = this.type !== 'Range' ? classNames.limitBarDefault :\n classNames.limitBarFirst;\n firstElementClassName += ' ' + classNames.limits;\n this.limitBarFirst = (this.createElement('div', {\n attrs: { class: firstElementClassName }\n }));\n this.element.appendChild(this.limitBarFirst);\n if (this.type === 'Range') {\n this.limitBarSecond = (this.createElement('div', {\n attrs: {\n class: classNames.limitBarSecond + ' ' + classNames.limits\n }\n }));\n this.element.appendChild(this.limitBarSecond);\n }\n };\n Slider.prototype.setOrientClass = function () {\n if (this.orientation !== 'Vertical') {\n this.sliderContainer.classList.remove(classNames.verticalSlider);\n this.sliderContainer.classList.add(classNames.horizontalSlider);\n this.firstHandle.setAttribute('aria-orientation', 'horizontal');\n if (this.type === 'Range') {\n this.secondHandle.setAttribute('aria-orientation', 'horizontal');\n }\n }\n else {\n this.sliderContainer.classList.remove(classNames.horizontalSlider);\n this.sliderContainer.classList.add(classNames.verticalSlider);\n this.firstHandle.setAttribute('aria-orientation', 'vertical');\n if (this.type === 'Range') {\n this.secondHandle.setAttribute('aria-orientation', 'vertical');\n }\n }\n };\n Slider.prototype.setAriaAttributes = function (element) {\n var _this = this;\n var min = this.min;\n var max = this.max;\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n min = this.customValues[0];\n max = this.customValues[this.customValues.length - 1];\n }\n if (this.type !== 'Range') {\n attributes(element, {\n 'aria-valuemin': min.toString(), 'aria-valuemax': max.toString()\n });\n }\n else {\n var range = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 ?\n [[min.toString(), (this.customValues[this.value[1]]).toString()],\n [(this.customValues[this.value[0]]).toString(), max.toString()]] :\n [[min.toString(), this.value[1].toString()], [this.value[0].toString(), max.toString()]];\n range.forEach(function (range, index) {\n var element = index === 0 ? _this.firstHandle : _this.secondHandle;\n if (element) {\n attributes(element, {\n 'aria-valuemin': range[0], 'aria-valuemax': range[1]\n });\n }\n });\n }\n };\n Slider.prototype.createSecondHandle = function () {\n this.secondHandle = this.createElement('div', {\n attrs: {\n class: classNames.sliderHandle, 'role': 'slider', tabIndex: '0', 'aria-label': 'slider'\n }\n });\n this.secondHandle.classList.add(classNames.sliderSecondHandle);\n this.element.appendChild(this.secondHandle);\n };\n Slider.prototype.createFirstHandle = function () {\n this.firstHandle = this.createElement('div', {\n attrs: {\n class: classNames.sliderHandle, 'role': 'slider', tabIndex: '0', 'aria-label': 'slider'\n }\n });\n this.firstHandle.classList.add(classNames.sliderFirstHandle);\n this.element.appendChild(this.firstHandle);\n if (this.isMaterialTooltip) {\n this.materialHandle = this.createElement('div', {\n attrs: {\n class: classNames.sliderHandle + ' ' +\n classNames.sliderMaterialHandle\n }\n });\n this.element.appendChild(this.materialHandle);\n }\n };\n Slider.prototype.wireFirstHandleEvt = function (destroy) {\n if (!destroy) {\n EventHandler.add(this.firstHandle, 'mousedown touchstart', this.handleFocus, this);\n EventHandler.add(this.firstHandle, 'transitionend', this.transitionEnd, this);\n EventHandler.add(this.firstHandle, 'mouseenter touchenter', this.handleOver, this);\n EventHandler.add(this.firstHandle, 'mouseleave touchend', this.handleLeave, this);\n }\n else {\n EventHandler.remove(this.firstHandle, 'mousedown touchstart', this.handleFocus);\n EventHandler.remove(this.firstHandle, 'transitionend', this.transitionEnd);\n EventHandler.remove(this.firstHandle, 'mouseenter touchenter', this.handleOver);\n EventHandler.remove(this.firstHandle, 'mouseleave touchend', this.handleLeave);\n }\n };\n Slider.prototype.wireSecondHandleEvt = function (destroy) {\n if (!destroy) {\n EventHandler.add(this.secondHandle, 'mousedown touchstart', this.handleFocus, this);\n EventHandler.add(this.secondHandle, 'transitionend', this.transitionEnd, this);\n EventHandler.add(this.secondHandle, 'mouseenter touchenter', this.handleOver, this);\n EventHandler.add(this.secondHandle, 'mouseleave touchend', this.handleLeave, this);\n }\n else {\n EventHandler.remove(this.secondHandle, 'mousedown touchstart', this.handleFocus);\n EventHandler.remove(this.secondHandle, 'transitionend', this.transitionEnd);\n EventHandler.remove(this.secondHandle, 'mouseenter touchenter', this.handleOver);\n EventHandler.remove(this.secondHandle, 'mouseleave touchend', this.handleLeave);\n }\n };\n Slider.prototype.handleStart = function () {\n if (this.type !== 'Range') {\n this.firstHandle.classList[this.handlePos1 === 0 ? 'add' : 'remove'](classNames.sliderHandleStart);\n if (this.isMaterialTooltip) {\n this.materialHandle.classList[this.handlePos1 === 0 ? 'add' : 'remove'](classNames.sliderHandleStart);\n if (this.tooltipElement) {\n this.tooltipElement.classList[this.handlePos1 === 0 ? 'add' : 'remove'](classNames.sliderTooltipStart);\n }\n }\n }\n };\n Slider.prototype.transitionEnd = function (e) {\n if (e.propertyName !== 'transform') {\n this.handleStart();\n if (!this.enableAnimation) {\n this.getHandle().style.transition = 'none';\n }\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = 'none';\n }\n if (this.isMaterial && this.tooltip.isVisible && this.type === 'Default') {\n this.tooltipElement.style.transition = this.transition.handle;\n }\n this.tooltipToggle(this.getHandle());\n this.closeTooltip();\n }\n };\n Slider.prototype.handleFocusOut = function () {\n if (this.firstHandle.classList.contains(classNames.sliderHandleFocused)) {\n this.firstHandle.classList.remove(classNames.sliderHandleFocused);\n }\n if (this.type === 'Range') {\n if (this.secondHandle.classList.contains(classNames.sliderHandleFocused)) {\n this.secondHandle.classList.remove(classNames.sliderHandleFocused);\n }\n }\n };\n Slider.prototype.handleFocus = function (e) {\n this.focusSliderElement();\n this.sliderBarClick(e);\n if (e.currentTarget === this.firstHandle) {\n this.firstHandle.classList.add(classNames.sliderHandleFocused);\n this.firstHandle.classList.add(classNames.sliderTabHandle);\n }\n else {\n this.secondHandle.classList.add(classNames.sliderHandleFocused);\n this.secondHandle.classList.add(classNames.sliderTabHandle);\n }\n EventHandler.add(document, 'mousemove touchmove', this.sliderBarMove, this);\n EventHandler.add(document, 'mouseup touchend', this.sliderBarUp, this);\n };\n Slider.prototype.handleOver = function (e) {\n if (this.tooltip.isVisible && this.tooltip.showOn === 'Hover') {\n this.tooltipToggle(e.currentTarget);\n }\n if (this.type === 'Default') {\n this.tooltipToggle(this.getHandle());\n }\n };\n Slider.prototype.handleLeave = function (e) {\n if (this.tooltip.isVisible && this.tooltip.showOn === 'Hover' &&\n !e.currentTarget.classList.contains(classNames.sliderHandleFocused) &&\n !e.currentTarget.classList.contains(classNames.sliderTabHandle)) {\n this.closeTooltip();\n }\n };\n Slider.prototype.setHandler = function () {\n if (this.min > this.max) {\n this.min = this.max;\n }\n this.createFirstHandle();\n if (this.type === 'Range') {\n this.createSecondHandle();\n }\n };\n Slider.prototype.setEnableRTL = function () {\n this.enableRtl && this.orientation !== 'Vertical' ? addClass([this.sliderContainer], classNames.rtl) :\n removeClass([this.sliderContainer], classNames.rtl);\n var preDir = (this.orientation !== 'Vertical') ? this.horDir : this.verDir;\n if (this.enableRtl) {\n this.horDir = 'right';\n this.verDir = 'bottom';\n }\n else {\n this.horDir = 'left';\n this.verDir = 'bottom';\n }\n var currDir = (this.orientation !== 'Vertical') ? this.horDir : this.verDir;\n if (preDir !== currDir) {\n if (this.orientation === 'Horizontal') {\n setStyleAttribute(this.firstHandle, { 'right': '', 'left': 'auto' });\n if (this.type === 'Range') {\n setStyleAttribute(this.secondHandle, { 'top': '', 'left': 'auto' });\n }\n }\n }\n this.setBarColor();\n };\n Slider.prototype.tooltipValue = function () {\n var _this = this;\n var text;\n var args = {\n value: this.value,\n text: ''\n };\n if (this.initialTooltip) {\n this.initialTooltip = false;\n this.setTooltipContent();\n args.text = text = this.tooltipObj.content;\n this.trigger('tooltipChange', args, function (observedArgs) {\n _this.addTooltipClass(observedArgs.text);\n if (text !== observedArgs.text) {\n _this.customAriaText = observedArgs.text;\n _this.tooltipObj.content = observedArgs.text;\n _this.setAriaAttrValue(_this.firstHandle);\n if (_this.type === 'Range') {\n _this.setAriaAttrValue(_this.secondHandle);\n }\n }\n });\n if (this.isMaterialTooltip) {\n this.setPreviousVal('change', this.value);\n }\n }\n };\n Slider.prototype.setTooltipContent = function () {\n var content;\n content = this.formatContent(this.tooltipFormatInfo, false);\n this.tooltipObj.content = content;\n };\n Slider.prototype.formatContent = function (formatInfo, ariaContent) {\n var content = '';\n var handle1 = this.handleVal1;\n var handle2 = this.handleVal2;\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n handle1 = this.customValues[this.handleVal1];\n handle2 = this.customValues[this.handleVal2];\n }\n if (!ariaContent) {\n if (this.type === 'Range') {\n if (this.enableRtl && this.orientation !== 'Vertical') {\n content = (!isNullOrUndefined(formatInfo.format)) ? (this.formatString(handle2, formatInfo)\n .formatString + ' - ' + this.formatString(handle1, formatInfo).formatString) :\n (handle2.toString() + ' - ' + handle1.toString());\n }\n else {\n content = (!isNullOrUndefined(formatInfo.format)) ? (this.formatString(handle1, formatInfo)\n .formatString + ' - ' + this.formatString(handle2, formatInfo).formatString) :\n (handle1.toString() + ' - ' + handle2.toString());\n }\n }\n else {\n if (!isNullOrUndefined(handle1)) {\n content = (!isNullOrUndefined(formatInfo.format)) ?\n this.formatString(handle1, formatInfo).formatString : handle1.toString();\n }\n }\n return content;\n }\n else {\n if (this.type === 'Range') {\n if (this.enableRtl && this.orientation !== 'Vertical') {\n content = (!isNullOrUndefined(this.tooltip) && !isNullOrUndefined(this.tooltip.format)) ?\n (this.formatString(handle2, formatInfo).elementVal + ' - ' +\n this.formatString(handle1, formatInfo).elementVal) :\n (handle2.toString() + ' - ' + handle1.toString());\n }\n else {\n content = (!isNullOrUndefined(this.tooltip) && !isNullOrUndefined(this.tooltip.format)) ?\n (this.formatString(handle1, formatInfo).elementVal + ' - ' +\n this.formatString(handle2, formatInfo).elementVal) :\n (handle1.toString() + ' - ' + handle2.toString());\n }\n }\n else {\n if (!isNullOrUndefined(handle1)) {\n content = (!isNullOrUndefined(this.tooltip) && !isNullOrUndefined(this.tooltip.format)) ?\n this.formatString(handle1, formatInfo).elementVal : handle1.toString();\n }\n }\n return content;\n }\n };\n Slider.prototype.addTooltipClass = function (content) {\n if (this.isMaterialTooltip) {\n var count = content.toString().length;\n if (!this.tooltipElement) {\n var cssClass = count > 4 ? classNames.sliderMaterialRange : classNames.sliderMaterialDefault;\n this.tooltipObj.cssClass = classNames.sliderTooltip + ' ' + cssClass;\n }\n else {\n var cssClass = count > 4 ?\n { oldCss: classNames.sliderMaterialDefault, newCss: classNames.sliderMaterialRange } :\n { oldCss: classNames.sliderMaterialRange, newCss: classNames.sliderMaterialDefault };\n this.tooltipElement.classList.remove(cssClass.oldCss);\n if (!this.tooltipElement.classList.contains(cssClass.newCss)) {\n this.tooltipElement.classList.add(cssClass.newCss);\n this.tooltipElement.style.transform = count > 4 ? 'scale(1)' :\n this.getTooltipTransformProperties(this.previousTooltipClass).rotate;\n }\n }\n }\n };\n Slider.prototype.tooltipPlacement = function () {\n return this.orientation === 'Horizontal' ? (this.tooltip.placement === 'Before' ? 'TopCenter' : 'BottomCenter') :\n (this.tooltip.placement === 'Before' ? 'LeftCenter' : 'RightCenter');\n };\n Slider.prototype.tooltipBeforeOpen = function (args) {\n this.tooltipElement = args.element;\n if (this.tooltip.cssClass) {\n addClass([this.tooltipElement], this.tooltip.cssClass.split(' ').filter(function (css) { return css; }));\n }\n args.target.removeAttribute('aria-describedby');\n if (this.isMaterialTooltip) {\n this.tooltipElement.firstElementChild.classList.add(classNames.materialTooltipHide);\n this.handleStart();\n this.setTooltipTransform();\n }\n };\n Slider.prototype.tooltipCollision = function (position) {\n if (this.isBootstrap || this.isBootstrap4 || (this.isMaterial && !this.isMaterialTooltip)) {\n var tooltipOffsetValue = this.isBootstrap4 ? bootstrap4TooltipOffset : bootstrapTooltipOffset;\n switch (position) {\n case 'TopCenter':\n this.tooltipObj.setProperties({ 'offsetY': -(tooltipOffsetValue) }, false);\n break;\n case 'BottomCenter':\n this.tooltipObj.setProperties({ 'offsetY': tooltipOffsetValue }, false);\n break;\n case 'LeftCenter':\n this.tooltipObj.setProperties({ 'offsetX': -(tooltipOffsetValue) }, false);\n break;\n case 'RightCenter':\n this.tooltipObj.setProperties({ 'offsetX': tooltipOffsetValue }, false);\n break;\n }\n }\n };\n Slider.prototype.materialTooltipEventCallBack = function (event) {\n this.sliderBarClick(event);\n EventHandler.add(document, 'mousemove touchmove', this.sliderBarMove, this);\n EventHandler.add(document, 'mouseup touchend', this.sliderBarUp, this);\n };\n Slider.prototype.wireMaterialTooltipEvent = function (destroy) {\n if (this.isMaterialTooltip) {\n if (!destroy) {\n EventHandler.add(this.tooltipElement, 'mousedown touchstart', this.materialTooltipEventCallBack, this);\n }\n else {\n EventHandler.remove(this.tooltipElement, 'mousedown touchstart', this.materialTooltipEventCallBack);\n }\n }\n };\n Slider.prototype.tooltipPositionCalculation = function (position) {\n var cssClass;\n switch (position) {\n case 'TopCenter':\n cssClass = classNames.horizontalTooltipBefore;\n break;\n case 'BottomCenter':\n cssClass = classNames.horizontalTooltipAfter;\n break;\n case 'LeftCenter':\n cssClass = classNames.verticalTooltipBefore;\n break;\n case 'RightCenter':\n cssClass = classNames.verticalTooltipAfter;\n break;\n }\n return cssClass;\n };\n Slider.prototype.getTooltipTransformProperties = function (className) {\n var transformProperties;\n if (this.tooltipElement) {\n var position = this.orientation === 'Horizontal' ?\n ((this.tooltipElement.clientHeight + 14) - (this.tooltipElement.clientHeight / 2)) :\n ((this.tooltipElement.clientWidth + 14) - (this.tooltipElement.clientWidth / 2));\n transformProperties = this.orientation === 'Horizontal' ?\n (className === classNames.horizontalTooltipBefore ? { rotate: 'rotate(45deg)', translate: \"translateY(\" + position + \"px)\" } :\n { rotate: 'rotate(225deg)', translate: \"translateY(\" + -(position) + \"px)\" }) :\n (className === classNames.verticalTooltipBefore ? { rotate: 'rotate(-45deg)', translate: \"translateX(\" + position + \"px)\" } :\n { rotate: 'rotate(-225deg)', translate: \"translateX(\" + (-position) + \"px)\" });\n }\n return transformProperties;\n };\n Slider.prototype.openMaterialTooltip = function () {\n var _this = this;\n if (this.isMaterialTooltip) {\n this.refreshTooltip(this.firstHandle);\n var tooltipContentElement = this.tooltipElement.firstElementChild;\n tooltipContentElement.classList.remove(classNames.materialTooltipHide);\n tooltipContentElement.classList.add(classNames.materialTooltipShow);\n this.firstHandle.style.cursor = 'default';\n this.tooltipElement.style.transition = this.scaleTransform;\n this.tooltipElement.classList.add(classNames.materialTooltipOpen);\n this.materialHandle.style.transform = 'scale(0)';\n if (tooltipContentElement.innerText.length > 4) {\n this.tooltipElement.style.transform = 'scale(1)';\n }\n else {\n this.tooltipElement.style.transform = this.getTooltipTransformProperties(this.previousTooltipClass).rotate;\n }\n if (this.type === 'Default') {\n setTimeout(function () { _this.tooltipElement.style.transition = _this.transition.handle; }, 2500);\n }\n else {\n setTimeout(function () { _this.tooltipElement.style.transition = 'none'; }, 2500);\n }\n }\n };\n Slider.prototype.closeMaterialTooltip = function () {\n var _this = this;\n if (this.isMaterialTooltip) {\n var tooltipContentElement = this.tooltipElement.firstElementChild;\n this.tooltipElement.style.transition = this.scaleTransform;\n tooltipContentElement.classList.remove(classNames.materialTooltipShow);\n tooltipContentElement.classList.add(classNames.materialTooltipHide);\n this.firstHandle.style.cursor = '-webkit-grab';\n this.firstHandle.style.cursor = 'grab';\n if (this.materialHandle) {\n this.materialHandle.style.transform = 'scale(1)';\n }\n this.tooltipElement.classList.remove(classNames.materialTooltipOpen);\n this.setTooltipTransform();\n this.tooltipTarget = undefined;\n setTimeout(function () { _this.tooltipElement.style.transition = 'none'; }, 2500);\n }\n };\n Slider.prototype.checkTooltipPosition = function (args) {\n var tooltipClass = this.tooltipPositionCalculation(args.collidedPosition);\n if (this.tooltipCollidedPosition === undefined ||\n this.tooltipCollidedPosition !== args.collidedPosition || !args.element.classList.contains(tooltipClass)) {\n if (this.isMaterialTooltip) {\n if (tooltipClass !== undefined) {\n args.element.classList.remove(this.previousTooltipClass);\n args.element.classList.add(tooltipClass);\n this.previousTooltipClass = tooltipClass;\n }\n if (args.element.style.transform && args.element.classList.contains(classNames.materialTooltipOpen) &&\n args.element.firstElementChild.innerText.length <= 4) {\n args.element.style.transform = this.getTooltipTransformProperties(this.previousTooltipClass).rotate;\n }\n }\n this.tooltipCollidedPosition = args.collidedPosition;\n }\n if (this.isMaterialTooltip && this.tooltipElement && this.tooltipElement.style.transform.indexOf('translate') !== -1) {\n this.setTooltipTransform();\n }\n };\n Slider.prototype.setTooltipTransform = function () {\n var transformProperties = this.getTooltipTransformProperties(this.previousTooltipClass);\n if (this.tooltipElement.firstElementChild.innerText.length > 4) {\n this.tooltipElement.style.transform = transformProperties.translate + \" scale(0.01)\";\n }\n else {\n this.tooltipElement.style.transform = transformProperties.translate + \" \" + transformProperties.rotate + \" scale(0.01)\";\n }\n };\n Slider.prototype.renderTooltip = function () {\n this.tooltipObj = new Tooltip({\n showTipPointer: this.isBootstrap || this.isMaterial || this.isBootstrap4 || this.isTailwind || this.isBootstrap5 || this.isFluent,\n cssClass: classNames.sliderTooltip,\n height: this.isMaterial ? 30 : 'auto',\n animation: { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } },\n opensOn: 'Custom',\n beforeOpen: this.tooltipBeforeOpen.bind(this),\n beforeCollision: this.checkTooltipPosition.bind(this),\n beforeClose: this.tooltipBeforeClose.bind(this),\n enableHtmlSanitizer: this.enableHtmlSanitizer\n });\n this.tooltipObj.appendTo(this.firstHandle);\n this.initializeTooltipProps();\n };\n Slider.prototype.initializeTooltipProps = function () {\n var tooltipShowOn = (this.tooltip.showOn === 'Auto' ? 'Hover' : this.tooltip.showOn);\n this.setProperties({ tooltip: { showOn: tooltipShowOn } }, true);\n this.tooltipObj.position = this.tooltipPlacement();\n this.tooltipCollision(this.tooltipObj.position);\n [this.firstHandle, this.rangeBar, this.secondHandle].forEach(function (handle) {\n if (!isNullOrUndefined(handle)) {\n handle.style.transition = 'none';\n }\n });\n if (this.isMaterialTooltip) {\n this.sliderContainer.classList.add(classNames.materialSlider);\n this.tooltipValue();\n this.tooltipObj.animation.close.effect = 'None';\n // eslint-disable-next-line security/detect-non-literal-fs-filename -- Safe as no value holds user input\n this.tooltipObj.open(this.firstHandle);\n }\n };\n Slider.prototype.tooltipBeforeClose = function () {\n this.tooltipElement = undefined;\n this.tooltipCollidedPosition = undefined;\n };\n Slider.prototype.setButtons = function () {\n this.firstBtn = this.createElement('div', { className: classNames.sliderButton + ' ' + classNames.firstButton });\n this.firstBtn.appendChild(this.createElement('span', { className: classNames.sliderButtonIcon }));\n if (this.isTailwind) {\n this.firstBtn.querySelector('span').classList.add('e-icons');\n }\n this.firstBtn.tabIndex = -1;\n this.secondBtn = this.createElement('div', { className: classNames.sliderButton + ' ' + classNames.secondButton });\n this.secondBtn.appendChild(this.createElement('span', { className: classNames.sliderButtonIcon }));\n if (this.isTailwind) {\n this.secondBtn.querySelector('span').classList.add('e-icons');\n }\n this.secondBtn.tabIndex = -1;\n this.sliderContainer.classList.add(classNames.sliderButtonClass);\n this.sliderContainer.appendChild(this.firstBtn);\n this.sliderContainer.appendChild(this.secondBtn);\n this.sliderContainer.appendChild(this.element);\n this.buttonTitle();\n };\n Slider.prototype.buttonTitle = function () {\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n this.l10n.setLocale(this.locale);\n var decrementTitle = this.l10n.getConstant('decrementTitle');\n var incrementTitle = this.l10n.getConstant('incrementTitle');\n attributes(enabledRTL ? this.secondBtn : this.firstBtn, { 'aria-label': decrementTitle, title: decrementTitle });\n attributes(enabledRTL ? this.firstBtn : this.secondBtn, { 'aria-label': incrementTitle, title: incrementTitle });\n };\n Slider.prototype.buttonFocusOut = function () {\n if (this.isMaterial) {\n this.getHandle().classList.remove('e-large-thumb-size');\n }\n };\n Slider.prototype.repeatButton = function (args) {\n var hVal = this.handleValueUpdate();\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n var value;\n if (args.target.parentElement.classList.contains(classNames.firstButton)\n || args.target.classList.contains(classNames.firstButton)) {\n enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), true)) :\n (value = this.add(hVal, parseFloat(this.step.toString()), false));\n }\n else if (args.target.parentElement.classList.contains(classNames.secondButton)\n || (args.target.classList.contains(classNames.secondButton))) {\n enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), false)) :\n (value = this.add(hVal, parseFloat(this.step.toString()), true));\n }\n if (this.limits.enabled) {\n value = this.getLimitCorrectedValues(value);\n }\n if (value >= this.min && value <= this.max) {\n this.changeHandleValue(value);\n this.tooltipToggle(this.getHandle());\n }\n };\n Slider.prototype.repeatHandlerMouse = function (args) {\n args.preventDefault();\n if (args.type === ('mousedown') || args.type === ('touchstart')) {\n this.buttonClick(args);\n this.repeatInterval = setInterval(this.repeatButton.bind(this), 180, args);\n }\n };\n Slider.prototype.materialChange = function () {\n if (!this.getHandle().classList.contains('e-large-thumb-size')) {\n this.getHandle().classList.add('e-large-thumb-size');\n }\n };\n Slider.prototype.focusHandle = function () {\n if (!this.getHandle().classList.contains(classNames.sliderTabHandle)) {\n this.getHandle().classList.add(classNames.sliderTabHandle);\n }\n };\n Slider.prototype.repeatHandlerUp = function (e) {\n this.changeEvent('changed', e);\n this.closeTooltip();\n clearInterval(this.repeatInterval);\n this.getHandle().focus();\n };\n Slider.prototype.customTickCounter = function (bigNum) {\n var tickCount = 4;\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n if (bigNum > 4) {\n tickCount = 3;\n }\n if (bigNum > 7) {\n tickCount = 2;\n }\n if (bigNum > 14) {\n tickCount = 1;\n }\n if (bigNum > 28) {\n tickCount = 0;\n }\n }\n return tickCount;\n };\n // tslint:disable-next-line:max-func-body-length\n Slider.prototype.renderScale = function () {\n var liElementPosition = 0;\n var orien = this.orientation === 'Vertical' ? 'v' : 'h';\n var spanText;\n this.noOfDecimals = this.numberOfDecimals(this.step);\n this.ul = this.createElement('ul', {\n className: classNames.scale + ' ' + 'e-' + orien + '-scale ' + classNames.tick + '-' + this.ticks.placement.toLowerCase(),\n attrs: { role: 'presentation', tabIndex: '-1', 'aria-hidden': 'true' }\n });\n this.ul.style.zIndex = '-1';\n if (Browser.isAndroid && orien === 'h') {\n this.ul.classList.add(classNames.sliderTickPosition);\n }\n var smallStep = this.ticks.smallStep;\n if (!this.ticks.showSmallTicks) {\n this.ticks.largeStep > 0 ? (smallStep = this.ticks.largeStep) :\n (smallStep = (parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min))));\n }\n else if (smallStep <= 0) {\n smallStep = parseFloat(formatUnit(this.step));\n }\n var min = this.fractionalToInteger(this.min);\n var max = this.fractionalToInteger(this.max);\n var steps = this.fractionalToInteger(smallStep);\n var bigNum = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 && this.customValues.length - 1;\n var customStep = this.customTickCounter(bigNum);\n var count = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 ?\n (bigNum * customStep) + bigNum : Math.abs((max - min) / steps);\n this.element.appendChild(this.ul);\n var li;\n var start = parseFloat(this.min.toString());\n if (orien === 'v') {\n start = parseFloat(this.max.toString());\n }\n var left = 0;\n var islargeTick;\n var tickWidth = 100 / count;\n if (tickWidth === Infinity) {\n tickWidth = 5;\n }\n for (var i = 0, y = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 ?\n this.customValues.length - 1 : 0, k = 0; i <= count; i++) {\n li = (this.createElement('li', {\n attrs: {\n class: classNames.tick, role: 'presentation', tabIndex: '-1',\n 'aria-hidden': 'true'\n }\n }));\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n islargeTick = i % (customStep + 1) === 0;\n if (islargeTick) {\n if (orien === 'h') {\n start = this.customValues[k];\n k++;\n }\n else {\n start = this.customValues[y];\n y--;\n }\n li.setAttribute('title', start.toString());\n }\n }\n else {\n li.setAttribute('title', start.toString());\n if (this.numberOfDecimals(this.max) === 0 && this.numberOfDecimals(this.min) === 0 &&\n this.numberOfDecimals(this.step) === 0) {\n if (orien === 'h') {\n islargeTick = ((start - parseFloat(this.min.toString())) % this.ticks.largeStep === 0) ? true : false;\n }\n else {\n islargeTick = (Math.abs(start - parseFloat(this.max.toString())) % this.ticks.largeStep === 0) ? true : false;\n }\n }\n else {\n var largestep = this.fractionalToInteger(this.ticks.largeStep);\n var startValue = this.fractionalToInteger(start);\n if (orien === 'h') {\n islargeTick = ((startValue - min) % largestep === 0) ? true : false;\n }\n else {\n islargeTick = (Math.abs(startValue - parseFloat(max.toString())) % largestep === 0) ? true : false;\n }\n }\n }\n if (islargeTick) {\n li.classList.add(classNames.large);\n }\n (orien === 'h') ? (li.style.width = tickWidth + '%') : (li.style.height = tickWidth + '%');\n var repeat = islargeTick ? (this.ticks.placement === 'Both' ? 2 : 1) : 0;\n if (islargeTick) {\n for (var j = 0; j < repeat; j++) {\n this.createTick(li, start, tickWidth);\n }\n }\n else if (isNullOrUndefined(this.customValues)) {\n this.formatTicksValue(li, start);\n }\n this.ul.appendChild(li);\n this.tickElementCollection.push(li);\n var decimalPoints = void 0;\n if (isNullOrUndefined(this.customValues)) {\n if (this.numberOfDecimals(smallStep) > this.numberOfDecimals(start)) {\n decimalPoints = this.numberOfDecimals(smallStep);\n }\n else {\n decimalPoints = this.numberOfDecimals(start);\n }\n if (orien === 'h') {\n start = this.makeRoundNumber(start + smallStep, decimalPoints);\n }\n else {\n start = this.makeRoundNumber(start - smallStep, decimalPoints);\n }\n left = this.makeRoundNumber(left + smallStep, decimalPoints);\n }\n }\n this.ticksAlignment(orien, tickWidth);\n };\n Slider.prototype.ticksAlignment = function (orien, tickWidth, triggerEvent) {\n if (triggerEvent === void 0) { triggerEvent = true; }\n this.firstChild = this.ul.firstElementChild;\n this.lastChild = this.ul.lastElementChild;\n this.firstChild.classList.add(classNames.sliderFirstTick);\n this.lastChild.classList.add(classNames.sliderLastTick);\n this.sliderContainer.classList.add(classNames.scale + '-' + this.ticks.placement.toLowerCase());\n if (orien === 'h') {\n this.firstChild.style.width = tickWidth / 2 + '%';\n this.lastChild.style.width = tickWidth / 2 + '%';\n }\n else {\n this.firstChild.style.height = tickWidth / 2 + '%';\n this.lastChild.style.height = tickWidth / 2 + '%';\n }\n var eventArgs = { ticksWrapper: this.ul, tickElements: this.tickElementCollection };\n if (triggerEvent) {\n this.trigger('renderedTicks', eventArgs);\n }\n this.scaleAlignment();\n };\n Slider.prototype.createTick = function (li, start, tickWidth) {\n var span = this.createElement('span', {\n className: classNames.tickValue + ' ' + classNames.tick + '-' + this.ticks.placement.toLowerCase(),\n attrs: { role: 'presentation', tabIndex: '-1', 'aria-hidden': 'true' }\n });\n li.appendChild(span);\n if (isNullOrUndefined(this.customValues)) {\n this.formatTicksValue(li, start, span, tickWidth);\n }\n else {\n if (this.enableHtmlSanitizer) {\n span.innerHTML = SanitizeHtmlHelper.sanitize(start.toString());\n }\n else {\n span.innerHTML = start.toString();\n }\n }\n };\n Slider.prototype.formatTicksValue = function (li, start, spanElement, tickWidth) {\n var _this = this;\n var tickText = this.formatNumber(start);\n var text = !isNullOrUndefined(this.ticks) && !isNullOrUndefined(this.ticks.format) ?\n this.formatString(start, this.ticksFormatInfo).formatString : tickText;\n var eventArgs = { value: start, text: text, tickElement: li };\n this.trigger('renderingTicks', eventArgs, function (observedArgs) {\n li.setAttribute('title', observedArgs.text.toString());\n if (spanElement) {\n if (_this.enableHtmlSanitizer) {\n spanElement.innerHTML = SanitizeHtmlHelper.sanitize(observedArgs.text.toString());\n }\n else {\n spanElement.innerHTML = observedArgs.text.toString();\n }\n }\n });\n };\n Slider.prototype.scaleAlignment = function () {\n this.tickValuePosition();\n var smallTick = 12;\n var largeTick = 20;\n var half = largeTick / 2;\n var orien = this.orientation === 'Vertical' ? 'v' : 'h';\n if (this.orientation === 'Vertical') {\n (this.element.getBoundingClientRect().width <= 15) ?\n this.sliderContainer.classList.add(classNames.sliderSmallSize) :\n this.sliderContainer.classList.remove(classNames.sliderSmallSize);\n }\n else {\n (this.element.getBoundingClientRect().height <= 15) ?\n this.sliderContainer.classList.add(classNames.sliderSmallSize) :\n this.sliderContainer.classList.remove(classNames.sliderSmallSize);\n }\n };\n Slider.prototype.tickValuePosition = function () {\n this.firstChild = this.element.querySelector('ul').children[0];\n var first = this.firstChild.getBoundingClientRect();\n var firstChild;\n var otherChild;\n var smallStep = this.ticks.smallStep;\n var count = Math.abs((parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min)))) / smallStep;\n if (this.firstChild.children.length > 0) {\n firstChild = this.firstChild.children[0].getBoundingClientRect();\n }\n var tickElements = [this.sliderContainer.querySelectorAll('.' + classNames.tick + '.' +\n classNames.large + ' .' + classNames.tickValue)];\n var other;\n if (this.ticks.placement === 'Both') {\n other = [].slice.call(tickElements[0], 2);\n }\n else {\n other = [].slice.call(tickElements[0], 1);\n }\n var tickWidth = this.orientation === 'Vertical' ?\n (first.height * 2) : (first.width * 2);\n for (var i = 0; i < this.firstChild.children.length; i++) {\n if (this.orientation === 'Vertical') {\n this.firstChild.children[i].style.top = -(firstChild.height / 2) + 'px';\n }\n else {\n if (!this.enableRtl) {\n this.firstChild.children[i].style.left = -(firstChild.width / 2) + 'px';\n }\n else {\n this.firstChild.children[i].style.left = (tickWidth -\n this.firstChild.children[i].getBoundingClientRect().width) / 2 + 'px';\n }\n }\n }\n for (var i = 0; i < other.length; i++) {\n otherChild = other[i].getBoundingClientRect();\n if (this.orientation === 'Vertical') {\n setStyleAttribute(other[i], { top: (tickWidth - otherChild.height) / 2 + 'px' });\n }\n else {\n setStyleAttribute(other[i], { left: (tickWidth - otherChild.width) / 2 + 'px' });\n }\n }\n if (this.enableRtl && this.lastChild.children.length && count !== 0) {\n this.lastChild.children[0].style.left = -(this.lastChild.getBoundingClientRect().width / 2) + 'px';\n if (this.ticks.placement === 'Both') {\n this.lastChild.children[1].style.left = -(this.lastChild.getBoundingClientRect().width / 2) + 'px';\n }\n }\n if (count === 0) {\n if (this.orientation === 'Horizontal') {\n if (!this.enableRtl) {\n this.firstChild.classList.remove(classNames.sliderLastTick);\n this.firstChild.style.left = this.firstHandle.style.left;\n }\n else {\n this.firstChild.classList.remove(classNames.sliderLastTick);\n this.firstChild.style.right = this.firstHandle.style.right;\n this.firstChild.children[0].style.left =\n (this.firstChild.getBoundingClientRect().width / 2) + 2 + 'px';\n if (this.ticks.placement === 'Both') {\n this.firstChild.children[1].style.left =\n (this.firstChild.getBoundingClientRect().width / 2) + 2 + 'px';\n }\n }\n }\n if (this.orientation === 'Vertical') {\n this.firstChild.classList.remove(classNames.sliderLastTick);\n }\n }\n };\n Slider.prototype.setAriaAttrValue = function (element) {\n var ariaValueText;\n var isTickFormatted = ((!isNullOrUndefined(this.ticks) && !isNullOrUndefined(this.ticks.format))) ? true : false;\n var text = !isTickFormatted ?\n this.formatContent(this.ticksFormatInfo, false) : this.formatContent(this.tooltipFormatInfo, false);\n var valuenow = isTickFormatted ? this.formatContent(this.ticksFormatInfo, true) :\n this.formatContent(this.tooltipFormatInfo, true);\n text = (!this.customAriaText) ? (text) : (this.customAriaText);\n if (text.split(' - ').length === 2) {\n ariaValueText = text.split(' - ');\n }\n else {\n ariaValueText = [text, text];\n }\n this.setAriaAttributes(element);\n if (this.type !== 'Range') {\n attributes(element, { 'aria-valuenow': valuenow, 'aria-valuetext': text });\n }\n else {\n // eslint-disable-next-line\n (!this.enableRtl) ? ((element === this.firstHandle) ?\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[0], 'aria-valuetext': ariaValueText[0] }) :\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[1], 'aria-valuetext': ariaValueText[1] })) :\n ((element === this.firstHandle) ?\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[1], 'aria-valuetext': ariaValueText[1] }) :\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[0], 'aria-valuetext': ariaValueText[0] }));\n }\n };\n Slider.prototype.handleValueUpdate = function () {\n var hVal;\n if (this.type === 'Range') {\n if (this.activeHandle === 1) {\n hVal = this.handleVal1;\n }\n else {\n hVal = this.handleVal2;\n }\n }\n else {\n hVal = this.handleVal1;\n }\n return hVal;\n };\n Slider.prototype.getLimitCorrectedValues = function (value) {\n if (this.type === 'MinRange' || this.type === 'Default') {\n value = (this.getLimitValueAndPosition(value, this.limits.minStart, this.limits.minEnd))[0];\n }\n else {\n if (this.activeHandle === 1) {\n value = (this.getLimitValueAndPosition(value, this.limits.minStart, this.limits.minEnd))[0];\n }\n else {\n value = (this.getLimitValueAndPosition(value, this.limits.maxStart, this.limits.maxEnd))[0];\n }\n }\n return value;\n };\n Slider.prototype.focusSliderElement = function () {\n if (!this.isElementFocused) {\n this.element.focus();\n this.isElementFocused = true;\n }\n };\n Slider.prototype.buttonClick = function (args) {\n this.focusSliderElement();\n var value;\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n var hVal = this.handleValueUpdate();\n if ((args.keyCode === 40) || (args.keyCode === 37)\n || args.currentTarget.classList.contains(classNames.firstButton)) {\n // eslint-disable-next-line\n enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), true)) :\n (value = this.add(hVal, parseFloat(this.step.toString()), false));\n }\n else if ((args.keyCode === 38) || (args.keyCode === 39) ||\n args.currentTarget.classList.contains(classNames.secondButton)) {\n // eslint-disable-next-line\n enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), false)) :\n (value = this.add(hVal, parseFloat(this.step.toString()), true));\n }\n else if ((args.keyCode === 33\n || args.currentTarget.classList.contains(classNames.firstButton))) {\n // eslint-disable-next-line\n enabledRTL ? (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), false)) :\n (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), true));\n }\n else if ((args.keyCode === 34) ||\n args.currentTarget.classList.contains(classNames.secondButton)) {\n // eslint-disable-next-line\n enabledRTL ? (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), true)) :\n (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), false));\n }\n else if ((args.keyCode === 36)) {\n value = parseFloat(this.min.toString());\n }\n else if ((args.keyCode === 35)) {\n value = parseFloat(this.max.toString());\n }\n if (this.limits.enabled) {\n value = this.getLimitCorrectedValues(value);\n }\n this.changeHandleValue(value);\n if (this.isMaterial && !this.tooltip.isVisible &&\n !this.getHandle().classList.contains(classNames.sliderTabHandle)) {\n this.materialChange();\n }\n this.tooltipToggle(this.getHandle());\n this.getHandle().focus();\n this.focusHandle();\n if (args.currentTarget.classList.contains(classNames.firstButton)) {\n EventHandler.add(this.firstBtn, 'mouseup touchend', this.buttonUp, this);\n }\n if (args.currentTarget.classList.contains(classNames.secondButton)) {\n EventHandler.add(this.secondBtn, 'mouseup touchend', this.buttonUp, this);\n }\n };\n Slider.prototype.tooltipToggle = function (target) {\n if (this.isMaterialTooltip) {\n // eslint-disable-next-line\n !this.tooltipElement.classList.contains(classNames.materialTooltipOpen) ?\n this.openMaterialTooltip() : this.refreshTooltip(this.firstHandle);\n }\n else {\n // eslint-disable-next-line\n !this.tooltipElement ? this.openTooltip(target) : this.refreshTooltip(target);\n }\n };\n Slider.prototype.buttonUp = function (args) {\n if (args.currentTarget.classList.contains(classNames.firstButton)) {\n EventHandler.remove(this.firstBtn, 'mouseup touchend', this.buttonUp);\n }\n if (args.currentTarget.classList.contains(classNames.secondButton)) {\n EventHandler.remove(this.secondBtn, 'mouseup touchend', this.buttonUp);\n }\n };\n Slider.prototype.setRangeBar = function () {\n if (this.orientation === 'Horizontal') {\n if (this.type === 'MinRange') {\n // eslint-disable-next-line\n this.enableRtl ? (this.rangeBar.style.right = '0px') : (this.rangeBar.style.left = '0px');\n setStyleAttribute(this.rangeBar, { 'width': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });\n }\n else {\n // eslint-disable-next-line\n this.enableRtl ? (this.rangeBar.style.right =\n this.handlePos1 + 'px') : (this.rangeBar.style.left = this.handlePos1 + 'px');\n setStyleAttribute(this.rangeBar, { 'width': this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n else {\n if (this.type === 'MinRange') {\n this.rangeBar.style.bottom = '0px';\n setStyleAttribute(this.rangeBar, { 'height': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });\n }\n else {\n this.rangeBar.style.bottom = this.handlePos1 + 'px';\n setStyleAttribute(this.rangeBar, { 'height': this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n };\n Slider.prototype.checkValidValueAndPos = function (value) {\n value = this.checkHandleValue(value);\n value = this.checkHandlePosition(value);\n return value;\n };\n Slider.prototype.setLimitBarPositions = function (fromMinPostion, fromMaxpostion, toMinPostion, toMaxpostion) {\n if (this.orientation === 'Horizontal') {\n if (!this.enableRtl) {\n this.limitBarFirst.style.left = fromMinPostion + 'px';\n this.limitBarFirst.style.width = (fromMaxpostion - fromMinPostion) + 'px';\n }\n else {\n this.limitBarFirst.style.right = fromMinPostion + 'px';\n this.limitBarFirst.style.width = (fromMaxpostion - fromMinPostion) + 'px';\n }\n }\n else {\n this.limitBarFirst.style.bottom = fromMinPostion + 'px';\n this.limitBarFirst.style.height = (fromMaxpostion - fromMinPostion) + 'px';\n }\n if (this.type === 'Range') {\n if (this.orientation === 'Horizontal') {\n if (!this.enableRtl) {\n this.limitBarSecond.style.left = toMinPostion + 'px';\n this.limitBarSecond.style.width = (toMaxpostion - toMinPostion) + 'px';\n }\n else {\n this.limitBarSecond.style.right = toMinPostion + 'px';\n this.limitBarSecond.style.width = (toMaxpostion - toMinPostion) + 'px';\n }\n }\n else {\n this.limitBarSecond.style.bottom = toMinPostion + 'px';\n this.limitBarSecond.style.height = (toMaxpostion - toMinPostion) + 'px';\n }\n }\n };\n Slider.prototype.setLimitBar = function () {\n if (this.type === 'Default' || this.type === 'MinRange') {\n var fromPosition = (this.getLimitValueAndPosition(this.limits.minStart, this.limits.minStart, this.limits.minEnd, true))[0];\n fromPosition = this.checkValidValueAndPos(fromPosition);\n var toPosition = (this.getLimitValueAndPosition(this.limits.minEnd, this.limits.minStart, this.limits.minEnd, true))[0];\n toPosition = this.checkValidValueAndPos(toPosition);\n this.setLimitBarPositions(fromPosition, toPosition);\n }\n else if (this.type === 'Range') {\n var fromMinPostion = (this.getLimitValueAndPosition(this.limits.minStart, this.limits.minStart, this.limits.minEnd, true))[0];\n fromMinPostion = this.checkValidValueAndPos(fromMinPostion);\n var fromMaxpostion = (this.getLimitValueAndPosition(this.limits.minEnd, this.limits.minStart, this.limits.minEnd, true))[0];\n fromMaxpostion = this.checkValidValueAndPos(fromMaxpostion);\n var toMinPostion = (this.getLimitValueAndPosition(this.limits.maxStart, this.limits.maxStart, this.limits.maxEnd, true))[0];\n toMinPostion = this.checkValidValueAndPos(toMinPostion);\n var toMaxpostion = (this.getLimitValueAndPosition(this.limits.maxEnd, this.limits.maxStart, this.limits.maxEnd, true))[0];\n toMaxpostion = this.checkValidValueAndPos(toMaxpostion);\n this.setLimitBarPositions(fromMinPostion, fromMaxpostion, toMinPostion, toMaxpostion);\n }\n };\n Slider.prototype.getLimitValueAndPosition = function (currentValue, minValue, maxValue, limitBar) {\n if (isNullOrUndefined(minValue)) {\n minValue = this.min;\n if (isNullOrUndefined(currentValue) && limitBar) {\n currentValue = minValue;\n }\n }\n if (isNullOrUndefined(maxValue)) {\n maxValue = this.max;\n if (isNullOrUndefined(currentValue) && limitBar) {\n currentValue = maxValue;\n }\n }\n if (currentValue < minValue) {\n currentValue = minValue;\n }\n if (currentValue > maxValue) {\n currentValue = maxValue;\n }\n return [currentValue, this.checkHandlePosition(currentValue)];\n };\n Slider.prototype.setValue = function () {\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n this.min = 0;\n this.max = this.customValues.length - 1;\n this.setBarColor();\n }\n this.setAriaAttributes(this.firstHandle);\n this.handleVal1 = isNullOrUndefined(this.value) ? this.checkHandleValue(parseFloat(this.min.toString())) :\n this.checkHandleValue(parseFloat(this.value.toString()));\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n this.preHandlePos1 = this.handlePos1;\n // eslint-disable-next-line\n isNullOrUndefined(this.activeHandle) ? (this.type === 'Range' ? this.activeHandle = 2 : this.activeHandle = 1) :\n // eslint-disable-next-line no-self-assign\n this.activeHandle = this.activeHandle;\n if (this.type === 'Default' || this.type === 'MinRange') {\n if (this.limits.enabled) {\n var values = this.getLimitValueAndPosition(this.handleVal1, this.limits.minStart, this.limits.minEnd);\n this.handleVal1 = values[0];\n this.handlePos1 = values[1];\n this.preHandlePos1 = this.handlePos1;\n }\n this.setHandlePosition(null);\n this.handleStart();\n this.value = this.handleVal1;\n this.setAriaAttrValue(this.firstHandle);\n this.changeEvent('changed', null);\n }\n else {\n this.validateRangeValue();\n }\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n if (this.limits.enabled) {\n this.setLimitBar();\n }\n };\n Slider.prototype.rangeValueUpdate = function () {\n if (this.value === null || typeof (this.value) !== 'object') {\n this.value = [parseFloat(formatUnit(this.min)), parseFloat(formatUnit(this.max))];\n }\n };\n Slider.prototype.validateRangeValue = function () {\n this.rangeValueUpdate();\n this.setRangeValue();\n };\n Slider.prototype.modifyZindex = function () {\n if (this.type === 'Range') {\n if (this.activeHandle === 1) {\n this.firstHandle.style.zIndex = (this.zIndex + 4) + '';\n this.secondHandle.style.zIndex = (this.zIndex + 3) + '';\n }\n else {\n this.firstHandle.style.zIndex = (this.zIndex + 3) + '';\n this.secondHandle.style.zIndex = (this.zIndex + 4) + '';\n }\n }\n else if (this.isMaterialTooltip && this.tooltipElement) {\n this.tooltipElement.style.zIndex = getZindexPartial(this.element) + '';\n }\n };\n Slider.prototype.setHandlePosition = function (event) {\n var _this = this;\n var handle;\n var pos = (this.activeHandle === 1) ? this.handlePos1 : this.handlePos2;\n if (this.isMaterialTooltip) {\n handle = [this.firstHandle, this.materialHandle];\n }\n else {\n handle = [this.getHandle()];\n }\n this.handleStart();\n handle.forEach(function (handle) {\n if (_this.orientation === 'Horizontal') {\n // eslint-disable-next-line\n _this.enableRtl ? (handle.style.right =\n pos + \"px\") : (handle.style.left = pos + \"px\");\n }\n else {\n handle.style.bottom = pos + \"px\";\n }\n });\n this.changeEvent('change', event);\n };\n Slider.prototype.getHandle = function () {\n return (this.activeHandle === 1) ? this.firstHandle : this.secondHandle;\n };\n Slider.prototype.setRangeValue = function () {\n this.updateRangeValue();\n this.activeHandle = 1;\n this.setHandlePosition(null);\n this.activeHandle = 2;\n this.setHandlePosition(null);\n this.activeHandle = 1;\n };\n Slider.prototype.changeEvent = function (eventName, e) {\n var previous = eventName === 'change' ? this.previousVal : this.previousChanged;\n if (this.type !== 'Range') {\n this.setProperties({ 'value': this.handleVal1 }, true);\n if (previous !== this.value && (!this.isMaterialTooltip || !this.initialTooltip)) {\n this.trigger(eventName, this.changeEventArgs(eventName, e));\n this.initialTooltip = true;\n this.setPreviousVal(eventName, this.value);\n }\n this.setAriaAttrValue(this.firstHandle);\n }\n else {\n var value = this.value = [this.handleVal1, this.handleVal2];\n this.setProperties({ 'value': value }, true);\n if (previous.length === this.value.length\n && this.value[0] !== previous[0] || this.value[1] !== previous[1]) {\n this.initialTooltip = false;\n this.trigger(eventName, this.changeEventArgs(eventName, e));\n this.initialTooltip = true;\n this.setPreviousVal(eventName, this.value);\n }\n this.setAriaAttrValue(this.getHandle());\n }\n this.hiddenInput.value = this.value.toString();\n };\n Slider.prototype.changeEventArgs = function (eventName, e) {\n var eventArgs;\n if (this.tooltip.isVisible && this.tooltipObj && this.initialTooltip) {\n this.tooltipValue();\n eventArgs = {\n value: this.value,\n previousValue: eventName === 'change' ? this.previousVal : this.previousChanged,\n action: eventName, text: this.tooltipObj.content, isInteracted: isNullOrUndefined(e) ? false : true\n };\n }\n else {\n eventArgs = {\n value: this.value,\n previousValue: eventName === 'change' ? this.previousVal : this.previousChanged,\n action: eventName, text: isNullOrUndefined(this.ticksFormatInfo.format) ? this.value.toString() :\n (this.type !== 'Range' ? this.formatString(this.value, this.ticksFormatInfo).formatString :\n (this.formatString(this.value[0], this.ticksFormatInfo).formatString + ' - ' +\n this.formatString(this.value[1], this.ticksFormatInfo).formatString)),\n isInteracted: isNullOrUndefined(e) ? false : true\n };\n }\n return eventArgs;\n };\n Slider.prototype.setPreviousVal = function (eventName, value) {\n if (eventName === 'change') {\n this.previousVal = value;\n }\n else {\n this.previousChanged = value;\n }\n };\n Slider.prototype.updateRangeValue = function () {\n var values = this.value.toString().split(',').map(Number);\n if ((this.enableRtl && this.orientation !== 'Vertical') || this.rtl) {\n this.value = [values[1], values[0]];\n }\n else {\n this.value = [values[0], values[1]];\n }\n if (this.enableRtl && this.orientation !== 'Vertical') {\n this.handleVal1 = this.checkHandleValue(this.value[1]);\n this.handleVal2 = this.checkHandleValue(this.value[0]);\n }\n else {\n this.handleVal1 = this.checkHandleValue(this.value[0]);\n this.handleVal2 = this.checkHandleValue(this.value[1]);\n }\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n if (this.handlePos1 > this.handlePos2) {\n this.handlePos1 = this.handlePos2;\n this.handleVal1 = this.handleVal2;\n }\n this.preHandlePos1 = this.handlePos1;\n this.preHandlePos2 = this.handlePos2;\n if (this.limits.enabled) {\n this.activeHandle = 1;\n var values_1 = this.getLimitValueAndPosition(this.handleVal1, this.limits.minStart, this.limits.minEnd);\n this.handleVal1 = values_1[0];\n this.handlePos1 = values_1[1];\n this.preHandlePos1 = this.handlePos1;\n this.activeHandle = 2;\n values_1 = this.getLimitValueAndPosition(this.handleVal2, this.limits.maxStart, this.limits.maxEnd);\n this.handleVal2 = values_1[0];\n this.handlePos2 = values_1[1];\n this.preHandlePos2 = this.handlePos2;\n }\n };\n Slider.prototype.checkHandlePosition = function (value) {\n var pos;\n value = (100 *\n (value - (parseFloat(formatUnit(this.min))))) / ((parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min))));\n if (this.orientation === 'Horizontal') {\n pos = this.element.getBoundingClientRect().width * (value / 100);\n }\n else {\n pos = this.element.getBoundingClientRect().height * (value / 100);\n }\n if (((parseFloat(formatUnit(this.max))) === (parseFloat(formatUnit(this.min))))) {\n if (this.orientation === 'Horizontal') {\n pos = this.element.getBoundingClientRect().width;\n }\n else {\n pos = this.element.getBoundingClientRect().height;\n }\n }\n return pos;\n };\n Slider.prototype.checkHandleValue = function (value) {\n if (this.min > this.max) {\n this.min = this.max;\n }\n if (this.min === this.max) {\n return (parseFloat(formatUnit(this.max)));\n }\n var handle = this.tempStartEnd();\n if (value < handle.start) {\n value = handle.start;\n }\n else if (value > handle.end) {\n value = handle.end;\n }\n return value;\n };\n /**\n * It is used to reposition slider.\n * @returns void\n */\n Slider.prototype.reposition = function () {\n var _this = this;\n this.firstHandle.style.transition = 'none';\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = 'none';\n }\n if (this.type === 'Range') {\n this.secondHandle.style.transition = 'none';\n }\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n if (this.handleVal2) {\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n }\n if (this.orientation === 'Horizontal') {\n // eslint-disable-next-line\n this.enableRtl ? this.firstHandle.style.right =\n this.handlePos1 + \"px\" : this.firstHandle.style.left = this.handlePos1 + \"px\";\n if (this.isMaterialTooltip) {\n // eslint-disable-next-line\n this.enableRtl ? this.materialHandle.style.right =\n this.handlePos1 + \"px\" : this.materialHandle.style.left = this.handlePos1 + \"px\";\n }\n if (this.type === 'MinRange') {\n // eslint-disable-next-line\n this.enableRtl ? (this.rangeBar.style.right = '0px') : (this.rangeBar.style.left = '0px');\n setStyleAttribute(this.rangeBar, { 'width': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });\n }\n else if (this.type === 'Range') {\n // eslint-disable-next-line\n this.enableRtl ? this.secondHandle.style.right =\n this.handlePos2 + \"px\" : this.secondHandle.style.left = this.handlePos2 + \"px\";\n // eslint-disable-next-line\n this.enableRtl ? (this.rangeBar.style.right =\n this.handlePos1 + 'px') : (this.rangeBar.style.left = this.handlePos1 + 'px');\n setStyleAttribute(this.rangeBar, { 'width': this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n else {\n this.firstHandle.style.bottom = this.handlePos1 + \"px\";\n if (this.isMaterialTooltip) {\n this.materialHandle.style.bottom = this.handlePos1 + \"px\";\n }\n if (this.type === 'MinRange') {\n this.rangeBar.style.bottom = '0px';\n setStyleAttribute(this.rangeBar, { 'height': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });\n }\n else if (this.type === 'Range') {\n this.secondHandle.style.bottom = this.handlePos2 + \"px\";\n this.rangeBar.style.bottom = this.handlePos1 + 'px';\n setStyleAttribute(this.rangeBar, { 'height': this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n if (this.limits.enabled) {\n this.setLimitBar();\n }\n if (this.ticks.placement !== 'None' && this.ul) {\n this.removeElement(this.ul);\n this.ul = undefined;\n this.renderScale();\n }\n this.handleStart();\n if (!this.tooltip.isVisible) {\n setTimeout(function () {\n _this.firstHandle.style.transition = _this.scaleTransform;\n if (_this.type === 'Range') {\n _this.secondHandle.style.transition = _this.scaleTransform;\n }\n });\n }\n this.refreshTooltip(this.tooltipTarget);\n this.setBarColor();\n };\n Slider.prototype.changeHandleValue = function (value) {\n var position = null;\n if (this.activeHandle === 1) {\n if (!(this.limits.enabled && this.limits.startHandleFixed)) {\n this.handleVal1 = this.checkHandleValue(value);\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n if (this.type === 'Range' && this.handlePos1 > this.handlePos2) {\n this.handlePos1 = this.handlePos2;\n this.handleVal1 = this.handleVal2;\n }\n if (this.handlePos1 !== this.preHandlePos1) {\n position = this.preHandlePos1 = this.handlePos1;\n }\n }\n this.modifyZindex();\n }\n else {\n if (!(this.limits.enabled && this.limits.endHandleFixed)) {\n this.handleVal2 = this.checkHandleValue(value);\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n if (this.type === 'Range' && this.handlePos2 < this.handlePos1) {\n this.handlePos2 = this.handlePos1;\n this.handleVal2 = this.handleVal1;\n }\n if (this.handlePos2 !== this.preHandlePos2) {\n position = this.preHandlePos2 = this.handlePos2;\n }\n }\n this.modifyZindex();\n }\n if (position !== null) {\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n this.setHandlePosition(null);\n }\n };\n // eslint-disable-next-line\n Slider.prototype.tempStartEnd = function () {\n if (this.min > this.max) {\n return {\n start: this.max,\n end: this.min\n };\n }\n else {\n return {\n start: this.min,\n end: this.max\n };\n }\n };\n // eslint-disable-next-line\n Slider.prototype.xyToPosition = function (position) {\n var pos;\n if (this.min === this.max) {\n return 100;\n }\n if (this.orientation === 'Horizontal') {\n var left = position.x - this.element.getBoundingClientRect().left;\n var num = this.element.offsetWidth / 100;\n this.val = (left / num);\n }\n else {\n var top_1 = position.y - this.element.getBoundingClientRect().top;\n var num = this.element.offsetHeight / 100;\n this.val = 100 - (top_1 / num);\n }\n var val = this.stepValueCalculation(this.val);\n if (val < 0) {\n val = 0;\n }\n else if (val > 100) {\n val = 100;\n }\n if (this.enableRtl && this.orientation !== 'Vertical') {\n val = 100 - val;\n }\n if (this.orientation === 'Horizontal') {\n pos = this.element.getBoundingClientRect().width * (val / 100);\n }\n else {\n pos = this.element.getBoundingClientRect().height * (val / 100);\n }\n return pos;\n };\n Slider.prototype.stepValueCalculation = function (value) {\n if (this.step === 0) {\n this.step = 1;\n }\n var percentStep = (parseFloat(formatUnit(this.step))) / ((parseFloat(formatUnit(this.max)) - parseFloat(formatUnit(this.min))) / 100);\n var remain = value % Math.abs(percentStep);\n if (remain !== 0) {\n if ((percentStep / 2) > remain) {\n value -= remain;\n }\n else {\n value += Math.abs(percentStep) - remain;\n }\n }\n return value;\n };\n Slider.prototype.add = function (a, b, addition) {\n var precision;\n var x = Math.pow(10, precision || 3);\n var val;\n if (addition) {\n val = (Math.round(a * x) + Math.round(b * x)) / x;\n }\n else {\n val = (Math.round(a * x) - Math.round(b * x)) / x;\n }\n return val;\n };\n Slider.prototype.positionToValue = function (pos) {\n var val;\n var diff = parseFloat(formatUnit(this.max)) - parseFloat(formatUnit(this.min));\n if (this.orientation === 'Horizontal') {\n val = (pos / this.element.getBoundingClientRect().width) * diff;\n }\n else {\n val = (pos / this.element.getBoundingClientRect().height) * diff;\n }\n var total = this.add(val, parseFloat(this.min.toString()), true);\n return (total);\n };\n Slider.prototype.sliderBarClick = function (evt) {\n evt.preventDefault();\n // eslint-disable-next-line\n var pos;\n if (evt.type === 'mousedown' || evt.type === 'mouseup' || evt.type === 'click') {\n pos = { x: evt.clientX, y: evt.clientY };\n }\n else if (evt.type === 'touchend' || evt.type === 'touchstart') {\n pos = { x: evt.changedTouches[0].clientX, y: evt.changedTouches[0].clientY };\n }\n var handlepos = this.xyToPosition(pos);\n var handleVal = this.positionToValue(handlepos);\n if (this.type === 'Range' && (this.handlePos2 - handlepos) < (handlepos - this.handlePos1)) {\n this.activeHandle = 2;\n if (!(this.limits.enabled && this.limits.endHandleFixed)) {\n if (this.limits.enabled) {\n var value = this.getLimitValueAndPosition(handleVal, this.limits.maxStart, this.limits.maxEnd);\n handleVal = value[0];\n handlepos = value[1];\n }\n this.secondHandle.classList.add(classNames.sliderActiveHandle);\n this.handlePos2 = this.preHandlePos2 = handlepos;\n this.handleVal2 = handleVal;\n }\n this.modifyZindex();\n this.secondHandle.focus();\n }\n else {\n this.activeHandle = 1;\n if (!(this.limits.enabled && this.limits.startHandleFixed)) {\n if (this.limits.enabled) {\n var value = this.getLimitValueAndPosition(handleVal, this.limits.minStart, this.limits.minEnd);\n handleVal = value[0];\n handlepos = value[1];\n }\n this.firstHandle.classList.add(classNames.sliderActiveHandle);\n this.handlePos1 = this.preHandlePos1 = handlepos;\n this.handleVal1 = handleVal;\n }\n this.modifyZindex();\n this.firstHandle.focus();\n }\n if (this.isMaterialTooltip) {\n this.tooltipElement.classList.add(classNames.materialTooltipActive);\n }\n var focusedElement = this.element.querySelector('.' + classNames.sliderTabHandle);\n if (focusedElement && this.getHandle() !== focusedElement) {\n focusedElement.classList.remove(classNames.sliderTabHandle);\n }\n var handle = this.activeHandle === 1 ? this.firstHandle : this.secondHandle;\n if (evt.target === handle) {\n if (this.isMaterial && !this.tooltip.isVisible &&\n !this.getHandle().classList.contains(classNames.sliderTabHandle)) {\n this.materialChange();\n }\n this.sliderBarUp(evt);\n this.tooltipToggle(this.getHandle());\n return;\n }\n if (!this.checkRepeatedValue(handleVal)) {\n return;\n }\n var transition = this.isMaterial && this.tooltip.isVisible ?\n this.transitionOnMaterialTooltip : this.transition;\n this.getHandle().style.transition = transition.handle;\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = transition.rangeBar;\n }\n this.setHandlePosition(evt);\n if (this.isMaterialTooltip) {\n this.initialTooltip = false;\n }\n this.changeEvent('changed', evt);\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n };\n Slider.prototype.handleValueAdjust = function (handleValue, assignValue, handleNumber) {\n if (handleNumber === 1) {\n this.handleVal1 = assignValue;\n this.handleVal2 = this.handleVal1 + this.minDiff;\n }\n else if (handleNumber === 2) {\n this.handleVal2 = assignValue;\n this.handleVal1 = this.handleVal2 - this.minDiff;\n }\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n };\n Slider.prototype.dragRangeBarMove = function (event) {\n var _a, _b;\n if (event.type !== 'touchmove') {\n event.preventDefault();\n }\n this.rangeBarDragged = true;\n var pos;\n this.rangeBar.style.transition = 'none';\n this.firstHandle.style.transition = 'none';\n this.secondHandle.style.transition = 'none';\n var xPostion;\n var yPostion;\n if (event.type === 'mousemove') {\n _a = [event.clientX, event.clientY], xPostion = _a[0], yPostion = _a[1];\n }\n else {\n _b = [event.changedTouches[0].clientX, event.changedTouches[0].clientY], xPostion = _b[0], yPostion = _b[1];\n }\n if (!(this.limits.enabled && this.limits.startHandleFixed) && !(this.limits.enabled && this.limits.endHandleFixed)) {\n if (!this.enableRtl) {\n pos = { x: xPostion - this.firstPartRemain, y: yPostion + this.secondPartRemain };\n }\n else {\n pos = { x: xPostion + this.secondPartRemain, y: yPostion + this.secondPartRemain };\n }\n this.handlePos1 = this.xyToPosition(pos);\n this.handleVal1 = this.positionToValue(this.handlePos1);\n if (!this.enableRtl) {\n pos = { x: xPostion + this.secondPartRemain, y: yPostion - this.firstPartRemain };\n }\n else {\n pos = { x: xPostion - this.firstPartRemain, y: yPostion - this.firstPartRemain };\n }\n this.handlePos2 = this.xyToPosition(pos);\n this.handleVal2 = this.positionToValue(this.handlePos2);\n if (this.limits.enabled) {\n var value = this.getLimitValueAndPosition(this.handleVal1, this.limits.minStart, this.limits.minEnd);\n this.handleVal1 = value[0];\n this.handlePos1 = value[1];\n if (this.handleVal1 === this.limits.minEnd) {\n this.handleValueAdjust(this.handleVal1, this.limits.minEnd, 1);\n }\n if (this.handleVal1 === this.limits.minStart) {\n this.handleValueAdjust(this.handleVal1, this.limits.minStart, 1);\n }\n value = this.getLimitValueAndPosition(this.handleVal2, this.limits.maxStart, this.limits.maxEnd);\n this.handleVal2 = value[0];\n this.handlePos2 = value[1];\n if (this.handleVal2 === this.limits.maxStart) {\n this.handleValueAdjust(this.handleVal2, this.limits.maxStart, 2);\n }\n if (this.handleVal2 === this.limits.maxEnd) {\n this.handleValueAdjust(this.handleVal2, this.limits.maxEnd, 2);\n }\n }\n if (this.handleVal2 === this.max) {\n this.handleValueAdjust(this.handleVal2, this.max, 2);\n }\n if (this.handleVal1 === this.min) {\n this.handleValueAdjust(this.handleVal1, this.min, 1);\n }\n }\n this.activeHandle = 1;\n this.setHandlePosition(event);\n this.activeHandle = 2;\n this.setHandlePosition(event);\n this.tooltipToggle(this.rangeBar);\n this.setRangeBar();\n };\n Slider.prototype.sliderBarUp = function (event) {\n this.changeEvent('changed', event);\n this.handleFocusOut();\n this.firstHandle.classList.remove(classNames.sliderActiveHandle);\n if (this.type === 'Range') {\n this.initialTooltip = false;\n this.secondHandle.classList.remove(classNames.sliderActiveHandle);\n }\n this.closeTooltip();\n if (this.isMaterial) {\n this.getHandle().classList.remove('e-large-thumb-size');\n if (this.isMaterialTooltip) {\n this.tooltipElement.classList.remove(classNames.materialTooltipActive);\n }\n }\n EventHandler.remove(document, 'mousemove touchmove', this.sliderBarMove);\n EventHandler.remove(document, 'mouseup touchend', this.sliderBarUp);\n };\n Slider.prototype.sliderBarMove = function (evt) {\n if (evt.type !== 'touchmove') {\n evt.preventDefault();\n }\n var pos;\n if (evt.type === 'mousemove') {\n pos = { x: evt.clientX, y: evt.clientY };\n }\n else {\n pos = { x: evt.changedTouches[0].clientX, y: evt.changedTouches[0].clientY };\n }\n var handlepos = this.xyToPosition(pos);\n var handleVal = this.positionToValue(handlepos);\n handlepos = Math.round(handlepos);\n if (this.type !== 'Range' && this.activeHandle === 1) {\n if (!(this.limits.enabled && this.limits.startHandleFixed)) {\n if (this.limits.enabled) {\n var valueAndPostion = this.getLimitValueAndPosition(handleVal, this.limits.minStart, this.limits.minEnd);\n handlepos = valueAndPostion[1];\n handleVal = valueAndPostion[0];\n }\n this.handlePos1 = handlepos;\n this.handleVal1 = handleVal;\n }\n this.firstHandle.classList.add(classNames.sliderActiveHandle);\n }\n if (this.type === 'Range') {\n if (this.activeHandle === 1) {\n this.firstHandle.classList.add(classNames.sliderActiveHandle);\n if (!(this.limits.enabled && this.limits.startHandleFixed)) {\n if (handlepos > this.handlePos2) {\n handlepos = this.handlePos2;\n handleVal = this.handleVal2;\n }\n if (handlepos !== this.preHandlePos1) {\n if (this.limits.enabled) {\n var value = this.getLimitValueAndPosition(handleVal, this.limits.minStart, this.limits.minEnd);\n handleVal = value[0];\n handlepos = value[1];\n }\n this.handlePos1 = this.preHandlePos1 = handlepos;\n this.handleVal1 = handleVal;\n this.activeHandle = 1;\n }\n }\n }\n else if (this.activeHandle === 2) {\n this.secondHandle.classList.add(classNames.sliderActiveHandle);\n if (!(this.limits.enabled && this.limits.endHandleFixed)) {\n if (handlepos < this.handlePos1) {\n handlepos = this.handlePos1;\n handleVal = this.handleVal1;\n }\n if (handlepos !== this.preHandlePos2) {\n if (this.limits.enabled) {\n var value = this.getLimitValueAndPosition(handleVal, this.limits.maxStart, this.limits.maxEnd);\n handleVal = value[0];\n handlepos = value[1];\n }\n this.handlePos2 = this.preHandlePos2 = handlepos;\n this.handleVal2 = handleVal;\n this.activeHandle = 2;\n }\n }\n }\n }\n if (!this.checkRepeatedValue(handleVal)) {\n return;\n }\n this.getHandle().style.transition = this.scaleTransform;\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = 'none';\n }\n this.setHandlePosition(evt);\n if (this.isMaterial && !this.tooltip.isVisible &&\n !this.getHandle().classList.contains(classNames.sliderTabHandle)) {\n this.materialChange();\n }\n this.tooltipToggle(this.getHandle());\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n };\n Slider.prototype.dragRangeBarUp = function (event) {\n if (!this.rangeBarDragged) {\n this.focusSliderElement();\n this.sliderBarClick(event);\n }\n else {\n this.isDragComplete = true;\n }\n this.changeEvent('changed', event);\n this.closeTooltip();\n EventHandler.remove(document, 'mousemove touchmove', this.dragRangeBarMove);\n EventHandler.remove(document, 'mouseup touchend', this.dragRangeBarUp);\n this.rangeBarDragged = false;\n };\n Slider.prototype.checkRepeatedValue = function (currentValue) {\n if (this.type === 'Range') {\n var previousVal = this.enableRtl && this.orientation !== 'Vertical' ? (this.activeHandle === 1 ?\n this.previousVal[1] : this.previousVal[0]) :\n (this.activeHandle === 1 ? this.previousVal[0] : this.previousVal[1]);\n if (currentValue === previousVal) {\n return 0;\n }\n }\n else {\n if (currentValue === this.previousVal) {\n return 0;\n }\n }\n return 1;\n };\n Slider.prototype.refreshTooltip = function (target) {\n if (this.tooltip.isVisible && this.tooltipObj) {\n this.tooltipValue();\n if (target) {\n this.tooltipObj.refresh(target);\n this.tooltipTarget = target;\n }\n }\n };\n Slider.prototype.openTooltip = function (target) {\n if (this.tooltip.isVisible && this.tooltipObj && !this.isMaterialTooltip) {\n this.tooltipValue();\n // eslint-disable-next-line security/detect-non-literal-fs-filename -- Safe as no value holds user input\n this.tooltipObj.open(target);\n this.tooltipTarget = target;\n }\n };\n Slider.prototype.closeTooltip = function () {\n if (this.tooltip.isVisible && this.tooltipObj && this.tooltip.showOn !== 'Always' && !this.isMaterialTooltip) {\n this.tooltipValue();\n this.tooltipObj.close();\n this.tooltipTarget = undefined;\n }\n };\n Slider.prototype.keyDown = function (event) {\n switch (event.keyCode) {\n case 37:\n case 38:\n case 39:\n case 40:\n case 33:\n case 34:\n case 36:\n case 35:\n event.preventDefault();\n this.buttonClick(event);\n break;\n }\n };\n Slider.prototype.wireButtonEvt = function (destroy) {\n if (!destroy) {\n EventHandler.add(this.firstBtn, 'mouseleave touchleave', this.buttonFocusOut, this);\n EventHandler.add(this.secondBtn, 'mouseleave touchleave', this.buttonFocusOut, this);\n EventHandler.add(this.firstBtn, 'mousedown touchstart', this.repeatHandlerMouse, this);\n EventHandler.add(this.firstBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp, this);\n EventHandler.add(this.secondBtn, 'mousedown touchstart', this.repeatHandlerMouse, this);\n EventHandler.add(this.secondBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp, this);\n EventHandler.add(this.firstBtn, 'focusout', this.sliderFocusOut, this);\n EventHandler.add(this.secondBtn, 'focusout', this.sliderFocusOut, this);\n }\n else {\n EventHandler.remove(this.firstBtn, 'mouseleave touchleave', this.buttonFocusOut);\n EventHandler.remove(this.secondBtn, 'mouseleave touchleave', this.buttonFocusOut);\n EventHandler.remove(this.firstBtn, 'mousedown touchstart', this.repeatHandlerMouse);\n EventHandler.remove(this.firstBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp);\n EventHandler.remove(this.secondBtn, 'mousedown touchstart', this.repeatHandlerMouse);\n EventHandler.remove(this.secondBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp);\n EventHandler.remove(this.firstBtn, 'focusout', this.sliderFocusOut);\n EventHandler.remove(this.secondBtn, 'focusout', this.sliderFocusOut);\n }\n };\n Slider.prototype.rangeBarMousedown = function (event) {\n var _a, _b;\n event.preventDefault();\n this.focusSliderElement();\n if (this.type === 'Range' && this.drag && event.target === this.rangeBar) {\n var xPostion = void 0;\n var yPostion = void 0;\n if (event.type === 'mousedown') {\n _a = [event.clientX, event.clientY], xPostion = _a[0], yPostion = _a[1];\n }\n else if (event.type === 'touchstart') {\n _b = [event.changedTouches[0].clientX, event.changedTouches[0].clientY], xPostion = _b[0], yPostion = _b[1];\n }\n if (this.orientation === 'Horizontal') {\n this.firstPartRemain = xPostion - this.rangeBar.getBoundingClientRect().left;\n this.secondPartRemain = this.rangeBar.getBoundingClientRect().right - xPostion;\n }\n else {\n this.firstPartRemain = yPostion - this.rangeBar.getBoundingClientRect().top;\n this.secondPartRemain = this.rangeBar.getBoundingClientRect().bottom - yPostion;\n }\n this.minDiff = this.handleVal2 - this.handleVal1;\n this.tooltipToggle(this.rangeBar);\n var focusedElement = this.element.querySelector('.' + classNames.sliderTabHandle);\n if (focusedElement) {\n focusedElement.classList.remove(classNames.sliderTabHandle);\n }\n EventHandler.add(document, 'mousemove touchmove', this.dragRangeBarMove, this);\n EventHandler.add(document, 'mouseup touchend', this.dragRangeBarUp, this);\n }\n };\n Slider.prototype.elementClick = function (event) {\n if (this.isDragComplete) {\n this.isDragComplete = false;\n return;\n }\n event.preventDefault();\n this.focusSliderElement();\n this.sliderBarClick(event);\n this.focusHandle();\n };\n Slider.prototype.wireEvents = function () {\n this.onresize = this.reposition.bind(this);\n window.addEventListener('resize', this.onresize);\n if (this.enabled && !this.readonly) {\n EventHandler.add(this.element, 'click', this.elementClick, this);\n if (this.type === 'Range' && this.drag) {\n EventHandler.add(this.rangeBar, 'mousedown touchstart', this.rangeBarMousedown, this);\n }\n EventHandler.add(this.sliderContainer, 'keydown', this.keyDown, this);\n EventHandler.add(this.sliderContainer, 'keyup', this.keyUp, this);\n EventHandler.add(this.element, 'focusout', this.sliderFocusOut, this);\n EventHandler.add(this.sliderContainer, 'mouseover mouseout touchstart touchend', this.hover, this);\n this.wireFirstHandleEvt(false);\n if (this.type === 'Range') {\n this.wireSecondHandleEvt(false);\n }\n if (this.showButtons) {\n this.wireButtonEvt(false);\n }\n this.wireMaterialTooltipEvent(false);\n if (this.isForm) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n }\n };\n Slider.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'click', this.elementClick);\n if (this.type === 'Range' && this.drag) {\n EventHandler.remove(this.rangeBar, 'mousedown touchstart', this.rangeBarMousedown);\n }\n EventHandler.remove(this.sliderContainer, 'keydown', this.keyDown);\n EventHandler.remove(this.sliderContainer, 'keyup', this.keyUp);\n EventHandler.remove(this.element, 'focusout', this.sliderFocusOut);\n EventHandler.remove(this.sliderContainer, 'mouseover mouseout touchstart touchend', this.hover);\n this.wireFirstHandleEvt(true);\n if (this.type === 'Range') {\n this.wireSecondHandleEvt(true);\n }\n if (this.showButtons) {\n this.wireButtonEvt(true);\n }\n this.wireMaterialTooltipEvent(true);\n EventHandler.remove(this.element, 'reset', this.formResetHandler);\n };\n Slider.prototype.formResetHandler = function () {\n this.setProperties({ 'value': this.formResetValue }, true);\n this.setValue();\n };\n Slider.prototype.keyUp = function (event) {\n if (event.keyCode === 9 && event.target.classList.contains(classNames.sliderHandle)) {\n this.focusSliderElement();\n if (!event.target.classList.contains(classNames.sliderTabHandle)) {\n if (this.element.querySelector('.' + classNames.sliderTabHandle)) {\n this.element.querySelector('.' + classNames.sliderTabHandle).classList.remove(classNames.sliderTabHandle);\n }\n event.target.classList.add(classNames.sliderTabHandle);\n var parentElement = event.target.parentElement;\n if (parentElement === this.element) {\n parentElement.querySelector('.' + classNames.sliderTrack).classList.add(classNames.sliderTabTrack);\n if (this.type === 'Range' || this.type === 'MinRange') {\n parentElement.querySelector('.' + classNames.rangeBar).classList.add(classNames.sliderTabRange);\n }\n }\n if (this.type === 'Range') {\n (event.target.previousSibling).classList.contains(classNames.sliderHandle) ?\n this.activeHandle = 2 : this.activeHandle = 1;\n }\n this.getHandle().focus();\n this.tooltipToggle(this.getHandle());\n }\n }\n this.closeTooltip();\n this.changeEvent('changed', event);\n };\n Slider.prototype.hover = function (event) {\n if (!isNullOrUndefined(event)) {\n if (event.type === 'mouseover' || event.type === 'touchmove' || event.type === 'mousemove' ||\n event.type === 'pointermove' || event.type === 'touchstart') {\n this.sliderContainer.classList.add(classNames.sliderHover);\n }\n else {\n this.sliderContainer.classList.remove(classNames.sliderHover);\n var curTarget = event.currentTarget;\n if (this.tooltip.isVisible && this.tooltip.showOn !== 'Always' && this.tooltipObj && this.isMaterialTooltip &&\n !curTarget.classList.contains(classNames.sliderHandleFocused) &&\n !curTarget.classList.contains(classNames.sliderTabHandle)) {\n this.closeMaterialTooltip();\n }\n }\n }\n };\n Slider.prototype.sliderFocusOut = function (event) {\n if (event.relatedTarget !== this.secondHandle && event.relatedTarget !== this.firstHandle &&\n event.relatedTarget !== this.element && event.relatedTarget !== this.firstBtn && event.relatedTarget !== this.secondBtn) {\n this.closeMaterialTooltip();\n this.closeTooltip();\n if (this.element.querySelector('.' + classNames.sliderTabHandle)) {\n this.element.querySelector('.' + classNames.sliderTabHandle).classList.remove(classNames.sliderTabHandle);\n }\n if (this.element.querySelector('.' + classNames.sliderTabTrack)) {\n this.element.querySelector('.' + classNames.sliderTabTrack).classList.remove(classNames.sliderTabTrack);\n if ((this.type === 'Range' || this.type === 'MinRange') &&\n this.element.querySelector('.' + classNames.sliderTabRange)) {\n this.element.querySelector('.' + classNames.sliderTabRange).classList.remove(classNames.sliderTabRange);\n }\n }\n this.hiddenInput.focus();\n this.hiddenInput.blur();\n this.isElementFocused = false;\n }\n };\n Slider.prototype.removeElement = function (element) {\n if (element.parentNode) {\n element.parentNode.removeChild(element);\n }\n };\n Slider.prototype.changeSliderType = function (type, args) {\n if (this.isMaterialTooltip && this.materialHandle) {\n this.sliderContainer.classList.remove(classNames.materialSlider);\n this.removeElement(this.materialHandle);\n this.materialHandle = undefined;\n }\n this.removeElement(this.firstHandle);\n this.firstHandle = undefined;\n if (type !== 'Default') {\n if (type === 'Range') {\n this.removeElement(this.secondHandle);\n this.secondHandle = undefined;\n }\n this.removeElement(this.rangeBar);\n this.rangeBar = undefined;\n }\n if (this.tooltip.isVisible && !isNullOrUndefined(this.tooltipObj)) {\n this.tooltipObj.destroy();\n this.tooltipElement = undefined;\n this.tooltipCollidedPosition = undefined;\n }\n if (this.limits.enabled) {\n if (type === 'MinRange' || type === 'Default') {\n if (!isNullOrUndefined(this.limitBarFirst)) {\n this.removeElement(this.limitBarFirst);\n this.limitBarFirst = undefined;\n }\n }\n else {\n if (!isNullOrUndefined(this.limitBarSecond)) {\n this.removeElement(this.limitBarSecond);\n this.limitBarSecond = undefined;\n }\n }\n }\n this.activeHandle = 1;\n this.getThemeInitialization();\n if (this.type === 'Range') {\n this.rangeValueUpdate();\n }\n this.createRangeBar();\n if (this.limits.enabled) {\n this.createLimitBar();\n }\n this.setHandler();\n this.setOrientClass();\n this.wireFirstHandleEvt(false);\n if (this.type === 'Range') {\n this.wireSecondHandleEvt(false);\n }\n this.setValue();\n if (this.tooltip.isVisible) {\n this.renderTooltip();\n this.wireMaterialTooltipEvent(false);\n }\n this.setBarColor();\n if (args !== 'tooltip') {\n this.updateConfig();\n }\n };\n Slider.prototype.changeRtl = function () {\n if (!this.enableRtl && this.type === 'Range') {\n this.value = [this.handleVal2, this.handleVal1];\n }\n this.updateConfig();\n if (this.tooltip.isVisible) {\n this.tooltipObj.refresh(this.firstHandle);\n }\n if (this.showButtons) {\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n attributes(enabledRTL ? this.secondBtn : this.firstBtn, { 'aria-label': 'Decrease', title: 'Decrease' });\n attributes(enabledRTL ? this.firstBtn : this.secondBtn, { 'aria-label': 'Increase', title: 'Increase' });\n }\n };\n Slider.prototype.changeOrientation = function () {\n this.changeSliderType(this.type, 'null');\n };\n Slider.prototype.updateConfig = function () {\n this.setEnableRTL();\n this.setValue();\n if (this.tooltip.isVisible) {\n this.refreshTooltip(this.tooltipTarget);\n }\n if (this.ticks.placement !== 'None') {\n if (this.ul) {\n this.removeElement(this.ul);\n this.ul = undefined;\n this.renderScale();\n }\n }\n this.limitsPropertyChange();\n };\n Slider.prototype.limitsPropertyChange = function () {\n if (this.limits.enabled) {\n if (isNullOrUndefined(this.limitBarFirst) && this.type !== 'Range') {\n this.createLimitBar();\n }\n if (isNullOrUndefined(this.limitBarFirst) && isNullOrUndefined(this.limitBarSecond) && this.type === 'Range') {\n this.createLimitBar();\n }\n this.setLimitBar();\n this.setValue();\n }\n else {\n if (!isNullOrUndefined(this.limitBarFirst)) {\n detach(this.limitBarFirst);\n }\n if (!isNullOrUndefined(this.limitBarSecond)) {\n detach(this.limitBarSecond);\n }\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @private\n */\n Slider.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it removes the attributes and classes.\n * @method destroy\n * @return {void}\n */\n Slider.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n this.unwireEvents();\n window.removeEventListener('resize', this.onresize);\n removeClass([this.sliderContainer], [classNames.sliderDisabled]);\n this.firstHandle.removeAttribute('aria-orientation');\n if (this.type === 'Range') {\n this.secondHandle.removeAttribute('aria-orientation');\n }\n this.sliderContainer.parentNode.insertBefore(this.element, this.sliderContainer);\n detach(this.sliderContainer);\n if (this.tooltip.isVisible) {\n this.tooltipObj.destroy();\n }\n this.element.innerHTML = '';\n };\n /**\n * Calls internally if any of the property value is changed.\n * @private\n */\n // tslint:disable-next-line\n Slider.prototype.onPropertyChanged = function (newProp, oldProp) {\n var _this = this;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n case 'value':\n if (newProp && oldProp) {\n var value = isNullOrUndefined(newProp.value) ?\n (this.type === 'Range' ? [this.min, this.max] : this.min) : newProp.value;\n this.setProperties({ 'value': value }, true);\n if (!isNullOrUndefined(oldProp.value) && oldProp.value.toString() !== value.toString()) {\n this.setValue();\n this.refreshTooltip(this.tooltipTarget);\n if (this.type === 'Range') {\n if (isNullOrUndefined(newProp.value) || oldProp.value[1] === value[1]) {\n this.activeHandle = 1;\n }\n else {\n this.activeHandle = 2;\n }\n }\n }\n }\n break;\n case 'min':\n case 'step':\n case 'max':\n this.setMinMaxValue();\n break;\n case 'tooltip':\n if (!isNullOrUndefined(newProp.tooltip) && !isNullOrUndefined(oldProp.tooltip)) {\n this.setTooltip(prop);\n }\n break;\n case 'type':\n if (!isNullOrUndefined(oldProp) && Object.keys(oldProp).length\n && !isNullOrUndefined(oldProp.type)) {\n this.changeSliderType(oldProp.type, prop);\n this.setZindex();\n }\n break;\n case 'enableRtl':\n if (oldProp.enableRtl !== newProp.enableRtl && this.orientation !== 'Vertical') {\n this.rtl = oldProp.enableRtl;\n this.changeRtl();\n }\n break;\n case 'limits':\n this.limitsPropertyChange();\n break;\n case 'orientation':\n this.changeOrientation();\n break;\n case 'ticks':\n if (!isNullOrUndefined(this.sliderContainer.querySelector('.' + classNames.scale))) {\n detach(this.ul);\n Array.prototype.forEach.call(this.sliderContainer.classList, function (className) {\n if (className.match(/e-scale-/)) {\n _this.sliderContainer.classList.remove(className);\n }\n });\n }\n if (this.ticks.placement !== 'None') {\n this.renderScale();\n this.setZindex();\n }\n break;\n case 'locale':\n if (this.showButtons) {\n this.buttonTitle();\n }\n break;\n case 'showButtons':\n if (newProp.showButtons) {\n this.setButtons();\n this.reposition();\n if (this.enabled && !this.readonly) {\n this.wireButtonEvt(false);\n }\n }\n else {\n if (this.firstBtn && this.secondBtn) {\n this.sliderContainer.removeChild(this.firstBtn);\n this.sliderContainer.removeChild(this.secondBtn);\n this.sliderContainer.classList.remove(classNames.sliderButtonClass);\n this.firstBtn = undefined;\n this.secondBtn = undefined;\n this.reposition();\n }\n }\n break;\n case 'enabled':\n this.setEnabled();\n break;\n case 'readonly':\n this.setReadOnly();\n break;\n case 'customValues':\n this.setValue();\n this.reposition();\n break;\n case 'colorRange':\n this.reposition();\n break;\n case 'width':\n this.setElementWidth(newProp.width);\n this.setMinMaxValue();\n if (this.limits) {\n this.limitsPropertyChange();\n }\n break;\n }\n }\n };\n Slider.prototype.setReadOnly = function () {\n if (this.readonly) {\n this.unwireEvents();\n this.sliderContainer.classList.add(classNames.readonly);\n }\n else {\n this.wireEvents();\n this.sliderContainer.classList.remove(classNames.readonly);\n }\n };\n Slider.prototype.setMinMaxValue = function () {\n var _this = this;\n this.setValue();\n this.refreshTooltip(this.tooltipTarget);\n if (!isNullOrUndefined(this.sliderContainer.querySelector('.' + classNames.scale))) {\n if (this.ul) {\n detach(this.ul);\n Array.prototype.forEach.call(this.sliderContainer.classList, function (className) {\n if (className.match(/e-scale-/)) {\n _this.sliderContainer.classList.remove(className);\n }\n });\n }\n }\n if (this.ticks.placement !== 'None') {\n this.renderScale();\n this.setZindex();\n }\n };\n Slider.prototype.setZindex = function () {\n this.zIndex = 6;\n if (!isNullOrUndefined(this.ticks) && this.ticks.placement !== 'None') {\n this.ul.style.zIndex = (this.zIndex + -7) + '';\n this.element.style.zIndex = (this.zIndex + 2) + '';\n }\n if (!this.isMaterial && !isNullOrUndefined(this.ticks) && this.ticks.placement === 'Both') {\n this.element.style.zIndex = (this.zIndex + 2) + '';\n }\n this.firstHandle.style.zIndex = (this.zIndex + 3) + '';\n if (this.type === 'Range') {\n this.secondHandle.style.zIndex = (this.zIndex + 4) + '';\n }\n };\n Slider.prototype.setTooltip = function (args) {\n this.changeSliderType(this.type, args);\n };\n Slider.prototype.setBarColor = function () {\n var trackPosition;\n var trackClassName;\n var child = this.sliderTrack.lastElementChild;\n while (child) {\n this.sliderTrack.removeChild(child);\n child = this.sliderTrack.lastElementChild;\n }\n for (var i = 0; i < this.colorRange.length; i++) {\n if (!isNullOrUndefined(this.colorRange[i].start) && !isNullOrUndefined(this.colorRange[i].end)) {\n if (this.colorRange[i].end > this.colorRange[i].start) {\n if (this.colorRange[i].start < this.min) {\n this.colorRange[i].start = this.min;\n }\n if (this.colorRange[i].end > this.max) {\n this.colorRange[i].end = this.max;\n }\n var startingPosition = this.checkHandlePosition(this.colorRange[i].start);\n var endPosition = this.checkHandlePosition(this.colorRange[i].end);\n var trackContainer = this.createElement('div');\n trackContainer.style.backgroundColor = this.colorRange[i].color;\n trackContainer.style.border = '1px solid ' + this.colorRange[i].color;\n if (this.orientation === 'Horizontal') {\n trackClassName = classNames.sliderHorizantalColor;\n if (this.enableRtl) {\n if (isNullOrUndefined(this.customValues)) {\n trackPosition = this.checkHandlePosition(this.max) - this.checkHandlePosition(this.colorRange[i].end);\n }\n else {\n trackPosition = this.checkHandlePosition(this.customValues.length - this.colorRange[i].end - 1);\n }\n }\n else {\n trackPosition = this.checkHandlePosition(this.colorRange[i].start);\n }\n trackContainer.style.width = endPosition - startingPosition + 'px';\n trackContainer.style.left = trackPosition + 'px';\n }\n else {\n trackClassName = classNames.sliderVerticalColor;\n trackPosition = this.checkHandlePosition(this.colorRange[i].start);\n trackContainer.style.height = endPosition - startingPosition + 'px';\n trackContainer.style.bottom = trackPosition + 'px';\n }\n trackContainer.classList.add(trackClassName);\n this.sliderTrack.appendChild(trackContainer);\n }\n }\n }\n };\n /**\n * Gets the component name\n * @private\n */\n Slider.prototype.getModuleName = function () {\n return 'slider';\n };\n __decorate([\n Property(null)\n ], Slider.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], Slider.prototype, \"customValues\", void 0);\n __decorate([\n Property(1)\n ], Slider.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], Slider.prototype, \"width\", void 0);\n __decorate([\n Property(0)\n ], Slider.prototype, \"min\", void 0);\n __decorate([\n Property(100)\n ], Slider.prototype, \"max\", void 0);\n __decorate([\n Property(false)\n ], Slider.prototype, \"readonly\", void 0);\n __decorate([\n Property('Default')\n ], Slider.prototype, \"type\", void 0);\n __decorate([\n Collection([{}], ColorRangeData)\n ], Slider.prototype, \"colorRange\", void 0);\n __decorate([\n Complex({}, TicksData)\n ], Slider.prototype, \"ticks\", void 0);\n __decorate([\n Complex({}, LimitData)\n ], Slider.prototype, \"limits\", void 0);\n __decorate([\n Property(true)\n ], Slider.prototype, \"enabled\", void 0);\n __decorate([\n Complex({}, TooltipData)\n ], Slider.prototype, \"tooltip\", void 0);\n __decorate([\n Property(false)\n ], Slider.prototype, \"showButtons\", void 0);\n __decorate([\n Property(true)\n ], Slider.prototype, \"enableAnimation\", void 0);\n __decorate([\n Property('Horizontal')\n ], Slider.prototype, \"orientation\", void 0);\n __decorate([\n Property('')\n ], Slider.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], Slider.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"changed\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"renderingTicks\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"renderedTicks\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"tooltipChange\", void 0);\n Slider = __decorate([\n NotifyPropertyChanges\n ], Slider);\n return Slider;\n}(Component));\nexport { Slider };\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 prefer-spread */\nimport { Component, Event, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';\nimport { Browser, closest, detach, EventHandler, getInstance, select, selectAll, formatUnit } from '@syncfusion/ej2-base';\nimport { addClass, attributes, classList, isNullOrUndefined, L10n } from '@syncfusion/ej2-base';\nimport { remove, removeClass, rippleEffect } from '@syncfusion/ej2-base';\nimport { SplitButton, getModel } from '@syncfusion/ej2-splitbuttons';\nimport { Deferred } from '@syncfusion/ej2-splitbuttons';\nimport { Tooltip, getZindexPartial, Popup } from '@syncfusion/ej2-popups';\nimport { Input } from './../input/index';\nimport { NumericTextBox } from './../numerictextbox/index';\nimport { Slider } from './../slider/slider';\nvar APPLY = 'e-apply';\nvar CANCEL = 'e-cancel';\nvar CURRENT = 'e-current';\nvar CONTAINER = 'e-container';\nvar CTRLBTN = 'e-ctrl-btn';\nvar CTRLSWITCH = 'e-switch-ctrl-btn';\nvar DISABLED = 'e-disabled';\nvar FORMATSWITCH = 'e-value-switch-btn';\nvar HANDLER = 'e-handler';\nvar HEX = 'e-hex';\nvar HIDEHEX = 'e-hide-hex-value';\nvar HIDEOPACITY = 'e-hide-opacity';\nvar HIDERGBA = 'e-hide-switchable-value';\nvar HIDEVALUE = 'e-hide-value';\nvar HIDEVALUESWITCH = 'e-hide-valueswitcher';\nvar HSVAREA = 'e-hsv-color';\nvar HSVCONTAINER = 'e-hsv-container';\nvar INPUTWRAPPER = 'e-selected-value';\nvar MODESWITCH = 'e-mode-switch-btn';\nvar NOCOLOR = 'e-nocolor-item';\nvar OPACITY = 'e-opacity-value';\nvar PALETTES = 'e-palette';\nvar PALETTECONTENT = 'e-color-palette';\nvar PICKERCONTENT = 'e-color-picker';\nvar PREVIEW = 'e-preview-container';\nvar PREVIOUS = 'e-previous';\nvar RTL = 'e-rtl';\nvar SHOWVALUE = 'e-show-value';\nvar SELECT = 'e-selected';\nvar SPLITPREVIEW = 'e-split-preview';\nvar TILE = 'e-tile';\nvar presets = {\n default: ['#000000', '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#ffeb3b',\n '#ffffff', '#ffebee', '#fce4ec', '#f3e5f5', '#ede7f6', '#e3f2fd', '#e1f5fe', '#e0f7fa', '#e0f2f1', '#fffde7',\n '#f2f2f2', '#ffcdd2', '#f8bbd0', '#e1bee7', '#d1c4e9', '#bbdefb', '#b3e5fc', '#b2ebf2', '#b2dfdb', '#fff9c4',\n '#e6e6e6', '#ef9a9a', '#f48fb1', '#ce93d8', '#b39ddb', '#90caf9', '#81d4fa', '#80deea', '#80cbc4', '#fff59d',\n '#cccccc', '#e57373', '#f06292', '#ba68c8', '#9575cd', '#64b5f6', '#4fc3f7', '#4dd0e1', '#4db6ac', '#fff176',\n '#b3b3b3', '#ef5350', '#ec407a', '#ab47bc', '#7e57c2', '#42a5f5', '#29b6f6', '#26c6da', '#26a69a', '#ffee58',\n '#999999', '#e53935', '#d81b60', '#8e24aa', '#5e35b1', '#1e88e5', '#039be5', '#00acc1', '#00897b', '#fdd835',\n '#808080', '#d32f2f', '#c2185b', '#7b1fa2', '#512da8', '#1976d2', '#0288d1', '#0097a7', '#00796b', '#fbc02d',\n '#666666', '#c62828', '#ad1457', '#6a1b9a', '#4527a0', '#1565c0', '#0277bd', '#00838f', '#00695c', '#f9a825',\n '#4d4d4d', '#b71c1c', '#880e4f', '#4a148c', '#311b92', '#0d47a1', '#01579b', '#006064', '#004d40', '#f57f17']\n};\n/**\n * ColorPicker component is a user interface to select and adjust color values. It provides supports for various\n * color specification like Red Green Blue, Hue Saturation Value and Hex codes.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar ColorPicker = /** @class */ (function (_super) {\n __extends(ColorPicker, _super);\n function ColorPicker(options, element) {\n return _super.call(this, options, element) || this;\n }\n ColorPicker.prototype.preRender = function () {\n var ele = this.element;\n this.formElement = closest(this.element, 'form');\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n var localeText = { Apply: 'Apply', Cancel: 'Cancel', ModeSwitcher: 'Switch Mode' };\n this.l10n = new L10n('colorpicker', localeText, this.locale);\n if (ele.getAttribute('ejs-for') && !ele.getAttribute('name')) {\n ele.setAttribute('name', ele.id);\n }\n };\n /**\n * To Initialize the component rendering\n *\n * @private\n * @returns {void}\n */\n ColorPicker.prototype.render = function () {\n this.initWrapper();\n if (this.inline) {\n this.createWidget();\n }\n else {\n this.createSplitBtn();\n }\n if (!this.enableOpacity) {\n addClass([this.container.parentElement], HIDEOPACITY);\n }\n this.renderComplete();\n };\n ColorPicker.prototype.initWrapper = function () {\n var wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });\n this.element.parentNode.insertBefore(wrapper, this.element);\n wrapper.appendChild(this.element);\n attributes(this.element, { 'tabindex': '-1', 'spellcheck': 'false', 'aria-label': 'colorpicker' });\n this.container = this.createElement('div', { className: CONTAINER });\n this.getWrapper().appendChild(this.container);\n var value = this.value ? this.roundValue(this.value).toLowerCase() : '#008000ff';\n if (this.noColor && this.mode === 'Palette' && this.value === '') {\n value = '';\n }\n var slicedValue = value.slice(0, 7);\n if (isNullOrUndefined(this.initialInputValue)) {\n this.initialInputValue = slicedValue;\n }\n this.element.value = slicedValue;\n if (this.enableOpacity) {\n this.setProperties({ 'value': value }, true);\n }\n else {\n this.setProperties({ 'value': slicedValue }, true);\n }\n if (this.enableRtl) {\n wrapper.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.split(' '));\n }\n this.tileRipple = rippleEffect(this.container, { selector: '.' + TILE });\n this.ctrlBtnRipple = rippleEffect(this.container, { selector: '.e-btn' });\n };\n ColorPicker.prototype.getWrapper = function () {\n return this.element.parentElement;\n };\n ColorPicker.prototype.createWidget = function () {\n if (this.mode === 'Palette') {\n this.createPalette();\n if (!this.inline) {\n this.firstPaletteFocus();\n }\n }\n else {\n this.createPicker();\n if (!this.inline) {\n this.getDragHandler().focus();\n }\n }\n this.isRgb = true;\n this.createInput();\n this.createCtrlBtn();\n if (!this.disabled) {\n this.wireEvents();\n }\n if (this.inline && this.disabled) {\n this.toggleDisabled(true);\n }\n if (Browser.isDevice) {\n this.refreshPopupPos();\n }\n };\n ColorPicker.prototype.createSplitBtn = function () {\n var _this = this;\n var splitButton = this.createElement('button', { className: 'e-split-colorpicker' });\n this.getWrapper().appendChild(splitButton);\n this.splitBtn = new SplitButton({\n iconCss: 'e-selected-color',\n target: this.container,\n disabled: this.disabled,\n enableRtl: this.enableRtl,\n createPopupOnClick: this.createPopupOnClick,\n open: this.onOpen.bind(this),\n click: function () {\n _this.trigger('change', {\n currentValue: { hex: _this.value.slice(0, 7), rgba: _this.convertToRgbString(_this.hexToRgb(_this.value)) },\n previousValue: { hex: null, rgba: null }, value: _this.value\n });\n }\n });\n this.splitBtn.createElement = this.createElement;\n this.splitBtn.appendTo(splitButton);\n var preview = this.createElement('span', { className: SPLITPREVIEW });\n select('.e-selected-color', splitButton).appendChild(preview);\n preview.style.backgroundColor = this.convertToRgbString(this.hexToRgb(this.value));\n var popupEle = this.getPopupEle();\n addClass([popupEle], 'e-colorpicker-popup');\n if (this.cssClass) {\n addClass([popupEle], this.cssClass.split(' '));\n }\n if (Browser.isDevice) {\n var popupInst = this.getPopupInst();\n popupInst.relateTo = document.body;\n popupInst.position = { X: 'center', Y: 'center' };\n popupInst.targetType = 'container';\n popupInst.collision = { X: 'fit', Y: 'fit' };\n popupInst.offsetY = 4;\n popupEle.style.zIndex = getZindexPartial(this.splitBtn.element).toString();\n }\n this.bindCallBackEvent();\n };\n ColorPicker.prototype.onOpen = function () {\n this.trigger('open', { element: this.container });\n };\n ColorPicker.prototype.getPopupInst = function () {\n return getInstance(this.getPopupEle(), Popup);\n };\n ColorPicker.prototype.bindCallBackEvent = function () {\n var _this = this;\n this.splitBtn.beforeOpen = function (args) {\n var callBackPromise = new Deferred();\n _this.trigger('beforeOpen', args, function (observeOpenArgs) {\n if (!observeOpenArgs.cancel) {\n var popupEle = _this.getPopupEle();\n popupEle.style.top = formatUnit(0 + pageYOffset);\n popupEle.style.left = formatUnit(0 + pageXOffset);\n popupEle.style.display = 'block';\n _this.createWidget();\n popupEle.style.display = '';\n if (Browser.isDevice) {\n _this.modal = _this.createElement('div');\n _this.modal.className = 'e-' + _this.getModuleName() + ' e-modal';\n _this.modal.style.display = 'none';\n document.body.insertBefore(_this.modal, popupEle);\n document.body.className += ' e-colorpicker-overflow';\n _this.modal.style.display = 'block';\n _this.modal.style.zIndex = (Number(popupEle.style.zIndex) - 1).toString();\n }\n }\n args.cancel = observeOpenArgs.cancel;\n callBackPromise.resolve(observeOpenArgs);\n });\n return callBackPromise;\n };\n this.splitBtn.beforeClose = function (args) {\n var callBackPromise = new Deferred();\n if (!isNullOrUndefined(args.event)) {\n var beforeCloseArgs = { element: _this.container, event: args.event, cancel: false };\n _this.trigger('beforeClose', beforeCloseArgs, function (observedCloseArgs) {\n if (Browser.isDevice && args.event.target === _this.modal) {\n observedCloseArgs.cancel = true;\n }\n if (!observedCloseArgs.cancel) {\n _this.onPopupClose();\n }\n args.cancel = observedCloseArgs.cancel;\n callBackPromise.resolve(observedCloseArgs);\n });\n }\n else {\n callBackPromise.resolve(args);\n }\n return callBackPromise;\n };\n };\n ColorPicker.prototype.onPopupClose = function () {\n this.unWireEvents();\n this.destroyOtherComp();\n this.container.style.width = '';\n select('.' + SPLITPREVIEW, this.splitBtn.element).style.backgroundColor\n = this.convertToRgbString(this.hexToRgb(this.value));\n this.container.innerHTML = '';\n removeClass([this.container], [PICKERCONTENT, PALETTECONTENT]);\n if (Browser.isDevice && this.modal) {\n removeClass([document.body], 'e-colorpicker-overflow');\n this.modal.style.display = 'none';\n this.modal.outerHTML = '';\n this.modal = null;\n }\n };\n ColorPicker.prototype.createPalette = function () {\n classList(this.container, [PALETTECONTENT], [PICKERCONTENT]);\n if (this.presetColors) {\n var paletteGroup = this.createElement('div', { className: 'e-custom-palette' });\n this.appendElement(paletteGroup);\n var keys = Object.keys(this.presetColors);\n if (keys.length === 1) {\n this.appendPalette(this.presetColors[keys[0]], keys[0], paletteGroup);\n }\n else {\n for (var i = 0, len = keys.length; i < len; i++) {\n this.appendPalette(this.presetColors[keys[i]], keys[i], paletteGroup);\n }\n }\n if (selectAll('.e-row', paletteGroup).length > 10) {\n addClass([paletteGroup], 'e-palette-group');\n }\n }\n else {\n this.appendPalette(presets.default, 'default');\n }\n if (this.mode === 'Palette' && !this.modeSwitcher && this.noColor) {\n this.setNoColor();\n }\n var width = parseInt(getComputedStyle(this.container).borderBottomWidth, 10);\n this.container.style.width = formatUnit(this.container.children[0].offsetWidth + width + width);\n this.rgb = this.hexToRgb(this.roundValue(this.value));\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n };\n ColorPicker.prototype.firstPaletteFocus = function () {\n if (!select('.' + SELECT, this.container.children[0])) {\n selectAll('.' + PALETTES, this.container)[0].focus();\n }\n };\n ColorPicker.prototype.appendPalette = function (colors, key, refEle) {\n var palette = this.createElement('div', { className: PALETTES, attrs: { 'tabindex': '0', 'role': 'grid' } });\n if (refEle) {\n refEle.appendChild(palette);\n }\n else {\n this.appendElement(palette);\n }\n var row;\n var tile;\n var roundedColor;\n for (var i = 0, len = colors.length; i < len; i++) {\n if (i === 0 || i % this.columns === 0) {\n row = this.createElement('div', {\n className: 'e-row', attrs: { 'role': 'row' }\n });\n palette.appendChild(row);\n }\n roundedColor = this.roundValue(colors[i]).toLowerCase();\n tile = this.createElement('span', {\n className: TILE, attrs: { 'role': 'gridcell', 'aria-label': roundedColor, 'aria-selected': 'false', 'tabindex': '0' }\n });\n this.trigger('beforeTileRender', { element: tile, presetName: key, value: colors[i] });\n row.appendChild(tile);\n if (this.value === roundedColor) {\n this.addTileSelection(tile);\n palette.focus();\n }\n tile.style.backgroundColor = this.convertToRgbString(this.hexToRgb(roundedColor));\n }\n };\n ColorPicker.prototype.setNoColor = function () {\n var noColorEle = this.container.querySelector('.e-row').children[0];\n noColorEle.classList.add(NOCOLOR);\n if (!this.value) {\n noColorEle.classList.add(SELECT);\n closest(noColorEle, '.' + PALETTES).focus();\n }\n ['aria-selected', 'aria-label'].forEach(function (attr) { noColorEle.removeAttribute(attr); });\n noColorEle.style.backgroundColor = '';\n };\n ColorPicker.prototype.appendElement = function (ele, insertPos) {\n if (insertPos === void 0) { insertPos = 0; }\n var refEle = this.container.children[insertPos];\n if (refEle) {\n this.container.insertBefore(ele, refEle);\n }\n else {\n this.container.appendChild(ele);\n }\n };\n ColorPicker.prototype.addTileSelection = function (ele) {\n ele.classList.add(SELECT);\n ele.setAttribute('aria-selected', 'true');\n };\n ColorPicker.prototype.createPicker = function () {\n classList(this.container, [PICKERCONTENT], [PALETTECONTENT]);\n var hsvContainer = this.createElement('div', { className: HSVCONTAINER });\n this.appendElement(hsvContainer);\n hsvContainer.appendChild(this.createElement('div', { className: HSVAREA }));\n var dragHandler = this.createElement('span', { className: HANDLER, attrs: { 'tabindex': '0' } });\n hsvContainer.appendChild(dragHandler);\n if (this.value === null) {\n this.value = '#008000ff';\n }\n this.rgb = this.hexToRgb(this.value);\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n this.setHsvContainerBg();\n this.setHandlerPosition();\n this.createSlider();\n this.createDragTooltip();\n };\n ColorPicker.prototype.setHsvContainerBg = function (h) {\n if (h === void 0) { h = this.hsv[0]; }\n this.getHsvContainer().style.backgroundColor = this.convertToRgbString(this.hsvToRgb(h, 100, 100, 1));\n };\n ColorPicker.prototype.getHsvContainer = function () {\n return select('.' + HSVCONTAINER, this.container);\n };\n ColorPicker.prototype.setHandlerPosition = function () {\n var dragHandler = this.getDragHandler();\n var hsvArea = select('.' + HSVAREA, this.container);\n if (this.enableRtl) {\n dragHandler.style.left = formatUnit(hsvArea.offsetWidth * Math.abs(100 - this.hsv[1]) / 100);\n }\n else {\n dragHandler.style.left = formatUnit(hsvArea.offsetWidth * this.hsv[1] / 100);\n }\n dragHandler.style.top = formatUnit(hsvArea.offsetHeight * (100 - this.hsv[2]) / 100);\n };\n ColorPicker.prototype.createSlider = function () {\n var sliderPreviewWrapper = this.createElement('div', { className: 'e-slider-preview' });\n this.appendElement(sliderPreviewWrapper, 1);\n this.createPreview(sliderPreviewWrapper);\n var sliderWrapper = this.createElement('div', { className: 'e-colorpicker-slider' });\n sliderPreviewWrapper.insertBefore(sliderWrapper, sliderPreviewWrapper.children[0]);\n var slider = this.createElement('div', { className: 'e-hue-slider' });\n sliderWrapper.appendChild(slider);\n this.hueSlider = new Slider({\n value: this.hsv[0],\n min: 0,\n max: 359,\n enableRtl: this.enableRtl,\n enabled: !this.disabled,\n change: this.hueChange.bind(this)\n });\n this.hueSlider.createElement = this.createElement;\n this.hueSlider.appendTo(slider);\n if (this.enableOpacity) {\n slider = this.createElement('div', { className: 'e-opacity-slider' });\n sliderWrapper.appendChild(slider);\n this.createOpacitySlider(slider);\n }\n };\n ColorPicker.prototype.createOpacitySlider = function (slider) {\n this.opacitySlider = new Slider({\n value: this.rgb[3] * 100,\n min: 0,\n max: 100,\n enableRtl: this.enableRtl,\n enabled: !this.disabled,\n change: this.opacityChange.bind(this)\n });\n this.opacitySlider.createElement = this.createElement;\n this.opacitySlider.appendTo(slider);\n var opacityBgTrack = this.createElement('div', { className: 'e-opacity-empty-track' });\n slider.appendChild(opacityBgTrack);\n this.updateOpacitySliderBg();\n };\n ColorPicker.prototype.updateOpacitySliderBg = function () {\n var direction = this.enableRtl ? 'to left' : 'to right';\n var opacityEle = select('.e-opacity-empty-track', this.opacitySlider.element);\n if (opacityEle) {\n opacityEle.style.background =\n 'linear-gradient(' + direction + ', rgba(' + this.rgb.slice(0, 3) + ', 0) 0%, ' +\n this.convertToRgbString(this.rgb.slice(0, 3)) + ' 100%)';\n }\n };\n ColorPicker.prototype.hueChange = function (args) {\n this.hsv[0] = args.value;\n this.setHsvContainerBg();\n this.convertToOtherFormat();\n };\n ColorPicker.prototype.opacityChange = function (args) {\n var value = args.value;\n var pValue = this.rgbToHex(this.rgb);\n this.hsv[3] = value / 100;\n this.rgb[3] = value / 100;\n var cValue = this.rgbToHex(this.rgb);\n this.updateOpacityInput(value);\n var rgb = this.convertToRgbString(this.rgb);\n this.updatePreview(rgb);\n this.triggerEvent(cValue, pValue, rgb);\n };\n ColorPicker.prototype.updateOpacityInput = function (value) {\n if (this.enableOpacity && !this.getWrapper().classList.contains(HIDEVALUE)) {\n var opacityTextBoxInst = getInstance(select('.' + OPACITY, this.container), NumericTextBox);\n opacityTextBoxInst.value = value;\n opacityTextBoxInst.dataBind();\n }\n };\n ColorPicker.prototype.createPreview = function (parentEle) {\n var previewContainer = this.createElement('div', { className: PREVIEW });\n parentEle.appendChild(previewContainer);\n var preview = this.createElement('span', { className: 'e-preview ' + CURRENT });\n previewContainer.appendChild(preview);\n var colorValue = this.convertToRgbString(this.rgb);\n preview.style.backgroundColor = colorValue;\n preview = this.createElement('span', { className: 'e-preview ' + PREVIOUS });\n previewContainer.appendChild(preview);\n preview.style.backgroundColor = colorValue;\n };\n ColorPicker.prototype.isPicker = function () {\n return !this.container.classList.contains(PALETTECONTENT);\n };\n ColorPicker.prototype.getPopupEle = function () {\n return this.container.parentElement;\n };\n ColorPicker.prototype.createNumericInput = function (element, value, label, max) {\n var _this = this;\n var numericInput = new NumericTextBox({\n value: value,\n placeholder: label,\n min: 0,\n max: max,\n format: '###.##',\n showSpinButton: false,\n floatLabelType: 'Always',\n enableRtl: this.enableRtl,\n enabled: !this.disabled,\n readonly: this.isPicker() ? false : true,\n change: function (args) {\n if (args.event) {\n _this.inputHandler(args.event);\n }\n }\n });\n numericInput.createElement = this.createElement;\n numericInput.appendTo(element);\n };\n ColorPicker.prototype.createInput = function () {\n var isPicker = this.isPicker();\n var wrapper = this.getWrapper();\n if ((isPicker && !wrapper.classList.contains(HIDEVALUE)) || (!isPicker && wrapper.classList.contains(SHOWVALUE))) {\n var inputWrap = this.createElement('div', { className: INPUTWRAPPER });\n if (isPicker) {\n this.appendElement(inputWrap, 2);\n }\n else {\n this.appendElement(inputWrap, 1);\n }\n var container = this.createElement('div', { className: 'e-input-container' });\n inputWrap.appendChild(container);\n if (!wrapper.classList.contains(HIDEVALUESWITCH)) {\n this.appendValueSwitchBtn(inputWrap);\n }\n if (!wrapper.classList.contains(HIDEHEX)) {\n var hexInput = this.createElement('input', {\n className: HEX,\n attrs: { 'maxlength': '7', 'spellcheck': 'false', 'aria-label': 'HEX' }\n });\n container.appendChild(hexInput);\n Input.createInput({\n element: hexInput,\n floatLabelType: 'Always',\n properties: {\n placeholder: 'HEX',\n enableRtl: this.enableRtl,\n enabled: !this.disabled,\n readonly: this.isPicker() ? false : true\n }\n }, this.createElement);\n Input.setValue(this.value.slice(0, 7), hexInput);\n hexInput.addEventListener('input', this.inputHandler.bind(this));\n }\n if (!wrapper.classList.contains(HIDERGBA)) {\n var label = void 0;\n var value = void 0;\n if (this.isRgb) {\n label = 'RGB';\n value = this.rgb;\n }\n else {\n label = 'HSV';\n value = this.hsv;\n }\n var clsName = ['rh', 'gs', 'bv'];\n for (var i = 0; i < 3; i++) {\n this.createNumericInput(container.appendChild(this.createElement('input', { className: 'e-' + clsName[i] + '-value' })), value[i], label[i], 255);\n }\n if (this.enableOpacity) {\n this.appendOpacityValue(container);\n }\n }\n }\n };\n ColorPicker.prototype.appendOpacityValue = function (container) {\n this.createNumericInput(container.appendChild(this.createElement('input', { className: OPACITY })), this.rgb[3] * 100, 'A', 100);\n };\n ColorPicker.prototype.appendValueSwitchBtn = function (targetEle) {\n var valueSwitchBtn = this.createElement('button', {\n className: 'e-icons e-css e-btn e-flat e-icon-btn ' + FORMATSWITCH,\n attrs: { 'title': 'Toggle format' }\n });\n targetEle.appendChild(valueSwitchBtn);\n if (this.isPicker() && !this.getWrapper().classList.contains(HIDERGBA)) {\n valueSwitchBtn.addEventListener('click', this.formatSwitchHandler.bind(this));\n }\n };\n ColorPicker.prototype.createCtrlBtn = function () {\n if (this.modeSwitcher || this.showButtons) {\n this.l10n.setLocale(this.locale);\n var btnWrapper = this.createElement('div', { className: CTRLSWITCH });\n this.container.appendChild(btnWrapper);\n if (this.showButtons) {\n var controlBtnWrapper = this.createElement('div', { className: CTRLBTN });\n btnWrapper.appendChild(controlBtnWrapper);\n var apply = this.l10n.getConstant('Apply');\n controlBtnWrapper.appendChild(this.createElement('button', {\n innerHTML: apply,\n className: 'e-btn e-css e-flat e-primary e-small ' + APPLY,\n attrs: { 'title': apply }\n }));\n var cancel = this.l10n.getConstant('Cancel');\n controlBtnWrapper.appendChild(this.createElement('button', {\n innerHTML: cancel,\n className: 'e-btn e-css e-flat e-small ' + CANCEL,\n attrs: { 'title': cancel }\n }));\n }\n if (this.modeSwitcher) {\n this.appendModeSwitchBtn();\n }\n }\n };\n ColorPicker.prototype.appendModeSwitchBtn = function () {\n var modeSwitcher = this.createElement('button', {\n className: 'e-icons e-btn e-flat e-icon-btn ' + MODESWITCH, attrs: { title: this.l10n.getConstant('ModeSwitcher') }\n });\n select('.' + CTRLSWITCH, this.container).insertBefore(modeSwitcher, select('.' + CTRLBTN, this.container));\n };\n ColorPicker.prototype.createDragTooltip = function () {\n var _this = this;\n var tooltip = new Tooltip({\n opensOn: 'Custom',\n showTipPointer: false,\n cssClass: 'e-color-picker-tooltip',\n beforeOpen: function (args) {\n _this.tooltipEle = args.element;\n },\n animation: { open: { effect: 'None' }, close: { effect: 'None' } }\n });\n tooltip.createElement = this.createElement;\n tooltip.appendTo(this.container);\n // eslint-disable-next-line\n tooltip.open(this.container);\n this.tooltipEle.style.zIndex = getZindexPartial(this.tooltipEle).toString();\n select('.e-tip-content', this.tooltipEle).appendChild(this.createElement('div', { className: 'e-tip-transparent' }));\n };\n ColorPicker.prototype.getTooltipInst = function () {\n return getInstance(this.container, Tooltip);\n };\n ColorPicker.prototype.setTooltipOffset = function (value) {\n this.getTooltipInst().offsetY = value;\n };\n ColorPicker.prototype.toggleDisabled = function (enable) {\n if (enable) {\n this.getWrapper().classList.add(DISABLED);\n }\n else {\n this.getWrapper().classList.remove(DISABLED);\n }\n if (this.showButtons) {\n ([].slice.call(selectAll('.e-btn', this.container))).forEach(function (ele) {\n if (enable) {\n attributes(ele, { 'disabled': '' });\n }\n else {\n ele.removeAttribute('disabled');\n }\n });\n }\n };\n ColorPicker.prototype.convertToRgbString = function (rgb) {\n return rgb.length ? rgb.length === 4 ? 'rgba(' + rgb.join() + ')' : 'rgb(' + rgb.join() + ')' : '';\n };\n ColorPicker.prototype.convertToHsvString = function (hsv) {\n return hsv.length === 4 ? 'hsva(' + hsv.join() + ')' : 'hsv(' + hsv.join() + ')';\n };\n ColorPicker.prototype.updateHsv = function () {\n this.hsv[1] = this.hsv[1] > 100 ? 100 : this.hsv[1];\n this.hsv[2] = this.hsv[2] > 100 ? 100 : this.hsv[2];\n this.setHandlerPosition();\n };\n ColorPicker.prototype.convertToOtherFormat = function (isKey) {\n if (isKey === void 0) { isKey = false; }\n var pValue = this.rgbToHex(this.rgb);\n this.rgb = this.hsvToRgb.apply(this, this.hsv);\n var cValue = this.rgbToHex(this.rgb);\n var rgba = this.convertToRgbString(this.rgb);\n this.updatePreview(rgba);\n this.updateInput(cValue);\n this.triggerEvent(cValue, pValue, rgba, isKey);\n };\n ColorPicker.prototype.updateInput = function (value) {\n var wrapper = this.getWrapper();\n if (!wrapper.classList.contains(HIDEVALUE)) {\n if (!wrapper.classList.contains(HIDEHEX)) {\n Input.setValue(value.substr(0, 7), select('.' + HEX, this.container));\n }\n if (!wrapper.classList.contains(HIDERGBA)) {\n if (this.isRgb) {\n this.updateValue(this.rgb, false);\n }\n else {\n this.updateValue(this.hsv, false);\n }\n }\n }\n };\n ColorPicker.prototype.updatePreview = function (value) {\n if (this.enableOpacity) {\n this.updateOpacitySliderBg();\n }\n select('.e-tip-transparent', this.tooltipEle).style.backgroundColor = value;\n select('.' + PREVIEW + ' .' + CURRENT, this.container).style.backgroundColor = value;\n select('.' + PREVIEW + ' .' + PREVIOUS, this.container).style.backgroundColor\n = this.convertToRgbString(this.hexToRgb(this.value));\n };\n ColorPicker.prototype.getDragHandler = function () {\n return select('.' + HANDLER, this.container);\n };\n ColorPicker.prototype.removeTileSelection = function () {\n var selectedEle = [].slice.call(selectAll('.' + SELECT, this.container.children[0]));\n selectedEle.forEach(function (ele) {\n ele.classList.remove(SELECT);\n ele.setAttribute('aria-selected', 'false');\n });\n };\n ColorPicker.prototype.convertRgbToNumberArray = function (value) {\n return (value.slice(value.indexOf('(') + 1, value.indexOf(')'))).split(',').map(function (n, i) {\n return (i !== 3) ? parseInt(n, 10) : parseFloat(n);\n });\n };\n /**\n * To get color value in specified type.\n *\n * @param {string} value - Specify the color value.\n * @param {string} type - Specify the type to which the specified color needs to be converted.\n * @method getValue\n * @returns {string} - Color value\n */\n ColorPicker.prototype.getValue = function (value, type) {\n if (!value) {\n value = this.value;\n }\n type = !type ? 'hex' : type.toLowerCase();\n if (value[0] === 'r') {\n var cValue = this.convertRgbToNumberArray(value);\n if (type === 'hex' || type === 'hexa') {\n var hex = this.rgbToHex(cValue);\n return type === 'hex' ? hex.slice(0, 7) : hex;\n }\n else {\n if (type === 'hsv') {\n return this.convertToHsvString(this.rgbToHsv.apply(this, cValue.slice(0, 3)));\n }\n else {\n if (type === 'hsva') {\n return this.convertToHsvString(this.rgbToHsv.apply(this, cValue));\n }\n else {\n return 'null';\n }\n }\n }\n }\n else {\n if (value[0] === 'h') {\n var cValue = this.hsvToRgb.apply(this, this.convertRgbToNumberArray(value));\n if (type === 'rgba') {\n return this.convertToRgbString(cValue);\n }\n else {\n if (type === 'hex' || type === 'hexa') {\n var hex = this.rgbToHex(cValue);\n return type === 'hex' ? hex.slice(0, 7) : hex;\n }\n else {\n if (type === 'rgb') {\n return this.convertToRgbString(cValue.slice(0, 3));\n }\n else {\n return 'null';\n }\n }\n }\n }\n else {\n value = this.roundValue(value);\n var rgb = this.hexToRgb(value);\n if (type === 'rgb' || type === 'hsv') {\n rgb = rgb.slice(0, 3);\n }\n if (type === 'rgba' || type === 'rgb') {\n return this.convertToRgbString(rgb);\n }\n else {\n if (type === 'hsva' || type === 'hsv') {\n return this.convertToHsvString(this.rgbToHsv.apply(this, rgb));\n }\n else {\n if (type === 'hex') {\n return value.slice(0, 7);\n }\n else {\n if (type === 'a') {\n return rgb[3].toString();\n }\n else {\n return 'null';\n }\n }\n }\n }\n }\n }\n };\n /**\n * To show/hide ColorPicker popup based on current state of the SplitButton.\n *\n * @method toggle\n * @returns {void}\n */\n ColorPicker.prototype.toggle = function () {\n if (this.container.parentElement.classList.contains('e-popup-close')) {\n this.splitBtn.toggle();\n }\n else {\n this.closePopup(null);\n }\n };\n /**\n * Get component name.\n *\n * @returns {string} - Module Name\n * @private\n */\n ColorPicker.prototype.getModuleName = function () {\n return 'colorpicker';\n };\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n * @returns {string} - Persist data\n */\n ColorPicker.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n ColorPicker.prototype.wireEvents = function () {\n if (this.isPicker()) {\n var dragHandler = this.getDragHandler();\n EventHandler.add(dragHandler, 'keydown', this.pickerKeyDown, this);\n EventHandler.add(this.getHsvContainer(), 'mousedown touchstart', this.handlerDown, this);\n if (this.modeSwitcher || this.showButtons) {\n this.addCtrlSwitchEvent();\n }\n EventHandler.add(select('.' + PREVIOUS, this.container), 'click', this.previewHandler, this);\n }\n else {\n EventHandler.add(this.container, 'click', this.paletteClickHandler, this);\n EventHandler.add(this.container, 'keydown', this.paletteKeyDown, this);\n }\n };\n ColorPicker.prototype.formResetHandler = function () {\n this.value = this.initialInputValue;\n attributes(this.element, { 'value': this.initialInputValue });\n };\n ColorPicker.prototype.addCtrlSwitchEvent = function () {\n var ctrlSwitchBtn = select('.' + CTRLSWITCH, this.container);\n if (ctrlSwitchBtn) {\n EventHandler.add(ctrlSwitchBtn, 'click', this.btnClickHandler, this);\n }\n };\n ColorPicker.prototype.pickerKeyDown = function (e) {\n switch (e.keyCode) {\n case 39:\n this.handlerDragPosition(1, this.enableRtl ? -1 : 1, e);\n break;\n case 37:\n this.handlerDragPosition(1, this.enableRtl ? 1 : -1, e);\n break;\n case 38:\n this.handlerDragPosition(2, 1, e);\n break;\n case 40:\n this.handlerDragPosition(2, -1, e);\n break;\n case 13: {\n e.preventDefault();\n var cValue = this.rgbToHex(this.rgb);\n this.enterKeyHandler(cValue, e);\n }\n }\n };\n ColorPicker.prototype.enterKeyHandler = function (value, e) {\n this.triggerChangeEvent(value);\n if (!this.inline) {\n this.closePopup(e);\n this.splitBtn.element.focus();\n }\n };\n ColorPicker.prototype.closePopup = function (e) {\n var _this = this;\n var beforeCloseArgs = { element: this.container, event: e, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs, function (observedcloseArgs) {\n if (!observedcloseArgs.cancel) {\n _this.splitBtn.toggle();\n _this.onPopupClose();\n }\n });\n };\n ColorPicker.prototype.triggerChangeEvent = function (value) {\n var hex = value.slice(0, 7);\n this.trigger('change', {\n currentValue: { hex: hex, rgba: this.convertToRgbString(this.rgb) },\n previousValue: { hex: this.value.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(this.value)) },\n value: this.enableOpacity ? value : hex\n });\n if (this.enableOpacity) {\n this.setProperties({ 'value': value }, true);\n }\n else {\n this.setProperties({ 'value': hex }, true);\n }\n this.element.value = hex ? hex : '#000000';\n };\n ColorPicker.prototype.handlerDragPosition = function (prob, value, e) {\n e.preventDefault();\n this.hsv[prob] += value * (e.ctrlKey ? 1 : 3);\n if (this.hsv[prob] < 0) {\n this.hsv[prob] = 0;\n }\n this.updateHsv();\n this.convertToOtherFormat(true);\n };\n ColorPicker.prototype.handlerDown = function (e) {\n e.preventDefault();\n if (e.type === 'mousedown') {\n this.clientX = Math.abs(e.pageX - pageXOffset);\n this.clientY = Math.abs(e.pageY - pageYOffset);\n this.setTooltipOffset(8);\n }\n else {\n this.clientX = Math.abs(e.changedTouches[0].pageX - pageXOffset);\n this.clientY = Math.abs(e.changedTouches[0].pageY - pageYOffset);\n this.setTooltipOffset(-8);\n }\n this.setHsv(this.clientX, this.clientY);\n this.getDragHandler().style.transition = 'left .4s cubic-bezier(.25, .8, .25, 1), top .4s cubic-bezier(.25, .8, .25, 1)';\n this.updateHsv();\n this.convertToOtherFormat();\n this.getDragHandler().focus();\n EventHandler.add(document, 'mousemove touchmove', this.handlerMove, this);\n EventHandler.add(document, 'mouseup touchend', this.handlerEnd, this);\n };\n ColorPicker.prototype.handlerMove = function (e) {\n if (e.type !== 'touchmove') {\n e.preventDefault();\n }\n var x;\n var y;\n if (e.type === 'mousemove') {\n x = Math.abs(e.pageX - pageXOffset);\n y = Math.abs(e.pageY - pageYOffset);\n }\n else {\n x = Math.abs(e.changedTouches[0].pageX - pageXOffset);\n y = Math.abs(e.changedTouches[0].pageY - pageYOffset);\n }\n this.setHsv(x, y);\n var dragHandler = this.getDragHandler();\n this.updateHsv();\n this.convertToOtherFormat();\n this.getTooltipInst().refresh(dragHandler);\n if (!this.tooltipEle.style.transform) {\n if (Math.abs(this.clientX - x) > 8 || Math.abs(this.clientY - y) > 8) {\n select('.' + HSVAREA, this.container).style.cursor = 'pointer';\n dragHandler.style.transition = 'none';\n if (!this.inline) {\n this.tooltipEle.style.zIndex = (parseInt(this.getPopupEle().style.zIndex, 10) + 1).toString();\n }\n this.tooltipEle.style.transform = 'rotate(45deg)';\n dragHandler.classList.add('e-hide-handler');\n }\n }\n };\n ColorPicker.prototype.setHsv = function (clientX, clientY) {\n var ele = select('.' + HSVAREA, this.container);\n var position = ele.getBoundingClientRect();\n if (this.enableRtl) {\n clientX = clientX > position.right ? 0 : Math.abs(clientX - position.right);\n }\n else {\n clientX = clientX > position.left ? Math.abs(clientX - position.left) : 0;\n }\n clientY = clientY > position.top ? Math.abs(clientY - position.top) : 0;\n this.hsv[2] = Math.round(Number(100 * (ele.offsetHeight -\n Math.max(0, Math.min(ele.offsetHeight, (clientY - ele.offsetTop)))) / ele.offsetHeight) * 10) / 10;\n this.hsv[1] =\n Math.round(Number(100 * (Math.max(0, Math.min(ele.offsetWidth, (clientX - ele.offsetLeft)))) / ele.offsetWidth) * 10) / 10;\n };\n ColorPicker.prototype.handlerEnd = function (e) {\n if (e.type !== 'touchend') {\n e.preventDefault();\n }\n EventHandler.remove(document, 'mousemove touchmove', this.handlerMove);\n EventHandler.remove(document, 'mouseup touchend', this.handlerEnd);\n var dragHandler = this.getDragHandler();\n select('.' + HSVAREA, this.container).style.cursor = '';\n if (this.tooltipEle.style.transform) {\n this.tooltipEle.style.transform = '';\n dragHandler.classList.remove('e-hide-handler');\n }\n if (!this.inline && !this.showButtons) {\n this.closePopup(e);\n }\n };\n ColorPicker.prototype.btnClickHandler = function (e) {\n var target = e.target;\n if (closest(target, '.' + MODESWITCH)) {\n e.stopPropagation();\n this.switchToPalette();\n }\n else {\n if (target.classList.contains(APPLY) || target.classList.contains(CANCEL)) {\n this.ctrlBtnClick(target, e);\n }\n }\n };\n ColorPicker.prototype.switchToPalette = function () {\n this.trigger('beforeModeSwitch', { element: this.container, mode: 'Palette' });\n this.unWireEvents();\n this.destroyOtherComp();\n detach(select('.e-slider-preview', this.container));\n if (!this.getWrapper().classList.contains(HIDEVALUE)) {\n remove(select('.' + INPUTWRAPPER, this.container));\n }\n detach(this.getHsvContainer());\n this.createPalette();\n this.firstPaletteFocus();\n this.createInput();\n this.refreshPopupPos();\n this.wireEvents();\n this.trigger('onModeSwitch', { element: this.container, mode: 'Palette' });\n };\n ColorPicker.prototype.refreshPopupPos = function () {\n if (!this.inline) {\n var popupEle = this.getPopupEle();\n popupEle.style.left = formatUnit(0 + pageXOffset);\n popupEle.style.top = formatUnit(0 + pageYOffset);\n this.getPopupInst().refreshPosition(this.splitBtn.element.parentElement);\n }\n };\n ColorPicker.prototype.formatSwitchHandler = function () {\n if (this.isRgb) {\n this.updateValue(this.hsv, true, 3, [360, 100, 100]);\n this.isRgb = false;\n }\n else {\n this.updateValue(this.rgb, true, 2);\n this.isRgb = true;\n }\n };\n ColorPicker.prototype.updateValue = function (value, format, idx, max) {\n var clsName = ['e-rh-value', 'e-gs-value', 'e-bv-value'];\n var inst;\n for (var i = 0, len = clsName.length; i < len; i++) {\n inst = getInstance(select('.' + clsName[i], this.container), NumericTextBox);\n inst.value = Math.round(value[i]);\n if (format) {\n inst.placeholder = clsName[i].substr(idx, 1).toUpperCase();\n inst.max = max ? max[i] : 255;\n }\n inst.dataBind();\n }\n };\n ColorPicker.prototype.previewHandler = function (e) {\n var target = e.target;\n var pValue = this.rgbToHex(this.rgb);\n this.rgb = this.convertRgbToNumberArray(target.style.backgroundColor);\n if (!this.rgb[3]) {\n this.rgb[3] = 1;\n }\n var cValue = this.rgbToHex(this.rgb);\n var hsv = this.rgbToHsv.apply(this, this.rgb);\n if (hsv[0] !== this.hsv[0]) {\n this.hueSlider.setProperties({ 'value': hsv[0] }, true);\n this.hueSlider.refresh();\n }\n this.setHsvContainerBg(hsv[0]);\n if (this.enableOpacity && hsv[3] !== this.hsv[3]) {\n this.opacitySlider.setProperties({ 'value': hsv[3] * 100 }, true);\n this.opacitySlider.refresh();\n this.updateOpacitySliderBg();\n }\n this.hsv = hsv;\n this.setHandlerPosition();\n this.updateInput(cValue);\n select('.' + PREVIEW + ' .' + CURRENT, this.container).style.backgroundColor = this.convertToRgbString(this.rgb);\n this.triggerEvent(cValue, pValue, this.convertToRgbString(this.rgb));\n };\n ColorPicker.prototype.paletteClickHandler = function (e) {\n e.preventDefault();\n var target = e.target;\n if (target.classList.contains(TILE)) {\n this.removeTileSelection();\n this.addTileSelection(target);\n if (target.classList.contains(NOCOLOR)) {\n this.noColorTile();\n }\n else {\n var cValue = target.getAttribute('aria-label');\n var pValue = this.rgbToHex(this.rgb);\n this.rgb = this.hexToRgb(this.roundValue(cValue));\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n if (this.getWrapper().classList.contains(SHOWVALUE)) {\n this.updateInput(cValue);\n }\n this.triggerEvent(cValue, pValue, this.convertToRgbString(this.rgb));\n }\n if (!this.inline && !this.showButtons) {\n this.closePopup(e);\n }\n }\n else {\n if (closest(target, '.' + MODESWITCH)) {\n this.switchToPicker();\n }\n else {\n if (target.classList.contains(APPLY) || target.classList.contains(CANCEL)) {\n this.ctrlBtnClick(target, e);\n }\n else {\n if (this.getWrapper().classList.contains(SHOWVALUE) && closest(target, '.' + FORMATSWITCH)) {\n this.formatSwitchHandler();\n }\n }\n }\n }\n };\n ColorPicker.prototype.noColorTile = function (isKey) {\n if (isKey === void 0) { isKey = false; }\n var pValue = this.rgbToHex(this.rgb);\n this.rgb = [];\n this.hsv = [];\n this.triggerEvent('', pValue, '', isKey);\n };\n ColorPicker.prototype.switchToPicker = function () {\n var wrapper = this.getWrapper();\n this.trigger('beforeModeSwitch', { element: this.container, mode: 'Picker' });\n this.unWireEvents();\n ([].slice.call(selectAll('.' + PALETTES, this.container))).forEach(function (ele) {\n detach(ele);\n });\n if (wrapper.classList.contains(SHOWVALUE)) {\n detach(select('.' + INPUTWRAPPER, this.container));\n }\n this.container.style.width = '';\n var grpEle = select('.e-custom-palette', this.container);\n if (this.presetColors) {\n remove(grpEle);\n }\n this.createPicker();\n this.getDragHandler().focus();\n this.createInput();\n this.refreshPopupPos();\n this.wireEvents();\n this.trigger('onModeSwitch', { element: this.container, mode: 'Picker' });\n };\n ColorPicker.prototype.ctrlBtnClick = function (ele, e) {\n if (ele.classList.contains(APPLY)) {\n var cValue = this.rgbToHex(this.rgb);\n this.triggerChangeEvent(cValue);\n }\n if (!this.inline) {\n this.closePopup(e);\n this.splitBtn.element.focus();\n }\n };\n ColorPicker.prototype.paletteKeyDown = function (e) {\n var target = e.target;\n if (!target.classList.contains(PALETTES)) {\n return;\n }\n var selectedEle;\n var idx;\n var tiles = [].slice.call(selectAll('.' + TILE, target));\n var prevSelectedEle = (tiles.filter(function (tile) { return tile.classList.contains('e-selected'); })).pop();\n switch (!e.altKey && e.keyCode) {\n case 39:\n e.preventDefault();\n selectedEle = prevSelectedEle ? tiles[this.tilePosition(tiles, prevSelectedEle, this.enableRtl ? -1 : 1)]\n : tiles[this.enableRtl ? tiles.length - 1 : 0];\n this.keySelectionChanges(selectedEle);\n break;\n case 37:\n e.preventDefault();\n selectedEle = prevSelectedEle ? tiles[this.tilePosition(tiles, prevSelectedEle, this.enableRtl ? 1 : -1)]\n : tiles[this.enableRtl ? 0 : tiles.length - 1];\n this.keySelectionChanges(selectedEle);\n break;\n case 38:\n e.preventDefault();\n idx = prevSelectedEle ? this.tilePosition(tiles, prevSelectedEle, -this.columns) : 0;\n selectedEle = tiles[idx] ? tiles[idx] : tiles[idx - this.columns];\n this.keySelectionChanges(selectedEle);\n break;\n case 40:\n e.preventDefault();\n idx = prevSelectedEle ? this.tilePosition(tiles, prevSelectedEle, this.columns) : tiles.length - 1;\n if (tiles[idx]) {\n selectedEle = tiles[idx];\n }\n else {\n idx %= tiles.length;\n idx += tiles[tiles.length - 1].parentElement.childElementCount;\n selectedEle = tiles[idx];\n }\n this.keySelectionChanges(selectedEle);\n break;\n case 13:\n e.preventDefault();\n if (prevSelectedEle) {\n var cValue = prevSelectedEle.getAttribute('aria-label');\n this.enterKeyHandler(cValue ? cValue : '', e);\n }\n }\n };\n ColorPicker.prototype.keySelectionChanges = function (newEle) {\n this.removeTileSelection();\n this.addTileSelection(newEle);\n if (newEle.classList.contains(NOCOLOR)) {\n this.noColorTile(true);\n }\n else {\n var cValue = newEle.getAttribute('aria-label');\n var pValue = this.rgbToHex(this.rgb);\n this.rgb = this.hexToRgb(cValue);\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n if (this.getWrapper().classList.contains(SHOWVALUE)) {\n this.updateInput(cValue);\n }\n this.triggerEvent(cValue, pValue, this.convertToRgbString(this.rgb), true);\n }\n };\n ColorPicker.prototype.tilePosition = function (items, element, cIdx) {\n items = Array.prototype.slice.call(items);\n var n = items.length;\n var emptyCount = this.columns - items[n - 1].parentElement.childElementCount;\n var idx = items.indexOf(element);\n idx += cIdx;\n if (idx < 0) {\n idx += n + emptyCount;\n }\n else {\n idx %= n + emptyCount;\n }\n return idx;\n };\n ColorPicker.prototype.inputHandler = function (e) {\n var target = e.target;\n if (!target.value.length) {\n return;\n }\n var hsv;\n var pValue;\n var label = select('.e-float-text', target.parentElement).textContent;\n switch (label) {\n case 'HEX': {\n var value = '';\n if ((target.value[0] === '#' && target.value.length !== 5) || (target.value[0] !== '#' && target.value.length !== 4)) {\n value = this.roundValue(target.value);\n }\n if (value.length === 9) {\n pValue = this.rgbToHex(this.rgb);\n this.rgb = this.hexToRgb(value + value.substr(-2));\n this.inputValueChange(this.rgbToHsv.apply(this, this.rgb), pValue, target.value);\n }\n else {\n return;\n }\n break;\n }\n case 'R':\n if (this.rgb[0] !== Number(target.value)) {\n pValue = this.rgbToHex(this.rgb);\n this.rgb[0] = Number(target.value);\n hsv = this.rgbToHsv.apply(this, this.rgb);\n this.inputValueChange(hsv, pValue);\n }\n break;\n case 'G':\n if (this.rgb[1] !== Number(target.value)) {\n pValue = this.rgbToHex(this.rgb);\n this.rgb[1] = Number(target.value);\n hsv = this.rgbToHsv.apply(this, this.rgb);\n this.inputValueChange(hsv, pValue);\n }\n break;\n case 'B':\n if (this.rgb[2] !== Number(target.value)) {\n pValue = this.rgbToHex(this.rgb);\n this.rgb[2] = Number(target.value);\n hsv = this.rgbToHsv.apply(this, this.rgb);\n this.inputValueChange(hsv, pValue);\n }\n break;\n case 'H':\n this.hueSlider.value = Number(target.value);\n break;\n case 'S':\n if (this.hsv[1] !== Number(target.value)) {\n this.hsv[1] = Number(target.value);\n this.updateHsv();\n this.convertToOtherFormat();\n }\n break;\n case 'V':\n if (this.hsv[2] !== Number(target.value)) {\n this.hsv[2] = Number(target.value);\n this.updateHsv();\n this.convertToOtherFormat();\n }\n break;\n case 'A':\n this.opacitySlider.value = Number(target.value);\n break;\n }\n };\n ColorPicker.prototype.inputValueChange = function (hsv, pValue, value) {\n if (hsv[0] !== this.hsv[0]) {\n this.hueSlider.setProperties({ 'value': hsv[0] }, true);\n this.hueSlider.refresh();\n this.setHsvContainerBg(hsv[0]);\n }\n this.hsv = hsv;\n var cValue = this.rgbToHex(this.rgb);\n this.setHandlerPosition();\n this.updateInput(value ? value : cValue);\n var rgba = this.convertToRgbString(this.rgb);\n this.updatePreview(rgba);\n this.triggerEvent(cValue, pValue, rgba);\n };\n ColorPicker.prototype.triggerEvent = function (cValue, pValue, rgba, isKey) {\n if (isKey === void 0) { isKey = false; }\n var hex = cValue.slice(0, 7);\n if (!this.showButtons && !isKey) {\n this.trigger('change', { currentValue: { hex: hex, rgba: rgba },\n previousValue: { hex: this.value.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(this.value)) }, value: cValue });\n if (this.enableOpacity) {\n this.setProperties({ 'value': cValue }, true);\n }\n else {\n this.setProperties({ 'value': hex }, true);\n }\n this.element.value = hex ? hex : '#000000';\n }\n else {\n this.trigger('select', {\n currentValue: { hex: hex, rgba: rgba },\n previousValue: { hex: pValue.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(pValue)) }\n });\n }\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it maintains the initial input element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n ColorPicker.prototype.destroy = function () {\n var _this = this;\n var wrapper = this.getWrapper();\n _super.prototype.destroy.call(this);\n ['tabindex', 'spellcheck'].forEach(function (attr) { _this.element.removeAttribute(attr); });\n if (this.inline) {\n this.unWireEvents();\n this.destroyOtherComp();\n }\n else {\n if (this.isPopupOpen()) {\n this.unWireEvents();\n this.destroyOtherComp();\n }\n this.splitBtn.destroy();\n this.splitBtn = null;\n }\n this.tileRipple();\n this.tileRipple = null;\n this.ctrlBtnRipple();\n this.ctrlBtnRipple = null;\n if (this.element.nextElementSibling) {\n detach(this.element.nextElementSibling);\n }\n if (wrapper) {\n wrapper.parentElement.insertBefore(this.element, wrapper);\n detach(wrapper);\n }\n this.container = null;\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n };\n ColorPicker.prototype.destroyOtherComp = function () {\n if (this.isPicker()) {\n this.hueSlider.destroy();\n if (this.enableOpacity) {\n this.opacitySlider.destroy();\n this.opacitySlider = null;\n }\n this.hueSlider = null;\n var tooltipInst = this.getTooltipInst();\n tooltipInst.close();\n tooltipInst.destroy();\n this.tooltipEle = null;\n }\n };\n ColorPicker.prototype.isPopupOpen = function () {\n return this.getPopupEle().classList.contains('e-popup-open');\n };\n ColorPicker.prototype.unWireEvents = function () {\n if (this.isPicker()) {\n var dragHandler = this.getDragHandler();\n EventHandler.remove(dragHandler, 'keydown', this.pickerKeyDown);\n EventHandler.remove(this.getHsvContainer(), 'mousedown touchstart', this.handlerDown);\n if (this.modeSwitcher || this.showButtons) {\n EventHandler.remove(select('.' + CTRLSWITCH, this.container), 'click', this.btnClickHandler);\n }\n EventHandler.remove(select('.' + PREVIOUS, this.container), 'click', this.previewHandler);\n }\n else {\n EventHandler.remove(this.container, 'click', this.paletteClickHandler);\n EventHandler.remove(this.container, 'keydown', this.paletteKeyDown);\n }\n };\n ColorPicker.prototype.roundValue = function (value) {\n if (!value) {\n return '';\n }\n if (value[0] !== '#') {\n value = '#' + value;\n }\n var len = value.length;\n if (len === 4) {\n value += 'f';\n len = 5;\n }\n if (len === 5) {\n var tempValue = '';\n for (var i = 1, len_1 = value.length; i < len_1; i++) {\n tempValue += (value.charAt(i) + value.charAt(i));\n }\n value = '#' + tempValue;\n len = 9;\n }\n if (len === 7) {\n value += 'ff';\n }\n return value;\n };\n ColorPicker.prototype.hexToRgb = function (hex) {\n if (!hex) {\n return [];\n }\n hex = hex.trim();\n if (hex.length !== 9) {\n hex = this.roundValue(hex);\n }\n var opacity = Number((parseInt(hex.slice(-2), 16) / 255).toFixed(2));\n hex = hex.slice(1, 7);\n var bigInt = parseInt(hex, 16);\n var h = [];\n h.push((bigInt >> 16) & 255);\n h.push((bigInt >> 8) & 255);\n h.push(bigInt & 255);\n h.push(opacity);\n return h;\n };\n ColorPicker.prototype.rgbToHsv = function (r, g, b, opacity) {\n if (this.rgb && !this.rgb.length) {\n return [];\n }\n r /= 255;\n g /= 255;\n b /= 255;\n var max = Math.max(r, g, b);\n var min = Math.min(r, g, b);\n var h;\n var v = max;\n var d = max - min;\n var s = max === 0 ? 0 : d / max;\n if (max === min) {\n h = 0;\n }\n else {\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n }\n h /= 6;\n }\n var hsv = [Math.round(h * 360), Math.round(s * 1000) / 10, Math.round(v * 1000) / 10];\n if (!isNullOrUndefined(opacity)) {\n hsv.push(opacity);\n }\n return hsv;\n };\n ColorPicker.prototype.hsvToRgb = function (h, s, v, opacity) {\n var r;\n var g;\n var b;\n s /= 100;\n v /= 100;\n if (s === 0) {\n r = g = b = v;\n return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), opacity];\n }\n h /= 60;\n var i = Math.floor(h);\n var f = h - i;\n var p = v * (1 - s);\n var q = v * (1 - s * f);\n var t = v * (1 - s * (1 - f));\n switch (i) {\n case 0:\n r = v;\n g = t;\n b = p;\n break;\n case 1:\n r = q;\n g = v;\n b = p;\n break;\n case 2:\n r = p;\n g = v;\n b = t;\n break;\n case 3:\n r = p;\n g = q;\n b = v;\n break;\n case 4:\n r = t;\n g = p;\n b = v;\n break;\n default:\n r = v;\n g = p;\n b = q;\n }\n var rgb = [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];\n if (!isNullOrUndefined(opacity)) {\n rgb.push(opacity);\n }\n return rgb;\n };\n ColorPicker.prototype.rgbToHex = function (rgb) {\n return rgb.length ? ('#' + this.hex(rgb[0]) + this.hex(rgb[1]) + this.hex(rgb[2]) +\n (!isNullOrUndefined(rgb[3]) ? (rgb[3] !== 0 ? (Math.round(rgb[3] * 255) + 0x10000).toString(16).substr(-2) : '00') : '')) : '';\n };\n ColorPicker.prototype.hex = function (x) {\n return ('0' + x.toString(16)).slice(-2);\n };\n ColorPicker.prototype.changeModeSwitcherProp = function (prop) {\n var ctrlSwitchWrapper = select('.' + CTRLSWITCH, this.container);\n if (prop) {\n if (ctrlSwitchWrapper) {\n this.appendModeSwitchBtn();\n }\n else {\n this.createCtrlBtn();\n if (this.isPicker() && !this.disabled) {\n this.addCtrlSwitchEvent();\n }\n }\n }\n else {\n if (ctrlSwitchWrapper) {\n if (this.showButtons) {\n detach(select('.' + MODESWITCH, ctrlSwitchWrapper));\n }\n else {\n remove(ctrlSwitchWrapper);\n }\n }\n }\n };\n ColorPicker.prototype.changeShowBtnProps = function (prop) {\n var ctrlBtnWrapper = select('.' + CTRLSWITCH, this.container);\n if (prop) {\n if (ctrlBtnWrapper) {\n remove(ctrlBtnWrapper);\n }\n this.createCtrlBtn();\n if (this.isPicker() && !this.disabled) {\n this.addCtrlSwitchEvent();\n }\n }\n else {\n if (this.modeSwitcher) {\n detach(select('.' + CTRLBTN, ctrlBtnWrapper));\n }\n else {\n remove(ctrlBtnWrapper);\n }\n }\n };\n ColorPicker.prototype.changeValueProp = function (newProp) {\n if (this.isPicker()) {\n this.rgb = this.hexToRgb(newProp);\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n this.setHandlerPosition();\n detach(closest(this.hueSlider.element, '.e-slider-preview'));\n this.createSlider();\n this.setHsvContainerBg();\n this.updateInput(newProp);\n if (this.rgb.length === 4) {\n this.updateOpacityInput(this.rgb[3] * 100);\n }\n }\n else {\n this.removeTileSelection();\n var ele = this.container.querySelector('span[aria-label=\"' + this.roundValue(newProp) + '\"]');\n if (ele) {\n this.addTileSelection(ele);\n }\n }\n };\n ColorPicker.prototype.setInputEleProps = function () {\n remove(select('.' + INPUTWRAPPER, this.container));\n this.createInput();\n };\n ColorPicker.prototype.changeDisabledProp = function (newProp) {\n if (this.isPicker()) {\n this.hueSlider.enabled = !newProp;\n this.opacitySlider.enabled = !newProp;\n this.setInputEleProps();\n }\n if (newProp) {\n this.toggleDisabled(true);\n this.unWireEvents();\n }\n else {\n this.toggleDisabled(false);\n this.wireEvents();\n }\n };\n ColorPicker.prototype.changeCssClassProps = function (newProp, oldProp) {\n var wrapper = this.getWrapper();\n var popupWrapper = this.getPopupEle();\n if (oldProp) {\n removeClass([wrapper, popupWrapper], oldProp.split(' '));\n }\n if (newProp) {\n addClass([wrapper, popupWrapper], newProp.split(' '));\n }\n };\n ColorPicker.prototype.changeRtlProps = function (newProp) {\n if (newProp) {\n addClass([this.getWrapper()], 'e-rtl');\n }\n else {\n removeClass([this.getWrapper()], 'e-rtl');\n }\n };\n ColorPicker.prototype.changePaletteProps = function () {\n detach(this.container.children[0]);\n this.container.style.width = '';\n this.createPalette();\n };\n ColorPicker.prototype.changeOpacityProps = function (newProp) {\n var wrapper = this.getWrapper();\n if (newProp) {\n removeClass([this.container.parentElement], HIDEOPACITY);\n this.createOpacitySlider(select('.e-colorpicker-slider', this.container).appendChild(this.createElement('div', { className: 'e-opacity-slider' })));\n if (!wrapper.classList.contains(HIDEVALUE) && !wrapper.classList.contains(HIDERGBA)) {\n this.appendOpacityValue(select('.e-input-container', this.container));\n }\n }\n else {\n addClass([this.container.parentElement], HIDEOPACITY);\n this.opacitySlider.destroy();\n remove(this.opacitySlider.element);\n this.opacitySlider = null;\n if (!wrapper.classList.contains(HIDEVALUE) && !wrapper.classList.contains(HIDERGBA)) {\n remove(select('.' + OPACITY, this.container).parentElement);\n }\n }\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {ColorPickerModel} newProp - Specifies new properties\n * @param {ColorPickerModel} oldProp - Specifies old properties\n * @returns {void}\n * @private\n */\n ColorPicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n var _this = this;\n if (!isNullOrUndefined(newProp.value)) {\n var value = this.roundValue(newProp.value);\n if (value.length === 9) {\n this.element.value = this.roundValue(value).slice(0, 7);\n var preview = this.splitBtn && select('.' + SPLITPREVIEW, this.splitBtn.element);\n if (preview) {\n preview.style.backgroundColor = this.convertToRgbString(this.hexToRgb(newProp.value));\n }\n }\n else {\n this.value = oldProp.value;\n }\n }\n if (!this.inline && isNullOrUndefined(newProp.inline)) {\n var otherCompModel = ['disabled', 'enableRtl'];\n this.splitBtn.setProperties(getModel(newProp, otherCompModel));\n if (!this.isPopupOpen()) {\n this.changeCssClassProps(newProp.cssClass, oldProp.cssClass);\n this.changeRtlProps(newProp.enableRtl);\n return;\n }\n }\n var _loop_1 = function (prop) {\n switch (prop) {\n case 'inline':\n if (newProp.inline) {\n this_1.getWrapper().appendChild(this_1.container);\n this_1.splitBtn.destroy();\n detach(this_1.element.nextElementSibling);\n if (!this_1.container.children.length) {\n this_1.createWidget();\n }\n }\n else {\n this_1.destroyOtherComp();\n this_1.unWireEvents();\n this_1.container.innerHTML = '';\n this_1.createSplitBtn();\n }\n break;\n case 'cssClass': {\n this_1.changeCssClassProps(newProp.cssClass, oldProp.cssClass);\n var props = newProp.cssClass.split(' ').concat(oldProp.cssClass.split(' '));\n props = props.reduce(function (a, b) { if (a.indexOf(b) < 0) {\n a.push(b);\n } return a; }, []);\n var count_1 = 0;\n props.forEach(function (cls) {\n if (count_1 === 0 &&\n (cls === HIDEVALUE || cls === HIDEVALUESWITCH || cls === SHOWVALUE || cls === HIDEHEX || cls === HIDERGBA)) {\n var inputWrap = select('.' + INPUTWRAPPER, _this.container);\n if (inputWrap) {\n remove(select('.' + INPUTWRAPPER, _this.container));\n }\n _this.createInput();\n count_1++;\n }\n });\n break;\n }\n case 'enableRtl':\n if (this_1.isPicker()) {\n this_1.hueSlider.enableRtl = newProp.enableRtl;\n if (this_1.enableOpacity) {\n this_1.opacitySlider.enableRtl = newProp.enableRtl;\n }\n this_1.setInputEleProps();\n }\n this_1.changeRtlProps(newProp.enableRtl);\n break;\n case 'disabled':\n this_1.changeDisabledProp(newProp.disabled);\n break;\n case 'value':\n if (this_1.value !== oldProp.value) {\n this_1.changeValueProp(newProp.value);\n }\n break;\n case 'showButtons':\n this_1.changeShowBtnProps(newProp.showButtons);\n break;\n case 'mode':\n if (newProp.mode === 'Picker') {\n this_1.switchToPicker();\n }\n else {\n this_1.switchToPalette();\n }\n break;\n case 'modeSwitcher':\n this_1.changeModeSwitcherProp(newProp.modeSwitcher);\n break;\n case 'columns':\n case 'presetColors':\n if (!this_1.isPicker()) {\n this_1.changePaletteProps();\n }\n break;\n case 'noColor':\n if (newProp.noColor) {\n if (this_1.mode === 'Palette' && !this_1.modeSwitcher) {\n this_1.setNoColor();\n }\n }\n else {\n this_1.changePaletteProps();\n }\n break;\n case 'enableOpacity':\n this_1.changeOpacityProps(newProp.enableOpacity);\n break;\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n _loop_1(prop);\n }\n };\n /**\n * Sets the focus to Colorpicker\n * its native method\n *\n * @public\n * @returns {void}\n */\n ColorPicker.prototype.focusIn = function () {\n this.element.parentElement.focus();\n };\n __decorate([\n Property('#008000ff')\n ], ColorPicker.prototype, \"value\", void 0);\n __decorate([\n Property('')\n ], ColorPicker.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], ColorPicker.prototype, \"disabled\", void 0);\n __decorate([\n Property('Picker')\n ], ColorPicker.prototype, \"mode\", void 0);\n __decorate([\n Property(true)\n ], ColorPicker.prototype, \"modeSwitcher\", void 0);\n __decorate([\n Property(null)\n ], ColorPicker.prototype, \"presetColors\", void 0);\n __decorate([\n Property(true)\n ], ColorPicker.prototype, \"showButtons\", void 0);\n __decorate([\n Property(10)\n ], ColorPicker.prototype, \"columns\", void 0);\n __decorate([\n Property(false)\n ], ColorPicker.prototype, \"inline\", void 0);\n __decorate([\n Property(false)\n ], ColorPicker.prototype, \"noColor\", void 0);\n __decorate([\n Property(false)\n ], ColorPicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(true)\n ], ColorPicker.prototype, \"enableOpacity\", void 0);\n __decorate([\n Property(false)\n ], ColorPicker.prototype, \"createPopupOnClick\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"beforeTileRender\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"beforeModeSwitch\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"onModeSwitch\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"created\", void 0);\n ColorPicker = __decorate([\n NotifyPropertyChanges\n ], ColorPicker);\n return ColorPicker;\n}(Component));\nexport { ColorPicker };\n","import { addClass, Browser, removeClass, EventHandler, formatUnit, isNullOrUndefined, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';\nimport { getInstance, closest, selectAll, detach } from '@syncfusion/ej2-base';\nimport { Toolbar } from '@syncfusion/ej2-navigations';\nimport { DropDownButton } from '@syncfusion/ej2-splitbuttons';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport * as classes from '../base/classes';\nimport * as events from '../base/constant';\nimport { CLS_TOOLBAR, CLS_DROPDOWN_BTN, CLS_RTE_ELEMENTS, CLS_TB_BTN, CLS_INLINE_DROPDOWN, CLS_COLOR_CONTENT, CLS_FONT_COLOR_DROPDOWN, CLS_BACKGROUND_COLOR_DROPDOWN, CLS_COLOR_PALETTE, CLS_FONT_COLOR_PICKER, CLS_BACKGROUND_COLOR_PICKER, CLS_CUSTOM_TILE, CLS_NOCOLOR_ITEM, CLS_BULLETFORMATLIST_TB_BTN, CLS_NUMBERFORMATLIST_TB_BTN, CLS_LIST_PRIMARY_CONTENT } from '../base/classes';\nimport { ColorPicker } from '@syncfusion/ej2-inputs';\nimport { hasClass } from '../base/util';\n/**\n * `Toolbar renderer` module is used to render toolbar in RichTextEditor.\n *\n * @hidden\n\n */\nvar ToolbarRenderer = /** @class */ (function () {\n /**\n * Constructor for toolbar renderer module\n *\n * @param {IRichTextEditor} parent - specifies the parent element.\n */\n function ToolbarRenderer(parent) {\n this.parent = parent;\n this.wireEvent();\n }\n ToolbarRenderer.prototype.wireEvent = function () {\n this.parent.on(events.destroy, this.unWireEvent, this);\n };\n ToolbarRenderer.prototype.unWireEvent = function () {\n this.parent.off(events.destroy, this.unWireEvent);\n if (this.popupOverlay) {\n EventHandler.remove(this.popupOverlay, 'click touchmove', this.onPopupOverlay);\n }\n this.removePopupContainer();\n };\n ToolbarRenderer.prototype.toolbarBeforeCreate = function (e) {\n if (this.mode === 'Extended') {\n e.enableCollision = false;\n }\n };\n ToolbarRenderer.prototype.toolbarCreated = function () {\n this.parent.notify(events.toolbarCreated, this);\n };\n ToolbarRenderer.prototype.toolbarClicked = function (args) {\n if (!this.parent.enabled) {\n return;\n }\n if (!this.parent.readonly || isNullOrUndefined(args.item)) {\n this.parent.notify(events.toolbarClick, args);\n }\n this.parent.trigger('toolbarClick', args);\n };\n ToolbarRenderer.prototype.dropDownSelected = function (args) {\n this.parent.notify(events.dropDownSelect, args);\n this.onPopupOverlay();\n };\n ToolbarRenderer.prototype.beforeDropDownItemRender = function (args) {\n if (this.parent.readonly || !this.parent.enabled) {\n return;\n }\n this.parent.notify(events.beforeDropDownItemRender, args);\n };\n ToolbarRenderer.prototype.dropDownOpen = function (args) {\n if (args.element.parentElement.getAttribute('id').indexOf('TableCell') > -1 && !isNOU(args.element.parentElement.querySelector('.e-cell-merge')) &&\n (!isNOU(args.element.parentElement.querySelector('.e-cell-horizontal-split')) || !isNOU(args.element.parentElement.querySelector('.e-cell-vertical-split')))) {\n var listEle = args.element.querySelectorAll('li');\n if (this.parent.inputElement.querySelectorAll('.e-cell-select').length === 1) {\n addClass([listEle[0]], 'e-disabled');\n removeClass([listEle[1], listEle[2]], 'e-disabled');\n }\n else if (this.parent.inputElement.querySelectorAll('.e-cell-select').length > 1) {\n removeClass([listEle[0]], 'e-disabled');\n addClass([listEle[1], listEle[2]], 'e-disabled');\n }\n }\n if (Browser.isDevice && !args.element.parentElement.classList.contains(classes.CLS_QUICK_DROPDOWN)) {\n this.popupModal(args.element.parentElement);\n }\n this.parent.notify(events.selectionSave, args);\n };\n ToolbarRenderer.prototype.dropDownClose = function (args) {\n this.removePopupContainer();\n this.parent.notify(events.selectionRestore, args);\n };\n ToolbarRenderer.prototype.removePopupContainer = function () {\n if (Browser.isDevice && !isNullOrUndefined(this.popupContainer)) {\n var popupEle = this.popupContainer.querySelector('.e-dropdown-popup.e-tbar-btn.e-control');\n if (popupEle) {\n this.popupContainer.parentNode.insertBefore(popupEle, this.popupContainer.nextSibling);\n popupEle.style.removeProperty('position');\n removeClass([popupEle], 'e-popup-modal');\n }\n detach(this.popupContainer);\n this.popupContainer = undefined;\n }\n };\n /**\n * renderToolbar method\n *\n * @param {IToolbarOptions} args - specifies the arguments.\n * @returns {void}\n * @hidden\n\n */\n ToolbarRenderer.prototype.renderToolbar = function (args) {\n this.setPanel(args.target);\n this.renderPanel();\n this.mode = args.overflowMode;\n args.rteToolbarObj.toolbarObj = new Toolbar({\n items: args.items,\n width: '100%',\n overflowMode: args.overflowMode,\n beforeCreate: this.toolbarBeforeCreate.bind(this),\n created: this.toolbarCreated.bind(this),\n clicked: this.toolbarClicked.bind(this),\n enablePersistence: args.enablePersistence,\n enableRtl: args.enableRtl,\n cssClass: args.cssClass\n });\n args.rteToolbarObj.toolbarObj.isStringTemplate = true;\n args.rteToolbarObj.toolbarObj.createElement = this.parent.createElement;\n args.rteToolbarObj.toolbarObj.appendTo(args.target);\n };\n /**\n * renderDropDownButton method\n *\n * @param {IDropDownModel} args - specifies the the arguments.\n * @returns {void}\n * @hidden\n\n */\n ToolbarRenderer.prototype.renderDropDownButton = function (args) {\n var _this = this;\n var css;\n args.element.classList.add(CLS_DROPDOWN_BTN);\n css = args.cssClass + ' ' + CLS_RTE_ELEMENTS + ' ' + CLS_TB_BTN;\n if (this.parent.inlineMode.enable && Browser.isDevice) {\n css = css + ' ' + CLS_INLINE_DROPDOWN;\n }\n // eslint-disable-next-line\n var proxy = this;\n var dropDown = new DropDownButton({\n items: args.items,\n iconCss: args.iconCss,\n cssClass: css,\n content: args.content,\n enablePersistence: this.parent.enablePersistence,\n enableRtl: this.parent.enableRtl,\n select: this.dropDownSelected.bind(this),\n beforeOpen: function (args) {\n if (proxy.parent.readonly || !proxy.parent.enabled) {\n args.cancel = true;\n return;\n }\n // eslint-disable-next-line\n for (var index = 0; index < args.element.childNodes.length; index++) {\n var divNode = _this.parent.createElement('div');\n divNode.innerHTML = dropDown.content.trim();\n if (divNode.textContent.trim() !== ''\n && args.element.childNodes[index].textContent.trim() === divNode.textContent.trim()) {\n if (!args.element.childNodes[index].classList.contains('e-active')) {\n addClass([args.element.childNodes[index]], 'e-active');\n }\n }\n else {\n removeClass([args.element.childNodes[index]], 'e-active');\n }\n }\n proxy.parent.notify(events.beforeDropDownOpen, args);\n },\n close: this.dropDownClose.bind(this),\n open: this.dropDownOpen.bind(this),\n beforeItemRender: this.beforeDropDownItemRender.bind(this)\n });\n dropDown.isStringTemplate = true;\n dropDown.createElement = proxy.parent.createElement;\n dropDown.appendTo(args.element);\n args.element.tabIndex = -1;\n var popupElement = document.getElementById(dropDown.element.id + '-popup');\n popupElement.setAttribute('aria-owns', this.parent.getID());\n return dropDown;\n };\n /**\n * renderListDropDown method\n *\n * @param {IDropDownModel} args - specifies the the arguments.\n * @returns {void}\n * @hidden\n\n */\n ToolbarRenderer.prototype.renderListDropDown = function (args) {\n // eslint-disable-next-line\n var proxy = this;\n var css = CLS_RTE_ELEMENTS + ' ' + CLS_TB_BTN + ((this.parent.inlineMode) ? (' ' + CLS_INLINE_DROPDOWN) : '');\n css += (' ' + ((args.itemName === 'NumberFormatList') ? CLS_NUMBERFORMATLIST_TB_BTN : CLS_BULLETFORMATLIST_TB_BTN));\n var content = proxy.parent.createElement('span', { className: CLS_LIST_PRIMARY_CONTENT });\n var inlineEle = proxy.parent.createElement('span', { className: args.cssClass });\n content.appendChild(inlineEle);\n var dropDown = new DropDownButton({\n items: args.items,\n cssClass: css,\n content: args.content,\n enablePersistence: this.parent.enablePersistence,\n enableRtl: this.parent.enableRtl,\n select: this.dropDownSelected.bind(this),\n beforeOpen: function (args) {\n if (proxy.parent.readonly || !proxy.parent.enabled) {\n args.cancel = true;\n return;\n }\n var element = (args.event) ? args.event.target : null;\n proxy.currentElement = dropDown.element;\n proxy.currentDropdown = dropDown;\n if (args.event && args.event.type === 'click' && (element.classList.contains(CLS_LIST_PRIMARY_CONTENT)\n || element.parentElement.classList.contains(CLS_LIST_PRIMARY_CONTENT))) {\n args.cancel = true;\n return;\n }\n proxy.parent.notify(events.beforeDropDownOpen, args);\n },\n close: this.dropDownClose.bind(this),\n open: this.dropDownOpen.bind(this),\n beforeItemRender: this.beforeDropDownItemRender.bind(this)\n });\n dropDown.isStringTemplate = true;\n dropDown.createElement = proxy.parent.createElement;\n dropDown.appendTo(args.element);\n args.element.tabIndex = -1;\n var popupElement = document.getElementById(dropDown.element.id + '-popup');\n popupElement.setAttribute('aria-owns', this.parent.getID());\n if (args.element.childElementCount === 1) {\n dropDown.element.insertBefore(content, dropDown.element.querySelector('.e-caret'));\n }\n args.element.tabIndex = -1;\n dropDown.element.removeAttribute('type');\n return dropDown;\n };\n // eslint-disable-next-line\n ToolbarRenderer.prototype.onPopupOverlay = function (args) {\n if (!isNullOrUndefined(this.popupOverlay)) {\n closest(this.popupOverlay, '.e-popup-container').style.display = 'none';\n this.popupOverlay.style.display = 'none';\n removeClass([this.popupOverlay], 'e-popup-overlay');\n }\n };\n ToolbarRenderer.prototype.setIsModel = function (element) {\n if (!closest(element, '.e-popup-container')) {\n this.popupContainer = this.parent.createElement('div', {\n className: 'e-rte-modal-popup e-popup-container e-center'\n });\n element.parentNode.insertBefore(this.popupContainer, element);\n this.popupContainer.appendChild(element);\n this.popupContainer.style.zIndex = element.style.zIndex;\n this.popupContainer.style.display = 'flex';\n element.style.position = 'relative';\n addClass([element], 'e-popup-modal');\n this.popupOverlay = this.parent.createElement('div', { className: 'e-popup-overlay' });\n // eslint-disable-next-line\n this.popupOverlay.style.zIndex = (parseInt(element.style.zIndex, null) - 1).toString();\n this.popupOverlay.style.display = 'block';\n this.popupContainer.appendChild(this.popupOverlay);\n EventHandler.add(this.popupOverlay, 'click touchmove', this.onPopupOverlay, this);\n }\n else {\n element.parentElement.style.display = 'flex';\n this.popupOverlay = element.nextElementSibling;\n this.popupOverlay.style.display = 'block';\n addClass([this.popupOverlay], 'e-popup-overlay');\n }\n };\n ToolbarRenderer.prototype.paletteSelection = function (dropDownArgs, currentElement) {\n var ele = dropDownArgs.element.querySelector('.e-control.e-colorpicker');\n var colorbox = [].slice.call(selectAll('.e-tile', ele.parentElement));\n removeClass(colorbox, 'e-selected');\n var style = currentElement.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor;\n (colorbox.filter(function (colorbox) {\n if (colorbox.style.backgroundColor === style) {\n addClass([colorbox], 'e-selected');\n }\n }));\n };\n /**\n * renderColorPickerDropDown method\n *\n * @param {IColorPickerModel} args - specifies the arguments.\n * @param {string} item - specifies the item.\n * @param {ColorPicker} colorPicker - specifies the colorpicker.\n * @param {string} defaultColor -specifies the defaultColor.\n * @returns {void}\n * @hidden\n\n */\n ToolbarRenderer.prototype.renderColorPickerDropDown = function (args, item, colorPicker, defaultColor) {\n var _this = this;\n // eslint-disable-next-line\n var proxy = this;\n var css = CLS_RTE_ELEMENTS + ' ' + CLS_TB_BTN + ((this.parent.inlineMode) ? (' ' + CLS_INLINE_DROPDOWN) : '');\n css += (' ' + ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_DROPDOWN : CLS_FONT_COLOR_DROPDOWN));\n css += ' ' + this.parent.cssClass;\n var content = proxy.parent.createElement('span', { className: CLS_COLOR_CONTENT });\n var inlineEle = proxy.parent.createElement('span', { className: args.cssClass });\n var range;\n var initialBackgroundColor = (isNullOrUndefined(defaultColor)) ? proxy.parent.backgroundColor.default : defaultColor;\n inlineEle.style.borderBottomColor = (item === 'backgroundcolor') ?\n initialBackgroundColor : proxy.parent.fontColor.default;\n content.appendChild(inlineEle);\n var dropDown = new DropDownButton({\n target: colorPicker.element.parentElement, cssClass: css,\n enablePersistence: this.parent.enablePersistence, enableRtl: this.parent.enableRtl,\n beforeOpen: function (dropDownArgs) {\n colorPicker.inline = true;\n colorPicker.dataBind();\n if (proxy.parent.readonly || !proxy.parent.enabled) {\n dropDownArgs.cancel = true;\n return;\n }\n var element = (dropDownArgs.event) ? dropDownArgs.event.target : null;\n proxy.currentElement = dropDown.element;\n proxy.currentDropdown = dropDown;\n proxy.paletteSelection(dropDownArgs, proxy.currentElement);\n if (dropDownArgs.event && dropDownArgs.event.type === 'click' && (element.classList.contains(CLS_COLOR_CONTENT)\n || element.parentElement.classList.contains(CLS_COLOR_CONTENT))) {\n dropDownArgs.cancel = true;\n var colorpickerValue = element.classList.contains(CLS_RTE_ELEMENTS) ? element.style.borderBottomColor :\n element.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor;\n proxy.parent.notify(events.selectionRestore, {});\n range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());\n var parentNode = range.startContainer.parentNode;\n var closestElement = closest(range.startContainer.parentNode, 'table');\n if ((range.startContainer.nodeName === 'TD' || range.startContainer.nodeName === 'TH' ||\n (closest(range.startContainer.parentNode, 'td,th')) ||\n (proxy.parent.iframeSettings.enable && !hasClass(parentNode.ownerDocument.querySelector('body'), 'e-lib')))\n && range.collapsed && args.subCommand === 'BackgroundColor' && closest(closestElement, '.' + classes.CLS_RTE)) {\n proxy.parent.notify(events.tableColorPickerChanged, {\n item: { command: args.command, subCommand: args.subCommand,\n value: colorpickerValue }\n });\n }\n else {\n proxy.parent.notify(events.colorPickerChanged, { item: { command: args.command, subCommand: args.subCommand,\n value: colorpickerValue }\n });\n }\n return;\n }\n else {\n var ele = dropDownArgs.element.querySelector('.e-control.e-colorpicker');\n var inst = getInstance(ele, ColorPicker);\n inst.showButtons = (dropDownArgs.element.querySelector('.e-color-palette')) ? false : true;\n inst.dataBind();\n }\n dropDownArgs.element.onclick = function (args) {\n if (args.target.classList.contains('e-cancel')) {\n dropDown.toggle();\n }\n };\n },\n open: function (dropDownArgs) {\n _this.setColorPickerContentWidth(colorPicker);\n var focusEle;\n var ele = dropDownArgs.element.querySelector('.e-control.e-colorpicker');\n if (dropDownArgs.element.querySelector('.e-color-palette')) {\n focusEle = ele.parentElement.querySelector('.e-palette');\n }\n else {\n focusEle = ele.parentElement.querySelector('e-handler');\n }\n if (focusEle) {\n focusEle.focus();\n }\n if (Browser.isDevice) {\n _this.popupModal(dropDownArgs.element.parentElement);\n }\n _this.pickerRefresh(dropDownArgs);\n },\n beforeClose: function (dropDownArgs) {\n var element = (dropDownArgs.event) ? dropDownArgs.event.target : null;\n if (dropDownArgs.event && dropDownArgs.event.type === 'click' && (element.classList.contains(CLS_COLOR_CONTENT)\n || element.parentElement.classList.contains(CLS_COLOR_CONTENT))) {\n var colorpickerValue = element.classList.contains(CLS_RTE_ELEMENTS) ? element.style.borderBottomColor :\n element.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor;\n range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());\n if ((range.startContainer.nodeName === 'TD' || range.startContainer.nodeName === 'TH' ||\n closest(range.startContainer.parentNode, 'td,th')) && range.collapsed) {\n proxy.parent.notify(events.tableColorPickerChanged, { item: {\n command: args.command, subCommand: args.subCommand,\n value: colorpickerValue\n }\n });\n }\n else {\n proxy.parent.notify(events.colorPickerChanged, { item: { command: args.command, subCommand: args.subCommand,\n value: colorpickerValue }\n });\n }\n return;\n }\n },\n close: function (dropDownArgs) {\n proxy.parent.notify(events.selectionRestore, {});\n var dropElement = closest(dropDownArgs.element.parentElement, '.e-popup-container');\n if (dropElement) {\n dropElement.style.display = 'none';\n dropElement.lastElementChild.style.display = 'none';\n removeClass([dropElement.lastElementChild], 'e-popup-overlay');\n }\n if (Browser.isDevice && !isNullOrUndefined(dropElement)) {\n var popupEle = dropElement.querySelector('.e-dropdown-popup.e-tbar-btn.e-control');\n if (popupEle) {\n dropElement.parentNode.insertBefore(popupEle, dropElement.nextSibling);\n popupEle.style.removeProperty('position');\n removeClass([popupEle], 'e-popup-modal');\n }\n detach(dropElement);\n proxy.popupContainer = undefined;\n }\n }\n });\n dropDown.isStringTemplate = true;\n dropDown.createElement = proxy.parent.createElement;\n args.element.setAttribute('role', 'button');\n dropDown.appendTo(args.element);\n var popupElement = document.getElementById(dropDown.element.id + '-popup');\n popupElement.setAttribute('aria-owns', this.parent.getID());\n dropDown.element.insertBefore(content, dropDown.element.querySelector('.e-caret'));\n args.element.tabIndex = -1;\n dropDown.element.removeAttribute('type');\n dropDown.element.onmousedown = function () {\n proxy.parent.notify(events.selectionSave, {});\n };\n dropDown.element.onkeydown = function () {\n proxy.parent.notify(events.selectionSave, {});\n };\n return dropDown;\n };\n ToolbarRenderer.prototype.pickerRefresh = function (dropDownArgs) {\n if (this.parent.backgroundColor.mode === 'Picker') {\n var popupElem = dropDownArgs.element.parentElement;\n popupElem.style.width = (popupElem.offsetWidth + 5).toString() + 'px';\n getInstance(popupElem, Popup).refreshPosition(popupElem);\n popupElem.style.width = (popupElem.offsetWidth - 5).toString() + 'px';\n }\n };\n ToolbarRenderer.prototype.popupModal = function (element) {\n var popupInst = getInstance(element, Popup);\n popupInst.relateTo = document.body;\n popupInst.position = { X: 0, Y: 0 };\n popupInst.targetType = 'container';\n popupInst.collision = { X: 'fit', Y: 'fit' };\n popupInst.offsetY = 4;\n popupInst.dataBind();\n this.setIsModel(element);\n };\n ToolbarRenderer.prototype.setColorPickerContentWidth = function (colorPicker) {\n var colorPickerContent = colorPicker.element.nextSibling;\n if (colorPickerContent.style.width === '0px') {\n colorPickerContent.style.width = '';\n var borderWidth = parseInt(getComputedStyle(colorPickerContent).borderBottomWidth, 10);\n colorPickerContent.style.width = formatUnit(colorPickerContent.children[0].offsetWidth\n + borderWidth + borderWidth);\n }\n };\n /**\n * renderColorPicker method\n *\n * @param {IColorPickerModel} args - specifies the arguments\n * @param {string} item - specifies the string values\n * @returns {void}\n * @hidden\n\n */\n ToolbarRenderer.prototype.renderColorPicker = function (args, item) {\n var _this = this;\n // eslint-disable-next-line\n var proxy = this;\n var value;\n var colorPicker = new ColorPicker({\n enablePersistence: this.parent.enablePersistence,\n enableRtl: this.parent.enableRtl,\n inline: false,\n value: '#fff',\n created: function () {\n var value = (item === 'backgroundcolor') ? proxy.parent.backgroundColor.default : proxy.parent.fontColor.default;\n colorPicker.setProperties({ value: value });\n },\n mode: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.mode : proxy.parent.fontColor.mode),\n modeSwitcher: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.modeSwitcher : proxy.parent.fontColor.modeSwitcher),\n beforeTileRender: function (args) {\n args.element.classList.add(CLS_COLOR_PALETTE);\n args.element.classList.add(CLS_CUSTOM_TILE);\n if (!isNullOrUndefined(_this.parent.cssClass)) {\n var allClassName = _this.parent.cssClass.split(' ');\n for (var i = 0; i < allClassName.length; i++) {\n if (allClassName[i].trim() !== '') {\n args.element.classList.add(allClassName[i]);\n }\n }\n }\n if (args.value === '') {\n args.element.classList.add(CLS_NOCOLOR_ITEM);\n }\n },\n change: function (colorPickerArgs) {\n var colorpickerValue = colorPickerArgs.currentValue.rgba;\n colorPickerArgs.item = {\n command: args.command,\n subCommand: args.subCommand,\n value: colorpickerValue\n };\n proxy.parent.notify(events.selectionRestore, {});\n proxy.currentElement.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor = colorpickerValue;\n var range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());\n var closestElement = closest(range.startContainer.parentNode, 'table');\n if ((range.startContainer.nodeName === 'TD' || range.startContainer.nodeName === 'TH' || range.startContainer.nodeName === 'BODY' ||\n closest(range.startContainer.parentNode, 'td,th')) && range.collapsed && args.subCommand === 'BackgroundColor' && closest(closestElement, '.' + classes.CLS_RTE)) {\n proxy.parent.notify(events.tableColorPickerChanged, colorPickerArgs);\n }\n else {\n proxy.parent.notify(events.colorPickerChanged, colorPickerArgs);\n }\n proxy.currentDropdown.toggle();\n },\n beforeModeSwitch: function (args) {\n value = colorPicker.value;\n if (value === '') {\n colorPicker.setProperties({ value: ((args.mode === 'Picker') ? '#008000ff' : '') }, true);\n }\n colorPicker.showButtons = args.mode === 'Palette' ? false : true;\n }\n });\n colorPicker.isStringTemplate = true;\n colorPicker.columns = (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns;\n colorPicker.presetColors = (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode :\n this.parent.fontColor.colorCode;\n colorPicker.cssClass = ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass;\n colorPicker.createElement = this.parent.createElement;\n colorPicker.appendTo(document.getElementById(args.target));\n return colorPicker;\n };\n /**\n * The function is used to render Rich Text Editor toolbar\n *\n * @returns {void}\n * @hidden\n\n */\n ToolbarRenderer.prototype.renderPanel = function () {\n this.getPanel().classList.add(CLS_TOOLBAR);\n };\n /**\n * Get the toolbar element of RichTextEditor\n *\n * @returns {Element} - specifies the element.\n * @hidden\n\n */\n ToolbarRenderer.prototype.getPanel = function () {\n return this.toolbarPanel;\n };\n /**\n * Set the toolbar element of RichTextEditor\n *\n * @returns {void}\n * @param {Element} panel - specifies the element.\n * @hidden\n\n */\n ToolbarRenderer.prototype.setPanel = function (panel) {\n this.toolbarPanel = panel;\n };\n return ToolbarRenderer;\n}());\nexport { ToolbarRenderer };\n","import { RenderType } from '../base/enum';\nimport { CLS_HR_SEPARATOR } from '../base/classes';\nimport * as events from '../base/constant';\nimport { getTooltipText, toObjectLowerCase } from '../base/util';\nimport { tools, templateItems } from '../models/items';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\n/**\n * `Toolbar` module is used to handle Toolbar actions.\n */\nvar BaseToolbar = /** @class */ (function () {\n function BaseToolbar(parent, serviceLocator) {\n this.tools = {};\n this.parent = parent;\n this.locator = serviceLocator;\n this.renderFactory = this.locator.getService('rendererFactory');\n this.addEventListener();\n if (this.parent.toolbarSettings && Object.keys(this.parent.toolbarSettings.itemConfigs).length > 0) {\n extend(this.tools, tools, toObjectLowerCase(this.parent.toolbarSettings.itemConfigs), true);\n }\n else {\n this.tools = tools;\n }\n }\n BaseToolbar.prototype.addEventListener = function () {\n this.parent.on(events.rtlMode, this.setRtl, this);\n this.parent.on(events.bindCssClass, this.setCssClass, this);\n this.parent.on(events.destroy, this.removeEventListener, this);\n };\n BaseToolbar.prototype.removeEventListener = function () {\n this.parent.off(events.rtlMode, this.setRtl);\n this.parent.off(events.bindCssClass, this.setCssClass);\n this.parent.off(events.destroy, this.removeEventListener);\n };\n BaseToolbar.prototype.setCssClass = function (e) {\n if (!isNullOrUndefined(this.toolbarObj)) {\n if (isNullOrUndefined(e.oldCssClass)) {\n this.toolbarObj.setProperties({ cssClass: (this.toolbarObj.cssClass + ' ' + e.cssClass).trim() });\n }\n else {\n this.toolbarObj.setProperties({ cssClass: (this.toolbarObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });\n }\n }\n };\n BaseToolbar.prototype.setRtl = function (args) {\n if (!isNullOrUndefined(this.toolbarObj)) {\n this.toolbarObj.setProperties({ enableRtl: args.enableRtl });\n }\n };\n BaseToolbar.prototype.getClass = function (item) {\n var classes;\n switch (item) {\n case 'fontsize':\n classes = 'e-rte-inline-size-template';\n break;\n case 'fontcolor':\n case 'backgroundcolor':\n classes = 'e-rte-inline-color-template';\n break;\n default:\n classes = 'e-rte-inline-template';\n break;\n }\n return classes;\n };\n BaseToolbar.prototype.getTemplateObject = function (itemStr, container) {\n var tagName;\n switch (itemStr) {\n case 'fontcolor':\n case 'backgroundcolor':\n case 'numberformatlist':\n case 'bulletformatlist':\n tagName = 'span';\n break;\n default:\n tagName = 'button';\n break;\n }\n return {\n command: this.tools[itemStr.toLocaleLowerCase()].command,\n subCommand: this.tools[itemStr.toLocaleLowerCase()].subCommand,\n template: this.parent.createElement(tagName, {\n id: this.parent.getID() + '_' + container\n + '_' + this.tools[itemStr.toLocaleLowerCase()].id\n }).outerHTML,\n cssClass: this.parent.inlineMode.enable ? this.getClass(itemStr) : '',\n tooltipText: getTooltipText(itemStr, this.locator)\n };\n };\n /**\n * getObject method\n *\n * @param {string} item - specifies the string value\n * @param {string} container - specifies the value of string\n * @returns {IToolbarItemModel} - returns the model element\n * @hidden\n\n */\n BaseToolbar.prototype.getObject = function (item, container) {\n var itemStr = item.toLowerCase();\n if (templateItems.indexOf(itemStr) !== -1) {\n return this.getTemplateObject(itemStr, container);\n }\n else {\n switch (itemStr) {\n case '|':\n return { type: 'Separator' };\n case '-':\n return { type: 'Separator', cssClass: CLS_HR_SEPARATOR };\n default:\n return {\n id: this.parent.getID() + '_' + container + '_' + this.tools[itemStr.toLocaleLowerCase()].id,\n prefixIcon: this.tools[itemStr.toLocaleLowerCase()].icon,\n tooltipText: getTooltipText(itemStr, this.locator),\n command: this.tools[itemStr.toLocaleLowerCase()].command,\n subCommand: this.tools[itemStr.toLocaleLowerCase()].subCommand\n };\n }\n }\n };\n /**\n * @param {string} tbItems - specifies the string value\n * @param {string} container - specifies the container value\n * @returns {ItemModel} - retunrs the model element\n * @hidden\n\n */\n BaseToolbar.prototype.getItems = function (tbItems, container) {\n var _this = this;\n if (this.parent.toolbarSettings.items.length < 1) {\n return [];\n }\n var items = [];\n var _loop_1 = function (item) {\n switch (typeof item) {\n case 'string':\n items.push(this_1.getObject(item, container));\n break;\n default:\n if (!isNullOrUndefined(item.click)) {\n var proxy_1 = item;\n var callback_1 = proxy_1.click;\n proxy_1.click = function () {\n if (proxy_1.undo && _this.parent.formatter.getUndoRedoStack().length === 0) {\n _this.parent.formatter.saveData();\n }\n callback_1.call(_this);\n if ((_this.parent.formatter.getUndoRedoStack()[_this.parent.formatter.getUndoRedoStack().length - 1].text.trim()\n === _this.parent.inputElement.innerHTML.trim())) {\n return;\n }\n if (proxy_1.undo) {\n _this.parent.formatter.saveData();\n }\n };\n }\n items.push(item);\n }\n };\n var this_1 = this;\n for (var _i = 0, tbItems_1 = tbItems; _i < tbItems_1.length; _i++) {\n var item = tbItems_1[_i];\n _loop_1(item);\n }\n return items;\n };\n BaseToolbar.prototype.getToolbarOptions = function (args) {\n return {\n target: args.target,\n rteToolbarObj: this,\n items: this.getItems(args.items, args.container),\n overflowMode: args.mode,\n enablePersistence: this.parent.enablePersistence,\n enableRtl: this.parent.enableRtl,\n cssClass: args.cssClass\n };\n };\n /**\n * render method\n *\n * @param {IToolbarRenderOptions} args - specifies the toolbar options\n * @returns {void}\n * @hidden\n\n */\n BaseToolbar.prototype.render = function (args) {\n this.toolbarRenderer = this.renderFactory.getRenderer(RenderType.Toolbar);\n this.toolbarRenderer.renderToolbar(this.getToolbarOptions(args));\n };\n return BaseToolbar;\n}());\nexport { BaseToolbar };\n","import { addClass, isNullOrUndefined, removeClass, select, closest } from '@syncfusion/ej2-base';\nimport { RenderType } from '../base/enum';\nimport { getIndex } from '../base/util';\nimport * as events from '../base/constant';\nimport * as classes from '../base/classes';\nimport { getDropDownValue, getFormattedFontSize, getTooltipText } from '../base/util';\nimport * as model from '../models/items';\nimport { dispatchEvent } from '../base/util';\n/**\n * `Toolbar` module is used to handle Toolbar actions.\n */\nvar DropDownButtons = /** @class */ (function () {\n function DropDownButtons(parent, serviceLocator) {\n this.parent = parent;\n this.locator = serviceLocator;\n this.renderFactory = this.locator.getService('rendererFactory');\n this.addEventListener();\n }\n DropDownButtons.prototype.initializeInstance = function () {\n this.toolbarRenderer = this.renderFactory.getRenderer(RenderType.Toolbar);\n };\n DropDownButtons.prototype.beforeRender = function (args) {\n var item = args.item;\n if (item.cssClass) {\n addClass([args.element], item.cssClass);\n }\n if (item.command === 'Alignments' || item.subCommand === 'JustifyLeft'\n || item.subCommand === 'JustifyRight' || item.subCommand === 'JustifyCenter') {\n args.element.setAttribute('title', getTooltipText(item.subCommand.toLocaleLowerCase(), this.locator));\n }\n };\n DropDownButtons.prototype.dropdownContent = function (width, type, content) {\n return ('
' +\n '' + content + '');\n };\n /**\n * renderDropDowns method\n *\n * @param {IDropDownRenderArgs} args - specifies the arguments\n * @returns {void}\n * @hidden\n\n */\n DropDownButtons.prototype.renderDropDowns = function (args) {\n var _this = this;\n this.initializeInstance();\n var type = args.containerType;\n var tbElement = args.container;\n model.templateItems.forEach(function (item) {\n var targetElement = undefined;\n if (getIndex(item, args.items) !== -1) {\n switch (item) {\n case 'numberformatlist': {\n targetElement = select('#' + _this.parent.getID() + '_' + type + '_NumberFormatList', tbElement);\n if (isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n var formatOLItem = _this.parent.numberFormatList.types.slice();\n formatOLItem.forEach(function (item) {\n Object.defineProperties(item, {\n command: { value: 'Lists', enumerable: true }, subCommand: { value: 'NumberFormatList', enumerable: true }\n });\n });\n _this.numberFormatListDropDown = _this.toolbarRenderer.renderListDropDown({\n cssClass: 'e-order-list' + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS,\n itemName: 'NumberFormatList', items: formatOLItem, element: targetElement\n });\n break;\n }\n case 'bulletformatlist': {\n targetElement = select('#' + _this.parent.getID() + '_' + type + '_BulletFormatList', tbElement);\n if (isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n var formatULItem = _this.parent.bulletFormatList.types.slice();\n formatULItem.forEach(function (item) {\n Object.defineProperties(item, {\n command: { value: 'Lists', enumerable: true }, subCommand: { value: 'BulletFormatList', enumerable: true }\n });\n });\n _this.bulletFormatListDropDown = _this.toolbarRenderer.renderListDropDown({\n cssClass: 'e-unorder-list' + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS,\n itemName: 'BulletFormatList', items: formatULItem, element: targetElement\n });\n break;\n }\n case 'formats': {\n targetElement = select('#' + _this.parent.getID() + '_' + type + '_Formats', tbElement);\n if (isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n var formatItem = _this.parent.format.types.slice();\n formatItem.forEach(function (item) {\n Object.defineProperties(item, {\n command: { value: 'Formats', enumerable: true }, subCommand: { value: item.value, enumerable: true }\n });\n });\n var formatContent = isNullOrUndefined(_this.parent.format.default) ? formatItem[0].text :\n _this.parent.format.default;\n _this.formatDropDown = _this.toolbarRenderer.renderDropDownButton({\n iconCss: ((type === 'quick') ? 'e-formats e-icons' : ''),\n content: _this.dropdownContent(_this.parent.format.width, type, ((type === 'quick') ? '' : getDropDownValue(formatItem, formatContent, 'text', 'text'))),\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_FORMATS_TB_BTN,\n itemName: 'Formats', items: formatItem, element: targetElement\n });\n break;\n }\n case 'fontname': {\n targetElement = select('#' + _this.parent.getID() + '_' + type + '_FontName', tbElement);\n if (isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n var fontItem = _this.parent.fontFamily.items.slice();\n fontItem.forEach(function (item) {\n Object.defineProperties(item, {\n command: { value: 'Font', enumerable: true }, subCommand: { value: 'FontName', enumerable: true }\n });\n });\n var fontNameContent = isNullOrUndefined(_this.parent.fontFamily.default) ? fontItem[0].text :\n _this.parent.fontFamily.default;\n _this.fontNameDropDown = _this.toolbarRenderer.renderDropDownButton({\n iconCss: ((type === 'quick') ? 'e-font-name e-icons' : ''),\n content: _this.dropdownContent(_this.parent.fontFamily.width, type, ((type === 'quick') ? '' : getDropDownValue(fontItem, fontNameContent, 'text', 'text'))),\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_FONT_NAME_TB_BTN,\n itemName: 'FontName', items: fontItem, element: targetElement\n });\n if (!isNullOrUndefined(_this.parent.fontFamily.default)) {\n _this.getEditNode().style.fontFamily = _this.parent.fontFamily.default;\n }\n break;\n }\n case 'fontsize': {\n targetElement = select('#' + _this.parent.getID() + '_' + type + '_FontSize', tbElement);\n if (isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n var fontsize = _this.parent.fontSize.items.slice();\n fontsize.forEach(function (item) {\n Object.defineProperties(item, {\n command: { value: 'Font', enumerable: true }, subCommand: { value: 'FontSize', enumerable: true }\n });\n });\n var fontSizeContent = isNullOrUndefined(_this.parent.fontSize.default) ? fontsize[1].text :\n _this.parent.fontSize.default;\n _this.fontSizeDropDown = _this.toolbarRenderer.renderDropDownButton({\n content: _this.dropdownContent(_this.parent.fontSize.width, type, getFormattedFontSize(getDropDownValue(fontsize, fontSizeContent.replace(/\\s/g, ''), 'value', 'text'))),\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_FONT_SIZE_TB_BTN,\n itemName: 'FontSize', items: fontsize, element: targetElement\n });\n if (!isNullOrUndefined(_this.parent.fontSize.default)) {\n _this.getEditNode().style.fontSize = _this.parent.fontSize.default;\n }\n break;\n }\n case 'alignments':\n targetElement = select('#' + _this.parent.getID() + '_' + type + '_Alignments', tbElement);\n if (isNullOrUndefined(targetElement) || targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n _this.alignDropDown = _this.toolbarRenderer.renderDropDownButton({\n iconCss: 'e-justify-left e-icons',\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_ALIGN_TB_BTN,\n itemName: 'Alignments', items: model.alignmentItems, element: targetElement\n });\n break;\n case 'align':\n case 'videoalign':\n _this.renderAlignmentDropDown(type, tbElement, targetElement, item);\n break;\n case 'display':\n case 'audiolayoutoption':\n case 'videolayoutoption':\n _this.renderDisplayDropDown(type, tbElement, targetElement, item);\n break;\n case 'tablerows':\n _this.rowDropDown(type, tbElement, targetElement);\n break;\n case 'tablecolumns':\n _this.columnDropDown(type, tbElement, targetElement);\n break;\n case 'tablecell':\n _this.cellDropDown(type, tbElement, targetElement);\n break;\n case 'tablecellverticalalign':\n _this.verticalAlignDropDown(type, tbElement, targetElement);\n break;\n case 'styles':\n _this.tableStylesDropDown(type, tbElement, targetElement);\n break;\n }\n }\n });\n if (this.parent.inlineMode.enable) {\n this.setCssClass({ cssClass: this.parent.cssClass });\n }\n };\n DropDownButtons.prototype.getUpdateItems = function (items, value) {\n var dropDownItems = items.slice();\n dropDownItems.forEach(function (item) {\n Object.defineProperties(item, {\n command: { value: (value === 'Format' ? 'Formats' : 'Font'), enumerable: true },\n subCommand: { value: (value === 'Format' ? item.value : value), enumerable: true }\n });\n });\n return dropDownItems;\n };\n DropDownButtons.prototype.onPropertyChanged = function (model) {\n var newProp = model.newProp;\n var type;\n var content;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'fontFamily':\n if (this.fontNameDropDown) {\n for (var _b = 0, _c = Object.keys(newProp.fontFamily); _b < _c.length; _b++) {\n var fontFamily = _c[_b];\n switch (fontFamily) {\n case 'default':\n case 'width': {\n var fontItems = this.fontNameDropDown.items;\n type = !isNullOrUndefined(closest(this.fontNameDropDown.element, '.' + classes.CLS_QUICK_TB)) ?\n 'quick' : 'toolbar';\n var fontNameContent = isNullOrUndefined(this.parent.fontFamily.default) ? fontItems[0].text :\n this.parent.fontFamily.default;\n content = this.dropdownContent(this.parent.fontFamily.width, type, ((type === 'quick') ? '' : getDropDownValue(fontItems, fontNameContent, 'text', 'text')));\n this.fontNameDropDown.setProperties({ content: content });\n if (!isNullOrUndefined(this.parent.fontFamily.default)) {\n this.getEditNode().style.fontFamily = this.parent.fontFamily.default;\n }\n else {\n this.getEditNode().style.removeProperty('font-family');\n }\n break;\n }\n case 'items':\n this.fontNameDropDown.setProperties({\n items: this.getUpdateItems(newProp.fontFamily.items, 'FontName')\n });\n break;\n }\n }\n }\n break;\n case 'fontSize':\n if (this.fontSizeDropDown) {\n for (var _d = 0, _e = Object.keys(newProp.fontSize); _d < _e.length; _d++) {\n var fontSize = _e[_d];\n switch (fontSize) {\n case 'default':\n case 'width': {\n var fontsize = this.fontSizeDropDown.items;\n type = !isNullOrUndefined(closest(this.fontSizeDropDown.element, '.' + classes.CLS_QUICK_TB)) ? 'quick' : 'toolbar';\n var fontSizeContent = isNullOrUndefined(this.parent.fontSize.default) ? fontsize[1].text :\n this.parent.fontSize.default;\n content = this.dropdownContent(this.parent.fontSize.width, type, getFormattedFontSize(getDropDownValue(fontsize, fontSizeContent.replace(/\\s/g, ''), 'value', 'text')));\n this.fontSizeDropDown.setProperties({ content: content });\n if (!isNullOrUndefined(this.parent.fontSize.default)) {\n this.getEditNode().style.fontSize = this.parent.fontSize.default;\n }\n else {\n this.getEditNode().style.removeProperty('font-size');\n }\n break;\n }\n case 'items':\n this.fontSizeDropDown.setProperties({\n items: this.getUpdateItems(newProp.fontSize.items, 'FontSize')\n });\n break;\n }\n }\n }\n break;\n case 'format':\n if (this.formatDropDown) {\n for (var _f = 0, _g = Object.keys(newProp.format); _f < _g.length; _f++) {\n var format = _g[_f];\n switch (format) {\n case 'default':\n case 'width': {\n var formatItems = this.formatDropDown.items;\n type = !isNullOrUndefined(closest(this.formatDropDown.element, '.' + classes.CLS_QUICK_TB)) ? 'quick' : 'toolbar';\n var formatContent = isNullOrUndefined(this.parent.format.default) ? formatItems[0].text :\n this.parent.format.default;\n content = this.dropdownContent(this.parent.format.width, type, ((type === 'quick') ? '' : getDropDownValue(formatItems, formatContent, 'text', 'text')));\n this.formatDropDown.setProperties({ content: content });\n break;\n }\n case 'types':\n this.formatDropDown.setProperties({\n items: this.getUpdateItems(newProp.format.types, 'Format')\n });\n break;\n }\n }\n }\n break;\n }\n }\n };\n DropDownButtons.prototype.getEditNode = function () {\n return this.parent.contentModule.getEditPanel();\n };\n DropDownButtons.prototype.rowDropDown = function (type, tbElement, targetElement) {\n targetElement = select('#' + this.parent.getID() + '_' + type + '_TableRows', tbElement);\n if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n this.tableRowsDropDown = this.toolbarRenderer.renderDropDownButton({\n iconCss: 'e-table-rows e-icons',\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,\n itemName: 'TableRows',\n items: model.tableRowsItems,\n element: targetElement\n });\n };\n DropDownButtons.prototype.columnDropDown = function (type, tbElement, targetElement) {\n targetElement = select('#' + this.parent.getID() + '_' + type + '_TableColumns', tbElement);\n if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n this.tableColumnsDropDown = this.toolbarRenderer.renderDropDownButton({\n iconCss: 'e-table-columns e-icons',\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,\n itemName: 'TableColumns',\n items: model.tableColumnsItems,\n element: targetElement\n });\n };\n DropDownButtons.prototype.cellDropDown = function (type, tbElement, targetElement) {\n targetElement = select('#' + this.parent.getID() + '_' + type + '_TableCell', tbElement);\n if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n this.tableRowsDropDown = this.toolbarRenderer.renderDropDownButton({\n iconCss: 'e-table-cell e-icons',\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,\n itemName: 'TableCell',\n items: model.tableCellItems,\n element: targetElement\n });\n };\n DropDownButtons.prototype.verticalAlignDropDown = function (type, tbElement, targetElement) {\n targetElement = select('#' + this.parent.getID() + '_' + type + '_TableCellVerticalAlign', tbElement);\n if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n this.tableCellVerticalAlignDropDown = this.toolbarRenderer.renderDropDownButton({\n iconCss: 'e-table-cell-ver-align e-icons',\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,\n itemName: 'TableCellVerticalAlign',\n items: model.TableCellVerticalAlignItems,\n element: targetElement\n });\n };\n DropDownButtons.prototype.renderDisplayDropDown = function (type, tbElement, targetElement, item) {\n targetElement = select('#' + this.parent.getID() + '_' + type + (item === 'display' ? '_Display' : item === 'videolayoutoption' ? '_VideoLayoutOption' : '_AudioLayoutOption'), tbElement);\n if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n this.displayDropDown = this.toolbarRenderer.renderDropDownButton({\n iconCss: item === 'display' ? 'e-display e-icons' : item === 'videolayoutoption' ? 'e-video-display e-icons' : 'e-audio-display e-icons',\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,\n itemName: item === 'display' ? 'Display' : item === 'videolayoutoption' ? 'VideoLayoutOption' : 'AudioLayoutOption',\n items: item === 'display' ? model.imageDisplayItems : item === 'videolayoutoption' ? model.videoLayoutOptionItems : model.audioLayoutOptionItems,\n element: targetElement\n });\n };\n DropDownButtons.prototype.renderAlignmentDropDown = function (type, tbElement, targetElement, item) {\n targetElement = select('#' + this.parent.getID() + '_' + type + (item === 'align' ? '_Align' : '_VideoAlign'), tbElement);\n if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n this.imageAlignDropDown = this.toolbarRenderer.renderDropDownButton({\n iconCss: 'e-justify-left e-icons',\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ICONS + ' ' + classes.CLS_QUICK_DROPDOWN,\n itemName: item === 'align' ? 'Align' : 'VideoAlign',\n items: item === 'align' ? model.imageAlignItems : model.videoAlignItems,\n element: targetElement\n });\n };\n DropDownButtons.prototype.tableStylesDropDown = function (type, tbElement, targetElement) {\n targetElement = select('#' + this.parent.getID() + '_' + type + '_Styles', tbElement);\n if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {\n return;\n }\n this.imageAlignDropDown = this.toolbarRenderer.renderDropDownButton({\n iconCss: 'e-style e-icons',\n cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ICONS + ' ' + classes.CLS_QUICK_DROPDOWN,\n itemName: 'Styles',\n items: this.parent.tableSettings.styles,\n element: targetElement\n });\n };\n DropDownButtons.prototype.removeDropDownClasses = function (target) {\n removeClass([target], [\n classes.CLS_DROPDOWN_BTN,\n classes.CLS_DROPDOWN_POPUP,\n classes.CLS_DROPDOWN_ICONS,\n classes.CLS_DROPDOWN_ITEMS\n ]);\n };\n /**\n * destroyDropDowns method\n *\n * @returns {void}\n * @hidden\n\n */\n DropDownButtons.prototype.destroyDropDowns = function () {\n if (this.formatDropDown) {\n this.removeDropDownClasses(this.formatDropDown.element);\n this.formatDropDown.destroy();\n }\n if (this.fontNameDropDown) {\n this.removeDropDownClasses(this.fontNameDropDown.element);\n this.fontNameDropDown.destroy();\n }\n if (this.fontSizeDropDown) {\n this.removeDropDownClasses(this.fontSizeDropDown.element);\n this.fontSizeDropDown.destroy();\n }\n if (this.alignDropDown) {\n this.removeDropDownClasses(this.alignDropDown.element);\n this.alignDropDown.destroy();\n }\n if (this.imageAlignDropDown) {\n this.removeDropDownClasses(this.imageAlignDropDown.element);\n this.imageAlignDropDown.destroy();\n }\n if (this.displayDropDown) {\n this.removeDropDownClasses(this.displayDropDown.element);\n this.displayDropDown.destroy();\n }\n if (this.tableRowsDropDown) {\n this.removeDropDownClasses(this.tableRowsDropDown.element);\n this.tableRowsDropDown.destroy();\n }\n if (this.tableColumnsDropDown) {\n this.removeDropDownClasses(this.tableColumnsDropDown.element);\n this.tableColumnsDropDown.destroy();\n }\n if (this.tableCellVerticalAlignDropDown) {\n this.removeDropDownClasses(this.tableCellVerticalAlignDropDown.element);\n this.tableCellVerticalAlignDropDown.destroy();\n }\n if (this.numberFormatListDropDown) {\n this.removeDropDownClasses(this.numberFormatListDropDown.element);\n this.numberFormatListDropDown.destroy();\n }\n if (this.bulletFormatListDropDown) {\n this.removeDropDownClasses(this.bulletFormatListDropDown.element);\n this.bulletFormatListDropDown.destroy();\n }\n };\n DropDownButtons.prototype.setRtl = function (args) {\n if (this.formatDropDown) {\n this.formatDropDown.setProperties({ enableRtl: args.enableRtl });\n }\n if (this.fontNameDropDown) {\n this.fontNameDropDown.setProperties({ enableRtl: args.enableRtl });\n }\n if (this.fontSizeDropDown) {\n this.fontSizeDropDown.setProperties({ enableRtl: args.enableRtl });\n }\n if (this.alignDropDown) {\n this.alignDropDown.setProperties({ enableRtl: args.enableRtl });\n }\n if (this.imageAlignDropDown) {\n this.imageAlignDropDown.setProperties({ enableRtl: args.enableRtl });\n }\n if (this.displayDropDown) {\n this.displayDropDown.setProperties({ enableRtl: args.enableRtl });\n }\n if (this.numberFormatListDropDown) {\n this.numberFormatListDropDown.setProperties({ enableRtl: args.enableRtl });\n }\n if (this.bulletFormatListDropDown) {\n this.bulletFormatListDropDown.setProperties({ enableRtl: args.enableRtl });\n }\n };\n DropDownButtons.prototype.updateCss = function (dropDownObj, e) {\n if (dropDownObj && e.cssClass) {\n if (isNullOrUndefined(e.oldCssClass)) {\n dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass + ' ' + e.cssClass).trim() });\n }\n else {\n dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });\n }\n }\n };\n DropDownButtons.prototype.setCssClass = function (e) {\n var dropDownObj = [\n this.formatDropDown, this.fontNameDropDown, this.fontSizeDropDown, this.alignDropDown, this.imageAlignDropDown,\n this.displayDropDown, this.numberFormatListDropDown, this.bulletFormatListDropDown, this.tableRowsDropDown,\n this.tableColumnsDropDown, this.tableCellVerticalAlignDropDown\n ];\n for (var i = 0; i < dropDownObj.length; i++) {\n this.updateCss(dropDownObj[i], e);\n }\n };\n DropDownButtons.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.beforeDropDownItemRender, this.beforeRender, this);\n this.parent.on(events.iframeMouseDown, this.onIframeMouseDown, this);\n this.parent.on(events.rtlMode, this.setRtl, this);\n this.parent.on(events.destroy, this.removeEventListener, this);\n this.parent.on(events.modelChanged, this.onPropertyChanged, this);\n this.parent.on(events.bindCssClass, this.setCssClass, this);\n };\n DropDownButtons.prototype.onIframeMouseDown = function () {\n dispatchEvent(document, 'mousedown');\n };\n DropDownButtons.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.iframeMouseDown, this.onIframeMouseDown);\n this.parent.off(events.rtlMode, this.setRtl);\n this.parent.off(events.beforeDropDownItemRender, this.beforeRender);\n this.parent.off(events.destroy, this.removeEventListener);\n this.parent.off(events.modelChanged, this.onPropertyChanged);\n this.parent.off(events.bindCssClass, this.setCssClass);\n };\n return DropDownButtons;\n}());\nexport { DropDownButtons };\n","import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport { ServiceLocator } from '../services/service-locator';\nimport { RendererFactory } from '../services/renderer-factory';\n/**\n * `ToolbarAction` module is used to toolbar click action\n */\nvar ToolbarAction = /** @class */ (function () {\n function ToolbarAction(parent) {\n this.parent = parent;\n this.addEventListener();\n this.serviceLocator = new ServiceLocator;\n this.serviceLocator.register('rendererFactory', new RendererFactory);\n }\n ToolbarAction.prototype.addEventListener = function () {\n this.parent.on(events.toolbarClick, this.toolbarClick, this);\n this.parent.on(events.dropDownSelect, this.dropDownSelect, this);\n this.parent.on(events.colorPickerChanged, this.renderSelection, this);\n this.parent.on(events.destroy, this.removeEventListener, this);\n };\n ToolbarAction.prototype.toolbarClick = function (args) {\n if (isNOU(args.item)) {\n return;\n }\n if (!isNOU(args.item.controlParent)) {\n // eslint-disable-next-line\n var activeEle = args.item.controlParent\n .activeEle;\n if (activeEle) {\n activeEle.tabIndex = -1;\n }\n }\n if (args.item.command === 'NumberFormatList' || args.item.command === 'BulletFormatList') {\n if (args.originalEvent.target.classList.contains('e-order-list') || args.originalEvent.target.classList.contains('e-unorder-list')) {\n args.item.command = 'Lists';\n args.item.subCommand = args.item.subCommand === 'NumberFormatList' ? 'OL' : 'UL';\n }\n }\n if (args.item.command === 'Lists') {\n if (args.originalEvent.target.classList.contains('e-caret') &&\n (args.originalEvent.target.parentElement.classList.contains('e-rte-bulletformatlist-dropdown') || args.originalEvent.target.parentElement.classList.contains('e-rte-numberformatlist-dropdown'))) {\n args.item.command = args.item.subCommand = null;\n }\n }\n this.parent.notify(events.htmlToolbarClick, args);\n this.parent.notify(events.markdownToolbarClick, args);\n };\n ToolbarAction.prototype.dropDownSelect = function (e) {\n this.parent.notify(events.selectionRestore, {});\n if (!(document.body.contains(document.body.querySelector('.e-rte-quick-toolbar'))\n && e.item && (e.item.command === 'Images' || e.item.command === 'Audios' || e.item.command === 'Videos' ||\n e.item.command === 'VideoLayoutOption' || e.item.command === 'Display' || e.item.command === 'Table'))) {\n var value = e.item.controlParent && this.parent.quickToolbarModule && this.parent.quickToolbarModule.tableQTBar\n && this.parent.quickToolbarModule.tableQTBar.element.contains(e.item.controlParent.element) ? 'Table' : null;\n if (e.item.command === 'Lists') {\n var listItem = { listStyle: e.item.value, listImage: e.item.listImage, type: e.item.subCommand };\n this.parent.formatter.process(this.parent, e, e.originalEvent, listItem);\n }\n else {\n this.parent.formatter.process(this.parent, e, e.originalEvent, value);\n }\n }\n this.parent.notify(events.selectionSave, {});\n };\n ToolbarAction.prototype.renderSelection = function (args) {\n this.parent.notify(events.selectionRestore, {});\n this.parent.formatter.process(this.parent, args, args.originalEvent, null);\n this.parent.notify(events.selectionSave, {});\n };\n ToolbarAction.prototype.removeEventListener = function () {\n this.parent.off(events.toolbarClick, this.toolbarClick);\n this.parent.off(events.dropDownSelect, this.dropDownSelect);\n this.parent.off(events.colorPickerChanged, this.renderSelection);\n this.parent.off(events.destroy, this.removeEventListener);\n };\n return ToolbarAction;\n}());\nexport { ToolbarAction };\n","import { addClass, Browser, EventHandler, detach, removeClass, select, selectAll, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined as isNOU, closest, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, extend } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport * as classes from '../base/classes';\nimport { RenderType, ToolbarType } from '../base/enum';\nimport { setToolbarStatus, updateUndoRedoStatus, getTBarItemsIndex, getCollection, toObjectLowerCase, isIDevice, getTooltipText } from '../base/util';\nimport { updateDropDownFontFormatLocale } from '../base/util';\nimport * as model from '../models/items';\nimport { ToolbarRenderer } from '../renderer/toolbar-renderer';\nimport { BaseToolbar } from './base-toolbar';\nimport { DropDownButtons } from './dropdown-buttons';\nimport { ToolbarAction } from './toolbar-action';\n/**\n * `Toolbar` module is used to handle Toolbar actions.\n */\nvar Toolbar = /** @class */ (function () {\n function Toolbar(parent, serviceLocator) {\n this.parent = parent;\n this.isToolbar = false;\n this.locator = serviceLocator;\n this.isTransformChild = false;\n this.renderFactory = this.locator.getService('rendererFactory');\n model.updateDropDownLocale(this.parent);\n updateDropDownFontFormatLocale(this.parent);\n this.renderFactory.addRenderer(RenderType.Toolbar, new ToolbarRenderer(this.parent));\n this.toolbarRenderer = this.renderFactory.getRenderer(RenderType.Toolbar);\n this.baseToolbar = new BaseToolbar(this.parent, this.locator);\n this.addEventListener();\n if (this.parent.toolbarSettings && Object.keys(this.parent.toolbarSettings.itemConfigs).length > 0) {\n extend(this.tools, model.tools, toObjectLowerCase(this.parent.toolbarSettings.itemConfigs), true);\n }\n else {\n this.tools = model.tools;\n }\n }\n Toolbar.prototype.initializeInstance = function () {\n this.contentRenderer = this.renderFactory.getRenderer(RenderType.Content);\n this.editableElement = this.contentRenderer.getEditPanel();\n this.editPanel = this.contentRenderer.getPanel();\n };\n Toolbar.prototype.toolbarBindEvent = function () {\n if (!this.parent.inlineMode.enable) {\n this.keyBoardModule = new KeyboardEvents(this.getToolbarElement(), {\n keyAction: this.toolBarKeyDown.bind(this), keyConfigs: this.parent.formatter.keyConfig, eventName: 'keydown'\n });\n }\n };\n Toolbar.prototype.toolBarKeyDown = function (e) {\n switch (e.action) {\n case 'escape':\n this.parent.contentModule.getEditPanel().focus();\n break;\n }\n };\n Toolbar.prototype.createToolbarElement = function () {\n this.tbElement = this.parent.createElement('div', { id: this.parent.getID() + '_toolbar' });\n if (!Browser.isDevice && this.parent.inlineMode.enable && isIDevice()) {\n return;\n }\n else {\n if (this.parent.toolbarSettings.enableFloating && !this.parent.inlineMode.enable) {\n this.tbWrapper = this.parent.createElement('div', {\n id: this.parent.getID() + '_toolbar_wrapper',\n innerHTML: this.tbElement.outerHTML,\n className: classes.CLS_TB_WRAP\n });\n this.tbElement = this.tbWrapper.firstElementChild;\n this.parent.element.insertBefore(this.tbWrapper, this.editPanel);\n }\n else {\n this.parent.element.insertBefore(this.tbElement, this.editPanel);\n }\n }\n };\n Toolbar.prototype.getToolbarMode = function () {\n var tbMode;\n switch (this.parent.toolbarSettings.type) {\n case ToolbarType.Expand:\n tbMode = 'Extended';\n break;\n case ToolbarType.Scrollable:\n tbMode = 'Scrollable';\n break;\n default:\n tbMode = 'MultiRow';\n }\n if (isIDevice() && this.parent.toolbarSettings.type === ToolbarType.Expand) {\n tbMode = ToolbarType.Scrollable;\n }\n return tbMode;\n };\n Toolbar.prototype.checkToolbarResponsive = function (ele) {\n if (!Browser.isDevice || isIDevice()) {\n return false;\n }\n var tBarMode;\n if (this.parent.toolbarSettings.type === ToolbarType.Expand) {\n tBarMode = ToolbarType.MultiRow;\n }\n else {\n tBarMode = this.parent.toolbarSettings.type;\n }\n this.baseToolbar.render({\n container: ((this.parent.inlineMode.enable) ? 'quick' : 'toolbar'),\n items: this.parent.toolbarSettings.items,\n mode: tBarMode,\n target: ele,\n cssClass: this.parent.cssClass\n });\n if (this.parent.toolbarSettings.type === ToolbarType.Expand) {\n addClass([ele], ['e-rte-tb-mobile']);\n if (this.parent.inlineMode.enable) {\n this.addFixedTBarClass();\n }\n else {\n addClass([ele], [classes.CLS_TB_STATIC]);\n }\n }\n this.wireEvents();\n this.dropDownModule.renderDropDowns({\n container: ele,\n containerType: ((this.parent.inlineMode.enable) ? 'quick' : 'toolbar'),\n items: this.parent.toolbarSettings.items\n });\n this.parent.notify(events.renderColorPicker, {\n container: this.tbElement,\n containerType: ((this.parent.inlineMode.enable) ? 'quick' : 'toolbar'),\n items: this.parent.toolbarSettings.items\n });\n return true;\n };\n Toolbar.prototype.checkIsTransformChild = function () {\n this.isTransformChild = false;\n var transformElements = selectAll('[style*=\"transform\"]', document);\n for (var i = 0; i < transformElements.length; i++) {\n // eslint-disable-next-line max-len\n if (!isNullOrUndefined(transformElements[i].contains) && transformElements[i].contains(this.parent.element)) {\n this.isTransformChild = true;\n break;\n }\n }\n };\n Toolbar.prototype.toggleFloatClass = function (e) {\n var topValue;\n var isBody = false;\n var isFloat = false;\n var scrollParent;\n var floatOffset = this.parent.floatingToolbarOffset;\n if (e && this.parent.iframeSettings.enable && this.parent.inputElement.ownerDocument === e.target) {\n scrollParent = e.target.body;\n }\n else if (e && e.target !== document) {\n scrollParent = e.target;\n }\n else {\n isBody = true;\n scrollParent = document.body;\n }\n var tbHeight = this.getToolbarHeight() + this.getExpandTBarPopHeight();\n if (this.isTransformChild) {\n topValue = 0;\n var scrollParentRelativeTop = 0;\n var trgHeight = this.parent.element.offsetHeight;\n if (isBody) {\n var bodyStyle = window.getComputedStyle(scrollParent);\n scrollParentRelativeTop = parseFloat(bodyStyle.marginTop.split('px')[0]) + parseFloat(bodyStyle.paddingTop.split('px')[0]);\n }\n var targetTop = this.parent.element.getBoundingClientRect().top;\n var scrollParentYOffset = (Browser.isMSPointer && isBody) ? window.pageYOffset : scrollParent.parentElement.scrollTop;\n var scrollParentRect = scrollParent.getBoundingClientRect();\n var scrollParentTop = (!isBody) ? scrollParentRect.top : (scrollParentRect.top + scrollParentYOffset);\n var outOfRange = ((targetTop - ((!isBody) ? scrollParentTop : 0))\n + trgHeight > tbHeight + floatOffset) ? false : true;\n if (targetTop > (scrollParentTop + floatOffset) || targetTop < -trgHeight || ((targetTop < 0) ? outOfRange : false)) {\n isFloat = false;\n removeClass([this.tbElement], [classes.CLS_TB_ABS_FLOAT]);\n }\n else if (targetTop < (scrollParentTop + floatOffset)) {\n if (targetTop < 0) {\n topValue = (-targetTop) + scrollParentTop;\n }\n else {\n topValue = scrollParentTop - targetTop;\n }\n topValue = (isBody) ? topValue - scrollParentRelativeTop : topValue;\n addClass([this.tbElement], [classes.CLS_TB_ABS_FLOAT]);\n isFloat = true;\n }\n }\n else {\n var parent_1 = this.parent.element.getBoundingClientRect();\n if (window.innerHeight < parent_1.top) {\n return;\n }\n topValue = (e && e.target !== document) ? scrollParent.getBoundingClientRect().top : 0;\n if ((parent_1.bottom < (floatOffset + tbHeight + topValue)) || parent_1.bottom < 0 || parent_1.top > floatOffset + topValue) {\n isFloat = false;\n }\n else if (parent_1.top < floatOffset || parent_1.top < floatOffset + topValue) {\n isFloat = true;\n }\n }\n if (!isFloat) {\n removeClass([this.tbElement], [classes.CLS_TB_FLOAT]);\n setStyleAttribute(this.tbElement, { top: 0 + 'px', width: '100%' });\n }\n else {\n addClass([this.tbElement], [classes.CLS_TB_FLOAT]);\n setStyleAttribute(this.tbElement, { width: this.parent.element.offsetWidth + 'px', top: (floatOffset + topValue) + 'px' });\n }\n };\n Toolbar.prototype.renderToolbar = function () {\n this.initializeInstance();\n this.createToolbarElement();\n if (this.checkToolbarResponsive(this.tbElement)) {\n return;\n }\n if (this.parent.inlineMode.enable) {\n this.parent.notify(events.renderInlineToolbar, {});\n }\n else {\n this.baseToolbar.render({\n container: 'toolbar',\n items: this.parent.toolbarSettings.items,\n mode: this.getToolbarMode(),\n target: this.tbElement,\n cssClass: this.parent.cssClass\n });\n if (!this.parent.inlineMode.enable) {\n if (this.parent.toolbarSettings.enableFloating) {\n this.checkIsTransformChild();\n this.toggleFloatClass();\n }\n addClass([this.parent.element], [classes.CLS_RTE_TB_ENABLED]);\n if (this.parent.toolbarSettings.type === ToolbarType.Expand) {\n addClass([this.parent.element], [classes.CLS_RTE_EXPAND_TB]);\n }\n }\n }\n this.wireEvents();\n if (this.parent.inlineMode.enable && !isIDevice()) {\n this.addFixedTBarClass();\n }\n if (!this.parent.inlineMode.enable) {\n this.dropDownModule.renderDropDowns({\n container: this.tbElement,\n containerType: 'toolbar',\n items: this.parent.toolbarSettings.items\n });\n this.parent.notify(events.renderColorPicker, {\n container: this.tbElement,\n containerType: 'toolbar',\n items: this.parent.toolbarSettings.items\n });\n this.refreshToolbarOverflow();\n }\n var divEle = this.parent.element.querySelector('.e-rte-srctextarea');\n var iframeEle = this.parent.element.querySelector('.e-source-content');\n if ((!this.parent.iframeSettings.enable && (!isNOU(divEle) && divEle.style.display === 'block')) ||\n (this.parent.iframeSettings.enable && (!isNOU(iframeEle) && iframeEle.style.display === 'block'))) {\n this.parent.notify(events.updateToolbarItem, {\n targetItem: 'SourceCode', updateItem: 'Preview',\n baseToolbar: this.parent.getBaseToolbarObject()\n });\n this.parent.disableToolbarItem(this.parent.toolbarSettings.items);\n }\n };\n /**\n * addFixedTBarClass method\n *\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.addFixedTBarClass = function () {\n addClass([this.tbElement], [classes.CLS_TB_FIXED]);\n };\n /**\n * removeFixedTBarClass method\n *\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.removeFixedTBarClass = function () {\n removeClass([this.tbElement], [classes.CLS_TB_FIXED]);\n };\n Toolbar.prototype.showFixedTBar = function () {\n addClass([this.tbElement], [classes.CLS_SHOW]);\n if (Browser.isIos) {\n addClass([this.tbElement], [classes.CLS_TB_IOS_FIX]);\n }\n };\n Toolbar.prototype.hideFixedTBar = function () {\n // eslint-disable-next-line\n (!this.isToolbar) ? removeClass([this.tbElement], [classes.CLS_SHOW, classes.CLS_TB_IOS_FIX]) : this.isToolbar = false;\n };\n /**\n * updateItem method\n *\n * @param {IUpdateItemsModel} args - specifies the arguments.\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.updateItem = function (args) {\n var item = this.tools[args.updateItem.toLocaleLowerCase()];\n if (this.parent.locale !== 'en-US') {\n item.tooltip = getTooltipText(args.updateItem.toLocaleLowerCase(), this.locator);\n }\n var trgItem = this.tools[args.targetItem.toLocaleLowerCase()];\n var index = getTBarItemsIndex(getCollection(trgItem.subCommand), args.baseToolbar.toolbarObj.items)[0];\n if (!isNOU(index)) {\n var prefixId = this.parent.inlineMode.enable ? '_quick_' : '_toolbar_';\n args.baseToolbar.toolbarObj.items[index].id = this.parent.getID() + prefixId + item.id;\n args.baseToolbar.toolbarObj.items[index].prefixIcon = item.icon;\n args.baseToolbar.toolbarObj.items[index].tooltipText = item.tooltip;\n args.baseToolbar.toolbarObj.items[index].subCommand = item.subCommand;\n args.baseToolbar.toolbarObj.dataBind();\n }\n else {\n this.addTBarItem(args, 0);\n }\n };\n Toolbar.prototype.updateToolbarStatus = function (args) {\n if (!this.tbElement || (this.parent.inlineMode.enable && (isIDevice() || !Browser.isDevice))) {\n return;\n }\n var options = {\n args: args,\n dropDownModule: this.dropDownModule,\n parent: this.parent,\n tbElements: selectAll('.' + classes.CLS_TB_ITEM, this.tbElement),\n tbItems: this.baseToolbar.toolbarObj.items\n };\n setToolbarStatus(options, (this.parent.inlineMode.enable ? true : false), this.parent);\n };\n Toolbar.prototype.fullScreen = function (e) {\n this.parent.fullScreenModule.showFullScreen(e);\n };\n Toolbar.prototype.hideScreen = function (e) {\n this.parent.fullScreenModule.hideFullScreen(e);\n };\n /**\n * getBaseToolbar method\n *\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.getBaseToolbar = function () {\n return this.baseToolbar;\n };\n /**\n * addTBarItem method\n *\n * @param {IUpdateItemsModel} args - specifies the arguments.\n * @param {number} index - specifies the index value.\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.addTBarItem = function (args, index) {\n args.baseToolbar.toolbarObj.addItems([args.baseToolbar.getObject(args.updateItem, 'toolbar')], index);\n };\n /**\n * enableTBarItems method\n *\n * @param {BaseToolbar} baseToolbar - specifies the toolbar.\n * @param {string} items - specifies the string value.\n * @param {boolean} isEnable - specifies the boolean value.\n * @param {boolean} muteToolbarUpdate - specifies the toolbar.\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.enableTBarItems = function (baseToolbar, items, isEnable, muteToolbarUpdate) {\n var trgItems = getTBarItemsIndex(getCollection(items), baseToolbar.toolbarObj.items);\n this.tbItems = selectAll('.' + classes.CLS_TB_ITEM, baseToolbar.toolbarObj.element);\n for (var i = 0; i < trgItems.length; i++) {\n var item = this.tbItems[trgItems[i]];\n if (item) {\n baseToolbar.toolbarObj.enableItems(item, isEnable);\n }\n }\n if (!select('.e-rte-srctextarea', this.parent.element) && !muteToolbarUpdate) {\n updateUndoRedoStatus(baseToolbar, this.parent.formatter.editorManager.undoRedoManager.getUndoStatus());\n }\n };\n /**\n * removeTBarItems method\n *\n * @param {string} items - specifies the string value.\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.removeTBarItems = function (items) {\n if (isNullOrUndefined(this.baseToolbar.toolbarObj)) {\n this.baseToolbar = this.parent.getBaseToolbarObject();\n }\n var trgItems = getTBarItemsIndex(getCollection(items), this.baseToolbar.toolbarObj.items);\n this.tbItems = (this.parent.inlineMode.enable) ? selectAll('.' + classes.CLS_TB_ITEM, this.baseToolbar.toolbarObj.element)\n : selectAll('.' + classes.CLS_TB_ITEM, this.parent.element);\n for (var i = 0; i < trgItems.length; i++) {\n this.baseToolbar.toolbarObj.removeItems(this.tbItems[trgItems[i]]);\n }\n };\n /**\n * getExpandTBarPopHeight method\n *\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.getExpandTBarPopHeight = function () {\n var popHeight = 0;\n if (this.parent.toolbarSettings.type === ToolbarType.Expand && this.tbElement.classList.contains('e-extended-toolbar')) {\n var expandPopup = select('.e-toolbar-extended', this.tbElement);\n if (expandPopup && this.tbElement.classList.contains('e-expand-open')\n || expandPopup && expandPopup.classList.contains('e-popup-open')) {\n addClass([expandPopup], [classes.CLS_VISIBLE]);\n popHeight = popHeight + expandPopup.offsetHeight;\n removeClass([expandPopup], [classes.CLS_VISIBLE]);\n }\n else {\n removeClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);\n }\n }\n return popHeight;\n };\n /**\n * getToolbarHeight method\n *\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.getToolbarHeight = function () {\n return this.tbElement.offsetHeight;\n };\n /**\n * getToolbarElement method\n *\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.getToolbarElement = function () {\n return select('.' + classes.CLS_TOOLBAR, this.parent.element);\n };\n /**\n * refreshToolbarOverflow method\n *\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.refreshToolbarOverflow = function () {\n this.baseToolbar.toolbarObj.refreshOverflow();\n };\n Toolbar.prototype.isToolbarDestroyed = function () {\n return this.baseToolbar.toolbarObj && !this.baseToolbar.toolbarObj.isDestroyed;\n };\n Toolbar.prototype.destroyToolbar = function () {\n if (this.isToolbarDestroyed()) {\n this.parent.unWireScrollElementsEvents();\n this.unWireEvents();\n this.parent.notify(events.destroyColorPicker, {});\n this.dropDownModule.destroyDropDowns();\n this.baseToolbar.toolbarObj.destroy();\n this.removeEventListener();\n removeClass([this.parent.element], [classes.CLS_RTE_TB_ENABLED]);\n removeClass([this.parent.element], [classes.CLS_RTE_EXPAND_TB]);\n var tbWrapper = select('.' + classes.CLS_TB_WRAP, this.parent.element);\n var tbElement = select('.' + classes.CLS_TOOLBAR, this.parent.element);\n if (!isNullOrUndefined(tbWrapper)) {\n detach(tbWrapper);\n }\n else if (!isNullOrUndefined(tbElement)) {\n detach(tbElement);\n }\n }\n };\n /**\n * Destroys the ToolBar.\n *\n * @function destroy\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.destroy = function () {\n if (this.isToolbarDestroyed()) {\n this.destroyToolbar();\n if (this.keyBoardModule) {\n this.keyBoardModule.destroy();\n }\n }\n };\n Toolbar.prototype.moduleDestroy = function () {\n this.parent = null;\n this.baseToolbar.parent = null;\n this.toolbarActionModule.parent = null;\n this.dropDownModule.parent = null;\n };\n Toolbar.prototype.scrollHandler = function (e) {\n if (!this.parent.inlineMode.enable) {\n if (this.parent.toolbarSettings.enableFloating && this.getDOMVisibility(this.tbElement)) {\n this.toggleFloatClass(e.args);\n }\n }\n };\n Toolbar.prototype.getDOMVisibility = function (el) {\n if (!el.offsetParent && el.offsetWidth === 0 && el.offsetHeight === 0) {\n return false;\n }\n return true;\n };\n Toolbar.prototype.mouseDownHandler = function () {\n if (Browser.isDevice && this.parent.inlineMode.enable && !isIDevice()) {\n this.showFixedTBar();\n }\n };\n Toolbar.prototype.focusChangeHandler = function () {\n if (Browser.isDevice && this.parent.inlineMode.enable && !isIDevice()) {\n this.isToolbar = false;\n this.hideFixedTBar();\n }\n };\n Toolbar.prototype.dropDownBeforeOpenHandler = function () {\n this.isToolbar = true;\n };\n // eslint-disable-next-line\n Toolbar.prototype.tbFocusHandler = function (e) {\n var activeElm = document.activeElement;\n var isToolbaractive = closest(activeElm, '.e-rte-toolbar');\n if (activeElm === this.parent.getToolbarElement() || isToolbaractive === this.parent.getToolbarElement()) {\n var toolbarItem = this.parent.getToolbarElement().querySelectorAll('.e-expended-nav');\n for (var i = 0; i < toolbarItem.length; i++) {\n if (isNOU(this.parent.getToolbarElement().querySelector('.e-insert-table-btn'))) {\n toolbarItem[i].setAttribute('tabindex', '0');\n }\n else {\n toolbarItem[i].setAttribute('tabindex', '1');\n }\n }\n }\n };\n Toolbar.prototype.tbKeydownHandler = function (e) {\n if (e.target.classList.contains('e-dropdown-btn') ||\n e.target.getAttribute('id') === this.parent.getID() + '_toolbar_CreateTable') {\n e.target.setAttribute('tabindex', '0');\n }\n };\n Toolbar.prototype.toolbarClickHandler = function (e) {\n var trg = closest(e.originalEvent.target, '.e-hor-nav');\n if (trg && this.parent.toolbarSettings.type === ToolbarType.Expand && !isNOU(trg)) {\n var extendedTbar = this.tbElement.querySelector('.e-toolbar-extended');\n if (!isNOU(extendedTbar)) {\n setStyleAttribute(extendedTbar, { maxHeight: '', display: 'block' });\n setStyleAttribute(extendedTbar, { maxHeight: extendedTbar.offsetHeight + 'px', display: '' });\n }\n if (!trg.classList.contains('e-nav-active')) {\n removeClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);\n this.parent.setContentHeight('toolbar', false);\n }\n else {\n addClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);\n this.parent.setContentHeight('toolbar', true);\n }\n }\n else if (Browser.isDevice || this.parent.inlineMode.enable) {\n this.isToolbar = true;\n }\n if (isNOU(trg) && this.parent.toolbarSettings.type === ToolbarType.Expand) {\n removeClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);\n }\n };\n Toolbar.prototype.wireEvents = function () {\n if (this.parent.inlineMode.enable && isIDevice()) {\n return;\n }\n EventHandler.add(this.tbElement, 'focusin', this.tbFocusHandler, this);\n EventHandler.add(this.tbElement, 'keydown', this.tbKeydownHandler, this);\n };\n Toolbar.prototype.unWireEvents = function () {\n EventHandler.remove(this.tbElement, 'focusin', this.tbFocusHandler);\n EventHandler.remove(this.tbElement, 'keydown', this.tbKeydownHandler);\n };\n Toolbar.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.dropDownModule = new DropDownButtons(this.parent, this.locator);\n this.toolbarActionModule = new ToolbarAction(this.parent);\n this.parent.on(events.initialEnd, this.renderToolbar, this);\n this.parent.on(events.scroll, this.scrollHandler, this);\n this.parent.on(events.bindOnEnd, this.toolbarBindEvent, this);\n this.parent.on(events.toolbarUpdated, this.updateToolbarStatus, this);\n this.parent.on(events.modelChanged, this.onPropertyChanged, this);\n this.parent.on(events.refreshBegin, this.onRefresh, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.enableFullScreen, this.fullScreen, this);\n this.parent.on(events.disableFullScreen, this.hideScreen, this);\n this.parent.on(events.updateToolbarItem, this.updateItem, this);\n this.parent.on(events.beforeDropDownOpen, this.dropDownBeforeOpenHandler, this);\n this.parent.on(events.expandPopupClick, this.parent.setContentHeight, this.parent);\n this.parent.on(events.focusChange, this.focusChangeHandler, this);\n this.parent.on(events.mouseDown, this.mouseDownHandler, this);\n this.parent.on(events.sourceCodeMouseDown, this.mouseDownHandler, this);\n this.parent.on(events.bindCssClass, this.setCssClass, this);\n this.parent.on(events.moduleDestroy, this.moduleDestroy, this);\n if (!this.parent.inlineMode.enable && !isIDevice()) {\n this.parent.on(events.toolbarClick, this.toolbarClickHandler, this);\n }\n };\n Toolbar.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.initialEnd, this.renderToolbar);\n this.parent.off(events.scroll, this.scrollHandler);\n this.parent.off(events.bindOnEnd, this.toolbarBindEvent);\n this.parent.off(events.toolbarUpdated, this.updateToolbarStatus);\n this.parent.off(events.modelChanged, this.onPropertyChanged);\n this.parent.off(events.refreshBegin, this.onRefresh);\n this.parent.off(events.destroy, this.destroy);\n this.parent.off(events.enableFullScreen, this.parent.fullScreenModule.showFullScreen);\n this.parent.off(events.disableFullScreen, this.parent.fullScreenModule.hideFullScreen);\n this.parent.off(events.updateToolbarItem, this.updateItem);\n this.parent.off(events.beforeDropDownOpen, this.dropDownBeforeOpenHandler);\n this.parent.off(events.expandPopupClick, this.parent.setContentHeight);\n this.parent.off(events.focusChange, this.focusChangeHandler);\n this.parent.off(events.mouseDown, this.mouseDownHandler);\n this.parent.off(events.sourceCodeMouseDown, this.mouseDownHandler);\n this.parent.off(events.bindCssClass, this.setCssClass);\n this.parent.off(events.moduleDestroy, this.moduleDestroy);\n if (!this.parent.inlineMode.enable && !isIDevice()) {\n this.parent.off(events.toolbarClick, this.toolbarClickHandler);\n }\n };\n // eslint-disable-next-line @typescript-eslint/tslint/config\n Toolbar.prototype.setCssClass = function (e) {\n if (this.toolbarObj && e.cssClass) {\n if (isNullOrUndefined(e.oldCssClass)) {\n this.toolbarObj.setProperties({ cssClass: (this.toolbarObj.cssClass + ' ' + e.cssClass).trim() });\n }\n else {\n this.toolbarObj.setProperties({ cssClass: (this.toolbarObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });\n }\n }\n };\n Toolbar.prototype.onRefresh = function () {\n if (!this.parent.inlineMode.enable) {\n this.refreshToolbarOverflow();\n }\n this.parent.setContentHeight('', true);\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {RichTextEditorModel} e - specifies the string value\n * @returns {void}\n * @hidden\n\n */\n Toolbar.prototype.onPropertyChanged = function (e) {\n if (!isNullOrUndefined(e.newProp.inlineMode)) {\n for (var _i = 0, _a = Object.keys(e.newProp.inlineMode); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'enable':\n this.refreshToolbar();\n break;\n }\n }\n }\n if (e.module !== this.getModuleName()) {\n return;\n }\n this.refreshToolbar();\n };\n Toolbar.prototype.refreshToolbar = function () {\n if (isNullOrUndefined(this.baseToolbar.toolbarObj)) {\n this.baseToolbar = this.parent.getBaseToolbarObject();\n }\n var tbWrapper = select('.' + classes.CLS_TB_WRAP, this.parent.element);\n var tbElement = select('.' + classes.CLS_TOOLBAR, this.parent.element);\n if (tbElement || tbWrapper) {\n this.destroyToolbar();\n }\n if (this.parent.toolbarSettings.enable) {\n this.addEventListener();\n this.renderToolbar();\n this.parent.wireScrollElementsEvents();\n if (!select('.e-rte-srctextarea', this.parent.element)) {\n updateUndoRedoStatus(this.baseToolbar, this.parent.formatter.editorManager.undoRedoManager.getUndoStatus());\n }\n this.parent.notify(events.dynamicModule, {});\n }\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {void}\n * @hidden\n */\n Toolbar.prototype.getModuleName = function () {\n return 'toolbar';\n };\n return Toolbar;\n}());\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 { Component, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';\nimport { Event, EventHandler, isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { addClass, detach, getUniqueID, isRippleEnabled, removeClass, rippleEffect, closest } from '@syncfusion/ej2-base';\nimport { wrapperInitialize, rippleMouseHandler, setHiddenInput } from './../common/common';\nvar CHECK = 'e-check';\nvar DISABLED = 'e-checkbox-disabled';\nvar FRAME = 'e-frame';\nvar INDETERMINATE = 'e-stop';\nvar LABEL = 'e-label';\nvar RIPPLE = 'e-ripple-container';\nvar RIPPLECHECK = 'e-ripple-check';\nvar RIPPLEINDETERMINATE = 'e-ripple-stop';\nvar RTL = 'e-rtl';\nvar WRAPPER = 'e-checkbox-wrapper';\nvar containerAttr = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value'];\n/**\n * The CheckBox is a graphical user interface element that allows you to select one or more options from the choices.\n * It contains checked, unchecked, and indeterminate states.\n * ```html\n *
\n * \n * ```\n */\nvar CheckBox = /** @class */ (function (_super) {\n __extends(CheckBox, _super);\n /**\n * Constructor for creating the widget\n *\n * @private\n * @param {CheckBoxModel} options - Specifies checkbox model\n * @param {string | HTMLInputElement} element - Specifies target element\n */\n function CheckBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isFocused = false;\n _this.isMouseClick = false;\n _this.clickTriggered = false;\n _this.validCheck = true;\n return _this;\n }\n CheckBox.prototype.changeState = function (state, isInitialize) {\n var ariaState;\n var rippleSpan;\n var frameSpan = this.getWrapper().getElementsByClassName(FRAME)[0];\n if (isRippleEnabled) {\n rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n }\n if (state === 'check') {\n frameSpan.classList.remove(INDETERMINATE);\n frameSpan.classList.add(CHECK);\n if (rippleSpan) {\n rippleSpan.classList.remove(RIPPLEINDETERMINATE);\n rippleSpan.classList.add(RIPPLECHECK);\n }\n ariaState = 'true';\n this.element.checked = true;\n if (this.element.required && this.validCheck && !isInitialize) {\n this.element.checked = false;\n this.validCheck = false;\n }\n else if (this.element.required) {\n this.validCheck = true;\n }\n }\n else if (state === 'uncheck') {\n removeClass([frameSpan], [CHECK, INDETERMINATE]);\n if (rippleSpan) {\n removeClass([rippleSpan], [RIPPLECHECK, RIPPLEINDETERMINATE]);\n }\n ariaState = 'false';\n this.element.checked = false;\n if (this.element.required && this.validCheck && !isInitialize) {\n this.element.checked = true;\n this.validCheck = false;\n }\n else if (this.element.required) {\n this.validCheck = true;\n }\n }\n else {\n frameSpan.classList.remove(CHECK);\n frameSpan.classList.add(INDETERMINATE);\n if (rippleSpan) {\n rippleSpan.classList.remove(RIPPLECHECK);\n rippleSpan.classList.add(RIPPLEINDETERMINATE);\n }\n ariaState = 'mixed';\n this.element.indeterminate = true;\n }\n };\n CheckBox.prototype.clickHandler = function (event) {\n if (event.target.tagName === 'INPUT' && this.clickTriggered) {\n if (this.isVue) {\n this.changeState(this.checked ? 'check' : 'uncheck');\n }\n this.clickTriggered = false;\n return;\n }\n if (event.target.tagName === 'SPAN' || event.target.tagName === 'LABEL') {\n this.clickTriggered = true;\n }\n if (this.isMouseClick) {\n this.focusOutHandler();\n this.isMouseClick = false;\n }\n if (this.indeterminate) {\n this.changeState(this.checked ? 'check' : 'uncheck');\n this.indeterminate = false;\n this.element.indeterminate = false;\n }\n else if (this.checked) {\n this.changeState('uncheck');\n this.checked = false;\n }\n else {\n this.changeState('check');\n this.checked = true;\n }\n var changeEventArgs = { checked: this.updateVueArrayModel(false), event: event };\n this.trigger('change', changeEventArgs);\n event.stopPropagation();\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n CheckBox.prototype.destroy = function () {\n var _this = this;\n var wrapper = this.getWrapper();\n _super.prototype.destroy.call(this);\n if (this.wrapper) {\n wrapper = this.wrapper;\n if (!this.disabled) {\n this.unWireEvents();\n }\n if (this.tagName === 'INPUT') {\n if (this.getWrapper() && wrapper.parentNode) {\n wrapper.parentNode.insertBefore(this.element, wrapper);\n }\n detach(wrapper);\n this.element.checked = false;\n if (this.indeterminate) {\n this.element.indeterminate = false;\n }\n ['name', 'value', 'disabled'].forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n }\n else {\n ['class'].forEach(function (key) {\n wrapper.removeAttribute(key);\n });\n wrapper.innerHTML = '';\n }\n }\n };\n CheckBox.prototype.focusHandler = function () {\n this.isFocused = true;\n };\n CheckBox.prototype.focusOutHandler = function () {\n var wrapper = this.getWrapper();\n if (wrapper) {\n wrapper.classList.remove('e-focus');\n }\n this.isFocused = false;\n };\n /**\n * Gets the module name.\n *\n * @private\n * @returns {string} - Module Name\n */\n CheckBox.prototype.getModuleName = function () {\n return 'checkbox';\n };\n /**\n * Gets the properties to be maintained in the persistence state.\n *\n * @private\n * @returns {string} - Persist Data\n */\n CheckBox.prototype.getPersistData = function () {\n return this.addOnPersist(['checked', 'indeterminate']);\n };\n CheckBox.prototype.getWrapper = function () {\n if (this.element && this.element.parentElement) {\n return this.element.parentElement.parentElement;\n }\n else {\n return null;\n }\n };\n CheckBox.prototype.initialize = function () {\n if (isNullOrUndefined(this.initialCheckedValue)) {\n this.initialCheckedValue = this.checked;\n }\n if (this.name) {\n this.element.setAttribute('name', this.name);\n }\n if (this.value) {\n this.element.setAttribute('value', this.value);\n if (this.isVue && typeof this.value === 'boolean' && this.value === true) {\n this.setProperties({ 'checked': true }, true);\n }\n }\n if (this.checked) {\n this.changeState('check', true);\n }\n if (this.indeterminate) {\n this.changeState();\n }\n if (this.disabled) {\n this.setDisabled();\n }\n };\n CheckBox.prototype.initWrapper = function () {\n var wrapper = this.element.parentElement;\n if (!wrapper.classList.contains(WRAPPER)) {\n wrapper = this.createElement('div', {\n className: WRAPPER\n });\n this.element.parentNode.insertBefore(wrapper, this.element);\n }\n var label = this.createElement('label', { attrs: { for: this.element.id } });\n var frameSpan = this.createElement('span', { className: 'e-icons ' + FRAME });\n wrapper.classList.add('e-wrapper');\n if (this.enableRtl) {\n wrapper.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n wrapper.appendChild(label);\n label.appendChild(this.element);\n setHiddenInput(this, label);\n label.appendChild(frameSpan);\n if (isRippleEnabled) {\n var rippleSpan = this.createElement('span', { className: RIPPLE });\n if (this.labelPosition === 'Before') {\n label.appendChild(rippleSpan);\n }\n else {\n label.insertBefore(rippleSpan, frameSpan);\n }\n rippleEffect(rippleSpan, { duration: 400, isCenterRipple: true });\n }\n if (this.label) {\n this.setText(this.label);\n }\n };\n CheckBox.prototype.keyUpHandler = function () {\n if (this.isFocused) {\n this.getWrapper().classList.add('e-focus');\n }\n };\n CheckBox.prototype.labelMouseDownHandler = function (e) {\n this.isMouseClick = true;\n var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n rippleMouseHandler(e, rippleSpan);\n };\n CheckBox.prototype.labelMouseUpHandler = function (e) {\n this.isMouseClick = true;\n var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n if (rippleSpan) {\n var rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');\n for (var i = 0; i < rippleElem.length - 1; i++) {\n rippleSpan.removeChild(rippleSpan.childNodes[i]);\n }\n rippleMouseHandler(e, rippleSpan);\n }\n };\n /**\n * Called internally if any of the property value changes.\n *\n * @private\n * @param {CheckBoxModel} newProp - Specifies new Properties\n * @param {CheckBoxModel} oldProp - Specifies old Properties\n *\n * @returns {void}\n */\n CheckBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n var wrapper = this.getWrapper();\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 this.indeterminate = false;\n this.element.indeterminate = false;\n this.changeState(newProp.checked ? 'check' : 'uncheck');\n break;\n case 'indeterminate':\n if (newProp.indeterminate) {\n this.changeState();\n }\n else {\n this.element.indeterminate = false;\n this.changeState(this.checked ? 'check' : 'uncheck');\n }\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.setDisabled();\n this.wrapper = this.getWrapper();\n this.unWireEvents();\n }\n else {\n this.element.disabled = false;\n wrapper.classList.remove(DISABLED);\n wrapper.setAttribute('aria-disabled', 'false');\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([wrapper], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([wrapper], newProp.cssClass.replace(/\\s+/g, ' ').trim().split(' '));\n }\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n wrapper.classList.add(RTL);\n }\n else {\n wrapper.classList.remove(RTL);\n }\n break;\n case 'label':\n this.setText(newProp.label);\n break;\n case 'labelPosition': {\n var label = wrapper.getElementsByClassName(LABEL)[0];\n var labelWrap = wrapper.getElementsByTagName('label')[0];\n detach(label);\n if (newProp.labelPosition === 'After') {\n labelWrap.appendChild(label);\n }\n else {\n labelWrap.insertBefore(label, wrapper.getElementsByClassName(FRAME)[0]);\n }\n break;\n }\n case 'name':\n this.element.setAttribute('name', newProp.name);\n break;\n case 'value':\n if (this.isVue && typeof newProp.value === 'object') {\n break;\n }\n this.element.setAttribute('value', newProp.value);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToWrapper();\n break;\n }\n }\n };\n /**\n * Initialize Angular, React and Unique ID support.\n *\n * @private\n * @returns {void}\n */\n CheckBox.prototype.preRender = function () {\n var element = this.element;\n this.tagName = this.element.tagName;\n element = wrapperInitialize(this.createElement, 'EJS-CHECKBOX', 'checkbox', element, WRAPPER, 'checkbox');\n this.element = element;\n if (this.element.getAttribute('type') !== 'checkbox') {\n this.element.setAttribute('type', 'checkbox');\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n };\n /**\n * Initialize the control rendering.\n *\n * @private\n * @returns {void}\n */\n CheckBox.prototype.render = function () {\n this.initWrapper();\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.updateHtmlAttributeToWrapper();\n this.updateVueArrayModel(true);\n this.renderComplete();\n this.wrapper = this.getWrapper();\n };\n CheckBox.prototype.setDisabled = function () {\n var wrapper = this.getWrapper();\n this.element.disabled = true;\n wrapper.classList.add(DISABLED);\n wrapper.setAttribute('aria-disabled', 'true');\n };\n CheckBox.prototype.setText = function (text) {\n var wrapper = this.getWrapper();\n if (!wrapper) {\n return;\n }\n var label = wrapper.getElementsByClassName(LABEL)[0];\n if (label) {\n label.textContent = text;\n }\n else {\n text = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(text) : text;\n label = this.createElement('span', { className: LABEL, innerHTML: text });\n var labelWrap = wrapper.getElementsByTagName('label')[0];\n if (this.labelPosition === 'Before') {\n labelWrap.insertBefore(label, wrapper.getElementsByClassName(FRAME)[0]);\n }\n else {\n labelWrap.appendChild(label);\n }\n }\n };\n CheckBox.prototype.changeHandler = function (e) {\n e.stopPropagation();\n };\n CheckBox.prototype.formResetHandler = function () {\n this.checked = this.initialCheckedValue;\n this.element.checked = this.initialCheckedValue;\n };\n CheckBox.prototype.unWireEvents = function () {\n var wrapper = this.wrapper;\n EventHandler.remove(wrapper, 'click', this.clickHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n var label = wrapper.getElementsByTagName('label')[0];\n EventHandler.remove(label, 'mousedown', this.labelMouseDownHandler);\n EventHandler.remove(label, 'mouseup', this.labelMouseUpHandler);\n var formElem = closest(this.element, 'form');\n if (formElem) {\n EventHandler.remove(formElem, 'reset', this.formResetHandler);\n }\n if (this.tagName === 'EJS-CHECKBOX') {\n EventHandler.remove(this.element, 'change', this.changeHandler);\n }\n };\n CheckBox.prototype.wireEvents = function () {\n var wrapper = this.getWrapper();\n EventHandler.add(wrapper, 'click', this.clickHandler, 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 label = wrapper.getElementsByTagName('label')[0];\n EventHandler.add(label, 'mousedown', this.labelMouseDownHandler, this);\n EventHandler.add(label, 'mouseup', this.labelMouseUpHandler, this);\n var formElem = closest(this.element, 'form');\n if (formElem) {\n EventHandler.add(formElem, 'reset', this.formResetHandler, this);\n }\n if (this.tagName === 'EJS-CHECKBOX') {\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n }\n };\n CheckBox.prototype.updateVueArrayModel = function (init) {\n if (this.isVue && typeof this.value === 'object') {\n var value = this.element.value;\n if (value && this.value) {\n if (init) {\n for (var i = 0; i < this.value.length; i++) {\n if (value === this.value[i]) {\n this.changeState('check');\n this.setProperties({ 'checked': true }, true);\n }\n }\n }\n else {\n var index = this.value.indexOf(value);\n if (this.checked) {\n if (index < 0) {\n this.value.push(value);\n }\n }\n else {\n if (index > -1) {\n this.value.splice(index, 1);\n }\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return this.value;\n }\n }\n }\n return this.validCheck ? this.element.checked : !this.element.checked;\n };\n CheckBox.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 (containerAttr.indexOf(key) > -1) {\n var wrapper = this.getWrapper();\n if (key === 'class') {\n addClass([wrapper], this.htmlAttributes[\"\" + key].split(' '));\n }\n else if (key === 'title') {\n wrapper.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n else if (key === 'style') {\n var frameSpan = this.getWrapper().getElementsByClassName(FRAME)[0];\n frameSpan.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n else if (key === 'disabled') {\n if (this.htmlAttributes[\"\" + key] === 'true') {\n this.setDisabled();\n }\n this.element.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n else {\n this.element.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n }\n };\n /**\n * Click the CheckBox element\n * its native method\n *\n * @public\n * @returns {void}\n */\n CheckBox.prototype.click = function () {\n this.element.click();\n };\n /**\n * Sets the focus to CheckBox\n * its native method\n *\n * @public\n * @returns {void}\n */\n CheckBox.prototype.focusIn = function () {\n this.element.focus();\n };\n __decorate([\n Event()\n ], CheckBox.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], CheckBox.prototype, \"created\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"checked\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"disabled\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"indeterminate\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"label\", void 0);\n __decorate([\n Property('After')\n ], CheckBox.prototype, \"labelPosition\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"name\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"value\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property({})\n ], CheckBox.prototype, \"htmlAttributes\", void 0);\n CheckBox = __decorate([\n NotifyPropertyChanges\n ], CheckBox);\n return CheckBox;\n}(Component));\nexport { CheckBox };\n","/**\n * Defines common util methods used by Rich Text Editor.\n */\nimport { isNullOrUndefined, Browser, createElement, detach } from '@syncfusion/ej2-base';\nvar inlineNode = ['a', 'abbr', 'acronym', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button',\n 'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'font', 'i', 'iframe', 'img', 'input',\n 'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress',\n 'q', 'ruby', 's', 'samp', 'script', 'select', 'slot', 'small', 'span', 'strong', 'strike', 'sub', 'sup', 'svg',\n 'template', 'textarea', 'time', 'u', 'tt', 'var', 'video', 'wbr'];\n/**\n * @returns {void}\n * @hidden\n */\nexport function isIDevice() {\n var result = false;\n if (Browser.isDevice && Browser.isIos) {\n result = true;\n }\n return result;\n}\n/**\n * @param {Element} editableElement - specifies the editable element.\n * @param {string} selector - specifies the string values.\n * @returns {void}\n * @hidden\n */\nexport function setEditFrameFocus(editableElement, selector) {\n if (editableElement.nodeName === 'BODY' && !isNullOrUndefined(selector)) {\n var iframe = top.window.document.querySelector(selector);\n if (!isNullOrUndefined(iframe)) {\n iframe.contentWindow.focus();\n }\n }\n}\n/**\n * @param {string} value - specifies the string value\n * @returns {void}\n * @hidden\n */\nexport function updateTextNode(value, enterAction) {\n var tempNode = document.createElement('div');\n tempNode.innerHTML = value;\n tempNode.setAttribute('class', 'tempDiv');\n var resultElm = document.createElement('div');\n var childNodes = tempNode.childNodes;\n if (childNodes.length > 0) {\n var isPreviousInlineElem = void 0;\n var previousParent = void 0;\n var paraElm = void 0;\n while (tempNode.firstChild) {\n if ((tempNode.firstChild.nodeName === '#text' &&\n (tempNode.firstChild.textContent.indexOf('\\n') < 0 || tempNode.firstChild.textContent.trim() !== '')) ||\n inlineNode.indexOf(tempNode.firstChild.nodeName.toLocaleLowerCase()) >= 0) {\n if (!isPreviousInlineElem) {\n if (enterAction === 'BR') {\n resultElm.appendChild(tempNode.firstChild);\n previousParent = resultElm;\n }\n else {\n paraElm = createElement('p');\n resultElm.appendChild(paraElm);\n paraElm.appendChild(tempNode.firstChild);\n previousParent = paraElm;\n isPreviousInlineElem = true;\n }\n }\n else {\n previousParent.appendChild(tempNode.firstChild);\n previousParent = paraElm;\n isPreviousInlineElem = true;\n }\n }\n else if (tempNode.firstChild.nodeName === '#text' && (tempNode.firstChild.textContent === '\\n' ||\n (tempNode.firstChild.textContent.indexOf('\\n') >= 0 && tempNode.firstChild.textContent.trim() === ''))) {\n detach(tempNode.firstChild);\n }\n else {\n resultElm.appendChild(tempNode.firstChild);\n isPreviousInlineElem = false;\n }\n }\n var tableElm = resultElm.querySelectorAll('table');\n for (var i = 0; i < tableElm.length; i++) {\n if (tableElm[i].getAttribute('border') === '0') {\n tableElm[i].removeAttribute('border');\n }\n var tdElm = tableElm[i].querySelectorAll('td');\n for (var j = 0; j < tdElm.length; j++) {\n if (tdElm[j].style.borderLeft === 'none') {\n tdElm[j].style.removeProperty('border-left');\n }\n if (tdElm[j].style.borderRight === 'none') {\n tdElm[j].style.removeProperty('border-right');\n }\n if (tdElm[j].style.borderBottom === 'none') {\n tdElm[j].style.removeProperty('border-bottom');\n }\n if (tdElm[j].style.borderTop === 'none') {\n tdElm[j].style.removeProperty('border-top');\n }\n if (tdElm[j].style.border === 'none') {\n tdElm[j].style.removeProperty('border');\n }\n }\n if (!tableElm[i].classList.contains('e-rte-table')) {\n tableElm[i].classList.add('e-rte-table');\n }\n }\n var imageElm = resultElm.querySelectorAll('img');\n for (var i = 0; i < imageElm.length; i++) {\n if (!imageElm[i].classList.contains('e-rte-image')) {\n imageElm[i].classList.add('e-rte-image');\n }\n if (!(imageElm[i].classList.contains('e-imginline') ||\n imageElm[i].classList.contains('e-imgbreak'))) {\n imageElm[i].classList.add('e-imginline');\n }\n }\n }\n return resultElm.innerHTML;\n}\n/**\n * @param {Node} startChildNodes - specifies the node\n * @returns {void}\n * @hidden\n */\nexport function getLastTextNode(startChildNodes) {\n var finalNode = startChildNodes;\n do {\n if (finalNode.childNodes.length > 0) {\n finalNode = finalNode.childNodes[0];\n }\n } while (finalNode.childNodes.length > 0);\n return finalNode;\n}\n/**\n * @returns {void}\n * @hidden\n */\nexport function getDefaultHtmlTbStatus() {\n return {\n bold: false,\n italic: false,\n subscript: false,\n superscript: false,\n strikethrough: false,\n orderedlist: false,\n unorderedlist: false,\n underline: false,\n alignments: null,\n backgroundcolor: null,\n fontcolor: null,\n fontname: null,\n fontsize: null,\n formats: null,\n createlink: false,\n insertcode: false\n };\n}\n/**\n * @returns {void}\n * @hidden\n */\nexport function getDefaultMDTbStatus() {\n return {\n bold: false,\n italic: false,\n subscript: false,\n superscript: false,\n strikethrough: false,\n orderedlist: false,\n uppercase: false,\n lowercase: false,\n inlinecode: false,\n unorderedlist: false,\n formats: null\n };\n}\n","import { EventHandler, detach, isNullOrUndefined, select, extend, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';\nimport { closest, addClass, removeClass, Browser } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport { CLS_RTE_ELEMENTS } from '../base/classes';\nimport { CheckBox } from '@syncfusion/ej2-buttons';\nimport { RenderType } from '../base/enum';\nimport { dispatchEvent, parseHtml } from '../base/util';\nimport { isIDevice } from '../../common/util';\n/**\n * `Link` module is used to handle undo actions.\n */\nvar Link = /** @class */ (function () {\n function Link(parent, serviceLocator) {\n this.parent = parent;\n this.rteID = parent.element.id;\n this.i10n = serviceLocator.getService('rteLocale');\n this.addEventListener();\n this.serviceLocator = serviceLocator;\n this.rendererFactory = serviceLocator.getService('rendererFactory');\n this.dialogRenderObj = serviceLocator.getService('dialogRenderObject');\n }\n Link.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.insertLink, this.linkDialog, this);\n this.parent.on(events.showLinkDialog, this.showDialog, this);\n this.parent.on(events.closeLinkDialog, this.closeDialog, this);\n this.parent.on(events.keyDown, this.onKeyDown, this);\n this.parent.on(events.insertCompleted, this.showLinkQuickToolbar, this);\n this.parent.on(events.clearDialogObj, this.clearDialogObj, this);\n this.parent.on(events.linkToolbarAction, this.onToolbarAction, this);\n this.parent.on(events.iframeMouseDown, this.onIframeMouseDown, this);\n this.parent.on(events.unLink, this.removeLink, this);\n this.parent.on(events.editLink, this.editLink, this);\n this.parent.on(events.openLink, this.openLink, this);\n this.parent.on(events.editAreaClick, this.editAreaClickHandler, this);\n this.parent.on(events.bindCssClass, this.setCssClass, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.moduleDestroy, this.moduleDestroy, this);\n };\n Link.prototype.onToolbarAction = function (args) {\n var item = args.args.item;\n switch (item.subCommand) {\n case 'OpenLink':\n this.parent.notify(events.openLink, args);\n break;\n case 'EditLink':\n this.parent.notify(events.editLink, args);\n break;\n case 'RemoveLink':\n this.parent.notify(events.unLink, args);\n break;\n }\n };\n Link.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.insertLink, this.linkDialog);\n this.parent.off(events.showLinkDialog, this.showDialog);\n this.parent.off(events.closeLinkDialog, this.closeDialog);\n this.parent.off(events.keyDown, this.onKeyDown);\n this.parent.off(events.insertCompleted, this.showLinkQuickToolbar);\n this.parent.off(events.clearDialogObj, this.clearDialogObj);\n this.parent.off(events.linkToolbarAction, this.onToolbarAction);\n this.parent.off(events.unLink, this.removeLink);\n this.parent.off(events.iframeMouseDown, this.onIframeMouseDown);\n this.parent.off(events.editLink, this.editLink);\n this.parent.off(events.openLink, this.openLink);\n this.parent.off(events.editAreaClick, this.editAreaClickHandler);\n this.parent.off(events.bindCssClass, this.setCssClass);\n this.parent.off(events.destroy, this.destroy);\n this.parent.off(events.moduleDestroy, this.moduleDestroy);\n };\n Link.prototype.onIframeMouseDown = function () {\n if (this.dialogObj) {\n this.dialogObj.hide({ returnValue: true });\n }\n };\n Link.prototype.updateCss = function (currentObj, e) {\n if (currentObj && e.cssClass) {\n if (isNullOrUndefined(e.oldCssClass)) {\n currentObj.setProperties({ cssClass: (currentObj.cssClass + ' ' + e.cssClass).trim() });\n }\n else {\n currentObj.setProperties({ cssClass: (currentObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/tslint/config\n Link.prototype.setCssClass = function (e) {\n this.updateCss(this.checkBoxObj, e);\n this.updateCss(this.dialogObj, e);\n };\n Link.prototype.showLinkQuickToolbar = function (e) {\n if (!isNullOrUndefined(e.args) && e.args.action !== 'enter' &&\n e.args.action !== 'space') {\n var pageX = void 0;\n var pageY = void 0;\n if (e.type !== 'Links' || isNullOrUndefined(this.parent.quickToolbarModule) ||\n isNullOrUndefined(this.parent.quickToolbarModule.linkQTBar)) {\n return;\n }\n this.quickToolObj = this.parent.quickToolbarModule;\n var parentTop = this.parent.element.getBoundingClientRect().top;\n var parentLeft = this.parent.element.getBoundingClientRect().left;\n var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());\n var target_1;\n [].forEach.call(e.elements, function (element, index) {\n if (index === 0) {\n target_1 = ((element.nodeName === '#text') ? (element.parentNode) : element);\n }\n });\n if (e.isNotify) {\n var tbElement = this.parent.toolbarModule.getToolbarElement();\n var linkTop = target_1.getBoundingClientRect().top;\n var linkLeft = target_1.getBoundingClientRect().left;\n var linkPos = linkTop - parentTop;\n var tbHeight = (tbElement) ? (tbElement.offsetHeight + this.parent.toolbarModule.getExpandTBarPopHeight()) : 0;\n pageX = (this.parent.iframeSettings.enable) ? parentLeft + linkLeft : target_1.getBoundingClientRect().left;\n pageY = window.pageYOffset + ((this.parent.iframeSettings.enable) ?\n (parentTop + tbHeight + linkTop) : (parentTop + linkPos));\n }\n else {\n var args = void 0;\n args = e.args.touches ? e.args.changedTouches[0] : args = e.args;\n pageX = (this.parent.iframeSettings.enable) ? window.pageXOffset + parentLeft + args.clientX : args.pageX;\n pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset + parentTop + args.clientY : args.pageY;\n }\n if (this.quickToolObj.linkQTBar) {\n this.quickToolObj.linkQTBar.showPopup(pageX, pageY, range.endContainer);\n }\n }\n };\n Link.prototype.hideLinkQuickToolbar = function () {\n if (this.quickToolObj && this.quickToolObj.linkQTBar && document.body.contains(this.quickToolObj.linkQTBar.element)) {\n this.quickToolObj.linkQTBar.hidePopup();\n }\n };\n Link.prototype.editAreaClickHandler = function (e) {\n if (this.parent.readonly) {\n this.hideLinkQuickToolbar();\n return;\n }\n var args = e.args;\n var showOnRightClick = this.parent.quickToolbarSettings.showOnRightClick;\n if (args.which === 2 || (showOnRightClick && args.which === 1) || (!showOnRightClick && args.which === 3)) {\n return;\n }\n if (this.parent.editorMode === 'HTML' && this.parent.quickToolbarModule && this.parent.quickToolbarModule.linkQTBar) {\n this.quickToolObj = this.parent.quickToolbarModule;\n var target = args.target;\n target = this.getAnchorNode(target);\n this.contentModule = this.rendererFactory.getRenderer(RenderType.Content);\n var isPopupOpen = this.quickToolObj.linkQTBar.element.classList.contains('e-rte-pop');\n if (target.nodeName === 'A' && (target.childNodes.length > 0 && target.childNodes[0].nodeName !== 'IMG') &&\n e.args.target.nodeName !== 'IMG' &&\n !isNOU(closest(this.parent.getRange().startContainer.parentElement, 'A')) && !isNOU(closest(this.parent.getRange().endContainer.parentElement, 'A'))) {\n if (isPopupOpen) {\n return;\n }\n this.showLinkQuickToolbar({\n args: args,\n isNotify: false,\n type: 'Links',\n elements: [args.target]\n });\n }\n else {\n this.hideLinkQuickToolbar();\n }\n }\n };\n Link.prototype.onKeyDown = function (event) {\n var originalEvent = event.args;\n switch (originalEvent.action) {\n case 'escape':\n if (!isNullOrUndefined(this.dialogObj)) {\n this.dialogObj.close();\n }\n break;\n case 'insert-link':\n this.openDialog(true, event);\n originalEvent.preventDefault();\n break;\n }\n };\n Link.prototype.openDialog = function (isInternal, event) {\n if (!isInternal) {\n this.parent.contentModule.getEditPanel().focus();\n }\n if (this.parent.editorMode === 'HTML') {\n var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());\n var save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());\n var selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);\n var selectParentEle = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);\n var eventArgs = {\n args: event ? event.args : {\n item: { command: 'Links', subCommand: 'CreateLink' },\n originalEvent: undefined\n },\n selectNode: selectNodeEle, selection: save, selectParent: selectParentEle\n };\n this.linkDialog(eventArgs);\n }\n else {\n var textArea = this.parent.contentModule.getEditPanel();\n this.parent.formatter.editorManager.markdownSelection.save(textArea.selectionStart, textArea.selectionEnd);\n this.linkDialog({\n args: {\n item: { command: 'Links', subCommand: 'Link' },\n originalEvent: event && event.args\n },\n member: 'link',\n text: this.parent.formatter.editorManager.markdownSelection.getSelectedText(this.parent.contentModule.getEditPanel()),\n module: 'Markdown',\n name: 'insertLink'\n });\n }\n };\n Link.prototype.showDialog = function () {\n this.openDialog(false);\n this.setCssClass({ cssClass: this.parent.cssClass });\n };\n Link.prototype.closeDialog = function () {\n if (this.dialogObj) {\n this.dialogObj.hide({ returnValue: true });\n }\n };\n Link.prototype.clearDialogObj = function () {\n if (this.dialogObj) {\n this.dialogObj.destroy();\n detach(this.dialogObj.element);\n this.dialogObj = null;\n }\n };\n Link.prototype.linkDialog = function (e, inputDetails) {\n var _this = this;\n if (this.dialogObj) {\n this.dialogObj.hide({ returnValue: true });\n return;\n }\n if (this.parent.editorMode === 'HTML' && (e.selectParent.length > 0 &&\n !isNullOrUndefined(e.selectParent[0].classList) &&\n e.selectParent[0].classList.contains('e-rte-anchor')) && isNullOrUndefined(inputDetails)) {\n this.editLink(e);\n return;\n }\n var linkWebAddress = this.i10n.getConstant('linkWebUrl');\n var linkDisplayText = this.i10n.getConstant('linkText');\n var linkTooltip = this.i10n.getConstant('linkTooltipLabel');\n var urlPlace = this.i10n.getConstant('linkurl');\n var textPlace = this.i10n.getConstant('textPlaceholder');\n var title = this.i10n.getConstant('linkTitle');\n var linkDialogEle = this.parent.createElement('div', {\n className: 'e-rte-link-dialog' + ' ' + this.parent.cssClass, id: this.rteID + '_rtelink'\n });\n this.parent.element.appendChild(linkDialogEle);\n var linkContent = this.parent.createElement('div', {\n className: 'e-rte-linkcontent' + ' ' + this.parent.cssClass, id: this.rteID + '_linkContent'\n });\n var htmlTextbox = (this.parent.editorMode === 'HTML') ? '
' +\n '
' +\n '
' + '
' +\n '
' : '';\n var content = '
' + '
' +\n '
' +\n '
' + '
' +\n '' +\n '
' + htmlTextbox;\n var contentElem = parseHtml(content);\n linkContent.appendChild(contentElem);\n var linkTarget = linkContent.querySelector('.e-rte-linkTarget');\n var linkUrl = linkContent.querySelector('.e-rte-linkurl');\n var linkText = linkContent.querySelector('.e-rte-linkText');\n var linkTitle = linkContent.querySelector('.e-rte-linkTitle');\n var linkOpenLabel = this.i10n.getConstant('linkOpenInNewWindow');\n this.checkBoxObj = new CheckBox({ label: linkOpenLabel, checked: true, enableRtl: this.parent.enableRtl,\n cssClass: this.parent.cssClass });\n this.checkBoxObj.isStringTemplate = true;\n this.checkBoxObj.createElement = this.parent.createElement;\n this.checkBoxObj.appendTo(linkTarget);\n var selectText = (this.parent.editorMode === 'HTML') ?\n e.selection.getRange(this.parent.contentModule.getDocument()).toString() : e.text;\n var linkInsert = this.i10n.getConstant('dialogInsert');\n var linkCancel = this.i10n.getConstant('dialogCancel');\n var selection = e.selection;\n var selectObj = { selfLink: this, selection: e.selection, selectParent: e.selectParent, args: e.args };\n var dialogModel = {\n header: this.i10n.getConstant('linkHeader'),\n content: linkContent,\n cssClass: CLS_RTE_ELEMENTS + ' ' + this.parent.cssClass,\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '310px',\n isModal: Browser.isDevice,\n buttons: [{\n click: this.insertlink.bind(selectObj),\n buttonModel: { content: linkInsert, cssClass: 'e-flat e-insertLink' + ' ' + this.parent.cssClass, isPrimary: true }\n },\n { click: this.cancelDialog.bind(selectObj), buttonModel: { cssClass: 'e-flat' + ' ' + this.parent.cssClass, content: linkCancel } }],\n target: (Browser.isDevice) ? document.body : this.parent.element,\n animationSettings: { effect: 'None' },\n close: function (event) {\n _this.parent.isBlur = false;\n if (event && event.event.returnValue) {\n if (_this.parent.editorMode === 'HTML') {\n selection.restore();\n }\n else {\n _this.parent.formatter.editorManager.markdownSelection.restore(_this.parent.contentModule.getEditPanel());\n }\n }\n _this.dialogObj.destroy();\n detach(_this.dialogObj.element);\n var args = _this.dialogObj;\n _this.dialogRenderObj.close(args);\n _this.dialogObj = null;\n }\n };\n // eslint-disable-next-line\n this.dialogObj = this.dialogRenderObj.render(dialogModel);\n this.dialogObj.createElement = this.parent.createElement;\n this.dialogObj.appendTo(linkDialogEle);\n linkDialogEle.style.maxHeight = 'inherit';\n if (isNullOrUndefined(this.dialogObj)) {\n return;\n }\n if (!isNullOrUndefined(inputDetails)) {\n linkUrl.value = inputDetails.url;\n linkText.value = inputDetails.text;\n linkTitle.value = inputDetails.title;\n // eslint-disable-next-line\n (inputDetails.target) ? this.checkBoxObj.checked = true : this.checkBoxObj.checked = false;\n this.dialogObj.header = inputDetails.header;\n this.dialogObj.element.querySelector('.e-insertLink').textContent = inputDetails.btnText;\n }\n this.checkUrl(false);\n if ((this.parent.editorMode === 'HTML' && isNullOrUndefined(inputDetails) && ((!isNullOrUndefined(selectText)\n && selectText !== '') && (e.selection.range.startOffset === 0) || e.selection.range.startOffset !==\n e.selection.range.endOffset)) || e.module === 'Markdown') {\n linkText.value = selectText;\n }\n EventHandler.add(this.parent.element.ownerDocument, 'mousedown', this.onDocumentClick, this);\n if (this.quickToolObj) {\n this.hideLinkQuickToolbar();\n if (this.quickToolObj.inlineQTBar && document.body.contains(this.quickToolObj.inlineQTBar.element)) {\n this.quickToolObj.inlineQTBar.hidePopup();\n }\n }\n };\n // eslint-disable-next-line\n Link.prototype.insertlink = function (e) {\n var linkEle = this.selfLink.dialogObj.element;\n var linkUrl = linkEle.querySelector('.e-rte-linkurl').value;\n var linkText = linkEle.querySelector('.e-rte-linkText').value;\n var linkTitle;\n if (this.selfLink.parent.editorMode === 'HTML') {\n linkTitle = linkEle.querySelector('.e-rte-linkTitle').value;\n }\n var target = (this.selfLink.checkBoxObj.checked) ? '_blank' : null;\n if (linkUrl === '') {\n this.selfLink.checkUrl(true);\n return;\n }\n if (!this.selfLink.isUrl(linkUrl)) {\n linkText = (linkText === '') ? linkUrl : linkText;\n if (!this.selfLink.parent.enableAutoUrl) {\n linkUrl = linkUrl.indexOf('http') > -1 ? linkUrl : 'http://' + linkUrl;\n }\n else {\n // eslint-disable-next-line\n linkUrl = linkUrl;\n }\n }\n else {\n this.selfLink.checkUrl(false);\n }\n var proxy = this.selfLink;\n if (proxy.parent.editorMode === 'HTML' && isNullOrUndefined(closest(this.selection.range.startContainer.parentNode, '[id='\n // eslint-disable-next-line\n + \"'\" + proxy.parent.contentModule.getPanel().id + \"'\" + ']'))) {\n proxy.parent.contentModule.getEditPanel().focus();\n if (Browser.isIE && proxy.parent.iframeSettings.enable) {\n this.selection.restore();\n }\n var range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());\n this.selection = proxy.parent.formatter.editorManager.nodeSelection.save(range, proxy.parent.contentModule.getDocument());\n this.selectParent = proxy.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);\n }\n var value = {\n url: linkUrl, text: linkText, title: linkTitle, target: target,\n selection: this.selection, selectParent: this.selectParent\n };\n if (document.body.contains(proxy.dialogObj.element)) {\n this.selfLink.dialogObj.hide({ returnValue: false });\n }\n if (isIDevice() && proxy.parent.iframeSettings.enable) {\n select('iframe', proxy.parent.element).contentWindow.focus();\n }\n if (proxy.parent.editorMode === 'HTML') {\n this.selection.restore();\n }\n if (proxy.parent.formatter.getUndoRedoStack().length === 0) {\n proxy.parent.formatter.saveData();\n }\n var argsValue;\n if (!isNullOrUndefined(this.args) &&\n this.args.code === 'KeyK') {\n var originalEvent = this.args;\n extend(this.args, { item: { command: 'Links', subCommand: 'CreateLink' }, originalEvent: originalEvent }, true);\n var argsVal = {\n item: { command: 'Links', subCommand: 'CreateLink' }, originalEvent: originalEvent\n };\n argsValue = argsVal;\n }\n else {\n argsValue = this.args;\n }\n this.selfLink.parent.formatter.process(this.selfLink.parent, argsValue, (!isNullOrUndefined(this.args) &&\n this.args.originalEvent), value);\n this.selfLink.parent.contentModule.getEditPanel().focus();\n };\n Link.prototype.isUrl = function (url) {\n // eslint-disable-next-line\n var regexp = /(ftp|http|https):\\/\\/(\\w+:{0,1}\\w*@)?(\\S+)(:[0-9]+)?(\\/|\\/([\\w#!:.?+=&%@!\\-\\/]))?/gi;\n return regexp.test(url);\n };\n Link.prototype.checkUrl = function (e) {\n var linkEle = this.dialogObj.element;\n var linkUrl = linkEle.querySelector('.e-rte-linkurl');\n if (e) {\n addClass([linkUrl], 'e-error');\n linkUrl.setSelectionRange(0, linkUrl.value.length);\n linkUrl.focus();\n }\n else {\n removeClass([linkUrl], 'e-error');\n }\n };\n Link.prototype.removeLink = function (e) {\n if (this.parent.formatter.getUndoRedoStack().length === 0) {\n this.parent.formatter.saveData();\n }\n var selectParentEle = this.getAnchorNode(e.selectParent[0]);\n this.parent.formatter.process(this.parent, e.args, e.args, {\n selectNode: e.selectNode, selectParent: e.selectParent, selection: e.selection,\n text: selectParentEle.innerText,\n subCommand: e.args.item.subCommand\n });\n if (isIDevice() && this.parent.iframeSettings.enable) {\n select('iframe', this.parent.element).contentWindow.focus();\n }\n else {\n this.parent.contentModule.getEditPanel().focus();\n }\n this.hideLinkQuickToolbar();\n };\n Link.prototype.openLink = function (e) {\n var selectParentEle = this.getAnchorNode(e.selectParent[0]);\n if (selectParentEle.classList.contains('e-rte-anchor') || selectParentEle.tagName === 'A') {\n this.parent.formatter.process(this.parent, e.args, e.args, {\n url: selectParentEle.href, text: selectParentEle.innerText,\n target: selectParentEle.target === '' ? '_self' : '_blank', selectNode: e.selectNode,\n subCommand: e.args.item.subCommand\n });\n }\n };\n Link.prototype.getAnchorNode = function (element) {\n var selectParent = closest(element, 'a');\n return (selectParent ? selectParent : element);\n };\n Link.prototype.editLink = function (e) {\n var selectedNode = this.getAnchorNode(e.selectNode[0]);\n var selectParentEle = this.getAnchorNode(e.selectParent[0]);\n selectParentEle = selectedNode.nodeName === 'A' ? selectedNode : selectParentEle;\n if (selectParentEle.classList.contains('e-rte-anchor') || selectParentEle.tagName === 'A') {\n var linkUpdate = this.i10n.getConstant('dialogUpdate');\n var inputDetails = {\n url: selectParentEle.getAttribute('href'), text: selectParentEle.innerText,\n title: selectParentEle.title, target: selectParentEle.target,\n header: this.i10n.getConstant('editLink'), btnText: linkUpdate\n };\n this.linkDialog(e, inputDetails);\n }\n };\n // eslint-disable-next-line\n Link.prototype.cancelDialog = function (e) {\n this.selfLink.parent.isBlur = false;\n this.selfLink.dialogObj.hide({ returnValue: true });\n if (isIDevice()) {\n this.selection.restore();\n }\n else {\n this.selfLink.parent.contentModule.getEditPanel().focus();\n }\n };\n Link.prototype.onDocumentClick = function (e) {\n var target = e.target;\n if (!isNullOrUndefined(this.dialogObj) && ((\n // eslint-disable-next-line\n !closest(target, '[id=' + \"'\" + this.dialogObj.element.id + \"'\" + ']') && this.parent.toolbarSettings.enable &&\n this.parent.getToolbarElement() && !this.parent.getToolbarElement().contains(e.target)) ||\n (((this.parent.getToolbarElement() && this.parent.getToolbarElement().contains(e.target)) ||\n this.parent.inlineMode.enable && !closest(target, '#' + this.dialogObj.element.id)) &&\n !closest(target, '#' + this.parent.getID() + '_toolbar_CreateLink') &&\n !target.querySelector('#' + this.parent.getID() + '_toolbar_CreateLink')))) {\n this.dialogObj.hide({ returnValue: true });\n EventHandler.remove(this.parent.element.ownerDocument, 'mousedown', this.onDocumentClick);\n this.parent.isBlur = true;\n dispatchEvent(this.parent.element, 'focusout');\n }\n };\n /**\n * Destroys the ToolBar.\n *\n * @function destroy\n * @returns {void}\n * @hidden\n\n */\n Link.prototype.destroy = function () {\n this.removeEventListener();\n };\n Link.prototype.moduleDestroy = function () {\n this.parent = null;\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {void}\n */\n Link.prototype.getModuleName = function () {\n return 'link';\n };\n return Link;\n}());\nexport { Link };\n","import { extend, isNullOrUndefined, Browser } from '@syncfusion/ej2-base';\nimport * as CONSTANT from '../base/constant';\nimport { updateUndoRedoStatus, isIDevice } from '../base/util';\nimport { KEY_DOWN, KEY_UP } from './../../common/constant';\n/**\n * Formatter\n *\n * @hidden\n\n */\nvar Formatter = /** @class */ (function () {\n function Formatter() {\n }\n /**\n * To execute the command\n *\n * @param {IRichTextEditor} self - specifies the self element.\n * @param {ActionBeginEventArgs} args - specifies the event arguments.\n * @param {MouseEvent|KeyboardEvent} event - specifies the keyboard event.\n * @param {IItemCollectionArgs} value - specifies the collection arguments\n * @returns {void}\n * @hidden\n\n */\n Formatter.prototype.process = function (self, args, event, value) {\n var _this = this;\n var selection = self.contentModule.getDocument().getSelection();\n var range = (selection.rangeCount > 0) ? selection.getRangeAt(selection.rangeCount - 1) : null;\n var saveSelection;\n if (self.editorMode === 'HTML') {\n saveSelection = this.editorManager.nodeSelection.save(range, self.contentModule.getDocument());\n }\n if (!isNullOrUndefined(args)\n && args.item.command\n && args.item.command !== 'Table'\n && args.item.command !== 'Actions'\n && args.item.command !== 'Links'\n && args.item.command !== 'Images'\n && args.item.command !== 'Files'\n && args.item.command !== 'Audios'\n && args.item.command !== 'Videos'\n && range\n && !(self.contentModule.getEditPanel().contains(this.getAncestorNode(range.commonAncestorContainer))\n || self.contentModule.getEditPanel() === range.commonAncestorContainer\n || self.contentModule.getPanel() === range.commonAncestorContainer)) {\n return;\n }\n if (!isNullOrUndefined(args) && self.maxLength !== -1 && !isNullOrUndefined(args.item.command)) {\n var currentInsertContentLength = 0;\n if (args.item.command === 'Links') {\n currentInsertContentLength = value.text.length === 0 ? value.url.length : value.text.length;\n }\n if (args.item.command === 'Images' || args.item.command === 'Videos' || args.item.command === 'Table' || args.item.command === 'Files') {\n currentInsertContentLength = 1;\n }\n var currentLength = self.getText().trim().length;\n var selectionLength = self.getSelection().length;\n var totalLength = (currentLength - selectionLength) + currentInsertContentLength;\n if (!(self.maxLength === -1 || totalLength <= self.maxLength)) {\n return;\n }\n }\n if (isNullOrUndefined(args)) {\n var action_1 = event.action;\n if (action_1 !== 'tab' && action_1 !== 'enter' && action_1 !== 'space' && action_1 !== 'escape') {\n args = {};\n if (self.editorMode === 'Markdown' && action_1 === 'insert-table') {\n value = {\n 'headingText': self.localeObj.getConstant('TableHeadingText'),\n 'colText': self.localeObj.getConstant('TableColText')\n };\n }\n var items = {\n originalEvent: event, cancel: false,\n requestType: action_1 || (event.key + 'Key'),\n itemCollection: value\n };\n extend(args, args, items, true);\n self.trigger(CONSTANT.actionBegin, args, function (actionBeginArgs) {\n if (actionBeginArgs.cancel) {\n if (action_1 === 'paste' || action_1 === 'cut' || action_1 === 'copy') {\n event.preventDefault();\n }\n }\n });\n }\n var isTableModule = isNullOrUndefined(self.tableModule) ? true : self.tableModule ?\n self.tableModule.ensureInsideTableList : false;\n if ((event.which === 9 && isTableModule) || event.which !== 9) {\n if (event.which === 13 && self.editorMode === 'HTML') {\n value = {\n 'enterAction': self.enterKey\n };\n }\n this.editorManager.observer.notify((event.type === 'keydown' ? KEY_DOWN : KEY_UP), {\n event: event,\n callBack: this.onSuccess.bind(this, self),\n value: value,\n enterAction: self.enterKey\n });\n }\n }\n else if (!isNullOrUndefined(args) && args.item.command && args.item.subCommand && ((args.item.command !== args.item.subCommand\n && args.item.command !== 'Font')\n || ((args.item.subCommand === 'FontName' || args.item.subCommand === 'FontSize') && args.name === 'dropDownSelect')\n || ((args.item.subCommand === 'BackgroundColor' || args.item.subCommand === 'FontColor')\n && args.name === 'colorPickerChanged'))) {\n extend(args, args, { requestType: args.item.subCommand, cancel: false, itemCollection: value, selectType: args.name }, true);\n self.trigger(CONSTANT.actionBegin, args, function (actionBeginArgs) {\n if (!actionBeginArgs.cancel) {\n if (_this.getUndoRedoStack().length === 0 && actionBeginArgs.item.command !== 'Links'\n && actionBeginArgs.item.command !== 'Images') {\n _this.saveData();\n }\n self.isBlur = false;\n self.contentModule.getEditPanel().focus();\n if (self.editorMode === 'HTML') {\n saveSelection.restore();\n }\n var command = actionBeginArgs.item.subCommand.toLocaleLowerCase();\n if (command === 'paste' || command === 'cut' || command === 'copy') {\n self.clipboardAction(command, event);\n }\n else {\n _this.editorManager.observer.notify(CONSTANT.checkUndo, { subCommand: actionBeginArgs.item.subCommand });\n _this.editorManager.execCommand(actionBeginArgs.item.command, actionBeginArgs.item.subCommand, event, _this.onSuccess.bind(_this, self), actionBeginArgs.item.value, actionBeginArgs.item.subCommand === 'Pre' && actionBeginArgs.selectType === 'dropDownSelect' ?\n { name: actionBeginArgs.selectType } : value, ('#' + self.getID() + ' iframe'), self.enterKey);\n }\n }\n });\n }\n if (isNullOrUndefined(event) || event && event.action !== 'copy') {\n this.enableUndo(self);\n }\n };\n Formatter.prototype.getAncestorNode = function (node) {\n node = node.nodeType === 3 ? node.parentNode : node;\n return node;\n };\n /**\n * onKeyHandler method\n *\n * @param {IRichTextEditor} self - specifies the self element.\n * @param {KeyboardEvent} e - specifies the keyboard event.\n * @returns {void}\n * @hidden\n\n */\n Formatter.prototype.onKeyHandler = function (self, e) {\n var _this = this;\n this.editorManager.observer.notify(KEY_UP, {\n event: e, callBack: function () {\n self.notify(CONSTANT.contentChanged, {});\n _this.enableUndo(self);\n }\n });\n };\n /**\n * onSuccess method\n *\n * @param {IRichTextEditor} self - specifies the self element.\n * @param {IMarkdownFormatterCallBack} events - specifies the event call back\n * @returns {void}\n * @hidden\n\n */\n Formatter.prototype.onSuccess = function (self, events) {\n self.notify(CONSTANT.contentChanged, {});\n if (events && (isNullOrUndefined(events.event) || events.event.action !== 'copy')) {\n this.enableUndo(self);\n self.notify(CONSTANT.execCommandCallBack, events);\n }\n self.trigger(CONSTANT.actionComplete, events, function (callbackArgs) {\n self.setPlaceHolder();\n if ((callbackArgs.requestType === 'Images' || callbackArgs.requestType === 'Links' || callbackArgs.requestType === 'Audios' || callbackArgs.requestType === 'Videos') && self.editorMode === 'HTML') {\n var args = callbackArgs;\n if (callbackArgs.requestType === 'Links' && callbackArgs.event &&\n callbackArgs.event.type === 'keydown' &&\n callbackArgs.event.keyCode === 32) {\n return;\n }\n self.notify(CONSTANT.insertCompleted, {\n args: args.event, type: callbackArgs.requestType, isNotify: true,\n elements: args.elements\n });\n }\n if (callbackArgs.requestType === 'VideosPlayPause') {\n self.notify('editAreaClick', { args: event });\n }\n self.autoResize();\n });\n };\n /**\n * Save the data for undo and redo action.\n *\n * @param {KeyboardEvent} e - specifies the keyboard event.\n * @returns {void}\n * @hidden\n\n */\n Formatter.prototype.saveData = function (e) {\n this.editorManager.undoRedoManager.saveData(e);\n };\n /**\n * getUndoStatus method\n *\n * @returns {void}\n * @hidden\n\n */\n Formatter.prototype.getUndoStatus = function () {\n return this.editorManager.undoRedoManager.getUndoStatus();\n };\n /* eslint-disable */\n /**\n * getUndoRedoStack method\n *\n * @param {IHtmlUndoRedoData} - specifies the redo data.\n * @returns {void}\n * @hidden\n\n */\n /* eslint-enable */\n Formatter.prototype.getUndoRedoStack = function () {\n return this.editorManager.undoRedoManager.undoRedoStack;\n };\n /**\n * enableUndo method\n *\n * @param {IRichTextEditor} self - specifies the self element.\n * @returns {void}\n * @hidden\n\n */\n Formatter.prototype.enableUndo = function (self) {\n var status = this.getUndoStatus();\n if (self.inlineMode.enable && (!Browser.isDevice || isIDevice())) {\n updateUndoRedoStatus(self.quickToolbarModule.inlineQTBar.quickTBarObj, status);\n }\n else {\n if (self.toolbarModule) {\n updateUndoRedoStatus(self.toolbarModule.baseToolbar, status);\n }\n }\n };\n return Formatter;\n}());\nexport { Formatter };\n","/**\n * Constant values for Markdown Parser\n */\n/**\n * List plugin events\n *\n * @hidden\n */\nexport var LISTS_COMMAND = 'lists-commands';\n/**\n * selectioncommand plugin events\n *\n * @hidden\n */\nexport var selectionCommand = 'command-type';\n/**\n * Link plugin events\n *\n * @hidden\n */\nexport var LINK_COMMAND = 'link-commands';\n/**\n * Clear plugin events\n *\n * @hidden\n */\nexport var CLEAR_COMMAND = 'clear-commands';\n/**\n * Table plugin events\n *\n * @hidden\n */\nexport var MD_TABLE = 'insert-table';\n/**\n * insertText plugin events\n *\n * @hidden\n */\nexport var INSERT_TEXT_COMMAND = 'insert-text';\n","import * as CONSTANT from './../base/constant';\nimport { extend } from '@syncfusion/ej2-base';\nimport * as EVENTS from './../../common/constant';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * Lists internal component\n *\n * @hidden\n */\nvar MDLists = /** @class */ (function () {\n /**\n * Constructor for creating the Lists plugin\n *\n * @param {IMDFormats} options - specifies the options\n * @hidden\n */\n function MDLists(options) {\n extend(this, this, options, true);\n this.selection = this.parent.markdownSelection;\n this.addEventListener();\n }\n MDLists.prototype.addEventListener = function () {\n this.parent.observer.on(CONSTANT.LISTS_COMMAND, this.applyListsHandler, this);\n this.parent.observer.on(EVENTS.KEY_DOWN_HANDLER, this.keyDownHandler, this);\n this.parent.observer.on(EVENTS.KEY_UP_HANDLER, this.keyUpHandler, this);\n };\n MDLists.prototype.keyDownHandler = function (event) {\n switch (event.event.which) {\n case 9:\n this.tabKey(event);\n break;\n }\n switch (event.event.action) {\n case 'ordered-list':\n this.applyListsHandler({ subCommand: 'OL', callBack: event.callBack });\n event.event.preventDefault();\n break;\n case 'unordered-list':\n this.applyListsHandler({ subCommand: 'UL', callBack: event.callBack });\n event.event.preventDefault();\n break;\n }\n };\n MDLists.prototype.keyUpHandler = function (event) {\n switch (event.event.which) {\n case 13:\n this.enterKey(event);\n break;\n }\n };\n MDLists.prototype.tabKey = function (event) {\n var textArea = this.parent.element;\n this.selection.save(textArea.selectionStart, textArea.selectionEnd);\n var start = textArea.selectionStart;\n var end = textArea.selectionEnd;\n var parents = this.selection.getSelectedParentPoints(textArea);\n var addedLength = 0;\n var isNotFirst = this.isNotFirstLine(textArea, parents[0]);\n if (!isNotFirst && !event.event.shiftKey) {\n this.restore(textArea, start, end + addedLength, event);\n return;\n }\n var listFormat = this.olListType();\n var regex = this.getListRegex();\n this.currentAction = this.getAction(parents[0].text);\n for (var i = 0; i < parents.length; i++) {\n // eslint-disable-next-line max-len\n var prevIndex = event.event.shiftKey ? parents[i].line - 1 : parents[i].line - 1;\n var prevLine = this.selection.getLine(textArea, prevIndex);\n if (prevLine && (!event.event.shiftKey && isNotFirst || (event.event.shiftKey))) {\n var prevLineSplit = prevLine.split('. ');\n var tabSpace = '\\t';\n var tabSpaceLength = event.event.shiftKey ? -tabSpace.length : tabSpace.length;\n var splitTab = parents[i].text.split('\\t');\n if (event.event.shiftKey && splitTab.length === 1) {\n break;\n }\n if (this.currentAction === 'OL' && /^\\d+$/.test(prevLineSplit[0].trim()) && listFormat) {\n event.event.preventDefault();\n parents[i].text = event.event.shiftKey ? splitTab.splice(1, splitTab.length).join('\\t') : tabSpace + parents[i].text;\n var curTabSpace = this.getTabSpace(parents[i].text);\n var prevTabSpace = this.getTabSpace(prevLine);\n var splitText = parents[i].text.split('. ');\n if (curTabSpace === prevTabSpace) {\n this.changeTextAreaValue(splitText, this.nextOrderedListValue(prevLineSplit[0].trim()), event, textArea, parents, i, end);\n }\n else if (prevTabSpace < curTabSpace) {\n this.changeTextAreaValue(splitText, '1. ', event, textArea, parents, i, end);\n }\n else {\n for (; prevTabSpace.length > curTabSpace.length; null) {\n prevIndex = prevIndex - 1;\n prevLine = this.selection.getLine(textArea, prevIndex);\n var prevLineSplit_1 = prevLine.trim().split('. ');\n if (/^\\d+$/.test(prevLineSplit_1[0])) {\n prevTabSpace = this.getTabSpace(prevLine);\n if (prevTabSpace.length <= curTabSpace.length) {\n this.changeTextAreaValue(splitText, this.nextOrderedListValue(prevLineSplit_1[0]), event, textArea, parents, i, end);\n break;\n }\n }\n }\n }\n }\n else if (this.currentAction === 'UL' && regex.test(prevLine.trim()) || !listFormat) {\n event.event.preventDefault();\n parents[i].text = event.event.shiftKey ? splitTab.splice(1, splitTab.length).join('\\t') : tabSpace + parents[i].text;\n textArea.value = textArea.value.substr(0, parents[i].start) + parents[i].text + '\\n' +\n textArea.value.substr(parents[i].end, textArea.value.length);\n }\n start = i === 0 ? start + tabSpaceLength : start;\n addedLength += tabSpaceLength;\n if (parents.length !== 1) {\n for (var j = i; j < parents.length; j++) {\n // eslint-disable-next-line max-len\n parents[j].start = j !== 0 ? parents[j].start + tabSpaceLength : parents[j].start;\n parents[j].end = parents[j].end + tabSpaceLength;\n }\n }\n }\n }\n this.restore(textArea, start, end + addedLength, event);\n };\n MDLists.prototype.changeTextAreaValue = function (splitText, prefixValue, event, \n // eslint-disable-next-line\n textArea, parents, k, end) {\n var prefix = prefixValue;\n splitText.splice(0, 1);\n var textAreaLength = this.selection.getAllParents(textArea.value).length;\n var changedList = '';\n var curTabSpace = this.getTabSpace(parents[k].text);\n // eslint-disable-next-line\n var prefixNumber = parseInt(prefix.split('.')[0], null);\n var nestedTabSpace = this.getTabSpace(parents[k].text);\n var nestedlistorder = true;\n var nestedListStart = true;\n var curTabSpaceLength;\n var nextPrefixValue = -1;\n var traversIncreased = true;\n var nextLineLength = 0;\n var lineBreak = '';\n changedList = (this.selection.getLine(textArea, parents[0].line + 1) !== '') ?\n '' : changedList + textArea.value.substr(parents[0].end, textArea.value.length);\n for (var i = 1; i < textAreaLength &&\n !isNullOrUndefined(this.selection.getLine(textArea, parents[0].line + i))\n && this.selection.getLine(textArea, parents[0].line + i) !== ''; i++) {\n var nextLine = this.selection.getLine(textArea, parents[0].line + i);\n var nextTabSpace = this.getTabSpace(nextLine);\n var nextLineSplit = nextLine.split('. ');\n if (nextLineSplit.length === 1) {\n changedList += textArea.value.substr(parents[0].end + nextLineLength, textArea.value.length);\n break;\n }\n else {\n nextLineLength += nextLine.length;\n var shiftTabTargetList = false;\n curTabSpaceLength = event.event.shiftKey ? curTabSpace.length + 1 : curTabSpace.length - 1;\n if (nextTabSpace.length > nestedTabSpace.length) {\n traversIncreased = false;\n }\n if (curTabSpace.length !== nextTabSpace.length && nextTabSpace.length < nestedTabSpace.length) {\n nestedListStart = true;\n nestedlistorder = false;\n shiftTabTargetList = event.event.shiftKey &&\n curTabSpace.length === nextTabSpace.length ? (nestedListStart = false, true) : false;\n }\n else if (traversIncreased && event.event.shiftKey &&\n curTabSpace.length === nextTabSpace.length && nextTabSpace.length === nestedTabSpace.length) {\n nestedListStart = false;\n shiftTabTargetList = true;\n }\n lineBreak = changedList === '' ? '' : '\\n';\n if (curTabSpaceLength === nextTabSpace.length && nestedListStart) {\n var nextPrefix = event.event.shiftKey ?\n (nextPrefixValue++, this.nextOrderedListValue(nextPrefixValue.toString()))\n : this.previousOrderedListValue(nextLineSplit[0]);\n nextLineSplit.splice(0, 1);\n changedList = changedList + lineBreak + nextTabSpace + nextPrefix + nextLineSplit.join('. ');\n }\n else if (curTabSpace.length === nextTabSpace.length && nestedlistorder || shiftTabTargetList) {\n var nextPrefix = this.nextOrderedListValue(prefixNumber.toString());\n prefixNumber++;\n nextLineSplit.splice(0, 1);\n changedList = changedList + lineBreak + nextTabSpace + nextPrefix + nextLineSplit.join('. ');\n }\n else {\n changedList = changedList + lineBreak + nextLine;\n nestedListStart = false;\n }\n nestedTabSpace = this.getTabSpace(nextLine);\n }\n }\n parents[k].text = this.getTabSpace(parents[k].text) + prefix + splitText.join('. ') + '\\n';\n textArea.value = textArea.value.substr(0, parents[k].start) + parents[k].text + changedList;\n };\n MDLists.prototype.getTabSpace = function (line) {\n var split = line.split('\\t');\n var tabs = '';\n for (var i = 0; i < split.length; i++) {\n if (split[i] === '') {\n tabs += '\\t';\n }\n else {\n break;\n }\n }\n return tabs;\n };\n MDLists.prototype.isNotFirstLine = function (textArea, points) {\n var currentLine = points.text;\n var prevIndex = points.line - 1;\n var prevLine = this.selection.getLine(textArea, prevIndex);\n var regex = this.getListRegex();\n var isNotFirst = false;\n var regexFirstCondition;\n if (prevLine) {\n this.currentAction = this.getAction(prevLine);\n var prevLineSplit = prevLine.split('. ');\n regexFirstCondition = this.currentAction === 'OL' ? /^\\d+$/.test(prevLineSplit[0].trim()) : regex.test(prevLine.trim());\n }\n if (prevLine && regexFirstCondition) {\n var curTabSpace = this.getTabSpace(currentLine);\n var prevTabSpace = this.getTabSpace(prevLine);\n isNotFirst = curTabSpace === prevTabSpace ? true : isNotFirst;\n for (; prevTabSpace.length > curTabSpace.length; null) {\n prevIndex = prevIndex - 1;\n prevLine = this.selection.getLine(textArea, prevIndex);\n var prevLineSplit = prevLine.trim().split('. ');\n var regexSecondCondition = this.currentAction === 'OL' ?\n /^\\d+$/.test(prevLineSplit[0]) : regex.test(prevLine.trim());\n if (regexSecondCondition) {\n prevTabSpace = this.getTabSpace(prevLine);\n if (prevTabSpace.length <= curTabSpace.length) {\n isNotFirst = true;\n break;\n }\n }\n }\n }\n return isNotFirst;\n };\n MDLists.prototype.getAction = function (line) {\n var ol = line.split('. ')[0];\n // eslint-disable-next-line\n var currentState = /^\\d+$/.test(ol.trim());\n // eslint-disable-next-line\n var ul = line.trim().split(new RegExp('^(' + this.selection.replaceSpecialChar(this.syntax.UL).trim() + ')'))[1];\n return (currentState ? 'OL' : ul ? 'UL' : 'NOTLIST');\n };\n MDLists.prototype.nextOrderedListValue = function (previousLine) {\n // eslint-disable-next-line\n var currentValue = parseInt(previousLine, null);\n var nextValue = currentValue + 1;\n return nextValue.toString() + '. ';\n };\n MDLists.prototype.previousOrderedListValue = function (previousLine) {\n // eslint-disable-next-line\n var currentValue = parseInt(previousLine, null);\n var nextValue = currentValue - 1;\n return nextValue.toString() + '. ';\n };\n MDLists.prototype.enterKey = function (event) {\n var textArea = this.parent.element;\n this.selection.save(textArea.selectionStart, textArea.selectionEnd);\n var start = textArea.selectionStart;\n var end = textArea.selectionEnd;\n var parents = this.selection.getSelectedParentPoints(textArea);\n var prevLine = this.selection.getLine(textArea, parents[0].line - 1);\n var listFormat = this.olListType();\n var regex = this.getListRegex();\n var prevLineSplit = [];\n if (!isNullOrUndefined(prevLine)) {\n prevLineSplit = prevLine.split('. ');\n this.currentAction = this.getAction(prevLine);\n }\n var addedLength = 0;\n if (this.currentAction === 'OL' && prevLineSplit.length > 1 && /^\\d+$/.test(prevLineSplit[0].trim()) && listFormat\n && prevLineSplit[1] !== '') {\n var tabSpace = this.getTabSpace(prevLine);\n this.currentAction = this.getAction(prevLine);\n var prefix = this.nextOrderedListValue(prevLineSplit[0]);\n parents[0].text = tabSpace + prefix + parents[0].text;\n var textAreaLength = this.selection.getAllParents(textArea.value).length;\n var changedList = '\\n';\n var curTabSpace = this.getTabSpace(prevLine);\n var nestedTabSpace = this.getTabSpace(parents[0].text);\n var nestedListOrder = true;\n for (var i = 1; i < textAreaLength &&\n textArea.value.substr(parents[0].end, textArea.value.length) !== ''; i++) {\n var nextLine = this.selection.getLine(textArea, parents[0].line + i);\n if (isNullOrUndefined(nextLine)) {\n changedList = changedList + '';\n }\n else {\n var nextLineSplit = nextLine.split('. ');\n var nextTabSpace = this.getTabSpace(nextLine);\n if (nextTabSpace.length < nestedTabSpace.length) {\n nestedListOrder = false;\n }\n if (nextLineSplit.length > 1 && /^\\d+$/.test(nextLineSplit[0].trim()) &&\n curTabSpace.length === nextTabSpace.length && nestedListOrder) {\n var nextPrefix = this.nextOrderedListValue(nextLineSplit[0]);\n nextLineSplit.splice(0, 1);\n changedList = changedList + nextTabSpace + nextPrefix + nextLineSplit.join('. ') + '\\n';\n }\n else {\n changedList = changedList + nextLine + '\\n';\n nestedTabSpace = this.getTabSpace(nextLine);\n }\n }\n }\n textArea.value = textArea.value.substr(0, parents[0].start) + curTabSpace +\n prefix + this.selection.getLine(textArea, parents[0].line) + changedList;\n start = start + prefix.length + tabSpace.length;\n addedLength += prefix.length + tabSpace.length;\n }\n else if (this.currentAction === 'UL' && (prevLine && regex.test(prevLine.trim())) &&\n prevLine.trim().replace(regex, '') !== '' || this.currentAction === 'OL' && !listFormat) {\n var tabSpace = this.getTabSpace(prevLine);\n var prefix = this.syntax[this.currentAction];\n parents[0].text = tabSpace + prefix + parents[0].text +\n (parents[0].text.trim().length > 0 ? '\\n' : '');\n textArea.value = textArea.value.substr(0, parents[0].start) + parents[0].text +\n textArea.value.substr(parents[0].end, textArea.value.length);\n start = start + prefix.length + tabSpace.length;\n addedLength += prefix.length + tabSpace.length;\n }\n this.restore(textArea, start, end + addedLength, event);\n };\n MDLists.prototype.olListType = function () {\n var olSyntaxList = this.syntax.OL.split('.,');\n var listType = olSyntaxList.length === 1 ? null :\n // eslint-disable-next-line\n parseInt(olSyntaxList[2].trim(), null) - parseInt(olSyntaxList[0].trim(), null);\n if (listType) {\n return 1;\n }\n else {\n return 0;\n }\n };\n MDLists.prototype.applyListsHandler = function (e) {\n var textArea = this.parent.element;\n this.selection.save(textArea.selectionStart, textArea.selectionEnd);\n this.currentAction = e.subCommand;\n var start = textArea.selectionStart;\n var end = textArea.selectionEnd;\n var addedLength = 0;\n var startLength = 0;\n var endLength = 0;\n var parents = this.selection.getSelectedParentPoints(textArea);\n var prefix = '';\n var listFormat = this.olListType();\n var regex;\n var perfixObj = {};\n for (var i = 0; i < parents.length; i++) {\n if (listFormat) {\n regex = this.currentAction === 'OL' ? i + listFormat + '. ' : this.syntax[this.currentAction];\n }\n else {\n regex = this.currentAction === 'OL' ? this.syntax.OL : this.syntax[this.currentAction];\n }\n if (!this.selection.isStartWith(parents[i].text, regex)) {\n if (parents[i].text === '' && i === 0) {\n this.selection.save(start, end);\n if (parents.length !== 1) {\n for (var j = i; j < parents.length; j++) {\n parents[j].start = j !== 0 ? 1 + parents[j].start : parents[j].start;\n parents[j].end = 1 + parents[j].end;\n }\n }\n }\n var preLineTabSpaceLength = !isNullOrUndefined(parents[i - 1]) ?\n this.getTabSpace(parents[i - 1].text).length : 0;\n var replace = this.appliedLine(parents[i].text, regex, perfixObj, preLineTabSpaceLength);\n prefix = replace.line ? prefix : regex;\n parents[i].text = replace.line ? replace.line : prefix + parents[i].text;\n replace.space = replace.space ? replace.space : 0;\n textArea.value = textArea.value.substr(0, parents[i].start + endLength) + parents[i].text + '\\n' +\n textArea.value.substr(parents[i].end, textArea.value.length);\n start = i === 0 ? (start + prefix.length + replace.space) > 0 ?\n start + prefix.length + replace.space : 0 : start;\n addedLength += prefix.length + replace.space;\n if (parents.length !== 1) {\n for (var j = i; j < parents.length; j++) {\n parents[j].start = j !== 0 ? prefix.length +\n parents[j].start + replace.space : parents[j].start;\n parents[j].end = prefix.length + parents[j].end + replace.space;\n }\n }\n this.restore(textArea, start, end + addedLength, null);\n }\n else {\n parents[i].text = parents[i].text.replace(regex, '');\n textArea.value = textArea.value.substr(0, parents[i].start + endLength) + parents[i].text + '\\n' +\n textArea.value.substr(parents[i].end + endLength, textArea.value.length);\n endLength -= regex.length;\n startLength = regex.length;\n this.restore(textArea, start - startLength, end + endLength, null);\n }\n }\n this.restore(textArea, null, null, e);\n };\n MDLists.prototype.appliedLine = function (line, prefixPattern, perfixObj, preTabSpaceLength) {\n var points = {};\n // eslint-disable-next-line\n var regex = new RegExp('^[' + this.syntax.UL.trim() + ']');\n var lineSplit = line.split('. ');\n var currentPrefix = lineSplit[0] + '. ';\n var isExist = regex.test(line.trim()) || line.trim() === this.syntax.OL.trim()\n || line.trim() === this.syntax.UL.trim() || /^\\d+$/.test(lineSplit[0].trim());\n var listFormat = this.olListType();\n var curTabSpaceLength = this.getTabSpace(line).length;\n if (this.currentAction === 'OL' && listFormat) {\n perfixObj[curTabSpaceLength.toString()] = !isNullOrUndefined(perfixObj[curTabSpaceLength.toString()]) ?\n perfixObj[curTabSpaceLength.toString()].valueOf() + 1 : 1;\n prefixPattern = perfixObj[curTabSpaceLength.toString()].valueOf().toString() + '. ';\n if (!isNullOrUndefined(preTabSpaceLength) && preTabSpaceLength > curTabSpaceLength) {\n perfixObj[preTabSpaceLength.toString()] = 0;\n }\n }\n if (isExist) {\n var replace = void 0;\n var pattern = void 0;\n // eslint-disable-next-line\n var space = 0;\n if (regex.test(line.trim())) {\n pattern = this.syntax.UL;\n replace = prefixPattern;\n points.space = prefixPattern.trim().length - this.syntax.UL.trim().length;\n }\n else if (/^\\d+$/.test(lineSplit[0].trim()) && listFormat) {\n pattern = lineSplit[0].trim() + '. ';\n replace = prefixPattern;\n points.space = this.syntax.UL.trim().length - currentPrefix.trim().length;\n }\n else if (/^\\d+$/.test(lineSplit[0].trim())) {\n pattern = lineSplit[0].trim() + '. ';\n replace = this.syntax.UL;\n points.space = this.syntax.UL.trim().length - currentPrefix.trim().length;\n }\n points.line = line.replace(pattern, replace);\n }\n return points;\n };\n MDLists.prototype.restore = function (textArea, start, end, event) {\n if (!isNullOrUndefined(start) && !isNullOrUndefined(start)) {\n this.selection.save(start, end);\n }\n if (!isNullOrUndefined(event)) {\n this.selection.restore(textArea);\n }\n if (event && event.callBack) {\n event.callBack({\n requestType: this.currentAction,\n selectedText: this.selection.getSelectedText(textArea),\n editorMode: 'Markdown',\n event: event.event\n });\n }\n };\n MDLists.prototype.getListRegex = function () {\n var regex = '';\n var configKey = Object.keys(this.syntax);\n for (var j = 0; j < configKey.length; j++) {\n var syntax = this.selection.replaceSpecialChar(this.syntax[configKey[j]]);\n regex += regex === '' ? '^(' + syntax + ')|^(' + syntax.trim() + ')' :\n '|^(' + syntax + ')|^(' + syntax.trim() + ')';\n }\n // eslint-disable-next-line\n return new RegExp(regex);\n };\n return MDLists;\n}());\nexport { MDLists };\n","import { extend } from '@syncfusion/ej2-base';\nimport * as EVENTS from './../../common/constant';\nimport * as CONSTANT from './../../markdown-parser/base/constant';\n/**\n * MDFormats internal plugin\n *\n * @hidden\n\n */\nvar MDFormats = /** @class */ (function () {\n /**\n * Constructor for creating the Formats plugin\n *\n * @param {IMDFormats} options - specifies the formats\n * @hidden\n\n */\n function MDFormats(options) {\n extend(this, this, options, true);\n this.selection = this.parent.markdownSelection;\n this.addEventListener();\n }\n MDFormats.prototype.addEventListener = function () {\n this.parent.observer.on(EVENTS.FORMAT_TYPE, this.applyFormats, this);\n };\n MDFormats.prototype.applyFormats = function (e) {\n e.subCommand = e.subCommand.toLowerCase();\n var textArea = this.parent.element;\n this.selection.save(textArea.selectionStart, textArea.selectionEnd);\n var parents = this.selection.getSelectedParentPoints(textArea);\n if (this.isAppliedFormat(parents) === e.subCommand) {\n if (e.subCommand === 'pre') {\n if (parents.length > 1) {\n this.applyCodeBlock(textArea, e, parents);\n }\n else {\n return;\n }\n }\n this.cleanFormat(textArea);\n this.restore(textArea, textArea.selectionStart, textArea.selectionEnd, e);\n return;\n }\n if (e.subCommand === 'p') {\n this.cleanFormat(textArea);\n this.restore(textArea, textArea.selectionStart, textArea.selectionEnd, e);\n return;\n }\n else {\n if ((e.subCommand === 'pre' && parents.length !== 1) || e.subCommand !== 'pre') {\n this.cleanFormat(textArea, e.subCommand);\n }\n }\n var start = textArea.selectionStart;\n var end = textArea.selectionEnd;\n var addedLength = 0;\n parents = this.selection.getSelectedParentPoints(textArea);\n if (e.subCommand === 'pre') {\n if (parents.length > 1) {\n this.applyCodeBlock(textArea, e, parents);\n }\n else {\n extend(e, e, { subCommand: 'InlineCode' }, true);\n this.parent.observer.notify(CONSTANT.selectionCommand, e);\n }\n return;\n }\n for (var i = 0; i < parents.length; i++) {\n if (parents[i].text !== '' && !this.selection.isStartWith(parents[i].text, '\\\\' + this.syntax[e.subCommand])) {\n parents[i].text = this.syntax[e.subCommand] + parents[i].text;\n textArea.value = textArea.value.substr(0, parents[i].start) + parents[i].text + '\\n' +\n textArea.value.substr(parents[i].end, textArea.value.length);\n start = i === 0 ? start + this.syntax[e.subCommand].length : start;\n addedLength += this.syntax[e.subCommand].length;\n if (parents.length !== 1) {\n for (var j = i; j < parents.length; j++) {\n parents[j].start = j !== 0 ?\n this.syntax[e.subCommand].length + parents[j].start : parents[j].start;\n parents[j].end = this.syntax[e.subCommand].length + parents[j].end;\n }\n }\n }\n else if (parents[i].text === '' && i === 0) {\n this.selection.save(start, end);\n if (this.selection.getSelectedText(textArea).length === 0) {\n parents[i].text = this.syntax[e.subCommand];\n textArea.value = textArea.value.substr(0, parents[i].start) + this.syntax[e.subCommand] +\n textArea.value.substr(parents[i].end, textArea.value.length);\n start = i === 0 ? start + this.syntax[e.subCommand].length : start;\n addedLength += this.syntax[e.subCommand].length;\n }\n if (parents.length !== 1) {\n for (var j = i; j < parents.length; j++) {\n parents[j].start = j !== 0 ? 1 + parents[j].start : parents[j].start;\n parents[j].end = 1 + parents[j].end;\n }\n }\n }\n }\n this.restore(textArea, start, end + addedLength, e);\n };\n MDFormats.prototype.clearRegex = function () {\n var regex = '';\n var configKey = Object.keys(this.syntax);\n for (var j = 0; j < configKey.length && configKey[j] !== 'pre' && configKey[j] !== 'p'; j++) {\n regex += regex === '' ? '^(' + this.selection.replaceSpecialChar(this.syntax[configKey[j]].trim()) + ')' :\n '|^(' + this.selection.replaceSpecialChar(this.syntax[configKey[j]].trim()) + ')';\n }\n return regex;\n };\n MDFormats.prototype.cleanFormat = function (textArea, command) {\n var parents = this.selection.getSelectedParentPoints(textArea);\n var start = textArea.selectionStart;\n var end = textArea.selectionEnd;\n var removeLength = 0;\n if (this.selection.isClear(parents, this.clearRegex())) {\n for (var i = 0; i < parents.length; i++) {\n var configKey = Object.keys(this.syntax);\n for (var j = 0; parents[i].text !== '' && j < configKey.length; j++) {\n var removeText = this.syntax[configKey[j]];\n if (configKey[j] === command) {\n continue;\n }\n // eslint-disable-next-line\n var regex = new RegExp('^(' + this.selection.replaceSpecialChar(removeText) + ')', 'gim');\n if (regex.test(parents[i].text)) {\n parents[i].text = parents[i].text.replace(regex, '');\n textArea.value = textArea.value.substr(0, parents[i].start) + parents[i].text + '\\n' +\n textArea.value.substr(parents[i].end, textArea.value.length);\n start = i === 0 ? (start - (removeText.length)) > 0 ? start - (removeText.length) : 0 : start;\n removeLength += removeText.length;\n if (parents.length !== 1) {\n for (var k = 0; k < parents.length; k++) {\n parents[k].start = k !== 0 ?\n parents[k].start - removeText.length : parents[k].start;\n parents[k].end = parents[k].end - removeText.length;\n }\n }\n break;\n }\n }\n if (parents[i].text === '' && i === 0) {\n this.selection.save(start, end);\n if (parents.length !== 1) {\n for (var j = i; j < parents.length; j++) {\n parents[j].start = j !== 0 ? 1 + parents[j].start : parents[j].start;\n parents[j].end = 1 + parents[j].end;\n }\n }\n }\n }\n this.restore(textArea, start, end - removeLength);\n }\n };\n MDFormats.prototype.applyCodeBlock = function (textArea, event, parents) {\n var command = event.subCommand;\n var start = parents[0].start;\n var end = parents[parents.length - 1].end;\n var parentLines = this.selection.getAllParents(textArea.value);\n var firstPrevText = parentLines[parents[0].line - 1];\n var lastNextText = parentLines[(parents.length + 1) + 1];\n // eslint-disable-next-line\n var addedLength = 0;\n if (!this.selection.isStartWith(firstPrevText, this.syntax.pre.split('\\n')[0]) &&\n !this.selection.isStartWith(lastNextText, this.syntax.pre.split('\\n')[0])) {\n var lines = textArea.value.substring(start, end).split('\\n');\n var lastLine = lines[lines.length - 1] === '' ? '' : '\\n';\n textArea.value = textArea.value.substr(0, start) + this.syntax[\"\" + command] + textArea.value.substring(start, end) +\n lastLine + this.syntax[\"\" + command] +\n textArea.value.substr(end, textArea.value.length);\n start = this.selection.selectionStart + this.syntax[\"\" + command].length;\n end = this.selection.selectionEnd + this.syntax[\"\" + command].length - 1;\n }\n else {\n var cmd = this.syntax[\"\" + command];\n var selection = this.parent.markdownSelection.getSelectedInlinePoints(textArea);\n var startNo = textArea.value.substr(0, textArea.selectionStart).lastIndexOf(cmd);\n var endNo = textArea.value.substr(textArea.selectionEnd, textArea.selectionEnd).indexOf(cmd);\n endNo = endNo + selection.end;\n var repStartText = this.replaceAt(textArea.value.substr(0, selection.start), cmd, '', startNo, selection.start);\n var repEndText = this.replaceAt(textArea.value.substr(selection.end, textArea.value.length), cmd, '', 0, endNo);\n textArea.value = repStartText + selection.text + repEndText;\n start = this.selection.selectionStart - cmd.length;\n end = this.selection.selectionEnd - cmd.length;\n }\n this.restore(textArea, start, end, event);\n };\n MDFormats.prototype.replaceAt = function (input, search, replace, start, end) {\n return input.slice(0, start)\n + input.slice(start, end).replace(search, replace)\n + input.slice(end);\n };\n MDFormats.prototype.restore = function (textArea, start, end, event) {\n this.selection.save(start, end);\n this.selection.restore(textArea);\n if (event && event.callBack) {\n event.callBack({\n requestType: event.subCommand,\n selectedText: this.selection.getSelectedText(textArea),\n editorMode: 'Markdown',\n event: event.event\n });\n }\n };\n MDFormats.prototype.isAppliedFormat = function (lines, documentNode) {\n var format = 'p';\n // eslint-disable-next-line\n var configKey = Object.keys(this.syntax);\n var keys = Object.keys(this.syntax);\n var direction = this.parent.element.selectionDirection;\n var checkLine = direction === 'backward' ? lines[0].text : lines[lines.length - 1].text;\n for (var i = 0; !documentNode && i < keys.length; i++) {\n if (keys[i] !== 'pre' && this.selection.isStartWith(checkLine, this.syntax[keys[i]])) {\n format = keys[i];\n break;\n }\n else if (keys[i] === 'pre') {\n var parentLines = this.selection.getAllParents(this.parent.element.value);\n var firstPrevText = parentLines[lines[0].line - 1];\n var lastNextText = parentLines[lines.length + 1];\n if (this.selection.isStartWith(firstPrevText, this.syntax[keys[i]].split('\\n')[0]) &&\n this.selection.isStartWith(lastNextText, this.syntax[keys[i]].split('\\n')[0])) {\n format = keys[i];\n break;\n }\n }\n }\n return format;\n };\n return MDFormats;\n}());\nexport { MDFormats };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport * as CONSTANT from './../base/constant';\nimport { extend } from '@syncfusion/ej2-base';\nimport * as EVENTS from './../../common/constant';\n/**\n * SelectionCommands internal component\n *\n * @hidden\n\n */\nvar MDSelectionFormats = /** @class */ (function () {\n function MDSelectionFormats(parent) {\n extend(this, this, parent, true);\n this.selection = this.parent.markdownSelection;\n this.addEventListener();\n }\n MDSelectionFormats.prototype.addEventListener = function () {\n this.parent.observer.on(CONSTANT.selectionCommand, this.applyCommands, this);\n this.parent.observer.on(EVENTS.KEY_DOWN_HANDLER, this.keyDownHandler, this);\n };\n MDSelectionFormats.prototype.keyDownHandler = function (e) {\n switch (e.event.action) {\n case 'bold':\n this.applyCommands({ subCommand: 'Bold', callBack: e.callBack });\n e.event.preventDefault();\n break;\n case 'italic':\n this.applyCommands({ subCommand: 'Italic', callBack: e.callBack });\n e.event.preventDefault();\n break;\n case 'strikethrough':\n this.applyCommands({ subCommand: 'StrikeThrough', callBack: e.callBack });\n e.event.preventDefault();\n break;\n case 'uppercase':\n this.applyCommands({ subCommand: 'UpperCase', callBack: e.callBack });\n e.event.preventDefault();\n break;\n case 'lowercase':\n this.applyCommands({ subCommand: 'LowerCase', callBack: e.callBack });\n e.event.preventDefault();\n break;\n case 'superscript':\n this.applyCommands({ subCommand: 'SuperScript', callBack: e.callBack });\n e.event.preventDefault();\n break;\n case 'subscript':\n this.applyCommands({ subCommand: 'SubScript', callBack: e.callBack });\n e.event.preventDefault();\n break;\n }\n };\n MDSelectionFormats.prototype.isBold = function (text, cmd) {\n return text.search('\\\\' + cmd + '\\\\' + cmd + '') !== -1;\n };\n MDSelectionFormats.prototype.isItalic = function (text, cmd) {\n return text.search('\\\\' + cmd) !== -1;\n };\n MDSelectionFormats.prototype.isMatch = function (text, cmd) {\n var matchText = [''];\n switch (cmd) {\n case this.syntax.Italic:\n matchText = text.match(this.singleCharRegx(cmd));\n break;\n case this.syntax.InlineCode:\n matchText = text.match(this.singleCharRegx(cmd));\n break;\n case this.syntax.StrikeThrough:\n matchText = text.match(this.singleCharRegx(cmd));\n break;\n }\n return matchText;\n };\n MDSelectionFormats.prototype.multiCharRegx = function (cmd) {\n // eslint-disable-next-line\n return new RegExp('(\\\\' + cmd + '\\\\' + cmd + ')', 'g');\n };\n MDSelectionFormats.prototype.singleCharRegx = function (cmd) {\n // eslint-disable-next-line\n return new RegExp('(\\\\' + cmd + ')', 'g');\n };\n MDSelectionFormats.prototype.isAppliedCommand = function (cmd) {\n // eslint-disable-next-line\n var selectCmd = '';\n var isFormat = false;\n var textArea = this.parent.element;\n var start = textArea.selectionStart;\n var splitAt = function (index) { return function (x) { return [x.slice(0, index), x.slice(index)]; }; };\n var splitText = splitAt(start)(textArea.value);\n var cmdB = this.syntax.Bold.substr(0, 1);\n var cmdI = this.syntax.Italic;\n var selectedText = this.parent.markdownSelection.getSelectedText(textArea);\n if (selectedText !== '' && selectedText === selectedText.toLocaleUpperCase() && cmd === 'UpperCase') {\n return true;\n }\n else if (selectedText === '') {\n var beforeText = textArea.value.substr(splitText[0].length - 1, 1);\n var afterText = splitText[1].substr(0, 1);\n if ((beforeText !== '' && afterText !== '' && beforeText.match(/[a-z]/i)) &&\n beforeText === beforeText.toLocaleUpperCase() && afterText === afterText.toLocaleUpperCase() && cmd === 'UpperCase') {\n return true;\n }\n }\n if (!(this.isBold(splitText[0], cmdB)) && !(this.isItalic(splitText[0], cmdI)) && !(this.isBold(splitText[1], cmdB)) &&\n !(this.isItalic(splitText[1], cmdI))) {\n if ((!isNullOrUndefined(this.isMatch(splitText[0], this.syntax.StrikeThrough)) &&\n !isNullOrUndefined(this.isMatch(splitText[1], this.syntax.StrikeThrough))) &&\n (this.isMatch(splitText[0], this.syntax.StrikeThrough).length % 2 === 1 &&\n this.isMatch(splitText[1], this.syntax.StrikeThrough).length % 2 === 1) && cmd === 'StrikeThrough') {\n isFormat = true;\n }\n if ((!isNullOrUndefined(this.isMatch(splitText[0], this.syntax.InlineCode)) &&\n !isNullOrUndefined(this.isMatch(splitText[1], this.syntax.InlineCode))) &&\n (this.isMatch(splitText[0], this.syntax.InlineCode).length % 2 === 1 &&\n this.isMatch(splitText[1], this.syntax.InlineCode).length % 2 === 1) && cmd === 'InlineCode') {\n isFormat = true;\n }\n /* eslint-disable */\n if ((!isNullOrUndefined(splitText[0].match(/\\
/g)) && !isNullOrUndefined(splitText[1].match(/\\<\\/sub>/g))) &&\n (splitText[0].match(/\\/g).length % 2 === 1 &&\n splitText[1].match(/\\<\\/sub>/g).length % 2 === 1) && cmd === 'SubScript') {\n isFormat = true;\n }\n if ((!isNullOrUndefined(splitText[0].match(/\\/g)) && !isNullOrUndefined(splitText[1].match(/\\<\\/sup>/g))) &&\n (splitText[0].match(/\\/g).length % 2 === 1 && splitText[1].match(/\\<\\/sup>/g).length % 2 === 1) &&\n cmd === 'SuperScript') {\n isFormat = true;\n }\n /* eslint-enable */\n }\n if ((this.isBold(splitText[0], cmdB) && this.isBold(splitText[1], cmdB)) &&\n (splitText[0].match(this.multiCharRegx(cmdB)).length % 2 === 1 &&\n splitText[1].match(this.multiCharRegx(cmdB)).length % 2 === 1) && cmd === 'Bold') {\n isFormat = true;\n }\n splitText[0] = this.isBold(splitText[0], cmdB) ? splitText[0].replace(this.multiCharRegx(cmdB), '$%@') : splitText[0];\n splitText[1] = this.isBold(splitText[1], cmdB) ? splitText[1].replace(this.multiCharRegx(cmdB), '$%@') : splitText[1];\n if ((!isNullOrUndefined(this.isMatch(splitText[0], this.syntax.Italic)) &&\n !isNullOrUndefined(this.isMatch(splitText[1], this.syntax.Italic))) &&\n (this.isMatch(splitText[0], this.syntax.Italic).length % 2 === 1 &&\n this.isMatch(splitText[1], this.syntax.Italic).length % 2 === 1) && cmd === 'Italic') {\n isFormat = true;\n }\n if ((!isNullOrUndefined(this.isMatch(splitText[0], this.syntax.StrikeThrough)) &&\n !isNullOrUndefined(this.isMatch(splitText[1], this.syntax.StrikeThrough))) &&\n (this.isMatch(splitText[0], this.syntax.StrikeThrough).length % 2 === 1 &&\n this.isMatch(splitText[1], this.syntax.StrikeThrough).length % 2 === 1) && cmd === 'StrikeThrough') {\n isFormat = true;\n }\n if ((!isNullOrUndefined(this.isMatch(splitText[0], this.syntax.InlineCode)) &&\n !isNullOrUndefined(this.isMatch(splitText[1], this.syntax.InlineCode))) &&\n (this.isMatch(splitText[0], this.syntax.InlineCode).length % 2 === 1 &&\n this.isMatch(splitText[1], this.syntax.InlineCode).length % 2 === 1) && cmd === 'InlineCode') {\n isFormat = true;\n }\n /* eslint-disable */\n if ((!isNullOrUndefined(splitText[0].match(/\\/g)) && !isNullOrUndefined(splitText[1].match(/\\<\\/sub>/g))) &&\n (splitText[0].match(/\\/g).length % 2 === 1 && splitText[1].match(/\\<\\/sub>/g).length % 2 === 1) && cmd === 'SubScript') {\n isFormat = true;\n }\n if ((!isNullOrUndefined(splitText[0].match(/\\/g)) && !isNullOrUndefined(splitText[1].match(/\\<\\/sup>/g))) &&\n (splitText[0].match(/\\/g).length % 2 === 1 && splitText[1].match(/\\<\\/sup>/g).length % 2 === 1) && cmd === 'SuperScript') {\n isFormat = true;\n /* eslint-enable */\n }\n return isFormat;\n };\n MDSelectionFormats.prototype.applyCommands = function (e) {\n this.currentAction = e.subCommand;\n var textArea = this.parent.element;\n this.selection.save(textArea.selectionStart, textArea.selectionEnd);\n var start = textArea.selectionStart;\n var end = textArea.selectionEnd;\n var addedLength = 0;\n var selection = this.parent.markdownSelection.getSelectedInlinePoints(textArea);\n if (this.isAppliedCommand(e.subCommand) && selection.text !== '') {\n var startCmd = this.syntax[e.subCommand];\n var endCmd = e.subCommand === 'SubScript' ? '' :\n e.subCommand === 'SuperScript' ? '' : this.syntax[e.subCommand];\n var startLength = (e.subCommand === 'UpperCase' || e.subCommand === 'LowerCase') ? 0 : startCmd.length;\n var startNo = textArea.value.substr(0, selection.start).lastIndexOf(startCmd);\n var endNo = textArea.value.substr(selection.end, textArea.value.length).indexOf(endCmd);\n endNo = endNo + selection.end;\n var repStartText = this.replaceAt(textArea.value.substr(0, selection.start), startCmd, '', startNo, selection.start);\n var repEndText = this.replaceAt(textArea.value.substr(selection.end, textArea.value.length), endCmd, '', 0, endNo);\n textArea.value = repStartText + selection.text + repEndText;\n this.restore(textArea, start - startLength, end - startLength, e);\n return;\n }\n if (selection.text !== '' && !this.isApplied(selection, e.subCommand)) {\n addedLength = (e.subCommand === 'UpperCase' || e.subCommand === 'LowerCase') ? 0 :\n this.syntax[e.subCommand].length;\n var repStart = textArea.value.substr(selection.start - this.syntax[e.subCommand].length, this.syntax[e.subCommand].length);\n var repEnd = void 0;\n if ((repStart === e.subCommand) || ((selection.start - this.syntax[e.subCommand].length ===\n textArea.value.indexOf(this.syntax[e.subCommand])) && (selection.end === textArea.value.lastIndexOf(this.syntax[e.subCommand]) || selection.end === textArea.value.lastIndexOf('/g, '').replace(/<\\/sub>/g, '');\n break;\n case 'SuperScript':\n text = text.replace(//g, '').replace(/<\\/sup>/g, '');\n break;\n }\n return text;\n };\n MDSelectionFormats.prototype.isApplied = function (line, command) {\n var regx = this.singleCharRegx(this.syntax[\"\" + command]);\n switch (command) {\n case 'SubScript':\n case 'SuperScript':\n regx = this.singleCharRegx(this.syntax[\"\" + command]);\n return regx.test(line.text);\n case 'Bold':\n case 'StrikeThrough':\n regx = this.multiCharRegx(this.syntax[\"\" + command].substr(0, 1));\n return regx.test(line.text);\n case 'UpperCase':\n case 'LowerCase':\n // eslint-disable-next-line\n regx = new RegExp('^[' + this.syntax[\"\" + command] + ']*$', 'g');\n return regx.test(line.text);\n case 'Italic': {\n var regTest = void 0;\n var regxB = this.multiCharRegx(this.syntax[\"\" + command].substr(0, 1));\n if (regxB.test(line.text)) {\n var repText = line.text;\n repText = repText.replace(regxB, '$%#');\n regTest = regx.test(repText);\n }\n else {\n regTest = regx.test(line.text);\n }\n return regTest;\n }\n case 'InlineCode':\n return regx.test(line.text);\n }\n };\n return MDSelectionFormats;\n}());\nexport { MDSelectionFormats };\n","/**\n * MarkdownSelection internal module\n *\n * @hidden\n\n */\nvar MarkdownSelection = /** @class */ (function () {\n function MarkdownSelection() {\n }\n /**\n * markdown getLineNumber method\n *\n * @param {HTMLTextAreaElement} textarea - specifies the text area element\n * @param {number} point - specifies the number value\n * @returns {number} - returns the value\n * @hidden\n\n */\n MarkdownSelection.prototype.getLineNumber = function (textarea, point) {\n return textarea.value.substr(0, point).split('\\n').length;\n };\n /**\n * markdown getSelectedText method\n *\n * @param {HTMLTextAreaElement} textarea - specifies the text area element\n * @returns {string} - specifies the string value\n * @hidden\n\n */\n MarkdownSelection.prototype.getSelectedText = function (textarea) {\n var start = textarea.selectionStart;\n var end = textarea.selectionEnd;\n return textarea.value.substring(start, end);\n };\n /**\n * markdown getAllParents method\n *\n * @param {string} value - specifies the string value\n * @returns {string[]} - returns the string value\n * @hidden\n\n */\n MarkdownSelection.prototype.getAllParents = function (value) {\n return value.split('\\n');\n };\n /**\n * markdown getSelectedLine method\n *\n * @param {HTMLTextAreaElement} textarea - specifies the text area element\n * @returns {string} - returns the string value\n * @hidden\n\n */\n MarkdownSelection.prototype.getSelectedLine = function (textarea) {\n var lines = this.getAllParents(textarea.value);\n var index = this.getLineNumber(textarea, textarea.selectionStart);\n return lines[index - 1];\n };\n /**\n * markdown getLine method\n *\n * @param {HTMLTextAreaElement} textarea - specifies the text area element\n * @param {number} index - specifies the number value\n * @returns {string} - returns the string value\n * @hidden\n\n */\n MarkdownSelection.prototype.getLine = function (textarea, index) {\n var lines = this.getAllParents(textarea.value);\n return lines[index];\n };\n /**\n * markdown getSelectedParentPoints method\n *\n * @param {HTMLTextAreaElement} textarea - specifies the text area element\n * @returns {string} - returns the string value\n * @hidden\n\n */\n MarkdownSelection.prototype.getSelectedParentPoints = function (textarea) {\n var lines = this.getAllParents(textarea.value);\n var start = this.getLineNumber(textarea, textarea.selectionStart);\n var end = this.getLineNumber(textarea, textarea.selectionEnd);\n var parents = this.getSelectedText(textarea).split('\\n');\n var selectedPoints = [];\n var selectedLine = lines[start - 1];\n var startLength = lines.slice(0, start - 1).join('').length;\n var firstPoint = {};\n firstPoint.line = start - 1;\n firstPoint.start = startLength + firstPoint.line;\n firstPoint.end = selectedLine !== '' ? firstPoint.start +\n selectedLine.length + 1 : firstPoint.start + selectedLine.length;\n firstPoint.text = selectedLine;\n selectedPoints.push(firstPoint);\n if (parents.length > 1) {\n for (var i = 1; i < parents.length - 1; i++) {\n var points = {};\n points.line = selectedPoints[i - 1].line + 1;\n points.start = parents[i] !== '' ? selectedPoints[i - 1].end : selectedPoints[i - 1].end;\n points.end = points.start + parents[i].length + 1;\n points.text = parents[i];\n selectedPoints.push(points);\n }\n var lastPoint = {};\n lastPoint.line = selectedPoints[selectedPoints.length - 1].line + 1;\n lastPoint.start = selectedPoints[selectedPoints.length - 1].end;\n lastPoint.end = lastPoint.start + lines[end - 1].length + 1;\n lastPoint.text = lines[end - 1];\n selectedPoints.push(lastPoint);\n }\n return selectedPoints;\n };\n /**\n * markdown setSelection method\n *\n * @param {HTMLTextAreaElement} textarea - specifies the text area element\n * @param {number} start - specifies the start vaulue\n * @param {number} end - specifies the end value\n * @returns {void}\n * @hidden\n\n */\n MarkdownSelection.prototype.setSelection = function (textarea, start, end) {\n textarea.setSelectionRange(start, end);\n textarea.focus();\n };\n /**\n * markdown save method\n *\n * @param {number} start - specifies the start vaulue\n * @param {number} end - specifies the end value\n * @returns {void}\n * @hidden\n\n */\n MarkdownSelection.prototype.save = function (start, end) {\n this.selectionStart = start;\n this.selectionEnd = end;\n };\n /**\n * markdown restore method\n *\n * @param {HTMLTextAreaElement} textArea - specifies the text area element\n * @returns {void}\n * @hidden\n\n */\n MarkdownSelection.prototype.restore = function (textArea) {\n this.setSelection(textArea, this.selectionStart, this.selectionEnd);\n };\n /**\n * markdown isStartWith method\n *\n * @param {string} line - specifies the string value\n * @param {string} command - specifies the string value\n * @returns {boolean} - returns the boolean value\n * @hidden\n\n */\n MarkdownSelection.prototype.isStartWith = function (line, command) {\n var isStart = false;\n if (line) {\n var reg = line.trim() === command.trim() ?\n // eslint-disable-next-line\n new RegExp('^(' + this.replaceSpecialChar(command.trim()) + ')', 'gim') :\n // eslint-disable-next-line\n new RegExp('^(' + this.replaceSpecialChar(command) + ')', 'gim');\n isStart = reg.test(line.trim());\n }\n return isStart;\n };\n /**\n * markdown replaceSpecialChar method\n *\n * @param {string} value - specifies the string value\n * @returns {string} - returns the value\n * @hidden\n\n */\n MarkdownSelection.prototype.replaceSpecialChar = function (value) {\n // eslint-disable-next-line\n return value.replace(/[`~!@#$%^&*()_|+\\-=?;:'\",.<>\\{\\}\\[\\]\\\\\\/]/g, '\\\\$&');\n };\n /**\n * markdown isClear method\n *\n * @param {string} parents - specifies the parent element\n * @param {string} regex - specifies the regex value\n * @returns {boolean} - returns the boolean value\n * @hidden\n\n */\n MarkdownSelection.prototype.isClear = function (parents, regex) {\n var isClear = false;\n for (var i = 0; i < parents.length; i++) {\n // eslint-disable-next-line\n if (new RegExp(regex, 'gim').test(parents[i].text)) {\n return true;\n }\n }\n return isClear;\n };\n /**\n * markdown getSelectedInlinePoints method\n *\n * @param {HTMLTextAreaElement} textarea - specifies the text area\n * @returns {void}\n * @hidden\n\n */\n MarkdownSelection.prototype.getSelectedInlinePoints = function (textarea) {\n var start = textarea.selectionStart;\n var end = textarea.selectionEnd;\n var selection = this.getSelectedText(textarea);\n return { start: start, end: end, text: selection };\n };\n return MarkdownSelection;\n}());\nexport { MarkdownSelection };\n","/**\n * Default Markdown formats config for adapter\n */\nexport var markdownFormatTags = {\n 'h6': '###### ',\n 'h5': '##### ',\n 'h4': '#### ',\n 'h3': '### ',\n 'h2': '## ',\n 'h1': '# ',\n 'blockquote': '> ',\n 'pre': '```\\n',\n 'p': ''\n};\n/**\n * Default selection formats config for adapter\n */\nexport var markdownSelectionTags = {\n 'Bold': '**',\n 'Italic': '*',\n 'StrikeThrough': '~~',\n 'InlineCode': '`',\n 'SubScript': '',\n 'SuperScript': '',\n 'UpperCase': 'A-Z',\n 'LowerCase': 'a-z'\n};\n/**\n * Default Markdown lists config for adapter\n */\nexport var markdownListsTags = {\n 'OL': '1. ',\n 'UL': '- '\n};\n/**\n * Default html key config for adapter\n */\nexport var htmlKeyConfig = {\n 'toolbar-focus': 'alt+f10',\n 'escape': '27',\n 'insert-link': 'ctrl+k',\n 'insert-image': 'ctrl+shift+i',\n 'insert-audio': 'ctrl+shift+a',\n 'insert-video': 'ctrl+shift+v',\n 'insert-table': 'ctrl+shift+e',\n 'undo': 'ctrl+z',\n 'redo': 'ctrl+y',\n 'copy': 'ctrl+c',\n 'cut': 'ctrl+x',\n 'paste': 'ctrl+v',\n 'bold': 'ctrl+b',\n 'italic': 'ctrl+i',\n 'underline': 'ctrl+u',\n 'strikethrough': 'ctrl+shift+s',\n 'uppercase': 'ctrl+shift+u',\n 'lowercase': 'ctrl+shift+l',\n 'superscript': 'ctrl+shift+=',\n 'subscript': 'ctrl+=',\n 'indents': 'ctrl+]',\n 'outdents': 'ctrl+[',\n 'html-source': 'ctrl+shift+h',\n 'full-screen': 'ctrl+shift+f',\n 'decrease-fontsize': 'ctrl+shift+<',\n 'increase-fontsize': 'ctrl+shift+>',\n 'justify-center': 'ctrl+e',\n 'justify-full': 'ctrl+j',\n 'justify-left': 'ctrl+l',\n 'justify-right': 'ctrl+r',\n 'clear-format': 'ctrl+shift+r',\n 'ordered-list': 'ctrl+shift+o',\n 'unordered-list': 'ctrl+alt+o',\n 'space': '32',\n 'enter': '13',\n 'tab': 'tab',\n 'delete': '46'\n};\n/**\n * Default markdown key config for adapter\n */\nexport var markdownKeyConfig = {\n 'toolbar-focus': 'alt+f10',\n 'escape': '27',\n 'insert-link': 'ctrl+k',\n 'insert-image': 'ctrl+shift+i',\n 'insert-table': 'ctrl+shift+e',\n 'undo': 'ctrl+z',\n 'redo': 'ctrl+y',\n 'copy': 'ctrl+c',\n 'cut': 'ctrl+x',\n 'paste': 'ctrl+v',\n 'bold': 'ctrl+b',\n 'italic': 'ctrl+i',\n 'strikethrough': 'ctrl+shift+s',\n 'uppercase': 'ctrl+shift+u',\n 'lowercase': 'ctrl+shift+l',\n 'superscript': 'ctrl+shift+=',\n 'subscript': 'ctrl+=',\n 'full-screen': 'ctrl+shift+f',\n 'ordered-list': 'ctrl+shift+o',\n 'unordered-list': 'ctrl+alt+o'\n};\n/**\n * PasteCleanup Grouping of similar functionality tags\n */\nexport var pasteCleanupGroupingTags = {\n 'b': ['strong'],\n 'strong': ['b'],\n 'i': ['emp', 'cite'],\n 'emp': ['i', 'cite'],\n 'cite': ['i', 'emp']\n};\n/**\n * PasteCleanup Grouping of similar functionality tags\n */\nexport var listConversionFilters = {\n 'first': 'MsoListParagraphCxSpFirst',\n 'middle': 'MsoListParagraphCxSpMiddle',\n 'last': 'MsoListParagraphCxSpLast'\n};\n/**\n * Dom-Node Grouping of self closing tags\n *\n * @hidden\n */\nexport var selfClosingTags = [\n 'BR',\n 'IMG'\n];\n","import { debounce, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport * as EVENTS from './../../common/constant';\n/**\n * `Undo` module is used to handle undo actions.\n */\nvar UndoRedoCommands = /** @class */ (function () {\n function UndoRedoCommands(parent, options) {\n this.undoRedoStack = [];\n this.parent = parent;\n this.undoRedoSteps = !isNullOrUndefined(options) ? options.undoRedoSteps : 30;\n this.undoRedoTimer = !isNullOrUndefined(options) ? options.undoRedoTimer : 300;\n this.selection = this.parent.markdownSelection;\n this.addEventListener();\n }\n UndoRedoCommands.prototype.addEventListener = function () {\n var debounceListener = debounce(this.keyUp, this.undoRedoTimer);\n this.parent.observer.on(EVENTS.KEY_UP_HANDLER, debounceListener, this);\n this.parent.observer.on(EVENTS.KEY_DOWN_HANDLER, this.keyDown, this);\n this.parent.observer.on(EVENTS.ACTION, this.onAction, this);\n this.parent.observer.on(EVENTS.MODEL_CHANGED_PLUGIN, this.onPropertyChanged, this);\n };\n UndoRedoCommands.prototype.onPropertyChanged = function (props) {\n for (var _i = 0, _a = Object.keys(props.newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'undoRedoSteps':\n this.undoRedoSteps = props.newProp.undoRedoSteps;\n break;\n case 'undoRedoTimer':\n this.undoRedoTimer = props.newProp.undoRedoTimer;\n break;\n }\n }\n };\n UndoRedoCommands.prototype.removeEventListener = function () {\n var debounceListener = debounce(this.keyUp, 300);\n this.parent.observer.off(EVENTS.KEY_UP_HANDLER, debounceListener);\n this.parent.observer.off(EVENTS.KEY_DOWN_HANDLER, this.keyDown);\n this.parent.observer.off(EVENTS.ACTION, this.onAction);\n this.parent.observer.off(EVENTS.MODEL_CHANGED_PLUGIN, this.onPropertyChanged);\n };\n /**\n * Destroys the ToolBar.\n *\n * @function destroy\n * @returns {void}\n * @hidden\n\n */\n UndoRedoCommands.prototype.destroy = function () {\n this.removeEventListener();\n };\n /**\n * onAction method\n *\n * @param {IMarkdownSubCommands} e - specifies the sub commands\n * @returns {void}\n * @hidden\n\n */\n UndoRedoCommands.prototype.onAction = function (e) {\n if (e.subCommand === 'Undo') {\n this.undo(e);\n }\n else {\n this.redo(e);\n }\n };\n UndoRedoCommands.prototype.keyDown = function (e) {\n var event = e.event;\n // eslint-disable-next-line\n var proxy = this;\n switch (event.action) {\n case 'undo':\n event.preventDefault();\n proxy.undo(e);\n break;\n case 'redo':\n event.preventDefault();\n proxy.redo(e);\n break;\n }\n };\n UndoRedoCommands.prototype.keyUp = function (e) {\n if (e.event.keyCode !== 17 && !e.event.ctrlKey) {\n this.saveData(e);\n }\n };\n /**\n * MD collection stored string format.\n *\n * @param {KeyboardEvent} e - specifies the key board event\n * @function saveData\n * @returns {void}\n * @hidden\n\n */\n UndoRedoCommands.prototype.saveData = function (e) {\n var textArea = this.parent.element;\n this.selection.save(textArea.selectionStart, textArea.selectionEnd);\n var start = textArea.selectionStart;\n var end = textArea.selectionEnd;\n var textValue = this.parent.element.value;\n var changEle = { text: textValue, start: start, end: end };\n if (this.undoRedoStack.length >= this.steps) {\n this.undoRedoStack = this.undoRedoStack.slice(0, this.steps + 1);\n }\n if (this.undoRedoStack.length > 1 && (this.undoRedoStack[this.undoRedoStack.length - 1].start === start) &&\n (this.undoRedoStack[this.undoRedoStack.length - 1].end === end)) {\n return;\n }\n this.undoRedoStack.push(changEle);\n this.steps = this.undoRedoStack.length - 1;\n if (this.steps > this.undoRedoSteps) {\n this.undoRedoStack.shift();\n this.steps--;\n }\n if (e && e.callBack) {\n e.callBack();\n }\n };\n /**\n * Undo the editable text.\n *\n * @param {IMarkdownSubCommands} e - specifies the sub commands\n * @function undo\n * @returns {void}\n * @hidden\n\n */\n UndoRedoCommands.prototype.undo = function (e) {\n if (this.steps > 0) {\n this.currentAction = 'Undo';\n var start = this.undoRedoStack[this.steps - 1].start;\n var end = this.undoRedoStack[this.steps - 1].end;\n var removedContent = this.undoRedoStack[this.steps - 1].text;\n this.parent.element.value = removedContent;\n this.parent.element.focus();\n this.steps--;\n this.restore(this.parent.element, start, end, e);\n }\n };\n /**\n * Redo the editable text.\n *\n * @param {IMarkdownSubCommands} e - specifies the sub commands\n * @function redo\n * @returns {void}\n * @hidden\n\n */\n UndoRedoCommands.prototype.redo = function (e) {\n if (this.undoRedoStack[this.steps + 1] != null) {\n this.currentAction = 'Redo';\n var start = this.undoRedoStack[this.steps + 1].start;\n var end = this.undoRedoStack[this.steps + 1].end;\n this.parent.element.value = this.undoRedoStack[this.steps + 1].text;\n this.parent.element.focus();\n this.steps++;\n this.restore(this.parent.element, start, end, e);\n }\n };\n UndoRedoCommands.prototype.restore = function (textArea, start, end, event) {\n this.selection.save(start, end);\n this.selection.restore(textArea);\n if (event && event.callBack) {\n event.callBack({\n requestType: this.currentAction,\n selectedText: this.selection.getSelectedText(textArea),\n editorMode: 'Markdown',\n event: event.event\n });\n }\n };\n /**\n * getUndoStatus method\n *\n * @returns {boolean} - returns the boolean value\n * @hidden\n\n */\n UndoRedoCommands.prototype.getUndoStatus = function () {\n var status = { undo: false, redo: false };\n if (this.steps > 0) {\n status.undo = true;\n }\n if (this.undoRedoStack[this.steps + 1] != null) {\n status.redo = true;\n }\n return status;\n };\n return UndoRedoCommands;\n}());\nexport { UndoRedoCommands };\n","import * as CONSTANT from './../base/constant';\n/**\n * Link internal component\n *\n * @hidden\n\n */\nvar MDLink = /** @class */ (function () {\n /**\n * Constructor for creating the Formats plugin\n *\n * @param {MarkdownParser} parent - specifies the parent element\n * @hidden\n\n */\n function MDLink(parent) {\n this.parent = parent;\n this.selection = this.parent.markdownSelection;\n this.addEventListener();\n }\n MDLink.prototype.addEventListener = function () {\n this.parent.observer.on(CONSTANT.LINK_COMMAND, this.createLink, this);\n };\n MDLink.prototype.createLink = function (e) {\n var textArea = this.parent.element;\n textArea.focus();\n var start = textArea.selectionStart;\n var end = textArea.selectionEnd;\n var text = (e.subCommand === 'Image') ? this.selection.getSelectedText(textArea) : e.item.text;\n var startOffset = (e.subCommand === 'Image') ? (start + 2) : (start + 1);\n var endOffset = (e.subCommand === 'Image') ? (end + 2) : (end + 1);\n text = (e.subCommand === 'Image') ? '' : '[' + text + '](' + e.item.url + ')';\n textArea.value = textArea.value.substr(0, start)\n + text + textArea.value.substr(end, textArea.value.length);\n this.parent.markdownSelection.setSelection(textArea, startOffset, endOffset);\n this.restore(textArea, startOffset, endOffset, e);\n };\n MDLink.prototype.restore = function (textArea, start, end, event) {\n this.selection.save(start, end);\n this.selection.restore(textArea);\n if (event && event.callBack) {\n event.callBack({\n requestType: event.subCommand,\n selectedText: this.selection.getSelectedText(textArea),\n editorMode: 'Markdown',\n event: event.event\n });\n }\n };\n return MDLink;\n}());\nexport { MDLink };\n","import * as CONSTANT from './../base/constant';\nimport { extend } from '@syncfusion/ej2-base';\nimport * as EVENTS from './../../common/constant';\n/**\n * Link internal component\n *\n * @hidden\n\n */\nvar MDTable = /** @class */ (function () {\n /**\n * Constructor for creating the Formats plugin\n *\n * @param {IMDTable} options - specifies the options\n * @hidden\n\n */\n function MDTable(options) {\n extend(this, this, options, true);\n this.selection = this.parent.markdownSelection;\n this.addEventListener();\n }\n MDTable.prototype.addEventListener = function () {\n this.parent.observer.on(CONSTANT.MD_TABLE, this.createTable, this);\n this.parent.observer.on(EVENTS.KEY_DOWN_HANDLER, this.onKeyDown, this);\n };\n MDTable.prototype.removeEventListener = function () {\n this.parent.observer.off(CONSTANT.MD_TABLE, this.createTable);\n this.parent.observer.off(EVENTS.KEY_DOWN_HANDLER, this.onKeyDown);\n };\n /**\n * markdown destroy method\n *\n * @returns {void}\n * @hidden\n\n */\n MDTable.prototype.destroy = function () {\n this.removeEventListener();\n };\n MDTable.prototype.onKeyDown = function (e) {\n if (e.event.action === 'insert-table') {\n e.item = e.value;\n this.createTable(e);\n }\n };\n MDTable.prototype.createTable = function (e) {\n this.element = this.parent.element;\n var start = this.element.selectionStart;\n var end = this.element.selectionEnd;\n var textAreaInitial = this.element.value;\n this.locale = e;\n this.selection.save(start, end);\n this.restore(this.element.selectionStart, this.element.selectionEnd, null);\n this.insertTable(start, end, textAreaInitial, e);\n };\n MDTable.prototype.getTable = function () {\n var table = '';\n table += this.textNonEmpty();\n table += this.tableHeader(this.locale);\n table += this.tableCell(this.locale);\n return table;\n };\n MDTable.prototype.tableHeader = function (e) {\n var text = '';\n for (var i = 1; i <= 2; i++) {\n text += '|';\n for (var j = 1; j <= 2; j++) {\n if (i === 1) {\n text += e.item.headingText + ' ' + j + '|';\n }\n else {\n text += '---------|';\n }\n }\n text += this.insertLine();\n }\n return text;\n };\n MDTable.prototype.tableCell = function (e) {\n var text = '';\n for (var i = 1; i <= 2; i++) {\n text += '|';\n for (var j = 1; j <= 2; j++) {\n text += e.item.colText + ' ' + this.convertToLetters(i) + j + '|';\n }\n text += this.insertLine();\n }\n text += this.insertLine();\n return text;\n };\n MDTable.prototype.insertLine = function () {\n var dummyElement = document.createElement('div');\n dummyElement.innerHTML = '\\n';\n return dummyElement.textContent;\n };\n MDTable.prototype.insertTable = function (start, end, textAreaInitial, e) {\n var parentText = this.selection.getSelectedParentPoints(this.element);\n var lastLineSplit = parentText[parentText.length - 1].text.split(' ', 2);\n var syntaxArr = this.getFormatTag();\n // eslint-disable-next-line\n var syntaxCount = 0;\n if (lastLineSplit.length < 2) {\n this.element.value = this.updateValue(this.getTable());\n this.makeSelection(textAreaInitial, start, end);\n }\n else {\n if (this.ensureFormatApply(parentText[parentText.length - 1].text)) {\n this.checkValid(start, end, this.getTable(), textAreaInitial, e, lastLineSplit, parentText, syntaxArr);\n }\n else {\n this.element.value = this.updateValue(this.getTable());\n this.makeSelection(textAreaInitial, start, end);\n }\n }\n this.restore(this.element.selectionStart, this.element.selectionEnd, e);\n };\n MDTable.prototype.makeSelection = function (textAreaInitial, start, end) {\n end = start + (textAreaInitial.length > 0 ? 12 : 10); //end is added 12 or 10 because to make the table heading selected\n start += textAreaInitial.length > 0 ? 3 : 1; // Start is added 3 or 1 because new lines are added when inserting table\n this.selection.setSelection(this.element, start, end);\n };\n MDTable.prototype.getFormatTag = function () {\n var syntaxFormatKey = Object.keys(this.syntaxTag.Formats);\n var syntaxListKey = Object.keys(this.syntaxTag.List);\n var syntaxArr = [];\n for (var i = 0; i < syntaxFormatKey.length; i++) {\n syntaxArr.push(this.syntaxTag.Formats[syntaxFormatKey[i]]);\n }\n for (var j = 0; j < syntaxListKey.length; j++) {\n syntaxArr.push(this.syntaxTag.List[syntaxListKey[j]]);\n }\n return syntaxArr;\n };\n MDTable.prototype.ensureFormatApply = function (line) {\n var formatTags = this.getFormatTag();\n var formatSplitZero = line.trim().split(' ', 2)[0] + ' ';\n for (var i = 0; i < formatTags.length; i++) {\n if (formatSplitZero === formatTags[i] || /^[\\d.]+[ ]+$/.test(formatSplitZero)) {\n return true;\n }\n }\n return false;\n };\n MDTable.prototype.ensureStartValid = function (firstLine, parentText) {\n var firstLineSplit = parentText[0].text.split(' ', 2);\n for (var i = firstLine + 1; i <= firstLine + firstLineSplit[0].length + 1; i++) {\n if (this.element.selectionStart === i || this.element.selectionEnd === i) {\n return false;\n }\n }\n return true;\n };\n MDTable.prototype.ensureEndValid = function (lastLine, formatSplitLength) {\n for (var i = lastLine + 1; i <= lastLine + formatSplitLength + 1; i++) {\n if (this.element.selectionEnd === i) {\n return false;\n }\n }\n return true;\n };\n MDTable.prototype.updateValueWithFormat = function (formatSplit, text) {\n var textApplyFormat = this.element.value.substring(this.element.selectionEnd, this.element.value.length);\n text += textApplyFormat.replace(textApplyFormat, (formatSplit[0] + ' ' + textApplyFormat));\n return this.element.value.substr(0, this.element.selectionStart) + text;\n };\n MDTable.prototype.updateValue = function (text) {\n return this.element.value.substr(0, this.element.selectionStart) + text +\n this.element.value.substr(this.element.selectionEnd, this.element.value.length);\n };\n MDTable.prototype.checkValid = function (start, end, text, textAreaInitial, \n // eslint-disable-next-line\n e, formatSplit, parentText, syntaxArr) {\n if (this.ensureStartValid(parentText[0].start, parentText) &&\n this.ensureEndValid(parentText[parentText.length - 1].start, formatSplit[0].length)) {\n if (start === parentText[0].start) {\n if (start !== end && end !== (parentText[parentText.length - 1].end - 1)) {\n this.element.value = this.updateValueWithFormat(formatSplit, text);\n }\n else {\n this.element.value = this.updateValue(text);\n }\n }\n else if (end === parentText[parentText.length - 1].end - 1) {\n this.element.value = this.updateValue(text);\n }\n else {\n this.element.value = this.updateValueWithFormat(formatSplit, text);\n }\n this.makeSelection(textAreaInitial, start, end);\n }\n };\n MDTable.prototype.convertToLetters = function (rowNumber) {\n var baseChar = ('A').charCodeAt(0);\n var letters = '';\n do {\n rowNumber -= 1;\n letters = String.fromCharCode(baseChar + (rowNumber % 26)) + letters;\n rowNumber = (rowNumber / 26) >> 0;\n } while (rowNumber > 0);\n return letters;\n };\n MDTable.prototype.textNonEmpty = function () {\n var emptyText = '';\n if (this.isCursorBased() || this.isSelectionBased()) {\n if (this.element.value.length > 0) {\n emptyText += this.insertLine();\n emptyText += this.insertLine(); // to append two new line when textarea having content.\n }\n }\n return emptyText;\n };\n MDTable.prototype.isCursorBased = function () {\n return this.element.selectionStart === this.element.selectionEnd;\n };\n MDTable.prototype.isSelectionBased = function () {\n return this.element.selectionStart !== this.element.selectionEnd;\n };\n MDTable.prototype.restore = function (start, end, event) {\n this.selection.save(start, end);\n this.selection.restore(this.element);\n if (event && event.callBack) {\n event.callBack({\n requestType: event.subCommand,\n selectedText: this.selection.getSelectedText(this.element),\n editorMode: 'Markdown',\n event: event.event\n });\n }\n };\n return MDTable;\n}());\nexport { MDTable };\n","import * as CONSTANT from './../base/constant';\n/**\n * Link internal component\n *\n * @hidden\n\n */\nvar ClearFormat = /** @class */ (function () {\n /**\n * Constructor for creating the clear format plugin\n *\n * @param {MarkdownParser} parent - specifies the parent element\n * @hidden\n\n */\n function ClearFormat(parent) {\n this.parent = parent;\n this.selection = this.parent.markdownSelection;\n this.addEventListener();\n }\n ClearFormat.prototype.addEventListener = function () {\n this.parent.observer.on(CONSTANT.CLEAR_COMMAND, this.clear, this);\n };\n ClearFormat.prototype.replaceRegex = function (data) {\n /* eslint-disable */\n return data.replace(/\\*/ig, '\\\\*').replace(/\\&/ig, '\\\\&')\n .replace(/\\-/ig, '\\\\-').replace(/\\^/ig, '\\\\^')\n .replace(/\\$/ig, '\\\\$').replace(/\\./ig, '\\\\.')\n .replace(/\\|/ig, '\\\\|').replace(/\\?/ig, '\\\\?')\n .replace(/\\+/ig, '\\\\+').replace(/\\-/ig, '\\\\-')\n .replace(/\\&/ig, '\\\\&');\n /* eslint-enable */\n };\n ClearFormat.prototype.clearSelectionTags = function (text) {\n var data = this.parent.selectionTags;\n var keys = Object.keys(data);\n for (var num = 0; num < keys.length; num++) {\n var key = keys[num];\n // eslint-disable-next-line\n if (data.hasOwnProperty(key) && data[key] !== '') {\n var expString = this.replaceRegex(data[\"\" + key]);\n var regExp = void 0;\n var startExp = data[\"\" + key].length;\n var endExp = (data[\"\" + key] === '' || data[\"\" + key] === '') ? data[\"\" + key].length + 1 : data[\"\" + key].length;\n if (data[\"\" + key] === '') {\n // eslint-disable-next-line\n regExp = new RegExp('(.*?)<\\/sup>', 'ig');\n }\n else if (data[\"\" + key] === '') {\n // eslint-disable-next-line\n regExp = new RegExp('(.*?)<\\/sub>', 'ig');\n }\n else {\n // eslint-disable-next-line\n regExp = new RegExp(expString + '(.*?)' + expString, 'ig');\n }\n var val = text.match(regExp);\n for (var index = 0; val && index < val.length && val[index] !== ''; index++) {\n // eslint-disable-next-line max-len\n text = text.replace(val[index], val[index].substr(startExp, val[index].length - endExp - startExp));\n }\n }\n }\n return text;\n };\n ClearFormat.prototype.clearFormatTags = function (text) {\n var lines = text.split('\\n');\n return this.clearFormatLines(lines);\n };\n ClearFormat.prototype.clearFormatLines = function (lines) {\n var tags = [this.parent.formatTags, this.parent.listTags];\n var str = '';\n for (var len = 0; len < lines.length; len++) {\n for (var num = 0; num < tags.length; num++) {\n var data = tags[num];\n var keys = Object.keys(data);\n for (var index = 0; index < keys.length; index++) {\n var key = keys[index];\n // eslint-disable-next-line\n if (data.hasOwnProperty(key) && data[key] !== '') {\n if (lines[len].indexOf(data[\"\" + key]) === 0) {\n lines[len] = lines[len].replace(data[\"\" + key], '');\n lines[len] = this.clearFormatLines([lines[len]]);\n }\n }\n }\n }\n str = str + lines[len] + ((len !== lines.length - 1) ? '\\n' : '');\n }\n return str;\n };\n ClearFormat.prototype.clear = function (e) {\n var textArea = this.parent.element;\n textArea.focus();\n var start = textArea.selectionStart;\n var end = textArea.selectionEnd;\n var text = this.selection.getSelectedText(textArea);\n text = this.clearSelectionTags(text);\n text = this.clearFormatTags(text);\n textArea.value = textArea.value.substr(0, start)\n + text + textArea.value.substr(end, textArea.value.length);\n this.parent.markdownSelection.setSelection(textArea, start, start + text.length);\n this.restore(textArea, start, start + text.length, e);\n };\n ClearFormat.prototype.restore = function (textArea, start, end, event) {\n this.selection.save(start, end);\n this.selection.restore(textArea);\n if (event && event.callBack) {\n event.callBack({\n requestType: event.subCommand,\n selectedText: this.selection.getSelectedText(textArea),\n editorMode: 'Markdown',\n event: event.event\n });\n }\n };\n return ClearFormat;\n}());\nexport { ClearFormat };\n","import * as CONSTANT from './../base/constant';\n/**\n * Link internal component\n *\n * @hidden\n\n */\nvar MDInsertText = /** @class */ (function () {\n /**\n * Constructor for creating the insert text plugin\n *\n * @param {MarkdownParser} parent - specifies the parent element\n * @hidden\n\n */\n function MDInsertText(parent) {\n this.parent = parent;\n this.selection = this.parent.markdownSelection;\n this.addEventListener();\n }\n MDInsertText.prototype.addEventListener = function () {\n this.parent.observer.on(CONSTANT.INSERT_TEXT_COMMAND, this.InsertTextExec, this);\n };\n MDInsertText.prototype.InsertTextExec = function (e) {\n var textArea = this.parent.element;\n textArea.focus();\n var start = textArea.selectionStart;\n var end = textArea.selectionEnd;\n var text = e.value.text;\n var startOffset = start + text.length;\n var endOffset = end + text.length;\n textArea.value = textArea.value.substr(0, start)\n + text + textArea.value.substr(end, textArea.value.length);\n this.parent.markdownSelection.setSelection(textArea, startOffset, endOffset);\n this.restore(textArea, startOffset, endOffset, e);\n };\n MDInsertText.prototype.restore = function (textArea, start, end, event) {\n this.selection.save(start, end);\n this.selection.restore(textArea);\n if (event && event.callBack) {\n event.callBack({\n requestType: event.subCommand,\n selectedText: this.selection.getSelectedText(textArea),\n editorMode: 'Markdown',\n event: event.event\n });\n }\n };\n return MDInsertText;\n}());\nexport { MDInsertText };\n","import { Observer } from '@syncfusion/ej2-base';\nimport * as CONSTANT from './constant';\nimport { MDLists } from './../plugin/lists';\nimport { MDFormats } from './../plugin/formats';\nimport { MDSelectionFormats } from './../plugin/md-selection-formats';\nimport { MarkdownSelection } from './../plugin/markdown-selection';\nimport { extend } from '@syncfusion/ej2-base';\nimport { markdownFormatTags, markdownListsTags, markdownSelectionTags } from './../../common/config';\nimport { UndoRedoCommands } from './../plugin/undo';\nimport { MDLink } from './../plugin/link';\nimport { MDTable } from './../plugin/table';\nimport * as EVENTS from './../../common/constant';\nimport { ClearFormat } from './../plugin/clearformat';\nimport { MDInsertText } from './../plugin/insert-text';\n/**\n * MarkdownParser internal component\n *\n * @hidden\n\n */\nvar MarkdownParser = /** @class */ (function () {\n /**\n * Constructor for creating the component\n *\n * @param {IMarkdownParserModel} options - specifies the options\n * @hidden\n\n */\n function MarkdownParser(options) {\n this.initialize();\n extend(this, this, options, true);\n this.observer = new Observer(this);\n this.markdownSelection = new MarkdownSelection();\n this.listObj = new MDLists({ parent: this, syntax: this.listTags });\n this.formatObj = new MDFormats({ parent: this, syntax: this.formatTags });\n this.undoRedoManager = new UndoRedoCommands(this, options.options);\n this.mdSelectionFormats = new MDSelectionFormats({ parent: this, syntax: this.selectionTags });\n this.linkObj = new MDLink(this);\n this.tableObj = new MDTable({ parent: this, syntaxTag: ({ Formats: this.formatTags, List: this.listTags }) });\n this.clearObj = new ClearFormat(this);\n this.insertTextObj = new MDInsertText(this);\n this.wireEvents();\n }\n MarkdownParser.prototype.initialize = function () {\n this.formatTags = markdownFormatTags;\n this.listTags = markdownListsTags;\n this.selectionTags = markdownSelectionTags;\n };\n MarkdownParser.prototype.wireEvents = function () {\n this.observer.on(EVENTS.KEY_DOWN, this.editorKeyDown, this);\n this.observer.on(EVENTS.KEY_UP, this.editorKeyUp, this);\n this.observer.on(EVENTS.MODEL_CHANGED, this.onPropertyChanged, this);\n };\n MarkdownParser.prototype.onPropertyChanged = function (props) {\n this.observer.notify(EVENTS.MODEL_CHANGED_PLUGIN, props);\n };\n MarkdownParser.prototype.editorKeyDown = function (e) {\n this.observer.notify(EVENTS.KEY_DOWN_HANDLER, e);\n };\n MarkdownParser.prototype.editorKeyUp = function (e) {\n this.observer.notify(EVENTS.KEY_UP_HANDLER, e);\n };\n /* eslint-disable */\n /**\n * markdown execCommand method\n *\n * @param {MarkdownExecCommand} command - specifies the command\n * @param {T} - specifies the value\n * @param {Event} event - specifies the event\n * @param {Function} callBack - specifies the call back function\n * @param {string} text - specifies the string value\n * @param {T} exeValue - specifies the value\n * @returns {void}\n * @hidden\n\n */\n /* eslint-enable */\n MarkdownParser.prototype.execCommand = function (command, value, event, callBack, text, exeValue) {\n switch (command.toLocaleLowerCase()) {\n case 'lists':\n this.observer.notify(CONSTANT.LISTS_COMMAND, { subCommand: value, event: event, callBack: callBack });\n break;\n case 'formats':\n this.observer.notify(EVENTS.FORMAT_TYPE, { subCommand: value, event: event, callBack: callBack });\n break;\n case 'actions':\n this.observer.notify(EVENTS.ACTION, { subCommand: value, event: event, callBack: callBack });\n break;\n case 'style':\n case 'effects':\n case 'casing':\n this.observer.notify(CONSTANT.selectionCommand, { subCommand: value, event: event, callBack: callBack });\n break;\n case 'links':\n case 'images':\n this.observer.notify(CONSTANT.LINK_COMMAND, { subCommand: value, event: event, callBack: callBack, item: exeValue });\n break;\n case 'table':\n switch (value.toString().toLocaleLowerCase()) {\n case 'createtable':\n this.observer.notify(CONSTANT.MD_TABLE, { subCommand: value, item: exeValue, event: event, callBack: callBack });\n break;\n }\n break;\n case 'clear':\n this.observer.notify(CONSTANT.CLEAR_COMMAND, { subCommand: value, event: event, callBack: callBack });\n break;\n case 'inserttext':\n this.observer.notify(CONSTANT.INSERT_TEXT_COMMAND, { subCommand: value, event: event, callBack: callBack,\n value: { text: exeValue } });\n break;\n }\n };\n return MarkdownParser;\n}());\nexport { MarkdownParser };\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 { Formatter } from './formatter';\nimport { MarkdownParser } from './../../markdown-parser/base/markdown-parser';\nimport { extend } from '@syncfusion/ej2-base';\nimport { markdownKeyConfig, markdownListsTags, markdownFormatTags, markdownSelectionTags } from './../../common/config';\n/**\n * Markdown adapter\n *\n * @hidden\n\n */\nvar MarkdownFormatter = /** @class */ (function (_super) {\n __extends(MarkdownFormatter, _super);\n function MarkdownFormatter(options) {\n var _this = _super.call(this) || this;\n _this.initialize();\n extend(_this, _this, options, true);\n if (options && _this.element) {\n _this.updateFormatter(_this.element, document, options.options);\n }\n return _this;\n }\n MarkdownFormatter.prototype.initialize = function () {\n this.keyConfig = markdownKeyConfig;\n this.formatTags = markdownFormatTags;\n this.listTags = markdownListsTags;\n this.selectionTags = markdownSelectionTags;\n };\n /**\n * Update the formatter of RichTextEditor\n *\n * @param {Element} editElement - specifies the edit element.\n * @param {Document} doc - specifies the document.\n * @param {number} options - specifies the options\n * @returns {void}\n * @hidden\n\n */\n MarkdownFormatter.prototype.updateFormatter = function (editElement, doc, options) {\n if (editElement) {\n this.editorManager = new MarkdownParser({\n element: editElement,\n formatTags: this.formatTags,\n listTags: this.listTags,\n selectionTags: this.selectionTags,\n options: options\n });\n }\n };\n return MarkdownFormatter;\n}(Formatter));\nexport { MarkdownFormatter };\n","import { MarkdownSelection } from '../../markdown-parser/plugin/markdown-selection';\nimport * as events from '../base/constant';\nimport { getDefaultMDTbStatus } from '../../common/util';\n/**\n * MarkdownToolbarStatus module for refresh the toolbar status\n */\nvar MarkdownToolbarStatus = /** @class */ (function () {\n function MarkdownToolbarStatus(parent) {\n this.toolbarStatus = this.prevToolbarStatus = getDefaultMDTbStatus();\n this.selection = new MarkdownSelection();\n this.parent = parent;\n this.element = this.parent.contentModule.getEditPanel();\n this.addEventListener();\n }\n MarkdownToolbarStatus.prototype.addEventListener = function () {\n this.parent.on(events.toolbarRefresh, this.onRefreshHandler, this);\n this.parent.on(events.destroy, this.removeEventListener, this);\n };\n MarkdownToolbarStatus.prototype.removeEventListener = function () {\n this.parent.off(events.toolbarRefresh, this.onRefreshHandler);\n this.parent.off(events.destroy, this.removeEventListener);\n };\n MarkdownToolbarStatus.prototype.onRefreshHandler = function (args) {\n var parentsLines = this.selection.getSelectedParentPoints(this.element);\n this.toolbarStatus = {\n orderedlist: args.documentNode ? false : this.isListsApplied(parentsLines, 'OL'),\n unorderedlist: args.documentNode ? false : this.isListsApplied(parentsLines, 'UL'),\n formats: this.currentFormat(parentsLines, args.documentNode),\n bold: args.documentNode ? false : this.parent.formatter.editorManager.mdSelectionFormats.isAppliedCommand('Bold'),\n italic: args.documentNode ? false : this.parent.formatter.editorManager.mdSelectionFormats.isAppliedCommand('Italic'),\n inlinecode: args.documentNode ? false : this.parent.formatter.editorManager.mdSelectionFormats.isAppliedCommand('InlineCode'),\n strikethrough: args.documentNode ? false :\n this.parent.formatter.editorManager.mdSelectionFormats.isAppliedCommand('StrikeThrough'),\n subscript: args.documentNode ? false : this.parent.formatter.editorManager.mdSelectionFormats.isAppliedCommand('SubScript'),\n superscript: args.documentNode ? false : this.parent.formatter.editorManager.mdSelectionFormats.isAppliedCommand('SuperScript'),\n uppercase: args.documentNode ? false : this.parent.formatter.editorManager.mdSelectionFormats.isAppliedCommand('UpperCase')\n };\n if (this.parent.formatter.editorManager.mdSelectionFormats.isAppliedCommand('InlineCode')) {\n this.toolbarStatus.formats = 'pre';\n }\n var tbStatusString = JSON.stringify(this.toolbarStatus);\n this.parent.notify(events.toolbarUpdated, this.toolbarStatus);\n if (JSON.stringify(this.prevToolbarStatus) !== tbStatusString) {\n this.parent.notify(events.updateTbItemsStatus, { html: null, markdown: JSON.parse(tbStatusString) });\n this.prevToolbarStatus = JSON.parse(tbStatusString);\n }\n };\n MarkdownToolbarStatus.prototype.isListsApplied = function (lines, type) {\n var isApply = true;\n if (type === 'OL') {\n for (var i = 0; i < lines.length; i++) {\n var lineSplit = lines[i].text.trim().split(' ', 2)[0] + ' ';\n if (!/^[\\d.]+[ ]+$/.test(lineSplit)) {\n isApply = false;\n break;\n }\n }\n }\n else {\n for (var i = 0; i < lines.length; i++) {\n if (!this.selection.isStartWith(lines[i].text, this.parent.formatter.listTags[\"\" + type])) {\n isApply = false;\n break;\n }\n }\n }\n return isApply;\n };\n MarkdownToolbarStatus.prototype.currentFormat = function (lines, documentNode) {\n var format = 'p';\n var keys = Object.keys(this.parent.formatter.formatTags);\n var direction = this.element.selectionDirection;\n var checkLine = direction === 'backward' ? lines[0].text : lines[lines.length - 1].text;\n for (var i = 0; !documentNode && i < keys.length; i++) {\n if (keys[i] !== 'pre' && this.selection.isStartWith(checkLine, this.parent.formatter.formatTags[keys[i]])) {\n format = keys[i];\n break;\n }\n else if (keys[i] === 'pre') {\n if (this.codeFormat()) {\n format = keys[i];\n break;\n }\n }\n }\n return format;\n };\n MarkdownToolbarStatus.prototype.codeFormat = function () {\n var isFormat = false;\n var textArea = this.parent.inputElement;\n var start = textArea.selectionStart;\n var splitAt = function (index) { return function (x) { return [x.slice(0, index), x.slice(index)]; }; };\n var splitText = splitAt(start)(textArea.value);\n var cmdPre = this.parent.formatter.formatTags.pre;\n var selectedText = this.getSelectedText(textArea);\n if (selectedText !== '' && selectedText === selectedText.toLocaleUpperCase()) {\n return true;\n }\n else if (selectedText === '') {\n var beforeText = textArea.value.substr(splitText[0].length - 1, 1);\n var afterText = splitText[1].substr(0, 1);\n if ((beforeText !== '' && afterText !== '' && beforeText.match(/[a-z]/i)) &&\n beforeText === beforeText.toLocaleUpperCase() && afterText === afterText.toLocaleUpperCase()) {\n return true;\n }\n }\n if ((this.isCode(splitText[0], cmdPre) && this.isCode(splitText[1], cmdPre)) &&\n (splitText[0].match(this.multiCharRegx(cmdPre)).length % 2 === 1 &&\n splitText[1].match(this.multiCharRegx(cmdPre)).length % 2 === 1)) {\n isFormat = true;\n }\n return isFormat;\n };\n MarkdownToolbarStatus.prototype.getSelectedText = function (textarea) {\n return textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);\n };\n MarkdownToolbarStatus.prototype.isCode = function (text, cmd) {\n return text.search('\\\\' + cmd + '') !== -1;\n };\n MarkdownToolbarStatus.prototype.multiCharRegx = function (cmd) {\n // eslint-disable-next-line\n return new RegExp('(\\\\' + cmd + ')', 'g');\n };\n return MarkdownToolbarStatus;\n}());\nexport { MarkdownToolbarStatus };\n","/**\n * Markdown module is used to render Rich Text Editor as Markdown editor content\n *\n * @hidden\n\n */\nvar MarkdownRender = /** @class */ (function () {\n /**\n * Constructor for content renderer module\n *\n * @param {IRichTextEditor} parent - specifies the parent.\n */\n function MarkdownRender(parent) {\n this.parent = parent;\n }\n /**\n * The function is used to render Rich Text Editor content div\n *\n * @returns {void}\n * @hidden\n\n */\n MarkdownRender.prototype.renderPanel = function () {\n var rteObj = this.parent;\n var div = this.parent.createElement('div', { id: this.parent.getID() + '_view', className: 'e-rte-content' });\n this.editableElement = this.parent.createElement('textarea', {\n className: 'e-content',\n id: this.parent.getID() + '_editable-content',\n attrs: { 'aria-labelledby': this.parent.getID() + '_view' }\n });\n div.appendChild(this.editableElement);\n this.setPanel(div);\n rteObj.element.appendChild(div);\n };\n /**\n * Get the content div element of RichTextEditor\n *\n * @returns {Element} - specifies the element\n * @hidden\n\n */\n MarkdownRender.prototype.getPanel = function () {\n return this.contentPanel;\n };\n /**\n * Get the editable element of RichTextEditor\n *\n * @returns {Element} - specifies the element\n * @hidden\n\n */\n MarkdownRender.prototype.getEditPanel = function () {\n return this.editableElement;\n };\n /**\n * Returns the text content as string.\n *\n * @returns {string} - specifies the string values.\n */\n MarkdownRender.prototype.getText = function () {\n return this.getEditPanel().value;\n };\n /**\n * Set the content div element of RichTextEditor\n *\n * @param {Element} panel - specifies the element.\n * @returns {void}\n * @hidden\n\n */\n MarkdownRender.prototype.setPanel = function (panel) {\n this.contentPanel = panel;\n };\n /**\n * Get the document of RichTextEditor\n *\n * @returns {void}\n * @hidden\n\n */\n MarkdownRender.prototype.getDocument = function () {\n return this.getEditPanel().ownerDocument;\n };\n return MarkdownRender;\n}());\nexport { MarkdownRender };\n","import * as events from '../base/constant';\nimport { isNullOrUndefined, addClass, removeClass } from '@syncfusion/ej2-base';\nimport { MarkdownFormatter } from '../formatter/markdown-formatter';\nimport { RenderType } from '../base/enum';\nimport * as classes from '../base/classes';\nimport { MarkdownToolbarStatus } from './markdown-toolbar-status';\nimport { MarkdownRender } from '../renderer/markdown-renderer';\nimport { MarkdownSelection } from './../../markdown-parser/plugin/markdown-selection';\n/**\n * `MarkdownEditor` module is used to markdown editor\n */\nvar MarkdownEditor = /** @class */ (function () {\n function MarkdownEditor(parent, serviceLocator) {\n this.parent = parent;\n this.locator = serviceLocator;\n this.renderFactory = this.locator.getService('rendererFactory');\n this.addEventListener();\n }\n /**\n * Destroys the Markdown.\n *\n * @function destroy\n * @returns {void}\n * @hidden\n\n */\n MarkdownEditor.prototype.destroy = function () {\n this.removeEventListener();\n };\n MarkdownEditor.prototype.moduleDestroy = function () {\n this.parent = null;\n this.toolbarUpdate.parent = null;\n };\n MarkdownEditor.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.saveSelection = new MarkdownSelection();\n this.parent.on(events.initialLoad, this.instantiateRenderer, this);\n this.parent.on(events.initialEnd, this.render, this);\n this.parent.on(events.modelChanged, this.onPropertyChanged, this);\n this.parent.on(events.markdownToolbarClick, this.onToolbarClick, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.selectAll, this.selectAll, this);\n this.parent.on(events.getSelectedHtml, this.getSelectedHtml, this);\n this.parent.on(events.selectionSave, this.onSelectionSave, this);\n this.parent.on(events.selectionRestore, this.onSelectionRestore, this);\n this.parent.on(events.readOnlyMode, this.updateReadOnly, this);\n this.parent.on(events.moduleDestroy, this.moduleDestroy, this);\n };\n MarkdownEditor.prototype.updateReadOnly = function () {\n if (this.parent.readonly) {\n this.parent.contentModule.getEditPanel().setAttribute('readonly', 'readonly');\n addClass([this.parent.element], classes.CLS_RTE_READONLY);\n }\n else {\n this.parent.contentModule.getEditPanel().removeAttribute('readonly');\n removeClass([this.parent.element], classes.CLS_RTE_READONLY);\n }\n };\n MarkdownEditor.prototype.onSelectionSave = function () {\n var textArea = this.parent.contentModule.getEditPanel();\n this.saveSelection.save(textArea.selectionStart, textArea.selectionEnd);\n };\n // eslint-disable-next-line\n MarkdownEditor.prototype.onSelectionRestore = function (e) {\n this.contentRenderer.getEditPanel().focus();\n var textArea = this.parent.contentModule.getEditPanel();\n this.saveSelection.restore(textArea);\n };\n MarkdownEditor.prototype.onToolbarClick = function (args) {\n var item = args.item;\n var textArea = this.parent.contentModule.getEditPanel();\n textArea.focus();\n var startOffset = textArea.selectionStart;\n var endOffset = textArea.selectionEnd;\n var text = textArea.value.substring(startOffset, endOffset);\n switch (item.subCommand) {\n case 'Maximize':\n this.parent.notify(events.enableFullScreen, { args: args });\n break;\n case 'Minimize':\n this.parent.notify(events.disableFullScreen, { args: args });\n break;\n case 'CreateLink':\n this.parent.notify(events.insertLink, { member: 'link', args: args, text: text, module: 'Markdown' });\n break;\n case 'Image':\n this.parent.notify(events.insertImage, { member: 'image', args: args, text: text, module: 'Markdown' });\n break;\n case 'CreateTable': {\n var tableConstant = {\n 'headingText': this.parent.localeObj.getConstant('TableHeadingText'),\n 'colText': this.parent.localeObj.getConstant('TableColText')\n };\n this.parent.formatter.process(this.parent, args, args.originalEvent, tableConstant);\n break;\n }\n default:\n this.parent.formatter.process(this.parent, args, args.originalEvent, null);\n break;\n }\n };\n MarkdownEditor.prototype.instantiateRenderer = function () {\n this.renderFactory.addRenderer(RenderType.Content, new MarkdownRender(this.parent));\n };\n MarkdownEditor.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.initialEnd, this.render);\n this.parent.off(events.modelChanged, this.onPropertyChanged);\n this.parent.off(events.destroy, this.destroy);\n this.parent.off(events.markdownToolbarClick, this.onToolbarClick);\n this.parent.off(events.initialLoad, this.instantiateRenderer);\n this.parent.off(events.selectAll, this.selectAll);\n this.parent.off(events.getSelectedHtml, this.getSelectedHtml);\n this.parent.off(events.selectionSave, this.onSelectionSave);\n this.parent.off(events.selectionRestore, this.onSelectionRestore);\n this.parent.off(events.readOnlyMode, this.updateReadOnly);\n this.parent.off(events.moduleDestroy, this.moduleDestroy);\n };\n MarkdownEditor.prototype.render = function () {\n this.contentRenderer = this.renderFactory.getRenderer(RenderType.Content);\n var editElement = this.contentRenderer.getEditPanel();\n var option = { undoRedoSteps: this.parent.undoRedoSteps, undoRedoTimer: this.parent.undoRedoTimer };\n if (isNullOrUndefined(this.parent.formatter)) {\n this.parent.formatter = new MarkdownFormatter({\n element: editElement,\n options: option\n });\n }\n else {\n this.parent.formatter.updateFormatter(editElement, this.contentRenderer.getDocument(), option);\n }\n if (this.parent.toolbarSettings.enable) {\n this.toolbarUpdate = new MarkdownToolbarStatus(this.parent);\n }\n this.parent.notify(events.bindOnEnd, {});\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {RichTextEditorModel} e - specifies the editor model\n * @returns {void}\n * @hidden\n\n */\n MarkdownEditor.prototype.onPropertyChanged = function (e) {\n // On property code change here\n if (!isNullOrUndefined(e.newProp.formatter)) {\n var editElement = this.contentRenderer.getEditPanel();\n var option = { undoRedoSteps: this.parent.undoRedoSteps,\n undoRedoTimer: this.parent.undoRedoTimer };\n this.parent.formatter.updateFormatter(editElement, this.contentRenderer.getDocument(), option);\n }\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {void}\n */\n MarkdownEditor.prototype.getModuleName = function () {\n return 'markdownEditor';\n };\n /**\n * For selecting all content in RTE\n *\n * @returns {void}\n * @private\n */\n MarkdownEditor.prototype.selectAll = function () {\n this.parent.formatter.editorManager.markdownSelection.setSelection(this.parent.contentModule.getEditPanel(), 0, this.parent.contentModule.getEditPanel().value.length);\n };\n /**\n * For get a selected text in RTE\n *\n * @param {NotifyArgs} e - specifies the arguments.\n * @returns {void}\n * @private\n */\n MarkdownEditor.prototype.getSelectedHtml = function (e) {\n e.callBack(this.parent.formatter.editorManager.markdownSelection.getSelectedText(this.parent.contentModule.getEditPanel()));\n };\n return MarkdownEditor;\n}());\nexport { MarkdownEditor };\n","var randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\nexport default {\n randomUUID\n};","// Unique ID creation requires a high quality random # generator. In the browser we therefore\n// require the crypto API and do not support built-in fallback to lower quality random number\n// generators (like Math.random()).\n\nvar getRandomValues;\nvar rnds8 = new Uint8Array(16);\nexport default function rng() {\n // lazy load so that environments that need to polyfill have a chance to do so\n if (!getRandomValues) {\n // getRandomValues needs to be invoked in a context where \"this\" is a Crypto implementation.\n getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);\n if (!getRandomValues) {\n throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n }\n }\n return getRandomValues(rnds8);\n}","import validate from './validate.js';\n\n/**\n * Convert array of 16 byte values to UUID string format of the form:\n * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\n */\nvar byteToHex = [];\nfor (var i = 0; i < 256; ++i) {\n byteToHex.push((i + 0x100).toString(16).slice(1));\n}\nexport function unsafeStringify(arr, offset = 0) {\n // Note: Be careful editing this code! It's been tuned for performance\n // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434\n //\n // Note to future-self: No, you can't remove the `toLowerCase()` call.\n // REF: https://github.com/uuidjs/uuid/pull/677#issuecomment-1757351351\n return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();\n}\nfunction stringify(arr, offset = 0) {\n var uuid = unsafeStringify(arr, offset);\n // Consistency check for valid UUID. If this throws, it's likely due to one\n // of the following:\n // - One or more input array values don't map to a hex octet (leading to\n // \"undefined\" in the uuid)\n // - Invalid input values for the RFC `version` or `variant` fields\n if (!validate(uuid)) {\n throw TypeError('Stringified UUID is invalid');\n }\n return uuid;\n}\nexport default stringify;","import native from './native.js';\nimport rng from './rng.js';\nimport { unsafeStringify } from './stringify.js';\nfunction v4(options, buf, offset) {\n if (native.randomUUID && !buf && !options) {\n return native.randomUUID();\n }\n options = options || {};\n var rnds = options.random || (options.rng || rng)();\n\n // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`\n rnds[6] = rnds[6] & 0x0f | 0x40;\n rnds[8] = rnds[8] & 0x3f | 0x80;\n\n // Copy bytes to buffer, if provided\n if (buf) {\n offset = offset || 0;\n for (var i = 0; i < 16; ++i) {\n buf[offset + i] = rnds[i];\n }\n return buf;\n }\n return unsafeStringify(rnds);\n}\nexport default v4;","import { stringExtensions, MIME, TYPE } from '@felicity/primitives';\nimport { MetadataProvider, Model, ModelMetadata } from '@felicity/data-modelling';\nimport { CheckBox } from '@syncfusion/ej2-buttons';\nimport { DatePicker } from '@syncfusion/ej2-calendars';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { TextBox } from '@syncfusion/ej2-inputs';\nimport {\n RichTextEditor, Toolbar, MarkdownEditor, Link\n} from '@syncfusion/ej2-richtexteditor';\nimport { v4 as uuid } from 'uuid';\nimport { EDITING_MODE } from '../constants.mjs';\nimport ViewModel from '../models/ViewModel.mjs';\n\n/**\n * Class providing editor capabilities for a given model class\n */\nexport default class ModelEditor {\n #uniqueId;\n\n #modelClass;\n\n #viewModel;\n\n #metadata;\n\n #originalModel;\n\n /**\n * Indicates whether enum values should be translated\n *\n * @type {boolean}\n * @default false\n */\n translateOptions = false;\n\n /**\n * Locale module for the editor\n *\n * @type {string}\n */\n localeModule;\n\n /**\n * Locale scope for the editor\n *\n * @type {string}\n */\n localeScope;\n\n /**\n * Initialises an editor for the given model class\n *\n * @param {Function} modelClass Reference to the model class' constructor\n */\n constructor(modelClass) {\n this.#modelClass = modelClass;\n\n const name = (this.modelClass.schema ?? this.modelClass.name)\n .split('.').pop().toDashCase();\n\n this.#uniqueId = `${name}-${uuid().substring(0, 8)}`;\n }\n\n /**\n * Gets the reference to the model class' constructor\n *\n * @type {Function} Model class reference\n */\n get modelClass() {\n return this.#modelClass;\n }\n\n /**\n * Gets the shortened universally unique identifier of the editor\n *\n * @type {string} Unique identifier\n */\n get uniqueId() {\n return this.#uniqueId;\n }\n\n /**\n * Gets the editor's view model\n *\n * @type {ViewModel} Editor's view model\n */\n get viewModel() {\n return this.#viewModel;\n }\n\n /**\n * Gets the model metadata of the edited model\n *\n * @type {ModelMetadata} Model metadata of the edited model\n */\n get metadata() {\n if (!this.#metadata) {\n this.#metadata = MetadataProvider.get(this.modelClass);\n }\n\n return this.#metadata;\n }\n\n /**\n * Gets the original state of the model before any change\n *\n * @type {object}\n */\n get originalModel() {\n return this.#originalModel;\n }\n\n /**\n * Gets the current values stored in the view model\n *\n * @returns {object} Edited data as plain object\n */\n getData() {\n const data = this.viewModel.getData();\n\n this.metadata.enumProperties()\n .forEach((property) => {\n const value = data[property];\n if (value !== undefined && !value && Number.isNaN(parseInt(value, 10))) {\n data[property] = null;\n }\n });\n\n return data;\n }\n\n /* eslint class-methods-use-this: \"off\" */\n /**\n * Returns the dialog's title\n *\n * @param {string} mode Editing mode\n * @returns {string} Dialog title\n */\n title(mode) {\n const phrase = (mode === EDITING_MODE.ADD) ? 'add' : 'edit';\n\n return window.i18n?.dictionary\n ? window.i18n.dictionary.phrase(phrase, 'global', 'editor')\n : phrase.toPascalCase();\n }\n\n /* eslint no-param-reassign: [\"error\", { \"props\": false }] */\n /**\n * Initialises the editor for adding or editing an entry.\n *\n * @param {string} mode Editing mode\n * @param {object} data Initial data of the edited model\n * @param {HTMLFormElement} form Editor form element\n * @param {object} dialog Dialog component\n */\n edit(mode, data, form, dialog) {\n const model = this.createModel(data);\n\n form.setAttribute('data-editor-for', this.modelClass.schema);\n this._initEditors(form);\n\n this.#originalModel = this.createModel(data);\n this.#viewModel = ViewModel.bind(model, form);\n\n if (dialog) {\n dialog.header = this.title(mode);\n\n dialog.addEventListener('open', () => {\n this.redraw(form);\n });\n }\n }\n\n /**\n * Creates an instance of the editable model\n *\n * @param {object} data Data to be bound to the model instance\n * @returns {object} The constructed model\n */\n createModel(data) {\n return Model.create(this.modelClass, data);\n }\n\n /**\n * Constructs the input element for a model property\n *\n * @param {string} property Model property name\n * @param {object} modelMetadata Model metadata\n * @param {string} path Path to the property if it is contained in an enclosing model.\n * @returns {HTMLElement} Input element\n */\n editorFor(property, modelMetadata, path) {\n const metadata = modelMetadata ?? this.metadata;\n if (metadata === undefined) {\n throw Error(`Metadata of property ${property} is undefined`);\n }\n\n const propertyMetadata = metadata.properties[property],\n propertyPath = path ? `${path}.${property}` : property,\n\n attributes = {\n id: `${this.uniqueId}-${propertyPath}`,\n name: propertyPath\n };\n\n if (metadata.required?.indexOf(property) > -1) {\n attributes.required = true;\n }\n\n if (!propertyMetadata?.enum) {\n switch (propertyMetadata?.type) {\n case 'string':\n switch (propertyMetadata.format) {\n case 'date-time':\n attributes.type = 'datetime-local';\n break;\n\n case 'uri':\n attributes.type = 'url';\n break;\n\n case 'tel':\n attributes.type = 'tel';\n break;\n\n default:\n if (propertyMetadata.maxLength) {\n attributes.type = 'text';\n attributes.maxlength = propertyMetadata.maxLength;\n }\n break;\n }\n break;\n\n case 'boolean':\n attributes.type = 'checkbox';\n break;\n\n default:\n // Other controls do not need type attribute\n break;\n }\n }\n\n if (propertyMetadata && propertyMetadata['x-content-type']) {\n attributes['data-content-type'] = propertyMetadata['x-content-type'];\n }\n\n let binding = attributes.type === 'checkbox' ? 'checked' : 'value';\n if ([MIME.MD].indexOf(attributes['data-content-type']) > -1) {\n binding = 'text';\n }\n attributes['data-bind'] = `${binding}:${propertyPath}`;\n\n const input = document.createElement(this._tagName(property, propertyMetadata));\n Object.keys(attributes).forEach((a) => input.setAttribute(a, attributes[a]));\n\n if (propertyMetadata?.enum) {\n propertyMetadata?.enum.forEach((value) => {\n const option = document.createElement('option');\n option.setAttribute('value', value);\n\n option.innerText = this.translateOptions && window.i18n?.dictionary\n ? window.i18n.dictionary.phrase(value, this.localeScope, this.localeModule)\n : value;\n\n input.appendChild(option);\n });\n\n if (propertyMetadata?.type !== 'string') {\n input.setAttribute('data-value-type', propertyMetadata?.type);\n }\n }\n\n return input;\n }\n\n /**\n * Creates a labelled editor as a group for a model property\n *\n * @param {string} labelText Text written on the editor's label\n * @param {string} property Model property name\n * @param {object} modelMetadata Model metadata\n * @param {string} path Path to the property if it is contained in an enclosing model.\n * @returns {HTMLElement} Editor group element\n */\n editorGroupFor(labelText, property, modelMetadata, path) {\n const editor = this.editorFor(property, modelMetadata, path),\n group = document.createElement('div');\n\n group.classList.add('editor-group');\n\n switch (editor.getAttribute('type')) {\n case 'checkbox':\n editor.setAttribute('data-label', labelText);\n break;\n\n default:\n editor.setAttribute('placeholder', labelText);\n break;\n }\n\n group.appendChild(editor);\n\n return group;\n }\n\n /**\n * Creates the editor element for the model\n *\n * @returns {HTMLElement} Editor element\n */\n editorElement() {\n const editor = document.createElement('div');\n editor.classList.add('model-editor');\n\n this._collectProperties()\n .forEach((property) => {\n editor.appendChild(this.editorGroupFor(property.toTitleCase(), property));\n });\n\n return editor;\n }\n\n /**\n * Creates the string template of an editor for a model property\n *\n * @param {string} labelText Test written on the editor's label\n * @param {string} property Model property name\n * @param {object} modelMetadata Model metadata\n * @param {string} path Path to the property if it is contained in an enclosing model.\n * @returns {string} Editor template\n */\n editorTemplateFor(labelText, property, modelMetadata, path) {\n return this.editorGroupFor(labelText, property, modelMetadata, path).innerHTML;\n }\n\n /**\n * Creates the string template of an editor for a model\n *\n * @returns {string} Editor template\n */\n template() {\n return this.editorElement().innerHTML;\n }\n\n /**\n * Collects the properties to be displayed in the editor\n *\n * @param {function} customFilter Custom property filter function\n * @returns {string[]} List of property names\n * @protected\n * @example\n * const properties = editor._collectProperties((p) => p !== 'id');\n */\n _collectProperties(customFilter) {\n const { primaryKey = [], required = [], properties = {} } = this.metadata || {},\n\n // Exclude read-only properties and arrays\n filters = (property) => properties[property]?.readOnly !== true\n && properties[property]?.type !== 'array',\n\n // Combine custom filter with the default filter if provided\n combinedFilter = customFilter\n ? (property) => filters(property) && customFilter(property)\n : filters,\n\n // Get unique properties\n uniqueProperties = [...new Set([...primaryKey, ...required, ...Object.keys(properties)])]\n .filter(combinedFilter);\n\n return uniqueProperties;\n }\n\n /**\n * Redraws the editors' UI\n *\n * @param {HTMLElement} form Form element\n */\n redraw(form) {\n form.querySelectorAll('.e-richtexteditor > textarea')\n .forEach((textarea) => {\n textarea.ej2_instances[0]?.refreshUI();\n });\n }\n\n /**\n * Determines the editor control's tag name\n *\n * @param {string} property Model property name\n * @param {object} propertyMetadata Model property meatdata\n * @returns {string} Editor control's tag name\n */\n _tagName(property, propertyMetadata) {\n let tagName = 'input';\n\n if (propertyMetadata?.enum) {\n tagName = 'select';\n } else if (propertyMetadata?.type === TYPE.STRING) {\n switch (propertyMetadata.format) {\n case 'multiline':\n tagName = 'textarea';\n break;\n\n default:\n if (!propertyMetadata.format && !propertyMetadata.maxLength) {\n tagName = 'textarea';\n }\n break;\n }\n }\n\n return tagName;\n }\n\n /**\n * Replaces input fields with editor components\n *\n * @param {HTMLFormElement} form Editor form\n * @protected\n */\n _initEditors(form) {\n const inputs = {};\n\n form.querySelectorAll('input:not([type=\"checkbox\"]):not([type^=\"date\"]):not(.e-control), textarea')\n .forEach((input) => {\n inputs[input.getAttribute('name')] = input;\n\n let wrapper,\n floatLine,\n label;\n\n switch (input.dataset.contentType) {\n case 'text/markdown':\n RichTextEditor.Inject(Toolbar, Link, MarkdownEditor);\n\n wrapper = document.createElement('div');\n wrapper.classList.add('e-control-wrapper');\n wrapper.classList.add('e-float-editor');\n input.parentNode.insertBefore(wrapper, input);\n wrapper.appendChild(input);\n\n floatLine = document.createElement('span');\n floatLine.classList.add('e-float-line');\n wrapper.appendChild(floatLine);\n\n label = document.createElement('label');\n label.classList.add('e-float-text');\n label.innerText = input.getAttribute('placeholder');\n wrapper.appendChild(label);\n\n input.style.display = 'none';\n\n new RichTextEditor({\n floatLabelType: 'Auto',\n editorMode: 'Markdown',\n value: input.value,\n toolbarSettings: {\n items: [\n 'Bold', 'Italic', '|',\n 'OrderedList', 'UnorderedList', '|',\n 'CreateLink', '|',\n 'Undo', 'Redo', '|',\n 'FullScreen'\n ]\n }\n }).appendTo(input);\n break;\n\n default:\n new TextBox({\n floatLabelType: 'Auto'\n }).appendTo(input);\n break;\n }\n });\n\n form.querySelectorAll('input[type=\"checkbox\"]')\n .forEach((input) => {\n inputs[input.getAttribute('name')] = input;\n\n new CheckBox({\n label: input.getAttribute('data-label'),\n name: input.name,\n checked: input.checked\n }).appendTo(input);\n });\n\n form.querySelectorAll('input[type=\"datetime-local\"]')\n .forEach((input) => {\n inputs[input.getAttribute('name')] = input;\n\n new DatePicker({\n floatLabelType: 'Auto',\n showClearButton: true\n }).appendTo(input);\n });\n\n form.querySelectorAll('select')\n .forEach((input) => {\n inputs[input.getAttribute('name')] = input;\n\n new DropDownList({\n floatLabelType: 'Auto',\n showClearButton: true,\n }).appendTo(input);\n });\n\n Object.keys(inputs)\n .forEach((name) => {\n const wrapper = inputs[name].closest('.e-control-wrapper, .e-checkbox-wrapper');\n if (wrapper) {\n wrapper.setAttribute('data-wrapper-for', name.toDashCase());\n }\n });\n\n Object.values(inputs)\n .sort((a, b) => {\n const\n aWrapper = a.closest('[data-wrapper-for]'),\n bWrapper = b.closest('[data-wrapper-for]'),\n aOrder = aWrapper ? window.getComputedStyle(aWrapper).order : 0,\n bOrder = bWrapper ? window.getComputedStyle(bWrapper).order : 0;\n\n return aOrder - bOrder;\n })\n .forEach((input, idx) => {\n switch (input.tagName.toLowerCase()) {\n case 'select':\n input\n .closest('.e-control-wrapper')\n .querySelector('input')\n .setAttribute('tabindex', idx + 1);\n break;\n\n default:\n input.setAttribute('tabindex', idx + 1);\n break;\n }\n\n if (idx === 0) {\n input.setAttribute('autofocus', true);\n }\n });\n }\n}\n","/** @hidden */\nexport var created = 'create';\n/** @hidden */\nexport var destroyed = 'destroy';\n/** @hidden */\nexport var load = 'load';\n/** @hidden */\nexport var rowDataBound = 'rowDataBound';\n/** @hidden */\nexport var queryCellInfo = 'queryCellInfo';\n/** @hidden */\nexport var headerCellInfo = 'headerCellInfo';\n/** @hidden */\nexport var actionBegin = 'actionBegin';\n/** @hidden */\nexport var actionComplete = 'actionComplete';\n/** @hidden */\nexport var actionFailure = 'actionFailure';\n/** @hidden */\nexport var dataBound = 'dataBound';\n/** @hidden */\nexport var rowSelecting = 'rowSelecting';\n/** @hidden */\nexport var rowSelected = 'rowSelected';\n/** @hidden */\nexport var rowDeselecting = 'rowDeselecting';\n/** @hidden */\nexport var rowDeselected = 'rowDeselected';\n/** @hidden */\nexport var cellSelecting = 'cellSelecting';\n/** @hidden */\nexport var cellSelected = 'cellSelected';\n/** @hidden */\nexport var cellDeselecting = 'cellDeselecting';\n/** @hidden */\nexport var cellDeselected = 'cellDeselected';\n/** @hidden */\nexport var columnSelecting = 'columnSelecting';\n/** @hidden */\nexport var columnSelected = 'columnSelected';\n/** @hidden */\nexport var columnDeselecting = 'columnDeselecting';\n/** @hidden */\nexport var columnDeselected = 'columnDeselected';\n/** @hidden */\nexport var columnDragStart = 'columnDragStart';\n/** @hidden */\nexport var columnDrag = 'columnDrag';\n/** @hidden */\nexport var columnDrop = 'columnDrop';\n/** @hidden */\nexport var rowDragStartHelper = 'rowDragStartHelper';\n/** @hidden */\nexport var rowDragStart = 'rowDragStart';\n/** @hidden */\nexport var rowDrag = 'rowDrag';\n/** @hidden */\nexport var rowDrop = 'rowDrop';\n/** @hidden */\nexport var beforePrint = 'beforePrint';\n/** @hidden */\nexport var printComplete = 'printComplete';\n/** @hidden */\nexport var detailDataBound = 'detailDataBound';\n/** @hidden */\nexport var toolbarClick = 'toolbarClick';\n/** @hidden */\nexport var batchAdd = 'batchAdd';\n/** @hidden */\nexport var batchCancel = 'batchCancel';\n/** @hidden */\nexport var batchDelete = 'batchDelete';\n/** @hidden */\nexport var beforeBatchAdd = 'beforeBatchAdd';\n/** @hidden */\nexport var beforeBatchDelete = 'beforeBatchDelete';\n/** @hidden */\nexport var beforeBatchSave = 'beforeBatchSave';\n/** @hidden */\nexport var beginEdit = 'beginEdit';\n/** @hidden */\nexport var cellEdit = 'cellEdit';\n/** @hidden */\nexport var cellSave = 'cellSave';\n/** @hidden */\nexport var cellSaved = 'cellSaved';\n/** @hidden */\nexport var endAdd = 'endAdd';\n/** @hidden */\nexport var endDelete = 'endDelete';\n/** @hidden */\nexport var endEdit = 'endEdit';\n/** @hidden */\nexport var recordDoubleClick = 'recordDoubleClick';\n/** @hidden */\nexport var recordClick = 'recordClick';\n/** @hidden */\nexport var beforeDataBound = 'beforeDataBound';\n/** @hidden */\nexport var beforeOpenColumnChooser = 'beforeOpenColumnChooser';\n/** @hidden */\nexport var beforeOpenAdaptiveDialog = 'beforeOpenAdaptiveDialog';\n/** @hidden */\nexport var resizeStart = 'resizeStart';\n/** @hidden */\nexport var onResize = 'resizing';\n/** @hidden */\nexport var resizeStop = 'resizeStop';\n/** @hidden */\nexport var checkBoxChange = 'checkBoxChange';\n/** @hidden */\nexport var beforeCopy = 'beforeCopy';\n/** @hidden */\nexport var beforePaste = 'beforePaste';\n/** @hidden */\nexport var beforeAutoFill = 'beforeAutoFill';\n/** @hidden */\nexport var filterChoiceRequest = 'filterchoicerequest';\n/** @hidden */\nexport var filterAfterOpen = 'filterafteropen';\n/** @hidden */\nexport var filterBeforeOpen = 'filterbeforeopen';\n/** @hidden */\nexport var filterSearchBegin = 'filtersearchbegin';\n/** @hidden */\nexport var commandClick = 'commandClick';\n/** @hidden */\nexport var exportGroupCaption = 'exportGroupCaption';\n/** @hidden */\nexport var lazyLoadGroupExpand = 'lazyLoadGroupExpand';\n/** @hidden */\nexport var lazyLoadGroupCollapse = 'lazyLoadGroupCollapse';\n/**\n * Specifies grid internal events\n */\n/** @hidden */\nexport var initialLoad = 'initial-load';\n/** @hidden */\nexport var initialEnd = 'initial-end';\n/** @hidden */\nexport var dataReady = 'data-ready';\n/** @hidden */\nexport var contentReady = 'content-ready';\n/** @hidden */\nexport var uiUpdate = 'ui-update';\n/** @hidden */\nexport var onEmpty = 'on-empty';\n/** @hidden */\nexport var inBoundModelChanged = 'inbound-model-changed';\n/** @hidden */\nexport var modelChanged = 'model-changed';\n/** @hidden */\nexport var colGroupRefresh = 'colgroup-refresh';\n/** @hidden */\nexport var headerRefreshed = 'header-refreshed';\n/** @hidden */\nexport var pageBegin = 'paging-begin';\n/** @hidden */\nexport var pageComplete = 'paging-complete';\n/** @hidden */\nexport var sortBegin = 'sorting-begin';\n/** @hidden */\nexport var sortComplete = 'sorting-complete';\n/** @hidden */\nexport var filterBegin = 'filtering-begin';\n/** @hidden */\nexport var filterComplete = 'filtering-complete';\n/** @hidden */\nexport var searchBegin = 'searching-begin';\n/** @hidden */\nexport var searchComplete = 'searching-complete';\n/** @hidden */\nexport var reorderBegin = 'reorder-begin';\n/** @hidden */\nexport var reorderComplete = 'reorder-complete';\n/** @hidden */\nexport var rowDragAndDropBegin = 'rowdraganddrop-begin';\n/** @hidden */\nexport var rowDragAndDropComplete = 'rowdraganddrop-complete';\n/** @hidden */\nexport var groupBegin = 'grouping-begin';\n/** @hidden */\nexport var groupComplete = 'grouping-complete';\n/** @hidden */\nexport var ungroupBegin = 'ungrouping-begin';\n/** @hidden */\nexport var ungroupComplete = 'ungrouping-complete';\n/** @hidden */\nexport var groupAggregates = 'group-aggregates';\n/** @hidden */\nexport var refreshFooterRenderer = 'refresh-footer-rendered';\n/** @hidden */\nexport var refreshAggregateCell = 'refresh-aggregate-cell';\n/** @hidden */\nexport var refreshAggregates = 'refresh-aggregates';\n/** @hidden */\nexport var rowSelectionBegin = 'rowselecting';\n/** @hidden */\nexport var rowSelectionComplete = 'rowselected';\n/** @hidden */\nexport var columnSelectionBegin = 'columnselecting';\n/** @hidden */\nexport var columnSelectionComplete = 'columnselected';\n/** @hidden */\nexport var cellSelectionBegin = 'cellselecting';\n/** @hidden */\nexport var cellSelectionComplete = 'cellselected';\n/** @hidden */\nexport var beforeCellFocused = 'beforecellfocused';\n/** @hidden */\nexport var cellFocused = 'cellfocused';\n/** @hidden */\nexport var keyPressed = 'key-pressed';\n/** @hidden */\nexport var click = 'click';\n/** @hidden */\nexport var destroy = 'destroy';\n/** @hidden */\nexport var columnVisibilityChanged = 'column-visible-changed';\n/** @hidden */\nexport var scroll = 'scroll';\n/** @hidden */\nexport var columnWidthChanged = 'column-width-changed';\n/** @hidden */\nexport var columnPositionChanged = 'column-position-changed';\n/** @hidden */\nexport var rowDragAndDrop = 'row-drag-and-drop';\n/** @hidden */\nexport var rowsAdded = 'rows-added';\n/** @hidden */\nexport var rowsRemoved = 'rows-removed';\n/** @hidden */\nexport var columnDragStop = 'column-drag-stop';\n/** @hidden */\nexport var headerDrop = 'header-drop';\n/** @hidden */\nexport var dataSourceModified = 'datasource-modified';\n/** @hidden */\nexport var refreshComplete = 'refresh-complete';\n/** @hidden */\nexport var refreshVirtualBlock = 'refresh-virtual-block';\n/** @hidden */\nexport var dblclick = 'dblclick';\n/** @hidden */\nexport var toolbarRefresh = 'toolbar-refresh';\n/** @hidden */\nexport var bulkSave = 'bulk-save';\n/** @hidden */\nexport var autoCol = 'auto-col';\n/** @hidden */\nexport var tooltipDestroy = 'tooltip-destroy';\n/** @hidden */\nexport var updateData = 'update-data';\n/** @hidden */\nexport var editBegin = 'edit-begin';\n/** @hidden */\nexport var editComplete = 'edit-complete';\n/** @hidden */\nexport var addBegin = 'add-begin';\n/** @hidden */\nexport var addComplete = 'add-complete';\n/** @hidden */\nexport var saveComplete = 'save-complete';\n/** @hidden */\nexport var deleteBegin = 'delete-begin';\n/** @hidden */\nexport var deleteComplete = 'delete-complete';\n/** @hidden */\nexport var preventBatch = 'prevent-batch';\n/** @hidden */\nexport var dialogDestroy = 'dialog-destroy';\n/** @hidden */\nexport var crudAction = 'crud-Action';\n/** @hidden */\nexport var addDeleteAction = 'add-delete-Action';\n/** @hidden */\nexport var destroyForm = 'destroy-form';\n/** @hidden */\nexport var doubleTap = 'double-tap';\n/** @hidden */\nexport var beforeExcelExport = 'beforeExcelExport';\n/** @hidden */\nexport var excelExportComplete = 'excelExportComplete';\n/** @hidden */\nexport var excelQueryCellInfo = 'excelQueryCellInfo';\n/** @hidden */\nexport var excelHeaderQueryCellInfo = 'excelHeaderQueryCellInfo';\n/** @hidden */\nexport var exportDetailDataBound = 'exportDetailDataBound';\n/** @hidden */\nexport var beforePdfExport = 'beforePdfExport';\n/** @hidden */\nexport var pdfExportComplete = 'pdfExportComplete';\n/** @hidden */\nexport var pdfQueryCellInfo = 'pdfQueryCellInfo';\n/** @hidden */\nexport var pdfHeaderQueryCellInfo = 'pdfHeaderQueryCellInfo';\n/** @hidden */\nexport var accessPredicate = 'access-predicate';\n/** @hidden */\nexport var contextMenuClick = 'contextMenuClick';\n/** @hidden */\nexport var freezeRender = 'freezerender';\n/** @hidden */\nexport var freezeRefresh = 'freezerefresh';\n/** @hidden */\nexport var contextMenuOpen = 'contextMenuOpen';\n/** @hidden */\nexport var columnMenuClick = 'columnMenuClick';\n/** @hidden */\nexport var columnMenuOpen = 'columnMenuOpen';\n/** @hidden */\nexport var filterOpen = 'filterOpen';\n/** @hidden */\nexport var filterDialogCreated = 'filterDialogCreated';\n/** @hidden */\nexport var filterMenuClose = 'filter-menu-close';\n/** @hidden */\nexport var initForeignKeyColumn = 'initForeignKeyColumn';\n/** @hidden */\nexport var getForeignKeyData = 'getForeignKeyData';\n/** @hidden */\nexport var generateQuery = 'generateQuery';\n/** @hidden */\nexport var showEmptyGrid = 'showEmptyGrid';\n/** @hidden */\nexport var foreignKeyData = 'foreignKeyData';\n/** @hidden */\nexport var columnDataStateChange = 'columnDataStateChange';\n/** @hidden */\nexport var dataStateChange = 'dataStateChange';\n/** @hidden */\nexport var dataSourceChanged = 'dataSourceChanged';\n/** @hidden */\nexport var rtlUpdated = 'rtl-updated';\n/** @hidden */\nexport var beforeFragAppend = 'beforeFragAppend';\n/** @hidden */\nexport var frozenHeight = 'frozenHeight';\n/** @hidden */\nexport var textWrapRefresh = 'textWrapRefresh';\n/** @hidden */\nexport var recordAdded = 'recordAdded';\n/** @hidden */\nexport var cancelBegin = 'cancel-Begin';\n/** @hidden */\nexport var editNextValCell = 'editNextValCell';\n/** @hidden */\nexport var hierarchyPrint = 'hierarchyprint';\n/** @hidden */\nexport var expandChildGrid = 'expandchildgrid';\n/** @hidden */\nexport var printGridInit = 'printGrid-Init';\n/** @hidden */\nexport var exportRowDataBound = 'export-RowDataBound';\n/** @hidden */\nexport var exportDataBound = 'export-DataBound';\n/** @hidden */\nexport var rowPositionChanged = 'row-position-changed';\n/** @hidden */\nexport var columnChooserOpened = 'columnChooserOpened';\n/** @hidden */\nexport var batchForm = 'batchedit-form';\n/** @hidden */\nexport var beforeStartEdit = 'edit-form';\n/** @hidden */\nexport var beforeBatchCancel = 'before-batch-cancel';\n/** @hidden */\nexport var batchEditFormRendered = 'batcheditform-rendered';\n/** @hidden */\nexport var partialRefresh = 'partial-refresh';\n/** @hidden */\nexport var beforeCustomFilterOpen = 'beforeCustomFilterOpen';\n/** @hidden */\nexport var selectVirtualRow = 'select-virtual-Row';\n/** @hidden */\nexport var columnsPrepared = 'columns-prepared';\n/** @hidden */\nexport var cBoxFltrBegin = 'cbox-filter-begin';\n/** @hidden */\nexport var cBoxFltrComplete = 'cbox-filter-complete';\n/** @hidden */\nexport var fltrPrevent = 'filter-Prevent';\n/** @hidden */\nexport var beforeFltrcMenuOpen = 'before-filter-cmenu-open';\n/** @hidden */\nexport var valCustomPlacement = 'validation-custom-placement';\n/** @hidden */\nexport var filterCboxValue = 'filter-cbox-value';\n/** @hidden */\nexport var componentRendered = 'component-rendered';\n/** @hidden */\nexport var restoreFocus = 'restore-Focus';\n/** @hidden */\nexport var detailStateChange = 'detail-state-change';\n/** @hidden */\nexport var detailIndentCellInfo = 'detail-indentcell-info';\n/** @hidden */\nexport var virtaulKeyHandler = 'virtaul-key-handler';\n/** @hidden */\nexport var virtaulCellFocus = 'virtaul-cell-focus';\n/** @hidden */\nexport var virtualScrollEditActionBegin = 'virtual-scroll-edit-action-begin';\n/** @hidden */\nexport var virtualScrollEditSuccess = 'virtual-scroll-edit-success';\n/** @hidden */\nexport var virtualScrollEditCancel = 'virtual-scroll-edit-cancel';\n/** @hidden */\nexport var virtualScrollEdit = 'virtual-scroll-edit';\n/** @hidden */\nexport var refreshVirtualCache = 'refresh-virtual-cache';\n/** @hidden */\nexport var editReset = 'edit-reset';\n/** @hidden */\nexport var virtualScrollAddActionBegin = 'virtual-scroll-add-action-begin';\n/** @hidden */\nexport var getVirtualData = 'get-virtual-data';\n/** @hidden */\nexport var refreshInfiniteModeBlocks = 'refresh-infinite-mode-blocks';\n/** @hidden */\nexport var resetInfiniteBlocks = 'reset-infinite-blocks';\n/** @hidden */\nexport var infiniteScrollHandler = 'infinite-scroll-handler';\n/** @hidden */\nexport var infinitePageQuery = 'infinite-page-query';\n/** @hidden */\nexport var infiniteShowHide = 'infinite-show-hide';\n/** @hidden */\nexport var appendInfiniteContent = 'append-infinite-content';\n/** @hidden */\nexport var removeInfiniteRows = 'remove-infinite-rows';\n/** @hidden */\nexport var setInfiniteCache = 'set-infinite-cache';\n/** @hidden */\nexport var infiniteEditHandler = 'infinite-edit-handler';\n/** @hidden */\nexport var initialCollapse = 'initial-collapse';\n/** @hidden */\nexport var getAggregateQuery = 'get-aggregate-query';\n/** @hidden */\nexport var closeFilterDialog = 'close-filter-dialog';\n/** @hidden */\nexport var columnChooserCancelBtnClick = 'columnChooserCancelBtnClick';\n/** @hidden */\nexport var getFilterBarOperator = 'get-filterbar-operator';\n/** @hidden */\nexport var resetColumns = 'reset-columns';\n/** @hidden */\nexport var pdfAggregateQueryCellInfo = 'pdfAggregateQueryCellInfo';\n/** @hidden */\nexport var excelAggregateQueryCellInfo = 'excelAggregateQueryCellInfo';\n/** @hidden */\nexport var setGroupCache = 'group-cache';\n/** @hidden */\nexport var lazyLoadScrollHandler = 'lazy-load-scroll-handler';\n/** @hidden */\nexport var groupCollapse = 'group-collapse';\n/** @hidden */\nexport var beforeCheckboxRenderer = 'beforeCheckboxRenderer';\n/** @hidden */\nexport var refreshHandlers = 'refreshResizeHandlers';\n/** @hidden */\nexport var refreshFrozenColumns = 'refresh-frozen-columns';\n/** @hidden */\nexport var setReorderDestinationElement = 'set-reorder-destination-element';\n/** @hidden */\nexport var refreshVirtualFrozenHeight = 'refresh-virtual-frozen-height';\n/** @hidden */\nexport var setFreezeSelection = 'set-freeze-selection';\n/** @hidden */\nexport var setInfiniteFrozenHeight = 'set-infinite-frozen-height';\n/** @hidden */\nexport var setInfiniteColFrozenHeight = 'set-infinite-col-frozen-height';\n/** @hidden */\nexport var beforeRefreshOnDataChange = 'before-refresh-on-data-change';\n/** @hidden */\nexport var immutableBatchCancel = 'immutable-batch-cancel';\n/** @hidden */\nexport var refreshVirtualFrozenRows = 'refresh-virtual-frozenrows';\n/** @hidden */\nexport var checkScrollReset = 'check-scroll-reset';\n/** @hidden */\nexport var refreshFrozenHeight = 'refresh-frozen-height';\n/** @hidden */\nexport var setHeightToFrozenElement = 'set-height-to-frozen-element';\n/** @hidden */\nexport var preventFrozenScrollRefresh = 'prevent-frozen-scroll-refresh';\n/** @hidden */\nexport var nextCellIndex = 'next-cell-index';\n/** @hidden */\nexport var refreshInfiniteCurrentViewData = 'refresh-infinite-current-view-data';\n/** @hidden */\nexport var infiniteCrudCancel = 'infinite-crud-cancel';\n/** @hidden */\nexport var filterDialogClose = 'filter-dialog-close';\n/** @hidden */\nexport var refreshCustomFilterOkBtn = 'refresh-cutsom-filter-ok-button';\n/** @hidden */\nexport var refreshCustomFilterClearBtn = 'refresh-cutsom-filter-clear-button';\n/** @hidden */\nexport var renderResponsiveCmenu = 'render-responsive-cmenu';\n/** @hidden */\nexport var filterCmenuSelect = 'filter-cmenu-select';\n/** @hidden */\nexport var customFilterClose = 'custom-filter-close';\n/** @hidden */\nexport var setFullScreenDialog = 'set-fullscreen-dialog';\n/** @hidden */\nexport var refreshExpandandCollapse = 'refresh-Expand-and-Collapse';\n/** @hidden */\nexport var rowModeChange = 'row-mode-change';\n/** @hidden */\nexport var enterKeyHandler = 'enter-key-handler';\n/** @hidden */\nexport var refreshVirtualMaxPage = 'refresh-virtual-max-page';\n/** @hidden */\nexport var setVirtualPageQuery = 'set-virtual-page-query';\n/** @hidden */\nexport var selectRowOnContextOpen = 'select-row-on-context-open';\n/** @hidden */\nexport var pagerRefresh = 'pager-refresh';\n/** @hidden */\nexport var closeInline = 'closeinline';\n/** @hidden */\nexport var closeBatch = 'closebatch';\n/** @hidden */\nexport var closeEdit = 'close-edit';\n/** @hidden */\nexport var resetVirtualFocus = 'reset-virtual-focus';\n/** @hidden */\nexport var afterContentRender = 'after-content-renderer';\n/** @hidden */\nexport var refreshVirtualEditFormCells = 'refresh-virtual-editform-cells';\n/** @hidden */\nexport var scrollToEdit = 'scroll-to-edit';\n/** @hidden */\nexport var beforeCheckboxRendererQuery = 'before-checkbox-renderer-query';\n/** @hidden */\nexport var createVirtualValidationForm = 'create-virtual-validation-form';\n/** @hidden */\nexport var validateVirtualForm = 'validate-virtual-form';\n/** @hidden */\nexport var destroyChildGrid = 'destroy-child-grid';\n/** @hidden */\nexport var stickyScrollComplete = 'sticky-scroll-complete';\n/** @hidden */\nexport var captionActionComplete = 'infinite-group-collapse';\n/** @hidden */\nexport var refreshInfinitePersistSelection = 'refresh-infinite-persist-selection';\n/** @hidden */\nexport var refreshInfiniteEditrowindex = 'refresh-infinite-editrowindex';\n/** @hidden */\nexport var afterFilterColumnMenuClose = 'after-filter-column-menu-close';\n/** @hidden */\nexport var beforeCheckboxfilterRenderer = 'beforeCheckboxfilterRenderer';\n/** @hidden */\nexport var commandColumnDestroy = 'commandColumnDestroy';\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Internationalization, setCulture } from '@syncfusion/ej2-base';\n/**\n * ValueFormatter class to globalize the value.\n *\n * @hidden\n */\nvar ValueFormatter = /** @class */ (function () {\n function ValueFormatter(cultureName) {\n this.intl = new Internationalization();\n if (!isNullOrUndefined(cultureName)) {\n this.intl.culture = cultureName;\n }\n }\n ValueFormatter.prototype.getFormatFunction = function (format) {\n if (format.type) {\n return this.intl.getDateFormat(format);\n }\n else {\n return this.intl.getNumberFormat(format);\n }\n };\n ValueFormatter.prototype.getParserFunction = function (format) {\n if (format.type) {\n return this.intl.getDateParser(format);\n }\n else {\n return this.intl.getNumberParser(format);\n }\n };\n ValueFormatter.prototype.fromView = function (value, format, type) {\n if ((type === 'date' || type === 'datetime' || type === 'number') && (!isNullOrUndefined(format))) {\n return format(value);\n }\n else {\n return value;\n }\n };\n ValueFormatter.prototype.toView = function (value, format) {\n var result = value;\n if (!isNullOrUndefined(format) && !isNullOrUndefined(value)) {\n result = format(value);\n }\n return result;\n };\n ValueFormatter.prototype.setCulture = function (cultureName) {\n if (!isNullOrUndefined(cultureName)) {\n setCulture(cultureName);\n }\n };\n return ValueFormatter;\n}());\nexport { ValueFormatter };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { merge, isNullOrUndefined, extend, Property } from '@syncfusion/ej2-base';\nimport { Query, DataUtil } from '@syncfusion/ej2-data';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { getUid, templateCompiler, getForeignData, getObject } from '../base/util';\n/**\n * Represents Grid `Column` model class.\n */\nvar Column = /** @class */ (function () {\n function Column(options, parent) {\n var _this = this;\n /**\n * If `disableHtmlEncode` is set to true, it encodes the HTML of the header and content cells.\n *\n * @default true\n */\n this.disableHtmlEncode = true;\n /**\n * If `allowSorting` set to false, then it disables sorting option of a particular column.\n * By default all columns are sortable.\n *\n * @default true\n */\n this.allowSorting = true;\n /**\n * If `allowResizing` is set to false, it disables resize option of a particular column.\n * By default all the columns can be resized.\n *\n * @default true\n */\n this.allowResizing = true;\n /**\n * If `allowFiltering` set to false, then it disables filtering option and filter bar element of a particular column.\n * By default all columns are filterable.\n *\n * @default true\n */\n this.allowFiltering = true;\n /**\n * If `allowGrouping` set to false, then it disables grouping of a particular column.\n * By default all columns are groupable.\n *\n * @default true\n */\n this.allowGrouping = true;\n /**\n * If `allowReordering` set to false, then it disables reorder of a particular column.\n * By default all columns can be reorder.\n *\n * @default true\n */\n this.allowReordering = true;\n /**\n * If `showColumnMenu` set to false, then it disable the column menu of a particular column.\n * By default column menu will show for all columns\n *\n * @default true\n */\n this.showColumnMenu = true;\n /**\n * If `enableGroupByFormat` set to true, then it groups the particular column by formatted values.\n *\n * @default true\n */\n this.enableGroupByFormat = false;\n /**\n * If `allowEditing` set to false, then it disables editing of a particular column.\n * By default all columns are editable.\n *\n * @default true\n */\n this.allowEditing = true;\n /**\n * It is used to customize the default filter options for a specific columns.\n * * type - Specifies the filter type as menu or checkbox.\n * * ui - to render custom component for specific column it has following functions.\n * * ui.create – It is used for creating custom components.\n * * ui.read - It is used for read the value from the component.\n * * ui.write - It is used to apply component model as dynamically.\n * {% codeBlock src=\"grid/filter-menu-api/index.ts\" %}{% endcodeBlock %}\n *\n * > Check the [`Filter UI`](../../grid/filtering/filter-menu/#custom-component-in-filter-menu) for its customization.\n *\n * @default {}\n */\n this.filter = {};\n /**\n * If `showInColumnChooser` set to false, then hide the particular column in column chooser.\n * By default all columns are displayed in column Chooser.\n *\n * @default true\n */\n this.showInColumnChooser = true;\n /**\n * Defines the `IEditCell` object to customize default edit cell.\n *\n * @default {}\n */\n this.edit = {};\n /**\n * If `allowSearching` set to false, then it disables Searching of a particular column.\n * By default all columns allow Searching.\n *\n * @default true\n */\n this.allowSearching = true;\n /**\n * If `autoFit` set to true, then the particular column content width will be\n * adjusted based on its content in the initial rendering itself.\n * Setting this property as true is equivalent to calling `autoFitColumns` method in the `dataBound` event.\n *\n * @default false\n */\n this.autoFit = false;\n this.sortDirection = 'Descending';\n /**\n * @returns {Function} returns the edit template\n * @hidden */\n this.getEditTemplate = function () { return _this.editTemplateFn; };\n /**\n * @returns {Function} returns the filter template\n * @hidden */\n this.getFilterTemplate = function () { return _this.filterTemplateFn; };\n merge(this, options);\n this.parent = parent;\n if (this.type === 'none') {\n this.type = null;\n }\n else if (this.type) {\n this.type = typeof (this.type) === 'string' ? this.type.toLowerCase() : undefined;\n }\n if (this.editType) {\n this.editType = this.editType.toLowerCase();\n }\n if (isNullOrUndefined(this.uid)) {\n this.uid = getUid('grid-column');\n }\n var valueFormatter = new ValueFormatter();\n if (options.format && (options.format.skeleton || (options.format.format &&\n typeof options.format.format === 'string'))) {\n this.setFormatter(valueFormatter.getFormatFunction(extend({}, options.format)));\n this.setParser(valueFormatter.getParserFunction(options.format));\n }\n this.toJSON = function () {\n var col = {};\n var skip = ['filter', 'dataSource', 'headerText', 'template', 'headerTemplate', 'edit',\n 'editTemplate', 'filterTemplate', 'commandsTemplate', 'parent'];\n var keys = Object.keys(_this);\n for (var i = 0; i < keys.length; i++) {\n if (keys[i] === 'columns') {\n col[keys[i]] = [];\n for (var j = 0; j < _this[keys[i]].length; j++) {\n col[keys[i]].push(_this[keys[i]][j].toJSON());\n }\n }\n else if (skip.indexOf(keys[i]) < 0) {\n col[keys[i]] = _this[keys[i]];\n }\n }\n return col;\n };\n if (!this.field) {\n this.allowFiltering = false;\n this.allowGrouping = false;\n this.allowSorting = false;\n if (this.columns) {\n this.allowResizing = this.columns.some(function (col) {\n return col.allowResizing;\n });\n }\n }\n if (this.commands && !this.textAlign) {\n this.textAlign = 'Right';\n }\n if (this.template || this.commandsTemplate) {\n this.templateFn = templateCompiler(this.template || this.commandsTemplate);\n }\n if (this.headerTemplate) {\n this.headerTemplateFn = templateCompiler(this.headerTemplate);\n }\n if (!isNullOrUndefined(this.filter) && this.filter.itemTemplate) {\n this.fltrTemplateFn = templateCompiler(this.filter.itemTemplate);\n }\n if (this.editTemplate) {\n this.editTemplateFn = templateCompiler(this.editTemplate);\n }\n if (this.filterTemplate) {\n this.filterTemplateFn = templateCompiler(this.filterTemplate);\n }\n if (this.isForeignColumn() &&\n (isNullOrUndefined(this.editType) || this.editType === 'dropdownedit' || this.editType === 'defaultedit')) {\n this.editType = 'dropdownedit';\n 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[i]] = column[keys[i]];\n //Refresh the react columnTemplates on state change\n if (this.parent && this.parent.isReact) {\n if (keys[i] === 'template') {\n this.parent.refreshReactColumnTemplateByUid(this.uid);\n }\n else if (keys[i] === 'headerTemplate') {\n this.headerTemplateFn = templateCompiler(column[keys[i]]);\n this.parent.refreshReactHeaderTemplateByUid(this.uid);\n }\n else if (keys[i] === 'editTemplate') {\n this.editTemplateFn = templateCompiler(column[keys[i]]);\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","/**\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","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`](grid/#printmode-string/).\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[i] = extend({}, printGrid.columns[i]);\n if (gObj.isFrozenGrid() && !gObj.getFrozenColumns()) {\n printGrid.columns[i].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 printGrid.trigger = gObj.trigger;\n };\n Print.prototype.contentReady = function () {\n if (this.isPrintGrid()) {\n var gObj = this.parent;\n if (this.isAsyncPrint) {\n this.printGrid();\n return;\n }\n var args = {\n requestType: 'print',\n element: gObj.element,\n selectedRows: gObj.getContentTable().querySelectorAll('tr[aria-selected=\"true\"]'),\n cancel: false,\n hierarchyPrintMode: gObj.hierarchyPrintMode\n };\n if (!this.isAsyncPrint) {\n gObj.trigger(events.beforePrint, args);\n }\n if (args.cancel) {\n detach(gObj.element);\n return;\n }\n if (!this.isAsyncPrint) {\n this.printGrid();\n }\n }\n };\n Print.prototype.printGrid = function () {\n var gObj = this.parent;\n // Height adjustment on print grid\n if (gObj.height !== 'auto') { // if scroller enabled\n var cssProps = this.scrollModule.getCssProperties();\n var contentDiv = gObj.element.querySelector('.' + 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[i].setAttribute('colspan', colSpan);\n }\n var colGroups = selectAll(\"colgroup\" + id + \"colgroup\", element);\n var contentColGroups = selectAll('.e-content colgroup', element);\n this.hideColGroup(colGroups, depth);\n this.hideColGroup(contentColGroups, depth);\n };\n Print.prototype.hideColGroup = function (colGroups, depth) {\n for (var i = 0; i < colGroups.length; i++) {\n for (var j = 0; j < depth; j++) {\n colGroups[i].children[j].style.display = 'none';\n }\n }\n };\n /**\n * To destroy the print\n *\n * @returns {boolean} returns the isPrintGrid or not\n * @hidden\n */\n Print.prototype.isPrintGrid = function () {\n return this.parent.element.id.indexOf('_print') > 0 && this.parent.isPrinting;\n };\n /**\n * To destroy the print\n *\n * @returns {void}\n * @hidden\n */\n Print.prototype.destroy = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.contentReady, this.contentReady.bind(this));\n this.parent.removeEventListener(events.actionBegin, this.actionBeginFunction);\n this.parent.off(events.onEmpty, this.onEmpty.bind(this));\n this.parent.off(events.hierarchyPrint, this.hierarchyPrint);\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Print.prototype.getModuleName = function () {\n return 'print';\n };\n Print.printGridProp = getCloneProperties().concat([events.beforePrint, events.printComplete, events.load]);\n return Print;\n}());\nexport { Print };\n","import { ChildProperty, compile as baseTemplateComplier, setValue, Internationalization, isUndefined, closest } from '@syncfusion/ej2-base';\nimport { extend as baseExtend, isNullOrUndefined, getValue, classList } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, addClass, attributes, remove, createElement, removeClass } from '@syncfusion/ej2-base';\nimport { isObject, select, selectAll } from '@syncfusion/ej2-base';\nimport { DataUtil, Query, DataManager, Predicate, UrlAdaptor, Deferred } from '@syncfusion/ej2-data';\nimport { Column } from '../models/column';\nimport { calculateRelativeBasedPosition } from '@syncfusion/ej2-popups';\nimport { Print } from '../actions/print';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\nimport * as literals from '../base/string-literals';\n//https://typescript.codeplex.com/discussions/401501\n/**\n * Function to check whether target object implement specific interface\n *\n * @param {Object} target - specifies the target\n * @param {string} checkFor - specifies the checkfors\n * @returns {boolean} returns the boolean\n * @hidden\n */\nexport function doesImplementInterface(target, checkFor) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return target.prototype && checkFor in target.prototype;\n}\n/**\n * Function to get value from provided data\n *\n * @param {string} field - specifies the field\n * @param {Object} data - specifies the data\n * @param {ColumnModel} column - specifies the column\n * @returns {Object} returns the object\n * @hidden\n */\n// eslint-disable-next-line\nexport function valueAccessor(field, data, column) {\n return (isNullOrUndefined(field) || field === '') ? '' : DataUtil.getObject(field, data);\n}\n/**\n * Defines the method used to apply custom header cell values from external function and display this on each header cell rendered.\n *\n * @param {string} field - specifies the field\n * @param {ColumnModel} column - specifies the column\n * @returns {object} headerValueAccessor\n * @hidden\n */\nexport function headerValueAccessor(field, column) {\n return (isNullOrUndefined(field) || field === '') ? '' : DataUtil.getObject(field, column);\n}\n/**\n * The function used to update Dom using requestAnimationFrame.\n *\n * @param {Function} updateFunction - Function that contains the actual action\n * @param {object} callBack - defines the callback\n * @returns {void}\n * @hidden\n */\n// eslint-disable-next-line\nexport function getUpdateUsingRaf(updateFunction, callBack) {\n requestAnimationFrame(function () {\n try {\n callBack(null, updateFunction());\n }\n catch (e) {\n callBack(e);\n }\n });\n}\n/**\n * @hidden\n * @param {PdfExportProperties | ExcelExportProperties} exportProperties - Defines the export properties\n * @returns {boolean} Returns isExportColumns\n */\nexport function isExportColumns(exportProperties) {\n return !isNullOrUndefined(exportProperties) &&\n !isNullOrUndefined(exportProperties.columns) && exportProperties.columns.length > 0;\n}\n/**\n * @param {PdfExportProperties | ExcelExportProperties} exportProperties - Defines the export properties\n * @param {IGrid} gObj - Defines the grid object\n * @returns {void}\n * @hidden\n */\nexport function updateColumnTypeForExportColumns(exportProperties, gObj) {\n var exportColumns = exportProperties.columns;\n var gridColumns = gObj.columns;\n for (var i = 0; i < exportColumns.length; i++) {\n if (gridColumns.length - 1 >= i) {\n if (gridColumns[i].columns) {\n for (var j = 0; j < gridColumns[i].columns.length; j++) {\n exportColumns[i].columns[j].type = gridColumns[i].columns[j].type;\n }\n }\n else {\n exportColumns[i].type = gridColumns[i].type;\n }\n }\n }\n}\n/**\n * @hidden\n * @param {IGrid} grid - Defines the grid\n * @returns {void}\n */\nexport function updatecloneRow(grid) {\n var nRows = [];\n var actualRows = grid.vRows;\n for (var i = 0; i < actualRows.length; i++) {\n if (actualRows[i].isDataRow) {\n nRows.push(actualRows[i]);\n }\n else if (!actualRows[i].isDataRow) {\n nRows.push(actualRows[i]);\n if (!actualRows[i].isExpand && actualRows[i].isCaptionRow) {\n i += getCollapsedRowsCount(actualRows[i], grid);\n }\n }\n }\n grid.vcRows = nRows;\n}\nvar count = 0;\n/**\n * @hidden\n * @param {Row} val - Defines the value\n * @param {IGrid} grid - Defines the grid\n * @returns {number} Returns the collapsed row count\n */\nexport function getCollapsedRowsCount(val, grid) {\n count = 0;\n var gSummary = 'gSummary';\n var total = 'count';\n var gLen = grid.groupSettings.columns.length;\n var records = 'records';\n var items = 'items';\n var value = val[gSummary];\n var dataRowCnt = 0;\n var agrCnt = 'aggregatesCount';\n if (value === val.data[total]) {\n if (grid.groupSettings.columns.length && !isNullOrUndefined(val[agrCnt]) && val[agrCnt]) {\n if (grid.groupSettings.columns.length !== 1) {\n count += (val.indent !== 0 && (value) < 2) ? (val[gSummary] * ((gLen - val.indent) + (gLen - val.indent) * val[agrCnt])) :\n (val[gSummary] * ((gLen - val.indent) + (gLen - val.indent - 1) * val[agrCnt])) + val[agrCnt];\n }\n else if (grid.groupSettings.columns.length === 1) {\n count += (val[gSummary] * (gLen - val.indent)) + val[agrCnt];\n }\n }\n else if (grid.groupSettings.columns.length) {\n if (grid.groupSettings.columns.length !== 1) {\n count += val[gSummary] * (grid.groupSettings.columns.length - val.indent);\n }\n else {\n count += val[gSummary];\n }\n }\n return count;\n }\n else {\n for (var i = 0, len = val.data[items].length; i < len; i++) {\n var gLevel = val.data[items][i];\n count += gLevel[items].length + ((gLen !== grid.columns.length) &&\n !isNullOrUndefined(gLevel[items][records]) ? gLevel[items][records].length : 0);\n dataRowCnt += (!isNullOrUndefined(gLevel[items][records]) && !isNullOrUndefined(val[agrCnt])) ? gLevel[items][records].length :\n gLevel[items].length;\n if (gLevel[items].GroupGuid && gLevel[items].childLevels !== 0) {\n recursive(gLevel);\n }\n }\n count += val.data[items].length;\n if (!isNullOrUndefined(val[agrCnt])) {\n if (val[agrCnt] && count && dataRowCnt !== 0) {\n count += ((count - dataRowCnt) * val[agrCnt]) + val[agrCnt];\n }\n }\n }\n return count;\n}\n/**\n * @param {Object[]} row - Defines the row\n * @returns {void}\n * @hidden\n */\nexport function recursive(row) {\n var items = 'items';\n var rCount = 'count';\n for (var j = 0, length_1 = row[items].length; j < length_1; j++) {\n var nLevel = row[items][j];\n count += nLevel[rCount];\n if (nLevel[items].childLevels !== 0) {\n recursive(nLevel);\n }\n }\n}\n/**\n * @param {Object[]} collection - Defines the array\n * @param {Object} predicate - Defines the predicate\n * @returns {Object} Returns the object\n * @hidden\n */\nexport function iterateArrayOrObject(collection, predicate) {\n var result = [];\n for (var i = 0, len = collection.length; i < len; i++) {\n var pred = predicate(collection[i], i);\n if (!isNullOrUndefined(pred)) {\n result.push(pred);\n }\n }\n return result;\n}\n/**\n * @param {Object[]} array - Defines the array\n * @returns {Object} Returns the object\n * @hidden\n */\nexport function iterateExtend(array) {\n var obj = [];\n for (var i = 0; i < array.length; i++) {\n obj.push(baseExtend({}, getActualProperties(array[i]), {}, true));\n }\n return obj;\n}\n/**\n * @param {string} template - Defines the template\n * @returns {Function} Returns the function\n * @hidden\n */\nexport function templateCompiler(template) {\n if (template) {\n try {\n if (document.querySelectorAll(template).length) {\n return baseTemplateComplier(document.querySelector(template).innerHTML.trim());\n }\n else {\n return baseTemplateComplier(template);\n }\n }\n catch (e) {\n return baseTemplateComplier(template);\n }\n }\n return undefined;\n}\n/**\n * @param {Element} node - Defines the column\n * @param {Object} customAttributes - Defines the index\n * @returns {void}\n * @hidden\n */\nexport function setStyleAndAttributes(node, customAttributes) {\n var copyAttr = {};\n var literals = ['style', 'class'];\n //Dont touch the original object - make a copy\n baseExtend(copyAttr, customAttributes, {});\n if ('style' in copyAttr) {\n setStyleAttribute(node, copyAttr[literals[0]]);\n delete copyAttr[literals[0]];\n }\n if ('class' in copyAttr) {\n addClass([node], copyAttr[literals[1]]);\n delete copyAttr[literals[1]];\n }\n attributes(node, copyAttr);\n}\n/**\n * @param {Object} copied - Defines the column\n * @param {Object} first - Defines the inndex\n * @param {Object} second - Defines the second object\n * @param {string[]} exclude - Defines the exclude\n * @returns {Object} Returns the object\n * @hidden\n */\nexport function extend(copied, first, second, exclude) {\n var moved = baseExtend(copied, first, second);\n var values = Object.keys(moved);\n for (var i = 0; i < values.length; i++) {\n if (exclude && exclude.indexOf(values[i]) !== -1) {\n delete moved[values[i]];\n }\n }\n return moved;\n}\n/**\n * @param {Column[]} columnModel - Defines the column\n * @param {number} ind - Defines the inndex\n * @returns {number} - Returns the columnindex\n * @hidden\n */\nexport function setColumnIndex(columnModel, ind) {\n if (ind === void 0) { ind = 0; }\n for (var i = 0, len = columnModel.length; i < len; i++) {\n if (columnModel[i].columns) {\n columnModel[i].index = isNullOrUndefined(columnModel[i].index) ? ind : columnModel[i].index;\n ind++;\n ind = setColumnIndex(columnModel[i].columns, ind);\n }\n else {\n columnModel[i].index = isNullOrUndefined(columnModel[i].index) ? ind : columnModel[i].index;\n ind++;\n }\n }\n return ind;\n}\n/**\n * @param {Column[] | string[] | ColumnModel[]} columns - Defines the column\n * @param {boolean} autoWidth - Defines the autowidth\n * @param {IGrid} gObj - Defines the class name\n * @returns {Column} - Returns the columns\n * @hidden\n */\nexport function prepareColumns(columns, autoWidth, gObj) {\n for (var c = 0, len = columns.length; c < len; c++) {\n var column = void 0;\n if (typeof columns[c] === 'string') {\n column = new Column({ field: columns[c] }, gObj);\n }\n else if (!(columns[c] instanceof Column) || columns[c].columns) {\n if (!columns[c].columns) {\n column = new Column(columns[c], gObj);\n }\n else {\n columns[c].columns = prepareColumns(columns[c].columns, null, gObj);\n column = new Column(columns[c], gObj);\n }\n }\n else {\n column = columns[c];\n }\n if (column.type && column.type.toLowerCase() === 'checkbox') {\n column.allowReordering = false;\n }\n column.headerText = isNullOrUndefined(column.headerText) ? column.foreignKeyValue || column.field || '' : column.headerText;\n column.foreignKeyField = column.foreignKeyField || column.field;\n column.valueAccessor = (typeof column.valueAccessor === 'string' ? getValue(column.valueAccessor, window)\n : column.valueAccessor) || valueAccessor;\n column.width = autoWidth && isNullOrUndefined(column.width) ? 200 : column.width;\n if (isNullOrUndefined(column.visible)) {\n column.visible = true;\n }\n columns[c] = column;\n }\n return columns;\n}\n/**\n * @param {HTMLElement} popUp - Defines the popup element\n * @param {MouseEvent | TouchEvent} e - Defines the moouse event\n * @param {string} className - Defines the class name\n * @returns {void}\n * @hidden\n */\nexport function setCssInGridPopUp(popUp, e, className) {\n var popUpSpan = popUp.querySelector('span');\n var position = popUp.parentElement.getBoundingClientRect();\n var targetPosition = e.target.getBoundingClientRect();\n popUpSpan.className = className;\n popUp.style.display = '';\n var isBottomTail = (isNullOrUndefined(e.clientY) ? e.changedTouches[0].clientY :\n e.clientY) > popUp.offsetHeight + 10;\n popUp.style.top = targetPosition.top - position.top +\n (isBottomTail ? -(popUp.offsetHeight + 10) : popUp.offsetHeight + 10) + 'px'; //10px for tail element\n popUp.style.left = getPopupLeftPosition(popUp, e, targetPosition, position.left) + 'px';\n if (isBottomTail) {\n popUp.querySelector('.e-downtail').style.display = '';\n popUp.querySelector('.e-uptail').style.display = 'none';\n }\n else {\n popUp.querySelector('.e-downtail').style.display = 'none';\n popUp.querySelector('.e-uptail').style.display = '';\n }\n}\n/**\n * @param {HTMLElement} popup - Defines the popup element\n * @param {MouseEvent | TouchEvent} e - Defines the mouse event\n * @param {Object} targetPosition - Defines the target position\n * @param {number} targetPosition.top - Defines the top position\n * @param {number} targetPosition.left - Defines the left position\n * @param {number} targetPosition.right - Defines the right position\n * @param {number} left - Defines the left position\n * @returns {number} Returns the popup left position\n * @hidden\n */\nfunction getPopupLeftPosition(popup, e, targetPosition, left) {\n var width = popup.offsetWidth / 2;\n var x = getPosition(e).x;\n if (x - targetPosition.left < width) {\n return targetPosition.left - left;\n }\n else if (targetPosition.right - x < width) {\n return targetPosition.right - left - width * 2;\n }\n else {\n return x - left - width;\n }\n}\n/**\n * @param {Object} obj - Defines the object\n * @returns {Object} Returns the Properties\n * @hidden\n */\nexport function getActualProperties(obj) {\n if (obj instanceof ChildProperty) {\n return getValue('properties', obj);\n }\n else {\n return obj;\n }\n}\n/**\n * @param {Element} elem - Defines the element\n * @param {string} selector - Defines the string selector\n * @param {boolean} isID - Defines the isID\n * @returns {Element} Returns the element\n * @hidden\n */\nexport function parentsUntil(elem, selector, isID) {\n var parent = elem;\n while (parent) {\n if (isID ? parent.id === selector : parent.classList.contains(selector)) {\n break;\n }\n parent = parent.parentElement;\n }\n return parent;\n}\n/**\n * @param {Element} element - Defines the element\n * @param {Element} elements - Defines the element\n * @returns {number} Returns the element index\n * @hidden\n */\nexport function getElementIndex(element, elements) {\n var index = -1;\n for (var i = 0, len = elements.length; i < len; i++) {\n if (elements[i].isEqualNode(element)) {\n index = i;\n break;\n }\n }\n return index;\n}\n/**\n * @param {Object} value - Defines the value\n * @param {Object} collection - defines the collection\n * @returns {number} Returns the array\n * @hidden\n */\nexport function inArray(value, collection) {\n for (var i = 0, len = collection.length; i < len; i++) {\n if (collection[i] === value) {\n return i;\n }\n }\n return -1;\n}\n/**\n * @param {Object} collection - Defines the collection\n * @returns {Object} Returns the object\n * @hidden\n */\nexport function getActualPropFromColl(collection) {\n var coll = [];\n for (var i = 0, len = collection.length; i < len; i++) {\n // eslint-disable-next-line no-prototype-builtins\n if (collection[i].hasOwnProperty('properties')) {\n coll.push(collection[i].properties);\n }\n else {\n coll.push(collection[i]);\n }\n }\n return coll;\n}\n/**\n * @param {Element} target - Defines the target element\n * @param {string} selector - Defines the selector\n * @returns {void}\n * @hidden\n */\nexport function removeElement(target, selector) {\n var elements = [].slice.call(target.querySelectorAll(selector));\n for (var i = 0; i < elements.length; i++) {\n remove(elements[i]);\n }\n}\n/**\n * @param {MouseEvent | TouchEvent} e Defines the mouse event\n * @returns {IPosition} Returns the position\n * @hidden\n */\nexport function getPosition(e) {\n var position = {};\n position.x = (isNullOrUndefined(e.clientX) ? e.changedTouches[0].clientX :\n e.clientX);\n position.y = (isNullOrUndefined(e.clientY) ? e.changedTouches[0].clientY :\n e.clientY);\n return position;\n}\nvar uid = 0;\n/**\n * @param {string} prefix - Defines the prefix string\n * @returns {string} Returns the uid\n * @hidden\n */\nexport function getUid(prefix) {\n return prefix + uid++;\n}\n/**\n * @param {Element | DocumentFragment} elem - Defines the element\n * @param {Element[] | NodeList} children - Defines the Element\n * @returns {Element} Returns the element\n * @hidden\n */\nexport function appendChildren(elem, children) {\n for (var i = 0, len = children.length; i < len; i++) {\n if (len === children.length) {\n elem.appendChild(children[i]);\n }\n else {\n elem.appendChild(children[0]);\n }\n }\n return elem;\n}\n/**\n * @param {Element} elem - Defines the element\n * @param {string} selector - Defines the selector\n * @param {boolean} isID - Defines isID\n * @returns {Element} Return the element\n * @hidden\n */\nexport function parents(elem, selector, isID) {\n var parent = elem;\n var parents = [];\n while (parent) {\n if (isID ? parent.id === selector : parent.classList.contains(selector)) {\n parents.push(parent);\n }\n parent = parent.parentElement;\n }\n return parents;\n}\n/**\n * @param {AggregateType | string} type - Defines the type\n * @param {Object} data - Defines the data\n * @param {AggregateColumnModel} column - Defines the column\n * @param {Object} context - Defines the context\n * @returns {Object} Returns the calculated aggragate\n * @hidden\n */\nexport function calculateAggregate(type, data, column, context) {\n if (type === 'Custom') {\n var temp = column.customAggregate;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n return temp ? temp.call(context, data, column) : '';\n }\n return (column.field in data || data instanceof Array) ? DataUtil.aggregates[type.toLowerCase()](data, column.field) : null;\n}\n/** @hidden */\nvar scrollWidth = null;\n/** @hidden\n * @returns {number} - Returns the scrollbarwidth\n */\nexport function getScrollBarWidth() {\n if (scrollWidth !== null) {\n return scrollWidth;\n }\n var divNode = document.createElement('div');\n var value = 0;\n divNode.style.cssText = 'width:100px;height: 100px;overflow: scroll;position: absolute;top: -9999px;';\n document.body.appendChild(divNode);\n value = (divNode.offsetWidth - divNode.clientWidth) | 0;\n document.body.removeChild(divNode);\n return scrollWidth = value;\n}\n/** @hidden */\nvar rowHeight;\n/**\n * @param {HTMLElement} element - Defines the element\n * @returns {number} Returns the roww height\n * @hidden\n */\nexport function getRowHeight(element) {\n if (rowHeight !== undefined) {\n return rowHeight;\n }\n var table = createElement('table', { className: literals.table, styles: 'visibility: hidden', attrs: { role: 'grid' } });\n table.innerHTML = '| A | |
';\n element.appendChild(table);\n var rect = table.querySelector('td').getBoundingClientRect();\n element.removeChild(table);\n rowHeight = Math.ceil(rect.height);\n return rowHeight;\n}\n/** @hidden */\nvar actualRowHeight;\n/**\n * @param {HTMLElement} element - Defines the HTMl element\n * @returns {number} Returns the row height\n * @hidden\n */\nexport function getActualRowHeight(element) {\n if (actualRowHeight !== undefined) {\n return rowHeight;\n }\n var table = createElement('table', { className: literals.table, styles: 'visibility: hidden', attrs: { role: 'grid' } });\n table.innerHTML = '| A | |
';\n element.appendChild(table);\n var rect = table.querySelector('tr').getBoundingClientRect();\n element.removeChild(table);\n return rect.height;\n}\n/**\n * @param {string} field - Defines the field\n * @returns {boolean} - Returns is complex field\n * @hidden\n */\nexport function isComplexField(field) {\n return field.split('.').length > 1;\n}\n/**\n * @param {string} field - Defines the field\n * @returns {string} - Returns the get complex field ID\n * @hidden\n */\nexport function getComplexFieldID(field) {\n if (field === void 0) { field = ''; }\n return field.replace(/\\./g, '___');\n}\n/**\n * @param {string} field - Defines the field\n * @returns {string} - Returns the set complex field ID\n * @hidden\n */\nexport function setComplexFieldID(field) {\n if (field === void 0) { field = ''; }\n return field.replace(/___/g, '.');\n}\n/**\n * @param {Column} col - Defines the column\n * @param {string} type - Defines the type\n * @param {Element} elem - Defines th element\n * @returns {boolean} Returns is Editable\n * @hidden\n */\nexport function isEditable(col, type, elem) {\n var row = parentsUntil(elem, literals.row);\n var isOldRow = !row ? true : row && !row.classList.contains('e-insertedrow');\n if (type === 'beginEdit' && isOldRow) {\n if (col.isIdentity || col.isPrimaryKey || !col.allowEditing) {\n return false;\n }\n return true;\n }\n else if (type === 'add' && col.isIdentity) {\n return false;\n }\n else {\n if (isOldRow && !col.allowEditing && !col.isIdentity && !col.isPrimaryKey) {\n return false;\n }\n return true;\n }\n}\n/**\n * @param {IGrid} inst - Defines the IGrid\n * @returns {boolean} Returns is action prevent in boolean\n * @hidden\n */\nexport function isActionPrevent(inst) {\n var dlg = select('#' + inst.element.id + 'EditConfirm', inst.element);\n return inst.editSettings.mode === 'Batch' &&\n (selectAll('.e-updatedtd', inst.element).length) && inst.editSettings.showConfirmDialog &&\n (dlg ? dlg.classList.contains('e-popup-close') : true);\n}\n/**\n * @param {any} elem - Defines the element\n * @param {boolean} action - Defines the boolean for action\n * @returns {void}\n * @hidden\n */\n// eslint-disable-next-line\nexport function wrap(elem, action) {\n var clName = 'e-wrap';\n elem = elem instanceof Array ? elem : [elem];\n for (var i = 0; i < elem.length; i++) {\n if (action) {\n elem[i].classList.add(clName);\n }\n else {\n elem[i].classList.remove(clName);\n }\n }\n}\n/**\n * @param {ServiceLocator} serviceLocator - Defines the service locator\n * @param {Column} column - Defines the column\n * @returns {void}\n * @hidden\n */\nexport function setFormatter(serviceLocator, column) {\n var fmtr = serviceLocator.getService('valueFormatter');\n var format = 'format';\n var args;\n if (column.type === 'date' || column.type === 'datetime') {\n args = { type: column.type, skeleton: column.format };\n if ((typeof (column.format) === 'string') && column.format !== 'yMd') {\n args[format] = column.format;\n }\n }\n switch (column.type) {\n case 'date':\n column.setFormatter(fmtr.getFormatFunction(args));\n column.setParser(fmtr.getParserFunction(args));\n break;\n case 'datetime':\n column.setFormatter(fmtr.getFormatFunction(args));\n column.setParser(fmtr.getParserFunction(args));\n break;\n case 'number':\n column.setFormatter(fmtr.getFormatFunction({ format: column.format }));\n column.setParser(fmtr.getParserFunction({ format: column.format }));\n break;\n }\n}\n/**\n * @param {Element} cells - Defines the cell element\n * @param {boolean} add - Defines the add\n * @param {string} args - Defines the args\n * @returns {void}\n * @hidden\n */\nexport function addRemoveActiveClasses(cells, add) {\n var args = [];\n for (var _i = 2; _i < arguments.length; _i++) {\n args[_i - 2] = arguments[_i];\n }\n for (var i = 0, len = cells.length; i < len; i++) {\n if (add) {\n classList(cells[i], args.slice(), []);\n cells[i].setAttribute('aria-selected', 'true');\n }\n else {\n classList(cells[i], [], args.slice());\n cells[i].removeAttribute('aria-selected');\n }\n }\n}\n/**\n * @param {string} result - Defines th string\n * @returns {string} Returns the distinct staing values\n * @hidden\n */\nexport function distinctStringValues(result) {\n var temp = {};\n var res = [];\n for (var i = 0; i < result.length; i++) {\n if (!(result[i] in temp)) {\n res.push(result[i].toString());\n temp[result[i]] = 1;\n }\n }\n return res;\n}\n/**\n * @param {Element} target - Defines the target\n * @param {Dialog} dialogObj - Defines the dialog\n * @returns {void}\n * @hidden\n */\nexport function getFilterMenuPostion(target, dialogObj) {\n var elementVisible = dialogObj.element.style.display;\n dialogObj.element.style.display = 'block';\n var dlgWidth = dialogObj.width;\n var newpos = calculateRelativeBasedPosition(target, dialogObj.element);\n dialogObj.element.style.display = elementVisible;\n dialogObj.element.style.top = (newpos.top + target.getBoundingClientRect().height) - 5 + 'px';\n var leftPos = ((newpos.left - dlgWidth) + target.clientWidth);\n if (leftPos < 1) {\n dialogObj.element.style.left = (dlgWidth + leftPos) - 16 + 'px'; // right calculation\n }\n else {\n dialogObj.element.style.left = leftPos + -4 + 'px';\n }\n}\n/**\n * @param {Object} args - Defines the args\n * @param {Popup} args.popup - Defines the args for popup\n * @param {Dialog} dialogObj - Defines the dialog obj\n * @returns {void}\n * @hidden\n */\nexport function getZIndexCalcualtion(args, dialogObj) {\n args.popup.element.style.zIndex = (dialogObj.zIndex + 1).toString();\n}\n/**\n * @param {Element} elem - Defines the element\n * @returns {void}\n * @hidden\n */\nexport function toogleCheckbox(elem) {\n var span = elem.querySelector('.e-frame');\n var input = span.previousSibling;\n if (span.classList.contains('e-check')) {\n input.checked = false;\n classList(span, ['e-uncheck'], ['e-check']);\n }\n else {\n input.checked = true;\n classList(span, ['e-check'], ['e-uncheck']);\n }\n}\n/**\n * @param {HTMLInputElement} elem - Defines the element\n * @param {boolean} checked - Defines is checked\n * @returns {void}\n * @hidden\n */\nexport function setChecked(elem, checked) {\n elem.checked = checked;\n}\n/**\n * @param {string} uid - Defines the string\n * @param {Element} elem - Defines the Element\n * @param {string} className - Defines the classname\n * @returns {Element} Returns the box wrap\n * @hidden\n */\nexport function createCboxWithWrap(uid, elem, className) {\n var div = createElement('div', { className: className });\n div.appendChild(elem);\n div.setAttribute('uid', uid);\n return div;\n}\n/**\n * @param {Element} elem - Defines the element\n * @param {boolean} checked - Defines is checked\n * @returns {void}\n * @hidden\n */\nexport function removeAddCboxClasses(elem, checked) {\n removeClass([elem], ['e-check', 'e-stop', 'e-uncheck']);\n if (checked) {\n elem.classList.add('e-check');\n }\n else {\n elem.classList.add('e-uncheck');\n }\n}\n/**\n * Refresh the Row model's foreign data.\n *\n * @param {IRow} row - Grid Row model object.\n * @param {Column[]} columns - Foreign columns array.\n * @param {Object} data - Updated Row data.\n * @returns {void}\n * @hidden\n */\nexport function refreshForeignData(row, columns, data) {\n for (var i = 0; i < columns.length; i++) {\n setValue(columns[i].field, getForeignData(columns[i], data), row.foreignKeyData);\n }\n var cells = row.cells;\n for (var i = 0; i < cells.length; i++) {\n if (cells[i].isForeignKey) {\n setValue('foreignKeyData', getValue(cells[i].column.field, row.foreignKeyData), cells[i]);\n }\n }\n}\n/**\n * Get the foreign data for the corresponding cell value.\n *\n * @param {Column} column - Foreign Key column\n * @param {Object} data - Row data.\n * @param {string | number} lValue - cell value.\n * @param {Object} foreignKeyData - foreign data source.\n * @returns {Object} Returns the object\n * @hidden\n */\nexport function getForeignData(column, data, lValue, foreignKeyData) {\n var fField = column.foreignKeyField;\n var key = (!isNullOrUndefined(lValue) ? lValue : valueAccessor(column.field, data, column));\n key = isNullOrUndefined(key) ? '' : key;\n var query = new Query();\n var fdata = foreignKeyData || ((column.dataSource instanceof DataManager) && column.dataSource.dataSource.json.length ?\n column.dataSource.dataSource.json : column.columnData);\n if (key.getDay) {\n query.where(getDatePredicate({ field: fField, operator: 'equal', value: key, matchCase: false }));\n }\n else {\n query.where(fField, '==', key, false);\n }\n return new DataManager(fdata).executeLocal(query);\n}\n/**\n * To use to get the column's object by the foreign key value.\n *\n * @param {string} foreignKeyValue - Defines ForeignKeyValue.\n * @param {Column[]} columns - Array of column object.\n * @returns {Column} Returns the element\n * @hidden\n */\nexport function getColumnByForeignKeyValue(foreignKeyValue, columns) {\n var column;\n return columns.some(function (col) {\n column = col;\n return col.foreignKeyValue === foreignKeyValue;\n }) && column;\n}\n/**\n * @param {PredicateModel} filterObject - Defines the filterObject\n * @param {string} type - Defines the type\n * @returns {Predicate} Returns the Predicate\n * @hidden\n */\nexport function getDatePredicate(filterObject, type) {\n var datePredicate;\n var prevDate;\n var nextDate;\n var prevObj = baseExtend({}, getActualProperties(filterObject));\n var nextObj = baseExtend({}, getActualProperties(filterObject));\n if (isNullOrUndefined(filterObject.value) || filterObject.value === '') {\n datePredicate = new Predicate(prevObj.field, prevObj.operator, prevObj.value, false);\n return datePredicate;\n }\n var value = new Date(filterObject.value);\n if (filterObject.operator === 'equal' || filterObject.operator === 'notequal') {\n if (type === 'datetime') {\n prevDate = new Date(value.setSeconds(value.getSeconds() - 1));\n nextDate = new Date(value.setSeconds(value.getSeconds() + 2));\n filterObject.value = new Date(value.setSeconds(nextDate.getSeconds() - 1));\n }\n else {\n prevDate = new Date(value.setHours(0) - 1);\n nextDate = new Date(value.setHours(24));\n }\n prevObj.value = prevDate;\n nextObj.value = nextDate;\n if (filterObject.operator === 'equal') {\n prevObj.operator = 'greaterthan';\n nextObj.operator = 'lessthan';\n }\n else if (filterObject.operator === 'notequal') {\n prevObj.operator = 'lessthanorequal';\n nextObj.operator = 'greaterthanorequal';\n }\n var predicateSt = new Predicate(prevObj.field, prevObj.operator, prevObj.value, false);\n var predicateEnd = new Predicate(nextObj.field, nextObj.operator, nextObj.value, false);\n datePredicate = filterObject.operator === 'equal' ? predicateSt.and(predicateEnd) : predicateSt.or(predicateEnd);\n }\n else {\n if (type === 'date' && (filterObject.operator === 'lessthanorequal' || filterObject.operator === 'greaterthan')) {\n prevObj.value = new Date(value.setHours(24) - 1);\n }\n if (typeof (prevObj.value) === 'string') {\n prevObj.value = new Date(prevObj.value);\n }\n var predicates = new Predicate(prevObj.field, prevObj.operator, prevObj.value, false);\n datePredicate = predicates;\n }\n if (filterObject.setProperties) {\n filterObject.setProperties({ ejpredicate: datePredicate }, true);\n }\n else {\n filterObject.ejpredicate = datePredicate;\n }\n return datePredicate;\n}\n/**\n * @param {Element} ele - Defines the element\n * @param {number} frzCols - Defines the frozen columns\n * @param {IGrid} gObj - Defines the IGrid\n * @returns {Element} Returns the element\n * @hidden\n */\nexport function renderMovable(ele, frzCols, gObj) {\n frzCols = frzCols && gObj && gObj.isRowDragable() ? frzCols + 1 : frzCols;\n var mEle = ele.cloneNode(true);\n for (var i = 0; i < frzCols; i++) {\n mEle.removeChild(mEle.children[0]);\n }\n for (var i = frzCols, len = ele.childElementCount; i < len; i++) {\n ele.removeChild(ele.children[ele.childElementCount - 1]);\n }\n return mEle;\n}\n/**\n * @param {IGrid} grid - Defines the IGrid\n * @returns {boolean} Returns true if group adaptive is true\n * @hidden\n */\nexport function isGroupAdaptive(grid) {\n return grid.enableVirtualization && grid.groupSettings.columns.length > 0 && grid.isVirtualAdaptive;\n}\n/**\n * @param {string} field - Defines the Field\n * @param {Object} object - Defines the objec\n * @returns {any} Returns the object\n * @hidden\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function getObject(field, object) {\n if (field === void 0) { field = ''; }\n if (field) {\n var value = object;\n var splits = field.split('.');\n for (var i = 0; i < splits.length && !isNullOrUndefined(value); i++) {\n value = value[splits[i]];\n }\n return value;\n }\n}\n/**\n * @param {string | Object} format - defines the format\n * @param {string} colType - Defines the coltype\n * @returns {string} Returns the custom Data format\n * @hidden\n */\nexport function getCustomDateFormat(format, colType) {\n var intl = new Internationalization();\n var formatvalue;\n var formatter = 'format';\n var type = 'type';\n if (colType === 'date') {\n formatvalue = typeof (format) === 'object' ?\n intl.getDatePattern({ type: format[type] ? format[type] : 'date', format: format[formatter] }, false) :\n intl.getDatePattern({ type: 'dateTime', skeleton: format }, false);\n }\n else {\n formatvalue = typeof (format) === 'object' ?\n intl.getDatePattern({ type: format[type] ? format[type] : 'dateTime', format: format[formatter] }, false) :\n intl.getDatePattern({ type: 'dateTime', skeleton: format }, false);\n }\n return formatvalue;\n}\n/**\n * @param {IGrid} gObj - Defines the IGrid\n * @param {HierarchyGridPrintMode} hierarchyPrintMode - Defines the hierarchyPrintMode\n * @returns {Object} Returns the object\n * @hidden\n */\nexport function getExpandedState(gObj, hierarchyPrintMode) {\n var rows = gObj.getRowsObject();\n var obj = {};\n for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {\n var row = rows_1[_i];\n if (row.isExpand && !row.isDetailRow) {\n var index = gObj.allowPaging && gObj.printMode === 'AllPages' ? row.index +\n (gObj.pageSettings.currentPage * gObj.pageSettings.pageSize) - gObj.pageSettings.pageSize : row.index;\n obj[index] = {};\n obj[index].isExpand = true;\n obj[index].gridModel = getPrintGridModel(row.childGrid, hierarchyPrintMode);\n obj[index].gridModel.query = gObj.childGrid.query;\n }\n }\n return obj;\n}\n/**\n * @param {IGrid} gObj - Defines the grid objct\n * @param {HierarchyGridPrintMode} hierarchyPrintMode - Defines the hierarchyPrintMode\n * @returns {IGrid} Returns the IGrid\n * @hidden\n */\nexport function getPrintGridModel(gObj, hierarchyPrintMode) {\n if (hierarchyPrintMode === void 0) { hierarchyPrintMode = 'Expanded'; }\n var printGridModel = {};\n if (!gObj) {\n return printGridModel;\n }\n var isFrozen = gObj.isFrozenGrid() && !gObj.getFrozenColumns();\n for (var _i = 0, _a = Print.printGridProp; _i < _a.length; _i++) {\n var key = _a[_i];\n if (key === 'columns') {\n printGridModel[key] = getActualPropFromColl(isFrozen ? gObj.getColumns() : gObj[key]);\n }\n else if (key === 'allowPaging') {\n printGridModel[key] = gObj.printMode === 'CurrentPage';\n }\n else {\n printGridModel[key] = getActualProperties(gObj[key]);\n }\n }\n printGridModel['enableHover'] = false;\n if (gObj.childGrid && hierarchyPrintMode !== 'None') {\n printGridModel.expandedRows = getExpandedState(gObj, hierarchyPrintMode);\n }\n return printGridModel;\n}\n/**\n * @param {Object} copied - Defines the copied object\n * @param {Object} first - Defines the first object\n * @param {Object} second - Defines the second object\n * @param {boolean} deep - Defines the deep\n * @returns {Object} Returns the extended object\n * @hidden\n */\nexport function extendObjWithFn(copied, first, second, deep) {\n var res = copied || {};\n var len = arguments.length;\n if (deep) {\n len = len - 1;\n }\n for (var i = 1; i < len; i++) {\n // eslint-disable-next-line prefer-rest-params\n if (!arguments[i]) {\n continue;\n }\n // eslint-disable-next-line prefer-rest-params\n var obj1 = arguments[i];\n var keys = Object.keys(Object.getPrototypeOf(obj1)).length ?\n Object.keys(obj1).concat(getPrototypesOfObj(obj1)) : Object.keys(obj1);\n for (var i_1 = 0; i_1 < keys.length; i_1++) {\n var source = res[keys[i_1]];\n var cpy = obj1[keys[i_1]];\n var cln = void 0;\n if (deep && (isObject(cpy) || Array.isArray(cpy))) {\n if (isObject(cpy)) {\n cln = source ? source : {};\n res[keys[i_1]] = baseExtend({}, cln, cpy, deep);\n }\n else {\n cln = source ? source : [];\n res[keys[i_1]] = baseExtend([], cln, cpy, deep);\n }\n }\n else {\n res[keys[i_1]] = cpy;\n }\n }\n }\n return res;\n}\n/**\n * @param {Object} obj - Defines the obj\n * @returns {string[]} Returns the string\n * @hidden\n */\nfunction getPrototypesOfObj(obj) {\n var keys = [];\n while (Object.getPrototypeOf(obj) && Object.keys(Object.getPrototypeOf(obj)).length) {\n keys = keys.concat(Object.keys(Object.getPrototypeOf(obj)));\n obj = Object.getPrototypeOf(obj);\n }\n return keys;\n}\n/**\n * @param {Column[]} column - Defines the Column\n * @returns {number} Returns the column Depth\n * @hidden\n */\nexport function measureColumnDepth(column) {\n var max = 0;\n for (var i = 0; i < column.length; i++) {\n var depth = checkDepth(column[i], 0);\n if (max < depth) {\n max = depth;\n }\n }\n return max + 1;\n}\n/**\n * @param {Column} col - Defines the Column\n * @param {number} index - Defines the index\n * @returns {number} Returns the depth\n * @hidden\n */\nexport function checkDepth(col, index) {\n var max = index;\n var indices = [];\n if (col.columns) {\n index++;\n for (var i = 0; i < col.columns.length; i++) {\n indices[i] = checkDepth(col.columns[i], index);\n }\n for (var j = 0; j < indices.length; j++) {\n if (max < indices[j]) {\n max = indices[j];\n }\n }\n index = max;\n }\n return index;\n}\n/**\n * @param {IGrid} gObj - Defines the IGrid\n * @param {PredicateModel[]} filteredCols - Defines the PredicateModel\n * @returns {void}\n * @hidden\n */\nexport function refreshFilteredColsUid(gObj, filteredCols) {\n for (var i = 0; i < filteredCols.length; i++) {\n filteredCols[i].uid = filteredCols[i].isForeignKey ?\n getColumnByForeignKeyValue(filteredCols[i].field, gObj.getForeignKeyColumns()).uid\n : gObj.enableColumnVirtualization ? getColumnModelByFieldName(gObj, filteredCols[i].field).uid\n : gObj.getColumnByField(filteredCols[i].field).uid;\n }\n}\n/** @hidden */\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport var Global;\n(function (Global) {\n // eslint-disable-next-line prefer-const\n Global.timer = null;\n})(Global || (Global = {}));\n/**\n * @param {Element} element - Defines the element\n * @returns {Object} Returns the transform values\n * @hidden\n */\nexport function getTransformValues(element) {\n var style = document.defaultView.getComputedStyle(element, null);\n var transformV = style.getPropertyValue('transform');\n var replacedTv = transformV.replace(/,/g, '');\n var translateX = parseFloat((replacedTv).split(' ')[4]);\n var translateY = parseFloat((replacedTv).split(' ')[5]);\n return { width: translateX, height: translateY };\n}\n/**\n * @param {Element} rootElement - Defines the root Element\n * @param {Element} element - Defines the element\n * @returns {void}\n * @hidden\n */\nexport function applyBiggerTheme(rootElement, element) {\n if (rootElement.classList.contains('e-bigger')) {\n element.classList.add('e-bigger');\n }\n}\n/**\n * @param {HTMLElement} mTD - Defines the movable TD\n * @param {HTMLElement} fTD - Defines the Frozen TD\n * @returns {void}\n * @hidden\n */\nexport function alignFrozenEditForm(mTD, fTD) {\n if (mTD && fTD) {\n var mHeight = closest(mTD, '.' + literals.row).getBoundingClientRect().height;\n var fHeight = closest(fTD, '.' + literals.row).getBoundingClientRect().height;\n if (mHeight > fHeight) {\n fTD.style.height = mHeight + 'px';\n }\n else {\n mTD.style.height = fHeight + 'px';\n }\n }\n}\n/**\n * @param {Element} row - Defines row element\n * @param {IGrid} gridObj - Defines grid object\n * @returns {boolean} Returns isRowEnteredInGrid\n * @hidden\n */\nexport function ensureLastRow(row, gridObj) {\n var cntOffset = gridObj.getContent().firstElementChild.offsetHeight;\n return row && row.getBoundingClientRect().top > cntOffset;\n}\n/**\n * @param {Element} row - Defines row element\n * @param {number} rowTop - Defines row top number\n * @returns {boolean} Returns first row is true\n * @hidden\n */\nexport function ensureFirstRow(row, rowTop) {\n return row && row.getBoundingClientRect().top < rowTop;\n}\n/**\n * @param {number} index - Defines index\n * @param {IGrid} gObj - Defines grid object\n * @returns {boolean} Returns isRowEnteredInGrid\n * @hidden\n */\nexport function isRowEnteredInGrid(index, gObj) {\n var rowHeight = gObj.getRowHeight();\n var startIndex = gObj.getContent().firstElementChild.scrollTop / rowHeight;\n var endIndex = startIndex + (gObj.getContent().firstElementChild.offsetHeight / rowHeight);\n return index < endIndex && index > startIndex;\n}\n/**\n * @param {IGrid} gObj - Defines the grid object\n * @param {Object} data - Defines the query\n * @returns {number} Returns the edited data index\n * @hidden\n */\nexport function getEditedDataIndex(gObj, data) {\n var keyField = gObj.getPrimaryKeyFieldNames()[0];\n var dataIndex;\n gObj.getCurrentViewRecords().filter(function (e, index) {\n if (e[keyField] === data[keyField]) {\n dataIndex = index;\n }\n });\n return dataIndex;\n}\n/**\n * @param {Object} args - Defines the argument\n * @param {Query} query - Defines the query\n * @returns {FilterStateObj} Returns the filter state object\n * @hidden\n */\nexport function eventPromise(args, query) {\n var state = getStateEventArgument(query);\n var def = new Deferred();\n state.dataSource = def.resolve;\n state.action = args;\n return { state: state, deffered: def };\n}\n/**\n * @param {Query} query - Defines the query\n * @returns {Object} Returns the state event argument\n * @hidden\n */\nexport function getStateEventArgument(query) {\n var adaptr = new UrlAdaptor();\n var dm = new DataManager({ url: '', adaptor: new UrlAdaptor });\n var state = adaptr.processQuery(dm, query);\n var data = JSON.parse(state.data);\n return data;\n}\n/**\n * @param {IGrid} gObj - Defines the Igrid\n * @returns {boolean} Returns the ispercentageWidth\n * @hidden\n */\nexport function ispercentageWidth(gObj) {\n var columns = gObj.getVisibleColumns();\n var percentageCol = 0;\n var undefinedWidthCol = 0;\n for (var i = 0; i < columns.length; i++) {\n if (isUndefined(columns[i].width)) {\n undefinedWidthCol++;\n }\n else if (columns[i].width.toString().indexOf('%') !== -1) {\n percentageCol++;\n }\n }\n return (gObj.width === 'auto' || typeof (gObj.width) === 'string' && gObj.width.indexOf('%') !== -1) &&\n !gObj.groupSettings.showGroupedColumn && gObj.groupSettings.columns.length\n && percentageCol && !undefinedWidthCol;\n}\n/**\n * @param {IGrid} gObj - Defines the IGrid\n * @param {Row[]} rows - Defines the row\n * @param {HTMLTableRowElement[]} rowElms - Row elements\n * @param {number} index - Row index\n * @param {number} startRowIndex - Start Row Index\n * @returns {void}\n * @hidden\n */\nexport function resetRowIndex(gObj, rows, rowElms, index, startRowIndex) {\n var startIndex = index ? index : 0;\n for (var i = startRowIndex ? startRowIndex : 0; i < rows.length; i++) {\n if (rows[i].isDataRow) {\n rows[i].index = startIndex;\n rows[i].isAltRow = gObj.enableAltRow ? startIndex % 2 !== 0 : false;\n rowElms[i].setAttribute(literals.dataRowIndex, startIndex.toString());\n rowElms[i].setAttribute(literals.ariaRowIndex, (startIndex + 1).toString());\n if (rows[i].isAltRow) {\n rowElms[i].classList.add('e-altrow');\n }\n else {\n rowElms[i].classList.remove('e-altrow');\n }\n for (var j = 0; j < rowElms[i].cells.length; j++) {\n rowElms[i].cells[j].setAttribute('index', startIndex.toString());\n }\n startIndex++;\n }\n }\n if (!rows.length) {\n gObj.renderModule.emptyRow(true);\n }\n}\n/**\n * @param {IGrid} gObj - Defines the grid object\n * @param {Object} changes - Defines the changes\n * @param {string} type - Defines the type\n * @param {string} keyField - Defines the keyfield\n * @returns {void}\n * @hidden\n */\nexport function compareChanges(gObj, changes, type, keyField) {\n var newArray = gObj.dataToBeUpdated[type].concat(changes[type]).reduce(function (r, o) {\n r[o[keyField]] = r[o[keyField]] === undefined ? o : Object.assign(r[o[keyField]], o);\n return r;\n }, {});\n gObj.dataToBeUpdated[type] = Object.keys(newArray).map(function (k) { return newArray[k]; });\n}\n/**\n * @param {IGrid} gObj - Defines the grid object\n * @returns {void}\n * @hidden\n */\nexport function setRowElements(gObj) {\n if (gObj.isFrozenGrid()) {\n (gObj).contentModule.rowElements =\n [].slice.call(gObj.element.querySelectorAll('.e-movableheader .e-row, .e-movablecontent .e-row'));\n var cls = gObj.getFrozenMode() === literals.leftRight ? '.e-frozen-left-header .e-row, .e-frozen-left-content .e-row'\n : '.e-frozenheader .e-row, .e-frozencontent .e-row';\n (gObj).contentModule.freezeRowElements =\n [].slice.call(gObj.element.querySelectorAll(cls));\n if (gObj.getFrozenMode() === literals.leftRight) {\n gObj.contentModule.frozenRightRowElements =\n [].slice.call(gObj.element.querySelectorAll('.e-frozen-right-header .e-row, .e-frozen-right-content .e-row'));\n }\n }\n else {\n (gObj).contentModule.rowElements =\n [].slice.call(gObj.element.querySelectorAll('.e-row:not(.e-addedrow)'));\n }\n}\n/**\n * @param {IGrid} gObj - Defines the grid object\n * @param {Cell} cells - Defines the callback function\n * @param {freezeTable} tableName - Defines the row\n * @returns {Cell[]} Returns the cell\n * @hidden\n */\nexport function splitFrozenRowObjectCells(gObj, cells, tableName) {\n var left = gObj.getFrozenLeftCount();\n var movable = gObj.getMovableColumnsCount();\n var right = gObj.getFrozenRightColumnsCount();\n var frozenMode = gObj.getFrozenMode();\n var drag = gObj.isRowDragable() ? 1 : 0;\n var rightIndex = frozenMode === 'Right' ? left + movable : left + movable + drag;\n var mvblIndex = frozenMode === 'Right' ? left : left + drag;\n var mvblEndIdx = frozenMode === 'Right' ? cells.length - right - drag\n : right ? cells.length - right : cells.length;\n if (tableName === literals.frozenLeft) {\n cells = cells.slice(0, left ? left + drag : cells.length);\n }\n else if (tableName === literals.frozenRight) {\n cells = cells.slice(rightIndex, cells.length);\n }\n else if (tableName === 'movable') {\n cells = cells.slice(mvblIndex, mvblEndIdx);\n }\n return cells;\n}\n// eslint-disable-next-line\n/** @hidden */\nexport function gridActionHandler(gObj, callBack, rows, force, rowObj) {\n if (rows[0].length || force) {\n if (rowObj) {\n callBack(literals.frozenLeft, rows[0], rowObj[0]);\n }\n else {\n callBack(literals.frozenLeft, rows[0]);\n }\n }\n if (gObj.isFrozenGrid() && (rows[1].length || force)) {\n if (rowObj) {\n callBack('movable', rows[1], rowObj[1]);\n }\n else {\n callBack('movable', rows[1]);\n }\n }\n if ((gObj.getFrozenMode() === literals.leftRight || gObj.getFrozenMode() === 'Right') && (rows[2].length || force)) {\n if (rowObj) {\n callBack(literals.frozenRight, rows[2], rowObj[2]);\n }\n else {\n callBack(literals.frozenRight, rows[2]);\n }\n }\n}\n/**\n * @param {IGrid} gObj - Defines the grid\n * @returns {Row} Returns the row\n * @hidden\n */\nexport function getGridRowObjects(gObj) {\n return [gObj.getFrozenMode() !== 'Right' ? gObj.getRowsObject() : [], gObj.getMovableRowsObject(), gObj.getFrozenRightRowsObject()];\n}\n/**\n * @param {IGrid} gObj - Defines the grid\n * @returns {Element} Returns the element\n * @hidden\n */\nexport function getGridRowElements(gObj) {\n return [\n gObj.getFrozenMode() !== 'Right' ? gObj.getAllDataRows(true) : [],\n gObj.getAllMovableDataRows(true), gObj.getAllFrozenRightDataRows(true)\n ];\n}\n/**\n * @param {Element} row - Defines the row\n * @param {number} start - Defines the start index\n * @param {number} end - Defines the end index\n * @returns {void}\n * @hidden\n */\nexport function sliceElements(row, start, end) {\n var cells = row.children;\n var len = cells.length;\n var k = 0;\n for (var i = 0; i < len; i++, k++) {\n if (i >= start && i < end) {\n continue;\n }\n row.removeChild(row.children[k]);\n k--;\n }\n}\n/**\n * @param {IGrid} gObj - Defines the grid Object\n * @param {Column} col - Defines the column\n * @param {number} rowIndex - Defines the rowindex\n * @returns {Element} Returns the element\n * @hidden\n */\nexport function getCellsByTableName(gObj, col, rowIndex) {\n if (col.getFreezeTableName() === 'movable') {\n return [].slice.call(gObj.getMovableDataRows()[rowIndex].getElementsByClassName(literals.rowCell));\n }\n else if (col.getFreezeTableName() === literals.frozenRight) {\n return [].slice.call(gObj.getFrozenRightDataRows()[rowIndex].getElementsByClassName(literals.rowCell));\n }\n else {\n return [].slice.call(gObj.getDataRows()[rowIndex].getElementsByClassName(literals.rowCell));\n }\n}\n/**\n * @param {IGrid} gObj - Defines the column\n * @param {Column} col - Defines the index\n * @param {number} rowIndex - Defines the rules\n * @param {number} index - Defines the movable column rules\n * @returns {Element} Returns the Element\n * @hidden\n */\nexport function getCellByColAndRowIndex(gObj, col, rowIndex, index) {\n var left = gObj.getFrozenLeftCount();\n var movable = gObj.getMovableColumnsCount();\n index = col.getFreezeTableName() === 'movable' ? index - left : col.getFreezeTableName() === literals.frozenRight\n ? index - (left + movable) : index;\n return getCellsByTableName(gObj, col, rowIndex)[index];\n}\n/**\n * @param {Column} col - Defines the column\n * @param {number} index - Defines the index\n * @param {Object} rules - Defines the rules\n * @param {Object} mRules - Defines the movable column rules\n * @param {Object} frRules - Defines the Frozen rules\n * @param {number} len - Defines the length\n * @param {boolean} isCustom - Defines custom form validation\n * @returns {void}\n * @hidden\n */\nexport function setValidationRuels(col, index, rules, mRules, frRules, len, isCustom) {\n if (isCustom) {\n rules[getComplexFieldID(col.field)] = col.validationRules;\n }\n else {\n if (col.getFreezeTableName() === literals.frozenLeft\n || (!index && col.getFreezeTableName() === literals.frozenRight) || len === 1) {\n rules[getComplexFieldID(col.field)] = col.validationRules;\n }\n else if (col.getFreezeTableName() === 'movable' || !col.getFreezeTableName()) {\n mRules[getComplexFieldID(col.field)] = col.validationRules;\n }\n else if (col.getFreezeTableName() === literals.frozenRight) {\n frRules[getComplexFieldID(col.field)] = col.validationRules;\n }\n }\n}\n/**\n * @param {IGrid} gObj - Defines the grid object\n * @returns {Element} Returns the Element\n * @hidden\n */\nexport function getMovableTbody(gObj) {\n var tbody;\n if (gObj.isFrozenGrid()) {\n tbody = gObj.frozenRows && gObj.editSettings.newRowPosition === 'Top' ? gObj.getMovableHeaderTbody()\n : gObj.getMovableContentTbody();\n }\n return tbody;\n}\n/**\n * @param {IGrid} gObj - Defines the grid object\n * @returns {Element} Returns the Element\n * @hidden\n */\nexport function getFrozenRightTbody(gObj) {\n var tbody;\n if (gObj.getFrozenMode() === literals.leftRight) {\n tbody = gObj.frozenRows && gObj.editSettings.newRowPosition === 'Top' ? gObj.getFrozenRightHeaderTbody()\n : gObj.getFrozenRightContentTbody();\n }\n return tbody;\n}\n/**\n * @param {Element} tbody - Table body\n * @param {Element} mTbody - Movanle table body\n * @param {Element} frTbody - Frozen right table body\n * @param {Element[]} tr - Table rows\n * @param {Element[]} mTr - Movable table rows\n * @param {Element[]} frTr - Frozen right table rows\n * @param {Function} callBack - Callback function\n * @returns {void}\n * @hidden\n */\nexport function setRowsInTbody(tbody, mTbody, frTbody, tr, mTr, frTr, callBack) {\n if (tbody && tr) {\n callBack(tbody, tr);\n }\n if (mTbody && mTr) {\n callBack(mTbody, mTr);\n }\n if (frTbody && frTr) {\n callBack(frTbody, frTr);\n }\n}\n/**\n * @param {string} numberFormat - Format\n * @param {string} type - Value type\n * @param {boolean} isExcel - Boolean property\n * @returns {string} returns formated value\n * @hidden\n */\nexport function getNumberFormat(numberFormat, type, isExcel) {\n var format;\n var intl = new Internationalization();\n if (type === 'number') {\n try {\n format = intl.getNumberPattern({ format: numberFormat, currency: this.currency, useGrouping: true }, true);\n }\n catch (error) {\n format = numberFormat;\n }\n }\n else if (type === 'date' || type === 'time' || type === 'datetime') {\n try {\n format = intl.getDatePattern({ skeleton: numberFormat, type: type }, isExcel);\n if (isNullOrUndefined(format)) {\n // eslint-disable-next-line\n throw 'error';\n }\n }\n catch (error) {\n try {\n format = intl.getDatePattern({ format: numberFormat, type: type }, isExcel);\n }\n catch (error) {\n format = numberFormat;\n }\n }\n }\n else {\n format = numberFormat;\n }\n if (type !== 'number') {\n var patternRegex = /G|H|c|'| a|yy|y|EEEE|E/g;\n var mtch_1 = { 'G': '', 'H': 'h', 'c': 'd', '\\'': '\"', ' a': ' AM/PM', 'yy': 'yy', 'y': 'yyyy', 'EEEE': 'dddd', 'E': 'ddd' };\n format = format.replace(patternRegex, function (pattern) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return mtch_1[pattern];\n });\n }\n return format;\n}\n/**\n * @param {IGrid} gObj - Grid instance\n * @returns {void}\n * @hidden\n */\nexport function addBiggerDialog(gObj) {\n if (gObj.enableAdaptiveUI) {\n var dialogs = document.getElementsByClassName('e-responsive-dialog');\n for (var i = 0; i < dialogs.length; i++) {\n dialogs[i].classList.add('e-bigger');\n }\n }\n}\n/**\n * @param {string} value - specifies the trr\n * @param {Object} mapObject - specifies the idx\n * @returns {Object | string} returns object or string\n * @hidden\n */\nexport function performComplexDataOperation(value, mapObject) {\n var returnObj;\n var length = value.split('.').length;\n var splits = value.split('.');\n var duplicateMap = mapObject;\n for (var i = 0; i < length; i++) {\n returnObj = duplicateMap[splits[i]];\n duplicateMap = returnObj;\n }\n return returnObj;\n}\n/**\n * @param {Object} tr - specifies the trr\n * @param {number} idx - specifies the idx\n * @param {string} displayVal - specifies the displayval\n * @param {Row} rows - specifies the rows\n * @param {IGrid} parent - Grid instance\n * @param {boolean} isContent - check for content renderer\n * @returns {void}\n * @hidden\n */\nexport function setDisplayValue(tr, idx, displayVal, rows, parent, isContent) {\n var trs = Object.keys(tr);\n for (var i = 0; i < trs.length; i++) {\n var td = tr[trs[i]].querySelectorAll('td.e-rowcell')[idx];\n if (tr[trs[i]].querySelectorAll('td.e-rowcell').length && td) {\n setStyleAttribute(tr[trs[i]].querySelectorAll('td.e-rowcell')[idx], { 'display': displayVal });\n if (tr[trs[i]].querySelectorAll('td.e-rowcell')[idx].classList.contains('e-hide')) {\n removeClass([tr[trs[i]].querySelectorAll('td.e-rowcell')[idx]], ['e-hide']);\n }\n if (isContent && parent.isRowDragable()) {\n var index = parent.getFrozenColumns() ? idx : idx + 1;\n rows[trs[i]].cells[index].visible = displayVal === '' ? true : false;\n }\n else {\n rows[trs[i]].cells[idx].visible = displayVal === '' ? true : false;\n }\n }\n }\n}\n// eslint-disable-next-line\n/** @hidden */\nexport function addRemoveEventListener(parent, evt, isOn, module) {\n for (var _i = 0, evt_1 = evt; _i < evt_1.length; _i++) {\n var inst = evt_1[_i];\n if (isOn) {\n parent.on(inst.event, inst.handler, module);\n }\n else {\n parent.off(inst.event, inst.handler);\n }\n }\n}\n// eslint-disable-next-line\n/** @hidden */\nexport function createEditElement(parent, column, classNames, attr) {\n var complexFieldName = getComplexFieldID(column.field);\n attr = Object.assign(attr, {\n id: parent.element.id + complexFieldName,\n name: complexFieldName, 'e-mappinguid': column.uid\n });\n return parent.createElement('input', {\n className: classNames, attrs: attr\n });\n}\n/**\n * @param {IGrid} gObj - Grid instance\n * @param {string} uid - Defines column's uid\n * @returns {Column} returns column model\n * @hidden\n */\nexport function getColumnModelByUid(gObj, uid) {\n var column;\n for (var _i = 0, _a = (gObj.columnModel); _i < _a.length; _i++) {\n var col = _a[_i];\n if (col.uid === uid) {\n column = col;\n break;\n }\n }\n return column;\n}\n/**\n * @param {IGrid} gObj - Grid instance\n * @param {string} field - Defines column's uid\n * @returns {Column} returns column model\n * @hidden\n */\nexport function getColumnModelByFieldName(gObj, field) {\n var column;\n if (!gObj.columnModel) {\n gObj.getColumns();\n }\n for (var _i = 0, _a = (gObj.columnModel); _i < _a.length; _i++) {\n var col = _a[_i];\n if (col.field === field) {\n column = col;\n break;\n }\n }\n return column;\n}\n/**\n * @param {string} id - Defines component id\n * @param {string[]} evts - Defines events\n * @param {object} handlers - Defines event handlers\n * @param {any} instance - Defines class instance\n * @returns {void}\n * @hidden\n */\n// eslint-disable-next-line\nexport function registerEventHandlers(id, evts, handlers, instance) {\n instance.eventHandlers[id] = {};\n for (var i = 0; i < evts.length; i++) {\n instance.eventHandlers[id][evts[i]] = handlers[evts[i]];\n }\n}\n/**\n * @param {any} component - Defines component instance\n * @param {string[]} evts - Defines events\n * @param {any} instance - Defines class instance\n * @returns {void}\n * @hidden\n */\n// eslint-disable-next-line\nexport function removeEventHandlers(component, evts, instance) {\n for (var i = 0; i < evts.length; i++) {\n if (component.isDestroyed) {\n break;\n }\n component.removeEventListener(evts[i], instance.eventHandlers[component.element.id][evts[i]]);\n }\n}\n/**\n * @param {IGrid | IXLFilter} parent - Defines parent instance\n * @param {string[]} templates - Defines the templates name which are needs to clear\n * @returns {void}\n * @hidden\n */\nexport function clearReactVueTemplates(parent, templates) {\n parent.destroyTemplate(templates);\n if (parent.isReact) {\n parent.renderTemplates();\n }\n}\n/**\n *\n * @param { Element } row - Defines row element\n * @returns { number } row index\n */\nexport function getRowIndexFromElement(row) {\n return parseInt(row.getAttribute(literals.dataRowIndex), 10);\n}\n/**\n *\n * @param { string[] } fields - Defines grouped fields\n * @param { values } values - Defines caption keys\n * @param { any } instance - Defines dynamic class instance\n * @returns { Predicate } returns filter predicate\n */\n// eslint-disable-next-line\nexport function generateExpandPredicates(fields, values, instance) {\n var filterCols = [];\n for (var i = 0; i < fields.length; i++) {\n var column = instance.parent.getColumnByField(fields[i]);\n var value = values[i] === 'null' ? null : values[i];\n var pred = {\n field: fields[i], predicate: 'or', uid: column.uid, operator: 'equal', type: column.type,\n matchCase: instance.allowCaseSensitive, ignoreAccent: instance.parent.filterSettings.ignoreAccent\n };\n if (value === '' || isNullOrUndefined(value)) {\n filterCols = filterCols.concat(CheckBoxFilterBase.generateNullValuePredicates(pred));\n }\n else {\n filterCols.push(extend({}, { value: value }, pred));\n }\n }\n return CheckBoxFilterBase.getPredicate(filterCols);\n}\n/**\n *\n * @param { Predicate } pred - Defines filter predicate\n * @returns { Predicate[] } Returns formed predicate\n */\nexport function getPredicates(pred) {\n var predicateList = [];\n for (var _i = 0, _a = Object.keys(pred); _i < _a.length; _i++) {\n var prop = _a[_i];\n predicateList.push(pred[prop]);\n }\n return predicateList;\n}\n/**\n *\n * @param { number } index - Defines group caption indent\n * @param { Row[] } rowsObject - Defines rows object\n * @returns { { fields: string[], keys: string[] } } Returns grouped keys and values\n */\nexport function getGroupKeysAndFields(index, rowsObject) {\n var fields = [];\n var keys = [];\n for (var i = index; i >= 0; i--) {\n if (rowsObject[i].isCaptionRow && fields.indexOf(rowsObject[i].data.field) === -1\n && (rowsObject[i].indent < rowsObject[index].indent || i === index)) {\n fields.push(rowsObject[i].data.field);\n keys.push(rowsObject[i].data.key);\n if (rowsObject[i].indent === 0) {\n break;\n }\n }\n }\n return { fields: fields, keys: keys };\n}\n// eslint-disable-next-line\n/**\n *\n * @param { number[][] } checkActiveMatrix - Defines matrix to check\n * @param { number[] } checkCellIndex - Defines index to check\n * @param { boolean } next - Defines select next or previous index\n * @returns { number[] } - Returns next active current index\n */\nexport function findCellIndex(checkActiveMatrix, checkCellIndex, next) {\n var activeMatrix = checkActiveMatrix;\n var cellIndex = checkCellIndex;\n var currentCellIndexPass = false;\n if (next) {\n for (var i = cellIndex[0]; i < activeMatrix.length; i++) {\n var rowCell = activeMatrix[i];\n for (var j = 0; j < rowCell.length; j++) {\n if (currentCellIndexPass && activeMatrix[i][j] === 1) {\n cellIndex = [i, j];\n return cellIndex;\n }\n if (!currentCellIndexPass && cellIndex.toString() === [i, j].toString()) {\n currentCellIndexPass = true;\n }\n }\n }\n }\n else {\n for (var i = cellIndex[0]; i >= 0; i--) {\n var rowCell = activeMatrix[i];\n for (var j = rowCell.length - 1; j >= 0; j--) {\n if (currentCellIndexPass && activeMatrix[i][j] === 1) {\n cellIndex = [i, j];\n return cellIndex;\n }\n if (!currentCellIndexPass && cellIndex.toString() === [i, j].toString()) {\n currentCellIndexPass = true;\n }\n }\n }\n }\n return cellIndex;\n}\n","/**\n * 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})(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","/* tslint:disable-next-line:max-line-length */\nimport { EventHandler, isNullOrUndefined, extend, classList, addClass, removeClass, Browser, getValue, setValue } from '@syncfusion/ej2-base';\nimport { parentsUntil, getUid, appendChildren, getDatePredicate, getObject, extendObjWithFn, eventPromise, setChecked, clearReactVueTemplates } from '../base/util';\nimport { remove, debounce, Internationalization } from '@syncfusion/ej2-base';\nimport { DataUtil, Query, DataManager, Predicate } from '@syncfusion/ej2-data';\nimport { createCheckBox } from '@syncfusion/ej2-buttons';\nimport * as events from '../base/constant';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { getForeignData } from '../base/util';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';\nimport { getFilterMenuPostion, toogleCheckbox, createCboxWithWrap, removeAddCboxClasses, getColumnByForeignKeyValue } from '../base/util';\n/**\n * @hidden\n * `CheckBoxFilterBase` module is used to handle filtering action.\n */\nvar CheckBoxFilterBase = /** @class */ (function () {\n /**\n * Constructor for checkbox filtering module\n *\n * @param {IXLFilter} parent - specifies the IXLFilter\n * @hidden\n */\n function CheckBoxFilterBase(parent) {\n this.existingPredicate = {};\n this.foreignKeyQuery = new Query();\n /** @hidden */\n this.filterState = true;\n this.values = {};\n this.renderEmpty = false;\n this.isCheckboxFilterTemplate = false;\n this.parent = parent;\n this.id = this.parent.element.id;\n this.valueFormatter = new ValueFormatter(this.parent.locale);\n this.cBoxTrue = createCheckBox(this.parent.createElement, false, { checked: true, label: ' ' });\n this.cBoxFalse = createCheckBox(this.parent.createElement, false, { checked: false, label: ' ' });\n this.cBoxTrue.insertBefore(this.parent.createElement('input', {\n className: 'e-chk-hidden', attrs: { type: 'checkbox' }\n }), this.cBoxTrue.firstChild);\n this.cBoxFalse.insertBefore(this.parent.createElement('input', {\n className: 'e-chk-hidden', attrs: { 'type': 'checkbox' }\n }), this.cBoxFalse.firstChild);\n this.cBoxFalse.querySelector('.e-frame').classList.add('e-uncheck');\n if (this.parent.enableRtl) {\n addClass([this.cBoxTrue, this.cBoxFalse], ['e-rtl']);\n }\n if (this.parent.cssClass) {\n addClass([this.cBoxTrue, this.cBoxFalse], [this.parent.cssClass]);\n }\n }\n /**\n * @returns {void}\n * @hidden\n */\n CheckBoxFilterBase.prototype.destroy = function () {\n this.closeDialog();\n };\n CheckBoxFilterBase.prototype.wireEvents = function () {\n EventHandler.add(this.dlg, 'click', this.clickHandler, this);\n EventHandler.add(this.dlg, 'keyup', this.keyupHandler, this);\n this.searchHandler = debounce(this.searchBoxKeyUp, 200);\n var elem = this.dialogObj.element.querySelector('.e-searchinput');\n if (elem) {\n EventHandler.add(elem, 'keyup', this.searchHandler, this);\n }\n };\n CheckBoxFilterBase.prototype.unWireEvents = function () {\n EventHandler.remove(this.dlg, 'click', this.clickHandler);\n EventHandler.remove(this.dlg, 'keyup', this.keyupHandler);\n var elem = this.dialogObj.element.querySelector('.e-searchinput');\n if (elem) {\n EventHandler.remove(elem, 'keyup', this.searchHandler);\n }\n };\n CheckBoxFilterBase.prototype.foreignKeyFilter = function (args, fColl, mPredicate) {\n var _this = this;\n var fPredicate = {};\n var filterCollection = [];\n var query = this.foreignKeyQuery.clone();\n this.options.column.dataSource.\n executeQuery(query.where(mPredicate)).then(function (e) {\n _this.options.column.columnData = e.result;\n _this.parent.notify(events.generateQuery, { predicate: fPredicate, column: _this.options.column });\n args.ejpredicate = fPredicate.predicate.predicates;\n var fpred = fPredicate.predicate.predicates;\n for (var i = 0; i < fpred.length; i++) {\n filterCollection.push({\n field: fpred[i].field,\n predicate: 'or',\n matchCase: fpred[i].ignoreCase,\n ignoreAccent: fpred[i].ignoreAccent,\n operator: fpred[i].operator,\n value: fpred[i].value,\n type: _this.options.type\n });\n }\n args.filterCollection = filterCollection.length ? filterCollection :\n fColl.filter(function (col) { return col.field = _this.options.field; });\n _this.options.handler(args);\n });\n };\n CheckBoxFilterBase.prototype.foreignFilter = function (args, value) {\n var operator = this.options.isRemote ?\n (this.options.column.type === 'string' ? 'contains' : 'equal') : (this.options.column.type ? 'contains' : 'equal');\n var initalPredicate = new Predicate(this.options.column.foreignKeyValue, operator, value, true, this.options.ignoreAccent);\n this.foreignKeyFilter(args, [args.filterCollection], initalPredicate);\n };\n CheckBoxFilterBase.prototype.searchBoxClick = function (e) {\n var target = e.target;\n if (target.classList.contains('e-searchclear')) {\n this.sInput.value = '';\n if (this.isCheckboxFilterTemplate) {\n this.parent.notify('refreshCheckbox', { event: e });\n }\n else {\n this.refreshCheckboxes();\n }\n this.updateSearchIcon();\n this.sInput.focus();\n }\n };\n CheckBoxFilterBase.prototype.searchBoxKeyUp = function (e) {\n if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === 'Shimmer') {\n this.parent.showMaskRow(undefined, this.dialogObj.element);\n }\n if (this.isCheckboxFilterTemplate) {\n this.parent.notify('refreshCheckbox', { event: e });\n }\n else {\n this.refreshCheckboxes();\n }\n this.updateSearchIcon();\n };\n CheckBoxFilterBase.prototype.updateSearchIcon = function () {\n if (this.sInput.value.length) {\n classList(this.sIcon, ['e-chkcancel-icon'], ['e-search-icon']);\n }\n else {\n classList(this.sIcon, ['e-search-icon'], ['e-chkcancel-icon']);\n }\n };\n /**\n * Gets the localized label by locale keyword.\n *\n * @param {string} key - Defines localization key\n * @returns {string} - returns localization label\n */\n CheckBoxFilterBase.prototype.getLocalizedLabel = function (key) {\n return this.localeObj.getConstant(key);\n };\n CheckBoxFilterBase.prototype.updateDataSource = function () {\n var dataSource = this.options.dataSource;\n var str = 'object';\n if (!(dataSource instanceof DataManager)) {\n for (var i = 0; i < dataSource.length; i++) {\n // eslint-disable-next-line valid-typeof\n if (typeof dataSource !== str) {\n var obj = {};\n obj[this.options.field] = dataSource[i];\n dataSource[i] = obj;\n }\n }\n }\n };\n CheckBoxFilterBase.prototype.updateModel = function (options) {\n this.options = options;\n this.existingPredicate = options.actualPredicate || {};\n this.options.dataSource = options.dataSource;\n this.options.dataManager = options.dataManager ? options.dataManager : options.dataSource;\n this.updateDataSource();\n this.options.type = options.type;\n this.options.format = options.format || '';\n this.options.ignoreAccent = options.ignoreAccent || false;\n this.options.filteredColumns = options.filteredColumns || this.parent.filterSettings.columns;\n this.options.query = options.query || new Query();\n this.options.allowCaseSensitive = options.allowCaseSensitive || false;\n this.options.uid = options.column.uid;\n this.options.disableHtmlEncode = options.column.disableHtmlEncode || false;\n this.values = {};\n this.localeObj = options.localeObj;\n this.isFiltered = options.filteredColumns.length;\n };\n CheckBoxFilterBase.prototype.getAndSetChkElem = function (options) {\n this.dlg = this.parent.createElement('div', {\n id: this.id + this.options.type + '_excelDlg',\n attrs: { uid: this.options.column.uid },\n className: 'e-checkboxfilter e-filter-popup'\n });\n this.sBox = this.parent.createElement('div', { className: 'e-searchcontainer' });\n if (!options.hideSearchbox) {\n this.sInput = this.parent.createElement('input', {\n id: this.id + '_SearchBox',\n className: 'e-searchinput'\n });\n this.sIcon = this.parent.createElement('span', {\n className: 'e-searchclear e-search-icon e-icons e-input-group-icon', attrs: {\n type: 'text', title: this.getLocalizedLabel('Search')\n }\n });\n this.searchBox = this.parent.createElement('span', { className: 'e-searchbox e-fields' });\n this.searchBox.appendChild(this.sInput);\n this.sBox.appendChild(this.searchBox);\n var inputargs = {\n element: this.sInput, floatLabelType: 'Never', properties: {\n placeholder: this.getLocalizedLabel('Search'),\n cssClass: this.parent.cssClass\n }\n };\n Input.createInput(inputargs, this.parent.createElement);\n this.searchBox.querySelector('.e-input-group').appendChild(this.sIcon);\n }\n this.spinner = this.parent.createElement('div', { className: 'e-spinner' }); //for spinner\n this.cBox = this.parent.createElement('div', {\n id: this.id + this.options.type + '_CheckBoxList',\n className: 'e-checkboxlist e-fields'\n });\n this.spinner.appendChild(this.cBox);\n this.sBox.appendChild(this.spinner);\n return this.sBox;\n };\n CheckBoxFilterBase.prototype.showDialog = function (options) {\n var args = {\n requestType: events.filterBeforeOpen,\n columnName: this.options.field, columnType: this.options.type, cancel: false\n };\n var filterModel = 'filterModel';\n args[filterModel] = this;\n this.parent.notify(events.cBoxFltrBegin, args);\n if (args.cancel) {\n options.cancel = args.cancel;\n return;\n }\n this.dialogObj = new Dialog({\n visible: false, content: this.sBox,\n close: this.closeDialog.bind(this),\n enableRtl: this.parent.enableRtl,\n width: (!isNullOrUndefined(parentsUntil(options.target, 'e-bigger')))\n || this.parent.element.classList.contains('e-device') ? 260 : 255,\n target: this.parent.element, animationSettings: { effect: 'None' },\n buttons: [{\n click: this.btnClick.bind(this),\n buttonModel: {\n content: this.getLocalizedLabel(this.isExcel ? 'OKButton' : 'FilterButton'),\n cssClass: this.parent.cssClass ? 'e-primary' + ' ' + this.parent.cssClass : 'e-primary',\n isPrimary: true\n }\n },\n {\n click: this.btnClick.bind(this),\n buttonModel: { cssClass: this.parent.cssClass ? 'e-flat' + ' ' + this.parent.cssClass : 'e-flat',\n content: this.getLocalizedLabel(this.isExcel ? 'CancelButton' : 'ClearButton') }\n }],\n created: this.dialogCreated.bind(this),\n open: this.dialogOpen.bind(this),\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n var isStringTemplate = 'isStringTemplate';\n this.dialogObj[isStringTemplate] = true;\n this.renderResponsiveFilter(options);\n this.dlg.setAttribute('aria-label', this.getLocalizedLabel('ExcelFilterDialogARIA'));\n if (options.isResponsiveFilter) {\n var responsiveCnt = document.querySelector('.e-responsive-dialog > .e-dlg-content > .e-mainfilterdiv');\n responsiveCnt.appendChild(this.dlg);\n }\n else {\n this.parent.element.appendChild(this.dlg);\n }\n this.dialogObj.appendTo(this.dlg);\n this.dialogObj.element.style.maxHeight = options.isResponsiveFilter ? 'none' : this.options.height + 'px';\n this.dialogObj.show();\n var content = this.dialogObj.element.querySelector('.e-dlg-content');\n content.appendChild(this.sBox);\n this.wireEvents();\n if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === 'Shimmer') {\n this.parent.showMaskRow(undefined, this.dialogObj.element);\n }\n else {\n createSpinner({ target: this.spinner, cssClass: this.parent.cssClass ? this.parent.cssClass : null }, this.parent.createElement);\n showSpinner(this.spinner);\n }\n this.getAllData();\n };\n CheckBoxFilterBase.prototype.renderResponsiveFilter = function (options) {\n if (options.isResponsiveFilter) {\n this.dialogObj.buttons = [{}];\n this.dialogObj.position = { X: '', Y: '' };\n this.dialogObj.target = document.querySelector('.e-resfilter > .e-dlg-content > .e-mainfilterdiv');\n this.dialogObj.width = '100%';\n }\n };\n CheckBoxFilterBase.prototype.dialogCreated = function (e) {\n if (this.options.isResponsiveFilter) {\n this.dialogObj.element.style.left = '0px';\n }\n else {\n if (!Browser.isDevice) {\n getFilterMenuPostion(this.options.target, this.dialogObj);\n }\n else {\n this.dialogObj.position = { X: 'center', Y: 'center' };\n }\n }\n if (this.options.column.showColumnMenu) {\n this.parent.notify(events.filterDialogCreated, e);\n }\n };\n CheckBoxFilterBase.prototype.openDialog = function (options) {\n this.updateModel(options);\n this.getAndSetChkElem(options);\n this.showDialog(options);\n };\n CheckBoxFilterBase.prototype.closeDialog = function () {\n if (this.dialogObj && !this.dialogObj.isDestroyed) {\n this.isBlanks = false;\n var filterTemplateCol = this.options.columns.filter(function (col) { return col.getFilterItemTemplate(); });\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var registeredTemplate = this.parent.registeredTemplate;\n if (filterTemplateCol.length && !isNullOrUndefined(registeredTemplate) && registeredTemplate.filterItemTemplate) {\n this.parent.destroyTemplate(['filterItemTemplate']);\n }\n if ((this.parent.isReact || this.parent.isVue) && this.parent.destroyTemplate !== undefined) {\n clearReactVueTemplates(this.parent, ['filterItemTemplate']);\n }\n this.parent.notify(events.filterMenuClose, { field: this.options.field });\n this.dialogObj.destroy();\n this.unWireEvents();\n remove(this.dlg);\n this.dlg = null;\n this.parent.notify(events.filterDialogClose, {});\n }\n };\n /**\n * @param {Column} col - Defines column details\n * @returns {void}\n * @hidden\n */\n CheckBoxFilterBase.prototype.clearFilter = function (col) {\n // eslint-disable-next-line max-len\n var args = { instance: this, handler: this.clearFilter, cancel: false };\n this.parent.notify(events.fltrPrevent, args);\n if (args.cancel) {\n return;\n }\n this.options.handler({ action: 'clear-filter', field: col ? col.field : this.options.field });\n };\n CheckBoxFilterBase.prototype.btnClick = function (e) {\n if (this.filterState) {\n if ((e.target.tagName.toLowerCase() === 'input' && e.target.classList.contains('e-searchinput')) ||\n e.keyCode === 13) {\n if (!this.isCheckboxFilterTemplate) {\n this.fltrBtnHandler();\n }\n }\n else {\n var text = e.target.firstChild.textContent.toLowerCase();\n if (this.getLocalizedLabel(this.isExcel ? 'OKButton' : 'FilterButton').toLowerCase() === text) {\n if (!this.isCheckboxFilterTemplate) {\n this.fltrBtnHandler();\n }\n }\n else if (this.getLocalizedLabel('ClearButton').toLowerCase() === text) {\n this.clearFilter();\n }\n }\n this.closeDialog();\n }\n else if (!(e.target.tagName.toLowerCase() === 'input')) {\n this.clearFilter();\n this.closeDialog();\n }\n if (this.options.column.showColumnMenu) {\n this.parent.notify(events.afterFilterColumnMenuClose, {});\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n CheckBoxFilterBase.prototype.fltrBtnHandler = function () {\n var _this = this;\n var checked = [].slice.call(this.cBox.querySelectorAll('.e-check:not(.e-selectall)'));\n var check = checked;\n var optr = 'equal';\n var ddlValue = this.dialogObj.element.querySelector('.e-dropdownlist');\n if (ddlValue) {\n this.options.operator = optr = ddlValue.ej2_instances[0].value;\n }\n this.isMenuNotEqual = this.options.operator === 'notequal';\n var searchInput;\n if (!this.options.hideSearchbox) {\n searchInput = this.searchBox.querySelector('.e-searchinput');\n }\n var caseSen = this.options.allowCaseSensitive;\n var defaults = {\n field: this.options.field, predicate: this.isMenuNotEqual ? 'and' : 'or', uid: this.options.uid,\n operator: optr, type: this.options.type, matchCase: caseSen, ignoreAccent: this.options.ignoreAccent\n };\n var isNotEqual = this.itemsCnt !== checked.length && this.itemsCnt - checked.length < checked.length;\n if (isNotEqual && searchInput && searchInput.value === '') {\n optr = this.isMenuNotEqual ? 'equal' : 'notequal';\n checked = [].slice.call(this.cBox.querySelectorAll('.e-uncheck:not(.e-selectall)'));\n defaults.predicate = this.isMenuNotEqual ? 'or' : 'and';\n defaults.operator = optr;\n }\n var value;\n var val;\n var length;\n var fObj;\n var coll = [];\n if (checked.length !== this.itemsCnt || (searchInput && searchInput.value && searchInput.value !== '')) {\n for (var i = 0; i < checked.length; i++) {\n value = this.values[parentsUntil(checked[i], 'e-ftrchk').getAttribute('uid')];\n fObj = extend({}, { value: value }, defaults);\n if (value && !value.toString().length) {\n fObj.operator = isNotEqual ? 'notequal' : 'equal';\n }\n if (value === '' || isNullOrUndefined(value)) {\n coll = coll.concat(CheckBoxFilterBase.generateNullValuePredicates(defaults));\n }\n else {\n coll.push(fObj);\n }\n var args = {\n instance: this, handler: this.fltrBtnHandler, arg1: fObj.field, arg2: fObj.predicate, arg3: fObj.operator,\n arg4: fObj.matchCase, arg5: fObj.ignoreAccent, arg6: fObj.value, cancel: false\n };\n this.parent.notify(events.fltrPrevent, args);\n if (args.cancel) {\n return;\n }\n }\n if (this.options.type === 'date' || this.options.type === 'datetime') {\n length = check.length - 1;\n val = this.values[parentsUntil(check[length], 'e-ftrchk').getAttribute('uid')];\n if (isNullOrUndefined(val) && isNotEqual) {\n coll.push({\n field: defaults.field, matchCase: defaults.matchCase, operator: 'equal',\n predicate: 'and', value: null\n });\n }\n }\n this.initiateFilter(coll);\n }\n else {\n var isClearFilter = this.options.filteredColumns.some(function (value) {\n return _this.options.field === value.field;\n });\n if (isClearFilter) {\n this.clearFilter();\n }\n }\n };\n // eslint-disable-next-line\n /** @hidden */\n CheckBoxFilterBase.generateNullValuePredicates = function (defaults) {\n var coll = [];\n if (defaults.type === 'string') {\n coll.push({\n field: defaults.field, ignoreAccent: defaults.ignoreAccent, matchCase: defaults.matchCase,\n operator: defaults.operator, predicate: defaults.predicate, value: ''\n });\n }\n coll.push({\n field: defaults.field,\n matchCase: defaults.matchCase, operator: defaults.operator, predicate: defaults.predicate, value: null\n });\n coll.push({\n field: defaults.field, matchCase: defaults.matchCase, operator: defaults.operator,\n predicate: defaults.predicate, value: undefined\n });\n return coll;\n };\n // eslint-disable-next-line\n /** @hidden */\n CheckBoxFilterBase.prototype.initiateFilter = function (fColl) {\n var firstVal = fColl[0];\n var predicate;\n if (!isNullOrUndefined(firstVal)) {\n predicate = firstVal.ejpredicate ? firstVal.ejpredicate :\n new Predicate(firstVal.field, firstVal.operator, firstVal.value, !firstVal.matchCase, firstVal.ignoreAccent);\n for (var j = 1; j < fColl.length; j++) {\n predicate = fColl[j].ejpredicate !== undefined ?\n predicate[fColl[j].predicate](fColl[j].ejpredicate) :\n predicate[fColl[j].predicate](fColl[j].field, fColl[j].operator, fColl[j].value, !fColl[j].matchCase, fColl[j].ignoreAccent);\n }\n var args = {\n action: 'filtering', filterCollection: fColl, field: this.options.field,\n ejpredicate: Predicate.or(predicate)\n };\n this.options.handler(args);\n }\n };\n CheckBoxFilterBase.prototype.isForeignColumn = function (col) {\n return col.isForeignColumn ? col.isForeignColumn() : false;\n };\n CheckBoxFilterBase.prototype.refreshCheckboxes = function () {\n var _this = this;\n var val = this.sInput.value;\n var column = this.options.column;\n var query = this.isForeignColumn(column) ? this.foreignKeyQuery.clone() : this.options.query.clone();\n var foreignQuery = this.options.query.clone();\n var pred = query.queries.filter(function (e) { return e && e.fn === 'onWhere'; })[0];\n query.queries = [];\n foreignQuery.queries = [];\n var parsed = (this.options.type !== 'string' && parseFloat(val)) ? parseFloat(val) : val;\n var operator = this.options.isRemote ?\n (this.options.type === 'string' ? 'contains' : 'equal') : (this.options.type ? 'contains' : 'equal');\n var matchCase = true;\n var ignoreAccent = this.options.ignoreAccent;\n var field = this.isForeignColumn(column) ? column.foreignKeyValue : column.field;\n parsed = (parsed === '' || parsed === undefined) ? undefined : parsed;\n var coll = [];\n var defaults = {\n field: field, predicate: 'or', uid: this.options.uid,\n operator: 'equal', type: this.options.type, matchCase: matchCase, ignoreAccent: ignoreAccent\n };\n var predicte;\n var moduleName = this.options.dataManager.adaptor.getModuleName;\n if (this.options.type === 'boolean') {\n if (parsed !== undefined &&\n this.getLocalizedLabel('FilterTrue').toLowerCase().indexOf(parsed.toLowerCase()) !== -1) {\n parsed = 'true';\n }\n else if (parsed !== undefined &&\n this.getLocalizedLabel('FilterFalse').toLowerCase().indexOf(parsed.toLowerCase()) !== -1) {\n parsed = 'false';\n }\n if (parsed !== undefined &&\n this.getLocalizedLabel('FilterTrue').toLowerCase().indexOf(parsed.toLowerCase()) !== -1 && moduleName) {\n // eslint-disable-next-line no-constant-condition\n parsed = (moduleName() === 'ODataAdaptor' || 'ODataV4Adaptor') ? true : 'true';\n }\n else if (parsed !== undefined &&\n this.getLocalizedLabel('FilterFalse').toLowerCase().indexOf(parsed.toLowerCase()) !== -1 && moduleName) {\n // eslint-disable-next-line no-constant-condition\n parsed = (moduleName() === 'ODataAdaptor' || 'ODataV4Adaptor') ? false : 'false';\n }\n operator = 'equal';\n }\n if ((this.options.type === 'date' || this.options.type === 'datetime') && this.options.format) {\n var intl = new Internationalization();\n var format = typeof (this.options.format) === 'string' ? this.options.format :\n this.options.format.format;\n if (format) {\n parsed = intl.parseDate(val, { format: format }) || new Date(val);\n }\n else {\n parsed = new Date(val);\n }\n }\n this.addDistinct(query);\n var args = {\n requestType: events.filterSearchBegin,\n filterModel: this, columnName: field, column: column,\n operator: operator, matchCase: matchCase, ignoreAccent: ignoreAccent, filterChoiceCount: null,\n query: query, value: parsed\n };\n this.parent.trigger(events.actionBegin, args, function (filterargs) {\n // eslint-disable-next-line no-self-assign\n filterargs.operator = filterargs.operator;\n predicte = new Predicate(field, filterargs.operator, parsed, filterargs.matchCase, filterargs.ignoreAccent);\n if (_this.options.type === 'date' || _this.options.type === 'datetime') {\n operator = 'equal';\n var filterObj = {\n field: field, operator: operator, value: parsed, matchCase: matchCase,\n ignoreAccent: ignoreAccent\n };\n if (!isNullOrUndefined(parsed)) {\n predicte = getDatePredicate(filterObj, _this.options.type);\n }\n }\n if (val && typeof val === 'string' && _this.isBlanks &&\n _this.getLocalizedLabel('Blanks').toLowerCase().indexOf(val.toLowerCase()) >= 0) {\n coll = coll.concat(CheckBoxFilterBase.generateNullValuePredicates(defaults));\n var emptyValPredicte = CheckBoxFilterBase.generatePredicate(coll);\n emptyValPredicte.predicates.push(predicte);\n query.where(emptyValPredicte);\n }\n else if (val.length) {\n predicte = !isNullOrUndefined(pred) ? predicte.and(pred.e) : predicte;\n query.where(predicte);\n }\n else if (!isNullOrUndefined(pred)) {\n query.where(pred.e);\n }\n filterargs.filterChoiceCount = !isNullOrUndefined(filterargs.filterChoiceCount) ? filterargs.filterChoiceCount : 1000;\n var fPredicate = {};\n showSpinner(_this.spinner);\n _this.renderEmpty = false;\n if (_this.isForeignColumn(column) && val.length) {\n var colData = ('result' in column.dataSource) ? new DataManager(column.dataSource.result) :\n column.dataSource;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n colData.executeQuery(query).then(function (e) {\n var columnData = _this.options.column.columnData;\n _this.options.column.columnData = e.result;\n _this.parent.notify(events.generateQuery, { predicate: fPredicate, column: column });\n if (fPredicate.predicate.predicates.length) {\n foreignQuery.where(fPredicate.predicate);\n }\n else {\n _this.renderEmpty = true;\n }\n _this.options.column.columnData = columnData;\n foreignQuery.take(filterargs.filterChoiceCount);\n _this.search(filterargs, foreignQuery);\n });\n }\n else {\n query.take(filterargs.filterChoiceCount);\n _this.search(filterargs, query);\n }\n });\n };\n CheckBoxFilterBase.prototype.search = function (args, query) {\n if (this.parent.dataSource && 'result' in this.parent.dataSource) {\n this.filterEvent(args, query);\n }\n else {\n this.processSearch(query);\n }\n };\n CheckBoxFilterBase.prototype.getPredicateFromCols = function (columns) {\n var predicates = CheckBoxFilterBase.getPredicate(columns);\n var predicateList = [];\n var fPredicate = {};\n var isGrid = this.parent.getForeignKeyColumns !== undefined;\n var foreignColumn = isGrid ? this.parent.getForeignKeyColumns() : [];\n for (var _i = 0, _a = Object.keys(predicates); _i < _a.length; _i++) {\n var prop = _a[_i];\n var col = void 0;\n if (isGrid && !this.parent.getColumnByField(prop)) {\n col = getColumnByForeignKeyValue(prop, foreignColumn);\n }\n if (col) {\n this.parent.notify(events.generateQuery, { predicate: fPredicate, column: col });\n if (fPredicate.predicate.predicates.length) {\n predicateList.push(Predicate.or(fPredicate.predicate.predicates));\n }\n }\n else {\n predicateList.push(predicates[prop]);\n }\n }\n return predicateList.length && Predicate.and(predicateList);\n };\n CheckBoxFilterBase.prototype.getQuery = function () {\n return this.parent.getQuery ? this.parent.getQuery().clone() : new Query();\n };\n CheckBoxFilterBase.prototype.getAllData = function () {\n var _this = this;\n this.customQuery = false;\n var query = this.getQuery();\n query.requiresCount(); //consider take query\n this.addDistinct(query);\n var args = {\n requestType: events.filterChoiceRequest, query: query, filterChoiceCount: null\n };\n var filterModel = 'filterModel';\n args[filterModel] = this;\n this.parent.trigger(events.actionBegin, args, function (args) {\n args.filterChoiceCount = !isNullOrUndefined(args.filterChoiceCount) ? args.filterChoiceCount : 1000;\n query.take(args.filterChoiceCount);\n if (!args.query.distincts.length) {\n _this.customQuery = true;\n _this.queryGenerate(query);\n }\n if (_this.parent.dataSource && 'result' in _this.parent.dataSource) {\n _this.filterEvent(args, query);\n }\n else {\n _this.processDataOperation(query, true);\n }\n });\n };\n CheckBoxFilterBase.prototype.addDistinct = function (query) {\n var filteredColumn = DataUtil.distinct(this.options.filteredColumns, 'field');\n if (filteredColumn.indexOf(this.options.column.field) <= -1) {\n filteredColumn = filteredColumn.concat(this.options.column.field);\n }\n query.distinct(filteredColumn);\n return query;\n };\n CheckBoxFilterBase.prototype.filterEvent = function (args, query) {\n var _this = this;\n var defObj = eventPromise(args, query);\n this.parent.trigger(events.dataStateChange, defObj.state);\n var def = defObj.deffered;\n def.promise.then(function (e) {\n _this.dataSuccess(e);\n });\n };\n CheckBoxFilterBase.prototype.processDataOperation = function (query, isInitial) {\n var _this = this;\n this.options.dataSource = this.options.dataSource instanceof DataManager ?\n this.options.dataSource : new DataManager(this.options.dataSource);\n var allPromise = [];\n var runArray = [];\n if (this.isForeignColumn(this.options.column) && isInitial) {\n var colData = ('result' in this.options.column.dataSource) ?\n new DataManager(this.options.column.dataSource.result) :\n this.options.column.dataSource;\n this.foreignKeyQuery.params = query.params;\n allPromise.push(colData.executeQuery(this.foreignKeyQuery));\n runArray.push(function (data) { return _this.foreignKeyData = data; });\n }\n allPromise.push(this.options.dataSource.executeQuery(query));\n runArray.push(this.dataSuccess.bind(this));\n var i = 0;\n Promise.all(allPromise).then(function (e) {\n for (var j = 0; j < e.length; j++) {\n runArray[i++](e[j].result);\n }\n });\n };\n CheckBoxFilterBase.prototype.dataSuccess = function (e) {\n this.fullData = e;\n var args1 = { dataSource: this.fullData, executeQuery: true, field: this.options.field };\n this.parent.notify(events.beforeCheckboxRenderer, args1);\n if (args1.executeQuery) {\n var query = new Query();\n if (!this.customQuery) {\n this.queryGenerate(query);\n }\n // query.select(this.options.field);\n var result = new DataManager(args1.dataSource).executeLocal(query);\n var col = this.options.column;\n this.filteredData = CheckBoxFilterBase.getDistinct(result, this.options.field, col, this.foreignKeyData).records || [];\n }\n var data = args1.executeQuery ? this.filteredData : args1.dataSource;\n this.processDataSource(null, true, data, args1);\n if (this.sInput) {\n this.sInput.focus();\n }\n var args = {\n requestType: events.filterAfterOpen,\n columnName: this.options.field, columnType: this.options.type\n };\n var filterModel = 'filterModel';\n args[filterModel] = this;\n this.parent.notify(events.cBoxFltrComplete, args);\n if (this.isCheckboxFilterTemplate) {\n hideSpinner(this.spinner);\n }\n };\n CheckBoxFilterBase.prototype.queryGenerate = function (query) {\n if (this.parent.searchSettings && this.parent.searchSettings.key.length) {\n var sSettings = this.parent.searchSettings;\n var fields = sSettings.fields.length ? sSettings.fields : this.options.columns.map(function (f) { return f.field; });\n query.search(sSettings.key, fields, sSettings.operator, sSettings.ignoreCase, sSettings.ignoreAccent);\n }\n if ((this.options.filteredColumns.length)) {\n var cols = [];\n for (var i = 0; i < this.options.filteredColumns.length; i++) {\n var filterColumn = this.options.filteredColumns[i];\n if (this.options.uid) {\n filterColumn.uid = filterColumn.uid || this.parent.getColumnByField(filterColumn.field).uid;\n if (filterColumn.uid !== this.options.uid) {\n cols.push(this.options.filteredColumns[i]);\n }\n }\n else {\n if (filterColumn.field !== this.options.field) {\n cols.push(this.options.filteredColumns[i]);\n }\n }\n }\n var predicate = this.getPredicateFromCols(cols);\n if (predicate) {\n query.where(predicate);\n }\n }\n };\n CheckBoxFilterBase.prototype.processDataSource = function (query, isInitial, dataSource, args) {\n showSpinner(this.spinner);\n // query = query ? query : this.options.query.clone();\n // query.requiresCount();\n // let result: Object = new DataManager(dataSource as JSON[]).executeLocal(query);\n // let res: { result: Object[] } = result as { result: Object[] };\n this.updateResult();\n var args1 = { dataSource: this.fullData, isCheckboxFilterTemplate: false, column: this.options.column,\n element: this.cBox, type: this.options.type, format: this.options.type, btnObj: this.options.isResponsiveFilter ? null :\n this.dialogObj.btnObj[0], searchBox: this.searchBox };\n this.parent.notify(events.beforeCheckboxfilterRenderer, args1);\n this.isCheckboxFilterTemplate = args1.isCheckboxFilterTemplate;\n if (!this.isCheckboxFilterTemplate) {\n this.createFilterItems(dataSource, isInitial, args);\n }\n };\n CheckBoxFilterBase.prototype.processSearch = function (query) {\n this.processDataOperation(query);\n };\n CheckBoxFilterBase.prototype.updateResult = function () {\n this.result = {};\n var predicate = this.getPredicateFromCols(this.options.filteredColumns);\n var query = new Query();\n if (predicate) {\n query.where(predicate);\n }\n this.parent.notify(events.beforeCheckboxRendererQuery, { query: query });\n var result = new DataManager(this.fullData).executeLocal(query);\n for (var _i = 0, result_1 = result; _i < result_1.length; _i++) {\n var res = result_1[_i];\n this.result[getObject(this.options.field, res)] = true;\n }\n };\n CheckBoxFilterBase.prototype.clickHandler = function (e) {\n var target = e.target;\n if (!isNullOrUndefined(this.parent.loadingIndicator) && this.parent.loadingIndicator.indicatorType === 'Shimmer'\n && parentsUntil(target, 'e-mask-ftrchk')) {\n return;\n }\n var elem = parentsUntil(target, 'e-checkbox-wrapper');\n if (parentsUntil(target, 'e-searchbox')) {\n this.searchBoxClick(e);\n }\n if (elem && !this.isCheckboxFilterTemplate) {\n var selectAll = elem.querySelector('.e-selectall');\n if (selectAll) {\n this.updateAllCBoxes(!selectAll.classList.contains('e-check'));\n }\n else {\n toogleCheckbox(elem.parentElement);\n }\n this.updateIndeterminatenBtn();\n elem.querySelector('.e-chk-hidden').focus();\n }\n this.setFocus(parentsUntil(elem, 'e-ftrchk'));\n };\n CheckBoxFilterBase.prototype.keyupHandler = function (e) {\n this.setFocus(parentsUntil(e.target, 'e-ftrchk'));\n };\n CheckBoxFilterBase.prototype.setFocus = function (elem) {\n var prevElem = this.dlg.querySelector('.e-chkfocus');\n if (prevElem) {\n prevElem.classList.remove('e-chkfocus');\n }\n if (elem) {\n elem.classList.add('e-chkfocus');\n }\n };\n CheckBoxFilterBase.prototype.updateAllCBoxes = function (checked) {\n var cBoxes = [].slice.call(this.cBox.getElementsByClassName('e-frame'));\n for (var _i = 0, cBoxes_1 = cBoxes; _i < cBoxes_1.length; _i++) {\n var cBox = cBoxes_1[_i];\n removeAddCboxClasses(cBox, checked);\n setChecked(cBox.previousSibling, checked);\n }\n };\n CheckBoxFilterBase.prototype.dialogOpen = function () {\n if (this.parent.element.classList.contains('e-device')) {\n this.dialogObj.element.querySelector('.e-input-group').classList.remove('e-input-focus');\n if (!this.options.isResponsiveFilter) {\n this.dialogObj.element.querySelector('.e-btn').focus();\n }\n }\n };\n CheckBoxFilterBase.prototype.createCheckbox = function (value, checked, data) {\n var elem = checked ? this.cBoxTrue.cloneNode(true) :\n this.cBoxFalse.cloneNode(true);\n setChecked(elem.querySelector('input'), checked);\n var label = elem.querySelector('.e-label');\n var dummyData = extendObjWithFn({}, data, { column: this.options.column, parent: this.parent });\n var innerText = this.options.disableHtmlEncode ? 'textContent' : 'innerHTML';\n label[innerText] = !isNullOrUndefined(value) && value.toString().length ? value :\n this.getLocalizedLabel('Blanks');\n if (label.innerHTML === this.getLocalizedLabel('Blanks')) {\n this.isBlanks = true;\n }\n if (typeof value === 'boolean') {\n label.innerHTML = value === true ? this.getLocalizedLabel('FilterTrue') : this.getLocalizedLabel('FilterFalse');\n }\n addClass([label], ['e-checkboxfiltertext']);\n if (this.options.template && data[this.options.column.field] !== this.getLocalizedLabel('SelectAll')) {\n label.innerHTML = '';\n var isReactCompiler = this.parent.isReact && this.options.column.filter\n && typeof (this.options.column.filter.itemTemplate) !== 'string';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n if (isReactCompiler || isReactChild) {\n this.options.template(dummyData, this.parent, 'filterItemTemplate', null, null, null, label);\n this.parent.renderTemplates();\n }\n else {\n appendChildren(label, this.options.template(dummyData, this.parent, 'filterItemTemplate'));\n }\n }\n return elem;\n };\n CheckBoxFilterBase.prototype.updateIndeterminatenBtn = function () {\n var cnt = this.cBox.children.length - 1;\n var className = [];\n var disabled = false;\n var elem = this.cBox.querySelector('.e-selectall');\n var selected = this.cBox.querySelectorAll('.e-check:not(.e-selectall)').length;\n var btn;\n if (!this.options.isResponsiveFilter) {\n btn = this.dialogObj.btnObj[0];\n btn.disabled = false;\n }\n var input = elem.previousSibling;\n setChecked(input, false);\n input.indeterminate = false;\n if (cnt === selected) {\n className = ['e-check'];\n setChecked(input, true);\n }\n else if (selected) {\n className = ['e-stop'];\n input.indeterminate = true;\n }\n else {\n className = ['e-uncheck'];\n disabled = true;\n if (btn) {\n btn.disabled = true;\n }\n }\n if (btn) {\n this.filterState = !btn.disabled;\n btn.dataBind();\n }\n removeClass([elem], ['e-check', 'e-stop', 'e-uncheck']);\n addClass([elem], className);\n this.parent.notify(events.refreshCustomFilterOkBtn, { disabled: disabled });\n };\n CheckBoxFilterBase.prototype.createFilterItems = function (data, isInitial, args1) {\n var _a;\n var cBoxes = this.parent.createElement('div');\n var btn;\n var disabled = false;\n if (!this.options.isResponsiveFilter) {\n btn = this.dialogObj.btnObj[0];\n }\n var nullCounter = -1;\n var key = 'ejValue';\n if (!args1.executeQuery) {\n key = args1.field;\n }\n for (var i = 0; i < data.length; i++) {\n var val = getValue(key, data[i]);\n if (val === '' || isNullOrUndefined(val)) {\n nullCounter = nullCounter + 1;\n }\n }\n this.itemsCnt = nullCounter !== -1 ? data.length - nullCounter : data.length;\n if (data.length && !this.renderEmpty) {\n var selectAllValue = this.getLocalizedLabel('SelectAll');\n var innerDiv = this.cBox.querySelector('.e-checkfltrnmdiv');\n if (innerDiv) {\n innerDiv.classList.remove('e-checkfltrnmdiv');\n }\n var checkBox = this.createCheckbox(selectAllValue, false, (_a = {}, _a[this.options.field] = selectAllValue, _a));\n if (this.parent.cssClass) {\n addClass([checkBox], [this.parent.cssClass]);\n }\n var selectAll = createCboxWithWrap(getUid('cbox'), checkBox, 'e-ftrchk');\n selectAll.querySelector('.e-frame').classList.add('e-selectall');\n cBoxes.appendChild(selectAll);\n var predicate = new Predicate('field', 'equal', this.options.field);\n if (this.options.foreignKeyValue) {\n predicate = predicate.or('field', 'equal', this.options.foreignKeyValue);\n }\n var isColFiltered = new DataManager(this.options.filteredColumns).executeLocal(new Query().where(predicate)).length;\n var isRndere = void 0;\n for (var i = 0; i < data.length; i++) {\n var uid = getUid('cbox');\n this.values[uid] = getValue(key, data[i]);\n var value = getValue(this.options.field, data[i]);\n if (this.options.formatFn) {\n value = this.valueFormatter.toView(value, this.options.formatFn);\n }\n var args_1 = { value: value, column: this.options.column, data: data[i] };\n this.parent.notify(events.filterCboxValue, args_1);\n value = args_1.value;\n if ((value === '' || isNullOrUndefined(value))) {\n if (isRndere) {\n continue;\n }\n isRndere = true;\n }\n var checkbox = this.createCheckbox(value, this.getCheckedState(isColFiltered, this.values[uid]), getValue('dataObj', data[i]));\n cBoxes.appendChild(createCboxWithWrap(uid, checkbox, 'e-ftrchk'));\n }\n this.cBox.innerHTML = '';\n appendChildren(this.cBox, [].slice.call(cBoxes.children));\n this.updateIndeterminatenBtn();\n if (btn) {\n btn.disabled = false;\n }\n disabled = false;\n }\n else {\n cBoxes.appendChild(this.parent.createElement('span', { innerHTML: this.getLocalizedLabel('NoResult') }));\n this.cBox.innerHTML = '';\n this.cBox.appendChild(this.parent.createElement('div', { className: 'e-checkfltrnmdiv' }));\n appendChildren(this.cBox.children[0], [].slice.call(cBoxes.children));\n if (btn) {\n btn.disabled = true;\n }\n disabled = true;\n }\n if (btn && data.length) {\n this.filterState = !btn.disabled;\n btn.dataBind();\n }\n var args = { requestType: events.filterChoiceRequest, dataSource: this.renderEmpty ? [] : data };\n var filterModel = 'filterModel';\n args[filterModel] = this;\n this.parent.notify(events.cBoxFltrComplete, args);\n this.parent.notify(events.refreshCustomFilterOkBtn, { disabled: disabled });\n hideSpinner(this.spinner);\n };\n CheckBoxFilterBase.prototype.getCheckedState = function (isColFiltered, value) {\n if (!this.isFiltered || !isColFiltered) {\n return true;\n }\n else {\n var checkState = this.result[value];\n return this.options.operator === 'notequal' ? !checkState : checkState;\n }\n };\n CheckBoxFilterBase.getDistinct = function (json, field, column, foreignKeyData) {\n var len = json.length;\n var result = [];\n var value;\n var ejValue = 'ejValue';\n var lookup = {};\n var isForeignKey = column && column.isForeignColumn ? column.isForeignColumn() : false;\n while (len--) {\n value = json[len];\n value = getObject(field, value); //local remote diff, check with mdu\n if (!(value in lookup)) {\n var obj = {};\n obj[ejValue] = value;\n lookup[value] = true;\n if (isForeignKey) {\n var foreignDataObj = getForeignData(column, {}, value, foreignKeyData)[0];\n setValue(events.foreignKeyData, foreignDataObj, json[len]);\n value = getValue(column.foreignKeyValue, foreignDataObj);\n }\n setValue(field, isNullOrUndefined(value) ? null : value, obj);\n setValue('dataObj', json[len], obj);\n result.push(obj);\n }\n }\n return DataUtil.group(DataUtil.sort(result, field, DataUtil.fnAscending), 'ejValue');\n };\n CheckBoxFilterBase.getPredicate = function (columns) {\n var cols = DataUtil.distinct(columns, 'field', true) || [];\n var collection = [];\n var pred = {};\n for (var i = 0; i < cols.length; i++) {\n collection = new DataManager(columns).executeLocal(new Query().where('field', 'equal', cols[i].field));\n if (collection.length !== 0) {\n pred[cols[i].field] = CheckBoxFilterBase.generatePredicate(collection);\n }\n }\n return pred;\n };\n CheckBoxFilterBase.generatePredicate = function (cols) {\n var len = cols ? cols.length : 0;\n var predicate;\n var operate = 'or';\n var first = CheckBoxFilterBase.updateDateFilter(cols[0]);\n first.ignoreAccent = !isNullOrUndefined(first.ignoreAccent) ? first.ignoreAccent : false;\n if (first.type === 'date' || first.type === 'datetime') {\n predicate = getDatePredicate(first, first.type);\n }\n else {\n predicate = first.ejpredicate ? first.ejpredicate :\n new Predicate(first.field, first.operator, first.value, !CheckBoxFilterBase.getCaseValue(first), first.ignoreAccent);\n }\n for (var p = 1; p < len; p++) {\n cols[p] = CheckBoxFilterBase.updateDateFilter(cols[p]);\n if (len > 2 && p > 1 && cols[p].predicate === 'or') {\n if (cols[p].type === 'date' || cols[p].type === 'datetime') {\n predicate.predicates.push(getDatePredicate(cols[p], cols[p].type));\n }\n else {\n predicate.predicates.push(new Predicate(cols[p].field, cols[p].operator, cols[p].value, !CheckBoxFilterBase.getCaseValue(cols[p]), cols[p].ignoreAccent));\n }\n }\n else {\n if (cols[p].type === 'date' || cols[p].type === 'datetime') {\n if (cols[p].predicate === 'and' && cols[p].operator === 'equal') {\n predicate = predicate[operate](getDatePredicate(cols[p], cols[p].type), cols[p].type, cols[p].ignoreAccent);\n }\n else {\n predicate = predicate[(cols[p].predicate)](getDatePredicate(cols[p], cols[p].type), cols[p].type, cols[p].ignoreAccent);\n }\n }\n else {\n predicate = cols[p].ejpredicate ?\n predicate[cols[p].predicate](cols[p].ejpredicate) :\n predicate[(cols[p].predicate)](cols[p].field, cols[p].operator, cols[p].value, !CheckBoxFilterBase.getCaseValue(cols[p]), cols[p].ignoreAccent);\n }\n }\n }\n return predicate || null;\n };\n CheckBoxFilterBase.getCaseValue = function (filter) {\n if (isNullOrUndefined(filter.matchCase)) {\n if (filter.type === 'string' || isNullOrUndefined(filter.type) && typeof (filter.value) === 'string') {\n return false;\n }\n else {\n return true;\n }\n }\n else {\n return filter.matchCase;\n }\n };\n CheckBoxFilterBase.updateDateFilter = function (filter) {\n if ((filter.type === 'date' || filter.type === 'datetime' || filter.value instanceof Date)) {\n filter.type = filter.type || 'date';\n }\n return filter;\n };\n return CheckBoxFilterBase;\n}());\nexport { CheckBoxFilterBase };\n","import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { Query, DataManager, Predicate, Deferred, UrlAdaptor } from '@syncfusion/ej2-data';\nimport { setFormatter, isGroupAdaptive, getColumnByForeignKeyValue, refreshFilteredColsUid } from '../base/util';\nimport * as events from '../base/constant';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\n/**\n * Grid data module is used to generate query and data source.\n *\n * @hidden\n */\nvar Data = /** @class */ (function () {\n /**\n * Constructor for data module.\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {ServiceLocator} serviceLocator - specifies the service locator\n * @hidden\n */\n function Data(parent, serviceLocator) {\n this.dataState = { isPending: false, resolver: null, group: [] };\n this.foreignKeyDataState = { isPending: false, resolver: null };\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.initDataManager();\n if (this.parent.isDestroyed || this.getModuleName() === 'foreignKey') {\n return;\n }\n this.parent.on(events.rowsAdded, this.addRows, this);\n this.parent.on(events.rowPositionChanged, this.reorderRows, this);\n this.parent.on(events.rowsRemoved, this.removeRows, this);\n this.parent.on(events.dataSourceModified, this.initDataManager, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.updateData, this.crudActions, this);\n this.parent.on(events.addDeleteAction, this.getData, this);\n this.parent.on(events.autoCol, this.refreshFilteredCols, this);\n this.parent.on(events.columnsPrepared, this.refreshFilteredCols, this);\n }\n Data.prototype.reorderRows = function (e) {\n this.dataManager.dataSource.json.splice(e.toIndex, 0, this.dataManager.dataSource.json.splice(e.fromIndex, 1)[0]);\n };\n Data.prototype.getModuleName = function () {\n return 'data';\n };\n /**\n * The function used to initialize dataManager and external query\n *\n * @returns {void}\n */\n Data.prototype.initDataManager = function () {\n var gObj = this.parent;\n this.dataManager = gObj.dataSource instanceof DataManager ? gObj.dataSource :\n (isNullOrUndefined(gObj.dataSource) ? new DataManager() : new DataManager(gObj.dataSource));\n if (gObj.isAngular && !(gObj.query instanceof Query)) {\n gObj.setProperties({ query: new Query() }, true);\n }\n else {\n this.isQueryInvokedFromData = true;\n gObj.query = gObj.query instanceof Query ? gObj.query : new Query();\n }\n };\n /**\n * The function is used to generate updated Query from Grid model.\n *\n * @param {boolean} skipPage - specifies the boolean to skip the page\n * @returns {Query} returns the Query\n * @hidden\n */\n Data.prototype.generateQuery = function (skipPage) {\n var gObj = this.parent;\n var query = gObj.getQuery().clone();\n if (this.parent.columnQueryMode === 'ExcludeHidden') {\n query.select(this.parent.getColumns().filter(function (column) { return !(column.isPrimaryKey !== true && column.visible === false || column.field === undefined); }).map(function (column) { return column.field; }));\n }\n else if (this.parent.columnQueryMode === 'Schema') {\n var selectQueryFields = [];\n var columns = this.parent.columns;\n for (var i = 0; i < columns.length; i++) {\n selectQueryFields.push(columns[i].field);\n }\n query.select(selectQueryFields);\n }\n this.filterQuery(query);\n this.searchQuery(query);\n this.aggregateQuery(query);\n this.sortQuery(query);\n if (isGroupAdaptive(this.parent)) {\n this.virtualGroupPageQuery(query);\n }\n else {\n this.pageQuery(query, skipPage);\n }\n this.groupQuery(query);\n return query;\n };\n /**\n * @param {Query} query - specifies the query\n * @returns {Query} - returns the query\n * @hidden\n */\n Data.prototype.aggregateQuery = function (query) {\n var rows = this.parent.aggregates;\n for (var i = 0; i < rows.length; i++) {\n var row = rows[i];\n for (var j = 0; j < row.columns.length; j++) {\n var cols = row.columns[j];\n var types = cols.type instanceof Array ? cols.type : [cols.type];\n for (var k = 0; k < types.length; k++) {\n query.aggregate(types[k].toLowerCase(), cols.field);\n }\n }\n }\n return query;\n };\n Data.prototype.virtualGroupPageQuery = function (query) {\n var fName = 'fn';\n if (query.queries.length) {\n for (var i = 0; i < query.queries.length; i++) {\n if (query.queries[i][fName] === 'onPage') {\n query.queries.splice(i, 1);\n }\n }\n }\n return query;\n };\n Data.prototype.pageQuery = function (query, skipPage) {\n var gObj = this.parent;\n var fName = 'fn';\n var args = { query: query, skipPage: false };\n gObj.notify(events.setVirtualPageQuery, args);\n if (args.skipPage) {\n return query;\n }\n if ((gObj.allowPaging || gObj.enableVirtualization || gObj.enableInfiniteScrolling) && skipPage !== true) {\n gObj.pageSettings.currentPage = Math.max(1, gObj.pageSettings.currentPage);\n if (gObj.pageSettings.pageCount <= 0) {\n gObj.pageSettings.pageCount = 8;\n }\n if (gObj.pageSettings.pageSize <= 0) {\n gObj.pageSettings.pageSize = 12;\n }\n if (query.queries.length) {\n for (var i = 0; i < query.queries.length; i++) {\n if (query.queries[i][fName] === 'onPage') {\n query.queries.splice(i, 1);\n }\n }\n }\n if (!isNullOrUndefined(gObj.infiniteScrollModule) && gObj.enableInfiniteScrolling) {\n this.parent.notify(events.infinitePageQuery, query);\n }\n else {\n query.page(gObj.pageSettings.currentPage, gObj.allowPaging && gObj.pagerModule &&\n gObj.pagerModule.pagerObj.isAllPage && !this.dataManager.dataSource.offline ? null :\n gObj.pageSettings.pageSize);\n }\n }\n return query;\n };\n Data.prototype.groupQuery = function (query) {\n var gObj = this.parent;\n if (gObj.allowGrouping && gObj.groupSettings.columns.length) {\n if (this.parent.groupSettings.enableLazyLoading) {\n query.lazyLoad.push({ key: 'isLazyLoad', value: this.parent.groupSettings.enableLazyLoading });\n }\n var columns = gObj.groupSettings.columns;\n for (var i = 0, len = columns.length; i < len; i++) {\n var column = this.getColumnByField(columns[i]);\n if (!column) {\n this.parent.log('initial_action', { moduleName: 'group', columnName: columns[i] });\n }\n var isGrpFmt = column.enableGroupByFormat;\n var format = column.format;\n if (isGrpFmt) {\n query.group(columns[i], this.formatGroupColumn.bind(this), format);\n }\n else {\n query.group(columns[i], null);\n }\n }\n }\n return query;\n };\n Data.prototype.sortQuery = function (query) {\n var gObj = this.parent;\n if ((gObj.allowSorting || gObj.allowGrouping) && gObj.sortSettings.columns.length) {\n var columns = gObj.sortSettings.columns;\n var sortGrp = [];\n for (var i = columns.length - 1; i > -1; i--) {\n var col = this.getColumnByField(columns[i].field);\n if (col) {\n col.setSortDirection(columns[i].direction);\n }\n else {\n this.parent.log('initial_action', { moduleName: 'sort', columnName: columns[i].field });\n return query;\n }\n var fn = columns[i].direction;\n if (col.sortComparer) {\n this.parent.log('grid_sort_comparer');\n fn = !this.isRemote() ? col.sortComparer.bind(col) : columns[i].direction;\n }\n if (gObj.groupSettings.columns.indexOf(columns[i].field) === -1) {\n if (col.isForeignColumn() || col.sortComparer) {\n query.sortByForeignKey(col.field, fn, undefined, columns[i].direction.toLowerCase());\n }\n else {\n query.sortBy(col.field, fn);\n }\n }\n else {\n sortGrp.push({ direction: fn, field: col.field });\n }\n }\n for (var i = 0, len = sortGrp.length; i < len; i++) {\n if (typeof sortGrp[i].direction === 'string') {\n query.sortBy(sortGrp[i].field, sortGrp[i].direction);\n }\n else {\n var col = this.getColumnByField(sortGrp[i].field);\n query.sortByForeignKey(sortGrp[i].field, sortGrp[i].direction, undefined, col.getSortDirection().toLowerCase());\n }\n }\n }\n return query;\n };\n Data.prototype.searchQuery = function (query, fcolumn, isForeignKey) {\n var sSettings = this.parent.searchSettings;\n var fields = sSettings.fields.length ? sSettings.fields : this.getSearchColumnFieldNames();\n var predicateList = [];\n var needForeignKeySearch = false;\n if (this.parent.searchSettings.key.length) {\n needForeignKeySearch = this.parent.getForeignKeyColumns().some(function (col) { return fields.indexOf(col.field) > -1; });\n var adaptor = !isForeignKey ? this.dataManager.adaptor : fcolumn.dataSource.adaptor;\n if (needForeignKeySearch || (adaptor.getModuleName &&\n adaptor.getModuleName() === 'ODataV4Adaptor')) {\n fields = isForeignKey ? [fcolumn.foreignKeyValue] : fields;\n for (var i = 0; i < fields.length; i++) {\n var column = isForeignKey ? fcolumn : this.getColumnByField(fields[i]);\n if (column.isForeignColumn() && !isForeignKey) {\n predicateList = this.fGeneratePredicate(column, predicateList);\n }\n else {\n predicateList.push(new Predicate(fields[i], sSettings.operator, sSettings.key, sSettings.ignoreCase, sSettings.ignoreAccent));\n }\n }\n var predList = Predicate.or(predicateList);\n predList.key = sSettings.key;\n query.where(predList);\n }\n else {\n query.search(sSettings.key, fields, sSettings.operator, sSettings.ignoreCase, sSettings.ignoreAccent);\n }\n }\n return query;\n };\n Data.prototype.filterQuery = function (query, column, skipFoerign) {\n var gObj = this.parent;\n var predicateList = [];\n var actualFilter = [];\n var foreignColumn = this.parent.getForeignKeyColumns();\n var foreignColEmpty;\n if (gObj.allowFiltering && gObj.filterSettings.columns.length) {\n var columns = column ? column : gObj.filterSettings.columns;\n var colType = {};\n for (var _i = 0, _a = gObj.getColumns(); _i < _a.length; _i++) {\n var col = _a[_i];\n colType[col.field] = col.filter.type ? col.filter.type : gObj.filterSettings.type;\n }\n var foreignCols = [];\n var defaultFltrCols = [];\n for (var _b = 0, columns_1 = columns; _b < columns_1.length; _b++) {\n var col = columns_1[_b];\n var gridColumn = gObj.getColumnByField(col.field);\n if (isNullOrUndefined(col.type) && gridColumn && (gridColumn.type === 'date' || gridColumn.type === 'datetime')) {\n col.type = gObj.getColumnByField(col.field).type;\n }\n if (col.isForeignKey) {\n foreignCols.push(col);\n }\n else {\n defaultFltrCols.push(col);\n }\n }\n if (defaultFltrCols.length) {\n for (var i = 0, len = defaultFltrCols.length; i < len; i++) {\n defaultFltrCols[i].uid = defaultFltrCols[i].uid ||\n this.parent.grabColumnByFieldFromAllCols(defaultFltrCols[i].field).uid;\n }\n var excelPredicate = CheckBoxFilterBase.getPredicate(defaultFltrCols);\n for (var _c = 0, _d = Object.keys(excelPredicate); _c < _d.length; _c++) {\n var prop = _d[_c];\n predicateList.push(excelPredicate[prop]);\n }\n }\n if (foreignCols.length) {\n for (var _e = 0, foreignCols_1 = foreignCols; _e < foreignCols_1.length; _e++) {\n var col = foreignCols_1[_e];\n col.uid = col.uid || this.parent.grabColumnByFieldFromAllCols(col.field).uid;\n var column_1 = this.parent.grabColumnByUidFromAllCols(col.uid);\n if (!column_1) {\n this.parent.log('initial_action', { moduleName: 'filter', columnName: col.field });\n }\n if (column_1.isForeignColumn() && getColumnByForeignKeyValue(col.field, foreignColumn) && !skipFoerign) {\n actualFilter.push(col);\n if (!column_1.columnData.length) {\n foreignColEmpty = true;\n }\n predicateList = this.fGeneratePredicate(column_1, predicateList);\n }\n else {\n var excelPredicate = CheckBoxFilterBase.getPredicate(columns);\n for (var _f = 0, _g = Object.keys(excelPredicate); _f < _g.length; _f++) {\n var prop = _g[_f];\n predicateList.push(excelPredicate[prop]);\n }\n }\n }\n }\n if (predicateList.length && !foreignColEmpty) {\n query.where(Predicate.and(predicateList));\n }\n else {\n this.parent.notify(events.showEmptyGrid, {});\n }\n }\n return query;\n };\n Data.prototype.fGeneratePredicate = function (col, predicateList) {\n var fPredicate = {};\n if (col) {\n this.parent.notify(events.generateQuery, { predicate: fPredicate, column: col });\n if (fPredicate.predicate.predicates.length) {\n predicateList.push(fPredicate.predicate);\n }\n }\n return predicateList;\n };\n /**\n * The function is used to get dataManager promise by executing given Query.\n *\n * @param {object} args - specifies the object\n * @param {string} args.requestType - Defines the request type\n * @param {string[]} args.foreignKeyData - Defines the foreignKeyData.string\n * @param {Object} args.data - Defines the data.\n * @param {number} args.index - Defines the index .\n * @param {Query} query - Defines the query which will execute along with data processing.\n * @returns {Promise';\n }\n }\n this.bindSearchEvents();\n };\n Toolbar.prototype.createToolbar = function () {\n var items = this.getItems();\n this.toolbar = new tool({\n items: items,\n clicked: this.toolbarClickHandler.bind(this),\n enablePersistence: this.parent.enablePersistence,\n enableRtl: this.parent.enableRtl,\n created: this.toolbarCreated.bind(this),\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n this.toolbar.isReact = this.parent.isReact;\n this.toolbar.on('render-react-toolbar-template', this.addReactToolbarPortals, this);\n var isStringTemplate = 'isStringTemplate';\n this.toolbar[isStringTemplate] = true;\n var viewStr = 'viewContainerRef';\n var registerTemp = 'registeredTemplate';\n if (this.parent[viewStr]) {\n this.toolbar[registerTemp] = {};\n this.toolbar[viewStr] = this.parent[viewStr];\n }\n this.element = this.parent.createElement('div', { id: this.gridID + '_toolbarItems' });\n if (this.parent.enableAdaptiveUI) {\n this.element.classList.add('e-res-toolbar');\n }\n if (this.parent.toolbarTemplate) {\n if (typeof (this.parent.toolbarTemplate) === 'string') {\n this.toolbar.appendTo(this.parent.toolbarTemplate);\n this.element = this.toolbar.element;\n }\n else {\n var isReactCompiler = this.parent.isReact && typeof (this.parent.toolbarTemplate) !== 'string';\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n var ID = this.parent.element.id + 'toolbarTemplate';\n if (isReactCompiler || isReactChild) {\n templateCompiler(this.parent.toolbarTemplate)({}, this.parent, 'toolbarTemplate', ID, null, null, this.element);\n this.parent.renderTemplates();\n }\n else {\n appendChildren(this.element, templateCompiler(this.parent.toolbarTemplate)({}, this.parent, 'toolbarTemplate'));\n }\n }\n }\n else {\n this.toolbar.appendTo(this.element);\n }\n this.parent.element.insertBefore(this.element, this.parent.getHeaderContent());\n var tlbrLeftElement = this.element.querySelector(\".e-toolbar-left\");\n var tlbrCenterElement = this.element.querySelector(\".e-toolbar-center\");\n var tlbrRightElement = this.element.querySelector(\".e-toolbar-right\");\n var tlbrItems = this.element.querySelector(\".e-toolbar-items\");\n var tlbrElement = this.element;\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 (tlbrLeftWidth > tlbrWidth || tlbrCenterWidth > tlbrWidth || tlbrRightWidth > tlbrWidth || tlbrItemsWidth > tlbrWidth) {\n this.toolbar.refreshOverflow();\n }\n };\n Toolbar.prototype.addReactToolbarPortals = function (args) {\n if (this.parent.isReact && args) {\n this.parent.portals = this.parent.portals.concat(args);\n this.parent.renderTemplates();\n }\n };\n Toolbar.prototype.renderResponsiveSearch = function (isRender) {\n if (isRender) {\n this.toolbarCreated(true);\n this.refreshResponsiveToolbarItems(ResponsiveToolbarAction.isSearch);\n this.searchElement = select('#' + this.gridID + '_searchbar', this.element);\n var right = parentsUntil(this.searchElement, 'e-toolbar-right');\n right.classList.add('e-responsive-right');\n if (this.parent.searchSettings) {\n this.updateSearchBox();\n }\n this.searchBoxObj.searchFocus({ target: this.searchElement });\n this.searchElement.focus();\n }\n else {\n this.refreshResponsiveToolbarItems(ResponsiveToolbarAction.isInitial);\n }\n };\n Toolbar.prototype.refreshResponsiveToolbarItems = function (action) {\n if (action === ResponsiveToolbarAction.isInitial) {\n var id = this.parent.element.id;\n var items = [id + '_edit', id + '_delete'];\n var selectedRecords = this.parent.getSelectedRowIndexes();\n var excludingItems = [id + '_responsiveback', id + '_update', id + '_cancel'];\n for (var _i = 0, _a = this.toolbar.items; _i < _a.length; _i++) {\n var item = _a[_i];\n var toolbarEle = this.toolbar.element.querySelector('#' + item.id);\n if (toolbarEle) {\n if (items.indexOf(item.id) > -1) {\n if (selectedRecords.length) {\n toolbarEle.parentElement.classList.remove('e-hidden');\n }\n else {\n toolbarEle.parentElement.classList.add('e-hidden');\n }\n }\n else {\n if (excludingItems.indexOf(item.id) === -1) {\n toolbarEle.parentElement.classList.remove('e-hidden');\n }\n else {\n toolbarEle.parentElement.classList.add('e-hidden');\n }\n }\n }\n }\n if (this.searchElement) {\n var right = parentsUntil(this.searchElement, 'e-toolbar-right');\n right.classList.remove('e-responsive-right');\n this.toolbarCreated(false);\n this.unWireEvent();\n this.searchElement = undefined;\n }\n }\n if (action === ResponsiveToolbarAction.isSearch) {\n var items = [this.parent.element.id + '_responsiveback', this.parent.element.id + '_search'];\n for (var _b = 0, _c = this.toolbar.items; _b < _c.length; _b++) {\n var item = _c[_b];\n var toolbarEle = this.toolbar.element.querySelector('#' + item.id);\n if (toolbarEle) {\n if (items.indexOf(item.id) > -1) {\n toolbarEle.parentElement.classList.remove('e-hidden');\n }\n else {\n toolbarEle.parentElement.classList.add('e-hidden');\n }\n }\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Toolbar.prototype.refreshToolbarItems = function (args) {\n var gObj = this.parent;\n var enableItems = [];\n var disableItems = [];\n var edit = gObj.editSettings;\n var hasData = gObj.currentViewData && gObj.currentViewData.length;\n if (edit.allowAdding) {\n enableItems.push(this.gridID + '_add');\n }\n else {\n disableItems.push(this.gridID + '_add');\n }\n if (edit.allowEditing && hasData) {\n enableItems.push(this.gridID + '_edit');\n }\n else {\n disableItems.push(this.gridID + '_edit');\n }\n if (edit.allowDeleting && hasData) {\n enableItems.push(this.gridID + '_delete');\n }\n else {\n disableItems.push(this.gridID + '_delete');\n }\n if (gObj.editSettings.mode === 'Batch') {\n if (gObj.element.getElementsByClassName('e-updatedtd').length && (edit.allowAdding || edit.allowEditing)) {\n enableItems.push(this.gridID + '_update');\n enableItems.push(this.gridID + '_cancel');\n }\n else {\n disableItems.push(this.gridID + '_update');\n disableItems.push(this.gridID + '_cancel');\n }\n }\n else {\n if (gObj.isEdit && (edit.allowAdding || edit.allowEditing)) {\n enableItems = [this.gridID + '_update', this.gridID + '_cancel'];\n disableItems = [this.gridID + '_add', this.gridID + '_edit', this.gridID + '_delete'];\n }\n else {\n disableItems.push(this.gridID + '_update');\n disableItems.push(this.gridID + '_cancel');\n }\n }\n this.enableItems(enableItems, true);\n this.enableItems(disableItems, false);\n };\n Toolbar.prototype.getItems = function () {\n var items = [];\n var toolbarItems = this.parent.toolbar || [];\n if (typeof (this.parent.toolbar) === 'string') {\n return [];\n }\n if (this.parent.rowRenderingMode === 'Vertical') {\n if (this.parent.allowFiltering && this.parent.filterSettings.type !== 'FilterBar') {\n items.push(this.getItemObject('responsiveFilter'));\n }\n if (this.parent.allowSorting) {\n items.push(this.getItemObject('responsiveSort'));\n }\n }\n for (var _i = 0, toolbarItems_1 = toolbarItems; _i < toolbarItems_1.length; _i++) {\n var item = toolbarItems_1[_i];\n switch (typeof item) {\n case 'number':\n items.push(this.getItemObject(this.items[item]));\n break;\n case 'string':\n items.push(this.getItemObject(item));\n break;\n default:\n items.push(this.getItem(item));\n }\n }\n if (this.parent.enableAdaptiveUI && this.parent.toolbar && this.parent.toolbar.indexOf('Search') > -1) {\n items.push(this.getItemObject('responsiveBack'));\n }\n return items;\n };\n Toolbar.prototype.getItem = function (itemObject) {\n var item = this.predefinedItems[itemObject.text];\n return item ? extend(item, item, itemObject) : itemObject;\n };\n Toolbar.prototype.getItemObject = function (itemName) {\n return this.predefinedItems[itemName] || { text: itemName, id: this.gridID + '_' + itemName };\n };\n /**\n * Enables or disables ToolBar items.\n *\n * @param {string[]} items - Defines the collection of itemID of ToolBar items.\n * @param {boolean} isEnable - Defines the items to be enabled or disabled.\n * @returns {void}\n * @hidden\n */\n Toolbar.prototype.enableItems = function (items, isEnable) {\n for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {\n var item = items_1[_i];\n var element = select('#' + item, this.element);\n if (element) {\n this.toolbar.enableItems(element.parentElement, isEnable);\n }\n }\n };\n Toolbar.prototype.toolbarClickHandler = function (args) {\n var _this = this;\n var gObj = this.parent;\n var gID = this.gridID;\n extend(args, { cancel: false });\n var newArgs = args;\n var originalEvent = args.originalEvent;\n gObj.trigger(events.toolbarClick, newArgs, function (toolbarargs) {\n toolbarargs.originalEvent = toolbarargs.originalEvent ? toolbarargs.originalEvent : originalEvent;\n if (!toolbarargs.cancel) {\n switch (!isNullOrUndefined(toolbarargs.item) && toolbarargs.item.id) {\n case gID + '_print':\n gObj.print();\n break;\n case gID + '_edit':\n gObj.startEdit();\n break;\n case gID + '_update':\n gObj.endEdit();\n break;\n case gID + '_cancel':\n gObj.closeEdit();\n break;\n case gID + '_add':\n gObj.addRecord();\n break;\n case gID + '_delete':\n gObj.deleteRecord();\n break;\n case gID + '_search':\n if (toolbarargs.originalEvent.target.id === gID + '_searchbutton' && _this.searchElement) {\n _this.search();\n }\n else if (gObj.enableAdaptiveUI && !_this.searchElement\n && (toolbarargs.originalEvent.target.classList.contains('e-search-wrapper')\n || toolbarargs.originalEvent.target.id === gID + '_searchbutton')) {\n _this.renderResponsiveSearch(true);\n }\n else if (toolbarargs.originalEvent.target.id === gID + '_clearbutton' && _this.searchElement) {\n _this.searchElement.value = '';\n _this.sIcon.classList.add('e-clear-icon-hide');\n if (_this.isSearched) {\n _this.parent.search(_this.searchElement.value);\n _this.isSearched = false;\n }\n }\n break;\n case gID + '_columnchooser':\n /* eslint-disable */\n var tarElement = _this.parent.element.querySelector('.e-ccdiv');\n var y = tarElement.getBoundingClientRect().top;\n var x = tarElement.getBoundingClientRect().left;\n var targetEle = toolbarargs.originalEvent.target;\n /* eslint-enable */\n y = tarElement.getBoundingClientRect().top + tarElement.offsetTop;\n gObj.createColumnchooser(x, y, targetEle);\n break;\n case gID + '_responsivefilter':\n gObj.showResponsiveCustomFilter();\n break;\n case gID + '_responsivesort':\n gObj.showResponsiveCustomSort();\n break;\n case gID + '_responsiveback':\n _this.renderResponsiveSearch(false);\n break;\n }\n }\n });\n };\n Toolbar.prototype.modelChanged = function (e) {\n if (e.module === 'edit') {\n this.refreshToolbarItems();\n }\n };\n Toolbar.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName() || !this.parent.toolbar) {\n return;\n }\n if (this.element) {\n remove(this.element);\n }\n this.render();\n };\n Toolbar.prototype.keyUpHandler = function (e) {\n if (e.keyCode === 13) {\n this.search();\n }\n if (this.searchElement) {\n this.sIcon = this.searchElement.parentElement.querySelector('.e-clear-icon');\n if (this.searchElement.value.length && !isNullOrUndefined(this.sIcon)) {\n this.sIcon.classList.remove('e-clear-icon-hide');\n }\n else {\n this.sIcon.classList.add('e-clear-icon-hide');\n }\n }\n };\n Toolbar.prototype.search = function () {\n this.isSearched = true;\n this.parent.search(this.searchElement.value);\n };\n Toolbar.prototype.updateSearchBox = function () {\n if (this.searchElement) {\n this.searchElement.value = this.parent.searchSettings.key;\n }\n };\n Toolbar.prototype.wireEvent = function () {\n if (this.searchElement) {\n this.searchBoxObj = new SearchBox(this.searchElement);\n EventHandler.add(this.searchElement, 'keyup', this.keyUpHandler, this);\n this.searchBoxObj.wireEvent();\n }\n EventHandler.add(this.element, 'focusin', this.onFocusIn, this);\n EventHandler.add(this.element, 'focusout', this.onFocusOut, this);\n };\n Toolbar.prototype.unWireEvent = function () {\n if (this.searchElement) {\n EventHandler.remove(this.searchElement, 'keyup', this.keyUpHandler);\n this.searchBoxObj.unWireEvent();\n }\n EventHandler.remove(this.element, 'focusin', this.onFocusIn);\n EventHandler.remove(this.element, 'focusout', this.onFocusOut);\n };\n Toolbar.prototype.onFocusIn = function (e) {\n var currentInfo = this.parent.focusModule.currentInfo;\n if (currentInfo && currentInfo.element) {\n removeClass([currentInfo.element, currentInfo.elementToFocus], ['e-focused', 'e-focus']);\n currentInfo.element.tabIndex = -1;\n }\n e.target.tabIndex = 0;\n };\n Toolbar.prototype.onFocusOut = function (e) {\n e.target.tabIndex = -1;\n };\n Toolbar.prototype.setFocusToolbarItem = function (element) {\n var elementToFocus = element.querySelector('.e-btn,.e-input');\n if (!elementToFocus && this.parent.enableAdaptiveUI && !this.searchElement\n && element.classList.contains('e-search-wrapper')) {\n elementToFocus = element.querySelector('#' + this.gridID + '_searchbutton');\n }\n elementToFocus.focus();\n };\n Toolbar.prototype.getFocusableToolbarItems = function () {\n return this.element.querySelectorAll('.e-toolbar-item:not(.e-overlay):not(.e-hidden)');\n };\n Toolbar.prototype.keyPressedHandler = function (e) {\n if (e.target && parentsUntil(e.target, 'e-toolbar-item')) {\n var targetParent = parentsUntil(e.target, 'e-toolbar-item');\n var focusableToolbarItems = this.getFocusableToolbarItems();\n if (e.action === 'tab' || e.action === 'shiftTab') {\n if ((e.action === 'tab' && targetParent === focusableToolbarItems[focusableToolbarItems.length - 1])\n || (e.action === 'shiftTab' && targetParent === focusableToolbarItems[0])) {\n return;\n }\n for (var i = 0; i < focusableToolbarItems.length; i++) {\n if (targetParent === focusableToolbarItems[i]) {\n e.preventDefault();\n var index = e.action === 'tab' ? i + 1 : i - 1;\n this.setFocusToolbarItem(focusableToolbarItems[index]);\n return;\n }\n }\n }\n if (e.action === 'enter') {\n if (this.parent.enableAdaptiveUI && !this.searchElement\n && e.target.id === this.gridID + '_searchbutton') {\n this.renderResponsiveSearch(true);\n }\n }\n }\n };\n Toolbar.prototype.reRenderToolbar = function () {\n if (this.element) {\n remove(this.element);\n }\n this.render();\n };\n Toolbar.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.evtHandlers = [{ event: events.setFullScreenDialog, handler: this.reRenderToolbar },\n { event: events.initialEnd, handler: this.render },\n { event: events.uiUpdate, handler: this.onPropertyChanged },\n { event: events.inBoundModelChanged, handler: this.updateSearchBox.bind(this) },\n { event: events.modelChanged, handler: this.refreshToolbarItems },\n { event: events.toolbarRefresh, handler: this.refreshToolbarItems },\n { event: events.inBoundModelChanged, handler: this.modelChanged },\n { event: events.dataBound, handler: this.refreshToolbarItems },\n { event: events.click, handler: this.removeResponsiveSearch },\n { event: events.rowModeChange, handler: this.reRenderToolbar },\n { event: events.destroy, handler: this.destroy },\n { event: events.keyPressed, handler: this.keyPressedHandler }];\n addRemoveEventListener(this.parent, this.evtHandlers, true, this);\n this.rowSelectedFunction = this.rowSelected.bind(this);\n this.rowDeSelectedFunction = this.rowSelected.bind(this);\n this.parent.addEventListener(events.rowSelected, this.rowSelectedFunction);\n this.parent.addEventListener(events.rowDeselected, this.rowDeSelectedFunction);\n };\n Toolbar.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n addRemoveEventListener(this.parent, this.evtHandlers, false);\n this.parent.removeEventListener(events.rowSelected, this.rowSelectedFunction);\n this.parent.removeEventListener(events.rowDeselected, this.rowDeSelectedFunction);\n };\n Toolbar.prototype.removeResponsiveSearch = function (e) {\n var target = e.target;\n var isSearch = target.classList.contains('e-search-icon') || target.classList.contains('e-search-wrapper');\n if (this.parent.enableAdaptiveUI && !isSearch && this.searchElement\n && !parentsUntil(e.target, 'e-res-toolbar')) {\n this.renderResponsiveSearch(false);\n }\n };\n Toolbar.prototype.rowSelected = function () {\n if (this.parent.enableAdaptiveUI) {\n this.refreshResponsiveToolbarItems(ResponsiveToolbarAction.isInitial);\n }\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n */\n Toolbar.prototype.getModuleName = function () {\n return 'toolbar';\n };\n return Toolbar;\n}());\nexport { Toolbar };\n","import { isNullOrUndefined, addClass, extend, closest } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport { appendChildren, alignFrozenEditForm, getMovableTbody, getFrozenRightTbody, setStyleAndAttributes } from '../base/util';\nimport * as literals from '../base/string-literals';\n/**\n * Edit render module is used to render grid edit row.\n *\n * @hidden\n */\nvar InlineEditRender = /** @class */ (function () {\n /**\n * Constructor for render module\n *\n * @param {IGrid} parent - returns the IGrid\n */\n function InlineEditRender(parent) {\n this.parent = parent;\n }\n InlineEditRender.prototype.addNew = function (elements, args) {\n this.isEdit = false;\n var tbody;\n var mTbody = getMovableTbody(this.parent);\n var frTbody = getFrozenRightTbody(this.parent);\n var isFrozenGrid = this.parent.isFrozenGrid();\n var isVirtualFrozen = isFrozenGrid && this.parent.enableColumnVirtualization && args.isScroll;\n if (this.parent.frozenRows && this.parent.editSettings.newRowPosition === 'Top') {\n tbody = isVirtualFrozen ? this.parent.getMovableHeaderTbody() : this.parent.getHeaderTable().querySelector(literals.tbody);\n }\n else {\n tbody = isVirtualFrozen ? this.parent.getMovableContentTbody() : this.parent.getContentTable().querySelector(literals.tbody);\n }\n args.row = this.parent.createElement('tr', { className: 'e-row e-addedrow', attrs: { role: 'row' } });\n if (tbody.querySelector('.e-emptyrow')) {\n var emptyRow = tbody.querySelector('.e-emptyrow');\n emptyRow.parentNode.removeChild(emptyRow);\n if (isFrozenGrid && !isVirtualFrozen) {\n var moveTbody = this.parent.getContent().querySelector('.' + literals.movableContent).querySelector(literals.tbody);\n (moveTbody.firstElementChild).parentNode.removeChild(moveTbody.firstElementChild);\n if (this.parent.getFrozenMode() === literals.leftRight) {\n var frTbody_1 = this.parent.getContent().querySelector('.e-frozen-right-content').querySelector(literals.tbody);\n (frTbody_1.firstElementChild).parentNode.removeChild(frTbody_1.firstElementChild);\n }\n }\n }\n if (this.parent.editSettings.newRowPosition === 'Top') {\n tbody.insertBefore(args.row, tbody.firstChild);\n }\n else {\n tbody.appendChild(args.row);\n }\n args.row.appendChild(this.getEditElement(elements, false, undefined, args, true));\n this.parent.editModule.checkLastRow(args.row, args);\n if (isFrozenGrid && !isVirtualFrozen) {\n var mEle = this.renderMovableform(args.row, args);\n if (this.parent.editSettings.newRowPosition === 'Top') {\n mTbody.insertBefore(mEle, mTbody.firstChild);\n }\n else {\n mTbody.appendChild(mEle);\n }\n args.row.querySelector('.e-normaledit').setAttribute('colspan', this.parent.getVisibleFrozenColumns() + '');\n mEle.querySelector('.e-normaledit').setAttribute('colspan', '' + (this.parent.getVisibleColumns().length - this.parent.getVisibleFrozenColumns()));\n if (frTbody) {\n var frEle = this.renderFrozenRightForm(args.row, args);\n if (this.parent.editSettings.newRowPosition === 'Top') {\n frTbody.insertBefore(frEle, frTbody.firstChild);\n }\n else {\n frTbody.appendChild(frEle);\n }\n var colSpan = this.parent.getVisibleFrozenColumns() - this.parent.getFrozenRightColumnsCount();\n args.row.querySelector('.e-normaledit').setAttribute('colspan', colSpan + '');\n frEle.querySelector('.e-normaledit').setAttribute('colspan', '' + this.parent.getFrozenRightColumnsCount());\n }\n if (this.parent.height === 'auto') {\n this.parent.notify(events.frozenHeight, {});\n }\n }\n };\n InlineEditRender.prototype.renderFrozenRightForm = function (ele, args) {\n var frEle = ele.cloneNode(true);\n var form = args.frozenRightForm = frEle.querySelector('form');\n if (this.parent.editSettings.template) {\n form.innerHTML = '';\n this.appendChildren(form, args.rowData, false);\n return frEle;\n }\n this.renderRightFrozen(ele, frEle);\n frEle.querySelector(literals.colGroup).innerHTML = this.parent.getHeaderContent()\n .querySelector('.e-frozen-right-header').querySelector(literals.colGroup).innerHTML;\n return frEle;\n };\n InlineEditRender.prototype.renderMovableform = function (ele, args) {\n var mEle = ele.cloneNode(true);\n var form = args.movableForm = mEle.querySelector('form');\n if (this.parent.editSettings.template) {\n form.innerHTML = '';\n this.appendChildren(form, args.rowData, false);\n return mEle;\n }\n this.renderMovable(ele, mEle);\n mEle.querySelector(literals.colGroup).innerHTML = this.parent.getHeaderContent()\n .querySelector('.' + literals.movableHeader).querySelector(literals.colGroup).innerHTML;\n return mEle;\n };\n InlineEditRender.prototype.updateFreezeEdit = function (row, td) {\n td = td.concat([].slice.call(this.getFreezeRow(row).querySelectorAll('td.e-rowcell')));\n if (this.parent.getFrozenMode() === literals.leftRight) {\n td = td.concat([].slice.call(this.getFreezeRightRow(row).querySelectorAll('td.e-rowcell')));\n }\n return td;\n };\n InlineEditRender.prototype.getFreezeRightRow = function (row) {\n var idx = parseInt(row.getAttribute(literals.dataRowIndex), 10);\n var fCont = this.parent.getFrozenLeftContentTbody();\n var fHdr = this.parent.getFrozenHeaderTbody();\n var frHdr = this.parent.getFrozenRightHeaderTbody();\n var frCont = this.parent.getFrozenRightContentTbody();\n if (fCont.contains(row) || fHdr.contains(row)) {\n return this.parent.getFrozenRightRowByIndex(idx);\n }\n else if (frCont.contains(row) || frHdr.contains(row)) {\n return this.parent.getRowByIndex(idx);\n }\n return row;\n };\n InlineEditRender.prototype.getFreezeRow = function (row) {\n if (this.parent.isFrozenGrid()) {\n var idx = parseInt(row.getAttribute(literals.dataRowIndex), 10);\n var fCont = this.parent.getFrozenLeftContentTbody();\n var mCont = this.parent.getMovableContentTbody();\n var fHdr = this.parent.getFrozenHeaderTbody();\n var mHdr = this.parent.getMovableHeaderTbody();\n if (fCont.contains(row) || fHdr.contains(row)) {\n return this.parent.getMovableRowByIndex(idx);\n }\n else if (mCont.contains(row) || mHdr.contains(row)) {\n return this.parent.getRowByIndex(idx);\n }\n }\n return row;\n };\n InlineEditRender.prototype.update = function (elements, args) {\n this.isEdit = true;\n var isCustomFormValidation = args.isCustomFormValidation;\n var isScroll = args.isScroll;\n if (!isScroll && (closest(args.row, '.' + literals.movableContent) || closest(args.row, '.' + literals.movableHeader))) {\n args.row = this.getFreezeRow(args.row);\n }\n if (closest(args.row, '.e-frozen-right-content') || closest(args.row, '.e-frozen-right-header')) {\n args.row = this.getFreezeRightRow(args.row);\n }\n var isVirtualFrozen = this.parent.isFrozenGrid() && this.parent.enableColumnVirtualization && isScroll;\n var tdElement = [].slice.call(args.row.querySelectorAll('td.e-rowcell'));\n args.row.innerHTML = '';\n if (!isVirtualFrozen && !isCustomFormValidation) {\n tdElement = this.updateFreezeEdit(args.row, tdElement);\n }\n args.row.appendChild(this.getEditElement(elements, true, tdElement, args, true));\n args.row.classList.add(literals.editedRow);\n this.parent.editModule.checkLastRow(args.row, args);\n if (!isVirtualFrozen && !isCustomFormValidation) {\n this.refreshFreezeEdit(args.row, args);\n }\n };\n InlineEditRender.prototype.refreshFreezeEdit = function (row, args) {\n var td = row.firstChild;\n if (this.parent.getVisibleFrozenColumns() && this.parent.editSettings.template) {\n td.querySelector(literals.colGroup).innerHTML = this.parent.getHeaderContent().querySelector('.' + literals.frozenHeader).\n querySelector(literals.colGroup).innerHTML;\n }\n var fCls;\n var cont;\n var idx = parseInt(row.getAttribute(literals.dataRowIndex), 10);\n if (this.parent.isFrozenGrid()) {\n if (idx < this.parent.frozenRows) {\n cont = this.parent.getHeaderContent();\n fCls = '.' + literals.frozenHeader;\n }\n else {\n cont = this.parent.getContent();\n fCls = '.' + literals.frozenContent;\n }\n var mTd = td.cloneNode(true);\n var frTd = td.cloneNode(true);\n var form = args.movableForm = mTd.querySelector('form');\n if (this.parent.editSettings.template) {\n this.refreshEditForm(form, args.rowData);\n }\n var fRows = void 0;\n var frRows = void 0;\n if (cont.querySelector(fCls).contains(row)) {\n fRows = this.parent.getMovableRowByIndex(idx);\n this.updateFrozenCont(fRows, td, mTd);\n if (this.parent.getFrozenMode() === literals.leftRight) {\n args.frozenRightForm = frTd.querySelector('form');\n this.refreshEditForm(args.frozenRightForm, args.rowData);\n frRows = this.parent.getFrozenRightRowByIndex(idx);\n this.updateFrozenRightCont(frRows, td, frTd);\n }\n }\n else {\n fRows = this.parent.getRowByIndex(idx);\n this.updateFrozenCont(fRows, mTd, td);\n if (this.parent.getFrozenMode() === literals.leftRight) {\n args.frozenRightForm = frTd.querySelector('form');\n this.refreshEditForm(args.frozenRightForm, args.rowData);\n frRows = this.parent.getFrozenRightRowByIndex(idx);\n this.updateFrozenRightCont(frRows, frTd, td);\n }\n }\n fRows.appendChild(mTd);\n fRows.classList.add(literals.editedRow);\n if (this.parent.getFrozenMode() === literals.leftRight) {\n frRows.appendChild(frTd);\n frRows.classList.add(literals.editedRow);\n alignFrozenEditForm(args.frozenRightForm.querySelector('td:not(.e-hide)'), args.form.querySelector('td:not(.e-hide)'));\n }\n alignFrozenEditForm(args.movableForm.querySelector('td:not(.e-hide)'), args.form.querySelector('td:not(.e-hide)'));\n }\n };\n InlineEditRender.prototype.refreshEditForm = function (form, data) {\n if (this.parent.editSettings.template) {\n form.innerHTML = '';\n this.appendChildren(form, data, false);\n }\n };\n InlineEditRender.prototype.updateFrozenRightCont = function (row, ele, frEle) {\n row.innerHTML = '';\n this.renderRightFrozen(ele, frEle);\n frEle.querySelector(literals.colGroup).innerHTML = this.parent.getHeaderContent()\n .querySelector('.e-frozen-right-header').querySelector(literals.colGroup).innerHTML;\n ele.setAttribute('colspan', this.parent.getVisibleFrozenColumns() - this.parent.getFrozenRightColumnsCount() + '');\n frEle.setAttribute('colspan', this.parent.getFrozenRightColumnsCount() + '');\n };\n InlineEditRender.prototype.updateFrozenCont = function (row, ele, mEle) {\n row.innerHTML = '';\n this.renderMovable(ele, mEle);\n mEle.querySelector(literals.colGroup).innerHTML = this.parent.getHeaderContent()\n .querySelector('.' + literals.movableHeader).querySelector(literals.colGroup).innerHTML;\n ele.setAttribute('colspan', this.parent.getVisibleFrozenColumns() + '');\n mEle.setAttribute('colspan', this.parent.getCurrentVisibleColumns(this.parent.enableColumnVirtualization).length - this.parent.getVisibleFrozenColumns() + '');\n };\n InlineEditRender.prototype.renderRightFrozen = function (ele, frEle) {\n frEle.querySelector('tr').innerHTML = '';\n var cols = this.parent.getColumns();\n var k = 0;\n for (var i = 0; i < cols.length; i++, k++) {\n if (cols[i].getFreezeTableName() === literals.frozenRight) {\n var index = k - this.parent.getMovableColumnsCount();\n frEle.querySelector('tr').appendChild(ele.querySelector('tr').removeChild(ele.querySelector('tr').children[index]));\n k--;\n }\n }\n };\n InlineEditRender.prototype.renderMovable = function (ele, mEle) {\n mEle.querySelector('tr').innerHTML = '';\n var cols = this.parent.getColumns();\n var k = this.parent.isRowDragable() ? 1 : 0;\n for (var i = 0; i < cols.length; i++, k++) {\n if (cols[i].getFreezeTableName() === 'movable') {\n mEle.querySelector('tr').appendChild(ele.querySelector('tr').removeChild(ele.querySelector('tr').children[k]));\n k--;\n }\n }\n };\n // eslint-disable-next-line max-len\n InlineEditRender.prototype.getEditElement = function (elements, isEdit, tdElement, args, isFrozen) {\n var gObj = this.parent;\n var gLen = 0;\n var isDetail = !isNullOrUndefined(gObj.detailTemplate) || !isNullOrUndefined(gObj.childGrid) ? 1 : 0;\n if (gObj.allowGrouping) {\n gLen = gObj.groupSettings.columns.length;\n }\n var td = this.parent.createElement('td', {\n className: 'e-editcell e-normaledit',\n attrs: {\n colspan: (gObj.getCurrentVisibleColumns(this.parent.enableColumnVirtualization).length - gObj.getVisibleFrozenColumns()\n + this.parent.getIndentCount()).toString()\n }\n });\n var form = args.form =\n this.parent.createElement('form', { id: gObj.element.id + 'EditForm', className: 'e-gridform' });\n if (this.parent.editSettings.template) {\n this.appendChildren(form, args.rowData, isFrozen);\n td.appendChild(form);\n return td;\n }\n var table = this.parent.createElement('table', { className: 'e-table e-inline-edit', attrs: { cellspacing: '0.25', role: 'grid' } });\n table.appendChild(gObj.getContentTable().querySelector(literals.colGroup).cloneNode(true));\n var tbody = this.parent.createElement(literals.tbody, { attrs: { role: 'rowgroup' } });\n var tr = this.parent.createElement('tr', { attrs: { role: 'row' } });\n var i = 0;\n if (isDetail) {\n tr.insertBefore(this.parent.createElement('td', { className: 'e-detailrowcollapse' }), tr.firstChild);\n }\n if (gObj.isRowDragable()) {\n tr.appendChild(this.parent.createElement('td', { className: 'e-dragindentcell' }));\n }\n while (i < gLen) {\n tr.appendChild(this.parent.createElement('td', { className: 'e-indentcell' }));\n i++;\n }\n var m = 0;\n i = 0;\n var isVirtualFrozen = gObj.isFrozenGrid() && gObj.enableColumnVirtualization && args.isScroll;\n var cols = args.isCustomFormValidation ? this.parent.columnModel : gObj.getColumns();\n while ((isEdit && m < tdElement.length && i < cols.length) || i < cols.length) {\n var span = isEdit ? tdElement[m].getAttribute('colspan') : null;\n var col = cols[i];\n if ((isVirtualFrozen && col.getFreezeTableName() !== 'movable')\n || (args.isCustomFormValidation && (col.commands || col.commandsTemplate || !col.field))) {\n i++;\n continue;\n }\n var td_1 = this.parent.createElement('td', {\n className: literals.rowCell, attrs: { style: 'text-align:' + (col.textAlign ? col.textAlign : ''), 'colspan': span ? span : '' }\n });\n if (col.visible) {\n td_1.appendChild(elements[col.uid]);\n if (this.parent.rowRenderingMode === 'Vertical') {\n setStyleAndAttributes(td_1, { 'data-cell': col.headerText });\n if (i === 0) {\n td_1.classList.add('e-responsive-editcell');\n }\n }\n if (col.editType === 'booleanedit') {\n td_1.classList.add('e-boolcell');\n }\n else if (col.commands || col.commandsTemplate) {\n addClass([td_1], 'e-unboundcell');\n }\n }\n else {\n td_1.classList.add('e-hide');\n }\n tr.appendChild(td_1);\n i = span ? i + parseInt(span, 10) : i + 1;\n m++;\n }\n tbody.appendChild(tr);\n table.appendChild(tbody);\n form.appendChild(table);\n td.appendChild(form);\n return td;\n };\n InlineEditRender.prototype.removeEventListener = function () {\n //To destroy the renderer\n };\n InlineEditRender.prototype.appendChildren = function (form, data, isFrozen) {\n var _this = this;\n var dummyData = extend({}, data, { isAdd: !this.isEdit, isFrozen: isFrozen }, true);\n var editTemplateID = this.parent.element.id + 'editSettingsTemplate';\n if (this.parent.isReact && typeof (this.parent.editSettings.template) !== 'string') {\n this.parent.getEditTemplate()(dummyData, this.parent, 'editSettingsTemplate', editTemplateID, null, null, form);\n this.parent.renderTemplates();\n }\n else {\n appendChildren(form, this.parent.getEditTemplate()(dummyData, this.parent, 'editSettingsTemplate', editTemplateID));\n }\n // eslint-disable-next-line\n var setRules = function () {\n var cols = _this.parent.getColumns();\n for (var i = 0; i < cols.length; i++) {\n if (cols[i].validationRules) {\n _this.parent.editModule.formObj.rules[cols[i].field] =\n cols[i].validationRules;\n }\n }\n };\n };\n return InlineEditRender;\n}());\nexport { InlineEditRender };\n","import { classList } from '@syncfusion/ej2-base';\nimport * as literals from '../base/string-literals';\n/**\n * Edit render module is used to render grid edit row.\n *\n * @hidden\n */\nvar BatchEditRender = /** @class */ (function () {\n /**\n * Constructor for render module\n *\n * @param {IGrid} parent - specifies the IGrid\n */\n function BatchEditRender(parent) {\n this.parent = parent;\n }\n BatchEditRender.prototype.update = function (elements, args) {\n if (this.parent.isReact && args.columnObject && args.columnObject.template) {\n var parentRow = args.cell.parentElement;\n var newTd = args.cell.cloneNode(true);\n parentRow.insertBefore(newTd, args.cell);\n newTd.focus();\n args.cell.remove();\n args.cell = newTd;\n }\n args.cell.innerHTML = '';\n args.cell.appendChild(this.getEditElement(elements, args));\n args.cell.classList.remove('e-ellipsistooltip');\n args.cell.classList.add('e-editedbatchcell');\n classList(args.row, [literals.editedRow, 'e-batchrow'], []);\n };\n BatchEditRender.prototype.getEditElement = function (elements, args) {\n var gObj = this.parent;\n var form = this.parent\n .createElement('form', { id: gObj.element.id + 'EditForm', className: 'e-gridform' });\n form.appendChild(elements[args.columnObject.uid]);\n if (args.columnObject.editType === 'booleanedit') {\n args.cell.classList.add('e-boolcell');\n }\n if (!args.columnObject.editType) {\n args.cell.classList.add('e-inputbox');\n }\n return form;\n };\n BatchEditRender.prototype.removeEventListener = function () {\n //To destroy the renderer\n };\n return BatchEditRender;\n}());\nexport { BatchEditRender };\n","import { Dialog } from '@syncfusion/ej2-popups';\nimport { remove, extend, updateBlazorTemplate } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport { appendChildren, applyBiggerTheme, addBiggerDialog } from '../base/util';\nimport { ResponsiveDialogRenderer } from './responsive-dialog-renderer';\nimport { ResponsiveDialogAction } from '../base/enum';\nimport * as literals from '../base/string-literals';\n/**\n * Edit render module is used to render grid edit row.\n *\n * @hidden\n */\nvar DialogEditRender = /** @class */ (function () {\n /**\n * Constructor for render module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {ServiceLocator} serviceLocator - specifies the serviceLocator\n */\n function DialogEditRender(parent, serviceLocator) {\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.dialogDestroy, this.destroy, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n DialogEditRender.prototype.setLocaleObj = function () {\n this.l10n = this.serviceLocator.getService('localization');\n };\n DialogEditRender.prototype.addNew = function (elements, args) {\n this.isEdit = false;\n this.createDialog(elements, args);\n };\n DialogEditRender.prototype.update = function (elements, args) {\n this.isEdit = true;\n this.createDialog(elements, args);\n };\n DialogEditRender.prototype.createDialogHeader = function (args) {\n var gObj = this.parent;\n var header;\n if (this.parent.enableAdaptiveUI) {\n var responsiveDlgRenderer = new ResponsiveDialogRenderer(this.parent, this.serviceLocator);\n responsiveDlgRenderer.action = this.isEdit ? ResponsiveDialogAction.isEdit : ResponsiveDialogAction.isAdd;\n return responsiveDlgRenderer.renderResponsiveHeader(undefined, args);\n }\n else {\n if (gObj.editSettings.headerTemplate) {\n header = this.getDialogEditTemplateElement('HeaderTemplate', args);\n }\n else if (this.isEdit) {\n header = this.l10n.getConstant('EditFormTitle') + args.primaryKeyValue[0];\n }\n else {\n header = this.l10n.getConstant('AddFormTitle');\n }\n }\n return header;\n };\n DialogEditRender.prototype.createDialog = function (elements, args) {\n var gObj = this.parent;\n this.dialog = this.parent.createElement('div', { id: gObj.element.id + '_dialogEdit_wrapper', styles: 'width: auto' });\n if (gObj.enableAdaptiveUI) {\n this.dialog.classList.add('e-responsive-dialog');\n }\n gObj.element.appendChild(this.dialog);\n this.setLocaleObj();\n this.dialog.setAttribute('aria-label', this.l10n.getConstant('DialogEdit'));\n // let position: PositionDataModel = this.parent.element.getBoundingClientRect().height < 400 ?\n // { X: 'center', Y: 'top' } : { X: 'center', Y: 'center' };\n this.dialogObj = new Dialog(extend({\n header: this.createDialogHeader(args), isModal: true, visible: true,\n cssClass: this.parent.cssClass ? 'e-edit-dialog' + ' ' + this.parent.cssClass : 'e-edit-dialog',\n content: this.getEditElement(elements, args),\n showCloseIcon: true,\n allowDragging: true,\n // position: position,\n close: this.dialogClose.bind(this),\n created: this.dialogCreated.bind(this),\n closeOnEscape: true, width: gObj.editSettings.template ? 'auto' : '330px',\n target: args.target ? args.target : document.body, animationSettings: { effect: 'None' },\n footerTemplate: gObj.editSettings.footerTemplate ? this.getDialogEditTemplateElement('FooterTemplate', args) : null,\n buttons: [{\n click: this.btnClick.bind(this),\n buttonModel: { content: this.l10n.getConstant('SaveButton'),\n cssClass: this.parent.cssClass ? 'e-primary' + ' ' + this.parent.cssClass : 'e-primary',\n isPrimary: true }\n },\n { click: this.btnClick.bind(this),\n buttonModel: {\n cssClass: this.parent.cssClass ? 'e-flat' + ' ' + this.parent.cssClass : 'e-flat',\n content: this.l10n.getConstant('CancelButton')\n } }]\n }, gObj.editSettings.dialog ? (gObj.editSettings.dialog.params || {}) : {}));\n args.dialog = this.dialogObj;\n var isStringTemplate = 'isStringTemplate';\n this.dialogObj[isStringTemplate] = true;\n this.renderResponsiveDialog();\n this.dialogObj.appendTo(this.dialog);\n applyBiggerTheme(this.parent.element, this.dialogObj.element.parentElement);\n if (gObj.enableAdaptiveUI) {\n this.dialogObj.show(true);\n }\n };\n DialogEditRender.prototype.dialogCreated = function () {\n addBiggerDialog(this.parent);\n };\n DialogEditRender.prototype.renderResponsiveDialog = function () {\n var _this = this;\n if (this.parent.enableAdaptiveUI) {\n if (this.parent.adaptiveDlgTarget) {\n this.dialogObj.target = this.parent.adaptiveDlgTarget;\n }\n this.dialogObj.buttons = [{}];\n this.dialogObj.showCloseIcon = true;\n this.dialogObj.visible = false;\n this.dialogObj.width = '100%';\n this.dialogObj.open = function () {\n _this.dialogObj.element.style.maxHeight = '100%';\n };\n }\n };\n DialogEditRender.prototype.btnClick = function (e) {\n if (this.l10n.getConstant('CancelButton').toLowerCase() === e.target.innerText.trim().toLowerCase()) {\n this.dialogClose();\n }\n else {\n this.parent.endEdit();\n }\n };\n DialogEditRender.prototype.dialogClose = function () {\n this.parent.closeEdit();\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DialogEditRender.prototype.destroy = function (args) {\n var dialogEditTemplates = ['template', 'headerTemplate', 'footerTemplate'];\n for (var i = 0; i < dialogEditTemplates.length; i++) {\n if (this.parent.editSettings[dialogEditTemplates[i]]) {\n var templateName = dialogEditTemplates[i].charAt(0).toUpperCase() + dialogEditTemplates[i].slice(1);\n var editTemplateID = this.parent.element.id + 'editSettings' + templateName;\n updateBlazorTemplate(editTemplateID, templateName, this.parent.editSettings);\n }\n }\n this.parent.notify(events.destroyForm, {});\n this.parent.isEdit = false;\n this.parent.notify(events.toolbarRefresh, {});\n if (this.dialog && !this.dialogObj.isDestroyed) {\n this.dialogObj.destroy();\n remove(this.dialog);\n }\n };\n DialogEditRender.prototype.getDialogEditTemplateElement = function (dialogTemp, args) {\n var tempDiv = this.parent.createElement('div', { className: 'e-dialog' + dialogTemp });\n var dummyData = extend({}, args.rowData, { isAdd: !this.isEdit }, true);\n var templateID = this.parent.element.id + 'editSettings' + dialogTemp;\n appendChildren(tempDiv, (dialogTemp === 'HeaderTemplate' ? this.parent.getEditHeaderTemplate() :\n this.parent.getEditFooterTemplate())(dummyData, this.parent, 'editSettings' + dialogTemp, templateID));\n updateBlazorTemplate(templateID, dialogTemp, this.parent.editSettings);\n return tempDiv;\n };\n DialogEditRender.prototype.getEditElement = function (elements, args) {\n var _this = this;\n var gObj = this.parent;\n var div = this.parent.createElement('div', { className: this.isEdit ? literals.editedRow : 'e-insertedrow' });\n var form = args.form =\n this.parent.createElement('form', { id: gObj.element.id + 'EditForm', className: 'e-gridform' });\n if (this.parent.editSettings.template) {\n var editTemplateID = this.parent.element.id + 'editSettingsTemplate';\n var dummyData = extend({}, args.rowData, { isAdd: !this.isEdit }, true);\n var isReactCompiler = this.parent.isReact && typeof (this.parent.editSettings.template) !== 'string';\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n if (isReactCompiler || isReactChild) {\n this.parent.getEditTemplate()(dummyData, this.parent, 'editSettingsTemplate', editTemplateID, null, null, form);\n this.parent.renderTemplates();\n }\n else {\n appendChildren(form, this.parent.getEditTemplate()(dummyData, this.parent, 'editSettingsTemplate', editTemplateID));\n }\n var setRules = function () {\n var columns = _this.parent.getColumns();\n for (var i = 0; i < columns.length; i++) {\n if (columns[i].validationRules) {\n _this.parent.editModule.formObj.rules[columns[i].field] =\n columns[i].validationRules;\n }\n }\n };\n updateBlazorTemplate(editTemplateID, 'Template', this.parent.editSettings, true, setRules);\n div.appendChild(form);\n return div;\n }\n var table = this.parent.createElement('table', { className: literals.table, attrs: { cellspacing: '6px', role: 'grid' } });\n var tbody = this.parent.createElement(literals.tbody, { attrs: { role: 'rowgroup' } });\n var cols = gObj.getColumns();\n for (var i = 0; i < cols.length; i++) {\n if (this.parent.editModule.checkColumnIsGrouped(cols[i]) || cols[i].commands || cols[i].commandsTemplate ||\n cols[i].type === 'checkbox') {\n continue;\n }\n var tr = this.parent.createElement('tr', { attrs: { role: 'row' } });\n var dataCell = this.parent.createElement('td', {\n className: literals.rowCell, attrs: {\n style: 'text-align:' + (this.parent.enableRtl ? 'right' : 'left') + ';width:190px'\n }\n });\n elements[cols[i].uid].classList.remove('e-input');\n dataCell.appendChild(elements[cols[i].uid]);\n tr.appendChild(dataCell);\n tbody.appendChild(tr);\n }\n table.appendChild(tbody);\n form.appendChild(table);\n div.appendChild(form);\n return div;\n };\n DialogEditRender.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.dialogDestroy, this.destroy);\n this.parent.off(events.destroy, this.destroy);\n };\n return DialogEditRender;\n}());\nexport { DialogEditRender };\n","import { isNullOrUndefined, closest, extend } from '@syncfusion/ej2-base';\nimport { InlineEditRender } from './inline-edit-renderer';\nimport { BatchEditRender } from './batch-edit-renderer';\nimport { DialogEditRender } from './dialog-edit-renderer';\nimport { attributes, classList, select } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\nimport { RowModelGenerator } from '../services/row-model-generator';\nimport { getComplexFieldID, getObject, appendChildren, parentsUntil, extendObjWithFn } from '../base/util';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\n/**\n * Edit render module is used to render grid edit row.\n *\n * @hidden\n */\nvar EditRender = /** @class */ (function () {\n /**\n * Constructor for render module\n *\n * @param {IGrid} parent -specifies the IGrid\n * @param {ServiceLocator} serviceLocator - specifies the serviceLocator\n */\n function EditRender(parent, serviceLocator) {\n //Internal variables\n this.editType = {\n 'Inline': InlineEditRender,\n 'Normal': InlineEditRender, 'Batch': BatchEditRender, 'Dialog': DialogEditRender\n };\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.renderer = new this.editType[this.parent.editSettings.mode](parent, serviceLocator);\n this.focus = serviceLocator.getService('focus');\n }\n EditRender.prototype.addNew = function (args) {\n this.renderer.addNew(this.getEditElements(args), args);\n this.convertWidget(args);\n };\n EditRender.prototype.update = function (args) {\n this.renderer.update(this.getEditElements(args), args);\n var isCustomFormValidation = args.isCustomFormValidation;\n if (!isCustomFormValidation) {\n this.parent.notify(events.beforeStartEdit, args);\n this.convertWidget(args);\n }\n };\n EditRender.prototype.convertWidget = function (args) {\n var gObj = this.parent;\n var isFocused;\n var cell;\n var value;\n var fForm;\n var frForm;\n var frzCols = gObj.isFrozenGrid();\n var index = gObj.getFrozenMode() === 'Right' && gObj.editSettings.mode === 'Normal' ? 1 : 0;\n var form = gObj.editSettings.mode === 'Dialog' ?\n select('#' + gObj.element.id + '_dialogEdit_wrapper .e-gridform', document) :\n gObj.element.getElementsByClassName('e-gridform')[index];\n var isVirtualFrozen = frzCols && this.parent.enableColumnVirtualization && args.isScroll;\n if (frzCols && gObj.editSettings.mode === 'Normal') {\n var rowIndex = parseInt(args.row.getAttribute(literals.dataRowIndex), 10);\n if (gObj.frozenRows && ((args.requestType === 'add' && gObj.editSettings.newRowPosition === 'Top')\n || rowIndex < gObj.frozenRows)) {\n fForm = gObj.element.querySelector('.' + literals.movableHeader).querySelector('.e-gridform');\n if (this.parent.getFrozenMode() === literals.leftRight) {\n frForm = args.frozenRightForm;\n }\n }\n else {\n fForm = gObj.element.querySelector('.' + literals.movableContent).querySelector('.e-gridform');\n if (this.parent.getFrozenMode() === literals.leftRight) {\n frForm = args.frozenRightForm;\n }\n }\n }\n var cols = gObj.editSettings.mode !== 'Batch' ? gObj.getColumns() : [gObj.getColumnByField(args.columnName)];\n for (var _i = 0, cols_1 = cols; _i < cols_1.length; _i++) {\n var col = cols_1[_i];\n if (isVirtualFrozen && col.getFreezeTableName() !== 'movable') {\n continue;\n }\n if (this.parent.editSettings.template && !isNullOrUndefined(col.field)) {\n var cellArgs = extend({}, args);\n cellArgs.element = form.querySelector('[name=' + getComplexFieldID(col.field) + ']');\n if (isNullOrUndefined(cellArgs.element) && frzCols) {\n cellArgs.element = fForm.querySelector('[name=' + getComplexFieldID(col.field) + ']');\n }\n if (typeof col.edit.write === 'string') {\n getObject(col.edit.write, window)(cellArgs);\n }\n else {\n col.edit.write(cellArgs);\n }\n continue;\n }\n if (this.parent.editModule.checkColumnIsGrouped(col) || col.commands) {\n continue;\n }\n // eslint-disable-next-line\n value = (col.valueAccessor(col.field, args.rowData, col));\n if (fForm && col.getFreezeTableName() === 'movable' && gObj.editSettings.mode === 'Normal') {\n cell = fForm.querySelector('[e-mappinguid=' + col.uid + ']');\n }\n else if (frForm && col.getFreezeTableName() === literals.frozenRight && gObj.editSettings.mode === 'Normal') {\n cell = frForm.querySelector('[e-mappinguid=' + col.uid + ']');\n }\n else {\n cell = form.querySelector('[e-mappinguid=' + col.uid + ']');\n }\n var temp = col.edit.write;\n if (!isNullOrUndefined(cell)) {\n if (typeof temp === 'string') {\n temp = getObject(temp, window);\n temp({\n rowData: args.rowData, element: cell, column: col, requestType: args.requestType, row: args.row,\n foreignKeyData: col.isForeignColumn() && getObject(col.field, args.foreignKeyData)\n });\n }\n else {\n col.edit.write({\n rowData: args.rowData, element: cell, column: col, requestType: args.requestType, row: args.row,\n foreignKeyData: col.isForeignColumn() && getObject(col.field, args.foreignKeyData)\n });\n }\n if (!isFocused && !cell.getAttribute('disabled') && !parentsUntil(cell, 'e-checkbox-disabled')) {\n this.focusElement(cell, args.type);\n isFocused = true;\n }\n }\n }\n if (frzCols && !this.parent.allowTextWrap && ((args.requestType === 'add') || args.requestType === 'beginEdit')\n && this.parent.editSettings.mode !== 'Dialog' && !isNullOrUndefined(form) && !isNullOrUndefined(fForm)) {\n var mTdElement = (fForm.querySelector('tr').children[0]);\n var fTdElement = (form.querySelector('tr').children[0]);\n if (fTdElement.offsetHeight > mTdElement.offsetHeight) {\n mTdElement.style.height = fTdElement.offsetHeight + 'px';\n if (frForm) {\n var frTdElement = fForm.querySelector('tr').children[0];\n frTdElement.style.height = fTdElement.offsetHeight + 'px';\n }\n }\n else {\n fTdElement.style.height = mTdElement.offsetHeight + 'px';\n if (frForm) {\n var frTdElement = fForm.querySelector('tr').children[0];\n frTdElement.style.height = mTdElement.offsetHeight + 'px';\n }\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n EditRender.prototype.focusElement = function (elem, type) {\n var chkBox = this.parent.element.querySelector('.e-edit-checkselect');\n if (!isNullOrUndefined(chkBox) && chkBox.nextElementSibling) {\n chkBox.nextElementSibling.classList.add('e-focus');\n }\n if (this.parent.editSettings.mode === 'Batch') {\n this.focus.onClick({ target: closest(elem, 'td') }, true);\n }\n else {\n var isFocus = this.parent.enableVirtualization && this.parent.editSettings.mode === 'Normal' ? false : true;\n if (isFocus || (this.parent.enableVirtualization && this.parent.editSettings.newRowPosition === 'Bottom'\n && parentsUntil(elem, literals.addedRow))) {\n elem.focus();\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n elem.focus({ preventScroll: true });\n }\n }\n if (elem.classList.contains('e-defaultcell')) {\n elem.setSelectionRange(elem.value.length, elem.value.length);\n }\n };\n EditRender.prototype.getEditElements = function (args) {\n var gObj = this.parent;\n var elements = {};\n var cols = gObj.editSettings.mode !== 'Batch' ? gObj.getColumns() : [gObj.getColumnByField(args.columnName)];\n if (args.isCustomFormValidation) {\n cols = this.parent.columnModel;\n }\n if (this.parent.editSettings.template) {\n return {};\n }\n var isVirtualFrozen = gObj.isFrozenGrid() && gObj.enableColumnVirtualization && args.isScroll;\n for (var i = 0, len = cols.length; i < len; i++) {\n var col = cols[i];\n if (this.parent.editModule.checkColumnIsGrouped(col) || (isVirtualFrozen && cols[i].getFreezeTableName() !== 'movable')\n || (args.isCustomFormValidation && (col.commands || col.commandsTemplate || !col.field))) {\n continue;\n }\n if (col.commands || col.commandsTemplate) {\n var cellRendererFact = this.serviceLocator.getService('cellRendererFactory');\n var model = new RowModelGenerator(this.parent);\n var cellRenderer = cellRendererFact.getCellRenderer(CellType.CommandColumn);\n var cells = model.generateRows(args.rowData)[0].cells;\n var cell = cells.filter(function (cell) { return cell.rowID; });\n var td = cellRenderer.render(cell[i], args.rowData, { 'index': args.row ? args.row.getAttribute(literals.dataRowIndex) : 0 }, this.parent.enableVirtualization);\n var div = td.firstElementChild;\n div.setAttribute('textAlign', td.getAttribute('textAlign'));\n elements[col.uid] = div;\n continue;\n }\n var value = (col.valueAccessor(col.field, args.rowData, col));\n var tArgs = { column: col, value: value, type: args.requestType, data: args.rowData };\n var temp = col.edit.create;\n var input = void 0;\n if (col.editTemplate) {\n input = this.parent.createElement('span', { attrs: { 'e-mappinguid': col.uid } });\n var tempID = this.parent.element.id + col.uid + 'editTemplate';\n var tempData = extendObjWithFn({}, args.rowData, { column: col });\n var isReactCompiler = this.parent.isReact && typeof (col.editTemplate) !== 'string';\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n if (isReactCompiler || isReactChild) {\n col.getEditTemplate()(extend({ 'index': args.rowIndex }, tempData), this.parent, 'editTemplate', tempID, null, null, input);\n this.parent.renderTemplates();\n }\n else {\n var template = col.getEditTemplate()(extend({ 'index': args.rowIndex }, tempData), this.parent, 'editTemplate', tempID);\n appendChildren(input, template);\n }\n }\n else {\n if (typeof temp === 'string') {\n temp = getObject(temp, window);\n input = temp(tArgs);\n }\n else {\n input = col.edit.create(tArgs);\n }\n if (typeof input === 'string') {\n var div = this.parent.createElement('div');\n div.innerHTML = input;\n input = div.firstChild;\n }\n var isInput = input.tagName !== 'input' && input.querySelectorAll('input').length;\n var complexFieldName = getComplexFieldID(col.field);\n attributes(isInput ? input.querySelector('input') : input, {\n name: complexFieldName, 'e-mappinguid': col.uid,\n id: gObj.element.id + complexFieldName\n });\n classList(input, ['e-input', 'e-field'], []);\n if (col.textAlign === 'Right') {\n input.classList.add('e-ralign');\n }\n if ((col.isPrimaryKey || col.isIdentity) && args.requestType === 'beginEdit' ||\n (col.isIdentity && args.requestType === 'add')) { // already disabled in cell plugins\n input.setAttribute('disabled', '');\n }\n }\n elements[col.uid] = input;\n }\n return elements;\n };\n EditRender.prototype.destroy = function () {\n this.renderer.removeEventListener();\n };\n return EditRender;\n}());\nexport { EditRender };\n","import { createEditElement } from '../base/util';\n/**\n * `DropDownEditCell` is used to handle dropdown cell type editing.\n *\n * @hidden\n */\nvar EditCellBase = /** @class */ (function () {\n function EditCellBase(parent) {\n this.parent = parent;\n }\n EditCellBase.prototype.create = function (args) {\n return createEditElement(this.parent, args.column, 'e-field', { type: 'text' });\n };\n EditCellBase.prototype.read = function (element) {\n return element.ej2_instances[0].value;\n };\n EditCellBase.prototype.destroy = function () {\n if (this.obj && !this.obj.isDestroyed) {\n if (this.removeEventHandler) {\n this.removeEventHandler();\n }\n this.obj.destroy();\n }\n };\n return EditCellBase;\n}());\nexport { EditCellBase };\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 { CheckBox } from '@syncfusion/ej2-buttons';\nimport { extend } from '@syncfusion/ej2-base';\nimport { isEditable, addRemoveActiveClasses, createEditElement, getObject } from '../base/util';\nimport * as literals from '../base/string-literals';\nimport { EditCellBase } from './edit-cell-base';\n/**\n * `BooleanEditCell` is used to handle boolean cell type editing.\n *\n * @hidden\n */\nvar BooleanEditCell = /** @class */ (function (_super) {\n __extends(BooleanEditCell, _super);\n function BooleanEditCell() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.activeClasses = ['e-selectionbackground', 'e-active'];\n return _this;\n }\n BooleanEditCell.prototype.create = function (args) {\n var col = args.column;\n var classNames = 'e-field e-boolcell';\n if (col.type === 'checkbox') {\n classNames = 'e-field e-boolcell e-edit-checkselect';\n }\n this.removeEventHandler = this.removeEventListener;\n return createEditElement(this.parent, args.column, classNames, { type: 'checkbox', value: args.value });\n };\n BooleanEditCell.prototype.read = function (element) {\n return element.checked;\n };\n BooleanEditCell.prototype.write = function (args) {\n var selectChkBox;\n var chkState;\n if (!isNullOrUndefined(args.row)) {\n selectChkBox = args.row.querySelector('.e-edit-checkselect');\n }\n if (getObject(args.column.field, args.rowData)) {\n chkState = JSON.parse(getObject(args.column.field, args.rowData).toString().toLowerCase());\n }\n if (!isNullOrUndefined(selectChkBox) && args.column.type === 'checkbox') {\n this.editType = this.parent.editSettings.mode;\n this.editRow = args.row;\n if (args.requestType !== 'add') {\n var row = this.parent.getRowObjectFromUID(args.row.getAttribute('data-uid'));\n chkState = row ? row.isSelected : false;\n }\n addRemoveActiveClasses.apply(void 0, [[].slice.call(args.row.getElementsByClassName(literals.rowCell)), chkState].concat(this.activeClasses));\n }\n this.obj = new CheckBox(extend({\n label: this.parent.editSettings.mode !== 'Dialog' ? ' ' : args.column.headerText,\n checked: chkState,\n disabled: !isEditable(args.column, args.requestType, args.element), enableRtl: this.parent.enableRtl,\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n }, args.column.edit.params));\n this.addEventListener();\n this.obj.appendTo(args.element);\n };\n BooleanEditCell.prototype.addEventListener = function () {\n this.cbChange = this.checkBoxChange.bind(this);\n this.obj.addEventListener(literals.change, this.cbChange);\n };\n BooleanEditCell.prototype.removeEventListener = function () {\n if (this.obj.isDestroyed) {\n return;\n }\n this.obj.removeEventListener(literals.change, this.cbChange);\n };\n BooleanEditCell.prototype.checkBoxChange = function (args) {\n if (this.editRow && this.editType !== 'Dialog') {\n var add = false;\n if (!args.checked) {\n this.editRow.removeAttribute('aria-selected');\n }\n else {\n add = true;\n this.editRow.setAttribute('aria-selected', add.toString());\n }\n addRemoveActiveClasses.apply(void 0, [[].slice.call(this.editRow.getElementsByClassName(literals.rowCell)), add].concat(this.activeClasses));\n }\n };\n return BooleanEditCell;\n}(EditCellBase));\nexport { BooleanEditCell };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { extend, isNullOrUndefined, select } from '@syncfusion/ej2-base';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { Query, DataManager, DataUtil, Predicate } from '@syncfusion/ej2-data';\nimport { isEditable, getComplexFieldID, getObject } from '../base/util';\nimport { parentsUntil } from '../base/util';\nimport { EditCellBase } from './edit-cell-base';\nimport * as literals from '../base/string-literals';\nimport * as events from '../base/constant';\n/**\n * `DropDownEditCell` is used to handle dropdown cell type editing.\n *\n * @hidden\n */\nvar DropDownEditCell = /** @class */ (function (_super) {\n __extends(DropDownEditCell, _super);\n function DropDownEditCell(parent) {\n var _this = \n //constructor\n _super.call(this) || this;\n _this.parent = parent;\n _this.flag = false;\n _this.removeEventHandler = _this.removeEventListener;\n return _this;\n }\n DropDownEditCell.prototype.write = function (args) {\n var isInline = this.parent.editSettings.mode !== 'Dialog';\n this.column = args.column;\n var pred = new Predicate(args.column.field, 'notequal', null, true, false);\n var params = {};\n if (args.column.edit.params) {\n var keys = Object.keys(args.column.edit.params);\n for (var i = 0; i < keys.length; i++) {\n params[keys[i]] = keys[i] === 'query' ? args.column.edit.params[keys[i]].clone() : args.column.edit.params[keys[i]];\n }\n }\n this.obj = new DropDownList(extend({\n dataSource: this.parent.dataSource instanceof DataManager ?\n this.parent.dataSource : new DataManager(this.parent.dataSource),\n query: new Query().where(pred).select(args.column.field), enabled: isEditable(args.column, args.requestType, args.element),\n fields: { value: args.column.field },\n value: getObject(args.column.field, args.rowData),\n enableRtl: this.parent.enableRtl,\n placeholder: isInline ? '' : args.column.headerText, popupHeight: '200px',\n floatLabelType: isInline ? 'Never' : 'Always',\n sortOrder: 'Ascending',\n cssClass: this.parent.cssClass ? this.parent.cssClass : null,\n close: this.dropDownClose.bind(this)\n }, params));\n if (this.parent.enableVirtualization) {\n this.obj.dataSource = args.column.isForeignColumn() ? [args.foreignKeyData[0]] : [args.rowData];\n }\n this.addEventListener();\n this.obj.query.params = this.parent.query.params;\n this.obj.appendTo(args.element);\n /* tslint:disable-next-line:no-any */\n args.element.setAttribute('name', getComplexFieldID(args.column.field));\n };\n DropDownEditCell.prototype.dropDownClose = function (args) {\n // if (args.event && (args.event as KeyboardEventArgs).action === 'escape') {\n // (this as DropDownEditCell).parent.editModule.editCellDialogClose = true;\n // }\n };\n DropDownEditCell.prototype.addEventListener = function () {\n this.ddCreated = this.dropdownCreated.bind(this);\n this.ddOpen = this.dropDownOpen.bind(this);\n this.ddBeforeOpen = this.dropdownBeforeOpen.bind(this);\n this.ddComplete = this.ddActionComplete.bind(this);\n this.obj.addEventListener(literals.create, this.ddCreated);\n this.obj.addEventListener(literals.open, this.ddOpen);\n this.obj.addEventListener(literals.beforeOpen, this.ddBeforeOpen);\n this.obj.addEventListener(events.actionComplete, this.ddComplete);\n };\n DropDownEditCell.prototype.removeEventListener = function () {\n if (this.obj.isDestroyed) {\n return;\n }\n this.obj.removeEventListener(literals.create, this.ddCreated);\n this.obj.removeEventListener(literals.open, this.ddOpen);\n this.obj.removeEventListener(literals.beforeOpen, this.ddBeforeOpen);\n this.obj.removeEventListener(events.actionComplete, this.ddComplete);\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DropDownEditCell.prototype.dropdownCreated = function (e) {\n this.flag = true;\n };\n DropDownEditCell.prototype.dropdownBeforeOpen = function () {\n if (this.parent.enableVirtualization) {\n this.obj.dataSource = !this.column.isForeignColumn() ? (this.parent.dataSource instanceof DataManager ?\n this.parent.dataSource : new DataManager(this.parent.dataSource))\n : this.column.dataSource instanceof DataManager ?\n this.column.dataSource : new DataManager(this.column.dataSource);\n }\n };\n DropDownEditCell.prototype.ddActionComplete = function (e) {\n e.result = DataUtil.distinct(e.result, this.obj.fields.value, true);\n if (this.flag && this.column.dataSource && !(this.column.edit.params &&\n this.column.edit.params.ddEditedData)) {\n if ('result' in this.column.dataSource) {\n this.column.dataSource.result = e.result;\n }\n else if (this.column.dataSource instanceof DataManager) {\n this.column.dataSource.dataSource.json = e.result;\n }\n }\n this.flag = false;\n };\n DropDownEditCell.prototype.dropDownOpen = function (args) {\n var dlgElement = parentsUntil(this.obj.element, 'e-dialog');\n if (this.parent.editSettings.mode === 'Dialog' && !isNullOrUndefined(dlgElement)) {\n var dlgObj = select('#' + dlgElement.id, document).ej2_instances[0];\n args.popup.element.style.zIndex = (dlgObj.zIndex + 1).toString();\n }\n };\n return DropDownEditCell;\n}(EditCellBase));\nexport { DropDownEditCell };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Property, Event, Browser, L10n, getUniqueID } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { attributes, addClass, removeClass, detach, closest } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, getValue, formatUnit, setValue, merge } from '@syncfusion/ej2-base';\nimport { Internationalization, getNumericObject } from '@syncfusion/ej2-base';\nimport { Input } from '../input/input';\nvar ROOT = 'e-control-wrapper e-numeric';\nvar SPINICON = 'e-input-group-icon';\nvar SPINUP = 'e-spin-up';\nvar SPINDOWN = 'e-spin-down';\nvar ERROR = 'e-error';\nvar INCREMENT = 'increment';\nvar DECREMENT = 'decrement';\nvar INTREGEXP = new RegExp('^(-)?(\\\\d*)$');\nvar DECIMALSEPARATOR = '.';\nvar COMPONENT = 'e-numerictextbox';\nvar CONTROL = 'e-control';\nvar NUMERIC_FOCUS = 'e-input-focus';\nvar HIDDENELEMENT = 'e-numeric-hidden';\nvar wrapperAttributes = ['title', 'style', 'class'];\n/**\n * Represents the NumericTextBox component that allows the user to enter only numeric values.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar NumericTextBox = /** @class */ (function (_super) {\n __extends(NumericTextBox, _super);\n /**\n *\n * @param {NumericTextBoxModel} options - Specifies the NumericTextBox model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function NumericTextBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isVue = false;\n _this.preventChange = false;\n _this.isAngular = false;\n _this.isDynamicChange = false;\n _this.numericOptions = options;\n return _this;\n }\n NumericTextBox.prototype.preRender = function () {\n this.isPrevFocused = false;\n this.decimalSeparator = '.';\n // eslint-disable-next-line no-useless-escape\n this.intRegExp = new RegExp('/^(-)?(\\d*)$/');\n this.isCalled = false;\n var ejInstance = getValue('ej2_instances', this.element);\n this.cloneElement = this.element.cloneNode(true);\n removeClass([this.cloneElement], [CONTROL, COMPONENT, 'e-lib']);\n this.angularTagName = null;\n this.formEle = closest(this.element, 'form');\n if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {\n this.angularTagName = this.element.tagName;\n var input = this.createElement('input');\n var index = 0;\n for (index; index < this.element.attributes.length; index++) {\n var attributeName = this.element.attributes[index].nodeName;\n if (attributeName !== 'id' && attributeName !== 'class') {\n input.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);\n input.innerHTML = this.element.innerHTML;\n }\n else if (attributeName === 'class') {\n input.setAttribute(attributeName, this.element.className.split(' ').filter(function (item) { return item.indexOf('ng-') !== 0; }).join(' '));\n }\n }\n if (this.element.hasAttribute('name')) {\n this.element.removeAttribute('name');\n }\n this.element.classList.remove('e-control', 'e-numerictextbox');\n this.element.appendChild(input);\n this.element = input;\n setValue('ej2_instances', ejInstance, this.element);\n }\n attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off', 'aria-live': 'assertive' });\n var localeText = {\n incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: this.placeholder\n };\n this.l10n = new L10n('numerictextbox', localeText, this.locale);\n if (this.l10n.getConstant('placeholder') !== '') {\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n }\n if (!this.element.hasAttribute('id')) {\n this.element.setAttribute('id', getUniqueID('numerictextbox'));\n }\n this.isValidState = true;\n this.inputStyle = null;\n this.inputName = null;\n this.cultureInfo = {};\n this.initCultureInfo();\n this.initCultureFunc();\n this.prevValue = this.value;\n this.updateHTMLAttrToElement();\n this.checkAttributes(false);\n if (this.formEle) {\n this.inputEleValue = this.value;\n }\n this.validateMinMax();\n this.validateStep();\n if (this.placeholder === null) {\n this.updatePlaceholder();\n }\n };\n /**\n * To Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n NumericTextBox.prototype.render = function () {\n if (this.element.tagName.toLowerCase() === 'input') {\n this.createWrapper();\n if (this.showSpinButton) {\n this.spinBtnCreation();\n }\n this.setElementWidth(this.width);\n if (!this.container.classList.contains('e-input-group')) {\n this.container.classList.add('e-input-group');\n }\n this.changeValue(this.value === null || isNaN(this.value) ?\n null : this.strictMode ? this.trimValue(this.value) : this.value);\n this.wireEvents();\n if (this.value !== null && !isNaN(this.value)) {\n if (this.decimals) {\n this.setProperties({ value: this.roundNumber(this.value, this.decimals) }, true);\n }\n }\n if (this.element.getAttribute('value') || this.value) {\n this.element.setAttribute('value', this.element.value);\n this.hiddenInput.setAttribute('value', this.hiddenInput.value);\n }\n this.elementPrevValue = this.element.value;\n if (this.element.hasAttribute('data-val')) {\n this.element.setAttribute('data-val', 'false');\n }\n if (!isNullOrUndefined(closest(this.element, \"fieldset\")) && closest(this.element, \"fieldset\").disabled) {\n this.enabled = false;\n }\n this.renderComplete();\n }\n };\n NumericTextBox.prototype.checkAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['value', 'min', 'max', 'step', 'disabled', 'readonly', 'style', 'name', 'placeholder'];\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.element.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.element.getAttribute(prop) === 'disabled' || this.element.getAttribute(prop) === ''\n || this.element.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.element.getAttribute(prop) === 'readonly' || this.element.getAttribute(prop) === ''\n || this.element.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.element.placeholder }, !isDynamic);\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['value'] === undefined)) || isDynamic) {\n var setNumber = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n this.setProperties(setValue(prop, setNumber, {}), !isDynamic);\n }\n break;\n case 'min':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['min'] === undefined)) || isDynamic) {\n var minValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (minValue !== null && !isNaN(minValue)) {\n this.setProperties(setValue(prop, minValue, {}), !isDynamic);\n }\n }\n break;\n case 'max':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['max'] === undefined)) || isDynamic) {\n var maxValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (maxValue !== null && !isNaN(maxValue)) {\n this.setProperties(setValue(prop, maxValue, {}), !isDynamic);\n }\n }\n break;\n case 'step':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['step'] === undefined)) || isDynamic) {\n var stepValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (stepValue !== null && !isNaN(stepValue)) {\n this.setProperties(setValue(prop, stepValue, {}), !isDynamic);\n }\n }\n break;\n case 'style':\n this.inputStyle = this.element.getAttribute(prop);\n break;\n case 'name':\n this.inputName = this.element.getAttribute(prop);\n break;\n default:\n {\n var value = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if ((value !== null && !isNaN(value)) || (prop === 'value')) {\n this.setProperties(setValue(prop, value, {}), true);\n }\n }\n break;\n }\n }\n }\n };\n NumericTextBox.prototype.updatePlaceholder = function () {\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n };\n NumericTextBox.prototype.initCultureFunc = function () {\n this.instance = new Internationalization(this.locale);\n };\n NumericTextBox.prototype.initCultureInfo = function () {\n this.cultureInfo.format = this.format;\n if (getValue('currency', this) !== null) {\n setValue('currency', this.currency, this.cultureInfo);\n this.setProperties({ currencyCode: this.currency }, true);\n }\n };\n /* Wrapper creation */\n NumericTextBox.prototype.createWrapper = function () {\n var updatedCssClassValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValue = this.getNumericValidClassList(this.cssClass);\n }\n var inputObj = Input.createInput({\n element: this.element,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassValue,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton,\n enabled: this.enabled\n }\n }, this.createElement);\n this.inputWrapper = inputObj;\n this.container = inputObj.container;\n this.container.setAttribute('class', ROOT + ' ' + this.container.getAttribute('class'));\n this.updateHTMLAttrToWrapper();\n if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n this.hiddenInput = (this.createElement('input', { attrs: { type: 'text',\n 'validateHidden': 'true', 'class': HIDDENELEMENT } }));\n this.inputName = this.inputName !== null ? this.inputName : this.element.id;\n this.element.removeAttribute('name');\n attributes(this.hiddenInput, { 'name': this.inputName });\n this.container.insertBefore(this.hiddenInput, this.container.childNodes[1]);\n this.updateDataAttribute(false);\n if (this.inputStyle !== null) {\n attributes(this.container, { 'style': this.inputStyle });\n }\n };\n NumericTextBox.prototype.updateDataAttribute = function (isDynamic) {\n var attr = {};\n if (!isDynamic) {\n for (var a = 0; a < this.element.attributes.length; a++) {\n attr[this.element.attributes[a].name] = this.element.getAttribute(this.element.attributes[a].name);\n }\n }\n else {\n attr = this.htmlAttributes;\n }\n for (var _i = 0, _a = Object.keys(attr); _i < _a.length; _i++) {\n var key = _a[_i];\n if (key.indexOf('data') === 0) {\n this.hiddenInput.setAttribute(key, attr[key]);\n }\n }\n };\n NumericTextBox.prototype.updateHTMLAttrToElement = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var pro = _a[_i];\n if (wrapperAttributes.indexOf(pro) < 0) {\n this.element.setAttribute(pro, this.htmlAttributes[pro]);\n }\n }\n }\n };\n NumericTextBox.prototype.updateCssClass = function (newClass, oldClass) {\n Input.setCssClass(this.getNumericValidClassList(newClass), [this.container], this.getNumericValidClassList(oldClass));\n };\n NumericTextBox.prototype.getNumericValidClassList = function (numericClassName) {\n var result = numericClassName;\n if (!isNullOrUndefined(numericClassName) && numericClassName !== '') {\n result = (numericClassName.replace(/\\s+/g, ' ')).trim();\n }\n return result;\n };\n NumericTextBox.prototype.updateHTMLAttrToWrapper = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var pro = _a[_i];\n if (wrapperAttributes.indexOf(pro) > -1) {\n if (pro === 'class') {\n var updatedClassValue = this.getNumericValidClassList(this.htmlAttributes[pro]);\n if (updatedClassValue !== '') {\n addClass([this.container], updatedClassValue.split(' '));\n }\n }\n else if (pro === 'style') {\n var numericStyle = this.container.getAttribute(pro);\n numericStyle = !isNullOrUndefined(numericStyle) ? (numericStyle + this.htmlAttributes[pro]) :\n this.htmlAttributes[pro];\n this.container.setAttribute(pro, numericStyle);\n }\n else {\n this.container.setAttribute(pro, this.htmlAttributes[pro]);\n }\n }\n }\n }\n };\n NumericTextBox.prototype.setElementWidth = function (width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.container.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.container.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n };\n /* Spinner creation */\n NumericTextBox.prototype.spinBtnCreation = function () {\n this.spinDown = Input.appendSpan(SPINICON + ' ' + SPINDOWN, this.container, this.createElement);\n attributes(this.spinDown, {\n 'title': this.l10n.getConstant('decrementTitle')\n });\n this.spinUp = Input.appendSpan(SPINICON + ' ' + SPINUP, this.container, this.createElement);\n attributes(this.spinUp, {\n 'title': this.l10n.getConstant('incrementTitle')\n });\n this.wireSpinBtnEvents();\n };\n NumericTextBox.prototype.validateMinMax = function () {\n if (!(typeof (this.min) === 'number' && !isNaN(this.min))) {\n this.setProperties({ min: -(Number.MAX_VALUE) }, true);\n }\n if (!(typeof (this.max) === 'number' && !isNaN(this.max))) {\n this.setProperties({ max: Number.MAX_VALUE }, true);\n }\n if (this.decimals !== null) {\n if (this.min !== -(Number.MAX_VALUE)) {\n this.setProperties({ min: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.min)) }, true);\n }\n if (this.max !== (Number.MAX_VALUE)) {\n this.setProperties({ max: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.max)) }, true);\n }\n }\n this.setProperties({ min: this.min > this.max ? this.max : this.min }, true);\n if (this.min !== -(Number.MAX_VALUE)) {\n attributes(this.element, { 'aria-valuemin': this.min.toString() });\n }\n if (this.max !== (Number.MAX_VALUE)) {\n attributes(this.element, { 'aria-valuemax': this.max.toString() });\n }\n };\n NumericTextBox.prototype.formattedValue = function (decimals, value) {\n return this.instance.getNumberFormat({\n maximumFractionDigits: decimals,\n minimumFractionDigits: decimals, useGrouping: false\n })(value);\n };\n NumericTextBox.prototype.validateStep = function () {\n if (this.decimals !== null) {\n this.setProperties({ step: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.step)) }, true);\n }\n };\n NumericTextBox.prototype.action = function (operation, event) {\n this.isInteract = true;\n var value = this.isFocused ? this.instance.getNumberParser({ format: 'n' })(this.element.value) : this.value;\n this.changeValue(this.performAction(value, this.step, operation));\n this.raiseChangeEvent(event);\n };\n NumericTextBox.prototype.checkErrorClass = function () {\n if (this.isValidState) {\n removeClass([this.container], ERROR);\n }\n else {\n addClass([this.container], ERROR);\n }\n attributes(this.element, { 'aria-invalid': this.isValidState ? 'false' : 'true' });\n };\n NumericTextBox.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);\n }\n };\n NumericTextBox.prototype.resetHandler = function (e) {\n e.preventDefault();\n if (!(this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide')) || this.inputWrapper.container.classList.contains('e-static-clear')) {\n this.clear(e);\n }\n this.isInteract = true;\n this.raiseChangeEvent(e);\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n NumericTextBox.prototype.clear = function (event) {\n this.setProperties({ value: null }, true);\n this.setElementValue('');\n this.hiddenInput.value = '';\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.resetFormHandler = function () {\n if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {\n this.updateValue(null);\n }\n else {\n this.updateValue(this.inputEleValue);\n }\n };\n NumericTextBox.prototype.setSpinButton = function () {\n if (!isNullOrUndefined(this.spinDown)) {\n attributes(this.spinDown, {\n 'title': this.l10n.getConstant('decrementTitle'),\n 'aria-label': this.l10n.getConstant('decrementTitle')\n });\n }\n if (!isNullOrUndefined(this.spinUp)) {\n attributes(this.spinUp, {\n 'title': this.l10n.getConstant('incrementTitle'),\n 'aria-label': this.l10n.getConstant('incrementTitle')\n });\n }\n };\n NumericTextBox.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'blur', this.focusOutHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'input', this.inputHandler, this);\n EventHandler.add(this.element, 'keypress', this.keyPressHandler, this);\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n EventHandler.add(this.element, 'paste', this.pasteHandler, this);\n if (this.enabled) {\n this.bindClearEvent();\n if (this.formEle) {\n EventHandler.add(this.formEle, 'reset', this.resetFormHandler, this);\n }\n }\n };\n NumericTextBox.prototype.wireSpinBtnEvents = function () {\n /* bind spin button events */\n EventHandler.add(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner, this);\n EventHandler.add(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner, this);\n EventHandler.add(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);\n };\n NumericTextBox.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'blur', this.focusOutHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n EventHandler.remove(this.element, 'input', this.inputHandler);\n EventHandler.remove(this.element, 'keydown', this.keyDownHandler);\n EventHandler.remove(this.element, 'keypress', this.keyPressHandler);\n EventHandler.remove(this.element, 'change', this.changeHandler);\n EventHandler.remove(this.element, 'paste', this.pasteHandler);\n if (this.formEle) {\n EventHandler.remove(this.formEle, 'reset', this.resetFormHandler);\n }\n };\n NumericTextBox.prototype.unwireSpinBtnEvents = function () {\n /* unbind spin button events */\n EventHandler.remove(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner);\n EventHandler.remove(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner);\n EventHandler.remove(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner);\n };\n NumericTextBox.prototype.changeHandler = function (event) {\n event.stopPropagation();\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n }\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput, event);\n };\n NumericTextBox.prototype.raiseChangeEvent = function (event) {\n if (this.prevValue !== this.value) {\n var eventArgs = {};\n this.changeEventArgs = { value: this.value, previousValue: this.prevValue, isInteracted: this.isInteract,\n isInteraction: this.isInteract, event: event };\n if (event) {\n this.changeEventArgs.event = event;\n }\n if (this.changeEventArgs.event === undefined) {\n this.changeEventArgs.isInteracted = false;\n this.changeEventArgs.isInteraction = false;\n }\n merge(eventArgs, this.changeEventArgs);\n this.prevValue = this.value;\n this.isInteract = false;\n this.elementPrevValue = this.element.value;\n this.preventChange = false;\n this.trigger('change', eventArgs);\n }\n };\n NumericTextBox.prototype.pasteHandler = function () {\n var _this = this;\n if (!this.enabled || this.readonly) {\n return;\n }\n var beforeUpdate = this.element.value;\n setTimeout(function () {\n if (!_this.numericRegex().test(_this.element.value)) {\n _this.setElementValue(beforeUpdate);\n }\n });\n };\n NumericTextBox.prototype.preventHandler = function () {\n var _this = this;\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n setTimeout(function () {\n if (_this.element.selectionStart > 0) {\n var currentPos = _this.element.selectionStart;\n var prevPos = _this.element.selectionStart - 1;\n var start = 0;\n var valArray = _this.element.value.split('');\n var numericObject = getNumericObject(_this.locale);\n var decimalSeparator = getValue('decimal', numericObject);\n var ignoreKeyCode = decimalSeparator.charCodeAt(0);\n if (_this.element.value[prevPos] === ' ' && _this.element.selectionStart > 0 && !iOS) {\n if (isNullOrUndefined(_this.prevVal)) {\n _this.element.value = _this.element.value.trim();\n }\n else if (prevPos !== 0) {\n _this.element.value = _this.prevVal;\n }\n else if (prevPos === 0) {\n _this.element.value = _this.element.value.trim();\n }\n _this.element.setSelectionRange(prevPos, prevPos);\n }\n else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) &&\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== 45) {\n if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 1]) !==\n valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 1]) &&\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === ignoreKeyCode) ||\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== ignoreKeyCode) {\n _this.element.value = _this.element.value.substring(0, prevPos) +\n _this.element.value.substring(currentPos, _this.element.value.length);\n _this.element.setSelectionRange(prevPos, prevPos);\n if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) && _this.element.selectionStart > 0\n && _this.element.value.length) {\n _this.preventHandler();\n }\n }\n }\n else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 2])) && _this.element.selectionStart > 1 &&\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== 45) {\n if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 2]) !==\n valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 2]) &&\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) === ignoreKeyCode) ||\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== ignoreKeyCode) {\n _this.element.setSelectionRange(prevPos, prevPos);\n _this.nextEle = _this.element.value[_this.element.selectionStart];\n _this.cursorPosChanged = true;\n _this.preventHandler();\n }\n }\n if (_this.cursorPosChanged === true && _this.element.value[_this.element.selectionStart] === _this.nextEle &&\n isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1]))) {\n _this.element.setSelectionRange(_this.element.selectionStart + 1, _this.element.selectionStart + 1);\n _this.cursorPosChanged = false;\n _this.nextEle = null;\n }\n if (_this.element.value.trim() === '') {\n _this.element.setSelectionRange(start, start);\n }\n if (_this.element.selectionStart > 0) {\n if ((_this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === 45) && _this.element.selectionStart > 1) {\n if (isNullOrUndefined(_this.prevVal)) {\n // eslint-disable-next-line no-self-assign\n _this.element.value = _this.element.value;\n }\n else {\n _this.element.value = _this.prevVal;\n }\n _this.element.setSelectionRange(_this.element.selectionStart, _this.element.selectionStart);\n }\n if (_this.element.value[_this.element.selectionStart - 1] === decimalSeparator && _this.decimals === 0 && _this.validateDecimalOnType) {\n _this.element.value = _this.element.value.substring(0, prevPos) +\n _this.element.value.substring(currentPos, _this.element.value.length);\n }\n }\n _this.prevVal = _this.element.value;\n }\n });\n };\n NumericTextBox.prototype.keyUpHandler = function () {\n if (!this.enabled || this.readonly) {\n return;\n }\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n if (!iOS && Browser.isDevice) {\n this.preventHandler();\n }\n var parseValue = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n parseValue = parseValue === null || isNaN(parseValue) ? null : parseValue;\n this.hiddenInput.value = parseValue || parseValue === 0 ? parseValue.toString() : null;\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.inputHandler = function (event) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias\n var numerictextboxObj = this;\n if (!this.enabled || this.readonly) {\n return;\n }\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n var fireFox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n if ((fireFox || iOS) && Browser.isDevice) {\n this.preventHandler();\n }\n /* istanbul ignore next */\n if (this.isAngular\n && this.element.value !== getValue('decimal', getNumericObject(this.locale))\n && this.element.value !== getValue('minusSign', getNumericObject(this.locale))) {\n var parsedValue = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n parsedValue = isNaN(parsedValue) ? null : parsedValue;\n numerictextboxObj.localChange({ value: parsedValue });\n this.preventChange = true;\n }\n if (this.isVue) {\n var current = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n var previous = this.instance.getNumberParser({ format: 'n' })(this.elementPrevValue);\n //EJ2-54963-if type \".\" or \".0\" or \"-.0\" it converts to \"0\" automatically when binding v-model\n var nonZeroRegex = new RegExp('[^1-9]+$');\n if (nonZeroRegex.test(this.element.value)) {\n current = this.value;\n }\n var eventArgs = {\n event: event,\n value: (current === null || isNaN(current) ? null : current),\n previousValue: (previous === null || isNaN(previous) ? null : previous)\n };\n this.preventChange = true;\n this.elementPrevValue = this.element.value;\n this.trigger('input', eventArgs);\n }\n };\n NumericTextBox.prototype.keyDownHandler = function (event) {\n if (!this.readonly) {\n switch (event.keyCode) {\n case 38:\n event.preventDefault();\n this.action(INCREMENT, event);\n break;\n case 40:\n event.preventDefault();\n this.action(DECREMENT, event);\n break;\n default: break;\n }\n }\n };\n NumericTextBox.prototype.performAction = function (value, step, operation) {\n if (value === null || isNaN(value)) {\n value = 0;\n }\n var updatedValue = operation === INCREMENT ? value + step : value - step;\n updatedValue = this.correctRounding(value, step, updatedValue);\n return this.strictMode ? this.trimValue(updatedValue) : updatedValue;\n };\n NumericTextBox.prototype.correctRounding = function (value, step, result) {\n var floatExp = new RegExp('[,.](.*)');\n var floatValue = floatExp.test(value.toString());\n var floatStep = floatExp.test(step.toString());\n if (floatValue || floatStep) {\n var valueCount = floatValue ? floatExp.exec(value.toString())[0].length : 0;\n var stepCount = floatStep ? floatExp.exec(step.toString())[0].length : 0;\n var max = Math.max(valueCount, stepCount);\n return value = this.roundValue(result, max);\n }\n return result;\n };\n NumericTextBox.prototype.roundValue = function (result, precision) {\n precision = precision || 0;\n var divide = Math.pow(10, precision);\n return result *= divide, result = Math.round(result) / divide;\n };\n NumericTextBox.prototype.updateValue = function (value, event) {\n if (event) {\n this.isInteract = true;\n }\n if (value !== null && !isNaN(value)) {\n if (this.decimals) {\n value = this.roundNumber(value, this.decimals);\n }\n }\n this.changeValue(value === null || isNaN(value) ? null : this.strictMode ? this.trimValue(value) : value);\n /* istanbul ignore next */\n if (!this.isDynamicChange) {\n this.raiseChangeEvent(event);\n }\n };\n NumericTextBox.prototype.updateCurrency = function (prop, propVal) {\n setValue(prop, propVal, this.cultureInfo);\n this.updateValue(this.value);\n };\n NumericTextBox.prototype.changeValue = function (value) {\n if (!(value || value === 0)) {\n value = null;\n this.setProperties({ value: value }, true);\n }\n else {\n var numberOfDecimals = this.getNumberOfDecimals(value);\n this.setProperties({ value: this.roundNumber(value, numberOfDecimals) }, true);\n }\n this.modifyText();\n if (!this.strictMode) {\n this.validateState();\n }\n };\n NumericTextBox.prototype.modifyText = function () {\n if (this.value || this.value === 0) {\n var value = this.formatNumber();\n var elementValue = this.isFocused ? value : this.instance.getNumberFormat(this.cultureInfo)(this.value);\n this.setElementValue(elementValue);\n attributes(this.element, { 'aria-valuenow': value });\n this.hiddenInput.value = this.value.toString();\n if (this.value !== null && this.serverDecimalSeparator) {\n this.hiddenInput.value = this.hiddenInput.value.replace('.', this.serverDecimalSeparator);\n }\n }\n else {\n this.setElementValue('');\n this.element.removeAttribute('aria-valuenow');\n this.hiddenInput.value = null;\n }\n };\n NumericTextBox.prototype.setElementValue = function (val, element) {\n Input.setValue(val, (element ? element : this.element), this.floatLabelType, this.showClearButton);\n };\n NumericTextBox.prototype.validateState = function () {\n this.isValidState = true;\n if (this.value || this.value === 0) {\n this.isValidState = !(this.value > this.max || this.value < this.min);\n }\n this.checkErrorClass();\n };\n NumericTextBox.prototype.getNumberOfDecimals = function (value) {\n var numberOfDecimals;\n // eslint-disable-next-line no-useless-escape\n var EXPREGEXP = new RegExp('[eE][\\-+]?([0-9]+)');\n var valueString = value.toString();\n if (EXPREGEXP.test(valueString)) {\n var result = EXPREGEXP.exec(valueString);\n if (!isNullOrUndefined(result)) {\n valueString = value.toFixed(Math.min(parseInt(result[1], 10), 20));\n }\n }\n var decimalPart = valueString.split('.')[1];\n numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;\n if (this.decimals !== null) {\n numberOfDecimals = numberOfDecimals < this.decimals ? numberOfDecimals : this.decimals;\n }\n return numberOfDecimals;\n };\n NumericTextBox.prototype.formatNumber = function () {\n var numberOfDecimals = this.getNumberOfDecimals(this.value);\n return this.instance.getNumberFormat({\n maximumFractionDigits: numberOfDecimals,\n minimumFractionDigits: numberOfDecimals, useGrouping: false\n })(this.value);\n };\n NumericTextBox.prototype.trimValue = function (value) {\n if (value > this.max) {\n return this.max;\n }\n if (value < this.min) {\n return this.min;\n }\n return value;\n };\n NumericTextBox.prototype.roundNumber = function (value, precision) {\n var result = value;\n var decimals = precision || 0;\n var result1 = result.toString().split('e');\n result = Math.round(Number(result1[0] + 'e' + (result1[1] ? (Number(result1[1]) + decimals) : decimals)));\n var result2 = result.toString().split('e');\n result = Number(result2[0] + 'e' + (result2[1] ? (Number(result2[1]) - decimals) : -decimals));\n return Number(result.toFixed(decimals));\n };\n NumericTextBox.prototype.cancelEvent = function (event) {\n event.preventDefault();\n return false;\n };\n NumericTextBox.prototype.keyPressHandler = function (event) {\n if (!this.enabled || this.readonly) {\n return true;\n }\n if (!Browser.isDevice && Browser.info.version === '11.0' && event.keyCode === 13) {\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput, event);\n return true;\n }\n if (event.which === 0 || event.metaKey || event.ctrlKey || event.keyCode === 8 || event.keyCode === 13) {\n return true;\n }\n var currentChar = String.fromCharCode(event.which);\n var decimalSeparator = getValue('decimal', getNumericObject(this.locale));\n var isAlterNumPadDecimalChar = event.code === \"NumpadDecimal\" && currentChar !== decimalSeparator;\n //EJ2-59813-replace the culture decimal separator value with numberpad decimal separator value when culture decimal separator and numberpad decimal separator are different\n if (isAlterNumPadDecimalChar) {\n currentChar = decimalSeparator;\n }\n var text = this.element.value;\n text = text.substring(0, this.element.selectionStart) + currentChar + text.substring(this.element.selectionEnd);\n if (!this.numericRegex().test(text)) {\n event.preventDefault();\n event.stopPropagation();\n return false;\n }\n else {\n //EJ2-59813-update the numberpad decimal separator and update the cursor position\n if (isAlterNumPadDecimalChar) {\n var start = this.element.selectionStart + 1;\n this.element.value = text;\n this.element.setSelectionRange(start, start);\n event.preventDefault();\n event.stopPropagation();\n }\n return true;\n }\n };\n NumericTextBox.prototype.numericRegex = function () {\n var numericObject = getNumericObject(this.locale);\n var decimalSeparator = getValue('decimal', numericObject);\n var fractionRule = '*';\n if (decimalSeparator === DECIMALSEPARATOR) {\n decimalSeparator = '\\\\' + decimalSeparator;\n }\n if (this.decimals === 0 && this.validateDecimalOnType) {\n return INTREGEXP;\n }\n if (this.decimals && this.validateDecimalOnType) {\n fractionRule = '{0,' + this.decimals + '}';\n }\n return new RegExp('^(-)?(((\\\\d+(' + decimalSeparator + '\\\\d' + fractionRule +\n ')?)|(' + decimalSeparator + '\\\\d' + fractionRule + ')))?$');\n };\n NumericTextBox.prototype.mouseWheel = function (event) {\n event.preventDefault();\n var delta;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var rawEvent = event;\n if (rawEvent.wheelDelta) {\n delta = rawEvent.wheelDelta / 120;\n }\n else if (rawEvent.detail) {\n delta = -rawEvent.detail / 3;\n }\n if (delta > 0) {\n this.action(INCREMENT, event);\n }\n else if (delta < 0) {\n this.action(DECREMENT, event);\n }\n this.cancelEvent(event);\n };\n NumericTextBox.prototype.focusHandler = function (event) {\n var _this = this;\n this.focusEventArgs = { event: event, value: this.value, container: this.container };\n this.trigger('focus', this.focusEventArgs);\n if (!this.enabled || this.readonly) {\n return;\n }\n this.isFocused = true;\n removeClass([this.container], ERROR);\n this.prevValue = this.value;\n if ((this.value || this.value === 0)) {\n var formatValue_1 = this.formatNumber();\n this.setElementValue(formatValue_1);\n if (!this.isPrevFocused) {\n if (!Browser.isDevice && Browser.info.version === '11.0') {\n this.element.setSelectionRange(0, formatValue_1.length);\n }\n else {\n var delay = (Browser.isDevice && Browser.isIos) ? 600 : 0;\n setTimeout(function () {\n _this.element.setSelectionRange(0, formatValue_1.length);\n }, delay);\n }\n }\n }\n if (!Browser.isDevice) {\n EventHandler.add(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel, this);\n }\n };\n NumericTextBox.prototype.focusOutHandler = function (event) {\n var _this = this;\n this.blurEventArgs = { event: event, value: this.value, container: this.container };\n this.trigger('blur', this.blurEventArgs);\n if (!this.enabled || this.readonly) {\n return;\n }\n if (this.isPrevFocused) {\n event.preventDefault();\n if (Browser.isDevice) {\n var value_1 = this.element.value;\n this.element.focus();\n this.isPrevFocused = false;\n var ele_1 = this.element;\n setTimeout(function () {\n _this.setElementValue(value_1, ele_1);\n }, 200);\n }\n }\n else {\n this.isFocused = false;\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n }\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput);\n if (!Browser.isDevice) {\n EventHandler.remove(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel);\n }\n }\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var focusEvent = document.createEvent('FocusEvent');\n focusEvent.initEvent('focusout', false, true);\n element.dispatchEvent(focusEvent);\n }\n };\n NumericTextBox.prototype.mouseDownOnSpinner = function (event) {\n var _this = this;\n if (this.isFocused) {\n this.isPrevFocused = true;\n event.preventDefault();\n }\n if (!this.getElementData(event)) {\n return;\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var result = this.getElementData(event);\n var target = event.currentTarget;\n var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;\n EventHandler.add(target, 'mouseleave', this.mouseUpClick, this);\n this.timeOut = setInterval(function () {\n _this.isCalled = true;\n _this.action(action, event);\n }, 150);\n EventHandler.add(document, 'mouseup', this.mouseUpClick, this);\n };\n NumericTextBox.prototype.touchMoveOnSpinner = function (event) {\n var target;\n if (event.type === \"touchmove\") {\n var touchEvent = event.touches;\n target = touchEvent.length && document.elementFromPoint(touchEvent[0].pageX, touchEvent[0].pageY);\n }\n else {\n target = document.elementFromPoint(event.clientX, event.clientY);\n }\n if (!(target.classList.contains(SPINICON))) {\n clearInterval(this.timeOut);\n }\n };\n NumericTextBox.prototype.mouseUpOnSpinner = function (event) {\n this.prevValue = this.value;\n if (this.isPrevFocused) {\n this.element.focus();\n if (!Browser.isDevice) {\n this.isPrevFocused = false;\n }\n }\n if (!Browser.isDevice) {\n event.preventDefault();\n }\n if (!this.getElementData(event)) {\n return;\n }\n var target = event.currentTarget;\n var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;\n EventHandler.remove(target, 'mouseleave', this.mouseUpClick);\n if (!this.isCalled) {\n this.action(action, event);\n }\n this.isCalled = false;\n EventHandler.remove(document, 'mouseup', this.mouseUpClick);\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.getElementData = function (event) {\n if ((event.which && event.which === 3) || (event.button && event.button === 2)\n || !this.enabled || this.readonly) {\n return false;\n }\n clearInterval(this.timeOut);\n return true;\n };\n NumericTextBox.prototype.floatLabelTypeUpdate = function () {\n Input.removeFloating(this.inputWrapper);\n var hiddenInput = this.hiddenInput;\n this.hiddenInput.remove();\n Input.addFloating(this.element, this.floatLabelType, this.placeholder, this.createElement);\n this.container.insertBefore(hiddenInput, this.container.childNodes[1]);\n };\n NumericTextBox.prototype.mouseUpClick = function (event) {\n event.stopPropagation();\n clearInterval(this.timeOut);\n this.isCalled = false;\n EventHandler.remove(this.spinUp, 'mouseleave', this.mouseUpClick);\n EventHandler.remove(this.spinDown, 'mouseleave', this.mouseUpClick);\n };\n /**\n * Increments the NumericTextBox value with the specified step value.\n *\n * @param {number} step - Specifies the value used to increment the NumericTextBox value.\n * if its not given then numeric value will be incremented based on the step property value.\n * @returns {void}\n */\n NumericTextBox.prototype.increment = function (step) {\n if (step === void 0) { step = this.step; }\n this.isInteract = false;\n this.changeValue(this.performAction(this.value, step, INCREMENT));\n this.raiseChangeEvent();\n };\n /**\n * Decrements the NumericTextBox value with specified step value.\n *\n * @param {number} step - Specifies the value used to decrement the NumericTextBox value.\n * if its not given then numeric value will be decremented based on the step property value.\n * @returns {void}\n */\n NumericTextBox.prototype.decrement = function (step) {\n if (step === void 0) { step = this.step; }\n this.isInteract = false;\n this.changeValue(this.performAction(this.value, step, DECREMENT));\n this.raiseChangeEvent();\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it maintains the initial input element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n NumericTextBox.prototype.destroy = function () {\n this.unwireEvents();\n detach(this.hiddenInput);\n if (this.showSpinButton) {\n this.unwireSpinBtnEvents();\n detach(this.spinUp);\n detach(this.spinDown);\n }\n var attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',\n 'aria-disabled', 'autocapitalize', 'spellcheck', 'aria-autocomplete', 'tabindex',\n 'aria-valuemin', 'aria-valuemax', 'aria-live', 'aria-valuenow', 'aria-invalid'];\n for (var i = 0; i < attrArray.length; i++) {\n this.element.removeAttribute(attrArray[i]);\n }\n this.element.classList.remove('e-input');\n this.container.insertAdjacentElement('afterend', this.element);\n detach(this.container);\n _super.prototype.destroy.call(this);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns */\n /**\n * Returns the value of NumericTextBox with the format applied to the NumericTextBox.\n *\n */\n NumericTextBox.prototype.getText = function () {\n return this.element.value;\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns */\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n NumericTextBox.prototype.focusIn = function () {\n if (document.activeElement !== this.element && this.enabled) {\n this.element.focus();\n addClass([this.container], [NUMERIC_FOCUS]);\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n NumericTextBox.prototype.focusOut = function () {\n if (document.activeElement === this.element && this.enabled) {\n this.element.blur();\n removeClass([this.container], [NUMERIC_FOCUS]);\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n * @returns {string}\n */\n NumericTextBox.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Calls internally if any of the property value is changed.\n *\n * @param {NumericTextBoxModel} newProp - Returns the dynamic property value of the component.\n * @param {NumericTextBoxModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n NumericTextBox.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 'width':\n this.setElementWidth(newProp.width);\n Input.calculateWidth(this.element, this.container);\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'enabled':\n Input.setEnabled(newProp.enabled, this.element);\n break;\n case 'enableRtl':\n Input.setEnableRtl(newProp.enableRtl, [this.container]);\n break;\n case 'readonly':\n Input.setReadonly(newProp.readonly, this.element);\n if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n else {\n this.element.removeAttribute('aria-readonly');\n }\n break;\n case 'htmlAttributes':\n this.updateHTMLAttrToElement();\n this.updateHTMLAttrToWrapper();\n this.updateDataAttribute(true);\n this.checkAttributes(true);\n Input.validateInputType(this.container, this.element);\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.element);\n Input.calculateWidth(this.element, this.container);\n break;\n case 'step':\n this.step = newProp.step;\n this.validateStep();\n break;\n case 'showSpinButton':\n this.updateSpinButton(newProp);\n break;\n case 'showClearButton':\n this.updateClearButton(newProp);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n this.floatLabelTypeUpdate();\n break;\n case 'value':\n this.isDynamicChange = (this.isAngular || this.isVue) && this.preventChange;\n this.updateValue(newProp.value);\n if (this.isDynamicChange) {\n this.preventChange = false;\n this.isDynamicChange = false;\n }\n break;\n case 'min':\n case 'max':\n setValue(prop, getValue(prop, newProp), this);\n this.validateMinMax();\n this.updateValue(this.value);\n break;\n case 'strictMode':\n this.strictMode = newProp.strictMode;\n this.updateValue(this.value);\n this.validateState();\n break;\n case 'locale':\n this.initCultureFunc();\n this.l10n.setLocale(this.locale);\n this.setSpinButton();\n this.updatePlaceholder();\n Input.setPlaceholder(this.placeholder, this.element);\n this.updateValue(this.value);\n break;\n case 'currency':\n {\n var propVal = getValue(prop, newProp);\n this.setProperties({ currencyCode: propVal }, true);\n this.updateCurrency(prop, propVal);\n }\n break;\n case 'currencyCode':\n {\n var propValue = getValue(prop, newProp);\n this.setProperties({ currency: propValue }, true);\n this.updateCurrency('currency', propValue);\n }\n break;\n case 'format':\n setValue(prop, getValue(prop, newProp), this);\n this.initCultureInfo();\n this.updateValue(this.value);\n break;\n case 'decimals':\n this.decimals = newProp.decimals;\n this.updateValue(this.value);\n }\n }\n };\n NumericTextBox.prototype.updateClearButton = function (newProp) {\n Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper, undefined, this.createElement);\n this.bindClearEvent();\n };\n NumericTextBox.prototype.updateSpinButton = function (newProp) {\n if (newProp.showSpinButton) {\n this.spinBtnCreation();\n }\n else {\n detach(this.spinUp);\n detach(this.spinDown);\n }\n };\n /**\n * Gets the component name\n *\n * @returns {string} Returns the component name.\n * @private\n */\n NumericTextBox.prototype.getModuleName = function () {\n return 'numerictextbox';\n };\n __decorate([\n Property('')\n ], NumericTextBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"value\", void 0);\n __decorate([\n Property(-(Number.MAX_VALUE))\n ], NumericTextBox.prototype, \"min\", void 0);\n __decorate([\n Property(Number.MAX_VALUE)\n ], NumericTextBox.prototype, \"max\", void 0);\n __decorate([\n Property(1)\n ], NumericTextBox.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"placeholder\", void 0);\n __decorate([\n Property({})\n ], NumericTextBox.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"showSpinButton\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"readonly\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property('n2')\n ], NumericTextBox.prototype, \"format\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"decimals\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"currency\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"currencyCode\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"strictMode\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"validateDecimalOnType\", void 0);\n __decorate([\n Property('Never')\n ], NumericTextBox.prototype, \"floatLabelType\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"blur\", void 0);\n NumericTextBox = __decorate([\n NotifyPropertyChanges\n ], NumericTextBox);\n return NumericTextBox;\n}(Component));\nexport { NumericTextBox };\n","import { extend, Internationalization } from '@syncfusion/ej2-base';\nimport { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { isEditable, getComplexFieldID, getObject, createEditElement } from '../base/util';\n/**\n * `NumericEditCell` is used to handle numeric cell type editing.\n *\n * @hidden\n */\nvar NumericEditCell = /** @class */ (function () {\n function NumericEditCell(parent) {\n this.parent = parent;\n }\n NumericEditCell.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 NumericEditCell.prototype.create = function (args) {\n this.instances = new Internationalization(this.parent.locale);\n return createEditElement(this.parent, args.column, 'e-field', {});\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n NumericEditCell.prototype.read = function (element) {\n return this.obj.value;\n };\n NumericEditCell.prototype.write = function (args) {\n var col = args.column;\n var isInline = this.parent.editSettings.mode !== 'Dialog';\n this.obj = new NumericTextBox(extend({\n value: parseFloat(getObject(args.column.field, args.rowData)),\n enableRtl: this.parent.enableRtl,\n placeholder: isInline ? '' : args.column.headerText,\n enabled: isEditable(args.column, args.requestType, args.element),\n floatLabelType: this.parent.editSettings.mode !== 'Dialog' ? 'Never' : 'Always',\n locale: this.parent.locale,\n cssClass: this.parent.cssClass ? this.parent.cssClass : null\n }, col.edit.params));\n args.element.setAttribute('name', getComplexFieldID(args.column.field));\n this.obj.appendTo(args.element);\n this.obj.element.addEventListener('keydown', this.keyEventHandler);\n };\n NumericEditCell.prototype.destroy = function () {\n if (this.obj && !this.obj.isDestroyed) {\n this.obj.element.removeEventListener('keydown', this.keyEventHandler);\n this.obj.destroy();\n }\n };\n return NumericEditCell;\n}());\nexport { NumericEditCell };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { isEditable, createEditElement } from '../base/util';\nimport { TextBox } from '@syncfusion/ej2-inputs';\nimport { EditCellBase } from './edit-cell-base';\n/**\n * `DefaultEditCell` is used to handle default cell type editing.\n *\n * @hidden\n */\nvar DefaultEditCell = /** @class */ (function (_super) {\n __extends(DefaultEditCell, _super);\n function DefaultEditCell() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n DefaultEditCell.prototype.create = function (args) {\n var attr = {\n type: 'text', value: !isNullOrUndefined(args.value) ? args.value : '', style: 'text-align:' + args.column.textAlign\n };\n return createEditElement(this.parent, args.column, 'e-field e-input e-defaultcell', attr);\n };\n DefaultEditCell.prototype.read = function (element) {\n return element.value;\n };\n DefaultEditCell.prototype.write = function (args) {\n var col = args.column;\n var isInline = this.parent.editSettings.mode !== 'Dialog';\n this.obj = new TextBox(extend({\n element: args.element, floatLabelType: this.parent.editSettings.mode !== 'Dialog' ? 'Never' : 'Always',\n enableRtl: this.parent.enableRtl, enabled: isEditable(args.column, args.requestType, args.element),\n placeholder: isInline ? '' : args.column.headerText,\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n }, col.edit.params));\n this.obj.appendTo(args.element);\n };\n return DefaultEditCell;\n}(EditCellBase));\nexport { DefaultEditCell };\n","import { extend, select } from '@syncfusion/ej2-base';\nimport { remove, isNullOrUndefined, updateBlazorTemplate } from '@syncfusion/ej2-base';\nimport { parentsUntil, isGroupAdaptive, refreshForeignData, getObject, gridActionHandler } from '../base/util';\nimport * as events from '../base/constant';\nimport { RowRenderer } from '../renderer/row-renderer';\nimport { DataUtil } from '@syncfusion/ej2-data';\nimport { addRemoveEventListener } from '../base/util';\nimport * as literals from '../base/string-literals';\n/**\n * `NormalEdit` module is used to handle normal('inline, dialog, external') editing actions.\n *\n * @hidden\n */\nvar NormalEdit = /** @class */ (function () {\n function NormalEdit(parent, serviceLocator, renderer) {\n this.args = {};\n this.currentVirtualData = {};\n this.parent = parent;\n this.renderer = renderer;\n this.serviceLocator = serviceLocator;\n this.addEventListener();\n }\n NormalEdit.prototype.clickHandler = function (e) {\n var target = e.target;\n var gObj = this.parent;\n if ((((parentsUntil(target, literals.gridContent) &&\n parentsUntil(parentsUntil(target, literals.gridContent), 'e-grid').id === gObj.element.id)) || (gObj.frozenRows\n && parentsUntil(target, literals.headerContent))) && !parentsUntil(target, 'e-unboundcelldiv')) {\n this.rowIndex = parentsUntil(target, literals.rowCell)\n ? parseInt(target.parentElement.getAttribute(literals.dataRowIndex), 10) : -1;\n if (gObj.isEdit) {\n gObj.editModule.endEdit();\n }\n }\n };\n NormalEdit.prototype.dblClickHandler = function (e) {\n if (parentsUntil(e.target, literals.rowCell) && this.parent.editSettings.allowEditOnDblClick) {\n this.parent.editModule.startEdit(parentsUntil(e.target, literals.row));\n }\n };\n /**\n * The function used to trigger editComplete\n *\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n NormalEdit.prototype.editComplete = function (e) {\n this.parent.isEdit = false;\n var action = 'action';\n switch (e.requestType) {\n case 'save':\n if (!(this.parent.isCheckBoxSelection || this.parent.selectionSettings.type === 'Multiple')\n || (!this.parent.isPersistSelection)) {\n if (e[action] !== 'edit') {\n this.parent.selectRow(0);\n }\n }\n this.parent.trigger(events.actionComplete, extend(e, {\n requestType: 'save',\n type: events.actionComplete\n }));\n break;\n case 'delete':\n this.parent.trigger(events.actionComplete, extend(e, {\n requestType: 'delete',\n type: events.actionComplete\n }));\n if (!this.parent.isCheckBoxSelection) {\n this.parent.selectRow(this.editRowIndex);\n }\n break;\n }\n };\n NormalEdit.prototype.getEditArgs = function (editedData, rowObj, isScroll) {\n var primaryKeys = this.parent.getPrimaryKeyFieldNames();\n var primaryKeyValues = [];\n for (var i = 0; i < primaryKeys.length; i++) {\n primaryKeyValues.push(getObject(primaryKeys[i], editedData));\n }\n var args = {\n primaryKey: primaryKeys, primaryKeyValue: primaryKeyValues, requestType: 'beginEdit',\n rowData: editedData, rowIndex: this.rowIndex, type: 'edit', cancel: false,\n foreignKeyData: rowObj && rowObj.foreignKeyData, target: undefined, isScroll: isScroll\n };\n return args;\n };\n NormalEdit.prototype.startEdit = function (tr) {\n var _this = this;\n var gObj = this.parent;\n this.rowIndex = this.editRowIndex = parseInt(tr.getAttribute(literals.dataRowIndex), 10);\n if (gObj.enableVirtualization || gObj.enableInfiniteScrolling) {\n var selector = '.e-row[data-rowindex=\"' + this.rowIndex + '\"]';\n var virtualRow = this.parent.element.querySelector(selector);\n if (!virtualRow) {\n return;\n }\n }\n var e = { data: undefined, index: this.rowIndex, isScroll: false };\n this.parent.notify(events.virtualScrollEditActionBegin, e);\n if (isGroupAdaptive(gObj)) {\n var rObj = gObj.getRowObjectFromUID(tr.getAttribute('data-uid'));\n this.previousData = rObj.data;\n }\n else if (!this.previousData && (this.parent.enableVirtualization || this.parent.enableInfiniteScrolling)) {\n this.previousData = e.data;\n }\n else if (!this.parent.enableVirtualization) {\n this.previousData = extend({}, {}, gObj.getCurrentViewRecords()[this.rowIndex], true);\n }\n var editedData = extend({}, {}, e.data || this.previousData, true);\n this.uid = tr.getAttribute('data-uid');\n var rowObj = gObj.getRowObjectFromUID(this.uid);\n var args = this.getEditArgs(editedData, rowObj, e.isScroll);\n args.row = tr;\n if (!args.isScroll) {\n this.parent.notify(events.createVirtualValidationForm, { uid: this.uid, prevData: this.previousData, argsCreator: this.getEditArgs.bind(this), renderer: this.renderer });\n gObj.trigger(events.beginEdit, args, function (begineditargs) {\n begineditargs.type = 'actionBegin';\n gObj.trigger(events.actionBegin, begineditargs, function (editargs) {\n if (!editargs.cancel) {\n _this.inlineEditHandler(editargs, tr);\n }\n });\n });\n }\n else {\n this.inlineEditHandler(args, tr);\n }\n };\n NormalEdit.prototype.inlineEditHandler = function (editargs, tr) {\n var gObj = this.parent;\n gObj.isEdit = true;\n editargs.row = editargs.row ? editargs.row : tr;\n if (gObj.editSettings.mode !== 'Dialog') {\n gObj.clearSelection();\n }\n if (gObj.editSettings.mode === 'Dialog' && gObj.selectionModule) {\n gObj.selectionModule.preventFocus = true;\n editargs.row.classList.add('e-dlgeditrow');\n }\n this.renderer.update(editargs);\n this.uid = tr.getAttribute('data-uid');\n gObj.editModule.applyFormValidation();\n editargs.type = 'actionComplete';\n gObj.trigger(events.actionComplete, editargs);\n this.args = editargs;\n if (this.parent.allowTextWrap) {\n this.parent.notify(events.freezeRender, { case: 'textwrap' });\n }\n };\n NormalEdit.prototype.updateRow = function (index, data) {\n var _this = this;\n var gObj = this.parent;\n this.editRowIndex = index;\n var args = {\n requestType: 'save', action: 'edit', type: events.actionBegin, data: data, cancel: false,\n previousData: gObj.getCurrentViewRecords()[index],\n row: gObj.getRowByIndex(index)\n };\n gObj.showSpinner();\n if (gObj.enableInfiniteScrolling) {\n this.uid = args.row.getAttribute('data-uid');\n var index_1 = parseInt(args.row.getAttribute('data-rowindex'), 10);\n this.parent.notify(events.refreshInfiniteEditrowindex, { index: index_1 });\n }\n gObj.notify(events.updateData, args);\n if (args.promise) {\n args.promise.then(function () { return gObj.refresh(); }).catch(function (e) { return _this.edFail(e); });\n }\n else {\n if (!gObj.enableInfiniteScrolling) {\n gObj.refresh();\n }\n }\n };\n NormalEdit.prototype.editFormValidate = function () {\n var gObj = this.parent;\n var isValid = gObj.editModule.editFormValidate();\n var validationArgs = {\n prevData: this.previousData, isValid: true, editIdx: this.editRowIndex, addIdx: this.addedRowIndex\n };\n gObj.notify(events.validateVirtualForm, validationArgs);\n return (isValid && validationArgs.isValid);\n };\n NormalEdit.prototype.endEdit = function () {\n var _this = this;\n var gObj = this.parent;\n if (!this.parent.isEdit || !this.editFormValidate()) {\n return;\n }\n var editedData = extend({}, {}, this.previousData, true);\n var args = extend(this.args, {\n requestType: 'save', type: events.actionBegin, data: editedData, cancel: false,\n previousData: this.previousData, selectedRow: gObj.selectedRowIndex, foreignKeyData: {}\n });\n var index = gObj.getFrozenMode() === 'Right' ? 1 : 0;\n var isDlg = gObj.editSettings.mode === 'Dialog';\n var dlgWrapper = select('#' + gObj.element.id + '_dialogEdit_wrapper', document);\n var dlgForm = isDlg ? dlgWrapper.querySelector('.e-gridform') : gObj.element.getElementsByClassName('e-gridform')[index];\n var data = {\n virtualData: extend({}, {}, this.previousData, true), isAdd: false, isScroll: false, endEdit: true\n };\n this.parent.notify(events.getVirtualData, data);\n if ((this.parent.enableVirtualization || this.parent.enableInfiniteScrolling)\n && this.parent.editSettings.mode === 'Normal' && Object.keys(data.virtualData).length) {\n if (this.parent.isEdit) {\n this.currentVirtualData = editedData = args.data = data.virtualData;\n }\n }\n else {\n editedData = gObj.editModule.getCurrentEditedData(dlgForm, editedData);\n }\n if (gObj.isFrozenGrid() && gObj.editSettings.mode === 'Normal') {\n var mhdrFrm = gObj.getMovableVirtualHeader().querySelector('.e-gridform');\n var mCntFrm = gObj.getMovableVirtualContent().querySelector('.e-gridform');\n var mvblEle = [mhdrFrm || mCntFrm];\n var frHdrFrm = void 0;\n var frCntFrm = void 0;\n var frEle = [];\n if (gObj.getFrozenMode() === literals.leftRight) {\n frHdrFrm = gObj.getFrozenRightHeader().querySelector('.e-gridform');\n frCntFrm = gObj.getFrozenRightContent().querySelector('.e-gridform');\n frEle = [frHdrFrm || frCntFrm];\n }\n gridActionHandler(this.parent, function (tableName, elements) {\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var ele = elements_1[_i];\n if (ele) {\n editedData = gObj.editModule.getCurrentEditedData(ele, editedData);\n }\n }\n }, [[], mvblEle, frEle]);\n }\n var eleLength = [].slice.call(gObj.element.getElementsByClassName(literals.editedRow)).length;\n if (!data.isAdd && Object.keys(this.currentVirtualData).length && !eleLength) {\n eleLength = 1;\n }\n if (isDlg ? dlgWrapper.getElementsByClassName(literals.editedRow).length : eleLength) {\n args.action = 'edit';\n gObj.trigger(events.actionBegin, args, function (endEditArgs) {\n if (endEditArgs.cancel) {\n return;\n }\n if (_this.parent.loadingIndicator.indicatorType === 'Spinner') {\n gObj.showSpinner();\n }\n if (_this.parent.loadingIndicator.indicatorType === 'Shimmer') {\n _this.parent.showMaskRow();\n }\n gObj.notify(events.updateData, endEditArgs);\n });\n }\n else {\n args.action = 'add';\n args.selectedRow = 0;\n args.index = this.addedRowIndex;\n gObj.notify(events.virtualScrollEditSuccess, {});\n gObj.notify(events.modelChanged, args);\n this.addedRowIndex = null;\n if (args.cancel) {\n return;\n }\n }\n };\n NormalEdit.prototype.destroyElements = function () {\n var gObj = this.parent;\n gObj.editModule.destroyWidgets();\n gObj.editModule.destroyForm();\n this.parent.notify(events.dialogDestroy, {});\n };\n NormalEdit.prototype.editHandler = function (args) {\n var _this = this;\n if (args.promise) {\n args.promise.then(function (e) { return _this.edSucc(e, args); }).catch(function (e) { return _this.edFail(e); });\n }\n else {\n this.editSuccess(args.data, args);\n }\n };\n NormalEdit.prototype.edSucc = function (e, args) {\n this.editSuccess(e, args);\n };\n NormalEdit.prototype.edFail = function (e) {\n this.editFailure(e);\n };\n NormalEdit.prototype.updateCurrentViewData = function (data) {\n if (!this.parent.enableVirtualization && !this.parent.enableInfiniteScrolling) {\n this.parent.getCurrentViewRecords()[this.editRowIndex] = data;\n }\n };\n NormalEdit.prototype.requestSuccess = function (args) {\n if (this.parent.editModule.formObj && !this.parent.editModule.formObj.isDestroyed) {\n this.destroyElements();\n this.stopEditStatus();\n if (this.parent.editSettings.mode === 'Dialog' && args.action !== 'add' &&\n this.parent.selectionModule) {\n this.parent.element.querySelector('.e-dlgeditrow').classList.remove('e-dlgeditrow');\n }\n }\n };\n NormalEdit.prototype.editSuccess = function (e, args) {\n if (!isNullOrUndefined(e) && !(e instanceof Array)) {\n var rowData = 'rowData';\n args.data = extend({}, extend({}, args[rowData], args.data), e);\n }\n this.requestSuccess(args);\n this.parent.trigger(events.beforeDataBound, args);\n args.type = events.actionComplete;\n this.parent.isEdit = false;\n this.refreshRow(args.data);\n this.parent.notify(events.virtualScrollEditSuccess, args);\n this.parent.editModule.checkLastRow(args.row);\n this.parent.editModule.isLastRow = false;\n this.updateCurrentViewData(args.data);\n this.blazorTemplate();\n this.editRowIndex = null;\n this.parent.trigger(events.actionComplete, args);\n if (!(this.parent.isCheckBoxSelection || this.parent.selectionSettings.type === 'Multiple')\n || (!this.parent.isPersistSelection) && !this.parent.selectionSettings.checkboxOnly) {\n if (this.parent.editSettings.mode !== 'Dialog') {\n this.parent.selectRow(this.rowIndex > -1 ? this.rowIndex : this.editRowIndex);\n }\n }\n this.parent.removeMaskRow();\n this.parent.hideSpinner();\n };\n NormalEdit.prototype.closeForm = function () {\n if (!this.cloneRow && this.parent.isEdit) {\n this.stopEditStatus();\n }\n if (this.cloneRow) {\n this.cloneRow.remove();\n this.cloneRow = null;\n this.originalRow.classList.remove('e-hiddenrow');\n }\n if (this.parent.isFrozenGrid() && this.cloneFrozen) {\n this.cloneFrozen.remove();\n this.frozen.classList.remove('e-hiddenrow');\n }\n };\n NormalEdit.prototype.blazorTemplate = function () {\n var cols = this.parent.getColumns();\n if (this.parent.editSettings.template && this.parent.editSettings.mode === 'Normal') {\n updateBlazorTemplate(this.parent.element.id + 'editSettingsTemplate', 'Template', this.parent.editSettings);\n }\n for (var i = 0; i < cols.length; i++) {\n var col = cols[i];\n if (col.template) {\n updateBlazorTemplate(this.parent.element.id + col.uid, 'Template', col, false);\n }\n if (col.editTemplate) {\n updateBlazorTemplate(this.parent.element.id + col.uid + 'editTemplate', 'EditTemplate', col);\n }\n }\n };\n NormalEdit.prototype.editFailure = function (e) {\n this.parent.removeMaskRow();\n this.parent.trigger(events.actionFailure, ({ error: e }));\n this.parent.hideSpinner();\n this.parent.log('actionfailure', { error: e });\n };\n NormalEdit.prototype.needRefresh = function () {\n var refresh = true;\n var editedRow = this.parent.element.querySelector('.e-gridform');\n if ((this.parent.enableVirtualization || this.parent.infiniteScrollSettings.enableCache)\n && this.parent.editSettings.mode === 'Normal' && !editedRow) {\n refresh = false;\n }\n return refresh;\n };\n NormalEdit.prototype.refreshRow = function (data) {\n var frzCols = this.parent.isFrozenGrid();\n var row = new RowRenderer(this.serviceLocator, null, this.parent);\n var rowObj = this.parent.getRowObjectFromUID(this.uid);\n if (rowObj) {\n rowObj.changes = data;\n this.parent.notify(events.refreshVirtualCache, { data: data });\n refreshForeignData(rowObj, this.parent.getForeignKeyColumns(), rowObj.changes);\n if (this.needRefresh()) {\n row.refresh(rowObj, this.parent.getColumns(), true);\n }\n var tr = [].slice.call(this.parent.element.querySelectorAll('[data-rowindex=\"' + rowObj.index + '\"]'));\n if (frzCols && tr.length) {\n for (var i = 0; i < tr.length; i++) {\n var rowUid = tr[i].getAttribute('data-uid');\n if (rowUid !== this.uid) {\n rowObj = this.parent.getRowObjectFromUID(rowUid);\n rowObj.changes = data;\n row.refresh(rowObj, this.parent.getColumns(), true);\n this.parent.editModule.checkLastRow(tr[i]);\n }\n }\n }\n }\n };\n NormalEdit.prototype.closeEdit = function () {\n var _this = this;\n if (!this.parent.isEdit) {\n return;\n }\n var gObj = this.parent;\n var args = extend(this.args, {\n requestType: 'cancel', type: events.actionBegin, cancel: false, data: this.previousData, selectedRow: gObj.selectedRowIndex\n });\n gObj.notify(events.virtualScrollEditCancel, args);\n this.blazorTemplate();\n gObj.trigger(events.actionBegin, args, function (closeEditArgs) {\n if (closeEditArgs.cancel) {\n return;\n }\n if (_this.parent.editSettings.mode === 'Dialog') {\n _this.parent.notify(events.dialogDestroy, {});\n }\n gObj.isEdit = false;\n _this.stopEditStatus();\n closeEditArgs.type = events.actionComplete;\n if (gObj.editSettings.mode !== 'Dialog') {\n _this.refreshRow(closeEditArgs.data);\n }\n var isLazyLoad = gObj.groupSettings.enableLazyLoading && gObj.groupSettings.columns.length\n && !gObj.getContentTable().querySelector('tr.e-emptyrow');\n if (!gObj.getContentTable().querySelector('tr.e-emptyrow') &&\n !gObj.getContentTable().querySelector('tr.e-row') && !isLazyLoad) {\n gObj.renderModule.emptyRow();\n }\n if (gObj.editSettings.mode !== 'Dialog') {\n gObj.selectRow(_this.rowIndex);\n }\n gObj.trigger(events.actionComplete, closeEditArgs);\n });\n };\n NormalEdit.prototype.addRecord = function (data, index) {\n var _this = this;\n var gObj = this.parent;\n this.addedRowIndex = index = !isNullOrUndefined(index) ? index : 0;\n if (data) {\n gObj.notify(events.modelChanged, {\n requestType: 'save', type: events.actionBegin, data: data, selectedRow: 0, action: 'add', index: index\n });\n return;\n }\n if (gObj.isEdit) {\n return;\n }\n this.previousData = {};\n this.uid = '';\n var cols = gObj.getColumns();\n var rowData = { virtualData: {}, isScroll: false };\n this.parent.notify(events.getVirtualData, rowData);\n for (var i = 0; i < cols.length; i++) {\n if (rowData.isScroll && cols[i].getFreezeTableName() !== 'movable') {\n continue;\n }\n if (cols[i].field) {\n DataUtil.setValue(cols[i].field, cols[i].defaultValue, this.previousData);\n }\n }\n var args = {\n cancel: false, foreignKeyData: {},\n requestType: 'add', data: this.previousData, type: events.actionBegin, index: index,\n rowData: this.previousData, target: undefined, isScroll: rowData.isScroll\n };\n if ((this.parent.enableVirtualization || this.parent.infiniteScrollSettings.enableCache)\n && Object.keys(rowData.virtualData).length) {\n args.data = args.rowData = rowData.virtualData;\n }\n if (!args.isScroll) {\n this.parent.notify(events.createVirtualValidationForm, { uid: this.uid, prevData: this.previousData, argsCreator: this.getEditArgs.bind(this), renderer: this.renderer });\n gObj.trigger(events.actionBegin, args, function (addArgs) {\n if (addArgs.cancel) {\n return;\n }\n _this.inlineAddHandler(addArgs);\n });\n }\n else {\n this.inlineAddHandler(args);\n }\n };\n NormalEdit.prototype.inlineAddHandler = function (addArgs) {\n var gObj = this.parent;\n gObj.isEdit = true;\n if (gObj.editSettings.mode !== 'Dialog') {\n gObj.clearSelection();\n }\n this.renderer.addNew(addArgs);\n gObj.editModule.applyFormValidation();\n addArgs.type = events.actionComplete;\n addArgs.row = gObj.element.querySelector('.' + literals.addedRow);\n gObj.trigger(events.actionComplete, addArgs);\n this.args = addArgs;\n };\n NormalEdit.prototype.deleteRecord = function (fieldname, data) {\n this.editRowIndex = this.parent.selectedRowIndex;\n if (data) {\n data = (data instanceof Array) ? data : [data];\n var gObj = this.parent;\n var dataLen = Object.keys(data).length;\n fieldname = fieldname || this.parent.getPrimaryKeyFieldNames()[0];\n var _loop_1 = function (i) {\n var _a;\n var tmpRecord;\n var contained = gObj.currentViewData.some(function (record) {\n tmpRecord = record;\n return data[i] === getObject(fieldname, record) || data[i] === record;\n });\n data[i] = contained ? tmpRecord : data[i][fieldname] ? data[i] : (_a = {}, _a[fieldname] = data[i], _a);\n };\n for (var i = 0; i < dataLen; i++) {\n _loop_1(i);\n }\n }\n var args = {\n requestType: 'delete', type: events.actionBegin, foreignKeyData: {},\n data: data ? data : this.parent.getSelectedRecords(), tr: this.parent.getSelectedRows(), cancel: false\n };\n if (!isNullOrUndefined(this.parent.commandDelIndex)) {\n args.data[0] =\n this.parent.getRowObjectFromUID(this.parent.getRowByIndex(this.parent.commandDelIndex).getAttribute('data-uid')).data;\n }\n if (this.parent.enableVirtualization && args.data.length > 1) {\n var uid = this.parent.getSelectedRows()[0].getAttribute('data-uid');\n args.data = [this.parent.getRowObjectFromUID(uid).data];\n }\n this.parent.notify(events.modelChanged, args);\n };\n NormalEdit.prototype.stopEditStatus = function () {\n var gObj = this.parent;\n var addElements = [].slice.call(gObj.element.getElementsByClassName(literals.addedRow));\n var editElements = [].slice.call(gObj.element.getElementsByClassName(literals.editedRow));\n for (var i = 0; i < addElements.length; i++) {\n remove(addElements[i]);\n }\n for (var i = 0; i < editElements.length; i++) {\n editElements[i].classList.remove(literals.editedRow);\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n NormalEdit.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.evtHandlers = [{ event: events.crudAction, handler: this.editHandler },\n { event: events.doubleTap, handler: this.dblClickHandler },\n { event: events.click, handler: this.clickHandler },\n { event: events.recordAdded, handler: this.requestSuccess },\n { event: events.dblclick, handler: this.dblClickHandler },\n { event: events.deleteComplete, handler: this.editComplete },\n { event: events.saveComplete, handler: this.editComplete },\n { event: events.rowModeChange, handler: this.closeEdit },\n { event: events.closeInline, handler: this.closeForm }];\n addRemoveEventListener(this.parent, this.evtHandlers, true, this);\n };\n /**\n * @returns {void}\n * @hidden\n */\n NormalEdit.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n addRemoveEventListener(this.parent, this.evtHandlers, false);\n };\n /**\n * @returns {void}\n * @hidden\n */\n NormalEdit.prototype.destroy = function () {\n this.removeEventListener();\n this.renderer.destroy();\n };\n return NormalEdit;\n}());\nexport { NormalEdit };\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 { NormalEdit } from './normal-edit';\n/**\n * `InlineEdit` module is used to handle inline editing actions.\n *\n * @hidden\n */\nvar InlineEdit = /** @class */ (function (_super) {\n __extends(InlineEdit, _super);\n function InlineEdit(parent, serviceLocator, renderer) {\n var _this = _super.call(this, parent, serviceLocator) || this;\n _this.parent = parent;\n _this.serviceLocator = serviceLocator;\n _this.renderer = renderer;\n return _this;\n }\n InlineEdit.prototype.closeEdit = function () {\n _super.prototype.closeEdit.call(this);\n };\n InlineEdit.prototype.addRecord = function (data, index) {\n _super.prototype.addRecord.call(this, data, index);\n };\n InlineEdit.prototype.endEdit = function () {\n _super.prototype.endEdit.call(this);\n };\n InlineEdit.prototype.updateRow = function (index, data) {\n _super.prototype.updateRow.call(this, index, data);\n };\n InlineEdit.prototype.deleteRecord = function (fieldname, data) {\n _super.prototype.deleteRecord.call(this, fieldname, data);\n };\n InlineEdit.prototype.startEdit = function (tr) {\n _super.prototype.startEdit.call(this, tr);\n };\n return InlineEdit;\n}(NormalEdit));\nexport { InlineEdit };\n","import { extend, addClass, removeClass, setValue, closest, select } from '@syncfusion/ej2-base';\nimport { remove, classList } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\nimport { parentsUntil, inArray, refreshForeignData, getObject, alignFrozenEditForm, gridActionHandler, addRemoveEventListener } from '../base/util';\nimport { splitFrozenRowObjectCells, getGridRowElements } from '../base/util';\nimport { sliceElements, getCellByColAndRowIndex } from '../base/util';\nimport { getGridRowObjects } from '../base/util';\nimport * as events from '../base/constant';\nimport { RowRenderer } from '../renderer/row-renderer';\nimport { CellRenderer } from '../renderer/cell-renderer';\nimport { Row } from '../models/row';\nimport { Cell } from '../models/cell';\nimport { RowModelGenerator } from '../services/row-model-generator';\nimport { DataUtil } from '@syncfusion/ej2-data';\nimport * as literals from '../base/string-literals';\n/**\n * `BatchEdit` module is used to handle batch editing actions.\n *\n * @hidden\n */\nvar BatchEdit = /** @class */ (function () {\n function BatchEdit(parent, serviceLocator, renderer) {\n this.cellDetails = {};\n this.originalCell = {};\n this.cloneCell = {};\n this.editNext = false;\n this.preventSaveCell = false;\n this.initialRender = true;\n this.validationColObj = [];\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.renderer = renderer;\n this.focus = serviceLocator.getService('focus');\n this.addEventListener();\n }\n /**\n * @returns {void}\n * @hidden\n */\n BatchEdit.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.evtHandlers = [{ event: events.click, handler: this.clickHandler },\n { event: events.dblclick, handler: this.dblClickHandler },\n { event: events.beforeCellFocused, handler: this.onBeforeCellFocused },\n { event: events.cellFocused, handler: this.onCellFocused },\n { event: events.doubleTap, handler: this.dblClickHandler },\n { event: events.keyPressed, handler: this.keyDownHandler },\n { event: events.editNextValCell, handler: this.editNextValCell },\n { event: events.closeBatch, handler: this.closeForm },\n { event: events.destroy, handler: this.destroy }];\n addRemoveEventListener(this.parent, this.evtHandlers, true, this);\n this.dataBoundFunction = this.dataBound.bind(this);\n this.batchCancelFunction = this.batchCancel.bind(this);\n this.parent.addEventListener(events.dataBound, this.dataBoundFunction);\n this.parent.addEventListener(events.batchCancel, this.batchCancelFunction);\n };\n /**\n * @returns {void}\n * @hidden\n */\n BatchEdit.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n addRemoveEventListener(this.parent, this.evtHandlers, false);\n this.parent.removeEventListener(events.dataBound, this.dataBoundFunction);\n this.parent.removeEventListener(events.batchCancel, this.batchCancelFunction);\n };\n BatchEdit.prototype.batchCancel = function () {\n this.parent.focusModule.restoreFocus();\n };\n BatchEdit.prototype.dataBound = function () {\n this.parent.notify(events.toolbarRefresh, {});\n };\n /**\n * @returns {void}\n * @hidden\n */\n BatchEdit.prototype.destroy = function () {\n this.removeEventListener();\n };\n BatchEdit.prototype.clickHandler = function (e) {\n if (!parentsUntil(e.target, this.parent.element.id + '_add', true)) {\n if (this.parent.isEdit && closest(this.form, 'td') !== closest(e.target, 'td')) {\n this.saveCell();\n this.editNextValCell();\n }\n if (parentsUntil(e.target, literals.rowCell) && !this.parent.isEdit) {\n this.setCellIdx(e.target);\n }\n }\n };\n BatchEdit.prototype.dblClickHandler = function (e) {\n var target = parentsUntil(e.target, literals.rowCell);\n var tr = parentsUntil(e.target, literals.row);\n var rowIndex = tr && parseInt(tr.getAttribute(literals.dataRowIndex), 10);\n var colIndex = target && parseInt(target.getAttribute(literals.dataColIndex), 10);\n if (!isNullOrUndefined(target) && !isNullOrUndefined(rowIndex) && !isNaN(colIndex)\n && !target.parentElement.classList.contains(literals.editedRow)) {\n this.editCell(rowIndex, this.parent.getColumns()[colIndex].field, this.isAddRow(rowIndex));\n }\n };\n BatchEdit.prototype.onBeforeCellFocused = function (e) {\n if (this.parent.isEdit && this.validateFormObj() &&\n (e.byClick || (['tab', 'shiftTab', 'enter', 'shiftEnter'].indexOf(e.keyArgs.action) > -1))) {\n e.cancel = true;\n if (e.byClick) {\n e.clickArgs.preventDefault();\n }\n else {\n e.keyArgs.preventDefault();\n }\n }\n };\n BatchEdit.prototype.onCellFocused = function (e) {\n var frzCols = this.parent.getFrozenLeftCount();\n var frzRightCols = this.parent.getFrozenRightColumnsCount();\n var mCont = this.parent.getContent().querySelector('.' + literals.movableContent);\n var mHdr = this.parent.getHeaderContent().querySelector('.' + literals.movableHeader);\n var clear = (!e.container.isContent || !e.container.isDataCell) && !(this.parent.frozenRows && e.container.isHeader);\n if (!e.byKey || clear || (this.parent.isFrozenGrid() && e.element && closest(e.element, '.e-gridheader')\n && !e.element.parentElement.hasAttribute('data-rowindex'))) {\n if (this.parent.isEdit && clear) {\n this.saveCell();\n }\n return;\n }\n var _a = e.container.indexes, rowIndex = _a[0], cellIndex = _a[1];\n if (frzCols && (mCont.contains(e.element) || (this.parent.frozenRows && mHdr.contains(e.element)))) {\n cellIndex += frzCols;\n }\n if (frzRightCols) {\n var frHdr = this.parent.getHeaderContent().querySelector('.e-frozen-right-header');\n var frCont = this.parent.getContent().querySelector('.e-frozen-right-content');\n if (frCont.contains(e.element) || (this.parent.frozenRows && frHdr.contains(e.element))) {\n cellIndex += (frzCols + this.parent.getMovableColumnsCount());\n }\n }\n if (this.parent.frozenRows && e.container.isContent) {\n rowIndex += this.parent.frozenRows;\n }\n var isEdit = this.parent.isEdit;\n if (!this.parent.element.getElementsByClassName('e-popup-open').length) {\n isEdit = isEdit && !this.validateFormObj();\n switch (e.keyArgs.action) {\n case 'tab':\n case 'shiftTab':\n // eslint-disable-next-line no-case-declarations\n var indent = this.parent.isRowDragable() && this.parent.isDetail() ? 2 :\n this.parent.isRowDragable() || this.parent.isDetail() ? 1 : 0;\n // eslint-disable-next-line no-case-declarations\n var col = this.parent.getColumns()[cellIndex - indent];\n if (col && !this.parent.isEdit) {\n this.editCell(rowIndex, col.field);\n }\n if (isEdit || this.parent.isLastCellPrimaryKey) {\n this.editCellFromIndex(rowIndex, cellIndex);\n }\n break;\n case 'enter':\n case 'shiftEnter':\n e.keyArgs.preventDefault();\n // eslint-disable-next-line no-case-declarations\n var args = { cancel: false, keyArgs: e.keyArgs };\n this.parent.notify('beforeFocusCellEdit', args);\n if (!args.cancel && isEdit) {\n this.editCell(rowIndex, this.cellDetails.column.field);\n }\n break;\n case 'f2':\n this.editCellFromIndex(rowIndex, cellIndex);\n this.focus.focus();\n break;\n }\n }\n };\n BatchEdit.prototype.isAddRow = function (index) {\n return this.parent.getDataRows()[index].classList.contains('e-insertedrow');\n };\n BatchEdit.prototype.editCellFromIndex = function (rowIdx, cellIdx) {\n this.cellDetails.rowIndex = rowIdx;\n this.cellDetails.cellIndex = cellIdx;\n this.editCell(rowIdx, this.parent.getColumns()[cellIdx].field, this.isAddRow(rowIdx));\n };\n BatchEdit.prototype.closeEdit = function () {\n var _this = this;\n var gObj = this.parent;\n var rows = this.parent.getRowsObject();\n var argument = { cancel: false, batchChanges: this.getBatchChanges() };\n gObj.notify(events.beforeBatchCancel, argument);\n if (argument.cancel) {\n return;\n }\n if (gObj.isEdit) {\n this.saveCell(true);\n }\n this.isAdded = false;\n gObj.clearSelection();\n var allRows = getGridRowObjects(this.parent);\n var _loop_1 = function (i) {\n var isInsert = false;\n var isDirty = rows[i].isDirty;\n gridActionHandler(this_1.parent, function (tableName, rows) {\n isInsert = _this.removeBatchElementChanges(rows[i], isDirty);\n if (isInsert) {\n rows.splice(i, 1);\n }\n }, allRows);\n if (isInsert) {\n i--;\n }\n out_i_1 = i;\n };\n var this_1 = this, out_i_1;\n for (var i = 0; i < rows.length; i++) {\n _loop_1(i);\n i = out_i_1;\n }\n if (!gObj.getContentTable().querySelector('tr.e-row')) {\n gObj.renderModule.renderEmptyRow();\n }\n var args = {\n requestType: 'batchCancel', rows: this.parent.getRowsObject()\n };\n if (!this.parent.isFrozenGrid()) {\n gObj.notify(events.batchCancel, {\n rows: this.parent.getRowsObject().length ? this.parent.getRowsObject() :\n [new Row({ isDataRow: true, cells: [new Cell({ isDataCell: true, visible: true })] })]\n });\n }\n else {\n if (this.parent.getRowsObject().length) {\n gObj.notify(events.batchCancel, { rows: this.parent.getRowsObject(),\n args: { isFrozen: true } });\n }\n if (this.parent.getMovableRowsObject().length) {\n gObj.notify(events.batchCancel, { rows: this.parent.getMovableRowsObject() });\n }\n if (this.parent.getFrozenRightRowsObject().length) {\n gObj.notify(events.batchCancel, { rows: this.parent.getFrozenRightRowsObject(),\n args: { renderFrozenRightContent: true } });\n }\n }\n gObj.selectRow(this.cellDetails.rowIndex);\n this.refreshRowIdx();\n gObj.notify(events.toolbarRefresh, {});\n this.parent.notify(events.tooltipDestroy, {});\n args = { requestType: 'batchCancel', rows: this.parent.getRowsObject() };\n gObj.trigger(events.batchCancel, args);\n };\n BatchEdit.prototype.removeBatchElementChanges = function (row, isDirty) {\n var gObj = this.parent;\n var rowRenderer = new RowRenderer(this.serviceLocator, null, this.parent);\n var isInstertedRemoved = false;\n if (isDirty) {\n row.isDirty = isDirty;\n var tr = gObj.getRowElementByUID(row.uid);\n if (tr) {\n if (tr.classList.contains('e-insertedrow')) {\n remove(tr);\n isInstertedRemoved = true;\n }\n else {\n refreshForeignData(row, this.parent.getForeignKeyColumns(), row.data);\n delete row.changes;\n delete row.edit;\n row.isDirty = false;\n classList(tr, [], ['e-hiddenrow', 'e-updatedtd']);\n rowRenderer.refresh(row, gObj.getColumns(), false);\n }\n if (this.parent.aggregates.length > 0) {\n var type = 'type';\n var editType = [];\n editType[type] = 'cancel';\n this.parent.notify(events.refreshFooterRenderer, editType);\n if (this.parent.groupSettings.columns.length > 0) {\n this.parent.notify(events.groupAggregates, editType);\n }\n }\n }\n }\n return isInstertedRemoved;\n };\n BatchEdit.prototype.removeHideAndSelection = function (tr) {\n if (tr.classList.contains('e-hiddenrow')) {\n tr.removeAttribute('aria-selected');\n var tdElements = [].slice.call(tr.getElementsByClassName('e-selectionbackground'));\n for (var i = 0; i < tdElements.length; i++) {\n removeClass([tdElements[i]], ['e-selectionbackground', 'e-active']);\n }\n }\n classList(tr, [], ['e-hiddenrow', 'e-updatedtd']);\n };\n BatchEdit.prototype.deleteRecord = function (fieldname, data) {\n this.saveCell();\n if (this.validateFormObj()) {\n this.saveCell(true);\n }\n this.isAdded = false;\n this.bulkDelete(fieldname, data);\n if (this.parent.aggregates.length > 0) {\n this.parent.notify(events.refreshFooterRenderer, {});\n if (this.parent.groupSettings.columns.length > 0) {\n this.parent.notify(events.groupAggregates, {});\n }\n }\n };\n BatchEdit.prototype.addRecord = function (data) {\n this.bulkAddRow(data);\n };\n BatchEdit.prototype.endEdit = function () {\n if (this.parent.isEdit && this.validateFormObj()) {\n return;\n }\n this.batchSave();\n };\n BatchEdit.prototype.closeForm = function () {\n for (var i = 0; i < Object.keys(this.originalCell).length; i++) {\n for (var j = 0; j < Object.keys(this.cloneCell).length; j++) {\n if (Object.keys(this.originalCell)[i] === Object.keys(this.cloneCell)[j]) {\n this.cloneCell[Object.keys(this.cloneCell)[j]].replaceWith(this.originalCell[Object.keys(this.originalCell)[i]]);\n if (this.originalCell[Object.keys(this.originalCell)[i]].classList.contains('e-selectionbackground')) {\n this.originalCell[Object.keys(this.originalCell)[i]]\n .classList.remove('e-selectionbackground', 'e-cellselectionbackground', 'e-active');\n }\n }\n }\n }\n this.cloneCell = {};\n this.originalCell = {};\n };\n BatchEdit.prototype.validateFormObj = function () {\n return this.parent.editModule.formObj && !this.parent.editModule.formObj.validate();\n };\n BatchEdit.prototype.batchSave = function () {\n var gObj = this.parent;\n var deletedRecords = 'deletedRecords';\n if (gObj.isCheckBoxSelection) {\n var checkAllBox = gObj.element.querySelector('.e-checkselectall').parentElement;\n if (checkAllBox.classList.contains('e-checkbox-disabled') &&\n gObj.pageSettings.totalRecordsCount > gObj.currentViewData.length) {\n removeClass([checkAllBox], ['e-checkbox-disabled']);\n }\n }\n this.saveCell();\n if (gObj.isEdit || this.editNextValCell() || gObj.isEdit) {\n return;\n }\n var changes = this.getBatchChanges();\n if (this.parent.selectionSettings.type === 'Multiple' && changes[deletedRecords].length &&\n this.parent.selectionSettings.persistSelection) {\n changes[deletedRecords] = this.removeSelectedData;\n this.removeSelectedData = [];\n }\n var original = {\n changedRecords: this.parent.getRowsObject()\n .filter(function (row) { return row.isDirty && ['add', 'delete'].indexOf(row.edit) === -1; })\n .map(function (row) { return row.data; })\n };\n var args = { batchChanges: changes, cancel: false };\n gObj.trigger(events.beforeBatchSave, args, function (beforeBatchSaveArgs) {\n if (beforeBatchSaveArgs.cancel) {\n return;\n }\n gObj.showSpinner();\n gObj.notify(events.bulkSave, { changes: changes, original: original });\n });\n };\n BatchEdit.prototype.getBatchChanges = function () {\n var changes = {\n addedRecords: [],\n deletedRecords: [],\n changedRecords: []\n };\n var rows = this.parent.getRowsObject();\n for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {\n var row = rows_1[_i];\n if (row.isDirty) {\n switch (row.edit) {\n case 'add':\n changes.addedRecords.push(row.changes);\n break;\n case 'delete':\n changes.deletedRecords.push(row.data);\n break;\n default:\n changes.changedRecords.push(row.changes);\n }\n }\n }\n return changes;\n };\n /**\n * @param {string} uid - specifes the uid\n * @returns {void}\n * @hidden\n */\n BatchEdit.prototype.removeRowObjectFromUID = function (uid) {\n var rows = this.parent.getRowsObject();\n var i = 0;\n for (var len = rows.length; i < len; i++) {\n if (rows[i].uid === uid) {\n break;\n }\n }\n gridActionHandler(this.parent, function (tableName, rows) {\n rows.splice(i, 1);\n }, getGridRowObjects(this.parent));\n };\n /**\n * @param {Row
} row - specifies the row object\n * @param {freezeTable} newTableName - specifies the table name\n * @returns {void}\n * @hidden\n */\n BatchEdit.prototype.addRowObject = function (row, newTableName) {\n var gObj = this.parent;\n var isTop = gObj.editSettings.newRowPosition === 'Top';\n gridActionHandler(this.parent, function (tableName, rows) {\n var rowClone = row.clone();\n if (gObj.isFrozenGrid()) {\n if (newTableName === tableName) {\n if (isTop) {\n rows.unshift(rowClone);\n }\n else {\n rows.push(rowClone);\n }\n }\n }\n else {\n if (isTop) {\n rows.unshift(rowClone);\n }\n else {\n rows.push(rowClone);\n }\n }\n }, getGridRowObjects(this.parent), true);\n };\n // tslint:disable-next-line:max-func-body-length\n BatchEdit.prototype.bulkDelete = function (fieldname, data) {\n var _this = this;\n this.removeSelectedData = [];\n var gObj = this.parent;\n var index = gObj.selectedRowIndex;\n var selectedRows = gObj.getSelectedRows();\n var args = {\n primaryKey: this.parent.getPrimaryKeyFieldNames(),\n rowIndex: index,\n rowData: data ? data : gObj.getSelectedRecords()[0],\n cancel: false\n };\n if (data) {\n args.row = gObj.editModule.deleteRowUid ? gObj.getRowElementByUID(gObj.editModule.deleteRowUid)\n : gObj.getRows()[gObj.getCurrentViewRecords().indexOf(data)];\n }\n else {\n args.row = data ? gObj.getRows()[index] : selectedRows[0];\n }\n if (!args.row) {\n return;\n }\n // tslint:disable-next-line:max-func-body-length\n gObj.trigger(events.beforeBatchDelete, args, function (beforeBatchDeleteArgs) {\n if (beforeBatchDeleteArgs.cancel) {\n return;\n }\n _this.removeSelectedData = gObj.getSelectedRecords();\n gObj.clearSelection();\n beforeBatchDeleteArgs.row = beforeBatchDeleteArgs.row ?\n beforeBatchDeleteArgs.row : data ? gObj.getRows()[index] : selectedRows[0];\n if (_this.parent.isFrozenGrid()) {\n if (data) {\n index = parseInt(beforeBatchDeleteArgs.row.getAttribute(literals.dataRowIndex), 10);\n selectedRows = [];\n selectedRows.push(gObj.getRowByIndex(index));\n selectedRows.push(gObj.getMovableRowByIndex(index));\n if (gObj.getFrozenMode() === literals.leftRight) {\n selectedRows.push(gObj.getFrozenRightRowByIndex(index));\n }\n }\n for (var i = 0; i < selectedRows.length; i++) {\n var uid = selectedRows[i].getAttribute('data-uid');\n if (selectedRows[i].classList.contains('e-insertedrow')) {\n _this.removeRowObjectFromUID(uid);\n remove(selectedRows[i]);\n }\n else {\n var rowObj = gObj.getRowObjectFromUID(uid);\n rowObj.isDirty = true;\n rowObj.edit = 'delete';\n classList(selectedRows[i], ['e-hiddenrow', 'e-updatedtd'], []);\n if (gObj.frozenRows && index < gObj.frozenRows && gObj.getMovableDataRows().length >= gObj.frozenRows) {\n gObj.getMovableHeaderTbody().appendChild(gObj.getMovableRowByIndex(gObj.frozenRows - 1));\n gObj.getFrozenHeaderTbody().appendChild(gObj.getRowByIndex(gObj.frozenRows - 1));\n if (gObj.getFrozenMode() === literals.leftRight) {\n gObj.getFrozenRightHeaderTbody().appendChild(gObj.getFrozenRightRowByIndex(gObj.frozenRows - 1));\n }\n }\n if (gObj.frozenRows && index < gObj.frozenRows && gObj.getDataRows().length >= gObj.frozenRows) {\n gObj.getHeaderTable().querySelector(literals.tbody).appendChild(gObj.getRowByIndex(gObj.frozenRows - 1));\n }\n }\n delete selectedRows[i];\n }\n }\n else if (!_this.parent.isFrozenGrid() && (selectedRows.length === 1 || data)) {\n var uid = beforeBatchDeleteArgs.row.getAttribute('data-uid');\n uid = data && _this.parent.editModule.deleteRowUid ? uid = _this.parent.editModule.deleteRowUid : uid;\n if (beforeBatchDeleteArgs.row.classList.contains('e-insertedrow')) {\n _this.removeRowObjectFromUID(uid);\n remove(beforeBatchDeleteArgs.row);\n }\n else {\n var rowObj = gObj.getRowObjectFromUID(uid);\n rowObj.isDirty = true;\n rowObj.edit = 'delete';\n classList(beforeBatchDeleteArgs.row, ['e-hiddenrow', 'e-updatedtd'], []);\n }\n delete beforeBatchDeleteArgs.row;\n }\n else {\n for (var i = 0; i < selectedRows.length; i++) {\n var uniqueid = selectedRows[i].getAttribute('data-uid');\n if (selectedRows[i].classList.contains('e-insertedrow')) {\n _this.removeRowObjectFromUID(uniqueid);\n remove(selectedRows[i]);\n }\n else {\n classList(selectedRows[i], ['e-hiddenrow', 'e-updatedtd'], []);\n var selectedRow = gObj.getRowObjectFromUID(uniqueid);\n selectedRow.isDirty = true;\n selectedRow.edit = 'delete';\n delete selectedRows[i];\n }\n }\n }\n _this.refreshRowIdx();\n if (data) {\n gObj.editModule.deleteRowUid = undefined;\n if (gObj.getSelectedRows().length) {\n index = parseInt(gObj.getSelectedRows()[0].getAttribute(literals.dataRowIndex), 10);\n }\n }\n if (!gObj.isCheckBoxSelection) {\n gObj.selectRow(index);\n }\n gObj.trigger(events.batchDelete, beforeBatchDeleteArgs);\n gObj.notify(events.batchDelete, { rows: _this.parent.getRowsObject() });\n gObj.notify(events.toolbarRefresh, {});\n });\n };\n BatchEdit.prototype.refreshRowIdx = function () {\n var gObj = this.parent;\n var rows = gObj.getAllDataRows(true);\n var dataRows = getGridRowElements(this.parent);\n var dataObjects = getGridRowObjects(this.parent);\n var _loop_2 = function (i, j, len) {\n if (rows[i].classList.contains(literals.row) && !rows[i].classList.contains('e-hiddenrow')) {\n gridActionHandler(this_2.parent, function (tableName, rowElements, rowObjects) {\n rowElements[i].setAttribute(literals.dataRowIndex, j.toString());\n rowElements[i].setAttribute(literals.ariaRowIndex, (j + 1).toString());\n rowObjects[i].index = j;\n }, dataRows, null, dataObjects);\n j++;\n }\n else {\n gridActionHandler(this_2.parent, function (tableName, rowElements, rowObjects) {\n rowElements[i].removeAttribute(literals.dataRowIndex);\n rowElements[i].removeAttribute(literals.ariaRowIndex);\n rowObjects[i].index = -1;\n }, dataRows, null, dataObjects);\n }\n out_j_1 = j;\n };\n var this_2 = this, out_j_1;\n for (var i = 0, j = 0, len = rows.length; i < len; i++) {\n _loop_2(i, j, len);\n j = out_j_1;\n }\n };\n BatchEdit.prototype.getIndexFromData = function (data) {\n return inArray(data, this.parent.getCurrentViewRecords());\n };\n BatchEdit.prototype.bulkAddRow = function (data) {\n var _this = this;\n var gObj = this.parent;\n if (!gObj.editSettings.allowAdding) {\n return;\n }\n if (gObj.isEdit) {\n this.saveCell();\n this.parent.notify(events.editNextValCell, {});\n }\n if (gObj.isEdit) {\n return;\n }\n if (this.initialRender) {\n var visibleColumns = gObj.getVisibleColumns();\n for (var i = 0; i < visibleColumns.length; i++) {\n if (visibleColumns[i].validationRules &&\n visibleColumns[i].validationRules['required']) {\n var obj = { field: (visibleColumns[i]['field']).slice(), cellIdx: i };\n this.validationColObj.push(obj);\n }\n }\n this.initialRender = false;\n }\n this.parent.element.classList.add('e-editing');\n var defaultData = data ? data : this.getDefaultData();\n var args = {\n defaultData: defaultData,\n primaryKey: gObj.getPrimaryKeyFieldNames(),\n cancel: false\n };\n gObj.trigger(events.beforeBatchAdd, args, function (beforeBatchAddArgs) {\n if (beforeBatchAddArgs.cancel) {\n return;\n }\n _this.isAdded = true;\n gObj.clearSelection();\n if (gObj.isFrozenGrid()) {\n var movableCnt = _this.parent.getMovableColumnsCount();\n var leftCnt = _this.parent.getFrozenLeftCount();\n var rightCnt = _this.parent.getFrozenRightColumnsCount();\n var tbody$$1 = gObj.getContentTable().querySelector(literals.tbody);\n var totCount = movableCnt + leftCnt + rightCnt;\n var tableTanName = void 0;\n var selectedRowAdd = [];\n var selectedRowAddCells = [];\n var col = void 0;\n var index = void 0;\n var tr = void 0;\n var mTr = void 0;\n var frTr = void 0;\n for (var i = 0; i < totCount;) {\n var row = new RowRenderer(_this.serviceLocator, null, _this.parent);\n var model = new RowModelGenerator(_this.parent);\n var modelData = model.generateRows([beforeBatchAddArgs.defaultData]);\n if (leftCnt > 0) {\n leftCnt = 0;\n tableTanName = 'frozen-left';\n totCount = leftCnt + rightCnt + movableCnt;\n }\n else if (movableCnt > 0) {\n movableCnt = 0;\n tableTanName = 'movable';\n totCount = leftCnt + rightCnt + movableCnt;\n }\n else {\n rightCnt = 0;\n tableTanName = 'frozen-right';\n totCount = leftCnt + rightCnt + movableCnt;\n }\n for (var i_1 = 0; i_1 < modelData.length; i_1++) {\n modelData[i_1].cells = splitFrozenRowObjectCells(_this.parent, modelData[i_1].cells, tableTanName);\n }\n if (tableTanName === 'frozen-left') {\n tr = row.render(modelData[0], gObj.getColumns());\n tr.classList.add('e-insertedrow');\n }\n else if (tableTanName === 'movable') {\n mTr = row.render(modelData[0], gObj.getColumns());\n mTr.classList.add('e-insertedrow');\n }\n else {\n frTr = row.render(modelData[0], gObj.getColumns());\n frTr.classList.add('e-insertedrow');\n }\n for (var i_2 = 0; i_2 < _this.parent.groupSettings.columns.length; i_2++) {\n tr.insertBefore(_this.parent.createElement('td', { className: 'e-indentcell' }), tr.firstChild);\n modelData[0].cells.unshift(new Cell({ cellType: CellType.Indent }));\n }\n if (tbody$$1.querySelector('.e-emptyrow')) {\n var emptyRow = tbody$$1.querySelector('.e-emptyrow');\n emptyRow.parentNode.removeChild(emptyRow);\n _this.removeFrozenTbody();\n }\n if (tableTanName === 'frozen-left') {\n if (gObj.frozenRows && gObj.editSettings.newRowPosition === 'Top') {\n tbody$$1 = gObj.getHeaderTable().querySelector(literals.tbody);\n }\n else {\n tbody$$1 = gObj.getContentTable().querySelector(literals.tbody);\n }\n if (_this.parent.editSettings.newRowPosition === 'Top') {\n tbody$$1.insertBefore(tr, tbody$$1.firstChild);\n addClass([].slice.call(tr.getElementsByClassName(literals.rowCell)), ['e-updatedtd']);\n }\n else {\n tbody$$1.appendChild(tr);\n addClass([].slice.call(tr.getElementsByClassName(literals.rowCell)), ['e-updatedtd']);\n }\n }\n if (tableTanName === 'movable' || tableTanName === 'frozen-right') {\n _this.renderFrozenAddRow(mTr, frTr, tableTanName);\n }\n modelData[0].isDirty = true;\n modelData[0].changes = extend({}, {}, modelData[0].data, true);\n modelData[0].edit = 'add';\n _this.addRowObject(modelData[0], tableTanName);\n }\n _this.refreshRowIdx();\n _this.focus.forgetPrevious();\n gObj.notify(events.batchAdd, { rows: _this.parent.getRowsObject(), args: { isFrozen: _this.parent.isFrozenGrid() } });\n var changes = _this.getBatchChanges();\n var btmIdx = _this.getBottomIndex();\n if (_this.parent.editSettings.newRowPosition === 'Top') {\n gObj.selectRow(0);\n }\n else {\n gObj.selectRow(btmIdx);\n }\n if (!data) {\n index = _this.findNextEditableCell(0, true);\n col = gObj.getColumns()[index];\n if (_this.parent.editSettings.newRowPosition === 'Top') {\n _this.editCell(0, col.field, true);\n }\n else {\n _this.editCell(btmIdx, col.field, true);\n }\n }\n if (_this.parent.aggregates.length > 0 && (data || changes[literals.addedRecords].length)) {\n _this.parent.notify(events.refreshFooterRenderer, {});\n }\n if (tr) {\n alignFrozenEditForm(mTr.querySelector('td:not(.e-hide)'), tr.querySelector('td:not(.e-hide)'));\n selectedRowAdd.push(tr);\n selectedRowAddCells.push(tr.cells);\n }\n selectedRowAdd.push(mTr);\n selectedRowAddCells.push(mTr.cells);\n if (frTr) {\n selectedRowAdd.push(frTr);\n selectedRowAddCells.push(frTr.cells);\n }\n var args1 = {\n defaultData: beforeBatchAddArgs.defaultData, row: selectedRowAdd,\n columnObject: col, columnIndex: index, primaryKey: beforeBatchAddArgs.primaryKey, cell: selectedRowAddCells\n };\n gObj.trigger(events.batchAdd, args1);\n }\n else {\n var row = new RowRenderer(_this.serviceLocator, null, _this.parent);\n var model = new RowModelGenerator(_this.parent);\n var modelData = model.generateRows([beforeBatchAddArgs.defaultData]);\n var tr = row.render(modelData[0], gObj.getColumns());\n var col = void 0;\n var index = void 0;\n for (var i = 0; i < _this.parent.groupSettings.columns.length; i++) {\n tr.insertBefore(_this.parent.createElement('td', { className: 'e-indentcell' }), tr.firstChild);\n modelData[0].cells.unshift(new Cell({ cellType: CellType.Indent }));\n }\n var tbody = gObj.getContentTable().querySelector(literals.tbody);\n tr.classList.add('e-insertedrow');\n if (tbody.querySelector('.e-emptyrow')) {\n var emptyRow = tbody.querySelector('.e-emptyrow');\n emptyRow.parentNode.removeChild(emptyRow);\n _this.removeFrozenTbody();\n }\n if (gObj.frozenRows && gObj.editSettings.newRowPosition === 'Top') {\n tbody = gObj.getHeaderTable().querySelector(literals.tbody);\n }\n else {\n tbody = gObj.getContentTable().querySelector(literals.tbody);\n }\n if (_this.parent.editSettings.newRowPosition === 'Top') {\n tbody.insertBefore(tr, tbody.firstChild);\n }\n else {\n tbody.appendChild(tr);\n }\n addClass([].slice.call(tr.getElementsByClassName(literals.rowCell)), ['e-updatedtd']);\n modelData[0].isDirty = true;\n modelData[0].changes = extend({}, {}, modelData[0].data, true);\n modelData[0].edit = 'add';\n _this.addRowObject(modelData[0]);\n _this.refreshRowIdx();\n _this.focus.forgetPrevious();\n gObj.notify(events.batchAdd, { rows: _this.parent.getRowsObject(), args: { isFrozen: _this.parent.isFrozenGrid() } });\n var changes = _this.getBatchChanges();\n var btmIdx = _this.getBottomIndex();\n if (_this.parent.editSettings.newRowPosition === 'Top') {\n gObj.selectRow(0);\n }\n else {\n gObj.selectRow(btmIdx);\n }\n if (!data) {\n index = _this.findNextEditableCell(0, true);\n col = gObj.getColumns()[index];\n if (_this.parent.editSettings.newRowPosition === 'Top') {\n _this.editCell(0, col.field, true);\n }\n else {\n _this.editCell(btmIdx, col.field, true);\n }\n }\n if (_this.parent.aggregates.length > 0 && (data || changes[literals.addedRecords].length)) {\n _this.parent.notify(events.refreshFooterRenderer, {});\n }\n var args1 = {\n defaultData: beforeBatchAddArgs.defaultData, row: tr,\n columnObject: col, columnIndex: index, primaryKey: beforeBatchAddArgs.primaryKey, cell: tr.cells[index]\n };\n gObj.trigger(events.batchAdd, args1);\n }\n });\n };\n BatchEdit.prototype.renderFrozenAddRow = function (mTr, frTr, tableName$$1) {\n var gObj = this.parent;\n var mTbody;\n var frTbody;\n if (tableName$$1 === 'movable') {\n if (gObj.frozenRows && gObj.editSettings.newRowPosition === 'Top') {\n mTbody = this.parent.getMovableHeaderTbody();\n }\n else {\n mTbody = this.parent.getContent().querySelector('.e-movablecontent').querySelector(literals.tbody);\n }\n if (gObj.editSettings.newRowPosition === 'Top') {\n mTbody.insertBefore(mTr, mTbody.firstChild);\n }\n else {\n mTbody.appendChild(mTr);\n }\n addClass([].slice.call(mTr.getElementsByClassName(literals.rowCell)), ['e-updatedtd']);\n }\n if (tableName$$1 === 'frozen-right') {\n if (gObj.frozenRows && gObj.editSettings.newRowPosition === 'Top') {\n frTbody = this.parent.getFrozenRightHeaderTbody();\n }\n else {\n frTbody = this.parent.getContent().querySelector('.e-frozen-right-content').querySelector(literals.tbody);\n }\n if (gObj.editSettings.newRowPosition === 'Top') {\n frTbody.insertBefore(frTr, frTbody.firstChild);\n }\n else {\n frTbody.appendChild(frTr);\n }\n addClass([].slice.call(frTr.getElementsByClassName(literals.rowCell)), ['e-updatedtd']);\n alignFrozenEditForm(frTr.querySelector('td:not(.e-hide)'), mTr.querySelector('td:not(.e-hide)'));\n }\n if (gObj.height === 'auto') {\n gObj.notify(events.frozenHeight, {});\n }\n };\n BatchEdit.prototype.removeFrozenTbody = function () {\n var gObj = this.parent;\n if (gObj.isFrozenGrid()) {\n var moveTbody = gObj.getContent().querySelector('.' + literals.movableContent).querySelector(literals.tbody);\n (moveTbody.firstElementChild).parentNode.removeChild(moveTbody.firstElementChild);\n if (gObj.getFrozenMode() === literals.leftRight) {\n var frTbody = gObj.getContent().querySelector('.e-frozen-right-content').querySelector(literals.tbody);\n (frTbody.firstElementChild).parentNode.removeChild(frTbody.firstElementChild);\n }\n }\n };\n BatchEdit.prototype.renderMovable = function (ele, rightEle) {\n var mEle = ele.cloneNode(true);\n var movable = this.parent.getMovableColumnsCount();\n var left = this.parent.getFrozenLeftCount();\n var right = this.parent.getFrozenRightColumnsCount();\n sliceElements(ele, 0, left);\n sliceElements(mEle, left, right ? mEle.children.length - right : mEle.children.length);\n sliceElements(rightEle, left + movable, rightEle.children.length);\n return mEle;\n };\n BatchEdit.prototype.findNextEditableCell = function (columnIndex, isAdd, isValOnly) {\n var cols = this.parent.getColumns();\n var endIndex = cols.length;\n var validation;\n for (var i = columnIndex; i < endIndex; i++) {\n validation = isValOnly ? isNullOrUndefined(cols[i].validationRules) : false;\n if (!isAdd && this.checkNPCell(cols[i])) {\n return i;\n }\n else if (isAdd && (!cols[i].template || cols[i].field) && cols[i].visible && cols[i].allowEditing &&\n !(cols[i].isIdentity && cols[i].isPrimaryKey) && !validation) {\n return i;\n }\n }\n return -1;\n };\n BatchEdit.prototype.checkNPCell = function (col) {\n return !col.template && col.visible && !col.isPrimaryKey && !col.isIdentity && col.allowEditing;\n };\n BatchEdit.prototype.getDefaultData = function () {\n var gObj = this.parent;\n var data = {};\n var dValues = { 'number': 0, 'string': null, 'boolean': false, 'date': null, 'datetime': null };\n for (var _i = 0, _a = (gObj.columnModel); _i < _a.length; _i++) {\n var col = _a[_i];\n if (col.field) {\n setValue(col.field, Object.keys(col).indexOf('defaultValue') >= 0 ? col.defaultValue : dValues[col.type], data);\n }\n }\n return data;\n };\n BatchEdit.prototype.setCellIdx = function (target) {\n var gLen = 0;\n if (this.parent.allowGrouping) {\n gLen = this.parent.groupSettings.columns.length;\n }\n this.cellDetails.cellIndex = target.cellIndex - gLen;\n this.cellDetails.rowIndex = parseInt(target.getAttribute('index'), 10);\n };\n BatchEdit.prototype.editCell = function (index, field, isAdd) {\n var gObj = this.parent;\n var col = gObj.getColumnByField(field);\n this.index = index;\n this.field = field;\n this.isAdd = isAdd;\n var checkEdit = gObj.isEdit && !(this.cellDetails.column.field === field\n && (this.cellDetails.rowIndex === index && this.parent.getDataRows().length - 1 !== index));\n if (gObj.editSettings.allowEditing) {\n if (!checkEdit && col.allowEditing) {\n this.editCellExtend(index, field, isAdd);\n }\n else if (checkEdit) {\n this.editNext = true;\n this.saveCell();\n }\n }\n };\n BatchEdit.prototype.editCellExtend = function (index, field, isAdd) {\n var _this = this;\n var gObj = this.parent;\n var col = gObj.getColumnByField(field);\n var keys = gObj.getPrimaryKeyFieldNames();\n if (gObj.isEdit) {\n return;\n }\n var row;\n var mRowData;\n var rowData = extend({}, {}, this.getDataByIndex(index), true);\n if (col.getFreezeTableName() === 'movable' || col.getFreezeTableName() === literals.frozenRight) {\n row = col.getFreezeTableName() === 'movable' ? gObj.getMovableDataRows()[index] : gObj.getFrozenRightDataRows()[index];\n mRowData = this.parent.getRowObjectFromUID(row.getAttribute('data-uid'));\n rowData = mRowData.changes ? extend({}, {}, mRowData.changes, true) : rowData;\n }\n else {\n row = gObj.getDataRows()[index];\n rowData = extend({}, {}, this.getDataByIndex(index), true);\n }\n if ((keys[0] === col.field && !row.classList.contains('e-insertedrow')) || col.columns ||\n (col.isPrimaryKey && col.isIdentity) || col.commands) {\n this.parent.isLastCellPrimaryKey = true;\n return;\n }\n this.parent.isLastCellPrimaryKey = false;\n this.parent.element.classList.add('e-editing');\n var rowObj = gObj.getRowObjectFromUID(row.getAttribute('data-uid'));\n var cells = [].slice.apply(row.cells);\n var args = {\n columnName: col.field, isForeignKey: !isNullOrUndefined(col.foreignKeyValue),\n primaryKey: keys, rowData: rowData,\n validationRules: extend({}, col.validationRules ? col.validationRules : {}),\n value: getObject(col.field, rowData),\n type: !isAdd ? 'edit' : 'add', cancel: false,\n foreignKeyData: rowObj && rowObj.foreignKeyData\n };\n args.cell = cells[this.getColIndex(cells, this.getCellIdx(col.uid))];\n args.row = row;\n args.columnObject = col;\n if (!args.cell) {\n return;\n }\n gObj.trigger(events.cellEdit, args, function (cellEditArgs) {\n if (cellEditArgs.cancel) {\n return;\n }\n cellEditArgs.cell = cellEditArgs.cell ? cellEditArgs.cell : cells[_this.getColIndex(cells, _this.getCellIdx(col.uid))];\n cellEditArgs.row = cellEditArgs.row ? cellEditArgs.row : row;\n cellEditArgs.columnObject = cellEditArgs.columnObject ? cellEditArgs.columnObject : col;\n cellEditArgs.columnObject.index = isNullOrUndefined(cellEditArgs.columnObject.index) ? 0 : cellEditArgs.columnObject.index;\n _this.cellDetails = {\n rowData: rowData, column: col, value: cellEditArgs.value, isForeignKey: cellEditArgs.isForeignKey, rowIndex: index,\n cellIndex: parseInt(cellEditArgs.cell.getAttribute(literals.dataColIndex), 10),\n foreignKeyData: cellEditArgs.foreignKeyData\n };\n if (cellEditArgs.cell.classList.contains('e-updatedtd')) {\n _this.isColored = true;\n cellEditArgs.cell.classList.remove('e-updatedtd');\n }\n gObj.isEdit = true;\n gObj.clearSelection();\n if (!gObj.isCheckBoxSelection || !gObj.isPersistSelection) {\n gObj.selectRow(_this.cellDetails.rowIndex, true);\n }\n _this.renderer.update(cellEditArgs);\n _this.parent.notify(events.batchEditFormRendered, cellEditArgs);\n _this.form = select('#' + gObj.element.id + 'EditForm', gObj.element);\n gObj.editModule.applyFormValidation([col]);\n _this.parent.element.querySelector('.e-gridpopup').style.display = 'none';\n });\n };\n BatchEdit.prototype.updateCell = function (rowIndex, field, value) {\n var gObj = this.parent;\n var col = gObj.getColumnByField(field);\n var index = gObj.getColumnIndexByField(field);\n if (col && !col.isPrimaryKey && col.allowEditing) {\n var td = getCellByColAndRowIndex(this.parent, col, rowIndex, index);\n var rowObj = col.getFreezeTableName() === 'movable' ? this.parent.getMovableRowsObject()[rowIndex] :\n col.getFreezeTableName() === literals.frozenRight ? gObj.getFrozenRightRowsObject()[rowIndex]\n : gObj.getRowObjectFromUID(td.parentElement.getAttribute('data-uid'));\n this.refreshTD(td, col, rowObj, value);\n this.parent.trigger(events.queryCellInfo, {\n cell: this.newReactTd || td, column: col, data: rowObj.changes\n });\n }\n };\n BatchEdit.prototype.setChanges = function (rowObj, field, value) {\n var currentRowObj;\n if (!this.parent.isFrozenGrid()) {\n if (!rowObj.changes) {\n rowObj.changes = extend({}, {}, rowObj.data, true);\n }\n if (!isNullOrUndefined(field)) {\n DataUtil.setValue(field, value, rowObj.changes);\n }\n if (rowObj.data[field] !== value) {\n var type = this.parent.getColumnByField(field).type;\n if ((type === 'date' || type === 'datetime')) {\n if (new Date(rowObj.data[field]).toString() !== new Date(value).toString()) {\n rowObj.isDirty = true;\n }\n }\n else {\n rowObj.isDirty = true;\n }\n }\n }\n else {\n var rowEle = this.parent.getRowElementByUID(rowObj.uid);\n var rowIndex = parseInt(rowEle.getAttribute(literals.dataRowIndex), 10);\n currentRowObj = this.parent.getRowsObject()[rowIndex];\n if (!currentRowObj.changes) {\n currentRowObj.changes = extend({}, {}, rowObj.data, true);\n }\n if (!isNullOrUndefined(field)) {\n setValue(field, value, currentRowObj.changes);\n }\n var movableRowObject = this.parent.getMovableRowsObject()[rowIndex];\n movableRowObject.changes = extend({}, {}, currentRowObj.changes, true);\n if (rowObj.data[field] !== value) {\n movableRowObject.isDirty = true;\n currentRowObj.isDirty = true;\n }\n if (this.parent.getFrozenMode() === literals.leftRight) {\n var frRowObject = this.parent.getFrozenRightRowsObject()[rowIndex];\n frRowObject.changes = extend({}, {}, currentRowObj.changes, true);\n if (rowObj.data[field] !== value) {\n frRowObject.isDirty = true;\n }\n }\n }\n };\n BatchEdit.prototype.updateRow = function (index, data) {\n var keys = Object.keys(data);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var col = keys_1[_i];\n this.updateCell(index, col, data[col]);\n }\n };\n BatchEdit.prototype.getCellIdx = function (uid) {\n var cIdx = this.parent.getColumnIndexByUid(uid) + this.parent.groupSettings.columns.length;\n if (!isNullOrUndefined(this.parent.detailTemplate) || !isNullOrUndefined(this.parent.childGrid)) {\n cIdx++;\n }\n if (this.parent.isRowDragable()) {\n cIdx++;\n }\n return cIdx;\n };\n BatchEdit.prototype.refreshTD = function (td, column, rowObj, value) {\n var cell = new CellRenderer(this.parent, this.serviceLocator);\n var rowcell;\n value = column.type === 'number' && !isNullOrUndefined(value) ? parseFloat(value) : value;\n this.setChanges(rowObj, column.field, value);\n var frzCols = this.parent.getFrozenColumns() || this.parent.getFrozenLeftColumnsCount()\n || this.parent.getFrozenRightColumnsCount();\n frzCols = frzCols && this.parent.isRowDragable() ? frzCols + 1 : frzCols;\n refreshForeignData(rowObj, this.parent.getForeignKeyColumns(), rowObj.changes);\n if (frzCols && column.getFreezeTableName() === 'movable' && this.parent.getColumns().length === rowObj.cells.length) {\n rowcell = rowObj.cells.slice(frzCols, rowObj.cells.length);\n }\n else {\n rowcell = rowObj.cells;\n }\n var parentElement;\n var cellIndex;\n if (this.parent.isReact) {\n parentElement = td.parentElement;\n cellIndex = td.cellIndex;\n }\n var index = 0;\n if (frzCols) {\n index = column.getFreezeTableName() === 'movable' && this.parent.getFrozenMode() !== 'Right'\n ? frzCols : column.getFreezeTableName() === literals.frozenRight\n ? this.parent.getFrozenLeftColumnsCount() + this.parent.getMovableColumnsCount() : index;\n }\n cell.refreshTD(td, rowcell[this.getCellIdx(column.uid) - index], rowObj.changes, { 'index': this.getCellIdx(column.uid) });\n if (this.parent.isReact) {\n this.newReactTd = parentElement.cells[cellIndex];\n parentElement.cells[cellIndex].classList.add('e-updatedtd');\n }\n else {\n td.classList.add('e-updatedtd');\n }\n td.classList.add('e-updatedtd');\n this.parent.notify(events.toolbarRefresh, {});\n };\n BatchEdit.prototype.getColIndex = function (cells, index) {\n var cIdx = 0;\n if (this.parent.allowGrouping && this.parent.groupSettings.columns) {\n cIdx = this.parent.groupSettings.columns.length;\n }\n if (!isNullOrUndefined(this.parent.detailTemplate) || !isNullOrUndefined(this.parent.childGrid)) {\n cIdx++;\n }\n if (this.parent.isRowDragable()) {\n cIdx++;\n }\n for (var m = 0; m < cells.length; m++) {\n var colIndex = parseInt(cells[m].getAttribute(literals.dataColIndex), 10);\n if (colIndex === index - cIdx) {\n return m;\n }\n }\n return -1;\n };\n BatchEdit.prototype.editNextValCell = function () {\n var gObj = this.parent;\n var insertedRows = gObj.element.querySelectorAll('.e-insertedrow');\n var isSingleInsert = insertedRows.length === 1 ? true : (gObj.getFrozenColumns() > 0 ||\n gObj.getFrozenRightColumnsCount() > 0 || gObj.getFrozenLeftColumnsCount() > 0) && (insertedRows.length === 2 ||\n insertedRows.length === 3) ? true : false;\n if (isSingleInsert && this.isAdded && !gObj.isEdit) {\n var btmIdx = this.getBottomIndex();\n for (var i = this.cellDetails.cellIndex; i < gObj.getColumns().length; i++) {\n if (gObj.isEdit) {\n return;\n }\n var index = this.findNextEditableCell(this.cellDetails.cellIndex + 1, true, true);\n var col = gObj.getColumns()[index];\n if (col) {\n if (this.parent.editSettings.newRowPosition === 'Bottom') {\n this.editCell(btmIdx, col.field, true);\n }\n else {\n var args = { index: 0, column: col };\n this.parent.notify(events.nextCellIndex, args);\n this.editCell(args.index, col.field, true);\n }\n this.saveCell();\n }\n }\n if (!gObj.isEdit) {\n this.isAdded = false;\n }\n }\n else if (!isSingleInsert && this.isAdded && !gObj.isEdit && !gObj.isFrozenGrid()) {\n var editRowIdx = 0;\n if (gObj.editSettings.newRowPosition === 'Bottom') {\n var changes = this.getBatchChanges();\n editRowIdx = gObj.getCurrentViewRecords().length - changes[literals.deletedRecords].length;\n }\n for (var i = 0; i < insertedRows.length; i++, editRowIdx++) {\n if (!gObj.isEdit) {\n for (var j = 0; j < this.validationColObj.length; j++) {\n if (gObj.isEdit) {\n break;\n }\n else if (insertedRows[i].querySelectorAll('td')[this.validationColObj[j].cellIdx].innerText === '') {\n this.editCell(editRowIdx, this.validationColObj[j].field);\n if (this.validateFormObj()) {\n this.saveCell();\n }\n }\n }\n }\n else {\n break;\n }\n }\n if (!gObj.isEdit) {\n this.isAdded = false;\n }\n }\n else if (!isSingleInsert && this.isAdded && !gObj.isEdit && gObj.isFrozenGrid()) {\n var fLeftInsertedRow = gObj.getFrozenLeftContentTbody() ? gObj.getFrozenLeftContentTbody()\n .querySelectorAll('.e-insertedrow') : undefined;\n var fRightInsertedRow = gObj.getFrozenRightContentTbody() ? gObj.getFrozenRightContentTbody()\n .querySelectorAll('.e-insertedrow') : undefined;\n var mInsertedRow = gObj.getMovableContentTbody().querySelectorAll('.e-insertedrow');\n var editRowIdx = 0;\n var fLeftCount = gObj.getVisibleFrozenLeftCount() ? gObj.getVisibleFrozenLeftCount() :\n gObj.getFrozenColumns();\n var fRightCount = gObj.getVisibleFrozenRightCount();\n var mColumnCount = gObj.getVisibleMovableCount();\n if (gObj.editSettings.newRowPosition === 'Bottom') {\n var changes = this.getBatchChanges();\n editRowIdx = gObj.getCurrentViewRecords().length - changes[literals.deletedRecords].length;\n }\n else if (gObj.editSettings.newRowPosition === 'Top' && gObj.frozenRows) {\n fLeftInsertedRow = gObj.getFrozenHeaderTbody() ? gObj.getFrozenHeaderTbody()\n .querySelectorAll('.e-insertedrow') : undefined;\n fRightInsertedRow = gObj.getFrozenRightHeader() ? gObj.getFrozenRightHeader()\n .querySelectorAll('.e-insertedrow') : undefined;\n mInsertedRow = gObj.getMovableHeaderTbody().querySelectorAll('.e-insertedrow');\n }\n for (var i = 0; i < mInsertedRow.length; i++, editRowIdx++) {\n if (!gObj.isEdit) {\n for (var j = 0; j < this.validationColObj.length; j++) {\n if (gObj.isEdit) {\n break;\n }\n else if (fLeftCount && this.validationColObj[j].cellIdx < fLeftCount) {\n if (fLeftInsertedRow[i].querySelectorAll('td')[this.validationColObj[j].cellIdx].innerText === '') {\n this.editCell(editRowIdx, this.validationColObj[j].field);\n if (gObj.editModule.formObj.validate()) {\n this.saveCell();\n }\n }\n }\n else if (fRightCount && mColumnCount <= this.validationColObj[j].cellIdx) {\n if (fRightInsertedRow[i].querySelectorAll('td')[this.validationColObj[j].cellIdx - (mColumnCount + fLeftCount)].innerText === '') {\n this.editCell(editRowIdx, this.validationColObj[j].field);\n if (gObj.editModule.formObj.validate()) {\n this.saveCell();\n }\n }\n }\n else if (mInsertedRow[i].querySelectorAll('td')[this.validationColObj[j].cellIdx - fLeftCount].innerText === '') {\n this.editCell(editRowIdx, this.validationColObj[j].field);\n if (gObj.editModule.formObj.validate()) {\n this.saveCell();\n }\n }\n }\n }\n else {\n break;\n }\n }\n if (!gObj.isEdit) {\n this.isAdded = false;\n }\n }\n };\n BatchEdit.prototype.escapeCellEdit = function () {\n var args = this.generateCellArgs();\n args.value = args.previousValue;\n if (args.value || !this.cellDetails.column.validationRules) {\n this.successCallBack(args, args.cell.parentElement, args.column, true)(args);\n }\n };\n BatchEdit.prototype.generateCellArgs = function () {\n var gObj = this.parent;\n this.parent.element.classList.remove('e-editing');\n var column = this.cellDetails.column;\n var obj = {};\n obj[column.field] = getObject(column.field, this.cellDetails.rowData);\n var editedData = gObj.editModule.getCurrentEditedData(this.form, obj);\n var cloneEditedData = extend({}, editedData);\n editedData = extend({}, editedData, this.cellDetails.rowData);\n var value = getObject(column.field, cloneEditedData);\n if (!isNullOrUndefined(column.field) && !isUndefined(value)) {\n setValue(column.field, value, editedData);\n }\n var args = {\n columnName: column.field,\n value: getObject(column.field, editedData),\n rowData: this.cellDetails.rowData,\n column: column,\n previousValue: this.cellDetails.value,\n isForeignKey: this.cellDetails.isForeignKey,\n cancel: false\n };\n args.cell = this.form.parentElement;\n args.columnObject = column;\n return args;\n };\n BatchEdit.prototype.saveCell = function (isForceSave) {\n if (this.preventSaveCell || !this.form) {\n return;\n }\n var gObj = this.parent;\n if (!isForceSave && (!gObj.isEdit || this.validateFormObj())) {\n return;\n }\n this.preventSaveCell = true;\n var args = this.generateCellArgs();\n var tr = args.cell.parentElement;\n var col = args.column;\n if (!isForceSave) {\n gObj.trigger(events.cellSave, args, this.successCallBack(args, tr, col));\n gObj.notify(events.batchForm, { formObj: this.form });\n }\n else {\n this.successCallBack(args, tr, col)(args);\n }\n };\n BatchEdit.prototype.successCallBack = function (cellSaveArgs, tr, column, isEscapeCellEdit) {\n var _this = this;\n return function (cellSaveArgs) {\n var gObj = _this.parent;\n cellSaveArgs.cell = cellSaveArgs.cell ? cellSaveArgs.cell : _this.form.parentElement;\n cellSaveArgs.columnObject = cellSaveArgs.columnObject ? cellSaveArgs.columnObject : column;\n cellSaveArgs.columnObject.index = isNullOrUndefined(cellSaveArgs.columnObject.index) ? 0 : cellSaveArgs.columnObject.index;\n if (cellSaveArgs.cancel) {\n _this.preventSaveCell = false;\n if (_this.editNext) {\n _this.editNext = false;\n if (_this.cellDetails.rowIndex === _this.index && _this.cellDetails.column.field === _this.field) {\n return;\n }\n _this.editCellExtend(_this.index, _this.field, _this.isAdd);\n }\n return;\n }\n gObj.editModule.destroyWidgets([column]);\n gObj.isEdit = false;\n gObj.editModule.destroyForm();\n _this.parent.notify(events.tooltipDestroy, {});\n var rowObj = parentsUntil(cellSaveArgs.cell, literals.movableContent)\n || parentsUntil(cellSaveArgs.cell, literals.movableHeader) ? gObj.getRowObjectFromUID(tr.getAttribute('data-uid'), true)\n : gObj.getRowObjectFromUID(tr.getAttribute('data-uid'));\n if (gObj.getFrozenMode() === literals.leftRight && (parentsUntil(cellSaveArgs.cell, 'e-frozen-right-header')\n || parentsUntil(cellSaveArgs.cell, 'e-frozen-right-content'))) {\n rowObj = gObj.getRowObjectFromUID(tr.getAttribute('data-uid'), false, true);\n }\n _this.refreshTD(cellSaveArgs.cell, column, rowObj, cellSaveArgs.value);\n if (_this.parent.isReact) {\n cellSaveArgs.cell = _this.newReactTd;\n }\n removeClass([tr], [literals.editedRow, 'e-batchrow']);\n removeClass([cellSaveArgs.cell], ['e-editedbatchcell', 'e-boolcell']);\n if (!isNullOrUndefined(cellSaveArgs.value) && cellSaveArgs.value.toString() ===\n (!isNullOrUndefined(_this.cellDetails.value) ? _this.cellDetails.value : '').toString() && !_this.isColored\n || (isNullOrUndefined(cellSaveArgs.value) && isNullOrUndefined(rowObj.data[column.field]) &&\n isNullOrUndefined(_this.cellDetails.value) && !cellSaveArgs.cell.parentElement.classList.contains('e-insertedrow'))) {\n cellSaveArgs.cell.classList.remove('e-updatedtd');\n }\n if (isNullOrUndefined(isEscapeCellEdit)) {\n gObj.trigger(events.cellSaved, cellSaveArgs);\n }\n gObj.notify(events.toolbarRefresh, {});\n _this.isColored = false;\n if (_this.parent.aggregates.length > 0) {\n _this.parent.notify(events.refreshFooterRenderer, {});\n if (_this.parent.groupSettings.columns.length > 0 && !_this.isAddRow(_this.cellDetails.rowIndex)) {\n _this.parent.notify(events.groupAggregates, {});\n }\n }\n _this.preventSaveCell = false;\n if (_this.editNext) {\n _this.editNext = false;\n if (_this.cellDetails.rowIndex === _this.index && _this.cellDetails.column.field === _this.field) {\n return;\n }\n var col = gObj.getColumnByField(_this.field);\n if (col && col.allowEditing) {\n _this.editCellExtend(_this.index, _this.field, _this.isAdd);\n }\n }\n if (isEscapeCellEdit) {\n gObj.notify(events.restoreFocus, {});\n }\n };\n };\n BatchEdit.prototype.getDataByIndex = function (index) {\n var row = this.parent.getRowObjectFromUID(this.parent.getDataRows()[index].getAttribute('data-uid'));\n return row.changes ? row.changes : row.data;\n };\n BatchEdit.prototype.keyDownHandler = function (e) {\n if ((e.action === 'tab' || e.action === 'shiftTab') && this.parent.isEdit) {\n var gObj = this.parent;\n var btmIdx = this.getBottomIndex();\n var rowcell = parentsUntil(e.target, literals.rowCell);\n if (rowcell) {\n var cell = rowcell.querySelector('.e-field');\n if (cell) {\n var visibleColumns = this.parent.getVisibleColumns();\n var columnIndex = e.action === 'tab' ? visibleColumns.length - 1 : 0;\n if (visibleColumns[columnIndex].field === cell.getAttribute('id').slice(this.parent.element.id.length)) {\n if (this.cellDetails.rowIndex === btmIdx && e.action === 'tab') {\n if (gObj.editSettings.newRowPosition === 'Top') {\n gObj.editSettings.newRowPosition = 'Bottom';\n this.addRecord();\n gObj.editSettings.newRowPosition = 'Top';\n }\n else {\n this.addRecord();\n }\n }\n else {\n this.saveCell();\n }\n }\n }\n }\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n BatchEdit.prototype.addCancelWhilePaging = function () {\n if (this.validateFormObj()) {\n this.parent.notify(events.destroyForm, {});\n this.parent.isEdit = false;\n this.isColored = false;\n }\n };\n BatchEdit.prototype.getBottomIndex = function () {\n var changes = this.getBatchChanges();\n return this.parent.getCurrentViewRecords().length + changes[literals.addedRecords].length -\n changes[literals.deletedRecords].length - 1;\n };\n return BatchEdit;\n}());\nexport { BatchEdit };\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 { NormalEdit } from './normal-edit';\n/**\n * `DialogEdit` module is used to handle dialog editing actions.\n *\n * @hidden\n */\nvar DialogEdit = /** @class */ (function (_super) {\n __extends(DialogEdit, _super);\n function DialogEdit(parent, serviceLocator, renderer) {\n var _this = \n //constructor\n _super.call(this, parent, serviceLocator) || this;\n _this.parent = parent;\n _this.serviceLocator = serviceLocator;\n _this.renderer = renderer;\n return _this;\n }\n DialogEdit.prototype.closeEdit = function () {\n //closeEdit\n _super.prototype.closeEdit.call(this);\n };\n DialogEdit.prototype.addRecord = function (data, index) {\n //addRecord\n _super.prototype.addRecord.call(this, data, index);\n };\n DialogEdit.prototype.endEdit = function () {\n //endEdit\n _super.prototype.endEdit.call(this);\n };\n DialogEdit.prototype.updateRow = function (index, data) {\n _super.prototype.updateRow.call(this, index, data);\n };\n DialogEdit.prototype.deleteRecord = function (fieldname, data) {\n //deleteRecord\n _super.prototype.deleteRecord.call(this, fieldname, data);\n };\n DialogEdit.prototype.startEdit = function (tr) {\n _super.prototype.startEdit.call(this, tr);\n };\n return DialogEdit;\n}(NormalEdit));\nexport { DialogEdit };\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 { 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 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[i]];\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 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 input.classList.remove(this.errorClass);\n if (input.name.length > 0) {\n this.getInputElement(input.name);\n this.getErrorElement(input.name);\n this.hideMessage(input.name);\n }\n input.classList.remove(this.validClass);\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 this.inputElement.classList.add(this.errorClass);\n this.inputElement.classList.remove(this.validClass);\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 this.inputElement.classList.add(this.errorClass);\n this.inputElement.classList.remove(this.validClass);\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[i] : ruleValue;\n message = message.replace(formats[i], 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 this.inputElement.parentNode.insertBefore(errorElement, this.inputElement.nextSibling);\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[i];\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 this.inputElement.classList.add(this.validClass);\n this.inputElement.classList.remove(this.errorClass);\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 return !isNaN(new Date(option.value).getTime());\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 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","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.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 this.renderComplete();\n };\n TimePicker.prototype.setTimeAllowEdit = function () {\n if (this.allowEdit) {\n if (!this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n }\n else {\n attributes(this.inputElement, { 'readonly': '' });\n }\n this.clearIconState();\n };\n TimePicker.prototype.clearIconState = function () {\n if (!this.allowEdit && this.inputWrapper && !this.readonly) {\n if (this.inputElement.value === '') {\n removeClass([this.inputWrapper.container], [EDITABLE]);\n }\n else {\n addClass([this.inputWrapper.container], [EDITABLE]);\n }\n }\n else if (this.inputWrapper) {\n removeClass([this.inputWrapper.container], [EDITABLE]);\n }\n };\n TimePicker.prototype.validateDisable = function () {\n this.setMinMax(this.initMin, this.initMax);\n this.popupCreation();\n this.popupObj.destroy();\n this.popupWrapper = this.popupObj = null;\n if ((!isNaN(+this.value) && this.value !== null)) {\n if (!this.valueIsDisable(this.value)) {\n //disable value given in value property so reset the date based on current date\n if (this.strictMode) {\n this.resetState();\n }\n this.initValue = null;\n this.initMax = this.getDateObject(this.initMax);\n this.initMin = this.getDateObject(this.initMin);\n this.timeCollections = this.liCollections = [];\n this.setMinMax(this.initMin, this.initMax);\n }\n }\n };\n TimePicker.prototype.validationAttribute = function (target, input) {\n var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');\n input.setAttribute('name', name);\n target.removeAttribute('name');\n var attributes = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attributes.length; i++) {\n if (isNullOrUndefined(target.getAttribute(attributes[i]))) {\n continue;\n }\n var attr = target.getAttribute(attributes[i]);\n input.setAttribute(attributes[i], attr);\n target.removeAttribute(attributes[i]);\n }\n };\n TimePicker.prototype.initialize = function () {\n this.globalize = new Internationalization(this.locale);\n this.defaultCulture = new Internationalization('en');\n this.checkTimeFormat();\n this.checkInvalidValue(this.value);\n // persist the value property.\n this.setProperties({ value: this.checkDateValue(new Date(this.checkInValue(this.value))) }, true);\n this.setProperties({ min: this.checkDateValue(new Date(this.checkInValue(this.min))) }, true);\n this.setProperties({ max: this.checkDateValue(new Date(this.checkInValue(this.max))) }, true);\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkInValue(this.scrollTo))) }, true);\n if (this.angularTag !== null) {\n this.validationAttribute(this.element, this.inputElement);\n }\n this.updateHtmlAttributeToElement();\n this.checkAttributes(false); //check the input element attributes\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('timepicker', localeText, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n this.initValue = this.checkDateValue(this.value);\n this.initMin = this.checkDateValue(this.min);\n this.initMax = this.checkDateValue(this.max);\n this.isNavigate = this.isPreventBlur = this.isTextSelected = false;\n this.activeIndex = this.valueWithMinutes = this.prevDate = null;\n if (!isNullOrUndefined(this.element.getAttribute('id'))) {\n if (this.angularTag !== null) {\n this.inputElement.id = this.element.getAttribute('id') + '_input';\n }\n }\n else {\n //for angular case\n this.element.id = getUniqueID('ej2_timepicker');\n if (this.angularTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n if (isNullOrUndefined(this.inputElement.getAttribute('name'))) {\n attributes(this.inputElement, { 'name': this.element.id });\n }\n 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 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 };\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 if (!isNullOrUndefined(this.cssClass)) {\n this.popupWrapper.className += ' ' + this.cssClass;\n }\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.generateList();\n append([this.listWrapper], this.popupWrapper);\n }\n this.openPopupEventArgs.appendTo.appendChild(this.popupWrapper);\n 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 this.popupObj.element.style.maxHeight = POPUPDIMENSION;\n };\n //util function\n TimePicker.prototype.getFormattedValue = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n else {\n return this.globalize.formatDate(value, { skeleton: '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) || (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') {\n event.preventDefault();\n }\n switch (event.action) {\n case 'home':\n case 'end':\n case 'up':\n case 'down':\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.enableMask || 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-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.notify(\"setMaskSelection\", {\n module: \"MaskedDateTime\"\n });\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.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.createDateObj(val);\n if (this.getFormattedValue(newval) !== this.getFormattedValue(this.value)) {\n this.valueWithMinutes = isNullOrUndefined(newval) ? null : newval;\n time = this.objToString(this.valueWithMinutes);\n }\n else {\n if (this.strictMode) {\n //for strict mode case, when value not present within a range. Reset the nearest range value.\n date = newval;\n }\n this.valueWithMinutes = this.checkDateValue(date);\n time = this.objToString(this.valueWithMinutes);\n }\n if (!this.strictMode && isNullOrUndefined(time)) {\n var value_1 = val.trim().length > 0 ? val : '';\n this.updateInputValue(value_1);\n 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 || 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]) ? 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 this.selectInputText();\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) {\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) && (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 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 var blurArguments = {\n model: this\n };\n this.trigger('blur', blurArguments);\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 };\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 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 }\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 this.updatePlaceHolder();\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 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, \"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 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.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 _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 _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();\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 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 this.renderComplete();\n };\n DateTimePicker.prototype.setValue = function () {\n this.initValue = this.validateMinMaxRange(this.value);\n if (!this.strictMode && this.isDateObject(this.initValue)) {\n var value = this.validateMinMaxRange(this.initValue);\n Input.setValue(this.getFormattedValue(value), this.inputElement, this.floatLabelType, this.showClearButton);\n this.setProperties({ value: value }, true);\n }\n else {\n if (isNullOrUndefined(this.value)) {\n this.initValue = null;\n this.setProperties({ value: null }, true);\n }\n }\n this.valueWithMinutes = this.value;\n _super.prototype.updateInput.call(this);\n };\n DateTimePicker.prototype.validateMinMaxRange = function (value) {\n var result = value;\n if (this.isDateObject(value)) {\n result = this.validateValue(value);\n }\n else {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n }\n }\n this.checkValidState(result);\n return result;\n };\n DateTimePicker.prototype.checkValidState = function (value) {\n this.isValidState = true;\n if (!this.strictMode) {\n if ((+(value) > +(this.max)) || (+(value) < +(this.min))) {\n this.isValidState = false;\n }\n }\n this.checkErrorState();\n };\n DateTimePicker.prototype.checkErrorState = function () {\n if (this.isValidState) {\n removeClass([this.inputWrapper.container], ERROR);\n }\n else {\n addClass([this.inputWrapper.container], ERROR);\n }\n attributes(this.inputElement, { 'aria-invalid': this.isValidState ? 'false' : 'true' });\n };\n DateTimePicker.prototype.validateValue = function (value) {\n var dateVal = value;\n if (this.strictMode) {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n dateVal = this.max;\n }\n else if (+value < +this.min) {\n dateVal = this.min;\n }\n else if (+value > +this.max) {\n dateVal = this.max;\n }\n }\n else {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n dateVal = value;\n }\n }\n return dateVal;\n };\n DateTimePicker.prototype.disablePopupButton = function (isDisable) {\n if (isDisable) {\n addClass([this.inputWrapper.buttons[0], this.timeIcon], DISABLED);\n this.hide();\n }\n else {\n removeClass([this.inputWrapper.buttons[0], this.timeIcon], DISABLED);\n }\n };\n DateTimePicker.prototype.getFormattedValue = function (value) {\n var dateOptions;\n if (!isNullOrUndefined(value)) {\n if (this.calendarMode === 'Gregorian') {\n dateOptions = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: '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 // eslint-disable-next-line @typescript-eslint/no-unused-vars\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 // eslint-disable-next-line @typescript-eslint/no-unused-vars\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 dateObject = this.globalize.parseDate(this.inputElement.value, {\n format: this.cldrDateTimeFormat(), type: 'datetime'\n });\n }\n else {\n dateObject = this.globalize.parseDate(this.inputElement.value, {\n format: this.cldrDateTimeFormat(), type: 'datetime', calendar: 'islamic'\n });\n }\n var value = isNullOrUndefined(this.value) ? this.inputElement.value !== '' ?\n dateObject :\n new Date() : this.value;\n this.valueWithMinutes = value;\n this.listWrapper = createElement('div', { className: CONTENT, attrs: { 'tabindex': '0' } });\n var min = this.startTime(value);\n var max = this.endTime(value);\n var listDetails = TimePickerBase.createListItems(this.createElement, min, max, this.globalize, this.cldrTimeFormat(), this.step);\n this.timeCollections = listDetails.collection;\n this.listTag = listDetails.list;\n attributes(this.listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options' });\n append([listDetails.list], this.listWrapper);\n this.wireTimeListEvents();\n var rippleModel = { duration: 300, selector: '.' + LISTCLASS };\n this.rippleFn = rippleEffect(this.listWrapper, rippleModel);\n this.liCollections = this.listWrapper.querySelectorAll('.' + LISTCLASS);\n };\n DateTimePicker.prototype.popupCreation = function (type, e) {\n if (Browser.isDevice) {\n this.element.setAttribute('readonly', 'readonly');\n }\n if (type === 'date') {\n if (!this.readonly && this.popupWrapper) {\n addClass([this.popupWrapper], DATETIMEPOPUPWRAPPER);\n attributes(this.popupWrapper, { 'id': this.element.id + '_datepopup' });\n }\n }\n else {\n if (!this.readonly) {\n this.dateTimeWrapper = createElement('div', {\n className: ROOT + ' ' + POPUP,\n attrs: { 'id': this.element.id + '_timepopup', 'style': 'visibility:hidden ; display:block' }\n });\n if (!isNullOrUndefined(this.cssClass)) {\n this.dateTimeWrapper.className += ' ' + this.cssClass;\n }\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.listCreation();\n append([this.listWrapper], this.dateTimeWrapper);\n }\n document.body.appendChild(this.dateTimeWrapper);\n this.addTimeSelection();\n this.renderPopup();\n this.setTimeScrollPosition();\n this.openPopup(e);\n this.popupObject.refreshPosition(this.inputElement);\n }\n }\n };\n DateTimePicker.prototype.openPopup = function (e) {\n var _this = this;\n this.preventArgs = {\n cancel: false,\n popup: 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 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 && target !== this.inputWrapper.container) {\n if (this.isTimePopupOpen()) {\n this.hide(event);\n this.focusOut();\n }\n }\n else if (target !== this.inputElement) {\n if (!Browser.isDevice) {\n this.isPreventBlur = ((document.activeElement === this.inputElement) && (Browser.isIE || Browser.info.name === 'edge')\n && target === this.popupObject.element);\n }\n }\n };\n DateTimePicker.prototype.isTimePopupOpen = function () {\n return (this.dateTimeWrapper && this.dateTimeWrapper.classList.contains('' + ROOT)) ? true : false;\n };\n DateTimePicker.prototype.isDatePopupOpen = function () {\n return (this.popupWrapper && this.popupWrapper.classList.contains('' + DATETIMEPOPUPWRAPPER)) ? true : false;\n };\n DateTimePicker.prototype.renderPopup = function () {\n var _this = this;\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n if (Browser.isDevice) {\n this.timeModal = createElement('div');\n this.timeModal.className = '' + ROOT + ' e-time-modal';\n document.body.className += ' ' + OVERFLOW;\n this.timeModal.style.display = 'block';\n document.body.appendChild(this.timeModal);\n }\n var offset = 4;\n this.popupObject = new Popup(this.dateTimeWrapper, {\n width: this.setPopupWidth(),\n zIndex: this.zIndex,\n targetType: 'container',\n collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },\n relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,\n position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },\n enableRtl: this.enableRtl,\n offsetY: offset,\n open: function () {\n _this.dateTimeWrapper.style.visibility = 'visible';\n addClass([_this.timeIcon], ACTIVE);\n if (!Browser.isDevice) {\n _this.timekeyConfigure = extend(_this.timekeyConfigure, _this.keyConfigs);\n _this.inputEvent = new KeyboardEvents(_this.inputWrapper.container, {\n keyAction: _this.timeKeyActionHandle.bind(_this),\n keyConfigs: _this.timekeyConfigure,\n eventName: 'keydown'\n });\n }\n }, close: function () {\n removeClass([_this.timeIcon], ACTIVE);\n _this.unWireTimeListEvents();\n _this.inputElement.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 this.popupObject.element.style.maxHeight = POPUPDIMENSION;\n };\n DateTimePicker.prototype.setDimension = function (width) {\n if (typeof width === 'number') {\n width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n // 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 return popupHeight > height ? height : popupHeight;\n };\n DateTimePicker.prototype.changeEvent = function (e) {\n if ((this.value && this.value.valueOf()) !== (this.previousDateTime && +this.previousDateTime.valueOf())) {\n _super.prototype.changeEvent.call(this, e);\n this.valueWithMinutes = this.value;\n this.setInputValue('date');\n this.previousDateTime = this.value && new Date(+this.value);\n }\n };\n DateTimePicker.prototype.updateValue = function (e) {\n this.setInputValue('time');\n if (+this.previousDateTime !== +this.value) {\n this.changedArgs = {\n value: this.value, event: e || null,\n isInteracted: !isNullOrUndefined(e),\n element: this.element\n };\n this.addTimeSelection();\n this.trigger('change', this.changedArgs);\n this.previousDateTime = this.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 this.dateTimeWrapper.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION + lineHeight / HALFPOSITION)) : height;\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n };\n DateTimePicker.prototype.setScrollTo = function () {\n var element;\n var items = this.dateTimeWrapper.querySelectorAll('.' + LISTCLASS);\n if (items.length >= 0) {\n this.scrollInvoked = true;\n var initialTime = this.timeCollections[0];\n var scrollTime = this.getDateObject(this.checkDateValue(this.scrollTo)).getTime();\n element = items[Math.round((scrollTime - initialTime) / (this.step * 60000))];\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n };\n DateTimePicker.prototype.setInputValue = function (type) {\n if (type === 'date') {\n this.inputElement.value = this.previousElementValue = this.getFormattedValue(this.getFullDateTime());\n this.setProperties({ value: this.getFullDateTime() }, true);\n }\n else {\n var tempVal = this.getFormattedValue(new Date(this.timeCollections[this.activeIndex]));\n Input.setValue(tempVal, this.inputElement, this.floatLabelType, this.showClearButton);\n this.previousElementValue = this.inputElement.value;\n this.setProperties({ value: new Date(this.timeCollections[this.activeIndex]) }, true);\n 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.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 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]) ? 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 Input.setValue(this.getFormattedValue(newProp.value), this.inputElement, this.floatLabelType, this.showClearButton);\n this.valueWithMinutes = newProp.value;\n this.setProperties({ value: newProp.value }, true);\n if (this.popupObj) {\n this.popupUpdate();\n }\n this.previousDateTime = new Date(this.inputElement.value);\n this.updateInput();\n this.changeTrigger(null);\n 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 this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);\n this.dateTimeFormat = this.cldrDateTimeFormat();\n _super.prototype.updateInput.call(this);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToElement();\n this.updateHtmlAttributeToWrapper();\n this.checkAttributes(true);\n break;\n case 'format':\n this.setProperties({ format: newProp.format }, true);\n this.checkFormat();\n this.dateTimeFormat = this.formatString;\n this.setValue();\n 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.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 && !this.isIconClicked) {\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(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","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { extend } from '@syncfusion/ej2-base';\nimport { DatePicker, DateTimePicker } from '@syncfusion/ej2-calendars';\nimport { isEditable, getObject, getCustomDateFormat } from '../base/util';\nimport { EditCellBase } from './edit-cell-base';\n/**\n * `DatePickerEditCell` is used to handle datepicker cell type editing.\n *\n * @hidden\n */\nvar DatePickerEditCell = /** @class */ (function (_super) {\n __extends(DatePickerEditCell, _super);\n function DatePickerEditCell() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n DatePickerEditCell.prototype.write = function (args) {\n this.edit = this.parent.editModule;\n if (args.column.editType === 'datepickeredit') {\n this.obj = new DatePicker(extend(dateanddatetimerender(args, this.parent.editSettings.mode, this.parent.enableRtl, this.parent.cssClass, this), args.column.edit.params));\n }\n else if (args.column.editType === 'datetimepickeredit') {\n this.obj = new DateTimePicker(extend(dateanddatetimerender(args, this.parent.editSettings.mode, this.parent.enableRtl, this.parent.cssClass, this), args.column.edit.params));\n }\n this.obj.appendTo(args.element);\n };\n return DatePickerEditCell;\n}(EditCellBase));\nexport { DatePickerEditCell };\n// eslint-disable-next-line\nfunction dateanddatetimerender(args, mode, rtl, css, datePickerEditCell) {\n var isInline = mode !== 'Dialog';\n var format = getCustomDateFormat(args.column.format, args.column.type);\n var value = getObject(args.column.field, args.rowData);\n value = value ? new Date(value) : null;\n return {\n floatLabelType: isInline ? 'Never' : 'Always',\n value: value,\n format: format,\n placeholder: isInline ?\n '' : args.column.headerText, enableRtl: rtl,\n enabled: isEditable(args.column, args.requestType, args.element),\n cssClass: css ? css : null,\n close: datePickerClose.bind(datePickerEditCell)\n };\n}\n// eslint-disable-next-line\nfunction datePickerClose(args) {\n if (args.event && args.event.action === 'escape') {\n this.edit.editCellDialogClose = true;\n }\n}\n","/**\n * `TemplateEditCell` is used to handle template cell.\n *\n * @hidden\n */\nvar TemplateEditCell = /** @class */ (function () {\n function TemplateEditCell(parent) {\n this.parent = parent;\n }\n TemplateEditCell.prototype.read = function (element, value) {\n return value;\n };\n TemplateEditCell.prototype.write = function () {\n //\n };\n TemplateEditCell.prototype.destroy = function () {\n //\n };\n return TemplateEditCell;\n}());\nexport { TemplateEditCell };\n","import { closest, addClass, select } from '@syncfusion/ej2-base';\nimport { extend, getValue } from '@syncfusion/ej2-base';\nimport { remove } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport { EditRender } from '../renderer/edit-renderer';\nimport { BooleanEditCell } from '../renderer/boolean-edit-cell';\nimport { DropDownEditCell } from '../renderer/dropdown-edit-cell';\nimport { NumericEditCell } from '../renderer/numeric-edit-cell';\nimport { DefaultEditCell } from '../renderer/default-edit-cell';\nimport { InlineEdit } from './inline-edit';\nimport { BatchEdit } from './batch-edit';\nimport { DialogEdit } from './dialog-edit';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { parentsUntil, getComplexFieldID, setComplexFieldID, getScrollBarWidth, setValidationRuels } from '../base/util';\nimport { FormValidator } from '@syncfusion/ej2-inputs';\nimport { DatePickerEditCell } from '../renderer/datepicker-edit-cell';\nimport { calculateRelativeBasedPosition } from '@syncfusion/ej2-popups';\nimport { TemplateEditCell } from '../renderer/template-edit-cell';\nimport { DataUtil } from '@syncfusion/ej2-data';\nimport { addRemoveEventListener, getColumnModelByFieldName } from '../base/util';\nimport * as literals from '../base/string-literals';\n/**\n * The `Edit` module is used to handle editing actions.\n */\nvar Edit = /** @class */ (function () {\n /**\n * Constructor for the Grid editing module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {ServiceLocator} serviceLocator - specifies the servicelocator\n * @hidden\n */\n function Edit(parent, serviceLocator) {\n this.editType = { 'Inline': InlineEdit, 'Normal': InlineEdit, 'Batch': BatchEdit, 'Dialog': DialogEdit };\n /* @hidden */\n this.editCellDialogClose = false;\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.l10n = this.serviceLocator.getService('localization');\n this.addEventListener();\n this.updateEditObj();\n this.createAlertDlg();\n this.createConfirmDlg();\n }\n Edit.prototype.updateColTypeObj = function () {\n var cols = this.parent.columnModel;\n for (var i = 0; i < cols.length; i++) {\n if (this.parent.editSettings.template || cols[i].editTemplate) {\n var templteCell = 'templateedit';\n cols[i].edit = extend(new Edit.editCellType[templteCell](this.parent), cols[i].edit || {});\n }\n else {\n cols[i].edit = extend(new Edit.editCellType[cols[i].editType && Edit.editCellType[cols[i].editType] ?\n cols[i].editType : 'defaultedit'](this.parent, this.serviceLocator), cols[i].edit || {});\n }\n }\n this.parent.log('primary_column_missing');\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Edit.prototype.getModuleName = function () {\n return 'edit';\n };\n /**\n * @param {NotifyArgs} e - specifies the notifyargs\n * @returns {void}\n * @hidden\n */\n Edit.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n var gObj = this.parent;\n for (var _i = 0, _a = Object.keys(e.properties); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'allowAdding':\n case 'allowDeleting':\n case 'allowEditing':\n if (gObj.editSettings.allowAdding || gObj.editSettings.allowEditing || gObj.editSettings.allowDeleting) {\n this.initialEnd();\n }\n break;\n case 'mode':\n this.updateEditObj();\n gObj.isEdit = false;\n gObj.refresh();\n break;\n }\n }\n };\n Edit.prototype.updateEditObj = function () {\n if (this.editModule) {\n this.editModule.destroy();\n }\n this.renderer = new EditRender(this.parent, this.serviceLocator);\n this.editModule = new this.editType[this.parent.editSettings.mode](this.parent, this.serviceLocator, this.renderer);\n };\n Edit.prototype.initialEnd = function () {\n this.updateColTypeObj();\n };\n /**\n * Edits any bound record in the Grid by TR element.\n *\n * @param {HTMLTableRowElement} tr - Defines the table row to be edited.\n * @returns {void}\n */\n Edit.prototype.startEdit = function (tr) {\n var gObj = this.parent;\n if (!gObj.editSettings.allowEditing || gObj.isEdit || gObj.editSettings.mode === 'Batch') {\n return;\n }\n this.parent.element.classList.add('e-editing');\n if (!gObj.getSelectedRows().length) {\n if (!tr) {\n this.showDialog('EditOperationAlert', this.alertDObj);\n return;\n }\n }\n else if (!tr) {\n tr = gObj.getSelectedRows()[0];\n }\n this.isLastRow = tr.rowIndex === this.parent.getContent().querySelector('tr:last-child').rowIndex;\n if (tr.style.display === 'none') {\n return;\n }\n this.editModule.startEdit(tr);\n this.refreshToolbar();\n gObj.element.querySelector('.e-gridpopup').style.display = 'none';\n this.parent.notify('start-edit', {});\n };\n /**\n * @param {Element} tr - specifies the tr element\n * @param {object} args - specifies the object\n * @param {Element} args.row -specfifes the row\n * @param {string} args.requestType - specifies the request type\n * @returns {void}\n * @hidden\n */\n Edit.prototype.checkLastRow = function (tr, args) {\n var checkLastRow = this.isLastRow;\n if (this.parent.height !== 'auto' && this.parent.editSettings.newRowPosition === 'Bottom' && args && args.requestType === 'add' &&\n this.parent.getContent().firstElementChild.offsetHeight > this.parent.getContentTable().scrollHeight) {\n addClass([].slice.call(tr.getElementsByClassName(literals.rowCell)), 'e-lastrowadded');\n }\n else if (checkLastRow && tr && tr.classList) {\n addClass([].slice.call(tr.getElementsByClassName(literals.rowCell)), 'e-lastrowcell');\n }\n };\n /**\n * Cancels edited state.\n *\n * @returns {void}\n */\n Edit.prototype.closeEdit = function () {\n if (this.parent.editSettings.mode === 'Batch' && this.parent.editSettings.showConfirmDialog\n && this.parent.element.getElementsByClassName('e-updatedtd').length) {\n this.showDialog('CancelEdit', this.dialogObj);\n return;\n }\n this.parent.element.classList.remove('e-editing');\n this.editModule.closeEdit();\n this.refreshToolbar();\n this.parent.notify(events.closeEdit, {});\n };\n Edit.prototype.refreshToolbar = function () {\n this.parent.notify(events.toolbarRefresh, {});\n };\n /**\n * To adds a new row at the top with the given data. When data is not passed, it will add empty rows.\n * > `editSettings.allowEditing` should be true.\n *\n * @param {Object} data - Defines the new add record data.\n * @param {number} index - Defines the row index to be added\n * @returns {void}\n */\n Edit.prototype.addRecord = function (data, index) {\n if (!this.parent.editSettings.allowAdding) {\n return;\n }\n var args = { startEdit: true };\n if (!data) {\n this.parent.notify(events.virtualScrollAddActionBegin, args);\n }\n if (args.startEdit) {\n this.parent.element.classList.add('e-editing');\n this.editModule.addRecord(data, index);\n this.refreshToolbar();\n this.parent.notify('start-add', {});\n }\n };\n /**\n * Deletes a record with the given options. If fieldname and data are not given, the Grid will delete the selected record.\n * > `editSettings.allowDeleting` should be true.\n *\n * @param {string} fieldname - Defines the primary key field name of the column.\n * @param {Object} data - Defines the JSON data record to be deleted.\n * @returns {void}\n */\n Edit.prototype.deleteRecord = function (fieldname, data) {\n var gObj = this.parent;\n if (!gObj.editSettings.allowDeleting) {\n return;\n }\n if (!data) {\n if (!gObj.getSelectedRecords().length && isNullOrUndefined(gObj.commandDelIndex)) {\n this.showDialog('DeleteOperationAlert', this.alertDObj);\n return;\n }\n }\n if (gObj.editSettings.showDeleteConfirmDialog) {\n this.showDialog('ConfirmDelete', this.dialogObj);\n return;\n }\n this.editModule.deleteRecord(fieldname, data);\n };\n /**\n * Deletes a visible row by TR element.\n *\n * @param {HTMLTableRowElement} tr - Defines the table row element.\n * @returns {void}\n */\n Edit.prototype.deleteRow = function (tr) {\n this.deleteRowUid = tr.getAttribute('data-uid');\n var rowObj = this.parent.getRowObjectFromUID(this.deleteRowUid);\n if (!isNullOrUndefined(rowObj)) {\n this.deleteRecord(null, rowObj.data);\n }\n };\n /**\n * If Grid is in editable state, you can save a record by invoking endEdit.\n *\n * @returns {void}\n */\n Edit.prototype.endEdit = function () {\n if (this.parent.editSettings.mode === 'Batch' && this.parent.editSettings.showConfirmDialog &&\n (isNullOrUndefined(this.formObj) || this.formObj.validate())) {\n this.parent.editModule.saveCell();\n this.parent.notify(events.editNextValCell, {});\n if (isNullOrUndefined(this.formObj) || this.formObj.validate()) {\n this.showDialog('BatchSaveConfirm', this.dialogObj);\n return;\n }\n }\n this.endEditing();\n };\n /**\n * To update the specified cell by given value without changing into edited state.\n *\n * @param {number} rowIndex Defines the row index.\n * @param {string} field Defines the column field.\n * @param {string | number | boolean | Date} value - Defines the value to be changed.\n * @returns {void}\n */\n Edit.prototype.updateCell = function (rowIndex, field, value) {\n this.editModule.updateCell(rowIndex, field, value);\n };\n /**\n * To update the specified row by given values without changing into edited state.\n *\n * @param {number} index Defines the row index.\n * @param {Object} data Defines the data object to be updated.\n * @returns {void}\n */\n Edit.prototype.updateRow = function (index, data) {\n this.editModule.updateRow(index, data);\n };\n /**\n * Resets added, edited, and deleted records in the batch mode.\n *\n * @returns {void}\n */\n Edit.prototype.batchCancel = function () {\n this.closeEdit();\n };\n /**\n * Bulk saves added, edited, and deleted records in the batch mode.\n *\n * @returns {void}\n */\n Edit.prototype.batchSave = function () {\n this.endEdit();\n };\n /**\n * Changes a particular cell into edited state based on the row index and field name provided in the `batch` mode.\n *\n * @param {number} index - Defines row index to edit a particular cell.\n * @param {string} field - Defines the field name of the column to perform batch edit.\n * @returns {void}\n */\n Edit.prototype.editCell = function (index, field) {\n this.editModule.editCell(index, field);\n };\n /**\n * Checks the status of validation at the time of editing. If validation is passed, it returns true.\n *\n * @returns {boolean} returns whether the form is validated\n */\n Edit.prototype.editFormValidate = function () {\n var form1 = this.formObj ? this.formObj.validate() : true;\n var form2 = this.mFormObj ? this.mFormObj.validate() : true;\n var form3 = this.frFormObj ? this.frFormObj.validate() : true;\n return form1 && form2 && form3;\n };\n /**\n * Gets the added, edited,and deleted data before bulk save to the DataSource in batch mode.\n *\n * @returns {Object} returns the Object\n */\n Edit.prototype.getBatchChanges = function () {\n return this.editModule.getBatchChanges ? this.editModule.getBatchChanges() : {};\n };\n /**\n * Gets the current value of the edited component.\n *\n * @returns {Object} returns the Object\n */\n Edit.prototype.getCurrentEditCellData = function () {\n var obj = this.getCurrentEditedData(this.formObj.element, {});\n return obj[Object.keys(obj)[0]];\n };\n /**\n * Saves the cell that is currently edited. It does not save the value to the DataSource.\n *\n * @returns {void}\n */\n Edit.prototype.saveCell = function () {\n this.editModule.saveCell();\n };\n Edit.prototype.endEditing = function () {\n this.parent.element.classList.remove('e-editing');\n this.editModule.endEdit();\n this.refreshToolbar();\n };\n Edit.prototype.showDialog = function (content, obj) {\n obj.content = '' + this.l10n.getConstant(content) + '
';\n obj.dataBind();\n obj.show();\n };\n Edit.prototype.getValueFromType = function (col, value) {\n var val = value;\n switch (col.type) {\n case 'number':\n val = !isNaN(parseFloat(value)) ? parseFloat(value) : null;\n break;\n case 'boolean':\n if (col.editType !== 'booleanedit') {\n val = value === this.l10n.getConstant('True') || value === true ? true : false;\n }\n break;\n case 'date':\n case 'datetime':\n if (col.editType !== 'datepickeredit' && col.editType !== 'datetimepickeredit'\n && value && value.length) {\n val = new Date(value);\n }\n else if (value === '') {\n val = null;\n }\n break;\n }\n return val;\n };\n Edit.prototype.destroyToolTip = function () {\n var elements = [].slice.call(this.parent.element.getElementsByClassName('e-griderror'));\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var elem = elements_1[_i];\n remove(elem);\n }\n this.parent.getContent().firstElementChild.style.position = 'relative';\n };\n Edit.prototype.createConfirmDlg = function () {\n this.dialogObj = this.dlgWidget([\n {\n click: this.dlgOk.bind(this),\n buttonModel: { content: this.l10n.getConstant('OKButton'),\n cssClass: this.parent.cssClass ? 'e-primary' + ' ' + this.parent.cssClass : 'e-primary',\n isPrimary: true }\n },\n {\n click: this.dlgCancel.bind(this),\n buttonModel: { cssClass: this.parent.cssClass ? 'e-flat' + ' ' + this.parent.cssClass : 'e-flat',\n content: this.l10n.getConstant('CancelButton') }\n }\n ], 'EditConfirm');\n };\n Edit.prototype.createAlertDlg = function () {\n this.alertDObj = this.dlgWidget([\n {\n click: this.alertClick.bind(this),\n buttonModel: { content: this.l10n.getConstant('OKButton'),\n cssClass: this.parent.cssClass ? 'e-flat' + ' ' + this.parent.cssClass : 'e-flat',\n isPrimary: true }\n }\n ], 'EditAlert');\n };\n Edit.prototype.alertClick = function () {\n this.alertDObj.hide();\n };\n Edit.prototype.dlgWidget = function (btnOptions, name) {\n var div = this.parent.createElement('div', { id: this.parent.element.id + name });\n this.parent.element.appendChild(div);\n var options = {\n showCloseIcon: false,\n isModal: true,\n visible: false,\n closeOnEscape: true,\n target: this.parent.element,\n width: '320px',\n animationSettings: { effect: 'None' },\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n };\n options.buttons = btnOptions;\n var obj = new Dialog(options);\n var isStringTemplate = 'isStringTemplate';\n obj[isStringTemplate] = true;\n obj.appendTo(div);\n return obj;\n };\n Edit.prototype.dlgCancel = function () {\n this.parent.focusModule.clearIndicator();\n this.parent.focusModule.restoreFocus();\n this.dialogObj.hide();\n };\n Edit.prototype.dlgOk = function () {\n switch (this.dialogObj.element.querySelector('.e-dlg-content').firstElementChild.innerText) {\n case this.l10n.getConstant('ConfirmDelete'):\n this.editModule.deleteRecord();\n break;\n case this.l10n.getConstant('CancelEdit'):\n this.editModule.closeEdit();\n break;\n case this.l10n.getConstant('BatchSaveConfirm'):\n this.endEditing();\n break;\n case this.l10n.getConstant('BatchSaveLostChanges'):\n if (this.parent.editSettings.mode === 'Batch') {\n this.editModule.addCancelWhilePaging();\n }\n this.executeAction();\n break;\n }\n this.dlgCancel();\n };\n Edit.prototype.destroyEditComponents = function () {\n if (this.parent.isEdit) {\n this.destroyWidgets();\n this.destroyForm();\n }\n this.destroy();\n };\n /**\n * @returns {void}\n * @hidden\n */\n Edit.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.eventDetails = [{ event: events.inBoundModelChanged, handler: this.onPropertyChanged },\n { event: events.initialEnd, handler: this.initialEnd },\n { event: events.keyPressed, handler: this.keyPressHandler },\n { event: events.autoCol, handler: this.updateColTypeObj },\n { event: events.tooltipDestroy, handler: this.destroyToolTip },\n { event: events.preventBatch, handler: this.preventBatch },\n { event: events.destroyForm, handler: this.destroyForm },\n { event: events.destroy, handler: this.destroyEditComponents }];\n addRemoveEventListener(this.parent, this.eventDetails, true, this);\n this.actionBeginFunction = this.onActionBegin.bind(this);\n this.actionCompleteFunction = this.actionComplete.bind(this);\n this.parent.addEventListener(events.actionBegin, this.actionBeginFunction);\n this.parent.addEventListener(events.actionComplete, this.actionCompleteFunction);\n };\n /**\n * @returns {void}\n * @hidden\n */\n Edit.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n addRemoveEventListener(this.parent, this.eventDetails, false);\n this.parent.removeEventListener(events.actionComplete, this.actionCompleteFunction);\n this.parent.removeEventListener(events.actionBegin, this.actionBeginFunction);\n };\n Edit.prototype.actionComplete = function (e) {\n var actions = ['add', 'beginEdit', 'save', 'delete', 'cancel'];\n if (actions.indexOf(e.requestType) < 0) {\n this.parent.isEdit = false;\n }\n if (e.requestType === 'batchsave') {\n this.parent.focusModule.restoreFocus();\n }\n this.refreshToolbar();\n };\n /**\n * @param {Element} form - specifies the element\n * @param {Object} editedData - specifies the edited data\n * @returns {Object} returns the object\n * @hidden\n */\n Edit.prototype.getCurrentEditedData = function (form, editedData) {\n var gObj = this.parent;\n if (gObj.editSettings.template) {\n var elements = [].slice.call(form.elements);\n for (var k = 0; k < elements.length; k++) {\n if (((elements[k].hasAttribute('name') && (elements[k].className !== 'e-multi-hidden')) ||\n elements[k].classList.contains('e-multiselect')) && !(elements[k].type === 'hidden' &&\n (parentsUntil(elements[k], 'e-switch-wrapper') || parentsUntil(elements[k], 'e-checkbox-wrapper')))) {\n var field = (elements[k].hasAttribute('name')) ? setComplexFieldID(elements[k].getAttribute('name')) :\n setComplexFieldID(elements[k].getAttribute('id'));\n var column = gObj.getColumnByField(field) || { field: field, type: elements[k].getAttribute('type') };\n var value = void 0;\n if (column.type === 'checkbox' || column.type === 'boolean') {\n value = elements[k].checked;\n }\n else if (elements[k].value) {\n value = elements[k].value;\n if (elements[k].ej2_instances &&\n elements[k].ej2_instances.length &&\n !isNullOrUndefined(elements[k].ej2_instances[0].value)) {\n elements[k].blur();\n value = elements[k].ej2_instances[0].value;\n }\n }\n else if (elements[k].ej2_instances) {\n value = elements[k].ej2_instances[0].value;\n }\n if (column.edit && typeof column.edit.read === 'string') {\n value = getValue(column.edit.read, window)(elements[k], value);\n }\n else if (column.edit && column.edit.read) {\n value = column.edit.read(elements[k], value);\n }\n value = gObj.editModule.getValueFromType(column, value);\n if (elements[k].type === 'radio') {\n if (elements[k].checked) {\n DataUtil.setValue(column.field, value, editedData);\n }\n }\n else {\n DataUtil.setValue(column.field, value, editedData);\n }\n }\n }\n return editedData;\n }\n var col = gObj.columnModel.filter(function (col) { return col.editTemplate; });\n for (var j = 0; j < col.length; j++) {\n if (form[getComplexFieldID(col[j].field)]) {\n var inputElements = [].slice.call(form[getComplexFieldID(col[j].field)]);\n inputElements = inputElements.length ? inputElements : [form[getComplexFieldID(col[j].field)]];\n var temp = inputElements.filter(function (e) {\n return !isNullOrUndefined((e.ej2_instances));\n });\n if (temp.length === 0) {\n temp = inputElements.filter(function (e) { return e.hasAttribute('name'); });\n }\n for (var k = 0; k < temp.length; k++) {\n var value = this.getValue(col[j], temp[k], editedData);\n DataUtil.setValue(col[j].field, value, editedData);\n }\n }\n }\n var inputs = [].slice.call(form.getElementsByClassName('e-field'));\n for (var i = 0, len = inputs.length; i < len; i++) {\n var col_1 = gObj.getColumnByUid(inputs[i].getAttribute('e-mappinguid'));\n if (col_1 && col_1.field) {\n var value = this.getValue(col_1, inputs[i], editedData);\n DataUtil.setValue(col_1.field, value, editedData);\n }\n }\n return editedData;\n };\n Edit.prototype.getValue = function (col, input, editedData) {\n var value = input.ej2_instances ?\n input.ej2_instances[0].value : input.value;\n var gObj = this.parent;\n var temp = col.edit.read;\n if (col.type === 'checkbox' || col.type === 'boolean') {\n value = input.checked;\n }\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n value = gObj.editModule.getValueFromType(col, (temp)(input, value));\n }\n else {\n value = gObj.editModule.getValueFromType(col, col.edit.read(input, value));\n }\n if (isNullOrUndefined(editedData[col.field]) && value === '') {\n value = editedData[col.field];\n }\n return value;\n };\n /**\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Edit.prototype.onActionBegin = function (e) {\n if (e.requestType === 'columnstate' && this.parent.isEdit\n && this.parent.editSettings.mode !== 'Batch') {\n this.closeEdit();\n }\n else {\n var editRow = this.parent.element.querySelector('.' + literals.editedRow);\n var addRow = this.parent.element.querySelector('.' + literals.addedRow);\n if (editRow && this.parent.frozenRows && e.requestType === 'virtualscroll'\n && parseInt(parentsUntil(editRow, literals.row).getAttribute(literals.dataRowIndex), 10) < this.parent.frozenRows) {\n return;\n }\n var restrictedRequestTypes = ['filterafteropen', 'filterbeforeopen', 'filterchoicerequest', 'save', 'infiniteScroll', 'virtualscroll'];\n var isRestrict = restrictedRequestTypes.indexOf(e.requestType) === -1;\n var isDestroyVirtualForm = this.parent.enableVirtualization && this.formObj\n && !this.formObj.isDestroyed && (editRow || addRow || e.requestType === 'cancel') && isRestrict;\n if ((!this.parent.enableVirtualization && this.parent.editSettings.mode !== 'Batch' && this.formObj && !this.formObj.isDestroyed\n && isRestrict && !e.cancel) || isDestroyVirtualForm) {\n this.destroyWidgets();\n this.destroyForm();\n }\n }\n };\n /**\n * @param {Column[]} cols - specfies the column\n * @returns {void}\n * @hidden\n */\n Edit.prototype.destroyWidgets = function (cols) {\n var gObj = this.parent;\n if (gObj.editSettings.template) {\n this.parent.destroyTemplate(['editSettingsTemplate']);\n if (this.parent.isReact) {\n this.parent.renderTemplates();\n }\n }\n cols = cols ? cols : this.parent.getCurrentVisibleColumns(this.parent.enableColumnVirtualization);\n if (cols.some(function (column) { return !isNullOrUndefined(column.editTemplate); })) {\n this.parent.destroyTemplate(['editTemplate']);\n if (this.parent.isReact) {\n this.parent.renderTemplates();\n }\n }\n for (var _i = 0, cols_1 = cols; _i < cols_1.length; _i++) {\n var col = cols_1[_i];\n var temp = col.edit.destroy;\n if (col.edit.destroy) {\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n temp();\n }\n else {\n col.edit.destroy();\n }\n }\n }\n var elements = [].slice.call(this.formObj.element.elements);\n for (var i = 0; i < elements.length; i++) {\n if (elements[i].hasAttribute('name')) {\n if (elements[i].ej2_instances &&\n elements[i].ej2_instances.length &&\n !elements[i].ej2_instances[0].isDestroyed) {\n elements[i].ej2_instances[0].destroy();\n }\n }\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Edit.prototype.destroyForm = function () {\n this.destroyToolTip();\n var formObjects = [this.formObj, this.mFormObj, this.frFormObj, this.virtualFormObj];\n for (var i = 0; i < formObjects.length; i++) {\n if (formObjects[i] && formObjects[i].element && !formObjects[i].isDestroyed) {\n formObjects[i].destroy();\n }\n }\n this.destroyToolTip();\n };\n /**\n * To destroy the editing.\n *\n * @returns {void}\n * @hidden\n */\n Edit.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (!gridElement) {\n return;\n }\n var hasGridChild = gridElement.querySelector('.' + literals.gridHeader) &&\n gridElement.querySelector('.' + literals.gridContent) ? true : false;\n if (hasGridChild) {\n this.destroyForm();\n }\n this.removeEventListener();\n var elem = this.dialogObj.element;\n if (elem.childElementCount > 0) {\n this.dialogObj.destroy();\n remove(elem);\n }\n elem = this.alertDObj.element;\n if (elem.childElementCount > 0) {\n this.alertDObj.destroy();\n remove(elem);\n }\n if (!hasGridChild) {\n return;\n }\n if (this.editModule) {\n this.editModule.destroy();\n }\n };\n Edit.prototype.keyPressHandler = function (e) {\n switch (e.action) {\n case 'insert':\n this.addRecord();\n break;\n case 'delete':\n if ((e.target.tagName !== 'INPUT' || e.target.classList.contains('e-checkselect'))\n && !document.querySelector('.e-popup-open.e-edit-dialog')) {\n this.deleteRecord();\n }\n break;\n case 'f2':\n this.startEdit();\n break;\n case 'enter':\n if (!parentsUntil(e.target, 'e-unboundcelldiv') && this.parent.editSettings.mode !== 'Batch' &&\n (parentsUntil(e.target, literals.gridContent) || (this.parent.frozenRows\n && parentsUntil(e.target, literals.headerContent)))\n && !document.getElementsByClassName('e-popup-open').length) {\n e.preventDefault();\n this.endEdit();\n }\n break;\n case 'escape':\n if (this.parent.isEdit && !this.editCellDialogClose) {\n if (this.parent.editSettings.mode === 'Batch') {\n this.editModule.escapeCellEdit();\n }\n else {\n this.curretRowFocus(e);\n }\n }\n if (this.editCellDialogClose) {\n this.editCellDialogClose = false;\n }\n break;\n case 'tab':\n case 'shiftTab':\n this.curretRowFocus(e);\n break;\n }\n };\n Edit.prototype.curretRowFocus = function (e) {\n if (this.parent.isEdit && this.parent.editSettings.mode !== 'Batch') {\n var editedRow = parentsUntil(e.target, 'e-editedrow') || parentsUntil(e.target, 'e-addedrow');\n if (editedRow) {\n var selector = editedRow.classList.contains('e-addedrow') ? 'e-addedrow' : 'e-editedrow';\n var focusableEditCells = [].slice.call(editedRow.querySelectorAll('.e-input:not(.e-disabled)'));\n var commandColCell = [].slice.call(editedRow.querySelectorAll('.e-unboundcell'));\n if (commandColCell) {\n for (var i = 0; i < commandColCell.length; i++) {\n focusableEditCells = focusableEditCells.concat([].slice\n .call(commandColCell[i].querySelectorAll('.e-btn:not(.e-hide)')));\n }\n }\n if (this.parent.isFrozenGrid()) {\n if (!isNullOrUndefined(this.parent.frozenRows) && (!isNullOrUndefined(parentsUntil(e.target, 'e-frozenheader')) ||\n !isNullOrUndefined(parentsUntil(e.target, 'e-movableheader')))) {\n var movableHeditedRow = this.parent.getHeaderContent().querySelector('.e-movableheader ' + '.' + selector);\n focusableEditCells.push.apply(focusableEditCells, [].slice.call(movableHeditedRow.querySelectorAll('.e-input:not(.e-disabled)')));\n if (this.parent.getFrozenMode() === 'Left-Right' || this.parent.getFrozenMode() === 'Right') {\n var rightHEditRow = this.parent.getHeaderContent().querySelector('.e-frozen-right-header ' + '.' + selector);\n focusableEditCells.push.apply(focusableEditCells, [].slice.call(rightHEditRow.querySelectorAll('.e-input:not(.e-disabled)')));\n }\n }\n else {\n var movableEditRow = this.parent.getContent().querySelector('.e-movablecontent ' + '.' + selector);\n focusableEditCells.push.apply(focusableEditCells, [].slice.call(movableEditRow.querySelectorAll('.e-input:not(.e-disabled)')));\n if (this.parent.getFrozenMode() === 'Left-Right' || this.parent.getFrozenMode() === 'Right') {\n var rightFrEditRow = this.parent.getContent().querySelector('.e-frozen-right-content ' + '.' + selector);\n focusableEditCells.push.apply(focusableEditCells, [].slice.call(rightFrEditRow.querySelectorAll('.e-input:not(.e-disabled)')));\n }\n }\n }\n var rowCell = parentsUntil(e.target, 'e-rowcell');\n if ((rowCell === parentsUntil(focusableEditCells[focusableEditCells.length - 1], 'e-rowcell')\n && e.action === 'tab' && !rowCell.classList.contains('e-unboundcell'))\n || (rowCell === parentsUntil(focusableEditCells[0], 'e-rowcell') && e.action === 'shiftTab')\n || e.action === 'escape') {\n var uid = editedRow.getAttribute('data-uid');\n var rows = this.parent.getRows();\n if (this.parent.getFrozenMode() === 'Left-Right' || this.parent.getFrozenMode() === 'Right') {\n rows = this.parent.getFrozenRightRows();\n }\n if (this.parent.getFrozenColumns() || this.parent.getFrozenMode() === 'Left') {\n rows = this.parent.getMovableRows();\n }\n var rowIndex = rows.map(function (m) { return m.getAttribute('data-uid'); }).indexOf(uid);\n if (this.parent.frozenRows && parentsUntil(editedRow, 'e-content')) {\n rowIndex = rowIndex - this.parent.frozenRows;\n }\n if (editedRow.classList.contains('e-addedrow')) {\n rowIndex = 0;\n }\n if (e.action === 'escape') {\n this.closeEdit();\n }\n else {\n this.endEdit();\n }\n if (this.parent.focusModule.active) {\n this.parent.focusModule.active.matrix.current = [rowIndex, 0];\n }\n }\n }\n }\n };\n Edit.prototype.preventBatch = function (args) {\n this.preventObj = args;\n this.showDialog('BatchSaveLostChanges', this.dialogObj);\n };\n Edit.prototype.executeAction = function () {\n this.preventObj.handler.call(this.preventObj.instance, this.preventObj.arg1, this.preventObj.arg2, this.preventObj.arg3, this.preventObj.arg4, this.preventObj.arg5, this.preventObj.arg6, this.preventObj.arg7, this.preventObj.arg8);\n };\n /**\n * @param {Column[]} cols - specifies the column\n * @returns {void}\n * @hidden\n */\n Edit.prototype.applyFormValidation = function (cols) {\n var gObj = this.parent;\n var frzCols = gObj.isFrozenGrid();\n var isInline = this.parent.editSettings.mode === 'Normal';\n var idx = this.parent.getFrozenMode() === 'Right' && isInline ? 1 : 0;\n var form = this.parent.editSettings.mode !== 'Dialog' ?\n gObj.element.getElementsByClassName('e-gridform')[idx] :\n select('#' + gObj.element.id + '_dialogEdit_wrapper .e-gridform', document);\n var index = this.parent.getFrozenMode() === 'Right' && isInline ? 0 : 1;\n var mForm = gObj.element.getElementsByClassName('e-gridform')[index];\n var rules = {};\n var mRules = {};\n var frRules = {};\n cols = cols ? cols : gObj.getColumns();\n for (var i = 0; i < cols.length; i++) {\n if (!cols[i].visible && (gObj.editSettings.mode !== 'Dialog' || (gObj.groupSettings.columns.indexOf(cols[i].field) === -1\n && gObj.editSettings.mode === 'Dialog'))) {\n continue;\n }\n if (cols[i].validationRules) {\n setValidationRuels(cols[i], index, rules, mRules, frRules, cols.length);\n }\n }\n if (frzCols && this.parent.editSettings.mode !== 'Dialog') {\n this.parent.editModule.mFormObj = this.createFormObj(mForm, mRules);\n if (this.parent.getFrozenMode() === literals.leftRight) {\n var frForm = gObj.element.getElementsByClassName('e-gridform')[2];\n this.parent.editModule.frFormObj = this.createFormObj(frForm, frRules);\n }\n }\n else {\n rules = extend(rules, mRules, frRules);\n }\n this.parent.editModule.formObj = this.createFormObj(form, rules);\n };\n /**\n * @param {HTMLFormElement} form - Defined Form element\n * @param {Object} rules - Defines form rules\n * @returns {FormValidator} Returns formvalidator instance\n * @hidden\n */\n Edit.prototype.createFormObj = function (form, rules) {\n var _this = this;\n return new FormValidator(form, {\n rules: rules,\n locale: this.parent.locale,\n validationComplete: function (args) {\n _this.validationComplete(args);\n },\n customPlacement: function (inputElement, error) {\n var uid = inputElement.getAttribute('e-mappinguid');\n var args = {\n column: _this.parent.getColumnByUid(uid),\n error: error,\n inputElement: inputElement,\n value: inputElement.value\n };\n _this.valErrorPlacement(inputElement, error);\n _this.parent.notify(events.valCustomPlacement, args);\n }\n });\n };\n Edit.prototype.valErrorPlacement = function (inputElement, error) {\n if (this.parent.isEdit) {\n var id = error.getAttribute('for');\n var elem = this.getElemTable(inputElement).querySelector('#' + id + '_Error');\n if (!elem) {\n this.createTooltip(inputElement, error, id, '');\n }\n else {\n elem.querySelector('.e-tip-content').innerHTML = error.outerHTML;\n }\n }\n };\n Edit.prototype.getElemTable = function (inputElement) {\n var isFHdr;\n var gObj = this.parent;\n var table;\n if (gObj.editSettings.mode !== 'Dialog') {\n isFHdr = (gObj.frozenRows && gObj.frozenRows\n > (parseInt(closest(inputElement, '.' + literals.row).getAttribute(literals.dataRowIndex), 10) || 0));\n var field = inputElement.name;\n var col = void 0;\n if (field) {\n col = getColumnModelByFieldName(this.parent, setComplexFieldID(field));\n }\n if (col && gObj.isFrozenGrid()) {\n if (col.getFreezeTableName() === 'frozen-left') {\n table = isFHdr ? gObj.getFrozenVirtualHeader().querySelector('table')\n : gObj.getFrozenVirtualContent().querySelector('table');\n }\n else if (col.getFreezeTableName() === 'frozen-right') {\n table = isFHdr ? gObj.getFrozenRightHeader().querySelector('table')\n : gObj.getFrozenRightContent().querySelector('table');\n }\n else if (col.getFreezeTableName() === 'movable') {\n table = isFHdr ? gObj.getMovableVirtualHeader().querySelector('table')\n : gObj.getMovableVirtualContent().querySelector('table');\n }\n }\n else {\n table = isFHdr ? gObj.getHeaderTable() : gObj.getContentTable();\n }\n }\n else {\n table = select('#' + gObj.element.id + '_dialogEdit_wrapper', document);\n }\n return table;\n };\n Edit.prototype.resetElemPosition = function (elem, args) {\n var td = parentsUntil(args.element, literals.rowCell);\n if (td) {\n var tdRight = td.getBoundingClientRect().right;\n var elemRight = elem.getBoundingClientRect().right;\n if (elemRight > tdRight) {\n var offSet = elemRight - tdRight;\n elem.style.left = (elem.offsetLeft - offSet) + 'px';\n }\n }\n };\n Edit.prototype.validationComplete = function (args) {\n if (this.parent.isEdit) {\n var elem = this.getElemTable(args.element).querySelector('#' + args.inputName + '_Error');\n if (elem) {\n if (args.status === 'failure') {\n elem.style.display = '';\n this.resetElemPosition(elem, args);\n }\n else {\n elem.style.display = 'none';\n }\n }\n }\n };\n Edit.prototype.createTooltip = function (element, error, name, display) {\n var column = this.parent.getColumnByField(name);\n var formObj = this.parent.getFrozenMode() === literals.leftRight && this.parent.editSettings.mode === 'Normal'\n && column.getFreezeTableName() === literals.frozenRight ? this.frFormObj.element : this.formObj.element;\n var customForm = parentsUntil(element, 'e-virtual-validation');\n if (customForm) {\n formObj = this.virtualFormObj.element;\n }\n var gcontent = this.parent.getContent().firstElementChild;\n var frzCols = this.parent.getFrozenColumns() || this.parent.getFrozenLeftColumnsCount()\n || this.parent.getFrozenRightColumnsCount();\n if (frzCols) {\n gcontent = this.parent.getMovableVirtualContent();\n }\n var isScroll = gcontent.scrollHeight > gcontent.clientHeight || gcontent.scrollWidth > gcontent.clientWidth;\n var isInline = this.parent.editSettings.mode !== 'Dialog';\n var td = closest(element, '.' + literals.rowCell);\n var row = closest(element, '.' + literals.row);\n var fCont = this.parent.getContent().querySelector('.' + literals.frozenContent);\n var isFHdr;\n var isFHdrLastRow = false;\n var validationForBottomRowPos;\n var isBatchModeLastRow = false;\n var viewPortRowCount = Math.round(this.parent.getContent().clientHeight / this.parent.getRowHeight()) - 1;\n var rows = !fCont ? [].slice.call(this.parent.getContent().getElementsByClassName(literals.row))\n : [].slice.call(this.parent.getFrozenVirtualContent().getElementsByClassName(literals.row));\n if (this.parent.editSettings.mode === 'Batch') {\n if (viewPortRowCount > 1 && rows.length >= viewPortRowCount\n && rows[rows.length - 1].getAttribute(literals.dataRowIndex) === row.getAttribute(literals.dataRowIndex)) {\n isBatchModeLastRow = true;\n }\n }\n if (isInline) {\n if (this.parent.frozenRows) {\n var fHeraderRows = frzCols ? this.parent.getFrozenVirtualHeader().querySelector(literals.tbody).children\n : this.parent.getHeaderTable().querySelector(literals.tbody).children;\n isFHdr = fHeraderRows.length > (parseInt(row.getAttribute(literals.dataRowIndex), 10) || 0);\n isFHdrLastRow = isFHdr && parseInt(row.getAttribute(literals.dataRowIndex), 10) === fHeraderRows.length - 1;\n }\n if (isFHdrLastRow || (viewPortRowCount > 1 && rows.length >= viewPortRowCount\n && ((this.parent.editSettings.newRowPosition === 'Bottom' && (this.editModule.args\n && this.editModule.args.requestType === 'add')) || (td.classList.contains('e-lastrowcell')\n && !row.classList.contains(literals.addedRow)))) || isBatchModeLastRow) {\n validationForBottomRowPos = true;\n }\n }\n var table = isInline ?\n (isFHdr ? this.parent.getHeaderTable() : this.parent.getContentTable()) :\n select('#' + this.parent.element.id + '_dialogEdit_wrapper .e-dlg-content', document);\n var client = table.getBoundingClientRect();\n var left = isInline ?\n this.parent.element.getBoundingClientRect().left : client.left;\n var input = closest(element, 'td');\n var inputClient = input ? input.getBoundingClientRect() : element.parentElement.getBoundingClientRect();\n var div = this.parent.createElement('div', {\n className: 'e-tooltip-wrap e-lib e-control e-popup e-griderror',\n id: name + '_Error',\n styles: 'display:' + display + ';top:' +\n ((isFHdr ? inputClient.top + inputClient.height : inputClient.bottom - client.top\n - (frzCols ? fCont.scrollTop : 0)) + table.scrollTop + 9) + 'px;left:' +\n (inputClient.left - left + table.scrollLeft + inputClient.width / 2) + 'px;' +\n 'max-width:' + inputClient.width + 'px;text-align:center;'\n });\n if (this.parent.cssClass) {\n div.classList.add(this.parent.cssClass);\n }\n if (isInline && client.left < left) {\n div.style.left = parseInt(div.style.left, 10) - client.left + left + 'px';\n }\n var content = this.parent.createElement('div', { className: 'e-tip-content' });\n content.appendChild(error);\n var arrow;\n if (validationForBottomRowPos) {\n arrow = this.parent.createElement('div', { className: 'e-arrow-tip e-tip-bottom' });\n arrow.appendChild(this.parent.createElement('div', { className: 'e-arrow-tip-outer e-tip-bottom' }));\n arrow.appendChild(this.parent.createElement('div', { className: 'e-arrow-tip-inner e-tip-bottom' }));\n }\n else {\n arrow = this.parent.createElement('div', { className: 'e-arrow-tip e-tip-top' });\n arrow.appendChild(this.parent.createElement('div', { className: 'e-arrow-tip-outer e-tip-top' }));\n arrow.appendChild(this.parent.createElement('div', { className: 'e-arrow-tip-inner e-tip-top' }));\n }\n div.appendChild(content);\n div.appendChild(arrow);\n if (!customForm && (frzCols || this.parent.frozenRows) && this.parent.editSettings.mode !== 'Dialog') {\n var getEditCell = this.parent.editSettings.mode === 'Normal' ?\n closest(element, '.e-editcell') : closest(element, '.' + literals.table);\n getEditCell.style.position = this.parent.currentViewData.length === 0 && closest(element, '.' + literals.movableContent) ?\n 'absolute' : 'relative';\n div.style.position = 'absolute';\n if (this.parent.editSettings.mode === 'Batch' ||\n (closest(element, '.' + literals.frozenContent) || closest(element, '.' + literals.frozenHeader))\n || (this.parent.frozenRows && !frzCols)) {\n formObj.appendChild(div);\n }\n else {\n this.mFormObj.element.appendChild(div);\n }\n }\n else {\n if (customForm) {\n this.virtualFormObj.element.appendChild(div);\n }\n else {\n this.formObj.element.appendChild(div);\n }\n }\n if (!validationForBottomRowPos && isInline && gcontent.getBoundingClientRect().bottom < inputClient.bottom + inputClient.height) {\n var contentDiv = this.parent.getContent().querySelector('.e-content');\n if (frzCols && this.parent.currentViewData.length === 0 && contentDiv.scrollTop === 0) {\n contentDiv.scrollTop = div.offsetHeight + arrow.scrollHeight;\n }\n else {\n gcontent.scrollTop = gcontent.scrollTop + div.offsetHeight + arrow.scrollHeight;\n }\n }\n var lineHeight = parseInt(document.defaultView.getComputedStyle(div, null).getPropertyValue('font-size'), 10);\n if (div.getBoundingClientRect().width < inputClient.width &&\n div.querySelector('label').getBoundingClientRect().height / (lineHeight * 1.2) >= 2) {\n div.style.width = div.style.maxWidth;\n }\n if ((frzCols || this.parent.frozenRows) && this.parent.editSettings.mode !== 'Dialog') {\n div.style.left = input.offsetLeft + (input.offsetWidth / 2 - div.offsetWidth / 2) + 'px';\n }\n else {\n div.style.left = (parseInt(div.style.left, 10) - div.offsetWidth / 2) + 'px';\n }\n if (isInline && !isScroll && !this.parent.allowPaging || frzCols || this.parent.frozenRows) {\n gcontent.style.position = 'static';\n var pos = calculateRelativeBasedPosition(input, div);\n div.style.top = pos.top + inputClient.height + 9 + 'px';\n }\n if (validationForBottomRowPos) {\n if (isScroll && !frzCols && this.parent.height !== 'auto' && !this.parent.frozenRows\n && !this.parent.enableVirtualization) {\n var scrollWidth = gcontent.scrollWidth > gcontent.offsetWidth ? getScrollBarWidth() : 0;\n div.style.bottom = (this.parent.height - gcontent.querySelector('table').offsetHeight\n - scrollWidth) + inputClient.height + 9 + 'px';\n }\n else {\n div.style.bottom = inputClient.height + 9 + 'px';\n }\n if (rows.length < viewPortRowCount && this.parent.editSettings.newRowPosition === 'Bottom' && (this.editModule.args\n && this.editModule.args.requestType === 'add')) {\n var rowsCount = this.parent.frozenRows ? this.parent.frozenRows + (rows.length - 1) : rows.length - 1;\n var rowsHeight = rowsCount * this.parent.getRowHeight();\n var position = this.parent.getContent().clientHeight - rowsHeight;\n div.style.bottom = position + 9 + 'px';\n }\n div.style.top = null;\n }\n };\n /**\n * @param {Column} col - specfies the column\n * @returns {boolean} returns the whether column is grouped\n * @hidden\n */\n Edit.prototype.checkColumnIsGrouped = function (col) {\n return !col.visible && !(this.parent.groupSettings.columns.indexOf(col.field) > -1);\n };\n /**\n * @param {object} editors -specfies the editors\n * @returns {void}\n * @hidden\n */\n Edit.AddEditors = function (editors) {\n Edit.editCellType = extend(Edit.editCellType, editors);\n };\n Edit.editCellType = {\n 'dropdownedit': DropDownEditCell, 'numericedit': NumericEditCell,\n 'datepickeredit': DatePickerEditCell, 'datetimepickeredit': DatePickerEditCell,\n 'booleanedit': BooleanEditCell, 'defaultedit': DefaultEditCell,\n 'templateedit': TemplateEditCell\n };\n return Edit;\n}());\nexport { Edit };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { addClass, removeClass, attributes, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { CellRenderer } from './cell-renderer';\nimport { appendChildren } from '../base/util';\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 role: 'gridcell', tabindex: '-1'\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[i] && !this.childRefs[i].isDestroyed) {\n this.childRefs[i].destroy();\n if (this.childRefs[i].element) {\n this.childRefs[i].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[i]) {\n if (elem[i].querySelector('.e-unboundcelldiv')) {\n elem[i].querySelector('.e-unboundcelldiv').innerHTML = '';\n }\n elem[i].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 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[i].commands) {\n var commandCols = cols[i].commands;\n for (var j = 0; j < commandCols.length; j++) {\n var idInString = 'uid';\n var typeInString = 'type';\n if (commandCols[j][idInString] === uid && commandCols[j][typeInString] === type) {\n commandColumn = commandCols[j];\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[index][typeInString] === type) {\n commandColumn = commandCols[index];\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[i].commands) {\n var commandCol = col[i].commands;\n for (var j = 0; j < commandCol.length; j++) {\n commandCol[j][uid] = getUid('gridcommand');\n }\n }\n }\n };\n return CommandColumn;\n}());\nexport { CommandColumn };\n","import { Draggable, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { removeClass } from '@syncfusion/ej2-base';\nimport { remove, closest as closestElement, classList, extend } from '@syncfusion/ej2-base';\nimport { parentsUntil, removeElement, getPosition, addRemoveActiveClasses, isActionPrevent } from '../base/util';\nimport { setRowsInTbody, resetRowIndex } from '../base/util';\nimport * as events from '../base/constant';\nimport { Scroll } from '../actions/scroll';\nimport * as literals from '../base/string-literals';\n// eslint-disable-next-line valid-jsdoc\n/**\n *\n * Reorder module is used to handle row reordering.\n *\n * @hidden\n */\nvar RowDD = /** @class */ (function () {\n /**\n * Constructor for the Grid print module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @hidden\n */\n function RowDD(parent) {\n var _this = this;\n this.selectedRows = [];\n this.isOverflowBorder = true;\n this.selectedRowColls = [];\n this.isRefresh = true;\n this.isReplaceDragEle = true;\n this.istargetGrid = false;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n this.helper = function (e) {\n var gObj = _this.parent;\n var target = _this.draggable.currentStateTarget;\n var visualElement = _this.parent.createElement('div', {\n className: 'e-cloneproperties e-draganddrop e-grid e-dragclone',\n styles: 'height:\"auto\", z-index:2, width:' + gObj.element.offsetWidth\n });\n var table = _this.parent.createElement('table', { styles: 'width:' + gObj.element.offsetWidth, attrs: { role: 'grid' } });\n var tbody = _this.parent.createElement(literals.tbody, { attrs: { role: 'rowgroup' } });\n if (document.getElementsByClassName('e-griddragarea').length ||\n (gObj.rowDropSettings.targetID && ((!target.classList.contains('e-selectionbackground')\n && gObj.selectionSettings.type !== 'Single') || !parentsUntil(target, 'e-rowcell'))) ||\n (!gObj.rowDropSettings.targetID && !parentsUntil(target, 'e-rowdragdrop'))) {\n return false;\n }\n if (gObj.rowDropSettings.targetID &&\n gObj.selectionSettings.mode === 'Row' && gObj.selectionSettings.type === 'Single') {\n gObj.selectRow(parseInt(_this.draggable.currentStateTarget.parentElement.getAttribute(literals.dataRowIndex), 10));\n }\n _this.startedRow = closestElement(target, 'tr').cloneNode(true);\n var frzCols = _this.parent.isFrozenGrid();\n if (frzCols) {\n var rowIndex = parseInt(closestElement(target, 'tr').getAttribute(literals.dataRowIndex), 10);\n _this.startedRow.innerHTML = '';\n _this.startedRow.innerHTML += gObj.getRowByIndex(rowIndex).innerHTML;\n _this.startedRow.innerHTML += gObj.getMovableRowByIndex(rowIndex).innerHTML;\n if (gObj.getFrozenMode() === literals.leftRight) {\n _this.startedRow.innerHTML += gObj.getFrozenRightRowByIndex(rowIndex).innerHTML;\n }\n }\n _this.processArgs(target);\n var args = {\n selectedRow: _this.rows, dragelement: target,\n cloneElement: visualElement, cancel: false, data: _this.rowData\n };\n var selectedRows = gObj.getSelectedRows();\n gObj.trigger(events.rowDragStartHelper, args);\n var cancel = 'cancel';\n if (args[cancel]) {\n return false;\n }\n removeElement(_this.startedRow, '.e-indentcell');\n removeElement(_this.startedRow, '.e-detailrowcollapse');\n removeElement(_this.startedRow, '.e-detailrowexpand');\n _this.removeCell(_this.startedRow, literals.gridChkBox);\n var exp = new RegExp('e-active', 'g'); //high contrast issue\n _this.startedRow.innerHTML = _this.startedRow.innerHTML.replace(exp, '');\n tbody.appendChild(_this.startedRow);\n if (gObj.getSelectedRowIndexes().length > 1 && _this.startedRow.hasAttribute('aria-selected')) {\n var index = gObj.getFrozenMode() === literals.leftRight ? 3 : 2;\n var dropCountEle = _this.parent.createElement('span', {\n className: 'e-dropitemscount', innerHTML: frzCols ? '' + selectedRows.length / index : '' + selectedRows.length\n });\n visualElement.appendChild(dropCountEle);\n }\n var ele = closestElement(target, 'tr').querySelector('.e-icon-rowdragicon');\n if (ele) {\n ele.classList.add('e-dragstartrow');\n }\n table.appendChild(tbody);\n visualElement.appendChild(table);\n gObj.element.appendChild(visualElement);\n return visualElement;\n };\n this.dragStart = function (e) {\n var gObj = _this.parent;\n if (gObj.element.classList.contains('e-childgrid')) {\n var parentGrid = _this.getParentGrid(gObj.element);\n parentGrid.appendChild(e.dragElement);\n gObj.element.appendChild(gObj.createElement('div', { className: 'e-drag-ref' }));\n }\n document.body.classList.add('e-prevent-select');\n if (document.getElementsByClassName('e-griddragarea').length) {\n return;\n }\n var target = e.target;\n var spanCssEle = _this.parent.element.querySelector('.e-dropitemscount');\n if (_this.parent.getSelectedRecords().length > 1 && spanCssEle) {\n spanCssEle.style.left = _this.parent.element.querySelector('.e-cloneproperties table')\n .offsetWidth - 5 + 'px';\n }\n _this.processArgs(target);\n gObj.trigger(events.rowDragStart, {\n rows: _this.rows, target: e.target,\n draggableType: 'rows', fromIndex: parseInt(_this.rows[0].getAttribute(literals.dataRowIndex), 10),\n data: (Object.keys(_this.rowData[0]).length > 0) ? _this.rowData : _this.currentViewData()\n });\n _this.dragStartData = _this.rowData;\n var dropElem = document.getElementById(gObj.rowDropSettings.targetID);\n if (gObj.rowDropSettings.targetID && dropElem && dropElem.ej2_instances &&\n dropElem.ej2_instances[0].getModuleName() === 'grid') {\n dropElem.ej2_instances[0].getContent().classList.add('e-allowRowDrop');\n }\n };\n this.drag = function (e) {\n var gObj = _this.parent;\n _this.isDropGrid = _this.parent;\n _this.istargetGrid = false;\n if (_this.parent.rowDropSettings.targetID) {\n var dropElement = document.getElementById(gObj.rowDropSettings.targetID);\n _this.isDropGrid = dropElement.ej2_instances[0];\n if (parentsUntil(e.target, 'e-grid')) {\n _this.istargetGrid = _this.parent.rowDropSettings.targetID === parentsUntil(e.target, 'e-grid').id;\n }\n }\n var cloneElement = _this.parent.element.querySelector('.e-cloneproperties');\n if (gObj.element.classList.contains('e-childgrid')) {\n var parentGrid = _this.getParentGrid(gObj.element);\n cloneElement = parentGrid.querySelector('.e-cloneproperties');\n }\n var target = _this.getElementFromPosition(cloneElement, e.event);\n classList(cloneElement, ['e-defaultcur'], ['e-notallowedcur', 'e-movecur', 'e-grabcur']);\n _this.isOverflowBorder = true;\n _this.hoverState = gObj.enableHover;\n var trElement = parentsUntil(target, 'e-grid') ? closestElement(e.target, 'tr') : null;\n if (!e.target) {\n return;\n }\n _this.processArgs(target);\n var args = {\n rows: _this.rows, target: target, draggableType: 'rows',\n data: _this.rowData, originalEvent: e, cancel: false\n };\n gObj.trigger(events.rowDrag, args);\n _this.stopTimer();\n if (args.cancel) {\n return;\n }\n gObj.element.classList.add('e-rowdrag');\n _this.dragTarget = trElement && (parentsUntil(target, 'e-grid').id === cloneElement.parentElement.id ||\n parentsUntil(target, 'e-grid').id) ? _this.isDropGrid.element.querySelector('.e-emptyrow') ? 0 :\n parseInt(trElement.getAttribute('data-rowindex'), 10) : parseInt(_this.startedRow.getAttribute('data-rowindex'), 10);\n if (gObj.rowDropSettings.targetID) {\n var dragParentElement = document.querySelector('.e-drag-ref');\n if (!parentsUntil(target, 'e-grid') ||\n parentsUntil(cloneElement.parentElement, 'e-grid').id === parentsUntil(target, 'e-grid').id || (dragParentElement\n && parentsUntil(dragParentElement.parentElement, 'e-grid').id === parentsUntil(target, 'e-grid').id)) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n }\n else {\n classList(cloneElement, ['e-grabcur'], ['e-notallowedcur']);\n }\n }\n else {\n var elem = parentsUntil(target, 'e-grid');\n if (elem && elem.id === cloneElement.parentElement.id) {\n classList(cloneElement, ['e-movecur'], ['e-defaultcur']);\n }\n else {\n classList(cloneElement, ['e-notallowedcur'], ['e-movecur']);\n }\n }\n if (parentsUntil(_this.isDropGrid.element, 'e-grid')) {\n if ((!_this.isDropGrid.groupSettings.columns.length || e.target.classList.contains('e-selectionbackground')) &&\n !_this.isDropGrid.element.querySelector('.e-emptyrow')) {\n if (parentsUntil(target, 'e-grid') && parentsUntil(target, 'e-grid').id === _this.isDropGrid.element.id) {\n _this.updateScrollPostion(e.event);\n }\n if (((_this.isOverflowBorder || _this.parent.frozenRows > _this.dragTarget) &&\n (parseInt(_this.startedRow.getAttribute(literals.dataRowIndex), 10) !== _this.dragTarget || _this.istargetGrid))\n || (_this.istargetGrid && trElement && _this.isDropGrid.getRowByIndex(_this.isDropGrid.getCurrentViewRecords().length - 1).\n getAttribute('data-uid') === trElement.getAttribute('data-uid'))) {\n _this.moveDragRows(e, _this.startedRow, trElement);\n }\n else {\n var islastRowIndex = void 0;\n if (_this.parent.enableVirtualization) {\n islastRowIndex = trElement && parseInt(trElement.getAttribute(literals.dataRowIndex), 10) ===\n _this.parent.renderModule.data.dataManager.dataSource.json.length - 1;\n }\n else {\n var lastRowUid = _this.parent.getRowByIndex(_this.parent.getCurrentViewRecords().length - 1).\n getAttribute('data-uid');\n islastRowIndex = trElement && lastRowUid === trElement.getAttribute('data-uid') && lastRowUid !==\n _this.startedRow.getAttribute('data-uid');\n }\n if (islastRowIndex && !_this.parent.rowDropSettings.targetID) {\n var bottomborder = _this.parent.createElement('div', { className: 'e-lastrow-dragborder' });\n var gridcontentEle = _this.parent.getContent();\n bottomborder.style.width = _this.parent.element.offsetWidth - _this.getScrollWidth() + 'px';\n if (_this.parent.enableVirtualization) {\n bottomborder.style.zIndex = '1';\n }\n if (!gridcontentEle.getElementsByClassName('e-lastrow-dragborder').length) {\n gridcontentEle.classList.add('e-grid-relative');\n gridcontentEle.appendChild(bottomborder);\n bottomborder.style.bottom = _this.getScrollWidth() + 'px';\n }\n }\n _this.removeBorder(trElement);\n }\n }\n if (target && target.classList.contains(literals.content)\n && !_this.isDropGrid.element.querySelector('.e-emptyrow') && _this.istargetGrid) {\n _this.removeBorder(trElement);\n var rowIndex = _this.isDropGrid.getCurrentViewRecords().length - 1;\n var selector = '.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse';\n var rowElement = [];\n rowElement = [].slice.call(_this.isDropGrid.getRowByIndex(rowIndex).querySelectorAll(selector));\n if (_this.isDropGrid.isFrozenGrid()) {\n rowElement = _this.borderRowElement(rowIndex, selector);\n }\n if (rowElement.length > 0) {\n addRemoveActiveClasses(rowElement, true, 'e-dragborder');\n }\n }\n }\n };\n this.dragStop = function (e) {\n document.body.classList.remove('e-prevent-select');\n if (isActionPrevent(_this.parent)) {\n _this.parent.notify(events.preventBatch, {\n instance: _this, handler: _this.processDragStop, arg1: e\n });\n }\n else {\n _this.processDragStop(e);\n }\n };\n this.processDragStop = function (e) {\n var gObj = _this.parent;\n if (_this.parent.isDestroyed) {\n return;\n }\n var targetEle = _this.getElementFromPosition(e.helper, e.event);\n var target = targetEle && !targetEle.classList.contains('e-dlg-overlay') ?\n targetEle : e.target;\n gObj.element.classList.remove('e-rowdrag');\n var dropElement = document.getElementById(gObj.rowDropSettings.targetID);\n if (gObj.rowDropSettings.targetID && dropElement && dropElement.ej2_instances &&\n dropElement.ej2_instances[0].getModuleName() === 'grid') {\n dropElement.ej2_instances[0].getContent().classList.remove('e-allowRowDrop');\n }\n if (parentsUntil(_this.isDropGrid.element, 'e-grid')) {\n _this.stopTimer();\n _this.isDropGrid.enableHover = _this.hoverState;\n _this.isDropGrid.getContent().classList.remove('e-grid-relative');\n _this.removeBorder(targetEle);\n var stRow = _this.isDropGrid.element.querySelector('.e-dragstartrow');\n if (stRow) {\n stRow.classList.remove('e-dragstartrow');\n }\n }\n _this.processArgs(target);\n var args = {\n target: target, draggableType: 'rows',\n cancel: false,\n fromIndex: parseInt(_this.rows[0].getAttribute(literals.dataRowIndex), 10),\n dropIndex: _this.dragTarget, rows: _this.rows,\n data: (Object.keys(_this.dragStartData[0]).length > 0) ? _this.dragStartData : _this.currentViewData()\n };\n gObj.trigger(events.rowDrop, args, function () {\n if (!(parentsUntil(target, literals.row) || parentsUntil(target, 'e-emptyrow')\n || parentsUntil(target, literals.gridContent)) || args.cancel) {\n _this.dragTarget = null;\n remove(e.helper);\n return;\n }\n _this.isRefresh = false;\n var selectedIndexes = _this.parent.getSelectedRowIndexes();\n if (gObj.isRowDragable()) {\n if (!_this.parent.rowDropSettings.targetID &&\n _this.startedRow.querySelector('td.e-selectionbackground') && selectedIndexes.length > 1 &&\n selectedIndexes.length !== _this.parent.getCurrentViewRecords().length) {\n _this.reorderRows(selectedIndexes, args.dropIndex);\n }\n else {\n _this.reorderRows([parseInt(_this.startedRow.getAttribute(literals.dataRowIndex), 10)], _this.dragTarget);\n }\n _this.dragTarget = null;\n if (!gObj.rowDropSettings.targetID) {\n if (e.helper.classList.contains('e-cloneproperties') && document.querySelector('.' + e.helper.classList[0])) {\n remove(e.helper);\n }\n if (gObj.enableVirtualization) {\n gObj.refresh();\n }\n else {\n _this.rowOrder(args);\n }\n }\n }\n _this.isRefresh = true;\n });\n };\n this.removeCell = function (targetRow, className) {\n return [].slice.call(targetRow.querySelectorAll('td')).filter(function (cell) {\n if (cell.classList.contains(className)) {\n targetRow.deleteCell(cell.cellIndex);\n }\n });\n };\n this.parent = parent;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.initialEnd, this.initializeDrag, this);\n this.parent.on(events.columnDrop, this.columnDrop, this);\n this.parent.on(events.rowDragAndDropComplete, this.onActionComplete, this);\n this.onDataBoundFn = this.onDataBound.bind(this);\n this.parent.addEventListener(events.dataBound, this.onDataBoundFn);\n this.parent.on(events.uiUpdate, this.enableAfterRender, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n RowDD.prototype.getParentGrid = function (childGrid) {\n var parentGrid = childGrid;\n var parentGridObtained = false;\n while (!parentGridObtained) {\n if (parentGrid.ej2_instances[0].parentDetails) {\n parentGrid = document.getElementById(parentGrid.ej2_instances[0].parentDetails.parentID);\n }\n if (!parentGrid.classList.contains('e-childgrid')) {\n parentGridObtained = true;\n }\n }\n return parentGrid;\n };\n RowDD.prototype.refreshRow = function (args, tbody, mtbody, frTbody, target, mTarget, frTarget) {\n var gObj = this.parent;\n var frzCols = gObj.isFrozenGrid();\n var isLeftRight = gObj.getFrozenMode() === literals.leftRight;\n var tbodyMovableHeader;\n var tbodyMovableContent;\n var frHdr;\n var frCnt;\n var tbodyContent = gObj.getContentTable().querySelector(literals.tbody);\n var tbodyHeader = gObj.getHeaderTable().querySelector(literals.tbody);\n if (frzCols) {\n tbodyMovableHeader = gObj.getMovableHeaderTbody();\n tbodyMovableContent = gObj.getMovableContentTbody();\n if (isLeftRight) {\n frHdr = gObj.getFrozenRightHeaderTbody();\n frCnt = gObj.getFrozenRightContentTbody();\n }\n }\n var index = gObj.getFrozenMode() === literals.leftRight ? 3 : 2;\n for (var i = 0, len = args.rows.length; i < len; i++) {\n if (frzCols) {\n if (i % index === 0) {\n tbody.insertBefore(args.rows[i], target);\n }\n else if (i % index === 1) {\n mtbody.insertBefore(args.rows[i], mTarget);\n }\n else {\n frTbody.insertBefore(args.rows[i], frTarget);\n }\n }\n else {\n tbody.insertBefore(args.rows[i], target);\n }\n }\n var tr = [].slice.call(tbody.getElementsByClassName(literals.row));\n var mtr;\n var frTr;\n if (frzCols) {\n mtr = [].slice.call(mtbody.getElementsByClassName(literals.row));\n if (isLeftRight) {\n frTr = [].slice.call(frTbody.getElementsByClassName(literals.row));\n }\n }\n this.refreshData(tr, mtr, frTr);\n if (this.parent.frozenRows) {\n var _loop_1 = function (i, len) {\n if (i < this_1.parent.frozenRows) {\n setRowsInTbody(tbodyHeader, tbodyMovableHeader, frHdr, tr, mtr, frTr, function (tbody, rows) {\n tbody.appendChild(rows[i]);\n });\n }\n else {\n setRowsInTbody(tbodyContent, tbodyMovableContent, frCnt, tr, mtr, frTr, function (tbody, rows) {\n tbody.appendChild(rows[i]);\n });\n }\n };\n var this_1 = this;\n for (var i = 0, len = tr.length; i < len; i++) {\n _loop_1(i, len);\n }\n }\n };\n RowDD.prototype.updateFrozenRowreOrder = function (args) {\n var gObj = this.parent;\n var tbodyMovH;\n var tbodyMovC;\n var tbodyFrH;\n var tbodyFrC;\n var frzCols = this.parent.isFrozenGrid();\n var isLeftRight = gObj.getFrozenMode() === literals.leftRight;\n var tbodyC = gObj.getContentTable().querySelector(literals.tbody);\n var tbodyH = gObj.getHeaderTable().querySelector(literals.tbody);\n if (frzCols) {\n tbodyMovH = gObj.getMovableHeaderTbody();\n tbodyMovC = gObj.getMovableContentTbody();\n if (isLeftRight) {\n tbodyFrH = gObj.getFrozenRightHeaderTbody();\n tbodyFrC = gObj.getFrozenRightContentTbody();\n }\n }\n var tr = [].slice.call(tbodyH.getElementsByClassName(literals.row)).concat([].slice.call(tbodyC.getElementsByClassName(literals.row)));\n var mtr;\n var frTr;\n if (frzCols) {\n mtr = [].slice.call(tbodyMovH.getElementsByClassName(literals.row))\n .concat([].slice.call(tbodyMovC.getElementsByClassName(literals.row)));\n if (isLeftRight) {\n frTr = [].slice.call(tbodyFrH.getElementsByClassName(literals.row))\n .concat([].slice.call(tbodyFrC.getElementsByClassName(literals.row)));\n }\n }\n var tbody = gObj.createElement(literals.tbody, { attrs: { role: 'rowgroup' } });\n var mtbody = gObj.createElement(literals.tbody, { attrs: { role: 'rowgroup' } });\n var frTbody = gObj.createElement(literals.tbody, { attrs: { role: 'rowgroup' } });\n this.parent.clearSelection();\n var targetRows = this.refreshRowTarget(args);\n for (var i = 0, len = tr.length; i < len; i++) {\n tbody.appendChild(tr[i]);\n if (frzCols) {\n mtbody.appendChild(mtr[i]);\n if (isLeftRight) {\n frTbody.appendChild(frTr[i]);\n }\n }\n }\n this.refreshRow(args, tbody, mtbody, frTbody, targetRows.target, targetRows.mTarget, targetRows.frTarget);\n };\n RowDD.prototype.refreshRowTarget = function (args) {\n var gObj = this.parent;\n var mTr;\n var frTr;\n var targetIdx = parseInt(args.target.parentElement.getAttribute(literals.dataRowIndex), 10);\n if (args.fromIndex < args.dropIndex || args.fromIndex === args.dropIndex) {\n targetIdx = targetIdx + 1;\n }\n var tr = gObj.getRowByIndex(targetIdx);\n if (gObj.isFrozenGrid()) {\n mTr = gObj.getMovableRowByIndex(targetIdx);\n if (gObj.getFrozenMode() === literals.leftRight) {\n frTr = gObj.getFrozenRightRowByIndex(targetIdx);\n }\n }\n var rows = {\n target: tr, mTarget: mTr, frTarget: frTr\n };\n return rows;\n };\n RowDD.prototype.updateFrozenColumnreOrder = function (args) {\n var gObj = this.parent;\n var mtbody;\n var frTbody;\n var frzCols = this.parent.isFrozenGrid();\n var tbody = gObj.getContentTable().querySelector(literals.tbody);\n if (frzCols) {\n mtbody = gObj.getMovableContentTbody();\n if (gObj.getFrozenMode() === literals.leftRight) {\n frTbody = gObj.getFrozenRightContentTbody();\n }\n }\n this.parent.clearSelection();\n var targetRows = this.refreshRowTarget(args);\n this.refreshRow(args, tbody, mtbody, frTbody, targetRows.target, targetRows.mTarget, targetRows.frTarget);\n };\n RowDD.prototype.refreshData = function (tr, mtr, frTr) {\n var rowObj = {};\n var movobj = {};\n var frObj = {};\n var recordobj = {};\n var rowObjects = this.parent.getRowsObject();\n var movbObject = this.parent.getMovableRowsObject();\n var frRightObject = this.parent.getFrozenRightRowsObject();\n var currentViewData = this.parent.getCurrentViewRecords();\n for (var i = 0, len = tr.length; i < len; i++) {\n var index = parseInt(tr[i].getAttribute(literals.dataRowIndex), 10);\n rowObj[i] = rowObjects[index];\n recordobj[i] = currentViewData[index];\n if (this.parent.isFrozenGrid()) {\n movobj[i] = movbObject[index];\n if (frTr) {\n frObj[i] = frRightObject[index];\n }\n }\n }\n var rows = this.parent.getRows();\n var movbRows;\n var frRightRows;\n if (this.parent.isFrozenGrid()) {\n movbRows = this.parent.getMovableRows();\n if (frTr) {\n frRightRows = this.parent.getFrozenRightRows();\n }\n }\n for (var i = 0, len = tr.length; i < len; i++) {\n rows[i] = tr[i];\n rowObjects[i] = rowObj[i];\n currentViewData[i] = recordobj[i];\n if (this.parent.isFrozenGrid()) {\n movbRows[i] = mtr[i];\n movbObject[i] = movobj[i];\n if (frTr) {\n frRightRows[i] = frTr[i];\n frRightObject[i] = frObj[i];\n }\n }\n }\n resetRowIndex(this.parent, rowObjects, tr);\n if (this.parent.isFrozenGrid()) {\n resetRowIndex(this.parent, movbObject, mtr);\n if (frTr) {\n resetRowIndex(this.parent, frRightObject, frTr);\n }\n }\n };\n RowDD.prototype.rowOrder = function (args) {\n if (args.dropIndex === args.fromIndex || isNaN(args.dropIndex)) {\n return;\n }\n if (this.parent.isDetail()) {\n this.parent.detailCollapseAll();\n var rows = [].slice.call(this.parent.getContentTable().querySelector(literals.tbody).children);\n var rowObjects = this.parent.getRowsObject();\n rows.filter(function (row) {\n if (row.classList.contains('e-detailrow')) {\n row.remove();\n }\n });\n for (var i = 0, len = rowObjects.length; i < len; i++) {\n if (!rowObjects[i]) {\n break;\n }\n if (rowObjects[i].isDetailRow) {\n this.parent.getRowsObject().splice(i, 1);\n i--;\n }\n }\n }\n if (args.target.classList.contains('e-rowcelldrag') || args.target.classList.contains('e-dtdiagonalright')\n || args.target.classList.contains('e-dtdiagonaldown')) {\n args.target = args.target.parentElement;\n }\n if (!args.target.classList.contains('e-rowcell') && parentsUntil(args.target, 'e-rowcell')) {\n args.target = parentsUntil(args.target, 'e-rowcell');\n }\n if (this.parent.frozenRows) {\n this.updateFrozenRowreOrder(args);\n }\n else {\n this.updateFrozenColumnreOrder(args);\n }\n if (this.selectedRowColls.length > 0) {\n this.parent.selectRows(this.selectedRowColls);\n var indexes = [];\n if (this.parent.filterSettings.columns.length || this.parent.sortSettings.columns.length) {\n for (var i = 0, len = args.rows.length; i < len; i++) {\n indexes.push(parseInt(args.rows[i].getAttribute(literals.dataRowIndex), 10));\n }\n this.selectedRowColls = indexes;\n }\n this.selectedRowColls = [];\n }\n };\n RowDD.prototype.currentViewData = function () {\n var selectedIndexes = this.parent.getSelectedRowIndexes();\n var currentVdata = [];\n var fromIdx = parseInt(this.startedRow.getAttribute(literals.dataRowIndex), 10);\n for (var i = 0, n = selectedIndexes.length; i < n; i++) {\n var currentV = 'currentViewData';\n currentVdata[i] = this.parent[currentV][selectedIndexes[i]];\n }\n if (!this.parent.rowDropSettings.targetID && selectedIndexes.length === 0) {\n currentVdata[0] = this.parent.currentViewData[fromIdx];\n }\n return currentVdata;\n };\n RowDD.prototype.saveChange = function (changeRecords, query) {\n var _this = this;\n this.parent.getDataModule().saveChanges(changeRecords, this.parent.getPrimaryKeyFieldNames()[0], {}, query)\n .then(function () {\n _this.parent.notify(events.modelChanged, {\n type: events.actionBegin, requestType: 'rowdraganddrop'\n });\n }).catch(function (e) {\n var error = 'error';\n var message = 'message';\n if (!isNullOrUndefined(e[error]) && !isNullOrUndefined(e[error][message])) {\n e[error] = e[error][message];\n }\n _this.parent.trigger(events.actionFailure, e);\n });\n };\n RowDD.prototype.reorderRows = function (fromIndexes, toIndex) {\n var selectedIndexes = this.parent.getSelectedRowIndexes();\n var selectedRecords = [];\n var draggedRecords = [];\n var currentViewData = this.parent.renderModule.data.dataManager.dataSource.json;\n var skip = this.parent.allowPaging ?\n (this.parent.pageSettings.currentPage * this.parent.pageSettings.pageSize) - this.parent.pageSettings.pageSize : 0;\n var dropIdx = toIndex + skip;\n var actualIdx = fromIndexes[0] + skip;\n for (var i = 0, len = fromIndexes.length; i < len; i++) {\n draggedRecords[i] = currentViewData[fromIndexes[i] + skip];\n }\n for (var i = 0, len = selectedIndexes.length; i < len; i++) {\n selectedRecords[i] = currentViewData[selectedIndexes[i] + skip];\n }\n for (var i = 0, len = draggedRecords.length; i < len; i++) {\n if (i !== 0) {\n for (var j = 0, len1 = currentViewData.length; j < len1; j++) {\n if (JSON.stringify(this.parent.renderModule.data.dataManager.dataSource.json[j]) ===\n JSON.stringify(draggedRecords[i])) {\n actualIdx = j;\n break;\n }\n }\n for (var j = 0, len1 = currentViewData.length; j < len1; j++) {\n if (JSON.stringify(this.parent.renderModule.data.dataManager.dataSource.json[j]) === JSON.stringify(draggedRecords[i - 1])) {\n if (actualIdx > j) {\n dropIdx = j + 1;\n }\n break;\n }\n }\n }\n this.reorderRow(actualIdx - skip, dropIdx - skip);\n }\n if (this.isRefresh) {\n this.parent.notify(events.modelChanged, {\n type: events.actionBegin, requestType: 'rowdraganddrop'\n });\n }\n for (var i = 0, len = selectedRecords.length; i < len; i++) {\n for (var j = 0, len1 = currentViewData.length; j < len1; j++) {\n if (JSON.stringify(this.parent.renderModule.data.dataManager.dataSource.json[j]) === JSON.stringify(selectedRecords[i])) {\n selectedIndexes[i] = j - skip;\n break;\n }\n }\n }\n this.selectedRowColls = selectedIndexes;\n };\n RowDD.prototype.stopTimer = function () {\n window.clearInterval(this.timer);\n };\n /**\n * To trigger action complete event.\n *\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n RowDD.prototype.onActionComplete = function (e) {\n this.parent.trigger(events.actionComplete, extend(e, { type: events.actionComplete, requestType: 'rowdraganddrop' }));\n };\n RowDD.prototype.initializeDrag = function () {\n var gObj = this.parent;\n this.draggable = new Draggable(gObj.element, {\n dragTarget: '.e-rowcelldrag, .e-rowdragdrop, .e-rowcell',\n distance: 5,\n helper: this.helper,\n dragStart: this.dragStart,\n drag: this.drag,\n dragStop: this.dragStop,\n isReplaceDragEle: this.isReplaceDragEle,\n isPreventSelect: false\n });\n };\n RowDD.prototype.updateScrollPostion = function (e) {\n var _this = this;\n var y = getPosition(e).y;\n var cliRect = this.isDropGrid.getContent().getBoundingClientRect();\n var rowHeight = this.isDropGrid.getRowHeight() - 15;\n var scrollElem = this.isDropGrid.getContent().firstElementChild;\n var virtualScrollbtm = this.parent.enableVirtualization ? 20 : 0;\n if (cliRect.top >= y) {\n var scrollPixel_1 = -(this.isDropGrid.getRowHeight());\n this.isOverflowBorder = false;\n this.timer = window.setInterval(function () { _this.setScrollDown(scrollElem, scrollPixel_1); }, 200);\n }\n else if (cliRect.top + this.isDropGrid.getContent().clientHeight - rowHeight - 33 - virtualScrollbtm <= y) {\n var scrollPixel_2 = (this.isDropGrid.getRowHeight());\n this.isOverflowBorder = false;\n this.timer = window.setInterval(function () { _this.setScrollDown(scrollElem, scrollPixel_2); }, 200);\n }\n };\n RowDD.prototype.setScrollDown = function (scrollElem, scrollPixel) {\n scrollElem.scrollTop = scrollElem.scrollTop + scrollPixel;\n };\n RowDD.prototype.moveDragRows = function (e, startedRow, targetRow) {\n var cloneElement = this.parent.element.querySelector('.e-cloneproperties');\n if (this.parent.element.classList.contains('e-childgrid')) {\n var parentGrid = this.getParentGrid(this.parent.element);\n cloneElement = parentGrid.querySelector('.e-cloneproperties');\n }\n var element = closestElement(e.target, 'tr');\n if (parentsUntil(element, 'e-grid') &&\n (parentsUntil(cloneElement.parentElement, 'e-grid').id === parentsUntil(element, 'e-grid').id || this.istargetGrid)) {\n var targetElement = element ?\n element : this.startedRow;\n this.setBorder(targetElement, e.event, startedRow, targetRow);\n }\n };\n RowDD.prototype.setBorder = function (element, event, startedRow, targetRow) {\n var node = this.parent.element;\n if (this.istargetGrid) {\n node = this.isDropGrid.element;\n }\n var cloneElement = this.parent.element.querySelector('.e-cloneproperties');\n this.removeFirstRowBorder(element);\n this.removeLastRowBorder(element);\n if (parentsUntil(element, 'e-grid') && element.classList.contains(literals.row) && ((!this.parent.rowDropSettings.targetID &&\n parentsUntil(cloneElement.parentElement, 'e-grid').id === parentsUntil(element, 'e-grid').id) || this.istargetGrid)) {\n removeClass(node.querySelectorAll('.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse'), ['e-dragborder']);\n var rowElement = [];\n var targetRowIndex = parseInt(targetRow.getAttribute(literals.dataRowIndex), 10);\n if (targetRow && targetRowIndex === 0) {\n var div = this.parent.createElement('div', { className: 'e-firstrow-dragborder' });\n var gridheaderEle = this.isDropGrid.getHeaderContent();\n gridheaderEle.classList.add('e-grid-relative');\n div.style.width = node.offsetWidth - this.getScrollWidth() + 'px';\n if (!gridheaderEle.getElementsByClassName('e-firstrow-dragborder').length) {\n gridheaderEle.appendChild(div);\n }\n }\n else if (this.parent.rowDropSettings.targetID && targetRow) {\n element = this.isDropGrid.getRowByIndex(targetRowIndex - 1);\n rowElement = [].slice.call(element.querySelectorAll('.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse'));\n }\n else if (targetRow && parseInt(startedRow.getAttribute(literals.dataRowIndex), 10) > targetRowIndex) {\n element = this.parent.getRowByIndex(targetRowIndex - 1);\n rowElement = [].slice.call(element.querySelectorAll('.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse'));\n }\n else {\n rowElement = [].slice.call(element.querySelectorAll('.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse'));\n }\n var frzCols = this.parent.isFrozenGrid();\n if (targetRow && targetRowIndex !== 0 && frzCols) {\n var rowIndex = parseInt(element.getAttribute(literals.dataRowIndex), 10);\n var selector = '.e-rowcell,.e-rowdragdrop,.e-detailrowcollapse';\n rowElement = this.borderRowElement(rowIndex, selector);\n }\n if (rowElement.length > 0) {\n addRemoveActiveClasses(rowElement, true, 'e-dragborder');\n }\n }\n };\n RowDD.prototype.borderRowElement = function (rowIndex, selector) {\n var lastRow = [];\n lastRow = [].slice.call(this.isDropGrid.getRowByIndex(rowIndex).querySelectorAll(selector)).\n concat([].slice.call(this.isDropGrid.getMovableRowByIndex(rowIndex).querySelectorAll(selector)));\n if (this.isDropGrid.getFrozenMode() === literals.leftRight) {\n lastRow = lastRow.concat([].slice.call(this.isDropGrid.getFrozenRightRowByIndex(rowIndex).querySelectorAll(selector)));\n }\n return lastRow;\n };\n RowDD.prototype.getScrollWidth = function () {\n var scrollElem = this.parent.getContent().firstElementChild;\n return scrollElem.scrollWidth > scrollElem.offsetWidth ? Scroll.getScrollBarWidth() : 0;\n };\n RowDD.prototype.removeFirstRowBorder = function (element) {\n if (this.isDropGrid.element.getElementsByClassName('e-firstrow-dragborder').length > 0 && element &&\n element.rowIndex !== 0) {\n remove(this.isDropGrid.element.getElementsByClassName('e-firstrow-dragborder')[0]);\n }\n };\n RowDD.prototype.removeLastRowBorder = function (element) {\n var islastRowIndex;\n if (this.parent.enableVirtualization) {\n islastRowIndex = element && parseInt(element.getAttribute(literals.dataRowIndex), 10) !==\n this.parent.renderModule.data.dataManager.dataSource.json.length - 1;\n }\n else {\n islastRowIndex = element &&\n this.parent.getRowByIndex(this.parent.getCurrentViewRecords().length - 1).getAttribute('data-uid') !==\n element.getAttribute('data-uid');\n }\n if (this.parent.element.getElementsByClassName('e-lastrow-dragborder').length > 0 && element && islastRowIndex) {\n remove(this.parent.element.getElementsByClassName('e-lastrow-dragborder')[0]);\n }\n };\n RowDD.prototype.removeBorder = function (element) {\n this.removeFirstRowBorder(element);\n if (!this.parent.rowDropSettings.targetID) {\n this.removeLastRowBorder(element);\n }\n element = (this.isDropGrid.isFrozenGrid() ? this.isDropGrid.getMovableRows() : this.isDropGrid.getRows()).filter(function (row) {\n return row.querySelector('td.e-dragborder');\n })[0];\n if (element) {\n var rowElement = [].slice.call(element.getElementsByClassName('e-dragborder'));\n if (this.parent.isFrozenGrid()) {\n var rowIndex = parseInt(element.getAttribute(literals.dataRowIndex), 10);\n var selector = '.e-dragborder';\n rowElement = this.borderRowElement(rowIndex, selector);\n }\n addRemoveActiveClasses(rowElement, false, 'e-dragborder');\n }\n };\n RowDD.prototype.getElementFromPosition = function (element, event) {\n var position = getPosition(event);\n element.style.display = 'none';\n var target = document.elementFromPoint(position.x, position.y);\n element.style.display = '';\n return target;\n };\n RowDD.prototype.onDataBound = function () {\n if (this.selectedRowColls.length > 0 && (this.parent.enableVirtualization || this.parent.allowRowDragAndDrop)) {\n this.parent.selectRows(this.selectedRowColls);\n this.selectedRowColls = [];\n }\n };\n RowDD.prototype.getTargetIdx = function (targetRow) {\n return targetRow ? parseInt(targetRow.getAttribute(literals.dataRowIndex), 10) : 0;\n };\n RowDD.prototype.singleRowDrop = function (e) {\n var targetRow = closestElement(e.target, 'tr');\n var srcControl = e.droppedElement.parentElement.ej2_instances[0];\n var currentIndex = targetRow ? targetRow.rowIndex : srcControl.currentViewData.length - 1;\n this.reorderRow(this.startedRowIndex, currentIndex);\n };\n RowDD.prototype.columnDrop = function (e) {\n var gObj = this.parent;\n if (e.droppedElement.getAttribute('action') !== 'grouping' &&\n (parentsUntil(e.target, literals.row) || parentsUntil(e.target, 'e-emptyrow') || parentsUntil(e.target, literals.gridContent))) {\n var targetRow = closestElement(e.target, 'tr');\n var srcControl = void 0;\n var currentIndex = void 0;\n var dragParentElement = document.querySelector('.e-drag-ref');\n if ((e.droppedElement.querySelector('tr').getAttribute('single-dragrow') !== 'true' &&\n (e.droppedElement.parentElement.id === gObj.element.id || (dragParentElement\n && dragParentElement.parentElement.id === gObj.element.id)))\n || (e.droppedElement.querySelector('tr').getAttribute('single-dragrow') === 'true' &&\n e.droppedElement.parentElement.id !== gObj.element.id)) {\n return;\n }\n if (e.droppedElement.parentElement.id !== gObj.element.id) {\n if (dragParentElement) {\n srcControl = dragParentElement.parentElement.ej2_instances[0];\n remove(dragParentElement);\n }\n else {\n srcControl = e.droppedElement.parentElement.ej2_instances[0];\n }\n }\n else if (this.isSingleRowDragDrop || e.droppedElement.querySelector('tr').getAttribute('single-dragrow') === 'true') {\n this.singleRowDrop(e);\n return;\n }\n if (srcControl.element.id !== gObj.element.id && srcControl.rowDropSettings.targetID !== gObj.element.id) {\n return;\n }\n var records = srcControl.getSelectedRecords();\n var targetIndex = currentIndex = this.getTargetIdx(targetRow);\n if (isNaN(targetIndex)) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n targetIndex = currentIndex = 0;\n }\n if (gObj.allowPaging) {\n targetIndex = targetIndex + (gObj.pageSettings.currentPage * gObj.pageSettings.pageSize) - gObj.pageSettings.pageSize;\n }\n //Todo: drag and drop mapper & BatchChanges\n gObj.notify(events.rowsAdded, { toIndex: targetIndex, records: records });\n gObj.notify(events.modelChanged, {\n type: events.actionBegin, requestType: 'rowdraganddrop'\n });\n var selectedRows = srcControl.getSelectedRowIndexes();\n var skip = srcControl.allowPaging ?\n (srcControl.pageSettings.currentPage * srcControl.pageSettings.pageSize) - srcControl.pageSettings.pageSize : 0;\n this.selectedRows = [];\n for (var i = 0, len = records.length; i < len; i++) {\n this.selectedRows.push(skip + selectedRows[i]);\n }\n srcControl.notify(events.rowsRemoved, { indexes: this.selectedRows, records: records });\n srcControl.notify(events.modelChanged, {\n type: events.actionBegin, requestType: 'rowdraganddrop'\n });\n }\n };\n RowDD.prototype.reorderRow = function (fromIndexes, toIndex) {\n var gObj = this.parent;\n if (!gObj.sortSettings.columns.length && !gObj.groupSettings.columns.length && !gObj.filterSettings.columns.length) {\n //Todo: drag and drop mapper & BatchChanges\n var skip = gObj.allowPaging ?\n (gObj.pageSettings.currentPage * gObj.pageSettings.pageSize) - gObj.pageSettings.pageSize : 0;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var fromIndex = fromIndexes;\n toIndex = toIndex + skip;\n this.selectedRows = gObj.getSelectedRowIndexes();\n gObj.notify(events.rowPositionChanged, {\n fromIndex: fromIndexes + skip,\n toIndex: toIndex\n });\n }\n };\n RowDD.prototype.enableAfterRender = function (e) {\n if (e.module === this.getModuleName() && e.enable) {\n this.initializeDrag();\n }\n };\n /**\n * To destroy the print\n *\n * @returns {void}\n * @hidden\n */\n RowDD.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (this.parent.isDestroyed || !gridElement || (!gridElement.querySelector('.' + literals.gridHeader) &&\n !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n this.draggable.destroy();\n this.parent.off(events.initialEnd, this.initializeDrag);\n this.parent.off(events.columnDrop, this.columnDrop);\n this.parent.off(events.rowDragAndDropComplete, this.onActionComplete);\n this.parent.removeEventListener(events.dataBound, this.onDataBoundFn);\n this.parent.off(events.uiUpdate, this.enableAfterRender);\n this.parent.off(events.destroy, this.destroy);\n //destory ejdrag and drop\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n RowDD.prototype.getModuleName = function () {\n return 'rowDragAndDrop';\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n RowDD.prototype.processArgs = function (target) {\n var gObj = this.parent;\n var dragIdx = parseInt(this.startedRow.getAttribute(literals.dataRowIndex), 10);\n if ((gObj.getSelectedRecords().length > 0 && this.startedRow.cells[0].classList.contains('e-selectionbackground') === false)\n || gObj.getSelectedRecords().length === 0) {\n if (this.parent.enableVirtualization) {\n this.rows = [this.startedRow];\n }\n else {\n this.rows = [this.parent.getRowByIndex(dragIdx)];\n if (gObj.isFrozenGrid()) {\n this.rows = [gObj.getRowByIndex(dragIdx), gObj.getMovableRowByIndex(dragIdx)];\n if (gObj.getFrozenMode() === literals.leftRight) {\n this.rows = [\n gObj.getRowByIndex(dragIdx), gObj.getMovableRowByIndex(dragIdx), gObj.getFrozenRightRowByIndex(dragIdx)\n ];\n }\n }\n }\n this.rowData = [this.parent.getRowInfo((this.startedRow).querySelector('.' + literals.rowCell)).rowData];\n }\n else {\n this.rows = gObj.getSelectedRows();\n this.rowData = gObj.getSelectedRecords();\n }\n };\n return RowDD;\n}());\nexport { RowDD };\n","import { removeClass, addClass, extend } from '@syncfusion/ej2-base';\nimport { closest, classList, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Grid } from '../base/grid';\nimport { parents, getUid, appendChildren, isComplexField, getObject } from '../base/util';\nimport * as events from '../base/constant';\nimport { AriaService } from '../services/aria-service';\nimport { Row } from '../models/row';\nimport { Cell } from '../models/cell';\nimport { CellType } from '../base/enum';\nimport * as literals from '../base/string-literals';\n/**\n * The `DetailRow` module is used to handle detail template and hierarchy Grid operations.\n */\nvar DetailRow = /** @class */ (function () {\n /**\n * Constructor for the Grid detail template module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {ServiceLocator} locator - specifes the serviceLocator\n * @hidden\n */\n function DetailRow(parent, locator) {\n //Internal variables\n this.aria = new AriaService();\n this.childRefs = [];\n this.parent = parent;\n if (this.parent.isDestroyed) {\n return;\n }\n this.focus = locator.getService('focus');\n this.parent.on(events.click, this.clickHandler, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.keyPressed, this.keyPressHandler, this);\n this.parent.on(events.expandChildGrid, this.expand, this);\n this.parent.on(events.columnVisibilityChanged, this.refreshColSpan, this);\n this.parent.on(events.destroy, this.destroyChildGrids, this);\n this.parent.on(events.destroyChildGrid, this.destroyChildGrids, this);\n }\n DetailRow.prototype.clickHandler = function (e) {\n this.toogleExpandcollapse(closest(e.target, 'td'));\n };\n DetailRow.prototype.toogleExpandcollapse = function (target) {\n var gObj = this.parent;\n var table = this.parent.getContentTable();\n var lastrowIdx = this.parent.getCurrentViewRecords().length - 1;\n var parent = 'parentDetails';\n var childGrid;\n var isExpanded = target && target.classList.contains('e-detailrowcollapse');\n if (!(target && (target.classList.contains('e-detailrowcollapse') || target.classList.contains('e-detailrowexpand')))) {\n return;\n }\n var tr = target.parentElement;\n var uid = tr.getAttribute('data-uid');\n var rowObj = gObj.getRowObjectFromUID(uid);\n var nextRow = this.parent.getContentTable().querySelector(literals.tbody).children[tr.rowIndex + 1];\n if (target.classList.contains('e-detailrowcollapse')) {\n var data = rowObj.data;\n if (this.isDetailRow(nextRow)) {\n nextRow.style.display = '';\n gObj.notify(events.detailStateChange, { data: data,\n childGrid: gObj.childGrid, detailElement: target, isExpanded: isExpanded });\n }\n else if (gObj.getDetailTemplate() || gObj.childGrid) {\n var rowId = getUid('grid-row');\n var detailRow = this.parent.createElement('tr', { className: 'e-detailrow', attrs: { 'data-uid': rowId, role: 'row' } });\n var detailCell = this.parent.createElement('td', { className: 'e-detailcell' });\n var colSpan = this.parent.getVisibleColumns().length;\n if (this.parent.allowRowDragAndDrop) {\n colSpan++;\n }\n detailCell.setAttribute('colspan', colSpan.toString());\n var row = new Row({\n isDataRow: true,\n isExpand: true,\n uid: rowId,\n isDetailRow: true,\n cells: [new Cell({ cellType: CellType.Indent }), new Cell({ isDataCell: true, visible: true })]\n });\n row.parentUid = rowObj.uid;\n for (var i = 0, len = gObj.groupSettings.columns.length; i < len; i++) {\n detailRow.appendChild(this.parent.createElement('td', { className: 'e-indentcell' }));\n row.cells.unshift(new Cell({ cellType: CellType.Indent }));\n }\n detailRow.appendChild(this.parent.createElement('td', { className: 'e-detailindentcell' }));\n detailRow.appendChild(detailCell);\n tr.parentNode.insertBefore(detailRow, tr.nextSibling);\n if (gObj.detailTemplate) {\n var isReactCompiler = this.parent.isReact && typeof (gObj.detailTemplate) !== 'string';\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n var detailTemplateID = gObj.element.id + 'detailTemplate';\n if (isReactCompiler || isReactChild) {\n gObj.getDetailTemplate()(data, gObj, 'detailTemplate', detailTemplateID, null, null, detailCell);\n this.parent.renderTemplates();\n }\n else {\n appendChildren(detailCell, gObj.getDetailTemplate()(data, gObj, 'detailTemplate', detailTemplateID, undefined, undefined, undefined, this.parent['root']));\n }\n }\n else {\n childGrid = new Grid(this.getGridModel(gObj, rowObj, gObj.printMode));\n this.childRefs.push(childGrid);\n if (childGrid.query) {\n childGrid.query = childGrid.query.clone();\n }\n childGrid[parent] = {\n parentID: gObj.element.id,\n parentPrimaryKeys: gObj.getPrimaryKeyFieldNames(),\n parentKeyField: gObj.childGrid.queryString,\n parentKeyFieldValue: gObj.childGrid.queryString && isComplexField(gObj.childGrid.queryString) ?\n getObject(gObj.childGrid.queryString, data) : data[gObj.childGrid.queryString],\n parentRowData: data\n };\n if (gObj.isReact) {\n childGrid.parentDetails.parentInstObj = gObj;\n }\n else if (gObj.parentDetails && gObj.parentDetails.parentInstObj && gObj.parentDetails.parentInstObj.isReact) {\n childGrid.parentDetails.parentInstObj = gObj.parentDetails.parentInstObj;\n }\n childGrid.isLegacyTemplate = gObj.isReact\n || gObj.isLegacyTemplate;\n if (gObj.isPrinting) {\n childGrid.isPrinting = true;\n childGrid.on(events.contentReady, this.promiseResolve(childGrid), this);\n childGrid.on(events.onEmpty, this.promiseResolve(childGrid), this);\n }\n rowObj.childGrid = childGrid;\n var modules = childGrid.getInjectedModules();\n var injectedModues = gObj.getInjectedModules();\n if (!modules || modules.length !== injectedModues.length) {\n childGrid.setInjectedModules(injectedModues);\n }\n var gridElem = this.parent.createElement('div', {\n id: 'child' + parents(tr, 'e-grid').length +\n '_grid' + tr.rowIndex + getUid(''), className: 'e-childgrid'\n });\n detailCell.appendChild(gridElem);\n childGrid.appendTo(gridElem);\n }\n detailRow.appendChild(detailCell);\n if (tr.nextSibling) {\n tr.parentNode.insertBefore(detailRow, tr.nextSibling);\n }\n else {\n tr.parentNode.appendChild(detailRow);\n }\n var rowElems = gObj.getRows();\n var rowObjs = gObj.getRowsObject();\n rowElems.splice(rowElems.indexOf(tr) + 1, 0, detailRow);\n rowObjs.splice(rowObjs.indexOf(rowObj) + 1, 0, row);\n gObj.trigger(events.detailDataBound, { detailElement: detailCell, data: data, childGrid: childGrid });\n gObj.notify(events.detailDataBound, { rows: rowObjs });\n }\n classList(target, ['e-detailrowexpand'], ['e-detailrowcollapse']);\n classList(target.firstElementChild, ['e-dtdiagonaldown', 'e-icon-gdownarrow'], ['e-dtdiagonalright', 'e-icon-grightarrow']);\n rowObj.isExpand = true;\n if (target.classList.contains('e-lastrowcell') && this.parent.getContent().clientHeight > table.scrollHeight) {\n removeClass(target.parentElement.querySelectorAll('td'), 'e-lastrowcell');\n var detailrowIdx = table.querySelector(literals.tbody).getElementsByClassName('e-detailrow').length - 1;\n addClass(table.querySelector(literals.tbody).getElementsByClassName('e-detailrow')[detailrowIdx].childNodes, ['e-lastrowcell']);\n this.lastrowcell = true;\n }\n this.aria.setExpand(target, true);\n target.firstElementChild.setAttribute('title', 'expanded');\n }\n else {\n if (this.isDetailRow(nextRow)) {\n nextRow.style.display = 'none';\n gObj.notify(events.detailStateChange, { data: rowObj.data,\n childGrid: gObj.childGrid, detailElement: target, isExpanded: isExpanded });\n }\n classList(target, ['e-detailrowcollapse'], ['e-detailrowexpand']);\n classList(target.firstElementChild, ['e-dtdiagonalright', 'e-icon-grightarrow'], ['e-dtdiagonaldown', 'e-icon-gdownarrow']);\n if (parseInt(tr.getAttribute(literals.dataRowIndex), 10) === lastrowIdx && this.lastrowcell) {\n addClass(target.parentElement.querySelectorAll('td'), 'e-lastrowcell');\n this.lastrowcell = false;\n }\n rowObj.isExpand = false;\n this.aria.setExpand(target, false);\n target.firstElementChild.setAttribute('title', 'collapsed');\n }\n if (!isNullOrUndefined(gObj.detailTemplate)) {\n gObj.updateVisibleExpandCollapseRows();\n gObj.notify(events.refreshExpandandCollapse, { rows: gObj.getRowsObject() });\n }\n };\n /**\n * @hidden\n * @param {IGrid} gObj - specifies the grid Object\n * @param {Row}rowObj - specifies the row object\n * @param {string} printMode - specifies the printmode\n * @returns {Object} returns the object\n */\n DetailRow.prototype.getGridModel = function (gObj, rowObj, printMode) {\n var gridModel;\n if (gObj.isPrinting && rowObj.isExpand && gObj.expandedRows &&\n gObj.expandedRows[rowObj.index] && gObj.expandedRows[rowObj.index].gridModel) {\n gObj.expandedRows[rowObj.index].gridModel.hierarchyPrintMode = gObj.childGrid.hierarchyPrintMode;\n gridModel = gObj.expandedRows[rowObj.index].gridModel;\n }\n else {\n if (gObj.isPrinting && gObj.childGrid.allowPaging) {\n gObj.childGrid.allowPaging = printMode === 'CurrentPage';\n }\n gridModel = extend({}, {}, gObj.childGrid, true);\n }\n return gridModel;\n };\n DetailRow.prototype.promiseResolve = function (grid) {\n var _this = this;\n return function () {\n grid.off(events.contentReady, _this.promiseResolve);\n grid.off(events.onEmpty, _this.promiseResolve);\n grid.notify(events.hierarchyPrint, {});\n };\n };\n DetailRow.prototype.isDetailRow = function (row) {\n return row && row.classList.contains('e-detailrow');\n };\n DetailRow.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (this.parent.isDestroyed || !gridElement || (!gridElement.querySelector('.' + literals.gridHeader) &&\n !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n this.parent.off(events.click, this.clickHandler);\n this.parent.off(events.destroy, this.destroy);\n this.parent.off(events.keyPressed, this.keyPressHandler);\n this.parent.off(events.expandChildGrid, this.expand);\n this.parent.off(events.columnVisibilityChanged, this.refreshColSpan);\n this.parent.off(events.destroy, this.destroyChildGrids);\n this.parent.off(events.destroyChildGrid, this.destroyChildGrids);\n };\n DetailRow.prototype.getTDfromIndex = function (index, className) {\n var tr = this.parent.getDataRows()[index];\n if (tr && tr.querySelector(className)) {\n return tr.querySelector(className);\n }\n return null;\n };\n /**\n * Expands a detail row with the given target.\n *\n * @param {Element} target - Defines the collapsed element to expand.\n * @returns {void}\n */\n DetailRow.prototype.expand = function (target) {\n if (!isNaN(target)) {\n target = this.getTDfromIndex(target, '.e-detailrowcollapse');\n }\n if (target && target.classList.contains('e-detailrowcollapse')) {\n this.toogleExpandcollapse(target);\n }\n };\n /**\n * Collapses a detail row with the given target.\n *\n * @param {Element} target - Defines the expanded element to collapse.\n * @returns {void}\n */\n DetailRow.prototype.collapse = function (target) {\n if (!isNaN(target)) {\n target = this.getTDfromIndex(target, '.e-detailrowexpand');\n }\n if (target && target.classList.contains('e-detailrowexpand')) {\n this.toogleExpandcollapse(target);\n }\n };\n /**\n * Expands all the detail rows of the Grid.\n *\n * @returns {void}\n */\n DetailRow.prototype.expandAll = function () {\n this.expandCollapse(true);\n this.parent.trigger(events.actionComplete, { requestType: 'expandAllComplete', type: events.actionComplete, moduleObj: this });\n };\n /**\n * Collapses all the detail rows of the Grid.\n *\n * @returns {void}\n */\n DetailRow.prototype.collapseAll = function () {\n this.expandCollapse(false);\n this.parent.trigger(events.actionComplete, { requestType: 'collapseAllComplete', type: events.actionComplete, moduleObj: this });\n };\n DetailRow.prototype.expandCollapse = function (isExpand) {\n var td;\n var rows = this.parent.getDataRows();\n for (var i = 0, len = rows.length; i < len; i++) {\n td = rows[i].querySelector('.e-detailrowcollapse, .e-detailrowexpand');\n if (isExpand) {\n this.expand(td);\n }\n else {\n this.collapse(td);\n }\n }\n };\n DetailRow.prototype.keyPressHandler = function (e) {\n var gObj = this.parent;\n switch (e.action) {\n case 'ctrlDownArrow':\n this.expandAll();\n break;\n case 'ctrlUpArrow':\n this.collapseAll();\n break;\n case 'altUpArrow':\n case 'altDownArrow':\n // eslint-disable-next-line no-case-declarations\n var selected = gObj.allowSelection ? gObj.getSelectedRowIndexes() : [];\n if (selected.length) {\n var dataRow = gObj.getDataRows()[selected[selected.length - 1]];\n var td = dataRow.querySelector('.e-detailrowcollapse, .e-detailrowexpand');\n if (e.action === 'altDownArrow') {\n this.expand(td);\n }\n else {\n this.collapse(td);\n }\n }\n break;\n case 'enter':\n if (this.parent.isEdit) {\n return;\n }\n // eslint-disable-next-line no-case-declarations\n var element = this.focus.getFocusedElement();\n if (element && (element.classList.contains('e-icon-grightarrow') || element.classList.contains('e-icon-gdownarrow'))) {\n element = element.parentElement;\n }\n if (element && !element.classList.contains('e-detailrowcollapse') &&\n !element.classList.contains('e-detailrowexpand')) {\n break;\n }\n this.toogleExpandcollapse(element);\n break;\n }\n };\n DetailRow.prototype.refreshColSpan = function () {\n var detailrows = this.parent.contentModule.getTable().querySelectorAll('tr.e-detailrow');\n var colSpan = this.parent.getVisibleColumns().length;\n for (var i = 0; i < detailrows.length; i++) {\n detailrows[i].querySelector('.e-detailcell').setAttribute('colspan', colSpan + '');\n }\n };\n DetailRow.prototype.destroyChildGrids = function () {\n var rows = this.parent.getRowsObject();\n for (var i = 0; i < rows.length; i++) {\n rows[i].childGrid = null;\n }\n for (var i = 0; i < this.childRefs.length; i++) {\n if (!this.childRefs[i].isDestroyed) {\n this.childRefs[i].destroy();\n }\n }\n this.childRefs = [];\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n DetailRow.prototype.getModuleName = function () {\n return 'detailRow';\n };\n return DetailRow;\n}());\nexport { DetailRow };\n","import { MetadataProvider } from '@felicity/data-modelling';\nimport { TYPE, MIME } from '@felicity/primitives';\nimport { Component, EVENT } from '@felicity/vision';\nimport { DataManager } from '@syncfusion/ej2-data';\nimport {\n CommandColumn, DetailRow, Edit, Grid, load, RowDD, Search, Selection, Sort, Toolbar\n} from '@syncfusion/ej2-grids';\nimport { DialogUtility } from '@syncfusion/ej2-popups';\nimport {\n EDITING_MODE, EVENT as MANAGEMENT_EVENT, HTTP, REQUEST_TYPE\n} from '../constants.mjs';\nimport CrudAdaptor from '../data/adaptor/CrudAdaptor.mjs';\nimport ModelEditor from './ModelEditor.mjs';\n\n/**\n * Base class for entity manager components\n */\nexport default class ModelManager extends Component {\n /**\n * Data manager of the grid. If not explicitly set it uses CrudAdaptor for\n * accessing the API endpoints\n *\n * @type {DataManager}\n * @see https://ej2.syncfusion.com/documentation/api/data/dataManager/\n * @public\n */\n dataManager;\n\n /**\n * Editor component\n *\n * @type {ModelEditor}\n * @public\n */\n editor;\n\n /**\n * Component displaying entities\n *\n * @type {Grid}\n * @see https://ej2.syncfusion.com/documentation/api/grid\n * @public\n */\n grid;\n\n /**\n * DNS safe hostname of the CRUD API.\n *\n * @description Empty hostname will refer to the origin of the application\n * @default ''\n * @public\n */\n host = '';\n\n /**\n * If set to false, the grid will not bind to the data source during initialization.\n *\n * @type {boolean}\n * @default true\n * @public\n */\n autoBind = true;\n\n /**\n * Relative path of CRUD endpoints\n *\n * @type {string}\n * @private\n */\n crudUri;\n\n /**\n * Stores the current enabled status of the component\n *\n * @type {boolean}\n * @private\n */\n #enabled = true;\n\n /**\n * Stores a reference to the model editor class' constructor\n *\n * @type {ModelEditor}\n * @private\n */\n #editorClass;\n\n /**\n * Returns the constructor of the model editor class\n *\n * @returns {ModelEditor} Model editor constructor\n */\n get editorClass() {\n return this.#editorClass;\n }\n\n /**\n * Reference to the model class' constructor\n *\n * @type {Function} Model class reference\n * @private\n */\n #modelClass;\n\n /**\n * Model manager constructor\n *\n * @param {Function} modelClass Reference to the model class' constructor\n * @param {ModelEditor} editorClass Reference to the model editor class' constructor\n * @param {string} crudUri Relative path of CRUD endpoints\n */\n constructor(modelClass, editorClass, crudUri) {\n super();\n\n this.#modelClass = modelClass;\n this.#editorClass = editorClass;\n\n if (crudUri) {\n this.crudUri = crudUri;\n }\n }\n\n /** @override */\n _prepare() {\n super._prepare();\n\n this.editor = this._initEditor();\n this.grid = this._initGrid();\n\n this.grid.addEventListener(load, () => {\n if (this.autoBind) {\n if (this.crudUri) {\n this.attachDataManager();\n } else {\n this.on(EVENT.CHANGE, (e) => {\n if (e.detail?.property === 'crudUri' && this.crudUri && !this.dataManager) {\n this.attachDataManager();\n }\n });\n }\n }\n });\n\n this.grid.appendTo(this);\n }\n\n /**\n * Enables or disables the component\n *\n * @param {boolean} enable True for the component to be enabled\n */\n enable(enable = true) {\n this.grid.editSettings.allowAdding = enable;\n this.grid.editSettings.allowEditing = enable;\n this.grid.editSettings.allowDeleting = enable;\n\n this.#enabled = enable;\n }\n\n /**\n * Sets the component to disabled status\n */\n disable() {\n this.enable(false);\n }\n\n /**\n * Determines if the component is enabled\n *\n * @returns {boolean} True if the component is enabled\n */\n isEnabled() {\n return this.#enabled === true;\n }\n\n /**\n * Sets the data manager of the component that communicates with data source and returns the\n * desired result based on the Query provided.\n *\n * @param {DataManager} dataManager Data manager to be attached\n */\n attachDataManager(dataManager) {\n this.dataManager = dataManager ?? this._initDataManager();\n this.grid.dataSource = this.dataManager;\n }\n\n /**\n * Collects filter parameters that are not managed by the grid\n *\n * @returns {object} Filter parameters\n */\n getFilter() {\n return {};\n }\n\n /**\n * Returns the URL of the ranking API endpoint\n *\n * @returns {string} Ranking API endpoint URL\n */\n createRankUrl() {\n const baseUrl = this.grid.getDataModule().dataManager.dataSource.url;\n return `${baseUrl}/Rank`;\n }\n\n /**\n * Initialises the data manager using the configured API endpoints\n *\n * @returns {DataManager} The data manager using a CrudAdaptor\n * @protected\n */\n _initDataManager() {\n return new DataManager({\n url: `${this.host ?? ''}${this.crudUri}`,\n adaptor: this._initAdaptor()\n });\n }\n\n /**\n * Configures an adaptor that communicates with the API\n *\n * @returns {CrudAdaptor} Adaptor instance\n * @protected\n */\n _initAdaptor() {\n return new CrudAdaptor();\n }\n\n /**\n * Constructs a new model editor instance\n *\n * @returns {ModelEditor} Model editor instance\n * @protected\n */\n _initEditor() {\n return this.#editorClass !== undefined\n ? new this.#editorClass()\n : null;\n }\n\n /**\n * Constructs a new data grid instance\n *\n * @param {object} gridOptions Configuration options for the grid\n * @returns {Grid} The constructed grid component\n * @protected\n */\n _initGrid(gridOptions) {\n Grid.Inject(\n Sort,\n Search,\n Toolbar,\n Edit,\n CommandColumn,\n RowDD,\n Selection\n );\n\n const gridConfig = { columns: [], ...gridOptions },\n metadata = MetadataProvider.get(this.#modelClass);\n let rankable = false;\n\n if (metadata) {\n rankable = !!metadata.properties.rank;\n\n if (metadata.primaryKey.length) {\n // Make sure that all primary key fields are represented as columns\n metadata.primaryKey.forEach((property) => {\n const\n columnConfig = { field: property, visible: false },\n columnIndex = gridConfig.columns.findIndex((c) => c.field === property);\n\n if (columnIndex > -1) {\n gridConfig.columns[columnIndex] = Object.assign(\n columnConfig,\n gridConfig.columns[columnIndex]\n );\n } else {\n gridConfig.columns.push(columnConfig);\n }\n });\n\n // Syncfusion does not support composite primary keys therefore we need to\n // select a single one, that we call discriminator, to be used as the primary key\n let discriminatorIndex = -1;\n\n if (metadata.primaryKey.length > 1) {\n discriminatorIndex = gridConfig.columns\n .findIndex((c) => c.isDiscriminator);\n } else if (metadata.primaryKey.length === 1) {\n discriminatorIndex = gridConfig.columns\n .findIndex((c) => c.field === metadata.primaryKey[0]);\n }\n\n if (discriminatorIndex === -1) {\n throw new Error('No discriminator column found therefore no primary key could be set');\n }\n\n gridConfig.columns[discriminatorIndex].isPrimaryKey = true;\n\n // Check if there are multiple columns marked as primary key\n if (gridConfig.columns.filter((c) => c.isPrimaryKey).length > 1) {\n throw new Error('Grid does not support composite primary keys');\n }\n }\n\n if (rankable) {\n const rankIndex = gridConfig.columns.findIndex((c) => c.field === 'rank');\n if (rankIndex === -1) {\n gridConfig.columns.push({ field: 'rank', visible: false });\n }\n }\n }\n\n const editSettings = {\n allowAdding: true,\n allowEditing: true,\n allowDeleting: true,\n showDeleteConfirmDialog: true\n };\n\n if (this.editor) {\n Object.assign(editSettings, {\n mode: 'Dialog',\n template: this.editor.template(),\n dialog: {\n params: {\n allowDragging: true,\n width: 800,\n animationSettings: {\n effect: 'FadeZoom'\n }\n }\n }\n });\n }\n\n if (gridConfig.detailTemplate || gridConfig.detailDataBound) {\n Grid.Inject(DetailRow);\n }\n\n return new Grid(Object.merge({\n dataSource: this.dataManager,\n toolbar: ['Search', 'Add', 'Delete'],\n columns: [],\n\n allowSorting: true,\n allowRowDragAndDrop: rankable,\n selectionSettings: { type: 'Multiple' },\n allowEditing: true,\n editSettings,\n\n enableAdaptiveUI: window.document.body.offsetWidth < 800,\n\n actionBegin: (e) => {\n const\n query = this.grid.getQuery(),\n filter = this.getFilter();\n\n switch (e.requestType) {\n case REQUEST_TYPE.SAVE:\n if (this.editor) {\n e.data = this.editor.getData();\n }\n break;\n\n default:\n Object.keys(filter)\n .forEach((key) => {\n const item = query.params.find((param) => param.key === key);\n\n if (item) {\n item.value = filter[key];\n } else {\n query.addParams(key, filter[key]);\n }\n });\n break;\n }\n },\n actionComplete: (e) => {\n if ((e.requestType === REQUEST_TYPE.BEGIN_EDIT) || (e.requestType === REQUEST_TYPE.ADD)) {\n const mode = e.requestType === REQUEST_TYPE.ADD ? EDITING_MODE.ADD : EDITING_MODE.EDIT,\n\n cancelled = !this.trigger(MANAGEMENT_EVENT.EDIT, {\n mode,\n data: e.rowData\n });\n\n if (!cancelled) {\n if (this.editor) {\n this.editor.edit(mode, e.rowData, e.form, e.dialog);\n\n this.trigger(MANAGEMENT_EVENT.EDIT_MODEL, {\n mode,\n editor: this.editor\n });\n }\n } else {\n this.grid.closeEdit();\n }\n }\n },\n actionFailure: (e) => {\n const xhr = e.error?.length ? e.error[0].error : null;\n\n if (xhr) {\n let responseJSON;\n\n switch (xhr.status) {\n case 422:\n responseJSON = JSON.parse(xhr.responseText);\n\n DialogUtility.alert({\n title: 'Validation report',\n content: Object.values(responseJSON).join('
'),\n showCloseIcon: false,\n closeOnEscape: true,\n animationSettings: { effect: 'Zoom' }\n });\n break;\n\n default:\n // TODO review\n break;\n }\n }\n },\n rowDrop: (e) => {\n if (e.fromIndex !== e.dropIndex) {\n let pks = this.grid.getPrimaryKeyFieldNames();\n\n if (pks.length !== 1) {\n pks = this.grid.columns.filter((c) => c.isDiscriminator).map((c) => c.field);\n\n if (pks.length !== 1) {\n // TODO Support composite keys\n throw Error('Composite key ranking is not implemented');\n }\n }\n\n const\n pk = pks[0],\n ranks = {},\n change = e.fromIndex < e.dropIndex ? -1 : 1,\n lowerIdx = Math.min(e.fromIndex, e.dropIndex),\n upperIdx = Math.max(e.fromIndex, e.dropIndex);\n\n for (let i = lowerIdx; i <= upperIdx; i++) {\n const dataItem = this.grid.getRowInfo(this.grid.getRowByIndex(i)).rowData;\n if (dataItem && dataItem[pk]) {\n ranks[dataItem[pk]] = i === e.fromIndex\n ? e.dropIndex + 1\n : dataItem.rank + change;\n }\n }\n\n if (Object.keys(ranks).length) {\n fetch(this.createRankUrl(), {\n method: HTTP.PUT,\n headers: {\n 'Content-Type': MIME.JSON\n },\n body: JSON.stringify(ranks)\n });\n // TODO add error handling\n }\n }\n },\n\n rowSelected: (e) => {\n this.trigger('grid.rowSelected', e.data);\n }\n }, gridConfig));\n }\n\n /* eslint class-methods-use-this: \"off\" */\n /**\n * Default editing command configuration\n *\n * @returns {object[]} Command configuration\n * @protected\n */\n _crudCommands() {\n return [\n { type: 'Edit', buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' } },\n { type: 'Delete', buttonOption: { cssClass: 'e-flat', iconCss: 'e-delete e-icons' } },\n { type: 'Save', buttonOption: { cssClass: 'e-flat', iconCss: 'e-update e-icons' } },\n { type: 'Cancel', buttonOption: { cssClass: 'e-flat', iconCss: 'e-cancel-icon e-icons' } }\n ];\n }\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\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';\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 }\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 if (li) {\n this.setSelection(li, null);\n }\n else if (this.allowCustom) {\n this.valueMuteChange(this.value);\n }\n else {\n this.valueMuteChange(null);\n }\n }\n else if (this.text && isNullOrUndefined(this.value)) {\n var li = this.getElementByText(this.text);\n if (li) {\n this.setSelection(li, null);\n }\n else {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.customValue();\n }\n }\n else {\n this.setSelection(this.liCollections[this.activeIndex], null);\n }\n this.setHiddenValue();\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n ComboBox.prototype.updateIconState = function () {\n if (this.showClearButton) {\n if (this.inputElement && this.inputElement.value !== '' && !this.readonly) {\n removeClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n else {\n addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n }\n };\n ComboBox.prototype.getAriaAttributes = function () {\n var ariaAttributes = {\n '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 return (this.isFiltering() ? this.inputWrapper : inputObject);\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) {\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 = this.list.querySelector('.' + dropDownListClasses.selected);\n var isSelected = dataItem.text === this.inputElement.value && !isNullOrUndefined(selected);\n if (isSelected) {\n return selected;\n }\n if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&\n !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {\n var inputValue = this.inputElement.value;\n var activeItem = Search(inputValue, this.liCollections, this.filterType, true);\n var activeElement = activeItem.item;\n if (!isNullOrUndefined(activeElement)) {\n var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;\n var height = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);\n if (!isNaN(height) && this.getModuleName() !== 'autocomplete') {\n this.removeFocus();\n var fixedHead = this.fields.groupBy ? this.liCollections[0].offsetHeight : 0;\n this.list.scrollTop = count * height + fixedHead;\n addClass([activeElement], dropDownListClasses.focus);\n }\n }\n else {\n if (this.isSelectCustom && this.inputElement.value.trim() !== '') {\n this.removeFocus();\n this.list.scrollTop = 0;\n }\n }\n return activeElement;\n }\n else {\n return null;\n }\n };\n ComboBox.prototype.setValue = function (e) {\n if (e && e.type === 'keydown' && e.action === 'enter') {\n this.removeFillSelection();\n }\n if (this.autofill && this.getModuleName() === 'combobox' && e && e.type === 'keydown' && e.action !== 'enter') {\n this.preventAutoFill = false;\n this.inlineSearch(e);\n return false;\n }\n else {\n return _super.prototype.setValue.call(this, e);\n }\n };\n ComboBox.prototype.checkCustomValue = function () {\n this.itemData = this.getDataByValue(this.value);\n var dataItem = this.getItemData();\n if (!(this.allowCustom && isNullOrUndefined(dataItem.value) && isNullOrUndefined(dataItem.text))) {\n this.setProperties({ 'value': dataItem.value, 'text': dataItem.text }, !this.allowCustom);\n }\n };\n /**\n * Shows the spinner loader.\n *\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 this.list.scrollTop = 0;\n var focusItem = this.list.querySelector('.' + dropDownListClasses.li);\n this.setHoverList(focusItem);\n }\n else {\n this.activeIndex = null;\n this.removeSelection();\n if (this.liCollections && this.liCollections.length > 0 && !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 }\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 /**\n * Opens the popup that displays the list of items.\n *\n * @returns {void}\n\n */\n ComboBox.prototype.showPopup = function (e) {\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 = this.list.querySelector('.' + dropDownListClasses.selected);\n if (this.inputElement && dataItem.text === this.inputElement.value && !isNullOrUndefined(selected)) {\n if (this.isSelected) {\n this.onChangeEvent(e);\n this.isSelectCustom = false;\n }\n _super.prototype.hidePopup.call(this, e);\n return;\n }\n if (this.getModuleName() === 'combobox' && this.inputElement.value.trim() !== '') {\n var searchItem = Search(this.inputElement.value, this.liCollections, 'Equal', true);\n this.selectedLI = searchItem.item;\n if (isNullOrUndefined(searchItem.index)) {\n searchItem.index = Search(this.inputElement.value, this.liCollections, 'StartsWith', true).index;\n }\n this.activeIndex = searchItem.index;\n if (!isNullOrUndefined(this.selectedLI)) {\n this.updateSelectedItem(this.selectedLI, null, true);\n }\n else if (isEscape) {\n this.isSelectCustom = true;\n this.removeSelection();\n }\n }\n if (!this.isEscapeKey && this.isTyped && !this.isInteracted) {\n this.customValue(e);\n }\n }\n if (isNullOrUndefined(this.listData) && this.allowCustom && !isNullOrUndefined(inputValue) && inputValue !== this.value) {\n this.customValue();\n }\n _super.prototype.hidePopup.call(this, e);\n };\n /**\n * Sets the focus to the component for interaction.\n *\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","/* eslint-disable jsdoc/require-param, valid-jsdoc */\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 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 {\n var mapping = !isNullOrUndefined(this.fields.value) ? this.fields.value : '';\n filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);\n }\n }\n if (!isNullOrUndefined(this.suggestionCount)) {\n // Since defualt value of suggestioncount is 20, checked the condition\n if (this.suggestionCount !== 20) {\n for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {\n if (filterQuery.queries[queryElements].fn === 'onTake') {\n filterQuery.queries.splice(queryElements, 1);\n }\n }\n }\n filterQuery.take(this.suggestionCount);\n }\n return filterQuery;\n };\n AutoComplete.prototype.searchLists = function (e) {\n var _this_1 = this;\n this.isTyped = true;\n this.isDataFetched = this.isSelectCustom = false;\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 if (this.queryString !== '' && (this.queryString.length >= this.minLength)) {\n this.resetList(dataSource, fields, query, e);\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 }\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 this.fixedHeaderElement = null;\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n var item = this.list.querySelector('.' + dropDownListClasses.li);\n if (!isNullOrUndefined(item)) {\n removeClass([item], dropDownListClasses.focus);\n }\n this.postBackAction();\n };\n AutoComplete.prototype.postBackAction = function () {\n if (this.autofill && !isNullOrUndefined(this.liCollections[0]) && this.searchList) {\n var items = [this.liCollections[0]];\n var searchItem = Search(this.inputElement.value, items, 'StartsWith', this.ignoreCase);\n this.searchList = false;\n if (!isNullOrUndefined(searchItem.item)) {\n _super.prototype.setAutoFill.call(this, this.liCollections[0], true);\n }\n }\n };\n AutoComplete.prototype.setSelection = function (li, e) {\n if (!this.isValidLI(li)) {\n 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 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 this.list.scrollTop = 0;\n _super.prototype.renderPopup.call(this, e);\n };\n AutoComplete.prototype.isEditTextBox = function () {\n return true && this.inputElement.value.trim() !== '';\n };\n AutoComplete.prototype.isPopupButton = function () {\n return this.showPopupButton;\n };\n // 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 = -1;\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 * FloatLable Moduel\n * Specifies whether to display the floating label above the input element.\n */\nimport { removeClass, addClass, detach } from '@syncfusion/ej2-base';\nimport { attributes, isNullOrUndefined, createElement, getUniqueID } from '@syncfusion/ej2-base';\nvar FLOATLINE = 'e-float-line';\nvar FLOATTEXT = 'e-float-text';\nvar LABELTOP = 'e-label-top';\nvar LABELBOTTOM = 'e-label-bottom';\n/* eslint-disable valid-jsdoc */\n/**\n * Function to create Float Label element.\n *\n * @param {HTMLDivElement} overAllWrapper - Overall wrapper of multiselect.\n * @param {HTMLElement} searchWrapper - Search wrapper of multiselect.\n * @param {HTMLElement} element - The given html element.\n * @param {HTMLInputElement} inputElement - Specify the input wrapper.\n * @param {number[] | string[] | boolean[]} value - Value of the MultiSelect.\n * @param {FloatLabelType} floatLabelType - Specify the FloatLabel Type.\n * @param {string} placeholder - Specify the PlaceHolder text.\n */\nexport function createFloatLabel(overAllWrapper, searchWrapper, element, inputElement, value, floatLabelType, placeholder) {\n var floatLinelement = createElement('span', { className: FLOATLINE });\n var floatLabelElement = createElement('label', { className: FLOATTEXT });\n var id = element.getAttribute('id') ? element.getAttribute('id') : getUniqueID('ej2_multiselect');\n element.id = id;\n if (!isNullOrUndefined(element.id) && element.id !== '') {\n floatLabelElement.id = 'label_' + element.id.replace(/ /g, '_');\n attributes(inputElement, { 'aria-labelledby': floatLabelElement.id });\n }\n if (!isNullOrUndefined(inputElement.placeholder) && inputElement.placeholder !== '') {\n floatLabelElement.innerText = encodePlaceholder(inputElement.placeholder);\n inputElement.removeAttribute('placeholder');\n }\n floatLabelElement.innerText = encodePlaceholder(placeholder);\n searchWrapper.appendChild(floatLinelement);\n searchWrapper.appendChild(floatLabelElement);\n overAllWrapper.classList.add('e-float-input');\n updateFloatLabelState(value, floatLabelElement);\n if (floatLabelType === 'Always') {\n if (floatLabelElement.classList.contains(LABELBOTTOM)) {\n removeClass([floatLabelElement], LABELBOTTOM);\n }\n addClass([floatLabelElement], LABELTOP);\n }\n}\n/**\n * Function to update status of the Float Label element.\n *\n * @param {string[] | number[] | boolean[]} value - Value of the MultiSelect.\n * @param {HTMLElement} label - Float label element.\n */\nexport function updateFloatLabelState(value, label) {\n if (value && value.length > 0) {\n addClass([label], LABELTOP);\n removeClass([label], LABELBOTTOM);\n }\n else {\n removeClass([label], LABELTOP);\n addClass([label], LABELBOTTOM);\n }\n}\n/**\n * Function to remove Float Label element.\n *\n * @param {HTMLDivElement} overAllWrapper - Overall wrapper of multiselect.\n * @param {HTMLDivElement} componentWrapper - Wrapper element of multiselect.\n * @param {HTMLElement} searchWrapper - Search wrapper of multiselect.\n * @param {HTMLInputElement} inputElement - Specify the input wrapper.\n * @param {number[] | string[] | boolean[]} value - Value of the MultiSelect.\n * @param {FloatLabelType} floatLabelType - Specify the FloatLabel Type.\n * @param {string} placeholder - Specify the PlaceHolder text.\n */\nexport function removeFloating(overAllWrapper, componentWrapper, searchWrapper, inputElement, value, floatLabelType, placeholder) {\n var placeholderElement = componentWrapper.querySelector('.' + FLOATTEXT);\n var floatLine = componentWrapper.querySelector('.' + FLOATLINE);\n var placeholderText;\n if (!isNullOrUndefined(placeholderElement)) {\n placeholderText = placeholderElement.innerText;\n detach(searchWrapper.querySelector('.' + FLOATTEXT));\n setPlaceHolder(value, inputElement, placeholderText);\n if (!isNullOrUndefined(floatLine)) {\n detach(searchWrapper.querySelector('.' + FLOATLINE));\n }\n }\n else {\n placeholderText = (placeholder !== null) ? placeholder : '';\n setPlaceHolder(value, inputElement, placeholderText);\n }\n overAllWrapper.classList.remove('e-float-input');\n}\n/**\n * Function to set the placeholder to the element.\n *\n * @param {number[] | string[] | boolean[]} value - Value of the MultiSelect.\n * @param {HTMLInputElement} inputElement - Specify the input wrapper.\n * @param {string} placeholder - Specify the PlaceHolder text.\n */\nexport function setPlaceHolder(value, inputElement, placeholder) {\n if (value && value.length) {\n inputElement.placeholder = '';\n }\n else {\n inputElement.placeholder = placeholder;\n }\n}\n/**\n * Function for focusing the Float Element.\n *\n * @param {HTMLDivElement} overAllWrapper - Overall wrapper of multiselect.\n * @param {HTMLDivElement} componentWrapper - Wrapper element of multiselect.\n */\nexport function floatLabelFocus(overAllWrapper, componentWrapper) {\n overAllWrapper.classList.add('e-input-focus');\n var label = componentWrapper.querySelector('.' + FLOATTEXT);\n if (!isNullOrUndefined(label)) {\n addClass([label], LABELTOP);\n if (label.classList.contains(LABELBOTTOM)) {\n removeClass([label], LABELBOTTOM);\n }\n }\n}\n/* eslint-disable @typescript-eslint/no-unused-vars */\n/**\n * Function to focus the Float Label element.\n *\n * @param {HTMLDivElement} overAllWrapper - Overall wrapper of multiselect.\n * @param {HTMLDivElement} componentWrapper - Wrapper element of multiselect.\n * @param {number[] | string[] | boolean[]} value - Value of the MultiSelect.\n * @param {FloatLabelType} floatLabelType - Specify the FloatLabel Type.\n * @param {string} placeholder - Specify the PlaceHolder text.\n */\nexport function floatLabelBlur(overAllWrapper, componentWrapper, value, floatLabelType, placeholder) {\n /* eslint-enable @typescript-eslint/no-unused-vars */\n overAllWrapper.classList.remove('e-input-focus');\n var label = componentWrapper.querySelector('.' + FLOATTEXT);\n if (value && value.length <= 0 && floatLabelType === 'Auto' && !isNullOrUndefined(label)) {\n if (label.classList.contains(LABELTOP)) {\n removeClass([label], LABELTOP);\n }\n addClass([label], LABELBOTTOM);\n }\n}\nexport function encodePlaceholder(placeholder) {\n var result = '';\n if (!isNullOrUndefined(placeholder) && placeholder !== '') {\n var spanElement = document.createElement('span');\n spanElement.innerHTML = '';\n var hiddenInput = (spanElement.children[0]);\n result = hiddenInput.placeholder;\n }\n return result;\n}\n/* eslint-enable valid-jsdoc */\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 { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';\nimport { FieldSettings } from '../drop-down-base/drop-down-base';\nimport { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { attributes, setValue, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';\nimport { EventHandler, Property, Event, compile, L10n } from '@syncfusion/ej2-base';\nimport { Animation, Browser, prepend, Complex } from '@syncfusion/ej2-base';\nimport { Search } from '../common/incremental-search';\nimport { append, addClass, removeClass, closest, detach, remove, select, selectAll } from '@syncfusion/ej2-base';\nimport { getUniqueID, formatUnit, isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';\nimport { DataManager, Query, Predicate } from '@syncfusion/ej2-data';\nimport { createFloatLabel, removeFloating, floatLabelFocus, floatLabelBlur, encodePlaceholder } from './float-label';\nvar FOCUS = 'e-input-focus';\nvar DISABLED = 'e-disabled';\nvar OVER_ALL_WRAPPER = 'e-multiselect e-input-group e-control-wrapper';\nvar ELEMENT_WRAPPER = 'e-multi-select-wrapper';\nvar ELEMENT_MOBILE_WRAPPER = 'e-mob-wrapper';\nvar HIDE_LIST = 'e-hide-listitem';\nvar DELIMITER_VIEW = 'e-delim-view';\nvar CHIP_WRAPPER = 'e-chips-collection';\nvar CHIP = 'e-chips';\nvar CHIP_CONTENT = 'e-chipcontent';\nvar CHIP_CLOSE = 'e-chips-close';\nvar CHIP_SELECTED = 'e-chip-selected';\nvar SEARCHBOX_WRAPPER = 'e-searcher';\nvar DELIMITER_VIEW_WRAPPER = 'e-delimiter';\nvar ZERO_SIZE = 'e-zero-size';\nvar REMAIN_WRAPPER = 'e-remain';\nvar CLOSEICON_CLASS = 'e-chips-close e-close-hooker';\nvar DELIMITER_WRAPPER = 'e-delim-values';\nvar POPUP_WRAPPER = 'e-ddl e-popup e-multi-select-list-wrapper';\nvar INPUT_ELEMENT = 'e-dropdownbase';\nvar RTL_CLASS = 'e-rtl';\nvar CLOSE_ICON_HIDE = 'e-close-icon-hide';\nvar MOBILE_CHIP = 'e-mob-chip';\nvar FOOTER = 'e-ddl-footer';\nvar HEADER = 'e-ddl-header';\nvar DISABLE_ICON = 'e-ddl-disable-icon';\nvar SPINNER_CLASS = 'e-ms-spinner-icon';\nvar HIDDEN_ELEMENT = 'e-multi-hidden';\nvar destroy = 'destroy';\nvar dropdownIcon = 'e-input-group-icon e-ddl-icon';\nvar iconAnimation = 'e-icon-anim';\nvar TOTAL_COUNT_WRAPPER = 'e-delim-total';\nvar BOX_ELEMENT = 'e-multiselect-box';\nvar FILTERPARENT = 'e-filter-parent';\nvar CUSTOM_WIDTH = 'e-search-custom-width';\nvar FILTERINPUT = 'e-input-filter';\n/**\n * The Multiselect allows the user to pick a more than one value from list of predefined values.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar MultiSelect = /** @class */ (function (_super) {\n __extends(MultiSelect, _super);\n /**\n * Constructor for creating the DropDownList widget.\n *\n * @param {MultiSelectModel} option - Specifies the MultiSelect model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function MultiSelect(option, element) {\n var _this = _super.call(this, option, element) || this;\n _this.clearIconWidth = 0;\n _this.previousFilterText = '';\n _this.isValidKey = false;\n _this.selectAllEventData = [];\n _this.selectAllEventEle = [];\n _this.scrollFocusStatus = false;\n _this.keyDownStatus = false;\n return _this;\n }\n MultiSelect.prototype.enableRTL = function (state) {\n if (state) {\n this.overAllWrapper.classList.add(RTL_CLASS);\n }\n else {\n this.overAllWrapper.classList.remove(RTL_CLASS);\n }\n if (this.popupObj) {\n this.popupObj.enableRtl = state;\n this.popupObj.dataBind();\n }\n };\n MultiSelect.prototype.requiredModules = function () {\n var modules = [];\n if (this.mode === 'CheckBox') {\n this.isGroupChecking = this.enableGroupCheckBox;\n if (this.enableGroupCheckBox) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.enableSelectionOrder = false;\n this.isProtectedOnChange = prevOnChange;\n }\n this.allowCustomValue = false;\n this.hideSelectedItem = false;\n this.closePopupOnSelect = false;\n modules.push({\n member: 'CheckBoxSelection',\n args: [this]\n });\n }\n return modules;\n };\n MultiSelect.prototype.updateHTMLAttribute = function () {\n if (Object.keys(this.htmlAttributes).length) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var htmlAttr = _a[_i];\n switch (htmlAttr) {\n case 'class': {\n var updatedClassValue = (this.htmlAttributes[htmlAttr].replace(/\\s+/g, ' ')).trim();\n if (updatedClassValue !== '') {\n addClass([this.overAllWrapper], updatedClassValue.split(' '));\n addClass([this.popupWrapper], updatedClassValue.split(' '));\n }\n break;\n }\n case 'disabled':\n this.enable(false);\n break;\n case 'placeholder':\n if (!this.placeholder) {\n this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n this.setProperties({ placeholder: this.inputElement.placeholder }, true);\n this.refreshPlaceHolder();\n }\n break;\n default: {\n var defaultAttr = ['id'];\n var validateAttr = ['name', 'required', 'aria-required', 'form'];\n var containerAttr = ['title', 'role', 'style', 'class'];\n if (defaultAttr.indexOf(htmlAttr) > -1) {\n this.element.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else if (htmlAttr.indexOf('data') === 0 || validateAttr.indexOf(htmlAttr) > -1) {\n this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else if (containerAttr.indexOf(htmlAttr) > -1) {\n this.overAllWrapper.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else if (htmlAttr !== 'size') {\n this.inputElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n break;\n }\n }\n }\n }\n };\n MultiSelect.prototype.updateReadonly = function (state) {\n if (state || this.mode === 'CheckBox') {\n this.inputElement.setAttribute('readonly', 'true');\n }\n else {\n this.inputElement.removeAttribute('readonly');\n }\n };\n MultiSelect.prototype.updateClearButton = function (state) {\n if (state) {\n if (this.overAllClear.parentNode) {\n this.overAllClear.style.display = '';\n }\n else {\n this.componentWrapper.appendChild(this.overAllClear);\n }\n this.componentWrapper.classList.remove(CLOSE_ICON_HIDE);\n }\n else {\n this.overAllClear.style.display = 'none';\n this.componentWrapper.classList.add(CLOSE_ICON_HIDE);\n }\n };\n MultiSelect.prototype.updateCssClass = function () {\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n var updatedCssClassValues = this.cssClass;\n updatedCssClassValues = (this.cssClass.replace(/\\s+/g, ' ')).trim();\n if (updatedCssClassValues !== '') {\n addClass([this.overAllWrapper], updatedCssClassValues.split(' '));\n addClass([this.popupWrapper], updatedCssClassValues.split(' '));\n }\n }\n };\n MultiSelect.prototype.updateOldPropCssClass = function (oldClass) {\n if (!isNullOrUndefined(oldClass) && oldClass !== '') {\n oldClass = (oldClass.replace(/\\s+/g, ' ')).trim();\n if (oldClass !== '') {\n removeClass([this.overAllWrapper], oldClass.split(' '));\n removeClass([this.popupWrapper], oldClass.split(' '));\n }\n }\n };\n MultiSelect.prototype.onPopupShown = function (e) {\n var _this = this;\n if (Browser.isDevice && (this.mode === 'CheckBox' && this.allowFiltering)) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy_1 = this;\n window.onpopstate = function () {\n proxy_1.hidePopup();\n proxy_1.inputElement.focus();\n };\n history.pushState({}, '');\n }\n var animModel = { name: 'FadeIn', duration: 100 };\n var eventArgs = { popup: this.popupObj, event: e, cancel: false, animation: animModel };\n this.trigger('open', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n _this.focusAtFirstListItem();\n document.body.appendChild(_this.popupObj.element);\n if (_this.mode === 'CheckBox' && _this.enableGroupCheckBox && !isNullOrUndefined(_this.fields.groupBy)) {\n _this.updateListItems(_this.list.querySelectorAll('li.e-list-item'), _this.mainList.querySelectorAll('li.e-list-item'));\n }\n if (_this.mode === 'CheckBox' || _this.showDropDownIcon) {\n addClass([_this.overAllWrapper], [iconAnimation]);\n }\n _this.refreshPopup();\n _this.renderReactTemplates();\n _this.popupObj.show(eventArgs.animation, (_this.zIndex === 1000) ? _this.element : null);\n attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.inputElement.id + '_options' });\n if (_this.selectedElementID == null) {\n _this.inputElement.removeAttribute('aria-activedescendant');\n }\n else {\n attributes(_this.inputElement, { 'aria-activedescendant': _this.selectedElementID });\n }\n if (_this.isFirstClick) {\n _this.loadTemplate();\n }\n }\n });\n };\n MultiSelect.prototype.updateListItems = function (listItems, mainListItems) {\n for (var i = 0; i < listItems.length; i++) {\n this.findGroupStart(listItems[i]);\n this.findGroupStart(mainListItems[i]);\n }\n this.deselectHeader();\n };\n MultiSelect.prototype.loadTemplate = function () {\n this.refreshListItems(null);\n if (this.mode === 'CheckBox') {\n this.removeFocus();\n }\n this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', e: this });\n };\n MultiSelect.prototype.setScrollPosition = function () {\n if (((!this.hideSelectedItem && this.mode !== 'CheckBox') || (this.mode === 'CheckBox' && !this.enableSelectionOrder)) &&\n (!isNullOrUndefined(this.value) && (this.value.length > 0))) {\n var valueEle = this.findListElement((this.hideSelectedItem ? this.ulElement : this.list), 'li', 'data-value', this.value[this.value.length - 1]);\n if (!isNullOrUndefined(valueEle)) {\n this.scrollBottom(valueEle);\n }\n }\n };\n MultiSelect.prototype.focusAtFirstListItem = function () {\n if (this.ulElement && this.ulElement.querySelector('li.'\n + dropDownBaseClasses.li)) {\n var element = void 0;\n if (this.mode === 'CheckBox') {\n this.removeFocus();\n return;\n }\n else {\n element = this.ulElement.querySelector('li.'\n + dropDownBaseClasses.li + ':not(.'\n + HIDE_LIST + ')');\n }\n if (element !== null) {\n this.removeFocus();\n this.addListFocus(element);\n }\n }\n };\n MultiSelect.prototype.focusAtLastListItem = function (data) {\n var activeElement;\n if (data) {\n activeElement = Search(data, this.liCollections, 'StartsWith', this.ignoreCase);\n }\n else {\n if (this.value && this.value.length) {\n Search(this.value[this.value.length - 1], this.liCollections, 'StartsWith', this.ignoreCase);\n }\n else {\n activeElement = null;\n }\n }\n if (activeElement && activeElement.item !== null) {\n this.addListFocus(activeElement.item);\n this.scrollBottom(activeElement.item, activeElement.index);\n }\n };\n MultiSelect.prototype.getAriaAttributes = function () {\n var ariaAttributes = {\n 'aria-disabled': 'false',\n 'role': 'combobox',\n 'aria-expanded': 'false'\n };\n return ariaAttributes;\n };\n MultiSelect.prototype.updateListARIA = function () {\n if (!isNullOrUndefined(this.ulElement)) {\n attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });\n }\n var disableStatus = (this.inputElement.disabled) ? true : false;\n if (!this.isPopupOpen()) {\n attributes(this.inputElement, this.getAriaAttributes());\n }\n if (disableStatus) {\n attributes(this.inputElement, { 'aria-disabled': 'true' });\n }\n this.ensureAriaDisabled((disableStatus) ? 'true' : 'false');\n };\n MultiSelect.prototype.ensureAriaDisabled = function (status) {\n if (this.htmlAttributes && this.htmlAttributes['aria-disabled']) {\n var attr = this.htmlAttributes;\n extend(attr, { 'aria-disabled': status }, attr);\n this.setProperties({ htmlAttributes: attr }, true);\n }\n };\n MultiSelect.prototype.removelastSelection = function (e) {\n var elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP);\n var value = elements[elements.length - 1].getAttribute('data-value');\n if (!isNullOrUndefined(this.value)) {\n this.tempValues = this.value.slice();\n }\n var customValue = this.getFormattedValue(value);\n if (this.allowCustomValue && (value !== 'false' && customValue === false || (!isNullOrUndefined(customValue) &&\n customValue.toString() === 'NaN'))) {\n customValue = value;\n }\n this.removeValue(customValue, e);\n this.removeChipSelection();\n this.updateDelimeter(this.delimiterChar, e);\n this.makeTextBoxEmpty();\n if (this.mainList && this.listData) {\n this.refreshSelection();\n }\n this.checkPlaceholderSize();\n };\n MultiSelect.prototype.onActionFailure = function (e) {\n _super.prototype.onActionFailure.call(this, e);\n this.renderPopup();\n this.onPopupShown();\n };\n MultiSelect.prototype.targetElement = function () {\n this.targetInputElement = this.inputElement;\n if (this.mode === 'CheckBox' && this.allowFiltering) {\n this.notify('targetElement', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n }\n return this.targetInputElement.value;\n };\n MultiSelect.prototype.getForQuery = function (valuecheck) {\n var predicate;\n var field = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;\n for (var i = 0; i < valuecheck.length; i++) {\n if (i === 0) {\n predicate = new Predicate(field, 'equal', valuecheck[i]);\n }\n else {\n predicate = predicate.or(field, 'equal', valuecheck[i]);\n }\n }\n return this.getQuery(this.query).where(predicate);\n };\n /* eslint-disable @typescript-eslint/no-unused-vars */\n MultiSelect.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n /* eslint-enable @typescript-eslint/no-unused-vars */\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n this.updateSelectElementData(this.allowFiltering);\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {\n for (var i = 0; i < this.value.length; i++) {\n var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', proxy.value[i]);\n if (!checkEle) {\n this.value.splice(i, 1);\n i -= 1;\n }\n }\n }\n this.updateActionList(ulElement, list, e);\n if (this.dataSource instanceof DataManager && this.mode === 'CheckBox' && this.allowFiltering) {\n this.removeFocus();\n }\n };\n /* eslint-disable @typescript-eslint/no-unused-vars */\n MultiSelect.prototype.updateActionList = function (ulElement, list, e, isUpdated) {\n /* eslint-enable @typescript-eslint/no-unused-vars */\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n }\n if (!this.mainList && !this.mainData) {\n this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;\n this.mainData = list;\n this.mainListCollection = this.liCollections;\n }\n else if (isNullOrUndefined(this.mainData) || this.mainData.length === 0) {\n this.mainData = list;\n }\n if ((this.remoteCustomValue || list.length <= 0) && this.allowCustomValue && this.inputFocus && this.allowFiltering &&\n this.inputElement.value && this.inputElement.value !== '') {\n this.checkForCustomValue(this.tempQuery, this.fields);\n return;\n }\n if (this.value && this.value.length && ((this.mode !== 'CheckBox' && this.inputElement.value.trim() !== '') ||\n this.mode === 'CheckBox' || ((this.keyCode === 8 || this.keyCode === 46) && this.allowFiltering &&\n this.allowCustomValue && this.dataSource instanceof DataManager && this.inputElement.value === ''))) {\n this.refreshSelection();\n }\n this.updateListARIA();\n this.unwireListEvents();\n this.wireListEvents();\n if (!isNullOrUndefined(this.setInitialValue)) {\n this.setInitialValue();\n }\n if (!isNullOrUndefined(this.selectAllAction)) {\n this.selectAllAction();\n }\n if (this.setDynValue) {\n if (!isNullOrUndefined(this.text) && (isNullOrUndefined(this.value) || this.value.length === 0)) {\n this.initialTextUpdate();\n }\n this.initialValueUpdate();\n this.initialUpdate();\n this.refreshPlaceHolder();\n if (this.mode !== 'CheckBox' && this.changeOnBlur) {\n this.updateValueState(null, this.value, null);\n }\n }\n this.renderPopup();\n if (this.beforePopupOpen) {\n this.beforePopupOpen = false;\n this.onPopupShown(e);\n }\n };\n MultiSelect.prototype.refreshSelection = function () {\n var value;\n var element;\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n if (!isNullOrUndefined(this.value)) {\n for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {\n value = this.value[index];\n element = this.findListElement(this.list, 'li', 'data-value', value);\n if (element) {\n addClass([element], className);\n if (this.hideSelectedItem && element.previousSibling\n && element.previousElementSibling.classList.contains(dropDownBaseClasses.group)\n && (!element.nextElementSibling ||\n element.nextElementSibling.classList.contains(dropDownBaseClasses.group))) {\n addClass([element.previousElementSibling], className);\n }\n if (this.hideSelectedItem && this.fields.groupBy && !element.previousElementSibling.classList.contains(HIDE_LIST)) {\n this.hideGroupItem(value);\n }\n if (this.hideSelectedItem && element.classList.contains(dropDownBaseClasses.focus)) {\n removeClass([element], dropDownBaseClasses.focus);\n var listEle = element.parentElement.querySelectorAll('.' +\n dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');\n if (listEle.length > 0) {\n addClass([listEle[0]], dropDownBaseClasses.focus);\n }\n else {\n //EJ2-57588 - for this task, we prevent the ul element cloning ( this.ulElement = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;)\n if (!(this.list && this.list.querySelectorAll('.' + dropDownBaseClasses.li).length > 0)) {\n this.l10nUpdate();\n addClass([this.list], dropDownBaseClasses.noData);\n }\n }\n }\n element.setAttribute('aria-selected', 'true');\n if (this.mode === 'CheckBox' && element.classList.contains('e-active')) {\n var ariaValue = element.firstElementChild.getAttribute('aria-checked');\n if (isNullOrUndefined(ariaValue) || ariaValue === 'false') {\n var args = {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox',\n li: element,\n e: null\n };\n this.notify('updatelist', args);\n }\n }\n }\n }\n }\n this.checkSelectAll();\n this.checkMaxSelection();\n };\n MultiSelect.prototype.hideGroupItem = function (value) {\n var element;\n var element1;\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n element1 = element = this.findListElement(this.ulElement, 'li', 'data-value', value);\n var i = 0;\n var j = 0;\n var temp = true;\n var temp1 = true;\n do {\n if (element && element.previousElementSibling\n && (!element.previousElementSibling.classList.contains(HIDE_LIST) &&\n element.previousElementSibling.classList.contains(dropDownBaseClasses.li))) {\n temp = false;\n }\n if (!temp || !element || (element.previousElementSibling\n && element.previousElementSibling.classList.contains(dropDownBaseClasses.group))) {\n i = 10;\n }\n else {\n element = element.previousElementSibling;\n }\n if (element1 && element1.nextElementSibling\n && (!element1.nextElementSibling.classList.contains(HIDE_LIST) &&\n element1.nextElementSibling.classList.contains(dropDownBaseClasses.li))) {\n temp1 = false;\n }\n if (!temp1 || !element1 || (element1.nextElementSibling\n && element1.nextElementSibling.classList.contains(dropDownBaseClasses.group))) {\n j = 10;\n }\n else {\n element1 = element1.nextElementSibling;\n }\n } while (i < 10 || j < 10);\n if (temp && temp1 && !element.previousElementSibling.classList.contains(HIDE_LIST)) {\n addClass([element.previousElementSibling], className);\n }\n else if (temp && temp1 && element.previousElementSibling.classList.contains(HIDE_LIST)) {\n removeClass([element.previousElementSibling], className);\n }\n };\n MultiSelect.prototype.getValidLi = function () {\n var liElement = this.ulElement.querySelector('li.' + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');\n return (!isNullOrUndefined(liElement) ? liElement : this.liCollections[0]);\n };\n MultiSelect.prototype.checkSelectAll = function () {\n var groupItemLength = this.list.querySelectorAll('li.e-list-group-item.e-active').length;\n var listItem = this.list.querySelectorAll('li.e-list-item');\n var searchCount = this.list.querySelectorAll('li.' + dropDownBaseClasses.li).length;\n var searchActiveCount = this.list.querySelectorAll('li.' + dropDownBaseClasses.selected).length;\n if (this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {\n searchActiveCount = searchActiveCount - groupItemLength;\n }\n if ((searchCount === searchActiveCount || searchActiveCount === this.maximumSelectionLength)\n && (this.mode === 'CheckBox' && this.showSelectAll)) {\n this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'check' });\n }\n else if ((searchCount !== searchActiveCount) && (this.mode === 'CheckBox' && this.showSelectAll)) {\n this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'uncheck' });\n }\n if (this.enableGroupCheckBox && this.fields.groupBy && !this.enableSelectionOrder) {\n for (var i = 0; i < listItem.length; i++) {\n this.findGroupStart(listItem[i]);\n }\n this.deselectHeader();\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n MultiSelect.prototype.openClick = function (e) {\n if (!this.openOnClick && this.mode !== 'CheckBox') {\n if (this.targetElement() !== '') {\n this.showPopup();\n }\n else {\n this.hidePopup(e);\n }\n }\n else if (!this.openOnClick && this.mode === 'CheckBox' && !this.isPopupOpen()) {\n this.showPopup();\n }\n };\n MultiSelect.prototype.keyUp = function (e) {\n if (this.mode === 'CheckBox' && !this.openOnClick) {\n var char = String.fromCharCode(e.keyCode);\n var isWordCharacter = char.match(/\\w/);\n if (!isNullOrUndefined(isWordCharacter)) {\n this.isValidKey = true;\n }\n }\n this.isValidKey = (this.isPopupOpen() && e.keyCode === 8) || this.isValidKey;\n this.isValidKey = e.ctrlKey && e.keyCode === 86 ? false : this.isValidKey;\n if (this.isValidKey) {\n this.isValidKey = false;\n this.expandTextbox();\n this.showOverAllClear();\n switch (e.keyCode) {\n default:\n // For filtering works in mobile firefox\n this.search(e);\n }\n }\n };\n /**\n * To filter the multiselect 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 MultiSelect.prototype.filter = function (dataSource, query, fields) {\n this.isFiltered = true;\n this.remoteFilterAction = true;\n this.dataUpdater(dataSource, query, fields);\n };\n MultiSelect.prototype.getQuery = function (query) {\n var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();\n if (this.isFiltered) {\n return filterQuery;\n }\n if (this.filterAction) {\n if (this.targetElement() !== null) {\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);\n }\n else {\n var fields = this.fields;\n filterQuery.where(!isNullOrUndefined(fields.text) ? fields.text : '', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);\n }\n }\n return filterQuery;\n }\n else {\n return query ? query : this.query ? this.query : new Query();\n }\n };\n MultiSelect.prototype.dataUpdater = function (dataSource, query, fields) {\n this.isDataFetched = false;\n if (this.targetElement().trim() === '') {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n if (this.backCommand) {\n this.remoteCustomValue = false;\n if (this.allowCustomValue && list.querySelectorAll('li').length == 0 && this.mainData.length > 0) {\n this.mainData = [];\n }\n this.onActionComplete(list, this.mainData);\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n if (this.keyCode !== 8) {\n this.focusAtFirstListItem();\n }\n this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', e: this });\n }\n }\n else {\n this.resetList(dataSource, fields, query);\n if (this.allowCustomValue) {\n if (!(dataSource instanceof DataManager)) {\n this.checkForCustomValue(query, fields);\n }\n else {\n this.remoteCustomValue = true;\n this.tempQuery = query;\n }\n }\n }\n this.refreshPopup();\n if (this.mode === 'CheckBox') {\n this.removeFocus();\n }\n };\n MultiSelect.prototype.checkForCustomValue = function (query, fields) {\n var dataChecks = !this.getValueByText(this.inputElement.value, this.ignoreCase);\n if (this.allowCustomValue && dataChecks) {\n var value = this.inputElement.value;\n var field = fields ? fields : this.fields;\n var customData = (!isNullOrUndefined(this.mainData) && this.mainData.length > 0) ?\n this.mainData[0] : this.mainData;\n if (typeof (customData) !== 'string' && typeof (customData) !== 'number' && typeof (customData) !== 'boolean') {\n var dataItem = {};\n setValue(field.text, value, dataItem);\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), customData)\n === 'number') {\n setValue(field.value, Math.random(), dataItem);\n }\n else {\n setValue(field.value, value, dataItem);\n }\n var tempData = JSON.parse(JSON.stringify(this.listData));\n tempData.splice(0, 0, dataItem);\n this.resetList(tempData, field, query);\n }\n else {\n var tempData = JSON.parse(JSON.stringify(this.listData));\n tempData.splice(0, 0, this.inputElement.value);\n tempData[0] = (typeof customData === 'number' && !isNaN(parseFloat(tempData[0]))) ?\n parseFloat(tempData[0]) : tempData[0];\n tempData[0] = (typeof customData === 'boolean') ?\n (tempData[0] === 'true' ? true : (tempData[0] === 'false' ? false : tempData[0])) : tempData[0];\n this.resetList(tempData, field);\n }\n }\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n };\n MultiSelect.prototype.getNgDirective = function () {\n return 'EJS-MULTISELECT';\n };\n MultiSelect.prototype.wrapperClick = function (e) {\n this.setDynValue = false;\n if (!this.enabled) {\n return;\n }\n if (e.target === this.overAllClear) {\n e.preventDefault();\n return;\n }\n if (!this.inputFocus) {\n this.inputElement.focus();\n }\n if (!this.readonly) {\n if (e.target && e.target.classList.toString().indexOf(CHIP_CLOSE) !== -1) {\n if (this.isPopupOpen()) {\n this.refreshPopup();\n }\n return;\n }\n if (!this.isPopupOpen() &&\n (this.openOnClick || (this.showDropDownIcon && e.target && e.target.className === dropdownIcon))) {\n this.showPopup(e);\n }\n else {\n this.hidePopup(e);\n if (this.mode === 'CheckBox') {\n this.showOverAllClear();\n this.inputFocus = true;\n if (!this.overAllWrapper.classList.contains(FOCUS)) {\n this.overAllWrapper.classList.add(FOCUS);\n }\n }\n }\n }\n if (!(this.targetElement() && this.targetElement() !== '')) {\n e.preventDefault();\n }\n };\n MultiSelect.prototype.enable = function (state) {\n if (state) {\n this.overAllWrapper.classList.remove(DISABLED);\n this.inputElement.removeAttribute('disabled');\n attributes(this.inputElement, { 'aria-disabled': 'false' });\n this.ensureAriaDisabled('false');\n }\n else {\n this.overAllWrapper.classList.add(DISABLED);\n this.inputElement.setAttribute('disabled', 'true');\n attributes(this.inputElement, { 'aria-disabled': 'true' });\n this.ensureAriaDisabled('true');\n }\n if (this.enabled !== state) {\n this.enabled = state;\n }\n this.hidePopup();\n };\n MultiSelect.prototype.onBlurHandler = function (eve, isDocClickFromCheck) {\n var target;\n if (!isNullOrUndefined(eve)) {\n target = eve.relatedTarget;\n }\n if (this.popupObj && document.body.contains(this.popupObj.element) && this.popupObj.element.contains(target)) {\n if (this.mode !== 'CheckBox') {\n this.inputElement.focus();\n }\n else if ((this.floatLabelType === 'Auto' &&\n ((this.overAllWrapper.classList.contains('e-outline')) || (this.overAllWrapper.classList.contains('e-filled'))))) {\n addClass([this.overAllWrapper], 'e-valid-input');\n }\n return;\n }\n if (this.floatLabelType === 'Auto' && (this.overAllWrapper.classList.contains('e-outline')) && this.mode === 'CheckBox' &&\n ((isNullOrUndefined(this.value)) || this.value.length === 0)) {\n removeClass([this.overAllWrapper], 'e-valid-input');\n }\n if (this.mode === 'CheckBox' && Browser.isIE && !isNullOrUndefined(eve) && !isDocClickFromCheck) {\n this.inputFocus = false;\n this.overAllWrapper.classList.remove(FOCUS);\n return;\n }\n if (this.scrollFocusStatus) {\n if (!isNullOrUndefined(eve)) {\n eve.preventDefault();\n }\n this.inputElement.focus();\n this.scrollFocusStatus = false;\n return;\n }\n this.inputFocus = false;\n this.overAllWrapper.classList.remove(FOCUS);\n if (this.addTagOnBlur) {\n var dataChecks = this.getValueByText(this.inputElement.value, this.ignoreCase, this.ignoreAccent);\n var listLiElement = this.findListElement(this.list, 'li', 'data-value', dataChecks);\n var className = this.hideSelectedItem ? HIDE_LIST : dropDownBaseClasses.selected;\n var allowChipAddition = (listLiElement && !listLiElement.classList.contains(className)) ? true : false;\n if (allowChipAddition) {\n this.updateListSelection(listLiElement, eve);\n if (this.mode === 'Delimiter') {\n this.updateDelimeter(this.delimiterChar);\n }\n }\n }\n this.updateDataList();\n this.refreshListItems(null);\n if (this.mode !== 'Box' && this.mode !== 'CheckBox') {\n this.updateDelimView();\n }\n if (this.changeOnBlur) {\n this.updateValueState(eve, this.value, this.tempValues);\n this.dispatchEvent(this.hiddenElement, 'change');\n }\n this.overAllClear.style.display = 'none';\n if (this.isPopupOpen()) {\n this.hidePopup(eve);\n }\n this.makeTextBoxEmpty();\n this.trigger('blur');\n this.focused = true;\n if (Browser.isDevice && this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.removeChipFocus();\n }\n this.removeChipSelection();\n this.refreshInputHight();\n floatLabelBlur(this.overAllWrapper, this.componentWrapper, this.value, this.floatLabelType, this.placeholder);\n this.refreshPlaceHolder();\n if ((this.allowFiltering || (this.enableSelectionOrder === true && this.mode === 'CheckBox'))\n && !isNullOrUndefined(this.mainList)) {\n this.ulElement = this.mainList;\n }\n this.checkPlaceholderSize();\n Input.createSpanElement(this.overAllWrapper, this.createElement);\n Input.calculateWidth(this.inputElement, this.overAllWrapper);\n if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {\n this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');\n }\n };\n MultiSelect.prototype.checkPlaceholderSize = function () {\n if (this.showDropDownIcon) {\n var downIconWidth = this.dropIcon.offsetWidth +\n parseInt(window.getComputedStyle(this.dropIcon).marginRight, 10);\n this.setPlaceholderSize(downIconWidth);\n }\n else {\n if (!isNullOrUndefined(this.dropIcon)) {\n this.setPlaceholderSize(this.showDropDownIcon ? this.dropIcon.offsetWidth : 0);\n }\n }\n };\n MultiSelect.prototype.setPlaceholderSize = function (downIconWidth) {\n if (isNullOrUndefined(this.value) || this.value.length === 0) {\n if (this.dropIcon.offsetWidth !== 0) {\n this.searchWrapper.style.width = ('calc(100% - ' + (downIconWidth + 10)) + 'px';\n }\n else {\n addClass([this.searchWrapper], CUSTOM_WIDTH);\n }\n }\n else if (!isNullOrUndefined(this.value)) {\n this.searchWrapper.removeAttribute('style');\n removeClass([this.searchWrapper], CUSTOM_WIDTH);\n }\n };\n MultiSelect.prototype.refreshInputHight = function () {\n if ((!this.value || !this.value.length) && (isNullOrUndefined(this.text) || this.text === '')) {\n this.searchWrapper.classList.remove(ZERO_SIZE);\n }\n else {\n this.searchWrapper.classList.add(ZERO_SIZE);\n }\n };\n MultiSelect.prototype.validateValues = function (newValue, oldValue) {\n return JSON.stringify(newValue.slice().sort()) !== JSON.stringify(oldValue.slice().sort());\n };\n MultiSelect.prototype.updateValueState = function (event, newVal, oldVal) {\n var newValue = newVal ? newVal : [];\n var oldValue = oldVal ? oldVal : [];\n if (this.initStatus && this.validateValues(newValue, oldValue)) {\n var eventArgs = {\n e: event,\n oldValue: oldVal,\n value: newVal,\n isInteracted: event ? true : false,\n element: this.element,\n event: event\n };\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', eventArgs);\n }\n this.updateTempValue();\n if (!this.changeOnBlur) {\n this.dispatchEvent(this.hiddenElement, 'change');\n }\n }\n };\n MultiSelect.prototype.updateTempValue = function () {\n if (!this.value) {\n this.tempValues = this.value;\n }\n else {\n this.tempValues = this.value.slice();\n }\n };\n MultiSelect.prototype.getPagingCount = function () {\n var height = this.list.classList.contains(dropDownBaseClasses.noData) ? null :\n getComputedStyle(this.getItems()[0], null).getPropertyValue('height');\n return Math.round(this.list.offsetHeight / parseInt(height, 10));\n };\n MultiSelect.prototype.pageUpSelection = function (steps) {\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n var previousItem = steps >= 0 ? collection[steps + 1] : collection[0];\n this.addListFocus(previousItem);\n this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')));\n };\n MultiSelect.prototype.pageDownSelection = function (steps) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var list = this.getItems();\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n var previousItem = steps <= collection.length ? collection[steps - 1] : collection[collection.length - 1];\n this.addListFocus(previousItem);\n this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')));\n };\n MultiSelect.prototype.getItems = function () {\n if (!this.list) {\n _super.prototype.render.call(this);\n }\n return this.ulElement && this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li).length > 0 ?\n this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li\n + ':not(.' + HIDE_LIST + ')') : [];\n };\n MultiSelect.prototype.focusInHandler = function (e) {\n if (this.enabled) {\n this.showOverAllClear();\n this.inputFocus = true;\n if (this.value && this.value.length) {\n if (this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.chipCollectionWrapper.style.display = '';\n }\n else {\n this.showDelimWrapper();\n }\n if (this.mode !== 'CheckBox') {\n this.viewWrapper.style.display = 'none';\n }\n }\n if (this.mode !== 'CheckBox') {\n this.searchWrapper.classList.remove(ZERO_SIZE);\n }\n this.checkPlaceholderSize();\n if (this.focused) {\n var args = { isInteracted: e ? true : false, event: e };\n this.trigger('focus', args);\n this.focused = false;\n }\n if (!this.overAllWrapper.classList.contains(FOCUS)) {\n this.overAllWrapper.classList.add(FOCUS);\n }\n floatLabelFocus(this.overAllWrapper, this.componentWrapper);\n if (this.isPopupOpen()) {\n this.refreshPopup();\n }\n Input.calculateWidth(this.inputElement, this.overAllWrapper);\n return true;\n }\n else {\n return false;\n }\n };\n MultiSelect.prototype.showDelimWrapper = function () {\n if (this.mode === 'CheckBox') {\n this.viewWrapper.style.display = '';\n }\n else {\n this.delimiterWrapper.style.display = '';\n }\n this.componentWrapper.classList.add(DELIMITER_VIEW_WRAPPER);\n };\n MultiSelect.prototype.hideDelimWrapper = function () {\n this.delimiterWrapper.style.display = 'none';\n this.componentWrapper.classList.remove(DELIMITER_VIEW_WRAPPER);\n };\n MultiSelect.prototype.expandTextbox = function () {\n var size = 5;\n if (this.placeholder) {\n size = size > this.inputElement.placeholder.length ? size : this.inputElement.placeholder.length;\n }\n if (this.inputElement.value.length > size) {\n this.inputElement.size = this.inputElement.value.length;\n }\n else {\n this.inputElement.size = size;\n }\n };\n MultiSelect.prototype.isPopupOpen = function () {\n return ((this.popupWrapper !== null) && (this.popupWrapper.parentElement !== null));\n };\n MultiSelect.prototype.refreshPopup = function () {\n if (this.popupObj && this.mobFilter) {\n this.popupObj.setProperties({ width: this.calcPopupWidth() });\n this.popupObj.refreshPosition(this.overAllWrapper);\n this.popupObj.resolveCollision();\n }\n };\n MultiSelect.prototype.checkTextLength = function () {\n return this.targetElement().length < 1;\n };\n MultiSelect.prototype.popupKeyActions = function (e) {\n switch (e.keyCode) {\n case 38:\n this.hidePopup(e);\n if (this.mode === 'CheckBox') {\n this.inputElement.focus();\n }\n e.preventDefault();\n break;\n case 40:\n if (!this.isPopupOpen()) {\n this.showPopup(e);\n e.preventDefault();\n }\n break;\n }\n };\n MultiSelect.prototype.updateAriaAttribute = function () {\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n if (!isNullOrUndefined(focusedItem)) {\n this.inputElement.setAttribute('aria-activedescendant', focusedItem.id);\n if (this.allowFiltering) {\n var filterInput = this.popupWrapper.querySelector('.' + FILTERINPUT);\n filterInput && filterInput.setAttribute('aria-activedescendant', focusedItem.id);\n }\n else if (this.mode == \"CheckBox\") {\n this.overAllWrapper.setAttribute('aria-activedescendant', focusedItem.id);\n }\n }\n };\n MultiSelect.prototype.homeNavigation = function (isHome) {\n this.removeFocus();\n var scrollEle = this.ulElement.querySelectorAll('li.' + dropDownBaseClasses.li\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n if (scrollEle.length > 0) {\n var element = scrollEle[(isHome) ? 0 : (scrollEle.length - 1)];\n element.classList.add(dropDownBaseClasses.focus);\n this.scrollBottom(element);\n }\n };\n MultiSelect.prototype.onKeyDown = function (e) {\n if (this.readonly || !this.enabled && this.mode !== 'CheckBox') {\n return;\n }\n this.keyCode = e.keyCode;\n this.keyDownStatus = true;\n if (e.keyCode > 111 && e.keyCode < 124) {\n return;\n }\n if (e.altKey) {\n this.popupKeyActions(e);\n return;\n }\n else if (this.isPopupOpen()) {\n var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);\n var activeIndex = void 0;\n switch (e.keyCode) {\n case 36:\n case 35:\n this.homeNavigation((e.keyCode === 36) ? true : false);\n break;\n case 33:\n e.preventDefault();\n if (focusedItem) {\n this.getIndexByValue(focusedItem.getAttribute('data-value'));\n this.pageUpSelection(activeIndex - this.getPagingCount());\n this.updateAriaAttribute();\n }\n return;\n case 34:\n e.preventDefault();\n if (focusedItem) {\n this.getIndexByValue(focusedItem.getAttribute('data-value'));\n this.pageDownSelection(activeIndex + this.getPagingCount());\n this.updateAriaAttribute();\n }\n return;\n case 38:\n this.arrowUp(e);\n break;\n case 40:\n this.arrowDown(e);\n break;\n case 27:\n e.preventDefault();\n this.hidePopup(e);\n if (this.mode === 'CheckBox') {\n this.inputElement.focus();\n }\n return;\n case 13:\n e.preventDefault();\n if (this.mode !== 'CheckBox') {\n this.selectByKey(e);\n }\n this.checkPlaceholderSize();\n return;\n case 32:\n this.spaceKeySelection(e);\n return;\n case 9:\n e.preventDefault();\n this.hidePopup(e);\n this.inputElement.focus();\n this.overAllWrapper.classList.add(FOCUS);\n }\n }\n else {\n switch (e.keyCode) {\n case 13:\n case 9:\n case 16:\n case 17:\n case 20:\n return;\n case 40:\n if (this.openOnClick) {\n this.showPopup();\n }\n break;\n case 27:\n e.preventDefault();\n this.escapeAction();\n return;\n }\n }\n if (this.checkTextLength()) {\n this.keyNavigation(e);\n }\n if (this.mode === 'CheckBox' && this.enableSelectionOrder) {\n if (this.allowFiltering) {\n this.previousFilterText = this.targetElement();\n }\n this.checkBackCommand(e);\n }\n this.expandTextbox();\n if (!(this.mode === 'CheckBox' && this.showSelectAll)) {\n this.refreshPopup();\n }\n };\n MultiSelect.prototype.arrowDown = function (e) {\n e.preventDefault();\n this.moveByList(1);\n this.keyAction = true;\n if (document.activeElement.classList.contains(FILTERINPUT)\n || (this.mode === 'CheckBox' && !this.allowFiltering && document.activeElement !== this.list)) {\n EventHandler.add(this.list, 'keydown', this.onKeyDown, this);\n }\n this.updateAriaAttribute();\n };\n MultiSelect.prototype.arrowUp = function (e) {\n e.preventDefault();\n this.keyAction = true;\n var list = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {\n list = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ',li.' + dropDownBaseClasses.group\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n }\n var focuseElem = this.list.querySelector('li.' + dropDownBaseClasses.focus);\n var index = Array.prototype.slice.call(list).indexOf(focuseElem);\n if (index <= 0 && (this.mode === 'CheckBox' && this.allowFiltering)) {\n this.keyAction = false;\n this.notify('inputFocus', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'focus' });\n }\n this.moveByList(-1);\n this.updateAriaAttribute();\n };\n MultiSelect.prototype.spaceKeySelection = function (e) {\n if (this.mode === 'CheckBox') {\n if (!document.activeElement.classList.contains(FILTERINPUT)) {\n e.preventDefault();\n this.keyAction = true;\n }\n this.selectByKey(e);\n }\n this.checkPlaceholderSize();\n };\n MultiSelect.prototype.checkBackCommand = function (e) {\n if (e.keyCode === 8 && this.allowFiltering ? this.targetElement() !== this.previousFilterText : this.targetElement() === '') {\n this.backCommand = false;\n }\n else {\n this.backCommand = true;\n }\n };\n MultiSelect.prototype.keyNavigation = function (e) {\n if ((this.mode !== 'Delimiter' && this.mode !== 'CheckBox') && this.value && this.value.length) {\n switch (e.keyCode) {\n case 37: //left arrow\n e.preventDefault();\n this.moveBy(-1, e);\n break;\n case 39: //right arrow\n e.preventDefault();\n this.moveBy(1, e);\n break;\n case 8:\n this.removelastSelection(e);\n break;\n case 46: //del\n this.removeSelectedChip(e);\n break;\n }\n }\n else if (e.keyCode === 8 && this.mode === 'Delimiter') {\n if (this.value && this.value.length) {\n e.preventDefault();\n var temp = this.value[this.value.length - 1];\n this.removeValue(temp, e);\n this.updateDelimeter(this.delimiterChar, e);\n this.focusAtLastListItem(temp);\n }\n }\n };\n MultiSelect.prototype.selectByKey = function (e) {\n this.removeChipSelection();\n this.selectListByKey(e);\n if (this.hideSelectedItem) {\n this.focusAtFirstListItem();\n }\n };\n MultiSelect.prototype.escapeAction = function () {\n var temp = this.tempValues ? this.tempValues.slice() : [];\n if (this.value && this.validateValues(this.value, temp)) {\n if (this.mode !== 'CheckBox') {\n this.value = temp;\n this.initialValueUpdate();\n }\n if (this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.chipCollectionWrapper.style.display = '';\n }\n else {\n this.showDelimWrapper();\n }\n this.refreshPlaceHolder();\n if (this.value.length) {\n this.showOverAllClear();\n }\n else {\n this.hideOverAllClear();\n }\n }\n this.makeTextBoxEmpty();\n };\n MultiSelect.prototype.scrollBottom = function (selectedLI, activeIndex) {\n var currentOffset = this.list.offsetHeight;\n var nextBottom = selectedLI.offsetTop + selectedLI.offsetHeight - this.list.scrollTop;\n var nextOffset = this.list.scrollTop + nextBottom - currentOffset;\n var boxRange = (selectedLI.offsetTop + selectedLI.offsetHeight - this.list.scrollTop);\n boxRange = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n boxRange - this.fixedHeaderElement.offsetHeight : boxRange;\n if (activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextBottom > currentOffset) {\n this.list.scrollTop = nextOffset;\n }\n else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = nextOffset;\n }\n };\n MultiSelect.prototype.scrollTop = function (selectedLI, activeIndex) {\n var nextOffset = selectedLI.offsetTop - this.list.scrollTop;\n nextOffset = this.fields.groupBy && !isUndefined(this.fixedHeaderElement) ?\n nextOffset - this.fixedHeaderElement.offsetHeight : nextOffset;\n var boxRange = (selectedLI.offsetTop + selectedLI.offsetHeight - this.list.scrollTop);\n if (activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextOffset < 0) {\n this.list.scrollTop = this.list.scrollTop + nextOffset;\n }\n else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = selectedLI.offsetTop - (this.fields.groupBy && !isUndefined(this.fixedHeaderElement) ?\n this.fixedHeaderElement.offsetHeight : 0);\n }\n };\n MultiSelect.prototype.selectListByKey = function (e) {\n var li = this.list.querySelector('li.' + dropDownBaseClasses.focus);\n var limit = this.value && this.value.length ? this.value.length : 0;\n var target;\n if (li !== null) {\n if (li.classList.contains('e-active')) {\n limit = limit - 1;\n }\n if (this.isValidLI(li) && limit < this.maximumSelectionLength) {\n this.updateListSelection(li, e);\n this.addListFocus(li);\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n this.updateDelimeter(this.delimiterChar, e);\n this.refreshInputHight();\n this.checkPlaceholderSize();\n if (this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {\n target = li.firstElementChild.lastElementChild;\n this.findGroupStart(target);\n this.deselectHeader();\n }\n }\n else {\n this.updateDelimeter(this.delimiterChar, e);\n }\n this.makeTextBoxEmpty();\n if (this.mode !== 'CheckBox') {\n this.refreshListItems(li.textContent);\n }\n if (!this.changeOnBlur) {\n this.updateValueState(e, this.value, this.tempValues);\n }\n this.refreshPopup();\n }\n else {\n if (!this.isValidLI(li) && limit < this.maximumSelectionLength) {\n target = li.firstElementChild.lastElementChild;\n if (target.classList.contains('e-check')) {\n this.selectAllItem(false, e, li);\n }\n else {\n this.selectAllItem(true, e, li);\n }\n }\n }\n this.refreshSelection();\n if (this.closePopupOnSelect) {\n this.hidePopup(e);\n }\n }\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.refreshListItems = function (data) {\n if ((this.allowFiltering || (this.mode === 'CheckBox' && this.enableSelectionOrder === true)\n || this.allowCustomValue) && this.mainList && this.listData) {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n this.onActionComplete(list, this.mainData);\n this.focusAtLastListItem(data);\n if (this.value && this.value.length) {\n this.refreshSelection();\n }\n }\n };\n MultiSelect.prototype.removeSelectedChip = function (e) {\n var selectedElem = this.chipCollectionWrapper.querySelector('span.' + CHIP_SELECTED);\n var temp;\n if (selectedElem !== null) {\n if (!isNullOrUndefined(this.value)) {\n this.tempValues = this.value.slice();\n }\n temp = selectedElem.nextElementSibling;\n if (temp !== null) {\n this.removeChipSelection();\n this.addChipSelection(temp, e);\n }\n this.removeValue(selectedElem.getAttribute('data-value'), e);\n this.makeTextBoxEmpty();\n }\n if (this.closePopupOnSelect) {\n this.hidePopup(e);\n }\n this.checkPlaceholderSize();\n };\n MultiSelect.prototype.moveByTop = function (state) {\n var elements = this.list.querySelectorAll('li.' + dropDownBaseClasses.li);\n var index;\n if (elements.length > 1) {\n this.removeFocus();\n index = state ? 0 : (elements.length - 1);\n this.addListFocus(elements[index]);\n this.scrollBottom(elements[index], index);\n }\n this.updateAriaAttribute();\n };\n MultiSelect.prototype.moveByList = function (position) {\n if (this.list) {\n var elements = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n if (this.mode === 'CheckBox' && this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {\n elements = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ',li.' + dropDownBaseClasses.group\n + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');\n }\n var selectedElem = this.list.querySelector('li.' + dropDownBaseClasses.focus);\n var temp = -1;\n if (elements.length) {\n for (var index = 0; index < elements.length; index++) {\n if (elements[index] === selectedElem) {\n temp = index;\n break;\n }\n }\n if (position > 0) {\n if (temp < (elements.length - 1)) {\n this.removeFocus();\n this.addListFocus(elements[++temp]);\n this.updateCheck(elements[temp]);\n this.scrollBottom(elements[temp], temp);\n }\n }\n else {\n if (temp > 0) {\n this.removeFocus();\n this.addListFocus(elements[--temp]);\n this.updateCheck(elements[temp]);\n this.scrollTop(elements[temp], temp);\n }\n }\n }\n }\n };\n MultiSelect.prototype.updateCheck = function (element) {\n if (this.mode === 'CheckBox' && this.enableGroupCheckBox &&\n !isNullOrUndefined(this.fields.groupBy)) {\n var checkElement = element.firstElementChild.lastElementChild;\n if (checkElement.classList.contains('e-check')) {\n element.classList.add('e-active');\n }\n else {\n element.classList.remove('e-active');\n }\n }\n };\n MultiSelect.prototype.moveBy = function (position, e) {\n var temp;\n var elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP);\n var selectedElem = this.chipCollectionWrapper.querySelector('span.' + CHIP_SELECTED);\n if (selectedElem === null) {\n if (position < 0) {\n this.addChipSelection(elements[elements.length - 1], e);\n }\n }\n else {\n if (position < 0) {\n temp = selectedElem.previousElementSibling;\n if (temp !== null) {\n this.removeChipSelection();\n this.addChipSelection(temp, e);\n }\n }\n else {\n temp = selectedElem.nextElementSibling;\n this.removeChipSelection();\n if (temp !== null) {\n this.addChipSelection(temp, e);\n }\n }\n }\n };\n MultiSelect.prototype.chipClick = function (e) {\n if (this.enabled) {\n var elem = closest(e.target, '.' + CHIP);\n this.removeChipSelection();\n this.addChipSelection(elem, e);\n }\n };\n MultiSelect.prototype.removeChipSelection = function () {\n if (this.chipCollectionWrapper) {\n this.removeChipFocus();\n }\n };\n MultiSelect.prototype.addChipSelection = function (element, e) {\n addClass([element], CHIP_SELECTED);\n this.trigger('chipSelection', e);\n };\n MultiSelect.prototype.onChipRemove = function (e) {\n if (e.which === 3 || e.button === 2) {\n return;\n }\n if (this.enabled && !this.readonly) {\n var element = e.target.parentElement;\n var customVal = element.getAttribute('data-value');\n var value = this.getFormattedValue(customVal);\n if (this.allowCustomValue && ((customVal !== 'false' && value === false) ||\n (!isNullOrUndefined(value) && value.toString() === 'NaN'))) {\n value = customVal;\n }\n if (this.isPopupOpen() && this.mode !== 'CheckBox') {\n this.hidePopup(e);\n }\n if (!this.inputFocus) {\n this.inputElement.focus();\n }\n this.removeValue(value, e);\n if (isNullOrUndefined(this.findListElement(this.list, 'li', 'data-value', value)) && this.mainList && this.listData) {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n this.onActionComplete(list, this.mainData);\n }\n this.updateDelimeter(this.delimiterChar, e);\n if (this.placeholder && this.floatLabelType === 'Never') {\n this.makeTextBoxEmpty();\n this.checkPlaceholderSize();\n }\n else {\n this.inputElement.value = '';\n }\n e.preventDefault();\n }\n };\n MultiSelect.prototype.makeTextBoxEmpty = function () {\n this.inputElement.value = '';\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.refreshPlaceHolder = function () {\n if (this.placeholder && this.floatLabelType === 'Never') {\n if ((this.value && this.value.length) || (!isNullOrUndefined(this.text) && this.text !== '')) {\n this.inputElement.placeholder = '';\n }\n else {\n this.inputElement.placeholder = encodePlaceholder(this.placeholder);\n }\n }\n else {\n this.setFloatLabelType();\n }\n this.expandTextbox();\n };\n MultiSelect.prototype.removeAllItems = function (value, eve, isClearAll, element, mainElement) {\n var index = this.value.indexOf(value);\n var removeVal = this.value.slice(0);\n removeVal.splice(index, 1);\n this.setProperties({ value: [].concat([], removeVal) }, true);\n element.setAttribute('aria-selected', 'false');\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n removeClass([element], className);\n this.notify('activeList', {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox', li: element,\n e: this, index: index\n });\n this.invokeCheckboxSelection(element, eve, isClearAll);\n this.updateMainList(true, value, mainElement);\n this.updateChipStatus();\n };\n MultiSelect.prototype.invokeCheckboxSelection = function (element, eve, isClearAll) {\n this.notify('updatelist', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: eve });\n attributes(this.inputElement, { 'aria-activedescendant': element.id });\n if ((this.value && this.value.length !== this.mainData.length)\n && (this.mode === 'CheckBox' && this.showSelectAll && !(this.isSelectAll || isClearAll))) {\n this.notify('checkSelectAll', {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox',\n value: 'uncheck'\n });\n }\n };\n MultiSelect.prototype.removeValue = function (value, eve, length, isClearAll) {\n var _this = this;\n var index = this.value.indexOf(this.getFormattedValue(value));\n if (index === -1 && this.allowCustomValue && !isNullOrUndefined(value)) {\n index = this.value.indexOf(value.toString());\n }\n var targetEle = eve && eve.target;\n isClearAll = (isClearAll || targetEle && targetEle.classList.contains('e-close-hooker')) ? true : null;\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n if (index !== -1) {\n var element_1 = this.findListElement(this.list, 'li', 'data-value', value);\n var val_1 = this.getDataByValue(value);\n var eventArgs = {\n e: eve,\n item: element_1,\n itemData: val_1,\n isInteracted: eve ? true : false,\n cancel: false\n };\n this.trigger('removing', eventArgs, function (eventArgs) {\n if (eventArgs.cancel) {\n _this.removeIndex++;\n }\n else {\n var removeVal = _this.value.slice(0);\n removeVal.splice(index, 1);\n _this.setProperties({ value: [].concat([], removeVal) }, true);\n if (element_1 !== null) {\n var hideElement = _this.findListElement(_this.mainList, 'li', 'data-value', value);\n element_1.setAttribute('aria-selected', 'false');\n removeClass([element_1], className);\n if (hideElement) {\n hideElement.setAttribute('aria-selected', 'false');\n removeClass([element_1, hideElement], className);\n }\n _this.notify('activeList', {\n module: 'CheckBoxSelection',\n enable: _this.mode === 'CheckBox', li: element_1,\n e: _this, index: index\n });\n _this.invokeCheckboxSelection(element_1, eve, isClearAll);\n }\n if (_this.hideSelectedItem && _this.fields.groupBy && element_1) {\n _this.hideGroupItem(value);\n }\n if (_this.hideSelectedItem && _this.fixedHeaderElement && _this.fields.groupBy && _this.mode !== 'CheckBox' &&\n _this.isPopupOpen()) {\n _super.prototype.scrollStop.call(_this);\n }\n _this.updateMainList(true, value);\n _this.removeChip(value);\n _this.updateChipStatus();\n var limit = _this.value && _this.value.length ? _this.value.length : 0;\n if (limit < _this.maximumSelectionLength) {\n var collection = _this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.e-active)');\n removeClass(collection, 'e-disable');\n }\n _this.trigger('removed', eventArgs);\n var targetEle_1 = eve && eve.currentTarget;\n var isSelectAll = (targetEle_1 && targetEle_1.classList.contains('e-selectall-parent')) ? true : null;\n if (!_this.changeOnBlur && !isClearAll && (eve && length && !isSelectAll)) {\n _this.updateValueState(eve, _this.value, _this.tempValues);\n }\n if (length) {\n _this.selectAllEventData.push(val_1);\n _this.selectAllEventEle.push(element_1);\n }\n if (length === 1) {\n if (!_this.changeOnBlur) {\n _this.updateValueState(eve, _this.value, _this.tempValues);\n }\n var args = {\n event: eve,\n items: _this.selectAllEventEle,\n itemData: _this.selectAllEventData,\n isInteracted: eve ? true : false,\n isChecked: false\n };\n _this.trigger('selectedAll', args);\n _this.selectAllEventData = [];\n _this.selectAllEventEle = [];\n }\n if (isClearAll && (length === 1 || length === null)) {\n _this.clearAllCallback(eve, isClearAll);\n }\n }\n });\n }\n };\n MultiSelect.prototype.updateMainList = function (state, value, mainElement) {\n if (this.allowFiltering || this.mode === 'CheckBox') {\n var element2 = mainElement ? mainElement :\n this.findListElement(this.mainList, 'li', 'data-value', value);\n if (element2) {\n if (state) {\n element2.setAttribute('aria-selected', 'false');\n removeClass([element2], this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected);\n if (this.mode === 'CheckBox') {\n element2.firstElementChild.setAttribute('aria-checked', 'false');\n removeClass([element2.firstElementChild.lastElementChild], 'e-check');\n }\n }\n else {\n element2.setAttribute('aria-selected', 'true');\n addClass([element2], this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected);\n if (this.mode === 'CheckBox') {\n element2.firstElementChild.setAttribute('aria-checked', 'true');\n addClass([element2.firstElementChild.lastElementChild], 'e-check');\n }\n }\n }\n }\n };\n MultiSelect.prototype.removeChip = function (value) {\n if (this.chipCollectionWrapper) {\n var element = this.findListElement(this.chipCollectionWrapper, 'span', 'data-value', value);\n if (element) {\n remove(element);\n }\n }\n };\n MultiSelect.prototype.setWidth = function (width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.overAllWrapper.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.overAllWrapper.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n };\n MultiSelect.prototype.updateChipStatus = function () {\n if (this.value && this.value.length) {\n if (!isNullOrUndefined(this.chipCollectionWrapper)) {\n (this.chipCollectionWrapper.style.display = '');\n }\n if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {\n this.showDelimWrapper();\n }\n this.showOverAllClear();\n }\n else {\n if (!isNullOrUndefined(this.chipCollectionWrapper)) {\n this.chipCollectionWrapper.style.display = 'none';\n }\n if (!isNullOrUndefined(this.delimiterWrapper)) {\n (this.delimiterWrapper.style.display = 'none');\n }\n this.hideOverAllClear();\n }\n };\n MultiSelect.prototype.addValue = function (value, text, eve) {\n if (!this.value) {\n this.value = [];\n }\n if (this.value.indexOf(value) < 0) {\n this.setProperties({ value: [].concat([], this.value, [value]) }, true);\n }\n var element = this.findListElement(this.list, 'li', 'data-value', value);\n this.removeFocus();\n if (element) {\n this.addListFocus(element);\n this.addListSelection(element);\n }\n if (this.mode !== 'Delimiter' && this.mode !== 'CheckBox') {\n this.addChip(text, value, eve);\n }\n if (this.hideSelectedItem && this.fields.groupBy) {\n this.hideGroupItem(value);\n }\n this.updateChipStatus();\n this.checkMaxSelection();\n };\n MultiSelect.prototype.checkMaxSelection = function () {\n var limit = this.value && this.value.length ? this.value.length : 0;\n if (limit === this.maximumSelectionLength) {\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.e-active)');\n addClass(collection, 'e-disable');\n }\n };\n MultiSelect.prototype.dispatchSelect = function (value, eve, element, isNotTrigger, length) {\n var _this = this;\n var list = this.listData;\n if (this.initStatus && !isNotTrigger) {\n var val_2 = this.getDataByValue(value);\n var eventArgs = {\n e: eve,\n item: element,\n itemData: val_2,\n isInteracted: eve ? true : false,\n cancel: false\n };\n this.trigger('select', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n if (length) {\n _this.selectAllEventData.push(val_2);\n _this.selectAllEventEle.push(element);\n }\n if (length === 1) {\n var args = {\n event: eve,\n items: _this.selectAllEventEle,\n itemData: _this.selectAllEventData,\n isInteracted: eve ? true : false,\n isChecked: true\n };\n _this.trigger('selectedAll', args);\n _this.selectAllEventData = [];\n }\n if (_this.allowCustomValue && _this.isServerRendered && _this.listData !== list) {\n _this.listData = list;\n }\n _this.updateListSelectEventCallback(value, element, eve);\n if (_this.hideSelectedItem && _this.fixedHeaderElement && _this.fields.groupBy && _this.mode !== 'CheckBox') {\n _super.prototype.scrollStop.call(_this);\n }\n }\n });\n }\n };\n MultiSelect.prototype.addChip = function (text, value, e) {\n if (this.chipCollectionWrapper) {\n this.getChip(text, value, e);\n }\n };\n MultiSelect.prototype.removeChipFocus = function () {\n var elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP);\n var closeElements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP_CLOSE.split(' ')[0]);\n removeClass(elements, CHIP_SELECTED);\n if (Browser.isDevice) {\n for (var index = 0; index < closeElements.length; index++) {\n closeElements[index].style.display = 'none';\n }\n }\n };\n MultiSelect.prototype.onMobileChipInteraction = function (e) {\n var chipElem = closest(e.target, '.' + CHIP);\n var chipClose = chipElem.querySelector('span.' + CHIP_CLOSE.split(' ')[0]);\n if (this.enabled && !this.readonly) {\n if (!chipElem.classList.contains(CHIP_SELECTED)) {\n this.removeChipFocus();\n chipClose.style.display = '';\n chipElem.classList.add(CHIP_SELECTED);\n }\n this.refreshPopup();\n e.preventDefault();\n }\n };\n MultiSelect.prototype.multiCompiler = function (multiselectTemplate) {\n var checkTemplate = false;\n if (multiselectTemplate) {\n try {\n checkTemplate = (selectAll(multiselectTemplate, document).length) ? true : false;\n }\n catch (exception) {\n checkTemplate = false;\n }\n }\n return checkTemplate;\n };\n MultiSelect.prototype.getChip = function (data, value, e) {\n var _this = this;\n var itemData = { text: value, value: value };\n var chip = this.createElement('span', {\n className: CHIP,\n attrs: { 'data-value': value, 'title': data }\n });\n var compiledString;\n var chipContent = this.createElement('span', { className: CHIP_CONTENT });\n var chipClose = this.createElement('span', { className: CHIP_CLOSE });\n if (this.mainData) {\n itemData = this.getDataByValue(value);\n }\n if (this.valueTemplate && !isNullOrUndefined(itemData)) {\n var valuecheck = this.multiCompiler(this.valueTemplate);\n if (valuecheck) {\n compiledString = compile(select(this.valueTemplate, document).innerHTML.trim());\n }\n else {\n compiledString = compile(this.valueTemplate);\n }\n // eslint-disable-next-line\n var valueCompTemp = compiledString(itemData, this, 'valueTemplate', this.valueTemplateId, this.isStringTemplate, null, chipContent);\n if (valueCompTemp && valueCompTemp.length > 0) {\n for (var i = 0; i < valueCompTemp.length; i++) {\n chipContent.appendChild(valueCompTemp[i]);\n }\n }\n this.renderReactTemplates();\n }\n else if (this.enableHtmlSanitizer) {\n chipContent.innerText = data;\n }\n else {\n chipContent.innerHTML = data;\n }\n chip.appendChild(chipContent);\n var eventArgs = {\n isInteracted: e ? true : false,\n itemData: itemData,\n e: e,\n setClass: function (classes) {\n addClass([chip], classes);\n },\n cancel: false\n };\n this.isPreventChange = this.isAngular && this.preventChange;\n this.trigger('tagging', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n if (Browser.isDevice) {\n chip.classList.add(MOBILE_CHIP);\n append([chipClose], chip);\n chipClose.style.display = 'none';\n EventHandler.add(chip, 'click', _this.onMobileChipInteraction, _this);\n }\n else {\n EventHandler.add(chip, 'mousedown', _this.chipClick, _this);\n if (_this.showClearButton) {\n chip.appendChild(chipClose);\n }\n }\n EventHandler.add(chipClose, 'mousedown', _this.onChipRemove, _this);\n _this.chipCollectionWrapper.appendChild(chip);\n if (!_this.changeOnBlur && e) {\n _this.updateValueState(e, _this.value, _this.tempValues);\n }\n }\n });\n };\n MultiSelect.prototype.calcPopupWidth = function () {\n var width = formatUnit(this.popupWidth);\n if (width.indexOf('%') > -1) {\n var inputWidth = (this.componentWrapper.offsetWidth) * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n return width;\n };\n MultiSelect.prototype.mouseIn = function () {\n if (this.enabled && !this.readonly) {\n this.showOverAllClear();\n }\n };\n MultiSelect.prototype.mouseOut = function () {\n if (!this.inputFocus) {\n this.overAllClear.style.display = 'none';\n }\n };\n MultiSelect.prototype.listOption = function (dataSource, fields) {\n var iconCss = isNullOrUndefined(fields.iconCss) ? false : true;\n var fieldProperty = isNullOrUndefined(fields.properties) ? fields :\n fields.properties;\n this.listCurrentOptions = (fields.text !== null || fields.value !== null) ? {\n fields: fieldProperty, showIcon: iconCss, ariaAttributes: { groupItemRole: 'presentation' }\n } : { fields: { value: 'text' } };\n extend(this.listCurrentOptions, this.listCurrentOptions, fields, true);\n if (this.mode === 'CheckBox') {\n this.notify('listoption', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', dataSource: dataSource, fieldProperty: fieldProperty });\n }\n return this.listCurrentOptions;\n };\n MultiSelect.prototype.renderPopup = function () {\n var _this = this;\n if (!this.list) {\n _super.prototype.render.call(this);\n }\n if (!this.popupObj) {\n document.body.appendChild(this.popupWrapper);\n var checkboxFilter = this.popupWrapper.querySelector('.' + FILTERPARENT);\n if (this.mode === 'CheckBox' && !this.allowFiltering && checkboxFilter && this.filterParent) {\n checkboxFilter.remove();\n this.filterParent = null;\n }\n var overAllHeight = parseInt(this.popupHeight, 10);\n this.popupWrapper.style.visibility = 'hidden';\n if (this.headerTemplate) {\n this.setHeaderTemplate();\n overAllHeight -= this.header.offsetHeight;\n }\n append([this.list], this.popupWrapper);\n if (this.footerTemplate) {\n this.setFooterTemplate();\n overAllHeight -= this.footer.offsetHeight;\n }\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n overAllHeight -= this.selectAllHeight;\n }\n else if (this.mode === 'CheckBox' && !this.showSelectAll && (!this.headerTemplate && !this.footerTemplate)) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n overAllHeight = parseInt(this.popupHeight, 10);\n }\n else if (this.mode === 'CheckBox' && !this.showSelectAll) {\n this.notify('selectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n overAllHeight = parseInt(this.popupHeight, 10);\n if (this.headerTemplate && this.header) {\n overAllHeight -= this.header.offsetHeight;\n }\n if (this.footerTemplate && this.footer) {\n overAllHeight -= this.footer.offsetHeight;\n }\n }\n if (this.mode === 'CheckBox') {\n var args = {\n module: 'CheckBoxSelection',\n enable: this.mode === 'CheckBox',\n popupElement: this.popupWrapper\n };\n if (this.allowFiltering) {\n this.notify('searchBox', args);\n overAllHeight -= this.searchBoxHeight;\n }\n addClass([this.popupWrapper], 'e-checkbox');\n }\n if (this.popupHeight !== 'auto') {\n this.list.style.maxHeight = formatUnit(overAllHeight);\n this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);\n }\n else {\n this.list.style.maxHeight = formatUnit(this.popupHeight);\n }\n this.popupObj = new Popup(this.popupWrapper, {\n width: this.calcPopupWidth(), targetType: 'relative', position: { X: 'left', Y: 'bottom' },\n relateTo: this.overAllWrapper, collision: { X: 'flip', Y: 'flip' }, offsetY: 1,\n enableRtl: this.enableRtl, zIndex: this.zIndex,\n close: function () {\n if (_this.popupObj.element.parentElement) {\n _this.popupObj.unwireScrollEvents();\n // For restrict the page scrolling in safari browser\n var checkboxFilterInput = _this.popupWrapper.querySelector('.' + FILTERINPUT);\n if (_this.mode === 'CheckBox' && checkboxFilterInput && document.activeElement === checkboxFilterInput) {\n checkboxFilterInput.blur();\n }\n detach(_this.popupObj.element);\n }\n },\n open: function () {\n _this.popupObj.resolveCollision();\n if (!_this.isFirstClick) {\n var ulElement = _this.list.querySelector('ul');\n if (ulElement) {\n if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&\n _this.targetElement().trim() !== '')) {\n _this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;\n }\n }\n _this.isFirstClick = true;\n }\n _this.popupObj.wireScrollEvents();\n if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&\n _this.targetElement().trim() !== '')) {\n _this.loadTemplate();\n }\n _this.setScrollPosition();\n if (_this.allowFiltering) {\n _this.notify('inputFocus', {\n module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'focus'\n });\n }\n }, targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hidePopup();\n }\n }\n });\n if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {\n this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });\n }\n this.popupObj.close();\n this.popupWrapper.style.visibility = '';\n }\n };\n MultiSelect.prototype.setHeaderTemplate = function () {\n var compiledString;\n if (this.header) {\n this.header.remove();\n }\n this.header = this.createElement('div');\n addClass([this.header], HEADER);\n var headercheck = this.multiCompiler(this.headerTemplate);\n if (headercheck) {\n compiledString = compile(select(this.headerTemplate, document).innerHTML.trim());\n }\n else {\n compiledString = compile(this.headerTemplate);\n }\n // eslint-disable-next-line\n var elements = compiledString({}, this, 'headerTemplate', this.headerTemplateId, this.isStringTemplate, null, this.header);\n if (elements && elements.length > 0) {\n for (var temp = 0; temp < elements.length; temp++) {\n this.header.appendChild(elements[temp]);\n }\n }\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n prepend([this.header], this.popupWrapper);\n }\n else {\n append([this.header], this.popupWrapper);\n }\n EventHandler.add(this.header, 'mousedown', this.onListMouseDown, this);\n };\n MultiSelect.prototype.setFooterTemplate = function () {\n var compiledString;\n if (this.footer) {\n this.footer.remove();\n }\n this.footer = this.createElement('div');\n addClass([this.footer], FOOTER);\n var footercheck = this.multiCompiler(this.footerTemplate);\n if (footercheck) {\n compiledString = compile(select(this.footerTemplate, document).innerHTML.trim());\n }\n else {\n compiledString = compile(this.footerTemplate);\n }\n // eslint-disable-next-line\n var elements = compiledString({}, this, 'footerTemplate', this.footerTemplateId, this.isStringTemplate, null, this.footer);\n if (elements && elements.length > 0) {\n for (var temp = 0; temp < elements.length; temp++) {\n this.footer.appendChild(elements[temp]);\n }\n }\n append([this.footer], this.popupWrapper);\n EventHandler.add(this.footer, 'mousedown', this.onListMouseDown, this);\n };\n MultiSelect.prototype.clearAll = function (e) {\n if (this.enabled && !this.readonly) {\n var temp = void 0;\n if (this.value && this.value.length > 0) {\n var liElement = this.list && this.list.querySelectorAll('li.e-list-item');\n if (liElement && liElement.length > 0) {\n this.selectAllItems(false, e);\n }\n else {\n this.removeIndex = 0;\n for (temp = this.value[this.removeIndex]; this.removeIndex < this.value.length; temp = this.value[this.removeIndex]) {\n this.removeValue(temp, e, null, true);\n }\n }\n this.selectedElementID = null;\n this.inputElement.removeAttribute('aria-activedescendant');\n }\n else {\n this.clearAllCallback(e);\n }\n }\n };\n MultiSelect.prototype.clearAllCallback = function (e, isClearAll) {\n var tempValues = this.value ? this.value.slice() : [];\n if (this.mainList && this.listData && ((this.allowFiltering && this.mode !== 'CheckBox') || this.allowCustomValue)) {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n this.onActionComplete(list, this.mainData);\n }\n this.focusAtFirstListItem();\n this.updateDelimeter(this.delimiterChar, e);\n if (this.mode !== 'Box' && (!this.inputFocus || this.mode === 'CheckBox')) {\n this.updateDelimView();\n }\n if (this.inputElement.value !== '') {\n this.makeTextBoxEmpty();\n this.search(null);\n }\n this.checkPlaceholderSize();\n if (this.isPopupOpen()) {\n this.refreshPopup();\n }\n if (!this.inputFocus) {\n if (this.changeOnBlur) {\n this.updateValueState(e, this.value, tempValues);\n }\n if (this.mode !== 'CheckBox') {\n this.inputElement.focus();\n }\n }\n if (this.mode === 'CheckBox') {\n this.refreshPlaceHolder();\n this.refreshInputHight();\n if (this.changeOnBlur && isClearAll && (isNullOrUndefined(this.value) || this.value.length === 0)) {\n this.updateValueState(e, this.value, this.tempValues);\n }\n }\n if (!this.changeOnBlur && isClearAll && (isNullOrUndefined(this.value) || this.value.length === 0)) {\n this.updateValueState(e, this.value, this.tempValues);\n }\n if (this.mode === 'CheckBox' && this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {\n this.updateListItems(this.list.querySelectorAll('li.e-list-item'), this.mainList.querySelectorAll('li.e-list-item'));\n }\n e.preventDefault();\n };\n MultiSelect.prototype.windowResize = function () {\n this.refreshPopup();\n if ((!this.inputFocus || this.mode === 'CheckBox') && this.viewWrapper && this.viewWrapper.parentElement) {\n this.updateDelimView();\n }\n };\n MultiSelect.prototype.resetValueHandler = function (e) {\n var formElement = closest(this.inputElement, 'form');\n if (formElement && e.target === formElement) {\n var textVal = (this.element.tagName === this.getNgDirective()) ?\n null : this.element.getAttribute('data-initial-value');\n this.text = textVal;\n }\n };\n MultiSelect.prototype.wireEvent = function () {\n EventHandler.add(this.componentWrapper, 'mousedown', this.wrapperClick, this);\n EventHandler.add(window, 'resize', this.windowResize, this);\n EventHandler.add(this.inputElement, 'focus', this.focusInHandler, this);\n EventHandler.add(this.inputElement, 'keydown', this.onKeyDown, this);\n EventHandler.add(this.inputElement, 'keyup', this.keyUp, this);\n if (this.mode !== 'CheckBox') {\n EventHandler.add(this.inputElement, 'input', this.onInput, this);\n }\n EventHandler.add(this.inputElement, 'blur', this.onBlurHandler, this);\n EventHandler.add(this.componentWrapper, 'mouseover', this.mouseIn, this);\n var formElement = closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.add(formElement, 'reset', this.resetValueHandler, this);\n }\n EventHandler.add(this.componentWrapper, 'mouseout', this.mouseOut, this);\n EventHandler.add(this.overAllClear, 'mouseup', this.clearAll, this);\n EventHandler.add(this.inputElement, 'paste', this.pasteHandler, this);\n };\n MultiSelect.prototype.onInput = function (e) {\n if (this.keyDownStatus) {\n this.isValidKey = true;\n }\n else {\n this.isValidKey = false;\n }\n this.keyDownStatus = false;\n // For Filtering works in mobile firefox\n if (Browser.isDevice && Browser.info.name === 'mozilla') {\n this.search(e);\n }\n };\n MultiSelect.prototype.pasteHandler = function (event) {\n var _this = this;\n setTimeout(function () {\n _this.expandTextbox();\n _this.search(event);\n });\n };\n MultiSelect.prototype.search = function (e) {\n var _this = this;\n if (!isNullOrUndefined(e)) {\n this.keyCode = e.keyCode;\n }\n if (!this.isPopupOpen() && this.openOnClick) {\n this.showPopup(e);\n }\n this.openClick(e);\n if (this.checkTextLength() && !this.allowFiltering && !isNullOrUndefined(e) && (e.keyCode !== 8)) {\n this.focusAtFirstListItem();\n }\n else {\n var text = this.targetElement();\n if (this.allowFiltering) {\n var eventArgs_1 = {\n preventDefaultAction: false,\n text: this.targetElement(),\n updateData: function (dataSource, query, fields) {\n if (eventArgs_1.cancel) {\n return;\n }\n _this.isFiltered = true;\n _this.remoteFilterAction = true;\n _this.dataUpdater(dataSource, query, fields);\n },\n event: e,\n cancel: false\n };\n this.trigger('filtering', eventArgs_1, function (eventArgs) {\n if (!eventArgs.cancel) {\n if (!_this.isFiltered && !eventArgs.preventDefaultAction) {\n _this.filterAction = true;\n _this.dataUpdater(_this.dataSource, null, _this.fields);\n }\n }\n });\n }\n else if (this.allowCustomValue) {\n var query = new Query();\n query = (text !== '') ? query.where(this.fields.text, 'startswith', text, this.ignoreCase, this.ignoreAccent) : query;\n this.dataUpdater(this.mainData, query, this.fields);\n }\n else {\n var liCollections = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-hide-listitem)');\n var activeElement = Search(this.targetElement(), liCollections, 'StartsWith', this.ignoreCase);\n if (activeElement && activeElement.item !== null) {\n this.addListFocus(activeElement.item);\n this.list.scrollTop =\n activeElement.item.offsetHeight * activeElement.index;\n }\n else if (this.targetElement() !== '') {\n this.removeFocus();\n }\n else {\n this.focusAtFirstListItem();\n }\n }\n }\n };\n MultiSelect.prototype.preRender = function () {\n if (this.allowFiltering === null) {\n this.allowFiltering = (this.mode === 'CheckBox') ? true : false;\n }\n this.initializeData();\n this.updateDataAttribute(this.htmlAttributes);\n _super.prototype.preRender.call(this);\n };\n MultiSelect.prototype.getLocaleName = function () {\n return 'multi-select';\n };\n MultiSelect.prototype.initializeData = function () {\n this.mainListCollection = [];\n this.beforePopupOpen = false;\n this.filterAction = false;\n this.remoteFilterAction = false;\n this.isFirstClick = false;\n this.mobFilter = true;\n this.isFiltered = false;\n this.focused = true;\n this.initial = true;\n this.backCommand = true;\n };\n MultiSelect.prototype.updateData = function (delimiterChar, e) {\n var data = '';\n var delim = this.mode === 'Delimiter' || this.mode === 'CheckBox';\n var text = [];\n var temp;\n var tempData = this.listData;\n this.listData = this.mainData;\n this.hiddenElement.innerHTML = '';\n if (!isNullOrUndefined(this.value)) {\n for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {\n var listValue = this.findListElement(((!isNullOrUndefined(this.mainList)) ? this.mainList : this.ulElement), 'li', 'data-value', this.value[index]);\n if (isNullOrUndefined(listValue) && !this.allowCustomValue) {\n this.value.splice(index, 1);\n index -= 1;\n }\n else {\n if (this.listData) {\n temp = this.getTextByValue(this.value[index]);\n }\n else {\n temp = this.value[index];\n }\n data += temp + delimiterChar + ' ';\n text.push(temp);\n }\n this.hiddenElement.innerHTML += '';\n }\n }\n this.setProperties({ text: text.toString() }, true);\n if (delim) {\n this.updateWrapperText(this.delimiterWrapper, data);\n this.delimiterWrapper.setAttribute('id', getUniqueID('delim_val'));\n this.inputElement.setAttribute('aria-describedby', this.delimiterWrapper.id);\n this.inputElement.setAttribute('aria-labelledby', this.delimiterWrapper.id);\n }\n var targetEle = e && e.target;\n var isClearAll = (targetEle && targetEle.classList.contains('e-close-hooker')) ? true : null;\n if (!this.changeOnBlur && ((e && !isClearAll)) || this.isSelectAll) {\n this.isSelectAll = false;\n this.updateValueState(e, this.value, this.tempValues);\n }\n this.listData = tempData;\n this.addValidInputClass();\n };\n MultiSelect.prototype.initialTextUpdate = function () {\n if (!isNullOrUndefined(this.text)) {\n var textArr = this.text.split(this.delimiterChar);\n var textVal = [];\n for (var index = 0; textArr.length > index; index++) {\n var val = this.getValueByText(textArr[index]);\n if (!isNullOrUndefined(val)) {\n textVal.push(val);\n }\n else if (this.allowCustomValue) {\n textVal.push(textArr[index]);\n }\n }\n if (textVal && textVal.length) {\n this.setProperties({ value: textVal }, true);\n }\n }\n else {\n this.setProperties({ value: null }, true);\n }\n };\n MultiSelect.prototype.renderList = function (isEmptyData) {\n if (!isEmptyData && this.allowCustomValue && this.list && (this.list.textContent === this.noRecordsTemplate\n || this.list.querySelector('.e-ul') && this.list.querySelector('.e-ul').childElementCount === 0)) {\n isEmptyData = true;\n }\n _super.prototype.render.call(this, null, isEmptyData);\n this.unwireListEvents();\n this.wireListEvents();\n };\n MultiSelect.prototype.initialValueUpdate = function () {\n if (this.list) {\n var text = void 0;\n var element = void 0;\n var value = void 0;\n if (this.chipCollectionWrapper) {\n this.chipCollectionWrapper.innerHTML = '';\n }\n this.removeListSelection();\n if (!isNullOrUndefined(this.value)) {\n for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {\n value = this.value[index];\n element = this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value);\n text = this.getTextByValue(value);\n if ((element && (element.getAttribute('aria-selected') !== 'true')) ||\n (element && (element.getAttribute('aria-selected') === 'true' && this.hideSelectedItem) &&\n (this.mode === 'Box' || this.mode === 'Default'))) {\n this.addChip(text, value);\n this.addListSelection(element);\n }\n else if (value && this.allowCustomValue) {\n var indexItem = this.listData.length;\n var newValue = {};\n setValue(this.fields.text, value, newValue);\n setValue(this.fields.value, value, newValue);\n var noDataEle = this.popupWrapper.querySelector('.' + dropDownBaseClasses.noData);\n this.addItem(newValue, indexItem);\n element = element ? element : this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value);\n if (this.popupWrapper.contains(noDataEle)) {\n this.list.setAttribute('style', noDataEle.getAttribute('style'));\n this.popupWrapper.replaceChild(this.list, noDataEle);\n this.wireListEvents();\n }\n this.addChip(text, value);\n this.addListSelection(element);\n }\n }\n }\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n if (this.changeOnBlur) {\n this.updateValueState(null, this.value, this.tempValues);\n }\n this.updateDelimeter(this.delimiterChar);\n this.refreshInputHight();\n }\n else {\n this.updateDelimeter(this.delimiterChar);\n }\n if (this.mode === 'CheckBox' && this.showSelectAll && (isNullOrUndefined(this.value) || !this.value.length)) {\n this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'uncheck' });\n }\n if (this.mode === 'Box' || (this.mode === 'Default' && this.inputFocus)) {\n this.chipCollectionWrapper.style.display = '';\n }\n else if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {\n this.showDelimWrapper();\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n MultiSelect.prototype.updateActionCompleteData = function (li, item) {\n if (this.value && this.value.indexOf(li.getAttribute('data-value')) > -1) {\n this.mainList = this.ulElement;\n if (this.hideSelectedItem) {\n addClass([li], HIDE_LIST);\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n MultiSelect.prototype.updateAddItemList = function (list, itemCount) {\n if (this.popupObj && this.popupObj.element && this.popupObj.element.querySelector('.' + dropDownBaseClasses.noData) && list) {\n this.list = list;\n this.mainList = this.ulElement = list.querySelector('ul');\n remove(this.popupWrapper.querySelector('.e-content'));\n this.popupObj = null;\n this.renderPopup();\n }\n else if (this.allowCustomValue) {\n this.list = list;\n this.mainList = this.ulElement = list.querySelector('ul');\n }\n };\n MultiSelect.prototype.updateDataList = function () {\n if (this.mainList && this.ulElement && !(this.isFiltered || this.filterAction || this.targetElement().trim())) {\n var isDynamicGroupItemUpdate = this.mainList.childElementCount < this.ulElement.childElementCount;\n var isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount));\n var isAngularTemplateUpdate = this.itemTemplate && this.ulElement.childElementCount > 0 && !(this.ulElement.childElementCount < this.mainList.childElementCount) && (this.ulElement.children[0].childElementCount > 0 || (this.fields.groupBy && this.ulElement.children[1] && this.ulElement.children[1].childElementCount > 0));\n if (isDynamicGroupItemUpdate || isReactTemplateUpdate || isAngularTemplateUpdate) {\n //EJ2-57748 - for this task, we prevent the ul element cloning ( this.mainList = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;)\n this.mainList = this.ulElement;\n }\n }\n };\n MultiSelect.prototype.isValidLI = function (li) {\n return (li && !li.classList.contains(dropDownBaseClasses.disabled) && !li.classList.contains(dropDownBaseClasses.group) &&\n li.classList.contains(dropDownBaseClasses.li));\n };\n MultiSelect.prototype.updateListSelection = function (li, e, length) {\n var customVal = li.getAttribute('data-value');\n var value = this.getFormattedValue(customVal);\n if (this.allowCustomValue && ((customVal !== 'false' && value === false) ||\n (!isNullOrUndefined(value) && value.toString() === 'NaN'))) {\n value = customVal;\n }\n this.removeHover();\n if (!this.value || this.value.indexOf(value) === -1) {\n this.dispatchSelect(value, e, li, (li.getAttribute('aria-selected') === 'true'), length);\n }\n else {\n this.removeValue(value, e, length);\n }\n };\n MultiSelect.prototype.updateListSelectEventCallback = function (value, li, e) {\n var _this = this;\n var text = this.getTextByValue(value);\n if ((this.allowCustomValue || this.allowFiltering) && !this.findListElement(this.mainList, 'li', 'data-value', value)) {\n var temp_1 = li.cloneNode(true);\n var fieldValue = this.fields.value ? this.fields.value : 'value';\n if (this.allowCustomValue && this.mainData.length && typeof getValue(fieldValue, this.mainData[0]) === 'number') {\n value = !isNaN(parseFloat(value.toString())) ? parseFloat(value.toString()) : value;\n }\n var data_1 = this.getDataByValue(value);\n var eventArgs = {\n newData: data_1,\n cancel: false\n };\n this.trigger('customValueSelection', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n append([temp_1], _this.mainList);\n _this.mainData.push(data_1);\n _this.remoteCustomValue = false;\n _this.addValue(value, text, e);\n }\n });\n }\n else {\n this.remoteCustomValue = false;\n this.addValue(value, text, e);\n }\n };\n MultiSelect.prototype.removeListSelection = function () {\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n var selectedItems = this.list.querySelectorAll('.' + className);\n var temp = selectedItems.length;\n if (selectedItems && selectedItems.length) {\n removeClass(selectedItems, className);\n while (temp > 0) {\n selectedItems[temp - 1].setAttribute('aria-selected', 'false');\n temp--;\n }\n }\n if (!isNullOrUndefined(this.mainList)) {\n var selectItems = this.mainList.querySelectorAll('.' + className);\n var temp1 = selectItems.length;\n if (selectItems && selectItems.length) {\n removeClass(selectItems, className);\n while (temp1 > 0) {\n selectItems[temp1 - 1].setAttribute('aria-selected', 'false');\n if (this.mode === 'CheckBox') {\n if (selectedItems && (selectedItems.length > (temp1 - 1))) {\n selectedItems[temp1 - 1].firstElementChild.setAttribute('aria-checked', 'false');\n removeClass([selectedItems[temp1 - 1].firstElementChild.lastElementChild], 'e-check');\n }\n selectItems[temp1 - 1].firstElementChild.setAttribute('aria-checked', 'false');\n removeClass([selectItems[temp1 - 1].firstElementChild.lastElementChild], 'e-check');\n }\n temp1--;\n }\n }\n }\n };\n MultiSelect.prototype.removeHover = function () {\n var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.hover);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, dropDownBaseClasses.hover);\n }\n };\n MultiSelect.prototype.removeFocus = function () {\n if (this.list && this.mainList) {\n var hoveredItem = this.list.querySelectorAll('.' + dropDownBaseClasses.focus);\n var mainlist = this.mainList.querySelectorAll('.' + dropDownBaseClasses.focus);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, dropDownBaseClasses.focus);\n removeClass(mainlist, dropDownBaseClasses.focus);\n }\n }\n };\n MultiSelect.prototype.addListHover = function (li) {\n if (this.enabled && this.isValidLI(li)) {\n this.removeHover();\n addClass([li], dropDownBaseClasses.hover);\n }\n else {\n if ((li !== null && li.classList.contains('e-list-group-item')) && this.enableGroupCheckBox && this.mode === 'CheckBox'\n && !isNullOrUndefined(this.fields.groupBy)) {\n this.removeHover();\n addClass([li], dropDownBaseClasses.hover);\n }\n }\n };\n MultiSelect.prototype.addListFocus = function (element) {\n if (this.enabled && this.isValidLI(element)) {\n this.removeFocus();\n addClass([element], dropDownBaseClasses.focus);\n }\n else {\n if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {\n addClass([element], dropDownBaseClasses.focus);\n }\n }\n };\n MultiSelect.prototype.addListSelection = function (element, mainElement) {\n var className = this.hideSelectedItem ?\n HIDE_LIST :\n dropDownBaseClasses.selected;\n if (this.isValidLI(element) && !element.classList.contains(dropDownBaseClasses.hover)) {\n addClass([element], className);\n this.updateMainList(false, element.getAttribute('data-value'), mainElement);\n element.setAttribute('aria-selected', 'true');\n if (this.mode === 'CheckBox') {\n var ariaCheck = element.firstElementChild.getAttribute('aria-checked');\n if (ariaCheck === 'false' || isNullOrUndefined(ariaCheck)) {\n this.notify('updatelist', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: this });\n }\n }\n this.notify('activeList', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: this });\n if (this.chipCollectionWrapper) {\n this.removeChipSelection();\n }\n this.selectedElementID = element.id;\n }\n };\n MultiSelect.prototype.updateDelimeter = function (delimChar, e) {\n this.updateData(delimChar, e);\n };\n MultiSelect.prototype.onMouseClick = function (e) {\n var _this = this;\n this.keyCode = null;\n this.scrollFocusStatus = false;\n var target = e.target;\n var li = closest(target, '.' + dropDownBaseClasses.li);\n var headerLi = closest(target, '.' + dropDownBaseClasses.group);\n if (headerLi && this.enableGroupCheckBox && this.mode === 'CheckBox' && this.fields.groupBy) {\n target = target.classList.contains('e-list-group-item') ? target.firstElementChild.lastElementChild\n : e.target;\n if (target.classList.contains('e-check')) {\n this.selectAllItem(false, e);\n target.classList.remove('e-check');\n target.classList.remove('e-stop');\n closest(target, '.' + 'e-list-group-item').classList.remove('e-active');\n target.setAttribute('aria-selected', 'false');\n }\n else {\n this.selectAllItem(true, e);\n target.classList.remove('e-stop');\n target.classList.add('e-check');\n closest(target, '.' + 'e-list-group-item').classList.add('e-active');\n target.setAttribute('aria-selected', 'true');\n }\n this.refreshSelection();\n this.checkSelectAll();\n }\n else {\n if (this.isValidLI(li)) {\n var limit = this.value && this.value.length ? this.value.length : 0;\n if (li.classList.contains('e-active')) {\n limit = limit - 1;\n }\n if (limit < this.maximumSelectionLength) {\n this.updateListSelection(li, e);\n this.checkPlaceholderSize();\n this.addListFocus(li);\n if ((this.allowCustomValue || this.allowFiltering) && this.mainList && this.listData) {\n if (this.mode !== 'CheckBox') {\n this.focusAtLastListItem(li.getAttribute('data-value'));\n this.refreshSelection();\n }\n }\n else {\n this.makeTextBoxEmpty();\n }\n }\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n if (this.value && this.value.length > 50) {\n setTimeout(function () {\n _this.updateDelimeter(_this.delimiterChar, e);\n }, 0);\n }\n else {\n this.updateDelimeter(this.delimiterChar, e);\n }\n this.refreshInputHight();\n }\n else {\n this.updateDelimeter(this.delimiterChar, e);\n }\n this.checkSelectAll();\n this.refreshPopup();\n if (this.hideSelectedItem) {\n this.focusAtFirstListItem();\n }\n if (this.closePopupOnSelect) {\n this.hidePopup(e);\n }\n else {\n e.preventDefault();\n }\n this.makeTextBoxEmpty();\n this.findGroupStart(target);\n if (this.mode !== 'CheckBox') {\n this.refreshListItems(isNullOrUndefined(li) ? null : li.textContent);\n }\n }\n else {\n e.preventDefault();\n }\n this.refreshPlaceHolder();\n this.deselectHeader();\n }\n };\n MultiSelect.prototype.findGroupStart = function (target) {\n if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {\n var count = 0;\n var liChecked = 0;\n var liUnchecked = 0;\n var groupValues = void 0;\n if (this.itemTemplate && !target.getElementsByClassName('e-frame').length) {\n while (!target.getElementsByClassName('e-frame').length) {\n target = target.parentElement;\n }\n }\n if (target.classList.contains('e-frame')) {\n target = target.parentElement.parentElement;\n }\n groupValues = this.findGroupAttrtibutes(target, liChecked, liUnchecked, count, 0);\n groupValues = this.findGroupAttrtibutes(target, groupValues[0], groupValues[1], groupValues[2], 1);\n while (!target.classList.contains('e-list-group-item')) {\n if (target.classList.contains('e-list-icon')) {\n target = target.parentElement;\n }\n target = target.previousElementSibling;\n if (target == null) {\n break;\n }\n }\n this.updateCheckBox(target, groupValues[0], groupValues[1], groupValues[2]);\n }\n };\n MultiSelect.prototype.findGroupAttrtibutes = function (listElement, checked, unChecked, count, position) {\n while (!listElement.classList.contains('e-list-group-item')) {\n if (listElement.classList.contains('e-list-icon')) {\n listElement = listElement.parentElement;\n }\n if (listElement.getElementsByClassName('e-frame')[0].classList.contains('e-check') &&\n listElement.classList.contains('e-list-item')) {\n checked++;\n }\n else if (listElement.classList.contains('e-list-item')) {\n unChecked++;\n }\n count++;\n listElement = position ? listElement.nextElementSibling : listElement.previousElementSibling;\n if (listElement == null) {\n break;\n }\n }\n return [checked, unChecked, count];\n };\n MultiSelect.prototype.updateCheckBox = function (groupHeader, checked, unChecked, count) {\n if (groupHeader === null) {\n return;\n }\n var checkBoxElement = groupHeader.getElementsByClassName('e-frame')[0];\n if (count === checked) {\n checkBoxElement.classList.remove('e-stop');\n checkBoxElement.classList.add('e-check');\n closest(checkBoxElement, '.' + 'e-list-group-item').classList.add('e-active');\n groupHeader.setAttribute('aria-selected', 'true');\n }\n else if (count === unChecked) {\n checkBoxElement.classList.remove('e-check');\n checkBoxElement.classList.remove('e-stop');\n closest(checkBoxElement, '.' + 'e-list-group-item').classList.remove('e-active');\n groupHeader.setAttribute('aria-selected', 'false');\n }\n else if (this.maximumSelectionLength === checked - 1) {\n checkBoxElement.classList.remove('e-stop');\n groupHeader.setAttribute('aria-selected', 'true');\n closest(checkBoxElement, '.' + 'e-list-group-item').classList.add('e-active');\n checkBoxElement.classList.add('e-check');\n }\n else {\n checkBoxElement.classList.remove('e-check');\n checkBoxElement.classList.add('e-stop');\n closest(checkBoxElement, '.' + 'e-list-group-item').classList.add('e-active');\n groupHeader.setAttribute('aria-selected', 'false');\n }\n };\n MultiSelect.prototype.deselectHeader = function () {\n var limit = this.value && this.value.length ? this.value.length : 0;\n var collection = this.list.querySelectorAll('li.e-list-group-item:not(.e-active)');\n if (limit < this.maximumSelectionLength) {\n removeClass(collection, 'e-disable');\n }\n if (limit === this.maximumSelectionLength) {\n addClass(collection, 'e-disable');\n }\n };\n MultiSelect.prototype.onMouseOver = function (e) {\n var currentLi = closest(e.target, '.' + dropDownBaseClasses.li);\n if (currentLi === null && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)\n && this.enableGroupCheckBox) {\n currentLi = closest(e.target, '.' + dropDownBaseClasses.group);\n }\n this.addListHover(currentLi);\n };\n MultiSelect.prototype.onMouseLeave = function () {\n this.removeHover();\n };\n MultiSelect.prototype.onListMouseDown = function (e) {\n e.preventDefault();\n this.scrollFocusStatus = true;\n };\n MultiSelect.prototype.onDocumentClick = function (e) {\n if (this.mode !== 'CheckBox') {\n var target = e.target;\n if (!(!isNullOrUndefined(this.popupObj) && closest(target, '[id=\"' + this.popupObj.element.id + '\"]')) &&\n !this.overAllWrapper.contains(e.target)) {\n this.scrollFocusStatus = false;\n }\n else {\n this.scrollFocusStatus = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.inputElement);\n }\n }\n };\n MultiSelect.prototype.wireListEvents = function () {\n if (!isNullOrUndefined(this.list)) {\n EventHandler.add(document, 'mousedown', this.onDocumentClick, this);\n EventHandler.add(this.list, 'mousedown', this.onListMouseDown, this);\n EventHandler.add(this.list, 'mouseup', this.onMouseClick, this);\n EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);\n }\n };\n MultiSelect.prototype.unwireListEvents = function () {\n EventHandler.remove(document, 'mousedown', this.onDocumentClick);\n if (this.list) {\n EventHandler.remove(this.list, 'mousedown', this.onListMouseDown);\n EventHandler.remove(this.list, 'mouseup', this.onMouseClick);\n EventHandler.remove(this.list, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);\n }\n };\n MultiSelect.prototype.hideOverAllClear = function () {\n if (!this.value || !this.value.length || this.inputElement.value === '') {\n this.overAllClear.style.display = 'none';\n }\n };\n MultiSelect.prototype.showOverAllClear = function () {\n if (((this.value && this.value.length) || this.inputElement.value !== '') && this.showClearButton && this.readonly !== true) {\n this.overAllClear.style.display = '';\n }\n else {\n this.overAllClear.style.display = 'none';\n }\n };\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n MultiSelect.prototype.focusIn = function () {\n if (document.activeElement !== this.inputElement && this.enabled) {\n this.inputElement.focus();\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n MultiSelect.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement && this.enabled) {\n this.inputElement.blur();\n }\n };\n /**\n * Shows the spinner loader.\n *\n * @returns {void}\n */\n MultiSelect.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n var filterClear = this.filterParent && this.filterParent.querySelector('.e-clear-icon.e-icons');\n if (this.overAllClear.style.display !== 'none' || filterClear) {\n this.spinnerElement = filterClear ? filterClear : this.overAllClear;\n }\n else {\n this.spinnerElement = this.createElement('span', { className: CLOSEICON_CLASS + ' ' + SPINNER_CLASS });\n this.componentWrapper.appendChild(this.spinnerElement);\n }\n createSpinner({ target: this.spinnerElement, width: Browser.isDevice ? '16px' : '14px' }, this.createElement);\n addClass([this.spinnerElement], DISABLE_ICON);\n showSpinner(this.spinnerElement);\n }\n };\n /**\n * Hides the spinner loader.\n *\n * @returns {void}\n */\n MultiSelect.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n removeClass([this.spinnerElement], DISABLE_ICON);\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 MultiSelect.prototype.updateWrapperText = function (wrapperType, wrapperData) {\n if (this.valueTemplate || !this.enableHtmlSanitizer) {\n wrapperType.innerHTML = wrapperData;\n }\n else {\n wrapperType.innerText = SanitizeHtmlHelper.sanitize(wrapperData);\n }\n };\n MultiSelect.prototype.updateDelimView = function () {\n if (this.delimiterWrapper) {\n this.hideDelimWrapper();\n }\n if (this.chipCollectionWrapper) {\n this.chipCollectionWrapper.style.display = 'none';\n }\n this.viewWrapper.style.display = '';\n this.viewWrapper.style.width = '';\n this.viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER);\n if (this.value && this.value.length) {\n var data = '';\n var temp = void 0;\n var tempData = void 0;\n var tempIndex = 1;\n var wrapperleng = void 0;\n var remaining = void 0;\n var downIconWidth = 0;\n var overAllContainer = void 0;\n this.updateWrapperText(this.viewWrapper, data);\n var l10nLocale = {\n noRecordsTemplate: 'No records found',\n actionFailureTemplate: 'Request failed',\n overflowCountTemplate: '+${count} more..',\n totalCountTemplate: '${count} selected'\n };\n var l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);\n if (l10n.getConstant('actionFailureTemplate') === '') {\n l10n = new L10n('dropdowns', l10nLocale, this.locale);\n }\n if (l10n.getConstant('noRecordsTemplate') === '') {\n l10n = new L10n('dropdowns', l10nLocale, this.locale);\n }\n var remainContent = l10n.getConstant('overflowCountTemplate');\n var totalContent = l10n.getConstant('totalCountTemplate');\n var raminElement = this.createElement('span', {\n className: REMAIN_WRAPPER\n });\n var remainCompildTemp = remainContent.replace('${count}', this.value.length.toString());\n raminElement.innerText = remainCompildTemp;\n this.viewWrapper.appendChild(raminElement);\n this.renderReactTemplates();\n var remainSize = raminElement.offsetWidth;\n remove(raminElement);\n if (this.showDropDownIcon) {\n downIconWidth = this.dropIcon.offsetWidth + parseInt(window.getComputedStyle(this.dropIcon).marginRight, 10);\n }\n this.checkClearIconWidth();\n if (!isNullOrUndefined(this.value)) {\n for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {\n data += (index === 0) ? '' : this.delimiterChar + ' ';\n temp = this.getOverflowVal(index);\n data += temp;\n temp = this.viewWrapper.innerHTML;\n this.updateWrapperText(this.viewWrapper, data);\n wrapperleng = this.viewWrapper.offsetWidth +\n parseInt(window.getComputedStyle(this.viewWrapper).paddingRight, 10);\n overAllContainer = this.componentWrapper.offsetWidth -\n parseInt(window.getComputedStyle(this.componentWrapper).paddingLeft, 10) -\n parseInt(window.getComputedStyle(this.componentWrapper).paddingRight, 10);\n if ((wrapperleng + downIconWidth + this.clearIconWidth) > overAllContainer) {\n if (tempData !== undefined && tempData !== '') {\n temp = tempData;\n index = tempIndex + 1;\n }\n this.updateWrapperText(this.viewWrapper, temp);\n remaining = this.value.length - index;\n wrapperleng = this.viewWrapper.offsetWidth +\n parseInt(window.getComputedStyle(this.viewWrapper).paddingRight, 10);\n while (((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) > overAllContainer) && wrapperleng !== 0\n && this.viewWrapper.innerHTML !== '') {\n var textArr = [];\n this.viewWrapper.innerHTML = textArr.join(this.delimiterChar);\n remaining = this.value.length;\n wrapperleng = this.viewWrapper.offsetWidth +\n parseInt(window.getComputedStyle(this.viewWrapper).paddingRight, 10);\n }\n break;\n }\n else if ((wrapperleng + remainSize + downIconWidth + this.clearIconWidth) <= overAllContainer) {\n tempData = data;\n tempIndex = index;\n }\n else if (index === 0) {\n tempData = '';\n tempIndex = -1;\n }\n }\n }\n if (remaining > 0) {\n var totalWidth = overAllContainer - downIconWidth - this.clearIconWidth;\n this.viewWrapper.appendChild(this.updateRemainTemplate(raminElement, this.viewWrapper, remaining, remainContent, totalContent, totalWidth));\n this.updateRemainWidth(this.viewWrapper, totalWidth);\n this.updateRemainingText(raminElement, downIconWidth, remaining, remainContent, totalContent);\n }\n }\n else {\n this.viewWrapper.innerHTML = '';\n this.viewWrapper.style.display = 'none';\n }\n };\n MultiSelect.prototype.checkClearIconWidth = function () {\n if (this.showClearButton) {\n this.clearIconWidth = this.overAllClear.offsetWidth;\n }\n };\n MultiSelect.prototype.updateRemainWidth = function (viewWrapper, totalWidth) {\n if (viewWrapper.classList.contains(TOTAL_COUNT_WRAPPER) && totalWidth < (viewWrapper.offsetWidth +\n parseInt(window.getComputedStyle(viewWrapper).paddingLeft, 10)\n + parseInt(window.getComputedStyle(viewWrapper).paddingLeft, 10))) {\n viewWrapper.style.width = totalWidth + 'px';\n }\n };\n MultiSelect.prototype.updateRemainTemplate = function (raminElement, viewWrapper, remaining, remainContent, totalContent, totalWidth) {\n if (viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3 && viewWrapper.firstChild.nodeValue === '') {\n viewWrapper.removeChild(viewWrapper.firstChild);\n }\n raminElement.innerHTML = '';\n var remainTemp = remainContent.replace('${count}', remaining.toString());\n var totalTemp = totalContent.replace('${count}', remaining.toString());\n raminElement.innerText = (viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3) ? remainTemp : totalTemp;\n if (viewWrapper.firstChild && viewWrapper.firstChild.nodeType === 3) {\n viewWrapper.classList.remove(TOTAL_COUNT_WRAPPER);\n }\n else {\n viewWrapper.classList.add(TOTAL_COUNT_WRAPPER);\n this.updateRemainWidth(viewWrapper, totalWidth);\n }\n return raminElement;\n };\n MultiSelect.prototype.updateRemainingText = function (raminElement, downIconWidth, remaining, remainContent, totalContent) {\n var overAllContainer = this.componentWrapper.offsetWidth -\n parseInt(window.getComputedStyle(this.componentWrapper).paddingLeft, 10) -\n parseInt(window.getComputedStyle(this.componentWrapper).paddingRight, 10);\n var wrapperleng = this.viewWrapper.offsetWidth + parseInt(window.getComputedStyle(this.viewWrapper).paddingRight, 10);\n if (((wrapperleng + downIconWidth) >= overAllContainer) && wrapperleng !== 0 && this.viewWrapper.firstChild &&\n this.viewWrapper.firstChild.nodeType === 3) {\n while (((wrapperleng + downIconWidth) > overAllContainer) && wrapperleng !== 0 && this.viewWrapper.firstChild &&\n this.viewWrapper.firstChild.nodeType === 3) {\n var textArr = this.viewWrapper.firstChild.nodeValue.split(this.delimiterChar);\n textArr.pop();\n this.viewWrapper.firstChild.nodeValue = textArr.join(this.delimiterChar);\n if (this.viewWrapper.firstChild.nodeValue === '') {\n this.viewWrapper.removeChild(this.viewWrapper.firstChild);\n }\n remaining++;\n wrapperleng = this.viewWrapper.offsetWidth;\n }\n var totalWidth = overAllContainer - downIconWidth;\n this.updateRemainTemplate(raminElement, this.viewWrapper, remaining, remainContent, totalContent, totalWidth);\n }\n };\n MultiSelect.prototype.getOverflowVal = function (index) {\n var temp;\n if (this.mainData && this.mainData.length) {\n if (this.mode === 'CheckBox') {\n var newTemp = this.listData;\n this.listData = this.mainData;\n temp = this.getTextByValue(this.value[index]);\n this.listData = newTemp;\n }\n else {\n temp = this.getTextByValue(this.value[index]);\n }\n }\n else {\n temp = this.value[index];\n }\n return temp;\n };\n MultiSelect.prototype.unWireEvent = function () {\n EventHandler.remove(this.componentWrapper, 'mousedown', this.wrapperClick);\n EventHandler.remove(window, 'resize', this.windowResize);\n EventHandler.remove(this.inputElement, 'focus', this.focusInHandler);\n EventHandler.remove(this.inputElement, 'keydown', this.onKeyDown);\n if (this.mode !== 'CheckBox') {\n EventHandler.remove(this.inputElement, 'input', this.onInput);\n }\n EventHandler.remove(this.inputElement, 'keyup', this.keyUp);\n var formElement = closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.remove(formElement, 'reset', this.resetValueHandler);\n }\n EventHandler.remove(this.inputElement, 'blur', this.onBlurHandler);\n EventHandler.remove(this.componentWrapper, 'mouseover', this.mouseIn);\n EventHandler.remove(this.componentWrapper, 'mouseout', this.mouseOut);\n EventHandler.remove(this.overAllClear, 'mousedown', this.clearAll);\n EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);\n };\n MultiSelect.prototype.selectAllItem = function (state, event, list) {\n var li;\n li = this.list.querySelectorAll(state ?\n 'li.e-list-item:not([aria-selected=\"true\"]):not(.e-reorder-hide)' :\n 'li.e-list-item[aria-selected=\"true\"]:not(.e-reorder-hide)');\n if (this.value && this.value.length && event && event.target\n && closest(event.target, '.e-close-hooker') && this.allowFiltering) {\n li = this.mainList.querySelectorAll(state ?\n 'li.e-list-item:not([aria-selected=\"true\"]):not(.e-reorder-hide)' :\n 'li.e-list-item[aria-selected=\"true\"]:not(.e-reorder-hide)');\n }\n if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {\n var target = (event ? (this.groupTemplate ? closest(event.target, '.e-list-group-item') : event.target) : null);\n target = (event && event.keyCode === 32) ? list : target;\n target = (target && target.classList.contains('e-frame')) ? target.parentElement.parentElement : target;\n if (target && target.classList.contains('e-list-group-item')) {\n var listElement = target.nextElementSibling;\n if (isNullOrUndefined(listElement)) {\n return;\n }\n while (listElement.classList.contains('e-list-item')) {\n if (state) {\n if (!listElement.firstElementChild.lastElementChild.classList.contains('e-check')) {\n var selectionLimit = this.value && this.value.length ? this.value.length : 0;\n if (listElement.classList.contains('e-active')) {\n selectionLimit -= 1;\n }\n if (selectionLimit < this.maximumSelectionLength) {\n this.updateListSelection(listElement, event);\n }\n }\n }\n else {\n if (listElement.firstElementChild.lastElementChild.classList.contains('e-check')) {\n this.updateListSelection(listElement, event);\n }\n }\n listElement = listElement.nextElementSibling;\n if (listElement == null) {\n break;\n }\n }\n if (target.classList.contains('e-list-group-item')) {\n var focusedElement = this.list.getElementsByClassName('e-item-focus')[0];\n if (focusedElement) {\n focusedElement.classList.remove('e-item-focus');\n }\n if (state) {\n target.classList.add('e-active');\n }\n else {\n target.classList.remove('e-active');\n }\n target.classList.add('e-item-focus');\n }\n this.textboxValueUpdate();\n this.checkPlaceholderSize();\n if (!this.changeOnBlur && event) {\n this.updateValueState(event, this.value, this.tempValues);\n }\n }\n else {\n this.updateValue(event, li, state);\n }\n }\n else {\n this.updateValue(event, li, state);\n }\n };\n MultiSelect.prototype.updateValue = function (event, li, state) {\n var _this = this;\n var length = li.length;\n var beforeSelectArgs = {\n event: event,\n items: state ? li : [],\n itemData: state ? this.listData : [],\n isInteracted: event ? true : false,\n isChecked: state,\n preventSelectEvent: false\n };\n this.trigger('beforeSelectAll', beforeSelectArgs);\n if (li && li.length) {\n var index_1 = 0;\n var count_1 = 0;\n if (this.enableGroupCheckBox) {\n count_1 = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : li.length;\n }\n else {\n count_1 = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : this.maximumSelectionLength;\n }\n if (!beforeSelectArgs.preventSelectEvent) {\n while (index_1 < length && index_1 <= 50 && index_1 < count_1) {\n this.updateListSelection(li[index_1], event, length - index_1);\n if (this.enableGroupCheckBox) {\n this.findGroupStart(li[index_1]);\n }\n index_1++;\n }\n if (length > 50) {\n setTimeout(function () {\n while (index_1 < length && index_1 < count_1) {\n _this.updateListSelection(li[index_1], event, length - index_1);\n if (_this.enableGroupCheckBox) {\n _this.findGroupStart(li[index_1]);\n }\n index_1++;\n }\n _this.updatedataValueItems(event);\n if (!_this.changeOnBlur) {\n _this.updateValueState(event, _this.value, _this.tempValues);\n _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;\n }\n _this.updateHiddenElement();\n }, 0);\n }\n }\n else {\n for (var i = 0; i < li.length && i < count_1; i++) {\n this.removeHover();\n var customVal = li[i].getAttribute('data-value');\n var value = this.getFormattedValue(customVal);\n var mainElement = this.mainList ? this.mainList.querySelectorAll(state ?\n 'li.e-list-item:not([aria-selected=\"true\"]):not(.e-reorder-hide)' :\n 'li.e-list-item[aria-selected=\"true\"]:not(.e-reorder-hide)')[i] : null;\n if (state) {\n this.value = !this.value ? [] : this.value;\n if (this.value.indexOf(value) < 0) {\n this.setProperties({ value: [].concat([], this.value, [value]) }, true);\n }\n this.removeFocus();\n this.addListSelection(li[i], mainElement);\n this.updateChipStatus();\n this.checkMaxSelection();\n }\n else {\n this.removeAllItems(value, event, false, li[i], mainElement);\n }\n if (this.enableGroupCheckBox) {\n this.findGroupStart(li[i]);\n }\n }\n if (!state) {\n var limit = this.value && this.value.length ? this.value.length : 0;\n if (limit < this.maximumSelectionLength) {\n var collection = this.list.querySelectorAll('li.'\n + dropDownBaseClasses.li + ':not(.e-active)');\n removeClass(collection, 'e-disable');\n }\n }\n var args = {\n event: event,\n items: state ? li : [],\n itemData: state ? this.listData : [],\n isInteracted: event ? true : false,\n isChecked: state\n };\n this.trigger('selectedAll', args);\n }\n }\n this.updatedataValueItems(event);\n this.checkPlaceholderSize();\n if (length <= 50 && !beforeSelectArgs.preventSelectEvent) {\n if (!this.changeOnBlur) {\n this.updateValueState(event, this.value, this.tempValues);\n this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;\n }\n this.updateHiddenElement();\n }\n };\n MultiSelect.prototype.updateHiddenElement = function () {\n var _this = this;\n var hiddenValue = '';\n var wrapperText = '';\n var data = '';\n var text = [];\n if (this.mode === 'CheckBox') {\n this.value.map(function (value, index) {\n hiddenValue += '';\n if (_this.listData) {\n data = _this.getTextByValue(value);\n }\n else {\n data = value;\n }\n wrapperText += data + _this.delimiterChar + ' ';\n text.push(data);\n });\n this.hiddenElement.innerHTML = hiddenValue;\n this.updateWrapperText(this.delimiterWrapper, wrapperText);\n this.delimiterWrapper.setAttribute('id', getUniqueID('delim_val'));\n this.inputElement.setAttribute('aria-describedby', this.delimiterWrapper.id);\n this.inputElement.setAttribute('aria-labelledby', this.delimiterWrapper.id);\n this.setProperties({ text: text.toString() }, true);\n this.refreshInputHight();\n this.refreshPlaceHolder();\n }\n };\n MultiSelect.prototype.updatedataValueItems = function (event) {\n this.deselectHeader();\n this.textboxValueUpdate(event);\n };\n MultiSelect.prototype.textboxValueUpdate = function (event) {\n var isRemoveAll = event && event.target && (closest(event.target, '.e-selectall-parent')\n || closest(event.target, '.e-close-hooker'));\n if (this.mode !== 'Box' && !this.isPopupOpen() && !(this.mode === 'CheckBox' && (this.isSelectAll || isRemoveAll))) {\n this.updateDelimView();\n }\n else {\n this.searchWrapper.classList.remove(ZERO_SIZE);\n }\n if (this.mode === 'CheckBox') {\n this.updateDelimView();\n if (!(isRemoveAll || this.isSelectAll)) {\n this.updateDelimeter(this.delimiterChar, event);\n }\n this.refreshInputHight();\n }\n else {\n this.updateDelimeter(this.delimiterChar, event);\n }\n this.refreshPlaceHolder();\n };\n MultiSelect.prototype.setZIndex = function () {\n if (this.popupObj) {\n this.popupObj.setProperties({ 'zIndex': this.zIndex });\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n MultiSelect.prototype.updateDataSource = function (prop) {\n if (isNullOrUndefined(this.list)) {\n this.renderPopup();\n }\n else {\n this.resetList(this.dataSource);\n }\n if (this.value && this.value.length) {\n this.setProperties({ 'value': this.value });\n this.refreshSelection();\n }\n };\n MultiSelect.prototype.onLoadSelect = function () {\n this.setDynValue = true;\n this.renderPopup();\n };\n MultiSelect.prototype.selectAllItems = function (state, event) {\n var _this = this;\n if (isNullOrUndefined(this.list)) {\n this.selectAllAction = function () {\n if (_this.mode === 'CheckBox' && _this.showSelectAll) {\n var args = {\n module: 'CheckBoxSelection',\n enable: _this.mode === 'CheckBox',\n value: state ? 'check' : 'uncheck'\n };\n _this.notify('checkSelectAll', args);\n }\n _this.selectAllItem(state, event);\n _this.selectAllAction = null;\n };\n _super.prototype.render.call(this);\n }\n else {\n this.selectAllAction = null;\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n var args = {\n value: state ? 'check' : 'uncheck',\n enable: this.mode === 'CheckBox',\n module: 'CheckBoxSelection'\n };\n this.notify('checkSelectAll', args);\n }\n this.selectAllItem(state, event);\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @returns {string} Returns the persisted data of the component.\n */\n MultiSelect.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n /**\n * Dynamically change the value of properties.\n *\n * @param {MultiSelectModel} newProp - Returns the dynamic property value of the component.\n * @param {MultiSelectModel} oldProp - Returns the previous property value of the component.\n * @private\n * @returns {void}\n */\n MultiSelect.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource))\n || newProp.query && !isNullOrUndefined(Object.keys(newProp.query))) {\n this.mainList = null;\n this.mainData = null;\n this.isFirstClick = false;\n this.isDynamicDataChange = true;\n }\n if (this.getModuleName() === 'multiselect') {\n this.filterAction = false;\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 'query':\n case 'dataSource':\n if (this.mode === 'CheckBox' && this.showSelectAll) {\n if (!isNullOrUndefined(this.popupObj)) {\n this.popupObj.destroy();\n this.popupObj = null;\n }\n this.renderPopup();\n }\n break;\n case 'htmlAttributes':\n this.updateHTMLAttribute();\n break;\n case 'showClearButton':\n this.updateClearButton(newProp.showClearButton);\n break;\n case 'text':\n this.updateVal(this.value, this.value, 'text');\n break;\n case 'value':\n this.updateVal(this.value, oldProp.value, 'value');\n this.addValidInputClass();\n if (!this.closePopupOnSelect && this.isPopupOpen()) {\n this.refreshPopup();\n }\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n break;\n case 'width':\n this.setWidth(newProp.width);\n this.popupObj.setProperties({ width: this.calcPopupWidth() });\n break;\n case 'placeholder':\n this.refreshPlaceHolder();\n break;\n case 'filterBarPlaceholder':\n if (this.allowFiltering) {\n this.notify('filterBarPlaceholder', { filterBarPlaceholder: newProp.filterBarPlaceholder });\n }\n break;\n case 'delimiterChar':\n if (this.mode !== 'Box') {\n this.updateDelimView();\n }\n this.updateData(newProp.delimiterChar);\n break;\n case 'cssClass':\n this.updateOldPropCssClass(oldProp.cssClass);\n this.updateCssClass();\n Input.calculateWidth(this.inputElement.parentElement.parentElement, this.overAllWrapper);\n break;\n case 'enableRtl':\n this.enableRTL(newProp.enableRtl);\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n break;\n case 'readonly':\n this.updateReadonly(newProp.readonly);\n this.hidePopup();\n break;\n case 'enabled':\n this.hidePopup();\n this.enable(newProp.enabled);\n break;\n case 'showSelectAll':\n if (this.popupObj) {\n this.popupObj.destroy();\n this.popupObj = null;\n }\n this.renderPopup();\n break;\n case 'showDropDownIcon':\n this.dropDownIcon();\n break;\n case 'floatLabelType':\n this.setFloatLabelType();\n this.addValidInputClass();\n Input.createSpanElement(this.overAllWrapper, this.createElement);\n Input.calculateWidth(this.inputElement.parentElement.parentElement, this.overAllWrapper);\n if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {\n this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');\n }\n break;\n case 'enableSelectionOrder':\n break;\n case 'selectAllText':\n this.notify('selectAllText', false);\n break;\n case 'popupHeight':\n if (this.popupObj) {\n var overAllHeight = parseInt(this.popupHeight, 10);\n if (this.popupHeight !== 'auto') {\n this.list.style.maxHeight = formatUnit(overAllHeight);\n this.popupWrapper.style.maxHeight = formatUnit(this.popupHeight);\n }\n else {\n this.list.style.maxHeight = formatUnit(this.popupHeight);\n }\n }\n break;\n case 'headerTemplate':\n case 'footerTemplate':\n this.reInitializePoup();\n break;\n case 'allowFiltering':\n if (this.mode === 'CheckBox' && this.popupObj) {\n this.reInitializePoup();\n }\n this.updateSelectElementData(this.allowFiltering);\n break;\n default:\n {\n // eslint-disable-next-line max-len\n var msProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, msProps.newProperty, msProps.oldProperty);\n }\n break;\n }\n }\n };\n MultiSelect.prototype.reInitializePoup = function () {\n if (this.popupObj) {\n this.popupObj.destroy();\n this.popupObj = null;\n }\n this.renderPopup();\n };\n MultiSelect.prototype.presentItemValue = function (ulElement) {\n var valuecheck = [];\n for (var i = 0; i < this.value.length; i++) {\n var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', this.value[i]);\n if (!checkEle) {\n valuecheck.push(this.value[i]);\n }\n }\n return valuecheck;\n };\n ;\n MultiSelect.prototype.addNonPresentItems = function (valuecheck, ulElement, list, event) {\n var _this = this;\n this.dataSource.executeQuery(this.getForQuery(valuecheck)).then(function (e) {\n _this.addItem(e.result, list.length);\n _this.updateActionList(ulElement, list, event);\n });\n };\n ;\n MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {\n if (!this.list) {\n this.onLoadSelect();\n }\n else if ((this.dataSource instanceof DataManager) && (!this.listData || !(this.mainList && this.mainData))) {\n this.onLoadSelect();\n }\n else {\n var valuecheck = [];\n if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {\n valuecheck = this.presentItemValue(this.ulElement);\n }\n if (prop == 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)\n && this.listData != null) {\n this.mainData = null;\n this.setDynValue = true;\n this.addNonPresentItems(valuecheck, this.ulElement, this.listData);\n }\n else {\n if (prop === 'text') {\n this.initialTextUpdate();\n newProp = this.value;\n }\n if (isNullOrUndefined(this.value) || this.value.length === 0) {\n this.tempValues = oldProp;\n }\n // eslint-disable-next-line\n if (this.allowCustomValue && (this.mode === 'Default' || this.mode === 'Box') && this.isReact && this.inputFocus\n && this.isPopupOpen() && this.mainData !== this.listData) {\n var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;\n this.onActionComplete(list, this.mainData);\n }\n this.initialValueUpdate();\n if (this.mode !== 'Box' && !this.inputFocus) {\n this.updateDelimView();\n }\n if (!this.inputFocus) {\n this.refreshInputHight();\n }\n this.refreshPlaceHolder();\n if (this.mode !== 'CheckBox' && this.changeOnBlur) {\n this.updateValueState(null, newProp, oldProp);\n }\n this.checkPlaceholderSize();\n }\n }\n if (!this.changeOnBlur) {\n this.updateValueState(null, newProp, oldProp);\n }\n };\n /**\n * Adds a new item to the multiselect 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 MultiSelect.prototype.addItem = function (items, itemIndex) {\n _super.prototype.addItem.call(this, items, itemIndex);\n };\n /**\n * Hides the popup, if the popup in a open state.\n *\n * @returns {void}\n */\n MultiSelect.prototype.hidePopup = function (e) {\n var _this = this;\n var delay = 100;\n if (this.isPopupOpen()) {\n var animModel = {\n name: 'FadeOut',\n duration: 100,\n delay: delay ? delay : 0\n };\n var eventArgs = { popup: this.popupObj, cancel: false, animation: animModel, event: e || null };\n this.trigger('close', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n if (_this.fields.groupBy && _this.mode !== 'CheckBox' && _this.fixedHeaderElement) {\n remove(_this.fixedHeaderElement);\n _this.fixedHeaderElement = null;\n }\n _this.beforePopupOpen = false;\n _this.overAllWrapper.classList.remove(iconAnimation);\n _this.popupObj.hide(new Animation(eventArgs.animation));\n attributes(_this.inputElement, { 'aria-expanded': 'false' });\n _this.inputElement.removeAttribute('aria-owns');\n _this.inputElement.removeAttribute('aria-activedescendant');\n if (_this.allowFiltering) {\n _this.notify('inputFocus', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'clear' });\n }\n _this.popupObj.hide();\n removeClass([document.body, _this.popupObj.element], 'e-popup-full-page');\n EventHandler.remove(_this.list, 'keydown', _this.onKeyDown);\n }\n });\n }\n };\n /**\n * Shows the popup, if the popup in a closed state.\n *\n * @returns {void}\n */\n MultiSelect.prototype.showPopup = function (e) {\n var _this = this;\n if (!this.enabled) {\n return;\n }\n var args = { cancel: false };\n this.trigger('beforeOpen', args, function (args) {\n if (!args.cancel) {\n if (!_this.ulElement) {\n _this.beforePopupOpen = true;\n _super.prototype.render.call(_this, e);\n if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering) {\n _this.notify('popupFullScreen', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox' });\n }\n return;\n }\n if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering) {\n _this.notify('popupFullScreen', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox' });\n }\n var mainLiLength = _this.ulElement.querySelectorAll('li.' + 'e-list-item').length;\n var liLength = _this.ulElement.querySelectorAll('li.'\n + dropDownBaseClasses.li + '.' + HIDE_LIST).length;\n if (mainLiLength > 0 && (mainLiLength === liLength) && (liLength === _this.mainData.length) && !(_this.targetElement() !== '' && _this.allowCustomValue)) {\n _this.beforePopupOpen = false;\n return;\n }\n _this.onPopupShown(e);\n }\n });\n };\n /**\n * Based on the state parameter, entire list item will be selected/deselected.\n * parameter\n * `true` - Selects entire list items.\n * `false` - Un Selects entire list items.\n *\n * @param {boolean} state - if it’s true then Selects the entire list items. If it’s false the Unselects entire list items.\n * @returns {void}\n */\n MultiSelect.prototype.selectAll = function (state) {\n this.isSelectAll = true;\n this.selectAllItems(state);\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 MultiSelect.prototype.getModuleName = function () {\n return 'multiselect';\n };\n /**\n * Allows you to clear the selected values from the Multiselect component.\n *\n * @returns {void}\n */\n MultiSelect.prototype.clear = function () {\n var _this = this;\n this.selectAll(false);\n if (this.value && this.value.length) {\n setTimeout(function () {\n _this.setProperties({ value: null }, true);\n }, 0);\n }\n else {\n this.setProperties({ value: null }, true);\n }\n };\n /**\n * To Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n MultiSelect.prototype.render = function () {\n this.setDynValue = this.initStatus = false;\n this.isSelectAll = false;\n this.searchWrapper = this.createElement('span', { className: SEARCHBOX_WRAPPER + ' ' + ((this.mode === 'Box') ? BOX_ELEMENT : '') });\n this.viewWrapper = this.createElement('span', { className: DELIMITER_VIEW + ' ' + DELIMITER_WRAPPER, styles: 'display:none;' });\n this.overAllClear = this.createElement('span', {\n className: CLOSEICON_CLASS, styles: 'display:none;'\n });\n this.componentWrapper = this.createElement('div', { className: ELEMENT_WRAPPER });\n this.overAllWrapper = this.createElement('div', { className: OVER_ALL_WRAPPER });\n if (this.mode === 'CheckBox') {\n addClass([this.overAllWrapper], 'e-checkbox');\n }\n if (Browser.isDevice) {\n this.componentWrapper.classList.add(ELEMENT_MOBILE_WRAPPER);\n }\n this.setWidth(this.width);\n this.overAllWrapper.appendChild(this.componentWrapper);\n this.popupWrapper = this.createElement('div', { id: this.element.id + '_popup', className: POPUP_WRAPPER });\n if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {\n this.delimiterWrapper = this.createElement('span', { className: DELIMITER_WRAPPER, styles: 'display:none' });\n this.componentWrapper.appendChild(this.delimiterWrapper);\n }\n else {\n this.chipCollectionWrapper = this.createElement('span', {\n className: CHIP_WRAPPER,\n styles: 'display:none'\n });\n if (this.mode === 'Default') {\n this.chipCollectionWrapper.setAttribute('id', getUniqueID('chip_default'));\n }\n else if (this.mode === 'Box') {\n this.chipCollectionWrapper.setAttribute('id', getUniqueID('chip_box'));\n }\n this.componentWrapper.appendChild(this.chipCollectionWrapper);\n }\n if (this.mode !== 'Box') {\n this.componentWrapper.appendChild(this.viewWrapper);\n }\n this.componentWrapper.appendChild(this.searchWrapper);\n if (this.showClearButton && !Browser.isDevice) {\n this.componentWrapper.appendChild(this.overAllClear);\n }\n else {\n this.componentWrapper.classList.add(CLOSE_ICON_HIDE);\n }\n this.dropDownIcon();\n this.inputElement = this.createElement('input', {\n className: INPUT_ELEMENT,\n attrs: {\n spellcheck: 'false',\n type: 'text',\n autocomplete: 'off',\n tabindex: '0'\n }\n });\n if (this.mode === 'Default' || this.mode === 'Box') {\n this.inputElement.setAttribute('aria-describedby', this.chipCollectionWrapper.id);\n }\n if (this.element.tagName !== this.getNgDirective()) {\n this.element.style.display = 'none';\n }\n if (this.element.tagName === this.getNgDirective()) {\n this.element.appendChild(this.overAllWrapper);\n this.searchWrapper.appendChild(this.inputElement);\n }\n else {\n this.element.parentElement.insertBefore(this.overAllWrapper, this.element);\n this.searchWrapper.appendChild(this.inputElement);\n this.searchWrapper.appendChild(this.element);\n this.element.removeAttribute('tabindex');\n }\n if (this.floatLabelType !== 'Never') {\n createFloatLabel(this.overAllWrapper, this.searchWrapper, this.element, this.inputElement, this.value, this.floatLabelType, this.placeholder);\n }\n else if (this.floatLabelType === 'Never') {\n this.refreshPlaceHolder();\n }\n this.addValidInputClass();\n this.element.style.opacity = '';\n var id = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');\n this.element.id = id;\n this.hiddenElement = this.createElement('select', {\n attrs: { 'aria-hidden': 'true', 'class': HIDDEN_ELEMENT, 'tabindex': '-1', 'multiple': '' }\n });\n this.componentWrapper.appendChild(this.hiddenElement);\n this.validationAttribute(this.element, this.hiddenElement);\n if (this.mode !== 'CheckBox') {\n this.hideOverAllClear();\n }\n if (!isNullOrUndefined(closest(this.element, \"fieldset\")) && closest(this.element, \"fieldset\").disabled) {\n this.enabled = false;\n }\n this.wireEvent();\n this.enable(this.enabled);\n this.enableRTL(this.enableRtl);\n this.checkInitialValue();\n if (this.element.hasAttribute('data-val')) {\n this.element.setAttribute('data-val', 'false');\n }\n Input.createSpanElement(this.overAllWrapper, this.createElement);\n Input.calculateWidth(this.inputElement.parentElement.parentElement, this.overAllWrapper);\n if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {\n this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');\n }\n this.renderComplete();\n };\n MultiSelect.prototype.checkInitialValue = function () {\n var _this = this;\n var isData = this.dataSource instanceof Array ? (this.dataSource.length > 0)\n : !isNullOrUndefined(this.dataSource);\n if (!(this.value && this.value.length) &&\n isNullOrUndefined(this.text) &&\n !isData &&\n this.element.tagName === 'SELECT' &&\n this.element.options.length > 0) {\n var optionsElement = this.element.options;\n var valueCol = [];\n var textCol = '';\n for (var index = 0, optionsLen = optionsElement.length; index < optionsLen; index++) {\n var opt = optionsElement[index];\n if (!isNullOrUndefined(opt.getAttribute('selected'))) {\n if (opt.getAttribute('value')) {\n valueCol.push(opt.getAttribute('value'));\n }\n else {\n textCol += (opt.text + this.delimiterChar);\n }\n }\n }\n if (valueCol.length > 0) {\n this.setProperties({ value: valueCol }, true);\n }\n else if (textCol !== '') {\n this.setProperties({ text: textCol }, true);\n }\n if (valueCol.length > 0 || textCol !== '') {\n this.refreshInputHight();\n this.refreshPlaceHolder();\n }\n }\n if ((this.value && this.value.length) || !isNullOrUndefined(this.text)) {\n if (!this.list) {\n _super.prototype.render.call(this);\n }\n }\n if (!isNullOrUndefined(this.text) && (isNullOrUndefined(this.value) || this.value.length === 0)) {\n this.initialTextUpdate();\n }\n if (this.value && this.value.length) {\n if (!(this.dataSource instanceof DataManager)) {\n this.initialValueUpdate();\n this.initialUpdate();\n }\n else {\n this.setInitialValue = function () {\n _this.initStatus = false;\n _this.initialValueUpdate();\n _this.initialUpdate();\n _this.setInitialValue = null;\n _this.initStatus = true;\n };\n }\n this.updateTempValue();\n }\n else {\n this.initialUpdate();\n }\n this.initStatus = true;\n this.checkAutoFocus();\n if (!isNullOrUndefined(this.text)) {\n this.element.setAttribute('data-initial-value', this.text);\n }\n };\n MultiSelect.prototype.checkAutoFocus = function () {\n if (this.element.hasAttribute('autofocus')) {\n this.inputElement.focus();\n }\n };\n MultiSelect.prototype.setFloatLabelType = function () {\n removeFloating(this.overAllWrapper, this.componentWrapper, this.searchWrapper, this.inputElement, this.value, this.floatLabelType, this.placeholder);\n if (this.floatLabelType !== 'Never') {\n createFloatLabel(this.overAllWrapper, this.searchWrapper, this.element, this.inputElement, this.value, this.floatLabelType, this.placeholder);\n }\n };\n MultiSelect.prototype.addValidInputClass = function () {\n if ((!isNullOrUndefined(this.value) && this.value.length) || this.floatLabelType === 'Always') {\n addClass([this.overAllWrapper], 'e-valid-input');\n }\n else {\n removeClass([this.overAllWrapper], 'e-valid-input');\n }\n };\n MultiSelect.prototype.dropDownIcon = function () {\n if (this.showDropDownIcon) {\n this.dropIcon = this.createElement('span', { className: dropdownIcon });\n this.componentWrapper.appendChild(this.dropIcon);\n addClass([this.componentWrapper], ['e-down-icon']);\n }\n else {\n if (!isNullOrUndefined(this.dropIcon)) {\n this.dropIcon.parentElement.removeChild(this.dropIcon);\n removeClass([this.componentWrapper], ['e-down-icon']);\n }\n }\n };\n MultiSelect.prototype.initialUpdate = function () {\n if (this.mode !== 'Box' && !(this.setDynValue && this.mode === 'Default' && this.inputFocus)) {\n this.updateDelimView();\n }\n this.updateCssClass();\n this.updateHTMLAttribute();\n this.updateReadonly(this.readonly);\n this.refreshInputHight();\n this.checkPlaceholderSize();\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.\n *\n * @method destroy\n * @returns {void}\n */\n MultiSelect.prototype.destroy = function () {\n // eslint-disable-next-line\n if (this.isReact) {\n this.clearTemplate();\n }\n if (this.popupObj) {\n this.popupObj.hide();\n }\n this.notify(destroy, {});\n this.unwireListEvents();\n this.unWireEvent();\n this.list = null;\n this.popupObj = null;\n this.mainList = null;\n this.mainData = null;\n this.filterParent = null;\n this.ulElement = null;\n this.mainListCollection = null;\n _super.prototype.destroy.call(this);\n var temp = ['readonly', 'aria-disabled', 'placeholder'];\n var length = temp.length;\n while (length > 0) {\n this.inputElement.removeAttribute(temp[length - 1]);\n length--;\n }\n this.element.removeAttribute('data-initial-value');\n this.element.style.display = 'block';\n if (this.overAllWrapper.parentElement) {\n if (this.overAllWrapper.parentElement.tagName === this.getNgDirective()) {\n remove(this.overAllWrapper);\n }\n else {\n this.overAllWrapper.parentElement.insertBefore(this.element, this.overAllWrapper);\n remove(this.overAllWrapper);\n }\n }\n };\n __decorate([\n Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)\n ], MultiSelect.prototype, \"fields\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"groupTemplate\", void 0);\n __decorate([\n Property('No records found')\n ], MultiSelect.prototype, \"noRecordsTemplate\", void 0);\n __decorate([\n Property('Request failed')\n ], MultiSelect.prototype, \"actionFailureTemplate\", void 0);\n __decorate([\n Property('None')\n ], MultiSelect.prototype, \"sortOrder\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property([])\n ], MultiSelect.prototype, \"dataSource\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"query\", void 0);\n __decorate([\n Property('StartsWith')\n ], MultiSelect.prototype, \"filterType\", void 0);\n __decorate([\n Property(1000)\n ], MultiSelect.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"ignoreAccent\", void 0);\n __decorate([\n Property()\n ], MultiSelect.prototype, \"locale\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"enableGroupCheckBox\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"cssClass\", void 0);\n __decorate([\n Property('100%')\n ], MultiSelect.prototype, \"width\", void 0);\n __decorate([\n Property('300px')\n ], MultiSelect.prototype, \"popupHeight\", void 0);\n __decorate([\n Property('100%')\n ], MultiSelect.prototype, \"popupWidth\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"placeholder\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"filterBarPlaceholder\", void 0);\n __decorate([\n Property({})\n ], MultiSelect.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"headerTemplate\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"itemTemplate\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"changeOnBlur\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"allowCustomValue\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(1000)\n ], MultiSelect.prototype, \"maximumSelectionLength\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"readonly\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"text\", void 0);\n __decorate([\n Property(null)\n ], MultiSelect.prototype, \"value\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"hideSelectedItem\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"closePopupOnSelect\", void 0);\n __decorate([\n Property('Default')\n ], MultiSelect.prototype, \"mode\", void 0);\n __decorate([\n Property(',')\n ], MultiSelect.prototype, \"delimiterChar\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"ignoreCase\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"showDropDownIcon\", void 0);\n __decorate([\n Property('Never')\n ], MultiSelect.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"showSelectAll\", void 0);\n __decorate([\n Property('Select All')\n ], MultiSelect.prototype, \"selectAllText\", void 0);\n __decorate([\n Property('Unselect All')\n ], MultiSelect.prototype, \"unSelectAllText\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"enableSelectionOrder\", void 0);\n __decorate([\n Property(true)\n ], MultiSelect.prototype, \"openOnClick\", void 0);\n __decorate([\n Property(false)\n ], MultiSelect.prototype, \"addTagOnBlur\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"removing\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"removed\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"beforeSelectAll\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"selectedAll\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"chipSelection\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"filtering\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"tagging\", void 0);\n __decorate([\n Event()\n ], MultiSelect.prototype, \"customValueSelection\", void 0);\n MultiSelect = __decorate([\n NotifyPropertyChanges\n ], MultiSelect);\n return MultiSelect;\n}(DropDownBase));\nexport { MultiSelect };\n","import { Component, EVENT } from '@felicity/vision';\nimport {\n AutoComplete, ComboBox, DropDownList, MultiSelect\n} from '@syncfusion/ej2-dropdowns';\nimport { Query } from '@syncfusion/ej2-data';\nimport RawDataSource from '../data/RawDataSource.mjs';\n\n/**\n * Available controls that the selector can render\n */\nexport const SelectorType = {\n AutoComplete: 'autoComplete',\n ComboBox: 'comboBox',\n DropDownList: 'dropDownList',\n MultiSelect: 'multiSelect'\n};\n\n/**\n * Base class for data item selectors\n */\nexport default class Selector extends Component {\n /**\n * Type of the control to be rendered\n *\n * @type {string}\n * @public\n */\n type = SelectorType.DropDownList;\n\n /**\n * If true an empty option is added to the option list\n *\n * @type {boolean}\n * @public\n */\n hasEmptyOption = true;\n\n /**\n * Gets the control's data source\n *\n * @type {object}\n * @public\n */\n get dataSource() {\n return this.#dataSource;\n }\n\n /**\n * Sets the control's data source\n *\n * @param {RawDataSource} value Data source to be set\n * @public\n */\n set dataSource(value) {\n if (value) {\n this.#dataSource = value;\n\n if (this.isConnected) {\n this.load();\n }\n }\n }\n\n /**\n * Provides access to the underlying control\n *\n * @type {AutoComplete|ComboBox|DropDownList|MultiSelect}\n * @public\n */\n get control() {\n return this.#control;\n }\n\n /**\n * Indicates whether the control is enabled or not\n *\n * @type {boolean}\n * @public\n */\n get enabled() {\n return this.control?.enabled ?? false;\n }\n\n /**\n * Sets the control's enabled status\n *\n * @param {boolean} value Enabled status\n * @public\n */\n set enabled(value) {\n if (!this.control) {\n return;\n }\n\n this.control.enabled = value;\n }\n\n /**\n * Gets the selected item's value\n *\n * @type {string}\n * @public\n */\n get value() {\n if (this.dataSource?.loaded && this.control) {\n return this.control.value;\n }\n\n return this.#value;\n }\n\n /**\n * Sets the selected item by value\n *\n * @param {string} value Value to be selected\n * @public\n */\n set value(value) {\n if (this.dataSource?.loaded && this.control) {\n this.control.value = value;\n } else {\n this.#value = value;\n }\n }\n\n /**\n * Gets the selected item\n *\n * @type {object|null}\n * @public\n */\n get dataItem() {\n const { value } = this;\n\n if (!value) {\n return null;\n }\n\n return this.control?.getDataByValue(value);\n }\n\n /**\n * Accepts the template design and assigns it to each list item present in the popup.\n *\n * @type {string}\n */\n itemTemplate;\n\n /**\n * Accepts the template design and assigns it to the selected list item in the\n * input element of the component.\n *\n * @type {string}\n */\n valueTemplate;\n\n /**\n * Maps the text column from data table for each list item.\n *\n * @type {string}\n */\n textField;\n\n /**\n * Maps the value column from data table for each list item.\n *\n * @type {string}\n */\n valueField;\n\n /**\n * Group the list items with it’s related items by mapping groupBy field.\n *\n * @type {string}\n */\n groupByField;\n\n /**\n * Maps the icon class column from data table for each list item.\n *\n * @type {string}\n */\n iconCssField;\n\n /**\n * Specifies a short hint that describes the expected value of the DropDownList component.\n *\n * @type {string}\n */\n placeholder = ' - ';\n\n /**\n * Method preparing the query for filtering by text\n *\n * @type {Function}\n * @example\n * (text, query) => query.where(\"country\", \"startswith\", text, true)\n */\n prepareFilter;\n\n /** @type {AutoComplete|ComboBox|DropDownList|MultiSelect} */\n #control;\n\n /** @type {boolean} */\n #handlersRegistered = false;\n\n /** @type {string} */\n #value;\n\n /** @type {object} */\n #dataSource;\n\n /** @type {string} */\n #itemTemplate;\n\n /** @type {string} */\n #valueTemplate;\n\n /** @inheritdoc */\n _prepare() {\n super._prepare();\n\n const itemTemplate = this.querySelector('template[name=\"item\"]');\n if (itemTemplate) {\n this.itemTemplate = itemTemplate.innerHTML;\n }\n\n const valueTemplate = this.querySelector('template[name=\"value\"]');\n if (valueTemplate) {\n this.valueTemplate = valueTemplate.innerHTML;\n }\n\n if (!this.control) {\n this._render();\n this.load();\n }\n\n if (!this.#handlersRegistered) {\n [EVENT.ELEMENT.FOCUS, EVENT.ELEMENT.BLUR, EVENT.CHANGE]\n .forEach((eventType) => {\n this.control?.addEventListener(eventType, (e) => this._adjustLabel(eventType));\n });\n\n this.#handlersRegistered = true;\n }\n }\n\n /**\n * Invoked each time the custom element is disconnected from the document's DOM.\n *\n * @public\n */\n disconnectedCallback() {\n this.control?.destroy();\n }\n\n /**\n * Loads the data source and sets the control's data\n *\n * @async\n * @public\n */\n async load() {\n if (this.dataSource && this.control) {\n this.control.dataSource = await this.dataSource.data();\n if (this.#value !== undefined) {\n this.control.value = this.#value;\n }\n }\n }\n\n /**\n * Renders the underlying control\n *\n * @param {object} settings Settings for the control\n * @protected\n */\n _render(settings) {\n const options = {\n itemTemplate: this.itemTemplate ?? null,\n valueTemplate: this.valueTemplate ?? null,\n fields: {\n text: this.textField,\n value: this.valueField,\n iconCss: this.iconCssField ?? null,\n groupBy: this.groupByField ?? null\n },\n placeholder: this.placeholder,\n showClearButton: true,\n allowFiltering: true,\n filtering: !this.prepareFilter ? null\n : async (e) => {\n const query = this.prepareFilter(e.text, new Query()),\n data = await this.dataSource.data();\n e.updateData(data, query);\n },\n change: (e) => {\n this.trigger(EVENT.CHANGE, {\n value: e.value,\n dataItem: e.itemData,\n oldDataItem: e.previousItemData\n });\n },\n ...settings\n };\n\n switch (this.type) {\n case SelectorType.AutoComplete:\n this.#control = new AutoComplete(options);\n break;\n\n case SelectorType.ComboBox:\n this.#control = new ComboBox(options);\n break;\n\n case SelectorType.DropDownList:\n this.#control = new DropDownList(options);\n break;\n\n case SelectorType.MultiSelect:\n this.#control = new MultiSelect(options);\n break;\n\n default:\n throw Error(`Unrecognised selector type: ${this.type}`);\n }\n\n const input = document.createElement('input');\n this.appendChild(input);\n this.control.appendTo(input);\n }\n\n /**\n * Adjusts the label position based on the control's value and event type\n *\n * @param {string} eventType Event type that triggered the method\n * @protected\n */\n _adjustLabel(eventType) {\n const floatLabel = this.closest('.e-control-wrapper')?.querySelector('.e-float-text');\n if (!floatLabel) return;\n\n if (this.value || eventType === EVENT.ELEMENT.FOCUS) {\n floatLabel?.classList.add('e-label-top');\n floatLabel?.classList.remove('e-label-bottom');\n } else {\n floatLabel?.classList.remove('e-label-top');\n floatLabel?.classList.add('e-label-bottom');\n }\n }\n}\n","import { MetadataProvider, Model, ModelMetadata } from '@felicity/data-modelling';\nimport { Tab } from '@syncfusion/ej2-navigations';\nimport ModelEditor from './ModelEditor.mjs';\n\nexport default class TranslatableModelEditor extends ModelEditor {\n #languages;\n\n #contentModelClass;\n\n #contentMetadata;\n\n #tab;\n\n /**\n * Gets the available languages\n *\n * @type {string[]} Registered languages\n * @public\n * @readonly\n */\n get languages() {\n return this.#languages;\n }\n\n /**\n * Gets the reference to the content model class' constructor\n *\n * @type {Function} Content model class\n * @public\n * @readonly\n */\n get contentModelClass() {\n return this.#contentModelClass;\n }\n\n /**\n * Gets the model metadata of the content model\n *\n * @type {ModelMetadata} Metadata of the content model\n * @public\n * @readonly\n */\n get contentMetadata() {\n if (!this.#contentMetadata) {\n this.#contentMetadata = MetadataProvider.get(this.contentModelClass);\n }\n\n return this.#contentMetadata;\n }\n\n /**\n * Gets the tab control\n *\n * @type {Tab} Tab control\n * @see https://helpej2.syncfusion.com/documentation/api/tab/\n * @public\n * @readonly\n */\n get tab() {\n return this.#tab;\n }\n\n /**\n * Initialises an editor for the translatable model\n *\n * @param {Function} modelClass Reference to the model class' constructor\n * @param {Function} contentModelClass Reference of the contentmodel class' constructor\n * @param {string[]} languages List of codes of available languages\n */\n constructor(modelClass, contentModelClass, languages) {\n super(modelClass);\n\n this.#contentModelClass = contentModelClass;\n this.#languages = languages ?? [];\n }\n\n /**\n * Instantiates a new model to be edited\n *\n * @param {object} data Data to be bound to the model\n * @returns {object} The constructed model\n */\n createModel(data) {\n return Model.create(this.modelClass, data, this.#languages);\n }\n\n /**\n * @inheritdoc\n */\n edit(mode, data, form, dialog) {\n super.edit(mode, data, form, dialog);\n\n this.#tab = new Tab({\n selected: (e) => {\n const { selectedContent } = e;\n if (selectedContent) {\n selectedContent.querySelectorAll('.e-richtexteditor > textarea')\n .forEach((textarea) => {\n textarea.ej2_instances[0]?.refreshUI();\n });\n }\n }\n });\n this.#tab.appendTo(`#${this.uniqueId}-content-tab`);\n }\n\n template() {\n const template = super.template(),\n tabs = this.languages.map((alpha3) => `${alpha3}
`),\n contentPanels = this.languages.map((alpha3) => {\n const panel = Object.keys(this.contentMetadata.properties)\n .filter((property) => !this.contentMetadata.primaryKey.includes(property))\n .map((property) => this.editorTemplateFor(\n property.toTitleCase(),\n property,\n this.contentMetadata,\n `contents.${alpha3}`\n ))\n .join('\\n');\n\n return `${panel}
`;\n });\n\n return `\n ${template}\n \n \n
\n ${contentPanels.join('\\n')}\n
\n
\n \n
`;\n\n case 'postLogoutRedirectUris':\n return `\n \n \n
`;\n\n case 'allowedCorsOrigins':\n return `\n \n \n
`;\n\n case 'allowedGrantTypes':\n return `\n \n \n
`;\n\n case 'allowedScopes':\n return `\n \n \n
`;\n\n default:\n return super.editorTemplateFor(labelText, property, modelMetadata, path);\n }\n }\n\n template() {\n return super.template()\n + this.editorTemplateFor('Redirect URIs', 'redirectUris')\n + this.editorTemplateFor('Post Logout Redirect URIs', 'postLogoutRedirectUris')\n + this.editorTemplateFor('Allowed CORS origins', 'allowedCorsOrigins')\n + this.editorTemplateFor('Allowed grant types', 'allowedGrantTypes')\n + this.editorTemplateFor('Allowed scopes', 'allowedScopes');\n }\n\n edit(mode, data, form, dialog) {\n super.edit(mode, data, form, dialog);\n\n form.querySelector('[data-wrapper-for=\"redirect-uris\"] flc-uri-manager')\n .setData(this.viewModel.redirectUris);\n\n form.querySelector('[data-wrapper-for=\"post-logout-redirect-uris\"] flc-uri-manager')\n .setData(this.viewModel.postLogoutRedirectUris);\n\n form.querySelector('[data-wrapper-for=\"allowed-cors-origins\"] flc-uri-manager')\n .setData(this.viewModel.allowedCorsOrigins);\n }\n\n getData() {\n const data = super.getData();\n\n data.redirectUris = this.redirectUriManager.getData();\n data.postLogoutRedirectUris = this.postLogoutRedirectUriManager.getData();\n data.allowedCorsOrigins = this.allowedCorsOriginManager.getData();\n\n return data;\n }\n\n _collectProperties() {\n return super._collectProperties((p) => p !== 'properties');\n }\n\n _initEditors(form) {\n super._initEditors(form);\n\n this.#redirectUriManager = new UriManager();\n this.#postLogoutRedirectUriManager = new UriManager();\n this.#allowedCorsOriginManager = new UriManager();\n this.#grantTypeSelector = new GrantTypeSelector();\n this.#clientScopeSelector = new ClientScopeSelector();\n\n this.#grantTypeSelector.setAttribute('name', 'allowedGrantTypes');\n this.#grantTypeSelector.setAttribute('data-bind', 'value:allowedGrantTypes');\n this.#clientScopeSelector.setAttribute('name', 'allowedScopes');\n this.#clientScopeSelector.setAttribute('data-bind', 'value:allowedScopes');\n\n form.querySelector('[data-wrapper-for=\"redirect-uris\"]')\n .appendChild(this.redirectUriManager);\n\n form.querySelector('[data-wrapper-for=\"post-logout-redirect-uris\"]')\n .appendChild(this.postLogoutRedirectUriManager);\n\n form.querySelector('[data-wrapper-for=\"allowed-cors-origins\"]')\n .appendChild(this.allowedCorsOriginManager);\n\n form.querySelector('[data-wrapper-for=\"allowed-grant-types\"]')\n .appendChild(this.#grantTypeSelector);\n\n form.querySelector('[data-wrapper-for=\"allowed-scopes\"]')\n .appendChild(this.#clientScopeSelector);\n }\n}\n","// Module\nvar code = ` `;\n// Exports\nexport default code;","import {\n MIME, HTTP, Mapper, stringExtensions\n} from '@felicity/primitives';\nimport { ViewModel } from '@felicity/data-management';\nimport { Component } from '@felicity/vision';\nimport { TextBox } from '@syncfusion/ej2-inputs';\nimport { Dialog, Tooltip } from '@syncfusion/ej2-popups';\nimport Secret from '../models/Secret.mjs';\nimport Client from '../models/Client.mjs';\nimport layout from './CreateClientDialog.html';\n\nfunction generateSecret() {\n const pools = {\n upperCase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',\n lowerCase: 'abcdefghijklmnopqrstuvwxyz',\n number: '0123456789',\n symbol: '!@#$%^&*()_+~\\\\`|}{[]:;?><,./-='\n },\n\n getPool = () => {\n const poolKeys = Object.keys(pools);\n return pools[poolKeys[Math.floor(Math.random() * poolKeys.length)]];\n },\n getKey = () => {\n const pool = getPool();\n return pool[Math.floor(Math.random() * pool.length)];\n };\n\n let secret = '';\n while (secret.length < 16) {\n secret += getKey();\n }\n\n return secret;\n}\n\nexport default class CreateClientDialog extends Component {\n /**\n * DNS safe hostname of the CRUD API.\n *\n * @description Empty hostname will refer to the origin of the application\n * @type {string}\n * @default ''\n * @public\n */\n host = '';\n\n /**\n * API endpoint for creating clients\n *\n * @type {string}\n * @public\n */\n uri = '/api/ControlPanel/Client';\n\n /**\n * Provides access to the underlying dialog\n *\n * @type {Dialog}\n */\n get dialog() {\n return this.#dialog;\n }\n\n /**\n * Provides access to the form\n *\n * @type {HTMLFormElement}\n */\n get form() {\n return this.#form;\n }\n\n /**\n * View model\n *\n * @type {ViewModel}\n */\n get viewModel() {\n return this.#viewModel;\n }\n\n /** @type {Dialog} */\n #dialog;\n\n /** @type {HTMLFormElement} */\n #form;\n\n /** @type {ViewModel} */\n #viewModel;\n\n /** @type {object} */\n #inputs = {};\n\n connectedCallback() {\n this.#dialog = new Dialog({\n header: 'Create client application',\n width: 700,\n isModal: true,\n target: this,\n content: layout,\n\n buttons: [\n {\n buttonModel: {\n isPrimary: true,\n content: 'Save'\n },\n click: async (e) => {\n if (!this.form.checkValidity()) {\n this.form.reportValidity();\n return;\n }\n\n const data = this.viewModel.getData(),\n\n client = Mapper.from(data).to(Client.create()),\n urls = data.domains.split('\\n')\n .map((domain) => {\n try {\n return new URL(domain.startsWith('http') ? domain : `https://${domain}`);\n } catch {\n return null;\n }\n })\n .filter((url) => !!url);\n\n client.clientSecrets.push(Secret.create({ value: data.clientSecret }));\n client.redirectUris = urls.map((url) => `${url.origin}/signin-oidc`);\n client.redirectUris.push(`https://${client.clientId}.felicity.tools/signin-oidc`);\n client.postLogoutRedirectUris = urls.map((url) => `${url.origin}/signout-callback-oidc`);\n client.postLogoutRedirectUris.push(`https://${client.clientId}.felicity.tools/signout-callback-oidc`);\n client.frontChannelLogoutUri = `https://${client.clientId}.felicity.tools/signout-oidc`;\n\n fetch(`${this.host}${this.uri}`, {\n headers: {\n 'Content-Type': MIME.JSON\n },\n method: HTTP.POST,\n body: JSON.stringify(client)\n })\n .then((response) => {\n if (response.ok) {\n response.json().then((json) => {\n // TODO utilise application notifocation system\n this.dialog.hide();\n this.trigger('saved', json);\n });\n }\n });\n }\n },\n {\n buttonModel: {\n content: 'Cancel',\n cssClass: 'e-flat'\n },\n click: (e) => {\n this.dialog.hide();\n }\n }\n ],\n\n created: () => {\n this.#form = this.dialog.element.querySelector('form');\n\n this.dialog.element.querySelectorAll('input[type=\"text\"][name], textarea[name]')\n .forEach((input) => {\n this.#inputs[input.name] = new TextBox({\n floatLabelType: 'Auto'\n });\n this.#inputs[input.name].appendTo(input);\n });\n\n this.dialog.element.querySelectorAll('[title]')\n .forEach((element) => {\n new Tooltip({\n content: element.getAttribute('title')\n }).appendTo(element);\n });\n\n this.dialog.element.querySelector('.generate-client-secret')\n .addEventListener('click', (e) => {\n this.viewModel.clientSecret = generateSecret();\n });\n\n this.dialog.element.querySelector('.copy-secret')\n .addEventListener('click', (e) => {\n navigator.clipboard.writeText(this.viewModel.clientSecret);\n });\n\n this.#viewModel = ViewModel.of(this.form);\n\n this.viewModel.on(['value_set', 'change'], (e) => {\n switch (e.detail.property) {\n case 'clientName':\n if (!this.viewModel.clientId) {\n this.viewModel.clientId = e.detail.value.toDashCase();\n }\n break;\n\n default:\n break;\n }\n });\n },\n\n hide: () => {\n this.remove();\n }\n });\n\n this.#dialog.appendTo(\n this.appendChild(\n document.createElement('div')\n )\n );\n }\n\n disconnectedCallback() {\n this.dialog.destroy();\n }\n}\n\nCreateClientDialog.register('create-client-dialog');\n","import { ModelManager } from '@felicity/data-management';\nimport Client from '../models/Client.mjs';\nimport ClientEditor from './ClientEditor.mjs';\nimport CreateClientDialog from './CreateClientDialog.mjs';\n\n/**\n * Model manager for Identity Server client applications\n */\nexport default class ClientManager extends ModelManager {\n constructor() {\n super(Client, ClientEditor);\n }\n\n _initGrid() {\n return super._initGrid({\n toolbar: [{\n text: 'Create new client',\n prefixIcon: 'e-add',\n id: 'create-client',\n click: () => {\n const dialog = new CreateClientDialog();\n dialog.host = this.host;\n dialog.on('saved', (e) => {\n this.grid.refresh();\n });\n\n document.body.appendChild(dialog);\n }\n }, 'Search'],\n columns: [\n {\n field: 'clientId',\n headerText: 'Id',\n isPrimaryKey: true,\n visible: false\n },\n {\n field: 'clientName', headerText: 'Name'\n },\n { commands: this._crudCommands(), width: 150 }\n ],\n\n sortSettings: { columns: [{ field: 'clientName', direction: 'Ascending' }] },\n });\n }\n}\n\nClientManager.register('client-manager');\n","/* eslint no-template-curly-in-string: ['off'] */\nimport { Predicate } from '@syncfusion/ej2-data';\nimport { Selector } from '@felicity/data-management';\nimport RoleDataSource from '../data/RoleDataSource.mjs';\n\n/**\n * Selector for assessment tool records\n */\nexport default class RoleSelector extends Selector {\n textField = 'name';\n valueField = 'name';\n\n type = 'multiSelect';\n\n /* eslint class-methods-use-this: ['off'] */\n prepareFilter = (text, query) => {\n const predicate = new Predicate('name', 'contains', text, true)\n .or('normalizedName', 'contains', text, true);\n\n return query.where(predicate);\n };\n\n constructor() {\n super();\n\n this.dataSource = RoleDataSource.getDataSource();\n }\n}\n\nRoleSelector.register('role-selector');\n","import { ModelEditor } from '@felicity/data-management';\nimport Profile from '../models/Profile.mjs';\nimport RoleSelector from './RoleSelector.mjs';\n\n/**\n * Model editor for identity profiles\n */\nexport default class ProfileEditor extends ModelEditor {\n constructor() {\n super(Profile);\n }\n\n template() {\n return super.template()\n + this.editorTemplateFor('Roles', 'roles');\n }\n\n _initEditors(form) {\n super._initEditors(form);\n\n const gfSelector = RoleSelector.replace(form.querySelector('[name=\"roles\"]'), true);\n gfSelector.querySelector('.e-input-group').classList.add('e-float-input');\n }\n}\n","/* eslint no-template-curly-in-string: 0 */\nimport { ModelManager } from '@felicity/data-management';\nimport Profile from '../models/Profile.mjs';\nimport ProfileEditor from './ProfileEditor.mjs';\n\n/**\n * Model manager for identity profiles\n */\nexport default class ProfileManager extends ModelManager {\n constructor() {\n super(Profile, ProfileEditor);\n }\n\n _initGrid() {\n return super._initGrid({\n toolbar: ['Search'],\n columns: [\n {\n field: 'id',\n headerText: 'Id',\n width: 80,\n isPrimaryKey: true,\n template: `\n `\n },\n {\n field: 'roles', headerText: 'Roles'\n },\n {\n field: 'picture',\n headerText: 'Picture',\n width: 100,\n template: `\n \\${if(picture)}\n ![\"\\${name}\"](\"\\${picture}\")
\n \\${else}\n \n \\${/if}`\n },\n { field: 'name', headerText: 'Name', width: 250 },\n { field: 'organisationName', headerText: 'Organisation' },\n {\n field: 'email',\n headerText: 'Email address',\n width: 200,\n template: '${email}'\n },\n {\n field: 'emailConfirmed',\n headerText: 'Confirmed',\n width: 120,\n textAlign: 'center',\n template: '${if(emailConfirmed)}${else}${/if}'\n },\n { commands: this._crudCommands(), width: 150 }\n ],\n\n sortSettings: { columns: [{ field: 'name', direction: 'Ascending' }] },\n\n allowGrouping: true,\n groupSettings: { showDropArea: false, columns: ['roles'] },\n\n queryCellInfo: (e) => {\n if (e.column.field === 'id') {\n e.cell.querySelector('.copy-id')\n .addEventListener('click', (be) => {\n const tr = be.target.closest('.e-row'),\n dataItem = this.grid.getRowInfo(tr).rowData;\n if (dataItem) {\n navigator.clipboard.writeText(dataItem.id);\n this.trigger('copy.clipboard');\n }\n });\n }\n }\n });\n }\n}\n\nProfileManager.register('profile-manager');\n","import { ModelManager } from '@felicity/data-management';\nimport Role from '../models/Role.mjs';\n\n/**\n * Model manager for identity roles\n */\nexport default class RoleManager extends ModelManager {\n constructor() {\n super(Role);\n }\n\n _initGrid() {\n return super._initGrid({\n columns: [\n {\n field: 'id',\n headerText: 'Id',\n isPrimaryKey: true,\n visible: false\n },\n {\n field: 'name', headerText: 'Role'\n },\n { commands: this._crudCommands(), width: 150 }\n ],\n\n sortSettings: { columns: [{ field: 'name', direction: 'Ascending' }] },\n });\n }\n}\n\nRoleManager.register('role-manager');\n","export { default as ClientScopeDataSource } from './data/ClientScopeDataSource.mjs';\nexport { default as RoleDataSource } from './data/RoleDataSource.mjs';\nexport { default as FrontChannelLogoutClient } from './frontChannelLogout/Client.mjs';\nexport { default as FrontChannelLogoutList } from './frontChannelLogout/List.mjs';\nexport { default as LanguageSelector } from './i18n/LanguageSelector.mjs';\nexport { default as Client } from './models/Client.mjs';\nexport { default as Profile } from './models/Profile.mjs';\nexport { default as Role } from './models/Role.mjs';\nexport { default as Secret } from './models/Secret.mjs';\nexport { default as ClientManager } from './ui/ClientManager.mjs';\nexport { default as ProfileManager } from './ui/ProfileManager.mjs';\nexport { default as RoleManager } from './ui/RoleManager.mjs';\nexport { default as RoleSelector } from './ui/RoleSelector.mjs';\n","/**\n * JavaScript variable types\n */\nexport const TYPE = {\n /**\n * Primitive value automatically assigned to variables that have just been declared,\n * or to formal arguments for which there are no actual arguments.\n */\n UNDEFINED: 'undefined',\n\n /**\n * Logical data type that can have only the values true or false.\n */\n BOOLEAN: 'boolean',\n\n /**\n * Data type in the double-precision 64-bit floating point format (IEEE 754)\n *\n * @see https://en.wikipedia.org/wiki/Double_precision_floating-point_format\n */\n NUMBER: 'number',\n\n /**\n * Data type that can represent integers in the arbitrary precision format\n *\n * @see https://en.wikipedia.org/wiki/Arbitrary-precision_arithmetic\n */\n BIGINT: 'bigint',\n\n /**\n * Sequence of characters used to represent text.\n */\n STRING: 'string',\n\n /**\n * Data type Symbol can be referred to as a \"Symbol value\".\n * In a JavaScript runtime environment, a symbol value is created by invoking the function Symbol,\n * which dynamically produces an anonymous, unique value.\n * A symbol may be used as an object property.\n */\n SYMBOL: 'symbol',\n\n /**\n * Code snippet that can be called by other code or by itself,\n * or a variable that refers to the function.\n */\n FUNCTION: 'function',\n\n /**\n * Data type for any objects that can not be categorised otherwise.\n */\n OBJECT: 'object'\n};\n\n/**\n * HTTP request methods\n */\nexport const HTTP = {\n /**\n * The GET method requests a representation of the specified resource.\n * Requests using GET should only retrieve data.\n */\n GET: 'GET',\n\n /**\n * The HEAD method asks for a response identical to a GET request,\n * but without the response body.\n */\n HEAD: 'HEAD',\n\n /**\n * The POST method submits an entity to the specified resource,\n * often causing a change in state or side effects on the server.\n */\n POST: 'POST',\n\n /**\n * The PUT method replaces all current representations\n * of the target resource with the request payload.\n */\n PUT: 'PUT',\n\n /**\n * The DELETE method deletes the specified resource.\n */\n DELETE: 'DELETE',\n\n /**\n * The CONNECT method establishes a tunnel to the server\n * identified by the target resource.\n */\n CONNECT: 'CONNECT',\n\n /**\n * The OPTIONS method describes the communication options for the target resource.\n */\n OPTIONS: 'OPTIONS',\n\n /**\n * The TRACE method performs a message loop-back test along the path to the target resource.\n */\n TRACE: 'TRACE',\n\n /**\n * The PATCH method applies partial modifications to a resource.\n */\n PATCH: 'PATCH'\n};\n\n/**\n * An HTTP header is a field of an HTTP request or response\n * that passes additional context and metadata about the request or response.\n */\nexport const HTTP_HEADER = {\n\n AUTHENTICATION: {\n /**\n * Defines the authentication method that should be used to access a resource.\n */\n WWW_AUTHENTICATE: 'WWW-Authenticate',\n\n /**\n * Contains the credentials to authenticate a user-agent with a server.\n */\n AUTHORIZATION: 'Authorization',\n\n /**\n * Defines the authentication method that should be used to access a\n * resource behind a proxy server.\n */\n PROXY_AUTHENTICATE: 'Proxy-Authenticate',\n\n /**\n * Contains the credentials to authenticate a user agent with a proxy server.\n */\n PROXY_AUTHORIZATION: 'Proxy-Authorization',\n },\n\n CACHING: {\n /**\n * The time, in seconds, that the object has been in a proxy cache.\n */\n AGE: 'Age',\n\n /**\n * Directives for caching mechanisms in both requests and responses.\n */\n CACHE_CONTROL: 'Cache-Control',\n\n /**\n * Clears browsing data (e.g. cookies, storage, cache)\n * associated with the requesting website.\n */\n CLEAR_SITE_DATA: 'Clear-Site-Data',\n\n /**\n * The date/time after which the response is considered stale.\n */\n EXPIRES: 'Expires',\n\n /**\n * Implementation-specific header that may have various effects anywhere\n * along the request-response chain. Used for backwards compatibility with\n * HTTP/1.0 caches where the Cache-Control header is not yet present.\n */\n PRAGMA: 'Pragma',\n },\n\n /**\n * HTTP Client hints are a set of request headers that provide useful information\n * about the client such as device type and network conditions, and allow servers\n * to optimize what is served for those conditions.\n * Servers proactively requests the client hint headers they are interested in\n * from the client using Accept-CH. The client may then choose to include the\n * requested headers in subsequent requests.\n */\n CLIENT_HINTS: {\n /**\n * Servers can advertise support for Client Hints using the Accept-CH header\n * field or an equivalent HTML element with http-equiv attribute.\n */\n ACCEPT_CH: 'Accept-CH',\n\n /**\n * Servers can ask the client to remember the set of Client Hints that the\n * server supports for a specified period of time, to enable delivery of\n * Client Hints on subsequent requests to the server's origin.\n */\n ACCEPT_CH_LIFETIME: 'Accept-CH-Lifetime',\n\n /**\n * User agent's branding and version.\n */\n SEC_CH_UA: 'Sec-CH-UA',\n\n /**\n * User agent's underlying platform architecture.\n */\n SEC_CH_UA_ARCH: 'Sec-CH-UA-Arch',\n\n /**\n * User agent's underlying CPU architecture bitness (for example \"64\" bit).\n */\n SEC_CH_UA_BITNESS: 'Sec-CH-UA-Bitness',\n\n /**\n * Full version for each brand in the user agent's brand list.\n */\n SEC_CH_UA_FULL_VERSION_LIST: 'Sec-CH-UA-Full-Version-List',\n\n /**\n * User agent is running on a mobile device or, more generally, prefers a\n * \"mobile\" user experience.\n */\n SEC_CH_UA_MOBILE: 'Sec-CH-UA-Mobile',\n\n /**\n * User agent's device model.\n */\n SEC_CH_UA_MODEL: 'Sec-CH-UA-Model',\n\n /**\n * User agent's underlying operation system/platform.\n */\n SEC_CH_UA_PLATFORM: 'Sec-CH-UA-Platform',\n\n /**\n * User agent's underlying operation system version.\n */\n SEC_CH_UA_PLATFORM_VERSION: 'Sec-CH-UA-Platform-Version',\n\n /**\n * Approximate bandwidth of the client's connection to the server, in Mbps.\n * This is part of the Network Information API.\n */\n DOWNLINK: 'Downlink',\n\n /**\n * The effective connection type (\"network profile\") that best matches the\n * connection's latency and bandwidth. This is part of the Network Information API.\n */\n ECT: 'ECT',\n\n /**\n * Application layer round trip time (RTT) in milliseconds, which includes\n * the server processing time. This is part of the Network Information API.\n */\n RTT: 'RTT',\n\n /**\n * A boolean that indicates the user agent's preference for reduced data usage.\n */\n SAVE_DATA: 'Save-Data'\n },\n\n CONDITIONALS: {\n /**\n * The last modification date of the resource, used to compare several versions\n * of the same resource. It is less accurate than ETag, but easier to calculate\n * in some environments. Conditional requests using If-Modified-Since and\n * If-Unmodified-Since use this value to change the behavior of the request.\n */\n LAST_MODIFIED: 'Last-Modified',\n\n /**\n * A unique string identifying the version of the resource. Conditional requests\n * using If-Match and If-None-Match use this value to change the behavior of the request.\n */\n ETAG: 'ETag',\n\n /**\n * Makes the request conditional, and applies the method only if the stored\n * resource matches one of the given ETags.\n */\n IF_MATCH: 'If-Match',\n\n /**\n * Makes the request conditional, and applies the method only if the stored\n * resource doesn't match any of the given ETags. This is used to update caches\n * (for safe requests), or to prevent uploading a new resource when one already exists.\n */\n IF_NONE_MATCH: 'If-None-Match',\n\n /**\n * Makes the request conditional, and expects the resource to be transmitted only\n * if it has been modified after the given date. This is used to transmit data\n * only when the cache is out of date.\n */\n IF_MODIFIED_SINCE: 'If-Modified-Since',\n\n /**\n * Makes the request conditional, and expects the resource to be transmitted only\n * if it has not been modified after the given date. This ensures the coherence of\n * a new fragment of a specific range with previous ones, or to implement an\n * optimistic concurrency control system when modifying existing documents.\n */\n IF_UNMODIFIED_SINCE: 'If-Unmodified-Since',\n\n /**\n * Determines how to match request headers to decide whether a cached response\n * can be used rather than requesting a fresh one from the origin server.\n */\n VARY: 'Vary'\n },\n\n CONNECTION_MANAGEMENT: {\n /**\n * Controls whether the network connection stays open after the current transaction finishes.\n */\n CONNECTION: 'Connection',\n\n /**\n * Controls how long a persistent connection should stay open.\n */\n KEEP_ALIVE: 'Keep-Alive'\n },\n\n CONTENT_NEGOTIATION: {\n /**\n * Informs the server about the types of data that can be sent back.\n */\n ACCEPT: 'Accept',\n\n /**\n * The encoding algorithm, usually a compression algorithm, that can be\n * used on the resource sent back.\n */\n ACCEPT_ENCODING: 'Accept-Encoding',\n\n /**\n * Informs the server about the human language the server is expected\n * to send back. This is a hint and is not necessarily under the full control\n * of the user: the server should always pay attention not to override an\n * explicit user choice (like selecting a language from a dropdown).\n */\n ACCEPT_LANGUAGE: 'Accept-Language'\n },\n\n CONTROLS: {\n /**\n * Indicates expectations that need to be fulfilled by the server to\n * properly handle the request.\n */\n EXPECT: 'Expect',\n\n /**\n * When using TRACE, indicates the maximum number of hops the request\n * can do before being reflected to the sender.\n */\n MAX_FORWARDS: 'Max-Forwards'\n },\n\n COOKIES: {\n /**\n * Contains stored HTTP cookies previously sent by the server with\n * the Set-Cookie header.\n */\n COOKIE: 'Cookie',\n\n /**\n * Send cookies from the server to the user-agent.\n */\n SET_COOKIE: 'Set-Cookie'\n },\n\n CORS: {\n /**\n * Indicates whether the response can be shared.\n */\n ACCESS_CONTROL_ALLOW_ORIGIN: 'Access-Control-Allow-Origin',\n\n /**\n * Indicates whether the response to the request can be exposed when\n * the credentials flag is true.\n */\n ACCESS_CONTROL_ALLOW_CREDENTIALS: 'Access-Control-Allow-Credentials',\n\n /**\n * Used in response to a preflight request to indicate which HTTP headers\n * can be used when making the actual request.\n */\n ACCESS_CONTROL_ALLOW_HEADERS: 'Access-Control-Allow-Headers',\n\n /**\n * Specifies the methods allowed when accessing the resource in response\n * to a preflight request.\n */\n ACCESS_CONTROL_ALLOW_METHODS: 'Access-Control-Allow-Methods',\n\n /**\n * Indicates which headers can be exposed as part of the response\n * by listing their names.\n */\n ACCESS_CONTROL_EXPOSE_HEADERS: 'Access-Control-Expose-Headers',\n\n /**\n * Indicates how long the results of a preflight request can be cached.\n */\n ACCESS_CONTROL_MAX_AGE: 'Access-Control-Max-Age',\n\n /**\n * Used when issuing a preflight request to let the server know which HTTP headers\n * will be used when the actual request is made.\n */\n ACCESS_CONTROL_REQUEST_HEADERS: 'Access-Control-Request-Headers',\n\n /**\n * Used when issuing a preflight request to let the server know which HTTP method\n * will be used when the actual request is made.\n */\n ACCESS_CONTROL_REQUEST_METHOD: 'Access-Control-Request-Method',\n\n /**\n * Indicates where a fetch originates from.\n */\n ORIGIN: 'Origin',\n\n /**\n * Specifies origins that are allowed to see values of attributes retrieved via\n * features of the Resource Timing API, which would otherwise be reported as\n * zero due to cross-origin restrictions.\n */\n TIMING_ALLOW_ORIGIN: 'Timing-Allow-Origin'\n },\n\n DOWNLOADS: {\n /**\n * Indicates if the resource transmitted should be displayed inline\n * (default behavior without the header), or if it should be handled like\n * a download and the browser should present a \"Save As\" dialog.\n */\n CONTENT_DISPOSITION: 'Content-Disposition'\n },\n\n MESSAGE_BODY: {\n /**\n * The size of the resource, in decimal number of bytes.\n */\n CONTENT_LENGTH: 'Content-Length',\n\n /**\n * Indicates the media type of the resource.\n */\n CONTENT_TYPE: 'Content-Type',\n\n /**\n * Used to specify the compression algorithm.\n */\n CONTENT_ENCODING: 'Content-Encoding',\n\n /**\n * Describes the human language(s) intended for the audience, so that it\n * allows a user to differentiate according to the users' own preferred language.\n */\n CONTENT_LANGUAGE: 'Content-Language',\n\n /**\n * Indicates an alternate location for the returned data.\n */\n CONTENT_LOCATION: 'Content-Location'\n },\n\n PROXIES: {\n /**\n * Contains information from the client-facing side of proxy servers that\n * is altered or lost when a proxy is involved in the path of the request.\n */\n FORWARDED: 'Forwarded',\n\n /**\n * Identifies the originating IP addresses of a client connecting to a\n * web server through an HTTP proxy or a load balancer.\n */\n X_FORWARDED_FOR: 'X-Forwarded-For',\n\n /**\n * Identifies the original host requested that a client used to connect to\n * your proxy or load balancer.\n */\n X_FORWARDED_HOST: 'X-Forwarded-Host',\n\n /**\n * Identifies the protocol (HTTP or HTTPS) that a client used to connect to\n * your proxy or load balancer.\n */\n X_FORWARDED_PROTO: 'X-Forwarded-Proto',\n\n /**\n * Added by proxies, both forward and reverse proxies, and can appear in\n * the request headers and the response headers.\n */\n VIA: 'Via'\n },\n\n REDIRECTS: {\n /**\n * Indicates the URL to redirect a page to.\n */\n LOCATION: 'Location'\n },\n\n REQUEST_CONTEXT: {\n /**\n * Contains an Internet email address for a human user who controls the\n * requesting user agent.\n */\n FROM: 'From',\n\n /**\n * Specifies the domain name of the server (for virtual hosting), and\n * (optionally) the TCP port number on which the server is listening.\n */\n HOST: 'Host',\n\n /**\n * The address of the previous web page from which a link to the currently\n * requested page was followed.\n */\n REFERER: 'Referer',\n\n /**\n * Governs which referrer information sent in the Referer header should be\n * included with requests made.\n */\n REFERRER_POLICY: 'Referrer-Policy',\n\n /**\n * Contains a characteristic string that allows the network protocol peers\n * to identify the application type, operating system, software vendor or\n * software version of the requesting software user agent. See also the Firefox\n * user agent string reference.\n */\n USER_AGENT: 'User-Agent'\n },\n\n RESPONSE_CONTEXT: {\n /**\n * Lists the set of HTTP request methods supported by a resource.\n */\n ALLOW: 'Allow',\n\n /**\n * Contains information about the software used by the origin server to\n * handle the request.\n */\n SERVER: 'Server'\n },\n\n RANGE_REQUESTS: {\n /**\n * Indicates if the server supports range requests, and if so in which\n * unit the range can be expressed.\n */\n ACCEPT_RANGES: 'Accept-Ranges',\n\n /**\n * Indicates the part of a document that the server should return.\n */\n RANGE: 'Range',\n\n /**\n * Creates a conditional range request that is only fulfilled if the given\n * etag or date matches the remote resource. Used to prevent downloading two\n * ranges from incompatible version of the resource.\n */\n IF_RANGE: 'If-Range',\n\n /**\n * Indicates where in a full body message a partial message belongs.\n */\n CONTENT_RANGE: 'Content-Range'\n },\n\n SECURITY: {\n /**\n * Allows a server to declare an embedder policy for a given document.\n */\n CROSS_ORIGIN_EMBEDDER_POLICY: 'Cross-Origin-Embedder-Policy',\n\n /**\n * Prevents other domains from opening/controlling a window.\n */\n CROSS_ORIGIN_OPENER_POLICY: 'Cross-Origin-Opener-Policy',\n\n /**\n * Prevents other domains from reading the response of the resources to\n * which this header is applied.\n */\n CROSS_ORIGIN_RESOURCE_POLICY: 'Cross-Origin-Resource-Policy',\n\n /**\n * Controls resources the user agent is allowed to load for a given page.\n */\n CONTENT_SECURITY_POLICY: 'Content-Security-Policy',\n\n /**\n * Allows web developers to experiment with policies by monitoring, but not\n * enforcing, their effects. These violation reports consist of JSON documents\n * sent via an HTTP POST request to the specified URI.\n */\n CONTENT_SECURITY_POLICY_REPORT_ONLY: 'Content-Security-Policy-Report-Only',\n\n /**\n * Allows sites to opt in to reporting and/or enforcement of\n * Certificate Transparency requirements, which prevents the use of misissued\n * certificates for that site from going unnoticed. When a site enables the\n * Expect-CT header, they are requesting that Chrome check that any certificate\n * for that site appears in public CT logs.\n */\n EXPECT_CT: 'Expect-CT',\n\n /**\n * Provides a mechanism to allow and deny the use of browser features in its\n * own frame, and in iframes that it embeds.\n */\n FEATURE_POLICY: 'Feature-Policy',\n\n /**\n * Provides a mechanism to allow web applications to isolate their origins.\n */\n ORIGIN_ISOLATION: 'Origin-Isolation',\n\n /**\n * Force communication using HTTPS instead of HTTP.\n */\n STRICT_TRANSPORT_SECURITY: 'Strict-Transport-Security',\n\n /**\n * Sends a signal to the server expressing the client's preference for an\n * encrypted and authenticated response, and that it can successfully handle\n * the upgrade-insecure-requests directive.\n */\n UPGRADE_INSECURE_REQUESTS: 'Upgrade-Insecure-Requests',\n\n /**\n * Disables MIME sniffing and forces browser to use the type given in Content-Type.\n */\n X_CONTENT_TYPE_OPTIONS: 'X-Content-Type-Options',\n\n /**\n * The X-Download-Options HTTP header indicates that the browser\n * (Internet Explorer) should not display the option to \"Open\" a file that\n * has been downloaded from an application, to prevent phishing attacks as\n * the file otherwise would gain access to execute in the context of the application.\n */\n X_DOWNLOAD_OPTIONS: 'X-Download-Options',\n\n /**\n * Indicates whether a browser should be allowed to render a page in a\n * ,