\n * \n * ```\n */\nvar HScroll = /** @class */ (function (_super) {\n __extends(HScroll, _super);\n /**\n * Initializes a new instance of the HScroll class.\n * @param options - Specifies HScroll model properties as options.\n * @param element - Specifies the element for which horizontal scrolling applies.\n */\n function HScroll(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the event handler\n * @private\n */\n HScroll.prototype.preRender = function () {\n this.browser = Browser.info.name;\n this.browserCheck = this.browser === 'mozilla';\n this.isDevice = Browser.isDevice;\n this.customStep = true;\n var element = this.element;\n this.ieCheck = this.browser === 'edge' || this.browser === 'msie';\n this.initialize();\n if (element.id === '') {\n element.id = getUniqueID('hscroll');\n this.uniqueId = true;\n }\n element.style.display = 'block';\n if (this.enableRtl) {\n element.classList.add(CLS_RTL);\n }\n };\n /**\n * To Initialize the horizontal scroll rendering\n * @private\n */\n HScroll.prototype.render = function () {\n this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this), swipe: this.swipeHandler.bind(this) });\n EventHandler.add(this.scrollEle, 'scroll', this.scrollHandler, this);\n if (!this.isDevice) {\n this.createNavIcon(this.element);\n }\n else {\n this.element.classList.add(CLS_DEVICE);\n this.createOverlay(this.element);\n }\n if (isNullOrUndefined(this.scrollStep) || this.scrollStep < 0) {\n this.scrollStep = this.scrollEle.offsetWidth;\n this.customStep = false;\n }\n };\n HScroll.prototype.initialize = function () {\n var scrollEle = this.createElement('div', { className: CLS_HSCROLLCON });\n var scrollDiv = this.createElement('div', { className: CLS_HSCROLLBAR });\n scrollDiv.setAttribute('tabindex', '-1');\n var ele = this.element;\n var innerEle = [].slice.call(ele.children);\n for (var _i = 0, innerEle_1 = innerEle; _i < innerEle_1.length; _i++) {\n var ele_1 = innerEle_1[_i];\n scrollEle.appendChild(ele_1);\n }\n scrollDiv.appendChild(scrollEle);\n ele.appendChild(scrollDiv);\n scrollDiv.style.overflowX = 'hidden';\n this.scrollEle = scrollDiv;\n this.scrollItems = scrollEle;\n };\n HScroll.prototype.getPersistData = function () {\n var keyEntity = ['scrollStep'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Returns the current module name.\n * @returns string\n * @private\n */\n HScroll.prototype.getModuleName = function () {\n return 'hScroll';\n };\n /**\n * Removes the control from the DOM and also removes all its related events.\n * @returns void\n */\n HScroll.prototype.destroy = function () {\n var ele = this.element;\n ele.style.display = '';\n ele.classList.remove(CLS_ROOT);\n ele.classList.remove(CLS_DEVICE);\n var nav = selectAll('.e-' + ele.id + '_nav.' + CLS_HSCROLLNAV, ele);\n var overlay = selectAll('.' + CLS_OVERLAY, ele);\n [].slice.call(overlay).forEach(function (ele) {\n detach(ele);\n });\n for (var _i = 0, _a = [].slice.call(this.scrollItems.children); _i < _a.length; _i++) {\n var elem = _a[_i];\n ele.appendChild(elem);\n }\n if (this.uniqueId) {\n this.element.removeAttribute('id');\n }\n detach(this.scrollEle);\n if (nav.length > 0) {\n detach(nav[0]);\n if (!isNullOrUndefined(nav[1])) {\n detach(nav[1]);\n }\n }\n EventHandler.remove(this.scrollEle, 'scroll', this.scrollHandler);\n this.touchModule.destroy();\n this.touchModule = null;\n _super.prototype.destroy.call(this);\n };\n /**\n * Specifies the value to disable/enable the HScroll component.\n * When set to `true`, the component will be disabled.\n * @param {boolean} value - Based on this Boolean value, HScroll will be enabled (false) or disabled (true).\n * @returns void.\n */\n HScroll.prototype.disable = function (value) {\n var navEles = selectAll('.e-scroll-nav:not(.' + CLS_DISABLE + ')', this.element);\n value ? this.element.classList.add(CLS_DISABLE) : this.element.classList.remove(CLS_DISABLE);\n [].slice.call(navEles).forEach(function (el) {\n el.setAttribute('tabindex', !value ? '0' : '-1');\n });\n };\n HScroll.prototype.createOverlay = function (element) {\n var id = element.id.concat('_nav');\n var rightOverlayEle = this.createElement('div', { className: CLS_OVERLAY + ' ' + CLS_RIGHTOVERLAY });\n var clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);\n var rightEle = this.createElement('div', { id: id.concat('_right'), className: clsRight });\n var navItem = this.createElement('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n rightEle.appendChild(navItem);\n var leftEle = this.createElement('div', { className: CLS_OVERLAY + ' ' + CLS_LEFTOVERLAY });\n if (this.ieCheck) {\n rightEle.classList.add('e-ie-align');\n }\n element.appendChild(rightOverlayEle);\n element.appendChild(rightEle);\n element.insertBefore(leftEle, element.firstChild);\n this.eventBinding([rightEle]);\n };\n HScroll.prototype.createNavIcon = function (element) {\n var id = element.id.concat('_nav');\n var clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);\n var nav = this.createElement('div', { id: id.concat('_right'), className: clsRight });\n nav.setAttribute('aria-disabled', 'false');\n var navItem = this.createElement('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n var clsLeft = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVLEFT);\n var navEle = this.createElement('div', { id: id.concat('_left'), className: clsLeft + ' ' + CLS_DISABLE });\n navEle.setAttribute('aria-disabled', 'true');\n var navLeftItem = this.createElement('div', { className: CLS_NAVLEFTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n navEle.appendChild(navLeftItem);\n nav.appendChild(navItem);\n nav.setAttribute('tabindex', '0');\n element.appendChild(nav);\n element.insertBefore(navEle, element.firstChild);\n if (this.ieCheck) {\n nav.classList.add('e-ie-align');\n navEle.classList.add('e-ie-align');\n }\n this.eventBinding([nav, navEle]);\n };\n HScroll.prototype.onKeyPress = function (e) {\n var _this = this;\n if (e.key === 'Enter') {\n var timeoutFun_1 = function () {\n _this.keyTimeout = true;\n _this.eleScrolling(10, e.target, true);\n };\n this.keyTimer = window.setTimeout(function () {\n timeoutFun_1();\n }, 100);\n }\n };\n HScroll.prototype.onKeyUp = function (e) {\n if (e.key !== 'Enter') {\n return;\n }\n if (this.keyTimeout) {\n this.keyTimeout = false;\n }\n else {\n e.target.click();\n }\n clearTimeout(this.keyTimer);\n };\n HScroll.prototype.eventBinding = function (ele) {\n var _this = this;\n [].slice.call(ele).forEach(function (el) {\n new Touch(el, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });\n el.addEventListener('keydown', _this.onKeyPress.bind(_this));\n el.addEventListener('keyup', _this.onKeyUp.bind(_this));\n el.addEventListener('mouseup', _this.repeatScroll.bind(_this));\n el.addEventListener('touchend', _this.repeatScroll.bind(_this));\n el.addEventListener('contextmenu', function (e) {\n e.preventDefault();\n });\n EventHandler.add(el, 'click', _this.clickEventHandler, _this);\n });\n };\n HScroll.prototype.repeatScroll = function () {\n clearInterval(this.timeout);\n };\n HScroll.prototype.tabHoldHandler = function (e) {\n var _this = this;\n var trgt = e.originalEvent.target;\n trgt = this.contains(trgt, CLS_HSCROLLNAV) ? trgt.firstElementChild : trgt;\n var scrollDis = 10;\n var timeoutFun = function () {\n _this.eleScrolling(scrollDis, trgt, true);\n };\n this.timeout = window.setInterval(function () {\n timeoutFun();\n }, 50);\n };\n HScroll.prototype.contains = function (ele, className) {\n return ele.classList.contains(className);\n };\n HScroll.prototype.eleScrolling = function (scrollDis, trgt, isContinuous) {\n var element = this.scrollEle;\n var rootEle = this.element;\n var classList = trgt.classList;\n if (classList.contains(CLS_HSCROLLNAV)) {\n classList = trgt.querySelector('.' + CLS_NAVARROW).classList;\n }\n if (this.contains(rootEle, CLS_RTL) && this.browserCheck) {\n scrollDis = -scrollDis;\n }\n var scrlLeft = element.scrollLeft;\n if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {\n if (classList.contains(CLS_NAVRIGHTARROW)) {\n this.frameScrollRequest(scrollDis, 'add', isContinuous);\n }\n else {\n this.frameScrollRequest(scrollDis, '', isContinuous);\n }\n }\n else {\n if (classList.contains(CLS_NAVLEFTARROW)) {\n this.frameScrollRequest(scrollDis, 'add', isContinuous);\n }\n else {\n this.frameScrollRequest(scrollDis, '', isContinuous);\n }\n }\n };\n HScroll.prototype.clickEventHandler = function (e) {\n this.eleScrolling(this.scrollStep, e.target, false);\n };\n HScroll.prototype.swipeHandler = function (e) {\n var swipeEle = this.scrollEle;\n var distance;\n if (e.velocity <= 1) {\n distance = e.distanceX / (e.velocity * 10);\n }\n else {\n distance = e.distanceX / e.velocity;\n }\n var start = 0.5;\n var animate = function () {\n var step = Math.sin(start);\n if (step <= 0) {\n window.cancelAnimationFrame(step);\n }\n else {\n if (e.swipeDirection === 'Left') {\n swipeEle.scrollLeft += distance * step;\n }\n else if (e.swipeDirection === 'Right') {\n swipeEle.scrollLeft -= distance * step;\n }\n start -= 0.02;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n HScroll.prototype.scrollUpdating = function (scrollVal, action) {\n if (action === 'add') {\n this.scrollEle.scrollLeft += scrollVal;\n }\n else {\n this.scrollEle.scrollLeft -= scrollVal;\n }\n };\n HScroll.prototype.frameScrollRequest = function (scrollVal, action, isContinuous) {\n var _this = this;\n var step = 10;\n if (isContinuous) {\n this.scrollUpdating(scrollVal, action);\n return;\n }\n if (!this.customStep) {\n [].slice.call(selectAll('.' + CLS_OVERLAY, this.element)).forEach(function (el) {\n scrollVal -= el.offsetWidth;\n });\n }\n var animate = function () {\n if (scrollVal < step) {\n window.cancelAnimationFrame(step);\n }\n else {\n _this.scrollUpdating(step, action);\n scrollVal -= step;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n HScroll.prototype.touchHandler = function (e) {\n var ele = this.scrollEle;\n var distance;\n distance = e.distanceX;\n if ((this.ieCheck) && this.contains(this.element, CLS_RTL)) {\n distance = -distance;\n }\n if (e.scrollDirection === 'Left') {\n ele.scrollLeft = ele.scrollLeft + distance;\n }\n else if (e.scrollDirection === 'Right') {\n ele.scrollLeft = ele.scrollLeft - distance;\n }\n };\n HScroll.prototype.arrowDisabling = function (addDisable, removeDisable) {\n if (this.isDevice) {\n var arrowEle = isNullOrUndefined(addDisable) ? removeDisable : addDisable;\n var arrowIcon = arrowEle.querySelector('.' + CLS_NAVARROW);\n if (isNullOrUndefined(addDisable)) {\n classList(arrowIcon, [CLS_NAVRIGHTARROW], [CLS_NAVLEFTARROW]);\n }\n else {\n classList(arrowIcon, [CLS_NAVLEFTARROW], [CLS_NAVRIGHTARROW]);\n }\n }\n else {\n addDisable.classList.add(CLS_DISABLE);\n addDisable.setAttribute('aria-disabled', 'true');\n addDisable.removeAttribute('tabindex');\n removeDisable.classList.remove(CLS_DISABLE);\n removeDisable.setAttribute('aria-disabled', 'false');\n removeDisable.setAttribute('tabindex', '0');\n }\n this.repeatScroll();\n };\n HScroll.prototype.scrollHandler = function (e) {\n var target = e.target;\n var width = target.offsetWidth;\n var rootEle = this.element;\n var navLeftEle = this.element.querySelector('.' + CLS_HSCROLLNAVLEFT);\n var navRightEle = this.element.querySelector('.' + CLS_HSCROLLNAVRIGHT);\n var leftOverlay = this.element.querySelector('.' + CLS_LEFTOVERLAY);\n var rightOverlay = this.element.querySelector('.' + CLS_RIGHTOVERLAY);\n var scrollLeft = target.scrollLeft;\n if (scrollLeft <= 0) {\n scrollLeft = -scrollLeft;\n }\n if (this.isDevice) {\n if (this.enableRtl && !(this.browserCheck || this.ieCheck)) {\n leftOverlay = this.element.querySelector('.' + CLS_RIGHTOVERLAY);\n rightOverlay = this.element.querySelector('.' + CLS_LEFTOVERLAY);\n }\n if (scrollLeft < OVERLAY_MAXWID) {\n leftOverlay.style.width = scrollLeft + 'px';\n }\n else {\n leftOverlay.style.width = '40px';\n }\n if ((target.scrollWidth - Math.ceil(width + scrollLeft)) < OVERLAY_MAXWID) {\n rightOverlay.style.width = (target.scrollWidth - Math.ceil(width + scrollLeft)) + 'px';\n }\n else {\n rightOverlay.style.width = '40px';\n }\n }\n if (scrollLeft === 0) {\n if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {\n this.arrowDisabling(navLeftEle, navRightEle);\n }\n else {\n this.arrowDisabling(navRightEle, navLeftEle);\n }\n }\n else if (Math.ceil(width + scrollLeft + .1) >= target.scrollWidth) {\n if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {\n this.arrowDisabling(navRightEle, navLeftEle);\n }\n else {\n this.arrowDisabling(navLeftEle, navRightEle);\n }\n }\n else {\n var disEle = this.element.querySelector('.' + CLS_HSCROLLNAV + '.' + CLS_DISABLE);\n if (disEle) {\n disEle.classList.remove(CLS_DISABLE);\n disEle.setAttribute('aria-disabled', 'false');\n disEle.setAttribute('tabindex', '0');\n }\n }\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of property that changed.\n * @param {HScrollModel} newProp\n * @param {HScrollModel} oldProp\n * @returns void\n * @private\n */\n HScroll.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'scrollStep':\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.element.classList.add(CLS_RTL) : this.element.classList.remove(CLS_RTL);\n break;\n }\n }\n };\n __decorate([\n Property(null)\n ], HScroll.prototype, \"scrollStep\", void 0);\n HScroll = __decorate([\n NotifyPropertyChanges\n ], HScroll);\n return HScroll;\n}(Component));\nexport { HScroll };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Touch, Component, EventHandler, selectAll, getUniqueID, removeClass } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, Property, Browser, detach, createElement as buildTag } from '@syncfusion/ej2-base';\nimport { classList, isNullOrUndefined } from '@syncfusion/ej2-base';\nvar CLS_ROOT = 'e-vscroll';\nvar CLS_RTL = 'e-rtl';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_VSCROLLBAR = 'e-vscroll-bar';\nvar CLS_VSCROLLCON = 'e-vscroll-content';\nvar CLS_NAVARROW = 'e-nav-arrow';\nvar CLS_NAVUPARROW = 'e-nav-up-arrow';\nvar CLS_NAVDOWNARROW = 'e-nav-down-arrow';\nvar CLS_VSCROLLNAV = 'e-scroll-nav';\nvar CLS_VSCROLLNAVUP = 'e-scroll-up-nav';\nvar CLS_VSCROLLNAVDOWN = 'e-scroll-down-nav';\nvar CLS_DEVICE = 'e-scroll-device';\nvar CLS_OVERLAY = 'e-scroll-overlay';\nvar CLS_UPOVERLAY = 'e-scroll-up-overlay';\nvar CLS_DOWNOVERLAY = 'e-scroll-down-overlay';\nvar OVERLAY_MAXWID = 40;\n/**\n * VScroll module is introduces vertical scroller when content exceeds the current viewing area.\n * It can be useful for the components like Toolbar, Tab which needs vertical scrolling alone.\n * Hidden content can be view by touch moving or icon click.\n * ```html\n *
\n * \n * ```\n */\nvar VScroll = /** @class */ (function (_super) {\n __extends(VScroll, _super);\n /**\n * Initializes a new instance of the VScroll class.\n * @param options - Specifies VScroll model properties as options.\n * @param element - Specifies the element for which vertical scrolling applies.\n */\n function VScroll(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the event handler\n * @private\n */\n VScroll.prototype.preRender = function () {\n this.browser = Browser.info.name;\n this.browserCheck = this.browser === 'mozilla';\n this.isDevice = Browser.isDevice;\n this.customStep = true;\n var ele = this.element;\n this.ieCheck = this.browser === 'edge' || this.browser === 'msie';\n this.initialize();\n if (ele.id === '') {\n ele.id = getUniqueID('vscroll');\n this.uniqueId = true;\n }\n ele.style.display = 'block';\n if (this.enableRtl) {\n ele.classList.add(CLS_RTL);\n }\n };\n /**\n * To Initialize the vertical scroll rendering\n * @private\n */\n VScroll.prototype.render = function () {\n this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this), swipe: this.swipeHandler.bind(this) });\n EventHandler.add(this.scrollEle, 'scroll', this.scrollEventHandler, this);\n if (!this.isDevice) {\n this.createNavIcon(this.element);\n }\n else {\n this.element.classList.add(CLS_DEVICE);\n this.createOverlayElement(this.element);\n }\n if (isNullOrUndefined(this.scrollStep) || this.scrollStep < 0) {\n this.scrollStep = this.scrollEle.offsetHeight;\n this.customStep = false;\n }\n EventHandler.add(this.element, 'wheel', this.wheelEventHandler, this);\n };\n VScroll.prototype.initialize = function () {\n var scrollCnt = buildTag('div', { className: CLS_VSCROLLCON });\n var scrollBar = buildTag('div', { className: CLS_VSCROLLBAR });\n scrollBar.setAttribute('tabindex', '-1');\n var ele = this.element;\n var innerEle = [].slice.call(ele.children);\n for (var _i = 0, innerEle_1 = innerEle; _i < innerEle_1.length; _i++) {\n var ele_1 = innerEle_1[_i];\n scrollCnt.appendChild(ele_1);\n }\n scrollBar.appendChild(scrollCnt);\n ele.appendChild(scrollBar);\n scrollBar.style.overflowY = 'hidden';\n this.scrollEle = scrollBar;\n this.scrollItems = scrollCnt;\n };\n VScroll.prototype.getPersistData = function () {\n var keyEntity = ['scrollStep'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Returns the current module name.\n * @returns string\n * @private\n */\n VScroll.prototype.getModuleName = function () {\n return 'vScroll';\n };\n /**\n * Removes the control from the DOM and also removes all its related events.\n * @returns void\n */\n VScroll.prototype.destroy = function () {\n var el = this.element;\n el.style.display = '';\n removeClass([this.element], [CLS_ROOT, CLS_DEVICE]);\n var navs = selectAll('.e-' + el.id + '_nav.' + CLS_VSCROLLNAV, el);\n var overlays = selectAll('.' + CLS_OVERLAY, el);\n [].slice.call(overlays).forEach(function (ele) {\n detach(ele);\n });\n for (var _i = 0, _a = [].slice.call(this.scrollItems.children); _i < _a.length; _i++) {\n var elem = _a[_i];\n el.appendChild(elem);\n }\n if (this.uniqueId) {\n this.element.removeAttribute('id');\n }\n detach(this.scrollEle);\n if (navs.length > 0) {\n detach(navs[0]);\n if (!isNullOrUndefined(navs[1])) {\n detach(navs[1]);\n }\n }\n EventHandler.remove(this.scrollEle, 'scroll', this.scrollEventHandler);\n this.touchModule.destroy();\n this.touchModule = null;\n _super.prototype.destroy.call(this);\n };\n /**\n * Specifies the value to disable/enable the VScroll component.\n * When set to `true`, the component will be disabled.\n * @param {boolean} value - Based on this Boolean value, VScroll will be enabled (false) or disabled (true).\n * @returns void.\n */\n VScroll.prototype.disable = function (value) {\n var navEle = selectAll('.e-scroll-nav:not(.' + CLS_DISABLE + ')', this.element);\n value ? this.element.classList.add(CLS_DISABLE) : this.element.classList.remove(CLS_DISABLE);\n [].slice.call(navEle).forEach(function (el) {\n el.setAttribute('tabindex', !value ? '0' : '-1');\n });\n };\n VScroll.prototype.createOverlayElement = function (element) {\n var id = element.id.concat('_nav');\n var downOverlayEle = buildTag('div', { className: CLS_OVERLAY + ' ' + CLS_DOWNOVERLAY });\n var clsDown = 'e-' + element.id.concat('_nav ' + CLS_VSCROLLNAV + ' ' + CLS_VSCROLLNAVDOWN);\n var downEle = buildTag('div', { id: id.concat('down'), className: clsDown });\n var navItem = buildTag('div', { className: CLS_NAVDOWNARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n downEle.appendChild(navItem);\n var upEle = buildTag('div', { className: CLS_OVERLAY + ' ' + CLS_UPOVERLAY });\n if (this.ieCheck) {\n downEle.classList.add('e-ie-align');\n }\n element.appendChild(downOverlayEle);\n element.appendChild(downEle);\n element.insertBefore(upEle, element.firstChild);\n this.eventBinding([downEle]);\n };\n VScroll.prototype.createNavIcon = function (element) {\n var id = element.id.concat('_nav');\n var clsDown = 'e-' + element.id.concat('_nav ' + CLS_VSCROLLNAV + ' ' + CLS_VSCROLLNAVDOWN);\n var nav = buildTag('div', { id: id.concat('_down'), className: clsDown });\n nav.setAttribute('aria-disabled', 'false');\n var navItem = buildTag('div', { className: CLS_NAVDOWNARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n var clsUp = 'e-' + element.id.concat('_nav ' + CLS_VSCROLLNAV + ' ' + CLS_VSCROLLNAVUP);\n var navElement = buildTag('div', { id: id.concat('_up'), className: clsUp + ' ' + CLS_DISABLE });\n navElement.setAttribute('aria-disabled', 'true');\n var navUpItem = buildTag('div', { className: CLS_NAVUPARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n navElement.appendChild(navUpItem);\n nav.appendChild(navItem);\n nav.setAttribute('tabindex', '0');\n element.appendChild(nav);\n element.insertBefore(navElement, element.firstChild);\n if (this.ieCheck) {\n nav.classList.add('e-ie-align');\n navElement.classList.add('e-ie-align');\n }\n this.eventBinding([nav, navElement]);\n };\n VScroll.prototype.onKeyPress = function (ev) {\n var _this = this;\n if (ev.key === 'Enter') {\n var timeoutFun_1 = function () {\n _this.keyTimeout = true;\n _this.eleScrolling(10, ev.target, true);\n };\n this.keyTimer = window.setTimeout(function () { timeoutFun_1(); }, 100);\n }\n };\n VScroll.prototype.onKeyUp = function (ev) {\n if (ev.key !== 'Enter') {\n return;\n }\n if (this.keyTimeout) {\n this.keyTimeout = false;\n }\n else {\n ev.target.click();\n }\n clearTimeout(this.keyTimer);\n };\n VScroll.prototype.eventBinding = function (element) {\n var _this = this;\n [].slice.call(element).forEach(function (ele) {\n new Touch(ele, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });\n ele.addEventListener('keydown', _this.onKeyPress.bind(_this));\n ele.addEventListener('keyup', _this.onKeyUp.bind(_this));\n ele.addEventListener('mouseup', _this.repeatScroll.bind(_this));\n ele.addEventListener('touchend', _this.repeatScroll.bind(_this));\n ele.addEventListener('contextmenu', function (e) {\n e.preventDefault();\n });\n EventHandler.add(ele, 'click', _this.clickEventHandler, _this);\n });\n };\n VScroll.prototype.repeatScroll = function () {\n clearInterval(this.timeout);\n };\n VScroll.prototype.tabHoldHandler = function (ev) {\n var _this = this;\n var trgt = ev.originalEvent.target;\n trgt = this.contains(trgt, CLS_VSCROLLNAV) ? trgt.firstElementChild : trgt;\n var scrollDistance = 10;\n var timeoutFun = function () {\n _this.eleScrolling(scrollDistance, trgt, true);\n };\n this.timeout = window.setInterval(function () { timeoutFun(); }, 50);\n };\n VScroll.prototype.contains = function (element, className) {\n return element.classList.contains(className);\n };\n VScroll.prototype.eleScrolling = function (scrollDis, trgt, isContinuous) {\n var rootElement = this.element;\n var classList = trgt.classList;\n if (classList.contains(CLS_VSCROLLNAV)) {\n classList = trgt.querySelector('.' + CLS_NAVARROW).classList;\n }\n if (classList.contains(CLS_NAVDOWNARROW)) {\n this.frameScrollRequest(scrollDis, 'add', isContinuous);\n }\n else if (classList.contains(CLS_NAVUPARROW)) {\n this.frameScrollRequest(scrollDis, '', isContinuous);\n }\n };\n VScroll.prototype.clickEventHandler = function (event) {\n this.eleScrolling(this.scrollStep, event.target, false);\n };\n VScroll.prototype.wheelEventHandler = function (e) {\n e.preventDefault();\n this.frameScrollRequest(this.scrollStep, (e.deltaY > 0 ? 'add' : ''), false);\n };\n VScroll.prototype.swipeHandler = function (e) {\n var swipeElement = this.scrollEle;\n var distance;\n if (e.velocity <= 1) {\n distance = e.distanceY / (e.velocity * 10);\n }\n else {\n distance = e.distanceY / e.velocity;\n }\n var start = 0.5;\n var animate = function () {\n var step = Math.sin(start);\n if (step <= 0) {\n window.cancelAnimationFrame(step);\n }\n else {\n if (e.swipeDirection === 'Up') {\n swipeElement.scrollTop += distance * step;\n }\n else if (e.swipeDirection === 'Down') {\n swipeElement.scrollTop -= distance * step;\n }\n start -= 0.02;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n VScroll.prototype.scrollUpdating = function (scrollVal, action) {\n if (action === 'add') {\n this.scrollEle.scrollTop += scrollVal;\n }\n else {\n this.scrollEle.scrollTop -= scrollVal;\n }\n };\n VScroll.prototype.frameScrollRequest = function (scrollValue, action, isContinuous) {\n var _this = this;\n var step = 10;\n if (isContinuous) {\n this.scrollUpdating(scrollValue, action);\n return;\n }\n if (!this.customStep) {\n [].slice.call(selectAll('.' + CLS_OVERLAY, this.element)).forEach(function (el) {\n scrollValue -= el.offsetHeight;\n });\n }\n var animate = function () {\n if (scrollValue < step) {\n window.cancelAnimationFrame(step);\n }\n else {\n _this.scrollUpdating(step, action);\n scrollValue -= step;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n VScroll.prototype.touchHandler = function (e) {\n var el = this.scrollEle;\n var distance;\n distance = e.distanceY;\n if (e.scrollDirection === 'Up') {\n el.scrollTop = el.scrollTop + distance;\n }\n else if (e.scrollDirection === 'Down') {\n el.scrollTop = el.scrollTop - distance;\n }\n };\n VScroll.prototype.arrowDisabling = function (addDisableCls, removeDisableCls) {\n if (this.isDevice) {\n var arrowEle = isNullOrUndefined(addDisableCls) ? removeDisableCls : addDisableCls;\n var arrowIcon = arrowEle.querySelector('.' + CLS_NAVARROW);\n if (isNullOrUndefined(addDisableCls)) {\n classList(arrowIcon, [CLS_NAVDOWNARROW], [CLS_NAVUPARROW]);\n }\n else {\n classList(arrowIcon, [CLS_NAVUPARROW], [CLS_NAVDOWNARROW]);\n }\n }\n else {\n addDisableCls.classList.add(CLS_DISABLE);\n addDisableCls.setAttribute('aria-disabled', 'true');\n addDisableCls.removeAttribute('tabindex');\n removeDisableCls.classList.remove(CLS_DISABLE);\n removeDisableCls.setAttribute('aria-disabled', 'false');\n removeDisableCls.setAttribute('tabindex', '0');\n }\n this.repeatScroll();\n };\n VScroll.prototype.scrollEventHandler = function (e) {\n var target = e.target;\n var height = target.offsetHeight;\n var rootEle = this.element;\n var navUpEle = this.element.querySelector('.' + CLS_VSCROLLNAVUP);\n var navDownEle = this.element.querySelector('.' + CLS_VSCROLLNAVDOWN);\n var upOverlay = this.element.querySelector('.' + CLS_UPOVERLAY);\n var downOverlay = this.element.querySelector('.' + CLS_DOWNOVERLAY);\n var scrollTop = target.scrollTop;\n if (scrollTop <= 0) {\n scrollTop = -scrollTop;\n }\n if (this.isDevice) {\n if (scrollTop < OVERLAY_MAXWID) {\n upOverlay.style.height = scrollTop + 'px';\n }\n else {\n upOverlay.style.height = '40px';\n }\n if ((target.scrollHeight - Math.ceil(height + scrollTop)) < OVERLAY_MAXWID) {\n downOverlay.style.height = (target.scrollHeight - Math.ceil(height + scrollTop)) + 'px';\n }\n else {\n downOverlay.style.height = '40px';\n }\n }\n if (scrollTop === 0) {\n this.arrowDisabling(navUpEle, navDownEle);\n }\n else if (Math.ceil(height + scrollTop + .1) >= target.scrollHeight) {\n this.arrowDisabling(navDownEle, navUpEle);\n }\n else {\n var disEle = this.element.querySelector('.' + CLS_VSCROLLNAV + '.' + CLS_DISABLE);\n if (disEle) {\n disEle.classList.remove(CLS_DISABLE);\n disEle.setAttribute('aria-disabled', 'false');\n disEle.setAttribute('tabindex', '0');\n }\n }\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of property that changed.\n * @param {VScrollModel} newProp\n * @param {VScrollModel} oldProp\n * @returns void\n * @private\n */\n VScroll.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'scrollStep':\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.element.classList.add(CLS_RTL) : this.element.classList.remove(CLS_RTL);\n break;\n }\n }\n };\n __decorate([\n Property(null)\n ], VScroll.prototype, \"scrollStep\", void 0);\n VScroll = __decorate([\n NotifyPropertyChanges\n ], VScroll);\n return VScroll;\n}(Component));\nexport { VScroll };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, ChildProperty, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { Event, EventHandler, KeyboardEvents, Touch } from '@syncfusion/ej2-base';\nimport { Animation } from '@syncfusion/ej2-base';\nimport { Browser, Collection, setValue, getValue, getUniqueID, getInstance, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { select, selectAll, closest, detach, append, rippleEffect, isVisible, Complex, addClass, removeClass } from '@syncfusion/ej2-base';\nimport { ListBase } from '@syncfusion/ej2-lists';\nimport { getZindexPartial, calculatePosition, isCollide, fit, Popup } from '@syncfusion/ej2-popups';\nimport { getScrollableParent } from '@syncfusion/ej2-popups';\nimport { HScroll } from '../common/h-scroll';\nimport { VScroll } from '../common/v-scroll';\nvar ENTER = 'enter';\nvar ESCAPE = 'escape';\nvar FOCUSED = 'e-focused';\nvar HEADER = 'e-menu-header';\nvar SELECTED = 'e-selected';\nvar SEPARATOR = 'e-separator';\nvar UPARROW = 'uparrow';\nvar DOWNARROW = 'downarrow';\nvar LEFTARROW = 'leftarrow';\nvar RIGHTARROW = 'rightarrow';\nvar HOME = 'home';\nvar END = 'end';\nvar CARET = 'e-caret';\nvar ITEM = 'e-menu-item';\nvar DISABLED = 'e-disabled';\nvar HIDE = 'e-menu-hide';\nvar ICONS = 'e-icons';\nvar RTL = 'e-rtl';\nvar POPUP = 'e-menu-popup';\n/**\n * Configures the field options of the Menu.\n */\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('id')\n ], FieldSettings.prototype, \"itemId\", void 0);\n __decorate([\n Property('parentId')\n ], FieldSettings.prototype, \"parentId\", void 0);\n __decorate([\n Property('text')\n ], FieldSettings.prototype, \"text\", void 0);\n __decorate([\n Property('iconCss')\n ], FieldSettings.prototype, \"iconCss\", void 0);\n __decorate([\n Property('url')\n ], FieldSettings.prototype, \"url\", void 0);\n __decorate([\n Property('separator')\n ], FieldSettings.prototype, \"separator\", void 0);\n __decorate([\n Property('items')\n ], FieldSettings.prototype, \"children\", void 0);\n return FieldSettings;\n}(ChildProperty));\nexport { FieldSettings };\n/**\n * Specifies menu items.\n */\nvar MenuItem = /** @class */ (function (_super) {\n __extends(MenuItem, _super);\n function MenuItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], MenuItem.prototype, \"iconCss\", void 0);\n __decorate([\n Property('')\n ], MenuItem.prototype, \"id\", void 0);\n __decorate([\n Property(false)\n ], MenuItem.prototype, \"separator\", void 0);\n __decorate([\n Collection([], MenuItem)\n ], MenuItem.prototype, \"items\", void 0);\n __decorate([\n Property('')\n ], MenuItem.prototype, \"text\", void 0);\n __decorate([\n Property('')\n ], MenuItem.prototype, \"url\", void 0);\n return MenuItem;\n}(ChildProperty));\nexport { MenuItem };\n/**\n * Animation configuration settings.\n */\nvar MenuAnimationSettings = /** @class */ (function (_super) {\n __extends(MenuAnimationSettings, _super);\n function MenuAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('SlideDown')\n ], MenuAnimationSettings.prototype, \"effect\", void 0);\n __decorate([\n Property(400)\n ], MenuAnimationSettings.prototype, \"duration\", void 0);\n __decorate([\n Property('ease')\n ], MenuAnimationSettings.prototype, \"easing\", void 0);\n return MenuAnimationSettings;\n}(ChildProperty));\nexport { MenuAnimationSettings };\n/**\n * @private\n * Base class for Menu and ContextMenu components.\n */\nvar MenuBase = /** @class */ (function (_super) {\n __extends(MenuBase, _super);\n /**\n * Constructor for creating the widget.\n * @private\n */\n function MenuBase(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.navIdx = [];\n _this.animation = new Animation({});\n _this.isTapHold = false;\n return _this;\n }\n /**\n * Initialized third party configuration settings.\n * @private\n */\n MenuBase.prototype.preRender = function () {\n if (this.element.tagName === 'EJS-CONTEXTMENU') {\n this.element.style.display = 'none';\n this.element.classList.remove('e-' + this.getModuleName());\n this.element.classList.remove('e-control');\n var ejInst = getValue('ej2_instances', this.element);\n var ul = this.createElement('ul');\n this.ngElement = this.element;\n this.element = ul;\n this.element.classList.add('e-control');\n this.element.classList.add('e-' + this.getModuleName());\n setValue('ej2_instances', ejInst, this.element);\n if (!this.element.id) {\n this.element.id = getUniqueID(this.getModuleName());\n }\n }\n if (this.element.tagName === 'EJS-MENU') {\n var ele = this.element;\n var ejInstance = getValue('ej2_instances', ele);\n var ul = this.createElement('ul');\n var wrapper = this.createElement('EJS-MENU', { className: 'e-' + this.getModuleName() + '-wrapper' });\n for (var idx = 0, len = ele.attributes.length; idx < len; idx++) {\n ul.setAttribute(ele.attributes[idx].nodeName, ele.attributes[idx].nodeValue);\n }\n ele.parentNode.insertBefore(wrapper, ele);\n detach(ele);\n ele = ul;\n wrapper.appendChild(ele);\n setValue('ej2_instances', ejInstance, ele);\n this.ngElement = wrapper;\n this.element = ele;\n if (!this.element.id) {\n this.element.id = getUniqueID(this.getModuleName());\n }\n }\n };\n /**\n * Initialize the control rendering\n * @private\n */\n MenuBase.prototype.render = function () {\n this.initialize();\n this.renderItems();\n this.wireEvents();\n };\n MenuBase.prototype.initialize = function () {\n var wrapper = this.getWrapper();\n if (!wrapper) {\n wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });\n if (this.isMenu) {\n this.element.parentElement.insertBefore(wrapper, this.element);\n }\n else {\n document.body.appendChild(wrapper);\n }\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.split(' '));\n }\n if (this.enableRtl) {\n wrapper.classList.add(RTL);\n }\n wrapper.appendChild(this.element);\n };\n MenuBase.prototype.renderItems = function () {\n if (!this.items.length) {\n var items = ListBase.createJsonFromElement(this.element, { fields: { child: 'items' } });\n this.setProperties({ items: items }, true);\n this.element.innerHTML = '';\n }\n var ul = this.createItems(this.items);\n append(Array.prototype.slice.call(ul.children), this.element);\n this.element.classList.add('e-menu-parent');\n var wrapper = this.getWrapper();\n this.element.classList.contains('e-vertical') ?\n this.addScrolling(wrapper, this.element, 'vscroll', wrapper.offsetHeight, this.element.offsetHeight)\n : this.addScrolling(wrapper, this.element, 'hscroll', wrapper.offsetWidth, this.element.offsetWidth);\n };\n MenuBase.prototype.wireEvents = function () {\n var wrapper = this.getWrapper();\n if (this.target) {\n var target = void 0;\n var targetElems = selectAll(this.target);\n for (var i = 0, len = targetElems.length; i < len; i++) {\n target = targetElems[i];\n if (Browser.isIos) {\n new Touch(target, { tapHold: this.touchHandler.bind(this) });\n }\n else {\n EventHandler.add(target, 'contextmenu', this.cmenuHandler, this);\n }\n }\n this.targetElement = target;\n for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {\n var parent_1 = _a[_i];\n EventHandler.add(parent_1, 'scroll', this.scrollHandler, this);\n }\n }\n if (!Browser.isDevice) {\n this.delegateMoverHandler = this.moverHandler.bind(this);\n this.delegateMouseDownHandler = this.mouseDownHandler.bind(this);\n EventHandler.add(this.isMenu ? document : wrapper, 'mouseover', this.delegateMoverHandler, this);\n EventHandler.add(document, 'mousedown', this.delegateMouseDownHandler, this);\n }\n this.delegateClickHandler = this.clickHandler.bind(this);\n EventHandler.add(document, 'click', this.delegateClickHandler, this);\n this.wireKeyboardEvent(wrapper);\n this.rippleFn = rippleEffect(wrapper, { selector: '.' + ITEM });\n };\n MenuBase.prototype.wireKeyboardEvent = function (element) {\n var keyConfigs = {\n downarrow: DOWNARROW,\n uparrow: UPARROW,\n enter: ENTER,\n leftarrow: LEFTARROW,\n rightarrow: RIGHTARROW,\n escape: ESCAPE\n };\n if (this.isMenu) {\n keyConfigs.home = HOME;\n keyConfigs.end = END;\n }\n new KeyboardEvents(element, {\n keyAction: this.keyBoardHandler.bind(this),\n keyConfigs: keyConfigs\n });\n };\n MenuBase.prototype.mouseDownHandler = function (e) {\n if (closest(e.target, '.e-' + this.getModuleName() + '-wrapper') !== this.getWrapper()\n && !closest(e.target, '.e-' + this.getModuleName() + '-popup')) {\n this.closeMenu(this.navIdx.length, e);\n }\n };\n MenuBase.prototype.keyBoardHandler = function (e) {\n var actionName = '';\n var trgt = e.target;\n var actionNeeded = this.isMenu && !this.element.classList.contains('e-vertical') && this.navIdx.length < 1;\n e.preventDefault();\n if (this.enableScrolling && e.keyCode === 13 && trgt.classList.contains('e-scroll-nav')) {\n this.removeLIStateByClass([FOCUSED, SELECTED], [closest(trgt, '.e-' + this.getModuleName() + '-wrapper')]);\n }\n if (actionNeeded) {\n switch (e.action) {\n case RIGHTARROW:\n actionName = RIGHTARROW;\n e.action = DOWNARROW;\n break;\n case LEFTARROW:\n actionName = LEFTARROW;\n e.action = UPARROW;\n break;\n case DOWNARROW:\n actionName = DOWNARROW;\n e.action = RIGHTARROW;\n break;\n case UPARROW:\n actionName = UPARROW;\n e.action = '';\n break;\n }\n }\n else if (this.enableRtl) {\n switch (e.action) {\n case LEFTARROW:\n actionNeeded = true;\n actionName = LEFTARROW;\n e.action = RIGHTARROW;\n break;\n case RIGHTARROW:\n actionNeeded = true;\n actionName = RIGHTARROW;\n e.action = LEFTARROW;\n break;\n }\n }\n switch (e.action) {\n case DOWNARROW:\n case UPARROW:\n case END:\n case HOME:\n this.upDownKeyHandler(e);\n break;\n case RIGHTARROW:\n this.rightEnterKeyHandler(e);\n break;\n case LEFTARROW:\n this.leftEscKeyHandler(e);\n break;\n case ENTER:\n this.rightEnterKeyHandler(e);\n break;\n case ESCAPE:\n this.leftEscKeyHandler(e);\n break;\n }\n if (actionNeeded) {\n e.action = actionName;\n }\n };\n MenuBase.prototype.upDownKeyHandler = function (e) {\n var cul = this.getUlByNavIdx();\n var defaultIdx = (e.action === DOWNARROW || e.action === HOME) ? 0 : cul.childElementCount - 1;\n var fliIdx = defaultIdx;\n var fli = this.getLIByClass(cul, FOCUSED);\n if (fli) {\n if (e.action !== END && e.action !== HOME) {\n fliIdx = this.getIdx(cul, fli);\n }\n fli.classList.remove(FOCUSED);\n if (e.action !== END && e.action !== HOME) {\n e.action === DOWNARROW ? fliIdx++ : fliIdx--;\n if (fliIdx === (e.action === DOWNARROW ? cul.childElementCount : -1)) {\n fliIdx = defaultIdx;\n }\n }\n }\n var cli = cul.children[fliIdx];\n fliIdx = this.isValidLI(cli, fliIdx, e.action);\n cul.children[fliIdx].classList.add(FOCUSED);\n cul.children[fliIdx].focus();\n };\n MenuBase.prototype.isValidLI = function (cli, index, action) {\n var wrapper = this.getWrapper();\n var cul = this.getUlByNavIdx();\n if (cli.classList.contains(SEPARATOR) || cli.classList.contains(DISABLED) || cli.classList.contains(HIDE)) {\n ((action === DOWNARROW) || (action === RIGHTARROW)) ? index++ : index--;\n }\n cli = cul.children[index];\n if (cli.classList.contains(SEPARATOR) || cli.classList.contains(DISABLED) || cli.classList.contains(HIDE)) {\n index = this.isValidLI(cli, index, action);\n }\n return index;\n };\n MenuBase.prototype.getUlByNavIdx = function (navIdxLen) {\n if (navIdxLen === void 0) { navIdxLen = this.navIdx.length; }\n if (this.isMenu) {\n var popup = [this.getWrapper()].concat([].slice.call(selectAll('.' + POPUP)))[navIdxLen];\n return isNullOrUndefined(popup) ? null : select('.e-menu-parent', popup);\n }\n else {\n return this.getWrapper().children[navIdxLen];\n }\n };\n MenuBase.prototype.rightEnterKeyHandler = function (e) {\n var eventArgs;\n var cul = this.getUlByNavIdx();\n var fli = this.getLIByClass(cul, FOCUSED);\n if (fli) {\n var fliIdx = this.getIdx(cul, fli);\n var navIdx = this.navIdx.concat(fliIdx);\n var index = void 0;\n var item = this.getItem(navIdx);\n if (item.items.length) {\n this.navIdx.push(fliIdx);\n this.openMenu(fli, item, null, null, e);\n fli.classList.remove(FOCUSED);\n if (this.isMenu && this.navIdx.length === 1) {\n this.removeLIStateByClass([SELECTED], [this.getWrapper()]);\n }\n fli.classList.add(SELECTED);\n if (e.action === ENTER) {\n eventArgs = { element: fli, item: item };\n this.trigger('select', eventArgs);\n }\n fli.focus();\n cul = this.getUlByNavIdx();\n index = this.isValidLI(cul.children[0], 0, e.action);\n cul.children[index].classList.add(FOCUSED);\n cul.children[index].focus();\n }\n else {\n if (e.action === ENTER) {\n if (this.isMenu && this.navIdx.length === 0) {\n this.removeLIStateByClass([SELECTED], [this.getWrapper()]);\n }\n else {\n fli.classList.remove(FOCUSED);\n }\n fli.classList.add(SELECTED);\n eventArgs = { element: fli, item: item };\n this.trigger('select', eventArgs);\n this.closeMenu(null, e);\n }\n }\n }\n };\n MenuBase.prototype.leftEscKeyHandler = function (e) {\n if (this.navIdx.length) {\n this.closeMenu(this.navIdx.length, e);\n var cul = this.getUlByNavIdx();\n var sli = this.getLIByClass(cul, SELECTED);\n if (sli) {\n sli.setAttribute('aria-expanded', 'false');\n sli.classList.remove(SELECTED);\n sli.classList.add(FOCUSED);\n sli.focus();\n }\n }\n else {\n if (e.action === ESCAPE) {\n this.closeMenu(null, e);\n }\n }\n };\n MenuBase.prototype.scrollHandler = function (e) {\n this.closeMenu(null, e);\n };\n MenuBase.prototype.touchHandler = function (e) {\n this.isTapHold = true;\n this.cmenuHandler(e.originalEvent);\n };\n MenuBase.prototype.cmenuHandler = function (e) {\n e.preventDefault();\n this.closeMenu(null, e);\n if (this.canOpen(e.target)) {\n if (e.changedTouches) {\n this.openMenu(null, null, e.changedTouches[0].pageY + 1, e.changedTouches[0].pageX + 1, e);\n }\n else {\n this.openMenu(null, null, e.pageY + 1, e.pageX + 1, e);\n }\n }\n };\n MenuBase.prototype.closeMenu = function (ulIndex, e) {\n if (ulIndex === void 0) { ulIndex = 0; }\n if (e === void 0) { e = null; }\n if (this.isMenuVisible()) {\n var ul = void 0;\n var sli = void 0;\n var item = void 0;\n var items = void 0;\n var closeArgs = void 0;\n var beforeCloseArgs = void 0;\n var popupEle = void 0;\n var popupObj = void 0;\n var wrapper = this.getWrapper();\n var popups = this.getPopups();\n for (var cnt = this.isMenu ? popups.length + 1 : wrapper.childElementCount; cnt > ulIndex; cnt--) {\n ul = this.isMenu && cnt !== 1 ? select('.e-ul', popups[cnt - 2])\n : selectAll('.e-menu-parent', wrapper)[cnt - 1];\n if (this.isMenu && ul.classList.contains('e-menu')) {\n sli = this.getLIByClass(ul, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n break;\n }\n item = this.navIdx.length ? this.getItem(this.navIdx) : null;\n items = item ? item.items : this.items;\n beforeCloseArgs = { element: ul, parentItem: item, items: items, event: e, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs);\n if (!beforeCloseArgs.cancel) {\n if (this.isMenu) {\n popupEle = closest(ul, '.' + POPUP);\n this.unWireKeyboardEvent(popupEle);\n this.destroyScrollObj(getInstance(popupEle.children[0], VScroll), popupEle.children[0]);\n popupObj = getInstance(popupEle, Popup);\n popupObj.hide();\n popupObj.destroy();\n detach(popupEle);\n }\n else {\n this.toggleAnimation(ul, false);\n }\n this.navIdx.length = ulIndex ? ulIndex - 1 : ulIndex;\n closeArgs = { element: ul, parentItem: item, items: items };\n this.trigger('onClose', closeArgs);\n }\n }\n }\n };\n MenuBase.prototype.destroyScrollObj = function (scrollObj, scrollEle) {\n if (scrollObj) {\n scrollObj.destroy();\n scrollEle.parentElement.appendChild(select('.e-menu-parent', scrollEle));\n detach(scrollEle);\n }\n };\n MenuBase.prototype.getPopups = function () {\n return [].slice.call(document.querySelectorAll('.' + POPUP));\n };\n MenuBase.prototype.isMenuVisible = function () {\n return (this.navIdx.length > 0 || (this.element.classList.contains('e-contextmenu') && isVisible(this.element).valueOf()));\n };\n MenuBase.prototype.canOpen = function (target) {\n var canOpen = true;\n if (this.filter) {\n canOpen = false;\n var filter = this.filter.split(' ');\n for (var i = 0, len = filter.length; i < len; i++) {\n if (closest(target, '.' + filter[i])) {\n canOpen = true;\n break;\n }\n }\n }\n return canOpen;\n };\n MenuBase.prototype.openMenu = function (li, item, top, left, e, target) {\n var _this = this;\n if (top === void 0) { top = 0; }\n if (left === void 0) { left = 0; }\n if (e === void 0) { e = null; }\n if (target === void 0) { target = this.targetElement; }\n var ul;\n var popupObj;\n var popupWrapper;\n var eventArgs;\n var wrapper = this.getWrapper();\n if (li) {\n ul = this.createItems(item[this.getField('children', this.navIdx.length - 1)]);\n if (!this.isMenu && Browser.isDevice) {\n wrapper.lastChild.style.display = 'none';\n var data = {\n text: item[this.getField('text')].toString(), iconCss: ICONS + ' e-previous'\n };\n var hdata = new MenuItem(this.items[0], null, data, true);\n var hli = this.createItems([hdata]).children[0];\n hli.classList.add(HEADER);\n ul.insertBefore(hli, ul.children[0]);\n }\n if (this.isMenu) {\n popupWrapper = this.createElement('div', {\n className: 'e-' + this.getModuleName() + '-wrapper ' + POPUP, id: li.id + '-menu-popup'\n });\n document.body.appendChild(popupWrapper);\n var isNestedOrVerticalMenu = this.element.classList.contains('e-vertical') || this.navIdx.length !== 1;\n popupObj = new Popup(popupWrapper, {\n relateTo: li,\n collision: { X: isNestedOrVerticalMenu || this.enableRtl ? 'none' : 'flip', Y: 'fit' },\n position: isNestedOrVerticalMenu ? { X: 'right', Y: 'top' } : { X: 'left', Y: 'bottom' },\n targetType: 'relative',\n enableRtl: this.enableRtl,\n content: ul,\n open: function () {\n var scrollEle = select('.e-menu-vscroll', popupObj.element);\n if (scrollEle) {\n scrollEle.style.height = 'inherit';\n scrollEle.style.maxHeight = '';\n }\n var ul = select('.e-ul', popupObj.element);\n popupObj.element.style.maxHeight = '';\n ul.focus();\n _this.triggerOpen(ul);\n }\n });\n if (this.cssClass) {\n addClass([popupWrapper], this.cssClass.split(' '));\n }\n popupObj.hide();\n eventArgs = this.triggerBeforeOpen(li, ul, item, e, 0, 0);\n top = eventArgs.top;\n left = eventArgs.left;\n popupWrapper.style.display = 'block';\n popupWrapper.style.maxHeight = popupWrapper.getBoundingClientRect().height + 'px';\n this.addScrolling(popupWrapper, ul, 'vscroll', popupWrapper.offsetHeight, ul.offsetHeight);\n this.checkScrollOffset(e);\n var collide = void 0;\n if (!left && !top) {\n popupObj.refreshPosition(li, true);\n left = parseInt(popupWrapper.style.left, 10);\n top = parseInt(popupWrapper.style.top, 10);\n if (this.enableRtl) {\n left = isNestedOrVerticalMenu ? left - popupWrapper.offsetWidth - li.parentElement.offsetWidth\n : left - popupWrapper.offsetWidth + li.offsetWidth;\n }\n collide = isCollide(popupWrapper, null, left, top);\n if ((isNestedOrVerticalMenu || this.enableRtl) && (collide.indexOf('right') > -1 || collide.indexOf('left') > -1)) {\n popupObj.collision.X = 'none';\n left = this.enableRtl ? calculatePosition(li, isNestedOrVerticalMenu ? 'right' : 'left', 'top').left : left -\n popupWrapper.offsetWidth - closest(li, '.e-' + this.getModuleName() + '-wrapper').offsetWidth;\n }\n collide = isCollide(popupWrapper, null, left, top);\n if (collide.indexOf('left') > -1 || collide.indexOf('right') > -1) {\n left = this.callFit(popupWrapper, true, false, top, left).left;\n }\n popupWrapper.style.left = left + 'px';\n }\n else {\n popupObj.collision = { X: 'none', Y: 'none' };\n }\n popupWrapper.style.display = '';\n }\n else {\n ul.style.zIndex = this.element.style.zIndex;\n wrapper.appendChild(ul);\n eventArgs = this.triggerBeforeOpen(li, ul, item, e, top, left);\n top = eventArgs.top;\n left = eventArgs.left;\n }\n }\n else {\n ul = this.element;\n ul.style.zIndex = getZindexPartial(target ? target : this.element).toString();\n eventArgs = this.triggerBeforeOpen(li, ul, item, e, top, left);\n top = eventArgs.top;\n left = eventArgs.left;\n }\n if (eventArgs.cancel) {\n if (this.isMenu) {\n popupObj.destroy();\n detach(popupWrapper);\n }\n this.navIdx.pop();\n }\n else {\n if (this.isMenu) {\n this.wireKeyboardEvent(popupWrapper);\n rippleEffect(popupWrapper, { selector: '.' + ITEM });\n popupWrapper.style.left = left + 'px';\n popupWrapper.style.top = top + 'px';\n var animationOptions = this.animationSettings.effect !== 'None' ? {\n name: this.animationSettings.effect, duration: this.animationSettings.duration,\n timingFunction: this.animationSettings.easing\n } : null;\n popupObj.show(animationOptions, li);\n }\n else {\n this.setPosition(li, ul, top, left);\n this.toggleAnimation(ul);\n }\n }\n };\n MenuBase.prototype.callFit = function (element, x, y, top, left) {\n return fit(element, null, { X: x, Y: y }, { top: top, left: left });\n };\n MenuBase.prototype.triggerBeforeOpen = function (li, ul, item, e, top, left) {\n var navIdx = this.getIndex(li ? li.id : null, true);\n var items = li ? item[this.getField('children', this.navIdx.length - 1)] : this.items;\n var eventArgs = {\n element: ul, items: items, parentItem: item, event: e, cancel: false, top: top, left: left\n };\n this.trigger('beforeOpen', eventArgs);\n return eventArgs;\n };\n MenuBase.prototype.checkScrollOffset = function (e) {\n var wrapper = this.getWrapper();\n if (wrapper.children[0].classList.contains('e-menu-hscroll') && this.navIdx.length === 1) {\n var trgt = isNullOrUndefined(e) ? this.element : closest(e.target, '.' + ITEM);\n var offsetEle = select('.e-hscroll-bar', wrapper);\n var offsetLeft = void 0;\n var offsetRight = void 0;\n if (offsetEle.scrollLeft > trgt.offsetLeft) {\n offsetEle.scrollLeft -= (offsetEle.scrollLeft - trgt.offsetLeft);\n }\n offsetLeft = offsetEle.scrollLeft + offsetEle.offsetWidth;\n offsetRight = trgt.offsetLeft + trgt.offsetWidth;\n if (offsetLeft < offsetRight) {\n offsetEle.scrollLeft += (offsetRight - offsetLeft);\n }\n }\n };\n MenuBase.prototype.addScrolling = function (wrapper, ul, scrollType, wrapperOffset, contentOffset) {\n if (this.enableScrolling && wrapperOffset < contentOffset) {\n var scrollEle = this.createElement('div', { className: 'e-menu-' + scrollType });\n wrapper.appendChild(scrollEle);\n scrollEle.appendChild(ul);\n scrollEle.style.maxHeight = wrapper.style.maxHeight;\n var scrollObj = void 0;\n wrapper.style.overflow = 'hidden';\n if (scrollType === 'vscroll') {\n scrollObj = new VScroll({ enableRtl: this.enableRtl }, scrollEle);\n scrollObj.scrollStep = select('.e-' + scrollType + '-bar', wrapper).offsetHeight / 2;\n }\n else {\n scrollObj = new HScroll({ enableRtl: this.enableRtl }, scrollEle);\n scrollObj.scrollStep = select('.e-' + scrollType + '-bar', wrapper).offsetWidth;\n }\n }\n };\n MenuBase.prototype.setPosition = function (li, ul, top, left) {\n var px = 'px';\n this.toggleVisiblity(ul);\n if (ul === this.element || (!isNullOrUndefined(left) && !isNullOrUndefined(top))) {\n var collide = isCollide(ul, null, left, top);\n if (collide.indexOf('right') > -1) {\n left = left - ul.offsetWidth;\n }\n if (collide.indexOf('bottom') > -1) {\n var offset = this.callFit(ul, false, true, top, left);\n top = offset.top - 20;\n }\n collide = isCollide(ul, null, left, top);\n if (collide.indexOf('left') > -1) {\n var offset = this.callFit(ul, true, false, top, left);\n left = offset.left;\n }\n }\n else {\n if (Browser.isDevice) {\n top = Number(this.element.style.top.replace(px, ''));\n left = Number(this.element.style.left.replace(px, ''));\n }\n else {\n var x = this.enableRtl ? 'left' : 'right';\n var offset = calculatePosition(li, x, 'top');\n top = offset.top;\n left = offset.left;\n var collide = isCollide(ul, null, this.enableRtl ? left - ul.offsetWidth : left, top);\n var xCollision = collide.indexOf('left') > -1 || collide.indexOf('right') > -1;\n if (xCollision) {\n offset = calculatePosition(li, this.enableRtl ? 'right' : 'left', 'top');\n left = offset.left;\n }\n if (this.enableRtl || xCollision) {\n left = (this.enableRtl && xCollision) ? left : left - ul.offsetWidth;\n }\n if (collide.indexOf('bottom') > -1) {\n offset = this.callFit(ul, false, true, top, left);\n top = offset.top;\n }\n }\n }\n this.toggleVisiblity(ul, false);\n ul.style.top = top + px;\n ul.style.left = left + px;\n };\n MenuBase.prototype.toggleVisiblity = function (ul, isVisible) {\n if (isVisible === void 0) { isVisible = true; }\n ul.style.visibility = isVisible ? 'hidden' : '';\n ul.style.display = isVisible ? 'block' : 'none';\n };\n MenuBase.prototype.createItems = function (items) {\n var _this = this;\n var level = this.navIdx ? this.navIdx.length : 0;\n var showIcon = this.hasField(items, this.getField('iconCss', level));\n var id = 'id';\n var listBaseOptions = {\n showIcon: showIcon,\n moduleName: 'menu',\n fields: this.getFields(level),\n template: this.template,\n itemCreating: function (args) {\n if (!args.curData[args.fields[id]]) {\n args.curData[args.fields[id]] = getUniqueID('menuitem');\n _this.clearChanges();\n }\n args.curData.htmlAttributes = {\n role: 'menuitem',\n tabindex: '-1'\n };\n if (_this.isMenu && !args.curData[_this.getField('separator', level)]) {\n args.curData.htmlAttributes['aria-label'] = args.curData[args.fields.text];\n }\n },\n itemCreated: function (args) {\n if (args.curData[_this.getField('separator', level)]) {\n args.item.classList.add(SEPARATOR);\n args.item.removeAttribute('role');\n }\n if (showIcon && !args.curData[args.fields.iconCss]\n && !args.curData[_this.getField('separator', level)]) {\n args.item.classList.add('e-blankicon');\n }\n if (args.curData[args.fields.child]\n && args.curData[args.fields.child].length) {\n var span = _this.createElement('span', { className: ICONS + ' ' + CARET });\n args.item.appendChild(span);\n args.item.setAttribute('aria-haspopup', 'true');\n args.item.setAttribute('aria-expanded', 'false');\n if (!_this.isMenu) {\n args.item.removeAttribute('role');\n }\n args.item.classList.add('e-menu-caret-icon');\n }\n if (_this.isMenu && _this.template) {\n args.item.setAttribute('id', args.curData[args.fields.id].toString());\n args.item.removeAttribute('data-uid');\n }\n var eventArgs = { item: args.curData, element: args.item };\n _this.trigger('beforeItemRender', eventArgs);\n }\n };\n var ul = ListBase.createList(this.createElement, items, listBaseOptions, !this.template);\n ul.setAttribute('tabindex', '0');\n if (this.isMenu) {\n ul.setAttribute('role', 'menu');\n }\n return ul;\n };\n MenuBase.prototype.moverHandler = function (e) {\n var wrapper = this.getWrapper();\n var trgt = e.target;\n var cli = this.getLI(trgt);\n if (cli && closest(cli, '.e-' + this.getModuleName() + '-wrapper')) {\n this.removeLIStateByClass([FOCUSED], this.isMenu ? [wrapper].concat(this.getPopups()) : [wrapper]);\n cli.classList.add(FOCUSED);\n if (!this.showItemOnClick) {\n this.clickHandler(e);\n }\n }\n if (this.isMenu) {\n if ((trgt.parentElement !== wrapper && !closest(trgt, '.e-' + this.getModuleName() + '-popup')) && !cli) {\n this.removeLIStateByClass([FOCUSED, SELECTED], [wrapper]);\n if (this.navIdx.length) {\n this.closeMenu(null, e);\n }\n }\n wrapper = closest(trgt, '.e-menu-vscroll');\n if (trgt.tagName === 'DIV' && wrapper) {\n this.removeLIStateByClass([FOCUSED, SELECTED], [wrapper]);\n }\n }\n };\n MenuBase.prototype.removeLIStateByClass = function (classList, element) {\n var li;\n var _loop_1 = function (i) {\n classList.forEach(function (className) {\n li = select('.' + className, element[i]);\n if (li) {\n li.classList.remove(className);\n }\n });\n };\n for (var i = 0; i < element.length; i++) {\n _loop_1(i);\n }\n };\n MenuBase.prototype.getField = function (propName, level) {\n if (level === void 0) { level = 0; }\n var fieldName = this.fields[propName];\n return typeof fieldName === 'string' ? fieldName :\n (!fieldName[level] ? fieldName[fieldName.length - 1].toString()\n : fieldName[level].toString());\n };\n MenuBase.prototype.getFields = function (level) {\n if (level === void 0) { level = 0; }\n return {\n id: this.getField('itemId', level),\n iconCss: this.getField('iconCss', level),\n text: this.getField('text', level),\n url: this.getField('url', level),\n child: this.getField('children', level),\n separator: this.getField('separator', level)\n };\n };\n MenuBase.prototype.hasField = function (items, field) {\n for (var i = 0, len = items.length; i < len; i++) {\n if (items[i][field]) {\n return true;\n }\n }\n return false;\n };\n MenuBase.prototype.clickHandler = function (e) {\n if (this.isTapHold) {\n this.isTapHold = false;\n }\n else {\n var wrapper = this.getWrapper();\n var trgt = e.target;\n var cli = this.getLI(trgt);\n var cliWrapper = cli ? closest(cli, '.e-' + this.getModuleName() + '-wrapper') : null;\n var isInstLI = cli && cliWrapper && (wrapper.firstElementChild.id === cliWrapper.firstElementChild.id || this.isMenu);\n if (isInstLI && e.type === 'click' && !cli.classList.contains(HEADER)) {\n this.setLISelected(cli);\n var navIdx = this.getIndex(cli.id, true);\n var item = this.getItem(navIdx);\n var eventArgs = { element: cli, item: item };\n this.trigger('select', eventArgs);\n }\n if (isInstLI && (e.type === 'mouseover' || Browser.isDevice || this.showItemOnClick)) {\n var ul = void 0;\n if (cli.classList.contains(HEADER)) {\n ul = wrapper.children[this.navIdx.length - 1];\n this.toggleAnimation(ul);\n var sli = this.getLIByClass(ul, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n detach(cli.parentNode);\n this.navIdx.pop();\n }\n else {\n if (!cli.classList.contains(SEPARATOR)) {\n var showSubMenu = true;\n var cul = cli.parentNode;\n var cliIdx = this.getIdx(cul, cli);\n if (this.isMenu || !Browser.isDevice) {\n var culIdx = this.isMenu ? Array.prototype.indexOf.call([wrapper].concat(this.getPopups()), closest(cul, '.' + 'e-' + this.getModuleName() + '-wrapper'))\n : this.getIdx(wrapper, cul);\n if (this.navIdx[culIdx] === cliIdx) {\n showSubMenu = false;\n }\n if (culIdx !== this.navIdx.length && (e.type !== 'mouseover' || showSubMenu)) {\n var sli = this.getLIByClass(cul, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n this.closeMenu(culIdx + 1, e);\n }\n }\n if (showSubMenu) {\n var idx = this.navIdx.concat(cliIdx);\n var item = this.getItem(idx);\n if (item[this.getField('children', idx.length - 1)] &&\n item[this.getField('children', idx.length - 1)].length) {\n if (e.type === 'mouseover' || (Browser.isDevice && this.isMenu)) {\n this.setLISelected(cli);\n }\n cli.setAttribute('aria-expanded', 'true');\n this.navIdx.push(cliIdx);\n this.openMenu(cli, item, null, null, e);\n }\n else {\n if (e.type !== 'mouseover') {\n this.closeMenu(null, e);\n }\n }\n }\n }\n }\n }\n else {\n if (this.isMenu && trgt.tagName === 'DIV' && this.navIdx.length && closest(trgt, '.e-menu-vscroll')) {\n var popupEle = closest(trgt, '.' + POPUP);\n var cIdx = Array.prototype.indexOf.call(this.getPopups(), popupEle) + 1;\n if (cIdx < this.navIdx.length) {\n this.closeMenu(cIdx + 1, e);\n this.removeLIStateByClass([FOCUSED, SELECTED], [popupEle]);\n }\n }\n else {\n if (trgt.tagName !== 'UL' || trgt.parentElement !== wrapper) {\n if (!cli || !cli.querySelector('.' + CARET)) {\n this.closeMenu(null, e);\n }\n }\n }\n }\n }\n };\n MenuBase.prototype.setLISelected = function (li) {\n var sli = this.getLIByClass(li.parentElement, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n if (!this.isMenu) {\n li.classList.remove(FOCUSED);\n }\n li.classList.add(SELECTED);\n };\n MenuBase.prototype.getLIByClass = function (ul, classname) {\n for (var i = 0, len = ul.children.length; i < len; i++) {\n if (ul.children[i].classList.contains(classname)) {\n return ul.children[i];\n }\n }\n return null;\n };\n MenuBase.prototype.getItem = function (navIdx) {\n navIdx = navIdx.slice();\n var idx = navIdx.pop();\n var items = this.getItems(navIdx);\n return items[idx];\n };\n MenuBase.prototype.getItems = function (navIdx) {\n var items = this.items;\n for (var i = 0; i < navIdx.length; i++) {\n items = items[navIdx[i]][this.getField('children', i)];\n }\n return items;\n };\n MenuBase.prototype.getIdx = function (ul, li, skipHdr) {\n if (skipHdr === void 0) { skipHdr = true; }\n var idx = Array.prototype.indexOf.call(ul.children, li);\n if (skipHdr && ul.children[0].classList.contains(HEADER)) {\n idx--;\n }\n return idx;\n };\n MenuBase.prototype.getLI = function (elem) {\n if (elem.tagName === 'LI' && elem.classList.contains('e-menu-item')) {\n return elem;\n }\n return closest(elem, 'li.e-menu-item');\n };\n /**\n * Called internally if any of the property value changed\n * @private\n * @param {MenuBaseModel} newProp\n * @param {MenuBaseModel} oldProp\n * @returns void\n */\n MenuBase.prototype.onPropertyChanged = function (newProp, oldProp) {\n var _this = this;\n var wrapper = this.getWrapper();\n var _loop_2 = function (prop) {\n switch (prop) {\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([wrapper], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([wrapper], newProp.cssClass.split(' '));\n }\n break;\n case 'enableRtl':\n wrapper.classList.toggle(RTL);\n break;\n case 'showItemOnClick':\n this_1.unWireEvents();\n this_1.showItemOnClick = newProp.showItemOnClick;\n this_1.wireEvents();\n break;\n case 'enableScrolling':\n if (newProp.enableScrolling) {\n var ul_1;\n this_1.element.classList.contains('e-vertical') ?\n this_1.addScrolling(wrapper, this_1.element, 'vscroll', wrapper.offsetHeight, this_1.element.offsetHeight)\n : this_1.addScrolling(wrapper, this_1.element, 'hscroll', wrapper.offsetWidth, this_1.element.offsetWidth);\n this_1.getPopups().forEach(function (wrapper) {\n ul_1 = select('.e-ul', wrapper);\n _this.addScrolling(wrapper, ul_1, 'vscroll', wrapper.offsetHeight, ul_1.offsetHeight);\n });\n }\n else {\n var ul_2 = wrapper.children[0];\n this_1.element.classList.contains('e-vertical') ? this_1.destroyScrollObj(getInstance(ul_2, VScroll), ul_2)\n : this_1.destroyScrollObj(getInstance(ul_2, HScroll), ul_2);\n wrapper.style.overflow = '';\n wrapper.appendChild(this_1.element);\n this_1.getPopups().forEach(function (wrapper) {\n ul_2 = wrapper.children[0];\n _this.destroyScrollObj(getInstance(ul_2, VScroll), ul_2);\n wrapper.style.overflow = '';\n });\n }\n break;\n case 'items':\n var idx = void 0;\n var navIdx = void 0;\n var item = void 0;\n if (!Object.keys(oldProp.items).length) {\n var ul_3 = this_1.element;\n ul_3.innerHTML = '';\n var lis = [].slice.call(this_1.createItems(newProp.items).children);\n lis.forEach(function (li) {\n ul_3.appendChild(li);\n });\n for (var i = 1, count = wrapper.childElementCount; i < count; i++) {\n detach(wrapper.lastElementChild);\n }\n this_1.navIdx = [];\n }\n else {\n var keys = Object.keys(newProp.items);\n for (var i = 0; i < keys.length; i++) {\n navIdx = this_1.getChangedItemIndex(newProp, [], Number(keys[i]));\n if (navIdx.length <= this_1.getWrapper().children.length) {\n idx = navIdx.pop();\n item = this_1.getItems(navIdx);\n this_1.insertAfter([item[idx]], item[idx].text);\n this_1.removeItem(item, navIdx, idx);\n }\n navIdx.length = 0;\n }\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_2(prop);\n }\n };\n MenuBase.prototype.getChangedItemIndex = function (newProp, index, idx) {\n index.push(idx);\n var key = Object.keys(newProp.items[idx]).pop();\n if (key === 'items') {\n var item = newProp.items[idx];\n this.getChangedItemIndex(item, index, Number(Object.keys(item.items).pop()));\n }\n else {\n if (key === 'isParentArray' && index.length > 1) {\n index.pop();\n }\n }\n return index;\n };\n MenuBase.prototype.removeItem = function (item, navIdx, idx) {\n item.splice(idx, 1);\n var uls = this.getWrapper().children;\n if (navIdx.length < uls.length) {\n detach(uls[navIdx.length].children[idx]);\n }\n };\n /**\n * Used to unwire the bind events.\n * @private\n */\n MenuBase.prototype.unWireEvents = function () {\n var wrapper = this.getWrapper();\n if (this.target) {\n var target = void 0;\n var touchModule = void 0;\n var targetElems = selectAll(this.target);\n for (var i = 0, len = targetElems.length; i < len; i++) {\n target = targetElems[i];\n if (Browser.isIos) {\n touchModule = getInstance(target, Touch);\n if (touchModule) {\n touchModule.destroy();\n }\n }\n else {\n EventHandler.remove(target, 'contextmenu', this.cmenuHandler);\n }\n }\n for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {\n var parent_2 = _a[_i];\n EventHandler.remove(parent_2, 'scroll', this.scrollHandler);\n }\n }\n if (!Browser.isDevice) {\n EventHandler.remove(this.isMenu ? document : wrapper, 'mouseover', this.delegateMoverHandler);\n EventHandler.remove(document, 'mousedown', this.delegateMouseDownHandler);\n }\n EventHandler.remove(document, 'click', this.delegateClickHandler);\n this.unWireKeyboardEvent(wrapper);\n this.rippleFn();\n };\n MenuBase.prototype.unWireKeyboardEvent = function (element) {\n var keyboardModule = getInstance(element, KeyboardEvents);\n if (keyboardModule) {\n keyboardModule.destroy();\n }\n };\n MenuBase.prototype.toggleAnimation = function (ul, isMenuOpen) {\n var _this = this;\n if (isMenuOpen === void 0) { isMenuOpen = true; }\n if (this.animationSettings.effect === 'None' || !isMenuOpen) {\n this.end(ul, isMenuOpen);\n }\n else {\n this.animation.animate(ul, {\n name: this.animationSettings.effect,\n duration: this.animationSettings.duration,\n timingFunction: this.animationSettings.easing,\n begin: function (options) {\n options.element.style.display = 'block';\n options.element.style.maxHeight = options.element.getBoundingClientRect().height + 'px';\n },\n end: function (options) {\n _this.end(options.element, isMenuOpen);\n }\n });\n }\n };\n MenuBase.prototype.triggerOpen = function (ul) {\n var item = this.navIdx.length ? this.getItem(this.navIdx) : null;\n var eventArgs = {\n element: ul, parentItem: item, items: item ? item.items : this.items\n };\n this.trigger('onOpen', eventArgs);\n };\n MenuBase.prototype.end = function (ul, isMenuOpen) {\n if (isMenuOpen) {\n ul.style.display = 'block';\n ul.style.maxHeight = '';\n this.triggerOpen(ul);\n if (ul.querySelector('.' + FOCUSED)) {\n ul.querySelector('.' + FOCUSED).focus();\n }\n else {\n var ele = void 0;\n ele = this.getWrapper().children[this.getIdx(this.getWrapper(), ul) - 1];\n if (ele) {\n ele.querySelector('.' + SELECTED).focus();\n }\n else {\n this.element.focus();\n }\n }\n }\n else {\n if (ul === this.element) {\n var fli = this.getLIByClass(this.element, FOCUSED);\n if (fli) {\n fli.classList.remove(FOCUSED);\n }\n var sli = this.getLIByClass(this.element, SELECTED);\n if (sli) {\n sli.classList.remove(SELECTED);\n }\n ul.style.display = 'none';\n }\n else {\n detach(ul);\n }\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @returns string\n */\n MenuBase.prototype.getPersistData = function () {\n return '';\n };\n /**\n * Get wrapper element.\n * @returns Element\n * @private\n */\n MenuBase.prototype.getWrapper = function () {\n return closest(this.element, '.e-' + this.getModuleName() + '-wrapper');\n };\n MenuBase.prototype.getIndex = function (data, isUniqueId, items, nIndex, isCallBack, level) {\n if (items === void 0) { items = this.items; }\n if (nIndex === void 0) { nIndex = []; }\n if (isCallBack === void 0) { isCallBack = false; }\n if (level === void 0) { level = 0; }\n var item;\n level = isCallBack ? level + 1 : 0;\n for (var i = 0, len = items.length; i < len; i++) {\n item = items[i];\n if ((isUniqueId ? item[this.getField('itemId', level)] : item[this.getField('text', level)]) === data) {\n nIndex.push(i);\n break;\n }\n else if (item[this.getField('children', level)]\n && item[this.getField('children', level)].length) {\n nIndex = this.getIndex(data, isUniqueId, item[this.getField('children', level)], nIndex, true, level);\n if (nIndex[nIndex.length - 1] === -1) {\n if (i !== len - 1) {\n nIndex.pop();\n }\n }\n else {\n nIndex.unshift(i);\n break;\n }\n }\n else {\n if (i === len - 1) {\n nIndex.push(-1);\n }\n }\n }\n return (!isCallBack && nIndex[0] === -1) ? [] : nIndex;\n };\n /**\n * This method is used to enable or disable the menu items in the Menu based on the items and enable argument.\n * @param items Text items that needs to be enabled/disabled.\n * @param enable Set `true`/`false` to enable/disable the list items.\n * @param isUniqueId - Set `true` if it is a unique id.\n * @returns void\n */\n MenuBase.prototype.enableItems = function (items, enable, isUniqueId) {\n if (enable === void 0) { enable = true; }\n var ul;\n var idx;\n var navIdx;\n var disabled = DISABLED;\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(items[i], isUniqueId);\n idx = navIdx.pop();\n ul = this.getUlByNavIdx(navIdx.length);\n if (ul) {\n if (enable) {\n if (this.isMenu) {\n ul.children[idx].classList.remove(disabled);\n ul.children[idx].removeAttribute('aria-disabled');\n }\n else {\n if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {\n ul.children[idx + 1].classList.remove(disabled);\n }\n else {\n ul.children[idx].classList.remove(disabled);\n }\n }\n }\n else {\n if (this.isMenu) {\n ul.children[idx].classList.add(disabled);\n ul.children[idx].setAttribute('aria-disabled', 'true');\n }\n else {\n if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {\n ul.children[idx + 1].classList.add(disabled);\n }\n else {\n ul.children[idx].classList.add(disabled);\n }\n }\n }\n }\n }\n };\n /**\n * This method is used to show the menu items in the Menu based on the items text.\n * @param items Text items that needs to be shown.\n * @param isUniqueId - Set `true` if it is a unique id.\n * @returns void\n */\n MenuBase.prototype.showItems = function (items, isUniqueId) {\n this.showHideItems(items, false, isUniqueId);\n };\n /**\n * This method is used to hide the menu items in the Menu based on the items text.\n * @param items Text items that needs to be hidden.\n * @returns void\n */\n MenuBase.prototype.hideItems = function (items, isUniqueId) {\n this.showHideItems(items, true, isUniqueId);\n };\n MenuBase.prototype.showHideItems = function (items, ishide, isUniqueId) {\n var ul;\n var index;\n var navIdx;\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(items[i], isUniqueId);\n index = navIdx.pop();\n ul = this.getUlByNavIdx(navIdx.length);\n if (ul) {\n if (ishide) {\n if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {\n ul.children[index + 1].classList.add(HIDE);\n }\n else {\n ul.children[index].classList.add(HIDE);\n }\n }\n else {\n if (Browser.isDevice && !ul.classList.contains('e-contextmenu')) {\n ul.children[index + 1].classList.remove(HIDE);\n }\n else {\n ul.children[index].classList.remove(HIDE);\n }\n }\n }\n }\n };\n /**\n * It is used to remove the menu items from the Menu based on the items text.\n * @param items Text items that needs to be removed.\n * @returns void\n */\n MenuBase.prototype.removeItems = function (items, isUniqueId) {\n var idx;\n var navIdx;\n var iitems;\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(items[i], isUniqueId);\n idx = navIdx.pop();\n iitems = this.getItems(navIdx);\n this.removeItem(iitems, navIdx, idx);\n }\n };\n /**\n * It is used to insert the menu items after the specified menu item text.\n * @param items Items that needs to be inserted.\n * @param text Text item after that the element to be inserted.\n * @returns void\n */\n MenuBase.prototype.insertAfter = function (items, text, isUniqueId) {\n this.insertItems(items, text, isUniqueId);\n };\n /**\n * It is used to insert the menu items before the specified menu item text.\n * @param items Items that needs to be inserted.\n * @param text Text item before that the element to be inserted.\n * @param isUniqueId - Set `true` if it is a unique id.\n * @returns void\n */\n MenuBase.prototype.insertBefore = function (items, text, isUniqueId) {\n this.insertItems(items, text, isUniqueId, false);\n };\n MenuBase.prototype.insertItems = function (items, text, isUniqueId, isAfter) {\n if (isAfter === void 0) { isAfter = true; }\n var li;\n var idx;\n var navIdx;\n var iitems;\n var menuitem;\n var showIcon;\n for (var i = 0; i < items.length; i++) {\n navIdx = this.getIndex(text, isUniqueId);\n idx = navIdx.pop();\n iitems = this.getItems(navIdx);\n menuitem = new MenuItem(iitems[0], 'items', items[i], true);\n iitems.splice(isAfter ? idx + 1 : idx, 0, menuitem);\n var uls = this.isMenu ? [this.getWrapper()].concat(this.getPopups()) : [].slice.call(this.getWrapper().children);\n if (navIdx.length < uls.length) {\n idx = isAfter ? idx + 1 : idx;\n showIcon = this.hasField(iitems, this.getField('iconCss', navIdx.length - 1));\n li = this.createItems(iitems).children[idx];\n var ul = this.isMenu ? select('.e-menu-parent', uls[navIdx.length]) : uls[navIdx.length];\n ul.insertBefore(li, ul.children[idx]);\n }\n }\n };\n /**\n * Destroys the widget.\n * @returns void\n */\n MenuBase.prototype.destroy = function () {\n var _this = this;\n var wrapper = this.getWrapper();\n if (wrapper) {\n _super.prototype.destroy.call(this);\n this.unWireEvents();\n if (this.ngElement && !this.isMenu) {\n this.ngElement.style.display = 'block';\n }\n else {\n this.closeMenu();\n this.element.innerHTML = '';\n ['top', 'left', 'display', 'z-index'].forEach(function (key) {\n _this.element.style.removeProperty(key);\n });\n ['role', 'tabindex', 'class', 'style'].forEach(function (key) {\n if (key === 'class' && _this.element.classList.contains('e-menu-parent')) {\n _this.element.classList.remove('e-menu-parent');\n }\n if (['class', 'style'].indexOf(key) === -1 || !_this.element.getAttribute(key)) {\n _this.element.removeAttribute(key);\n }\n if (_this.isMenu && key === 'class' && _this.element.classList.contains('e-vertical')) {\n _this.element.classList.remove('e-vertical');\n }\n });\n wrapper.parentNode.insertBefore(this.element, wrapper);\n }\n if (this.isMenu && this.ngElement) {\n detach(this.element);\n wrapper.style.display = '';\n wrapper.classList.remove('e-' + this.getModuleName() + '-wrapper');\n wrapper.removeAttribute('data-ripple');\n }\n else {\n detach(wrapper);\n }\n }\n };\n __decorate([\n Event()\n ], MenuBase.prototype, \"beforeItemRender\", void 0);\n __decorate([\n Event()\n ], MenuBase.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], MenuBase.prototype, \"onOpen\", void 0);\n __decorate([\n Event()\n ], MenuBase.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], MenuBase.prototype, \"onClose\", void 0);\n __decorate([\n Event()\n ], MenuBase.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], MenuBase.prototype, \"created\", void 0);\n __decorate([\n Property('')\n ], MenuBase.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], MenuBase.prototype, \"showItemOnClick\", void 0);\n __decorate([\n Property('')\n ], MenuBase.prototype, \"target\", void 0);\n __decorate([\n Property('')\n ], MenuBase.prototype, \"filter\", void 0);\n __decorate([\n Property(null)\n ], MenuBase.prototype, \"template\", void 0);\n __decorate([\n Property(false)\n ], MenuBase.prototype, \"enableScrolling\", void 0);\n __decorate([\n Complex({}, FieldSettings)\n ], MenuBase.prototype, \"fields\", void 0);\n __decorate([\n Collection([], MenuItem)\n ], MenuBase.prototype, \"items\", void 0);\n __decorate([\n Complex({}, MenuAnimationSettings)\n ], MenuBase.prototype, \"animationSettings\", void 0);\n MenuBase = __decorate([\n NotifyPropertyChanges\n ], MenuBase);\n return MenuBase;\n}(Component));\nexport { MenuBase };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n///
\nimport { attributes, Collection, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';\nimport { getZindexPartial } from '@syncfusion/ej2-popups';\nimport { MenuBase, MenuItem } from '../common/menu-base';\n/**\n * The ContextMenu is a graphical user interface that appears on the user right click/touch hold operation.\n * ```html\n *
\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar ContextMenu = /** @class */ (function (_super) {\n __extends(ContextMenu, _super);\n /**\n * Constructor for creating the widget.\n * @private\n */\n function ContextMenu(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * For internal use only - prerender processing.\n * @private\n */\n ContextMenu.prototype.preRender = function () {\n this.isMenu = false;\n _super.prototype.preRender.call(this);\n };\n ContextMenu.prototype.initialize = function () {\n _super.prototype.initialize.call(this);\n attributes(this.element, { 'role': 'menu', 'tabindex': '0' });\n this.element.style.zIndex = getZindexPartial(this.element).toString();\n };\n /**\n * This method is used to open the ContextMenu in specified position.\n * @param top - To specify ContextMenu vertical positioning.\n * @param left - To specify ContextMenu horizontal positioning.\n * @param target - To calculate z-index for ContextMenu based upon the specified target.\n * @method open\n * @returns void\n */\n ContextMenu.prototype.open = function (top, left, target) {\n _super.prototype.openMenu.call(this, null, null, top, left, null, target);\n };\n /**\n * Closes the ContextMenu if it is opened.\n */\n ContextMenu.prototype.close = function () {\n _super.prototype.closeMenu.call(this);\n };\n /**\n * Called internally if any of the property value changed\n * @private\n * @param {ContextMenuModel} newProp\n * @param {ContextMenuModel} oldProp\n * @returns void\n */\n ContextMenu.prototype.onPropertyChanged = function (newProp, oldProp) {\n _super.prototype.onPropertyChanged.call(this, 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 'filter':\n this.close();\n this.filter = newProp.filter;\n break;\n case 'target':\n this.unWireEvents();\n this.target = newProp.target;\n this.wireEvents();\n break;\n }\n }\n };\n /**\n * Get module name.\n * @returns string\n * @private\n */\n ContextMenu.prototype.getModuleName = function () {\n return 'contextmenu';\n };\n __decorate([\n Property('')\n ], ContextMenu.prototype, \"target\", void 0);\n __decorate([\n Property('')\n ], ContextMenu.prototype, \"filter\", void 0);\n __decorate([\n Collection([], MenuItem)\n ], ContextMenu.prototype, \"items\", void 0);\n ContextMenu = __decorate([\n NotifyPropertyChanges\n ], ContextMenu);\n return ContextMenu;\n}(MenuBase));\nexport { ContextMenu };\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, setStyleAttribute, 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';\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 function NumericTextBox(options, element) {\n return _super.call(this, options, element) || this;\n }\n NumericTextBox.prototype.preRender = function () {\n this.isPrevFocused = false;\n this.decimalSeparator = '.';\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 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 input.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);\n input.innerHTML = this.element.innerHTML;\n }\n if (this.element.hasAttribute('id')) {\n this.element.removeAttribute('id');\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 = { incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: '' };\n this.l10n = new L10n('numerictextbox', localeText, this.locale);\n this.isValidState = true;\n this.inputStyle = null;\n this.inputName = null;\n this.cultureInfo = {};\n this.initCultureInfo();\n this.initCultureFunc();\n this.checkAttributes();\n this.prevValue = this.value;\n this.validateMinMax();\n this.validateStep();\n if (this.placeholder === null) {\n this.updatePlaceholder();\n }\n };\n /**\n * To Initialize the control rendering\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 if (!isNullOrUndefined(this.width)) {\n setStyleAttribute(this.container, { 'width': formatUnit(this.width) });\n }\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) ? 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 }\n };\n NumericTextBox.prototype.checkAttributes = function () {\n var attributes = ['value', 'min', 'max', 'step', 'disabled', 'readonly', 'style', 'name'];\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 var enabled = this.element.getAttribute(prop) === 'disabled' ||\n this.element.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, true);\n break;\n case 'readonly':\n var readonly = this.element.getAttribute(prop) === 'readonly'\n || this.element.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, true);\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 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 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 inputObj = Input.createInput({\n element: this.element,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: this.cssClass,\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 if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n this.hiddenInput = (this.createElement('input', { attrs: { type: 'hidden', 'validateHidden': 'true' } }));\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 if (this.inputStyle !== null) {\n attributes(this.container, { 'style': this.inputStyle });\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'))) {\n this.clear(e);\n }\n };\n NumericTextBox.prototype.clear = function (event) {\n this.setProperties({ value: null }, true);\n this.setElementValue('');\n };\n NumericTextBox.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'focus', this.focusIn, this);\n EventHandler.add(this.element, 'blur', this.focusOut, 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 }\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.focusIn);\n EventHandler.remove(this.element, 'blur', this.focusOut);\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 };\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, isInteraction: this.isInteract, event: event };\n if (event) {\n this.changeEventArgs.event = event;\n }\n merge(eventArgs, this.changeEventArgs);\n this.prevValue = this.value;\n this.isInteract = false;\n this.trigger('change', eventArgs);\n }\n };\n NumericTextBox.prototype.pasteHandler = function () {\n var _this = this;\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 ignoreKeyCode = void 0;\n var valArray = _this.element.value.split('');\n var numericObject = getNumericObject(_this.locale);\n var decimalSeparator = getValue('decimal', numericObject);\n 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 _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 }\n _this.prevVal = _this.element.value;\n }\n });\n };\n NumericTextBox.prototype.keyUpHandler = function (event) {\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n if (!iOS && Browser.isDevice) {\n this.preventHandler();\n }\n };\n ;\n NumericTextBox.prototype.inputHandler = function (event) {\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 };\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 ;\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 ;\n NumericTextBox.prototype.correctRounding = function (value, step, result) {\n var floatExp = new RegExp('[,.](.*)');\n var valueText = value.toString();\n var stepText = step.toString();\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 ;\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 ;\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 this.raiseChangeEvent(event);\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 = void 0;\n var decimalPart = value.toString().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 this.setProperties({ value: this.roundNumber(value, numberOfDecimals) }, true);\n }\n this.modifyText();\n if (!this.strictMode) {\n this.validateState();\n }\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 = value;\n }\n else {\n this.setElementValue('');\n this.element.removeAttribute('aria-valuenow');\n this.hiddenInput.value = null;\n }\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.formatNumber = function () {\n var numberOfDecimals;\n var currentValue = this.value;\n var decimalPart = currentValue.toString().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 this.instance.getNumberFormat({\n maximumFractionDigits: numberOfDecimals,\n minimumFractionDigits: numberOfDecimals, useGrouping: false\n })(this.value);\n };\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 ;\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 ;\n NumericTextBox.prototype.cancelEvent = function (event) {\n event.preventDefault();\n return false;\n };\n NumericTextBox.prototype.keyPressHandler = function (event) {\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 ;\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 ;\n NumericTextBox.prototype.mouseWheel = function (event) {\n event.preventDefault();\n var delta;\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.focusIn = function (event) {\n var _this = this;\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 var delay = (Browser.isDevice && Browser.isIos) ? 600 : 0;\n setTimeout(function () {\n _this.element.setSelectionRange(0, formatValue_1.length);\n }, delay);\n }\n }\n if (!Browser.isDevice) {\n EventHandler.add(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel, this);\n }\n };\n ;\n NumericTextBox.prototype.focusOut = function (event) {\n var _this = this;\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 ;\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 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 () { _this.isCalled = true; _this.action(action, event); }, 150);\n EventHandler.add(document, 'mouseup', this.mouseUpClick, this);\n };\n NumericTextBox.prototype.touchMoveOnSpinner = function (event) {\n var target = document.elementFromPoint(event.clientX, event.clientY);\n if (!(target.classList.contains(SPINICON))) {\n clearInterval(this.timeOut);\n }\n };\n NumericTextBox.prototype.mouseUpOnSpinner = function (event) {\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 };\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 * @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 */\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 * @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 */\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 * @method destroy\n * @return {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 this.container.parentElement.appendChild(this.cloneElement);\n detach(this.container);\n _super.prototype.destroy.call(this);\n };\n /**\n * Returns the value of NumericTextBox with the format applied to the NumericTextBox.\n */\n NumericTextBox.prototype.getText = function () {\n return this.element.value;\n };\n /**\n * Gets the properties to be maintained in the persisted state.\n * @return {string}\n */\n NumericTextBox.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Calls internally if any of the property value is changed.\n * @private\n */\n NumericTextBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n var elementVal;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n setStyleAttribute(this.container, { 'width': formatUnit(newProp.width) });\n break;\n case 'cssClass':\n Input.setCssClass(newProp.cssClass, [this.container], 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 '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 if (newProp.showSpinButton) {\n this.spinBtnCreation();\n }\n else {\n detach(this.spinUp);\n detach(this.spinDown);\n }\n break;\n case 'showClearButton':\n Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper, undefined, this.createElement);\n this.bindClearEvent();\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n this.floatLabelTypeUpdate();\n break;\n case 'value':\n this.updateValue(newProp.value);\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 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 this.updatePlaceholder();\n Input.setPlaceholder(this.placeholder, this.element);\n this.updateValue(this.value);\n break;\n case 'currency':\n var propVal = getValue(prop, newProp);\n this.setProperties({ currencyCode: propVal }, true);\n this.updateCurrency(prop, propVal);\n break;\n case 'currencyCode':\n var propValue = getValue(prop, newProp);\n this.setProperties({ currency: propValue }, true);\n this.updateCurrency('currency', propValue);\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 /**\n * Gets 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(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, \"enableRtl\", 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 NumericTextBox = __decorate([\n NotifyPropertyChanges\n ], NumericTextBox);\n return NumericTextBox;\n}(Component));\nexport { NumericTextBox };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { selectAll, select, createElement, Base } from '@syncfusion/ej2-base';\nimport { extend, isNullOrUndefined, EventHandler } from '@syncfusion/ej2-base';\nimport { Property, NotifyPropertyChanges, Event, onIntlChange } from '@syncfusion/ej2-base';\nimport { L10n } from '@syncfusion/ej2-base';\n/**\n * global declarations\n */\n// tslint:disable-next-line:no-any\nexport var regex = {\n EMAIL: new RegExp('^[A-Za-z0-9._%+-]{1,}@[A-Za-z0-9._%+-]{1,}([.]{1}[a-zA-Z0-9]{2,5}' +\n '|[.]{1}[a-zA-Z0-9]{2,4}[.]{1}[a-zA-Z0-9]{2,4})$'),\n URL: new RegExp('^((ftp|http|https):\\/\\/)?www\\.([A-z]{2,})\\.([A-z]{2,})$'),\n DATE_ISO: new RegExp('^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$'),\n DIGITS: new RegExp('^[0-9]*$'),\n PHONE: new RegExp('^[+]?[0-9]{9,13}$'),\n CREDITCARD: new RegExp('^\\\\d{13,16}$')\n};\n/**\n * ErrorOption values\n * @private\n */\nexport var ErrorOption;\n(function (ErrorOption) {\n ErrorOption[ErrorOption[\"Message\"] = 0] = \"Message\";\n ErrorOption[ErrorOption[\"Label\"] = 1] = \"Label\";\n})(ErrorOption || (ErrorOption = {}));\n/**\n * FormValidator class enables you to validate the form fields based on your defined rules\n * ```html\n *
\n * \n * ```\n */\nvar FormValidator = /** @class */ (function (_super) {\n __extends(FormValidator, _super);\n // Initializes the FormValidator \n function FormValidator(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.validated = [];\n _this.errorRules = [];\n _this.allowSubmit = false;\n _this.required = 'required';\n _this.infoElement = null;\n _this.inputElement = null;\n _this.selectQuery = 'input:not([type=reset]):not([type=button]), select, textarea';\n // tslint:disable-next-line:no-any\n _this.localyMessage = {};\n /**\n * Specifies the default messages for validation rules.\n * @default : { List of validation message };\n */\n _this.defaultMessages = {\n required: 'This field is required.',\n email: 'Please enter a valid email address.',\n url: 'Please enter a valid URL.',\n date: 'Please enter a valid date.',\n dateIso: 'Please enter a valid date ( ISO ).',\n creditcard: 'Please enter valid card number',\n number: 'Please enter a valid number.',\n digits: 'Please enter only digits.',\n maxLength: 'Please enter no more than {0} characters.',\n minLength: 'Please enter at least {0} characters.',\n rangeLength: 'Please enter a value between {0} and {1} characters long.',\n range: 'Please enter a value between {0} and {1}.',\n max: 'Please enter a value less than or equal to {0}.',\n min: 'Please enter a value greater than or equal to {0}.',\n regex: 'Please enter a correct value.',\n tel: 'Please enter a valid phone number.',\n pattern: 'Please enter a correct pattern value.',\n equalTo: 'Please enter the valid match text',\n };\n if (typeof _this.rules === 'undefined') {\n _this.rules = {};\n }\n _this.l10n = new L10n('formValidator', _this.defaultMessages, _this.locale);\n if (_this.locale) {\n _this.localeFunc();\n }\n onIntlChange.on('notifyExternalChange', _this.afterLocalization, _this);\n element = typeof element === 'string' ? select(element, document) : element;\n // Set novalidate to prevent default HTML5 form validation\n if (_this.element != null) {\n _this.element.setAttribute('novalidate', '');\n _this.inputElements = selectAll(_this.selectQuery, _this.element);\n _this.createHTML5Rules();\n _this.wireEvents();\n }\n else {\n return undefined;\n }\n return _this;\n }\n FormValidator_1 = FormValidator;\n /**\n * Add validation rules to the corresponding input element based on `name` attribute.\n * @param {string} name `name` of form field.\n * @param {Object} rules Validation rules for the corresponding element.\n * @return {void}\n */\n FormValidator.prototype.addRules = function (name, rules) {\n if (name) {\n if (this.rules.hasOwnProperty(name)) {\n extend(this.rules[name], rules, {});\n }\n else {\n this.rules[name] = rules;\n }\n }\n };\n /**\n * Remove validation to the corresponding field based on name attribute.\n * When no parameter is passed, remove all the validations in the form.\n * @param {string} name Input name attribute value.\n * @param {string[]} rules List of validation rules need to be remove from the corresponding element.\n * @return {void}\n */\n FormValidator.prototype.removeRules = function (name, rules) {\n if (!name && !rules) {\n this.rules = {};\n }\n else if (this.rules[name] && !rules) {\n delete this.rules[name];\n }\n else if (!isNullOrUndefined(this.rules[name] && rules)) {\n for (var i = 0; i < rules.length; i++) {\n delete this.rules[name][rules[i]];\n }\n }\n else {\n return;\n }\n };\n /**\n * Validate the current form values using defined rules.\n * Returns `true` when the form is valid otherwise `false`\n * @param {string} selected - Optional parameter to validate specified element.\n * @return {boolean}\n */\n FormValidator.prototype.validate = function (selected) {\n var rules = Object.keys(this.rules);\n if (selected && rules.length) {\n this.validateRules(selected);\n //filter the selected element it don't have any valid input element\n return rules.indexOf(selected) !== -1 && this.errorRules.filter(function (data) {\n return data.name === selected;\n }).length === 0;\n }\n else {\n this.errorRules = [];\n for (var _i = 0, rules_1 = rules; _i < rules_1.length; _i++) {\n var name_1 = rules_1[_i];\n this.validateRules(name_1);\n }\n return this.errorRules.length === 0;\n }\n };\n /**\n * Reset the value of all the fields in form.\n * @return {void}\n */\n FormValidator.prototype.reset = function () {\n this.element.reset();\n this.clearForm();\n };\n /**\n * Get input element by name.\n * @param {string} name - Input element name attribute value.\n * @return {HTMLInputElement}\n */\n FormValidator.prototype.getInputElement = function (name) {\n this.inputElement = (select('[name=' + name + ']', this.element));\n return this.inputElement;\n };\n /**\n * Destroy the form validator object and error elements.\n * @return {void}\n */\n FormValidator.prototype.destroy = function () {\n this.reset();\n this.unwireEvents();\n this.rules = {};\n var elements = selectAll('.' + this.errorClass + ', .' + this.validClass, this.element);\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var element = elements_1[_i];\n element.remove();\n }\n _super.prototype.destroy.call(this);\n onIntlChange.off('notifyExternalChange', this.afterLocalization);\n };\n /**\n * @private\n */\n FormValidator.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'locale':\n this.localeFunc();\n break;\n }\n }\n };\n ;\n /**\n * @private\n */\n FormValidator.prototype.localeFunc = function () {\n for (var _i = 0, _a = Object.keys(this.defaultMessages); _i < _a.length; _i++) {\n var key = _a[_i];\n this.l10n.setLocale(this.locale);\n var value = this.l10n.getConstant(key);\n this.localyMessage[key] = value;\n }\n };\n /**\n * @private\n */\n FormValidator.prototype.getModuleName = function () {\n return 'formValidator';\n };\n /**\n * @private\n */\n // tslint:disable-next-line:no-any\n FormValidator.prototype.afterLocalization = function (args) {\n this.locale = args.locale;\n this.localeFunc();\n };\n FormValidator.prototype.clearForm = function () {\n this.errorRules = [];\n this.validated = [];\n var elements = selectAll(this.selectQuery, this.element);\n for (var _i = 0, elements_2 = elements; _i < elements_2.length; _i++) {\n var element = elements_2[_i];\n var input = element;\n input.removeAttribute('aria-invalid');\n input.classList.remove(this.errorClass);\n if (input.name.length > 0) {\n this.getInputElement(input.name);\n this.getErrorElement(input.name);\n this.hideMessage(input.name);\n }\n input.classList.remove(this.validClass);\n }\n };\n FormValidator.prototype.createHTML5Rules = function () {\n var defRules = ['required', 'validateHidden', 'regex', 'rangeLength', 'maxLength', 'minLength', 'dateIso', 'digits',\n 'pattern', 'data-val-required', 'type', 'data-validation', 'min', 'max', 'range', 'equalTo', 'data-val-minlength-min',\n 'data-val-equalto-other', 'data-val-maxlength-max', 'data-val-range-min', 'data-val-regex-pattern', 'data-val-length-max',\n 'data-val-creditcard', 'data-val-phone'];\n var acceptedTypes = ['hidden', 'email', 'url', 'date', 'number', 'tel'];\n for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {\n var input = _a[_i];\n // Default attribute rules \n var allRule = {};\n for (var _b = 0, defRules_1 = defRules; _b < defRules_1.length; _b++) {\n var rule = defRules_1[_b];\n if (input.getAttribute(rule) !== null) {\n switch (rule) {\n case 'required':\n this.defRule(input, allRule, rule, input.required);\n break;\n case 'data-validation':\n rule = input.getAttribute(rule);\n this.defRule(input, allRule, rule, true);\n break;\n case 'type':\n if (acceptedTypes.indexOf(input.type) !== -1) {\n this.defRule(input, allRule, input.type, true);\n }\n break;\n case 'rangeLength':\n case 'range':\n this.defRule(input, allRule, rule, JSON.parse(input.getAttribute(rule)));\n break;\n case 'equalTo':\n var id = input.getAttribute(rule);\n this.defRule(input, allRule, rule, id);\n break;\n default:\n if (input.getAttribute('data-val') === 'true') {\n this.annotationRule(input, allRule, rule, input.getAttribute(rule));\n }\n else {\n this.defRule(input, allRule, rule, input.getAttribute(rule));\n }\n }\n }\n }\n //adding pattern type validation\n if (Object.keys(allRule).length !== 0) {\n this.addRules(input.name, allRule);\n }\n }\n };\n FormValidator.prototype.annotationRule = function (input, ruleCon, ruleName, value) {\n var annotationRule = ruleName.split('-');\n var rulesList = ['required', 'creditcard', 'phone', 'maxlength', 'minlength', 'range', 'regex', 'equalto'];\n var ruleFirstName = annotationRule[annotationRule.length - 1];\n var ruleSecondName = annotationRule[annotationRule.length - 2];\n if (rulesList.indexOf(ruleFirstName) !== -1) {\n switch (ruleFirstName) {\n case 'required':\n this.defRule(input, ruleCon, 'required', value);\n break;\n case 'creditcard':\n this.defRule(input, ruleCon, 'creditcard', value);\n break;\n case 'phone':\n this.defRule(input, ruleCon, 'tel', value);\n break;\n }\n }\n else if (rulesList.indexOf(ruleSecondName) !== -1) {\n switch (ruleSecondName) {\n case 'maxlength':\n this.defRule(input, ruleCon, 'maxLength', value);\n break;\n case 'minlength':\n this.defRule(input, ruleCon, 'minLength', value);\n break;\n case 'range':\n var minvalue = input.getAttribute('data-val-range-min');\n var maxvalue = input.getAttribute('data-val-range-max');\n this.defRule(input, ruleCon, 'range', [minvalue, maxvalue]);\n break;\n case 'equalto':\n var id = input.getAttribute(ruleName).split('.');\n this.defRule(input, ruleCon, 'equalTo', id[id.length - 1]);\n break;\n case 'regex':\n this.defRule(input, ruleCon, 'regex', value);\n break;\n }\n }\n };\n FormValidator.prototype.defRule = function (input, ruleCon, ruleName, value) {\n var message = input.getAttribute('data-' + ruleName + '-message');\n var annotationMessage = input.getAttribute('data-val-' + ruleName);\n if (message) {\n value = [value, message];\n }\n else if (annotationMessage) {\n value = [value, annotationMessage];\n }\n ruleCon[ruleName] = value;\n };\n // Wire events to the form elements\n FormValidator.prototype.wireEvents = function () {\n for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {\n var input = _a[_i];\n if (FormValidator_1.isCheckable(input)) {\n EventHandler.add(input, 'click', this.clickHandler, this);\n }\n else if (input.tagName === 'SELECT') {\n EventHandler.add(input, 'change', this.changeHandler, this);\n }\n else {\n EventHandler.add(input, 'focusout', this.focusOutHandler, this);\n EventHandler.add(input, 'keyup', this.keyUpHandler, this);\n }\n }\n EventHandler.add(this.element, 'submit', this.submitHandler, this);\n EventHandler.add(this.element, 'reset', this.resetHandler, this);\n };\n // UnWire events to the form elements\n FormValidator.prototype.unwireEvents = function () {\n for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {\n var input = _a[_i];\n EventHandler.clearEvents(input);\n }\n EventHandler.remove(this.element, 'submit', this.submitHandler);\n EventHandler.remove(this.element, 'reset', this.resetHandler);\n };\n // Handle input element focusout event\n FormValidator.prototype.focusOutHandler = function (e) {\n this.trigger('focusout', e);\n //FormValidator.triggerCallback(this.focusout, e);\n var element = e.target;\n if (this.rules[element.name]) {\n if (this.rules[element.name][this.required] || element.value.length > 0) {\n this.validate(element.name);\n }\n else if (this.validated.indexOf(element.name) === -1) {\n this.validated.push(element.name);\n }\n }\n };\n // Handle input element keyup event\n FormValidator.prototype.keyUpHandler = function (e) {\n this.trigger('keyup', e);\n var element = e.target;\n // List of keys need to prevent while validation\n var excludeKeys = [16, 17, 18, 20, 35, 36, 37, 38, 39, 40, 45, 144, 225];\n if (e.which === 9 && (!this.rules[element.name] || (this.rules[element.name] && !this.rules[element.name][this.required]))) {\n return;\n }\n if (this.validated.indexOf(element.name) !== -1 && this.rules[element.name] && excludeKeys.indexOf(e.which) === -1) {\n this.validate(element.name);\n }\n };\n // Handle input click event\n FormValidator.prototype.clickHandler = function (e) {\n this.trigger('click', e);\n var element = e.target;\n // If element type is not submit allow validation\n if (element.type !== 'submit') {\n this.validate(element.name);\n }\n else if (element.getAttribute('formnovalidate') !== null) {\n // Prevent form validation, if submit button has formnovalidate attribute\n this.allowSubmit = true;\n }\n };\n // Handle input change event\n FormValidator.prototype.changeHandler = function (e) {\n this.trigger('change', e);\n var element = e.target;\n this.validate(element.name);\n };\n // Handle form submit event\n FormValidator.prototype.submitHandler = function (e) {\n this.trigger('submit', e);\n //FormValidator.triggerCallback(this.submit, e);\n // Prevent form submit if validation failed\n if (!this.allowSubmit && !this.validate()) {\n e.preventDefault();\n }\n else {\n this.allowSubmit = false;\n }\n };\n // Handle form reset\n FormValidator.prototype.resetHandler = function () {\n this.clearForm();\n };\n // Validate each rule based on input element name\n FormValidator.prototype.validateRules = function (name) {\n if (!this.rules[name]) {\n return;\n }\n var rules = Object.keys(this.rules[name]);\n var hiddenType = false;\n var validateHiddenType = false;\n var vhPos = rules.indexOf('validateHidden');\n var hPos = rules.indexOf('hidden');\n this.getInputElement(name);\n if (hPos !== -1) {\n hiddenType = true;\n }\n if (vhPos !== -1) {\n validateHiddenType = true;\n }\n if (!hiddenType || (hiddenType && validateHiddenType)) {\n if (vhPos !== -1) {\n rules.splice(vhPos, 1);\n }\n if (hPos !== -1) {\n rules.splice((hPos - 1), 1);\n }\n this.getErrorElement(name);\n for (var _i = 0, rules_2 = rules; _i < rules_2.length; _i++) {\n var rule = rules_2[_i];\n var errorMessage = this.getErrorMessage(this.rules[name][rule], rule);\n var errorRule = { name: name, message: errorMessage };\n var eventArgs = {\n inputName: name,\n element: this.inputElement,\n message: errorMessage\n };\n if (!this.isValid(name, rule) && !this.inputElement.classList.contains(this.ignore)) {\n this.removeErrorRules(name);\n this.errorRules.push(errorRule);\n // Set aria attributes to invalid elements\n this.inputElement.setAttribute('aria-invalid', 'true');\n this.inputElement.setAttribute('aria-describedby', this.inputElement.id + '-info');\n this.inputElement.classList.add(this.errorClass);\n this.inputElement.classList.remove(this.validClass);\n if (!this.infoElement) {\n this.createErrorElement(name, errorRule.message, this.inputElement);\n }\n else {\n this.showMessage(errorRule);\n }\n eventArgs.errorElement = this.infoElement;\n eventArgs.status = 'failure';\n this.inputElement.classList.add(this.errorClass);\n this.inputElement.classList.remove(this.validClass);\n this.optionalValidationStatus(name, eventArgs);\n this.trigger('validationComplete', eventArgs);\n // Set aria-required to required rule elements\n if (rule === 'required') {\n this.inputElement.setAttribute('aria-required', 'true');\n }\n break;\n }\n else {\n this.hideMessage(name);\n eventArgs.status = 'success';\n this.trigger('validationComplete', eventArgs);\n }\n }\n }\n else {\n return;\n }\n };\n // Update the optional validation status\n FormValidator.prototype.optionalValidationStatus = function (name, refer) {\n if (!this.rules[name][this.required] && !this.inputElement.value.length) {\n this.infoElement.innerHTML = this.inputElement.value;\n this.infoElement.setAttribute('aria-invalid', 'false');\n refer.status = '';\n this.hideMessage(name);\n }\n };\n // Check the input element whether it's value satisfy the validation rule or not\n FormValidator.prototype.isValid = function (name, rule) {\n var params = this.rules[name][rule];\n var param = (params instanceof Array && typeof params[1] === 'string') ? params[0] : params;\n var currentRule = this.rules[name][rule];\n var args = { value: this.inputElement.value, param: param, element: this.inputElement, formElement: this.element };\n this.trigger('validationBegin', args);\n if (currentRule && typeof currentRule[0] === 'function') {\n var fn = currentRule[0];\n return fn.call(this, { element: this.inputElement, value: this.inputElement.value });\n }\n else if (FormValidator_1.isCheckable(this.inputElement)) {\n if (rule !== 'required') {\n return true;\n }\n return selectAll('input[name=' + name + ']:checked', this.element).length > 0;\n }\n else {\n return FormValidator_1.checkValidator[rule](args);\n }\n };\n // Return default error message or custom error message \n FormValidator.prototype.getErrorMessage = function (ruleValue, rule) {\n var message = (ruleValue instanceof Array && typeof ruleValue[1] === 'string') ? ruleValue[1] :\n (Object.keys(this.localyMessage).length !== 0) ? this.localyMessage[rule] : this.defaultMessages[rule];\n var formats = message.match(/{(\\d)}/g);\n if (!isNullOrUndefined(formats)) {\n for (var i = 0; i < formats.length; i++) {\n var value = ruleValue instanceof Array ? ruleValue[i] : ruleValue;\n message = message.replace(formats[i], value);\n }\n }\n return message;\n };\n // Create error element based on name and error message\n FormValidator.prototype.createErrorElement = function (name, message, input) {\n var errorElement = createElement(this.errorElement, {\n className: this.errorClass,\n innerHTML: message,\n attrs: { for: name }\n });\n // Create message design if errorOption is message\n if (this.errorOption === ErrorOption.Message) {\n errorElement.classList.remove(this.errorClass);\n errorElement.classList.add('e-message');\n errorElement = createElement(this.errorContainer, { className: this.errorClass, innerHTML: errorElement.outerHTML });\n }\n errorElement.id = this.inputElement.name + '-info';\n // Append error message into MVC error message element\n if (this.element.querySelector('[data-valmsg-for=\"' + input.id + '\"]')) {\n this.element.querySelector('[data-valmsg-for=\"' + input.id + '\"]').appendChild(errorElement);\n }\n else if (input.hasAttribute('data-msg-containerid') === true) {\n // Append error message into custom div element\n var containerId = input.getAttribute('data-msg-containerid');\n var divElement = this.element.querySelector('#' + containerId);\n divElement.appendChild(errorElement);\n }\n else if (this.customPlacement != null) {\n // Call custom placement function if customPlacement is not null\n this.customPlacement.call(this, this.inputElement, errorElement);\n }\n else {\n this.inputElement.parentNode.insertBefore(errorElement, this.inputElement.nextSibling);\n }\n errorElement.style.display = 'block';\n this.getErrorElement(name);\n this.validated.push(name);\n this.checkRequired(name);\n };\n // Get error element by name\n FormValidator.prototype.getErrorElement = function (name) {\n this.infoElement = select(this.errorElement + '.' + this.errorClass, this.inputElement.parentElement);\n if (!this.infoElement) {\n this.infoElement = (select(this.errorElement + '.' + this.errorClass + '[for=\"' + name + '\"]', this.element) ||\n select(this.errorElement + '.' + this.errorClass + '[for=\"' + name + '\"]'));\n }\n return this.infoElement;\n };\n // Remove existing rule from errorRules object\n FormValidator.prototype.removeErrorRules = function (name) {\n for (var i = 0; i < this.errorRules.length; i++) {\n var rule = this.errorRules[i];\n if (rule.name === name) {\n this.errorRules.splice(i, 1);\n }\n }\n };\n // Show error message to the input element\n FormValidator.prototype.showMessage = function (errorRule) {\n this.infoElement.style.display = 'block';\n this.infoElement.innerHTML = errorRule.message;\n this.checkRequired(errorRule.name);\n };\n // Hide error message based on input name\n FormValidator.prototype.hideMessage = function (name) {\n if (this.infoElement) {\n this.infoElement.style.display = 'none';\n this.removeErrorRules(name);\n this.inputElement.classList.add(this.validClass);\n this.inputElement.classList.remove(this.errorClass);\n this.inputElement.setAttribute('aria-invalid', 'false');\n }\n };\n // Check whether the input element have required rule and its value is not empty\n FormValidator.prototype.checkRequired = function (name) {\n if (!this.rules[name][this.required] && !this.inputElement.value.length) {\n this.infoElement.innerHTML = this.inputElement.value;\n this.infoElement.setAttribute('aria-invalid', 'false');\n this.hideMessage(name);\n }\n };\n // Return boolean result if the input have chekcable or submit types\n FormValidator.isCheckable = function (input) {\n var inputType = input.getAttribute('type');\n return inputType && (inputType === 'checkbox' || inputType === 'radio' || inputType === 'submit');\n };\n var FormValidator_1;\n // List of function to validate the rules\n FormValidator.checkValidator = {\n required: function (option) {\n return option.value.length > 0;\n },\n email: function (option) {\n return regex.EMAIL.test(option.value);\n },\n url: function (option) {\n return regex.URL.test(option.value);\n },\n dateIso: function (option) {\n return regex.DATE_ISO.test(option.value);\n },\n tel: function (option) {\n return regex.PHONE.test(option.value);\n },\n creditcard: function (option) {\n return regex.CREDITCARD.test(option.value);\n },\n number: function (option) {\n return !isNaN(Number(option.value)) && option.value.indexOf(' ') === -1;\n },\n digits: function (option) {\n return regex.DIGITS.test(option.value);\n },\n maxLength: function (option) {\n return option.value.length <= option.param;\n },\n minLength: function (option) {\n return option.value.length >= option.param;\n },\n rangeLength: function (option) {\n var param = option.param;\n return option.value.length >= param[0] && option.value.length <= param[1];\n },\n range: function (option) {\n var param = option.param;\n return !isNaN(Number(option.value)) && Number(option.value) >= param[0] && Number(option.value) <= param[1];\n },\n date: function (option) {\n return !isNaN(new Date(option.value).getTime());\n },\n max: function (option) {\n if (!isNaN(Number(option.value))) {\n // Maximum rule validation for number\n return +option.value <= option.param;\n }\n // Maximum rule validation for date\n return new Date(option.value).getTime() <= new Date(JSON.parse(JSON.stringify(option.param))).getTime();\n },\n min: function (option) {\n if (!isNaN(Number(option.value))) {\n // Minimum rule validation for number\n return +option.value >= option.param;\n }\n else if ((option.value).indexOf(',') !== -1) {\n var uNum = (option.value).replace(/,/g, '');\n return parseFloat(uNum) >= option.param;\n }\n else {\n // Minimum rule validation for date\n return new Date(option.value).getTime() >= new Date(JSON.parse(JSON.stringify(option.param))).getTime();\n }\n },\n regex: function (option) {\n return new RegExp(option.param).test(option.value);\n },\n equalTo: function (option) {\n var compareTo = option.formElement.querySelector('#' + option.param);\n option.param = compareTo.value;\n return option.param === option.value;\n },\n };\n __decorate([\n Property('')\n ], FormValidator.prototype, \"locale\", void 0);\n __decorate([\n Property('e-hidden')\n ], FormValidator.prototype, \"ignore\", void 0);\n __decorate([\n Property()\n ], FormValidator.prototype, \"rules\", void 0);\n __decorate([\n Property('e-error')\n ], FormValidator.prototype, \"errorClass\", void 0);\n __decorate([\n Property('e-valid')\n ], FormValidator.prototype, \"validClass\", void 0);\n __decorate([\n Property('label')\n ], FormValidator.prototype, \"errorElement\", void 0);\n __decorate([\n Property('div')\n ], FormValidator.prototype, \"errorContainer\", void 0);\n __decorate([\n Property(ErrorOption.Label)\n ], FormValidator.prototype, \"errorOption\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"focusout\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"keyup\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"click\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"submit\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"validationBegin\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"validationComplete\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"customPlacement\", void 0);\n FormValidator = FormValidator_1 = __decorate([\n NotifyPropertyChanges\n ], FormValidator);\n return FormValidator;\n}(Base));\nexport { FormValidator };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Event, Property, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit, getValue, setValue, addClass, detach } from '@syncfusion/ej2-base';\nimport { removeClass, Browser } from '@syncfusion/ej2-base';\nimport { Input } from '../../input/input';\nimport { regularExpressions, createMask, applyMask, wireEvents, unwireEvents, unstrippedValue, strippedValue } from '../base/index';\nimport { setMaskValue, setElementValue, bindClearEvent } from '../base/index';\nimport { maskInputBlurHandler } from '../base/mask-base';\nvar ROOT = 'e-widget e-control-wrapper e-mask';\nvar INPUT = 'e-input';\nvar COMPONENT = 'e-maskedtextbox';\nvar CONTROL = 'e-control';\n/**\n * The MaskedTextBox allows the user to enter the valid input only based on the provided mask.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar MaskedTextBox = /** @class */ (function (_super) {\n __extends(MaskedTextBox, _super);\n function MaskedTextBox(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Gets the component name\n * @private\n */\n MaskedTextBox.prototype.getModuleName = function () {\n return 'maskedtextbox';\n };\n /**\n * Initializes the event handler\n * @private\n */\n MaskedTextBox.prototype.preRender = function () {\n this.promptMask = '';\n this.hiddenMask = '';\n this.escapeMaskValue = '';\n this.regExpCollec = regularExpressions;\n this.customRegExpCollec = [];\n this.undoCollec = [];\n this.redoCollec = [];\n this.changeEventArgs = {};\n this.focusEventArgs = {};\n this.maskKeyPress = false;\n this.isFocus = false;\n this.isInitial = false;\n this.isIosInvalid = 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 if (this.element.tagName === 'EJS-MASKEDTEXTBOX') {\n this.angularTagName = this.element.tagName;\n var input = this.createElement('input');\n for (var i = 0; i < this.element.attributes.length; i++) {\n input.setAttribute(this.element.attributes[i].nodeName, this.element.attributes[i].nodeValue);\n input.innerHTML = this.element.innerHTML;\n }\n if (this.element.hasAttribute('id')) {\n this.element.removeAttribute('id');\n }\n this.element.classList.remove('e-control', 'e-maskedtextbox');\n this.element.classList.add('e-mask-container');\n this.element.appendChild(input);\n this.element = input;\n setValue('ej2_instances', ejInstance, this.element);\n }\n };\n /**\n * Gets the properties to be maintained in the persisted state.\n * @return {string}\n */\n MaskedTextBox.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Initializes the component rendering.\n * @private\n */\n MaskedTextBox.prototype.render = function () {\n if (this.element.tagName.toLowerCase() === 'input') {\n if (this.floatLabelType === 'Never') {\n addClass([this.element], INPUT);\n }\n this.createWrapper();\n if (this.element.name === '') {\n this.element.setAttribute('name', this.element.id);\n }\n this.isInitial = true;\n this.resetMaskedTextBox();\n this.isInitial = false;\n this.setMaskPlaceholder(true, false);\n this.setWidth(this.width);\n this.preEleVal = this.element.value;\n if (!Browser.isDevice && (Browser.info.version === '11.0' || Browser.info.name === 'edge')) {\n this.element.blur();\n }\n }\n };\n MaskedTextBox.prototype.resetMaskedTextBox = function () {\n this.promptMask = '';\n this.hiddenMask = '';\n this.escapeMaskValue = '';\n this.customRegExpCollec = [];\n this.undoCollec = [];\n this.redoCollec = [];\n if (this.promptChar.length > 1) {\n this.promptChar = this.promptChar[0];\n }\n createMask.call(this);\n applyMask.call(this);\n if (this.mask === null || this.mask === '' && this.value !== undefined) {\n setElementValue.call(this, this.value);\n }\n var val = strippedValue.call(this, this.element);\n this.prevValue = val;\n this.value = val;\n if (!this.isInitial) {\n unwireEvents.call(this);\n }\n wireEvents.call(this);\n };\n MaskedTextBox.prototype.setMaskPlaceholder = function (setVal, dynamicPlaceholder) {\n if (dynamicPlaceholder || this.placeholder) {\n Input.setPlaceholder(this.placeholder, this.element);\n if (this.element.value === this.promptMask && setVal && this.floatLabelType !== 'Always') {\n setElementValue.call(this, '');\n }\n if (this.floatLabelType === 'Never') {\n maskInputBlurHandler.call(this);\n }\n }\n };\n MaskedTextBox.prototype.setCssClass = function (cssClass, element) {\n if (cssClass) {\n addClass(element, cssClass);\n }\n };\n MaskedTextBox.prototype.setWidth = function (width) {\n if (!isNullOrUndefined(width)) {\n this.element.style.width = formatUnit(width);\n this.inputObj.container.style.width = formatUnit(width);\n }\n };\n MaskedTextBox.prototype.createWrapper = function () {\n this.inputObj = Input.createInput({\n element: this.element,\n floatLabelType: this.floatLabelType,\n properties: {\n enableRtl: this.enableRtl,\n cssClass: this.cssClass,\n enabled: this.enabled,\n placeholder: this.placeholder,\n showClearButton: this.showClearButton\n }\n }, this.createElement);\n this.inputObj.container.setAttribute('class', ROOT + ' ' + this.inputObj.container.getAttribute('class'));\n };\n /**\n * Calls internally if any of the property value is changed.\n * @hidden\n */\n MaskedTextBox.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 setMaskValue.call(this, this.value);\n if (this.placeholder) {\n this.setMaskPlaceholder(false, false);\n }\n break;\n case 'placeholder':\n this.setMaskPlaceholder(true, true);\n break;\n case 'width':\n this.setWidth(newProp.width);\n break;\n case 'cssClass':\n this.setCssClass(newProp.cssClass, [this.inputObj.container]);\n break;\n case 'enabled':\n Input.setEnabled(newProp.enabled, this.element);\n break;\n case 'enableRtl':\n Input.setEnableRtl(newProp.enableRtl, [this.inputObj.container]);\n break;\n case 'customCharacters':\n this.customCharacters = newProp.customCharacters;\n this.resetMaskedTextBox();\n break;\n case 'showClearButton':\n Input.setClearButton(newProp.showClearButton, this.element, this.inputObj, undefined, this.createElement);\n bindClearEvent.call(this);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputObj);\n Input.addFloating(this.element, this.floatLabelType, this.placeholder, this.createElement);\n break;\n case 'mask':\n var strippedValue_1 = this.value;\n this.mask = newProp.mask;\n this.updateValue(strippedValue_1);\n break;\n case 'promptChar':\n if (newProp.promptChar.length > 1) {\n newProp.promptChar = newProp.promptChar[0];\n }\n if (newProp.promptChar) {\n this.promptChar = newProp.promptChar;\n }\n else {\n this.promptChar = '_';\n }\n var value = this.element.value.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);\n if (this.promptMask === this.element.value) {\n value = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);\n }\n this.promptMask = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);\n this.undoCollec = this.redoCollec = [];\n setElementValue.call(this, value);\n break;\n }\n }\n };\n MaskedTextBox.prototype.updateValue = function (strippedVal) {\n this.resetMaskedTextBox();\n setMaskValue.call(this, strippedVal);\n };\n /**\n * Gets the value of the MaskedTextBox with the masked format.\n * By using `value` property, you can get the raw value of maskedtextbox without literals and prompt characters.\n * @return {string}\n */\n MaskedTextBox.prototype.getMaskedValue = function () {\n return unstrippedValue.call(this, this.element);\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 * @method destroy\n * @return {void}\n */\n MaskedTextBox.prototype.destroy = function () {\n unwireEvents.call(this);\n this.inputObj.container.parentElement.appendChild(this.cloneElement);\n detach(this.inputObj.container);\n _super.prototype.destroy.call(this);\n };\n __decorate([\n Property(null)\n ], MaskedTextBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], MaskedTextBox.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], MaskedTextBox.prototype, \"placeholder\", void 0);\n __decorate([\n Property('Never')\n ], MaskedTextBox.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(true)\n ], MaskedTextBox.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], MaskedTextBox.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(false)\n ], MaskedTextBox.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(false)\n ], MaskedTextBox.prototype, \"enableRtl\", void 0);\n __decorate([\n Property(null)\n ], MaskedTextBox.prototype, \"mask\", void 0);\n __decorate([\n Property('_')\n ], MaskedTextBox.prototype, \"promptChar\", void 0);\n __decorate([\n Property(null)\n ], MaskedTextBox.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], MaskedTextBox.prototype, \"customCharacters\", void 0);\n __decorate([\n Event()\n ], MaskedTextBox.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], MaskedTextBox.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], MaskedTextBox.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], MaskedTextBox.prototype, \"focus\", void 0);\n MaskedTextBox = __decorate([\n NotifyPropertyChanges\n ], MaskedTextBox);\n return MaskedTextBox;\n}(Component));\nexport { MaskedTextBox };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Property, Event, Complex } from '@syncfusion/ej2-base';\nimport { L10n, Internationalization } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty } from '@syncfusion/ej2-base';\nimport { attributes, addClass, removeClass, setStyleAttribute, detach } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit, Browser } from '@syncfusion/ej2-base';\nimport { Tooltip } from '@syncfusion/ej2-popups';\n/**\n * Configures the ticks data of the Slider.\n */\nvar TicksData = /** @class */ (function (_super) {\n __extends(TicksData, _super);\n function TicksData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('None')\n ], TicksData.prototype, \"placement\", void 0);\n __decorate([\n Property(10)\n ], TicksData.prototype, \"largeStep\", void 0);\n __decorate([\n Property(1)\n ], TicksData.prototype, \"smallStep\", void 0);\n __decorate([\n Property(false)\n ], TicksData.prototype, \"showSmallTicks\", void 0);\n __decorate([\n Property(null)\n ], TicksData.prototype, \"format\", void 0);\n return TicksData;\n}(ChildProperty));\nexport { TicksData };\n/**\n * It illustrates the limit data in slider.\n */\nvar LimitData = /** @class */ (function (_super) {\n __extends(LimitData, _super);\n function LimitData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], LimitData.prototype, \"enabled\", void 0);\n __decorate([\n Property(null)\n ], LimitData.prototype, \"minStart\", void 0);\n __decorate([\n Property(null)\n ], LimitData.prototype, \"minEnd\", void 0);\n __decorate([\n Property(null)\n ], LimitData.prototype, \"maxStart\", void 0);\n __decorate([\n Property(null)\n ], LimitData.prototype, \"maxEnd\", void 0);\n __decorate([\n Property(false)\n ], LimitData.prototype, \"startHandleFixed\", void 0);\n __decorate([\n Property(false)\n ], LimitData.prototype, \"endHandleFixed\", void 0);\n return LimitData;\n}(ChildProperty));\nexport { LimitData };\n/**\n * It illustrates the tooltip data in slider.\n */\nvar TooltipData = /** @class */ (function (_super) {\n __extends(TooltipData, _super);\n function TooltipData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], TooltipData.prototype, \"cssClass\", void 0);\n __decorate([\n Property('Before')\n ], TooltipData.prototype, \"placement\", void 0);\n __decorate([\n Property('Focus')\n ], TooltipData.prototype, \"showOn\", void 0);\n __decorate([\n Property(false)\n ], TooltipData.prototype, \"isVisible\", void 0);\n __decorate([\n Property(null)\n ], TooltipData.prototype, \"format\", void 0);\n return TooltipData;\n}(ChildProperty));\nexport { TooltipData };\nvar bootstrapTooltipOffset = 6;\nvar classNames = {\n root: 'e-slider',\n rtl: 'e-rtl',\n sliderHiddenInput: 'e-slider-input',\n controlWrapper: 'e-control-wrapper',\n sliderHandle: 'e-handle',\n rangeBar: 'e-range',\n sliderButton: 'e-slider-button',\n firstButton: 'e-first-button',\n secondButton: 'e-second-button',\n scale: 'e-scale',\n tick: 'e-tick',\n large: 'e-large',\n tickValue: 'e-tick-value',\n sliderTooltip: 'e-slider-tooltip',\n sliderHover: 'e-slider-hover',\n sliderFirstHandle: 'e-handle-first',\n sliderSecondHandle: 'e-handle-second',\n sliderDisabled: 'e-disabled',\n sliderContainer: 'e-slider-container',\n horizontalTooltipBefore: 'e-slider-horizontal-before',\n horizontalTooltipAfter: 'e-slider-horizontal-after',\n verticalTooltipBefore: 'e-slider-vertical-before',\n verticalTooltipAfter: 'e-slider-vertical-after',\n materialTooltip: 'e-material-tooltip',\n materialTooltipOpen: 'e-material-tooltip-open',\n materialTooltipActive: 'e-tooltip-active',\n materialSlider: 'e-material-slider',\n sliderTrack: 'e-slider-track',\n sliderHandleFocused: 'e-handle-focused',\n verticalSlider: 'e-vertical',\n horizontalSlider: 'e-horizontal',\n sliderHandleStart: 'e-handle-start',\n sliderTooltipStart: 'e-material-tooltip-start',\n sliderTabHandle: 'e-tab-handle',\n sliderButtonIcon: 'e-button-icon',\n sliderSmallSize: 'e-small-size',\n sliderTickPosition: 'e-tick-pos',\n sliderFirstTick: 'e-first-tick',\n sliderLastTick: 'e-last-tick',\n sliderButtonClass: 'e-slider-btn',\n sliderTooltipWrapper: 'e-tooltip-wrap',\n sliderTabTrack: 'e-tab-track',\n sliderTabRange: 'e-tab-range',\n sliderActiveHandle: 'e-handle-active',\n sliderMaterialHandle: 'e-material-handle',\n sliderMaterialRange: 'e-material-range',\n sliderMaterialDefault: 'e-material-default',\n materialTooltipShow: 'e-material-tooltip-show',\n materialTooltipHide: 'e-material-tooltip-hide',\n readonly: 'e-read-only',\n limits: 'e-limits',\n limitBarDefault: 'e-limit-bar',\n limitBarFirst: 'e-limit-first',\n limitBarSecond: 'e-limit-second',\n dragHorizontal: 'e-drag-horizontal',\n dragVertical: 'e-drag-vertical'\n};\n/**\n * The Slider component allows the user to select a value or range\n * of values in-between a min and max range, by dragging the handle over the slider bar.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Slider = /** @class */ (function (_super) {\n __extends(Slider, _super);\n function Slider(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.horDir = 'left';\n _this.verDir = 'bottom';\n _this.transition = {\n handle: 'left .4s cubic-bezier(.25, .8, .25, 1), right .4s cubic-bezier(.25, .8, .25, 1), ' +\n 'top .4s cubic-bezier(.25, .8, .25, 1) , bottom .4s cubic-bezier(.25, .8, .25, 1)',\n rangeBar: 'all .4s cubic-bezier(.25, .8, .25, 1)'\n };\n _this.transitionOnMaterialTooltip = {\n handle: 'left 1ms ease-out, right 1ms ease-out, bottom 1ms ease-out',\n rangeBar: 'left 1ms ease-out, right 1ms ease-out, bottom 1ms ease-out, width 1ms ease-out, height 1ms ease-out'\n };\n _this.scaleTransform = 'transform .4s cubic-bezier(.25, .8, .25, 1)';\n _this.customAriaText = null;\n _this.drag = true;\n return _this;\n }\n Slider.prototype.preRender = function () {\n var localeText = { incrementTitle: 'Increase', decrementTitle: 'Decrease' };\n this.l10n = new L10n('slider', localeText, this.locale);\n this.isElementFocused = false;\n this.tickElementCollection = [];\n this.tooltipFormatInfo = {};\n this.ticksFormatInfo = {};\n this.initCultureInfo();\n this.initCultureFunc();\n };\n Slider.prototype.initCultureFunc = function () {\n this.internationalization = new Internationalization(this.locale);\n };\n Slider.prototype.initCultureInfo = function () {\n this.tooltipFormatInfo.format = (!isNullOrUndefined(this.tooltip.format)) ? this.tooltip.format : null;\n this.ticksFormatInfo.format = (!isNullOrUndefined(this.ticks.format)) ? this.ticks.format : null;\n };\n Slider.prototype.formatString = function (value, formatInfo) {\n var formatValue = null;\n var formatString = null;\n if ((value || value === 0)) {\n formatValue = this.formatNumber(value);\n var numberOfDecimals = this.numberOfDecimals(value);\n formatString = this.internationalization.getNumberFormat(formatInfo)(this.makeRoundNumber(value, numberOfDecimals));\n }\n return { elementVal: formatValue, formatString: formatString };\n };\n ;\n Slider.prototype.formatNumber = function (value) {\n var numberOfDecimals = this.numberOfDecimals(value);\n return this.internationalization.getNumberFormat({\n maximumFractionDigits: numberOfDecimals,\n minimumFractionDigits: numberOfDecimals, useGrouping: false\n })(value);\n };\n ;\n Slider.prototype.numberOfDecimals = function (value) {\n var decimalPart = value.toString().split('.')[1];\n var numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;\n return numberOfDecimals;\n };\n Slider.prototype.makeRoundNumber = function (value, precision) {\n var decimals = precision || 0;\n return Number(value.toFixed(decimals));\n };\n ;\n Slider.prototype.fractionalToInteger = function (value) {\n value = (this.numberOfDecimals(value) === 0) ? Number(value).toFixed(this.noOfDecimals) : value;\n var tens = 1;\n for (var i = 0; i < this.noOfDecimals; i++) {\n tens *= 10;\n }\n value = Number((value * tens).toFixed(0));\n return value;\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n Slider.prototype.render = function () {\n this.initialize();\n this.initRender();\n this.wireEvents();\n this.setZindex();\n };\n Slider.prototype.initialize = function () {\n addClass([this.element], classNames.root);\n this.setCSSClass();\n };\n Slider.prototype.setCSSClass = function (oldCSSClass) {\n if (oldCSSClass) {\n removeClass([this.element], oldCSSClass.split(' '));\n }\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n };\n Slider.prototype.setEnabled = function () {\n var tooltipElement = this.type !== 'Range' ? [this.firstTooltipElement] :\n [this.firstTooltipElement, this.secondTooltipElement];\n if (!this.enabled) {\n addClass([this.sliderContainer], [classNames.sliderDisabled]);\n if (this.tooltip.isVisible && this.tooltip.showOn === 'Always') {\n tooltipElement.forEach(function (tooltipElement) {\n tooltipElement.classList.add(classNames.sliderDisabled);\n });\n }\n this.unwireEvents();\n }\n else {\n removeClass([this.sliderContainer], [classNames.sliderDisabled]);\n if (this.tooltip.isVisible && this.tooltip.showOn === 'Always') {\n tooltipElement.forEach(function (tooltipElement) {\n tooltipElement.classList.remove(classNames.sliderDisabled);\n });\n }\n this.wireEvents();\n }\n };\n Slider.prototype.getTheme = function (container) {\n var theme = window.getComputedStyle(container, ':after').getPropertyValue('content');\n return theme.replace(/['\"]+/g, '');\n };\n /**\n * Initialize the rendering\n * @private\n */\n Slider.prototype.initRender = function () {\n this.sliderContainer = this.createElement('div', { className: classNames.sliderContainer + ' ' + classNames.controlWrapper });\n this.element.parentNode.insertBefore(this.sliderContainer, this.element);\n this.sliderContainer.appendChild(this.element);\n this.sliderTrack = this.createElement('div', { className: classNames.sliderTrack });\n this.element.appendChild(this.sliderTrack);\n this.element.tabIndex = -1;\n this.isMaterial = this.getTheme(this.sliderContainer) === 'material';\n this.isBootstrap = this.getTheme(this.sliderContainer) === 'bootstrap';\n this.setHandler();\n this.createRangeBar();\n if (this.limits.enabled) {\n this.createLimitBar();\n }\n this.setOrientClass();\n this.hiddenInput = (this.createElement('input', {\n attrs: {\n type: 'hidden', value: (isNullOrUndefined(this.value) ? this.min.toString() : this.value.toString()),\n name: this.element.getAttribute('name') || this.element.getAttribute('id') ||\n '_' + (Math.random() * 1000).toFixed(0) + 'slider', class: classNames.sliderHiddenInput\n }\n }));\n this.hiddenInput.tabIndex = -1;\n this.sliderContainer.appendChild(this.hiddenInput);\n if (this.showButtons) {\n this.setButtons();\n }\n this.setEnableRTL();\n if (this.type === 'Range') {\n this.rangeValueUpdate();\n }\n else {\n this.value = isNullOrUndefined(this.value) ? parseFloat(formatUnit(this.min.toString())) : this.value;\n }\n this.previousVal = this.type !== 'Range' ? this.checkHandleValue(parseFloat(formatUnit(this.value.toString()))) :\n [this.checkHandleValue(parseFloat(formatUnit(this.value[0].toString()))),\n this.checkHandleValue(parseFloat(formatUnit(this.value[1].toString())))];\n this.previousChanged = this.previousVal;\n if (!isNullOrUndefined(this.element.hasAttribute('name'))) {\n this.element.removeAttribute('name');\n }\n this.setValue();\n if (this.limits.enabled) {\n this.setLimitBar();\n }\n if (this.ticks.placement !== 'None') {\n this.renderScale();\n }\n if (this.tooltip.isVisible) {\n this.renderTooltip();\n }\n if (!this.enabled) {\n addClass([this.sliderContainer], [classNames.sliderDisabled]);\n }\n else {\n removeClass([this.sliderContainer], [classNames.sliderDisabled]);\n }\n if (this.readonly) {\n addClass([this.sliderContainer], [classNames.readonly]);\n }\n else {\n removeClass([this.sliderContainer], [classNames.readonly]);\n }\n };\n Slider.prototype.createRangeBar = function () {\n if (this.type !== 'Default') {\n this.rangeBar = (this.createElement('div', { attrs: { class: classNames.rangeBar } }));\n this.element.appendChild(this.rangeBar);\n if (this.drag && this.type === 'Range') {\n if (this.orientation === 'Horizontal') {\n this.rangeBar.classList.add(classNames.dragHorizontal);\n }\n else {\n this.rangeBar.classList.add(classNames.dragVertical);\n }\n }\n }\n };\n Slider.prototype.createLimitBar = function () {\n var firstElementClassName = this.type !== 'Range' ? classNames.limitBarDefault :\n classNames.limitBarFirst;\n firstElementClassName += ' ' + classNames.limits;\n this.limitBarFirst = (this.createElement('div', {\n attrs: { class: firstElementClassName }\n }));\n this.element.appendChild(this.limitBarFirst);\n if (this.type === 'Range') {\n this.limitBarSecond = (this.createElement('div', {\n attrs: {\n class: classNames.limitBarSecond + ' ' + classNames.limits\n }\n }));\n this.element.appendChild(this.limitBarSecond);\n }\n };\n Slider.prototype.setOrientClass = function () {\n if (this.orientation !== 'Vertical') {\n this.sliderContainer.classList.remove(classNames.verticalSlider);\n this.sliderContainer.classList.add(classNames.horizontalSlider);\n this.firstHandle.setAttribute('aria-orientation', 'horizontal');\n if (this.type === 'Range') {\n this.secondHandle.setAttribute('aria-orientation', 'horizontal');\n }\n }\n else {\n this.sliderContainer.classList.remove(classNames.horizontalSlider);\n this.sliderContainer.classList.add(classNames.verticalSlider);\n this.firstHandle.setAttribute('aria-orientation', 'vertical');\n if (this.type === 'Range') {\n this.secondHandle.setAttribute('aria-orientation', 'vertical');\n }\n }\n };\n Slider.prototype.setAriaAttributes = function (element) {\n var _this = this;\n var min = this.min;\n var max = this.max;\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n min = this.customValues[0];\n max = this.customValues[this.customValues.length - 1];\n }\n if (this.type !== 'Range') {\n attributes(element, {\n 'aria-valuemin': min.toString(), 'aria-valuemax': max.toString()\n });\n }\n else {\n var range = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 ?\n [[min.toString(), (this.customValues[this.value[1]]).toString()],\n [(this.customValues[this.value[0]]).toString(), max.toString()]] :\n [[min.toString(), this.value[1].toString()], [this.value[0].toString(), max.toString()]];\n range.forEach(function (range, index) {\n var element = index === 0 ? _this.firstHandle : _this.secondHandle;\n if (element) {\n attributes(element, {\n 'aria-valuemin': range[0], 'aria-valuemax': range[1]\n });\n }\n });\n }\n };\n Slider.prototype.createSecondHandle = function () {\n this.secondHandle = this.createElement('div', {\n attrs: {\n class: classNames.sliderHandle, 'role': 'slider', 'aria-labelledby': this.element.id + '_title', tabIndex: '0'\n }\n });\n this.secondHandle.classList.add(classNames.sliderSecondHandle);\n this.element.appendChild(this.secondHandle);\n if (this.isMaterial && this.tooltip.isVisible) {\n this.secondMaterialHandle = this.createElement('div', {\n attrs: {\n class: classNames.sliderHandle + ' ' +\n classNames.sliderMaterialHandle\n }\n });\n this.element.appendChild(this.secondMaterialHandle);\n }\n };\n Slider.prototype.createFirstHandle = function () {\n this.firstHandle = this.createElement('div', {\n attrs: {\n class: classNames.sliderHandle, 'role': 'slider', 'aria-labelledby': this.element.id + '_title', tabIndex: '0'\n }\n });\n this.firstHandle.classList.add(classNames.sliderFirstHandle);\n this.element.appendChild(this.firstHandle);\n if (this.isMaterial && this.tooltip.isVisible) {\n this.firstMaterialHandle = this.createElement('div', {\n attrs: {\n class: classNames.sliderHandle + ' ' +\n classNames.sliderMaterialHandle\n }\n });\n this.element.appendChild(this.firstMaterialHandle);\n }\n };\n Slider.prototype.wireFirstHandleEvt = function (destroy) {\n if (!destroy) {\n EventHandler.add(this.firstHandle, 'mousedown touchstart', this.handleFocus, this);\n EventHandler.add(this.firstHandle, 'transitionend', this.transitionEnd, this);\n EventHandler.add(this.firstHandle, 'mouseenter touchenter', this.handleOver, this);\n EventHandler.add(this.firstHandle, 'mouseleave touchend', this.handleLeave, this);\n }\n else {\n EventHandler.remove(this.firstHandle, 'mousedown touchstart', this.handleFocus);\n EventHandler.remove(this.firstHandle, 'transitionend', this.transitionEnd);\n EventHandler.remove(this.firstHandle, 'mouseenter touchenter', this.handleOver);\n EventHandler.remove(this.firstHandle, 'mouseleave touchend', this.handleLeave);\n }\n };\n Slider.prototype.wireSecondHandleEvt = function (destroy) {\n if (!destroy) {\n EventHandler.add(this.secondHandle, 'mousedown touchstart', this.handleFocus, this);\n EventHandler.add(this.secondHandle, 'transitionend', this.transitionEnd, this);\n EventHandler.add(this.secondHandle, 'mouseenter touchenter', this.handleOver, this);\n EventHandler.add(this.secondHandle, 'mouseleave touchend', this.handleLeave, this);\n }\n else {\n EventHandler.remove(this.secondHandle, 'mousedown touchstart', this.handleFocus);\n EventHandler.remove(this.secondHandle, 'transitionend', this.transitionEnd);\n EventHandler.remove(this.secondHandle, 'mouseenter touchenter', this.handleOver);\n EventHandler.remove(this.secondHandle, 'mouseleave touchend', this.handleLeave);\n }\n };\n Slider.prototype.handleStart = function () {\n var pos = (this.activeHandle === 1) ? this.handlePos1 : this.handlePos2;\n var tooltipElement = this.activeHandle === 1 ? this.firstTooltipElement : this.secondTooltipElement;\n if (pos === 0 && this.type !== 'Range') {\n this.getHandle().classList.add(classNames.sliderHandleStart);\n if (this.isMaterial && this.tooltip.isVisible && this.firstMaterialHandle) {\n this.firstMaterialHandle.classList.add(classNames.sliderHandleStart);\n if (tooltipElement) {\n tooltipElement.classList.add(classNames.sliderTooltipStart);\n }\n }\n }\n else {\n this.getHandle().classList.remove(classNames.sliderHandleStart);\n }\n };\n Slider.prototype.transitionEnd = function (e) {\n this.handleStart();\n this.getHandle().style.transition = 'none';\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = 'none';\n }\n if (this.tooltip.isVisible) {\n var tooltipObj = this.activeHandle === 1 ? this.firstTooltipObj : this.secondTooltipObj;\n var tooltipElement = this.activeHandle === 1 ? this.firstTooltipElement : this.secondTooltipElement;\n if (!this.isMaterial) {\n tooltipObj.animation = { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } };\n this.tooltipAnimation();\n }\n else {\n if (!tooltipElement.classList.contains(classNames.materialTooltipOpen) && e.propertyName !== 'transform') {\n this.openMaterialTooltip();\n }\n else {\n if (this.type === 'Default') {\n tooltipElement.style.transition = this.transition.handle;\n }\n this.refreshTooltip();\n }\n }\n }\n if (this.tooltip.showOn !== 'Always') {\n this.closeTooltip();\n }\n };\n Slider.prototype.handleFocusOut = function () {\n if (this.firstHandle.classList.contains(classNames.sliderHandleFocused)) {\n this.firstHandle.classList.remove(classNames.sliderHandleFocused);\n }\n if (this.type === 'Range') {\n if (this.secondHandle.classList.contains(classNames.sliderHandleFocused)) {\n this.secondHandle.classList.remove(classNames.sliderHandleFocused);\n }\n }\n };\n Slider.prototype.handleFocus = function (e) {\n if (e.currentTarget === this.firstHandle) {\n this.firstHandle.classList.add(classNames.sliderHandleFocused);\n }\n else {\n this.secondHandle.classList.add(classNames.sliderHandleFocused);\n }\n };\n Slider.prototype.handleOver = function (e) {\n if (this.tooltip.isVisible && this.tooltip.showOn === 'Hover') {\n this.tooltipValue();\n var tooltipObj = e.currentTarget === this.firstHandle ? this.firstTooltipObj : this.secondTooltipObj;\n tooltipObj.animation = { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } };\n if (e.currentTarget === this.firstHandle) {\n this.firstTooltipObj.open(this.firstHandle);\n }\n else {\n this.secondTooltipObj.open(this.secondHandle);\n }\n }\n };\n Slider.prototype.handleLeave = function (e) {\n if (this.tooltip.isVisible && this.tooltip.showOn === 'Hover' &&\n !e.currentTarget.classList.contains(classNames.sliderHandleFocused) &&\n !e.currentTarget.classList.contains(classNames.sliderTabHandle)) {\n this.tooltipValue();\n var tooltipObj = e.currentTarget === this.firstHandle ? this.firstTooltipObj : this.secondTooltipObj;\n if (e.currentTarget === this.firstHandle) {\n this.firstTooltipObj.close();\n }\n else {\n this.secondTooltipObj.close();\n }\n tooltipObj.animation = { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } };\n }\n };\n Slider.prototype.setHandler = function () {\n if (this.min > this.max) {\n this.min = this.max;\n }\n this.createFirstHandle();\n if (this.type === 'Range') {\n this.createSecondHandle();\n }\n };\n Slider.prototype.setEnableRTL = function () {\n this.enableRtl && this.orientation !== 'Vertical' ? addClass([this.sliderContainer], classNames.rtl) :\n removeClass([this.sliderContainer], classNames.rtl);\n var preDir = (this.orientation !== 'Vertical') ? this.horDir : this.verDir;\n if (this.enableRtl) {\n this.horDir = 'right';\n this.verDir = 'bottom';\n }\n else {\n this.horDir = 'left';\n this.verDir = 'bottom';\n }\n var currDir = (this.orientation !== 'Vertical') ? this.horDir : this.verDir;\n if (preDir !== currDir) {\n if (this.orientation === 'Horizontal') {\n setStyleAttribute(this.firstHandle, { 'right': '', 'left': 'auto' });\n if (this.type === 'Range') {\n setStyleAttribute(this.secondHandle, { 'top': '', 'left': 'auto' });\n }\n }\n }\n };\n Slider.prototype.tooltipValue = function () {\n var text;\n var value1;\n var value2;\n var args = {\n value: this.value,\n text: ''\n };\n this.setTooltipContent();\n args.text = text = this.firstTooltipObj.content;\n this.trigger('tooltipChange', args);\n this.addTooltipClass(args.text);\n if (text !== args.text) {\n this.customAriaText = args.text;\n this.firstTooltipObj.content = args.text;\n this.setAriaAttrValue(this.firstHandle);\n if (this.type === 'Range') {\n this.secondTooltipObj.content = args.text;\n this.setAriaAttrValue(this.secondHandle);\n }\n }\n };\n Slider.prototype.setTooltipContent = function () {\n var content;\n if (this.type === 'Range') {\n content = this.formatContent(this.tooltipFormatInfo, false);\n this.firstTooltipObj.content = content;\n this.secondTooltipObj.content = content;\n }\n else {\n if (!isNullOrUndefined(this.handleVal1)) {\n content = this.formatContent(this.tooltipFormatInfo, false);\n this.firstTooltipObj.content = content;\n }\n }\n };\n Slider.prototype.formatContent = function (formatInfo, ariaContent) {\n var content = '';\n var handle1 = this.handleVal1;\n var handle2 = this.handleVal2;\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n handle1 = this.customValues[this.handleVal1];\n handle2 = this.customValues[this.handleVal2];\n }\n if (!ariaContent) {\n if (this.type === 'Range') {\n if (this.enableRtl && this.orientation !== 'Vertical') {\n content = (!isNullOrUndefined(formatInfo.format)) ? (this.formatString(handle2, formatInfo)\n .formatString + ' - ' + this.formatString(handle1, formatInfo).formatString) :\n (handle2.toString() + ' - ' + handle1.toString());\n }\n else {\n content = (!isNullOrUndefined(formatInfo.format)) ? (this.formatString(handle1, formatInfo)\n .formatString + ' - ' + this.formatString(handle2, formatInfo).formatString) :\n (handle1.toString() + ' - ' + handle2.toString());\n }\n }\n else {\n if (!isNullOrUndefined(handle1)) {\n content = (!isNullOrUndefined(formatInfo.format)) ?\n this.formatString(handle1, formatInfo).formatString : handle1.toString();\n }\n }\n return content;\n }\n else {\n if (this.type === 'Range') {\n if (this.enableRtl && this.orientation !== 'Vertical') {\n content = (!isNullOrUndefined(this.tooltip) && !isNullOrUndefined(this.tooltip.format)) ?\n (this.formatString(handle2, formatInfo).elementVal + ' - ' +\n this.formatString(handle1, formatInfo).elementVal) :\n (handle2.toString() + ' - ' + handle1.toString());\n }\n else {\n content = (!isNullOrUndefined(this.tooltip) && !isNullOrUndefined(this.tooltip.format)) ?\n (this.formatString(handle1, formatInfo).elementVal + ' - ' +\n this.formatString(handle2, formatInfo).elementVal) :\n (handle1.toString() + ' - ' + handle2.toString());\n }\n }\n else {\n if (!isNullOrUndefined(handle1)) {\n content = (!isNullOrUndefined(this.tooltip) && !isNullOrUndefined(this.tooltip.format)) ?\n this.formatString(handle1, formatInfo).elementVal : handle1.toString();\n }\n }\n return content;\n }\n };\n Slider.prototype.addTooltipClass = function (content) {\n var _this = this;\n if (this.isMaterial && this.tooltip.isVisible) {\n var count_1 = content.toString().length;\n var tooltipElement = this.type !== 'Range' ? [this.firstTooltipElement] :\n [this.firstTooltipElement, this.secondTooltipElement];\n tooltipElement.forEach(function (element, index) {\n if (!element) {\n var cssClass = count_1 > 4 ? classNames.sliderMaterialRange : classNames.sliderMaterialDefault;\n !index ? _this.firstTooltipObj.cssClass = classNames.sliderTooltip + ' ' + cssClass :\n _this.secondTooltipObj.cssClass = classNames.sliderTooltip + ' ' + cssClass;\n }\n else {\n if (count_1 > 4) {\n element.classList.remove(classNames.sliderMaterialDefault);\n if (!element.classList.contains(classNames.sliderMaterialRange)) {\n element.classList.add(classNames.sliderMaterialRange);\n element.style.transform = 'scale(1)';\n }\n }\n else {\n element.classList.remove(classNames.sliderMaterialRange);\n if (!element.classList.contains(classNames.sliderMaterialDefault)) {\n element.classList.add(classNames.sliderMaterialDefault);\n element.style.transform = _this.getTooltipTransformProperties(_this.previousTooltipClass).rotate;\n }\n }\n }\n });\n }\n };\n Slider.prototype.tooltipPlacement = function () {\n var tooltipPosition;\n if (this.orientation === 'Horizontal') {\n this.tooltip.placement === 'Before' ? tooltipPosition = 'TopCenter' : tooltipPosition = 'BottomCenter';\n }\n else {\n this.tooltip.placement === 'Before' ? tooltipPosition = 'LeftCenter' : tooltipPosition = 'RightCenter';\n }\n this.firstTooltipObj.position = tooltipPosition;\n if (this.type === 'Range') {\n this.secondTooltipObj.position = tooltipPosition;\n }\n if (this.isMaterial) {\n this.firstTooltipObj.showTipPointer = true;\n this.setProperties({ tooltip: { showOn: 'Always' } }, true);\n this.firstTooltipObj.height = 30;\n if (this.type === 'Range') {\n this.secondTooltipObj.showTipPointer = true;\n this.secondTooltipObj.height = 30;\n }\n }\n };\n Slider.prototype.tooltipBeforeOpen = function (args) {\n var tooltipElement = args.target === this.firstHandle ? this.firstTooltipElement = args.element :\n this.secondTooltipElement = args.element;\n if (this.tooltip.cssClass !== '') {\n addClass([tooltipElement], this.tooltip.cssClass.split(' '));\n }\n args.target.removeAttribute('aria-describedby');\n if (this.isMaterial && this.tooltip.isVisible) {\n var transformProperties = this.getTooltipTransformProperties(this.previousTooltipClass);\n tooltipElement.firstChild.classList.add(classNames.materialTooltipHide);\n this.handleStart();\n if (tooltipElement.firstElementChild.innerText.length > 4) {\n tooltipElement.style.transform = transformProperties.translate + \" scale(0.01)\";\n }\n else {\n tooltipElement.style.transform = transformProperties.translate + \" \" + transformProperties.rotate + \" scale(0.01)\";\n }\n }\n if (this.isBootstrap) {\n switch (this.bootstrapCollisionArgs.collidedPosition) {\n case 'TopCenter':\n this.firstTooltipObj.setProperties({ 'offsetY': -(bootstrapTooltipOffset) }, false);\n if (this.type === 'Range') {\n this.secondTooltipObj.setProperties({ 'offsetY': -(bootstrapTooltipOffset) }, false);\n }\n break;\n case 'BottomCenter':\n this.firstTooltipObj.setProperties({ 'offsetY': bootstrapTooltipOffset }, false);\n if (this.type === 'Range') {\n this.secondTooltipObj.setProperties({ 'offsetY': bootstrapTooltipOffset }, false);\n }\n break;\n case 'LeftCenter':\n this.firstTooltipObj.setProperties({ 'offsetX': -(bootstrapTooltipOffset) }, false);\n if (this.type === 'Range') {\n this.secondTooltipObj.setProperties({ 'offsetX': -(bootstrapTooltipOffset) }, false);\n }\n break;\n case 'RightCenter':\n this.firstTooltipObj.setProperties({ 'offsetX': bootstrapTooltipOffset }, false);\n if (this.type === 'Range') {\n this.secondTooltipObj.setProperties({ 'offsetX': bootstrapTooltipOffset }, false);\n }\n break;\n default:\n break;\n }\n }\n };\n Slider.prototype.wireMaterialTooltipEvent = function (destroy) {\n if (this.isMaterial && this.tooltip.isVisible) {\n if (!destroy) {\n EventHandler.add(this.firstTooltipElement, 'mousedown touchstart', this.sliderDown, this);\n if (this.type === 'Range') {\n EventHandler.add(this.secondTooltipElement, 'mousedown touchstart', this.sliderDown, this);\n }\n }\n else {\n EventHandler.remove(this.firstTooltipElement, 'mousedown touchstart', this.sliderDown);\n if (this.type === 'Range') {\n EventHandler.remove(this.secondTooltipElement, 'mousedown touchstart', this.sliderDown);\n }\n }\n }\n };\n Slider.prototype.tooltipPositionCalculation = function (position) {\n var cssClass;\n switch (position) {\n case 'TopCenter':\n cssClass = classNames.horizontalTooltipBefore;\n break;\n case 'BottomCenter':\n cssClass = classNames.horizontalTooltipAfter;\n break;\n case 'LeftCenter':\n cssClass = classNames.verticalTooltipBefore;\n break;\n case 'RightCenter':\n cssClass = classNames.verticalTooltipAfter;\n break;\n }\n return cssClass;\n };\n Slider.prototype.getTooltipTransformProperties = function (className) {\n if (this.firstTooltipElement) {\n var position = void 0;\n if (this.orientation === 'Horizontal') {\n position = (this.firstTooltipElement.clientHeight + 14) - (this.firstTooltipElement.clientHeight / 2);\n }\n else {\n position = (this.firstTooltipElement.clientWidth + 14) - (this.firstTooltipElement.clientWidth / 2);\n }\n var transformProperties = this.orientation === 'Horizontal' ?\n (className === classNames.horizontalTooltipBefore ? { rotate: 'rotate(45deg)', translate: \"translateY(\" + position + \"px)\" } :\n { rotate: 'rotate(225deg)', translate: \"translateY(\" + -(position) + \"px)\" }) :\n (className === classNames.verticalTooltipBefore ? { rotate: 'rotate(-45deg)', translate: \"translateX(\" + position + \"px)\" } :\n { rotate: 'rotate(-225deg)', translate: \"translateX(\" + (-position) + \"px)\" });\n return transformProperties;\n }\n return undefined;\n };\n Slider.prototype.openMaterialTooltip = function () {\n var _this = this;\n this.refreshTooltip();\n var tooltipElement = this.activeHandle === 1 ? this.firstTooltipElement : this.secondTooltipElement;\n var handle = this.activeHandle === 1 ? this.firstMaterialHandle : this.secondMaterialHandle;\n if (tooltipElement.firstChild.classList.contains(classNames.materialTooltipHide)) {\n tooltipElement.firstChild.classList.remove(classNames.materialTooltipHide);\n }\n tooltipElement.firstChild.classList.add(classNames.materialTooltipShow);\n this.getHandle().style.cursor = 'default';\n tooltipElement.style.transition = this.scaleTransform;\n tooltipElement.classList.add(classNames.materialTooltipOpen);\n handle.style.transform = 'scale(0)';\n if (tooltipElement.firstElementChild.innerText.length > 4) {\n tooltipElement.style.transform = 'scale(1)';\n }\n else {\n tooltipElement.style.transform = this.getTooltipTransformProperties(this.previousTooltipClass).rotate;\n }\n if (this.type === 'Default') {\n setTimeout(function () { tooltipElement.style.transition = _this.transition.handle; }, 2500);\n }\n else {\n setTimeout(function () { tooltipElement.style.transition = 'none'; }, 2500);\n }\n };\n Slider.prototype.checkTooltipPosition = function (args) {\n var tooltipPosition = args.target === this.firstHandle ? this.firstHandleTooltipPosition :\n this.secondHandleTooltipPosition;\n if (this.isMaterial && (tooltipPosition === undefined || tooltipPosition !== args.collidedPosition)) {\n var tooltipClass = this.tooltipPositionCalculation(args.collidedPosition);\n args.element.classList.remove(this.previousTooltipClass);\n args.element.classList.add(tooltipClass);\n this.previousTooltipClass = tooltipClass;\n if (args.element.style.transform && args.element.classList.contains(classNames.materialTooltipOpen) &&\n args.element.firstElementChild.innerText.length < 4) {\n args.element.style.transform = this.getTooltipTransformProperties(this.previousTooltipClass).rotate;\n }\n if (args.target === this.firstHandle) {\n this.firstHandleTooltipPosition = args.collidedPosition;\n }\n else {\n this.secondHandleTooltipPosition = args.collidedPosition;\n }\n }\n this.bootstrapCollisionArgs = args;\n };\n Slider.prototype.renderTooltip = function () {\n if (this.tooltip.showOn === 'Auto') {\n this.setProperties({ tooltip: { showOn: 'Hover' } }, true);\n }\n var tooltipPointer = this.isBootstrap ? true : false;\n this.firstTooltipObj = new Tooltip({\n showTipPointer: tooltipPointer,\n cssClass: classNames.sliderTooltip,\n animation: { open: { effect: 'None' }, close: { effect: 'None' } },\n opensOn: 'Custom',\n beforeOpen: this.tooltipBeforeOpen.bind(this),\n beforeCollision: this.checkTooltipPosition.bind(this),\n afterClose: this.tooltipAfterClose.bind(this)\n });\n this.firstTooltipObj.appendTo(this.firstHandle);\n if (this.type === 'Range') {\n this.secondTooltipObj = new Tooltip({\n showTipPointer: tooltipPointer,\n cssClass: classNames.sliderTooltip,\n animation: { open: { effect: 'None' }, close: { effect: 'None' } },\n opensOn: 'Custom',\n beforeOpen: this.tooltipBeforeOpen.bind(this),\n beforeCollision: this.checkTooltipPosition.bind(this),\n afterClose: this.tooltipAfterClose.bind(this)\n });\n this.secondTooltipObj.appendTo(this.secondHandle);\n }\n this.tooltipPlacement();\n this.firstHandle.style.transition = 'none';\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = 'none';\n }\n if (this.type === 'Range') {\n this.secondHandle.style.transition = 'none';\n }\n if (this.isMaterial) {\n this.sliderContainer.classList.add(classNames.materialSlider);\n this.tooltipValue();\n this.firstTooltipObj.open(this.firstHandle);\n if (this.type === 'Range') {\n this.secondTooltipObj.open(this.secondHandle);\n }\n }\n };\n Slider.prototype.tooltipAfterClose = function (args) {\n if (args.element === this.firstTooltipElement) {\n this.firstTooltipElement = undefined;\n }\n else {\n this.secondTooltipElement = undefined;\n }\n };\n Slider.prototype.setButtons = function () {\n this.firstBtn = this.createElement('div', { className: classNames.sliderButton + ' ' + classNames.firstButton });\n this.firstBtn.appendChild(this.createElement('span', { className: classNames.sliderButtonIcon }));\n this.firstBtn.tabIndex = -1;\n this.secondBtn = this.createElement('div', { className: classNames.sliderButton + ' ' + classNames.secondButton });\n this.secondBtn.appendChild(this.createElement('span', { className: classNames.sliderButtonIcon }));\n this.secondBtn.tabIndex = -1;\n this.sliderContainer.classList.add(classNames.sliderButtonClass);\n this.sliderContainer.appendChild(this.firstBtn);\n this.sliderContainer.appendChild(this.secondBtn);\n this.sliderContainer.appendChild(this.element);\n this.buttonTitle();\n };\n Slider.prototype.buttonTitle = function () {\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n this.l10n.setLocale(this.locale);\n var decrementTitle = this.l10n.getConstant('decrementTitle');\n var incrementTitle = this.l10n.getConstant('incrementTitle');\n attributes(enabledRTL ? this.secondBtn : this.firstBtn, { 'aria-label': decrementTitle, title: decrementTitle });\n attributes(enabledRTL ? this.firstBtn : this.secondBtn, { 'aria-label': incrementTitle, title: incrementTitle });\n };\n Slider.prototype.buttonFocusOut = function () {\n if (this.isMaterial) {\n this.getHandle().classList.remove('e-large-thumb-size');\n }\n };\n Slider.prototype.repeatButton = function (args) {\n var buttonElement = args.target.parentElement;\n var tooltipElement = this.activeHandle === 1 ? this.firstTooltipElement : this.secondTooltipElement;\n if (!tooltipElement && this.tooltip.isVisible) {\n this.openTooltip();\n }\n var hVal = this.handleValueUpdate();\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n var value;\n if (args.target.parentElement.classList.contains(classNames.firstButton)\n || args.target.classList.contains(classNames.firstButton)) {\n enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), true)) :\n (value = this.add(hVal, parseFloat(this.step.toString()), false));\n }\n else if (args.target.parentElement.classList.contains(classNames.secondButton)\n || (args.target.classList.contains(classNames.secondButton))) {\n enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), false)) :\n (value = this.add(hVal, parseFloat(this.step.toString()), true));\n }\n if (this.limits.enabled) {\n value = this.getLimitCorrectedValues(value);\n }\n if (value >= this.min && value <= this.max) {\n this.changeHandleValue(value);\n this.refreshTooltipOnMove();\n }\n };\n Slider.prototype.repeatHandlerMouse = function (args) {\n args.preventDefault();\n if (args.type === ('mousedown') || args.type === ('touchstart')) {\n this.buttonClick(args);\n this.repeatInterval = setInterval(this.repeatButton.bind(this), 180, args);\n }\n };\n Slider.prototype.materialChange = function () {\n if (!this.getHandle().classList.contains('e-large-thumb-size')) {\n this.getHandle().classList.add('e-large-thumb-size');\n }\n };\n Slider.prototype.repeatHandlerUp = function (e) {\n this.changeEvent('changed');\n if (this.tooltip.isVisible && this.tooltip.showOn !== 'Always' && !this.isMaterial) {\n this.closeTooltip();\n }\n clearInterval(this.repeatInterval);\n this.getHandle().focus();\n };\n Slider.prototype.customTickCounter = function (bigNum) {\n var tickCount = 4;\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n if (bigNum > 4) {\n tickCount = 3;\n }\n if (bigNum > 7) {\n tickCount = 2;\n }\n if (bigNum > 14) {\n tickCount = 1;\n }\n if (bigNum > 28) {\n tickCount = 0;\n }\n }\n return tickCount;\n };\n Slider.prototype.renderScale = function () {\n var orien = this.orientation === 'Vertical' ? 'v' : 'h';\n var spanText;\n this.noOfDecimals = this.numberOfDecimals(this.step);\n this.ul = this.createElement('ul', {\n className: classNames.scale + ' ' + 'e-' + orien + '-scale ' + classNames.tick + '-' + this.ticks.placement.toLowerCase(),\n attrs: { role: 'presentation', tabIndex: '-1', 'aria-hidden': 'true' }\n });\n this.ul.style.zIndex = '-1';\n if (Browser.isAndroid && orien === 'h') {\n this.ul.classList.add(classNames.sliderTickPosition);\n }\n var smallStep = this.ticks.smallStep;\n if (!this.ticks.showSmallTicks) {\n this.ticks.largeStep > 0 ? (smallStep = this.ticks.largeStep) :\n (smallStep = (parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min))));\n }\n else if (smallStep <= 0) {\n smallStep = parseFloat(formatUnit(this.step));\n }\n var min = this.fractionalToInteger(this.min);\n var max = this.fractionalToInteger(this.max);\n var steps = this.fractionalToInteger(smallStep);\n var bigNum = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 && this.customValues.length - 1;\n var customStep = this.customTickCounter(bigNum);\n var count = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 ?\n (bigNum * customStep) + bigNum : Math.abs((max - min) / steps);\n this.element.appendChild(this.ul);\n var li;\n var start = parseFloat(this.min.toString());\n if (orien === 'v') {\n start = parseFloat(this.max.toString());\n }\n var left = 0;\n var islargeTick;\n var tickWidth = 100 / count;\n if (tickWidth === Infinity) {\n tickWidth = 5;\n }\n for (var i = 0, y = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 ?\n this.customValues.length - 1 : 0, k = 0; i <= count; i++) {\n li = (this.createElement('li', {\n attrs: {\n class: classNames.tick, role: 'presentation', tabIndex: '-1',\n 'aria-hidden': 'true'\n }\n }));\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n islargeTick = i % (customStep + 1) === 0;\n if (islargeTick) {\n if (orien === 'h') {\n start = this.customValues[k];\n k++;\n }\n else {\n start = this.customValues[y];\n y--;\n }\n li.setAttribute('title', start.toString());\n }\n }\n else {\n li.setAttribute('title', start.toString());\n if (this.numberOfDecimals(this.max) === 0 && this.numberOfDecimals(this.min) === 0 &&\n this.numberOfDecimals(this.step) === 0) {\n if (orien === 'h') {\n islargeTick = ((start - parseFloat(this.min.toString())) % this.ticks.largeStep === 0) ? true : false;\n }\n else {\n islargeTick = (Math.abs(start - parseFloat(this.max.toString())) % this.ticks.largeStep === 0) ? true : false;\n }\n }\n else {\n var largestep = this.fractionalToInteger(this.ticks.largeStep);\n var startValue = this.fractionalToInteger(start);\n islargeTick = ((startValue - min) % largestep === 0) ? true : false;\n }\n }\n if (islargeTick) {\n li.classList.add(classNames.large);\n }\n (orien === 'h') ? (li.style.width = tickWidth + '%') : (li.style.height = tickWidth + '%');\n var repeat = islargeTick ? (this.ticks.placement === 'Both' ? 2 : 1) : 0;\n if (islargeTick) {\n for (var j = 0; j < repeat; j++) {\n this.createTick(li, start);\n }\n }\n else if (isNullOrUndefined(this.customValues)) {\n this.formatTicksValue(li, start);\n }\n this.ul.appendChild(li);\n this.tickElementCollection.push(li);\n var decimalPoints = void 0;\n if (isNullOrUndefined(this.customValues)) {\n if (this.numberOfDecimals(smallStep) > this.numberOfDecimals(start)) {\n decimalPoints = this.numberOfDecimals(smallStep);\n }\n else {\n decimalPoints = this.numberOfDecimals(start);\n }\n if (orien === 'h') {\n start = this.makeRoundNumber(start + smallStep, decimalPoints);\n }\n else {\n start = this.makeRoundNumber(start - smallStep, decimalPoints);\n }\n left = this.makeRoundNumber(left + smallStep, decimalPoints);\n }\n }\n this.tickesAlignment(orien, tickWidth);\n };\n Slider.prototype.tickesAlignment = function (orien, tickWidth) {\n this.firstChild = this.ul.firstElementChild;\n this.lastChild = this.ul.lastElementChild;\n this.firstChild.classList.add(classNames.sliderFirstTick);\n this.lastChild.classList.add(classNames.sliderLastTick);\n this.sliderContainer.classList.add(classNames.scale + '-' + this.ticks.placement.toLowerCase());\n if (orien === 'h') {\n this.firstChild.style.width = tickWidth / 2 + '%';\n this.lastChild.style.width = tickWidth / 2 + '%';\n }\n else {\n this.firstChild.style.height = tickWidth / 2 + '%';\n this.lastChild.style.height = tickWidth / 2 + '%';\n }\n var eventArgs = { ticksWrapper: this.ul, tickElements: this.tickElementCollection };\n this.trigger('renderedTicks', eventArgs);\n this.scaleAlignment();\n };\n Slider.prototype.createTick = function (li, start) {\n var span = this.createElement('span', {\n className: classNames.tickValue + ' ' + classNames.tick + '-' + this.ticks.placement.toLowerCase(),\n attrs: { role: 'presentation', tabIndex: '-1', 'aria-hidden': 'true' }\n });\n li.appendChild(span);\n span.innerHTML = isNullOrUndefined(this.customValues) ? this.formatTicksValue(li, start) : start;\n };\n Slider.prototype.formatTicksValue = function (li, start) {\n var tickText = this.formatNumber(start);\n var text = !isNullOrUndefined(this.ticks) && !isNullOrUndefined(this.ticks.format) ?\n this.formatString(start, this.ticksFormatInfo).formatString : tickText;\n var eventArgs = { value: start, text: text, tickElement: li };\n this.trigger('renderingTicks', eventArgs);\n li.setAttribute('title', eventArgs.text.toString());\n return eventArgs.text.toString();\n };\n Slider.prototype.scaleAlignment = function () {\n this.tickValuePosition();\n var smallTick = 12;\n var largeTick = 20;\n var half = largeTick / 2;\n var orien = this.orientation === 'Vertical' ? 'v' : 'h';\n if (this.orientation === 'Vertical') {\n (this.element.getBoundingClientRect().width <= 15) ?\n this.sliderContainer.classList.add(classNames.sliderSmallSize) :\n this.sliderContainer.classList.remove(classNames.sliderSmallSize);\n }\n else {\n (this.element.getBoundingClientRect().height <= 15) ?\n this.sliderContainer.classList.add(classNames.sliderSmallSize) :\n this.sliderContainer.classList.remove(classNames.sliderSmallSize);\n }\n };\n Slider.prototype.tickValuePosition = function () {\n var first = this.firstChild.getBoundingClientRect();\n var firstChild;\n var smallStep = this.ticks.smallStep;\n var count = Math.abs((parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min)))) / smallStep;\n if (this.firstChild.children.length > 0) {\n firstChild = this.firstChild.children[0].getBoundingClientRect();\n }\n var tickElements = [this.sliderContainer.querySelectorAll('.' + classNames.tick + '.' +\n classNames.large + ' .' + classNames.tickValue)];\n var other;\n if (this.ticks.placement === 'Both') {\n other = [].slice.call(tickElements[0], 2);\n }\n else {\n other = [].slice.call(tickElements[0], 1);\n }\n var tickWidth = this.orientation === 'Vertical' ?\n (first.height * 2) : (first.width * 2);\n for (var i = 0; i < this.firstChild.children.length; i++) {\n if (this.orientation === 'Vertical') {\n this.firstChild.children[i].style.top = -(firstChild.height / 2) + 'px';\n }\n else {\n if (!this.enableRtl) {\n this.firstChild.children[i].style.left = -(firstChild.width / 2) + 'px';\n }\n else {\n this.firstChild.children[i].style.left = (tickWidth -\n this.firstChild.children[i].getBoundingClientRect().width) / 2 + 'px';\n }\n }\n }\n for (var i = 0; i < other.length; i++) {\n var otherChild = other[i].getBoundingClientRect();\n if (this.orientation === 'Vertical') {\n setStyleAttribute(other[i], { top: (tickWidth - otherChild.height) / 2 + 'px' });\n }\n else {\n setStyleAttribute(other[i], { left: (tickWidth - otherChild.width) / 2 + 'px' });\n }\n }\n if (this.enableRtl && this.lastChild.children.length && count !== 0) {\n this.lastChild.children[0].style.left = -(this.lastChild.getBoundingClientRect().width / 2) + 'px';\n if (this.ticks.placement === 'Both') {\n this.lastChild.children[1].style.left = -(this.lastChild.getBoundingClientRect().width / 2) + 'px';\n }\n }\n if (count === 0) {\n if (this.orientation === 'Horizontal') {\n if (!this.enableRtl) {\n this.firstChild.classList.remove(classNames.sliderLastTick);\n this.firstChild.style.left = this.firstHandle.style.left;\n }\n else {\n this.firstChild.classList.remove(classNames.sliderLastTick);\n this.firstChild.style.right = this.firstHandle.style.right;\n this.firstChild.children[0].style.left =\n (this.firstChild.getBoundingClientRect().width / 2) + 2 + 'px';\n if (this.ticks.placement === 'Both') {\n this.firstChild.children[1].style.left =\n (this.firstChild.getBoundingClientRect().width / 2) + 2 + 'px';\n }\n }\n }\n if (this.orientation === 'Vertical') {\n this.firstChild.classList.remove(classNames.sliderLastTick);\n }\n }\n };\n Slider.prototype.setAriaAttrValue = function (element) {\n var ariaValueText;\n var isTickFormatted = ((!isNullOrUndefined(this.ticks) && !isNullOrUndefined(this.ticks.format))) ? true : false;\n var text = !isTickFormatted ?\n this.formatContent(this.ticksFormatInfo, false) : this.formatContent(this.tooltipFormatInfo, false);\n var valuenow = isTickFormatted ? this.formatContent(this.ticksFormatInfo, true) :\n this.formatContent(this.tooltipFormatInfo, true);\n text = (!this.customAriaText) ? (text) : (this.customAriaText);\n if (text.split(' - ').length === 2) {\n ariaValueText = text.split(' - ');\n }\n else {\n ariaValueText = [text, text];\n }\n this.setAriaAttributes(element);\n if (this.type !== 'Range') {\n attributes(element, { 'aria-valuenow': valuenow, 'aria-valuetext': text });\n }\n else {\n (!this.enableRtl) ? ((element === this.firstHandle) ?\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[0], 'aria-valuetext': ariaValueText[0] }) :\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[1], 'aria-valuetext': ariaValueText[1] })) :\n ((element === this.firstHandle) ?\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[1], 'aria-valuetext': ariaValueText[1] }) :\n attributes(element, { 'aria-valuenow': valuenow.split(' - ')[0], 'aria-valuetext': ariaValueText[0] }));\n }\n };\n Slider.prototype.handleValueUpdate = function () {\n var hVal;\n if (this.type === 'Range') {\n if (this.activeHandle === 1) {\n hVal = this.handleVal1;\n }\n else {\n hVal = this.handleVal2;\n }\n }\n else {\n hVal = this.handleVal1;\n }\n return hVal;\n };\n Slider.prototype.getLimitCorrectedValues = function (value) {\n if (this.type === 'MinRange' || this.type === 'Default') {\n value = (this.getLimitValueAndPosition(value, this.limits.minStart, this.limits.minEnd))[0];\n }\n else {\n if (this.activeHandle === 1) {\n value = (this.getLimitValueAndPosition(value, this.limits.minStart, this.limits.minEnd))[0];\n }\n else {\n value = (this.getLimitValueAndPosition(value, this.limits.maxStart, this.limits.maxEnd))[0];\n }\n }\n return value;\n };\n Slider.prototype.focusSliderElement = function () {\n if (!this.isElementFocused) {\n this.element.focus();\n this.isElementFocused = true;\n }\n };\n Slider.prototype.buttonClick = function (args) {\n this.focusSliderElement();\n var value;\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n var hVal = this.handleValueUpdate();\n if ((args.keyCode === 40) || (args.keyCode === 37)\n || args.currentTarget.classList.contains(classNames.firstButton)) {\n enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), true)) :\n (value = this.add(hVal, parseFloat(this.step.toString()), false));\n }\n else if ((args.keyCode === 38) || (args.keyCode === 39) ||\n args.currentTarget.classList.contains(classNames.secondButton)) {\n enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), false)) :\n (value = this.add(hVal, parseFloat(this.step.toString()), true));\n }\n else if ((args.keyCode === 33\n || args.currentTarget.classList.contains(classNames.firstButton))) {\n enabledRTL ? (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), false)) :\n (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), true));\n }\n else if ((args.keyCode === 34) ||\n args.currentTarget.classList.contains(classNames.secondButton)) {\n enabledRTL ? (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), true)) :\n (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), false));\n }\n else if ((args.keyCode === 36)) {\n value = parseFloat(this.min.toString());\n }\n else if ((args.keyCode === 35)) {\n value = parseFloat(this.max.toString());\n }\n if (this.limits.enabled) {\n value = this.getLimitCorrectedValues(value);\n }\n this.changeHandleValue(value);\n if (this.isMaterial && !this.tooltip.isVisible &&\n !this.getHandle().classList.contains(classNames.sliderTabHandle)) {\n this.materialChange();\n }\n this.tooltipAnimation();\n this.getHandle().focus();\n if (args.currentTarget.classList.contains(classNames.firstButton)) {\n EventHandler.add(this.firstBtn, 'mouseup touchend', this.buttonUp, this);\n }\n if (args.currentTarget.classList.contains(classNames.secondButton)) {\n EventHandler.add(this.secondBtn, 'mouseup touchend', this.buttonUp, this);\n }\n };\n Slider.prototype.tooltipAnimation = function () {\n if (this.tooltip.isVisible) {\n var tooltipObj = this.activeHandle === 1 ? this.firstTooltipObj : this.secondTooltipObj;\n var tooltipElement = this.activeHandle === 1 ? this.firstTooltipElement : this.secondTooltipElement;\n if (this.isMaterial) {\n !tooltipElement.classList.contains(classNames.materialTooltipOpen) ? this.openMaterialTooltip() : this.refreshTooltip();\n }\n else {\n tooltipObj.animation = { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } };\n this.openTooltip();\n }\n }\n };\n Slider.prototype.buttonUp = function (args) {\n if (this.tooltip.isVisible) {\n if (!this.isMaterial) {\n var tooltipObj = this.activeHandle === 1 ? this.firstTooltipObj : this.secondTooltipObj;\n tooltipObj.animation = { open: { effect: 'None' }, close: { effect: 'None' } };\n }\n }\n if (args.currentTarget.classList.contains(classNames.firstButton)) {\n EventHandler.remove(this.firstBtn, 'mouseup touchend', this.buttonUp);\n }\n if (args.currentTarget.classList.contains(classNames.secondButton)) {\n EventHandler.remove(this.secondBtn, 'mouseup touchend', this.buttonUp);\n }\n };\n Slider.prototype.setRangeBar = function () {\n if (this.orientation === 'Horizontal') {\n if (this.type === 'MinRange') {\n this.enableRtl ? (this.rangeBar.style.right = '0px') : (this.rangeBar.style.left = '0px');\n setStyleAttribute(this.rangeBar, { 'width': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });\n }\n else {\n this.enableRtl ? (this.rangeBar.style.right =\n this.handlePos1 + 'px') : (this.rangeBar.style.left = this.handlePos1 + 'px');\n setStyleAttribute(this.rangeBar, { 'width': this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n else {\n if (this.type === 'MinRange') {\n this.rangeBar.style.bottom = '0px';\n setStyleAttribute(this.rangeBar, { 'height': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });\n }\n else {\n this.rangeBar.style.bottom = this.handlePos1 + 'px';\n setStyleAttribute(this.rangeBar, { 'height': this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n };\n Slider.prototype.checkValidValueAndPos = function (value) {\n value = this.checkHandleValue(value);\n value = this.checkHandlePosition(value);\n return value;\n };\n Slider.prototype.setLimitBarPositions = function (fromMinPostion, fromMaxpostion, toMinPostion, toMaxpostion) {\n if (this.orientation === 'Horizontal') {\n if (!this.enableRtl) {\n this.limitBarFirst.style.left = fromMinPostion + 'px';\n this.limitBarFirst.style.width = (fromMaxpostion - fromMinPostion) + 'px';\n }\n else {\n this.limitBarFirst.style.right = fromMinPostion + 'px';\n this.limitBarFirst.style.width = (fromMaxpostion - fromMinPostion) + 'px';\n }\n }\n else {\n this.limitBarFirst.style.bottom = fromMinPostion + 'px';\n this.limitBarFirst.style.height = (fromMaxpostion - fromMinPostion) + 'px';\n }\n if (this.type === 'Range') {\n if (this.orientation === 'Horizontal') {\n if (!this.enableRtl) {\n this.limitBarSecond.style.left = toMinPostion + 'px';\n this.limitBarSecond.style.width = (toMaxpostion - toMinPostion) + 'px';\n }\n else {\n this.limitBarSecond.style.right = toMinPostion + 'px';\n this.limitBarSecond.style.width = (toMaxpostion - toMinPostion) + 'px';\n }\n }\n else {\n this.limitBarSecond.style.bottom = toMinPostion + 'px';\n this.limitBarSecond.style.height = (toMaxpostion - toMinPostion) + 'px';\n }\n }\n };\n Slider.prototype.setLimitBar = function () {\n if (this.type === 'Default' || this.type === 'MinRange') {\n var fromPosition = (this.getLimitValueAndPosition(this.limits.minStart, this.limits.minStart, this.limits.minEnd, true))[0];\n fromPosition = this.checkValidValueAndPos(fromPosition);\n var toPosition = (this.getLimitValueAndPosition(this.limits.minEnd, this.limits.minStart, this.limits.minEnd, true))[0];\n toPosition = this.checkValidValueAndPos(toPosition);\n this.setLimitBarPositions(fromPosition, toPosition);\n }\n else if (this.type === 'Range') {\n var fromMinPostion = (this.getLimitValueAndPosition(this.limits.minStart, this.limits.minStart, this.limits.minEnd, true))[0];\n fromMinPostion = this.checkValidValueAndPos(fromMinPostion);\n var fromMaxpostion = (this.getLimitValueAndPosition(this.limits.minEnd, this.limits.minStart, this.limits.minEnd, true))[0];\n fromMaxpostion = this.checkValidValueAndPos(fromMaxpostion);\n var toMinPostion = (this.getLimitValueAndPosition(this.limits.maxStart, this.limits.maxStart, this.limits.maxEnd, true))[0];\n toMinPostion = this.checkValidValueAndPos(toMinPostion);\n var toMaxpostion = (this.getLimitValueAndPosition(this.limits.maxEnd, this.limits.maxStart, this.limits.maxEnd, true))[0];\n toMaxpostion = this.checkValidValueAndPos(toMaxpostion);\n this.setLimitBarPositions(fromMinPostion, fromMaxpostion, toMinPostion, toMaxpostion);\n }\n };\n Slider.prototype.getLimitValueAndPosition = function (currentValue, minValue, maxValue, limitBar) {\n if (isNullOrUndefined(minValue)) {\n minValue = this.min;\n if (isNullOrUndefined(currentValue) && limitBar) {\n currentValue = minValue;\n }\n }\n if (isNullOrUndefined(maxValue)) {\n maxValue = this.max;\n if (isNullOrUndefined(currentValue) && limitBar) {\n currentValue = maxValue;\n }\n }\n if (currentValue < minValue) {\n currentValue = minValue;\n }\n if (currentValue > maxValue) {\n currentValue = maxValue;\n }\n return [currentValue, this.checkHandlePosition(currentValue)];\n };\n Slider.prototype.setValue = function () {\n if (!isNullOrUndefined(this.customValues) && this.customValues.length > 0) {\n this.min = 0;\n this.max = this.customValues.length - 1;\n }\n this.setAriaAttributes(this.firstHandle);\n this.handleVal1 = isNullOrUndefined(this.value) ? this.checkHandleValue(parseFloat(this.min.toString())) :\n this.checkHandleValue(parseFloat(this.value.toString()));\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n this.preHandlePos1 = this.handlePos1;\n isNullOrUndefined(this.activeHandle) ? (this.type === 'Range' ? this.activeHandle = 2 : this.activeHandle = 1) :\n this.activeHandle = this.activeHandle;\n if (this.type === 'Default' || this.type === 'MinRange') {\n if (this.limits.enabled) {\n var values = this.getLimitValueAndPosition(this.handleVal1, this.limits.minStart, this.limits.minEnd);\n this.handleVal1 = values[0];\n this.handlePos1 = values[1];\n this.preHandlePos1 = this.handlePos1;\n }\n this.setHandlePosition();\n this.handleStart();\n this.value = this.handleVal1;\n this.setAriaAttrValue(this.firstHandle);\n this.changeEvent('changed');\n }\n else {\n this.validateRangeValue();\n }\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n if (this.limits.enabled) {\n this.setLimitBar();\n }\n };\n Slider.prototype.rangeValueUpdate = function () {\n if (this.value === null || typeof (this.value) !== 'object') {\n this.value = [parseFloat(formatUnit(this.min)), parseFloat(formatUnit(this.max))];\n }\n };\n Slider.prototype.validateRangeValue = function () {\n this.rangeValueUpdate();\n this.setRangeValue();\n };\n Slider.prototype.modifyZindex = function () {\n if (this.type === 'Range') {\n if (this.activeHandle === 1) {\n this.firstHandle.style.zIndex = (this.zIndex + 4) + '';\n this.secondHandle.style.zIndex = (this.zIndex + 3) + '';\n if (this.isMaterial && this.tooltip.isVisible && this.firstTooltipElement && this.secondTooltipElement) {\n this.firstTooltipElement.style.zIndex = (this.zIndex + 4) + '';\n this.secondTooltipElement.style.zIndex = (this.zIndex + 3) + '';\n }\n }\n else {\n this.firstHandle.style.zIndex = (this.zIndex + 3) + '';\n this.secondHandle.style.zIndex = (this.zIndex + 4) + '';\n if (this.isMaterial && this.tooltip.isVisible && this.firstTooltipElement && this.secondTooltipElement) {\n this.firstTooltipElement.style.zIndex = (this.zIndex + 3) + '';\n this.secondTooltipElement.style.zIndex = (this.zIndex + 4) + '';\n }\n }\n }\n else if (this.isMaterial && this.tooltip.isVisible && this.firstTooltipElement) {\n this.firstTooltipElement.style.zIndex = (this.zIndex + 4) + '';\n }\n };\n Slider.prototype.setHandlePosition = function () {\n var _this = this;\n var pos = (this.activeHandle === 1) ? this.handlePos1 : this.handlePos2;\n var val = (this.activeHandle === 1) ? this.handleVal1 : this.handleVal2;\n var handle;\n var tooltipElement;\n if (this.isMaterial && this.tooltip.isVisible) {\n tooltipElement = this.activeHandle === 1 ? this.firstTooltipElement : this.secondTooltipElement;\n handle = [this.getHandle(), (this.activeHandle === 1 ? this.firstMaterialHandle : this.secondMaterialHandle)];\n }\n else {\n handle = [this.getHandle()];\n }\n if (this.tooltip.isVisible && pos === 0 && this.type !== 'Range') {\n handle[0].classList.add(classNames.sliderHandleStart);\n if (this.isMaterial) {\n handle[1].classList.add(classNames.sliderHandleStart);\n if (tooltipElement) {\n tooltipElement.classList.add(classNames.sliderTooltipStart);\n }\n }\n }\n else {\n handle[0].classList.remove(classNames.sliderHandleStart);\n if (this.tooltip.isVisible && this.isMaterial) {\n handle[1].classList.remove(classNames.sliderHandleStart);\n if (tooltipElement) {\n tooltipElement.classList.remove(classNames.sliderTooltipStart);\n }\n }\n }\n handle.forEach(function (handle) {\n if (_this.orientation === 'Horizontal') {\n _this.enableRtl ? (handle.style.right =\n pos + \"px\") : (handle.style.left = pos + \"px\");\n }\n else {\n handle.style.bottom = pos + \"px\";\n }\n });\n this.changeEvent('change');\n };\n Slider.prototype.getHandle = function () {\n return (this.activeHandle === 1) ? this.firstHandle : this.secondHandle;\n };\n Slider.prototype.setRangeValue = function () {\n var temp = this.activeHandle;\n this.updateRangeValue();\n this.activeHandle = 1;\n this.setHandlePosition();\n this.activeHandle = 2;\n this.setHandlePosition();\n this.activeHandle = 1;\n };\n Slider.prototype.changeEvent = function (eventName) {\n var previous = eventName === 'change' ? this.previousVal : this.previousChanged;\n if (this.type !== 'Range') {\n this.setProperties({ 'value': this.handleVal1 }, true);\n if (previous !== this.value) {\n this.trigger(eventName, this.changeEventArgs(eventName));\n this.setPreviousVal(eventName, this.value);\n }\n this.setAriaAttrValue(this.firstHandle);\n }\n else {\n var value = this.value = [this.handleVal1, this.handleVal2];\n this.setProperties({ 'value': value }, true);\n if (previous.length === this.value.length\n && this.value[0] !== previous[0] || this.value[1] !== previous[1]) {\n this.trigger(eventName, this.changeEventArgs(eventName));\n this.setPreviousVal(eventName, this.value);\n }\n this.setAriaAttrValue(this.getHandle());\n }\n this.hiddenInput.value = this.value.toString();\n };\n Slider.prototype.changeEventArgs = function (eventName) {\n var eventArgs;\n if (this.tooltip.isVisible && this.firstTooltipObj) {\n this.tooltipValue();\n eventArgs = {\n value: this.value,\n previousValue: eventName === 'change' ? this.previousVal : this.previousChanged,\n action: eventName, text: this.firstTooltipObj.content\n };\n }\n else {\n eventArgs = {\n value: this.value,\n previousValue: eventName === 'change' ? this.previousVal : this.previousChanged,\n action: eventName, text: isNullOrUndefined(this.ticksFormatInfo.format) ? this.value.toString() :\n (this.type !== 'Range' ? this.formatString(this.value, this.ticksFormatInfo).formatString :\n (this.formatString(this.value[0], this.ticksFormatInfo).formatString + ' - ' +\n this.formatString(this.value[1], this.ticksFormatInfo).formatString))\n };\n }\n return eventArgs;\n };\n Slider.prototype.setPreviousVal = function (eventName, value) {\n if (eventName === 'change') {\n this.previousVal = value;\n }\n else {\n this.previousChanged = value;\n }\n };\n Slider.prototype.updateRangeValue = function () {\n var values = this.value.toString().split(',').map(Number);\n if ((this.enableRtl && this.orientation !== 'Vertical') || this.rtl) {\n this.value = [values[1], values[0]];\n }\n else {\n this.value = [values[0], values[1]];\n }\n if (this.enableRtl && this.orientation !== 'Vertical') {\n this.handleVal1 = this.checkHandleValue(this.value[1]);\n this.handleVal2 = this.checkHandleValue(this.value[0]);\n }\n else {\n this.handleVal1 = this.checkHandleValue(this.value[0]);\n this.handleVal2 = this.checkHandleValue(this.value[1]);\n }\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n if (this.handlePos1 > this.handlePos2) {\n this.handlePos1 = this.handlePos2;\n this.handleVal1 = this.handleVal2;\n }\n this.preHandlePos1 = this.handlePos1;\n this.preHandlePos2 = this.handlePos2;\n if (this.limits.enabled) {\n this.activeHandle = 1;\n var values_1 = this.getLimitValueAndPosition(this.handleVal1, this.limits.minStart, this.limits.minEnd);\n this.handleVal1 = values_1[0];\n this.handlePos1 = values_1[1];\n this.preHandlePos1 = this.handlePos1;\n this.activeHandle = 2;\n values_1 = this.getLimitValueAndPosition(this.handleVal2, this.limits.maxStart, this.limits.maxEnd);\n this.handleVal2 = values_1[0];\n this.handlePos2 = values_1[1];\n this.preHandlePos2 = this.handlePos2;\n }\n };\n Slider.prototype.checkHandlePosition = function (value) {\n var pos;\n value = (100 *\n (value - (parseFloat(formatUnit(this.min))))) / ((parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min))));\n if (this.orientation === 'Horizontal') {\n pos = this.element.getBoundingClientRect().width * (value / 100);\n }\n else {\n pos = this.element.getBoundingClientRect().height * (value / 100);\n }\n if (((parseFloat(formatUnit(this.max))) === (parseFloat(formatUnit(this.min))))) {\n if (this.orientation === 'Horizontal') {\n pos = this.element.getBoundingClientRect().width;\n }\n else {\n pos = this.element.getBoundingClientRect().height;\n }\n }\n return pos;\n };\n Slider.prototype.checkHandleValue = function (value) {\n if (this.min > this.max) {\n this.min = this.max;\n }\n if (this.min === this.max) {\n return (parseFloat(formatUnit(this.max)));\n }\n var handle = this.tempStartEnd();\n if (value < handle.start) {\n value = handle.start;\n }\n else if (value > handle.end) {\n value = handle.end;\n }\n return value;\n };\n /**\n * It is used to reposition slider.\n * @returns void\n */\n Slider.prototype.reposition = function () {\n var _this = this;\n this.firstHandle.style.transition = 'none';\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = 'none';\n }\n if (this.type === 'Range') {\n this.secondHandle.style.transition = 'none';\n }\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n if (this.handleVal2) {\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n }\n if (this.orientation === 'Horizontal') {\n this.enableRtl ? this.firstHandle.style.right =\n this.handlePos1 + \"px\" : this.firstHandle.style.left = this.handlePos1 + \"px\";\n if (this.isMaterial && this.tooltip.isVisible && this.firstMaterialHandle) {\n this.enableRtl ? this.firstMaterialHandle.style.right =\n this.handlePos1 + \"px\" : this.firstMaterialHandle.style.left = this.handlePos1 + \"px\";\n }\n if (this.type === 'MinRange') {\n this.enableRtl ? (this.rangeBar.style.right = '0px') : (this.rangeBar.style.left = '0px');\n setStyleAttribute(this.rangeBar, { 'width': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });\n }\n else if (this.type === 'Range') {\n this.enableRtl ? this.secondHandle.style.right =\n this.handlePos2 + \"px\" : this.secondHandle.style.left = this.handlePos2 + \"px\";\n if (this.isMaterial && this.tooltip.isVisible && this.secondMaterialHandle) {\n this.enableRtl ? this.secondMaterialHandle.style.right =\n this.handlePos2 + \"px\" : this.secondMaterialHandle.style.left = this.handlePos2 + \"px\";\n }\n this.enableRtl ? (this.rangeBar.style.right =\n this.handlePos1 + 'px') : (this.rangeBar.style.left = this.handlePos1 + 'px');\n setStyleAttribute(this.rangeBar, { 'width': this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n else {\n this.firstHandle.style.bottom = this.handlePos1 + \"px\";\n if (this.isMaterial && this.tooltip.isVisible && this.firstMaterialHandle) {\n this.firstMaterialHandle.style.bottom = this.handlePos1 + \"px\";\n }\n if (this.type === 'MinRange') {\n this.rangeBar.style.bottom = '0px';\n setStyleAttribute(this.rangeBar, { 'height': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });\n }\n else if (this.type === 'Range') {\n this.secondHandle.style.bottom = this.handlePos2 + \"px\";\n if (this.isMaterial && this.tooltip.isVisible && this.secondMaterialHandle) {\n this.secondMaterialHandle.style.bottom = this.handlePos2 + \"px\";\n }\n this.rangeBar.style.bottom = this.handlePos1 + 'px';\n setStyleAttribute(this.rangeBar, { 'height': this.handlePos2 - this.handlePos1 + 'px' });\n }\n }\n if (this.limits.enabled) {\n this.setLimitBar();\n }\n if (this.ticks.placement !== 'None' && this.ul) {\n this.removeElement(this.ul);\n this.renderScale();\n }\n this.handleStart();\n if (!this.tooltip.isVisible) {\n setTimeout(function () {\n _this.firstHandle.style.transition = _this.scaleTransform;\n if (_this.type === 'Range') {\n _this.secondHandle.style.transition = _this.scaleTransform;\n }\n });\n }\n this.refreshTooltip();\n };\n Slider.prototype.changeHandleValue = function (value) {\n var position = null;\n if (this.activeHandle === 1) {\n if (!(this.limits.enabled && this.limits.startHandleFixed)) {\n this.handleVal1 = this.checkHandleValue(value);\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n if (this.type === 'Range' && this.handlePos1 > this.handlePos2) {\n this.handlePos1 = this.handlePos2;\n this.handleVal1 = this.handleVal2;\n }\n if (this.handlePos1 !== this.preHandlePos1) {\n position = this.preHandlePos1 = this.handlePos1;\n }\n }\n this.modifyZindex();\n }\n else {\n if (!(this.limits.enabled && this.limits.endHandleFixed)) {\n this.handleVal2 = this.checkHandleValue(value);\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n if (this.type === 'Range' && this.handlePos2 < this.handlePos1) {\n this.handlePos2 = this.handlePos1;\n this.handleVal2 = this.handleVal1;\n }\n if (this.handlePos2 !== this.preHandlePos2) {\n position = this.preHandlePos2 = this.handlePos2;\n }\n }\n this.modifyZindex();\n }\n if (position !== null) {\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n this.setHandlePosition();\n }\n };\n Slider.prototype.tempStartEnd = function () {\n if (this.min > this.max) {\n return {\n start: this.max,\n end: this.min\n };\n }\n else {\n return {\n start: this.min,\n end: this.max\n };\n }\n };\n Slider.prototype.xyToPosition = function (position) {\n var pos;\n if (this.min === this.max) {\n return 100;\n }\n if (this.orientation === 'Horizontal') {\n var left = position.x - this.element.getBoundingClientRect().left;\n var num = this.element.offsetWidth / 100;\n this.val = (left / num);\n }\n else {\n var top_1 = position.y - this.element.getBoundingClientRect().top;\n var num = this.element.offsetHeight / 100;\n this.val = 100 - (top_1 / num);\n }\n var val = this.stepValueCalculation(this.val);\n if (val < 0) {\n val = 0;\n }\n else if (val > 100) {\n val = 100;\n }\n if (this.enableRtl && this.orientation !== 'Vertical') {\n val = 100 - val;\n }\n if (this.orientation === 'Horizontal') {\n pos = this.element.getBoundingClientRect().width * (val / 100);\n }\n else {\n pos = this.element.getBoundingClientRect().height * (val / 100);\n }\n return pos;\n };\n Slider.prototype.stepValueCalculation = function (value) {\n if (this.step === 0) {\n this.step = 1;\n }\n var percentStep = (parseFloat(formatUnit(this.step))) / ((parseFloat(formatUnit(this.max)) - parseFloat(formatUnit(this.min))) / 100);\n var remain = value % Math.abs(percentStep);\n if (remain !== 0) {\n if ((percentStep / 2) > remain) {\n value -= remain;\n }\n else {\n value += Math.abs(percentStep) - remain;\n }\n }\n return value;\n };\n Slider.prototype.add = function (a, b, addition) {\n var precision;\n var x = Math.pow(10, precision || 3);\n var val;\n if (addition) {\n val = (Math.round(a * x) + Math.round(b * x)) / x;\n }\n else {\n val = (Math.round(a * x) - Math.round(b * x)) / x;\n }\n return val;\n };\n Slider.prototype.round = function (a) {\n var f = this.step.toString().split('.');\n return f[1] ? parseFloat(a.toFixed(f[1].length)) : Math.round(a);\n };\n Slider.prototype.positionToValue = function (pos) {\n var val;\n var diff = parseFloat(formatUnit(this.max)) - parseFloat(formatUnit(this.min));\n if (this.orientation === 'Horizontal') {\n val = (pos / this.element.getBoundingClientRect().width) * diff;\n }\n else {\n val = (pos / this.element.getBoundingClientRect().height) * diff;\n }\n var total = this.add(val, parseFloat(this.min.toString()), true);\n return (total);\n };\n Slider.prototype.sliderBarClick = function (evt) {\n evt.preventDefault();\n var pos;\n if (evt.type === 'mousedown' || evt.type === 'click') {\n pos = { x: evt.clientX, y: evt.clientY };\n }\n else if (evt.type === 'touchstart') {\n pos = { x: evt.changedTouches[0].clientX, y: evt.changedTouches[0].clientY };\n }\n var handlepos = this.xyToPosition(pos);\n var handleVal = this.positionToValue(handlepos);\n if (this.type === 'Range' && (this.handlePos2 - handlepos) < (handlepos - this.handlePos1)) {\n this.activeHandle = 2;\n if (!(this.limits.enabled && this.limits.endHandleFixed)) {\n if (this.limits.enabled) {\n var value = this.getLimitValueAndPosition(handleVal, this.limits.maxStart, this.limits.maxEnd);\n handleVal = value[0];\n handlepos = value[1];\n }\n this.secondHandle.classList.add(classNames.sliderActiveHandle);\n this.handlePos2 = this.preHandlePos2 = handlepos;\n this.handleVal2 = handleVal;\n }\n this.modifyZindex();\n this.secondHandle.focus();\n }\n else {\n this.activeHandle = 1;\n if (!(this.limits.enabled && this.limits.startHandleFixed)) {\n if (this.limits.enabled) {\n var value = this.getLimitValueAndPosition(handleVal, this.limits.minStart, this.limits.minEnd);\n handleVal = value[0];\n handlepos = value[1];\n }\n this.firstHandle.classList.add(classNames.sliderActiveHandle);\n this.handlePos1 = this.preHandlePos1 = handlepos;\n this.handleVal1 = handleVal;\n }\n this.modifyZindex();\n this.firstHandle.focus();\n }\n if (this.isMaterial && this.tooltip.isVisible) {\n var tooltipElement = this.activeHandle === 1 ? this.firstTooltipElement : this.secondTooltipElement;\n tooltipElement.classList.add(classNames.materialTooltipActive);\n }\n var focusedElement = this.element.querySelector('.' + classNames.sliderTabHandle);\n if (focusedElement && this.getHandle() !== focusedElement) {\n focusedElement.classList.remove(classNames.sliderTabHandle);\n }\n var handle = this.activeHandle === 1 ? this.firstHandle : this.secondHandle;\n if (evt.target === handle) {\n if (this.isMaterial && !this.tooltip.isVisible &&\n !this.getHandle().classList.contains(classNames.sliderTabHandle)) {\n this.materialChange();\n }\n this.tooltipAnimation();\n return;\n }\n if (!this.checkRepeatedValue(handleVal)) {\n return;\n }\n var transition = this.isMaterial && this.tooltip.isVisible ?\n this.transitionOnMaterialTooltip : this.transition;\n this.getHandle().style.transition = transition.handle;\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = transition.rangeBar;\n }\n this.setHandlePosition();\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n };\n Slider.prototype.refreshTooltipOnMove = function () {\n if (this.tooltip.isVisible) {\n this.tooltipValue();\n this.activeHandle === 1 ? this.firstTooltipObj.refresh(this.firstHandle) :\n this.secondTooltipObj.refresh(this.secondHandle);\n }\n };\n Slider.prototype.sliderDown = function (event) {\n var _a, _b;\n event.preventDefault();\n this.focusSliderElement();\n if (this.type === 'Range' && this.drag && event.target === this.rangeBar) {\n var xPostion = void 0;\n var yPostion = void 0;\n if (event.type === 'mousedown') {\n _a = [event.clientX, event.clientY], xPostion = _a[0], yPostion = _a[1];\n }\n else if (event.type === 'touchstart') {\n _b = [event.changedTouches[0].clientX, event.changedTouches[0].clientY], xPostion = _b[0], yPostion = _b[1];\n }\n if (this.orientation === 'Horizontal') {\n this.firstPartRemain = xPostion - this.rangeBar.getBoundingClientRect().left;\n this.secondPartRemain = this.rangeBar.getBoundingClientRect().right - xPostion;\n }\n else {\n this.firstPartRemain = yPostion - this.rangeBar.getBoundingClientRect().top;\n this.secondPartRemain = this.rangeBar.getBoundingClientRect().bottom - yPostion;\n }\n this.minDiff = this.handleVal2 - this.handleVal1;\n this.getHandle().focus();\n EventHandler.add(document, 'mousemove touchmove', this.dragRangeBarMove, this);\n EventHandler.add(document, 'mouseup touchend', this.dragRangeBarUp, this);\n }\n else {\n this.sliderBarClick(event);\n EventHandler.add(document, 'mousemove touchmove', this.sliderBarMove, this);\n EventHandler.add(document, 'mouseup touchend', this.sliderBarUp, this);\n }\n };\n Slider.prototype.handleValueAdjust = function (handleValue, assignValue, handleNumber) {\n if (handleNumber === 1) {\n this.handleVal1 = assignValue;\n this.handleVal2 = this.handleVal1 + this.minDiff;\n }\n else if (handleNumber === 2) {\n this.handleVal2 = assignValue;\n this.handleVal1 = this.handleVal2 - this.minDiff;\n }\n this.handlePos1 = this.checkHandlePosition(this.handleVal1);\n this.handlePos2 = this.checkHandlePosition(this.handleVal2);\n };\n Slider.prototype.dragRangeBarMove = function (event) {\n var _a, _b;\n if (event.type !== 'touchmove') {\n event.preventDefault();\n }\n var pos;\n this.rangeBar.style.transition = 'none';\n this.firstHandle.style.transition = 'none';\n this.secondHandle.style.transition = 'none';\n var xPostion;\n var yPostion;\n if (event.type === 'mousemove') {\n _a = [event.clientX, event.clientY], xPostion = _a[0], yPostion = _a[1];\n }\n else {\n _b = [event.changedTouches[0].clientX, event.changedTouches[0].clientY], xPostion = _b[0], yPostion = _b[1];\n }\n if (!(this.limits.enabled && this.limits.startHandleFixed) && !(this.limits.enabled && this.limits.endHandleFixed)) {\n if (!this.enableRtl) {\n pos = { x: xPostion - this.firstPartRemain, y: yPostion + this.secondPartRemain };\n }\n else {\n pos = { x: xPostion + this.secondPartRemain, y: yPostion + this.secondPartRemain };\n }\n this.handlePos1 = this.xyToPosition(pos);\n this.handleVal1 = this.positionToValue(this.handlePos1);\n if (!this.enableRtl) {\n pos = { x: xPostion + this.secondPartRemain, y: yPostion - this.firstPartRemain };\n }\n else {\n pos = { x: xPostion - this.firstPartRemain, y: yPostion - this.firstPartRemain };\n }\n this.handlePos2 = this.xyToPosition(pos);\n this.handleVal2 = this.positionToValue(this.handlePos2);\n if (this.limits.enabled) {\n var value = this.getLimitValueAndPosition(this.handleVal1, this.limits.minStart, this.limits.minEnd);\n this.handleVal1 = value[0];\n this.handlePos1 = value[1];\n if (this.handleVal1 === this.limits.minEnd) {\n this.handleValueAdjust(this.handleVal1, this.limits.minEnd, 1);\n }\n if (this.handleVal1 === this.limits.minStart) {\n this.handleValueAdjust(this.handleVal1, this.limits.minStart, 1);\n }\n value = this.getLimitValueAndPosition(this.handleVal2, this.limits.maxStart, this.limits.maxEnd);\n this.handleVal2 = value[0];\n this.handlePos2 = value[1];\n if (this.handleVal2 === this.limits.maxStart) {\n this.handleValueAdjust(this.handleVal2, this.limits.maxStart, 2);\n }\n if (this.handleVal2 === this.limits.maxEnd) {\n this.handleValueAdjust(this.handleVal2, this.limits.maxEnd, 2);\n }\n }\n if (this.handleVal2 === this.max) {\n this.handleValueAdjust(this.handleVal2, this.max, 2);\n }\n if (this.handleVal1 === this.min) {\n this.handleValueAdjust(this.handleVal1, this.min, 1);\n }\n }\n this.activeHandle = 1;\n this.setHandlePosition();\n if (this.tooltip.isVisible) {\n if (this.isMaterial) {\n !this.firstTooltipElement.classList.contains(classNames.materialTooltipOpen) ? this.openMaterialTooltip() :\n this.refreshTooltipOnMove();\n }\n else {\n !this.firstTooltipElement ? this.openTooltip() : this.refreshTooltipOnMove();\n }\n }\n this.activeHandle = 2;\n this.setHandlePosition();\n if (this.tooltip.isVisible) {\n if (this.isMaterial) {\n !this.secondTooltipElement.classList.contains(classNames.materialTooltipOpen) ? this.openMaterialTooltip() :\n this.refreshTooltipOnMove();\n }\n else {\n !this.secondTooltipElement ? this.openTooltip() : this.refreshTooltipOnMove();\n }\n }\n this.setRangeBar();\n };\n Slider.prototype.sliderBarUp = function () {\n this.changeEvent('changed');\n this.handleFocusOut();\n this.firstHandle.classList.remove(classNames.sliderActiveHandle);\n if (this.type === 'Range') {\n this.secondHandle.classList.remove(classNames.sliderActiveHandle);\n }\n if (this.tooltip.isVisible) {\n if (this.tooltip.showOn !== 'Always') {\n this.closeTooltip();\n }\n if (!this.isMaterial) {\n var tooltipObj = this.activeHandle === 1 ? this.firstTooltipObj : this.secondTooltipObj;\n tooltipObj.animation = { open: { effect: 'None' }, close: { effect: 'None' } };\n }\n }\n if (this.isMaterial) {\n this.getHandle().classList.remove('e-large-thumb-size');\n if (this.tooltip.isVisible) {\n var tooltipElement = this.activeHandle === 1 ? this.firstTooltipElement : this.secondTooltipElement;\n tooltipElement.classList.remove(classNames.materialTooltipActive);\n }\n }\n EventHandler.remove(document, 'mousemove touchmove', this.sliderBarMove);\n EventHandler.remove(document, 'mouseup touchend', this.sliderBarUp);\n };\n Slider.prototype.sliderBarMove = function (evt) {\n if (evt.type !== 'touchmove') {\n evt.preventDefault();\n }\n var pos;\n if (evt.type === 'mousemove') {\n pos = { x: evt.clientX, y: evt.clientY };\n }\n else {\n pos = { x: evt.changedTouches[0].clientX, y: evt.changedTouches[0].clientY };\n }\n var handlepos = this.xyToPosition(pos);\n var handleVal = this.positionToValue(handlepos);\n handlepos = Math.round(handlepos);\n if (this.type !== 'Range' && this.activeHandle === 1) {\n if (!(this.limits.enabled && this.limits.startHandleFixed)) {\n if (this.limits.enabled) {\n var valueAndPostion = this.getLimitValueAndPosition(handleVal, this.limits.minStart, this.limits.minEnd);\n handlepos = valueAndPostion[1];\n handleVal = valueAndPostion[0];\n }\n this.handlePos1 = handlepos;\n this.handleVal1 = handleVal;\n }\n this.firstHandle.classList.add(classNames.sliderActiveHandle);\n }\n if (this.type === 'Range') {\n if (this.activeHandle === 1) {\n this.firstHandle.classList.add(classNames.sliderActiveHandle);\n if (!(this.limits.enabled && this.limits.startHandleFixed)) {\n if (handlepos > this.handlePos2) {\n handlepos = this.handlePos2;\n handleVal = this.handleVal2;\n }\n if (handlepos !== this.preHandlePos1) {\n if (this.limits.enabled) {\n var value = this.getLimitValueAndPosition(handleVal, this.limits.minStart, this.limits.minEnd);\n handleVal = value[0];\n handlepos = value[1];\n }\n this.handlePos1 = this.preHandlePos1 = handlepos;\n this.handleVal1 = handleVal;\n this.activeHandle = 1;\n }\n }\n }\n else if (this.activeHandle === 2) {\n this.secondHandle.classList.add(classNames.sliderActiveHandle);\n if (!(this.limits.enabled && this.limits.endHandleFixed)) {\n if (handlepos < this.handlePos1) {\n handlepos = this.handlePos1;\n handleVal = this.handleVal1;\n }\n if (handlepos !== this.preHandlePos2) {\n if (this.limits.enabled) {\n var value = this.getLimitValueAndPosition(handleVal, this.limits.maxStart, this.limits.maxEnd);\n handleVal = value[0];\n handlepos = value[1];\n }\n this.handlePos2 = this.preHandlePos2 = handlepos;\n this.handleVal2 = handleVal;\n this.activeHandle = 2;\n }\n }\n }\n }\n if (!this.checkRepeatedValue(handleVal)) {\n return;\n }\n this.getHandle().style.transition = this.scaleTransform;\n if (this.type !== 'Default') {\n this.rangeBar.style.transition = 'none';\n }\n this.setHandlePosition();\n if (this.isMaterial && !this.tooltip.isVisible &&\n !this.getHandle().classList.contains(classNames.sliderTabHandle)) {\n this.materialChange();\n }\n var tooltipElement = this.activeHandle === 1 ? this.firstTooltipElement : this.secondTooltipElement;\n if (this.tooltip.isVisible) {\n if (this.isMaterial) {\n !tooltipElement.classList.contains(classNames.materialTooltipOpen) ? this.openMaterialTooltip() :\n this.refreshTooltipOnMove();\n }\n else {\n !tooltipElement ? this.openTooltip() : this.refreshTooltipOnMove();\n }\n }\n if (this.type !== 'Default') {\n this.setRangeBar();\n }\n };\n Slider.prototype.dragRangeBarUp = function (event) {\n this.changeEvent('changed');\n if (this.tooltip.isVisible) {\n if (this.tooltip.showOn !== 'Always' && !this.isMaterial) {\n this.activeHandle = 1;\n this.firstTooltipObj.animation = { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } };\n this.closeTooltip();\n this.activeHandle = 2;\n this.secondTooltipObj.animation = { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } };\n this.closeTooltip();\n }\n }\n EventHandler.remove(document, 'mousemove touchmove', this.dragRangeBarMove);\n EventHandler.remove(document, 'mouseup touchend', this.dragRangeBarUp);\n };\n Slider.prototype.checkRepeatedValue = function (currentValue) {\n if (this.type === 'Range') {\n var previousVal = this.enableRtl && this.orientation !== 'Vertical' ? (this.activeHandle === 1 ?\n this.previousVal[1] : this.previousVal[0]) :\n (this.activeHandle === 1 ? this.previousVal[0] : this.previousVal[1]);\n if (currentValue === previousVal) {\n return 0;\n }\n }\n else {\n if (currentValue === this.previousVal) {\n return 0;\n }\n }\n return 1;\n };\n Slider.prototype.refreshTooltip = function () {\n if (this.tooltip.isVisible && this.firstTooltipObj) {\n this.tooltipValue();\n this.firstTooltipObj.refresh(this.firstHandle);\n if (this.type === 'Range') {\n this.secondTooltipObj.refresh(this.secondHandle);\n }\n }\n };\n Slider.prototype.openTooltip = function () {\n if (this.tooltip.isVisible && this.firstTooltipObj) {\n this.tooltipValue();\n if (this.isMaterial) {\n this.openMaterialTooltip();\n }\n else {\n if (this.activeHandle === 1) {\n this.firstTooltipObj.open(this.firstHandle);\n }\n else {\n this.secondTooltipObj.open(this.secondHandle);\n }\n }\n }\n };\n Slider.prototype.keyDown = function (event) {\n switch (event.keyCode) {\n case 37:\n case 38:\n case 39:\n case 40:\n case 33:\n case 34:\n case 36:\n case 35:\n event.preventDefault();\n this.buttonClick(event);\n if (this.tooltip.isVisible && this.tooltip.showOn !== 'Always' && !this.isMaterial) {\n this.closeTooltip();\n }\n break;\n }\n };\n Slider.prototype.wireButtonEvt = function (destroy) {\n if (!destroy) {\n EventHandler.add(this.firstBtn, 'mouseleave touchleave', this.buttonFocusOut, this);\n EventHandler.add(this.secondBtn, 'mouseleave touchleave', this.buttonFocusOut, this);\n EventHandler.add(this.firstBtn, 'mousedown touchstart', this.repeatHandlerMouse, this);\n EventHandler.add(this.firstBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp, this);\n EventHandler.add(this.secondBtn, 'mousedown touchstart', this.repeatHandlerMouse, this);\n EventHandler.add(this.secondBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp, this);\n EventHandler.add(this.firstBtn, 'focusout', this.sliderFocusOut, this);\n EventHandler.add(this.secondBtn, 'focusout', this.sliderFocusOut, this);\n }\n else {\n EventHandler.remove(this.firstBtn, 'mouseleave touchleave', this.buttonFocusOut);\n EventHandler.remove(this.secondBtn, 'mouseleave touchleave', this.buttonFocusOut);\n EventHandler.remove(this.firstBtn, 'mousedown touchstart', this.repeatHandlerMouse);\n EventHandler.remove(this.firstBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp);\n EventHandler.remove(this.secondBtn, 'mousedown touchstart', this.repeatHandlerMouse);\n EventHandler.remove(this.secondBtn, 'mouseup mouseleave touchup touchend', this.repeatHandlerUp);\n EventHandler.remove(this.firstBtn, 'focusout', this.sliderFocusOut);\n EventHandler.remove(this.secondBtn, 'focusout', this.sliderFocusOut);\n }\n };\n Slider.prototype.wireEvents = function () {\n this.onresize = this.reposition.bind(this);\n window.addEventListener('resize', this.onresize);\n if (this.enabled && !this.readonly) {\n EventHandler.add(this.element, 'mousedown touchstart', this.sliderDown, this);\n EventHandler.add(this.sliderContainer, 'keydown', this.keyDown, this);\n EventHandler.add(this.sliderContainer, 'keyup', this.keyUp, this);\n EventHandler.add(this.element, 'focusout', this.sliderFocusOut, this);\n EventHandler.add(this.sliderContainer, 'mouseover mouseout touchstart touchend', this.hover, this);\n this.wireFirstHandleEvt(false);\n if (this.type === 'Range') {\n this.wireSecondHandleEvt(false);\n }\n if (this.showButtons) {\n this.wireButtonEvt(false);\n }\n this.wireMaterialTooltipEvent(false);\n }\n };\n Slider.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'mousedown touchstart', this.sliderDown);\n EventHandler.remove(this.sliderContainer, 'keydown', this.keyDown);\n EventHandler.remove(this.sliderContainer, 'keyup', this.keyUp);\n EventHandler.remove(this.element, 'focusout', this.sliderFocusOut);\n EventHandler.remove(this.sliderContainer, 'mouseover mouseout touchstart touchend', this.hover);\n this.wireFirstHandleEvt(true);\n if (this.type === 'Range') {\n this.wireSecondHandleEvt(true);\n }\n if (this.showButtons) {\n this.wireButtonEvt(true);\n }\n this.wireMaterialTooltipEvent(true);\n };\n Slider.prototype.keyUp = function (event) {\n if (event.keyCode === 9 && event.target.classList.contains(classNames.sliderHandle)) {\n this.focusSliderElement();\n if (!event.target.classList.contains(classNames.sliderTabHandle)) {\n if (this.element.querySelector('.' + classNames.sliderTabHandle)) {\n this.element.querySelector('.' + classNames.sliderTabHandle).classList.remove(classNames.sliderTabHandle);\n }\n event.target.classList.add(classNames.sliderTabHandle);\n var parentElement = event.target.parentElement;\n if (parentElement === this.element) {\n parentElement.querySelector('.' + classNames.sliderTrack).classList.add(classNames.sliderTabTrack);\n if (this.type === 'Range' || this.type === 'MinRange') {\n parentElement.querySelector('.' + classNames.rangeBar).classList.add(classNames.sliderTabRange);\n }\n }\n if (this.type === 'Range') {\n (event.target.previousSibling).classList.contains(classNames.sliderHandle) ?\n this.activeHandle = 2 : this.activeHandle = 1;\n }\n this.getHandle().focus();\n this.tooltipAnimation();\n if (this.tooltip.isVisible && this.tooltip.showOn !== 'Always' && !this.isMaterial) {\n this.closeTooltip();\n }\n }\n }\n this.changeEvent('changed');\n };\n Slider.prototype.hover = function (event) {\n if (!isNullOrUndefined(event)) {\n if (event.type === 'mouseover' || event.type === 'touchmove' || event.type === 'mousemove' ||\n event.type === 'pointermove' || event.type === 'touchstart') {\n this.sliderContainer.classList.add(classNames.sliderHover);\n }\n else {\n this.sliderContainer.classList.remove(classNames.sliderHover);\n }\n }\n };\n Slider.prototype.sliderFocusOut = function (event) {\n var _this = this;\n if (event.relatedTarget !== this.secondHandle && event.relatedTarget !== this.firstHandle &&\n event.relatedTarget !== this.element && event.relatedTarget !== this.firstBtn && event.relatedTarget !== this.secondBtn) {\n if (this.isMaterial && this.tooltip.isVisible) {\n var transformProperties_1 = this.getTooltipTransformProperties(this.previousTooltipClass);\n var tooltipElement = this.type !== 'Range' ? [this.firstTooltipElement] :\n [this.firstTooltipElement, this.secondTooltipElement];\n var hiddenHandle_1 = this.type !== 'Range' ? [this.firstHandle] : [this.firstHandle, this.secondHandle];\n var handle_1 = this.type !== 'Range' ? [this.firstMaterialHandle] :\n [this.firstMaterialHandle, this.secondMaterialHandle];\n tooltipElement.forEach(function (tooltipElement, index) {\n if (tooltipElement) {\n tooltipElement.style.transition = _this.scaleTransform;\n tooltipElement.firstChild.classList.remove(classNames.materialTooltipShow);\n tooltipElement.firstChild.classList.add(classNames.materialTooltipHide);\n hiddenHandle_1[index].style.cursor = '-webkit-grab';\n hiddenHandle_1[index].style.cursor = 'grab';\n handle_1[index].style.transform = 'scale(1)';\n tooltipElement.classList.remove(classNames.materialTooltipOpen);\n if (tooltipElement.firstElementChild.innerText.length > 4) {\n tooltipElement.style.transform = transformProperties_1.translate + ' ' + 'scale(0.01)';\n }\n else {\n tooltipElement.style.transform = transformProperties_1.translate + ' ' +\n transformProperties_1.rotate + ' ' + 'scale(0.01)';\n }\n setTimeout(function () { tooltipElement.style.transition = 'none'; }, 2500);\n }\n });\n }\n if (this.element.querySelector('.' + classNames.sliderTabHandle)) {\n this.element.querySelector('.' + classNames.sliderTabHandle).classList.remove(classNames.sliderTabHandle);\n }\n if (this.element.querySelector('.' + classNames.sliderTabTrack)) {\n this.element.querySelector('.' + classNames.sliderTabTrack).classList.remove(classNames.sliderTabTrack);\n if ((this.type === 'Range' || this.type === 'MinRange') &&\n this.element.querySelector('.' + classNames.sliderTabRange)) {\n this.element.querySelector('.' + classNames.sliderTabRange).classList.remove(classNames.sliderTabRange);\n }\n }\n this.hiddenInput.focus();\n this.hiddenInput.blur();\n this.isElementFocused = false;\n }\n };\n Slider.prototype.closeTooltip = function () {\n if (this.tooltip.isVisible) {\n this.tooltipValue();\n if (this.activeHandle === 1) {\n this.firstTooltipObj.close();\n }\n else {\n this.secondTooltipObj.close();\n }\n }\n };\n Slider.prototype.removeElement = function (element) {\n if (element.parentNode) {\n element.parentNode.removeChild(element);\n }\n };\n Slider.prototype.changeSliderType = function (type) {\n if (this.isMaterial && this.firstMaterialHandle) {\n this.sliderContainer.classList.remove(classNames.materialSlider);\n this.removeElement(this.firstMaterialHandle);\n this.firstTooltipElement = undefined;\n this.firstHandleTooltipPosition = undefined;\n if (this.secondMaterialHandle) {\n this.removeElement(this.secondMaterialHandle);\n this.secondTooltipElement = undefined;\n this.secondHandleTooltipPosition = undefined;\n }\n }\n if (this.tooltip.isVisible && this.isMaterial) {\n this.sliderContainer.classList.add(classNames.materialSlider);\n }\n this.removeElement(this.firstHandle);\n if (type !== 'Default') {\n if (type === 'Range') {\n this.removeElement(this.secondHandle);\n }\n this.removeElement(this.rangeBar);\n }\n if (this.tooltip.isVisible && !isNullOrUndefined(this.firstTooltipObj)) {\n this.firstTooltipObj.destroy();\n if (type === 'Range' && !isNullOrUndefined(this.secondTooltipObj)) {\n this.secondTooltipObj.destroy();\n }\n }\n if (this.limits.enabled && type === 'MinRange' || type === 'Default') {\n if (!isNullOrUndefined(this.limitBarFirst)) {\n this.removeElement(this.limitBarFirst);\n }\n }\n if (type === 'Range') {\n if (this.limits.enabled) {\n if (!isNullOrUndefined(this.limitBarFirst) && !isNullOrUndefined(this.limitBarSecond)) {\n this.removeElement(this.limitBarFirst);\n this.removeElement(this.limitBarSecond);\n }\n }\n }\n this.createRangeBar();\n if (this.limits.enabled) {\n this.createLimitBar();\n }\n this.setHandler();\n this.setOrientClass();\n this.wireFirstHandleEvt(false);\n if (this.type === 'Range') {\n this.wireSecondHandleEvt(false);\n }\n this.setValue();\n if (this.tooltip.isVisible) {\n this.renderTooltip();\n this.wireMaterialTooltipEvent(false);\n }\n this.updateConfig();\n };\n Slider.prototype.changeRtl = function () {\n if (!this.enableRtl && this.type === 'Range') {\n this.value = [this.handleVal2, this.handleVal1];\n }\n this.updateConfig();\n if (this.tooltip.isVisible) {\n this.firstTooltipObj.refresh(this.firstHandle);\n if (this.type === 'Range') {\n this.secondTooltipObj.refresh(this.secondHandle);\n }\n }\n if (this.showButtons) {\n var enabledRTL = this.enableRtl && this.orientation !== 'Vertical';\n attributes(enabledRTL ? this.secondBtn : this.firstBtn, { 'aria-label': 'Decrease', title: 'Decrease' });\n attributes(enabledRTL ? this.firstBtn : this.secondBtn, { 'aria-label': 'Increase', title: 'Increase' });\n }\n };\n Slider.prototype.changeOrientation = function () {\n this.changeSliderType(this.type);\n };\n Slider.prototype.updateConfig = function () {\n this.setEnableRTL();\n this.setValue();\n if (this.tooltip.isVisible) {\n this.refreshTooltip();\n }\n if (this.ticks.placement !== 'None') {\n if (this.ul) {\n this.removeElement(this.ul);\n this.renderScale();\n }\n }\n this.limitsPropertyChange();\n };\n Slider.prototype.limitsPropertyChange = function () {\n if (this.limits.enabled) {\n if (isNullOrUndefined(this.limitBarFirst) && this.type !== 'Range') {\n this.createLimitBar();\n }\n if (isNullOrUndefined(this.limitBarFirst) && isNullOrUndefined(this.limitBarSecond) && this.type === 'Range') {\n this.createLimitBar();\n }\n this.setLimitBar();\n this.setValue();\n }\n else {\n if (!isNullOrUndefined(this.limitBarFirst)) {\n detach(this.limitBarFirst);\n }\n if (!isNullOrUndefined(this.limitBarSecond)) {\n detach(this.limitBarSecond);\n }\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @private\n */\n Slider.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Prepares the slider for safe removal from the DOM.\n * Detaches all event handlers, attributes, and classes to avoid memory leaks.\n * @method destroy\n * @return {void}\n */\n Slider.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n this.unwireEvents();\n window.removeEventListener('resize', this.onresize);\n removeClass([this.sliderContainer], [classNames.sliderDisabled]);\n this.firstHandle.removeAttribute('aria-orientation');\n if (this.type === 'Range') {\n this.secondHandle.removeAttribute('aria-orientation');\n }\n this.sliderContainer.parentNode.insertBefore(this.element, this.sliderContainer);\n detach(this.sliderContainer);\n if (this.tooltip.isVisible) {\n this.firstTooltipObj.destroy();\n if (this.type === 'Range' && !isNullOrUndefined(this.secondTooltipObj)) {\n this.secondTooltipObj.destroy();\n }\n }\n this.element.innerHTML = '';\n };\n /**\n * Calls internally if any of the property value is changed.\n * @private\n */\n Slider.prototype.onPropertyChanged = function (newProp, oldProp) {\n var _this = this;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n case 'value':\n var value = isNullOrUndefined(newProp.value) ?\n (this.type === 'Range' ? [this.min, this.max] : this.min) : newProp.value;\n this.setProperties({ 'value': value }, true);\n if (oldProp.value.toString() !== value.toString()) {\n this.setValue();\n this.refreshTooltip();\n if (this.type === 'Range') {\n if (isNullOrUndefined(newProp.value) || oldProp.value[1] === value[1]) {\n this.activeHandle = 1;\n }\n else {\n this.activeHandle = 2;\n }\n }\n }\n break;\n case 'min':\n case 'step':\n case 'max':\n this.setMinMaxValue();\n break;\n case 'tooltip':\n if (!isNullOrUndefined(newProp.tooltip) && !isNullOrUndefined(oldProp.tooltip)) {\n this.setTooltip();\n }\n break;\n case 'type':\n this.changeSliderType(oldProp.type);\n this.setZindex();\n break;\n case 'enableRtl':\n if (oldProp.enableRtl !== newProp.enableRtl && this.orientation !== 'Vertical') {\n this.rtl = oldProp.enableRtl;\n this.changeRtl();\n }\n break;\n case 'limits':\n this.limitsPropertyChange();\n break;\n case 'orientation':\n this.changeOrientation();\n break;\n case 'ticks':\n if (!isNullOrUndefined(this.sliderContainer.querySelector('.' + classNames.scale))) {\n detach(this.ul);\n Array.prototype.forEach.call(this.sliderContainer.classList, function (className) {\n if (className.match(/e-scale-/)) {\n _this.sliderContainer.classList.remove(className);\n }\n });\n }\n if (this.ticks.placement !== 'None') {\n this.renderScale();\n this.setZindex();\n }\n break;\n case 'locale':\n if (this.showButtons) {\n this.buttonTitle();\n }\n break;\n case 'showButtons':\n if (newProp.showButtons) {\n this.setButtons();\n this.reposition();\n if (this.enabled && !this.readonly) {\n this.wireButtonEvt(false);\n }\n }\n else {\n if (this.firstBtn && this.secondBtn) {\n this.sliderContainer.removeChild(this.firstBtn);\n this.sliderContainer.removeChild(this.secondBtn);\n this.firstBtn = undefined;\n this.secondBtn = undefined;\n }\n }\n break;\n case 'enabled':\n this.setEnabled();\n break;\n case 'readonly':\n this.setReadOnly();\n break;\n case 'customValue':\n this.setValue();\n this.reposition();\n break;\n }\n }\n };\n Slider.prototype.setReadOnly = function () {\n if (this.readonly) {\n this.unwireEvents();\n this.sliderContainer.classList.add(classNames.readonly);\n }\n else {\n this.wireEvents();\n this.sliderContainer.classList.remove(classNames.readonly);\n }\n };\n Slider.prototype.setMinMaxValue = function () {\n var _this = this;\n this.setValue();\n this.refreshTooltip();\n if (!isNullOrUndefined(this.sliderContainer.querySelector('.' + classNames.scale))) {\n if (this.ul) {\n detach(this.ul);\n Array.prototype.forEach.call(this.sliderContainer.classList, function (className) {\n if (className.match(/e-scale-/)) {\n _this.sliderContainer.classList.remove(className);\n }\n });\n }\n }\n if (this.ticks.placement !== 'None') {\n this.renderScale();\n this.setZindex();\n }\n };\n Slider.prototype.setZindex = function () {\n this.zIndex = 6;\n if (!isNullOrUndefined(this.ticks) && this.ticks.placement !== 'None') {\n this.ul.style.zIndex = (this.zIndex + -7) + '';\n this.element.style.zIndex = (this.zIndex + 2) + '';\n }\n if (!this.isMaterial && !isNullOrUndefined(this.ticks) && this.ticks.placement === 'Both') {\n this.element.style.zIndex = (this.zIndex + 2) + '';\n }\n this.firstHandle.style.zIndex = (this.zIndex + 3) + '';\n if (this.type === 'Range') {\n this.secondHandle.style.zIndex = (this.zIndex + 4) + '';\n }\n };\n Slider.prototype.setTooltip = function () {\n this.changeSliderType(this.type);\n };\n /**\n * Gets the component name\n * @private\n */\n Slider.prototype.getModuleName = function () {\n return 'slider';\n };\n __decorate([\n Property(null)\n ], Slider.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], Slider.prototype, \"customValues\", void 0);\n __decorate([\n Property(1)\n ], Slider.prototype, \"step\", void 0);\n __decorate([\n Property(0)\n ], Slider.prototype, \"min\", void 0);\n __decorate([\n Property(100)\n ], Slider.prototype, \"max\", void 0);\n __decorate([\n Property(false)\n ], Slider.prototype, \"readonly\", void 0);\n __decorate([\n Property('Default')\n ], Slider.prototype, \"type\", void 0);\n __decorate([\n Complex({}, TicksData)\n ], Slider.prototype, \"ticks\", void 0);\n __decorate([\n Complex({}, LimitData)\n ], Slider.prototype, \"limits\", void 0);\n __decorate([\n Property(true)\n ], Slider.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], Slider.prototype, \"enableRtl\", void 0);\n __decorate([\n Complex({}, TooltipData)\n ], Slider.prototype, \"tooltip\", void 0);\n __decorate([\n Property(false)\n ], Slider.prototype, \"showButtons\", void 0);\n __decorate([\n Property(true)\n ], Slider.prototype, \"enableAnimation\", void 0);\n __decorate([\n Property('Horizontal')\n ], Slider.prototype, \"orientation\", void 0);\n __decorate([\n Property('')\n ], Slider.prototype, \"cssClass\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"changed\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"renderingTicks\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"renderedTicks\", void 0);\n __decorate([\n Event()\n ], Slider.prototype, \"tooltipChange\", void 0);\n Slider = __decorate([\n NotifyPropertyChanges\n ], Slider);\n return Slider;\n}(Component));\nexport { Slider };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\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, removeClass, closest, append, attributes, setStyleAttribute } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit, getValue, getUniqueID } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { ListBase, cssClass as ListBaseClasses } 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 RTL = 'e-rtl';\nvar CONTENT = 'e-content';\nvar SELECTED = 'e-active';\nvar HOVER = 'e-hover';\nvar NAVIGATION = 'e-navigation';\nvar DISABLED = 'e-disabled';\nvar ICONANIMATION = 'e-icon-anim';\nvar FOCUS = 'e-input-focus';\nvar DEVICE = 'e-device';\nvar LISTCLASS = ListBaseClasses.li;\nvar HALFPOSITION = 2;\nvar ANIMATIONDURATION = 50;\nexport var TimePickerBase;\n(function (TimePickerBase) {\n // tslint:disable-next-line\n function createListItems(createdEl, min, max, globalize, timeFormat, step) {\n var formatOptions;\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: timeFormat, type: 'time' };\n }\n else {\n formatOptions = { format: timeFormat, type: 'time', calendar: 'islamic' };\n }\n var start;\n var end;\n var interval = step * 60000;\n var listItems = [];\n var timeCollections = [];\n start = +(min.setMilliseconds(0));\n end = +(max.setMilliseconds(0));\n while (end >= start) {\n timeCollections.push(start);\n listItems.push(globalize.formatDate(new Date(start), { format: timeFormat, type: 'time' }));\n start += interval;\n }\n var listTag = ListBase.createList(createdEl, listItems, null, true);\n return { collection: timeCollections, list: listTag };\n }\n TimePickerBase.createListItems = createListItems;\n})(TimePickerBase || (TimePickerBase = {}));\n/**\n * TimePicker is an intuitive interface component which provides an options to select a time value\n * from popup list or to set a desired time value.\n * ```\n *
\n * \n * ```\n */\nvar TimePicker = /** @class */ (function (_super) {\n __extends(TimePicker, _super);\n /**\n * Constructor for creating the widget\n */\n function TimePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.liCollections = [];\n _this.timeCollections = [];\n _this.disableItemCollection = [];\n return _this;\n }\n /**\n * Initialize the event handler\n * @private\n */\n TimePicker.prototype.preRender = function () {\n this.keyConfigure = {\n enter: 'enter',\n escape: 'escape',\n end: 'end',\n tab: 'tab',\n home: 'home',\n down: 'downarrow',\n up: 'uparrow',\n left: 'leftarrow',\n right: 'rightarrow',\n open: 'alt+downarrow',\n close: 'alt+uparrow'\n };\n this.cloneElement = this.element.cloneNode(true);\n this.inputElement = this.element;\n this.angularTag = null;\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 };\n // element creation\n TimePicker.prototype.render = function () {\n this.initialize();\n this.createInputElement();\n this.setTimeAllowEdit();\n this.setEnable();\n this.validateInterval();\n this.bindEvents();\n this.validateDisable();\n this.setValue(this.getFormattedValue(this.value));\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 };\n TimePicker.prototype.validateDisable = function () {\n this.setMinMax(this.initMin, this.initMax);\n this.popupCreation();\n this.popupObj.hide();\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 // persist the value property.\n this.setProperties({ value: this.checkDateValue(new Date('' + this.value)) }, true);\n this.setProperties({ min: this.checkDateValue(new Date('' + this.min)) }, true);\n this.setProperties({ max: this.checkDateValue(new Date('' + this.max)) }, true);\n if (this.angularTag !== null) {\n this.validationAttribute(this.element, this.inputElement);\n }\n this.checkAttributes(); //check the input element attributes\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('timepicker', localeText, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n this.initValue = this.checkDateValue(this.value);\n this.initMin = this.checkDateValue(this.min);\n this.initMax = this.checkDateValue(this.max);\n this.isNavigate = this.isPreventBlur = this.isTextSelected = false;\n this.activeIndex = this.valueWithMinutes = this.prevDate = null;\n if (!isNullOrUndefined(this.element.getAttribute('id'))) {\n if (this.angularTag !== null) {\n this.inputElement.id = this.element.getAttribute('id') + '_input';\n }\n }\n else {\n //for angular case\n this.element.id = getUniqueID('ej2_timepicker');\n if (this.angularTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n if (isNullOrUndefined(this.inputElement.getAttribute('name'))) {\n attributes(this.inputElement, { 'name': this.element.id });\n }\n };\n TimePicker.prototype.checkDateValue = function (value) {\n return (!isNullOrUndefined(value) && value instanceof Date && !isNaN(+value)) ? value : null;\n };\n TimePicker.prototype.createInputElement = function () {\n this.inputWrapper = Input.createInput({\n element: this.inputElement,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: this.cssClass,\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 // 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 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 remove(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 var form = closest(this.element, 'form');\n if (form) {\n EventHandler.remove(form, 'reset', this.formResetHandler.bind(this));\n }\n };\n TimePicker.prototype.ensureInputAttribute = function () {\n for (var i = 0; i < this.inputElement.attributes.length; i++) {\n var prop = this.inputElement.attributes[i].name;\n if (isNullOrUndefined(this.cloneElement.getAttribute(prop))) {\n if (prop.toLowerCase() === 'value' || isNullOrUndefined(this.cloneElement.getAttribute('value'))) {\n this.inputElement.value = '';\n }\n this.inputElement.removeAttribute(prop);\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 document.body.appendChild(this.popupWrapper);\n this.addSelection();\n this.renderPopup();\n this.setScrollPosition();\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.popupCalculation = function () {\n var left = 0;\n if (Browser.isDevice) {\n var firstItem = this.isEmptyList() ? this.listTag : this.liCollections[0];\n left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -\n (this.enableRtl ? parseInt(getComputedStyle(this.inputElement).paddingRight, 10) :\n parseInt(getComputedStyle(this.inputElement).paddingLeft, 10)));\n }\n return left;\n };\n TimePicker.prototype.isEmptyList = function () {\n return !isNullOrUndefined(this.liCollections) && this.liCollections.length === 0 ||\n isNullOrUndefined(this.liCollections);\n };\n TimePicker.prototype.renderPopup = function () {\n var _this = this;\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n var offset = Browser.isDevice ? this.setPopupPosition() : 2;\n this.popupObj = new Popup(this.popupWrapper, {\n width: this.setPopupWidth(this.width),\n zIndex: this.zIndex,\n targetType: 'relative',\n collision: { X: 'flip', Y: 'flip' },\n relateTo: this.inputWrapper.container,\n position: { X: 'left', Y: 'bottom' },\n enableRtl: this.enableRtl,\n offsetY: offset,\n offsetX: this.popupCalculation(),\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 }\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.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)) {\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.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 meridian = getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.dayPeriods.format.abbreviated', 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 if (Browser.isDevice) {\n var firstItem = this.isEmptyList() ? this.listTag : this.liCollections[0];\n width = (parseInt(width, 10) + (parseInt(getComputedStyle(firstItem).textIndent, 10) -\n parseInt(getComputedStyle(this.inputElement).textIndent, 10) +\n parseInt(getComputedStyle(this.inputElement.parentElement).borderLeftWidth, 10)) * 2) + 'px';\n }\n return width;\n };\n TimePicker.prototype.setScrollPosition = function () {\n var listHeight = this.getPopupHeight();\n var element;\n element = this.selectedElement;\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else if (this.popupWrapper && this.checkDateValue(this.scrollTo)) {\n this.setScrollTo();\n }\n };\n TimePicker.prototype.findScrollTop = function (element) {\n var listHeight = this.getPopupHeight();\n var nextEle = element.nextElementSibling;\n var height = nextEle ? nextEle.offsetTop : element.offsetTop;\n var liHeight = element.getBoundingClientRect().height;\n if ((height + element.offsetTop) > listHeight) {\n this.popupWrapper.scrollTop = nextEle ? (height - (listHeight / HALFPOSITION + liHeight / HALFPOSITION)) : height;\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n };\n TimePicker.prototype.setScrollTo = function () {\n var element;\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n var initialTime = this.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.format)) {\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.format;\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.popupHandler = function (e) {\n if (Browser.isDevice) {\n this.element.setAttribute('readonly', 'readonly');\n }\n e.preventDefault();\n if (this.isPopupOpen()) {\n this.closePopup(0, e);\n }\n else {\n this.show(e);\n }\n };\n TimePicker.prototype.mouseDownHandler = function () {\n if (!this.readonly) {\n var curPos = this.getCursorSelection();\n this.inputElement.setSelectionRange(0, 0);\n EventHandler.add(this.inputElement, 'mouseup', this.mouseUpHandler, this);\n }\n };\n TimePicker.prototype.mouseUpHandler = function (event) {\n if (!this.readonly) {\n event.preventDefault();\n EventHandler.remove(this.inputElement, 'mouseup', this.mouseUpHandler);\n var curPos = this.getCursorSelection();\n if (!(curPos.start === 0 && curPos.end === this.inputElement.value.length)) {\n if (this.inputElement.value.length > 0) {\n this.cursorDetails = this.focusSelection();\n }\n this.inputElement.setSelectionRange(this.cursorDetails.start, this.cursorDetails.end);\n }\n }\n };\n TimePicker.prototype.focusSelection = function () {\n var regex = new RegExp('^[a-zA-Z0-9]+$');\n var split = this.inputElement.value.split('');\n split.push(' ');\n var curPos = this.getCursorSelection();\n var start = 0;\n var end = 0;\n var isSeparator = false;\n if (!this.isTextSelected) {\n for (var i = 0; i < split.length; i++) {\n if (!regex.test(split[i])) {\n end = i;\n isSeparator = true;\n }\n if (isSeparator) {\n if (curPos.start >= start && curPos.end <= end) {\n end = end;\n this.isTextSelected = true;\n break;\n }\n else {\n start = i + 1;\n isSeparator = false;\n }\n }\n }\n }\n else {\n start = curPos.start;\n end = curPos.end;\n this.isTextSelected = false;\n }\n return { start: start, end: end };\n };\n TimePicker.prototype.inputHandler = function (event) {\n if (!this.readonly && this.enabled) {\n if (event.action !== 'right' && event.action !== 'left' && event.action !== 'tab') {\n event.preventDefault();\n }\n switch (event.action) {\n case 'home':\n case 'end':\n case 'up':\n case 'down':\n this.keyHandler(event);\n break;\n case 'enter':\n if (this.isNavigate) {\n this.selectedElement = this.liCollections[this.activeIndex];\n 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 addClass([this.inputWrapper.container], FOCUS);\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 Input.setValue(this.objToString(this.value), this.inputElement, this.floatLabelType, this.showClearButton);\n this.previousState(this.value);\n this.hide();\n break;\n case 'close':\n this.hide();\n break;\n default:\n this.isNavigate = false;\n break;\n }\n }\n };\n TimePicker.prototype.onMouseClick = function (event) {\n var target = event.target;\n var li = this.selectedElement = closest(target, '.' + LISTCLASS);\n this.setSelection(li, event);\n if (li && li.classList.contains(LISTCLASS)) {\n this.hide();\n addClass([this.inputWrapper.container], FOCUS);\n }\n };\n TimePicker.prototype.closePopup = function (delay, e) {\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 this.trigger('close', 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 }\n if (Browser.isDevice) {\n this.element.removeAttribute('readonly');\n }\n };\n TimePicker.prototype.checkValueChange = function (event, isNavigation) {\n if (!this.strictMode && !this.validateState(this.valueWithMinutes)) {\n if (this.checkDateValue(this.valueWithMinutes) === null) {\n this.initValue = this.valueWithMinutes = null;\n }\n this.setProperties({ value: this.compareFormatChange(this.inputElement.value) }, true);\n this.initValue = this.valueWithMinutes = this.compareFormatChange(this.inputElement.value);\n this.prevValue = this.inputElement.value;\n if (+this.prevDate !== +this.value) {\n this.changeEvent(event);\n }\n }\n else {\n if (!isNavigation) {\n if ((this.prevValue !== this.inputElement.value) || isNullOrUndefined(this.checkDateValue(this.value))) {\n this.valueProcess(event, this.compareFormatChange(this.inputElement.value));\n }\n }\n else {\n var value = this.getDateObject(new Date(this.timeCollections[this.activeIndex]));\n if (+this.prevDate !== +value) {\n this.valueProcess(event, value);\n }\n }\n }\n };\n TimePicker.prototype.onMouseOver = function (event) {\n var currentLi = closest(event.target, '.' + LISTCLASS);\n this.setHover(currentLi, HOVER);\n };\n TimePicker.prototype.setHover = function (li, className) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(className)) {\n this.removeHover(className);\n addClass([li], className);\n if (className === NAVIGATION) {\n li.setAttribute('aria-selected', 'true');\n }\n }\n };\n TimePicker.prototype.setSelection = function (li, event) {\n if (this.isValidLI(li) && !li.classList.contains(SELECTED)) {\n this.checkValue(li.getAttribute('data-value'));\n this.selectedElement = li;\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n addClass([this.selectedElement], SELECTED);\n this.selectedElement.setAttribute('aria-selected', 'true');\n this.checkValueChange(event, true);\n }\n };\n TimePicker.prototype.onMouseLeave = function () {\n this.removeHover(HOVER);\n };\n TimePicker.prototype.scrollHandler = function () {\n if (this.getModuleName() === 'timepicker' && Browser.isDevice) {\n return;\n }\n else {\n this.hide();\n }\n };\n TimePicker.prototype.setMinMax = function (minVal, maxVal) {\n if (isNullOrUndefined(this.checkDateValue(minVal))) {\n this.initMin = this.getDateObject('12:00:00 AM');\n }\n if (isNullOrUndefined(this.checkDateValue(maxVal))) {\n this.initMax = this.getDateObject('11:59:59 PM');\n }\n };\n //protected function\n TimePicker.prototype.validateMinMax = function (dateVal, minVal, maxVal) {\n var value = dateVal instanceof Date ? dateVal : this.getDateObject(dateVal);\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n dateVal = this.strictOperation(this.initMin, this.initMax, dateVal, value);\n }\n else if (+(this.createDateObj(this.getFormattedValue(this.initMin))) >\n +(this.createDateObj(this.getFormattedValue(this.initMax)))) {\n this.disableTimeIcon();\n }\n if (this.strictMode) {\n dateVal = this.valueIsDisable(dateVal) ? dateVal : null;\n }\n this.checkErrorState(dateVal);\n return dateVal;\n };\n TimePicker.prototype.valueIsDisable = function (value) {\n if (this.disableItemCollection.length > 0) {\n if (this.disableItemCollection.length === this.timeCollections.length) {\n return false;\n }\n var time = value instanceof Date ? this.objToString(value) : value;\n for (var index = 0; index < this.disableItemCollection.length; index++) {\n if (time === this.disableItemCollection[index]) {\n return false;\n }\n }\n }\n return true;\n };\n TimePicker.prototype.validateState = function (val) {\n if (!this.strictMode) {\n if (this.valueIsDisable(val)) {\n var value = typeof val === 'string' ? this.setCurrentDate(this.getDateObject(val)) :\n this.setCurrentDate(this.getDateObject(val));\n var maxValue = this.setCurrentDate(this.getDateObject(this.initMax));\n var minValue = this.setCurrentDate(this.getDateObject(this.initMin));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n if ((+(value) > +(maxValue)) || (+(value) < +(minValue))) {\n return false;\n }\n }\n else {\n if ((+(maxValue) < +(minValue)) || this.inputElement.value !== '') {\n return false;\n }\n }\n }\n else {\n return false;\n }\n }\n return true;\n };\n TimePicker.prototype.strictOperation = function (minimum, maximum, dateVal, val) {\n var maxValue = this.createDateObj(this.getFormattedValue(maximum));\n var minValue = this.createDateObj(this.getFormattedValue(minimum));\n var value = this.createDateObj(this.getFormattedValue(val));\n if (this.strictMode) {\n if (+minValue > +maxValue) {\n this.disableTimeIcon();\n this.initValue = this.getDateObject(maxValue);\n Input.setValue(this.getValue(this.initValue), this.inputElement, this.floatLabelType, this.showClearButton);\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 if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.clearHandler, this);\n }\n var form = closest(this.element, 'form');\n if (form) {\n EventHandler.add(form, 'reset', this.formResetHandler.bind(this));\n }\n if (!Browser.isDevice) {\n this.inputEvent = new KeyboardEvents(this.inputWrapper.container, {\n keyAction: this.inputHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'\n });\n if (this.showClearButton) {\n EventHandler.add(this.inputElement, 'mousedown', this.mouseDownHandler, this);\n }\n }\n };\n TimePicker.prototype.formResetHandler = function () {\n if (!this.inputElement.getAttribute('value')) {\n this.value = null;\n if (this.inputElement) {\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n this.removeErrorClass();\n }\n }\n else {\n this.value = this.checkDateValue(new Date('' + this.element.getAttribute('value')));\n }\n };\n TimePicker.prototype.inputChangeHandler = function (e) {\n e.stopPropagation();\n };\n TimePicker.prototype.unBindEvents = function () {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.popupHandler);\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);\n EventHandler.remove(this.inputElement, 'change', this.inputChangeHandler);\n if (this.inputEvent) {\n this.inputEvent.destroy();\n }\n EventHandler.remove(this.inputElement, 'mousedown touchstart', this.mouseDownHandler);\n EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.clearHandler);\n var form = closest(this.element, 'form');\n if (form) {\n EventHandler.remove(form, 'reset', this.formResetHandler.bind(this));\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.clearHandler = function (e) {\n e.preventDefault();\n this.clear(e);\n if (this.popupWrapper) {\n this.popupWrapper.scrollTop = 0;\n }\n };\n TimePicker.prototype.clear = function (event) {\n this.setProperties({ value: null }, true);\n this.initValue = null;\n this.resetState();\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 () {\n var attributes = ['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 var enabled = isNullOrUndefined(this.inputElement.getAttribute(prop));\n this.setProperties({ enabled: enabled }, true);\n break;\n case 'readonly':\n var readonly = !isNullOrUndefined(this.inputElement.getAttribute(prop));\n this.setProperties({ readonly: readonly }, true);\n break;\n case 'style':\n this.inputStyle = this.inputElement.getAttribute(prop);\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 this.placeholder = this.inputElement.getAttribute(prop);\n break;\n case 'min':\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.setProperties({ min: value }, true);\n }\n break;\n case 'max':\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.setProperties({ max: value }, true);\n }\n break;\n case 'value':\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 }\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 Input.setValue(inputVal, this.inputElement, this.floatLabelType, this.showClearButton);\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 Input.setValue(value_1, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(time, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n return time;\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 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(this.timeCollections.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 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 };\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.setPopupPosition = function () {\n var offsetValue;\n var padding = 1;\n var popupHeight = this.getPopupHeight();\n var element = this.getActiveElement();\n var liHeight = this.liCollections[0].getBoundingClientRect().height;\n var listHeight = popupHeight / HALFPOSITION;\n var height = element.length === 0 ? this.liCollections[0].offsetTop : element[0].offsetTop;\n var lastItemOffsetValue = this.liCollections[this.liCollections.length - 1].offsetTop;\n var ulPadding = (parseInt(getComputedStyle(this.listTag).paddingTop, 10));\n if (lastItemOffsetValue - listHeight < height) {\n var count = popupHeight / liHeight;\n offsetValue = (count - (this.liCollections.length - this.activeIndex)) * liHeight - ulPadding - HALFPOSITION;\n }\n else if ((height + liHeight) > listHeight) {\n offsetValue = listHeight - liHeight / HALFPOSITION;\n }\n else {\n offsetValue = height;\n }\n offsetValue = offsetValue + HALFPOSITION + ((liHeight - this.containerStyle.height) / HALFPOSITION);\n return -offsetValue;\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 this.trigger('change', eventArgs);\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 ((this.value && +new Date(+this.value).setMilliseconds(0)) !== +date) {\n this.setProperties({ value: date }, true);\n }\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 today = this.globalize.formatDate(new Date(), { 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(), { skeleton: 'short', type: 'date' });\n value = isNaN(+new Date(today + ' ' + val)) ? null : new Date(new Date(today + ' ' + val).setMilliseconds(0));\n if (isNullOrUndefined(value)) {\n value = this.TimeParse(today, val);\n }\n }\n else {\n value = this.TimeParse(today, val);\n }\n }\n else if (val instanceof Date) {\n value = val;\n }\n return value;\n };\n TimePicker.prototype.TimeParse = function (today, val) {\n var value;\n value = this.globalize.parseDate(today + ' ' + val, {\n format: this.cldrDateFormat() + ' ' + this.cldrTimeFormat(), type: 'datetime'\n });\n value = isNullOrUndefined(value) ? this.globalize.parseDate(today + ' ' + val, {\n format: this.cldrDateFormat() + ' ' + this.dateToNumeric(), type: 'datetime'\n }) : value;\n value = isNullOrUndefined(value) ? value : new Date(value.setMilliseconds(0));\n return value;\n };\n TimePicker.prototype.createListItems = function () {\n var _this = this;\n this.listWrapper = this.createElement('div', { className: CONTENT, attrs: { 'tabindex': '0' } });\n var start;\n var end;\n var interval = this.step * 60000;\n var listItems = [];\n this.timeCollections = [];\n this.disableItemCollection = [];\n start = +(this.getDateObject(this.initMin).setMilliseconds(0));\n end = +(this.getDateObject(this.initMax).setMilliseconds(0));\n while (end >= start) {\n this.timeCollections.push(start);\n listItems.push(this.globalize.formatDate(new Date(start), { format: this.cldrTimeFormat(), type: 'time' }));\n start += interval;\n }\n var listBaseOptions = {\n itemCreated: function (args) {\n var eventArgs = {\n element: args.item,\n text: args.text, value: _this.getDateObject(args.text), isDisabled: false\n };\n _this.trigger('itemRender', eventArgs);\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 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 event.preventDefault();\n var target = event.target;\n if (!(closest(target, '#' + 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 }\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 event.preventDefault();\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 }\n else {\n this.hide();\n addClass([this.inputWrapper.container], DISABLED);\n attributes(this.inputElement, { 'aria-disabled': 'true' });\n }\n };\n TimePicker.prototype.getProperty = function (date, val) {\n if (val === 'min') {\n this.initMin = this.checkDateValue(new Date('' + date.min));\n this.setProperties({ min: this.initMin }, true);\n }\n else {\n this.initMax = this.checkDateValue(new Date('' + 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 // IE popup closing issue when click over the scrollbar\n if (this.isPreventBlur && this.isPopupOpen()) {\n this.inputElement.focus();\n return;\n }\n this.closePopup(0, e);\n removeClass([this.inputWrapper.container], [FOCUS]);\n var blurArguments = {\n model: this\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 };\n /**\n * Focuses out the TimePicker textbox element.\n * @returns void\n */\n TimePicker.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement) {\n this.inputElement.blur();\n 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 var focusArguments = {\n model: this\n };\n if (!this.readonly && !Browser.isDevice) {\n this.selectInputText();\n }\n this.trigger('focus', focusArguments);\n };\n /**\n * Focused the TimePicker textbox element.\n * @returns void\n */\n TimePicker.prototype.focusIn = function () {\n if (document.activeElement !== this.inputElement && this.enabled) {\n this.inputElement.focus();\n var focusArguments = {\n model: this\n };\n this.trigger('focus', focusArguments);\n }\n };\n /**\n * Hides the TimePicker popup.\n * @returns void\n */\n TimePicker.prototype.hide = function () {\n this.closePopup(100, null);\n };\n /**\n * Opens the popup to show the list items.\n * @returns void\n */\n TimePicker.prototype.show = function (event) {\n if ((this.enabled && this.readonly) || !this.enabled || this.popupWrapper) {\n return;\n }\n else {\n var args = {\n popup: this.popupObj || null,\n cancel: false,\n event: event || null,\n name: 'open'\n };\n this.trigger('open', args);\n if (!args.cancel && !this.isPopupOpen() && !this.inputWrapper.buttons[0].classList.contains(DISABLED)) {\n this.inputElement.focus();\n this.popupCreation();\n if (!args.cancel) {\n var openAnimation = {\n name: 'FadeIn',\n duration: ANIMATIONDURATION,\n };\n this.popupObj.refreshPosition(this.inputElement);\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 }\n EventHandler.add(document, 'mousedown', this.documentClickHandler, this);\n }\n }\n };\n /**\n * Gets the properties to be maintained upon browser refresh.\n * @returns string\n */\n TimePicker.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * To get component name\n * @private\n */\n TimePicker.prototype.getModuleName = function () {\n return 'timepicker';\n };\n /**\n * Called internally if any of the property value changed.\n * returns void\n * @private\n */\n 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 break;\n case 'cssClass':\n this.inputWrapper.container.className += ' ' + newProp.cssClass;\n if (this.popupWrapper) {\n this.popupWrapper.className += ' ' + newProp.cssClass;\n }\n this.setProperties({ cssClass: newProp.cssClass }, true);\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 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n this.setZIndex();\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 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.setValue(this.value);\n break;\n case 'value':\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 this.checkValueChange(null, false);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);\n break;\n case 'strictMode':\n if (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('' + newProp.scrollTo))) {\n if (this.popupWrapper) {\n this.setScrollTo();\n }\n this.setProperties({ scrollTo: newProp.scrollTo }, true);\n }\n else {\n this.setProperties({ scrollTo: null }, true);\n }\n break;\n }\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, \"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('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, \"enableRtl\", 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, \"blur\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"focus\", void 0);\n TimePicker = __decorate([\n NotifyPropertyChanges\n ], TimePicker);\n return TimePicker;\n}(Component));\nexport { TimePicker };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, Event, EventHandler, L10n, compile, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, detach, append, Animation } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, KeyboardEvents, setValue, getValue, ChildProperty } from '@syncfusion/ej2-base';\nimport { Collection, Complex, Browser, Ajax, getUniqueID } from '@syncfusion/ej2-base';\nimport { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nvar ROOT = 'e-uploader';\nvar CONTROL_WRAPPER = 'e-upload';\nvar INPUT_WRAPPER = 'e-file-select';\nvar DROP_AREA = 'e-file-drop';\nvar DROP_WRAPPER = 'e-file-select-wrap';\nvar LIST_PARENT = 'e-upload-files';\nvar FILE = 'e-upload-file-list';\nvar STATUS = 'e-file-status';\nvar ACTION_BUTTONS = 'e-upload-actions';\nvar UPLOAD_BUTTONS = 'e-file-upload-btn e-css e-btn e-flat e-primary';\nvar CLEAR_BUTTONS = 'e-file-clear-btn e-css e-btn e-flat';\nvar FILE_NAME = 'e-file-name';\nvar FILE_TYPE = 'e-file-type';\nvar FILE_SIZE = 'e-file-size';\nvar REMOVE_ICON = 'e-file-remove-btn';\nvar DELETE_ICON = 'e-file-delete-btn';\nvar ABORT_ICON = 'e-file-abort-btn';\nvar RETRY_ICON = 'e-file-reload-btn';\nvar DRAG_HOVER = 'e-upload-drag-hover';\nvar PROGRESS_WRAPPER = 'e-upload-progress-wrap';\nvar PROGRESSBAR = 'e-upload-progress-bar';\nvar PROGRESSBAR_TEXT = 'e-progress-bar-text';\nvar UPLOAD_INPROGRESS = 'e-upload-progress';\nvar UPLOAD_SUCCESS = 'e-upload-success';\nvar UPLOAD_FAILED = 'e-upload-fails';\nvar TEXT_CONTAINER = 'e-file-container';\nvar VALIDATION_FAILS = 'e-validation-fails';\nvar RTL = 'e-rtl';\nvar DISABLED = 'e-disabled';\nvar RTL_CONTAINER = 'e-rtl-container';\nvar ICON_FOCUSED = 'e-clear-icon-focus';\nvar PROGRESS_INNER_WRAPPER = 'e-progress-inner-wrap';\nvar PAUSE_UPLOAD = 'e-file-pause-btn';\nvar RESUME_UPLOAD = 'e-file-play-btn';\nvar RESTRICT_SEQUENTIAL = 'e-restrict-sequential';\nvar FilesProp = /** @class */ (function (_super) {\n __extends(FilesProp, _super);\n function FilesProp() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], FilesProp.prototype, \"name\", void 0);\n __decorate([\n Property(null)\n ], FilesProp.prototype, \"size\", void 0);\n __decorate([\n Property('')\n ], FilesProp.prototype, \"type\", void 0);\n return FilesProp;\n}(ChildProperty));\nexport { FilesProp };\nvar ButtonsProps = /** @class */ (function (_super) {\n __extends(ButtonsProps, _super);\n function ButtonsProps() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Browse...')\n ], ButtonsProps.prototype, \"browse\", void 0);\n __decorate([\n Property('Upload')\n ], ButtonsProps.prototype, \"upload\", void 0);\n __decorate([\n Property('Clear')\n ], ButtonsProps.prototype, \"clear\", void 0);\n return ButtonsProps;\n}(ChildProperty));\nexport { ButtonsProps };\nvar AsyncSettings = /** @class */ (function (_super) {\n __extends(AsyncSettings, _super);\n function AsyncSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], AsyncSettings.prototype, \"saveUrl\", void 0);\n __decorate([\n Property('')\n ], AsyncSettings.prototype, \"removeUrl\", void 0);\n __decorate([\n Property(0)\n ], AsyncSettings.prototype, \"chunkSize\", void 0);\n __decorate([\n Property(3)\n ], AsyncSettings.prototype, \"retryCount\", void 0);\n __decorate([\n Property(500)\n ], AsyncSettings.prototype, \"retryAfterDelay\", void 0);\n return AsyncSettings;\n}(ChildProperty));\nexport { AsyncSettings };\n/**\n * The uploader component allows to upload images, documents, and other files from local to server.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Uploader = /** @class */ (function (_super) {\n __extends(Uploader, _super);\n /**\n * Triggers when change the Uploader value.\n */\n function Uploader(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.initialAttr = { accept: null, multiple: false, disabled: false };\n _this.fileList = [];\n _this.filesData = [];\n _this.uploadedFilesData = [];\n _this.isForm = false;\n _this.allTypes = false;\n _this.pausedData = [];\n _this.uploadMetaData = [];\n _this.tabIndex = '0';\n _this.count = -1;\n return _this;\n }\n /**\n * Calls internally if any of the property value is changed.\n * @private\n */\n Uploader.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 'allowedExtensions':\n this.setExtensions(this.allowedExtensions);\n this.clearAll();\n break;\n case 'enabled':\n this.setControlStatus();\n break;\n case 'multiple':\n this.setMultipleSelection();\n break;\n case 'enableRtl':\n this.setRTL();\n this.reRenderFileList();\n break;\n case 'buttons':\n this.buttons.browse = isNullOrUndefined(this.buttons.browse) ? '' : this.buttons.browse;\n this.buttons.clear = isNullOrUndefined(this.buttons.clear) ? '' : this.buttons.clear;\n this.buttons.upload = isNullOrUndefined(this.buttons.upload) ? '' : this.buttons.upload;\n this.renderButtonTemplates();\n break;\n case 'dropArea':\n this.unBindDropEvents();\n this.setDropArea();\n break;\n case 'files':\n this.renderPreLoadFiles();\n break;\n case 'directoryUpload':\n this.updateDirectoryAttributes();\n break;\n case 'minFileSize':\n case 'maxFileSize':\n case 'template':\n case 'autoUpload':\n if (this.sequentialUpload) {\n this.count = -1;\n }\n this.clearAll();\n break;\n case 'sequentialUpload':\n this.count = -1;\n this.clearAll();\n break;\n case 'locale':\n this.l10n.setLocale(this.locale);\n this.setLocalizedTexts();\n this.preLocaleObj = getValue('currentLocale', this.l10n);\n break;\n }\n }\n };\n Uploader.prototype.setLocalizedTexts = function () {\n if (isNullOrUndefined(this.template)) {\n if (typeof (this.buttons.browse) === 'string') {\n this.browseButton.innerText = (this.buttons.browse === 'Browse...') ?\n this.localizedTexts('Browse') : this.buttons.browse;\n this.browseButton.setAttribute('title', this.browseButton.innerText);\n this.uploadWrapper.querySelector('.' + DROP_AREA).innerHTML = this.localizedTexts('dropFilesHint');\n }\n this.updateFileList();\n }\n };\n Uploader.prototype.getKeyValue = function (val) {\n var keyValue;\n for (var _i = 0, _a = Object.keys(this.preLocaleObj); _i < _a.length; _i++) {\n var key = _a[_i];\n if (this.preLocaleObj[key] === val) {\n keyValue = key;\n }\n }\n return keyValue;\n };\n Uploader.prototype.updateFileList = function () {\n var element;\n if (this.fileList.length > 0 && !isNullOrUndefined(this.uploadWrapper.querySelector('.' + LIST_PARENT))) {\n for (var i = 0; i < this.fileList.length; i++) {\n element = this.fileList[i].querySelector('.e-file-status');\n element.innerHTML = this.localizedTexts(this.getKeyValue(this.filesData[i].status));\n this.filesData[i].status = this.localizedTexts(this.getKeyValue(this.filesData[i].status));\n /* istanbul ignore next */\n if (this.fileList[i].classList.contains(UPLOAD_SUCCESS)) {\n this.fileList[i].querySelector('.e-icons').setAttribute('title', this.localizedTexts('delete'));\n }\n if (this.fileList[i].querySelector('.e-file-play-btn')) {\n this.fileList[i].querySelector('.e-icons').setAttribute('title', this.localizedTexts('resume'));\n }\n if (this.fileList[i].querySelector('.e-file-remove-btn')) {\n this.fileList[i].querySelector('.e-icons').setAttribute('title', this.localizedTexts('remove'));\n }\n if (this.fileList[i].querySelector('.e-file-reload-btn')) {\n this.fileList[i].querySelector('.e-icons').setAttribute('title', this.localizedTexts('retry'));\n }\n if (!this.autoUpload) {\n this.uploadButton.innerText = (this.buttons.upload === 'Upload') ?\n this.localizedTexts('Upload') : this.buttons.upload;\n this.uploadButton.setAttribute('title', this.localizedTexts('Upload'));\n this.clearButton.innerText = (this.buttons.clear === 'Clear') ?\n this.localizedTexts('Clear') : this.buttons.clear;\n this.clearButton.setAttribute('title', this.localizedTexts('Clear'));\n }\n }\n }\n };\n Uploader.prototype.reRenderFileList = function () {\n if (this.listParent) {\n detach(this.listParent);\n this.listParent = null;\n this.fileList = [];\n this.createFileList(this.filesData);\n if (this.actionButtons) {\n this.removeActionButtons();\n this.renderActionButtons();\n this.checkActionButtonStatus();\n }\n }\n };\n Uploader.prototype.preRender = function () {\n this.cloneElement = this.element.cloneNode(true);\n this.localeText = { Browse: 'Browse...', Clear: 'Clear', Upload: 'Upload',\n dropFilesHint: 'Or drop files here', invalidMaxFileSize: 'File size is too large',\n invalidMinFileSize: 'File size is too small', invalidFileType: 'File type is not allowed',\n uploadFailedMessage: 'File failed to upload', uploadSuccessMessage: 'File uploaded successfully',\n removedSuccessMessage: 'File removed successfully', removedFailedMessage: 'Unable to remove file', inProgress: 'Uploading',\n readyToUploadMessage: 'Ready to upload', abort: 'Abort', remove: 'Remove', cancel: 'Cancel', delete: 'Delete file',\n pauseUpload: 'File upload paused', pause: 'Pause', resume: 'Resume', retry: 'Retry',\n fileUploadCancel: 'File upload canceled'\n };\n this.l10n = new L10n('uploader', this.localeText, this.locale);\n this.preLocaleObj = getValue('currentLocale', this.l10n);\n this.checkHTMLAttributes();\n if (this.asyncSettings.saveUrl === '' && this.asyncSettings.removeUrl === '' && !this.autoUpload) {\n var parentEle = this.element.parentElement;\n for (; parentEle && parentEle !== document.documentElement; parentEle = parentEle.parentElement) {\n if (parentEle.tagName === 'FORM') {\n this.isForm = true;\n this.formElement = parentEle;\n parentEle.setAttribute('enctype', 'multipart/form-data');\n parentEle.setAttribute('encoding', 'multipart/form-data');\n }\n }\n }\n // tslint:disable-next-line\n var ejInstance = getValue('ej2_instances', this.element);\n /* istanbul ignore next */\n if (this.element.tagName === 'EJS-UPLOADER') {\n var inputElement = this.createElement('input', { attrs: { type: 'file' } });\n var index = 0;\n for (index; index < this.element.attributes.length; index++) {\n inputElement.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);\n inputElement.innerHTML = this.element.innerHTML;\n }\n if (!inputElement.hasAttribute('name')) {\n inputElement.setAttribute('name', 'UploadFiles');\n }\n this.element.appendChild(inputElement);\n this.element = inputElement;\n setValue('ej2_instances', ejInstance, this.element);\n }\n /* istanbul ignore next */\n if (ejInstance[0].isPureReactComponent) {\n if (!isNullOrUndefined(ejInstance[0].props.name)) {\n this.element.setAttribute('name', ejInstance[0].props.name);\n }\n else if (!isNullOrUndefined(ejInstance[0].props.id) && isNullOrUndefined(ejInstance[0].props.name)) {\n this.element.setAttribute('name', ejInstance[0].props.id);\n }\n else {\n this.element.setAttribute('name', 'UploadFiles');\n }\n }\n if (isNullOrUndefined(this.element.getAttribute('name'))) {\n this.element.setAttribute('name', this.element.getAttribute('id'));\n }\n if (!this.element.hasAttribute('type')) {\n this.element.setAttribute('type', 'file');\n }\n this.updateDirectoryAttributes();\n this.keyConfigs = {\n previous: 'shift+tab',\n enter: 'enter',\n next: 'tab'\n };\n if (this.element.hasAttribute('tabindex')) {\n this.tabIndex = this.element.getAttribute('tabindex');\n }\n };\n Uploader.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Return the module name of the component.\n */\n Uploader.prototype.getModuleName = function () {\n return 'uploader';\n };\n Uploader.prototype.updateDirectoryAttributes = function () {\n if (this.directoryUpload) {\n this.element.setAttribute('directory', 'true');\n this.element.setAttribute('webkitdirectory', 'true');\n }\n else {\n this.element.removeAttribute('directory');\n this.element.removeAttribute('webkitdirectory');\n }\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n Uploader.prototype.render = function () {\n this.renderBrowseButton();\n this.initializeUpload();\n this.wireEvents();\n this.setMultipleSelection();\n this.setExtensions(this.allowedExtensions);\n this.setRTL();\n this.renderPreLoadFiles();\n this.setControlStatus();\n };\n Uploader.prototype.renderBrowseButton = function () {\n this.browseButton = this.createElement('button', { className: 'e-css e-btn', attrs: { 'type': 'button' } });\n this.browseButton.setAttribute('tabindex', this.tabIndex);\n if (typeof (this.buttons.browse) === 'string') {\n this.browseButton.innerText = (this.buttons.browse === 'Browse...') ?\n this.localizedTexts('Browse') : this.buttons.browse;\n this.browseButton.setAttribute('title', this.browseButton.innerText);\n }\n else {\n this.browseButton.appendChild(this.buttons.browse);\n }\n this.element.setAttribute('aria-label', 'Uploader');\n };\n Uploader.prototype.renderActionButtons = function () {\n this.element.setAttribute('tabindex', '-1');\n this.actionButtons = this.createElement('div', { className: ACTION_BUTTONS });\n this.uploadButton = this.createElement('button', { className: UPLOAD_BUTTONS, attrs: { 'type': 'button', 'tabindex': '-1' } });\n this.clearButton = this.createElement('button', { className: CLEAR_BUTTONS, attrs: { 'type': 'button', 'tabindex': '-1' } });\n this.actionButtons.appendChild(this.clearButton);\n this.actionButtons.appendChild(this.uploadButton);\n this.renderButtonTemplates();\n this.uploadWrapper.appendChild(this.actionButtons);\n this.browseButton.blur();\n this.uploadButton.focus();\n this.wireActionButtonEvents();\n };\n Uploader.prototype.wireActionButtonEvents = function () {\n EventHandler.add(this.uploadButton, 'click', this.uploadButtonClick, this);\n EventHandler.add(this.clearButton, 'click', this.clearButtonClick, this);\n };\n Uploader.prototype.unwireActionButtonEvents = function () {\n EventHandler.remove(this.uploadButton, 'click', this.uploadButtonClick);\n EventHandler.remove(this.clearButton, 'click', this.clearButtonClick);\n };\n Uploader.prototype.removeActionButtons = function () {\n if (this.actionButtons) {\n this.unwireActionButtonEvents();\n detach(this.actionButtons);\n this.actionButtons = null;\n }\n };\n Uploader.prototype.renderButtonTemplates = function () {\n if (typeof (this.buttons.browse) === 'string') {\n this.browseButton.innerText = (this.buttons.browse === 'Browse...') ?\n this.localizedTexts('Browse') : this.buttons.browse;\n this.browseButton.setAttribute('title', this.browseButton.innerText);\n }\n else {\n this.browseButton.innerHTML = '';\n this.browseButton.appendChild(this.buttons.browse);\n }\n if (this.uploadButton) {\n var uploadText = void 0;\n uploadText = isNullOrUndefined(this.buttons.upload) ? 'Upload' : this.buttons.upload;\n this.buttons.upload = uploadText;\n if (typeof (this.buttons.upload) === 'string') {\n this.uploadButton.innerText = (this.buttons.upload === 'Upload') ?\n this.localizedTexts('Upload') : this.buttons.upload;\n this.uploadButton.setAttribute('title', this.uploadButton.innerText);\n }\n else {\n this.uploadButton.innerHTML = '';\n this.uploadButton.appendChild(this.buttons.upload);\n }\n }\n if (this.clearButton) {\n var clearText = void 0;\n clearText = isNullOrUndefined(this.buttons.clear) ? 'Clear' : this.buttons.clear;\n this.buttons.clear = clearText;\n if (typeof (this.buttons.clear) === 'string') {\n this.clearButton.innerText = (this.buttons.clear === 'Clear') ?\n this.localizedTexts('Clear') : this.buttons.clear;\n this.clearButton.setAttribute('title', this.clearButton.innerText);\n }\n else {\n this.clearButton.innerHTML = '';\n this.clearButton.appendChild(this.buttons.clear);\n }\n }\n };\n Uploader.prototype.initializeUpload = function () {\n this.element.setAttribute('tabindex', '-1');\n var inputWrapper = this.createElement('span', { className: INPUT_WRAPPER });\n this.element.parentElement.insertBefore(inputWrapper, this.element);\n this.dropAreaWrapper = this.createElement('div', { className: DROP_WRAPPER });\n this.element.parentElement.insertBefore(this.dropAreaWrapper, this.element);\n inputWrapper.appendChild(this.element);\n this.dropAreaWrapper.appendChild(this.browseButton);\n this.dropAreaWrapper.appendChild(inputWrapper);\n var fileDropArea = this.createElement('span', { className: DROP_AREA });\n fileDropArea.innerHTML = this.localizedTexts('dropFilesHint');\n this.dropAreaWrapper.appendChild(fileDropArea);\n this.uploadWrapper = this.createElement('div', { className: CONTROL_WRAPPER, attrs: { 'aria-activedescendant': 'li-focused' } });\n this.dropAreaWrapper.parentElement.insertBefore(this.uploadWrapper, this.dropAreaWrapper);\n this.uploadWrapper.appendChild(this.dropAreaWrapper);\n this.setDropArea();\n };\n Uploader.prototype.renderPreLoadFiles = function () {\n if (isNullOrUndefined(this.files[0].size) || !isNullOrUndefined(this.template)) {\n return;\n }\n var files = [].slice.call(this.files);\n var filesData = [];\n if (!this.multiple) {\n this.clearData();\n files = [files[0]];\n }\n for (var _i = 0, files_1 = files; _i < files_1.length; _i++) {\n var data = files_1[_i];\n var fileData = {\n name: data.name + '.' + data.type.split('.')[data.type.split('.').length - 1],\n rawFile: '',\n size: data.size,\n status: this.localizedTexts('uploadSuccessMessage'),\n type: data.type,\n validationMessages: { minSize: '', maxSize: '' },\n statusCode: '2'\n };\n filesData.push(fileData);\n this.filesData.push(fileData);\n }\n this.createFileList(filesData);\n if (!this.autoUpload && this.listParent && !this.actionButtons && !this.isForm && this.showFileList) {\n this.renderActionButtons();\n }\n this.checkActionButtonStatus();\n };\n Uploader.prototype.checkActionButtonStatus = function () {\n if (this.actionButtons) {\n var length_1 = this.uploadWrapper.querySelectorAll('.' + VALIDATION_FAILS).length +\n this.uploadWrapper.querySelectorAll('.e-upload-fails:not(.e-upload-progress)').length +\n this.uploadWrapper.querySelectorAll('span.' + UPLOAD_SUCCESS).length +\n this.uploadWrapper.querySelectorAll('span.' + UPLOAD_INPROGRESS).length;\n if (length_1 > 0 && length_1 === this.uploadWrapper.querySelectorAll('li').length) {\n this.uploadButton.setAttribute('disabled', 'disabled');\n }\n else {\n this.uploadButton.removeAttribute('disabled');\n }\n }\n };\n Uploader.prototype.setDropArea = function () {\n var dropTextArea = this.dropAreaWrapper.querySelector('.e-file-drop');\n if (this.dropArea) {\n this.dropZoneElement = (typeof (this.dropArea) !== 'string') ? this.dropArea :\n document.querySelector(this.dropArea);\n var element = this.element;\n var enableDropText = false;\n while (element.parentNode) {\n element = element.parentNode;\n if (element === this.dropZoneElement) {\n enableDropText = true;\n dropTextArea.textContent = this.localizedTexts('dropFilesHint');\n }\n }\n if (!enableDropText) {\n dropTextArea.textContent = '';\n }\n }\n else {\n this.dropZoneElement = this.uploadWrapper;\n dropTextArea.textContent = this.localizedTexts('dropFilesHint');\n }\n this.bindDropEvents();\n };\n Uploader.prototype.setMultipleSelection = function () {\n if (this.multiple && !this.element.hasAttribute('multiple')) {\n var newAttr = document.createAttribute('multiple');\n this.element.setAttributeNode(newAttr);\n }\n else if (!this.multiple) {\n this.element.removeAttribute('multiple');\n }\n };\n Uploader.prototype.checkAutoUpload = function (fileData) {\n if (this.autoUpload) {\n if (this.sequentialUpload) {\n /* istanbul ignore next */\n this.sequenceUpload(fileData);\n }\n else {\n this.upload(fileData);\n }\n this.removeActionButtons();\n }\n else if (!this.actionButtons) {\n this.renderActionButtons();\n }\n this.checkActionButtonStatus();\n };\n Uploader.prototype.sequenceUpload = function (fileData) {\n if (this.filesData.length - fileData.length === 0 ||\n this.filesData[(this.filesData.length - fileData.length - 1)].statusCode !== '1') {\n ++this.count;\n var isFileListCreated = this.showFileList ? false : true;\n if (typeof this.filesData[this.count] === 'object') {\n this.upload(this.filesData[this.count], isFileListCreated);\n if (this.filesData[this.count].statusCode === '0') {\n this.sequenceUpload(fileData);\n }\n }\n else {\n --this.count;\n }\n }\n };\n Uploader.prototype.wireEvents = function () {\n EventHandler.add(this.browseButton, 'click', this.browseButtonClick, this);\n EventHandler.add(this.element, 'change', this.onSelectFiles, this);\n EventHandler.add(document, 'click', this.removeFocus, this);\n this.keyboardModule = new KeyboardEvents(this.uploadWrapper, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown',\n });\n if (this.isForm) {\n EventHandler.add(this.formElement, 'reset', this.resetForm, this);\n }\n };\n Uploader.prototype.unWireEvents = function () {\n EventHandler.remove(this.browseButton, 'click', this.browseButtonClick);\n EventHandler.remove(this.element, 'change', this.onSelectFiles);\n EventHandler.remove(document, 'click', this.removeFocus);\n this.keyboardModule.destroy();\n };\n Uploader.prototype.resetForm = function () {\n this.clearAll();\n };\n Uploader.prototype.keyActionHandler = function (e) {\n var targetElement = e.target;\n switch (e.action) {\n case 'next':\n if (e.target === this.browseButton && isNullOrUndefined(this.listParent)) {\n this.browseButton.blur();\n }\n else if (e.target === this.uploadButton) {\n this.uploadButton.blur();\n }\n else {\n this.setTabFocus(e);\n e.preventDefault();\n e.stopPropagation();\n if (e.target === this.clearButton && this.uploadButton.hasAttribute('disabled')) {\n this.clearButton.blur();\n }\n }\n break;\n case 'previous':\n if (e.target === this.browseButton) {\n this.browseButton.blur();\n }\n else {\n this.setReverseFocus(e);\n e.preventDefault();\n e.stopPropagation();\n }\n break;\n case 'enter':\n if (e.target === this.clearButton) {\n this.clearButtonClick();\n }\n else if (e.target === this.uploadButton) {\n this.uploadButtonClick();\n }\n else if (e.target === this.browseButton) {\n this.browseButtonClick();\n }\n else if (targetElement.classList.contains(PAUSE_UPLOAD)) {\n var metaData = this.getCurrentMetaData(null, e);\n metaData.file.statusCode = '4';\n metaData.file.status = this.localizedTexts('pauseUpload');\n this.abortUpload(metaData, false);\n }\n else if (targetElement.classList.contains(RESUME_UPLOAD)) {\n this.resumeUpload(this.getCurrentMetaData(null, e), e);\n }\n else if (targetElement.classList.contains(RETRY_ICON)) {\n var metaData = this.getCurrentMetaData(null, e);\n metaData.file.statusCode = '1';\n metaData.file.status = this.localizedTexts('readyToUploadMessage');\n this.chunkUpload(metaData.file);\n }\n else {\n this.removeFiles(e);\n if (!targetElement.classList.contains(ABORT_ICON)) {\n this.browseButton.focus();\n }\n }\n e.preventDefault();\n e.stopPropagation();\n break;\n }\n };\n Uploader.prototype.getCurrentMetaData = function (fileInfo, e) {\n var fileData;\n var targetMetaData;\n if (isNullOrUndefined(fileInfo)) {\n var target = this.uploadWrapper.querySelector('.' + ICON_FOCUSED).parentElement;\n fileData = this.filesData[this.fileList.indexOf(target)];\n }\n else {\n fileData = fileInfo;\n }\n for (var i = 0; i < this.uploadMetaData.length; i++) {\n if (this.uploadMetaData[i].file.name === fileData.name) {\n targetMetaData = this.uploadMetaData[i];\n }\n }\n return targetMetaData;\n };\n Uploader.prototype.setReverseFocus = function (e) {\n var target = e.target;\n if (target === this.uploadButton) {\n this.uploadButton.blur();\n this.clearButton.focus();\n }\n else if (target === this.clearButton && this.listParent && this.listParent.querySelector('.e-icons')) {\n this.clearButton.blur();\n var items = [].slice.call(this.listParent.querySelectorAll('span.e-icons'));\n items[items.length - 1].classList.add(ICON_FOCUSED);\n items[items.length - 1].focus();\n }\n else {\n var iconElements = [].slice.call(this.listParent.querySelectorAll('span.e-icons'));\n var index = iconElements.indexOf(target);\n if (index > 0) {\n this.removeFocus();\n iconElements[index - 1].classList.add(ICON_FOCUSED);\n iconElements[index - 1].focus();\n }\n else {\n this.removeFocus();\n this.browseButton.focus();\n }\n }\n };\n Uploader.prototype.setTabFocus = function (e) {\n var target = e.target;\n if (target === this.clearButton) {\n this.removeFocus();\n if (this.uploadButton.hasAttribute('disabled')) {\n return;\n }\n this.uploadButton.focus();\n }\n else if (target.classList.contains('e-icons')) {\n var iconElements = [].slice.call(this.listParent.querySelectorAll('span.e-icons'));\n var index = iconElements.indexOf(target);\n if (index < (iconElements.length - 1)) {\n this.removeFocus();\n iconElements[index + 1].classList.add(ICON_FOCUSED);\n iconElements[index + 1].focus();\n }\n else {\n this.removeFocus();\n this.clearButton.focus();\n }\n }\n else {\n this.browseButton.blur();\n var iconElement = this.listParent.querySelectorAll('span.e-icons')[0];\n iconElement.focus();\n iconElement.classList.add(ICON_FOCUSED);\n }\n };\n Uploader.prototype.removeFocus = function () {\n if (this.uploadWrapper && this.listParent && this.listParent.querySelector('.' + ICON_FOCUSED)) {\n document.activeElement.blur();\n this.listParent.querySelector('.' + ICON_FOCUSED).classList.remove(ICON_FOCUSED);\n }\n };\n Uploader.prototype.browseButtonClick = function () {\n this.element.click();\n };\n Uploader.prototype.uploadButtonClick = function () {\n if (this.sequentialUpload) {\n this.sequenceUpload(this.filesData);\n }\n else {\n this.upload(this.filesData);\n }\n };\n Uploader.prototype.clearButtonClick = function () {\n this.clearAll();\n /* istanbul ignore next */\n if (this.sequentialUpload) {\n this.count = -1;\n }\n };\n Uploader.prototype.bindDropEvents = function () {\n if (this.dropZoneElement) {\n EventHandler.add(this.dropZoneElement, 'drop', this.dropElement, this);\n EventHandler.add(this.dropZoneElement, 'dragover', this.dragHover, this);\n EventHandler.add(this.dropZoneElement, 'dragleave', this.onDragLeave, this);\n EventHandler.add(this.dropZoneElement, 'paste', this.onPasteFile, this);\n }\n };\n Uploader.prototype.unBindDropEvents = function () {\n if (this.dropZoneElement) {\n EventHandler.remove(this.dropZoneElement, 'drop', this.dropElement);\n EventHandler.remove(this.dropZoneElement, 'dragover', this.dragHover);\n EventHandler.remove(this.dropZoneElement, 'dragleave', this.onDragLeave);\n }\n };\n Uploader.prototype.onDragLeave = function (e) {\n this.dropZoneElement.classList.remove(DRAG_HOVER);\n };\n Uploader.prototype.dragHover = function (e) {\n if (!this.enabled) {\n return;\n }\n this.dropZoneElement.classList.add(DRAG_HOVER);\n e.preventDefault();\n e.stopPropagation();\n };\n Uploader.prototype.dropElement = function (e) {\n this.dropZoneElement.classList.remove(DRAG_HOVER);\n this.onSelectFiles(e);\n e.preventDefault();\n e.stopPropagation();\n };\n /* istanbul ignore next */\n Uploader.prototype.onPasteFile = function (event) {\n var item = event.clipboardData.items;\n if (item.length !== 1) {\n return;\n }\n var pasteFile = [].slice.call(item)[0];\n if ((pasteFile.kind === 'file') && pasteFile.type.match('^image/')) {\n this.renderSelectedFiles(event, [pasteFile.getAsFile()], false, true);\n }\n };\n Uploader.prototype.removeFiles = function (args) {\n if (!this.enabled) {\n return;\n }\n var selectedElement = args.target.parentElement;\n var index = this.fileList.indexOf(selectedElement);\n var liElement = this.fileList[index];\n var fileData = this.filesData[index];\n if (args.target.classList.contains(ABORT_ICON)) {\n fileData.statusCode = '5';\n if (!isNullOrUndefined(liElement)) {\n var spinnerTarget = liElement.querySelector('.' + ABORT_ICON);\n createSpinner({ target: spinnerTarget, width: '20px' });\n showSpinner(spinnerTarget);\n }\n if (this.sequentialUpload) {\n /* istanbul ignore next */\n this.uploadSequential();\n }\n }\n else {\n this.remove(fileData, false, false, args);\n }\n this.element.value = '';\n this.checkActionButtonStatus();\n };\n Uploader.prototype.removeFilesData = function (file, customTemplate) {\n var index;\n if (customTemplate) {\n if (!this.showFileList) {\n index = this.filesData.indexOf(file);\n this.filesData.splice(index, 1);\n }\n return;\n }\n var selectedElement = this.getLiElement(file);\n if (isNullOrUndefined(selectedElement)) {\n return;\n }\n detach(selectedElement);\n index = this.fileList.indexOf(selectedElement);\n this.fileList.splice(index, 1);\n this.filesData.splice(index, 1);\n if (this.fileList.length === 0 && !isNullOrUndefined(this.listParent)) {\n detach(this.listParent);\n this.listParent = null;\n this.removeActionButtons();\n }\n if (this.sequentialUpload) {\n /* istanbul ignore next */\n if (index <= this.count) {\n --this.count;\n }\n }\n };\n Uploader.prototype.removeUploadedFile = function (file, eventArgs, removeDirectly, custom) {\n var _this = this;\n var selectedFiles = file;\n var name = this.element.getAttribute('name');\n var ajax = new Ajax(this.asyncSettings.removeUrl, 'POST', true, null);\n var formData = new FormData();\n var liElement = this.getLiElement(file);\n ajax.beforeSend = function (e) {\n eventArgs.currentRequest = ajax.httpRequest;\n if (!removeDirectly) {\n _this.trigger('removing', eventArgs);\n }\n if (eventArgs.cancel) {\n e.cancel = true;\n return;\n }\n if (!isNullOrUndefined(liElement) && (!isNullOrUndefined(liElement.querySelector('.' + DELETE_ICON)) ||\n !isNullOrUndefined(liElement.querySelector('.' + REMOVE_ICON)))) {\n var spinnerTarget = void 0;\n spinnerTarget = liElement.querySelector('.' + DELETE_ICON) ? liElement.querySelector('.' + DELETE_ICON) :\n liElement.querySelector('.' + REMOVE_ICON);\n createSpinner({ target: spinnerTarget, width: '20px' });\n showSpinner(spinnerTarget);\n }\n if (eventArgs.postRawFile && !isNullOrUndefined(selectedFiles.rawFile) && selectedFiles.rawFile !== '') {\n formData.append(name, selectedFiles.rawFile);\n }\n else {\n formData.append(name, selectedFiles.name);\n }\n _this.updateFormData(formData, eventArgs.customFormData);\n };\n ajax.onLoad = function (e) { _this.removeCompleted(e, selectedFiles, custom); return {}; };\n /* istanbul ignore next */\n ajax.onError = function (e) { _this.removeFailed(e, selectedFiles, custom); return {}; };\n ajax.send(formData);\n };\n /* istanbul ignore next */\n Uploader.prototype.updateFormData = function (formData, customData) {\n if (customData.length > 0 && customData[0]) {\n var _loop_1 = function (i) {\n var data = customData[i];\n // tslint:disable-next-line\n var value = Object.keys(data).map(function (e) {\n return data[e];\n });\n formData.append(Object.keys(data)[0], value);\n };\n for (var i = 0; i < customData.length; i++) {\n _loop_1(i);\n }\n }\n };\n Uploader.prototype.removeCompleted = function (e, files, customTemplate) {\n var response = e && e.currentTarget ? this.getResponse(e) : null;\n var args = {\n e: e, response: response, operation: 'remove', file: this.updateStatus(files, this.localizedTexts('removedSuccessMessage'), '2')\n };\n this.trigger('success', args);\n this.removeFilesData(files, customTemplate);\n var index = this.uploadedFilesData.indexOf(files);\n this.uploadedFilesData.splice(index, 1);\n this.trigger('change', { files: this.uploadedFilesData });\n };\n Uploader.prototype.removeFailed = function (e, files, customTemplate) {\n var response = e && e.currentTarget ? this.getResponse(e) : null;\n var args = {\n e: e, response: response, operation: 'remove', file: this.updateStatus(files, this.localizedTexts('removedFailedMessage'), '0')\n };\n if (!customTemplate) {\n var index = this.filesData.indexOf(files);\n var rootElement = this.fileList[index];\n if (rootElement) {\n var statusElement = rootElement.querySelector('.' + STATUS);\n rootElement.classList.remove(UPLOAD_SUCCESS);\n statusElement.classList.remove(UPLOAD_SUCCESS);\n rootElement.classList.add(UPLOAD_FAILED);\n statusElement.classList.add(UPLOAD_FAILED);\n }\n this.checkActionButtonStatus();\n }\n this.trigger('failure', args);\n var liElement = this.getLiElement(files);\n /* istanbul ignore next */\n if (!isNullOrUndefined(liElement) && !isNullOrUndefined(liElement.querySelector('.' + DELETE_ICON))) {\n var spinnerTarget = liElement.querySelector('.' + DELETE_ICON);\n hideSpinner(spinnerTarget);\n detach(liElement.querySelector('.e-spinner-pane'));\n }\n };\n /* istanbul ignore next */\n Uploader.prototype.getFilesFromFolder = function (event) {\n this.filesEntries = [];\n var items;\n items = this.multiple ? event.dataTransfer.items : [event.dataTransfer.items[0]];\n var validDirectoryUpload = this.checkDirectoryUpload(items);\n if (!validDirectoryUpload) {\n return;\n }\n var _loop_2 = function (i) {\n // tslint:disable-next-line\n var item = items[i].webkitGetAsEntry();\n if (item.isFile) {\n var files_2 = [];\n // tslint:disable-next-line\n (item).file(function (fileObj) {\n var path = item.fullPath;\n files_2.push({ 'path': path, 'file': fileObj });\n });\n this_1.renderSelectedFiles(event, files_2, true);\n }\n else if (item.isDirectory) {\n this_1.traverseFileTree(item, event);\n }\n };\n var this_1 = this;\n for (var i = 0; i < items.length; i++) {\n _loop_2(i);\n }\n };\n /* istanbul ignore next */\n Uploader.prototype.checkDirectoryUpload = function (items) {\n for (var i = 0; i < items.length; i++) {\n // tslint:disable-next-line\n var item = items[i].webkitGetAsEntry();\n if (item.isDirectory) {\n return true;\n }\n }\n return false;\n };\n // tslint:disable\n /* istanbul ignore next */\n Uploader.prototype.traverseFileTree = function (item, event) {\n var _this = this;\n if (typeof (item) === 'boolean') {\n var files_3 = [];\n var _loop_3 = function (i) {\n this_2.filesEntries[i].file(function (fileObj) {\n var path = _this.filesEntries[i].fullPath;\n files_3.push({ 'path': path, 'file': fileObj });\n });\n };\n var this_2 = this;\n for (var i = 0; i < this.filesEntries.length; i++) {\n _loop_3(i);\n }\n this.renderSelectedFiles(event, files_3, true);\n }\n else if (item.isFile) {\n this.filesEntries.push(item);\n }\n else if (item.isDirectory) {\n // tslint:disable-next-line\n var directoryReader = item.createReader();\n // tslint:disable-next-line\n directoryReader.readEntries(function (entries) {\n for (var i = 0; i < entries.length; i++) {\n _this.traverseFileTree(entries[i]);\n // tslint:disable-next-line\n }\n ;\n _this.traverseFileTree(true);\n _this.filesEntries = [];\n });\n }\n };\n // tslint:enable\n Uploader.prototype.onSelectFiles = function (args) {\n if (!this.enabled) {\n return;\n }\n var targetFiles;\n if (args.type === 'drop') {\n /* istanbul ignore next */\n if (this.directoryUpload) {\n this.getFilesFromFolder(args);\n }\n else {\n var files = args.dataTransfer.files;\n targetFiles = this.multiple ? this.sortFileList(files) : [files[0]];\n this.renderSelectedFiles(args, targetFiles);\n }\n }\n else {\n targetFiles = [].slice.call(args.target.files);\n this.renderSelectedFiles(args, targetFiles);\n }\n };\n Uploader.prototype.renderSelectedFiles = function (args, \n // tslint:disable-next-line\n targetFiles, directory, paste) {\n var eventArgs = {\n event: args,\n cancel: false,\n filesData: [],\n isModified: false,\n modifiedFilesData: [],\n progressInterval: '',\n isCanceled: false\n };\n /* istanbul ignore next */\n if (targetFiles.length < 1) {\n eventArgs.isCanceled = true;\n this.trigger('selected', eventArgs);\n return;\n }\n var fileData = [];\n if (!this.multiple) {\n this.clearData(true);\n targetFiles = [targetFiles[0]];\n }\n for (var i = 0; i < targetFiles.length; i++) {\n var file = directory ? targetFiles[i].file : targetFiles[i];\n var fileName = directory ? targetFiles[i].path.substring(1, targetFiles[i].path.length) : paste ?\n getUniqueID(file.name.substring(0, file.name.lastIndexOf('.'))) + '.' + this.getFileType(file.name) :\n this.directoryUpload ? targetFiles[i].webkitRelativePath : file.name;\n var fileDetails = {\n name: fileName,\n rawFile: file,\n size: file.size,\n status: this.localizedTexts('readyToUploadMessage'),\n type: this.getFileType(file.name),\n validationMessages: this.validatedFileSize(file.size),\n statusCode: '1'\n };\n if (paste) {\n fileDetails.fileSource = 'paste';\n }\n fileDetails.status = fileDetails.validationMessages.minSize !== '' ? this.localizedTexts('invalidMinFileSize') :\n fileDetails.validationMessages.maxSize !== '' ? this.localizedTexts('invalidMaxFileSize') : fileDetails.status;\n if (fileDetails.validationMessages.minSize !== '' || fileDetails.validationMessages.maxSize !== '') {\n fileDetails.statusCode = '0';\n }\n fileData.push(fileDetails);\n }\n eventArgs.filesData = fileData;\n if (this.allowedExtensions.indexOf('*') > -1) {\n this.allTypes = true;\n }\n if (!this.allTypes) {\n fileData = this.checkExtension(fileData);\n }\n this.trigger('selected', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n if (this.showFileList) {\n if (eventArgs.isModified && eventArgs.modifiedFilesData.length > 0) {\n var dataFiles = this.allTypes ? eventArgs.modifiedFilesData :\n this.checkExtension(eventArgs.modifiedFilesData);\n this.updateSortedFileList(dataFiles);\n this.filesData = dataFiles;\n if (!this.isForm) {\n this.checkAutoUpload(dataFiles);\n }\n }\n else {\n this.createFileList(fileData);\n this.filesData = this.filesData.concat(fileData);\n if (!this.isForm) {\n this.checkAutoUpload(fileData);\n }\n }\n if (!isNullOrUndefined(eventArgs.progressInterval) && eventArgs.progressInterval !== '') {\n this.progressInterval = eventArgs.progressInterval;\n }\n }\n else {\n this.filesData = this.filesData.concat(fileData);\n if (this.autoUpload) {\n this.upload(this.filesData, true);\n }\n }\n };\n Uploader.prototype.clearData = function (singleUpload) {\n if (!isNullOrUndefined(this.listParent)) {\n detach(this.listParent);\n this.listParent = null;\n }\n if (Browser.info.name !== 'msie' && !singleUpload) {\n this.element.value = '';\n }\n this.fileList = [];\n this.filesData = [];\n this.removeActionButtons();\n };\n Uploader.prototype.updateSortedFileList = function (filesData) {\n var previousListClone = this.createElement('div', { id: 'clonewrapper' });\n var added = -1;\n var removedList;\n if (this.listParent) {\n for (var i = 0; i < this.listParent.querySelectorAll('li').length; i++) {\n var liElement = this.listParent.querySelectorAll('li')[i];\n previousListClone.appendChild(liElement.cloneNode(true));\n }\n removedList = this.listParent.querySelectorAll('li');\n for (var _i = 0, removedList_1 = removedList; _i < removedList_1.length; _i++) {\n var item = removedList_1[_i];\n detach(item);\n }\n this.removeActionButtons();\n var oldList = [].slice.call(previousListClone.childNodes);\n detach(this.listParent);\n this.listParent = null;\n this.fileList = [];\n this.createParentUL();\n for (var index = 0; index < filesData.length; index++) {\n for (var j = 0; j < this.filesData.length; j++) {\n if (this.filesData[j].name === filesData[index].name) {\n this.listParent.appendChild(oldList[j]);\n EventHandler.add(oldList[j].querySelector('.e-icons'), 'click', this.removeFiles, this);\n this.fileList.push(oldList[j]);\n added = index;\n }\n }\n if (added !== index) {\n this.createFileList([filesData[index]]);\n }\n }\n }\n else {\n this.createFileList(filesData);\n }\n };\n Uploader.prototype.isBlank = function (str) {\n return (!str || /^\\s*$/.test(str));\n };\n Uploader.prototype.checkExtension = function (files) {\n var dropFiles = files;\n if (!this.isBlank(this.allowedExtensions)) {\n var allowedExtensions = [];\n var extensions = this.allowedExtensions.split(',');\n for (var _i = 0, extensions_1 = extensions; _i < extensions_1.length; _i++) {\n var extension = extensions_1[_i];\n allowedExtensions.push(extension.trim().toLocaleLowerCase());\n }\n for (var i = 0; i < files.length; i++) {\n if (allowedExtensions.indexOf(('.' + files[i].type).toLocaleLowerCase()) === -1) {\n files[i].status = this.localizedTexts('invalidFileType');\n files[i].statusCode = '0';\n }\n }\n }\n return dropFiles;\n };\n Uploader.prototype.validatedFileSize = function (fileSize) {\n var minSizeError = '';\n var maxSizeError = '';\n if (fileSize < this.minFileSize) {\n minSizeError = this.localizedTexts('invalidMinFileSize');\n }\n else if (fileSize > this.maxFileSize) {\n maxSizeError = this.localizedTexts('invalidMaxFileSize');\n }\n else {\n minSizeError = '';\n maxSizeError = '';\n }\n var errorMessage = { minSize: minSizeError, maxSize: maxSizeError };\n return errorMessage;\n };\n Uploader.prototype.createCustomfileList = function (fileData) {\n this.createParentUL();\n for (var _i = 0, fileData_1 = fileData; _i < fileData_1.length; _i++) {\n var listItem = fileData_1[_i];\n var liElement = this.createElement('li', { className: FILE, attrs: { 'data-file-name': listItem.name } });\n this.uploadTemplateFn = this.templateComplier(this.template);\n this.listParent.appendChild(liElement);\n var fromElements = [].slice.call(this.uploadTemplateFn(listItem));\n append(fromElements, liElement);\n this.fileList.push(liElement);\n }\n };\n Uploader.prototype.createParentUL = function () {\n if (isNullOrUndefined(this.listParent)) {\n this.listParent = this.createElement('ul', { className: LIST_PARENT });\n this.uploadWrapper.appendChild(this.listParent);\n }\n };\n Uploader.prototype.createFileList = function (fileData) {\n this.createParentUL();\n if (this.template !== '' && !isNullOrUndefined(this.template)) {\n this.createCustomfileList(fileData);\n }\n else {\n for (var _i = 0, fileData_2 = fileData; _i < fileData_2.length; _i++) {\n var listItem = fileData_2[_i];\n var liElement = this.createElement('li', { className: FILE, attrs: { 'data-file-name': listItem.name } });\n var textContainer = this.createElement('span', { className: TEXT_CONTAINER });\n var textElement = this.createElement('span', { className: FILE_NAME, attrs: { 'title': listItem.name } });\n textElement.innerHTML = this.getFileNameOnly(listItem.name);\n var fileExtension = this.createElement('span', { className: FILE_TYPE });\n fileExtension.innerHTML = '.' + this.getFileType(listItem.name);\n if (!this.enableRtl) {\n textContainer.appendChild(textElement);\n textContainer.appendChild(fileExtension);\n }\n else {\n var rtlContainer = this.createElement('span', { className: RTL_CONTAINER });\n rtlContainer.appendChild(fileExtension);\n rtlContainer.appendChild(textElement);\n textContainer.appendChild(rtlContainer);\n }\n var fileSize = this.createElement('span', { className: FILE_SIZE });\n fileSize.innerHTML = this.bytesToSize(listItem.size);\n textContainer.appendChild(fileSize);\n var statusElement = this.createElement('span', { className: STATUS });\n textContainer.appendChild(statusElement);\n statusElement.innerHTML = listItem.status;\n liElement.appendChild(textContainer);\n var iconElement = this.createElement('span', { className: ' e-icons', attrs: { 'tabindex': '-1' } });\n /* istanbul ignore next */\n if (Browser.info.name === 'msie') {\n iconElement.classList.add('e-msie');\n }\n iconElement.setAttribute('title', this.localizedTexts('remove'));\n liElement.appendChild(iconElement);\n EventHandler.add(iconElement, 'click', this.removeFiles, this);\n if (listItem.statusCode === '2') {\n statusElement.classList.add(UPLOAD_SUCCESS);\n iconElement.classList.add(DELETE_ICON);\n iconElement.setAttribute('title', this.localizedTexts('delete'));\n }\n else if (listItem.statusCode !== '1') {\n statusElement.classList.remove(UPLOAD_SUCCESS);\n statusElement.classList.add(VALIDATION_FAILS);\n }\n if (this.autoUpload && listItem.statusCode === '1' && this.asyncSettings.saveUrl !== '') {\n statusElement.innerHTML = '';\n }\n if (!iconElement.classList.contains(DELETE_ICON)) {\n iconElement.classList.add(REMOVE_ICON);\n }\n this.listParent.appendChild(liElement);\n this.fileList.push(liElement);\n this.truncateName(textElement);\n }\n }\n };\n Uploader.prototype.truncateName = function (name) {\n var nameElement = name;\n var text;\n if (nameElement.offsetWidth < nameElement.scrollWidth) {\n text = nameElement.textContent;\n nameElement.dataset.tail = text.slice(text.length - 10);\n }\n };\n Uploader.prototype.getFileType = function (name) {\n var extension;\n var index = name.lastIndexOf('.');\n if (index >= 0) {\n extension = name.substring(index + 1);\n }\n return extension ? extension : '';\n };\n Uploader.prototype.getFileNameOnly = function (name) {\n var type = this.getFileType(name);\n var names = name.split('.' + type);\n return type = names[0];\n };\n Uploader.prototype.setInitialAttributes = function () {\n if (this.initialAttr.accept) {\n this.element.setAttribute('accept', this.initialAttr.accept);\n }\n if (this.initialAttr.disabled) {\n this.element.setAttribute('disabled', 'disabled');\n }\n if (this.initialAttr.multiple) {\n var newAttr = document.createAttribute('multiple');\n this.element.setAttributeNode(newAttr);\n }\n };\n Uploader.prototype.filterfileList = function (files) {\n var filterFiles = [];\n var li;\n for (var i = 0; i < files.length; i++) {\n li = this.getLiElement(files[i]);\n if (!li.classList.contains(UPLOAD_SUCCESS)) {\n filterFiles.push(files[i]);\n }\n }\n return filterFiles;\n };\n Uploader.prototype.updateStatus = function (files, status, statusCode) {\n if (!(status === '' || isNullOrUndefined(status)) && !(statusCode === '' || isNullOrUndefined(statusCode))) {\n files.status = status;\n files.statusCode = statusCode;\n }\n var li = this.getLiElement(files);\n if (!isNullOrUndefined(li)) {\n if (!isNullOrUndefined(li.querySelector('.' + STATUS)) && !((status === '' || isNullOrUndefined(status)))) {\n li.querySelector('.' + STATUS).textContent = status;\n }\n }\n return files;\n };\n Uploader.prototype.getLiElement = function (files) {\n var index;\n for (var i = 0; i < this.filesData.length; i++) {\n if (this.filesData[i].name === files.name) {\n index = i;\n }\n }\n return this.fileList[index];\n };\n Uploader.prototype.createProgressBar = function (liElement) {\n var progressbarWrapper = this.createElement('span', { className: PROGRESS_WRAPPER });\n var progressBar = this.createElement('progressbar', { className: PROGRESSBAR, attrs: { value: '0', max: '100' } });\n var progressbarInnerWrapper = this.createElement('span', { className: PROGRESS_INNER_WRAPPER });\n progressBar.setAttribute('style', 'width: 0%');\n var progressbarText = this.createElement('span', { className: PROGRESSBAR_TEXT });\n progressbarText.textContent = '0%';\n progressbarInnerWrapper.appendChild(progressBar);\n progressbarWrapper.appendChild(progressbarInnerWrapper);\n progressbarWrapper.appendChild(progressbarText);\n liElement.querySelector('.' + TEXT_CONTAINER).appendChild(progressbarWrapper);\n };\n /* istanbul ignore next */\n Uploader.prototype.updateProgressbar = function (e, li) {\n if (!isNaN(Math.round((e.loaded / e.total) * 100)) && !isNullOrUndefined(li.querySelector('.' + PROGRESSBAR))) {\n if (!isNullOrUndefined(this.progressInterval) && this.progressInterval !== '') {\n var value = (Math.round((e.loaded / e.total) * 100)) % parseInt(this.progressInterval, 10);\n if (value === 0 || value === 100) {\n this.changeProgressValue(li, Math.round((e.loaded / e.total) * 100).toString() + '%');\n }\n }\n else {\n this.changeProgressValue(li, Math.round((e.loaded / e.total) * 100).toString() + '%');\n }\n }\n };\n Uploader.prototype.changeProgressValue = function (li, progressValue) {\n li.querySelector('.' + PROGRESSBAR).setAttribute('style', 'width:' + progressValue);\n li.querySelector('.' + PROGRESSBAR_TEXT).textContent = progressValue;\n };\n Uploader.prototype.uploadInProgress = function (e, files, customUI, request) {\n var li = this.getLiElement(files);\n if (isNullOrUndefined(li) && (!customUI)) {\n return;\n }\n if (!isNullOrUndefined(li)) {\n /* istanbul ignore next */\n if (files.statusCode === '5') {\n this.cancelUploadingFile(files, e, request, li);\n }\n if (!(li.querySelectorAll('.' + PROGRESS_WRAPPER).length > 0) && li.querySelector('.' + STATUS)) {\n li.querySelector('.' + STATUS).classList.add(UPLOAD_INPROGRESS);\n this.createProgressBar(li);\n this.updateProgressBarClasses(li, UPLOAD_INPROGRESS);\n li.querySelector('.' + STATUS).classList.remove(UPLOAD_FAILED);\n }\n this.updateProgressbar(e, li);\n var iconEle = li.querySelector('.' + REMOVE_ICON);\n if (!isNullOrUndefined(iconEle)) {\n iconEle.classList.add(ABORT_ICON, UPLOAD_INPROGRESS);\n iconEle.setAttribute('title', this.localizedTexts('abort'));\n iconEle.classList.remove(REMOVE_ICON);\n }\n }\n else {\n this.cancelUploadingFile(files, e, request);\n }\n var args = { e: e, operation: 'upload', file: this.updateStatus(files, this.localizedTexts('inProgress'), '3') };\n this.trigger('progress', args);\n };\n /* istanbul ignore next */\n Uploader.prototype.cancelUploadingFile = function (files, e, request, li) {\n var _this = this;\n if (files.statusCode === '5') {\n var eventArgs = {\n event: e,\n fileData: files,\n cancel: false\n };\n this.trigger('canceling', eventArgs);\n if (eventArgs.cancel) {\n files.statusCode = '3';\n if (!isNullOrUndefined(li)) {\n var spinnerTarget = li.querySelector('.' + ABORT_ICON);\n if (!isNullOrUndefined(spinnerTarget)) {\n hideSpinner(spinnerTarget);\n detach(li.querySelector('.e-spinner-pane'));\n }\n }\n return;\n }\n request.emitError = false;\n request.httpRequest.abort();\n var formData = new FormData();\n if (files.statusCode === '5') {\n var name_1 = this.element.getAttribute('name');\n formData.append(name_1, files.name);\n formData.append('cancel-uploading', files.name);\n var ajax = new Ajax(this.asyncSettings.removeUrl, 'POST', true, null);\n ajax.onLoad = function (e) { _this.removecanceledFile(e, files); return {}; };\n ajax.send(formData);\n }\n }\n };\n Uploader.prototype.removecanceledFile = function (e, file) {\n var liElement = this.getLiElement(file);\n if (liElement.querySelector('.' + RETRY_ICON) || isNullOrUndefined(liElement.querySelector('.' + ABORT_ICON))) {\n return;\n }\n this.updateStatus(file, this.localizedTexts('fileUploadCancel'), '5');\n this.renderFailureState(e, file, liElement);\n var spinnerTarget = liElement.querySelector('.' + REMOVE_ICON);\n if (!isNullOrUndefined(liElement)) {\n hideSpinner(spinnerTarget);\n detach(liElement.querySelector('.e-spinner-pane'));\n }\n var requestResponse = e && e.currentTarget ? this.getResponse(e) : null;\n var args = { event: e, response: requestResponse, operation: 'cancel', file: file };\n this.trigger('success', args);\n };\n Uploader.prototype.renderFailureState = function (e, file, liElement) {\n var _this = this;\n this.updateProgressBarClasses(liElement, UPLOAD_FAILED);\n this.removeProgressbar(liElement, 'failure');\n if (!isNullOrUndefined(liElement.querySelector('.e-file-status'))) {\n liElement.querySelector('.e-file-status').classList.add(UPLOAD_FAILED);\n }\n var deleteIcon = liElement.querySelector('.' + ABORT_ICON);\n if (isNullOrUndefined(deleteIcon)) {\n return;\n }\n deleteIcon.classList.remove(ABORT_ICON, UPLOAD_INPROGRESS);\n deleteIcon.classList.add(REMOVE_ICON);\n deleteIcon.setAttribute('title', this.localizedTexts('remove'));\n this.pauseButton = this.createElement('span', { className: 'e-icons e-file-reload-btn', attrs: { 'tabindex': '-1' } });\n liElement.insertBefore(this.pauseButton, deleteIcon);\n this.pauseButton.setAttribute('title', this.localizedTexts('retry'));\n var retryElement = liElement.querySelector('.' + RETRY_ICON);\n /* istanbul ignore next */\n retryElement.addEventListener('click', function (e) { _this.reloadcanceledFile(e, file, liElement, false); }, false);\n };\n Uploader.prototype.reloadcanceledFile = function (e, file, liElement, custom) {\n file.statusCode = '1';\n file.status = this.localizedTexts('readyToUploadMessage');\n if (!custom) {\n liElement.querySelector('.' + STATUS).classList.remove(UPLOAD_FAILED);\n if (!isNullOrUndefined(liElement.querySelector('.' + RETRY_ICON))) {\n detach(liElement.querySelector('.' + RETRY_ICON));\n }\n this.pauseButton = null;\n }\n if (this.sequentialUpload) {\n /* istanbul ignore next */\n liElement.classList.add(RESTRICT_SEQUENTIAL);\n }\n this.upload([file]);\n };\n /* istanbul ignore next */\n Uploader.prototype.uploadComplete = function (e, file, customUI) {\n var status = e.target;\n if (status.readyState === 4 && status.status >= 200 && status.status <= 299) {\n var li = this.getLiElement(file);\n if (isNullOrUndefined(li) && (!customUI || isNullOrUndefined(customUI))) {\n return;\n }\n if (!isNullOrUndefined(li)) {\n this.updateProgressBarClasses(li, UPLOAD_SUCCESS);\n this.removeProgressbar(li, 'success');\n var iconEle = li.querySelector('.' + ABORT_ICON);\n if (!isNullOrUndefined(iconEle)) {\n iconEle.classList.add(DELETE_ICON);\n iconEle.setAttribute('title', this.localizedTexts('delete'));\n iconEle.classList.remove(ABORT_ICON);\n iconEle.classList.remove(UPLOAD_INPROGRESS);\n }\n }\n this.raiseSuccessEvent(e, file);\n }\n else {\n this.uploadFailed(e, file);\n }\n };\n Uploader.prototype.getResponse = function (e) {\n // tslint:disable-next-line\n var target = e.currentTarget;\n var response = {\n readyState: target.readyState,\n statusCode: target.status,\n statusText: target.statusText,\n headers: target.getAllResponseHeaders(),\n withCredentials: target.withCredentials\n };\n return response;\n };\n Uploader.prototype.raiseSuccessEvent = function (e, file) {\n var response = e && e.currentTarget ? this.getResponse(e) : null;\n var args = {\n e: e, response: response, operation: 'upload', file: this.updateStatus(file, this.localizedTexts('uploadSuccessMessage'), '2')\n };\n this.trigger('success', args);\n this.uploadedFilesData.push(file);\n this.trigger('change', { file: this.uploadedFilesData });\n this.checkActionButtonStatus();\n if (this.sequentialUpload && this.fileList.length > 0) {\n if ((!(this.getLiElement(file)).classList.contains(RESTRICT_SEQUENTIAL))) {\n this.uploadSequential();\n }\n else {\n /* istanbul ignore next */\n (this.getLiElement(file)).classList.remove(RESTRICT_SEQUENTIAL);\n }\n }\n };\n Uploader.prototype.uploadFailed = function (e, file) {\n var li = this.getLiElement(file);\n var response = e && e.currentTarget ? this.getResponse(e) : null;\n var args = {\n e: e, response: response, operation: 'upload', file: this.updateStatus(file, this.localizedTexts('uploadFailedMessage'), '0')\n };\n if (!isNullOrUndefined(li)) {\n this.renderFailureState(e, file, li);\n }\n this.trigger('failure', args);\n this.checkActionButtonStatus();\n this.uploadSequential();\n };\n Uploader.prototype.uploadSequential = function () {\n if (this.sequentialUpload) {\n if (this.autoUpload) {\n /* istanbul ignore next */\n this.checkAutoUpload(this.filesData);\n }\n else {\n this.uploadButtonClick();\n }\n }\n };\n Uploader.prototype.updateProgressBarClasses = function (li, className) {\n var progressBar = li.querySelector('.' + PROGRESSBAR);\n if (!isNullOrUndefined(progressBar)) {\n progressBar.classList.add(className);\n }\n };\n Uploader.prototype.removeProgressbar = function (li, callType) {\n var _this = this;\n if (!isNullOrUndefined(li.querySelector('.' + PROGRESS_WRAPPER))) {\n this.progressAnimation = new Animation({ duration: 1250 });\n this.progressAnimation.animate(li.querySelector('.' + PROGRESS_WRAPPER), { name: 'FadeOut' });\n this.progressAnimation.animate(li.querySelector('.' + PROGRESSBAR_TEXT), { name: 'FadeOut' });\n setTimeout(function () { _this.animateProgressBar(li, callType); }, 750);\n }\n };\n /* istanbul ignore next */\n Uploader.prototype.animateProgressBar = function (li, callType) {\n if (callType === 'success') {\n li.classList.add(UPLOAD_SUCCESS);\n if (!isNullOrUndefined(li.querySelector('.' + STATUS))) {\n li.querySelector('.' + STATUS).classList.remove(UPLOAD_INPROGRESS);\n this.progressAnimation.animate(li.querySelector('.' + STATUS), { name: 'FadeIn' });\n li.querySelector('.' + STATUS).classList.add(UPLOAD_SUCCESS);\n }\n }\n else {\n if (!isNullOrUndefined(li.querySelector('.' + STATUS))) {\n li.querySelector('.' + STATUS).classList.remove(UPLOAD_INPROGRESS);\n this.progressAnimation.animate(li.querySelector('.' + STATUS), { name: 'FadeIn' });\n li.querySelector('.' + STATUS).classList.add(UPLOAD_FAILED);\n }\n }\n if (li.querySelector('.' + PROGRESS_WRAPPER)) {\n detach(li.querySelector('.' + PROGRESS_WRAPPER));\n }\n };\n Uploader.prototype.setExtensions = function (extensions) {\n this.element.setAttribute('accept', extensions);\n };\n Uploader.prototype.templateComplier = function (uploadTemplate) {\n if (uploadTemplate) {\n var exception = void 0;\n try {\n if (document.querySelectorAll(uploadTemplate).length) {\n return compile(document.querySelector(uploadTemplate).innerHTML.trim());\n }\n }\n catch (exception) {\n return compile(uploadTemplate);\n }\n }\n return undefined;\n };\n Uploader.prototype.setRTL = function () {\n this.enableRtl ? addClass([this.uploadWrapper], RTL) : removeClass([this.uploadWrapper], RTL);\n };\n Uploader.prototype.localizedTexts = function (localeText) {\n this.l10n.setLocale(this.locale);\n return this.l10n.getConstant(localeText);\n };\n Uploader.prototype.setControlStatus = function () {\n if (!this.enabled) {\n this.uploadWrapper.classList.add(DISABLED);\n this.element.setAttribute('disabled', 'disabled');\n this.browseButton.setAttribute('disabled', 'disabled');\n if (!isNullOrUndefined(this.clearButton)) {\n this.clearButton.setAttribute('disabled', 'disabled');\n }\n if (!isNullOrUndefined(this.uploadButton)) {\n this.uploadButton.setAttribute('disabled', 'disabled');\n }\n }\n else {\n if (this.uploadWrapper.classList.contains(DISABLED)) {\n this.uploadWrapper.classList.remove(DISABLED);\n }\n if (!isNullOrUndefined(this.browseButton) && this.element.hasAttribute('disabled')) {\n this.element.removeAttribute('disabled');\n this.browseButton.removeAttribute('disabled');\n }\n if (!isNullOrUndefined(this.clearButton) && this.clearButton.hasAttribute('disabled')) {\n this.clearButton.removeAttribute('disabled');\n }\n if (!isNullOrUndefined(this.uploadButton) && this.uploadButton.hasAttribute('disabled')) {\n this.uploadButton.hasAttribute('disabled');\n }\n }\n };\n Uploader.prototype.checkHTMLAttributes = function () {\n if (this.element.hasAttribute('accept')) {\n this.allowedExtensions = this.element.getAttribute('accept');\n this.initialAttr.accept = this.allowedExtensions;\n }\n if (this.element.hasAttribute('multiple')) {\n this.multiple = true;\n this.initialAttr.multiple = true;\n }\n if (this.element.hasAttribute('disabled')) {\n this.enabled = false;\n this.initialAttr.disabled = true;\n }\n };\n Uploader.prototype.chunkUpload = function (file, custom) {\n var start = 0;\n var end = Math.min(this.asyncSettings.chunkSize, file.size);\n var index = 0;\n var blob = file.rawFile.slice(start, end);\n var metaData = { chunkIndex: index, blob: blob, file: file, start: start, end: end, retryCount: 0, request: null };\n this.sendRequest(file, metaData, custom);\n };\n Uploader.prototype.sendRequest = function (file, metaData, custom) {\n var _this = this;\n var formData = new FormData();\n var blob = file.rawFile.slice(metaData.start, metaData.end);\n formData.append('chunkFile', blob, file.name);\n formData.append('chunk-index', metaData.chunkIndex.toString());\n formData.append('chunkIndex', metaData.chunkIndex.toString());\n var totalChunk = Math.max(Math.ceil(file.size / this.asyncSettings.chunkSize), 1);\n formData.append('total-chunk', totalChunk.toString());\n formData.append('totalChunk', totalChunk.toString());\n var ajax = new Ajax({ url: this.asyncSettings.saveUrl, type: 'POST', async: true, contentType: null });\n ajax.onLoad = function (e) { _this.chunkUploadComplete(e, metaData, custom); return {}; };\n ajax.onUploadProgress = function (e) {\n _this.chunkUploadInProgress(e, metaData, custom);\n return {};\n };\n var eventArgs = {\n fileData: file,\n customFormData: [],\n cancel: false,\n chunkSize: this.asyncSettings.chunkSize === 0 ? null : this.asyncSettings.chunkSize\n };\n ajax.beforeSend = function (e) {\n eventArgs.currentRequest = ajax.httpRequest;\n eventArgs.currentChunkIndex = metaData.chunkIndex;\n if (eventArgs.currentChunkIndex === 0) {\n // This event is currently not required but to avoid breaking changes for previous customer, we have included.\n _this.trigger('uploading', eventArgs);\n }\n _this.trigger('chunkUploading', eventArgs);\n if (eventArgs.cancel) {\n _this.eventCancelByArgs(e, eventArgs, file);\n }\n else {\n _this.updateFormData(formData, eventArgs.customFormData);\n }\n };\n /* istanbul ignore next */\n ajax.onError = function (e) { _this.chunkUploadFailed(e, metaData, custom); return {}; };\n ajax.send(formData);\n metaData.request = ajax;\n };\n Uploader.prototype.eventCancelByArgs = function (e, eventArgs, file) {\n var _this = this;\n e.cancel = true;\n if (eventArgs.fileData.statusCode === '5') {\n return;\n }\n var liElement = this.getLiElement(eventArgs.fileData);\n liElement.querySelector('.' + STATUS).innerHTML = this.localizedTexts('fileUploadCancel');\n liElement.querySelector('.' + STATUS).classList.add(UPLOAD_FAILED);\n eventArgs.fileData.statusCode = '5';\n eventArgs.fileData.status = this.localizedTexts('fileUploadCancel');\n this.pauseButton = this.createElement('span', { className: 'e-icons e-file-reload-btn', attrs: { 'tabindex': '-1' } });\n liElement.insertBefore(this.pauseButton, liElement.querySelector('.' + REMOVE_ICON));\n this.pauseButton.setAttribute('title', this.localizedTexts('retry'));\n /* istanbul ignore next */\n this.pauseButton.addEventListener('click', function (e) { _this.reloadcanceledFile(e, file, liElement); }, false);\n this.checkActionButtonStatus();\n };\n Uploader.prototype.checkChunkUpload = function () {\n return (this.asyncSettings.chunkSize <= 0 || isNullOrUndefined(this.asyncSettings.chunkSize)) ? false : true;\n };\n Uploader.prototype.chunkUploadComplete = function (e, metaData, custom) {\n var _this = this;\n var response = e.target;\n var liElement;\n if (response.readyState === 4 && response.status >= 200 && response.status < 300) {\n var requestResponse = e && e.currentTarget ? this.getResponse(e) : null;\n var totalChunk = Math.max(Math.ceil(metaData.file.size / this.asyncSettings.chunkSize), 1);\n var eventArgs = {\n event: e,\n file: metaData.file,\n chunkIndex: metaData.chunkIndex,\n totalChunk: totalChunk,\n chunkSize: this.asyncSettings.chunkSize,\n response: requestResponse\n };\n this.trigger('chunkSuccess', eventArgs);\n if (isNullOrUndefined(custom) || !custom) {\n liElement = this.getLiElement(metaData.file);\n }\n this.updateMetaData(metaData);\n if (metaData.end === metaData.file.size) {\n metaData.file.statusCode = '3';\n }\n if (metaData.file.statusCode === '5') {\n var eventArgs_1 = { event: e, fileData: metaData.file, cancel: false };\n this.trigger('canceling', eventArgs_1);\n if (eventArgs_1.cancel) {\n metaData.file.statusCode = '3';\n var spinnerTarget = liElement.querySelector('.' + ABORT_ICON);\n if (!isNullOrUndefined(liElement) && !isNullOrUndefined(spinnerTarget)) {\n hideSpinner(spinnerTarget);\n detach(liElement.querySelector('.e-spinner-pane'));\n }\n this.sendNextRequest(metaData);\n return;\n }\n metaData.request.emitError = false;\n response.abort();\n var formData = new FormData();\n var name_2 = this.element.getAttribute('name');\n formData.append(name_2, metaData.file.name);\n formData.append('cancel-uploading', metaData.file.name);\n formData.append('cancelUploading', metaData.file.name);\n var ajax = new Ajax(this.asyncSettings.removeUrl, 'POST', true, null);\n ajax.onLoad = function (e) { _this.removeChunkFile(e, metaData, custom); return {}; };\n ajax.send(formData);\n }\n else {\n if ((totalChunk - 1) === metaData.chunkIndex && totalChunk > metaData.chunkIndex) {\n var index = this.pausedData.indexOf(metaData);\n if (index >= 0) {\n this.pausedData.splice(index, 1);\n }\n if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) || !custom) && liElement) {\n if (liElement) {\n detach(liElement.querySelector('.' + PAUSE_UPLOAD));\n }\n this.removeChunkProgressBar(metaData);\n }\n this.raiseSuccessEvent(e, metaData.file);\n return;\n }\n this.sendNextRequest(metaData);\n }\n }\n else {\n this.chunkUploadFailed(e, metaData);\n }\n };\n Uploader.prototype.sendNextRequest = function (metaData) {\n metaData.start = metaData.end;\n metaData.end += this.asyncSettings.chunkSize;\n metaData.end = Math.min(metaData.end, metaData.file.size);\n metaData.chunkIndex += 1;\n this.sendRequest(metaData.file, metaData);\n };\n Uploader.prototype.removeChunkFile = function (e, metaData, custom) {\n if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) && !custom)) {\n var liElement = this.getLiElement(metaData.file);\n var deleteIcon = liElement.querySelector('.' + ABORT_ICON);\n var spinnerTarget = deleteIcon;\n this.updateStatus(metaData.file, this.localizedTexts('fileUploadCancel'), '5');\n this.updateProgressBarClasses(liElement, UPLOAD_FAILED);\n this.removeProgressbar(liElement, 'failure');\n deleteIcon.classList.remove(ABORT_ICON);\n deleteIcon.classList.add(REMOVE_ICON);\n deleteIcon.setAttribute('title', this.localizedTexts('remove'));\n var pauseIcon = liElement.querySelector('.' + PAUSE_UPLOAD);\n pauseIcon.classList.add(RETRY_ICON);\n pauseIcon.classList.remove(PAUSE_UPLOAD);\n pauseIcon.setAttribute('title', this.localizedTexts('retry'));\n if (!isNullOrUndefined(liElement) && !isNullOrUndefined(deleteIcon)) {\n hideSpinner(spinnerTarget);\n detach(liElement.querySelector('.e-spinner-pane'));\n }\n }\n };\n Uploader.prototype.pauseUpload = function (metaData, e, custom) {\n metaData.file.statusCode = '4';\n metaData.file.status = this.localizedTexts('pause');\n this.updateMetaData(metaData);\n var eventArgs = {\n event: e ? e : null,\n file: metaData.file,\n chunkIndex: metaData.chunkIndex,\n chunkCount: Math.round(metaData.file.size / this.asyncSettings.chunkSize),\n chunkSize: this.asyncSettings.chunkSize\n };\n this.abortUpload(metaData, custom, eventArgs);\n };\n Uploader.prototype.abortUpload = function (metaData, custom, eventArgs) {\n metaData.request.emitError = false;\n metaData.request.httpRequest.abort();\n var liElement = this.getLiElement(metaData.file);\n if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) || !custom)) {\n var targetElement = liElement.querySelector('.' + PAUSE_UPLOAD);\n targetElement.classList.remove(PAUSE_UPLOAD);\n targetElement.classList.add(RESUME_UPLOAD);\n targetElement.setAttribute('title', this.localizedTexts('resume'));\n targetElement.nextElementSibling.classList.add(REMOVE_ICON);\n targetElement.nextElementSibling.classList.remove(ABORT_ICON);\n targetElement.nextElementSibling.setAttribute('title', this.localizedTexts('remove'));\n }\n for (var i = 0; i < this.pausedData.length; i++) {\n if (this.pausedData[i].file.name === metaData.file.name) {\n this.pausedData.splice(i, 1);\n }\n }\n this.pausedData.push(metaData);\n this.trigger('pausing', eventArgs);\n };\n Uploader.prototype.resumeUpload = function (metaData, e, custom) {\n var liElement = this.getLiElement(metaData.file);\n var targetElement;\n if (!isNullOrUndefined(liElement)) {\n targetElement = liElement.querySelector('.' + RESUME_UPLOAD);\n }\n if (!isNullOrUndefined(targetElement) && (isNullOrUndefined(custom) || !custom)) {\n targetElement.classList.remove(RESUME_UPLOAD);\n targetElement.classList.add(PAUSE_UPLOAD);\n targetElement.setAttribute('title', this.localizedTexts('pause'));\n targetElement.nextElementSibling.classList.remove(REMOVE_ICON);\n targetElement.nextElementSibling.classList.add(ABORT_ICON);\n targetElement.nextElementSibling.setAttribute('title', this.localizedTexts('abort'));\n }\n metaData.file.status = this.localizedTexts('inProgress');\n metaData.file.statusCode = '3';\n this.updateMetaData(metaData);\n var eventArgs = {\n event: e ? e : null,\n file: metaData.file,\n chunkIndex: metaData.chunkIndex,\n chunkCount: Math.round(metaData.file.size / this.asyncSettings.chunkSize),\n chunkSize: this.asyncSettings.chunkSize\n };\n this.trigger('resuming', eventArgs);\n for (var i = 0; i < this.pausedData.length; i++) {\n if (this.pausedData[i].end === this.pausedData[i].file.size) {\n this.chunkUploadComplete(e, metaData, custom);\n }\n else {\n if (this.pausedData[i].file.name === metaData.file.name) {\n this.pausedData[i].start = this.pausedData[i].end;\n this.pausedData[i].end = this.pausedData[i].end + this.asyncSettings.chunkSize;\n this.pausedData[i].end = Math.min(this.pausedData[i].end, this.pausedData[i].file.size);\n this.pausedData[i].chunkIndex = this.pausedData[i].chunkIndex + 1;\n this.sendRequest(this.pausedData[i].file, this.pausedData[i], custom);\n }\n }\n }\n };\n Uploader.prototype.updateMetaData = function (metaData) {\n if (this.uploadMetaData.indexOf(metaData) === -1) {\n this.uploadMetaData.push(metaData);\n }\n else {\n this.uploadMetaData.splice(this.uploadMetaData.indexOf(metaData), 1);\n this.uploadMetaData.push(metaData);\n }\n };\n Uploader.prototype.removeChunkProgressBar = function (metaData) {\n var liElement = this.getLiElement(metaData.file);\n if (!isNullOrUndefined(liElement)) {\n this.updateProgressBarClasses(liElement, UPLOAD_SUCCESS);\n this.removeProgressbar(liElement, 'success');\n var cancelButton = liElement.querySelector('.' + ABORT_ICON);\n if (!isNullOrUndefined(cancelButton)) {\n cancelButton.classList.add(DELETE_ICON);\n cancelButton.setAttribute('title', this.localizedTexts('delete'));\n cancelButton.classList.remove(ABORT_ICON, UPLOAD_INPROGRESS);\n }\n }\n };\n Uploader.prototype.chunkUploadFailed = function (e, metaData, custom) {\n var _this = this;\n var chunkCount = Math.max(Math.ceil(metaData.file.size / this.asyncSettings.chunkSize), 1);\n var liElement;\n if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) || !custom)) {\n liElement = this.getLiElement(metaData.file);\n }\n var requestResponse = e && e.currentTarget ? this.getResponse(e) : null;\n var eventArgs = {\n event: e,\n file: metaData.file,\n chunkIndex: metaData.chunkIndex,\n totalChunk: chunkCount,\n chunkSize: this.asyncSettings.chunkSize,\n cancel: false,\n response: requestResponse\n };\n this.trigger('chunkFailure', eventArgs);\n // To prevent triggering of failure event\n // tslint:disable-next-line\n if (!eventArgs.cancel) {\n if (metaData.retryCount < this.asyncSettings.retryCount) {\n setTimeout(function () { _this.retryRequest(liElement, metaData, custom); }, this.asyncSettings.retryAfterDelay);\n }\n else {\n if (!isNullOrUndefined(liElement)) {\n var pauseButton = liElement.querySelector('.' + PAUSE_UPLOAD) ?\n liElement.querySelector('.' + PAUSE_UPLOAD) : liElement.querySelector('.' + RESUME_UPLOAD);\n if (!isNullOrUndefined(pauseButton)) {\n pauseButton.classList.add(RETRY_ICON);\n pauseButton.classList.remove(PAUSE_UPLOAD, RESUME_UPLOAD);\n }\n this.updateProgressBarClasses(liElement, UPLOAD_FAILED);\n this.removeProgressbar(liElement, 'failure');\n liElement.querySelector('.e-icons').classList.remove(UPLOAD_INPROGRESS);\n var iconElement = liElement.querySelector('.' + ABORT_ICON);\n iconElement.classList.remove(ABORT_ICON);\n if (!isNullOrUndefined(liElement.querySelector('.' + PAUSE_UPLOAD))) {\n detach(liElement.querySelector('.' + PAUSE_UPLOAD));\n }\n if (metaData.start > 0) {\n iconElement.classList.add(DELETE_ICON);\n iconElement.setAttribute('title', this.localizedTexts('delete'));\n }\n else {\n iconElement.classList.add(REMOVE_ICON);\n iconElement.setAttribute('title', this.localizedTexts('remove'));\n }\n }\n metaData.retryCount = 0;\n var file = metaData.file;\n var args = {\n e: e, response: requestResponse,\n operation: 'upload',\n file: this.updateStatus(file, this.localizedTexts('uploadFailedMessage'), '0')\n };\n this.trigger('failure', args);\n this.uploadSequential();\n }\n }\n };\n Uploader.prototype.retryRequest = function (liElement, metaData, custom) {\n if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) || !custom) && liElement) {\n this.updateProgressBarClasses(liElement, UPLOAD_FAILED);\n }\n metaData.retryCount += 1;\n this.sendRequest(metaData.file, metaData);\n };\n Uploader.prototype.checkPausePlayAction = function (e) {\n var targetElement = e.target;\n var selectedElement = e.target.parentElement;\n var index = this.fileList.indexOf(selectedElement);\n var fileData = this.filesData[index];\n var metaData = this.getCurrentMetaData(fileData);\n if (targetElement.classList.contains(PAUSE_UPLOAD)) {\n this.pauseUpload(metaData, e);\n }\n else if (targetElement.classList.contains(RESUME_UPLOAD)) {\n this.resumeUpload(metaData, e);\n }\n else if (targetElement.classList.contains(RETRY_ICON)) {\n if (metaData.file.status === this.localizedTexts('fileUploadCancel')) {\n this.retryUpload(metaData, false);\n }\n else {\n this.retryUpload(metaData, true);\n }\n }\n };\n Uploader.prototype.retryUpload = function (metaData, fromcanceledStage) {\n if (fromcanceledStage) {\n metaData.end = metaData.end + this.asyncSettings.chunkSize;\n metaData.start = metaData.start + this.asyncSettings.chunkSize;\n this.sendRequest(metaData.file, metaData);\n }\n else {\n metaData.file.statusCode = '1';\n metaData.file.status = this.localizedTexts('readyToUploadMessage');\n this.chunkUpload(metaData.file);\n }\n if (this.sequentialUpload) {\n /* istanbul ignore next */\n (this.getLiElement(metaData.file)).classList.add(RESTRICT_SEQUENTIAL);\n }\n };\n Uploader.prototype.chunkUploadInProgress = function (e, metaData, custom) {\n var _this = this;\n if (metaData.file.statusCode === '4') {\n return;\n }\n if (metaData.file.statusCode !== '4' && metaData.file.statusCode !== '5') {\n metaData.file.statusCode = '3';\n metaData.file.status = this.localizedTexts('inProgress');\n }\n this.updateMetaData(metaData);\n var liElement = this.getLiElement(metaData.file);\n if (isNullOrUndefined(liElement)) {\n return;\n }\n var target;\n var retryElement = liElement.querySelector('.' + RETRY_ICON);\n if (!isNullOrUndefined(retryElement)) {\n retryElement.classList.add(PAUSE_UPLOAD);\n retryElement.setAttribute('title', this.localizedTexts('pause'));\n retryElement.classList.remove(RETRY_ICON);\n }\n if (!isNullOrUndefined(liElement)) {\n if (!(liElement.querySelectorAll('.' + PROGRESS_WRAPPER).length > 0)) {\n var statusElement = liElement.querySelector('.' + STATUS);\n if (isNullOrUndefined(this.template)) {\n statusElement.classList.add(UPLOAD_INPROGRESS);\n statusElement.classList.remove(UPLOAD_FAILED);\n this.createProgressBar(liElement);\n this.updateProgressBarClasses(liElement, UPLOAD_INPROGRESS);\n }\n var clearIcon = liElement.querySelector('.' + REMOVE_ICON) ? liElement.querySelector('.' + REMOVE_ICON) :\n liElement.querySelector('.' + DELETE_ICON);\n if (!isNullOrUndefined(clearIcon)) {\n clearIcon.classList.add(ABORT_ICON);\n clearIcon.setAttribute('title', this.localizedTexts('abort'));\n clearIcon.classList.remove(REMOVE_ICON);\n }\n }\n if (!isNaN(Math.round((e.loaded / e.total) * 100)) && isNullOrUndefined(this.template) && metaData.file.statusCode !== '4') {\n var loadedSize = (metaData.chunkIndex * this.asyncSettings.chunkSize);\n var value = Math.min((((loadedSize + e.loaded) / metaData.file.size) * 100), 100);\n this.changeProgressValue(liElement, Math.round(value).toString() + '%');\n }\n if (metaData.chunkIndex === 0) {\n this.checkActionButtonStatus();\n }\n }\n if (isNullOrUndefined(liElement.querySelector('.' + PAUSE_UPLOAD)) && isNullOrUndefined(this.template)) {\n this.pauseButton = this.createElement('span', { className: 'e-icons e-file-pause-btn', attrs: { 'tabindex': '-1' } });\n if (Browser.info.name === 'msie') {\n this.pauseButton.classList.add('e-msie');\n }\n liElement.insertBefore(this.pauseButton, liElement.querySelector('.' + ABORT_ICON));\n this.pauseButton.setAttribute('title', this.localizedTexts('pause'));\n this.pauseButton.addEventListener('click', function (e) { _this.checkPausePlayAction(e); }, false);\n }\n };\n /**\n * It is used to convert bytes value into kilobytes or megabytes depending on the size based\n * on [binary prefix](https://en.wikipedia.org/wiki/Binary_prefix).\n * @param { number } bytes - specifies the file size in bytes.\n * @returns string\n */\n Uploader.prototype.bytesToSize = function (bytes) {\n var i = -1;\n var size;\n if (!bytes) {\n return '0.0 KB';\n }\n do {\n bytes = bytes / 1024;\n i++;\n } while (bytes > 99);\n if (i >= 2) {\n bytes = bytes * 1024;\n i = 1;\n }\n return Math.max(bytes, 0).toFixed(1) + ' ' + ['KB', 'MB'][i];\n };\n /**\n * Allows you to sort the file data alphabetically based on its file name clearly.\n * @param { FileList } filesData - specifies the files data for upload.\n * @returns File[]\n */\n Uploader.prototype.sortFileList = function (filesData) {\n var files = filesData;\n var fileNames = [];\n for (var i = 0; i < files.length; i++) {\n fileNames.push(files[i].name);\n }\n var sortedFileNames = fileNames.sort();\n var sortedFilesData = [];\n var index = 0;\n for (var _i = 0, sortedFileNames_1 = sortedFileNames; _i < sortedFileNames_1.length; _i++) {\n var name_3 = sortedFileNames_1[_i];\n for (var i = 0; i < files.length; i++) {\n if (name_3 === files[i].name) {\n sortedFilesData.push(files[i]);\n }\n }\n }\n return sortedFilesData;\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.\n * @method destroy\n * @return {void}.\n */\n Uploader.prototype.destroy = function () {\n this.element.value = null;\n this.clearAll();\n this.unWireEvents();\n this.unBindDropEvents();\n if (this.multiple) {\n this.element.removeAttribute('multiple');\n }\n if (!this.enabled) {\n this.element.removeAttribute('disabled');\n }\n this.element.removeAttribute('accept');\n this.setInitialAttributes();\n this.uploadWrapper.parentElement.appendChild(this.cloneElement);\n this.cloneElement.classList.remove('e-control', ROOT);\n detach(this.uploadWrapper);\n this.uploadWrapper = null;\n _super.prototype.destroy.call(this);\n };\n /**\n * Allows you to call the upload process manually by calling save URL action.\n * To process the selected files (added in upload queue), pass an empty argument otherwise\n * upload the specific file based on its argument.\n * @param { FileInfo | FileInfo[] } files - specifies the files data for upload.\n * @returns void\n */\n Uploader.prototype.upload = function (files, custom) {\n var uploadFiles = this.validateFileType(files);\n this.uploadFiles(uploadFiles, custom);\n };\n Uploader.prototype.validateFileType = function (files) {\n var uploadFiles = [];\n if (files instanceof Array) {\n uploadFiles = files;\n }\n else {\n uploadFiles.push(files);\n }\n return uploadFiles;\n };\n Uploader.prototype.uploadFiles = function (files, custom) {\n var _this = this;\n var selectedFiles = [];\n if (this.asyncSettings.saveUrl === '' || isNullOrUndefined(this.asyncSettings.saveUrl)) {\n return;\n }\n if (!custom || isNullOrUndefined(custom)) {\n if (!this.multiple) {\n var file = [];\n file.push(files[0]);\n selectedFiles = this.filterfileList(file);\n }\n else {\n selectedFiles = this.filterfileList(files);\n }\n }\n else {\n selectedFiles = files;\n }\n var chunkEnabled = this.checkChunkUpload();\n var _loop_4 = function (i) {\n var ajax = new Ajax(this_3.asyncSettings.saveUrl, 'POST', true, null);\n var eventArgs = {\n fileData: selectedFiles[i],\n customFormData: [],\n cancel: false\n };\n var formData = new FormData();\n ajax.beforeSend = function (e) {\n eventArgs.currentRequest = ajax.httpRequest;\n _this.trigger('uploading', eventArgs);\n if (eventArgs.cancel) {\n _this.eventCancelByArgs(e, eventArgs, selectedFiles[i]);\n }\n _this.updateFormData(formData, eventArgs.customFormData);\n };\n if (selectedFiles[i].statusCode === '1') {\n var name_4 = this_3.element.getAttribute('name');\n formData.append(name_4, selectedFiles[i].rawFile, selectedFiles[i].name);\n if (chunkEnabled && selectedFiles[i].size > this_3.asyncSettings.chunkSize) {\n this_3.chunkUpload(selectedFiles[i], custom);\n }\n else {\n ajax.onLoad = function (e) { _this.uploadComplete(e, selectedFiles[i], custom); return {}; };\n ajax.onUploadProgress = function (e) {\n _this.uploadInProgress(e, selectedFiles[i], custom, ajax);\n return {};\n };\n /* istanbul ignore next */\n ajax.onError = function (e) { _this.uploadFailed(e, selectedFiles[i]); return {}; };\n ajax.send(formData);\n }\n }\n };\n var this_3 = this;\n for (var i = 0; i < selectedFiles.length; i++) {\n _loop_4(i);\n }\n };\n /**\n * Remove the uploaded file from server manually by calling the remove URL action.\n * If you pass an empty argument to this method, the complete file list can be cleared,\n * otherwise remove the specific file based on its argument (“file_data”).\n * @param { FileInfo | FileInfo[] } fileData - specifies the files data to remove from file list/server.\n * @param { boolean } customTemplate - Set true if the component rendering with customize template.\n * @param { boolean } removeDirectly - Set true if files remove without removing event.\n * @returns void\n */\n Uploader.prototype.remove = function (fileData, customTemplate, removeDirectly, args) {\n var eventArgs = {\n event: args,\n cancel: false,\n filesData: [],\n customFormData: [],\n postRawFile: true\n };\n if (this.isForm) {\n eventArgs.filesData = this.getFilesData();\n this.trigger('removing', eventArgs);\n if (!eventArgs.cancel) {\n this.clearAll();\n }\n return;\n }\n var removeFiles = [];\n fileData = !isNullOrUndefined(fileData) ? fileData : this.filesData;\n if (fileData instanceof Array) {\n removeFiles = fileData;\n }\n else {\n removeFiles.push(fileData);\n }\n eventArgs.filesData = removeFiles;\n var removeUrl = this.asyncSettings.removeUrl;\n var validUrl = (removeUrl === '' || isNullOrUndefined(removeUrl)) ? false : true;\n for (var _i = 0, removeFiles_1 = removeFiles; _i < removeFiles_1.length; _i++) {\n var files = removeFiles_1[_i];\n if ((files.statusCode === '2' || files.statusCode === '4') && validUrl) {\n this.removeUploadedFile(files, eventArgs, removeDirectly, customTemplate);\n }\n else {\n if (!removeDirectly) {\n this.trigger('removing', eventArgs);\n }\n if (eventArgs.cancel) {\n return;\n }\n this.removeFilesData(files, customTemplate);\n }\n }\n };\n /**\n * Clear all the file entries from list that can be uploaded files or added in upload queue.\n * @returns void\n */\n Uploader.prototype.clearAll = function () {\n if (isNullOrUndefined(this.listParent)) {\n if (Browser.info.name !== 'msie') {\n this.element.value = '';\n }\n this.filesData = [];\n return;\n }\n var eventArgs = {\n cancel: false,\n filesData: this.filesData\n };\n this.trigger('clearing', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n this.clearData();\n };\n /**\n * Get the data of files which are shown in file list.\n * @returns FileInfo[]\n */\n Uploader.prototype.getFilesData = function () {\n return this.filesData;\n };\n /**\n * Pauses the in-progress chunked upload based on the file data.\n * @param { FileInfo | FileInfo[] } fileData - specifies the files data to pause from uploading.\n * @param { boolean } custom - Set true if used custom UI.\n * @returns void\n */\n Uploader.prototype.pause = function (fileData, custom) {\n var fileDataFiles = this.validateFileType(fileData);\n this.pauseUploading(fileDataFiles, custom);\n };\n Uploader.prototype.pauseUploading = function (fileData, custom) {\n var files = this.getFiles(fileData);\n for (var i = 0; i < files.length; i++) {\n if (files[i].statusCode === '3') {\n this.pauseUpload(this.getCurrentMetaData(files[i], null), null, custom);\n }\n }\n };\n Uploader.prototype.getFiles = function (fileData) {\n var files = [];\n if (!isNullOrUndefined(fileData) && !(fileData instanceof Array)) {\n files.push(fileData);\n }\n else {\n files = fileData;\n }\n return files;\n };\n /**\n * Resumes the chunked upload that is previously paused based on the file data.\n * @param { FileInfo | FileInfo[] } fileData - specifies the files data to resume the paused file.\n * @param { boolean } custom - Set true if used custom UI.\n * @returns void\n */\n Uploader.prototype.resume = function (fileData, custom) {\n var fileDataFiles = this.validateFileType(fileData);\n this.resumeFiles(fileDataFiles, custom);\n };\n Uploader.prototype.resumeFiles = function (fileData, custom) {\n var files = this.getFiles(fileData);\n for (var i = 0; i < files.length; i++) {\n if (files[i].statusCode === '4') {\n this.resumeUpload(this.getCurrentMetaData(files[i], null), null, custom);\n }\n }\n };\n /**\n * Retries the canceled or failed file upload based on the file data.\n * @param { FileInfo | FileInfo[] } fileData - specifies the files data to retry the canceled or failed file.\n * @param { boolean } fromcanceledStage - Set true to retry from canceled stage and set false to retry from initial stage.\n * @returns void\n */\n Uploader.prototype.retry = function (fileData, fromcanceledStage, custom) {\n var fileDataFiles = this.validateFileType(fileData);\n this.retryFailedFiles(fileDataFiles, fromcanceledStage, custom);\n };\n Uploader.prototype.retryFailedFiles = function (fileData, fromcanceledStage, custom) {\n var files = this.getFiles(fileData);\n for (var i = 0; i < files.length; i++) {\n if (files[i].statusCode === '5' || files[i].statusCode === '0') {\n if (this.asyncSettings.chunkSize > 0) {\n this.retryUpload(this.getCurrentMetaData(files[i], null), fromcanceledStage);\n }\n else {\n var liElement = void 0;\n if (!custom) {\n liElement = this.fileList[this.filesData.indexOf(files[i])];\n }\n this.reloadcanceledFile(null, files[i], liElement, custom);\n }\n }\n }\n };\n /**\n * Stops the in-progress chunked upload based on the file data.\n * When the file upload is canceled, the partially uploaded file is removed from server.\n * @param { FileInfo | FileInfo[] } fileData - specifies the files data to cancel the progressing file.\n * @returns void\n */\n Uploader.prototype.cancel = function (fileData) {\n var cancelingFiles = this.validateFileType(fileData);\n this.cancelUpload(cancelingFiles);\n };\n Uploader.prototype.cancelUpload = function (fileData) {\n var files = this.getFiles(fileData);\n if (this.asyncSettings.chunkSize > 0) {\n for (var i = 0; i < files.length; i++) {\n if (files[i].statusCode === '3') {\n var metaData = this.getCurrentMetaData(files[i], null);\n metaData.file.statusCode = '5';\n metaData.file.status = this.localizedTexts('fileUploadCancel');\n this.updateMetaData(metaData);\n this.showHideUploadSpinner(files[i]);\n }\n }\n }\n else {\n for (var i = 0; i < files.length; i++) {\n if (files[i].statusCode === '3') {\n files[i].statusCode = '5';\n files[i].status = this.localizedTexts('fileUploadCancel');\n this.showHideUploadSpinner(files[i]);\n }\n }\n }\n };\n Uploader.prototype.showHideUploadSpinner = function (files) {\n var liElement = this.getLiElement(files);\n if (!isNullOrUndefined(liElement) && isNullOrUndefined(this.template)) {\n var spinnerTarget = liElement.querySelector('.' + ABORT_ICON);\n createSpinner({ target: spinnerTarget, width: '20px' });\n showSpinner(spinnerTarget);\n }\n };\n __decorate([\n Complex({ saveUrl: '', removeUrl: '' }, AsyncSettings)\n ], Uploader.prototype, \"asyncSettings\", void 0);\n __decorate([\n Property(false)\n ], Uploader.prototype, \"sequentialUpload\", void 0);\n __decorate([\n Property(false)\n ], Uploader.prototype, \"enableRtl\", void 0);\n __decorate([\n Property(true)\n ], Uploader.prototype, \"enabled\", void 0);\n __decorate([\n Property(null)\n ], Uploader.prototype, \"template\", void 0);\n __decorate([\n Property(true)\n ], Uploader.prototype, \"multiple\", void 0);\n __decorate([\n Property(true)\n ], Uploader.prototype, \"autoUpload\", void 0);\n __decorate([\n Complex({}, ButtonsProps)\n ], Uploader.prototype, \"buttons\", void 0);\n __decorate([\n Property('')\n ], Uploader.prototype, \"allowedExtensions\", void 0);\n __decorate([\n Property(0)\n ], Uploader.prototype, \"minFileSize\", void 0);\n __decorate([\n Property(30000000)\n ], Uploader.prototype, \"maxFileSize\", void 0);\n __decorate([\n Property(null)\n ], Uploader.prototype, \"dropArea\", void 0);\n __decorate([\n Collection([{}], FilesProp)\n ], Uploader.prototype, \"files\", void 0);\n __decorate([\n Property(true)\n ], Uploader.prototype, \"showFileList\", void 0);\n __decorate([\n Property(false)\n ], Uploader.prototype, \"directoryUpload\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"selected\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"uploading\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"success\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"failure\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"removing\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"clearing\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"progress\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"chunkSuccess\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"chunkFailure\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"chunkUploading\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"canceling\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"pausing\", void 0);\n __decorate([\n Event()\n ], Uploader.prototype, \"resuming\", void 0);\n Uploader = __decorate([\n NotifyPropertyChanges\n ], Uploader);\n return Uploader;\n}(Component));\nexport { Uploader };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Collection, Event, NotifyPropertyChanges, detach, Property, EventHandler } from '@syncfusion/ej2-base';\nimport { addClass, getUniqueID, rippleEffect } from '@syncfusion/ej2-base';\nimport { attributes, Component, closest, select } from '@syncfusion/ej2-base';\nimport { classList, removeClass } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { getModel, Item } from './../common/common';\nvar classNames = {\n DISABLED: 'e-disabled',\n FOCUS: 'e-focused',\n ICON: 'e-menu-icon',\n ITEM: 'e-item',\n POPUP: 'e-dropdown-popup',\n RTL: 'e-rtl',\n SEPARATOR: 'e-separator',\n VERTICAL: 'e-vertical'\n};\n/**\n * DropDownButton component is used to toggle contextual overlays for displaying list of action items.\n * It can contain both text and images.\n * ``````html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar DropDownButton = /** @class */ (function (_super) {\n __extends(DropDownButton, _super);\n /**\n * Constructor for creating the widget\n * @param {DropDownButtonModel} options?\n * @param {string|HTMLButtonElement} element?\n */\n function DropDownButton(options, element) {\n return _super.call(this, options, element) || this;\n }\n DropDownButton.prototype.preRender = function () {\n /** */\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @returns string\n */\n DropDownButton.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * To open/close DropDownButton popup based on current state of the DropDownButton.\n * @returns void\n */\n DropDownButton.prototype.toggle = function () {\n this.canOpen() ? this.openPopUp() : this.closePopup();\n };\n /**\n * Initialize the Component rendering\n * @returns void\n * @private\n */\n DropDownButton.prototype.render = function () {\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n };\n DropDownButton.prototype.createPopup = function () {\n var _a;\n var div = this.createElement('div', {\n className: classNames.POPUP,\n id: this.element.id + '-popup'\n });\n document.body.appendChild(div);\n this.dropDown = new Popup(div, {\n relateTo: this.element,\n collision: { X: 'fit', Y: 'flip' },\n position: { X: 'left', Y: 'bottom' },\n targetType: 'relative',\n content: this.target ? this.getTargetElement() : '',\n enableRtl: this.enableRtl\n });\n if (this.dropDown.element.style.position === 'fixed') {\n this.dropDown.refreshPosition(this.element);\n }\n this.dropDown.hide();\n attributes(this.element, (_a = {},\n _a['role'] = 'menu',\n _a['aria-haspopup'] = this.items.length || this.target ? 'true' : 'false',\n _a['aria-expanded'] = 'false',\n _a['aria-owns'] = this.getPopUpElement().id,\n _a['type'] = 'button',\n _a));\n if (this.cssClass) {\n addClass([div], this.cssClass.split(' '));\n }\n };\n DropDownButton.prototype.getTargetElement = function () {\n return typeof (this.target) === 'string' ? select(this.target) : this.target;\n };\n DropDownButton.prototype.createItems = function (items) {\n var showIcon = this.hasIcon(items, 'iconCss');\n var span;\n var item;\n var li;\n var eventArgs;\n var ul = this.createElement('ul', {\n attrs: { 'tabindex': '0' }\n });\n for (var i = 0; i < items.length; i++) {\n item = items[i];\n li = this.createElement('li', {\n innerHTML: item.url ? '' : item.text,\n className: item.separator ? classNames.ITEM + ' ' + classNames.SEPARATOR : classNames.ITEM,\n attrs: { 'role': 'menuItem', 'tabindex': '-1' },\n id: item.id ? item.id : getUniqueID('e-' + this.getModuleName() + '-item')\n });\n if (item.iconCss) {\n span = this.createElement('span', { className: classNames.ICON + ' ' + item.iconCss });\n li.insertBefore(span, li.childNodes[0]);\n }\n else {\n if (showIcon && !item.separator) {\n li.classList.add('e-blank-icon');\n }\n }\n if (item.url) {\n li.appendChild(this.createAnchor(item));\n }\n eventArgs = { item: item, element: li };\n this.trigger('beforeItemRender', eventArgs);\n ul.appendChild(li);\n }\n return ul;\n };\n DropDownButton.prototype.hasIcon = function (items, field) {\n for (var i = 0, len = items.length; i < len; i++) {\n if (items[i][field]) {\n return true;\n }\n }\n return false;\n };\n DropDownButton.prototype.createAnchor = function (item) {\n return this.createElement('a', { className: 'e-menu-text e-menu-url', innerHTML: item.text, attrs: { 'href': item.url } });\n };\n DropDownButton.prototype.initialize = function () {\n this.button = new Button({\n iconCss: this.iconCss, iconPosition: this.iconPosition, cssClass: this.cssClass, content: this.content,\n disabled: this.disabled, enableRtl: this.enableRtl, enablePersistence: this.enablePersistence\n });\n this.button.createElement = this.createElement;\n this.button.appendTo(this.element);\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n this.appendArrowSpan();\n this.createPopup();\n this.setActiveElem([this.element]);\n };\n DropDownButton.prototype.appendArrowSpan = function () {\n this.element.appendChild(this.createElement('span', {\n className: 'e-btn-icon e-icons ' + 'e-icon-' + (this.cssClass.indexOf(classNames.VERTICAL) > -1\n ? 'bottom' : 'right') + ' e-caret'\n }));\n };\n DropDownButton.prototype.setActiveElem = function (elem) {\n this.activeElem = elem;\n };\n /**\n * Get component name.\n * @returns string\n * @private\n */\n DropDownButton.prototype.getModuleName = function () {\n return 'dropdown-btn';\n };\n DropDownButton.prototype.canOpen = function () {\n return this.getPopUpElement().classList.contains('e-popup-close');\n };\n /**\n * Destroys the widget.\n * @returns void\n */\n DropDownButton.prototype.destroy = function () {\n var _this = this;\n _super.prototype.destroy.call(this);\n if (this.getModuleName() === 'dropdown-btn') {\n var attrList = void 0;\n var classList_1;\n if (this.element.querySelector('span.e-caret')) {\n detach(this.element.querySelector('span.e-caret'));\n }\n if (this.cssClass) {\n classList_1 = this.cssClass.split(' ');\n }\n this.button.destroy();\n if (classList_1) {\n removeClass([this.element], classList_1);\n }\n removeClass(this.activeElem, ['e-active']);\n attrList = this.element.getAttribute('class') ? ['role', 'aria-haspopup', 'aria-expanded', 'aria-owns', 'type']\n : ['role', 'aria-haspopup', 'aria-expanded', 'aria-owns', 'type', 'class'];\n attrList.forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n this.dropDown.destroy();\n var popupEle = document.getElementById(this.getPopUpElement().id);\n if (popupEle) {\n removeClass([popupEle], ['e-popup-open', 'e-popup-close']);\n detach(popupEle);\n }\n if (!this.disabled) {\n this.unWireEvents();\n }\n }\n };\n DropDownButton.prototype.getPopUpElement = function () {\n return this.dropDown.element;\n };\n DropDownButton.prototype.getULElement = function () {\n return this.getPopUpElement().children[0];\n };\n DropDownButton.prototype.wireEvents = function () {\n var popupElement = this.getPopUpElement();\n this.delegateMousedownHandler = this.mousedownHandler.bind(this);\n EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n EventHandler.add(popupElement, 'click', this.clickHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyBoardHandler, this);\n EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);\n this.rippleFn = rippleEffect(popupElement, { selector: '.' + classNames.ITEM });\n };\n DropDownButton.prototype.keyBoardHandler = function (e) {\n if (e.target === this.element && (e.keyCode === 9 || (!e.altKey && e.keyCode === 40) || e.keyCode === 38)) {\n return;\n }\n switch (e.keyCode) {\n case 38:\n case 40:\n if (e.altKey && (e.keyCode === 38 || e.keyCode === 40)) {\n this.keyEventHandler(e);\n }\n else {\n this.upDownKeyHandler(e);\n }\n break;\n case 9:\n case 13:\n case 27:\n case 32:\n this.keyEventHandler(e);\n break;\n }\n };\n DropDownButton.prototype.upDownKeyHandler = function (e) {\n if (this.target && (e.keyCode === 38 || e.keyCode === 40)) {\n return;\n }\n e.preventDefault();\n var ul = this.getULElement();\n var defaultIdx = e.keyCode === 40 ? 0 : ul.childElementCount - 1;\n var liIdx = defaultIdx;\n var li = null;\n this.removeCustomSelection();\n for (var i = 0, len = ul.children.length; i < len; i++) {\n if (ul.children[i].classList.contains(classNames.FOCUS)) {\n li = ul.children[i];\n liIdx = i;\n li.classList.remove(classNames.FOCUS);\n e.keyCode === 40 ? liIdx++ : liIdx--;\n if (liIdx === (e.keyCode === 40 ? ul.childElementCount : -1)) {\n liIdx = defaultIdx;\n }\n }\n }\n li = ul.children[liIdx];\n liIdx = this.isValidLI(li, liIdx, e.keyCode);\n if (liIdx !== -1) {\n addClass([ul.children[liIdx]], classNames.FOCUS);\n ul.children[liIdx].focus();\n }\n };\n DropDownButton.prototype.removeCustomSelection = function () {\n var selectedLi = this.getULElement().querySelector('.e-selected');\n if (selectedLi) {\n selectedLi.classList.remove('e-selected');\n }\n };\n DropDownButton.prototype.isValidLI = function (li, index, keyCode, count) {\n if (count === void 0) { count = 0; }\n if (li.classList.contains(classNames.SEPARATOR) || li.classList.contains(classNames.DISABLED)) {\n if (index === (keyCode === 40 ? this.items.length - 1 : 0)) {\n index = keyCode === 40 ? 0 : this.items.length - 1;\n }\n else {\n keyCode === 40 ? index++ : index--;\n }\n }\n li = this.getULElement().children[index];\n if (li.classList.contains(classNames.SEPARATOR) || li.classList.contains(classNames.DISABLED)) {\n count++;\n if (count === this.items.length) {\n return index = -1;\n }\n index = this.isValidLI(li, index, keyCode, count);\n }\n return index;\n };\n DropDownButton.prototype.keyEventHandler = function (e) {\n if (this.target && (e.keyCode === 13 || e.keyCode === 9)) {\n return;\n }\n if (e.keyCode !== 9) {\n e.preventDefault();\n }\n if (e.keyCode === 27 || e.keyCode === 38 || e.keyCode === 9) {\n if (!this.canOpen()) {\n this.closePopup(e, this.element);\n }\n }\n else {\n this.clickHandler(e);\n }\n };\n DropDownButton.prototype.getLI = function (elem) {\n return elem.tagName === 'LI' ? elem : closest(elem, 'li');\n };\n DropDownButton.prototype.mousedownHandler = function (e) {\n var trgt = e.target;\n if (!this.canOpen() && !(closest(trgt, '#' + this.getPopUpElement().id) || closest(trgt, '#' + this.element.id))) {\n this.closePopup(e);\n }\n };\n DropDownButton.prototype.clickHandler = function (e) {\n var trgt = e.target;\n var canOpen = this.canOpen();\n if (closest(trgt, '#' + this.element.id)) {\n if (canOpen) {\n this.openPopUp(e);\n }\n else {\n this.closePopup(e, this.activeElem[0]);\n }\n }\n else {\n if (closest(trgt, '#' + this.getPopUpElement().id)) {\n var eventArgs = void 0;\n var liIdx = void 0;\n var item = void 0;\n var li = this.getLI(trgt);\n if (li) {\n liIdx = Array.prototype.indexOf.call(this.getULElement().children, li);\n item = this.items[liIdx];\n if (item) {\n eventArgs = { element: li, item: item };\n this.trigger('select', eventArgs);\n }\n this.closePopup(e, this.activeElem[0]);\n }\n }\n }\n };\n DropDownButton.prototype.openPopUp = function (e) {\n if (e === void 0) { e = null; }\n if (!this.target) {\n this.getPopUpElement().appendChild(this.createItems(this.items));\n }\n var ul = this.getULElement();\n var beforeOpenArgs = { element: ul, items: this.items, event: e, cancel: false };\n this.trigger('beforeOpen', beforeOpenArgs);\n if (!beforeOpenArgs.cancel) {\n this.dropDown.show(null, this.element);\n addClass([this.element], 'e-active');\n this.element.setAttribute('aria-expanded', 'true');\n ul.focus();\n var openArgs = { element: ul, items: this.items };\n this.trigger('open', openArgs);\n }\n };\n DropDownButton.prototype.closePopup = function (e, focusEle) {\n if (e === void 0) { e = null; }\n var ul = this.getULElement();\n var beforeCloseArgs = { element: ul, items: this.items, event: e, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs);\n if (!beforeCloseArgs.cancel) {\n this.removeCustomSelection();\n this.dropDown.hide();\n removeClass(this.activeElem, 'e-active');\n this.element.setAttribute('aria-expanded', 'false');\n if (focusEle) {\n focusEle.focus();\n }\n var closeArgs = { element: ul, items: this.items };\n this.trigger('close', closeArgs);\n if (!this.target && ul) {\n detach(ul);\n }\n }\n };\n DropDownButton.prototype.unWireEvents = function () {\n EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);\n EventHandler.remove(this.element, 'click', this.clickHandler);\n EventHandler.remove(this.getPopUpElement(), 'click', this.clickHandler);\n EventHandler.remove(this.element, 'keydown', this.keyBoardHandler);\n EventHandler.remove(this.getPopUpElement(), 'keydown', this.keyBoardHandler);\n this.rippleFn();\n };\n /**\n * Called internally if any of the property value changed.\n * @param {DropDownButtonModel} newProp\n * @param {DropDownButtonModel} oldProp\n * @returns void\n * @private\n */\n DropDownButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var btnModel = ['content', 'cssClass', 'iconCss', 'iconPosition', 'disabled', 'enableRtl'];\n this.button.setProperties(getModel(newProp, btnModel));\n var popupElement = this.getPopUpElement();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'content':\n if (!this.element.querySelector('span.e-caret')) {\n this.appendArrowSpan();\n }\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.unWireEvents();\n if (!this.canOpen()) {\n this.closePopup();\n }\n }\n else {\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (newProp.cssClass.indexOf(classNames.VERTICAL) > -1) {\n var arrowSpan = this.element.querySelector('span.e-caret');\n classList(arrowSpan, ['e-icon-bottom'], ['e-icon-right']);\n }\n if (oldProp.cssClass) {\n removeClass([popupElement], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([popupElement], newProp.cssClass.split(' '));\n }\n break;\n case 'enableRtl':\n popupElement.classList.toggle(classNames.RTL);\n break;\n case 'target':\n this.target = newProp.target;\n detach(this.getULElement());\n popupElement.appendChild(this.getTargetElement());\n this.dropDown.content = this.getTargetElement();\n break;\n case 'items':\n this.dropDown.refresh();\n if (popupElement.classList.contains('e-popup-open')) {\n classList(popupElement, ['e-popup-close'], ['e-popup-open']);\n }\n break;\n }\n }\n };\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"content\", void 0);\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], DropDownButton.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"iconCss\", void 0);\n __decorate([\n Property('Left')\n ], DropDownButton.prototype, \"iconPosition\", void 0);\n __decorate([\n Collection([], Item)\n ], DropDownButton.prototype, \"items\", void 0);\n __decorate([\n Property('')\n ], DropDownButton.prototype, \"target\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"beforeItemRender\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], DropDownButton.prototype, \"created\", void 0);\n DropDownButton = __decorate([\n NotifyPropertyChanges\n ], DropDownButton);\n return DropDownButton;\n}(Component));\nexport { DropDownButton };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n///
\nimport { Event, remove, addClass, removeClass, detach, getValue, setValue } from '@syncfusion/ej2-base';\nimport { EventHandler, Collection, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';\nimport { attributes, getUniqueID, getInstance, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { getModel, Item } from './../common/common';\nimport { DropDownButton } from '../drop-down-button/drop-down-button';\nvar RTL = 'e-rtl';\nvar TAGNAME = 'EJS-SPLITBUTTON';\n/**\n * SplitButton component has primary and secondary button. Primary button is used to select\n * default action and secondary button is used to toggle contextual overlays for displaying list of\n * action items. It can contain both text and images.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar SplitButton = /** @class */ (function (_super) {\n __extends(SplitButton, _super);\n /**\n * Constructor for creating the widget\n * @param {SplitButtonModel} options?\n * @param {string|HTMLButtonElement} element?\n */\n function SplitButton(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize Angular support.\n * @private\n */\n SplitButton.prototype.preRender = function () {\n var ele = this.element;\n if (ele.tagName === TAGNAME) {\n var ejInstance = getValue('ej2_instances', ele);\n var btn = this.createElement('button', { attrs: { 'type': 'button' } });\n var wrapper = this.createElement(TAGNAME, { className: 'e-' + this.getModuleName() + '-wrapper' });\n for (var idx = 0, len = ele.attributes.length; idx < len; idx++) {\n btn.setAttribute(ele.attributes[idx].nodeName, ele.attributes[idx].nodeValue);\n }\n ele.parentNode.insertBefore(wrapper, ele);\n detach(ele);\n ele = btn;\n wrapper.appendChild(ele);\n setValue('ej2_instances', ejInstance, ele);\n this.wrapper = wrapper;\n this.element = ele;\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n };\n SplitButton.prototype.render = function () {\n this.initWrapper();\n this.createPrimaryButton();\n this.createSecondaryButton();\n this.setActiveElem([this.element, this.secondaryBtnObj.element]);\n this.setAria();\n this.wireEvents();\n };\n SplitButton.prototype.initWrapper = function () {\n if (!this.wrapper) {\n this.wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });\n this.element.parentNode.insertBefore(this.wrapper, this.element);\n }\n this.element.classList.remove('e-' + this.getModuleName());\n if (this.enableRtl) {\n this.wrapper.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([this.wrapper], this.cssClass.split(' '));\n }\n };\n SplitButton.prototype.createPrimaryButton = function () {\n var btnModel = {\n cssClass: this.cssClass,\n enableRtl: this.enableRtl,\n iconCss: this.iconCss,\n iconPosition: this.iconPosition,\n content: this.content,\n disabled: this.disabled\n };\n this.primaryBtnObj = new Button(btnModel);\n this.primaryBtnObj.createElement = this.createElement;\n this.primaryBtnObj.appendTo(this.element);\n this.element.classList.add('e-' + this.getModuleName());\n this.element.type = 'button';\n this.wrapper.appendChild(this.element);\n };\n SplitButton.prototype.createSecondaryButton = function () {\n var _this = this;\n var btnElem = this.createElement('button', {\n className: 'e-icon-btn',\n attrs: { 'tabindex': '-1' },\n id: this.element.id + '_dropdownbtn'\n });\n this.wrapper.appendChild(btnElem);\n var dropDownBtnModel = {\n cssClass: this.cssClass,\n disabled: this.disabled,\n enableRtl: this.enableRtl,\n items: this.items,\n target: this.target,\n beforeItemRender: function (args) {\n _this.trigger('beforeItemRender', args);\n },\n beforeOpen: function (args) {\n _this.trigger('beforeOpen', args);\n },\n beforeClose: function (args) {\n _this.trigger('beforeClose', args);\n },\n open: function (args) {\n _this.trigger('open', args);\n },\n close: function (args) {\n _this.trigger('close', args);\n },\n select: function (args) {\n _this.trigger('select', args);\n }\n };\n this.secondaryBtnObj = new DropDownButton(dropDownBtnModel);\n this.secondaryBtnObj.createElement = this.createElement;\n this.secondaryBtnObj.appendTo(btnElem);\n this.secondaryBtnObj.dropDown.relateTo = this.wrapper;\n this.dropDown = this.secondaryBtnObj.dropDown;\n this.secondaryBtnObj.activeElem = [this.element, this.secondaryBtnObj.element];\n EventHandler.remove(this.getPopUpElement(), 'keydown', this.secondaryBtnObj.keyBoardHandler);\n this.secondaryBtnObj.element.querySelector('.e-btn-icon').classList.remove('e-icon-right');\n };\n SplitButton.prototype.setAria = function () {\n attributes(this.element, {\n 'role': 'listbox', 'aria-expanded': 'false', 'aria-haspopup': 'true',\n 'aria-label': this.element.textContent + ' splitbutton', 'aria-owns': this.secondaryBtnObj.dropDown.element.id\n });\n };\n /**\n * Get component name.\n * @returns string\n * @private\n */\n SplitButton.prototype.getModuleName = function () {\n return 'split-btn';\n };\n /**\n * To open/close SplitButton popup based on current state of the SplitButton.\n * @returns void\n */\n SplitButton.prototype.toggle = function () {\n this.secondaryBtnObj.toggle();\n };\n SplitButton.prototype.destroy = function () {\n var _this = this;\n var classList = [RTL];\n var element = document.getElementById(this.element.id);\n if (this.cssClass) {\n classList = classList.concat(this.cssClass.split(' '));\n }\n if (element && element.parentElement === this.wrapper) {\n if (this.wrapper.tagName === TAGNAME) {\n this.wrapper.innerHTML = '';\n removeClass([this.wrapper], ['e-rtl', 'e-' + this.getModuleName() + '-wrapper']);\n removeClass([this.wrapper], this.cssClass.split(' '));\n }\n else {\n removeClass([this.element], classList);\n ['role', 'aria-label', 'aria-haspopup', 'aria-expanded',\n 'aria-owns', 'type'].forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n this.wrapper.parentNode.insertBefore(this.element, this.wrapper);\n remove(this.wrapper);\n }\n this.unWireEvents();\n }\n this.primaryBtnObj.destroy();\n this.secondaryBtnObj.destroy();\n _super.prototype.destroy.call(this);\n if (!this.element.getAttribute('class')) {\n this.element.removeAttribute('class');\n }\n };\n SplitButton.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.primaryBtnClickHandler, this);\n EventHandler.add(this.getPopUpElement(), 'keydown', this.keyBoardHandler, this);\n new KeyboardEvents(this.element, {\n keyAction: this.btnKeyBoardHandler.bind(this),\n keyConfigs: {\n altdownarrow: 'alt+downarrow'\n }\n });\n };\n SplitButton.prototype.unWireEvents = function () {\n EventHandler.remove(this.element, 'click', this.primaryBtnClickHandler);\n getInstance(this.element, KeyboardEvents).destroy();\n };\n SplitButton.prototype.primaryBtnClickHandler = function () {\n this.trigger('click', { element: this.element });\n };\n SplitButton.prototype.btnKeyBoardHandler = function (e) {\n switch (e.action) {\n case 'altdownarrow':\n this.clickHandler(e);\n break;\n }\n };\n /**\n * Called internally if any of the property value changed.\n * @param {SplitButtonModel} newProp\n * @param {SplitButtonModel} oldProp\n * @returns void\n */\n SplitButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var model = ['content', 'iconCss', 'iconPosition', 'cssClass', 'disabled', 'enableRtl'];\n this.primaryBtnObj.setProperties(getModel(newProp, model));\n model = ['items', 'beforeOpen', 'beforeItemRender', 'select', 'open',\n 'close', 'cssClass', 'disabled', 'enableRtl'];\n this.secondaryBtnObj.setProperties(getModel(newProp, model));\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([this.wrapper], oldProp.cssClass.split(' '));\n }\n addClass([this.wrapper], newProp.cssClass.split(' '));\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n addClass([this.wrapper], RTL);\n }\n else {\n removeClass([this.wrapper], RTL);\n }\n break;\n }\n }\n };\n __decorate([\n Property('')\n ], SplitButton.prototype, \"content\", void 0);\n __decorate([\n Property('')\n ], SplitButton.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], SplitButton.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], SplitButton.prototype, \"iconCss\", void 0);\n __decorate([\n Property('Left')\n ], SplitButton.prototype, \"iconPosition\", void 0);\n __decorate([\n Collection([], Item)\n ], SplitButton.prototype, \"items\", void 0);\n __decorate([\n Property('')\n ], SplitButton.prototype, \"target\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"beforeItemRender\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"click\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], SplitButton.prototype, \"created\", void 0);\n SplitButton = __decorate([\n NotifyPropertyChanges\n ], SplitButton);\n return SplitButton;\n}(DropDownButton));\nexport { SplitButton };\n","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 { Button } from '@syncfusion/ej2-buttons';\nimport { EventHandler, Property, NotifyPropertyChanges, Animation, attributes } from '@syncfusion/ej2-base';\nimport { Event, remove, removeClass, Complex, ChildProperty } from '@syncfusion/ej2-base';\nimport { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nvar HIDESPINNER = 'e-hide-spinner';\nvar PROGRESS = 'e-progress';\nvar PROGRESSACTIVE = 'e-progress-active';\nvar CONTENTCLS = 'e-btn-content';\nvar SpinSettings = /** @class */ (function (_super) {\n __extends(SpinSettings, _super);\n function SpinSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], SpinSettings.prototype, \"template\", void 0);\n __decorate([\n Property(16)\n ], SpinSettings.prototype, \"width\", void 0);\n __decorate([\n Property('Left')\n ], SpinSettings.prototype, \"position\", void 0);\n return SpinSettings;\n}(ChildProperty));\nexport { SpinSettings };\nvar AnimationSettings = /** @class */ (function (_super) {\n __extends(AnimationSettings, _super);\n function AnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(400)\n ], AnimationSettings.prototype, \"duration\", void 0);\n __decorate([\n Property('None')\n ], AnimationSettings.prototype, \"effect\", void 0);\n __decorate([\n Property('ease')\n ], AnimationSettings.prototype, \"easing\", void 0);\n return AnimationSettings;\n}(ChildProperty));\nexport { AnimationSettings };\n/**\n * The ProgressButton visualizes the progression of an operation to indicate the user\n * that a process is happening in the background with visual representation.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar ProgressButton = /** @class */ (function (_super) {\n __extends(ProgressButton, _super);\n /**\n * Constructor for creating the widget\n * @param {ProgressButtonModel} options?\n * @param {string|HTMLButtonElement} element?\n */\n function ProgressButton(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.step = 1;\n return _this;\n }\n ProgressButton.prototype.preRender = function () {\n _super.prototype.preRender.call(this);\n };\n /**\n * Initialize the Component rendering\n * @returns void\n * @private\n */\n ProgressButton.prototype.render = function () {\n _super.prototype.render.call(this);\n this.init();\n this.wireEvents();\n this.setAria();\n };\n /**\n * Starts the button progress at the specified percent.\n * @param percent Starts the button progress at this percent.\n * @returns void\n */\n ProgressButton.prototype.start = function (percent) {\n this.isPaused = false;\n this.startProgress(percent ? percent : this.percent, this.progressTime);\n };\n /**\n * Stops the button progress.\n * @returns void\n */\n ProgressButton.prototype.stop = function () {\n this.isPaused = true;\n cancelAnimationFrame(this.timerId);\n };\n /**\n * Get component name.\n * @returns string\n * @private\n */\n ProgressButton.prototype.getModuleName = function () {\n return 'progress-btn';\n };\n /**\n * Destroys the widget.\n * @returns void\n */\n ProgressButton.prototype.destroy = function () {\n var _this = this;\n var classList = [HIDESPINNER, PROGRESSACTIVE, 'e-round-corner', 'e-' + _super.prototype.getModuleName.call(this),\n 'e-spin-' + this.spinSettings.position.toLowerCase()];\n var css;\n _super.prototype.destroy.call(this);\n this.unWireEvents();\n this.element.innerHTML = '';\n if (this.cssClass) {\n classList = classList.concat(this.cssClass.split(' '));\n }\n removeClass([this.element], classList);\n css = this.element.getAttribute('class') ? ['aria-label', 'aria-valuemin', 'aria-valuemax', 'aria-valuenow']\n : ['aria-label', 'aria-valuemin', 'aria-valuemax', 'aria-valuenow', 'class'];\n css.forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n if (this.disabled) {\n this.element.removeAttribute('disabled');\n }\n };\n ProgressButton.prototype.init = function () {\n this.element.classList.add('e-' + _super.prototype.getModuleName.call(this));\n this.setContent();\n this.createSpinner();\n if (this.enableProgress) {\n this.createProgress();\n }\n };\n ProgressButton.prototype.createSpinner = function () {\n var spinner = this.createElement('span', { className: 'e-spinner' });\n this.setSpinPosition(spinner);\n createSpinner({\n target: spinner, width: this.spinSettings.width || 16, template: this.spinSettings.template\n }, this.createElement);\n };\n ProgressButton.prototype.getSpinner = function () {\n return this.element.getElementsByClassName('e-spinner')[0];\n };\n ProgressButton.prototype.getProgress = function () {\n return this.element.getElementsByClassName(PROGRESS)[0];\n };\n ProgressButton.prototype.setSpinPosition = function (ele) {\n var position = this.spinSettings.position || 'Left';\n if (position === 'Left' || position === 'Top') {\n this.element.insertBefore(ele, this.element.getElementsByClassName(CONTENTCLS)[0]);\n }\n else {\n this.element.appendChild(ele);\n }\n this.element.classList.add('e-spin-' + position.toLowerCase());\n };\n ProgressButton.prototype.createProgress = function () {\n this.element.appendChild(this.createElement('span', { className: PROGRESS }));\n };\n ProgressButton.prototype.setContent = function () {\n var cont = this.element.innerHTML;\n this.element.innerHTML = '';\n this.element.appendChild(this.createElement('span', { className: CONTENTCLS, innerHTML: cont }));\n };\n ProgressButton.prototype.clickHandler = function () {\n if (this.element.classList.contains(PROGRESSACTIVE)) {\n return;\n }\n this.startProgress();\n };\n ProgressButton.prototype.startProgress = function (percent, progressTime) {\n var clsList = this.element.classList;\n var isVertical = clsList.contains('e-vertical');\n clsList.add(PROGRESSACTIVE);\n if (!(clsList.contains(HIDESPINNER))) {\n showSpinner(this.element);\n }\n this.startAnimate(Date.now(), progressTime ? progressTime : 0, progressTime ? Date.now() - (this.duration * 1 / 100) : Date.now(), percent ? percent : 0, 0, this.step, 0, isVertical);\n this.startContAnimate();\n };\n ProgressButton.prototype.startAnimate = function (timestamp, progressTime, prevTime, percent, prevPercent, step, prevProgressTime, isVertical) {\n var _this = this;\n try {\n var args_1;\n var timeDiff = timestamp - prevTime;\n var stepTime = this.duration * step / 100;\n var timeDiffBuffer = timeDiff ? (timeDiff < stepTime ? timeDiff - stepTime : timeDiff % stepTime) : 0;\n this.progressTime = progressTime = progressTime + timeDiff - timeDiffBuffer;\n prevTime = timestamp - timeDiffBuffer;\n percent = percent + (timeDiff - timeDiffBuffer) / this.duration * 100;\n prevPercent = ((progressTime - prevProgressTime) % stepTime === 0 || percent === 100) ? percent : prevPercent;\n args_1 = { percent: prevPercent, currentDuration: progressTime, step: step };\n if (percent === 0) {\n this.trigger('begin', args_1);\n }\n else if (percent === 100 || progressTime === this.duration) {\n this.trigger('end', args_1);\n }\n else {\n this.trigger('progress', args_1);\n }\n if (percent !== args_1.percent && args_1.percent !== prevPercent) {\n percent = args_1.percent;\n }\n this.percent = percent;\n this.step = args_1.step;\n if ((progressTime - prevProgressTime) % (this.duration * args_1.step / 100) === 0 || percent === 100) {\n this.timerId = requestAnimationFrame(function () {\n if (_this.enableProgress) {\n _this.getProgress().style[isVertical ? 'height' : 'width'] = percent + '%';\n }\n _this.element.setAttribute('aria-valuenow', percent.toString());\n });\n prevPercent = percent;\n prevProgressTime = progressTime;\n }\n if (!this.isPaused) {\n if (progressTime < this.duration && percent < 100) {\n setTimeout(function () {\n _this.startAnimate(Date.now(), progressTime, prevTime, percent, prevPercent, args_1.step, prevProgressTime, isVertical);\n // tslint:disable-next-line\n }, (this.duration / 100) - timeDiffBuffer);\n }\n else {\n setTimeout(function () {\n _this.progressTime = _this.percent = 0;\n if (_this.enableProgress) {\n _this.getProgress().style[isVertical ? 'height' : 'width'] = '0%';\n }\n _this.element.setAttribute('aria-valuenow', '0');\n _this.hideSpin();\n // tslint:disable-next-line\n }, 100);\n }\n }\n }\n catch (e) {\n cancelAnimationFrame(this.timerId);\n this.trigger('fail', e);\n }\n };\n ProgressButton.prototype.startContAnimate = function () {\n var _this = this;\n var ele = this.element.getElementsByClassName(CONTENTCLS)[0];\n if (this.animationSettings.effect !== 'None') {\n (new Animation({})).animate(ele, {\n duration: this.animationSettings.duration,\n name: 'Progress' + this.animationSettings.effect,\n timingFunction: this.animationSettings.easing,\n begin: function () {\n if (_this.spinSettings.position === 'Center') {\n _this.setSpinnerSize();\n }\n },\n end: function () {\n ele.classList.add('e-animate-end');\n }\n });\n }\n else if (this.spinSettings.position === 'Center') {\n this.setSpinnerSize();\n }\n };\n ProgressButton.prototype.setSpinnerSize = function () {\n var ele = this.element.getElementsByClassName(CONTENTCLS)[0];\n var spinner = this.getSpinner();\n spinner.style.width = Math.max(spinner.offsetWidth, ele.offsetWidth) + 'px';\n spinner.style.height = Math.max(spinner.offsetHeight, ele.offsetHeight) + 'px';\n ele.classList.add('e-cont-animate');\n };\n ProgressButton.prototype.hideSpin = function () {\n var cont = this.element.getElementsByClassName(CONTENTCLS)[0];\n if (!(this.element.classList.contains(HIDESPINNER))) {\n hideSpinner(this.element);\n }\n this.element.classList.remove(PROGRESSACTIVE);\n if (this.animationSettings.effect !== 'None') {\n cont.classList.remove('e-animate-end');\n }\n if (this.spinSettings.position === 'Center') {\n var ele = this.getSpinner();\n cont.classList.remove('e-cont-animate');\n ele.style.width = 'auto';\n ele.style.height = 'auto';\n }\n };\n ProgressButton.prototype.setIconSpan = function () {\n var cont = this.element.getElementsByClassName(CONTENTCLS)[0];\n var iconSpan = this.element.getElementsByClassName('e-btn-icon')[0];\n if (cont.childNodes[0] && (this.iconPosition === 'Left' || this.iconPosition === 'Top')) {\n cont.insertBefore(iconSpan, cont.childNodes[0]);\n }\n else {\n cont.appendChild(iconSpan);\n }\n };\n ProgressButton.prototype.setAria = function () {\n attributes(this.element, {\n 'aria-label': this.element.textContent + ' progress', 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': '0'\n });\n };\n ProgressButton.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n };\n ProgressButton.prototype.unWireEvents = function () {\n EventHandler.remove(this.element, 'click', this.clickHandler);\n };\n /**\n * Called internally if any of the property value changed.\n * @param {ProgressButton} newProp\n * @param {ProgressButton} oldProp\n * @returns void\n * @private\n */\n ProgressButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var ele = this.element;\n _super.prototype.onPropertyChanged.call(this, 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 'content':\n this.setContent();\n this.createSpinner();\n if (this.enableProgress) {\n this.createProgress();\n }\n ele.setAttribute('aria-label', ele.textContent + ' progress');\n break;\n case 'iconCss':\n if (!oldProp.iconCss) {\n this.setIconSpan();\n }\n break;\n case 'iconPosition':\n this.setIconSpan();\n break;\n case 'enableProgress':\n if (newProp.enableProgress) {\n this.createProgress();\n }\n else {\n remove(this.getProgress());\n }\n break;\n case 'spinSettings':\n if (newProp.spinSettings.position) {\n ele.classList.remove('e-spin-' + oldProp.spinSettings.position.toLowerCase());\n this.setSpinPosition(this.getSpinner());\n }\n if (newProp.spinSettings.template || newProp.spinSettings.width) {\n ele.removeChild(this.getSpinner());\n this.createSpinner();\n }\n break;\n }\n }\n };\n __decorate([\n Property(false)\n ], ProgressButton.prototype, \"enableProgress\", void 0);\n __decorate([\n Property(2000)\n ], ProgressButton.prototype, \"duration\", void 0);\n __decorate([\n Property('Left')\n ], ProgressButton.prototype, \"iconPosition\", void 0);\n __decorate([\n Property('')\n ], ProgressButton.prototype, \"iconCss\", void 0);\n __decorate([\n Property(false)\n ], ProgressButton.prototype, \"disabled\", void 0);\n __decorate([\n Property(false)\n ], ProgressButton.prototype, \"isPrimary\", void 0);\n __decorate([\n Property('')\n ], ProgressButton.prototype, \"cssClass\", void 0);\n __decorate([\n Property('')\n ], ProgressButton.prototype, \"content\", void 0);\n __decorate([\n Property(false)\n ], ProgressButton.prototype, \"isToggle\", void 0);\n __decorate([\n Complex({}, SpinSettings)\n ], ProgressButton.prototype, \"spinSettings\", void 0);\n __decorate([\n Complex({}, AnimationSettings)\n ], ProgressButton.prototype, \"animationSettings\", void 0);\n __decorate([\n Event()\n ], ProgressButton.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], ProgressButton.prototype, \"begin\", void 0);\n __decorate([\n Event()\n ], ProgressButton.prototype, \"progress\", void 0);\n __decorate([\n Event()\n ], ProgressButton.prototype, \"end\", void 0);\n __decorate([\n Event()\n ], ProgressButton.prototype, \"fail\", void 0);\n ProgressButton = __decorate([\n NotifyPropertyChanges\n ], ProgressButton);\n return ProgressButton;\n}(Button));\nexport { ProgressButton };\n","import { addClass, createElement as internalCreateElement, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\n/**\n * Initialize ButtonGroup CSS component with specified properties.\n * ```html\n *
\n * \n * \n * \n *
\n * ```\n * ```typescript\n * createButtonGroup('#buttongroup', {\n * cssClass: 'e-outline',\n * buttons: [\n * { content: 'Day' },\n * { content: 'Week' },\n * { content: 'Work Week'}\n * ]\n * });\n * ```\n * @param {string} selector\n * @param {CreateButtonGroupModel} options\n * @returns HTMLElement\n */\nexport function createButtonGroup(selector, options, createElement) {\n if (options === void 0) { options = {}; }\n var child;\n var btnElem;\n var nextChild;\n var btnModel;\n if (isNullOrUndefined(createElement)) {\n createElement = internalCreateElement;\n }\n var wrapper = document.querySelector(selector);\n addClass([wrapper], ['e-btn-group']);\n wrapper.setAttribute('role', 'group');\n var childs = wrapper.children;\n options.buttons = options.buttons || [];\n for (var i = 0, j = 0; j < childs.length; i++, j++) {\n child = childs[j];\n btnModel = options.buttons[i];\n if (btnModel !== null) {\n if (child.tagName === 'BUTTON') {\n btnElem = child;\n }\n else {\n btnElem = createElement('label');\n nextChild = childs[j + 1];\n if (nextChild) {\n wrapper.insertBefore(btnElem, nextChild);\n }\n else {\n wrapper.appendChild(btnElem);\n }\n if (child.id) {\n btnElem.setAttribute('for', child.id);\n }\n if (btnModel && btnModel.disabled) {\n child.disabled = true;\n }\n j++;\n }\n if (options.cssClass && btnModel && !btnModel.cssClass) {\n btnModel.cssClass = options.cssClass;\n }\n new Button(btnModel || {}, btnElem);\n }\n }\n return wrapper;\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, Event, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';\nimport { Browser, closest, detach, EventHandler, getInstance, select, selectAll, formatUnit } from '@syncfusion/ej2-base';\nimport { addClass, attributes, classList, isNullOrUndefined, L10n } from '@syncfusion/ej2-base';\nimport { remove, removeClass, rippleEffect } from '@syncfusion/ej2-base';\nimport { SplitButton, getModel } from '@syncfusion/ej2-splitbuttons';\nimport { Tooltip, getZindexPartial, Popup } from '@syncfusion/ej2-popups';\nimport { Input } from './../input/index';\nimport { NumericTextBox } from './../numerictextbox/index';\nimport { Slider } from './../slider/slider';\nvar APPLY = 'e-apply';\nvar CANCEL = 'e-cancel';\nvar CURRENT = 'e-current';\nvar CONTAINER = 'e-container';\nvar CTRLBTN = 'e-ctrl-btn';\nvar CTRLSWITCH = 'e-switch-ctrl-btn';\nvar DISABLED = 'e-disabled';\nvar FORMATSWITCH = 'e-value-switch-btn';\nvar HANDLER = 'e-handler';\nvar HEX = 'e-hex';\nvar HIDEHEX = 'e-hide-hex-value';\nvar HIDEOPACITY = 'e-hide-opacity';\nvar HIDERGBA = 'e-hide-switchable-value';\nvar HIDEVALUE = 'e-hide-value';\nvar HIDEVALUESWITCH = 'e-hide-valueswitcher';\nvar HSVAREA = 'e-hsv-color';\nvar HSVCONTAINER = 'e-hsv-container';\nvar INPUTWRAPPER = 'e-selected-value';\nvar MODESWITCH = 'e-mode-switch-btn';\nvar NOCOLOR = 'e-nocolor-item';\nvar OPACITY = 'e-opacity-value';\nvar PALETTES = 'e-palette';\nvar PALETTECONTENT = 'e-color-palette';\nvar PICKERCONTENT = 'e-color-picker';\nvar PREVIEW = 'e-preview-container';\nvar PREVIOUS = 'e-previous';\nvar RTL = 'e-rtl';\nvar SHOWVALUE = 'e-show-value';\nvar SELECT = 'e-selected';\nvar SPLITPREVIEW = 'e-split-preview';\nvar TILE = 'e-tile';\nvar presets = {\n default: ['#000000', '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#ffeb3b',\n '#ffffff', '#ffebee', '#fce4ec', '#f3e5f5', '#ede7f6', '#e3f2fd', '#e1f5fe', '#e0f7fa', '#e0f2f1', '#fffde7',\n '#f2f2f2', '#ffcdd2', '#f8bbd0', '#e1bee7', '#d1c4e9', '#bbdefb', '#b3e5fc', '#b2ebf2', '#b2dfdb', '#fff9c4',\n '#e6e6e6', '#ef9a9a', '#f48fb1', '#ce93d8', '#b39ddb', '#90caf9', '#81d4fa', '#80deea', '#80cbc4', '#fff59d',\n '#cccccc', '#e57373', '#f06292', '#ba68c8', '#9575cd', '#64b5f6', '#4fc3f7', '#4dd0e1', '#4db6ac', '#fff176',\n '#b3b3b3', '#ef5350', '#ec407a', '#ab47bc', '#7e57c2', '#42a5f5', '#29b6f6', '#26c6da', '#26a69a', '#ffee58',\n '#999999', '#e53935', '#d81b60', '#8e24aa', '#5e35b1', '#1e88e5', '#039be5', '#00acc1', '#00897b', '#fdd835',\n '#808080', '#d32f2f', '#c2185b', '#7b1fa2', '#512da8', '#1976d2', '#0288d1', '#0097a7', '#00796b', '#fbc02d',\n '#666666', '#c62828', '#ad1457', '#6a1b9a', '#4527a0', '#1565c0', '#0277bd', '#00838f', '#00695c', '#f9a825',\n '#4d4d4d', '#b71c1c', '#880e4f', '#4a148c', '#311b92', '#0d47a1', '#01579b', '#006064', '#004d40', '#f57f17']\n};\n/**\n * ColorPicker component is a user interface to select and adjust color values. It provides supports for various\n * color specification like Red Green Blue, Hue Saturation Value and Hex codes.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar ColorPicker = /** @class */ (function (_super) {\n __extends(ColorPicker, _super);\n function ColorPicker(options, element) {\n return _super.call(this, options, element) || this;\n }\n ColorPicker.prototype.preRender = function () {\n var localeText = { Apply: 'Apply', Cancel: 'Cancel', ModeSwitcher: 'Switch Mode' };\n this.l10n = new L10n('colorpicker', localeText, this.locale);\n };\n /**\n * To Initialize the component rendering\n * @private\n */\n ColorPicker.prototype.render = function () {\n this.initWrapper();\n if (this.inline) {\n this.createWidget();\n }\n else {\n this.createSplitBtn();\n }\n if (!this.enableOpacity) {\n addClass([this.container.parentElement], HIDEOPACITY);\n }\n };\n ColorPicker.prototype.initWrapper = function () {\n var wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });\n this.element.parentNode.insertBefore(wrapper, this.element);\n wrapper.appendChild(this.element);\n attributes(this.element, { 'tabindex': '-1', 'spellcheck': 'false' });\n this.container = this.createElement('div', { className: CONTAINER });\n this.getWrapper().appendChild(this.container);\n var value = this.value ? this.roundValue(this.value).toLowerCase() : '#008000ff';\n this.element.value = value.slice(0, 7);\n this.setProperties({ 'value': value }, true);\n if (this.enableRtl) {\n wrapper.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.split(' '));\n }\n this.tileRipple = rippleEffect(this.container, { selector: '.' + TILE });\n this.ctrlBtnRipple = rippleEffect(this.container, { selector: '.e-btn' });\n };\n ColorPicker.prototype.getWrapper = function () {\n return this.element.parentElement;\n };\n ColorPicker.prototype.createWidget = function () {\n if (this.mode === 'Palette') {\n this.createPalette();\n if (!this.inline) {\n this.firstPaletteFocus();\n }\n }\n else {\n this.createPicker();\n if (!this.inline) {\n this.getDragHandler().focus();\n }\n }\n this.isRgb = true;\n this.createInput();\n this.createCtrlBtn();\n if (!this.disabled) {\n this.wireEvents();\n }\n if (this.inline && this.disabled) {\n this.toggleDisabled(true);\n }\n if (Browser.isDevice) {\n this.refreshPopupPos();\n }\n };\n ColorPicker.prototype.createSplitBtn = function () {\n var _this = this;\n var splitButton = this.createElement('button', { className: 'e-split-colorpicker' });\n this.getWrapper().appendChild(splitButton);\n this.splitBtn = new SplitButton({\n iconCss: 'e-selected-color',\n target: this.container,\n disabled: this.disabled,\n enableRtl: this.enableRtl,\n beforeOpen: this.beforeOpenFn.bind(this),\n open: this.onOpen.bind(this),\n beforeClose: this.beforePopupClose.bind(this),\n click: function (args) {\n _this.trigger('change', {\n currentValue: { hex: _this.value.slice(0, 7), rgba: _this.convertToRgbString(_this.hexToRgb(_this.value)) },\n previousValue: { hex: null, rgba: null }\n });\n }\n });\n this.splitBtn.createElement = this.createElement;\n this.splitBtn.appendTo(splitButton);\n var preview = this.createElement('span', { className: SPLITPREVIEW });\n select('.e-selected-color', splitButton).appendChild(preview);\n preview.style.backgroundColor = this.convertToRgbString(this.hexToRgb(this.value));\n var popupEle = this.getPopupEle();\n addClass([popupEle], 'e-colorpicker-popup');\n if (this.cssClass) {\n addClass([popupEle], this.cssClass.split(' '));\n }\n if (Browser.isDevice) {\n var popupInst = this.getPopupInst();\n popupInst.relateTo = document.body;\n popupInst.position = { X: 'center', Y: 'center' };\n popupInst.targetType = 'container';\n popupInst.collision = { X: 'fit', Y: 'fit' };\n popupInst.offsetY = 4;\n popupEle.style.zIndex = getZindexPartial(this.splitBtn.element).toString();\n }\n };\n ColorPicker.prototype.onOpen = function (args) {\n this.trigger('open', { element: this.container });\n };\n ColorPicker.prototype.getPopupInst = function () {\n return getInstance(this.getPopupEle(), Popup);\n };\n ColorPicker.prototype.beforeOpenFn = function (args) {\n var beforeOpenArgs = { element: this.container, event: args.event, cancel: false };\n this.trigger('beforeOpen', beforeOpenArgs);\n args.cancel = beforeOpenArgs.cancel;\n if (!args.cancel) {\n var popupEle = this.getPopupEle();\n popupEle.style.top = formatUnit(0 + pageYOffset);\n popupEle.style.left = formatUnit(0 + pageXOffset);\n popupEle.style.display = 'block';\n this.createWidget();\n popupEle.style.display = '';\n if (Browser.isDevice) {\n this.modal = this.createElement('div');\n this.modal.className = 'e-' + this.getModuleName() + ' e-modal';\n this.modal.style.display = 'none';\n document.body.insertBefore(this.modal, popupEle);\n document.body.className += ' e-colorpicker-overflow';\n this.modal.style.display = 'block';\n this.modal.style.zIndex = (Number(popupEle.style.zIndex) - 1).toString();\n }\n }\n };\n ColorPicker.prototype.beforePopupClose = function (args) {\n if (!isNullOrUndefined(args.event)) {\n var beforeCloseArgs = { element: this.container, event: args.event, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs);\n if (Browser.isDevice && args.event.target === this.modal) {\n beforeCloseArgs.cancel = true;\n }\n args.cancel = beforeCloseArgs.cancel;\n if (!args.cancel) {\n this.onPopupClose();\n }\n }\n };\n ColorPicker.prototype.onPopupClose = function () {\n this.unWireEvents();\n this.destroyOtherComp();\n this.container.style.width = '';\n select('.' + SPLITPREVIEW, this.splitBtn.element).style.backgroundColor\n = this.convertToRgbString(this.hexToRgb(this.value));\n this.container.innerHTML = '';\n removeClass([this.container], [PICKERCONTENT, PALETTECONTENT]);\n if (Browser.isDevice && this.modal) {\n removeClass([document.body], 'e-colorpicker-overflow');\n this.modal.style.display = 'none';\n this.modal.outerHTML = '';\n this.modal = null;\n }\n };\n ColorPicker.prototype.createPalette = function () {\n classList(this.container, [PALETTECONTENT], [PICKERCONTENT]);\n if (this.presetColors) {\n var paletteGroup = this.createElement('div', { className: 'e-custom-palette' });\n this.appendElement(paletteGroup);\n var keys = Object.keys(this.presetColors);\n if (keys.length === 1) {\n this.appendPalette(this.presetColors[keys[0]], keys[0], paletteGroup);\n }\n else {\n for (var i = 0, len = keys.length; i < len; i++) {\n this.appendPalette(this.presetColors[keys[i]], keys[i], paletteGroup);\n }\n }\n if (selectAll('.e-row', paletteGroup).length > 10) {\n addClass([paletteGroup], 'e-palette-group');\n }\n }\n else {\n this.appendPalette(presets.default, 'default');\n }\n if (this.mode === 'Palette' && !this.modeSwitcher && this.noColor) {\n this.setNoColor();\n }\n var width = parseInt(getComputedStyle(this.container).borderBottomWidth, 10);\n this.container.style.width = formatUnit(this.container.children[0].offsetWidth + width + width);\n this.rgb = this.hexToRgb(this.roundValue(this.value));\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n };\n ColorPicker.prototype.firstPaletteFocus = function () {\n if (!select('.' + SELECT, this.container.children[0])) {\n selectAll('.' + PALETTES, this.container)[0].focus();\n }\n };\n ColorPicker.prototype.appendPalette = function (colors, key, refEle) {\n var palette = this.createElement('div', { className: PALETTES, attrs: { 'tabindex': '0' } });\n if (refEle) {\n refEle.appendChild(palette);\n }\n else {\n this.appendElement(palette);\n }\n var row;\n var tile;\n var roundedColor;\n for (var i = 0, len = colors.length; i < len; i++) {\n if (i === 0 || i % this.columns === 0) {\n row = this.createElement('div', {\n className: 'e-row', attrs: { 'role': 'row' }\n });\n palette.appendChild(row);\n }\n roundedColor = this.roundValue(colors[i]).toLowerCase();\n tile = this.createElement('span', {\n className: TILE, attrs: { 'role': 'gridcell', 'aria-label': roundedColor, 'aria-selected': 'false' }\n });\n this.trigger('beforeTileRender', { element: tile, presetName: key, value: colors[i] });\n row.appendChild(tile);\n if (this.value === roundedColor) {\n this.addTileSelection(tile);\n palette.focus();\n }\n tile.style.backgroundColor = this.convertToRgbString(this.hexToRgb(roundedColor));\n }\n };\n ColorPicker.prototype.setNoColor = function () {\n var noColorEle = selectAll('.e-row')[0].children[0];\n noColorEle.classList.add(NOCOLOR);\n if (!this.value) {\n noColorEle.classList.add(SELECT);\n closest(noColorEle, '.' + PALETTES).focus();\n }\n ['aria-selected', 'aria-label'].forEach(function (attr) { noColorEle.removeAttribute(attr); });\n noColorEle.style.backgroundColor = '';\n };\n ColorPicker.prototype.appendElement = function (ele, insertPos) {\n if (insertPos === void 0) { insertPos = 0; }\n var refEle = this.container.children[insertPos];\n refEle ? this.container.insertBefore(ele, refEle) : this.container.appendChild(ele);\n };\n ColorPicker.prototype.addTileSelection = function (ele) {\n ele.classList.add(SELECT);\n ele.setAttribute('aria-selected', 'true');\n };\n ColorPicker.prototype.createPicker = function () {\n classList(this.container, [PICKERCONTENT], [PALETTECONTENT]);\n var hsvContainer = this.createElement('div', { className: HSVCONTAINER });\n this.appendElement(hsvContainer);\n hsvContainer.appendChild(this.createElement('div', { className: HSVAREA }));\n var dragHandler = this.createElement('span', { className: HANDLER, attrs: { 'tabindex': '0' } });\n hsvContainer.appendChild(dragHandler);\n this.rgb = this.hexToRgb(this.value);\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n this.setHsvContainerBg();\n this.setHandlerPosition();\n this.createSlider();\n this.createDragTooltip();\n };\n ColorPicker.prototype.setHsvContainerBg = function (h) {\n if (h === void 0) { h = this.hsv[0]; }\n this.getHsvContainer().style.backgroundColor = this.convertToRgbString(this.hsvToRgb(h, 100, 100, 1));\n };\n ColorPicker.prototype.getHsvContainer = function () {\n return select('.' + HSVCONTAINER, this.container);\n };\n ColorPicker.prototype.setHandlerPosition = function () {\n var dragHandler = this.getDragHandler();\n var hsvArea = select('.' + HSVAREA, this.container);\n if (this.enableRtl) {\n dragHandler.style.left = formatUnit(hsvArea.offsetWidth * Math.abs(100 - this.hsv[1]) / 100);\n }\n else {\n dragHandler.style.left = formatUnit(hsvArea.offsetWidth * this.hsv[1] / 100);\n }\n dragHandler.style.top = formatUnit(hsvArea.offsetHeight * (100 - this.hsv[2]) / 100);\n };\n ColorPicker.prototype.createSlider = function () {\n var sliderPreviewWrapper = this.createElement('div', { className: 'e-slider-preview' });\n this.appendElement(sliderPreviewWrapper, 1);\n this.createPreview(sliderPreviewWrapper);\n var sliderWrapper = this.createElement('div', { className: 'e-colorpicker-slider' });\n sliderPreviewWrapper.insertBefore(sliderWrapper, sliderPreviewWrapper.children[0]);\n var slider = this.createElement('div', { className: 'e-hue-slider' });\n sliderWrapper.appendChild(slider);\n this.hueSlider = new Slider({\n value: this.hsv[0],\n min: 0,\n max: 359,\n enableRtl: this.enableRtl,\n enabled: !this.disabled,\n change: this.hueChange.bind(this)\n });\n this.hueSlider.createElement = this.createElement;\n this.hueSlider.appendTo(slider);\n if (this.enableOpacity) {\n slider = this.createElement('div', { className: 'e-opacity-slider' });\n sliderWrapper.appendChild(slider);\n this.createOpacitySlider(slider);\n }\n };\n ColorPicker.prototype.createOpacitySlider = function (slider) {\n this.opacitySlider = new Slider({\n value: this.rgb[3] * 100,\n min: 0,\n max: 100,\n enableRtl: this.enableRtl,\n enabled: !this.disabled,\n change: this.opacityChange.bind(this)\n });\n this.opacitySlider.createElement = this.createElement;\n this.opacitySlider.appendTo(slider);\n var opacityBgTrack = this.createElement('div', { className: 'e-opacity-empty-track' });\n slider.appendChild(opacityBgTrack);\n this.updateOpacitySliderBg();\n };\n ColorPicker.prototype.updateOpacitySliderBg = function () {\n var direction = this.enableRtl ? 'to left' : 'to right';\n select('.e-slider-track', this.opacitySlider.element).style.background =\n 'linear-gradient(' + direction + ', rgba(' + this.rgb.slice(0, 3) + ', 0) 0%, ' +\n this.convertToRgbString(this.rgb.slice(0, 3)) + ' 100%)';\n };\n ColorPicker.prototype.hueChange = function (args) {\n this.hsv[0] = args.value;\n this.setHsvContainerBg();\n this.convertToOtherFormat();\n };\n ColorPicker.prototype.opacityChange = function (args) {\n var value = args.value;\n var pValue = this.rgbToHex(this.rgb);\n this.hsv[3] = value / 100;\n this.rgb[3] = value / 100;\n var cValue = this.rgbToHex(this.rgb);\n if (!this.getWrapper().classList.contains(HIDEVALUE)) {\n getInstance(select('.' + OPACITY, this.container), NumericTextBox).value = value;\n }\n var rgb = this.convertToRgbString(this.rgb);\n this.updatePreview(rgb);\n this.triggerEvent(cValue, pValue, rgb);\n };\n ColorPicker.prototype.createPreview = function (parentEle) {\n var previewContainer = this.createElement('div', { className: PREVIEW });\n parentEle.appendChild(previewContainer);\n var preview = this.createElement('span', { className: 'e-preview ' + CURRENT });\n previewContainer.appendChild(preview);\n var colorValue = this.convertToRgbString(this.rgb);\n preview.style.backgroundColor = colorValue;\n preview = this.createElement('span', { className: 'e-preview ' + PREVIOUS });\n previewContainer.appendChild(preview);\n preview.style.backgroundColor = colorValue;\n };\n ColorPicker.prototype.isPicker = function () {\n return !this.container.classList.contains(PALETTECONTENT);\n };\n ColorPicker.prototype.getPopupEle = function () {\n return this.container.parentElement;\n };\n ColorPicker.prototype.createNumericInput = function (element, value, label, max) {\n var _this = this;\n var numericInput = new NumericTextBox({\n value: value,\n placeholder: label,\n min: 0,\n max: max,\n format: '###.##',\n showSpinButton: false,\n floatLabelType: 'Always',\n enableRtl: this.enableRtl,\n enabled: !this.disabled,\n readonly: this.isPicker() ? false : true,\n change: function (args) {\n if (args.event) {\n _this.inputHandler(args.event);\n }\n }\n });\n numericInput.createElement = this.createElement;\n numericInput.appendTo(element);\n };\n ColorPicker.prototype.createInput = function () {\n var isPicker = this.isPicker();\n var wrapper = this.getWrapper();\n if ((isPicker && !wrapper.classList.contains(HIDEVALUE)) || (!isPicker && wrapper.classList.contains(SHOWVALUE))) {\n var inputWrap = this.createElement('div', { className: INPUTWRAPPER });\n isPicker ? this.appendElement(inputWrap, 2) : this.appendElement(inputWrap, 1);\n var container = this.createElement('div', { className: 'e-input-container' });\n inputWrap.appendChild(container);\n if (!wrapper.classList.contains(HIDEVALUESWITCH)) {\n this.appendValueSwitchBtn(inputWrap);\n }\n if (!wrapper.classList.contains(HIDEHEX)) {\n var hexInput = this.createElement('input', {\n className: HEX,\n attrs: { 'maxlength': '7', 'spellcheck': 'false' }\n });\n container.appendChild(hexInput);\n Input.createInput({\n element: hexInput,\n floatLabelType: 'Always',\n properties: {\n placeholder: 'HEX',\n enableRtl: this.enableRtl,\n enabled: !this.disabled,\n readonly: this.isPicker() ? false : true\n }\n }, this.createElement);\n Input.setValue(this.value.slice(0, 7), hexInput);\n hexInput.addEventListener('input', this.inputHandler.bind(this));\n }\n if (!wrapper.classList.contains(HIDERGBA)) {\n var label = void 0;\n var value = void 0;\n if (this.isRgb) {\n label = 'RGB';\n value = this.rgb;\n }\n else {\n label = 'HSV';\n value = this.hsv;\n }\n var clsName = ['rh', 'gs', 'bv'];\n for (var i = 0; i < 3; i++) {\n this.createNumericInput(container.appendChild(this.createElement('input', { className: 'e-' + clsName[i] + '-value' })), value[i], label[i], 255);\n }\n if (this.enableOpacity) {\n this.appendOpacityValue(container);\n }\n }\n }\n };\n ColorPicker.prototype.appendOpacityValue = function (container) {\n this.createNumericInput(container.appendChild(this.createElement('input', { className: OPACITY })), this.rgb[3] * 100, 'A', 100);\n };\n ColorPicker.prototype.appendValueSwitchBtn = function (targetEle) {\n var valueSwitchBtn = this.createElement('button', { className: 'e-icons e-btn e-flat e-icon-btn ' + FORMATSWITCH });\n targetEle.appendChild(valueSwitchBtn);\n if (this.isPicker() && !this.getWrapper().classList.contains(HIDERGBA)) {\n valueSwitchBtn.addEventListener('click', this.formatSwitchHandler.bind(this));\n }\n };\n ColorPicker.prototype.createCtrlBtn = function () {\n if (this.modeSwitcher || this.showButtons) {\n this.l10n.setLocale(this.locale);\n var btnWrapper = this.createElement('div', { className: CTRLSWITCH });\n this.container.appendChild(btnWrapper);\n if (this.showButtons) {\n var controlBtnWrapper = this.createElement('div', { className: CTRLBTN });\n btnWrapper.appendChild(controlBtnWrapper);\n var apply = this.l10n.getConstant('Apply');\n controlBtnWrapper.appendChild(this.createElement('button', {\n innerHTML: apply,\n className: 'e-btn e-flat e-primary e-small ' + APPLY,\n attrs: { 'title': apply }\n }));\n var cancel = this.l10n.getConstant('Cancel');\n controlBtnWrapper.appendChild(this.createElement('button', {\n innerHTML: cancel,\n className: 'e-btn e-flat e-small ' + CANCEL,\n attrs: { 'title': cancel }\n }));\n }\n if (this.modeSwitcher) {\n this.appendModeSwitchBtn();\n }\n }\n };\n ColorPicker.prototype.appendModeSwitchBtn = function () {\n var modeSwitcher = this.createElement('button', {\n className: 'e-icons e-btn e-flat e-icon-btn ' + MODESWITCH, attrs: { title: this.l10n.getConstant('ModeSwitcher') }\n });\n select('.' + CTRLSWITCH, this.container).insertBefore(modeSwitcher, select('.' + CTRLBTN, this.container));\n };\n ColorPicker.prototype.createDragTooltip = function () {\n var _this = this;\n var tooltip = new Tooltip({\n opensOn: 'Custom',\n showTipPointer: false,\n cssClass: 'e-color-picker-tooltip',\n beforeOpen: function (args) {\n _this.tooltipEle = args.element;\n },\n animation: { open: { effect: 'None' }, close: { effect: 'None' } }\n });\n tooltip.createElement = this.createElement;\n tooltip.appendTo(this.container);\n tooltip.open(this.container);\n this.tooltipEle.style.zIndex = getZindexPartial(this.tooltipEle).toString();\n select('.e-tip-content', this.tooltipEle).appendChild(this.createElement('div', { className: 'e-tip-transparent' }));\n };\n ColorPicker.prototype.getTooltipInst = function () {\n return getInstance(this.container, Tooltip);\n };\n ColorPicker.prototype.setTooltipOffset = function (value) {\n this.getTooltipInst().offsetY = value;\n };\n ColorPicker.prototype.toggleDisabled = function (enable) {\n enable ? this.getWrapper().classList.add(DISABLED) : this.getWrapper().classList.remove(DISABLED);\n if (this.showButtons) {\n ([].slice.call(selectAll('.e-btn', this.container))).forEach(function (ele) {\n enable ? attributes(ele, { 'disabled': '' }) : ele.removeAttribute('disabled');\n });\n }\n };\n ColorPicker.prototype.convertToRgbString = function (rgb) {\n return rgb.length ? rgb.length === 4 ? 'rgba(' + rgb.join() + ')' : 'rgb(' + rgb.join() + ')' : '';\n };\n ColorPicker.prototype.convertToHsvString = function (hsv) {\n return hsv.length === 4 ? 'hsva(' + hsv.join() + ')' : 'hsv(' + hsv.join() + ')';\n };\n ColorPicker.prototype.updateHsv = function () {\n this.hsv[1] = this.hsv[1] > 100 ? 100 : this.hsv[1];\n this.hsv[2] = this.hsv[2] > 100 ? 100 : this.hsv[2];\n this.setHandlerPosition();\n };\n ColorPicker.prototype.convertToOtherFormat = function (isKey) {\n if (isKey === void 0) { isKey = false; }\n var pValue = this.rgbToHex(this.rgb);\n this.rgb = this.hsvToRgb.apply(this, this.hsv);\n var cValue = this.rgbToHex(this.rgb);\n var rgba = this.convertToRgbString(this.rgb);\n this.updatePreview(rgba);\n this.updateInput(cValue);\n this.triggerEvent(cValue, pValue, rgba, isKey);\n };\n ColorPicker.prototype.updateInput = function (value) {\n var wrapper = this.getWrapper();\n if (!wrapper.classList.contains(HIDEVALUE)) {\n if (!wrapper.classList.contains(HIDEHEX)) {\n Input.setValue(value.substr(0, 7), select('.' + HEX, this.container));\n }\n if (!wrapper.classList.contains(HIDERGBA)) {\n if (this.isRgb) {\n this.updateValue(this.rgb, false);\n }\n else {\n this.updateValue(this.hsv, false);\n }\n }\n }\n };\n ColorPicker.prototype.updatePreview = function (value) {\n if (this.enableOpacity) {\n this.updateOpacitySliderBg();\n }\n select('.e-tip-transparent', this.tooltipEle).style.backgroundColor = value;\n select('.' + PREVIEW + ' .' + CURRENT, this.container).style.backgroundColor = value;\n select('.' + PREVIEW + ' .' + PREVIOUS, this.container).style.backgroundColor\n = this.convertToRgbString(this.hexToRgb(this.value));\n };\n ColorPicker.prototype.getDragHandler = function () {\n return select('.' + HANDLER, this.container);\n };\n ColorPicker.prototype.removeTileSelection = function () {\n var selectedEle = [].slice.call(selectAll('.' + SELECT, this.container.children[0]));\n selectedEle.forEach(function (ele) {\n ele.classList.remove(SELECT);\n ele.setAttribute('aria-selected', 'false');\n });\n };\n ColorPicker.prototype.convertRgbToNumberArray = function (value) {\n return (value.slice(value.indexOf('(') + 1, value.indexOf(')'))).split(',').map(function (n, i) {\n return (i !== 3) ? parseInt(n, 10) : parseFloat(n);\n });\n };\n /**\n * To get color value in specified type.\n * @param value - Specify the color value.\n * @param type - Specify the type to which the specified color needs to be converted.\n * @method getValue\n * @return {string}\n */\n ColorPicker.prototype.getValue = function (value, type) {\n if (!value) {\n value = this.value;\n }\n type = !type ? 'hex' : type.toLowerCase();\n if (value[0] === 'r') {\n var cValue = this.convertRgbToNumberArray(value);\n if (type === 'hex' || type === 'hexa') {\n var hex = this.rgbToHex(cValue);\n return type === 'hex' ? hex.slice(0, 7) : hex;\n }\n else {\n if (type === 'hsv') {\n return this.convertToHsvString(this.rgbToHsv.apply(this, cValue.slice(0, 3)));\n }\n else {\n if (type === 'hsva') {\n return this.convertToHsvString(this.rgbToHsv.apply(this, cValue));\n }\n else {\n return 'null';\n }\n }\n }\n }\n else {\n if (value[0] === 'h') {\n var cValue = this.hsvToRgb.apply(this, this.convertRgbToNumberArray(value));\n if (type === 'rgba') {\n return this.convertToRgbString(cValue);\n }\n else {\n if (type === 'hex' || type === 'hexa') {\n var hex = this.rgbToHex(cValue);\n return type === 'hex' ? hex.slice(0, 7) : hex;\n }\n else {\n if (type === 'rgb') {\n return this.convertToRgbString(cValue.slice(0, 3));\n }\n else {\n return 'null';\n }\n }\n }\n }\n else {\n value = this.roundValue(value);\n var rgb = this.hexToRgb(value);\n if (type === 'rgb' || type === 'hsv') {\n rgb = rgb.slice(0, 3);\n }\n if (type === 'rgba' || type === 'rgb') {\n return this.convertToRgbString(rgb);\n }\n else {\n if (type === 'hsva' || type === 'hsv') {\n return this.convertToHsvString(this.rgbToHsv.apply(this, rgb));\n }\n else {\n if (type === 'hex') {\n return value.slice(0, 7);\n }\n else {\n if (type === 'a') {\n return rgb[3].toString();\n }\n else {\n return 'null';\n }\n }\n }\n }\n }\n }\n };\n /**\n * To show/hide ColorPicker popup based on current state of the SplitButton.\n * @method toggle\n * @return {void}\n */\n ColorPicker.prototype.toggle = function () {\n this.splitBtn.toggle();\n };\n /**\n * Get component name.\n * @returns string\n * @private\n */\n ColorPicker.prototype.getModuleName = function () {\n return 'colorpicker';\n };\n /**\n * Gets the properties to be maintained in the persisted state.\n * @return {string}\n */\n ColorPicker.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n ColorPicker.prototype.wireEvents = function () {\n if (this.isPicker()) {\n var dragHandler = this.getDragHandler();\n EventHandler.add(dragHandler, 'keydown', this.pickerKeyDown, this);\n EventHandler.add(this.getHsvContainer(), 'mousedown touchstart', this.handlerDown, this);\n if (this.modeSwitcher || this.showButtons) {\n this.addCtrlSwitchEvent();\n }\n EventHandler.add(select('.' + PREVIOUS, this.container), 'click', this.previewHandler, this);\n }\n else {\n EventHandler.add(this.container, 'click', this.paletteClickHandler, this);\n EventHandler.add(this.container, 'keydown', this.paletteKeyDown, this);\n }\n };\n ColorPicker.prototype.addCtrlSwitchEvent = function () {\n EventHandler.add(select('.' + CTRLSWITCH, this.container), 'click', this.btnClickHandler, this);\n };\n ColorPicker.prototype.pickerKeyDown = function (e) {\n switch (e.keyCode) {\n case 39:\n this.handlerDragPosition(1, this.enableRtl ? -1 : 1, e);\n break;\n case 37:\n this.handlerDragPosition(1, this.enableRtl ? 1 : -1, e);\n break;\n case 38:\n this.handlerDragPosition(2, 1, e);\n break;\n case 40:\n this.handlerDragPosition(2, -1, e);\n break;\n case 13:\n e.preventDefault();\n var cValue = this.rgbToHex(this.rgb);\n this.enterKeyHandler(cValue, e);\n }\n };\n ColorPicker.prototype.enterKeyHandler = function (value, e) {\n this.triggerChangeEvent(value);\n if (!this.inline) {\n this.closePopup(e);\n this.splitBtn.element.focus();\n }\n };\n ColorPicker.prototype.closePopup = function (e) {\n var beforeCloseArgs = { element: this.container, event: e, cancel: false };\n this.trigger('beforeClose', beforeCloseArgs);\n if (!beforeCloseArgs.cancel) {\n this.toggle();\n this.onPopupClose();\n }\n };\n ColorPicker.prototype.triggerChangeEvent = function (value) {\n var hex = value.slice(0, 7);\n this.trigger('change', {\n currentValue: { hex: hex, rgba: this.convertToRgbString(this.rgb) },\n previousValue: { hex: this.value.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(this.value)) }\n });\n this.setProperties({ 'value': value }, true);\n this.element.value = hex ? hex : '#000000';\n };\n ColorPicker.prototype.handlerDragPosition = function (prob, value, e) {\n e.preventDefault();\n this.hsv[prob] += value * (e.ctrlKey ? 1 : 3);\n if (this.hsv[prob] < 0) {\n this.hsv[prob] = 0;\n }\n this.updateHsv();\n this.convertToOtherFormat(true);\n };\n ColorPicker.prototype.handlerDown = function (e) {\n e.preventDefault();\n var x;\n var y;\n if (e.type === 'mousedown') {\n this.clientX = Math.abs(e.pageX - pageXOffset);\n this.clientY = Math.abs(e.pageY - pageYOffset);\n this.setTooltipOffset(8);\n }\n else {\n this.clientX = Math.abs(e.changedTouches[0].pageX - pageXOffset);\n this.clientY = Math.abs(e.changedTouches[0].pageY - pageYOffset);\n this.setTooltipOffset(-8);\n }\n this.setHsv(this.clientX, this.clientY);\n this.getDragHandler().style.transition = 'left .4s cubic-bezier(.25, .8, .25, 1), top .4s cubic-bezier(.25, .8, .25, 1)';\n this.updateHsv();\n this.convertToOtherFormat();\n this.getDragHandler().focus();\n EventHandler.add(document, 'mousemove touchmove', this.handlerMove, this);\n EventHandler.add(document, 'mouseup touchend', this.handlerEnd, this);\n };\n ColorPicker.prototype.handlerMove = function (e) {\n if (e.type !== 'touchmove') {\n e.preventDefault();\n }\n var x;\n var y;\n if (e.type === 'mousemove') {\n x = Math.abs(e.pageX - pageXOffset);\n y = Math.abs(e.pageY - pageYOffset);\n }\n else {\n x = Math.abs(e.changedTouches[0].pageX - pageXOffset);\n y = Math.abs(e.changedTouches[0].pageY - pageYOffset);\n }\n this.setHsv(x, y);\n var dragHandler = this.getDragHandler();\n var left = parseInt(dragHandler.style.left, 10);\n var top = parseInt(dragHandler.style.top, 10);\n this.updateHsv();\n this.convertToOtherFormat();\n this.getTooltipInst().refresh(dragHandler);\n if (!this.tooltipEle.style.transform) {\n if (Math.abs(this.clientX - x) > 8 || Math.abs(this.clientY - y) > 8) {\n select('.' + HSVAREA, this.container).style.cursor = 'pointer';\n dragHandler.style.transition = 'none';\n if (!this.inline) {\n this.tooltipEle.style.zIndex = (parseInt(this.getPopupEle().style.zIndex, 10) + 1).toString();\n }\n this.tooltipEle.style.transform = 'rotate(45deg)';\n dragHandler.classList.add('e-hide-handler');\n }\n }\n };\n ColorPicker.prototype.setHsv = function (clientX, clientY) {\n var ele = select('.' + HSVAREA, this.container);\n var position = ele.getBoundingClientRect();\n if (this.enableRtl) {\n clientX = clientX > position.right ? 0 : Math.abs(clientX - position.right);\n }\n else {\n clientX = clientX > position.left ? Math.abs(clientX - position.left) : 0;\n }\n clientY = clientY > position.top ? Math.abs(clientY - position.top) : 0;\n this.hsv[2] = Math.round(Number(100 * (ele.offsetHeight -\n Math.max(0, Math.min(ele.offsetHeight, (clientY - ele.offsetTop)))) / ele.offsetHeight) * 10) / 10;\n this.hsv[1] =\n Math.round(Number(100 * (Math.max(0, Math.min(ele.offsetWidth, (clientX - ele.offsetLeft)))) / ele.offsetWidth) * 10) / 10;\n };\n ColorPicker.prototype.handlerEnd = function (e) {\n if (e.type !== 'touchend') {\n e.preventDefault();\n }\n EventHandler.remove(document, 'mousemove touchmove', this.handlerMove);\n EventHandler.remove(document, 'mouseup touchend', this.handlerEnd);\n var dragHandler = this.getDragHandler();\n select('.' + HSVAREA, this.container).style.cursor = '';\n if (this.tooltipEle.style.transform) {\n this.tooltipEle.style.transform = '';\n dragHandler.classList.remove('e-hide-handler');\n }\n if (!this.inline && !this.showButtons) {\n this.closePopup(e);\n }\n };\n ColorPicker.prototype.btnClickHandler = function (e) {\n var target = e.target;\n if (closest(target, '.' + MODESWITCH)) {\n e.stopPropagation();\n this.switchToPalette();\n }\n else {\n if (target.classList.contains(APPLY) || target.classList.contains(CANCEL)) {\n this.ctrlBtnClick(target, e);\n }\n }\n };\n ColorPicker.prototype.switchToPalette = function () {\n this.trigger('beforeModeSwitch', { element: this.container, mode: 'Palette' });\n this.unWireEvents();\n this.destroyOtherComp();\n detach(select('.e-slider-preview', this.container));\n if (!this.getWrapper().classList.contains(HIDEVALUE)) {\n remove(select('.' + INPUTWRAPPER, this.container));\n }\n detach(this.getHsvContainer());\n this.createPalette();\n this.firstPaletteFocus();\n this.createInput();\n this.refreshPopupPos();\n this.wireEvents();\n };\n ColorPicker.prototype.refreshPopupPos = function () {\n if (!this.inline) {\n var popupEle = this.getPopupEle();\n popupEle.style.left = formatUnit(0 + pageXOffset);\n popupEle.style.top = formatUnit(0 + pageYOffset);\n this.getPopupInst().refreshPosition(this.splitBtn.element.parentElement);\n }\n };\n ColorPicker.prototype.formatSwitchHandler = function (e) {\n var target = e.target.parentElement;\n if (this.isRgb) {\n this.updateValue(this.hsv, true, 3, [360, 100, 100]);\n this.isRgb = false;\n }\n else {\n this.updateValue(this.rgb, true, 2);\n this.isRgb = true;\n }\n };\n ColorPicker.prototype.updateValue = function (value, format, idx, max) {\n var clsName = ['e-rh-value', 'e-gs-value', 'e-bv-value'];\n var inst;\n for (var i = 0, len = clsName.length; i < len; i++) {\n inst = getInstance(select('.' + clsName[i], this.container), NumericTextBox);\n inst.value = Math.round(value[i]);\n if (format) {\n inst.placeholder = clsName[i].substr(idx, 1).toUpperCase();\n inst.max = max ? max[i] : 255;\n }\n inst.dataBind();\n }\n };\n ColorPicker.prototype.previewHandler = function (e) {\n var target = e.target;\n var pValue = this.rgbToHex(this.rgb);\n this.rgb = this.convertRgbToNumberArray(target.style.backgroundColor);\n if (!this.rgb[3]) {\n this.rgb[3] = 1;\n }\n var cValue = this.rgbToHex(this.rgb);\n var hsv = this.rgbToHsv.apply(this, this.rgb);\n if (hsv[0] !== this.hsv[0]) {\n this.hueSlider.setProperties({ 'value': hsv[0] }, true);\n this.hueSlider.refresh();\n }\n this.setHsvContainerBg(hsv[0]);\n if (this.enableOpacity && hsv[3] !== this.hsv[3]) {\n this.opacitySlider.setProperties({ 'value': hsv[3] * 100 }, true);\n this.opacitySlider.refresh();\n this.updateOpacitySliderBg();\n }\n this.hsv = hsv;\n this.setHandlerPosition();\n this.updateInput(cValue);\n select('.' + PREVIEW + ' .' + CURRENT, this.container).style.backgroundColor = this.convertToRgbString(this.rgb);\n this.triggerEvent(cValue, pValue, this.convertToRgbString(this.rgb));\n };\n ColorPicker.prototype.paletteClickHandler = function (e) {\n e.preventDefault();\n var target = e.target;\n if (target.classList.contains(TILE)) {\n this.removeTileSelection();\n this.addTileSelection(target);\n if (target.classList.contains(NOCOLOR)) {\n this.noColorTile();\n }\n else {\n var cValue = target.getAttribute('aria-label');\n var pValue = this.rgbToHex(this.rgb);\n this.rgb = this.hexToRgb(this.roundValue(cValue));\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n if (this.getWrapper().classList.contains(SHOWVALUE)) {\n this.updateInput(cValue);\n }\n this.triggerEvent(cValue, pValue, this.convertToRgbString(this.rgb));\n }\n if (!this.inline && !this.showButtons) {\n this.closePopup(e);\n }\n }\n else {\n if (closest(target, '.' + MODESWITCH)) {\n this.switchToPicker();\n }\n else {\n if (target.classList.contains(APPLY) || target.classList.contains(CANCEL)) {\n this.ctrlBtnClick(target, e);\n }\n else {\n if (this.getWrapper().classList.contains(SHOWVALUE) && closest(target, '.' + FORMATSWITCH)) {\n this.formatSwitchHandler(e);\n }\n }\n }\n }\n };\n ColorPicker.prototype.noColorTile = function (isKey) {\n if (isKey === void 0) { isKey = false; }\n var pValue = this.rgbToHex(this.rgb);\n this.rgb = [];\n this.hsv = [];\n this.triggerEvent('', pValue, '', isKey);\n };\n ColorPicker.prototype.switchToPicker = function () {\n var wrapper = this.getWrapper();\n this.trigger('beforeModeSwitch', { element: this.container, mode: 'Picker' });\n this.unWireEvents();\n ([].slice.call(selectAll('.' + PALETTES, this.container))).forEach(function (ele) {\n detach(ele);\n });\n if (wrapper.classList.contains(SHOWVALUE)) {\n detach(select('.' + INPUTWRAPPER, this.container));\n }\n this.container.style.width = '';\n var grpEle = select('.e-custom-palette', this.container);\n if (this.presetColors) {\n remove(grpEle);\n }\n this.createPicker();\n this.getDragHandler().focus();\n this.createInput();\n this.refreshPopupPos();\n this.wireEvents();\n };\n ColorPicker.prototype.ctrlBtnClick = function (ele, e) {\n if (ele.classList.contains(APPLY)) {\n var cValue = this.rgbToHex(this.rgb);\n this.triggerChangeEvent(cValue);\n }\n if (!this.inline) {\n this.closePopup(e);\n this.splitBtn.element.focus();\n }\n };\n ColorPicker.prototype.paletteKeyDown = function (e) {\n var target = e.target;\n if (!target.classList.contains(PALETTES)) {\n return;\n }\n var selectedEle;\n var idx;\n var tiles = [].slice.call(selectAll('.' + TILE, target));\n var prevSelectedEle = (tiles.filter(function (tile) { return tile.classList.contains('e-selected'); })).pop();\n switch (!e.altKey && e.keyCode) {\n case 39:\n e.preventDefault();\n selectedEle = prevSelectedEle ? tiles[this.tilePosition(tiles, prevSelectedEle, this.enableRtl ? -1 : 1)]\n : tiles[this.enableRtl ? tiles.length - 1 : 0];\n this.keySelectionChanges(selectedEle);\n break;\n case 37:\n e.preventDefault();\n selectedEle = prevSelectedEle ? tiles[this.tilePosition(tiles, prevSelectedEle, this.enableRtl ? 1 : -1)]\n : tiles[this.enableRtl ? 0 : tiles.length - 1];\n this.keySelectionChanges(selectedEle);\n break;\n case 38:\n e.preventDefault();\n idx = prevSelectedEle ? this.tilePosition(tiles, prevSelectedEle, -this.columns) : 0;\n selectedEle = tiles[idx] ? tiles[idx] : tiles[idx - this.columns];\n this.keySelectionChanges(selectedEle);\n break;\n case 40:\n e.preventDefault();\n idx = prevSelectedEle ? this.tilePosition(tiles, prevSelectedEle, this.columns) : tiles.length - 1;\n if (tiles[idx]) {\n selectedEle = tiles[idx];\n }\n else {\n idx %= tiles.length;\n idx += tiles[tiles.length - 1].parentElement.childElementCount;\n selectedEle = tiles[idx];\n }\n this.keySelectionChanges(selectedEle);\n break;\n case 13:\n e.preventDefault();\n if (prevSelectedEle) {\n var cValue = prevSelectedEle.getAttribute('aria-label');\n this.enterKeyHandler(cValue ? cValue : '', e);\n }\n }\n };\n ColorPicker.prototype.keySelectionChanges = function (newEle) {\n this.removeTileSelection();\n this.addTileSelection(newEle);\n if (newEle.classList.contains(NOCOLOR)) {\n this.noColorTile(true);\n }\n else {\n var cValue = newEle.getAttribute('aria-label');\n var pValue = this.rgbToHex(this.rgb);\n this.rgb = this.hexToRgb(cValue);\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n if (this.getWrapper().classList.contains(SHOWVALUE)) {\n this.updateInput(cValue);\n }\n this.triggerEvent(cValue, pValue, this.convertToRgbString(this.rgb), true);\n }\n };\n ColorPicker.prototype.tilePosition = function (items, element, cIdx) {\n items = Array.prototype.slice.call(items);\n var n = items.length;\n var emptyCount = this.columns - items[n - 1].parentElement.childElementCount;\n var idx = items.indexOf(element);\n idx += cIdx;\n idx < 0 ? idx += n + emptyCount : idx %= n + emptyCount;\n return idx;\n };\n ColorPicker.prototype.inputHandler = function (e) {\n var target = e.target;\n if (!target.value.length) {\n return;\n }\n var hsv;\n var pValue;\n var label = select('.e-float-text', target.parentElement).textContent;\n switch (label) {\n case 'HEX':\n var value = '';\n if ((target.value[0] === '#' && target.value.length !== 5) || (target.value[0] !== '#' && target.value.length !== 4)) {\n value = this.roundValue(target.value);\n }\n if (value.length === 9) {\n pValue = this.rgbToHex(this.rgb);\n this.rgb = this.hexToRgb(value + value.substr(-2));\n this.inputValueChange(this.rgbToHsv.apply(this, this.rgb), pValue, target.value);\n }\n else {\n return;\n }\n break;\n case 'R':\n if (this.rgb[0] !== Number(target.value)) {\n pValue = this.rgbToHex(this.rgb);\n this.rgb[0] = Number(target.value);\n hsv = this.rgbToHsv.apply(this, this.rgb);\n this.inputValueChange(hsv, pValue);\n }\n break;\n case 'G':\n if (this.rgb[1] !== Number(target.value)) {\n pValue = this.rgbToHex(this.rgb);\n this.rgb[1] = Number(target.value);\n hsv = this.rgbToHsv.apply(this, this.rgb);\n this.inputValueChange(hsv, pValue);\n }\n break;\n case 'B':\n if (this.rgb[2] !== Number(target.value)) {\n pValue = this.rgbToHex(this.rgb);\n this.rgb[2] = Number(target.value);\n hsv = this.rgbToHsv.apply(this, this.rgb);\n this.inputValueChange(hsv, pValue);\n }\n break;\n case 'H':\n this.hueSlider.value = Number(target.value);\n break;\n case 'S':\n if (this.hsv[1] !== Number(target.value)) {\n this.hsv[1] = Number(target.value);\n this.updateHsv();\n this.convertToOtherFormat();\n }\n break;\n case 'V':\n if (this.hsv[2] !== Number(target.value)) {\n this.hsv[2] = Number(target.value);\n this.updateHsv();\n this.convertToOtherFormat();\n }\n break;\n case 'A':\n this.opacitySlider.value = Number(target.value);\n break;\n }\n };\n ColorPicker.prototype.inputValueChange = function (hsv, pValue, value) {\n if (hsv[0] !== this.hsv[0]) {\n this.hueSlider.setProperties({ 'value': hsv[0] }, true);\n this.hueSlider.refresh();\n this.setHsvContainerBg(hsv[0]);\n }\n this.hsv = hsv;\n var cValue = this.rgbToHex(this.rgb);\n this.setHandlerPosition();\n this.updateInput(value ? value : cValue);\n var rgba = this.convertToRgbString(this.rgb);\n this.updatePreview(rgba);\n this.triggerEvent(cValue, pValue, rgba);\n };\n ColorPicker.prototype.triggerEvent = function (cValue, pValue, rgba, isKey) {\n if (isKey === void 0) { isKey = false; }\n var hex = cValue.slice(0, 7);\n var eventArgs = {\n currentValue: { hex: hex, rgba: rgba },\n previousValue: { hex: pValue.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(pValue)) }\n };\n if (!this.showButtons && !isKey) {\n eventArgs.previousValue = { hex: this.value.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(this.value)) };\n this.trigger('change', eventArgs);\n this.setProperties({ 'value': cValue }, true);\n this.element.value = hex ? hex : '#000000';\n }\n else {\n this.trigger('select', eventArgs);\n }\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it maintains the initial input element from the DOM.\n * @method destroy\n * @return {void}\n */\n ColorPicker.prototype.destroy = function () {\n var _this = this;\n var wrapper = this.getWrapper();\n _super.prototype.destroy.call(this);\n ['tabindex', 'spellcheck'].forEach(function (attr) { _this.element.removeAttribute(attr); });\n if (this.inline) {\n this.unWireEvents();\n this.destroyOtherComp();\n }\n else {\n if (this.isPopupOpen()) {\n this.unWireEvents();\n this.destroyOtherComp();\n }\n this.splitBtn.destroy();\n this.splitBtn = null;\n }\n this.tileRipple();\n this.tileRipple = null;\n this.ctrlBtnRipple();\n this.ctrlBtnRipple = null;\n detach(this.element.nextElementSibling);\n wrapper.parentElement.insertBefore(this.element, wrapper);\n detach(wrapper);\n this.container = null;\n };\n ColorPicker.prototype.destroyOtherComp = function () {\n if (this.isPicker()) {\n this.hueSlider.destroy();\n if (this.enableOpacity) {\n this.opacitySlider.destroy();\n this.opacitySlider = null;\n }\n this.hueSlider = null;\n var tooltipInst = this.getTooltipInst();\n tooltipInst.close();\n tooltipInst.destroy();\n this.tooltipEle = null;\n }\n };\n ColorPicker.prototype.isPopupOpen = function () {\n return this.getPopupEle().classList.contains('e-popup-open');\n };\n ColorPicker.prototype.unWireEvents = function () {\n if (this.isPicker()) {\n var wrapper = this.getWrapper();\n var dragHandler = this.getDragHandler();\n EventHandler.remove(dragHandler, 'keydown', this.pickerKeyDown);\n EventHandler.remove(this.getHsvContainer(), 'mousedown touchstart', this.handlerDown);\n if (this.modeSwitcher || this.showButtons) {\n EventHandler.remove(select('.' + CTRLSWITCH, this.container), 'click', this.btnClickHandler);\n }\n EventHandler.remove(select('.' + PREVIOUS, this.container), 'click', this.previewHandler);\n }\n else {\n EventHandler.remove(this.container, 'click', this.paletteClickHandler);\n EventHandler.remove(this.container, 'keydown', this.paletteKeyDown);\n }\n };\n ColorPicker.prototype.roundValue = function (value) {\n if (!value) {\n return '';\n }\n if (value[0] !== '#') {\n value = '#' + value;\n }\n var len = value.length;\n if (len === 4) {\n value += 'f';\n len = 5;\n }\n if (len === 5) {\n var tempValue = '';\n for (var i = 1, len_1 = value.length; i < len_1; i++) {\n tempValue += (value.charAt(i) + value.charAt(i));\n }\n value = '#' + tempValue;\n len = 9;\n }\n if (len === 7) {\n value += 'ff';\n }\n return value;\n };\n ColorPicker.prototype.hexToRgb = function (hex) {\n if (!hex) {\n return [];\n }\n hex = hex.trim();\n if (hex.length !== 9) {\n hex = this.roundValue(hex);\n }\n var opacity = Number((parseInt(hex.slice(-2), 16) / 255).toFixed(2));\n hex = hex.slice(1, 7);\n var bigInt = parseInt(hex, 16);\n var h = [];\n h.push((bigInt >> 16) & 255);\n h.push((bigInt >> 8) & 255);\n h.push(bigInt & 255);\n h.push(opacity);\n return h;\n };\n ColorPicker.prototype.rgbToHsv = function (r, g, b, opacity) {\n if (this.rgb && !this.rgb.length) {\n return [];\n }\n r /= 255;\n g /= 255;\n b /= 255;\n var max = Math.max(r, g, b);\n var min = Math.min(r, g, b);\n var h;\n var s;\n var v = max;\n var d = max - min;\n s = max === 0 ? 0 : d / max;\n if (max === min) {\n h = 0;\n }\n else {\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n }\n h /= 6;\n }\n var hsv = [Math.round(h * 360), Math.round(s * 1000) / 10, Math.round(v * 1000) / 10];\n if (!isNullOrUndefined(opacity)) {\n hsv.push(opacity);\n }\n return hsv;\n };\n ColorPicker.prototype.hsvToRgb = function (h, s, v, opacity) {\n var r;\n var g;\n var b;\n var i;\n var f;\n var p;\n var q;\n var t;\n s /= 100;\n v /= 100;\n if (s === 0) {\n r = g = b = v;\n return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), opacity];\n }\n h /= 60;\n i = Math.floor(h);\n f = h - i;\n p = v * (1 - s);\n q = v * (1 - s * f);\n t = v * (1 - s * (1 - f));\n switch (i) {\n case 0:\n r = v;\n g = t;\n b = p;\n break;\n case 1:\n r = q;\n g = v;\n b = p;\n break;\n case 2:\n r = p;\n g = v;\n b = t;\n break;\n case 3:\n r = p;\n g = q;\n b = v;\n break;\n case 4:\n r = t;\n g = p;\n b = v;\n break;\n default:\n r = v;\n g = p;\n b = q;\n }\n var rgb = [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];\n if (!isNullOrUndefined(opacity)) {\n rgb.push(opacity);\n }\n return rgb;\n };\n ColorPicker.prototype.rgbToHex = function (rgb) {\n return rgb.length ? ('#' + this.hex(rgb[0]) + this.hex(rgb[1]) + this.hex(rgb[2]) +\n (!isNullOrUndefined(rgb[3]) ? (rgb[3] !== 0 ? (Math.round(rgb[3] * 255) + 0x10000).toString(16).substr(-2) : '00') : '')) : '';\n };\n ColorPicker.prototype.hex = function (x) {\n return ('0' + x.toString(16)).slice(-2);\n };\n ColorPicker.prototype.changeModeSwitcherProp = function (prop) {\n var ctrlSwitchWrapper = select('.' + CTRLSWITCH, this.container);\n if (prop) {\n if (ctrlSwitchWrapper) {\n this.appendModeSwitchBtn();\n }\n else {\n this.createCtrlBtn();\n if (this.isPicker() && !this.disabled) {\n this.addCtrlSwitchEvent();\n }\n }\n }\n else {\n if (ctrlSwitchWrapper) {\n if (this.showButtons) {\n detach(select('.' + MODESWITCH, ctrlSwitchWrapper));\n }\n else {\n remove(ctrlSwitchWrapper);\n }\n }\n }\n };\n ColorPicker.prototype.changeShowBtnProps = function (prop) {\n var ctrlBtnWrapper = select('.' + CTRLSWITCH, this.container);\n if (prop) {\n if (ctrlBtnWrapper) {\n remove(ctrlBtnWrapper);\n }\n this.createCtrlBtn();\n if (this.isPicker() && !this.disabled) {\n this.addCtrlSwitchEvent();\n }\n }\n else {\n if (this.modeSwitcher) {\n detach(select('.' + CTRLBTN, ctrlBtnWrapper));\n }\n else {\n remove(ctrlBtnWrapper);\n }\n }\n };\n ColorPicker.prototype.changeValueProp = function (newProp) {\n if (this.isPicker()) {\n this.rgb = this.hexToRgb(newProp);\n this.hsv = this.rgbToHsv.apply(this, this.rgb);\n this.setHandlerPosition();\n detach(closest(this.hueSlider.element, '.e-slider-preview'));\n this.createSlider();\n this.setHsvContainerBg();\n this.updateInput(newProp);\n }\n else {\n this.removeTileSelection();\n this.addTileSelection(select('span[aria-label=\"' + this.roundValue(newProp) + '\"]', this.container));\n }\n this.element.value = newProp.slice(0, 7);\n };\n ColorPicker.prototype.setInputEleProps = function (prop) {\n remove(select('.' + INPUTWRAPPER, this.container));\n this.createInput();\n };\n ColorPicker.prototype.changeDisabledProp = function (newProp) {\n if (this.isPicker()) {\n this.hueSlider.enabled = !newProp;\n this.opacitySlider.enabled = !newProp;\n this.setInputEleProps(newProp);\n }\n if (newProp) {\n this.toggleDisabled(true);\n this.unWireEvents();\n }\n else {\n this.toggleDisabled(false);\n this.wireEvents();\n }\n };\n ColorPicker.prototype.changeCssClassProps = function (newProp, oldProp) {\n var wrapper = this.getWrapper();\n var popupWrapper = this.getPopupEle();\n if (oldProp) {\n removeClass([wrapper, popupWrapper], oldProp.split(' '));\n }\n if (newProp) {\n addClass([wrapper, popupWrapper], newProp.split(' '));\n }\n };\n ColorPicker.prototype.changeRtlProps = function (newProp) {\n if (newProp) {\n addClass([this.getWrapper()], 'e-rtl');\n }\n else {\n removeClass([this.getWrapper()], 'e-rtl');\n }\n };\n ColorPicker.prototype.changePaletteProps = function () {\n detach(this.container.children[0]);\n this.container.style.width = '';\n this.createPalette();\n };\n ColorPicker.prototype.changeOpacityProps = function (newProp) {\n var wrapper = this.getWrapper();\n if (newProp) {\n removeClass([this.container.parentElement], HIDEOPACITY);\n this.createOpacitySlider(select('.e-colorpicker-slider', this.container).appendChild(this.createElement('div', { className: 'e-opacity-slider' })));\n if (!wrapper.classList.contains(HIDEVALUE) && !wrapper.classList.contains(HIDERGBA)) {\n this.appendOpacityValue(select('.e-input-container', this.container));\n }\n }\n else {\n addClass([this.container.parentElement], HIDEOPACITY);\n this.opacitySlider.destroy();\n remove(this.opacitySlider.element);\n this.opacitySlider = null;\n if (!wrapper.classList.contains(HIDEVALUE) && !wrapper.classList.contains(HIDERGBA)) {\n remove(select('.' + OPACITY, this.container).parentElement);\n }\n }\n };\n /**\n * Called internally if any of the property value changed.\n * @param {ColorPickerModel} newProp\n * @param {ColorPickerModel} oldProp\n * @returns void\n * @private\n */\n ColorPicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n var _this = this;\n var wrapper = this.getWrapper();\n if (!this.inline && isNullOrUndefined(newProp.inline)) {\n var otherCompModel = ['disabled', 'enableRtl'];\n this.splitBtn.setProperties(getModel(newProp, otherCompModel));\n if (!this.isPopupOpen()) {\n if (newProp.value) {\n select('.' + SPLITPREVIEW, this.splitBtn.element).style.backgroundColor = newProp.value;\n }\n this.changeCssClassProps(newProp.cssClass, oldProp.cssClass);\n this.changeRtlProps(newProp.enableRtl);\n return;\n }\n }\n var _loop_1 = function (prop) {\n switch (prop) {\n case 'inline':\n if (newProp.inline) {\n this_1.getWrapper().appendChild(this_1.container);\n this_1.splitBtn.destroy();\n detach(this_1.element.nextElementSibling);\n if (!this_1.container.children.length) {\n this_1.createWidget();\n }\n }\n else {\n this_1.destroyOtherComp();\n this_1.unWireEvents();\n this_1.container.innerHTML = '';\n this_1.createSplitBtn();\n }\n break;\n case 'cssClass':\n this_1.changeCssClassProps(newProp.cssClass, oldProp.cssClass);\n var props = newProp.cssClass.split(' ').concat(oldProp.cssClass.split(' '));\n props = props.reduce(function (a, b) { if (a.indexOf(b) < 0) {\n a.push(b);\n } return a; }, []);\n var count_1 = 0;\n props.forEach(function (cls) {\n if (count_1 === 0 &&\n (cls === HIDEVALUE || cls === HIDEVALUESWITCH || cls === SHOWVALUE || cls === HIDEHEX || cls === HIDERGBA)) {\n var inputWrap = select('.' + INPUTWRAPPER, _this.container);\n if (inputWrap) {\n remove(select('.' + INPUTWRAPPER, _this.container));\n }\n _this.createInput();\n count_1++;\n }\n });\n break;\n case 'enableRtl':\n if (this_1.isPicker()) {\n this_1.hueSlider.enableRtl = newProp.enableRtl;\n if (this_1.enableOpacity) {\n this_1.opacitySlider.enableRtl = newProp.enableRtl;\n }\n this_1.setInputEleProps(newProp.enableRtl);\n }\n this_1.changeRtlProps(newProp.enableRtl);\n break;\n case 'disabled':\n this_1.changeDisabledProp(newProp.disabled);\n break;\n case 'value':\n this_1.changeValueProp(newProp.value);\n break;\n case 'showButtons':\n this_1.changeShowBtnProps(newProp.showButtons);\n break;\n case 'mode':\n if (newProp.mode === 'Picker') {\n this_1.switchToPicker();\n }\n else {\n this_1.switchToPalette();\n }\n break;\n case 'modeSwitcher':\n this_1.changeModeSwitcherProp(newProp.modeSwitcher);\n break;\n case 'columns':\n case 'presetColors':\n if (!this_1.isPicker()) {\n this_1.changePaletteProps();\n }\n break;\n case 'noColor':\n if (newProp.noColor) {\n if (this_1.mode === 'Palette' && !this_1.modeSwitcher) {\n this_1.setNoColor();\n }\n }\n else {\n this_1.changePaletteProps();\n }\n break;\n case 'enableOpacity':\n this_1.changeOpacityProps(newProp.enableOpacity);\n break;\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n _loop_1(prop);\n }\n };\n __decorate([\n Property('#008000ff')\n ], ColorPicker.prototype, \"value\", void 0);\n __decorate([\n Property('')\n ], ColorPicker.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], ColorPicker.prototype, \"disabled\", void 0);\n __decorate([\n Property(false)\n ], ColorPicker.prototype, \"enableRtl\", void 0);\n __decorate([\n Property('Picker')\n ], ColorPicker.prototype, \"mode\", void 0);\n __decorate([\n Property(true)\n ], ColorPicker.prototype, \"modeSwitcher\", void 0);\n __decorate([\n Property(null)\n ], ColorPicker.prototype, \"presetColors\", void 0);\n __decorate([\n Property(true)\n ], ColorPicker.prototype, \"showButtons\", void 0);\n __decorate([\n Property(10)\n ], ColorPicker.prototype, \"columns\", void 0);\n __decorate([\n Property(false)\n ], ColorPicker.prototype, \"inline\", void 0);\n __decorate([\n Property(false)\n ], ColorPicker.prototype, \"noColor\", void 0);\n __decorate([\n Property(false)\n ], ColorPicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(true)\n ], ColorPicker.prototype, \"enableOpacity\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"beforeTileRender\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"beforeModeSwitch\", void 0);\n __decorate([\n Event()\n ], ColorPicker.prototype, \"created\", void 0);\n ColorPicker = __decorate([\n NotifyPropertyChanges\n ], ColorPicker);\n return ColorPicker;\n}(Component));\nexport { ColorPicker };\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 } from '@syncfusion/ej2-base';\nimport { Input } from '../input/input';\nvar ROOT = 'e-textbox';\nvar CONTROL = 'e-control';\nvar HIDE_CLEAR = 'e-clear-icon-hide';\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 function TextBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.previousValue = null;\n return _this;\n }\n /**\n * Calls internally if any of the property value is changed.\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.element, this.floatLabelType, this.placeholder);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.element, this.floatLabelType, this.textboxWrapper.container);\n break;\n case 'value':\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.element, this.floatLabelType, this.showClearButton);\n this.raiseChangeEvent();\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.element);\n break;\n case 'type':\n this.element.setAttribute('type', this.type);\n this.raiseChangeEvent();\n break;\n case 'showClearButton':\n Input.setClearButton(this.showClearButton, this.element, this.textboxWrapper);\n this.bindClearEvent();\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.textboxWrapper.container]);\n break;\n case 'placeholder':\n Input.setPlaceholder(this.placeholder, this.element);\n break;\n case 'cssClass':\n Input.setCssClass(this.cssClass, [this.textboxWrapper.container]);\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.element);\n break;\n }\n }\n };\n /**\n * Gets 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 /* istanbul ignore next */\n if (this.element.tagName === 'EJS-TEXTBOX') {\n var ejInstance = getValue('ej2_instances', this.element);\n var inputElement = this.createElement('input');\n var index = 0;\n for (index; index < this.element.attributes.length; index++) {\n inputElement.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);\n inputElement.innerHTML = this.element.innerHTML;\n }\n this.element.appendChild(inputElement);\n this.element = inputElement;\n setValue('ej2_instances', ejInstance, this.element);\n }\n var attributes = this.element.attributes;\n this.checkAttributes(attributes);\n this.element.setAttribute('type', this.type);\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 };\n TextBox.prototype.checkAttributes = function (attrs) {\n for (var i = 0; i < attrs.length; i++) {\n var key = attrs[i].nodeName;\n if (key === 'disabled') {\n this.setProperties({ enabled: false }, true);\n }\n else if (key === 'readonly') {\n this.setProperties({ readonly: true }, true);\n }\n else if (key === 'placeholder') {\n this.setProperties({ placeholder: attrs[i].nodeValue }, true);\n }\n }\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n TextBox.prototype.render = function () {\n this.textboxWrapper = Input.createInput({\n element: this.element,\n floatLabelType: this.floatLabelType,\n properties: {\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n cssClass: this.cssClass,\n readonly: this.readonly,\n placeholder: this.placeholder,\n showClearButton: this.showClearButton\n }\n });\n this.wireEvents();\n if (this.element.value !== '') {\n this.value = this.element.value;\n }\n if (!isNullOrUndefined(this.value)) {\n Input.setValue(this.value, this.element, this.floatLabelType, this.showClearButton);\n }\n };\n TextBox.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, 'input', this.inputHandler, this);\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n if (this.enabled) {\n this.bindClearEvent();\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.element.value === '') &&\n (this.previousValue !== this.element.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 var eventArgs = {\n event: args,\n value: this.element.value,\n previousValue: this.value,\n container: this.textboxWrapper.container\n };\n this.trigger('input', eventArgs);\n };\n TextBox.prototype.changeHandler = function (args) {\n this.setProperties({ value: this.element.value }, true);\n this.raiseChangeEvent(args, true);\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 };\n this.trigger('change', eventArgs);\n this.previousValue = this.value;\n };\n TextBox.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n EventHandler.add(this.textboxWrapper.clearButton, 'mousedown touchstart', this.resetInputHandler, this);\n }\n };\n TextBox.prototype.resetInputHandler = function (event) {\n event.preventDefault();\n if (!(this.textboxWrapper.clearButton.classList.contains(HIDE_CLEAR))) {\n Input.setValue('', this.element, this.floatLabelType, this.showClearButton);\n this.value = '';\n }\n };\n TextBox.prototype.unWireEvents = function () {\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'blur', this.focusOutHandler);\n EventHandler.remove(this.element, 'input', this.inputHandler);\n EventHandler.remove(this.element, 'change', this.changeHandler);\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 * @method destroy\n * @return {void}\n */\n TextBox.prototype.destroy = function () {\n this.unWireEvents();\n this.textboxWrapper.container.parentElement.appendChild(this.cloneElement);\n detach(this.textboxWrapper.container);\n this.textboxWrapper = null;\n this.cloneElement.classList.remove(ROOT, CONTROL);\n _super.prototype.destroy.call(this);\n };\n /**\n * Gets the properties to be maintained in the persisted state.\n * @return {string}\n */\n TextBox.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Adding the multiple attributes as key-value pair to the TextBox element.\n * @param { { [key: string]: string } } attributes - Specifies the attributes to be add to TextBox element.\n * @return {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.element, this.floatLabelType, this.textboxWrapper.container);\n }\n else if (key === 'readonly') {\n this.setProperties({ readonly: true }, true);\n Input.setReadonly(this.readonly, this.element);\n }\n else if (key === 'class') {\n this.element.classList.add(attributes[key]);\n }\n else if (key === 'placeholder') {\n this.setProperties({ placeholder: attributes[key] }, true);\n Input.setPlaceholder(this.placeholder, this.element);\n }\n else {\n this.element.setAttribute(key, attributes[key]);\n }\n }\n };\n /**\n * Removing the multiple attributes as key-value pair to the TextBox element.\n * @param { string[] } attributes - Specifies the attributes name to be removed from TextBox element.\n * @return {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.element, this.floatLabelType, this.textboxWrapper.container);\n }\n else if (key === 'readonly') {\n this.setProperties({ readonly: false }, true);\n Input.setReadonly(this.readonly, this.element);\n }\n else if (key === 'placeholder') {\n this.setProperties({ placeholder: null }, true);\n Input.setPlaceholder(this.placeholder, this.element);\n }\n else {\n this.element.removeAttribute(key);\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(false)\n ], TextBox.prototype, \"enableRtl\", 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 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})();\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, Internationalization } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, L10n } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { cldrData, getDefaultDateObject, rippleEffect } from '@syncfusion/ej2-base';\nimport { removeClass, detach, closest, addClass, attributes } from '@syncfusion/ej2-base';\nimport { getValue, getUniqueID, extend, Browser } from '@syncfusion/ej2-base';\nimport { Property, Event, isNullOrUndefined, throwError } from '@syncfusion/ej2-base';\n//class constant defination.\nvar OTHERMONTH = 'e-other-month';\nvar ROOT = 'e-calendar';\nvar DEVICE = 'e-device';\nvar HEADER = 'e-header';\nvar RTL = 'e-rtl';\nvar CONTENT = 'e-content';\nvar YEAR = 'e-year';\nvar MONTH = 'e-month';\nvar DECADE = 'e-decade';\nvar ICON = 'e-icons';\nvar PREVICON = 'e-prev';\nvar NEXTICON = 'e-next';\nvar PREVSPAN = 'e-date-icon-prev';\nvar NEXTSPAN = 'e-date-icon-next ';\nvar ICONCONTAINER = 'e-icon-container';\nvar DISABLED = 'e-disabled';\nvar OVERLAY = 'e-overlay';\nvar WEEKEND = 'e-weekend';\nvar WEEKNUMBER = 'e-week-number';\nvar SELECTED = 'e-selected';\nvar FOCUSEDDATE = 'e-focused-date';\nvar OTHERMONTHROW = 'e-month-hide';\nvar TODAY = 'e-today';\nvar TITLE = 'e-title';\nvar LINK = 'e-day';\nvar CELL = 'e-cell';\nvar WEEKHEADER = 'e-week-header';\nvar ZOOMIN = 'e-zoomin';\nvar FOOTER = 'e-footer-container';\nvar BTN = 'e-btn';\nvar FLAT = 'e-flat';\nvar CSS = 'e-css';\nvar PRIMARY = 'e-primary';\nvar dayMilliSeconds = 86400000;\nvar minutesMilliSeconds = 60000;\n/**\n *\n * @private\n */\nvar CalendarBase = /** @class */ (function (_super) {\n __extends(CalendarBase, _super);\n /**\n * Initialized new instance of Calendar Class.\n * Constructor for creating the widget\n * @param {CalendarModel} options?\n * @param {string|HTMLElement} element?\n */\n function CalendarBase(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.effect = '';\n _this.keyConfigs = {\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 altUpArrow: 'alt+uparrow',\n spacebar: 'space',\n altRightArrow: 'alt+rightarrow',\n altLeftArrow: 'alt+leftarrow'\n };\n return _this;\n }\n /**\n * To Initialize the control rendering.\n * @returns void\n * @private\n */\n CalendarBase.prototype.render = function () {\n if (this.calendarMode === 'Islamic') {\n if (+(this.min.setSeconds(0)) === +new Date(1900, 0, 1, 0, 0, 0)) {\n this.min = new Date(1944, 2, 18);\n }\n if (+this.max === +new Date(2099, 11, 31)) {\n this.max = new Date(2069, 10, 16);\n }\n }\n this.globalize = new Internationalization(this.locale);\n if (isNullOrUndefined(this.firstDayOfWeek) || this.firstDayOfWeek > 6 || this.firstDayOfWeek < 0) {\n this.setProperties({ firstDayOfWeek: this.globalize.getFirstDayOfWeek() }, true);\n }\n this.todayDisabled = false;\n this.todayDate = new Date(new Date().setHours(0, 0, 0, 0));\n if (this.getModuleName() === 'calendar') {\n this.element.classList.add(ROOT);\n if (this.enableRtl) {\n this.element.classList.add(RTL);\n }\n if (Browser.isDevice) {\n this.element.classList.add(DEVICE);\n }\n attributes(this.element, {\n 'data-role': 'calendar'\n });\n }\n else {\n this.calendarElement = this.createElement('div');\n this.calendarElement.classList.add(ROOT);\n if (this.enableRtl) {\n this.calendarElement.classList.add(RTL);\n }\n if (Browser.isDevice) {\n this.calendarElement.classList.add(DEVICE);\n }\n attributes(this.calendarElement, {\n 'role': 'calendar'\n });\n }\n this.createHeader();\n this.createContent();\n this.wireEvents();\n };\n CalendarBase.prototype.validateDate = function (value) {\n this.setProperties({ min: this.checkDateValue(new Date('' + this.min)) }, true);\n this.setProperties({ max: this.checkDateValue(new Date('' + this.max)) }, true);\n this.currentDate = this.currentDate ? this.currentDate : new Date(new Date().setHours(0, 0, 0, 0));\n if (!isNullOrUndefined(value) && this.min <= this.max && value >= this.min && value <= this.max) {\n this.currentDate = new Date('' + value);\n }\n };\n CalendarBase.prototype.minMaxUpdate = function (value) {\n if (!(+this.min <= +this.max)) {\n this.setProperties({ min: this.min }, true);\n addClass([this.element], OVERLAY);\n }\n else {\n removeClass([this.element], OVERLAY);\n }\n this.min = isNullOrUndefined(this.min) || !(+this.min) ? this.min = new Date(1900, 0, 1) : this.min;\n this.max = isNullOrUndefined(this.max) || !(+this.max) ? this.max = new Date(2099, 11, 31) : this.max;\n if (+this.min <= +this.max && value && +value <= +this.max && +value >= +this.min) {\n this.currentDate = new Date('' + value);\n }\n else {\n if (+this.min <= +this.max && !value && +this.currentDate > +this.max) {\n this.currentDate = new Date('' + this.max);\n }\n else {\n if (+this.currentDate < +this.min) {\n this.currentDate = new Date('' + this.min);\n }\n }\n }\n };\n CalendarBase.prototype.createHeader = function () {\n var ariaPrevAttrs = {\n 'aria-disabled': 'false',\n 'aria-label': 'previous month'\n };\n var ariaNextAttrs = {\n 'aria-disabled': 'false',\n 'aria-label': 'next month'\n };\n var ariaTitleAttrs = {\n 'aria-atomic': 'true', 'aria-live': 'assertive', 'aria-label': 'title'\n };\n this.headerElement = this.createElement('div', { className: HEADER });\n var iconContainer = this.createElement('div', { className: ICONCONTAINER });\n this.previousIcon = this.createElement('button', { className: '' + PREVICON, attrs: { type: 'button' } });\n rippleEffect(this.previousIcon, {\n duration: 400,\n selector: '.e-prev',\n isCenterRipple: true\n });\n attributes(this.previousIcon, ariaPrevAttrs);\n this.nextIcon = this.createElement('button', { className: '' + NEXTICON, attrs: { type: 'button' } });\n rippleEffect(this.nextIcon, {\n selector: '.e-next',\n duration: 400,\n isCenterRipple: true\n });\n attributes(this.nextIcon, ariaNextAttrs);\n this.headerTitleElement = this.createElement('div', { className: '' + LINK + ' ' + TITLE });\n attributes(this.headerTitleElement, ariaTitleAttrs);\n this.headerElement.appendChild(this.headerTitleElement);\n this.previousIcon.appendChild(this.createElement('span', { className: '' + PREVSPAN + ' ' + ICON }));\n this.nextIcon.appendChild(this.createElement('span', { className: '' + NEXTSPAN + ' ' + ICON }));\n iconContainer.appendChild(this.previousIcon);\n iconContainer.appendChild(this.nextIcon);\n this.headerElement.appendChild(iconContainer);\n if (this.getModuleName() === 'calendar') {\n this.element.appendChild(this.headerElement);\n }\n else {\n this.calendarElement.appendChild(this.headerElement);\n }\n };\n CalendarBase.prototype.createContent = function () {\n this.contentElement = this.createElement('div', { className: CONTENT });\n this.table = this.createElement('table', { attrs: { tabIndex: '0', 'role': 'grid', 'aria-activedescendant': '' } });\n if (this.getModuleName() === 'calendar') {\n this.element.appendChild(this.contentElement);\n }\n else {\n this.calendarElement.appendChild(this.contentElement);\n }\n this.contentElement.appendChild(this.table);\n this.createContentHeader();\n this.createContentBody();\n if (this.showTodayButton) {\n this.createContentFooter();\n }\n };\n CalendarBase.prototype.getCultureValues = function () {\n var culShortNames = [];\n var cldrObj;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrObj = (getValue('days.stand-alone.short', getDefaultDateObject()));\n }\n else {\n cldrObj = (this.getCultureObjects(cldrData, '' + this.locale));\n }\n for (var _i = 0, _a = Object.keys(cldrObj); _i < _a.length; _i++) {\n var obj = _a[_i];\n culShortNames.push(getValue(obj, cldrObj));\n }\n return culShortNames;\n };\n CalendarBase.prototype.createContentHeader = function () {\n if (this.getModuleName() === 'calendar') {\n if (!isNullOrUndefined(this.element.querySelectorAll('.e-content .e-week-header')[0])) {\n detach(this.element.querySelectorAll('.e-content .e-week-header')[0]);\n }\n }\n else {\n if (!isNullOrUndefined(this.calendarElement.querySelectorAll('.e-content .e-week-header')[0])) {\n detach(this.calendarElement.querySelectorAll('.e-content .e-week-header')[0]);\n }\n }\n var daysCount = 6;\n var html = '';\n var shortNames;\n if (this.firstDayOfWeek > 6 || this.firstDayOfWeek < 0) {\n this.setProperties({ firstDayOfWeek: 0 }, true);\n }\n this.tableHeadElement = this.createElement('thead', { className: WEEKHEADER });\n if (this.weekNumber) {\n html += '
| ';\n if (this.getModuleName() === 'calendar') {\n addClass([this.element], '' + WEEKNUMBER);\n }\n else {\n addClass([this.calendarElement], '' + WEEKNUMBER);\n }\n }\n shortNames = this.shiftArray(((this.getCultureValues().length > 0 && this.getCultureValues())), this.firstDayOfWeek);\n for (var days = 0; days <= daysCount; days++) {\n html += '
' + shortNames[days] + ' | ';\n }\n html = '
' + html + '
';\n this.tableHeadElement.innerHTML = html;\n this.table.appendChild(this.tableHeadElement);\n };\n CalendarBase.prototype.createContentBody = function () {\n if (this.getModuleName() === 'calendar') {\n if (!isNullOrUndefined(this.element.querySelectorAll('.e-content tbody')[0])) {\n detach(this.element.querySelectorAll('.e-content tbody')[0]);\n }\n }\n else {\n if (!isNullOrUndefined(this.calendarElement.querySelectorAll('.e-content tbody')[0])) {\n detach(this.calendarElement.querySelectorAll('.e-content tbody')[0]);\n }\n }\n switch (this.start) {\n case 'Year':\n this.renderYears();\n break;\n case 'Decade':\n this.renderDecades();\n break;\n default:\n this.renderMonths();\n }\n };\n CalendarBase.prototype.updateFooter = function () {\n this.todayElement.textContent = this.l10.getConstant('today');\n };\n CalendarBase.prototype.createContentFooter = function () {\n if (this.showTodayButton) {\n var minimum = new Date(+this.min);\n var maximum = new Date(+this.max);\n var l10nLocale = { today: 'Today' };\n this.globalize = new Internationalization(this.locale);\n this.l10 = new L10n(this.getModuleName(), l10nLocale, this.locale);\n this.todayElement = this.createElement('button');\n rippleEffect(this.todayElement);\n this.updateFooter();\n addClass([this.todayElement], [BTN, TODAY, FLAT, PRIMARY, CSS]);\n if ((!(+new Date(minimum.setHours(0, 0, 0, 0)) <= +this.todayDate &&\n +this.todayDate <= +new Date(maximum.setHours(0, 0, 0, 0)))) || (this.todayDisabled)) {\n addClass([this.todayElement], DISABLED);\n }\n this.footer = this.createElement('div', { className: FOOTER });\n this.footer.appendChild(this.todayElement);\n if (this.getModuleName() === 'calendar') {\n this.element.appendChild(this.footer);\n }\n if (this.getModuleName() === 'datepicker') {\n this.calendarElement.appendChild(this.footer);\n }\n if (this.getModuleName() === 'datetimepicker') {\n this.calendarElement.appendChild(this.footer);\n }\n if (!this.todayElement.classList.contains(DISABLED)) {\n EventHandler.add(this.todayElement, 'click', this.todayButtonClick, this);\n }\n }\n };\n CalendarBase.prototype.wireEvents = function () {\n EventHandler.add(this.headerTitleElement, 'click', this.navigateTitle, this);\n if (this.getModuleName() === 'calendar') {\n this.keyboardModule = new KeyboardEvents(this.element, {\n eventName: 'keydown',\n keyAction: this.keyActionHandle.bind(this),\n keyConfigs: this.keyConfigs\n });\n }\n else {\n this.keyboardModule = new KeyboardEvents(this.calendarElement, {\n eventName: 'keydown',\n keyAction: this.keyActionHandle.bind(this),\n keyConfigs: this.keyConfigs\n });\n }\n };\n CalendarBase.prototype.todayButtonClick = function (value) {\n if (this.showTodayButton) {\n if (this.currentView() === this.depth) {\n this.effect = '';\n }\n else {\n this.effect = 'e-zoomin';\n }\n if (this.getViewNumber(this.start) >= this.getViewNumber(this.depth)) {\n this.navigateTo(this.depth, new Date('' + value));\n }\n else {\n this.navigateTo('Month', new Date('' + value));\n }\n }\n };\n // tslint:disable-next-line:max-func-body-length\n CalendarBase.prototype.keyActionHandle = function (e, value, multiSelection) {\n var view = this.getViewNumber(this.currentView());\n var focusedDate = this.tableBodyElement.querySelector('tr td.e-focused-date');\n var selectedDate;\n if (multiSelection) {\n if (!isNullOrUndefined(focusedDate) && +value === parseInt(focusedDate.getAttribute('id').split('_')[0], 10)) {\n selectedDate = focusedDate;\n }\n else {\n selectedDate = this.tableBodyElement.querySelector('tr td.e-selected');\n }\n }\n else {\n selectedDate = this.tableBodyElement.querySelector('tr td.e-selected');\n }\n var depthValue = this.getViewNumber(this.depth);\n var levelRestrict = (view === depthValue && this.getViewNumber(this.start) >= depthValue);\n this.effect = '';\n switch (e.action) {\n case 'moveLeft':\n this.KeyboardNavigate(-1, view, e, this.max, this.min);\n e.preventDefault();\n break;\n case 'moveRight':\n this.KeyboardNavigate(1, view, e, this.max, this.min);\n e.preventDefault();\n break;\n case 'moveUp':\n if (view === 0) {\n this.KeyboardNavigate(-7, view, e, this.max, this.min); // move the current date to the previous seven days.\n }\n else {\n this.KeyboardNavigate(-4, view, e, this.max, this.min); // move the current year to the previous four days.\n }\n e.preventDefault();\n break;\n case 'moveDown':\n if (view === 0) {\n this.KeyboardNavigate(7, view, e, this.max, this.min);\n }\n else {\n this.KeyboardNavigate(4, view, e, this.max, this.min);\n }\n e.preventDefault();\n break;\n case 'select':\n if (e.target === this.todayElement) {\n this.todayButtonClick(value);\n }\n else {\n var element = !isNullOrUndefined(focusedDate) ? focusedDate : selectedDate;\n if (!isNullOrUndefined(element) && !element.classList.contains(DISABLED)) {\n if (levelRestrict) {\n var d = new Date(parseInt('' + (element).id, 0));\n this.selectDate(e, d, (element));\n }\n else {\n this.contentClick(null, --view, (element), value);\n }\n }\n }\n break;\n case 'controlUp':\n this.title();\n e.preventDefault();\n break;\n case 'controlDown':\n if (!isNullOrUndefined(focusedDate) || !isNullOrUndefined(selectedDate) && !levelRestrict) {\n this.contentClick(null, --view, (focusedDate || selectedDate), value);\n }\n e.preventDefault();\n break;\n case 'home':\n this.currentDate = this.firstDay(this.currentDate);\n detach(this.tableBodyElement);\n (view === 0) ? this.renderMonths(e) : ((view === 1) ? this.renderYears(e) : this.renderDecades(e));\n e.preventDefault();\n break;\n case 'end':\n this.currentDate = this.lastDay(this.currentDate, view);\n detach(this.tableBodyElement);\n (view === 0) ? this.renderMonths(e) : ((view === 1) ? this.renderYears(e) : this.renderDecades(e));\n e.preventDefault();\n break;\n case 'pageUp':\n this.addMonths(this.currentDate, -1);\n this.navigateTo('Month', this.currentDate);\n e.preventDefault();\n break;\n case 'pageDown':\n this.addMonths(this.currentDate, 1);\n this.navigateTo('Month', this.currentDate);\n e.preventDefault();\n break;\n case 'shiftPageUp':\n this.addYears(this.currentDate, -1);\n this.navigateTo('Month', this.currentDate);\n e.preventDefault();\n break;\n case 'shiftPageDown':\n this.addYears(this.currentDate, 1);\n this.navigateTo('Month', this.currentDate);\n e.preventDefault();\n break;\n case 'controlHome':\n this.navigateTo('Month', new Date(this.currentDate.getFullYear(), 0, 1));\n e.preventDefault();\n break;\n case 'controlEnd':\n this.navigateTo('Month', new Date(this.currentDate.getFullYear(), 11, 31));\n e.preventDefault();\n break;\n }\n if (this.getModuleName() === 'calendar') {\n this.table.focus();\n }\n };\n CalendarBase.prototype.KeyboardNavigate = function (number, currentView, e, max, min) {\n var date = new Date('' + this.currentDate);\n switch (currentView) {\n case 2:\n this.addYears(this.currentDate, number);\n if (this.isMonthYearRange(this.currentDate)) {\n detach(this.tableBodyElement);\n this.renderDecades(e);\n }\n else {\n this.currentDate = date;\n }\n break;\n case 1:\n this.addMonths(this.currentDate, number);\n if (this.calendarMode === 'Gregorian') {\n if (this.isMonthYearRange(this.currentDate)) {\n detach(this.tableBodyElement);\n this.renderYears(e);\n }\n else {\n this.currentDate = date;\n }\n }\n else {\n if (this.isMonthYearRange(this.currentDate)) {\n detach(this.tableBodyElement);\n this.renderYears(e);\n }\n else {\n this.currentDate = date;\n }\n }\n break;\n case 0:\n this.addDay(this.currentDate, number, e, max, min);\n if (this.isMinMaxRange(this.currentDate)) {\n detach(this.tableBodyElement);\n this.renderMonths(e);\n }\n else {\n this.currentDate = date;\n }\n break;\n }\n };\n /**\n * Initialize the event handler\n * @private\n */\n CalendarBase.prototype.preRender = function (value) {\n var _this = this;\n this.navigatePreviousHandler = this.navigatePrevious.bind(this);\n this.navigateNextHandler = this.navigateNext.bind(this);\n this.navigateHandler = function (e) {\n _this.triggerNavigate(e);\n };\n };\n ;\n CalendarBase.prototype.minMaxDate = function (localDate) {\n var currentDate = new Date(new Date(+localDate).setHours(0, 0, 0, 0));\n var minDate = new Date(new Date(+this.min).setHours(0, 0, 0, 0));\n var maxDate = new Date(new Date(+this.max).setHours(0, 0, 0, 0));\n if (+currentDate === +minDate || +currentDate === +maxDate) {\n if (+localDate < +this.min) {\n localDate = new Date(+this.min);\n }\n if (+localDate > +this.max) {\n localDate = new Date(+this.max);\n }\n }\n return localDate;\n };\n CalendarBase.prototype.renderMonths = function (e, value) {\n var numCells = this.weekNumber ? 8 : 7;\n var tdEles;\n if (this.calendarMode === 'Gregorian') {\n tdEles = this.renderDays(this.currentDate, e, value);\n }\n else {\n tdEles = this.islamicModule.islamicRenderDays(this.currentDate, value);\n }\n this.createContentHeader();\n if (this.calendarMode === 'Gregorian') {\n this.renderTemplate(tdEles, numCells, MONTH, e, value);\n }\n else {\n this.islamicModule.islamicRenderTemplate(tdEles, numCells, MONTH, e, value);\n }\n };\n // tslint:disable-next-line:max-func-body-length\n CalendarBase.prototype.renderDays = function (currentDate, e, value, multiSelection, values) {\n var tdEles = [];\n var cellsCount = 42;\n var localDate = new Date('' + currentDate);\n var minMaxDate;\n var numCells = this.weekNumber ? 8 : 7;\n // 8 and 7 denotes the number of columns to be specified.\n var currentMonth = localDate.getMonth();\n this.titleUpdate(currentDate, 'days');\n var d = localDate;\n localDate = new Date(d.getFullYear(), d.getMonth(), 0, d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds());\n while (localDate.getDay() !== this.firstDayOfWeek) {\n this.setStartDate(localDate, -1 * dayMilliSeconds);\n }\n for (var day = 0; day < cellsCount; ++day) {\n var weekEle = this.createElement('td', { className: CELL });\n var weekAnchor = this.createElement('span');\n if (day % 7 === 0 && this.weekNumber) {\n weekAnchor.textContent = '' + this.getWeek(localDate);\n weekEle.appendChild(weekAnchor);\n addClass([weekEle], '' + WEEKNUMBER);\n tdEles.push(weekEle);\n }\n minMaxDate = new Date(+localDate);\n localDate = this.minMaxDate(localDate);\n var dateFormatOptions = { type: 'dateTime', skeleton: 'full' };\n var date = this.globalize.parseDate(this.globalize.formatDate(localDate, dateFormatOptions), dateFormatOptions);\n var tdEle = this.dayCell(localDate);\n var title = this.globalize.formatDate(localDate, { type: 'date', skeleton: 'full' });\n var dayLink = this.createElement('span');\n dayLink.textContent = this.globalize.formatDate(localDate, { type: 'date', skeleton: 'd' });\n var disabled = (this.min > localDate) || (this.max < localDate);\n if (disabled) {\n addClass([tdEle], DISABLED);\n addClass([tdEle], OVERLAY);\n }\n else {\n dayLink.setAttribute('title', '' + title);\n }\n if (currentMonth !== localDate.getMonth()) {\n addClass([tdEle], OTHERMONTH);\n }\n if (localDate.getDay() === 0 || localDate.getDay() === 6) {\n addClass([tdEle], WEEKEND);\n }\n tdEle.appendChild(dayLink);\n this.renderDayCellArgs = {\n date: localDate,\n isDisabled: false,\n element: tdEle,\n isOutOfRange: disabled\n };\n var argument = this.renderDayCellArgs;\n this.renderDayCellEvent(argument);\n if (argument.isDisabled) {\n if (multiSelection) {\n if (!isNullOrUndefined(values) && values.length > 0) {\n for (var index = 0; index < values.length; index++) {\n var localDateString = +new Date(this.globalize.formatDate(argument.date, { type: 'date', skeleton: 'yMd' }));\n var tempDateString = +new Date(this.globalize.formatDate(values[index], { type: 'date', skeleton: 'yMd' }));\n if (localDateString === tempDateString) {\n values.splice(index, 1);\n index = -1;\n }\n }\n }\n }\n else if (value && +value === +argument.date) {\n this.setProperties({ value: null }, true);\n }\n }\n if (this.renderDayCellArgs.isDisabled && !tdEle.classList.contains(SELECTED)) {\n addClass([tdEle], DISABLED);\n addClass([tdEle], OVERLAY);\n if (+this.renderDayCellArgs.date === +this.todayDate) {\n this.todayDisabled = true;\n }\n }\n var otherMnthBool = tdEle.classList.contains(OTHERMONTH);\n var disabledCls = tdEle.classList.contains(DISABLED);\n if (!disabledCls) {\n EventHandler.add(tdEle, 'click', this.clickHandler, this);\n }\n // to set the value as null while setting the disabled date onProperty change.\n // if (args.isDisabled && +this.value === +args.date) {\n // this.setProperties({ value: null }, true);\n // }\n if (multiSelection && !isNullOrUndefined(values) && !otherMnthBool && !disabledCls) {\n for (var tempValue = 0; tempValue < values.length; tempValue++) {\n var type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';\n var formatOptions = { type: 'date', skeleton: 'short', calendar: type };\n var localDateString = this.globalize.formatDate(localDate, formatOptions);\n var tempDateString = this.globalize.formatDate(values[tempValue], formatOptions);\n if (localDateString === tempDateString && this.getDateVal(localDate, values[tempValue])) {\n addClass([tdEle], SELECTED);\n }\n else {\n this.updateFocus(otherMnthBool, disabledCls, localDate, tdEle, currentDate);\n }\n }\n if (values.length <= 0) {\n this.updateFocus(otherMnthBool, disabledCls, localDate, tdEle, currentDate);\n }\n }\n else if (!otherMnthBool && !disabledCls && this.getDateVal(localDate, value)) {\n addClass([tdEle], SELECTED);\n }\n else {\n this.updateFocus(otherMnthBool, disabledCls, localDate, tdEle, currentDate);\n }\n if (date.getMonth() === new Date().getMonth() && date.getDate() === new Date().getDate()) {\n if (date.getFullYear() === new Date().getFullYear()) {\n addClass([tdEle], TODAY);\n }\n }\n tdEles.push(this.renderDayCellArgs.element);\n localDate = new Date(+minMaxDate);\n this.addDay(localDate, 1, null, this.max, this.min);\n }\n return tdEles;\n };\n CalendarBase.prototype.updateFocus = function (otherMonth, disabled, localDate, tableElement, currentDate) {\n if (currentDate.getDate() === localDate.getDate() && !otherMonth && !disabled) {\n addClass([tableElement], FOCUSEDDATE);\n }\n else {\n if (currentDate >= this.max && parseInt(tableElement.id, 0) === +this.max && !otherMonth && !disabled) {\n addClass([tableElement], FOCUSEDDATE);\n }\n if (currentDate <= this.min && parseInt(tableElement.id, 0) === +this.min && !otherMonth && !disabled) {\n addClass([tableElement], FOCUSEDDATE);\n }\n }\n };\n CalendarBase.prototype.renderYears = function (e, value) {\n this.removeTableHeadElement();\n var numCells = 4;\n var days;\n var tdEles = [];\n var valueUtil = isNullOrUndefined(value);\n var curDate = new Date('' + this.currentDate);\n var mon = curDate.getMonth();\n var yr = curDate.getFullYear();\n var localDate = curDate;\n var curYrs = localDate.getFullYear();\n var minYr = new Date('' + this.min).getFullYear();\n var minMonth = new Date('' + this.min).getMonth();\n var maxYr = new Date('' + this.max).getFullYear();\n var maxMonth = new Date('' + this.max).getMonth();\n localDate.setMonth(0);\n this.titleUpdate(this.currentDate, 'months');\n var disabled = (this.min > localDate) || (this.max < localDate);\n localDate.setDate(1);\n for (var month = 0; month < 12; ++month) {\n var tdEle = this.dayCell(localDate);\n var dayLink = this.createElement('span');\n var localMonth = (value && (value).getMonth() === localDate.getMonth());\n var select = (value && (value).getFullYear() === yr && localMonth);\n dayLink.textContent = this.globalize.formatDate(localDate, { type: 'dateTime', skeleton: 'MMM' });\n if ((this.min && (curYrs < minYr || (month < minMonth && curYrs === minYr))) || (this.max && (curYrs > maxYr || (month > maxMonth && curYrs >= maxYr)))) {\n addClass([tdEle], DISABLED);\n }\n else if (!valueUtil && select) {\n addClass([tdEle], SELECTED);\n }\n else {\n if (localDate.getMonth() === mon && this.currentDate.getMonth() === mon) {\n addClass([tdEle], FOCUSEDDATE);\n }\n }\n localDate.setDate(1);\n localDate.setMonth(localDate.getMonth() + 1);\n if (!tdEle.classList.contains(DISABLED)) {\n EventHandler.add(tdEle, 'click', this.clickHandler, this);\n }\n tdEle.appendChild(dayLink);\n tdEles.push(tdEle);\n }\n this.renderTemplate(tdEles, numCells, YEAR, e, value);\n };\n CalendarBase.prototype.renderDecades = function (e, value) {\n this.removeTableHeadElement();\n var numCells = 4;\n var yearCell = 12;\n var tdEles = [];\n var localDate = new Date('' + this.currentDate);\n localDate.setMonth(0);\n localDate.setDate(1);\n var localYr = localDate.getFullYear();\n var startYr = new Date('' + (localYr - localYr % 10));\n var endYr = new Date('' + (localYr - localYr % 10 + (10 - 1)));\n var startHdrYr = this.globalize.formatDate(startYr, { type: 'dateTime', skeleton: 'y' });\n var endHdrYr = this.globalize.formatDate(endYr, { type: 'dateTime', skeleton: 'y' });\n this.headerTitleElement.textContent = startHdrYr + ' - ' + (endHdrYr);\n var start = new Date(localYr - (localYr % 10) - 1, 0, 1);\n var startYear = start.getFullYear();\n for (var rowIterator = 0; rowIterator < yearCell; ++rowIterator) {\n var year = startYear + rowIterator;\n localDate.setFullYear(year);\n var tdEle = this.dayCell(localDate);\n attributes(tdEle, { 'role': 'gridcell' });\n var dayLink = this.createElement('span');\n dayLink.textContent = this.globalize.formatDate(localDate, { type: 'dateTime', skeleton: 'y' });\n if (year < new Date('' + this.min).getFullYear() || year > new Date('' + this.max).getFullYear()) {\n addClass([tdEle], DISABLED);\n }\n else if (!isNullOrUndefined(value) && localDate.getFullYear() === (value).getFullYear()) {\n addClass([tdEle], SELECTED);\n }\n else {\n if (localDate.getFullYear() === this.currentDate.getFullYear() && !tdEle.classList.contains(DISABLED)) {\n addClass([tdEle], FOCUSEDDATE);\n }\n }\n if (!tdEle.classList.contains(DISABLED)) {\n EventHandler.add(tdEle, 'click', this.clickHandler, this);\n }\n tdEle.appendChild(dayLink);\n tdEles.push(tdEle);\n }\n this.renderTemplate(tdEles, numCells, 'e-decade', e, value);\n };\n CalendarBase.prototype.dayCell = function (localDate) {\n var type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';\n var dateFormatOptions = { skeleton: 'full', type: 'dateTime', calendar: type };\n var date = this.globalize.parseDate(this.globalize.formatDate(localDate, dateFormatOptions), dateFormatOptions);\n var value = date.valueOf();\n var attrs = {\n className: CELL, attrs: { 'id': '' + getUniqueID('' + value), 'aria-selected': 'false', 'role': 'gridcell' }\n };\n return this.createElement('td', attrs);\n };\n CalendarBase.prototype.firstDay = function (date) {\n var collection = this.tableBodyElement.querySelectorAll('td' + ':not(.' + OTHERMONTH + '');\n if (collection.length) {\n for (var i = 0; i < collection.length; i++) {\n if (!collection[i].classList.contains(DISABLED)) {\n date = new Date(parseInt(collection[i].id, 0));\n break;\n }\n }\n }\n return date;\n };\n CalendarBase.prototype.lastDay = function (date, view) {\n var lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);\n if (view !== 2) {\n var timeOffset = Math.abs(lastDate.getTimezoneOffset() - this.firstDay(date).getTimezoneOffset());\n if (timeOffset) {\n lastDate.setHours(this.firstDay(date).getHours() + (timeOffset / 60));\n }\n return this.findLastDay(lastDate);\n }\n else {\n return this.findLastDay(this.firstDay(lastDate));\n }\n };\n ;\n CalendarBase.prototype.checkDateValue = function (value) {\n return (!isNullOrUndefined(value) && value instanceof Date && !isNaN(+value)) ? value : null;\n };\n CalendarBase.prototype.findLastDay = function (date) {\n var collection = this.tableBodyElement.querySelectorAll('td' + ':not(.' + OTHERMONTH + '');\n if (collection.length) {\n for (var i = collection.length - 1; i >= 0; i--) {\n if (!collection[i].classList.contains(DISABLED)) {\n date = new Date(parseInt(collection[i].id, 0));\n break;\n }\n }\n }\n return date;\n };\n CalendarBase.prototype.removeTableHeadElement = function () {\n if (this.getModuleName() === 'calendar') {\n if (!isNullOrUndefined(this.element.querySelectorAll('.e-content table thead')[0])) {\n detach(this.tableHeadElement);\n }\n }\n else {\n if (!isNullOrUndefined(this.calendarElement.querySelectorAll('.e-content table thead')[0])) {\n detach(this.tableHeadElement);\n }\n }\n };\n CalendarBase.prototype.renderTemplate = function (elements, count, classNm, e, value) {\n var view = this.getViewNumber(this.currentView());\n var trEle;\n this.tableBodyElement = this.createElement('tbody');\n this.table.appendChild(this.tableBodyElement);\n removeClass([this.contentElement, this.headerElement], [MONTH, DECADE, YEAR]);\n addClass([this.contentElement, this.headerElement], [classNm]);\n var weekNumCell = 41;\n var numberCell = 35;\n var otherMonthCell = 6;\n var row = count;\n var rowIterator = 0;\n for (var dayCell = 0; dayCell < elements.length / count; ++dayCell) {\n trEle = this.createElement('tr', { attrs: { 'role': 'row' } });\n for (rowIterator = 0 + rowIterator; rowIterator < row; rowIterator++) {\n if (!elements[rowIterator].classList.contains('e-week-number') && !isNullOrUndefined(elements[rowIterator].children[0])) {\n addClass([elements[rowIterator].children[0]], [LINK]);\n rippleEffect(elements[rowIterator].children[0], {\n duration: 600,\n isCenterRipple: true\n });\n }\n trEle.appendChild(elements[rowIterator]);\n if (this.weekNumber && rowIterator === otherMonthCell + 1 && elements[otherMonthCell + 1].classList.contains(OTHERMONTH)) {\n addClass([trEle], OTHERMONTHROW);\n }\n if (!this.weekNumber && rowIterator === otherMonthCell && elements[otherMonthCell].classList.contains(OTHERMONTH)) {\n addClass([trEle], OTHERMONTHROW);\n }\n if (this.weekNumber) {\n if (rowIterator === weekNumCell && elements[weekNumCell].classList.contains(OTHERMONTH)) {\n addClass([trEle], OTHERMONTHROW);\n }\n }\n else {\n if (rowIterator === numberCell && elements[numberCell].classList.contains(OTHERMONTH)) {\n addClass([trEle], OTHERMONTHROW);\n }\n }\n }\n row = row + count;\n rowIterator = rowIterator + 0;\n this.tableBodyElement.appendChild(trEle);\n }\n this.table.querySelector('tbody').className = this.effect;\n if (this.calendarMode === 'Gregorian') {\n this.iconHandler();\n }\n else {\n this.islamicModule.islamicIconHandler();\n }\n if (view !== this.getViewNumber(this.currentView()) || (view === 0 && view !== this.getViewNumber(this.currentView()))) {\n this.navigateHandler(e);\n }\n this.setAriaActiveDescendant();\n };\n CalendarBase.prototype.clickHandler = function (e, value) {\n this.clickEventEmitter(e);\n var eve = e.currentTarget;\n var view = this.getViewNumber(this.currentView());\n if (eve.classList.contains(OTHERMONTH)) {\n this.contentClick(e, 0, null, value);\n }\n else if (view === this.getViewNumber(this.depth) && this.getViewNumber(this.start) >= this.getViewNumber(this.depth)) {\n this.contentClick(e, 1, null, value);\n }\n else if (2 === view) {\n this.contentClick(e, 1, null, value);\n }\n else if (!eve.classList.contains(OTHERMONTH) && view === 0) {\n this.selectDate(e, this.getIdValue(e, null), null);\n }\n else {\n this.contentClick(e, 0, eve, value);\n }\n if (this.getModuleName() === 'calendar') {\n this.table.focus();\n }\n };\n // Content click event handler required for extended components\n CalendarBase.prototype.clickEventEmitter = function (e) {\n e.preventDefault();\n };\n CalendarBase.prototype.contentClick = function (e, view, element, value) {\n var currentView = this.getViewNumber(this.currentView());\n var d = this.getIdValue(e, element);\n switch (view) {\n case 0:\n if (currentView === this.getViewNumber(this.depth) && this.getViewNumber(this.start) >= this.getViewNumber(this.depth)) {\n detach(this.tableBodyElement);\n this.currentDate = d;\n this.effect = ZOOMIN;\n this.renderMonths(e);\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n this.currentDate.setMonth(d.getMonth());\n if (d.getMonth() > 0 && this.currentDate.getMonth() !== d.getMonth()) {\n this.currentDate.setDate(0);\n }\n this.currentDate.setFullYear(d.getFullYear());\n }\n else {\n this.currentDate = d;\n }\n this.effect = ZOOMIN;\n detach(this.tableBodyElement);\n this.renderMonths(e);\n }\n break;\n case 1:\n if (currentView === this.getViewNumber(this.depth) && this.getViewNumber(this.start) >= this.getViewNumber(this.depth)) {\n this.selectDate(e, d, null);\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n this.currentDate.setFullYear(d.getFullYear());\n }\n else {\n var islamicDate = this.islamicModule.getIslamicDate(d);\n this.currentDate = this.islamicModule.toGregorian(islamicDate.year, islamicDate.month, 1);\n }\n this.effect = ZOOMIN;\n detach(this.tableBodyElement);\n this.renderYears(e);\n }\n }\n };\n CalendarBase.prototype.switchView = function (view, e, multiSelection) {\n switch (view) {\n case 0:\n detach(this.tableBodyElement);\n this.renderMonths(e);\n if (multiSelection && !isNullOrUndefined(this.tableBodyElement.querySelectorAll('.' + FOCUSEDDATE)[0])) {\n this.tableBodyElement.querySelectorAll('.' + FOCUSEDDATE)[0].classList.remove(FOCUSEDDATE);\n }\n break;\n case 1:\n detach(this.tableBodyElement);\n this.renderYears(e);\n break;\n case 2:\n detach(this.tableBodyElement);\n this.renderDecades(e);\n }\n };\n /**\n * To get component name\n * @private\n */\n CalendarBase.prototype.getModuleName = function () {\n return 'calendar';\n };\n CalendarBase.prototype.requiredModules = function () {\n var modules = [];\n if (this) {\n modules.push({ args: [this], member: 'islamic' });\n }\n return modules;\n };\n /**\n * Gets the properties to be maintained upon browser refresh.\n * @returns string\n */\n CalendarBase.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Called internally if any of the property value changed.\n * returns void\n * @private\n */\n CalendarBase.prototype.onPropertyChanged = function (newProp, oldProp, multiSelection, values) {\n this.effect = '';\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'enableRtl':\n if (newProp.enableRtl) {\n if (this.getModuleName() === 'calendar') {\n this.element.classList.add('e-rtl');\n }\n else {\n this.calendarElement.classList.add('e-rtl');\n }\n }\n else {\n if (this.getModuleName() === 'calendar') {\n this.element.classList.remove('e-rtl');\n }\n else {\n this.calendarElement.classList.remove('e-rtl');\n }\n }\n break;\n case 'min':\n case 'max':\n prop === 'min' ? this.setProperties({ min: this.checkDateValue(new Date('' + newProp.min)) }, true) :\n this.setProperties({ max: this.checkDateValue(new Date('' + newProp.max)) }, true);\n this.setProperties({ start: this.currentView() }, true);\n detach(this.tableBodyElement);\n this.minMaxUpdate();\n if (multiSelection) {\n this.validateValues(multiSelection, values);\n }\n this.createContentBody();\n if ((this.todayDate < this.min || this.max < this.todayDate) && (this.footer) && (this.todayElement)) {\n detach(this.todayElement);\n detach(this.footer);\n this.todayElement = this.footer = null;\n this.createContentFooter();\n }\n else {\n if (this.todayElement.classList.contains('e-disabled') && (this.footer) && (this.todayElement)) {\n removeClass([this.todayElement], DISABLED);\n detach(this.todayElement);\n detach(this.footer);\n this.todayElement = this.footer = null;\n this.createContentFooter();\n }\n }\n break;\n case 'start':\n case 'weekNumber':\n case 'firstDayOfWeek':\n this.createContentHeader();\n this.createContentBody();\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.createContentHeader();\n this.createContentBody();\n this.l10.setLocale(this.locale);\n this.updateFooter();\n break;\n case 'showTodayButton':\n if (newProp.showTodayButton) {\n this.createContentFooter();\n }\n else {\n detach(this.todayElement);\n detach(this.footer);\n this.todayElement = this.footer = undefined;\n }\n this.setProperties({ showTodayButton: newProp.showTodayButton }, true);\n break;\n }\n }\n };\n /**\n * values property updated with considered disabled dates of the calendar.\n */\n CalendarBase.prototype.validateValues = function (multiSelection, values) {\n if (multiSelection && !isNullOrUndefined(values) && values.length > 0) {\n var copyValues = this.copyValues(values);\n for (var skipIndex = 0; skipIndex < copyValues.length; skipIndex++) {\n var tempValue = copyValues[skipIndex];\n var type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';\n var tempValueString = void 0;\n if (this.calendarMode === 'Gregorian') {\n /* tslint:disable-next-line:max-line-length */\n tempValueString = this.globalize.formatDate(tempValue, { type: 'date', skeleton: 'yMd' });\n }\n else {\n /* tslint:disable-next-line:max-line-length */\n tempValueString = this.globalize.formatDate(tempValue, { type: 'dateTime', skeleton: 'full', calendar: 'islamic' });\n }\n var minFormatOption = { type: 'date', skeleton: 'yMd', calendar: type };\n var minStringValue = this.globalize.formatDate(this.min, minFormatOption);\n var minString = minStringValue;\n var maxFormatOption = { type: 'date', skeleton: 'yMd', calendar: type };\n var maxStringValue = this.globalize.formatDate(this.max, maxFormatOption);\n var maxString = maxStringValue;\n if (+new Date(tempValueString) < +new Date(minString) ||\n +new Date(tempValueString) > +new Date(maxString)) {\n copyValues.splice(skipIndex, 1);\n skipIndex = -1;\n }\n }\n this.setProperties({ values: copyValues }, true);\n }\n };\n CalendarBase.prototype.setValueUpdate = function () {\n detach(this.tableBodyElement);\n this.setProperties({ start: this.currentView() }, true);\n this.createContentBody();\n };\n CalendarBase.prototype.copyValues = function (values) {\n var copyValues = [];\n if (!isNullOrUndefined(values) && values.length > 0) {\n for (var index = 0; index < values.length; index++) {\n copyValues.push(new Date(+values[index]));\n }\n }\n return copyValues;\n };\n CalendarBase.prototype.titleUpdate = function (date, view) {\n var globalize = new Internationalization(this.locale);\n var dayFormatOptions;\n var monthFormatOptions;\n var type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';\n if (this.calendarMode === 'Gregorian') {\n dayFormatOptions = globalize.formatDate(date, { type: 'dateTime', skeleton: 'yMMMM', calendar: type });\n monthFormatOptions = globalize.formatDate(date, { type: 'dateTime', skeleton: 'y', calendar: type });\n }\n else {\n dayFormatOptions = globalize.formatDate(date, { type: 'dateTime', format: 'MMMM y', calendar: type });\n monthFormatOptions = globalize.formatDate(date, { type: 'dateTime', format: 'y', calendar: type });\n }\n switch (view) {\n case 'days':\n this.headerTitleElement.textContent = dayFormatOptions;\n break;\n case 'months':\n this.headerTitleElement.textContent = monthFormatOptions;\n }\n };\n CalendarBase.prototype.setActiveDescendant = function () {\n var id;\n var focusedEle = this.tableBodyElement.querySelector('tr td.e-focused-date');\n var selectedEle = this.tableBodyElement.querySelector('tr td.e-selected');\n var type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';\n var title = this.globalize.formatDate(this.currentDate, { type: 'dateTime', skeleton: 'full', calendar: type });\n if (selectedEle || focusedEle) {\n (focusedEle || selectedEle).setAttribute('aria-selected', 'true');\n (focusedEle || selectedEle).setAttribute('aria-label', 'The current focused date is ' + '' + title);\n id = (focusedEle || selectedEle).getAttribute('id');\n }\n return id;\n };\n CalendarBase.prototype.iconHandler = function () {\n new Date('' + this.currentDate).setDate(1);\n switch (this.currentView()) {\n case 'Month':\n this.previousIconHandler(this.compareMonth(new Date('' + this.currentDate), this.min) < 1);\n this.nextIconHandler(this.compareMonth(new Date('' + this.currentDate), this.max) > -1);\n break;\n case 'Year':\n this.previousIconHandler(this.compareYear(new Date('' + this.currentDate), this.min) < 1);\n this.nextIconHandler(this.compareYear(new Date('' + this.currentDate), this.max) > -1);\n break;\n case 'Decade':\n this.previousIconHandler(this.compareDecade(new Date('' + this.currentDate), this.min) < 1);\n this.nextIconHandler(this.compareDecade(new Date('' + this.currentDate), this.max) > -1);\n }\n };\n /**\n * Destroys the widget.\n * @returns void\n */\n CalendarBase.prototype.destroy = function () {\n if (this.getModuleName() === 'calendar') {\n removeClass([this.element], [ROOT]);\n }\n else {\n if (this.calendarElement) {\n removeClass([this.element], [ROOT]);\n }\n }\n if (this.getModuleName() === 'calendar') {\n EventHandler.remove(this.headerTitleElement, 'click', this.navigateTitle);\n if (this.todayElement) {\n EventHandler.remove(this.todayElement, 'click', this.todayButtonClick);\n }\n this.previousIconHandler(true);\n this.nextIconHandler(true);\n this.keyboardModule.destroy();\n this.element.removeAttribute('data-role');\n }\n this.element.innerHTML = '';\n _super.prototype.destroy.call(this);\n };\n CalendarBase.prototype.title = function (e) {\n var currentView = this.getViewNumber(this.currentView());\n this.effect = ZOOMIN;\n this.switchView(++currentView, e);\n };\n CalendarBase.prototype.getViewNumber = function (stringVal) {\n if (stringVal === 'Month') {\n return 0;\n }\n else if (stringVal === 'Year') {\n return 1;\n }\n else {\n return 2;\n }\n };\n CalendarBase.prototype.navigateTitle = function (e) {\n e.preventDefault();\n this.title(e);\n if (this.getModuleName() === 'calendar') {\n this.table.focus();\n }\n };\n CalendarBase.prototype.previous = function () {\n this.effect = '';\n var currentView = this.getViewNumber(this.currentView());\n switch (this.currentView()) {\n case 'Month':\n this.addMonths(this.currentDate, -1);\n this.switchView(currentView);\n break;\n case 'Year':\n this.addYears(this.currentDate, -1);\n this.switchView(currentView);\n break;\n case 'Decade':\n this.addYears(this.currentDate, -10);\n this.switchView(currentView);\n break;\n }\n };\n CalendarBase.prototype.navigatePrevious = function (e) {\n e.preventDefault();\n if (this.calendarMode === 'Gregorian') {\n this.previous();\n }\n else {\n this.islamicModule.islamicPrevious();\n }\n this.triggerNavigate(e);\n if (this.getModuleName() === 'calendar') {\n this.table.focus();\n }\n };\n CalendarBase.prototype.next = function () {\n this.effect = '';\n var currentView = this.getViewNumber(this.currentView());\n switch (this.currentView()) {\n case 'Month':\n this.addMonths(this.currentDate, 1);\n this.switchView(currentView);\n break;\n case 'Year':\n this.addYears(this.currentDate, 1);\n this.switchView(currentView);\n break;\n case 'Decade':\n this.addYears(this.currentDate, 10);\n this.switchView(currentView);\n break;\n }\n };\n CalendarBase.prototype.navigateNext = function (eve) {\n eve.preventDefault();\n if (this.calendarMode === 'Gregorian') {\n this.next();\n }\n else {\n this.islamicModule.islamicNext();\n }\n this.triggerNavigate(eve);\n if (this.getModuleName() === 'calendar') {\n this.table.focus();\n }\n };\n /**\n * This method is used to navigate to the month/year/decade view of the Calendar.\n * @param {string} view - Specifies the view of the Calendar.\n * @param {Date} date - Specifies the focused date in a view.\n * @returns void\n */\n CalendarBase.prototype.navigateTo = function (view, date) {\n if (+date >= +this.min && +date <= +this.max) {\n this.currentDate = date;\n }\n if (+date <= +this.min) {\n this.currentDate = new Date('' + this.min);\n }\n if (+date >= +this.max) {\n this.currentDate = new Date('' + this.max);\n }\n if (this.getModuleName() === 'daterangepicker') {\n this.currentDate = date;\n }\n if ((this.getViewNumber(this.depth) >= this.getViewNumber(view))) {\n if ((this.getViewNumber(this.depth) <= this.getViewNumber(this.start))\n || this.getViewNumber(this.depth) === this.getViewNumber(view)) {\n view = this.depth;\n }\n }\n this.switchView(this.getViewNumber(view));\n };\n /**\n * Gets the current view of the Calendar.\n * @returns string\n */\n CalendarBase.prototype.currentView = function () {\n if (this.contentElement.classList.contains(YEAR)) {\n return 'Year';\n }\n else if (this.contentElement.classList.contains(DECADE)) {\n return 'Decade';\n }\n else {\n return 'Month';\n }\n };\n CalendarBase.prototype.getDateVal = function (date, value) {\n return (!isNullOrUndefined(value) && date.getDate() === (value).getDate()\n && date.getMonth() === (value).getMonth() && date.getFullYear() === (value).getFullYear());\n };\n CalendarBase.prototype.getCultureObjects = function (ld, c) {\n if (this.calendarMode === 'Gregorian') {\n return getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.days.format.short', ld);\n }\n else {\n return getValue('main.' + '' + this.locale + '.dates.calendars.islamic.days.format.short', ld);\n }\n };\n ;\n CalendarBase.prototype.getWeek = function (d) {\n var currentDate = new Date('' + d).valueOf();\n var date = new Date(d.getFullYear(), 0, 1).valueOf();\n var a = (currentDate - date);\n return Math.ceil((((a) / dayMilliSeconds) + new Date(date).getDay() + 1) / 7);\n };\n CalendarBase.prototype.setStartDate = function (date, time) {\n var tzOffset = date.getTimezoneOffset();\n var d = new Date(date.getTime() + time);\n var tzOffsetDiff = d.getTimezoneOffset() - tzOffset;\n date.setTime(d.getTime() + tzOffsetDiff * minutesMilliSeconds);\n };\n CalendarBase.prototype.addMonths = function (date, i) {\n if (this.calendarMode === 'Gregorian') {\n var day = date.getDate();\n date.setDate(1);\n date.setMonth(date.getMonth() + i);\n date.setDate(Math.min(day, this.getMaxDays(date)));\n }\n else {\n var islamicDate = this.islamicModule.getIslamicDate(date);\n this.currentDate = this.islamicModule.toGregorian(islamicDate.year, (islamicDate.month) + i, 1);\n }\n };\n CalendarBase.prototype.addYears = function (date, i) {\n if (this.calendarMode === 'Gregorian') {\n var day = date.getDate();\n date.setDate(1);\n date.setFullYear(date.getFullYear() + i);\n date.setDate(Math.min(day, this.getMaxDays(date)));\n }\n else {\n var islamicDate = this.islamicModule.getIslamicDate(date);\n this.currentDate = this.islamicModule.toGregorian(islamicDate.year + i, (islamicDate.month), 1);\n }\n };\n CalendarBase.prototype.getIdValue = function (e, element) {\n var eve;\n if (e) {\n eve = e.currentTarget;\n }\n else {\n eve = element;\n }\n var type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';\n var dateFormatOptions = { type: 'dateTime', skeleton: 'full', calendar: type };\n var dateString = this.globalize.formatDate(new Date(parseInt('' + eve.getAttribute('id'), 0)), dateFormatOptions);\n var date = this.globalize.parseDate(dateString, dateFormatOptions);\n var value = date.valueOf() - date.valueOf() % 1000;\n return new Date(value);\n //return this.globalize.parseDate(dateString, dateFormatOptions);\n };\n CalendarBase.prototype.selectDate = function (e, date, node, multiSelection, values) {\n var element = node || e.currentTarget;\n if (this.currentView() === 'Decade') {\n this.setDateDecade(this.currentDate, date.getFullYear());\n }\n else if (this.currentView() === 'Year') {\n this.setDateYear(this.currentDate, date);\n }\n else {\n if (multiSelection && !this.checkPresentDate(date, values)) {\n var copyValues = this.copyValues(values);\n if (!isNullOrUndefined(values) && copyValues.length > 0) {\n copyValues.push(new Date('' + date));\n this.setProperties({ values: copyValues }, true);\n this.setProperties({ value: values[values.length - 1] }, true);\n }\n else {\n this.setProperties({ values: [new Date('' + date)] }, true);\n }\n }\n else {\n this.setProperties({ value: new Date('' + date) }, true);\n }\n this.currentDate = new Date('' + date);\n }\n var tableBodyElement = closest(element, '.' + ROOT);\n if (isNullOrUndefined(tableBodyElement)) {\n tableBodyElement = this.tableBodyElement;\n }\n if (!multiSelection && !isNullOrUndefined(tableBodyElement.querySelector('.' + SELECTED))) {\n removeClass([tableBodyElement.querySelector('.' + SELECTED)], SELECTED);\n }\n if (!multiSelection && !isNullOrUndefined(tableBodyElement.querySelector('.' + FOCUSEDDATE))) {\n removeClass([tableBodyElement.querySelector('.' + FOCUSEDDATE)], FOCUSEDDATE);\n }\n if (multiSelection) {\n var copyValues = this.copyValues(values);\n var collection = Array.prototype.slice.call(this.tableBodyElement.querySelectorAll('td'));\n for (var index = 0; index < collection.length; index++) {\n var tempElement = tableBodyElement.querySelectorAll('td' + '.' + FOCUSEDDATE)[0];\n var selectedElement = tableBodyElement.querySelectorAll('td' + '.' + SELECTED)[0];\n if (collection[index] === tempElement) {\n removeClass([collection[index]], FOCUSEDDATE);\n }\n if (collection[index] === selectedElement &&\n !this.checkPresentDate(new Date(parseInt(selectedElement.getAttribute('id').split('_')[0], 10)), values)) {\n removeClass([collection[index]], SELECTED);\n }\n }\n if (element.classList.contains(SELECTED)) {\n removeClass([element], SELECTED);\n for (var i = 0; i < copyValues.length; i++) {\n var type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';\n var formatOptions = { type: 'date', skeleton: 'short', calendar: type };\n var localDateString = this.globalize.formatDate(date, formatOptions);\n var tempDateString = this.globalize.formatDate(copyValues[i], formatOptions);\n if (localDateString === tempDateString) {\n var index = copyValues.indexOf(copyValues[i]);\n copyValues.splice(index, 1);\n addClass([element], FOCUSEDDATE);\n }\n }\n this.setProperties({ values: copyValues }, true);\n }\n else {\n addClass([element], SELECTED);\n }\n }\n else {\n addClass([element], SELECTED);\n }\n };\n CalendarBase.prototype.checkPresentDate = function (dates, values) {\n var previousValue = false;\n if (!isNullOrUndefined(values)) {\n for (var checkPrevious = 0; checkPrevious < values.length; checkPrevious++) {\n var type = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';\n /* tslint:disable-next-line:max-line-length */\n var localDateString = this.globalize.formatDate(dates, { type: 'date', skeleton: 'short', calendar: type });\n /* tslint:disable-next-line:max-line-length */\n var tempDateString = this.globalize.formatDate(values[checkPrevious], { type: 'date', skeleton: 'short', calendar: type });\n if (localDateString === tempDateString) {\n previousValue = true;\n }\n }\n }\n return previousValue;\n };\n CalendarBase.prototype.setAriaActiveDescendant = function () {\n attributes(this.table, {\n 'aria-activedescendant': '' + this.setActiveDescendant()\n });\n };\n CalendarBase.prototype.previousIconHandler = function (disabled) {\n if (disabled) {\n EventHandler.remove(this.previousIcon, 'click', this.navigatePreviousHandler);\n addClass([this.previousIcon], '' + DISABLED);\n addClass([this.previousIcon], '' + OVERLAY);\n this.previousIcon.setAttribute('aria-disabled', 'true');\n }\n else {\n EventHandler.add(this.previousIcon, 'click', this.navigatePreviousHandler);\n removeClass([this.previousIcon], '' + DISABLED);\n removeClass([this.previousIcon], '' + OVERLAY);\n this.previousIcon.setAttribute('aria-disabled', 'false');\n }\n };\n CalendarBase.prototype.renderDayCellEvent = function (args) {\n extend(this.renderDayCellArgs, { name: 'renderDayCell' });\n this.trigger('renderDayCell', args);\n };\n CalendarBase.prototype.navigatedEvent = function (eve) {\n extend(this.navigatedArgs, { name: 'navigated', event: eve });\n this.trigger('navigated', this.navigatedArgs);\n };\n CalendarBase.prototype.triggerNavigate = function (event) {\n this.navigatedArgs = { view: this.currentView(), date: this.currentDate };\n this.navigatedEvent(event);\n };\n CalendarBase.prototype.nextIconHandler = function (disabled) {\n if (disabled) {\n EventHandler.remove(this.nextIcon, 'click', this.navigateNextHandler);\n addClass([this.nextIcon], DISABLED);\n addClass([this.nextIcon], OVERLAY);\n this.nextIcon.setAttribute('aria-disabled', 'true');\n }\n else {\n EventHandler.add(this.nextIcon, 'click', this.navigateNextHandler);\n removeClass([this.nextIcon], DISABLED);\n removeClass([this.nextIcon], OVERLAY);\n this.nextIcon.setAttribute('aria-disabled', 'false');\n }\n };\n CalendarBase.prototype.compare = function (startDate, endDate, modifier) {\n var start = endDate.getFullYear();\n var end;\n var result;\n end = start;\n result = 0;\n if (modifier) {\n start = start - start % modifier;\n end = start - start % modifier + modifier - 1;\n }\n if (startDate.getFullYear() > end) {\n result = 1;\n }\n else if (startDate.getFullYear() < start) {\n result = -1;\n }\n return result;\n };\n CalendarBase.prototype.isMinMaxRange = function (date) {\n return +date >= +this.min && +date <= +this.max;\n };\n CalendarBase.prototype.isMonthYearRange = function (date) {\n if (this.calendarMode === 'Gregorian') {\n return date.getMonth() >= this.min.getMonth()\n && date.getFullYear() >= this.min.getFullYear()\n && date.getMonth() <= this.max.getMonth()\n && date.getFullYear() <= this.max.getFullYear();\n }\n else {\n var islamicDate = this.islamicModule.getIslamicDate(date);\n return islamicDate.month >= (this.islamicModule.getIslamicDate(new Date(1944, 1, 18))).month\n && islamicDate.year >= (this.islamicModule.getIslamicDate(new Date(1944, 1, 18))).year\n && islamicDate.month <= (this.islamicModule.getIslamicDate(new Date(2069, 1, 16))).month\n && islamicDate.year <= (this.islamicModule.getIslamicDate(new Date(2069, 1, 16))).year;\n }\n };\n CalendarBase.prototype.compareYear = function (start, end) {\n return this.compare(start, end, 0);\n };\n CalendarBase.prototype.compareDecade = function (start, end) {\n return this.compare(start, end, 10);\n };\n CalendarBase.prototype.shiftArray = function (array, i) {\n return array.slice(i).concat(array.slice(0, i));\n };\n CalendarBase.prototype.addDay = function (date, i, e, max, min) {\n var column = i;\n var value = new Date(+date);\n if (!isNullOrUndefined(this.tableBodyElement) && !isNullOrUndefined(e)) {\n while (this.findNextTD(new Date(+date), column, max, min)) {\n column += i;\n }\n var rangeValue = new Date(value.setDate(value.getDate() + column));\n column = (+rangeValue > +max || +rangeValue < +min) ? column === i ? i - i : i : column;\n }\n date.setDate(date.getDate() + column);\n };\n CalendarBase.prototype.findNextTD = function (date, column, max, min) {\n var value = new Date(date.setDate(date.getDate() + column));\n var collection = [];\n var isDisabled = false;\n if ((!isNullOrUndefined(value) && value.getMonth()) === (!isNullOrUndefined(this.currentDate) && this.currentDate.getMonth())) {\n var tdEles = void 0;\n if (this.calendarMode === 'Gregorian') {\n tdEles = this.renderDays(value, null);\n }\n else {\n tdEles = this.islamicModule.islamicRenderDays(this.currentDate, value);\n }\n collection = tdEles.filter(function (element) {\n return element.classList.contains(DISABLED);\n });\n }\n else {\n collection = this.tableBodyElement.querySelectorAll('td.' + DISABLED);\n }\n if (+value <= (+(max)) && +value >= (+(min))) {\n if (collection.length) {\n for (var i = 0; i < collection.length; i++) {\n isDisabled = (+value === +new Date(parseInt(collection[i].id, 0))) ? true : false;\n if (isDisabled) {\n break;\n }\n }\n }\n }\n return isDisabled;\n };\n CalendarBase.prototype.getMaxDays = function (d) {\n var date;\n var month;\n var tmpDate = new Date('' + d);\n date = 28;\n month = tmpDate.getMonth();\n while (tmpDate.getMonth() === month) {\n ++date;\n tmpDate.setDate(date);\n }\n return date - 1;\n };\n CalendarBase.prototype.setDateDecade = function (date, year) {\n date.setFullYear(year);\n this.setProperties({ value: new Date('' + date) }, true);\n };\n ;\n CalendarBase.prototype.setDateYear = function (date, value) {\n date.setFullYear(value.getFullYear(), value.getMonth(), date.getDate());\n if (value.getMonth() !== date.getMonth()) {\n date.setDate(0);\n }\n this.setProperties({ value: new Date('' + date) }, true);\n this.currentDate = new Date('' + value);\n };\n CalendarBase.prototype.compareMonth = function (start, end) {\n var result;\n if (start.getFullYear() > end.getFullYear()) {\n result = 1;\n }\n else if (start.getFullYear() < end.getFullYear()) {\n result = -1;\n }\n else {\n result = start.getMonth() === end.getMonth() ? 0 : start.getMonth() > end.getMonth() ? 1 : -1;\n }\n return result;\n };\n __decorate([\n Property(new Date(1900, 0, 1))\n ], CalendarBase.prototype, \"min\", void 0);\n __decorate([\n Property(new Date(2099, 11, 31))\n ], CalendarBase.prototype, \"max\", void 0);\n __decorate([\n Property(null)\n ], CalendarBase.prototype, \"firstDayOfWeek\", void 0);\n __decorate([\n Property('Gregorian')\n ], CalendarBase.prototype, \"calendarMode\", void 0);\n __decorate([\n Property('Month')\n ], CalendarBase.prototype, \"start\", void 0);\n __decorate([\n Property('Month')\n ], CalendarBase.prototype, \"depth\", void 0);\n __decorate([\n Property(false)\n ], CalendarBase.prototype, \"weekNumber\", void 0);\n __decorate([\n Property(true)\n ], CalendarBase.prototype, \"showTodayButton\", void 0);\n __decorate([\n Property(false)\n ], CalendarBase.prototype, \"enableRtl\", void 0);\n __decorate([\n Property(false)\n ], CalendarBase.prototype, \"enablePersistence\", void 0);\n __decorate([\n Event()\n ], CalendarBase.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], CalendarBase.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], CalendarBase.prototype, \"navigated\", void 0);\n __decorate([\n Event()\n ], CalendarBase.prototype, \"renderDayCell\", void 0);\n CalendarBase = __decorate([\n NotifyPropertyChanges\n ], CalendarBase);\n return CalendarBase;\n}(Component));\nexport { CalendarBase };\n/**\n * Represents the Calendar component that allows the user to select a date.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Calendar = /** @class */ (function (_super) {\n __extends(Calendar, _super);\n /**\n * Initialized new instance of Calendar Class.\n * Constructor for creating the widget\n * @param {CalendarModel} options?\n * @param {string|HTMLElement} element?\n */\n function Calendar(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * To Initialize the control rendering.\n * @returns void\n * @private\n */\n Calendar.prototype.render = function () {\n if (this.calendarMode === 'Islamic' && this.islamicModule === undefined) {\n throwError('Requires the injectable Islamic modules to render Calendar in Islamic mode');\n }\n if (this.isMultiSelection && typeof this.values === 'object' && !isNullOrUndefined(this.values) && this.values.length > 0) {\n var tempValues = [];\n var copyValues = [];\n for (var limit = 0; limit < this.values.length; limit++) {\n if (tempValues.indexOf(+this.values[limit]) === -1) {\n tempValues.push(+this.values[limit]);\n copyValues.push(this.values[limit]);\n }\n }\n this.setProperties({ values: copyValues }, true);\n for (var index = 0; index < this.values.length; index++) {\n if (!this.checkDateValue(this.values[index])) {\n if (typeof (this.values[index]) === 'string' && this.checkDateValue(new Date('' + this.values[index]))) {\n var copyDate = new Date('' + 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 _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 }\n };\n Calendar.prototype.formResetHandler = function () {\n this.value = null;\n };\n Calendar.prototype.validateDate = function () {\n if (typeof this.value === 'string') {\n this.setProperties({ value: this.checkDateValue(new Date('' + 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.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.todayButtonClick = function () {\n if (this.showTodayButton) {\n var tempValue = new Date();\n if (this.value) {\n tempValue.setHours(this.value.getHours());\n tempValue.setMinutes(this.value.getMinutes());\n tempValue.setSeconds(this.value.getSeconds());\n tempValue.setMilliseconds(this.value.getMilliseconds());\n }\n else {\n tempValue = new Date(tempValue.getFullYear(), tempValue.getMonth(), tempValue.getDate(), 0, 0, 0, 0);\n }\n this.setProperties({ value: tempValue }, true);\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, new Date(+this.value));\n }\n };\n Calendar.prototype.keyActionHandle = function (e) {\n _super.prototype.keyActionHandle.call(this, e, this.value, this.isMultiSelection);\n };\n /**\n * Initialize the event handler\n * @private\n */\n Calendar.prototype.preRender = function () {\n var _this = this;\n this.changeHandler = function (e) {\n _this.triggerChange(e);\n };\n _super.prototype.preRender.call(this, this.value);\n };\n ;\n Calendar.prototype.createContent = function () {\n this.previousDate = 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) {\n _super.prototype.renderMonths.call(this, e, this.value);\n };\n Calendar.prototype.renderDays = function (currentDate, e) {\n var tempDays = _super.prototype.renderDays.call(this, currentDate, e, this.value, this.isMultiSelection, this.values);\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 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) {\n _super.prototype.switchView.call(this, view, e, this.isMultiSelection);\n };\n /**\n * To get component name\n * @private\n */\n Calendar.prototype.getModuleName = function () {\n _super.prototype.getModuleName.call(this);\n return 'calendar';\n };\n /**\n * Gets the properties to be maintained upon browser refresh.\n * @returns string\n */\n Calendar.prototype.getPersistData = function () {\n _super.prototype.getPersistData.call(this);\n var keyEntity = ['value', 'values'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Called internally if any of the property value changed.\n * returns void\n * @private\n */\n Calendar.prototype.onPropertyChanged = function (newProp, oldProp) {\n this.effect = '';\n 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 (typeof newProp.value === 'string') {\n this.setProperties({ value: new Date('' + newProp.value) }, true);\n }\n else {\n newProp.value = new Date('' + newProp.value);\n }\n if (isNaN(+this.value)) {\n this.setProperties({ value: oldProp.value }, true);\n }\n this.update();\n break;\n case 'values':\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 break;\n case 'isMultiSelection':\n this.setProperties({ isMultiSelection: newProp.isMultiSelection }, true);\n this.update();\n break;\n default:\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp, this.isMultiSelection, this.values);\n }\n }\n };\n /**\n * Destroys the widget.\n * @returns void\n */\n Calendar.prototype.destroy = function () {\n _super.prototype.destroy.call(this);\n if (this.getModuleName() === 'calendar') {\n var form = closest(this.element, 'form');\n if (form) {\n EventHandler.remove(form, 'reset', this.formResetHandler.bind(this));\n }\n }\n };\n /**\n * This method is used to navigate to the month/year/decade view of the Calendar.\n * @param {string} view - Specifies the view of the Calendar.\n * @param {Date} date - Specifies the focused date in a view.\n * @returns void\n */\n Calendar.prototype.navigateTo = function (view, date) {\n this.minMaxUpdate();\n _super.prototype.navigateTo.call(this, view, date);\n };\n /**\n * Gets the current view of the Calendar.\n * @returns string\n */\n Calendar.prototype.currentView = function () {\n return _super.prototype.currentView.call(this);\n };\n /**\n * This method is used to add the single or multiple dates to the values property of the Calendar.\n * @param {Date || Date[]} dates - Specifies the date or dates to be added to the values property of the Calendar.\n * @returns void\n */\n Calendar.prototype.addDate = function (dates) {\n if (typeof dates !== 'string' && typeof dates !== 'number') {\n var copyValues = this.copyValues(this.values);\n if (typeof dates === 'object' && (dates).length > 0) {\n var tempDates = dates;\n for (var i = 0; i < tempDates.length; i++) {\n if (this.checkDateValue(tempDates[i]) && !_super.prototype.checkPresentDate.call(this, tempDates[i], copyValues)) {\n if (!isNullOrUndefined(copyValues) && copyValues.length > 0) {\n copyValues.push(tempDates[i]);\n }\n else {\n copyValues = [new Date(+tempDates[i])];\n }\n }\n }\n }\n else {\n if (this.checkDateValue(dates) && !_super.prototype.checkPresentDate.call(this, dates, copyValues)) {\n if (!isNullOrUndefined(copyValues) && copyValues.length > 0) {\n copyValues.push((dates));\n }\n else {\n copyValues = [new Date(+dates)];\n }\n }\n }\n this.setProperties({ values: copyValues }, true);\n if (this.isMultiSelection) {\n this.setProperties({ value: this.values[this.values.length - 1] }, true);\n }\n this.validateValues(this.isMultiSelection, copyValues);\n this.update();\n this.changedArgs = { value: this.value, values: this.values };\n this.changeHandler();\n }\n };\n /**\n * This method is used to remove the single or multiple dates from the values property of the Calendar.\n * @param {Date || Date[]} dates - Specifies the date or dates which need to be removed from the values property of the Calendar.\n * @returns void\n */\n 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 Calendar.prototype.update = function () {\n this.validateDate();\n this.minMaxUpdate();\n _super.prototype.setValueUpdate.call(this);\n };\n Calendar.prototype.selectDate = function (e, date, element) {\n _super.prototype.selectDate.call(this, e, date, element, this.isMultiSelection, this.values);\n if (this.isMultiSelection && !isNullOrUndefined(this.values) && this.values.length > 0) {\n this.setProperties({ value: this.values[this.values.length - 1] }, true);\n }\n this.changedArgs = { value: this.value, values: this.values };\n this.changeHandler(e);\n };\n Calendar.prototype.changeEvent = function (e) {\n this.trigger('change', this.changedArgs);\n this.previousDate = new Date(+this.value);\n };\n Calendar.prototype.triggerChange = function (e) {\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) {\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///
\nimport { EventHandler, Property, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, Animation, Event, 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 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 RTL = 'e-rtl';\nvar LINK = 'e-day';\nvar ACTIVE = 'e-active';\nvar OVERFLOW = 'e-date-overflow';\nvar DATEICON = 'e-date-icon';\nvar ICONS = 'e-icons';\nvar OPENDURATION = 300;\nvar CLOSEDURATION = 200;\nvar OFFSETVALUE = 4;\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 function DatePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.previousElementValue = '';\n _this.isDateIconClicked = false;\n _this.keyConfigs = {\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 tab: 'tab'\n };\n _this.calendarKeyConfigs = {\n escape: 'escape',\n enter: 'enter',\n tab: 'tab'\n };\n return _this;\n }\n /**\n * To Initialize the control rendering.\n * @return void\n * @private\n */\n DatePicker.prototype.render = function () {\n this.initialize();\n this.bindEvents();\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 };\n DatePicker.prototype.initialize = function () {\n this.createInput();\n this.setAllowEdit();\n this.updateInput();\n this.previousElementValue = this.inputElement.value;\n this.previousDate = new Date(+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'\n };\n if (this.getModuleName() === 'datepicker') {\n var l10nLocale = { placeholder: null };\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 this.inputWrapper = Input.createInput({\n element: this.inputElement,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: this.cssClass,\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 }\n else {\n this.inputElement.setAttribute('aria-disabled', 'false');\n }\n Input.addAttributes({ 'aria-label': 'select' }, this.inputWrapper.buttons[0]);\n addClass([this.inputWrapper.container], DATEWRAPPER);\n };\n DatePicker.prototype.updateInput = function () {\n var formatOptions;\n if (this.value && !this.isCalendar()) {\n this.disabledDates();\n }\n if (!+new Date('' + 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.format) ? this.format : 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.format, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n formatOptions = { format: this.format, 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 Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n var value = (+dateValue >= +this.max || !+this.value) || (!+this.value || +dateValue <= +this.min);\n if (!this.strictMode && value) {\n Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n }\n }\n if (isNullOrUndefined(this.value) && this.strictMode) {\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n }\n this.changedArgs = { value: this.value };\n this.errorClass();\n };\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.bindEvents = function () {\n if (this.enabled) {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateIconHandler, this);\n EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);\n EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);\n // To prevent the twice triggering.\n EventHandler.add(this.inputElement, 'change', this.inputChangeHandler, this);\n if (this.showClearButton) {\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 }\n else {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateIconHandler);\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.showClearButton) {\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 this.keyboardModules = new KeyboardEvents(this.inputElement, {\n eventName: 'keydown',\n keyAction: this.inputKeyActionHandle.bind(this),\n keyConfigs: this.keyConfigs\n });\n };\n DatePicker.prototype.resetFormHandler = function () {\n if (this.inputElement.getAttribute('value')) {\n this.value = this.checkDateValue(new Date('' + this.element.getAttribute('value')));\n }\n else {\n this.value = null;\n if (this.inputElement) {\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n attributes(this.inputElement, { 'aria-invalid': 'false' });\n removeClass([this.inputWrapper.container], ERROR);\n }\n }\n };\n DatePicker.prototype.inputChangeHandler = function (e) {\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 e.preventDefault();\n this.clear(e);\n };\n DatePicker.prototype.clear = function (event) {\n this.setProperties({ value: null }, true);\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n this.updateInput();\n this.changeEvent(event);\n };\n DatePicker.prototype.dateIconHandler = function (e) {\n if (Browser.isDevice) {\n this.element.setAttribute('readonly', 'readonly');\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 };\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 var focusArguments = {\n model: this\n };\n this.isDateIconClicked = false;\n this.trigger('focus', focusArguments);\n };\n DatePicker.prototype.inputBlurHandler = function (e) {\n this.strictModeUpdate();\n this.updateInput();\n this.changeTrigger(e);\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.calendarKeyboardModules = new KeyboardEvents(this.calendarElement.children[1].firstElementChild, {\n eventName: 'keydown',\n keyAction: this.CalendarKeyActionHandle.bind(this),\n keyConfigs: this.calendarKeyConfigs\n });\n }\n };\n DatePicker.prototype.documentHandler = function (e) {\n if (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 }\n };\n DatePicker.prototype.inputKeyActionHandle = function (e) {\n switch (e.action) {\n case 'altUpArrow':\n this.hide(e);\n this.inputElement.focus();\n break;\n case 'altDownArrow':\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.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 this.strictModeUpdate();\n this.updateInput();\n this.changeTrigger(e);\n this.errorClass();\n this.hide(e);\n break;\n default:\n this.previousDate = ((!isNullOrUndefined(this.value) && new Date(+this.value)) || null);\n if (this.isCalendar()) {\n _super.prototype.keyActionHandle.call(this, e);\n }\n }\n };\n DatePicker.prototype.strictModeUpdate = function () {\n var format;\n var formatOptions;\n if (this.getModuleName() === 'datetimepicker') {\n format = !isNullOrUndefined(this.format) ? this.format : this.dateTimeFormat;\n }\n else {\n format = isNullOrUndefined(this.format) ? this.format : this.format.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.format) ? this.format : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd'\n };\n }\n else {\n dateOptions = {\n format: !isNullOrUndefined(this.format) ? this.format : 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 ((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 }\n if (this.strictMode && date) {\n Input.setValue(this.globalize.formatDate(date, dateOptions), this.inputElement, this.floatLabelType, this.showClearButton);\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 === '') {\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.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.calendarKeyConfigs\n });\n _this.calendarKeyboardModules = new KeyboardEvents(_this.inputWrapper.container.children[_this.index], {\n eventName: 'keydown',\n keyAction: _this.CalendarKeyActionHandle.bind(_this),\n keyConfigs: _this.calendarKeyConfigs\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 detach(_this.popupWrapper);\n _this.popupObj = _this.popupWrapper = null;\n _this.setAriaAttributes();\n }\n });\n this.popupObj.element.className += ' ' + this.cssClass;\n this.setAriaAttributes();\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 this.changedArgs.value = this.value;\n this.changedArgs.event = event || null;\n this.changedArgs.element = this.element;\n this.changedArgs.isInteracted = !isNullOrUndefined(event);\n this.trigger('change', this.changedArgs);\n this.previousElementValue = this.inputElement.value;\n this.previousDate = new Date('' + this.value);\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 = !isNullOrUndefined(event);\n this.trigger('change', this.changedArgs);\n this.previousDate = this.value && new Date(+this.value);\n this.hide(event);\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 return modules;\n };\n DatePicker.prototype.selectCalendar = function (e) {\n var date;\n var tempFormat;\n var formatOptions;\n if (this.getModuleName() === 'datetimepicker') {\n tempFormat = !isNullOrUndefined(this.format) ? this.format : this.dateTimeFormat;\n }\n else {\n tempFormat = this.format;\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.format, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n formatOptions = { format: this.format, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n date = this.globalize.formatDate(this.changedArgs.value, formatOptions);\n }\n }\n if (!isNullOrUndefined(date)) {\n Input.setValue(date, this.inputElement, this.floatLabelType, this.showClearButton);\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 /**\n * Shows the Calendar.\n * @returns void\n */\n DatePicker.prototype.show = function (type, e) {\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.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 this.preventArgs = {\n preventDefault: function () {\n prevent_1 = false;\n },\n popup: this.popupObj,\n event: e || null,\n cancel: false,\n appendTo: document.body\n };\n this.trigger('open', this.preventArgs);\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 this.setAriaAttributes();\n }\n else {\n this.popupObj.destroy();\n this.popupWrapper = this.popupObj = null;\n }\n EventHandler.add(document, 'mousedown touchstart', this.documentHandler, this);\n }\n };\n /**\n * Hide the Calendar.\n * @returns void\n */\n DatePicker.prototype.hide = function (event) {\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 if (this.isCalendar()) {\n this.trigger('close', this.preventArgs);\n }\n if (this.isCalendar() && (prevent_2 && !this.preventArgs.cancel)) {\n var closeAnimation = {\n name: 'FadeOut',\n duration: CLOSEDURATION,\n };\n this.popupObj.hide();\n this.keyboardModule.destroy();\n removeClass(this.inputWrapper.buttons, ACTIVE);\n }\n this.setAriaAttributes();\n this.previousElementValue = this.inputElement.value;\n if (Browser.isDevice && this.modal) {\n this.modal.style.display = 'none';\n this.modal.outerHTML = '';\n this.modal = null;\n }\n EventHandler.remove(document, 'mousedown touchstart', this.documentHandler);\n }\n if (Browser.isDevice) {\n this.element.removeAttribute('readonly');\n }\n };\n /**\n * Sets the focus to widget for interaction.\n * @returns void\n */\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 var focusArguments = {\n model: this\n };\n this.trigger('focus', focusArguments);\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n * @returns void\n */\n DatePicker.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement) {\n this.inputElement.blur();\n removeClass([this.inputWrapper.container], [INPUTFOCUS]);\n var blurArguments = {\n model: this\n };\n this.trigger('blur', blurArguments);\n }\n };\n /**\n * Gets the current view of the DatePicker.\n * @returns string\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 /**\n * Navigates to specified month or year or decade view of the DatePicker.\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 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 * @returns void\n */\n DatePicker.prototype.destroy = function () {\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 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 for (var i = 0; i < this.inputElement.attributes.length; i++) {\n var prop = this.inputElement.attributes[i].name;\n if (isNullOrUndefined(this.inputEleCopy.getAttribute(prop))) {\n if (prop.toLowerCase() === 'value' || isNullOrUndefined(this.inputEleCopy.getAttribute('value'))) {\n this.inputElement.value = '';\n }\n this.inputElement.removeAttribute(prop);\n }\n }\n };\n /**\n * Initialize the event handler\n * @private\n */\n DatePicker.prototype.preRender = function () {\n this.inputEleCopy = this.element.cloneNode(true);\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.checkHtmlAttributes();\n _super.prototype.preRender.call(this);\n };\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.checkHtmlAttributes = function () {\n this.globalize = new Internationalization(this.locale);\n var attributes = ['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.format) ? this.format : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd'\n };\n }\n else {\n options = {\n format: !isNullOrUndefined(this.format) ? this.format : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n };\n }\n }\n else {\n if (this.calendarMode === 'Gregorian') {\n options = { format: this.format, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n options = { format: this.format, 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 var enabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '';\n this.setProperties({ enabled: !enabled }, true);\n break;\n case 'readonly':\n var readonly = this.inputElement.getAttribute(prop) === 'readonly' ||\n this.inputElement.getAttribute(prop) === '';\n this.setProperties({ readonly: readonly }, true);\n break;\n case 'placeholder':\n if (this.placeholder === null) {\n var placeholder = this.inputElement.getAttribute(prop);\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, true);\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 (!this.value) {\n var value = this.inputElement.getAttribute(prop);\n this.setProperties(setValue(prop, this.globalize.parseDate(value, options), {}), true);\n }\n break;\n case 'min':\n if (+this.min === +new Date(1900, 0, 1)) {\n this.setProperties(setValue(prop, this.globalize.parseDate(this.inputElement.getAttribute(prop)), {}), true);\n }\n break;\n case 'max':\n if (+this.max === +new Date(2099, 11, 31)) {\n this.setProperties(setValue(prop, this.globalize.parseDate(this.inputElement.getAttribute(prop)), {}), true);\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 * @private\n */\n DatePicker.prototype.getModuleName = function () {\n return 'datepicker';\n };\n DatePicker.prototype.disabledDates = function () {\n var valueCopy;\n var formatOptions;\n var globalize;\n valueCopy = this.checkDateValue(this.value) ? new Date(+this.value) : new Date('' + 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.format) ? this.format : this.dateTimeFormat,\n type: 'dateTime', skeleton: 'yMd'\n });\n }\n else {\n globalize = this.globalize.formatDate(valueCopy, {\n format: !isNullOrUndefined(this.format) ? this.format : 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.format, type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n formatOptions = { format: this.format, type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n inputVal = this.globalize.formatDate(valueCopy, formatOptions);\n }\n Input.setValue(inputVal, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n DatePicker.prototype.setAriaAttributes = function () {\n if (this.isCalendar()) {\n Input.addAttributes({ 'aria-expanded': 'true' }, this.inputElement);\n attributes(this.inputElement, {\n 'aria-activedescendant': '' + this.setActiveDescendant()\n });\n }\n else {\n Input.addAttributes({ 'aria-expanded': 'false' }, this.inputElement);\n attributes(this.inputElement, {\n 'aria-activedescendant': 'null'\n });\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 !== '' && isNullOrUndefined(this.value) || isDisabledDate)) {\n addClass([this.inputWrapper.container], ERROR);\n }\n else {\n removeClass([this.inputWrapper.container], ERROR);\n }\n };\n /**\n * Called internally if any of the property value changed.\n * returns void\n * @private\n */\n DatePicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n var options = { format: this.format, type: 'dateTime', skeleton: 'yMd' };\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 (typeof newProp.value === 'string') {\n newProp.value = this.checkDateValue(new Date('' + newProp.value));\n this.setProperties({ value: newProp.value }, true);\n }\n this.previousElementValue = this.inputElement.value;\n if (isNullOrUndefined(this.value)) {\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n }\n this.updateInput();\n this.changeTrigger(null);\n break;\n case 'format':\n this.updateInput();\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 if (!this.enabled) {\n this.inputElement.setAttribute('aria-disabled', 'true');\n }\n else {\n this.inputElement.setAttribute('aria-disabled', 'false');\n }\n this.bindEvents();\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 break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n break;\n case 'cssClass':\n Input.setCssClass(newProp.cssClass, [this.inputWrapper.container]);\n if (this.popupWrapper) {\n this.popupWrapper.className += ' ' + newProp.cssClass;\n }\n break;\n case 'showClearButton':\n Input.setClearButton(this.showClearButton, this.inputElement, this.inputWrapper);\n this.bindClearEvent();\n break;\n case 'strictMode':\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 default:\n if (this.calendarElement) {\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n }\n break;\n }\n this.hide(null);\n }\n };\n __decorate([\n Property(null)\n ], DatePicker.prototype, \"width\", 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(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(false)\n ], DatePicker.prototype, \"enableRtl\", 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 Event()\n ], DatePicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DatePicker.prototype, \"destroyed\", void 0);\n DatePicker = __decorate([\n NotifyPropertyChanges\n ], DatePicker);\n return DatePicker;\n}(Calendar));\nexport { DatePicker };\n","/**\n *\n */\nimport { EventHandler, Internationalization } from '@syncfusion/ej2-base';\nimport { rippleEffect } from '@syncfusion/ej2-base';\nimport { removeClass, addClass, attributes, HijriParser } from '@syncfusion/ej2-base';\nimport { getUniqueID } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n//class constant defination.\nvar OTHERMONTH = 'e-other-month';\nvar YEAR = 'e-year';\nvar MONTH = 'e-month';\nvar DECADE = 'e-decade';\nvar DISABLED = 'e-disabled';\nvar OVERLAY = 'e-overlay';\nvar WEEKEND = 'e-weekend';\nvar WEEKNUMBER = 'e-week-number';\nvar SELECTED = 'e-selected';\nvar FOCUSEDDATE = 'e-focused-date';\nvar OTHERMONTHROW = 'e-month-hide';\nvar TODAY = 'e-today';\nvar LINK = 'e-day';\nvar CELL = 'e-cell';\nvar dayMilliSeconds = 86400000;\nvar Islamic = /** @class */ (function () {\n function Islamic(instance) {\n this.calendarInstance = instance;\n }\n Islamic.prototype.getModuleName = function () {\n return 'islamic';\n };\n Islamic.prototype.islamicTitleUpdate = function (date, view) {\n var globalize = new Internationalization(this.calendarInstance.locale);\n switch (view) {\n case 'days':\n /* tslint:disable-next-line:max-line-length */\n this.calendarInstance.headerTitleElement.textContent = globalize.formatDate(date, { type: 'dateTime', format: 'MMMMyyyy', calendar: 'islamic' });\n break;\n case 'months':\n /* tslint:disable-next-line:max-line-length */\n this.calendarInstance.headerTitleElement.textContent = globalize.formatDate(date, { type: 'dateTime', format: 'yyyy', calendar: 'islamic' });\n }\n };\n /* tslint:disable-next-line:max-line-length */\n // tslint:disable-next-line:max-func-body-length\n Islamic.prototype.islamicRenderDays = function (currentDate, value, multiSelection, values) {\n var tdEles = [];\n var cellsCount = 42;\n var localDate = new Date('' + currentDate);\n var minMaxDate;\n var numCells = this.calendarInstance.weekNumber ? 8 : 7;\n // 8 and 7 denotes the number of columns to be specified.\n this.islamicTitleUpdate(currentDate, 'days');\n /* tslint:disable-next-line:no-any */\n var islamicDate = this.getIslamicDate(localDate);\n var gregorianObject = this.toGregorian(islamicDate.year, islamicDate.month, 1);\n var currentMonth = islamicDate.month;\n localDate = gregorianObject;\n while (localDate.getDay() !== this.calendarInstance.firstDayOfWeek) {\n this.calendarInstance.setStartDate(localDate, -1 * dayMilliSeconds);\n }\n for (var day = 0; day < cellsCount; ++day) {\n var weekEle = this.calendarInstance.createElement('td', { className: CELL });\n var weekAnchor = this.calendarInstance.createElement('span');\n if (day % 7 === 0 && this.calendarInstance.weekNumber) {\n weekAnchor.textContent = '' + this.calendarInstance.getWeek(localDate);\n weekEle.appendChild(weekAnchor);\n addClass([weekEle], '' + WEEKNUMBER);\n tdEles.push(weekEle);\n }\n minMaxDate = new Date(+localDate);\n localDate = this.calendarInstance.minMaxDate(localDate);\n /* tslint:disable-next-line:max-line-length */\n var dateFormatOptions = { type: 'dateTime', skeleton: 'full', calendar: 'islamic' };\n var date = this.calendarInstance.globalize.parseDate(this.calendarInstance.globalize.formatDate(localDate, dateFormatOptions), dateFormatOptions);\n var tdEle = this.islamicDayCell(localDate);\n /* tslint:disable-next-line:max-line-length */\n var title = this.calendarInstance.globalize.formatDate(localDate, { type: 'date', skeleton: 'full', calendar: 'islamic' });\n var dayLink = this.calendarInstance.createElement('span');\n /* tslint:disable-next-line:max-line-length */\n dayLink.textContent = this.calendarInstance.globalize.formatDate(localDate, { type: 'date', skeleton: 'd', calendar: 'islamic' });\n var disabled = (this.calendarInstance.min > localDate) || (this.calendarInstance.max < localDate);\n if (disabled) {\n addClass([tdEle], DISABLED);\n addClass([tdEle], OVERLAY);\n }\n else {\n dayLink.setAttribute('title', '' + title);\n }\n /* tslint:disable-next-line:no-any */\n var hijriMonthObject = this.getIslamicDate(localDate);\n if (currentMonth !== hijriMonthObject.month) {\n addClass([tdEle], OTHERMONTH);\n }\n if (localDate.getDay() === 0 || localDate.getDay() === 6) {\n addClass([tdEle], WEEKEND);\n }\n tdEle.appendChild(dayLink);\n this.calendarInstance.renderDayCellArgs = {\n date: localDate,\n isDisabled: false,\n element: tdEle,\n isOutOfRange: disabled\n };\n var argument = this.calendarInstance.renderDayCellArgs;\n this.calendarInstance.renderDayCellEvent(argument);\n if (argument.isDisabled) {\n if (this.calendarInstance.isMultiSelection) {\n if (!isNullOrUndefined(this.calendarInstance.values) && this.calendarInstance.values.length > 0) {\n for (var index = 0; index < values.length; index++) {\n /* tslint:disable-next-line:max-line-length */\n var localDateString = +new Date(this.calendarInstance.globalize.formatDate(argument.date, { type: 'date', skeleton: 'yMd', calendar: 'islamic' }));\n /* tslint:disable-next-line:max-line-length */\n var tempDateString = +new Date(this.calendarInstance.globalize.formatDate(this.calendarInstance.values[index], { type: 'date', skeleton: 'yMd', calendar: 'islamic' }));\n if (localDateString === tempDateString) {\n this.calendarInstance.values.splice(index, 1);\n index = -1;\n }\n }\n }\n }\n else if (value && +value === +argument.date) {\n this.calendarInstance.setProperties({ value: null }, true);\n }\n }\n if (this.calendarInstance.renderDayCellArgs.isDisabled && !tdEle.classList.contains(SELECTED)) {\n addClass([tdEle], DISABLED);\n addClass([tdEle], OVERLAY);\n if (+this.calendarInstance.renderDayCellArgs.date === +this.calendarInstance.todayDate) {\n this.calendarInstance.todayDisabled = true;\n }\n }\n var otherMnthBool = tdEle.classList.contains(OTHERMONTH);\n var disabledCls = tdEle.classList.contains(DISABLED);\n if (!disabledCls) {\n EventHandler.add(tdEle, 'click', this.calendarInstance.clickHandler, this.calendarInstance);\n }\n if (this.calendarInstance.isMultiSelection && !isNullOrUndefined(this.calendarInstance.values) &&\n !otherMnthBool && !disabledCls) {\n for (var tempValue = 0; tempValue < this.calendarInstance.values.length; tempValue++) {\n /* tslint:disable-next-line:max-line-length */\n var localDateString = this.calendarInstance.globalize.formatDate(localDate, { type: 'date', skeleton: 'short', calendar: 'islamic' });\n var tempDateString = this.calendarInstance.globalize.formatDate(this.calendarInstance.values[tempValue], { type: 'date', skeleton: 'short', calendar: 'islamic' });\n if (localDateString === tempDateString &&\n this.calendarInstance.getDateVal(localDate, this.calendarInstance.values[tempValue])) {\n addClass([tdEle], SELECTED);\n }\n else {\n this.calendarInstance.updateFocus(otherMnthBool, disabledCls, localDate, tdEle, currentDate);\n }\n }\n if (this.calendarInstance.values.length <= 0) {\n this.calendarInstance.updateFocus(otherMnthBool, disabledCls, localDate, tdEle, currentDate);\n }\n }\n else if (!otherMnthBool && !disabledCls && this.calendarInstance.getDateVal(localDate, value)) {\n addClass([tdEle], SELECTED);\n }\n else {\n this.calendarInstance.updateFocus(otherMnthBool, disabledCls, localDate, tdEle, currentDate);\n }\n if (date.getDate() === new Date().getDate() && date.getMonth() === new Date().getMonth()) {\n if (date.getFullYear() === new Date().getFullYear()) {\n addClass([tdEle], TODAY);\n }\n }\n localDate = new Date(+minMaxDate);\n tdEles.push(this.calendarInstance.renderDayCellArgs.element);\n this.calendarInstance.addDay(localDate, 1, null, this.calendarInstance.max, this.calendarInstance.min);\n }\n return tdEles;\n };\n Islamic.prototype.islamicIconHandler = function () {\n new Date('' + this.calendarInstance.currentDate).setDate(1);\n switch (this.calendarInstance.currentView()) {\n case 'Month':\n var prevMonthCompare = this.islamicCompareMonth(new Date('' + this.calendarInstance.currentDate), this.calendarInstance.min) < 1;\n var nextMonthCompare = this.islamicCompareMonth(new Date('' + this.calendarInstance.currentDate), this.calendarInstance.max) > -1;\n this.calendarInstance.previousIconHandler(prevMonthCompare);\n this.calendarInstance.nextIconHandler(nextMonthCompare);\n break;\n case 'Year':\n var prevYearCompare = this.hijriCompareYear(new Date('' + this.calendarInstance.currentDate), this.calendarInstance.min) < 1;\n var nextYearCompare = this.hijriCompareYear(new Date('' + this.calendarInstance.currentDate), this.calendarInstance.max) > -1;\n this.calendarInstance.previousIconHandler(prevYearCompare);\n this.calendarInstance.nextIconHandler(nextYearCompare);\n break;\n case 'Decade':\n var prevDecadeCompare = this.hijriCompareDecade(new Date('' + this.calendarInstance.currentDate), this.calendarInstance.min) < 1;\n var nextDecadeCompare = this.hijriCompareDecade(new Date('' + this.calendarInstance.currentDate), this.calendarInstance.max) > -1;\n this.calendarInstance.previousIconHandler(prevDecadeCompare);\n this.calendarInstance.nextIconHandler(nextDecadeCompare);\n }\n };\n Islamic.prototype.islamicNext = function () {\n this.calendarInstance.effect = '';\n var view = this.calendarInstance.getViewNumber(this.calendarInstance.currentView());\n /* tslint:disable-next-line:no-any */\n var islamicDate = this.getIslamicDate(this.calendarInstance.currentDate);\n switch (this.calendarInstance.currentView()) {\n case 'Year':\n this.calendarInstance.currentDate = this.toGregorian(islamicDate.year + 1, islamicDate.month, 1);\n this.calendarInstance.switchView(view);\n break;\n case 'Month':\n this.calendarInstance.currentDate = this.toGregorian(islamicDate.year, islamicDate.month + 1, 1);\n this.calendarInstance.switchView(view);\n break;\n case 'Decade':\n this.calendarInstance.currentDate = this.toGregorian(islamicDate.year + 10, islamicDate.month, 1);\n this.calendarInstance.switchView(view);\n break;\n }\n };\n Islamic.prototype.islamicPrevious = function () {\n var currentView = this.calendarInstance.getViewNumber(this.calendarInstance.currentView());\n this.calendarInstance.effect = '';\n /* tslint:disable-next-line:no-any */\n var islamicDate = this.getIslamicDate(this.calendarInstance.currentDate);\n switch (this.calendarInstance.currentView()) {\n case 'Month':\n this.calendarInstance.currentDate = this.toGregorian(islamicDate.year, islamicDate.month - 1, 1);\n this.calendarInstance.switchView(currentView);\n break;\n case 'Year':\n this.calendarInstance.currentDate = this.toGregorian(islamicDate.year - 1, islamicDate.month, 1);\n this.calendarInstance.switchView(currentView);\n break;\n case 'Decade':\n this.calendarInstance.currentDate = this.toGregorian(islamicDate.year - 10, islamicDate.month - 1, 1);\n this.calendarInstance.switchView(currentView);\n break;\n }\n };\n Islamic.prototype.islamicRenderYears = function (e, value) {\n this.calendarInstance.removeTableHeadElement();\n var numCells = 4;\n var days;\n var tdEles = [];\n var valueUtil = isNullOrUndefined(value);\n var curDate = new Date('' + this.calendarInstance.currentDate);\n var localDate = curDate;\n /* tslint:disable-next-line:no-any */\n var islamicDate = this.getIslamicDate(localDate);\n var gregorianObject = HijriParser.toGregorian(islamicDate.year, 1, 1);\n localDate = gregorianObject;\n var mon = islamicDate.month;\n var yr = islamicDate.year;\n var curYrs = islamicDate.year;\n /* tslint:disable-next-line:no-any */\n var minYr = (this.getIslamicDate(this.calendarInstance.min)).year;\n /* tslint:disable-next-line:no-any */\n var minMonth = (this.getIslamicDate(this.calendarInstance.min)).month;\n /* tslint:disable-next-line:no-any */\n var maxYr = (this.getIslamicDate(this.calendarInstance.max)).year;\n /* tslint:disable-next-line:no-any */\n var maxMonth = (this.getIslamicDate(this.calendarInstance.max)).month;\n this.islamicTitleUpdate(this.calendarInstance.currentDate, 'months');\n var disabled = (this.calendarInstance.min > localDate) || (this.calendarInstance.max < localDate);\n for (var month = 1; month <= 12; ++month) {\n /* tslint:disable-next-line:no-any */\n var islamicDate_1 = this.getIslamicDate(localDate);\n var gregorianObject_1 = HijriParser.toGregorian(islamicDate_1.year, month, 1);\n localDate = gregorianObject_1;\n var tdEle = this.islamicDayCell(localDate);\n var dayLink = this.calendarInstance.createElement('span');\n /* tslint:disable-next-line:max-line-length */\n /* tslint:disable-next-line:no-any */\n var localMonth = (value && (this.getIslamicDate(value)).month === (this.getIslamicDate(localDate)).month);\n /* tslint:disable-next-line:no-any tslint:disable-next-line:max-line-length */\n var select = (value && (this.getIslamicDate(value)).year === yr && localMonth);\n /* tslint:disable-next-line:max-line-length */\n dayLink.textContent = this.calendarInstance.globalize.formatDate(localDate, { type: 'dateTime', format: 'MMM', calendar: 'islamic' });\n if ((this.calendarInstance.min && (curYrs < minYr || (month < minMonth && curYrs === minYr))) || (this.calendarInstance.max && (curYrs > maxYr || (month > maxMonth && curYrs >= maxYr)))) {\n addClass([tdEle], DISABLED);\n }\n else if (!valueUtil && select) {\n addClass([tdEle], SELECTED);\n }\n else {\n /* tslint:disable-next-line:no-any */\n if ((this.getIslamicDate(localDate)).month === mon &&\n /* tslint:disable-next-line:no-any */\n (this.getIslamicDate(this.calendarInstance.currentDate)).month === mon) {\n addClass([tdEle], FOCUSEDDATE);\n }\n }\n if (!tdEle.classList.contains(DISABLED)) {\n EventHandler.add(tdEle, 'click', this.calendarInstance.clickHandler, this.calendarInstance);\n }\n tdEle.appendChild(dayLink);\n tdEles.push(tdEle);\n }\n this.islamicRenderTemplate(tdEles, numCells, YEAR, e, value);\n };\n Islamic.prototype.islamicRenderDecade = function (e, value) {\n this.calendarInstance.removeTableHeadElement();\n var numCells = 4;\n var yearCell = 12;\n var tdEles = [];\n var localDate = new Date('' + this.calendarInstance.currentDate);\n /* tslint:disable-next-line:no-any */\n var islamicDate = this.getIslamicDate(localDate);\n var gregorianObject = HijriParser.toGregorian(islamicDate.year, 1, 1);\n localDate = gregorianObject;\n var localYr = localDate.getFullYear();\n var startYr = new Date('' + (localYr - localYr % 10));\n var endYr = new Date('' + (localYr - localYr % 10 + (10 - 1)));\n /* tslint:disable-next-line:max-line-length */\n var startHdrYr = this.calendarInstance.globalize.formatDate(startYr, { type: 'dateTime', format: 'y', calendar: 'islamic' });\n var endHdrYr = this.calendarInstance.globalize.formatDate(endYr, { type: 'dateTime', format: 'y', calendar: 'islamic' });\n this.calendarInstance.headerTitleElement.textContent = startHdrYr + ' - ' + (endHdrYr);\n var start = new Date(localYr - (localYr % 10) - 2, 0, 1);\n var startYear = start.getFullYear();\n for (var rowCount = 1; rowCount <= yearCell; ++rowCount) {\n var year = startYear + rowCount;\n localDate.setFullYear(year);\n localDate.setDate(1);\n localDate.setMonth(0);\n /* tslint:disable-next-line:no-any */\n var islamicDate_2 = this.getIslamicDate(localDate);\n var gregorianObject_2 = HijriParser.toGregorian(islamicDate_2.year, 1, 1);\n localDate = gregorianObject_2;\n var tdEle = this.islamicDayCell(localDate);\n attributes(tdEle, { 'role': 'gridcell' });\n var dayLink = this.calendarInstance.createElement('span');\n /* tslint:disable-next-line:max-line-length */\n dayLink.textContent = this.calendarInstance.globalize.formatDate(localDate, { type: 'dateTime', format: 'y', calendar: 'islamic' });\n /* tslint:disable-next-line:no-any */\n if (year < new Date('' + this.calendarInstance.min).getFullYear()\n || year > new Date('' + this.calendarInstance.max).getFullYear()) {\n addClass([tdEle], DISABLED);\n }\n else if (!isNullOrUndefined(value) &&\n /* tslint:disable-next-line:no-any */\n (this.getIslamicDate(localDate)).year ===\n /* tslint:disable-next-line:no-any */\n (this.getIslamicDate(value)).year) {\n addClass([tdEle], SELECTED);\n }\n else {\n if (localDate.getFullYear() === this.calendarInstance.currentDate.getFullYear() && !tdEle.classList.contains(DISABLED)) {\n addClass([tdEle], FOCUSEDDATE);\n }\n }\n if (!tdEle.classList.contains(DISABLED)) {\n EventHandler.add(tdEle, 'click', this.calendarInstance.clickHandler, this.calendarInstance);\n }\n tdEle.appendChild(dayLink);\n tdEles.push(tdEle);\n }\n this.islamicRenderTemplate(tdEles, numCells, 'e-decade', e, value);\n };\n Islamic.prototype.islamicDayCell = function (localDate) {\n var dateFormatOptions = { skeleton: 'full', type: 'dateTime', calendar: 'islamic' };\n var formatDate = this.calendarInstance.globalize.formatDate(localDate, dateFormatOptions);\n var date = this.calendarInstance.globalize.parseDate(formatDate, dateFormatOptions);\n var value = date.valueOf();\n var attrs = {\n className: CELL, attrs: { 'id': '' + getUniqueID('' + value), 'aria-selected': 'false', 'role': 'gridcell' }\n };\n return this.calendarInstance.createElement('td', attrs);\n };\n Islamic.prototype.islamicRenderTemplate = function (elements, count, classNm, e, value) {\n var view = this.calendarInstance.getViewNumber(this.calendarInstance.currentView());\n var trEle;\n this.calendarInstance.tableBodyElement = this.calendarInstance.createElement('tbody');\n this.calendarInstance.table.appendChild(this.calendarInstance.tableBodyElement);\n removeClass([this.calendarInstance.contentElement, this.calendarInstance.headerElement], [MONTH, DECADE, YEAR]);\n addClass([this.calendarInstance.contentElement, this.calendarInstance.headerElement], [classNm]);\n var weekNumCell = 41;\n var numberCell = 35;\n var otherMonthCell = 6;\n var row = count;\n var rowCount = 0;\n for (var dayCell = 0; dayCell < elements.length / count; ++dayCell) {\n trEle = this.calendarInstance.createElement('tr', { attrs: { 'role': 'row' } });\n for (rowCount = 0 + rowCount; rowCount < row; rowCount++) {\n if (!elements[rowCount].classList.contains('e-week-number') && !isNullOrUndefined(elements[rowCount].children[0])) {\n addClass([elements[rowCount].children[0]], [LINK]);\n rippleEffect(elements[rowCount].children[0], {\n duration: 600,\n isCenterRipple: true\n });\n }\n trEle.appendChild(elements[rowCount]);\n if (this.calendarInstance.weekNumber &&\n rowCount === otherMonthCell + 1 && elements[otherMonthCell + 1].classList.contains(OTHERMONTH)) {\n addClass([trEle], OTHERMONTHROW);\n }\n if (!this.calendarInstance.weekNumber\n && rowCount === otherMonthCell && elements[otherMonthCell].classList.contains(OTHERMONTH)) {\n addClass([trEle], OTHERMONTHROW);\n }\n if (this.calendarInstance.weekNumber) {\n if (rowCount === weekNumCell && elements[weekNumCell].classList.contains(OTHERMONTH)) {\n addClass([trEle], OTHERMONTHROW);\n }\n }\n else {\n if (rowCount === numberCell && elements[numberCell].classList.contains(OTHERMONTH)) {\n addClass([trEle], OTHERMONTHROW);\n }\n }\n }\n row = row + count;\n rowCount = rowCount + 0;\n this.calendarInstance.tableBodyElement.appendChild(trEle);\n }\n this.calendarInstance.table.querySelector('tbody').className = this.calendarInstance.effect;\n this.islamicIconHandler();\n if (view !== this.calendarInstance.getViewNumber(this.calendarInstance.currentView())\n || (view === 0 && view !== this.calendarInstance.getViewNumber(this.calendarInstance.currentView()))) {\n this.calendarInstance.navigateHandler(e);\n }\n this.calendarInstance.setAriaActiveDescendant();\n this.calendarInstance.changedArgs = { value: this.calendarInstance.value, values: this.calendarInstance.values };\n this.calendarInstance.changeHandler();\n };\n Islamic.prototype.islamicCompareMonth = function (start, end) {\n /* tslint:disable-next-line:no-any */\n var hijriStart = (this.getIslamicDate(start));\n /* tslint:disable-next-line:no-any */\n var hijriEnd = (this.getIslamicDate(end));\n var result;\n if (hijriStart.year > hijriEnd.year) {\n result = 1;\n }\n else if (hijriStart.year < hijriEnd.year) {\n result = -1;\n }\n else {\n result = hijriStart.month === hijriEnd.month ? 0 : hijriStart.month > hijriEnd.month ? 1 : -1;\n }\n return result;\n };\n ;\n Islamic.prototype.islamicCompare = function (startDate, endDate, modifier) {\n /* tslint:disable-next-line:no-any */\n var hijriStart = this.getIslamicDate(startDate);\n /* tslint:disable-next-line:no-any */\n var hijriEnd = this.getIslamicDate(endDate);\n var start = hijriEnd.year;\n var end;\n var result;\n end = start;\n result = 0;\n if (modifier) {\n start = start - start % modifier;\n end = start - start % modifier + modifier - 1;\n }\n if (hijriStart.year > end) {\n result = 1;\n }\n else if (hijriStart.year < start) {\n result = -1;\n }\n return result;\n };\n ;\n /* tslint:disable-next-line:no-any */\n Islamic.prototype.getIslamicDate = function (date) {\n /* tslint:disable-next-line:no-any */\n return (HijriParser.getHijriDate(date));\n };\n Islamic.prototype.toGregorian = function (year, month, date) {\n return HijriParser.toGregorian(year, month, date);\n };\n Islamic.prototype.hijriCompareYear = function (start, end) {\n return this.islamicCompare(start, end, 0);\n };\n Islamic.prototype.hijriCompareDecade = function (start, end) {\n return this.islamicCompare(start, end, 10);\n };\n ;\n Islamic.prototype.destroy = function () {\n this.calendarInstance = null;\n };\n return Islamic;\n}());\nexport { Islamic };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n///
\nimport { Property, EventHandler, Internationalization, NotifyPropertyChanges, detach, getUniqueID } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, Event, Browser, L10n, ChildProperty } from '@syncfusion/ej2-base';\nimport { addClass, createElement, remove, closest, select, prepend, removeClass, attributes, Collection } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, isUndefined, formatUnit, setValue, rippleEffect, merge, extend } from '@syncfusion/ej2-base';\nimport { CalendarBase } from '../calendar/calendar';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { ListBase, cssClass as ListBaseClasses } from '@syncfusion/ej2-lists';\nvar DATERANGEWRAPPER = 'e-date-range-wrapper';\nvar INPUTCONTAINER = 'e-input-group';\nvar DATERANGEICON = 'e-input-group-icon e-range-icon e-icons';\nvar POPUP = 'e-popup';\nvar LEFTCALENDER = 'e-left-calendar';\nvar RIGHTCALENDER = 'e-right-calendar';\nvar LEFTCONTAINER = 'e-left-container';\nvar RIGHTCONTAINER = 'e-right-container';\nvar ROOT = 'e-daterangepicker';\nvar ERROR = 'e-error';\nvar ACTIVE = 'e-active';\nvar STARTENDCONTAINER = 'e-start-end';\nvar STARTDATE = 'e-start-date';\nvar ENDDATE = 'e-end-date';\nvar STARTBUTTON = 'e-start-btn';\nvar INPUTFOCUS = 'e-input-focus';\nvar ENDBUTTON = 'e-end-btn';\nvar RANGEHOVER = 'e-range-hover';\nvar OTHERMONTH = 'e-other-month';\nvar STARTLABEL = 'e-start-label';\nvar ENDLABEL = 'e-end-label';\nvar DISABLED = 'e-disabled';\nvar SELECTED = 'e-selected';\nvar CALENDAR = 'e-calendar';\nvar NEXTICON = 'e-next';\nvar PREVICON = 'e-prev';\nvar HEADER = 'e-header';\nvar TITLE = 'e-title';\nvar ICONCONTAINER = 'e-icon-container';\nvar RANGECONTAINER = 'e-date-range-container';\nvar RANGEHEADER = 'e-range-header';\nvar PRESETS = 'e-presets';\nvar FOOTER = 'e-footer';\nvar RANGEBORDER = 'e-range-border';\nvar TODAY = 'e-today';\nvar FOCUSDATE = 'e-focused-date';\nvar CONTENT = 'e-content';\nvar DAYSPAN = 'e-day-span';\nvar WEEKNUMBER = 'e-week-number';\nvar DATEDISABLED = 'e-date-disabled';\nvar ICONDISABLED = 'e-icon-disabled';\nvar CALENDARCONTAINER = 'e-calendar-container';\nvar SEPARATOR = 'e-separator';\nvar APPLY = 'e-apply';\nvar CANCEL = 'e-cancel';\nvar DEVICE = 'e-device';\nvar OVERLAY = 'e-overlay';\nvar CHANGEICON = 'e-change-icon e-icons';\nvar LISTCLASS = ListBaseClasses.li;\nvar RTL = 'e-rtl';\nvar HOVER = 'e-hover';\nvar OVERFLOW = 'e-range-overflow';\nvar OFFSETVALUE = 4;\nvar PRIMARY = 'e-primary';\nvar FLAT = 'e-flat';\nvar CSS = 'e-css';\nvar Presets = /** @class */ (function (_super) {\n __extends(Presets, _super);\n function Presets() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], Presets.prototype, \"label\", void 0);\n __decorate([\n Property()\n ], Presets.prototype, \"start\", void 0);\n __decorate([\n Property()\n ], Presets.prototype, \"end\", void 0);\n return Presets;\n}(ChildProperty));\nexport { Presets };\n/**\n * Represents the DateRangePicker component that allows user to select the date range from the calendar\n * or entering the range through the input element.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar DateRangePicker = /** @class */ (function (_super) {\n __extends(DateRangePicker, _super);\n /**\n * Constructor for creating the widget\n */\n function DateRangePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isCustomRange = false;\n _this.isCustomWindow = false;\n _this.presetsItem = [];\n _this.liCollections = [];\n _this.previousEleValue = '';\n _this.isKeyPopup = false;\n _this.dateDisabled = false;\n _this.isRangeIconClicked = false;\n _this.isMaxDaysClicked = false;\n _this.disabledDays = [];\n _this.preventBlur = false;\n _this.preventFocus = false;\n return _this;\n }\n /**\n * To Initialize the control rendering.\n * @return void\n * @private\n */\n DateRangePicker.prototype.render = function () {\n this.initialize();\n this.setProperties({ startDate: this.startValue }, true);\n this.setProperties({ endDate: this.endValue }, true);\n this.setModelValue();\n };\n /**\n * Initialize the event handler\n * @returns void\n * @private\n */\n DateRangePicker.prototype.preRender = function () {\n this.presetKeyConfig = {\n moveUp: 'uparrow',\n moveDown: 'downarrow',\n enter: 'enter',\n tab: 'tab',\n spacebar: 'space'\n };\n this.keyInputConfigs = {\n altDownArrow: 'alt+downarrow',\n escape: 'escape',\n enter: 'enter',\n tab: 'tab',\n altRightArrow: 'alt+rightarrow',\n altLeftArrow: 'alt+leftarrow'\n };\n this.defaultConstant = {\n placeholder: '',\n startLabel: 'Start Date',\n endLabel: 'End Date',\n customRange: 'Custom Range',\n applyText: 'Apply',\n cancelText: 'Cancel',\n selectedDays: 'Selected Days',\n days: 'days'\n };\n /**\n * Mobile View\n */\n this.isMobile = window.matchMedia('(max-width:550px)').matches;\n this.inputElement = this.element;\n this.angularTag = null;\n if (this.element.tagName === 'EJS-DATERANGEPICKER') {\n this.angularTag = this.element.tagName;\n this.inputElement = this.createElement('input');\n this.element.appendChild(this.inputElement);\n }\n this.cloneElement = this.element.cloneNode(true);\n if (this.element.getAttribute('id')) {\n if (this.angularTag !== null) {\n this.inputElement.id = this.element.getAttribute('id') + '_input';\n }\n }\n else {\n this.element.id = getUniqueID('ej2-datetimepicker');\n if (this.angularTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n this.initProperty();\n _super.prototype.preRender.call(this);\n this.navNextFunction = this.navNextMonth.bind(this);\n this.navPrevFunction = this.navPrevMonth.bind(this);\n this.deviceNavNextFunction = this.deviceNavNext.bind(this);\n this.deviceNavPrevFunction = this.deviceNavPrevious.bind(this);\n this.initStartDate = this.checkDateValue(this.startValue);\n this.initEndDate = this.checkDateValue(this.endValue);\n this.formElement = closest(this.element, 'form');\n };\n ;\n DateRangePicker.prototype.updateValue = function () {\n if (this.value && this.value.length > 0) {\n if (this.value[0] instanceof Date && !isNaN(+this.value[0])) {\n this.setProperties({ startDate: this.value[0] }, true);\n this.startValue = this.value[0];\n }\n else if (typeof this.value[0] === 'string') {\n if (+this.value[0] === 0 || isNaN(+(new Date('' + this.value[0])))) {\n this.startValue = null;\n this.setValue();\n }\n else {\n this.setProperties({ startDate: new Date('' + this.value[0]) }, true);\n this.startValue = new Date('' + this.value[0]);\n }\n }\n else {\n this.startValue = null;\n this.setValue();\n }\n if (this.value[1] instanceof Date && !isNaN(+this.value[1])) {\n this.setProperties({ endDate: this.value[1] }, true);\n this.endValue = this.value[1];\n }\n else if (typeof this.value[1] === 'string') {\n if (+this.value[0] === 0 || isNaN(+(new Date('' + this.value[0])))) {\n this.setProperties({ endDate: null }, true);\n this.endValue = null;\n this.setValue();\n }\n else {\n this.setProperties({ endDate: new Date('' + this.value[1]) }, true);\n this.endValue = new Date('' + this.value[1]);\n this.setValue();\n }\n }\n else {\n this.setProperties({ endDate: null }, true);\n this.endValue = null;\n this.setValue();\n }\n }\n else if (this.value && this.value.start) {\n if (this.value.start instanceof Date && !isNaN(+this.value.start)) {\n this.setProperties({ startDate: this.value.start }, true);\n this.startValue = this.value.start;\n }\n else if (typeof this.value.start === 'string') {\n this.setProperties({ startDate: new Date('' + this.value.start) }, true);\n this.startValue = new Date('' + this.value.start);\n }\n else {\n this.startValue = null;\n this.setValue();\n }\n if (this.value.end instanceof Date && !isNaN(+this.value.end)) {\n this.setProperties({ endDate: this.value.end }, true);\n this.endValue = this.value.end;\n }\n else if (typeof this.value.end === 'string') {\n this.setProperties({ endDate: new Date('' + this.value.end) }, true);\n this.endValue = new Date('' + this.value.end);\n this.setValue();\n }\n else {\n this.setProperties({ endDate: null }, true);\n this.endValue = null;\n this.setValue();\n }\n }\n else if (isNullOrUndefined(this.value)) {\n this.endValue = this.checkDateValue(new Date('' + this.endDate));\n this.startValue = this.checkDateValue(new Date('' + this.startDate));\n this.setValue();\n }\n };\n DateRangePicker.prototype.initProperty = function () {\n this.globalize = new Internationalization(this.locale);\n if (isNullOrUndefined(this.firstDayOfWeek) || this.firstDayOfWeek > 6 || this.firstDayOfWeek < 0) {\n this.setProperties({ firstDayOfWeek: this.globalize.getFirstDayOfWeek() }, true);\n }\n this.updateValue();\n };\n DateRangePicker.prototype.initialize = function () {\n if (this.angularTag !== null) {\n this.validationAttribute(this.element, this.inputElement);\n }\n this.checkHtmlAttributes();\n merge(this.keyConfigs, { shiftTab: 'shift+tab' });\n this.setProperties({ startDate: this.checkDateValue(new Date('' + this.startValue)) }, true); // persist the value propeerty.\n this.setProperties({ endValue: this.checkDateValue(new Date('' + this.endValue)) }, true);\n this.setValue();\n this.setProperties({ min: this.checkDateValue(new Date('' + this.min)) }, true);\n this.setProperties({ max: this.checkDateValue(new Date('' + this.max)) }, true);\n this.l10n = new L10n('daterangepicker', this.defaultConstant, this.locale);\n this.l10n.setLocale(this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n this.processPresets();\n this.createInput();\n this.setRangeAllowEdit();\n this.bindEvents();\n };\n DateRangePicker.prototype.setRangeAllowEdit = 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 };\n DateRangePicker.prototype.validationAttribute = function (element, input) {\n var name = element.getAttribute('name') ? element.getAttribute('name') : element.getAttribute('id');\n input.setAttribute('name', name);\n element.removeAttribute('name');\n var attributes = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attributes.length; i++) {\n if (isNullOrUndefined(element.getAttribute(attributes[i]))) {\n continue;\n }\n var attr = element.getAttribute(attributes[i]);\n input.setAttribute(attributes[i], attr);\n element.removeAttribute(attributes[i]);\n }\n };\n DateRangePicker.prototype.processPresets = function () {\n this.presetsItem = [];\n var i = 0;\n if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label)) {\n for (var _i = 0, _a = this.presets; _i < _a.length; _i++) {\n var range = _a[_i];\n var id = range.label.replace(/\\s+/g, '') + '_' + (++i);\n if (typeof range.end === 'string') {\n this.presetsItem.push({\n id: id, text: range.label, end: new Date('' + range.end), start: new Date('' + range.start)\n });\n }\n else {\n this.presetsItem.push({ id: id, text: range.label, start: range.start, end: range.end });\n }\n }\n var startDate = isNullOrUndefined(this.startValue) ? null : new Date(+this.startValue);\n var endDate = isNullOrUndefined(this.endValue) ? null : new Date(+this.endValue);\n this.presetsItem.push({ id: 'custom_range', text: this.l10n.getConstant('customRange'), start: startDate, end: endDate });\n if (!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) {\n this.isCustomRange = true;\n this.activeIndex = this.presetsItem.length - 1;\n }\n }\n };\n DateRangePicker.prototype.bindEvents = function () {\n if (this.enabled) {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.rangeIconHandler, this);\n EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);\n EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);\n EventHandler.add(this.inputElement, 'change', this.inputChangeHandler, this);\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);\n }\n if (!this.isMobile) {\n this.inputKeyboardModule = new KeyboardEvents(this.inputElement, {\n eventName: 'keydown', keyAction: this.inputHandler.bind(this), keyConfigs: this.keyInputConfigs\n });\n }\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n }\n else {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.rangeIconHandler);\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);\n EventHandler.remove(this.inputElement, 'change', this.inputChangeHandler);\n if (this.showClearButton) {\n EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler);\n }\n if (!this.isMobile) {\n if (!isNullOrUndefined(this.inputKeyboardModule)) {\n this.inputKeyboardModule.destroy();\n }\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n }\n };\n DateRangePicker.prototype.updateHiddenInput = function () {\n if (this.firstHiddenChild && this.secondHiddenChild) {\n var format = { type: 'datetime', skeleton: 'yMd' };\n if (typeof this.startDate === 'string') {\n this.startDate = this.globalize.parseDate(this.startDate, format);\n }\n if (typeof this.endDate === 'string') {\n this.endDate = this.globalize.parseDate(this.endDate, format);\n }\n this.firstHiddenChild.value = (this.startDate && this.globalize.formatDate(this.startDate, format))\n || (this.inputElement.value);\n this.secondHiddenChild.value = (this.endDate && this.globalize.formatDate(this.endDate, format)) ||\n (this.inputElement.value);\n this.dispatchEvent(this.firstHiddenChild, 'focusout');\n this.dispatchEvent(this.firstHiddenChild, 'change');\n }\n };\n DateRangePicker.prototype.inputChangeHandler = function (e) {\n e.stopPropagation();\n this.updateHiddenInput();\n };\n DateRangePicker.prototype.bindClearEvent = function () {\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.resetHandler, this);\n }\n };\n DateRangePicker.prototype.resetHandler = function (e) {\n this.valueType = this.value;\n e.preventDefault();\n this.clear();\n this.changeTrigger(e);\n this.clearRange();\n this.hide(e);\n };\n DateRangePicker.prototype.formResetHandler = function (e) {\n if (this.formElement && e.target === this.formElement) {\n this.value = null;\n if (this.inputElement) {\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n attributes(this.inputElement, { 'aria-invalid': 'false' });\n removeClass([this.inputWrapper.container], ERROR);\n }\n }\n };\n DateRangePicker.prototype.clear = function () {\n if (this.startValue !== null) {\n this.startValue = null;\n }\n if (this.endValue !== null) {\n this.endValue = null;\n }\n if (this.value && this.value.start) {\n this.setProperties({ value: { start: null, end: null } }, true);\n }\n if (this.value !== null && this.value.length > 0) {\n this.setProperties({ value: null }, true);\n }\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n if (!(isNullOrUndefined(this.applyButton))) {\n this.applyButton.disabled = this.applyButton.element.disabled = true;\n }\n this.removeSelection();\n };\n DateRangePicker.prototype.rangeIconHandler = function (e) {\n if (this.isMobile) {\n this.element.setAttribute('readonly', 'readonly');\n }\n e.preventDefault();\n this.targetElement = null;\n if (this.isPopupOpen()) {\n this.applyFunction(e);\n }\n else {\n this.isRangeIconClicked = true;\n this.inputWrapper.container.children[0].focus();\n this.show(null, e);\n if (!this.isMobile) {\n if (!isNullOrUndefined(this.leftCalendar)) {\n this.isRangeIconClicked = false;\n this.calendarFocus();\n this.isRangeIconClicked = true;\n }\n }\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n };\n DateRangePicker.prototype.checkHtmlAttributes = function () {\n this.globalize = new Internationalization(this.locale);\n var attributes;\n attributes = ['startDate', 'endDate', 'minDays', 'maxDays', 'min', 'max', 'disabled',\n 'readonly', 'style', 'name', 'placeholder', 'type'];\n var format = { format: this.format, type: 'date', skeleton: 'yMd' };\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 var disabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '';\n this.setProperties({ enabled: !disabled }, true);\n break;\n case 'readonly':\n var readonly = this.inputElement.getAttribute(prop) === 'readonly' ||\n this.inputElement.getAttribute(prop) === '';\n this.setProperties({ readonly: readonly }, true);\n break;\n case 'placeholder':\n if (isNullOrUndefined(this.placeholder) || this.placeholder.trim() === '') {\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, true);\n }\n break;\n case 'style':\n this.inputElement.setAttribute('style', '' + this.inputElement.getAttribute(prop));\n break;\n case 'min':\n if (isNullOrUndefined(this.min) || +this.min === +new Date(1900, 0, 1)) {\n var dateValue = this.globalize.parseDate(this.inputElement.getAttribute(prop), format);\n this.setProperties(setValue(prop, dateValue, {}), true);\n }\n break;\n case 'name':\n this.inputElement.setAttribute('name', '' + this.inputElement.getAttribute(prop));\n break;\n case 'max':\n if (isNullOrUndefined(this.max) || +this.max === +new Date(2099, 11, 31)) {\n var dateValue = this.globalize.parseDate(this.inputElement.getAttribute(prop), format);\n this.setProperties(setValue(prop, dateValue, {}), true);\n }\n break;\n case 'startDate':\n if (isNullOrUndefined(this.startDate)) {\n var dateValue = this.globalize.parseDate(this.inputElement.getAttribute(prop), format);\n this.startValue = dateValue;\n this.setValue();\n }\n break;\n case 'endDate':\n if (isNullOrUndefined(this.endDate)) {\n var dateValue = this.globalize.parseDate(this.inputElement.getAttribute(prop), format);\n this.endValue = dateValue;\n this.setValue();\n }\n break;\n case 'minDays':\n if (isNullOrUndefined(this.minDays)) {\n this.setProperties(setValue(prop, parseInt(this.inputElement.getAttribute(prop), 10), {}), true);\n }\n break;\n case 'maxDays':\n if (isNullOrUndefined(this.maxDays)) {\n this.setProperties(setValue(prop, parseInt(this.inputElement.getAttribute(prop), 10), {}), true);\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 DateRangePicker.prototype.createPopup = function () {\n for (var i = 0; i < this.presetsItem.length; i++) {\n if ((i !== (this.presetsItem.length - 1)) && this.presetsItem[i].id === 'custom_range') {\n this.presetsItem.splice(i, 1);\n }\n }\n this.activeIndex = this.presetsItem.length - 1;\n this.isCustomRange = true;\n for (var i = 0; i <= this.presetsItem.length - 2; i++) {\n var startDate = this.presetsItem[i].start;\n var endDate = this.presetsItem[i].end;\n if (this.startValue && this.endValue) {\n if ((+startDate.setMilliseconds(0) === +this.startValue.setMilliseconds(0)) &&\n (+endDate.setMilliseconds(0) === +this.endValue.setMilliseconds(0))) {\n this.activeIndex = i;\n this.isCustomRange = false;\n }\n }\n }\n this.popupWrapper = createElement('div', { id: this.element.id + '_popup', className: ROOT + ' ' + POPUP });\n var isPreset = (!this.isCustomRange || this.isMobile);\n if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label) && isPreset) {\n this.isCustomWindow = false;\n this.createPresets();\n this.listRippleEffect();\n this.renderPopup();\n }\n else {\n this.isCustomWindow = true;\n this.renderControl();\n }\n };\n DateRangePicker.prototype.renderControl = function () {\n this.createControl();\n this.bindCalendarEvents();\n this.updateRange((this.isMobile ? [this.calendarElement] : [this.leftCalendar, this.rightCalendar]));\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue)) {\n this.disabledDateRender();\n }\n this.updateHeader();\n };\n DateRangePicker.prototype.clearCalendarEvents = function () {\n EventHandler.clearEvents(this.leftCalPrevIcon);\n EventHandler.clearEvents(this.leftCalNextIcon);\n EventHandler.clearEvents(this.rightCalPrevIcon);\n EventHandler.clearEvents(this.rightCalNextIcon);\n };\n DateRangePicker.prototype.updateNavIcons = function () {\n if (this.currentView() === 'Year' || this.currentView() === 'Decade') {\n return;\n }\n this.previousIcon = this.rightCalPrevIcon;\n this.nextIcon = this.leftCalNextIcon;\n this.nextIconHandler(this.compareMonths(new Date('' + this.leftCalCurrentDate), this.rightCalCurrentDate) < 1);\n this.previousIconHandler(this.compareMonths(new Date('' + this.leftCalCurrentDate), this.rightCalCurrentDate) < 1);\n };\n DateRangePicker.prototype.calendarIconEvent = function () {\n this.clearCalendarEvents();\n if (this.leftCalPrevIcon && !this.leftCalPrevIcon.classList.contains(DISABLED)) {\n EventHandler.add(this.leftCalPrevIcon, 'mousedown', this.navPrevFunction);\n }\n if (this.leftCalNextIcon && !this.leftCalNextIcon.classList.contains(DISABLED)) {\n EventHandler.add(this.leftCalNextIcon, 'mousedown', this.navNextFunction);\n }\n if (this.rightCalPrevIcon && !this.rightCalPrevIcon.classList.contains(DISABLED)) {\n EventHandler.add(this.rightCalPrevIcon, 'mousedown', this.navPrevFunction);\n }\n if (this.rightCalNextIcon && !this.rightCalNextIcon.classList.contains(DISABLED)) {\n EventHandler.add(this.rightCalNextIcon, 'mousedown', this.navNextFunction);\n }\n };\n DateRangePicker.prototype.bindCalendarEvents = function () {\n if (!this.isMobile) {\n this.updateNavIcons();\n this.calendarIconEvent();\n this.calendarIconRipple();\n this.headerTitleElement = this.popupObj.element.querySelector('.' + RIGHTCALENDER + ' .' + HEADER + ' .' + TITLE);\n this.headerTitleElement = this.popupObj.element.querySelector('.' + LEFTCALENDER + ' .' + HEADER + ' .' + TITLE);\n this.leftKeyboardModule = new KeyboardEvents(this.leftCalendar, {\n eventName: 'keydown',\n keyAction: this.keyInputHandler.bind(this),\n keyConfigs: this.keyConfigs\n });\n this.rightKeyboardModule = new KeyboardEvents(this.rightCalendar, {\n eventName: 'keydown',\n keyAction: this.keyInputHandler.bind(this),\n keyConfigs: this.keyConfigs\n });\n }\n else {\n this.deviceCalendarEvent();\n EventHandler.add(this.startButton.element, 'click', this.deviceHeaderClick, this);\n EventHandler.add(this.endButton.element, 'click', this.deviceHeaderClick, this);\n }\n this.bindCalendarCellEvents();\n this.removeFocusedDate();\n };\n DateRangePicker.prototype.calendarIconRipple = function () {\n rippleEffect(this.leftCalPrevIcon, { selector: '.e-prev', duration: 400, isCenterRipple: true });\n rippleEffect(this.leftCalNextIcon, { selector: '.e-next', duration: 400, isCenterRipple: true });\n rippleEffect(this.rightCalPrevIcon, { selector: '.e-prev', duration: 400, isCenterRipple: true });\n rippleEffect(this.rightCalNextIcon, { selector: '.e-next', duration: 400, isCenterRipple: true });\n };\n DateRangePicker.prototype.deviceCalendarEvent = function () {\n EventHandler.clearEvents(this.nextIcon);\n EventHandler.clearEvents(this.previousIcon);\n rippleEffect(this.nextIcon, { selector: '.e-prev', duration: 400, isCenterRipple: true });\n rippleEffect(this.previousIcon, { selector: '.e-next', duration: 400, isCenterRipple: true });\n if (this.nextIcon && !this.nextIcon.classList.contains(DISABLED)) {\n EventHandler.add(this.nextIcon, 'mousedown', this.deviceNavNextFunction);\n }\n if (this.previousIcon && !this.previousIcon.classList.contains(DISABLED)) {\n EventHandler.add(this.previousIcon, 'mousedown', this.deviceNavPrevFunction);\n }\n };\n DateRangePicker.prototype.deviceNavNext = function (e) {\n var calendar = closest(e.target, '.' + CALENDAR);\n this.updateDeviceCalendar(calendar);\n this.navigateNext(e);\n this.deviceNavigation();\n };\n DateRangePicker.prototype.deviceNavPrevious = function (e) {\n var calendar = closest(e.target, '.' + CALENDAR);\n this.updateDeviceCalendar(calendar);\n this.navigatePrevious(e);\n this.deviceNavigation();\n };\n DateRangePicker.prototype.updateDeviceCalendar = function (calendar) {\n if (calendar) {\n this.previousIcon = calendar.querySelector('.' + PREVICON);\n this.nextIcon = calendar.querySelector('.' + NEXTICON);\n this.calendarElement = calendar;\n this.deviceCalendar = calendar;\n this.contentElement = calendar.querySelector('.' + CONTENT);\n this.tableBodyElement = select('.' + CONTENT + ' tbody', calendar);\n this.table = calendar.querySelector('.' + CONTENT).getElementsByTagName('table')[0];\n this.headerTitleElement = calendar.querySelector('.' + HEADER + ' .' + TITLE);\n this.headerElement = calendar.querySelector('.' + HEADER);\n }\n };\n DateRangePicker.prototype.deviceHeaderClick = function (event) {\n var element = event.currentTarget;\n if (element.classList.contains(STARTBUTTON) && !isNullOrUndefined(this.startValue)) {\n this.endButton.element.classList.remove(ACTIVE);\n this.startButton.element.classList.add(ACTIVE);\n var calendar = this.popupObj.element.querySelector('.' + CALENDAR);\n this.updateDeviceCalendar(calendar);\n if (isNullOrUndefined(this.calendarElement.querySelector('.' + STARTDATE + ':not(.e-other-month)'))) {\n this.currentDate = new Date(+this.startValue);\n remove(this.tableBodyElement);\n this.renderMonths();\n this.deviceNavigation();\n }\n this.removeClassDisabled();\n }\n else if (!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) {\n this.startButton.element.classList.remove(ACTIVE);\n this.endButton.element.classList.add(ACTIVE);\n var calendar = this.popupObj.element.querySelector('.' + CALENDAR);\n this.updateDeviceCalendar(calendar);\n if (isNullOrUndefined(this.calendarElement.querySelector('.' + ENDDATE + ':not(.e-other-month)'))) {\n this.currentDate = new Date(+this.endValue);\n remove(this.tableBodyElement);\n this.renderMonths();\n this.deviceNavigation();\n }\n this.updateMinMaxDays(this.popupObj.element.querySelector('.' + CALENDAR));\n this.selectableDates();\n }\n };\n DateRangePicker.prototype.inputFocusHandler = function () {\n this.preventBlur = false;\n var focusArguments = {\n model: this\n };\n if (!this.preventFocus) {\n this.preventFocus = true;\n this.trigger('focus', focusArguments);\n }\n this.updateHiddenInput();\n };\n DateRangePicker.prototype.inputBlurHandler = function (e) {\n if (!this.preventBlur) {\n var value = this.inputElement.value;\n if (!isNullOrUndefined(this.presetsItem)) {\n if (this.presetsItem.length > 0 && this.previousEleValue !== this.inputElement.value) {\n this.activeIndex = this.presetsItem.length - 1;\n this.isCustomRange = true;\n }\n }\n if (!isNullOrUndefined(value) && value.trim() !== '') {\n var range = value.split(' ' + this.separator + ' ');\n if (range.length > 1) {\n var dateOptions = { format: this.format, type: 'date', skeleton: 'yMd' };\n var startDate = this.globalize.parseDate(range[0].trim(), dateOptions);\n var endDate = this.globalize.parseDate(range[1].trim(), dateOptions);\n if (!isNullOrUndefined(startDate) && !isNaN(+startDate) && !isNullOrUndefined(endDate) && !isNaN(+endDate)) {\n this.startValue = startDate;\n this.endValue = endDate;\n this.setValue();\n this.refreshControl();\n this.changeTrigger(e);\n if (!this.preventBlur && document.activeElement !== this.inputElement) {\n this.preventFocus = false;\n var blurArguments = {\n model: this\n };\n this.trigger('blur', blurArguments);\n }\n this.updateHiddenInput();\n return;\n }\n else {\n if (!this.strictMode) {\n this.startValue = null;\n this.endValue = null;\n this.setValue();\n }\n }\n }\n else {\n if (!this.strictMode) {\n this.startValue = null;\n this.endValue = null;\n this.setValue();\n }\n }\n }\n if (!this.strictMode) {\n this.clearRange();\n this.startValue = null;\n this.endValue = null;\n this.setValue();\n }\n else {\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n this.updateInput();\n }\n this.errorClass();\n this.changeTrigger(e);\n if (!this.preventBlur && document.activeElement !== this.inputElement) {\n this.preventFocus = false;\n var blurArguments = {\n model: this\n };\n this.trigger('blur', blurArguments);\n }\n }\n this.updateHiddenInput();\n };\n DateRangePicker.prototype.clearRange = function () {\n this.previousStartValue = this.previousEndValue = null;\n this.currentDate = null;\n };\n DateRangePicker.prototype.errorClass = function () {\n var inputStr = this.inputElement.value.trim();\n if (((isNullOrUndefined(this.endValue) && isNullOrUndefined(this.startValue) && inputStr !== '') ||\n ((!isNullOrUndefined(this.startValue) && +this.startValue < +this.min)\n || ((!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) && +this.startValue > +this.endValue)\n || (!isNullOrUndefined(this.endValue) && +this.endValue > +this.max))\n || ((this.startValue && this.isDateDisabled(this.startValue))\n || (this.endValue && this.isDateDisabled(this.endValue)))) && inputStr !== '') {\n addClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'true' });\n }\n else {\n if (this.inputWrapper) {\n removeClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'false' });\n }\n }\n };\n DateRangePicker.prototype.keyCalendarUpdate = function (isLeftCalendar, ele) {\n this.removeFocusedDate();\n if (isLeftCalendar) {\n this.leftCalCurrentDate = new Date(+this.currentDate);\n ele = this.leftCalendar;\n }\n else {\n this.rightCalCurrentDate = new Date(+this.currentDate);\n ele = this.rightCalendar;\n }\n this.updateCalendarElement(ele);\n this.table.focus();\n return ele;\n };\n DateRangePicker.prototype.navInCalendar = function (e, isLeftCalendar, leftLimit, rightLimit, ele) {\n var view = this.getViewNumber(this.currentView());\n var date;\n var min = this.min;\n var max;\n if (!isNullOrUndefined(this.maxDays) && this.isMaxDaysClicked && !isNullOrUndefined(this.startValue)) {\n max = new Date(new Date(+this.startValue).setDate(this.startValue.getDate() + (this.maxDays - 1)));\n }\n else {\n max = this.max;\n }\n switch (e.action) {\n case 'moveRight':\n date = new Date(+this.currentDate);\n this.addDay(date, 1, e, max, min);\n if (isLeftCalendar && +date === +rightLimit) {\n ele = this.keyCalendarUpdate(false, ele);\n }\n this.KeyboardNavigate(1, view, e, max, min);\n this.keyNavigation(ele, e);\n break;\n case 'moveLeft':\n date = new Date(+this.currentDate);\n this.addDay(date, -1, e, max, min);\n if (!isLeftCalendar) {\n if (+date === +leftLimit) {\n ele = this.keyCalendarUpdate(true, ele);\n }\n }\n this.KeyboardNavigate(-1, view, e, max, min);\n this.keyNavigation(ele, e);\n break;\n case 'moveUp':\n if (view === 0) {\n date = new Date(+this.currentDate);\n this.addDay(date, -7, e, max, min);\n if (+date <= +leftLimit && !isLeftCalendar) {\n ele = this.keyCalendarUpdate(true, ele);\n }\n this.KeyboardNavigate(-7, view, e, max, min);\n }\n else {\n this.KeyboardNavigate(-4, view, e, this.max, this.min); // move the current year to the previous four days.\n }\n this.keyNavigation(ele, e);\n break;\n case 'moveDown':\n if (view === 0) {\n date = new Date(+this.currentDate);\n this.addDay(date, 7, e, max, min);\n if (isLeftCalendar && +date >= +rightLimit) {\n ele = this.keyCalendarUpdate(false, ele);\n }\n this.KeyboardNavigate(7, view, e, max, min);\n }\n else {\n this.KeyboardNavigate(4, view, e, this.max, this.min);\n }\n this.keyNavigation(ele, e);\n break;\n case 'home':\n this.currentDate = this.firstDay(this.currentDate);\n remove(this.tableBodyElement);\n (view === 0) ? this.renderMonths(e) : ((view === 1) ? this.renderYears(e) : this.renderDecades(e));\n this.keyNavigation(ele, e);\n break;\n case 'end':\n this.currentDate = this.lastDay(this.currentDate, view);\n remove(this.tableBodyElement);\n (view === 0) ? this.renderMonths(e) : ((view === 1) ? this.renderYears(e) : this.renderDecades(e));\n this.keyNavigation(ele, e);\n break;\n }\n };\n // tslint:disable-next-line:max-func-body-length\n DateRangePicker.prototype.keyInputHandler = function (e, value) {\n var date;\n var view = this.getViewNumber(this.currentView());\n var rightDateLimit = new Date(this.rightCalCurrentDate.getFullYear(), this.rightCalCurrentDate.getMonth(), 1);\n var leftDateLimit = new Date(this.leftCalCurrentDate.getFullYear(), this.leftCalCurrentDate.getMonth() + 1, 0);\n var ele = closest(e.target, '.' + RIGHTCALENDER);\n ele = isNullOrUndefined(ele) ? this.leftCalendar : ele;\n var isLeftCalendar = ele.classList.contains(LEFTCALENDER);\n this.updateCalendarElement(ele);\n var selectedDate = this.tableBodyElement.querySelector('tr td.e-selected');\n var focusedDate = ele.querySelector('tr td.' + FOCUSDATE);\n var startDate = ele.querySelector('tr td.' + STARTDATE);\n var endDate = ele.querySelector('tr td.' + ENDDATE);\n var depthValue = this.getViewNumber(this.depth);\n var levelRestrict = (view === depthValue && this.getViewNumber(this.start) >= depthValue);\n var leftCalendar = closest(e.target, '.' + LEFTCALENDER);\n var rightCalendar = closest(e.target, '.' + RIGHTCALENDER);\n var presetElement = closest(e.target, '.' + PRESETS);\n if (!isNullOrUndefined(focusedDate)) {\n this.currentDate = this.currentDate;\n }\n else if (!isNullOrUndefined(endDate) && !this.dateDisabled) {\n this.currentDate = new Date(+this.endValue);\n }\n else if (!isNullOrUndefined(startDate) && !this.dateDisabled) {\n this.currentDate = new Date(+this.startValue);\n }\n else if (!this.dateDisabled) {\n this.currentDate.setDate(1);\n }\n this.effect = '';\n switch (e.action) {\n case 'altUpArrow':\n if (this.isPopupOpen()) {\n this.hide(e);\n this.preventFocus = true;\n this.inputElement.focus();\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n break;\n case 'select':\n if (view === 0) {\n var element = !isNullOrUndefined(focusedDate) ? focusedDate : startDate;\n if (!isNullOrUndefined(element) && !element.classList.contains(DISABLED)) {\n this.selectRange(null, (element));\n }\n }\n else {\n if (!isNullOrUndefined(selectedDate) && !levelRestrict || !isNullOrUndefined(focusedDate)) {\n if (!isNullOrUndefined(this.value)) {\n if (this.calendarElement.classList.contains(LEFTCALENDER)) {\n value = this.startDate;\n }\n else {\n value = this.endDate;\n }\n }\n this.controlDown = e;\n this.contentClick(null, --view, (focusedDate || selectedDate), value);\n }\n }\n e.preventDefault();\n break;\n case 'controlHome':\n var yearDate = new Date(this.currentDate.getFullYear(), 0, 1);\n if (!isLeftCalendar && +yearDate < +leftDateLimit) {\n ele = this.keyCalendarUpdate(true, ele);\n }\n this.navigateTo('Month', new Date(this.currentDate.getFullYear(), 0, 1));\n this.keyNavigation(ele, e);\n break;\n case 'altRightArrow':\n if (!isNullOrUndefined(leftCalendar)) {\n this.rightCalendar.children[1].firstElementChild.focus();\n }\n else if (!isNullOrUndefined(rightCalendar)) {\n if (!isNullOrUndefined(this.presetElement)) {\n this.presetElement.focus();\n this.removeFocusedDate();\n }\n else {\n this.cancelButton.element.focus();\n }\n }\n else {\n if (!isNullOrUndefined(presetElement)) {\n this.cancelButton.element.focus();\n }\n }\n e.preventDefault();\n break;\n case 'altLeftArrow':\n if (!isNullOrUndefined(leftCalendar)) {\n if (this.applyButton.element.disabled !== true) {\n this.applyButton.element.focus();\n }\n else {\n this.cancelButton.element.focus();\n }\n }\n else {\n if (!isNullOrUndefined(rightCalendar)) {\n this.leftCalendar.children[1].firstElementChild.focus();\n }\n }\n e.preventDefault();\n break;\n case 'controlUp':\n if (this.calendarElement.classList.contains(LEFTCALENDER)) {\n this.calendarNavigation(e, this.calendarElement);\n }\n else {\n this.calendarNavigation(e, this.calendarElement);\n }\n e.preventDefault();\n break;\n case 'controlDown':\n if ((!isNullOrUndefined(selectedDate) && !levelRestrict) || !isNullOrUndefined(focusedDate)) {\n if (!isNullOrUndefined(this.value)) {\n if (this.calendarElement.classList.contains(LEFTCALENDER)) {\n value = this.startDate;\n }\n else {\n value = this.endDate;\n }\n }\n this.controlDown = e;\n this.contentClick(null, --view, (selectedDate || focusedDate), value);\n }\n e.preventDefault();\n break;\n case 'controlEnd':\n yearDate = new Date(this.currentDate.getFullYear(), 11, 31);\n if (isLeftCalendar && +yearDate > +rightDateLimit) {\n ele = this.keyCalendarUpdate(false, ele);\n }\n this.navigateTo('Month', new Date(this.currentDate.getFullYear(), 11, 31));\n this.keyNavigation(ele, e);\n break;\n case 'pageUp':\n date = new Date(+this.currentDate);\n this.addMonths(date, -1);\n if (!isLeftCalendar && +date <= +leftDateLimit) {\n ele = this.keyCalendarUpdate(true, ele);\n }\n this.addMonths(this.currentDate, -1);\n this.navigateTo('Month', this.currentDate);\n this.keyNavigation(ele, e);\n break;\n case 'pageDown':\n date = new Date(+this.currentDate);\n this.addMonths(date, 1);\n if (isLeftCalendar && +date >= +rightDateLimit) {\n ele = this.keyCalendarUpdate(false, ele);\n }\n this.addMonths(this.currentDate, 1);\n this.navigateTo('Month', this.currentDate);\n this.keyNavigation(ele, e);\n break;\n case 'shiftPageUp':\n date = new Date(+this.currentDate);\n this.addYears(date, -1);\n if (!isLeftCalendar && +date <= +leftDateLimit) {\n ele = this.keyCalendarUpdate(true, ele);\n }\n this.addYears(this.currentDate, -1);\n this.navigateTo('Month', this.currentDate);\n this.keyNavigation(ele, e);\n break;\n case 'shiftPageDown':\n date = new Date(+this.currentDate);\n this.addYears(date, 1);\n if (isLeftCalendar && +date >= +rightDateLimit) {\n ele = this.keyCalendarUpdate(false, ele);\n }\n this.addYears(this.currentDate, 1);\n this.navigateTo('Month', this.currentDate);\n this.keyNavigation(ele, e);\n break;\n case 'shiftTab':\n if (!isNullOrUndefined(this.presetElement)) {\n this.presetElement.setAttribute('tabindex', '0');\n this.presetElement.focus();\n this.removeFocusedDate();\n }\n e.preventDefault();\n break;\n case 'spacebar':\n if (this.applyButton && !this.applyButton.disabled) {\n this.applyFunction(e);\n }\n break;\n default:\n this.navInCalendar(e, isLeftCalendar, leftDateLimit, rightDateLimit, ele);\n this.checkMinMaxDays();\n }\n this.presetHeight();\n };\n DateRangePicker.prototype.keyNavigation = function (calendar, e) {\n this.bindCalendarCellEvents(calendar);\n if (calendar.classList.contains(LEFTCALENDER)) {\n this.leftCalCurrentDate = new Date(+this.currentDate);\n }\n else {\n this.rightCalCurrentDate = new Date(+this.currentDate);\n }\n this.updateNavIcons();\n this.calendarIconEvent();\n this.updateRange([calendar]);\n this.dateDisabled = this.isDateDisabled(this.currentDate);\n e.preventDefault();\n };\n DateRangePicker.prototype.inputHandler = function (e) {\n switch (e.action) {\n case 'altDownArrow':\n if (!this.isPopupOpen()) {\n if (this.inputElement.value === '') {\n this.clear();\n this.changeTrigger(e);\n this.clearRange();\n }\n this.show(null, e);\n this.isRangeIconClicked = false;\n if (!this.isMobile) {\n if (!isNullOrUndefined(this.leftCalendar)) {\n this.calendarFocus();\n }\n }\n this.isKeyPopup = true;\n }\n break;\n case 'escape':\n if (this.isPopupOpen()) {\n this.hide(e);\n }\n break;\n case 'enter':\n if (document.activeElement === this.inputElement) {\n this.inputBlurHandler(e);\n this.hide(e);\n }\n break;\n case 'tab':\n if (document.activeElement === this.inputElement && this.isPopupOpen()) {\n this.hide(e);\n e.preventDefault();\n }\n break;\n }\n };\n DateRangePicker.prototype.bindCalendarCellEvents = function (calendar) {\n var tdCells;\n if (calendar) {\n tdCells = calendar.querySelectorAll('.' + CALENDAR + ' td');\n }\n else {\n tdCells = this.popupObj.element.querySelectorAll('.' + CALENDAR + ' td');\n }\n for (var _i = 0, tdCells_1 = tdCells; _i < tdCells_1.length; _i++) {\n var cell = tdCells_1[_i];\n EventHandler.clearEvents(cell);\n var disabledCell = void 0;\n disabledCell = cell.classList.contains(DISABLED) || cell.classList.contains(DATEDISABLED);\n if (!disabledCell && !cell.classList.contains(WEEKNUMBER)) {\n if (!this.isMobile) {\n EventHandler.add(cell, 'mouseover', this.hoverSelection, this);\n }\n EventHandler.add(cell, 'mousedown', this.selectRange, this);\n }\n }\n };\n DateRangePicker.prototype.removeFocusedDate = function () {\n var isDate = !isNullOrUndefined(this.startValue) || !isNullOrUndefined(this.endValue);\n var focusedDate;\n focusedDate = this.popupObj.element.querySelectorAll('.' + CALENDAR + ' .' + FOCUSDATE);\n if ((this.leftCalendar && this.leftCalendar.querySelector('.e-content').classList.contains('e-month')\n && this.rightCalendar && this.rightCalendar.querySelector('.e-content').classList.contains('e-month')) ||\n this.calendarElement && this.calendarElement.querySelector('.e-content').classList.contains('e-month')) {\n for (var _i = 0, focusedDate_1 = focusedDate; _i < focusedDate_1.length; _i++) {\n var ele = focusedDate_1[_i];\n if (!ele.classList.contains(TODAY) || (ele.classList.contains(TODAY) && (isDate))) {\n ele.classList.remove(FOCUSDATE);\n if (!ele.classList.contains(STARTDATE) && !ele.classList.contains(ENDDATE)) {\n ele.removeAttribute('aria-label');\n }\n }\n }\n }\n };\n DateRangePicker.prototype.hoverSelection = function (event, element) {\n var currentElement = element || event.currentTarget;\n var currentDate = this.getIdValue(null, currentElement);\n if (!isNullOrUndefined(this.startValue) && +this.startValue >= +this.min && +this.startValue <= +this.max) {\n if ((!this.isDateDisabled(this.endValue) && !this.isDateDisabled(this.startValue)\n && isNullOrUndefined(this.endValue) && isNullOrUndefined(this.startValue))\n || (!isNullOrUndefined(this.startValue) && isNullOrUndefined(this.endValue))) {\n var tdCells = void 0;\n tdCells = this.popupObj.element.querySelectorAll('.' + CALENDAR + ' td');\n for (var _i = 0, tdCells_2 = tdCells; _i < tdCells_2.length; _i++) {\n var ele = tdCells_2[_i];\n var isDisabledCell = (!ele.classList.contains(DISABLED) || ele.classList.contains(DATEDISABLED));\n if (!ele.classList.contains(WEEKNUMBER) && isDisabledCell) {\n var eleDate = this.getIdValue(null, ele);\n var startDateValue = new Date(+this.startValue);\n var eleDateValue = new Date(+eleDate);\n if (eleDateValue.setHours(0, 0, 0, 0) >= startDateValue.setHours(0, 0, 0, 0) && +eleDate <= +currentDate) {\n addClass([ele], RANGEHOVER);\n }\n else {\n removeClass([ele], [RANGEHOVER]);\n }\n }\n }\n }\n }\n };\n DateRangePicker.prototype.updateRange = function (elementCollection) {\n if (!isNullOrUndefined(this.startValue)) {\n for (var _i = 0, elementCollection_1 = elementCollection; _i < elementCollection_1.length; _i++) {\n var calendar = elementCollection_1[_i];\n var tdCells = calendar.querySelectorAll('.' + CALENDAR + ' td');\n for (var _a = 0, tdCells_3 = tdCells; _a < tdCells_3.length; _a++) {\n var ele = tdCells_3[_a];\n if (!ele.classList.contains(WEEKNUMBER) && !ele.classList.contains(DISABLED)) {\n var eleDate = this.getIdValue(null, ele);\n var eleDateValue = this.getIdValue(null, ele);\n if (!isNullOrUndefined(this.endValue)) {\n if (this.currentView() === 'Month' &&\n +eleDateValue.setHours(0, 0, 0, 0) >= +new Date(+this.startValue).setHours(0, 0, 0, 0)\n && +eleDateValue.setHours(0, 0, 0, 0) <= +new Date(+this.endValue).setHours(0, 0, 0, 0) &&\n +new Date(+this.startValue).setHours(0, 0, 0, 0) !== +new Date(+this.endValue).setHours(0, 0, 0, 0) &&\n +new Date(+this.startValue).setHours(0, 0, 0, 0) >= +this.min\n && +new Date(+this.endValue).setHours(0, 0, 0, 0) <= +this.max\n && !(this.isDateDisabled(this.startValue) || this.isDateDisabled(this.endValue))) {\n addClass([ele], RANGEHOVER);\n }\n }\n else {\n removeClass([ele], [RANGEHOVER]);\n }\n if (!ele.classList.contains(OTHERMONTH)) {\n var startDateValue = new Date(+this.startValue);\n var eleDateValue_1 = new Date(+eleDate);\n if (this.currentView() === 'Month' &&\n +eleDateValue_1.setHours(0, 0, 0, 0) === +startDateValue.setHours(0, 0, 0, 0)\n && +eleDateValue_1.setHours(0, 0, 0, 0) >= +startDateValue.setHours(0, 0, 0, 0) &&\n +this.startValue >= +this.min\n && !this.inputWrapper.container.classList.contains('e-error')\n && !(this.isDateDisabled(this.startValue) || this.isDateDisabled(this.endValue))) {\n addClass([ele], [STARTDATE, SELECTED]);\n this.addSelectedAttributes(ele, this.startValue, true);\n }\n var endDateValue = new Date(+this.endValue);\n if (this.currentView() === 'Month' &&\n !isNullOrUndefined(this.endValue) &&\n +eleDateValue_1.setHours(0, 0, 0, 0) === +endDateValue.setHours(0, 0, 0, 0)\n && +eleDateValue_1.setHours(0, 0, 0, 0) <= +endDateValue.setHours(0, 0, 0, 0) &&\n +this.startValue >= +this.min\n && !this.inputWrapper.container.classList.contains('e-error')\n && !(this.isDateDisabled(this.startValue) || this.isDateDisabled(this.endValue))) {\n addClass([ele], [ENDDATE, SELECTED]);\n this.addSelectedAttributes(ele, this.startValue, false);\n }\n if (+eleDate === +this.startValue && !isNullOrUndefined(this.endValue) && +eleDate === +this.endValue) {\n this.addSelectedAttributes(ele, this.endValue, false, true);\n }\n }\n }\n }\n }\n }\n };\n DateRangePicker.prototype.checkMinMaxDays = function () {\n if ((!isNullOrUndefined(this.minDays) && this.minDays > 0) || (!isNullOrUndefined(this.maxDays) && this.maxDays > 0)) {\n if (!this.isMobile) {\n this.updateMinMaxDays(this.popupObj.element.querySelector('.' + LEFTCALENDER));\n this.updateMinMaxDays(this.popupObj.element.querySelector('.' + RIGHTCALENDER));\n }\n else {\n this.updateMinMaxDays(this.popupObj.element.querySelector('.' + CALENDAR));\n }\n }\n };\n DateRangePicker.prototype.rangeArgs = function (e) {\n var inputValue;\n var range;\n var startDate = !isNullOrUndefined(this.startValue) ?\n this.globalize.formatDate(this.startValue, { format: this.format, type: 'date', skeleton: 'yMd' }) : null;\n var endDate = !isNullOrUndefined(this.endValue) ?\n this.globalize.formatDate(this.endValue, { format: this.format, type: 'date', skeleton: 'yMd' }) : null;\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue)) {\n inputValue = startDate + ' ' + this.separator + ' ' + endDate;\n range = (Math.round(Math.abs((this.startValue.getTime() - this.endValue.getTime()) / (1000 * 60 * 60 * 24))) + 1);\n }\n else {\n inputValue = '';\n range = 0;\n }\n var args = {\n value: this.value,\n startDate: this.startValue,\n endDate: this.endValue,\n daySpan: range,\n event: e || null,\n element: this.element,\n isInteracted: !isNullOrUndefined(e),\n text: inputValue\n };\n return args;\n };\n DateRangePicker.prototype.otherMonthSelect = function (ele, isStartDate, sameDate) {\n var value = +this.getIdValue(null, ele);\n var dateIdString = '*[id^=\"/id\"]:not(.e-other-month)'.replace('/id', '' + value);\n var tdCell = this.popupObj && this.popupObj.element.querySelector(dateIdString);\n if (!isNullOrUndefined(tdCell)) {\n if (isStartDate) {\n addClass([tdCell], [STARTDATE, SELECTED]);\n this.addSelectedAttributes(tdCell, this.startValue, true);\n }\n else {\n addClass([tdCell], [ENDDATE, SELECTED]);\n this.addSelectedAttributes(tdCell, this.endValue, true);\n }\n if (sameDate) {\n this.addSelectedAttributes(ele, this.endValue, false, true);\n }\n }\n };\n // tslint:disable-next-line:max-func-body-length\n DateRangePicker.prototype.selectRange = function (event, element) {\n var leftCalendar;\n var rightCalendar;\n if (event) {\n event.preventDefault();\n }\n var date;\n date = isNullOrUndefined(event) ? this.getIdValue(null, element)\n : this.getIdValue(event, null);\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue)) {\n if (!this.isMobile || this.isMobile && !this.endButton.element.classList.contains(ACTIVE)) {\n this.removeSelection();\n }\n }\n else if (this.isMobile && this.startButton.element.classList.contains(ACTIVE)) {\n this.removeSelection();\n }\n var ele = element || event.currentTarget;\n if (isNullOrUndefined(this.startValue)) {\n if (!isNullOrUndefined(this.previousStartValue)) {\n date.setHours(this.previousStartValue.getHours());\n date.setMinutes(this.previousStartValue.getMinutes());\n date.setSeconds(this.previousStartValue.getSeconds());\n }\n this.startValue = new Date('' + date);\n this.endValue = null;\n this.setValue();\n addClass([ele], STARTDATE);\n this.addSelectedAttributes(ele, this.startValue, true);\n if (ele.classList.contains(OTHERMONTH)) {\n this.otherMonthSelect(ele, true);\n }\n this.checkMinMaxDays();\n this.applyButton.disabled = true;\n this.applyButton.element.disabled = true;\n if (this.isMobile) {\n this.endButton.element.classList.add(ACTIVE);\n this.startButton.element.classList.remove(ACTIVE);\n this.endButton.element.removeAttribute('disabled');\n this.selectableDates();\n }\n this.trigger('select', this.rangeArgs(event));\n }\n else {\n if (+date === +this.startValue || +date > +this.startValue) {\n if (+date === +this.startValue && !isNullOrUndefined(this.minDays) && this.minDays > 1) {\n return;\n }\n this.endValue = null;\n this.setValue();\n if (this.isMobile || element) {\n this.hoverSelection(event, element);\n }\n if (!isNullOrUndefined(this.previousEndValue)) {\n date.setHours(this.previousEndValue.getHours());\n date.setMinutes(this.previousEndValue.getMinutes());\n date.setSeconds(this.previousEndValue.getSeconds());\n }\n this.endValue = new Date('' + date);\n this.setValue();\n var endEle = this.popupObj.element.querySelectorAll('.' + ENDDATE);\n if (this.isMobile) {\n this.startButton.element.classList.remove(ACTIVE);\n this.endButton.element.classList.add(ACTIVE);\n for (var _i = 0, endEle_1 = endEle; _i < endEle_1.length; _i++) {\n var ele_1 = endEle_1[_i];\n ele_1.removeAttribute('aria-label');\n if (!ele_1.classList.contains(STARTDATE)) {\n ele_1.setAttribute('aria-selected', 'false');\n removeClass([ele_1], [ENDDATE, SELECTED]);\n }\n else {\n this.addSelectedAttributes(ele_1, this.startValue, true);\n removeClass([ele_1], [ENDDATE]);\n }\n }\n }\n addClass([ele], ENDDATE);\n if (+this.endValue === +this.startValue) {\n this.addSelectedAttributes(ele, this.endValue, false, true);\n }\n else {\n this.addSelectedAttributes(ele, this.endValue, false);\n }\n if (ele.classList.contains(OTHERMONTH)) {\n if (+this.endValue === +this.startValue) {\n this.otherMonthSelect(ele, false, true);\n }\n else {\n this.otherMonthSelect(ele, false);\n }\n }\n endEle = this.popupObj.element.querySelectorAll('.' + ENDDATE);\n for (var _a = 0, endEle_2 = endEle; _a < endEle_2.length; _a++) {\n var ele_2 = endEle_2[_a];\n if (ele_2.classList.contains(STARTDATE)) {\n removeClass([ele_2], [RANGEHOVER]);\n }\n }\n this.applyButton.disabled = false;\n this.applyButton.element.disabled = false;\n if (!this.isMobile) {\n this.removeClassDisabled();\n }\n this.disabledDateRender();\n this.trigger('select', this.rangeArgs(event));\n }\n else if (+date < +this.startValue) {\n this.removeClassDisabled();\n this.startValue = new Date('' + date);\n this.setValue();\n this.removeSelectedAttributes();\n removeClass(this.popupObj.element.querySelectorAll('.' + STARTDATE), [STARTDATE, SELECTED]);\n addClass([ele], STARTDATE);\n this.addSelectedAttributes(ele, this.startValue, true);\n if (ele.classList.contains(OTHERMONTH)) {\n this.otherMonthSelect(ele, true);\n }\n this.checkMinMaxDays();\n }\n }\n if (event) {\n leftCalendar = closest(event.target, '.' + LEFTCALENDER);\n }\n if (!isNullOrUndefined(leftCalendar)) {\n this.leftCalendar.children[1].firstElementChild.focus();\n }\n else {\n if (event) {\n rightCalendar = event && closest(event.target, '.' + RIGHTCALENDER);\n }\n if (!isNullOrUndefined(rightCalendar)) {\n this.rightCalendar.children[1].firstElementChild.focus();\n }\n }\n addClass([ele], SELECTED);\n this.updateHeader();\n this.removeFocusedDate();\n };\n DateRangePicker.prototype.selectableDates = function () {\n if (!isNullOrUndefined(this.startValue)) {\n var tdCells = this.calendarElement.querySelectorAll('.' + CALENDAR + ' td');\n var isStartDate = false;\n if (this.currentView() === 'Month') {\n for (var _i = 0, tdCells_4 = tdCells; _i < tdCells_4.length; _i++) {\n var ele = tdCells_4[_i];\n if (!ele.classList.contains(STARTDATE) && !ele.classList.contains(WEEKNUMBER)) {\n if (!ele.classList.contains(DISABLED)) {\n var eleDate = this.getIdValue(null, ele);\n if (+eleDate < +this.startValue) {\n addClass([ele], [DATEDISABLED, DISABLED, OVERLAY]);\n EventHandler.clearEvents(ele);\n continue;\n }\n else {\n break;\n }\n }\n }\n if (ele.classList.contains(STARTDATE) && !ele.classList.contains(OTHERMONTH)) {\n isStartDate = true;\n break;\n }\n }\n if (isStartDate) {\n if (!this.previousIcon.classList.contains(DISABLED)) {\n addClass([this.previousIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n }\n }\n else {\n for (var _a = 0, tdCells_5 = tdCells; _a < tdCells_5.length; _a++) {\n var ele = tdCells_5[_a];\n var startMonth = this.startValue.getMonth();\n var startYear = this.startValue.getFullYear();\n var element = this.getIdValue(null, ele);\n if (!this.startButton.element.classList.contains(ACTIVE) && ((this.currentView() === 'Year' &&\n (element.getMonth() < startMonth) && (element.getFullYear() <= startYear))\n || (this.currentView() === 'Decade' && (element.getMonth() <= startMonth) &&\n (element.getFullYear() < startYear)))) {\n addClass([ele], [DISABLED]);\n }\n else {\n break;\n }\n }\n if (tdCells[0].classList.contains(DISABLED)) {\n this.previousIconHandler(true);\n }\n else if (tdCells[tdCells.length - 1].classList.contains(DISABLED)) {\n this.nextIconHandler(true);\n }\n }\n }\n };\n DateRangePicker.prototype.updateMinMaxDays = function (calendar) {\n if (!isNullOrUndefined(this.startValue) && (isNullOrUndefined(this.endValue) || this.isMobile)) {\n if ((!isNullOrUndefined(this.minDays) && this.minDays > 0) || (!isNullOrUndefined(this.maxDays) && this.maxDays > 0)) {\n var minDate = new Date(new Date(+this.startValue).setDate(this.startValue.getDate() + (this.minDays - 1)));\n var maxDate = new Date(new Date(+this.startValue).setDate(this.startValue.getDate() + (this.maxDays - 1)));\n minDate = (!isNullOrUndefined(this.minDays) && this.minDays > 0) ? minDate : null;\n maxDate = (!isNullOrUndefined(this.maxDays) && this.maxDays > 0) ? maxDate : null;\n var tdCells = calendar.querySelectorAll('.' + CALENDAR + ' td');\n var maxEle = void 0;\n for (var _i = 0, tdCells_6 = tdCells; _i < tdCells_6.length; _i++) {\n var ele = tdCells_6[_i];\n if (!ele.classList.contains(STARTDATE) && !ele.classList.contains(WEEKNUMBER)) {\n var eleDate = this.getIdValue(null, ele);\n if (!isNullOrUndefined(minDate) && +eleDate === +minDate && ele.classList.contains(DISABLED)) {\n minDate.setDate(minDate.getDate() + 1);\n }\n if (!ele.classList.contains(DISABLED)) {\n if (+eleDate <= +this.startValue) {\n continue;\n }\n if (!isNullOrUndefined(minDate) && +eleDate < +minDate) {\n addClass([ele], [DATEDISABLED, DISABLED, OVERLAY]);\n EventHandler.clearEvents(ele);\n }\n if (!isNullOrUndefined(maxDate) && +eleDate > +maxDate) {\n addClass([ele], [DATEDISABLED, DISABLED, OVERLAY]);\n this.isMaxDaysClicked = true;\n EventHandler.clearEvents(ele);\n if (isNullOrUndefined(maxEle) && !ele.classList.contains(OTHERMONTH)) {\n maxEle = ele;\n }\n }\n }\n }\n }\n if (!isNullOrUndefined(maxEle)) {\n if (this.isMobile) {\n if (!this.nextIcon.classList.contains(DISABLED)) {\n addClass([this.nextIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n }\n else {\n var calendar_1 = closest(maxEle, '.' + RIGHTCALENDER);\n calendar_1 = isNullOrUndefined(calendar_1) ? this.leftCalendar : calendar_1;\n var isLeftCalendar = calendar_1.classList.contains(LEFTCALENDER);\n if (!isLeftCalendar) {\n if (!this.rightCalNextIcon.classList.contains(DISABLED)) {\n addClass([this.rightCalNextIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n }\n else {\n if (!this.rightCalNextIcon.classList.contains(DISABLED)) {\n addClass([this.rightCalNextIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n if (!this.leftCalNextIcon.classList.contains(DISABLED)) {\n addClass([this.leftCalNextIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n if (!this.rightCalPrevIcon.classList.contains(DISABLED)) {\n addClass([this.rightCalPrevIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n }\n }\n }\n }\n }\n else {\n this.isMaxDaysClicked = false;\n }\n };\n DateRangePicker.prototype.removeClassDisabled = function () {\n var tdCells;\n tdCells = this.popupObj.element.querySelectorAll('.' + CALENDAR + ' td' + '.' + DATEDISABLED);\n for (var _i = 0, tdCells_7 = tdCells; _i < tdCells_7.length; _i++) {\n var ele = tdCells_7[_i];\n if (ele.classList.contains(DATEDISABLED)) {\n removeClass([ele], [DATEDISABLED, DISABLED, OVERLAY]);\n EventHandler.add(ele, 'click', this.selectRange, this);\n if (!this.isMobile) {\n EventHandler.add(ele, 'mouseover', this.hoverSelection, this);\n }\n }\n }\n if (this.isMobile) {\n if (this.nextIcon.classList.contains(ICONDISABLED)) {\n removeClass([this.nextIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n if (this.previousIcon.classList.contains(ICONDISABLED)) {\n removeClass([this.previousIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n }\n else {\n if (this.rightCalNextIcon.classList.contains(ICONDISABLED)) {\n removeClass([this.rightCalNextIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n if (this.rightCalPrevIcon.classList.contains(ICONDISABLED)) {\n removeClass([this.rightCalPrevIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n if (this.leftCalNextIcon.classList.contains(ICONDISABLED)) {\n removeClass([this.leftCalNextIcon], [ICONDISABLED, DISABLED, OVERLAY]);\n }\n }\n };\n DateRangePicker.prototype.updateHeader = function () {\n var format = { type: 'date', skeleton: 'yMMMd' };\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue)) {\n var range = (Math.round(Math.abs((this.startValue.getTime() - this.endValue.getTime()) / (1000 * 60 * 60 * 24))) + 1);\n if (!isNullOrUndefined(this.disabledDayCnt)) {\n range = range - this.disabledDayCnt;\n this.disabledDayCnt = null;\n }\n this.popupObj.element.querySelector('.' + DAYSPAN).textContent = range.toString() + ' ' + this.l10n.getConstant('days');\n }\n else {\n this.popupObj.element.querySelector('.' + DAYSPAN).textContent = this.l10n.getConstant('selectedDays');\n }\n if (!this.isMobile) {\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue)) {\n this.popupObj.element.querySelector('.' + ENDLABEL).textContent = this.globalize.formatDate(this.endValue, format);\n }\n else {\n this.popupObj.element.querySelector('.' + ENDLABEL).textContent = this.l10n.getConstant('endLabel');\n }\n if (!isNullOrUndefined(this.startValue)) {\n this.popupObj.element.querySelector('.' + STARTLABEL).textContent = this.globalize.formatDate(this.startValue, format);\n }\n else {\n this.popupObj.element.querySelector('.' + STARTLABEL).textContent = this.l10n.getConstant('startLabel');\n }\n }\n else {\n if (!isNullOrUndefined(this.startValue)) {\n this.startButton.element.textContent = this.globalize.formatDate(this.startValue, format);\n }\n else {\n this.startButton.element.textContent = this.l10n.getConstant('startLabel');\n }\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue)) {\n this.endButton.element.textContent = this.globalize.formatDate(this.endValue, format);\n }\n else {\n this.endButton.element.textContent = this.l10n.getConstant('endLabel');\n }\n }\n if ((this.isDateDisabled(this.startValue) || this.isDateDisabled(this.endValue)) ||\n ((!isNullOrUndefined(this.startValue) && +this.startValue < +this.min)\n || (!isNullOrUndefined(this.endValue) && +this.endValue > +this.max)\n || ((!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue))\n && +this.startValue > +this.endValue))) {\n if (!this.isMobile) {\n this.popupObj.element.querySelector('.' + DAYSPAN).textContent = this.l10n.getConstant('selectedDays');\n this.popupObj.element.querySelector('.' + STARTLABEL).textContent = this.l10n.getConstant('startLabel');\n this.popupObj.element.querySelector('.' + ENDLABEL).textContent = this.l10n.getConstant('endLabel');\n }\n else {\n this.startButton.element.textContent = this.l10n.getConstant('startLabel');\n this.endButton.element.textContent = this.l10n.getConstant('endLabel');\n this.popupObj.element.querySelector('.' + DAYSPAN).textContent = this.l10n.getConstant('selectedDays');\n }\n }\n if (this.popupObj.element.querySelector('#custom_range')) {\n this.popupObj.element.querySelector('#custom_range').textContent =\n this.l10.getConstant('customRange') !== '' ? this.l10.getConstant('customRange') : 'Custom Range';\n }\n };\n DateRangePicker.prototype.removeSelection = function () {\n this.startValue = null;\n this.endValue = null;\n this.setValue();\n this.removeSelectedAttributes();\n if (this.popupObj) {\n if (this.popupObj.element.querySelectorAll('.' + SELECTED).length > 0) {\n removeClass(this.popupObj.element.querySelectorAll('.' + SELECTED), [STARTDATE, ENDDATE, SELECTED]);\n }\n if (this.popupObj.element.querySelectorAll('.' + FOCUSDATE).length > 0) {\n removeClass(this.popupObj.element.querySelectorAll('.' + FOCUSDATE), FOCUSDATE);\n }\n if (this.popupObj.element.querySelectorAll('.' + RANGEHOVER).length > 0) {\n removeClass(this.popupObj.element.querySelectorAll('.' + RANGEHOVER), [RANGEHOVER]);\n }\n }\n };\n DateRangePicker.prototype.addSelectedAttributes = function (ele, date, isStartDate, sameDate) {\n if (ele) {\n var title = this.globalize.formatDate(date, { type: 'date', skeleton: 'full' });\n if (!isNullOrUndefined(sameDate) && sameDate) {\n ele.setAttribute('aria-label', 'The current start and end date is ' + '' + title);\n }\n else {\n ele.setAttribute('aria-label', 'The current ' + (isStartDate ? 'start' : 'end') + ' date is ' + '' + title);\n }\n ele.setAttribute('aria-selected', 'true');\n }\n };\n DateRangePicker.prototype.removeSelectedAttributes = function () {\n if (this.popupObj) {\n var start = this.popupObj.element.querySelectorAll('.' + STARTDATE);\n for (var _i = 0, start_1 = start; _i < start_1.length; _i++) {\n var ele = start_1[_i];\n ele.setAttribute('aria-selected', 'false');\n ele.removeAttribute('aria-label');\n }\n var end = this.popupObj.element.querySelectorAll('.' + ENDDATE);\n for (var _a = 0, end_1 = end; _a < end_1.length; _a++) {\n var ele = end_1[_a];\n ele.setAttribute('aria-selected', 'false');\n ele.removeAttribute('aria-label');\n }\n }\n };\n DateRangePicker.prototype.updateCalendarElement = function (calendar) {\n if (calendar.classList.contains(LEFTCALENDER)) {\n this.calendarElement = this.leftCalendar;\n this.currentDate = this.leftCalCurrentDate;\n this.previousIcon = this.leftCalPrevIcon;\n this.nextIcon = this.leftCalNextIcon;\n }\n else {\n this.calendarElement = this.rightCalendar;\n this.currentDate = this.rightCalCurrentDate;\n this.previousIcon = this.rightCalPrevIcon;\n this.nextIcon = this.rightCalNextIcon;\n }\n this.contentElement = calendar.querySelector('.' + CONTENT);\n this.tableBodyElement = select('.' + CONTENT + ' tbody', calendar);\n this.table = calendar.querySelector('.' + CONTENT).getElementsByTagName('table')[0];\n this.headerTitleElement = calendar.querySelector('.' + HEADER + ' .' + TITLE);\n this.headerElement = calendar.querySelector('.' + HEADER);\n };\n DateRangePicker.prototype.navPrevMonth = function (e) {\n e.preventDefault();\n var ele = closest(e.target, '.' + LEFTCALENDER);\n ele = isNullOrUndefined(ele) ? closest(e.target, '.' + RIGHTCALENDER) : ele;\n this.updateCalendarElement(ele);\n this.navigatePrevious(e);\n if (!isNullOrUndefined(this.startValue) && isNullOrUndefined(this.endValue)) {\n this.updateMinMaxDays(ele);\n }\n this.updateControl(ele);\n };\n DateRangePicker.prototype.deviceNavigation = function (ele) {\n this.deviceCalendarEvent();\n this.updateRange([this.popupObj.element.querySelector('.' + CALENDAR)]);\n if ((!isNullOrUndefined(this.endValue) && this.endButton.element.classList.contains(ACTIVE))) {\n this.updateMinMaxDays(this.popupObj.element.querySelector('.' + CALENDAR));\n }\n if (this.endButton.element.classList.contains(ACTIVE)) {\n this.selectableDates();\n }\n if (this.currentView() === 'Month') {\n this.bindCalendarCellEvents();\n }\n this.removeFocusedDate();\n };\n DateRangePicker.prototype.updateControl = function (calendar) {\n if (calendar.classList.contains(RIGHTCALENDER)) {\n this.rightCalCurrentDate = new Date(+this.currentDate);\n }\n else {\n this.leftCalCurrentDate = new Date(+this.currentDate);\n }\n this.updateNavIcons();\n this.calendarIconEvent();\n if ((this.leftCalendar.querySelector('.e-content').classList.contains('e-month')\n && this.rightCalendar.querySelector('.e-content').classList.contains('e-month'))\n || this.isMobile) {\n this.bindCalendarCellEvents();\n }\n this.removeFocusedDate();\n this.updateRange([calendar]);\n };\n DateRangePicker.prototype.navNextMonth = function (event) {\n event.preventDefault();\n var ele = closest(event.target, '.' + LEFTCALENDER);\n ele = isNullOrUndefined(ele) ? closest(event.target, '.' + RIGHTCALENDER) : ele;\n this.updateCalendarElement(ele);\n this.navigateNext(event);\n if (!isNullOrUndefined(this.startValue) && isNullOrUndefined(this.endValue)) {\n this.updateMinMaxDays(ele);\n }\n this.updateControl(ele);\n };\n DateRangePicker.prototype.compareMonths = function (start, end) {\n var result;\n if (start.getFullYear() === end.getFullYear() &&\n (this.currentView() === 'Year' || this.currentView() === 'Decade')) {\n result = -1;\n }\n else if (start.getFullYear() > end.getFullYear()) {\n result = -1;\n }\n else if (start.getFullYear() < end.getFullYear()) {\n if (start.getFullYear() + 1 === end.getFullYear() && start.getMonth() === 11 && end.getMonth() === 0) {\n result = -1;\n }\n else {\n result = 1;\n }\n }\n else {\n result = start.getMonth() === end.getMonth() ? 0 : start.getMonth() + 1 === end.getMonth() ? -1 : 1;\n }\n return result;\n };\n DateRangePicker.prototype.isPopupOpen = function () {\n if (!isNullOrUndefined(this.popupObj) && this.popupObj.element.classList.contains(POPUP)) {\n return true;\n }\n return false;\n };\n DateRangePicker.prototype.createRangeHeader = function () {\n var labelContainer = this.createElement('div', { className: STARTENDCONTAINER });\n if (!this.isMobile) {\n var startLabel = this.createElement('a', { className: STARTLABEL });\n var endLabel = this.createElement('a', { className: ENDLABEL });\n var changeIcon = this.createElement('span', { className: CHANGEICON });\n attributes(startLabel, { 'aria-atomic': 'true', 'aria-live': 'assertive', 'aria-label': 'Start Date', 'role': 'button' });\n attributes(endLabel, { 'aria-atomic': 'true', 'aria-live': 'assertive', 'aria-label': 'End Date', 'role': 'button' });\n labelContainer.appendChild(startLabel);\n labelContainer.appendChild(changeIcon);\n labelContainer.appendChild(endLabel);\n startLabel.textContent = this.l10n.getConstant('startLabel');\n endLabel.textContent = this.l10n.getConstant('endLabel');\n }\n else {\n var endBtn = this.createElement('button', { className: ENDBUTTON });\n var startBtn = this.createElement('button', { className: STARTBUTTON });\n this.startButton = new Button({ content: this.l10n.getConstant('startLabel') }, startBtn);\n this.endButton = new Button({ content: this.l10n.getConstant('endLabel') }, endBtn);\n labelContainer.appendChild(startBtn);\n labelContainer.appendChild(endBtn);\n }\n return labelContainer;\n };\n DateRangePicker.prototype.disableInput = function () {\n if (this.strictMode) {\n if (!isNullOrUndefined(this.previousStartValue) && !isNullOrUndefined(this.previousEndValue)) {\n this.startValue = this.previousStartValue;\n this.endValue = this.previousEndValue;\n this.setValue();\n this.updateInput();\n }\n }\n else {\n this.updateInput();\n this.clearRange();\n this.setProperties({ startDate: null }, true);\n this.setProperties({ endDate: null }, true);\n this.startValue = null;\n this.endValue = null;\n this.setValue();\n this.errorClass();\n }\n this.setProperties({ enabled: false }, true);\n Input.setEnabled(this.enabled, this.inputElement);\n this.bindEvents();\n };\n DateRangePicker.prototype.validateMinMax = function () {\n this.min = isNullOrUndefined(this.min) || !(+this.min) ? this.min = new Date(1900, 0, 1) : this.min;\n this.max = isNullOrUndefined(this.max) || !(+this.max) ? this.max = new Date(2099, 11, 31) : this.max;\n if (!(this.min <= this.max)) {\n this.disableInput();\n return;\n }\n if (!isNullOrUndefined(this.minDays) && !isNullOrUndefined(this.maxDays)) {\n if (this.maxDays > 0 && this.minDays > 0 && (this.minDays > this.maxDays)) {\n this.maxDays = null;\n }\n }\n if (!isNullOrUndefined(this.minDays) && this.minDays < 0) {\n this.minDays = null;\n }\n if (!isNullOrUndefined(this.maxDays) && this.maxDays < 0) {\n this.maxDays = null;\n }\n };\n DateRangePicker.prototype.validateRangeStrict = function () {\n if (!isNullOrUndefined(this.startValue)) {\n if (+this.startValue <= +this.min) {\n this.startValue = this.min;\n this.setValue();\n }\n else if (+this.startValue >= +this.min && +this.startValue >= +this.max) {\n this.startValue = this.max;\n }\n }\n if (!isNullOrUndefined(this.endValue)) {\n if (+this.endValue > +this.max) {\n this.endValue = this.max;\n this.setValue();\n }\n else if (+this.endValue < +this.min) {\n this.endValue = this.min;\n this.setValue();\n }\n }\n this.validateMinMaxDays();\n };\n DateRangePicker.prototype.validateRange = function () {\n this.validateMinMaxDays();\n };\n DateRangePicker.prototype.validateMinMaxDays = function () {\n if (!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) {\n var range = (Math.round(Math.abs((this.startValue.getTime() - this.endValue.getTime()) / (1000 * 60 * 60 * 24))) + 1);\n if ((!isNullOrUndefined(this.minDays) && this.minDays > 0) && !(range >= this.minDays)) {\n if (this.strictMode) {\n var date = new Date(+this.startValue);\n date.setDate(date.getDate() + (this.minDays - 1));\n if (+date > +this.max) {\n this.endValue = this.max;\n this.setValue();\n }\n else {\n this.endValue = date;\n this.setValue();\n }\n }\n else {\n this.startValue = null;\n this.endValue = null;\n this.setValue();\n }\n }\n if ((!isNullOrUndefined(this.maxDays) && this.maxDays > 0) && !(range <= this.maxDays)) {\n if (this.strictMode) {\n this.endValue = new Date(+this.startValue);\n this.endValue.setDate(this.endValue.getDate() + (this.maxDays - 1));\n this.setValue();\n }\n else {\n this.startValue = null;\n this.endValue = null;\n this.setValue();\n }\n }\n }\n };\n DateRangePicker.prototype.renderCalendar = function () {\n this.calendarElement = this.createElement('div');\n this.calendarElement.classList.add(CALENDAR);\n if (this.enableRtl) {\n this.calendarElement.classList.add(RTL);\n }\n attributes(this.calendarElement, { 'role': 'calendar' });\n _super.prototype.createHeader.call(this);\n _super.prototype.createContent.call(this);\n };\n DateRangePicker.prototype.isSameMonth = function (start, end) {\n if (start.getMonth() === end.getMonth() && start.getFullYear() === end.getFullYear()) {\n return true;\n }\n return false;\n };\n DateRangePicker.prototype.startMonthCurrentDate = function () {\n if (this.isSameMonth(this.min, this.max) || +this.currentDate > +this.max || this.isSameMonth(this.currentDate, this.max)) {\n this.currentDate = new Date(+this.max);\n this.currentDate.setDate(1);\n this.currentDate.setMonth(this.currentDate.getMonth() - 1);\n }\n else if (this.currentDate < this.min) {\n this.currentDate = new Date('' + this.min);\n }\n };\n DateRangePicker.prototype.selectNextMonth = function () {\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue) && !this.isSameMonth(this.endValue, this.currentDate)\n && !this.isDateDisabled(this.endValue) && !this.isDateDisabled(this.startValue)) {\n this.currentDate = new Date(+this.endValue);\n }\n else {\n this.currentDate.setDate(1);\n this.currentDate.setMonth(this.currentDate.getMonth() + 1);\n return;\n }\n if ((!isNullOrUndefined(this.startValue) && +this.startValue < +this.min)\n || (!isNullOrUndefined(this.endValue) && +this.endValue > +this.max)\n || ((!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) && +this.startValue > +this.endValue)) {\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n this.currentDate.setDate(1);\n this.currentDate.setMonth(this.currentDate.getMonth() + 1);\n }\n };\n DateRangePicker.prototype.selectStartMonth = function () {\n if (!isNullOrUndefined(this.startValue)) {\n if (!isNullOrUndefined(this.max) && this.isSameMonth(this.startValue, this.max)) {\n this.currentDate = new Date(+this.max);\n this.currentDate.setDate(1);\n this.currentDate.setMonth(this.currentDate.getMonth() - 1);\n }\n else if (!(this.startValue >= this.min && this.startValue <= this.max)\n || this.isDateDisabled(this.startValue)) {\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n }\n else {\n this.currentDate = new Date(+this.startValue);\n }\n }\n else {\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n this.startMonthCurrentDate();\n }\n if ((!isNullOrUndefined(this.endValue) && +this.endValue > +this.max)\n || (!isNullOrUndefined(this.startValue) && +this.startValue < +this.min)\n || ((!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) && +this.startValue > +this.endValue)) {\n this.currentDate = new Date(new Date().setHours(0, 0, 0, 0));\n }\n this.startMonthCurrentDate();\n };\n DateRangePicker.prototype.createCalendar = function () {\n var calendarContainer = this.createElement('div', { className: CALENDARCONTAINER });\n if (!this.isMobile) {\n this.selectStartMonth();\n this.renderCalendar();\n this.leftCalCurrentDate = new Date(+this.currentDate);\n this.calendarElement.classList.add(LEFTCALENDER);\n this.leftCalPrevIcon = this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + PREVICON);\n this.leftCalNextIcon = this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + NEXTICON);\n this.leftTitle = this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + TITLE);\n remove(this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + ICONCONTAINER));\n this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + HEADER).appendChild(this.leftCalNextIcon);\n this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + HEADER).appendChild(this.leftCalPrevIcon);\n prepend([this.leftCalPrevIcon], this.calendarElement.querySelector('.' + LEFTCALENDER + ' .' + HEADER));\n this.leftCalendar = this.calendarElement;\n var leftContainer = this.createElement('div', { className: LEFTCONTAINER });\n var rightContainer = this.createElement('div', { className: RIGHTCONTAINER });\n leftContainer.appendChild(this.leftCalendar);\n calendarContainer.appendChild(leftContainer);\n if (!this.isMobile) {\n EventHandler.add(this.leftTitle, 'click', this.leftNavTitle, this);\n }\n this.selectNextMonth();\n this.renderCalendar();\n this.rightCalCurrentDate = new Date(+this.currentDate);\n addClass([this.calendarElement], RIGHTCALENDER);\n this.rightCalendar = this.calendarElement;\n removeClass([this.leftCalendar && this.leftCalendar.querySelector('.e-content tbody')], 'e-zoomin');\n removeClass([this.rightCalendar && this.rightCalendar.querySelector('.e-content tbody')], 'e-zoomin');\n this.rightCalPrevIcon = this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + PREVICON);\n this.rightCalNextIcon = this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + NEXTICON);\n this.rightTitle = this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + TITLE);\n remove(this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + ICONCONTAINER));\n this.calendarElement.querySelector('table').setAttribute('tabindex', '-1');\n this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER).appendChild(this.rightCalNextIcon);\n this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER).appendChild(this.rightCalPrevIcon);\n prepend([this.rightCalPrevIcon], this.calendarElement.querySelector('.' + RIGHTCALENDER + ' .' + HEADER));\n rightContainer.appendChild(this.rightCalendar);\n calendarContainer.appendChild(rightContainer);\n if (!this.isMobile) {\n EventHandler.add(this.rightTitle, 'click', this.rightNavTitle, this);\n }\n }\n else {\n if (!isNullOrUndefined(this.startValue)) {\n this.currentDate = new Date(+this.startValue);\n }\n _super.prototype.validateDate.call(this);\n _super.prototype.minMaxUpdate.call(this);\n _super.prototype.render.call(this);\n var prevIcon = this.calendarElement.querySelector('.' + CALENDAR + ' .' + PREVICON);\n var nextIcon = this.calendarElement.querySelector('.' + CALENDAR + ' .' + NEXTICON);\n remove(this.calendarElement.querySelector('.' + CALENDAR + ' .' + ICONCONTAINER));\n this.calendarElement.querySelector('.' + CALENDAR + ' .' + HEADER).appendChild(nextIcon);\n this.calendarElement.querySelector('.' + CALENDAR + ' .' + HEADER).appendChild(prevIcon);\n prepend([prevIcon], this.calendarElement.querySelector('.' + CALENDAR + ' .' + HEADER));\n this.deviceCalendar = this.calendarElement;\n calendarContainer.appendChild(this.calendarElement);\n this.headerTitleElement = this.calendarElement.querySelector('.' + CALENDAR + ' .' + HEADER + ' .' + TITLE);\n }\n return calendarContainer;\n };\n DateRangePicker.prototype.leftNavTitle = function (e) {\n if (this.isPopupOpen()) {\n this.calendarElement = this.leftCalendar;\n this.calendarNavigation(e, this.calendarElement);\n }\n };\n DateRangePicker.prototype.calendarNavigation = function (e, element) {\n this.table = element.querySelector('table');\n this.headerTitleElement = element.querySelector('.e-title');\n this.tableBodyElement = element.querySelector('tbody');\n this.tableHeadElement = element.querySelector('thead');\n this.contentElement = element.querySelector('.e-content');\n this.updateCalendarElement(element);\n _super.prototype.navigateTitle.call(this, e);\n this.updateNavIcons();\n };\n DateRangePicker.prototype.rightNavTitle = function (e) {\n if (this.isPopupOpen()) {\n this.calendarElement = this.rightCalendar;\n this.calendarNavigation(e, this.calendarElement);\n }\n };\n DateRangePicker.prototype.clickEventEmitter = function (e) {\n if (!this.isMobile) {\n if (closest(e.target, '.e-calendar.e-left-calendar')) {\n this.calendarElement = this.leftCalendar;\n this.updateCalendarElement(this.leftCalendar);\n }\n else {\n this.calendarElement = this.rightCalendar;\n this.updateCalendarElement(this.rightCalendar);\n }\n }\n };\n /**\n * Gets the current view of the Calendar.\n * @returns string\n * @private\n * @hidden\n */\n DateRangePicker.prototype.currentView = function () {\n return _super.prototype.currentView.call(this);\n };\n DateRangePicker.prototype.navigatedEvent = function (e) {\n var element;\n if (this.isMobile && this.currentView() === 'Month') {\n this.bindCalendarCellEvents();\n this.deviceNavigation();\n this.removeFocusedDate();\n }\n else if (this.isMobile && (this.currentView() === 'Decade' || this.currentView() === 'Year')) {\n this.selectableDates();\n }\n else {\n if (!this.isMobile && this.currentView() === 'Month') {\n element = this.calendarElement.classList.contains('e-left-calendar') ? this.leftCalendar : this.rightCalendar;\n if (element === this.leftCalendar && ((e && !e.currentTarget.children[0].classList.contains('e-icons'))\n || (!isNullOrUndefined(this.controlDown)))) {\n this.leftCalCurrentDate = new Date(+this.currentDate);\n this.rightCalCurrentDate = new Date(new Date(+this.currentDate).setMonth(new Date(+this.currentDate).getMonth() + 1));\n this.currentDate = this.leftCalCurrentDate;\n this.updateCalendarElement(this.leftCalendar);\n this.updateControl(this.leftCalendar);\n this.updateCalendarElement(this.rightCalendar);\n this.navigateTo('Month', this.rightCalCurrentDate);\n this.updateControl(this.rightCalendar);\n this.updateNavIcons();\n this.calendarIconEvent();\n this.calendarIconRipple();\n }\n else if (e && !e.currentTarget.children[0].classList.contains('e-icons')\n || (!isNullOrUndefined(this.controlDown))) {\n this.rightCalCurrentDate = new Date(+this.currentDate);\n this.leftCalCurrentDate = new Date(this.currentDate.setMonth(this.currentDate.getMonth() - 1));\n this.currentDate = this.rightCalCurrentDate;\n this.updateCalendarElement(this.rightCalendar);\n this.updateControl(this.rightCalendar);\n this.updateCalendarElement(this.leftCalendar);\n if (this.startValue && (this.startValue.getMonth() < this.rightCalCurrentDate.getMonth() &&\n this.startValue.getFullYear() <= this.rightCalCurrentDate.getFullYear())) {\n if (isNullOrUndefined(this.endValue)) {\n this.effect = '';\n this.navigateTo('Month', new Date(+this.startValue));\n }\n else {\n this.navigateTo('Month', this.leftCalCurrentDate);\n }\n }\n else {\n this.navigateTo('Month', this.leftCalCurrentDate);\n }\n this.updateControl(this.leftCalendar);\n this.updateNavIcons();\n this.calendarIconEvent();\n this.calendarIconRipple();\n }\n }\n else if (!this.isMobile && (this.currentView() === 'Decade' || this.currentView() === 'Year')) {\n this.updateNavIcons();\n this.calendarIconEvent();\n }\n }\n };\n DateRangePicker.prototype.createControl = function () {\n var controlContainer = this.createElement('div', { className: RANGECONTAINER });\n var headerContainer = this.createElement('div', { className: RANGEHEADER });\n var labelContainer = this.createRangeHeader();\n headerContainer.appendChild(labelContainer);\n var daySpan = this.createElement('div', { className: DAYSPAN });\n attributes(daySpan, { 'aria-label': 'Selected Days' });\n daySpan.textContent = this.l10n.getConstant('selectedDays');\n headerContainer.appendChild(daySpan);\n var separator = this.createElement('div', { className: SEPARATOR });\n var calendarContainer = this.createCalendar();\n controlContainer.appendChild(headerContainer);\n controlContainer.appendChild(separator);\n controlContainer.appendChild(calendarContainer);\n var footerSection = this.createElement('div', { className: FOOTER });\n var cancelBtn = this.createElement('button', { className: CANCEL + ' ' + FLAT + ' ' + CSS });\n var applyBtn = this.createElement('button');\n addClass([applyBtn], [APPLY, FLAT, PRIMARY, CSS]);\n footerSection.appendChild(applyBtn);\n footerSection.appendChild(cancelBtn);\n var enable = !isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue);\n this.cancelButton = new Button({ content: this.l10n.getConstant('cancelText') }, cancelBtn);\n this.applyButton = new Button({ content: this.l10n.getConstant('applyText'), disabled: !enable }, applyBtn);\n EventHandler.add(applyBtn, 'click', this.applyFunction, this);\n EventHandler.add(cancelBtn, 'click', this.cancelFunction, this);\n this.popupWrapper.appendChild(controlContainer);\n if (!this.isMobile) {\n if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label)) {\n this.createPresets();\n this.listRippleEffect();\n addClass([controlContainer], RANGEBORDER);\n addClass([this.popupWrapper], 'e-preset-wrapper');\n var presets = this.popupWrapper.querySelector('.' + PRESETS);\n presets.style.height = this.popupWrapper.querySelector('.' + RANGECONTAINER).getBoundingClientRect().height + 'px';\n }\n }\n this.popupWrapper.appendChild(footerSection);\n if (this.isMobile) {\n this.deviceHeaderUpdate();\n }\n this.renderPopup();\n };\n DateRangePicker.prototype.cancelFunction = function (eve) {\n if (document.activeElement !== this.inputElement) {\n this.preventFocus = true;\n this.inputElement.focus();\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n eve.preventDefault();\n if (this.isKeyPopup) {\n this.inputElement.focus();\n this.isKeyPopup = false;\n }\n this.startValue = null;\n this.endValue = null;\n this.removeSelection();\n this.hide(eve);\n };\n DateRangePicker.prototype.deviceHeaderUpdate = function () {\n if (isNullOrUndefined(this.startValue) && isNullOrUndefined(this.endValue)) {\n this.endButton.element.setAttribute('disabled', '');\n this.startButton.element.classList.add(ACTIVE);\n }\n else if (!isNullOrUndefined(this.startValue)) {\n this.startButton.element.classList.add(ACTIVE);\n }\n };\n DateRangePicker.prototype.applyFunction = function (eve) {\n eve.preventDefault();\n if (this.closeEventArgs && this.closeEventArgs.cancel) {\n this.startValue = this.popupWrapper.querySelector('.e-start-date') &&\n this.getIdValue(null, this.popupWrapper.querySelector('.e-start-date'));\n this.endValue = this.popupWrapper.querySelector('.e-end-date') &&\n this.getIdValue(null, this.popupWrapper.querySelector('.e-end-date'));\n this.setValue();\n }\n if (document.activeElement !== this.inputElement) {\n this.preventFocus = true;\n this.inputElement.focus();\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n if (eve.type !== 'touchstart' &&\n this.closeEventArgs && !this.closeEventArgs.cancel) {\n eve.preventDefault();\n }\n if (!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) {\n this.previousStartValue = new Date(+this.startValue);\n this.previousEndValue = new Date(+this.endValue);\n this.previousEleValue = this.inputElement.value;\n Input.setValue(this.rangeArgs(eve).text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.changeTrigger(eve);\n this.hide(eve ? eve : null);\n this.errorClass();\n }\n else {\n this.hide(eve ? eve : null);\n }\n if (!this.isMobile) {\n this.isKeyPopup = false;\n if (this.isRangeIconClicked) {\n this.inputWrapper.container.children[1].focus();\n this.popupKeyboardModule = new KeyboardEvents(this.inputWrapper.container.children[1], {\n eventName: 'keydown',\n keyAction: this.popupKeyActionHandle.bind(this),\n keyConfigs: this.keyInputConfigs\n });\n }\n }\n };\n DateRangePicker.prototype.onMouseClick = function (event, item) {\n if (event.type === 'touchstart') {\n return;\n }\n var target = item || event.target;\n var li = closest(target, '.' + LISTCLASS);\n var isClick = li && li.classList.contains(ACTIVE);\n if (li && li.classList.contains(LISTCLASS)) {\n this.setListSelection(li, event);\n }\n this.inputElement.focus();\n if (!this.isMobile) {\n this.preventFocus = true;\n if (li && li.classList.contains(LISTCLASS) && li.getAttribute('id') === 'custom_range') {\n this.leftCalendar.children[1].firstElementChild.focus();\n }\n else {\n if (!isClick && event.type === 'keydown') {\n this.inputElement.focus();\n }\n }\n }\n };\n DateRangePicker.prototype.onMouseOver = function (event) {\n var li = closest(event.target, '.' + LISTCLASS);\n if (li && li.classList.contains(LISTCLASS) && !li.classList.contains(HOVER)) {\n addClass([li], HOVER);\n }\n };\n DateRangePicker.prototype.onMouseLeave = function (event) {\n var item = closest(event.target, '.' + HOVER);\n if (!isNullOrUndefined(item)) {\n removeClass([item], HOVER);\n }\n };\n DateRangePicker.prototype.setListSelection = function (li, event) {\n if (li && (!li.classList.contains(ACTIVE) || (this.isMobile && li.classList.contains(ACTIVE)))) {\n if (this.isMobile && li.classList.contains(ACTIVE)) {\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);\n var values_1 = this.presetsItem[this.activeIndex];\n if (values_1.id === 'custom_range') {\n this.renderCustomPopup();\n return;\n }\n return;\n }\n this.removeListSelection();\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);\n addClass([li], ACTIVE);\n li.setAttribute('aria-selected', 'true');\n var values = this.presetsItem[this.activeIndex];\n if (values.id === 'custom_range') {\n this.renderCustomPopup();\n }\n else {\n this.applyPresetRange(values);\n }\n }\n };\n DateRangePicker.prototype.removeListSelection = function () {\n var item = this.presetElement.querySelector('.' + ACTIVE);\n if (!isNullOrUndefined(item)) {\n removeClass([item], ACTIVE);\n item.removeAttribute('aria-selected');\n }\n };\n DateRangePicker.prototype.setValue = function () {\n this.modelValue = [this.startValue, this.endValue];\n };\n DateRangePicker.prototype.applyPresetRange = function (values) {\n this.hide(null);\n this.presetsItem[this.presetsItem.length - 1].start = null;\n this.presetsItem[this.presetsItem.length - 1].end = null;\n this.startValue = values.start;\n this.endValue = values.end;\n this.setValue();\n this.refreshControl();\n this.trigger('select', this.rangeArgs(null));\n this.changeTrigger();\n this.previousEleValue = this.inputElement.value;\n this.isCustomRange = false;\n this.leftCalendar = this.rightCalendar = null;\n if (this.isKeyPopup) {\n this.isRangeIconClicked = false;\n this.inputElement.focus();\n }\n };\n DateRangePicker.prototype.showPopup = function (element, event) {\n this.presetHeight();\n if (this.zIndex === 1000) {\n this.popupObj.show(null, this.element);\n }\n else {\n this.popupObj.show(null, null);\n }\n if (this.isMobile) {\n this.popupObj.refreshPosition();\n }\n };\n DateRangePicker.prototype.renderCustomPopup = function () {\n this.isCustomWindow = true;\n this.popupObj.hide();\n this.popupWrapper = this.createElement('div', { id: this.element.id + '_popup', className: ROOT + ' ' + POPUP });\n this.renderControl();\n this.openEventArgs.appendTo.appendChild(this.popupWrapper);\n this.showPopup();\n this.isCustomRange = true;\n if (!this.isMobile) {\n this.calendarFocus();\n }\n };\n DateRangePicker.prototype.listRippleEffect = function () {\n for (var _i = 0, _a = this.liCollections; _i < _a.length; _i++) {\n var li = _a[_i];\n rippleEffect(li);\n }\n };\n DateRangePicker.prototype.createPresets = function () {\n if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label)) {\n this.presetElement = this.createElement('div', { className: PRESETS, attrs: { 'tabindex': '0' } });\n var listTag = ListBase.createList(this.createElement, this.presetsItem, null, true);\n attributes(listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options' });\n this.presetElement.appendChild(listTag);\n this.popupWrapper.appendChild(this.presetElement);\n this.liCollections = this.presetElement.querySelectorAll('.' + LISTCLASS);\n this.wireListEvents();\n if (this.isMobile) {\n this.presetElement.style.width = this.inputWrapper.container.getBoundingClientRect().width + 'px';\n }\n if (!isNullOrUndefined(this.activeIndex) && this.activeIndex > -1) {\n addClass([this.liCollections[this.activeIndex]], ACTIVE);\n }\n }\n };\n DateRangePicker.prototype.wireListEvents = function () {\n EventHandler.add(this.presetElement, 'click', this.onMouseClick, this);\n if (!this.isMobile) {\n EventHandler.add(this.presetElement, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.presetElement, 'mouseout', this.onMouseLeave, this);\n }\n };\n DateRangePicker.prototype.unWireListEvents = function () {\n if (!isNullOrUndefined(this.presetElement)) {\n EventHandler.remove(this.presetElement, 'click touchstart', this.onMouseClick);\n if (!this.isMobile) {\n EventHandler.remove(this.presetElement, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.presetElement, 'mouseout', this.onMouseLeave);\n }\n }\n };\n // tslint:disable-next-line:max-func-body-length\n DateRangePicker.prototype.renderPopup = function () {\n var _this = this;\n this.popupWrapper.classList.add('e-control');\n var popupWidth = this.popupWrapper.getBoundingClientRect().width;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass.trim() !== '') {\n this.popupWrapper.className += ' ' + this.cssClass;\n }\n if (this.isMobile && this.isCustomWindow) {\n this.modal = this.createElement('div');\n document.body.appendChild(this.modal);\n }\n this.popupObj = new Popup(this.popupWrapper, {\n relateTo: this.isMobile && this.isCustomWindow ? document.body :\n (!isNullOrUndefined(this.targetElement) ? this.targetElement : this.inputWrapper.container),\n position: (this.isMobile ?\n (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label) && !this.isCustomWindow ?\n { X: 'left', Y: 'bottom' } : { X: 'center', Y: 'center' }) :\n this.enableRtl ? { X: 'left', Y: 'bottom' } : { X: 'right', Y: 'bottom' }),\n offsetX: this.isMobile || this.enableRtl ? 0 : -popupWidth,\n offsetY: OFFSETVALUE,\n collision: this.isMobile ?\n (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label) && !this.isCustomWindow ?\n { X: 'fit' } : { X: 'fit', Y: 'fit' }) : { X: 'fit', Y: 'flip' },\n targetType: this.isMobile && this.isCustomWindow ? 'container' : 'relative',\n enableRtl: this.enableRtl,\n zIndex: this.zIndex,\n open: function () {\n attributes(_this.inputElement, { 'aria-expanded': 'true' });\n addClass([_this.inputWrapper.buttons[0]], ACTIVE);\n if (!_this.isMobile) {\n if (_this.cancelButton) {\n _this.btnKeyboardModule = new KeyboardEvents(_this.cancelButton.element, {\n eventName: 'keydown',\n keyAction: _this.popupKeyActionHandle.bind(_this),\n keyConfigs: { tab: 'tab', altRightArrow: 'alt+rightarrow', altLeftArrow: 'alt+leftarrow' }\n });\n _this.btnKeyboardModule = new KeyboardEvents(_this.applyButton.element, {\n eventName: 'keydown',\n keyAction: _this.popupKeyActionHandle.bind(_this),\n keyConfigs: { altRightArrow: 'alt+rightarrow', altLeftArrow: 'alt+leftarrow' }\n });\n }\n if (!isNullOrUndefined(_this.leftCalendar)) {\n if (!_this.isRangeIconClicked) {\n _this.calendarFocus();\n }\n }\n if (!isNullOrUndefined(_this.presetElement)) {\n _this.presetKeyboardModule = new KeyboardEvents(_this.presetElement, {\n eventName: 'keydown',\n keyAction: _this.presetKeyActionHandler.bind(_this),\n keyConfigs: _this.presetKeyConfig\n });\n _this.presetKeyboardModule = new KeyboardEvents(_this.presetElement, {\n eventName: 'keydown',\n keyAction: _this.popupKeyActionHandle.bind(_this),\n keyConfigs: { altRightArrow: 'alt+rightarrow', altLeftArrow: 'alt+leftarrow' }\n });\n if (isNullOrUndefined(_this.leftCalendar)) {\n _this.preventBlur = true;\n _this.presetElement.focus();\n }\n else {\n _this.presetElement.setAttribute('tabindex', '-1');\n }\n }\n _this.popupKeyBoardHandler();\n }\n if (_this.isMobile && !Browser.isDevice) {\n EventHandler.add(document, 'keydown', _this.popupCloseHandler, _this);\n }\n },\n close: function () {\n attributes(_this.inputElement, { 'aria-expanded': 'false' });\n removeClass([_this.inputWrapper.buttons[0]], ACTIVE);\n if (_this.isRangeIconClicked) {\n _this.inputWrapper.container.children[1].focus();\n }\n if (!isUndefined(_this.presets[0].start && _this.presets[0].end && _this.presets[0].label)) {\n _this.unWireListEvents();\n }\n if (!isNullOrUndefined(_this.popupObj)) {\n detach(_this.popupObj.element);\n _this.popupObj.destroy();\n _this.popupObj = null;\n }\n if (_this.isMobile && !Browser.isDevice) {\n EventHandler.remove(document, 'keydown', _this.popupCloseHandler);\n }\n }\n });\n if (this.isMobile) {\n this.popupObj.element.classList.add(DEVICE);\n if (!this.isMobile) {\n this.popupObj.element.classList.add('e-bigger');\n }\n }\n if (this.isMobile && this.isCustomWindow) {\n addClass([this.modal], [DEVICE, ROOT, 'e-range-modal']);\n document.body.className += ' ' + OVERFLOW;\n this.modal.style.display = 'block';\n }\n EventHandler.add(document, 'mousedown', this.documentHandler, this);\n };\n DateRangePicker.prototype.popupCloseHandler = function (e) {\n switch (e.keyCode) {\n case 27:\n this.hide(e);\n break;\n }\n };\n DateRangePicker.prototype.calendarFocus = function () {\n var startDate = this.popupObj && this.popupObj.element.querySelector('.' + STARTDATE);\n if (startDate) {\n var ele = closest(startDate, '.' + RIGHTCALENDER);\n ele = isNullOrUndefined(ele) ? this.leftCalendar : ele;\n if (this.isRangeIconClicked) {\n this.inputWrapper.container.focus();\n }\n else {\n this.preventBlur = true;\n ele.children[1].firstElementChild.focus();\n }\n addClass([startDate], FOCUSDATE);\n }\n else {\n if (this.isRangeIconClicked) {\n this.inputWrapper.container.focus();\n }\n else {\n this.preventBlur = true;\n this.leftCalendar.children[1].firstElementChild.focus();\n }\n }\n };\n DateRangePicker.prototype.presetHeight = function () {\n var presets = this.popupObj && this.popupObj.element.querySelector('.' + PRESETS);\n var rangeContainer = this.popupObj && this.popupObj.element.querySelector('.' + RANGECONTAINER);\n if (!isNullOrUndefined(presets) && !isNullOrUndefined(rangeContainer)) {\n presets.style.height = rangeContainer.getBoundingClientRect().height + 'px';\n }\n };\n DateRangePicker.prototype.presetKeyActionHandler = function (e) {\n switch (e.action) {\n case 'moveDown':\n this.listMoveDown(e);\n this.setScrollPosition();\n e.preventDefault();\n break;\n case 'moveUp':\n this.listMoveUp(e);\n this.setScrollPosition();\n e.preventDefault();\n break;\n case 'enter':\n var hvrItem = this.getHoverLI();\n var actItem = this.getActiveLI();\n if (!isNullOrUndefined(this.leftCalendar) && !isNullOrUndefined(actItem)) {\n if (isNullOrUndefined(hvrItem) || (!isNullOrUndefined(actItem) && actItem === hvrItem)) {\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(actItem);\n var values = this.presetsItem[this.activeIndex];\n if (values.id === 'custom_range') {\n this.calendarFocus();\n actItem.classList.remove(HOVER);\n e.preventDefault();\n return;\n }\n }\n }\n if (!isNullOrUndefined(hvrItem) || !isNullOrUndefined(actItem)) {\n this.onMouseClick(e, hvrItem || actItem);\n }\n e.preventDefault();\n break;\n case 'tab':\n if (this.leftCalendar) {\n var item = this.getHoverLI();\n if (!isNullOrUndefined(item)) {\n item.classList.remove(HOVER);\n }\n }\n else {\n this.hide(e);\n e.preventDefault();\n }\n break;\n }\n };\n DateRangePicker.prototype.listMoveDown = function (e) {\n var hvrItem = this.getHoverLI();\n var actItem = this.getActiveLI();\n if (!isNullOrUndefined(hvrItem)) {\n var li = hvrItem.nextElementSibling;\n if (!isNullOrUndefined(li) && li.classList.contains(LISTCLASS)) {\n removeClass([hvrItem], HOVER);\n addClass([li], HOVER);\n }\n }\n else if (!isNullOrUndefined(actItem)) {\n var li = actItem.nextElementSibling;\n if (!isNullOrUndefined(li) && li.classList.contains(LISTCLASS)) {\n addClass([li], HOVER);\n }\n }\n else {\n addClass([this.liCollections[0]], HOVER);\n }\n };\n DateRangePicker.prototype.listMoveUp = function (e) {\n var hvrItem = this.getHoverLI();\n var actItem = this.getActiveLI();\n if (!isNullOrUndefined(hvrItem)) {\n var li = hvrItem.previousElementSibling;\n if (!isNullOrUndefined(li) && li.classList.contains(LISTCLASS)) {\n removeClass([hvrItem], HOVER);\n addClass([li], HOVER);\n }\n }\n else if (!isNullOrUndefined(actItem)) {\n var li = actItem.previousElementSibling;\n if (!isNullOrUndefined(li) && li.classList.contains(LISTCLASS)) {\n addClass([li], HOVER);\n }\n }\n };\n DateRangePicker.prototype.getHoverLI = function () {\n var item = this.presetElement.querySelector('.' + HOVER);\n return item;\n };\n DateRangePicker.prototype.getActiveLI = function () {\n var item = this.presetElement.querySelector('.' + ACTIVE);\n return item;\n };\n DateRangePicker.prototype.popupKeyBoardHandler = function () {\n this.popupKeyboardModule = new KeyboardEvents(this.popupWrapper, {\n eventName: 'keydown',\n keyAction: this.popupKeyActionHandle.bind(this),\n keyConfigs: { escape: 'escape' }\n });\n this.popupKeyboardModule = new KeyboardEvents(this.inputWrapper.container.children[1], {\n eventName: 'keydown',\n keyAction: this.popupKeyActionHandle.bind(this),\n keyConfigs: this.keyInputConfigs\n });\n };\n DateRangePicker.prototype.setScrollPosition = function () {\n var listHeight = this.presetElement.getBoundingClientRect().height;\n var hover = this.presetElement.querySelector('.' + HOVER);\n var active = this.presetElement.querySelector('.' + ACTIVE);\n var element = !isNullOrUndefined(hover) ? hover : active;\n if (!isNullOrUndefined(element)) {\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.presetElement.scrollTop = nextEle ? (height - (listHeight / 2 + liHeight / 2)) : height;\n }\n else {\n this.presetElement.scrollTop = 0;\n }\n }\n };\n DateRangePicker.prototype.popupKeyActionHandle = function (e) {\n var presetElement = closest(e.target, '.' + PRESETS);\n switch (e.action) {\n case 'escape':\n if (this.isPopupOpen()) {\n if (this.isKeyPopup) {\n this.inputElement.focus();\n this.isKeyPopup = false;\n }\n this.hide(e);\n }\n else {\n this.inputWrapper.container.children[1].blur();\n }\n break;\n case 'enter':\n if (!this.isPopupOpen()) {\n this.show(null, e);\n }\n else {\n this.inputWrapper.container.children[1].focus();\n }\n break;\n case 'tab':\n this.hide(e);\n break;\n case 'altRightArrow':\n if (!isNullOrUndefined(presetElement)) {\n this.cancelButton.element.focus();\n }\n else {\n if (document.activeElement === this.cancelButton.element && this.applyButton.element.disabled !== true) {\n this.applyButton.element.focus();\n }\n else {\n this.leftCalendar.children[1].firstElementChild.focus();\n }\n }\n e.preventDefault();\n break;\n case 'altLeftArrow':\n if (!isNullOrUndefined(presetElement)) {\n this.rightCalendar.children[1].firstElementChild.focus();\n }\n else {\n if (document.activeElement === this.applyButton.element && this.applyButton.element.disabled !== true) {\n this.cancelButton.element.focus();\n }\n else {\n if (!isNullOrUndefined(this.presetElement) && (document.activeElement === this.cancelButton.element)) {\n this.presetElement.focus();\n }\n else {\n this.rightCalendar.children[1].firstElementChild.focus();\n }\n }\n }\n e.preventDefault();\n break;\n }\n };\n DateRangePicker.prototype.documentHandler = function (e) {\n if (isNullOrUndefined(this.popupObj)) {\n return;\n }\n var target = e.target;\n if (!this.inputWrapper.container.contains(target) ||\n (!isNullOrUndefined(this.popupObj) && !closest(target, this.popupWrapper.id))) {\n if ((e.type === 'touchstart' || e.type === 'mousedown') ||\n this.closeEventArgs && !this.closeEventArgs.cancel) {\n e.preventDefault();\n }\n }\n if ((isNullOrUndefined(this.targetElement) ||\n (!isNullOrUndefined(this.targetElement) && !(target === this.targetElement))) &&\n !(closest(target, '#' + this.popupObj.element.id))\n && !(closest(target, '.' + INPUTCONTAINER) === this.inputWrapper.container)\n && !(closest(target, '.e-daterangepicker.e-popup') && (!target.classList.contains('e-day')))) {\n this.preventBlur = false;\n if (this.isPopupOpen()) {\n this.applyFunction(e);\n if (!this.isMobile) {\n this.isRangeIconClicked = false;\n }\n }\n }\n };\n DateRangePicker.prototype.createInput = function () {\n this.inputWrapper = Input.createInput({\n floatLabelType: this.floatLabelType,\n element: this.inputElement,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: this.cssClass,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton,\n },\n buttons: [DATERANGEICON]\n }, this.createElement);\n attributes(this.inputElement, {\n 'aria-readonly': this.readonly ? 'true' : 'false', 'tabindex': '0', 'aria-haspopup': 'true',\n 'aria-activedescendant': 'null', 'aria-owns': this.element.id + '_popup', 'aria-expanded': 'false',\n 'role': 'daterangepicker', 'autocomplete': 'off', 'aria-disabled': !this.enabled ? 'true' : 'false',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false'\n });\n Input.addAttributes({ 'aria-label': 'select' }, this.inputWrapper.buttons[0]);\n if (!isNullOrUndefined(this.placeholder) && this.placeholder.trim() !== '') {\n Input.addAttributes({ 'aria-placeholder': this.placeholder }, this.inputElement);\n }\n this.setEleWidth(this.width);\n addClass([this.inputWrapper.container], DATERANGEWRAPPER);\n if (isNullOrUndefined(this.inputElement.getAttribute('name'))) {\n attributes(this.inputElement, { 'name': this.element.id });\n }\n if (this.inputElement.type === 'hidden') {\n this.inputWrapper.container.style.display = 'none';\n }\n this.refreshControl();\n this.previousEleValue = this.inputElement.value;\n };\n DateRangePicker.prototype.setEleWidth = function (width) {\n if (typeof width === 'string') {\n this.inputWrapper.container.style.width = (this.width);\n }\n else if (typeof width === 'number') {\n this.inputWrapper.container.style.width = formatUnit(this.width);\n }\n else {\n this.inputWrapper.container.style.width = '100%';\n }\n };\n DateRangePicker.prototype.refreshControl = function () {\n this.validateMinMax();\n if (this.strictMode) {\n this.validateRangeStrict();\n }\n var isDisabled = this.disabledDates();\n if (this.strictMode && (isDisabled)) {\n this.startValue = this.previousStartValue;\n this.setProperties({ startDate: this.startValue }, true);\n this.endValue = this.previousEndValue;\n this.setProperties({ endDate: this.endValue }, true);\n this.setValue();\n }\n this.updateInput();\n if (!this.strictMode) {\n this.validateRange();\n }\n if (!this.strictMode && (isDisabled)) {\n this.clearRange();\n }\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue) && !isDisabled) {\n this.disabledDateRender();\n }\n this.errorClass();\n this.previousStartValue = isNullOrUndefined(this.startValue) || isNaN(+this.startValue) ? null : new Date(+this.startValue);\n this.previousEndValue = isNullOrUndefined(this.endValue) || isNaN(+this.endValue) ? null : new Date(+this.endValue);\n };\n DateRangePicker.prototype.updateInput = function () {\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue)) {\n var startDate = this.globalize.formatDate(this.startValue, { format: this.format, type: 'date', skeleton: 'yMd' });\n var endDate = this.globalize.formatDate(this.endValue, { format: this.format, type: 'date', skeleton: 'yMd' });\n Input.setValue(startDate + ' ' + this.separator + ' ' + endDate, this.inputElement, this.floatLabelType, this.showClearButton);\n this.previousStartValue = new Date(+this.startValue);\n this.previousEndValue = new Date(+this.endValue);\n }\n };\n DateRangePicker.prototype.isDateDisabled = function (date) {\n if (isNullOrUndefined(date)) {\n return false;\n }\n var value = new Date(+date);\n if (+value < +this.min || +value > +this.max) {\n return true;\n }\n this.virtualRenderCellArgs = {\n date: value,\n isDisabled: false,\n };\n var args = this.virtualRenderCellArgs;\n this.virtualRenderCellEvent(args);\n if (args.isDisabled) {\n return true;\n }\n return false;\n };\n DateRangePicker.prototype.disabledDateRender = function () {\n this.disabledDays = [];\n this.disabledDayCnt = null;\n var localDate = new Date(+this.startValue);\n var count = 0;\n while (+localDate <= +this.endValue) {\n this.virtualRenderCellArgs = {\n date: localDate,\n isDisabled: false,\n };\n var args = this.virtualRenderCellArgs;\n this.virtualRenderCellEvent(args);\n if (args.isDisabled) {\n this.disabledDays.push(new Date(+args.date));\n if (+localDate > +this.startValue && +localDate < +this.endValue) {\n count++;\n }\n }\n this.addDay(localDate, 1, null, this.max, this.min);\n }\n this.disabledDayCnt = count;\n };\n DateRangePicker.prototype.virtualRenderCellEvent = function (args) {\n extend(this.virtualRenderCellArgs, { name: 'renderDayCell' });\n this.trigger('renderDayCell', args);\n };\n DateRangePicker.prototype.disabledDates = function () {\n var isStartDisabled = false;\n var isEndDisabled = false;\n if (!isNullOrUndefined(this.endValue) && !isNullOrUndefined(this.startValue)) {\n isStartDisabled = this.isDateDisabled(this.startValue);\n isEndDisabled = this.isDateDisabled(this.endValue);\n this.currentDate = null;\n this.setValue();\n }\n return (isStartDisabled || isEndDisabled);\n };\n DateRangePicker.prototype.setModelValue = function () {\n if (!this.value && this.startDate === null && this.endDate === null) {\n this.setProperties({ value: null }, true);\n }\n else if (this.value === null || this.value.start === null) {\n if (this.value === null) {\n this.setProperties({ value: [this.startDate, this.endDate] }, true);\n }\n else if (this.value.start === null) {\n this.setProperties({ value: { start: this.startDate, end: this.endDate } }, true);\n }\n }\n else {\n if ((this.value && this.value.length > 0) ||\n this.valueType && this.valueType.length > 0) {\n if (+this.startDate !== +this.value[0] || +this.endDate !== +this.value[1]) {\n this.setProperties({ value: [this.startDate, this.endDate] }, true);\n }\n if (this.value && this.value[0] == null && this.value[1] == null) {\n this.setProperties({ value: null }, true);\n }\n }\n else {\n if ((this.value && this.value.start)) {\n this.setProperties({ value: { start: this.startDate, end: this.endDate } }, true);\n }\n }\n }\n this.createHiddenInput();\n };\n /**\n * To dispatch the event manually\n */\n DateRangePicker.prototype.dispatchEvent = function (element, type) {\n var evt = document.createEvent('HTMLEvents');\n evt.initEvent(type, false, true);\n element.dispatchEvent(evt);\n this.firstHiddenChild.dispatchEvent(evt);\n };\n DateRangePicker.prototype.changeTrigger = function (e) {\n if (+this.initStartDate !== +this.startValue || +this.initEndDate !== +this.endValue) {\n this.setProperties({ endDate: this.checkDateValue(this.endValue) }, true);\n this.setProperties({ startDate: this.checkDateValue(this.startValue) }, true);\n this.setModelValue();\n this.trigger('change', this.rangeArgs(e));\n }\n this.previousEleValue = this.inputElement.value;\n this.initStartDate = this.checkDateValue(this.startValue);\n this.initEndDate = this.checkDateValue(this.endValue);\n };\n /**\n * This method is used to navigate to the month/year/decade view of the Calendar.\n * @param {string} view - Specifies the view of the Calendar.\n * @param {Date} date - Specifies the focused date in a view.\n * @returns void\n * @hidden\n */\n DateRangePicker.prototype.navigateTo = function (view, value) {\n _super.prototype.navigateTo.call(this, view, value);\n };\n /**\n * Sets the focus to widget for interaction.\n * @returns void\n */\n DateRangePicker.prototype.focusIn = function () {\n if (document.activeElement !== this.inputElement && this.enabled) {\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n this.inputElement.focus();\n var focusArguments = {\n model: this\n };\n this.trigger('focus', focusArguments);\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n * @returns void\n */\n DateRangePicker.prototype.focusOut = function () {\n var isBlur = this.preventBlur;\n if (document.activeElement === this.inputElement) {\n removeClass([this.inputWrapper.container], [INPUTFOCUS]);\n this.preventBlur = false;\n this.inputElement.blur();\n this.preventBlur = isBlur;\n }\n };\n /**\n * To destroy the widget.\n * @returns void\n */\n DateRangePicker.prototype.destroy = function () {\n this.hide(null);\n var ariaAttrs = {\n 'aria-readonly': this.readonly ? 'true' : 'false', 'tabindex': '0', 'aria-haspopup': 'true',\n 'aria-activedescendant': 'null', 'aria-owns': this.element.id + '_popup', 'aria-expanded': 'false',\n 'role': 'daterangepicker', 'autocomplete': 'off', 'aria-disabled': !this.enabled ? 'true' : 'false',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'aria-invalid': 'false', 'spellcheck': 'false'\n };\n if (this.inputElement) {\n removeClass([this.inputElement], [ROOT]);\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n Input.removeAttributes(ariaAttrs, this.inputElement);\n this.ensureInputAttribute();\n this.inputElement.classList.remove('e-input');\n if (!isNullOrUndefined(this.inputWrapper)) {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.rangeIconHandler);\n if (this.angularTag === null) {\n this.inputWrapper.container.parentElement.appendChild(this.inputElement);\n }\n detach(this.inputWrapper.container);\n }\n }\n if (!isNullOrUndefined(this.inputKeyboardModule) && !this.isMobile) {\n this.inputKeyboardModule.destroy();\n }\n if (this.popupObj) {\n if (!this.isMobile) {\n this.clearCalendarEvents();\n }\n }\n _super.prototype.destroy.call(this);\n this.inputWrapper = this.popupWrapper = this.popupObj = this.cloneElement = this.presetElement = null;\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n if ((!isNullOrUndefined(this.firstHiddenChild))\n && (!isNullOrUndefined(this.secondHiddenChild))) {\n detach(this.firstHiddenChild);\n detach(this.secondHiddenChild);\n this.firstHiddenChild = this.secondHiddenChild = null;\n this.inputElement.setAttribute('name', this.element.getAttribute('data-name'));\n this.inputElement.removeAttribute('data-name');\n }\n };\n DateRangePicker.prototype.ensureInputAttribute = function () {\n for (var attr = 0; attr < this.inputElement.attributes.length; attr++) {\n var prop = this.inputElement.attributes[attr].name;\n if (isNullOrUndefined(this.cloneElement.getAttribute(prop))) {\n if (prop.toLowerCase() === 'value' || isNullOrUndefined(this.cloneElement.getAttribute('value'))) {\n this.inputElement.value = '';\n }\n this.inputElement.removeAttribute(prop);\n }\n }\n };\n /**\n * To get component name\n * @returns string\n * @private\n */\n DateRangePicker.prototype.getModuleName = function () {\n return 'daterangepicker';\n };\n /**\n * Return the properties that are maintained upon browser refresh.\n * @returns string\n */\n DateRangePicker.prototype.getPersistData = function () {\n var keyEntity = ['startDate', 'endDate', 'value'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Return the selected range and day span in the DateRangePicker.\n * @returns Object\n */\n DateRangePicker.prototype.getSelectedRange = function () {\n var range;\n if (!isNullOrUndefined(this.startValue) && !isNullOrUndefined(this.endValue)) {\n range = (Math.round(Math.abs((this.startValue.getTime() - this.endValue.getTime()) / (1000 * 60 * 60 * 24))) + 1);\n this.disabledDateRender();\n if (!isNullOrUndefined(this.disabledDayCnt)) {\n range = range - this.disabledDayCnt;\n this.disabledDayCnt = null;\n }\n }\n else {\n range = 0;\n }\n return { startDate: this.startValue, endDate: this.endValue, daySpan: range };\n };\n /**\n * To open the Popup container in the DateRangePicker component.\n * @returns void\n */\n DateRangePicker.prototype.show = function (element, event) {\n if (this.isMobile && this.popupObj) {\n this.popupObj.refreshPosition();\n }\n if ((this.enabled && this.readonly) || !this.enabled || this.popupObj) {\n return;\n }\n else {\n if (!this.isPopupOpen()) {\n if (element) {\n this.targetElement = element;\n }\n this.createPopup();\n this.openEventArgs = {\n popup: this.popupObj || null,\n cancel: false,\n date: this.inputElement.value,\n model: this,\n event: event ? event : null,\n appendTo: document.body\n };\n this.trigger('open', this.openEventArgs);\n if (!this.openEventArgs.cancel) {\n this.openEventArgs.appendTo.appendChild(this.popupWrapper);\n this.showPopup(element, event);\n var isPreset = (!this.isCustomRange || (this.isMobile && this.isCustomRange));\n if (!isUndefined(this.presets[0].start && this.presets[0].end && this.presets[0].label) && isPreset) {\n this.setScrollPosition();\n }\n }\n }\n }\n };\n /**\n * To close the Popup container in the DateRangePicker component.\n * @returns void\n */\n DateRangePicker.prototype.hide = function (event) {\n if (this.popupObj) {\n if (isNullOrUndefined(this.previousEndValue) && isNullOrUndefined(this.previousStartValue)) {\n this.clearRange();\n }\n else {\n if (!isNullOrUndefined(this.previousStartValue)) {\n this.startValue = new Date('' + this.previousStartValue);\n this.setValue();\n this.currentDate = new Date('' + this.startValue);\n }\n else {\n this.startValue = null;\n this.setValue();\n }\n if (!isNullOrUndefined(this.previousEndValue)) {\n this.endValue = new Date('' + this.previousEndValue);\n this.setValue();\n }\n else {\n this.endValue = null;\n this.setValue();\n }\n }\n if (this.isPopupOpen()) {\n this.closeEventArgs = {\n cancel: false,\n popup: this.popupObj,\n date: this.inputElement.value,\n model: this,\n event: event ? event : null\n };\n this.trigger('close', this.closeEventArgs);\n if (!this.closeEventArgs.cancel) {\n if (this.isMobile) {\n if (!isNullOrUndefined(this.startButton) && !isNullOrUndefined(this.endButton)) {\n EventHandler.remove(this.startButton.element, 'click touchstart', this.deviceHeaderClick);\n EventHandler.remove(this.endButton.element, 'click touchstart', this.deviceHeaderClick);\n }\n }\n if (this.popupObj) {\n this.popupObj.hide();\n if (this.preventBlur) {\n this.inputElement.focus();\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n }\n if (!this.isMobile) {\n if (!isNullOrUndefined(this.leftKeyboardModule) && !isNullOrUndefined(this.rightKeyboardModule)) {\n this.leftKeyboardModule.destroy();\n this.rightKeyboardModule.destroy();\n }\n if (!isNullOrUndefined(this.presetElement)) {\n this.presetKeyboardModule.destroy();\n }\n if (!isNullOrUndefined(this.cancelButton)) {\n this.btnKeyboardModule.destroy();\n }\n }\n this.targetElement = null;\n removeClass([document.body], OVERFLOW);\n EventHandler.remove(document, 'mousedown touchstart', this.documentHandler);\n if (this.isMobile && this.modal) {\n this.modal.style.display = 'none';\n this.modal.outerHTML = '';\n this.modal = null;\n }\n this.isKeyPopup = this.dateDisabled = false;\n }\n else {\n removeClass([this.inputWrapper.buttons[0]], ACTIVE);\n }\n }\n }\n this.updateHiddenInput();\n if (this.isMobile) {\n this.element.removeAttribute('readonly');\n }\n };\n DateRangePicker.prototype.setLocale = function () {\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 this.changeTrigger();\n };\n DateRangePicker.prototype.refreshChange = function () {\n this.refreshControl();\n this.changeTrigger();\n };\n DateRangePicker.prototype.setDate = function () {\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n this.refreshChange();\n };\n DateRangePicker.prototype.enableInput = function () {\n if (+this.min <= +this.max) {\n this.setProperties({ enabled: true }, true);\n Input.setEnabled(this.enabled, this.inputElement);\n if (this.element.hasAttribute('disabled')) {\n this.bindEvents();\n }\n }\n };\n DateRangePicker.prototype.clearModelvalue = function (newProp, oldProp) {\n this.setProperties({ startDate: null }, true);\n this.setProperties({ endDate: null }, true);\n if (oldProp.value && oldProp.value.length > 0) {\n this.setProperties({ value: null }, true);\n }\n else if (oldProp.value && oldProp.value.start) {\n this.setProperties({ value: { start: null, end: null } }, true);\n }\n else if (oldProp.value && !oldProp.value.start) {\n this.setProperties({ value: { start: null, end: null } }, true);\n }\n this.updateValue();\n this.setDate();\n };\n DateRangePicker.prototype.createHiddenInput = function () {\n if (isNullOrUndefined(this.firstHiddenChild) && isNullOrUndefined(this.secondHiddenChild)) {\n this.firstHiddenChild = this.createElement('input');\n this.secondHiddenChild = this.createElement('input');\n }\n if (!isNullOrUndefined(this.inputElement.getAttribute('name'))) {\n this.inputElement.setAttribute('data-name', this.inputElement.getAttribute('name'));\n this.inputElement.removeAttribute('name');\n }\n attributes(this.firstHiddenChild, {\n 'type': 'text', 'name': this.inputElement.getAttribute('data-name')\n });\n attributes(this.secondHiddenChild, {\n 'type': 'text', 'name': this.inputElement.getAttribute('data-name'),\n });\n var format = { type: 'datetime', skeleton: 'yMd' };\n this.firstHiddenChild.value = this.startDate && this.globalize.formatDate(this.startDate, format);\n this.secondHiddenChild.value = this.endDate && this.globalize.formatDate(this.endDate, format);\n this.inputElement.parentElement.appendChild(this.firstHiddenChild);\n this.inputElement.parentElement.appendChild(this.secondHiddenChild);\n this.firstHiddenChild.style.display = 'none';\n this.secondHiddenChild.style.display = 'none';\n };\n /**\n * Called internally if any of the property value changed.\n * returns void\n * @private\n */\n // tslint:disable-next-line:max-func-body-length\n DateRangePicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n var format = { format: this.format, type: 'date', skeleton: 'yMd' };\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n this.hide(null);\n switch (prop) {\n case 'width':\n this.setEleWidth(this.width);\n break;\n case 'separator':\n this.previousEleValue = this.inputElement.value;\n this.setProperties({ separator: newProp.separator }, true);\n this.updateInput();\n this.changeTrigger();\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n this.setProperties({ placeholder: newProp.placeholder }, true);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n this.inputElement.setAttribute('aria-readonly', '' + this.readonly);\n break;\n case 'cssClass':\n if (this.popupWrapper) {\n this.popupWrapper.className += ' ' + newProp.cssClass;\n }\n this.inputWrapper.container.className += ' ' + newProp.cssClass;\n this.setProperties({ cssClass: newProp.cssClass }, true);\n break;\n case 'enabled':\n this.setProperties({ enabled: newProp.enabled }, true);\n Input.setEnabled(this.enabled, this.inputElement);\n this.bindEvents();\n break;\n case 'allowEdit':\n this.setRangeAllowEdit();\n break;\n case 'enableRtl':\n this.setProperties({ enableRtl: newProp.enableRtl }, true);\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n break;\n case 'format':\n this.setProperties({ format: newProp.format }, true);\n this.updateInput();\n this.changeTrigger();\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.setLocale();\n break;\n case 'showClearButton':\n Input.setClearButton(this.showClearButton, this.inputElement, this.inputWrapper);\n this.bindClearEvent();\n break;\n case 'startDate':\n if (typeof newProp.startDate === 'string') {\n newProp.startDate = this.globalize.parseDate(newProp.startDate, format);\n }\n if (+this.initStartDate !== +newProp.startDate) {\n this.startValue = this.checkDateValue(new Date('' + newProp.startDate));\n this.setDate();\n this.setValue();\n }\n break;\n case 'endDate':\n if (typeof newProp.endDate === 'string') {\n newProp.endDate = this.globalize.parseDate(newProp.endDate, format);\n }\n if (+this.initEndDate !== +newProp.endDate) {\n this.endValue = this.checkDateValue(new Date('' + newProp.endDate));\n this.setDate();\n this.setValue();\n }\n break;\n case 'value':\n if ((!isNullOrUndefined(newProp.value) && newProp.value.length > 0)\n || !isNullOrUndefined(newProp.value) && newProp.value.start) {\n this.valueType = newProp.value;\n if (newProp.value[0] === null || (newProp.value.start === null)) {\n if (newProp.value.length === 1 || (newProp.value.start)) {\n this.clearModelvalue(newProp, oldProp);\n }\n else if (newProp.value[1] === null ||\n (newProp.value.start === null)) {\n this.clearModelvalue(newProp, oldProp);\n }\n }\n else if ((+this.initStartDate !== +newProp.value[0]\n || +this.initEndDate !== +newProp.value[1]) ||\n (+this.initStartDate !== +(newProp.value.start\n || +this.initEndDate !== +newProp.value.start))) {\n if (newProp.value.length === 1) {\n this.modelValue = newProp.value;\n }\n else if (newProp.value.start) {\n this.modelValue = newProp.value;\n }\n this.updateValue();\n this.setDate();\n }\n }\n else {\n if (isNullOrUndefined(this.value)\n || newProp.value.start == null) {\n this.valueType = newProp.value;\n this.startValue = null;\n this.endValue = null;\n this.clearModelvalue(newProp, oldProp);\n }\n }\n break;\n case 'minDays':\n this.setProperties({ minDays: newProp.minDays }, true);\n this.refreshChange();\n break;\n case 'maxDays':\n this.setProperties({ maxDays: newProp.maxDays }, true);\n this.refreshChange();\n break;\n case 'min':\n this.setProperties({ min: this.checkDateValue(new Date('' + newProp.min)) }, true);\n this.previousEleValue = this.inputElement.value;\n this.enableInput();\n this.refreshChange();\n break;\n case 'max':\n this.setProperties({ max: this.checkDateValue(new Date('' + newProp.max)) }, true);\n this.enableInput();\n this.refreshChange();\n break;\n case 'strictMode':\n this.setProperties({ strictMode: newProp.strictMode }, true);\n this.refreshChange();\n break;\n case 'presets':\n this.setProperties({ presets: newProp.presets }, true);\n this.processPresets();\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 }\n }\n };\n __decorate([\n Property(null)\n ], DateRangePicker.prototype, \"value\", void 0);\n __decorate([\n Property(false)\n ], DateRangePicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(false)\n ], DateRangePicker.prototype, \"enableRtl\", void 0);\n __decorate([\n Property(new Date(1900, 0, 1))\n ], DateRangePicker.prototype, \"min\", void 0);\n __decorate([\n Property(new Date(2099, 11, 31))\n ], DateRangePicker.prototype, \"max\", void 0);\n __decorate([\n Property(null)\n ], DateRangePicker.prototype, \"locale\", void 0);\n __decorate([\n Property(null)\n ], DateRangePicker.prototype, \"firstDayOfWeek\", void 0);\n __decorate([\n Property(false)\n ], DateRangePicker.prototype, \"weekNumber\", void 0);\n __decorate([\n Property('Gregorian')\n ], DateRangePicker.prototype, \"calendarMode\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"navigated\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"renderDayCell\", void 0);\n __decorate([\n Property(null)\n ], DateRangePicker.prototype, \"startDate\", void 0);\n __decorate([\n Property(null)\n ], DateRangePicker.prototype, \"endDate\", void 0);\n __decorate([\n Collection([{}], Presets)\n ], DateRangePicker.prototype, \"presets\", void 0);\n __decorate([\n Property('')\n ], DateRangePicker.prototype, \"width\", void 0);\n __decorate([\n Property(1000)\n ], DateRangePicker.prototype, \"zIndex\", void 0);\n __decorate([\n Property(true)\n ], DateRangePicker.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(true)\n ], DateRangePicker.prototype, \"showTodayButton\", void 0);\n __decorate([\n Property('Month')\n ], DateRangePicker.prototype, \"start\", void 0);\n __decorate([\n Property('Month')\n ], DateRangePicker.prototype, \"depth\", void 0);\n __decorate([\n Property('')\n ], DateRangePicker.prototype, \"cssClass\", void 0);\n __decorate([\n Property('-')\n ], DateRangePicker.prototype, \"separator\", void 0);\n __decorate([\n Property(null)\n ], DateRangePicker.prototype, \"minDays\", void 0);\n __decorate([\n Property(null)\n ], DateRangePicker.prototype, \"maxDays\", void 0);\n __decorate([\n Property(false)\n ], DateRangePicker.prototype, \"strictMode\", void 0);\n __decorate([\n Property(null)\n ], DateRangePicker.prototype, \"format\", void 0);\n __decorate([\n Property(true)\n ], DateRangePicker.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], DateRangePicker.prototype, \"readonly\", void 0);\n __decorate([\n Property(true)\n ], DateRangePicker.prototype, \"allowEdit\", void 0);\n __decorate([\n Property('Never')\n ], DateRangePicker.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(null)\n ], DateRangePicker.prototype, \"placeholder\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], DateRangePicker.prototype, \"blur\", void 0);\n DateRangePicker = __decorate([\n NotifyPropertyChanges\n ], DateRangePicker);\n return DateRangePicker;\n}(CalendarBase));\nexport { DateRangePicker };\n","/**\n * Defines types of Cell\n * @hidden\n */\nexport var CellType;\n(function (CellType) {\n /** Defines CellType as Data */\n CellType[CellType[\"Data\"] = 0] = \"Data\";\n /** Defines CellType as Header */\n CellType[CellType[\"Header\"] = 1] = \"Header\";\n /** Defines CellType as Summary */\n CellType[CellType[\"Summary\"] = 2] = \"Summary\";\n /** Defines CellType as GroupSummary */\n CellType[CellType[\"GroupSummary\"] = 3] = \"GroupSummary\";\n /** Defines CellType as CaptionSummary */\n CellType[CellType[\"CaptionSummary\"] = 4] = \"CaptionSummary\";\n /** Defines CellType as Filter */\n CellType[CellType[\"Filter\"] = 5] = \"Filter\";\n /** Defines CellType as Indent */\n CellType[CellType[\"Indent\"] = 6] = \"Indent\";\n /** Defines CellType as GroupCaption */\n CellType[CellType[\"GroupCaption\"] = 7] = \"GroupCaption\";\n /** Defines CellType as GroupCaptionEmpty */\n CellType[CellType[\"GroupCaptionEmpty\"] = 8] = \"GroupCaptionEmpty\";\n /** Defines CellType as Expand */\n CellType[CellType[\"Expand\"] = 9] = \"Expand\";\n /** Defines CellType as HeaderIndent */\n CellType[CellType[\"HeaderIndent\"] = 10] = \"HeaderIndent\";\n /** Defines CellType as StackedHeader */\n CellType[CellType[\"StackedHeader\"] = 11] = \"StackedHeader\";\n /** Defines CellType as DetailHeader */\n CellType[CellType[\"DetailHeader\"] = 12] = \"DetailHeader\";\n /** Defines CellType as DetailExpand */\n CellType[CellType[\"DetailExpand\"] = 13] = \"DetailExpand\";\n /** Defines CellType as CommandColumn */\n CellType[CellType[\"CommandColumn\"] = 14] = \"CommandColumn\";\n /** Defines CellType as DetailFooterIntent */\n CellType[CellType[\"DetailFooterIntent\"] = 15] = \"DetailFooterIntent\";\n /** Defines CellType as RowDrag */\n CellType[CellType[\"RowDragIcon\"] = 16] = \"RowDragIcon\";\n /** Defines CellType as RowDragHeader */\n CellType[CellType[\"RowDragHIcon\"] = 17] = \"RowDragHIcon\";\n})(CellType || (CellType = {}));\n/**\n * Defines types of Render\n * @hidden\n */\nexport var RenderType;\n(function (RenderType) {\n /** Defines RenderType as Header */\n RenderType[RenderType[\"Header\"] = 0] = \"Header\";\n /** Defines RenderType as Content */\n RenderType[RenderType[\"Content\"] = 1] = \"Content\";\n /** Defines RenderType as Summary */\n RenderType[RenderType[\"Summary\"] = 2] = \"Summary\";\n})(RenderType || (RenderType = {}));\n/**\n * Defines Predefined toolbar items.\n * @hidden\n */\nexport var ToolbarItem;\n(function (ToolbarItem) {\n ToolbarItem[ToolbarItem[\"Add\"] = 0] = \"Add\";\n ToolbarItem[ToolbarItem[\"Edit\"] = 1] = \"Edit\";\n ToolbarItem[ToolbarItem[\"Update\"] = 2] = \"Update\";\n ToolbarItem[ToolbarItem[\"Delete\"] = 3] = \"Delete\";\n ToolbarItem[ToolbarItem[\"Cancel\"] = 4] = \"Cancel\";\n ToolbarItem[ToolbarItem[\"Print\"] = 5] = \"Print\";\n ToolbarItem[ToolbarItem[\"Search\"] = 6] = \"Search\";\n ToolbarItem[ToolbarItem[\"ColumnChooser\"] = 7] = \"ColumnChooser\";\n ToolbarItem[ToolbarItem[\"PdfExport\"] = 8] = \"PdfExport\";\n ToolbarItem[ToolbarItem[\"ExcelExport\"] = 9] = \"ExcelExport\";\n ToolbarItem[ToolbarItem[\"CsvExport\"] = 10] = \"CsvExport\";\n ToolbarItem[ToolbarItem[\"WordExport\"] = 11] = \"WordExport\";\n})(ToolbarItem || (ToolbarItem = {}));\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n///
\nimport { EventHandler, Internationalization, Property, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';\nimport { Animation, Event, cldrData, getDefaultDateObject, detach } from '@syncfusion/ej2-base';\nimport { createElement, remove, addClass, L10n, removeClass, closest, append, attributes } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, isNullOrUndefined, formatUnit, getValue, rippleEffect } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { DatePicker } from '../datepicker/datepicker';\nimport { TimePickerBase } from '../timepicker/timepicker';\nimport { cssClass as ListBaseClasses } from '@syncfusion/ej2-lists';\n//class constant defination\nvar DATEWRAPPER = 'e-date-wrapper';\nvar DATEPICKERROOT = 'e-datepicker';\nvar DATETIMEWRAPPER = 'e-datetime-wrapper';\nvar DAY = new Date().getDate();\nvar MONTH = new Date().getMonth();\nvar YEAR = new Date().getFullYear();\nvar HOUR = new Date().getHours();\nvar MINUTE = new Date().getMinutes();\nvar SECOND = new Date().getSeconds();\nvar MILLISECOND = new Date().getMilliseconds();\nvar ROOT = 'e-datetimepicker';\nvar DATETIMEPOPUPWRAPPER = 'e-datetimepopup-wrapper';\nvar INPUTWRAPPER = 'e-input-group-icon';\nvar POPUP = 'e-popup';\nvar TIMEICON = 'e-time-icon';\nvar INPUTFOCUS = 'e-input-focus';\nvar POPUPDIMENSION = '250px';\nvar ICONANIMATION = 'e-icon-anim';\nvar DISABLED = 'e-disabled';\nvar ERROR = 'e-error';\nvar CONTENT = 'e-content';\nvar RTL = 'e-rtl';\nvar NAVIGATION = 'e-navigation';\nvar ACTIVE = 'e-active';\nvar HOVER = 'e-hover';\nvar ICONS = 'e-icons';\nvar HALFPOSITION = 2;\nvar LISTCLASS = ListBaseClasses.li;\nvar ANIMATIONDURATION = 100;\nvar OVERFLOW = 'e-time-overflow';\n/**\n * Represents the DateTimePicker component that allows user to select\n * or enter a date time value.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar DateTimePicker = /** @class */ (function (_super) {\n __extends(DateTimePicker, _super);\n /**\n * Constructor for creating the widget\n */\n function DateTimePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.valueWithMinutes = null;\n _this.previousDateTime = null;\n return _this;\n }\n DateTimePicker.prototype.focusHandler = function () {\n addClass([this.inputWrapper.container], INPUTFOCUS);\n };\n /**\n * Sets the focus to widget for interaction.\n * @returns void\n */\n DateTimePicker.prototype.focusIn = function () {\n _super.prototype.focusIn.call(this);\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n * @returns void\n */\n DateTimePicker.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement) {\n this.inputElement.blur();\n removeClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n };\n DateTimePicker.prototype.blurHandler = function (e) {\n // 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 * @returns void\n */\n DateTimePicker.prototype.destroy = function () {\n if (this.popupObject && this.popupObject.element.classList.contains(POPUP)) {\n this.dateTimeWrapper = undefined;\n this.liCollections = this.timeCollections = [];\n if (!isNullOrUndefined(this.rippleFn)) {\n this.rippleFn();\n }\n }\n var ariaAttribute = {\n 'aria-live': 'assertive', 'aria-atomic': 'true', 'aria-invalid': 'false',\n 'aria-haspopup': 'true', 'aria-activedescendant': 'null',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off'\n };\n if (this.inputElement) {\n Input.removeAttributes(ariaAttribute, this.inputElement);\n this.inputElement.removeAttribute('aria-placeholder');\n }\n if (this.isCalendar()) {\n if (this.popupWrapper) {\n detach(this.popupWrapper);\n }\n this.popupObject = this.popupWrapper = null;\n this.keyboardHandler.destroy();\n }\n this.unBindInputEvents();\n _super.prototype.destroy.call(this);\n };\n /**\n * To Initialize the control rendering.\n * @return void\n * @private\n */\n DateTimePicker.prototype.render = function () {\n this.timekeyConfigure = {\n enter: 'enter',\n escape: 'escape',\n end: 'end',\n tab: 'tab',\n home: 'home',\n down: 'downarrow',\n up: 'uparrow',\n left: 'leftarrow',\n right: 'rightarrow',\n open: 'alt+downarrow',\n close: 'alt+uparrow'\n };\n this.valueWithMinutes = null;\n this.previousDateTime = null;\n this.isPreventBlur = false;\n this.cloneElement = this.element.cloneNode(true);\n this.dateTimeFormat = this.cldrDateTimeFormat();\n this.initValue = this.value;\n this.checkAttributes();\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 this.bindInputEvents();\n this.setValue();\n this.previousDateTime = this.value && new Date(+this.value);\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.keyboardHandler = new KeyboardEvents(this.inputElement, {\n eventName: 'keydown',\n keyAction: this.inputKeyAction.bind(this),\n keyConfigs: this.keyConfigs\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.format)) {\n cldrTime = dateFormat + ' ' + this.getCldrFormat('time');\n }\n else {\n cldrTime = this.format;\n }\n return cldrTime;\n };\n DateTimePicker.prototype.getCldrFormat = function (type) {\n var cldrDateTime;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDateTime = (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDateTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n return cldrDateTime;\n };\n DateTimePicker.prototype.isNullOrEmpty = function (value) {\n if (isNullOrUndefined(value) || (typeof value === 'string' && value.trim() === '')) {\n return true;\n }\n else {\n return false;\n }\n };\n DateTimePicker.prototype.getCultureTimeObject = function (ld, c) {\n if (this.calendarMode === 'Gregorian') {\n return getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.short', ld);\n }\n else {\n return getValue('main.' + '' + this.locale + '.dates.calendars.islamic.timeFormats.short', ld);\n }\n };\n DateTimePicker.prototype.timeHandler = function (e) {\n if (Browser.isDevice) {\n this.element.setAttribute('readonly', '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 };\n DateTimePicker.prototype.dateHandler = function (e) {\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 this.preventArgs = {\n cancel: false,\n popup: this.popupObject,\n event: e || null\n };\n this.trigger('open', this.preventArgs);\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', this.documentClickHandler, this);\n }\n };\n DateTimePicker.prototype.documentClickHandler = function (event) {\n event.preventDefault();\n var target = event.target;\n if (!(closest(target, '#' + (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 }\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 event.preventDefault();\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.inputEvent = new KeyboardEvents(_this.inputWrapper.container, {\n keyAction: _this.TimeKeyActionHandle.bind(_this), keyConfigs: _this.timekeyConfigure, 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 }\n });\n this.popupObject.element.style.maxHeight = POPUPDIMENSION;\n };\n DateTimePicker.prototype.setDimension = function (width) {\n if (typeof width === 'number') {\n width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n width = width;\n }\n else {\n width = '100%';\n }\n return width;\n };\n DateTimePicker.prototype.setPopupWidth = function () {\n var width = this.setDimension(this.width);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.containerStyle.width * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n return width;\n };\n DateTimePicker.prototype.wireTimeListEvents = function () {\n EventHandler.add(this.listWrapper, 'click', this.onMouseClick, this);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n };\n DateTimePicker.prototype.unWireTimeListEvents = function () {\n if (this.listWrapper) {\n EventHandler.remove(this.listWrapper, 'click', this.onMouseClick);\n EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n }\n };\n DateTimePicker.prototype.onMouseOver = function (event) {\n var currentLi = closest(event.target, '.' + LISTCLASS);\n this.setTimeHover(currentLi, HOVER);\n };\n DateTimePicker.prototype.onMouseLeave = function () {\n this.removeTimeHover(HOVER);\n };\n DateTimePicker.prototype.setTimeHover = function (li, className) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(className)) {\n this.removeTimeHover(className);\n addClass([li], className);\n }\n };\n DateTimePicker.prototype.getPopupHeight = function () {\n var height = parseInt(POPUPDIMENSION, 10);\n var popupHeight = this.dateTimeWrapper.getBoundingClientRect().height;\n return popupHeight > height ? height : popupHeight;\n };\n DateTimePicker.prototype.changeEvent = function (e) {\n if (+this.previousDateTime !== +this.value) {\n _super.prototype.changeEvent.call(this, e);\n this.inputElement.focus();\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,\n isInteracted: !isNullOrUndefined(e),\n element: this.element\n };\n this.addTimeSelection();\n this.trigger('change', this.changedArgs);\n this.previousDateTime = this.value;\n }\n };\n DateTimePicker.prototype.setTimeScrollPosition = function () {\n var popupHeight = this.getPopupHeight();\n var popupElement;\n popupElement = this.selectedElement;\n if (!isNullOrUndefined(popupElement)) {\n var nextEle = popupElement.nextElementSibling;\n var height = nextEle ? nextEle.offsetTop : popupElement.offsetTop;\n var liHeight = popupElement.getBoundingClientRect().height;\n if ((height + popupElement.offsetTop) > popupHeight) {\n this.dateTimeWrapper.scrollTop = nextEle ? (height - (popupHeight / HALFPOSITION + liHeight / HALFPOSITION)) : height;\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n }\n };\n DateTimePicker.prototype.setInputValue = function (type) {\n if (type === 'date') {\n this.inputElement.value = this.previousElementValue = this.getFormattedValue(this.getFullDateTime());\n this.setProperties({ value: this.getFullDateTime() }, true);\n }\n else {\n var tempVal = this.getFormattedValue(new Date(this.timeCollections[this.activeIndex]));\n Input.setValue(tempVal, this.inputElement, this.floatLabelType, this.showClearButton);\n this.previousElementValue = this.inputElement.value;\n this.setProperties({ value: new Date(this.timeCollections[this.activeIndex]) }, true);\n }\n };\n DateTimePicker.prototype.getFullDateTime = function () {\n var value = null;\n if (this.isDateObject(this.valueWithMinutes)) {\n value = this.combineDateTime(this.valueWithMinutes);\n }\n else {\n value = this.previousDate;\n }\n return this.validateMinMaxRange(value);\n };\n DateTimePicker.prototype.combineDateTime = function (value) {\n if (this.isDateObject(value)) {\n var day = this.previousDate.getDate();\n var month = this.previousDate.getMonth();\n var year = this.previousDate.getFullYear();\n var hour = value.getHours();\n var minutes = value.getMinutes();\n var seconds = value.getSeconds();\n return new Date(year, month, day, hour, minutes, seconds);\n }\n else {\n return this.previousDate;\n }\n };\n DateTimePicker.prototype.onMouseClick = function (event) {\n var target = event.target;\n var li = this.selectedElement = closest(target, '.' + LISTCLASS);\n if (li && li.classList.contains(LISTCLASS)) {\n this.timeValue = li.getAttribute('data-value');\n this.hide(event);\n }\n this.setSelection(li, event);\n };\n DateTimePicker.prototype.setSelection = function (li, event) {\n if (this.isValidLI(li) && !li.classList.contains(ACTIVE)) {\n var value = li.getAttribute('data-value');\n this.selectedElement = li;\n var index = Array.prototype.slice.call(this.liCollections).indexOf(li);\n this.activeIndex = index;\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n addClass([this.selectedElement], ACTIVE);\n this.selectedElement.setAttribute('aria-selected', 'true');\n this.updateValue(event);\n }\n };\n DateTimePicker.prototype.setTimeActiveClass = function () {\n var collections = isNullOrUndefined(this.dateTimeWrapper) ? this.listWrapper : this.dateTimeWrapper;\n if (!isNullOrUndefined(collections)) {\n var items = collections.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n for (var i = 0; i < items.length; i++) {\n if (this.timeCollections[i] === +(this.valueWithMinutes)) {\n items[i].setAttribute('aria-selected', 'true');\n this.selectedElement = items[i];\n this.activeIndex = i;\n this.setTimeActiveDescendant();\n break;\n }\n }\n }\n }\n };\n DateTimePicker.prototype.setTimeActiveDescendant = function () {\n if (!isNullOrUndefined(this.selectedElement)) {\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });\n }\n else {\n attributes(this.inputElement, { 'aria-activedescendant': 'null' });\n }\n };\n DateTimePicker.prototype.addTimeSelection = function () {\n this.selectedElement = null;\n this.removeTimeSelection();\n this.setTimeActiveClass();\n if (!isNullOrUndefined(this.selectedElement)) {\n addClass([this.selectedElement], ACTIVE);\n this.selectedElement.setAttribute('aria-selected', 'true');\n }\n };\n DateTimePicker.prototype.removeTimeSelection = function () {\n this.removeTimeHover(HOVER);\n if (!isNullOrUndefined(this.dateTimeWrapper)) {\n var items = this.dateTimeWrapper.querySelectorAll('.' + ACTIVE);\n if (items.length) {\n removeClass(items, ACTIVE);\n items[0].removeAttribute('aria-selected');\n }\n }\n };\n DateTimePicker.prototype.removeTimeHover = function (className) {\n var hoveredItem = this.getTimeHoverItem(className);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, className);\n }\n };\n DateTimePicker.prototype.getTimeHoverItem = function (className) {\n var collections = isNullOrUndefined(this.dateTimeWrapper) ? this.listWrapper : this.dateTimeWrapper;\n var hoveredItem;\n if (!isNullOrUndefined(collections)) {\n hoveredItem = collections.querySelectorAll('.' + className);\n }\n return hoveredItem;\n };\n DateTimePicker.prototype.isValidLI = function (li) {\n return (li && li.classList.contains(LISTCLASS) && !li.classList.contains(DISABLED));\n };\n DateTimePicker.prototype.calculateStartEnd = function (value, range, method) {\n var day = value.getDate();\n var month = value.getMonth();\n var year = value.getFullYear();\n var hours = value.getHours();\n var minutes = value.getMinutes();\n var seconds = value.getSeconds();\n var milliseconds = value.getMilliseconds();\n if (range) {\n if (method === 'starttime') {\n return new Date(year, month, day, 0, 0, 0);\n }\n else {\n return new Date(year, month, day, 23, 59, 59);\n }\n }\n else {\n return new Date(year, month, day, hours, minutes, seconds, milliseconds);\n }\n };\n DateTimePicker.prototype.startTime = function (date) {\n var tempStartValue;\n var start;\n var tempMin = this.min;\n var value;\n value = date === null ? new Date() : date;\n if ((+value.getDate() === +tempMin.getDate() && +value.getMonth() === +tempMin.getMonth() &&\n +value.getFullYear() === +tempMin.getFullYear()) || ((+new Date(value.getFullYear(), value.getMonth(), value.getDate())) <=\n +new Date(tempMin.getFullYear(), tempMin.getMonth(), tempMin.getDate()))) {\n start = false;\n tempStartValue = this.min;\n }\n else if (+value < +this.max && +value > +this.min) {\n start = true;\n tempStartValue = value;\n }\n else if (+value >= +this.max) {\n start = true;\n tempStartValue = this.max;\n }\n return this.calculateStartEnd(tempStartValue, start, 'starttime');\n };\n DateTimePicker.prototype.endTime = function (date) {\n var tempEndValue;\n var end;\n var tempMax = this.max;\n var value;\n value = date === null ? new Date() : date;\n if ((+value.getDate() === +tempMax.getDate() && +value.getMonth() === +tempMax.getMonth() &&\n +value.getFullYear() === +tempMax.getFullYear()) || (+new Date(value.getUTCFullYear(), value.getMonth(), value.getDate()) >=\n +new Date(tempMax.getFullYear(), tempMax.getMonth(), tempMax.getDate()))) {\n end = false;\n tempEndValue = this.max;\n }\n else if (+value < +this.max && +value > +this.min) {\n end = true;\n tempEndValue = value;\n }\n else if (+value <= +this.min) {\n end = true;\n tempEndValue = this.min;\n }\n return this.calculateStartEnd(tempEndValue, end, 'endtime');\n };\n DateTimePicker.prototype.hide = function (e) {\n if (this.popupObj || this.dateTimeWrapper) {\n this.preventArgs = {\n cancel: false,\n popup: this.popupObj || this.popupObject,\n event: e || null\n };\n if (isNullOrUndefined(this.popupObj)) {\n this.trigger('close', this.preventArgs);\n }\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 }\n if (Browser.isDevice) {\n this.element.removeAttribute('readonly');\n }\n };\n DateTimePicker.prototype.closePopup = function (e) {\n if (this.isTimePopupOpen() && this.popupObject) {\n var animModel = {\n name: 'FadeOut',\n duration: ANIMATIONDURATION,\n delay: 0\n };\n this.popupObject.hide(new Animation(animModel));\n this.inputWrapper.container.classList.remove(ICONANIMATION);\n attributes(this.inputElement, { 'aria-expanded': 'false' });\n EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);\n }\n };\n DateTimePicker.prototype.preRender = function () {\n _super.prototype.preRender.call(this);\n };\n ;\n DateTimePicker.prototype.getProperty = function (date, val) {\n if (val === 'min') {\n this.setProperties({ min: this.validateValue(date.min) }, true);\n }\n else {\n this.setProperties({ max: this.validateValue(date.max) }, true);\n }\n };\n DateTimePicker.prototype.checkAttributes = function () {\n var attributes = ['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 var readonly = !isNullOrUndefined(this.inputElement.getAttribute(prop));\n this.setProperties({ readonly: readonly }, true);\n break;\n case 'placeholder':\n this.placeholder = this.inputElement.getAttribute(prop);\n break;\n case 'min':\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ min: value }, true);\n }\n break;\n case 'disabled':\n var enabled = isNullOrUndefined(this.inputElement.getAttribute(prop));\n this.setProperties({ enabled: enabled }, true);\n break;\n case 'max':\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ max: value }, true);\n }\n break;\n }\n }\n }\n };\n DateTimePicker.prototype.requiredModules = function () {\n var modules = [];\n if (this) {\n modules.push({ args: [this], member: 'islamic' });\n }\n return modules;\n };\n DateTimePicker.prototype.getTimeActiveElement = function () {\n if (!isNullOrUndefined(this.dateTimeWrapper)) {\n return this.dateTimeWrapper.querySelectorAll('.' + ACTIVE);\n }\n else {\n return null;\n }\n };\n DateTimePicker.prototype.createDateObj = function (val) {\n return val instanceof Date ? val : null;\n };\n DateTimePicker.prototype.getDateObject = function (text) {\n if (!this.isNullOrEmpty(text)) {\n var dateValue = this.createDateObj(text);\n var value = this.valueWithMinutes;\n var status_1 = !isNullOrUndefined(value);\n if (this.checkDateValue(dateValue)) {\n var date = status_1 ? value.getDate() : DAY;\n var month = status_1 ? value.getMonth() : MONTH;\n var year = status_1 ? value.getFullYear() : YEAR;\n var hour = status_1 ? value.getHours() : HOUR;\n var minute = status_1 ? value.getMinutes() : MINUTE;\n var second = status_1 ? value.getSeconds() : SECOND;\n var millisecond = status_1 ? value.getMilliseconds() : MILLISECOND;\n return new Date(year, month, date, hour, minute, second, millisecond);\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.format) ? this.format : this.cldrDateTimeFormat(), type: 'dateTime', skeleton: 'yMd'\n });\n }\n else {\n dateString = this.globalize.formatDate(time, {\n format: !isNullOrUndefined(this.format) ? this.format : 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 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 var options = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: 'yMd' };\n if (typeof newProp.value === 'string') {\n this.setProperties({ value: this.checkDateValue(new Date('' + newProp.value)) }, true);\n newProp.value = this.checkDateValue(new Date('' + newProp.value));\n }\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 this.previousDateTime = new Date(this.inputElement.value);\n this.updateInput();\n this.changeTrigger(null);\n break;\n case 'min':\n case 'max':\n this.getProperty(newProp, prop);\n this.updateInput();\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n break;\n case 'cssClass':\n Input.setCssClass(newProp.cssClass, [this.inputWrapper.container]);\n if (this.dateTimeWrapper) {\n this.dateTimeWrapper.className += ' ' + newProp.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 'format':\n this.setProperties({ format: newProp.format }, true);\n this.setValue();\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n this.inputElement.setAttribute('aria-placeholder', newProp.placeholder);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.inputElement);\n this.bindEvents();\n break;\n case 'strictMode':\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 default:\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n break;\n }\n this.hide(null);\n }\n };\n /**\n * To get component name.\n * @private\n */\n DateTimePicker.prototype.getModuleName = function () {\n return 'datetimepicker';\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(1000)\n ], DateTimePicker.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"enableRtl\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"enablePersistence\", 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 Event()\n ], DateTimePicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"close\", 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})();\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, cssClass as ListBaseClasses } from '@syncfusion/ej2-lists';\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: ListBaseClasses.li,\n group: ListBaseClasses.group,\n disabled: ListBaseClasses.disabled,\n grouping: 'e-dd-group'\n};\n/**\n * DropDownBase component will generate the list items based on given data and act as base class to drop-down related components\n */\nvar DropDownBase = /** @class */ (function (_super) {\n __extends(DropDownBase, _super);\n /**\n * * Constructor for DropDownBase class\n */\n function DropDownBase(options, element) {\n return _super.call(this, options, element) || this;\n }\n ;\n DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {\n var newProperty = new Object();\n var oldProperty = new Object();\n // tslint:disable-next-line:no-function-constructor-with-string-args\n var propName = new Function('prop', 'return prop');\n newProperty[propName(prop)] = newProp[propName(prop)];\n oldProperty[propName(prop)] = oldProp[propName(prop)];\n var data = new Object();\n data.newProperty = newProperty;\n data.oldProperty = oldProperty;\n return data;\n };\n DropDownBase.prototype.getValueByText = function (text, ignoreCase, ignoreAccent) {\n var value = null;\n if (!isNullOrUndefined(this.listData)) {\n if (ignoreCase) {\n value = this.checkValueCase(text, true, ignoreAccent);\n }\n else {\n value = this.checkValueCase(text, false, ignoreAccent);\n }\n }\n return value;\n };\n ;\n DropDownBase.prototype.checkValueCase = function (text, ignoreCase, ignoreAccent, isTextByValue) {\n var _this = this;\n var value = null;\n if (isTextByValue) {\n value = text;\n }\n var dataSource = this.listData;\n var fields = this.fields;\n var type = this.typeOfData(dataSource).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n for (var _i = 0, dataSource_1 = dataSource; _i < dataSource_1.length; _i++) {\n var item = dataSource_1[_i];\n if (!isNullOrUndefined(item)) {\n if (ignoreAccent) {\n value = this.checkingAccent(String(item), text, ignoreCase);\n }\n else {\n if (ignoreCase) {\n if (this.checkIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n else {\n if (this.checkNonIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase, isTextByValue);\n }\n }\n }\n }\n }\n }\n else {\n if (ignoreCase) {\n dataSource.filter(function (item) {\n if (_this.checkIgnoreCase(getValue(fields.text, item).toString(), text)) {\n value = getValue(fields.value, item);\n }\n });\n }\n else {\n if (isTextByValue) {\n dataSource.filter(function (item) {\n var itemValue = getValue(fields.value, item);\n if (!isNullOrUndefined(itemValue) && itemValue.toString() === value.toString()) {\n value = getValue(fields.text, item);\n }\n });\n }\n else {\n dataSource.filter(function (item) {\n if (_this.checkNonIgnoreCase(getValue(fields.text, item), text)) {\n value = getValue(fields.value, item);\n }\n });\n }\n }\n }\n return value;\n };\n DropDownBase.prototype.checkingAccent = function (item, text, ignoreCase) {\n var dataItem = DataUtil.ignoreDiacritics(String(item));\n var textItem = DataUtil.ignoreDiacritics(text.toString());\n var value = null;\n if (ignoreCase) {\n if (this.checkIgnoreCase(dataItem, textItem)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n else {\n if (this.checkNonIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n return value;\n };\n DropDownBase.prototype.checkIgnoreCase = function (item, text) {\n return String(item).toLowerCase() === text.toString().toLowerCase() ? true : false;\n };\n DropDownBase.prototype.checkNonIgnoreCase = function (item, text) {\n return String(item) === text.toString() ? true : false;\n };\n DropDownBase.prototype.getItemValue = function (dataItem, typedText, ignoreCase, isTextByValue) {\n var value = null;\n var dataSource = this.listData;\n var type = this.typeOfData(dataSource).typeof;\n if (isTextByValue) {\n value = dataItem.toString();\n }\n else {\n if (ignoreCase) {\n value = type === 'string' ? String(dataItem) : this.getFormattedValue(String(dataItem));\n }\n else {\n value = type === 'string' ? typedText : this.getFormattedValue(typedText);\n }\n }\n return value;\n };\n DropDownBase.prototype.l10nUpdate = function (actionFailure) {\n if (this.noRecordsTemplate !== 'No Records Found' || this.actionFailureTemplate !== 'The Request Failed') {\n var template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;\n var compiledString = void 0;\n this.list.innerHTML = '';\n compiledString = compile(template);\n for (var _i = 0, _a = compiledString({}); _i < _a.length; _i++) {\n var item = _a[_i];\n this.list.appendChild(item);\n }\n }\n else {\n var l10nLocale = { noRecordsTemplate: 'No Records Found', actionFailureTemplate: 'The Request Failed' };\n this.l10n = new L10n('dropdowns', l10nLocale, this.locale);\n this.list.innerHTML = actionFailure ?\n this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');\n }\n };\n DropDownBase.prototype.getTextByValue = function (value) {\n var text;\n text = this.checkValueCase(value, false, false, true);\n return text;\n };\n DropDownBase.prototype.getFormattedValue = function (value) {\n if (this.listData && this.listData.length) {\n var item = this.typeOfData(this.listData);\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'number'\n || item.typeof === 'number') {\n return parseInt(value, 10);\n }\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'boolean'\n || item.typeof === 'boolean') {\n return (value === 'true');\n }\n }\n return value;\n };\n /**\n * Sets RTL to dropdownbase wrapper\n */\n DropDownBase.prototype.setEnableRtl = function () {\n if (this.list) {\n this.enableRtlElements.push(this.list);\n }\n this.enableRtl ? addClass(this.enableRtlElements, dropDownBaseClasses.rtl) :\n removeClass(this.enableRtlElements, dropDownBaseClasses.rtl);\n };\n ;\n /**\n * Initialize the Component.\n */\n DropDownBase.prototype.initialize = function () {\n this.bindEvent = true;\n if (this.element.tagName === 'UL') {\n var jsonElement = ListBase.createJsonFromElement(this.element);\n this.setProperties({ fields: { text: 'text', value: 'text' } }, true);\n this.resetList(jsonElement, this.fields);\n }\n else if (this.element.tagName === 'SELECT') {\n var dataSource = this.dataSource instanceof Array ? (this.dataSource.length > 0 ? true : false)\n : !isNullOrUndefined(this.dataSource) ? true : false;\n if (!dataSource) {\n this.renderItemsBySelect();\n }\n }\n else {\n this.setListData(this.dataSource, this.fields, this.query);\n }\n };\n ;\n /**\n * Get the properties to be maintained in persisted state.\n */\n DropDownBase.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n ;\n /**\n * Sets the enabled state to DropDownBase.\n */\n DropDownBase.prototype.setEnabled = function () {\n this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');\n };\n ;\n DropDownBase.prototype.renderItemsBySelect = function () {\n var element = this.element;\n var fields = { value: 'value', text: 'text' };\n var jsonElement = [];\n var group = element.querySelectorAll('select>optgroup');\n var option = element.querySelectorAll('select>option');\n this.getJSONfromOption(jsonElement, option, fields);\n if (group.length) {\n for (var i = 0; i < group.length; i++) {\n var item = group[i];\n var optionGroup = {};\n optionGroup[fields.text] = item.label;\n optionGroup.isHeader = true;\n var child = item.querySelectorAll('option');\n jsonElement.push(optionGroup);\n this.getJSONfromOption(jsonElement, child, fields);\n }\n var items = element.querySelectorAll('select>option');\n }\n this.fields.text = fields.text;\n this.fields.value = fields.value;\n this.resetList(jsonElement, fields);\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] = option.getAttribute(fields.value) ? option.getAttribute(fields.value) : option.innerText;\n items.push(json);\n }\n };\n /**\n * Execute before render the list items\n * @private\n */\n DropDownBase.prototype.preRender = function () {\n // there is no event handler\n this.scrollTimer = -1;\n this.enableRtlElements = [];\n this.isRequested = false;\n this.isDataFetched = false;\n };\n /**\n * Creates the list items of DropDownBase component.\n */\n DropDownBase.prototype.setListData = function (dataSource, fields, query) {\n var _this = this;\n fields = fields ? fields : this.fields;\n var ulElement;\n this.isActive = true;\n var eventArgs = { cancel: false, data: dataSource, query: query };\n this.trigger('actionBegin', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\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.trigger('actionComplete', e);\n if (e.cancel) {\n return;\n }\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 _this.isRequested = false;\n _this.bindChildItems(listItems, ulElement, fields, e);\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.trigger('actionComplete', localDataArgs);\n if (localDataArgs.cancel) {\n return;\n }\n ulElement = this.renderItems(localDataArgs.result, fields);\n this.onActionComplete(ulElement, localDataArgs.result);\n this.bindChildItems(localDataArgs.result, ulElement, fields);\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.raiseDataBound = function (listItems, e) {\n this.hideSpinner();\n this.trigger('dataBound', { items: listItems, e: e });\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));\n }\n return ListBase.createListItemFromJson(this.createElement, spliceData, this.listOption(spliceData, fields), 1, true);\n };\n DropDownBase.prototype.emptyDataRequest = function (fields) {\n var listItems = [];\n this.onActionComplete(this.renderItems(listItems, fields), listItems);\n this.isRequested = false;\n this.hideSpinner();\n };\n DropDownBase.prototype.showSpinner = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.hideSpinner = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.onActionFailure = function (e) {\n this.liCollections = [];\n this.trigger('actionFailure', e);\n this.l10nUpdate(true);\n addClass([this.list], dropDownBaseClasses.noData);\n };\n DropDownBase.prototype.onActionComplete = function (ulElement, list, e) {\n this.listData = list;\n 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 DropDownBase.prototype.postRender = function (listElement, list, bindEvent) {\n var focusItem = listElement.querySelector('.' + dropDownBaseClasses.li);\n var selectedItem = listElement.querySelector('.' + dropDownBaseClasses.selected);\n if (focusItem && !selectedItem) {\n focusItem.classList.add(dropDownBaseClasses.focus);\n }\n if (list.length <= 0) {\n this.l10nUpdate();\n addClass([listElement], dropDownBaseClasses.noData);\n }\n else {\n listElement.classList.remove(dropDownBaseClasses.noData);\n }\n if (this.groupTemplate) {\n this.renderGroupTemplate(listElement);\n }\n };\n /**\n * Get the query to do the data operation before list item generation.\n */\n DropDownBase.prototype.getQuery = function (query) {\n return query ? query : this.query ? this.query : new Query();\n };\n /**\n * To render the template content for group header element.\n */\n DropDownBase.prototype.renderGroupTemplate = function (listEle) {\n if (this.fields.groupBy !== null && this.dataSource || this.element.querySelector('.' + dropDownBaseClasses.group)) {\n var dataSource = this.dataSource;\n var headerItems = listEle.querySelectorAll('.' + dropDownBaseClasses.group);\n var tempHeaders = ListBase.renderGroupTemplate(this.groupTemplate, dataSource, this.fields.properties, headerItems);\n }\n };\n /**\n * To create the ul li list items\n */\n DropDownBase.prototype.createListItems = function (dataSource, fields) {\n if (dataSource && fields.groupBy || this.element.querySelector('optgroup')) {\n if (fields.groupBy) {\n if (this.sortOrder !== 'None') {\n dataSource = this.getSortedDataSource(dataSource);\n }\n dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);\n }\n addClass([this.list], dropDownBaseClasses.grouping);\n }\n else {\n dataSource = this.getSortedDataSource(dataSource);\n }\n var options = this.listOption(dataSource, fields);\n var spliceData = (dataSource.length > 100) ?\n new DataManager(dataSource).executeLocal(new Query().take(100))\n : dataSource;\n this.sortedData = dataSource;\n return ListBase.createList(this.createElement, (this.getModuleName() === 'autocomplete') ? spliceData : dataSource, options, true);\n };\n ;\n DropDownBase.prototype.listOption = function (dataSource, fields) {\n var iconCss = isNullOrUndefined(fields.iconCss) ? false : true;\n var fieldValues = !isNullOrUndefined(fields.properties) ?\n fields.properties : fields;\n var options = (fields.text !== null || fields.value !== null) ? {\n fields: fieldValues,\n showIcon: iconCss, ariaAttributes: { groupItemRole: 'presentation' }\n } : { fields: { value: 'text' } };\n return extend({}, options, fields, true);\n };\n ;\n DropDownBase.prototype.setFloatingHeader = function (e) {\n if (isNullOrUndefined(this.fixedHeaderElement)) {\n this.fixedHeaderElement = this.createElement('div', { className: dropDownBaseClasses.fixedHead });\n if (!this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {\n this.fixedHeaderElement.style.display = 'none';\n }\n prepend([this.fixedHeaderElement], this.list);\n this.setFixedHeader();\n }\n if (!isNullOrUndefined(this.fixedHeaderElement) && this.fixedHeaderElement.style.zIndex === '0') {\n this.setFixedHeader();\n }\n this.scrollStop(e);\n };\n DropDownBase.prototype.scrollStop = function (e) {\n var target = e.target;\n var liHeight = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);\n var topIndex = Math.round(target.scrollTop / liHeight);\n var liCollections = this.ulElement.querySelectorAll('li');\n for (var i = topIndex; i > -1; i--) {\n if (!isNullOrUndefined(liCollections[i]) && liCollections[i].classList.contains(dropDownBaseClasses.group)) {\n var currentLi = liCollections[i];\n this.fixedHeaderElement.innerHTML = currentLi.innerHTML;\n this.fixedHeaderElement.style.top = e.target.scrollTop + 'px';\n this.fixedHeaderElement.style.display = 'block';\n break;\n }\n else {\n this.fixedHeaderElement.style.display = 'none';\n this.fixedHeaderElement.style.top = 'none';\n }\n }\n };\n /**\n * To render the list items\n */\n DropDownBase.prototype.renderItems = function (listData, fields) {\n var ulElement;\n if (this.itemTemplate && listData) {\n var dataSource = listData;\n if (dataSource && fields.groupBy) {\n if (this.sortOrder !== 'None') {\n dataSource = this.getSortedDataSource(dataSource);\n }\n dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);\n }\n else {\n dataSource = this.getSortedDataSource(dataSource);\n }\n this.sortedData = dataSource;\n var spliceData = (dataSource.length > 100) ?\n new DataManager(dataSource).executeLocal(new Query().take(100))\n : dataSource;\n ulElement = this.templateListItem((this.getModuleName() === 'autocomplete') ? spliceData : dataSource, fields);\n }\n else {\n ulElement = this.createListItems(listData, fields);\n }\n return ulElement;\n };\n ;\n DropDownBase.prototype.templateListItem = function (dataSource, fields) {\n var option = this.listOption(dataSource, fields);\n return ListBase.renderContentTemplate(this.createElement, this.itemTemplate, dataSource, fields.properties, option);\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 return item = { typeof: typeof items[i], item: items[i] };\n }\n }\n return item;\n };\n DropDownBase.prototype.setFixedHeader = function () {\n this.list.parentElement.style.display = 'block';\n var liWidth = this.liCollections[0].offsetWidth;\n this.fixedHeaderElement.style.width = liWidth.toString() + 'px';\n setStyleAttribute(this.fixedHeaderElement, { zIndex: 10 });\n var firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group);\n this.fixedHeaderElement.innerHTML = firstLi.innerHTML;\n };\n DropDownBase.prototype.getSortedDataSource = function (dataSource) {\n if (dataSource && this.sortOrder !== 'None') {\n var textField = this.fields.text ? this.fields.text : 'text';\n dataSource = ListBase.getDataSource(dataSource, ListBase.addSorting(this.sortOrder, textField));\n }\n return dataSource;\n };\n /**\n * Return the index of item which matched with given value in data source\n */\n DropDownBase.prototype.getIndexByValue = function (value) {\n var index;\n var listItems = this.getItems();\n for (var i = 0; i < listItems.length; i++) {\n if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {\n index = i;\n break;\n }\n }\n return index;\n };\n ;\n /**\n * To dispatch the event manually\n */\n DropDownBase.prototype.dispatchEvent = function (element, type) {\n var evt = document.createEvent('HTMLEvents');\n evt.initEvent(type, false, true);\n element.dispatchEvent(evt);\n };\n /**\n * To set the current fields\n */\n DropDownBase.prototype.setFields = function () {\n if (this.fields.value && !this.fields.text) {\n this.fields.text = this.fields.value;\n }\n else if (!this.fields.value && this.fields.text) {\n this.fields.value = this.fields.text;\n }\n else if (!this.fields.value && !this.fields.text) {\n this.fields.value = this.fields.text = 'text';\n }\n };\n /**\n * reset the items list.\n */\n DropDownBase.prototype.resetList = function (dataSource, fields, query) {\n if (this.list) {\n this.setListData(dataSource, fields, query);\n }\n };\n DropDownBase.prototype.updateSelection = function () {\n // This is for after added the item, need to update the selected index values.\n };\n DropDownBase.prototype.renderList = function () {\n // This is for render the list items.\n this.render();\n };\n DropDownBase.prototype.updateDataSource = function (props) {\n this.resetList(this.dataSource);\n };\n DropDownBase.prototype.setUpdateInitial = function (props, newProp) {\n this.isDataFetched = false;\n var updateData = {};\n for (var j = 0; props.length > j; j++) {\n if (newProp[props[j]] && props[j] === 'fields') {\n this.setFields();\n }\n else if (newProp[props[j]]) {\n updateData[props[j]] = newProp[props[j]];\n }\n }\n if (Object.keys(updateData).length > 0) {\n if (Object.keys(updateData).indexOf('dataSource') === -1) {\n updateData.dataSource = this.dataSource;\n }\n this.updateDataSource(updateData);\n }\n };\n /**\n * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.\n * @private\n */\n DropDownBase.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (this.getModuleName() === 'dropdownbase') {\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n }\n this.setUpdateInitial(['sortOrder', 'itemTemplate'], newProp);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'query':\n case 'sortOrder':\n case 'dataSource':\n case 'itemTemplate':\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'enabled':\n this.setEnabled();\n break;\n case 'groupTemplate':\n this.renderGroupTemplate(this.list);\n if (this.ulElement && this.fixedHeaderElement) {\n var firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group);\n this.fixedHeaderElement.innerHTML = firstLi.innerHTML;\n }\n break;\n case 'locale':\n if (this.list && (!isNullOrUndefined(this.liCollections) && this.liCollections.length === 0)) {\n this.l10nUpdate();\n }\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n this.setZIndex();\n break;\n }\n }\n };\n ;\n /**\n * Build and render the component\n * @private\n */\n DropDownBase.prototype.render = function (isEmptyData) {\n this.list = this.createElement('div', { className: dropDownBaseClasses.content, attrs: { 'tabindex': '0' } });\n this.list.classList.add(dropDownBaseClasses.root);\n this.setFields();\n var rippleModel = { duration: 300, selector: '.' + dropDownBaseClasses.li };\n this.rippleFun = rippleEffect(this.list, rippleModel);\n var group = this.element.querySelector('select>optgroup');\n if (this.fields.groupBy || !isNullOrUndefined(group)) {\n EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);\n }\n if (this.getModuleName() === 'dropdownbase') {\n if (this.element.getAttribute('tabindex')) {\n this.list.setAttribute('tabindex', this.element.getAttribute('tabindex'));\n }\n removeClass([this.element], dropDownBaseClasses.root);\n this.element.style.display = 'none';\n var wrapperElement = this.createElement('div');\n this.element.parentElement.insertBefore(wrapperElement, this.element);\n wrapperElement.appendChild(this.element);\n wrapperElement.appendChild(this.list);\n }\n this.setEnableRtl();\n this.setEnabled();\n if (!isEmptyData) {\n this.initialize();\n }\n };\n ;\n /**\n * Return the module name of this component.\n * @private\n */\n DropDownBase.prototype.getModuleName = function () {\n return 'dropdownbase';\n };\n ;\n /**\n * Gets all the list items bound on this component.\n * @returns Element[].\n */\n DropDownBase.prototype.getItems = function () {\n return this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li);\n };\n ;\n /**\n * Adds a new item to the popup list. By default, new item appends to the list as the last item,\n * but you can insert based on the index parameter.\n * @param { Object[] } items - Specifies an array of JSON data or a JSON data.\n * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.\n * @return {void}.\n */\n DropDownBase.prototype.addItem = function (items, itemIndex) {\n if (!this.list || this.list.textContent === this.noRecordsTemplate) {\n this.renderList();\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 if (isHeader) {\n li.innerText = getValue(fields.text, item);\n }\n if (this.itemTemplate && !isHeader) {\n var compiledString = compile(this.itemTemplate);\n append(compiledString(item), li);\n }\n else if (!isHeader) {\n li.appendChild(document.createTextNode(getValue(fields.text, item)));\n }\n li.setAttribute('data-value', getValue(fields.value, item));\n li.setAttribute('role', 'option');\n this.notify('addItem', { module: 'CheckBoxSelection', item: li });\n liCollections.push(li);\n this.listData.push(item);\n this.updateActionCompleteData(li, item);\n }\n if (itemsCount === 0 && isNullOrUndefined(this.list.querySelector('ul'))) {\n this.list.innerHTML = '';\n this.list.appendChild(this.ulElement);\n append(liCollections, this.ulElement);\n }\n else {\n for (var i = 0; i < items.length; i++) {\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 var tempLi = [].slice.call(this.liCollections);\n tempLi.splice(index, 0, liCollections[i]);\n this.liCollections = tempLi;\n index += 1;\n }\n }\n if (selectedItemValue || itemIndex === 0) {\n this.updateSelection();\n }\n };\n DropDownBase.prototype.validationAttribute = function (target, hidden) {\n var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');\n hidden.setAttribute('name', name);\n target.removeAttribute('name');\n var attributes = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attributes.length; i++) {\n if (!target.getAttribute(attributes[i])) {\n continue;\n }\n var attr = target.getAttribute(attributes[i]);\n hidden.setAttribute(attributes[i], attr);\n target.removeAttribute(attributes[i]);\n }\n };\n DropDownBase.prototype.setZIndex = function () {\n // this is for component wise\n };\n DropDownBase.prototype.updateActionCompleteData = function (li, item) {\n // this is for ComboBox custom value\n };\n /**\n * Gets the data Object that matches the given value.\n * @param { string | number } value - Specifies the value of the list item.\n * @returns Object.\n */\n DropDownBase.prototype.getDataByValue = function (value) {\n if (!isNullOrUndefined(this.listData)) {\n var type = this.typeOfData(this.listData).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n for (var _i = 0, _a = this.listData; _i < _a.length; _i++) {\n var item = _a[_i];\n if (!isNullOrUndefined(item) && item === value) {\n return item;\n }\n }\n }\n else {\n for (var _b = 0, _c = this.listData; _b < _c.length; _b++) {\n var item = _c[_b];\n if (!isNullOrUndefined(item) && getValue((this.fields.value ? this.fields.value : 'value'), item) === value) {\n return item;\n }\n }\n }\n }\n return null;\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. It also removes the attributes and classes.\n * @method destroy\n * @return {void}.\n */\n DropDownBase.prototype.destroy = function () {\n if (document.body.contains(this.list)) {\n EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);\n if (!isNullOrUndefined(this.rippleFun)) {\n this.rippleFun();\n }\n detach(this.list);\n }\n _super.prototype.destroy.call(this);\n };\n ;\n __decorate([\n Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)\n ], DropDownBase.prototype, \"fields\", void 0);\n __decorate([\n Property(false)\n ], DropDownBase.prototype, \"enableRtl\", 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('The 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(1000)\n ], DropDownBase.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], DropDownBase.prototype, \"ignoreAccent\", 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///
\nimport { EventHandler, Property, Event, compile, KeyboardEvents, append, extend } 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, setStyleAttribute, 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 } from '../common/incremental-search';\nimport { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';\n/* tslint:disable */\nimport { DataManager, Query } from '@syncfusion/ej2-data';\n// don't use space in classnames \nexport var dropDownListClasses = {\n root: 'e-dropdownlist',\n hover: dropDownBaseClasses.hover,\n selected: dropDownBaseClasses.selected,\n rtl: dropDownBaseClasses.rtl,\n li: dropDownBaseClasses.li,\n disable: dropDownBaseClasses.disabled,\n base: dropDownBaseClasses.root,\n focus: dropDownBaseClasses.focus,\n input: 'e-input-group',\n inputFocus: 'e-input-focus',\n icon: 'e-input-group-icon e-ddl-icon',\n iconAnimation: 'e-icon-anim',\n value: 'e-input-value',\n device: 'e-ddl-device',\n backIcon: 'e-input-group-icon e-back-icon e-icons',\n filterBarClearIcon: 'e-input-group-icon e-clear-icon e-icons',\n filterInput: 'e-input-filter',\n filterParent: 'e-filter-parent',\n mobileFilter: 'e-ddl-device-filter',\n footer: 'e-ddl-footer',\n header: 'e-ddl-header',\n clearIcon: 'e-clear-icon',\n clearIconHide: 'e-clear-icon-hide',\n popupFullScreen: 'e-popup-full-page',\n disableIcon: 'e-ddl-disable-icon',\n hiddenElement: 'e-ddl-hidden'\n};\nvar inputObject = {\n container: null,\n buttons: []\n};\n/**\n * The DropDownList component contains a list of predefined values from which you can\n * choose a single value.\n * ```html\n *
\n * ```\n * ```typescript\n * let dropDownListObj:DropDownList = new DropDownList();\n * dropDownListObj.appendTo(\"#list\");\n * ```\n */\nvar DropDownList = /** @class */ (function (_super) {\n __extends(DropDownList, _super);\n /**\n * * Constructor for creating the DropDownList component.\n */\n function DropDownList(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.previousValue = null;\n return _this;\n }\n ;\n /**\n * Initialize the event handler.\n * @private\n */\n DropDownList.prototype.preRender = function () {\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.prevSelectPoints = {};\n this.isSelectCustom = false;\n this.isDropDownClick = false;\n this.preventAltUp = false;\n this.isCustomFilter = false;\n this.isSecondClick = false;\n this.keyConfigure = {\n tab: 'tab',\n enter: '13',\n escape: '27',\n end: '35',\n home: '36',\n down: '40',\n up: '38',\n pageUp: '33',\n pageDown: '34',\n open: 'alt+40',\n close: 'shift+tab',\n hide: 'alt+38',\n space: '32'\n };\n };\n DropDownList.prototype.setZIndex = function () {\n if (this.popupObj) {\n this.popupObj.setProperties({ 'zIndex': this.zIndex });\n }\n };\n DropDownList.prototype.renderList = function (isEmptyData) {\n _super.prototype.render.call(this, isEmptyData);\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.clear(e);\n this.onChangeEvent(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') {\n var li = this.ulElement.querySelector('.' + dropDownListClasses.li);\n if (li) {\n li.classList.add(dropDownListClasses.focus);\n }\n }\n };\n DropDownList.prototype.clear = function (e, properties) {\n if (isNullOrUndefined(properties) || (!isNullOrUndefined(properties) &&\n (isNullOrUndefined(properties.dataSource) ||\n (!(properties.dataSource instanceof DataManager) && properties.dataSource.length === 0)))) {\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 };\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 this.inputWrapper.container.classList.add(this.htmlAttributes[htmlAttr]);\n }\n else if (htmlAttr === 'disabled' && this.htmlAttributes[htmlAttr] === 'disabled') {\n this.enabled = false;\n this.setEnable();\n }\n else if (htmlAttr === 'readonly' && this.htmlAttributes[htmlAttr] === 'readonly') {\n this.readonly = true;\n this.dataBind();\n }\n else if (htmlAttr === 'style') {\n this.inputWrapper.container.setAttribute('style', this.htmlAttributes[htmlAttr]);\n }\n else {\n var defaultAttr = ['title', 'id', 'placeholder'];\n var validateAttr = ['name', 'required'];\n if (htmlAttr.indexOf('data') === 0 || validateAttr.indexOf(htmlAttr) > -1) {\n this.hiddenElement.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else if (defaultAttr.indexOf(htmlAttr) > -1) {\n htmlAttr === 'placeholder' ? Input.setPlaceholder(this.htmlAttributes[htmlAttr], this.inputElement) :\n this.element.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n else {\n this.inputWrapper.container.setAttribute(htmlAttr, this.htmlAttributes[htmlAttr]);\n }\n }\n }\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-labelledby': this.hiddenElement.id\n };\n };\n DropDownList.prototype.setEnableRtl = function () {\n Input.setEnableRtl(this.enableRtl, [this.inputElement.parentElement]);\n if (this.popupObj) {\n this.popupObj.enableRtl = this.enableRtl;\n this.popupObj.dataBind();\n }\n };\n DropDownList.prototype.setEnable = function () {\n Input.setEnabled(this.enabled, this.inputElement);\n if (this.enabled) {\n removeClass([this.inputWrapper.container], dropDownListClasses.disable);\n this.inputElement.setAttribute('aria-disabled', 'false');\n this.targetElement().setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.hidePopup();\n addClass([this.inputWrapper.container], dropDownListClasses.disable);\n this.inputElement.setAttribute('aria-disabled', 'true');\n this.targetElement().tabIndex = -1;\n }\n };\n /**\n * Get the properties to be maintained in the persisted state.\n */\n DropDownList.prototype.getPersistData = function () {\n return this.addOnPersist(['value']);\n };\n ;\n DropDownList.prototype.preventTabIndex = function (element) {\n if (this.getModuleName() === 'dropdownlist') {\n element.tabIndex = -1;\n }\n };\n DropDownList.prototype.targetElement = function () {\n return this.inputWrapper.container;\n };\n DropDownList.prototype.getNgDirective = function () {\n return 'EJS-DROPDOWNLIST';\n };\n DropDownList.prototype.getElementByText = function (text) {\n return this.getElementByValue(this.getValueByText(text));\n };\n DropDownList.prototype.getElementByValue = function (value) {\n var item;\n var listItems = this.getItems();\n for (var _i = 0, listItems_1 = listItems; _i < listItems_1.length; _i++) {\n var liItem = listItems_1[_i];\n if (this.getFormattedValue(liItem.getAttribute('data-value')) === value) {\n item = liItem;\n break;\n }\n }\n return item;\n };\n ;\n DropDownList.prototype.initValue = function () {\n this.renderList();\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n else {\n this.updateValues();\n }\n };\n DropDownList.prototype.updateValues = function () {\n if (!isNullOrUndefined(this.value)) {\n this.setSelection(this.getElementByValue(this.value), null);\n }\n else if (this.text && isNullOrUndefined(this.value)) {\n var element = this.getElementByText(this.text);\n if (isNullOrUndefined(element)) {\n this.setProperties({ text: null });\n return;\n }\n else {\n this.setSelection(element, null);\n }\n }\n else {\n this.setSelection(this.liCollections[this.activeIndex], null);\n }\n this.setHiddenValue();\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n DropDownList.prototype.onBlur = function (e) {\n if (!this.enabled) {\n return;\n }\n var target = e.relatedTarget;\n var currentTarget = e.target;\n var isPreventBlur = this.isPreventBlur;\n this.isPreventBlur = false;\n //IE 11 - issue\n if (isPreventBlur && !this.isDocumentClick && this.isPopupOpen && (!isNullOrUndefined(currentTarget) ||\n !this.isFilterLayout() && isNullOrUndefined(target))) {\n if (this.getModuleName() === 'dropdownlist' && this.allowFiltering && this.isPopupOpen) {\n this.filterInput.focus();\n }\n else {\n this.targetElement().focus();\n }\n return;\n }\n if (this.isDocumentClick || (!isNullOrUndefined(this.popupObj)\n && document.body.contains(this.popupObj.element) &&\n this.popupObj.element.classList.contains(dropDownListClasses.mobileFilter))) {\n if (!this.beforePopupOpen) {\n this.isDocumentClick = false;\n }\n return;\n }\n if (((this.getModuleName() === 'dropdownlist' && !this.isFilterFocus && target !== this.inputElement)\n && (document.activeElement !== target || (document.activeElement === target &&\n currentTarget.classList.contains(dropDownListClasses.inputFocus)))) ||\n (isNullOrUndefined(target) && this.getModuleName() === 'dropdownlist' && this.allowFiltering &&\n currentTarget !== this.inputWrapper.container) || this.getModuleName() !== 'dropdownlist' &&\n !this.inputWrapper.container.contains(target) || this.isTabKey) {\n this.isDocumentClick = this.isPopupOpen ? true : false;\n this.focusOutAction();\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 () {\n this.isInteracted = false;\n this.focusOut();\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 this.value = null;\n }\n };\n DropDownList.prototype.wireEvent = function () {\n EventHandler.add(this.inputWrapper.container, 'mousedown', this.dropDownClick, this);\n EventHandler.add(this.inputWrapper.container, 'focus', this.focusIn, this);\n EventHandler.add(this.inputWrapper.container, 'keypress', this.onSearch, this);\n this.bindCommonEvent();\n };\n DropDownList.prototype.bindCommonEvent = function () {\n EventHandler.add(this.targetElement(), 'blur', this.onBlur, this);\n var formElement = closest(this.inputElement, 'form');\n if (formElement) {\n EventHandler.add(formElement, 'reset', this.resetValueHandler, this);\n }\n if (!Browser.isDevice) {\n this.keyboardModule = new KeyboardEvents(this.targetElement(), {\n keyAction: this.keyActionHandler.bind(this), keyConfigs: this.keyConfigure, eventName: 'keydown'\n });\n }\n 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 EventHandler.remove(this.targetElement(), 'blur', this.onBlur);\n var formElement = 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 !== '') {\n removeClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n else {\n addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n }\n };\n /**\n * Event binding for list\n */\n DropDownList.prototype.wireListEvents = function () {\n EventHandler.add(this.list, 'click', this.onMouseClick, this);\n EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);\n };\n ;\n DropDownList.prototype.onSearch = function (e) {\n if (e.charCode !== 32 && e.charCode !== 13) {\n if (this.list === undefined) {\n this.renderList();\n }\n this.searchKeyEvent = e;\n if (!this.isRequested && !isNullOrUndefined(this.list.querySelector('li'))) {\n this.incrementalSearch(e);\n }\n }\n };\n DropDownList.prototype.onMouseClick = function (e) {\n var target = e.target;\n var classList = target.classList;\n var li = closest(target, '.' + dropDownBaseClasses.li);\n if (!this.isValidLI(li)) {\n return;\n }\n this.setSelection(li, e);\n if (Browser.isDevice && this.isFilterLayout()) {\n history.back();\n }\n else {\n var delay = 100;\n this.closePopup(delay);\n }\n };\n DropDownList.prototype.onMouseOver = function (e) {\n var currentLi = closest(e.target, '.' + dropDownBaseClasses.li);\n this.setHover(currentLi);\n };\n ;\n DropDownList.prototype.setHover = function (li) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {\n this.removeHover();\n addClass([li], dropDownBaseClasses.hover);\n }\n };\n ;\n DropDownList.prototype.onMouseLeave = function (e) {\n this.removeHover();\n };\n ;\n DropDownList.prototype.removeHover = function () {\n 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 ;\n DropDownList.prototype.incrementalSearch = function (e) {\n if (this.liCollections.length > 0) {\n var li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true);\n if (!isNullOrUndefined(li)) {\n this.setSelection(li, e);\n this.setScrollPosition();\n }\n }\n };\n ;\n /**\n * Hides the spinner loader.\n * @returns void.\n */\n DropDownList.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n removeClass([this.spinnerElement], dropDownListClasses.disableIcon);\n this.spinnerElement.innerHTML = '';\n this.spinnerElement = null;\n }\n };\n /**\n * Shows the spinner loader.\n * @returns void.\n */\n DropDownList.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n this.spinnerElement = Browser.isDevice && !isNullOrUndefined(this.filterInputObj) && this.filterInputObj.buttons[1] ||\n !isNullOrUndefined(this.filterInputObj) && this.filterInputObj.buttons[0] || this.inputWrapper.buttons[0];\n addClass([this.spinnerElement], dropDownListClasses.disableIcon);\n createSpinner({\n target: this.spinnerElement,\n width: Browser.isDevice ? '16px' : '14px'\n }, this.createElement);\n showSpinner(this.spinnerElement);\n }\n };\n DropDownList.prototype.keyActionHandler = function (e) {\n 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 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.isPopupOpen || 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 var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);\n if (this.isSelectFocusItem(focusEle)) {\n this.setSelection(focusEle, e);\n }\n else {\n var nextItem = void 0;\n var index = e.action === 'down' ? this.activeIndex + 1 : this.activeIndex - 1;\n var startIndex = 0;\n if (this.getModuleName() === 'autocomplete') {\n startIndex = e.action === 'down' && isNullOrUndefined(this.activeIndex) ? 0 : this.liCollections.length - 1;\n index = index < 0 ? this.liCollections.length - 1 : index === this.liCollections.length ? 0 : index;\n }\n nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex] : this.liCollections[index];\n this.setSelection(nextItem, e);\n }\n e.preventDefault();\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 if (this.getModuleName() === 'dropdownlist') {\n e.preventDefault();\n if (this.activeIndex === 0) {\n return;\n }\n this.setSelection(this.liCollections[0], e);\n }\n break;\n case 'end':\n if (this.getModuleName() === 'dropdownlist') {\n e.preventDefault();\n var lastLi = this.getItems().length - 1;\n if (this.activeIndex === lastLi) {\n return;\n }\n this.setSelection(this.liCollections[lastLi], e);\n }\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();\n this.focusDropDown(e);\n break;\n case 'enter':\n this.selectCurrentItem(e);\n break;\n case 'escape':\n case 'tab':\n case 'close':\n if (this.isPopupOpen) {\n this.hidePopup();\n this.focusDropDown(e);\n }\n break;\n }\n }\n };\n DropDownList.prototype.selectCurrentItem = function (e) {\n if (this.isPopupOpen) {\n var li = this.list.querySelector('.' + dropDownListClasses.focus);\n if (li) {\n this.setSelection(li, e);\n this.isTyped = false;\n }\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n this.hidePopup();\n this.focusDropDown(e);\n }\n else {\n this.showPopup();\n }\n };\n DropDownList.prototype.isSelectFocusItem = function (element) {\n return !isNullOrUndefined(element);\n };\n DropDownList.prototype.getPageCount = function () {\n var liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :\n getComputedStyle(this.getItems()[0], null).getPropertyValue('height');\n return Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));\n };\n DropDownList.prototype.pageUpSelection = function (steps, event) {\n var previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];\n this.setSelection(previousItem, event);\n };\n ;\n DropDownList.prototype.pageDownSelection = function (steps, event) {\n var list = this.getItems();\n var previousItem = steps <= list.length ? this.liCollections[steps - 1] : this.liCollections[list.length - 1];\n this.setSelection(previousItem, event);\n };\n ;\n DropDownList.prototype.unWireEvent = function () {\n EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);\n EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);\n EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);\n this.unBindCommonEvent();\n };\n /**\n * Event un binding for list items.\n */\n DropDownList.prototype.unWireListEvents = function () {\n EventHandler.remove(this.list, 'click', this.onMouseClick);\n EventHandler.remove(this.list, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);\n };\n ;\n DropDownList.prototype.onDocumentClick = function (e) {\n var target = e.target;\n if (!(!isNullOrUndefined(this.popupObj) && closest(target, '#' + 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();\n if (!isActive) {\n this.onFocusOut();\n this.inputWrapper.container.classList.remove(dropDownListClasses.inputFocus);\n }\n }\n }\n else if (target !== this.inputElement && !(this.allowFiltering && target === this.filterInput)\n && !(this.getModuleName() === 'combobox' &&\n !this.allowFiltering && Browser.isDevice && target === this.inputWrapper.buttons[0])) {\n this.isPreventBlur = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.targetElement() ||\n document.activeElement === this.filterInput);\n e.preventDefault();\n }\n };\n DropDownList.prototype.activeStateChange = function () {\n if (this.isDocumentClick) {\n this.hidePopup();\n this.onFocusOut();\n this.inputWrapper.container.classList.remove(dropDownListClasses.inputFocus);\n }\n };\n DropDownList.prototype.focusDropDown = function (e) {\n if (!this.initial && this.isFilterLayout()) {\n this.focusIn(e);\n }\n };\n DropDownList.prototype.dropDownClick = function (e) {\n if (e.which === 3 || e.button === 2) {\n return;\n }\n if (this.targetElement().classList.contains(dropDownListClasses.disable) || this.inputWrapper.clearButton === e.target) {\n return;\n }\n var target = e.target;\n if (target !== this.inputElement && !(this.allowFiltering && target === this.filterInput) && this.getModuleName() !== 'combobox') {\n e.preventDefault();\n }\n if (!this.readonly) {\n if (this.isPopupOpen) {\n this.hidePopup();\n if (this.isFilterLayout()) {\n this.focusDropDown(e);\n }\n }\n else {\n this.focusIn(e);\n this.floatLabelChange();\n this.queryString = this.inputElement.value.trim() === '' ? null : this.inputElement.value;\n this.isDropDownClick = true;\n this.showPopup();\n }\n var proxy_1 = this;\n if (!this.isSecondClick) {\n setTimeout(function () { proxy_1.cloneElements(); }, 100);\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 this.isSecondClick = true;\n }\n }\n };\n DropDownList.prototype.updateSelectedItem = function (li, e, preventSelect) {\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) {\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);\n if (eventArgs.cancel) {\n li.classList.remove(dropDownBaseClasses.selected);\n return true;\n }\n }\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 return false;\n };\n DropDownList.prototype.activeItem = function (li) {\n if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.selected)) {\n this.removeSelection();\n li.classList.add(dropDownBaseClasses.selected);\n this.removeHover();\n li.setAttribute('aria-selected', 'true');\n }\n };\n DropDownList.prototype.setValue = function (e) {\n var dataItem = this.getItemData();\n if (dataItem.value === null) {\n 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 (this.inputElement.previousSibling === this.valueTempElement) {\n detach(this.valueTempElement);\n this.inputElement.style.display = 'block';\n }\n if (this.previousValue === dataItem.value) {\n this.isSelected = false;\n return true;\n }\n else {\n this.isSelected = !this.initial ? true : false;\n this.isSelectCustom = false;\n if (this.getModuleName() === 'dropdownlist') {\n this.updateIconState();\n }\n return false;\n }\n };\n DropDownList.prototype.setSelection = function (li, e) {\n if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.selected)) {\n var argsCancel = this.updateSelectedItem(li, e, false);\n if (argsCancel) {\n return;\n }\n }\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()) {\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 };\n DropDownList.prototype.setValueTemplate = function () {\n var compiledString;\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 compiledString = compile(this.valueTemplate);\n for (var _i = 0, _a = compiledString(this.itemData); _i < _a.length; _i++) {\n var item = _a[_i];\n this.valueTempElement.appendChild(item);\n }\n };\n DropDownList.prototype.removeSelection = function () {\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 DropDownList.prototype.onChangeEvent = function (eve) {\n var dataItem = this.getItemData();\n var index = this.isSelectCustom ? null : this.activeIndex;\n this.setProperties({ 'value': dataItem.value, 'index': index, 'text': dataItem.text }, true);\n this.detachChangeEvent(eve);\n };\n ;\n DropDownList.prototype.detachChanges = function (value) {\n var items;\n if (typeof value === 'string' ||\n typeof value === 'boolean' ||\n typeof value === 'number') {\n items = Object.defineProperties({}, {\n value: {\n value: value,\n enumerable: true\n },\n text: {\n value: value,\n enumerable: true\n }\n });\n }\n else {\n items = value;\n }\n return items;\n };\n DropDownList.prototype.detachChangeEvent = function (eve) {\n this.isSelected = false;\n this.previousValue = this.value;\n this.activeIndex = this.index;\n this.typedString = !isNullOrUndefined(this.text) ? this.text : '';\n if (!this.initial) {\n var items = this.detachChanges(this.itemData);\n var preItems = void 0;\n if (typeof this.previousItemData === 'string' ||\n typeof this.previousItemData === 'boolean' ||\n typeof this.previousItemData === 'number') {\n preItems = Object.defineProperties({}, {\n value: {\n value: this.previousItemData,\n enumerable: true\n },\n text: {\n value: this.previousItemData,\n enumerable: true\n }\n });\n }\n else {\n preItems = this.previousItemData;\n }\n this.setHiddenValue();\n var eventArgs = {\n e: eve,\n item: this.item,\n itemData: items,\n previousItem: this.previousSelectedLI,\n previousItemData: preItems,\n isInteracted: eve ? true : false,\n value: this.value,\n element: this.element\n };\n this.trigger('change', eventArgs);\n }\n };\n DropDownList.prototype.setHiddenValue = function () {\n if (!isNullOrUndefined(this.value)) {\n this.hiddenElement.innerHTML = '
';\n var selectedElement = this.hiddenElement.querySelector('option');\n selectedElement.setAttribute('value', this.value.toString());\n }\n else {\n this.hiddenElement.innerHTML = '';\n }\n };\n /**\n * Filter bar implementation\n */\n DropDownList.prototype.onFilterUp = function (e) {\n if (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 === '') {\n this.resetFocusElement();\n this.activeIndex = null;\n if (this.getModuleName() === 'autocomplete') {\n this.hidePopup();\n }\n }\n e.preventDefault();\n break;\n default:\n this.typedString = this.filterInput.value;\n this.preventAutoFill = false;\n this.searchLists(e);\n break;\n }\n }\n else {\n this.isValidKey = false;\n }\n };\n DropDownList.prototype.onFilterDown = function (e) {\n switch (e.keyCode) {\n case 13: //enter\n break;\n case 40: //down arrow\n case 38: //up arrow \n this.queryString = this.filterInput.value;\n e.preventDefault();\n break;\n case 9: //tab \n if (this.isPopupOpen) {\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.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 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);\n if (eventArgs_1.cancel) {\n return;\n }\n if (!this.isCustomFilter && !eventArgs_1.preventDefaultAction) {\n var filterQuery = this.query ? this.query.clone() : new Query();\n var dataType = this.typeOfData(this.dataSource).typeof;\n if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {\n filterQuery.where('', 'startswith', this.filterInput.value, true, this.ignoreAccent);\n }\n else {\n var fields = this.fields;\n filterQuery.where(!isNullOrUndefined(fields.text) ? fields.text : '', 'startswith', this.filterInput.value, true, this.ignoreAccent);\n }\n this.filteringAction(this.dataSource, filterQuery, this.fields);\n }\n }\n };\n DropDownList.prototype.filteringAction = function (dataSource, query, fields) {\n if (!isNullOrUndefined(this.filterInput)) {\n this.beforePopupOpen = true;\n if (this.filterInput.value.trim() === '') {\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 this.resetList(dataSource, fields, query);\n }\n }\n };\n DropDownList.prototype.setSearchBox = function (popupElement) {\n if (this.isFiltering()) {\n var parentElement = 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 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 EventHandler.add(this.filterInput, 'input', this.onInput, this);\n EventHandler.add(this.filterInput, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.filterInput, 'keydown', this.onFilterDown, this);\n EventHandler.add(this.filterInput, 'blur', this.onBlur, this);\n return this.filterInputObj;\n }\n else {\n return inputObject;\n }\n };\n ;\n DropDownList.prototype.onInput = function () {\n this.isValidKey = true;\n };\n DropDownList.prototype.onActionFailure = function (e) {\n _super.prototype.onActionFailure.call(this, e);\n if (this.beforePopupOpen) {\n this.renderPopup();\n }\n };\n DropDownList.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n 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 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 }\n if (this.getModuleName() !== 'autocomplete' && this.isFiltering() && !this.isTyped) {\n if (!this.actionCompleteData.isUpdated || ((!this.isCustomFilter\n && !this.isFilterFocus)\n && ((this.dataSource instanceof DataManager)\n || (!isNullOrUndefined(this.dataSource) && !isNullOrUndefined(this.dataSource.length) &&\n this.dataSource.length !== 0)))) {\n this.actionCompleteData = { ulElement: ulElement.cloneNode(true), list: list, isUpdated: true };\n }\n this.addNewItem(list, selectedItem);\n if (!isNullOrUndefined(this.itemData)) {\n this.focusIndexItem();\n }\n }\n if (this.beforePopupOpen) {\n this.renderPopup();\n }\n }\n };\n DropDownList.prototype.addNewItem = function (listData, newElement) {\n var _this = this;\n if (!isNullOrUndefined(this.itemData) && !isNullOrUndefined(newElement)) {\n var value_1 = this.getItemData().value;\n var isExist = listData.some(function (data) {\n return (((typeof data === 'string' || typeof data === 'number') && data === value_1) ||\n (getValue(_this.fields.value, data) === value_1));\n });\n if (!isExist) {\n this.addItem(this.itemData);\n }\n }\n };\n DropDownList.prototype.updateActionCompleteData = function (li, item) {\n if (this.getModuleName() !== 'autocomplete' && this.actionCompleteData.ulElement) {\n this.actionCompleteData.ulElement.appendChild(li.cloneNode(true));\n if (this.isFiltering()) {\n this.actionCompleteData.list.push(item);\n }\n }\n };\n DropDownList.prototype.focusIndexItem = function () {\n var value = this.getItemData().value;\n this.activeIndex = this.getIndexByValue(value);\n var element = this.list.querySelector('[data-value=\"' + value + '\"]');\n this.selectedLI = element;\n this.activeItem(element);\n this.removeFocus();\n };\n DropDownList.prototype.updateSelection = function () {\n var selectedItem = this.list.querySelector('.' + dropDownBaseClasses.selected);\n if (selectedItem) {\n this.setProperties({ 'index': this.getIndexByValue(selectedItem.getAttribute('data-value')) });\n this.activeIndex = this.index;\n }\n else {\n this.removeFocus();\n this.list.querySelector('.' + dropDownBaseClasses.li).classList.add(dropDownListClasses.focus);\n }\n };\n DropDownList.prototype.removeFocus = function () {\n var highlightedItem = this.list.querySelectorAll('.' + dropDownListClasses.focus);\n if (highlightedItem && highlightedItem.length) {\n removeClass(highlightedItem, dropDownListClasses.focus);\n }\n };\n ;\n DropDownList.prototype.renderPopup = function () {\n 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);\n if (args.cancel) {\n return;\n }\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 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 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;\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 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 eventArgs = { popup: this.popupObj, cancel: false, animation: animModel };\n this.trigger('open', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\n addClass([this.inputWrapper.container], [dropDownListClasses.iconAnimation]);\n this.popupObj.show(new Animation(eventArgs.animation), (this.zIndex === 1000) ? this.element : null);\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 }\n };\n DropDownList.prototype.getOffsetValue = function (popupEle) {\n var popupStyles = getComputedStyle(popupEle);\n var borderTop = parseInt(popupStyles.borderTop, 10);\n var borderBottom = parseInt(popupStyles.borderBottom, 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 _this.isDocumentClick = false;\n _this.destroyPopup();\n },\n open: function () {\n EventHandler.add(document, 'mousedown', _this.onDocumentClick, _this);\n _this.isPopupOpen = true;\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 });\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 if (this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement)) {\n this.fixedHeaderElement.style.zIndex = '0';\n this.fixedHeaderElement.style.display = 'none';\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 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 DropDownList.prototype.scrollTop = function () {\n var nextOffset = this.selectedLI.offsetTop - this.list.scrollTop;\n var nextBottom = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;\n nextOffset = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n nextOffset - this.fixedHeaderElement.offsetHeight : nextOffset;\n var boxRange = (this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop);\n if (this.activeIndex === 0) {\n this.list.scrollTop = 0;\n }\n else if (nextOffset < 0) {\n this.list.scrollTop = this.list.scrollTop + nextOffset;\n }\n else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {\n this.list.scrollTop = this.selectedLI.offsetTop - (this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?\n this.fixedHeaderElement.offsetHeight : 0);\n }\n };\n 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 = '';\n this.searchLists(null);\n };\n DropDownList.prototype.listScroll = function () {\n this.filterInput.blur();\n };\n DropDownList.prototype.closePopup = function (delay) {\n this.isTyped = false;\n if (!(this.popupObj && document.body.contains(this.popupObj.element) && this.beforePopupOpen)) {\n return;\n }\n EventHandler.remove(document, 'mousedown', this.onDocumentClick);\n this.isActive = false;\n this.filterInputObj = null;\n this.isDropDownClick = false;\n this.preventAutoFill = false;\n var scrollableParentElements = this.popupObj.getScrollableParent(this.inputWrapper.container);\n for (var _i = 0, scrollableParentElements_1 = scrollableParentElements; _i < scrollableParentElements_1.length; _i++) {\n var element = scrollableParentElements_1[_i];\n EventHandler.remove(element, 'scroll', this.scrollHandler);\n }\n if (Browser.isDevice && this.isFilterLayout()) {\n removeClass([document.body, this.popupObj.element], dropDownListClasses.popupFullScreen);\n EventHandler.remove(this.list, 'scroll', this.listScroll);\n }\n if (this.isFilterLayout()) {\n if (!Browser.isDevice) {\n this.searchKeyModule.destroy();\n if (this.clearIconElement) {\n EventHandler.remove(this.clearIconElement, 'click', this.clearText);\n }\n }\n if (this.backIconElement) {\n EventHandler.remove(this.backIconElement, 'click', this.clickOnBackIcon);\n EventHandler.remove(this.clearIconElement, 'click', this.clearText);\n }\n EventHandler.remove(this.filterInput, 'input', this.onInput);\n EventHandler.remove(this.filterInput, 'keyup', this.onFilterUp);\n EventHandler.remove(this.filterInput, 'keydown', this.onFilterDown);\n EventHandler.remove(this.filterInput, 'blur', this.onBlur);\n 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 eventArgs = { popup: this.popupObj, cancel: false, animation: animModel };\n this.trigger('close', eventArgs);\n if (eventArgs.cancel) {\n return;\n }\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 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 * @private\n */\n DropDownList.prototype.render = function () {\n if (this.element.tagName === 'INPUT') {\n this.inputElement = this.element;\n }\n else {\n this.inputElement = this.createElement('input');\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 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: this.cssClass,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton\n },\n }, this.createElement);\n if (this.element.tagName === this.getNgDirective()) {\n this.element.appendChild(this.inputWrapper.container);\n }\n else {\n this.inputElement.parentElement.insertBefore(this.element, this.inputElement);\n }\n this.hiddenElement = this.createElement('select', {\n attrs: { 'aria-hidden': 'true', 'tabindex': '-1', 'class': dropDownListClasses.hiddenElement }\n });\n prepend([this.hiddenElement], this.inputWrapper.container);\n this.validationAttribute(this.element, this.hiddenElement);\n this.setFields();\n this.inputWrapper.container.style.width = formatUnit(this.width);\n this.inputWrapper.container.classList.add('e-ddl');\n this.wireEvent();\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n var id = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');\n this.element.id = id;\n this.hiddenElement.id = id + '_hidden';\n this.targetElement().setAttribute('tabindex', this.tabIndex);\n attributes(this.targetElement(), this.getAriaAttributes());\n var invalidAttr = ['class', 'style', 'id'];\n var htmlAttr = {};\n for (var a = 0; a < this.element.attributes.length; a++) {\n if (invalidAttr.indexOf(this.element.attributes[a].name) === -1) {\n htmlAttr[this.element.attributes[a].name] = this.element.getAttribute(this.element.attributes[a].name);\n }\n }\n extend(htmlAttr, this.htmlAttributes, htmlAttr);\n this.setProperties({ htmlAttributes: htmlAttr }, true);\n this.setHTMLAttributes();\n if (this.value !== null || this.activeIndex !== null || this.text !== null) {\n this.initValue();\n }\n else if (this.element.tagName === 'SELECT' && this.element.options[0]) {\n var selectElement = this.element;\n this.value = selectElement.options[selectElement.selectedIndex].value;\n this.text = isNullOrUndefined(this.value) ? null : selectElement.options[selectElement.selectedIndex].textContent;\n this.initValue();\n }\n this.preventTabIndex(this.element);\n if (!this.enabled) {\n this.targetElement().tabIndex = -1;\n }\n this.initial = false;\n this.element.style.opacity = '';\n this.inputElement.onselect = function (e) { e.stopImmediatePropagation(); };\n this.inputElement.onchange = function (e) { e.stopImmediatePropagation(); };\n if (this.element.hasAttribute('autofocus')) {\n this.focusIn();\n }\n };\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 compiledString = compile(this.footerTemplate);\n for (var _i = 0, _a = compiledString({}); _i < _a.length; _i++) {\n var item = _a[_i];\n this.footer.appendChild(item);\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 compiledString = compile(this.headerTemplate);\n for (var _i = 0, _a = compiledString({}); _i < _a.length; _i++) {\n var item = _a[_i];\n this.header.appendChild(item);\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 this.popupObj.refreshPosition(this.inputWrapper.container);\n }\n };\n DropDownList.prototype.updateDataSource = function (props) {\n this.clear(null, props);\n if (!(!isNullOrUndefined(props) && (isNullOrUndefined(props.dataSource)\n || (!(props.dataSource instanceof DataManager) && props.dataSource.length === 0)))) {\n this.resetList(this.dataSource);\n }\n if (!this.isCustomFilter && !this.isFilterFocus && document.activeElement !== this.filterInput) {\n this.itemData = this.getDataByValue(this.value);\n var dataItem = this.getItemData();\n this.setProperties({ 'value': dataItem.value, 'text': dataItem.text });\n }\n };\n /**\n * Dynamically change the value of properties.\n * @private\n */\n DropDownList.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (this.getModuleName() === 'dropdownlist') {\n 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 break;\n case 'htmlAttributes':\n this.setHTMLAttributes();\n break;\n case 'width':\n setStyleAttribute(this.inputWrapper.container, { 'width': formatUnit(newProp.width) });\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n break;\n case 'filterBarPlaceholder':\n if (this.filterInput) {\n Input.setPlaceholder(newProp.filterBarPlaceholder, this.filterInput);\n }\n break;\n case 'readonly':\n if (this.getModuleName() !== 'dropdownlist') {\n Input.setReadonly(newProp.readonly, this.inputElement);\n }\n break;\n case 'cssClass':\n this.setCssClass(newProp, oldProp);\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'enabled':\n this.setEnable();\n break;\n case 'text':\n if (newProp.text === null) {\n this.clear();\n break;\n }\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n if (!this.initRemoteRender) {\n var li = this.getElementByText(newProp.text);\n if (!this.checkValidLi(li)) {\n if (this.liCollections.length === 100 &&\n this.getModuleName() === 'autocomplete' && this.listData.length > 100) {\n this.setSelectionData(newProp.text, oldProp.text, 'text');\n }\n else {\n this.setOldText(oldProp.text);\n }\n }\n }\n break;\n case 'value':\n if (newProp.value === null) {\n this.clear();\n break;\n }\n this.notify('beforeValueChange', { newProp: newProp }); // gird component value type change\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n if (!this.initRemoteRender) {\n var item = this.getElementByValue(newProp.value);\n if (!this.checkValidLi(item)) {\n if (this.liCollections.length === 100 &&\n this.getModuleName() === 'autocomplete' && this.listData.length > 100) {\n this.setSelectionData(newProp.value, oldProp.value, 'value');\n }\n else {\n this.setOldValue(oldProp.value);\n }\n }\n }\n break;\n case 'index':\n if (newProp.index === null) {\n this.clear();\n break;\n }\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n if (!this.initRemoteRender) {\n var element = this.liCollections[newProp.index];\n if (!this.checkValidLi(element)) {\n if (this.liCollections.length === 100 &&\n this.getModuleName() === 'autocomplete' && this.listData.length > 100) {\n this.setSelectionData(newProp.index, oldProp.index, 'index');\n }\n else {\n this.index = oldProp.index;\n }\n }\n }\n break;\n case 'footerTemplate':\n if (this.popupObj) {\n this.setFooterTemplate(this.popupObj.element);\n }\n break;\n case 'headerTemplate':\n if (this.popupObj) {\n this.setHeaderTemplate(this.popupObj.element);\n }\n break;\n case 'valueTemplate':\n if (!isNullOrUndefined(this.itemData) && this.valueTemplate != null) {\n this.setValueTemplate();\n }\n break;\n case 'floatLabelType':\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, newProp.floatLabelType, this.placeholder, this.createElement);\n break;\n case 'showClearButton':\n Input.setClearButton(newProp.showClearButton, this.inputElement, this.inputWrapper, null, this.createElement);\n this.bindClearEvent();\n break;\n default:\n var ddlProps = void 0;\n ddlProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, ddlProps.newProperty, ddlProps.oldProperty);\n break;\n }\n }\n };\n DropDownList.prototype.checkValidLi = function (element) {\n if (this.isValidLI(element)) {\n this.setSelection(element, null);\n return true;\n }\n return false;\n };\n DropDownList.prototype.setSelectionData = function (newProp, oldProp, prop) {\n var _this = this;\n var li;\n this.updateListValues = function () {\n if (prop === 'text') {\n li = _this.getElementByText(newProp);\n if (!_this.checkValidLi(li)) {\n _this.setOldText(oldProp);\n }\n }\n else if (prop === 'value') {\n li = _this.getElementByValue(newProp);\n if (!_this.checkValidLi(li)) {\n _this.setOldValue(oldProp);\n }\n }\n else if (prop === 'index') {\n li = _this.liCollections[newProp];\n if (!_this.checkValidLi(li)) {\n _this.index = oldProp;\n }\n }\n };\n };\n DropDownList.prototype.setCssClass = function (newProp, oldProp) {\n this.inputWrapper.container.classList.remove(oldProp.cssClass);\n Input.setCssClass(newProp.cssClass, [this.inputWrapper.container]);\n if (this.popupObj) {\n this.popupObj.element.classList.remove(oldProp.cssClass);\n this.popupObj.element.classList.add(newProp.cssClass);\n }\n };\n /**\n * Return the module name.\n * @private\n */\n DropDownList.prototype.getModuleName = function () {\n return 'dropdownlist';\n };\n /**\n * Opens the popup that displays the list of items.\n * @returns void.\n */\n DropDownList.prototype.showPopup = function () {\n if (!this.enabled) {\n return;\n }\n if (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.renderList();\n }\n if (Browser.isDevice && this.isFilterLayout()) {\n var proxy_2 = this;\n window.onpopstate = function () {\n proxy_2.hidePopup();\n };\n history.pushState({}, '');\n }\n if (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData)) {\n this.renderPopup();\n }\n attributes(this.targetElement(), { 'aria-activedescendant': this.selectedLI ? this.selectedLI.id : null });\n };\n /**\n * Hides the popup if it is in an open state.\n * @returns void.\n */\n DropDownList.prototype.hidePopup = function () {\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 this.selectedLI = this.liCollections[this.index];\n this.updateSelectedItem(this.selectedLI, null, true);\n if (this.valueTemplate && this.itemData !== null) {\n this.setValueTemplate();\n }\n }\n else {\n this.resetSelection();\n }\n }\n this.closePopup();\n var dataItem = this.getItemData();\n if (this.inputElement.value.trim() === '' && !this.isInteracted && (this.isSelectCustom ||\n !isNullOrUndefined(this.selectedLI) && this.inputElement.value !== dataItem.text)) {\n this.isSelectCustom = false;\n this.clear();\n }\n };\n /**\n * Sets the focus on the component for interaction.\n * @returns void.\n */\n DropDownList.prototype.focusIn = function (e) {\n if (!this.enabled) {\n return;\n }\n if (this.targetElement().classList.contains(dropDownListClasses.disable)) {\n return;\n }\n var isFocused = false;\n if (this.preventFocus && Browser.isDevice) {\n this.inputWrapper.container.tabIndex = 1;\n this.inputWrapper.container.focus();\n this.preventFocus = false;\n isFocused = true;\n }\n if (!isFocused) {\n this.targetElement().focus();\n }\n addClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n this.onFocus(e);\n };\n /**\n * Moves the focus from the component if the component is already focused.\n * @returns void.\n */\n DropDownList.prototype.focusOut = function () {\n if (!this.enabled) {\n return;\n }\n this.isTyped = true;\n this.hidePopup();\n this.targetElement().blur();\n removeClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.\n * @method destroy\n * @return {void}.\n */\n DropDownList.prototype.destroy = function () {\n var _this = this;\n this.isActive = false;\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 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'];\n attrArray.forEach(function (value) {\n _this.inputElement.removeAttribute(value);\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 this.element.style.display = 'block';\n if (this.inputWrapper.container.parentElement.tagName === this.getNgDirective()) {\n detach(this.inputWrapper.container);\n }\n else {\n this.inputWrapper.container.parentElement.insertBefore(this.element, this.inputWrapper.container);\n detach(this.inputWrapper.container);\n }\n _super.prototype.destroy.call(this);\n };\n ;\n /**\n * Gets all the list items bound on this component.\n * @returns Element[].\n */\n DropDownList.prototype.getItems = function () {\n if (!this.list) {\n if (this.dataSource instanceof DataManager) {\n this.initRemoteRender = true;\n }\n this.renderList();\n }\n return this.ulElement ? _super.prototype.getItems.call(this) : [];\n };\n __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","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Internationalization, setCulture } from '@syncfusion/ej2-base';\n/**\n * ValueFormatter class to globalize the value.\n * @hidden\n */\nvar ValueFormatter = /** @class */ (function () {\n function ValueFormatter(cultureName) {\n this.intl = new Internationalization();\n if (!isNullOrUndefined(cultureName)) {\n this.intl.culture = cultureName;\n }\n }\n ValueFormatter.prototype.getFormatFunction = function (format) {\n if (format.type) {\n return this.intl.getDateFormat(format);\n }\n else {\n return this.intl.getNumberFormat(format);\n }\n };\n ValueFormatter.prototype.getParserFunction = function (format) {\n if (format.type) {\n return this.intl.getDateParser(format);\n }\n else {\n return this.intl.getNumberParser(format);\n }\n };\n ValueFormatter.prototype.fromView = function (value, format, type) {\n if ((type === 'date' || type === 'datetime' || type === 'number') && (!isNullOrUndefined(format))) {\n return format(value);\n }\n else {\n return value;\n }\n };\n ValueFormatter.prototype.toView = function (value, format) {\n var result = value;\n if (!isNullOrUndefined(format) && !isNullOrUndefined(value)) {\n result = format(value);\n }\n return result;\n };\n ValueFormatter.prototype.setCulture = function (cultureName) {\n if (!isNullOrUndefined(cultureName)) {\n setCulture(cultureName);\n }\n };\n return ValueFormatter;\n}());\nexport { ValueFormatter };\n","import { merge, isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { Query, DataUtil } from '@syncfusion/ej2-data';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { getUid, templateCompiler, getForeignData, getObject } from '../base/util';\n/**\n * Represents Grid `Column` model class.\n */\nvar Column = /** @class */ (function () {\n function Column(options) {\n var _this = this;\n /**\n * If `allowSorting` set to false, then it disables sorting option of a particular column.\n * By default all columns are sortable.\n * @default true\n */\n this.allowSorting = true;\n /**\n * If `allowResizing` is set to false, it disables resize option of a particular column.\n * By default all the columns can be resized.\n * @default true\n */\n this.allowResizing = true;\n /**\n * If `allowFiltering` set to false, then it disables filtering option and filter bar element of a particular column.\n * By default all columns are filterable.\n * @default true\n */\n this.allowFiltering = true;\n /**\n * If `allowGrouping` set to false, then it disables grouping of a particular column.\n * By default all columns are groupable.\n * @default true\n */\n this.allowGrouping = true;\n /**\n * If `allowReordering` set to false, then it disables reorder of a particular column.\n * By default all columns can be reorder.\n * @default true\n */\n this.allowReordering = true;\n /**\n * If `showColumnMenu` set to false, then it disable the column menu of a particular column.\n * By default column menu will show for all columns\n * @default true\n */\n this.showColumnMenu = true;\n /**\n * If `enableGroupByFormat` set to true, then it groups the particular column by formatted values.\n * @default true\n */\n this.enableGroupByFormat = false;\n /**\n * If `allowEditing` set to false, then it disables editing of a particular column.\n * By default all columns are editable.\n * @default true\n */\n this.allowEditing = true;\n /**\n * It is used to customize the default filter options for a specific columns.\n * * type - Specifies the filter type as menu or checkbox.\n * * ui - to render custom component for specific column it has following functions.\n * * ui.create – It is used for creating custom components.\n * * ui.read - It is used for read the value from the component.\n * * ui.write - It is used to apply component model as dynamically.\n * {% codeBlock src=\"grid/filter-menu-api/index.ts\" %}{% endcodeBlock %}\n *\n * > Check the [`Filter UI`](./filtering.html#custom-component-in-filter-menu) for its customization.\n * @default null\n */\n this.filter = {};\n /**\n * If `showInColumnChooser` set to false, then hide the particular column in column chooser.\n * By default all columns are displayed in column Chooser.\n * @default true\n */\n this.showInColumnChooser = true;\n /**\n * Defines the `IEditCell` object to customize default edit cell.\n * @default {}\n */\n this.edit = {};\n this.sortDirection = 'Descending';\n /** @hidden */\n this.getEditTemplate = function () { return _this.editTemplateFn; };\n /** @hidden */\n this.getFilterTemplate = function () { return _this.filterTemplateFn; };\n merge(this, options);\n this.uid = getUid('grid-column');\n var valueFormatter = new ValueFormatter();\n if (options.format && (options.format.skeleton || options.format.format)) {\n this.setFormatter(valueFormatter.getFormatFunction(options.format));\n this.setParser(valueFormatter.getParserFunction(options.format));\n }\n this.toJSON = function () { return {}; };\n if (!this.field) {\n this.allowFiltering = false;\n this.allowGrouping = false;\n this.allowSorting = false;\n if (this.columns) {\n this.allowResizing = this.columns.some(function (col) {\n return col.allowResizing;\n });\n }\n }\n if (this.commands && !this.textAlign) {\n this.textAlign = 'Right';\n }\n if (this.template || this.commandsTemplate) {\n this.templateFn = templateCompiler(this.template || this.commandsTemplate);\n }\n if (this.headerTemplate) {\n this.headerTemplateFn = templateCompiler(this.headerTemplate);\n }\n if (this.filter.itemTemplate) {\n this.fltrTemplateFn = templateCompiler(this.filter.itemTemplate);\n }\n if (this.editTemplate) {\n this.editTemplateFn = templateCompiler(this.editTemplate);\n }\n if (this.filterTemplate) {\n this.filterTemplateFn = templateCompiler(this.filterTemplate);\n }\n if (this.isForeignColumn() && (isNullOrUndefined(this.editType) || this.editType === 'dropdownedit')) {\n this.editType = 'dropdownedit';\n this.edit.params = extend({\n dataSource: this.dataSource,\n query: new Query(), fields: { value: this.foreignKeyField || this.field, text: this.foreignKeyValue }\n }, this.edit.params);\n }\n if (this.sortComparer) {\n var a_1 = this.sortComparer;\n this.sortComparer = function comparer(x, y) {\n if (typeof a_1 === 'string') {\n a_1 = getObject(a_1, window);\n }\n if (this.sortDirection === 'Descending') {\n var z = x;\n x = y;\n y = z;\n }\n return a_1(x, y);\n };\n }\n if (!this.sortComparer && this.isForeignColumn()) {\n this.sortComparer = function (x, y) {\n x = getObject(_this.foreignKeyValue, getForeignData(_this, {}, x)[0]);\n y = getObject(_this.foreignKeyValue, getForeignData(_this, {}, y)[0]);\n return _this.sortDirection === 'Descending' ? DataUtil.fnDescending(x, y) : DataUtil.fnAscending(x, y);\n };\n }\n }\n /** @hidden */\n Column.prototype.getSortDirection = function () {\n return this.sortDirection;\n };\n /** @hidden */\n Column.prototype.setSortDirection = function (direction) {\n this.sortDirection = direction;\n };\n /** @hidden */\n Column.prototype.setProperties = function (column) {\n //Angular two way binding\n var keys = Object.keys(column);\n for (var i = 0; i < keys.length; i++) {\n this[keys[i]] = column[keys[i]];\n }\n };\n /**\n * @hidden\n * It defines the column is foreign key column or not.\n */\n Column.prototype.isForeignColumn = function () {\n return !!(this.dataSource && this.foreignKeyValue);\n };\n /** @hidden */\n Column.prototype.getFormatter = function () {\n return this.formatFn;\n };\n /** @hidden */\n Column.prototype.setFormatter = function (value) {\n this.formatFn = value;\n };\n /** @hidden */\n Column.prototype.getParser = function () {\n return this.parserFn;\n };\n /** @hidden */\n Column.prototype.setParser = function (value) {\n this.parserFn = value;\n };\n /** @hidden */\n Column.prototype.getColumnTemplate = function () {\n return this.templateFn;\n };\n /** @hidden */\n Column.prototype.getHeaderTemplate = function () {\n return this.headerTemplateFn;\n };\n /** @hidden */\n Column.prototype.getFilterItemTemplate = function () {\n return this.fltrTemplateFn;\n };\n /** @hidden */\n Column.prototype.getDomSetter = function () {\n return this.disableHtmlEncode ? 'textContent' : 'innerHTML';\n };\n return Column;\n}());\nexport { Column };\n","/** @hidden */\nexport var created = 'create';\n/** @hidden */\nexport var destroyed = 'destroy';\n/** @hidden */\nexport var load = 'load';\n/** @hidden */\nexport var rowDataBound = 'rowDataBound';\n/** @hidden */\nexport var queryCellInfo = 'queryCellInfo';\n/** @hidden */\nexport var headerCellInfo = 'headerCellInfo';\n/** @hidden */\nexport var actionBegin = 'actionBegin';\n/** @hidden */\nexport var actionComplete = 'actionComplete';\n/** @hidden */\nexport var actionFailure = 'actionFailure';\n/** @hidden */\nexport var dataBound = 'dataBound';\n/** @hidden */\nexport var rowSelecting = 'rowSelecting';\n/** @hidden */\nexport var rowSelected = 'rowSelected';\n/** @hidden */\nexport var rowDeselecting = 'rowDeselecting';\n/** @hidden */\nexport var rowDeselected = 'rowDeselected';\n/** @hidden */\nexport var cellSelecting = 'cellSelecting';\n/** @hidden */\nexport var cellSelected = 'cellSelected';\n/** @hidden */\nexport var cellDeselecting = 'cellDeselecting';\n/** @hidden */\nexport var cellDeselected = 'cellDeselected';\n/** @hidden */\nexport var columnDragStart = 'columnDragStart';\n/** @hidden */\nexport var columnDrag = 'columnDrag';\n/** @hidden */\nexport var columnDrop = 'columnDrop';\n/** @hidden */\nexport var rowDragStartHelper = 'rowDragStartHelper';\n/** @hidden */\nexport var rowDragStart = 'rowDragStart';\n/** @hidden */\nexport var rowDrag = 'rowDrag';\n/** @hidden */\nexport var rowDrop = 'rowDrop';\n/** @hidden */\nexport var beforePrint = 'beforePrint';\n/** @hidden */\nexport var printComplete = 'printComplete';\n/** @hidden */\nexport var detailDataBound = 'detailDataBound';\n/** @hidden */\nexport var toolbarClick = 'toolbarClick';\n/** @hidden */\nexport var batchAdd = 'batchAdd';\n/** @hidden */\nexport var batchCancel = 'batchCancel';\n/** @hidden */\nexport var batchDelete = 'batchDelete';\n/** @hidden */\nexport var beforeBatchAdd = 'beforeBatchAdd';\n/** @hidden */\nexport var beforeBatchDelete = 'beforeBatchDelete';\n/** @hidden */\nexport var beforeBatchSave = 'beforeBatchSave';\n/** @hidden */\nexport var beginEdit = 'beginEdit';\n/** @hidden */\nexport var cellEdit = 'cellEdit';\n/** @hidden */\nexport var cellSave = 'cellSave';\n/** @hidden */\nexport var cellSaved = 'cellSaved';\n/** @hidden */\nexport var endAdd = 'endAdd';\n/** @hidden */\nexport var endDelete = 'endDelete';\n/** @hidden */\nexport var endEdit = 'endEdit';\n/** @hidden */\nexport var recordDoubleClick = 'recordDoubleClick';\n/** @hidden */\nexport var recordClick = 'recordClick';\n/** @hidden */\nexport var beforeDataBound = 'beforeDataBound';\n/** @hidden */\nexport var beforeOpenColumnChooser = 'beforeOpenColumnChooser';\n/** @hidden */\nexport var resizeStart = 'resizeStart';\n/** @hidden */\nexport var onResize = 'resizing';\n/** @hidden */\nexport var resizeStop = 'resizeStop';\n/** @hidden */\nexport var checkBoxChange = 'checkBoxChange';\n/** @hidden */\nexport var beforeCopy = 'beforeCopy';\n/** @hidden */\nexport var filterChoiceRequest = 'filterchoicerequest';\n/** @hidden */\nexport var filterAfterOpen = 'filterafteropen';\n/** @hidden */\nexport var filterBeforeOpen = 'filterbeforeopen';\n/** @hidden */\nexport var filterSearchBegin = 'filtersearchbegin';\n/**\n * Specifies grid internal events\n */\n/** @hidden */\nexport var initialLoad = 'initial-load';\n/** @hidden */\nexport var initialEnd = 'initial-end';\n/** @hidden */\nexport var dataReady = 'data-ready';\n/** @hidden */\nexport var contentReady = 'content-ready';\n/** @hidden */\nexport var uiUpdate = 'ui-update';\n/** @hidden */\nexport var onEmpty = 'on-empty';\n/** @hidden */\nexport var inBoundModelChanged = 'inbound-model-changed';\n/** @hidden */\nexport var modelChanged = 'model-changed';\n/** @hidden */\nexport var colGroupRefresh = 'colgroup-refresh';\n/** @hidden */\nexport var headerRefreshed = 'header-refreshed';\n/** @hidden */\nexport var pageBegin = 'paging-begin';\n/** @hidden */\nexport var pageComplete = 'paging-complete';\n/** @hidden */\nexport var sortBegin = 'sorting-begin';\n/** @hidden */\nexport var sortComplete = 'sorting-complete';\n/** @hidden */\nexport var filterBegin = 'filtering-begin';\n/** @hidden */\nexport var filterComplete = 'filtering-complete';\n/** @hidden */\nexport var searchBegin = 'searching-begin';\n/** @hidden */\nexport var searchComplete = 'searching-complete';\n/** @hidden */\nexport var reorderBegin = 'reorder-begin';\n/** @hidden */\nexport var reorderComplete = 'reorder-complete';\n/** @hidden */\nexport var rowDragAndDropBegin = 'rowdraganddrop-begin';\n/** @hidden */\nexport var rowDragAndDropComplete = 'rowdraganddrop-complete';\n/** @hidden */\nexport var groupBegin = 'grouping-begin';\n/** @hidden */\nexport var groupComplete = 'grouping-complete';\n/** @hidden */\nexport var ungroupBegin = 'ungrouping-begin';\n/** @hidden */\nexport var ungroupComplete = 'ungrouping-complete';\n/** @hidden */\nexport var groupAggregates = 'group-aggregates';\n/** @hidden */\nexport var refreshFooterRenderer = 'refresh-footer-rendered';\n/** @hidden */\nexport var refreshAggregateCell = 'refresh-aggregate-cell';\n/** @hidden */\nexport var refreshAggregates = 'refresh-aggregates';\n/** @hidden */\nexport var rowSelectionBegin = 'rowselecting';\n/** @hidden */\nexport var rowSelectionComplete = 'rowselected';\n/** @hidden */\nexport var columnSelectionBegin = 'columnselecting';\n/** @hidden */\nexport var columnSelectionComplete = 'columnselected';\n/** @hidden */\nexport var cellSelectionBegin = 'cellselecting';\n/** @hidden */\nexport var cellSelectionComplete = 'cellselected';\n/** @hidden */\nexport var beforeCellFocused = 'beforecellfocused';\n/** @hidden */\nexport var cellFocused = 'cellfocused';\n/** @hidden */\nexport var keyPressed = 'key-pressed';\n/** @hidden */\nexport var click = 'click';\n/** @hidden */\nexport var destroy = 'destroy';\n/** @hidden */\nexport var columnVisibilityChanged = 'column-visible-changed';\n/** @hidden */\nexport var scroll = 'scroll';\n/** @hidden */\nexport var columnWidthChanged = 'column-width-changed';\n/** @hidden */\nexport var columnPositionChanged = 'column-position-changed';\n/** @hidden */\nexport var rowDragAndDrop = 'row-drag-and-drop';\n/** @hidden */\nexport var rowsAdded = 'rows-added';\n/** @hidden */\nexport var rowsRemoved = 'rows-removed';\n/** @hidden */\nexport var columnDragStop = 'column-drag-stop';\n/** @hidden */\nexport var headerDrop = 'header-drop';\n/** @hidden */\nexport var dataSourceModified = 'datasource-modified';\n/** @hidden */\nexport var refreshComplete = 'refresh-complete';\n/** @hidden */\nexport var refreshVirtualBlock = 'refresh-virtual-block';\n/** @hidden */\nexport var dblclick = 'dblclick';\n/** @hidden */\nexport var toolbarRefresh = 'toolbar-refresh';\n/** @hidden */\nexport var bulkSave = 'bulk-save';\n/** @hidden */\nexport var autoCol = 'auto-col';\n/** @hidden */\nexport var tooltipDestroy = 'tooltip-destroy';\n/** @hidden */\nexport var updateData = 'update-data';\n/** @hidden */\nexport var editBegin = 'edit-begin';\n/** @hidden */\nexport var editComplete = 'edit-complete';\n/** @hidden */\nexport var addBegin = 'add-begin';\n/** @hidden */\nexport var addComplete = 'add-complete';\n/** @hidden */\nexport var saveComplete = 'save-complete';\n/** @hidden */\nexport var deleteBegin = 'delete-begin';\n/** @hidden */\nexport var deleteComplete = 'delete-complete';\n/** @hidden */\nexport var preventBatch = 'prevent-batch';\n/** @hidden */\nexport var dialogDestroy = 'dialog-destroy';\n/** @hidden */\nexport var crudAction = 'crud-Action';\n/** @hidden */\nexport var addDeleteAction = 'add-delete-Action';\n/** @hidden */\nexport var destroyForm = 'destroy-form';\n/** @hidden */\nexport var doubleTap = 'double-tap';\n/** @hidden */\nexport var beforeExcelExport = 'beforeExcelExport';\n/** @hidden */\nexport var excelExportComplete = 'excelExportComplete';\n/** @hidden */\nexport var excelQueryCellInfo = 'excelQueryCellInfo';\n/** @hidden */\nexport var excelHeaderQueryCellInfo = 'excelHeaderQueryCellInfo';\n/** @hidden */\nexport var exportDetailDataBound = 'exportdetaildatabound';\n/** @hidden */\nexport var beforePdfExport = 'beforePdfExport';\n/** @hidden */\nexport var pdfExportComplete = 'pdfExportComplete';\n/** @hidden */\nexport var pdfQueryCellInfo = 'pdfQueryCellInfo';\n/** @hidden */\nexport var pdfHeaderQueryCellInfo = 'pdfHeaderQueryCellInfo';\n/** @hidden */\nexport var accessPredicate = 'access-predicate';\n/** @hidden */\nexport var contextMenuClick = 'contextMenuClick';\n/** @hidden */\nexport var freezeRender = 'freezerender';\n/** @hidden */\nexport var freezeRefresh = 'freezerefresh';\n/** @hidden */\nexport var contextMenuOpen = 'contextMenuOpen';\n/** @hidden */\nexport var columnMenuClick = 'columnMenuClick';\n/** @hidden */\nexport var columnMenuOpen = 'columnMenuOpen';\n/** @hidden */\nexport var filterOpen = 'filterOpen';\n/** @hidden */\nexport var filterDialogCreated = 'filterDialogCreated';\n/** @hidden */\nexport var filterMenuClose = 'filter-menu-close';\n/** @hidden */\nexport var initForeignKeyColumn = 'initForeignKeyColumn';\n/** @hidden */\nexport var getForeignKeyData = 'getForeignKeyData';\n/** @hidden */\nexport var generateQuery = 'generateQuery';\n/** @hidden */\nexport var showEmptyGrid = 'showEmptyGrid';\n/** @hidden */\nexport var foreignKeyData = 'foreignKeyData';\n/** @hidden */\nexport var dataStateChange = 'dataStateChange';\n/** @hidden */\nexport var dataSourceChanged = 'dataSourceChanged';\n/** @hidden */\nexport var rtlUpdated = 'rtl-updated';\n/** @hidden */\nexport var beforeFragAppend = 'beforeFragAppend';\n/** @hidden */\nexport var frozenHeight = 'frozenHeight';\n/** @hidden */\nexport var recordAdded = 'recordAdded';\n/** @hidden */\nexport var cancelBegin = 'cancel-Begin';\n/** @hidden */\nexport var editNextValCell = 'editNextValCell';\n/** @hidden */\nexport var hierarchyPrint = 'hierarchyprint';\n/** @hidden */\nexport var expandChildGrid = 'expandchildgrid';\n/** @hidden */\nexport var printGridInit = 'printGrid-Init';\n/** @hidden */\nexport var exportRowDataBound = 'export-RowDataBound';\n/** @hidden */\nexport var rowPositionChanged = 'row-position-changed';\n/** @hidden */\nexport var batchForm = 'batchedit-form';\n","/* tslint:disable-next-line:max-line-length */\nimport { EventHandler, isNullOrUndefined, extend, classList, addClass, removeClass, Browser, getValue, setValue } from '@syncfusion/ej2-base';\nimport { parentsUntil, getUid, isActionPrevent, appendChildren, getDatePredicate } from '../base/util';\nimport { remove, debounce } from '@syncfusion/ej2-base';\nimport { DataUtil, Query, DataManager, Predicate, UrlAdaptor, Deferred } from '@syncfusion/ej2-data';\nimport { createCheckBox } from '@syncfusion/ej2-buttons';\nimport * as events from '../base/constant';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { getForeignData } from '../base/util';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';\nimport { getFilterMenuPostion, toogleCheckbox, createCboxWithWrap, removeAddCboxClasses, getColumnByForeignKeyValue } from '../base/util';\n/**\n * @hidden\n * `CheckBoxFilter` module is used to handle filtering action.\n */\nvar CheckBoxFilter = /** @class */ (function () {\n /**\n * Constructor for checkbox filtering module\n * @hidden\n */\n function CheckBoxFilter(parent, filterSettings, serviceLocator) {\n this.existingPredicate = {};\n this.foreignKeyQuery = new Query();\n this.filterState = true;\n this.values = {};\n this.renderEmpty = false;\n this.parent = parent;\n this.id = this.parent.element.id;\n this.serviceLocator = serviceLocator;\n this.filterSettings = filterSettings;\n this.valueFormatter = new ValueFormatter(this.parent.locale);\n this.cBoxTrue = createCheckBox(this.parent.createElement, false, { checked: true, label: ' ' });\n this.cBoxFalse = createCheckBox(this.parent.createElement, false, { checked: false, label: ' ' });\n this.cBoxTrue.insertBefore(this.parent.createElement('input', {\n className: 'e-chk-hidden', attrs: { type: 'checkbox' }\n }), this.cBoxTrue.firstChild);\n this.cBoxFalse.insertBefore(this.parent.createElement('input', {\n className: 'e-chk-hidden', attrs: { 'type': 'checkbox' }\n }), this.cBoxFalse.firstChild);\n this.cBoxFalse.querySelector('.e-frame').classList.add('e-uncheck');\n if (this.parent.enableRtl) {\n addClass([this.cBoxTrue, this.cBoxFalse], ['e-rtl']);\n }\n }\n /**\n * To destroy the filter bar.\n * @return {void}\n * @hidden\n */\n CheckBoxFilter.prototype.destroy = function () {\n this.closeDialog();\n };\n CheckBoxFilter.prototype.wireEvents = function () {\n EventHandler.add(this.dlg, 'click', this.clickHandler, this);\n this.searchHandler = debounce(this.searchBoxKeyUp, 200);\n EventHandler.add(this.dlg.querySelector('.e-searchinput'), 'keyup', this.searchHandler, this);\n };\n CheckBoxFilter.prototype.unWireEvents = function () {\n EventHandler.remove(this.dlg, 'click', this.clickHandler);\n var elem = this.dlg.querySelector('.e-searchinput');\n if (elem) {\n EventHandler.remove(elem, 'keyup', this.searchHandler);\n }\n };\n CheckBoxFilter.prototype.foreignKeyFilter = function (args, fColl, mPredicate) {\n var _this = this;\n var fPredicate = {};\n var filterCollection = [];\n var query = this.foreignKeyQuery.clone();\n this.options.column.dataSource.\n executeQuery(query.where(mPredicate)).then(function (e) {\n _this.options.column.columnData = e.result;\n _this.parent.notify(events.generateQuery, { predicate: fPredicate, column: _this.options.column });\n args.ejpredicate = fPredicate.predicate.predicates;\n fPredicate.predicate.predicates.forEach(function (fpred) {\n filterCollection.push({\n field: fpred.field,\n predicate: 'or',\n matchCase: fpred.ignoreCase,\n ignoreAccent: fpred.ignoreAccent,\n operator: fpred.operator,\n value: fpred.value,\n type: _this.options.type\n });\n });\n args.filterCollection = filterCollection.length ? filterCollection :\n fColl.filter(function (col) { return col.field = _this.options.field; });\n _this.options.handler(args);\n });\n };\n CheckBoxFilter.prototype.foreignFilter = function (args, value) {\n var operator = this.parent.getDataModule().isRemote() ?\n (this.options.column.type === 'string' ? 'contains' : 'equal') : (this.options.column.type ? 'startswith' : 'contains');\n var initalPredicate = new Predicate(this.options.column.foreignKeyValue, operator, value, true, this.parent.filterSettings.ignoreAccent);\n this.foreignKeyFilter(args, [args.filterCollection], initalPredicate);\n };\n CheckBoxFilter.prototype.searchBoxClick = function (e) {\n var target = e.target;\n if (target.classList.contains('e-searchclear')) {\n this.sInput.value = '';\n this.refreshCheckboxes();\n this.updateSearchIcon();\n this.sInput.focus();\n }\n };\n CheckBoxFilter.prototype.searchBoxKeyUp = function (e) {\n this.refreshCheckboxes();\n this.updateSearchIcon();\n };\n CheckBoxFilter.prototype.updateSearchIcon = function () {\n if (this.sInput.value.length) {\n classList(this.sIcon, ['e-chkcancel-icon'], ['e-search-icon']);\n }\n else {\n classList(this.sIcon, ['e-search-icon'], ['e-chkcancel-icon']);\n }\n };\n /**\n * Gets the localized label by locale keyword.\n * @param {string} key\n * @return {string}\n */\n CheckBoxFilter.prototype.getLocalizedLabel = function (key) {\n return this.localeObj.getConstant(key);\n };\n CheckBoxFilter.prototype.updateDataSource = function () {\n var dataSource = this.options.dataSource;\n var str = 'object';\n if (!(dataSource instanceof DataManager)) {\n for (var i = 0; i < dataSource.length; i++) {\n if (typeof dataSource !== str) {\n var obj = {};\n obj[this.options.field] = dataSource[i];\n dataSource[i] = obj;\n }\n }\n }\n };\n CheckBoxFilter.prototype.updateModel = function (options) {\n this.options = options;\n this.existingPredicate = options.actualPredicate || {};\n this.options.dataSource = options.dataSource;\n this.updateDataSource();\n this.options.type = options.type || 'string';\n this.options.format = options.format || '';\n this.options.filteredColumns = options.filteredColumns || this.parent.filterSettings.columns;\n this.options.sortedColumns = options.sortedColumns || this.parent.sortSettings.columns;\n this.options.query = options.query || new Query();\n this.options.allowCaseSensitive = options.allowCaseSensitive || false;\n this.values = {};\n this.localeObj = options.localeObj;\n this.isFiltered = options.filteredColumns.length;\n };\n CheckBoxFilter.prototype.getAndSetChkElem = function (options) {\n this.dlg = this.parent.createElement('div', {\n id: this.id + this.options.type + '_excelDlg',\n className: 'e-checkboxfilter e-filter-popup'\n });\n this.sBox = this.parent.createElement('div', { className: 'e-searchcontainer' });\n if (!options.hideSearchbox) {\n this.sInput = this.parent.createElement('input', {\n id: this.id + '_SearchBox',\n className: 'e-searchinput'\n });\n this.sIcon = this.parent.createElement('span', {\n className: 'e-searchclear e-search-icon e-icons e-input-group-icon', attrs: {\n type: 'text', title: this.getLocalizedLabel('Search')\n }\n });\n this.searchBox = this.parent.createElement('span', { className: 'e-searchbox e-fields' });\n this.searchBox.appendChild(this.sInput);\n this.sBox.appendChild(this.searchBox);\n var inputargs = {\n element: this.sInput, floatLabelType: 'Never', properties: {\n placeholder: this.getLocalizedLabel('Search')\n }\n };\n Input.createInput(inputargs, this.parent.createElement);\n this.searchBox.querySelector('.e-input-group').appendChild(this.sIcon);\n }\n this.spinner = this.parent.createElement('div', { className: 'e-spinner' }); //for spinner\n this.cBox = this.parent.createElement('div', {\n id: this.id + this.options.type + '_CheckBoxList',\n className: 'e-checkboxlist e-fields'\n });\n this.spinner.appendChild(this.cBox);\n this.sBox.appendChild(this.spinner);\n return this.sBox;\n };\n CheckBoxFilter.prototype.showDialog = function (options) {\n var args = {\n requestType: events.filterBeforeOpen, filterModel: this,\n columnName: this.options.field, columnType: this.options.type, cancel: false\n };\n this.parent.trigger(events.actionBegin, args);\n if (args.cancel) {\n return;\n }\n this.dialogObj = new Dialog({\n visible: false, content: this.sBox,\n close: this.closeDialog.bind(this),\n width: (!isNullOrUndefined(parentsUntil(options.target, 'e-bigger')))\n || this.parent.element.classList.contains('e-device') ? 260 : 255,\n target: this.parent.element, animationSettings: { effect: 'None' },\n buttons: [{\n click: this.btnClick.bind(this),\n buttonModel: {\n content: this.getLocalizedLabel(this.isExcel ? 'OKButton' : 'FilterButton'),\n cssClass: 'e-primary', isPrimary: true\n }\n },\n {\n click: this.btnClick.bind(this),\n buttonModel: { cssClass: 'e-flat', content: this.getLocalizedLabel(this.isExcel ? 'CancelButton' : 'ClearButton') }\n }],\n created: this.dialogCreated.bind(this),\n open: this.dialogOpen.bind(this)\n });\n this.dialogObj.appendTo(this.dlg);\n this.dialogObj.element.style.maxHeight = '800px';\n this.dialogObj.show();\n this.wireEvents();\n createSpinner({ target: this.spinner }, this.parent.createElement);\n showSpinner(this.spinner);\n this.getAllData();\n };\n CheckBoxFilter.prototype.dialogCreated = function (e) {\n if (!Browser.isDevice) {\n getFilterMenuPostion(this.options.target, this.dialogObj, this.parent);\n }\n else {\n this.dialogObj.position = { X: 'center', Y: 'center' };\n }\n this.parent.notify(events.filterDialogCreated, e);\n };\n CheckBoxFilter.prototype.openDialog = function (options) {\n this.updateModel(options);\n this.getAndSetChkElem(options);\n this.showDialog(options);\n };\n CheckBoxFilter.prototype.closeDialog = function () {\n if (this.dialogObj && !this.dialogObj.isDestroyed) {\n var filterTemplateCol = this.parent.getColumns().filter(function (col) { return col.getFilterItemTemplate(); });\n if (filterTemplateCol.length) {\n this.parent.destroyTemplate(['filterItemTemplate']);\n }\n this.parent.notify(events.filterMenuClose, { field: this.options.field });\n this.dialogObj.destroy();\n this.unWireEvents();\n remove(this.dlg);\n this.dlg = null;\n }\n };\n CheckBoxFilter.prototype.clearFilter = function () {\n if (isActionPrevent(this.parent)) {\n this.parent.notify(events.preventBatch, { instance: this, handler: this.clearFilter });\n return;\n }\n this.options.handler({ action: 'clear-filter', field: this.options.field });\n };\n CheckBoxFilter.prototype.btnClick = function (e) {\n if (this.filterState) {\n if (e.target.tagName.toLowerCase() === 'input') {\n var value = e.target.value;\n if (this.options.column.type === 'boolean') {\n if (value !== undefined &&\n this.getLocalizedLabel('FilterTrue').toLowerCase().indexOf(value.toLowerCase()) !== -1) {\n value = 'true';\n }\n else if (value !== undefined &&\n this.getLocalizedLabel('FilterFalse').toLowerCase().indexOf(value.toLowerCase()) !== -1) {\n value = 'false';\n }\n }\n var args = {\n action: 'filtering', filterCollection: {\n field: this.options.field,\n operator: this.parent.getDataModule().isRemote() ?\n (this.options.column.type === 'string' ? 'contains' : 'equal') :\n (this.options.column.type === 'date' || this.options.column.type === 'datetime' ||\n this.options.column.type === 'boolean' ? 'equal' : 'contains'),\n value: value, matchCase: false, type: this.options.column.type\n },\n field: this.options.field\n };\n value ? this.options.column.isForeignColumn() ? this.foreignFilter(args, value) :\n this.options.handler(args) : this.closeDialog();\n }\n else {\n var text = e.target.firstChild.textContent.toLowerCase();\n if (this.getLocalizedLabel(this.isExcel ? 'OKButton' : 'FilterButton').toLowerCase() === text) {\n this.fltrBtnHandler();\n }\n else if (this.getLocalizedLabel('ClearButton').toLowerCase() === text) {\n this.clearFilter();\n }\n }\n this.closeDialog();\n }\n else if (!(e.target.tagName.toLowerCase() === 'input')) {\n this.clearFilter();\n this.closeDialog();\n }\n };\n CheckBoxFilter.prototype.fltrBtnHandler = function () {\n var checked = [].slice.call(this.cBox.querySelectorAll('.e-check:not(.e-selectall)'));\n var optr = 'equal';\n var caseSen = this.options.type === 'string' ?\n this.options.allowCaseSensitive : true;\n var defaults = {\n field: this.options.field, predicate: 'or',\n operator: optr, type: this.options.type, matchCase: caseSen, ignoreAccent: this.parent.filterSettings.ignoreAccent\n };\n var isNotEqual = this.itemsCnt !== checked.length && this.itemsCnt - checked.length < checked.length;\n if (isNotEqual) {\n optr = 'notequal';\n checked = [].slice.call(this.cBox.querySelectorAll('.e-uncheck:not(.e-selectall)'));\n defaults.predicate = 'and';\n defaults.operator = 'notequal';\n }\n var value;\n var fObj;\n var coll = [];\n var searchInput = this.searchBox.querySelector('.e-searchinput');\n if (checked.length !== this.itemsCnt || (searchInput.value && searchInput.value !== '')) {\n for (var i = 0; i < checked.length; i++) {\n value = this.values[parentsUntil(checked[i], 'e-ftrchk').getAttribute('uid')];\n fObj = extend({}, { value: value }, defaults);\n if (value && !value.toString().length) {\n fObj.operator = isNotEqual ? 'notequal' : 'equal';\n }\n if (value === '' || isNullOrUndefined(value)) {\n coll.push({\n field: defaults.field, ignoreAccent: defaults.ignoreAccent, matchCase: defaults.matchCase,\n operator: defaults.operator, predicate: defaults.predicate, value: ''\n });\n coll.push({\n field: defaults.field,\n matchCase: defaults.matchCase, operator: defaults.operator, predicate: defaults.predicate, value: null\n });\n coll.push({\n field: defaults.field, matchCase: defaults.matchCase, operator: defaults.operator,\n predicate: defaults.predicate, value: undefined\n });\n }\n else {\n coll.push(fObj);\n }\n if (isActionPrevent(this.parent)) {\n this.parent.notify(events.preventBatch, {\n instance: this, handler: this.fltrBtnHandler, arg1: fObj.field, arg2: fObj.predicate, arg3: fObj.operator,\n arg4: fObj.matchCase, arg5: fObj.ignoreAccent, arg6: fObj.value\n });\n return;\n }\n }\n this.initiateFilter(coll);\n }\n else {\n this.clearFilter();\n }\n };\n CheckBoxFilter.prototype.initiateFilter = function (fColl) {\n var firstVal = fColl[0];\n var predicate;\n if (!isNullOrUndefined(firstVal)) {\n predicate = firstVal.ejpredicate ? firstVal.ejpredicate :\n new Predicate(firstVal.field, firstVal.operator, firstVal.value, !firstVal.matchCase, firstVal.ignoreAccent);\n for (var j = 1; j < fColl.length; j++) {\n predicate = fColl[j].ejpredicate !== undefined ?\n predicate[fColl[j].predicate](fColl[j].ejpredicate) :\n predicate[fColl[j].predicate](fColl[j].field, fColl[j].operator, fColl[j].value, !fColl[j].matchCase, fColl[j].ignoreAccent);\n }\n var args = {\n action: 'filtering', filterCollection: fColl, field: this.options.field,\n ejpredicate: Predicate.or(predicate)\n };\n this.options.handler(args);\n }\n };\n CheckBoxFilter.prototype.refreshCheckboxes = function () {\n var _this = this;\n var val = this.sInput.value;\n var column = this.options.column;\n var query = column.isForeignColumn() ? this.foreignKeyQuery.clone() : this.options.query.clone();\n var foreignQuery = this.options.query.clone();\n query.queries = [];\n foreignQuery.queries = [];\n var parsed = (this.options.type !== 'string' && parseFloat(val)) ? parseFloat(val) : val;\n var operator = this.parent.getDataModule().isRemote() ?\n (this.options.type === 'string' ? 'contains' : 'equal') : (this.options.type ? 'startswith' : 'contains');\n var matchCase = true;\n var ignoreAccent = this.parent.filterSettings.ignoreAccent;\n var field = column.isForeignColumn() ? column.foreignKeyValue : column.field;\n parsed = (parsed === '' || parsed === undefined) ? undefined : parsed;\n var predicte;\n if (this.options.type === 'boolean') {\n if (parsed !== undefined &&\n this.getLocalizedLabel('FilterTrue').toLowerCase().indexOf(parsed.toLowerCase()) !== -1) {\n parsed = 'true';\n }\n else if (parsed !== undefined &&\n this.getLocalizedLabel('FilterFalse').toLowerCase().indexOf(parsed.toLowerCase()) !== -1) {\n parsed = 'false';\n }\n operator = 'equal';\n }\n this.addDistinct(query);\n var args = {\n requestType: events.filterSearchBegin,\n filterModel: this, columnName: field, column: column,\n operator: operator, matchCase: matchCase, ignoreAccent: ignoreAccent, filterChoiceCount: null,\n query: query\n };\n this.parent.trigger(events.actionBegin, args);\n predicte = new Predicate(field, args.operator, parsed, args.matchCase, args.ignoreAccent);\n if (this.options.type === 'date' || this.options.type === 'datetime') {\n parsed = this.valueFormatter.fromView(val, this.options.parserFn, this.options.type);\n operator = 'equal';\n if (isNullOrUndefined(parsed) && val.length) {\n return;\n }\n var filterObj = {\n field: field, operator: operator, value: parsed, matchCase: matchCase,\n ignoreAccent: ignoreAccent\n };\n predicte = getDatePredicate(filterObj, this.options.type);\n }\n if (val.length) {\n query.where(predicte);\n }\n args.filterChoiceCount = !isNullOrUndefined(args.filterChoiceCount) ? args.filterChoiceCount : 1000;\n var fPredicate = {};\n showSpinner(this.spinner);\n this.renderEmpty = false;\n if (column.isForeignColumn() && val.length) {\n // tslint:disable-next-line:no-any\n column.dataSource.executeQuery(query).then(function (e) {\n var columnData = _this.options.column.columnData;\n _this.options.column.columnData = e.result;\n _this.parent.notify(events.generateQuery, { predicate: fPredicate, column: column });\n if (fPredicate.predicate.predicates.length) {\n foreignQuery.where(fPredicate.predicate);\n }\n else {\n _this.renderEmpty = true;\n }\n _this.options.column.columnData = columnData;\n foreignQuery.take(args.filterChoiceCount);\n _this.search(args, foreignQuery);\n });\n }\n else {\n query.take(args.filterChoiceCount);\n this.search(args, query);\n }\n };\n CheckBoxFilter.prototype.search = function (args, query) {\n if (this.parent.dataSource && 'result' in this.parent.dataSource) {\n this.filterEvent(args, query);\n }\n else {\n this.processSearch(query);\n }\n };\n CheckBoxFilter.prototype.getPredicateFromCols = function (columns) {\n var predicates = CheckBoxFilter.getPredicate(columns);\n var predicateList = [];\n var fPredicate = {};\n var foreignColumn = this.parent.getForeignKeyColumns();\n for (var _i = 0, _a = Object.keys(predicates); _i < _a.length; _i++) {\n var prop = _a[_i];\n var col = getColumnByForeignKeyValue(prop, foreignColumn);\n if (col) {\n this.parent.notify(events.generateQuery, { predicate: fPredicate, column: col });\n if (fPredicate.predicate.predicates.length) {\n predicateList.push(Predicate.or(fPredicate.predicate.predicates));\n }\n }\n else {\n predicateList.push(predicates[prop]);\n }\n }\n return predicateList.length && Predicate.and(predicateList);\n };\n CheckBoxFilter.prototype.getAllData = function () {\n var query = this.parent.getQuery().clone();\n query.requiresCount(); //consider take query\n this.addDistinct(query);\n var args = {\n requestType: events.filterChoiceRequest, filterModel: this, query: query, filterChoiceCount: null\n };\n this.parent.trigger(events.actionBegin, args);\n args.filterChoiceCount = !isNullOrUndefined(args.filterChoiceCount) ? args.filterChoiceCount : 1000;\n query.take(args.filterChoiceCount);\n if (this.parent.dataSource && 'result' in this.parent.dataSource) {\n this.filterEvent(args, query);\n }\n else {\n this.processDataOperation(query, true);\n }\n };\n CheckBoxFilter.prototype.addDistinct = function (query) {\n var filteredColumn = DataUtil.distinct(this.parent.filterSettings.columns, 'field');\n if (filteredColumn.indexOf(this.options.column.field) <= -1) {\n filteredColumn = filteredColumn.concat(this.options.column.field);\n }\n query.distinct(filteredColumn);\n return query;\n };\n CheckBoxFilter.prototype.filterEvent = function (args, query) {\n var _this = this;\n var def = this.eventPromise(args, query);\n def.promise.then(function (e) {\n _this.dataSuccess(e);\n });\n };\n CheckBoxFilter.prototype.eventPromise = function (args, query) {\n var state;\n state = this.getStateEventArgument(query);\n var def = new Deferred();\n state.dataSource = def.resolve;\n state.action = args;\n this.parent.trigger(events.dataStateChange, state);\n return def;\n };\n ;\n CheckBoxFilter.prototype.getStateEventArgument = function (query) {\n var adaptr = new UrlAdaptor();\n var dm = new DataManager({ url: '', adaptor: new UrlAdaptor });\n var state = adaptr.processQuery(dm, query);\n var data = JSON.parse(state.data);\n return data;\n };\n ;\n CheckBoxFilter.prototype.processDataOperation = function (query, isInitial) {\n var _this = this;\n this.options.dataSource = this.options.dataSource instanceof DataManager ?\n this.options.dataSource : new DataManager(this.options.dataSource);\n var allPromise = [];\n var runArray = [];\n if (this.options.column.isForeignColumn() && isInitial) {\n allPromise.push(this.options.column.dataSource.executeQuery(this.foreignKeyQuery));\n runArray.push(function (data) { return _this.foreignKeyData = data; });\n }\n allPromise.push(this.options.dataSource.executeQuery(query));\n runArray.push(this.dataSuccess.bind(this));\n var i = 0;\n Promise.all(allPromise).then(function (e) {\n e.forEach(function (data) {\n runArray[i++](data.result);\n });\n });\n };\n CheckBoxFilter.prototype.dataSuccess = function (e) {\n this.fullData = e;\n var query = new Query();\n if ((this.options.filteredColumns.length)) {\n var cols = [];\n for (var i = 0; i < this.options.filteredColumns.length; i++) {\n if (!(this.options.filteredColumns[i].field === this.options.field ||\n this.options.filteredColumns[i].field === this.options.foreignKeyValue)) {\n cols.push(this.options.filteredColumns[i]);\n }\n }\n var predicate = this.getPredicateFromCols(cols);\n if (predicate) {\n query.where(predicate);\n }\n }\n // query.select(this.options.field);\n var result = new DataManager(this.fullData).executeLocal(query);\n var col = this.options.column;\n this.filteredData = CheckBoxFilter.\n getDistinct(result, this.options.field, col, this.foreignKeyData).records || [];\n this.processDataSource(null, true, this.filteredData);\n this.sInput.focus();\n var args = {\n requestType: events.filterAfterOpen,\n filterModel: this, columnName: this.options.field, columnType: this.options.type\n };\n this.parent.trigger(events.actionComplete, args);\n };\n CheckBoxFilter.prototype.processDataSource = function (query, isInitial, dataSource) {\n showSpinner(this.spinner);\n // query = query ? query : this.options.query.clone();\n // query.requiresCount();\n // let result: Object = new DataManager(dataSource as JSON[]).executeLocal(query);\n // let res: { result: Object[] } = result as { result: Object[] };\n this.updateResult();\n this.createFilterItems(dataSource, isInitial);\n };\n CheckBoxFilter.prototype.processSearch = function (query) {\n this.processDataOperation(query);\n };\n CheckBoxFilter.prototype.updateResult = function () {\n this.result = {};\n var predicate = this.getPredicateFromCols(this.options.filteredColumns);\n var query = new Query();\n if (predicate) {\n query.where(predicate);\n }\n var result = new DataManager(this.fullData).executeLocal(query);\n for (var _i = 0, result_1 = result; _i < result_1.length; _i++) {\n var res = result_1[_i];\n this.result[getValue(this.options.field, res)] = true;\n }\n };\n CheckBoxFilter.prototype.clickHandler = function (e) {\n var target = e.target;\n var elem = parentsUntil(target, 'e-checkbox-wrapper');\n if (parentsUntil(target, 'e-searchbox')) {\n this.searchBoxClick(e);\n }\n if (elem) {\n var selectAll = elem.querySelector('.e-selectall');\n if (selectAll) {\n this.updateAllCBoxes(!selectAll.classList.contains('e-check'));\n }\n else {\n toogleCheckbox(elem.parentElement);\n }\n this.updateIndeterminatenBtn();\n elem.querySelector('.e-chk-hidden').focus();\n }\n };\n CheckBoxFilter.prototype.updateAllCBoxes = function (checked) {\n var cBoxes = [].slice.call(this.cBox.querySelectorAll('.e-frame'));\n for (var _i = 0, cBoxes_1 = cBoxes; _i < cBoxes_1.length; _i++) {\n var cBox = cBoxes_1[_i];\n removeAddCboxClasses(cBox, checked);\n }\n };\n CheckBoxFilter.prototype.dialogOpen = function () {\n if (this.parent.element.classList.contains('e-device')) {\n this.dialogObj.element.querySelector('.e-input-group').classList.remove('e-input-focus');\n this.dialogObj.element.querySelector('.e-btn').focus();\n }\n };\n CheckBoxFilter.prototype.createCheckbox = function (value, checked, data) {\n var elem = checked ? this.cBoxTrue.cloneNode(true) :\n this.cBoxFalse.cloneNode(true);\n var label = elem.querySelector('.e-label');\n label.innerHTML = !isNullOrUndefined(value) && value.toString().length ? value :\n this.getLocalizedLabel('Blanks');\n addClass([label], ['e-checkboxfiltertext']);\n if (this.options.template) {\n label.innerHTML = '';\n appendChildren(label, this.options.template(data, this.parent, 'filterItemTemplate'));\n }\n return elem;\n };\n CheckBoxFilter.prototype.updateIndeterminatenBtn = function () {\n var cnt = this.cBox.children.length - 1;\n var className = [];\n var elem = this.cBox.querySelector('.e-selectall');\n var selected = this.cBox.querySelectorAll('.e-check:not(.e-selectall)').length;\n var btn = this.dialogObj.btnObj[0];\n btn.disabled = false;\n if (cnt === selected) {\n className = ['e-check'];\n }\n else if (selected) {\n className = ['e-stop'];\n }\n else {\n className = ['e-uncheck'];\n btn.disabled = true;\n }\n this.filterState = !btn.disabled;\n btn.dataBind();\n removeClass([elem], ['e-check', 'e-stop', 'e-uncheck']);\n addClass([elem], className);\n };\n CheckBoxFilter.prototype.createFilterItems = function (data, isInitial) {\n var _a;\n var cBoxes = this.parent.createElement('div');\n var btn = this.dialogObj.btnObj[0];\n var nullCounter = -1;\n for (var i = 0; i < data.length; i++) {\n var val = getValue('ejValue', data[i]);\n if (val === '' || isNullOrUndefined(val)) {\n nullCounter = nullCounter + 1;\n }\n }\n this.itemsCnt = nullCounter !== -1 ? data.length - nullCounter : data.length;\n if (data.length && !this.renderEmpty) {\n var selectAllValue = this.getLocalizedLabel('SelectAll');\n var checkBox = this.createCheckbox(selectAllValue, false, (_a = {}, _a[this.options.field] = selectAllValue, _a));\n var selectAll = createCboxWithWrap(getUid('cbox'), checkBox, 'e-ftrchk');\n selectAll.querySelector('.e-frame').classList.add('e-selectall');\n cBoxes.appendChild(selectAll);\n var predicate = new Predicate('field', 'equal', this.options.field);\n if (this.options.foreignKeyValue) {\n predicate = predicate.or('field', 'equal', this.options.foreignKeyValue);\n }\n var isColFiltered = new DataManager(this.options.filteredColumns).executeLocal(new Query().where(predicate)).length;\n var isRndere = void 0;\n for (var i = 0; i < data.length; i++) {\n var uid = getUid('cbox');\n this.values[uid] = getValue('ejValue', data[i]);\n var value = this.valueFormatter.toView(getValue(this.options.field, data[i]), this.options.formatFn);\n if ((value === '' || isNullOrUndefined(value))) {\n if (isRndere) {\n continue;\n }\n isRndere = true;\n }\n var checkbox = this.createCheckbox(value, this.getCheckedState(isColFiltered, this.values[uid]), getValue('dataObj', data[i]));\n cBoxes.appendChild(createCboxWithWrap(uid, checkbox, 'e-ftrchk'));\n }\n this.cBox.innerHTML = '';\n appendChildren(this.cBox, [].slice.call(cBoxes.children));\n this.updateIndeterminatenBtn();\n btn.disabled = false;\n }\n else {\n cBoxes.appendChild(this.parent.createElement('span', { innerHTML: this.getLocalizedLabel('NoResult') }));\n this.cBox.innerHTML = '';\n appendChildren(this.cBox, [].slice.call(cBoxes.children));\n btn.disabled = true;\n }\n this.filterState = !btn.disabled;\n btn.dataBind();\n var args = { requestType: events.filterChoiceRequest, filterModel: this, dataSource: this.renderEmpty ? [] : data };\n this.parent.trigger(events.actionComplete, args);\n hideSpinner(this.spinner);\n };\n CheckBoxFilter.prototype.getCheckedState = function (isColFiltered, value) {\n if (!this.isFiltered || !isColFiltered) {\n return true;\n }\n else {\n return this.result[value];\n }\n };\n CheckBoxFilter.getDistinct = function (json, field, column, foreignKeyData) {\n var len = json.length;\n var result = [];\n var value;\n var ejValue = 'ejValue';\n var lookup = {};\n var isForeignKey = column && column.isForeignColumn();\n while (len--) {\n value = json[len];\n value = getValue(field, value); //local remote diff, check with mdu \n if (!(value in lookup)) {\n var obj = {};\n obj[ejValue] = value;\n lookup[value] = true;\n if (isForeignKey) {\n var foreignDataObj = getForeignData(column, {}, value, foreignKeyData)[0];\n setValue(events.foreignKeyData, foreignDataObj, json[len]);\n value = getValue(column.foreignKeyValue, foreignDataObj);\n }\n setValue(field, isNullOrUndefined(value) ? null : value, obj);\n setValue('dataObj', json[len], obj);\n result.push(obj);\n }\n }\n return DataUtil.group(DataUtil.sort(result, field, DataUtil.fnAscending), 'ejValue');\n };\n CheckBoxFilter.getPredicate = function (columns) {\n var cols = DataUtil.distinct(columns, 'field', true) || [];\n var collection = [];\n var pred = {};\n for (var i = 0; i < cols.length; i++) {\n collection = new DataManager(columns).executeLocal(new Query().where('field', 'equal', cols[i].field));\n if (collection.length !== 0) {\n pred[cols[i].field] = CheckBoxFilter.generatePredicate(collection);\n }\n }\n return pred;\n };\n CheckBoxFilter.generatePredicate = function (cols) {\n var len = cols ? cols.length : 0;\n var predicate;\n var first;\n first = CheckBoxFilter.updateDateFilter(cols[0]);\n first.ignoreAccent = !isNullOrUndefined(first.ignoreAccent) ? first.ignoreAccent : false;\n if (first.type === 'date' || first.type === 'datetime') {\n predicate = getDatePredicate(first, first.type);\n }\n else {\n predicate = first.ejpredicate ? first.ejpredicate :\n new Predicate(first.field, first.operator, first.value, !CheckBoxFilter.getCaseValue(first), first.ignoreAccent);\n }\n for (var p = 1; p < len; p++) {\n cols[p] = CheckBoxFilter.updateDateFilter(cols[p]);\n if (len > 2 && p > 1 && cols[p].predicate === 'or') {\n if (cols[p].type === 'date' || cols[p].type === 'datetime') {\n predicate.predicates.push(getDatePredicate(cols[p], cols[p].type));\n }\n else {\n predicate.predicates.push(new Predicate(cols[p].field, cols[p].operator, cols[p].value, !CheckBoxFilter.getCaseValue(cols[p]), cols[p].ignoreAccent));\n }\n }\n else {\n if (cols[p].type === 'date' || cols[p].type === 'datetime') {\n predicate = predicate[(cols[p].predicate)](getDatePredicate(cols[p]), cols[p].type, cols[p].ignoreAccent);\n }\n else {\n predicate = cols[p].ejpredicate ?\n predicate[cols[p].predicate](cols[p].ejpredicate) :\n predicate[(cols[p].predicate)](cols[p].field, cols[p].operator, cols[p].value, !CheckBoxFilter.getCaseValue(cols[p]), cols[p].ignoreAccent);\n }\n }\n }\n return predicate || null;\n };\n CheckBoxFilter.getCaseValue = function (filter) {\n if (isNullOrUndefined(filter.matchCase)) {\n return true;\n }\n else {\n return filter.matchCase;\n }\n };\n CheckBoxFilter.updateDateFilter = function (filter) {\n if ((filter.type === 'date' || filter.type === 'datetime' || filter.value instanceof Date)) {\n filter.type = filter.type || 'date';\n }\n return filter;\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n CheckBoxFilter.prototype.getModuleName = function () {\n return 'checkboxFilter';\n };\n return CheckBoxFilter;\n}());\nexport { CheckBoxFilter };\n","import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { Query, DataManager, Predicate, Deferred, UrlAdaptor } from '@syncfusion/ej2-data';\nimport { setFormatter, getDatePredicate, getColumnByForeignKeyValue } from '../base/util';\nimport * as events from '../base/constant';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { CheckBoxFilter } from '../actions/checkbox-filter';\n/**\n * Grid data module is used to generate query and data source.\n * @hidden\n */\nvar Data = /** @class */ (function () {\n /**\n * Constructor for data module.\n * @hidden\n */\n function Data(parent, serviceLocator) {\n this.dataState = { isPending: false, resolver: null, group: [] };\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.initDataManager();\n if (this.parent.isDestroyed || this.getModuleName() === 'foreignKey') {\n return;\n }\n this.parent.on(events.rowsAdded, this.addRows, this);\n this.parent.on(events.rowPositionChanged, this.reorderRows, this);\n this.parent.on(events.rowsRemoved, this.removeRows, this);\n this.parent.on(events.dataSourceModified, this.initDataManager, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.parent.on(events.updateData, this.crudActions, this);\n this.parent.on(events.addDeleteAction, this.getData, this);\n }\n Data.prototype.reorderRows = function (e) {\n this.dataManager.dataSource.json.splice(e.toIndex, 0, this.dataManager.dataSource.json.splice(e.fromIndex, 1)[0]);\n };\n Data.prototype.getModuleName = function () {\n return 'data';\n };\n /**\n * The function used to initialize dataManager and external query\n * @return {void}\n */\n Data.prototype.initDataManager = function () {\n var gObj = this.parent;\n this.dataManager = gObj.dataSource instanceof DataManager ? gObj.dataSource :\n (isNullOrUndefined(gObj.dataSource) ? new DataManager() : new DataManager(gObj.dataSource));\n gObj.query = gObj.query instanceof Query ? gObj.query : new Query();\n };\n /**\n * The function is used to generate updated Query from Grid model.\n * @return {Query}\n * @hidden\n */\n Data.prototype.generateQuery = function (skipPage) {\n var gObj = this.parent;\n var query = gObj.getQuery().clone();\n if (this.parent.columnQueryMode === 'ExcludeHidden') {\n query.select(this.parent.getColumns().filter(function (column) { return !(column.isPrimaryKey !== true && column.visible === false || column.field === undefined); }).map(function (column) { return column.field; }));\n }\n else if (this.parent.columnQueryMode === 'Schema') {\n var selectQueryFields = [];\n var columns = this.parent.columns;\n for (var i = 0; i < columns.length; i++) {\n selectQueryFields.push(columns[i].field);\n }\n query.select(selectQueryFields);\n }\n this.filterQuery(query);\n this.searchQuery(query);\n this.aggregateQuery(query);\n this.sortQuery(query);\n this.pageQuery(query, skipPage);\n this.groupQuery(query);\n return query;\n };\n Data.prototype.aggregateQuery = function (query, isForeign) {\n this.parent.aggregates.forEach(function (row) {\n row.columns.forEach(function (column) {\n var types = column.type instanceof Array ? column.type : [column.type];\n types.forEach(function (type) { return query.aggregate(type.toLowerCase(), column.field); });\n });\n });\n return query;\n };\n Data.prototype.pageQuery = function (query, skipPage) {\n var gObj = this.parent;\n var fName = 'fn';\n if ((gObj.allowPaging || gObj.enableVirtualization) && skipPage !== true) {\n gObj.pageSettings.currentPage = Math.max(1, gObj.pageSettings.currentPage);\n if (gObj.pageSettings.pageCount <= 0) {\n gObj.pageSettings.pageCount = 8;\n }\n if (gObj.pageSettings.pageSize <= 0) {\n gObj.pageSettings.pageSize = 12;\n }\n if (query.queries.length) {\n for (var i = 0; i < query.queries.length; i++) {\n if (query.queries[i][fName] === 'onPage') {\n query.queries.splice(i, 1);\n }\n }\n }\n query.page(gObj.pageSettings.currentPage, gObj.pageSettings.pageSize);\n }\n return query;\n };\n Data.prototype.groupQuery = function (query) {\n var gObj = this.parent;\n if (gObj.allowGrouping && gObj.groupSettings.columns.length) {\n var columns = gObj.groupSettings.columns;\n for (var i = 0, len = columns.length; i < len; i++) {\n var column = this.getColumnByField(columns[i]);\n var isGrpFmt = column.enableGroupByFormat;\n var format = column.format;\n if (isGrpFmt) {\n query.group(columns[i], this.formatGroupColumn.bind(this), format);\n }\n else {\n query.group(columns[i], null);\n }\n }\n }\n return query;\n };\n Data.prototype.sortQuery = function (query) {\n var gObj = this.parent;\n if ((gObj.allowSorting || gObj.allowGrouping) && gObj.sortSettings.columns.length) {\n var columns = gObj.sortSettings.columns;\n var sortGrp = [];\n for (var i = columns.length - 1; i > -1; i--) {\n var col = this.getColumnByField(columns[i].field);\n if (col) {\n col.setSortDirection(columns[i].direction);\n }\n var fn = col.sortComparer && !this.isRemote() ? col.sortComparer.bind(col) :\n columns[i].direction;\n if (gObj.groupSettings.columns.indexOf(columns[i].field) === -1) {\n query.sortBy(col.field, fn);\n }\n else {\n sortGrp.push({ direction: fn, field: col.field });\n }\n }\n for (var i = 0, len = sortGrp.length; i < len; i++) {\n query.sortBy(sortGrp[i].field, sortGrp[i].direction);\n }\n }\n return query;\n };\n Data.prototype.searchQuery = function (query) {\n var _this = this;\n var sSettings = this.parent.searchSettings;\n var fields = sSettings.fields.length ? sSettings.fields : this.parent.getColumns().map(function (f) { return f.field; });\n var predicateList = [];\n var needForeignKeySearch = false;\n if (this.parent.searchSettings.key.length) {\n needForeignKeySearch = this.parent.getForeignKeyColumns().some(function (col) { return fields.indexOf(col.field) > -1; });\n if (needForeignKeySearch && !(this.dataManager.adaptor.getModulename &&\n this.dataManager.adaptor.getModulename() === 'ODataV4Adaptor')) {\n fields.forEach(function (columnName) {\n var column = _this.getColumnByField(columnName);\n if (column.isForeignColumn()) {\n predicateList = _this.fGeneratePredicate(column, predicateList);\n }\n else {\n predicateList.push(new Predicate(column.field, sSettings.operator, sSettings.key, sSettings.ignoreCase, sSettings.ignoreAccent));\n }\n });\n query.where(Predicate.or(predicateList));\n }\n else {\n query.search(sSettings.key, fields, sSettings.operator, sSettings.ignoreCase, sSettings.ignoreAccent);\n }\n }\n return query;\n };\n Data.prototype.filterQuery = function (query, column, skipFoerign) {\n var gObj = this.parent;\n var predicateList = [];\n var fPredicate = {};\n var actualFilter = [];\n var foreignColumn = this.parent.getForeignKeyColumns();\n if (gObj.allowFiltering && gObj.filterSettings.columns.length) {\n var columns = column ? column : gObj.filterSettings.columns;\n var colType = {};\n for (var _i = 0, _a = gObj.getColumns(); _i < _a.length; _i++) {\n var col = _a[_i];\n colType[col.field] = col.filter.type ? col.filter.type : gObj.filterSettings.type;\n }\n var checkBoxCols = [];\n var defaultFltrCols = [];\n for (var _b = 0, columns_1 = columns; _b < columns_1.length; _b++) {\n var col = columns_1[_b];\n if (colType[col.field] === 'CheckBox' || colType[col.field] === 'Excel') {\n checkBoxCols.push(col);\n }\n else {\n defaultFltrCols.push(col);\n }\n }\n if (checkBoxCols.length) {\n var excelPredicate = CheckBoxFilter.getPredicate(checkBoxCols);\n for (var _c = 0, _d = Object.keys(excelPredicate); _c < _d.length; _c++) {\n var prop = _d[_c];\n var col = getColumnByForeignKeyValue(prop, foreignColumn);\n if (col && !skipFoerign) {\n predicateList = this.fGeneratePredicate(col, predicateList);\n actualFilter.push(col);\n }\n else {\n predicateList.push(excelPredicate[prop]);\n }\n }\n }\n if (defaultFltrCols.length) {\n for (var _e = 0, defaultFltrCols_1 = defaultFltrCols; _e < defaultFltrCols_1.length; _e++) {\n var col = defaultFltrCols_1[_e];\n var column_1 = this.getColumnByField(col.field) ||\n getColumnByForeignKeyValue(col.field, this.parent.getForeignKeyColumns());\n var sType = column_1.type;\n if (getColumnByForeignKeyValue(col.field, foreignColumn) && !skipFoerign) {\n actualFilter.push(col);\n predicateList = this.fGeneratePredicate(column_1, predicateList);\n }\n else {\n if (sType !== 'date' && sType !== 'datetime') {\n predicateList.push(new Predicate(col.field, col.operator, col.value, !col.matchCase, this.parent.filterSettings.ignoreAccent));\n }\n else {\n predicateList.push(getDatePredicate(col, sType));\n }\n }\n }\n }\n if (predicateList.length) {\n query.where(Predicate.and(predicateList));\n }\n else {\n this.parent.notify(events.showEmptyGrid, {});\n }\n }\n return query;\n };\n Data.prototype.fGeneratePredicate = function (col, predicateList) {\n var fPredicate = {};\n if (col) {\n this.parent.notify(events.generateQuery, { predicate: fPredicate, column: col });\n if (fPredicate.predicate.predicates.length) {\n predicateList.push(fPredicate.predicate);\n }\n }\n return predicateList;\n };\n /**\n * The function is used to get dataManager promise by executing given Query.\n * @param {Query} query - Defines the query which will execute along with data processing.\n * @return {Promise