\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) {\n var tempDays = _super.prototype.renderDays.call(this, currentDate, this.value, this.isMultiSelection, this.values, isCustomDate);\n if (this.isMultiSelection) {\n _super.prototype.validateValues.call(this, this.isMultiSelection, this.values);\n }\n return tempDays;\n };\n Calendar.prototype.renderYears = function (e) {\n if (this.calendarMode === 'Gregorian') {\n _super.prototype.renderYears.call(this, e, this.value);\n }\n else {\n this.islamicModule.islamicRenderYears(e, this.value);\n }\n };\n Calendar.prototype.renderDecades = function (e) {\n if (this.calendarMode === 'Gregorian') {\n _super.prototype.renderDecades.call(this, e, this.value);\n }\n else {\n this.islamicModule.islamicRenderDecade(e, this.value);\n }\n };\n Calendar.prototype.renderTemplate = function (elements, count, classNm, e) {\n if (this.calendarMode === 'Gregorian') {\n _super.prototype.renderTemplate.call(this, elements, count, classNm, e, this.value);\n }\n else {\n this.islamicModule.islamicRenderTemplate(elements, count, classNm, e, this.value);\n }\n this.changedArgs = { value: this.value, values: this.values };\n this.changeHandler();\n };\n Calendar.prototype.clickHandler = function (e) {\n var eve = e.currentTarget;\n this.isPopupClicked = true;\n if (eve.classList.contains(OTHERMONTH)) {\n if (this.isMultiSelection) {\n var copyValues = this.copyValues(this.values);\n copyValues.push(this.getIdValue(e, null));\n this.setProperties({ values: copyValues }, true);\n this.setProperties({ value: this.values[this.values.length - 1] }, true);\n }\n else {\n this.setProperties({ value: this.getIdValue(e, null) }, true);\n }\n }\n var storeView = this.currentView();\n _super.prototype.clickHandler.call(this, e, this.value);\n if (this.isMultiSelection && this.currentDate !== this.value &&\n !isNullOrUndefined(this.tableBodyElement.querySelectorAll('.' + FOCUSEDDATE)[0]) && storeView === 'Year') {\n this.tableBodyElement.querySelectorAll('.' + FOCUSEDDATE)[0].classList.remove(FOCUSEDDATE);\n }\n };\n Calendar.prototype.switchView = function (view, e, isMultiSelection, isCustomDate) {\n _super.prototype.switchView.call(this, view, e, this.isMultiSelection, isCustomDate);\n };\n /**\n * To get component name\n *\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 && (+this.value !== +this.previousDate || this.previousDate == null\n && !isNaN(+this.value))) {\n this.changeEvent(e);\n }\n else if (!isNullOrUndefined(this.values) && this.previousValues !== this.values.length) {\n this.changeEvent(e);\n this.previousValues = this.values.length;\n }\n };\n __decorate([\n Property(null)\n ], Calendar.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], Calendar.prototype, \"values\", void 0);\n __decorate([\n Property(false)\n ], Calendar.prototype, \"isMultiSelection\", void 0);\n __decorate([\n Event()\n ], Calendar.prototype, \"change\", void 0);\n Calendar = __decorate([\n NotifyPropertyChanges\n ], Calendar);\n return Calendar;\n}(CalendarBase));\nexport { Calendar };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\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.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 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-live': 'assertive', 'aria-atomic': 'true',\n 'aria-haspopup': 'true', 'aria-activedescendant': 'null',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-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 };\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 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) ||\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-live': 'assertive', 'aria-atomic': 'true', 'aria-disabled': 'true',\n 'aria-haspopup': 'true', 'aria-activedescendant': 'null',\n 'aria-owns': this.element.id + '_options', '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-activedescendant': '' + this.setActiveDescendant() });\n }\n else {\n Input.addAttributes({ 'aria-expanded': 'false' }, this.inputElement);\n attributes(this.inputElement, { 'aria-activedescendant': 'null' });\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 break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);\n break;\n case '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) {\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","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 * as React from 'react';\nimport { DatePicker } from '@syncfusion/ej2-calendars';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * Represents the Essential JS 2 React DatePicker Component.\n * ```ts\n *
\n * ```\n */\nvar DatePickerComponent = /** @class */ (function (_super) {\n __extends(DatePickerComponent, _super);\n function DatePickerComponent(props) {\n var _this = _super.call(this, props) || this;\n _this.initRenderCalled = false;\n _this.checkInjectedModules = true;\n _this.immediateRender = true;\n _this.portals = [];\n return _this;\n }\n DatePickerComponent.prototype.render = function () {\n if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {\n _super.prototype.render.call(this);\n this.initRenderCalled = true;\n }\n else {\n return React.createElement(React.Fragment, null, [].concat(React.createElement(\"input\", this.getDefaultAttributes()), this.portals));\n }\n };\n return DatePickerComponent;\n}(DatePicker));\nexport { DatePickerComponent };\napplyMixins(DatePickerComponent, [ComponentBase, React.Component]);\n","import { L10n, getValue, getDefaultDateObject, cldrData } from '@syncfusion/ej2-base';\nvar ARROWLEFT = 'ArrowLeft';\nvar ARROWRIGHT = 'ArrowRight';\nvar ARROWUP = 'ArrowUp';\nvar ARROWDOWN = 'ArrowDown';\nvar TAB = 'Tab';\nvar SHIFTTAB = 'shiftTab';\nvar END = 'End';\nvar HOME = 'Home';\nvar MaskedDateTime = /** @class */ (function () {\n function MaskedDateTime(parent) {\n this.mask = '';\n this.defaultConstant = {\n day: 'day',\n month: 'month',\n year: 'year',\n hour: 'hour',\n minute: 'minute',\n second: 'second',\n dayOfTheWeek: 'day of the week',\n };\n this.hiddenMask = '';\n this.validCharacters = 'dMyhmHfasz';\n this.isDayPart = false;\n this.isMonthPart = false;\n this.isYearPart = false;\n this.isHourPart = false;\n this.isMinutePart = false;\n this.isSecondsPart = false;\n this.isMilliSecondsPart = false;\n this.monthCharacter = '';\n this.periodCharacter = '';\n this.isHiddenMask = false;\n this.isComplete = false;\n this.isNavigate = false;\n this.formatRegex = /EEEEE|EEEE|EEE|EE|E|dddd|ddd|dd|d|MMMM|MMM|MM|M|yyyy|yy|y|HH|H|hh|h|mm|m|fff|ff|f|aa|a|ss|s|zzzz|zzz|zz|z|'[^']*'|'[^']*'/g;\n this.isDeletion = false;\n this.isShortYear = false;\n this.isDeleteKey = false;\n this.isDateZero = false;\n this.isMonthZero = false;\n this.isYearZero = false;\n this.dayTypeCount = 0;\n this.monthTypeCount = 0;\n this.hourTypeCount = 0;\n this.minuteTypeCount = 0;\n this.secondTypeCount = 0;\n this.parent = parent;\n this.dateformat = this.getCulturedFormat();\n this.maskDateValue = this.parent.value != null ? new Date(+this.parent.value) : new Date();\n this.maskDateValue.setMonth(0);\n this.maskDateValue.setHours(0);\n this.maskDateValue.setMinutes(0);\n this.maskDateValue.setSeconds(0);\n this.previousDate = new Date(this.maskDateValue.getFullYear(), this.maskDateValue.getMonth(), this.maskDateValue.getDate(), this.maskDateValue.getHours(), this.maskDateValue.getMinutes(), this.maskDateValue.getSeconds());\n this.removeEventListener();\n this.addEventListener();\n }\n MaskedDateTime.prototype.getModuleName = function () {\n return 'MaskedDateTime';\n };\n MaskedDateTime.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on('createMask', this.createMask, this);\n this.parent.on('setMaskSelection', this.validCharacterCheck, this);\n this.parent.on('inputHandler', this.maskInputHandler, this);\n this.parent.on('keyDownHandler', this.maskKeydownHandler, this);\n this.parent.on('clearHandler', this.clearHandler, this);\n };\n MaskedDateTime.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off('createMask', this.createMask);\n this.parent.off('setMaskSelection', this.validCharacterCheck);\n this.parent.off('inputHandler', this.maskInputHandler);\n this.parent.off('keyDownHandler', this.maskKeydownHandler);\n this.parent.off('clearHandler', this.clearHandler);\n };\n MaskedDateTime.prototype.createMask = function (dateformat) {\n this.isDayPart = this.isMonthPart = this.isYearPart = this.isHourPart = this.isMinutePart = this.isSecondsPart = false;\n this.dateformat = this.getCulturedFormat();\n if (this.parent.maskPlaceholder.day)\n this.defaultConstant['day'] = this.parent.maskPlaceholder.day;\n if (this.parent.maskPlaceholder.month)\n this.defaultConstant['month'] = this.parent.maskPlaceholder.month;\n if (this.parent.maskPlaceholder.year)\n this.defaultConstant['year'] = this.parent.maskPlaceholder.year;\n if (this.parent.maskPlaceholder.hour)\n this.defaultConstant['hour'] = this.parent.maskPlaceholder.hour;\n if (this.parent.maskPlaceholder.minute)\n this.defaultConstant['minute'] = this.parent.maskPlaceholder.minute;\n if (this.parent.maskPlaceholder.second)\n this.defaultConstant['second'] = this.parent.maskPlaceholder.second;\n if (this.parent.maskPlaceholder.dayOfTheWeek)\n this.defaultConstant['dayOfTheWeek'] = this.parent.maskPlaceholder.dayOfTheWeek.toString();\n this.getCUltureMaskFormat();\n var inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());\n this.isHiddenMask = true;\n this.hiddenMask = this.dateformat.replace(this.formatRegex, this.formatCheck());\n this.isHiddenMask = false;\n this.previousHiddenMask = this.hiddenMask;\n this.mask = this.previousValue = inputValue;\n this.parent.maskedDateValue = this.mask;\n if (this.parent.value) {\n this.setDynamicValue();\n }\n };\n MaskedDateTime.prototype.getCUltureMaskFormat = function () {\n this.l10n = new L10n(this.parent.moduleName, this.defaultConstant, this.parent.locale);\n this.objectString = Object.keys(this.defaultConstant);\n for (var i = 0; i < this.objectString.length; i++) {\n this.defaultConstant[this.objectString[i].toString()] = this.l10n.getConstant(this.objectString[i].toString());\n }\n };\n MaskedDateTime.prototype.validCharacterCheck = function () {\n var start = this.parent.inputElement.selectionStart;\n for (var i = start, j = start - 1; i < this.hiddenMask.length || j >= 0; i++, j--) {\n if (i < this.hiddenMask.length && this.validCharacters.indexOf(this.hiddenMask[i]) !== -1) {\n this.setSelection(this.hiddenMask[i]);\n return;\n }\n if (j >= 0 && this.validCharacters.indexOf(this.hiddenMask[j]) !== -1) {\n this.setSelection(this.hiddenMask[j]);\n return;\n }\n }\n };\n MaskedDateTime.prototype.setDynamicValue = function () {\n this.maskDateValue = this.parent.value;\n this.isDayPart = this.isMonthPart = this.isYearPart = this.isHourPart = this.isMinutePart = this.isSecondsPart = true;\n this.updateValue();\n // this.parent.inputElement.selectionStart = start;\n // this.validCharacterCheck();\n };\n MaskedDateTime.prototype.setSelection = function (validChar) {\n var start = -1;\n var end = 0;\n for (var i = 0; i < this.hiddenMask.length; i++) {\n if (this.hiddenMask[i] === validChar) {\n end = i + 1;\n if (start === -1) {\n start = i;\n }\n }\n }\n if (start < 0) {\n start = 0;\n }\n this.parent.inputElement.setSelectionRange(start, end);\n };\n MaskedDateTime.prototype.maskKeydownHandler = function (args) {\n if (args.e.key === 'Delete') {\n this.isDeleteKey = true;\n return;\n }\n if ((!args.e.altKey && !args.e.ctrlKey) && (args.e.key === ARROWLEFT || args.e.key === ARROWRIGHT || args.e.key === SHIFTTAB || args.e.key === TAB || args.e.action === SHIFTTAB ||\n args.e.key === END || args.e.key === HOME)) {\n var start = this.parent.inputElement.selectionStart;\n var end = this.parent.inputElement.selectionEnd;\n var length_1 = this.parent.inputElement.value.length;\n if ((start == 0 && end == length_1) && (args.e.key === TAB || args.e.action === SHIFTTAB)) {\n var index = args.e.action === SHIFTTAB ? end : 0;\n this.parent.inputElement.selectionStart = this.parent.inputElement.selectionEnd = index;\n }\n if (args.e.key === END || args.e.key === HOME) {\n var range = args.e.key === END ? length_1 : 0;\n this.parent.inputElement.selectionStart = this.parent.inputElement.selectionEnd = range;\n }\n this.navigateSelection(args.e.key === ARROWLEFT || args.e.action === SHIFTTAB || args.e.key === END ? true : false);\n }\n if ((!args.e.altKey && !args.e.ctrlKey) && (args.e.key === ARROWUP || args.e.key === ARROWDOWN)) {\n var start = this.parent.inputElement.selectionStart;\n this.dateAlteration(args.e.key === ARROWDOWN ? true : false);\n var inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());\n this.isHiddenMask = true;\n this.hiddenMask = this.dateformat.replace(this.formatRegex, this.formatCheck());\n this.isHiddenMask = false;\n this.previousHiddenMask = this.hiddenMask;\n this.previousValue = inputValue;\n this.parent.inputElement.value = inputValue;\n this.parent.inputElement.selectionStart = start;\n this.validCharacterCheck();\n }\n };\n MaskedDateTime.prototype.differenceCheck = function () {\n var start = this.parent.inputElement.selectionStart;\n var inputValue = this.parent.inputElement.value;\n var previousVal = this.previousValue.substring(0, start + this.previousValue.length - inputValue.length);\n var newVal = inputValue.substring(0, start);\n var newDateValue = new Date(+this.maskDateValue);\n var maxDate = new Date(newDateValue.getFullYear(), newDateValue.getMonth() + 1, 0).getDate();\n if (previousVal.indexOf(newVal) === 0 && (newVal.length === 0 || this.previousHiddenMask[newVal.length - 1] !== this.previousHiddenMask[newVal.length])) {\n for (var i = newVal.length; i < previousVal.length; i++) {\n if (this.previousHiddenMask[i] !== '' && this.validCharacters.indexOf(this.previousHiddenMask[i]) >= 0) {\n this.isDeletion = this.handleDeletion(this.previousHiddenMask[i], false);\n }\n }\n if (this.isDeletion) {\n return;\n }\n }\n switch (this.previousHiddenMask[start - 1]) {\n case 'd':\n var date = (this.isDayPart && newDateValue.getDate().toString().length < 2 ? newDateValue.getDate() * 10 : 0) + parseInt(newVal[start - 1], 10);\n this.isDateZero = (newVal[start - 1] == '0');\n if (isNaN(date)) {\n return;\n }\n for (var i = 0; date > maxDate; i++) {\n date = parseInt(date.toString().slice(1), 10);\n }\n if (date >= 1) {\n newDateValue.setDate(date);\n this.isNavigate = date.toString().length === 2;\n this.previousDate = new Date(newDateValue.getFullYear(), newDateValue.getMonth(), newDateValue.getDate());\n if (newDateValue.getMonth() !== this.maskDateValue.getMonth()) {\n return;\n }\n this.isDayPart = true;\n this.dayTypeCount = this.dayTypeCount + 1;\n }\n else {\n this.isDayPart = false;\n this.dayTypeCount = this.isDateZero ? this.dayTypeCount + 1 : this.dayTypeCount;\n }\n break;\n case 'M':\n var month = void 0;\n if (newDateValue.getMonth().toString().length < 2) {\n month = (this.isMonthPart ? (newDateValue.getMonth() + 1) * 10 : 0) + parseInt(newVal[start - 1], 10);\n }\n else {\n month = parseInt(newVal[start - 1], 10);\n }\n this.isMonthZero = (newVal[start - 1] == '0');\n if (!isNaN(month)) {\n while (month > 12) {\n month = parseInt(month.toString().slice(1), 10);\n }\n if (month >= 1) {\n newDateValue.setMonth(month - 1);\n this.isNavigate = month.toString().length === 2;\n if (newDateValue.getMonth() !== month - 1) {\n newDateValue.setDate(1);\n newDateValue.setMonth(month - 1);\n }\n if (this.isDayPart) {\n var previousMaxDate = new Date(this.previousDate.getFullYear(), this.previousDate.getMonth() + 1, 0).getDate();\n var currentMaxDate = new Date(newDateValue.getFullYear(), newDateValue.getMonth() + 1, 0).getDate();\n if (this.previousDate.getDate() == previousMaxDate && currentMaxDate <= previousMaxDate) {\n newDateValue.setDate(currentMaxDate);\n }\n }\n this.previousDate = new Date(newDateValue.getFullYear(), newDateValue.getMonth(), newDateValue.getDate());\n this.isMonthPart = true;\n this.monthTypeCount = this.monthTypeCount + 1;\n }\n else {\n newDateValue.setMonth(0);\n this.isMonthPart = false;\n this.monthTypeCount = this.isMonthZero ? this.monthTypeCount + 1 : this.monthTypeCount;\n }\n }\n else { // let monthString: string[] =
(getValue('months[stand-alone].wide', getDefaultDateObject()));\n var monthString = (this.getCulturedValue('months[stand-alone].wide'));\n var monthValue = Object.keys(monthString);\n this.monthCharacter += newVal[start - 1].toLowerCase();\n while (this.monthCharacter.length > 0) {\n var i = 1;\n for (var _i = 0, monthValue_1 = monthValue; _i < monthValue_1.length; _i++) {\n var months = monthValue_1[_i];\n if (monthString[i].toLowerCase().indexOf(this.monthCharacter) === 0) {\n newDateValue.setMonth(i - 1);\n this.isMonthPart = true;\n this.maskDateValue = newDateValue;\n return;\n }\n i++;\n }\n this.monthCharacter = this.monthCharacter.substring(1, this.monthCharacter.length);\n }\n }\n break;\n case 'y':\n var year = (this.isYearPart && (newDateValue.getFullYear().toString().length < 4 && !this.isShortYear) ? newDateValue.getFullYear() * 10 : 0) + parseInt(newVal[start - 1], 10);\n this.isShortYear = false;\n this.isYearZero = (newVal[start - 1] == '0');\n if (isNaN(year)) {\n return;\n }\n while (year > 9999) {\n year = parseInt(year.toString().slice(1), 10);\n }\n if (year < 1) {\n this.isYearPart = false;\n }\n else {\n newDateValue.setFullYear(year);\n if (year.toString().length === 4) {\n this.isNavigate = true;\n }\n this.previousDate = new Date(newDateValue.getFullYear(), newDateValue.getMonth(), newDateValue.getDate());\n this.isYearPart = true;\n }\n break;\n case 'h':\n this.hour = (this.isHourPart && (newDateValue.getHours() % 12 || 12).toString().length < 2 ? (newDateValue.getHours() % 12 || 12) * 10 : 0) + parseInt(newVal[start - 1], 10);\n if (isNaN(this.hour)) {\n return;\n }\n while (this.hour > 12) {\n this.hour = parseInt(this.hour.toString().slice(1), 10);\n }\n newDateValue.setHours(Math.floor(newDateValue.getHours() / 12) * 12 + (this.hour % 12));\n this.isNavigate = this.hour.toString().length === 2;\n this.isHourPart = true;\n this.hourTypeCount = this.hourTypeCount + 1;\n break;\n case 'H':\n this.hour = (this.isHourPart && newDateValue.getHours().toString().length < 2 ? newDateValue.getHours() * 10 : 0) + parseInt(newVal[start - 1], 10);\n if (isNaN(this.hour)) {\n return;\n }\n for (var i = 0; this.hour > 23; i++) {\n this.hour = parseInt(this.hour.toString().slice(1), 10);\n }\n newDateValue.setHours(this.hour);\n this.isNavigate = this.hour.toString().length === 2;\n this.isHourPart = true;\n this.hourTypeCount = this.hourTypeCount + 1;\n break;\n case 'm':\n var minutes = (this.isMinutePart && newDateValue.getMinutes().toString().length < 2 ? newDateValue.getMinutes() * 10 : 0) + parseInt(newVal[start - 1], 10);\n if (isNaN(minutes)) {\n return;\n }\n for (var i = 0; minutes > 59; i++) {\n minutes = parseInt(minutes.toString().slice(1), 10);\n }\n newDateValue.setMinutes(minutes);\n this.isNavigate = minutes.toString().length === 2;\n this.isMinutePart = true;\n this.minuteTypeCount = this.minuteTypeCount + 1;\n break;\n case 's':\n var seconds = (this.isSecondsPart && newDateValue.getSeconds().toString().length < 2 ? newDateValue.getSeconds() * 10 : 0) + parseInt(newVal[start - 1], 10);\n if (isNaN(seconds)) {\n return;\n }\n for (var i = 0; seconds > 59; i++) {\n seconds = parseInt(seconds.toString().slice(1), 10);\n }\n newDateValue.setSeconds(seconds);\n this.isNavigate = seconds.toString().length === 2;\n this.isSecondsPart = true;\n this.secondTypeCount = this.secondTypeCount + 1;\n break;\n case 'a':\n this.periodCharacter += newVal[start - 1].toLowerCase();\n // let periodString: string[] = (getValue('dayPeriods.format.wide', getDefaultDateObject()));;\n var periodString = (this.getCulturedValue('dayPeriods.format.wide'));\n var periodkeys = Object.keys(periodString);\n //periodString[periodkeys[0]] : periodString[periodkeys[1]] : periodString[periodkeys[0]];\n for (var i = 0; this.periodCharacter.length > 0; i++) {\n if ((periodString[periodkeys[0]].toLowerCase().indexOf(this.periodCharacter) === 0 && newDateValue.getHours() >= 12) || (periodString[periodkeys[1]].toLowerCase().indexOf(this.periodCharacter) === 0 && newDateValue.getHours() < 12)) {\n newDateValue.setHours((newDateValue.getHours() + 12) % 24);\n this.maskDateValue = newDateValue;\n }\n this.periodCharacter = this.periodCharacter.substring(1, this.periodCharacter.length);\n // Object.values()\n }\n break;\n default:\n break;\n }\n this.maskDateValue = newDateValue;\n };\n MaskedDateTime.prototype.formatCheck = function () {\n var proxy = this;\n function formatValueSpecifier(formattext) {\n var isSymbol;\n var result;\n var daysAbbreviated = proxy.getCulturedValue('days[stand-alone].abbreviated');\n var dayKeyAbbreviated = Object.keys(daysAbbreviated);\n var daysWide = (proxy.getCulturedValue('days[stand-alone].wide'));\n var dayKeyWide = Object.keys(daysWide);\n var daysNarrow = (proxy.getCulturedValue('days[stand-alone].narrow'));\n var dayKeyNarrow = Object.keys(daysNarrow);\n var monthAbbreviated = (proxy.getCulturedValue('months[stand-alone].abbreviated'));\n var monthWide = (proxy.getCulturedValue('months[stand-alone].wide'));\n var periodString = (proxy.getCulturedValue('dayPeriods.format.wide'));\n var periodkeys = Object.keys(periodString);\n var milliseconds;\n var dateOptions;\n switch (formattext) {\n case 'ddd':\n case 'dddd':\n case 'd':\n result = proxy.isDayPart ? proxy.maskDateValue.getDate().toString() : proxy.defaultConstant['day'].toString();\n result = proxy.zeroCheck(proxy.isDateZero, proxy.isDayPart, result);\n break;\n case 'dd':\n result = proxy.isDayPart ? proxy.roundOff(proxy.maskDateValue.getDate(), 2) : proxy.defaultConstant['day'].toString();\n result = proxy.zeroCheck(proxy.isDateZero, proxy.isDayPart, result);\n if (proxy.dayTypeCount == 2) {\n proxy.isNavigate = true;\n proxy.dayTypeCount = 0;\n }\n break;\n case 'E':\n case 'EE':\n case 'EEE':\n result = proxy.isDayPart && proxy.isMonthPart && proxy.isYearPart ? daysAbbreviated[dayKeyAbbreviated[proxy.maskDateValue.getDay()]].toString() : proxy.defaultConstant['dayOfTheWeek'].toString();\n break;\n case 'EEEE':\n result = proxy.isDayPart && proxy.isMonthPart && proxy.isYearPart ? daysWide[dayKeyWide[proxy.maskDateValue.getDay()]].toString() : proxy.defaultConstant['dayOfTheWeek'].toString();\n break;\n case 'EEEEE':\n result = proxy.isDayPart && proxy.isMonthPart && proxy.isYearPart ? daysNarrow[dayKeyNarrow[proxy.maskDateValue.getDay()]].toString() : proxy.defaultConstant['dayOfTheWeek'].toString();\n break;\n case 'M':\n result = proxy.isMonthPart ? (proxy.maskDateValue.getMonth() + 1).toString() : proxy.defaultConstant['month'].toString();\n result = proxy.zeroCheck(proxy.isMonthZero, proxy.isMonthPart, result);\n break;\n case 'MM':\n result = proxy.isMonthPart ? proxy.roundOff(proxy.maskDateValue.getMonth() + 1, 2) : proxy.defaultConstant['month'].toString();\n result = proxy.zeroCheck(proxy.isMonthZero, proxy.isMonthPart, result);\n if (proxy.monthTypeCount == 2) {\n proxy.isNavigate = true;\n proxy.monthTypeCount = 0;\n }\n break;\n case 'MMM':\n result = proxy.isMonthPart ? monthAbbreviated[proxy.maskDateValue.getMonth() + 1] : proxy.defaultConstant['month'].toString();\n break;\n case 'MMMM':\n result = proxy.isMonthPart ? monthWide[proxy.maskDateValue.getMonth() + 1] : proxy.defaultConstant['month'].toString();\n break;\n case 'yy':\n result = proxy.isYearPart ? proxy.roundOff(proxy.maskDateValue.getFullYear() % 100, 2) : proxy.defaultConstant['year'].toString();\n result = proxy.zeroCheck(proxy.isYearZero, proxy.isYearPart, result);\n if (proxy.isYearPart) {\n proxy.isNavigate = proxy.isShortYear = (proxy.maskDateValue.getFullYear() % 100).toString().length === 2;\n }\n break;\n case 'y':\n case 'yyyy':\n result = proxy.isYearPart ? proxy.roundOff(proxy.maskDateValue.getFullYear(), 4) : proxy.defaultConstant['year'].toString();\n result = proxy.zeroCheck(proxy.isYearZero, proxy.isYearPart, result);\n break;\n case 'h':\n result = proxy.isHourPart ? (proxy.maskDateValue.getHours() % 12 || 12).toString() : proxy.defaultConstant['hour'].toString();\n break;\n case 'hh':\n result = proxy.isHourPart ? proxy.roundOff(proxy.maskDateValue.getHours() % 12 || 12, 2) : proxy.defaultConstant['hour'].toString();\n if (proxy.hourTypeCount == 2) {\n proxy.isNavigate = true;\n proxy.hourTypeCount = 0;\n }\n break;\n case 'H':\n result = proxy.isHourPart ? proxy.maskDateValue.getHours().toString() : proxy.defaultConstant['hour'].toString();\n break;\n case 'HH':\n result = proxy.isHourPart ? proxy.roundOff(proxy.maskDateValue.getHours(), 2) : proxy.defaultConstant['hour'].toString();\n if (proxy.hourTypeCount == 2) {\n proxy.isNavigate = true;\n proxy.hourTypeCount = 0;\n }\n break;\n case 'm':\n result = proxy.isMinutePart ? proxy.maskDateValue.getMinutes().toString() : proxy.defaultConstant['minute'].toString();\n break;\n case 'mm':\n result = proxy.isMinutePart ? proxy.roundOff(proxy.maskDateValue.getMinutes(), 2) : proxy.defaultConstant['minute'].toString();\n if (proxy.minuteTypeCount == 2) {\n proxy.isNavigate = true;\n proxy.minuteTypeCount = 0;\n }\n break;\n case 's':\n result = proxy.isSecondsPart ? proxy.maskDateValue.getSeconds().toString() : proxy.defaultConstant['second'].toString();\n break;\n case 'ss':\n result = proxy.isSecondsPart ? proxy.roundOff(proxy.maskDateValue.getSeconds(), 2) : proxy.defaultConstant['second'].toString();\n if (proxy.secondTypeCount == 2) {\n proxy.isNavigate = true;\n proxy.secondTypeCount = 0;\n }\n break;\n case 'f':\n result = Math.floor(proxy.maskDateValue.getMilliseconds() / 100).toString();\n break;\n case 'ff':\n milliseconds = proxy.maskDateValue.getMilliseconds();\n if (proxy.maskDateValue.getMilliseconds() > 99) {\n milliseconds = Math.floor(proxy.maskDateValue.getMilliseconds() / 10);\n }\n result = proxy.roundOff(milliseconds, 2);\n break;\n case 'fff':\n result = proxy.roundOff(proxy.maskDateValue.getMilliseconds(), 3);\n break;\n case 'a':\n case 'aa':\n result = proxy.maskDateValue.getHours() < 12 ? periodString[periodkeys[0]] : periodString[periodkeys[1]];\n break;\n case 'z':\n case 'zz':\n case 'zzz':\n case 'zzzz':\n dateOptions = {\n format: formattext,\n type: 'dateTime', skeleton: 'yMd', calendar: proxy.parent.calendarMode\n };\n result = proxy.parent.globalize.formatDate(proxy.maskDateValue, dateOptions);\n break;\n }\n result = result !== undefined ? result : formattext.slice(1, formattext.length - 1);\n if (proxy.isHiddenMask) {\n var hiddenChar = '';\n for (var i = 0; i < result.length; i++) {\n hiddenChar += formattext[0];\n }\n return hiddenChar;\n }\n else {\n return result;\n }\n }\n return formatValueSpecifier;\n };\n MaskedDateTime.prototype.maskInputHandler = function () {\n var start = this.parent.inputElement.selectionStart;\n var selectionChar = this.previousHiddenMask[start - 1];\n var inputValue;\n this.differenceCheck();\n inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());\n this.isHiddenMask = true;\n this.hiddenMask = this.dateformat.replace(this.formatRegex, this.formatCheck());\n this.isDateZero = this.isMonthZero = this.isYearZero = false;\n this.isHiddenMask = false;\n this.previousHiddenMask = this.hiddenMask;\n this.previousValue = inputValue;\n this.parent.inputElement.value = inputValue;\n this.parent.inputElement.selectionStart = start;\n this.validCharacterCheck();\n if ((this.isNavigate || this.isDeletion) && !this.isDeleteKey) {\n var isbackward = this.isNavigate ? false : true;\n this.isNavigate = this.isDeletion = false;\n this.navigateSelection(isbackward);\n }\n this.isDeleteKey = false;\n // this.setSelection(selectionChar);\n // this.navigateSelection(inputValue);\n };\n MaskedDateTime.prototype.navigateSelection = function (isbackward) {\n var start = this.parent.inputElement.selectionStart;\n var end = this.parent.inputElement.selectionEnd;\n var formatIndex = isbackward ? start - 1 : end + 1;\n while (formatIndex < this.hiddenMask.length && formatIndex >= 0) {\n if (this.validCharacters.indexOf(this.hiddenMask[formatIndex]) >= 0) {\n this.setSelection(this.hiddenMask[formatIndex]);\n break;\n }\n formatIndex = formatIndex + (isbackward ? -1 : 1);\n }\n };\n MaskedDateTime.prototype.roundOff = function (val, count) {\n var valueText = val.toString();\n var length = count - valueText.length;\n var result = '';\n for (var i = 0; i < length; i++) {\n result += '0';\n }\n return result + valueText;\n };\n MaskedDateTime.prototype.zeroCheck = function (isZero, isDayPart, resultValue) {\n var result = resultValue;\n if (isZero && !isDayPart) {\n result = '0';\n }\n return result;\n };\n MaskedDateTime.prototype.handleDeletion = function (format, isSegment) {\n switch (format) {\n case 'd':\n this.isDayPart = isSegment;\n break;\n case 'M':\n this.isMonthPart = isSegment;\n if (!isSegment) {\n this.maskDateValue.setMonth(0);\n this.monthCharacter = '';\n }\n break;\n case 'y':\n this.isYearPart = isSegment;\n break;\n case 'H':\n case 'h':\n this.isHourPart = isSegment;\n if (!isSegment) {\n this.periodCharacter = '';\n }\n break;\n case 'm':\n this.isMinutePart = isSegment;\n break;\n case 's':\n this.isSecondsPart = isSegment;\n break;\n default:\n return false;\n }\n return true;\n };\n MaskedDateTime.prototype.dateAlteration = function (isDecrement) {\n var start = this.parent.inputElement.selectionStart;\n var formatText = '';\n if (this.validCharacters.indexOf(this.hiddenMask[start]) !== -1) {\n formatText = this.hiddenMask[start];\n }\n else {\n return;\n }\n var newDateValue = new Date(this.maskDateValue.getFullYear(), this.maskDateValue.getMonth(), this.maskDateValue.getDate(), this.maskDateValue.getHours(), this.maskDateValue.getMinutes(), this.maskDateValue.getSeconds());\n this.previousDate = new Date(this.maskDateValue.getFullYear(), this.maskDateValue.getMonth(), this.maskDateValue.getDate(), this.maskDateValue.getHours(), this.maskDateValue.getMinutes(), this.maskDateValue.getSeconds());\n var incrementValue = isDecrement ? -1 : 1;\n switch (formatText) {\n case 'd':\n newDateValue.setDate(newDateValue.getDate() + incrementValue);\n break;\n case 'M':\n var newMonth = newDateValue.getMonth() + incrementValue;\n newDateValue.setDate(1);\n newDateValue.setMonth(newMonth);\n if (this.isDayPart) {\n var previousMaxDate = new Date(this.previousDate.getFullYear(), this.previousDate.getMonth() + 1, 0).getDate();\n var currentMaxDate = new Date(newDateValue.getFullYear(), newDateValue.getMonth() + 1, 0).getDate();\n if (this.previousDate.getDate() == previousMaxDate && currentMaxDate <= previousMaxDate) {\n newDateValue.setDate(currentMaxDate);\n }\n else {\n newDateValue.setDate(this.previousDate.getDate());\n }\n }\n else {\n newDateValue.setDate(this.previousDate.getDate());\n }\n this.previousDate = new Date(newDateValue.getFullYear(), newDateValue.getMonth(), newDateValue.getDate());\n break;\n case 'y':\n newDateValue.setFullYear(newDateValue.getFullYear() + incrementValue);\n break;\n case 'H':\n case 'h':\n newDateValue.setHours(newDateValue.getHours() + incrementValue);\n break;\n case 'm':\n newDateValue.setMinutes(newDateValue.getMinutes() + incrementValue);\n break;\n case 's':\n newDateValue.setSeconds(newDateValue.getSeconds() + incrementValue);\n break;\n case 'a':\n newDateValue.setHours((newDateValue.getHours() + 12) % 24);\n break;\n default:\n break;\n }\n this.maskDateValue = newDateValue.getFullYear() > 0 ? newDateValue : this.maskDateValue;\n if (this.validCharacters.indexOf(this.hiddenMask[start]) !== -1) {\n this.handleDeletion(this.hiddenMask[start], true);\n }\n };\n MaskedDateTime.prototype.getCulturedValue = function (format) {\n var locale = this.parent.locale;\n var result;\n if (locale === 'en' || locale === 'en-US') {\n result = getValue(format, getDefaultDateObject());\n }\n else {\n result = getValue('main.' + '' + locale + ('.dates.calendars.gregorian.' + format), cldrData);\n }\n return result;\n };\n MaskedDateTime.prototype.getCulturedFormat = function () {\n var formatString = (this.getCulturedValue('dateTimeFormats[availableFormats].yMd')).toString();\n if (this.parent.moduleName == 'datepicker') {\n formatString = (this.getCulturedValue('dateTimeFormats[availableFormats].yMd')).toString();\n if (this.parent.format && this.parent.formatString) {\n formatString = this.parent.formatString;\n }\n }\n if (this.parent.moduleName == 'datetimepicker') {\n formatString = (this.getCulturedValue('dateTimeFormats[availableFormats].yMd')).toString();\n if (this.parent.dateTimeFormat) {\n formatString = this.parent.dateTimeFormat;\n }\n }\n if (this.parent.moduleName == 'timepicker') {\n formatString = this.parent.cldrTimeFormat();\n }\n return formatString;\n };\n MaskedDateTime.prototype.clearHandler = function () {\n this.isDayPart = this.isMonthPart = this.isYearPart = this.isHourPart = this.isMinutePart = this.isSecondsPart = false;\n this.updateValue();\n };\n MaskedDateTime.prototype.updateValue = function () {\n this.monthCharacter = this.periodCharacter = '';\n var inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());\n this.isHiddenMask = true;\n this.hiddenMask = this.dateformat.replace(this.formatRegex, this.formatCheck());\n this.isHiddenMask = false;\n this.previousHiddenMask = this.hiddenMask;\n this.previousValue = inputValue;\n this.parent.updateInputValue(inputValue);\n //this.parent.inputElement.value = inputValue;\n };\n MaskedDateTime.prototype.destroy = function () {\n this.removeEventListener();\n };\n return MaskedDateTime;\n}());\nexport { MaskedDateTime };\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})();\nimport { merge, extend, isNullOrUndefined, setValue, getValue } from '@syncfusion/ej2-base';\nimport { DataUtil } from './util';\nimport { Query, Predicate } from './query';\nvar consts = { GroupGuid: '{271bbba0-1ee7}' };\n/**\n * Adaptors are specific data source type aware interfaces that are used by DataManager to communicate with DataSource.\n * This is the base adaptor class that other adaptors can extend.\n * @hidden\n */\nvar Adaptor = /** @class */ (function () {\n /**\n * Constructor for Adaptor class\n * @param {DataOptions} ds?\n * @hidden\n * @returns aggregates\n */\n function Adaptor(ds) {\n // common options for all the adaptors \n this.options = {\n from: 'table',\n requestType: 'json',\n sortBy: 'sorted',\n select: 'select',\n skip: 'skip',\n group: 'group',\n take: 'take',\n search: 'search',\n count: 'requiresCounts',\n where: 'where',\n aggregates: 'aggregates',\n expand: 'expand'\n };\n /**\n * Specifies the type of adaptor.\n * @default Adaptor\n */\n this.type = Adaptor;\n this.dataSource = ds;\n this.pvt = {};\n }\n /**\n * Returns the data from the query processing.\n * @param {Object} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @returns Object\n */\n Adaptor.prototype.processResponse = function (data, ds, query, xhr) {\n return data;\n };\n return Adaptor;\n}());\nexport { Adaptor };\n/**\n * JsonAdaptor is used to process JSON data. It contains methods to process the given JSON data based on the queries.\n * @hidden\n */\nvar JsonAdaptor = /** @class */ (function (_super) {\n __extends(JsonAdaptor, _super);\n function JsonAdaptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Process the JSON data based on the provided queries.\n * @param {DataManager} dataManager\n * @param {Query} query\n * @returns Object\n */\n JsonAdaptor.prototype.processQuery = function (dataManager, query) {\n var result = dataManager.dataSource.json.slice(0);\n var count = result.length;\n var countFlg = true;\n var ret;\n var key;\n var lazyLoad = {};\n var keyCount = 0;\n var group = [];\n var page;\n for (var i = 0; i < query.lazyLoad.length; i++) {\n keyCount++;\n lazyLoad[query.lazyLoad[i].key] = query.lazyLoad[i].value;\n }\n var agg = {};\n for (var i = 0; i < query.queries.length; i++) {\n key = query.queries[i];\n if ((key.fn === 'onPage' || key.fn === 'onGroup') && query.lazyLoad.length) {\n if (key.fn === 'onGroup') {\n group.push(key.e);\n }\n if (key.fn === 'onPage') {\n page = key.e;\n }\n continue;\n }\n ret = this[key.fn].call(this, result, key.e, query);\n if (key.fn === 'onAggregates') {\n agg[key.e.field + ' - ' + key.e.type] = ret;\n }\n else {\n result = ret !== undefined ? ret : result;\n }\n if (key.fn === 'onPage' || key.fn === 'onSkip' || key.fn === 'onTake' || key.fn === 'onRange') {\n countFlg = false;\n }\n if (countFlg) {\n count = result.length;\n }\n }\n if (keyCount) {\n var args = {\n query: query, lazyLoad: lazyLoad, result: result, group: group, page: page\n };\n var lazyLoadData = this.lazyLoadGroup(args);\n result = lazyLoadData.result;\n count = lazyLoadData.count;\n }\n if (query.isCountRequired) {\n result = {\n result: result,\n count: count,\n aggregates: agg\n };\n }\n return result;\n };\n /**\n * Perform lazy load grouping in JSON array based on the given query and lazy load details.\n * @param {LazyLoadGroupArgs} args\n */\n JsonAdaptor.prototype.lazyLoadGroup = function (args) {\n var count = 0;\n var agg = this.getAggregate(args.query);\n var result = args.result;\n if (!isNullOrUndefined(args.lazyLoad.onDemandGroupInfo)) {\n var req = args.lazyLoad.onDemandGroupInfo;\n for (var i = req.where.length - 1; i >= 0; i--) {\n result = this.onWhere(result, req.where[i]);\n }\n if (args.group.length !== req.level) {\n var field = args.group[req.level].fieldName;\n result = DataUtil.group(result, field, agg, null, null, args.group[0].comparer, true);\n }\n count = result.length;\n var data = result;\n result = result.slice(req.skip);\n result = result.slice(0, req.take);\n if (args.group.length !== req.level) {\n this.formGroupResult(result, data);\n }\n }\n else {\n var field = args.group[0].fieldName;\n result = DataUtil.group(result, field, agg, null, null, args.group[0].comparer, true);\n count = result.length;\n var data = result;\n if (args.page) {\n result = this.onPage(result, args.page, args.query);\n }\n this.formGroupResult(result, data);\n }\n return { result: result, count: count };\n };\n JsonAdaptor.prototype.formGroupResult = function (result, data) {\n if (result.length && data.length) {\n var uid = 'GroupGuid';\n var childLevel = 'childLevels';\n var level = 'level';\n var records = 'records';\n result[uid] = data[uid];\n result[childLevel] = data[childLevel];\n result[level] = data[level];\n result[records] = data[records];\n }\n return result;\n };\n /**\n * Separate the aggregate query from the given queries\n * @param {Query} query\n */\n JsonAdaptor.prototype.getAggregate = function (query) {\n var aggQuery = Query.filterQueries(query.queries, 'onAggregates');\n var agg = [];\n if (aggQuery.length) {\n var tmp = void 0;\n for (var i = 0; i < aggQuery.length; i++) {\n tmp = aggQuery[i].e;\n agg.push({ type: tmp.type, field: DataUtil.getValue(tmp.field, query) });\n }\n }\n return agg;\n };\n /**\n * Performs batch update in the JSON array which add, remove and update records.\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {RemoteArgs} e\n */\n JsonAdaptor.prototype.batchRequest = function (dm, changes, e) {\n var i;\n var deletedRecordsLen = changes.deletedRecords.length;\n for (i = 0; i < changes.addedRecords.length; i++) {\n this.insert(dm, changes.addedRecords[i]);\n }\n for (i = 0; i < changes.changedRecords.length; i++) {\n this.update(dm, e.key, changes.changedRecords[i]);\n }\n for (i = 0; i < deletedRecordsLen; i++) {\n this.remove(dm, e.key, changes.deletedRecords[i]);\n }\n return changes;\n };\n /**\n * Performs filter operation with the given data and where query.\n * @param {Object[]} ds\n * @param {{validate:Function}} e\n */\n JsonAdaptor.prototype.onWhere = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.filter(function (obj) {\n if (e) {\n return e.validate(obj);\n }\n });\n };\n /**\n * Returns aggregate function based on the aggregate type.\n * @param {Object[]} ds\n * @param {{field:string} e\n * @param {string}} type\n */\n JsonAdaptor.prototype.onAggregates = function (ds, e) {\n var fn = DataUtil.aggregates[e.type];\n if (!ds || !fn || ds.length === 0) {\n return null;\n }\n return fn(ds, e.field);\n };\n /**\n * Performs search operation based on the given query.\n * @param {Object[]} ds\n * @param {QueryOptions} e\n */\n JsonAdaptor.prototype.onSearch = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n if (e.fieldNames.length === 0) {\n DataUtil.getFieldList(ds[0], e.fieldNames);\n }\n return ds.filter(function (obj) {\n for (var j = 0; j < e.fieldNames.length; j++) {\n if (e.comparer.call(obj, DataUtil.getObject(e.fieldNames[j], obj), e.searchKey, e.ignoreCase, e.ignoreAccent)) {\n return true;\n }\n }\n return false;\n });\n };\n /**\n * Sort the data with given direction and field.\n * @param {Object[]} ds\n * @param {{comparer:(a:Object} e\n * @param {Object} b\n */\n JsonAdaptor.prototype.onSortBy = function (ds, e, query) {\n if (!ds || !ds.length) {\n return ds;\n }\n var fnCompare;\n var field = DataUtil.getValue(e.fieldName, query);\n if (!field) {\n return ds.sort(e.comparer);\n }\n if (field instanceof Array) {\n field = field.slice(0);\n for (var i = field.length - 1; i >= 0; i--) {\n if (!field[i]) {\n continue;\n }\n fnCompare = e.comparer;\n if (DataUtil.endsWith(field[i], ' desc')) {\n fnCompare = DataUtil.fnSort('descending');\n field[i] = field[i].replace(' desc', '');\n }\n ds = DataUtil.sort(ds, field[i], fnCompare);\n }\n return ds;\n }\n return DataUtil.sort(ds, field, e.comparer);\n };\n /**\n * Group the data based on the given query.\n * @param {Object[]} ds\n * @param {QueryOptions} e\n * @param {Query} query\n */\n JsonAdaptor.prototype.onGroup = function (ds, e, query) {\n if (!ds || !ds.length) {\n return ds;\n }\n var agg = this.getAggregate(query);\n return DataUtil.group(ds, DataUtil.getValue(e.fieldName, query), agg, null, null, e.comparer);\n };\n /**\n * Retrieves records based on the given page index and size.\n * @param {Object[]} ds\n * @param {{pageSize:number} e\n * @param {number}} pageIndex\n * @param {Query} query\n */\n JsonAdaptor.prototype.onPage = function (ds, e, query) {\n var size = DataUtil.getValue(e.pageSize, query);\n var start = (DataUtil.getValue(e.pageIndex, query) - 1) * size;\n var end = start + size;\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.slice(start, end);\n };\n /**\n * Retrieves records based on the given start and end index from query.\n * @param {Object[]} ds\n * @param {{start:number} e\n * @param {number}} end\n */\n JsonAdaptor.prototype.onRange = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.slice(DataUtil.getValue(e.start), DataUtil.getValue(e.end));\n };\n /**\n * Picks the given count of records from the top of the datasource.\n * @param {Object[]} ds\n * @param {{nos:number}} e\n */\n JsonAdaptor.prototype.onTake = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.slice(0, DataUtil.getValue(e.nos));\n };\n /**\n * Skips the given count of records from the data source.\n * @param {Object[]} ds\n * @param {{nos:number}} e\n */\n JsonAdaptor.prototype.onSkip = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.slice(DataUtil.getValue(e.nos));\n };\n /**\n * Selects specified columns from the data source.\n * @param {Object[]} ds\n * @param {{fieldNames:string}} e\n */\n JsonAdaptor.prototype.onSelect = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return DataUtil.select(ds, DataUtil.getValue(e.fieldNames));\n };\n /**\n * Inserts new record in the table.\n * @param {DataManager} dm\n * @param {Object} data\n * @param {number} position\n */\n JsonAdaptor.prototype.insert = function (dm, data, tableName, query, position) {\n if (isNullOrUndefined(position)) {\n return dm.dataSource.json.push(data);\n }\n else {\n return dm.dataSource.json.splice(position, 0, data);\n }\n };\n /**\n * Remove the data from the dataSource based on the key field value.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n * @returns null\n */\n JsonAdaptor.prototype.remove = function (dm, keyField, value, tableName) {\n var ds = dm.dataSource.json;\n var i;\n if (typeof value === 'object' && !(value instanceof Date)) {\n value = DataUtil.getObject(keyField, value);\n }\n for (i = 0; i < ds.length; i++) {\n if (DataUtil.getObject(keyField, ds[i]) === value) {\n break;\n }\n }\n return i !== ds.length ? ds.splice(i, 1) : null;\n };\n /**\n * Updates existing record and saves the changes to the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n * @returns null\n */\n JsonAdaptor.prototype.update = function (dm, keyField, value, tableName) {\n var ds = dm.dataSource.json;\n var i;\n var key;\n if (!isNullOrUndefined(keyField)) {\n key = getValue(keyField, value);\n }\n for (i = 0; i < ds.length; i++) {\n if (!isNullOrUndefined(keyField) && (getValue(keyField, ds[i])) === key) {\n break;\n }\n }\n return i < ds.length ? merge(ds[i], value) : null;\n };\n return JsonAdaptor;\n}(Adaptor));\nexport { JsonAdaptor };\n/**\n * URL Adaptor of DataManager can be used when you are required to use remote service to retrieve data.\n * It interacts with server-side for all DataManager Queries and CRUD operations.\n * @hidden\n */\nvar UrlAdaptor = /** @class */ (function (_super) {\n __extends(UrlAdaptor, _super);\n function UrlAdaptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Process the query to generate request body.\n * @param {DataManager} dm\n * @param {Query} query\n * @param {Object[]} hierarchyFilters?\n * @returns p\n */\n // tslint:disable-next-line:max-func-body-length\n UrlAdaptor.prototype.processQuery = function (dm, query, hierarchyFilters) {\n var queries = this.getQueryRequest(query);\n var singles = Query.filterQueryLists(query.queries, ['onSelect', 'onPage', 'onSkip', 'onTake', 'onRange']);\n var params = query.params;\n var url = dm.dataSource.url;\n var temp;\n var skip;\n var take = null;\n var options = this.options;\n var request = { sorts: [], groups: [], filters: [], searches: [], aggregates: [] };\n // calc Paging & Range\n if ('onPage' in singles) {\n temp = singles.onPage;\n skip = DataUtil.getValue(temp.pageIndex, query);\n take = DataUtil.getValue(temp.pageSize, query);\n skip = (skip - 1) * take;\n }\n else if ('onRange' in singles) {\n temp = singles.onRange;\n skip = temp.start;\n take = temp.end - temp.start;\n }\n // Sorting\n for (var i = 0; i < queries.sorts.length; i++) {\n temp = DataUtil.getValue(queries.sorts[i].e.fieldName, query);\n request.sorts.push(DataUtil.callAdaptorFunction(this, 'onEachSort', { name: temp, direction: queries.sorts[i].e.direction }, query));\n }\n // hierarchy\n if (hierarchyFilters) {\n temp = this.getFiltersFrom(hierarchyFilters, query);\n if (temp) {\n request.filters.push(DataUtil.callAdaptorFunction(this, 'onEachWhere', temp.toJson(), query));\n }\n }\n // Filters\n for (var i = 0; i < queries.filters.length; i++) {\n var res = DataUtil.callAdaptorFunction(this, 'onEachWhere', queries.filters[i].e.toJson(), query);\n if ((this.getModuleName &&\n this.getModuleName() === 'ODataV4Adaptor') &&\n !isNullOrUndefined(queries.filters[i].e.key) && queries.filters.length > 1) {\n res = \"(\" + res + \")\";\n }\n request.filters.push(res);\n var keys_3 = typeof request.filters[i] === 'object' ? Object.keys(request.filters[i]) : [];\n for (var _i = 0, keys_1 = keys_3; _i < keys_1.length; _i++) {\n var prop = keys_1[_i];\n if (DataUtil.isNull((request)[prop])) {\n delete request[prop];\n }\n }\n }\n // Searches\n for (var i = 0; i < queries.searches.length; i++) {\n temp = queries.searches[i].e;\n request.searches.push(DataUtil.callAdaptorFunction(this, 'onEachSearch', {\n fields: temp.fieldNames,\n operator: temp.operator,\n key: temp.searchKey,\n ignoreCase: temp.ignoreCase\n }, query));\n }\n // Grouping\n for (var i = 0; i < queries.groups.length; i++) {\n request.groups.push(DataUtil.getValue(queries.groups[i].e.fieldName, query));\n }\n // aggregates\n for (var i = 0; i < queries.aggregates.length; i++) {\n temp = queries.aggregates[i].e;\n request.aggregates.push({ type: temp.type, field: DataUtil.getValue(temp.field, query) });\n }\n var req = {};\n this.getRequestQuery(options, query, singles, request, req);\n // Params\n DataUtil.callAdaptorFunction(this, 'addParams', { dm: dm, query: query, params: params, reqParams: req });\n if (query.lazyLoad.length) {\n for (var i = 0; i < query.lazyLoad.length; i++) {\n req[query.lazyLoad[i].key] = query.lazyLoad[i].value;\n }\n }\n // cleanup\n var keys = Object.keys(req);\n for (var _a = 0, keys_2 = keys; _a < keys_2.length; _a++) {\n var prop = keys_2[_a];\n if (DataUtil.isNull(req[prop]) || req[prop] === '' || req[prop].length === 0) {\n delete req[prop];\n }\n }\n if (!(options.skip in req && options.take in req) && take !== null) {\n req[options.skip] = DataUtil.callAdaptorFunction(this, 'onSkip', skip, query);\n req[options.take] = DataUtil.callAdaptorFunction(this, 'onTake', take, query);\n }\n var p = this.pvt;\n this.pvt = {};\n if (this.options.requestType === 'json') {\n return {\n data: JSON.stringify(req, DataUtil.parse.jsonDateReplacer),\n url: url,\n pvtData: p,\n type: 'POST',\n contentType: 'application/json; charset=utf-8'\n };\n }\n temp = this.convertToQueryString(req, query, dm);\n temp = (dm.dataSource.url.indexOf('?') !== -1 ? '&' : '/') + temp;\n return {\n type: 'GET', url: temp.length ? url.replace(/\\/*$/, temp) : url, pvtData: p\n };\n };\n UrlAdaptor.prototype.getRequestQuery = function (options, query, singles, request, request1) {\n var param = 'param';\n var req = request1;\n req[options.from] = query.fromTable;\n if (options.apply && query.distincts.length) {\n req[options.apply] = 'onDistinct' in this ? DataUtil.callAdaptorFunction(this, 'onDistinct', query.distincts) : '';\n }\n if (!query.distincts.length && options.expand) {\n req[options.expand] = 'onExpand' in this && 'onSelect' in singles ?\n DataUtil.callAdaptorFunction(this, 'onExpand', { selects: DataUtil.getValue(singles.onSelect.fieldNames, query), expands: query.expands }, query) : query.expands;\n }\n req[options.select] = 'onSelect' in singles && !query.distincts.length ?\n DataUtil.callAdaptorFunction(this, 'onSelect', DataUtil.getValue(singles.onSelect.fieldNames, query), query) : '';\n req[options.count] = query.isCountRequired ? DataUtil.callAdaptorFunction(this, 'onCount', query.isCountRequired, query) : '';\n req[options.search] = request.searches.length ? DataUtil.callAdaptorFunction(this, 'onSearch', request.searches, query) : '';\n req[options.skip] = 'onSkip' in singles ?\n DataUtil.callAdaptorFunction(this, 'onSkip', DataUtil.getValue(singles.onSkip.nos, query), query) : '';\n req[options.take] = 'onTake' in singles ?\n DataUtil.callAdaptorFunction(this, 'onTake', DataUtil.getValue(singles.onTake.nos, query), query) : '';\n req[options.where] = request.filters.length || request.searches.length ?\n DataUtil.callAdaptorFunction(this, 'onWhere', request.filters, query) : '';\n req[options.sortBy] = request.sorts.length ? DataUtil.callAdaptorFunction(this, 'onSortBy', request.sorts, query) : '';\n req[options.group] = request.groups.length ? DataUtil.callAdaptorFunction(this, 'onGroup', request.groups, query) : '';\n req[options.aggregates] = request.aggregates.length ?\n DataUtil.callAdaptorFunction(this, 'onAggregates', request.aggregates, query) : '';\n req[param] = [];\n };\n /**\n * Convert the object from processQuery to string which can be added query string.\n * @param {Object} req\n * @param {Query} query\n * @param {DataManager} dm\n */\n UrlAdaptor.prototype.convertToQueryString = function (request, query, dm) {\n return '';\n // this needs to be overridden\n };\n /**\n * Return the data from the data manager processing.\n * @param {DataResult} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @param {Object} request?\n * @param {CrudOptions} changes?\n */\n UrlAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n if (xhr && xhr.getResponseHeader('Content-Type') &&\n xhr.getResponseHeader('Content-Type').indexOf('application/json') !== -1) {\n var handleTimeZone = DataUtil.timeZoneHandling;\n if (ds && !ds.timeZoneHandling) {\n DataUtil.timeZoneHandling = false;\n }\n data = DataUtil.parse.parseJson(data);\n DataUtil.timeZoneHandling = handleTimeZone;\n }\n var requests = request;\n var pvt = requests.pvtData || {};\n var groupDs = data ? data.groupDs : [];\n if (xhr && xhr.getResponseHeader('Content-Type') &&\n xhr.getResponseHeader('Content-Type').indexOf('xml') !== -1) {\n return (query.isCountRequired ? { result: [], count: 0 } : []);\n }\n var d = JSON.parse(requests.data);\n if (d && d.action === 'batch' && data && data.addedRecords) {\n changes.addedRecords = data.addedRecords;\n return changes;\n }\n if (data && data.d) {\n data = data.d;\n }\n var args = {};\n if (data && 'count' in data) {\n args.count = data.count;\n }\n args.result = data && data.result ? data.result : data;\n var isExpand = false;\n if (Array.isArray(data.result) && data.result.length) {\n var key = 'key';\n var val = 'value';\n var level = 'level';\n if (!isNullOrUndefined(data.result[0][key])) {\n args.result = this.formRemoteGroupedData(args.result, 1, pvt.groups.length - 1);\n }\n if (query && query.lazyLoad.length && pvt.groups.length) {\n for (var i = 0; i < query.lazyLoad.length; i++) {\n if (query.lazyLoad[i][key] === 'onDemandGroupInfo') {\n var value = query.lazyLoad[i][val][level];\n if (pvt.groups.length === value) {\n isExpand = true;\n }\n }\n }\n }\n }\n if (!isExpand) {\n this.getAggregateResult(pvt, data, args, groupDs, query);\n }\n return DataUtil.isNull(args.count) ? args.result : { result: args.result, count: args.count, aggregates: args.aggregates };\n };\n UrlAdaptor.prototype.formRemoteGroupedData = function (data, level, childLevel) {\n for (var i = 0; i < data.length; i++) {\n if (data[i].items.length && Object.keys(data[i].items[0]).indexOf('key') > -1) {\n this.formRemoteGroupedData(data[i].items, level + 1, childLevel - 1);\n }\n }\n var uid = 'GroupGuid';\n var childLvl = 'childLevels';\n var lvl = 'level';\n var records = 'records';\n data[uid] = consts[uid];\n data[lvl] = level;\n data[childLvl] = childLevel;\n data[records] = data[0].items.length ? this.getGroupedRecords(data, !isNullOrUndefined(data[0].items[records])) : [];\n return data;\n };\n UrlAdaptor.prototype.getGroupedRecords = function (data, hasRecords) {\n var childGroupedRecords = [];\n var records = 'records';\n for (var i = 0; i < data.length; i++) {\n if (!hasRecords) {\n for (var j = 0; j < data[i].items.length; j++) {\n childGroupedRecords.push(data[i].items[j]);\n }\n }\n else {\n childGroupedRecords = childGroupedRecords.concat(data[i].items[records]);\n }\n }\n return childGroupedRecords;\n };\n /**\n * Add the group query to the adaptor`s option.\n * @param {Object[]} e\n * @returns void\n */\n UrlAdaptor.prototype.onGroup = function (e) {\n this.pvt.groups = e;\n return e;\n };\n /**\n * Add the aggregate query to the adaptor`s option.\n * @param {Aggregates[]} e\n * @returns void\n */\n UrlAdaptor.prototype.onAggregates = function (e) {\n this.pvt.aggregates = e;\n };\n /**\n * Prepare the request body based on the newly added, removed and updated records.\n * The result is used by the batch request.\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {Object} e\n */\n UrlAdaptor.prototype.batchRequest = function (dm, changes, e, query, original) {\n var url;\n var key;\n return {\n type: 'POST',\n url: dm.dataSource.batchUrl || dm.dataSource.crudUrl || dm.dataSource.removeUrl || dm.dataSource.url,\n contentType: 'application/json; charset=utf-8',\n dataType: 'json',\n data: JSON.stringify(extend({}, {\n changed: changes.changedRecords,\n added: changes.addedRecords,\n deleted: changes.deletedRecords,\n action: 'batch',\n table: e[url],\n key: e[key]\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n /**\n * Method will trigger before send the request to server side.\n * Used to set the custom header or modify the request options.\n * @param {DataManager} dm\n * @param {XMLHttpRequest} request\n * @returns void\n */\n UrlAdaptor.prototype.beforeSend = function (dm, request) {\n // need to extend this method\n };\n /**\n * Prepare and returns request body which is used to insert a new record in the table.\n * @param {DataManager} dm\n * @param {Object} data\n * @param {string} tableName\n */\n UrlAdaptor.prototype.insert = function (dm, data, tableName, query) {\n return {\n url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify(extend({}, {\n value: data,\n table: tableName,\n action: 'insert'\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n /**\n * Prepare and return request body which is used to remove record from the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {number|string} value\n * @param {string} tableName\n */\n UrlAdaptor.prototype.remove = function (dm, keyField, value, tableName, query) {\n return {\n type: 'POST',\n url: dm.dataSource.removeUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify(extend({}, {\n key: value,\n keyColumn: keyField,\n table: tableName,\n action: 'remove'\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n /**\n * Prepare and return request body which is used to update record.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName\n */\n UrlAdaptor.prototype.update = function (dm, keyField, value, tableName, query) {\n return {\n type: 'POST',\n url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify(extend({}, {\n value: value,\n action: 'update',\n keyColumn: keyField,\n key: DataUtil.getObject(keyField, value),\n table: tableName\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n /**\n * To generate the predicate based on the filtered query.\n * @param {Object[]|string[]|number[]} data\n * @param {Query} query\n * @hidden\n */\n UrlAdaptor.prototype.getFiltersFrom = function (data, query) {\n var key = query.fKey;\n var value;\n var prop = key;\n var pKey = query.key;\n var predicats = [];\n if (typeof data[0] !== 'object') {\n prop = null;\n }\n for (var i = 0; i < data.length; i++) {\n if (typeof data[0] === 'object') {\n value = DataUtil.getObject(pKey || prop, data[i]);\n }\n else {\n value = data[i];\n }\n predicats.push(new Predicate(key, 'equal', value));\n }\n return Predicate.or(predicats);\n };\n UrlAdaptor.prototype.getAggregateResult = function (pvt, data, args, groupDs, query) {\n var pData = data;\n if (data && data.result) {\n pData = data.result;\n }\n if (pvt && pvt.aggregates && pvt.aggregates.length) {\n var agg = pvt.aggregates;\n var fn = void 0;\n var aggregateData = pData;\n var res = {};\n if (data.aggregate) {\n aggregateData = data.aggregate;\n }\n for (var i = 0; i < agg.length; i++) {\n fn = DataUtil.aggregates[agg[i].type];\n if (fn) {\n res[agg[i].field + ' - ' + agg[i].type] = fn(aggregateData, agg[i].field);\n }\n }\n args.aggregates = res;\n }\n var key = 'key';\n var isServerGrouping = Array.isArray(data.result) && data.result.length && !isNullOrUndefined(data.result[0][key]);\n if (pvt && pvt.groups && pvt.groups.length && !isServerGrouping) {\n var groups = pvt.groups;\n for (var i = 0; i < groups.length; i++) {\n var level = null;\n if (!isNullOrUndefined(groupDs)) {\n groupDs = DataUtil.group(groupDs, groups[i]);\n }\n var groupQuery = Query.filterQueries(query.queries, 'onGroup')[i].e;\n pData = DataUtil.group(pData, groups[i], pvt.aggregates, level, groupDs, groupQuery.comparer);\n }\n args.result = pData;\n }\n return args;\n };\n UrlAdaptor.prototype.getQueryRequest = function (query) {\n var req = { sorts: [], groups: [], filters: [], searches: [], aggregates: [] };\n req.sorts = Query.filterQueries(query.queries, 'onSortBy');\n req.groups = Query.filterQueries(query.queries, 'onGroup');\n req.filters = Query.filterQueries(query.queries, 'onWhere');\n req.searches = Query.filterQueries(query.queries, 'onSearch');\n req.aggregates = Query.filterQueries(query.queries, 'onAggregates');\n return req;\n };\n UrlAdaptor.prototype.addParams = function (options) {\n var req = options.reqParams;\n if (options.params.length) {\n req.params = {};\n }\n for (var _i = 0, _a = options.params; _i < _a.length; _i++) {\n var tmp = _a[_i];\n if (req[tmp.key]) {\n throw new Error('Query() - addParams: Custom Param is conflicting other request arguments');\n }\n req[tmp.key] = tmp.value;\n if (tmp.fn) {\n req[tmp.key] = tmp.fn.call(options.query, tmp.key, options.query, options.dm);\n }\n req.params[tmp.key] = req[tmp.key];\n }\n };\n return UrlAdaptor;\n}(Adaptor));\nexport { UrlAdaptor };\n/**\n * OData Adaptor that is extended from URL Adaptor, is used for consuming data through OData Service.\n * @hidden\n */\nvar ODataAdaptor = /** @class */ (function (_super) {\n __extends(ODataAdaptor, _super);\n function ODataAdaptor(props) {\n var _this = _super.call(this) || this;\n // options replaced the default adaptor options\n _this.options = extend({}, _this.options, {\n requestType: 'get',\n accept: 'application/json;odata=light;q=1,application/json;odata=verbose;q=0.5',\n multipartAccept: 'multipart/mixed',\n sortBy: '$orderby',\n select: '$select',\n skip: '$skip',\n take: '$top',\n count: '$inlinecount',\n where: '$filter',\n expand: '$expand',\n batch: '$batch',\n changeSet: '--changeset_',\n batchPre: 'batch_',\n contentId: 'Content-Id: ',\n batchContent: 'Content-Type: multipart/mixed; boundary=',\n changeSetContent: 'Content-Type: application/http\\nContent-Transfer-Encoding: binary ',\n batchChangeSetContentType: 'Content-Type: application/json; charset=utf-8 ',\n updateType: 'PUT'\n });\n extend(_this.options, props || {});\n return _this;\n }\n ODataAdaptor.prototype.getModuleName = function () {\n return 'ODataAdaptor';\n };\n /**\n * Generate request string based on the filter criteria from query.\n * @param {Predicate} pred\n * @param {boolean} requiresCast?\n */\n ODataAdaptor.prototype.onPredicate = function (predicate, query, requiresCast) {\n var returnValue = '';\n var operator;\n var guid;\n var val = predicate.value;\n var type = typeof val;\n var field = predicate.field ? ODataAdaptor.getField(predicate.field) : null;\n if (val instanceof Date) {\n val = 'datetime\\'' + DataUtil.parse.replacer(val) + '\\'';\n }\n if (type === 'string') {\n val = val.replace(/'/g, \"''\");\n if (predicate.ignoreCase) {\n val = val.toLowerCase();\n }\n val = encodeURIComponent(val);\n val = '\\'' + val + '\\'';\n if (requiresCast) {\n field = 'cast(' + field + ', \\'Edm.String\\')';\n }\n if (DataUtil.parse.isGuid(val)) {\n guid = 'guid';\n }\n if (predicate.ignoreCase) {\n if (!guid) {\n field = 'tolower(' + field + ')';\n }\n val = val.toLowerCase();\n }\n }\n operator = DataUtil.odBiOperator[predicate.operator];\n if (operator) {\n returnValue += field;\n returnValue += operator;\n if (guid) {\n returnValue += guid;\n }\n return returnValue + val;\n }\n if (!isNullOrUndefined(this.getModuleName) && this.getModuleName() === 'ODataV4Adaptor') {\n operator = DataUtil.odv4UniOperator[predicate.operator];\n }\n else {\n operator = DataUtil.odUniOperator[predicate.operator];\n }\n if (operator === 'substringof') {\n var temp = val;\n val = field;\n field = temp;\n }\n returnValue += operator + '(';\n returnValue += field + ',';\n if (guid) {\n returnValue += guid;\n }\n returnValue += val + ')';\n return returnValue;\n };\n ODataAdaptor.prototype.addParams = function (options) {\n _super.prototype.addParams.call(this, options);\n delete options.reqParams.params;\n };\n /**\n * Generate request string based on the multiple filter criteria from query.\n * @param {Predicate} pred\n * @param {boolean} requiresCast?\n */\n ODataAdaptor.prototype.onComplexPredicate = function (predicate, query, requiresCast) {\n var res = [];\n for (var i = 0; i < predicate.predicates.length; i++) {\n res.push('(' + this.onEachWhere(predicate.predicates[i], query, requiresCast) + ')');\n }\n return res.join(' ' + predicate.condition + ' ');\n };\n /**\n * Generate query string based on the multiple filter criteria from query.\n * @param {Predicate} filter\n * @param {boolean} requiresCast?\n */\n ODataAdaptor.prototype.onEachWhere = function (filter, query, requiresCast) {\n return filter.isComplex ? this.onComplexPredicate(filter, query, requiresCast) : this.onPredicate(filter, query, requiresCast);\n };\n /**\n * Generate query string based on the multiple filter criteria from query.\n * @param {string[]} filters\n */\n ODataAdaptor.prototype.onWhere = function (filters) {\n if (this.pvt.search) {\n filters.push(this.onEachWhere(this.pvt.search, null, true));\n }\n return filters.join(' and ');\n };\n /**\n * Generate query string based on the multiple search criteria from query.\n * @param {{fields:string[]} e\n * @param {string} operator\n * @param {string} key\n * @param {boolean}} ignoreCase\n */\n ODataAdaptor.prototype.onEachSearch = function (e) {\n if (e.fields && e.fields.length === 0) {\n DataUtil.throwError('Query() - Search : oData search requires list of field names to search');\n }\n var filter = this.pvt.search || [];\n for (var i = 0; i < e.fields.length; i++) {\n filter.push(new Predicate(e.fields[i], e.operator, e.key, e.ignoreCase));\n }\n this.pvt.search = filter;\n };\n /**\n * Generate query string based on the search criteria from query.\n * @param {Object} e\n */\n ODataAdaptor.prototype.onSearch = function (e) {\n this.pvt.search = Predicate.or(this.pvt.search);\n return '';\n };\n /**\n * Generate query string based on multiple sort criteria from query.\n * @param {QueryOptions} e\n */\n ODataAdaptor.prototype.onEachSort = function (e) {\n var res = [];\n if (e.name instanceof Array) {\n for (var i = 0; i < e.name.length; i++) {\n res.push(ODataAdaptor.getField(e.name[i]) + (e.direction === 'descending' ? ' desc' : ''));\n }\n }\n else {\n res.push(ODataAdaptor.getField(e.name) + (e.direction === 'descending' ? ' desc' : ''));\n }\n return res.join(',');\n };\n /**\n * Returns sort query string.\n * @param {string[]} e\n */\n ODataAdaptor.prototype.onSortBy = function (e) {\n return e.reverse().join(',');\n };\n /**\n * Adds the group query to the adaptor option.\n * @param {Object[]} e\n * @returns string\n */\n ODataAdaptor.prototype.onGroup = function (e) {\n this.pvt.groups = e;\n return [];\n };\n /**\n * Returns the select query string.\n * @param {string[]} e\n */\n ODataAdaptor.prototype.onSelect = function (e) {\n for (var i = 0; i < e.length; i++) {\n e[i] = ODataAdaptor.getField(e[i]);\n }\n return e.join(',');\n };\n /**\n * Add the aggregate query to the adaptor option.\n * @param {Object[]} e\n * @returns string\n */\n ODataAdaptor.prototype.onAggregates = function (e) {\n this.pvt.aggregates = e;\n return '';\n };\n /**\n * Returns the query string which requests total count from the data source.\n * @param {boolean} e\n * @returns string\n */\n ODataAdaptor.prototype.onCount = function (e) {\n return e === true ? 'allpages' : '';\n };\n /**\n * Method will trigger before send the request to server side.\n * Used to set the custom header or modify the request options.\n * @param {DataManager} dm\n * @param {XMLHttpRequest} request\n * @param {Ajax} settings?\n */\n ODataAdaptor.prototype.beforeSend = function (dm, request, settings) {\n if (DataUtil.endsWith(settings.url, this.options.batch) && settings.type.toLowerCase() === 'post') {\n request.setRequestHeader('Accept', this.options.multipartAccept);\n request.setRequestHeader('DataServiceVersion', '2.0');\n request.overrideMimeType('text/plain; charset=x-user-defined');\n }\n else {\n request.setRequestHeader('Accept', this.options.accept);\n }\n request.setRequestHeader('DataServiceVersion', '2.0');\n request.setRequestHeader('MaxDataServiceVersion', '2.0');\n };\n /**\n * Returns the data from the query processing.\n * @param {DataResult} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @param {Ajax} request?\n * @param {CrudOptions} changes?\n * @returns aggregateResult\n */\n ODataAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n var metaCheck = 'odata.metadata';\n if ((request && request.type === 'GET') && !this.rootUrl && data[metaCheck]) {\n var dataUrls = data[metaCheck].split('/$metadata#');\n this.rootUrl = dataUrls[0];\n this.resourceTableName = dataUrls[1];\n }\n var pvtData = 'pvtData';\n if (!isNullOrUndefined(data.d)) {\n var dataCopy = ((query && query.isCountRequired) ? data.d.results : data.d);\n var metaData = '__metadata';\n if (!isNullOrUndefined(dataCopy)) {\n for (var i = 0; i < dataCopy.length; i++) {\n if (!isNullOrUndefined(dataCopy[i][metaData])) {\n delete dataCopy[i][metaData];\n }\n }\n }\n }\n var pvt = request && request[pvtData];\n var emptyAndBatch = this.processBatchResponse(data, query, xhr, request, changes);\n if (emptyAndBatch) {\n return emptyAndBatch;\n }\n var versionCheck = xhr && request.getResponseHeader('DataServiceVersion');\n var count = null;\n var version = (versionCheck && parseInt(versionCheck, 10)) || 2;\n if (query && query.isCountRequired) {\n var oDataCount = '__count';\n if (data[oDataCount] || data['odata.count']) {\n count = data[oDataCount] || data['odata.count'];\n }\n if (data.d) {\n data = data.d;\n }\n if (data[oDataCount] || data['odata.count']) {\n count = data[oDataCount] || data['odata.count'];\n }\n }\n if (version === 3 && data.value) {\n data = data.value;\n }\n if (data.d) {\n data = data.d;\n }\n if (version < 3 && data.results) {\n data = data.results;\n }\n var args = {};\n args.count = count;\n args.result = data;\n this.getAggregateResult(pvt, data, args, null, query);\n return DataUtil.isNull(count) ? args.result : { result: args.result, count: args.count, aggregates: args.aggregates };\n };\n /**\n * Converts the request object to query string.\n * @param {Object} req\n * @param {Query} query\n * @param {DataManager} dm\n * @returns tableName\n */\n ODataAdaptor.prototype.convertToQueryString = function (request, query, dm) {\n var res = [];\n var table = 'table';\n var tableName = request[table] || '';\n var format = '$format';\n delete request[table];\n if (dm.dataSource.requiresFormat) {\n request[format] = 'json';\n }\n var keys = Object.keys(request);\n for (var _i = 0, keys_4 = keys; _i < keys_4.length; _i++) {\n var prop = keys_4[_i];\n res.push(prop + '=' + request[prop]);\n }\n res = res.join('&');\n if (dm.dataSource.url && dm.dataSource.url.indexOf('?') !== -1 && !tableName) {\n return res;\n }\n return res.length ? tableName + '?' + res : tableName || '';\n };\n ODataAdaptor.prototype.localTimeReplacer = function (key, convertObj) {\n for (var _i = 0, _a = !isNullOrUndefined(convertObj) ? Object.keys(convertObj) : []; _i < _a.length; _i++) {\n var prop = _a[_i];\n if ((convertObj[prop] instanceof Date)) {\n convertObj[prop] = DataUtil.dateParse.toLocalTime(convertObj[prop]);\n }\n }\n return convertObj;\n };\n /**\n * Prepare and returns request body which is used to insert a new record in the table.\n * @param {DataManager} dm\n * @param {Object} data\n * @param {string} tableName?\n */\n ODataAdaptor.prototype.insert = function (dm, data, tableName) {\n return {\n url: (dm.dataSource.insertUrl || dm.dataSource.url).replace(/\\/*$/, tableName ? '/' + tableName : ''),\n data: JSON.stringify(data, this.options.localTime ? this.localTimeReplacer : null)\n };\n };\n /**\n * Prepare and return request body which is used to remove record from the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {number} value\n * @param {string} tableName?\n */\n ODataAdaptor.prototype.remove = function (dm, keyField, value, tableName) {\n var url;\n if (typeof value === 'string' && !DataUtil.parse.isGuid(value)) {\n url = \"('\" + value + \"')\";\n }\n else {\n url = \"(\" + value + \")\";\n }\n return {\n type: 'DELETE',\n url: (dm.dataSource.removeUrl || dm.dataSource.url).replace(/\\/*$/, tableName ? '/' + tableName : '') + url\n };\n };\n /**\n * Updates existing record and saves the changes to the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n * @returns this\n */\n ODataAdaptor.prototype.update = function (dm, keyField, value, tableName, query, original) {\n if (this.options.updateType === 'PATCH' && !isNullOrUndefined(original)) {\n value = this.compareAndRemove(value, original, keyField);\n }\n var url;\n if (typeof value[keyField] === 'string' && !DataUtil.parse.isGuid(value[keyField])) {\n url = \"('\" + value[keyField] + \"')\";\n }\n else {\n url = \"(\" + value[keyField] + \")\";\n }\n return {\n type: this.options.updateType,\n url: (dm.dataSource.updateUrl || dm.dataSource.url).replace(/\\/*$/, tableName ? '/' + tableName : '') + url,\n data: JSON.stringify(value, this.options.localTime ? this.localTimeReplacer : null),\n accept: this.options.accept\n };\n };\n /**\n * Prepare the request body based on the newly added, removed and updated records.\n * The result is used by the batch request.\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {RemoteArgs} e\n * @returns {Object}\n */\n ODataAdaptor.prototype.batchRequest = function (dm, changes, e, query, original) {\n var initialGuid = e.guid = DataUtil.getGuid(this.options.batchPre);\n var url = this.rootUrl ? this.rootUrl + '/' + this.options.batch :\n dm.dataSource.url.replace(/\\/*$/, '/' + this.options.batch);\n e.url = this.resourceTableName ? this.resourceTableName : e.url;\n var args = {\n url: e.url,\n key: e.key,\n cid: 1,\n cSet: DataUtil.getGuid(this.options.changeSet)\n };\n var req = '--' + initialGuid + '\\n';\n req += 'Content-Type: multipart/mixed; boundary=' + args.cSet.replace('--', '') + '\\n';\n this.pvt.changeSet = 0;\n req += this.generateInsertRequest(changes.addedRecords, args, dm);\n req += this.generateUpdateRequest(changes.changedRecords, args, dm, original ? original.changedRecords : []);\n req += this.generateDeleteRequest(changes.deletedRecords, args, dm);\n req += args.cSet + '--\\n';\n req += '--' + initialGuid + '--';\n return {\n type: 'POST',\n url: url,\n dataType: 'json',\n contentType: 'multipart/mixed; charset=UTF-8;boundary=' + initialGuid,\n data: req\n };\n };\n /**\n * Generate the string content from the removed records.\n * The result will be send during batch update.\n * @param {Object[]} arr\n * @param {RemoteArgs} e\n * @returns this\n */\n ODataAdaptor.prototype.generateDeleteRequest = function (arr, e, dm) {\n if (!arr) {\n return '';\n }\n var req = '';\n var stat = {\n 'method': 'DELETE ',\n 'url': function (data, i, key) {\n var url = DataUtil.getObject(key, data[i]);\n if (typeof url === 'number' || DataUtil.parse.isGuid(url)) {\n return '(' + url + ')';\n }\n else if (url instanceof Date) {\n var dateTime = data[i][key];\n return '(' + dateTime.toJSON() + ')';\n }\n else {\n return \"('\" + url + \"')\";\n }\n },\n 'data': function (data, i) { return ''; }\n };\n req = this.generateBodyContent(arr, e, stat, dm);\n return req + '\\n';\n };\n /**\n * Generate the string content from the inserted records.\n * The result will be send during batch update.\n * @param {Object[]} arr\n * @param {RemoteArgs} e\n */\n ODataAdaptor.prototype.generateInsertRequest = function (arr, e, dm) {\n if (!arr) {\n return '';\n }\n var req = '';\n var stat = {\n 'method': 'POST ',\n 'url': function (data, i, key) { return ''; },\n 'data': function (data, i) { return JSON.stringify(data[i]) + '\\n\\n'; }\n };\n req = this.generateBodyContent(arr, e, stat, dm);\n return req;\n };\n /**\n * Generate the string content from the updated records.\n * The result will be send during batch update.\n * @param {Object[]} arr\n * @param {RemoteArgs} e\n */\n ODataAdaptor.prototype.generateUpdateRequest = function (arr, e, dm, org) {\n var _this = this;\n if (!arr) {\n return '';\n }\n var req = '';\n arr.forEach(function (change) { return change = _this.compareAndRemove(change, org.filter(function (o) { return DataUtil.getObject(e.key, o) === DataUtil.getObject(e.key, change); })[0], e.key); });\n var stat = {\n 'method': this.options.updateType + ' ',\n 'url': function (data, i, key) {\n if (typeof data[i][key] === 'number' || DataUtil.parse.isGuid(data[i][key])) {\n return '(' + data[i][key] + ')';\n }\n else if (data[i][key] instanceof Date) {\n var date = data[i][key];\n return '(' + date.toJSON() + ')';\n }\n else {\n return \"('\" + data[i][key] + \"')\";\n }\n },\n 'data': function (data, i) { return JSON.stringify(data[i]) + '\\n\\n'; }\n };\n req = this.generateBodyContent(arr, e, stat, dm);\n return req;\n };\n ODataAdaptor.getField = function (prop) {\n return prop.replace(/\\./g, '/');\n };\n ODataAdaptor.prototype.generateBodyContent = function (arr, e, stat, dm) {\n var req = '';\n for (var i = 0; i < arr.length; i++) {\n req += '\\n' + e.cSet + '\\n';\n req += this.options.changeSetContent + '\\n\\n';\n req += stat.method;\n if (stat.method === 'POST ') {\n req += (dm.dataSource.insertUrl || dm.dataSource.crudUrl || e.url) + stat.url(arr, i, e.key) + ' HTTP/1.1\\n';\n }\n else if (stat.method === 'PUT ' || stat.method === 'PATCH ') {\n req += (dm.dataSource.updateUrl || dm.dataSource.crudUrl || e.url) + stat.url(arr, i, e.key) + ' HTTP/1.1\\n';\n }\n else if (stat.method === 'DELETE ') {\n req += (dm.dataSource.removeUrl || dm.dataSource.crudUrl || e.url) + stat.url(arr, i, e.key) + ' HTTP/1.1\\n';\n }\n req += 'Accept: ' + this.options.accept + '\\n';\n req += 'Content-Id: ' + this.pvt.changeSet++ + '\\n';\n req += this.options.batchChangeSetContentType + '\\n';\n if (!isNullOrUndefined(arr[i]['@odata.etag'])) {\n req += 'If-Match: ' + arr[i]['@odata.etag'] + '\\n\\n';\n delete arr[i]['@odata.etag'];\n }\n else {\n req += '\\n';\n }\n req += stat.data(arr, i);\n }\n return req;\n };\n ODataAdaptor.prototype.processBatchResponse = function (data, query, xhr, request, changes) {\n if (xhr && xhr.getResponseHeader('Content-Type') && xhr.getResponseHeader('Content-Type').indexOf('xml') !== -1) {\n return (query.isCountRequired ? { result: [], count: 0 } : []);\n }\n if (request && this.options.batch && DataUtil.endsWith(request.url, this.options.batch) && request.type.toLowerCase() === 'post') {\n var guid = xhr.getResponseHeader('Content-Type');\n var cIdx = void 0;\n var jsonObj = void 0;\n var d = data + '';\n guid = guid.substring(guid.indexOf('=batchresponse') + 1);\n d = d.split(guid);\n if (d.length < 2) {\n return {};\n }\n d = d[1];\n var exVal = /(?:\\bContent-Type.+boundary=)(changesetresponse.+)/i.exec(d);\n if (exVal) {\n d.replace(exVal[0], '');\n }\n var changeGuid = exVal ? exVal[1] : '';\n d = d.split(changeGuid);\n for (var i = d.length; i > -1; i--) {\n if (!/\\bContent-ID:/i.test(d[i]) || !/\\bHTTP.+201/.test(d[i])) {\n continue;\n }\n cIdx = parseInt(/\\bContent-ID: (\\d+)/i.exec(d[i])[1], 10);\n if (changes.addedRecords[cIdx]) {\n jsonObj = DataUtil.parse.parseJson(/^\\{.+\\}/m.exec(d[i])[0]);\n extend({}, changes.addedRecords[cIdx], this.processResponse(jsonObj));\n }\n }\n return changes;\n }\n return null;\n };\n ODataAdaptor.prototype.compareAndRemove = function (data, original, key) {\n var _this = this;\n if (isNullOrUndefined(original)) {\n return data;\n }\n Object.keys(data).forEach(function (prop) {\n if (prop !== key && prop !== '@odata.etag') {\n if (DataUtil.isPlainObject(data[prop])) {\n _this.compareAndRemove(data[prop], original[prop]);\n var final = Object.keys(data[prop]).filter(function (data) { return data !== '@odata.etag'; });\n if (final.length === 0) {\n delete data[prop];\n }\n }\n else if (data[prop] === original[prop]) {\n delete data[prop];\n }\n else if (data[prop] && original[prop] && data[prop].valueOf() === original[prop].valueOf()) {\n delete data[prop];\n }\n }\n });\n return data;\n };\n return ODataAdaptor;\n}(UrlAdaptor));\nexport { ODataAdaptor };\n/**\n * The OData v4 is an improved version of OData protocols.\n * The DataManager uses the ODataV4Adaptor to consume OData v4 services.\n * @hidden\n */\nvar ODataV4Adaptor = /** @class */ (function (_super) {\n __extends(ODataV4Adaptor, _super);\n function ODataV4Adaptor(props) {\n var _this = _super.call(this, props) || this;\n // options replaced the default adaptor options\n _this.options = extend({}, _this.options, {\n requestType: 'get',\n accept: 'application/json, text/javascript, */*; q=0.01',\n multipartAccept: 'multipart/mixed',\n sortBy: '$orderby',\n select: '$select',\n skip: '$skip',\n take: '$top',\n count: '$count',\n search: '$search',\n where: '$filter',\n expand: '$expand',\n batch: '$batch',\n changeSet: '--changeset_',\n batchPre: 'batch_',\n contentId: 'Content-Id: ',\n batchContent: 'Content-Type: multipart/mixed; boundary=',\n changeSetContent: 'Content-Type: application/http\\nContent-Transfer-Encoding: binary ',\n batchChangeSetContentType: 'Content-Type: application/json; charset=utf-8 ',\n updateType: 'PATCH',\n localTime: false,\n apply: '$apply'\n });\n extend(_this.options, props || {});\n return _this;\n }\n /**\n * @hidden\n */\n ODataV4Adaptor.prototype.getModuleName = function () {\n return 'ODataV4Adaptor';\n };\n /**\n * Returns the query string which requests total count from the data source.\n * @param {boolean} e\n * @returns string\n */\n ODataV4Adaptor.prototype.onCount = function (e) {\n return e === true ? 'true' : '';\n };\n /**\n * Generate request string based on the filter criteria from query.\n * @param {Predicate} pred\n * @param {boolean} requiresCast?\n */\n ODataV4Adaptor.prototype.onPredicate = function (predicate, query, requiresCast) {\n var returnValue = '';\n var val = predicate.value;\n var isDate = val instanceof Date;\n if (query instanceof Query) {\n var queries = this.getQueryRequest(query);\n for (var i = 0; i < queries.filters.length; i++) {\n if (queries.filters[i].e.key === predicate.value) {\n requiresCast = true;\n }\n }\n }\n returnValue = _super.prototype.onPredicate.call(this, predicate, query, requiresCast);\n if (isDate) {\n returnValue = returnValue.replace(/datetime'(.*)'$/, '$1');\n }\n if (DataUtil.parse.isGuid(val)) {\n returnValue = returnValue.replace('guid', '').replace(/'/g, '');\n }\n return returnValue;\n };\n /**\n * Generate query string based on the multiple search criteria from query.\n * @param {{fields:string[]} e\n * @param {string} operator\n * @param {string} key\n * @param {boolean}} ignoreCase\n */\n ODataV4Adaptor.prototype.onEachSearch = function (e) {\n var search = this.pvt.searches || [];\n search.push(e.key);\n this.pvt.searches = search;\n };\n /**\n * Generate query string based on the search criteria from query.\n * @param {Object} e\n */\n ODataV4Adaptor.prototype.onSearch = function (e) {\n return this.pvt.searches.join(' OR ');\n };\n /**\n * Returns the expand query string.\n * @param {string} e\n */\n ODataV4Adaptor.prototype.onExpand = function (e) {\n var _this = this;\n var selected = {};\n var expanded = {};\n var expands = e.expands.slice();\n var exArr = [];\n var selects = e.selects.filter(function (item) { return item.indexOf('.') > -1; });\n selects.forEach(function (select) {\n var splits = select.split('.');\n if (!(splits[0] in selected)) {\n selected[splits[0]] = [];\n }\n if (splits.length == 2) {\n if (selected[splits[0]].length && Object.keys(selected).indexOf(splits[0]) !== -1) {\n if (selected[splits[0]][0].indexOf('$expand') !== -1 && selected[splits[0]][0].indexOf(';$select=') === -1) {\n selected[splits[0]][0] = selected[splits[0]][0] + ';' + '$select=' + splits[1];\n }\n else {\n selected[splits[0]][0] = selected[splits[0]][0] + ',' + splits[1];\n }\n }\n else {\n selected[splits[0]].push('$select=' + splits[1]);\n }\n }\n else {\n var sel = '$select=' + splits[splits.length - 1];\n var exp = '';\n var close_1 = '';\n for (var i = 1; i < splits.length - 1; i++) {\n exp = exp + '$expand=' + splits[i] + '(';\n close_1 = close_1 + ')';\n }\n var combineVal = exp + sel + close_1;\n if (selected[splits[0]].length && Object.keys(selected).indexOf(splits[0]) !== -1 &&\n _this.expandQueryIndex(selected[splits[0]], true)) {\n var idx = _this.expandQueryIndex(selected[splits[0]]);\n selected[splits[0]][idx] = selected[splits[0]][idx] + combineVal.replace('$expand=', ',');\n }\n else {\n selected[splits[0]].push(combineVal);\n }\n }\n });\n //Auto expand from select query\n Object.keys(selected).forEach(function (expand) {\n if ((expands.indexOf(expand) === -1)) {\n expands.push(expand);\n }\n });\n expands.forEach(function (expand) {\n expanded[expand] = expand in selected ? expand + \"(\" + selected[expand].join(';') + \")\" : expand;\n });\n Object.keys(expanded).forEach(function (ex) { return exArr.push(expanded[ex]); });\n return exArr.join(',');\n };\n ODataV4Adaptor.prototype.expandQueryIndex = function (query, isExpand) {\n for (var i = 0; i < query.length; i++) {\n if (query[i].indexOf('$expand') !== -1) {\n return isExpand ? true : i;\n }\n }\n return isExpand ? false : 0;\n };\n /**\n * Returns the groupby query string.\n * @param {string} e\n */\n ODataV4Adaptor.prototype.onDistinct = function (distinctFields) {\n var fields = distinctFields.map(function (field) { return ODataAdaptor.getField(field); }).join(',');\n return \"groupby((\" + fields + \"))\";\n };\n /**\n * Returns the select query string.\n * @param {string[]} e\n */\n ODataV4Adaptor.prototype.onSelect = function (e) {\n return _super.prototype.onSelect.call(this, e.filter(function (item) { return item.indexOf('.') === -1; }));\n };\n /**\n * Method will trigger before send the request to server side.\n * Used to set the custom header or modify the request options.\n * @param {DataManager} dm\n * @param {XMLHttpRequest} request\n * @param {Ajax} settings\n * @returns void\n */\n ODataV4Adaptor.prototype.beforeSend = function (dm, request, settings) {\n if (settings.type === 'POST' || settings.type === 'PUT' || settings.type === 'PATCH') {\n request.setRequestHeader('Prefer', 'return=representation');\n }\n request.setRequestHeader('Accept', this.options.accept);\n };\n /**\n * Returns the data from the query processing.\n * @param {DataResult} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @param {Ajax} request?\n * @param {CrudOptions} changes?\n * @returns aggregateResult\n */\n ODataV4Adaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n var metaName = '@odata.context';\n if ((request && request.type === 'GET') && !this.rootUrl && data[metaName]) {\n var dataUrl = data[metaName].split('/$metadata#');\n this.rootUrl = dataUrl[0];\n this.resourceTableName = dataUrl[1];\n }\n var pvtData = 'pvtData';\n var pvt = request && request[pvtData];\n var emptyAndBatch = _super.prototype.processBatchResponse.call(this, data, query, xhr, request, changes);\n if (emptyAndBatch) {\n return emptyAndBatch;\n }\n var count = null;\n var dataCount = '@odata.count';\n if (query && query.isCountRequired) {\n if (dataCount in data) {\n count = data[dataCount];\n }\n }\n data = !isNullOrUndefined(data.value) ? data.value : data;\n var args = {};\n args.count = count;\n args.result = data;\n this.getAggregateResult(pvt, data, args, null, query);\n return DataUtil.isNull(count) ? args.result : { result: args.result, count: count, aggregates: args.aggregates };\n };\n return ODataV4Adaptor;\n}(ODataAdaptor));\nexport { ODataV4Adaptor };\n/**\n * The Web API is a programmatic interface to define the request and response messages system that is mostly exposed in JSON or XML.\n * The DataManager uses the WebApiAdaptor to consume Web API.\n * Since this adaptor is targeted to interact with Web API created using OData endpoint, it is extended from ODataAdaptor\n * @hidden\n */\nvar WebApiAdaptor = /** @class */ (function (_super) {\n __extends(WebApiAdaptor, _super);\n function WebApiAdaptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n WebApiAdaptor.prototype.getModuleName = function () {\n return 'WebApiAdaptor';\n };\n /**\n * Prepare and returns request body which is used to insert a new record in the table.\n * @param {DataManager} dm\n * @param {Object} data\n * @param {string} tableName?\n */\n WebApiAdaptor.prototype.insert = function (dm, data, tableName) {\n return {\n type: 'POST',\n url: dm.dataSource.url,\n data: JSON.stringify(data)\n };\n };\n /**\n * Prepare and return request body which is used to remove record from the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {number} value\n * @param {string} tableName?\n */\n WebApiAdaptor.prototype.remove = function (dm, keyField, value, tableName) {\n return {\n type: 'DELETE',\n url: dm.dataSource.url + '/' + value,\n data: JSON.stringify(value)\n };\n };\n /**\n * Prepare and return request body which is used to update record.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n */\n WebApiAdaptor.prototype.update = function (dm, keyField, value, tableName) {\n return {\n type: 'PUT',\n url: dm.dataSource.url,\n data: JSON.stringify(value)\n };\n };\n WebApiAdaptor.prototype.batchRequest = function (dm, changes, e) {\n var _this = this;\n var initialGuid = e.guid = DataUtil.getGuid(this.options.batchPre);\n var url = dm.dataSource.url.replace(/\\/*$/, '/' + this.options.batch);\n e.url = this.resourceTableName ? this.resourceTableName : e.url;\n var req = [];\n var _loop_1 = function (i, x) {\n changes.addedRecords.forEach(function (j, d) {\n var stat = {\n 'method': 'POST ',\n 'url': function (data, i, key) { return ''; },\n 'data': function (data, i) { return JSON.stringify(data[i]) + '\\n\\n'; }\n };\n req.push('--' + initialGuid);\n req.push('Content-Type: application/http; msgtype=request', '');\n req.push('POST ' + '/api/' + (dm.dataSource.insertUrl || dm.dataSource.crudUrl || e.url)\n + stat.url(changes.addedRecords, i, e.key) + ' HTTP/1.1');\n req.push('Content-Type: ' + 'application/json; charset=utf-8');\n req.push('Host: ' + location.host);\n req.push('', j ? JSON.stringify(j) : '');\n });\n };\n //insertion\n for (var i = 0, x = changes.addedRecords.length; i < x; i++) {\n _loop_1(i, x);\n }\n var _loop_2 = function (i, x) {\n changes.changedRecords.forEach(function (j, d) {\n var stat = {\n 'method': _this.options.updateType + ' ',\n 'url': function (data, i, key) { return ''; },\n 'data': function (data, i) { return JSON.stringify(data[i]) + '\\n\\n'; }\n };\n req.push('--' + initialGuid);\n req.push('Content-Type: application/http; msgtype=request', '');\n req.push('PUT ' + '/api/' + (dm.dataSource.updateUrl || dm.dataSource.crudUrl || e.url)\n + stat.url(changes.changedRecords, i, e.key) + ' HTTP/1.1');\n req.push('Content-Type: ' + 'application/json; charset=utf-8');\n req.push('Host: ' + location.host);\n req.push('', j ? JSON.stringify(j) : '');\n });\n };\n //updation \n for (var i = 0, x = changes.changedRecords.length; i < x; i++) {\n _loop_2(i, x);\n }\n var _loop_3 = function (i, x) {\n changes.deletedRecords.forEach(function (j, d) {\n var state = {\n 'mtd': 'DELETE ',\n 'url': function (data, i, key) {\n var url = DataUtil.getObject(key, data[i]);\n if (typeof url === 'number' || DataUtil.parse.isGuid(url)) {\n return '/' + url;\n }\n else if (url instanceof Date) {\n var datTime = data[i][key];\n return '/' + datTime.toJSON();\n }\n else {\n return \"/'\" + url + \"'\";\n }\n },\n 'data': function (data, i) { return ''; }\n };\n req.push('--' + initialGuid);\n req.push('Content-Type: application/http; msgtype=request', '');\n req.push('DELETE ' + '/api/' + (dm.dataSource.removeUrl || dm.dataSource.crudUrl || e.url)\n + state.url(changes.deletedRecords, i, e.key) + ' HTTP/1.1');\n req.push('Content-Type: ' + 'application/json; charset=utf-8');\n req.push('Host: ' + location.host);\n req.push('', j ? JSON.stringify(j) : '');\n });\n };\n //deletion\n for (var i = 0, x = changes.deletedRecords.length; i < x; i++) {\n _loop_3(i, x);\n }\n req.push('--' + initialGuid + '--', '');\n return {\n type: 'POST',\n url: url,\n contentType: 'multipart/mixed; boundary=' + initialGuid,\n data: req.join('\\r\\n')\n };\n };\n /**\n * Method will trigger before send the request to server side.\n * Used to set the custom header or modify the request options.\n * @param {DataManager} dm\n * @param {XMLHttpRequest} request\n * @param {Ajax} settings\n * @returns void\n */\n WebApiAdaptor.prototype.beforeSend = function (dm, request, settings) {\n request.setRequestHeader('Accept', 'application/json, text/javascript, */*; q=0.01');\n };\n /**\n * Returns the data from the query processing.\n * @param {DataResult} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @param {Ajax} request?\n * @param {CrudOptions} changes?\n * @returns aggregateResult\n */\n WebApiAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n var pvtData = 'pvtData';\n var pvt = request && request[pvtData];\n var count = null;\n var args = {};\n if (request && request.type.toLowerCase() !== 'post') {\n var versionCheck = xhr && request.getResponseHeader('DataServiceVersion');\n var version = (versionCheck && parseInt(versionCheck, 10)) || 2;\n if (query && query.isCountRequired) {\n if (!DataUtil.isNull(data.Count)) {\n count = data.Count;\n }\n }\n if (version < 3 && data.Items) {\n data = data.Items;\n }\n args.count = count;\n args.result = data;\n this.getAggregateResult(pvt, data, args, null, query);\n }\n args.result = args.result || data;\n return DataUtil.isNull(count) ? args.result : { result: args.result, count: args.count, aggregates: args.aggregates };\n };\n return WebApiAdaptor;\n}(ODataAdaptor));\nexport { WebApiAdaptor };\n/**\n * WebMethodAdaptor can be used by DataManager to interact with web method.\n * @hidden\n */\nvar WebMethodAdaptor = /** @class */ (function (_super) {\n __extends(WebMethodAdaptor, _super);\n function WebMethodAdaptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Prepare the request body based on the query.\n * The query information can be accessed at the WebMethod using variable named `value`.\n * @param {DataManager} dm\n * @param {Query} query\n * @param {Object[]} hierarchyFilters?\n * @returns application\n */\n WebMethodAdaptor.prototype.processQuery = function (dm, query, hierarchyFilters) {\n var obj = new UrlAdaptor().processQuery(dm, query, hierarchyFilters);\n var getData = 'data';\n var data = DataUtil.parse.parseJson(obj[getData]);\n var result = {};\n var value = 'value';\n if (data.param) {\n for (var i = 0; i < data.param.length; i++) {\n var param = data.param[i];\n var key = Object.keys(param)[0];\n result[key] = param[key];\n }\n }\n result[value] = data;\n var pvtData = 'pvtData';\n var url = 'url';\n return {\n data: JSON.stringify(result),\n url: obj[url],\n pvtData: obj[pvtData],\n type: 'POST',\n contentType: 'application/json; charset=utf-8'\n };\n };\n return WebMethodAdaptor;\n}(UrlAdaptor));\nexport { WebMethodAdaptor };\n/**\n * RemoteSaveAdaptor, extended from JsonAdaptor and it is used for binding local data and performs all DataManager queries in client-side.\n * It interacts with server-side only for CRUD operations.\n * @hidden\n */\nvar RemoteSaveAdaptor = /** @class */ (function (_super) {\n __extends(RemoteSaveAdaptor, _super);\n /**\n * @hidden\n */\n function RemoteSaveAdaptor() {\n var _this = _super.call(this) || this;\n setValue('beforeSend', UrlAdaptor.prototype.beforeSend, _this);\n return _this;\n }\n RemoteSaveAdaptor.prototype.insert = function (dm, data, tableName, query, position) {\n this.pvt.position = position;\n this.updateType = 'add';\n return {\n url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify(extend({}, {\n value: data,\n table: tableName,\n action: 'insert'\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n RemoteSaveAdaptor.prototype.remove = function (dm, keyField, val, tableName, query) {\n _super.prototype.remove.call(this, dm, keyField, val);\n return {\n type: 'POST',\n url: dm.dataSource.removeUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify(extend({}, {\n key: val,\n keyColumn: keyField,\n table: tableName,\n action: 'remove'\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n RemoteSaveAdaptor.prototype.update = function (dm, keyField, val, tableName, query) {\n this.updateType = 'update';\n this.updateKey = keyField;\n return {\n type: 'POST',\n url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify(extend({}, {\n value: val,\n action: 'update',\n keyColumn: keyField,\n key: val[keyField],\n table: tableName\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n RemoteSaveAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes, e) {\n var i;\n var newData = request ? JSON.parse(request.data) : data;\n data = newData.action === 'batch' ? DataUtil.parse.parseJson(data) : data;\n if (this.updateType === 'add') {\n _super.prototype.insert.call(this, ds, data, null, null, this.pvt.position);\n }\n if (this.updateType === 'update') {\n _super.prototype.update.call(this, ds, this.updateKey, data);\n }\n this.updateType = undefined;\n if (data.added) {\n for (i = 0; i < data.added.length; i++) {\n _super.prototype.insert.call(this, ds, data.added[i]);\n }\n }\n if (data.changed) {\n for (i = 0; i < data.changed.length; i++) {\n _super.prototype.update.call(this, ds, e.key, data.changed[i]);\n }\n }\n if (data.deleted) {\n for (i = 0; i < data.deleted.length; i++) {\n _super.prototype.remove.call(this, ds, e.key, data.deleted[i]);\n }\n }\n return data;\n };\n /**\n * Prepare the request body based on the newly added, removed and updated records.\n * Also perform the changes in the locally cached data to sync with the remote data.\n * The result is used by the batch request.\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {RemoteArgs} e\n */\n RemoteSaveAdaptor.prototype.batchRequest = function (dm, changes, e, query, original) {\n return {\n type: 'POST',\n url: dm.dataSource.batchUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n contentType: 'application/json; charset=utf-8',\n dataType: 'json',\n data: JSON.stringify(extend({}, {\n changed: changes.changedRecords,\n added: changes.addedRecords,\n deleted: changes.deletedRecords,\n action: 'batch',\n table: e.url,\n key: e.key\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n RemoteSaveAdaptor.prototype.addParams = function (options) {\n var urlParams = new UrlAdaptor();\n urlParams.addParams(options);\n };\n return RemoteSaveAdaptor;\n}(JsonAdaptor));\nexport { RemoteSaveAdaptor };\n/**\n * Ajax Adaptor that is extended from URL Adaptor, is used for handle data operations with user defined functions.\n * @hidden\n */\nvar CustomDataAdaptor = /** @class */ (function (_super) {\n __extends(CustomDataAdaptor, _super);\n function CustomDataAdaptor(props) {\n var _this = _super.call(this) || this;\n // options replaced the default adaptor options\n _this.options = extend({}, _this.options, {\n getData: new Function(),\n addRecord: new Function(),\n updateRecord: new Function(),\n deleteRecord: new Function(),\n batchUpdate: new Function()\n });\n extend(_this.options, props || {});\n return _this;\n }\n CustomDataAdaptor.prototype.getModuleName = function () {\n return 'CustomDataAdaptor';\n };\n return CustomDataAdaptor;\n}(UrlAdaptor));\nexport { CustomDataAdaptor };\n/**\n * The GraphqlAdaptor that is extended from URL Adaptor, is used for retrieving data from the Graphql server.\n * It interacts with the Graphql server with all the DataManager Queries and performs CRUD operations.\n * @hidden\n */\nvar GraphQLAdaptor = /** @class */ (function (_super) {\n __extends(GraphQLAdaptor, _super);\n function GraphQLAdaptor(options) {\n var _this = _super.call(this) || this;\n _this.opt = options;\n _this.schema = _this.opt.response;\n _this.query = _this.opt.query;\n _this.getVariables = _this.opt.getVariables ? _this.opt.getVariables : function () { };\n _this.getQuery = function () { return _this.query; };\n return _this;\n }\n GraphQLAdaptor.prototype.getModuleName = function () {\n return 'GraphQLAdaptor';\n };\n /**\n * Process the JSON data based on the provided queries.\n * @param {DataManager} dm\n * @param {Query} query?\n */\n GraphQLAdaptor.prototype.processQuery = function (datamanager, query) {\n var urlQuery = _super.prototype.processQuery.apply(this, arguments);\n var dm = JSON.parse(urlQuery.data);\n // constructing GraphQL parameters\n var keys = ['skip', 'take', 'sorted', 'table', 'select', 'where',\n 'search', 'requiresCounts', 'aggregates', 'params'];\n var temp = {};\n var str = 'searchwhereparams';\n keys.filter(function (e) {\n temp[e] = str.indexOf(e) > -1 ? JSON.stringify(dm[e]) : dm[e];\n });\n var vars = this.getVariables() || {};\n vars['datamanager'] = temp;\n var data = JSON.stringify({\n query: this.getQuery(),\n variables: vars\n });\n urlQuery.data = data;\n return urlQuery;\n };\n /**\n * Returns the data from the query processing.\n * It will also cache the data for later usage.\n * @param {DataResult} data\n * @param {DataManager} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @param {Object} request?\n * @returns DataResult\n */\n GraphQLAdaptor.prototype.processResponse = function (resData, ds, query, xhr, request) {\n var res = resData;\n var count;\n var aggregates;\n var result = getValue(this.schema.result, res.data);\n if (this.schema.count) {\n count = getValue(this.schema.count, res.data);\n }\n if (this.schema.aggregates) {\n aggregates = getValue(this.schema.aggregates, res.data);\n aggregates = !isNullOrUndefined(aggregates) ? DataUtil.parse.parseJson(aggregates) : aggregates;\n }\n var pvt = request.pvtData || {};\n var args = { result: result, aggregates: aggregates };\n var data = args;\n if (pvt && pvt.groups && pvt.groups.length) {\n this.getAggregateResult(pvt, data, args, null, query);\n }\n return !isNullOrUndefined(count) ? { result: args.result, count: count, aggregates: aggregates } : args.result;\n };\n /**\n * Prepare and returns request body which is used to insert a new record in the table.\n */\n GraphQLAdaptor.prototype.insert = function () {\n var inserted = _super.prototype.insert.apply(this, arguments);\n return this.generateCrudData(inserted, 'insert');\n };\n /**\n * Prepare and returns request body which is used to update a new record in the table.\n */\n GraphQLAdaptor.prototype.update = function () {\n var inserted = _super.prototype.update.apply(this, arguments);\n return this.generateCrudData(inserted, 'update');\n };\n /**\n * Prepare and returns request body which is used to remove a new record in the table.\n */\n GraphQLAdaptor.prototype.remove = function () {\n var inserted = _super.prototype.remove.apply(this, arguments);\n return this.generateCrudData(inserted, 'remove');\n };\n /**\n * Prepare the request body based on the newly added, removed and updated records.\n * The result is used by the batch request.\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {Object} e\n * @param {Query} query\n * @param {Object} original\n */\n GraphQLAdaptor.prototype.batchRequest = function (dm, changes, e, query, original) {\n var batch = _super.prototype.batchRequest.apply(this, arguments);\n var bData = JSON.parse(batch.data);\n bData.key = e.key;\n batch.data = JSON.stringify(bData);\n return this.generateCrudData(batch, 'batch');\n };\n GraphQLAdaptor.prototype.generateCrudData = function (crudData, action) {\n var parsed = JSON.parse(crudData.data);\n crudData.data = JSON.stringify({\n query: this.opt.getMutation(action),\n variables: parsed\n });\n return crudData;\n };\n return GraphQLAdaptor;\n}(UrlAdaptor));\nexport { GraphQLAdaptor };\n/**\n * Cache Adaptor is used to cache the data of the visited pages. It prevents new requests for the previously visited pages.\n * You can configure cache page size and duration of caching by using cachingPageSize and timeTillExpiration properties of the DataManager\n * @hidden\n */\nvar CacheAdaptor = /** @class */ (function (_super) {\n __extends(CacheAdaptor, _super);\n /**\n * Constructor for CacheAdaptor class.\n * @param {CacheAdaptor} adaptor?\n * @param {number} timeStamp?\n * @param {number} pageSize?\n * @hidden\n */\n function CacheAdaptor(adaptor, timeStamp, pageSize) {\n var _this = _super.call(this) || this;\n _this.isCrudAction = false;\n _this.isInsertAction = false;\n if (!isNullOrUndefined(adaptor)) {\n _this.cacheAdaptor = adaptor;\n }\n _this.pageSize = pageSize;\n _this.guidId = DataUtil.getGuid('cacheAdaptor');\n var obj = { keys: [], results: [] };\n window.localStorage.setItem(_this.guidId, JSON.stringify(obj));\n var guid = _this.guidId;\n if (!isNullOrUndefined(timeStamp)) {\n setInterval(function () {\n var data;\n data = DataUtil.parse.parseJson(window.localStorage.getItem(guid));\n var forDel = [];\n for (var i = 0; i < data.results.length; i++) {\n var currentTime = +new Date();\n var requestTime = +new Date(data.results[i].timeStamp);\n data.results[i].timeStamp = currentTime - requestTime;\n if (currentTime - requestTime > timeStamp) {\n forDel.push(i);\n }\n }\n for (var i = 0; i < forDel.length; i++) {\n data.results.splice(forDel[i], 1);\n data.keys.splice(forDel[i], 1);\n }\n window.localStorage.removeItem(guid);\n window.localStorage.setItem(guid, JSON.stringify(data));\n }, timeStamp);\n }\n return _this;\n }\n /**\n * It will generate the key based on the URL when we send a request to server.\n * @param {string} url\n * @param {Query} query?\n * @hidden\n */\n CacheAdaptor.prototype.generateKey = function (url, query) {\n var queries = this.getQueryRequest(query);\n var singles = Query.filterQueryLists(query.queries, ['onSelect', 'onPage', 'onSkip', 'onTake', 'onRange']);\n var key = url;\n var page = 'onPage';\n if (page in singles) {\n key += singles[page].pageIndex;\n }\n queries.sorts.forEach(function (obj) {\n key += obj.e.direction + obj.e.fieldName;\n });\n queries.groups.forEach(function (obj) {\n key += obj.e.fieldName;\n });\n queries.searches.forEach(function (obj) {\n key += obj.e.searchKey;\n });\n for (var filter = 0; filter < queries.filters.length; filter++) {\n var currentFilter = queries.filters[filter];\n if (currentFilter.e.isComplex) {\n var newQuery = query.clone();\n newQuery.queries = [];\n for (var i = 0; i < currentFilter.e.predicates.length; i++) {\n newQuery.queries.push({ fn: 'onWhere', e: currentFilter.e.predicates[i], filter: query.queries.filter });\n }\n key += currentFilter.e.condition + this.generateKey(url, newQuery);\n }\n else {\n key += currentFilter.e.field + currentFilter.e.operator + currentFilter.e.value;\n }\n }\n return key;\n };\n /**\n * Process the query to generate request body.\n * If the data is already cached, it will return the cached data.\n * @param {DataManager} dm\n * @param {Query} query?\n * @param {Object[]} hierarchyFilters?\n */\n CacheAdaptor.prototype.processQuery = function (dm, query, hierarchyFilters) {\n var key = this.generateKey(dm.dataSource.url, query);\n var cachedItems;\n cachedItems = DataUtil.parse.parseJson(window.localStorage.getItem(this.guidId));\n var data = cachedItems ? cachedItems.results[cachedItems.keys.indexOf(key)] : null;\n if (data != null && !this.isCrudAction && !this.isInsertAction) {\n return data;\n }\n this.isCrudAction = null;\n this.isInsertAction = null;\n return this.cacheAdaptor.processQuery.apply(this.cacheAdaptor, [].slice.call(arguments, 0));\n };\n /**\n * Returns the data from the query processing.\n * It will also cache the data for later usage.\n * @param {DataResult} data\n * @param {DataManager} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @param {Ajax} request?\n * @param {CrudOptions} changes?\n */\n CacheAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n if (this.isInsertAction || (request && this.cacheAdaptor.options.batch &&\n DataUtil.endsWith(request.url, this.cacheAdaptor.options.batch) && request.type.toLowerCase() === 'post')) {\n return this.cacheAdaptor.processResponse(data, ds, query, xhr, request, changes);\n }\n data = this.cacheAdaptor.processResponse.apply(this.cacheAdaptor, [].slice.call(arguments, 0));\n var key = query ? this.generateKey(ds.dataSource.url, query) : ds.dataSource.url;\n var obj = {};\n obj = DataUtil.parse.parseJson(window.localStorage.getItem(this.guidId));\n var index = obj.keys.indexOf(key);\n if (index !== -1) {\n obj.results.splice(index, 1);\n obj.keys.splice(index, 1);\n }\n obj.results[obj.keys.push(key) - 1] = { keys: key, result: data.result, timeStamp: new Date(), count: data.count };\n while (obj.results.length > this.pageSize) {\n obj.results.splice(0, 1);\n obj.keys.splice(0, 1);\n }\n window.localStorage.setItem(this.guidId, JSON.stringify(obj));\n return data;\n };\n /**\n * Method will trigger before send the request to server side. Used to set the custom header or modify the request options.\n * @param {DataManager} dm\n * @param {XMLHttpRequest} request\n * @param {Ajax} settings?\n */\n CacheAdaptor.prototype.beforeSend = function (dm, request, settings) {\n if (!isNullOrUndefined(this.cacheAdaptor.options.batch) && DataUtil.endsWith(settings.url, this.cacheAdaptor.options.batch)\n && settings.type.toLowerCase() === 'post') {\n request.setRequestHeader('Accept', this.cacheAdaptor.options.multipartAccept);\n }\n if (!dm.dataSource.crossDomain) {\n request.setRequestHeader('Accept', this.cacheAdaptor.options.accept);\n }\n };\n /**\n * Updates existing record and saves the changes to the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName\n */\n CacheAdaptor.prototype.update = function (dm, keyField, value, tableName) {\n this.isCrudAction = true;\n return this.cacheAdaptor.update(dm, keyField, value, tableName);\n };\n /**\n * Prepare and returns request body which is used to insert a new record in the table.\n * @param {DataManager} dm\n * @param {Object} data\n * @param {string} tableName?\n */\n CacheAdaptor.prototype.insert = function (dm, data, tableName) {\n this.isInsertAction = true;\n return this.cacheAdaptor.insert(dm, data, tableName);\n };\n /**\n * Prepare and return request body which is used to remove record from the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n */\n CacheAdaptor.prototype.remove = function (dm, keyField, value, tableName) {\n this.isCrudAction = true;\n return this.cacheAdaptor.remove(dm, keyField, value, tableName);\n };\n /**\n * Prepare the request body based on the newly added, removed and updated records.\n * The result is used by the batch request.\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {RemoteArgs} e\n */\n CacheAdaptor.prototype.batchRequest = function (dm, changes, e) {\n return this.cacheAdaptor.batchRequest(dm, changes, e);\n };\n return CacheAdaptor;\n}(UrlAdaptor));\nexport { CacheAdaptor };\n","import { Ajax } from '@syncfusion/ej2-base';\nimport { extend, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { DataUtil } from './util';\nimport { Query } from './query';\nimport { ODataAdaptor, JsonAdaptor, CacheAdaptor, RemoteSaveAdaptor, CustomDataAdaptor } from './adaptors';\n/**\n * DataManager is used to manage and manipulate relational data.\n */\nvar DataManager = /** @class */ (function () {\n /**\n * Constructor for DataManager class\n * @param {DataOptions|JSON[]} dataSource?\n * @param {Query} query?\n * @param {AdaptorOptions|string} adaptor?\n * @hidden\n */\n function DataManager(dataSource, query, adaptor) {\n var _this = this;\n /** @hidden */\n this.dateParse = true;\n /** @hidden */\n this.timeZoneHandling = true;\n this.requests = [];\n if (!dataSource && !this.dataSource) {\n dataSource = [];\n }\n adaptor = adaptor || dataSource.adaptor;\n if (dataSource && dataSource.timeZoneHandling === false) {\n this.timeZoneHandling = dataSource.timeZoneHandling;\n }\n var data;\n if (dataSource instanceof Array) {\n data = {\n json: dataSource,\n offline: true\n };\n }\n else if (typeof dataSource === 'object') {\n if (!dataSource.json) {\n dataSource.json = [];\n }\n data = {\n url: dataSource.url,\n insertUrl: dataSource.insertUrl,\n removeUrl: dataSource.removeUrl,\n updateUrl: dataSource.updateUrl,\n crudUrl: dataSource.crudUrl,\n batchUrl: dataSource.batchUrl,\n json: dataSource.json,\n headers: dataSource.headers,\n accept: dataSource.accept,\n data: dataSource.data,\n timeTillExpiration: dataSource.timeTillExpiration,\n cachingPageSize: dataSource.cachingPageSize,\n enableCaching: dataSource.enableCaching,\n requestType: dataSource.requestType,\n key: dataSource.key,\n crossDomain: dataSource.crossDomain,\n jsonp: dataSource.jsonp,\n dataType: dataSource.dataType,\n offline: dataSource.offline !== undefined ? dataSource.offline\n : dataSource.adaptor instanceof RemoteSaveAdaptor || dataSource.adaptor instanceof CustomDataAdaptor ?\n false : dataSource.url ? false : true,\n requiresFormat: dataSource.requiresFormat\n };\n }\n else {\n DataUtil.throwError('DataManager: Invalid arguments');\n }\n if (data.requiresFormat === undefined && !DataUtil.isCors()) {\n data.requiresFormat = isNullOrUndefined(data.crossDomain) ? true : data.crossDomain;\n }\n if (data.dataType === undefined) {\n data.dataType = 'json';\n }\n this.dataSource = data;\n this.defaultQuery = query;\n if (data.url && data.offline && !data.json.length) {\n this.isDataAvailable = false;\n this.adaptor = adaptor || new ODataAdaptor();\n this.dataSource.offline = false;\n this.ready = this.executeQuery(query || new Query());\n this.ready.then(function (e) {\n _this.dataSource.offline = true;\n _this.isDataAvailable = true;\n data.json = e.result;\n _this.adaptor = new JsonAdaptor();\n });\n }\n else {\n this.adaptor = data.offline ? new JsonAdaptor() : new ODataAdaptor();\n }\n if (!data.jsonp && this.adaptor instanceof ODataAdaptor) {\n data.jsonp = 'callback';\n }\n this.adaptor = adaptor || this.adaptor;\n if (data.enableCaching) {\n this.adaptor = new CacheAdaptor(this.adaptor, data.timeTillExpiration, data.cachingPageSize);\n }\n return this;\n }\n /**\n * Overrides DataManager's default query with given query.\n * @param {Query} query - Defines the new default query.\n */\n DataManager.prototype.setDefaultQuery = function (query) {\n this.defaultQuery = query;\n return this;\n };\n /**\n * Executes the given query with local data source.\n * @param {Query} query - Defines the query to retrieve data.\n */\n DataManager.prototype.executeLocal = function (query) {\n if (!this.defaultQuery && !(query instanceof Query)) {\n DataUtil.throwError('DataManager - executeLocal() : A query is required to execute');\n }\n if (!this.dataSource.json) {\n DataUtil.throwError('DataManager - executeLocal() : Json data is required to execute');\n }\n query = query || this.defaultQuery;\n var result = this.adaptor.processQuery(this, query);\n if (query.subQuery) {\n var from = query.subQuery.fromTable;\n var lookup = query.subQuery.lookups;\n var res = query.isCountRequired ? result.result :\n result;\n if (lookup && lookup instanceof Array) {\n DataUtil.buildHierarchy(query.subQuery.fKey, from, res, lookup, query.subQuery.key);\n }\n for (var j = 0; j < res.length; j++) {\n if (res[j][from] instanceof Array) {\n res[j] = extend({}, {}, res[j]);\n res[j][from] = this.adaptor.processResponse(query.subQuery.using(new DataManager(res[j][from].slice(0))).executeLocal(), this, query);\n }\n }\n }\n return this.adaptor.processResponse(result, this, query);\n };\n /**\n * Executes the given query with either local or remote data source.\n * It will be executed as asynchronously and returns Promise object which will be resolved or rejected after action completed.\n * @param {Query|Function} query - Defines the query to retrieve data.\n * @param {Function} done - Defines the callback function and triggers when the Promise is resolved.\n * @param {Function} fail - Defines the callback function and triggers when the Promise is rejected.\n * @param {Function} always - Defines the callback function and triggers when the Promise is resolved or rejected.\n */\n DataManager.prototype.executeQuery = function (query, done, fail, always) {\n var _this = this;\n var makeRequest = 'makeRequest';\n if (typeof query === 'function') {\n always = fail;\n fail = done;\n done = query;\n query = null;\n }\n if (!query) {\n query = this.defaultQuery;\n }\n if (!(query instanceof Query)) {\n DataUtil.throwError('DataManager - executeQuery() : A query is required to execute');\n }\n var deffered = new Deferred();\n var args = { query: query };\n if (!this.dataSource.offline && (this.dataSource.url !== undefined && this.dataSource.url !== '')\n || (!isNullOrUndefined(this.adaptor[makeRequest])) || this.isCustomDataAdaptor(this.adaptor)) {\n var result = this.adaptor.processQuery(this, query);\n if (!isNullOrUndefined(this.adaptor[makeRequest])) {\n this.adaptor[makeRequest](result, deffered, args, query);\n }\n else if (!isNullOrUndefined(result.url) || this.isCustomDataAdaptor(this.adaptor)) {\n this.makeRequest(result, deffered, args, query);\n }\n else {\n args = DataManager.getDeferedArgs(query, result, args);\n deffered.resolve(args);\n }\n }\n else {\n DataManager.nextTick(function () {\n var res = _this.executeLocal(query);\n args = DataManager.getDeferedArgs(query, res, args);\n deffered.resolve(args);\n });\n }\n if (done || fail) {\n deffered.promise.then(done, fail);\n }\n if (always) {\n deffered.promise.then(always, always);\n }\n return deffered.promise;\n };\n DataManager.getDeferedArgs = function (query, result, args) {\n if (query.isCountRequired) {\n args.result = result.result;\n args.count = result.count;\n args.aggregates = result.aggregates;\n }\n else {\n args.result = result;\n }\n return args;\n };\n DataManager.nextTick = function (fn) {\n (window.setImmediate || window.setTimeout)(fn, 0);\n };\n DataManager.prototype.extendRequest = function (url, fnSuccess, fnFail) {\n return extend({}, {\n type: 'GET',\n dataType: this.dataSource.dataType,\n crossDomain: this.dataSource.crossDomain,\n jsonp: this.dataSource.jsonp,\n cache: true,\n processData: false,\n onSuccess: fnSuccess,\n onFailure: fnFail\n }, url);\n };\n // tslint:disable-next-line:max-func-body-length\n DataManager.prototype.makeRequest = function (url, deffered, args, query) {\n var _this = this;\n var isSelector = !!query.subQuerySelector;\n var fnFail = function (e) {\n args.error = e;\n deffered.reject(args);\n };\n var process = function (data, count, xhr, request, actual, aggregates, virtualSelectRecords) {\n args.xhr = xhr;\n args.count = count ? parseInt(count.toString(), 10) : 0;\n args.result = data;\n args.request = request;\n args.aggregates = aggregates;\n args.actual = actual;\n args.virtualSelectRecords = virtualSelectRecords;\n deffered.resolve(args);\n };\n var fnQueryChild = function (data, selector) {\n var subDeffer = new Deferred();\n var childArgs = { parent: args };\n query.subQuery.isChild = true;\n var subUrl = _this.adaptor.processQuery(_this, query.subQuery, data ? _this.adaptor.processResponse(data) : selector);\n var childReq = _this.makeRequest(subUrl, subDeffer, childArgs, query.subQuery);\n if (!isSelector) {\n subDeffer.then(function (subData) {\n if (data) {\n DataUtil.buildHierarchy(query.subQuery.fKey, query.subQuery.fromTable, data, subData, query.subQuery.key);\n process(data, subData.count, subData.xhr);\n }\n }, fnFail);\n }\n return childReq;\n };\n var fnSuccess = function (data, request) {\n if (_this.isGraphQLAdaptor(_this.adaptor)) {\n if (!isNullOrUndefined(data['errors'])) {\n return fnFail(data['errors'], request);\n }\n }\n if (_this.isCustomDataAdaptor(_this.adaptor)) {\n request = extend({}, _this.ajaxReqOption, request);\n }\n if (request.httpRequest.getResponseHeader('Content-Type').indexOf('xml') === -1 && _this.dateParse) {\n data = DataUtil.parse.parseJson(data);\n }\n var result = _this.adaptor.processResponse(data, _this, query, request.httpRequest, request);\n var count = 0;\n var aggregates = null;\n var virtualSelectRecords = 'virtualSelectRecords';\n var virtualRecords = data[virtualSelectRecords];\n if (query.isCountRequired) {\n count = result.count;\n aggregates = result.aggregates;\n result = result.result;\n }\n if (!query.subQuery) {\n process(result, count, request.httpRequest, request.type, data, aggregates, virtualRecords);\n return;\n }\n if (!isSelector) {\n fnQueryChild(result, request);\n }\n };\n var req = this.extendRequest(url, fnSuccess, fnFail);\n if (!this.isCustomDataAdaptor(this.adaptor)) {\n var ajax_1 = new Ajax(req);\n ajax_1.beforeSend = function () {\n _this.beforeSend(ajax_1.httpRequest, ajax_1);\n };\n req = ajax_1.send();\n req.catch(function (e) { return true; }); // to handle failure remote requests. \n this.requests.push(ajax_1);\n }\n else {\n this.ajaxReqOption = req;\n var request = req;\n this.adaptor.options.getData({\n data: request.data,\n onSuccess: request.onSuccess, onFailure: request.onFailure\n });\n }\n if (isSelector) {\n var promise = void 0;\n var res = query.subQuerySelector.call(this, { query: query.subQuery, parent: query });\n if (res && res.length) {\n promise = Promise.all([req, fnQueryChild(null, res)]);\n promise.then(function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n var result = args[0];\n var pResult = _this.adaptor.processResponse(result[0], _this, query, _this.requests[0].httpRequest, _this.requests[0]);\n var count = 0;\n if (query.isCountRequired) {\n count = pResult.count;\n pResult = pResult.result;\n }\n var cResult = _this.adaptor.processResponse(result[1], _this, query.subQuery, _this.requests[1].httpRequest, _this.requests[1]);\n count = 0;\n if (query.subQuery.isCountRequired) {\n count = cResult.count;\n cResult = cResult.result;\n }\n DataUtil.buildHierarchy(query.subQuery.fKey, query.subQuery.fromTable, pResult, cResult, query.subQuery.key);\n isSelector = false;\n process(pResult, count, _this.requests[0].httpRequest);\n });\n }\n else {\n isSelector = false;\n }\n }\n return req;\n };\n DataManager.prototype.beforeSend = function (request, settings) {\n this.adaptor.beforeSend(this, request, settings);\n var headers = this.dataSource.headers;\n var props;\n for (var i = 0; headers && i < headers.length; i++) {\n props = [];\n var keys = Object.keys(headers[i]);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var prop = keys_1[_i];\n props.push(prop);\n request.setRequestHeader(prop, headers[i][prop]);\n }\n }\n };\n /**\n * Save bulk changes to the given table name.\n * User can add a new record, edit an existing record, and delete a record at the same time.\n * If the datasource from remote, then updated in a single post.\n * @param {Object} changes - Defines the CrudOptions.\n * @param {string} key - Defines the column field.\n * @param {string|Query} tableName - Defines the table name.\n * @param {Query} query - Sets default query for the DataManager.\n */\n DataManager.prototype.saveChanges = function (changes, key, tableName, query, original) {\n var _this = this;\n if (tableName instanceof Query) {\n query = tableName;\n tableName = null;\n }\n var args = {\n url: tableName,\n key: key || this.dataSource.key\n };\n var req = this.adaptor.batchRequest(this, changes, args, query || new Query(), original);\n var doAjaxRequest = 'doAjaxRequest';\n if (this.dataSource.offline) {\n return req;\n }\n if (!isNullOrUndefined(this.adaptor[doAjaxRequest])) {\n return this.adaptor[doAjaxRequest](req);\n }\n else if (!this.isCustomDataAdaptor(this.adaptor)) {\n var deff_1 = new Deferred();\n var ajax_2 = new Ajax(req);\n ajax_2.beforeSend = function () {\n _this.beforeSend(ajax_2.httpRequest, ajax_2);\n };\n ajax_2.onSuccess = function (data, request) {\n if (_this.isGraphQLAdaptor(_this.adaptor)) {\n if (!isNullOrUndefined(data['errors'])) {\n ajax_2.onFailure(JSON.stringify(data['errors']));\n }\n }\n deff_1.resolve(_this.adaptor.processResponse(data, _this, null, request.httpRequest, request, changes, args));\n };\n ajax_2.onFailure = function (e) {\n deff_1.reject([{ error: e }]);\n };\n ajax_2.send().catch(function (e) { return true; }); // to handle the failure requests. \n return deff_1.promise;\n }\n else {\n return this.doAjaxRequest(req, this.adaptor.options.batchUpdate);\n }\n };\n /**\n * Inserts new record in the given table.\n * @param {Object} data - Defines the data to insert.\n * @param {string|Query} tableName - Defines the table name.\n * @param {Query} query - Sets default query for the DataManager.\n */\n DataManager.prototype.insert = function (data, tableName, query, position) {\n if (tableName instanceof Query) {\n query = tableName;\n tableName = null;\n }\n var req = this.adaptor.insert(this, data, tableName, query, position);\n var doAjaxRequest = 'doAjaxRequest';\n if (this.dataSource.offline) {\n return req;\n }\n if (!isNullOrUndefined(this.adaptor[doAjaxRequest])) {\n return this.adaptor[doAjaxRequest](req);\n }\n else {\n return this.doAjaxRequest(req, this.adaptor.options.addRecord);\n }\n };\n /**\n * Removes data from the table with the given key.\n * @param {string} keyField - Defines the column field.\n * @param {Object} value - Defines the value to find the data in the specified column.\n * @param {string|Query} tableName - Defines the table name\n * @param {Query} query - Sets default query for the DataManager.\n */\n DataManager.prototype.remove = function (keyField, value, tableName, query) {\n if (typeof value === 'object') {\n value = DataUtil.getObject(keyField, value);\n }\n if (tableName instanceof Query) {\n query = tableName;\n tableName = null;\n }\n var res = this.adaptor.remove(this, keyField, value, tableName, query);\n var doAjaxRequest = 'doAjaxRequest';\n if (this.dataSource.offline) {\n return res;\n }\n if (!isNullOrUndefined(this.adaptor[doAjaxRequest])) {\n return this.adaptor[doAjaxRequest](res);\n }\n else {\n var remove = this.adaptor.options.deleteRecord;\n return this.doAjaxRequest(res, remove);\n }\n };\n /**\n * Updates existing record in the given table.\n * @param {string} keyField - Defines the column field.\n * @param {Object} value - Defines the value to find the data in the specified column.\n * @param {string|Query} tableName - Defines the table name\n * @param {Query} query - Sets default query for the DataManager.\n */\n DataManager.prototype.update = function (keyField, value, tableName, query, original) {\n if (tableName instanceof Query) {\n query = tableName;\n tableName = null;\n }\n var res = this.adaptor.update(this, keyField, value, tableName, query, original);\n var doAjaxRequest = 'doAjaxRequest';\n if (this.dataSource.offline) {\n return res;\n }\n if (!isNullOrUndefined(this.adaptor[doAjaxRequest])) {\n return this.adaptor[doAjaxRequest](res);\n }\n else {\n var update = this.adaptor.options.updateRecord;\n return this.doAjaxRequest(res, update);\n }\n };\n DataManager.prototype.isCustomDataAdaptor = function (dataSource) {\n return this.adaptor.getModuleName &&\n this.adaptor.getModuleName() === 'CustomDataAdaptor';\n };\n DataManager.prototype.isGraphQLAdaptor = function (dataSource) {\n return this.adaptor.getModuleName &&\n this.adaptor.getModuleName() === 'GraphQLAdaptor';\n };\n DataManager.prototype.successFunc = function (record, request) {\n if (this.isGraphQLAdaptor(this.adaptor)) {\n var data = JSON.parse(record);\n if (!isNullOrUndefined(data['errors'])) {\n this.failureFunc(JSON.stringify(data['errors']));\n }\n }\n if (this.isCustomDataAdaptor(this.adaptor)) {\n request = extend({}, this.ajaxReqOption, request);\n }\n try {\n DataUtil.parse.parseJson(record);\n }\n catch (e) {\n record = [];\n }\n record = this.adaptor.processResponse(DataUtil.parse.parseJson(record), this, null, request.httpRequest, request);\n this.ajaxDeffered.resolve(record);\n };\n ;\n DataManager.prototype.failureFunc = function (e) {\n this.ajaxDeffered.reject([{ error: e }]);\n };\n ;\n DataManager.prototype.doAjaxRequest = function (res, ajaxFunc) {\n var _this = this;\n res = extend({}, {\n type: 'POST',\n contentType: 'application/json; charset=utf-8',\n processData: false\n }, res);\n this.ajaxDeffered = new Deferred();\n if (!this.isCustomDataAdaptor(this.adaptor)) {\n var ajax_3 = new Ajax(res);\n ajax_3.beforeSend = function () {\n _this.beforeSend(ajax_3.httpRequest, ajax_3);\n };\n ajax_3.onSuccess = this.successFunc.bind(this);\n ajax_3.onFailure = this.failureFunc.bind(this);\n ajax_3.send().catch(function (e) { return true; }); // to handle the failure requests.\n }\n else {\n this.ajaxReqOption = res;\n ajaxFunc.call(this, {\n data: res.data, onSuccess: this.successFunc.bind(this),\n onFailure: this.failureFunc.bind(this)\n });\n }\n return this.ajaxDeffered.promise;\n };\n return DataManager;\n}());\nexport { DataManager };\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 resolved.\n */\n this.then = this.promise.then.bind(this.promise);\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 return Deferred;\n}());\nexport { Deferred };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { DataManager } from './manager';\nimport { Query, Predicate } from './query';\nvar consts = { GroupGuid: '{271bbba0-1ee7}' };\n/**\n * Data manager common utility methods.\n * @hidden\n */\nvar DataUtil = /** @class */ (function () {\n function DataUtil() {\n }\n /**\n * Returns the value by invoking the provided parameter function.\n * If the paramater is not of type function then it will be returned as it is.\n * @param {Function|string|string[]|number} value\n * @param {Object} inst?\n * @hidden\n */\n DataUtil.getValue = function (value, inst) {\n if (typeof value === 'function') {\n return value.call(inst || {});\n }\n return value;\n };\n /**\n * Returns true if the input string ends with given string.\n * @param {string} input\n * @param {string} substr\n */\n DataUtil.endsWith = function (input, substr) {\n return input.slice && input.slice(-substr.length) === substr;\n };\n /**\n * Returns true if the input string starts with given string.\n * @param {string} str\n * @param {string} startstr\n */\n DataUtil.startsWith = function (input, start) {\n return input.slice(0, start.length) === start;\n };\n /**\n * To return the sorting function based on the string.\n * @param {string} order\n * @hidden\n */\n DataUtil.fnSort = function (order) {\n order = order ? DataUtil.toLowerCase(order) : 'ascending';\n if (order === 'ascending') {\n return this.fnAscending;\n }\n return this.fnDescending;\n };\n /**\n * Comparer function which is used to sort the data in ascending order.\n * @param {string|number} x\n * @param {string|number} y\n * @returns number\n */\n DataUtil.fnAscending = function (x, y) {\n if (isNullOrUndefined(x) && isNullOrUndefined(y)) {\n return -1;\n }\n if (y === null || y === undefined) {\n return -1;\n }\n if (typeof x === 'string') {\n return x.localeCompare(y);\n }\n if (x === null || x === undefined) {\n return 1;\n }\n return x - y;\n };\n /**\n * Comparer function which is used to sort the data in descending order.\n * @param {string|number} x\n * @param {string|number} y\n * @returns number\n */\n DataUtil.fnDescending = function (x, y) {\n if (isNullOrUndefined(x) && isNullOrUndefined(y)) {\n return -1;\n }\n if (y === null || y === undefined) {\n return 1;\n }\n if (typeof x === 'string') {\n return x.localeCompare(y) * -1;\n }\n if (x === null || x === undefined) {\n return -1;\n }\n return y - x;\n };\n DataUtil.extractFields = function (obj, fields) {\n var newObj = {};\n for (var i = 0; i < fields.length; i++) {\n newObj = this.setValue(fields[i], this.getObject(fields[i], obj), newObj);\n }\n return newObj;\n };\n /**\n * Select objects by given fields from jsonArray.\n * @param {Object[]} jsonArray\n * @param {string[]} fields\n */\n DataUtil.select = function (jsonArray, fields) {\n var newData = [];\n for (var i = 0; i < jsonArray.length; i++) {\n newData.push(this.extractFields(jsonArray[i], fields));\n }\n return newData;\n };\n /**\n * Group the input data based on the field name.\n * It also performs aggregation of the grouped records based on the aggregates paramater.\n * @param {Object[]} jsonArray\n * @param {string} field?\n * @param {Object[]} agg?\n * @param {number} level?\n * @param {Object[]} groupDs?\n */\n DataUtil.group = function (jsonArray, field, aggregates, level, groupDs, format, isLazyLoad) {\n level = level || 1;\n var jsonData = jsonArray;\n var guid = 'GroupGuid';\n if (jsonData.GroupGuid === consts[guid]) {\n var _loop_1 = function (j) {\n if (!isNullOrUndefined(groupDs)) {\n var indx = -1;\n var temp = groupDs.filter(function (e) { return e.key === jsonData[j].key; });\n indx = groupDs.indexOf(temp[0]);\n jsonData[j].items = this_1.group(jsonData[j].items, field, aggregates, jsonData.level + 1, groupDs[indx].items, format, isLazyLoad);\n jsonData[j].count = groupDs[indx].count;\n }\n else {\n jsonData[j].items = this_1.group(jsonData[j].items, field, aggregates, jsonData.level + 1, null, format, isLazyLoad);\n jsonData[j].count = jsonData[j].items.length;\n }\n };\n var this_1 = this;\n for (var j = 0; j < jsonData.length; j++) {\n _loop_1(j);\n }\n jsonData.childLevels += 1;\n return jsonData;\n }\n var grouped = {};\n var groupedArray = [];\n groupedArray.GroupGuid = consts[guid];\n groupedArray.level = level;\n groupedArray.childLevels = 0;\n groupedArray.records = jsonData;\n var _loop_2 = function (i) {\n var val = this_2.getVal(jsonData, i, field);\n if (!isNullOrUndefined(format)) {\n val = format(val, field);\n }\n if (!grouped[val]) {\n grouped[val] = {\n key: val,\n count: 0,\n items: [],\n aggregates: {},\n field: field\n };\n groupedArray.push(grouped[val]);\n if (!isNullOrUndefined(groupDs)) {\n var tempObj = groupDs.filter(function (e) { return e.key === grouped[val].key; });\n grouped[val].count = tempObj[0].count;\n }\n }\n grouped[val].count = !isNullOrUndefined(groupDs) ? grouped[val].count : grouped[val].count += 1;\n if (!isLazyLoad || (isLazyLoad && aggregates.length)) {\n grouped[val].items.push(jsonData[i]);\n }\n };\n var this_2 = this;\n for (var i = 0; i < jsonData.length; i++) {\n _loop_2(i);\n }\n if (aggregates && aggregates.length) {\n var _loop_3 = function (i) {\n var res = {};\n var fn = void 0;\n var aggs = aggregates;\n for (var j = 0; j < aggregates.length; j++) {\n fn = DataUtil.aggregates[aggregates[j].type];\n if (!isNullOrUndefined(groupDs)) {\n var temp = groupDs.filter(function (e) { return e.key === groupedArray[i].key; });\n if (fn) {\n res[aggs[j].field + ' - ' + aggs[j].type] = fn(temp[0].items, aggs[j].field);\n }\n }\n else {\n if (fn) {\n res[aggs[j].field + ' - ' + aggs[j].type] = fn(groupedArray[i].items, aggs[j].field);\n }\n }\n }\n groupedArray[i].aggregates = res;\n };\n for (var i = 0; i < groupedArray.length; i++) {\n _loop_3(i);\n }\n }\n if (isLazyLoad && groupedArray.length && aggregates.length) {\n for (var i = 0; i < groupedArray.length; i++) {\n groupedArray[i].items = [];\n }\n }\n return jsonData.length && groupedArray || jsonData;\n };\n /**\n * It is used to categorize the multiple items based on a specific field in jsonArray.\n * The hierarchical queries are commonly required when you use foreign key binding.\n * @param {string} fKey\n * @param {string} from\n * @param {Object[]} source\n * @param {Group} lookup?\n * @param {string} pKey?\n * @hidden\n */\n DataUtil.buildHierarchy = function (fKey, from, source, lookup, pKey) {\n var i;\n var grp = {};\n var temp;\n if (lookup.result) {\n lookup = lookup.result;\n }\n if (lookup.GroupGuid) {\n this.throwError('DataManager: Do not have support Grouping in hierarchy');\n }\n for (i = 0; i < lookup.length; i++) {\n var fKeyData = this.getObject(fKey, lookup[i]);\n temp = grp[fKeyData] || (grp[fKeyData] = []);\n temp.push(lookup[i]);\n }\n for (i = 0; i < source.length; i++) {\n var fKeyData = this.getObject(pKey || fKey, source[i]);\n source[i][from] = grp[fKeyData];\n }\n };\n /**\n * The method used to get the field names which started with specified characters.\n * @param {Object} obj\n * @param {string[]} fields?\n * @param {string} prefix?\n * @hidden\n */\n DataUtil.getFieldList = function (obj, fields, prefix) {\n if (prefix === undefined) {\n prefix = '';\n }\n if (fields === undefined || fields === null) {\n return this.getFieldList(obj, [], prefix);\n }\n var copyObj = obj;\n var keys = Object.keys(obj);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var prop = keys_1[_i];\n if (typeof copyObj[prop] === 'object' && !(copyObj[prop] instanceof Array)) {\n this.getFieldList(copyObj[prop], fields, prefix + prop + '.');\n }\n else {\n fields.push(prefix + prop);\n }\n }\n return fields;\n };\n /**\n * Gets the value of the property in the given object.\n * The complex object can be accessed by providing the field names concatenated with dot(.).\n * @param {string} nameSpace - The name of the property to be accessed.\n * @param {Object} from - Defines the source object.\n */\n DataUtil.getObject = function (nameSpace, from) {\n if (!nameSpace) {\n return from;\n }\n if (!from) {\n return undefined;\n }\n if (nameSpace.indexOf('.') === -1) {\n return from[nameSpace];\n }\n var value = from;\n var splits = nameSpace.split('.');\n for (var i = 0; i < splits.length; i++) {\n if (value == null) {\n break;\n }\n value = value[splits[i]];\n }\n return value;\n };\n /**\n * To set value for the nameSpace in desired object.\n * @param {string} nameSpace - String value to the get the inner object.\n * @param {Object} value - Value that you need to set.\n * @param {Object} obj - Object to get the inner object value.\n * @return { [key: string]: Object; } | Object\n * @hidden\n */\n DataUtil.setValue = function (nameSpace, value, obj) {\n var keys = nameSpace.toString().split('.');\n var start = obj || {};\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[i];\n if (i + 1 === length) {\n fromObj[key] = value === undefined ? undefined : value;\n }\n else if (isNullOrUndefined(fromObj[key])) {\n fromObj[key] = {};\n }\n fromObj = fromObj[key];\n }\n return start;\n };\n /**\n * Sort the given data based on the field and comparer.\n * @param {Object[]} ds - Defines the input data.\n * @param {string} field - Defines the field to be sorted.\n * @param {Function} comparer - Defines the comparer function used to sort the records.\n */\n DataUtil.sort = function (ds, field, comparer) {\n if (ds.length <= 1) {\n return ds;\n }\n var middle = parseInt((ds.length / 2).toString(), 10);\n var left = ds.slice(0, middle);\n var right = ds.slice(middle);\n left = this.sort(left, field, comparer);\n right = this.sort(right, field, comparer);\n return this.merge(left, right, field, comparer);\n };\n DataUtil.ignoreDiacritics = function (value) {\n if (typeof value !== 'string') {\n return value;\n }\n var result = value.split('');\n var newValue = result.map(function (temp) { return temp in DataUtil.diacritics ? DataUtil.diacritics[temp] : temp; });\n return newValue.join('');\n };\n DataUtil.merge = function (left, right, fieldName, comparer) {\n var result = [];\n var current;\n while (left.length > 0 || right.length > 0) {\n if (left.length > 0 && right.length > 0) {\n if (comparer) {\n current = comparer(this.getVal(left, 0, fieldName), this.getVal(right, 0, fieldName), left[0], right[0]) <= 0 ? left : right;\n }\n else {\n current = left[0][fieldName] < left[0][fieldName] ? left : right;\n }\n }\n else {\n current = left.length > 0 ? left : right;\n }\n result.push(current.shift());\n }\n return result;\n };\n DataUtil.getVal = function (array, index, field) {\n return field ? this.getObject(field, array[index]) : array[index];\n };\n DataUtil.toLowerCase = function (val) {\n return val ? typeof val === 'string' ? val.toLowerCase() : val.toString() : (val === 0 || val === false) ? val.toString() : '';\n };\n /**\n * To perform the filter operation with specified adaptor and returns the result.\n * @param {Object} adaptor\n * @param {string} fnName\n * @param {Object} param1?\n * @param {Object} param2?\n * @hidden\n */\n DataUtil.callAdaptorFunction = function (adaptor, fnName, param1, param2) {\n if (fnName in adaptor) {\n var res = adaptor[fnName](param1, param2);\n if (!isNullOrUndefined(res)) {\n param1 = res;\n }\n }\n return param1;\n };\n DataUtil.getAddParams = function (adp, dm, query) {\n var req = {};\n DataUtil.callAdaptorFunction(adp, 'addParams', {\n dm: dm,\n query: query,\n params: query.params,\n reqParams: req\n });\n return req;\n };\n /**\n * Checks wheather the given input is a plain object or not.\n * @param {Object|Object[]} obj\n */\n DataUtil.isPlainObject = function (obj) {\n return (!!obj) && (obj.constructor === Object);\n };\n /**\n * Returns true when the browser cross origin request.\n */\n DataUtil.isCors = function () {\n var xhr = null;\n var request = 'XMLHttpRequest';\n try {\n xhr = new window[request]();\n }\n catch (e) {\n // No exception handling\n }\n return !!xhr && ('withCredentials' in xhr);\n };\n /**\n * Generate random GUID value which will be prefixed with the given value.\n * @param {string} prefix\n */\n DataUtil.getGuid = function (prefix) {\n var hexs = '0123456789abcdef';\n var rand;\n return (prefix || '') + '00000000-0000-4000-0000-000000000000'.replace(/0/g, function (val, i) {\n if ('crypto' in window && 'getRandomValues' in crypto) {\n var arr = new Uint8Array(1);\n window.crypto.getRandomValues(arr);\n rand = arr[0] % 16 | 0;\n }\n else {\n rand = Math.random() * 16 | 0;\n }\n return hexs[i === 19 ? rand & 0x3 | 0x8 : rand];\n });\n };\n /**\n * Checks wheather the given value is null or not.\n * @param {string|Object} val\n * @returns boolean\n */\n DataUtil.isNull = function (val) {\n return val === undefined || val === null;\n };\n /**\n * To get the required items from collection of objects.\n * @param {Object[]} array\n * @param {string} field\n * @param {Function} comparer\n * @returns Object\n * @hidden\n */\n DataUtil.getItemFromComparer = function (array, field, comparer) {\n var keyVal;\n var current;\n var key;\n var i = 0;\n var castRequired = typeof DataUtil.getVal(array, 0, field) === 'string';\n if (array.length) {\n while (isNullOrUndefined(keyVal) && i < array.length) {\n keyVal = DataUtil.getVal(array, i, field);\n key = array[i++];\n }\n }\n for (; i < array.length; i++) {\n current = DataUtil.getVal(array, i, field);\n if (isNullOrUndefined(current)) {\n continue;\n }\n if (castRequired) {\n keyVal = +keyVal;\n current = +current;\n }\n if (comparer(keyVal, current) > 0) {\n keyVal = current;\n key = array[i];\n }\n }\n return key;\n };\n /**\n * To get distinct values of Array or Array of Objects.\n * @param {Object[]} json\n * @param {string} field\n * @param {boolean} requiresCompleteRecord\n * @returns Object[]\n * * distinct array of objects is return when requiresCompleteRecord set as true.\n * @hidden\n */\n DataUtil.distinct = function (json, fieldName, requiresCompleteRecord) {\n requiresCompleteRecord = isNullOrUndefined(requiresCompleteRecord) ? false : requiresCompleteRecord;\n var result = [];\n var val;\n var tmp = {};\n json.forEach(function (data, index) {\n val = typeof (json[index]) === 'object' ? DataUtil.getVal(json, index, fieldName) : json[index];\n if (!(val in tmp)) {\n result.push(!requiresCompleteRecord ? val : json[index]);\n tmp[val] = 1;\n }\n });\n return result;\n };\n /**\n * Process the given records based on the datamanager string.\n * @param {string} datamanager\n * @param {Object[]} records\n */\n DataUtil.processData = function (dm, records) {\n var query = this.prepareQuery(dm);\n var sampledata = new DataManager(records);\n if (dm.requiresCounts) {\n query.requiresCount();\n }\n var result = sampledata.executeLocal(query);\n var returnValue = {\n result: dm.requiresCounts ? result.result : result,\n count: result.count,\n aggregates: JSON.stringify(result.aggregates)\n };\n return dm.requiresCounts ? returnValue : result;\n };\n DataUtil.prepareQuery = function (dm) {\n var _this = this;\n var query = new Query();\n if (dm.select) {\n query.select(dm.select);\n }\n if (dm.where) {\n var where = DataUtil.parse.parseJson(dm.where);\n where.filter(function (pred) {\n if (isNullOrUndefined(pred.condition)) {\n query.where(pred.field, pred.operator, pred.value, pred.ignoreCase, pred.ignoreAccent);\n }\n else {\n var predicateList = [];\n if (pred.field) {\n predicateList.push(new Predicate(pred.field, pred.operator, pred.value, pred.ignoreCase, pred.ignoreAccent));\n }\n else {\n predicateList = predicateList.concat(_this.getPredicate(pred.predicates));\n }\n if (pred.condition == 'or') {\n query.where(Predicate.or(predicateList));\n }\n else if (pred.condition == 'and') {\n query.where(Predicate.and(predicateList));\n }\n }\n });\n }\n if (dm.search) {\n var search = DataUtil.parse.parseJson(dm.search);\n search.filter(function (e) { return query.search(e.key, e.fields, e['operator'], e['ignoreCase'], e['ignoreAccent']); });\n }\n if (dm.aggregates) {\n dm.aggregates.filter(function (e) { return query.aggregate(e.type, e.field); });\n }\n if (dm.sorted) {\n dm.sorted.filter(function (e) { return query.sortBy(e.name, e.direction); });\n }\n if (dm.skip) {\n query.skip(dm.skip);\n }\n if (dm.take) {\n query.take(dm.take);\n }\n if (dm.group) {\n dm.group.filter(function (grp) { return query.group(grp); });\n }\n return query;\n };\n DataUtil.getPredicate = function (pred) {\n var mainPred = [];\n for (var i = 0; i < pred.length; i++) {\n var e = pred[i];\n if (e.field) {\n mainPred.push(new Predicate(e.field, e.operator, e.value, e.ignoreCase, e.ignoreAccent));\n }\n else {\n var childPred = [];\n var cpre = this.getPredicate(e.predicates);\n for (var _i = 0, _a = Object.keys(cpre); _i < _a.length; _i++) {\n var prop = _a[_i];\n childPred.push(cpre[prop]);\n }\n mainPred.push(e.condition == 'or' ? Predicate.or(childPred) : Predicate.and(childPred));\n }\n }\n return mainPred;\n };\n /**\n * Specifies the value which will be used to adjust the date value to server timezone.\n * @default null\n */\n DataUtil.serverTimezoneOffset = null;\n /**\n * Species whether are not to be parsed with serverTimezoneOffset value.\n * @hidden\n */\n DataUtil.timeZoneHandling = true;\n /**\n * Throw error with the given string as message.\n * @param {string} er\n */\n DataUtil.throwError = function (error) {\n try {\n throw new Error(error);\n }\n catch (e) {\n throw e.message + '\\n' + e.stack;\n }\n };\n DataUtil.aggregates = {\n /**\n * Calculate sum of the given field in the data.\n * @param {Object[]} ds\n * @param {string} field\n */\n sum: function (ds, field) {\n var result = 0;\n var val;\n var castRequired = typeof DataUtil.getVal(ds, 0, field) !== 'number';\n for (var i = 0; i < ds.length; i++) {\n val = DataUtil.getVal(ds, i, field);\n if (!isNaN(val) && val !== null) {\n if (castRequired) {\n val = +val;\n }\n result += val;\n }\n }\n return result;\n },\n /**\n * Calculate average value of the given field in the data.\n * @param {Object[]} ds\n * @param {string} field\n */\n average: function (ds, field) {\n return DataUtil.aggregates.sum(ds, field) / ds.length;\n },\n /**\n * Returns the min value of the data based on the field.\n * @param {Object[]} ds\n * @param {string|Function} field\n */\n min: function (ds, field) {\n var comparer;\n if (typeof field === 'function') {\n comparer = field;\n field = null;\n }\n return DataUtil.getObject(field, DataUtil.getItemFromComparer(ds, field, comparer || DataUtil.fnAscending));\n },\n /**\n * Returns the max value of the data based on the field.\n * @param {Object[]} ds\n * @param {string} field\n * @returns number\n */\n max: function (ds, field) {\n var comparer;\n if (typeof field === 'function') {\n comparer = field;\n field = null;\n }\n return DataUtil.getObject(field, DataUtil.getItemFromComparer(ds, field, comparer || DataUtil.fnDescending));\n },\n /**\n * Returns the total number of true value present in the data based on the given boolean field name.\n * @param {Object[]} ds\n * @param {string} field\n */\n truecount: function (ds, field) {\n return new DataManager(ds).executeLocal(new Query().where(field, 'equal', true, true)).length;\n },\n /**\n * Returns the total number of false value present in the data based on the given boolean field name.\n * @param {Object[]} ds\n * @param {string} field\n */\n falsecount: function (ds, field) {\n return new DataManager(ds).executeLocal(new Query().where(field, 'equal', false, true)).length;\n },\n /**\n * Returns the length of the given data.\n * @param {Object[]} ds\n * @param {string} field?\n * @returns number\n */\n count: function (ds, field) {\n return ds.length;\n }\n };\n /**\n * Specifies the Object with filter operators.\n */\n DataUtil.operatorSymbols = {\n '<': 'lessthan',\n '>': 'greaterthan',\n '<=': 'lessthanorequal',\n '>=': 'greaterthanorequal',\n '==': 'equal',\n '!=': 'notequal',\n '*=': 'contains',\n '$=': 'endswith',\n '^=': 'startswith'\n };\n /**\n * Specifies the Object with filter operators which will be used for OData filter query generation.\n * * It will be used for date/number type filter query.\n */\n DataUtil.odBiOperator = {\n '<': ' lt ',\n '>': ' gt ',\n '<=': ' le ',\n '>=': ' ge ',\n '==': ' eq ',\n '!=': ' ne ',\n 'lessthan': ' lt ',\n 'lessthanorequal': ' le ',\n 'greaterthan': ' gt ',\n 'greaterthanorequal': ' ge ',\n 'equal': ' eq ',\n 'notequal': ' ne '\n };\n /**\n * Specifies the Object with filter operators which will be used for OData filter query generation.\n * It will be used for string type filter query.\n */\n DataUtil.odUniOperator = {\n '$=': 'endswith',\n '^=': 'startswith',\n '*=': 'substringof',\n 'endswith': 'endswith',\n 'startswith': 'startswith',\n 'contains': 'substringof'\n };\n /**\n * Specifies the Object with filter operators which will be used for ODataV4 filter query generation.\n * It will be used for string type filter query.\n */\n DataUtil.odv4UniOperator = {\n '$=': 'endswith',\n '^=': 'startswith',\n '*=': 'contains',\n 'endswith': 'endswith',\n 'startswith': 'startswith',\n 'contains': 'contains'\n };\n DataUtil.diacritics = {\n '\\u24B6': 'A',\n '\\uFF21': 'A',\n '\\u00C0': 'A',\n '\\u00C1': 'A',\n '\\u00C2': 'A',\n '\\u1EA6': 'A',\n '\\u1EA4': 'A',\n '\\u1EAA': 'A',\n '\\u1EA8': 'A',\n '\\u00C3': 'A',\n '\\u0100': 'A',\n '\\u0102': 'A',\n '\\u1EB0': 'A',\n '\\u1EAE': 'A',\n '\\u1EB4': 'A',\n '\\u1EB2': 'A',\n '\\u0226': 'A',\n '\\u01E0': 'A',\n '\\u00C4': 'A',\n '\\u01DE': 'A',\n '\\u1EA2': 'A',\n '\\u00C5': 'A',\n '\\u01FA': 'A',\n '\\u01CD': 'A',\n '\\u0200': 'A',\n '\\u0202': 'A',\n '\\u1EA0': 'A',\n '\\u1EAC': 'A',\n '\\u1EB6': 'A',\n '\\u1E00': 'A',\n '\\u0104': 'A',\n '\\u023A': 'A',\n '\\u2C6F': 'A',\n '\\uA732': 'AA',\n '\\u00C6': 'AE',\n '\\u01FC': 'AE',\n '\\u01E2': 'AE',\n '\\uA734': 'AO',\n '\\uA736': 'AU',\n '\\uA738': 'AV',\n '\\uA73A': 'AV',\n '\\uA73C': 'AY',\n '\\u24B7': 'B',\n '\\uFF22': 'B',\n '\\u1E02': 'B',\n '\\u1E04': 'B',\n '\\u1E06': 'B',\n '\\u0243': 'B',\n '\\u0182': 'B',\n '\\u0181': 'B',\n '\\u24B8': 'C',\n '\\uFF23': 'C',\n '\\u0106': 'C',\n '\\u0108': 'C',\n '\\u010A': 'C',\n '\\u010C': 'C',\n '\\u00C7': 'C',\n '\\u1E08': 'C',\n '\\u0187': 'C',\n '\\u023B': 'C',\n '\\uA73E': 'C',\n '\\u24B9': 'D',\n '\\uFF24': 'D',\n '\\u1E0A': 'D',\n '\\u010E': 'D',\n '\\u1E0C': 'D',\n '\\u1E10': 'D',\n '\\u1E12': 'D',\n '\\u1E0E': 'D',\n '\\u0110': 'D',\n '\\u018B': 'D',\n '\\u018A': 'D',\n '\\u0189': 'D',\n '\\uA779': 'D',\n '\\u01F1': 'DZ',\n '\\u01C4': 'DZ',\n '\\u01F2': 'Dz',\n '\\u01C5': 'Dz',\n '\\u24BA': 'E',\n '\\uFF25': 'E',\n '\\u00C8': 'E',\n '\\u00C9': 'E',\n '\\u00CA': 'E',\n '\\u1EC0': 'E',\n '\\u1EBE': 'E',\n '\\u1EC4': 'E',\n '\\u1EC2': 'E',\n '\\u1EBC': 'E',\n '\\u0112': 'E',\n '\\u1E14': 'E',\n '\\u1E16': 'E',\n '\\u0114': 'E',\n '\\u0116': 'E',\n '\\u00CB': 'E',\n '\\u1EBA': 'E',\n '\\u011A': 'E',\n '\\u0204': 'E',\n '\\u0206': 'E',\n '\\u1EB8': 'E',\n '\\u1EC6': 'E',\n '\\u0228': 'E',\n '\\u1E1C': 'E',\n '\\u0118': 'E',\n '\\u1E18': 'E',\n '\\u1E1A': 'E',\n '\\u0190': 'E',\n '\\u018E': 'E',\n '\\u24BB': 'F',\n '\\uFF26': 'F',\n '\\u1E1E': 'F',\n '\\u0191': 'F',\n '\\uA77B': 'F',\n '\\u24BC': 'G',\n '\\uFF27': 'G',\n '\\u01F4': 'G',\n '\\u011C': 'G',\n '\\u1E20': 'G',\n '\\u011E': 'G',\n '\\u0120': 'G',\n '\\u01E6': 'G',\n '\\u0122': 'G',\n '\\u01E4': 'G',\n '\\u0193': 'G',\n '\\uA7A0': 'G',\n '\\uA77D': 'G',\n '\\uA77E': 'G',\n '\\u24BD': 'H',\n '\\uFF28': 'H',\n '\\u0124': 'H',\n '\\u1E22': 'H',\n '\\u1E26': 'H',\n '\\u021E': 'H',\n '\\u1E24': 'H',\n '\\u1E28': 'H',\n '\\u1E2A': 'H',\n '\\u0126': 'H',\n '\\u2C67': 'H',\n '\\u2C75': 'H',\n '\\uA78D': 'H',\n '\\u24BE': 'I',\n '\\uFF29': 'I',\n '\\u00CC': 'I',\n '\\u00CD': 'I',\n '\\u00CE': 'I',\n '\\u0128': 'I',\n '\\u012A': 'I',\n '\\u012C': 'I',\n '\\u0130': 'I',\n '\\u00CF': 'I',\n '\\u1E2E': 'I',\n '\\u1EC8': 'I',\n '\\u01CF': 'I',\n '\\u0208': 'I',\n '\\u020A': 'I',\n '\\u1ECA': 'I',\n '\\u012E': 'I',\n '\\u1E2C': 'I',\n '\\u0197': 'I',\n '\\u24BF': 'J',\n '\\uFF2A': 'J',\n '\\u0134': 'J',\n '\\u0248': 'J',\n '\\u24C0': 'K',\n '\\uFF2B': 'K',\n '\\u1E30': 'K',\n '\\u01E8': 'K',\n '\\u1E32': 'K',\n '\\u0136': 'K',\n '\\u1E34': 'K',\n '\\u0198': 'K',\n '\\u2C69': 'K',\n '\\uA740': 'K',\n '\\uA742': 'K',\n '\\uA744': 'K',\n '\\uA7A2': 'K',\n '\\u24C1': 'L',\n '\\uFF2C': 'L',\n '\\u013F': 'L',\n '\\u0139': 'L',\n '\\u013D': 'L',\n '\\u1E36': 'L',\n '\\u1E38': 'L',\n '\\u013B': 'L',\n '\\u1E3C': 'L',\n '\\u1E3A': 'L',\n '\\u0141': 'L',\n '\\u023D': 'L',\n '\\u2C62': 'L',\n '\\u2C60': 'L',\n '\\uA748': 'L',\n '\\uA746': 'L',\n '\\uA780': 'L',\n '\\u01C7': 'LJ',\n '\\u01C8': 'Lj',\n '\\u24C2': 'M',\n '\\uFF2D': 'M',\n '\\u1E3E': 'M',\n '\\u1E40': 'M',\n '\\u1E42': 'M',\n '\\u2C6E': 'M',\n '\\u019C': 'M',\n '\\u24C3': 'N',\n '\\uFF2E': 'N',\n '\\u01F8': 'N',\n '\\u0143': 'N',\n '\\u00D1': 'N',\n '\\u1E44': 'N',\n '\\u0147': 'N',\n '\\u1E46': 'N',\n '\\u0145': 'N',\n '\\u1E4A': 'N',\n '\\u1E48': 'N',\n '\\u0220': 'N',\n '\\u019D': 'N',\n '\\uA790': 'N',\n '\\uA7A4': 'N',\n '\\u01CA': 'NJ',\n '\\u01CB': 'Nj',\n '\\u24C4': 'O',\n '\\uFF2F': 'O',\n '\\u00D2': 'O',\n '\\u00D3': 'O',\n '\\u00D4': 'O',\n '\\u1ED2': 'O',\n '\\u1ED0': 'O',\n '\\u1ED6': 'O',\n '\\u1ED4': 'O',\n '\\u00D5': 'O',\n '\\u1E4C': 'O',\n '\\u022C': 'O',\n '\\u1E4E': 'O',\n '\\u014C': 'O',\n '\\u1E50': 'O',\n '\\u1E52': 'O',\n '\\u014E': 'O',\n '\\u022E': 'O',\n '\\u0230': 'O',\n '\\u00D6': 'O',\n '\\u022A': 'O',\n '\\u1ECE': 'O',\n '\\u0150': 'O',\n '\\u01D1': 'O',\n '\\u020C': 'O',\n '\\u020E': 'O',\n '\\u01A0': 'O',\n '\\u1EDC': 'O',\n '\\u1EDA': 'O',\n '\\u1EE0': 'O',\n '\\u1EDE': 'O',\n '\\u1EE2': 'O',\n '\\u1ECC': 'O',\n '\\u1ED8': 'O',\n '\\u01EA': 'O',\n '\\u01EC': 'O',\n '\\u00D8': 'O',\n '\\u01FE': 'O',\n '\\u0186': 'O',\n '\\u019F': 'O',\n '\\uA74A': 'O',\n '\\uA74C': 'O',\n '\\u01A2': 'OI',\n '\\uA74E': 'OO',\n '\\u0222': 'OU',\n '\\u24C5': 'P',\n '\\uFF30': 'P',\n '\\u1E54': 'P',\n '\\u1E56': 'P',\n '\\u01A4': 'P',\n '\\u2C63': 'P',\n '\\uA750': 'P',\n '\\uA752': 'P',\n '\\uA754': 'P',\n '\\u24C6': 'Q',\n '\\uFF31': 'Q',\n '\\uA756': 'Q',\n '\\uA758': 'Q',\n '\\u024A': 'Q',\n '\\u24C7': 'R',\n '\\uFF32': 'R',\n '\\u0154': 'R',\n '\\u1E58': 'R',\n '\\u0158': 'R',\n '\\u0210': 'R',\n '\\u0212': 'R',\n '\\u1E5A': 'R',\n '\\u1E5C': 'R',\n '\\u0156': 'R',\n '\\u1E5E': 'R',\n '\\u024C': 'R',\n '\\u2C64': 'R',\n '\\uA75A': 'R',\n '\\uA7A6': 'R',\n '\\uA782': 'R',\n '\\u24C8': 'S',\n '\\uFF33': 'S',\n '\\u1E9E': 'S',\n '\\u015A': 'S',\n '\\u1E64': 'S',\n '\\u015C': 'S',\n '\\u1E60': 'S',\n '\\u0160': 'S',\n '\\u1E66': 'S',\n '\\u1E62': 'S',\n '\\u1E68': 'S',\n '\\u0218': 'S',\n '\\u015E': 'S',\n '\\u2C7E': 'S',\n '\\uA7A8': 'S',\n '\\uA784': 'S',\n '\\u24C9': 'T',\n '\\uFF34': 'T',\n '\\u1E6A': 'T',\n '\\u0164': 'T',\n '\\u1E6C': 'T',\n '\\u021A': 'T',\n '\\u0162': 'T',\n '\\u1E70': 'T',\n '\\u1E6E': 'T',\n '\\u0166': 'T',\n '\\u01AC': 'T',\n '\\u01AE': 'T',\n '\\u023E': 'T',\n '\\uA786': 'T',\n '\\uA728': 'TZ',\n '\\u24CA': 'U',\n '\\uFF35': 'U',\n '\\u00D9': 'U',\n '\\u00DA': 'U',\n '\\u00DB': 'U',\n '\\u0168': 'U',\n '\\u1E78': 'U',\n '\\u016A': 'U',\n '\\u1E7A': 'U',\n '\\u016C': 'U',\n '\\u00DC': 'U',\n '\\u01DB': 'U',\n '\\u01D7': 'U',\n '\\u01D5': 'U',\n '\\u01D9': 'U',\n '\\u1EE6': 'U',\n '\\u016E': 'U',\n '\\u0170': 'U',\n '\\u01D3': 'U',\n '\\u0214': 'U',\n '\\u0216': 'U',\n '\\u01AF': 'U',\n '\\u1EEA': 'U',\n '\\u1EE8': 'U',\n '\\u1EEE': 'U',\n '\\u1EEC': 'U',\n '\\u1EF0': 'U',\n '\\u1EE4': 'U',\n '\\u1E72': 'U',\n '\\u0172': 'U',\n '\\u1E76': 'U',\n '\\u1E74': 'U',\n '\\u0244': 'U',\n '\\u24CB': 'V',\n '\\uFF36': 'V',\n '\\u1E7C': 'V',\n '\\u1E7E': 'V',\n '\\u01B2': 'V',\n '\\uA75E': 'V',\n '\\u0245': 'V',\n '\\uA760': 'VY',\n '\\u24CC': 'W',\n '\\uFF37': 'W',\n '\\u1E80': 'W',\n '\\u1E82': 'W',\n '\\u0174': 'W',\n '\\u1E86': 'W',\n '\\u1E84': 'W',\n '\\u1E88': 'W',\n '\\u2C72': 'W',\n '\\u24CD': 'X',\n '\\uFF38': 'X',\n '\\u1E8A': 'X',\n '\\u1E8C': 'X',\n '\\u24CE': 'Y',\n '\\uFF39': 'Y',\n '\\u1EF2': 'Y',\n '\\u00DD': 'Y',\n '\\u0176': 'Y',\n '\\u1EF8': 'Y',\n '\\u0232': 'Y',\n '\\u1E8E': 'Y',\n '\\u0178': 'Y',\n '\\u1EF6': 'Y',\n '\\u1EF4': 'Y',\n '\\u01B3': 'Y',\n '\\u024E': 'Y',\n '\\u1EFE': 'Y',\n '\\u24CF': 'Z',\n '\\uFF3A': 'Z',\n '\\u0179': 'Z',\n '\\u1E90': 'Z',\n '\\u017B': 'Z',\n '\\u017D': 'Z',\n '\\u1E92': 'Z',\n '\\u1E94': 'Z',\n '\\u01B5': 'Z',\n '\\u0224': 'Z',\n '\\u2C7F': 'Z',\n '\\u2C6B': 'Z',\n '\\uA762': 'Z',\n '\\u24D0': 'a',\n '\\uFF41': 'a',\n '\\u1E9A': 'a',\n '\\u00E0': 'a',\n '\\u00E1': 'a',\n '\\u00E2': 'a',\n '\\u1EA7': 'a',\n '\\u1EA5': 'a',\n '\\u1EAB': 'a',\n '\\u1EA9': 'a',\n '\\u00E3': 'a',\n '\\u0101': 'a',\n '\\u0103': 'a',\n '\\u1EB1': 'a',\n '\\u1EAF': 'a',\n '\\u1EB5': 'a',\n '\\u1EB3': 'a',\n '\\u0227': 'a',\n '\\u01E1': 'a',\n '\\u00E4': 'a',\n '\\u01DF': 'a',\n '\\u1EA3': 'a',\n '\\u00E5': 'a',\n '\\u01FB': 'a',\n '\\u01CE': 'a',\n '\\u0201': 'a',\n '\\u0203': 'a',\n '\\u1EA1': 'a',\n '\\u1EAD': 'a',\n '\\u1EB7': 'a',\n '\\u1E01': 'a',\n '\\u0105': 'a',\n '\\u2C65': 'a',\n '\\u0250': 'a',\n '\\uA733': 'aa',\n '\\u00E6': 'ae',\n '\\u01FD': 'ae',\n '\\u01E3': 'ae',\n '\\uA735': 'ao',\n '\\uA737': 'au',\n '\\uA739': 'av',\n '\\uA73B': 'av',\n '\\uA73D': 'ay',\n '\\u24D1': 'b',\n '\\uFF42': 'b',\n '\\u1E03': 'b',\n '\\u1E05': 'b',\n '\\u1E07': 'b',\n '\\u0180': 'b',\n '\\u0183': 'b',\n '\\u0253': 'b',\n '\\u24D2': 'c',\n '\\uFF43': 'c',\n '\\u0107': 'c',\n '\\u0109': 'c',\n '\\u010B': 'c',\n '\\u010D': 'c',\n '\\u00E7': 'c',\n '\\u1E09': 'c',\n '\\u0188': 'c',\n '\\u023C': 'c',\n '\\uA73F': 'c',\n '\\u2184': 'c',\n '\\u24D3': 'd',\n '\\uFF44': 'd',\n '\\u1E0B': 'd',\n '\\u010F': 'd',\n '\\u1E0D': 'd',\n '\\u1E11': 'd',\n '\\u1E13': 'd',\n '\\u1E0F': 'd',\n '\\u0111': 'd',\n '\\u018C': 'd',\n '\\u0256': 'd',\n '\\u0257': 'd',\n '\\uA77A': 'd',\n '\\u01F3': 'dz',\n '\\u01C6': 'dz',\n '\\u24D4': 'e',\n '\\uFF45': 'e',\n '\\u00E8': 'e',\n '\\u00E9': 'e',\n '\\u00EA': 'e',\n '\\u1EC1': 'e',\n '\\u1EBF': 'e',\n '\\u1EC5': 'e',\n '\\u1EC3': 'e',\n '\\u1EBD': 'e',\n '\\u0113': 'e',\n '\\u1E15': 'e',\n '\\u1E17': 'e',\n '\\u0115': 'e',\n '\\u0117': 'e',\n '\\u00EB': 'e',\n '\\u1EBB': 'e',\n '\\u011B': 'e',\n '\\u0205': 'e',\n '\\u0207': 'e',\n '\\u1EB9': 'e',\n '\\u1EC7': 'e',\n '\\u0229': 'e',\n '\\u1E1D': 'e',\n '\\u0119': 'e',\n '\\u1E19': 'e',\n '\\u1E1B': 'e',\n '\\u0247': 'e',\n '\\u025B': 'e',\n '\\u01DD': 'e',\n '\\u24D5': 'f',\n '\\uFF46': 'f',\n '\\u1E1F': 'f',\n '\\u0192': 'f',\n '\\uA77C': 'f',\n '\\u24D6': 'g',\n '\\uFF47': 'g',\n '\\u01F5': 'g',\n '\\u011D': 'g',\n '\\u1E21': 'g',\n '\\u011F': 'g',\n '\\u0121': 'g',\n '\\u01E7': 'g',\n '\\u0123': 'g',\n '\\u01E5': 'g',\n '\\u0260': 'g',\n '\\uA7A1': 'g',\n '\\u1D79': 'g',\n '\\uA77F': 'g',\n '\\u24D7': 'h',\n '\\uFF48': 'h',\n '\\u0125': 'h',\n '\\u1E23': 'h',\n '\\u1E27': 'h',\n '\\u021F': 'h',\n '\\u1E25': 'h',\n '\\u1E29': 'h',\n '\\u1E2B': 'h',\n '\\u1E96': 'h',\n '\\u0127': 'h',\n '\\u2C68': 'h',\n '\\u2C76': 'h',\n '\\u0265': 'h',\n '\\u0195': 'hv',\n '\\u24D8': 'i',\n '\\uFF49': 'i',\n '\\u00EC': 'i',\n '\\u00ED': 'i',\n '\\u00EE': 'i',\n '\\u0129': 'i',\n '\\u012B': 'i',\n '\\u012D': 'i',\n '\\u00EF': 'i',\n '\\u1E2F': 'i',\n '\\u1EC9': 'i',\n '\\u01D0': 'i',\n '\\u0209': 'i',\n '\\u020B': 'i',\n '\\u1ECB': 'i',\n '\\u012F': 'i',\n '\\u1E2D': 'i',\n '\\u0268': 'i',\n '\\u0131': 'i',\n '\\u24D9': 'j',\n '\\uFF4A': 'j',\n '\\u0135': 'j',\n '\\u01F0': 'j',\n '\\u0249': 'j',\n '\\u24DA': 'k',\n '\\uFF4B': 'k',\n '\\u1E31': 'k',\n '\\u01E9': 'k',\n '\\u1E33': 'k',\n '\\u0137': 'k',\n '\\u1E35': 'k',\n '\\u0199': 'k',\n '\\u2C6A': 'k',\n '\\uA741': 'k',\n '\\uA743': 'k',\n '\\uA745': 'k',\n '\\uA7A3': 'k',\n '\\u24DB': 'l',\n '\\uFF4C': 'l',\n '\\u0140': 'l',\n '\\u013A': 'l',\n '\\u013E': 'l',\n '\\u1E37': 'l',\n '\\u1E39': 'l',\n '\\u013C': 'l',\n '\\u1E3D': 'l',\n '\\u1E3B': 'l',\n '\\u017F': 'l',\n '\\u0142': 'l',\n '\\u019A': 'l',\n '\\u026B': 'l',\n '\\u2C61': 'l',\n '\\uA749': 'l',\n '\\uA781': 'l',\n '\\uA747': 'l',\n '\\u01C9': 'lj',\n '\\u24DC': 'm',\n '\\uFF4D': 'm',\n '\\u1E3F': 'm',\n '\\u1E41': 'm',\n '\\u1E43': 'm',\n '\\u0271': 'm',\n '\\u026F': 'm',\n '\\u24DD': 'n',\n '\\uFF4E': 'n',\n '\\u01F9': 'n',\n '\\u0144': 'n',\n '\\u00F1': 'n',\n '\\u1E45': 'n',\n '\\u0148': 'n',\n '\\u1E47': 'n',\n '\\u0146': 'n',\n '\\u1E4B': 'n',\n '\\u1E49': 'n',\n '\\u019E': 'n',\n '\\u0272': 'n',\n '\\u0149': 'n',\n '\\uA791': 'n',\n '\\uA7A5': 'n',\n '\\u01CC': 'nj',\n '\\u24DE': 'o',\n '\\uFF4F': 'o',\n '\\u00F2': 'o',\n '\\u00F3': 'o',\n '\\u00F4': 'o',\n '\\u1ED3': 'o',\n '\\u1ED1': 'o',\n '\\u1ED7': 'o',\n '\\u1ED5': 'o',\n '\\u00F5': 'o',\n '\\u1E4D': 'o',\n '\\u022D': 'o',\n '\\u1E4F': 'o',\n '\\u014D': 'o',\n '\\u1E51': 'o',\n '\\u1E53': 'o',\n '\\u014F': 'o',\n '\\u022F': 'o',\n '\\u0231': 'o',\n '\\u00F6': 'o',\n '\\u022B': 'o',\n '\\u1ECF': 'o',\n '\\u0151': 'o',\n '\\u01D2': 'o',\n '\\u020D': 'o',\n '\\u020F': 'o',\n '\\u01A1': 'o',\n '\\u1EDD': 'o',\n '\\u1EDB': 'o',\n '\\u1EE1': 'o',\n '\\u1EDF': 'o',\n '\\u1EE3': 'o',\n '\\u1ECD': 'o',\n '\\u1ED9': 'o',\n '\\u01EB': 'o',\n '\\u01ED': 'o',\n '\\u00F8': 'o',\n '\\u01FF': 'o',\n '\\u0254': 'o',\n '\\uA74B': 'o',\n '\\uA74D': 'o',\n '\\u0275': 'o',\n '\\u01A3': 'oi',\n '\\u0223': 'ou',\n '\\uA74F': 'oo',\n '\\u24DF': 'p',\n '\\uFF50': 'p',\n '\\u1E55': 'p',\n '\\u1E57': 'p',\n '\\u01A5': 'p',\n '\\u1D7D': 'p',\n '\\uA751': 'p',\n '\\uA753': 'p',\n '\\uA755': 'p',\n '\\u24E0': 'q',\n '\\uFF51': 'q',\n '\\u024B': 'q',\n '\\uA757': 'q',\n '\\uA759': 'q',\n '\\u24E1': 'r',\n '\\uFF52': 'r',\n '\\u0155': 'r',\n '\\u1E59': 'r',\n '\\u0159': 'r',\n '\\u0211': 'r',\n '\\u0213': 'r',\n '\\u1E5B': 'r',\n '\\u1E5D': 'r',\n '\\u0157': 'r',\n '\\u1E5F': 'r',\n '\\u024D': 'r',\n '\\u027D': 'r',\n '\\uA75B': 'r',\n '\\uA7A7': 'r',\n '\\uA783': 'r',\n '\\u24E2': 's',\n '\\uFF53': 's',\n '\\u00DF': 's',\n '\\u015B': 's',\n '\\u1E65': 's',\n '\\u015D': 's',\n '\\u1E61': 's',\n '\\u0161': 's',\n '\\u1E67': 's',\n '\\u1E63': 's',\n '\\u1E69': 's',\n '\\u0219': 's',\n '\\u015F': 's',\n '\\u023F': 's',\n '\\uA7A9': 's',\n '\\uA785': 's',\n '\\u1E9B': 's',\n '\\u24E3': 't',\n '\\uFF54': 't',\n '\\u1E6B': 't',\n '\\u1E97': 't',\n '\\u0165': 't',\n '\\u1E6D': 't',\n '\\u021B': 't',\n '\\u0163': 't',\n '\\u1E71': 't',\n '\\u1E6F': 't',\n '\\u0167': 't',\n '\\u01AD': 't',\n '\\u0288': 't',\n '\\u2C66': 't',\n '\\uA787': 't',\n '\\uA729': 'tz',\n '\\u24E4': 'u',\n '\\uFF55': 'u',\n '\\u00F9': 'u',\n '\\u00FA': 'u',\n '\\u00FB': 'u',\n '\\u0169': 'u',\n '\\u1E79': 'u',\n '\\u016B': 'u',\n '\\u1E7B': 'u',\n '\\u016D': 'u',\n '\\u00FC': 'u',\n '\\u01DC': 'u',\n '\\u01D8': 'u',\n '\\u01D6': 'u',\n '\\u01DA': 'u',\n '\\u1EE7': 'u',\n '\\u016F': 'u',\n '\\u0171': 'u',\n '\\u01D4': 'u',\n '\\u0215': 'u',\n '\\u0217': 'u',\n '\\u01B0': 'u',\n '\\u1EEB': 'u',\n '\\u1EE9': 'u',\n '\\u1EEF': 'u',\n '\\u1EED': 'u',\n '\\u1EF1': 'u',\n '\\u1EE5': 'u',\n '\\u1E73': 'u',\n '\\u0173': 'u',\n '\\u1E77': 'u',\n '\\u1E75': 'u',\n '\\u0289': 'u',\n '\\u24E5': 'v',\n '\\uFF56': 'v',\n '\\u1E7D': 'v',\n '\\u1E7F': 'v',\n '\\u028B': 'v',\n '\\uA75F': 'v',\n '\\u028C': 'v',\n '\\uA761': 'vy',\n '\\u24E6': 'w',\n '\\uFF57': 'w',\n '\\u1E81': 'w',\n '\\u1E83': 'w',\n '\\u0175': 'w',\n '\\u1E87': 'w',\n '\\u1E85': 'w',\n '\\u1E98': 'w',\n '\\u1E89': 'w',\n '\\u2C73': 'w',\n '\\u24E7': 'x',\n '\\uFF58': 'x',\n '\\u1E8B': 'x',\n '\\u1E8D': 'x',\n '\\u24E8': 'y',\n '\\uFF59': 'y',\n '\\u1EF3': 'y',\n '\\u00FD': 'y',\n '\\u0177': 'y',\n '\\u1EF9': 'y',\n '\\u0233': 'y',\n '\\u1E8F': 'y',\n '\\u00FF': 'y',\n '\\u1EF7': 'y',\n '\\u1E99': 'y',\n '\\u1EF5': 'y',\n '\\u01B4': 'y',\n '\\u024F': 'y',\n '\\u1EFF': 'y',\n '\\u24E9': 'z',\n '\\uFF5A': 'z',\n '\\u017A': 'z',\n '\\u1E91': 'z',\n '\\u017C': 'z',\n '\\u017E': 'z',\n '\\u1E93': 'z',\n '\\u1E95': 'z',\n '\\u01B6': 'z',\n '\\u0225': 'z',\n '\\u0240': 'z',\n '\\u2C6C': 'z',\n '\\uA763': 'z',\n '\\u0386': '\\u0391',\n '\\u0388': '\\u0395',\n '\\u0389': '\\u0397',\n '\\u038A': '\\u0399',\n '\\u03AA': '\\u0399',\n '\\u038C': '\\u039F',\n '\\u038E': '\\u03A5',\n '\\u03AB': '\\u03A5',\n '\\u038F': '\\u03A9',\n '\\u03AC': '\\u03B1',\n '\\u03AD': '\\u03B5',\n '\\u03AE': '\\u03B7',\n '\\u03AF': '\\u03B9',\n '\\u03CA': '\\u03B9',\n '\\u0390': '\\u03B9',\n '\\u03CC': '\\u03BF',\n '\\u03CD': '\\u03C5',\n '\\u03CB': '\\u03C5',\n '\\u03B0': '\\u03C5',\n '\\u03C9': '\\u03C9',\n '\\u03C2': '\\u03C3'\n };\n DataUtil.fnOperators = {\n /**\n * Returns true when the actual input is equal to the given input.\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n * @param {boolean} ignoreAccent?\n */\n equal: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) === DataUtil.toLowerCase(expected);\n }\n return actual === expected;\n },\n /**\n * Returns true when the actual input is not equal to the given input.\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n */\n notequal: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n return !DataUtil.fnOperators.equal(actual, expected, ignoreCase);\n },\n /**\n * Returns true when the actual input is less than to the given input.\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n */\n lessthan: function (actual, expected, ignoreCase) {\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) < DataUtil.toLowerCase(expected);\n }\n if (isNullOrUndefined(actual)) {\n actual = undefined;\n }\n return actual < expected;\n },\n /**\n * Returns true when the actual input is greater than to the given input.\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n */\n greaterthan: function (actual, expected, ignoreCase) {\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) > DataUtil.toLowerCase(expected);\n }\n return actual > expected;\n },\n /**\n * Returns true when the actual input is less than or equal to the given input.\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n */\n lessthanorequal: function (actual, expected, ignoreCase) {\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) <= DataUtil.toLowerCase(expected);\n }\n if (isNullOrUndefined(actual)) {\n actual = undefined;\n }\n return actual <= expected;\n },\n /**\n * Returns true when the actual input is greater than or equal to the given input.\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n */\n greaterthanorequal: function (actual, expected, ignoreCase) {\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) >= DataUtil.toLowerCase(expected);\n }\n return actual >= expected;\n },\n /**\n * Returns true when the actual input contains the given string.\n * @param {string|number} actual\n * @param {string|number} expected\n * @param {boolean} ignoreCase?\n */\n contains: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return !isNullOrUndefined(actual) && !isNullOrUndefined(expected) &&\n DataUtil.toLowerCase(actual).indexOf(DataUtil.toLowerCase(expected)) !== -1;\n }\n return !isNullOrUndefined(actual) && !isNullOrUndefined(expected) &&\n actual.toString().indexOf(expected) !== -1;\n },\n /**\n * Returns true when the given input value is not null.\n * @param {string|number} actual\n * @returns boolean\n */\n notnull: function (actual) {\n return actual !== null;\n },\n /**\n * Returns true when the given input value is null.\n * @param {string|number} actual\n * @returns boolean\n */\n isnull: function (actual) {\n return actual === null;\n },\n /**\n * Returns true when the actual input starts with the given string\n * @param {string} actual\n * @param {string} expected\n * @param {boolean} ignoreCase?\n */\n startswith: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return actual && expected && DataUtil.startsWith(DataUtil.toLowerCase(actual), DataUtil.toLowerCase(expected));\n }\n return actual && expected && DataUtil.startsWith(actual, expected);\n },\n /**\n * Returns true when the actual input ends with the given string.\n * @param {string} actual\n * @param {string} expected\n * @param {boolean} ignoreCase?\n */\n endswith: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return actual && expected && DataUtil.endsWith(DataUtil.toLowerCase(actual), DataUtil.toLowerCase(expected));\n }\n return actual && expected && DataUtil.endsWith(actual, expected);\n },\n /**\n * It will return the filter operator based on the filter symbol.\n * @param {string} operator\n * @hidden\n */\n processSymbols: function (operator) {\n var fnName = DataUtil.operatorSymbols[operator];\n if (fnName) {\n var fn = DataUtil.fnOperators[fnName];\n return fn;\n }\n return DataUtil.throwError('Query - Process Operator : Invalid operator');\n },\n /**\n * It will return the valid filter operator based on the specified operators.\n * @param {string} operator\n * @hidden\n */\n processOperator: function (operator) {\n var fn = DataUtil.fnOperators[operator];\n if (fn) {\n return fn;\n }\n return DataUtil.fnOperators.processSymbols(operator);\n }\n };\n /**\n * To perform the parse operation on JSON data, like convert to string from JSON or convert to JSON from string.\n */\n DataUtil.parse = {\n /**\n * Parse the given string to the plain JavaScript object.\n * @param {string|Object|Object[]} jsonText\n */\n parseJson: function (jsonText) {\n if (typeof jsonText === 'string') {\n jsonText = JSON.parse(jsonText, DataUtil.parse.jsonReviver);\n }\n else if (jsonText instanceof Array) {\n DataUtil.parse.iterateAndReviveArray(jsonText);\n }\n else if (typeof jsonText === 'object' && jsonText !== null) {\n DataUtil.parse.iterateAndReviveJson(jsonText);\n }\n return jsonText;\n },\n /**\n * It will perform on array of values.\n * @param {string[]|Object[]} array\n * @hidden\n */\n iterateAndReviveArray: function (array) {\n for (var i = 0; i < array.length; i++) {\n if (typeof array[i] === 'object' && array[i] !== null) {\n DataUtil.parse.iterateAndReviveJson(array[i]);\n }\n else if (typeof array[i] === 'string' && !/^[\\s]*\\[|^[\\s]*\\{(.)+:|\\\"/g.test(array[i])) {\n array[i] = DataUtil.parse.jsonReviver('', array[i]);\n }\n else {\n array[i] = DataUtil.parse.parseJson(array[i]);\n }\n }\n },\n /**\n * It will perform on JSON values\n * @param {JSON} json\n * @hidden\n */\n iterateAndReviveJson: function (json) {\n var value;\n var keys = Object.keys(json);\n for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {\n var prop = keys_2[_i];\n if (DataUtil.startsWith(prop, '__')) {\n continue;\n }\n value = json[prop];\n if (typeof value === 'object') {\n if (value instanceof Array) {\n DataUtil.parse.iterateAndReviveArray(value);\n }\n else if (value) {\n DataUtil.parse.iterateAndReviveJson(value);\n }\n }\n else {\n json[prop] = DataUtil.parse.jsonReviver(json[prop], value);\n }\n }\n },\n /**\n * It will perform on JSON values\n * @param {string} field\n * @param {string|Date} value\n * @hidden\n */\n jsonReviver: function (field, value) {\n if (typeof value === 'string') {\n var ms = /^\\/Date\\(([+-]?[0-9]+)([+-][0-9]{4})?\\)\\/$/.exec(value);\n var offSet = DataUtil.timeZoneHandling ? DataUtil.serverTimezoneOffset : null;\n if (ms) {\n return DataUtil.dateParse.toTimeZone(new Date(parseInt(ms[1], 10)), offSet, true);\n }\n else if (/^(\\d{4}\\-\\d\\d\\-\\d\\d([tT][\\d:\\.]*){1})([zZ]|([+\\-])(\\d\\d):?(\\d\\d))?$/.test(value)) {\n var isUTC = value.indexOf('Z') > -1 || value.indexOf('z') > -1;\n var arr = value.split(/[^0-9.]/);\n if (isUTC) {\n value = DataUtil.dateParse\n .toTimeZone(new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), parseInt(arr[4], 10), parseInt(arr[5], 10)), DataUtil.serverTimezoneOffset, false);\n }\n else {\n var utcFormat = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), parseInt(arr[4], 10), parseInt(arr[5], 10));\n var hrs = parseInt(arr[6], 10);\n var mins = parseInt(arr[7], 10);\n if (isNaN(hrs) && isNaN(mins)) {\n return utcFormat;\n }\n if (value.indexOf('+') > -1) {\n utcFormat.setHours(utcFormat.getHours() - hrs, utcFormat.getMinutes() - mins);\n }\n else {\n utcFormat.setHours(utcFormat.getHours() + hrs, utcFormat.getMinutes() + mins);\n }\n value = DataUtil.dateParse\n .toTimeZone(utcFormat, DataUtil.serverTimezoneOffset, false);\n }\n if (DataUtil.serverTimezoneOffset == null) {\n value = DataUtil.dateParse.addSelfOffset(value);\n }\n }\n }\n return value;\n },\n /**\n * Check wheather the given value is JSON or not.\n * @param {Object[]} jsonData\n */\n isJson: function (jsonData) {\n if (typeof jsonData[0] === 'string') {\n return jsonData;\n }\n return DataUtil.parse.parseJson(jsonData);\n },\n /**\n * Checks wheather the given value is GUID or not.\n * @param {string} value\n */\n isGuid: function (value) {\n var regex = /[A-Fa-f0-9]{8}(?:-[A-Fa-f0-9]{4}){3}-[A-Fa-f0-9]{12}/i;\n var match = regex.exec(value);\n return match != null;\n },\n /**\n * The method used to replace the value based on the type.\n * @param {Object} value\n * @param {boolean} stringify\n * @hidden\n */\n replacer: function (value, stringify) {\n if (DataUtil.isPlainObject(value)) {\n return DataUtil.parse.jsonReplacer(value, stringify);\n }\n if (value instanceof Array) {\n return DataUtil.parse.arrayReplacer(value);\n }\n if (value instanceof Date) {\n return DataUtil.parse.jsonReplacer({ val: value }, stringify).val;\n }\n return value;\n },\n /**\n * It will replace the JSON value.\n * @param {string} key\n * @param {Object} val\n * @hidden\n */\n jsonReplacer: function (val, stringify) {\n var value;\n var keys = Object.keys(val);\n for (var _i = 0, keys_3 = keys; _i < keys_3.length; _i++) {\n var prop = keys_3[_i];\n value = val[prop];\n if (!(value instanceof Date)) {\n continue;\n }\n var d = value;\n if (DataUtil.serverTimezoneOffset == null) {\n val[prop] = DataUtil.dateParse.toTimeZone(d, null).toJSON();\n }\n else {\n d = new Date(+d + DataUtil.serverTimezoneOffset * 3600000);\n val[prop] = DataUtil.dateParse.toTimeZone(DataUtil.dateParse.addSelfOffset(d), null).toJSON();\n }\n }\n return val;\n },\n /**\n * It will replace the Array of value.\n * @param {string} key\n * @param {Object[]} val\n * @hidden\n */\n arrayReplacer: function (val) {\n for (var i = 0; i < val.length; i++) {\n if (DataUtil.isPlainObject(val[i])) {\n val[i] = DataUtil.parse.jsonReplacer(val[i]);\n }\n else if (val[i] instanceof Date) {\n val[i] = DataUtil.parse.jsonReplacer({ date: val[i] }).date;\n }\n }\n return val;\n },\n /**\n * It will replace the Date object with respective to UTC format value.\n * @param {string} key\n * @param {any} value\n * @hidden\n */\n /* tslint:disable-next-line:no-any */\n jsonDateReplacer: function (key, value) {\n if (key === 'value' && value) {\n if (typeof value === 'string') {\n var ms = /^\\/Date\\(([+-]?[0-9]+)([+-][0-9]{4})?\\)\\/$/.exec(value);\n if (ms) {\n value = DataUtil.dateParse.toTimeZone(new Date(parseInt(ms[1], 10)), null, true);\n }\n else if (/^(\\d{4}\\-\\d\\d\\-\\d\\d([tT][\\d:\\.]*){1})([zZ]|([+\\-])(\\d\\d):?(\\d\\d))?$/.test(value)) {\n var arr = value.split(/[^0-9]/);\n value = DataUtil.dateParse\n .toTimeZone(new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), parseInt(arr[4], 10), parseInt(arr[5], 10)), null, true);\n }\n }\n if (value instanceof Date) {\n value = DataUtil.dateParse.addSelfOffset(value);\n if (DataUtil.serverTimezoneOffset === null) {\n return DataUtil.dateParse.toTimeZone(DataUtil.dateParse.addSelfOffset(value), null).toJSON();\n }\n else {\n value = DataUtil.dateParse.toTimeZone(value, (((value.getTimezoneOffset() / 60) * 2)\n - DataUtil.serverTimezoneOffset), false);\n return value.toJSON();\n }\n }\n }\n return value;\n }\n };\n /**\n * @hidden\n */\n DataUtil.dateParse = {\n addSelfOffset: function (input) {\n return new Date(+input - (input.getTimezoneOffset() * 60000));\n },\n toUTC: function (input) {\n return new Date(+input + (input.getTimezoneOffset() * 60000));\n },\n toTimeZone: function (input, offset, utc) {\n if (offset === null) {\n return input;\n }\n var unix = utc ? DataUtil.dateParse.toUTC(input) : input;\n return new Date(+unix - (offset * 3600000));\n },\n toLocalTime: function (input) {\n var datefn = input;\n var timeZone = -datefn.getTimezoneOffset();\n var differenceString = timeZone >= 0 ? '+' : '-';\n var localtimefn = function (num) {\n var norm = Math.floor(Math.abs(num));\n return (norm < 10 ? '0' : '') + norm;\n };\n var val = datefn.getFullYear() + '-' + localtimefn(datefn.getMonth() + 1) + '-' + localtimefn(datefn.getDate()) +\n 'T' + localtimefn(datefn.getHours()) +\n ':' + localtimefn(datefn.getMinutes()) +\n ':' + localtimefn(datefn.getSeconds()) +\n differenceString + localtimefn(timeZone / 60) +\n ':' + localtimefn(timeZone % 60);\n return val;\n }\n };\n return DataUtil;\n}());\nexport { DataUtil };\n","import { DataUtil } from './util';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * Query class is used to build query which is used by the DataManager to communicate with datasource.\n */\nvar Query = /** @class */ (function () {\n /**\n * Constructor for Query class.\n * @param {string|string[]} from?\n * @hidden\n */\n function Query(from) {\n /** @hidden */\n this.subQuery = null;\n /** @hidden */\n this.isChild = false;\n /** @hidden */\n this.distincts = [];\n this.queries = [];\n this.key = '';\n this.fKey = '';\n if (typeof from === 'string') {\n this.fromTable = from;\n }\n else if (from && from instanceof Array) {\n this.lookups = from;\n }\n this.expands = [];\n this.sortedColumns = [];\n this.groupedColumns = [];\n this.subQuery = null;\n this.isChild = false;\n this.params = [];\n this.lazyLoad = [];\n return this;\n }\n /**\n * Sets the primary key.\n * @param {string} field - Defines the column field.\n */\n Query.prototype.setKey = function (field) {\n this.key = field;\n return this;\n };\n /**\n * Sets default DataManager to execute query.\n * @param {DataManager} dataManager - Defines the DataManager.\n */\n Query.prototype.using = function (dataManager) {\n this.dataManager = dataManager;\n return this;\n };\n /**\n * Executes query with the given DataManager.\n * @param {DataManager} dataManager - Defines the DataManager.\n * @param {Function} done - Defines the success callback.\n * @param {Function} fail - Defines the failure callback.\n * @param {Function} always - Defines the callback which will be invoked on either success or failure.\n *\n * \n * let dataManager: DataManager = new DataManager([{ ID: '10' }, { ID: '2' }, { ID: '1' }, { ID: '20' }]);\n * let query: Query = new Query();\n * query.sortBy('ID', (x: string, y: string): number => { return parseInt(x, 10) - parseInt(y, 10) });\n * let promise: Promise< Object > = query.execute(dataManager);\n * promise.then((e: { result: Object }) => { });\n *
\n */\n Query.prototype.execute = function (dataManager, done, fail, always) {\n dataManager = dataManager || this.dataManager;\n if (dataManager) {\n return dataManager.executeQuery(this, done, fail, always);\n }\n return DataUtil.throwError('Query - execute() : dataManager needs to be is set using \"using\" function or should be passed as argument');\n };\n /**\n * Executes query with the local datasource.\n * @param {DataManager} dataManager - Defines the DataManager.\n */\n Query.prototype.executeLocal = function (dataManager) {\n dataManager = dataManager || this.dataManager;\n if (dataManager) {\n return dataManager.executeLocal(this);\n }\n return DataUtil.throwError('Query - executeLocal() : dataManager needs to be is set using \"using\" function or should be passed as argument');\n };\n /**\n * Creates deep copy of the Query object.\n */\n Query.prototype.clone = function () {\n var cloned = new Query();\n cloned.queries = this.queries.slice(0);\n cloned.key = this.key;\n cloned.isChild = this.isChild;\n cloned.dataManager = this.dataManager;\n cloned.fromTable = this.fromTable;\n cloned.params = this.params.slice(0);\n cloned.expands = this.expands.slice(0);\n cloned.sortedColumns = this.sortedColumns.slice(0);\n cloned.groupedColumns = this.groupedColumns.slice(0);\n cloned.subQuerySelector = this.subQuerySelector;\n cloned.subQuery = this.subQuery;\n cloned.fKey = this.fKey;\n cloned.isCountRequired = this.isCountRequired;\n cloned.distincts = this.distincts.slice(0);\n cloned.lazyLoad = this.lazyLoad.slice(0);\n return cloned;\n };\n /**\n * Specifies the name of table to retrieve data in query execution.\n * @param {string} tableName - Defines the table name.\n */\n Query.prototype.from = function (tableName) {\n this.fromTable = tableName;\n return this;\n };\n /**\n * Adds additional parameter which will be sent along with the request which will be generated while DataManager execute.\n * @param {string} key - Defines the key of additional parameter.\n * @param {Function|string} value - Defines the value for the key.\n */\n Query.prototype.addParams = function (key, value) {\n if (typeof value === 'function') {\n this.params.push({ key: key, fn: value });\n }\n else {\n this.params.push({ key: key, value: value });\n }\n return this;\n };\n /**\n * @hidden\n */\n Query.prototype.distinct = function (fields) {\n if (typeof fields === 'string') {\n this.distincts = [].slice.call([fields], 0);\n }\n else {\n this.distincts = fields.slice(0);\n }\n return this;\n };\n /**\n * Expands the related table.\n * @param {string|Object[]} tables\n */\n Query.prototype.expand = function (tables) {\n if (typeof tables === 'string') {\n this.expands = [].slice.call([tables], 0);\n }\n else {\n this.expands = tables.slice(0);\n }\n return this;\n };\n /**\n * Filter data with given filter criteria.\n * @param {string|Predicate} fieldName - Defines the column field or Predicate.\n * @param {string} operator - Defines the operator how to filter data.\n * @param {string|number|boolean} value - Defines the values to match with data.\n * @param {boolean} ignoreCase - If ignore case set to false, then filter data with exact match or else\n * filter data with case insensitive.\n */\n Query.prototype.where = function (fieldName, operator, value, ignoreCase, ignoreAccent) {\n operator = operator ? (operator).toLowerCase() : null;\n var predicate = null;\n if (typeof fieldName === 'string') {\n predicate = new Predicate(fieldName, operator, value, ignoreCase, ignoreAccent);\n }\n else if (fieldName instanceof Predicate) {\n predicate = fieldName;\n }\n this.queries.push({\n fn: 'onWhere',\n e: predicate\n });\n return this;\n };\n /**\n * Search data with given search criteria.\n * @param {string|number|boolean} searchKey - Defines the search key.\n * @param {string|string[]} fieldNames - Defines the collection of column fields.\n * @param {string} operator - Defines the operator how to search data.\n * @param {boolean} ignoreCase - If ignore case set to false, then filter data with exact match or else\n * filter data with case insensitive.\n */\n Query.prototype.search = function (searchKey, fieldNames, operator, ignoreCase, ignoreAccent) {\n if (typeof fieldNames === 'string') {\n fieldNames = [fieldNames];\n }\n if (!operator || operator === 'none') {\n operator = 'contains';\n }\n var comparer = DataUtil.fnOperators[operator];\n this.queries.push({\n fn: 'onSearch',\n e: {\n fieldNames: fieldNames,\n operator: operator,\n searchKey: searchKey,\n ignoreCase: ignoreCase,\n ignoreAccent: ignoreAccent,\n comparer: comparer\n }\n });\n return this;\n };\n /**\n * Sort the data with given sort criteria.\n * By default, sort direction is ascending.\n * @param {string|string[]} fieldName - Defines the single or collection of column fields.\n * @param {string|Function} comparer - Defines the sort direction or custom sort comparer function.\n */\n Query.prototype.sortBy = function (fieldName, comparer, isFromGroup) {\n return this.sortByForeignKey(fieldName, comparer, isFromGroup);\n };\n /**\n * Sort the data with given sort criteria.\n * By default, sort direction is ascending.\n * @param {string|string[]} fieldName - Defines the single or collection of column fields.\n * @param {string|Function} comparer - Defines the sort direction or custom sort comparer function.\n * @param {string} direction - Defines the sort direction .\n */\n Query.prototype.sortByForeignKey = function (fieldName, comparer, isFromGroup, direction) {\n var order = !isNullOrUndefined(direction) ? direction : 'ascending';\n var sorts;\n var temp;\n if (typeof fieldName === 'string' && DataUtil.endsWith(fieldName.toLowerCase(), ' desc')) {\n fieldName = fieldName.replace(/ desc$/i, '');\n comparer = 'descending';\n }\n if (!comparer || typeof comparer === 'string') {\n order = comparer ? comparer.toLowerCase() : 'ascending';\n comparer = DataUtil.fnSort(comparer);\n }\n if (isFromGroup) {\n sorts = Query.filterQueries(this.queries, 'onSortBy');\n for (var i = 0; i < sorts.length; i++) {\n temp = sorts[i].e.fieldName;\n if (typeof temp === 'string') {\n if (temp === fieldName) {\n return this;\n }\n }\n else if (temp instanceof Array) {\n for (var j = 0; j < temp.length; j++) {\n if (temp[j] === fieldName || fieldName.toLowerCase() === temp[j] + ' desc') {\n return this;\n }\n }\n }\n }\n }\n this.queries.push({\n fn: 'onSortBy',\n e: {\n fieldName: fieldName,\n comparer: comparer,\n direction: order\n }\n });\n return this;\n };\n /**\n * Sorts data in descending order.\n * @param {string} fieldName - Defines the column field.\n */\n Query.prototype.sortByDesc = function (fieldName) {\n return this.sortBy(fieldName, 'descending');\n };\n /**\n * Groups data with the given field name.\n * @param {string} fieldName - Defines the column field.\n */\n Query.prototype.group = function (fieldName, fn, format) {\n this.sortBy(fieldName, null, true);\n this.queries.push({\n fn: 'onGroup',\n e: {\n fieldName: fieldName,\n comparer: fn ? fn : null,\n format: format ? format : null\n }\n });\n return this;\n };\n /**\n * Gets data based on the given page index and size.\n * @param {number} pageIndex - Defines the current page index.\n * @param {number} pageSize - Defines the no of records per page.\n */\n Query.prototype.page = function (pageIndex, pageSize) {\n this.queries.push({\n fn: 'onPage',\n e: {\n pageIndex: pageIndex,\n pageSize: pageSize\n }\n });\n return this;\n };\n /**\n * Gets data based on the given start and end index.\n * @param {number} start - Defines the start index of the datasource.\n * @param {number} end - Defines the end index of the datasource.\n */\n Query.prototype.range = function (start, end) {\n this.queries.push({\n fn: 'onRange',\n e: {\n start: start,\n end: end\n }\n });\n return this;\n };\n /**\n * Gets data from the top of the data source based on given number of records count.\n * @param {number} nos - Defines the no of records to retrieve from datasource.\n */\n Query.prototype.take = function (nos) {\n this.queries.push({\n fn: 'onTake',\n e: {\n nos: nos\n }\n });\n return this;\n };\n /**\n * Skips data with given number of records count from the top of the data source.\n * @param {number} nos - Defines the no of records skip in the datasource.\n */\n Query.prototype.skip = function (nos) {\n this.queries.push({\n fn: 'onSkip',\n e: { nos: nos }\n });\n return this;\n };\n /**\n * Selects specified columns from the data source.\n * @param {string|string[]} fieldNames - Defines the collection of column fields.\n */\n Query.prototype.select = function (fieldNames) {\n if (typeof fieldNames === 'string') {\n fieldNames = [].slice.call([fieldNames], 0);\n }\n this.queries.push({\n fn: 'onSelect',\n e: { fieldNames: fieldNames }\n });\n return this;\n };\n /**\n * Gets the records in hierarchical relationship from two tables. It requires the foreign key to relate two tables.\n * @param {Query} query - Defines the query to relate two tables.\n * @param {Function} selectorFn - Defines the custom function to select records.\n */\n Query.prototype.hierarchy = function (query, selectorFn) {\n this.subQuerySelector = selectorFn;\n this.subQuery = query;\n return this;\n };\n /**\n * Sets the foreign key which is used to get data from the related table.\n * @param {string} key - Defines the foreign key.\n */\n Query.prototype.foreignKey = function (key) {\n this.fKey = key;\n return this;\n };\n /**\n * It is used to get total number of records in the DataManager execution result.\n */\n Query.prototype.requiresCount = function () {\n this.isCountRequired = true;\n return this;\n };\n //type - sum, avg, min, max\n /**\n * Aggregate the data with given type and field name.\n * @param {string} type - Defines the aggregate type.\n * @param {string} field - Defines the column field to aggregate.\n */\n Query.prototype.aggregate = function (type, field) {\n this.queries.push({\n fn: 'onAggregates',\n e: { field: field, type: type }\n });\n return this;\n };\n /**\n * Pass array of filterColumn query for performing filter operation.\n * @param {QueryOptions[]} queries\n * @param {string} name\n * @hidden\n */\n Query.filterQueries = function (queries, name) {\n return queries.filter(function (q) {\n return q.fn === name;\n });\n };\n /**\n * To get the list of queries which is already filtered in current data source.\n * @param {Object[]} queries\n * @param {string[]} singles\n * @hidden\n */\n Query.filterQueryLists = function (queries, singles) {\n var filtered = queries.filter(function (q) {\n return singles.indexOf(q.fn) !== -1;\n });\n var res = {};\n for (var i = 0; i < filtered.length; i++) {\n if (!res[filtered[i].fn]) {\n res[filtered[i].fn] = filtered[i].e;\n }\n }\n return res;\n };\n return Query;\n}());\nexport { Query };\n/**\n * Predicate class is used to generate complex filter criteria.\n * This will be used by DataManager to perform multiple filtering operation.\n */\nvar Predicate = /** @class */ (function () {\n /**\n * Constructor for Predicate class.\n * @param {string|Predicate} field\n * @param {string} operator\n * @param {string|number|boolean|Predicate|Predicate[]} value\n * @param {boolean=false} ignoreCase\n * @hidden\n */\n function Predicate(field, operator, value, ignoreCase, ignoreAccent) {\n if (ignoreCase === void 0) { ignoreCase = false; }\n /** @hidden */\n this.ignoreAccent = false;\n /** @hidden */\n this.isComplex = false;\n if (typeof field === 'string') {\n this.field = field;\n this.operator = operator.toLowerCase();\n this.value = value;\n this.ignoreCase = ignoreCase;\n this.ignoreAccent = ignoreAccent;\n this.isComplex = false;\n this.comparer = DataUtil.fnOperators.processOperator(this.operator);\n }\n else if (field instanceof Predicate && value instanceof Predicate || value instanceof Array) {\n this.isComplex = true;\n this.condition = operator.toLowerCase();\n this.predicates = [field];\n if (value instanceof Array) {\n [].push.apply(this.predicates, value);\n }\n else {\n this.predicates.push(value);\n }\n }\n return this;\n }\n /**\n * Adds n-number of new predicates on existing predicate with “and” condition.\n * @param {Object[]} args - Defines the collection of predicates.\n */\n Predicate.and = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n return Predicate.combinePredicates([].slice.call(args, 0), 'and');\n };\n /**\n * Adds new predicate on existing predicate with “and” condition.\n * @param {string} field - Defines the column field.\n * @param {string} operator - Defines the operator how to filter data.\n * @param {string} value - Defines the values to match with data.\n * @param {boolean} ignoreCase? - If ignore case set to false, then filter data with exact match or else\n * filter data with case insensitive.\n */\n Predicate.prototype.and = function (field, operator, value, ignoreCase, ignoreAccent) {\n return Predicate.combine(this, field, operator, value, 'and', ignoreCase, ignoreAccent);\n };\n /**\n * Adds n-number of new predicates on existing predicate with “or” condition.\n * @param {Object[]} args - Defines the collection of predicates.\n */\n Predicate.or = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n return Predicate.combinePredicates([].slice.call(args, 0), 'or');\n };\n /**\n * Adds new predicate on existing predicate with “or” condition.\n * @param {string} field - Defines the column field.\n * @param {string} operator - Defines the operator how to filter data.\n * @param {string} value - Defines the values to match with data.\n * @param {boolean} ignoreCase? - If ignore case set to false, then filter data with exact match or else\n * filter data with case insensitive.\n */\n Predicate.prototype.or = function (field, operator, value, ignoreCase, ignoreAccent) {\n return Predicate.combine(this, field, operator, value, 'or', ignoreCase, ignoreAccent);\n };\n /**\n * Converts plain JavaScript object to Predicate object.\n * @param {Predicate[]|Predicate} json - Defines single or collection of Predicate.\n */\n Predicate.fromJson = function (json) {\n if (json instanceof Array) {\n var res = [];\n for (var i = 0, len = json.length; i < len; i++) {\n res.push(this.fromJSONData(json[i]));\n }\n return res;\n }\n var pred = json;\n return this.fromJSONData(pred);\n };\n /**\n * Validate the record based on the predicates.\n * @param {Object} record - Defines the datasource record.\n */\n Predicate.prototype.validate = function (record) {\n var predicate = this.predicates ? this.predicates : [];\n var isAnd;\n var ret;\n if (!this.isComplex && this.comparer) {\n return this.comparer.call(this, DataUtil.getObject(this.field, record), this.value, this.ignoreCase, this.ignoreAccent);\n }\n isAnd = this.condition === 'and';\n for (var i = 0; i < predicate.length; i++) {\n ret = predicate[i].validate(record);\n if (isAnd) {\n if (!ret) {\n return false;\n }\n }\n else {\n if (ret) {\n return true;\n }\n }\n }\n return isAnd;\n };\n /**\n * Converts predicates to plain JavaScript.\n * This method is uses Json stringify when serializing Predicate object.\n */\n Predicate.prototype.toJson = function () {\n var predicates;\n var p;\n if (this.isComplex) {\n predicates = [];\n p = this.predicates;\n for (var i = 0; i < p.length; i++) {\n predicates.push(p[i].toJson());\n }\n }\n return {\n isComplex: this.isComplex,\n field: this.field,\n operator: this.operator,\n value: this.value,\n ignoreCase: this.ignoreCase,\n ignoreAccent: this.ignoreAccent,\n condition: this.condition,\n predicates: predicates\n };\n };\n Predicate.combinePredicates = function (predicates, operator) {\n if (predicates.length === 1) {\n if (!(predicates[0] instanceof Array)) {\n return predicates[0];\n }\n predicates = predicates[0];\n }\n return new Predicate(predicates[0], operator, predicates.slice(1));\n };\n Predicate.combine = function (pred, field, operator, value, condition, ignoreCase, ignoreAccent) {\n if (field instanceof Predicate) {\n return Predicate[condition](pred, field);\n }\n if (typeof field === 'string') {\n return Predicate[condition](pred, new Predicate(field, operator, value, ignoreCase, ignoreAccent));\n }\n return DataUtil.throwError('Predicate - ' + condition + ' : invalid arguments');\n };\n Predicate.fromJSONData = function (json) {\n var preds = json.predicates || [];\n var len = preds.length;\n var predicates = [];\n var result;\n for (var i = 0; i < len; i++) {\n predicates.push(this.fromJSONData(preds[i]));\n }\n if (!json.isComplex) {\n result = new Predicate(json.field, json.operator, json.value, json.ignoreCase, json.ignoreAccent);\n }\n else {\n result = new Predicate(predicates[0], json.condition, predicates.slice(1));\n }\n return result;\n };\n return Predicate;\n}());\nexport { Predicate };\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 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-haspopup': 'true', 'aria-autocomplete': 'list', 'tabindex': '0', 'aria-activedescendant': 'null',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-disabled': 'false', 'aria-invalid': 'false'\n });\n if (!this.isNullOrEmpty(this.inputStyle)) {\n Input.addAttributes({ 'style': this.inputStyle }, this.inputElement);\n }\n addClass([this.inputWrapper.container], WRAPPERCLASS);\n };\n TimePicker.prototype.getCldrDateTimeFormat = function () {\n var culture = new Internationalization(this.locale);\n var cldrTime;\n var dateFormat = culture.getDatePattern({ skeleton: '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-haspopup': 'true', 'aria-autocomplete': 'list', 'tabindex': '0', 'aria-activedescendant': 'null',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-disabled': 'true', 'aria-invalid': 'false'\n };\n if (this.inputElement) {\n Input.removeAttributes(ariaAttribute, this.inputElement);\n if (this.angularTag === null) {\n this.inputWrapper.container.parentElement.appendChild(this.inputElement);\n }\n 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.setAttribute('aria-activedescendant', 'null');\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 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 };\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)) {\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });\n }\n else {\n attributes(this.inputElement, { 'aria-activedescendant': 'null' });\n }\n };\n TimePicker.prototype.removeSelection = function () {\n this.removeHover(HOVER);\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + SELECTED);\n if (items.length) {\n removeClass(items, SELECTED);\n items[0].removeAttribute('aria-selected');\n }\n }\n };\n TimePicker.prototype.removeHover = function (className) {\n var hoveredItem = this.getHoverItem(className);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, className);\n if (className === NAVIGATION) {\n hoveredItem[0].removeAttribute('aria-selected');\n }\n }\n };\n TimePicker.prototype.getHoverItem = function (className) {\n var hoveredItem;\n if (!isNullOrUndefined(this.popupWrapper)) {\n hoveredItem = this.popupWrapper.querySelectorAll('.' + className);\n }\n return hoveredItem;\n };\n TimePicker.prototype.setActiveClass = function () {\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n for (var i = 0; i < items.length; i++) {\n if ((this.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': '0' } });\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' });\n append([this.listTag], this.listWrapper);\n };\n TimePicker.prototype.documentClickHandler = function (event) {\n var target = event.target;\n if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(target) ||\n (this.popupObj.element && this.popupObj.element.contains(target)))) && event.type !== 'touchstart') {\n event.preventDefault();\n }\n if (!(closest(target, '[id=\"' + this.popupObj.element.id + '\"]')) && target !== this.inputElement\n && target !== (this.inputWrapper && this.inputWrapper.buttons[0]) &&\n target !== (this.inputWrapper && this.inputWrapper.clearButton) &&\n target !== (this.inputWrapper && this.inputWrapper.container)) {\n if (this.isPopupOpen()) {\n this.hide();\n this.focusOut();\n }\n }\n else if (target !== this.inputElement) {\n if (!Browser.isDevice) {\n this.isPreventBlur = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.inputElement)\n && (target === this.popupWrapper);\n }\n }\n };\n TimePicker.prototype.setEnableRtl = function () {\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n if (this.popupObj) {\n this.popupObj.enableRtl = this.enableRtl;\n this.popupObj.dataBind();\n }\n };\n TimePicker.prototype.setEnable = function () {\n Input.setEnabled(this.enabled, this.inputElement, this.floatLabelType);\n if (this.enabled) {\n removeClass([this.inputWrapper.container], DISABLED);\n attributes(this.inputElement, { 'aria-disabled': 'false' });\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.hide();\n addClass([this.inputWrapper.container], DISABLED);\n attributes(this.inputElement, { 'aria-disabled': 'true' });\n this.inputElement.tabIndex = -1;\n }\n };\n TimePicker.prototype.getProperty = function (date, val) {\n if (val === 'min') {\n this.initMin = this.checkDateValue(new Date(this.checkInValue(date.min)));\n this.setProperties({ min: this.initMin }, true);\n }\n else {\n this.initMax = this.checkDateValue(new Date(this.checkInValue(date.max)));\n this.setProperties({ max: this.initMax }, true);\n }\n if (this.inputElement.value === '') {\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n this.checkValue(this.inputElement.value);\n }\n this.checkValueChange(null, false);\n };\n TimePicker.prototype.inputBlurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n // IE popup closing issue when click over the scrollbar\n if (this.isPreventBlur && this.isPopupOpen()) {\n this.inputElement.focus();\n return;\n }\n this.closePopup(0, e);\n 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 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 this.inputElement.setAttribute('aria-placeholder', newProp.placeholder);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement, this.floatLabelType);\n if (this.readonly) {\n this.hide();\n }\n this.setTimeAllowEdit();\n break;\n case 'enabled':\n this.setProperties({ enabled: newProp.enabled }, true);\n this.setEnable();\n break;\n case 'allowEdit':\n this.setTimeAllowEdit();\n break;\n case 'enableRtl':\n 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 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 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 'aria-haspopup': 'true', 'aria-activedescendant': 'null',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off'\n };\n if (this.inputElement) {\n Input.removeAttributes(ariaAttribute, this.inputElement);\n this.inputElement.removeAttribute('aria-placeholder');\n }\n if (this.isCalendar()) {\n if (this.popupWrapper) {\n detach(this.popupWrapper);\n }\n this.popupObject = this.popupWrapper = null;\n this.keyboardHandler.destroy();\n }\n this.unBindInputEvents();\n _super.prototype.destroy.call(this);\n };\n /**\n * To Initialize the control rendering.\n *\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 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 EventHandler.add(document, 'mousedown touchstart', _this.documentClickHandler, _this);\n }\n });\n };\n DateTimePicker.prototype.documentClickHandler = function (event) {\n var target = event.target;\n if ((!isNullOrUndefined(this.popupObject) && (this.inputWrapper.container.contains(target) ||\n (this.popupObject.element && this.popupObject.element.contains(target)))) && event.type !== 'touchstart') {\n event.preventDefault();\n }\n if (!(closest(target, '[id=\"' + (this.popupObject && this.popupObject.element.id + '\"]'))) && target !== this.inputElement\n && target !== this.timeIcon && target !== this.inputWrapper.container) {\n if (this.isTimePopupOpen()) {\n this.hide(event);\n this.focusOut();\n }\n }\n else if (target !== this.inputElement) {\n if (!Browser.isDevice) {\n this.isPreventBlur = ((document.activeElement === this.inputElement) && (Browser.isIE || Browser.info.name === 'edge')\n && target === this.popupObject.element);\n }\n }\n };\n DateTimePicker.prototype.isTimePopupOpen = function () {\n return (this.dateTimeWrapper && this.dateTimeWrapper.classList.contains('' + ROOT)) ? true : false;\n };\n DateTimePicker.prototype.isDatePopupOpen = function () {\n return (this.popupWrapper && this.popupWrapper.classList.contains('' + DATETIMEPOPUPWRAPPER)) ? true : false;\n };\n DateTimePicker.prototype.renderPopup = function () {\n var _this = this;\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n if (Browser.isDevice) {\n this.timeModal = createElement('div');\n this.timeModal.className = '' + ROOT + ' e-time-modal';\n document.body.className += ' ' + OVERFLOW;\n this.timeModal.style.display = 'block';\n document.body.appendChild(this.timeModal);\n }\n var offset = 4;\n this.popupObject = new Popup(this.dateTimeWrapper, {\n width: this.setPopupWidth(),\n zIndex: this.zIndex,\n targetType: 'container',\n collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },\n relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,\n position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },\n enableRtl: this.enableRtl,\n offsetY: offset,\n open: function () {\n _this.dateTimeWrapper.style.visibility = 'visible';\n addClass([_this.timeIcon], ACTIVE);\n if (!Browser.isDevice) {\n _this.timekeyConfigure = extend(_this.timekeyConfigure, _this.keyConfigs);\n _this.inputEvent = new KeyboardEvents(_this.inputWrapper.container, {\n keyAction: _this.timeKeyActionHandle.bind(_this),\n keyConfigs: _this.timekeyConfigure,\n eventName: 'keydown'\n });\n }\n }, close: function () {\n removeClass([_this.timeIcon], ACTIVE);\n _this.unWireTimeListEvents();\n _this.inputElement.setAttribute('aria-activedescendant', 'null');\n remove(_this.popupObject.element);\n _this.popupObject.destroy();\n _this.dateTimeWrapper.innerHTML = '';\n _this.listWrapper = _this.dateTimeWrapper = undefined;\n if (_this.inputEvent) {\n _this.inputEvent.destroy();\n }\n }, targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hide();\n }\n }\n });\n this.popupObject.element.style.maxHeight = POPUPDIMENSION;\n };\n DateTimePicker.prototype.setDimension = function (width) {\n if (typeof width === 'number') {\n width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n // 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)) {\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });\n }\n else {\n attributes(this.inputElement, { 'aria-activedescendant': 'null' });\n }\n };\n DateTimePicker.prototype.addTimeSelection = function () {\n this.selectedElement = null;\n this.removeTimeSelection();\n this.setTimeActiveClass();\n if (!isNullOrUndefined(this.selectedElement)) {\n addClass([this.selectedElement], ACTIVE);\n this.selectedElement.setAttribute('aria-selected', 'true');\n }\n };\n DateTimePicker.prototype.removeTimeSelection = function () {\n this.removeTimeHover(HOVER);\n if (!isNullOrUndefined(this.dateTimeWrapper)) {\n var items = this.dateTimeWrapper.querySelectorAll('.' + ACTIVE);\n if (items.length) {\n removeClass(items, ACTIVE);\n items[0].removeAttribute('aria-selected');\n }\n }\n };\n DateTimePicker.prototype.removeTimeHover = function (className) {\n var hoveredItem = this.getTimeHoverItem(className);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, className);\n }\n };\n DateTimePicker.prototype.getTimeHoverItem = function (className) {\n var collections = isNullOrUndefined(this.dateTimeWrapper) ? this.listWrapper : this.dateTimeWrapper;\n var hoveredItem;\n if (!isNullOrUndefined(collections)) {\n hoveredItem = collections.querySelectorAll('.' + className);\n }\n return hoveredItem;\n };\n DateTimePicker.prototype.isValidLI = function (li) {\n return (li && li.classList.contains(LISTCLASS) && !li.classList.contains(DISABLED));\n };\n DateTimePicker.prototype.calculateStartEnd = function (value, range, method) {\n var day = value.getDate();\n var month = value.getMonth();\n var year = value.getFullYear();\n var hours = value.getHours();\n var minutes = value.getMinutes();\n var seconds = value.getSeconds();\n var milliseconds = value.getMilliseconds();\n if (range) {\n if (method === 'starttime') {\n return new Date(year, month, day, 0, 0, 0);\n }\n else {\n return new Date(year, month, day, 23, 59, 59);\n }\n }\n else {\n return new Date(year, month, day, hours, minutes, seconds, milliseconds);\n }\n };\n DateTimePicker.prototype.startTime = function (date) {\n var tempStartValue;\n var start;\n var tempMin = this.min;\n var value = 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 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 this.inputElement.setAttribute('aria-placeholder', newProp.placeholder);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.inputElement);\n if (!this.enabled) {\n this.inputElement.tabIndex = -1;\n }\n break;\n case 'strictMode':\n this.invalidValueString = null;\n this.updateInput();\n break;\n case 'width':\n this.setWidth(newProp.width);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);\n break;\n case 'scrollTo':\n if (this.checkDateValue(new Date(this.checkValue(newProp.scrollTo)))) {\n if (this.dateTimeWrapper) {\n this.setScrollTo();\n }\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkValue(newProp.scrollTo))) }, true);\n }\n else {\n this.setProperties({ scrollTo: null }, true);\n }\n break;\n case 'enableMask':\n if (this.enableMask) {\n this.notify(\"createMask\", {\n module: \"MaskedDateTime\",\n });\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n if (this.inputElement.value === this.maskedDateValue) {\n this.maskedDateValue = '';\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n }\n break;\n default:\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n break;\n }\n if (!this.isDynamicValueChanged) {\n this.hide(null);\n }\n this.isDynamicValueChanged = false;\n }\n };\n /**\n * To get component name.\n *\n * @returns {string} Returns the component name.\n * @private\n */\n DateTimePicker.prototype.getModuleName = function () {\n return 'datetimepicker';\n };\n DateTimePicker.prototype.restoreValue = function () {\n this.previousDateTime = this.previousDate;\n this.currentDate = this.value ? this.value : new Date();\n this.valueWithMinutes = this.value;\n this.previousDate = this.value;\n this.previousElementValue = this.previousElementValue = (isNullOrUndefined(this.inputValueCopy)) ? '' :\n this.getFormattedValue(this.inputValueCopy);\n };\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"timeFormat\", void 0);\n __decorate([\n Property(30)\n ], DateTimePicker.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"scrollTo\", void 0);\n __decorate([\n Property(1000)\n ], DateTimePicker.prototype, \"zIndex\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"keyConfigs\", void 0);\n __decorate([\n Property({})\n ], DateTimePicker.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(true)\n ], DateTimePicker.prototype, \"allowEdit\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"isMultiSelection\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"values\", void 0);\n __decorate([\n Property(true)\n ], DateTimePicker.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"placeholder\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"strictMode\", void 0);\n __decorate([\n Property(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 * as React from 'react';\nimport { DateTimePicker } from '@syncfusion/ej2-calendars';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * Represents the Essential JS 2 React DateTimePicker Component.\n * ```ts\n * \n * ```\n */\nvar DateTimePickerComponent = /** @class */ (function (_super) {\n __extends(DateTimePickerComponent, _super);\n function DateTimePickerComponent(props) {\n var _this = _super.call(this, props) || this;\n _this.initRenderCalled = false;\n _this.checkInjectedModules = true;\n _this.immediateRender = true;\n _this.portals = [];\n return _this;\n }\n DateTimePickerComponent.prototype.render = function () {\n if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {\n _super.prototype.render.call(this);\n this.initRenderCalled = true;\n }\n else {\n return React.createElement(React.Fragment, null, [].concat(React.createElement(\"input\", this.getDefaultAttributes()), this.portals));\n }\n };\n return DateTimePickerComponent;\n}(DateTimePicker));\nexport { DateTimePickerComponent };\napplyMixins(DateTimePickerComponent, [ComponentBase, React.Component]);\n","import { isNullOrUndefined, classList, createElement } from '@syncfusion/ej2-base';\nvar globalTimeOut = {};\nvar DEFT_MAT_WIDTH = 30;\nvar DEFT_FAB_WIDTH = 30;\nvar DEFT_FLUENT_WIDTH = 30;\nvar DEFT_TAIL_WIDTH = 24;\nvar DEFT_BOOT_WIDTH = 30;\nvar DEFT_BOOT4_WIDTH = 36;\nvar DEFT_BOOT5_WIDTH = 36;\nvar CLS_SHOWSPIN = 'e-spin-show';\nvar CLS_HIDESPIN = 'e-spin-hide';\nvar CLS_MATERIALSPIN = 'e-spin-material';\nvar CLS_FABRICSPIN = 'e-spin-fabric';\nvar CLS_FLUENTSPIN = 'e-spin-fluent';\nvar CLS_TAILWINDSPIN = 'e-spin-tailwind';\nvar CLS_BOOTSPIN = 'e-spin-bootstrap';\nvar CLS_BOOT4SPIN = 'e-spin-bootstrap4';\nvar CLS_BOOT5SPIN = 'e-spin-bootstrap5';\nvar CLS_HIGHCONTRASTSPIN = 'e-spin-high-contrast';\nvar CLS_SPINWRAP = 'e-spinner-pane';\nvar CLS_SPININWRAP = 'e-spinner-inner';\nvar CLS_SPINCIRCLE = 'e-path-circle';\nvar CLS_SPINARC = 'e-path-arc';\nvar CLS_SPINLABEL = 'e-spin-label';\nvar CLS_SPINTEMPLATE = 'e-spin-template';\nvar spinTemplate = null;\nvar spinCSSClass = null;\n// eslint-disable-next-line\n/**\n * Function to change the Spinners in a page globally from application end.\n * ```\n * E.g : blazorSpinner({ action: \"Create\", options: {target: targetElement}, type: \"\" });\n * ```\n *\n * @param {string} action - specifies the string\n * @param {CreateArgs} options - specifies the args\n * @param {string} target - specifies the target\n * @param {string} type - specifes the type\n * @returns {void}\n * @private\n */\nexport function Spinner(action, options, target, type) {\n switch (action) {\n case 'Create':\n /* eslint-disable */\n var element = document.querySelector(options.target);\n var args = { type: type, target: element, cssClass: options.cssClass,\n label: options.label, width: options.width };\n /* eslint-enable */\n createSpinner(args);\n break;\n case 'Show':\n showSpinner(document.querySelector(target));\n break;\n case 'Hide':\n hideSpinner(document.querySelector(target));\n break;\n case 'Set':\n // eslint-disable-next-line\n var setArgs = { cssClass: options.cssClass, type: type };\n setSpinner(setArgs);\n break;\n }\n}\n/**\n * Create a spinner for the specified target element.\n * ```\n * E.g : createSpinner({ target: targetElement, width: '34px', label: 'Loading..' });\n * ```\n *\n * @param {SpinnerArgs} args - specifies the args\n * @param {CreateElementArgs} internalCreateElement - specifis the element args\n * @returns {void}\n * @private\n */\nexport function createSpinner(args, internalCreateElement) {\n if (!args.target) {\n return;\n }\n var radius;\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n // eslint-disable-next-line\n var container = create_spinner_container(args.target, makeElement);\n if (!isNullOrUndefined(args.cssClass)) {\n container.wrap.classList.add(args.cssClass);\n }\n if (!isNullOrUndefined(args.template) || !isNullOrUndefined(spinTemplate)) {\n var template = !isNullOrUndefined(args.template) ? args.template : spinTemplate;\n container.wrap.classList.add(CLS_SPINTEMPLATE);\n replaceContent(container.wrap, template, spinCSSClass);\n }\n else {\n var theme = !isNullOrUndefined(args.type) ? args.type : getTheme(container.wrap);\n var width = !isNullOrUndefined(args.width) ? args.width : undefined;\n radius = calculateRadius(width, theme);\n setTheme(theme, container.wrap, radius, makeElement);\n if (!isNullOrUndefined(args.label)) {\n createLabel(container.inner_wrap, args.label, makeElement);\n }\n }\n container.wrap.classList.add(CLS_HIDESPIN);\n container = null;\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {string} label - specifies the string\n * @param {createElementParams} makeElement - specifies the element\n * @returns {HTMLElement} - returns the element\n */\nfunction createLabel(container, label, makeElement) {\n var labelEle = makeElement('div', {});\n labelEle.classList.add(CLS_SPINLABEL);\n labelEle.innerHTML = label;\n container.appendChild(labelEle);\n return labelEle;\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createMaterialSpinner(container, radius, makeElement) {\n var uniqueID = random_generator();\n globalTimeOut[uniqueID] = { timeOut: 0, type: 'Material', radius: radius };\n create_material_element(container, uniqueID, makeElement, CLS_MATERIALSPIN);\n mat_calculate_attributes(radius, container, 'Material', CLS_MATERIALSPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createBootstrap4Spinner(container, radius, makeElement) {\n var uniqueID = random_generator();\n globalTimeOut[uniqueID] = { timeOut: 0, type: 'Bootstrap4', radius: radius };\n create_material_element(container, uniqueID, makeElement, CLS_BOOT4SPIN);\n mat_calculate_attributes(radius, container, 'Bootstrap4', CLS_BOOT4SPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createBootstrap5Spinner(container, radius, makeElement) {\n var uniqueID = random_generator();\n globalTimeOut[uniqueID] = { timeOut: 0, type: 'Bootstrap5', radius: radius };\n create_material_element(container, uniqueID, makeElement, CLS_BOOT5SPIN);\n mat_calculate_attributes(radius, container, 'Bootstrap5', CLS_BOOT5SPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {string} uniqueID - specifies the id.\n * @param {number} radius - specifies the radius\n * @returns {void}\n */\nfunction startMatAnimate(container, uniqueID, radius) {\n var globalObject = {};\n var timeOutVar = 0;\n globalTimeOut[uniqueID].timeOut = 0;\n globalObject[uniqueID] = globalVariables(uniqueID, radius, 0, 0);\n // eslint-disable-next-line\n var spinnerInfo = { uniqueID: uniqueID, container: container, globalInfo: globalObject, timeOutVar: timeOutVar };\n animateMaterial(spinnerInfo);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createFabricSpinner(container, radius, makeElement) {\n var uniqueID = random_generator();\n globalTimeOut[uniqueID] = { timeOut: 0, type: 'Fabric', radius: radius };\n create_fabric_element(container, uniqueID, CLS_FABRICSPIN, makeElement);\n fb_calculate_attributes(radius, container, CLS_FABRICSPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createFluentSinner(container, radius, makeElement) {\n var uniqueID = random_generator();\n globalTimeOut[uniqueID] = { timeOut: 0, type: 'Fluent', radius: radius };\n create_fabric_element(container, uniqueID, CLS_FLUENTSPIN, makeElement);\n fb_calculate_attributes(radius, container, CLS_FLUENTSPIN);\n}\nfunction createTailwindSpinner(container, radius, makeElement) {\n var uniqueID = random_generator();\n globalTimeOut[uniqueID] = { timeOut: 0, type: 'Tailwind', radius: radius };\n create_fabric_element(container, uniqueID, CLS_TAILWINDSPIN, makeElement);\n fb_calculate_attributes(radius, container, CLS_TAILWINDSPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createHighContrastSpinner(container, radius, makeElement) {\n var uniqueID = random_generator();\n globalTimeOut[uniqueID] = { timeOut: 0, type: 'HighContrast', radius: radius };\n create_fabric_element(container, uniqueID, CLS_HIGHCONTRASTSPIN, makeElement);\n fb_calculate_attributes(radius, container, CLS_HIGHCONTRASTSPIN);\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @returns {string} - returns the string\n */\nfunction getTheme(container) {\n var theme = window.getComputedStyle(container, ':after').getPropertyValue('content');\n return theme.replace(/['\"]+/g, '');\n}\n/**\n *\n * @param {string} theme - specifies the theme\n * @param {HTMLElement} container - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction setTheme(theme, container, radius, makeElement) {\n var innerContainer = container.querySelector('.' + CLS_SPININWRAP);\n var svg = innerContainer.querySelector('svg');\n if (!isNullOrUndefined(svg)) {\n innerContainer.removeChild(svg);\n }\n switch (theme) {\n case 'Material':\n createMaterialSpinner(innerContainer, radius, makeElement);\n break;\n case 'Fabric':\n createFabricSpinner(innerContainer, radius, makeElement);\n break;\n case 'Fluent':\n createFluentSinner(innerContainer, radius, makeElement);\n break;\n case 'Bootstrap':\n createBootstrapSpinner(innerContainer, radius, makeElement);\n break;\n case 'HighContrast':\n createHighContrastSpinner(innerContainer, radius, makeElement);\n break;\n case 'Bootstrap4':\n createBootstrap4Spinner(innerContainer, radius, makeElement);\n break;\n case 'Bootstrap5':\n createBootstrap5Spinner(innerContainer, radius, makeElement);\n break;\n case 'Tailwind':\n case 'Tailwind-dark':\n createTailwindSpinner(innerContainer, radius, makeElement);\n break;\n }\n}\n/**\n *\n * @param {HTMLElement} innerContainer - specifies the element\n * @param {number} radius - specifies the radius\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\nfunction createBootstrapSpinner(innerContainer, radius, makeElement) {\n var uniqueID = random_generator();\n globalTimeOut[uniqueID] = { timeOut: 0, type: 'Bootstrap', radius: radius };\n create_bootstrap_element(innerContainer, uniqueID, makeElement);\n boot_calculate_attributes(innerContainer, radius);\n}\n/**\n *\n * @param {HTMLElement} innerContainer - specifies the element\n * @param {string} uniqueID - specifies the id\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction create_bootstrap_element(innerContainer, uniqueID, makeElement) {\n var svgBoot = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n var viewBoxValue = 64;\n var trans = 32;\n var defaultRadius = 2;\n svgBoot.setAttribute('id', uniqueID);\n svgBoot.setAttribute('class', CLS_BOOTSPIN);\n svgBoot.setAttribute('viewBox', '0 0 ' + viewBoxValue + ' ' + viewBoxValue);\n innerContainer.insertBefore(svgBoot, innerContainer.firstChild);\n for (var item = 0; item <= 7; item++) {\n var bootCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n bootCircle.setAttribute('class', CLS_SPINCIRCLE + '_' + item);\n bootCircle.setAttribute('r', defaultRadius + '');\n bootCircle.setAttribute('transform', 'translate(' + trans + ',' + trans + ')');\n svgBoot.appendChild(bootCircle);\n }\n}\n/**\n *\n * @param {HTMLElement} innerContainer - specifies the element\n * @param {number} radius - specifies the radius\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction boot_calculate_attributes(innerContainer, radius) {\n var svg = innerContainer.querySelector('svg.e-spin-bootstrap');\n var x = 0;\n var y = 0;\n var rad = 24;\n svg.style.width = svg.style.height = radius + 'px';\n var startArc = 90;\n for (var item = 0; item <= 7; item++) {\n var start = defineArcPoints(x, y, rad, startArc);\n var circleEle = svg.querySelector('.' + CLS_SPINCIRCLE + '_' + item);\n circleEle.setAttribute('cx', start.x + '');\n circleEle.setAttribute('cy', start.y + '');\n startArc = startArc >= 360 ? 0 : startArc;\n startArc = startArc + 45;\n }\n}\n/**\n *\n * @param {number} begin - specifies the number\n * @param {number} stop - specifirs the number\n * @returns {number[]} - returns the array of number\n */\nfunction generateSeries(begin, stop) {\n var series = [];\n var start = begin;\n var end = stop;\n // eslint-disable-next-line\n var increment = false, count = 1;\n formSeries(start);\n /**\n *\n * @param {number} i - specifies the number\n * @returns {void}\n */\n function formSeries(i) {\n series.push(i);\n if (i !== end || count === 1) {\n if (i <= start && i > 1 && !increment) {\n i = parseFloat((i - 0.2).toFixed(2));\n }\n else if (i === 1) {\n i = 7;\n i = parseFloat((i + 0.2).toFixed(2));\n increment = true;\n }\n else if (i < 8 && increment) {\n i = parseFloat((i + 0.2).toFixed(2));\n if (i === 8) {\n increment = false;\n }\n }\n else if (i <= 8 && !increment) {\n i = parseFloat((i - 0.2).toFixed(2));\n }\n ++count;\n formSeries(i);\n }\n }\n return series;\n}\n/**\n *\n * @param {HTMLElement} innerContainer - specifies the element\n * @returns {void}\n */\nfunction animateBootstrap(innerContainer) {\n var svg = innerContainer.querySelector('svg.e-spin-bootstrap');\n var id = svg.getAttribute('id');\n for (var i = 1; i <= 8; i++) {\n var circleEle = (innerContainer.getElementsByClassName('e-path-circle_' +\n (i === 8 ? 0 : i))[0]);\n rotation(circleEle, i, i, generateSeries(i, i), id);\n }\n /**\n *\n * @param {SVGCircleElement} circle - specifies the circl element\n * @param {number} start - specifies the number\n * @param {number} end - specifies the end number\n * @param {number} series - specifies the series\n * @param {string} id - specifies the id\n * @returns {void}\n */\n function rotation(circle, start, end, series, id) {\n var count = 0;\n boot_animate(start);\n // eslint-disable-next-line\n function boot_animate(radius) {\n if (globalTimeOut[id].isAnimate) {\n ++count;\n circle.setAttribute('r', radius + '');\n if (count >= series.length) {\n count = 0;\n }\n // eslint-disable-next-line\n globalTimeOut[id].timeOut = setTimeout(boot_animate.bind(null, series[count]), 18);\n }\n }\n }\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {string} template - specifies the template\n * @param {string} cssClass - specifies the css class.\n * @returns {void}\n */\nfunction replaceContent(container, template, cssClass) {\n if (!isNullOrUndefined(cssClass)) {\n container.classList.add(cssClass);\n }\n var inner = container.querySelector('.e-spinner-inner');\n inner.innerHTML = template;\n}\n/**\n *\n * @param {string} width - specifies the width\n * @param {string} theme - specifies the string\n * @returns {number} - returns the number\n */\nfunction calculateRadius(width, theme) {\n var defaultSize;\n switch (theme) {\n case 'Material':\n defaultSize = DEFT_MAT_WIDTH;\n break;\n case 'Fabric':\n defaultSize = DEFT_FAB_WIDTH;\n break;\n case 'Tailwind':\n case 'Tailwind-dark':\n defaultSize = DEFT_FAB_WIDTH;\n break;\n case 'Fluent':\n defaultSize = DEFT_FLUENT_WIDTH;\n break;\n case 'Bootstrap4':\n defaultSize = DEFT_BOOT4_WIDTH;\n break;\n case 'Bootstrap5':\n defaultSize = DEFT_BOOT5_WIDTH;\n break;\n default:\n defaultSize = DEFT_BOOT_WIDTH;\n }\n width = width ? parseFloat(width + '') : defaultSize;\n return theme === 'Bootstrap' ? width : width / 2;\n}\n/**\n *\n * @param {string} id - specifies the id\n * @param {number} radius - specifies the radius\n * @param {number} count - specifies the number count\n * @param {number} previousId - specifies the previous id\n * @returns {GlobalVariables} - returns the variables\n */\nfunction globalVariables(id, radius, count, previousId) {\n return {\n radius: radius,\n count: count,\n previousId: previousId\n };\n}\n/**\n * @returns {string} - returns the string\n */\n// eslint-disable-next-line\nfunction random_generator() {\n var random = '';\n var combine = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n for (var i = 0; i < 5; i++) {\n random += combine.charAt(Math.floor(Math.random() * combine.length));\n }\n return random;\n}\n/**\n *\n * @param {HTMLElement} innerCon - specifies the element\n * @param {string} uniqueID - specifies the unique id\n * @param {string} themeClass - specifies the string\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction create_fabric_element(innerCon, uniqueID, themeClass, makeElement) {\n var svgFabric = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n svgFabric.setAttribute('id', uniqueID);\n svgFabric.setAttribute('class', themeClass);\n var fabricCirclePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n fabricCirclePath.setAttribute('class', CLS_SPINCIRCLE);\n var fabricCircleArc = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n fabricCircleArc.setAttribute('class', CLS_SPINARC);\n innerCon.insertBefore(svgFabric, innerCon.firstChild);\n svgFabric.appendChild(fabricCirclePath);\n svgFabric.appendChild(fabricCircleArc);\n}\n/**\n *\n * @param {HTMLElement} innerContainer - specifies the element\n * @param {string} uniqueID - specifies the unique id\n * @param {createElementParams} makeElement - specifies the element\n * @param {string} cls - specifies the string\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction create_material_element(innerContainer, uniqueID, makeElement, cls) {\n var svgMaterial = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n var matCirclePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n svgMaterial.setAttribute('class', cls);\n svgMaterial.setAttribute('id', uniqueID);\n matCirclePath.setAttribute('class', CLS_SPINCIRCLE);\n innerContainer.insertBefore(svgMaterial, innerContainer.firstChild);\n svgMaterial.appendChild(matCirclePath);\n}\n/**\n *\n * @param {HTMLElement} target - specifies the element\n * @param {createElementParams} makeElement - specifies the element\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction create_spinner_container(target, makeElement) {\n var spinnerContainer = makeElement('div', {});\n var spinnerInnerContainer = makeElement('div', {});\n spinnerContainer.classList.add(CLS_SPINWRAP);\n spinnerInnerContainer.classList.add(CLS_SPININWRAP);\n target.appendChild(spinnerContainer);\n spinnerContainer.appendChild(spinnerInnerContainer);\n // eslint-disable-next-line\n return { wrap: spinnerContainer, inner_wrap: spinnerInnerContainer };\n}\n/**\n *\n * @param {SpinnerInfo} spinnerInfo - specifies the spinner\n * @returns {void}\n */\nfunction animateMaterial(spinnerInfo) {\n var start = 1;\n var end = 149;\n var duration = 1333;\n var max = 75;\n createCircle(start, end, easeAnimation, duration, spinnerInfo.globalInfo[spinnerInfo.uniqueID].count, max, spinnerInfo);\n spinnerInfo.globalInfo[spinnerInfo.uniqueID].count = ++spinnerInfo.globalInfo[spinnerInfo.uniqueID].count % 4;\n}\n/**\n *\n * @param {number} start - specifies the number\n * @param {number} end - specifies the end number\n * @param {Function} easing - specifies the function\n * @param {number} duration - specifies the duration\n * @param {number} count - specifies the count\n * @param {number} max - specifies the max number\n * @param {SpinnerInfo} spinnerInfo - specifies the spinner info\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction createCircle(start, end, easing, duration, count, max, spinnerInfo) {\n var id = ++spinnerInfo.globalInfo[spinnerInfo.uniqueID].previousId;\n var startTime = new Date().getTime();\n var change = end - start;\n var diameter = getSize((spinnerInfo.globalInfo[spinnerInfo.uniqueID].radius * 2) + '');\n var strokeSize = getStrokeSize(diameter);\n var rotate = -90 * (spinnerInfo.globalInfo[spinnerInfo.uniqueID].count || 0);\n mat_animation(spinnerInfo);\n // eslint-disable-next-line\n function mat_animation(spinnerInfo) {\n var currentTime = Math.max(0, Math.min(new Date().getTime() - startTime, duration));\n updatePath(easing(currentTime, start, change, duration), spinnerInfo.container);\n if (id === spinnerInfo.globalInfo[spinnerInfo.uniqueID].previousId && currentTime < duration) {\n // eslint-disable-next-line\n globalTimeOut[spinnerInfo.uniqueID].timeOut = setTimeout(mat_animation.bind(null, spinnerInfo), 1);\n }\n else {\n animateMaterial(spinnerInfo);\n }\n }\n /**\n *\n * @param {number} value - specifies the number value\n * @param {HTMLElement} container - specifies the container\n * @returns {void}\n */\n function updatePath(value, container) {\n if ((!isNullOrUndefined(container.querySelector('svg.e-spin-material')))\n && (!isNullOrUndefined(container.querySelector('svg.e-spin-material').querySelector('path.e-path-circle')))) {\n var svg = container.querySelector('svg.e-spin-material');\n var path = svg.querySelector('path.e-path-circle');\n path.setAttribute('stroke-dashoffset', getDashOffset(diameter, strokeSize, value, max) + '');\n path.setAttribute('transform', 'rotate(' + (rotate) + ' ' + diameter / 2 + ' ' + diameter / 2 + ')');\n }\n }\n}\n/**\n *\n * @param {number} radius - specifies the number\n * @param {HTMLElement} container - specifies the element\n * @param {string} type - specifies the string type\n * @param {string} cls - specifies the string\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction mat_calculate_attributes(radius, container, type, cls) {\n var diameter = radius * 2;\n var svg = container.querySelector('svg.' + cls);\n var path = svg.querySelector('path.e-path-circle');\n var strokeSize = getStrokeSize(diameter);\n var transformOrigin = (diameter / 2) + 'px';\n svg.setAttribute('viewBox', '0 0 ' + diameter + ' ' + diameter);\n svg.style.width = svg.style.height = diameter + 'px';\n svg.style.transformOrigin = transformOrigin + ' ' + transformOrigin + ' ' + transformOrigin;\n path.setAttribute('d', drawArc(diameter, strokeSize));\n if (type === 'Material') {\n path.setAttribute('stroke-width', strokeSize + '');\n path.setAttribute('stroke-dasharray', ((diameter - strokeSize) * Math.PI * 0.75) + '');\n path.setAttribute('stroke-dashoffset', getDashOffset(diameter, strokeSize, 1, 75) + '');\n }\n}\n/**\n *\n * @param {string} value - specifies the value\n * @returns {number} - returns the number\n */\nfunction getSize(value) {\n var parsed = parseFloat(value);\n return parsed;\n}\n/**\n *\n * @param {number} diameter - specifies the diameter\n * @param {number} strokeSize - specifies the size\n * @returns {string} - returns the string\n */\nfunction drawArc(diameter, strokeSize) {\n var radius = diameter / 2;\n var offset = strokeSize / 2;\n return 'M' + radius + ',' + offset\n + 'A' + (radius - offset) + ',' + (radius - offset) + ' 0 1 1 ' + offset + ',' + radius;\n}\n/**\n *\n * @param {number} diameter - specifies the number\n * @returns {number} - returns the number\n */\nfunction getStrokeSize(diameter) {\n return 10 / 100 * diameter;\n}\n/**\n *\n * @param {number} diameter - specifies the number\n * @param {number} strokeSize - specifies the stroke size\n * @param {number} value - specifies the value\n * @param {number} max - specifies the max number\n * @returns {number} - returns the number\n */\nfunction getDashOffset(diameter, strokeSize, value, max) {\n return (diameter - strokeSize) * Math.PI * ((3 * (max) / 100) - (value / 100));\n}\n/**\n *\n * @param {number} current - specifies the number\n * @param {number} start - specifies the stroke size\n * @param {number} change - specifies the value\n * @param {number} duration - specifies the max number\n * @returns {number} - returns the number\n */\nfunction easeAnimation(current, start, change, duration) {\n var timestamp = (current /= duration) * current;\n var timecount = timestamp * current;\n return start + change * (6 * timecount * timestamp + -15 * timestamp * timestamp + 10 * timecount);\n}\n/**\n *\n * @param {number} radius - specifies the number\n * @param {HTMLElement} innerConainer - specifies the element\n * @param {string} trgClass - specifies the class\n * @returns {void}\n */\n// eslint-disable-next-line\nfunction fb_calculate_attributes(radius, innerConainer, trgClass) {\n var centerX = radius;\n var centerY = radius;\n var diameter = radius * 2;\n // eslint-disable-next-line\n var startArc = 315, endArc = 45;\n var svg = innerConainer.querySelector('.' + trgClass);\n var circle = svg.querySelector('.e-path-circle');\n var path = svg.querySelector('.e-path-arc');\n var transformOrigin = (diameter / 2) + 'px';\n circle.setAttribute('d', defineCircle(centerX, centerY, radius));\n path.setAttribute('d', defineArc(centerX, centerY, radius, startArc, endArc));\n svg.setAttribute('viewBox', '0 0 ' + diameter + ' ' + diameter);\n svg.style.transformOrigin = transformOrigin + ' ' + transformOrigin + ' ' + transformOrigin;\n svg.style.width = svg.style.height = diameter + 'px';\n}\n/**\n *\n * @param {number} centerX - specifies the number\n * @param {number} centerY - specifies the stroke size\n * @param {number} radius - specifies the value\n * @param {number} angle - specifies the max number\n * @returns {number} - returns the number\n */\nfunction defineArcPoints(centerX, centerY, radius, angle) {\n var radians = (angle - 90) * Math.PI / 180.0;\n return {\n x: centerX + (radius * Math.cos(radians)),\n y: centerY + (radius * Math.sin(radians))\n };\n}\n/**\n *\n * @param {number} x - specifies the number\n * @param {number} y - specifies the stroke size\n * @param {number} radius - specifies the radius\n * @param {number} startArc - specifies the value\n * @param {number} endArc - specifies the max number\n * @returns {number} - returns the number\n */\nfunction defineArc(x, y, radius, startArc, endArc) {\n var start = defineArcPoints(x, y, radius, endArc);\n var end = defineArcPoints(x, y, radius, startArc);\n var d = [\n 'M', start.x, start.y,\n 'A', radius, radius, 0, 0, 0, end.x, end.y\n ].join(' ');\n return d;\n}\n/**\n *\n * @param {number} x - specifies the number\n * @param {number} y - specifies the stroke size\n * @param {number} radius - specifies the value\n * @returns {string} - returns the string\n */\nfunction defineCircle(x, y, radius) {\n var d = [\n 'M', x, y,\n 'm', -radius, 0,\n 'a', radius, radius, 0, 1, 0, radius * 2, 0,\n 'a', radius, radius, 0, 1, 0, -radius * 2, 0\n ].join(' ');\n return d;\n}\n// eslint-disable-next-line\n/**\n * Function to show the Spinner.\n *\n * @param {HTMLElement} container - Specify the target of the Spinner.\n * @returns {void}\n * @private\n */\nexport function showSpinner(container) {\n showHideSpinner(container, false);\n container = null;\n}\n/**\n *\n * @param {HTMLElement} container - specifies the element\n * @param {boolean} isHide - specifies the boolean\n * @returns {void}\n */\nfunction showHideSpinner(container, isHide) {\n var spinnerWrap;\n if (container) {\n spinnerWrap = container.classList.contains(CLS_SPINWRAP) ? container :\n container.querySelector('.' + CLS_SPINWRAP);\n }\n if (container && spinnerWrap) {\n var inner = spinnerWrap.querySelector('.' + CLS_SPININWRAP);\n var spinCheck = void 0;\n // eslint-disable-next-line\n spinCheck = isHide ? !spinnerWrap.classList.contains(CLS_SPINTEMPLATE) && !spinnerWrap.classList.contains(CLS_HIDESPIN) :\n !spinnerWrap.classList.contains(CLS_SPINTEMPLATE) && !spinnerWrap.classList.contains(CLS_SHOWSPIN);\n if (spinCheck) {\n var svgEle = spinnerWrap.querySelector('svg');\n if (isNullOrUndefined(svgEle)) {\n return;\n }\n var id = svgEle.getAttribute('id');\n globalTimeOut[id].isAnimate = !isHide;\n switch (globalTimeOut[id].type) {\n case 'Material':\n // eslint-disable-next-line\n isHide ? clearTimeout(globalTimeOut[id].timeOut) : startMatAnimate(inner, id, globalTimeOut[id].radius);\n break;\n case 'Bootstrap':\n // eslint-disable-next-line\n isHide ? clearTimeout(globalTimeOut[id].timeOut) : animateBootstrap(inner);\n break;\n }\n }\n // eslint-disable-next-line\n isHide ? classList(spinnerWrap, [CLS_HIDESPIN], [CLS_SHOWSPIN]) : classList(spinnerWrap, [CLS_SHOWSPIN], [CLS_HIDESPIN]);\n container = null;\n }\n}\n/**\n * Function to hide the Spinner.\n *\n * @param {HTMLElement} container - Specify the target of the Spinner.\n * @returns {void}\n * @private\n */\nexport function hideSpinner(container) {\n showHideSpinner(container, true);\n container = null;\n}\n// eslint-disable-next-line\n/**\n * Function to change the Spinners in a page globally from application end.\n * ```\n * E.g : setSpinner({ cssClass: 'custom-css'; type: 'Material' });\n * ```\n *\n * @param {SetSpinnerArgs} args - specifies the args\n * @param {createElementParams} internalCreateElement - specifies the element params\n * @returns {void}\n * @private\n */\nexport function setSpinner(args, internalCreateElement) {\n var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;\n if (args.template !== undefined) {\n spinTemplate = args.template;\n if (args.template !== undefined) {\n spinCSSClass = args.cssClass;\n }\n }\n var container = document.querySelectorAll('.' + CLS_SPINWRAP);\n for (var index = 0; index < container.length; index++) {\n ensureTemplate(args.template, container[index], args.type, args.cssClass, makeElement);\n }\n}\n/**\n *\n * @param {string} template - specifies the string\n * @param {HTMLElement} container - specifies the container\n * @param {string} theme - specifies the theme\n * @param {string} cssClass - specifies the string class\n * @param {createElementParams} makeEle - specifies the params\n * @returns {void}\n */\nfunction ensureTemplate(template, container, theme, cssClass, makeEle) {\n if (isNullOrUndefined(template) && !container.classList.contains(CLS_SPINTEMPLATE)) {\n replaceTheme(container, theme, cssClass, makeEle);\n if (container.classList.contains(CLS_SHOWSPIN)) {\n container.classList.remove(CLS_SHOWSPIN);\n showSpinner(container);\n }\n else {\n container.classList.remove(CLS_HIDESPIN);\n hideSpinner(container);\n }\n }\n else {\n spinTemplate = template;\n if (!isNullOrUndefined(cssClass)) {\n spinCSSClass = cssClass;\n }\n }\n}\n/**\n *\n * @param {HTMLElement} container - specifies the container\n * @param {string} theme - specifies the theme\n * @param {string} cssClass - specifies the string class\n * @param {createElementParams} makeEle - specifies the params\n * @returns {void}\n */\nfunction replaceTheme(container, theme, cssClass, makeEle) {\n if (!isNullOrUndefined(cssClass)) {\n container.classList.add(cssClass);\n }\n var svgElement = container.querySelector('svg');\n var radius = theme === 'Bootstrap' ? parseFloat(svgElement.style.height) : parseFloat(svgElement.style.height) / 2;\n var classNames = svgElement.getAttribute('class');\n var svgClassList = classNames.split(/\\s/);\n if (svgClassList.indexOf('e-spin-material') >= 0) {\n var id = svgElement.getAttribute('id');\n clearTimeout(globalTimeOut[id].timeOut);\n }\n setTheme(theme, container, radius, makeEle);\n}\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 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 resetIncrementalSearchValues(elementId) {\n if (prevElementId === elementId) {\n prevElementId = '';\n prevString = '';\n queryString = '';\n matches = [];\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, 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 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 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' : 'dropdowns', l10nLocale, this.locale);\n }\n var content = actionFailure ?\n this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');\n if (this.getModuleName() === 'listbox') {\n var liElem = this.createElement('li');\n liElem.textContent = content;\n ele.appendChild(liElem);\n liElem.classList.add('e-list-nrt');\n }\n else {\n ele.innerHTML = content;\n }\n }\n };\n DropDownBase.prototype.getLocaleName = function () {\n return 'drop-down-base';\n };\n 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 () {\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);\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'];\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.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) {\n var _this = this;\n fields = fields ? fields : this.fields;\n var ulElement;\n this.isActive = true;\n var eventArgs = { cancel: false, data: dataSource, query: query };\n this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;\n this.trigger('actionBegin', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n _this.showSpinner();\n if (dataSource instanceof DataManager) {\n _this.isRequested = true;\n if (_this.isDataFetched) {\n _this.emptyDataRequest(fields);\n return;\n }\n eventArgs.data.executeQuery(_this.getQuery(eventArgs.query)).then(function (e) {\n _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;\n _this.trigger('actionComplete', e, function (e) {\n if (!e.cancel) {\n var listItems = e.result;\n if (listItems.length === 0) {\n _this.isDataFetched = true;\n }\n ulElement = _this.renderItems(listItems, fields);\n _this.onActionComplete(ulElement, listItems, e);\n if (_this.groupTemplate) {\n _this.renderGroupTemplate(ulElement);\n }\n _this.isRequested = false;\n _this.bindChildItems(listItems, ulElement, fields, e);\n }\n });\n }).catch(function (e) {\n _this.isRequested = false;\n _this.onActionFailure(e);\n _this.hideSpinner();\n });\n }\n else {\n var dataManager = new DataManager(eventArgs.data);\n var listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);\n var localDataArgs = { cancel: false, result: listItems };\n _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;\n _this.trigger('actionComplete', localDataArgs, function (localDataArgs) {\n if (!localDataArgs.cancel) {\n ulElement = _this.renderItems(localDataArgs.result, fields);\n _this.onActionComplete(ulElement, localDataArgs.result);\n if (_this.groupTemplate) {\n _this.renderGroupTemplate(ulElement);\n }\n _this.bindChildItems(localDataArgs.result, ulElement, fields);\n 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) {\n if (this.list) {\n if ((this.element.tagName === 'SELECT' && this.element.options.length > 0)\n || (this.element.tagName === 'UL' && this.element.childNodes.length > 0)) {\n var data = dataSource instanceof Array ? (dataSource.length > 0)\n : !isNullOrUndefined(dataSource);\n if (!data && this.selectData && this.selectData.length > 0) {\n dataSource = this.selectData;\n }\n }\n this.setListData(dataSource, fields, query);\n }\n };\n DropDownBase.prototype.updateSelectElementData = function (isFiltering) {\n if (isFiltering && isNullOrUndefined(this.selectData) && this.listData && this.listData.length > 0) {\n this.selectData = this.listData;\n }\n };\n DropDownBase.prototype.updateSelection = function () {\n // This is for after added the item, need to update the selected index values.\n };\n DropDownBase.prototype.renderList = function () {\n // This is for render the list items.\n this.render();\n };\n // 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 (isEmptyData) {\n this.list = this.createElement('div', { className: dropDownBaseClasses.content, attrs: { 'tabindex': '0' } });\n this.list.classList.add(dropDownBaseClasses.root);\n this.setFields();\n var rippleModel = { duration: 300, selector: '.' + dropDownBaseClasses.li };\n this.rippleFun = rippleEffect(this.list, rippleModel);\n var group = this.element.querySelector('select>optgroup');\n if ((this.fields.groupBy || !isNullOrUndefined(group)) && !this.isGroupChecking) {\n EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);\n }\n if (this.getModuleName() === 'dropdownbase') {\n if (this.element.getAttribute('tabindex')) {\n this.list.setAttribute('tabindex', this.element.getAttribute('tabindex'));\n }\n removeClass([this.element], dropDownBaseClasses.root);\n this.element.style.display = 'none';\n var wrapperElement = this.createElement('div');\n this.element.parentElement.insertBefore(wrapperElement, this.element);\n wrapperElement.appendChild(this.element);\n wrapperElement.appendChild(this.list);\n }\n this.setEnableRtl();\n this.setEnabled();\n if (!isEmptyData) {\n this.initialize();\n }\n };\n /**\n * 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 };\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 (isEmptyData) {\n _super.prototype.render.call(this, 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 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', 'aria-placeholder',\n 'role', 'autocorrect', 'autocomplete', 'autocapitalize', 'spellcheck', 'minlength', 'maxlength'];\n var validateAttr = ['name', 'required'];\n if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {\n defaultAttr.push('tabindex');\n }\n if (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 'aria-owns': this.element.id + '_options',\n 'role': 'listbox',\n 'aria-haspopup': 'true',\n 'aria-expanded': 'false',\n 'aria-activedescendant': 'null',\n 'aria-live': 'polite',\n 'aria-labelledby': this.hiddenElement.id\n };\n };\n DropDownList.prototype.setEnableRtl = function () {\n Input.setEnableRtl(this.enableRtl, [this.inputElement.parentElement]);\n if (this.popupObj) {\n this.popupObj.enableRtl = this.enableRtl;\n this.popupObj.dataBind();\n }\n };\n DropDownList.prototype.setEnable = function () {\n Input.setEnabled(this.enabled, this.inputElement);\n if (this.enabled) {\n removeClass([this.inputWrapper.container], dropDownListClasses.disable);\n this.inputElement.setAttribute('aria-disabled', 'false');\n this.targetElement().setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.hidePopup();\n addClass([this.inputWrapper.container], dropDownListClasses.disable);\n this.inputElement.setAttribute('aria-disabled', 'true');\n this.targetElement().tabIndex = -1;\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n *\n * @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);\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();\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();\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();\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();\n if (this.isFilterLayout()) {\n this.focusDropDown(e);\n }\n }\n else {\n this.focusIn(e);\n this.floatLabelChange();\n this.queryString = this.inputElement.value.trim() === '' ? null : this.inputElement.value;\n this.isDropDownClick = true;\n this.showPopup();\n }\n // 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) {\n attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\n if (this.isFilterLayout() && this.filterInput) {\n attributes(this.filterInput, { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\n }\n }\n if ((!this.isPopupOpen && !isNullOrUndefined(li)) || (this.isPopupOpen && !isNullOrUndefined(e) &&\n (e.type !== 'keydown' || e.type === 'keydown' && e.action === 'enter'))) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n if (this.isPopupOpen && !isNullOrUndefined(this.selectedLI) && this.itemData !== null && (!e || e.type !== 'click')) {\n this.setScrollPosition(e);\n }\n if (Browser.info.name !== 'mozilla') {\n attributes(this.inputElement, { 'aria-label': this.inputElement.value });\n attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id });\n this.targetElement().removeAttribute('aria-live');\n }\n };\n DropDownList.prototype.dropdownCompiler = function (dropdownTemplate) {\n var checkTemplate = false;\n if (dropdownTemplate) {\n 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 }\n if (!this.valueTempElement) {\n this.valueTempElement = this.createElement('span', { className: dropDownListClasses.value });\n this.inputElement.parentElement.insertBefore(this.valueTempElement, this.inputElement);\n this.inputElement.style.display = 'none';\n }\n this.valueTempElement.innerHTML = '';\n var 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 'aria-owns': this.element.id + '_options',\n 'role': 'listbox',\n 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null,\n 'autocomplete': 'off',\n 'autocorrect': 'off',\n 'autocapitalize': 'off',\n 'spellcheck': 'false'\n });\n this.clearIconElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);\n if (!Browser.isDevice && this.clearIconElement) {\n EventHandler.add(this.clearIconElement, 'click', this.clearText, this);\n this.clearIconElement.style.visibility = 'hidden';\n }\n if (!Browser.isDevice) {\n this.searchKeyModule = new KeyboardEvents(this.filterInput, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigure,\n eventName: 'keydown'\n });\n }\n else {\n this.searchKeyModule = new KeyboardEvents(this.filterInput, {\n keyAction: this.mobileKeyActionHandler.bind(this),\n keyConfigs: this.keyConfigure,\n eventName: 'keydown'\n });\n }\n EventHandler.add(this.filterInput, 'input', this.onInput, this);\n EventHandler.add(this.filterInput, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.filterInput, 'keydown', this.onFilterDown, this);\n EventHandler.add(this.filterInput, 'blur', this.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.updateValues();\n this.initRemoteRender = false;\n this.initial = false;\n if (this.value && this.dataSource instanceof DataManager) {\n var checkField_1 = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;\n var checkVal = list.some(function (x) { return x[checkField_1] === _this.value; });\n if (!checkVal) {\n this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField_1, 'equal', this.value)))\n .then(function (e) {\n if (e.result.length > 0) {\n _this.addItem(e.result, list.length);\n _this.updateValues();\n }\n });\n }\n }\n }\n if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {\n if (!this.actionCompleteData.isUpdated || ((!this.isCustomFilter\n && !this.isFilterFocus) || (isNullOrUndefined(this.itemData) && this.allowFiltering)\n && ((this.dataSource instanceof DataManager)\n || (!isNullOrUndefined(this.dataSource) && !isNullOrUndefined(this.dataSource.length) &&\n this.dataSource.length !== 0)))) {\n if (this.itemTemplate && this.element.tagName === 'EJS-COMBOBOX' && this.allowFiltering) {\n setTimeout(function () {\n _this.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();\n }\n }\n };\n DropDownList.prototype.updateActionCompleteDataValues = function (ulElement, list) {\n this.actionCompleteData = { ulElement: ulElement.cloneNode(true), list: list, isUpdated: true };\n if (isNullOrUndefined(this.actionData.ulElement) && isNullOrUndefined(this.actionData.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 () {\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 attributes(_this.targetElement(), { 'aria-expanded': 'true' });\n var inputParent = _this.isFiltering() ? _this.filterInput.parentElement : _this.inputWrapper.container;\n addClass([inputParent], [dropDownListClasses.inputFocus]);\n var animModel = { name: 'FadeIn', duration: 100 };\n _this.beforePopupOpen = true;\n var popupInstance = _this.popupObj;\n var eventArgs = { popup: popupInstance, 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) {\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', 'aria-activedescendant': null });\n this.inputWrapper.container.classList.remove(dropDownListClasses.iconAnimation);\n if (this.isFiltering()) {\n this.actionCompleteData.isUpdated = false;\n }\n this.beforePopupOpen = false;\n var animModel = {\n name: 'FadeOut',\n duration: 100,\n delay: delay ? delay : 0\n };\n var popupInstance = this.popupObj;\n var eventArgs = { popup: popupInstance, cancel: false, animation: animModel };\n this.trigger('close', eventArgs, function (eventArgs) {\n if (!isNullOrUndefined(_this.popupObj) &&\n !isNullOrUndefined(_this.popupObj.element.querySelector('.e-fixed-head'))) {\n var fixedHeader = _this.popupObj.element.querySelector('.e-fixed-head');\n fixedHeader.parentNode.removeChild(fixedHeader);\n _this.fixedHeaderElement = null;\n }\n if (!eventArgs.cancel) {\n if (_this.getModuleName() === 'autocomplete') {\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', 'textbox');\n }\n if (isNullOrUndefined(this.inputElement.getAttribute('type'))) {\n this.inputElement.setAttribute('type', 'text');\n }\n }\n else {\n this.inputElement = this.createElement('input', { attrs: { role: 'textbox', type: 'text' } });\n if (this.element.tagName !== this.getNgDirective()) {\n this.element.style.display = 'none';\n }\n this.element.parentElement.insertBefore(this.inputElement, this.element);\n this.preventTabIndex(this.inputElement);\n }\n var updatedCssClassValues = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValues = (this.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n this.inputWrapper = Input.createInput({\n element: this.inputElement,\n buttons: this.isPopupButton() ? [dropDownListClasses.icon] : null,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.getModuleName() === 'dropdownlist' ? true : this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassValues,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton\n }\n }, this.createElement);\n if (this.element.tagName === this.getNgDirective()) {\n this.element.appendChild(this.inputWrapper.container);\n }\n else {\n this.inputElement.parentElement.insertBefore(this.element, this.inputElement);\n }\n this.hiddenElement = this.createElement('select', {\n attrs: { 'aria-hidden': 'true', 'tabindex': '-1', 'class': dropDownListClasses.hiddenElement }\n });\n prepend([this.hiddenElement], this.inputWrapper.container);\n this.validationAttribute(this.element, this.hiddenElement);\n this.setReadOnly();\n this.setFields();\n this.inputWrapper.container.style.width = formatUnit(this.width);\n this.inputWrapper.container.classList.add('e-ddl');\n this.wireEvent();\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n var id = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');\n this.element.id = id;\n this.hiddenElement.id = id + '_hidden';\n this.targetElement().setAttribute('tabindex', this.tabIndex);\n attributes(this.targetElement(), this.getAriaAttributes());\n this.updateDataAttribute(this.htmlAttributes);\n this.setHTMLAttributes();\n if (this.value !== null || this.activeIndex !== null || this.text !== null) {\n this.initValue();\n }\n else if (this.element.tagName === 'SELECT' && this.element.options[0]) {\n var selectElement = this.element;\n this.value = selectElement.options[selectElement.selectedIndex].value;\n this.text = isNullOrUndefined(this.value) ? null : selectElement.options[selectElement.selectedIndex].textContent;\n this.initValue();\n }\n this.preventTabIndex(this.element);\n if (!this.enabled) {\n this.targetElement().tabIndex = -1;\n }\n this.initial = false;\n this.element.style.opacity = '';\n this.inputElement.onselect = function (e) {\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 this.renderComplete();\n };\n DropDownList.prototype.setFooterTemplate = function (popupEle) {\n var compiledString;\n if (this.footer) {\n this.footer.innerHTML = '';\n }\n else {\n this.footer = this.createElement('div');\n addClass([this.footer], dropDownListClasses.footer);\n }\n var footercheck = this.dropdownCompiler(this.footerTemplate);\n if (footercheck) {\n compiledString = compile(select(this.footerTemplate, document).innerHTML.trim());\n }\n else {\n compiledString = compile(this.footerTemplate);\n }\n // 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) {\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 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 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 {\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 {\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 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.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 () {\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();\n }\n this.invokeRenderPopup();\n };\n DropDownList.prototype.invokeRenderPopup = function () {\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();\n }\n attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\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();\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 };\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 };\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', 'aria-placeholder',\n 'placeholder', 'aria-owns', 'aria-labelledby', 'aria-haspopup', 'aria-expanded',\n 'aria-activedescendant', 'autocomplete', 'aria-readonly', 'autocorrect',\n 'autocapitalize', 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-describedby', 'aria-label'];\n for (var i = 0; i < attrArray.length; i++) {\n this.inputElement.removeAttribute(attrArray[i]);\n }\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n this.inputElement.classList.remove('e-input');\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n }\n this.element.style.display = 'block';\n if (this.inputWrapper.container.parentElement.tagName === this.getNgDirective()) {\n detach(this.inputWrapper.container);\n }\n else {\n this.inputWrapper.container.parentElement.insertBefore(this.element, this.inputWrapper.container);\n detach(this.inputWrapper.container);\n }\n _super.prototype.destroy.call(this);\n };\n /* 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 __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 * as React from 'react';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * The DropDownList component contains a list of predefined values, from which the user can choose a single value.\n * ```\n * \n * ```\n */\nvar DropDownListComponent = /** @class */ (function (_super) {\n __extends(DropDownListComponent, _super);\n function DropDownListComponent(props) {\n var _this = _super.call(this, props) || this;\n _this.initRenderCalled = false;\n _this.checkInjectedModules = false;\n _this.immediateRender = false;\n _this.portals = [];\n return _this;\n }\n DropDownListComponent.prototype.render = function () {\n if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {\n _super.prototype.render.call(this);\n this.initRenderCalled = true;\n }\n else {\n return React.createElement(React.Fragment, null, [].concat(React.createElement(\"input\", this.getDefaultAttributes()), this.portals));\n }\n };\n return DropDownListComponent;\n}(DropDownList));\nexport { DropDownListComponent };\napplyMixins(DropDownListComponent, [ComponentBase, React.Component]);\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 } 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 if (!isNullOrUndefined(element.id) && element.id !== '') {\n floatLabelElement.id = 'label_' + element.id.replace(/ /g, '_');\n attributes(element, { '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 { 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.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 {\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 () {\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, 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' });\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 'aria-owns': this.element.id + '_options',\n 'role': 'listbox',\n 'aria-multiselectable': 'true',\n 'aria-activedescendant': 'null',\n 'aria-haspopup': 'true',\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 attributes(this.inputElement, this.getAriaAttributes());\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();\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();\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.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 = [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();\n }\n else {\n this.hidePopup();\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.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();\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 };\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 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();\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();\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();\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();\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 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 this.list.focus();\n }\n this.selectByKey(e);\n }\n this.checkPlaceholderSize();\n };\n MultiSelect.prototype.checkBackCommand = function (e) {\n if (e.keyCode === 8 && 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();\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();\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();\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) {\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 }\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();\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, 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) {\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.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 attributes(this.inputElement, { 'aria-activedescendant': 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();\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 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 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 () {\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 };\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 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 () {\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);\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)) {\n _this.beforePopupOpen = false;\n return;\n }\n _this.onPopupShown();\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 this.inputElement.setAttribute('aria-labelledby', 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 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 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', 'aria-placeholder', '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","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 * as React from 'react';\nimport { MultiSelect } from '@syncfusion/ej2-dropdowns';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n* The MultiSelect allows the user to pick a values from the predefined list of values.\n * ```\n * \n * ```\n */\nvar MultiSelectComponent = /** @class */ (function (_super) {\n __extends(MultiSelectComponent, _super);\n function MultiSelectComponent(props) {\n var _this = _super.call(this, props) || this;\n _this.initRenderCalled = false;\n _this.checkInjectedModules = true;\n _this.immediateRender = false;\n _this.portals = [];\n return _this;\n }\n MultiSelectComponent.prototype.render = function () {\n if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {\n _super.prototype.render.call(this);\n this.initRenderCalled = true;\n }\n else {\n return React.createElement(React.Fragment, null, [].concat(React.createElement(\"input\", this.getDefaultAttributes()), this.portals));\n }\n };\n return MultiSelectComponent;\n}(MultiSelect));\nexport { MultiSelectComponent };\napplyMixins(MultiSelectComponent, [ComponentBase, React.Component]);\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, EventHandler, L10n, setValue, getValue, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, detach, Internationalization, getUniqueID, closest } from '@syncfusion/ej2-base';\nimport { addClass, removeClass } from '@syncfusion/ej2-base';\nimport { Input } from '../input/input';\nvar HIDE_CLEAR = 'e-clear-icon-hide';\nvar TEXTBOX_FOCUS = 'e-input-focus';\nvar containerAttr = ['title', 'style', 'class'];\n/**\n * Represents the TextBox component that allows the user to enter the values based on it's type.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar TextBox = /** @class */ (function (_super) {\n __extends(TextBox, _super);\n /**\n *\n * @param {TextBoxModel} options - Specifies the TextBox model.\n * @param {string | HTMLInputElement | HTMLTextAreaElement} element - Specifies the element to render as component.\n * @private\n */\n function TextBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.previousValue = null;\n _this.isAngular = false;\n _this.isHiddenInput = false;\n _this.isForm = false;\n _this.inputPreviousValue = null;\n _this.isVue = false;\n _this.textboxOptions = options;\n return _this;\n }\n /**\n * Calls internally if any of the property value is changed.\n *\n * @param {TextBoxModel} newProp - Returns the dynamic property value of the component.\n * @param {TextBoxModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n TextBox.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 'floatLabelType':\n Input.removeFloating(this.textboxWrapper);\n Input.addFloating(this.respectiveElement, this.floatLabelType, this.placeholder);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.respectiveElement, this.floatLabelType, this.textboxWrapper.container);\n this.bindClearEvent();\n break;\n case 'width':\n Input.setWidth(newProp.width, this.textboxWrapper.container);\n break;\n case 'value':\n {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n if (!this.isBlank(this.value)) {\n this.value = this.value.toString();\n }\n this.isProtectedOnChange = prevOnChange;\n Input.setValue(this.value, this.respectiveElement, this.floatLabelType, this.showClearButton);\n if (this.isHiddenInput) {\n this.element.value = this.respectiveElement.value;\n }\n this.inputPreviousValue = this.respectiveElement.value;\n /* istanbul ignore next */\n if ((this.isAngular || this.isVue) && this.preventChange === true) {\n this.previousValue = this.isAngular ? this.value : this.previousValue;\n this.preventChange = false;\n }\n else if (isNullOrUndefined(this.isAngular) || !this.isAngular\n || (this.isAngular && !this.preventChange) || (this.isAngular && isNullOrUndefined(this.preventChange))) {\n this.raiseChangeEvent();\n }\n }\n break;\n case 'htmlAttributes':\n {\n this.updateHTMLAttrToElement();\n this.updateHTMLAttrToWrapper();\n this.checkAttributes(true);\n Input.validateInputType(this.textboxWrapper.container, this.element);\n }\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.respectiveElement);\n break;\n case 'type':\n if (this.respectiveElement.tagName !== 'TEXTAREA') {\n this.respectiveElement.setAttribute('type', this.type);\n Input.validateInputType(this.textboxWrapper.container, this.element);\n this.raiseChangeEvent();\n }\n break;\n case 'showClearButton':\n if (this.respectiveElement.tagName !== 'TEXTAREA') {\n Input.setClearButton(this.showClearButton, this.respectiveElement, this.textboxWrapper);\n this.bindClearEvent();\n }\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.textboxWrapper.container]);\n break;\n case 'placeholder':\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n break;\n case 'autocomplete':\n if (this.autocomplete !== 'on' && this.autocomplete !== '') {\n this.respectiveElement.autocomplete = this.autocomplete;\n }\n else {\n this.removeAttributes(['autocomplete']);\n }\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\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.respectiveElement);\n break;\n }\n }\n };\n /**\n * Gets the component name\n *\n * @returns {string} Returns the component name.\n * @private\n */\n TextBox.prototype.getModuleName = function () {\n return 'textbox';\n };\n TextBox.prototype.isBlank = function (str) {\n return (!str || /^\\s*$/.test(str));\n };\n TextBox.prototype.preRender = function () {\n this.cloneElement = this.element.cloneNode(true);\n this.formElement = closest(this.element, 'form');\n if (!isNullOrUndefined(this.formElement)) {\n this.isForm = true;\n }\n /* istanbul ignore next */\n if (this.element.tagName === 'EJS-TEXTBOX') {\n var ejInstance = getValue('ej2_instances', this.element);\n var inputElement = this.multiline ?\n this.createElement('textarea') :\n 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') {\n inputElement.setAttribute(attributeName, this.element.attributes[index].nodeValue);\n inputElement.innerHTML = this.element.innerHTML;\n if (attributeName === 'name') {\n this.element.removeAttribute('name');\n }\n }\n }\n this.element.appendChild(inputElement);\n this.element = inputElement;\n setValue('ej2_instances', ejInstance, this.element);\n }\n this.updateHTMLAttrToElement();\n this.checkAttributes(false);\n if (this.element.tagName !== 'TEXTAREA') {\n this.element.setAttribute('type', this.type);\n }\n this.element.setAttribute('role', 'textbox');\n this.globalize = new Internationalization(this.locale);\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('textbox', 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('textbox'));\n }\n if (!this.element.hasAttribute('name')) {\n this.element.setAttribute('name', this.element.getAttribute('id'));\n }\n if (this.element.tagName === 'INPUT' && this.multiline) {\n this.isHiddenInput = true;\n this.textarea = this.createElement('textarea');\n this.element.parentNode.insertBefore(this.textarea, this.element);\n this.element.setAttribute('type', 'hidden');\n this.textarea.setAttribute('name', this.element.getAttribute('name'));\n this.element.removeAttribute('name');\n this.textarea.setAttribute('role', this.element.getAttribute('role'));\n this.element.removeAttribute('role');\n this.textarea.setAttribute('id', getUniqueID('textarea'));\n var apiAttributes = ['placeholder', 'disabled', 'value', 'readonly', 'type', 'autocomplete'];\n for (var index = 0; index < this.element.attributes.length; index++) {\n var attributeName = this.element.attributes[index].nodeName;\n if (this.element.hasAttribute(attributeName) && containerAttr.indexOf(attributeName) < 0 &&\n !(attributeName === 'id' || attributeName === 'type' || attributeName === 'e-mappinguid')) {\n // e-mappinguid attribute is handled for Grid component.\n this.textarea.setAttribute(attributeName, this.element.attributes[index].nodeValue);\n if (apiAttributes.indexOf(attributeName) < 0) {\n this.element.removeAttribute(attributeName);\n index--;\n }\n }\n }\n }\n };\n TextBox.prototype.checkAttributes = function (isDynamic) {\n var attrs = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['placeholder', 'disabled', 'value', 'readonly', 'type', 'autocomplete'];\n for (var _i = 0, attrs_1 = attrs; _i < attrs_1.length; _i++) {\n var key = attrs_1[_i];\n if (!isNullOrUndefined(this.element.getAttribute(key))) {\n switch (key) {\n case 'disabled':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.element.getAttribute(key) === 'disabled' || this.element.getAttribute(key) === '' ||\n this.element.getAttribute(key) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.element.getAttribute(key) === 'readonly' || this.element.getAttribute(key) === ''\n || this.element.getAttribute(key) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.element.placeholder }, !isDynamic);\n }\n break;\n case 'autocomplete':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['autocomplete'] === undefined)) || isDynamic) {\n var autoCompleteTxt = this.element.autocomplete === 'off' ? 'off' : 'on';\n this.setProperties({ autocomplete: autoCompleteTxt }, !isDynamic);\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['value'] === undefined)) || isDynamic) {\n this.setProperties({ value: this.element.value }, !isDynamic);\n }\n break;\n case 'type':\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['type'] === undefined)) || isDynamic) {\n this.setProperties({ type: this.element.type }, !isDynamic);\n }\n break;\n }\n }\n }\n };\n /**\n * To Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n TextBox.prototype.render = function () {\n var updatedCssClassValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValue = this.getInputValidClassList(this.cssClass);\n }\n this.respectiveElement = (this.isHiddenInput) ? this.textarea : this.element;\n this.textboxWrapper = Input.createInput({\n element: this.respectiveElement,\n floatLabelType: this.floatLabelType,\n properties: {\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n cssClass: updatedCssClassValue,\n readonly: this.readonly,\n placeholder: this.placeholder,\n showClearButton: this.showClearButton\n }\n });\n this.updateHTMLAttrToWrapper();\n if (this.isHiddenInput) {\n this.respectiveElement.parentNode.insertBefore(this.element, this.respectiveElement);\n }\n this.wireEvents();\n if (!isNullOrUndefined(this.value)) {\n Input.setValue(this.value, this.respectiveElement, this.floatLabelType, this.showClearButton);\n if (this.isHiddenInput) {\n this.element.value = this.respectiveElement.value;\n }\n }\n if (!isNullOrUndefined(this.value)) {\n this.initialValue = this.value;\n this.setInitialValue();\n }\n if (this.autocomplete !== 'on' && this.autocomplete !== '') {\n this.respectiveElement.autocomplete = this.autocomplete;\n }\n else if (!isNullOrUndefined(this.textboxOptions) && (this.textboxOptions['autocomplete'] !== undefined)) {\n this.removeAttributes(['autocomplete']);\n }\n this.previousValue = this.value;\n this.inputPreviousValue = this.value;\n this.respectiveElement.defaultValue = this.respectiveElement.value;\n Input.setWidth(this.width, this.textboxWrapper.container);\n this.renderComplete();\n };\n TextBox.prototype.updateHTMLAttrToWrapper = 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 if (key === 'class') {\n var updatedClassValues = this.getInputValidClassList(this.htmlAttributes[key]);\n if (updatedClassValues !== '') {\n addClass([this.textboxWrapper.container], updatedClassValues.split(' '));\n }\n }\n else if (key === 'style') {\n var setStyle = this.textboxWrapper.container.getAttribute(key);\n setStyle = !isNullOrUndefined(setStyle) ? (setStyle + this.htmlAttributes[key]) :\n this.htmlAttributes[key];\n this.textboxWrapper.container.setAttribute(key, setStyle);\n }\n else {\n this.textboxWrapper.container.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n };\n TextBox.prototype.updateHTMLAttrToElement = 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.element.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n };\n TextBox.prototype.updateCssClass = function (newClass, oldClass) {\n Input.setCssClass(this.getInputValidClassList(newClass), [this.textboxWrapper.container], this.getInputValidClassList(oldClass));\n };\n TextBox.prototype.getInputValidClassList = function (inputClassName) {\n var result = inputClassName;\n if (!isNullOrUndefined(inputClassName) && inputClassName !== '') {\n result = (inputClassName.replace(/\\s+/g, ' ')).trim();\n }\n return result;\n };\n TextBox.prototype.setInitialValue = function () {\n if (!this.isAngular) {\n this.respectiveElement.setAttribute('value', this.initialValue);\n }\n };\n TextBox.prototype.wireEvents = function () {\n EventHandler.add(this.respectiveElement, 'focus', this.focusHandler, this);\n EventHandler.add(this.respectiveElement, 'blur', this.focusOutHandler, this);\n EventHandler.add(this.respectiveElement, 'input', this.inputHandler, this);\n EventHandler.add(this.respectiveElement, 'change', this.changeHandler, this);\n if (this.isForm) {\n EventHandler.add(this.formElement, 'reset', this.resetForm, this);\n }\n this.bindClearEvent();\n if (!isNullOrUndefined(this.textboxWrapper.container.querySelector('.e-float-text')) && this.floatLabelType === 'Auto'\n && this.textboxWrapper.container.classList.contains('e-autofill') &&\n this.textboxWrapper.container.classList.contains('e-outline')) {\n EventHandler.add((this.textboxWrapper.container.querySelector('.e-float-text')), 'animationstart', this.animationHandler, this);\n }\n };\n TextBox.prototype.animationHandler = function () {\n this.textboxWrapper.container.classList.add('e-valid-input');\n var label = this.textboxWrapper.container.querySelector('.e-float-text');\n if (!isNullOrUndefined(label)) {\n label.classList.add('e-label-top');\n if (label.classList.contains('e-label-bottom')) {\n label.classList.remove('e-label-bottom');\n }\n }\n };\n TextBox.prototype.resetValue = function (value) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.value = value;\n this.isProtectedOnChange = prevOnChange;\n };\n TextBox.prototype.resetForm = function () {\n if (this.isAngular) {\n this.resetValue('');\n }\n else {\n this.resetValue(this.initialValue);\n }\n if (!isNullOrUndefined(this.textboxWrapper)) {\n var label = this.textboxWrapper.container.querySelector('.e-float-text');\n if (!isNullOrUndefined(label)) {\n if ((isNullOrUndefined(this.initialValue) || this.initialValue === '')) {\n label.classList.add('e-label-bottom');\n label.classList.remove('e-label-top');\n }\n else if (this.initialValue !== '') {\n label.classList.add('e-label-top');\n label.classList.remove('e-label-bottom');\n }\n }\n }\n };\n TextBox.prototype.focusHandler = function (args) {\n var eventArgs = {\n container: this.textboxWrapper.container,\n event: args,\n value: this.value\n };\n this.trigger('focus', eventArgs);\n };\n TextBox.prototype.focusOutHandler = function (args) {\n if (!(this.previousValue === null && this.value === null && this.respectiveElement.value === '') &&\n (this.previousValue !== this.respectiveElement.value)) {\n this.raiseChangeEvent(args, true);\n }\n var eventArgs = {\n container: this.textboxWrapper.container,\n event: args,\n value: this.value\n };\n this.trigger('blur', eventArgs);\n };\n TextBox.prototype.inputHandler = function (args) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias\n var textboxObj = this;\n var eventArgs = {\n event: args,\n value: this.respectiveElement.value,\n previousValue: this.inputPreviousValue,\n container: this.textboxWrapper.container\n };\n this.inputPreviousValue = this.respectiveElement.value;\n /* istanbul ignore next */\n if (this.isAngular) {\n textboxObj.localChange({ value: this.respectiveElement.value });\n this.preventChange = true;\n }\n if (this.isVue) {\n this.preventChange = true;\n }\n this.trigger('input', eventArgs);\n args.stopPropagation();\n };\n TextBox.prototype.changeHandler = function (args) {\n this.setProperties({ value: this.respectiveElement.value }, true);\n this.raiseChangeEvent(args, true);\n args.stopPropagation();\n };\n TextBox.prototype.raiseChangeEvent = function (event, interaction) {\n var eventArgs = {\n event: event,\n value: this.value,\n previousValue: this.previousValue,\n container: this.textboxWrapper.container,\n isInteraction: interaction ? interaction : false,\n isInteracted: interaction ? interaction : false\n };\n this.preventChange = false;\n this.trigger('change', eventArgs);\n this.previousValue = this.value;\n };\n TextBox.prototype.bindClearEvent = function () {\n if (this.showClearButton && this.respectiveElement.tagName !== 'TEXTAREA') {\n if (this.enabled) {\n EventHandler.add(this.textboxWrapper.clearButton, 'mousedown touchstart', this.resetInputHandler, this);\n }\n else {\n EventHandler.remove(this.textboxWrapper.clearButton, 'mousedown touchstart', this.resetInputHandler);\n }\n }\n };\n TextBox.prototype.resetInputHandler = function (event) {\n event.preventDefault();\n if (!(this.textboxWrapper.clearButton.classList.contains(HIDE_CLEAR)) || this.textboxWrapper.container.classList.contains('e-static-clear')) {\n Input.setValue('', this.respectiveElement, this.floatLabelType, this.showClearButton);\n if (this.isHiddenInput) {\n this.element.value = this.respectiveElement.value;\n }\n this.setProperties({ value: this.respectiveElement.value }, true);\n var eventArgs = {\n event: event,\n value: this.respectiveElement.value,\n previousValue: this.inputPreviousValue,\n container: this.textboxWrapper.container\n };\n this.trigger('input', eventArgs);\n this.inputPreviousValue = this.respectiveElement.value;\n this.raiseChangeEvent(event, true);\n }\n };\n TextBox.prototype.unWireEvents = function () {\n EventHandler.remove(this.respectiveElement, 'focus', this.focusHandler);\n EventHandler.remove(this.respectiveElement, 'blur', this.focusOutHandler);\n EventHandler.remove(this.respectiveElement, 'input', this.inputHandler);\n EventHandler.remove(this.respectiveElement, 'change', this.changeHandler);\n if (this.isForm) {\n EventHandler.remove(this.formElement, 'reset', this.resetForm);\n }\n if (!isNullOrUndefined(this.textboxWrapper.container.querySelector('.e-float-text')) && this.floatLabelType === 'Auto'\n && this.textboxWrapper.container.classList.contains('e-outline') &&\n this.textboxWrapper.container.classList.contains('e-autofill')) {\n EventHandler.remove((this.textboxWrapper.container.querySelector('.e-float-text')), 'animationstart', this.animationHandler);\n }\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also, it maintains the initial TextBox element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n TextBox.prototype.destroy = function () {\n this.unWireEvents();\n if (this.element.tagName === 'INPUT' && this.multiline) {\n detach(this.textboxWrapper.container.getElementsByTagName('textarea')[0]);\n this.respectiveElement = this.element;\n this.element.removeAttribute('type');\n }\n this.respectiveElement.value = this.respectiveElement.defaultValue;\n this.respectiveElement.classList.remove('e-input');\n this.removeAttributes(['aria-placeholder', 'aria-disabled', 'aria-readonly', 'aria-labelledby']);\n if (!isNullOrUndefined(this.textboxWrapper)) {\n this.textboxWrapper.container.insertAdjacentElement('afterend', this.respectiveElement);\n detach(this.textboxWrapper.container);\n }\n this.textboxWrapper = null;\n _super.prototype.destroy.call(this);\n };\n /**\n * Adding the icons to the TextBox component.\n *\n * @param { string } position - Specify the icon placement on the TextBox. 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 TextBox.\n * @returns {void}\n */\n TextBox.prototype.addIcon = function (position, icons) {\n Input.addIcon(position, icons, this.textboxWrapper.container, this.respectiveElement, this.createElement);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns */\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n */\n TextBox.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns */\n /**\n * Adding the multiple attributes as key-value pair to the TextBox element.\n *\n * @param {string} attributes - Specifies the attributes to be add to TextBox element.\n * @returns {void}\n */\n TextBox.prototype.addAttributes = function (attributes) {\n for (var _i = 0, _a = Object.keys(attributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (key === 'disabled') {\n this.setProperties({ enabled: false }, true);\n Input.setEnabled(this.enabled, this.respectiveElement, this.floatLabelType, this.textboxWrapper.container);\n }\n else if (key === 'readonly') {\n this.setProperties({ readonly: true }, true);\n Input.setReadonly(this.readonly, this.respectiveElement);\n }\n else if (key === 'class') {\n this.respectiveElement.classList.add(attributes[key]);\n }\n else if (key === 'placeholder') {\n this.setProperties({ placeholder: attributes[key] }, true);\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n }\n else if (key === 'rows' && this.respectiveElement.tagName === 'TEXTAREA') {\n this.respectiveElement.setAttribute(key, attributes[key]);\n }\n else {\n this.respectiveElement.setAttribute(key, attributes[key]);\n }\n }\n };\n /**\n * Removing the multiple attributes as key-value pair to the TextBox element.\n *\n * @param { string[] } attributes - Specifies the attributes name to be removed from TextBox element.\n * @returns {void}\n */\n TextBox.prototype.removeAttributes = function (attributes) {\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var key = attributes_1[_i];\n if (key === 'disabled') {\n this.setProperties({ enabled: true }, true);\n Input.setEnabled(this.enabled, this.respectiveElement, this.floatLabelType, this.textboxWrapper.container);\n }\n else if (key === 'readonly') {\n this.setProperties({ readonly: false }, true);\n Input.setReadonly(this.readonly, this.respectiveElement);\n }\n else if (key === 'placeholder') {\n this.setProperties({ placeholder: null }, true);\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n }\n else {\n this.respectiveElement.removeAttribute(key);\n }\n }\n };\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n TextBox.prototype.focusIn = function () {\n if (document.activeElement !== this.respectiveElement && this.enabled) {\n this.respectiveElement.focus();\n if (this.textboxWrapper.container.classList.contains('e-input-group')\n || this.textboxWrapper.container.classList.contains('e-outline')\n || this.textboxWrapper.container.classList.contains('e-filled')) {\n addClass([this.textboxWrapper.container], [TEXTBOX_FOCUS]);\n }\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n TextBox.prototype.focusOut = function () {\n if (document.activeElement === this.respectiveElement && this.enabled) {\n this.respectiveElement.blur();\n if (this.textboxWrapper.container.classList.contains('e-input-group')\n || this.textboxWrapper.container.classList.contains('e-outline')\n || this.textboxWrapper.container.classList.contains('e-filled')) {\n removeClass([this.textboxWrapper.container], [TEXTBOX_FOCUS]);\n }\n }\n };\n __decorate([\n Property('text')\n ], TextBox.prototype, \"type\", void 0);\n __decorate([\n Property(false)\n ], TextBox.prototype, \"readonly\", void 0);\n __decorate([\n Property(null)\n ], TextBox.prototype, \"value\", void 0);\n __decorate([\n Property('Never')\n ], TextBox.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property('')\n ], TextBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], TextBox.prototype, \"placeholder\", void 0);\n __decorate([\n Property('on')\n ], TextBox.prototype, \"autocomplete\", void 0);\n __decorate([\n Property({})\n ], TextBox.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(false)\n ], TextBox.prototype, \"multiline\", void 0);\n __decorate([\n Property(true)\n ], TextBox.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], TextBox.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(false)\n ], TextBox.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(null)\n ], TextBox.prototype, \"width\", void 0);\n __decorate([\n Event()\n ], TextBox.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], TextBox.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], TextBox.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], TextBox.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], TextBox.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], TextBox.prototype, \"input\", void 0);\n TextBox = __decorate([\n NotifyPropertyChanges\n ], TextBox);\n return TextBox;\n}(Component));\nexport { TextBox };\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 * as React from 'react';\nimport { TextBox } from '@syncfusion/ej2-inputs';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * Represents the React TextBox Component\n * ```html\n * \n * ```\n */\nvar TextBoxComponent = /** @class */ (function (_super) {\n __extends(TextBoxComponent, _super);\n function TextBoxComponent(props) {\n var _this = _super.call(this, props) || this;\n _this.initRenderCalled = false;\n _this.checkInjectedModules = false;\n _this.immediateRender = true;\n _this.portals = [];\n return _this;\n }\n TextBoxComponent.prototype.render = function () {\n if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {\n _super.prototype.render.call(this);\n this.initRenderCalled = true;\n }\n else {\n return React.createElement(React.Fragment, null, [].concat(React.createElement(\"input\", this.getDefaultAttributes()), this.portals));\n }\n };\n return TextBoxComponent;\n}(TextBox));\nexport { TextBoxComponent };\napplyMixins(TextBoxComponent, [ComponentBase, React.Component]);\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 } 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') {\n input.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);\n input.innerHTML = this.element.innerHTML;\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 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 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 'aria-label': 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 'aria-label': 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 attributes(this.element, { 'aria-valuemin': this.min.toString(), 'aria-valuemax': this.max.toString() });\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 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 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 'autocorrect', 'aria-disabled', 'aria-placeholder', 'autocapitalize',\n 'spellcheck', 'aria-autocomplete', 'tabindex', 'aria-valuemin',\n '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 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 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})();\nimport * as React from 'react';\nimport { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * Represents the React NumericTextBox Component\n * ```html\n * \n * ```\n */\nvar NumericTextBoxComponent = /** @class */ (function (_super) {\n __extends(NumericTextBoxComponent, _super);\n function NumericTextBoxComponent(props) {\n var _this = _super.call(this, props) || this;\n _this.initRenderCalled = false;\n _this.checkInjectedModules = false;\n _this.immediateRender = true;\n _this.portals = [];\n return _this;\n }\n NumericTextBoxComponent.prototype.render = function () {\n if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {\n _super.prototype.render.call(this);\n this.initRenderCalled = true;\n }\n else {\n return React.createElement(React.Fragment, null, [].concat(React.createElement(\"input\", this.getDefaultAttributes()), this.portals));\n }\n };\n return NumericTextBoxComponent;\n}(NumericTextBox));\nexport { NumericTextBoxComponent };\napplyMixins(NumericTextBoxComponent, [ComponentBase, React.Component]);\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }\n\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\n\nvar ReCAPTCHA =\n/*#__PURE__*/\nfunction (_React$Component) {\n _inheritsLoose(ReCAPTCHA, _React$Component);\n\n function ReCAPTCHA() {\n var _this;\n\n _this = _React$Component.call(this) || this;\n _this.handleExpired = _this.handleExpired.bind(_assertThisInitialized(_this));\n _this.handleErrored = _this.handleErrored.bind(_assertThisInitialized(_this));\n _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));\n _this.handleRecaptchaRef = _this.handleRecaptchaRef.bind(_assertThisInitialized(_this));\n return _this;\n }\n\n var _proto = ReCAPTCHA.prototype;\n\n _proto.getValue = function getValue() {\n if (this.props.grecaptcha && this._widgetId !== undefined) {\n return this.props.grecaptcha.getResponse(this._widgetId);\n }\n\n return null;\n };\n\n _proto.getWidgetId = function getWidgetId() {\n if (this.props.grecaptcha && this._widgetId !== undefined) {\n return this._widgetId;\n }\n\n return null;\n };\n\n _proto.execute = function execute() {\n var grecaptcha = this.props.grecaptcha;\n\n if (grecaptcha && this._widgetId !== undefined) {\n return grecaptcha.execute(this._widgetId);\n } else {\n this._executeRequested = true;\n }\n };\n\n _proto.executeAsync = function executeAsync() {\n var _this2 = this;\n\n return new Promise(function (resolve, reject) {\n _this2.executionResolve = resolve;\n _this2.executionReject = reject;\n\n _this2.execute();\n });\n };\n\n _proto.reset = function reset() {\n if (this.props.grecaptcha && this._widgetId !== undefined) {\n this.props.grecaptcha.reset(this._widgetId);\n }\n };\n\n _proto.handleExpired = function handleExpired() {\n if (this.props.onExpired) {\n this.props.onExpired();\n } else {\n this.handleChange(null);\n }\n };\n\n _proto.handleErrored = function handleErrored() {\n if (this.props.onErrored) {\n this.props.onErrored();\n }\n\n if (this.executionReject) {\n this.executionReject();\n delete this.executionResolve;\n delete this.executionReject;\n }\n };\n\n _proto.handleChange = function handleChange(token) {\n if (this.props.onChange) {\n this.props.onChange(token);\n }\n\n if (this.executionResolve) {\n this.executionResolve(token);\n delete this.executionReject;\n delete this.executionResolve;\n }\n };\n\n _proto.explicitRender = function explicitRender() {\n if (this.props.grecaptcha && this.props.grecaptcha.render && this._widgetId === undefined) {\n var wrapper = document.createElement(\"div\");\n this._widgetId = this.props.grecaptcha.render(wrapper, {\n sitekey: this.props.sitekey,\n callback: this.handleChange,\n theme: this.props.theme,\n type: this.props.type,\n tabindex: this.props.tabindex,\n \"expired-callback\": this.handleExpired,\n \"error-callback\": this.handleErrored,\n size: this.props.size,\n stoken: this.props.stoken,\n hl: this.props.hl,\n badge: this.props.badge\n });\n this.captcha.appendChild(wrapper);\n }\n\n if (this._executeRequested && this.props.grecaptcha && this._widgetId !== undefined) {\n this._executeRequested = false;\n this.execute();\n }\n };\n\n _proto.componentDidMount = function componentDidMount() {\n this.explicitRender();\n };\n\n _proto.componentDidUpdate = function componentDidUpdate() {\n this.explicitRender();\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n if (this._widgetId !== undefined) {\n this.delayOfCaptchaIframeRemoving();\n this.reset();\n }\n };\n\n _proto.delayOfCaptchaIframeRemoving = function delayOfCaptchaIframeRemoving() {\n var temporaryNode = document.createElement(\"div\");\n document.body.appendChild(temporaryNode);\n temporaryNode.style.display = \"none\"; // move of the recaptcha to a temporary node\n\n while (this.captcha.firstChild) {\n temporaryNode.appendChild(this.captcha.firstChild);\n } // delete the temporary node after reset will be done\n\n\n setTimeout(function () {\n document.body.removeChild(temporaryNode);\n }, 5000);\n };\n\n _proto.handleRecaptchaRef = function handleRecaptchaRef(elem) {\n this.captcha = elem;\n };\n\n _proto.render = function render() {\n // consume properties owned by the reCATPCHA, pass the rest to the div so the user can style it.\n\n /* eslint-disable no-unused-vars */\n var _this$props = this.props,\n sitekey = _this$props.sitekey,\n onChange = _this$props.onChange,\n theme = _this$props.theme,\n type = _this$props.type,\n tabindex = _this$props.tabindex,\n onExpired = _this$props.onExpired,\n onErrored = _this$props.onErrored,\n size = _this$props.size,\n stoken = _this$props.stoken,\n grecaptcha = _this$props.grecaptcha,\n badge = _this$props.badge,\n hl = _this$props.hl,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"sitekey\", \"onChange\", \"theme\", \"type\", \"tabindex\", \"onExpired\", \"onErrored\", \"size\", \"stoken\", \"grecaptcha\", \"badge\", \"hl\"]);\n /* eslint-enable no-unused-vars */\n\n\n return React.createElement(\"div\", _extends({}, childProps, {\n ref: this.handleRecaptchaRef\n }));\n };\n\n return ReCAPTCHA;\n}(React.Component);\n\nexport { ReCAPTCHA as default };\nReCAPTCHA.displayName = \"ReCAPTCHA\";\nReCAPTCHA.propTypes = {\n sitekey: PropTypes.string.isRequired,\n onChange: PropTypes.func,\n grecaptcha: PropTypes.object,\n theme: PropTypes.oneOf([\"dark\", \"light\"]),\n type: PropTypes.oneOf([\"image\", \"audio\"]),\n tabindex: PropTypes.number,\n onExpired: PropTypes.func,\n onErrored: PropTypes.func,\n size: PropTypes.oneOf([\"compact\", \"normal\", \"invisible\"]),\n stoken: PropTypes.string,\n hl: PropTypes.string,\n badge: PropTypes.oneOf([\"bottomright\", \"bottomleft\", \"inline\"])\n};\nReCAPTCHA.defaultProps = {\n onChange: function onChange() {},\n theme: \"light\",\n type: \"image\",\n tabindex: 0,\n size: \"normal\",\n badge: \"bottomright\"\n};","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nfunction _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }\n\nimport { Component, createElement, forwardRef } from \"react\";\nimport PropTypes from \"prop-types\";\nimport hoistStatics from \"hoist-non-react-statics\";\nvar SCRIPT_MAP = {}; // A counter used to generate a unique id for each component that uses the function\n\nvar idCount = 0;\nexport default function makeAsyncScript(getScriptURL, options) {\n options = options || {};\n return function wrapWithAsyncScript(WrappedComponent) {\n var wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || \"Component\";\n\n var AsyncScriptLoader =\n /*#__PURE__*/\n function (_Component) {\n _inheritsLoose(AsyncScriptLoader, _Component);\n\n function AsyncScriptLoader(props, context) {\n var _this;\n\n _this = _Component.call(this, props, context) || this;\n _this.state = {};\n _this.__scriptURL = \"\";\n return _this;\n }\n\n var _proto = AsyncScriptLoader.prototype;\n\n _proto.asyncScriptLoaderGetScriptLoaderID = function asyncScriptLoaderGetScriptLoaderID() {\n if (!this.__scriptLoaderID) {\n this.__scriptLoaderID = \"async-script-loader-\" + idCount++;\n }\n\n return this.__scriptLoaderID;\n };\n\n _proto.setupScriptURL = function setupScriptURL() {\n this.__scriptURL = typeof getScriptURL === \"function\" ? getScriptURL() : getScriptURL;\n return this.__scriptURL;\n };\n\n _proto.asyncScriptLoaderHandleLoad = function asyncScriptLoaderHandleLoad(state) {\n var _this2 = this;\n\n // use reacts setState callback to fire props.asyncScriptOnLoad with new state/entry\n this.setState(state, function () {\n return _this2.props.asyncScriptOnLoad && _this2.props.asyncScriptOnLoad(_this2.state);\n });\n };\n\n _proto.asyncScriptLoaderTriggerOnScriptLoaded = function asyncScriptLoaderTriggerOnScriptLoaded() {\n var mapEntry = SCRIPT_MAP[this.__scriptURL];\n\n if (!mapEntry || !mapEntry.loaded) {\n throw new Error(\"Script is not loaded.\");\n }\n\n for (var obsKey in mapEntry.observers) {\n mapEntry.observers[obsKey](mapEntry);\n }\n\n delete window[options.callbackName];\n };\n\n _proto.componentDidMount = function componentDidMount() {\n var _this3 = this;\n\n var scriptURL = this.setupScriptURL();\n var key = this.asyncScriptLoaderGetScriptLoaderID();\n var _options = options,\n globalName = _options.globalName,\n callbackName = _options.callbackName,\n scriptId = _options.scriptId; // check if global object already attached to window\n\n if (globalName && typeof window[globalName] !== \"undefined\") {\n SCRIPT_MAP[scriptURL] = {\n loaded: true,\n observers: {}\n };\n } // check if script loading already\n\n\n if (SCRIPT_MAP[scriptURL]) {\n var entry = SCRIPT_MAP[scriptURL]; // if loaded or errored then \"finish\"\n\n if (entry && (entry.loaded || entry.errored)) {\n this.asyncScriptLoaderHandleLoad(entry);\n return;\n } // if still loading then callback to observer queue\n\n\n entry.observers[key] = function (entry) {\n return _this3.asyncScriptLoaderHandleLoad(entry);\n };\n\n return;\n }\n /*\n * hasn't started loading\n * start the \"magic\"\n * setup script to load and observers\n */\n\n\n var observers = {};\n\n observers[key] = function (entry) {\n return _this3.asyncScriptLoaderHandleLoad(entry);\n };\n\n SCRIPT_MAP[scriptURL] = {\n loaded: false,\n observers: observers\n };\n var script = document.createElement(\"script\");\n script.src = scriptURL;\n script.async = true;\n\n for (var attribute in options.attributes) {\n script.setAttribute(attribute, options.attributes[attribute]);\n }\n\n if (scriptId) {\n script.id = scriptId;\n }\n\n var callObserverFuncAndRemoveObserver = function callObserverFuncAndRemoveObserver(func) {\n if (SCRIPT_MAP[scriptURL]) {\n var mapEntry = SCRIPT_MAP[scriptURL];\n var observersMap = mapEntry.observers;\n\n for (var obsKey in observersMap) {\n if (func(observersMap[obsKey])) {\n delete observersMap[obsKey];\n }\n }\n }\n };\n\n if (callbackName && typeof window !== \"undefined\") {\n window[callbackName] = function () {\n return _this3.asyncScriptLoaderTriggerOnScriptLoaded();\n };\n }\n\n script.onload = function () {\n var mapEntry = SCRIPT_MAP[scriptURL];\n\n if (mapEntry) {\n mapEntry.loaded = true;\n callObserverFuncAndRemoveObserver(function (observer) {\n if (callbackName) {\n return false;\n }\n\n observer(mapEntry);\n return true;\n });\n }\n };\n\n script.onerror = function () {\n var mapEntry = SCRIPT_MAP[scriptURL];\n\n if (mapEntry) {\n mapEntry.errored = true;\n callObserverFuncAndRemoveObserver(function (observer) {\n observer(mapEntry);\n return true;\n });\n }\n };\n\n document.body.appendChild(script);\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n // Remove tag script\n var scriptURL = this.__scriptURL;\n\n if (options.removeOnUnmount === true) {\n var allScripts = document.getElementsByTagName(\"script\");\n\n for (var i = 0; i < allScripts.length; i += 1) {\n if (allScripts[i].src.indexOf(scriptURL) > -1) {\n if (allScripts[i].parentNode) {\n allScripts[i].parentNode.removeChild(allScripts[i]);\n }\n }\n }\n } // Clean the observer entry\n\n\n var mapEntry = SCRIPT_MAP[scriptURL];\n\n if (mapEntry) {\n delete mapEntry.observers[this.asyncScriptLoaderGetScriptLoaderID()];\n\n if (options.removeOnUnmount === true) {\n delete SCRIPT_MAP[scriptURL];\n }\n }\n };\n\n _proto.render = function render() {\n var globalName = options.globalName; // remove asyncScriptOnLoad from childProps\n\n var _this$props = this.props,\n asyncScriptOnLoad = _this$props.asyncScriptOnLoad,\n forwardedRef = _this$props.forwardedRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"asyncScriptOnLoad\", \"forwardedRef\"]); // eslint-disable-line no-unused-vars\n\n\n if (globalName && typeof window !== \"undefined\") {\n childProps[globalName] = typeof window[globalName] !== \"undefined\" ? window[globalName] : undefined;\n }\n\n childProps.ref = forwardedRef;\n return createElement(WrappedComponent, childProps);\n };\n\n return AsyncScriptLoader;\n }(Component); // Note the second param \"ref\" provided by React.forwardRef.\n // We can pass it along to AsyncScriptLoader as a regular prop, e.g. \"forwardedRef\"\n // And it can then be attached to the Component.\n\n\n var ForwardedComponent = forwardRef(function (props, ref) {\n return createElement(AsyncScriptLoader, _extends({}, props, {\n forwardedRef: ref\n }));\n });\n ForwardedComponent.displayName = \"AsyncScriptLoader(\" + wrappedComponentName + \")\";\n ForwardedComponent.propTypes = {\n asyncScriptOnLoad: PropTypes.func\n };\n return hoistStatics(ForwardedComponent, WrappedComponent);\n };\n}","import ReCAPTCHA from \"./recaptcha\";\nimport makeAsyncScriptLoader from \"react-async-script\";\nvar callbackName = \"onloadcallback\";\nvar globalName = \"grecaptcha\";\n\nfunction getOptions() {\n return typeof window !== \"undefined\" && window.recaptchaOptions || {};\n}\n\nfunction getURL() {\n var dynamicOptions = getOptions();\n var hostname = dynamicOptions.useRecaptchaNet ? \"recaptcha.net\" : \"www.google.com\";\n return \"https://\" + hostname + \"/recaptcha/api.js?onload=\" + callbackName + \"&render=explicit\";\n}\n\nexport default makeAsyncScriptLoader(getURL, {\n callbackName: callbackName,\n globalName: globalName\n})(ReCAPTCHA);","import RecaptchaWrapper from \"./recaptcha-wrapper\";\nimport ReCAPTCHA from \"./recaptcha\";\nexport default RecaptchaWrapper;\nexport { ReCAPTCHA };","import objectWithoutPropertiesLoose from \"./objectWithoutPropertiesLoose.js\";\nexport default function _objectWithoutProperties(source, excluded) {\n if (source == null) return {};\n var target = objectWithoutPropertiesLoose(source, excluded);\n var key, i;\n\n if (Object.getOwnPropertySymbols) {\n var sourceSymbolKeys = Object.getOwnPropertySymbols(source);\n\n for (i = 0; i < sourceSymbolKeys.length; i++) {\n key = sourceSymbolKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;\n target[key] = source[key];\n }\n }\n\n return target;\n}","export default function _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}","function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {\n try {\n var info = gen[key](arg);\n var value = info.value;\n } catch (error) {\n reject(error);\n return;\n }\n\n if (info.done) {\n resolve(value);\n } else {\n Promise.resolve(value).then(_next, _throw);\n }\n}\n\nexport default function _asyncToGenerator(fn) {\n return function () {\n var self = this,\n args = arguments;\n return new Promise(function (resolve, reject) {\n var gen = fn.apply(self, args);\n\n function _next(value) {\n asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"next\", value);\n }\n\n function _throw(err) {\n asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"throw\", err);\n }\n\n _next(undefined);\n });\n };\n}","import appConfig from \"../config\"\r\n\r\ninterface props {\r\n data?: any\r\n token?: string\r\n headers?: any\r\n}\r\n\r\nasync function client(\r\n endpoint: string,\r\n { data, token, headers: customHeaders, ...customConfig }: props\r\n) {\r\n const config = {\r\n method: data ? \"POST\" : \"GET\",\r\n body: data ? JSON.stringify(data) : undefined,\r\n headers: {\r\n Authorization: token ? `Bearer ${token}` : undefined,\r\n \"Content-Type\": data ? \"application/json\" : undefined,\r\n ...customHeaders,\r\n },\r\n ...customConfig,\r\n }\r\n\r\n return window.fetch(`${appConfig.url}/${endpoint}`, config).then(async (response: any) => {\r\n const data = await response.json()\r\n if (response.ok) {\r\n return data\r\n } else if (response.status === 404) {\r\n return Promise.reject(response.title)\r\n } else {\r\n return Promise.reject(data)\r\n }\r\n })\r\n}\r\n\r\nexport { client }\r\n","import React from \"react\"\r\nimport FosLogo from \"../../assets/favicon.png\"\r\n\r\ninterface SuccessMessageProps {\r\n title: string,\r\n message: string,\r\n isEmbeded: boolean,\r\n showFooter: boolean\r\n}\r\n\r\nconst SuccessMessage = ({title, message, isEmbeded, showFooter}: SuccessMessageProps) => {\r\n return (\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n {title ? title : \"Your message is sent\"}\r\n
\r\n
\r\n {message ? message : \"Thank you for talking to us\"}\r\n
\r\n
\r\n {showFooter && (\r\n
\r\n )}\r\n
\r\n \r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default SuccessMessage\r\n","import { CheckBoxComponent } from \"@syncfusion/ej2-react-buttons\"\r\nimport {\r\n DatePickerComponent,\r\n DateTimePickerComponent,\r\n Inject,\r\n MaskedDateTime,\r\n} from \"@syncfusion/ej2-react-calendars\"\r\nimport { DropDownListComponent, MultiSelectComponent } from \"@syncfusion/ej2-react-dropdowns\"\r\nimport { NumericTextBoxComponent, TextBoxComponent } from \"@syncfusion/ej2-react-inputs\"\r\nimport moment from \"moment\"\r\nimport { FormEvent, Fragment, useEffect, useState } from \"react\"\r\nimport Recaptcha from \"react-google-recaptcha\"\r\nimport { Oval } from \"react-loader-spinner\"\r\nimport FosLogo from \"../../assets/favicon.png\"\r\nimport { client } from \"../../utils/api-client\"\r\nimport { useAsync } from \"../../utils/hooks\"\r\nimport SuccessMessage from \"../success-message/successMessage\"\r\nimport appConfig from \"../../config\"\r\nimport { InquiryFormModel } from \"../../models/inquiryForm\"\r\nimport React from \"react\"\r\n\r\ninterface InquiryFormProps {\r\n form: InquiryFormModel\r\n isEmbeded: boolean\r\n}\r\ninterface customFields {\r\n customFieldDefinitionReference: string\r\n value: string | null\r\n isCustomField: boolean\r\n normalizedName: string\r\n displayName: string\r\n}\r\n\r\nconst InquiryForm = ({ form, isEmbeded }: InquiryFormProps) => {\r\n //#region variable declaration\r\n const { isLoading, run } = useAsync()\r\n const [errors, setErrors] = useState<{ [key: string]: string }>({})\r\n const [submitted, setSubmitted] = useState(false)\r\n const [recaptchaToken, setRecaptchaToken] = useState(\"\")\r\n const grecaptchaObject = window.grecaptcha\r\n const [multiSelectValues, setMultiSelectValues] = useState<{ [key: string]: [] }>()\r\n\r\n const submitBehaviorTypes: { [key: string]: string } = {\r\n completedMessage: \"003E077C-0F59-44B3-81EC-525A905CB615\",\r\n redirectUrl: \"99B9DE54-03AC-446D-927F-70C10CD2E2CD\",\r\n }\r\n //#endregion\r\n\r\n //#region set styles\r\n const fonts: { [key: string]: string } = {\r\n Standard: '\"Open Sans\", \"Helvetica Neue\", Helvetica, Arial, \"Tahoma sans-serif\"',\r\n Wide: \"Montserrat, Verdana, sans-serif\",\r\n Narrow: 'Oswald, \"Arial Narrow\", sans-serif',\r\n Friendly: 'Nunito, \"Comic Sans\", sans-serif',\r\n Traditional: '\"PT Serif\", \"Palatino Linotype\", \"Times New Roman\", serif',\r\n }\r\n\r\n const buttonStyle: { [key: string]: string } = {\r\n backgroundColor: form.submitButtonOption.backgroundColor,\r\n color: form.submitButtonOption.fontColor,\r\n border: `1px solid ${form.submitButtonOption.borderColor}`,\r\n borderRadius: \"10px\",\r\n }\r\n //#endregion\r\n\r\n //#region handle captcha change\r\n function handleRecaptchaChange(value: string) {\r\n setRecaptchaToken(value)\r\n }\r\n //#endregion\r\n\r\n //#region handle submit\r\n function handleSubmit(event: FormEvent) {\r\n event.preventDefault()\r\n\r\n //#region prepare request\r\n let arr: customFields[] = []\r\n const request = {\r\n inquiryFormReference: form.inquiryFormReference,\r\n formFields: arr,\r\n sRef: recaptchaToken,\r\n }\r\n\r\n form.formFields.forEach((field) => {\r\n if (field.isVisible) {\r\n var input = document.getElementsByName(field.normalizedName).item(0) as HTMLInputElement\r\n let fieldValue = input.value\r\n\r\n if (field.dataType.isDateTimeType && fieldValue) {\r\n fieldValue = toUtcDateTimeFormat(fieldValue)\r\n } else if (field.dataType.isDateType && fieldValue) {\r\n fieldValue = toUtcDateFormat(fieldValue)\r\n } else if (field.dataType.isBooleanType) {\r\n fieldValue = String(input.checked)\r\n } else if (field.dataType.isDropDown && field.isMultiSelect) {\r\n const selectedOptions = multiSelectValues?.[field.normalizedName] ?? []\r\n fieldValue = \"\"\r\n selectedOptions.forEach((value: string, idx: number) => {\r\n fieldValue = fieldValue + value\r\n if (idx < selectedOptions.length - 1) fieldValue += \",\"\r\n })\r\n }\r\n var inputField = {\r\n customFieldDefinitionReference: field.definitionReference,\r\n value: fieldValue,\r\n isCustomField: field.isCustomField,\r\n normalizedName: field.normalizedName,\r\n displayName: field.displayName,\r\n }\r\n request.formFields.push(inputField)\r\n }\r\n })\r\n //#endregion\r\n\r\n //#region save\r\n run(\r\n client(\"SaveInquiryForm\", { data: request }).then((response) => {\r\n handleResponse(response)\r\n })\r\n )\r\n //#endregion\r\n }\r\n //#endregion\r\n\r\n //#region handle response\r\n function handleResponse(response: any) {\r\n if (response.isSuccessful) {\r\n handleAfterSubmit()\r\n } else if (response.code === \"form_validation\") {\r\n // reset recaptcha\r\n grecaptchaObject?.reset()\r\n const errors: any = {}\r\n response.messages.forEach(({ property, description }: any) => {\r\n errors[property] = description\r\n })\r\n setErrors(errors)\r\n }\r\n }\r\n\r\n function handleAfterSubmit() {\r\n if (isEmbeded) {\r\n setSubmitted(true)\r\n } else {\r\n if (\r\n form.submitOption.afterSubmitBehavior.submitBehaviorReference ===\r\n submitBehaviorTypes.completedMessage\r\n ) {\r\n setSubmitted(true)\r\n } else {\r\n window.open(form.submitOption.afterSubmitBehavior.redirectUrl, \"_self\")\r\n }\r\n }\r\n }\r\n //#endregion\r\n\r\n const handleMultiSelect = (e: any) => {\r\n let temp = { ...multiSelectValues }\r\n temp[e.target.id] = e.value\r\n setMultiSelectValues(temp)\r\n }\r\n\r\n //#region return\r\n return (\r\n \r\n \r\n\r\n {submitted === false && (\r\n
\r\n )}\r\n {submitted && (\r\n
\r\n )}\r\n
\r\n )\r\n //#endregion\r\n\r\n //#region get border radius\r\n function getBorderRadius(style: string) {\r\n switch (style) {\r\n case \"Standard\":\r\n return \"5px\"\r\n case \"Rounded\":\r\n return \"20px\"\r\n default:\r\n return \"0\"\r\n }\r\n }\r\n //#endregion\r\n}\r\n\r\n//#region date formats\r\nfunction toUtcDateTimeFormat(date: string) {\r\n if (date == null || date === \"undefined\" || date.length <= 0) {\r\n return \"\"\r\n }\r\n const zonedDate = moment(date, \"D MMM YYYY hh:mm aa\")\r\n return moment.utc(zonedDate).format(\"YYYY-MM-DDTHH:mm:ss[Z]\")\r\n}\r\nfunction toUtcDateFormat(date: string) {\r\n if (date == null || date === \"undefined\" || date.length <= 0) {\r\n return \"\"\r\n }\r\n const zonedDate = moment(date, \"D MMM YYYY\")\r\n return moment(zonedDate).format(\"YYYY-MM-DD\")\r\n}\r\n//#endregion\r\n\r\nexport default InquiryForm\r\n","import { useEffect } from \"react\"\r\nimport { useAsync } from \"../../utils/hooks\"\r\nimport { ThreeDots } from \"react-loader-spinner\"\r\nimport NotFoundScreen from \"../not-found/notFoundScreen\"\r\nimport InquiryForm from \"../inquiry-form/inquiryForm\"\r\nimport { client } from \"../../utils/api-client\"\r\nimport { useParams } from \"react-router-dom\"\r\nimport React from \"react\"\r\n\r\nfunction Inquiry() {\r\n //#region variable declaration\r\n const { isLoading, isError, run, data, isSuccess } = useAsync()\r\n //#endregion\r\n\r\n //#region get url paramaters\r\n const params = useParams()\r\n const inquiryFormReference = params.inquiryFormReference\r\n\r\n let isEmbeded = false\r\n\r\n if (params.embeded === \"true\") isEmbeded = true\r\n //#endregion\r\n\r\n //#region get inquiry form\r\n useEffect(() => {\r\n run(client(`GetInquiryForm?inquiryFormReference=${inquiryFormReference}`, {}))\r\n }, [inquiryFormReference, run])\r\n //#endregion\r\n\r\n //#region return\r\n return (\r\n \r\n
\r\n {isLoading && !isEmbeded && (\r\n
\r\n \r\n
Loading please wait...
\r\n \r\n )}\r\n {isError && (\r\n
\r\n )}\r\n {isSuccess && data !== null &&
}\r\n
\r\n
\r\n )\r\n //#endregion\r\n}\r\n\r\nexport default Inquiry\r\n","import React from \"react\"\r\nimport ReactDOM from \"react-dom/client\"\r\nimport \"./index.css\"\r\n\r\nimport \"./site.css\"\r\nimport { registerLicense } from '@syncfusion/ej2-base';\r\n\r\nimport appConfig from \"../src/config\"\r\nimport { BrowserRouter as Router, Route, Routes } from \"react-router-dom\"\r\nimport NotFoundScreen from \"./components/not-found/notFoundScreen\"\r\nimport Inquiry from \"./components/inquiry/inquiry\"\r\n\r\nregisterLicense(appConfig.syncfusionK)\r\n\r\nconst root = ReactDOM.createRoot(document.getElementById(\"root\"))\r\n\r\nconst App = () => (\r\n \r\n \r\n \r\n } />\r\n } />\r\n \r\n } />\r\n }\r\n />\r\n \r\n \r\n)\r\n\r\nroot.render()\r\n"],"names":["module","exports","reactIs","require","REACT_STATICS","childContextTypes","contextType","contextTypes","defaultProps","displayName","getDefaultProps","getDerivedStateFromError","getDerivedStateFromProps","mixins","propTypes","type","KNOWN_STATICS","name","length","prototype","caller","callee","arguments","arity","MEMO_STATICS","compare","TYPE_STATICS","getStatics","component","isMemo","ForwardRef","render","Memo","defineProperty","Object","getOwnPropertyNames","getOwnPropertySymbols","getOwnPropertyDescriptor","getPrototypeOf","objectPrototype","hoistNonReactStatics","targetComponent","sourceComponent","blacklist","inheritedComponent","keys","concat","targetStatics","sourceStatics","i","key","descriptor","e","b","Symbol","for","c","d","f","g","h","k","l","m","n","p","q","r","t","v","w","x","y","z","a","u","$$typeof","A","AsyncMode","ConcurrentMode","ContextConsumer","ContextProvider","Element","Fragment","Lazy","Portal","Profiler","StrictMode","Suspense","isAsyncMode","isConcurrentMode","isContextConsumer","isContextProvider","isElement","isForwardRef","isFragment","isLazy","isPortal","isProfiler","isStrictMode","isSuspense","isValidElementType","typeOf","hookCallback","some","hooks","apply","setHookCallback","callback","isArray","input","Array","toString","call","isObject","hasOwnProp","hasOwnProperty","isObjectEmpty","obj","isUndefined","isNumber","isDate","Date","map","arr","fn","res","arrLen","push","extend","valueOf","createUTC","format","locale","strict","createLocalOrUTC","utc","defaultParsingFlags","empty","unusedTokens","unusedInput","overflow","charsLeftOver","nullInput","invalidEra","invalidMonth","invalidFormat","userInvalidated","iso","parsedDateParts","era","meridiem","rfc2822","weekdayMismatch","getParsingFlags","_pf","isValid","_isValid","flags","parsedParts","isNowValid","isNaN","_d","getTime","invalidWeekday","_strict","undefined","bigHour","isFrozen","createInvalid","NaN","fun","this","len","momentProperties","updateInProgress","copyConfig","to","from","prop","val","momentPropertiesLen","_isAMomentObject","_i","_f","_l","_tzm","_isUTC","_offset","_locale","Moment","config","updateOffset","isMoment","warn","msg","suppressDeprecationWarnings","console","deprecate","firstTime","deprecationHandler","arg","args","argLen","slice","join","Error","stack","deprecations","deprecateSimple","isFunction","Function","set","_config","_dayOfMonthOrdinalParseLenient","RegExp","_dayOfMonthOrdinalParse","source","_ordinalParse","mergeConfigs","parentConfig","childConfig","Locale","defaultCalendar","sameDay","nextDay","nextWeek","lastDay","lastWeek","sameElse","calendar","mom","now","output","_calendar","zeroFill","number","targetLength","forceSign","absNumber","Math","abs","zerosToFill","pow","max","substr","formattingTokens","localFormattingTokens","formatFunctions","formatTokenFunctions","addFormatToken","token","padded","ordinal","func","localeData","removeFormattingTokens","match","replace","makeFormatFunction","array","formatMoment","expandFormat","invalidDate","replaceLongDateFormatTokens","longDateFormat","lastIndex","test","defaultLongDateFormat","LTS","LT","L","LL","LLL","LLLL","_longDateFormat","formatUpper","toUpperCase","tok","defaultInvalidDate","_invalidDate","defaultOrdinal","defaultDayOfMonthOrdinalParse","_ordinal","defaultRelativeTime","future","past","s","ss","mm","hh","dd","ww","M","MM","yy","relativeTime","withoutSuffix","string","isFuture","_relativeTime","pastFuture","diff","aliases","addUnitAlias","unit","shorthand","lowerCase","toLowerCase","normalizeUnits","units","normalizeObjectUnits","inputObject","normalizedProp","normalizedInput","priorities","addUnitPriority","priority","getPrioritizedUnits","unitsObj","sort","isLeapYear","year","absFloor","ceil","floor","toInt","argumentForCoercion","coercedNumber","value","isFinite","makeGetSet","keepTime","set$1","get","month","date","daysInMonth","stringGet","stringSet","prioritized","prioritizedLen","regexes","match1","match2","match3","match4","match6","match1to2","match3to4","match5to6","match1to3","match1to4","match1to6","matchUnsigned","matchSigned","matchOffset","matchShortOffset","matchTimestamp","matchWord","addRegexToken","regex","strictRegex","isStrict","getParseRegexForToken","unescapeFormat","regexEscape","matched","p1","p2","p3","p4","tokens","addParseToken","tokenLen","addWeekParseToken","_w","addTimeToArrayFromToken","_a","indexOf","YEAR","MONTH","DATE","HOUR","MINUTE","SECOND","MILLISECOND","WEEK","WEEKDAY","mod","modMonth","o","monthsShort","months","monthsShortRegex","monthsRegex","monthsParse","defaultLocaleMonths","split","defaultLocaleMonthsShort","MONTHS_IN_FORMAT","defaultMonthsShortRegex","defaultMonthsRegex","localeMonths","_months","isFormat","localeMonthsShort","_monthsShort","handleStrictParse","monthName","ii","llc","toLocaleLowerCase","_monthsParse","_longMonthsParse","_shortMonthsParse","localeMonthsParse","_monthsParseExact","setMonth","dayOfMonth","min","getSetMonth","getDaysInMonth","computeMonthsParse","_monthsShortStrictRegex","_monthsShortRegex","_monthsStrictRegex","_monthsRegex","cmpLenRev","shortPieces","longPieces","mixedPieces","daysInYear","parseTwoDigitYear","parseInt","getSetYear","getIsLeapYear","createDate","ms","getFullYear","setFullYear","createUTCDate","UTC","getUTCFullYear","setUTCFullYear","firstWeekOffset","dow","doy","fwd","getUTCDay","dayOfYearFromWeeks","week","weekday","resYear","resDayOfYear","dayOfYear","weekOfYear","resWeek","weekOffset","weeksInYear","weekOffsetNext","localeWeek","_week","defaultLocaleWeek","localeFirstDayOfWeek","localeFirstDayOfYear","getSetWeek","add","getSetISOWeek","parseWeekday","weekdaysParse","parseIsoWeekday","shiftWeekdays","ws","weekdaysMin","weekdaysShort","weekdays","weekdaysMinRegex","weekdaysShortRegex","weekdaysRegex","defaultLocaleWeekdays","defaultLocaleWeekdaysShort","defaultLocaleWeekdaysMin","defaultWeekdaysRegex","defaultWeekdaysShortRegex","defaultWeekdaysMinRegex","localeWeekdays","_weekdays","day","localeWeekdaysShort","_weekdaysShort","localeWeekdaysMin","_weekdaysMin","handleStrictParse$1","weekdayName","_weekdaysParse","_shortWeekdaysParse","_minWeekdaysParse","localeWeekdaysParse","_weekdaysParseExact","_fullWeekdaysParse","getSetDayOfWeek","getDay","getSetLocaleDayOfWeek","getSetISODayOfWeek","computeWeekdaysParse","_weekdaysStrictRegex","_weekdaysRegex","_weekdaysShortStrictRegex","_weekdaysShortRegex","_weekdaysMinStrictRegex","_weekdaysMinRegex","minp","shortp","longp","minPieces","hFormat","hours","kFormat","lowercase","minutes","matchMeridiem","_meridiemParse","localeIsPM","charAt","seconds","kInput","_isPm","isPM","_meridiem","pos","pos1","pos2","defaultLocaleMeridiemParse","getSetHour","localeMeridiem","isLower","globalLocale","baseConfig","dayOfMonthOrdinalParse","meridiemParse","locales","localeFamilies","commonPrefix","arr1","arr2","minl","normalizeLocale","chooseLocale","names","j","next","loadLocale","isLocaleNameSane","oldLocale","_abbr","aliasedRequire","getSetGlobalLocale","values","data","getLocale","defineLocale","abbr","parentLocale","forEach","updateLocale","tmpLocale","listLocales","checkOverflow","_overflowDayOfYear","_overflowWeeks","_overflowWeekday","extendedIsoRegex","basicIsoRegex","tzRegex","isoDates","isoTimes","aspNetJsonRegex","obsOffsets","UT","GMT","EDT","EST","CDT","CST","MDT","MST","PDT","PST","configFromISO","allowTime","dateFormat","timeFormat","tzFormat","exec","isoDatesLen","isoTimesLen","configFromStringAndFormat","extractFromRFC2822Strings","yearStr","monthStr","dayStr","hourStr","minuteStr","secondStr","result","untruncateYear","preprocessRFC2822","checkWeekday","weekdayStr","parsedInput","calculateOffset","obsOffset","militaryOffset","numOffset","hm","configFromRFC2822","parsedArray","setUTCMinutes","getUTCMinutes","configFromString","createFromInputFallback","defaults","currentDateArray","nowValue","_useUTC","getUTCMonth","getUTCDate","getMonth","getDate","configFromArray","currentDate","expectedWeekday","yearToUse","dayOfYearFromWeekInfo","_dayOfYear","_nextDay","weekYear","temp","weekdayOverflow","curWeek","GG","W","E","createLocal","gg","ISO_8601","RFC_2822","skipped","stringLength","totalParsedInputLength","meridiemFixWrap","erasConvertYear","hour","isPm","meridiemHour","configFromStringAndArray","tempConfig","bestMoment","scoreToBeat","currentScore","validFormatFound","bestFormatIsValid","configfLen","score","configFromObject","dayOrDate","minute","second","millisecond","createFromConfig","prepareConfig","preparse","configFromInput","isUTC","prototypeMin","other","prototypeMax","pickBy","moments","ordering","isDurationValid","unitHasDecimal","orderLen","parseFloat","isValid$1","createInvalid$1","createDuration","Duration","duration","years","quarters","quarter","weeks","isoWeek","days","milliseconds","_milliseconds","_days","_data","_bubble","isDuration","absRound","round","compareArrays","array1","array2","dontConvert","lengthDiff","diffs","offset","separator","utcOffset","sign","offsetFromString","chunkOffset","matcher","parts","matches","cloneWithOffset","model","clone","setTime","local","getDateOffset","getTimezoneOffset","getSetOffset","keepLocalTime","keepMinutes","localAdjust","_changeInProgress","addSubtract","getSetZone","setOffsetToUTC","setOffsetToLocal","subtract","setOffsetToParsedOffset","tZone","hasAlignedHourOffset","isDaylightSavingTime","isDaylightSavingTimeShifted","_isDSTShifted","toArray","isLocal","isUtcOffset","isUtc","aspNetRegex","isoRegex","ret","diffRes","parseIso","momentsDifference","inp","positiveMomentsDifference","base","isAfter","isBefore","createAdder","direction","period","tmp","isAdding","invalid","isString","String","isMomentInput","isNumberOrStringArray","isMomentInputObject","property","objectTest","propertyTest","properties","propertyLen","arrayTest","dataTypeTest","filter","item","isCalendarSpec","getCalendarFormat","myMoment","calendar$1","time","formats","sod","startOf","calendarFormat","localInput","endOf","isBetween","inclusivity","localFrom","localTo","isSame","inputMs","isSameOrAfter","isSameOrBefore","asFloat","that","zoneDelta","monthDiff","wholeMonthDiff","anchor","toISOString","keepOffset","toDate","inspect","prefix","datetime","suffix","zone","inputString","defaultFormatUtc","defaultFormat","postformat","humanize","fromNow","toNow","newLocaleData","lang","MS_PER_SECOND","MS_PER_MINUTE","MS_PER_HOUR","MS_PER_400_YEARS","mod$1","dividend","divisor","localStartOfDate","utcStartOfDate","startOfDate","isoWeekday","unix","toObject","toJSON","isValid$2","parsingFlags","invalidAt","creationData","localeEras","eras","_eras","since","until","localeErasParse","eraName","narrow","localeErasConvertYear","dir","getEraName","getEraNarrow","getEraAbbr","getEraYear","erasNameRegex","computeErasParse","_erasNameRegex","_erasRegex","erasAbbrRegex","_erasAbbrRegex","erasNarrowRegex","_erasNarrowRegex","matchEraAbbr","matchEraName","matchEraNarrow","matchEraYearOrdinal","_eraYearOrdinalRegex","abbrPieces","namePieces","narrowPieces","addWeekYearFormatToken","getter","getSetWeekYear","getSetWeekYearHelper","getSetISOWeekYear","getISOWeeksInYear","getISOWeeksInISOWeekYear","isoWeekYear","getWeeksInYear","weekInfo","getWeeksInWeekYear","weeksTarget","setWeekAll","dayOfYearData","getSetQuarter","erasParse","eraYearOrdinalParse","getSetDayOfMonth","getSetDayOfYear","getSetMinute","getSetMillisecond","getSetSecond","parseMs","getZoneAbbr","getZoneName","proto","createUnix","createInZone","parseZone","preParsePostFormat","eraNarrow","eraAbbr","eraYear","isoWeeks","weeksInWeekYear","isoWeeksInYear","isoWeeksInISOWeekYear","isDST","zoneAbbr","zoneName","dates","isDSTShifted","proto$1","get$1","index","field","setter","listMonthsImpl","out","listWeekdaysImpl","localeSorted","shift","listMonths","listMonthsShort","listWeekdays","listWeekdaysShort","listWeekdaysMin","firstDayOfYear","firstDayOfWeek","langData","mathAbs","addSubtract$1","add$1","subtract$1","absCeil","bubble","monthsFromDays","monthsToDays","daysToMonths","as","valueOf$1","makeAs","alias","asMilliseconds","asSeconds","asMinutes","asHours","asDays","asWeeks","asMonths","asQuarters","asYears","clone$1","get$2","makeGetter","thresholds","substituteTimeAgo","relativeTime$1","posNegDuration","getSetRelativeTimeRounding","roundingFunction","getSetRelativeTimeThreshold","threshold","limit","argWithSuffix","argThresholds","withSuffix","th","assign","abs$1","toISOString$1","totalSign","ymSign","daysSign","hmsSign","total","toFixed","proto$2","toIsoString","version","relativeTimeRounding","relativeTimeThreshold","HTML5_FMT","DATETIME_LOCAL","DATETIME_LOCAL_SECONDS","DATETIME_LOCAL_MS","TIME","TIME_SECONDS","TIME_MS","factory","ReactPropTypesSecret","emptyFunction","emptyFunctionWithReset","resetWarningCache","shim","props","propName","componentName","location","propFullName","secret","err","getShim","isRequired","ReactPropTypes","bigint","bool","object","symbol","any","arrayOf","element","elementType","instanceOf","node","objectOf","oneOf","oneOfType","shape","exact","checkPropTypes","PropTypes","aa","ba","encodeURIComponent","ca","Set","da","ea","fa","ha","window","document","createElement","ia","ja","ka","la","acceptsBooleans","attributeName","attributeNamespace","mustUseProperty","propertyName","sanitizeURL","removeEmptyString","pa","qa","ra","na","oa","ma","removeAttribute","setAttribute","setAttributeNS","xlinkHref","sa","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","ta","ua","va","wa","xa","ya","Aa","Ba","Ca","Da","Ea","Fa","Ga","Ha","iterator","Ia","Ja","Ka","trim","La","Ma","prepareStackTrace","Reflect","construct","includes","Na","tag","Oa","_context","_payload","_init","Pa","Qa","Ra","nodeName","Ta","_valueTracker","constructor","configurable","enumerable","getValue","setValue","stopTracking","Sa","Ua","checked","Va","activeElement","body","Wa","defaultChecked","defaultValue","_wrapperState","initialChecked","Xa","initialValue","controlled","Ya","Za","$a","ab","ownerDocument","bb","cb","options","selected","defaultSelected","disabled","db","dangerouslySetInnerHTML","children","eb","fb","gb","textContent","hb","ib","jb","kb","namespaceURI","innerHTML","firstChild","removeChild","appendChild","MSApp","execUnsafeLocalFunction","lb","lastChild","nodeType","nodeValue","mb","animationIterationCount","aspectRatio","borderImageOutset","borderImageSlice","borderImageWidth","boxFlex","boxFlexGroup","boxOrdinalGroup","columnCount","columns","flex","flexGrow","flexPositive","flexShrink","flexNegative","flexOrder","gridArea","gridRow","gridRowEnd","gridRowSpan","gridRowStart","gridColumn","gridColumnEnd","gridColumnSpan","gridColumnStart","fontWeight","lineClamp","lineHeight","opacity","order","orphans","tabSize","widows","zIndex","zoom","fillOpacity","floodOpacity","stopOpacity","strokeDasharray","strokeDashoffset","strokeMiterlimit","strokeOpacity","strokeWidth","nb","ob","pb","style","setProperty","substring","qb","menuitem","area","br","col","embed","hr","img","keygen","link","meta","param","track","wbr","rb","sb","is","tb","ub","target","srcElement","correspondingUseElement","parentNode","vb","wb","xb","yb","zb","stateNode","Ab","Bb","Cb","Db","Eb","Fb","Gb","Hb","Ib","Jb","addEventListener","removeEventListener","Kb","onError","Lb","Mb","Nb","Ob","Pb","Qb","Sb","alternate","return","Tb","memoizedState","dehydrated","Ub","Wb","child","sibling","current","Vb","Xb","Yb","unstable_scheduleCallback","Zb","unstable_cancelCallback","$b","unstable_shouldYield","ac","unstable_requestPaint","D","unstable_now","bc","unstable_getCurrentPriorityLevel","cc","unstable_ImmediatePriority","dc","unstable_UserBlockingPriority","ec","unstable_NormalPriority","fc","unstable_LowPriority","gc","unstable_IdlePriority","hc","ic","lc","clz32","mc","nc","log","LN2","oc","pc","qc","rc","pendingLanes","suspendedLanes","pingedLanes","entangledLanes","entanglements","sc","uc","vc","wc","eventTimes","yc","zc","Ac","Bc","Cc","Dc","Ec","Fc","Gc","Hc","Ic","Jc","Kc","Map","Lc","Mc","Nc","Oc","delete","pointerId","Pc","nativeEvent","blockedOn","domEventName","eventSystemFlags","targetContainers","Rc","Sc","isDehydrated","containerInfo","Tc","Uc","dispatchEvent","Vc","Wc","Xc","Yc","Zc","ReactCurrentBatchConfig","$c","transition","ad","bd","cd","Qc","stopPropagation","ed","fd","gd","hd","id","jd","keyCode","charCode","kd","ld","md","_reactName","_targetInst","currentTarget","isDefaultPrevented","defaultPrevented","returnValue","isPropagationStopped","preventDefault","cancelBubble","persist","isPersistent","rd","sd","td","nd","eventPhase","bubbles","cancelable","timeStamp","isTrusted","od","pd","view","detail","qd","vd","screenX","screenY","clientX","clientY","pageX","pageY","ctrlKey","shiftKey","altKey","metaKey","getModifierState","ud","button","buttons","relatedTarget","fromElement","toElement","movementX","movementY","wd","yd","dataTransfer","Ad","Cd","animationName","elapsedTime","pseudoElement","Dd","clipboardData","Ed","Gd","Hd","Esc","Spacebar","Left","Up","Right","Down","Del","Win","Menu","Apps","Scroll","MozPrintableKey","Id","Jd","Alt","Control","Meta","Shift","Kd","Ld","fromCharCode","code","repeat","which","Md","Od","width","height","pressure","tangentialPressure","tiltX","tiltY","twist","pointerType","isPrimary","Qd","touches","targetTouches","changedTouches","Sd","Td","deltaX","wheelDeltaX","deltaY","wheelDeltaY","wheelDelta","deltaZ","deltaMode","Ud","Vd","Wd","Xd","documentMode","Yd","Zd","$d","ae","be","ce","de","ge","color","email","password","range","search","tel","text","url","he","ie","je","event","listeners","ke","le","me","ne","oe","pe","qe","re","se","te","ue","oninput","ve","detachEvent","we","xe","attachEvent","ye","ze","Ae","Ce","De","Ee","Fe","nextSibling","Ge","contains","compareDocumentPosition","He","HTMLIFrameElement","contentWindow","href","Ie","contentEditable","Je","focusedElem","selectionRange","documentElement","start","end","selectionStart","selectionEnd","defaultView","getSelection","rangeCount","anchorNode","anchorOffset","focusNode","focusOffset","createRange","setStart","removeAllRanges","addRange","setEnd","left","scrollLeft","top","scrollTop","focus","Ke","Le","Me","Ne","Oe","Pe","Qe","Re","animationend","animationiteration","animationstart","transitionend","Se","Te","Ue","animation","Ve","We","Xe","Ye","Ze","$e","af","bf","cf","ff","gf","hf","Rb","instance","listener","F","jf","has","kf","lf","mf","random","nf","bind","capture","passive","C","B","of","pf","parentWindow","qf","rf","O","T","za","ee","char","fe","unshift","sf","tf","uf","vf","wf","xf","yf","__html","zf","setTimeout","Af","clearTimeout","Bf","Promise","Df","queueMicrotask","resolve","then","catch","Cf","Ef","Ff","Gf","previousSibling","Hf","If","Jf","Kf","Lf","Mf","Nf","Of","G","H","Pf","I","Qf","Rf","Sf","__reactInternalMemoizedUnmaskedChildContext","__reactInternalMemoizedMaskedChildContext","Tf","Uf","Vf","Wf","getChildContext","Xf","__reactInternalMemoizedMergedChildContext","Yf","Zf","$f","ag","bg","dg","eg","fg","hg","ig","jg","kg","lg","_currentValue","mg","childLanes","ng","dependencies","firstContext","lanes","og","pg","context","memoizedValue","qg","rg","sg","updateQueue","baseState","firstBaseUpdate","lastBaseUpdate","shared","pending","interleaved","effects","tg","ug","eventTime","lane","payload","vg","J","mode","K","wg","xg","yg","zg","Ag","Bg","Component","refs","Cg","Fg","isMounted","_reactInternals","enqueueSetState","Dg","Eg","enqueueReplaceState","enqueueForceUpdate","Gg","shouldComponentUpdate","isPureReactComponent","Hg","state","updater","Ig","componentWillReceiveProps","UNSAFE_componentWillReceiveProps","Jg","getSnapshotBeforeUpdate","UNSAFE_componentWillMount","componentWillMount","componentDidMount","Kg","Lg","Mg","Ng","Og","Pg","Qg","Rg","Sg","Tg","Ug","Vg","Wg","Xg","Yg","N","Zg","$g","ah","deletions","bh","pendingProps","treeContext","retryLane","ch","dh","eh","fh","memoizedProps","gh","ih","ref","_owner","_stringRef","jh","kh","lh","mh","nh","oh","implementation","ph","qh","done","rh","sh","uh","vh","wh","xh","yh","tagName","zh","Ah","Bh","P","Ch","revealOrder","Dh","Eh","_workInProgressVersionPrimary","Fh","ReactCurrentDispatcher","Gh","Hh","Q","R","S","Ih","Jh","Kh","Lh","U","Mh","Nh","Oh","Ph","Qh","Rh","Sh","Th","baseQueue","queue","Uh","Vh","Wh","lastRenderedReducer","action","hasEagerState","eagerState","lastRenderedState","dispatch","Xh","Yh","Zh","$h","ai","getSnapshot","bi","ci","di","lastEffect","stores","ei","fi","gi","create","destroy","deps","hi","ji","ki","li","mi","ni","oi","pi","qi","ri","si","ti","ui","vi","wi","xi","yi","readContext","useCallback","useContext","useEffect","useImperativeHandle","useInsertionEffect","useLayoutEffect","useMemo","useReducer","useRef","useState","useDebugValue","useDeferredValue","useTransition","useMutableSource","useSyncExternalStore","useId","unstable_isNewReconciler","identifierPrefix","zi","message","Ai","error","Li","Ni","Oi","Bi","WeakMap","Ci","Di","Ei","Fi","componentDidCatch","Gi","componentStack","Hi","pingCache","Ii","Ji","Ki","Pi","tailMode","tail","V","subtreeFlags","Qi","pendingContext","Ri","wasMultiple","multiple","onClick","onclick","size","createElementNS","autoFocus","createTextNode","Si","rendering","Ti","renderingStartTime","isBackwards","last","Ui","Vi","Wi","ReactCurrentOwner","Xi","Yi","Zi","$i","aj","bj","cj","dj","baseLanes","cachePool","ej","fj","gj","UNSAFE_componentWillUpdate","componentWillUpdate","componentDidUpdate","hj","ij","jj","kj","lj","mj","fallback","nj","oj","pj","qj","_reactRetry","rj","sj","tj","uj","vj","xj","yj","zj","Aj","WeakSet","X","Bj","Cj","Dj","Ej","Gj","Hj","Ij","Jj","onCommitFiberUnmount","componentWillUnmount","Kj","Lj","Mj","Nj","Oj","Pj","Qj","insertBefore","_reactRootContainer","Rj","Sj","Tj","Xj","Yj","Zj","ak","__reactInternalSnapshotBeforeUpdate","src","Wj","Lk","bk","ck","dk","ek","Y","Z","fk","gk","hk","ik","jk","Vj","Infinity","kk","lk","mk","nk","ok","pk","qk","rk","sk","tk","callbackNode","expirationTimes","expiredLanes","tc","callbackPriority","cg","uk","vk","wk","xk","yk","zk","Ak","Bk","Ck","Dk","Ek","finishedWork","finishedLanes","Fk","timeoutHandle","Gk","Hk","Ik","Jk","Kk","mutableReadLanes","xc","Fj","display","Uj","onCommitFiberRoot","jc","onRecoverableError","Mk","onPostCommitFiberRoot","Nk","Ok","Qk","isReactComponent","pendingChildren","Rk","mutableSourceEagerHydrationData","Sk","cache","transitions","Tk","Uk","Vk","Wk","Xk","Yk","Zk","wj","Pk","al","reportError","bl","_internalRoot","cl","dl","el","fl","hl","gl","unmount","unstable_scheduleHydration","splice","querySelectorAll","JSON","stringify","form","il","usingClientEntryPoint","Events","jl","findFiberByHostInstance","bundleType","rendererPackageName","kl","rendererConfig","overrideHookState","overrideHookStateDeletePath","overrideHookStateRenamePath","overrideProps","overridePropsDeletePath","overridePropsRenamePath","setErrorHandler","setSuspenseHandler","scheduleUpdate","currentDispatcherRef","findHostInstanceByFiber","findHostInstancesForRefresh","scheduleRefresh","scheduleRoot","setRefreshHandler","getCurrentFiber","reconcilerVersion","__REACT_DEVTOOLS_GLOBAL_HOOK__","ll","isDisabled","supportsFiber","inject","createPortal","createRoot","unstable_strictMode","findDOMNode","flushSync","hydrate","hydrateRoot","hydratedSources","_getVersion","_source","unmountComponentAtNode","unstable_batchedUpdates","unstable_renderSubtreeIntoContainer","checkDCE","__self","__source","jsx","jsxs","setState","forceUpdate","escape","_status","_result","default","Children","count","only","PureComponent","cloneElement","createContext","_currentValue2","_threadCount","Provider","Consumer","_defaultValue","_globalName","createFactory","createRef","forwardRef","isValidElement","lazy","memo","startTransition","unstable_act","runtime","Op","hasOwn","$Symbol","iteratorSymbol","asyncIteratorSymbol","asyncIterator","toStringTagSymbol","toStringTag","define","writable","wrap","innerFn","outerFn","self","tryLocsList","protoGenerator","Generator","generator","Context","_invoke","GenStateSuspendedStart","method","GenStateExecuting","GenStateCompleted","doneResult","delegate","delegateResult","maybeInvokeDelegate","ContinueSentinel","sent","_sent","dispatchException","abrupt","record","tryCatch","GenStateSuspendedYield","makeInvokeMethod","GeneratorFunction","GeneratorFunctionPrototype","IteratorPrototype","getProto","NativeIteratorPrototype","Gp","defineIteratorMethods","AsyncIterator","PromiseImpl","invoke","reject","__await","unwrapped","previousPromise","callInvokeWithMethodAndArg","TypeError","info","resultName","nextLoc","pushTryEntry","locs","entry","tryLoc","catchLoc","finallyLoc","afterLoc","tryEntries","resetTryEntry","completion","reset","iterable","iteratorMethod","isGeneratorFunction","genFun","ctor","mark","setPrototypeOf","__proto__","awrap","async","iter","reverse","pop","skipTempReset","prev","stop","rootRecord","rval","exception","handle","loc","caught","hasCatch","hasFinally","finallyEntry","complete","finish","thrown","delegateYield","regeneratorRuntime","accidentalStrictMode","globalThis","sortIndex","performance","setImmediate","startTime","expirationTime","priorityLevel","navigator","scheduling","isInputPending","MessageChannel","port2","port1","onmessage","postMessage","unstable_Profiling","unstable_continueExecution","unstable_forceFrameRate","unstable_getFirstCallbackNode","unstable_next","unstable_pauseExecution","unstable_runWithPriority","delay","unstable_wrapCallback","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","loaded","__webpack_modules__","__esModule","definition","nmd","paths","uid","isBlazorPlatform","createInstance","classFunction","params","arrayParam","nameSpace","splits","fromObj","isNullOrUndefined","deleteObject","containerObject","merge","destination","temrObj","tempProp","keys_1","copied","first","deep","_loop_1","arguments_1","obj1","copy","isArrayChanged","blazorEventExtend","isBlazor","Event","getUniqueID","definedName","compareElementParent","parent","throwError","formatUnit","HijriParser","defaultNumberingSystem","defaultNumberSymbols","latnNumberSystem","ParserBase","getMainObject","cName","getNumberingSystem","numberingSystems","reverseObject","propKeys_1","getSymbolRegex","regexStr","str","getSymbolMatch","matchKeys_1","constructRegex","convertValueParts","getDefaultNumberingSystem","nSystem","getCurrentNumericOptions","curObj","numberSystem","needSymbols","blazorMode","cur","digits","numericPair","numberParseRegex","numericRegex","symbolNumberSystem","symbolMatch","getNumberMapper","mapper","numberSymbols","timeSeparator","latnNumberSystem_1","nPair","nRegex","blazorCurrencyData","dateCorrection","getHijriDate","gDate","tMonth","tYear","yPrefix","julilanOffset","julianNumber","tempMonth","modifiedJulianDate","iyear","cyc","iy","im","tempDay","iln","hYear","hmonth","hDate","toGregorian","julianDate","gDay","gMonth","gYear","abbreviateRegexGlobal","standalone","weekdayKey","timeSetter","datePartMatcher","DateFormat","culture","option","cldr","_this","dependable","numObject","dateObject","formatOptions","isIslamic","isServerRendered","resPattern","skeleton","dateSeperator","pattern","numMapper","parser","parserObject","patternMatch_1","designator","eText","timeZone","intDateFormatter","dObject","getCurrentDateValue","matches_1","length_1","curval","curvalstr","processNumber","curstr","curlength","desig","getHours","dec","retu","timezone","pattern_1","hourFormat","gmtZeroFormat","getTimeZoneValue","gmtFormat","checkTwodigitNumber","tVal","curPattern","no","ishour","errorText","NumberFormat","numberFormatter","symbolPattern","fOptions","cOptions","dOptions","numericObject","numberMapper","currencySymbol","currency","defaultCurrencyCode","altSymbol","percentSymbol","minusSymbol","symbols","isCurrency","isPercent","isAccount","groupOne","checkValueRange","maximumSignificantDigits","minimumSignificantDigits","maximumFractionDigits","minimumFractionDigits","fractionDigits","useGrouping","nData","pData","groupSeparator","groupData","getGroupingDetails","minimumFraction","mval","maximumFraction","mfrac","lfrac","intNumberFormatter","lastIndexOf","primary","secondary","val1","val2","checkbothExist","isFraction","decide","dint","str1","str2","checkRange","curData","zeroData","fValue","processSignificantDigits","processFraction","minimumIntegerDigits","processMinimumIntegers","toExponential","groupNumbers","nlead","nend","toPrecision","level1","sep","decimalSymbol","level2","flag","lead","latnRegex","DateParser","dateParser","numOptions","parseOptions","hourOnly","regexString","evalposition","patternMatch","gmtCorrection","zCorrectTemp","isgmtTraversed","nRegx","numbers","canUpdate","charKey","optional","weekData","weekObject","monthData","hour12","periodValur","tzone","hpattern","parseTimeZoneRegx","parserRegex","internalDateParse","dobj","tDate","ystrig","is2DigitYear","getDateObject","setMilliseconds","tKeys_1","tValue","setDate","pDate","lDate","setHours","tzValue","setMinutes","getMinutes","num","retOptions","props_1","curObject","matchString","internalNumberParser","tmatch","getZoneValue","splitStr","cRegex","ival","parseRegex","groupRegex","NumberParser","numberParser","custom","symbolpattern","symbolRegex","infinity","getParsedNumber","isNegative","tempValue","exponent","convertMaxFracDigits","decimalSplitValue","Observer","ranArray","boundedEvents","on","handler","cntxt","notExist","isHandlerPresent","off","indexLocation","notify","argument","successHandler","errorHandler","blazorCallback","curObject_1","objs","isTrigger","obj_1","promise","isJson","parse","dateReviver","boundedEvents_1","onIntlChange","rightToLeft","cldrData","defaultCulture","Internationalization","cultureName","getDateFormat","getCulture","getNumberFormat","getDateParser","getNumberParser","formatNumber","formatDate","parseDate","parseNumber","getDatePattern","isExcelFormat","IntlBase","getNumberPattern","isExcel","getFirstDayOfWeek","getNumericObject","numSystem","symbPattern","getDefaultDateObject","blazorCultureFormats","negativeDataRegex","customRegex","latnParseRegex","fractionRegex","defaultCurrency","patternRegex","dateConverterMapper","islamicRegex","firstDayMapper","formatRegex","currencyFormatRegex","curWithoutNumberRegex","typeMapper","getResultantPattern","blazorCulture","iType","compareBlazorDateFormats","basicPatterns","dPattern","tPattern","getDependables","calendartype","blazorDefaultObject","defaultObject","dateString","getSymbolPattern","ConvertDateToWeekFormat","convertMapper","tempString","curFormatMapper","getProperNumericSkeleton","patternMatcher","getFormatData","needFraction","cSymbol","fractionOnly","changeCurrencySymbol","groupPattern","fraction","fmatch","sym","getCurrencySymbol","currencyCode","customNumberFormat","integerPart","spaceCapture","spaceGrouping","fractionPart","isCurrencyPercent","actual","part","fractionDigitsPattern","minDigits","maxDigits","minimumIntegerPattern","integer","groupingPattern","dateParseRegex","monthIndex","customFormat","formatSplit","getDateSeparator","dateObj","getActualDateTimeFormat","actualPattern","tLength","timeZonePattern","options_1","getActualNumberFormat","minFrac","numrericObject","curMatch","curCode","hasNegativePattern","cPattern","processSymbol","getWeekData","firstDay","iCulture","replaceBlazorCurrency","aCurrency","rCurrency","iCurrency","pData_1","getWeekOfYear","weeknum","newYear","daynum","nday","headerRegex","Ajax","contentType","emitError","send","eventArgs","cancel","httpRequest","XMLHttpRequest","onreadystatechange","stateChange","onLoad","onload","onProgress","onprogress","onAbort","onabort","onerror","onUploadProgress","upload","open","setRequestHeader","beforeSend","onSuccess","failureHandler","reason","onFailure","responseText","dataType","readyState","status","statusText","getResponseHeader","responseHeaders","header","headers","getAllResponseHeaders","REGX_MOBILE","REGX_IE","REGX_IE11","REGX_IOS","REGX_IOS7","REGX_ANDROID","REGX_WINDOWS","REGX_VERSION","REGX_BROWSER","OPERA","EDGE","CHROME","PANTHOMEJS","SAFARI","WEBKIT","MSIE","MOZILLA","browserDetails","Browser","extractBrowserDetail","browserInfo","clientInfo","userAgent","language","getEvent","events","isPointer","isTouch","isDevice","move","getTouchStartEvent","getTouchEndEvent","getTouchMoveEvent","getTouchCancelEvent","regX","platform","maxTouchPoints","uA","isMSPointer","isWebView","cordova","PhoneGap","phonegap","forge","touchStartEvent","touchMoveEvent","touchEndEvent","touchCancelEvent","EventHandler","addOrGetEventData","__eventList","eventName","bindTo","intDebounce","debounceListener","eventData","eventFunction","later","debounce","isIE","remove","clearEvents","copyData","trigger","eventProp","eventData_1","event_1","SVG_REG","className","styles","attrs","attributes","addClass","elements","classes","classList","getClassList","ele","_b","classList_1","curClass","removeClass","classList_2","classArr","isVisible","visibility","offsetWidth","prepend","fromElements","isEval","docFrag","createDocumentFragment","firstElementChild","executeScript","append","script","head","detach","iKey","select","selector","needsVDOM","querySelectId","querySelector","selectAll","charRegex","idList","list","splitId","setId","closest","setStyleAttribute","addClasses","removeClasses","msMatchesSelector","webkitMatchesSelector","isColEName","Base","isRendered","isComplexArraySetter","allowServerDataBinding","isProtectedOnChange","changedProperties","oldProperties","bulkChanges","refreshing","ignoreCollectionWatch","finalUpdate","childChangedProperties","modelObserver","addInstance","setProperties","isDestroyed","muteOnChange","prevDetection","dataBind","serverDataBind","callChildDataBind","clearChanges","newChanges","oldChanges","onPropertyChanged","updateModel","saveChanges","newValue","oldValue","unbind","Uint16Array","msCrypto","crypto","getRandomValues","combineArray","messageHandler","moduleClass","getModuleName","ej2_instances","getObject","curKey","propertyGetter","propertySetter","oldVal","complexGetter","complexSetter","Property","propertyDescriptor","addPropertyCollection","Complex","eventDescriptor","finalContext","getParentContext","NotifyPropertyChanges","classConstructor","propertyType","propList","complexProps","colProps","propNames","complexPropNames","colPropNames","eventNames","curText","__extends","extendStatics","__","__decorate","decorators","desc","decorate","Animation","_super","easing","ease","linear","easeIn","easeOut","easeInOut","elasticInOut","elasticIn","elasticOut","Animation_1","animate","getModel","elements_1","element_1","delayAnimation","animationId","getAttribute","frameId","cancelAnimationFrame","applyAnimation","step","timerId","prevTimeStamp","startAnimation","begin","avg","timingFunction","progress","requestAnimationFrame","fail","newProp","oldProp","rippleEffect","rippleOptions","rippleModel","ignore","rippleFlag","isCenterRipple","getRippleModel","isRippleEnabled","rippleHandler","rippleUpHandler","rippleLeaveHandler","getBoundingClientRect","offsetX","offsetY","right","bottom","radius","sqrt","diameter","rippleElement","getComputedStyle","getPropertyValue","transform","removeRipple","rippleElements","getElementsByClassName","ModuleLoader","loadedModules","requiredModules","moduleList","reqLength","clearUnusedModule","modl","moduleList_1","modName","member","isModuleLoaded","moduleObject","memberName","getMemberName","isProperty","loadedModule","clean","modules","usedModules","removableModule_1","ChildProperty","parentObj","controlParent","isParentArray","updateChange","updateTimeOut","changeTime_1","curIndex","restrictServerDataBind","isSaveChanges","parent_1","parentKey","getParentKey","complexKeys","isFinal","valueLength","bypassKey","LicenseValidator","isValidated","errors","noLicense","trailExpired","versionMismatched","platformMismatched","invalidKey","manager","licKey","setKey","getKey","validate","convertToChar","validateMsg","getInfoFromKey","result_1","invalidPlatform","expiryDate","expDate","currDate","errorDiv","getDecryptedData","atob","licKeySplit","pkey","decryptedStr","resultArray","licKeySplit_1","lKey","decodeStr","buffr","charCodeAt","licenseValidator","cArr","cArr_1","registerLicense","lastPageID","componentCount","lastHistoryLen","versionBasedStatePersistence","randomId","uniqueID","isStringTemplate","needsID","isReactHybrid","enableRtl","moduleLoader","localObserver","detectFunction","appendTo","enablePersistence","setPersistData","refresh","preRender","injectModules","accessMount","mount","getRootElement","actualElement","getLocalData","eleId","localStorage","getItem","ej2StatePersistenceVersion","mergePersistData","inst","renderComplete","wrapperElement","event_2","getInjectedModules","injectedModules","Inject","isVDOM","triggerStateChange","currentContext","calls","setItem","getPersistData","renderReactTemplates","clearTemplate","templateName","isHistoryChanged","pageID","history","hash","addOnPersist","persistObj","objValue","getActualProperties","ignoreOnPersist","iterateJsonProperties","ignoreList","newObj","newList","this_1","defaultPosition","isDraggedObject","isDragged","Position","Draggable","dragLimit","Draggable_1","getDefaultPosition","borderWidth","padding","diffX","prevLeft","prevTop","dragProcessStarted","eleTop","tapHoldTimer","externalInitialize","diffY","parentScrollX","parentScrollY","droppables","toggleEvents","scope","isUnWire","enableTapHold","mobileInitialize","initialize","evt","removeTapholdTimer","tapHoldThreshold","getScrollableParent","axis","tempScrollHeight","scrollHeight","tempScrollWidth","scrollWidth","getScrollableValues","curTarget","currentStateTarget","isDragStarted","abort","abortSelectors","intCoord","getCoordinates","initialPosition","relativeXPosition","relativeYPosition","intDragStart","intDestroy","isPreventSelect","isChangeTouch","intCordinate","styleProp","margin","marginLeft","marginTop","marginRight","marginBottom","dragTarget","intClosest","isReplaceDragEle","currentStateCheck","calculateParentPosition","position","getMousePosition","isDragScroll","distance","getHelperElement","dragTargetElement","helperElement","parentClientRect","offsetParent","dragStart","getProperTargetElement","bindEvents","bindDragEvents","dragElement","dragArea","setDragArea","enableTailMode","enableScrollHandler","posValue","getProcessedPositionValue","dragElePosition","getDragPosition","intDrag","intDragStop","setGlobalDroppables","elementInViewport","offsetTop","offsetLeft","offsetHeight","pageYOffset","pageXOffset","innerHeight","innerWidth","queryPositionInfo","rect","docHeight","getDocumentWidthHeight","docWidth","drag","eleObj","checkTargetElement","hoverObject","triggerOutFunction","dragData","intOver","helper","tLeft","tTop","pagex","pagey","dLeft","dTop","skipDistanceCheck","helperWidth","helperHeight","draEleTop","draEleLeft","iTop","iLeft","tempDraEleTop","dragValue","enableAutoScroll","scrollIntoView","intOut","docBody","docEle","dragStop","dragStopCalled","intDrop","change","eleWidthBound","eleHeightBound","elementArea","tborder","tpadding","lowerKey","prevStyle","pointerEvents","elementFromPoint","oldEle","isdragscroll","dragEle","isOffsetParent","cursorAt","sender","draggable","draggedElement","dropIns","getDropInstance","parentElement","drop","eleInst","eleInst_1","Droppable","mouseOver","wireEvents","accept","isDrag","isDropArea","canDrop","droppedElement","coord","KeyboardEvents","keyPressHandler","isAltKey","isCtrlKey","isShiftKey","curkeyCode","keyConfigs","configCollection_1","rconfig","rKeyObj","KeyboardEvents_1","getKeyConfigData","keyAction","unwireEvents","configCache","keyData","Number","getKeyCode","keyVal","L10n","controlName","localeStrings","setLocale","intLocale","intGetControlConstant","currentLocale","load","localeObject","getConstant","SwipeSettings","swipeRegex","LINES","Touch","touchAction","tapCount","startEvent","point","updateChangeTouches","isTouchMoved","movedDirection","startPoint","lastMovedPoint","startEventData","hScrollLocked","vScrollLocked","tStampStart","timeOutTapHold","tapHoldEvent","moveEvent","endEvent","cancelEvent","movedPoint","eScrollArgs","calcScrollPoints","startEvents","originalEvent","startX","startY","distanceX","distanceY","scrollDirection","velocity","getVelocity","timeOutTap","swipeFn","tap","tapThreshold","modeclear","endPoint","calcPoints","swipeArgs","swipeDirection","eSwipeArgs","tDistance","swipeSettings","swipeThresholdDistance","defaultArgs","canTrigger","scrollBool","isScrollable","moved","checkSwipe","modeClear","lastTapTime","eleStyle","overflowX","overflowY","eTapArgs","pnt","newX","newY","newT","xDist","yDist","interval","QUOTES","IF_STMT","ELSEIF_STMT","ELSE_STMT","FOR_STMT","IF_OR_FOR","CALL_FUNCTION","NOT_NUMBER","WORD","DBL_QUOTED_STR","WORDIF","exp","ARR_OBJ","SINGLE_SLASH","DOUBLE_SLASH","WORDFUNC","WINDOWFUNC","compile","template","ignorePrefix","argName","evalExpResult","varCOunt","localKeys","isClass","singleSpace","cnt","matchStr","SPECIAL_CHAR","rlStr","addNameSpace","strs","HandleSpecialCharArrObj","rlStr_1","mtc","fnStr","fNameSpace","ftArray","splRegexp","arrObj","SlashReplace","NameSpaceForspecialChar","evalExp","addNS","tempStr","nameSpaceNew","quotes","NameSpaceArrObj","HAS_ROW","HAS_SVG","blazorTemplates","templateString","compiler","engineObj","templateId","root","blazorTemplateId","blazorId","childNodes","Engine","removeTags","removeAttrs","attribute","jsEvents","SanitizeHtmlHelper","beforeSanitize","selectors","tags","sanitize","serializeValue","wrapElement","removeXssTags","removeJsEvents","removeXssAttrs","tempEleValue","removeElement","nodes","localName","attr","hasAttribute","syncfusionK","_arrayLikeToArray","_s","_e","_arr","_n","minLen","NavigationContext","React","LocationContext","RouteContext","outlet","invariant","cond","matchRoutes","routes","locationArg","basename","pathname","stripBasename","parsePath","branches","flattenRoutes","siblings","every","compareIndexes","routesMeta","childrenIndex","rankRouteBranches","matchRouteBranch","parentsMeta","parentPath","route","relativePath","path","caseSensitive","startsWith","joinPaths","computeScore","paramRe","isSplat","segments","initialScore","reduce","segment","branch","matchedParams","matchedPathname","remainingPathname","matchPath","pathnameBase","normalizePathname","paramNames","regexpSource","_","paramName","endsWith","compilePath","captureGroups","splatValue","decodeURIComponent","safelyDecodeURIComponent","nextChar","useInRouterContext","useLocation","_renderMatches","parentMatches","reduceRight","React.createElement","Route","_props","Router","basenameProp","locationProp","navigationType","NavigationType","static","staticProp","navigationContext","trailingPathname","Routes","routeMatch","parentParams","parentPathnameBase","locationFromContext","parsedLocationArg","_parsedLocationArg$pa","useRoutes","createRoutesFromChildren","BrowserRouter","historyRef","createBrowserHistory","listen","title","isEmbeded","viewBox","fill","fillRule","stroke","strokeLinecap","strokeLinejoin","_defineProperty","ownKeys","enumerableOnly","_objectSpread2","getOwnPropertyDescriptors","defineProperties","defaultInitialState","useAsync","initialState","initialStateRef","safeSetState","mounted","useSafeDispatch","setData","setError","run","isIdle","isLoading","isError","isSuccess","__assign","getDefaultStyle","visible","getViewBoxSize","secondaryStrokeWidth","maxStrokeWidth","startingPoint","endpoint","_c","secondaryColor","ariaLabel","wrapperStyle","wrapperClass","_g","_h","strokeWidthSecondary","xmlns","cx","cy","dur","repeatCount","calcMode","wrapperInitialize","WRAPPER","role","ejInstance","rippleMouseHandler","rippleSpan","createEvent","initEvent","CHECK","DISABLED","FRAME","INDETERMINATE","LABEL","RIPPLE","RIPPLECHECK","RIPPLEINDETERMINATE","RTL","containerAttr","CheckBox","isFocused","isMouseClick","clickTriggered","changeState","ariaState","frameSpan","getWrapper","indeterminate","clickHandler","focusOutHandler","changeEventArgs","updateVueArrayModel","wrapper","unWireEvents","focusHandler","initialCheckedValue","isVue","setDisabled","initWrapper","proxy","label","cssClass","labelPosition","setText","keyUpHandler","labelMouseDownHandler","labelMouseUpHandler","rippleElem","labelWrap","getElementsByTagName","updateHtmlAttributeToWrapper","enableHtmlSanitizer","changeHandler","formResetHandler","formElem","init","htmlAttributes","click","focusIn","defaulthtmlkeys","delayUpdate","ComponentBase","attrKeys","cachedTimeOut","isAppendCalled","initRenderCalled","isReactForeceUpdate","isReact","isshouldComponentUpdateCalled","refreshChild","canDelayUpdate","renderReactComponent","portals","refreshProperties","reactElement","nextProps","updateProperties","silent","dProps","propkey","isClassName","htmlattributes","compareValues","clsName","propsClsName","dpropsClsName","processComplexTemplate","compTemplate","complexTemplate","PropVal","getDefaultAttributes","propKeys","controlAttributes","reactUid","clsList","onChange","syntheticEvent","value1","value2","tempVal","tempVal2","compareObjects","oldProps","newProps","diffArray","keys_2","_j","checkInjectedModules","prevModule","curModule_1","getInjectedServices","directivekeys","changedProps","directiveValue","validateChildren","skipRefresh","prevProperties","dKeys","compareOutput","_c1","allColumns","propInstance","changedProps_1","changes","propInstance_1","appendReactElement","container","ReactDOM","templateNames","tempPortal","indexCount","propIndexCount","portal","childCache","childs_1","ifield","getChildType","childProps","getChildProps","isDirective","moduleName","subChild","subChild_1","accessProp","cacheVal","cachedValue","childs_2","isService","services","applyMixins","derivedClass","baseClass","classObj","ComplexBase","stringCompiler","templateElement","cEle","actTemplate","actData","isLegacyTemplate","rele","elementRect","popupRect","parentDocument","CheckBoxComponent","immediateRender","targetContainer","fixedParent","calculatePosition","currentElement","positionX","positionY","targetValues","posX","posY","setPosx","getElementHCenter","setPosy","getElementTop","getElementRight","getElementVCenter","getElementLeft","getElementBottom","updatePosition","getBodyScrollTop","getBodyScrollLeft","popupWidth","isCollide","viewPortElement","elemOffset","yAxis","topCollideCheck","xAxis","leftCollideCheck","topSide","rightSide","leftSide","bottomSide","flip","tEdge","TL","TR","BL","BR","eEdge","oldVisibility","removeProperty","edge","updateElementData","setPosition","leftFlip","topFlip","setPopup","eStatus","ContainerLeft","ContainerRight","deepCheck","collideSide","ContainerTop","ContainerBottom","getTargetContainerWidth","getTargetContainerHeight","getTargetContainerLeft","getTargetContainerTop","getViewPortWidth","getViewPortHeight","windowWidth","documentReact","PositionData","CLASSNAMES","Popup","setEnableRtl","refreshPosition","setContent","actionOnScroll","wireScrollEvents","unwireScrollEvents","resolveCollision","checkCollision","orientationOnChange","getRelateToElement","scrollRefresh","parent_2","relateToElement","relateTo","hide","targetVisible","isElementOnViewport","targetInvisibleStatus","scrollElement","scrollParents","parent_3","isElementVisible","checkGetBoundingClientRect","win","windowView","scrollY","scrollX","outerWidth","outerHeight","elementView","parent_4","reposition","content","relateToElem","collision","checkFixedParent","parentDisplay","getAnchorPosition","anchorEle","eleRect","anchorRect","anchorPos","fixedElement","tempAnchor","calculateRelativeBasedPosition","targetType","callFlip","callFit","elemData","containerWidth","containerLeft","containerRight","overLeft","overRight","containerHeight","containerTop","containerBottom","overTop","overBottom","fit","viewPortRect","horz","vert","show","animationOptions","relativeElement","zIndexElement","parentZindex","childrenZindex","isEqualNode","siblingsZindex","finalValue","currentZindexValue","getZindexPartial","showAnimation","hideAnimation","overflowRegex","parentStyle","Input","floatType","isBindClearAction","bindInitialEvent","checkInputValue","floatLabelType","getParentNode","inputElement","inputValue","_focusFn","_blurFn","wireFloatingEvents","createFloatingInput","internalCreateElement","makeElement","createInputContainer","customTag","floatLinelement","floatLabelElement","placeholder","innerText","encodePlaceHolder","inputWrap","updateLabelState","checkFloatLabelType","updateIconState","wireClearBtnEvents","readOnly","validateLabel","tagClass","spanEle","setCssClass","oldClass","setPlaceholder","setReadonly","isReadonly","readonly","isRtl","setEnabled","isEnable","inputContainer","disabledAttrs","considerWrapper","removeAttributes","addAttributes","setClearButton","isClear","initial","clearButton","insertAdjacentElement","createClearButton","_internalRipple","isRipple","argsButton","_onMouseDownRipple","_onMouseUpRipple","parentEle","createIconEle","iconClass","prependSpan","innerWrapper","appendSpan","validateInputType","containerElement","createInput","bindClearAction","showClearButton","enabled","setPropertyValue","setWidth","removeFloating","inputEle","addFloating","iconEle","inputObj","isPrependIcon","floatLine","floatText","setRipple","addIcon","icons","internalCreate","result_2","OTHERMONTH","OTHERDECADE","ROOT","DEVICE","DECADE","ICON","OVERLAY","WEEKNUMBER","SELECTED","FOCUSEDDATE","OTHERMONTHROW","TODAY","LINK","CELL","ZOOMIN","DAYHEADERLONG","dayMilliSeconds","CalendarBase","effect","isPopupClicked","isDateSelected","isTodayClicked","preventChange","isAngular","rangeValidation","calendarEleCopy","cloneNode","calendarMode","setSeconds","globalize","todayDisabled","todayDate","tabIndex","calendarElement","createHeader","createContent","getDefaultKeyConfig","defaultKeyConfigs","controlUp","controlDown","moveDown","moveUp","moveLeft","moveRight","home","pageUp","pageDown","shiftPageUp","shiftPageDown","controlHome","controlEnd","altUpArrow","spacebar","altRightArrow","altLeftArrow","validateDate","checkDateValue","checkValue","setOverlayIndex","popupWrapper","popupElement","modal","minMaxUpdate","headerElement","iconContainer","previousIcon","nextIcon","headerTitleElement","adjustLongHeaderSize","contentElement","table","createContentHeader","createContentBody","showTodayButton","createContentFooter","getCultureValues","cldrObj","culShortNames","dayFormat","dayHeaderFormat","getCultureObjects","toCapitalize","html","tableHeadElement","weekNumber","shortNames","shiftArray","renderYears","renderDecades","renderMonths","updateFooter","todayElement","l10","minimum","maximum","today","footer","todayButtonClick","keyConfig","navigateTitle","keyboardModule","keyActionHandle","dateWireEvents","serverModuleName","isCustomDate","currentView","depth","getViewNumber","navigateTo","resetCalendar","tableBodyElement","renderDayCellArgs","multiSelection","selectedDate","focusedDate","depthValue","levelRestrict","keyboardNavigate","selectDate","contentClick","addMonths","addYears","isMonthYearRange","addDay","isMinMaxRange","navigatePreviousHandler","navigatePrevious","navigateNextHandler","navigateNext","navigateHandler","triggerNavigate","minMaxDate","localDate","minDate","maxDate","tdEles","numCells","renderDays","islamicModule","islamicRenderDays","renderTemplate","islamicRenderTemplate","isTodayDate","currentMonth","titleUpdate","getSeconds","getMilliseconds","setStartDate","weekEle","weekAnchor","numberOfDays","weekRule","finalDate","getWeek","dateFormatOptions","tdEle","dayCell","dayLink","isOutOfRange","renderDayCellEvent","argsDate","otherMnthBool","disabledCls","getDateVal","updateFocus","otherMonth","tableElement","removeTableHeadElement","valueUtil","curDate","mon","yr","curYrs","minYr","minMonth","maxYr","maxMonth","localMonth","localYr","startYr","endYr","startFullYr","endFullYr","startHdrYr","endHdrYr","startYear","rowIterator","collection","lastDate","timeOffset","findLastDay","classNm","trEle","row","otherMonthCell","iconHandler","islamicIconHandler","setAriaActiveDescendant","clickEventEmitter","eve","getIdValue","islamicDate","getIslamicDate","switchView","validateValues","checkView","copyValues","skipIndex","tempValueString","minFormatOption","minString","maxFormatOption","maxString","setValueUpdate","dayFormatOptions","monthFormatOptions","setActiveDescendant","focusedEle","selectedEle","previousIconHandler","compareMonth","nextIconHandler","compareYear","compareDecade","stringVal","previous","islamicPrevious","islamicNext","gregorianFormat","islamicFormat","tzOffset","tzOffsetDiff","getMaxDays","setDateDecade","setDateYear","checkPresentDate","tempElement","selectedElement","previousValue","checkPrevious","navigatedEvent","navigatedArgs","startDate","endDate","modifier","column","findNextTD","rangeValue","tmpDate","inValue","toUTCString","toLocaleString","Calendar","isMultiSelection","tempValues","copyDate","previousValues","setEnable","setClass","setTimeZone","serverTimezoneOffset","enable","newCssClass","oldCssClass","isDayLightSaving","secondOffset","firstOffset","offsetValue","timeZoneDiff","changedArgs","generateTodayVal","todayButtonEvent","triggerChange","previousDate","previousDateTime","isMultiSelect","tempDays","islamicRenderYears","islamicRenderDecade","storeView","update","tempDate","addDate","tempDates","removeDate","setTodayDate","changeEvent","isInteracted","POPUPWRAPPER","INPUTFOCUS","ERROR","ACTIVE","OVERFLOW","NONEDIT","DatePicker","previousElementValue","isDateIconClicked","isAltKeyPressed","invalidValueString","checkPreviousValue","maskedDateValue","isIconClicked","isDynamicValueChanged","datepickerOptions","updateInput","setAllowEdit","allowEdit","inputWrapper","checkInvalidValue","enableMask","updateInputValue","inputValueCopy","ariaAttrs","l10nLocale","l10n","updatedCssClassValues","INPUTWRAPPER","isDynamic","isCalendar","disabledDates","strictMode","minMaxUpdates","dateValue","tempFormat","formatString","dateTimeFormat","errorClass","checkStringValue","returnDate","formatDateTime","valueDate","valueString","basicISOString","bindInputEvent","inputHandler","dateIconHandler","mouseUpHandler","inputFocusHandler","inputBlurHandler","keydownHandler","inputChangeHandler","resetHandler","formElement","resetFormHandler","keyboardModules","inputKeyActionHandle","popupObj","unBindEvents","restoreValue","bindClearEvent","clear","clearedArgs","popupUpdate","preventEventBubbling","interopAdaptor","invokeMethodAsync","blur","updatedClassValues","setStyle","updateHtmlAttributeToElement","updateCssClass","calendarKeyActionHandle","focusArguments","openOnFocus","strictModeUpdate","changeTrigger","blurArguments","calendarKeyboardModules","documentHandler","focusOut","clickedView","defaultAction","targetdate","dateOptions","createCalendar","modelHeader","close","preventArgs","setAriaAttributes","targetExitViewport","setAriaDisabled","yearHeading","h2","daySpan","monthSpan","selectCalendar","prevent_1","outOfRange","mobilePopupWrapper","popup","openAnimation","prevent_2","closeEventCallback","prevent","outerHTML","triggerEvent","inputElementCopy","ensureInputAttribute","ngTag","validationAttribute","checkHtmlAttributes","altDownArrow","enter","shiftTab","tab","nameAttribute","checkFormat","skeletonString","dynamic","attributes_1","valueCopy","previousValCopy","inputVal","dateIdString","isDisabledDate","dayOfTheWeek","DatePickerComponent","ListBase","ARROWLEFT","ARROWDOWN","SHIFTTAB","END","HOME","MaskedDateTime","mask","defaultConstant","hiddenMask","validCharacters","isDayPart","isMonthPart","isYearPart","isHourPart","isMinutePart","isSecondsPart","isMilliSecondsPart","monthCharacter","periodCharacter","isHiddenMask","isComplete","isNavigate","isDeletion","isShortYear","isDeleteKey","isDateZero","isMonthZero","isYearZero","dayTypeCount","monthTypeCount","hourTypeCount","minuteTypeCount","secondTypeCount","dateformat","getCulturedFormat","maskDateValue","createMask","validCharacterCheck","maskInputHandler","maskKeydownHandler","clearHandler","maskPlaceholder","getCUltureMaskFormat","formatCheck","previousHiddenMask","setDynamicValue","objectString","setSelection","updateValue","validChar","setSelectionRange","navigateSelection","dateAlteration","differenceCheck","previousVal","newVal","newDateValue","handleDeletion","monthString","getCulturedValue","monthValue","monthValue_1","previousMaxDate","currentMaxDate","periodString","periodkeys","formattext","daysAbbreviated","dayKeyAbbreviated","daysWide","dayKeyWide","daysNarrow","dayKeyNarrow","monthAbbreviated","monthWide","zeroCheck","roundOff","hiddenChar","isbackward","formatIndex","valueText","isZero","resultValue","isSegment","isDecrement","formatText","incrementValue","newMonth","cldrTimeFormat","consts","GroupGuid","Adaptor","ds","requestType","sortBy","skip","group","take","where","aggregates","expand","dataSource","pvt","processResponse","query","xhr","JsonAdaptor","processQuery","dataManager","page","json","countFlg","lazyLoad","keyCount","agg","queries","lazyLoadData","lazyLoadGroup","isCountRequired","getAggregate","onDemandGroupInfo","fieldName","DataUtil","comparer","onPage","formGroupResult","req","onWhere","level","aggQuery","Query","filterQueries","batchRequest","dm","deletedRecordsLen","deletedRecords","addedRecords","insert","changedRecords","onAggregates","onSearch","fieldNames","getFieldList","searchKey","ignoreCase","ignoreAccent","onSortBy","fnCompare","fnSort","onGroup","pageSize","pageIndex","onRange","onTake","nos","onSkip","onSelect","tableName","keyField","UrlAdaptor","hierarchyFilters","getQueryRequest","singles","filterQueryLists","request","sorts","groups","filters","searches","callAdaptorFunction","getFiltersFrom","toJson","isNull","fields","operator","getRequestQuery","reqParams","jsonDateReplacer","pvtData","convertToQueryString","request1","fromTable","distincts","selects","expands","handleTimeZone","timeZoneHandling","parseJson","requests","groupDs","isExpand","formRemoteGroupedData","getAggregateResult","childLevel","items","getGroupedRecords","hasRecords","childGroupedRecords","original","batchUrl","crudUrl","removeUrl","changed","added","deleted","getAddParams","insertUrl","keyColumn","updateUrl","fKey","pKey","predicats","Predicate","or","aggregateData","aggregate","isServerGrouping","groupQuery","addParams","ODataAdaptor","multipartAccept","batch","changeSet","batchPre","contentId","batchContent","changeSetContent","batchChangeSetContentType","updateType","onPredicate","predicate","requiresCast","guid","getField","replacer","isGuid","odBiOperator","odUniOperator","odv4UniOperator","onComplexPredicate","predicates","onEachWhere","condition","isComplex","onEachSearch","onEachSort","onCount","settings","overrideMimeType","metaCheck","rootUrl","dataUrls","resourceTableName","dataCopy","results","metaData","emptyAndBatch","processBatchResponse","versionCheck","requiresFormat","keys_4","localTimeReplacer","convertObj","dateParse","toLocalTime","localTime","compareAndRemove","initialGuid","getGuid","cid","cSet","generateInsertRequest","generateUpdateRequest","generateDeleteRequest","stat","generateBodyContent","org","cIdx","jsonObj","exVal","changeGuid","isPlainObject","RemoteSaveAdaptor","ODataV4Adaptor","onExpand","expanded","exArr","sel","close_1","combineVal","expandQueryIndex","idx","ex","onDistinct","distinctFields","metaName","dataUrl","dataCount","WebApiAdaptor","host","_loop_2","_loop_3","Count","Items","WebMethodAdaptor","updateKey","CustomDataAdaptor","getData","addRecord","updateRecord","deleteRecord","batchUpdate","CacheAdaptor","GraphQLAdaptor","opt","schema","response","getVariables","getQuery","datamanager","urlQuery","vars","variables","resData","inserted","generateCrudData","bData","crudData","parsed","getMutation","adaptor","isCrudAction","isInsertAction","cacheAdaptor","guidId","setInterval","forDel","currentTime","requestTime","removeItem","generateKey","currentFilter","newQuery","cachedItems","crossDomain","DataManager","offline","timeTillExpiration","cachingPageSize","enableCaching","jsonp","isCors","defaultQuery","isDataAvailable","ready","executeQuery","setDefaultQuery","executeLocal","subQuery","lookup","lookups","buildHierarchy","using","always","deffered","Deferred","isCustomDataAdaptor","makeRequest","getDeferedArgs","nextTick","extendRequest","fnSuccess","fnFail","processData","isSelector","subQuerySelector","process","virtualSelectRecords","fnQueryChild","subDeffer","childArgs","isChild","subUrl","childReq","subData","isGraphQLAdaptor","ajaxReqOption","virtualRecords","ajax_1","all","pResult","cResult","doAjaxRequest","deff_1","ajax_2","successFunc","failureFunc","ajaxDeffered","ajaxFunc","ajax_3","fnAscending","fnDescending","localeCompare","extractFields","jsonArray","newData","isLazyLoad","jsonData","indx","childLevels","grouped","groupedArray","records","this_2","getVal","tempObj","aggs","grp","fKeyData","copyObj","middle","ignoreDiacritics","diacritics","fnName","param1","param2","adp","rand","Uint8Array","getItemFromComparer","castRequired","distinct","requiresCompleteRecord","prepareQuery","sampledata","requiresCounts","requiresCount","pred","predicateList","getPredicate","and","sorted","mainPred","childPred","cpre","sum","average","truecount","falsecount","operatorSymbols","fnOperators","equal","expected","notequal","lessthan","greaterthan","lessthanorequal","greaterthanorequal","notnull","isnull","startswith","endswith","processSymbols","processOperator","jsonText","jsonReviver","iterateAndReviveArray","iterateAndReviveJson","offSet","toTimeZone","utcFormat","hrs","mins","addSelfOffset","jsonReplacer","arrayReplacer","keys_3","toUTC","datefn","differenceString","localtimefn","norm","sortedColumns","groupedColumns","execute","cloned","tables","isFromGroup","sortByForeignKey","sortByDesc","hierarchy","selectorFn","foreignKey","filtered","combinePredicates","combine","fromJson","fromJSONData","isAnd","preds","ul","icon","check","hasChild","collapsible","image","iconWrapper","anchorWrap","navigable","getFieldValues","dataItem","fieldData","isHeader","dataField","compileTemplate","defaultMappedFields","isChecked","iconCss","hasChildren","tooltip","urlAttributes","imageAttributes","imageUrl","groupBy","defaultAriaAttributes","listRole","itemRole","groupItemRole","itemText","wrapperRole","defaultListBaseOptions","showCheckBox","showIcon","expandCollapse","ariaAttributes","listClass","itemClass","processSubChild","sortOrder","groupTemplate","headerTemplate","expandIconClass","expandIconPosition","itemNavigable","createListFromArray","isSingleLevel","componentInstance","generateUL","createListItemFromArray","curOpt","getModuleClass","generateId","itemCreating","generateSingleLevelLI","generateLI","itemCreated","createListItemFromJson","checkboxElement","anchorElement","typeofData","curItem","innerEle","imageElemnt","iconElement","createListFromJson","elementArray","addSorting","getDataSource","typeof","elementAttributes","class","getAllAttributes","subDS","subLi","innerElements","grpLI","elementID","anchorTag","isFullNavigation","anchorWrapper","uID","compiledString","compiledElement","groupTemplateID","templateID","innerDiv","liElement","ulElement","createList","getSiblingLI","isPrevious","siblingLI","liIndex","liCollections","groupDataSource","curFields","cusQuery","itemObj","grpItem","newtext","_id","createJsonFromElement","curEle","jsonAr","childs","i_1","hasChildNodes","renderContentTemplate","liCollection","currentID","renderGroupTemplate","headerItems","category","headerItems_1","headerData","generateIcon","TimePickerBase","POPUPDIMENSION","DAY","HOVER","NAVIGATION","FOCUS","LISTCLASS","EDITABLE","wrapperAttributes","createListItems","createdEl","listItems","timeCollections","TimeMaskPlaceholder","TimePicker","disableItemCollection","timeOptions","keyConfigure","down","up","angularTag","openPopupEventArgs","createInputElement","setTimeAllowEdit","validateInterval","validateDisable","getFormattedValue","checkErrorState","inputEleValue","clearIconState","setMinMax","initMin","initMax","popupCreation","valueIsDisable","resetState","initValue","checkTimeFormat","checkInValue","scrollTo","checkAttributes","localeText","isPreventBlur","isTextSelected","activeIndex","valueWithMinutes","prevDate","updatedCssClassesValue","isNullOrEmpty","inputStyle","getCldrDateTimeFormat","cldrFormat","isInvalid","valueExp","valueExpression","setCurrentDate","getCultureTimeObject","ariaAttribute","enableElement","rippleFn","propertyList","generateList","listWrapper","addSelection","renderPopup","getPopupHeight","popupHeight","wireListEvents","containerStyle","setPopupWidth","unWireListEvents","listTag","maxHeight","createDateObj","updatedClassesValue","timeStyle","cssClassNew","cssClassOld","removeErrorClass","validateState","disableTimeIcon","disableElement","selectInputText","setCursorToEnd","getMeridianText","meridian","getCursorSelection","getActiveElement","setScrollPosition","setScrollTo","findScrollTop","listHeight","nextEle","nextElementSibling","liHeight","initialTime","scrollTime","getText","cldrDateFormat","getCultureDateObject","dateToNumeric","getExactDateTime","validateMinMax","compareFormatChange","updatePlaceHolder","popupHandler","isPopupOpen","closePopup","mouseDownHandler","curPos","cursorDetails","focusSelection","isSeparator","keyHandler","objToString","previousState","onMouseClick","animModel","documentClickHandler","mobileTimePopupWrap","disposeServerPopup","checkValueChange","isNavigation","valueProcess","prevValue","onMouseOver","currentLi","setHover","isValidLI","removeHover","onMouseLeave","scrollHandler","minVal","maxVal","dateVal","strictOperation","maxValue","minValue","inputEventHandler","inputEvent","timeValue","raiseClearedEvent","setZIndex","getTextFormat","strArray","removeSelection","validateValue","newval","value_1","findNextElement","textVal","timeVal","collections","selectNextItem","validLiElement","elementValue","backward","elementIndex","isCheck","nextItem","isUpdate","hoveredItem","getHoverItem","setActiveClass","timeParse","listBaseOptions","getProperty","popupAlignment","timePopupElement","formatValues","DATETIMEPOPUPWRAPPER","POPUP","ICONANIMATION","DateTimePicker","scrollInvoked","dateTimeOptions","blurHandler","isTimePopupOpen","popupObject","dateTimeWrapper","keyboardHandler","unBindInputEvents","timekeyConfigure","cldrDateTimeFormat","bindInputEvents","validateMinMaxRange","isDateObject","disablePopupButton","checkValidState","isValidState","isDisable","timeIcon","renderTimeIcon","timeHandler","dateHandler","inputKeyAction","getCldrFormat","isDatePopupOpen","toggle","listCreation","endTime","listDetails","wireTimeListEvents","addTimeSelection","setTimeScrollPosition","openPopup","timeModal","timeKeyActionHandle","unWireTimeListEvents","setDimension","setTimeHover","removeTimeHover","setInputValue","nextElement","getFullDateTime","combineDateTime","setTimeActiveClass","setTimeActiveDescendant","removeTimeSelection","getTimeHoverItem","calculateStartEnd","tempStartValue","tempMin","tempEndValue","tempMax","dateTimeCloseEventCallback","maskedDateModule","getTimeActiveElement","status_1","findNextTimeElement","dateTimeVal","listCount","timeElementValue","setTimeValue","timeKeyHandler","nextItemValue","DateTimePickerComponent","globalTimeOut","CLS_SHOWSPIN","CLS_HIDESPIN","CLS_MATERIALSPIN","CLS_FABRICSPIN","CLS_FLUENTSPIN","CLS_TAILWINDSPIN","CLS_BOOTSPIN","CLS_BOOT4SPIN","CLS_BOOT5SPIN","CLS_HIGHCONTRASTSPIN","CLS_SPINWRAP","CLS_SPININWRAP","CLS_SPINCIRCLE","CLS_SPINLABEL","CLS_SPINTEMPLATE","spinTemplate","spinCSSClass","createSpinner","spinnerContainer","spinnerInnerContainer","inner_wrap","create_spinner_container","theme","getTheme","defaultSize","calculateRadius","setTheme","labelEle","createLabel","replaceContent","innerContainer","svg","random_generator","timeOut","create_material_element","mat_calculate_attributes","createMaterialSpinner","create_fabric_element","fb_calculate_attributes","createFabricSpinner","createFluentSinner","svgBoot","viewBoxValue","trans","defaultRadius","bootCircle","create_bootstrap_element","rad","startArc","defineArcPoints","circleEle","boot_calculate_attributes","createBootstrapSpinner","createHighContrastSpinner","createBootstrap4Spinner","createBootstrap5Spinner","createTailwindSpinner","generateSeries","series","increment","formSeries","innerCon","themeClass","svgFabric","fabricCirclePath","fabricCircleArc","cls","svgMaterial","matCirclePath","animateMaterial","spinnerInfo","globalInfo","previousId","strokeSize","getStrokeSize","rotate","mat_animation","updatePath","getDashOffset","createCircle","easeAnimation","transformOrigin","drawArc","PI","timestamp","timecount","innerConainer","trgClass","centerX","centerY","circle","defineCircle","endArc","defineArc","angle","radians","cos","sin","showSpinner","showHideSpinner","isHide","spinnerWrap","inner","svgEle","isAnimate","globalObject","globalVariables","timeOutVar","startMatAnimate","rotation","boot_animate","animateBootstrap","hideSpinner","queryString","prevString","prevElementId","Search","searchType","itemData","strLength","queryStr","itemsData","FieldSettings","dropDownBaseClasses","DropDownBase","isPreventChange","isDynamicDataChange","getPropObject","newProperty","oldProperty","getValueByText","listData","checkValueCase","isTextByValue","typeOfData","dataSource_1","checkingAccent","checkIgnoreCase","getItemValue","checkNonIgnoreCase","compareValue_1","itemValue","textItem","typedText","templateCompiler","baseTemplate","checkTemplate","l10nUpdate","actionFailure","noRecordsTemplate","actionFailureTemplate","actionFailureTemplateId","noRecordsTemplateId","noDataCompTemp","componentLocale","getLocaleName","liElem","getTextByValue","enableRtlElements","bindEvent","jsonElement","resetList","setListData","renderItemsBySelect","updateDataAttribute","invalidAttr","getJSONfromOption","optionGroup","updateFields","scrollTimer","isRequested","isDataFetched","itemTemplateId","valueTemplateId","groupTemplateId","headerTemplateId","footerTemplateId","isActive","emptyDataRequest","renderItems","onActionComplete","bindChildItems","onActionFailure","localDataArgs","itemTemplate","childElementCount","updateDataList","remainingItems","sortedData","updateListValues","raiseDataBound","findListElement","findNode","listArr","dataBoundEventArgs","spliceData","listElements","templateListItem","listOption","fixedHeaderElement","allowCustomValue","postRender","listElement","focusItem","selectedItem","listEle","groupValue","tempHeaders","isGroupChecking","getSortedDataSource","fieldValues","setFloatingHeader","setFixedHeader","scrollStop","getValidLi","topIndex","liWidth","firstLi","textField","getIndexByValue","getItems","setFields","selectData","updateSelectElementData","isFiltering","updateSelection","renderList","updateDataSource","setUpdateInitial","updateData","isEmptyData","rippleFun","addItem","itemIndex","itemsCount","selectedItemValue","addItemTemplate","updateActionCompleteData","updateAddItemList","listGroupItem","tempLi","hidden","itemCount","getDataByValue","dropDownListClasses","hover","rtl","disable","inputFocus","iconAnimation","device","backIcon","filterBarClearIcon","filterInput","filterParent","mobileFilter","clearIcon","clearIconHide","popupFullScreen","disableIcon","hiddenElement","DropDownList","isListSearched","valueTempElement","initializeData","isDocumentClick","isFilterFocus","beforePopupOpen","initRemoteRender","isNotSearchList","isTyped","isSelected","preventFocus","preventAutoFill","isValidKey","typedString","isEscapeKey","isTabKey","actionCompleteData","isUpdated","actionData","prevSelectPoints","isSelectCustom","isDropDownClick","preventAltUp","isCustomFilter","isSecondClick","space","floatLabelChange","floatElement","clearAll","resetFocusElement","removeFocus","resetSelection","getItemData","onChangeEvent","allowFiltering","selectedLI","cloneElements","setHTMLAttributes","htmlAttr","updatedClassValue","defaultAttr","getAriaAttributes","targetElement","hidePopup","preventTabIndex","getNgDirective","getElementByText","getElementByValue","listItems_1","liItem","updateValues","setHiddenValue","onBlurHandler","isFilterLayout","focusOutAction","onFocusOut","onFocus","resetValueHandler","wireEvent","dropDownClick","bindCommonEvent","mobileKeyActionHandler","keyActionHandler","unBindCommonEvent","searchKeyEvent","onServerIncrementalSearch","incrementalSearch","back","selectedIndex","elementId","spinnerElement","filterInputObj","preventAction","preventHomeEnd","isEditTextBox","isTabAction","updateUpDownAction","pageUpSelection","getPageCount","pageDownSelection","updateHomeEndAction","showPopup","focusDropDown","selectCurrentItem","selectCurrentValueOnTab","focusEle","isSelectFocusItem","startIndex","findLi","steps","previousItem","unWireEvent","checkSelector","onDocumentClick","activeStateChange","proxy_1","updateSelectedItem","preventSelect","isSelection","selectedData","selectEventCallback","setSelectOptions","detachChanges","previousItemData","focusedItem","activeItem","valueTemplate","setValueTemplate","clearElement","previousSelectedLI","dropdownCompiler","dropdownTemplate","valueCompTemp","selectedItems","dataValue","dataText","detachChangeEvent","preItems","onFilterUp","searchLists","onFilterDown","getSelectionPoints","removeFillSelection","selection","filterQuery","filterType","eventArgs_1","preventDefaultAction","filteringAction","baseEventArgs","focusIndexItem","setSearchBox","filterBarPlaceholder","clearIconElement","clearText","searchKeyModule","onInput","pasteHandler","checkField_1","updateActionCompleteDataValues","addNewItem","newElement","actionCompleteDataUpdate","highlightedItem","refreshPopup","popupEle","searchBox","setHeaderTemplate","footerTemplate","setFooterTemplate","searchBoxHeight","getOffsetValue","firstItem","isEmptyList","textIndent","paddingLeft","borderLeftWidth","getFocusElement","createPopup","setSearchBoxPosition","backIconElement","clickOnBackIcon","scrollParentElements_1","listScroll","destroyPopup","popupStyles","borderTop","borderTopWidth","borderBottom","borderBottomWidth","setPopupPosition","actionList","border","popupOffset","lastItem","paddingBottom","scrollBottom","isInitial","currentOffset","nextBottom","nextOffset","paddingTop","boxRange","isPopupButton","setEleWidth","scrollableParentElements_1","fixedHeader","setReadOnly","selectElement","onselect","stopImmediatePropagation","onchange","footerCompTemp","headerCompTemp","contentEle","setOldText","setOldValue","checkData","isChangeValue","isChangeText","checkCustomValue","updateInputFields","checkValidLi","setSelectionData","listLength_1","checkField","listLength_2","ddlProps","newClass","invokeRenderPopup","proxy_2","onpopstate","pushState","renderHightSearch","isSelectVal","attrArray","DropDownListComponent","FLOATLINE","FLOATTEXT","LABELTOP","LABELBOTTOM","createFloatLabel","overAllWrapper","searchWrapper","encodePlaceholder","updateFloatLabelState","setPlaceHolder","spanElement","HIDE_LIST","CHIP","CHIP_CLOSE","CHIP_SELECTED","DELIMITER_VIEW_WRAPPER","ZERO_SIZE","CLOSEICON_CLASS","DELIMITER_WRAPPER","RTL_CLASS","CLOSE_ICON_HIDE","DISABLE_ICON","SPINNER_CLASS","dropdownIcon","TOTAL_COUNT_WRAPPER","CUSTOM_WIDTH","FILTERINPUT","MultiSelect","clearIconWidth","selectAllEventData","selectAllEventEle","scrollFocusStatus","keyDownStatus","enableRTL","enableGroupCheckBox","prevOnChange","enableSelectionOrder","hideSelectedItem","closePopupOnSelect","updateHTMLAttribute","refreshPlaceHolder","updateReadonly","updateClearButton","overAllClear","componentWrapper","updateOldPropCssClass","onPopupShown","focusAtFirstListItem","updateListItems","mainList","showDropDownIcon","isFirstClick","loadTemplate","mainListItems","findGroupStart","deselectHeader","refreshListItems","valueEle","addListFocus","focusAtLastListItem","updateListARIA","disableStatus","ensureAriaDisabled","removelastSelection","chipCollectionWrapper","customValue","removeValue","removeChipSelection","updateDelimeter","delimiterChar","makeTextBoxEmpty","refreshSelection","checkPlaceholderSize","targetInputElement","getForQuery","valuecheck","updateActionList","showSelectAll","mainData","mainListCollection","remoteCustomValue","checkForCustomValue","tempQuery","unwireListEvents","setInitialValue","selectAllAction","setDynValue","initialTextUpdate","initialValueUpdate","initialUpdate","changeOnBlur","updateValueState","previousElementSibling","hideGroupItem","ariaValue","checkSelectAll","checkMaxSelection","element1","temp1","groupItemLength","listItem","searchCount","searchActiveCount","maximumSelectionLength","openClick","openOnClick","keyUp","expandTextbox","showOverAllClear","isFiltered","remoteFilterAction","dataUpdater","filterAction","backCommand","dataChecks","customData","tempData","wrapperClick","isDocClickFromCheck","addTagOnBlur","listLiElement","updateListSelection","updateDelimView","focused","removeChipFocus","refreshInputHight","floatLabelBlur","downIconWidth","dropIcon","setPlaceholderSize","initStatus","updateTempValue","getPagingCount","focusInHandler","showDelimWrapper","viewWrapper","floatLabelFocus","delimiterWrapper","hideDelimWrapper","mobFilter","calcPopupWidth","checkTextLength","popupKeyActions","updateAriaAttribute","homeNavigation","isHome","scrollEle","onKeyDown","arrowUp","arrowDown","selectByKey","spaceKeySelection","escapeAction","keyNavigation","checkBackCommand","moveByList","focuseElem","moveBy","removeSelectedChip","selectListByKey","hideOverAllClear","lastElementChild","selectAllItem","selectedElem","addChipSelection","moveByTop","updateCheck","chipClick","elem","onChipRemove","customVal","setFloatLabelType","removeAllItems","isClearAll","mainElement","removeVal","invokeCheckboxSelection","updateMainList","updateChipStatus","isSelectAll","targetEle","val_1","removeIndex","hideElement","removeChip","targetEle_1","clearAllCallback","element2","addValue","addListSelection","addChip","dispatchSelect","isNotTrigger","val_2","updateListSelectEventCallback","getChip","closeElements","onMobileChipInteraction","chipElem","chipClose","multiCompiler","multiselectTemplate","chip","chipContent","mouseIn","mouseOut","fieldProperty","listCurrentOptions","checkboxFilter","overAllHeight","selectAllHeight","checkboxFilterInput","onListMouseDown","selectAllItems","windowResize","delim","listValue","updateWrapperText","addValidInputClass","textArr","removeListSelection","indexItem","noDataEle","replaceChild","isDynamicGroupItemUpdate","isReactTemplateUpdate","isAngularTemplateUpdate","temp_1","fieldValue","data_1","selectItems","mainlist","addListHover","ariaCheck","delimChar","groupValues","findGroupAttrtibutes","updateCheckBox","unChecked","groupHeader","checkBoxElement","filterClear","wrapperType","wrapperData","tempIndex","wrapperleng","remaining","overAllContainer","overflowCountTemplate","totalCountTemplate","remainContent","totalContent","raminElement","remainCompildTemp","remainSize","checkClearIconWidth","getOverflowVal","paddingRight","totalWidth","updateRemainTemplate","updateRemainWidth","updateRemainingText","remainTemp","totalTemp","newTemp","selectionLimit","focusedElement","textboxValueUpdate","beforeSelectArgs","preventSelectEvent","index_1","count_1","updatedataValueItems","updateHiddenElement","hiddenValue","wrapperText","isRemoveAll","onLoadSelect","updateVal","dropDownIcon","reInitializePoup","msProps","presentItemValue","addNonPresentItems","mainLiLength","liLength","SEARCHBOX_WRAPPER","DELIMITER_VIEW","spellcheck","autocomplete","tabindex","checkInitialValue","isData","optionsElement","valueCol","textCol","optionsLen","checkAutoFocus","placeholderText","placeholderElement","MultiSelectComponent","TEXTBOX_FOCUS","TextBox","isHiddenInput","isForm","inputPreviousValue","textboxOptions","textboxWrapper","respectiveElement","isBlank","raiseChangeEvent","updateHTMLAttrToElement","updateHTMLAttrToWrapper","multiline","textarea","apiAttributes","attrs_1","autoCompleteTxt","updatedCssClassValue","getInputValidClassList","inputClassName","resetForm","animationHandler","resetValue","localChange","interaction","isInteraction","resetInputHandler","TextBoxComponent","SPINICON","SPINUP","INCREMENT","DECREMENT","INTREGEXP","NUMERIC_FOCUS","NumericTextBox","isDynamicChange","numericOptions","isPrevFocused","decimalSeparator","intRegExp","isCalled","angularTagName","formEle","incrementTitle","decrementTitle","inputName","cultureInfo","initCultureInfo","initCultureFunc","validateStep","updatePlaceholder","createWrapper","showSpinButton","spinBtnCreation","setElementWidth","changeValue","trimValue","decimals","roundNumber","hiddenInput","elementPrevValue","setNumber","stepValue","getNumericValidClassList","pro","numericClassName","numericStyle","spinDown","spinUp","wireSpinBtnEvents","MAX_VALUE","formattedValue","operation","isInteract","performAction","checkErrorClass","setElementValue","keyupEvent","setSpinButton","keyDownHandler","mouseDownOnSpinner","mouseUpOnSpinner","touchMoveOnSpinner","unwireSpinBtnEvents","beforeUpdate","preventHandler","iOS","currentPos","prevPos","valArray","ignoreKeyCode","prevVal","cursorPosChanged","validateDecimalOnType","parseValue","parsedValue","updatedValue","correctRounding","floatExp","floatValue","floatStep","valueCount","stepCount","roundValue","precision","divide","updateCurrency","propVal","numberOfDecimals","getNumberOfDecimals","modifyText","serverDecimalSeparator","EXPREGEXP","decimalPart","result1","result2","currentChar","fractionRule","mouseWheel","delta","rawEvent","focusEventArgs","formatValue_1","isIos","blurEventArgs","ele_1","focusEvent","getElementData","mouseUpClick","touchEvent","clearInterval","floatLabelTypeUpdate","decrement","updateSpinButton","propValue","NumericTextBoxComponent","_extends","_assertThisInitialized","ReferenceError","ReCAPTCHA","_React$Component","subClass","superClass","handleExpired","handleErrored","handleChange","handleRecaptchaRef","_proto","grecaptcha","_widgetId","getResponse","getWidgetId","_executeRequested","executeAsync","_this2","executionResolve","executionReject","onExpired","onErrored","explicitRender","sitekey","stoken","badge","captcha","delayOfCaptchaIframeRemoving","temporaryNode","_this$props","excluded","sourceKeys","_objectWithoutPropertiesLoose","SCRIPT_MAP","idCount","callbackName","getScriptURL","recaptchaOptions","useRecaptchaNet","globalName","WrappedComponent","wrappedComponentName","AsyncScriptLoader","_Component","__scriptURL","asyncScriptLoaderGetScriptLoaderID","__scriptLoaderID","setupScriptURL","asyncScriptLoaderHandleLoad","asyncScriptOnLoad","asyncScriptLoaderTriggerOnScriptLoaded","mapEntry","obsKey","observers","_this3","scriptURL","_options","scriptId","errored","callObserverFuncAndRemoveObserver","observersMap","observer","removeOnUnmount","allScripts","forwardedRef","ForwardedComponent","hoistStatics","_objectWithoutProperties","sourceSymbolKeys","propertyIsEnumerable","asyncGeneratorStep","gen","_next","_throw","_asyncToGenerator","client","customHeaders","customConfig","Authorization","fetch","appConfig","showFooter","FosLogo","alt","rel","setErrors","submitted","setSubmitted","recaptchaToken","setRecaptchaToken","grecaptchaObject","multiSelectValues","setMultiSelectValues","submitBehaviorTypes","buttonStyle","backgroundColor","submitButtonOption","fontColor","borderColor","borderRadius","handleMultiSelect","fieldOption","getBorderRadius","onSubmit","inquiryFormReference","formFields","sRef","getElementsByName","normalizedName","isDateTimeType","zonedDate","moment","toUtcDateTimeFormat","isDateType","toUtcDateFormat","isBooleanType","isDropDown","selectedOptions","inputField","customFieldDefinitionReference","definitionReference","isCustomField","isSuccessful","submitOption","afterSubmitBehavior","submitBehaviorReference","redirectUrl","messages","description","handleResponse","fontFamily","Standard","Wide","Narrow","Friendly","Traditional","formFont","formHeading","primaryHeadingName","secondaryHeadingName","htmlFor","isTextType","optionValue","isTextAreaType","isNumberType","isDecimalType","showPoweredByFooter","messageTitle","useParams","embeded","standaloneFormOption","App","getElementById"],"sourceRoot":""}