Draggable
\n * \n * ```\n */\nvar Draggable = /** @class */ (function (_super) {\n __extends(Draggable, _super);\n function Draggable(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.dragLimit = Draggable_1.getDefaultPosition();\n _this.borderWidth = Draggable_1.getDefaultPosition();\n _this.padding = Draggable_1.getDefaultPosition();\n _this.diffX = 0;\n _this.prevLeft = 0;\n _this.prevTop = 0;\n _this.dragProcessStarted = false;\n /* tslint:disable no-any */\n _this.tapHoldTimer = 0;\n _this.externalInitialize = false;\n _this.diffY = 0;\n _this.parentScrollX = 0;\n _this.parentScrollY = 0;\n _this.droppables = {};\n _this.bind();\n return _this;\n }\n Draggable_1 = Draggable;\n Draggable.prototype.bind = function () {\n this.toggleEvents();\n if (Browser.isIE) {\n addClass([this.element], 'e-block-touch');\n }\n this.droppables[this.scope] = {};\n };\n Draggable.getDefaultPosition = function () {\n return extend({}, defaultPosition);\n };\n Draggable.prototype.toggleEvents = function (isUnWire) {\n var ele;\n if (!isUndefined(this.handle)) {\n ele = select(this.handle, this.element);\n }\n var handler = (this.enableTapHold && Browser.isDevice && Browser.isTouch) ? this.mobileInitialize : this.initialize;\n if (isUnWire) {\n EventHandler.remove(ele || this.element, Browser.touchStartEvent, handler);\n }\n else {\n EventHandler.add(ele || this.element, Browser.touchStartEvent, handler, this);\n }\n };\n /* istanbul ignore next */\n Draggable.prototype.mobileInitialize = function (evt) {\n var _this = this;\n var target = evt.currentTarget;\n this.tapHoldTimer = setTimeout(function () {\n _this.externalInitialize = true;\n _this.removeTapholdTimer();\n _this.initialize(evt, target);\n }, this.tapHoldThreshold);\n EventHandler.add(document, Browser.touchMoveEvent, this.removeTapholdTimer, this);\n EventHandler.add(document, Browser.touchEndEvent, this.removeTapholdTimer, this);\n };\n /* istanbul ignore next */\n Draggable.prototype.removeTapholdTimer = function () {\n clearTimeout(this.tapHoldTimer);\n EventHandler.remove(document, Browser.touchMoveEvent, this.removeTapholdTimer);\n EventHandler.remove(document, Browser.touchEndEvent, this.removeTapholdTimer);\n };\n /* istanbul ignore next */\n Draggable.prototype.getScrollableParent = function (element, axis) {\n var scroll = { 'vertical': 'scrollHeight', 'horizontal': 'scrollWidth' };\n var client = { 'vertical': 'clientHeight', 'horizontal': 'clientWidth' };\n if (isNullOrUndefined(element)) {\n return null;\n }\n if (element[scroll[axis]] > element[client[axis]]) {\n if (axis === 'vertical' ? element.scrollTop > 0 : element.scrollLeft > 0) {\n if (axis === 'vertical') {\n this.parentScrollY = this.parentScrollY +\n (this.parentScrollY === 0 ? element.scrollTop : element.scrollTop - this.parentScrollY);\n }\n else {\n this.parentScrollX = this.parentScrollX +\n (this.parentScrollX === 0 ? element.scrollLeft : element.scrollLeft - this.parentScrollX);\n }\n if (!isNullOrUndefined(element)) {\n return this.getScrollableParent(element.parentNode, axis);\n }\n else {\n return element;\n }\n }\n else {\n return this.getScrollableParent(element.parentNode, axis);\n }\n }\n else {\n return this.getScrollableParent(element.parentNode, axis);\n }\n };\n Draggable.prototype.getScrollableValues = function () {\n this.parentScrollX = 0;\n this.parentScrollY = 0;\n var isModalDialog = this.element.classList.contains('e-dialog') && this.element.classList.contains('e-dlg-modal');\n var verticalScrollParent = this.getScrollableParent(this.element.parentNode, 'vertical');\n var horizontalScrollParent = this.getScrollableParent(this.element.parentNode, 'horizontal');\n };\n Draggable.prototype.initialize = function (evt, curTarget) {\n this.currentStateTarget = evt.target;\n if (this.isDragStarted()) {\n return;\n }\n else {\n this.isDragStarted(true);\n this.externalInitialize = false;\n }\n this.target = (evt.currentTarget || curTarget);\n this.dragProcessStarted = false;\n if (this.abort) {\n /* tslint:disable no-any */\n var abortSelectors = this.abort;\n if (typeof abortSelectors === 'string') {\n abortSelectors = [abortSelectors];\n }\n for (var i = 0; i < abortSelectors.length; i++) {\n if (!isNullOrUndefined(closest(evt.target, abortSelectors[i]))) {\n /* istanbul ignore next */\n if (this.isDragStarted()) {\n this.isDragStarted(true);\n }\n return;\n }\n }\n }\n if (this.preventDefault && !isUndefined(evt.changedTouches) && evt.type !== 'touchstart') {\n evt.preventDefault();\n }\n this.element.setAttribute('aria-grabbed', 'true');\n var intCoord = this.getCoordinates(evt);\n this.initialPosition = { x: intCoord.pageX, y: intCoord.pageY };\n if (!this.clone) {\n var pos = this.element.getBoundingClientRect();\n this.getScrollableValues();\n if (evt.clientX === evt.pageX) {\n this.parentScrollX = 0;\n }\n if (evt.clientY === evt.pageY) {\n this.parentScrollY = 0;\n }\n this.relativeXPosition = intCoord.pageX - (pos.left + this.parentScrollX);\n this.relativeYPosition = intCoord.pageY - (pos.top + this.parentScrollY);\n }\n if (this.externalInitialize) {\n this.intDragStart(evt);\n }\n else {\n EventHandler.add(document, Browser.touchMoveEvent, this.intDragStart, this);\n EventHandler.add(document, Browser.touchEndEvent, this.intDestroy, this);\n }\n this.toggleEvents(true);\n if (evt.type !== 'touchstart' && this.isPreventSelect) {\n document.body.classList.add('e-prevent-select');\n }\n this.externalInitialize = false;\n EventHandler.trigger(document.documentElement, Browser.touchStartEvent, evt);\n };\n Draggable.prototype.intDragStart = function (evt) {\n this.removeTapholdTimer();\n var isChangeTouch = !isUndefined(evt.changedTouches);\n if (isChangeTouch && (evt.changedTouches.length !== 1)) {\n return;\n }\n if (isChangeTouch) {\n evt.preventDefault();\n }\n var intCordinate = this.getCoordinates(evt);\n var pos;\n var styleProp = getComputedStyle(this.element);\n this.margin = {\n left: parseInt(styleProp.marginLeft, 10),\n top: parseInt(styleProp.marginTop, 10),\n right: parseInt(styleProp.marginRight, 10),\n bottom: parseInt(styleProp.marginBottom, 10),\n };\n var element = this.element;\n if (this.clone && this.dragTarget) {\n var intClosest = closest(evt.target, this.dragTarget);\n if (!isNullOrUndefined(intClosest)) {\n element = intClosest;\n }\n }\n /* istanbul ignore next */\n if (this.isReplaceDragEle) {\n element = this.currentStateCheck(evt.target, element);\n }\n this.offset = this.calculateParentPosition(element);\n this.position = this.getMousePosition(evt, this.isDragScroll);\n var x = this.initialPosition.x - intCordinate.pageX;\n var y = this.initialPosition.y - intCordinate.pageY;\n var distance = Math.sqrt((x * x) + (y * y));\n if ((distance >= this.distance || this.externalInitialize)) {\n var ele = this.getHelperElement(evt);\n if (!ele || isNullOrUndefined(ele)) {\n return;\n }\n var dragTargetElement = this.helperElement = ele;\n this.parentClientRect = this.calculateParentPosition(dragTargetElement.offsetParent);\n if (this.dragStart) {\n var curTarget = this.getProperTargetElement(evt);\n var args = {\n event: evt,\n element: element,\n target: curTarget,\n bindEvents: isBlazor() ? this.bindDragEvents.bind(this) : null,\n dragElement: dragTargetElement\n };\n this.trigger('dragStart', args);\n }\n if (this.dragArea) {\n this.setDragArea();\n }\n else {\n this.dragLimit = { left: 0, right: 0, bottom: 0, top: 0 };\n this.borderWidth = { top: 0, left: 0 };\n }\n pos = { left: this.position.left - this.parentClientRect.left, top: this.position.top - this.parentClientRect.top };\n if (this.clone && !this.enableTailMode) {\n this.diffX = this.position.left - this.offset.left;\n this.diffY = this.position.top - this.offset.top;\n }\n this.getScrollableValues();\n if (!this.clone && !this.dragArea) {\n pos.top -= this.parentScrollY;\n pos.left -= this.parentScrollX;\n }\n var posValue = this.getProcessedPositionValue({\n top: (pos.top - this.diffY) + 'px',\n left: (pos.left - this.diffX) + 'px'\n });\n this.dragElePosition = { top: pos.top, left: pos.left };\n setStyleAttribute(dragTargetElement, this.getDragPosition({ position: 'absolute', left: posValue.left, top: posValue.top }));\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDragStart);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDestroy);\n if (!isBlazor()) {\n this.bindDragEvents(dragTargetElement);\n }\n }\n };\n Draggable.prototype.bindDragEvents = function (dragTargetElement) {\n if (isVisible(dragTargetElement)) {\n EventHandler.add(document, Browser.touchMoveEvent, this.intDrag, this);\n EventHandler.add(document, Browser.touchEndEvent, this.intDragStop, this);\n this.setGlobalDroppables(false, this.element, dragTargetElement);\n }\n else {\n this.toggleEvents();\n document.body.classList.remove('e-prevent-select');\n }\n };\n Draggable.prototype.elementInViewport = function (el) {\n this.top = el.offsetTop;\n this.left = el.offsetLeft;\n this.width = el.offsetWidth;\n this.height = el.offsetHeight;\n while (el.offsetParent) {\n el = el.offsetParent;\n this.top += el.offsetTop;\n this.left += el.offsetLeft;\n }\n return (this.top >= window.pageYOffset &&\n this.left >= window.pageXOffset &&\n (this.top + this.height) <= (window.pageYOffset + window.innerHeight) &&\n (this.left + this.width) <= (window.pageXOffset + window.innerWidth));\n };\n Draggable.prototype.getProcessedPositionValue = function (value) {\n if (this.queryPositionInfo) {\n return this.queryPositionInfo(value);\n }\n return value;\n };\n Draggable.prototype.calculateParentPosition = function (ele) {\n if (isNullOrUndefined(ele)) {\n return { left: 0, top: 0 };\n }\n var rect = ele.getBoundingClientRect();\n var style = getComputedStyle(ele);\n return {\n left: (rect.left + window.pageXOffset) - parseInt(style.marginLeft, 10),\n top: (rect.top + window.pageYOffset) - parseInt(style.marginTop, 10)\n };\n };\n // tslint:disable-next-line:max-func-body-length\n Draggable.prototype.intDrag = function (evt) {\n if (!isUndefined(evt.changedTouches) && (evt.changedTouches.length !== 1)) {\n return;\n }\n var left;\n var top;\n this.position = this.getMousePosition(evt, this.isDragScroll);\n var docHeight = this.getDocumentWidthHeight('Height');\n if (docHeight < this.position.top) {\n this.position.top = docHeight;\n }\n var docWidth = this.getDocumentWidthHeight('Width');\n if (docWidth < this.position.left) {\n this.position.left = docWidth;\n }\n if (this.drag) {\n var curTarget = this.getProperTargetElement(evt);\n this.trigger('drag', { event: evt, element: this.element, target: curTarget });\n }\n var eleObj = this.checkTargetElement(evt);\n if (eleObj.target && eleObj.instance) {\n /* tslint:disable no-any */\n var flag = true;\n if (this.hoverObject) {\n if (this.hoverObject.instance !== eleObj.instance) {\n this.triggerOutFunction(evt, eleObj);\n }\n else {\n flag = false;\n }\n }\n if (flag) {\n eleObj.instance.dragData[this.scope] = this.droppables[this.scope];\n eleObj.instance.intOver(evt, eleObj.target);\n this.hoverObject = eleObj;\n }\n }\n else if (this.hoverObject) {\n this.triggerOutFunction(evt, eleObj);\n }\n var helperElement = this.droppables[this.scope].helper;\n this.parentClientRect = this.calculateParentPosition(this.helperElement.offsetParent);\n var tLeft = this.parentClientRect.left;\n var tTop = this.parentClientRect.top;\n var intCoord = this.getCoordinates(evt);\n var pagex = intCoord.pageX;\n var pagey = intCoord.pageY;\n var dLeft = this.position.left - this.diffX;\n var dTop = this.position.top - this.diffY;\n if (this.dragArea) {\n var styles = getComputedStyle(helperElement);\n if (this.pageX !== pagex || this.skipDistanceCheck) {\n var helperWidth = helperElement.offsetWidth + (parseFloat(styles.marginLeft)\n + parseFloat(styles.marginRight));\n if (this.dragLimit.left > dLeft && dLeft > 0) {\n left = this.dragLimit.left;\n }\n else if (this.dragLimit.right + window.pageXOffset < dLeft + helperWidth && dLeft > 0) {\n left = dLeft - (dLeft - this.dragLimit.right) + window.pageXOffset - helperWidth;\n }\n else {\n left = dLeft < 0 ? this.dragLimit.left : dLeft;\n }\n }\n if (this.pageY !== pagey || this.skipDistanceCheck) {\n var helperHeight = helperElement.offsetHeight + (parseFloat(styles.marginTop)\n + parseFloat(styles.marginBottom));\n if (this.dragLimit.top > dTop && dTop > 0) {\n top = this.dragLimit.top;\n }\n else if (this.dragLimit.bottom + window.pageYOffset < dTop + helperHeight && dTop > 0) {\n top = dTop - (dTop - this.dragLimit.bottom) + window.pageYOffset - helperHeight;\n }\n else {\n top = dTop < 0 ? this.dragLimit.top : dTop;\n }\n }\n }\n else {\n left = dLeft;\n top = dTop;\n }\n var iTop = tTop + this.borderWidth.top;\n var iLeft = tLeft + this.borderWidth.left;\n if (this.dragProcessStarted) {\n if (isNullOrUndefined(top)) {\n top = this.prevTop;\n }\n if (isNullOrUndefined(left)) {\n left = this.prevLeft;\n }\n }\n var draEleTop;\n var draEleLeft;\n if (this.dragArea) {\n draEleTop = (top - iTop) < 0 ? this.dragLimit.top : (top - iTop);\n draEleLeft = (left - iLeft) < 0 ? this.dragElePosition.left : (left - iLeft);\n }\n else {\n draEleTop = top - iTop;\n draEleLeft = left - iLeft;\n if (!this.clone) {\n draEleTop -= this.parentScrollY;\n draEleLeft -= this.parentScrollX;\n }\n }\n var dragValue = this.getProcessedPositionValue({ top: draEleTop + 'px', left: draEleLeft + 'px' });\n setStyleAttribute(helperElement, this.getDragPosition(dragValue));\n if (!this.elementInViewport(helperElement) && this.enableAutoScroll) {\n this.helperElement.scrollIntoView();\n }\n this.dragProcessStarted = true;\n this.prevLeft = left;\n this.prevTop = top;\n this.position.left = left;\n this.position.top = top;\n this.pageX = pagex;\n this.pageY = pagey;\n };\n Draggable.prototype.triggerOutFunction = function (evt, eleObj) {\n this.hoverObject.instance.intOut(evt, eleObj.target);\n this.hoverObject.instance.dragData[this.scope] = null;\n this.hoverObject = null;\n };\n Draggable.prototype.getDragPosition = function (dragValue) {\n var temp = extend({}, dragValue);\n if (this.axis) {\n if (this.axis === 'x') {\n delete temp.top;\n }\n else if (this.axis === 'y') {\n delete temp.left;\n }\n }\n return temp;\n };\n Draggable.prototype.getDocumentWidthHeight = function (str) {\n var docBody = document.body;\n var docEle = document.documentElement;\n var returnValue = Math.max(docBody['scroll' + str], docEle['scroll' + str], docBody['offset' + str], docEle['offset' + str], docEle['client' + str]);\n return returnValue;\n };\n Draggable.prototype.intDragStop = function (evt) {\n this.dragProcessStarted = false;\n if (!isUndefined(evt.changedTouches) && (evt.changedTouches.length !== 1)) {\n return;\n }\n var type = ['touchend', 'pointerup', 'mouseup'];\n if (type.indexOf(evt.type) !== -1) {\n if (this.dragStop) {\n var curTarget = this.getProperTargetElement(evt);\n this.trigger('dragStop', { event: evt, element: this.element, target: curTarget, helper: this.helperElement });\n }\n this.intDestroy(evt);\n }\n else {\n this.element.setAttribute('aria-grabbed', 'false');\n }\n var eleObj = this.checkTargetElement(evt);\n if (eleObj.target && eleObj.instance) {\n eleObj.instance.dragStopCalled = true;\n eleObj.instance.dragData[this.scope] = this.droppables[this.scope];\n eleObj.instance.intDrop(evt, eleObj.target);\n }\n this.setGlobalDroppables(true);\n document.body.classList.remove('e-prevent-select');\n };\n /**\n * @private\n */\n Draggable.prototype.intDestroy = function (evt) {\n this.dragProcessStarted = false;\n this.toggleEvents();\n document.body.classList.remove('e-prevent-select');\n this.element.setAttribute('aria-grabbed', 'false');\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDragStart);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDragStop);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDestroy);\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDrag);\n if (this.isDragStarted()) {\n this.isDragStarted(true);\n }\n };\n // triggers when property changed\n Draggable.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Draggable.prototype.getModuleName = function () {\n return 'draggable';\n };\n Draggable.prototype.isDragStarted = function (change) {\n if (change) {\n isDraggedObject.isDragged = !isDraggedObject.isDragged;\n }\n return isDraggedObject.isDragged;\n };\n Draggable.prototype.setDragArea = function () {\n var eleWidthBound;\n var eleHeightBound;\n var top = 0;\n var left = 0;\n var ele;\n var type = typeof this.dragArea;\n if (type === 'string') {\n ele = select(this.dragArea);\n }\n else {\n ele = this.dragArea;\n }\n if (ele) {\n var elementArea = ele.getBoundingClientRect();\n eleWidthBound = ele.scrollWidth ? ele.scrollWidth : elementArea.right - elementArea.left;\n eleHeightBound = ele.scrollHeight ? ele.scrollHeight : elementArea.bottom - elementArea.top;\n var keys = ['Top', 'Left', 'Bottom', 'Right'];\n var styles = getComputedStyle(ele);\n for (var i = 0; i < keys.length; i++) {\n var key = keys[i];\n var tborder = styles['border' + key + 'Width'];\n var tpadding = styles['padding' + key];\n var lowerKey = key.toLowerCase();\n this.borderWidth[lowerKey] = isNaN(parseFloat(tborder)) ? 0 : parseFloat(tborder);\n this.padding[lowerKey] = isNaN(parseFloat(tpadding)) ? 0 : parseFloat(tpadding);\n }\n top = elementArea.top;\n left = elementArea.left;\n this.dragLimit.left = left + this.borderWidth.left + this.padding.left;\n this.dragLimit.top = ele.offsetTop + this.borderWidth.top + this.padding.top;\n this.dragLimit.right = left + eleWidthBound - (this.borderWidth.right + this.padding.right);\n this.dragLimit.bottom = top + eleHeightBound - (this.borderWidth.bottom + this.padding.bottom);\n }\n };\n Draggable.prototype.getProperTargetElement = function (evt) {\n var intCoord = this.getCoordinates(evt);\n var ele;\n var prevStyle = this.helperElement.style.pointerEvents || '';\n if (compareElementParent(evt.target, this.helperElement) || evt.type.indexOf('touch') !== -1) {\n this.helperElement.style.pointerEvents = 'none';\n ele = document.elementFromPoint(intCoord.clientX, intCoord.clientY);\n this.helperElement.style.pointerEvents = prevStyle;\n }\n else {\n ele = evt.target;\n }\n return ele;\n };\n /* istanbul ignore next */\n Draggable.prototype.currentStateCheck = function (ele, oldEle) {\n var elem;\n if (!isNullOrUndefined(this.currentStateTarget) && this.currentStateTarget !== ele) {\n elem = this.currentStateTarget;\n }\n else {\n elem = !isNullOrUndefined(oldEle) ? oldEle : ele;\n }\n return elem;\n };\n Draggable.prototype.getMousePosition = function (evt, isdragscroll) {\n /* tslint:disable no-any */\n var dragEle = evt.srcElement !== undefined ? evt.srcElement : evt.target;\n var intCoord = this.getCoordinates(evt);\n var pageX;\n var pageY;\n var isOffsetParent = isNullOrUndefined(dragEle.offsetParent);\n /* istanbul ignore next */\n if (isdragscroll) {\n pageX = this.clone ? intCoord.pageX :\n (intCoord.pageX + (isOffsetParent ? 0 : dragEle.offsetParent.scrollLeft)) - this.relativeXPosition;\n pageY = this.clone ? intCoord.pageY :\n (intCoord.pageY + (isOffsetParent ? 0 : dragEle.offsetParent.scrollTop)) - this.relativeYPosition;\n }\n else {\n pageX = this.clone ? intCoord.pageX : (intCoord.pageX + window.pageXOffset) - this.relativeXPosition;\n pageY = this.clone ? intCoord.pageY : (intCoord.pageY + window.pageYOffset) - this.relativeYPosition;\n }\n return {\n left: pageX - (this.margin.left + this.cursorAt.left),\n top: pageY - (this.margin.top + this.cursorAt.top)\n };\n };\n Draggable.prototype.getCoordinates = function (evt) {\n if (evt.type.indexOf('touch') > -1) {\n return evt.changedTouches[0];\n }\n return evt;\n };\n Draggable.prototype.getHelperElement = function (evt) {\n var element;\n if (this.clone) {\n if (this.helper) {\n element = this.helper({ sender: evt, element: this.target });\n }\n else {\n element = createElement('div', { className: 'e-drag-helper e-block-touch', innerHTML: 'Draggable' });\n document.body.appendChild(element);\n }\n }\n else {\n element = this.element;\n }\n return element;\n };\n Draggable.prototype.setGlobalDroppables = function (reset, drag, helper) {\n this.droppables[this.scope] = reset ? null : {\n draggable: drag,\n helper: helper,\n draggedElement: this.element\n };\n };\n Draggable.prototype.checkTargetElement = function (evt) {\n var target = this.getProperTargetElement(evt);\n var dropIns = this.getDropInstance(target);\n if (!dropIns && target && !isNullOrUndefined(target.parentNode)) {\n var parent_1 = closest(target.parentNode, '.e-droppable') || target.parentElement;\n if (parent_1) {\n dropIns = this.getDropInstance(parent_1);\n }\n }\n return { target: target, instance: dropIns };\n };\n Draggable.prototype.getDropInstance = function (ele) {\n var name = 'getModuleName';\n var drop;\n var eleInst = ele && ele.ej2_instances;\n if (eleInst) {\n for (var _i = 0, eleInst_1 = eleInst; _i < eleInst_1.length; _i++) {\n var inst = eleInst_1[_i];\n if (inst[name]() === 'droppable') {\n drop = inst;\n break;\n }\n }\n }\n return drop;\n };\n Draggable.prototype.destroy = function () {\n this.toggleEvents(true);\n _super.prototype.destroy.call(this);\n };\n var Draggable_1;\n __decorate([\n Complex({}, Position)\n ], Draggable.prototype, \"cursorAt\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"clone\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"dragArea\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"isDragScroll\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"isReplaceDragEle\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"isPreventSelect\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"drag\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"dragStart\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"dragStop\", void 0);\n __decorate([\n Property(1)\n ], Draggable.prototype, \"distance\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"handle\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"abort\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"helper\", void 0);\n __decorate([\n Property('default')\n ], Draggable.prototype, \"scope\", void 0);\n __decorate([\n Property('')\n ], Draggable.prototype, \"dragTarget\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"axis\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"queryPositionInfo\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableTailMode\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"skipDistanceCheck\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"preventDefault\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableAutoScroll\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableTapHold\", void 0);\n __decorate([\n Property(750)\n ], Draggable.prototype, \"tapHoldThreshold\", void 0);\n Draggable = Draggable_1 = __decorate([\n NotifyPropertyChanges\n ], Draggable);\n return Draggable;\n}(Base));\nexport { Draggable };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Base } from './base';\nimport { Browser } from './browser';\nimport { isVisible, matches } from './dom';\nimport { Property, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { EventHandler } from './event-handler';\nimport { compareElementParent } from './util';\n/**\n * Droppable Module provides support to enable droppable functionality in Dom Elements.\n * ```html\n * Droppable
\n * \n * ```\n */\nvar Droppable = /** @class */ (function (_super) {\n __extends(Droppable, _super);\n function Droppable(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.mouseOver = false;\n _this.dragData = {};\n _this.dragStopCalled = false;\n _this.bind();\n return _this;\n }\n Droppable.prototype.bind = function () {\n this.wireEvents();\n };\n Droppable.prototype.wireEvents = function () {\n EventHandler.add(this.element, Browser.touchEndEvent, this.intDrop, this);\n };\n // triggers when property changed\n Droppable.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Droppable.prototype.getModuleName = function () {\n return 'droppable';\n };\n Droppable.prototype.intOver = function (event, element) {\n if (!this.mouseOver) {\n var drag = this.dragData[this.scope];\n this.trigger('over', { event: event, target: element, dragData: drag });\n this.mouseOver = true;\n }\n };\n Droppable.prototype.intOut = function (event, element) {\n if (this.mouseOver) {\n this.trigger('out', { evt: event, target: element });\n this.mouseOver = false;\n }\n };\n Droppable.prototype.intDrop = function (evt, element) {\n if (!this.dragStopCalled) {\n return;\n }\n else {\n this.dragStopCalled = false;\n }\n var accept = true;\n var drag = this.dragData[this.scope];\n var isDrag = drag ? (drag.helper && isVisible(drag.helper)) : false;\n var area;\n if (isDrag) {\n area = this.isDropArea(evt, drag.helper, element);\n if (this.accept) {\n accept = matches(drag.helper, this.accept);\n }\n }\n if (isDrag && this.drop && area.canDrop && accept) {\n this.trigger('drop', { event: evt, target: area.target, droppedElement: drag.helper, dragData: drag });\n }\n this.mouseOver = false;\n };\n Droppable.prototype.isDropArea = function (evt, helper, element) {\n var area = { canDrop: true, target: element || evt.target };\n var isTouch = evt.type === 'touchend';\n if (isTouch || area.target === helper) {\n helper.style.display = 'none';\n var coord = isTouch ? (evt.changedTouches[0]) : evt;\n var ele = document.elementFromPoint(coord.clientX, coord.clientY);\n area.canDrop = false;\n area.canDrop = compareElementParent(ele, this.element);\n if (area.canDrop) {\n area.target = ele;\n }\n helper.style.display = '';\n }\n return area;\n };\n Droppable.prototype.destroy = function () {\n EventHandler.remove(this.element, Browser.touchEndEvent, this.intDrop);\n _super.prototype.destroy.call(this);\n };\n __decorate([\n Property()\n ], Droppable.prototype, \"accept\", void 0);\n __decorate([\n Property('default')\n ], Droppable.prototype, \"scope\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"drop\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"over\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"out\", void 0);\n Droppable = __decorate([\n NotifyPropertyChanges\n ], Droppable);\n return Droppable;\n}(Base));\nexport { Droppable };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { Base } from './base';\nvar keyCode = {\n 'backspace': 8,\n 'tab': 9,\n 'enter': 13,\n 'shift': 16,\n 'control': 17,\n 'alt': 18,\n 'pause': 19,\n 'capslock': 20,\n 'space': 32,\n 'escape': 27,\n 'pageup': 33,\n 'pagedown': 34,\n 'end': 35,\n 'home': 36,\n 'leftarrow': 37,\n 'uparrow': 38,\n 'rightarrow': 39,\n 'downarrow': 40,\n 'insert': 45,\n 'delete': 46,\n 'f1': 112,\n 'f2': 113,\n 'f3': 114,\n 'f4': 115,\n 'f5': 116,\n 'f6': 117,\n 'f7': 118,\n 'f8': 119,\n 'f9': 120,\n 'f10': 121,\n 'f11': 122,\n 'f12': 123,\n 'semicolon': 186,\n 'plus': 187,\n 'comma': 188,\n 'minus': 189,\n 'dot': 190,\n 'forwardslash': 191,\n 'graveaccent': 192,\n 'openbracket': 219,\n 'backslash': 220,\n 'closebracket': 221,\n 'singlequote': 222\n};\n/**\n * KeyboardEvents class enables you to bind key action desired key combinations for ex., Ctrl+A, Delete, Alt+Space etc.\n * ```html\n * Draggable
\n * \n * ```\n */\nvar Draggable = /** @class */ (function (_super) {\n __extends(Draggable, _super);\n function Draggable(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.dragLimit = Draggable_1.getDefaultPosition();\n _this.borderWidth = Draggable_1.getDefaultPosition();\n _this.padding = Draggable_1.getDefaultPosition();\n _this.diffX = 0;\n _this.prevLeft = 0;\n _this.prevTop = 0;\n _this.dragProcessStarted = false;\n /* tslint:disable no-any */\n _this.tapHoldTimer = 0;\n _this.externalInitialize = false;\n _this.diffY = 0;\n _this.parentScrollX = 0;\n _this.parentScrollY = 0;\n _this.droppables = {};\n _this.bind();\n return _this;\n }\n Draggable_1 = Draggable;\n Draggable.prototype.bind = function () {\n this.toggleEvents();\n if (Browser.isIE) {\n addClass([this.element], 'e-block-touch');\n }\n this.droppables[this.scope] = {};\n };\n Draggable.getDefaultPosition = function () {\n return extend({}, defaultPosition);\n };\n Draggable.prototype.toggleEvents = function (isUnWire) {\n var ele;\n if (!isUndefined(this.handle)) {\n ele = select(this.handle, this.element);\n }\n var handler = (this.enableTapHold && Browser.isDevice && Browser.isTouch) ? this.mobileInitialize : this.initialize;\n if (isUnWire) {\n EventHandler.remove(ele || this.element, Browser.touchStartEvent, handler);\n }\n else {\n EventHandler.add(ele || this.element, Browser.touchStartEvent, handler, this);\n }\n };\n /* istanbul ignore next */\n Draggable.prototype.mobileInitialize = function (evt) {\n var _this = this;\n var target = evt.currentTarget;\n this.tapHoldTimer = setTimeout(function () {\n _this.externalInitialize = true;\n _this.removeTapholdTimer();\n _this.initialize(evt, target);\n }, this.tapHoldThreshold);\n EventHandler.add(document, Browser.touchMoveEvent, this.removeTapholdTimer, this);\n EventHandler.add(document, Browser.touchEndEvent, this.removeTapholdTimer, this);\n };\n /* istanbul ignore next */\n Draggable.prototype.removeTapholdTimer = function () {\n clearTimeout(this.tapHoldTimer);\n EventHandler.remove(document, Browser.touchMoveEvent, this.removeTapholdTimer);\n EventHandler.remove(document, Browser.touchEndEvent, this.removeTapholdTimer);\n };\n /* istanbul ignore next */\n Draggable.prototype.getScrollableParent = function (element, axis) {\n var scroll = { 'vertical': 'scrollHeight', 'horizontal': 'scrollWidth' };\n var client = { 'vertical': 'clientHeight', 'horizontal': 'clientWidth' };\n if (isNullOrUndefined(element)) {\n return null;\n }\n if (element[scroll[axis]] > element[client[axis]]) {\n if (axis === 'vertical' ? element.scrollTop > 0 : element.scrollLeft > 0) {\n if (axis === 'vertical') {\n this.parentScrollY = this.parentScrollY +\n (this.parentScrollY === 0 ? element.scrollTop : element.scrollTop - this.parentScrollY);\n }\n else {\n this.parentScrollX = this.parentScrollX +\n (this.parentScrollX === 0 ? element.scrollLeft : element.scrollLeft - this.parentScrollX);\n }\n if (!isNullOrUndefined(element)) {\n return this.getScrollableParent(element.parentNode, axis);\n }\n else {\n return element;\n }\n }\n else {\n return this.getScrollableParent(element.parentNode, axis);\n }\n }\n else {\n return this.getScrollableParent(element.parentNode, axis);\n }\n };\n Draggable.prototype.getScrollableValues = function () {\n this.parentScrollX = 0;\n this.parentScrollY = 0;\n var isModalDialog = this.element.classList.contains('e-dialog') && this.element.classList.contains('e-dlg-modal');\n var verticalScrollParent = this.getScrollableParent(this.element.parentNode, 'vertical');\n var horizontalScrollParent = this.getScrollableParent(this.element.parentNode, 'horizontal');\n };\n Draggable.prototype.initialize = function (evt, curTarget) {\n this.currentStateTarget = evt.target;\n if (this.isDragStarted()) {\n return;\n }\n else {\n this.isDragStarted(true);\n this.externalInitialize = false;\n }\n this.target = (evt.currentTarget || curTarget);\n this.dragProcessStarted = false;\n if (this.abort) {\n /* tslint:disable no-any */\n var abortSelectors = this.abort;\n if (typeof abortSelectors === 'string') {\n abortSelectors = [abortSelectors];\n }\n for (var i = 0; i < abortSelectors.length; i++) {\n if (!isNullOrUndefined(closest(evt.target, abortSelectors[i]))) {\n /* istanbul ignore next */\n if (this.isDragStarted()) {\n this.isDragStarted(true);\n }\n return;\n }\n }\n }\n if (this.preventDefault && !isUndefined(evt.changedTouches) && evt.type !== 'touchstart') {\n evt.preventDefault();\n }\n this.element.setAttribute('aria-grabbed', 'true');\n var intCoord = this.getCoordinates(evt);\n this.initialPosition = { x: intCoord.pageX, y: intCoord.pageY };\n if (!this.clone) {\n var pos = this.element.getBoundingClientRect();\n this.getScrollableValues();\n if (evt.clientX === evt.pageX) {\n this.parentScrollX = 0;\n }\n if (evt.clientY === evt.pageY) {\n this.parentScrollY = 0;\n }\n this.relativeXPosition = intCoord.pageX - (pos.left + this.parentScrollX);\n this.relativeYPosition = intCoord.pageY - (pos.top + this.parentScrollY);\n }\n if (this.externalInitialize) {\n this.intDragStart(evt);\n }\n else {\n EventHandler.add(document, Browser.touchMoveEvent, this.intDragStart, this);\n EventHandler.add(document, Browser.touchEndEvent, this.intDestroy, this);\n }\n this.toggleEvents(true);\n if (evt.type !== 'touchstart' && this.isPreventSelect) {\n document.body.classList.add('e-prevent-select');\n }\n this.externalInitialize = false;\n EventHandler.trigger(document.documentElement, Browser.touchStartEvent, evt);\n };\n Draggable.prototype.intDragStart = function (evt) {\n this.removeTapholdTimer();\n var isChangeTouch = !isUndefined(evt.changedTouches);\n if (isChangeTouch && (evt.changedTouches.length !== 1)) {\n return;\n }\n if (isChangeTouch) {\n evt.preventDefault();\n }\n var intCordinate = this.getCoordinates(evt);\n var pos;\n var styleProp = getComputedStyle(this.element);\n this.margin = {\n left: parseInt(styleProp.marginLeft, 10),\n top: parseInt(styleProp.marginTop, 10),\n right: parseInt(styleProp.marginRight, 10),\n bottom: parseInt(styleProp.marginBottom, 10),\n };\n var element = this.element;\n if (this.clone && this.dragTarget) {\n var intClosest = closest(evt.target, this.dragTarget);\n if (!isNullOrUndefined(intClosest)) {\n element = intClosest;\n }\n }\n /* istanbul ignore next */\n if (this.isReplaceDragEle) {\n element = this.currentStateCheck(evt.target, element);\n }\n this.offset = this.calculateParentPosition(element);\n this.position = this.getMousePosition(evt, this.isDragScroll);\n var x = this.initialPosition.x - intCordinate.pageX;\n var y = this.initialPosition.y - intCordinate.pageY;\n var distance = Math.sqrt((x * x) + (y * y));\n if ((distance >= this.distance || this.externalInitialize)) {\n var ele = this.getHelperElement(evt);\n if (!ele || isNullOrUndefined(ele)) {\n return;\n }\n var dragTargetElement = this.helperElement = ele;\n this.parentClientRect = this.calculateParentPosition(dragTargetElement.offsetParent);\n if (this.dragStart) {\n var curTarget = this.getProperTargetElement(evt);\n var args = {\n event: evt,\n element: element,\n target: curTarget,\n bindEvents: isBlazor() ? this.bindDragEvents.bind(this) : null,\n dragElement: dragTargetElement\n };\n this.trigger('dragStart', args);\n }\n if (this.dragArea) {\n this.setDragArea();\n }\n else {\n this.dragLimit = { left: 0, right: 0, bottom: 0, top: 0 };\n this.borderWidth = { top: 0, left: 0 };\n }\n pos = { left: this.position.left - this.parentClientRect.left, top: this.position.top - this.parentClientRect.top };\n if (this.clone && !this.enableTailMode) {\n this.diffX = this.position.left - this.offset.left;\n this.diffY = this.position.top - this.offset.top;\n }\n this.getScrollableValues();\n if (!this.clone && !this.dragArea) {\n pos.top -= this.parentScrollY;\n pos.left -= this.parentScrollX;\n }\n var posValue = this.getProcessedPositionValue({\n top: (pos.top - this.diffY) + 'px',\n left: (pos.left - this.diffX) + 'px'\n });\n this.dragElePosition = { top: pos.top, left: pos.left };\n setStyleAttribute(dragTargetElement, this.getDragPosition({ position: 'absolute', left: posValue.left, top: posValue.top }));\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDragStart);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDestroy);\n if (!isBlazor()) {\n this.bindDragEvents(dragTargetElement);\n }\n }\n };\n Draggable.prototype.bindDragEvents = function (dragTargetElement) {\n if (isVisible(dragTargetElement)) {\n EventHandler.add(document, Browser.touchMoveEvent, this.intDrag, this);\n EventHandler.add(document, Browser.touchEndEvent, this.intDragStop, this);\n this.setGlobalDroppables(false, this.element, dragTargetElement);\n }\n else {\n this.toggleEvents();\n document.body.classList.remove('e-prevent-select');\n }\n };\n Draggable.prototype.elementInViewport = function (el) {\n this.top = el.offsetTop;\n this.left = el.offsetLeft;\n this.width = el.offsetWidth;\n this.height = el.offsetHeight;\n while (el.offsetParent) {\n el = el.offsetParent;\n this.top += el.offsetTop;\n this.left += el.offsetLeft;\n }\n return (this.top >= window.pageYOffset &&\n this.left >= window.pageXOffset &&\n (this.top + this.height) <= (window.pageYOffset + window.innerHeight) &&\n (this.left + this.width) <= (window.pageXOffset + window.innerWidth));\n };\n Draggable.prototype.getProcessedPositionValue = function (value) {\n if (this.queryPositionInfo) {\n return this.queryPositionInfo(value);\n }\n return value;\n };\n Draggable.prototype.calculateParentPosition = function (ele) {\n if (isNullOrUndefined(ele)) {\n return { left: 0, top: 0 };\n }\n var rect = ele.getBoundingClientRect();\n var style = getComputedStyle(ele);\n return {\n left: (rect.left + window.pageXOffset) - parseInt(style.marginLeft, 10),\n top: (rect.top + window.pageYOffset) - parseInt(style.marginTop, 10)\n };\n };\n // tslint:disable-next-line:max-func-body-length\n Draggable.prototype.intDrag = function (evt) {\n if (!isUndefined(evt.changedTouches) && (evt.changedTouches.length !== 1)) {\n return;\n }\n var left;\n var top;\n this.position = this.getMousePosition(evt, this.isDragScroll);\n var docHeight = this.getDocumentWidthHeight('Height');\n if (docHeight < this.position.top) {\n this.position.top = docHeight;\n }\n var docWidth = this.getDocumentWidthHeight('Width');\n if (docWidth < this.position.left) {\n this.position.left = docWidth;\n }\n if (this.drag) {\n var curTarget = this.getProperTargetElement(evt);\n this.trigger('drag', { event: evt, element: this.element, target: curTarget });\n }\n var eleObj = this.checkTargetElement(evt);\n if (eleObj.target && eleObj.instance) {\n /* tslint:disable no-any */\n var flag = true;\n if (this.hoverObject) {\n if (this.hoverObject.instance !== eleObj.instance) {\n this.triggerOutFunction(evt, eleObj);\n }\n else {\n flag = false;\n }\n }\n if (flag) {\n eleObj.instance.dragData[this.scope] = this.droppables[this.scope];\n eleObj.instance.intOver(evt, eleObj.target);\n this.hoverObject = eleObj;\n }\n }\n else if (this.hoverObject) {\n this.triggerOutFunction(evt, eleObj);\n }\n var helperElement = this.droppables[this.scope].helper;\n this.parentClientRect = this.calculateParentPosition(this.helperElement.offsetParent);\n var tLeft = this.parentClientRect.left;\n var tTop = this.parentClientRect.top;\n var intCoord = this.getCoordinates(evt);\n var pagex = intCoord.pageX;\n var pagey = intCoord.pageY;\n var dLeft = this.position.left - this.diffX;\n var dTop = this.position.top - this.diffY;\n if (this.dragArea) {\n var styles = getComputedStyle(helperElement);\n if (this.pageX !== pagex || this.skipDistanceCheck) {\n var helperWidth = helperElement.offsetWidth + (parseFloat(styles.marginLeft)\n + parseFloat(styles.marginRight));\n if (this.dragLimit.left > dLeft && dLeft > 0) {\n left = this.dragLimit.left;\n }\n else if (this.dragLimit.right + window.pageXOffset < dLeft + helperWidth && dLeft > 0) {\n left = dLeft - (dLeft - this.dragLimit.right) + window.pageXOffset - helperWidth;\n }\n else {\n left = dLeft < 0 ? this.dragLimit.left : dLeft;\n }\n }\n if (this.pageY !== pagey || this.skipDistanceCheck) {\n var helperHeight = helperElement.offsetHeight + (parseFloat(styles.marginTop)\n + parseFloat(styles.marginBottom));\n if (this.dragLimit.top > dTop && dTop > 0) {\n top = this.dragLimit.top;\n }\n else if (this.dragLimit.bottom + window.pageYOffset < dTop + helperHeight && dTop > 0) {\n top = dTop - (dTop - this.dragLimit.bottom) + window.pageYOffset - helperHeight;\n }\n else {\n top = dTop < 0 ? this.dragLimit.top : dTop;\n }\n }\n }\n else {\n left = dLeft;\n top = dTop;\n }\n var iTop = tTop + this.borderWidth.top;\n var iLeft = tLeft + this.borderWidth.left;\n if (this.dragProcessStarted) {\n if (isNullOrUndefined(top)) {\n top = this.prevTop;\n }\n if (isNullOrUndefined(left)) {\n left = this.prevLeft;\n }\n }\n var draEleTop;\n var draEleLeft;\n if (this.dragArea) {\n draEleTop = (top - iTop) < 0 ? this.dragLimit.top : (top - iTop);\n draEleLeft = (left - iLeft) < 0 ? this.dragElePosition.left : (left - iLeft);\n }\n else {\n draEleTop = top - iTop;\n draEleLeft = left - iLeft;\n if (!this.clone) {\n draEleTop -= this.parentScrollY;\n draEleLeft -= this.parentScrollX;\n }\n }\n var dragValue = this.getProcessedPositionValue({ top: draEleTop + 'px', left: draEleLeft + 'px' });\n setStyleAttribute(helperElement, this.getDragPosition(dragValue));\n if (!this.elementInViewport(helperElement) && this.enableAutoScroll) {\n this.helperElement.scrollIntoView();\n }\n this.dragProcessStarted = true;\n this.prevLeft = left;\n this.prevTop = top;\n this.position.left = left;\n this.position.top = top;\n this.pageX = pagex;\n this.pageY = pagey;\n };\n Draggable.prototype.triggerOutFunction = function (evt, eleObj) {\n this.hoverObject.instance.intOut(evt, eleObj.target);\n this.hoverObject.instance.dragData[this.scope] = null;\n this.hoverObject = null;\n };\n Draggable.prototype.getDragPosition = function (dragValue) {\n var temp = extend({}, dragValue);\n if (this.axis) {\n if (this.axis === 'x') {\n delete temp.top;\n }\n else if (this.axis === 'y') {\n delete temp.left;\n }\n }\n return temp;\n };\n Draggable.prototype.getDocumentWidthHeight = function (str) {\n var docBody = document.body;\n var docEle = document.documentElement;\n var returnValue = Math.max(docBody['scroll' + str], docEle['scroll' + str], docBody['offset' + str], docEle['offset' + str], docEle['client' + str]);\n return returnValue;\n };\n Draggable.prototype.intDragStop = function (evt) {\n this.dragProcessStarted = false;\n if (!isUndefined(evt.changedTouches) && (evt.changedTouches.length !== 1)) {\n return;\n }\n var type = ['touchend', 'pointerup', 'mouseup'];\n if (type.indexOf(evt.type) !== -1) {\n if (this.dragStop) {\n var curTarget = this.getProperTargetElement(evt);\n this.trigger('dragStop', { event: evt, element: this.element, target: curTarget, helper: this.helperElement });\n }\n this.intDestroy(evt);\n }\n else {\n this.element.setAttribute('aria-grabbed', 'false');\n }\n var eleObj = this.checkTargetElement(evt);\n if (eleObj.target && eleObj.instance) {\n eleObj.instance.dragStopCalled = true;\n eleObj.instance.dragData[this.scope] = this.droppables[this.scope];\n eleObj.instance.intDrop(evt, eleObj.target);\n }\n this.setGlobalDroppables(true);\n document.body.classList.remove('e-prevent-select');\n };\n /**\n * @private\n */\n Draggable.prototype.intDestroy = function (evt) {\n this.dragProcessStarted = false;\n this.toggleEvents();\n document.body.classList.remove('e-prevent-select');\n this.element.setAttribute('aria-grabbed', 'false');\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDragStart);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDragStop);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDestroy);\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDrag);\n if (this.isDragStarted()) {\n this.isDragStarted(true);\n }\n };\n // triggers when property changed\n Draggable.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Draggable.prototype.getModuleName = function () {\n return 'draggable';\n };\n Draggable.prototype.isDragStarted = function (change) {\n if (change) {\n isDraggedObject.isDragged = !isDraggedObject.isDragged;\n }\n return isDraggedObject.isDragged;\n };\n Draggable.prototype.setDragArea = function () {\n var eleWidthBound;\n var eleHeightBound;\n var top = 0;\n var left = 0;\n var ele;\n var type = typeof this.dragArea;\n if (type === 'string') {\n ele = select(this.dragArea);\n }\n else {\n ele = this.dragArea;\n }\n if (ele) {\n var elementArea = ele.getBoundingClientRect();\n eleWidthBound = ele.scrollWidth ? ele.scrollWidth : elementArea.right - elementArea.left;\n eleHeightBound = ele.scrollHeight ? ele.scrollHeight : elementArea.bottom - elementArea.top;\n var keys = ['Top', 'Left', 'Bottom', 'Right'];\n var styles = getComputedStyle(ele);\n for (var i = 0; i < keys.length; i++) {\n var key = keys[i];\n var tborder = styles['border' + key + 'Width'];\n var tpadding = styles['padding' + key];\n var lowerKey = key.toLowerCase();\n this.borderWidth[lowerKey] = isNaN(parseFloat(tborder)) ? 0 : parseFloat(tborder);\n this.padding[lowerKey] = isNaN(parseFloat(tpadding)) ? 0 : parseFloat(tpadding);\n }\n top = elementArea.top;\n left = elementArea.left;\n this.dragLimit.left = left + this.borderWidth.left + this.padding.left;\n this.dragLimit.top = ele.offsetTop + this.borderWidth.top + this.padding.top;\n this.dragLimit.right = left + eleWidthBound - (this.borderWidth.right + this.padding.right);\n this.dragLimit.bottom = top + eleHeightBound - (this.borderWidth.bottom + this.padding.bottom);\n }\n };\n Draggable.prototype.getProperTargetElement = function (evt) {\n var intCoord = this.getCoordinates(evt);\n var ele;\n var prevStyle = this.helperElement.style.pointerEvents || '';\n if (compareElementParent(evt.target, this.helperElement) || evt.type.indexOf('touch') !== -1) {\n this.helperElement.style.pointerEvents = 'none';\n ele = document.elementFromPoint(intCoord.clientX, intCoord.clientY);\n this.helperElement.style.pointerEvents = prevStyle;\n }\n else {\n ele = evt.target;\n }\n return ele;\n };\n /* istanbul ignore next */\n Draggable.prototype.currentStateCheck = function (ele, oldEle) {\n var elem;\n if (!isNullOrUndefined(this.currentStateTarget) && this.currentStateTarget !== ele) {\n elem = this.currentStateTarget;\n }\n else {\n elem = !isNullOrUndefined(oldEle) ? oldEle : ele;\n }\n return elem;\n };\n Draggable.prototype.getMousePosition = function (evt, isdragscroll) {\n /* tslint:disable no-any */\n var dragEle = evt.srcElement !== undefined ? evt.srcElement : evt.target;\n var intCoord = this.getCoordinates(evt);\n var pageX;\n var pageY;\n var isOffsetParent = isNullOrUndefined(dragEle.offsetParent);\n /* istanbul ignore next */\n if (isdragscroll) {\n pageX = this.clone ? intCoord.pageX :\n (intCoord.pageX + (isOffsetParent ? 0 : dragEle.offsetParent.scrollLeft)) - this.relativeXPosition;\n pageY = this.clone ? intCoord.pageY :\n (intCoord.pageY + (isOffsetParent ? 0 : dragEle.offsetParent.scrollTop)) - this.relativeYPosition;\n }\n else {\n pageX = this.clone ? intCoord.pageX : (intCoord.pageX + window.pageXOffset) - this.relativeXPosition;\n pageY = this.clone ? intCoord.pageY : (intCoord.pageY + window.pageYOffset) - this.relativeYPosition;\n }\n return {\n left: pageX - (this.margin.left + this.cursorAt.left),\n top: pageY - (this.margin.top + this.cursorAt.top)\n };\n };\n Draggable.prototype.getCoordinates = function (evt) {\n if (evt.type.indexOf('touch') > -1) {\n return evt.changedTouches[0];\n }\n return evt;\n };\n Draggable.prototype.getHelperElement = function (evt) {\n var element;\n if (this.clone) {\n if (this.helper) {\n element = this.helper({ sender: evt, element: this.target });\n }\n else {\n element = createElement('div', { className: 'e-drag-helper e-block-touch', innerHTML: 'Draggable' });\n document.body.appendChild(element);\n }\n }\n else {\n element = this.element;\n }\n return element;\n };\n Draggable.prototype.setGlobalDroppables = function (reset, drag, helper) {\n this.droppables[this.scope] = reset ? null : {\n draggable: drag,\n helper: helper,\n draggedElement: this.element\n };\n };\n Draggable.prototype.checkTargetElement = function (evt) {\n var target = this.getProperTargetElement(evt);\n var dropIns = this.getDropInstance(target);\n if (!dropIns && target && !isNullOrUndefined(target.parentNode)) {\n var parent_1 = closest(target.parentNode, '.e-droppable') || target.parentElement;\n if (parent_1) {\n dropIns = this.getDropInstance(parent_1);\n }\n }\n return { target: target, instance: dropIns };\n };\n Draggable.prototype.getDropInstance = function (ele) {\n var name = 'getModuleName';\n var drop;\n var eleInst = ele && ele.ej2_instances;\n if (eleInst) {\n for (var _i = 0, eleInst_1 = eleInst; _i < eleInst_1.length; _i++) {\n var inst = eleInst_1[_i];\n if (inst[name]() === 'droppable') {\n drop = inst;\n break;\n }\n }\n }\n return drop;\n };\n Draggable.prototype.destroy = function () {\n this.toggleEvents(true);\n _super.prototype.destroy.call(this);\n };\n var Draggable_1;\n __decorate([\n Complex({}, Position)\n ], Draggable.prototype, \"cursorAt\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"clone\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"dragArea\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"isDragScroll\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"isReplaceDragEle\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"isPreventSelect\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"drag\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"dragStart\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"dragStop\", void 0);\n __decorate([\n Property(1)\n ], Draggable.prototype, \"distance\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"handle\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"abort\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"helper\", void 0);\n __decorate([\n Property('default')\n ], Draggable.prototype, \"scope\", void 0);\n __decorate([\n Property('')\n ], Draggable.prototype, \"dragTarget\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"axis\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"queryPositionInfo\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableTailMode\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"skipDistanceCheck\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"preventDefault\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableAutoScroll\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableTapHold\", void 0);\n __decorate([\n Property(750)\n ], Draggable.prototype, \"tapHoldThreshold\", void 0);\n Draggable = Draggable_1 = __decorate([\n NotifyPropertyChanges\n ], Draggable);\n return Draggable;\n}(Base));\nexport { Draggable };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Base } from './base';\nimport { Browser } from './browser';\nimport { isVisible, matches } from './dom';\nimport { Property, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { EventHandler } from './event-handler';\nimport { compareElementParent } from './util';\n/**\n * Droppable Module provides support to enable droppable functionality in Dom Elements.\n * ```html\n * Droppable
\n * \n * ```\n */\nvar Droppable = /** @class */ (function (_super) {\n __extends(Droppable, _super);\n function Droppable(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.mouseOver = false;\n _this.dragData = {};\n _this.dragStopCalled = false;\n _this.bind();\n return _this;\n }\n Droppable.prototype.bind = function () {\n this.wireEvents();\n };\n Droppable.prototype.wireEvents = function () {\n EventHandler.add(this.element, Browser.touchEndEvent, this.intDrop, this);\n };\n // triggers when property changed\n Droppable.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Droppable.prototype.getModuleName = function () {\n return 'droppable';\n };\n Droppable.prototype.intOver = function (event, element) {\n if (!this.mouseOver) {\n var drag = this.dragData[this.scope];\n this.trigger('over', { event: event, target: element, dragData: drag });\n this.mouseOver = true;\n }\n };\n Droppable.prototype.intOut = function (event, element) {\n if (this.mouseOver) {\n this.trigger('out', { evt: event, target: element });\n this.mouseOver = false;\n }\n };\n Droppable.prototype.intDrop = function (evt, element) {\n if (!this.dragStopCalled) {\n return;\n }\n else {\n this.dragStopCalled = false;\n }\n var accept = true;\n var drag = this.dragData[this.scope];\n var isDrag = drag ? (drag.helper && isVisible(drag.helper)) : false;\n var area;\n if (isDrag) {\n area = this.isDropArea(evt, drag.helper, element);\n if (this.accept) {\n accept = matches(drag.helper, this.accept);\n }\n }\n if (isDrag && this.drop && area.canDrop && accept) {\n this.trigger('drop', { event: evt, target: area.target, droppedElement: drag.helper, dragData: drag });\n }\n this.mouseOver = false;\n };\n Droppable.prototype.isDropArea = function (evt, helper, element) {\n var area = { canDrop: true, target: element || evt.target };\n var isTouch = evt.type === 'touchend';\n if (isTouch || area.target === helper) {\n helper.style.display = 'none';\n var coord = isTouch ? (evt.changedTouches[0]) : evt;\n var ele = document.elementFromPoint(coord.clientX, coord.clientY);\n area.canDrop = false;\n area.canDrop = compareElementParent(ele, this.element);\n if (area.canDrop) {\n area.target = ele;\n }\n helper.style.display = '';\n }\n return area;\n };\n Droppable.prototype.destroy = function () {\n EventHandler.remove(this.element, Browser.touchEndEvent, this.intDrop);\n _super.prototype.destroy.call(this);\n };\n __decorate([\n Property()\n ], Droppable.prototype, \"accept\", void 0);\n __decorate([\n Property('default')\n ], Droppable.prototype, \"scope\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"drop\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"over\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"out\", void 0);\n Droppable = __decorate([\n NotifyPropertyChanges\n ], Droppable);\n return Droppable;\n}(Base));\nexport { Droppable };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { Base } from './base';\nvar keyCode = {\n 'backspace': 8,\n 'tab': 9,\n 'enter': 13,\n 'shift': 16,\n 'control': 17,\n 'alt': 18,\n 'pause': 19,\n 'capslock': 20,\n 'space': 32,\n 'escape': 27,\n 'pageup': 33,\n 'pagedown': 34,\n 'end': 35,\n 'home': 36,\n 'leftarrow': 37,\n 'uparrow': 38,\n 'rightarrow': 39,\n 'downarrow': 40,\n 'insert': 45,\n 'delete': 46,\n 'f1': 112,\n 'f2': 113,\n 'f3': 114,\n 'f4': 115,\n 'f5': 116,\n 'f6': 117,\n 'f7': 118,\n 'f8': 119,\n 'f9': 120,\n 'f10': 121,\n 'f11': 122,\n 'f12': 123,\n 'semicolon': 186,\n 'plus': 187,\n 'comma': 188,\n 'minus': 189,\n 'dot': 190,\n 'forwardslash': 191,\n 'graveaccent': 192,\n 'openbracket': 219,\n 'backslash': 220,\n 'closebracket': 221,\n 'singlequote': 222\n};\n/**\n * KeyboardEvents class enables you to bind key action desired key combinations for ex., Ctrl+A, Delete, Alt+Space etc.\n * ```html\n * \n \n
\n )\n}\n","import React from 'react'\nimport styles from './ChatSection.module.css'\n\nexport default function ChatSection({ companyName, message }) {\n const time = new Date().toTimeString().split(`:`).slice(0, 2).join(`:`)\n\n return (\n \n
\n \n {companyName}\n {textReplyTime}\n
\n \n
\n )\n}\n","import React, { useState } from 'react'\nimport styles from './SendButton.module.css'\n\nexport default function SendButton({ sendButton, phoneNumber, placeholder }) {\n const [message, setMessage] = useState('')\n\n const handleSend = () => {\n if (!phoneNumber) {\n window.alert('Invalid Phone Number')\n return false\n }\n window.open(`https://wa.me/${phoneNumber}?text=${message}`)\n setMessage('')\n }\n\n const handleChange = (e) => {\n setMessage(e.target.value)\n }\n\n return (\n \n \n {companyName}\n
\n {message}
\n {time}\n\n
\n )\n}\n","import React, { useContext } from 'react'\nimport styles from './App.module.css'\nimport WidgetContext from '../context/widgetContext'\n\nimport Header from './Header'\nimport ChatSection from './ChatSection'\nimport SendButton from './SendButton'\n\nexport default function App(props) {\n const { isOpen, handleOpen } = useContext(WidgetContext)\n\n return (\n \n
\n )\n}\n","import React, { useContext } from 'react'\nimport { FaWhatsapp } from 'react-icons/fa'\nimport styles from './WhatsAppButton.module.css'\nimport WidgetContext from '../context/widgetContext'\n\nexport default function WhatsAppButton() {\n const { handleOpen } = useContext(WidgetContext)\n\n return (\n \n
\n )\n}\n","import React from 'react'\nimport App from './components/App'\nimport WhatsAppButton from './components/WhatsAppButton'\nimport { WidgetContextProvider } from './context/widgetContext'\nimport styles from './index.module.css'\n\nexport default function WhatsAppWidget({\n textReplyTime = 'Typically replies within a day',\n message = `Hello! 👋🏼 \\n\\nWhat can we do for you?`,\n companyName = 'Support',\n sendButton = 'Send',\n placeholder = 'Type a message',\n phoneNumber\n}) {\n return (\n \n \n \n
\n )\n}\n","/** @license React v16.14.0\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';var l=require(\"object-assign\"),n=\"function\"===typeof Symbol&&Symbol.for,p=n?Symbol.for(\"react.element\"):60103,q=n?Symbol.for(\"react.portal\"):60106,r=n?Symbol.for(\"react.fragment\"):60107,t=n?Symbol.for(\"react.strict_mode\"):60108,u=n?Symbol.for(\"react.profiler\"):60114,v=n?Symbol.for(\"react.provider\"):60109,w=n?Symbol.for(\"react.context\"):60110,x=n?Symbol.for(\"react.forward_ref\"):60112,y=n?Symbol.for(\"react.suspense\"):60113,z=n?Symbol.for(\"react.memo\"):60115,A=n?Symbol.for(\"react.lazy\"):\n60116,B=\"function\"===typeof Symbol&&Symbol.iterator;function C(a){for(var b=\"https://reactjs.org/docs/error-decoder.html?invariant=\"+a,c=1;cHello World
;\n * }\n * });\n *\n * The class specification supports a specific protocol of methods that have\n * special meaning (e.g. `render`). See `ReactClassInterface` for\n * more the comprehensive protocol. Any other properties and methods in the\n * class specification will be available on the prototype.\n *\n * @interface ReactClassInterface\n * @internal\n */\n var ReactClassInterface = {\n /**\n * An array of Mixin objects to include when defining your component.\n *\n * @type {array}\n * @optional\n */\n mixins: 'DEFINE_MANY',\n\n /**\n * An object containing properties and methods that should be defined on\n * the component's constructor instead of its prototype (static methods).\n *\n * @type {object}\n * @optional\n */\n statics: 'DEFINE_MANY',\n\n /**\n * Definition of prop types for this component.\n *\n * @type {object}\n * @optional\n */\n propTypes: 'DEFINE_MANY',\n\n /**\n * Definition of context types for this component.\n *\n * @type {object}\n * @optional\n */\n contextTypes: 'DEFINE_MANY',\n\n /**\n * Definition of context types this component sets for its children.\n *\n * @type {object}\n * @optional\n */\n childContextTypes: 'DEFINE_MANY',\n\n // ==== Definition methods ====\n\n /**\n * Invoked when the component is mounted. Values in the mapping will be set on\n * `this.props` if that prop is not specified (i.e. using an `in` check).\n *\n * This method is invoked before `getInitialState` and therefore cannot rely\n * on `this.state` or use `this.setState`.\n *\n * @return {object}\n * @optional\n */\n getDefaultProps: 'DEFINE_MANY_MERGED',\n\n /**\n * Invoked once before the component is mounted. The return value will be used\n * as the initial value of `this.state`.\n *\n * getInitialState: function() {\n * return {\n * isOn: false,\n * fooBaz: new BazFoo()\n * }\n * }\n *\n * @return {object}\n * @optional\n */\n getInitialState: 'DEFINE_MANY_MERGED',\n\n /**\n * @return {object}\n * @optional\n */\n getChildContext: 'DEFINE_MANY_MERGED',\n\n /**\n * Uses props from `this.props` and state from `this.state` to render the\n * structure of the component.\n *\n * No guarantees are made about when or how often this method is invoked, so\n * it must not have side effects.\n *\n * render: function() {\n * var name = this.props.name;\n * return Hello, {name}!
;\n * }\n *\n * @return {ReactComponent}\n * @required\n */\n render: 'DEFINE_ONCE',\n\n // ==== Delegate methods ====\n\n /**\n * Invoked when the component is initially created and about to be mounted.\n * This may have side effects, but any external subscriptions or data created\n * by this method must be cleaned up in `componentWillUnmount`.\n *\n * @optional\n */\n componentWillMount: 'DEFINE_MANY',\n\n /**\n * Invoked when the component has been mounted and has a DOM representation.\n * However, there is no guarantee that the DOM node is in the document.\n *\n * Use this as an opportunity to operate on the DOM when the component has\n * been mounted (initialized and rendered) for the first time.\n *\n * @param {DOMElement} rootNode DOM element representing the component.\n * @optional\n */\n componentDidMount: 'DEFINE_MANY',\n\n /**\n * Invoked before the component receives new props.\n *\n * Use this as an opportunity to react to a prop transition by updating the\n * state using `this.setState`. Current props are accessed via `this.props`.\n *\n * componentWillReceiveProps: function(nextProps, nextContext) {\n * this.setState({\n * likesIncreasing: nextProps.likeCount > this.props.likeCount\n * });\n * }\n *\n * NOTE: There is no equivalent `componentWillReceiveState`. An incoming prop\n * transition may cause a state change, but the opposite is not true. If you\n * need it, you are probably looking for `componentWillUpdate`.\n *\n * @param {object} nextProps\n * @optional\n */\n componentWillReceiveProps: 'DEFINE_MANY',\n\n /**\n * Invoked while deciding if the component should be updated as a result of\n * receiving new props, state and/or context.\n *\n * Use this as an opportunity to `return false` when you're certain that the\n * transition to the new props/state/context will not require a component\n * update.\n *\n * shouldComponentUpdate: function(nextProps, nextState, nextContext) {\n * return !equal(nextProps, this.props) ||\n * !equal(nextState, this.state) ||\n * !equal(nextContext, this.context);\n * }\n *\n * @param {object} nextProps\n * @param {?object} nextState\n * @param {?object} nextContext\n * @return {boolean} True if the component should update.\n * @optional\n */\n shouldComponentUpdate: 'DEFINE_ONCE',\n\n /**\n * Invoked when the component is about to update due to a transition from\n * `this.props`, `this.state` and `this.context` to `nextProps`, `nextState`\n * and `nextContext`.\n *\n * Use this as an opportunity to perform preparation before an update occurs.\n *\n * NOTE: You **cannot** use `this.setState()` in this method.\n *\n * @param {object} nextProps\n * @param {?object} nextState\n * @param {?object} nextContext\n * @param {ReactReconcileTransaction} transaction\n * @optional\n */\n componentWillUpdate: 'DEFINE_MANY',\n\n /**\n * Invoked when the component's DOM representation has been updated.\n *\n * Use this as an opportunity to operate on the DOM when the component has\n * been updated.\n *\n * @param {object} prevProps\n * @param {?object} prevState\n * @param {?object} prevContext\n * @param {DOMElement} rootNode DOM element representing the component.\n * @optional\n */\n componentDidUpdate: 'DEFINE_MANY',\n\n /**\n * Invoked when the component is about to be removed from its parent and have\n * its DOM representation destroyed.\n *\n * Use this as an opportunity to deallocate any external resources.\n *\n * NOTE: There is no `componentDidUnmount` since your component will have been\n * destroyed by that point.\n *\n * @optional\n */\n componentWillUnmount: 'DEFINE_MANY',\n\n /**\n * Replacement for (deprecated) `componentWillMount`.\n *\n * @optional\n */\n UNSAFE_componentWillMount: 'DEFINE_MANY',\n\n /**\n * Replacement for (deprecated) `componentWillReceiveProps`.\n *\n * @optional\n */\n UNSAFE_componentWillReceiveProps: 'DEFINE_MANY',\n\n /**\n * Replacement for (deprecated) `componentWillUpdate`.\n *\n * @optional\n */\n UNSAFE_componentWillUpdate: 'DEFINE_MANY',\n\n // ==== Advanced methods ====\n\n /**\n * Updates the component's currently mounted DOM representation.\n *\n * By default, this implements React's rendering and reconciliation algorithm.\n * Sophisticated clients may wish to override this.\n *\n * @param {ReactReconcileTransaction} transaction\n * @internal\n * @overridable\n */\n updateComponent: 'OVERRIDE_BASE'\n };\n\n /**\n * Similar to ReactClassInterface but for static methods.\n */\n var ReactClassStaticInterface = {\n /**\n * This method is invoked after a component is instantiated and when it\n * receives new props. Return an object to update state in response to\n * prop changes. Return null to indicate no change to state.\n *\n * If an object is returned, its keys will be merged into the existing state.\n *\n * @return {object || null}\n * @optional\n */\n getDerivedStateFromProps: 'DEFINE_MANY_MERGED'\n };\n\n /**\n * Mapping from class specification keys to special processing functions.\n *\n * Although these are declared like instance properties in the specification\n * when defining classes using `React.createClass`, they are actually static\n * and are accessible on the constructor instead of the prototype. Despite\n * being static, they must be defined outside of the \"statics\" key under\n * which all other static methods are defined.\n */\n var RESERVED_SPEC_KEYS = {\n displayName: function(Constructor, displayName) {\n Constructor.displayName = displayName;\n },\n mixins: function(Constructor, mixins) {\n if (mixins) {\n for (var i = 0; i < mixins.length; i++) {\n mixSpecIntoComponent(Constructor, mixins[i]);\n }\n }\n },\n childContextTypes: function(Constructor, childContextTypes) {\n if (process.env.NODE_ENV !== 'production') {\n validateTypeDef(Constructor, childContextTypes, 'childContext');\n }\n Constructor.childContextTypes = _assign(\n {},\n Constructor.childContextTypes,\n childContextTypes\n );\n },\n contextTypes: function(Constructor, contextTypes) {\n if (process.env.NODE_ENV !== 'production') {\n validateTypeDef(Constructor, contextTypes, 'context');\n }\n Constructor.contextTypes = _assign(\n {},\n Constructor.contextTypes,\n contextTypes\n );\n },\n /**\n * Special case getDefaultProps which should move into statics but requires\n * automatic merging.\n */\n getDefaultProps: function(Constructor, getDefaultProps) {\n if (Constructor.getDefaultProps) {\n Constructor.getDefaultProps = createMergedResultFunction(\n Constructor.getDefaultProps,\n getDefaultProps\n );\n } else {\n Constructor.getDefaultProps = getDefaultProps;\n }\n },\n propTypes: function(Constructor, propTypes) {\n if (process.env.NODE_ENV !== 'production') {\n validateTypeDef(Constructor, propTypes, 'prop');\n }\n Constructor.propTypes = _assign({}, Constructor.propTypes, propTypes);\n },\n statics: function(Constructor, statics) {\n mixStaticSpecIntoComponent(Constructor, statics);\n },\n autobind: function() {}\n };\n\n function validateTypeDef(Constructor, typeDef, location) {\n for (var propName in typeDef) {\n if (typeDef.hasOwnProperty(propName)) {\n // use a warning instead of an _invariant so components\n // don't show up in prod but only in __DEV__\n if (process.env.NODE_ENV !== 'production') {\n warning(\n typeof typeDef[propName] === 'function',\n '%s: %s type `%s` is invalid; it must be a function, usually from ' +\n 'React.PropTypes.',\n Constructor.displayName || 'ReactClass',\n ReactPropTypeLocationNames[location],\n propName\n );\n }\n }\n }\n }\n\n function validateMethodOverride(isAlreadyDefined, name) {\n var specPolicy = ReactClassInterface.hasOwnProperty(name)\n ? ReactClassInterface[name]\n : null;\n\n // Disallow overriding of base class methods unless explicitly allowed.\n if (ReactClassMixin.hasOwnProperty(name)) {\n _invariant(\n specPolicy === 'OVERRIDE_BASE',\n 'ReactClassInterface: You are attempting to override ' +\n '`%s` from your class specification. Ensure that your method names ' +\n 'do not overlap with React methods.',\n name\n );\n }\n\n // Disallow defining methods more than once unless explicitly allowed.\n if (isAlreadyDefined) {\n _invariant(\n specPolicy === 'DEFINE_MANY' || specPolicy === 'DEFINE_MANY_MERGED',\n 'ReactClassInterface: You are attempting to define ' +\n '`%s` on your component more than once. This conflict may be due ' +\n 'to a mixin.',\n name\n );\n }\n }\n\n /**\n * Mixin helper which handles policy validation and reserved\n * specification keys when building React classes.\n */\n function mixSpecIntoComponent(Constructor, spec) {\n if (!spec) {\n if (process.env.NODE_ENV !== 'production') {\n var typeofSpec = typeof spec;\n var isMixinValid = typeofSpec === 'object' && spec !== null;\n\n if (process.env.NODE_ENV !== 'production') {\n warning(\n isMixinValid,\n \"%s: You're attempting to include a mixin that is either null \" +\n 'or not an object. Check the mixins included by the component, ' +\n 'as well as any mixins they include themselves. ' +\n 'Expected object but got %s.',\n Constructor.displayName || 'ReactClass',\n spec === null ? null : typeofSpec\n );\n }\n }\n\n return;\n }\n\n _invariant(\n typeof spec !== 'function',\n \"ReactClass: You're attempting to \" +\n 'use a component class or function as a mixin. Instead, just use a ' +\n 'regular object.'\n );\n _invariant(\n !isValidElement(spec),\n \"ReactClass: You're attempting to \" +\n 'use a component as a mixin. Instead, just use a regular object.'\n );\n\n var proto = Constructor.prototype;\n var autoBindPairs = proto.__reactAutoBindPairs;\n\n // By handling mixins before any other properties, we ensure the same\n // chaining order is applied to methods with DEFINE_MANY policy, whether\n // mixins are listed before or after these methods in the spec.\n if (spec.hasOwnProperty(MIXINS_KEY)) {\n RESERVED_SPEC_KEYS.mixins(Constructor, spec.mixins);\n }\n\n for (var name in spec) {\n if (!spec.hasOwnProperty(name)) {\n continue;\n }\n\n if (name === MIXINS_KEY) {\n // We have already handled mixins in a special case above.\n continue;\n }\n\n var property = spec[name];\n var isAlreadyDefined = proto.hasOwnProperty(name);\n validateMethodOverride(isAlreadyDefined, name);\n\n if (RESERVED_SPEC_KEYS.hasOwnProperty(name)) {\n RESERVED_SPEC_KEYS[name](Constructor, property);\n } else {\n // Setup methods on prototype:\n // The following member methods should not be automatically bound:\n // 1. Expected ReactClass methods (in the \"interface\").\n // 2. Overridden methods (that were mixed in).\n var isReactClassMethod = ReactClassInterface.hasOwnProperty(name);\n var isFunction = typeof property === 'function';\n var shouldAutoBind =\n isFunction &&\n !isReactClassMethod &&\n !isAlreadyDefined &&\n spec.autobind !== false;\n\n if (shouldAutoBind) {\n autoBindPairs.push(name, property);\n proto[name] = property;\n } else {\n if (isAlreadyDefined) {\n var specPolicy = ReactClassInterface[name];\n\n // These cases should already be caught by validateMethodOverride.\n _invariant(\n isReactClassMethod &&\n (specPolicy === 'DEFINE_MANY_MERGED' ||\n specPolicy === 'DEFINE_MANY'),\n 'ReactClass: Unexpected spec policy %s for key %s ' +\n 'when mixing in component specs.',\n specPolicy,\n name\n );\n\n // For methods which are defined more than once, call the existing\n // methods before calling the new property, merging if appropriate.\n if (specPolicy === 'DEFINE_MANY_MERGED') {\n proto[name] = createMergedResultFunction(proto[name], property);\n } else if (specPolicy === 'DEFINE_MANY') {\n proto[name] = createChainedFunction(proto[name], property);\n }\n } else {\n proto[name] = property;\n if (process.env.NODE_ENV !== 'production') {\n // Add verbose displayName to the function, which helps when looking\n // at profiling tools.\n if (typeof property === 'function' && spec.displayName) {\n proto[name].displayName = spec.displayName + '_' + name;\n }\n }\n }\n }\n }\n }\n }\n\n function mixStaticSpecIntoComponent(Constructor, statics) {\n if (!statics) {\n return;\n }\n\n for (var name in statics) {\n var property = statics[name];\n if (!statics.hasOwnProperty(name)) {\n continue;\n }\n\n var isReserved = name in RESERVED_SPEC_KEYS;\n _invariant(\n !isReserved,\n 'ReactClass: You are attempting to define a reserved ' +\n 'property, `%s`, that shouldn\\'t be on the \"statics\" key. Define it ' +\n 'as an instance property instead; it will still be accessible on the ' +\n 'constructor.',\n name\n );\n\n var isAlreadyDefined = name in Constructor;\n if (isAlreadyDefined) {\n var specPolicy = ReactClassStaticInterface.hasOwnProperty(name)\n ? ReactClassStaticInterface[name]\n : null;\n\n _invariant(\n specPolicy === 'DEFINE_MANY_MERGED',\n 'ReactClass: You are attempting to define ' +\n '`%s` on your component more than once. This conflict may be ' +\n 'due to a mixin.',\n name\n );\n\n Constructor[name] = createMergedResultFunction(Constructor[name], property);\n\n return;\n }\n\n Constructor[name] = property;\n }\n }\n\n /**\n * Merge two objects, but throw if both contain the same key.\n *\n * @param {object} one The first object, which is mutated.\n * @param {object} two The second object\n * @return {object} one after it has been mutated to contain everything in two.\n */\n function mergeIntoWithNoDuplicateKeys(one, two) {\n _invariant(\n one && two && typeof one === 'object' && typeof two === 'object',\n 'mergeIntoWithNoDuplicateKeys(): Cannot merge non-objects.'\n );\n\n for (var key in two) {\n if (two.hasOwnProperty(key)) {\n _invariant(\n one[key] === undefined,\n 'mergeIntoWithNoDuplicateKeys(): ' +\n 'Tried to merge two objects with the same key: `%s`. This conflict ' +\n 'may be due to a mixin; in particular, this may be caused by two ' +\n 'getInitialState() or getDefaultProps() methods returning objects ' +\n 'with clashing keys.',\n key\n );\n one[key] = two[key];\n }\n }\n return one;\n }\n\n /**\n * Creates a function that invokes two functions and merges their return values.\n *\n * @param {function} one Function to invoke first.\n * @param {function} two Function to invoke second.\n * @return {function} Function that invokes the two argument functions.\n * @private\n */\n function createMergedResultFunction(one, two) {\n return function mergedResult() {\n var a = one.apply(this, arguments);\n var b = two.apply(this, arguments);\n if (a == null) {\n return b;\n } else if (b == null) {\n return a;\n }\n var c = {};\n mergeIntoWithNoDuplicateKeys(c, a);\n mergeIntoWithNoDuplicateKeys(c, b);\n return c;\n };\n }\n\n /**\n * Creates a function that invokes two functions and ignores their return vales.\n *\n * @param {function} one Function to invoke first.\n * @param {function} two Function to invoke second.\n * @return {function} Function that invokes the two argument functions.\n * @private\n */\n function createChainedFunction(one, two) {\n return function chainedFunction() {\n one.apply(this, arguments);\n two.apply(this, arguments);\n };\n }\n\n /**\n * Binds a method to the component.\n *\n * @param {object} component Component whose method is going to be bound.\n * @param {function} method Method to be bound.\n * @return {function} The bound method.\n */\n function bindAutoBindMethod(component, method) {\n var boundMethod = method.bind(component);\n if (process.env.NODE_ENV !== 'production') {\n boundMethod.__reactBoundContext = component;\n boundMethod.__reactBoundMethod = method;\n boundMethod.__reactBoundArguments = null;\n var componentName = component.constructor.displayName;\n var _bind = boundMethod.bind;\n boundMethod.bind = function(newThis) {\n for (\n var _len = arguments.length,\n args = Array(_len > 1 ? _len - 1 : 0),\n _key = 1;\n _key < _len;\n _key++\n ) {\n args[_key - 1] = arguments[_key];\n }\n\n // User is trying to bind() an autobound method; we effectively will\n // ignore the value of \"this\" that the user is trying to use, so\n // let's warn.\n if (newThis !== component && newThis !== null) {\n if (process.env.NODE_ENV !== 'production') {\n warning(\n false,\n 'bind(): React component methods may only be bound to the ' +\n 'component instance. See %s',\n componentName\n );\n }\n } else if (!args.length) {\n if (process.env.NODE_ENV !== 'production') {\n warning(\n false,\n 'bind(): You are binding a component method to the component. ' +\n 'React does this for you automatically in a high-performance ' +\n 'way, so you can safely remove this call. See %s',\n componentName\n );\n }\n return boundMethod;\n }\n var reboundMethod = _bind.apply(boundMethod, arguments);\n reboundMethod.__reactBoundContext = component;\n reboundMethod.__reactBoundMethod = method;\n reboundMethod.__reactBoundArguments = args;\n return reboundMethod;\n };\n }\n return boundMethod;\n }\n\n /**\n * Binds all auto-bound methods in a component.\n *\n * @param {object} component Component whose method is going to be bound.\n */\n function bindAutoBindMethods(component) {\n var pairs = component.__reactAutoBindPairs;\n for (var i = 0; i < pairs.length; i += 2) {\n var autoBindKey = pairs[i];\n var method = pairs[i + 1];\n component[autoBindKey] = bindAutoBindMethod(component, method);\n }\n }\n\n var IsMountedPreMixin = {\n componentDidMount: function() {\n this.__isMounted = true;\n }\n };\n\n var IsMountedPostMixin = {\n componentWillUnmount: function() {\n this.__isMounted = false;\n }\n };\n\n /**\n * Add more to the ReactClass base class. These are all legacy features and\n * therefore not already part of the modern ReactComponent.\n */\n var ReactClassMixin = {\n /**\n * TODO: This will be deprecated because state should always keep a consistent\n * type signature and the only use case for this, is to avoid that.\n */\n replaceState: function(newState, callback) {\n this.updater.enqueueReplaceState(this, newState, callback);\n },\n\n /**\n * Checks whether or not this composite component is mounted.\n * @return {boolean} True if mounted, false otherwise.\n * @protected\n * @final\n */\n isMounted: function() {\n if (process.env.NODE_ENV !== 'production') {\n warning(\n this.__didWarnIsMounted,\n '%s: isMounted is deprecated. Instead, make sure to clean up ' +\n 'subscriptions and pending requests in componentWillUnmount to ' +\n 'prevent memory leaks.',\n (this.constructor && this.constructor.displayName) ||\n this.name ||\n 'Component'\n );\n this.__didWarnIsMounted = true;\n }\n return !!this.__isMounted;\n }\n };\n\n var ReactClassComponent = function() {};\n _assign(\n ReactClassComponent.prototype,\n ReactComponent.prototype,\n ReactClassMixin\n );\n\n /**\n * Creates a composite component class given a class specification.\n * See https://facebook.github.io/react/docs/top-level-api.html#react.createclass\n *\n * @param {object} spec Class specification (which must define `render`).\n * @return {function} Component constructor function.\n * @public\n */\n function createClass(spec) {\n // To keep our warnings more understandable, we'll use a little hack here to\n // ensure that Constructor.name !== 'Constructor'. This makes sure we don't\n // unnecessarily identify a class without displayName as 'Constructor'.\n var Constructor = identity(function(props, context, updater) {\n // This constructor gets overridden by mocks. The argument is used\n // by mocks to assert on what gets mounted.\n\n if (process.env.NODE_ENV !== 'production') {\n warning(\n this instanceof Constructor,\n 'Something is calling a React component directly. Use a factory or ' +\n 'JSX instead. See: https://fb.me/react-legacyfactory'\n );\n }\n\n // Wire up auto-binding\n if (this.__reactAutoBindPairs.length) {\n bindAutoBindMethods(this);\n }\n\n this.props = props;\n this.context = context;\n this.refs = emptyObject;\n this.updater = updater || ReactNoopUpdateQueue;\n\n this.state = null;\n\n // ReactClasses doesn't have constructors. Instead, they use the\n // getInitialState and componentWillMount methods for initialization.\n\n var initialState = this.getInitialState ? this.getInitialState() : null;\n if (process.env.NODE_ENV !== 'production') {\n // We allow auto-mocks to proceed as if they're returning null.\n if (\n initialState === undefined &&\n this.getInitialState._isMockFunction\n ) {\n // This is probably bad practice. Consider warning here and\n // deprecating this convenience.\n initialState = null;\n }\n }\n _invariant(\n typeof initialState === 'object' && !Array.isArray(initialState),\n '%s.getInitialState(): must return an object or null',\n Constructor.displayName || 'ReactCompositeComponent'\n );\n\n this.state = initialState;\n });\n Constructor.prototype = new ReactClassComponent();\n Constructor.prototype.constructor = Constructor;\n Constructor.prototype.__reactAutoBindPairs = [];\n\n injectedMixins.forEach(mixSpecIntoComponent.bind(null, Constructor));\n\n mixSpecIntoComponent(Constructor, IsMountedPreMixin);\n mixSpecIntoComponent(Constructor, spec);\n mixSpecIntoComponent(Constructor, IsMountedPostMixin);\n\n // Initialize the defaultProps property after all mixins have been merged.\n if (Constructor.getDefaultProps) {\n Constructor.defaultProps = Constructor.getDefaultProps();\n }\n\n if (process.env.NODE_ENV !== 'production') {\n // This is a tag to indicate that the use of these method names is ok,\n // since it's used with createClass. If it's not, then it's likely a\n // mistake so we'll warn you to use the static property, property\n // initializer or constructor respectively.\n if (Constructor.getDefaultProps) {\n Constructor.getDefaultProps.isReactClassApproved = {};\n }\n if (Constructor.prototype.getInitialState) {\n Constructor.prototype.getInitialState.isReactClassApproved = {};\n }\n }\n\n _invariant(\n Constructor.prototype.render,\n 'createClass(...): Class specification must implement a `render` method.'\n );\n\n if (process.env.NODE_ENV !== 'production') {\n warning(\n !Constructor.prototype.componentShouldUpdate,\n '%s has a method called ' +\n 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' +\n 'The name is phrased as a question because the function is ' +\n 'expected to return a value.',\n spec.displayName || 'A component'\n );\n warning(\n !Constructor.prototype.componentWillRecieveProps,\n '%s has a method called ' +\n 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?',\n spec.displayName || 'A component'\n );\n warning(\n !Constructor.prototype.UNSAFE_componentWillRecieveProps,\n '%s has a method called UNSAFE_componentWillRecieveProps(). ' +\n 'Did you mean UNSAFE_componentWillReceiveProps()?',\n spec.displayName || 'A component'\n );\n }\n\n // Reduce time spent doing lookups by setting these on the prototype.\n for (var methodName in ReactClassInterface) {\n if (!Constructor.prototype[methodName]) {\n Constructor.prototype[methodName] = null;\n }\n }\n\n return Constructor;\n }\n\n return createClass;\n}\n\nmodule.exports = factory;\n","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n'use strict';\n\nvar _prodInvariant = require('./reactProdInvariant');\n\nvar ReactElement = require('./ReactElement');\n\nvar invariant = require('fbjs/lib/invariant');\n\n/**\n * Returns the first child in a collection of children and verifies that there\n * is only one child in the collection.\n *\n * See https://facebook.github.io/react/docs/top-level-api.html#react.children.only\n *\n * The current implementation of this function assumes that a single child gets\n * passed without a wrapper, but the purpose of this helper function is to\n * abstract away the particular structure of children.\n *\n * @param {?object} children Child collection structure.\n * @return {ReactElement} The first and only `ReactElement` contained in the\n * structure.\n */\nfunction onlyChild(children) {\n !ReactElement.isValidElement(children) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'React.Children.only expected to receive a single React element child.') : _prodInvariant('143') : void 0;\n return children;\n}\n\nmodule.exports = onlyChild;","/*!\n Copyright (c) 2017 Jed Watson.\n Licensed under the MIT License (MIT), see\n http://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg) && arg.length) {\n\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\tif (inner) {\n\t\t\t\t\tclasses.push(inner);\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _isPlainObject = require('lodash/isPlainObject');\n\nvar _isPlainObject2 = _interopRequireDefault(_isPlainObject);\n\nvar _prefix = require('./prefix');\n\nvar _prefix2 = _interopRequireDefault(_prefix);\n\nvar _supports = require('./supports');\n\nvar _supports2 = _interopRequireDefault(_supports);\n\nvar _constants = require('./constants');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar toKebabCase = function toKebabCase(string) {\n return string.replace(/([A-Z])/g, function ($1) {\n return '-' + $1.toLowerCase();\n });\n};\n\nvar applyPrefixes = function applyPrefixes(object) {\n if (!(0, _isPlainObject2.default)(object)) {\n return object;\n }\n\n var value = void 0;\n\n return Object.keys(object).reduce(function (styleObject, originalKey) {\n var key = originalKey;\n\n value = object[key];\n\n if ((0, _isPlainObject2.default)(value)) {\n return _extends({}, styleObject, _defineProperty({}, key, applyPrefixes(value)));\n }\n\n if (_constants.CSS_PROPERTIES.indexOf(key) !== -1 && !(0, _supports2.default)(toKebabCase(key), value)) {\n key = '' + _prefix2.default.js + key.charAt(0).toUpperCase() + key.slice(1);\n }\n\n if (originalKey === 'display' && object[originalKey] === 'flex' && !(0, _supports2.default)('display', 'flex')) {\n return _extends({}, styleObject, _defineProperty({}, key, _prefix2.default.js === 'ms' ? '-ms-flexbox' : _prefix2.default.css + 'flex'));\n }\n\n if (originalKey === 'transition') {\n var animatableValuesObject = _constants.ANIMATABLE_VALUES.reduce(function (animatableValues, animatableValue) {\n var kebabValue = toKebabCase(animatableValue);\n var re = new RegExp(kebabValue, 'g');\n\n if (re.test(object[originalKey]) && !(0, _supports2.default)(kebabValue)) {\n var cleanValue = object[originalKey].replace(re, '' + _prefix2.default.css + kebabValue);\n\n return _extends({}, animatableValues, _defineProperty({}, key, cleanValue));\n }\n\n return animatableValues;\n }, {});\n\n return _extends({}, styleObject, animatableValuesObject);\n }\n\n return _extends({}, styleObject, _defineProperty({}, key, value));\n }, {});\n};\n\nexports.default = applyPrefixes;","var baseGetTag = require('./_baseGetTag'),\n getPrototype = require('./_getPrototype'),\n isObjectLike = require('./isObjectLike');\n\n/** `Object#toString` result references. */\nvar objectTag = '[object Object]';\n\n/** Used for built-in method references. */\nvar funcProto = Function.prototype,\n objectProto = Object.prototype;\n\n/** Used to resolve the decompiled source of functions. */\nvar funcToString = funcProto.toString;\n\n/** Used to check objects for own properties. */\nvar hasOwnProperty = objectProto.hasOwnProperty;\n\n/** Used to infer the `Object` constructor. */\nvar objectCtorString = funcToString.call(Object);\n\n/**\n * Checks if `value` is a plain object, that is, an object created by the\n * `Object` constructor or one with a `[[Prototype]]` of `null`.\n *\n * @static\n * @memberOf _\n * @since 0.8.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a plain object, else `false`.\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * }\n *\n * _.isPlainObject(new Foo);\n * // => false\n *\n * _.isPlainObject([1, 2, 3]);\n * // => false\n *\n * _.isPlainObject({ 'x': 0, 'y': 0 });\n * // => true\n *\n * _.isPlainObject(Object.create(null));\n * // => true\n */\nfunction isPlainObject(value) {\n if (!isObjectLike(value) || baseGetTag(value) != objectTag) {\n return false;\n }\n var proto = getPrototype(value);\n if (proto === null) {\n return true;\n }\n var Ctor = hasOwnProperty.call(proto, 'constructor') && proto.constructor;\n return typeof Ctor == 'function' && Ctor instanceof Ctor &&\n funcToString.call(Ctor) == objectCtorString;\n}\n\nmodule.exports = isPlainObject;\n","var freeGlobal = require('./_freeGlobal');\n\n/** Detect free variable `self`. */\nvar freeSelf = typeof self == 'object' && self && self.Object === Object && self;\n\n/** Used as a reference to the global object. */\nvar root = freeGlobal || freeSelf || Function('return this')();\n\nmodule.exports = root;\n","/** Detect free variable `global` from Node.js. */\nvar freeGlobal = typeof global == 'object' && global && global.Object === Object && global;\n\nmodule.exports = freeGlobal;\n","var Symbol = require('./_Symbol');\n\n/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/** Used to check objects for own properties. */\nvar hasOwnProperty = objectProto.hasOwnProperty;\n\n/**\n * Used to resolve the\n * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)\n * of values.\n */\nvar nativeObjectToString = objectProto.toString;\n\n/** Built-in value references. */\nvar symToStringTag = Symbol ? Symbol.toStringTag : undefined;\n\n/**\n * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.\n *\n * @private\n * @param {*} value The value to query.\n * @returns {string} Returns the raw `toStringTag`.\n */\nfunction getRawTag(value) {\n var isOwn = hasOwnProperty.call(value, symToStringTag),\n tag = value[symToStringTag];\n\n try {\n value[symToStringTag] = undefined;\n var unmasked = true;\n } catch (e) {}\n\n var result = nativeObjectToString.call(value);\n if (unmasked) {\n if (isOwn) {\n value[symToStringTag] = tag;\n } else {\n delete value[symToStringTag];\n }\n }\n return result;\n}\n\nmodule.exports = getRawTag;\n","/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/**\n * Used to resolve the\n * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)\n * of values.\n */\nvar nativeObjectToString = objectProto.toString;\n\n/**\n * Converts `value` to a string using `Object.prototype.toString`.\n *\n * @private\n * @param {*} value The value to convert.\n * @returns {string} Returns the converted string.\n */\nfunction objectToString(value) {\n return nativeObjectToString.call(value);\n}\n\nmodule.exports = objectToString;\n","var overArg = require('./_overArg');\n\n/** Built-in value references. */\nvar getPrototype = overArg(Object.getPrototypeOf, Object);\n\nmodule.exports = getPrototype;\n","/**\n * Creates a unary function that invokes `func` with its argument transformed.\n *\n * @private\n * @param {Function} func The function to wrap.\n * @param {Function} transform The argument transform.\n * @returns {Function} Returns the new function.\n */\nfunction overArg(func, transform) {\n return function(arg) {\n return func(transform(arg));\n };\n}\n\nmodule.exports = overArg;\n","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _browserOrNode = require('browser-or-node');\n\nvar prefixObject = {\n css: '',\n js: ''\n};\n\nif (_browserOrNode.isBrowser) {\n var styles = window.getComputedStyle(document.documentElement);\n var prefixString = Array.prototype.slice.call(styles).join('');\n var standardPrefixString = prefixString.match(/-(moz|webkit|ms)-/);\n var operaPrefixString = prefixString.match(styles.OLink === '' && ['', 'o']);\n var prefixMatch = standardPrefixString || operaPrefixString;\n\n var prefix = prefixMatch ? prefixMatch[1] : '';\n\n prefixObject = {\n css: '-' + prefix + '-',\n js: prefix\n };\n\n if (prefixObject.js !== 'ms') {\n prefixObject = _extends({}, prefixObject, {\n js: '' + prefixObject.js.charAt(0).toUpperCase() + prefixObject.js.slice(1)\n });\n }\n}\n\nexports.default = prefixObject;","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _browserOrNode = require('browser-or-node');\n\nvar _camelCase = require('lodash/camelCase');\n\nvar _camelCase2 = _interopRequireDefault(_camelCase);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar isSupported = function isSupported(property, value) {\n if (_browserOrNode.isBrowser) {\n if ('CSS' in window && 'supports' in window.CSS) {\n return window.CSS.supports(property, value);\n }\n\n if ('supportsCSS' in window) {\n return window.supportsCSS(property, value);\n }\n\n var camelCaseProperty = (0, _camelCase2.default)(property);\n\n var element = document.createElement('div');\n var support = camelCaseProperty in element.style;\n\n element.style.cssText = property + ':' + value;\n\n return support && element.style[camelCaseProperty] !== '';\n }\n return false;\n};\n\nexports.default = isSupported;","var capitalize = require('./capitalize'),\n createCompounder = require('./_createCompounder');\n\n/**\n * Converts `string` to [camel case](https://en.wikipedia.org/wiki/CamelCase).\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category String\n * @param {string} [string=''] The string to convert.\n * @returns {string} Returns the camel cased string.\n * @example\n *\n * _.camelCase('Foo Bar');\n * // => 'fooBar'\n *\n * _.camelCase('--foo-bar--');\n * // => 'fooBar'\n *\n * _.camelCase('__FOO_BAR__');\n * // => 'fooBar'\n */\nvar camelCase = createCompounder(function(result, word, index) {\n word = word.toLowerCase();\n return result + (index ? capitalize(word) : word);\n});\n\nmodule.exports = camelCase;\n","var toString = require('./toString'),\n upperFirst = require('./upperFirst');\n\n/**\n * Converts the first character of `string` to upper case and the remaining\n * to lower case.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category String\n * @param {string} [string=''] The string to capitalize.\n * @returns {string} Returns the capitalized string.\n * @example\n *\n * _.capitalize('FRED');\n * // => 'Fred'\n */\nfunction capitalize(string) {\n return upperFirst(toString(string).toLowerCase());\n}\n\nmodule.exports = capitalize;\n","var Symbol = require('./_Symbol'),\n arrayMap = require('./_arrayMap'),\n isArray = require('./isArray'),\n isSymbol = require('./isSymbol');\n\n/** Used as references for various `Number` constants. */\nvar INFINITY = 1 / 0;\n\n/** Used to convert symbols to primitives and strings. */\nvar symbolProto = Symbol ? Symbol.prototype : undefined,\n symbolToString = symbolProto ? symbolProto.toString : undefined;\n\n/**\n * The base implementation of `_.toString` which doesn't convert nullish\n * values to empty strings.\n *\n * @private\n * @param {*} value The value to process.\n * @returns {string} Returns the string.\n */\nfunction baseToString(value) {\n // Exit early for strings to avoid a performance hit in some environments.\n if (typeof value == 'string') {\n return value;\n }\n if (isArray(value)) {\n // Recursively convert values (susceptible to call stack limits).\n return arrayMap(value, baseToString) + '';\n }\n if (isSymbol(value)) {\n return symbolToString ? symbolToString.call(value) : '';\n }\n var result = (value + '');\n return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;\n}\n\nmodule.exports = baseToString;\n","/**\n * A specialized version of `_.map` for arrays without support for iteratee\n * shorthands.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Array} Returns the new mapped array.\n */\nfunction arrayMap(array, iteratee) {\n var index = -1,\n length = array == null ? 0 : array.length,\n result = Array(length);\n\n while (++index < length) {\n result[index] = iteratee(array[index], index, array);\n }\n return result;\n}\n\nmodule.exports = arrayMap;\n","/**\n * Checks if `value` is classified as an `Array` object.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an array, else `false`.\n * @example\n *\n * _.isArray([1, 2, 3]);\n * // => true\n *\n * _.isArray(document.body.children);\n * // => false\n *\n * _.isArray('abc');\n * // => false\n *\n * _.isArray(_.noop);\n * // => false\n */\nvar isArray = Array.isArray;\n\nmodule.exports = isArray;\n","var baseGetTag = require('./_baseGetTag'),\n isObjectLike = require('./isObjectLike');\n\n/** `Object#toString` result references. */\nvar symbolTag = '[object Symbol]';\n\n/**\n * Checks if `value` is classified as a `Symbol` primitive or object.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.\n * @example\n *\n * _.isSymbol(Symbol.iterator);\n * // => true\n *\n * _.isSymbol('abc');\n * // => false\n */\nfunction isSymbol(value) {\n return typeof value == 'symbol' ||\n (isObjectLike(value) && baseGetTag(value) == symbolTag);\n}\n\nmodule.exports = isSymbol;\n","var createCaseFirst = require('./_createCaseFirst');\n\n/**\n * Converts the first character of `string` to upper case.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category String\n * @param {string} [string=''] The string to convert.\n * @returns {string} Returns the converted string.\n * @example\n *\n * _.upperFirst('fred');\n * // => 'Fred'\n *\n * _.upperFirst('FRED');\n * // => 'FRED'\n */\nvar upperFirst = createCaseFirst('toUpperCase');\n\nmodule.exports = upperFirst;\n","var castSlice = require('./_castSlice'),\n hasUnicode = require('./_hasUnicode'),\n stringToArray = require('./_stringToArray'),\n toString = require('./toString');\n\n/**\n * Creates a function like `_.lowerFirst`.\n *\n * @private\n * @param {string} methodName The name of the `String` case method to use.\n * @returns {Function} Returns the new case function.\n */\nfunction createCaseFirst(methodName) {\n return function(string) {\n string = toString(string);\n\n var strSymbols = hasUnicode(string)\n ? stringToArray(string)\n : undefined;\n\n var chr = strSymbols\n ? strSymbols[0]\n : string.charAt(0);\n\n var trailing = strSymbols\n ? castSlice(strSymbols, 1).join('')\n : string.slice(1);\n\n return chr[methodName]() + trailing;\n };\n}\n\nmodule.exports = createCaseFirst;\n","var baseSlice = require('./_baseSlice');\n\n/**\n * Casts `array` to a slice if it's needed.\n *\n * @private\n * @param {Array} array The array to inspect.\n * @param {number} start The start position.\n * @param {number} [end=array.length] The end position.\n * @returns {Array} Returns the cast slice.\n */\nfunction castSlice(array, start, end) {\n var length = array.length;\n end = end === undefined ? length : end;\n return (!start && end >= length) ? array : baseSlice(array, start, end);\n}\n\nmodule.exports = castSlice;\n","/**\n * The base implementation of `_.slice` without an iteratee call guard.\n *\n * @private\n * @param {Array} array The array to slice.\n * @param {number} [start=0] The start position.\n * @param {number} [end=array.length] The end position.\n * @returns {Array} Returns the slice of `array`.\n */\nfunction baseSlice(array, start, end) {\n var index = -1,\n length = array.length;\n\n if (start < 0) {\n start = -start > length ? 0 : (length + start);\n }\n end = end > length ? length : end;\n if (end < 0) {\n end += length;\n }\n length = start > end ? 0 : ((end - start) >>> 0);\n start >>>= 0;\n\n var result = Array(length);\n while (++index < length) {\n result[index] = array[index + start];\n }\n return result;\n}\n\nmodule.exports = baseSlice;\n","var asciiToArray = require('./_asciiToArray'),\n hasUnicode = require('./_hasUnicode'),\n unicodeToArray = require('./_unicodeToArray');\n\n/**\n * Converts `string` to an array.\n *\n * @private\n * @param {string} string The string to convert.\n * @returns {Array} Returns the converted array.\n */\nfunction stringToArray(string) {\n return hasUnicode(string)\n ? unicodeToArray(string)\n : asciiToArray(string);\n}\n\nmodule.exports = stringToArray;\n","/**\n * Converts an ASCII `string` to an array.\n *\n * @private\n * @param {string} string The string to convert.\n * @returns {Array} Returns the converted array.\n */\nfunction asciiToArray(string) {\n return string.split('');\n}\n\nmodule.exports = asciiToArray;\n","/** Used to compose unicode character classes. */\nvar rsAstralRange = '\\\\ud800-\\\\udfff',\n rsComboMarksRange = '\\\\u0300-\\\\u036f',\n reComboHalfMarksRange = '\\\\ufe20-\\\\ufe2f',\n rsComboSymbolsRange = '\\\\u20d0-\\\\u20ff',\n rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange,\n rsVarRange = '\\\\ufe0e\\\\ufe0f';\n\n/** Used to compose unicode capture groups. */\nvar rsAstral = '[' + rsAstralRange + ']',\n rsCombo = '[' + rsComboRange + ']',\n rsFitz = '\\\\ud83c[\\\\udffb-\\\\udfff]',\n rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')',\n rsNonAstral = '[^' + rsAstralRange + ']',\n rsRegional = '(?:\\\\ud83c[\\\\udde6-\\\\uddff]){2}',\n rsSurrPair = '[\\\\ud800-\\\\udbff][\\\\udc00-\\\\udfff]',\n rsZWJ = '\\\\u200d';\n\n/** Used to compose unicode regexes. */\nvar reOptMod = rsModifier + '?',\n rsOptVar = '[' + rsVarRange + ']?',\n rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*',\n rsSeq = rsOptVar + reOptMod + rsOptJoin,\n rsSymbol = '(?:' + [rsNonAstral + rsCombo + '?', rsCombo, rsRegional, rsSurrPair, rsAstral].join('|') + ')';\n\n/** Used to match [string symbols](https://mathiasbynens.be/notes/javascript-unicode). */\nvar reUnicode = RegExp(rsFitz + '(?=' + rsFitz + ')|' + rsSymbol + rsSeq, 'g');\n\n/**\n * Converts a Unicode `string` to an array.\n *\n * @private\n * @param {string} string The string to convert.\n * @returns {Array} Returns the converted array.\n */\nfunction unicodeToArray(string) {\n return string.match(reUnicode) || [];\n}\n\nmodule.exports = unicodeToArray;\n","var arrayReduce = require('./_arrayReduce'),\n deburr = require('./deburr'),\n words = require('./words');\n\n/** Used to compose unicode capture groups. */\nvar rsApos = \"['\\u2019]\";\n\n/** Used to match apostrophes. */\nvar reApos = RegExp(rsApos, 'g');\n\n/**\n * Creates a function like `_.camelCase`.\n *\n * @private\n * @param {Function} callback The function to combine each word.\n * @returns {Function} Returns the new compounder function.\n */\nfunction createCompounder(callback) {\n return function(string) {\n return arrayReduce(words(deburr(string).replace(reApos, '')), callback, '');\n };\n}\n\nmodule.exports = createCompounder;\n","/**\n * A specialized version of `_.reduce` for arrays without support for\n * iteratee shorthands.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @param {*} [accumulator] The initial value.\n * @param {boolean} [initAccum] Specify using the first element of `array` as\n * the initial value.\n * @returns {*} Returns the accumulated value.\n */\nfunction arrayReduce(array, iteratee, accumulator, initAccum) {\n var index = -1,\n length = array == null ? 0 : array.length;\n\n if (initAccum && length) {\n accumulator = array[++index];\n }\n while (++index < length) {\n accumulator = iteratee(accumulator, array[index], index, array);\n }\n return accumulator;\n}\n\nmodule.exports = arrayReduce;\n","var deburrLetter = require('./_deburrLetter'),\n toString = require('./toString');\n\n/** Used to match Latin Unicode letters (excluding mathematical operators). */\nvar reLatin = /[\\xc0-\\xd6\\xd8-\\xf6\\xf8-\\xff\\u0100-\\u017f]/g;\n\n/** Used to compose unicode character classes. */\nvar rsComboMarksRange = '\\\\u0300-\\\\u036f',\n reComboHalfMarksRange = '\\\\ufe20-\\\\ufe2f',\n rsComboSymbolsRange = '\\\\u20d0-\\\\u20ff',\n rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange;\n\n/** Used to compose unicode capture groups. */\nvar rsCombo = '[' + rsComboRange + ']';\n\n/**\n * Used to match [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks) and\n * [combining diacritical marks for symbols](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks_for_Symbols).\n */\nvar reComboMark = RegExp(rsCombo, 'g');\n\n/**\n * Deburrs `string` by converting\n * [Latin-1 Supplement](https://en.wikipedia.org/wiki/Latin-1_Supplement_(Unicode_block)#Character_table)\n * and [Latin Extended-A](https://en.wikipedia.org/wiki/Latin_Extended-A)\n * letters to basic Latin letters and removing\n * [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks).\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category String\n * @param {string} [string=''] The string to deburr.\n * @returns {string} Returns the deburred string.\n * @example\n *\n * _.deburr('déjà vu');\n * // => 'deja vu'\n */\nfunction deburr(string) {\n string = toString(string);\n return string && string.replace(reLatin, deburrLetter).replace(reComboMark, '');\n}\n\nmodule.exports = deburr;\n","var basePropertyOf = require('./_basePropertyOf');\n\n/** Used to map Latin Unicode letters to basic Latin letters. */\nvar deburredLetters = {\n // Latin-1 Supplement block.\n '\\xc0': 'A', '\\xc1': 'A', '\\xc2': 'A', '\\xc3': 'A', '\\xc4': 'A', '\\xc5': 'A',\n '\\xe0': 'a', '\\xe1': 'a', '\\xe2': 'a', '\\xe3': 'a', '\\xe4': 'a', '\\xe5': 'a',\n '\\xc7': 'C', '\\xe7': 'c',\n '\\xd0': 'D', '\\xf0': 'd',\n '\\xc8': 'E', '\\xc9': 'E', '\\xca': 'E', '\\xcb': 'E',\n '\\xe8': 'e', '\\xe9': 'e', '\\xea': 'e', '\\xeb': 'e',\n '\\xcc': 'I', '\\xcd': 'I', '\\xce': 'I', '\\xcf': 'I',\n '\\xec': 'i', '\\xed': 'i', '\\xee': 'i', '\\xef': 'i',\n '\\xd1': 'N', '\\xf1': 'n',\n '\\xd2': 'O', '\\xd3': 'O', '\\xd4': 'O', '\\xd5': 'O', '\\xd6': 'O', '\\xd8': 'O',\n '\\xf2': 'o', '\\xf3': 'o', '\\xf4': 'o', '\\xf5': 'o', '\\xf6': 'o', '\\xf8': 'o',\n '\\xd9': 'U', '\\xda': 'U', '\\xdb': 'U', '\\xdc': 'U',\n '\\xf9': 'u', '\\xfa': 'u', '\\xfb': 'u', '\\xfc': 'u',\n '\\xdd': 'Y', '\\xfd': 'y', '\\xff': 'y',\n '\\xc6': 'Ae', '\\xe6': 'ae',\n '\\xde': 'Th', '\\xfe': 'th',\n '\\xdf': 'ss',\n // Latin Extended-A block.\n '\\u0100': 'A', '\\u0102': 'A', '\\u0104': 'A',\n '\\u0101': 'a', '\\u0103': 'a', '\\u0105': 'a',\n '\\u0106': 'C', '\\u0108': 'C', '\\u010a': 'C', '\\u010c': 'C',\n '\\u0107': 'c', '\\u0109': 'c', '\\u010b': 'c', '\\u010d': 'c',\n '\\u010e': 'D', '\\u0110': 'D', '\\u010f': 'd', '\\u0111': 'd',\n '\\u0112': 'E', '\\u0114': 'E', '\\u0116': 'E', '\\u0118': 'E', '\\u011a': 'E',\n '\\u0113': 'e', '\\u0115': 'e', '\\u0117': 'e', '\\u0119': 'e', '\\u011b': 'e',\n '\\u011c': 'G', '\\u011e': 'G', '\\u0120': 'G', '\\u0122': 'G',\n '\\u011d': 'g', '\\u011f': 'g', '\\u0121': 'g', '\\u0123': 'g',\n '\\u0124': 'H', '\\u0126': 'H', '\\u0125': 'h', '\\u0127': 'h',\n '\\u0128': 'I', '\\u012a': 'I', '\\u012c': 'I', '\\u012e': 'I', '\\u0130': 'I',\n '\\u0129': 'i', '\\u012b': 'i', '\\u012d': 'i', '\\u012f': 'i', '\\u0131': 'i',\n '\\u0134': 'J', '\\u0135': 'j',\n '\\u0136': 'K', '\\u0137': 'k', '\\u0138': 'k',\n '\\u0139': 'L', '\\u013b': 'L', '\\u013d': 'L', '\\u013f': 'L', '\\u0141': 'L',\n '\\u013a': 'l', '\\u013c': 'l', '\\u013e': 'l', '\\u0140': 'l', '\\u0142': 'l',\n '\\u0143': 'N', '\\u0145': 'N', '\\u0147': 'N', '\\u014a': 'N',\n '\\u0144': 'n', '\\u0146': 'n', '\\u0148': 'n', '\\u014b': 'n',\n '\\u014c': 'O', '\\u014e': 'O', '\\u0150': 'O',\n '\\u014d': 'o', '\\u014f': 'o', '\\u0151': 'o',\n '\\u0154': 'R', '\\u0156': 'R', '\\u0158': 'R',\n '\\u0155': 'r', '\\u0157': 'r', '\\u0159': 'r',\n '\\u015a': 'S', '\\u015c': 'S', '\\u015e': 'S', '\\u0160': 'S',\n '\\u015b': 's', '\\u015d': 's', '\\u015f': 's', '\\u0161': 's',\n '\\u0162': 'T', '\\u0164': 'T', '\\u0166': 'T',\n '\\u0163': 't', '\\u0165': 't', '\\u0167': 't',\n '\\u0168': 'U', '\\u016a': 'U', '\\u016c': 'U', '\\u016e': 'U', '\\u0170': 'U', '\\u0172': 'U',\n '\\u0169': 'u', '\\u016b': 'u', '\\u016d': 'u', '\\u016f': 'u', '\\u0171': 'u', '\\u0173': 'u',\n '\\u0174': 'W', '\\u0175': 'w',\n '\\u0176': 'Y', '\\u0177': 'y', '\\u0178': 'Y',\n '\\u0179': 'Z', '\\u017b': 'Z', '\\u017d': 'Z',\n '\\u017a': 'z', '\\u017c': 'z', '\\u017e': 'z',\n '\\u0132': 'IJ', '\\u0133': 'ij',\n '\\u0152': 'Oe', '\\u0153': 'oe',\n '\\u0149': \"'n\", '\\u017f': 's'\n};\n\n/**\n * Used by `_.deburr` to convert Latin-1 Supplement and Latin Extended-A\n * letters to basic Latin letters.\n *\n * @private\n * @param {string} letter The matched letter to deburr.\n * @returns {string} Returns the deburred letter.\n */\nvar deburrLetter = basePropertyOf(deburredLetters);\n\nmodule.exports = deburrLetter;\n","/**\n * The base implementation of `_.propertyOf` without support for deep paths.\n *\n * @private\n * @param {Object} object The object to query.\n * @returns {Function} Returns the new accessor function.\n */\nfunction basePropertyOf(object) {\n return function(key) {\n return object == null ? undefined : object[key];\n };\n}\n\nmodule.exports = basePropertyOf;\n","var asciiWords = require('./_asciiWords'),\n hasUnicodeWord = require('./_hasUnicodeWord'),\n toString = require('./toString'),\n unicodeWords = require('./_unicodeWords');\n\n/**\n * Splits `string` into an array of its words.\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category String\n * @param {string} [string=''] The string to inspect.\n * @param {RegExp|string} [pattern] The pattern to match words.\n * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.\n * @returns {Array} Returns the words of `string`.\n * @example\n *\n * _.words('fred, barney, & pebbles');\n * // => ['fred', 'barney', 'pebbles']\n *\n * _.words('fred, barney, & pebbles', /[^, ]+/g);\n * // => ['fred', 'barney', '&', 'pebbles']\n */\nfunction words(string, pattern, guard) {\n string = toString(string);\n pattern = guard ? undefined : pattern;\n\n if (pattern === undefined) {\n return hasUnicodeWord(string) ? unicodeWords(string) : asciiWords(string);\n }\n return string.match(pattern) || [];\n}\n\nmodule.exports = words;\n","/** Used to match words composed of alphanumeric characters. */\nvar reAsciiWord = /[^\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\x7f]+/g;\n\n/**\n * Splits an ASCII `string` into an array of its words.\n *\n * @private\n * @param {string} The string to inspect.\n * @returns {Array} Returns the words of `string`.\n */\nfunction asciiWords(string) {\n return string.match(reAsciiWord) || [];\n}\n\nmodule.exports = asciiWords;\n","/** Used to detect strings that need a more robust regexp to match words. */\nvar reHasUnicodeWord = /[a-z][A-Z]|[A-Z]{2}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/;\n\n/**\n * Checks if `string` contains a word composed of Unicode symbols.\n *\n * @private\n * @param {string} string The string to inspect.\n * @returns {boolean} Returns `true` if a word is found, else `false`.\n */\nfunction hasUnicodeWord(string) {\n return reHasUnicodeWord.test(string);\n}\n\nmodule.exports = hasUnicodeWord;\n","/** Used to compose unicode character classes. */\nvar rsAstralRange = '\\\\ud800-\\\\udfff',\n rsComboMarksRange = '\\\\u0300-\\\\u036f',\n reComboHalfMarksRange = '\\\\ufe20-\\\\ufe2f',\n rsComboSymbolsRange = '\\\\u20d0-\\\\u20ff',\n rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange,\n rsDingbatRange = '\\\\u2700-\\\\u27bf',\n rsLowerRange = 'a-z\\\\xdf-\\\\xf6\\\\xf8-\\\\xff',\n rsMathOpRange = '\\\\xac\\\\xb1\\\\xd7\\\\xf7',\n rsNonCharRange = '\\\\x00-\\\\x2f\\\\x3a-\\\\x40\\\\x5b-\\\\x60\\\\x7b-\\\\xbf',\n rsPunctuationRange = '\\\\u2000-\\\\u206f',\n rsSpaceRange = ' \\\\t\\\\x0b\\\\f\\\\xa0\\\\ufeff\\\\n\\\\r\\\\u2028\\\\u2029\\\\u1680\\\\u180e\\\\u2000\\\\u2001\\\\u2002\\\\u2003\\\\u2004\\\\u2005\\\\u2006\\\\u2007\\\\u2008\\\\u2009\\\\u200a\\\\u202f\\\\u205f\\\\u3000',\n rsUpperRange = 'A-Z\\\\xc0-\\\\xd6\\\\xd8-\\\\xde',\n rsVarRange = '\\\\ufe0e\\\\ufe0f',\n rsBreakRange = rsMathOpRange + rsNonCharRange + rsPunctuationRange + rsSpaceRange;\n\n/** Used to compose unicode capture groups. */\nvar rsApos = \"['\\u2019]\",\n rsBreak = '[' + rsBreakRange + ']',\n rsCombo = '[' + rsComboRange + ']',\n rsDigits = '\\\\d+',\n rsDingbat = '[' + rsDingbatRange + ']',\n rsLower = '[' + rsLowerRange + ']',\n rsMisc = '[^' + rsAstralRange + rsBreakRange + rsDigits + rsDingbatRange + rsLowerRange + rsUpperRange + ']',\n rsFitz = '\\\\ud83c[\\\\udffb-\\\\udfff]',\n rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')',\n rsNonAstral = '[^' + rsAstralRange + ']',\n rsRegional = '(?:\\\\ud83c[\\\\udde6-\\\\uddff]){2}',\n rsSurrPair = '[\\\\ud800-\\\\udbff][\\\\udc00-\\\\udfff]',\n rsUpper = '[' + rsUpperRange + ']',\n rsZWJ = '\\\\u200d';\n\n/** Used to compose unicode regexes. */\nvar rsMiscLower = '(?:' + rsLower + '|' + rsMisc + ')',\n rsMiscUpper = '(?:' + rsUpper + '|' + rsMisc + ')',\n rsOptContrLower = '(?:' + rsApos + '(?:d|ll|m|re|s|t|ve))?',\n rsOptContrUpper = '(?:' + rsApos + '(?:D|LL|M|RE|S|T|VE))?',\n reOptMod = rsModifier + '?',\n rsOptVar = '[' + rsVarRange + ']?',\n rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*',\n rsOrdLower = '\\\\d*(?:1st|2nd|3rd|(?![123])\\\\dth)(?=\\\\b|[A-Z_])',\n rsOrdUpper = '\\\\d*(?:1ST|2ND|3RD|(?![123])\\\\dTH)(?=\\\\b|[a-z_])',\n rsSeq = rsOptVar + reOptMod + rsOptJoin,\n rsEmoji = '(?:' + [rsDingbat, rsRegional, rsSurrPair].join('|') + ')' + rsSeq;\n\n/** Used to match complex or compound words. */\nvar reUnicodeWord = RegExp([\n rsUpper + '?' + rsLower + '+' + rsOptContrLower + '(?=' + [rsBreak, rsUpper, '$'].join('|') + ')',\n rsMiscUpper + '+' + rsOptContrUpper + '(?=' + [rsBreak, rsUpper + rsMiscLower, '$'].join('|') + ')',\n rsUpper + '?' + rsMiscLower + '+' + rsOptContrLower,\n rsUpper + '+' + rsOptContrUpper,\n rsOrdUpper,\n rsOrdLower,\n rsDigits,\n rsEmoji\n].join('|'), 'g');\n\n/**\n * Splits a Unicode `string` into an array of its words.\n *\n * @private\n * @param {string} The string to inspect.\n * @returns {Array} Returns the words of `string`.\n */\nfunction unicodeWords(string) {\n return string.match(reUnicodeWord) || [];\n}\n\nmodule.exports = unicodeWords;\n","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nvar ANIMATABLE_VALUES = exports.ANIMATABLE_VALUES = ['columnCount', 'columnGap', 'columnRule', 'columnRuleColor', 'columnRuleWidth', 'columns', 'flex', 'flexBasis', 'flexGrow', 'flexShrink', 'order', 'perspective', 'perspectiveOrigin', 'perspectiveOriginX', 'perspectiveOriginY', 'scrollSnapCoordinate', 'scrollSnapDirection', 'textDecoration', 'textDecorationColor', 'transform', 'transformOrigin', 'transformOriginX', 'transformOriginY', 'transformOriginZ', 'transformStyle'];\n\nvar CSS_PROPERTIES = exports.CSS_PROPERTIES = ['alignContent', 'alignItems', 'alignSelf', 'animation', 'animationDelay', 'animationDirection', 'animationDuration', 'animationFillMode', 'animationIterationCount', 'animationName', 'animationPlayState', 'animationTimingFunction', 'appearance', 'aspectRatio', 'backfaceVisibility', 'backgroundClip', 'borderImage', 'borderImageSlice', 'boxShadow', 'columnCount', 'columnFill', 'columnGap', 'columnRule', 'columnRuleColor', 'columnRuleStyle', 'columnRuleWidth', 'columnSpan', 'columnWidth', 'columns', 'flex', 'flexBasis', 'flexDirection', 'flexFlow', 'flexGrow', 'flexShrink', 'flexWrap', 'fontFeatureSettings', 'fontKearning', 'fontVariantLigatures', 'justifyContent', 'grid', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridColumn', 'gridColumnEnd', 'gridColumnStart', 'gridRow', 'gridRowEnd', 'gridRowStart', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows', 'hyphens', 'lineBreak', 'perspective', 'perspectiveOrigin', 'perspectiveOriginX', 'perspectiveOriginY', 'rubyPosition', 'scrollSnapCoordinate', 'scrollSnapDestination', 'scrollSnapPoints', 'scrollSnapPointsX', 'scrollSnapPointsY', 'scrollSnapType', 'tabSize', 'textDecoration', 'textDecorationColor', 'textDecorationLine', 'textDecorationStyle', 'textOrientation', 'textSizeAdjust', 'transform', 'transition', 'transformOrigin', 'transformOriginX', 'transformOriginY', 'transformOriginZ', 'transformStyle', 'transitionProperty', 'transitionDuration', 'transitionTimingFunction', 'transitionDelay', 'userModify', 'userSelect'];","function _typeof(obj) {\n \"@babel/helpers - typeof\";\n\n if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") {\n module.exports = _typeof = function _typeof(obj) {\n return typeof obj;\n };\n } else {\n module.exports = _typeof = function _typeof(obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n };\n }\n\n return _typeof(obj);\n}\n\nmodule.exports = _typeof;","'use strict';\n\nvar utils = require('./utils');\nvar bind = require('./helpers/bind');\nvar Axios = require('./core/Axios');\nvar mergeConfig = require('./core/mergeConfig');\nvar defaults = require('./defaults');\n\n/**\n * Create an instance of Axios\n *\n * @param {Object} defaultConfig The default config for the instance\n * @return {Axios} A new instance of Axios\n */\nfunction createInstance(defaultConfig) {\n var context = new Axios(defaultConfig);\n var instance = bind(Axios.prototype.request, context);\n\n // Copy axios.prototype to instance\n utils.extend(instance, Axios.prototype, context);\n\n // Copy context to instance\n utils.extend(instance, context);\n\n return instance;\n}\n\n// Create the default instance to be exported\nvar axios = createInstance(defaults);\n\n// Expose Axios class to allow class inheritance\naxios.Axios = Axios;\n\n// Factory for creating new instances\naxios.create = function create(instanceConfig) {\n return createInstance(mergeConfig(axios.defaults, instanceConfig));\n};\n\n// Expose Cancel & CancelToken\naxios.Cancel = require('./cancel/Cancel');\naxios.CancelToken = require('./cancel/CancelToken');\naxios.isCancel = require('./cancel/isCancel');\n\n// Expose all/spread\naxios.all = function all(promises) {\n return Promise.all(promises);\n};\naxios.spread = require('./helpers/spread');\n\nmodule.exports = axios;\n\n// Allow use of default import syntax in TypeScript\nmodule.exports.default = axios;\n","'use strict';\n\nvar utils = require('./../utils');\nvar buildURL = require('../helpers/buildURL');\nvar InterceptorManager = require('./InterceptorManager');\nvar dispatchRequest = require('./dispatchRequest');\nvar mergeConfig = require('./mergeConfig');\n\n/**\n * Create a new instance of Axios\n *\n * @param {Object} instanceConfig The default config for the instance\n */\nfunction Axios(instanceConfig) {\n this.defaults = instanceConfig;\n this.interceptors = {\n request: new InterceptorManager(),\n response: new InterceptorManager()\n };\n}\n\n/**\n * Dispatch a request\n *\n * @param {Object} config The config specific for this request (merged with this.defaults)\n */\nAxios.prototype.request = function request(config) {\n /*eslint no-param-reassign:0*/\n // Allow for axios('example/url'[, config]) a la fetch API\n if (typeof config === 'string') {\n config = arguments[1] || {};\n config.url = arguments[0];\n } else {\n config = config || {};\n }\n\n config = mergeConfig(this.defaults, config);\n\n // Set config.method\n if (config.method) {\n config.method = config.method.toLowerCase();\n } else if (this.defaults.method) {\n config.method = this.defaults.method.toLowerCase();\n } else {\n config.method = 'get';\n }\n\n // Hook up interceptors middleware\n var chain = [dispatchRequest, undefined];\n var promise = Promise.resolve(config);\n\n this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {\n chain.unshift(interceptor.fulfilled, interceptor.rejected);\n });\n\n this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {\n chain.push(interceptor.fulfilled, interceptor.rejected);\n });\n\n while (chain.length) {\n promise = promise.then(chain.shift(), chain.shift());\n }\n\n return promise;\n};\n\nAxios.prototype.getUri = function getUri(config) {\n config = mergeConfig(this.defaults, config);\n return buildURL(config.url, config.params, config.paramsSerializer).replace(/^\\?/, '');\n};\n\n// Provide aliases for supported request methods\nutils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {\n /*eslint func-names:0*/\n Axios.prototype[method] = function(url, config) {\n return this.request(mergeConfig(config || {}, {\n method: method,\n url: url\n }));\n };\n});\n\nutils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {\n /*eslint func-names:0*/\n Axios.prototype[method] = function(url, data, config) {\n return this.request(mergeConfig(config || {}, {\n method: method,\n url: url,\n data: data\n }));\n };\n});\n\nmodule.exports = Axios;\n","'use strict';\n\nvar utils = require('./../utils');\n\nfunction InterceptorManager() {\n this.handlers = [];\n}\n\n/**\n * Add a new interceptor to the stack\n *\n * @param {Function} fulfilled The function to handle `then` for a `Promise`\n * @param {Function} rejected The function to handle `reject` for a `Promise`\n *\n * @return {Number} An ID used to remove interceptor later\n */\nInterceptorManager.prototype.use = function use(fulfilled, rejected) {\n this.handlers.push({\n fulfilled: fulfilled,\n rejected: rejected\n });\n return this.handlers.length - 1;\n};\n\n/**\n * Remove an interceptor from the stack\n *\n * @param {Number} id The ID that was returned by `use`\n */\nInterceptorManager.prototype.eject = function eject(id) {\n if (this.handlers[id]) {\n this.handlers[id] = null;\n }\n};\n\n/**\n * Iterate over all the registered interceptors\n *\n * This method is particularly useful for skipping over any\n * interceptors that may have become `null` calling `eject`.\n *\n * @param {Function} fn The function to call for each interceptor\n */\nInterceptorManager.prototype.forEach = function forEach(fn) {\n utils.forEach(this.handlers, function forEachHandler(h) {\n if (h !== null) {\n fn(h);\n }\n });\n};\n\nmodule.exports = InterceptorManager;\n","'use strict';\n\nvar utils = require('./../utils');\nvar transformData = require('./transformData');\nvar isCancel = require('../cancel/isCancel');\nvar defaults = require('../defaults');\n\n/**\n * Throws a `Cancel` if cancellation has been requested.\n */\nfunction throwIfCancellationRequested(config) {\n if (config.cancelToken) {\n config.cancelToken.throwIfRequested();\n }\n}\n\n/**\n * Dispatch a request to the server using the configured adapter.\n *\n * @param {object} config The config that is to be used for the request\n * @returns {Promise} The Promise to be fulfilled\n */\nmodule.exports = function dispatchRequest(config) {\n throwIfCancellationRequested(config);\n\n // Ensure headers exist\n config.headers = config.headers || {};\n\n // Transform request data\n config.data = transformData(\n config.data,\n config.headers,\n config.transformRequest\n );\n\n // Flatten headers\n config.headers = utils.merge(\n config.headers.common || {},\n config.headers[config.method] || {},\n config.headers\n );\n\n utils.forEach(\n ['delete', 'get', 'head', 'post', 'put', 'patch', 'common'],\n function cleanHeaderConfig(method) {\n delete config.headers[method];\n }\n );\n\n var adapter = config.adapter || defaults.adapter;\n\n return adapter(config).then(function onAdapterResolution(response) {\n throwIfCancellationRequested(config);\n\n // Transform response data\n response.data = transformData(\n response.data,\n response.headers,\n config.transformResponse\n );\n\n return response;\n }, function onAdapterRejection(reason) {\n if (!isCancel(reason)) {\n throwIfCancellationRequested(config);\n\n // Transform response data\n if (reason && reason.response) {\n reason.response.data = transformData(\n reason.response.data,\n reason.response.headers,\n config.transformResponse\n );\n }\n }\n\n return Promise.reject(reason);\n });\n};\n","'use strict';\n\nvar utils = require('./../utils');\n\n/**\n * Transform the data for a request or a response\n *\n * @param {Object|String} data The data to be transformed\n * @param {Array} headers The headers for the request or response\n * @param {Array|Function} fns A single function or Array of functions\n * @returns {*} The resulting transformed data\n */\nmodule.exports = function transformData(data, headers, fns) {\n /*eslint no-param-reassign:0*/\n utils.forEach(fns, function transform(fn) {\n data = fn(data, headers);\n });\n\n return data;\n};\n","'use strict';\n\nvar utils = require('../utils');\n\nmodule.exports = function normalizeHeaderName(headers, normalizedName) {\n utils.forEach(headers, function processHeader(value, name) {\n if (name !== normalizedName && name.toUpperCase() === normalizedName.toUpperCase()) {\n headers[normalizedName] = value;\n delete headers[name];\n }\n });\n};\n","'use strict';\n\nvar createError = require('./createError');\n\n/**\n * Resolve or reject a Promise based on response status.\n *\n * @param {Function} resolve A function that resolves the promise.\n * @param {Function} reject A function that rejects the promise.\n * @param {object} response The response.\n */\nmodule.exports = function settle(resolve, reject, response) {\n var validateStatus = response.config.validateStatus;\n if (!response.status || !validateStatus || validateStatus(response.status)) {\n resolve(response);\n } else {\n reject(createError(\n 'Request failed with status code ' + response.status,\n response.config,\n null,\n response.request,\n response\n ));\n }\n};\n","'use strict';\n\n/**\n * Update an Error with the specified config, error code, and response.\n *\n * @param {Error} error The error to update.\n * @param {Object} config The config.\n * @param {string} [code] The error code (for example, 'ECONNABORTED').\n * @param {Object} [request] The request.\n * @param {Object} [response] The response.\n * @returns {Error} The error.\n */\nmodule.exports = function enhanceError(error, config, code, request, response) {\n error.config = config;\n if (code) {\n error.code = code;\n }\n\n error.request = request;\n error.response = response;\n error.isAxiosError = true;\n\n error.toJSON = function toJSON() {\n return {\n // Standard\n message: this.message,\n name: this.name,\n // Microsoft\n description: this.description,\n number: this.number,\n // Mozilla\n fileName: this.fileName,\n lineNumber: this.lineNumber,\n columnNumber: this.columnNumber,\n stack: this.stack,\n // Axios\n config: this.config,\n code: this.code\n };\n };\n return error;\n};\n","'use strict';\n\nvar utils = require('./../utils');\n\nmodule.exports = (\n utils.isStandardBrowserEnv() ?\n\n // Standard browser envs support document.cookie\n (function standardBrowserEnv() {\n return {\n write: function write(name, value, expires, path, domain, secure) {\n var cookie = [];\n cookie.push(name + '=' + encodeURIComponent(value));\n\n if (utils.isNumber(expires)) {\n cookie.push('expires=' + new Date(expires).toGMTString());\n }\n\n if (utils.isString(path)) {\n cookie.push('path=' + path);\n }\n\n if (utils.isString(domain)) {\n cookie.push('domain=' + domain);\n }\n\n if (secure === true) {\n cookie.push('secure');\n }\n\n document.cookie = cookie.join('; ');\n },\n\n read: function read(name) {\n var match = document.cookie.match(new RegExp('(^|;\\\\s*)(' + name + ')=([^;]*)'));\n return (match ? decodeURIComponent(match[3]) : null);\n },\n\n remove: function remove(name) {\n this.write(name, '', Date.now() - 86400000);\n }\n };\n })() :\n\n // Non standard browser env (web workers, react-native) lack needed support.\n (function nonStandardBrowserEnv() {\n return {\n write: function write() {},\n read: function read() { return null; },\n remove: function remove() {}\n };\n })()\n);\n","'use strict';\n\nvar isAbsoluteURL = require('../helpers/isAbsoluteURL');\nvar combineURLs = require('../helpers/combineURLs');\n\n/**\n * Creates a new URL by combining the baseURL with the requestedURL,\n * only when the requestedURL is not already an absolute URL.\n * If the requestURL is absolute, this function returns the requestedURL untouched.\n *\n * @param {string} baseURL The base URL\n * @param {string} requestedURL Absolute or relative URL to combine\n * @returns {string} The combined full path\n */\nmodule.exports = function buildFullPath(baseURL, requestedURL) {\n if (baseURL && !isAbsoluteURL(requestedURL)) {\n return combineURLs(baseURL, requestedURL);\n }\n return requestedURL;\n};\n","'use strict';\n\n/**\n * Determines whether the specified URL is absolute\n *\n * @param {string} url The URL to test\n * @returns {boolean} True if the specified URL is absolute, otherwise false\n */\nmodule.exports = function isAbsoluteURL(url) {\n // A URL is considered absolute if it begins with \"Draggable
\n * \n * ```\n */\nvar Draggable = /** @class */ (function (_super) {\n __extends(Draggable, _super);\n function Draggable(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.dragLimit = Draggable_1.getDefaultPosition();\n _this.borderWidth = Draggable_1.getDefaultPosition();\n _this.padding = Draggable_1.getDefaultPosition();\n _this.diffX = 0;\n _this.prevLeft = 0;\n _this.prevTop = 0;\n _this.dragProcessStarted = false;\n /* tslint:disable no-any */\n _this.tapHoldTimer = 0;\n _this.externalInitialize = false;\n _this.diffY = 0;\n _this.parentScrollX = 0;\n _this.parentScrollY = 0;\n _this.droppables = {};\n _this.bind();\n return _this;\n }\n Draggable_1 = Draggable;\n Draggable.prototype.bind = function () {\n this.toggleEvents();\n if (Browser.isIE) {\n addClass([this.element], 'e-block-touch');\n }\n this.droppables[this.scope] = {};\n };\n Draggable.getDefaultPosition = function () {\n return extend({}, defaultPosition);\n };\n Draggable.prototype.toggleEvents = function (isUnWire) {\n var ele;\n if (!isUndefined(this.handle)) {\n ele = select(this.handle, this.element);\n }\n var handler = (this.enableTapHold && Browser.isDevice && Browser.isTouch) ? this.mobileInitialize : this.initialize;\n if (isUnWire) {\n EventHandler.remove(ele || this.element, Browser.touchStartEvent, handler);\n }\n else {\n EventHandler.add(ele || this.element, Browser.touchStartEvent, handler, this);\n }\n };\n /* istanbul ignore next */\n Draggable.prototype.mobileInitialize = function (evt) {\n var _this = this;\n var target = evt.currentTarget;\n this.tapHoldTimer = setTimeout(function () {\n _this.externalInitialize = true;\n _this.removeTapholdTimer();\n _this.initialize(evt, target);\n }, this.tapHoldThreshold);\n EventHandler.add(document, Browser.touchMoveEvent, this.removeTapholdTimer, this);\n EventHandler.add(document, Browser.touchEndEvent, this.removeTapholdTimer, this);\n };\n /* istanbul ignore next */\n Draggable.prototype.removeTapholdTimer = function () {\n clearTimeout(this.tapHoldTimer);\n EventHandler.remove(document, Browser.touchMoveEvent, this.removeTapholdTimer);\n EventHandler.remove(document, Browser.touchEndEvent, this.removeTapholdTimer);\n };\n /* istanbul ignore next */\n Draggable.prototype.getScrollableParent = function (element, axis) {\n var scroll = { 'vertical': 'scrollHeight', 'horizontal': 'scrollWidth' };\n var client = { 'vertical': 'clientHeight', 'horizontal': 'clientWidth' };\n if (isNullOrUndefined(element)) {\n return null;\n }\n if (element[scroll[axis]] > element[client[axis]]) {\n if (axis === 'vertical' ? element.scrollTop > 0 : element.scrollLeft > 0) {\n if (axis === 'vertical') {\n this.parentScrollY = this.parentScrollY +\n (this.parentScrollY === 0 ? element.scrollTop : element.scrollTop - this.parentScrollY);\n this.tempScrollHeight = element.scrollHeight;\n }\n else {\n this.parentScrollX = this.parentScrollX +\n (this.parentScrollX === 0 ? element.scrollLeft : element.scrollLeft - this.parentScrollX);\n this.tempScrollWidth = element.scrollWidth;\n }\n if (!isNullOrUndefined(element)) {\n return this.getScrollableParent(element.parentNode, axis);\n }\n else {\n return element;\n }\n }\n else {\n return this.getScrollableParent(element.parentNode, axis);\n }\n }\n else {\n return this.getScrollableParent(element.parentNode, axis);\n }\n };\n Draggable.prototype.getScrollableValues = function () {\n this.parentScrollX = 0;\n this.parentScrollY = 0;\n var isModalDialog = this.element.classList.contains('e-dialog') && this.element.classList.contains('e-dlg-modal');\n var verticalScrollParent = this.getScrollableParent(this.element.parentNode, 'vertical');\n var horizontalScrollParent = this.getScrollableParent(this.element.parentNode, 'horizontal');\n };\n Draggable.prototype.initialize = function (evt, curTarget) {\n this.currentStateTarget = evt.target;\n if (this.isDragStarted()) {\n return;\n }\n else {\n this.isDragStarted(true);\n this.externalInitialize = false;\n }\n this.target = (evt.currentTarget || curTarget);\n this.dragProcessStarted = false;\n if (this.abort) {\n /* tslint:disable no-any */\n var abortSelectors = this.abort;\n if (typeof abortSelectors === 'string') {\n abortSelectors = [abortSelectors];\n }\n for (var i = 0; i < abortSelectors.length; i++) {\n if (!isNullOrUndefined(closest(evt.target, abortSelectors[i]))) {\n /* istanbul ignore next */\n if (this.isDragStarted()) {\n this.isDragStarted(true);\n }\n return;\n }\n }\n }\n if (this.preventDefault && !isUndefined(evt.changedTouches) && evt.type !== 'touchstart') {\n evt.preventDefault();\n }\n this.element.setAttribute('aria-grabbed', 'true');\n var intCoord = this.getCoordinates(evt);\n this.initialPosition = { x: intCoord.pageX, y: intCoord.pageY };\n if (!this.clone) {\n var pos = this.element.getBoundingClientRect();\n this.getScrollableValues();\n if (evt.clientX === evt.pageX) {\n this.parentScrollX = 0;\n }\n if (evt.clientY === evt.pageY) {\n this.parentScrollY = 0;\n }\n this.relativeXPosition = intCoord.pageX - (pos.left + this.parentScrollX);\n this.relativeYPosition = intCoord.pageY - (pos.top + this.parentScrollY);\n }\n if (this.externalInitialize) {\n this.intDragStart(evt);\n }\n else {\n EventHandler.add(document, Browser.touchMoveEvent, this.intDragStart, this);\n EventHandler.add(document, Browser.touchEndEvent, this.intDestroy, this);\n }\n this.toggleEvents(true);\n if (evt.type !== 'touchstart' && this.isPreventSelect) {\n document.body.classList.add('e-prevent-select');\n }\n this.externalInitialize = false;\n EventHandler.trigger(document.documentElement, Browser.touchStartEvent, evt);\n };\n Draggable.prototype.intDragStart = function (evt) {\n this.removeTapholdTimer();\n var isChangeTouch = !isUndefined(evt.changedTouches);\n if (isChangeTouch && (evt.changedTouches.length !== 1)) {\n return;\n }\n if (isChangeTouch) {\n evt.preventDefault();\n }\n var intCordinate = this.getCoordinates(evt);\n var pos;\n var styleProp = getComputedStyle(this.element);\n this.margin = {\n left: parseInt(styleProp.marginLeft, 10),\n top: parseInt(styleProp.marginTop, 10),\n right: parseInt(styleProp.marginRight, 10),\n bottom: parseInt(styleProp.marginBottom, 10),\n };\n var element = this.element;\n if (this.clone && this.dragTarget) {\n var intClosest = closest(evt.target, this.dragTarget);\n if (!isNullOrUndefined(intClosest)) {\n element = intClosest;\n }\n }\n /* istanbul ignore next */\n if (this.isReplaceDragEle) {\n element = this.currentStateCheck(evt.target, element);\n }\n this.offset = this.calculateParentPosition(element);\n this.position = this.getMousePosition(evt, this.isDragScroll);\n var x = this.initialPosition.x - intCordinate.pageX;\n var y = this.initialPosition.y - intCordinate.pageY;\n var distance = Math.sqrt((x * x) + (y * y));\n if ((distance >= this.distance || this.externalInitialize)) {\n var ele = this.getHelperElement(evt);\n if (!ele || isNullOrUndefined(ele)) {\n return;\n }\n var dragTargetElement = this.helperElement = ele;\n this.parentClientRect = this.calculateParentPosition(dragTargetElement.offsetParent);\n if (this.dragStart) {\n var curTarget = this.getProperTargetElement(evt);\n var args = {\n event: evt,\n element: element,\n target: curTarget,\n bindEvents: isBlazor() ? this.bindDragEvents.bind(this) : null,\n dragElement: dragTargetElement\n };\n this.trigger('dragStart', args);\n }\n if (this.dragArea) {\n this.setDragArea();\n }\n else {\n this.dragLimit = { left: 0, right: 0, bottom: 0, top: 0 };\n this.borderWidth = { top: 0, left: 0 };\n }\n pos = { left: this.position.left - this.parentClientRect.left, top: this.position.top - this.parentClientRect.top };\n if (this.clone && !this.enableTailMode) {\n this.diffX = this.position.left - this.offset.left;\n this.diffY = this.position.top - this.offset.top;\n }\n this.getScrollableValues();\n // when drag element has margin-top\n var styles = getComputedStyle(element);\n var marginTop = parseFloat(styles.marginTop);\n /* istanbul ignore next */\n if (this.clone && marginTop !== 0) {\n pos.top += marginTop;\n }\n var posValue = this.getProcessedPositionValue({\n top: (pos.top - this.diffY) + 'px',\n left: (pos.left - this.diffX) + 'px'\n });\n this.dragElePosition = { top: pos.top, left: pos.left };\n setStyleAttribute(dragTargetElement, this.getDragPosition({ position: 'absolute', left: posValue.left, top: posValue.top }));\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDragStart);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDestroy);\n if (!isBlazor()) {\n this.bindDragEvents(dragTargetElement);\n }\n }\n };\n Draggable.prototype.bindDragEvents = function (dragTargetElement) {\n if (isVisible(dragTargetElement)) {\n EventHandler.add(document, Browser.touchMoveEvent, this.intDrag, this);\n EventHandler.add(document, Browser.touchEndEvent, this.intDragStop, this);\n this.setGlobalDroppables(false, this.element, dragTargetElement);\n }\n else {\n this.toggleEvents();\n document.body.classList.remove('e-prevent-select');\n }\n };\n Draggable.prototype.elementInViewport = function (el) {\n this.top = el.offsetTop;\n this.left = el.offsetLeft;\n this.width = el.offsetWidth;\n this.height = el.offsetHeight;\n while (el.offsetParent) {\n el = el.offsetParent;\n this.top += el.offsetTop;\n this.left += el.offsetLeft;\n }\n return (this.top >= window.pageYOffset &&\n this.left >= window.pageXOffset &&\n (this.top + this.height) <= (window.pageYOffset + window.innerHeight) &&\n (this.left + this.width) <= (window.pageXOffset + window.innerWidth));\n };\n Draggable.prototype.getProcessedPositionValue = function (value) {\n if (this.queryPositionInfo) {\n return this.queryPositionInfo(value);\n }\n return value;\n };\n Draggable.prototype.calculateParentPosition = function (ele) {\n if (isNullOrUndefined(ele)) {\n return { left: 0, top: 0 };\n }\n var rect = ele.getBoundingClientRect();\n var style = getComputedStyle(ele);\n return {\n left: (rect.left + window.pageXOffset) - parseInt(style.marginLeft, 10),\n top: (rect.top + window.pageYOffset) - parseInt(style.marginTop, 10)\n };\n };\n // tslint:disable-next-line:max-func-body-length\n Draggable.prototype.intDrag = function (evt) {\n if (!isUndefined(evt.changedTouches) && (evt.changedTouches.length !== 1)) {\n return;\n }\n var left;\n var top;\n this.position = this.getMousePosition(evt, this.isDragScroll);\n var docHeight = this.getDocumentWidthHeight('Height');\n if (docHeight < this.position.top) {\n this.position.top = docHeight;\n }\n var docWidth = this.getDocumentWidthHeight('Width');\n if (docWidth < this.position.left) {\n this.position.left = docWidth;\n }\n if (this.drag) {\n var curTarget = this.getProperTargetElement(evt);\n this.trigger('drag', { event: evt, element: this.element, target: curTarget });\n }\n var eleObj = this.checkTargetElement(evt);\n if (eleObj.target && eleObj.instance) {\n /* tslint:disable no-any */\n var flag = true;\n if (this.hoverObject) {\n if (this.hoverObject.instance !== eleObj.instance) {\n this.triggerOutFunction(evt, eleObj);\n }\n else {\n flag = false;\n }\n }\n if (flag) {\n eleObj.instance.dragData[this.scope] = this.droppables[this.scope];\n eleObj.instance.intOver(evt, eleObj.target);\n this.hoverObject = eleObj;\n }\n }\n else if (this.hoverObject) {\n this.triggerOutFunction(evt, eleObj);\n }\n var helperElement = this.droppables[this.scope].helper;\n this.parentClientRect = this.calculateParentPosition(this.helperElement.offsetParent);\n var tLeft = this.parentClientRect.left;\n var tTop = this.parentClientRect.top;\n var intCoord = this.getCoordinates(evt);\n var pagex = intCoord.pageX;\n var pagey = intCoord.pageY;\n var dLeft = this.position.left - this.diffX;\n var dTop = this.position.top - this.diffY;\n var styles = getComputedStyle(helperElement);\n var marginTop = parseFloat(styles.marginTop);\n if (this.dragArea) {\n if (this.pageX !== pagex || this.skipDistanceCheck) {\n var helperWidth = helperElement.offsetWidth + (parseFloat(styles.marginLeft)\n + parseFloat(styles.marginRight));\n if (this.dragLimit.left > dLeft && dLeft > 0) {\n left = this.dragLimit.left;\n }\n else if (this.dragLimit.right + window.pageXOffset < dLeft + helperWidth && dLeft > 0) {\n left = dLeft - (dLeft - this.dragLimit.right) + window.pageXOffset - helperWidth;\n }\n else {\n left = dLeft < 0 ? this.dragLimit.left : dLeft;\n }\n }\n if (this.pageY !== pagey || this.skipDistanceCheck) {\n var helperHeight = helperElement.offsetHeight + (parseFloat(styles.marginTop)\n + parseFloat(styles.marginBottom));\n if (this.dragLimit.top > dTop && dTop > 0) {\n top = this.dragLimit.top;\n }\n else if (this.dragLimit.bottom + window.pageYOffset < dTop + helperHeight && dTop > 0) {\n top = dTop - (dTop - this.dragLimit.bottom) + window.pageYOffset - helperHeight;\n }\n else {\n top = dTop < 0 ? this.dragLimit.top : dTop;\n }\n }\n }\n else {\n left = dLeft;\n top = dTop;\n }\n var iTop = tTop + this.borderWidth.top;\n var iLeft = tLeft + this.borderWidth.left;\n if (this.dragProcessStarted) {\n if (isNullOrUndefined(top)) {\n top = this.prevTop;\n }\n if (isNullOrUndefined(left)) {\n left = this.prevLeft;\n }\n }\n var draEleTop;\n var draEleLeft;\n if (this.dragArea) {\n this.dragLimit.top = this.clone ? this.dragLimit.top : 0;\n draEleTop = (top - iTop) < 0 ? this.dragLimit.top : (top - iTop);\n draEleLeft = (left - iLeft) < 0 ? this.dragElePosition.left : (left - iLeft);\n // when drag-element has margin-top\n /* istanbul ignore next */\n if (marginTop > 0) {\n if (this.clone) {\n draEleTop += this.element.offsetTop;\n if (dTop < 0) {\n if ((this.element.offsetTop + dTop) >= 0) {\n draEleTop = this.element.offsetTop + dTop;\n }\n else {\n draEleTop -= this.element.offsetTop;\n }\n }\n draEleTop = (this.dragLimit.bottom < draEleTop) ? this.dragLimit.bottom : draEleTop;\n }\n if ((top - iTop) < 0) {\n if (dTop + marginTop + (helperElement.offsetHeight - iTop) >= 0) {\n var tempDraEleTop = this.dragLimit.top + dTop - iTop;\n if ((tempDraEleTop + marginTop + iTop) < 0) {\n draEleTop -= marginTop + iTop;\n }\n else {\n draEleTop = tempDraEleTop;\n }\n }\n else {\n draEleTop -= marginTop + iTop;\n }\n }\n }\n }\n else {\n draEleTop = top - iTop;\n draEleLeft = left - iLeft;\n }\n var dragValue = this.getProcessedPositionValue({ top: draEleTop + 'px', left: draEleLeft + 'px' });\n setStyleAttribute(helperElement, this.getDragPosition(dragValue));\n if (!this.elementInViewport(helperElement) && this.enableAutoScroll) {\n this.helperElement.scrollIntoView();\n }\n this.dragProcessStarted = true;\n this.prevLeft = left;\n this.prevTop = top;\n this.position.left = left;\n this.position.top = top;\n this.pageX = pagex;\n this.pageY = pagey;\n };\n Draggable.prototype.triggerOutFunction = function (evt, eleObj) {\n this.hoverObject.instance.intOut(evt, eleObj.target);\n this.hoverObject.instance.dragData[this.scope] = null;\n this.hoverObject = null;\n };\n Draggable.prototype.getDragPosition = function (dragValue) {\n var temp = extend({}, dragValue);\n if (this.axis) {\n if (this.axis === 'x') {\n delete temp.top;\n }\n else if (this.axis === 'y') {\n delete temp.left;\n }\n }\n return temp;\n };\n Draggable.prototype.getDocumentWidthHeight = function (str) {\n var docBody = document.body;\n var docEle = document.documentElement;\n var returnValue = Math.max(docBody['scroll' + str], docEle['scroll' + str], docBody['offset' + str], docEle['offset' + str], docEle['client' + str]);\n return returnValue;\n };\n Draggable.prototype.intDragStop = function (evt) {\n this.dragProcessStarted = false;\n if (!isUndefined(evt.changedTouches) && (evt.changedTouches.length !== 1)) {\n return;\n }\n var type = ['touchend', 'pointerup', 'mouseup'];\n if (type.indexOf(evt.type) !== -1) {\n if (this.dragStop) {\n var curTarget = this.getProperTargetElement(evt);\n this.trigger('dragStop', { event: evt, element: this.element, target: curTarget, helper: this.helperElement });\n }\n this.intDestroy(evt);\n }\n else {\n this.element.setAttribute('aria-grabbed', 'false');\n }\n var eleObj = this.checkTargetElement(evt);\n if (eleObj.target && eleObj.instance) {\n eleObj.instance.dragStopCalled = true;\n eleObj.instance.dragData[this.scope] = this.droppables[this.scope];\n eleObj.instance.intDrop(evt, eleObj.target);\n }\n this.setGlobalDroppables(true);\n document.body.classList.remove('e-prevent-select');\n };\n /**\n * @private\n */\n Draggable.prototype.intDestroy = function (evt) {\n this.dragProcessStarted = false;\n this.toggleEvents();\n document.body.classList.remove('e-prevent-select');\n this.element.setAttribute('aria-grabbed', 'false');\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDragStart);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDragStop);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDestroy);\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDrag);\n if (this.isDragStarted()) {\n this.isDragStarted(true);\n }\n };\n // triggers when property changed\n Draggable.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Draggable.prototype.getModuleName = function () {\n return 'draggable';\n };\n Draggable.prototype.isDragStarted = function (change) {\n if (change) {\n isDraggedObject.isDragged = !isDraggedObject.isDragged;\n }\n return isDraggedObject.isDragged;\n };\n Draggable.prototype.setDragArea = function () {\n var eleWidthBound;\n var eleHeightBound;\n var top = 0;\n var left = 0;\n var ele;\n var type = typeof this.dragArea;\n if (type === 'string') {\n ele = select(this.dragArea);\n }\n else {\n ele = this.dragArea;\n }\n if (ele) {\n var elementArea = ele.getBoundingClientRect();\n eleWidthBound = ele.scrollWidth ? ele.scrollWidth : elementArea.right - elementArea.left;\n eleHeightBound = ele.scrollHeight ? ele.scrollHeight : elementArea.bottom - elementArea.top;\n var keys = ['Top', 'Left', 'Bottom', 'Right'];\n var styles = getComputedStyle(ele);\n for (var i = 0; i < keys.length; i++) {\n var key = keys[i];\n var tborder = styles['border' + key + 'Width'];\n var tpadding = styles['padding' + key];\n var lowerKey = key.toLowerCase();\n this.borderWidth[lowerKey] = isNaN(parseFloat(tborder)) ? 0 : parseFloat(tborder);\n this.padding[lowerKey] = isNaN(parseFloat(tpadding)) ? 0 : parseFloat(tpadding);\n }\n top = elementArea.top;\n left = elementArea.left;\n this.dragLimit.left = left + this.borderWidth.left + this.padding.left;\n this.dragLimit.top = ele.offsetTop + this.borderWidth.top + this.padding.top;\n this.dragLimit.right = left + eleWidthBound - (this.borderWidth.right + this.padding.right);\n this.dragLimit.bottom = top + eleHeightBound - (this.borderWidth.bottom + this.padding.bottom);\n }\n };\n Draggable.prototype.getProperTargetElement = function (evt) {\n var intCoord = this.getCoordinates(evt);\n var ele;\n var prevStyle = this.helperElement.style.pointerEvents || '';\n if (compareElementParent(evt.target, this.helperElement) || evt.type.indexOf('touch') !== -1) {\n this.helperElement.style.pointerEvents = 'none';\n ele = document.elementFromPoint(intCoord.clientX, intCoord.clientY);\n this.helperElement.style.pointerEvents = prevStyle;\n }\n else {\n ele = evt.target;\n }\n return ele;\n };\n /* istanbul ignore next */\n Draggable.prototype.currentStateCheck = function (ele, oldEle) {\n var elem;\n if (!isNullOrUndefined(this.currentStateTarget) && this.currentStateTarget !== ele) {\n elem = this.currentStateTarget;\n }\n else {\n elem = !isNullOrUndefined(oldEle) ? oldEle : ele;\n }\n return elem;\n };\n Draggable.prototype.getMousePosition = function (evt, isdragscroll) {\n /* tslint:disable no-any */\n var dragEle = evt.srcElement !== undefined ? evt.srcElement : evt.target;\n var intCoord = this.getCoordinates(evt);\n var pageX;\n var pageY;\n var isOffsetParent = isNullOrUndefined(dragEle.offsetParent);\n /* istanbul ignore next */\n if (isdragscroll) {\n pageX = this.clone ? intCoord.pageX :\n (intCoord.pageX + (isOffsetParent ? 0 : dragEle.offsetParent.scrollLeft)) - this.relativeXPosition;\n pageY = this.clone ? intCoord.pageY :\n (intCoord.pageY + (isOffsetParent ? 0 : dragEle.offsetParent.scrollTop)) - this.relativeYPosition;\n }\n else {\n pageX = this.clone ? intCoord.pageX : (intCoord.pageX + window.pageXOffset) - this.relativeXPosition;\n pageY = this.clone ? intCoord.pageY : (intCoord.pageY + window.pageYOffset) - this.relativeYPosition;\n }\n if (!this.clone) {\n this.getScrollableValues();\n pageY -= this.tempScrollHeight ? this.parentScrollY : 0;\n pageX -= this.tempScrollWidth ? this.parentScrollY : 0;\n }\n return {\n left: pageX - (this.margin.left + this.cursorAt.left),\n top: pageY - (this.margin.top + this.cursorAt.top)\n };\n };\n Draggable.prototype.getCoordinates = function (evt) {\n if (evt.type.indexOf('touch') > -1) {\n return evt.changedTouches[0];\n }\n return evt;\n };\n Draggable.prototype.getHelperElement = function (evt) {\n var element;\n if (this.clone) {\n if (this.helper) {\n element = this.helper({ sender: evt, element: this.target });\n }\n else {\n element = createElement('div', { className: 'e-drag-helper e-block-touch', innerHTML: 'Draggable' });\n document.body.appendChild(element);\n }\n }\n else {\n element = this.element;\n }\n return element;\n };\n Draggable.prototype.setGlobalDroppables = function (reset, drag, helper) {\n this.droppables[this.scope] = reset ? null : {\n draggable: drag,\n helper: helper,\n draggedElement: this.element\n };\n };\n Draggable.prototype.checkTargetElement = function (evt) {\n var target = this.getProperTargetElement(evt);\n var dropIns = this.getDropInstance(target);\n if (!dropIns && target && !isNullOrUndefined(target.parentNode)) {\n var parent_1 = closest(target.parentNode, '.e-droppable') || target.parentElement;\n if (parent_1) {\n dropIns = this.getDropInstance(parent_1);\n }\n }\n return { target: target, instance: dropIns };\n };\n Draggable.prototype.getDropInstance = function (ele) {\n var name = 'getModuleName';\n var drop;\n var eleInst = ele && ele.ej2_instances;\n if (eleInst) {\n for (var _i = 0, eleInst_1 = eleInst; _i < eleInst_1.length; _i++) {\n var inst = eleInst_1[_i];\n if (inst[name]() === 'droppable') {\n drop = inst;\n break;\n }\n }\n }\n return drop;\n };\n Draggable.prototype.destroy = function () {\n this.toggleEvents(true);\n _super.prototype.destroy.call(this);\n };\n var Draggable_1;\n __decorate([\n Complex({}, Position)\n ], Draggable.prototype, \"cursorAt\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"clone\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"dragArea\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"isDragScroll\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"isReplaceDragEle\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"isPreventSelect\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"drag\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"dragStart\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"dragStop\", void 0);\n __decorate([\n Property(1)\n ], Draggable.prototype, \"distance\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"handle\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"abort\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"helper\", void 0);\n __decorate([\n Property('default')\n ], Draggable.prototype, \"scope\", void 0);\n __decorate([\n Property('')\n ], Draggable.prototype, \"dragTarget\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"axis\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"queryPositionInfo\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableTailMode\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"skipDistanceCheck\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"preventDefault\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableAutoScroll\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableTapHold\", void 0);\n __decorate([\n Property(750)\n ], Draggable.prototype, \"tapHoldThreshold\", void 0);\n Draggable = Draggable_1 = __decorate([\n NotifyPropertyChanges\n ], Draggable);\n return Draggable;\n}(Base));\nexport { Draggable };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Base } from './base';\nimport { Browser } from './browser';\nimport { isVisible, matches } from './dom';\nimport { Property, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { EventHandler } from './event-handler';\nimport { compareElementParent } from './util';\n/**\n * Droppable Module provides support to enable droppable functionality in Dom Elements.\n * ```html\n * Droppable
\n * \n * ```\n */\nvar Droppable = /** @class */ (function (_super) {\n __extends(Droppable, _super);\n function Droppable(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.mouseOver = false;\n _this.dragData = {};\n _this.dragStopCalled = false;\n _this.bind();\n return _this;\n }\n Droppable.prototype.bind = function () {\n this.wireEvents();\n };\n Droppable.prototype.wireEvents = function () {\n EventHandler.add(this.element, Browser.touchEndEvent, this.intDrop, this);\n };\n // triggers when property changed\n Droppable.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Droppable.prototype.getModuleName = function () {\n return 'droppable';\n };\n Droppable.prototype.intOver = function (event, element) {\n if (!this.mouseOver) {\n var drag = this.dragData[this.scope];\n this.trigger('over', { event: event, target: element, dragData: drag });\n this.mouseOver = true;\n }\n };\n Droppable.prototype.intOut = function (event, element) {\n if (this.mouseOver) {\n this.trigger('out', { evt: event, target: element });\n this.mouseOver = false;\n }\n };\n Droppable.prototype.intDrop = function (evt, element) {\n if (!this.dragStopCalled) {\n return;\n }\n else {\n this.dragStopCalled = false;\n }\n var accept = true;\n var drag = this.dragData[this.scope];\n var isDrag = drag ? (drag.helper && isVisible(drag.helper)) : false;\n var area;\n if (isDrag) {\n area = this.isDropArea(evt, drag.helper, element);\n if (this.accept) {\n accept = matches(drag.helper, this.accept);\n }\n }\n if (isDrag && this.drop && area.canDrop && accept) {\n this.trigger('drop', { event: evt, target: area.target, droppedElement: drag.helper, dragData: drag });\n }\n this.mouseOver = false;\n };\n Droppable.prototype.isDropArea = function (evt, helper, element) {\n var area = { canDrop: true, target: element || evt.target };\n var isTouch = evt.type === 'touchend';\n if (isTouch || area.target === helper) {\n helper.style.display = 'none';\n var coord = isTouch ? (evt.changedTouches[0]) : evt;\n var ele = document.elementFromPoint(coord.clientX, coord.clientY);\n area.canDrop = false;\n area.canDrop = compareElementParent(ele, this.element);\n if (area.canDrop) {\n area.target = ele;\n }\n helper.style.display = '';\n }\n return area;\n };\n Droppable.prototype.destroy = function () {\n EventHandler.remove(this.element, Browser.touchEndEvent, this.intDrop);\n _super.prototype.destroy.call(this);\n };\n __decorate([\n Property()\n ], Droppable.prototype, \"accept\", void 0);\n __decorate([\n Property('default')\n ], Droppable.prototype, \"scope\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"drop\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"over\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"out\", void 0);\n Droppable = __decorate([\n NotifyPropertyChanges\n ], Droppable);\n return Droppable;\n}(Base));\nexport { Droppable };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { Base } from './base';\nvar keyCode = {\n 'backspace': 8,\n 'tab': 9,\n 'enter': 13,\n 'shift': 16,\n 'control': 17,\n 'alt': 18,\n 'pause': 19,\n 'capslock': 20,\n 'space': 32,\n 'escape': 27,\n 'pageup': 33,\n 'pagedown': 34,\n 'end': 35,\n 'home': 36,\n 'leftarrow': 37,\n 'uparrow': 38,\n 'rightarrow': 39,\n 'downarrow': 40,\n 'insert': 45,\n 'delete': 46,\n 'f1': 112,\n 'f2': 113,\n 'f3': 114,\n 'f4': 115,\n 'f5': 116,\n 'f6': 117,\n 'f7': 118,\n 'f8': 119,\n 'f9': 120,\n 'f10': 121,\n 'f11': 122,\n 'f12': 123,\n 'semicolon': 186,\n 'plus': 187,\n 'comma': 188,\n 'minus': 189,\n 'dot': 190,\n 'forwardslash': 191,\n 'graveaccent': 192,\n 'openbracket': 219,\n 'backslash': 220,\n 'closebracket': 221,\n 'singlequote': 222\n};\n/**\n * KeyboardEvents class enables you to bind key action desired key combinations for ex., Ctrl+A, Delete, Alt+Space etc.\n * ```html\n * \n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Popup = /** @class */ (function (_super) {\n __extends(Popup, _super);\n function Popup(element, options) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Called internally if any of the property value changed.\n * @private\n */\n Popup.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });\n break;\n case 'height':\n setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'zIndex':\n setStyleAttribute(this.element, { 'zIndex': newProp.zIndex });\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'position':\n case 'relateTo':\n this.refreshPosition();\n break;\n case 'offsetX':\n var x = newProp.offsetX - oldProp.offsetX;\n this.element.style.left = (parseInt(this.element.style.left, 10) + (x)).toString() + 'px';\n break;\n case 'offsetY':\n var y = newProp.offsetY - oldProp.offsetY;\n this.element.style.top = (parseInt(this.element.style.top, 10) + (y)).toString() + 'px';\n break;\n case 'content':\n this.setContent();\n break;\n case 'actionOnScroll':\n if (newProp.actionOnScroll !== 'none') {\n this.wireScrollEvents();\n }\n else {\n this.unwireScrollEvents();\n }\n break;\n }\n }\n };\n /**\n * gets the Component module name.\n * @private\n */\n Popup.prototype.getModuleName = function () {\n return 'popup';\n };\n /**\n * To resolve if any collision occurs.\n */\n Popup.prototype.resolveCollision = function () {\n this.checkCollision();\n };\n /**\n * gets the persisted state properties of the Component.\n */\n Popup.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * To destroy the control.\n */\n Popup.prototype.destroy = function () {\n this.element.classList.remove(CLASSNAMES.ROOT, CLASSNAMES.RTL, CLASSNAMES.OPEN, CLASSNAMES.CLOSE);\n this.unwireEvents();\n _super.prototype.destroy.call(this);\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n Popup.prototype.render = function () {\n this.element.classList.add(CLASSNAMES.ROOT);\n var styles = {};\n if (this.zIndex !== 1000) {\n styles.zIndex = this.zIndex;\n }\n if (this.width !== 'auto') {\n styles.width = formatUnit(this.width);\n }\n if (this.height !== 'auto') {\n styles.height = formatUnit(this.height);\n }\n setStyleAttribute(this.element, styles);\n this.fixedParent = false;\n this.setEnableRtl();\n this.setContent();\n };\n Popup.prototype.wireEvents = function () {\n if (Browser.isDevice) {\n EventHandler.add(window, 'orientationchange', this.orientationOnChange, this);\n }\n if (this.actionOnScroll !== 'none') {\n this.wireScrollEvents();\n }\n };\n Popup.prototype.wireScrollEvents = function () {\n if (this.getRelateToElement()) {\n for (var _i = 0, _a = this.getScrollableParent(this.getRelateToElement()); _i < _a.length; _i++) {\n var parent_1 = _a[_i];\n EventHandler.add(parent_1, 'scroll', this.scrollRefresh, this);\n }\n }\n };\n Popup.prototype.unwireEvents = function () {\n if (Browser.isDevice) {\n EventHandler.remove(window, 'orientationchange', this.orientationOnChange);\n }\n if (this.actionOnScroll !== 'none') {\n this.unwireScrollEvents();\n }\n };\n Popup.prototype.unwireScrollEvents = function () {\n if (this.getRelateToElement()) {\n for (var _i = 0, _a = this.getScrollableParent(this.getRelateToElement()); _i < _a.length; _i++) {\n var parent_2 = _a[_i];\n EventHandler.remove(parent_2, 'scroll', this.scrollRefresh);\n }\n }\n };\n Popup.prototype.getRelateToElement = function () {\n var relateToElement = this.relateTo === '' || isNullOrUndefined(this.relateTo) ?\n document.body : this.relateTo;\n this.setProperties({ relateTo: relateToElement }, true);\n return ((typeof this.relateTo) === 'string') ?\n document.querySelector(this.relateTo) : this.relateTo;\n };\n Popup.prototype.scrollRefresh = function (e) {\n if (this.actionOnScroll === 'reposition') {\n if (!(this.element.offsetParent === e.target ||\n (this.element.offsetParent && this.element.offsetParent.tagName === 'BODY' &&\n e.target.parentElement == null))) {\n this.refreshPosition();\n }\n }\n else if (this.actionOnScroll === 'hide') {\n this.hide();\n }\n if (this.actionOnScroll !== 'none') {\n if (this.getRelateToElement()) {\n var targetVisible = this.isElementOnViewport(this.getRelateToElement(), e.target);\n if (!targetVisible && !this.targetInvisibleStatus) {\n this.trigger('targetExitViewport');\n this.targetInvisibleStatus = true;\n }\n else if (targetVisible) {\n this.targetInvisibleStatus = false;\n }\n }\n }\n };\n /**\n * This method is to get the element visibility on viewport when scroll\n * the page. This method will returns true even though 1 px of element\n * part is in visible.\n */\n Popup.prototype.isElementOnViewport = function (relateToElement, scrollElement) {\n var scrollParents = this.getScrollableParent(relateToElement);\n for (var parent_3 = 0; parent_3 < scrollParents.length; parent_3++) {\n if (this.isElementVisible(relateToElement, scrollParents[parent_3])) {\n continue;\n }\n else {\n return false;\n }\n }\n return true;\n };\n Popup.prototype.isElementVisible = function (relateToElement, scrollElement) {\n var rect = this.checkGetBoundingClientRect(relateToElement);\n if (!rect.height || !rect.width) {\n return false;\n }\n if (!isNullOrUndefined(this.checkGetBoundingClientRect(scrollElement))) {\n var parent_4 = scrollElement.getBoundingClientRect();\n return !(rect.bottom < parent_4.top) &&\n (!(rect.bottom > parent_4.bottom) &&\n (!(rect.right > parent_4.right) &&\n !(rect.left < parent_4.left)));\n }\n else {\n var win = window;\n var windowView = {\n top: win.scrollY,\n left: win.scrollX,\n right: win.scrollX + win.outerWidth,\n bottom: win.scrollY + win.outerHeight\n };\n var off = calculatePosition(relateToElement);\n var ele = {\n top: off.top,\n left: off.left,\n right: off.left + rect.width,\n bottom: off.top + rect.height\n };\n var elementView = {\n top: windowView.bottom - ele.top,\n left: windowView.right - ele.left,\n bottom: ele.bottom - windowView.top,\n right: ele.right - windowView.left\n };\n return elementView.top > 0\n && elementView.left > 0\n && elementView.right > 0\n && elementView.bottom > 0;\n }\n };\n /**\n * Initialize the event handler\n * @private\n */\n Popup.prototype.preRender = function () {\n //There is no event handler\n };\n Popup.prototype.setEnableRtl = function () {\n this.reposition();\n this.enableRtl ? this.element.classList.add(CLASSNAMES.RTL) : this.element.classList.remove(CLASSNAMES.RTL);\n };\n Popup.prototype.setContent = function () {\n if (!isNullOrUndefined(this.content)) {\n this.element.innerHTML = '';\n if (typeof (this.content) === 'string') {\n this.element.textContent = this.content;\n }\n else {\n this.element.appendChild(this.content);\n }\n }\n };\n Popup.prototype.orientationOnChange = function () {\n var _this = this;\n setTimeout(function () {\n _this.refreshPosition();\n }, 200);\n };\n /**\n * Based on the `relative` element and `offset` values, `Popup` element position will refreshed.\n */\n Popup.prototype.refreshPosition = function (target, collision) {\n if (!isNullOrUndefined(target)) {\n this.checkFixedParent(target);\n }\n this.reposition();\n if (!collision) {\n this.checkCollision();\n }\n };\n Popup.prototype.reposition = function () {\n var pos;\n var position;\n var relateToElement = this.getRelateToElement();\n if (typeof this.position.X === 'number' && typeof this.position.Y === 'number') {\n pos = { left: this.position.X, top: this.position.Y };\n }\n else if ((typeof this.position.X === 'string' && typeof this.position.Y === 'number') ||\n (typeof this.position.X === 'number' && typeof this.position.Y === 'string')) {\n var display = this.element.style.display;\n var parentDisplay = void 0;\n this.element.style.display = 'block';\n if (this.element.classList.contains('e-dlg-modal')) {\n parentDisplay = this.element.parentElement.style.display;\n this.element.parentElement.style.display = 'block';\n }\n position = this.getAnchorPosition(relateToElement, this.element, this.position, this.offsetX, this.offsetY);\n if (typeof this.position.X === 'string') {\n pos = { left: position.left, top: this.position.Y };\n }\n else {\n pos = { left: this.position.X, top: position.top };\n }\n this.element.style.display = display;\n if (this.element.classList.contains('e-dlg-modal')) {\n this.element.parentElement.style.display = parentDisplay;\n }\n }\n else if (relateToElement) {\n var display = this.element.style.display;\n this.element.style.display = 'block';\n pos = this.getAnchorPosition(relateToElement, this.element, this.position, this.offsetX, this.offsetY);\n this.element.style.display = display;\n }\n else {\n pos = { left: 0, top: 0 };\n }\n if (!isNullOrUndefined(pos)) {\n this.element.style.left = pos.left + 'px';\n this.element.style.top = pos.top + 'px';\n }\n };\n Popup.prototype.checkGetBoundingClientRect = function (ele) {\n var eleRect;\n try {\n eleRect = ele.getBoundingClientRect();\n return eleRect;\n }\n catch (error) {\n return null;\n }\n };\n Popup.prototype.getAnchorPosition = function (anchorEle, ele, position, offsetX, offsetY) {\n var eleRect = this.checkGetBoundingClientRect(ele);\n var anchorRect = this.checkGetBoundingClientRect(anchorEle);\n if (isNullOrUndefined(eleRect) || isNullOrUndefined(anchorRect)) {\n return null;\n }\n var anchor = anchorEle;\n var anchorPos = { left: 0, top: 0 };\n if (ele.offsetParent && ele.offsetParent.tagName === 'BODY' && anchorEle.tagName === 'BODY') {\n anchorPos = calculatePosition(anchorEle);\n }\n else {\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName !== 'BODY')) {\n ele = ele.parentElement;\n }\n anchorPos = calculateRelativeBasedPosition(anchor, ele);\n }\n switch (position.X) {\n default:\n case 'left':\n break;\n case 'center':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.left += (window.innerWidth / 2 - eleRect.width / 2);\n }\n else if (this.targetType === 'container') {\n anchorPos.left += (anchorRect.width / 2 - eleRect.width / 2);\n }\n else {\n anchorPos.left += (anchorRect.width / 2);\n }\n break;\n case 'right':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.left += (window.innerWidth - eleRect.width);\n }\n else if (this.targetType === 'container') {\n anchorPos.left += (anchorRect.width - eleRect.width);\n }\n else {\n anchorPos.left += (anchorRect.width);\n }\n break;\n }\n switch (position.Y) {\n default:\n case 'top':\n break;\n case 'center':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.top += (window.innerHeight / 2 - eleRect.height / 2);\n }\n else if (this.targetType === 'container') {\n anchorPos.top += (anchorRect.height / 2 - eleRect.height / 2);\n }\n else {\n anchorPos.top += (anchorRect.height / 2);\n }\n break;\n case 'bottom':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.top += (window.innerHeight - eleRect.height);\n }\n else if (this.targetType === 'container') {\n anchorPos.top += (anchorRect.height - eleRect.height);\n }\n else {\n anchorPos.top += (anchorRect.height);\n }\n break;\n }\n anchorPos.left += offsetX;\n anchorPos.top += offsetY;\n return anchorPos;\n };\n Popup.prototype.callFlip = function (param) {\n var relateToElement = this.getRelateToElement();\n flip(this.element, relateToElement, this.offsetX, this.offsetY, this.position.X, this.position.Y, this.viewPortElement, param, this.fixedParent);\n };\n Popup.prototype.callFit = function (param) {\n if (isCollide(this.element, this.viewPortElement).length !== 0) {\n if (isNullOrUndefined(this.viewPortElement)) {\n var data = fit(this.element, this.viewPortElement, param);\n if (param.X) {\n this.element.style.left = data.left + 'px';\n }\n if (param.Y) {\n this.element.style.top = data.top + 'px';\n }\n }\n else {\n var elementRect = this.checkGetBoundingClientRect(this.element);\n var viewPortRect = this.checkGetBoundingClientRect(this.viewPortElement);\n if (isNullOrUndefined(elementRect) || isNullOrUndefined(viewPortRect)) {\n return null;\n }\n if (param && param.Y === true) {\n if (viewPortRect.top > elementRect.top) {\n this.element.style.top = '0px';\n }\n else if (viewPortRect.bottom < elementRect.bottom) {\n this.element.style.top = parseInt(this.element.style.top, 10) - (elementRect.bottom - viewPortRect.bottom) + 'px';\n }\n }\n if (param && param.X === true) {\n if (viewPortRect.right < elementRect.right) {\n this.element.style.left = parseInt(this.element.style.left, 10) - (elementRect.right - viewPortRect.right) + 'px';\n }\n else if (viewPortRect.left > elementRect.left) {\n this.element.style.left = parseInt(this.element.style.left, 10) + (viewPortRect.left - elementRect.left) + 'px';\n }\n }\n }\n }\n };\n Popup.prototype.checkCollision = function () {\n var horz = this.collision.X;\n var vert = this.collision.Y;\n if (horz === 'none' && vert === 'none') {\n return;\n }\n if (horz === 'flip' && vert === 'flip') {\n this.callFlip({ X: true, Y: true });\n }\n else if (horz === 'fit' && vert === 'fit') {\n this.callFit({ X: true, Y: true });\n }\n else {\n if (horz === 'flip') {\n this.callFlip({ X: true, Y: false });\n }\n else if (vert === 'flip') {\n this.callFlip({ Y: true, X: false });\n }\n if (horz === 'fit') {\n this.callFit({ X: true, Y: false });\n }\n else if (vert === 'fit') {\n this.callFit({ X: false, Y: true });\n }\n }\n };\n /**\n * Shows the popup element from screen.\n * @param { AnimationModel | Function } collisionOrAnimationOptions? - To pass animation options or collision function.\n * @param { Function } collision? - To pass the collision function.\n * @param { HTMLElement } relativeElement? - To calculate the zIndex value dynamically.\n */\n Popup.prototype.show = function (animationOptions, relativeElement) {\n var _this = this;\n this.wireEvents();\n if (this.zIndex === 1000 || !isNullOrUndefined(relativeElement)) {\n var zIndexElement = (isNullOrUndefined(relativeElement)) ? this.element : relativeElement;\n this.zIndex = getZindexPartial(zIndexElement);\n setStyleAttribute(this.element, { 'zIndex': this.zIndex });\n }\n animationOptions = (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?\n animationOptions : this.showAnimation;\n if (this.collision.X !== 'none' || this.collision.Y !== 'none') {\n removeClass([this.element], CLASSNAMES.CLOSE);\n addClass([this.element], CLASSNAMES.OPEN);\n this.checkCollision();\n removeClass([this.element], CLASSNAMES.OPEN);\n addClass([this.element], CLASSNAMES.CLOSE);\n }\n if (!isNullOrUndefined(animationOptions)) {\n animationOptions.begin = function () {\n if (!_this.isDestroyed) {\n removeClass([_this.element], CLASSNAMES.CLOSE);\n addClass([_this.element], CLASSNAMES.OPEN);\n }\n };\n animationOptions.end = function () {\n if (!_this.isDestroyed) {\n _this.trigger('open');\n }\n };\n new Animation(animationOptions).animate(this.element);\n }\n else {\n removeClass([this.element], CLASSNAMES.CLOSE);\n addClass([this.element], CLASSNAMES.OPEN);\n this.trigger('open');\n }\n };\n /**\n * Hides the popup element from screen.\n * @param { AnimationModel } animationOptions? - To give the animation options.\n */\n Popup.prototype.hide = function (animationOptions) {\n var _this = this;\n animationOptions = (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?\n animationOptions : this.hideAnimation;\n if (!isNullOrUndefined(animationOptions)) {\n animationOptions.end = function () {\n if (!_this.isDestroyed) {\n removeClass([_this.element], CLASSNAMES.OPEN);\n addClass([_this.element], CLASSNAMES.CLOSE);\n _this.trigger('close');\n }\n };\n new Animation(animationOptions).animate(this.element);\n }\n else {\n removeClass([this.element], CLASSNAMES.OPEN);\n addClass([this.element], CLASSNAMES.CLOSE);\n this.trigger('close');\n }\n this.unwireEvents();\n };\n /**\n * Gets scrollable parent elements for the given element.\n * @param { HTMLElement } element - Specify the element to get the scrollable parents of it.\n */\n Popup.prototype.getScrollableParent = function (element) {\n this.checkFixedParent(element);\n return getScrollableParent(element, this.fixedParent);\n };\n Popup.prototype.checkFixedParent = function (element) {\n var parent = element.parentElement;\n while (parent && parent.tagName !== 'HTML') {\n var parentStyle = getComputedStyle(parent);\n if (parentStyle.position === 'fixed' && this.element.offsetParent && this.element.offsetParent.tagName === 'BODY') {\n this.element.style.position = 'fixed';\n this.fixedParent = true;\n }\n parent = parent.parentElement;\n if (isNullOrUndefined(this.element.offsetParent) && parentStyle.position === 'fixed'\n && this.element.style.position === 'fixed') {\n this.fixedParent = true;\n }\n }\n };\n __decorate([\n Property('auto')\n ], Popup.prototype, \"height\", void 0);\n __decorate([\n Property('auto')\n ], Popup.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"content\", void 0);\n __decorate([\n Property('container')\n ], Popup.prototype, \"targetType\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"viewPortElement\", void 0);\n __decorate([\n Property({ X: 'none', Y: 'none' })\n ], Popup.prototype, \"collision\", void 0);\n __decorate([\n Property('')\n ], Popup.prototype, \"relateTo\", void 0);\n __decorate([\n Complex({}, PositionData)\n ], Popup.prototype, \"position\", void 0);\n __decorate([\n Property(0)\n ], Popup.prototype, \"offsetX\", void 0);\n __decorate([\n Property(0)\n ], Popup.prototype, \"offsetY\", void 0);\n __decorate([\n Property(1000)\n ], Popup.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], Popup.prototype, \"enableRtl\", void 0);\n __decorate([\n Property('reposition')\n ], Popup.prototype, \"actionOnScroll\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"showAnimation\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"hideAnimation\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"targetExitViewport\", void 0);\n Popup = __decorate([\n NotifyPropertyChanges\n ], Popup);\n return Popup;\n}(Component));\nexport { Popup };\n/**\n * Gets scrollable parent elements for the given element.\n * @param { HTMLElement } element - Specify the element to get the scrollable parents of it.\n * @private\n */\nexport function getScrollableParent(element, fixedParent) {\n var eleStyle = getComputedStyle(element);\n var scrollParents = [];\n var overflowRegex = /(auto|scroll)/;\n var parent = element.parentElement;\n while (parent && parent.tagName !== 'HTML') {\n var parentStyle = getComputedStyle(parent);\n if (!(eleStyle.position === 'absolute' && parentStyle.position === 'static')\n && overflowRegex.test(parentStyle.overflow + parentStyle.overflowY + parentStyle.overflowX)) {\n scrollParents.push(parent);\n }\n parent = parent.parentElement;\n }\n if (!fixedParent) {\n scrollParents.push(document);\n }\n return scrollParents;\n}\n/**\n * Gets the maximum z-index of the given element.\n * @param { HTMLElement } element - Specify the element to get the maximum z-index of it.\n * @private\n */\nexport function getZindexPartial(element) {\n // upto body traversal\n var parent = element.parentElement;\n var parentZindex = [];\n while (parent) {\n if (parent.tagName !== 'BODY') {\n var index = document.defaultView.getComputedStyle(parent, null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(parent, null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n parentZindex.push(index);\n }\n parent = parent.parentElement;\n }\n else {\n break;\n }\n }\n //Body direct children element traversal\n var childrenZindex = [];\n for (var i = 0; i < document.body.children.length; i++) {\n if (!element.isEqualNode(document.body.children[i])) {\n var index = document.defaultView.getComputedStyle(document.body.children[i], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(document.body.children[i], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n childrenZindex.push(index);\n }\n }\n }\n childrenZindex.push('999');\n var siblingsZindex = [];\n if (!isNullOrUndefined(element.parentElement) && element.parentElement.tagName !== 'BODY') {\n var childNodes = [].slice.call(element.parentElement.children);\n for (var i = 0; i < childNodes.length; i++) {\n var index = document.defaultView.getComputedStyle(childNodes[i], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(childNodes[i], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n siblingsZindex.push(index);\n }\n }\n }\n var finalValue = parentZindex.concat(childrenZindex, siblingsZindex);\n var currentZindexValue = Math.max.apply(Math, finalValue) + 1;\n // Checking the max-zindex value\n return currentZindexValue > 2147483647 ? 2147483647 : currentZindexValue;\n}\n/**\n * Gets the maximum z-index of the page.\n * @param { HTMLElement } tagName - Specify the tagName to get the maximum z-index of it.\n * @private\n */\nexport function getMaxZindex(tagName) {\n if (tagName === void 0) { tagName = ['*']; }\n var maxZindex = [];\n for (var i = 0; i < tagName.length; i++) {\n var elements = document.getElementsByTagName(tagName[i]);\n for (var i_1 = 0; i_1 < elements.length; i_1++) {\n var index = document.defaultView.getComputedStyle(elements[i_1], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(elements[i_1], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n maxZindex.push(index);\n }\n }\n }\n var currentZindexValue = Math.max.apply(Math, maxZindex) + 1;\n return currentZindexValue > 2147483647 ? 2147483647 : currentZindexValue;\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, ChildProperty, NotifyPropertyChanges, Animation } from '@syncfusion/ej2-base';\nimport { Browser, isNullOrUndefined as isNOU, getUniqueID, formatUnit, EventHandler } from '@syncfusion/ej2-base';\nimport { Collection, Complex, setStyleAttribute, Event, detach, L10n } from '@syncfusion/ej2-base';\nimport { attributes, extend, closest, compile as templateCompiler, classList, isUndefined } from '@syncfusion/ej2-base';\nimport { Touch, isBlazor, SanitizeHtmlHelper, removeClass } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { getZindexPartial } from '@syncfusion/ej2-popups';\nvar ROOT = 'e-toast';\nvar CONTAINER = 'e-toast-container';\nvar TITLE = 'e-toast-title';\nvar WIDTHFULL = 'e-toast-full-width';\nvar CONTENT = 'e-toast-content';\nvar MESSAGE = 'e-toast-message';\nvar ICON = 'e-toast-icon';\nvar PROGRESS = 'e-toast-progress';\nvar ACTIOBUTTONS = 'e-toast-actions';\nvar CLOSEBTN = 'e-toast-close-icon';\nvar RTL = 'e-rtl';\nvar TOAST_REF_ELEMENT = 'e-toast-ref-element';\nvar TOAST_BLAZOR_HIDDEN = 'e-blazor-toast-hidden';\n/**\n * An object that is used to configure the Toast X Y positions.\n */\nvar ToastPosition = /** @class */ (function (_super) {\n __extends(ToastPosition, _super);\n function ToastPosition() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Left')\n ], ToastPosition.prototype, \"X\", void 0);\n __decorate([\n Property('Top')\n ], ToastPosition.prototype, \"Y\", void 0);\n return ToastPosition;\n}(ChildProperty));\nexport { ToastPosition };\n/**\n * An object that is used to configure the action button model properties and event.\n */\nvar ButtonModelProps = /** @class */ (function (_super) {\n __extends(ButtonModelProps, _super);\n function ButtonModelProps() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], ButtonModelProps.prototype, \"model\", void 0);\n __decorate([\n Property(null)\n ], ButtonModelProps.prototype, \"click\", void 0);\n return ButtonModelProps;\n}(ChildProperty));\nexport { ButtonModelProps };\n/**\n * An object that is used to configure the animation object of Toast.\n */\nvar ToastAnimations = /** @class */ (function (_super) {\n __extends(ToastAnimations, _super);\n function ToastAnimations() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('FadeIn')\n ], ToastAnimations.prototype, \"effect\", void 0);\n __decorate([\n Property(600)\n ], ToastAnimations.prototype, \"duration\", void 0);\n __decorate([\n Property('ease')\n ], ToastAnimations.prototype, \"easing\", void 0);\n return ToastAnimations;\n}(ChildProperty));\nexport { ToastAnimations };\n/**\n * An object that is used to configure the show/hide animation settings of Toast.\n */\nvar ToastAnimationSettings = /** @class */ (function (_super) {\n __extends(ToastAnimationSettings, _super);\n function ToastAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({ effect: 'FadeIn', duration: 600, easing: 'ease' }, ToastAnimations)\n ], ToastAnimationSettings.prototype, \"show\", void 0);\n __decorate([\n Complex({ effect: 'FadeOut', duration: 600, easing: 'ease' }, ToastAnimations)\n ], ToastAnimationSettings.prototype, \"hide\", void 0);\n return ToastAnimationSettings;\n}(ChildProperty));\nexport { ToastAnimationSettings };\n/**\n * The Toast is a notification pop-up that showing on desired position which can provide an information to the user.\n * * ```html\n * Popup Content
\n * \n * ```\n */\nvar Toast = /** @class */ (function (_super) {\n __extends(Toast, _super);\n /**\n * Initializes a new instance of the Toast class.\n * @param options - Specifies Toast model properties as options.\n * @param element - Specifies the element that is rendered as a Toast.\n */\n function Toast(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.toastCollection = [];\n return _this;\n }\n /**\n * Gets the Component module name.\n * @private\n */\n Toast.prototype.getModuleName = function () {\n return 'toast';\n };\n /**\n * Gets the persisted state properties of the Component.\n */\n Toast.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers, attributes and classes.\n */\n Toast.prototype.destroy = function () {\n this.hide('All');\n this.element.classList.remove(CONTAINER);\n setStyleAttribute(this.element, { 'position': '', 'z-index': '' });\n if (!isNOU(this.refElement) && !isNOU(this.refElement.parentElement)) {\n this.refElement.parentElement.insertBefore(this.element, this.refElement);\n detach(this.refElement);\n this.refElement = undefined;\n }\n if (!this.isBlazorServer()) {\n _super.prototype.destroy.call(this);\n }\n };\n /**\n * Initialize the event handler\n * @private\n */\n Toast.prototype.preRender = function () {\n //There is no event handler\n this.isDevice = Browser.isDevice;\n if (this.width === '300px') {\n this.width = (this.isDevice && screen.width < 768) ? '100%' : '300px';\n }\n if (isNOU(this.target)) {\n this.target = document.body;\n }\n if (this.enableRtl && !this.isBlazorServer()) {\n this.element.classList.add(RTL);\n }\n };\n /**\n * Initialize the component rendering\n * @private\n */\n Toast.prototype.render = function () {\n this.progressObj = [];\n this.intervalId = [];\n this.contentTemplate = null;\n this.toastTemplate = null;\n if (this.isDevice && screen.width < 768) {\n new Touch(this.element, { swipe: this.swipeHandler.bind(this) });\n }\n this.renderComplete();\n this.initRenderClass = this.element.className;\n };\n /**\n * To show Toast element on a document with the relative position.\n * @param {ToastModel} toastObj? - To show Toast element on screen.\n * @returns void\n\n */\n Toast.prototype.show = function (toastObj) {\n var collectionObj;\n if (!isNOU(toastObj)) {\n this.templateChanges(toastObj);\n collectionObj = JSON.parse(JSON.stringify(toastObj));\n extend(this, this, toastObj);\n }\n if (isNOU(this.toastContainer)) {\n this.toastContainer = this.getContainer();\n var target = typeof (this.target) === 'string' ? document.querySelector(this.target) : document.body;\n if (isNOU(target)) {\n return;\n }\n if (target.tagName === 'BODY') {\n this.toastContainer.style.position = 'fixed';\n }\n else {\n this.toastContainer.style.position = 'absolute';\n target.style.position = 'relative';\n }\n this.setPositioning(this.position);\n target.appendChild(this.toastContainer);\n }\n if (this.isBlazorServer() && this.element.classList.contains('e-control')) {\n this.isToastModel(toastObj);\n return;\n }\n this.toastEle = this.createElement('div', { className: ROOT, id: getUniqueID('toast') });\n this.setWidthHeight();\n this.setCSSClass(this.cssClass);\n (isNOU(this.template) || this.template === '') ? this.personalizeToast() : this.templateRendering();\n this.setProgress();\n this.setCloseButton();\n this.setAria();\n this.appendToTarget(toastObj);\n if (!isNOU(collectionObj)) {\n extend(collectionObj, { element: [this.toastEle] }, true);\n this.toastCollection.push(collectionObj);\n }\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * @hidden\n\n * This method applicable for blazor alone.\n */\n Toast.prototype.showToast = function (id, toastObj) {\n this.toastEle = this.element.querySelector('#' + id);\n this.show(toastObj);\n };\n Toast.prototype.isToastModel = function (toastObj) {\n this.toastContainer = this.element;\n this.setPositioning(this.position);\n var proxy = this;\n if (!isNOU(proxy.element.lastElementChild)) {\n this.setProgress();\n }\n this.setAria();\n this.appendToTarget(toastObj);\n };\n Toast.prototype.swipeHandler = function (e) {\n var toastEle = closest(e.originalEvent.target, '.' + ROOT + ':not(.' + CONTAINER + ')');\n var hideAnimation = this.animation.hide.effect;\n if (!isNOU(toastEle)) {\n if (e.swipeDirection === 'Right') {\n this.animation.hide.effect = 'SlideRightOut';\n this.hide(toastEle);\n }\n else if (e.swipeDirection === 'Left') {\n this.animation.hide.effect = 'SlideLeftOut';\n this.hide(toastEle);\n }\n this.animation.hide.effect = hideAnimation;\n }\n };\n Toast.prototype.templateChanges = function (toastObj) {\n if (!isUndefined(toastObj.content) && !isNOU(this.contentTemplate) && this.content !== toastObj.content) {\n this.clearContentTemplate();\n }\n if (!isUndefined(toastObj.template) && !isNOU(this.toastTemplate) && this.template !== toastObj.template) {\n this.clearToastTemplate();\n }\n };\n Toast.prototype.setCSSClass = function (cssClass) {\n if (cssClass) {\n var split = cssClass.indexOf(',') !== -1 ? ',' : ' ';\n classList(this.toastEle, cssClass.split(split), []);\n }\n };\n Toast.prototype.setWidthHeight = function () {\n if (this.width === '300px') {\n this.toastEle.style.width = formatUnit(this.width);\n }\n else if (this.width === '100%') {\n this.toastContainer.classList.add(WIDTHFULL);\n }\n else {\n this.toastEle.style.width = formatUnit(this.width);\n this.toastContainer.classList.remove(WIDTHFULL);\n }\n this.toastEle.style.height = formatUnit(this.height);\n };\n Toast.prototype.templateRendering = function () {\n this.fetchEle(this.toastEle, this.template, 'template');\n };\n /**\n * @hidden\n */\n Toast.prototype.sanitizeHelper = function (value) {\n if (this.enableHtmlSanitizer) {\n var item = SanitizeHtmlHelper.beforeSanitize();\n var beforeEvent = {\n cancel: false,\n helper: null\n };\n extend(item, item, beforeEvent);\n this.trigger('beforeSanitizeHtml', item);\n if (item.cancel && !isNOU(item.helper)) {\n value = item.helper(value);\n }\n else if (!item.cancel) {\n value = SanitizeHtmlHelper.serializeValue(item, value);\n }\n }\n return value;\n };\n /**\n * To Hide Toast element on a document.\n * To Hide all toast element when passing 'All'.\n * @param {HTMLElement| Element| string} element? - To Hide Toast element on screen.\n * @returns void\n */\n Toast.prototype.hide = function (element) {\n if (isNOU(this.toastContainer) || this.toastContainer.childElementCount === 0) {\n return;\n }\n if (typeof element === 'string' && element === 'All') {\n for (var i = 0; i < this.toastContainer.childElementCount; i++) {\n this.destroyToast(this.toastContainer.children[i]);\n }\n return;\n }\n if (isNOU(element)) {\n element = (this.newestOnTop ? this.toastContainer.lastElementChild : this.toastContainer.firstElementChild);\n }\n this.destroyToast(element);\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.clearTemplate();\n }\n };\n Toast.prototype.fetchEle = function (ele, value, prob) {\n value = typeof (value) === 'string' ? this.sanitizeHelper(value) : value;\n var templateFn;\n var tempVar;\n var tmpArray;\n var templateProps;\n var templateValue;\n if (ele.classList.contains(TITLE)) {\n templateProps = this.element.id + 'title';\n }\n else if (ele.classList.contains(CONTENT)) {\n templateProps = this.element.id + 'content';\n }\n else {\n templateProps = this.element.id + 'template';\n }\n prob === 'content' ? tempVar = this.contentTemplate : tempVar = this.toastTemplate;\n if (!isNOU(tempVar)) {\n ele.appendChild(tempVar.cloneNode(true));\n return ele;\n }\n try {\n if (document.querySelectorAll(value).length > 0) {\n var elem = null;\n if (prob !== 'title') {\n elem = document.querySelector(value);\n ele.appendChild(elem);\n elem.style.display = '';\n }\n var clo = isNOU(elem) ? tempVar : elem.cloneNode(true);\n prob === 'content' ? this.contentTemplate = clo : this.toastTemplate = clo;\n }\n }\n catch (e) {\n templateFn = templateCompiler(value);\n templateValue = value;\n }\n if (!isNOU(templateFn)) {\n if (!this.isBlazorServer()) {\n tmpArray = templateFn({}, this, prob, null, true);\n }\n else {\n var isString = true;\n tmpArray = templateFn({}, this, prob, templateProps, isString);\n }\n }\n if (!isNOU(tmpArray) && tmpArray.length > 0 && !(isNOU(tmpArray[0].tagName) && tmpArray.length === 1)) {\n [].slice.call(tmpArray).forEach(function (el) {\n if (!isNOU(el.tagName)) {\n el.style.display = '';\n }\n ele.appendChild(el);\n });\n }\n else if (ele.childElementCount === 0) {\n ele.innerHTML = value;\n }\n return ele;\n };\n Toast.prototype.clearProgress = function (intervalId) {\n if (!isNOU(this.intervalId[intervalId])) {\n clearInterval(this.intervalId[intervalId]);\n delete this.intervalId[intervalId];\n }\n if (!isNOU(this.progressObj[intervalId])) {\n clearInterval(this.progressObj[intervalId].intervalId);\n delete this.progressObj[intervalId];\n }\n };\n Toast.prototype.clearContainerPos = function () {\n var _this = this;\n if (this.isBlazorServer()) {\n this.toastContainer = null;\n return;\n }\n if (this.customPosition) {\n setStyleAttribute(this.toastContainer, { 'left': '', 'top': '' });\n this.toastContainer = null;\n this.customPosition = false;\n }\n else {\n [ROOT + '-top-left',\n ROOT + '-top-right',\n ROOT + '-bottom-left',\n ROOT + '-bottom-right',\n ROOT + '-bottom-center',\n ROOT + '-top-center',\n ROOT + '-full-width'].forEach(function (pos) {\n if (!isNOU(_this.toastContainer) && _this.toastContainer.classList.contains(pos)) {\n _this.toastContainer.classList.remove(pos);\n }\n });\n this.toastContainer = null;\n }\n if (!isNOU(this.contentTemplate)) {\n this.clearContentTemplate();\n }\n if (!isNOU(this.toastTemplate)) {\n this.clearToastTemplate();\n }\n };\n Toast.prototype.clearContentTemplate = function () {\n this.contentTemplate.style.display = 'none';\n document.body.appendChild(this.contentTemplate);\n this.contentTemplate = null;\n };\n Toast.prototype.clearToastTemplate = function () {\n this.toastTemplate.style.display = 'none';\n document.body.appendChild(this.toastTemplate);\n this.toastTemplate = null;\n };\n Toast.prototype.isBlazorServer = function () {\n return (isBlazor() && this.isServerRendered);\n };\n Toast.prototype.destroyToast = function (toastEle) {\n var _this = this;\n var toastObj;\n for (var i = 0; i < this.toastCollection.length; i++) {\n if (this.toastCollection[i].element[0] === toastEle) {\n toastObj = this.toastCollection[i];\n this.toastCollection.splice(i, 1);\n }\n }\n var hideAnimate = this.animation.hide;\n var animate = {\n duration: hideAnimate.duration, name: hideAnimate.effect, timingFunction: hideAnimate.easing\n };\n var intervalId = parseInt(toastEle.id.split('toast_')[1], 10);\n var toastClose = this.isBlazorServer() ? {\n options: toastObj,\n toastContainer: this.toastContainer\n } : {\n options: toastObj,\n toastContainer: this.toastContainer,\n toastObj: this,\n };\n if (!isNOU(this.progressObj[intervalId]) && !isNOU(toastEle.querySelector('.' + PROGRESS))) {\n this.progressObj[intervalId].progressEle.style.width = '0%';\n }\n animate.end = function () {\n _this.clearProgress(intervalId);\n if (!_this.isBlazorServer() || isNOU(toastObj)) {\n detach(toastEle);\n }\n _this.trigger('close', toastClose);\n if (_this.toastContainer.childElementCount === 0) {\n _this.clearContainerPos();\n }\n };\n new Animation({}).animate(toastEle, animate);\n };\n Toast.prototype.personalizeToast = function () {\n this.setIcon();\n this.setTitle();\n this.setContent();\n this.actionButtons();\n };\n Toast.prototype.setAria = function () {\n attributes(this.toastEle, { 'role': 'alert' });\n };\n Toast.prototype.setPositioning = function (pos) {\n if (this.isBlazorServer()) {\n return;\n }\n if (!isNaN(parseFloat(pos.X)) || !isNaN(parseFloat(pos.Y))) {\n this.customPosition = true;\n setStyleAttribute(this.toastContainer, { 'left': formatUnit(pos.X), 'top': formatUnit(pos.Y) });\n }\n else {\n this.toastContainer.classList.add(ROOT + '-' + pos.Y.toString().toLowerCase() + '-' + pos.X.toString().toLowerCase());\n }\n };\n Toast.prototype.setCloseButton = function () {\n if (!this.showCloseButton) {\n return;\n }\n var localeText = { close: 'Close' };\n this.l10n = new L10n('toast', localeText, this.locale);\n this.l10n.setLocale(this.locale);\n var closeIconTitle = this.l10n.getConstant('close');\n var closeBtn = this.createElement('div', { className: CLOSEBTN + ' e-icons ', attrs: { tabindex: '0', 'aria-label': closeIconTitle } });\n this.toastEle.appendChild(closeBtn);\n };\n Toast.prototype.setProgress = function () {\n if (this.timeOut > 0) {\n var id = parseInt(this.toastEle.id.split('toast_')[1], 10);\n this.intervalId[id] = window.setTimeout(this.destroyToast.bind(this, this.toastEle), this.timeOut);\n this.progressObj[id] = { hideEta: null, intervalId: null, maxHideTime: null, element: null, timeOutId: null, progressEle: null };\n this.progressObj[id].maxHideTime = parseFloat(this.timeOut + '');\n this.progressObj[id].hideEta = new Date().getTime() + this.progressObj[id].maxHideTime;\n this.progressObj[id].element = this.toastEle;\n if (this.extendedTimeout > 0) {\n EventHandler.add(this.toastEle, 'mouseover', this.toastHoverAction.bind(this, id));\n EventHandler.add(this.toastEle, 'mouseleave', this.delayedToastProgress.bind(this, id));\n this.progressObj[id].timeOutId = this.intervalId[id];\n }\n if (this.showProgressBar) {\n this.progressBarEle = this.createElement('div', { className: PROGRESS });\n this.toastEle.insertBefore(this.progressBarEle, this.toastEle.children[0]);\n this.progressObj[id].intervalId = setInterval(this.updateProgressBar.bind(this, this.progressObj[id]), 10);\n this.progressObj[id].progressEle = this.progressBarEle;\n }\n }\n };\n Toast.prototype.toastHoverAction = function (id) {\n clearTimeout(this.progressObj[id].timeOutId);\n clearInterval(this.progressObj[id].intervalId);\n this.progressObj[id].hideEta = 0;\n var toastEle = this.progressObj[id].element;\n if (!isNOU(toastEle.querySelector('.' + PROGRESS))) {\n this.progressObj[id].progressEle.style.width = '0%';\n }\n };\n Toast.prototype.delayedToastProgress = function (id) {\n var progress = this.progressObj[id];\n var toastEle = progress.element;\n progress.timeOutId = window.setTimeout(this.destroyToast.bind(this, toastEle), this.extendedTimeout);\n progress.maxHideTime = parseFloat(this.extendedTimeout + '');\n progress.hideEta = new Date().getTime() + progress.maxHideTime;\n if (!isNOU(toastEle.querySelector('.' + PROGRESS))) {\n progress.intervalId = setInterval(this.updateProgressBar.bind(this, progress), 10);\n }\n };\n Toast.prototype.updateProgressBar = function (progressObj) {\n var percentage = ((progressObj.hideEta - (new Date().getTime())) / progressObj.maxHideTime) * 100;\n percentage = this.progressDirection === 'Ltr' ? 100 - percentage : percentage;\n progressObj.progressEle.style.width = percentage + '%';\n };\n Toast.prototype.setIcon = function () {\n if (isNOU(this.icon) || this.icon.length === 0) {\n return;\n }\n var iconEle = this.createElement('div', { className: ICON + ' e-icons ' + this.icon });\n this.toastEle.appendChild(iconEle);\n };\n Toast.prototype.setTitle = function () {\n if (isNOU(this.title)) {\n return;\n }\n var titleEle = this.createElement('div', { className: TITLE });\n titleEle = this.fetchEle(titleEle, this.title, 'title');\n var msgContainer = this.createElement('div', { className: MESSAGE });\n msgContainer.appendChild(titleEle);\n this.toastEle.appendChild(msgContainer);\n };\n Toast.prototype.setContent = function () {\n var contentEle = this.createElement('div', { className: CONTENT });\n var ele = this.element;\n if (isNOU(this.content) || this.content === '') {\n var isContent = this.element.innerHTML.replace(/\\s/g, '') !== '';\n if ((ele.children.length > 0 || isContent) && !(ele.firstElementChild && ele.firstElementChild.classList.contains(ROOT))) {\n this.innerEle = document.createDocumentFragment();\n var tempEle_1 = this.createElement('div');\n while (ele.childNodes.length !== 0) {\n this.innerEle.appendChild(this.element.childNodes[0]);\n }\n contentEle.appendChild(this.innerEle);\n [].slice.call(contentEle.children).forEach(function (ele) {\n tempEle_1.appendChild(ele.cloneNode(true));\n });\n this.content = tempEle_1;\n this.appendMessageContainer(contentEle);\n }\n }\n else {\n if (typeof (this.content) === 'object' && !isNOU(this.content.tagName)) {\n contentEle.appendChild(this.content);\n this.content = this.content.cloneNode(true);\n this.appendMessageContainer(contentEle);\n }\n else {\n contentEle = this.fetchEle(contentEle, this.content, 'content');\n this.appendMessageContainer(contentEle);\n }\n }\n };\n Toast.prototype.appendMessageContainer = function (element) {\n if (this.toastEle.querySelectorAll('.' + MESSAGE).length > 0) {\n this.toastEle.querySelector('.' + MESSAGE).appendChild(element);\n }\n else {\n var msgContainer = this.createElement('div', { className: MESSAGE });\n msgContainer.appendChild(element);\n this.toastEle.appendChild(msgContainer);\n }\n };\n Toast.prototype.actionButtons = function () {\n var _this = this;\n var actionBtnContainer = this.createElement('div', { className: ACTIOBUTTONS });\n [].slice.call(this.buttons).forEach(function (actionBtn) {\n if (isNOU(actionBtn.model)) {\n return;\n }\n var btnDom = _this.createElement('button');\n btnDom.setAttribute('type', 'button');\n if (isNOU(actionBtn.model.cssClass) || actionBtn.model.cssClass.length === 0) {\n actionBtn.model.cssClass = 'e-primary';\n }\n btnDom.classList.add('e-small');\n new Button(actionBtn.model, btnDom);\n if (!isNOU(actionBtn.click) && typeof (actionBtn.click) === 'function') {\n EventHandler.add(btnDom, 'click', actionBtn.click);\n }\n actionBtnContainer.appendChild(btnDom);\n });\n if (actionBtnContainer.childElementCount > 0) {\n this.appendMessageContainer(actionBtnContainer);\n }\n };\n Toast.prototype.appendToTarget = function (toastObj) {\n var _this = this;\n var toastBeforeOpen = this.isBlazorServer() ? {\n options: toastObj,\n element: this.toastEle,\n cancel: false\n } : {\n options: toastObj,\n toastObj: this,\n element: this.toastEle,\n cancel: false\n };\n this.trigger('beforeOpen', toastBeforeOpen, function (toastBeforeOpenArgs) {\n if (!toastBeforeOpenArgs.cancel) {\n if (!_this.isBlazorServer()) {\n _this.toastEle.style.display = 'none';\n }\n if (_this.newestOnTop && _this.toastContainer.childElementCount !== 0) {\n _this.toastContainer.insertBefore(_this.toastEle, _this.toastContainer.children[0]);\n }\n else if (!_this.isBlazorServer()) {\n _this.toastContainer.appendChild(_this.toastEle);\n }\n removeClass([_this.toastEle], TOAST_BLAZOR_HIDDEN);\n EventHandler.add(_this.toastEle, 'click', _this.clickHandler, _this);\n EventHandler.add(_this.toastEle, 'keydown', _this.keyDownHandler, _this);\n _this.toastContainer.style.zIndex = getZindexPartial(_this.toastContainer) + '';\n _this.displayToast(_this.toastEle, toastObj);\n }\n else if (_this.isBlazorServer()) {\n var intervalId = parseInt(_this.toastEle.id.split('toast_')[1], 10);\n _this.clearProgress(intervalId);\n detach(_this.toastEle);\n if (_this.toastContainer.childElementCount === 0) {\n _this.clearContainerPos();\n }\n }\n });\n };\n Toast.prototype.clickHandler = function (e) {\n var _this = this;\n if (!this.isBlazorServer()) {\n e.stopPropagation();\n }\n var target = e.target;\n var toastEle = closest(target, '.' + ROOT);\n var clickArgs = this.isBlazorServer() ? {\n element: toastEle, cancel: false, clickToClose: false, originalEvent: e\n } : {\n element: toastEle, cancel: false, clickToClose: false, originalEvent: e, toastObj: this\n };\n var isCloseIcon = target.classList.contains(CLOSEBTN);\n this.trigger('click', clickArgs, function (toastClickArgs) {\n if ((isCloseIcon && !toastClickArgs.cancel) || toastClickArgs.clickToClose) {\n _this.destroyToast(toastEle);\n }\n });\n };\n Toast.prototype.keyDownHandler = function (e) {\n if (e.target.classList.contains(CLOSEBTN) &&\n (e.keyCode === 13 || e.keyCode === 32)) {\n var target = e.target;\n var toastEle = closest(target, '.' + ROOT);\n this.destroyToast(toastEle);\n }\n };\n Toast.prototype.displayToast = function (toastEle, toastObj) {\n var _this = this;\n var showAnimate = this.animation.show;\n var animate = {\n duration: showAnimate.duration, name: showAnimate.effect, timingFunction: showAnimate.easing\n };\n var toastOpen = this.isBlazorServer() ? {\n options: toastObj,\n element: this.toastEle\n } : {\n options: toastObj,\n toastObj: this,\n element: this.toastEle,\n };\n animate.begin = function () {\n toastEle.style.display = '';\n };\n animate.end = function () {\n _this.trigger('open', toastOpen);\n };\n new Animation(animate).animate(toastEle);\n };\n Toast.prototype.getContainer = function () {\n this.element.classList.add(CONTAINER);\n return this.element;\n };\n /**\n * Called internally if any of the property value changed.\n * @private\n */\n Toast.prototype.onPropertyChanged = function (newProp, oldProp) {\n var container = this.element;\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 newProp.enableRtl ? container.classList.add(RTL) : container.classList.remove(RTL);\n break;\n }\n }\n };\n __decorate([\n Property('300px')\n ], Toast.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Toast.prototype, \"height\", void 0);\n __decorate([\n Property(null)\n ], Toast.prototype, \"title\", void 0);\n __decorate([\n Property(null)\n ], Toast.prototype, \"content\", void 0);\n __decorate([\n Property(true)\n ], Toast.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property(null)\n ], Toast.prototype, \"icon\", void 0);\n __decorate([\n Property(null)\n ], Toast.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], Toast.prototype, \"template\", void 0);\n __decorate([\n Property(true)\n ], Toast.prototype, \"newestOnTop\", void 0);\n __decorate([\n Property(false)\n ], Toast.prototype, \"showCloseButton\", void 0);\n __decorate([\n Property(false)\n ], Toast.prototype, \"showProgressBar\", void 0);\n __decorate([\n Property(5000)\n ], Toast.prototype, \"timeOut\", void 0);\n __decorate([\n Property('Rtl')\n ], Toast.prototype, \"progressDirection\", void 0);\n __decorate([\n Property(1000)\n ], Toast.prototype, \"extendedTimeout\", void 0);\n __decorate([\n Complex({}, ToastAnimationSettings)\n ], Toast.prototype, \"animation\", void 0);\n __decorate([\n Complex({}, ToastPosition)\n ], Toast.prototype, \"position\", void 0);\n __decorate([\n Collection([{}], ButtonModelProps)\n ], Toast.prototype, \"buttons\", void 0);\n __decorate([\n Property(null)\n ], Toast.prototype, \"target\", void 0);\n __decorate([\n Event()\n ], Toast.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Toast.prototype, \"beforeSanitizeHtml\", void 0);\n __decorate([\n Event()\n ], Toast.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], Toast.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], Toast.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], Toast.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], Toast.prototype, \"click\", void 0);\n Toast = __decorate([\n NotifyPropertyChanges\n ], Toast);\n return Toast;\n}(Component));\nexport { Toast };\n","var instances = 'ej2_instances';\nvar uid = 0;\nvar isBlazorPlatform = false;\n/**\n * Function to check whether the platform is blazor or not.\n * @return {boolean} result\n * @private\n */\nexport function disableBlazorMode() {\n isBlazorPlatform = false;\n}\n/**\n * Create Instance from constructor function with desired parameters.\n * @param {Function} classFunction - Class function to which need to create instance\n * @param {any[]} params - Parameters need to passed while creating instance\n * @return {any}\n * @private\n */\nexport function createInstance(classFunction, params) {\n var arrayParam = params;\n arrayParam.unshift(undefined);\n return new (Function.prototype.bind.apply(classFunction, arrayParam));\n}\n/**\n * To run a callback function immediately after the browser has completed other operations.\n * @param {Function} handler - callback function to be triggered.\n * @return {Function}\n * @private\n */\nexport function setImmediate(handler) {\n var unbind;\n var num = new Uint16Array(5);\n var intCrypto = window.msCrypto || window.crypto;\n intCrypto.getRandomValues(num);\n var secret = 'ej2' + combineArray(num);\n var messageHandler = function (event) {\n if (event.source === window && typeof event.data === 'string' && event.data.length <= 32 && event.data === secret) {\n handler();\n unbind();\n }\n };\n window.addEventListener('message', messageHandler, false);\n window.postMessage(secret, '*');\n return unbind = function () {\n window.removeEventListener('message', messageHandler);\n handler = messageHandler = secret = undefined;\n };\n}\n/**\n * To get nameSpace value from the desired object.\n * @param {string} nameSpace - String value to the get the inner object\n * @param {any} obj - Object to get the inner object value.\n * @return {any}\n * @private\n */\nexport function getValue(nameSpace, obj) {\n /* tslint:disable no-any */\n var value = obj;\n var splits = nameSpace.replace(/\\[/g, '.').replace(/\\]/g, '').split('.');\n for (var i = 0; i < splits.length && !isUndefined(value); i++) {\n value = value[splits[i]];\n }\n return value;\n}\n/**\n * To set value for the nameSpace in desired object.\n * @param {string} nameSpace - String value to the get the inner object\n * @param {any} value - Value that you need to set.\n * @param {any} obj - Object to get the inner object value.\n * @return {void}\n * @private\n */\nexport function setValue(nameSpace, value, obj) {\n var keys = nameSpace.replace(/\\[/g, '.').replace(/\\]/g, '').split('.');\n var start = obj || {};\n var fromObj = start;\n var i;\n var length = keys.length;\n var key;\n for (i = 0; i < length; i++) {\n key = keys[i];\n if (i + 1 === length) {\n fromObj[key] = value === undefined ? {} : value;\n }\n else if (isNullOrUndefined(fromObj[key])) {\n fromObj[key] = {};\n }\n fromObj = fromObj[key];\n }\n return start;\n}\n/**\n * Delete an item from Object\n * @param {any} obj - Object in which we need to delete an item.\n * @param {string} params - String value to the get the inner object\n * @return {void}\n * @private\n */\nexport function deleteObject(obj, key) {\n delete obj[key];\n}\n/**\n * Check weather the given argument is only object.\n * @param {any} obj - Object which is need to check.\n * @return {boolean}\n * @private\n */\nexport function isObject(obj) {\n var objCon = {};\n return (!isNullOrUndefined(obj) && obj.constructor === objCon.constructor);\n}\n/**\n * To get enum value by giving the string.\n * @param {any} enumObject - Enum object.\n * @param {string} enumValue - Enum value to be searched\n * @return {any}\n * @private\n */\nexport function getEnumValue(enumObject, enumValue) {\n return enumObject[enumValue];\n}\n/**\n * Merge the source object into destination object.\n * @param {any} source - source object which is going to merge with destination object\n * @param {any} destination - object need to be merged\n * @return {void}\n * @private\n */\nexport function merge(source, destination) {\n if (!isNullOrUndefined(destination)) {\n var temrObj = source;\n var tempProp = destination;\n var keys = Object.keys(destination);\n var deepmerge = 'deepMerge';\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n if (!isNullOrUndefined(temrObj[deepmerge]) && (temrObj[deepmerge].indexOf(key) !== -1) &&\n (isObject(tempProp[key]) || Array.isArray(tempProp[key]))) {\n extend(temrObj[key], temrObj[key], tempProp[key], true);\n }\n else {\n temrObj[key] = tempProp[key];\n }\n }\n }\n}\n/**\n * Extend the two object with newer one.\n * @param {any} copied - Resultant object after merged\n * @param {Object} first - First object need to merge\n * @param {Object} second - Second object need to merge\n * @return {Object}\n * @private\n */\nexport function extend(copied, first, second, deep) {\n var result = copied && typeof copied === 'object' ? copied : {};\n var length = arguments.length;\n if (deep) {\n length = length - 1;\n }\n var _loop_1 = function (i) {\n if (!arguments_1[i]) {\n return \"continue\";\n }\n var obj1 = arguments_1[i];\n Object.keys(obj1).forEach(function (key) {\n var src = result[key];\n var copy = obj1[key];\n var clone;\n var isArrayChanged = Array.isArray(copy) && Array.isArray(src) && (copy.length !== src.length);\n var blazorEventExtend = isBlazor() ? (!(src instanceof Event) && !isArrayChanged) : true;\n if (deep && blazorEventExtend && (isObject(copy) || Array.isArray(copy))) {\n if (isObject(copy)) {\n clone = src ? src : {};\n if (Array.isArray(clone) && clone.hasOwnProperty('isComplexArray')) {\n extend(clone, {}, copy, deep);\n }\n else {\n result[key] = extend(clone, {}, copy, deep);\n }\n }\n else {\n /* istanbul ignore next */\n clone = isBlazor() ? src && Object.keys(copy).length : src ? src : [];\n result[key] = extend([], clone, copy, deep);\n }\n }\n else {\n result[key] = copy;\n }\n });\n };\n var arguments_1 = arguments;\n for (var i = 1; i < length; i++) {\n _loop_1(i);\n }\n return result;\n}\n/**\n * To check whether the object is null or undefined.\n * @param {Object} value - To check the object is null or undefined\n * @return {boolean}\n * @private\n */\nexport function isNullOrUndefined(value) {\n return value === undefined || value === null;\n}\n/**\n * To check whether the object is undefined.\n * @param {Object} value - To check the object is undefined\n * @return {boolean}\n * @private\n */\nexport function isUndefined(value) {\n return ('undefined' === typeof value);\n}\n/**\n * To return the generated unique name\n * @param {string} definedName - To concatenate the unique id to provided name\n * @return {string}\n * @private\n */\nexport function getUniqueID(definedName) {\n return definedName + '_' + uid++;\n}\n/**\n * It limits the rate at which a function can fire. The function will fire only once every provided second instead of as quickly.\n * @param {Function} eventFunction - Specifies the function to run when the event occurs\n * @param {number} delay - A number that specifies the milliseconds for function delay call option\n * @return {Function}\n * @private\n */\nexport function debounce(eventFunction, delay) {\n var out;\n // tslint:disable-next-line\n return function () {\n var _this = this;\n var args = arguments;\n var later = function () {\n out = null;\n return eventFunction.apply(_this, args);\n };\n clearTimeout(out);\n out = setTimeout(later, delay);\n };\n}\n// Added since lint ignored after added '//tslint:disable-next-line' \n/* tslint:disable:no-any */\n/**\n * To convert the object to string for query url\n * @param {Object} data\n * @returns string\n * @private\n */\nexport function queryParams(data) {\n var array = [];\n var keys = Object.keys(data);\n for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {\n var key = keys_2[_i];\n array.push(encodeURIComponent(key) + '=' + encodeURIComponent('' + data[key]));\n }\n return array.join('&');\n}\n/**\n * To check whether the given array contains object.\n * @param {T[]} value- Specifies the T type array to be checked.\n * @private\n */\nexport function isObjectArray(value) {\n var parser = Object.prototype.toString;\n if (parser.call(value) === '[object Array]') {\n if (parser.call(value[0]) === '[object Object]') {\n return true;\n }\n }\n return false;\n}\n/**\n * To check whether the child element is descendant to parent element or parent and child are same element.\n * @param{Element} - Specifies the child element to compare with parent.\n * @param{Element} - Specifies the parent element.\n * @return boolean\n * @private\n */\nexport function compareElementParent(child, parent) {\n var node = child;\n if (node === parent) {\n return true;\n }\n else if (node === document || !node) {\n return false;\n }\n else {\n return compareElementParent(node.parentNode, parent);\n }\n}\n/**\n * To throw custom error message.\n * @param{string} - Specifies the error message to be thrown.\n * @private\n */\nexport function throwError(message) {\n try {\n throw new Error(message);\n }\n catch (e) {\n throw e.message + '\\n' + e.stack;\n }\n}\n/**\n * This function is used to print given element\n * @param{Element} element - Specifies the print content element.\n * @param{Window} printWindow - Specifies the print window.\n * @private\n */\nexport function print(element, printWindow) {\n var div = document.createElement('div');\n var links = [].slice.call(document.getElementsByTagName('head')[0].querySelectorAll('base, link, style'));\n var reference = '';\n if (isNullOrUndefined(printWindow)) {\n printWindow = window.open('', 'print', 'height=452,width=1024,tabbar=no');\n }\n div.appendChild(element.cloneNode(true));\n for (var i = 0, len = links.length; i < len; i++) {\n reference += links[i].outerHTML;\n }\n printWindow.document.write(' ' + reference + '' + div.innerHTML +\n '' + '');\n printWindow.document.close();\n printWindow.focus();\n // tslint:disable-next-line\n var interval = setInterval(function () {\n if (printWindow.ready) {\n printWindow.print();\n printWindow.close();\n clearInterval(interval);\n }\n }, 500);\n return printWindow;\n}\n/**\n * Function to normalize the units applied to the element.\n * @param {number|string} value\n * @return {string} result\n * @private\n */\nexport function formatUnit(value) {\n var result = value + '';\n if (result.match(/auto|%|px|vh|vm|vmax|vmin|em/)) {\n return result;\n }\n return result + 'px';\n}\n/**\n * Function to check whether the platform is blazor or not.\n * @return {boolean} result\n * @private\n */\nexport function enableBlazorMode() {\n isBlazorPlatform = true;\n}\n/**\n * Function to check whether the platform is blazor or not.\n * @return {boolean} result\n * @private\n */\nexport function isBlazor() {\n return isBlazorPlatform;\n}\n/**\n * Function to convert xPath to DOM element in blazor platform\n * @return {HTMLElement} result\n * @param {HTMLElement | object} element\n * @private\n */\nexport function getElement(element) {\n var xPath = 'xPath';\n if (!(element instanceof Node) && isBlazor() && !isNullOrUndefined(element[xPath])) {\n return document.evaluate(element[xPath], document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;\n }\n return element;\n}\n/**\n * Function to fetch the Instances of a HTML element for the given component.\n * @param {string | HTMLElement} element\n * @param {any} component\n * @return {Object} inst\n * @private\n */\n// tslint:disable-next-line\nexport function getInstance(element, component) {\n // tslint:disable-next-line:no-any\n var elem = (typeof (element) === 'string') ? document.querySelector(element) : element;\n if (elem[instances]) {\n for (var _i = 0, _a = elem[instances]; _i < _a.length; _i++) {\n var inst = _a[_i];\n if (inst instanceof component) {\n return inst;\n }\n }\n }\n return null;\n}\n/**\n * Function to add instances for the given element.\n * @param {string | HTMLElement} element\n * @param {Object} instance\n * @return {void}\n * @private\n */\nexport function addInstance(element, instance) {\n // tslint:disable-next-line:no-any\n var elem = (typeof (element) === 'string') ? document.querySelector(element) : element;\n if (elem[instances]) {\n elem[instances].push(instance);\n }\n else {\n elem[instances] = [instance];\n }\n}\n/**\n * Function to generate the unique id.\n * @return {any}\n * @private\n */\n// tslint:disable-next-line:no-any\nexport function uniqueID() {\n // tslint:disable-next-line:no-any\n if ((typeof window) === 'undefined') {\n return;\n }\n // tslint:disable-next-line:no-any\n var num = new Uint16Array(5);\n var intCrypto = window.msCrypto || window.crypto;\n return intCrypto.getRandomValues(num);\n}\nfunction combineArray(num) {\n var ret = '';\n for (var i = 0; i < 5; i++) {\n ret += (i ? ',' : '') + num[i];\n }\n return ret;\n}\n","/**\n * Parser\n */\nvar defaultNumberingSystem = {\n 'latn': {\n '_digits': '0123456789',\n '_type': 'numeric'\n }\n};\nimport { isUndefined, getValue, isBlazor } from '../util';\nvar latnRegex = /^[0-9]*$/;\nvar defaultNumberSymbols = {\n 'decimal': '.',\n 'group': ',',\n 'percentSign': '%',\n 'plusSign': '+',\n 'minusSign': '-',\n 'infinity': '∞',\n 'nan': 'NaN',\n 'exponential': 'E'\n};\nvar latnNumberSystem = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];\n/**\n * Interface for parser base\n * @private\n */\nvar ParserBase = /** @class */ (function () {\n function ParserBase() {\n }\n /**\n * Returns the cldr object for the culture specifies\n * @param {Object} obj - Specifies the object from which culture object to be acquired.\n * @param {string} cName - Specifies the culture name.\n * @returns {Object}\n */\n ParserBase.getMainObject = function (obj, cName) {\n var value = isBlazor() ? cName : 'main.' + cName;\n return getValue(value, obj);\n };\n /**\n * Returns the numbering system object from given cldr data.\n * @param {Object} obj - Specifies the object from which number system is acquired.\n * @returns {Object}\n */\n ParserBase.getNumberingSystem = function (obj) {\n return getValue('supplemental.numberingSystems', obj) || this.numberingSystems;\n };\n /**\n * Returns the reverse of given object keys or keys specified.\n * @param {Object} prop - Specifies the object to be reversed.\n * @param {number[]} keys - Optional parameter specifies the custom keyList for reversal.\n * @returns {Object}\n */\n ParserBase.reverseObject = function (prop, keys) {\n var propKeys = keys || Object.keys(prop);\n var res = {};\n for (var _i = 0, propKeys_1 = propKeys; _i < propKeys_1.length; _i++) {\n var key = propKeys_1[_i];\n /* tslint:disable no-any */\n if (!res.hasOwnProperty(prop[key])) {\n res[prop[key]] = key;\n }\n }\n return res;\n };\n /**\n * Returns the symbol regex by skipping the escape sequence.\n * @param {string[]} props - Specifies the array values to be skipped.\n * @returns {RegExp}\n */\n ParserBase.getSymbolRegex = function (props) {\n var regexStr = props.map(function (str) {\n return str.replace(/([.*+?^=!:${}()|\\[\\]\\/\\\\])/g, '\\\\$1');\n }).join('|');\n return new RegExp(regexStr, 'g');\n };\n ParserBase.getSymbolMatch = function (prop) {\n var matchKeys = Object.keys(defaultNumberSymbols);\n var ret = {};\n for (var _i = 0, matchKeys_1 = matchKeys; _i < matchKeys_1.length; _i++) {\n var key = matchKeys_1[_i];\n ret[prop[key]] = defaultNumberSymbols[key];\n }\n return ret;\n };\n /**\n * Returns regex string for provided value\n * @param {string} val\n * @returns {string}\n */\n ParserBase.constructRegex = function (val) {\n var len = val.length;\n var ret = '';\n for (var i = 0; i < len; i++) {\n if (i !== len - 1) {\n ret += val[i] + '|';\n }\n else {\n ret += val[i];\n }\n }\n return ret;\n };\n /**\n * Returns the replaced value of matching regex and obj mapper.\n * @param {string} value - Specifies the values to be replaced.\n * @param {RegExp} regex - Specifies the regex to search.\n * @param {Object} obj - Specifies the object matcher to be replace value parts.\n * @returns {string}\n */\n ParserBase.convertValueParts = function (value, regex, obj) {\n return value.replace(regex, function (str) {\n return obj[str];\n });\n };\n /**\n * Returns default numbering system object for formatting from cldr data\n * @param {Object} obj\n * @returns {NumericObject}\n */\n ParserBase.getDefaultNumberingSystem = function (obj) {\n var ret = {};\n ret.obj = getValue('numbers', obj);\n ret.nSystem = getValue('defaultNumberingSystem', ret.obj);\n return ret;\n };\n /**\n * Returns the replaced value of matching regex and obj mapper.\n */\n ParserBase.getCurrentNumericOptions = function (curObj, numberSystem, needSymbols, blazorMode) {\n var ret = {};\n var cur = this.getDefaultNumberingSystem(curObj);\n if (!isUndefined(cur.nSystem) || blazorMode) {\n var digits = blazorMode ? getValue('obj.mapperDigits', cur) : getValue(cur.nSystem + '._digits', numberSystem);\n if (!isUndefined(digits)) {\n ret.numericPair = this.reverseObject(digits, latnNumberSystem);\n ret.numberParseRegex = new RegExp(this.constructRegex(digits), 'g');\n ret.numericRegex = '[' + digits[0] + '-' + digits[9] + ']';\n if (needSymbols) {\n ret.numericRegex = digits[0] + '-' + digits[9];\n ret.symbolNumberSystem = getValue(blazorMode ? 'numberSymbols' : 'symbols-numberSystem-' + cur.nSystem, cur.obj);\n ret.symbolMatch = this.getSymbolMatch(ret.symbolNumberSystem);\n ret.numberSystem = cur.nSystem;\n }\n }\n }\n return ret;\n };\n /**\n * Returns number mapper object for the provided cldr data\n * @param {Object} curObj\n * @param {Object} numberSystem\n * @param {boolean} isNumber\n * @returns {NumberMapper}\n */\n ParserBase.getNumberMapper = function (curObj, numberSystem, isNumber) {\n var ret = { mapper: {} };\n var cur = this.getDefaultNumberingSystem(curObj);\n if (!isUndefined(cur.nSystem)) {\n ret.numberSystem = cur.nSystem;\n ret.numberSymbols = getValue('symbols-numberSystem-' + cur.nSystem, cur.obj);\n ret.timeSeparator = getValue('timeSeparator', ret.numberSymbols);\n var digits = getValue(cur.nSystem + '._digits', numberSystem);\n if (!isUndefined(digits)) {\n for (var _i = 0, latnNumberSystem_1 = latnNumberSystem; _i < latnNumberSystem_1.length; _i++) {\n var i = latnNumberSystem_1[_i];\n ret.mapper[i] = digits[i];\n }\n }\n }\n return ret;\n };\n ParserBase.nPair = 'numericPair';\n ParserBase.nRegex = 'numericRegex';\n ParserBase.numberingSystems = defaultNumberingSystem;\n return ParserBase;\n}());\nexport { ParserBase };\n/**\n * @private\n */\nvar blazorCurrencyData = {\n 'DJF': 'Fdj',\n 'ERN': 'Nfk',\n 'ETB': 'Br',\n 'NAD': '$',\n 'ZAR': 'R',\n 'XAF': 'FCFA',\n 'GHS': 'GH₵',\n 'XDR': 'XDR',\n 'AED': 'د.إ.',\n 'BHD': 'د.ب.',\n 'DZD': 'د.ج.',\n 'EGP': 'ج.م.',\n 'ILS': '₪',\n 'IQD': 'د.ع.',\n 'JOD': 'د.ا.',\n 'KMF': 'CF',\n 'KWD': 'د.ك.',\n 'LBP': 'ل.ل.',\n 'LYD': 'د.ل.',\n 'MAD': 'د.م.',\n 'MRU': 'أ.م.',\n 'OMR': 'ر.ع.',\n 'QAR': 'ر.ق.',\n 'SAR': 'ر.س.',\n 'SDG': 'ج.س.',\n 'SOS': 'S',\n 'SSP': '£',\n 'SYP': 'ل.س.',\n 'TND': 'د.ت.',\n 'YER': 'ر.ي.',\n 'CLP': '$',\n 'INR': '₹',\n 'TZS': 'TSh',\n 'EUR': '€',\n 'AZN': '₼',\n 'RUB': '₽',\n 'BYN': 'Br',\n 'ZMW': 'K',\n 'BGN': 'лв.',\n 'NGN': '₦',\n 'XOF': 'CFA',\n 'BDT': '৳',\n 'CNY': '¥',\n 'BAM': 'КМ',\n 'UGX': 'USh',\n 'USD': '$',\n 'CZK': 'Kč',\n 'GBP': '£',\n 'DKK': 'kr.',\n 'KES': 'Ksh',\n 'CHF': 'CHF',\n 'MVR': 'ރ.',\n 'BTN': 'Nu.',\n 'XCD': 'EC$',\n 'AUD': '$',\n 'BBD': '$',\n 'BIF': 'FBu',\n 'BMD': '$',\n 'BSD': '$',\n 'BWP': 'P',\n 'BZD': '$',\n 'CAD': '$',\n 'NZD': '$',\n 'FJD': '$',\n 'FKP': '£',\n 'GIP': '£',\n 'GMD': 'D',\n 'GYD': '$',\n 'HKD': '$',\n 'IDR': 'Rp',\n 'JMD': '$',\n 'KYD': '$',\n 'LRD': '$',\n 'MGA': 'Ar',\n 'MOP': 'MOP$',\n 'MUR': 'Rs',\n 'MWK': 'MK',\n 'MYR': 'RM',\n 'PGK': 'K',\n 'PHP': '₱',\n 'PKR': 'Rs',\n 'RWF': 'RF',\n 'SBD': '$',\n 'SCR': 'SR',\n 'SEK': 'kr',\n 'SGD': '$',\n 'SHP': '£',\n 'SLL': 'Le',\n 'ANG': 'NAf.',\n 'SZL': 'E',\n 'TOP': 'T$',\n 'TTD': '$',\n 'VUV': 'VT',\n 'WST': 'WS$',\n 'ARS': '$',\n 'BOB': 'Bs',\n 'BRL': 'R$',\n 'COP': '$',\n 'CRC': '₡',\n 'CUP': '$',\n 'DOP': '$',\n 'GTQ': 'Q',\n 'HNL': 'L',\n 'MXN': '$',\n 'NIO': 'C$',\n 'PAB': 'B/.',\n 'PEN': 'S/',\n 'PYG': '₲',\n 'UYU': '$',\n 'VES': 'Bs.S',\n 'IRR': 'ريال',\n 'GNF': 'FG',\n 'CDF': 'FC',\n 'HTG': 'G',\n 'XPF': 'FCFP',\n 'HRK': 'kn',\n 'HUF': 'Ft',\n 'AMD': '֏',\n 'ISK': 'kr',\n 'JPY': '¥',\n 'GEL': '₾',\n 'CVE': '',\n 'KZT': '₸',\n 'KHR': '៛',\n 'KPW': '₩',\n 'KRW': '₩',\n 'KGS': 'сом',\n 'AOA': 'Kz',\n 'LAK': '₭',\n 'MZN': 'MTn',\n 'MKD': 'ден',\n 'MNT': '₮',\n 'BND': '$',\n 'MMK': 'K',\n 'NOK': 'kr',\n 'NPR': 'रु',\n 'AWG': 'Afl.',\n 'SRD': '$',\n 'PLN': 'zł',\n 'AFN': '؋',\n 'STN': 'Db',\n 'MDL': 'L',\n 'RON': 'lei',\n 'UAH': '₴',\n 'LKR': 'රු.',\n 'ALL': 'Lekë',\n 'RSD': 'дин.',\n 'TJS': 'смн',\n 'THB': '฿',\n 'TMT': 'm.',\n 'TRY': '₺',\n 'UZS': 'сўм',\n 'VND': '₫',\n 'TWD': 'NT$'\n};\nexport function getBlazorCurrencySymbol(currencyCode) {\n return getValue(currencyCode || '', blazorCurrencyData);\n}\n","/***\n * Hijri parser\n */\nexport var HijriParser;\n(function (HijriParser) {\n /* tslint:disable */\n var dateCorrection = [28607, 28636, 28665, 28695, 28724, 28754, 28783, 28813, 28843, 28872, 28901, 28931, 28960, 28990, 29019, 29049, 29078, 29108, 29137, 29167,\n 29196, 29226, 29255, 29285, 29315, 29345, 29375, 29404, 29434, 29463, 29492, 29522, 29551, 29580, 29610, 29640, 29669, 29699, 29729, 29759,\n 29788, 29818, 29847, 29876, 29906, 29935, 29964, 29994, 30023, 30053, 30082, 30112, 30141, 30171, 30200, 30230, 30259, 30289, 30318, 30348,\n 30378, 30408, 30437, 30467, 30496, 30526, 30555, 30585, 30614, 30644, 30673, 30703, 30732, 30762, 30791, 30821, 30850, 30880, 30909, 30939,\n 30968, 30998, 31027, 31057, 31086, 31116, 31145, 31175, 31204, 31234, 31263, 31293, 31322, 31352, 31381, 31411, 31441, 31471, 31500, 31530,\n 31559, 31589, 31618, 31648, 31676, 31706, 31736, 31766, 31795, 31825, 31854, 31884, 31913, 31943, 31972, 32002, 32031, 32061, 32090, 32120,\n 32150, 32180, 32209, 32239, 32268, 32298, 32327, 32357, 32386, 32416, 32445, 32475, 32504, 32534, 32563, 32593, 32622, 32652, 32681, 32711,\n 32740, 32770, 32799, 32829, 32858, 32888, 32917, 32947, 32976, 33006, 33035, 33065, 33094, 33124, 33153, 33183, 33213, 33243, 33272, 33302,\n 33331, 33361, 33390, 33420, 33450, 33479, 33509, 33539, 33568, 33598, 33627, 33657, 33686, 33716, 33745, 33775, 33804, 33834, 33863, 33893,\n 33922, 33952, 33981, 34011, 34040, 34069, 34099, 34128, 34158, 34187, 34217, 34247, 34277, 34306, 34336, 34365, 34395, 34424, 34454, 34483,\n 34512, 34542, 34571, 34601, 34631, 34660, 34690, 34719, 34749, 34778, 34808, 34837, 34867, 34896, 34926, 34955, 34985, 35015, 35044, 35074,\n 35103, 35133, 35162, 35192, 35222, 35251, 35280, 35310, 35340, 35370, 35399, 35429, 35458, 35488, 35517, 35547, 35576, 35605, 35635, 35665,\n 35694, 35723, 35753, 35782, 35811, 35841, 35871, 35901, 35930, 35960, 35989, 36019, 36048, 36078, 36107, 36136, 36166, 36195, 36225, 36254,\n 36284, 36314, 36343, 36373, 36403, 36433, 36462, 36492, 36521, 36551, 36580, 36610, 36639, 36669, 36698, 36728, 36757, 36786, 36816, 36845,\n 36875, 36904, 36934, 36963, 36993, 37022, 37052, 37081, 37111, 37141, 37170, 37200, 37229, 37259, 37288, 37318, 37347, 37377, 37406, 37436,\n 37465, 37495, 37524, 37554, 37584, 37613, 37643, 37672, 37701, 37731, 37760, 37790, 37819, 37849, 37878, 37908, 37938, 37967, 37997, 38027,\n 38056, 38085, 38115, 38144, 38174, 38203, 38233, 38262, 38292, 38322, 38351, 38381, 38410, 38440, 38469, 38499, 38528, 38558, 38587, 38617,\n 38646, 38676, 38705, 38735, 38764, 38794, 38823, 38853, 38882, 38912, 38941, 38971, 39001, 39030, 39059, 39089, 39118, 39148, 39178, 39208,\n 39237, 39267, 39297, 39326, 39355, 39385, 39414, 39444, 39473, 39503, 39532, 39562, 39592, 39621, 39650, 39680, 39709, 39739, 39768, 39798,\n 39827, 39857, 39886, 39916, 39946, 39975, 40005, 40035, 40064, 40094, 40123, 40153, 40182, 40212, 40241, 40271, 40300, 40330, 40359, 40389,\n 40418, 40448, 40477, 40507, 40536, 40566, 40595, 40625, 40655, 40685, 40714, 40744, 40773, 40803, 40832, 40862, 40892, 40921, 40951, 40980,\n 41009, 41039, 41068, 41098, 41127, 41157, 41186, 41216, 41245, 41275, 41304, 41334, 41364, 41393, 41422, 41452, 41481, 41511, 41540, 41570,\n 41599, 41629, 41658, 41688, 41718, 41748, 41777, 41807, 41836, 41865, 41894, 41924, 41953, 41983, 42012, 42042, 42072, 42102, 42131, 42161,\n 42190, 42220, 42249, 42279, 42308, 42337, 42367, 42397, 42426, 42456, 42485, 42515, 42545, 42574, 42604, 42633, 42662, 42692, 42721, 42751,\n 42780, 42810, 42839, 42869, 42899, 42929, 42958, 42988, 43017, 43046, 43076, 43105, 43135, 43164, 43194, 43223, 43253, 43283, 43312, 43342,\n 43371, 43401, 43430, 43460, 43489, 43519, 43548, 43578, 43607, 43637, 43666, 43696, 43726, 43755, 43785, 43814, 43844, 43873, 43903, 43932,\n 43962, 43991, 44021, 44050, 44080, 44109, 44139, 44169, 44198, 44228, 44258, 44287, 44317, 44346, 44375, 44405, 44434, 44464, 44493, 44523,\n 44553, 44582, 44612, 44641, 44671, 44700, 44730, 44759, 44788, 44818, 44847, 44877, 44906, 44936, 44966, 44996, 45025, 45055, 45084, 45114,\n 45143, 45172, 45202, 45231, 45261, 45290, 45320, 45350, 45380, 45409, 45439, 45468, 45498, 45527, 45556, 45586, 45615, 45644, 45674, 45704,\n 45733, 45763, 45793, 45823, 45852, 45882, 45911, 45940, 45970, 45999, 46028, 46058, 46088, 46117, 46147, 46177, 46206, 46236, 46265, 46295,\n 46324, 46354, 46383, 46413, 46442, 46472, 46501, 46531, 46560, 46590, 46620, 46649, 46679, 46708, 46738, 46767, 46797, 46826, 46856, 46885,\n 46915, 46944, 46974, 47003, 47033, 47063, 47092, 47122, 47151, 47181, 47210, 47240, 47269, 47298, 47328, 47357, 47387, 47417, 47446, 47476,\n 47506, 47535, 47565, 47594, 47624, 47653, 47682, 47712, 47741, 47771, 47800, 47830, 47860, 47890, 47919, 47949, 47978, 48008, 48037, 48066,\n 48096, 48125, 48155, 48184, 48214, 48244, 48273, 48303, 48333, 48362, 48392, 48421, 48450, 48480, 48509, 48538, 48568, 48598, 48627, 48657,\n 48687, 48717, 48746, 48776, 48805, 48834, 48864, 48893, 48922, 48952, 48982, 49011, 49041, 49071, 49100, 49130, 49160, 49189, 49218, 49248,\n 49277, 49306, 49336, 49365, 49395, 49425, 49455, 49484, 49514, 49543, 49573, 49602, 49632, 49661, 49690, 49720, 49749, 49779, 49809, 49838,\n 49868, 49898, 49927, 49957, 49986, 50016, 50045, 50075, 50104, 50133, 50163, 50192, 50222, 50252, 50281, 50311, 50340, 50370, 50400, 50429,\n 50459, 50488, 50518, 50547, 50576, 50606, 50635, 50665, 50694, 50724, 50754, 50784, 50813, 50843, 50872, 50902, 50931, 50960, 50990, 51019,\n 51049, 51078, 51108, 51138, 51167, 51197, 51227, 51256, 51286, 51315, 51345, 51374, 51403, 51433, 51462, 51492, 51522, 51552, 51582, 51611,\n 51641, 51670, 51699, 51729, 51758, 51787, 51816, 51846, 51876, 51906, 51936, 51965, 51995, 52025, 52054, 52083, 52113, 52142, 52171, 52200,\n 52230, 52260, 52290, 52319, 52349, 52379, 52408, 52438, 52467, 52497, 52526, 52555, 52585, 52614, 52644, 52673, 52703, 52733, 52762, 52792,\n 52822, 52851, 52881, 52910, 52939, 52969, 52998, 53028, 53057, 53087, 53116, 53146, 53176, 53205, 53235, 53264, 53294, 53324, 53353, 53383,\n 53412, 53441, 53471, 53500, 53530, 53559, 53589, 53619, 53648, 53678, 53708, 53737, 53767, 53796, 53825, 53855, 53884, 53913, 53943, 53973,\n 54003, 54032, 54062, 54092, 54121, 54151, 54180, 54209, 54239, 54268, 54297, 54327, 54357, 54387, 54416, 54446, 54476, 54505, 54535, 54564,\n 54593, 54623, 54652, 54681, 54711, 54741, 54770, 54800, 54830, 54859, 54889, 54919, 54948, 54977, 55007, 55036, 55066, 55095, 55125, 55154,\n 55184, 55213, 55243, 55273, 55302, 55332, 55361, 55391, 55420, 55450, 55479, 55508, 55538, 55567, 55597, 55627, 55657, 55686, 55716, 55745,\n 55775, 55804, 55834, 55863, 55892, 55922, 55951, 55981, 56011, 56040, 56070, 56100, 56129, 56159, 56188, 56218, 56247, 56276, 56306, 56335,\n 56365, 56394, 56424, 56454, 56483, 56513, 56543, 56572, 56601, 56631, 56660, 56690, 56719, 56749, 56778, 56808, 56837, 56867, 56897, 56926,\n 56956, 56985, 57015, 57044, 57074, 57103, 57133, 57162, 57192, 57221, 57251, 57280, 57310, 57340, 57369, 57399, 57429, 57458, 57487, 57517,\n 57546, 57576, 57605, 57634, 57664, 57694, 57723, 57753, 57783, 57813, 57842, 57871, 57901, 57930, 57959, 57989, 58018, 58048, 58077, 58107,\n 58137, 58167, 58196, 58226, 58255, 58285, 58314, 58343, 58373, 58402, 58432, 58461, 58491, 58521, 58551, 58580, 58610, 58639, 58669, 58698,\n 58727, 58757, 58786, 58816, 58845, 58875, 58905, 58934, 58964, 58994, 59023, 59053, 59082, 59111, 59141, 59170, 59200, 59229, 59259, 59288,\n 59318, 59348, 59377, 59407, 59436, 59466, 59495, 59525, 59554, 59584, 59613, 59643, 59672, 59702, 59731, 59761, 59791, 59820, 59850, 59879,\n 59909, 59939, 59968, 59997, 60027, 60056, 60086, 60115, 60145, 60174, 60204, 60234, 60264, 60293, 60323, 60352, 60381, 60411, 60440, 60469,\n 60499, 60528, 60558, 60588, 60618, 60648, 60677, 60707, 60736, 60765, 60795, 60824, 60853, 60883, 60912, 60942, 60972, 61002, 61031, 61061,\n 61090, 61120, 61149, 61179, 61208, 61237, 61267, 61296, 61326, 61356, 61385, 61415, 61445, 61474, 61504, 61533, 61563, 61592, 61621, 61651,\n 61680, 61710, 61739, 61769, 61799, 61828, 61858, 61888, 61917, 61947, 61976, 62006, 62035, 62064, 62094, 62123, 62153, 62182, 62212, 62242,\n 62271, 62301, 62331, 62360, 62390, 62419, 62448, 62478, 62507, 62537, 62566, 62596, 62625, 62655, 62685, 62715, 62744, 62774, 62803, 62832,\n 62862, 62891, 62921, 62950, 62980, 63009, 63039, 63069, 63099, 63128, 63157, 63187, 63216, 63246, 63275, 63305, 63334, 63363, 63393, 63423,\n 63453, 63482, 63512, 63541, 63571, 63600, 63630, 63659, 63689, 63718, 63747, 63777, 63807, 63836, 63866, 63895, 63925, 63955, 63984, 64014,\n 64043, 64073, 64102, 64131, 64161, 64190, 64220, 64249, 64279, 64309, 64339, 64368, 64398, 64427, 64457, 64486, 64515, 64545, 64574, 64603,\n 64633, 64663, 64692, 64722, 64752, 64782, 64811, 64841, 64870, 64899, 64929, 64958, 64987, 65017, 65047, 65076, 65106, 65136, 65166, 65195,\n 65225, 65254, 65283, 65313, 65342, 65371, 65401, 65431, 65460, 65490, 65520, 65549, 65579, 65608, 65638, 65667, 65697, 65726, 65755, 65785,\n 65815, 65844, 65874, 65903, 65933, 65963, 65992, 66022, 66051, 66081, 66110, 66140, 66169, 66199, 66228, 66258, 66287, 66317, 66346, 66376,\n 66405, 66435, 66465, 66494, 66524, 66553, 66583, 66612, 66641, 66671, 66700, 66730, 66760, 66789, 66819, 66849, 66878, 66908, 66937, 66967,\n 66996, 67025, 67055, 67084, 67114, 67143, 67173, 67203, 67233, 67262, 67292, 67321, 67351, 67380, 67409, 67439, 67468, 67497, 67527, 67557,\n 67587, 67617, 67646, 67676, 67705, 67735, 67764, 67793, 67823, 67852, 67882, 67911, 67941, 67971, 68000, 68030, 68060, 68089, 68119, 68148,\n 68177, 68207, 68236, 68266, 68295, 68325, 68354, 68384, 68414, 68443, 68473, 68502, 68532, 68561, 68591, 68620, 68650, 68679, 68708, 68738,\n 68768, 68797, 68827, 68857, 68886, 68916, 68946, 68975, 69004, 69034, 69063, 69092, 69122, 69152, 69181, 69211, 69240, 69270, 69300, 69330,\n 69359, 69388, 69418, 69447, 69476, 69506, 69535, 69565, 69595, 69624, 69654, 69684, 69713, 69743, 69772, 69802, 69831, 69861, 69890, 69919,\n 69949, 69978, 70008, 70038, 70067, 70097, 70126, 70156, 70186, 70215, 70245, 70274, 70303, 70333, 70362, 70392, 70421, 70451, 70481, 70510,\n 70540, 70570, 70599, 70629, 70658, 70687, 70717, 70746, 70776, 70805, 70835, 70864, 70894, 70924, 70954, 70983, 71013, 71042, 71071, 71101,\n 71130, 71159, 71189, 71218, 71248, 71278, 71308, 71337, 71367, 71397, 71426, 71455, 71485, 71514, 71543, 71573, 71602, 71632, 71662, 71691,\n 71721, 71751, 71781, 71810, 71839, 71869, 71898, 71927, 71957, 71986, 72016, 72046, 72075, 72105, 72135, 72164, 72194, 72223, 72253, 72282,\n 72311, 72341, 72370, 72400, 72429, 72459, 72489, 72518, 72548, 72577, 72607, 72637, 72666, 72695, 72725, 72754, 72784, 72813, 72843, 72872,\n 72902, 72931, 72961, 72991, 73020, 73050, 73080, 73109, 73139, 73168, 73197, 73227, 73256, 73286, 73315, 73345, 73375, 73404, 73434, 73464,\n 73493, 73523, 73552, 73581, 73611, 73640, 73669, 73699, 73729, 73758, 73788, 73818, 73848, 73877, 73907, 73936, 73965, 73995, 74024, 74053,\n 74083, 74113, 74142, 74172, 74202, 74231, 74261, 74291, 74320, 74349, 74379, 74408, 74437, 74467, 74497, 74526, 74556, 74586, 74615, 74645,\n 74675, 74704, 74733, 74763, 74792, 74822, 74851, 74881, 74910, 74940, 74969, 74999, 75029, 75058, 75088, 75117, 75147, 75176, 75206, 75235,\n 75264, 75294, 75323, 75353, 75383, 75412, 75442, 75472, 75501, 75531, 75560, 75590, 75619, 75648, 75678, 75707, 75737, 75766, 75796, 75826,\n 75856, 75885, 75915, 75944, 75974, 76003, 76032, 76062, 76091, 76121, 76150, 76180, 76210, 76239, 76269, 76299, 76328, 76358, 76387, 76416,\n 76446, 76475, 76505, 76534, 76564, 76593, 76623, 76653, 76682, 76712, 76741, 76771, 76801, 76830, 76859, 76889, 76918, 76948, 76977, 77007,\n 77036, 77066, 77096, 77125, 77155, 77185, 77214, 77243, 77273, 77302, 77332, 77361, 77390, 77420, 77450, 77479, 77509, 77539, 77569, 77598,\n 77627, 77657, 77686, 77715, 77745, 77774, 77804, 77833, 77863, 77893, 77923, 77952, 77982, 78011, 78041, 78070, 78099, 78129, 78158, 78188,\n 78217, 78247, 78277, 78307, 78336, 78366, 78395, 78425, 78454, 78483, 78513, 78542, 78572, 78601, 78631, 78661, 78690, 78720, 78750, 78779,\n 78808, 78838, 78867, 78897, 78926, 78956, 78985, 79015, 79044, 79074, 79104, 79133, 79163, 79192, 79222, 79251, 79281, 79310, 79340, 79369,\n 79399, 79428, 79458, 79487, 79517, 79546, 79576, 79606, 79635, 79665, 79695, 79724, 79753, 79783, 79812, 79841, 79871, 79900, 79930, 79960,\n 79990];\n /* tslint:enable */\n function getHijriDate(gDate) {\n var day = gDate.getDate();\n var month = gDate.getMonth();\n var year = gDate.getFullYear();\n var tMonth = month + 1;\n var tYear = year;\n if (tMonth < 3) {\n tYear -= 1;\n tMonth += 12;\n }\n var yPrefix = Math.floor(tYear / 100.);\n var julilanOffset = yPrefix - Math.floor(yPrefix / 4.) - 2;\n var julianNumber = Math.floor(365.25 * (tYear + 4716)) + Math.floor(30.6001 * (tMonth + 1)) + day - julilanOffset - 1524;\n yPrefix = Math.floor((julianNumber - 1867216.25) / 36524.25);\n julilanOffset = yPrefix - Math.floor(yPrefix / 4.) + 1;\n var b = julianNumber + julilanOffset + 1524;\n var c = Math.floor((b - 122.1) / 365.25);\n var d = Math.floor(365.25 * c);\n var tempMonth = Math.floor((b - d) / 30.6001);\n day = (b - d) - Math.floor(30.6001 * tempMonth);\n month = Math.floor((b - d) / 20.6001);\n if (month > 13) {\n c += 1;\n month -= 12;\n }\n month -= 1;\n year = c - 4716;\n var modifiedJulianDate = julianNumber - 2400000;\n // date calculation for year after 2077\n var iyear = 10631. / 30.;\n var z = julianNumber - 1948084;\n var cyc = Math.floor(z / 10631.);\n z = z - 10631 * cyc;\n var j = Math.floor((z - 0.1335) / iyear);\n var iy = 30 * cyc + j;\n z = z - Math.floor(j * iyear + 0.1335);\n var im = Math.floor((z + 28.5001) / 29.5);\n /* istanbul ignore next */\n if (im === 13) {\n im = 12;\n }\n var tempDay = z - Math.floor(29.5001 * im - 29);\n var i = 0;\n for (; i < dateCorrection.length; i++) {\n if (dateCorrection[i] > modifiedJulianDate) {\n break;\n }\n }\n var iln = i + 16260;\n var ii = Math.floor((iln - 1) / 12);\n var hYear = ii + 1;\n var hmonth = iln - 12 * ii;\n var hDate = modifiedJulianDate - dateCorrection[i - 1] + 1;\n if ((hDate + '').length > 2) {\n hDate = tempDay;\n hmonth = im;\n hYear = iy;\n }\n return { year: hYear, month: hmonth, date: hDate };\n }\n HijriParser.getHijriDate = getHijriDate;\n function toGregorian(year, month, day) {\n var iy = year;\n var im = month;\n var id = day;\n var ii = iy - 1;\n var iln = (ii * 12) + 1 + (im - 1);\n var i = iln - 16260;\n var mcjdn = id + dateCorrection[i - 1] - 1;\n var julianDate = mcjdn + 2400000;\n var z = Math.floor(julianDate + 0.5);\n var a = Math.floor((z - 1867216.25) / 36524.25);\n a = z + 1 + a - Math.floor(a / 4);\n var b = a + 1524;\n var c = Math.floor((b - 122.1) / 365.25);\n var d = Math.floor(365.25 * c);\n var e = Math.floor((b - d) / 30.6001);\n var gDay = b - d - Math.floor(e * 30.6001);\n var gMonth = e - (e > 13.5 ? 13 : 1);\n var gYear = c - (gMonth > 2.5 ? 4716 : 4715);\n /* istanbul ignore next */\n if (gYear <= 0) {\n gMonth--;\n } // No year zero\n return new Date(gYear + '/' + (gMonth) + '/' + gDay);\n }\n HijriParser.toGregorian = toGregorian;\n})(HijriParser || (HijriParser = {}));\n","import { ParserBase as parser } from './parser-base';\nimport { IntlBase as base } from './intl-base';\nimport { isUndefined, throwError, getValue, isBlazor } from '../util';\nimport { HijriParser } from '../hijri-parser';\nimport { isNullOrUndefined, extend } from '../util';\nvar abbreviateRegexGlobal = /\\/MMMMM|MMMM|MMM|a|LLLL|LLL|EEEEE|EEEE|E|K|cccc|ccc|WW|W|G+|z+/gi;\nvar standalone = 'stand-alone';\nvar weekdayKey = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];\nexport var basicPatterns = ['short', 'medium', 'long', 'full'];\nvar timeSetter = {\n m: 'getMinutes',\n h: 'getHours',\n H: 'getHours',\n s: 'getSeconds',\n d: 'getDate',\n f: 'getMilliseconds'\n};\nexport var datePartMatcher = {\n 'M': 'month',\n 'd': 'day',\n 'E': 'weekday',\n 'c': 'weekday',\n 'y': 'year',\n 'm': 'minute',\n 'h': 'hour',\n 'H': 'hour',\n 's': 'second',\n 'L': 'month',\n 'a': 'designator',\n 'z': 'timeZone',\n 'Z': 'timeZone',\n 'G': 'era',\n 'f': 'milliseconds'\n};\nvar timeSeparator = 'timeSeparator';\n/* tslint:disable no-any */\n/**\n * Date Format is a framework provides support for date formatting.\n * @private\n */\nvar DateFormat = /** @class */ (function () {\n function DateFormat() {\n }\n /**\n * Returns the formatter function for given skeleton.\n * @param {string} - Specifies the culture name to be which formatting.\n * @param {DateFormatOptions} - Specific the format in which date will format.\n * @param {cldr} - Specifies the global cldr data collection.\n * @return Function.\n */\n DateFormat.dateFormat = function (culture, option, cldr) {\n var _this = this;\n var dependable = base.getDependables(cldr, culture, option.calendar);\n var numObject = getValue('parserObject.numbers', dependable);\n var dateObject = dependable.dateObject;\n var formatOptions = { isIslamic: base.islamicRegex.test(option.calendar) };\n if (isBlazor() && option.isServerRendered) {\n option = base.compareBlazorDateFormats(option, culture);\n }\n var resPattern = option.format ||\n base.getResultantPattern(option.skeleton, dependable.dateObject, option.type, false, isBlazor() ? culture : '');\n formatOptions.dateSeperator = isBlazor() ? getValue('dateSeperator', dateObject) : base.getDateSeparator(dependable.dateObject);\n if (isUndefined(resPattern)) {\n throwError('Format options or type given must be invalid');\n }\n else {\n resPattern = base.ConvertDateToWeekFormat(resPattern);\n if (isBlazor()) {\n resPattern = resPattern.replace(/tt/, 'a');\n }\n formatOptions.pattern = resPattern;\n formatOptions.numMapper = isBlazor() ?\n extend({}, numObject) : parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr));\n var patternMatch = resPattern.match(abbreviateRegexGlobal) || [];\n for (var _i = 0, patternMatch_1 = patternMatch; _i < patternMatch_1.length; _i++) {\n var str = patternMatch_1[_i];\n var len = str.length;\n var char = str[0];\n if (char === 'K') {\n char = 'h';\n }\n /* tslint:disable no-any */\n var charKey = datePartMatcher[char];\n switch (char) {\n case 'E':\n case 'c':\n if (isBlazor()) {\n formatOptions.weekday = getValue('days.' + base.monthIndex[len], dateObject);\n }\n else {\n formatOptions.weekday = dependable.dateObject[base.days][standalone][base.monthIndex[len]];\n }\n break;\n case 'M':\n case 'L':\n if (isBlazor()) {\n formatOptions.month = getValue('months.' + base.monthIndex[len], dateObject);\n }\n else {\n formatOptions.month = dependable.dateObject[base.month][standalone][base.monthIndex[len]];\n }\n break;\n case 'a':\n formatOptions.designator = isBlazor() ?\n getValue('dayPeriods', dateObject) : getValue('dayPeriods.format.wide', dateObject);\n break;\n case 'G':\n var eText = (len <= 3) ? 'eraAbbr' : (len === 4) ? 'eraNames' : 'eraNarrow';\n formatOptions.era = isBlazor() ? getValue('eras', dateObject) : getValue('eras.' + eText, dependable.dateObject);\n break;\n case 'z':\n formatOptions.timeZone = getValue('dates.timeZoneNames', dependable.parserObject);\n break;\n }\n }\n }\n return function (value) {\n if (isNaN(value.getDate())) {\n return null;\n }\n return _this.intDateFormatter(value, formatOptions);\n };\n };\n /**\n * Returns formatted date string based on options passed.\n * @param {Date} value\n * @param {FormatOptions} options\n */\n // tslint:disable-next-line:max-func-body-length\n DateFormat.intDateFormatter = function (value, options) {\n var pattern = options.pattern;\n var ret = '';\n var matches = pattern.match(base.dateParseRegex);\n var dObject = this.getCurrentDateValue(value, options.isIslamic);\n for (var _i = 0, matches_1 = matches; _i < matches_1.length; _i++) {\n var match = matches_1[_i];\n var length_1 = match.length;\n var char = match[0];\n if (char === 'K') {\n char = 'h';\n }\n var curval = void 0;\n var curvalstr = '';\n var isNumber = void 0;\n var processNumber = void 0;\n var curstr = '';\n switch (char) {\n case 'M':\n case 'L':\n curval = dObject.month;\n if (length_1 > 2) {\n ret += options.month[curval];\n }\n else {\n isNumber = true;\n }\n break;\n case 'E':\n case 'c':\n ret += options.weekday[weekdayKey[value.getDay()]];\n break;\n case 'H':\n case 'h':\n case 'm':\n case 's':\n case 'd':\n case 'f':\n isNumber = true;\n if (char === 'd') {\n curval = dObject.date;\n }\n else if (char === 'f') {\n isNumber = false;\n processNumber = true;\n curvalstr = value[timeSetter[char]]().toString();\n curvalstr = curvalstr.substring(0, length_1);\n var curlength = curvalstr.length;\n if (length_1 !== curlength) {\n if (length_1 > 3) {\n continue;\n }\n for (var i = 0; i < length_1 - curlength; i++) {\n curvalstr = '0' + curvalstr.toString();\n }\n }\n curstr += curvalstr;\n }\n else {\n curval = value[timeSetter[char]]();\n }\n if (char === 'h') {\n curval = curval % 12 || 12;\n }\n break;\n case 'y':\n processNumber = true;\n curstr += dObject.year;\n if (length_1 === 2) {\n curstr = curstr.substr(curstr.length - 2);\n }\n break;\n case 'a':\n var desig = value.getHours() < 12 ? 'am' : 'pm';\n ret += options.designator[desig];\n break;\n case 'G':\n var dec = value.getFullYear() < 0 ? 0 : 1;\n var retu = options.era[dec];\n if (isNullOrUndefined(retu)) {\n retu = options.era[dec ? 0 : 1];\n }\n ret += retu || '';\n break;\n case '\\'':\n ret += (match === '\\'\\'') ? '\\'' : match.replace(/\\'/g, '');\n break;\n case 'z':\n var timezone = value.getTimezoneOffset();\n var pattern_1 = (length_1 < 4) ? '+H;-H' : options.timeZone.hourFormat;\n pattern_1 = pattern_1.replace(/:/g, options.numMapper.timeSeparator);\n if (timezone === 0) {\n ret += options.timeZone.gmtZeroFormat;\n }\n else {\n processNumber = true;\n curstr = this.getTimeZoneValue(timezone, pattern_1);\n }\n curstr = options.timeZone.gmtFormat.replace(/\\{0\\}/, curstr);\n break;\n case ':':\n ret += options.numMapper.numberSymbols[timeSeparator];\n /* tslint:enable no-any */\n break;\n case '/':\n ret += options.dateSeperator;\n break;\n case 'W':\n isNumber = true;\n curval = base.getWeekOfYear(value);\n break;\n default:\n ret += match;\n }\n if (isNumber) {\n processNumber = true;\n curstr = this.checkTwodigitNumber(curval, length_1);\n }\n if (processNumber) {\n ret += parser.convertValueParts(curstr, base.latnParseRegex, options.numMapper.mapper);\n }\n }\n return ret;\n };\n DateFormat.getCurrentDateValue = function (value, isIslamic) {\n if (isIslamic) {\n return HijriParser.getHijriDate(value);\n }\n return { year: value.getFullYear(), month: value.getMonth() + 1, date: value.getDate() };\n };\n /**\n * Returns two digit numbers for given value and length\n */\n DateFormat.checkTwodigitNumber = function (val, len) {\n var ret = val + '';\n if (len === 2 && ret.length !== 2) {\n return '0' + ret;\n }\n return ret;\n };\n /**\n * Returns the value of the Time Zone.\n * @param {number} tVal\n * @param {string} pattern\n * @private\n */\n DateFormat.getTimeZoneValue = function (tVal, pattern) {\n var _this = this;\n var splt = pattern.split(';');\n var curPattern = splt[tVal > 0 ? 1 : 0];\n var no = Math.abs(tVal);\n return curPattern = curPattern.replace(/HH?|mm/g, function (str) {\n var len = str.length;\n var ishour = str.indexOf('H') !== -1;\n return _this.checkTwodigitNumber(Math.floor(ishour ? (no / 60) : (no % 60)), len);\n });\n };\n return DateFormat;\n}());\nexport { DateFormat };\n","import { isUndefined, throwError, isNullOrUndefined, extend, isBlazor, getValue } from '../util';\nimport { defaultCurrencyCode } from '../internationalization';\nimport { IntlBase as base } from './intl-base';\nimport { ParserBase as parser } from './parser-base';\nvar errorText = {\n 'ms': 'minimumSignificantDigits',\n 'ls': 'maximumSignificantDigits',\n 'mf': 'minimumFractionDigits',\n 'lf': 'maximumFractionDigits',\n};\nvar integerError = 'minimumIntegerDigits';\nvar percentSign = 'percentSign';\nvar minusSign = 'minusSign';\nvar spaceRegex = /\\s/;\nvar mapper = ['infinity', 'nan', 'group', 'decimal', 'exponential'];\nvar infinity = 'infinity';\nvar nan = 'nan';\n/**\n * Module for number formatting.\n * @private\n */\nvar NumberFormat = /** @class */ (function () {\n function NumberFormat() {\n }\n /**\n * Returns the formatter function for given skeleton.\n * @param {string} culture - Specifies the culture name to be which formatting.\n * @param {NumberFormatOptions} option - Specific the format in which number will format.\n * @param {Object} object- Specifies the global cldr data collection.\n * @return Function.\n */\n NumberFormat.numberFormatter = function (culture, option, cldr) {\n var _this = this;\n var fOptions = extend({}, option);\n var cOptions = {};\n var dOptions = {};\n var symbolPattern;\n var dependable = base.getDependables(cldr, culture, '', true);\n var numObject = dependable.numericObject;\n dOptions.numberMapper = isBlazor() ? extend({}, numObject) :\n parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr), true);\n dOptions.currencySymbol = isBlazor() ? getValue('currencySymbol', numObject) : base.getCurrencySymbol(dependable.numericObject, fOptions.currency || defaultCurrencyCode, option.altSymbol);\n /* tslint:disable no-any */\n dOptions.percentSymbol = isBlazor() ? getValue('numberSymbols.percentSign', numObject) :\n dOptions.numberMapper.numberSymbols[percentSign];\n dOptions.minusSymbol = isBlazor() ? getValue('numberSymbols.minusSign', numObject) :\n dOptions.numberMapper.numberSymbols[minusSign];\n var symbols = dOptions.numberMapper.numberSymbols;\n if ((option.format) && !(base.formatRegex.test(option.format))) {\n cOptions = base.customFormat(option.format, dOptions, dependable.numericObject);\n }\n else {\n extend(fOptions, base.getProperNumericSkeleton(option.format || 'N'));\n fOptions.isCurrency = fOptions.type === 'currency';\n fOptions.isPercent = fOptions.type === 'percent';\n if (!isBlazor()) {\n symbolPattern = base.getSymbolPattern(fOptions.type, dOptions.numberMapper.numberSystem, dependable.numericObject, fOptions.isAccount);\n }\n fOptions.groupOne = this.checkValueRange(fOptions.maximumSignificantDigits, fOptions.minimumSignificantDigits, true);\n this.checkValueRange(fOptions.maximumFractionDigits, fOptions.minimumFractionDigits, false, true);\n if (!isUndefined(fOptions.fractionDigits)) {\n fOptions.minimumFractionDigits = fOptions.maximumFractionDigits = fOptions.fractionDigits;\n }\n if (isUndefined(fOptions.useGrouping)) {\n fOptions.useGrouping = true;\n }\n if (fOptions.isCurrency && !isBlazor()) {\n symbolPattern = symbolPattern.replace(/\\u00A4/g, base.defaultCurrency);\n }\n if (!isBlazor()) {\n var split = symbolPattern.split(';');\n cOptions.nData = base.getFormatData(split[1] || '-' + split[0], true, dOptions.currencySymbol);\n cOptions.pData = base.getFormatData(split[0], false, dOptions.currencySymbol);\n if (fOptions.useGrouping) {\n fOptions.groupSeparator = symbols[mapper[2]];\n fOptions.groupData = this.getGroupingDetails(split[0]);\n }\n }\n else {\n cOptions.nData = extend({}, {}, getValue(fOptions.type + 'nData', numObject));\n cOptions.pData = extend({}, {}, getValue(fOptions.type + 'pData', numObject));\n if (fOptions.type === 'currency' && option.currency) {\n base.replaceBlazorCurrency([cOptions.pData, cOptions.nData], dOptions.currencySymbol, option.currency);\n }\n }\n var minFrac = isUndefined(fOptions.minimumFractionDigits);\n if (minFrac) {\n fOptions.minimumFractionDigits = cOptions.nData.minimumFraction;\n }\n if (isUndefined(fOptions.maximumFractionDigits)) {\n var mval = cOptions.nData.maximumFraction;\n fOptions.maximumFractionDigits = isUndefined(mval) && fOptions.isPercent ? 0 : mval;\n }\n var mfrac = fOptions.minimumFractionDigits;\n var lfrac = fOptions.maximumFractionDigits;\n if (!isUndefined(mfrac) && !isUndefined(lfrac)) {\n if (mfrac > lfrac) {\n fOptions.maximumFractionDigits = mfrac;\n }\n }\n }\n extend(cOptions.nData, fOptions);\n extend(cOptions.pData, fOptions);\n return function (value) {\n if (isNaN(value)) {\n return symbols[mapper[1]];\n }\n else if (!isFinite(value)) {\n return symbols[mapper[0]];\n }\n return _this.intNumberFormatter(value, cOptions, dOptions);\n };\n };\n /**\n * Returns grouping details for the pattern provided\n * @param {string} pattern\n * @returns {GroupDetails}\n */\n NumberFormat.getGroupingDetails = function (pattern) {\n var ret = {};\n var match = pattern.match(base.negativeDataRegex);\n if (match && match[4]) {\n var pattern_1 = match[4];\n var p = pattern_1.lastIndexOf(',');\n if (p !== -1) {\n var temp = pattern_1.split('.')[0];\n ret.primary = (temp.length - p) - 1;\n var s = pattern_1.lastIndexOf(',', p - 1);\n if (s !== -1) {\n ret.secondary = p - 1 - s;\n }\n }\n }\n return ret;\n };\n /**\n * Returns if the provided integer range is valid.\n * @param {number} val1\n * @param {number} val2\n * @param {boolean} checkbothExist\n * @param {boolean} isFraction\n * @returns {boolean}\n */\n NumberFormat.checkValueRange = function (val1, val2, checkbothExist, isFraction) {\n var decide = isFraction ? 'f' : 's';\n var dint = 0;\n var str1 = errorText['l' + decide];\n var str2 = errorText['m' + decide];\n if (!isUndefined(val1)) {\n this.checkRange(val1, str1, isFraction);\n dint++;\n }\n if (!isUndefined(val2)) {\n this.checkRange(val2, str2, isFraction);\n dint++;\n }\n if (dint === 2) {\n if (val1 < val2) {\n throwError(str2 + 'specified must be less than the' + str1);\n }\n else {\n return true;\n }\n }\n else if (checkbothExist && dint === 1) {\n throwError('Both' + str2 + 'and' + str2 + 'must be present');\n }\n return false;\n };\n /**\n * Check if the provided fraction range is valid\n * @param {number} val\n * @param {string} text\n * @param {boolean} isFraction\n * @returns {void}\n */\n NumberFormat.checkRange = function (val, text, isFraction) {\n var range = isFraction ? [0, 20] : [1, 21];\n if (val < range[0] || val > range[1]) {\n throwError(text + 'value must be within the range' + range[0] + 'to' + range[1]);\n }\n };\n /**\n * Returns formatted numeric string for provided formatting options\n * @param {number} value\n * @param {base.GenericFormatOptions} fOptions\n * @param {CommonOptions} dOptions\n * @returns {string}\n */\n NumberFormat.intNumberFormatter = function (value, fOptions, dOptions) {\n var curData;\n if (isUndefined(fOptions.nData.type)) {\n return undefined;\n }\n else {\n if (value < 0) {\n value = value * -1;\n curData = fOptions.nData;\n }\n else if (value === 0) {\n curData = fOptions.zeroData || fOptions.pData;\n }\n else {\n curData = fOptions.pData;\n }\n var fValue = '';\n if (curData.isPercent) {\n value = value * 100;\n }\n if (curData.groupOne) {\n fValue = this.processSignificantDigits(value, curData.minimumSignificantDigits, curData.maximumSignificantDigits);\n }\n else {\n fValue = this.processFraction(value, curData.minimumFractionDigits, curData.maximumFractionDigits);\n if (curData.minimumIntegerDigits) {\n fValue = this.processMinimumIntegers(fValue, curData.minimumIntegerDigits);\n }\n }\n if (curData.type === 'scientific') {\n fValue = value.toExponential(curData.maximumFractionDigits);\n fValue = fValue.replace('e', dOptions.numberMapper.numberSymbols[mapper[4]]);\n }\n fValue = fValue.replace('.', dOptions.numberMapper.numberSymbols[mapper[3]]);\n if (curData.useGrouping) {\n fValue = this.groupNumbers(fValue, curData.groupData.primary, curData.groupSeparator || ',', dOptions.numberMapper.numberSymbols[mapper[3]] || '.', curData.groupData.secondary);\n }\n fValue = parser.convertValueParts(fValue, base.latnParseRegex, dOptions.numberMapper.mapper);\n if (curData.nlead === 'N/A') {\n return curData.nlead;\n }\n else {\n return curData.nlead + fValue + curData.nend;\n }\n }\n };\n /**\n * Returns significant digits processed numeric string\n * @param {number} value\n * @param {number} min\n * @param {number} max\n * @returns {string}\n */\n NumberFormat.processSignificantDigits = function (value, min, max) {\n var temp = value + '';\n var tn;\n var length = temp.length;\n if (length < min) {\n return value.toPrecision(min);\n }\n else {\n temp = value.toPrecision(max);\n tn = +temp;\n return tn + '';\n }\n };\n /**\n * Returns grouped numeric string\n * @param {string} val\n * @param {number} level1\n * @param {string} sep\n * @param {string} decimalSymbol\n * @param {number} level2\n * @returns {string}\n */\n NumberFormat.groupNumbers = function (val, level1, sep, decimalSymbol, level2) {\n var flag = !isNullOrUndefined(level2) && level2 !== 0;\n var split = val.split(decimalSymbol);\n var prefix = split[0];\n var length = prefix.length;\n var str = '';\n while (length > level1) {\n str = prefix.slice(length - level1, length) + (str.length ?\n (sep + str) : '');\n length -= level1;\n if (flag) {\n level1 = level2;\n flag = false;\n }\n }\n split[0] = prefix.slice(0, length) + (str.length ? sep : '') + str;\n return split.join(decimalSymbol);\n };\n /**\n * Returns fraction processed numeric string\n * @param {number} value\n * @param {number} min\n * @param {number} max\n * @returns {string}\n */\n NumberFormat.processFraction = function (value, min, max) {\n var temp = (value + '').split('.')[1];\n var length = temp ? temp.length : 0;\n if (min && length < min) {\n var ret = '';\n if (length === 0) {\n ret = value.toFixed(min);\n }\n else {\n ret += value;\n for (var j = 0; j < min - length; j++) {\n ret += '0';\n }\n return ret;\n }\n return value.toFixed(min);\n }\n else if (!isNullOrUndefined(max) && (length > max || max === 0)) {\n return value.toFixed(max);\n }\n return value + '';\n };\n /**\n * Returns integer processed numeric string\n * @param {string} value\n * @param {number} min\n * @returns {string}\n */\n NumberFormat.processMinimumIntegers = function (value, min) {\n var temp = value.split('.');\n var lead = temp[0];\n var len = lead.length;\n if (len < min) {\n for (var i = 0; i < min - len; i++) {\n lead = '0' + lead;\n }\n temp[0] = lead;\n }\n return temp.join('.');\n };\n return NumberFormat;\n}());\nexport { NumberFormat };\n","import { IntlBase as base } from './intl-base';\nimport { ParserBase as parser } from './parser-base';\nimport { isUndefined, throwError, getValue, isNullOrUndefined, isBlazor } from '../util';\nimport { datePartMatcher } from './date-formatter';\nimport { HijriParser } from '../hijri-parser';\nvar number = 'numbers';\nvar defNoSystem = 'defaultNumberingSystem';\nvar noSystem = 'numberingSystem';\nvar standalone = 'stand-alone';\nvar curWeekDay = 'curWeekDay';\nvar latnRegex = /^[0-9]*$/;\nvar abbreviateRegex = /\\/MMMMM|MMMM|MMM|a|LLLL|LLL|EEEEE|EEEE|E|ccc/;\nvar timeSetter = {\n minute: 'setMinutes',\n hour: 'setHours',\n second: 'setSeconds',\n day: 'setDate',\n month: 'setMonth',\n milliseconds: 'setMilliseconds'\n};\nvar month = 'months';\n/* tslint:disable no-any */\n/**\n * Date Parser.\n * @private\n */\nvar DateParser = /** @class */ (function () {\n function DateParser() {\n }\n /**\n * Returns the parser function for given skeleton.\n * @param {string} - Specifies the culture name to be which formatting.\n * @param {DateFormatOptions} - Specific the format in which string date will be parsed.\n * @param {cldr} - Specifies the global cldr data collection.\n * @return Function.\n */\n // tslint:disable-next-line:max-func-body-length\n DateParser.dateParser = function (culture, option, cldr) {\n var _this = this;\n var dependable = base.getDependables(cldr, culture, option.calendar);\n // tslint:disable-next-line\n var numOptions = parser.getCurrentNumericOptions(dependable.parserObject, parser.getNumberingSystem(cldr), false, isBlazor());\n var parseOptions = {};\n if (isBlazor() && option.isServerRendered) {\n option = base.compareBlazorDateFormats(option, culture);\n }\n var resPattern = option.format ||\n base.getResultantPattern(option.skeleton, dependable.dateObject, option.type, false, isBlazor() ? culture : '');\n var regexString = '';\n var hourOnly;\n if (isUndefined(resPattern)) {\n throwError('Format options or type given must be invalid');\n }\n else {\n resPattern = base.ConvertDateToWeekFormat(resPattern);\n parseOptions = { isIslamic: base.islamicRegex.test(option.calendar), pattern: resPattern, evalposition: {}, culture: culture };\n var patternMatch = resPattern.match(base.dateParseRegex) || [];\n var length_1 = patternMatch.length;\n var gmtCorrection = 0;\n var zCorrectTemp = 0;\n var isgmtTraversed = false;\n var nRegx = numOptions.numericRegex;\n // tslint:disable-next-line\n var numMapper = isBlazor() ? dependable.parserObject.numbers :\n parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr));\n for (var i = 0; i < length_1; i++) {\n var str = patternMatch[i];\n var len = str.length;\n var char = (str[0] === 'K') ? 'h' : str[0];\n var isNumber = void 0;\n var canUpdate = void 0;\n // tslint:disable-next-line\n var charKey = datePartMatcher[char];\n var optional = (len === 2) ? '' : '?';\n if (isgmtTraversed) {\n gmtCorrection = zCorrectTemp;\n isgmtTraversed = false;\n }\n switch (char) {\n case 'E':\n case 'c':\n // tslint:disable\n var weekData = void 0;\n if (isBlazor()) {\n weekData = getValue('days.' + base.monthIndex[len], dependable.dateObject);\n }\n else {\n weekData = dependable.dateObject[base.days][standalone][base.monthIndex[len]];\n }\n var weekObject = parser.reverseObject(weekData);\n // tslint:enable\n regexString += '(' + Object.keys(weekObject).join('|') + ')';\n break;\n case 'M':\n case 'L':\n case 'd':\n case 'm':\n case 's':\n case 'h':\n case 'H':\n case 'f':\n canUpdate = true;\n if ((char === 'M' || char === 'L') && len > 2) {\n var monthData = void 0;\n if (isBlazor()) {\n /* tslint:disable no-any */\n monthData = getValue('months.' + base.monthIndex[len], dependable.dateObject);\n }\n else {\n /* tslint:disable no-any */\n monthData = dependable.dateObject[month][standalone][base.monthIndex[len]];\n }\n // tslint:disable-next-line\n parseOptions[charKey] = parser.reverseObject(monthData);\n /* tslint:disable no-any */\n regexString += '(' + Object.keys(parseOptions[charKey]).join('|') + ')';\n }\n else if (char === 'f') {\n if (len > 3) {\n continue;\n }\n isNumber = true;\n regexString += '(' + nRegx + nRegx + '?' + nRegx + '?' + ')';\n }\n else {\n isNumber = true;\n regexString += '(' + nRegx + nRegx + optional + ')';\n }\n if (char === 'h') {\n parseOptions.hour12 = true;\n }\n break;\n case 'W':\n var opt = len === 1 ? '?' : '';\n regexString += '(' + nRegx + opt + nRegx + ')';\n break;\n case 'y':\n canUpdate = isNumber = true;\n if (len === 2) {\n regexString += '(' + nRegx + nRegx + ')';\n }\n else {\n regexString += '(' + nRegx + '{' + len + ',})';\n }\n break;\n case 'a':\n canUpdate = true;\n var periodValur = isBlazor() ?\n getValue('dayPeriods', dependable.dateObject) :\n getValue('dayPeriods.format.wide', dependable.dateObject);\n parseOptions[charKey] = parser.reverseObject(periodValur);\n regexString += '(' + Object.keys(parseOptions[charKey]).join('|') + ')';\n break;\n case 'G':\n canUpdate = true;\n var eText = (len <= 3) ? 'eraAbbr' : (len === 4) ? 'eraNames' : 'eraNarrow';\n parseOptions[charKey] = parser.reverseObject(isBlazor() ?\n getValue('eras', dependable.dateObject) : getValue('eras.' + eText, dependable.dateObject));\n regexString += '(' + Object.keys(parseOptions[charKey]).join('|') + '?)';\n break;\n case 'z':\n var tval = new Date().getTimezoneOffset();\n canUpdate = (tval !== 0);\n parseOptions[charKey] = getValue('dates.timeZoneNames', dependable.parserObject);\n var tzone = parseOptions[charKey];\n hourOnly = (len < 4);\n var hpattern = hourOnly ? '+H;-H' : tzone.hourFormat;\n hpattern = hpattern.replace(/:/g, numMapper.timeSeparator);\n regexString += '(' + this.parseTimeZoneRegx(hpattern, tzone, nRegx) + ')?';\n isgmtTraversed = true;\n zCorrectTemp = hourOnly ? 6 : 12;\n break;\n case '\\'':\n var iString = str.replace(/\\'/g, '');\n regexString += '(' + iString + ')?';\n break;\n default:\n regexString += '([\\\\D])';\n break;\n }\n if (canUpdate) {\n parseOptions.evalposition[charKey] = { isNumber: isNumber, pos: i + 1 + gmtCorrection, hourOnly: hourOnly };\n }\n if (i === length_1 - 1 && !isNullOrUndefined(regexString)) {\n parseOptions.parserRegex = new RegExp('^' + regexString + '$', 'i');\n }\n }\n }\n return function (value) {\n var parsedDateParts = _this.internalDateParse(value, parseOptions, numOptions);\n if (isNullOrUndefined(parsedDateParts) || !Object.keys(parsedDateParts).length) {\n return null;\n }\n if (parseOptions.isIslamic) {\n var dobj = {};\n var tYear = parsedDateParts.year;\n var tDate = parsedDateParts.day;\n var tMonth = parsedDateParts.month;\n var ystrig = tYear ? (tYear + '') : '';\n var is2DigitYear = (ystrig.length === 2);\n if (!tYear || !tMonth || !tDate || is2DigitYear) {\n dobj = HijriParser.getHijriDate(new Date());\n }\n if (is2DigitYear) {\n tYear = parseInt((dobj.year + '').slice(0, 2) + ystrig, 10);\n }\n // tslint:disable-next-line\n var dateObject = HijriParser.toGregorian(tYear || dobj.year, tMonth || dobj.month, tDate || dobj.date);\n parsedDateParts.year = dateObject.getFullYear();\n parsedDateParts.month = dateObject.getMonth() + 1;\n parsedDateParts.day = dateObject.getDate();\n }\n return _this.getDateObject(parsedDateParts);\n };\n };\n /* tslint:disable */\n /**\n * Returns date object for provided date options\n * @param {DateParts} options\n * @param {Date} value\n * @returns {Date}\n */\n DateParser.getDateObject = function (options, value) {\n var res = value || new Date();\n res.setMilliseconds(0);\n var tKeys = ['hour', 'minute', 'second', 'milliseconds', 'month', 'day'];\n var y = options.year;\n var desig = options.designator;\n var tzone = options.timeZone;\n if (!isUndefined(y)) {\n var len = (y + '').length;\n if (len <= 2) {\n var century = Math.floor(res.getFullYear() / 100) * 100;\n y += century;\n }\n res.setFullYear(y);\n }\n for (var _i = 0, tKeys_1 = tKeys; _i < tKeys_1.length; _i++) {\n var key = tKeys_1[_i];\n var tValue = options[key];\n if (isUndefined(tValue) && key === \"day\") {\n res.setDate(1);\n }\n if (!isUndefined(tValue)) {\n if (key === 'month') {\n tValue -= 1;\n if (tValue < 0 || tValue > 11) {\n return new Date('invalid');\n }\n var pDate = res.getDate();\n res.setDate(1);\n res[timeSetter[key]](tValue);\n var lDate = new Date(res.getFullYear(), tValue + 1, 0).getDate();\n res.setDate(pDate < lDate ? pDate : lDate);\n }\n else {\n if (key === 'day') {\n var lastDay = new Date(res.getFullYear(), res.getMonth() + 1, 0).getDate();\n if ((tValue < 1 || tValue > lastDay)) {\n return null;\n }\n }\n res[timeSetter[key]](tValue);\n }\n }\n }\n if (!isUndefined(desig)) {\n var hour = res.getHours();\n if (desig === 'pm') {\n res.setHours(hour + (hour === 12 ? 0 : 12));\n }\n else if (hour === 12) {\n res.setHours(0);\n }\n }\n if (!isUndefined(tzone)) {\n var tzValue = tzone - res.getTimezoneOffset();\n if (tzValue !== 0) {\n res.setMinutes(res.getMinutes() + tzValue);\n }\n }\n return res;\n };\n /**\n * Returns date parsing options for provided value along with parse and numeric options\n * @param {string} value\n * @param {ParseOptions} parseOptions\n * @param {NumericOptions} num\n * @returns {DateParts}\n */\n DateParser.internalDateParse = function (value, parseOptions, num) {\n var matches = value.match(parseOptions.parserRegex);\n var retOptions = { 'hour': 0, 'minute': 0, 'second': 0 };\n var nRegx = num.numericRegex;\n if (isNullOrUndefined(matches)) {\n return null;\n }\n else {\n var props = Object.keys(parseOptions.evalposition);\n for (var _i = 0, props_1 = props; _i < props_1.length; _i++) {\n var prop = props_1[_i];\n var curObject = parseOptions.evalposition[prop];\n var matchString = matches[curObject.pos];\n if (curObject.isNumber) {\n retOptions[prop] = this.internalNumberParser(matchString, num);\n }\n else {\n if (prop === 'timeZone' && !isUndefined(matchString)) {\n var pos = curObject.pos;\n var val = void 0;\n var tmatch = matches[pos + 1];\n var flag = !isUndefined(tmatch);\n if (curObject.hourOnly) {\n val = this.getZoneValue(flag, tmatch, matches[pos + 4], num) * 60;\n }\n else {\n val = this.getZoneValue(flag, tmatch, matches[pos + 7], num) * 60;\n val += this.getZoneValue(flag, matches[pos + 4], matches[pos + 10], num);\n }\n if (!isNullOrUndefined(val)) {\n retOptions[prop] = val;\n }\n }\n else {\n matchString = ((prop === 'month') && (!parseOptions.isIslamic) && (parseOptions.culture === 'en' || parseOptions.culture === 'en-GB' || parseOptions.culture === 'en-US'))\n ? matchString[0].toUpperCase() + matchString.substring(1).toLowerCase() : matchString;\n retOptions[prop] = parseOptions[prop][matchString];\n }\n }\n }\n if (parseOptions.hour12) {\n retOptions.hour12 = true;\n }\n }\n return retOptions;\n };\n /**\n * Returns parsed number for provided Numeric string and Numeric Options\n * @param {string} value\n * @param {NumericOptions} option\n * @returns {number}\n */\n DateParser.internalNumberParser = function (value, option) {\n value = parser.convertValueParts(value, option.numberParseRegex, option.numericPair);\n if (latnRegex.test(value)) {\n return +value;\n }\n return null;\n };\n /**\n * Returns parsed time zone RegExp for provided hour format and time zone\n * @param {string} hourFormat\n * @param {base.TimeZoneOptions} tZone\n * @param {string} nRegex\n * @returns {string}\n */\n DateParser.parseTimeZoneRegx = function (hourFormat, tZone, nRegex) {\n var pattern = tZone.gmtFormat;\n var ret;\n var result;\n var cRegex = '(' + nRegex + ')' + '(' + nRegex + ')';\n var splitStr;\n ret = hourFormat.replace('+', '\\\\+');\n if (hourFormat.indexOf('HH') !== -1) {\n ret = ret.replace(/HH|mm/g, '(' + cRegex + ')');\n }\n else {\n ret = ret.replace(/H|m/g, '(' + cRegex + '?)');\n }\n splitStr = (ret.split(';').map(function (str) {\n return pattern.replace('{0}', str);\n }));\n ret = splitStr.join('|') + '|' + tZone.gmtZeroFormat;\n return ret;\n };\n /**\n * Returns zone based value.\n * @param {boolean} flag\n * @param {string} val1\n * @param {string} val2\n * @param {NumericOptions} num\n * @returns {number}\n */\n DateParser.getZoneValue = function (flag, val1, val2, num) {\n var ival = flag ? val1 : val2;\n if (!ival) {\n return 0;\n }\n var value = this.internalNumberParser(ival, num);\n if (flag) {\n return -value;\n }\n return value;\n };\n return DateParser;\n}());\nexport { DateParser };\n/* tslint:enable */\n","import { extend, isNullOrUndefined, isBlazor, getValue } from '../util';\nimport { ParserBase as parser } from './parser-base';\nimport { IntlBase as base } from './intl-base';\nvar formatRegex = /(^[ncpa]{1})([0-1]?[0-9]|20)?$/i;\nvar parseRegex = /^([^0-9]*)(([0-9,]*[0-9]+)(\\.[0-9]+)?)([Ee][+-]?[0-9]+)?([^0-9]*)$/;\nvar groupRegex = /,/g;\nvar latnDecimalRegex = /^[0-9]*(\\.[0-9]+)?$/;\nvar keys = ['minusSign', 'infinity'];\n/**\n * Module for Number Parser.\n * @private\n */\nvar NumberParser = /** @class */ (function () {\n function NumberParser() {\n }\n /**\n * Returns the parser function for given skeleton.\n * @param {string} - Specifies the culture name to be which formatting.\n * @param {NumberFormatOptions} - Specific the format in which number will parsed.\n * @param {cldr} - Specifies the global cldr data collection.\n * @return Function.\n */\n NumberParser.numberParser = function (culture, option, cldr) {\n var _this = this;\n var dependable = base.getDependables(cldr, culture, '', true);\n var parseOptions = { custom: true };\n var numOptions;\n if ((base.formatRegex.test(option.format)) || !(option.format)) {\n extend(parseOptions, base.getProperNumericSkeleton(option.format || 'N'));\n parseOptions.custom = false;\n if (!parseOptions.fractionDigits) {\n if (option.maximumFractionDigits) {\n parseOptions.maximumFractionDigits = option.maximumFractionDigits;\n }\n }\n }\n else {\n extend(parseOptions, base.customFormat(option.format, null, null));\n }\n var numbers = getValue('numbers', dependable.parserObject);\n numOptions = parser.getCurrentNumericOptions(dependable.parserObject, parser.getNumberingSystem(cldr), true, isBlazor());\n parseOptions.symbolRegex = parser.getSymbolRegex(Object.keys(numOptions.symbolMatch));\n // tslint:disable-next-line:no-any\n parseOptions.infinity = numOptions.symbolNumberSystem[keys[1]];\n var symbolpattern;\n if (!isBlazor()) {\n symbolpattern = base.getSymbolPattern(parseOptions.type, numOptions.numberSystem, dependable.numericObject, parseOptions.isAccount);\n if (symbolpattern) {\n symbolpattern = symbolpattern.replace(/\\u00A4/g, base.defaultCurrency);\n var split = symbolpattern.split(';');\n parseOptions.nData = base.getFormatData(split[1] || '-' + split[0], true, '');\n parseOptions.pData = base.getFormatData(split[0], true, '');\n }\n }\n else {\n parseOptions.nData = extend({}, {}, getValue(parseOptions.type + 'nData', numbers));\n parseOptions.pData = extend({}, {}, getValue(parseOptions.type + 'pData', numbers));\n if (parseOptions.type === 'currency' && option.currency) {\n base.replaceBlazorCurrency([parseOptions.pData, parseOptions.nData], getValue('currencySymbol', numbers), option.currency);\n }\n }\n return function (value) {\n return _this.getParsedNumber(value, parseOptions, numOptions);\n };\n };\n /**\n * Returns parsed number for the provided formatting options\n * @param {string} value\n * @param {NumericParts} options\n * @param {NumericOptions} numOptions\n * @returns {number}\n */\n NumberParser.getParsedNumber = function (value, options, numOptions) {\n var isNegative;\n var isPercent;\n var tempValue;\n var lead;\n var end;\n var ret;\n if (value.indexOf(options.infinity) !== -1) {\n return Infinity;\n }\n else {\n value = parser.convertValueParts(value, options.symbolRegex, numOptions.symbolMatch);\n value = parser.convertValueParts(value, numOptions.numberParseRegex, numOptions.numericPair);\n if (value.indexOf('.') === 0) {\n value = '0' + value;\n }\n var matches = value.match(parseRegex);\n if (isNullOrUndefined(matches)) {\n return NaN;\n }\n lead = matches[1];\n tempValue = matches[2];\n var exponent = matches[5];\n end = matches[6];\n isNegative = options.custom ? ((lead === options.nData.nlead) && (end === options.nData.nend)) :\n ((lead.indexOf(options.nData.nlead) !== -1) && (end.indexOf(options.nData.nend) !== -1));\n isPercent = isNegative ?\n options.nData.isPercent :\n options.pData.isPercent;\n tempValue = tempValue.replace(groupRegex, '');\n if (exponent) {\n tempValue += exponent;\n }\n ret = +tempValue;\n if (options.type === 'percent' || isPercent) {\n ret = ret / 100;\n }\n if (options.custom || options.fractionDigits) {\n ret = parseFloat(ret.toFixed(options.custom ?\n (isNegative ? options.nData.maximumFractionDigits : options.pData.maximumFractionDigits) : options.fractionDigits));\n }\n if (options.maximumFractionDigits) {\n ret = this.convertMaxFracDigits(tempValue, options, ret, isNegative);\n }\n if (isNegative) {\n ret *= -1;\n }\n return ret;\n }\n };\n NumberParser.convertMaxFracDigits = function (value, options, ret, isNegative) {\n var decimalSplitValue = value.split('.');\n if (decimalSplitValue[1] && decimalSplitValue[1].length > options.maximumFractionDigits) {\n ret = +(ret.toFixed(options.custom ?\n (isNegative ? options.nData.maximumFractionDigits : options.pData.maximumFractionDigits) : options.maximumFractionDigits));\n }\n return ret;\n };\n return NumberParser;\n}());\nexport { NumberParser };\n","import { isNullOrUndefined, getValue, extend, isBlazor } from './util';\nvar Observer = /** @class */ (function () {\n function Observer(context) {\n this.ranArray = [];\n this.boundedEvents = {};\n if (isNullOrUndefined(context)) {\n return;\n }\n this.context = context;\n }\n ;\n /**\n * To attach handler for given property in current context.\n * @param {string} property - specifies the name of the event.\n * @param {Function} handler - Specifies the handler function to be called while event notified.\n * @param {Object} context - Specifies the context binded to the handler.\n * @param {string} id - specifies the random generated id.\n * @return {void}\n */\n Observer.prototype.on = function (property, handler, context, id) {\n if (isNullOrUndefined(handler)) {\n return;\n }\n var cntxt = context || this.context;\n if (this.notExist(property)) {\n this.boundedEvents[property] = [{ handler: handler, context: cntxt }];\n return;\n }\n if (!isNullOrUndefined(id)) {\n if (this.ranArray.indexOf(id) === -1) {\n this.ranArray.push(id);\n this.boundedEvents[property].push({ handler: handler, context: cntxt, id: id });\n }\n }\n else if (!this.isHandlerPresent(this.boundedEvents[property], handler)) {\n this.boundedEvents[property].push({ handler: handler, context: cntxt });\n }\n };\n /**\n * To remove handlers from a event attached using on() function.\n * @param {string} eventName - specifies the name of the event.\n * @param {Function} handler - Optional argument specifies the handler function to be called while event notified.\n * @param {string} id - specifies the random generated id.\n * @return {void}\n */\n Observer.prototype.off = function (property, handler, id) {\n if (this.notExist(property)) {\n return;\n }\n var curObject = getValue(property, this.boundedEvents);\n if (handler) {\n for (var i = 0; i < curObject.length; i++) {\n if (id) {\n if (curObject[i].id === id) {\n curObject.splice(i, 1);\n var indexLocation = this.ranArray.indexOf(id);\n if (indexLocation !== -1) {\n this.ranArray.splice(indexLocation, 1);\n }\n break;\n }\n }\n else if (handler === curObject[i].handler) {\n curObject.splice(i, 1);\n break;\n }\n }\n }\n else {\n delete this.boundedEvents[property];\n }\n };\n /**\n * To notify the handlers in the specified event.\n * @param {string} property - Specifies the event to be notify.\n * @param {Object} args - Additional parameters to pass while calling the handler.\n * @param {Function} successHandler - this function will invoke after event successfully triggered\n * @param {Function} errorHandler - this function will invoke after event if it was failure to call.\n * @return {void}\n */\n Observer.prototype.notify = function (property, argument, successHandler, errorHandler) {\n if (this.notExist(property)) {\n if (successHandler) {\n successHandler.call(this, argument);\n }\n return;\n }\n if (argument) {\n argument.name = property;\n }\n var blazor = 'Blazor';\n var curObject = getValue(property, this.boundedEvents).slice(0);\n if (window[blazor]) {\n return this.blazorCallback(curObject, argument, successHandler, errorHandler, 0);\n }\n else {\n for (var _i = 0, curObject_1 = curObject; _i < curObject_1.length; _i++) {\n var cur = curObject_1[_i];\n cur.handler.call(cur.context, argument);\n }\n if (successHandler) {\n successHandler.call(this, argument);\n }\n }\n };\n Observer.prototype.blazorCallback = function (objs, argument, successHandler, errorHandler, index) {\n var _this = this;\n var isTrigger = index === objs.length - 1;\n if (index < objs.length) {\n var obj_1 = objs[index];\n var promise = obj_1.handler.call(obj_1.context, argument);\n if (promise && typeof promise.then === 'function') {\n if (!successHandler) {\n return promise;\n }\n promise.then(function (data) {\n data = typeof data === 'string' && _this.isJson(data) ? JSON.parse(data, _this.dateReviver) : data;\n extend(argument, argument, data, true);\n if (successHandler && isTrigger) {\n successHandler.call(obj_1.context, argument);\n }\n else {\n return _this.blazorCallback(objs, argument, successHandler, errorHandler, index + 1);\n }\n }).catch(function (data) {\n if (errorHandler) {\n errorHandler.call(obj_1.context, typeof data === 'string' &&\n _this.isJson(data) ? JSON.parse(data, _this.dateReviver) : data);\n }\n });\n }\n else if (successHandler && isTrigger) {\n successHandler.call(obj_1.context, argument);\n }\n else {\n return this.blazorCallback(objs, argument, successHandler, errorHandler, index + 1);\n }\n }\n };\n // tslint:disable-next-line:no-any\n Observer.prototype.dateReviver = function (key, value) {\n var dPattern = /^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}/;\n if (isBlazor && typeof value === 'string' && value.match(dPattern) !== null) {\n return (new Date(value));\n }\n return (value);\n };\n Observer.prototype.isJson = function (value) {\n try {\n JSON.parse(value);\n }\n catch (e) {\n return false;\n }\n return true;\n };\n /**\n * To destroy handlers in the event\n */\n Observer.prototype.destroy = function () {\n this.boundedEvents = this.context = undefined;\n };\n /**\n * Returns if the property exists.\n */\n Observer.prototype.notExist = function (prop) {\n return this.boundedEvents.hasOwnProperty(prop) === false || this.boundedEvents[prop].length <= 0;\n };\n /**\n * Returns if the handler is present.\n */\n Observer.prototype.isHandlerPresent = function (boundedEvents, handler) {\n for (var _i = 0, boundedEvents_1 = boundedEvents; _i < boundedEvents_1.length; _i++) {\n var cur = boundedEvents_1[_i];\n if (cur.handler === handler) {\n return true;\n }\n }\n return false;\n };\n return Observer;\n}());\nexport { Observer };\n","import { DateFormat } from './intl/date-formatter';\nimport { NumberFormat } from './intl/number-formatter';\nimport { DateParser } from './intl/date-parser';\nimport { NumberParser } from './intl/number-parser';\nimport { IntlBase } from './intl/intl-base';\nimport { extend, getValue, isBlazor } from './util';\nimport { Observer } from './observer';\n/**\n * Specifies the observer used for external change detection.\n */\nexport var onIntlChange = new Observer();\n/**\n * Specifies the default rtl status for EJ2 components.\n */\nexport var rightToLeft = false;\n/**\n * Specifies the CLDR data loaded for internationalization functionalities.\n * @private\n */\nexport var cldrData = {};\n/**\n * Specifies the default culture value to be considered.\n * @private\n */\nexport var defaultCulture = 'en-US';\n/**\n * Specifies default currency code to be considered\n * @private\n */\nexport var defaultCurrencyCode = 'USD';\nvar mapper = ['numericObject', 'dateObject'];\n/**\n * Internationalization class provides support to parse and format the number and date object to the desired format.\n * ```typescript\n * // To set the culture globally\n * setCulture('en-GB');\n *\n * // To set currency code globally\n * setCurrencyCode('EUR');\n *\n * //Load cldr data\n * loadCldr(gregorainData);\n * loadCldr(timeZoneData);\n * loadCldr(numbersData);\n * loadCldr(numberSystemData);\n *\n * // To use formatter in component side\n * let Intl:Internationalization = new Internationalization();\n *\n * // Date formatting\n * let dateFormatter: Function = Intl.getDateFormat({skeleton:'long',type:'dateTime'});\n * dateFormatter(new Date('11/2/2016'));\n * dateFormatter(new Date('25/2/2030'));\n * Intl.formatDate(new Date(),{skeleton:'E'});\n *\n * //Number formatting\n * let numberFormatter: Function = Intl.getNumberFormat({skeleton:'C5'})\n * numberFormatter(24563334);\n * Intl.formatNumber(123123,{skeleton:'p2'});\n *\n * // Date parser\n * let dateParser: Function = Intl.getDateParser({skeleton:'short',type:'time'});\n * dateParser('10:30 PM');\n * Intl.parseDate('10',{skeleton:'H'});\n * ```\n */\nvar Internationalization = /** @class */ (function () {\n function Internationalization(cultureName) {\n if (cultureName) {\n this.culture = cultureName;\n }\n }\n /**\n * Returns the format function for given options.\n * @param {DateFormatOptions} options - Specifies the format options in which the format function will return.\n * @returns {Function}\n */\n Internationalization.prototype.getDateFormat = function (options) {\n return DateFormat.dateFormat(this.getCulture(), options || { type: 'date', skeleton: 'short' }, cldrData);\n };\n /**\n * Returns the format function for given options.\n * @param {NumberFormatOptions} options - Specifies the format options in which the format function will return.\n * @returns {Function}\n */\n Internationalization.prototype.getNumberFormat = function (options) {\n if (options && !options.currency) {\n options.currency = defaultCurrencyCode;\n }\n if (isBlazor() && options && !options.format) {\n options.minimumFractionDigits = 0;\n }\n return NumberFormat.numberFormatter(this.getCulture(), options || {}, cldrData);\n };\n /**\n * Returns the parser function for given options.\n * @param {DateFormatOptions} options - Specifies the format options in which the parser function will return.\n * @returns {Function}\n */\n Internationalization.prototype.getDateParser = function (options) {\n return DateParser.dateParser(this.getCulture(), options || { skeleton: 'short', type: 'date' }, cldrData);\n };\n /**\n * Returns the parser function for given options.\n * @param {NumberFormatOptions} options - Specifies the format options in which the parser function will return.\n * @returns {Function}\n */\n Internationalization.prototype.getNumberParser = function (options) {\n if (isBlazor() && options && !options.format) {\n options.minimumFractionDigits = 0;\n }\n return NumberParser.numberParser(this.getCulture(), options || { format: 'N' }, cldrData);\n };\n /**\n * Returns the formatted string based on format options.\n * @param {Number} value - Specifies the number to format.\n * @param {NumberFormatOptions} option - Specifies the format options in which the number will be formatted.\n * @returns {string}\n */\n Internationalization.prototype.formatNumber = function (value, option) {\n return this.getNumberFormat(option)(value);\n };\n /**\n * Returns the formatted date string based on format options.\n * @param {Number} value - Specifies the number to format.\n * @param {DateFormatOptions} option - Specifies the format options in which the number will be formatted.\n * @returns {string}\n */\n Internationalization.prototype.formatDate = function (value, option) {\n return this.getDateFormat(option)(value);\n };\n /**\n * Returns the date object for given date string and options.\n * @param {string} value - Specifies the string to parse.\n * @param {DateFormatOptions} option - Specifies the parse options in which the date string will be parsed.\n * @returns {Date}\n */\n Internationalization.prototype.parseDate = function (value, option) {\n return this.getDateParser(option)(value);\n };\n /**\n * Returns the number object from the given string value and options.\n * @param {string} value - Specifies the string to parse.\n * @param {NumberFormatOptions} option - Specifies the parse options in which the string number will be parsed.\n * @returns {number}\n */\n Internationalization.prototype.parseNumber = function (value, option) {\n return this.getNumberParser(option)(value);\n };\n /**\n * Returns Native Date Time Pattern\n * @param {DateFormatOptions} option - Specifies the parse options for resultant date time pattern.\n * @param {boolean} isExcelFormat - Specifies format value to be converted to excel pattern.\n * @returns {string}\n * @private\n */\n Internationalization.prototype.getDatePattern = function (option, isExcelFormat) {\n return IntlBase.getActualDateTimeFormat(this.getCulture(), option, cldrData, isExcelFormat);\n };\n /**\n * Returns Native Number Pattern\n * @param {NumberFormatOptions} option - Specifies the parse options for resultant number pattern.\n * @returns {string}\n * @private\n */\n Internationalization.prototype.getNumberPattern = function (option, isExcel) {\n return IntlBase.getActualNumberFormat(this.getCulture(), option, cldrData, isExcel);\n };\n /**\n * Returns the First Day of the Week\n * @returns {number}\n */\n Internationalization.prototype.getFirstDayOfWeek = function () {\n return IntlBase.getWeekData(this.getCulture(), cldrData);\n };\n Internationalization.prototype.getCulture = function () {\n return this.culture || defaultCulture;\n };\n return Internationalization;\n}());\nexport { Internationalization };\n/**\n * Set the default culture to all EJ2 components\n * @param {string} cultureName - Specifies the culture name to be set as default culture.\n */\nexport function setCulture(cultureName) {\n defaultCulture = cultureName;\n onIntlChange.notify('notifyExternalChange', { 'locale': defaultCulture });\n}\n/**\n * Set the default currency code to all EJ2 components\n * @param {string} currencyCode Specifies the culture name to be set as default culture.\n * @returns {void}\n */\nexport function setCurrencyCode(currencyCode) {\n defaultCurrencyCode = currencyCode;\n onIntlChange.notify('notifyExternalChange', { 'currencyCode': defaultCurrencyCode });\n}\n/**\n * Load the CLDR data into context\n * @param {Object[]} obj Specifies the CLDR data's to be used for formatting and parser.\n * @returns {void}\n */\nexport function loadCldr() {\n var data = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n data[_i] = arguments[_i];\n }\n for (var _a = 0, data_1 = data; _a < data_1.length; _a++) {\n var obj = data_1[_a];\n extend(cldrData, obj, {}, true);\n }\n}\n/**\n * To enable or disable RTL functionality for all components globally.\n * @param {boolean} status - Optional argument Specifies the status value to enable or disable rtl option.\n * @returns {void}\n */\nexport function enableRtl(status) {\n if (status === void 0) { status = true; }\n rightToLeft = status;\n onIntlChange.notify('notifyExternalChange', { enableRtl: rightToLeft });\n}\n/**\n * To get the numeric CLDR object for given culture\n * @param {string} locale - Specifies the locale for which numericObject to be returned.\n * @ignore\n * @private\n */\nexport function getNumericObject(locale, type) {\n /* tslint:disable no-any */\n var numObject = IntlBase.getDependables(cldrData, locale, '', true)[mapper[0]];\n var dateObject = IntlBase.getDependables(cldrData, locale, '')[mapper[1]];\n var numSystem = getValue('defaultNumberingSystem', numObject);\n var symbPattern = isBlazor() ? getValue('numberSymbols', numObject) : getValue('symbols-numberSystem-' + numSystem, numObject);\n var pattern = IntlBase.getSymbolPattern(type || 'decimal', numSystem, numObject, false);\n return extend(symbPattern, IntlBase.getFormatData(pattern, true, '', true), { 'dateSeparator': IntlBase.getDateSeparator(dateObject) });\n}\n/**\n * To get the numeric CLDR number base object for given culture\n * @param {string} locale - Specifies the locale for which numericObject to be returned.\n * @param {string} currency - Specifies the currency for which numericObject to be returned.\n * @ignore\n * @private\n */\nexport function getNumberDependable(locale, currency) {\n var numObject = IntlBase.getDependables(cldrData, locale, '', true);\n return IntlBase.getCurrencySymbol(numObject.numericObject, currency);\n}\n/**\n * To get the default date CLDR object.\n * @ignore\n * @private\n */\nexport function getDefaultDateObject(mode) {\n return IntlBase.getDependables(cldrData, '', mode, false)[mapper[1]];\n}\n","import { defaultCurrencyCode } from '../internationalization';\nimport { getValue, isNullOrUndefined, extend, isBlazor } from '../util';\nimport { ParserBase as parser, getBlazorCurrencySymbol } from './parser-base';\nimport { DateFormat } from './date-formatter';\nimport { NumberFormat } from './number-formatter';\nimport { isUndefined } from '../util';\nexport var blazorCultureFormats = {\n 'en-US': {\n 'd': 'M/d/y',\n 'D': 'EEEE, MMMM d, y',\n 'f': 'EEEE, MMMM d, y h:mm a',\n 'F': 'EEEE, MMMM d, y h:mm:s a',\n 'g': 'M/d/y h:mm a',\n 'G': 'M/d/yyyy h:mm:ss tt',\n 'm': 'MMMM d',\n 'M': 'MMMM d',\n 'r': 'ddd, dd MMM yyyy HH\\':\\'mm\\':\\'ss \\'GMT\\'',\n 'R': 'ddd, dd MMM yyyy HH\\':\\'mm\\':\\'ss \\'GMT\\'',\n 's': 'yyyy\\'-\\'MM\\'-\\'dd\\'T\\'HH\\':\\'mm\\':\\'ss',\n 't': 'h:mm tt',\n 'T': 'h:m:s tt',\n 'u': 'yyyy\\'-\\'MM\\'-\\'dd HH\\':\\'mm\\':\\'ss\\'Z\\'',\n 'U': 'dddd, MMMM d, yyyy h:mm:ss tt',\n 'y': 'MMMM yyyy',\n 'Y': 'MMMM yyyy'\n }\n};\n/**\n * Date base common constants and function for date parser and formatter.\n */\nexport var IntlBase;\n(function (IntlBase) {\n // tslint:disable-next-line:max-line-length\n IntlBase.negativeDataRegex = /^(('[^']+'|''|[^*#@0,.E])*)(\\*.)?((([#,]*[0,]*0+)(\\.0*[0-9]*#*)?)|([#,]*@+#*))(E\\+?0+)?(('[^']+'|''|[^*#@0,.E])*)$/;\n IntlBase.customRegex = /^(('[^']+'|''|[^*#@0,.])*)(\\*.)?((([0#,]*[0,]*[0#]*)(\\.[0#]*)?)|([#,]*@+#*))(E\\+?0+)?(('[^']+'|''|[^*#@0,.E])*)$/;\n IntlBase.latnParseRegex = /0|1|2|3|4|5|6|7|8|9/g;\n var fractionRegex = /[0-9]/g;\n IntlBase.defaultCurrency = '$';\n var mapper = ['infinity', 'nan', 'group', 'decimal'];\n var patternRegex = /G|M|L|H|c|'| a|yy|y|EEEE|E/g;\n var patternMatch = {\n 'G': '',\n 'M': 'm',\n 'L': 'm',\n 'H': 'h',\n 'c': 'd',\n '\\'': '\"',\n ' a': ' AM/PM',\n 'yy': 'yy',\n 'y': 'yyyy',\n 'EEEE': 'dddd',\n 'E': 'ddd'\n };\n IntlBase.dateConverterMapper = /dddd|ddd/ig;\n var defaultFirstDay = 'sun';\n IntlBase.islamicRegex = /^islamic/;\n var firstDayMapper = {\n 'sun': 0,\n 'mon': 1,\n 'tue': 2,\n 'wed': 3,\n 'thu': 4,\n 'fri': 5,\n 'sat': 6\n };\n IntlBase.formatRegex = /(^[ncpae]{1})([0-1]?[0-9]|20)?$/i;\n IntlBase.currencyFormatRegex = /(^[ca]{1})([0-1]?[0-9]|20)?$/i;\n IntlBase.curWithoutNumberRegex = /(c|a)$/ig;\n var typeMapper = {\n '$': 'isCurrency',\n '%': 'isPercent',\n '-': 'isNegative',\n 0: 'nlead',\n 1: 'nend'\n };\n IntlBase.dateParseRegex = /([a-z])\\1*|'([^']|'')+'|''|./gi;\n IntlBase.basicPatterns = ['short', 'medium', 'long', 'full'];\n /* tslint:disable:quotemark */\n IntlBase.defaultObject = {\n 'dates': {\n 'calendars': {\n 'gregorian': {\n 'months': {\n 'stand-alone': {\n 'abbreviated': {\n '1': 'Jan',\n '2': 'Feb',\n '3': 'Mar',\n '4': 'Apr',\n '5': 'May',\n '6': 'Jun',\n '7': 'Jul',\n '8': 'Aug',\n '9': 'Sep',\n '10': 'Oct',\n '11': 'Nov',\n '12': 'Dec'\n },\n 'narrow': {\n '1': 'J',\n '2': 'F',\n '3': 'M',\n '4': 'A',\n '5': 'M',\n '6': 'J',\n '7': 'J',\n '8': 'A',\n '9': 'S',\n '10': 'O',\n '11': 'N',\n '12': 'D'\n },\n 'wide': {\n '1': 'January',\n '2': 'February',\n '3': 'March',\n '4': 'April',\n '5': 'May',\n '6': 'June',\n '7': 'July',\n '8': 'August',\n '9': 'September',\n '10': 'October',\n '11': 'November',\n '12': 'December'\n }\n }\n },\n \"days\": {\n \"stand-alone\": {\n \"abbreviated\": {\n \"sun\": \"Sun\",\n \"mon\": \"Mon\",\n \"tue\": \"Tue\",\n \"wed\": \"Wed\",\n \"thu\": \"Thu\",\n \"fri\": \"Fri\",\n \"sat\": \"Sat\"\n },\n \"narrow\": {\n \"sun\": \"S\",\n \"mon\": \"M\",\n \"tue\": \"T\",\n \"wed\": \"W\",\n \"thu\": \"T\",\n \"fri\": \"F\",\n \"sat\": \"S\"\n },\n \"short\": {\n \"sun\": \"Su\",\n \"mon\": \"Mo\",\n \"tue\": \"Tu\",\n \"wed\": \"We\",\n \"thu\": \"Th\",\n \"fri\": \"Fr\",\n \"sat\": \"Sa\"\n },\n \"wide\": {\n \"sun\": \"Sunday\",\n \"mon\": \"Monday\",\n \"tue\": \"Tuesday\",\n \"wed\": \"Wednesday\",\n \"thu\": \"Thursday\",\n \"fri\": \"Friday\",\n \"sat\": \"Saturday\"\n }\n }\n },\n \"dayPeriods\": {\n \"format\": {\n \"wide\": {\n \"am\": \"AM\",\n \"pm\": \"PM\"\n }\n }\n },\n 'eras': {\n 'eraNames': {\n '0': 'Before Christ',\n '0-alt-variant': 'Before Common Era',\n '1': 'Anno Domini',\n \"1-alt-variant\": \"Common Era\"\n },\n 'eraAbbr': {\n '0': 'BC',\n '0-alt-variant': 'BCE',\n '1': 'AD',\n '1-alt-variant': 'CE'\n },\n 'eraNarrow': {\n '0': 'B',\n '0-alt-variant': 'BCE',\n '1': 'A',\n '1-alt-variant': 'CE'\n }\n },\n 'dateFormats': {\n 'full': 'EEEE, MMMM d, y',\n 'long': 'MMMM d, y',\n 'medium': 'MMM d, y',\n 'short': 'M/d/yy'\n },\n 'timeFormats': {\n 'full': 'h:mm:ss a zzzz',\n 'long': 'h:mm:ss a z',\n 'medium': 'h:mm:ss a',\n 'short': 'h:mm a'\n },\n 'dateTimeFormats': {\n 'full': \"{1} 'at' {0}\",\n 'long': \"{1} 'at' {0}\",\n 'medium': '{1}, {0}',\n 'short': '{1}, {0}',\n 'availableFormats': {\n 'd': 'd',\n 'E': 'ccc',\n 'Ed': 'd E',\n 'Ehm': 'E h:mm a',\n 'EHm': 'E HH:mm',\n 'Ehms': 'E h:mm:ss a',\n 'EHms': 'E HH:mm:ss',\n 'Gy': 'y G',\n 'GyMMM': 'MMM y G',\n 'GyMMMd': 'MMM d, y G',\n 'GyMMMEd': 'E, MMM d, y G',\n 'h': 'h a',\n 'H': 'HH',\n 'hm': 'h:mm a',\n 'Hm': 'HH:mm',\n 'hms': 'h:mm:ss a',\n 'Hms': 'HH:mm:ss',\n 'hmsv': 'h:mm:ss a v',\n 'Hmsv': 'HH:mm:ss v',\n 'hmv': 'h:mm a v',\n 'Hmv': 'HH:mm v',\n 'M': 'L',\n 'Md': 'M/d',\n 'MEd': 'E, M/d',\n 'MMM': 'LLL',\n 'MMMd': 'MMM d',\n 'MMMEd': 'E, MMM d',\n 'MMMMd': 'MMMM d',\n 'ms': 'mm:ss',\n 'y': 'y',\n 'yM': 'M/y',\n 'yMd': 'M/d/y',\n 'yMEd': 'E, M/d/y',\n 'yMMM': 'MMM y',\n 'yMMMd': 'MMM d, y',\n 'yMMMEd': 'E, MMM d, y',\n 'yMMMM': 'MMMM y',\n },\n }\n },\n \"islamic\": {\n \"months\": {\n \"stand-alone\": {\n \"abbreviated\": {\n \"1\": \"Muh.\",\n \"2\": \"Saf.\",\n \"3\": \"Rab. I\",\n \"4\": \"Rab. II\",\n \"5\": \"Jum. I\",\n \"6\": \"Jum. II\",\n \"7\": \"Raj.\",\n \"8\": \"Sha.\",\n \"9\": \"Ram.\",\n \"10\": \"Shaw.\",\n \"11\": \"Dhuʻl-Q.\",\n \"12\": \"Dhuʻl-H.\"\n },\n \"narrow\": {\n \"1\": \"1\",\n \"2\": \"2\",\n \"3\": \"3\",\n \"4\": \"4\",\n \"5\": \"5\",\n \"6\": \"6\",\n \"7\": \"7\",\n \"8\": \"8\",\n \"9\": \"9\",\n \"10\": \"10\",\n \"11\": \"11\",\n \"12\": \"12\"\n },\n \"wide\": {\n \"1\": \"Muharram\",\n \"2\": \"Safar\",\n \"3\": \"Rabiʻ I\",\n \"4\": \"Rabiʻ II\",\n \"5\": \"Jumada I\",\n \"6\": \"Jumada II\",\n \"7\": \"Rajab\",\n \"8\": \"Shaʻban\",\n \"9\": \"Ramadan\",\n \"10\": \"Shawwal\",\n \"11\": \"Dhuʻl-Qiʻdah\",\n \"12\": \"Dhuʻl-Hijjah\"\n }\n }\n },\n \"days\": {\n \"stand-alone\": {\n \"abbreviated\": {\n \"sun\": \"Sun\",\n \"mon\": \"Mon\",\n \"tue\": \"Tue\",\n \"wed\": \"Wed\",\n \"thu\": \"Thu\",\n \"fri\": \"Fri\",\n \"sat\": \"Sat\"\n },\n \"narrow\": {\n \"sun\": \"S\",\n \"mon\": \"M\",\n \"tue\": \"T\",\n \"wed\": \"W\",\n \"thu\": \"T\",\n \"fri\": \"F\",\n \"sat\": \"S\"\n },\n \"short\": {\n \"sun\": \"Su\",\n \"mon\": \"Mo\",\n \"tue\": \"Tu\",\n \"wed\": \"We\",\n \"thu\": \"Th\",\n \"fri\": \"Fr\",\n \"sat\": \"Sa\"\n },\n \"wide\": {\n \"sun\": \"Sunday\",\n \"mon\": \"Monday\",\n \"tue\": \"Tuesday\",\n \"wed\": \"Wednesday\",\n \"thu\": \"Thursday\",\n \"fri\": \"Friday\",\n \"sat\": \"Saturday\"\n }\n }\n },\n \"dayPeriods\": {\n \"format\": {\n \"wide\": {\n \"am\": \"AM\",\n \"pm\": \"PM\"\n }\n }\n },\n \"eras\": {\n \"eraNames\": {\n \"0\": \"AH\"\n },\n \"eraAbbr\": {\n \"0\": \"AH\"\n },\n \"eraNarrow\": {\n \"0\": \"AH\"\n }\n },\n \"dateFormats\": {\n \"full\": \"EEEE, MMMM d, y G\",\n \"long\": \"MMMM d, y G\",\n \"medium\": \"MMM d, y G\",\n \"short\": \"M/d/y GGGGG\"\n },\n \"timeFormats\": {\n \"full\": \"h:mm:ss a zzzz\",\n \"long\": \"h:mm:ss a z\",\n \"medium\": \"h:mm:ss a\",\n \"short\": \"h:mm a\"\n },\n \"dateTimeFormats\": {\n \"full\": \"{1} 'at' {0}\",\n \"long\": \"{1} 'at' {0}\",\n \"medium\": \"{1}, {0}\",\n \"short\": \"{1}, {0}\",\n \"availableFormats\": {\n \"d\": \"d\",\n \"E\": \"ccc\",\n \"Ed\": \"d E\",\n \"Ehm\": \"E h:mm a\",\n \"EHm\": \"E HH:mm\",\n \"Ehms\": \"E h:mm:ss a\",\n \"EHms\": \"E HH:mm:ss\",\n \"Gy\": \"y G\",\n \"GyMMM\": \"MMM y G\",\n \"GyMMMd\": \"MMM d, y G\",\n \"GyMMMEd\": \"E, MMM d, y G\",\n \"h\": \"h a\",\n \"H\": \"HH\",\n \"hm\": \"h:mm a\",\n \"Hm\": \"HH:mm\",\n \"hms\": \"h:mm:ss a\",\n \"Hms\": \"HH:mm:ss\",\n \"M\": \"L\",\n \"Md\": \"M/d\",\n \"MEd\": \"E, M/d\",\n \"MMM\": \"LLL\",\n \"MMMd\": \"MMM d\",\n \"MMMEd\": \"E, MMM d\",\n \"MMMMd\": \"MMMM d\",\n \"ms\": \"mm:ss\",\n \"y\": \"y G\",\n \"yyyy\": \"y G\",\n \"yyyyM\": \"M/y GGGGG\",\n \"yyyyMd\": \"M/d/y GGGGG\",\n \"yyyyMEd\": \"E, M/d/y GGGGG\",\n \"yyyyMMM\": \"MMM y G\",\n \"yyyyMMMd\": \"MMM d, y G\",\n \"yyyyMMMEd\": \"E, MMM d, y G\",\n \"yyyyMMMM\": \"MMMM y G\",\n \"yyyyQQQ\": \"QQQ y G\",\n \"yyyyQQQQ\": \"QQQQ y G\"\n }\n }\n }\n },\n 'timeZoneNames': {\n \"hourFormat\": \"+HH:mm;-HH:mm\",\n \"gmtFormat\": \"GMT{0}\",\n \"gmtZeroFormat\": \"GMT\",\n }\n },\n 'numbers': {\n 'currencies': {\n 'USD': {\n 'displayName': 'US Dollar',\n 'symbol': '$',\n 'symbol-alt-narrow': '$'\n },\n 'EUR': {\n 'displayName': 'Euro',\n 'symbol': '€',\n 'symbol-alt-narrow': '€'\n },\n 'GBP': {\n 'displayName': 'British Pound',\n 'symbol-alt-narrow': '£'\n },\n },\n 'defaultNumberingSystem': 'latn',\n 'minimumGroupingDigits': '1',\n 'symbols-numberSystem-latn': {\n 'decimal': '.',\n 'group': ',',\n 'list': ';',\n 'percentSign': '%',\n 'plusSign': '+',\n 'minusSign': '-',\n 'exponential': 'E',\n 'superscriptingExponent': '×',\n 'perMille': '‰',\n 'infinity': '∞',\n 'nan': 'NaN',\n 'timeSeparator': ':'\n },\n 'decimalFormats-numberSystem-latn': {\n 'standard': '#,##0.###',\n },\n 'percentFormats-numberSystem-latn': {\n 'standard': '#,##0%'\n },\n 'currencyFormats-numberSystem-latn': {\n 'standard': '¤#,##0.00',\n 'accounting': '¤#,##0.00;(¤#,##0.00)'\n },\n 'scientificFormats-numberSystem-latn': {\n 'standard': '#E0'\n }\n }\n };\n IntlBase.blazorDefaultObject = {\n \"numbers\": {\n \"mapper\": {\n \"0\": \"0\",\n \"1\": \"1\",\n \"2\": \"2\",\n \"3\": \"3\",\n \"4\": \"4\",\n \"5\": \"5\",\n \"6\": \"6\",\n \"7\": \"7\",\n \"8\": \"8\",\n \"9\": \"9\"\n },\n \"mapperDigits\": \"0123456789\",\n \"numberSymbols\": {\n \"decimal\": \".\",\n \"group\": \",\",\n \"plusSign\": \"+\",\n \"minusSign\": \"-\",\n \"percentSign\": \"%\",\n \"nan\": \"NaN\",\n \"timeSeparator\": \":\",\n \"infinity\": \"∞\"\n },\n \"timeSeparator\": \":\",\n \"currencySymbol\": \"$\",\n \"currencypData\": {\n \"nlead\": \"$\",\n \"nend\": \"\",\n \"groupSeparator\": \",\",\n \"groupData\": {\n \"primary\": 3\n },\n \"maximumFraction\": 2,\n \"minimumFraction\": 2\n },\n \"percentpData\": {\n \"nlead\": \"\",\n \"nend\": \"%\",\n \"groupSeparator\": \",\",\n \"groupData\": {\n \"primary\": 3\n },\n \"maximumFraction\": 2,\n \"minimumFraction\": 2\n },\n \"percentnData\": {\n \"nlead\": \"-\",\n \"nend\": \"%\",\n \"groupSeparator\": \",\",\n \"groupData\": {\n \"primary\": 3\n },\n \"maximumFraction\": 2,\n \"minimumFraction\": 2\n },\n \"currencynData\": {\n \"nlead\": \"($\",\n \"nend\": \")\",\n \"groupSeparator\": \",\",\n \"groupData\": {\n \"primary\": 3\n },\n \"maximumFraction\": 2,\n \"minimumFraction\": 2\n },\n \"decimalnData\": {\n \"nlead\": \"-\",\n \"nend\": \"\",\n \"groupData\": {\n \"primary\": 3\n },\n \"maximumFraction\": 2,\n \"minimumFraction\": 2\n },\n \"decimalpData\": {\n \"nlead\": \"\",\n \"nend\": \"\",\n \"groupData\": {\n \"primary\": 3\n },\n \"maximumFraction\": 2,\n \"minimumFraction\": 2\n }\n },\n \"dates\": {\n \"dayPeriods\": {\n \"am\": \"AM\",\n \"pm\": \"PM\"\n },\n \"dateSeperator\": \"/\",\n \"days\": {\n \"abbreviated\": {\n \"sun\": \"Sun\",\n \"mon\": \"Mon\",\n \"tue\": \"Tue\",\n \"wed\": \"Wed\",\n \"thu\": \"Thu\",\n \"fri\": \"Fri\",\n \"sat\": \"Sat\"\n },\n \"short\": {\n \"sun\": \"Su\",\n \"mon\": \"Mo\",\n \"tue\": \"Tu\",\n \"wed\": \"We\",\n \"thu\": \"Th\",\n \"fri\": \"Fr\",\n \"sat\": \"Sa\"\n },\n \"wide\": {\n \"sun\": \"Sunday\",\n \"mon\": \"Monday\",\n \"tue\": \"Tuesday\",\n \"wed\": \"Wednesday\",\n \"thu\": \"Thursday\",\n \"fri\": \"Friday\",\n \"sat\": \"Saturday\"\n }\n },\n \"months\": {\n \"abbreviated\": {\n \"1\": \"Jan\",\n \"2\": \"Feb\",\n \"3\": \"Mar\",\n \"4\": \"Apr\",\n \"5\": \"May\",\n \"6\": \"Jun\",\n \"7\": \"Jul\",\n \"8\": \"Aug\",\n \"9\": \"Sep\",\n \"10\": \"Oct\",\n \"11\": \"Nov\",\n \"12\": \"Dec\"\n },\n \"wide\": {\n \"1\": \"January\",\n \"2\": \"February\",\n \"3\": \"March\",\n \"4\": \"April\",\n \"5\": \"May\",\n \"6\": \"June\",\n \"7\": \"July\",\n \"8\": \"August\",\n \"9\": \"September\",\n \"10\": \"October\",\n \"11\": \"November\",\n \"12\": \"December\"\n }\n },\n \"eras\": {\n \"1\": \"AD\"\n }\n }\n };\n /* tslint:enable:quotemark */\n IntlBase.monthIndex = {\n 3: 'abbreviated',\n 4: 'wide',\n 5: 'narrow',\n 1: 'abbreviated'\n };\n /**\n *\n */\n IntlBase.month = 'months';\n IntlBase.days = 'days';\n /**\n * Default numerber Object\n */\n IntlBase.patternMatcher = {\n C: 'currency',\n P: 'percent',\n N: 'decimal',\n A: 'currency',\n E: 'scientific'\n };\n /**\n * Returns the resultant pattern based on the skeleton, dateObject and the type provided\n * @private\n * @param {string} skeleton\n * @param {Object} dateObject\n * @param {string} type\n * @returns {string}\n */\n function getResultantPattern(skeleton, dateObject, type, isIslamic, blazorCulture) {\n var resPattern;\n var iType = type || 'date';\n if (blazorCulture) {\n resPattern = compareBlazorDateFormats({ skeleton: skeleton }, blazorCulture).format ||\n compareBlazorDateFormats({ skeleton: 'd' }, 'en-US').format;\n }\n else {\n if (IntlBase.basicPatterns.indexOf(skeleton) !== -1) {\n resPattern = getValue(iType + 'Formats.' + skeleton, dateObject);\n if (iType === 'dateTime') {\n var dPattern = getValue('dateFormats.' + skeleton, dateObject);\n var tPattern = getValue('timeFormats.' + skeleton, dateObject);\n resPattern = resPattern.replace('{1}', dPattern).replace('{0}', tPattern);\n }\n }\n else {\n resPattern = getValue('dateTimeFormats.availableFormats.' + skeleton, dateObject);\n }\n if (isUndefined(resPattern) && skeleton === 'yMd') {\n resPattern = 'M/d/y';\n }\n }\n return resPattern;\n }\n IntlBase.getResultantPattern = getResultantPattern;\n /**\n * Returns the dependable object for provided cldr data and culture\n * @private\n * @param {Object} cldr\n * @param {string} culture\n * @param {boolean} isNumber\n * @returns {Dependables}\n */\n function getDependables(cldr, culture, mode, isNumber) {\n var ret = {};\n var calendartype = mode || 'gregorian';\n ret.parserObject = parser.getMainObject(cldr, culture) || (isBlazor() ? IntlBase.blazorDefaultObject : IntlBase.defaultObject);\n if (isNumber) {\n ret.numericObject = getValue('numbers', ret.parserObject);\n }\n else {\n var dateString = isBlazor() ? 'dates' : ('dates.calendars.' + calendartype);\n ret.dateObject = getValue(dateString, ret.parserObject);\n }\n return ret;\n }\n IntlBase.getDependables = getDependables;\n /**\n * Returns the symbol pattern for provided parameters\n * @private\n * @param {string} type\n * @param {string} numSystem\n * @param {Object} obj\n * @param {boolean} isAccount\n * @returns {string}\n */\n function getSymbolPattern(type, numSystem, obj, isAccount) {\n return getValue(type + 'Formats-numberSystem-' +\n numSystem + (isAccount ? '.accounting' : '.standard'), obj) || (isAccount ? getValue(type + 'Formats-numberSystem-' +\n numSystem + '.standard', obj) : '');\n }\n IntlBase.getSymbolPattern = getSymbolPattern;\n function ConvertDateToWeekFormat(format) {\n var convertMapper = format.match(IntlBase.dateConverterMapper);\n if (convertMapper && isBlazor()) {\n var tempString = convertMapper[0].length === 3 ? 'EEE' : 'EEEE';\n return format.replace(IntlBase.dateConverterMapper, tempString);\n }\n return format;\n }\n IntlBase.ConvertDateToWeekFormat = ConvertDateToWeekFormat;\n function compareBlazorDateFormats(formatOptions, culture) {\n var format = formatOptions.format || formatOptions.skeleton;\n var curFormatMapper = getValue((culture || 'en-US') + '.' + format, blazorCultureFormats);\n if (!curFormatMapper) {\n curFormatMapper = getValue('en-US.' + format, blazorCultureFormats);\n }\n if (curFormatMapper) {\n curFormatMapper = ConvertDateToWeekFormat(curFormatMapper);\n formatOptions.format = curFormatMapper.replace(/tt/, 'a');\n }\n return formatOptions;\n }\n IntlBase.compareBlazorDateFormats = compareBlazorDateFormats;\n /**\n * Returns proper numeric skeleton\n * @private\n * @param {string} skeleton\n * @returns {NumericSkeleton}\n */\n function getProperNumericSkeleton(skeleton) {\n var matches = skeleton.match(IntlBase.formatRegex);\n var ret = {};\n var pattern = matches[1].toUpperCase();\n ret.isAccount = (pattern === 'A');\n /* tslint:disable no-any */\n ret.type = IntlBase.patternMatcher[pattern];\n if (skeleton.length > 1) {\n ret.fractionDigits = parseInt(matches[2], 10);\n }\n return ret;\n }\n IntlBase.getProperNumericSkeleton = getProperNumericSkeleton;\n /**\n * Returns format data for number formatting like minimum fraction, maximum fraction, etc..,\n * @private\n * @param {string} pattern\n * @param {boolean} needFraction\n * @param {string} cSymbol\n * @param {boolean} fractionOnly\n * @returns {NegativeData}\n */\n function getFormatData(pattern, needFraction, cSymbol, fractionOnly) {\n var nData = fractionOnly ? {} : { nlead: '', nend: '' };\n var match = pattern.match(IntlBase.customRegex);\n if (match) {\n if (!fractionOnly) {\n nData.nlead = changeCurrencySymbol(match[1], cSymbol);\n nData.nend = changeCurrencySymbol(match[10], cSymbol);\n nData.groupPattern = match[4];\n }\n var fraction = match[7];\n if (fraction && needFraction) {\n var fmatch = fraction.match(fractionRegex);\n if (!isNullOrUndefined(fmatch)) {\n nData.minimumFraction = fmatch.length;\n }\n else {\n nData.minimumFraction = 0;\n }\n nData.maximumFraction = fraction.length - 1;\n }\n }\n return nData;\n }\n IntlBase.getFormatData = getFormatData;\n /**\n * Changes currency symbol\n * @private\n * @param {string} val\n * @param {string} sym\n * @returns {string}\n */\n function changeCurrencySymbol(val, sym) {\n if (val) {\n return val.replace(IntlBase.defaultCurrency, sym);\n }\n return '';\n }\n /**\n * Returns currency symbol based on currency code\n * @private\n * @param {Object} numericObject\n * @param {string} currencyCode\n * @returns {string}\n */\n function getCurrencySymbol(numericObject, currencyCode, altSymbol) {\n var symbol = altSymbol ? ('.' + altSymbol) : '.symbol';\n var getCurrency = getValue('currencies.' + currencyCode + symbol, numericObject) ||\n getValue('currencies.' + currencyCode + '.symbol-alt-narrow', numericObject) || '$';\n return getCurrency;\n }\n IntlBase.getCurrencySymbol = getCurrencySymbol;\n /**\n * Returns formatting options for custom number format\n * @private\n * @param {string} format\n * @param {CommonOptions} dOptions\n * @param {Dependables} obj\n * @returns {GenericFormatOptions}\n */\n function customFormat(format, dOptions, obj) {\n var options = {};\n var formatSplit = format.split(';');\n var data = ['pData', 'nData', 'zeroData'];\n for (var i = 0; i < formatSplit.length; i++) {\n options[data[i]] = customNumberFormat(formatSplit[i], dOptions, obj);\n }\n if (isNullOrUndefined(options.nData)) {\n options.nData = extend({}, options.pData);\n options.nData.nlead = isNullOrUndefined(dOptions) ? '-' + options.nData.nlead : dOptions.minusSymbol + options.nData.nlead;\n }\n return options;\n }\n IntlBase.customFormat = customFormat;\n /**\n * Returns custom formatting options\n * @private\n * @param {string} format\n * @param {CommonOptions} dOptions\n * @param {Object} numObject\n * @returns {NegativeData}\n */\n function customNumberFormat(format, dOptions, numObject) {\n var cOptions = { type: 'decimal', minimumFractionDigits: 0, maximumFractionDigits: 0 };\n var pattern = format.match(IntlBase.customRegex);\n if (isNullOrUndefined(pattern) || (pattern[5] === '' && format !== 'N/A')) {\n cOptions.type = undefined;\n return cOptions;\n }\n cOptions.nlead = pattern[1];\n cOptions.nend = pattern[10];\n var integerPart = pattern[6];\n cOptions.useGrouping = integerPart.indexOf(',') !== -1;\n integerPart = integerPart.replace(/,/g, '');\n var fractionPart = pattern[7];\n if (integerPart.indexOf('0') !== -1) {\n cOptions.minimumIntegerDigits = integerPart.length - integerPart.indexOf('0');\n }\n if (!isNullOrUndefined(fractionPart)) {\n cOptions.minimumFractionDigits = fractionPart.lastIndexOf('0');\n cOptions.maximumFractionDigits = fractionPart.lastIndexOf('#');\n if (cOptions.minimumFractionDigits === -1) {\n cOptions.minimumFractionDigits = 0;\n }\n if (cOptions.maximumFractionDigits === -1 || cOptions.maximumFractionDigits < cOptions.minimumFractionDigits) {\n cOptions.maximumFractionDigits = cOptions.minimumFractionDigits;\n }\n }\n if (!isNullOrUndefined(dOptions)) {\n extend(cOptions, isCurrencyPercent([cOptions.nlead, cOptions.nend], '$', dOptions.currencySymbol));\n if (!cOptions.isCurrency) {\n extend(cOptions, isCurrencyPercent([cOptions.nlead, cOptions.nend], '%', dOptions.percentSymbol));\n }\n }\n else {\n extend(cOptions, isCurrencyPercent([cOptions.nlead, cOptions.nend], '%', '%'));\n }\n if (!isNullOrUndefined(numObject)) {\n var symbolPattern = getSymbolPattern(cOptions.type, dOptions.numberMapper.numberSystem, numObject, false);\n if (cOptions.useGrouping) {\n cOptions.groupSeparator = dOptions.numberMapper.numberSymbols[mapper[2]];\n cOptions.groupData = NumberFormat.getGroupingDetails(symbolPattern.split(';')[0]);\n }\n cOptions.nlead = cOptions.nlead.replace(/\\'/g, '');\n cOptions.nend = cOptions.nend.replace(/\\'/g, '');\n }\n return cOptions;\n }\n /**\n * Returns formatting options for currency or percent type\n * @private\n * @param {string[]} parts\n * @param {string} actual\n * @param {string} symbol\n * @returns {NegativeData}\n */\n function isCurrencyPercent(parts, actual, symbol) {\n var options = { nlead: parts[0], nend: parts[1] };\n for (var i = 0; i < 2; i++) {\n var part = parts[i];\n var loc = part.indexOf(actual);\n if ((loc !== -1) && ((loc < part.indexOf('\\'')) || (loc > part.lastIndexOf('\\'')))) {\n options[typeMapper[i]] = part.substr(0, loc) + symbol + part.substr(loc + 1);\n options[typeMapper[actual]] = true;\n options.type = options.isCurrency ? 'currency' : 'percent';\n break;\n }\n }\n return options;\n }\n IntlBase.isCurrencyPercent = isCurrencyPercent;\n /**\n * Returns culture based date separator\n * @private\n * @param {Object} dateObj\n * @returns {string}\n */\n function getDateSeparator(dateObj) {\n var value = (getValue('dateFormats.short', dateObj) || '').match(/[dM]([^dM])[dM]/i);\n return value ? value[1] : '/';\n }\n IntlBase.getDateSeparator = getDateSeparator;\n /**\n * Returns Native Date Time pattern\n * @private\n * @param {string} culture\n * @param {DateFormatOptions} options\n * @param {Object} cldr\n * @returns {string}\n */\n function getActualDateTimeFormat(culture, options, cldr, isExcelFormat) {\n var dependable = getDependables(cldr, culture, options.calendar);\n if (isBlazor()) {\n options = compareBlazorDateFormats(options, culture);\n }\n var actualPattern = options.format || getResultantPattern(options.skeleton, dependable.dateObject, options.type);\n if (isExcelFormat) {\n actualPattern = actualPattern.replace(patternRegex, function (pattern) {\n return patternMatch[pattern];\n });\n if (actualPattern.indexOf('z') !== -1) {\n var tLength = actualPattern.match(/z/g).length;\n var timeZonePattern = void 0;\n var options_1 = { 'timeZone': {} };\n options_1.numMapper = parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr));\n options_1.timeZone = getValue('dates.timeZoneNames', dependable.parserObject);\n var value = new Date();\n var timezone = value.getTimezoneOffset();\n var pattern = (tLength < 4) ? '+H;-H' : options_1.timeZone.hourFormat;\n pattern = pattern.replace(/:/g, options_1.numMapper.timeSeparator);\n if (timezone === 0) {\n timeZonePattern = options_1.timeZone.gmtZeroFormat;\n }\n else {\n timeZonePattern = DateFormat.getTimeZoneValue(timezone, pattern);\n timeZonePattern = options_1.timeZone.gmtFormat.replace(/\\{0\\}/, timeZonePattern);\n }\n actualPattern = actualPattern.replace(/[z]+/, '\"' + timeZonePattern + '\"');\n }\n actualPattern = actualPattern.replace(/ $/, '');\n }\n return actualPattern;\n }\n IntlBase.getActualDateTimeFormat = getActualDateTimeFormat;\n // tslint:disable-next-line:no-any\n function processSymbol(actual, option) {\n if (actual.indexOf(',') !== -1) {\n // tslint:disable-next-line:no-any\n var split = actual.split(',');\n actual = (split[0] + getValue('numberMapper.numberSymbols.group', option) +\n split[1].replace('.', getValue('numberMapper.numberSymbols.decimal', option)));\n }\n else {\n actual = actual.replace('.', getValue('numberMapper.numberSymbols.decimal', option));\n }\n return actual;\n }\n /**\n * Returns Native Number pattern\n * @private\n * @param {string} culture\n * @param {NumberFormatOptions} options\n * @param {Object} cldr\n * @returns {string}\n */\n function getActualNumberFormat(culture, options, cldr, isExcel) {\n var dependable = getDependables(cldr, culture, '', true);\n var parseOptions = { custom: true };\n var numrericObject = dependable.numericObject;\n var minFrac;\n var curObj = {};\n var curMatch = (options.format || '').match(IntlBase.currencyFormatRegex);\n var type = IntlBase.formatRegex.test(options.format) ? getProperNumericSkeleton(options.format || 'N') : {};\n var dOptions = {};\n if (curMatch) {\n dOptions.numberMapper = isBlazor() ?\n extend({}, dependable.numericObject) :\n parser.getNumberMapper(dependable.parserObject, parser.getNumberingSystem(cldr), true);\n var curCode = isBlazor() ? getValue('currencySymbol', dependable.numericObject) :\n getCurrencySymbol(dependable.numericObject, options.currency || defaultCurrencyCode, options.altSymbol);\n var symbolPattern = getSymbolPattern('currency', dOptions.numberMapper.numberSystem, dependable.numericObject, (/a/i).test(options.format));\n symbolPattern = symbolPattern.replace(/\\u00A4/g, curCode);\n var split = symbolPattern.split(';');\n curObj.hasNegativePattern = isBlazor() ? true : (split.length > 1);\n curObj.nData = isBlazor() ? getValue(type.type + 'nData', numrericObject) :\n getFormatData(split[1] || '-' + split[0], true, curCode);\n curObj.pData = isBlazor() ? getValue(type.type + 'pData', numrericObject) :\n getFormatData(split[0], false, curCode);\n if (!curMatch[2] && !options.minimumFractionDigits && !options.maximumFractionDigits) {\n minFrac = getFormatData(symbolPattern.split(';')[0], true, '', true).minimumFraction;\n }\n }\n var actualPattern;\n if ((IntlBase.formatRegex.test(options.format)) || !(options.format)) {\n extend(parseOptions, getProperNumericSkeleton(options.format || 'N'));\n parseOptions.custom = false;\n actualPattern = '###0';\n if (parseOptions.fractionDigits || options.minimumFractionDigits || options.maximumFractionDigits || minFrac) {\n var defaultMinimum = 0;\n if (parseOptions.fractionDigits) {\n options.minimumFractionDigits = options.maximumFractionDigits = parseOptions.fractionDigits;\n }\n actualPattern = fractionDigitsPattern(actualPattern, minFrac || parseOptions.fractionDigits ||\n options.minimumFractionDigits || defaultMinimum, options.maximumFractionDigits || defaultMinimum);\n }\n if (options.minimumIntegerDigits) {\n actualPattern = minimumIntegerPattern(actualPattern, options.minimumIntegerDigits);\n }\n if (options.useGrouping) {\n actualPattern = groupingPattern(actualPattern);\n }\n if (parseOptions.type === 'currency' || (parseOptions.type && isBlazor())) {\n if (isBlazor() && parseOptions.type !== 'currency') {\n curObj.pData = getValue(parseOptions.type + 'pData', numrericObject);\n curObj.nData = getValue(parseOptions.type + 'nData', numrericObject);\n }\n var cPattern = actualPattern;\n actualPattern = curObj.pData.nlead + cPattern + curObj.pData.nend;\n if (curObj.hasNegativePattern || isBlazor()) {\n actualPattern += ';' + curObj.nData.nlead + cPattern + curObj.nData.nend;\n }\n }\n if (parseOptions.type === 'percent' && !isBlazor()) {\n actualPattern += ' %';\n }\n }\n else {\n actualPattern = options.format.replace(/\\'/g, '\"');\n }\n if (Object.keys(dOptions).length > 0) {\n actualPattern = !isExcel ? processSymbol(actualPattern, dOptions) : actualPattern;\n }\n return actualPattern;\n }\n IntlBase.getActualNumberFormat = getActualNumberFormat;\n function fractionDigitsPattern(pattern, minDigits, maxDigits) {\n pattern += '.';\n for (var a = 0; a < minDigits; a++) {\n pattern += '0';\n }\n if (minDigits < maxDigits) {\n var diff = maxDigits - minDigits;\n for (var b = 0; b < diff; b++) {\n pattern += '#';\n }\n }\n return pattern;\n }\n function minimumIntegerPattern(pattern, digits) {\n var temp = pattern.split('.');\n var integer = '';\n for (var x = 0; x < digits; x++) {\n integer += '0';\n }\n return temp[1] ? (integer + '.' + temp[1]) : integer;\n }\n function groupingPattern(pattern) {\n var temp = pattern.split('.');\n var integer = temp[0];\n var no = 3 - integer.length % 3;\n var hash = (no && no === 1) ? '#' : (no === 2 ? '##' : '');\n integer = hash + integer;\n pattern = '';\n for (var x = integer.length - 1; x > 0; x = x - 3) {\n pattern = ',' + integer[x - 2] + integer[x - 1] + integer[x] + pattern;\n }\n pattern = pattern.slice(1);\n return temp[1] ? (pattern + '.' + temp[1]) : pattern;\n }\n function getWeekData(culture, cldr) {\n var firstDay = defaultFirstDay;\n var mapper = getValue('supplemental.weekData.firstDay', cldr);\n var iCulture = culture;\n if ((/en-/).test(iCulture)) {\n iCulture = iCulture.slice(3);\n }\n iCulture = iCulture.slice(0, 2).toUpperCase() + iCulture.substr(2);\n if (mapper) {\n firstDay = mapper[iCulture] || defaultFirstDay;\n }\n return firstDayMapper[firstDay];\n }\n IntlBase.getWeekData = getWeekData;\n /**\n * @private\n * @param pData\n * @param aCurrency\n * @param rCurrency\n */\n function replaceBlazorCurrency(pData, aCurrency, rCurrency) {\n var iCurrency = getBlazorCurrencySymbol(rCurrency);\n if (aCurrency !== iCurrency) {\n for (var _i = 0, pData_1 = pData; _i < pData_1.length; _i++) {\n var data = pData_1[_i];\n data.nend = data.nend.replace(aCurrency, iCurrency);\n data.nlead = data.nlead.replace(aCurrency, iCurrency);\n }\n }\n }\n IntlBase.replaceBlazorCurrency = replaceBlazorCurrency;\n /**\n * @private\n */\n function getWeekOfYear(date) {\n var newYear = new Date(date.getFullYear(), 0, 1);\n var day = newYear.getDay();\n var weeknum;\n day = (day >= 0 ? day : day + 7);\n var daynum = Math.floor((date.getTime() - newYear.getTime() -\n (date.getTimezoneOffset() - newYear.getTimezoneOffset()) * 60000) / 86400000) + 1;\n if (day < 4) {\n weeknum = Math.floor((daynum + day - 1) / 7) + 1;\n if (weeknum > 52) {\n var nYear = new Date(this.getFullYear() + 1, 0, 1);\n var nday = nYear.getDay();\n nday = nday >= 0 ? nday : nday + 7;\n weeknum = nday < 4 ? 1 : 53;\n }\n }\n else {\n weeknum = Math.floor((daynum + day - 1) / 7);\n }\n return weeknum;\n }\n IntlBase.getWeekOfYear = getWeekOfYear;\n})(IntlBase || (IntlBase = {}));\n","import { isNullOrUndefined, merge } from './util';\nvar headerRegex = /^(.*?):[ \\t]*([^\\r\\n]*)$/gm;\nvar defaultType = 'GET';\n/**\n * Ajax class provides ability to make asynchronous HTTP request to the server\n * ```typescript\n * var ajax = new Ajax(\"index.html\", \"GET\", true);\n * ajax.send().then(\n * function (value) {\n * console.log(value);\n * },\n * function (reason) {\n * console.log(reason);\n * });\n * ```\n */\nvar Ajax = /** @class */ (function () {\n /**\n * Constructor for Ajax class\n * @param {string|Object} options?\n * @param {string} type?\n * @param {boolean} async?\n * @returns defaultType\n */\n function Ajax(options, type, async, contentType) {\n /**\n * A boolean value indicating whether the request should be sent asynchronous or not.\n * @default true\n */\n this.mode = true;\n /**\n * A boolean value indicating whether to ignore the promise reject.\n * @private\n * @default true\n */\n this.emitError = true;\n this.options = {};\n if (typeof options === 'string') {\n this.url = options;\n this.type = type ? type.toUpperCase() : defaultType;\n this.mode = !isNullOrUndefined(async) ? async : true;\n }\n else if (typeof options === 'object') {\n this.options = options;\n merge(this, this.options);\n }\n this.type = this.type ? this.type.toUpperCase() : defaultType;\n this.contentType = (this.contentType !== undefined) ? this.contentType : contentType;\n }\n /**\n * Send the request to server.\n * @param {any} data - To send the user data\n * @return {Promise}\n */\n Ajax.prototype.send = function (data) {\n var _this = this;\n this.data = isNullOrUndefined(data) ? this.data : data;\n var eventArgs = {\n cancel: false,\n httpRequest: null\n };\n var promise = new Promise(function (resolve, reject) {\n _this.httpRequest = new XMLHttpRequest();\n _this.httpRequest.onreadystatechange = function () { _this.stateChange(resolve, reject); };\n if (!isNullOrUndefined(_this.onLoad)) {\n _this.httpRequest.onload = _this.onLoad;\n }\n if (!isNullOrUndefined(_this.onProgress)) {\n _this.httpRequest.onprogress = _this.onProgress;\n }\n /* istanbul ignore next */\n if (!isNullOrUndefined(_this.onAbort)) {\n _this.httpRequest.onabort = _this.onAbort;\n }\n /* istanbul ignore next */\n if (!isNullOrUndefined(_this.onError)) {\n _this.httpRequest.onerror = _this.onError;\n }\n //** Upload Events **/\n /* istanbul ignore next */\n if (!isNullOrUndefined(_this.onUploadProgress)) {\n _this.httpRequest.upload.onprogress = _this.onUploadProgress;\n }\n _this.httpRequest.open(_this.type, _this.url, _this.mode);\n // Set default headers\n if (!isNullOrUndefined(_this.data) && _this.contentType !== null) {\n _this.httpRequest.setRequestHeader('Content-Type', _this.contentType || 'application/json; charset=utf-8');\n }\n if (_this.beforeSend) {\n eventArgs.httpRequest = _this.httpRequest;\n _this.beforeSend(eventArgs);\n }\n if (!eventArgs.cancel) {\n _this.httpRequest.send(!isNullOrUndefined(_this.data) ? _this.data : null);\n }\n });\n return promise;\n };\n Ajax.prototype.successHandler = function (data) {\n if (this.onSuccess) {\n this.onSuccess(data, this);\n }\n return data;\n };\n Ajax.prototype.failureHandler = function (reason) {\n if (this.onFailure) {\n this.onFailure(this.httpRequest);\n }\n return reason;\n };\n Ajax.prototype.stateChange = function (resolve, reject) {\n var data = this.httpRequest.responseText;\n if (this.dataType && this.dataType.toLowerCase() === 'json') {\n if (data === '') {\n data = undefined;\n }\n else {\n try {\n data = JSON.parse(data);\n }\n catch (error) {\n // no exception handle\n }\n }\n }\n if (this.httpRequest.readyState === 4) {\n //success range should be 200 to 299\n if ((this.httpRequest.status >= 200 && this.httpRequest.status <= 299) || this.httpRequest.status === 304) {\n resolve(this.successHandler(data));\n }\n else {\n if (this.emitError) {\n reject(new Error(this.failureHandler(this.httpRequest.statusText)));\n }\n else {\n resolve();\n }\n }\n }\n };\n /**\n * To get the response header from XMLHttpRequest\n * @param {string} key Key to search in the response header\n * @returns {string}\n */\n Ajax.prototype.getResponseHeader = function (key) {\n var responseHeaders;\n var header;\n responseHeaders = {};\n var headers = headerRegex.exec(this.httpRequest.getAllResponseHeaders());\n while (headers) {\n responseHeaders[headers[1].toLowerCase()] = headers[2];\n headers = headerRegex.exec(this.httpRequest.getAllResponseHeaders());\n }\n header = responseHeaders[key.toLowerCase()];\n return isNullOrUndefined(header) ? null : header;\n };\n return Ajax;\n}());\nexport { Ajax };\n","import { isUndefined } from './util';\nvar REGX_MOBILE = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile/i;\nvar REGX_IE = /msie|trident/i;\nvar REGX_IE11 = /Trident\\/7\\./;\nvar REGX_IOS = /(ipad|iphone|ipod touch)/i;\nvar REGX_IOS7 = /(ipad|iphone|ipod touch);.*os 7_\\d|(ipad|iphone|ipod touch);.*os 8_\\d/i;\nvar REGX_ANDROID = /android/i;\nvar REGX_WINDOWS = /trident|windows phone|edge/i;\nvar REGX_VERSION = /(version)[ \\/]([\\w.]+)/i;\nvar REGX_BROWSER = {\n OPERA: /(opera|opr)(?:.*version|)[ \\/]([\\w.]+)/i,\n EDGE: /(edge)(?:.*version|)[ \\/]([\\w.]+)/i,\n CHROME: /(chrome|crios)[ \\/]([\\w.]+)/i,\n PANTHOMEJS: /(phantomjs)[ \\/]([\\w.]+)/i,\n SAFARI: /(safari)[ \\/]([\\w.]+)/i,\n WEBKIT: /(webkit)[ \\/]([\\w.]+)/i,\n MSIE: /(msie|trident) ([\\w.]+)/i,\n MOZILLA: /(mozilla)(?:.*? rv:([\\w.]+)|)/i\n};\n/* istanbul ignore else */\nif (typeof window !== 'undefined') {\n window.browserDetails = window.browserDetails || {};\n}\n/**\n * Get configuration details for Browser\n * @private\n */\nvar Browser = /** @class */ (function () {\n function Browser() {\n }\n Browser.extractBrowserDetail = function () {\n var browserInfo = { culture: {} };\n var keys = Object.keys(REGX_BROWSER);\n var clientInfo = [];\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n clientInfo = Browser.userAgent.match(REGX_BROWSER[key]);\n if (clientInfo) {\n browserInfo.name = (clientInfo[1].toLowerCase() === 'opr' ? 'opera' : clientInfo[1].toLowerCase());\n browserInfo.name = (clientInfo[1].toLowerCase() === 'crios' ? 'chrome' : browserInfo.name);\n browserInfo.version = clientInfo[2];\n browserInfo.culture.name = browserInfo.culture.language = navigator.language;\n if (!!Browser.userAgent.match(REGX_IE11)) {\n browserInfo.name = 'msie';\n break;\n }\n var version = Browser.userAgent.match(REGX_VERSION);\n if (browserInfo.name === 'safari' && version) {\n browserInfo.version = version[2];\n }\n break;\n }\n }\n return browserInfo;\n };\n /**\n * To get events from the browser\n * @param {string} event - type of event triggered.\n * @returns {Boolean}\n */\n Browser.getEvent = function (event) {\n // tslint:disable-next-line:no-any\n var events = {\n start: {\n isPointer: 'pointerdown', isTouch: 'touchstart', isDevice: 'mousedown'\n },\n move: {\n isPointer: 'pointermove', isTouch: 'touchmove', isDevice: 'mousemove'\n },\n end: {\n isPointer: 'pointerup', isTouch: 'touchend', isDevice: 'mouseup'\n },\n cancel: {\n isPointer: 'pointercancel', isTouch: 'touchcancel', isDevice: 'mouseleave'\n }\n };\n return (Browser.isPointer ? events[event].isPointer :\n (Browser.isTouch ? events[event].isTouch + (!Browser.isDevice ? ' ' + events[event].isDevice : '')\n : events[event].isDevice));\n };\n /**\n * To get the Touch start event from browser\n * @returns {string}\n */\n Browser.getTouchStartEvent = function () {\n return Browser.getEvent('start');\n };\n /**\n * To get the Touch end event from browser\n * @returns {string}\n */\n Browser.getTouchEndEvent = function () {\n return Browser.getEvent('end');\n };\n /**\n * To get the Touch move event from browser\n * @returns {string}\n */\n Browser.getTouchMoveEvent = function () {\n return Browser.getEvent('move');\n };\n /**\n * To cancel the touch event from browser\n * @returns {string}\n */\n Browser.getTouchCancelEvent = function () {\n return Browser.getEvent('cancel');\n };\n /**\n * To get the value based on provided key and regX\n * @param {string} key\n * @param {RegExp} regX\n * @returns {Object}\n */\n Browser.getValue = function (key, regX) {\n var browserDetails = window.browserDetails;\n if ('undefined' === typeof browserDetails[key]) {\n return browserDetails[key] = regX.test(Browser.userAgent);\n }\n return browserDetails[key];\n };\n Object.defineProperty(Browser, \"userAgent\", {\n get: function () {\n return Browser.uA;\n },\n //Properties \n /**\n * Property specifies the userAgent of the browser. Default userAgent value is based on the browser.\n * Also we can set our own userAgent.\n */\n set: function (uA) {\n Browser.uA = uA;\n window.browserDetails = {};\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"info\", {\n //Read Only Properties\n /**\n * Property is to get the browser information like Name, Version and Language\n * @returns BrowserInfo\n */\n get: function () {\n if (isUndefined(window.browserDetails.info)) {\n return window.browserDetails.info = Browser.extractBrowserDetail();\n }\n return window.browserDetails.info;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isIE\", {\n /**\n * Property is to get whether the userAgent is based IE.\n */\n get: function () {\n return Browser.getValue('isIE', REGX_IE);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isTouch\", {\n /**\n * Property is to get whether the browser has touch support.\n */\n get: function () {\n if (isUndefined(window.browserDetails.isTouch)) {\n return (window.browserDetails.isTouch =\n ('ontouchstart' in window.navigator) ||\n (window &&\n window.navigator &&\n (window.navigator.maxTouchPoints > 0)) || ('ontouchstart' in window));\n }\n return window.browserDetails.isTouch;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isPointer\", {\n /**\n * Property is to get whether the browser has Pointer support.\n */\n get: function () {\n if (isUndefined(window.browserDetails.isPointer)) {\n return window.browserDetails.isPointer = ('pointerEnabled' in window.navigator);\n }\n return window.browserDetails.isPointer;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isMSPointer\", {\n /**\n * Property is to get whether the browser has MSPointer support.\n */\n get: function () {\n if (isUndefined(window.browserDetails.isMSPointer)) {\n return window.browserDetails.isMSPointer = ('msPointerEnabled' in window.navigator);\n }\n return window.browserDetails.isMSPointer;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isDevice\", {\n /**\n * Property is to get whether the userAgent is device based.\n */\n get: function () {\n return Browser.getValue('isDevice', REGX_MOBILE);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isIos\", {\n /**\n * Property is to get whether the userAgent is IOS.\n */\n get: function () {\n return Browser.getValue('isIos', REGX_IOS);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isIos7\", {\n /**\n * Property is to get whether the userAgent is Ios7.\n */\n get: function () {\n return Browser.getValue('isIos7', REGX_IOS7);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isAndroid\", {\n /**\n * Property is to get whether the userAgent is Android.\n */\n get: function () {\n return Browser.getValue('isAndroid', REGX_ANDROID);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isWebView\", {\n /**\n * Property is to identify whether application ran in web view.\n */\n get: function () {\n if (isUndefined(window.browserDetails.isWebView)) {\n window.browserDetails.isWebView = !(isUndefined(window.cordova) && isUndefined(window.PhoneGap)\n && isUndefined(window.phonegap) && window.forge !== 'object');\n return window.browserDetails.isWebView;\n }\n return window.browserDetails.isWebView;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"isWindows\", {\n /**\n * Property is to get whether the userAgent is Windows.\n */\n get: function () {\n return Browser.getValue('isWindows', REGX_WINDOWS);\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"touchStartEvent\", {\n /**\n * Property is to get the touch start event. It returns event name based on browser.\n */\n get: function () {\n if (isUndefined(window.browserDetails.touchStartEvent)) {\n return window.browserDetails.touchStartEvent = Browser.getTouchStartEvent();\n }\n return window.browserDetails.touchStartEvent;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"touchMoveEvent\", {\n /**\n * Property is to get the touch move event. It returns event name based on browser.\n */\n get: function () {\n if (isUndefined(window.browserDetails.touchMoveEvent)) {\n return window.browserDetails.touchMoveEvent = Browser.getTouchMoveEvent();\n }\n return window.browserDetails.touchMoveEvent;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"touchEndEvent\", {\n /**\n * Property is to get the touch end event. It returns event name based on browser.\n */\n get: function () {\n if (isUndefined(window.browserDetails.touchEndEvent)) {\n return window.browserDetails.touchEndEvent = Browser.getTouchEndEvent();\n }\n return window.browserDetails.touchEndEvent;\n },\n enumerable: true,\n configurable: true\n });\n Object.defineProperty(Browser, \"touchCancelEvent\", {\n /**\n * Property is to cancel the touch end event.\n */\n get: function () {\n if (isUndefined(window.browserDetails.touchCancelEvent)) {\n return window.browserDetails.touchCancelEvent = Browser.getTouchCancelEvent();\n }\n return window.browserDetails.touchCancelEvent;\n },\n enumerable: true,\n configurable: true\n });\n /* istanbul ignore next */\n Browser.uA = typeof navigator !== 'undefined' ? navigator.userAgent : '';\n return Browser;\n}());\nexport { Browser };\n","import { debounce, extend } from './util';\nimport { Browser } from './browser';\n/**\n * EventHandler class provides option to add, remove, clear and trigger events to a HTML DOM element\n * @private\n * ```html\n * \n * \n * ```\n */\nvar EventHandler = /** @class */ (function () {\n function EventHandler() {\n }\n // to get the event data based on element\n EventHandler.addOrGetEventData = function (element) {\n if (element) {\n if ('__eventList' in element) {\n return element.__eventList.events;\n }\n else {\n element.__eventList = {};\n return element.__eventList.events = [];\n }\n }\n else {\n return [];\n }\n };\n /**\n * Add an event to the specified DOM element.\n * @param {any} element - Target HTML DOM element\n * @param {string} eventName - A string that specifies the name of the event\n * @param {Function} listener - Specifies the function to run when the event occurs\n * @param {Object} bindTo - A object that binds 'this' variable in the event handler\n * @param {number} debounce - Specifies at what interval given event listener should be triggered.\n * @return {Function}\n */\n EventHandler.add = function (element, eventName, listener, bindTo, intDebounce) {\n var eventData = EventHandler.addOrGetEventData(element);\n var debounceListener;\n if (intDebounce) {\n debounceListener = debounce(listener, intDebounce);\n }\n else {\n debounceListener = listener;\n }\n if (bindTo) {\n debounceListener = debounceListener.bind(bindTo);\n }\n var event = eventName.split(' ');\n for (var i = 0; i < event.length; i++) {\n eventData.push({\n name: event[i],\n listener: listener,\n debounce: debounceListener\n });\n if (Browser.isIE) {\n element.addEventListener(event[i], debounceListener);\n }\n else {\n element.addEventListener(event[i], debounceListener, { passive: false });\n }\n }\n return debounceListener;\n };\n /**\n * Remove an event listener that has been attached before.\n * @param {any} element - Specifies the target html element to remove the event\n * @param {string} eventName - A string that specifies the name of the event to remove\n * @param {Function} listener - Specifies the function to remove\n * @return {void}\n */\n EventHandler.remove = function (element, eventName, listener) {\n var eventData = EventHandler.addOrGetEventData(element);\n var event = eventName.split(' ');\n var _loop_1 = function (j) {\n var index = -1;\n var debounceListener;\n if (eventData && eventData.length !== 0) {\n eventData.some(function (x, i) {\n return x.name === event[j] && x.listener === listener ?\n (index = i, debounceListener = x.debounce, true) : false;\n });\n }\n if (index !== -1) {\n eventData.splice(index, 1);\n }\n if (debounceListener) {\n element.removeEventListener(event[j], debounceListener);\n }\n };\n for (var j = 0; j < event.length; j++) {\n _loop_1(j);\n }\n };\n /**\n * Clear all the event listeners that has been previously attached to the element.\n * @param {any} element - Specifies the target html element to clear the events\n * @return {void}\n */\n EventHandler.clearEvents = function (element) {\n var eventData;\n var copyData;\n eventData = EventHandler.addOrGetEventData(element);\n copyData = extend([], copyData, eventData);\n for (var i = 0; i < copyData.length; i++) {\n element.removeEventListener(copyData[i].name, copyData[i].debounce);\n eventData.shift();\n }\n };\n /**\n * Trigger particular event of the element.\n * @param {any} element - Specifies the target html element to trigger the events\n * @param {string} eventName - Specifies the event to trigger for the specified element.\n * Can be a custom event, or any of the standard events.\n * @param {any} eventProp - Additional parameters to pass on to the event properties\n * @return {void}\n */\n EventHandler.trigger = function (element, eventName, eventProp) {\n var eventData = EventHandler.addOrGetEventData(element);\n var fn = null;\n for (var _i = 0, eventData_1 = eventData; _i < eventData_1.length; _i++) {\n var event_1 = eventData_1[_i];\n if (event_1.name === eventName) {\n event_1.debounce.call(this, eventProp);\n }\n }\n };\n return EventHandler;\n}());\nexport { EventHandler };\n","/**\n * Template Engine\n */\nvar LINES = new RegExp('\\\\n|\\\\r|\\\\s\\\\s+', 'g');\nvar QUOTES = new RegExp(/'|\"/g);\nvar IF_STMT = new RegExp('if ?\\\\(');\nvar ELSEIF_STMT = new RegExp('else if ?\\\\(');\nvar ELSE_STMT = new RegExp('else');\nvar FOR_STMT = new RegExp('for ?\\\\(');\nvar IF_OR_FOR = new RegExp('(\\/if|\\/for)');\nvar CALL_FUNCTION = new RegExp('\\\\((.*)\\\\)', '');\nvar NOT_NUMBER = new RegExp('^[0-9]+$', 'g');\nvar WORD = new RegExp('[\\\\w\"\\'.\\\\s+]+', 'g');\nvar DBL_QUOTED_STR = new RegExp('\"(.*?)\"', 'g');\nvar WORDIF = new RegExp('[\\\\w\"\\'@#$.\\\\s+]+', 'g');\nvar exp = new RegExp('\\\\${([^}]*)}', 'g');\n// let cachedTemplate: Object = {};\nvar ARR_OBJ = /^\\..*/gm;\nvar SINGLE_SLASH = /\\\\/gi;\nvar DOUBLE_SLASH = /\\\\\\\\/gi;\nvar WORDFUNC = new RegExp('[\\\\w\"\\'@#$.\\\\s+]+', 'g');\nvar WINDOWFUNC = /\\window\\./gm;\n/**\n * The function to set regular expression for template expression string.\n * @param {RegExp} value - Value expression.\n * @private\n */\nexport function expression(value) {\n if (value) {\n exp = value;\n }\n return exp;\n}\n// /**\n// * To render the template string from the given data.\n// * @param {string} template - String Template.\n// * @param {Object[]|JSON} data - DataSource for the template.\n// * @param {Object} helper? - custom helper object.\n// */\n// export function template(template: string, data: JSON, helper?: Object): string {\n// let hash: string = hashCode(template);\n// let tmpl: Function;\n// if (!cachedTemplate[hash]) {\n// tmpl = cachedTemplate[hash] = compile(template, helper);\n// } else {\n// tmpl = cachedTemplate[hash];\n// }\n// return tmpl(data);\n// }\n/**\n * Compile the template string into template function.\n * @param {string} template - The template string which is going to convert.\n * @param {Object} helper? - Helper functions as an object.\n * @private\n */\nexport function compile(template, helper) {\n var argName = 'data';\n var evalExpResult = evalExp(template, argName, helper);\n var fnCode = \"var str=\\\"\" + evalExpResult + \"\\\"; return str;\";\n // tslint:disable-next-line:no-function-constructor-with-string-args\n var fn = new Function(argName, fnCode);\n return fn.bind(helper);\n}\n// function used to evaluate the function expression\nfunction evalExp(str, nameSpace, helper) {\n var varCOunt = 0;\n /**\n * Variable containing Local Keys\n */\n var localKeys = [];\n var isClass = str.match(/class=\"([^\\\"]+|)\\s{2}/g);\n var singleSpace = '';\n if (isClass) {\n isClass.forEach(function (value) {\n singleSpace = value.replace(/\\s\\s+/g, ' ');\n str = str.replace(value, singleSpace);\n });\n }\n return str.replace(LINES, '').replace(DBL_QUOTED_STR, '\\'$1\\'').replace(exp, function (match, cnt, offset, matchStr) {\n var SPECIAL_CHAR = /\\@|\\#|\\$/gm;\n var matches = cnt.match(CALL_FUNCTION);\n // matches to detect any function calls\n if (matches) {\n var rlStr = matches[1];\n if (ELSEIF_STMT.test(cnt)) {\n //handling else-if condition\n cnt = '\";} ' + cnt.replace(matches[1], rlStr.replace(WORD, function (str) {\n str = str.trim();\n return addNameSpace(str, !(QUOTES.test(str)) && (localKeys.indexOf(str) === -1), nameSpace, localKeys);\n })) + '{ \\n str = str + \"';\n }\n else if (IF_STMT.test(cnt)) {\n //handling if condition\n cnt = '\"; ' + cnt.replace(matches[1], rlStr.replace(WORDIF, function (strs) {\n return HandleSpecialCharArrObj(strs, nameSpace, localKeys, true);\n })) + '{ \\n str = str + \"';\n }\n else if (FOR_STMT.test(cnt)) {\n //handling for condition\n var rlStr_1 = matches[1].split(' of ');\n // replace for each into actual JavaScript\n cnt = '\"; ' + cnt.replace(matches[1], function (mtc) {\n localKeys.push(rlStr_1[0]);\n localKeys.push(rlStr_1[0] + 'Index');\n varCOunt = varCOunt + 1;\n // tslint:disable-next-line\n return 'var i' + varCOunt + '=0; i' + varCOunt + ' < ' + addNameSpace(rlStr_1[1], true, nameSpace, localKeys) + '.length; i' + varCOunt + '++';\n }) + '{ \\n ' + 'var ' + rlStr_1[0] + '= ' + addNameSpace(rlStr_1[1], true, nameSpace, localKeys)\n + '[i' + varCOunt + ']; \\n var ' + rlStr_1[0] + 'Index=i' + varCOunt + '; \\n str = str + \"';\n }\n else {\n //helper function handling\n var fnStr = cnt.split('(');\n var fNameSpace = (helper && helper.hasOwnProperty(fnStr[0]) ? 'this.' : 'global');\n fNameSpace = (/\\./.test(fnStr[0]) ? '' : fNameSpace);\n var ftArray = matches[1].split(',');\n if (matches[1].length !== 0 && !(/data/).test(ftArray[0]) && !(/window./).test(ftArray[0])) {\n matches[1] = (fNameSpace === 'global' ? nameSpace + '.' + matches[1] : matches[1]);\n }\n var splRegexp = /\\@|\\$|\\#/gm;\n var arrObj = /\\]\\./gm;\n if (WINDOWFUNC.test(cnt) && arrObj.test(cnt) || splRegexp.test(cnt)) {\n var splArrRegexp = /\\@|\\$|\\#|\\]\\./gm;\n if (splArrRegexp.test(cnt)) {\n // tslint:disable-next-line\n cnt = '\"+ ' + (fNameSpace === 'global' ? '' : fNameSpace) + cnt.replace(matches[1], rlStr.replace(WORDFUNC, function (strs) {\n return HandleSpecialCharArrObj(strs, nameSpace, localKeys);\n })) + '+ \"';\n }\n }\n else {\n cnt = '\" + ' + (fNameSpace === 'global' ? '' : fNameSpace) +\n cnt.replace(rlStr, addNameSpace(matches[1].replace(/,( |)data.|,/gi, ',' + nameSpace + '.').replace(/,( |)data.window/gi, ',window'), (fNameSpace === 'global' ? false : true), nameSpace, localKeys)) +\n '+\"';\n }\n }\n }\n else if (ELSE_STMT.test(cnt)) {\n // handling else condition\n cnt = '\"; ' + cnt.replace(ELSE_STMT, '} else { \\n str = str + \"');\n }\n else if (!!cnt.match(IF_OR_FOR)) {\n // close condition \n cnt = cnt.replace(IF_OR_FOR, '\"; \\n } \\n str = str + \"');\n }\n else if (SPECIAL_CHAR.test(cnt)) {\n // template string with double slash with special character\n if (cnt.match(SINGLE_SLASH)) {\n cnt = SlashReplace(cnt);\n }\n cnt = '\"+' + NameSpaceForspecialChar(cnt, (localKeys.indexOf(cnt) === -1), nameSpace, localKeys) + '\"]+\"';\n }\n else {\n // template string with double slash\n if (cnt.match(SINGLE_SLASH)) {\n cnt = SlashReplace(cnt);\n cnt = '\"+' + NameSpaceForspecialChar(cnt, (localKeys.indexOf(cnt) === -1), nameSpace, localKeys) + '\"]+\"';\n }\n else {\n // evaluate normal expression\n cnt = '\"+' + addNameSpace(cnt.replace(/\\,/gi, '+' + nameSpace + '.'), (localKeys.indexOf(cnt) === -1), nameSpace, localKeys) + '+\"';\n }\n }\n return cnt;\n });\n}\nfunction addNameSpace(str, addNS, nameSpace, ignoreList, emptyStrCheck) {\n /* istanbul ignore next */\n if (emptyStrCheck && str === '') {\n return str;\n }\n return ((addNS && !(NOT_NUMBER.test(str)) && ignoreList.indexOf(str.split('.')[0]) === -1) ? nameSpace + '.' + str : str);\n}\nfunction NameSpaceArrObj(str, addNS, nameSpace, ignoreList) {\n var arrObjReg = /^\\..*/gm;\n return ((addNS && !(NOT_NUMBER.test(str)) &&\n ignoreList.indexOf(str.split('.')[0]) === -1 && !(arrObjReg.test(str))) ? nameSpace + '.' + str : str);\n}\n// // Create hashCode for template string to storeCached function\n// function hashCode(str: string): string {\n// return str.split('').reduce((a: number, b: string) => { a = ((a << 5) - a) + b.charCodeAt(0); return a & a; }, 0).toString();\n// }\nfunction NameSpaceForspecialChar(str, addNS, nameSpace, ignoreList) {\n return ((addNS && !(NOT_NUMBER.test(str)) && ignoreList.indexOf(str.split('.')[0]) === -1) ? nameSpace + '[\"' + str : str);\n}\n// tslint:disable-next-line\nfunction SlashReplace(tempStr) {\n // tslint:disable-next-line\n var double = \"\\\\\\\\\";\n if (tempStr.match(DOUBLE_SLASH)) {\n tempStr = tempStr;\n }\n else {\n tempStr = tempStr.replace(SINGLE_SLASH, double);\n }\n return tempStr;\n}\nfunction HandleSpecialCharArrObj(str, nameSpaceNew, keys, emptyStrCheck) {\n str = str.trim();\n var windowFunc = /\\window\\./gm;\n if (!windowFunc.test(str)) {\n var quotes = /'|\"/gm;\n var splRegexp = /\\@|\\$|\\#/gm;\n if (splRegexp.test(str)) {\n str = NameSpaceForspecialChar(str, (keys.indexOf(str) === -1), nameSpaceNew, keys) + '\"]';\n }\n if (ARR_OBJ.test(str)) {\n return NameSpaceArrObj(str, !(quotes.test(str)) && (keys.indexOf(str) === -1), nameSpaceNew, keys);\n }\n else {\n return addNameSpace(str, !(quotes.test(str)) && (keys.indexOf(str) === -1), nameSpaceNew, keys, emptyStrCheck);\n }\n }\n else {\n return str;\n }\n}\n","/**\n * Template Engine Bridge\n */\nimport { compile as render } from './template';\nimport { createElement } from './dom';\nimport { isNullOrUndefined, isBlazor } from './util';\nvar HAS_ROW = /^[\\n\\r.]+\\\\s]+))?)*)\\s*(\\/?)>/;\nvar endRegex = /^<\\/([-A-Za-z0-9_]+)[^>]*>/;\nvar attributeRegex = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\\s*=\\s*(?:(?:\"((?:\\\\.|[^\"])*)\")|(?:'((?:\\\\.|[^'])*)')|([^>\\s]+)))?/g;\n/**\n * Namespace for VirtualDOM\n * @private\n */\nexport var VirtualDOM;\n(function (VirtualDOM) {\n //tslint:disable:no-any\n function createElement(tagName, properties) {\n var children = [];\n var extended = extend({}, {}, properties, true);\n if (!isNullOrUndefined(properties)) {\n var keys = Object.keys(properties);\n if (keys.length) {\n if (extended.innerHTML) {\n children = ConvertHTMLToJSon(extended.innerHTML);\n delete extended.innerHTML;\n }\n if (extended.attrs) {\n extend(extended, extended.attrs);\n delete extended.attrs;\n }\n if (extended.styles) {\n var valArr = extended.styles.split(';');\n var vObj = {};\n for (var i = 0, length_1 = valArr.length; i < length_1; i++) {\n var cVal = valArr[i];\n var styleSplit = cVal.split(':');\n vObj[styleSplit[0]] = styleSplit[1];\n }\n delete extended.styles;\n extended.style = vObj;\n }\n }\n }\n return {\n tagName: tagName,\n attributes: extended || {},\n children: children\n };\n }\n VirtualDOM.createElement = createElement;\n function assignParent(childrens, parent) {\n if (parent && childrens) {\n childrens.forEach(function (child) {\n if (isObject(child)) {\n if (child.parent) {\n detach(child);\n }\n child.parent = parent;\n }\n return child;\n });\n }\n }\n VirtualDOM.assignParent = assignParent;\n function append(fromElements, toElement) {\n assignParent(fromElements, toElement);\n if (toElement.children) {\n toElement.children = toElement.children.concat(fromElements);\n }\n else {\n toElement.children = [].concat(fromElements);\n }\n }\n VirtualDOM.append = append;\n function prepend(child, toElement) {\n assignParent(child, toElement);\n if (!toElement.children || !toElement.children.length) {\n toElement.children = [];\n toElement.children.concat(child);\n }\n else {\n for (var i = child.length - 1; i >= 0; i--) {\n toElement.children.unshift(child[i]);\n }\n }\n }\n VirtualDOM.prepend = prepend;\n function detach(element) {\n var parent = element.parent;\n if (parent) {\n var index = parent.children.indexOf(element);\n if (index !== -1) {\n parent.children.splice(index);\n }\n }\n return parent;\n }\n VirtualDOM.detach = detach;\n //tslint:disable-next-line\n function vDomSelector(_a) {\n var ele = _a.ele, selector = _a.selector, selectAll = _a.selectAll, immediateParent = _a.immediateParent;\n var iSelector = selector.split(' ');\n var curColl = ele;\n for (var i = 0, length_2 = iSelector.length; i < length_2; i++) {\n var isDescendant = false;\n var parent_2 = curColl;\n var curSelector = iSelector[i];\n var simpleSelector = false;\n var mapper = [];\n if (simpleRegex.test(curSelector)) {\n simpleSelector = true;\n processSelector(curSelector, mapper);\n }\n else if (curSelector.indexOf('>') === -1) {\n var splitSelector = curSelector.match(multipleSplitRegex);\n for (var _i = 0, splitSelector_1 = splitSelector; _i < splitSelector_1.length; _i++) {\n var curMap = splitSelector_1[_i];\n processSelector(curMap, mapper);\n }\n }\n else if (curSelector.indexOf('>') !== -1) {\n isDescendant = true;\n var dSelector = curSelector.split('>');\n //tslint:disable-next-line\n var dParent = ele;\n var descendent = void 0;\n var flag = 0;\n for (var _b = 0, dSelector_1 = dSelector; _b < dSelector_1.length; _b++) {\n var sel = dSelector_1[_b];\n if (!dParent) {\n break;\n }\n if (dParent.length) {\n var descendentChild = [];\n for (var _c = 0, dParent_1 = dParent; _c < dParent_1.length; _c++) {\n var child = dParent_1[_c];\n descendentChild = descendentChild.concat(vDomSelector({\n ele: child, selector: sel,\n selectAll: selectAll, immediateParent: !!flag\n }));\n }\n descendent = descendentChild;\n }\n else {\n descendent = vDomSelector({ ele: dParent, selector: sel, selectAll: selectAll, immediateParent: !!flag });\n }\n flag++;\n dParent = descendent;\n }\n if (descendent) {\n curColl = descendent;\n }\n }\n if (!isDescendant) {\n if (parent_2.length) {\n var iCurSelector = [];\n for (var _d = 0, parent_1 = parent_2; _d < parent_1.length; _d++) {\n var curParent = parent_1[_d];\n iCurSelector = iCurSelector.concat(accessElement(curParent, mapper, selectAll, immediateParent));\n }\n curColl = iCurSelector;\n }\n else {\n curColl = accessElement(parent_2, mapper, selectAll, immediateParent);\n }\n }\n }\n if (selectAll) {\n return curColl;\n }\n else {\n return curColl[0] || null;\n }\n }\n VirtualDOM.vDomSelector = vDomSelector;\n function processSelector(selector, mapper) {\n var match = selector.match(idClassSelector);\n var obj = {};\n if (match) {\n var curMapper = selectMapper[match[0]];\n if (curMapper === 'className') {\n var curObj = mapper.filter(function (obj) { return obj.hasOwnProperty('className'); })[0];\n var canPush = false;\n if (!curObj) {\n canPush = true;\n curObj = {};\n }\n var existValue = curObj[curMapper] || '';\n curObj[curMapper] = existValue + classRegexString.replace('{value}', selector.replace('.', ''));\n if (canPush) {\n mapper.push(curObj);\n }\n }\n else {\n obj[curMapper] = selector.replace(match[0], '');\n mapper.push(obj);\n }\n }\n else {\n mapper.push({ tagName: selector });\n }\n }\n //tslint:disable-next-line\n function accessElement(ele, mapper, selectAll, immediateParent) {\n if (ele.children) {\n //tslint:disable-next-line\n var temp_1 = ele.children.filter(function (child) {\n if (typeof (child) !== 'string') {\n var matched = true;\n for (var _i = 0, mapper_1 = mapper; _i < mapper_1.length; _i++) {\n var map = mapper_1[_i];\n var key = Object.keys(map)[0];\n var expected = map[key];\n var actualValue = getValue(assigner[key], child);\n if (key === 'className') {\n if (!(new RegExp('^' + expected + '.*$').test(actualValue))) {\n matched = false;\n break;\n }\n }\n else if (actualValue !== expected) {\n matched = false;\n break;\n }\n }\n return matched;\n }\n else {\n return false;\n }\n });\n if (!immediateParent && (!temp_1.length || selectAll)) {\n ele.children.forEach(function (child) {\n if (isObject(child)) {\n temp_1 = temp_1.concat(accessElement(child, mapper, selectAll));\n }\n });\n }\n return temp_1;\n }\n else {\n return [];\n }\n }\n VirtualDOM.accessElement = accessElement;\n function ConvertHTMLToJSon(htmlString) {\n var results = [];\n var isText;\n var tagArray = [];\n var backup = htmlString;\n var nodeArray = [];\n while (htmlString) {\n isText = true;\n var lastVal = getLastValue(tagArray);\n if (!lastVal || !contains(cspElement, lastVal)) {\n if (htmlString.indexOf(']*>'), function (all, text) {\n text = text.replace(/|/g, '$1$2');\n iterateText(text);\n return '';\n });\n iterateEndTag('', getLastValue(tagArray));\n }\n backup = htmlString;\n }\n function iterateStartTag(start, tagName, rest) {\n tagName = tagName.toLowerCase();\n if (contains(blockElements, tagName)) {\n while (getLastValue(tagArray) && contains(inlineElement, getLastValue(tagArray))) {\n iterateEndTag('', getLastValue(tagArray));\n }\n }\n if (contains(selfClosingElements, tagName) && getLastValue(tagArray)) {\n iterateEndTag('', tagName);\n }\n var isSelfTag = contains(emptyElements, tagName);\n if (!isSelfTag) {\n tagArray.push(tagName);\n }\n var attrs = {};\n //tslint:disable-next-line\n rest.replace(attributeRegex, function (match, name) {\n var names = [];\n for (var _i = 2; _i < arguments.length; _i++) {\n names[_i - 2] = arguments[_i];\n }\n //tslint:disable-next-line\n var val = names[2] ? names[2] :\n names[3] ? names[3] :\n names[4] ? names[4] :\n contains(fillAttrs, name) ? name : '';\n if (name === 'style') {\n var valArr = val.split(';');\n var vObj = {};\n for (var i = 0, length_3 = valArr.length; i < length_3; i++) {\n var cVal = valArr[i];\n var styleSplit = cVal.split(':');\n vObj[styleSplit[0]] = styleSplit[1];\n }\n val = vObj;\n }\n name = nameMapper[name] || name;\n attrs[name] = val;\n //tslint:disable-next-line\n });\n attrs['data-id'] = getRandomId();\n var tagObject = {\n tagName: tagName,\n attributes: attrs\n };\n if (isSelfTag) {\n var parent_3 = (nodeArray[0] || results);\n if (parent_3.children === undefined) {\n parent_3.children = [];\n }\n tagObject.parent = parent_3;\n parent_3.children.push(tagObject);\n }\n else {\n nodeArray.unshift(tagObject);\n }\n }\n function iterateEndTag(start, tagName) {\n var pos;\n if (!tagName) {\n pos = 0;\n }\n else {\n for (pos = tagArray.length - 1; pos >= 0; pos--) {\n if (tagArray[pos] === tagName) {\n break;\n }\n }\n }\n if (pos >= 0) {\n for (var j = nodeArray.length - 1; j >= pos; j--) {\n //tslint:disable-next-line\n var node = nodeArray.shift();\n if (nodeArray.length === 0) {\n results.push(node);\n }\n else {\n var parent_4 = nodeArray[0];\n if (parent_4.children === undefined) {\n parent_4.children = [];\n }\n node.parent = parent_4;\n parent_4.children.push(node);\n }\n }\n tagArray.length = pos;\n }\n }\n function iterateText(text) {\n if (nodeArray.length === 0) {\n results.push(text);\n }\n else {\n var parent_5 = nodeArray[0];\n if (parent_5.children === undefined) {\n parent_5.children = [];\n }\n parent_5.children.push(text);\n }\n }\n return results;\n }\n VirtualDOM.ConvertHTMLToJSon = ConvertHTMLToJSon;\n //tslint:disable-next-line \n function getLastValue(arr) {\n return arr[arr.length - 1];\n }\n function contains(arr, key) {\n return arr.indexOf(key) !== -1;\n }\n //tslint:disable-next-line\n function cloneNode(ele, deep) {\n if (isObject(ele)) {\n if (deep) {\n return extend({}, {}, ele, true);\n }\n else {\n return { tagName: ele.tagName, attributes: ele.attributes };\n }\n }\n else {\n return ele.cloneNode(deep);\n }\n }\n VirtualDOM.cloneNode = cloneNode;\n function setStyleAttribute(element, attrs) {\n if (element.attributes.style) {\n (element.attributes).style = extend({}, attrs);\n }\n else {\n element.attributes.style = extend(element.attributes.style, attrs);\n }\n }\n VirtualDOM.setStyleAttribute = setStyleAttribute;\n //tslint:enable:no-any\n})(VirtualDOM || (VirtualDOM = {}));\n","/**\n * Functions related to dom operations.\n */\nimport { EventHandler } from './event-handler';\nimport { isNullOrUndefined, getValue, setValue, isObject, extend } from './util';\nimport { VirtualDOM } from './virtual-dom';\nvar SVG_REG = /^svg|^path|^g/;\n/**\n * Function to create Html element.\n * @param tagName - Name of the tag, id and class names.\n * @param properties - Object to set properties in the element.\n * @param properties.id - To set the id to the created element.\n * @param properties.className - To add classes to the element.\n * @param properties.innerHTML - To set the innerHTML to element.\n * @param properties.styles - To set the some custom styles to element.\n * @param properties.attrs - To set the attributes to element.\n * @private\n */\nexport function createElement(tagName, properties) {\n //tslint:disable-next-line\n var element = (SVG_REG.test(tagName) ? document.createElementNS('http://www.w3.org/2000/svg', tagName) : document.createElement(tagName));\n if (typeof (properties) === 'undefined') {\n return element;\n }\n element.innerHTML = (properties.innerHTML ? properties.innerHTML : '');\n if (properties.className !== undefined) {\n element.className = properties.className;\n }\n if (properties.id !== undefined) {\n element.id = properties.id;\n }\n if (properties.styles !== undefined) {\n element.setAttribute('style', properties.styles);\n }\n if (properties.attrs !== undefined) {\n attributes(element, properties.attrs);\n }\n return element;\n}\n/**\n * The function used to add the classes to array of elements\n * @param {Element[]|NodeList} elements - An array of elements that need to add a list of classes\n * @param {string|string[]} classes - String or array of string that need to add an individual element as a class\n * @private\n */\nexport function addClass(elements, classes) {\n var classList = getClassList(classes);\n for (var _i = 0, _a = elements; _i < _a.length; _i++) {\n var ele = _a[_i];\n if (ele && classList) {\n for (var _b = 0, classList_1 = classList; _b < classList_1.length; _b++) {\n var className = classList_1[_b];\n if (isObject(ele)) {\n var curClass = getValue('attributes.className', ele);\n if (isNullOrUndefined(curClass)) {\n setValue('attributes.className', className, ele);\n }\n else if (!new RegExp('\\\\b' + className + '\\\\b', 'i').test(curClass)) {\n setValue('attributes.className', curClass + ' ' + className, ele);\n }\n }\n else {\n if (!ele.classList.contains(className)) {\n ele.classList.add(className);\n }\n }\n }\n }\n }\n return elements;\n}\n/**\n * The function used to add the classes to array of elements\n * @param {Element[]|NodeList} elements - An array of elements that need to remove a list of classes\n * @param {string|string[]} classes - String or array of string that need to add an individual element as a class\n * @private\n */\nexport function removeClass(elements, classes) {\n var classList = getClassList(classes);\n for (var _i = 0, _a = elements; _i < _a.length; _i++) {\n var ele = _a[_i];\n if (ele && classList) {\n var flag = isObject(ele);\n var canRemove = flag ? getValue('attributes.className', ele) : ele.className !== '';\n if (canRemove) {\n for (var _b = 0, classList_2 = classList; _b < classList_2.length; _b++) {\n var className = classList_2[_b];\n if (flag) {\n var classes_1 = getValue('attributes.className', ele);\n var classArr = classes_1.split(' ');\n var index = classArr.indexOf(className);\n if (index !== -1) {\n classArr.splice(index, 1);\n }\n setValue('attributes.className', classArr.join(' '), ele);\n }\n else {\n ele.classList.remove(className);\n }\n }\n }\n }\n }\n return elements;\n}\nfunction getClassList(classes) {\n var classList = [];\n if (typeof classes === 'string') {\n classList.push(classes);\n }\n else {\n classList = classes;\n }\n return classList;\n}\n/**\n * The function used to check element is visible or not.\n * @param {Element|Node} element - An element the need to check visibility\n * @private\n */\nexport function isVisible(element) {\n var ele = element;\n return (ele.style.visibility === '' && ele.offsetWidth > 0);\n}\n/**\n * The function used to insert an array of elements into a first of the element.\n * @param {Element[]|NodeList} fromElements - An array of elements that need to prepend.\n * @param {Element} toElement - An element that is going to prepend.\n * @private\n */\nexport function prepend(fromElements, toElement, isEval) {\n //tslint:disable:no-any\n if (isObject(toElement)) {\n VirtualDOM.prepend(fromElements, toElement);\n }\n else {\n var docFrag = document.createDocumentFragment();\n for (var _i = 0, _a = fromElements; _i < _a.length; _i++) {\n var ele = _a[_i];\n docFrag.appendChild(ele);\n }\n toElement.insertBefore(docFrag, toElement.firstElementChild);\n if (isEval) {\n executeScript(toElement);\n }\n }\n return fromElements;\n}\n/**\n * The function used to insert an array of elements into last of the element.\n * @param {Element[]|NodeList} fromElements - An array of elements that need to append.\n * @param {Element} toElement - An element that is going to prepend.\n * @private\n */\nexport function append(fromElements, toElement, isEval) {\n if (isObject(toElement)) {\n VirtualDOM.append(fromElements, toElement);\n }\n else {\n var docFrag = document.createDocumentFragment();\n for (var _i = 0, _a = fromElements; _i < _a.length; _i++) {\n var ele = _a[_i];\n docFrag.appendChild(ele);\n }\n toElement.appendChild(docFrag);\n if (isEval) {\n executeScript(toElement);\n }\n }\n return fromElements;\n}\n/**\n * The function is used to evaluate script from Ajax request\n * @param ele - An element is going to evaluate the script\n */\nfunction executeScript(ele) {\n var eleArray = ele.querySelectorAll('script');\n eleArray.forEach(function (element) {\n var script = document.createElement('script');\n script.text = element.innerHTML;\n document.head.appendChild(script);\n detach(script);\n });\n}\n/**\n * The function used to remove the element from the\n * @param {Element|Node|HTMLElement} element - An element that is going to detach from the Dom\n * @private\n */\nexport function detach(element) {\n if (isObject(element)) {\n return VirtualDOM.detach(element);\n }\n else {\n var parentNode = element.parentNode;\n if (parentNode) {\n return parentNode.removeChild(element);\n }\n }\n}\n//tslint: enable:no-any\n/**\n * The function used to remove the element from Dom also clear the bounded events\n * @param {Element|Node|HTMLElement} element - An element remove from the Dom\n * @private\n */\nexport function remove(element) {\n if (isObject(element)) {\n VirtualDOM.detach(element);\n }\n else {\n var parentNode = element.parentNode;\n EventHandler.clearEvents(element);\n parentNode.removeChild(element);\n }\n}\n/**\n * The function helps to set multiple attributes to an element\n * @param {Element|Node} element - An element that need to set attributes.\n * @param {{[key:string]:string}} attributes - JSON Object that is going to as attributes.\n * @private\n */\nexport function attributes(element, attributes) {\n var keys = Object.keys(attributes);\n var ele = element;\n if (ele) {\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n if (isObject(ele)) {\n var iKey = key;\n if (key === 'tabindex') {\n iKey = 'tabIndex';\n }\n ele.attributes[iKey] = attributes[key];\n }\n else {\n ele.setAttribute(key, attributes[key]);\n }\n }\n }\n return ele;\n}\n/**\n * The function selects the element from giving context.\n * @param {string} selector - Selector string need fetch element from the\n * @param {Document|Element=document} context - It is an optional type, That specifies a Dom context.\n * @private\n */\n//tslint:disable-next-line\nexport function select(selector, context, needsVDOM) {\n if (context === void 0) { context = document; }\n if (isObject(context) && needsVDOM) {\n //tslint:disable-next-line\n return VirtualDOM.vDomSelector({ ele: context, selector: selector, selectAll: false });\n }\n else {\n selector = querySelectId(selector);\n return context.querySelector(selector);\n }\n}\n/**\n * The function selects an array of element from the given context.\n * @param {string} selector - Selector string need fetch element from the\n * @param {Document|Element=document} context - It is an optional type, That specifies a Dom context.\n * @private\n */\nexport function selectAll(selector, context, needsVDOM) {\n if (context === void 0) { context = document; }\n if (isObject(context) && !needsVDOM) {\n //tslint:disable-next-line\n return VirtualDOM.vDomSelector({ ele: context, selector: selector, selectAll: true });\n }\n else {\n selector = querySelectId(selector);\n var nodeList = context.querySelectorAll(selector);\n return nodeList;\n }\n}\nfunction querySelectId(selector) {\n var charRegex = /(!|\"|\\$|%|&|'|\\(|\\)|\\*|\\/|:|;|<|=|\\?|@|\\]|\\^|`|{|}|\\||\\+|~)/g;\n if (selector.match(/#[0-9]/g) || selector.match(charRegex)) {\n var idList = selector.split(',');\n for (var i = 0; i < idList.length; i++) {\n var list = idList[i].split(' ');\n for (var j = 0; j < list.length; j++) {\n if (list[j].indexOf('#') > -1) {\n if (!list[j].match(/\\[.*\\]/)) {\n var splitId = list[j].split('#');\n if (splitId[1].match(/^\\d/) || splitId[1].match(charRegex)) {\n var setId = list[j].split('.');\n setId[0] = setId[0].replace(/#/, '[id=\\'') + '\\']';\n list[j] = setId.join('.');\n }\n }\n }\n }\n idList[i] = list.join(' ');\n }\n return idList.join(',');\n }\n return selector;\n}\n/**\n * Returns single closest parent element based on class selector.\n * @param {Element} element - An element that need to find the closest element.\n * @param {string} selector - A classSelector of closest element.\n * @private\n */\nexport function closest(element, selector) {\n var el = element;\n if (typeof el.closest === 'function') {\n return el.closest(selector);\n }\n while (el && el.nodeType === 1) {\n if (matches(el, selector)) {\n return el;\n }\n el = el.parentNode;\n }\n return null;\n}\n/**\n * Returns all sibling elements of the given element.\n * @param {Element|Node} element - An element that need to get siblings.\n * @private\n */\nexport function siblings(element) {\n var siblings = [];\n var childNodes = Array.prototype.slice.call(element.parentNode.childNodes);\n for (var _i = 0, childNodes_1 = childNodes; _i < childNodes_1.length; _i++) {\n var curNode = childNodes_1[_i];\n if (curNode.nodeType === Node.ELEMENT_NODE && element !== curNode) {\n siblings.push(curNode);\n }\n }\n return siblings;\n}\n/**\n * set the value if not exist. Otherwise set the existing value\n * @param {HTMLElement} element - An element to which we need to set value.\n * @param {string} property - Property need to get or set.\n * @param {string} value - value need to set.\n * @private\n */\nexport function getAttributeOrDefault(element, property, value) {\n var attrVal;\n var isObj = isObject(element);\n if (isObj) {\n attrVal = getValue('attributes.' + property, element);\n }\n else {\n attrVal = element.getAttribute(property);\n }\n if (isNullOrUndefined(attrVal) && value) {\n if (!isObj) {\n element.setAttribute(property, value.toString());\n }\n else {\n element.attributes[property] = value;\n }\n attrVal = value;\n }\n return attrVal;\n}\n/**\n * Set the style attributes to Html element.\n * @param {HTMLElement} element - Element which we want to set attributes\n * @param {any} attrs - Set the given attributes to element\n * @return {void}\n * @private\n */\nexport function setStyleAttribute(element, attrs) {\n if (attrs !== undefined) {\n if (isObject(element)) {\n // tslint:disable-next-line:no-any\n VirtualDOM.setStyleAttribute(element, attrs);\n }\n else {\n Object.keys(attrs).forEach(function (key) {\n // tslint:disable-next-line:no-any\n element.style[key] = attrs[key];\n });\n }\n }\n}\n/**\n * Method for add and remove classes to a dom element.\n * @param {Element} element - Element for add and remove classes\n * @param {string[]} addClasses - List of classes need to be add to the element\n * @param {string[]} removeClasses - List of classes need to be remove from the element\n * @return {void}\n * @private\n */\nexport function classList(element, addClasses, removeClasses) {\n addClass([element], addClasses);\n removeClass([element], removeClasses);\n}\n/**\n * Method to check whether the element matches the given selector.\n * @param {Element} element - Element to compare with the selector.\n * @param {string} selector - String selector which element will satisfy.\n * @return {void}\n * @private\n */\nexport function matches(element, selector) {\n //tslint:disable-next-line\n var matches = element.matches || element.msMatchesSelector || element.webkitMatchesSelector;\n if (matches) {\n return matches.call(element, selector);\n }\n else {\n return [].indexOf.call(document.querySelectorAll(selector), element) !== -1;\n }\n}\nexport function includeInnerHTML(ele, innerHTML) {\n if (isObject(ele)) {\n if (innerHTML === '') {\n ele.children = [];\n }\n else {\n var res = VirtualDOM.ConvertHTMLToJSon(innerHTML);\n if (res.length) {\n VirtualDOM.assignParent(res, ele);\n ele.children = res;\n }\n }\n }\n else {\n ele.innerHTML = innerHTML;\n }\n}\n//tslint:disable-next-line\nexport function containsClass(ele, className) {\n if (isObject(ele)) {\n // tslint:disable-next-line:no-any\n return new RegExp('\\\\b' + className + '\\\\b', 'i').test(ele.attributes.className);\n }\n else {\n return ele.classList.contains(className);\n }\n}\n/**\n * Method to check whether the element matches the given selector.\n * @param {} element - Element to compare with the selector.\n * @param {string} selector - String selector which element will satisfy.\n * @return {Element | VirtualObject}\n * @private\n */\n//tslint:disable:no-any\nexport function cloneNode(element, deep) {\n if (isObject(element)) {\n if (deep) {\n return extend({}, {}, element, true);\n }\n else {\n return { tagName: element.tagName, attributes: element.attributes };\n }\n }\n else {\n return element.cloneNode(deep);\n }\n}\n","import { isUndefined, isNullOrUndefined, merge, setImmediate, setValue, isBlazor, getValue, extend } from './util';\nimport { addClass, removeClass } from './dom';\nimport { Observer } from './observer';\nvar isColEName = new RegExp('\\]');\n/* tslint:enable:no-any */\n/**\n * Base library module is common module for Framework modules like touch,keyboard and etc.,\n * @private\n */\nvar Base = /** @class */ (function () {\n /**\n * Base constructor accept options and element\n */\n function Base(options, element) {\n this.isRendered = false;\n this.isComplexArraySetter = false;\n this.isServerRendered = false;\n this.allowServerDataBinding = true;\n this.isProtectedOnChange = true;\n this.properties = {};\n this.changedProperties = {};\n this.oldProperties = {};\n this.bulkChanges = {};\n this.refreshing = false;\n this.ignoreCollectionWatch = false;\n // tslint:disable-next-line:no-empty\n this.finalUpdate = function () { };\n this.childChangedProperties = {};\n this.modelObserver = new Observer(this);\n if (!isUndefined(element)) {\n if ('string' === typeof (element)) {\n this.element = document.querySelector(element);\n }\n else {\n this.element = element;\n }\n if (!isNullOrUndefined(this.element)) {\n this.isProtectedOnChange = false;\n this.addInstance();\n }\n }\n if (!isUndefined(options)) {\n this.setProperties(options, true);\n }\n this.isDestroyed = false;\n }\n /** Property base section */\n /**\n * Function used to set bunch of property at a time.\n * @private\n * @param {Object} prop - JSON object which holds components properties.\n * @param {boolean} muteOnChange? - Specifies to true when we set properties.\n */\n Base.prototype.setProperties = function (prop, muteOnChange) {\n var prevDetection = this.isProtectedOnChange;\n this.isProtectedOnChange = !!muteOnChange;\n merge(this, prop);\n if (muteOnChange !== true) {\n merge(this.changedProperties, prop);\n this.dataBind();\n }\n else if (isBlazor() && this.isRendered) {\n this.serverDataBind(prop);\n }\n this.finalUpdate();\n this.changedProperties = {};\n this.oldProperties = {};\n this.isProtectedOnChange = prevDetection;\n };\n ;\n /**\n * Calls for child element data bind\n * @param {Object} obj\n * @param {Object} parent\n * @returns {void}\n */\n // tslint:disable-next-line:no-any\n Base.callChildDataBind = function (obj, parent) {\n var keys = Object.keys(obj);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n if (parent[key] instanceof Array) {\n for (var _a = 0, _b = parent[key]; _a < _b.length; _a++) {\n var obj_1 = _b[_a];\n if (obj_1.dataBind !== undefined) {\n obj_1.dataBind();\n }\n }\n }\n else {\n parent[key].dataBind();\n }\n }\n };\n Base.prototype.clearChanges = function () {\n this.finalUpdate();\n this.changedProperties = {};\n this.oldProperties = {};\n this.childChangedProperties = {};\n };\n /**\n * Bind property changes immediately to components\n */\n Base.prototype.dataBind = function () {\n Base.callChildDataBind(this.childChangedProperties, this);\n if (Object.getOwnPropertyNames(this.changedProperties).length) {\n var prevDetection = this.isProtectedOnChange;\n var newChanges = this.changedProperties;\n var oldChanges = this.oldProperties;\n this.clearChanges();\n this.isProtectedOnChange = true;\n this.onPropertyChanged(newChanges, oldChanges);\n this.isProtectedOnChange = prevDetection;\n }\n };\n ;\n /* tslint:disable:no-any */\n Base.prototype.serverDataBind = function (newChanges) {\n if (!isBlazor()) {\n return;\n }\n newChanges = newChanges ? newChanges : {};\n extend(this.bulkChanges, {}, newChanges, true);\n var sfBlazor = 'sfBlazor';\n if (this.allowServerDataBinding && window[sfBlazor].updateModel) {\n window[sfBlazor].updateModel(this);\n this.bulkChanges = {};\n }\n };\n /* tslint:enable:no-any */\n Base.prototype.saveChanges = function (key, newValue, oldValue) {\n if (isBlazor()) {\n // tslint:disable-next-line:no-any\n var newChanges = {};\n newChanges[key] = newValue;\n this.serverDataBind(newChanges);\n }\n if (this.isProtectedOnChange) {\n return;\n }\n this.oldProperties[key] = oldValue;\n this.changedProperties[key] = newValue;\n this.finalUpdate();\n this.finalUpdate = setImmediate(this.dataBind.bind(this));\n };\n ;\n /** Event Base Section */\n /**\n * Adds the handler to the given event listener.\n * @param {string} eventName - A String that specifies the name of the event\n * @param {Function} listener - Specifies the call to run when the event occurs.\n * @return {void}\n */\n Base.prototype.addEventListener = function (eventName, handler) {\n this.modelObserver.on(eventName, handler);\n };\n /**\n * Removes the handler from the given event listener.\n * @param {string} eventName - A String that specifies the name of the event to remove\n * @param {Function} listener - Specifies the function to remove\n * @return {void}\n */\n Base.prototype.removeEventListener = function (eventName, handler) {\n this.modelObserver.off(eventName, handler);\n };\n /**\n * Triggers the handlers in the specified event.\n * @private\n * @param {string} eventName - Specifies the event to trigger for the specified component properties.\n * Can be a custom event, or any of the standard events.\n * @param {Event} eventProp - Additional parameters to pass on to the event properties\n * @param {Function} successHandler - this function will invoke after event successfully triggered\n * @param {Function} errorHandler - this function will invoke after event if it failured to call.\n * @return {void}\n */\n Base.prototype.trigger = function (eventName, eventProp, successHandler, errorHandler) {\n var _this = this;\n if (this.isDestroyed !== true) {\n var prevDetection = this.isProtectedOnChange;\n this.isProtectedOnChange = false;\n var data = this.modelObserver.notify(eventName, eventProp, successHandler, errorHandler);\n if (isColEName.test(eventName)) {\n var handler = getValue(eventName, this);\n if (handler) {\n var blazor = 'Blazor';\n if (window[blazor]) {\n var promise = handler.call(this, eventProp);\n if (promise && typeof promise.then === 'function') {\n if (!successHandler) {\n data = promise;\n }\n else {\n promise.then(function (data) {\n if (successHandler) {\n data = typeof data === 'string' && _this.modelObserver.isJson(data) ?\n JSON.parse(data) : data;\n successHandler.call(_this, data);\n }\n }).catch(function (data) {\n if (errorHandler) {\n data = typeof data === 'string' && _this.modelObserver.isJson(data) ? JSON.parse(data) : data;\n errorHandler.call(_this, data);\n }\n });\n }\n }\n else if (successHandler) {\n successHandler.call(this, eventProp);\n }\n }\n else {\n handler.call(this, eventProp);\n if (successHandler) {\n successHandler.call(this, eventProp);\n }\n }\n }\n else if (successHandler) {\n successHandler.call(this, eventProp);\n }\n }\n this.isProtectedOnChange = prevDetection;\n return data;\n }\n };\n /**\n * To maintain instance in base class\n */\n Base.prototype.addInstance = function () {\n // Add module class to the root element\n var moduleClass = 'e-' + this.getModuleName().toLowerCase();\n addClass([this.element], ['e-lib', moduleClass]);\n if (!isNullOrUndefined(this.element.ej2_instances)) {\n this.element.ej2_instances.push(this);\n }\n else {\n setValue('ej2_instances', [this], this.element);\n }\n };\n /**\n * To remove the instance from the element\n */\n Base.prototype.destroy = function () {\n var _this = this;\n this.element.ej2_instances =\n this.element.ej2_instances.filter(function (i) { return i !== _this; });\n removeClass([this.element], ['e-' + this.getModuleName()]);\n if (this.element.ej2_instances.length === 0) {\n // Remove module class from the root element\n removeClass([this.element], ['e-lib']);\n }\n this.clearChanges();\n this.modelObserver.destroy();\n this.isDestroyed = true;\n };\n return Base;\n}());\nexport { Base };\n/**\n * Global function to get the component instance from the rendered element.\n * @param elem Specifies the HTMLElement or element id string.\n * @param comp Specifies the component module name or Component.\n */\n// tslint:disable-next-line:no-any\nexport function getComponent(elem, comp) {\n var instance;\n var i;\n var ele = typeof elem === 'string' ? document.getElementById(elem) : elem;\n for (i = 0; i < ele.ej2_instances.length; i++) {\n instance = ele.ej2_instances[i];\n if (typeof comp === 'string') {\n var compName = instance.getModuleName();\n if (comp === compName) {\n return instance;\n }\n }\n else {\n // tslint:disable-next-line:no-any\n if (instance instanceof comp) {\n return instance;\n }\n }\n }\n return undefined;\n}\n/**\n * Function to remove the child instances.\n * @return {void}\n * @private\n */\n// tslint:disable-next-line:no-any\nexport function removeChildInstance(element) {\n // tslint:disable-next-line:no-any\n var childEle = [].slice.call(element.getElementsByClassName('e-control'));\n for (var i = 0; i < childEle.length; i++) {\n var compName = childEle[i].classList[1].split('e-')[1];\n // tslint:disable-next-line:no-any\n var compInstance = getComponent(childEle[i], compName);\n if (!isUndefined(compInstance)) {\n compInstance.destroy();\n }\n }\n}\n","import { createInstance, isUndefined, merge, extend, getValue } from './util';\n/**\n * Returns the Class Object\n * @param {ClassObject} instance - instance of ClassObject\n * @param {string} curKey - key of the current instance\n * @param {Object} defaultValue - default Value\n * @param {Object[]} type\n */\nfunction getObject(instance, curKey, defaultValue, type) {\n if (!instance.properties.hasOwnProperty(curKey) || !(instance.properties[curKey] instanceof type)) {\n instance.properties[curKey] = createInstance(type, [instance, curKey, defaultValue]);\n }\n return instance.properties[curKey];\n}\n/**\n * Returns object array\n * @param {ClassObject} instance\n * @param {string} curKey\n * @param {Object[]} defaultValue\n * @param type\n * @param {boolean} isSetter\n * @returns {Object[]}\n */\nfunction getObjectArray(instance, curKey, defaultValue, type, isSetter, isFactory) {\n var result = [];\n var len = defaultValue ? defaultValue.length : 0;\n for (var i = 0; i < len; i++) {\n var curType = type;\n if (isFactory) {\n curType = type(defaultValue[i], instance);\n }\n if (isSetter) {\n var inst = createInstance(curType, [instance, curKey, {}, true]);\n inst.setProperties(defaultValue[i], true);\n result.push(inst);\n }\n else {\n result.push(createInstance(curType, [instance, curKey, defaultValue[i], false]));\n }\n }\n return result;\n}\n/**\n * Returns the properties of the object\n * @param {Object} defaultValue\n * @param {string} curKey\n */\nfunction propertyGetter(defaultValue, curKey) {\n return function () {\n if (!this.properties.hasOwnProperty(curKey)) {\n this.properties[curKey] = defaultValue;\n }\n return this.properties[curKey];\n };\n}\n/**\n * Set the properties for the object\n * @param {Object} defaultValue\n * @param {string} curKey\n */\nfunction propertySetter(defaultValue, curKey) {\n return function (newValue) {\n if (this.properties[curKey] !== newValue) {\n var oldVal = this.properties.hasOwnProperty(curKey) ? this.properties[curKey] : defaultValue;\n this.saveChanges(curKey, newValue, oldVal);\n this.properties[curKey] = newValue;\n }\n };\n}\n/**\n * Returns complex objects\n */\nfunction complexGetter(defaultValue, curKey, type) {\n return function () {\n return getObject(this, curKey, defaultValue, type);\n };\n}\n/**\n * Sets complex objects\n */\nfunction complexSetter(defaultValue, curKey, type) {\n return function (newValue) {\n getObject(this, curKey, defaultValue, type).setProperties(newValue);\n };\n}\nfunction complexFactoryGetter(defaultValue, curKey, type) {\n return function () {\n var curType = type({});\n if (this.properties.hasOwnProperty(curKey)) {\n return this.properties[curKey];\n }\n else {\n return getObject(this, curKey, defaultValue, curType);\n }\n };\n}\nfunction complexFactorySetter(defaultValue, curKey, type) {\n return function (newValue) {\n var curType = type(newValue, this);\n getObject(this, curKey, defaultValue, curType).setProperties(newValue);\n };\n}\nfunction complexArrayGetter(defaultValue, curKey, type) {\n return function () {\n var _this = this;\n if (!this.properties.hasOwnProperty(curKey)) {\n var defCollection = getObjectArray(this, curKey, defaultValue, type, false);\n this.properties[curKey] = defCollection;\n }\n var ignore = ((this.controlParent !== undefined && this.controlParent.ignoreCollectionWatch)\n || this.ignoreCollectionWatch);\n if (!this.properties[curKey].hasOwnProperty('push') && !ignore) {\n ['push', 'pop'].forEach(function (extendFunc) {\n var descriptor = {\n value: complexArrayDefinedCallback(extendFunc, curKey, type, _this.properties[curKey]).bind(_this),\n configurable: true\n };\n Object.defineProperty(_this.properties[curKey], extendFunc, descriptor);\n });\n }\n if (!this.properties[curKey].hasOwnProperty('isComplexArray')) {\n Object.defineProperty(this.properties[curKey], 'isComplexArray', { value: true });\n }\n return this.properties[curKey];\n };\n}\nfunction complexArraySetter(defaultValue, curKey, type) {\n return function (newValue) {\n this.isComplexArraySetter = true;\n var oldValueCollection = getObjectArray(this, curKey, defaultValue, type, false);\n var newValCollection = getObjectArray(this, curKey, newValue, type, true);\n this.isComplexArraySetter = false;\n this.saveChanges(curKey, newValCollection, oldValueCollection);\n this.properties[curKey] = newValCollection;\n };\n}\nfunction complexArrayFactorySetter(defaultValue, curKey, type) {\n return function (newValue) {\n var oldValueCollection = this.properties.hasOwnProperty(curKey) ? this.properties[curKey] : defaultValue;\n var newValCollection = getObjectArray(this, curKey, newValue, type, true, true);\n this.saveChanges(curKey, newValCollection, oldValueCollection);\n this.properties[curKey] = newValCollection;\n };\n}\nfunction complexArrayFactoryGetter(defaultValue, curKey, type) {\n return function () {\n var curType = type({});\n if (!this.properties.hasOwnProperty(curKey)) {\n var defCollection = getObjectArray(this, curKey, defaultValue, curType, false);\n this.properties[curKey] = defCollection;\n }\n return this.properties[curKey];\n };\n}\nfunction complexArrayDefinedCallback(dFunc, curKey, type, prop) {\n /* tslint:disable no-function-expression */\n return function () {\n var newValue = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n newValue[_i] = arguments[_i];\n }\n var keyString = this.propName ? this.getParentKey() + '.' + curKey + '-' : curKey + '-';\n switch (dFunc) {\n case 'push':\n for (var i = 0; i < newValue.length; i++) {\n Array.prototype[dFunc].apply(prop, [newValue[i]]);\n var model_1 = getArrayModel(keyString + (prop.length - 1), newValue[i], !this.controlParent, dFunc);\n this.serverDataBind(model_1, newValue[i], false, dFunc);\n }\n break;\n case 'pop':\n Array.prototype[dFunc].apply(prop);\n var model = getArrayModel(keyString + prop.length, null, !this.controlParent, dFunc);\n this.serverDataBind(model, { ejsAction: 'pop' }, false, dFunc);\n break;\n }\n return prop;\n };\n /* tslint:enable no-function-expression */\n}\nfunction getArrayModel(keyString, value, isControlParent, arrayFunction) {\n var modelObject = keyString;\n if (isControlParent) {\n modelObject = {};\n modelObject[keyString] = value;\n if (value && typeof value === 'object') {\n var action = 'ejsAction';\n modelObject[keyString][action] = arrayFunction;\n }\n }\n return modelObject;\n}\n/**\n * Method used to create property. General syntax below.\n * @param {T} defaultValue? - Specifies the default value of property.\n * ```\n * @Property('TypeScript')\n * propertyName: Type;\n * ```\n * @private\n */\nexport function Property(defaultValue) {\n return function (target, key) {\n var propertyDescriptor = {\n set: propertySetter(defaultValue, key),\n get: propertyGetter(defaultValue, key),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'prop', defaultValue);\n };\n}\n/**\n * Method used to create complex property. General syntax below.\n * @param {T} defaultValue - Specifies the default value of property.\n * @param {Function} type - Specifies the class type of complex object.\n * ```\n * @Complex({},Type)\n * propertyName: Type;\n * ```\n * @private\n */\nexport function Complex(defaultValue, type) {\n return function (target, key) {\n var propertyDescriptor = {\n set: complexSetter(defaultValue, key, type),\n get: complexGetter(defaultValue, key, type),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'complexProp', defaultValue, type);\n };\n}\n/**\n * Method used to create complex Factory property. General syntax below.\n * @param {Function} defaultType - Specifies the default value of property.\n * @param {Function} type - Specifies the class factory type of complex object.\n * ```\n * @ComplexFactory(defaultType, factoryFunction)\n * propertyName: Type1 | Type2;\n * ```\n * @private\n */\nexport function ComplexFactory(type) {\n return function (target, key) {\n var propertyDescriptor = {\n set: complexFactorySetter({}, key, type),\n get: complexFactoryGetter({}, key, type),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'complexProp', {}, type);\n };\n}\n/**\n * Method used to create complex array property. General syntax below.\n * @param {T[]} defaultValue - Specifies the default value of property.\n * @param {Function} type - Specifies the class type of complex object.\n * ```\n * @Collection([], Type);\n * propertyName: Type;\n * ```\n * @private\n */\nexport function Collection(defaultValue, type) {\n return function (target, key) {\n var propertyDescriptor = {\n set: complexArraySetter(defaultValue, key, type),\n get: complexArrayGetter(defaultValue, key, type),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'colProp', defaultValue, type);\n };\n}\n/**\n * Method used to create complex factory array property. General syntax below.\n * @param {T[]} defaultType - Specifies the default type of property.\n * @param {Function} type - Specifies the class type of complex object.\n * ```\n * @Collection([], Type);\n * propertyName: Type;\n * ```\n * @private\n */\nexport function CollectionFactory(type) {\n return function (target, key) {\n var propertyDescriptor = {\n set: complexArrayFactorySetter([], key, type),\n get: complexArrayFactoryGetter([], key, type),\n enumerable: true,\n configurable: true\n };\n //new property creation\n Object.defineProperty(target, key, propertyDescriptor);\n addPropertyCollection(target, key, 'colProp', {}, type);\n };\n}\n/**\n * Method used to create event property. General syntax below.\n * @param {Function} defaultValue? - Specifies the default value of property.\n * @param {boolean} isComplex? - Specifies the whether it is complex object.\n * ```\n * @Event(()=>{return true;})\n * ```\n * @private\n */\nexport function Event() {\n return function (target, key) {\n var eventDescriptor = {\n set: function (newValue) {\n var oldValue = this.properties[key];\n if (oldValue !== newValue) {\n var finalContext = getParentContext(this, key);\n if (isUndefined(oldValue) === false) {\n finalContext.context.removeEventListener(finalContext.prefix, oldValue);\n }\n finalContext.context.addEventListener(finalContext.prefix, newValue);\n this.properties[key] = newValue;\n }\n },\n get: propertyGetter(undefined, key),\n enumerable: true,\n configurable: true\n };\n Object.defineProperty(target, key, eventDescriptor);\n addPropertyCollection(target, key, 'event');\n };\n}\n/**\n * NotifyPropertyChanges is triggers the call back when the property has been changed.\n *\n * ```\n * @NotifyPropertyChanges\n * class DemoClass implements INotifyPropertyChanged {\n *\n * @Property()\n * property1: string;\n *\n * dataBind: () => void;\n *\n * constructor() { }\n *\n * onPropertyChanged(newProp: any, oldProp: any) {\n * // Called when property changed\n * }\n * }\n * ```\n * @private\n */\nexport function NotifyPropertyChanges(classConstructor) {\n /** Need to code */\n}\n/**\n * Method used to create the builderObject for the target component.\n * @private\n */\nfunction addPropertyCollection(target, key, propertyType, defaultValue, type) {\n if (isUndefined(target.propList)) {\n target.propList = {\n props: [],\n complexProps: [],\n colProps: [],\n events: [],\n propNames: [],\n complexPropNames: [],\n colPropNames: [],\n eventNames: []\n };\n }\n /* tslint:disable no-any */\n target.propList[propertyType + 's'].push({\n propertyName: key,\n defaultValue: defaultValue,\n type: type\n });\n target.propList[propertyType + 'Names'].push(key);\n /* tslint:enable no-any */\n}\n/**\n * Returns an object containing the builder properties\n * @param {Function} component\n * @private\n */\nfunction getBuilderProperties(component) {\n if (isUndefined(component.prototype.builderObject)) {\n component.prototype.builderObject = {\n properties: {}, propCollections: [], add: function () {\n this.isPropertyArray = true;\n this.propCollections.push(extend({}, this.properties, {}));\n }\n };\n var rex = /complex/;\n for (var _i = 0, _a = Object.keys(component.prototype.propList); _i < _a.length; _i++) {\n var key = _a[_i];\n var _loop_1 = function (prop) {\n if (rex.test(key)) {\n component.prototype.builderObject[prop.propertyName] = function (value) {\n var childType = {};\n merge(childType, getBuilderProperties(prop.type));\n value(childType);\n var tempValue;\n if (!childType.isPropertyArray) {\n tempValue = extend({}, childType.properties, {});\n }\n else {\n tempValue = childType.propCollections;\n }\n this.properties[prop.propertyName] = tempValue;\n childType.properties = {};\n childType.propCollections = [];\n childType.isPropertyArray = false;\n return this;\n };\n }\n else {\n component.prototype.builderObject[prop.propertyName] = function (value) {\n this.properties[prop.propertyName] = value;\n return this;\n };\n }\n };\n for (var _b = 0, _c = component.prototype.propList[key]; _b < _c.length; _b++) {\n var prop = _c[_b];\n _loop_1(prop);\n }\n }\n }\n return component.prototype.builderObject;\n}\n/**\n * Method used to create builder for the components\n * @param {any} component -specifies the target component for which builder to be created.\n * @private\n */\nexport function CreateBuilder(component) {\n var builderFunction = function (element) {\n this.element = element;\n return this;\n };\n var instanceFunction = function (element) {\n if (!builderFunction.prototype.hasOwnProperty('create')) {\n builderFunction.prototype = getBuilderProperties(component);\n builderFunction.prototype.create = function () {\n var temp = extend({}, {}, this.properties);\n this.properties = {};\n return new component(temp, this.element);\n };\n }\n return new builderFunction(element);\n };\n return instanceFunction;\n}\n/**\n * Returns parent options for the object\n * @param {Object} context\n * @param {string} prefix\n * @private\n */\nfunction getParentContext(context, prefix) {\n if (context.hasOwnProperty('parentObj') === false) {\n return { context: context, prefix: prefix };\n }\n else {\n var curText = getValue('propName', context);\n if (curText) {\n prefix = curText + '-' + prefix;\n }\n return getParentContext(getValue('parentObj', context), prefix);\n }\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { createElement, selectAll, closest } from './dom';\nimport { Base } from './base';\nimport { Browser } from './browser';\nimport { EventHandler } from './event-handler';\nimport { Property, NotifyPropertyChanges, Event } from './notify-property-change';\n/**\n * The Animation framework provide options to animate the html DOM elements\n * ```typescript\n * let animeObject = new Animation({\n * name: 'SlideLeftIn',\n * duration: 1000\n * });\n * animeObject.animate('#anime1');\n * animeObject.animate('#anime2', { duration: 500 });\n * ```\n */\nvar Animation = /** @class */ (function (_super) {\n __extends(Animation, _super);\n function Animation(options) {\n var _this = _super.call(this, options, undefined) || this;\n /**\n * @private\n */\n _this.easing = {\n ease: 'cubic-bezier(0.250, 0.100, 0.250, 1.000)',\n linear: 'cubic-bezier(0.250, 0.250, 0.750, 0.750)',\n easeIn: 'cubic-bezier(0.420, 0.000, 1.000, 1.000)',\n easeOut: 'cubic-bezier(0.000, 0.000, 0.580, 1.000)',\n easeInOut: 'cubic-bezier(0.420, 0.000, 0.580, 1.000)',\n elasticInOut: 'cubic-bezier(0.5,-0.58,0.38,1.81)',\n elasticIn: 'cubic-bezier(0.17,0.67,0.59,1.81)',\n elasticOut: 'cubic-bezier(0.7,-0.75,0.99,1.01)'\n };\n return _this;\n }\n Animation_1 = Animation;\n /**\n * Applies animation to the current element.\n * @param {string | HTMLElement} element - Element which needs to be animated.\n * @param {AnimationModel} options - Overriding default animation settings.\n * @return {void}\n */\n Animation.prototype.animate = function (element, options) {\n options = !options ? {} : options;\n var model = this.getModel(options);\n if (typeof element === 'string') {\n var elements = Array.prototype.slice.call(selectAll(element, document));\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var element_1 = elements_1[_i];\n model.element = element_1;\n Animation_1.delayAnimation(model);\n }\n }\n else {\n model.element = element;\n Animation_1.delayAnimation(model);\n }\n };\n /**\n * Stop the animation effect on animated element.\n * @param {HTMLElement} element - Element which needs to be stop the animation.\n * @param {AnimationOptions} model - Handling the animation model at stop function.\n * @return {void}\n */\n Animation.stop = function (element, model) {\n element.style.animation = '';\n element.removeAttribute('e-animate');\n var animationId = element.getAttribute('e-animation-id');\n if (animationId) {\n var frameId = parseInt(animationId, 10);\n cancelAnimationFrame(frameId);\n element.removeAttribute('e-animation-id');\n }\n if (model && model.end) {\n model.end.call(this, model);\n }\n };\n /**\n * Set delay to animation element\n * @param {AnimationModel} model\n * @returns {void}\n */\n Animation.delayAnimation = function (model) {\n if (model.delay) {\n setTimeout(function () { Animation_1.applyAnimation(model); }, model.delay);\n }\n else {\n Animation_1.applyAnimation(model);\n }\n };\n /**\n * Triggers animation\n * @param {AnimationModel} model\n * @returns {void}\n */\n Animation.applyAnimation = function (model) {\n var _this = this;\n model.timeStamp = 0;\n var step = 0;\n var timerId = 0;\n var startTime = 0;\n var prevTimeStamp = 0;\n var duration = model.duration;\n model.element.setAttribute('e-animate', 'true');\n var startAnimation = function (timeStamp) {\n try {\n if (timeStamp) {\n // let step: number = model.timeStamp = timeStamp - startTime;\n /** phantomjs workaround for timestamp fix */\n prevTimeStamp = prevTimeStamp === 0 ? timeStamp : prevTimeStamp;\n model.timeStamp = (timeStamp + model.timeStamp) - prevTimeStamp;\n prevTimeStamp = timeStamp;\n /** phantomjs workaround end */\n // trigger animation begin event\n if (!step && model.begin) {\n model.begin.call(_this, model);\n }\n step = step + 1;\n var avg = model.timeStamp / step;\n if (model.timeStamp < duration && model.timeStamp + avg < duration && model.element.getAttribute('e-animate')) {\n // apply animation effect to the current element \n model.element.style.animation = model.name + ' ' + model.duration + 'ms ' + model.timingFunction;\n if (model.progress) {\n model.progress.call(_this, model);\n }\n // repeat requestAnimationFrame \n requestAnimationFrame(startAnimation);\n }\n else {\n // clear requestAnimationFrame\n cancelAnimationFrame(timerId);\n model.element.removeAttribute('e-animation-id');\n model.element.removeAttribute('e-animate');\n model.element.style.animation = '';\n if (model.end) {\n model.end.call(_this, model);\n }\n }\n }\n else {\n startTime = performance.now();\n // set initial requestAnimationFrame\n timerId = requestAnimationFrame(startAnimation);\n model.element.setAttribute('e-animation-id', timerId.toString());\n }\n }\n catch (e) {\n cancelAnimationFrame(timerId);\n model.element.removeAttribute('e-animation-id');\n if (model.fail) {\n model.fail.call(_this, e);\n }\n }\n };\n startAnimation();\n };\n /**\n * Returns Animation Model\n * @param {AnimationModel} options\n * @returns {AnimationModel}\n */\n Animation.prototype.getModel = function (options) {\n return {\n name: options.name || this.name,\n delay: options.delay || this.delay,\n duration: (options.duration !== undefined ? options.duration : this.duration),\n begin: options.begin || this.begin,\n end: options.end || this.end,\n fail: options.fail || this.fail,\n progress: options.progress || this.progress,\n timingFunction: this.easing[options.timingFunction] ? this.easing[options.timingFunction] :\n (options.timingFunction || this.easing[this.timingFunction])\n };\n };\n /**\n * @private\n */\n Animation.prototype.onPropertyChanged = function (newProp, oldProp) {\n // no code needed\n };\n /**\n * Returns module name as animation\n * @private\n */\n Animation.prototype.getModuleName = function () {\n return 'animation';\n };\n /**\n * @private\n */\n Animation.prototype.destroy = function () {\n //Override base destroy;\n };\n var Animation_1;\n __decorate([\n Property('FadeIn')\n ], Animation.prototype, \"name\", void 0);\n __decorate([\n Property(400)\n ], Animation.prototype, \"duration\", void 0);\n __decorate([\n Property('ease')\n ], Animation.prototype, \"timingFunction\", void 0);\n __decorate([\n Property(0)\n ], Animation.prototype, \"delay\", void 0);\n __decorate([\n Event()\n ], Animation.prototype, \"progress\", void 0);\n __decorate([\n Event()\n ], Animation.prototype, \"begin\", void 0);\n __decorate([\n Event()\n ], Animation.prototype, \"end\", void 0);\n __decorate([\n Event()\n ], Animation.prototype, \"fail\", void 0);\n Animation = Animation_1 = __decorate([\n NotifyPropertyChanges\n ], Animation);\n return Animation;\n}(Base));\nexport { Animation };\n/**\n * Ripple provides material theme's wave effect when an element is clicked\n * ```html\n * \n * \n * ```\n * @private\n * @param HTMLElement element - Target element\n * @param RippleOptions rippleOptions - Ripple options .\n */\nexport function rippleEffect(element, rippleOptions, done) {\n var rippleModel = getRippleModel(rippleOptions);\n if (rippleModel.rippleFlag === false || (rippleModel.rippleFlag === undefined && !isRippleEnabled)) {\n return Function;\n }\n element.setAttribute('data-ripple', 'true');\n EventHandler.add(element, 'mousedown', rippleHandler, { parent: element, rippleOptions: rippleModel });\n EventHandler.add(element, 'mouseup', rippleUpHandler, { parent: element, rippleOptions: rippleModel, done: done });\n EventHandler.add(element, 'mouseleave', rippleLeaveHandler, { parent: element, rippleOptions: rippleModel });\n if (Browser.isPointer) {\n EventHandler.add(element, 'transitionend', rippleLeaveHandler, { parent: element, rippleOptions: rippleModel });\n }\n return (function () {\n element.removeAttribute('data-ripple');\n EventHandler.remove(element, 'mousedown', rippleHandler);\n EventHandler.remove(element, 'mouseup', rippleUpHandler);\n EventHandler.remove(element, 'mouseleave', rippleLeaveHandler);\n EventHandler.remove(element, 'transitionend', rippleLeaveHandler);\n });\n}\nfunction getRippleModel(rippleOptions) {\n var rippleModel = {\n selector: rippleOptions && rippleOptions.selector ? rippleOptions.selector : null,\n ignore: rippleOptions && rippleOptions.ignore ? rippleOptions.ignore : null,\n rippleFlag: rippleOptions && rippleOptions.rippleFlag,\n isCenterRipple: rippleOptions && rippleOptions.isCenterRipple,\n duration: rippleOptions && rippleOptions.duration ? rippleOptions.duration : 350\n };\n return rippleModel;\n}\n/**\n * Handler for ripple event\n * @param {MouseEvent} e\n * @returns {void}\n * @private\n */\nfunction rippleHandler(e) {\n var target = (e.target);\n var selector = this.rippleOptions.selector;\n var element = selector ? closest(target, selector) : target;\n if (!element || (this.rippleOptions && closest(target, this.rippleOptions.ignore))) {\n return;\n }\n var offset = element.getBoundingClientRect();\n var offsetX = e.pageX - document.body.scrollLeft;\n var offsetY = e.pageY - ((!document.body.scrollTop && document.documentElement) ?\n document.documentElement.scrollTop : document.body.scrollTop);\n var pageX = Math.max(Math.abs(offsetX - offset.left), Math.abs(offsetX - offset.right));\n var pageY = Math.max(Math.abs(offsetY - offset.top), Math.abs(offsetY - offset.bottom));\n var radius = Math.sqrt(pageX * pageX + pageY * pageY);\n var diameter = radius * 2 + 'px';\n var x = offsetX - offset.left - radius;\n var y = offsetY - offset.top - radius;\n if (this.rippleOptions && this.rippleOptions.isCenterRipple) {\n x = 0;\n y = 0;\n diameter = '100%';\n }\n element.classList.add('e-ripple');\n var duration = this.rippleOptions.duration.toString();\n var styles = 'width: ' + diameter + ';height: ' + diameter + ';left: ' + x + 'px;top: ' + y + 'px;' +\n 'transition-duration: ' + duration + 'ms;';\n var rippleElement = createElement('div', { className: 'e-ripple-element', styles: styles });\n element.appendChild(rippleElement);\n window.getComputedStyle(rippleElement).getPropertyValue('opacity');\n rippleElement.style.transform = 'scale(1)';\n if (element !== this.parent) {\n EventHandler.add(element, 'mouseleave', rippleLeaveHandler, { parent: this.parent, rippleOptions: this.rippleOptions });\n }\n}\n/**\n * Handler for ripple element mouse up event\n * @param {MouseEvent} e\n * @returns {void}\n * @private\n */\nfunction rippleUpHandler(e) {\n removeRipple(e, this);\n}\n/**\n * Handler for ripple element mouse move event\n * @param {MouseEvent} e\n * @returns {void}\n * @private\n */\nfunction rippleLeaveHandler(e) {\n removeRipple(e, this);\n}\n/**\n * Handler for removing ripple element\n * @param {MouseEvent} e\n * @param {rippleArgs} eventArgs\n * @returns {void}\n * @private\n */\nfunction removeRipple(e, eventArgs) {\n var duration = eventArgs.rippleOptions.duration;\n var target = (e.target);\n var selector = eventArgs.rippleOptions.selector;\n var element = selector ? closest(target, selector) : target;\n if (!element || (element && element.className.indexOf('e-ripple') === -1)) {\n return;\n }\n var rippleElements = selectAll('.e-ripple-element', element);\n var rippleElement = rippleElements[rippleElements.length - 1];\n if (rippleElement) {\n rippleElement.style.opacity = '0.5';\n }\n if (eventArgs.parent !== element) {\n EventHandler.remove(element, 'mouseleave', rippleLeaveHandler);\n }\n /* tslint:disable:align */\n setTimeout(function () {\n if (rippleElement && rippleElement.parentNode) {\n rippleElement.parentNode.removeChild(rippleElement);\n }\n if (!element.getElementsByClassName('e-ripple-element').length) {\n element.classList.remove('e-ripple');\n }\n if (eventArgs.done) {\n eventArgs.done(e);\n }\n }, duration);\n}\nexport var isRippleEnabled = false;\n/**\n * Animation Module provides support to enable ripple effect functionality to Essential JS 2 components.\n * @param {boolean} isRipple Specifies the boolean value to enable or disable ripple effect.\n * @returns {boolean}\n */\nexport function enableRipple(isRipple) {\n isRippleEnabled = isRipple;\n return isRippleEnabled;\n}\n","/**\n * Module loading operations\n */\nimport { createInstance, setValue, getValue, deleteObject } from './util';\nvar MODULE_SUFFIX = 'Module';\nvar ModuleLoader = /** @class */ (function () {\n function ModuleLoader(parent) {\n this.loadedModules = [];\n this.parent = parent;\n }\n ;\n /**\n * Inject required modules in component library\n * @return {void}\n * @param {ModuleDeclaration[]} requiredModules - Array of modules to be required\n * @param {Function[]} moduleList - Array of modules to be injected from sample side\n */\n ModuleLoader.prototype.inject = function (requiredModules, moduleList) {\n var reqLength = requiredModules.length;\n if (reqLength === 0) {\n this.clean();\n return;\n }\n if (this.loadedModules.length) {\n this.clearUnusedModule(requiredModules);\n }\n for (var i = 0; i < reqLength; i++) {\n var modl = requiredModules[i];\n for (var _i = 0, moduleList_1 = moduleList; _i < moduleList_1.length; _i++) {\n var module = moduleList_1[_i];\n var modName = modl.member;\n if (module.prototype.getModuleName() === modl.member && !this.isModuleLoaded(modName)) {\n var moduleObject = createInstance(module, modl.args);\n var memberName = this.getMemberName(modName);\n if (modl.isProperty) {\n setValue(memberName, module, this.parent);\n }\n else {\n setValue(memberName, moduleObject, this.parent);\n }\n var loadedModule = modl;\n loadedModule.member = memberName;\n this.loadedModules.push(loadedModule);\n }\n }\n }\n };\n /**\n * To remove the created object while destroying the control\n * @return {void}\n */\n ModuleLoader.prototype.clean = function () {\n for (var _i = 0, _a = this.loadedModules; _i < _a.length; _i++) {\n var modules = _a[_i];\n if (!modules.isProperty) {\n getValue(modules.member, this.parent).destroy();\n }\n }\n this.loadedModules = [];\n };\n /**\n * Removes all unused modules\n * @param {ModuleDeclaration[]} moduleList\n * @returns {void}\n */\n ModuleLoader.prototype.clearUnusedModule = function (moduleList) {\n var _this = this;\n var usedModules = moduleList.map(function (arg) { return _this.getMemberName(arg.member); });\n var removableModule = this.loadedModules.filter(function (module) {\n return usedModules.indexOf(module.member) === -1;\n });\n for (var _i = 0, removableModule_1 = removableModule; _i < removableModule_1.length; _i++) {\n var mod = removableModule_1[_i];\n if (!mod.isProperty) {\n getValue(mod.member, this.parent).destroy();\n }\n this.loadedModules.splice(this.loadedModules.indexOf(mod), 1);\n deleteObject(this.parent, mod.member);\n }\n };\n /**\n * To get the name of the member.\n * @param {string} name\n * @returns {string}\n */\n ModuleLoader.prototype.getMemberName = function (name) {\n return name[0].toLowerCase() + name.substring(1) + MODULE_SUFFIX;\n };\n /**\n * Returns boolean based on whether the module specified is loaded or not\n * @param {string} modName\n * @returns {boolean}\n */\n ModuleLoader.prototype.isModuleLoaded = function (modName) {\n for (var _i = 0, _a = this.loadedModules; _i < _a.length; _i++) {\n var mod = _a[_i];\n if (mod.member === this.getMemberName(modName)) {\n return true;\n }\n }\n return false;\n };\n return ModuleLoader;\n}());\nexport { ModuleLoader };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { isUndefined, getValue, isNullOrUndefined, setValue, uniqueID, isBlazor } from './util';\nimport { ModuleLoader } from './module-loader';\nimport { Base } from './base';\nimport { Observer } from './observer';\nimport { ChildProperty } from './child-property';\nimport { Property, NotifyPropertyChanges } from './notify-property-change';\nimport { onIntlChange, rightToLeft, defaultCulture } from './internationalization';\nimport { createElement, addClass, removeClass, select } from './dom';\nimport { VirtualDOM } from './virtual-dom';\nimport { getRandomId } from './template-engine';\nvar componentCount = 0;\nvar lastPageID;\nvar lastHistoryLen = 0;\nexport var versionBasedStatePersistence = false;\n/**\n * To enable or disable version based statePersistence functionality for all components globally.\n * @param {boolean} status - Optional argument Specifies the status value to enable or disable versionBasedStatePersistence option.\n * @returns {void}\n */\n/* istanbul ignore next */\nexport function enableVersionBasedPersistence(status) {\n versionBasedStatePersistence = status;\n}\n/**\n * Base class for all Essential JavaScript components\n */\nvar Component = /** @class */ (function (_super) {\n __extends(Component, _super);\n /**\n * Initialize the constructor for component base\n */\n function Component(options, selector) {\n var _this = _super.call(this, options, selector) || this;\n _this.randomId = uniqueID();\n /**\n * string template option for Blazor template rendering\n * @private\n */\n _this.isStringTemplate = false;\n _this.needsID = false;\n _this.isReactHybrid = false;\n if (isNullOrUndefined(_this.enableRtl)) {\n _this.setProperties({ 'enableRtl': rightToLeft }, true);\n }\n if (isNullOrUndefined(_this.locale)) {\n _this.setProperties({ 'locale': defaultCulture }, true);\n }\n _this.moduleLoader = new ModuleLoader(_this);\n _this.localObserver = new Observer(_this);\n // tslint:disable-next-line:no-function-constructor-with-string-args\n onIntlChange.on('notifyExternalChange', _this.detectFunction, _this, _this.randomId);\n if (!isUndefined(selector)) {\n _this.appendTo();\n }\n return _this;\n }\n Component.prototype.requiredModules = function () {\n return [];\n };\n ;\n /**\n * Destroys the sub modules while destroying the widget\n */\n Component.prototype.destroy = function () {\n if (this.isDestroyed) {\n return;\n }\n if (this.enablePersistence) {\n this.setPersistData();\n }\n this.localObserver.destroy();\n if (this.refreshing) {\n return;\n }\n removeClass([this.element], ['e-control']);\n this.trigger('destroyed', { cancel: false });\n _super.prototype.destroy.call(this);\n this.moduleLoader.clean();\n onIntlChange.off('notifyExternalChange', this.detectFunction, this.randomId);\n };\n /**\n * Applies all the pending property changes and render the component again.\n */\n Component.prototype.refresh = function () {\n this.refreshing = true;\n this.moduleLoader.clean();\n this.destroy();\n this.clearChanges();\n this.localObserver = new Observer(this);\n this.preRender();\n this.injectModules();\n this.render();\n this.refreshing = false;\n };\n /* istanbul ignore next */\n Component.prototype.accessMount = function () {\n if (this.mount && !this.isReactHybrid) {\n this.mount();\n }\n };\n /**\n * Returns the route element of the component\n */\n /* istanbul ignore next */\n Component.prototype.getRootElement = function () {\n if (this.isReactHybrid) {\n return this.actualElement;\n }\n else {\n return this.element;\n }\n };\n /**\n * Returns the persistence data for component\n */\n /* istanbul ignore next */\n //tslint:disable:no-any\n Component.prototype.getLocalData = function () {\n var eleId = this.getModuleName() + this.element.id;\n if (versionBasedStatePersistence) {\n return window.localStorage.getItem(eleId + this.ej2StatePersistenceVersion);\n }\n else {\n return window.localStorage.getItem(eleId);\n }\n };\n /**\n * Appends the control within the given HTML element\n * @param {string | HTMLElement} selector - Target element where control needs to be appended\n */\n Component.prototype.appendTo = function (selector) {\n if (!isNullOrUndefined(selector) && typeof (selector) === 'string') {\n this.element = select(selector, document);\n }\n else if (!isNullOrUndefined(selector)) {\n this.element = selector;\n }\n if (!isNullOrUndefined(this.element)) {\n var moduleClass = 'e-' + this.getModuleName().toLowerCase();\n addClass([this.element], ['e-control', moduleClass]);\n this.isProtectedOnChange = false;\n if (this.needsID && !this.element.id) {\n this.element.id = this.getUniqueID(this.getModuleName());\n }\n if (this.enablePersistence) {\n this.mergePersistData();\n window.addEventListener('unload', this.setPersistData.bind(this));\n }\n var inst = getValue('ej2_instances', this.element);\n if (!inst || inst.indexOf(this) === -1) {\n _super.prototype.addInstance.call(this);\n }\n this.preRender();\n this.injectModules();\n this.render();\n if (!this.mount) {\n this.trigger('created');\n }\n else {\n this.accessMount();\n }\n }\n };\n /**\n * It is used to process the post rendering functionalities to a component.\n */\n Component.prototype.renderComplete = function (wrapperElement) {\n if (isBlazor()) {\n var sfBlazor = 'sfBlazor';\n // tslint:disable-next-line:no-any\n window[sfBlazor].renderComplete(this.element, wrapperElement);\n }\n this.isRendered = true;\n };\n /**\n * When invoked, applies the pending property changes immediately to the component.\n */\n Component.prototype.dataBind = function () {\n this.injectModules();\n _super.prototype.dataBind.call(this);\n };\n ;\n /**\n * Attach one or more event handler to the current component context.\n * It is used for internal handling event internally within the component only.\n * @param {BoundOptions[]| string} event - It is optional type either to Set the collection of event list or the eventName.\n * @param {Function} handler - optional parameter Specifies the handler to run when the event occurs\n * @param {Object} context - optional parameter Specifies the context to be bind in the handler.\n * @return {void}\n * @private\n */\n Component.prototype.on = function (event, handler, context) {\n if (typeof event === 'string') {\n this.localObserver.on(event, handler, context);\n }\n else {\n for (var _i = 0, event_1 = event; _i < event_1.length; _i++) {\n var arg = event_1[_i];\n this.localObserver.on(arg.event, arg.handler, arg.context);\n }\n }\n };\n /**\n * To remove one or more event handler that has been attached with the on() method.\n * @param {BoundOptions[]| string} event - It is optional type either to Set the collection of event list or the eventName.\n * @param {Function} handler - optional parameter Specifies the function to run when the event occurs\n * @return {void}\n * @private\n */\n Component.prototype.off = function (event, handler) {\n if (typeof event === 'string') {\n this.localObserver.off(event, handler);\n }\n else {\n for (var _i = 0, event_2 = event; _i < event_2.length; _i++) {\n var arg = event_2[_i];\n this.localObserver.off(arg.event, arg.handler);\n }\n }\n };\n /**\n * To notify the handlers in the specified event.\n * @param {string} property - Specifies the event to be notify.\n * @param {Object} argument - Additional parameters to pass while calling the handler.\n * @return {void}\n * @private\n */\n Component.prototype.notify = function (property, argument) {\n if (this.isDestroyed !== true) {\n this.localObserver.notify(property, argument);\n }\n };\n /**\n * Get injected modules\n * @private\n */\n Component.prototype.getInjectedModules = function () {\n return this.injectedModules;\n };\n ;\n /**\n * Dynamically injects the required modules to the component.\n */\n Component.Inject = function () {\n var moduleList = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n moduleList[_i] = arguments[_i];\n }\n if (!this.prototype.injectedModules) {\n this.prototype.injectedModules = [];\n }\n for (var i = 0; i < moduleList.length; i++) {\n if (this.prototype.injectedModules.indexOf(moduleList[i]) === -1) {\n this.prototype.injectedModules.push(moduleList[i]);\n }\n }\n };\n /**\n * This is a instance method to create an element.\n * @private\n */\n /* istanbul ignore next */\n //tslint:disable:no-any\n Component.prototype.createElement = function (tagName, prop, isVDOM) {\n if (isVDOM && this.isReactHybrid) {\n if (prop) {\n prop = {};\n }\n prop['data-id'] = getRandomId();\n return VirtualDOM.createElement(tagName, prop);\n }\n else {\n return createElement(tagName, prop);\n }\n };\n /**\n *\n * @param handler - handler to be triggered after state Updated.\n * @param argument - Arguments to be passed to caller.\n * @private\n */\n /* istanbul ignore next */\n //tslint:disable:no-any\n Component.prototype.triggerStateChange = function (handler, argument) {\n if (this.isReactHybrid) {\n //tslint:disable:no-any\n this.setState();\n this.currentContext = { calls: handler, args: argument };\n }\n };\n // tslint: enable: no-any\n Component.prototype.injectModules = function () {\n if (this.injectedModules && this.injectedModules.length) {\n this.moduleLoader.inject(this.requiredModules(), this.injectedModules);\n }\n };\n Component.prototype.detectFunction = function (args) {\n var prop = Object.keys(args);\n if (prop.length) {\n this[prop[0]] = args[prop[0]];\n }\n };\n Component.prototype.mergePersistData = function () {\n var data;\n if (versionBasedStatePersistence) {\n data = window.localStorage.getItem(this.getModuleName() + this.element.id + this.ej2StatePersistenceVersion);\n }\n else {\n data = window.localStorage.getItem(this.getModuleName() + this.element.id);\n }\n if (!(isNullOrUndefined(data) || (data === ''))) {\n this.setProperties(JSON.parse(data), true);\n }\n };\n Component.prototype.setPersistData = function () {\n if (!this.isDestroyed) {\n if (versionBasedStatePersistence) {\n window.localStorage.setItem(this.getModuleName() + this.element.id + this.ej2StatePersistenceVersion, this.getPersistData());\n }\n else {\n window.localStorage.setItem(this.getModuleName() + this.element.id, this.getPersistData());\n }\n }\n };\n //tslint:disable-next-line\n Component.prototype.renderReactTemplates = function () {\n //No Code\n };\n //tslint:disable-next-line\n Component.prototype.clearTemplate = function (templateName, index) {\n //No Code\n };\n Component.prototype.getUniqueID = function (definedName) {\n if (this.isHistoryChanged()) {\n componentCount = 0;\n }\n lastPageID = this.pageID(location.href);\n lastHistoryLen = history.length;\n return definedName + '_' + lastPageID + '_' + componentCount++;\n };\n Component.prototype.pageID = function (url) {\n var hash = 0;\n if (url.length === 0) {\n return hash;\n }\n for (var i = 0; i < url.length; i++) {\n var char = url.charCodeAt(i);\n hash = ((hash << 5) - hash) + char;\n hash = hash & hash; // Convert to 32bit integer\n }\n return Math.abs(hash);\n };\n Component.prototype.isHistoryChanged = function () {\n return lastPageID !== this.pageID(location.href) || lastHistoryLen !== history.length;\n };\n Component.prototype.addOnPersist = function (options) {\n var _this = this;\n var persistObj = {};\n for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {\n var key = options_1[_i];\n var objValue = void 0;\n objValue = getValue(key, this);\n if (!isUndefined(objValue)) {\n setValue(key, this.getActualProperties(objValue), persistObj);\n }\n }\n return JSON.stringify(persistObj, function (key, value) {\n return _this.getActualProperties(value);\n });\n };\n Component.prototype.getActualProperties = function (obj) {\n if (obj instanceof ChildProperty) {\n return getValue('properties', obj);\n }\n else {\n return obj;\n }\n };\n Component.prototype.ignoreOnPersist = function (options) {\n return JSON.stringify(this.iterateJsonProperties(this.properties, options));\n };\n Component.prototype.iterateJsonProperties = function (obj, ignoreList) {\n var newObj = {};\n var _loop_1 = function (key) {\n if (ignoreList.indexOf(key) === -1) {\n // tslint:disable-next-line:no-any\n var value = obj[key];\n if (typeof value === 'object' && !(value instanceof Array)) {\n var newList = ignoreList.filter(function (str) {\n return new RegExp(key + '.').test(str);\n }).map(function (str) {\n return str.replace(key + '.', '');\n });\n newObj[key] = this_1.iterateJsonProperties(this_1.getActualProperties(value), newList);\n }\n else {\n newObj[key] = value;\n }\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = Object.keys(obj); _i < _a.length; _i++) {\n var key = _a[_i];\n _loop_1(key);\n }\n return newObj;\n };\n __decorate([\n Property(false)\n ], Component.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property()\n ], Component.prototype, \"enableRtl\", void 0);\n __decorate([\n Property()\n ], Component.prototype, \"locale\", void 0);\n Component = __decorate([\n NotifyPropertyChanges\n ], Component);\n return Component;\n}(Base));\nexport { Component };\n//Function handling for page navigation detection \n/* istanbul ignore next */\n(function () {\n if (typeof window !== 'undefined') {\n window.addEventListener('popstate', \n /* istanbul ignore next */\n function () {\n componentCount = 0;\n });\n }\n})();\n","import { getValue, setValue, merge, isBlazor } from './util';\nimport { Base } from './base';\n/**\n * To detect the changes for inner properties.\n * @private\n */\nvar ChildProperty = /** @class */ (function () {\n function ChildProperty(parent, propName, defaultValue, isArray) {\n this.isComplexArraySetter = false;\n this.properties = {};\n this.changedProperties = {};\n this.childChangedProperties = {};\n this.oldProperties = {};\n // tslint:disable-next-line:no-empty\n this.finalUpdate = function () { };\n this.callChildDataBind = getValue('callChildDataBind', Base);\n this.parentObj = parent;\n this.controlParent = this.parentObj.controlParent || this.parentObj;\n this.propName = propName;\n this.isParentArray = isArray;\n this.setProperties(defaultValue, true);\n }\n /**\n * Updates the property changes\n * @param {boolean} val\n * @param {string} propName\n * @returns {void}\n */\n ChildProperty.prototype.updateChange = function (val, propName) {\n if (val === true) {\n this.parentObj.childChangedProperties[propName] = val;\n }\n else {\n delete this.parentObj.childChangedProperties[propName];\n }\n if (this.parentObj.updateChange) {\n this.parentObj.updateChange(val, this.parentObj.propName);\n }\n };\n /**\n * Updates time out duration\n */\n ChildProperty.prototype.updateTimeOut = function () {\n if (this.parentObj.updateTimeOut) {\n this.parentObj.finalUpdate();\n this.parentObj.updateTimeOut();\n }\n else {\n var changeTime_1 = setTimeout(this.parentObj.dataBind.bind(this.parentObj));\n var clearUpdate = function () {\n clearTimeout(changeTime_1);\n };\n this.finalUpdate = clearUpdate;\n }\n };\n /**\n * Clears changed properties\n */\n ChildProperty.prototype.clearChanges = function () {\n this.finalUpdate();\n this.updateChange(false, this.propName);\n this.oldProperties = {};\n this.changedProperties = {};\n };\n /**\n * Set property changes\n * @param {Object} prop\n * @param {boolean} muteOnChange\n * {void}\n */\n ChildProperty.prototype.setProperties = function (prop, muteOnChange) {\n if (muteOnChange === true) {\n merge(this, prop);\n this.updateChange(false, this.propName);\n this.clearChanges();\n }\n else {\n merge(this, prop);\n }\n };\n /**\n * Binds data\n */\n ChildProperty.prototype.dataBind = function () {\n this.callChildDataBind(this.childChangedProperties, this);\n if (this.isParentArray) {\n var curIndex = this.parentObj[this.propName].indexOf(this);\n if (Object.keys(this.changedProperties).length) {\n setValue(this.propName + '.' + curIndex, this.changedProperties, this.parentObj.changedProperties);\n setValue(this.propName + '.' + curIndex, this.oldProperties, this.parentObj.oldProperties);\n }\n }\n else {\n this.parentObj.changedProperties[this.propName] = this.changedProperties;\n this.parentObj.oldProperties[this.propName] = this.oldProperties;\n }\n this.clearChanges();\n };\n /**\n * Saves changes to newer values\n * @param {string} key\n * @param {Object} newValue\n * @param {Object} oldValue\n * @returns {void}\n */\n ChildProperty.prototype.saveChanges = function (key, newValue, oldValue, restrictServerDataBind) {\n if (this.controlParent.isProtectedOnChange) {\n return;\n }\n if (!restrictServerDataBind) {\n this.serverDataBind(key, newValue, true);\n }\n this.oldProperties[key] = oldValue;\n this.changedProperties[key] = newValue;\n this.updateChange(true, this.propName);\n this.finalUpdate();\n this.updateTimeOut();\n };\n ChildProperty.prototype.serverDataBind = function (key, value, isSaveChanges, action) {\n if (isBlazor() && !this.parentObj.isComplexArraySetter) {\n // tslint:disable-next-line:no-any\n var parent_1;\n var newChanges = {};\n var parentKey = isSaveChanges ? this.getParentKey(true) + '.' + key : key;\n /* istanbul ignore else */\n if (parentKey.indexOf('.') !== -1) {\n var complexKeys = parentKey.split('.');\n parent_1 = newChanges;\n for (var i = 0; i < complexKeys.length; i++) {\n var isFinal = i === complexKeys.length - 1;\n parent_1[complexKeys[i]] = isFinal ? value : {};\n parent_1 = isFinal ? parent_1 : parent_1[complexKeys[i]];\n }\n }\n else {\n newChanges[parentKey] = {};\n parent_1 = newChanges[parentKey];\n newChanges[parentKey][key] = value;\n }\n /* istanbul ignore next */\n if (this.isParentArray) {\n var actionProperty = 'ejsAction';\n parent_1[actionProperty] = action ? action : 'none';\n }\n this.controlParent.serverDataBind(newChanges);\n }\n };\n ChildProperty.prototype.getParentKey = function (isSaveChanges) {\n // tslint:disable-next-line:no-any\n var index = '';\n var propName = this.propName;\n /* istanbul ignore next */\n if (this.isParentArray) {\n index = this.parentObj[this.propName].indexOf(this);\n var valueLength = this.parentObj[this.propName].length;\n valueLength = isSaveChanges ? valueLength : (valueLength > 0 ? valueLength - 1 : 0);\n index = index !== -1 ? '-' + index : '-' + valueLength;\n propName = propName + index;\n }\n if (this.controlParent !== this.parentObj) {\n propName = this.parentObj.getParentKey() + '.' + this.propName + index;\n }\n return propName;\n };\n return ChildProperty;\n}());\nexport { ChildProperty };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Base } from './base';\nimport { Browser } from './browser';\nimport { isVisible } from './dom';\nimport { Property, Complex, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { EventHandler } from './event-handler';\nimport { ChildProperty } from './child-property';\nimport { select, closest, setStyleAttribute, addClass, createElement } from './dom';\nimport { extend, isUndefined, isNullOrUndefined, compareElementParent, isBlazor } from './util';\nvar defaultPosition = { left: 0, top: 0, bottom: 0, right: 0 };\nvar positionProp = ['offsetLeft', 'offsetTop'];\nvar axisMapper = ['x', 'y'];\nvar axisValueMapper = ['left', 'top'];\nvar isDraggedObject = { isDragged: false };\n/**\n * Specifies the position coordinates\n */\nvar Position = /** @class */ (function (_super) {\n __extends(Position, _super);\n function Position() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(0)\n ], Position.prototype, \"left\", void 0);\n __decorate([\n Property(0)\n ], Position.prototype, \"top\", void 0);\n return Position;\n}(ChildProperty));\nexport { Position };\n/**\n * Draggable Module provides support to enable draggable functionality in Dom Elements.\n * ```html\n * ;\n * \n * ```\n */\nvar KeyboardEvents = /** @class */ (function (_super) {\n __extends(KeyboardEvents, _super);\n /**\n * Initializes the KeyboardEvents\n * @param {HTMLElement} element\n * @param {KeyboardEventsModel} options\n */\n function KeyboardEvents(element, options) {\n var _this = _super.call(this, options, element) || this;\n /**\n * To handle a key press event returns null\n */\n _this.keyPressHandler = function (e) {\n var isAltKey = e.altKey;\n var isCtrlKey = e.ctrlKey;\n var isShiftKey = e.shiftKey;\n var curkeyCode = e.which;\n var keys = Object.keys(_this.keyConfigs);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n var configCollection = _this.keyConfigs[key].split(',');\n for (var _a = 0, configCollection_1 = configCollection; _a < configCollection_1.length; _a++) {\n var rconfig = configCollection_1[_a];\n var rKeyObj = KeyboardEvents_1.getKeyConfigData(rconfig.trim());\n if (isAltKey === rKeyObj.altKey && isCtrlKey === rKeyObj.ctrlKey &&\n isShiftKey === rKeyObj.shiftKey && curkeyCode === rKeyObj.keyCode) {\n e.action = key;\n if (_this.keyAction) {\n _this.keyAction(e);\n }\n }\n }\n }\n };\n _this.bind();\n return _this;\n }\n KeyboardEvents_1 = KeyboardEvents;\n /**\n * Unwire bound events and destroy the instance.\n * @return {void}\n */\n KeyboardEvents.prototype.destroy = function () {\n this.unwireEvents();\n _super.prototype.destroy.call(this);\n };\n /**\n * Function can be used to specify certain action if a property is changed\n * @param newProp\n * @param oldProp\n * @returns {void}\n * @private\n */\n KeyboardEvents.prototype.onPropertyChanged = function (newProp, oldProp) {\n // No code are needed\n };\n ;\n KeyboardEvents.prototype.bind = function () {\n this.wireEvents();\n };\n /**\n * To get the module name, returns 'keyboard'.\n * @private\n */\n KeyboardEvents.prototype.getModuleName = function () {\n return 'keyboard';\n };\n /**\n * Wiring event handlers to events\n */\n KeyboardEvents.prototype.wireEvents = function () {\n this.element.addEventListener(this.eventName, this.keyPressHandler);\n };\n /**\n * Unwiring event handlers to events\n */\n KeyboardEvents.prototype.unwireEvents = function () {\n this.element.removeEventListener(this.eventName, this.keyPressHandler);\n };\n /**\n * To get the key configuration data\n * @param {string} config - configuration data\n * returns {KeyData}\n */\n KeyboardEvents.getKeyConfigData = function (config) {\n if (config in this.configCache) {\n return this.configCache[config];\n }\n var keys = config.toLowerCase().split('+');\n var keyData = {\n altKey: (keys.indexOf('alt') !== -1 ? true : false),\n ctrlKey: (keys.indexOf('ctrl') !== -1 ? true : false),\n shiftKey: (keys.indexOf('shift') !== -1 ? true : false),\n keyCode: null\n };\n if (keys[keys.length - 1].length > 1 && !!Number(keys[keys.length - 1])) {\n keyData.keyCode = Number(keys[keys.length - 1]);\n }\n else {\n keyData.keyCode = KeyboardEvents_1.getKeyCode(keys[keys.length - 1]);\n }\n KeyboardEvents_1.configCache[config] = keyData;\n return keyData;\n };\n // Return the keycode value as string \n KeyboardEvents.getKeyCode = function (keyVal) {\n return keyCode[keyVal] || keyVal.toUpperCase().charCodeAt(0);\n };\n var KeyboardEvents_1;\n KeyboardEvents.configCache = {};\n __decorate([\n Property({})\n ], KeyboardEvents.prototype, \"keyConfigs\", void 0);\n __decorate([\n Property('keyup')\n ], KeyboardEvents.prototype, \"eventName\", void 0);\n __decorate([\n Event()\n ], KeyboardEvents.prototype, \"keyAction\", void 0);\n KeyboardEvents = KeyboardEvents_1 = __decorate([\n NotifyPropertyChanges\n ], KeyboardEvents);\n return KeyboardEvents;\n}(Base));\nexport { KeyboardEvents };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { extend } from './util';\nimport { Property, Complex, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { Browser } from './browser';\nimport { Base } from './base';\nimport { ChildProperty } from './child-property';\nimport { EventHandler } from './event-handler';\n/**\n * SwipeSettings is a framework module that provides support to handle swipe event like swipe up, swipe right, etc..,\n */\nvar SwipeSettings = /** @class */ (function (_super) {\n __extends(SwipeSettings, _super);\n function SwipeSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(50)\n ], SwipeSettings.prototype, \"swipeThresholdDistance\", void 0);\n return SwipeSettings;\n}(ChildProperty));\nexport { SwipeSettings };\nvar swipeRegex = /(Up|Down)/;\n/**\n * Touch class provides support to handle the touch event like tap, double tap, tap hold, etc..,\n * ```typescript\n * let node: HTMLElement;\n * let touchObj: Touch = new Touch({\n * element: node,\n * tap: function (e) {\n * // tap handler function code\n * }\n * tapHold: function (e) {\n * // tap hold handler function code\n * }\n * scroll: function (e) {\n * // scroll handler function code\n * }\n * swipe: function (e) {\n * // swipe handler function code\n * }\n * });\n * ```\n */\nvar Touch = /** @class */ (function (_super) {\n __extends(Touch, _super);\n /* End-Properties */\n function Touch(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.touchAction = true;\n _this.tapCount = 0;\n _this.startEvent = function (evt) {\n if (_this.touchAction === true) {\n var point = _this.updateChangeTouches(evt);\n if (evt.changedTouches !== undefined) {\n _this.touchAction = false;\n }\n _this.isTouchMoved = false;\n _this.movedDirection = '';\n _this.startPoint = _this.lastMovedPoint = { clientX: point.clientX, clientY: point.clientY };\n _this.startEventData = point;\n _this.hScrollLocked = _this.vScrollLocked = false;\n _this.tStampStart = Date.now();\n _this.timeOutTapHold = setTimeout(function () { _this.tapHoldEvent(evt); }, _this.tapHoldThreshold);\n EventHandler.add(_this.element, Browser.touchMoveEvent, _this.moveEvent, _this);\n EventHandler.add(_this.element, Browser.touchEndEvent, _this.endEvent, _this);\n EventHandler.add(_this.element, Browser.touchCancelEvent, _this.cancelEvent, _this);\n }\n };\n _this.moveEvent = function (evt) {\n var point = _this.updateChangeTouches(evt);\n _this.movedPoint = point;\n _this.isTouchMoved = !(point.clientX === _this.startPoint.clientX && point.clientY === _this.startPoint.clientY);\n var eScrollArgs = {};\n if (_this.isTouchMoved) {\n clearTimeout(_this.timeOutTapHold);\n _this.calcScrollPoints(evt);\n var scrollArg = {\n startEvents: _this.startEventData,\n originalEvent: evt, startX: _this.startPoint.clientX,\n startY: _this.startPoint.clientY, distanceX: _this.distanceX,\n distanceY: _this.distanceY, scrollDirection: _this.scrollDirection,\n velocity: _this.getVelocity(point)\n };\n eScrollArgs = extend(eScrollArgs, {}, scrollArg);\n _this.trigger('scroll', eScrollArgs);\n _this.lastMovedPoint = { clientX: point.clientX, clientY: point.clientY };\n }\n };\n _this.cancelEvent = function (evt) {\n clearTimeout(_this.timeOutTapHold);\n clearTimeout(_this.timeOutTap);\n _this.tapCount = 0;\n _this.swipeFn(evt);\n EventHandler.remove(_this.element, Browser.touchCancelEvent, _this.cancelEvent);\n };\n _this.endEvent = function (evt) {\n _this.swipeFn(evt);\n if (!_this.isTouchMoved) {\n if (typeof _this.tap === 'function') {\n _this.trigger('tap', { originalEvent: evt, tapCount: ++_this.tapCount });\n _this.timeOutTap = setTimeout(function () {\n _this.tapCount = 0;\n }, _this.tapThreshold);\n }\n }\n _this.modeclear();\n };\n _this.swipeFn = function (evt) {\n clearTimeout(_this.timeOutTapHold);\n clearTimeout(_this.timeOutTap);\n var point = _this.updateChangeTouches(evt);\n var diffX = point.clientX - _this.startPoint.clientX;\n var diffY = point.clientY - _this.startPoint.clientY;\n diffX = Math.floor(diffX < 0 ? -1 * diffX : diffX);\n diffY = Math.floor(diffY < 0 ? -1 * diffY : diffX);\n _this.isTouchMoved = diffX > 1 || diffY > 1;\n _this.endPoint = point;\n _this.calcPoints(evt);\n var swipeArgs = {\n originalEvent: evt,\n startEvents: _this.startEventData,\n startX: _this.startPoint.clientX,\n startY: _this.startPoint.clientY,\n distanceX: _this.distanceX, distanceY: _this.distanceY, swipeDirection: _this.movedDirection,\n velocity: _this.getVelocity(point)\n };\n if (_this.isTouchMoved) {\n var eSwipeArgs = void 0;\n var tDistance = _this.swipeSettings.swipeThresholdDistance;\n eSwipeArgs = extend(eSwipeArgs, _this.defaultArgs, swipeArgs);\n var canTrigger = false;\n var ele = _this.element;\n var scrollBool = _this.isScrollable(ele);\n var moved = swipeRegex.test(_this.movedDirection);\n if ((tDistance < _this.distanceX && !moved) || (tDistance < _this.distanceY && moved)) {\n if (!scrollBool) {\n canTrigger = true;\n }\n else {\n canTrigger = _this.checkSwipe(ele, moved);\n }\n }\n if (canTrigger) {\n _this.trigger('swipe', eSwipeArgs);\n }\n }\n _this.modeclear();\n };\n _this.modeclear = function () {\n _this.modeClear = setTimeout(function () {\n _this.touchAction = true;\n }, (typeof _this.tap !== 'function' ? 0 : 20));\n _this.lastTapTime = new Date().getTime();\n EventHandler.remove(_this.element, Browser.touchMoveEvent, _this.moveEvent);\n EventHandler.remove(_this.element, Browser.touchEndEvent, _this.endEvent);\n EventHandler.remove(_this.element, Browser.touchCancelEvent, _this.cancelEvent);\n };\n _this.bind();\n return _this;\n }\n // triggers when property changed \n /**\n * @private\n * @param newProp\n * @param oldProp\n */\n Touch.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Touch.prototype.bind = function () {\n this.wireEvents();\n if (Browser.isIE) {\n this.element.classList.add('e-block-touch');\n }\n };\n /**\n * To destroy the touch instance.\n * @return {void}\n */\n Touch.prototype.destroy = function () {\n this.unwireEvents();\n _super.prototype.destroy.call(this);\n };\n // Need to changes the event binding once we updated the event handler.\n Touch.prototype.wireEvents = function () {\n EventHandler.add(this.element, Browser.touchStartEvent, this.startEvent, this);\n };\n Touch.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, Browser.touchStartEvent, this.startEvent);\n };\n /**\n * Returns module name as touch\n * @returns {string}\n * @private\n */\n Touch.prototype.getModuleName = function () {\n return 'touch';\n };\n /**\n * Returns if the HTML element is Scrollable.\n * @param {HTMLElement} element - HTML Element to check if Scrollable.\n * @returns {boolean}\n */\n Touch.prototype.isScrollable = function (element) {\n var eleStyle = getComputedStyle(element);\n var style = eleStyle.overflow + eleStyle.overflowX + eleStyle.overflowY;\n if ((/(auto|scroll)/).test(style)) {\n return true;\n }\n return false;\n };\n Touch.prototype.tapHoldEvent = function (evt) {\n this.tapCount = 0;\n this.touchAction = true;\n var eTapArgs;\n EventHandler.remove(this.element, Browser.touchMoveEvent, this.moveEvent);\n EventHandler.remove(this.element, Browser.touchEndEvent, this.endEvent);\n eTapArgs = { originalEvent: evt };\n this.trigger('tapHold', eTapArgs);\n EventHandler.remove(this.element, Browser.touchCancelEvent, this.cancelEvent);\n };\n Touch.prototype.calcPoints = function (evt) {\n var point = this.updateChangeTouches(evt);\n this.defaultArgs = { originalEvent: evt };\n this.distanceX = Math.abs((Math.abs(point.clientX) - Math.abs(this.startPoint.clientX)));\n this.distanceY = Math.abs((Math.abs(point.clientY) - Math.abs(this.startPoint.clientY)));\n if (this.distanceX > this.distanceY) {\n this.movedDirection = (point.clientX > this.startPoint.clientX) ? 'Right' : 'Left';\n }\n else {\n this.movedDirection = (point.clientY < this.startPoint.clientY) ? 'Up' : 'Down';\n }\n };\n Touch.prototype.calcScrollPoints = function (evt) {\n var point = this.updateChangeTouches(evt);\n this.defaultArgs = { originalEvent: evt };\n this.distanceX = Math.abs((Math.abs(point.clientX) - Math.abs(this.lastMovedPoint.clientX)));\n this.distanceY = Math.abs((Math.abs(point.clientY) - Math.abs(this.lastMovedPoint.clientY)));\n if ((this.distanceX > this.distanceY || this.hScrollLocked === true) && this.vScrollLocked === false) {\n this.scrollDirection = (point.clientX > this.lastMovedPoint.clientX) ? 'Right' : 'Left';\n this.hScrollLocked = true;\n }\n else {\n this.scrollDirection = (point.clientY < this.lastMovedPoint.clientY) ? 'Up' : 'Down';\n this.vScrollLocked = true;\n }\n };\n Touch.prototype.getVelocity = function (pnt) {\n var newX = pnt.clientX;\n var newY = pnt.clientY;\n var newT = Date.now();\n var xDist = newX - this.startPoint.clientX;\n var yDist = newY - this.startPoint.clientX;\n var interval = newT - this.tStampStart;\n return Math.sqrt(xDist * xDist + yDist * yDist) / interval;\n };\n // tslint:disable-next-line:no-any\n Touch.prototype.checkSwipe = function (ele, flag) {\n var keys = ['scroll', 'offset'];\n var temp = flag ? ['Height', 'Top'] : ['Width', 'Left'];\n if ((ele[keys[0] + temp[0]] <= ele[keys[1] + temp[0]])) {\n return true;\n }\n return (ele[keys[0] + temp[1]] === 0) ||\n (ele[keys[1] + temp[0]] + ele[keys[0] + temp[1]] >= ele[keys[0] + temp[0]]);\n };\n Touch.prototype.updateChangeTouches = function (evt) {\n // tslint:disable-next-line:max-line-length\n var point = evt.changedTouches && evt.changedTouches.length !== 0 ? evt.changedTouches[0] : evt;\n return point;\n };\n __decorate([\n Event()\n ], Touch.prototype, \"tap\", void 0);\n __decorate([\n Event()\n ], Touch.prototype, \"tapHold\", void 0);\n __decorate([\n Event()\n ], Touch.prototype, \"swipe\", void 0);\n __decorate([\n Event()\n ], Touch.prototype, \"scroll\", void 0);\n __decorate([\n Property(350)\n ], Touch.prototype, \"tapThreshold\", void 0);\n __decorate([\n Property(750)\n ], Touch.prototype, \"tapHoldThreshold\", void 0);\n __decorate([\n Complex({}, SwipeSettings)\n ], Touch.prototype, \"swipeSettings\", void 0);\n Touch = __decorate([\n NotifyPropertyChanges\n ], Touch);\n return Touch;\n}(Base));\nexport { Touch };\n","import { extend, isNullOrUndefined } from './util';\nimport { defaultCulture } from './internationalization';\n/**\n * L10n modules provides localized text for different culture.\n * ```typescript\n * import {setCulture} from '@syncfusion/ts-base-library';\n * //load global locale object common for all components.\n * L10n.load({\n * 'fr-BE': {\n * 'button': {\n * 'check': 'vérifié'\n * }\n * }\n * });\n * //set globale default locale culture.\n * setCulture('fr-BE');\n * let instance: L10n = new L10n('button', {\n * check: 'checked'\n * });\n * //Get locale text for current property.\n * instance.getConstant('check');\n * //Change locale culture in a component.\n * instance.setLocale('en-US');\n * ```\n */\nvar L10n = /** @class */ (function () {\n /**\n * Constructor\n */\n function L10n(controlName, localeStrings, locale) {\n this.controlName = controlName;\n this.localeStrings = localeStrings;\n this.setLocale(locale || defaultCulture);\n }\n /**\n * Sets the locale text\n * @param {string} locale\n * @returns {void}\n */\n L10n.prototype.setLocale = function (locale) {\n var intLocale = this.intGetControlConstant(L10n.locale, locale);\n this.currentLocale = intLocale || this.localeStrings;\n };\n /**\n * Sets the global locale for all components.\n * @param {Object} localeObject - specifies the localeObject to be set as global locale.\n */\n L10n.load = function (localeObject) {\n this.locale = extend(this.locale, localeObject, {}, true);\n };\n /**\n * Returns current locale text for the property based on the culture name and control name.\n * @param {string} propertyName - specifies the property for which localize text to be returned.\n * @return string\n */\n L10n.prototype.getConstant = function (prop) {\n // Removed conditional operator because this method does not return correct value when passing 0 as value in localization\n if (!isNullOrUndefined(this.currentLocale[prop])) {\n return this.currentLocale[prop];\n }\n else {\n return this.localeStrings[prop] || '';\n }\n };\n /**\n * Returns the control constant object for current object and the locale specified.\n * @param {Object} curObject\n * @param {string} locale\n * @returns {Object}\n */\n L10n.prototype.intGetControlConstant = function (curObject, locale) {\n if ((curObject)[locale]) {\n return (curObject)[locale][this.controlName];\n }\n return null;\n };\n L10n.locale = {};\n return L10n;\n}());\nexport { L10n };\n","/**\n * SanitizeHtmlHelper for sanitize the value.\n */\nimport { detach } from './dom';\nvar removeTags = [\n 'script',\n 'style',\n 'iframe[src]',\n 'link[href*=\"javascript:\"]',\n 'object[type=\"text/x-scriptlet\"]',\n 'object[data^=\"data:text/html;base64\"]',\n 'img[src^=\"data:text/html;base64\"]',\n '[src^=\"javascript:\"]',\n '[dynsrc^=\"javascript:\"]',\n '[lowsrc^=\"javascript:\"]',\n '[type^=\"application/x-shockwave-flash\"]'\n];\nvar removeAttrs = [\n { attribute: 'href', selector: '[href*=\"javascript:\"]' },\n { attribute: 'background', selector: '[background^=\"javascript:\"]' },\n { attribute: 'style', selector: '[style*=\"javascript:\"]' },\n { attribute: 'style', selector: '[style*=\"expression(\"]' },\n { attribute: 'href', selector: 'a[href^=\"data:text/html;base64\"]' }\n];\nvar jsEvents = ['onchange',\n 'onclick',\n 'onmouseover',\n 'onmouseout',\n 'onkeydown',\n 'onload',\n 'onerror',\n 'onblur',\n 'onfocus',\n 'onbeforeload',\n 'onbeforeunload',\n 'onkeyup',\n 'onsubmit',\n 'onafterprint',\n 'onbeforeonload',\n 'onbeforeprint',\n 'onblur',\n 'oncanplay',\n 'oncanplaythrough',\n 'onchange',\n 'onclick',\n 'oncontextmenu',\n 'ondblclick',\n 'ondrag',\n 'ondragend',\n 'ondragenter',\n 'ondragleave',\n 'ondragover',\n 'ondragstart',\n 'ondrop',\n 'ondurationchange',\n 'onemptied',\n 'onended',\n 'onerror',\n 'onerror',\n 'onfocus',\n 'onformchange',\n 'onforminput',\n 'onhaschange',\n 'oninput',\n 'oninvalid',\n 'onkeydown',\n 'onkeypress',\n 'onkeyup',\n 'onload',\n 'onloadeddata',\n 'onloadedmetadata',\n 'onloadstart',\n 'onmessage',\n 'onmousedown',\n 'onmousemove',\n 'onmouseout',\n 'onmouseover',\n 'onmouseup',\n 'onmousewheel',\n 'onoffline',\n 'onoine',\n 'ononline',\n 'onpagehide',\n 'onpageshow',\n 'onpause',\n 'onplay',\n 'onplaying',\n 'onpopstate',\n 'onprogress',\n 'onratechange',\n 'onreadystatechange',\n 'onredo',\n 'onresize',\n 'onscroll',\n 'onseeked',\n 'onseeking',\n 'onselect',\n 'onstalled',\n 'onstorage',\n 'onsubmit',\n 'onsuspend',\n 'ontimeupdate',\n 'onundo',\n 'onunload',\n 'onvolumechange',\n 'onwaiting',\n 'onmouseenter',\n 'onmouseleave',\n 'onmousewheel',\n 'onstart',\n 'onpropertychange'\n];\nvar SanitizeHtmlHelper = /** @class */ (function () {\n function SanitizeHtmlHelper() {\n }\n SanitizeHtmlHelper.beforeSanitize = function () {\n return {\n selectors: {\n tags: removeTags,\n attributes: removeAttrs\n }\n };\n };\n ;\n SanitizeHtmlHelper.sanitize = function (value) {\n var item = this.beforeSanitize();\n var output = this.serializeValue(item, value);\n return output;\n };\n SanitizeHtmlHelper.serializeValue = function (item, value) {\n this.removeAttrs = item.selectors.attributes;\n this.removeTags = item.selectors.tags;\n this.wrapElement = document.createElement('div');\n this.wrapElement.innerHTML = value;\n this.removeXssTags();\n this.removeJsEvents();\n this.removeXssAttrs();\n var tempEleValue = this.wrapElement.innerHTML;\n this.removeElement();\n return tempEleValue;\n };\n SanitizeHtmlHelper.removeElement = function () {\n // Removes an element's attibute to avoid html tag validation\n var nodes = this.wrapElement.children;\n for (var j = 0; j < nodes.length; j++) {\n var attribute = nodes[j].attributes;\n for (var i = 0; i < attribute.length; i++) {\n this.wrapElement.children[j].removeAttribute(attribute[i].localName);\n }\n }\n };\n SanitizeHtmlHelper.removeXssTags = function () {\n var elements = this.wrapElement.querySelectorAll(this.removeTags.join(','));\n if (elements.length > 0) {\n elements.forEach(function (element) {\n detach(element);\n });\n }\n else {\n return;\n }\n };\n SanitizeHtmlHelper.removeJsEvents = function () {\n var elements = this.wrapElement.querySelectorAll('[' + jsEvents.join('],[') + ']');\n if (elements.length > 0) {\n elements.forEach(function (element) {\n jsEvents.forEach(function (attr) {\n if (element.hasAttribute(attr)) {\n element.removeAttribute(attr);\n }\n });\n });\n }\n else {\n return;\n }\n };\n SanitizeHtmlHelper.removeXssAttrs = function () {\n var _this = this;\n this.removeAttrs.forEach(function (item, index) {\n var elements = _this.wrapElement.querySelectorAll(item.selector);\n if (elements.length > 0) {\n elements.forEach(function (element) {\n element.removeAttribute(item.attribute);\n });\n }\n });\n };\n return SanitizeHtmlHelper;\n}());\nexport { SanitizeHtmlHelper };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * React Component Base\n */\nimport * as React from 'react';\nimport { extend, isNullOrUndefined, setValue, getValue, isObject } from '@syncfusion/ej2-base';\nvar defaulthtmlkeys = ['alt', 'className', 'disabled', 'form', 'id',\n 'readOnly', 'style', 'tabIndex', 'title', 'type', 'name',\n 'onClick', 'onFocus', 'onBlur'];\nvar delayUpdate = ['accordion', 'tab', 'splitter'];\nvar reactUid = 0;\nvar isColEName = new RegExp('\\]');\n// tslint:disable\nvar ComponentBase = /** @class */ (function (_super) {\n __extends(ComponentBase, _super);\n function ComponentBase() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.attrKeys = [];\n _this.cachedTimeOut = 0;\n _this.isAppendCalled = false;\n _this.initRenderCalled = false;\n _this.isReactForeceUpdate = false;\n _this.isReact = true;\n return _this;\n }\n // Lifecycle methods are changed by React team and so we can deprecate this method and use\n // Reference link:https://reactjs.org/docs/react-component.html#unsafe_componentWillMount\n // tslint:disable-next-line:no-any\n ComponentBase.prototype.componentDidMount = function () {\n this.refreshChild(true);\n this.canDelayUpdate = delayUpdate.indexOf(this.getModuleName()) !== -1;\n // Used timeout to resolve template binding\n // Reference link: https://github.com/facebook/react/issues/10309#issuecomment-318433235\n // tslint:disable-next-line:no-any\n this.renderReactComponent();\n if (this.portals && this.portals.length) {\n this.renderReactTemplates();\n }\n };\n ComponentBase.prototype.renderReactComponent = function () {\n var ele = this.reactElement;\n if (ele) {\n this.isAppendCalled = true;\n this.appendTo(ele);\n }\n };\n // Lifecycle methods are changed by React team and so we can deprecate this method and use\n // Reference link:https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops\n // tslint:disable-next-line:no-any\n /**\n * @private\n */\n ComponentBase.prototype.shouldComponentUpdate = function (nextProps) {\n if (!this.initRenderCalled) {\n this.updateProperties(nextProps, true);\n return true;\n }\n if (!this.isAppendCalled) {\n clearTimeout(this.cachedTimeOut);\n this.isAppendCalled = true;\n this.appendTo(this.reactElement);\n }\n this.updateProperties(nextProps);\n return true;\n };\n /**\n * @private\n */\n ComponentBase.prototype.updateProperties = function (nextProps, silent) {\n var _this = this;\n var dProps = extend({}, nextProps);\n var keys = Object.keys(nextProps);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var propkey = keys_1[_i];\n var isClassName = propkey === 'className';\n if (propkey === 'children') {\n continue;\n }\n if (!isClassName && !isNullOrUndefined(this.htmlattributes[propkey]) &&\n this.htmlattributes[propkey] !== dProps[propkey]) {\n this.htmlattributes[propkey] = dProps[propkey];\n }\n if (this.compareValues(this.props[propkey], nextProps[propkey])) {\n delete dProps[propkey];\n }\n else if (this.attrKeys.indexOf(propkey) !== -1) {\n if (isClassName) {\n this.element.classList.remove(this.props[propkey]);\n this.element.classList.add(dProps[propkey]);\n }\n else if (propkey !== 'disabled') {\n delete dProps[propkey];\n }\n }\n }\n if (dProps['children']) {\n delete dProps['children'];\n }\n // tslint:disable-next-line:no-any\n if (this.initRenderCalled && (this.canDelayUpdate || this.props.delayUpdate)) {\n setTimeout(function () {\n _this.refreshProperties(dProps, nextProps, silent);\n });\n }\n else {\n this.refreshProperties(dProps, nextProps, silent);\n }\n };\n ComponentBase.prototype.refreshProperties = function (dProps, nextProps, silent) {\n if (Object.keys(dProps).length) {\n if (!silent) {\n // tslint:disable-next-line:no-any\n this.processComplexTemplate(dProps, this);\n }\n this.setProperties(dProps, silent);\n }\n this.refreshChild(silent, nextProps);\n };\n ComponentBase.prototype.processComplexTemplate = function (curObject, context) {\n var compTemplate = context.complexTemplate;\n if (compTemplate) {\n for (var prop in compTemplate) {\n var PropVal = compTemplate[prop];\n if (curObject[prop]) {\n setValue(PropVal, getValue(prop, curObject), curObject);\n }\n }\n }\n };\n ComponentBase.prototype.getDefaultAttributes = function () {\n var _this = this;\n this.isReact = true;\n var propKeys = Object.keys(this.props);\n if (!this.htmlattributes) {\n this.htmlattributes = {};\n }\n this.attrKeys = defaulthtmlkeys.concat(this.controlAttributes || []);\n for (var _i = 0, propKeys_1 = propKeys; _i < propKeys_1.length; _i++) {\n var prop = propKeys_1[_i];\n if (prop.indexOf('data-') !== -1 || prop.indexOf('aria-') !== -1 || this.attrKeys.indexOf(prop) !== -1) {\n if (this.htmlattributes[prop] !== this.props[prop]) {\n this.htmlattributes[prop] = this.props[prop];\n }\n }\n }\n if (!this.htmlattributes.ref) {\n /* tslint:disable:no-any */\n this.htmlattributes.ref = function (ele) {\n _this.reactElement = ele;\n };\n var keycompoentns = ['autocomplete', 'combobox', 'dropdownlist', 'dropdowntree', 'multiselect',\n 'listbox', 'colorpicker', 'numerictextbox', 'textbox',\n 'uploader', 'maskedtextbox', 'slider', 'datepicker', 'datetimepicker', 'daterangepicker', 'timepicker', 'checkbox', 'switch'];\n if (keycompoentns.indexOf(this.getModuleName()) !== -1) {\n this.htmlattributes.key = '' + ComponentBase.reactUid;\n ComponentBase.reactUid++;\n }\n }\n return this.htmlattributes;\n };\n /* tslint:disable:no-any */\n ComponentBase.prototype.trigger = function (eventName, eventProp, successHandler) {\n var _this = this;\n if (this.isDestroyed !== true && this.modelObserver) {\n if (isColEName.test(eventName)) {\n var handler = getValue(eventName, this);\n if (handler) {\n handler.call(this, eventProp);\n if (successHandler) {\n successHandler.call(this, eventProp);\n }\n }\n else if (successHandler) {\n successHandler.call(this, eventProp);\n }\n }\n if ((eventName === 'change' || eventName === 'input')) {\n if (this.props.onChange && eventProp.event) {\n this.props.onChange.call(undefined, {\n syntheticEvent: eventProp.event,\n nativeEvent: { text: eventProp.value },\n value: eventProp.value,\n target: this\n });\n }\n }\n var prevDetection = this.isProtectedOnChange;\n this.isProtectedOnChange = false;\n if (eventName === 'created') {\n setTimeout(function () {\n if (!_this.isDestroyed) {\n _this.modelObserver.notify(eventName, eventProp, successHandler);\n }\n });\n }\n else {\n this.modelObserver.notify(eventName, eventProp, successHandler);\n }\n this.isProtectedOnChange = prevDetection;\n }\n };\n ComponentBase.prototype.compareValues = function (value1, value2) {\n var typeVal = typeof value1;\n var typeVal2 = typeof value2;\n if (typeVal === typeVal2) {\n if (value1 === value2) {\n return true;\n }\n if ((!isNullOrUndefined(value1) && value1.constructor) !== (!isNullOrUndefined(value2) && value2.constructor)) {\n return false;\n }\n if (value1 instanceof Date ||\n value1 instanceof RegExp ||\n value1 instanceof String ||\n value1 instanceof Number) {\n return value1.toString() === value2.toString();\n }\n if (isObject(value1) || Array.isArray(value1)) {\n var tempVal = value1;\n var tempVal2 = value2;\n if (isObject(tempVal)) {\n tempVal = [value1];\n tempVal2 = [value2];\n }\n return this.compareObjects(tempVal, tempVal2).status;\n }\n }\n return false;\n };\n ComponentBase.prototype.compareObjects = function (oldProps, newProps, propName) {\n var status = true;\n var lenSimilarity = (oldProps.length === newProps.length);\n var diffArray = [];\n if (lenSimilarity) {\n for (var i = 0, len = newProps.length; i < len; i++) {\n var curObj = {};\n var oldProp = oldProps[i];\n var newProp = newProps[i];\n var keys = Object.keys(newProp);\n for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {\n var key = keys_2[_i];\n var oldValue = oldProp[key];\n var newValue = newProp[key];\n if (!oldProp.hasOwnProperty(key) || !this.compareValues(newValue, oldValue)) {\n if (!propName) {\n return { status: false };\n }\n status = false;\n curObj[key] = newValue;\n }\n }\n if (Object.keys(curObj).length) {\n diffArray.push({ index: i, value: curObj, key: propName });\n }\n }\n }\n else {\n status = false;\n }\n return { status: status, changedProperties: diffArray };\n };\n ComponentBase.prototype.refreshChild = function (silent, props) {\n if (this.checkInjectedModules) {\n var prevModule = this.getInjectedModules() || [];\n var curModule = this.getInjectedServices() || [];\n for (var _i = 0, curModule_1 = curModule; _i < curModule_1.length; _i++) {\n var mod = curModule_1[_i];\n if (prevModule.indexOf(mod) === -1) {\n prevModule.push(mod);\n }\n }\n this.injectedModules = prevModule;\n }\n if (this.directivekeys) {\n var changedProps = [];\n var directiveValue = this.validateChildren({}, this.directivekeys, (props || this.props));\n if (directiveValue && Object.keys(directiveValue).length) {\n if (!silent && this.skipRefresh) {\n for (var _a = 0, _b = this.skipRefresh; _a < _b.length; _a++) {\n var fields = _b[_a];\n delete directiveValue[fields];\n }\n }\n if (this.prevProperties) {\n var dKeys = Object.keys(this.prevProperties);\n for (var i = 0; i < dKeys.length; i++) {\n var key = dKeys[i];\n if (!directiveValue.hasOwnProperty(key)) {\n continue;\n }\n var compareOutput = this.compareObjects(this.prevProperties[key], directiveValue[key], key);\n if (compareOutput.status) {\n delete directiveValue[key];\n }\n else {\n if (compareOutput.changedProperties.length) {\n changedProps = changedProps.concat(compareOutput.changedProperties);\n }\n var obj = {};\n obj[key] = directiveValue[key];\n this.prevProperties = extend(this.prevProperties, obj);\n }\n }\n }\n else {\n this.prevProperties = extend({}, directiveValue, {}, true);\n }\n if (changedProps.length) {\n for (var _c = 0, changedProps_1 = changedProps; _c < changedProps_1.length; _c++) {\n var changes = changedProps_1[_c];\n var propInstance = getValue(changes.key + '.' + changes.index, this);\n if (propInstance && propInstance.setProperties) {\n propInstance.setProperties(changes.value);\n }\n else {\n extend(propInstance, changes.value);\n }\n }\n }\n else {\n this.setProperties(directiveValue, silent);\n }\n }\n }\n };\n ComponentBase.prototype.componentWillUnmount = function () {\n clearTimeout(this.cachedTimeOut);\n // tslint:disable-next-line:no-any\n if (this.initRenderCalled && this.isAppendCalled && this.element && document.body.contains(this.element) && !this.isDestroyed) {\n this.destroy();\n }\n };\n // tslint:disable:no-any \n ComponentBase.prototype.renderReactTemplates = function (callback) {\n this.isReactForeceUpdate = true;\n if (callback) {\n this.forceUpdate(callback);\n }\n else {\n this.forceUpdate();\n }\n this.isReactForeceUpdate = false;\n };\n ;\n // tslint:disable:no-any \n ComponentBase.prototype.clearTemplate = function (templateNames, index, callback) {\n var _this = this;\n var tempPortal = [];\n if (templateNames && templateNames.length) {\n Array.prototype.forEach.call(templateNames, function (propName) {\n var indexCount = 0;\n var propIndexCount = 0;\n _this.portals.forEach(function (portal) {\n if (portal.propName === propName) {\n tempPortal.push(propIndexCount);\n propIndexCount++;\n }\n });\n if (index && _this.portals[tempPortal[index[indexCount]]].propName == propName) {\n _this.portals.splice(index, 1);\n indexCount++;\n }\n else {\n for (var i = 0; i < _this.portals.length; i++) {\n if (_this.portals[i].propName == propName) {\n _this.portals.splice(i, 1);\n i--;\n }\n }\n }\n });\n }\n else {\n this.portals = [];\n }\n this.renderReactTemplates(callback);\n };\n ;\n /* tslint:disable:no-any */\n ComponentBase.prototype.validateChildren = function (childCache, mapper, props) {\n var flag = false;\n var childs = React.Children.toArray(props.children);\n for (var _i = 0, childs_1 = childs; _i < childs_1.length; _i++) {\n var child = childs_1[_i];\n var ifield = this.getChildType(child);\n var key = mapper[ifield];\n if (ifield && mapper) {\n // tslint:disable\n var childProps = this.getChildProps(React.Children.toArray(child.props.children), key);\n if (childProps.length) {\n flag = true;\n // tslint:disable\n childCache[child.type.propertyName || ifield] = childProps;\n }\n }\n }\n if (flag) {\n return childCache;\n }\n return null;\n };\n // tslint:disable:no-any\n ComponentBase.prototype.getChildType = function (child) {\n if (child.type && child.type.isDirective) {\n return child.type.moduleName || '';\n }\n return '';\n };\n ComponentBase.prototype.getChildProps = function (subChild, matcher) {\n var ret = [];\n for (var _i = 0, subChild_1 = subChild; _i < subChild_1.length; _i++) {\n var child = subChild_1[_i];\n var accessProp = false;\n var key = void 0;\n if (typeof matcher === 'string') {\n accessProp = true;\n key = matcher;\n }\n else {\n key = Object.keys(matcher)[0];\n }\n var prop = child.props;\n // tslint:disable-next-line:no-any\n var field = this.getChildType(child);\n if (field === key) {\n if (accessProp || !prop.children) {\n // tslint:disable\n var cacheVal = extend({}, prop, {}, true);\n // tslint:disable\n this.processComplexTemplate(cacheVal, child.type);\n ret.push(cacheVal);\n }\n else {\n var cachedValue = this.validateChildren(extend({}, prop), matcher[key], prop) || prop;\n if (cachedValue['children']) {\n delete cachedValue['children'];\n }\n // tslint:disable\n this.processComplexTemplate(cachedValue, child.type);\n ret.push(cachedValue);\n }\n }\n }\n return ret;\n };\n // tslint:disable:no-any\n ComponentBase.prototype.getInjectedServices = function () {\n var childs = React.Children.toArray(this.props.children);\n for (var _i = 0, childs_2 = childs; _i < childs_2.length; _i++) {\n var child = childs_2[_i];\n /* tslint:disable:no-any */\n if (child.type.isService) {\n return child.props.services;\n }\n }\n return [];\n };\n /**\n * @private\n */\n ComponentBase.reactUid = 1;\n return ComponentBase;\n}(React.Component));\nexport { ComponentBase };\n/* tslint:enable:no-any */\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport * as React from 'react';\n/**\n * Directory base\n */\nvar ComplexBase = /** @class */ (function (_super) {\n __extends(ComplexBase, _super);\n function ComplexBase() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n ComplexBase.prototype.render = function () {\n return null;\n };\n ComplexBase.isDirective = true;\n return ComplexBase;\n}(React.PureComponent));\nexport { ComplexBase };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\n/**\n * Dependency injection\n */\nimport * as React from 'react';\nvar Inject = /** @class */ (function (_super) {\n __extends(Inject, _super);\n function Inject() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n // tslint:disable-next-line:no-any\n Inject.prototype.render = function () {\n return null;\n };\n Inject.isService = true;\n return Inject;\n}(React.PureComponent));\nexport { Inject };\n","/**\n * Template compiler for react\n */\nimport { setTemplateEngine, getTemplateEngine, detach, extend } from '@syncfusion/ej2-base';\nimport * as ReactDOM from 'react-dom';\nimport * as React from 'react';\n// tslint:disable:no-any\nvar stringCompiler = getTemplateEngine();\nexport function compile(templateElement, helper) {\n if (typeof templateElement === 'string') {\n return stringCompiler(templateElement, helper);\n }\n else {\n return function (data, component, prop, element) {\n var actTemplate = templateElement;\n var actData = data;\n if (typeof actTemplate === 'object') {\n actTemplate = templateElement.template;\n actData = extend({}, data, templateElement.data || {});\n }\n var cEle;\n if (element) {\n cEle = element;\n }\n else {\n cEle = document.createElement('div');\n }\n if (component && component.isLegacyTemplate) {\n ReactDOM.render(actTemplate(actData), cEle);\n if (!element) {\n detach(cEle);\n }\n }\n else {\n var rele = React.createElement(actTemplate, actData);\n var portal = ReactDOM.createPortal(rele, cEle);\n portal.propName = prop;\n if (!component.portals) {\n component.portals = [portal];\n }\n else {\n component.portals.push(portal);\n }\n }\n if (!element) {\n return [cEle];\n }\n };\n }\n}\nsetTemplateEngine({ compile: compile });\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport * as React from 'react';\nimport { Toast } from '@syncfusion/ej2-notifications';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * Represents the React Toast Component\n * ```html\n * \n * ```\n */\nvar DropDownListComponent = /** @class */ (function (_super) {\n __extends(DropDownListComponent, _super);\n function DropDownListComponent(props) {\n var _this = _super.call(this, props) || this;\n _this.initRenderCalled = false;\n _this.checkInjectedModules = false;\n _this.immediateRender = false;\n _this.portals = [];\n return _this;\n }\n DropDownListComponent.prototype.render = function () {\n if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {\n _super.prototype.render.call(this);\n this.initRenderCalled = true;\n }\n else {\n return React.createElement(React.Fragment, null, [].concat(React.createElement(\"input\", this.getDefaultAttributes()), this.portals));\n }\n };\n return DropDownListComponent;\n}(DropDownList));\nexport { DropDownListComponent };\napplyMixins(DropDownListComponent, [ComponentBase, React.Component]);\n","/**\n * Position library\n */\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nvar elementRect;\nvar popupRect;\nvar element;\nvar parentDocument;\nvar fixedParent = false;\nexport function calculateRelativeBasedPosition(anchor, element) {\n var fixedElement = false;\n var anchorPos = { left: 0, top: 0 };\n var tempAnchor = anchor;\n if (!anchor || !element) {\n return anchorPos;\n }\n if (isNullOrUndefined(element.offsetParent) && element.style.position === 'fixed') {\n fixedElement = true;\n }\n while ((element.offsetParent || fixedElement) && anchor && element.offsetParent !== anchor) {\n anchorPos.left += anchor.offsetLeft;\n anchorPos.top += anchor.offsetTop;\n anchor = anchor.offsetParent;\n }\n anchor = tempAnchor;\n while ((element.offsetParent || fixedElement) && anchor && element.offsetParent !== anchor) {\n anchorPos.left -= anchor.scrollLeft;\n anchorPos.top -= anchor.scrollTop;\n anchor = anchor.parentElement;\n }\n return anchorPos;\n}\nexport function calculatePosition(currentElement, positionX, positionY, parentElement, targetValues) {\n (positionY + positionX === 'topright') ? popupRect = undefined : popupRect = targetValues;\n popupRect = targetValues;\n fixedParent = parentElement ? true : false;\n if (!currentElement) {\n return { left: 0, top: 0 };\n }\n if (!positionX) {\n positionX = 'left';\n }\n if (!positionY) {\n positionY = 'top';\n }\n parentDocument = currentElement.ownerDocument;\n element = currentElement;\n var pos = { left: 0, top: 0 };\n return updatePosition(positionX.toLowerCase(), positionY.toLowerCase(), pos);\n}\nfunction setPosx(value, pos) {\n pos.left = value;\n}\nfunction setPosy(value, pos) {\n pos.top = value;\n}\nfunction updatePosition(posX, posY, pos) {\n elementRect = element.getBoundingClientRect();\n switch (posY + posX) {\n case 'topcenter':\n setPosx(getElementHCenter(), pos);\n setPosy(getElementTop(), pos);\n break;\n case 'topright':\n setPosx(getElementRight(), pos);\n setPosy(getElementTop(), pos);\n break;\n case 'centercenter':\n setPosx(getElementHCenter(), pos);\n setPosy(getElementVCenter(), pos);\n break;\n case 'centerright':\n setPosx(getElementRight(), pos);\n setPosy(getElementVCenter(), pos);\n break;\n case 'centerleft':\n setPosx(getElementLeft(), pos);\n setPosy(getElementVCenter(), pos);\n break;\n case 'bottomcenter':\n setPosx(getElementHCenter(), pos);\n setPosy(getElementBottom(), pos);\n break;\n case 'bottomright':\n setPosx(getElementRight(), pos);\n setPosy(getElementBottom(), pos);\n break;\n case 'bottomleft':\n setPosx(getElementLeft(), pos);\n setPosy(getElementBottom(), pos);\n break;\n default:\n case 'topleft':\n setPosx(getElementLeft(), pos);\n setPosy(getElementTop(), pos);\n break;\n }\n return pos;\n}\nfunction getBodyScrollTop() {\n return parentDocument.documentElement.scrollTop || parentDocument.body.scrollTop;\n}\nfunction getBodyScrollLeft() {\n return parentDocument.documentElement.scrollLeft || parentDocument.body.scrollLeft;\n}\nfunction getElementBottom() {\n return fixedParent ? elementRect.bottom : elementRect.bottom + getBodyScrollTop();\n}\nfunction getElementVCenter() {\n return getElementTop() + (elementRect.height / 2);\n}\nfunction getElementTop() {\n return fixedParent ? elementRect.top : elementRect.top + getBodyScrollTop();\n}\nfunction getElementLeft() {\n return elementRect.left + getBodyScrollLeft();\n}\nfunction getElementRight() {\n return elementRect.right + getBodyScrollLeft() - (popupRect ? popupRect.width : 0);\n}\nfunction getElementHCenter() {\n return getElementLeft() + (elementRect.width / 2);\n}\n","/**\n * Collision module.\n */\nimport { calculatePosition } from './position';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nvar parentDocument;\nvar targetContainer;\nexport function fit(element, viewPortElement, axis, position) {\n if (viewPortElement === void 0) { viewPortElement = null; }\n if (axis === void 0) { axis = { X: false, Y: false }; }\n if (!axis.Y && !axis.X) {\n return { left: 0, top: 0 };\n }\n var elemData = element.getBoundingClientRect();\n targetContainer = viewPortElement;\n parentDocument = element.ownerDocument;\n if (!position) {\n position = calculatePosition(element, 'left', 'top');\n }\n if (axis.X) {\n var containerWidth = targetContainer ? getTargetContainerWidth() : getViewPortWidth();\n var containerLeft = ContainerLeft();\n var containerRight = ContainerRight();\n var overLeft = containerLeft - position.left;\n var overRight = position.left + elemData.width - containerRight;\n if (elemData.width > containerWidth) {\n if (overLeft > 0 && overRight <= 0) {\n position.left = containerRight - elemData.width;\n }\n else if (overRight > 0 && overLeft <= 0) {\n position.left = containerLeft;\n }\n else {\n position.left = overLeft > overRight ? (containerRight - elemData.width) : containerLeft;\n }\n }\n else if (overLeft > 0) {\n position.left += overLeft;\n }\n else if (overRight > 0) {\n position.left -= overRight;\n }\n }\n if (axis.Y) {\n var containerHeight = targetContainer ? getTargetContainerHeight() : getViewPortHeight();\n var containerTop = ContainerTop();\n var containerBottom = ContainerBottom();\n var overTop = containerTop - position.top;\n var overBottom = position.top + elemData.height - containerBottom;\n if (elemData.height > containerHeight) {\n if (overTop > 0 && overBottom <= 0) {\n position.top = containerBottom - elemData.height;\n }\n else if (overBottom > 0 && overTop <= 0) {\n position.top = containerTop;\n }\n else {\n position.top = overTop > overBottom ? (containerBottom - elemData.height) : containerTop;\n }\n }\n else if (overTop > 0) {\n position.top += overTop;\n }\n else if (overBottom > 0) {\n position.top -= overBottom;\n }\n }\n return position;\n}\nexport function isCollide(element, viewPortElement, x, y) {\n if (viewPortElement === void 0) { viewPortElement = null; }\n var elemOffset = calculatePosition(element, 'left', 'top');\n if (x) {\n elemOffset.left = x;\n }\n if (y) {\n elemOffset.top = y;\n }\n var data = [];\n targetContainer = viewPortElement;\n parentDocument = element.ownerDocument;\n var elementRect = element.getBoundingClientRect();\n var top = elemOffset.top;\n var left = elemOffset.left;\n var right = elemOffset.left + elementRect.width;\n var bottom = elemOffset.top + elementRect.height;\n var topData = '';\n var leftData = '';\n var yAxis = topCollideCheck(top, bottom);\n var xAxis = leftCollideCheck(left, right);\n if (yAxis.topSide) {\n data.push('top');\n }\n if (xAxis.rightSide) {\n data.push('right');\n }\n if (xAxis.leftSide) {\n data.push('left');\n }\n if (yAxis.bottomSide) {\n data.push('bottom');\n }\n return data;\n}\nexport function flip(element, target, offsetX, offsetY, positionX, positionY, viewPortElement, axis, fixedParent) {\n if (viewPortElement === void 0) { viewPortElement = null; }\n if (axis === void 0) { axis = { X: true, Y: true }; }\n if (!target || !element || !positionX || !positionY || (!axis.X && !axis.Y)) {\n return;\n }\n var tEdge = { TL: null,\n TR: null,\n BL: null,\n BR: null };\n var eEdge = {\n TL: null,\n TR: null,\n BL: null,\n BR: null\n };\n var oldVisibility = element.style.visibility;\n element.style.visibility = 'hidden';\n element.style.display = 'block';\n var elementRect = element.getBoundingClientRect();\n element.style.removeProperty('display');\n element.style.visibility = oldVisibility;\n var pos = {\n posX: positionX, posY: positionY, offsetX: offsetX, offsetY: offsetY, position: { left: 0, top: 0 }\n };\n targetContainer = viewPortElement;\n parentDocument = target.ownerDocument;\n updateElementData(target, tEdge, pos, fixedParent, elementRect);\n setPosition(eEdge, pos, elementRect);\n if (axis.X) {\n leftFlip(target, eEdge, tEdge, pos, elementRect, true);\n }\n if (axis.Y && tEdge.TL.top > -1) {\n topFlip(target, eEdge, tEdge, pos, elementRect, true);\n }\n setPopup(element, pos, elementRect);\n}\nfunction setPopup(element, pos, elementRect) {\n var left = 0;\n var top = 0;\n if (element.offsetParent != null\n && (getComputedStyle(element.offsetParent).position === 'absolute' ||\n getComputedStyle(element.offsetParent).position === 'relative')) {\n var data = calculatePosition(element.offsetParent, 'left', 'top', false, elementRect);\n left = data.left;\n top = data.top;\n }\n element.style.top = (pos.position.top + pos.offsetY - (top)) + 'px';\n element.style.left = (pos.position.left + pos.offsetX - (left)) + 'px';\n}\nfunction updateElementData(target, edge, pos, fixedParent, elementRect) {\n pos.position = calculatePosition(target, pos.posX, pos.posY, fixedParent, elementRect);\n edge.TL = calculatePosition(target, 'left', 'top', fixedParent, elementRect);\n edge.TR = calculatePosition(target, 'right', 'top', fixedParent, elementRect);\n edge.BR = calculatePosition(target, 'left', 'bottom', fixedParent, elementRect);\n edge.BL = calculatePosition(target, 'right', 'bottom', fixedParent, elementRect);\n}\nfunction setPosition(eStatus, pos, elementRect) {\n eStatus.TL = { top: pos.position.top + pos.offsetY, left: pos.position.left + pos.offsetX };\n eStatus.TR = { top: eStatus.TL.top, left: eStatus.TL.left + elementRect.width };\n eStatus.BL = { top: eStatus.TL.top + elementRect.height,\n left: eStatus.TL.left };\n eStatus.BR = { top: eStatus.TL.top + elementRect.height,\n left: eStatus.TL.left + elementRect.width };\n}\nfunction leftCollideCheck(left, right) {\n var leftSide = false;\n var rightSide = false;\n if (((left - getBodyScrollLeft()) < ContainerLeft())) {\n leftSide = true;\n }\n if (right > ContainerRight()) {\n rightSide = true;\n }\n return { leftSide: leftSide, rightSide: rightSide };\n}\nfunction leftFlip(target, edge, tEdge, pos, elementRect, deepCheck) {\n var collideSide = leftCollideCheck(edge.TL.left, edge.TR.left);\n if ((tEdge.TL.left - getBodyScrollLeft()) <= ContainerLeft()) {\n collideSide.leftSide = false;\n }\n if (tEdge.TR.left >= ContainerRight()) {\n collideSide.rightSide = false;\n }\n if ((collideSide.leftSide && !collideSide.rightSide) || (!collideSide.leftSide && collideSide.rightSide)) {\n if (pos.posX === 'right') {\n pos.posX = 'left';\n }\n else {\n pos.posX = 'right';\n }\n pos.offsetX = pos.offsetX + elementRect.width;\n pos.offsetX = -1 * pos.offsetX;\n pos.position = calculatePosition(target, pos.posX, pos.posY, false);\n setPosition(edge, pos, elementRect);\n if (deepCheck) {\n leftFlip(target, edge, tEdge, pos, elementRect, false);\n }\n }\n}\nfunction topFlip(target, edge, tEdge, pos, elementRect, deepCheck) {\n var collideSide = topCollideCheck(edge.TL.top, edge.BL.top);\n if ((tEdge.TL.top - getBodyScrollTop()) <= ContainerTop()) {\n collideSide.topSide = false;\n }\n if (tEdge.BL.top >= ContainerBottom() && target.getBoundingClientRect().bottom < window.innerHeight) {\n collideSide.bottomSide = false;\n }\n if ((collideSide.topSide && !collideSide.bottomSide) || (!collideSide.topSide && collideSide.bottomSide)) {\n if (pos.posY === 'top') {\n pos.posY = 'bottom';\n }\n else {\n pos.posY = 'top';\n }\n pos.offsetY = pos.offsetY + elementRect.height;\n pos.offsetY = -1 * pos.offsetY;\n pos.position = calculatePosition(target, pos.posX, pos.posY, false, elementRect);\n setPosition(edge, pos, elementRect);\n if (deepCheck) {\n topFlip(target, edge, tEdge, pos, elementRect, false);\n }\n }\n}\nfunction topCollideCheck(top, bottom) {\n var topSide = false;\n var bottomSide = false;\n if ((top - getBodyScrollTop()) < ContainerTop()) {\n topSide = true;\n }\n if (bottom > ContainerBottom()) {\n bottomSide = true;\n }\n return { topSide: topSide, bottomSide: bottomSide };\n}\nfunction getTargetContainerWidth() {\n return targetContainer.getBoundingClientRect().width;\n}\nfunction getTargetContainerHeight() {\n return targetContainer.getBoundingClientRect().height;\n}\nfunction getTargetContainerLeft() {\n return targetContainer.getBoundingClientRect().left;\n}\nfunction getTargetContainerTop() {\n return targetContainer.getBoundingClientRect().top;\n}\nfunction ContainerTop() {\n if (targetContainer) {\n return getTargetContainerTop();\n }\n return 0;\n}\nfunction ContainerLeft() {\n if (targetContainer) {\n return getTargetContainerLeft();\n }\n return 0;\n}\nfunction ContainerRight() {\n if (targetContainer) {\n return (getBodyScrollLeft() + getTargetContainerLeft() + getTargetContainerWidth());\n }\n return (getBodyScrollLeft() + getViewPortWidth());\n}\nfunction ContainerBottom() {\n if (targetContainer) {\n return (getBodyScrollTop() + getTargetContainerTop() + getTargetContainerHeight());\n }\n return (getBodyScrollTop() + getViewPortHeight());\n}\nfunction getBodyScrollTop() {\n // if(targetContainer)\n // return targetContainer.scrollTop;\n return parentDocument.documentElement.scrollTop || parentDocument.body.scrollTop;\n}\nfunction getBodyScrollLeft() {\n // if(targetContainer)\n // return targetContainer.scrollLeft;\n return parentDocument.documentElement.scrollLeft || parentDocument.body.scrollLeft;\n}\nfunction getViewPortHeight() {\n return window.innerHeight;\n}\nfunction getViewPortWidth() {\n var windowWidth = window.innerWidth;\n var offsetWidth = (isNullOrUndefined(document.documentElement)) ? 0 : document.documentElement.offsetWidth;\n return windowWidth - (windowWidth - offsetWidth);\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { setStyleAttribute, addClass, removeClass, ChildProperty, Complex } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base';\nimport { Browser } from '@syncfusion/ej2-base';\nimport { calculatePosition, calculateRelativeBasedPosition } from '../common/position';\nimport { Animation, Property, Event, Component } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { EventHandler } from '@syncfusion/ej2-base';\nimport { flip, fit, isCollide } from '../common/collision';\n/**\n * Specifies the offset position values.\n */\nvar PositionData = /** @class */ (function (_super) {\n __extends(PositionData, _super);\n function PositionData() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('left')\n ], PositionData.prototype, \"X\", void 0);\n __decorate([\n Property('top')\n ], PositionData.prototype, \"Y\", void 0);\n return PositionData;\n}(ChildProperty));\nexport { PositionData };\n// don't use space in classNames\nvar CLASSNAMES = {\n ROOT: 'e-popup',\n RTL: 'e-rtl',\n OPEN: 'e-popup-open',\n CLOSE: 'e-popup-close'\n};\n/**\n * Represents the Popup Component\n * ```html\n *
Draggable
\n * \n * ```\n */\nvar Draggable = /** @class */ (function (_super) {\n __extends(Draggable, _super);\n function Draggable(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.dragLimit = Draggable_1.getDefaultPosition();\n _this.borderWidth = Draggable_1.getDefaultPosition();\n _this.padding = Draggable_1.getDefaultPosition();\n _this.diffX = 0;\n _this.prevLeft = 0;\n _this.prevTop = 0;\n _this.dragProcessStarted = false;\n /* tslint:disable no-any */\n _this.tapHoldTimer = 0;\n _this.externalInitialize = false;\n _this.diffY = 0;\n _this.parentScrollX = 0;\n _this.parentScrollY = 0;\n _this.droppables = {};\n _this.bind();\n return _this;\n }\n Draggable_1 = Draggable;\n Draggable.prototype.bind = function () {\n this.toggleEvents();\n if (Browser.isIE) {\n addClass([this.element], 'e-block-touch');\n }\n this.droppables[this.scope] = {};\n };\n Draggable.getDefaultPosition = function () {\n return extend({}, defaultPosition);\n };\n Draggable.prototype.toggleEvents = function (isUnWire) {\n var ele;\n if (!isUndefined(this.handle)) {\n ele = select(this.handle, this.element);\n }\n var handler = (this.enableTapHold && Browser.isDevice && Browser.isTouch) ? this.mobileInitialize : this.initialize;\n if (isUnWire) {\n EventHandler.remove(ele || this.element, Browser.touchStartEvent, handler);\n }\n else {\n EventHandler.add(ele || this.element, Browser.touchStartEvent, handler, this);\n }\n };\n /* istanbul ignore next */\n Draggable.prototype.mobileInitialize = function (evt) {\n var _this = this;\n var target = evt.currentTarget;\n this.tapHoldTimer = setTimeout(function () {\n _this.externalInitialize = true;\n _this.removeTapholdTimer();\n _this.initialize(evt, target);\n }, this.tapHoldThreshold);\n EventHandler.add(document, Browser.touchMoveEvent, this.removeTapholdTimer, this);\n EventHandler.add(document, Browser.touchEndEvent, this.removeTapholdTimer, this);\n };\n /* istanbul ignore next */\n Draggable.prototype.removeTapholdTimer = function () {\n clearTimeout(this.tapHoldTimer);\n EventHandler.remove(document, Browser.touchMoveEvent, this.removeTapholdTimer);\n EventHandler.remove(document, Browser.touchEndEvent, this.removeTapholdTimer);\n };\n /* istanbul ignore next */\n Draggable.prototype.getScrollableParent = function (element, axis) {\n var scroll = { 'vertical': 'scrollHeight', 'horizontal': 'scrollWidth' };\n var client = { 'vertical': 'clientHeight', 'horizontal': 'clientWidth' };\n if (isNullOrUndefined(element)) {\n return null;\n }\n if (element[scroll[axis]] > element[client[axis]]) {\n if (axis === 'vertical' ? element.scrollTop > 0 : element.scrollLeft > 0) {\n if (axis === 'vertical') {\n this.parentScrollY = this.parentScrollY +\n (this.parentScrollY === 0 ? element.scrollTop : element.scrollTop - this.parentScrollY);\n this.tempScrollHeight = element.scrollHeight;\n }\n else {\n this.parentScrollX = this.parentScrollX +\n (this.parentScrollX === 0 ? element.scrollLeft : element.scrollLeft - this.parentScrollX);\n this.tempScrollWidth = element.scrollWidth;\n }\n if (!isNullOrUndefined(element)) {\n return this.getScrollableParent(element.parentNode, axis);\n }\n else {\n return element;\n }\n }\n else {\n return this.getScrollableParent(element.parentNode, axis);\n }\n }\n else {\n return this.getScrollableParent(element.parentNode, axis);\n }\n };\n Draggable.prototype.getScrollableValues = function () {\n this.parentScrollX = 0;\n this.parentScrollY = 0;\n var isModalDialog = this.element.classList.contains('e-dialog') && this.element.classList.contains('e-dlg-modal');\n var verticalScrollParent = this.getScrollableParent(this.element.parentNode, 'vertical');\n var horizontalScrollParent = this.getScrollableParent(this.element.parentNode, 'horizontal');\n };\n Draggable.prototype.initialize = function (evt, curTarget) {\n this.currentStateTarget = evt.target;\n if (this.isDragStarted()) {\n return;\n }\n else {\n this.isDragStarted(true);\n this.externalInitialize = false;\n }\n this.target = (evt.currentTarget || curTarget);\n this.dragProcessStarted = false;\n if (this.abort) {\n /* tslint:disable no-any */\n var abortSelectors = this.abort;\n if (typeof abortSelectors === 'string') {\n abortSelectors = [abortSelectors];\n }\n for (var i = 0; i < abortSelectors.length; i++) {\n if (!isNullOrUndefined(closest(evt.target, abortSelectors[i]))) {\n /* istanbul ignore next */\n if (this.isDragStarted()) {\n this.isDragStarted(true);\n }\n return;\n }\n }\n }\n if (this.preventDefault && !isUndefined(evt.changedTouches) && evt.type !== 'touchstart') {\n evt.preventDefault();\n }\n this.element.setAttribute('aria-grabbed', 'true');\n var intCoord = this.getCoordinates(evt);\n this.initialPosition = { x: intCoord.pageX, y: intCoord.pageY };\n if (!this.clone) {\n var pos = this.element.getBoundingClientRect();\n this.getScrollableValues();\n if (evt.clientX === evt.pageX) {\n this.parentScrollX = 0;\n }\n if (evt.clientY === evt.pageY) {\n this.parentScrollY = 0;\n }\n this.relativeXPosition = intCoord.pageX - (pos.left + this.parentScrollX);\n this.relativeYPosition = intCoord.pageY - (pos.top + this.parentScrollY);\n }\n if (this.externalInitialize) {\n this.intDragStart(evt);\n }\n else {\n EventHandler.add(document, Browser.touchMoveEvent, this.intDragStart, this);\n EventHandler.add(document, Browser.touchEndEvent, this.intDestroy, this);\n }\n this.toggleEvents(true);\n if (evt.type !== 'touchstart' && this.isPreventSelect) {\n document.body.classList.add('e-prevent-select');\n }\n this.externalInitialize = false;\n EventHandler.trigger(document.documentElement, Browser.touchStartEvent, evt);\n };\n Draggable.prototype.intDragStart = function (evt) {\n this.removeTapholdTimer();\n var isChangeTouch = !isUndefined(evt.changedTouches);\n if (isChangeTouch && (evt.changedTouches.length !== 1)) {\n return;\n }\n if (isChangeTouch) {\n evt.preventDefault();\n }\n var intCordinate = this.getCoordinates(evt);\n var pos;\n var styleProp = getComputedStyle(this.element);\n this.margin = {\n left: parseInt(styleProp.marginLeft, 10),\n top: parseInt(styleProp.marginTop, 10),\n right: parseInt(styleProp.marginRight, 10),\n bottom: parseInt(styleProp.marginBottom, 10),\n };\n var element = this.element;\n if (this.clone && this.dragTarget) {\n var intClosest = closest(evt.target, this.dragTarget);\n if (!isNullOrUndefined(intClosest)) {\n element = intClosest;\n }\n }\n /* istanbul ignore next */\n if (this.isReplaceDragEle) {\n element = this.currentStateCheck(evt.target, element);\n }\n this.offset = this.calculateParentPosition(element);\n this.position = this.getMousePosition(evt, this.isDragScroll);\n var x = this.initialPosition.x - intCordinate.pageX;\n var y = this.initialPosition.y - intCordinate.pageY;\n var distance = Math.sqrt((x * x) + (y * y));\n if ((distance >= this.distance || this.externalInitialize)) {\n var ele = this.getHelperElement(evt);\n if (!ele || isNullOrUndefined(ele)) {\n return;\n }\n var dragTargetElement = this.helperElement = ele;\n this.parentClientRect = this.calculateParentPosition(dragTargetElement.offsetParent);\n if (this.dragStart) {\n var curTarget = this.getProperTargetElement(evt);\n var args = {\n event: evt,\n element: element,\n target: curTarget,\n bindEvents: isBlazor() ? this.bindDragEvents.bind(this) : null,\n dragElement: dragTargetElement\n };\n this.trigger('dragStart', args);\n }\n if (this.dragArea) {\n this.setDragArea();\n }\n else {\n this.dragLimit = { left: 0, right: 0, bottom: 0, top: 0 };\n this.borderWidth = { top: 0, left: 0 };\n }\n pos = { left: this.position.left - this.parentClientRect.left, top: this.position.top - this.parentClientRect.top };\n if (this.clone && !this.enableTailMode) {\n this.diffX = this.position.left - this.offset.left;\n this.diffY = this.position.top - this.offset.top;\n }\n this.getScrollableValues();\n // when drag element has margin-top\n var styles = getComputedStyle(element);\n var marginTop = parseFloat(styles.marginTop);\n /* istanbul ignore next */\n if (this.clone && marginTop !== 0) {\n pos.top += marginTop;\n }\n var posValue = this.getProcessedPositionValue({\n top: (pos.top - this.diffY) + 'px',\n left: (pos.left - this.diffX) + 'px'\n });\n this.dragElePosition = { top: pos.top, left: pos.left };\n setStyleAttribute(dragTargetElement, this.getDragPosition({ position: 'absolute', left: posValue.left, top: posValue.top }));\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDragStart);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDestroy);\n if (!isBlazor()) {\n this.bindDragEvents(dragTargetElement);\n }\n }\n };\n Draggable.prototype.bindDragEvents = function (dragTargetElement) {\n if (isVisible(dragTargetElement)) {\n EventHandler.add(document, Browser.touchMoveEvent, this.intDrag, this);\n EventHandler.add(document, Browser.touchEndEvent, this.intDragStop, this);\n this.setGlobalDroppables(false, this.element, dragTargetElement);\n }\n else {\n this.toggleEvents();\n document.body.classList.remove('e-prevent-select');\n }\n };\n Draggable.prototype.elementInViewport = function (el) {\n this.top = el.offsetTop;\n this.left = el.offsetLeft;\n this.width = el.offsetWidth;\n this.height = el.offsetHeight;\n while (el.offsetParent) {\n el = el.offsetParent;\n this.top += el.offsetTop;\n this.left += el.offsetLeft;\n }\n return (this.top >= window.pageYOffset &&\n this.left >= window.pageXOffset &&\n (this.top + this.height) <= (window.pageYOffset + window.innerHeight) &&\n (this.left + this.width) <= (window.pageXOffset + window.innerWidth));\n };\n Draggable.prototype.getProcessedPositionValue = function (value) {\n if (this.queryPositionInfo) {\n return this.queryPositionInfo(value);\n }\n return value;\n };\n Draggable.prototype.calculateParentPosition = function (ele) {\n if (isNullOrUndefined(ele)) {\n return { left: 0, top: 0 };\n }\n var rect = ele.getBoundingClientRect();\n var style = getComputedStyle(ele);\n return {\n left: (rect.left + window.pageXOffset) - parseInt(style.marginLeft, 10),\n top: (rect.top + window.pageYOffset) - parseInt(style.marginTop, 10)\n };\n };\n // tslint:disable-next-line:max-func-body-length\n Draggable.prototype.intDrag = function (evt) {\n if (!isUndefined(evt.changedTouches) && (evt.changedTouches.length !== 1)) {\n return;\n }\n var left;\n var top;\n this.position = this.getMousePosition(evt, this.isDragScroll);\n var docHeight = this.getDocumentWidthHeight('Height');\n if (docHeight < this.position.top) {\n this.position.top = docHeight;\n }\n var docWidth = this.getDocumentWidthHeight('Width');\n if (docWidth < this.position.left) {\n this.position.left = docWidth;\n }\n if (this.drag) {\n var curTarget = this.getProperTargetElement(evt);\n this.trigger('drag', { event: evt, element: this.element, target: curTarget });\n }\n var eleObj = this.checkTargetElement(evt);\n if (eleObj.target && eleObj.instance) {\n /* tslint:disable no-any */\n var flag = true;\n if (this.hoverObject) {\n if (this.hoverObject.instance !== eleObj.instance) {\n this.triggerOutFunction(evt, eleObj);\n }\n else {\n flag = false;\n }\n }\n if (flag) {\n eleObj.instance.dragData[this.scope] = this.droppables[this.scope];\n eleObj.instance.intOver(evt, eleObj.target);\n this.hoverObject = eleObj;\n }\n }\n else if (this.hoverObject) {\n this.triggerOutFunction(evt, eleObj);\n }\n var helperElement = this.droppables[this.scope].helper;\n this.parentClientRect = this.calculateParentPosition(this.helperElement.offsetParent);\n var tLeft = this.parentClientRect.left;\n var tTop = this.parentClientRect.top;\n var intCoord = this.getCoordinates(evt);\n var pagex = intCoord.pageX;\n var pagey = intCoord.pageY;\n var dLeft = this.position.left - this.diffX;\n var dTop = this.position.top - this.diffY;\n var styles = getComputedStyle(helperElement);\n var marginTop = parseFloat(styles.marginTop);\n if (this.dragArea) {\n if (this.pageX !== pagex || this.skipDistanceCheck) {\n var helperWidth = helperElement.offsetWidth + (parseFloat(styles.marginLeft)\n + parseFloat(styles.marginRight));\n if (this.dragLimit.left > dLeft && dLeft > 0) {\n left = this.dragLimit.left;\n }\n else if (this.dragLimit.right + window.pageXOffset < dLeft + helperWidth && dLeft > 0) {\n left = dLeft - (dLeft - this.dragLimit.right) + window.pageXOffset - helperWidth;\n }\n else {\n left = dLeft < 0 ? this.dragLimit.left : dLeft;\n }\n }\n if (this.pageY !== pagey || this.skipDistanceCheck) {\n var helperHeight = helperElement.offsetHeight + (parseFloat(styles.marginTop)\n + parseFloat(styles.marginBottom));\n if (this.dragLimit.top > dTop && dTop > 0) {\n top = this.dragLimit.top;\n }\n else if (this.dragLimit.bottom + window.pageYOffset < dTop + helperHeight && dTop > 0) {\n top = dTop - (dTop - this.dragLimit.bottom) + window.pageYOffset - helperHeight;\n }\n else {\n top = dTop < 0 ? this.dragLimit.top : dTop;\n }\n }\n }\n else {\n left = dLeft;\n top = dTop;\n }\n var iTop = tTop + this.borderWidth.top;\n var iLeft = tLeft + this.borderWidth.left;\n if (this.dragProcessStarted) {\n if (isNullOrUndefined(top)) {\n top = this.prevTop;\n }\n if (isNullOrUndefined(left)) {\n left = this.prevLeft;\n }\n }\n var draEleTop;\n var draEleLeft;\n if (this.dragArea) {\n this.dragLimit.top = this.clone ? this.dragLimit.top : 0;\n draEleTop = (top - iTop) < 0 ? this.dragLimit.top : (top - iTop);\n draEleLeft = (left - iLeft) < 0 ? this.dragElePosition.left : (left - iLeft);\n // when drag-element has margin-top\n /* istanbul ignore next */\n if (marginTop > 0) {\n if (this.clone) {\n draEleTop += this.element.offsetTop;\n if (dTop < 0) {\n if ((this.element.offsetTop + dTop) >= 0) {\n draEleTop = this.element.offsetTop + dTop;\n }\n else {\n draEleTop -= this.element.offsetTop;\n }\n }\n draEleTop = (this.dragLimit.bottom < draEleTop) ? this.dragLimit.bottom : draEleTop;\n }\n if ((top - iTop) < 0) {\n if (dTop + marginTop + (helperElement.offsetHeight - iTop) >= 0) {\n var tempDraEleTop = this.dragLimit.top + dTop - iTop;\n if ((tempDraEleTop + marginTop + iTop) < 0) {\n draEleTop -= marginTop + iTop;\n }\n else {\n draEleTop = tempDraEleTop;\n }\n }\n else {\n draEleTop -= marginTop + iTop;\n }\n }\n }\n }\n else {\n draEleTop = top - iTop;\n draEleLeft = left - iLeft;\n }\n var dragValue = this.getProcessedPositionValue({ top: draEleTop + 'px', left: draEleLeft + 'px' });\n setStyleAttribute(helperElement, this.getDragPosition(dragValue));\n if (!this.elementInViewport(helperElement) && this.enableAutoScroll) {\n this.helperElement.scrollIntoView();\n }\n this.dragProcessStarted = true;\n this.prevLeft = left;\n this.prevTop = top;\n this.position.left = left;\n this.position.top = top;\n this.pageX = pagex;\n this.pageY = pagey;\n };\n Draggable.prototype.triggerOutFunction = function (evt, eleObj) {\n this.hoverObject.instance.intOut(evt, eleObj.target);\n this.hoverObject.instance.dragData[this.scope] = null;\n this.hoverObject = null;\n };\n Draggable.prototype.getDragPosition = function (dragValue) {\n var temp = extend({}, dragValue);\n if (this.axis) {\n if (this.axis === 'x') {\n delete temp.top;\n }\n else if (this.axis === 'y') {\n delete temp.left;\n }\n }\n return temp;\n };\n Draggable.prototype.getDocumentWidthHeight = function (str) {\n var docBody = document.body;\n var docEle = document.documentElement;\n var returnValue = Math.max(docBody['scroll' + str], docEle['scroll' + str], docBody['offset' + str], docEle['offset' + str], docEle['client' + str]);\n return returnValue;\n };\n Draggable.prototype.intDragStop = function (evt) {\n this.dragProcessStarted = false;\n if (!isUndefined(evt.changedTouches) && (evt.changedTouches.length !== 1)) {\n return;\n }\n var type = ['touchend', 'pointerup', 'mouseup'];\n if (type.indexOf(evt.type) !== -1) {\n if (this.dragStop) {\n var curTarget = this.getProperTargetElement(evt);\n this.trigger('dragStop', { event: evt, element: this.element, target: curTarget, helper: this.helperElement });\n }\n this.intDestroy(evt);\n }\n else {\n this.element.setAttribute('aria-grabbed', 'false');\n }\n var eleObj = this.checkTargetElement(evt);\n if (eleObj.target && eleObj.instance) {\n eleObj.instance.dragStopCalled = true;\n eleObj.instance.dragData[this.scope] = this.droppables[this.scope];\n eleObj.instance.intDrop(evt, eleObj.target);\n }\n this.setGlobalDroppables(true);\n document.body.classList.remove('e-prevent-select');\n };\n /**\n * @private\n */\n Draggable.prototype.intDestroy = function (evt) {\n this.dragProcessStarted = false;\n this.toggleEvents();\n document.body.classList.remove('e-prevent-select');\n this.element.setAttribute('aria-grabbed', 'false');\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDragStart);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDragStop);\n EventHandler.remove(document, Browser.touchEndEvent, this.intDestroy);\n EventHandler.remove(document, Browser.touchMoveEvent, this.intDrag);\n if (this.isDragStarted()) {\n this.isDragStarted(true);\n }\n };\n // triggers when property changed\n Draggable.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Draggable.prototype.getModuleName = function () {\n return 'draggable';\n };\n Draggable.prototype.isDragStarted = function (change) {\n if (change) {\n isDraggedObject.isDragged = !isDraggedObject.isDragged;\n }\n return isDraggedObject.isDragged;\n };\n Draggable.prototype.setDragArea = function () {\n var eleWidthBound;\n var eleHeightBound;\n var top = 0;\n var left = 0;\n var ele;\n var type = typeof this.dragArea;\n if (type === 'string') {\n ele = select(this.dragArea);\n }\n else {\n ele = this.dragArea;\n }\n if (ele) {\n var elementArea = ele.getBoundingClientRect();\n eleWidthBound = ele.scrollWidth ? ele.scrollWidth : elementArea.right - elementArea.left;\n eleHeightBound = ele.scrollHeight ? ele.scrollHeight : elementArea.bottom - elementArea.top;\n var keys = ['Top', 'Left', 'Bottom', 'Right'];\n var styles = getComputedStyle(ele);\n for (var i = 0; i < keys.length; i++) {\n var key = keys[i];\n var tborder = styles['border' + key + 'Width'];\n var tpadding = styles['padding' + key];\n var lowerKey = key.toLowerCase();\n this.borderWidth[lowerKey] = isNaN(parseFloat(tborder)) ? 0 : parseFloat(tborder);\n this.padding[lowerKey] = isNaN(parseFloat(tpadding)) ? 0 : parseFloat(tpadding);\n }\n top = elementArea.top;\n left = elementArea.left;\n this.dragLimit.left = left + this.borderWidth.left + this.padding.left;\n this.dragLimit.top = ele.offsetTop + this.borderWidth.top + this.padding.top;\n this.dragLimit.right = left + eleWidthBound - (this.borderWidth.right + this.padding.right);\n this.dragLimit.bottom = top + eleHeightBound - (this.borderWidth.bottom + this.padding.bottom);\n }\n };\n Draggable.prototype.getProperTargetElement = function (evt) {\n var intCoord = this.getCoordinates(evt);\n var ele;\n var prevStyle = this.helperElement.style.pointerEvents || '';\n if (compareElementParent(evt.target, this.helperElement) || evt.type.indexOf('touch') !== -1) {\n this.helperElement.style.pointerEvents = 'none';\n ele = document.elementFromPoint(intCoord.clientX, intCoord.clientY);\n this.helperElement.style.pointerEvents = prevStyle;\n }\n else {\n ele = evt.target;\n }\n return ele;\n };\n /* istanbul ignore next */\n Draggable.prototype.currentStateCheck = function (ele, oldEle) {\n var elem;\n if (!isNullOrUndefined(this.currentStateTarget) && this.currentStateTarget !== ele) {\n elem = this.currentStateTarget;\n }\n else {\n elem = !isNullOrUndefined(oldEle) ? oldEle : ele;\n }\n return elem;\n };\n Draggable.prototype.getMousePosition = function (evt, isdragscroll) {\n /* tslint:disable no-any */\n var dragEle = evt.srcElement !== undefined ? evt.srcElement : evt.target;\n var intCoord = this.getCoordinates(evt);\n var pageX;\n var pageY;\n var isOffsetParent = isNullOrUndefined(dragEle.offsetParent);\n /* istanbul ignore next */\n if (isdragscroll) {\n pageX = this.clone ? intCoord.pageX :\n (intCoord.pageX + (isOffsetParent ? 0 : dragEle.offsetParent.scrollLeft)) - this.relativeXPosition;\n pageY = this.clone ? intCoord.pageY :\n (intCoord.pageY + (isOffsetParent ? 0 : dragEle.offsetParent.scrollTop)) - this.relativeYPosition;\n }\n else {\n pageX = this.clone ? intCoord.pageX : (intCoord.pageX + window.pageXOffset) - this.relativeXPosition;\n pageY = this.clone ? intCoord.pageY : (intCoord.pageY + window.pageYOffset) - this.relativeYPosition;\n }\n if (!this.clone) {\n this.getScrollableValues();\n pageY -= this.tempScrollHeight ? this.parentScrollY : 0;\n pageX -= this.tempScrollWidth ? this.parentScrollY : 0;\n }\n return {\n left: pageX - (this.margin.left + this.cursorAt.left),\n top: pageY - (this.margin.top + this.cursorAt.top)\n };\n };\n Draggable.prototype.getCoordinates = function (evt) {\n if (evt.type.indexOf('touch') > -1) {\n return evt.changedTouches[0];\n }\n return evt;\n };\n Draggable.prototype.getHelperElement = function (evt) {\n var element;\n if (this.clone) {\n if (this.helper) {\n element = this.helper({ sender: evt, element: this.target });\n }\n else {\n element = createElement('div', { className: 'e-drag-helper e-block-touch', innerHTML: 'Draggable' });\n document.body.appendChild(element);\n }\n }\n else {\n element = this.element;\n }\n return element;\n };\n Draggable.prototype.setGlobalDroppables = function (reset, drag, helper) {\n this.droppables[this.scope] = reset ? null : {\n draggable: drag,\n helper: helper,\n draggedElement: this.element\n };\n };\n Draggable.prototype.checkTargetElement = function (evt) {\n var target = this.getProperTargetElement(evt);\n var dropIns = this.getDropInstance(target);\n if (!dropIns && target && !isNullOrUndefined(target.parentNode)) {\n var parent_1 = closest(target.parentNode, '.e-droppable') || target.parentElement;\n if (parent_1) {\n dropIns = this.getDropInstance(parent_1);\n }\n }\n return { target: target, instance: dropIns };\n };\n Draggable.prototype.getDropInstance = function (ele) {\n var name = 'getModuleName';\n var drop;\n var eleInst = ele && ele.ej2_instances;\n if (eleInst) {\n for (var _i = 0, eleInst_1 = eleInst; _i < eleInst_1.length; _i++) {\n var inst = eleInst_1[_i];\n if (inst[name]() === 'droppable') {\n drop = inst;\n break;\n }\n }\n }\n return drop;\n };\n Draggable.prototype.destroy = function () {\n this.toggleEvents(true);\n _super.prototype.destroy.call(this);\n };\n var Draggable_1;\n __decorate([\n Complex({}, Position)\n ], Draggable.prototype, \"cursorAt\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"clone\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"dragArea\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"isDragScroll\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"isReplaceDragEle\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"isPreventSelect\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"drag\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"dragStart\", void 0);\n __decorate([\n Event()\n ], Draggable.prototype, \"dragStop\", void 0);\n __decorate([\n Property(1)\n ], Draggable.prototype, \"distance\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"handle\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"abort\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"helper\", void 0);\n __decorate([\n Property('default')\n ], Draggable.prototype, \"scope\", void 0);\n __decorate([\n Property('')\n ], Draggable.prototype, \"dragTarget\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"axis\", void 0);\n __decorate([\n Property()\n ], Draggable.prototype, \"queryPositionInfo\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableTailMode\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"skipDistanceCheck\", void 0);\n __decorate([\n Property(true)\n ], Draggable.prototype, \"preventDefault\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableAutoScroll\", void 0);\n __decorate([\n Property(false)\n ], Draggable.prototype, \"enableTapHold\", void 0);\n __decorate([\n Property(750)\n ], Draggable.prototype, \"tapHoldThreshold\", void 0);\n Draggable = Draggable_1 = __decorate([\n NotifyPropertyChanges\n ], Draggable);\n return Draggable;\n}(Base));\nexport { Draggable };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Base } from './base';\nimport { Browser } from './browser';\nimport { isVisible, matches } from './dom';\nimport { Property, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { EventHandler } from './event-handler';\nimport { compareElementParent } from './util';\n/**\n * Droppable Module provides support to enable droppable functionality in Dom Elements.\n * ```html\n * Droppable
\n * \n * ```\n */\nvar Droppable = /** @class */ (function (_super) {\n __extends(Droppable, _super);\n function Droppable(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.mouseOver = false;\n _this.dragData = {};\n _this.dragStopCalled = false;\n _this.bind();\n return _this;\n }\n Droppable.prototype.bind = function () {\n this.wireEvents();\n };\n Droppable.prototype.wireEvents = function () {\n EventHandler.add(this.element, Browser.touchEndEvent, this.intDrop, this);\n };\n // triggers when property changed\n Droppable.prototype.onPropertyChanged = function (newProp, oldProp) {\n //No Code to handle\n };\n Droppable.prototype.getModuleName = function () {\n return 'droppable';\n };\n Droppable.prototype.intOver = function (event, element) {\n if (!this.mouseOver) {\n var drag = this.dragData[this.scope];\n this.trigger('over', { event: event, target: element, dragData: drag });\n this.mouseOver = true;\n }\n };\n Droppable.prototype.intOut = function (event, element) {\n if (this.mouseOver) {\n this.trigger('out', { evt: event, target: element });\n this.mouseOver = false;\n }\n };\n Droppable.prototype.intDrop = function (evt, element) {\n if (!this.dragStopCalled) {\n return;\n }\n else {\n this.dragStopCalled = false;\n }\n var accept = true;\n var drag = this.dragData[this.scope];\n var isDrag = drag ? (drag.helper && isVisible(drag.helper)) : false;\n var area;\n if (isDrag) {\n area = this.isDropArea(evt, drag.helper, element);\n if (this.accept) {\n accept = matches(drag.helper, this.accept);\n }\n }\n if (isDrag && this.drop && area.canDrop && accept) {\n this.trigger('drop', { event: evt, target: area.target, droppedElement: drag.helper, dragData: drag });\n }\n this.mouseOver = false;\n };\n Droppable.prototype.isDropArea = function (evt, helper, element) {\n var area = { canDrop: true, target: element || evt.target };\n var isTouch = evt.type === 'touchend';\n if (isTouch || area.target === helper) {\n helper.style.display = 'none';\n var coord = isTouch ? (evt.changedTouches[0]) : evt;\n var ele = document.elementFromPoint(coord.clientX, coord.clientY);\n area.canDrop = false;\n area.canDrop = compareElementParent(ele, this.element);\n if (area.canDrop) {\n area.target = ele;\n }\n helper.style.display = '';\n }\n return area;\n };\n Droppable.prototype.destroy = function () {\n EventHandler.remove(this.element, Browser.touchEndEvent, this.intDrop);\n _super.prototype.destroy.call(this);\n };\n __decorate([\n Property()\n ], Droppable.prototype, \"accept\", void 0);\n __decorate([\n Property('default')\n ], Droppable.prototype, \"scope\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"drop\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"over\", void 0);\n __decorate([\n Event()\n ], Droppable.prototype, \"out\", void 0);\n Droppable = __decorate([\n NotifyPropertyChanges\n ], Droppable);\n return Droppable;\n}(Base));\nexport { Droppable };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, NotifyPropertyChanges, Event } from './notify-property-change';\nimport { Base } from './base';\nvar keyCode = {\n 'backspace': 8,\n 'tab': 9,\n 'enter': 13,\n 'shift': 16,\n 'control': 17,\n 'alt': 18,\n 'pause': 19,\n 'capslock': 20,\n 'space': 32,\n 'escape': 27,\n 'pageup': 33,\n 'pagedown': 34,\n 'end': 35,\n 'home': 36,\n 'leftarrow': 37,\n 'uparrow': 38,\n 'rightarrow': 39,\n 'downarrow': 40,\n 'insert': 45,\n 'delete': 46,\n 'f1': 112,\n 'f2': 113,\n 'f3': 114,\n 'f4': 115,\n 'f5': 116,\n 'f6': 117,\n 'f7': 118,\n 'f8': 119,\n 'f9': 120,\n 'f10': 121,\n 'f11': 122,\n 'f12': 123,\n 'semicolon': 186,\n 'plus': 187,\n 'comma': 188,\n 'minus': 189,\n 'dot': 190,\n 'forwardslash': 191,\n 'graveaccent': 192,\n 'openbracket': 219,\n 'backslash': 220,\n 'closebracket': 221,\n 'singlequote': 222\n};\n/**\n * KeyboardEvents class enables you to bind key action desired key combinations for ex., Ctrl+A, Delete, Alt+Space etc.\n * ```html\n * \n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Popup = /** @class */ (function (_super) {\n __extends(Popup, _super);\n function Popup(element, options) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Called internally if any of the property value changed.\n * @private\n */\n Popup.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });\n break;\n case 'height':\n setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'zIndex':\n setStyleAttribute(this.element, { 'zIndex': newProp.zIndex });\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'position':\n case 'relateTo':\n this.refreshPosition();\n break;\n case 'offsetX':\n var x = newProp.offsetX - oldProp.offsetX;\n this.element.style.left = (parseInt(this.element.style.left, 10) + (x)).toString() + 'px';\n break;\n case 'offsetY':\n var y = newProp.offsetY - oldProp.offsetY;\n this.element.style.top = (parseInt(this.element.style.top, 10) + (y)).toString() + 'px';\n break;\n case 'content':\n this.setContent();\n break;\n case 'actionOnScroll':\n if (newProp.actionOnScroll !== 'none') {\n this.wireScrollEvents();\n }\n else {\n this.unwireScrollEvents();\n }\n break;\n }\n }\n };\n /**\n * gets the Component module name.\n * @private\n */\n Popup.prototype.getModuleName = function () {\n return 'popup';\n };\n /**\n * To resolve if any collision occurs.\n */\n Popup.prototype.resolveCollision = function () {\n this.checkCollision();\n };\n /**\n * gets the persisted state properties of the Component.\n */\n Popup.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * To destroy the control.\n */\n Popup.prototype.destroy = function () {\n this.element.classList.remove(CLASSNAMES.ROOT, CLASSNAMES.RTL, CLASSNAMES.OPEN, CLASSNAMES.CLOSE);\n this.unwireEvents();\n _super.prototype.destroy.call(this);\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n Popup.prototype.render = function () {\n this.element.classList.add(CLASSNAMES.ROOT);\n var styles = {};\n if (this.zIndex !== 1000) {\n styles.zIndex = this.zIndex;\n }\n if (this.width !== 'auto') {\n styles.width = formatUnit(this.width);\n }\n if (this.height !== 'auto') {\n styles.height = formatUnit(this.height);\n }\n setStyleAttribute(this.element, styles);\n this.fixedParent = false;\n this.setEnableRtl();\n this.setContent();\n };\n Popup.prototype.wireEvents = function () {\n if (Browser.isDevice) {\n EventHandler.add(window, 'orientationchange', this.orientationOnChange, this);\n }\n if (this.actionOnScroll !== 'none') {\n this.wireScrollEvents();\n }\n };\n Popup.prototype.wireScrollEvents = function () {\n if (this.getRelateToElement()) {\n for (var _i = 0, _a = this.getScrollableParent(this.getRelateToElement()); _i < _a.length; _i++) {\n var parent_1 = _a[_i];\n EventHandler.add(parent_1, 'scroll', this.scrollRefresh, this);\n }\n }\n };\n Popup.prototype.unwireEvents = function () {\n if (Browser.isDevice) {\n EventHandler.remove(window, 'orientationchange', this.orientationOnChange);\n }\n if (this.actionOnScroll !== 'none') {\n this.unwireScrollEvents();\n }\n };\n Popup.prototype.unwireScrollEvents = function () {\n if (this.getRelateToElement()) {\n for (var _i = 0, _a = this.getScrollableParent(this.getRelateToElement()); _i < _a.length; _i++) {\n var parent_2 = _a[_i];\n EventHandler.remove(parent_2, 'scroll', this.scrollRefresh);\n }\n }\n };\n Popup.prototype.getRelateToElement = function () {\n var relateToElement = this.relateTo === '' || isNullOrUndefined(this.relateTo) ?\n document.body : this.relateTo;\n this.setProperties({ relateTo: relateToElement }, true);\n return ((typeof this.relateTo) === 'string') ?\n document.querySelector(this.relateTo) : this.relateTo;\n };\n Popup.prototype.scrollRefresh = function (e) {\n if (this.actionOnScroll === 'reposition') {\n if (!(this.element.offsetParent === e.target ||\n (this.element.offsetParent && this.element.offsetParent.tagName === 'BODY' &&\n e.target.parentElement == null))) {\n this.refreshPosition();\n }\n }\n else if (this.actionOnScroll === 'hide') {\n this.hide();\n }\n if (this.actionOnScroll !== 'none') {\n if (this.getRelateToElement()) {\n var targetVisible = this.isElementOnViewport(this.getRelateToElement(), e.target);\n if (!targetVisible && !this.targetInvisibleStatus) {\n this.trigger('targetExitViewport');\n this.targetInvisibleStatus = true;\n }\n else if (targetVisible) {\n this.targetInvisibleStatus = false;\n }\n }\n }\n };\n /**\n * This method is to get the element visibility on viewport when scroll\n * the page. This method will returns true even though 1 px of element\n * part is in visible.\n */\n Popup.prototype.isElementOnViewport = function (relateToElement, scrollElement) {\n var scrollParents = this.getScrollableParent(relateToElement);\n for (var parent_3 = 0; parent_3 < scrollParents.length; parent_3++) {\n if (this.isElementVisible(relateToElement, scrollParents[parent_3])) {\n continue;\n }\n else {\n return false;\n }\n }\n return true;\n };\n Popup.prototype.isElementVisible = function (relateToElement, scrollElement) {\n var rect = this.checkGetBoundingClientRect(relateToElement);\n if (!rect.height || !rect.width) {\n return false;\n }\n if (!isNullOrUndefined(this.checkGetBoundingClientRect(scrollElement))) {\n var parent_4 = scrollElement.getBoundingClientRect();\n return !(rect.bottom < parent_4.top) &&\n (!(rect.bottom > parent_4.bottom) &&\n (!(rect.right > parent_4.right) &&\n !(rect.left < parent_4.left)));\n }\n else {\n var win = window;\n var windowView = {\n top: win.scrollY,\n left: win.scrollX,\n right: win.scrollX + win.outerWidth,\n bottom: win.scrollY + win.outerHeight\n };\n var off = calculatePosition(relateToElement);\n var ele = {\n top: off.top,\n left: off.left,\n right: off.left + rect.width,\n bottom: off.top + rect.height\n };\n var elementView = {\n top: windowView.bottom - ele.top,\n left: windowView.right - ele.left,\n bottom: ele.bottom - windowView.top,\n right: ele.right - windowView.left\n };\n return elementView.top > 0\n && elementView.left > 0\n && elementView.right > 0\n && elementView.bottom > 0;\n }\n };\n /**\n * Initialize the event handler\n * @private\n */\n Popup.prototype.preRender = function () {\n //There is no event handler\n };\n Popup.prototype.setEnableRtl = function () {\n this.reposition();\n this.enableRtl ? this.element.classList.add(CLASSNAMES.RTL) : this.element.classList.remove(CLASSNAMES.RTL);\n };\n Popup.prototype.setContent = function () {\n if (!isNullOrUndefined(this.content)) {\n this.element.innerHTML = '';\n if (typeof (this.content) === 'string') {\n this.element.textContent = this.content;\n }\n else {\n this.element.appendChild(this.content);\n }\n }\n };\n Popup.prototype.orientationOnChange = function () {\n var _this = this;\n setTimeout(function () {\n _this.refreshPosition();\n }, 200);\n };\n /**\n * Based on the `relative` element and `offset` values, `Popup` element position will refreshed.\n */\n Popup.prototype.refreshPosition = function (target, collision) {\n if (!isNullOrUndefined(target)) {\n this.checkFixedParent(target);\n }\n this.reposition();\n if (!collision) {\n this.checkCollision();\n }\n };\n Popup.prototype.reposition = function () {\n var pos;\n var position;\n var relateToElement = this.getRelateToElement();\n if (typeof this.position.X === 'number' && typeof this.position.Y === 'number') {\n pos = { left: this.position.X, top: this.position.Y };\n }\n else if ((typeof this.position.X === 'string' && typeof this.position.Y === 'number') ||\n (typeof this.position.X === 'number' && typeof this.position.Y === 'string')) {\n var display = this.element.style.display;\n var parentDisplay = void 0;\n this.element.style.display = 'block';\n if (this.element.classList.contains('e-dlg-modal')) {\n parentDisplay = this.element.parentElement.style.display;\n this.element.parentElement.style.display = 'block';\n }\n position = this.getAnchorPosition(relateToElement, this.element, this.position, this.offsetX, this.offsetY);\n if (typeof this.position.X === 'string') {\n pos = { left: position.left, top: this.position.Y };\n }\n else {\n pos = { left: this.position.X, top: position.top };\n }\n this.element.style.display = display;\n if (this.element.classList.contains('e-dlg-modal')) {\n this.element.parentElement.style.display = parentDisplay;\n }\n }\n else if (relateToElement) {\n var display = this.element.style.display;\n this.element.style.display = 'block';\n pos = this.getAnchorPosition(relateToElement, this.element, this.position, this.offsetX, this.offsetY);\n this.element.style.display = display;\n }\n else {\n pos = { left: 0, top: 0 };\n }\n if (!isNullOrUndefined(pos)) {\n this.element.style.left = pos.left + 'px';\n this.element.style.top = pos.top + 'px';\n }\n };\n Popup.prototype.checkGetBoundingClientRect = function (ele) {\n var eleRect;\n try {\n eleRect = ele.getBoundingClientRect();\n return eleRect;\n }\n catch (error) {\n return null;\n }\n };\n Popup.prototype.getAnchorPosition = function (anchorEle, ele, position, offsetX, offsetY) {\n var eleRect = this.checkGetBoundingClientRect(ele);\n var anchorRect = this.checkGetBoundingClientRect(anchorEle);\n if (isNullOrUndefined(eleRect) || isNullOrUndefined(anchorRect)) {\n return null;\n }\n var anchor = anchorEle;\n var anchorPos = { left: 0, top: 0 };\n if (ele.offsetParent && ele.offsetParent.tagName === 'BODY' && anchorEle.tagName === 'BODY') {\n anchorPos = calculatePosition(anchorEle);\n }\n else {\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName !== 'BODY')) {\n ele = ele.parentElement;\n }\n anchorPos = calculateRelativeBasedPosition(anchor, ele);\n }\n switch (position.X) {\n default:\n case 'left':\n break;\n case 'center':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.left += (window.innerWidth / 2 - eleRect.width / 2);\n }\n else if (this.targetType === 'container') {\n anchorPos.left += (anchorRect.width / 2 - eleRect.width / 2);\n }\n else {\n anchorPos.left += (anchorRect.width / 2);\n }\n break;\n case 'right':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.left += (window.innerWidth - eleRect.width);\n }\n else if (this.targetType === 'container') {\n anchorPos.left += (anchorRect.width - eleRect.width);\n }\n else {\n anchorPos.left += (anchorRect.width);\n }\n break;\n }\n switch (position.Y) {\n default:\n case 'top':\n break;\n case 'center':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.top += (window.innerHeight / 2 - eleRect.height / 2);\n }\n else if (this.targetType === 'container') {\n anchorPos.top += (anchorRect.height / 2 - eleRect.height / 2);\n }\n else {\n anchorPos.top += (anchorRect.height / 2);\n }\n break;\n case 'bottom':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.top += (window.innerHeight - eleRect.height);\n }\n else if (this.targetType === 'container') {\n anchorPos.top += (anchorRect.height - eleRect.height);\n }\n else {\n anchorPos.top += (anchorRect.height);\n }\n break;\n }\n anchorPos.left += offsetX;\n anchorPos.top += offsetY;\n return anchorPos;\n };\n Popup.prototype.callFlip = function (param) {\n var relateToElement = this.getRelateToElement();\n flip(this.element, relateToElement, this.offsetX, this.offsetY, this.position.X, this.position.Y, this.viewPortElement, param, this.fixedParent);\n };\n Popup.prototype.callFit = function (param) {\n if (isCollide(this.element, this.viewPortElement).length !== 0) {\n if (isNullOrUndefined(this.viewPortElement)) {\n var data = fit(this.element, this.viewPortElement, param);\n if (param.X) {\n this.element.style.left = data.left + 'px';\n }\n if (param.Y) {\n this.element.style.top = data.top + 'px';\n }\n }\n else {\n var elementRect = this.checkGetBoundingClientRect(this.element);\n var viewPortRect = this.checkGetBoundingClientRect(this.viewPortElement);\n if (isNullOrUndefined(elementRect) || isNullOrUndefined(viewPortRect)) {\n return null;\n }\n if (param && param.Y === true) {\n if (viewPortRect.top > elementRect.top) {\n this.element.style.top = '0px';\n }\n else if (viewPortRect.bottom < elementRect.bottom) {\n this.element.style.top = parseInt(this.element.style.top, 10) - (elementRect.bottom - viewPortRect.bottom) + 'px';\n }\n }\n if (param && param.X === true) {\n if (viewPortRect.right < elementRect.right) {\n this.element.style.left = parseInt(this.element.style.left, 10) - (elementRect.right - viewPortRect.right) + 'px';\n }\n else if (viewPortRect.left > elementRect.left) {\n this.element.style.left = parseInt(this.element.style.left, 10) + (viewPortRect.left - elementRect.left) + 'px';\n }\n }\n }\n }\n };\n Popup.prototype.checkCollision = function () {\n var horz = this.collision.X;\n var vert = this.collision.Y;\n if (horz === 'none' && vert === 'none') {\n return;\n }\n if (horz === 'flip' && vert === 'flip') {\n this.callFlip({ X: true, Y: true });\n }\n else if (horz === 'fit' && vert === 'fit') {\n this.callFit({ X: true, Y: true });\n }\n else {\n if (horz === 'flip') {\n this.callFlip({ X: true, Y: false });\n }\n else if (vert === 'flip') {\n this.callFlip({ Y: true, X: false });\n }\n if (horz === 'fit') {\n this.callFit({ X: true, Y: false });\n }\n else if (vert === 'fit') {\n this.callFit({ X: false, Y: true });\n }\n }\n };\n /**\n * Shows the popup element from screen.\n * @param { AnimationModel | Function } collisionOrAnimationOptions? - To pass animation options or collision function.\n * @param { Function } collision? - To pass the collision function.\n * @param { HTMLElement } relativeElement? - To calculate the zIndex value dynamically.\n */\n Popup.prototype.show = function (animationOptions, relativeElement) {\n var _this = this;\n this.wireEvents();\n if (this.zIndex === 1000 || !isNullOrUndefined(relativeElement)) {\n var zIndexElement = (isNullOrUndefined(relativeElement)) ? this.element : relativeElement;\n this.zIndex = getZindexPartial(zIndexElement);\n setStyleAttribute(this.element, { 'zIndex': this.zIndex });\n }\n animationOptions = (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?\n animationOptions : this.showAnimation;\n if (this.collision.X !== 'none' || this.collision.Y !== 'none') {\n removeClass([this.element], CLASSNAMES.CLOSE);\n addClass([this.element], CLASSNAMES.OPEN);\n this.checkCollision();\n removeClass([this.element], CLASSNAMES.OPEN);\n addClass([this.element], CLASSNAMES.CLOSE);\n }\n if (!isNullOrUndefined(animationOptions)) {\n animationOptions.begin = function () {\n if (!_this.isDestroyed) {\n removeClass([_this.element], CLASSNAMES.CLOSE);\n addClass([_this.element], CLASSNAMES.OPEN);\n }\n };\n animationOptions.end = function () {\n if (!_this.isDestroyed) {\n _this.trigger('open');\n }\n };\n new Animation(animationOptions).animate(this.element);\n }\n else {\n removeClass([this.element], CLASSNAMES.CLOSE);\n addClass([this.element], CLASSNAMES.OPEN);\n this.trigger('open');\n }\n };\n /**\n * Hides the popup element from screen.\n * @param { AnimationModel } animationOptions? - To give the animation options.\n */\n Popup.prototype.hide = function (animationOptions) {\n var _this = this;\n animationOptions = (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?\n animationOptions : this.hideAnimation;\n if (!isNullOrUndefined(animationOptions)) {\n animationOptions.end = function () {\n if (!_this.isDestroyed) {\n removeClass([_this.element], CLASSNAMES.OPEN);\n addClass([_this.element], CLASSNAMES.CLOSE);\n _this.trigger('close');\n }\n };\n new Animation(animationOptions).animate(this.element);\n }\n else {\n removeClass([this.element], CLASSNAMES.OPEN);\n addClass([this.element], CLASSNAMES.CLOSE);\n this.trigger('close');\n }\n this.unwireEvents();\n };\n /**\n * Gets scrollable parent elements for the given element.\n * @param { HTMLElement } element - Specify the element to get the scrollable parents of it.\n */\n Popup.prototype.getScrollableParent = function (element) {\n this.checkFixedParent(element);\n return getScrollableParent(element, this.fixedParent);\n };\n Popup.prototype.checkFixedParent = function (element) {\n var parent = element.parentElement;\n while (parent && parent.tagName !== 'HTML') {\n var parentStyle = getComputedStyle(parent);\n if (parentStyle.position === 'fixed' && this.element.offsetParent && this.element.offsetParent.tagName === 'BODY') {\n this.element.style.position = 'fixed';\n this.fixedParent = true;\n }\n parent = parent.parentElement;\n if (isNullOrUndefined(this.element.offsetParent) && parentStyle.position === 'fixed'\n && this.element.style.position === 'fixed') {\n this.fixedParent = true;\n }\n }\n };\n __decorate([\n Property('auto')\n ], Popup.prototype, \"height\", void 0);\n __decorate([\n Property('auto')\n ], Popup.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"content\", void 0);\n __decorate([\n Property('container')\n ], Popup.prototype, \"targetType\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"viewPortElement\", void 0);\n __decorate([\n Property({ X: 'none', Y: 'none' })\n ], Popup.prototype, \"collision\", void 0);\n __decorate([\n Property('')\n ], Popup.prototype, \"relateTo\", void 0);\n __decorate([\n Complex({}, PositionData)\n ], Popup.prototype, \"position\", void 0);\n __decorate([\n Property(0)\n ], Popup.prototype, \"offsetX\", void 0);\n __decorate([\n Property(0)\n ], Popup.prototype, \"offsetY\", void 0);\n __decorate([\n Property(1000)\n ], Popup.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], Popup.prototype, \"enableRtl\", void 0);\n __decorate([\n Property('reposition')\n ], Popup.prototype, \"actionOnScroll\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"showAnimation\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"hideAnimation\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"targetExitViewport\", void 0);\n Popup = __decorate([\n NotifyPropertyChanges\n ], Popup);\n return Popup;\n}(Component));\nexport { Popup };\n/**\n * Gets scrollable parent elements for the given element.\n * @param { HTMLElement } element - Specify the element to get the scrollable parents of it.\n * @private\n */\nexport function getScrollableParent(element, fixedParent) {\n var eleStyle = getComputedStyle(element);\n var scrollParents = [];\n var overflowRegex = /(auto|scroll)/;\n var parent = element.parentElement;\n while (parent && parent.tagName !== 'HTML') {\n var parentStyle = getComputedStyle(parent);\n if (!(eleStyle.position === 'absolute' && parentStyle.position === 'static')\n && overflowRegex.test(parentStyle.overflow + parentStyle.overflowY + parentStyle.overflowX)) {\n scrollParents.push(parent);\n }\n parent = parent.parentElement;\n }\n if (!fixedParent) {\n scrollParents.push(document);\n }\n return scrollParents;\n}\n/**\n * Gets the maximum z-index of the given element.\n * @param { HTMLElement } element - Specify the element to get the maximum z-index of it.\n * @private\n */\nexport function getZindexPartial(element) {\n // upto body traversal\n var parent = element.parentElement;\n var parentZindex = [];\n while (parent) {\n if (parent.tagName !== 'BODY') {\n var index = document.defaultView.getComputedStyle(parent, null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(parent, null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n parentZindex.push(index);\n }\n parent = parent.parentElement;\n }\n else {\n break;\n }\n }\n //Body direct children element traversal\n var childrenZindex = [];\n for (var i = 0; i < document.body.children.length; i++) {\n if (!element.isEqualNode(document.body.children[i])) {\n var index = document.defaultView.getComputedStyle(document.body.children[i], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(document.body.children[i], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n childrenZindex.push(index);\n }\n }\n }\n childrenZindex.push('999');\n var siblingsZindex = [];\n if (!isNullOrUndefined(element.parentElement) && element.parentElement.tagName !== 'BODY') {\n var childNodes = [].slice.call(element.parentElement.children);\n for (var i = 0; i < childNodes.length; i++) {\n var index = document.defaultView.getComputedStyle(childNodes[i], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(childNodes[i], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n siblingsZindex.push(index);\n }\n }\n }\n var finalValue = parentZindex.concat(childrenZindex, siblingsZindex);\n var currentZindexValue = Math.max.apply(Math, finalValue) + 1;\n // Checking the max-zindex value\n return currentZindexValue > 2147483647 ? 2147483647 : currentZindexValue;\n}\n/**\n * Gets the maximum z-index of the page.\n * @param { HTMLElement } tagName - Specify the tagName to get the maximum z-index of it.\n * @private\n */\nexport function getMaxZindex(tagName) {\n if (tagName === void 0) { tagName = ['*']; }\n var maxZindex = [];\n for (var i = 0; i < tagName.length; i++) {\n var elements = document.getElementsByTagName(tagName[i]);\n for (var i_1 = 0; i_1 < elements.length; i_1++) {\n var index = document.defaultView.getComputedStyle(elements[i_1], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(elements[i_1], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n maxZindex.push(index);\n }\n }\n }\n var currentZindexValue = Math.max.apply(Math, maxZindex) + 1;\n return currentZindexValue > 2147483647 ? 2147483647 : currentZindexValue;\n}\n","/**\n * IncrementalSearch module file\n */\nvar queryString = '';\nvar prevString = '';\nvar matches = [];\nvar activeClass = 'e-active';\nvar prevElementId = '';\n/**\n * Search and focus the list item based on key code matches with list text content\n * @param { number } keyCode - Specifies the key code which pressed on keyboard events.\n * @param { HTMLElement[]] } items - Specifies an array of HTMLElement, from which matches find has done.\n * @param { number } selectedIndex - Specifies the selected item in list item, so that search will happen\n * after selected item otherwise it will do from initial.\n * @param { boolean } ignoreCase - Specifies the case consideration when search has done.\n */\nexport function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId, isBlazor) {\n queryString += String.fromCharCode(keyCode);\n setTimeout(function () { queryString = ''; }, 1000);\n var index;\n queryString = ignoreCase ? queryString.toLowerCase() : queryString;\n if (prevElementId === elementId && prevString === queryString) {\n for (var i = 0; i < matches.length; i++) {\n if (matches[i].classList.contains(activeClass)) {\n index = i;\n break;\n }\n }\n index = index + 1;\n return matches[index];\n }\n else {\n var listItems = items;\n var strLength = queryString.length;\n var text = void 0;\n var item = void 0;\n selectedIndex = selectedIndex ? selectedIndex + 1 : 0;\n var i = selectedIndex;\n matches = [];\n do {\n if (i === listItems.length) {\n i = -1;\n }\n i === -1 ? index = 0 : index = i;\n item = listItems[index];\n if (isBlazor) {\n text = ignoreCase ? item.textContent.trim().toLowerCase() : item.textContent.trim();\n }\n else {\n text = ignoreCase ? item.innerText.toLowerCase() : item.innerText;\n }\n if (text.substr(0, strLength) === queryString) {\n matches.push(listItems[index]);\n }\n i++;\n } while (i !== selectedIndex);\n prevString = queryString;\n prevElementId = elementId;\n return matches[0];\n }\n}\nexport function Search(inputVal, items, searchType, ignoreCase) {\n var listItems = items;\n ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;\n var itemData = { item: null, index: null };\n if (inputVal && inputVal.length) {\n var strLength = inputVal.length;\n var queryStr = ignoreCase ? inputVal.toLocaleLowerCase() : inputVal;\n for (var i = 0, itemsData = listItems; i < itemsData.length; i++) {\n var item = itemsData[i];\n var text = (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\\s+|\\s+$/g, '');\n if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr)) {\n itemData.item = item;\n itemData.index = i;\n return { item: item, index: i };\n }\n }\n return itemData;\n }\n return itemData;\n}\n","import { DataUtil } from './util';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * Query class is used to build query which is used by the DataManager to communicate with datasource.\n */\nvar Query = /** @class */ (function () {\n /**\n * Constructor for Query class.\n * @param {string|string[]} from?\n * @hidden\n */\n function Query(from) {\n /** @hidden */\n this.subQuery = null;\n /** @hidden */\n this.isChild = false;\n /** @hidden */\n this.distincts = [];\n this.queries = [];\n this.key = '';\n this.fKey = '';\n if (typeof from === 'string') {\n this.fromTable = from;\n }\n else if (from && from instanceof Array) {\n this.lookups = from;\n }\n this.expands = [];\n this.sortedColumns = [];\n this.groupedColumns = [];\n this.subQuery = null;\n this.isChild = false;\n this.params = [];\n this.lazyLoad = [];\n return this;\n }\n /**\n * Sets the primary key.\n * @param {string} field - Defines the column field.\n */\n Query.prototype.setKey = function (field) {\n this.key = field;\n return this;\n };\n /**\n * Sets default DataManager to execute query.\n * @param {DataManager} dataManager - Defines the DataManager.\n */\n Query.prototype.using = function (dataManager) {\n this.dataManager = dataManager;\n return this;\n };\n /**\n * Executes query with the given DataManager.\n * @param {DataManager} dataManager - Defines the DataManager.\n * @param {Function} done - Defines the success callback.\n * @param {Function} fail - Defines the failure callback.\n * @param {Function} always - Defines the callback which will be invoked on either success or failure.\n *\n * Popup Content
\n * let dataManager: DataManager = new DataManager([{ ID: '10' }, { ID: '2' }, { ID: '1' }, { ID: '20' }]);\n * let query: Query = new Query();\n * query.sortBy('ID', (x: string, y: string): number => { return parseInt(x, 10) - parseInt(y, 10) });\n * let promise: Promise< Object > = query.execute(dataManager);\n * promise.then((e: { result: Object }) => { });\n * \n */\n Query.prototype.execute = function (dataManager, done, fail, always) {\n dataManager = dataManager || this.dataManager;\n if (dataManager) {\n return dataManager.executeQuery(this, done, fail, always);\n }\n return DataUtil.throwError('Query - execute() : dataManager needs to be is set using \"using\" function or should be passed as argument');\n };\n /**\n * Executes query with the local datasource.\n * @param {DataManager} dataManager - Defines the DataManager.\n */\n Query.prototype.executeLocal = function (dataManager) {\n dataManager = dataManager || this.dataManager;\n if (dataManager) {\n return dataManager.executeLocal(this);\n }\n return DataUtil.throwError('Query - executeLocal() : dataManager needs to be is set using \"using\" function or should be passed as argument');\n };\n /**\n * Creates deep copy of the Query object.\n */\n Query.prototype.clone = function () {\n var cloned = new Query();\n cloned.queries = this.queries.slice(0);\n cloned.key = this.key;\n cloned.isChild = this.isChild;\n cloned.dataManager = this.dataManager;\n cloned.fromTable = this.fromTable;\n cloned.params = this.params.slice(0);\n cloned.expands = this.expands.slice(0);\n cloned.sortedColumns = this.sortedColumns.slice(0);\n cloned.groupedColumns = this.groupedColumns.slice(0);\n cloned.subQuerySelector = this.subQuerySelector;\n cloned.subQuery = this.subQuery;\n cloned.fKey = this.fKey;\n cloned.isCountRequired = this.isCountRequired;\n cloned.distincts = this.distincts.slice(0);\n cloned.lazyLoad = this.lazyLoad.slice(0);\n return cloned;\n };\n /**\n * Specifies the name of table to retrieve data in query execution.\n * @param {string} tableName - Defines the table name.\n */\n Query.prototype.from = function (tableName) {\n this.fromTable = tableName;\n return this;\n };\n /**\n * Adds additional parameter which will be sent along with the request which will be generated while DataManager execute.\n * @param {string} key - Defines the key of additional parameter.\n * @param {Function|string} value - Defines the value for the key.\n */\n Query.prototype.addParams = function (key, value) {\n if (typeof value === 'function') {\n this.params.push({ key: key, fn: value });\n }\n else {\n this.params.push({ key: key, value: value });\n }\n return this;\n };\n /**\n * @hidden\n */\n Query.prototype.distinct = function (fields) {\n if (typeof fields === 'string') {\n this.distincts = [].slice.call([fields], 0);\n }\n else {\n this.distincts = fields.slice(0);\n }\n return this;\n };\n /**\n * Expands the related table.\n * @param {string|Object[]} tables\n */\n Query.prototype.expand = function (tables) {\n if (typeof tables === 'string') {\n this.expands = [].slice.call([tables], 0);\n }\n else {\n this.expands = tables.slice(0);\n }\n return this;\n };\n /**\n * Filter data with given filter criteria.\n * @param {string|Predicate} fieldName - Defines the column field or Predicate.\n * @param {string} operator - Defines the operator how to filter data.\n * @param {string|number|boolean} value - Defines the values to match with data.\n * @param {boolean} ignoreCase - If ignore case set to false, then filter data with exact match or else\n * filter data with case insensitive.\n */\n Query.prototype.where = function (fieldName, operator, value, ignoreCase, ignoreAccent) {\n operator = operator ? (operator).toLowerCase() : null;\n var predicate = null;\n if (typeof fieldName === 'string') {\n predicate = new Predicate(fieldName, operator, value, ignoreCase, ignoreAccent);\n }\n else if (fieldName instanceof Predicate) {\n predicate = fieldName;\n }\n this.queries.push({\n fn: 'onWhere',\n e: predicate\n });\n return this;\n };\n /**\n * Search data with given search criteria.\n * @param {string|number|boolean} searchKey - Defines the search key.\n * @param {string|string[]} fieldNames - Defines the collection of column fields.\n * @param {string} operator - Defines the operator how to search data.\n * @param {boolean} ignoreCase - If ignore case set to false, then filter data with exact match or else\n * filter data with case insensitive.\n */\n Query.prototype.search = function (searchKey, fieldNames, operator, ignoreCase, ignoreAccent) {\n if (typeof fieldNames === 'string') {\n fieldNames = [fieldNames];\n }\n if (!operator || operator === 'none') {\n operator = 'contains';\n }\n var comparer = DataUtil.fnOperators[operator];\n this.queries.push({\n fn: 'onSearch',\n e: {\n fieldNames: fieldNames,\n operator: operator,\n searchKey: searchKey,\n ignoreCase: ignoreCase,\n ignoreAccent: ignoreAccent,\n comparer: comparer\n }\n });\n return this;\n };\n /**\n * Sort the data with given sort criteria.\n * By default, sort direction is ascending.\n * @param {string|string[]} fieldName - Defines the single or collection of column fields.\n * @param {string|Function} comparer - Defines the sort direction or custom sort comparer function.\n */\n Query.prototype.sortBy = function (fieldName, comparer, isFromGroup) {\n return this.sortByForeignKey(fieldName, comparer, isFromGroup);\n };\n /**\n * Sort the data with given sort criteria.\n * By default, sort direction is ascending.\n * @param {string|string[]} fieldName - Defines the single or collection of column fields.\n * @param {string|Function} comparer - Defines the sort direction or custom sort comparer function.\n * @param {string} direction - Defines the sort direction .\n */\n Query.prototype.sortByForeignKey = function (fieldName, comparer, isFromGroup, direction) {\n var order = !isNullOrUndefined(direction) ? direction : 'ascending';\n var sorts;\n var temp;\n if (typeof fieldName === 'string' && DataUtil.endsWith(fieldName.toLowerCase(), ' desc')) {\n fieldName = fieldName.replace(/ desc$/i, '');\n comparer = 'descending';\n }\n if (!comparer || typeof comparer === 'string') {\n order = comparer ? comparer.toLowerCase() : 'ascending';\n comparer = DataUtil.fnSort(comparer);\n }\n if (isFromGroup) {\n sorts = Query.filterQueries(this.queries, 'onSortBy');\n for (var i = 0; i < sorts.length; i++) {\n temp = sorts[i].e.fieldName;\n if (typeof temp === 'string') {\n if (temp === fieldName) {\n return this;\n }\n }\n else if (temp instanceof Array) {\n for (var j = 0; j < temp.length; j++) {\n if (temp[j] === fieldName || fieldName.toLowerCase() === temp[j] + ' desc') {\n return this;\n }\n }\n }\n }\n }\n this.queries.push({\n fn: 'onSortBy',\n e: {\n fieldName: fieldName,\n comparer: comparer,\n direction: order\n }\n });\n return this;\n };\n /**\n * Sorts data in descending order.\n * @param {string} fieldName - Defines the column field.\n */\n Query.prototype.sortByDesc = function (fieldName) {\n return this.sortBy(fieldName, 'descending');\n };\n /**\n * Groups data with the given field name.\n * @param {string} fieldName - Defines the column field.\n */\n Query.prototype.group = function (fieldName, fn, format) {\n this.sortBy(fieldName, null, true);\n this.queries.push({\n fn: 'onGroup',\n e: {\n fieldName: fieldName,\n comparer: fn ? fn : null,\n format: format ? format : null\n }\n });\n return this;\n };\n /**\n * Gets data based on the given page index and size.\n * @param {number} pageIndex - Defines the current page index.\n * @param {number} pageSize - Defines the no of records per page.\n */\n Query.prototype.page = function (pageIndex, pageSize) {\n this.queries.push({\n fn: 'onPage',\n e: {\n pageIndex: pageIndex,\n pageSize: pageSize\n }\n });\n return this;\n };\n /**\n * Gets data based on the given start and end index.\n * @param {number} start - Defines the start index of the datasource.\n * @param {number} end - Defines the end index of the datasource.\n */\n Query.prototype.range = function (start, end) {\n this.queries.push({\n fn: 'onRange',\n e: {\n start: start,\n end: end\n }\n });\n return this;\n };\n /**\n * Gets data from the top of the data source based on given number of records count.\n * @param {number} nos - Defines the no of records to retrieve from datasource.\n */\n Query.prototype.take = function (nos) {\n this.queries.push({\n fn: 'onTake',\n e: {\n nos: nos\n }\n });\n return this;\n };\n /**\n * Skips data with given number of records count from the top of the data source.\n * @param {number} nos - Defines the no of records skip in the datasource.\n */\n Query.prototype.skip = function (nos) {\n this.queries.push({\n fn: 'onSkip',\n e: { nos: nos }\n });\n return this;\n };\n /**\n * Selects specified columns from the data source.\n * @param {string|string[]} fieldNames - Defines the collection of column fields.\n */\n Query.prototype.select = function (fieldNames) {\n if (typeof fieldNames === 'string') {\n fieldNames = [].slice.call([fieldNames], 0);\n }\n this.queries.push({\n fn: 'onSelect',\n e: { fieldNames: fieldNames }\n });\n return this;\n };\n /**\n * Gets the records in hierarchical relationship from two tables. It requires the foreign key to relate two tables.\n * @param {Query} query - Defines the query to relate two tables.\n * @param {Function} selectorFn - Defines the custom function to select records.\n */\n Query.prototype.hierarchy = function (query, selectorFn) {\n this.subQuerySelector = selectorFn;\n this.subQuery = query;\n return this;\n };\n /**\n * Sets the foreign key which is used to get data from the related table.\n * @param {string} key - Defines the foreign key.\n */\n Query.prototype.foreignKey = function (key) {\n this.fKey = key;\n return this;\n };\n /**\n * It is used to get total number of records in the DataManager execution result.\n */\n Query.prototype.requiresCount = function () {\n this.isCountRequired = true;\n return this;\n };\n //type - sum, avg, min, max\n /**\n * Aggregate the data with given type and field name.\n * @param {string} type - Defines the aggregate type.\n * @param {string} field - Defines the column field to aggregate.\n */\n Query.prototype.aggregate = function (type, field) {\n this.queries.push({\n fn: 'onAggregates',\n e: { field: field, type: type }\n });\n return this;\n };\n /**\n * Pass array of filterColumn query for performing filter operation.\n * @param {QueryOptions[]} queries\n * @param {string} name\n * @hidden\n */\n Query.filterQueries = function (queries, name) {\n return queries.filter(function (q) {\n return q.fn === name;\n });\n };\n /**\n * To get the list of queries which is already filtered in current data source.\n * @param {Object[]} queries\n * @param {string[]} singles\n * @hidden\n */\n Query.filterQueryLists = function (queries, singles) {\n var filtered = queries.filter(function (q) {\n return singles.indexOf(q.fn) !== -1;\n });\n var res = {};\n for (var i = 0; i < filtered.length; i++) {\n if (!res[filtered[i].fn]) {\n res[filtered[i].fn] = filtered[i].e;\n }\n }\n return res;\n };\n return Query;\n}());\nexport { Query };\n/**\n * Predicate class is used to generate complex filter criteria.\n * This will be used by DataManager to perform multiple filtering operation.\n */\nvar Predicate = /** @class */ (function () {\n /**\n * Constructor for Predicate class.\n * @param {string|Predicate} field\n * @param {string} operator\n * @param {string|number|boolean|Predicate|Predicate[]} value\n * @param {boolean=false} ignoreCase\n * @hidden\n */\n function Predicate(field, operator, value, ignoreCase, ignoreAccent) {\n if (ignoreCase === void 0) { ignoreCase = false; }\n /** @hidden */\n this.ignoreAccent = false;\n /** @hidden */\n this.isComplex = false;\n if (typeof field === 'string') {\n this.field = field;\n this.operator = operator.toLowerCase();\n this.value = value;\n this.ignoreCase = ignoreCase;\n this.ignoreAccent = ignoreAccent;\n this.isComplex = false;\n this.comparer = DataUtil.fnOperators.processOperator(this.operator);\n }\n else if (field instanceof Predicate && value instanceof Predicate || value instanceof Array) {\n this.isComplex = true;\n this.condition = operator.toLowerCase();\n this.predicates = [field];\n if (value instanceof Array) {\n [].push.apply(this.predicates, value);\n }\n else {\n this.predicates.push(value);\n }\n }\n return this;\n }\n /**\n * Adds n-number of new predicates on existing predicate with “and” condition.\n * @param {Object[]} args - Defines the collection of predicates.\n */\n Predicate.and = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n return Predicate.combinePredicates([].slice.call(args, 0), 'and');\n };\n /**\n * Adds new predicate on existing predicate with “and” condition.\n * @param {string} field - Defines the column field.\n * @param {string} operator - Defines the operator how to filter data.\n * @param {string} value - Defines the values to match with data.\n * @param {boolean} ignoreCase? - If ignore case set to false, then filter data with exact match or else\n * filter data with case insensitive.\n */\n Predicate.prototype.and = function (field, operator, value, ignoreCase, ignoreAccent) {\n return Predicate.combine(this, field, operator, value, 'and', ignoreCase, ignoreAccent);\n };\n /**\n * Adds n-number of new predicates on existing predicate with “or” condition.\n * @param {Object[]} args - Defines the collection of predicates.\n */\n Predicate.or = function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n return Predicate.combinePredicates([].slice.call(args, 0), 'or');\n };\n /**\n * Adds new predicate on existing predicate with “or” condition.\n * @param {string} field - Defines the column field.\n * @param {string} operator - Defines the operator how to filter data.\n * @param {string} value - Defines the values to match with data.\n * @param {boolean} ignoreCase? - If ignore case set to false, then filter data with exact match or else\n * filter data with case insensitive.\n */\n Predicate.prototype.or = function (field, operator, value, ignoreCase, ignoreAccent) {\n return Predicate.combine(this, field, operator, value, 'or', ignoreCase, ignoreAccent);\n };\n /**\n * Converts plain JavaScript object to Predicate object.\n * @param {Predicate[]|Predicate} json - Defines single or collection of Predicate.\n */\n Predicate.fromJson = function (json) {\n if (json instanceof Array) {\n var res = [];\n for (var i = 0, len = json.length; i < len; i++) {\n res.push(this.fromJSONData(json[i]));\n }\n return res;\n }\n var pred = json;\n return this.fromJSONData(pred);\n };\n /**\n * Validate the record based on the predicates.\n * @param {Object} record - Defines the datasource record.\n */\n Predicate.prototype.validate = function (record) {\n var predicate = this.predicates ? this.predicates : [];\n var isAnd;\n var ret;\n if (!this.isComplex && this.comparer) {\n return this.comparer.call(this, DataUtil.getObject(this.field, record), this.value, this.ignoreCase, this.ignoreAccent);\n }\n isAnd = this.condition === 'and';\n for (var i = 0; i < predicate.length; i++) {\n ret = predicate[i].validate(record);\n if (isAnd) {\n if (!ret) {\n return false;\n }\n }\n else {\n if (ret) {\n return true;\n }\n }\n }\n return isAnd;\n };\n /**\n * Converts predicates to plain JavaScript.\n * This method is uses Json stringify when serializing Predicate object.\n */\n Predicate.prototype.toJson = function () {\n var predicates;\n var p;\n if (this.isComplex) {\n predicates = [];\n p = this.predicates;\n for (var i = 0; i < p.length; i++) {\n predicates.push(p[i].toJson());\n }\n }\n return {\n isComplex: this.isComplex,\n field: this.field,\n operator: this.operator,\n value: this.value,\n ignoreCase: this.ignoreCase,\n ignoreAccent: this.ignoreAccent,\n condition: this.condition,\n predicates: predicates\n };\n };\n Predicate.combinePredicates = function (predicates, operator) {\n if (predicates.length === 1) {\n if (!(predicates[0] instanceof Array)) {\n return predicates[0];\n }\n predicates = predicates[0];\n }\n return new Predicate(predicates[0], operator, predicates.slice(1));\n };\n Predicate.combine = function (pred, field, operator, value, condition, ignoreCase, ignoreAccent) {\n if (field instanceof Predicate) {\n return Predicate[condition](pred, field);\n }\n if (typeof field === 'string') {\n return Predicate[condition](pred, new Predicate(field, operator, value, ignoreCase, ignoreAccent));\n }\n return DataUtil.throwError('Predicate - ' + condition + ' : invalid arguments');\n };\n Predicate.fromJSONData = function (json) {\n var preds = json.predicates || [];\n var len = preds.length;\n var predicates = [];\n var result;\n for (var i = 0; i < len; i++) {\n predicates.push(this.fromJSONData(preds[i]));\n }\n if (!json.isComplex) {\n result = new Predicate(json.field, json.operator, json.value, json.ignoreCase, json.ignoreAccent);\n }\n else {\n result = new Predicate(predicates[0], json.condition, predicates.slice(1));\n }\n return result;\n };\n return Predicate;\n}());\nexport { Predicate };\n","import { extend, merge, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { attributes, prepend, isVisible, append, addClass } from '@syncfusion/ej2-base';\nimport { compile } from '@syncfusion/ej2-base';\nimport { DataManager, Query } from '@syncfusion/ej2-data';\nexport var cssClass = {\n li: 'e-list-item',\n ul: 'e-list-parent e-ul',\n group: 'e-list-group-item',\n icon: 'e-list-icon',\n text: 'e-list-text',\n check: 'e-list-check',\n checked: 'e-checked',\n selected: 'e-selected',\n expanded: 'e-expanded',\n textContent: 'e-text-content',\n hasChild: 'e-has-child',\n level: 'e-level',\n url: 'e-list-url',\n collapsible: 'e-icon-collapsible',\n disabled: 'e-disabled',\n image: 'e-list-img',\n iconWrapper: 'e-icon-wrapper',\n anchorWrap: 'e-anchor-wrap',\n navigable: 'e-navigable'\n};\n/**\n * Base List Generator\n */\nexport var ListBase;\n(function (ListBase) {\n /**\n * Default mapped fields.\n */\n ListBase.defaultMappedFields = {\n id: 'id',\n text: 'text',\n url: 'url',\n value: 'value',\n isChecked: 'isChecked',\n enabled: 'enabled',\n expanded: 'expanded',\n selected: 'selected',\n iconCss: 'iconCss',\n child: 'child',\n isVisible: 'isVisible',\n hasChildren: 'hasChildren',\n tooltip: 'tooltip',\n htmlAttributes: 'htmlAttributes',\n urlAttributes: 'urlAttributes',\n imageAttributes: 'imageAttributes',\n imageUrl: 'imageUrl',\n groupBy: null\n };\n var defaultAriaAttributes = {\n level: 1,\n listRole: 'presentation',\n itemRole: 'presentation',\n groupItemRole: 'group',\n itemText: 'list-item',\n wrapperRole: 'presentation'\n };\n var defaultListBaseOptions = {\n showCheckBox: false,\n showIcon: false,\n enableHtmlSanitizer: false,\n expandCollapse: false,\n fields: ListBase.defaultMappedFields,\n ariaAttributes: defaultAriaAttributes,\n listClass: '',\n itemClass: '',\n processSubChild: false,\n sortOrder: 'None',\n template: null,\n groupTemplate: null,\n headerTemplate: null,\n expandIconClass: 'e-icon-collapsible',\n moduleName: 'list',\n expandIconPosition: 'Right',\n itemNavigable: false\n };\n /**\n * Function helps to created and return the UL Li element based on your data.\n * @param {{[key:string]:Object}[]|string[]} dataSource - Specifies an array of JSON or String data.\n * @param {ListBaseOptions} options? - Specifies the list options that need to provide.\n */\n function createList(createElement, dataSource, \n // tslint:disable-next-line\n options, isSingleLevel, componentInstance) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var type = typeofData(dataSource).typeof;\n if (type === 'string' || type === 'number') {\n return createListFromArray(createElement, dataSource, isSingleLevel, options, componentInstance);\n }\n else {\n // tslint:disable-next-line\n return createListFromJson(createElement, dataSource, options, \n // tslint:disable-next-line\n ariaAttributes.level, isSingleLevel, componentInstance);\n }\n }\n ListBase.createList = createList;\n /**\n * Function helps to created an element list based on string array input .\n * @param {string[]} dataSource - Specifies an array of string data\n */\n function createListFromArray(createElement, dataSource, \n // tslint:disable-next-line\n isSingleLevel, options, componentInstance) {\n var subChild = createListItemFromArray(createElement, dataSource, isSingleLevel, options, componentInstance);\n return generateUL(createElement, subChild, null, options);\n }\n ListBase.createListFromArray = createListFromArray;\n /**\n * Function helps to created an element list based on string array input .\n * @param {string[]} dataSource - Specifies an array of string data\n */\n function createListItemFromArray(createElement, dataSource, \n // tslint:disable-next-line\n isSingleLevel, options, componentInstance) {\n var subChild = [];\n var curOpt = extend({}, defaultListBaseOptions, options);\n cssClass = getModuleClass(curOpt.moduleName);\n var id = generateId(); // generate id for drop-down-list option.\n for (var i = 0; i < dataSource.length; i++) {\n if (isNullOrUndefined(dataSource[i])) {\n continue;\n }\n var li = void 0;\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: dataSource[i],\n options: curOpt\n };\n curOpt.itemCreating(curData);\n }\n if (isSingleLevel) {\n li = generateSingleLevelLI(createElement, dataSource[i], undefined, null, null, [], null, id, i, options);\n }\n else {\n li = generateLI(createElement, dataSource[i], undefined, null, null, options, componentInstance);\n }\n if (curOpt.itemCreated && typeof curOpt.itemCreated === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: dataSource[i],\n item: li,\n options: curOpt\n };\n curOpt.itemCreated(curData);\n }\n subChild.push(li);\n }\n return subChild;\n }\n ListBase.createListItemFromArray = createListItemFromArray;\n /**\n * Function helps to created an element list based on array of JSON input .\n * @param {{[key:string]:Object}[]} dataSource - Specifies an array of JSON data.\n * @param {ListBaseOptions} options? - Specifies the list options that need to provide.\n */\n // tslint:disable-next-line:max-func-body-length\n // tslint:disable-next-line\n function createListItemFromJson(createElement, dataSource, \n // tslint:disable-next-line\n options, level, isSingleLevel, componentInstance) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n cssClass = getModuleClass(curOpt.moduleName);\n var fields = extend({}, ListBase.defaultMappedFields, curOpt.fields);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var id;\n var checkboxElement = [];\n if (level) {\n ariaAttributes.level = level;\n }\n var child = [];\n var li;\n var anchorElement;\n if (dataSource && dataSource.length && !isNullOrUndefined(typeofData(dataSource).item) &&\n !typeofData(dataSource).item.hasOwnProperty(fields.id)) {\n id = generateId(); // generate id for drop-down-list option.\n }\n for (var i = 0; i < dataSource.length; i++) {\n var fieldData = getFieldValues(dataSource[i], fields);\n if (isNullOrUndefined(dataSource[i])) {\n continue;\n }\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: fieldData[fields.text],\n options: curOpt,\n fields: fields\n };\n curOpt.itemCreating(curData);\n }\n var curItem = dataSource[i];\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n fieldData = getFieldValues(dataSource[i], fields);\n }\n if (fieldData.hasOwnProperty(fields.id) && !isNullOrUndefined(fieldData[fields.id])) {\n id = fieldData[fields.id];\n }\n var innerEle = [];\n if (curOpt.showCheckBox) {\n if (curOpt.itemNavigable && (fieldData[fields.url] || fieldData[fields.urlAttributes])) {\n checkboxElement.push(createElement('input', { className: cssClass.check, attrs: { type: 'checkbox' } }));\n }\n else {\n innerEle.push(createElement('input', { className: cssClass.check, attrs: { type: 'checkbox' } }));\n }\n }\n if (isSingleLevel === true) {\n if (curOpt.showIcon && fieldData.hasOwnProperty(fields.iconCss) && !isNullOrUndefined(fieldData[fields.iconCss])) {\n innerEle.push(createElement('span', { className: cssClass.icon + ' ' + fieldData[fields.iconCss] }));\n }\n li = generateSingleLevelLI(createElement, curItem, fieldData, fields, curOpt.itemClass, innerEle, (curItem.hasOwnProperty('isHeader') &&\n curItem.isHeader) ? true : false, id, i, options);\n anchorElement = li.querySelector('.' + cssClass.anchorWrap);\n if (curOpt.itemNavigable && checkboxElement.length) {\n prepend(checkboxElement, li.firstElementChild);\n }\n }\n else {\n li = generateLI(createElement, curItem, fieldData, fields, curOpt.itemClass, options, componentInstance);\n li.classList.add(cssClass.level + '-' + ariaAttributes.level);\n li.setAttribute('aria-level', ariaAttributes.level.toString());\n anchorElement = li.querySelector('.' + cssClass.anchorWrap);\n if (fieldData.hasOwnProperty(fields.tooltip)) {\n li.setAttribute('title', fieldData[fields.tooltip]);\n }\n if (fieldData.hasOwnProperty(fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {\n setAttribute(li, fieldData[fields.htmlAttributes]);\n }\n if (fieldData.hasOwnProperty(fields.enabled) && fieldData[fields.enabled] === false) {\n li.classList.add(cssClass.disabled);\n }\n if (fieldData.hasOwnProperty(fields.isVisible) && fieldData[fields.isVisible] === false) {\n li.style.display = 'none';\n }\n if (fieldData.hasOwnProperty(fields.imageUrl) && !isNullOrUndefined(fieldData[fields.imageUrl])\n && !curOpt.template) {\n var attr = { src: fieldData[fields.imageUrl] };\n merge(attr, fieldData[fields.imageAttributes]);\n var imageElemnt = createElement('img', { className: cssClass.image, attrs: attr });\n if (anchorElement) {\n anchorElement.insertAdjacentElement('afterbegin', imageElemnt);\n }\n else {\n prepend([imageElemnt], li.firstElementChild);\n }\n }\n if (curOpt.showIcon && fieldData.hasOwnProperty(fields.iconCss) &&\n !isNullOrUndefined(fieldData[fields.iconCss]) && !curOpt.template) {\n var iconElement = void 0;\n iconElement = createElement('div', { className: cssClass.icon + ' ' + fieldData[fields.iconCss] });\n if (anchorElement) {\n anchorElement.insertAdjacentElement('afterbegin', iconElement);\n }\n else {\n prepend([iconElement], li.firstElementChild);\n }\n }\n if (innerEle.length) {\n prepend(innerEle, li.firstElementChild);\n }\n if (curOpt.itemNavigable && checkboxElement.length) {\n prepend(checkboxElement, li.firstElementChild);\n }\n processSubChild(createElement, fieldData, fields, dataSource, curOpt, li, ariaAttributes.level);\n }\n if (anchorElement) {\n addClass([li], [cssClass.navigable]);\n }\n if (curOpt.itemCreated && typeof curOpt.itemCreated === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: dataSource[i],\n text: fieldData[fields.text],\n item: li,\n options: curOpt,\n fields: fields\n };\n curOpt.itemCreated(curData);\n }\n checkboxElement = [];\n child.push(li);\n }\n return child;\n }\n ListBase.createListItemFromJson = createListItemFromJson;\n /**\n * Function helps to created an element list based on array of JSON input .\n * @param {{[key:string]:Object}[]} dataSource - Specifies an array of JSON data.\n * @param {ListBaseOptions} options? - Specifies the list options that need to provide.\n */\n function createListFromJson(createElement, dataSource, \n // tslint:disable-next-line\n options, level, isSingleLevel, componentInstance) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var li = createListItemFromJson(createElement, dataSource, options, level, isSingleLevel, componentInstance);\n return generateUL(createElement, li, curOpt.listClass, options);\n }\n ListBase.createListFromJson = createListFromJson;\n /**\n * Return the next or previous visible element.\n * @param {Element[]|NodeList} elementArray - An element array to find next or previous element.\n * @param {Element} li - An element to find next or previous after this element.\n * @param {boolean} isPrevious? - Specify when the need get previous element from array.\n */\n function getSiblingLI(elementArray, element, isPrevious) {\n cssClass = getModuleClass(defaultListBaseOptions.moduleName);\n if (!elementArray || !elementArray.length) {\n return void 0;\n }\n var siblingLI;\n var liIndex;\n var liCollections = Array.prototype.slice.call(elementArray);\n if (element) {\n liIndex = indexOf(element, liCollections);\n }\n else {\n liIndex = (isPrevious === true ? liCollections.length : -1);\n }\n siblingLI = liCollections[liIndex + (isPrevious === true ? -1 : 1)];\n while (siblingLI && (!isVisible(siblingLI) || siblingLI.classList.contains(cssClass.disabled))) {\n liIndex = liIndex + (isPrevious === true ? -1 : 1);\n siblingLI = liCollections[liIndex];\n }\n return siblingLI;\n }\n ListBase.getSiblingLI = getSiblingLI;\n /**\n * Return the index of the li element\n * @param {Element} item - An element to find next or previous after this element.\n * @param {Element[]|NodeList} elementArray - An element array to find index of given li.\n */\n function indexOf(item, elementArray) {\n if (!elementArray || !item) {\n return void 0;\n }\n else {\n var liCollections = elementArray;\n liCollections = Array.prototype.slice.call(elementArray);\n return liCollections.indexOf(item);\n }\n }\n ListBase.indexOf = indexOf;\n /**\n * Returns the grouped data from given dataSource.\n * @param {{[key:string]:Object}[]} dataSource - The JSON data which is necessary to process.\n * @param {FieldsMapping} fields - Fields that are mapped from the data source.\n * @param {SortOrder='None'} sortOrder- Specifies final result sort order.\n */\n function groupDataSource(dataSource, fields, sortOrder) {\n if (sortOrder === void 0) { sortOrder = 'None'; }\n var curFields = extend({}, ListBase.defaultMappedFields, fields);\n var cusQuery = new Query().group(curFields.groupBy);\n // need to remove once sorting issues fixed in DataManager\n cusQuery = addSorting(sortOrder, 'key', cusQuery);\n var ds = getDataSource(dataSource, cusQuery);\n dataSource = [];\n for (var j = 0; j < ds.length; j++) {\n var itemObj = ds[j].items;\n var grpItem = {};\n var hdr = 'isHeader';\n grpItem[curFields.text] = ds[j].key;\n grpItem[hdr] = true;\n var newtext = curFields.text;\n if (newtext === 'id') {\n newtext = 'text';\n grpItem[newtext] = ds[j].key;\n }\n grpItem._id = 'group-list-item-' + (ds[j].key ?\n ds[j].key.toString().trim() : 'undefined');\n grpItem.items = itemObj;\n dataSource.push(grpItem);\n for (var k = 0; k < itemObj.length; k++) {\n dataSource.push(itemObj[k]);\n }\n }\n return dataSource;\n }\n ListBase.groupDataSource = groupDataSource;\n /**\n * Returns a sorted query object.\n * @param {SortOrder} sortOrder - Specifies that sort order.\n * @param {string} sortBy - Specifies sortBy fields.\n * @param {Query=new Query()} query - Pass if any existing query.\n */\n function addSorting(sortOrder, sortBy, query) {\n if (query === void 0) { query = new Query(); }\n if (sortOrder === 'Ascending') {\n query.sortBy(sortBy, 'ascending', true);\n }\n else if (sortOrder === 'Descending') {\n query.sortBy(sortBy, 'descending', true);\n }\n else {\n for (var i = 0; i < query.queries.length; i++) {\n if (query.queries[i].fn === 'onSortBy') {\n query.queries.splice(i, 1);\n }\n }\n }\n return query;\n }\n ListBase.addSorting = addSorting;\n /**\n * Return an array of JSON Data that processed based on queries.\n * @param {{[key:string]:Object}[]} dataSource - Specifies local JSON data source.\n * @param {Query} query - Specifies query that need to process.\n */\n function getDataSource(dataSource, query) {\n // tslint:disable-next-line\n return new DataManager(dataSource)\n .executeLocal(query);\n }\n ListBase.getDataSource = getDataSource;\n /**\n * Created JSON data based the UL and LI element\n * @param {HTMLElement|Element} element - UL element that need to convert as a JSON\n * @param {ListBaseOptions} options? - Specifies listbase option for fields.\n */\n function createJsonFromElement(element, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var fields = extend({}, ListBase.defaultMappedFields, curOpt.fields);\n var curEle = element.cloneNode(true);\n var jsonAr = [];\n curEle.classList.add('json-parent');\n var childs = curEle.querySelectorAll('.json-parent>li');\n curEle.classList.remove('json-parent');\n for (var i = 0; i < childs.length; i++) {\n var li = childs[i];\n var anchor = li.querySelector('a');\n var ul = li.querySelector('ul');\n var json = {};\n var childNodes = anchor ? anchor.childNodes : li.childNodes;\n var keys = Object.keys(childNodes);\n for (var i_1 = 0; i_1 < childNodes.length; i_1++) {\n if (!(childNodes[Number(keys[i_1])]).hasChildNodes()) {\n json[fields.text] = childNodes[Number(keys[i_1])].textContent;\n }\n }\n var attributes_1 = getAllAttributes(li);\n if (attributes_1.id) {\n json[fields.id] = attributes_1.id;\n delete attributes_1.id;\n }\n else {\n json[fields.id] = generateId();\n }\n if (Object.keys(attributes_1).length) {\n json[fields.htmlAttributes] = attributes_1;\n }\n if (anchor) {\n attributes_1 = getAllAttributes(anchor);\n if (Object.keys(attributes_1).length) {\n json[fields.urlAttributes] = attributes_1;\n }\n }\n if (ul) {\n json[fields.child] = createJsonFromElement(ul, options);\n }\n jsonAr.push(json);\n }\n return jsonAr;\n }\n ListBase.createJsonFromElement = createJsonFromElement;\n function typeofData(data) {\n var match = { typeof: null, item: null };\n for (var i = 0; i < data.length; i++) {\n if (!isNullOrUndefined(data[i])) {\n return match = { typeof: typeof data[i], item: data[i] };\n }\n }\n return match;\n }\n function setAttribute(element, elementAttributes) {\n var attr = {};\n merge(attr, elementAttributes);\n if (attr.class) {\n addClass([element], attr.class.split(' '));\n delete attr.class;\n }\n attributes(element, attr);\n }\n function getAllAttributes(element) {\n var attributes = {};\n var attr = element.attributes;\n for (var index = 0; index < attr.length; index++) {\n attributes[attr[index].nodeName] = attr[index].nodeValue;\n }\n return attributes;\n }\n /**\n * Created UL element from content template.\n * @param {string} template - that need to convert and generate li element.\n * @param {{[key:string]:Object}[]} dataSource - Specifies local JSON data source.\n * @param {ListBaseOptions} options? - Specifies listbase option for fields.\n */\n function renderContentTemplate(createElement, template, dataSource, \n // tslint:disable-next-line\n fields, options, componentInstance) {\n cssClass = getModuleClass(defaultListBaseOptions.moduleName);\n var ulElement = createElement('ul', { className: cssClass.ul, attrs: { role: 'presentation' } });\n var curOpt = extend({}, defaultListBaseOptions, options);\n var curFields = extend({}, ListBase.defaultMappedFields, fields);\n var compiledString = compile(template);\n var liCollection = [];\n var value;\n var id = generateId(); // generate id for drop-down-list option.\n for (var i = 0; i < dataSource.length; i++) {\n var fieldData = getFieldValues(dataSource[i], curFields);\n var curItem = dataSource[i];\n var isHeader = curItem.isHeader;\n if (typeof dataSource[i] === 'string' || typeof dataSource[i] === 'number') {\n value = curItem;\n }\n else {\n value = fieldData[curFields.value];\n }\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: curItem,\n text: value,\n options: curOpt,\n fields: curFields\n };\n curOpt.itemCreating(curData);\n }\n if (curOpt.itemCreating && typeof curOpt.itemCreating === 'function') {\n fieldData = getFieldValues(dataSource[i], curFields);\n if (typeof dataSource[i] === 'string' || typeof dataSource[i] === 'number') {\n value = curItem;\n }\n else {\n value = fieldData[curFields.value];\n }\n }\n var li = createElement('li', {\n id: id + '-' + i,\n className: isHeader ? cssClass.group : cssClass.li, attrs: { role: 'presentation' }\n });\n if (isHeader) {\n if (typeof dataSource[i] === 'string' || typeof dataSource[i] === 'number') {\n li.innerText = curItem;\n }\n else {\n li.innerText = fieldData[curFields.text];\n }\n }\n else {\n var currentID = isHeader ? curOpt.groupTemplateID : curOpt.templateID;\n if (isHeader) {\n append(compiledString(curItem, componentInstance, 'headerTemplate', currentID, !!curOpt.isStringTemplate), li);\n }\n else {\n append(compiledString(curItem, componentInstance, 'template', currentID, !!curOpt.isStringTemplate), li);\n }\n li.setAttribute('data-value', isNullOrUndefined(value) ? 'null' : value);\n li.setAttribute('role', 'option');\n }\n if (curOpt.itemCreated && typeof curOpt.itemCreated === 'function') {\n var curData = {\n dataSource: dataSource,\n curData: curItem,\n text: value,\n item: li,\n options: curOpt,\n fields: curFields\n };\n curOpt.itemCreated(curData);\n }\n liCollection.push(li);\n }\n append(liCollection, ulElement);\n return ulElement;\n }\n ListBase.renderContentTemplate = renderContentTemplate;\n /**\n * Created header items from group template.\n * @param {string} template - that need to convert and generate li element.\n * @param {{[key:string]:Object}[]} dataSource - Specifies local JSON data source.\n * @param {FieldsMapping} fields - Specifies fields for mapping the dataSource.\n * @param {Element[]} headerItems? - Specifies listbase header items.\n */\n // tslint:disable-next-line\n function renderGroupTemplate(groupTemplate, groupDataSource, fields, \n // tslint:disable-next-line\n headerItems, options, componentInstance) {\n var compiledString = compile(groupTemplate);\n var curFields = extend({}, ListBase.defaultMappedFields, fields);\n var curOpt = extend({}, defaultListBaseOptions, options);\n var category = curFields.groupBy;\n for (var _i = 0, headerItems_1 = headerItems; _i < headerItems_1.length; _i++) {\n var header = headerItems_1[_i];\n var headerData = {};\n headerData[category] = header.textContent;\n header.innerHTML = '';\n append(compiledString(headerData, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate), header);\n }\n return headerItems;\n }\n ListBase.renderGroupTemplate = renderGroupTemplate;\n function generateId() {\n return Math.floor((1 + Math.random()) * 0x10000)\n .toString(16)\n .substring(1);\n }\n ListBase.generateId = generateId;\n function processSubChild(createElement, fieldData, fields, ds, options, element, level) {\n // Get SubList\n var subDS = fieldData[fields.child] || [];\n var hasChildren = fieldData[fields.hasChildren];\n //Create Sub child\n if (subDS.length) {\n hasChildren = true;\n element.classList.add(cssClass.hasChild);\n if (options.processSubChild) {\n var subLi = createListFromJson(createElement, subDS, options, ++level);\n element.appendChild(subLi);\n }\n }\n // Create expand and collapse node\n if (!!options.expandCollapse && hasChildren && !options.template) {\n element.firstElementChild.classList.add(cssClass.iconWrapper);\n var expandElement = options.expandIconPosition === 'Left' ? prepend : append;\n expandElement([createElement('div', { className: 'e-icons ' + options.expandIconClass })], element.querySelector('.' + cssClass.textContent));\n }\n }\n function generateSingleLevelLI(createElement, item, fieldData, fields, className, innerElements, grpLI, id, index, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var text = item;\n var value = item;\n var dataSource;\n if (typeof item !== 'string' && typeof item !== 'number' && typeof item !== 'boolean') {\n dataSource = item;\n text = (typeof fieldData[fields.text] === 'boolean' || typeof fieldData[fields.text] === 'number') ?\n fieldData[fields.text] : (fieldData[fields.text] || '');\n value = fieldData[fields.value];\n }\n var elementID;\n if (!isNullOrUndefined(dataSource) && !isNullOrUndefined(fieldData[fields.id])\n && fieldData[fields.id] !== '') {\n elementID = id;\n }\n else {\n elementID = id + '-' + index;\n }\n var li = createElement('li', {\n className: (grpLI === true ? cssClass.group : cssClass.li) + ' ' + (isNullOrUndefined(className) ? '' : className),\n id: elementID, attrs: (ariaAttributes.groupItemRole !== '' && ariaAttributes.itemRole !== '' ?\n { role: (grpLI === true ? ariaAttributes.groupItemRole : ariaAttributes.itemRole) } : {})\n });\n if (dataSource && fieldData.hasOwnProperty(fields.enabled) && fieldData[fields.enabled].toString() === 'false') {\n li.classList.add(cssClass.disabled);\n }\n if (grpLI) {\n li.innerText = text;\n }\n else {\n li.setAttribute('data-value', isNullOrUndefined(value) ? 'null' : value);\n li.setAttribute('role', 'option');\n if (dataSource && fieldData.hasOwnProperty(fields.htmlAttributes) && fieldData[fields.htmlAttributes]) {\n setAttribute(li, fieldData[fields.htmlAttributes]);\n }\n if (innerElements.length && !curOpt.itemNavigable) {\n append(innerElements, li);\n }\n if (dataSource && (fieldData[fields.url] || (fieldData[fields.urlAttributes] &&\n fieldData[fields.urlAttributes].href))) {\n li.appendChild(anchorTag(createElement, dataSource, fields, text, innerElements, curOpt.itemNavigable));\n }\n else {\n if (innerElements.length && curOpt.itemNavigable) {\n append(innerElements, li);\n }\n li.appendChild(document.createTextNode(text));\n }\n }\n return li;\n }\n function getModuleClass(moduleName) {\n var moduleClass;\n return moduleClass = {\n li: \"e-\" + moduleName + \"-item\",\n ul: \"e-\" + moduleName + \"-parent e-ul\",\n group: \"e-\" + moduleName + \"-group-item\",\n icon: \"e-\" + moduleName + \"-icon\",\n text: \"e-\" + moduleName + \"-text\",\n check: \"e-\" + moduleName + \"-check\",\n checked: 'e-checked',\n selected: 'e-selected',\n expanded: 'e-expanded',\n textContent: 'e-text-content',\n hasChild: 'e-has-child',\n level: 'e-level',\n url: \"e-\" + moduleName + \"-url\",\n collapsible: 'e-icon-collapsible',\n disabled: 'e-disabled',\n image: \"e-\" + moduleName + \"-img\",\n iconWrapper: 'e-icon-wrapper',\n anchorWrap: 'e-anchor-wrap',\n navigable: 'e-navigable',\n };\n }\n function anchorTag(createElement, dataSource, fields, text, innerElements, isFullNavigation) {\n var fieldData = getFieldValues(dataSource, fields);\n var attr = { href: fieldData[fields.url] };\n if (fieldData.hasOwnProperty(fields.urlAttributes) && fieldData[fields.urlAttributes]) {\n merge(attr, fieldData[fields.urlAttributes]);\n attr.href = fieldData[fields.url] ? fieldData[fields.url] :\n fieldData[fields.urlAttributes].href;\n }\n var anchorTag;\n if (!isFullNavigation) {\n anchorTag = createElement('a', { className: cssClass.text + ' ' + cssClass.url, innerHTML: text });\n }\n else {\n anchorTag = createElement('a', { className: cssClass.text + ' ' + cssClass.url });\n var anchorWrapper = createElement('div', { className: cssClass.anchorWrap });\n if (innerElements && innerElements.length) {\n append(innerElements, anchorWrapper);\n }\n anchorWrapper.appendChild(document.createTextNode(text));\n append([anchorWrapper], anchorTag);\n }\n setAttribute(anchorTag, attr);\n return anchorTag;\n }\n // tslint:disable-next-line\n /* tslint:disable:align */\n function generateLI(createElement, item, fieldData, \n // tslint:disable-next-line\n fields, className, options, componentInstance) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n var text = item;\n var uID;\n var grpLI;\n var dataSource;\n if (typeof item !== 'string' && typeof item !== 'number') {\n dataSource = item;\n text = fieldData[fields.text] || '';\n // tslint:disable-next-line\n uID = (isNullOrUndefined(fieldData['_id'])) ? fieldData[fields.id] : fieldData['_id'];\n grpLI = (item.hasOwnProperty('isHeader') && item.isHeader)\n ? true : false;\n }\n if (options && options.enableHtmlSanitizer) {\n text = text;\n }\n var li = createElement('li', {\n className: (grpLI === true ? cssClass.group : cssClass.li) + ' ' + (isNullOrUndefined(className) ? '' : className),\n attrs: (ariaAttributes.groupItemRole !== '' && ariaAttributes.itemRole !== '' ?\n { role: (grpLI === true ? ariaAttributes.groupItemRole : ariaAttributes.itemRole) } : {})\n });\n !isNullOrUndefined(uID) ? li.setAttribute('data-uid', uID) : li.setAttribute('data-uid', generateId());\n var blazId = 'BlazId';\n if (options && !!options.removeBlazorID\n && typeof item === 'object'\n && item.hasOwnProperty(blazId)) {\n delete item[blazId];\n }\n if (grpLI && options && options.groupTemplate) {\n var compiledString = compile(options.groupTemplate);\n append(compiledString(item, componentInstance, 'groupTemplate', curOpt.groupTemplateID, !!curOpt.isStringTemplate), li);\n }\n else if (!grpLI && options && options.template) {\n var compiledString = compile(options.template);\n append(compiledString(item, componentInstance, 'template', curOpt.templateID, !!curOpt.isStringTemplate), li);\n }\n else {\n var innerDiv = createElement('div', {\n className: cssClass.textContent,\n attrs: (ariaAttributes.wrapperRole !== '' ? { role: ariaAttributes.wrapperRole } : {})\n });\n if (dataSource && (fieldData[fields.url] || (fieldData[fields.urlAttributes] &&\n fieldData[fields.urlAttributes].href))) {\n innerDiv.appendChild(anchorTag(createElement, dataSource, fields, text, null, curOpt.itemNavigable));\n }\n else {\n var element = createElement('span', {\n className: cssClass.text,\n attrs: (ariaAttributes.itemText !== '' ? { role: ariaAttributes.itemText } : {})\n });\n if (options && options.enableHtmlSanitizer) {\n element.innerText = text;\n }\n else {\n element.innerHTML = text;\n }\n innerDiv.appendChild(element);\n }\n li.appendChild(innerDiv);\n }\n return li;\n }\n /**\n * Returns UL element based on the given LI element.\n * @param {HTMLElement[]} liElement - Specifies array of LI element.\n * @param {string} className? - Specifies class name that need to be added in UL element.\n * @param {ListBaseOptions} options? - Specifies ListBase options.\n */\n function generateUL(createElement, liElement, className, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n var ariaAttributes = extend({}, defaultAriaAttributes, curOpt.ariaAttributes);\n cssClass = getModuleClass(curOpt.moduleName);\n var ulElement = createElement('ul', {\n className: cssClass.ul + ' ' + (isNullOrUndefined(className) ? '' : className),\n attrs: (ariaAttributes.listRole !== '' ? { role: ariaAttributes.listRole } : {})\n });\n append(liElement, ulElement);\n return ulElement;\n }\n ListBase.generateUL = generateUL;\n /**\n * Returns LI element with additional DIV tag based on the given LI element.\n * @param {liElement} liElement - Specifies LI element.\n * @param {string} className? - Specifies class name that need to be added in created DIV element.\n * @param {ListBaseOptions} options? - Specifies ListBase options.\n */\n function generateIcon(createElement, liElement, className, options) {\n var curOpt = extend({}, defaultListBaseOptions, options);\n cssClass = getModuleClass(curOpt.moduleName);\n var expandElement = curOpt.expandIconPosition === 'Left' ? prepend : append;\n expandElement([createElement('div', {\n className: 'e-icons ' + curOpt.expandIconClass + ' ' +\n (isNullOrUndefined(className) ? '' : className)\n })], liElement.querySelector('.' + cssClass.textContent));\n return liElement;\n }\n ListBase.generateIcon = generateIcon;\n})(ListBase || (ListBase = {}));\n/**\n * Used to get dataSource item from complex data using fields.\n * @param {{[key:string]:Object}|string[]|string} dataSource - Specifies an JSON or String data.\n * @param {FieldsMapping} fields - Fields that are mapped from the dataSource.\n */\nexport function getFieldValues(dataItem, fields) {\n var fieldData = {};\n if (isNullOrUndefined(dataItem) || typeof (dataItem) === 'string' || typeof (dataItem) === 'number'\n || !isNullOrUndefined(dataItem.isHeader)) {\n return dataItem;\n }\n else {\n for (var _i = 0, _a = Object.keys(fields); _i < _a.length; _i++) {\n var field = _a[_i];\n var dataField = fields[field];\n var value = !isNullOrUndefined(dataField) &&\n typeof (dataField) === 'string' ? getValue(dataField, dataItem) : undefined;\n if (!isNullOrUndefined(value)) {\n fieldData[dataField] = value;\n }\n }\n }\n return fieldData;\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { merge, extend, isNullOrUndefined, setValue, getValue } from '@syncfusion/ej2-base';\nimport { DataUtil } from './util';\nimport { Query, Predicate } from './query';\nvar consts = { GroupGuid: '{271bbba0-1ee7}' };\n/**\n * Adaptors are specific data source type aware interfaces that are used by DataManager to communicate with DataSource.\n * This is the base adaptor class that other adaptors can extend.\n * @hidden\n */\nvar Adaptor = /** @class */ (function () {\n /**\n * Constructor for Adaptor class\n * @param {DataOptions} ds?\n * @hidden\n * @returns aggregates\n */\n function Adaptor(ds) {\n // common options for all the adaptors \n this.options = {\n from: 'table',\n requestType: 'json',\n sortBy: 'sorted',\n select: 'select',\n skip: 'skip',\n group: 'group',\n take: 'take',\n search: 'search',\n count: 'requiresCounts',\n where: 'where',\n aggregates: 'aggregates',\n expand: 'expand'\n };\n /**\n * Specifies the type of adaptor.\n * @default Adaptor\n */\n this.type = Adaptor;\n this.dataSource = ds;\n this.pvt = {};\n }\n /**\n * Returns the data from the query processing.\n * @param {Object} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @returns Object\n */\n Adaptor.prototype.processResponse = function (data, ds, query, xhr) {\n return data;\n };\n return Adaptor;\n}());\nexport { Adaptor };\n/**\n * JsonAdaptor is used to process JSON data. It contains methods to process the given JSON data based on the queries.\n * @hidden\n */\nvar JsonAdaptor = /** @class */ (function (_super) {\n __extends(JsonAdaptor, _super);\n function JsonAdaptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Process the JSON data based on the provided queries.\n * @param {DataManager} dataManager\n * @param {Query} query\n * @returns Object\n */\n JsonAdaptor.prototype.processQuery = function (dataManager, query) {\n var result = dataManager.dataSource.json.slice(0);\n var count = result.length;\n var countFlg = true;\n var ret;\n var key;\n var lazyLoad = {};\n var keyCount = 0;\n var group = [];\n var page;\n for (var i = 0; i < query.lazyLoad.length; i++) {\n keyCount++;\n lazyLoad[query.lazyLoad[i].key] = query.lazyLoad[i].value;\n }\n var agg = {};\n for (var i = 0; i < query.queries.length; i++) {\n key = query.queries[i];\n if ((key.fn === 'onPage' || key.fn === 'onGroup') && query.lazyLoad.length) {\n if (key.fn === 'onGroup') {\n group.push(key.e);\n }\n if (key.fn === 'onPage') {\n page = key.e;\n }\n continue;\n }\n ret = this[key.fn].call(this, result, key.e, query);\n if (key.fn === 'onAggregates') {\n agg[key.e.field + ' - ' + key.e.type] = ret;\n }\n else {\n result = ret !== undefined ? ret : result;\n }\n if (key.fn === 'onPage' || key.fn === 'onSkip' || key.fn === 'onTake' || key.fn === 'onRange') {\n countFlg = false;\n }\n if (countFlg) {\n count = result.length;\n }\n }\n if (keyCount) {\n var args = {\n query: query, lazyLoad: lazyLoad, result: result, group: group, page: page\n };\n var lazyLoadData = this.lazyLoadGroup(args);\n result = lazyLoadData.result;\n count = lazyLoadData.count;\n }\n if (query.isCountRequired) {\n result = {\n result: result,\n count: count,\n aggregates: agg\n };\n }\n return result;\n };\n /**\n * Perform lazy load grouping in JSON array based on the given query and lazy load details.\n * @param {LazyLoadGroupArgs} args\n */\n JsonAdaptor.prototype.lazyLoadGroup = function (args) {\n var count = 0;\n var agg = this.getAggregate(args.query);\n var result = args.result;\n if (!isNullOrUndefined(args.lazyLoad.onDemandGroupInfo)) {\n var req = args.lazyLoad.onDemandGroupInfo;\n for (var i = req.where.length - 1; i >= 0; i--) {\n result = this.onWhere(result, req.where[i]);\n }\n if (args.group.length !== req.level) {\n var field = args.group[req.level].fieldName;\n result = DataUtil.group(result, field, agg, null, null, args.group[0].comparer, true);\n }\n count = result.length;\n var data = result;\n result = result.slice(req.skip);\n result = result.slice(0, req.take);\n if (args.group.length !== req.level) {\n this.formGroupResult(result, data);\n }\n }\n else {\n var field = args.group[0].fieldName;\n result = DataUtil.group(result, field, agg, null, null, args.group[0].comparer, true);\n count = result.length;\n var data = result;\n if (args.page) {\n result = this.onPage(result, args.page, args.query);\n }\n this.formGroupResult(result, data);\n }\n return { result: result, count: count };\n };\n JsonAdaptor.prototype.formGroupResult = function (result, data) {\n if (result.length && data.length) {\n var uid = 'GroupGuid';\n var childLevel = 'childLevels';\n var level = 'level';\n var records = 'records';\n result[uid] = data[uid];\n result[childLevel] = data[childLevel];\n result[level] = data[level];\n result[records] = data[records];\n }\n return result;\n };\n /**\n * Separate the aggregate query from the given queries\n * @param {Query} query\n */\n JsonAdaptor.prototype.getAggregate = function (query) {\n var aggQuery = Query.filterQueries(query.queries, 'onAggregates');\n var agg = [];\n if (aggQuery.length) {\n var tmp = void 0;\n for (var i = 0; i < aggQuery.length; i++) {\n tmp = aggQuery[i].e;\n agg.push({ type: tmp.type, field: DataUtil.getValue(tmp.field, query) });\n }\n }\n return agg;\n };\n /**\n * Performs batch update in the JSON array which add, remove and update records.\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {RemoteArgs} e\n */\n JsonAdaptor.prototype.batchRequest = function (dm, changes, e) {\n var i;\n var deletedRecordsLen = changes.deletedRecords.length;\n for (i = 0; i < changes.addedRecords.length; i++) {\n this.insert(dm, changes.addedRecords[i]);\n }\n for (i = 0; i < changes.changedRecords.length; i++) {\n this.update(dm, e.key, changes.changedRecords[i]);\n }\n for (i = 0; i < deletedRecordsLen; i++) {\n this.remove(dm, e.key, changes.deletedRecords[i]);\n }\n return changes;\n };\n /**\n * Performs filter operation with the given data and where query.\n * @param {Object[]} ds\n * @param {{validate:Function}} e\n */\n JsonAdaptor.prototype.onWhere = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.filter(function (obj) {\n if (e) {\n return e.validate(obj);\n }\n });\n };\n /**\n * Returns aggregate function based on the aggregate type.\n * @param {Object[]} ds\n * @param {{field:string} e\n * @param {string}} type\n */\n JsonAdaptor.prototype.onAggregates = function (ds, e) {\n var fn = DataUtil.aggregates[e.type];\n if (!ds || !fn || ds.length === 0) {\n return null;\n }\n return fn(ds, e.field);\n };\n /**\n * Performs search operation based on the given query.\n * @param {Object[]} ds\n * @param {QueryOptions} e\n */\n JsonAdaptor.prototype.onSearch = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n if (e.fieldNames.length === 0) {\n DataUtil.getFieldList(ds[0], e.fieldNames);\n }\n return ds.filter(function (obj) {\n for (var j = 0; j < e.fieldNames.length; j++) {\n if (e.comparer.call(obj, DataUtil.getObject(e.fieldNames[j], obj), e.searchKey, e.ignoreCase, e.ignoreAccent)) {\n return true;\n }\n }\n return false;\n });\n };\n /**\n * Sort the data with given direction and field.\n * @param {Object[]} ds\n * @param {{comparer:(a:Object} e\n * @param {Object} b\n */\n JsonAdaptor.prototype.onSortBy = function (ds, e, query) {\n if (!ds || !ds.length) {\n return ds;\n }\n var fnCompare;\n var field = DataUtil.getValue(e.fieldName, query);\n if (!field) {\n return ds.sort(e.comparer);\n }\n if (field instanceof Array) {\n field = field.slice(0);\n for (var i = field.length - 1; i >= 0; i--) {\n if (!field[i]) {\n continue;\n }\n fnCompare = e.comparer;\n if (DataUtil.endsWith(field[i], ' desc')) {\n fnCompare = DataUtil.fnSort('descending');\n field[i] = field[i].replace(' desc', '');\n }\n ds = DataUtil.sort(ds, field[i], fnCompare);\n }\n return ds;\n }\n return DataUtil.sort(ds, field, e.comparer);\n };\n /**\n * Group the data based on the given query.\n * @param {Object[]} ds\n * @param {QueryOptions} e\n * @param {Query} query\n */\n JsonAdaptor.prototype.onGroup = function (ds, e, query) {\n if (!ds || !ds.length) {\n return ds;\n }\n var agg = this.getAggregate(query);\n return DataUtil.group(ds, DataUtil.getValue(e.fieldName, query), agg, null, null, e.comparer);\n };\n /**\n * Retrieves records based on the given page index and size.\n * @param {Object[]} ds\n * @param {{pageSize:number} e\n * @param {number}} pageIndex\n * @param {Query} query\n */\n JsonAdaptor.prototype.onPage = function (ds, e, query) {\n var size = DataUtil.getValue(e.pageSize, query);\n var start = (DataUtil.getValue(e.pageIndex, query) - 1) * size;\n var end = start + size;\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.slice(start, end);\n };\n /**\n * Retrieves records based on the given start and end index from query.\n * @param {Object[]} ds\n * @param {{start:number} e\n * @param {number}} end\n */\n JsonAdaptor.prototype.onRange = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.slice(DataUtil.getValue(e.start), DataUtil.getValue(e.end));\n };\n /**\n * Picks the given count of records from the top of the datasource.\n * @param {Object[]} ds\n * @param {{nos:number}} e\n */\n JsonAdaptor.prototype.onTake = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.slice(0, DataUtil.getValue(e.nos));\n };\n /**\n * Skips the given count of records from the data source.\n * @param {Object[]} ds\n * @param {{nos:number}} e\n */\n JsonAdaptor.prototype.onSkip = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return ds.slice(DataUtil.getValue(e.nos));\n };\n /**\n * Selects specified columns from the data source.\n * @param {Object[]} ds\n * @param {{fieldNames:string}} e\n */\n JsonAdaptor.prototype.onSelect = function (ds, e) {\n if (!ds || !ds.length) {\n return ds;\n }\n return DataUtil.select(ds, DataUtil.getValue(e.fieldNames));\n };\n /**\n * Inserts new record in the table.\n * @param {DataManager} dm\n * @param {Object} data\n * @param {number} position\n */\n JsonAdaptor.prototype.insert = function (dm, data, tableName, query, position) {\n if (isNullOrUndefined(position)) {\n return dm.dataSource.json.push(data);\n }\n else {\n return dm.dataSource.json.splice(position, 0, data);\n }\n };\n /**\n * Remove the data from the dataSource based on the key field value.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n * @returns null\n */\n JsonAdaptor.prototype.remove = function (dm, keyField, value, tableName) {\n var ds = dm.dataSource.json;\n var i;\n if (typeof value === 'object' && !(value instanceof Date)) {\n value = DataUtil.getObject(keyField, value);\n }\n for (i = 0; i < ds.length; i++) {\n if (DataUtil.getObject(keyField, ds[i]) === value) {\n break;\n }\n }\n return i !== ds.length ? ds.splice(i, 1) : null;\n };\n /**\n * Updates existing record and saves the changes to the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n * @returns null\n */\n JsonAdaptor.prototype.update = function (dm, keyField, value, tableName) {\n var ds = dm.dataSource.json;\n var i;\n var key;\n if (!isNullOrUndefined(keyField)) {\n key = getValue(keyField, value);\n }\n for (i = 0; i < ds.length; i++) {\n if (!isNullOrUndefined(keyField) && (getValue(keyField, ds[i])) === key) {\n break;\n }\n }\n return i < ds.length ? merge(ds[i], value) : null;\n };\n return JsonAdaptor;\n}(Adaptor));\nexport { JsonAdaptor };\n/**\n * URL Adaptor of DataManager can be used when you are required to use remote service to retrieve data.\n * It interacts with server-side for all DataManager Queries and CRUD operations.\n * @hidden\n */\nvar UrlAdaptor = /** @class */ (function (_super) {\n __extends(UrlAdaptor, _super);\n function UrlAdaptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Process the query to generate request body.\n * @param {DataManager} dm\n * @param {Query} query\n * @param {Object[]} hierarchyFilters?\n * @returns p\n */\n // tslint:disable-next-line:max-func-body-length\n UrlAdaptor.prototype.processQuery = function (dm, query, hierarchyFilters) {\n var queries = this.getQueryRequest(query);\n var singles = Query.filterQueryLists(query.queries, ['onSelect', 'onPage', 'onSkip', 'onTake', 'onRange']);\n var params = query.params;\n var url = dm.dataSource.url;\n var temp;\n var skip;\n var take = null;\n var options = this.options;\n var request = { sorts: [], groups: [], filters: [], searches: [], aggregates: [] };\n // calc Paging & Range\n if ('onPage' in singles) {\n temp = singles.onPage;\n skip = DataUtil.getValue(temp.pageIndex, query);\n take = DataUtil.getValue(temp.pageSize, query);\n skip = (skip - 1) * take;\n }\n else if ('onRange' in singles) {\n temp = singles.onRange;\n skip = temp.start;\n take = temp.end - temp.start;\n }\n // Sorting\n for (var i = 0; i < queries.sorts.length; i++) {\n temp = DataUtil.getValue(queries.sorts[i].e.fieldName, query);\n request.sorts.push(DataUtil.callAdaptorFunction(this, 'onEachSort', { name: temp, direction: queries.sorts[i].e.direction }, query));\n }\n // hierarchy\n if (hierarchyFilters) {\n temp = this.getFiltersFrom(hierarchyFilters, query);\n if (temp) {\n request.filters.push(DataUtil.callAdaptorFunction(this, 'onEachWhere', temp.toJson(), query));\n }\n }\n // Filters\n for (var i = 0; i < queries.filters.length; i++) {\n request.filters.push(DataUtil.callAdaptorFunction(this, 'onEachWhere', queries.filters[i].e.toJson(), query));\n var keys_3 = typeof request.filters[i] === 'object' ? Object.keys(request.filters[i]) : [];\n for (var _i = 0, keys_1 = keys_3; _i < keys_1.length; _i++) {\n var prop = keys_1[_i];\n if (DataUtil.isNull((request)[prop])) {\n delete request[prop];\n }\n }\n }\n // Searches\n for (var i = 0; i < queries.searches.length; i++) {\n temp = queries.searches[i].e;\n request.searches.push(DataUtil.callAdaptorFunction(this, 'onEachSearch', {\n fields: temp.fieldNames,\n operator: temp.operator,\n key: temp.searchKey,\n ignoreCase: temp.ignoreCase\n }, query));\n }\n // Grouping\n for (var i = 0; i < queries.groups.length; i++) {\n request.groups.push(DataUtil.getValue(queries.groups[i].e.fieldName, query));\n }\n // aggregates\n for (var i = 0; i < queries.aggregates.length; i++) {\n temp = queries.aggregates[i].e;\n request.aggregates.push({ type: temp.type, field: DataUtil.getValue(temp.field, query) });\n }\n var req = {};\n this.getRequestQuery(options, query, singles, request, req);\n // Params\n DataUtil.callAdaptorFunction(this, 'addParams', { dm: dm, query: query, params: params, reqParams: req });\n if (query.lazyLoad.length) {\n for (var i = 0; i < query.lazyLoad.length; i++) {\n req[query.lazyLoad[i].key] = query.lazyLoad[i].value;\n }\n }\n // cleanup\n var keys = Object.keys(req);\n for (var _a = 0, keys_2 = keys; _a < keys_2.length; _a++) {\n var prop = keys_2[_a];\n if (DataUtil.isNull(req[prop]) || req[prop] === '' || req[prop].length === 0) {\n delete req[prop];\n }\n }\n if (!(options.skip in req && options.take in req) && take !== null) {\n req[options.skip] = DataUtil.callAdaptorFunction(this, 'onSkip', skip, query);\n req[options.take] = DataUtil.callAdaptorFunction(this, 'onTake', take, query);\n }\n var p = this.pvt;\n this.pvt = {};\n if (this.options.requestType === 'json') {\n return {\n data: JSON.stringify(req, DataUtil.parse.jsonDateReplacer),\n url: url,\n pvtData: p,\n type: 'POST',\n contentType: 'application/json; charset=utf-8'\n };\n }\n temp = this.convertToQueryString(req, query, dm);\n temp = (dm.dataSource.url.indexOf('?') !== -1 ? '&' : '/') + temp;\n return {\n type: 'GET', url: temp.length ? url.replace(/\\/*$/, temp) : url, pvtData: p\n };\n };\n UrlAdaptor.prototype.getRequestQuery = function (options, query, singles, request, request1) {\n var param = 'param';\n var req = request1;\n req[options.from] = query.fromTable;\n if (options.apply && query.distincts.length) {\n req[options.apply] = 'onDistinct' in this ? DataUtil.callAdaptorFunction(this, 'onDistinct', query.distincts) : '';\n }\n if (!query.distincts.length && options.expand) {\n req[options.expand] = 'onExpand' in this && 'onSelect' in singles ?\n DataUtil.callAdaptorFunction(this, 'onExpand', { selects: DataUtil.getValue(singles.onSelect.fieldNames, query), expands: query.expands }, query) : query.expands;\n }\n req[options.select] = 'onSelect' in singles && !query.distincts.length ?\n DataUtil.callAdaptorFunction(this, 'onSelect', DataUtil.getValue(singles.onSelect.fieldNames, query), query) : '';\n req[options.count] = query.isCountRequired ? DataUtil.callAdaptorFunction(this, 'onCount', query.isCountRequired, query) : '';\n req[options.search] = request.searches.length ? DataUtil.callAdaptorFunction(this, 'onSearch', request.searches, query) : '';\n req[options.skip] = 'onSkip' in singles ?\n DataUtil.callAdaptorFunction(this, 'onSkip', DataUtil.getValue(singles.onSkip.nos, query), query) : '';\n req[options.take] = 'onTake' in singles ?\n DataUtil.callAdaptorFunction(this, 'onTake', DataUtil.getValue(singles.onTake.nos, query), query) : '';\n req[options.where] = request.filters.length || request.searches.length ?\n DataUtil.callAdaptorFunction(this, 'onWhere', request.filters, query) : '';\n req[options.sortBy] = request.sorts.length ? DataUtil.callAdaptorFunction(this, 'onSortBy', request.sorts, query) : '';\n req[options.group] = request.groups.length ? DataUtil.callAdaptorFunction(this, 'onGroup', request.groups, query) : '';\n req[options.aggregates] = request.aggregates.length ?\n DataUtil.callAdaptorFunction(this, 'onAggregates', request.aggregates, query) : '';\n req[param] = [];\n };\n /**\n * Convert the object from processQuery to string which can be added query string.\n * @param {Object} req\n * @param {Query} query\n * @param {DataManager} dm\n */\n UrlAdaptor.prototype.convertToQueryString = function (request, query, dm) {\n return '';\n // this needs to be overridden\n };\n /**\n * Return the data from the data manager processing.\n * @param {DataResult} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @param {Object} request?\n * @param {CrudOptions} changes?\n */\n UrlAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n if (xhr && xhr.getResponseHeader('Content-Type') &&\n xhr.getResponseHeader('Content-Type').indexOf('application/json') !== -1) {\n var handleTimeZone = DataUtil.timeZoneHandling;\n if (ds && !ds.timeZoneHandling) {\n DataUtil.timeZoneHandling = false;\n }\n data = DataUtil.parse.parseJson(data);\n DataUtil.timeZoneHandling = handleTimeZone;\n }\n var requests = request;\n var pvt = requests.pvtData || {};\n var groupDs = data ? data.groupDs : [];\n if (xhr && xhr.getResponseHeader('Content-Type') &&\n xhr.getResponseHeader('Content-Type').indexOf('xml') !== -1) {\n return (query.isCountRequired ? { result: [], count: 0 } : []);\n }\n var d = JSON.parse(requests.data);\n if (d && d.action === 'batch' && data && data.addedRecords) {\n changes.addedRecords = data.addedRecords;\n return changes;\n }\n if (data && data.d) {\n data = data.d;\n }\n var args = {};\n if (data && 'count' in data) {\n args.count = data.count;\n }\n args.result = data && data.result ? data.result : data;\n var isExpand = false;\n if (Array.isArray(data.result) && data.result.length) {\n var key = 'key';\n var val = 'value';\n var level = 'level';\n if (!isNullOrUndefined(data.result[0][key])) {\n args.result = this.formRemoteGroupedData(args.result, 1, pvt.groups.length - 1);\n }\n if (query && query.lazyLoad.length && pvt.groups.length) {\n for (var i = 0; i < query.lazyLoad.length; i++) {\n if (query.lazyLoad[i][key] === 'onDemandGroupInfo') {\n var value = query.lazyLoad[i][val][level];\n if (pvt.groups.length === value) {\n isExpand = true;\n }\n }\n }\n }\n }\n if (!isExpand) {\n this.getAggregateResult(pvt, data, args, groupDs, query);\n }\n return DataUtil.isNull(args.count) ? args.result : { result: args.result, count: args.count, aggregates: args.aggregates };\n };\n UrlAdaptor.prototype.formRemoteGroupedData = function (data, level, childLevel) {\n for (var i = 0; i < data.length; i++) {\n if (data[i].items.length && Object.keys(data[i].items[0]).indexOf('key') > -1) {\n this.formRemoteGroupedData(data[i].items, level + 1, childLevel - 1);\n }\n }\n var uid = 'GroupGuid';\n var childLvl = 'childLevels';\n var lvl = 'level';\n var records = 'records';\n data[uid] = consts[uid];\n data[lvl] = level;\n data[childLvl] = childLevel;\n data[records] = data[0].items.length ? this.getGroupedRecords(data, !isNullOrUndefined(data[0].items[records])) : [];\n return data;\n };\n UrlAdaptor.prototype.getGroupedRecords = function (data, hasRecords) {\n var childGroupedRecords = [];\n var records = 'records';\n for (var i = 0; i < data.length; i++) {\n if (!hasRecords) {\n for (var j = 0; j < data[i].items.length; j++) {\n childGroupedRecords.push(data[i].items[j]);\n }\n }\n else {\n childGroupedRecords = childGroupedRecords.concat(data[i].items[records]);\n }\n }\n return childGroupedRecords;\n };\n /**\n * Add the group query to the adaptor`s option.\n * @param {Object[]} e\n * @returns void\n */\n UrlAdaptor.prototype.onGroup = function (e) {\n this.pvt.groups = e;\n return e;\n };\n /**\n * Add the aggregate query to the adaptor`s option.\n * @param {Aggregates[]} e\n * @returns void\n */\n UrlAdaptor.prototype.onAggregates = function (e) {\n this.pvt.aggregates = e;\n };\n /**\n * Prepare the request body based on the newly added, removed and updated records.\n * The result is used by the batch request.\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {Object} e\n */\n UrlAdaptor.prototype.batchRequest = function (dm, changes, e, query, original) {\n var url;\n var key;\n return {\n type: 'POST',\n url: dm.dataSource.batchUrl || dm.dataSource.crudUrl || dm.dataSource.removeUrl || dm.dataSource.url,\n contentType: 'application/json; charset=utf-8',\n dataType: 'json',\n data: JSON.stringify(extend({}, {\n changed: changes.changedRecords,\n added: changes.addedRecords,\n deleted: changes.deletedRecords,\n action: 'batch',\n table: e[url],\n key: e[key]\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n /**\n * Method will trigger before send the request to server side.\n * Used to set the custom header or modify the request options.\n * @param {DataManager} dm\n * @param {XMLHttpRequest} request\n * @returns void\n */\n UrlAdaptor.prototype.beforeSend = function (dm, request) {\n // need to extend this method\n };\n /**\n * Prepare and returns request body which is used to insert a new record in the table.\n * @param {DataManager} dm\n * @param {Object} data\n * @param {string} tableName\n */\n UrlAdaptor.prototype.insert = function (dm, data, tableName, query) {\n return {\n url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify(extend({}, {\n value: data,\n table: tableName,\n action: 'insert'\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n /**\n * Prepare and return request body which is used to remove record from the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {number|string} value\n * @param {string} tableName\n */\n UrlAdaptor.prototype.remove = function (dm, keyField, value, tableName, query) {\n return {\n type: 'POST',\n url: dm.dataSource.removeUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify(extend({}, {\n key: value,\n keyColumn: keyField,\n table: tableName,\n action: 'remove'\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n /**\n * Prepare and return request body which is used to update record.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName\n */\n UrlAdaptor.prototype.update = function (dm, keyField, value, tableName, query) {\n return {\n type: 'POST',\n url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify(extend({}, {\n value: value,\n action: 'update',\n keyColumn: keyField,\n key: DataUtil.getObject(keyField, value),\n table: tableName\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n /**\n * To generate the predicate based on the filtered query.\n * @param {Object[]|string[]|number[]} data\n * @param {Query} query\n * @hidden\n */\n UrlAdaptor.prototype.getFiltersFrom = function (data, query) {\n var key = query.fKey;\n var value;\n var prop = key;\n var pKey = query.key;\n var predicats = [];\n if (typeof data[0] !== 'object') {\n prop = null;\n }\n for (var i = 0; i < data.length; i++) {\n if (typeof data[0] === 'object') {\n value = DataUtil.getObject(pKey || prop, data[i]);\n }\n else {\n value = data[i];\n }\n predicats.push(new Predicate(key, 'equal', value));\n }\n return Predicate.or(predicats);\n };\n UrlAdaptor.prototype.getAggregateResult = function (pvt, data, args, groupDs, query) {\n var pData = data;\n if (data && data.result) {\n pData = data.result;\n }\n if (pvt && pvt.aggregates && pvt.aggregates.length) {\n var agg = pvt.aggregates;\n var fn = void 0;\n var aggregateData = pData;\n var res = {};\n if (data.aggregate) {\n aggregateData = data.aggregate;\n }\n for (var i = 0; i < agg.length; i++) {\n fn = DataUtil.aggregates[agg[i].type];\n if (fn) {\n res[agg[i].field + ' - ' + agg[i].type] = fn(aggregateData, agg[i].field);\n }\n }\n args.aggregates = res;\n }\n var key = 'key';\n var isServerGrouping = Array.isArray(data.result) && data.result.length && !isNullOrUndefined(data.result[0][key]);\n if (pvt && pvt.groups && pvt.groups.length && !isServerGrouping) {\n var groups = pvt.groups;\n for (var i = 0; i < groups.length; i++) {\n var level = null;\n if (!isNullOrUndefined(groupDs)) {\n groupDs = DataUtil.group(groupDs, groups[i]);\n }\n var groupQuery = Query.filterQueries(query.queries, 'onGroup')[i].e;\n pData = DataUtil.group(pData, groups[i], pvt.aggregates, level, groupDs, groupQuery.comparer);\n }\n args.result = pData;\n }\n return args;\n };\n UrlAdaptor.prototype.getQueryRequest = function (query) {\n var req = { sorts: [], groups: [], filters: [], searches: [], aggregates: [] };\n req.sorts = Query.filterQueries(query.queries, 'onSortBy');\n req.groups = Query.filterQueries(query.queries, 'onGroup');\n req.filters = Query.filterQueries(query.queries, 'onWhere');\n req.searches = Query.filterQueries(query.queries, 'onSearch');\n req.aggregates = Query.filterQueries(query.queries, 'onAggregates');\n return req;\n };\n UrlAdaptor.prototype.addParams = function (options) {\n var req = options.reqParams;\n if (options.params.length) {\n req.params = {};\n }\n for (var _i = 0, _a = options.params; _i < _a.length; _i++) {\n var tmp = _a[_i];\n if (req[tmp.key]) {\n throw new Error('Query() - addParams: Custom Param is conflicting other request arguments');\n }\n req[tmp.key] = tmp.value;\n if (tmp.fn) {\n req[tmp.key] = tmp.fn.call(options.query, tmp.key, options.query, options.dm);\n }\n req.params[tmp.key] = req[tmp.key];\n }\n };\n return UrlAdaptor;\n}(Adaptor));\nexport { UrlAdaptor };\n/**\n * OData Adaptor that is extended from URL Adaptor, is used for consuming data through OData Service.\n * @hidden\n */\nvar ODataAdaptor = /** @class */ (function (_super) {\n __extends(ODataAdaptor, _super);\n function ODataAdaptor(props) {\n var _this = _super.call(this) || this;\n // options replaced the default adaptor options\n _this.options = extend({}, _this.options, {\n requestType: 'get',\n accept: 'application/json;odata=light;q=1,application/json;odata=verbose;q=0.5',\n multipartAccept: 'multipart/mixed',\n sortBy: '$orderby',\n select: '$select',\n skip: '$skip',\n take: '$top',\n count: '$inlinecount',\n where: '$filter',\n expand: '$expand',\n batch: '$batch',\n changeSet: '--changeset_',\n batchPre: 'batch_',\n contentId: 'Content-Id: ',\n batchContent: 'Content-Type: multipart/mixed; boundary=',\n changeSetContent: 'Content-Type: application/http\\nContent-Transfer-Encoding: binary ',\n batchChangeSetContentType: 'Content-Type: application/json; charset=utf-8 ',\n updateType: 'PUT'\n });\n extend(_this.options, props || {});\n return _this;\n }\n ODataAdaptor.prototype.getModuleName = function () {\n return 'ODataAdaptor';\n };\n /**\n * Generate request string based on the filter criteria from query.\n * @param {Predicate} pred\n * @param {boolean} requiresCast?\n */\n ODataAdaptor.prototype.onPredicate = function (predicate, query, requiresCast) {\n var returnValue = '';\n var operator;\n var guid;\n var val = predicate.value;\n var type = typeof val;\n var field = predicate.field ? ODataAdaptor.getField(predicate.field) : null;\n if (val instanceof Date) {\n val = 'datetime\\'' + DataUtil.parse.replacer(val) + '\\'';\n }\n if (type === 'string') {\n val = encodeURIComponent(val);\n val = '\\'' + val + '\\'';\n if (requiresCast) {\n field = 'cast(' + field + ', \\'Edm.String\\')';\n }\n if (DataUtil.parse.isGuid(val)) {\n guid = 'guid';\n }\n if (predicate.ignoreCase) {\n if (!guid) {\n field = 'tolower(' + field + ')';\n }\n val = val.toLowerCase();\n }\n }\n operator = DataUtil.odBiOperator[predicate.operator];\n if (operator) {\n returnValue += field;\n returnValue += operator;\n if (guid) {\n returnValue += guid;\n }\n return returnValue + val;\n }\n if (!isNullOrUndefined(this.getModuleName) && this.getModuleName() === 'ODataV4Adaptor') {\n operator = DataUtil.odv4UniOperator[predicate.operator];\n }\n else {\n operator = DataUtil.odUniOperator[predicate.operator];\n }\n if (operator === 'substringof') {\n var temp = val;\n val = field;\n field = temp;\n }\n returnValue += operator + '(';\n returnValue += field + ',';\n if (guid) {\n returnValue += guid;\n }\n returnValue += val + ')';\n return returnValue;\n };\n ODataAdaptor.prototype.addParams = function (options) {\n _super.prototype.addParams.call(this, options);\n delete options.reqParams.params;\n };\n /**\n * Generate request string based on the multiple filter criteria from query.\n * @param {Predicate} pred\n * @param {boolean} requiresCast?\n */\n ODataAdaptor.prototype.onComplexPredicate = function (predicate, query, requiresCast) {\n var res = [];\n for (var i = 0; i < predicate.predicates.length; i++) {\n res.push('(' + this.onEachWhere(predicate.predicates[i], query, requiresCast) + ')');\n }\n return res.join(' ' + predicate.condition + ' ');\n };\n /**\n * Generate query string based on the multiple filter criteria from query.\n * @param {Predicate} filter\n * @param {boolean} requiresCast?\n */\n ODataAdaptor.prototype.onEachWhere = function (filter, query, requiresCast) {\n return filter.isComplex ? this.onComplexPredicate(filter, query, requiresCast) : this.onPredicate(filter, query, requiresCast);\n };\n /**\n * Generate query string based on the multiple filter criteria from query.\n * @param {string[]} filters\n */\n ODataAdaptor.prototype.onWhere = function (filters) {\n if (this.pvt.search) {\n filters.push(this.onEachWhere(this.pvt.search, null, true));\n }\n return filters.join(' and ');\n };\n /**\n * Generate query string based on the multiple search criteria from query.\n * @param {{fields:string[]} e\n * @param {string} operator\n * @param {string} key\n * @param {boolean}} ignoreCase\n */\n ODataAdaptor.prototype.onEachSearch = function (e) {\n if (e.fields && e.fields.length === 0) {\n DataUtil.throwError('Query() - Search : oData search requires list of field names to search');\n }\n var filter = this.pvt.search || [];\n for (var i = 0; i < e.fields.length; i++) {\n filter.push(new Predicate(e.fields[i], e.operator, e.key, e.ignoreCase));\n }\n this.pvt.search = filter;\n };\n /**\n * Generate query string based on the search criteria from query.\n * @param {Object} e\n */\n ODataAdaptor.prototype.onSearch = function (e) {\n this.pvt.search = Predicate.or(this.pvt.search);\n return '';\n };\n /**\n * Generate query string based on multiple sort criteria from query.\n * @param {QueryOptions} e\n */\n ODataAdaptor.prototype.onEachSort = function (e) {\n var res = [];\n if (e.name instanceof Array) {\n for (var i = 0; i < e.name.length; i++) {\n res.push(ODataAdaptor.getField(e.name[i]) + (e.direction === 'descending' ? ' desc' : ''));\n }\n }\n else {\n res.push(ODataAdaptor.getField(e.name) + (e.direction === 'descending' ? ' desc' : ''));\n }\n return res.join(',');\n };\n /**\n * Returns sort query string.\n * @param {string[]} e\n */\n ODataAdaptor.prototype.onSortBy = function (e) {\n return e.reverse().join(',');\n };\n /**\n * Adds the group query to the adaptor option.\n * @param {Object[]} e\n * @returns string\n */\n ODataAdaptor.prototype.onGroup = function (e) {\n this.pvt.groups = e;\n return [];\n };\n /**\n * Returns the select query string.\n * @param {string[]} e\n */\n ODataAdaptor.prototype.onSelect = function (e) {\n for (var i = 0; i < e.length; i++) {\n e[i] = ODataAdaptor.getField(e[i]);\n }\n return e.join(',');\n };\n /**\n * Add the aggregate query to the adaptor option.\n * @param {Object[]} e\n * @returns string\n */\n ODataAdaptor.prototype.onAggregates = function (e) {\n this.pvt.aggregates = e;\n return '';\n };\n /**\n * Returns the query string which requests total count from the data source.\n * @param {boolean} e\n * @returns string\n */\n ODataAdaptor.prototype.onCount = function (e) {\n return e === true ? 'allpages' : '';\n };\n /**\n * Method will trigger before send the request to server side.\n * Used to set the custom header or modify the request options.\n * @param {DataManager} dm\n * @param {XMLHttpRequest} request\n * @param {Ajax} settings?\n */\n ODataAdaptor.prototype.beforeSend = function (dm, request, settings) {\n if (DataUtil.endsWith(settings.url, this.options.batch) && settings.type.toLowerCase() === 'post') {\n request.setRequestHeader('Accept', this.options.multipartAccept);\n request.setRequestHeader('DataServiceVersion', '2.0');\n request.overrideMimeType('text/plain; charset=x-user-defined');\n }\n else {\n request.setRequestHeader('Accept', this.options.accept);\n }\n request.setRequestHeader('DataServiceVersion', '2.0');\n request.setRequestHeader('MaxDataServiceVersion', '2.0');\n };\n /**\n * Returns the data from the query processing.\n * @param {DataResult} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @param {Ajax} request?\n * @param {CrudOptions} changes?\n * @returns aggregateResult\n */\n ODataAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n var metaCheck = 'odata.metadata';\n if ((request && request.type === 'GET') && !this.rootUrl && data[metaCheck]) {\n var dataUrls = data[metaCheck].split('/$metadata#');\n this.rootUrl = dataUrls[0];\n this.resourceTableName = dataUrls[1];\n }\n var pvtData = 'pvtData';\n if (!isNullOrUndefined(data.d)) {\n var dataCopy = ((query && query.isCountRequired) ? data.d.results : data.d);\n var metaData = '__metadata';\n if (!isNullOrUndefined(dataCopy)) {\n for (var i = 0; i < dataCopy.length; i++) {\n if (!isNullOrUndefined(dataCopy[i][metaData])) {\n delete dataCopy[i][metaData];\n }\n }\n }\n }\n var pvt = request && request[pvtData];\n var emptyAndBatch = this.processBatchResponse(data, query, xhr, request, changes);\n if (emptyAndBatch) {\n return emptyAndBatch;\n }\n var versionCheck = xhr && request.getResponseHeader('DataServiceVersion');\n var count = null;\n var version = (versionCheck && parseInt(versionCheck, 10)) || 2;\n if (query && query.isCountRequired) {\n var oDataCount = '__count';\n if (data[oDataCount] || data['odata.count']) {\n count = data[oDataCount] || data['odata.count'];\n }\n if (data.d) {\n data = data.d;\n }\n if (data[oDataCount] || data['odata.count']) {\n count = data[oDataCount] || data['odata.count'];\n }\n }\n if (version === 3 && data.value) {\n data = data.value;\n }\n if (data.d) {\n data = data.d;\n }\n if (version < 3 && data.results) {\n data = data.results;\n }\n var args = {};\n args.count = count;\n args.result = data;\n this.getAggregateResult(pvt, data, args, null, query);\n return DataUtil.isNull(count) ? args.result : { result: args.result, count: args.count, aggregates: args.aggregates };\n };\n /**\n * Converts the request object to query string.\n * @param {Object} req\n * @param {Query} query\n * @param {DataManager} dm\n * @returns tableName\n */\n ODataAdaptor.prototype.convertToQueryString = function (request, query, dm) {\n var res = [];\n var table = 'table';\n var tableName = request[table] || '';\n var format = '$format';\n delete request[table];\n if (dm.dataSource.requiresFormat) {\n request[format] = 'json';\n }\n var keys = Object.keys(request);\n for (var _i = 0, keys_4 = keys; _i < keys_4.length; _i++) {\n var prop = keys_4[_i];\n res.push(prop + '=' + request[prop]);\n }\n res = res.join('&');\n if (dm.dataSource.url && dm.dataSource.url.indexOf('?') !== -1 && !tableName) {\n return res;\n }\n return res.length ? tableName + '?' + res : tableName || '';\n };\n ODataAdaptor.prototype.localTimeReplacer = function (key, convertObj) {\n for (var _i = 0, _a = !isNullOrUndefined(convertObj) ? Object.keys(convertObj) : []; _i < _a.length; _i++) {\n var prop = _a[_i];\n if ((convertObj[prop] instanceof Date)) {\n convertObj[prop] = DataUtil.dateParse.toLocalTime(convertObj[prop]);\n }\n }\n return convertObj;\n };\n /**\n * Prepare and returns request body which is used to insert a new record in the table.\n * @param {DataManager} dm\n * @param {Object} data\n * @param {string} tableName?\n */\n ODataAdaptor.prototype.insert = function (dm, data, tableName) {\n return {\n url: (dm.dataSource.insertUrl || dm.dataSource.url).replace(/\\/*$/, tableName ? '/' + tableName : ''),\n data: JSON.stringify(data, this.options.localTime ? this.localTimeReplacer : null)\n };\n };\n /**\n * Prepare and return request body which is used to remove record from the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {number} value\n * @param {string} tableName?\n */\n ODataAdaptor.prototype.remove = function (dm, keyField, value, tableName) {\n var url;\n if (typeof value === 'string' && !DataUtil.parse.isGuid(value)) {\n url = \"('\" + value + \"')\";\n }\n else {\n url = \"(\" + value + \")\";\n }\n return {\n type: 'DELETE',\n url: (dm.dataSource.removeUrl || dm.dataSource.url).replace(/\\/*$/, tableName ? '/' + tableName : '') + url\n };\n };\n /**\n * Updates existing record and saves the changes to the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n * @returns this\n */\n ODataAdaptor.prototype.update = function (dm, keyField, value, tableName, query, original) {\n if (this.options.updateType === 'PATCH' && !isNullOrUndefined(original)) {\n value = this.compareAndRemove(value, original, keyField);\n }\n var url;\n if (typeof value[keyField] === 'string' && !DataUtil.parse.isGuid(value[keyField])) {\n url = \"('\" + value[keyField] + \"')\";\n }\n else {\n url = \"(\" + value[keyField] + \")\";\n }\n return {\n type: this.options.updateType,\n url: (dm.dataSource.updateUrl || dm.dataSource.url).replace(/\\/*$/, tableName ? '/' + tableName : '') + url,\n data: JSON.stringify(value, this.options.localTime ? this.localTimeReplacer : null),\n accept: this.options.accept\n };\n };\n /**\n * Prepare the request body based on the newly added, removed and updated records.\n * The result is used by the batch request.\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {RemoteArgs} e\n * @returns {Object}\n */\n ODataAdaptor.prototype.batchRequest = function (dm, changes, e, query, original) {\n var initialGuid = e.guid = DataUtil.getGuid(this.options.batchPre);\n var url = this.rootUrl ? this.rootUrl + '/' + this.options.batch :\n dm.dataSource.url.replace(/\\/*$/, '/' + this.options.batch);\n e.url = this.resourceTableName ? this.resourceTableName : e.url;\n var args = {\n url: e.url,\n key: e.key,\n cid: 1,\n cSet: DataUtil.getGuid(this.options.changeSet)\n };\n var req = '--' + initialGuid + '\\n';\n req += 'Content-Type: multipart/mixed; boundary=' + args.cSet.replace('--', '') + '\\n';\n this.pvt.changeSet = 0;\n req += this.generateInsertRequest(changes.addedRecords, args, dm);\n req += this.generateUpdateRequest(changes.changedRecords, args, dm, original ? original.changedRecords : []);\n req += this.generateDeleteRequest(changes.deletedRecords, args, dm);\n req += args.cSet + '--\\n';\n req += '--' + initialGuid + '--';\n return {\n type: 'POST',\n url: url,\n dataType: 'json',\n contentType: 'multipart/mixed; charset=UTF-8;boundary=' + initialGuid,\n data: req\n };\n };\n /**\n * Generate the string content from the removed records.\n * The result will be send during batch update.\n * @param {Object[]} arr\n * @param {RemoteArgs} e\n * @returns this\n */\n ODataAdaptor.prototype.generateDeleteRequest = function (arr, e, dm) {\n if (!arr) {\n return '';\n }\n var req = '';\n var stat = {\n 'method': 'DELETE ',\n 'url': function (data, i, key) {\n var url = DataUtil.getObject(key, data[i]);\n if (typeof url === 'number' || DataUtil.parse.isGuid(url)) {\n return '(' + url + ')';\n }\n else if (url instanceof Date) {\n var dateTime = data[i][key];\n return '(' + dateTime.toJSON() + ')';\n }\n else {\n return \"('\" + url + \"')\";\n }\n },\n 'data': function (data, i) { return ''; }\n };\n req = this.generateBodyContent(arr, e, stat, dm);\n return req + '\\n';\n };\n /**\n * Generate the string content from the inserted records.\n * The result will be send during batch update.\n * @param {Object[]} arr\n * @param {RemoteArgs} e\n */\n ODataAdaptor.prototype.generateInsertRequest = function (arr, e, dm) {\n if (!arr) {\n return '';\n }\n var req = '';\n var stat = {\n 'method': 'POST ',\n 'url': function (data, i, key) { return ''; },\n 'data': function (data, i) { return JSON.stringify(data[i]) + '\\n\\n'; }\n };\n req = this.generateBodyContent(arr, e, stat, dm);\n return req;\n };\n /**\n * Generate the string content from the updated records.\n * The result will be send during batch update.\n * @param {Object[]} arr\n * @param {RemoteArgs} e\n */\n ODataAdaptor.prototype.generateUpdateRequest = function (arr, e, dm, org) {\n var _this = this;\n if (!arr) {\n return '';\n }\n var req = '';\n arr.forEach(function (change) { return change = _this.compareAndRemove(change, org.filter(function (o) { return DataUtil.getObject(e.key, o) === DataUtil.getObject(e.key, change); })[0], e.key); });\n var stat = {\n 'method': this.options.updateType + ' ',\n 'url': function (data, i, key) {\n if (typeof data[i][key] === 'number' || DataUtil.parse.isGuid(data[i][key])) {\n return '(' + data[i][key] + ')';\n }\n else if (data[i][key] instanceof Date) {\n var date = data[i][key];\n return '(' + date.toJSON() + ')';\n }\n else {\n return \"('\" + data[i][key] + \"')\";\n }\n },\n 'data': function (data, i) { return JSON.stringify(data[i]) + '\\n\\n'; }\n };\n req = this.generateBodyContent(arr, e, stat, dm);\n return req;\n };\n ODataAdaptor.getField = function (prop) {\n return prop.replace(/\\./g, '/');\n };\n ODataAdaptor.prototype.generateBodyContent = function (arr, e, stat, dm) {\n var req = '';\n for (var i = 0; i < arr.length; i++) {\n req += '\\n' + e.cSet + '\\n';\n req += this.options.changeSetContent + '\\n\\n';\n req += stat.method;\n if (stat.method === 'POST ') {\n req += (dm.dataSource.insertUrl || dm.dataSource.crudUrl || e.url) + stat.url(arr, i, e.key) + ' HTTP/1.1\\n';\n }\n else if (stat.method === 'PUT ' || stat.method === 'PATCH ') {\n req += (dm.dataSource.updateUrl || dm.dataSource.crudUrl || e.url) + stat.url(arr, i, e.key) + ' HTTP/1.1\\n';\n }\n else if (stat.method === 'DELETE ') {\n req += (dm.dataSource.removeUrl || dm.dataSource.crudUrl || e.url) + stat.url(arr, i, e.key) + ' HTTP/1.1\\n';\n }\n req += 'Accept: ' + this.options.accept + '\\n';\n req += 'Content-Id: ' + this.pvt.changeSet++ + '\\n';\n req += this.options.batchChangeSetContentType + '\\n';\n if (!isNullOrUndefined(arr[i]['@odata.etag'])) {\n req += 'If-Match: ' + arr[i]['@odata.etag'] + '\\n\\n';\n delete arr[i]['@odata.etag'];\n }\n else {\n req += '\\n';\n }\n req += stat.data(arr, i);\n }\n return req;\n };\n ODataAdaptor.prototype.processBatchResponse = function (data, query, xhr, request, changes) {\n if (xhr && xhr.getResponseHeader('Content-Type') && xhr.getResponseHeader('Content-Type').indexOf('xml') !== -1) {\n return (query.isCountRequired ? { result: [], count: 0 } : []);\n }\n if (request && this.options.batch && DataUtil.endsWith(request.url, this.options.batch) && request.type.toLowerCase() === 'post') {\n var guid = xhr.getResponseHeader('Content-Type');\n var cIdx = void 0;\n var jsonObj = void 0;\n var d = data + '';\n guid = guid.substring(guid.indexOf('=batchresponse') + 1);\n d = d.split(guid);\n if (d.length < 2) {\n return {};\n }\n d = d[1];\n var exVal = /(?:\\bContent-Type.+boundary=)(changesetresponse.+)/i.exec(d);\n if (exVal) {\n d.replace(exVal[0], '');\n }\n var changeGuid = exVal ? exVal[1] : '';\n d = d.split(changeGuid);\n for (var i = d.length; i > -1; i--) {\n if (!/\\bContent-ID:/i.test(d[i]) || !/\\bHTTP.+201/.test(d[i])) {\n continue;\n }\n cIdx = parseInt(/\\bContent-ID: (\\d+)/i.exec(d[i])[1], 10);\n if (changes.addedRecords[cIdx]) {\n jsonObj = DataUtil.parse.parseJson(/^\\{.+\\}/m.exec(d[i])[0]);\n extend({}, changes.addedRecords[cIdx], this.processResponse(jsonObj));\n }\n }\n return changes;\n }\n return null;\n };\n ODataAdaptor.prototype.compareAndRemove = function (data, original, key) {\n var _this = this;\n if (isNullOrUndefined(original)) {\n return data;\n }\n Object.keys(data).forEach(function (prop) {\n if (prop !== key && prop !== '@odata.etag') {\n if (DataUtil.isPlainObject(data[prop])) {\n _this.compareAndRemove(data[prop], original[prop]);\n var final = Object.keys(data[prop]).filter(function (data) { return data !== '@odata.etag'; });\n if (final.length === 0) {\n delete data[prop];\n }\n }\n else if (data[prop] === original[prop]) {\n delete data[prop];\n }\n else if (data[prop] && original[prop] && data[prop].valueOf() === original[prop].valueOf()) {\n delete data[prop];\n }\n }\n });\n return data;\n };\n return ODataAdaptor;\n}(UrlAdaptor));\nexport { ODataAdaptor };\n/**\n * The OData v4 is an improved version of OData protocols.\n * The DataManager uses the ODataV4Adaptor to consume OData v4 services.\n * @hidden\n */\nvar ODataV4Adaptor = /** @class */ (function (_super) {\n __extends(ODataV4Adaptor, _super);\n function ODataV4Adaptor(props) {\n var _this = _super.call(this, props) || this;\n // options replaced the default adaptor options\n _this.options = extend({}, _this.options, {\n requestType: 'get',\n accept: 'application/json, text/javascript, */*; q=0.01',\n multipartAccept: 'multipart/mixed',\n sortBy: '$orderby',\n select: '$select',\n skip: '$skip',\n take: '$top',\n count: '$count',\n search: '$search',\n where: '$filter',\n expand: '$expand',\n batch: '$batch',\n changeSet: '--changeset_',\n batchPre: 'batch_',\n contentId: 'Content-Id: ',\n batchContent: 'Content-Type: multipart/mixed; boundary=',\n changeSetContent: 'Content-Type: application/http\\nContent-Transfer-Encoding: binary ',\n batchChangeSetContentType: 'Content-Type: application/json; charset=utf-8 ',\n updateType: 'PATCH',\n localTime: false,\n apply: '$apply'\n });\n extend(_this.options, props || {});\n return _this;\n }\n /**\n * @hidden\n */\n ODataV4Adaptor.prototype.getModuleName = function () {\n return 'ODataV4Adaptor';\n };\n /**\n * Returns the query string which requests total count from the data source.\n * @param {boolean} e\n * @returns string\n */\n ODataV4Adaptor.prototype.onCount = function (e) {\n return e === true ? 'true' : '';\n };\n /**\n * Generate request string based on the filter criteria from query.\n * @param {Predicate} pred\n * @param {boolean} requiresCast?\n */\n ODataV4Adaptor.prototype.onPredicate = function (predicate, query, requiresCast) {\n var returnValue = '';\n var val = predicate.value;\n var isDate = val instanceof Date;\n if (query instanceof Query) {\n var queries = this.getQueryRequest(query);\n for (var i = 0; i < queries.filters.length; i++) {\n if (queries.filters[i].e.key === predicate.value) {\n requiresCast = true;\n }\n }\n }\n returnValue = _super.prototype.onPredicate.call(this, predicate, query, requiresCast);\n if (isDate) {\n returnValue = returnValue.replace(/datetime'(.*)'$/, '$1');\n }\n if (DataUtil.parse.isGuid(val)) {\n returnValue = returnValue.replace('guid', '').replace(/'/g, '');\n }\n return returnValue;\n };\n /**\n * Generate query string based on the multiple search criteria from query.\n * @param {{fields:string[]} e\n * @param {string} operator\n * @param {string} key\n * @param {boolean}} ignoreCase\n */\n ODataV4Adaptor.prototype.onEachSearch = function (e) {\n var search = this.pvt.searches || [];\n search.push(e.key);\n this.pvt.searches = search;\n };\n /**\n * Generate query string based on the search criteria from query.\n * @param {Object} e\n */\n ODataV4Adaptor.prototype.onSearch = function (e) {\n return this.pvt.searches.join(' OR ');\n };\n /**\n * Returns the expand query string.\n * @param {string} e\n */\n ODataV4Adaptor.prototype.onExpand = function (e) {\n var _this = this;\n var selected = {};\n var expanded = {};\n var expands = e.expands.slice();\n var exArr = [];\n var selects = e.selects.filter(function (item) { return item.indexOf('.') > -1; });\n selects.forEach(function (select) {\n var splits = select.split('.');\n if (!(splits[0] in selected)) {\n selected[splits[0]] = [];\n }\n selected[splits[0]].push(splits[1]);\n });\n //Auto expand from select query\n Object.keys(selected).forEach(function (expand) {\n if ((expands.indexOf(expand) === -1)) {\n expands.push(expand);\n }\n });\n expands.forEach(function (expand) {\n expanded[expand] = expand in selected ? expand + \"(\" + _this.options.select + \"=\" + selected[expand].join(',') + \")\" : expand;\n });\n Object.keys(expanded).forEach(function (ex) { return exArr.push(expanded[ex]); });\n return exArr.join(',');\n };\n /**\n * Returns the groupby query string.\n * @param {string} e\n */\n ODataV4Adaptor.prototype.onDistinct = function (distinctFields) {\n var fields = distinctFields.map(function (field) { return ODataAdaptor.getField(field); }).join(',');\n return \"groupby((\" + fields + \"))\";\n };\n /**\n * Returns the select query string.\n * @param {string[]} e\n */\n ODataV4Adaptor.prototype.onSelect = function (e) {\n return _super.prototype.onSelect.call(this, e.filter(function (item) { return item.indexOf('.') === -1; }));\n };\n /**\n * Method will trigger before send the request to server side.\n * Used to set the custom header or modify the request options.\n * @param {DataManager} dm\n * @param {XMLHttpRequest} request\n * @param {Ajax} settings\n * @returns void\n */\n ODataV4Adaptor.prototype.beforeSend = function (dm, request, settings) {\n if (settings.type === 'POST' || settings.type === 'PUT' || settings.type === 'PATCH') {\n request.setRequestHeader('Prefer', 'return=representation');\n }\n request.setRequestHeader('Accept', this.options.accept);\n };\n /**\n * Returns the data from the query processing.\n * @param {DataResult} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @param {Ajax} request?\n * @param {CrudOptions} changes?\n * @returns aggregateResult\n */\n ODataV4Adaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n var metaName = '@odata.context';\n if ((request && request.type === 'GET') && !this.rootUrl && data[metaName]) {\n var dataUrl = data[metaName].split('/$metadata#');\n this.rootUrl = dataUrl[0];\n this.resourceTableName = dataUrl[1];\n }\n var pvtData = 'pvtData';\n var pvt = request && request[pvtData];\n var emptyAndBatch = _super.prototype.processBatchResponse.call(this, data, query, xhr, request, changes);\n if (emptyAndBatch) {\n return emptyAndBatch;\n }\n var count = null;\n var dataCount = '@odata.count';\n if (query && query.isCountRequired) {\n if (dataCount in data) {\n count = data[dataCount];\n }\n }\n data = !isNullOrUndefined(data.value) ? data.value : data;\n var args = {};\n args.count = count;\n args.result = data;\n this.getAggregateResult(pvt, data, args, null, query);\n return DataUtil.isNull(count) ? args.result : { result: args.result, count: count, aggregates: args.aggregates };\n };\n return ODataV4Adaptor;\n}(ODataAdaptor));\nexport { ODataV4Adaptor };\n/**\n * The Web API is a programmatic interface to define the request and response messages system that is mostly exposed in JSON or XML.\n * The DataManager uses the WebApiAdaptor to consume Web API.\n * Since this adaptor is targeted to interact with Web API created using OData endpoint, it is extended from ODataAdaptor\n * @hidden\n */\nvar WebApiAdaptor = /** @class */ (function (_super) {\n __extends(WebApiAdaptor, _super);\n function WebApiAdaptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n WebApiAdaptor.prototype.getModuleName = function () {\n return 'WebApiAdaptor';\n };\n /**\n * Prepare and returns request body which is used to insert a new record in the table.\n * @param {DataManager} dm\n * @param {Object} data\n * @param {string} tableName?\n */\n WebApiAdaptor.prototype.insert = function (dm, data, tableName) {\n return {\n type: 'POST',\n url: dm.dataSource.url,\n data: JSON.stringify(data)\n };\n };\n /**\n * Prepare and return request body which is used to remove record from the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {number} value\n * @param {string} tableName?\n */\n WebApiAdaptor.prototype.remove = function (dm, keyField, value, tableName) {\n return {\n type: 'DELETE',\n url: dm.dataSource.url + '/' + value,\n data: JSON.stringify(value)\n };\n };\n /**\n * Prepare and return request body which is used to update record.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n */\n WebApiAdaptor.prototype.update = function (dm, keyField, value, tableName) {\n return {\n type: 'PUT',\n url: dm.dataSource.url,\n data: JSON.stringify(value)\n };\n };\n WebApiAdaptor.prototype.batchRequest = function (dm, changes, e) {\n var _this = this;\n var initialGuid = e.guid = DataUtil.getGuid(this.options.batchPre);\n var url = dm.dataSource.url.replace(/\\/*$/, '/' + this.options.batch);\n e.url = this.resourceTableName ? this.resourceTableName : e.url;\n var req = [];\n var _loop_1 = function (i, x) {\n changes.addedRecords.forEach(function (j, d) {\n var stat = {\n 'method': 'POST ',\n 'url': function (data, i, key) { return ''; },\n 'data': function (data, i) { return JSON.stringify(data[i]) + '\\n\\n'; }\n };\n req.push('--' + initialGuid);\n req.push('Content-Type: application/http; msgtype=request', '');\n req.push('POST ' + '/api/' + (dm.dataSource.insertUrl || dm.dataSource.crudUrl || e.url)\n + stat.url(changes.addedRecords, i, e.key) + ' HTTP/1.1');\n req.push('Content-Type: ' + 'application/json; charset=utf-8');\n req.push('Host: ' + location.host);\n req.push('', j ? JSON.stringify(j) : '');\n });\n };\n //insertion\n for (var i = 0, x = changes.addedRecords.length; i < x; i++) {\n _loop_1(i, x);\n }\n var _loop_2 = function (i, x) {\n changes.changedRecords.forEach(function (j, d) {\n var stat = {\n 'method': _this.options.updateType + ' ',\n 'url': function (data, i, key) { return ''; },\n 'data': function (data, i) { return JSON.stringify(data[i]) + '\\n\\n'; }\n };\n req.push('--' + initialGuid);\n req.push('Content-Type: application/http; msgtype=request', '');\n req.push('PUT ' + '/api/' + (dm.dataSource.updateUrl || dm.dataSource.crudUrl || e.url)\n + stat.url(changes.changedRecords, i, e.key) + ' HTTP/1.1');\n req.push('Content-Type: ' + 'application/json; charset=utf-8');\n req.push('Host: ' + location.host);\n req.push('', j ? JSON.stringify(j) : '');\n });\n };\n //updation \n for (var i = 0, x = changes.changedRecords.length; i < x; i++) {\n _loop_2(i, x);\n }\n var _loop_3 = function (i, x) {\n changes.deletedRecords.forEach(function (j, d) {\n var state = {\n 'mtd': 'DELETE ',\n 'url': function (data, i, key) {\n var url = DataUtil.getObject(key, data[i]);\n if (typeof url === 'number' || DataUtil.parse.isGuid(url)) {\n return '/' + url;\n }\n else if (url instanceof Date) {\n var datTime = data[i][key];\n return '/' + datTime.toJSON();\n }\n else {\n return \"/'\" + url + \"'\";\n }\n },\n 'data': function (data, i) { return ''; }\n };\n req.push('--' + initialGuid);\n req.push('Content-Type: application/http; msgtype=request', '');\n req.push('DELETE ' + '/api/' + (dm.dataSource.removeUrl || dm.dataSource.crudUrl || e.url)\n + state.url(changes.deletedRecords, i, e.key) + ' HTTP/1.1');\n req.push('Content-Type: ' + 'application/json; charset=utf-8');\n req.push('Host: ' + location.host);\n req.push('', j ? JSON.stringify(j) : '');\n });\n };\n //deletion\n for (var i = 0, x = changes.deletedRecords.length; i < x; i++) {\n _loop_3(i, x);\n }\n req.push('--' + initialGuid + '--', '');\n return {\n type: 'POST',\n url: url,\n contentType: 'multipart/mixed; boundary=' + initialGuid,\n data: req.join('\\r\\n')\n };\n };\n /**\n * Method will trigger before send the request to server side.\n * Used to set the custom header or modify the request options.\n * @param {DataManager} dm\n * @param {XMLHttpRequest} request\n * @param {Ajax} settings\n * @returns void\n */\n WebApiAdaptor.prototype.beforeSend = function (dm, request, settings) {\n request.setRequestHeader('Accept', 'application/json, text/javascript, */*; q=0.01');\n };\n /**\n * Returns the data from the query processing.\n * @param {DataResult} data\n * @param {DataOptions} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @param {Ajax} request?\n * @param {CrudOptions} changes?\n * @returns aggregateResult\n */\n WebApiAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n var pvtData = 'pvtData';\n var pvt = request && request[pvtData];\n var count = null;\n var args = {};\n if (request && request.type.toLowerCase() !== 'post') {\n var versionCheck = xhr && request.getResponseHeader('DataServiceVersion');\n var version = (versionCheck && parseInt(versionCheck, 10)) || 2;\n if (query && query.isCountRequired) {\n if (!DataUtil.isNull(data.Count)) {\n count = data.Count;\n }\n }\n if (version < 3 && data.Items) {\n data = data.Items;\n }\n args.count = count;\n args.result = data;\n this.getAggregateResult(pvt, data, args, null, query);\n }\n args.result = args.result || data;\n return DataUtil.isNull(count) ? args.result : { result: args.result, count: args.count, aggregates: args.aggregates };\n };\n return WebApiAdaptor;\n}(ODataAdaptor));\nexport { WebApiAdaptor };\n/**\n * WebMethodAdaptor can be used by DataManager to interact with web method.\n * @hidden\n */\nvar WebMethodAdaptor = /** @class */ (function (_super) {\n __extends(WebMethodAdaptor, _super);\n function WebMethodAdaptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Prepare the request body based on the query.\n * The query information can be accessed at the WebMethod using variable named `value`.\n * @param {DataManager} dm\n * @param {Query} query\n * @param {Object[]} hierarchyFilters?\n * @returns application\n */\n WebMethodAdaptor.prototype.processQuery = function (dm, query, hierarchyFilters) {\n var obj = new UrlAdaptor().processQuery(dm, query, hierarchyFilters);\n var getData = 'data';\n var data = DataUtil.parse.parseJson(obj[getData]);\n var result = {};\n var value = 'value';\n if (data.param) {\n for (var i = 0; i < data.param.length; i++) {\n var param = data.param[i];\n var key = Object.keys(param)[0];\n result[key] = param[key];\n }\n }\n result[value] = data;\n var pvtData = 'pvtData';\n var url = 'url';\n return {\n data: JSON.stringify(result),\n url: obj[url],\n pvtData: obj[pvtData],\n type: 'POST',\n contentType: 'application/json; charset=utf-8'\n };\n };\n return WebMethodAdaptor;\n}(UrlAdaptor));\nexport { WebMethodAdaptor };\n/**\n * RemoteSaveAdaptor, extended from JsonAdaptor and it is used for binding local data and performs all DataManager queries in client-side.\n * It interacts with server-side only for CRUD operations.\n * @hidden\n */\nvar RemoteSaveAdaptor = /** @class */ (function (_super) {\n __extends(RemoteSaveAdaptor, _super);\n /**\n * @hidden\n */\n function RemoteSaveAdaptor() {\n var _this = _super.call(this) || this;\n setValue('beforeSend', UrlAdaptor.prototype.beforeSend, _this);\n return _this;\n }\n RemoteSaveAdaptor.prototype.insert = function (dm, data, tableName, query, position) {\n this.pvt.position = position;\n this.updateType = 'add';\n return {\n url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify(extend({}, {\n value: data,\n table: tableName,\n action: 'insert'\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n RemoteSaveAdaptor.prototype.remove = function (dm, keyField, val, tableName, query) {\n _super.prototype.remove.call(this, dm, keyField, val);\n return {\n type: 'POST',\n url: dm.dataSource.removeUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify(extend({}, {\n key: val,\n keyColumn: keyField,\n table: tableName,\n action: 'remove'\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n RemoteSaveAdaptor.prototype.update = function (dm, keyField, val, tableName, query) {\n this.updateType = 'update';\n this.updateKey = keyField;\n return {\n type: 'POST',\n url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n data: JSON.stringify(extend({}, {\n value: val,\n action: 'update',\n keyColumn: keyField,\n key: val[keyField],\n table: tableName\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n RemoteSaveAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes, e) {\n var i;\n if (this.updateType === 'add') {\n _super.prototype.insert.call(this, ds, data, null, null, this.pvt.position);\n }\n if (this.updateType === 'update') {\n _super.prototype.update.call(this, ds, this.updateKey, data);\n }\n this.updateType = undefined;\n if (data.added) {\n for (i = 0; i < data.added.length; i++) {\n _super.prototype.insert.call(this, ds, data.added[i]);\n }\n }\n if (data.changed) {\n for (i = 0; i < data.changed.length; i++) {\n _super.prototype.update.call(this, ds, e.key, data.changed[i]);\n }\n }\n if (data.deleted) {\n for (i = 0; i < data.deleted.length; i++) {\n _super.prototype.remove.call(this, ds, e.key, data.deleted[i]);\n }\n }\n return data;\n };\n /**\n * Prepare the request body based on the newly added, removed and updated records.\n * Also perform the changes in the locally cached data to sync with the remote data.\n * The result is used by the batch request.\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {RemoteArgs} e\n */\n RemoteSaveAdaptor.prototype.batchRequest = function (dm, changes, e, query, original) {\n return {\n type: 'POST',\n url: dm.dataSource.batchUrl || dm.dataSource.crudUrl || dm.dataSource.url,\n contentType: 'application/json; charset=utf-8',\n dataType: 'json',\n data: JSON.stringify(extend({}, {\n changed: changes.changedRecords,\n added: changes.addedRecords,\n deleted: changes.deletedRecords,\n action: 'batch',\n table: e.url,\n key: e.key\n }, DataUtil.getAddParams(this, dm, query)))\n };\n };\n RemoteSaveAdaptor.prototype.addParams = function (options) {\n var urlParams = new UrlAdaptor();\n urlParams.addParams(options);\n };\n return RemoteSaveAdaptor;\n}(JsonAdaptor));\nexport { RemoteSaveAdaptor };\n/**\n * Cache Adaptor is used to cache the data of the visited pages. It prevents new requests for the previously visited pages.\n * You can configure cache page size and duration of caching by using cachingPageSize and timeTillExpiration properties of the DataManager\n * @hidden\n */\nvar CacheAdaptor = /** @class */ (function (_super) {\n __extends(CacheAdaptor, _super);\n /**\n * Constructor for CacheAdaptor class.\n * @param {CacheAdaptor} adaptor?\n * @param {number} timeStamp?\n * @param {number} pageSize?\n * @hidden\n */\n function CacheAdaptor(adaptor, timeStamp, pageSize) {\n var _this = _super.call(this) || this;\n _this.isCrudAction = false;\n _this.isInsertAction = false;\n if (!isNullOrUndefined(adaptor)) {\n _this.cacheAdaptor = adaptor;\n }\n _this.pageSize = pageSize;\n _this.guidId = DataUtil.getGuid('cacheAdaptor');\n var obj = { keys: [], results: [] };\n window.localStorage.setItem(_this.guidId, JSON.stringify(obj));\n var guid = _this.guidId;\n if (!isNullOrUndefined(timeStamp)) {\n setInterval(function () {\n var data;\n data = DataUtil.parse.parseJson(window.localStorage.getItem(guid));\n var forDel = [];\n for (var i = 0; i < data.results.length; i++) {\n var currentTime = +new Date();\n var requestTime = +new Date(data.results[i].timeStamp);\n data.results[i].timeStamp = currentTime - requestTime;\n if (currentTime - requestTime > timeStamp) {\n forDel.push(i);\n }\n }\n for (var i = 0; i < forDel.length; i++) {\n data.results.splice(forDel[i], 1);\n data.keys.splice(forDel[i], 1);\n }\n window.localStorage.removeItem(guid);\n window.localStorage.setItem(guid, JSON.stringify(data));\n }, timeStamp);\n }\n return _this;\n }\n /**\n * It will generate the key based on the URL when we send a request to server.\n * @param {string} url\n * @param {Query} query?\n * @hidden\n */\n CacheAdaptor.prototype.generateKey = function (url, query) {\n var queries = this.getQueryRequest(query);\n var singles = Query.filterQueryLists(query.queries, ['onSelect', 'onPage', 'onSkip', 'onTake', 'onRange']);\n var key = url;\n var page = 'onPage';\n if (page in singles) {\n key += singles[page].pageIndex;\n }\n queries.sorts.forEach(function (obj) {\n key += obj.e.direction + obj.e.fieldName;\n });\n queries.groups.forEach(function (obj) {\n key += obj.e.fieldName;\n });\n queries.searches.forEach(function (obj) {\n key += obj.e.searchKey;\n });\n for (var filter = 0; filter < queries.filters.length; filter++) {\n var currentFilter = queries.filters[filter];\n if (currentFilter.e.isComplex) {\n var newQuery = query.clone();\n newQuery.queries = [];\n for (var i = 0; i < currentFilter.e.predicates.length; i++) {\n newQuery.queries.push({ fn: 'onWhere', e: currentFilter.e.predicates[i], filter: query.queries.filter });\n }\n key += currentFilter.e.condition + this.generateKey(url, newQuery);\n }\n else {\n key += currentFilter.e.field + currentFilter.e.operator + currentFilter.e.value;\n }\n }\n return key;\n };\n /**\n * Process the query to generate request body.\n * If the data is already cached, it will return the cached data.\n * @param {DataManager} dm\n * @param {Query} query?\n * @param {Object[]} hierarchyFilters?\n */\n CacheAdaptor.prototype.processQuery = function (dm, query, hierarchyFilters) {\n var key = this.generateKey(dm.dataSource.url, query);\n var cachedItems;\n cachedItems = DataUtil.parse.parseJson(window.localStorage.getItem(this.guidId));\n var data = cachedItems ? cachedItems.results[cachedItems.keys.indexOf(key)] : null;\n if (data != null && !this.isCrudAction && !this.isInsertAction) {\n return data;\n }\n this.isCrudAction = null;\n this.isInsertAction = null;\n return this.cacheAdaptor.processQuery.apply(this.cacheAdaptor, [].slice.call(arguments, 0));\n };\n /**\n * Returns the data from the query processing.\n * It will also cache the data for later usage.\n * @param {DataResult} data\n * @param {DataManager} ds?\n * @param {Query} query?\n * @param {XMLHttpRequest} xhr?\n * @param {Ajax} request?\n * @param {CrudOptions} changes?\n */\n CacheAdaptor.prototype.processResponse = function (data, ds, query, xhr, request, changes) {\n if (this.isInsertAction || (request && this.cacheAdaptor.options.batch &&\n DataUtil.endsWith(request.url, this.cacheAdaptor.options.batch) && request.type.toLowerCase() === 'post')) {\n return this.cacheAdaptor.processResponse(data, ds, query, xhr, request, changes);\n }\n data = this.cacheAdaptor.processResponse.apply(this.cacheAdaptor, [].slice.call(arguments, 0));\n var key = query ? this.generateKey(ds.dataSource.url, query) : ds.dataSource.url;\n var obj = {};\n obj = DataUtil.parse.parseJson(window.localStorage.getItem(this.guidId));\n var index = obj.keys.indexOf(key);\n if (index !== -1) {\n obj.results.splice(index, 1);\n obj.keys.splice(index, 1);\n }\n obj.results[obj.keys.push(key) - 1] = { keys: key, result: data.result, timeStamp: new Date(), count: data.count };\n while (obj.results.length > this.pageSize) {\n obj.results.splice(0, 1);\n obj.keys.splice(0, 1);\n }\n window.localStorage.setItem(this.guidId, JSON.stringify(obj));\n return data;\n };\n /**\n * Method will trigger before send the request to server side. Used to set the custom header or modify the request options.\n * @param {DataManager} dm\n * @param {XMLHttpRequest} request\n * @param {Ajax} settings?\n */\n CacheAdaptor.prototype.beforeSend = function (dm, request, settings) {\n if (!isNullOrUndefined(this.cacheAdaptor.options.batch) && DataUtil.endsWith(settings.url, this.cacheAdaptor.options.batch)\n && settings.type.toLowerCase() === 'post') {\n request.setRequestHeader('Accept', this.cacheAdaptor.options.multipartAccept);\n }\n if (!dm.dataSource.crossDomain) {\n request.setRequestHeader('Accept', this.cacheAdaptor.options.accept);\n }\n };\n /**\n * Updates existing record and saves the changes to the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName\n */\n CacheAdaptor.prototype.update = function (dm, keyField, value, tableName) {\n this.isCrudAction = true;\n return this.cacheAdaptor.update(dm, keyField, value, tableName);\n };\n /**\n * Prepare and returns request body which is used to insert a new record in the table.\n * @param {DataManager} dm\n * @param {Object} data\n * @param {string} tableName?\n */\n CacheAdaptor.prototype.insert = function (dm, data, tableName) {\n this.isInsertAction = true;\n return this.cacheAdaptor.insert(dm, data, tableName);\n };\n /**\n * Prepare and return request body which is used to remove record from the table.\n * @param {DataManager} dm\n * @param {string} keyField\n * @param {Object} value\n * @param {string} tableName?\n */\n CacheAdaptor.prototype.remove = function (dm, keyField, value, tableName) {\n this.isCrudAction = true;\n return this.cacheAdaptor.remove(dm, keyField, value, tableName);\n };\n /**\n * Prepare the request body based on the newly added, removed and updated records.\n * The result is used by the batch request.\n * @param {DataManager} dm\n * @param {CrudOptions} changes\n * @param {RemoteArgs} e\n */\n CacheAdaptor.prototype.batchRequest = function (dm, changes, e) {\n return this.cacheAdaptor.batchRequest(dm, changes, e);\n };\n return CacheAdaptor;\n}(UrlAdaptor));\nexport { CacheAdaptor };\n","import { Ajax } from '@syncfusion/ej2-base';\nimport { extend, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { DataUtil } from './util';\nimport { Query } from './query';\nimport { ODataAdaptor, JsonAdaptor, CacheAdaptor, RemoteSaveAdaptor } from './adaptors';\n/**\n * DataManager is used to manage and manipulate relational data.\n */\nvar DataManager = /** @class */ (function () {\n /**\n * Constructor for DataManager class\n * @param {DataOptions|JSON[]} dataSource?\n * @param {Query} query?\n * @param {AdaptorOptions|string} adaptor?\n * @hidden\n */\n function DataManager(dataSource, query, adaptor) {\n var _this = this;\n /** @hidden */\n this.dateParse = true;\n /** @hidden */\n this.timeZoneHandling = true;\n this.requests = [];\n if (!dataSource && !this.dataSource) {\n dataSource = [];\n }\n adaptor = adaptor || dataSource.adaptor;\n if (dataSource && dataSource.timeZoneHandling === false) {\n this.timeZoneHandling = dataSource.timeZoneHandling;\n }\n var data;\n if (dataSource instanceof Array) {\n data = {\n json: dataSource,\n offline: true\n };\n }\n else if (typeof dataSource === 'object') {\n if (!dataSource.json) {\n dataSource.json = [];\n }\n data = {\n url: dataSource.url,\n insertUrl: dataSource.insertUrl,\n removeUrl: dataSource.removeUrl,\n updateUrl: dataSource.updateUrl,\n crudUrl: dataSource.crudUrl,\n batchUrl: dataSource.batchUrl,\n json: dataSource.json,\n headers: dataSource.headers,\n accept: dataSource.accept,\n data: dataSource.data,\n timeTillExpiration: dataSource.timeTillExpiration,\n cachingPageSize: dataSource.cachingPageSize,\n enableCaching: dataSource.enableCaching,\n requestType: dataSource.requestType,\n key: dataSource.key,\n crossDomain: dataSource.crossDomain,\n jsonp: dataSource.jsonp,\n dataType: dataSource.dataType,\n offline: dataSource.offline !== undefined ? dataSource.offline\n : dataSource.adaptor instanceof RemoteSaveAdaptor ? false : dataSource.url ? false : true,\n requiresFormat: dataSource.requiresFormat\n };\n }\n else {\n DataUtil.throwError('DataManager: Invalid arguments');\n }\n if (data.requiresFormat === undefined && !DataUtil.isCors()) {\n data.requiresFormat = isNullOrUndefined(data.crossDomain) ? true : data.crossDomain;\n }\n if (data.dataType === undefined) {\n data.dataType = 'json';\n }\n this.dataSource = data;\n this.defaultQuery = query;\n if (data.url && data.offline && !data.json.length) {\n this.isDataAvailable = false;\n this.adaptor = adaptor || new ODataAdaptor();\n this.dataSource.offline = false;\n this.ready = this.executeQuery(query || new Query());\n this.ready.then(function (e) {\n _this.dataSource.offline = true;\n _this.isDataAvailable = true;\n data.json = e.result;\n _this.adaptor = new JsonAdaptor();\n });\n }\n else {\n this.adaptor = data.offline ? new JsonAdaptor() : new ODataAdaptor();\n }\n if (!data.jsonp && this.adaptor instanceof ODataAdaptor) {\n data.jsonp = 'callback';\n }\n this.adaptor = adaptor || this.adaptor;\n if (data.enableCaching) {\n this.adaptor = new CacheAdaptor(this.adaptor, data.timeTillExpiration, data.cachingPageSize);\n }\n return this;\n }\n /**\n * Overrides DataManager's default query with given query.\n * @param {Query} query - Defines the new default query.\n */\n DataManager.prototype.setDefaultQuery = function (query) {\n this.defaultQuery = query;\n return this;\n };\n /**\n * Executes the given query with local data source.\n * @param {Query} query - Defines the query to retrieve data.\n */\n DataManager.prototype.executeLocal = function (query) {\n if (!this.defaultQuery && !(query instanceof Query)) {\n DataUtil.throwError('DataManager - executeLocal() : A query is required to execute');\n }\n if (!this.dataSource.json) {\n DataUtil.throwError('DataManager - executeLocal() : Json data is required to execute');\n }\n query = query || this.defaultQuery;\n var result = this.adaptor.processQuery(this, query);\n if (query.subQuery) {\n var from = query.subQuery.fromTable;\n var lookup = query.subQuery.lookups;\n var res = query.isCountRequired ? result.result :\n result;\n if (lookup && lookup instanceof Array) {\n DataUtil.buildHierarchy(query.subQuery.fKey, from, res, lookup, query.subQuery.key);\n }\n for (var j = 0; j < res.length; j++) {\n if (res[j][from] instanceof Array) {\n res[j] = extend({}, {}, res[j]);\n res[j][from] = this.adaptor.processResponse(query.subQuery.using(new DataManager(res[j][from].slice(0))).executeLocal(), this, query);\n }\n }\n }\n return this.adaptor.processResponse(result, this, query);\n };\n /**\n * Executes the given query with either local or remote data source.\n * It will be executed as asynchronously and returns Promise object which will be resolved or rejected after action completed.\n * @param {Query|Function} query - Defines the query to retrieve data.\n * @param {Function} done - Defines the callback function and triggers when the Promise is resolved.\n * @param {Function} fail - Defines the callback function and triggers when the Promise is rejected.\n * @param {Function} always - Defines the callback function and triggers when the Promise is resolved or rejected.\n */\n DataManager.prototype.executeQuery = function (query, done, fail, always) {\n var _this = this;\n var makeRequest = 'makeRequest';\n if (typeof query === 'function') {\n always = fail;\n fail = done;\n done = query;\n query = null;\n }\n if (!query) {\n query = this.defaultQuery;\n }\n if (!(query instanceof Query)) {\n DataUtil.throwError('DataManager - executeQuery() : A query is required to execute');\n }\n var deffered = new Deferred();\n var args = { query: query };\n if (!this.dataSource.offline && (this.dataSource.url !== undefined && this.dataSource.url !== '')\n || (!isNullOrUndefined(this.adaptor[makeRequest]))) {\n var result = this.adaptor.processQuery(this, query);\n if (!isNullOrUndefined(this.adaptor[makeRequest])) {\n this.adaptor[makeRequest](result, deffered, args, query);\n }\n else if (!isNullOrUndefined(result.url)) {\n this.makeRequest(result, deffered, args, query);\n }\n else {\n args = DataManager.getDeferedArgs(query, result, args);\n deffered.resolve(args);\n }\n }\n else {\n DataManager.nextTick(function () {\n var res = _this.executeLocal(query);\n args = DataManager.getDeferedArgs(query, res, args);\n deffered.resolve(args);\n });\n }\n if (done || fail) {\n deffered.promise.then(done, fail);\n }\n if (always) {\n deffered.promise.then(always, always);\n }\n return deffered.promise;\n };\n DataManager.getDeferedArgs = function (query, result, args) {\n if (query.isCountRequired) {\n args.result = result.result;\n args.count = result.count;\n args.aggregates = result.aggregates;\n }\n else {\n args.result = result;\n }\n return args;\n };\n DataManager.nextTick = function (fn) {\n (window.setImmediate || window.setTimeout)(fn, 0);\n };\n DataManager.prototype.extendRequest = function (url, fnSuccess, fnFail) {\n return extend({}, {\n type: 'GET',\n dataType: this.dataSource.dataType,\n crossDomain: this.dataSource.crossDomain,\n jsonp: this.dataSource.jsonp,\n cache: true,\n processData: false,\n onSuccess: fnSuccess,\n onFailure: fnFail\n }, url);\n };\n DataManager.prototype.makeRequest = function (url, deffered, args, query) {\n var _this = this;\n var isSelector = !!query.subQuerySelector;\n var fnFail = function (e) {\n args.error = e;\n deffered.reject(args);\n };\n var process = function (data, count, xhr, request, actual, aggregates, virtualSelectRecords) {\n args.xhr = xhr;\n args.count = count ? parseInt(count.toString(), 10) : 0;\n args.result = data;\n args.request = request;\n args.aggregates = aggregates;\n args.actual = actual;\n args.virtualSelectRecords = virtualSelectRecords;\n deffered.resolve(args);\n };\n var fnQueryChild = function (data, selector) {\n var subDeffer = new Deferred();\n var childArgs = { parent: args };\n query.subQuery.isChild = true;\n var subUrl = _this.adaptor.processQuery(_this, query.subQuery, data ? _this.adaptor.processResponse(data) : selector);\n var childReq = _this.makeRequest(subUrl, subDeffer, childArgs, query.subQuery);\n if (!isSelector) {\n subDeffer.then(function (subData) {\n if (data) {\n DataUtil.buildHierarchy(query.subQuery.fKey, query.subQuery.fromTable, data, subData, query.subQuery.key);\n process(data, subData.count, subData.xhr);\n }\n }, fnFail);\n }\n return childReq;\n };\n var fnSuccess = function (data, request) {\n if (request.httpRequest.getResponseHeader('Content-Type').indexOf('xml') === -1 && _this.dateParse) {\n data = DataUtil.parse.parseJson(data);\n }\n var result = _this.adaptor.processResponse(data, _this, query, request.httpRequest, request);\n var count = 0;\n var aggregates = null;\n var virtualSelectRecords = 'virtualSelectRecords';\n var virtualRecords = data[virtualSelectRecords];\n if (query.isCountRequired) {\n count = result.count;\n aggregates = result.aggregates;\n result = result.result;\n }\n if (!query.subQuery) {\n process(result, count, request.httpRequest, request.type, data, aggregates, virtualRecords);\n return;\n }\n if (!isSelector) {\n fnQueryChild(result, request);\n }\n };\n var req = this.extendRequest(url, fnSuccess, fnFail);\n var ajax = new Ajax(req);\n ajax.beforeSend = function () {\n _this.beforeSend(ajax.httpRequest, ajax);\n };\n req = ajax.send();\n req.catch(function (e) { return true; }); // to handle failure remote requests. \n this.requests.push(ajax);\n if (isSelector) {\n var promise = void 0;\n var res = query.subQuerySelector.call(this, { query: query.subQuery, parent: query });\n if (res && res.length) {\n promise = Promise.all([req, fnQueryChild(null, res)]);\n promise.then(function () {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n var result = args[0];\n var pResult = _this.adaptor.processResponse(result[0], _this, query, _this.requests[0].httpRequest, _this.requests[0]);\n var count = 0;\n if (query.isCountRequired) {\n count = pResult.count;\n pResult = pResult.result;\n }\n var cResult = _this.adaptor.processResponse(result[1], _this, query.subQuery, _this.requests[1].httpRequest, _this.requests[1]);\n count = 0;\n if (query.subQuery.isCountRequired) {\n count = cResult.count;\n cResult = cResult.result;\n }\n DataUtil.buildHierarchy(query.subQuery.fKey, query.subQuery.fromTable, pResult, cResult, query.subQuery.key);\n isSelector = false;\n process(pResult, count, _this.requests[0].httpRequest);\n });\n }\n else {\n isSelector = false;\n }\n }\n return req;\n };\n DataManager.prototype.beforeSend = function (request, settings) {\n this.adaptor.beforeSend(this, request, settings);\n var headers = this.dataSource.headers;\n var props;\n for (var i = 0; headers && i < headers.length; i++) {\n props = [];\n var keys = Object.keys(headers[i]);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var prop = keys_1[_i];\n props.push(prop);\n request.setRequestHeader(prop, headers[i][prop]);\n }\n }\n };\n /**\n * Save bulk changes to the given table name.\n * User can add a new record, edit an existing record, and delete a record at the same time.\n * If the datasource from remote, then updated in a single post.\n * @param {Object} changes - Defines the CrudOptions.\n * @param {string} key - Defines the column field.\n * @param {string|Query} tableName - Defines the table name.\n * @param {Query} query - Sets default query for the DataManager.\n */\n DataManager.prototype.saveChanges = function (changes, key, tableName, query, original) {\n var _this = this;\n if (tableName instanceof Query) {\n query = tableName;\n tableName = null;\n }\n var args = {\n url: tableName,\n key: key || this.dataSource.key\n };\n var req = this.adaptor.batchRequest(this, changes, args, query || new Query(), original);\n var doAjaxRequest = 'doAjaxRequest';\n if (this.dataSource.offline) {\n return req;\n }\n if (!isNullOrUndefined(this.adaptor[doAjaxRequest])) {\n return this.adaptor[doAjaxRequest](req);\n }\n else {\n var deff_1 = new Deferred();\n var ajax_1 = new Ajax(req);\n ajax_1.beforeSend = function () {\n _this.beforeSend(ajax_1.httpRequest, ajax_1);\n };\n ajax_1.onSuccess = function (data, request) {\n deff_1.resolve(_this.adaptor.processResponse(data, _this, null, request.httpRequest, request, changes, args));\n };\n ajax_1.onFailure = function (e) {\n deff_1.reject([{ error: e }]);\n };\n ajax_1.send().catch(function (e) { return true; }); // to handle the failure requests. \n return deff_1.promise;\n }\n };\n /**\n * Inserts new record in the given table.\n * @param {Object} data - Defines the data to insert.\n * @param {string|Query} tableName - Defines the table name.\n * @param {Query} query - Sets default query for the DataManager.\n */\n DataManager.prototype.insert = function (data, tableName, query, position) {\n if (tableName instanceof Query) {\n query = tableName;\n tableName = null;\n }\n var req = this.adaptor.insert(this, data, tableName, query, position);\n var doAjaxRequest = 'doAjaxRequest';\n if (this.dataSource.offline) {\n return req;\n }\n if (!isNullOrUndefined(this.adaptor[doAjaxRequest])) {\n return this.adaptor[doAjaxRequest](req);\n }\n else {\n return this.doAjaxRequest(req);\n }\n };\n /**\n * Removes data from the table with the given key.\n * @param {string} keyField - Defines the column field.\n * @param {Object} value - Defines the value to find the data in the specified column.\n * @param {string|Query} tableName - Defines the table name\n * @param {Query} query - Sets default query for the DataManager.\n */\n DataManager.prototype.remove = function (keyField, value, tableName, query) {\n if (typeof value === 'object') {\n value = DataUtil.getObject(keyField, value);\n }\n if (tableName instanceof Query) {\n query = tableName;\n tableName = null;\n }\n var res = this.adaptor.remove(this, keyField, value, tableName, query);\n var doAjaxRequest = 'doAjaxRequest';\n if (this.dataSource.offline) {\n return res;\n }\n if (!isNullOrUndefined(this.adaptor[doAjaxRequest])) {\n return this.adaptor[doAjaxRequest](res);\n }\n else {\n return this.doAjaxRequest(res);\n }\n };\n /**\n * Updates existing record in the given table.\n * @param {string} keyField - Defines the column field.\n * @param {Object} value - Defines the value to find the data in the specified column.\n * @param {string|Query} tableName - Defines the table name\n * @param {Query} query - Sets default query for the DataManager.\n */\n DataManager.prototype.update = function (keyField, value, tableName, query, original) {\n if (tableName instanceof Query) {\n query = tableName;\n tableName = null;\n }\n var res = this.adaptor.update(this, keyField, value, tableName, query, original);\n var doAjaxRequest = 'doAjaxRequest';\n if (this.dataSource.offline) {\n return res;\n }\n if (!isNullOrUndefined(this.adaptor[doAjaxRequest])) {\n return this.adaptor[doAjaxRequest](res);\n }\n else {\n return this.doAjaxRequest(res);\n }\n };\n DataManager.prototype.doAjaxRequest = function (res) {\n var _this = this;\n var defer = new Deferred();\n res = extend({}, {\n type: 'POST',\n contentType: 'application/json; charset=utf-8',\n processData: false\n }, res);\n var ajax = new Ajax(res);\n ajax.beforeSend = function () {\n _this.beforeSend(ajax.httpRequest, ajax);\n };\n ajax.onSuccess = function (record, request) {\n try {\n DataUtil.parse.parseJson(record);\n }\n catch (e) {\n record = [];\n }\n record = _this.adaptor.processResponse(DataUtil.parse.parseJson(record), _this, null, request.httpRequest, request);\n defer.resolve(record);\n };\n ajax.onFailure = function (e) {\n defer.reject([{ error: e }]);\n };\n ajax.send().catch(function (e) { return true; }); // to handle the failure requests.\n return defer.promise;\n };\n return DataManager;\n}());\nexport { DataManager };\n/**\n * Deferred is used to handle asynchronous operation.\n */\nvar Deferred = /** @class */ (function () {\n function Deferred() {\n var _this = this;\n /**\n * Promise is an object that represents a value that may not be available yet, but will be resolved at some point in the future.\n */\n this.promise = new Promise(function (resolve, reject) {\n _this.resolve = resolve;\n _this.reject = reject;\n });\n /**\n * Defines the callback function triggers when the Deferred object is resolved.\n */\n this.then = this.promise.then.bind(this.promise);\n /**\n * Defines the callback function triggers when the Deferred object is rejected.\n */\n this.catch = this.promise.catch.bind(this.promise);\n }\n return Deferred;\n}());\nexport { Deferred };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { DataManager } from './manager';\nimport { Query } from './query';\nvar consts = { GroupGuid: '{271bbba0-1ee7}' };\n/**\n * Data manager common utility methods.\n * @hidden\n */\nvar DataUtil = /** @class */ (function () {\n function DataUtil() {\n }\n /**\n * Returns the value by invoking the provided parameter function.\n * If the paramater is not of type function then it will be returned as it is.\n * @param {Function|string|string[]|number} value\n * @param {Object} inst?\n * @hidden\n */\n DataUtil.getValue = function (value, inst) {\n if (typeof value === 'function') {\n return value.call(inst || {});\n }\n return value;\n };\n /**\n * Returns true if the input string ends with given string.\n * @param {string} input\n * @param {string} substr\n */\n DataUtil.endsWith = function (input, substr) {\n return input.slice && input.slice(-substr.length) === substr;\n };\n /**\n * Returns true if the input string starts with given string.\n * @param {string} str\n * @param {string} startstr\n */\n DataUtil.startsWith = function (input, start) {\n return input.slice(0, start.length) === start;\n };\n /**\n * To return the sorting function based on the string.\n * @param {string} order\n * @hidden\n */\n DataUtil.fnSort = function (order) {\n order = order ? DataUtil.toLowerCase(order) : 'ascending';\n if (order === 'ascending') {\n return this.fnAscending;\n }\n return this.fnDescending;\n };\n /**\n * Comparer function which is used to sort the data in ascending order.\n * @param {string|number} x\n * @param {string|number} y\n * @returns number\n */\n DataUtil.fnAscending = function (x, y) {\n if (isNullOrUndefined(x) && isNullOrUndefined(y)) {\n return -1;\n }\n if (y === null || y === undefined) {\n return -1;\n }\n if (typeof x === 'string') {\n return x.localeCompare(y);\n }\n if (x === null || x === undefined) {\n return 1;\n }\n return x - y;\n };\n /**\n * Comparer function which is used to sort the data in descending order.\n * @param {string|number} x\n * @param {string|number} y\n * @returns number\n */\n DataUtil.fnDescending = function (x, y) {\n if (isNullOrUndefined(x) && isNullOrUndefined(y)) {\n return -1;\n }\n if (y === null || y === undefined) {\n return 1;\n }\n if (typeof x === 'string') {\n return x.localeCompare(y) * -1;\n }\n if (x === null || x === undefined) {\n return -1;\n }\n return y - x;\n };\n DataUtil.extractFields = function (obj, fields) {\n var newObj = {};\n for (var i = 0; i < fields.length; i++) {\n newObj = this.setValue(fields[i], this.getObject(fields[i], obj), newObj);\n }\n return newObj;\n };\n /**\n * Select objects by given fields from jsonArray.\n * @param {Object[]} jsonArray\n * @param {string[]} fields\n */\n DataUtil.select = function (jsonArray, fields) {\n var newData = [];\n for (var i = 0; i < jsonArray.length; i++) {\n newData.push(this.extractFields(jsonArray[i], fields));\n }\n return newData;\n };\n /**\n * Group the input data based on the field name.\n * It also performs aggregation of the grouped records based on the aggregates paramater.\n * @param {Object[]} jsonArray\n * @param {string} field?\n * @param {Object[]} agg?\n * @param {number} level?\n * @param {Object[]} groupDs?\n */\n DataUtil.group = function (jsonArray, field, aggregates, level, groupDs, format, isLazyLoad) {\n level = level || 1;\n var jsonData = jsonArray;\n var guid = 'GroupGuid';\n if (jsonData.GroupGuid === consts[guid]) {\n var _loop_1 = function (j) {\n if (!isNullOrUndefined(groupDs)) {\n var indx = -1;\n var temp = groupDs.filter(function (e) { return e.key === jsonData[j].key; });\n indx = groupDs.indexOf(temp[0]);\n jsonData[j].items = this_1.group(jsonData[j].items, field, aggregates, jsonData.level + 1, groupDs[indx].items, format, isLazyLoad);\n jsonData[j].count = groupDs[indx].count;\n }\n else {\n jsonData[j].items = this_1.group(jsonData[j].items, field, aggregates, jsonData.level + 1, null, format, isLazyLoad);\n jsonData[j].count = jsonData[j].items.length;\n }\n };\n var this_1 = this;\n for (var j = 0; j < jsonData.length; j++) {\n _loop_1(j);\n }\n jsonData.childLevels += 1;\n return jsonData;\n }\n var grouped = {};\n var groupedArray = [];\n groupedArray.GroupGuid = consts[guid];\n groupedArray.level = level;\n groupedArray.childLevels = 0;\n groupedArray.records = jsonData;\n var _loop_2 = function (i) {\n var val = this_2.getVal(jsonData, i, field);\n if (!isNullOrUndefined(format)) {\n val = format(val, field);\n }\n if (!grouped[val]) {\n grouped[val] = {\n key: val,\n count: 0,\n items: [],\n aggregates: {},\n field: field\n };\n groupedArray.push(grouped[val]);\n if (!isNullOrUndefined(groupDs)) {\n var tempObj = groupDs.filter(function (e) { return e.key === grouped[val].key; });\n grouped[val].count = tempObj[0].count;\n }\n }\n grouped[val].count = !isNullOrUndefined(groupDs) ? grouped[val].count : grouped[val].count += 1;\n if (!isLazyLoad || (isLazyLoad && aggregates.length)) {\n grouped[val].items.push(jsonData[i]);\n }\n };\n var this_2 = this;\n for (var i = 0; i < jsonData.length; i++) {\n _loop_2(i);\n }\n if (aggregates && aggregates.length) {\n var _loop_3 = function (i) {\n var res = {};\n var fn = void 0;\n var aggs = aggregates;\n for (var j = 0; j < aggregates.length; j++) {\n fn = DataUtil.aggregates[aggregates[j].type];\n if (!isNullOrUndefined(groupDs)) {\n var temp = groupDs.filter(function (e) { return e.key === groupedArray[i].key; });\n if (fn) {\n res[aggs[j].field + ' - ' + aggs[j].type] = fn(temp[0].items, aggs[j].field);\n }\n }\n else {\n if (fn) {\n res[aggs[j].field + ' - ' + aggs[j].type] = fn(groupedArray[i].items, aggs[j].field);\n }\n }\n }\n groupedArray[i].aggregates = res;\n };\n for (var i = 0; i < groupedArray.length; i++) {\n _loop_3(i);\n }\n }\n if (isLazyLoad && groupedArray.length && aggregates.length) {\n for (var i = 0; i < groupedArray.length; i++) {\n groupedArray[i].items = [];\n }\n }\n return jsonData.length && groupedArray || jsonData;\n };\n /**\n * It is used to categorize the multiple items based on a specific field in jsonArray.\n * The hierarchical queries are commonly required when you use foreign key binding.\n * @param {string} fKey\n * @param {string} from\n * @param {Object[]} source\n * @param {Group} lookup?\n * @param {string} pKey?\n * @hidden\n */\n DataUtil.buildHierarchy = function (fKey, from, source, lookup, pKey) {\n var i;\n var grp = {};\n var temp;\n if (lookup.result) {\n lookup = lookup.result;\n }\n if (lookup.GroupGuid) {\n this.throwError('DataManager: Do not have support Grouping in hierarchy');\n }\n for (i = 0; i < lookup.length; i++) {\n var fKeyData = this.getObject(fKey, lookup[i]);\n temp = grp[fKeyData] || (grp[fKeyData] = []);\n temp.push(lookup[i]);\n }\n for (i = 0; i < source.length; i++) {\n var fKeyData = this.getObject(pKey || fKey, source[i]);\n source[i][from] = grp[fKeyData];\n }\n };\n /**\n * The method used to get the field names which started with specified characters.\n * @param {Object} obj\n * @param {string[]} fields?\n * @param {string} prefix?\n * @hidden\n */\n DataUtil.getFieldList = function (obj, fields, prefix) {\n if (prefix === undefined) {\n prefix = '';\n }\n if (fields === undefined || fields === null) {\n return this.getFieldList(obj, [], prefix);\n }\n var copyObj = obj;\n var keys = Object.keys(obj);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var prop = keys_1[_i];\n if (typeof copyObj[prop] === 'object' && !(copyObj[prop] instanceof Array)) {\n this.getFieldList(copyObj[prop], fields, prefix + prop + '.');\n }\n else {\n fields.push(prefix + prop);\n }\n }\n return fields;\n };\n /**\n * Gets the value of the property in the given object.\n * The complex object can be accessed by providing the field names concatenated with dot(.).\n * @param {string} nameSpace - The name of the property to be accessed.\n * @param {Object} from - Defines the source object.\n */\n DataUtil.getObject = function (nameSpace, from) {\n if (!nameSpace) {\n return from;\n }\n if (!from) {\n return undefined;\n }\n if (nameSpace.indexOf('.') === -1) {\n return from[nameSpace];\n }\n var value = from;\n var splits = nameSpace.split('.');\n for (var i = 0; i < splits.length; i++) {\n if (value == null) {\n break;\n }\n value = value[splits[i]];\n }\n return value;\n };\n /**\n * To set value for the nameSpace in desired object.\n * @param {string} nameSpace - String value to the get the inner object.\n * @param {Object} value - Value that you need to set.\n * @param {Object} obj - Object to get the inner object value.\n * @return { [key: string]: Object; } | Object\n * @hidden\n */\n DataUtil.setValue = function (nameSpace, value, obj) {\n var keys = nameSpace.toString().split('.');\n var start = obj || {};\n var fromObj = start;\n var i;\n var length = keys.length;\n var key;\n for (i = 0; i < length; i++) {\n key = keys[i];\n if (i + 1 === length) {\n fromObj[key] = value === undefined ? undefined : value;\n }\n else if (isNullOrUndefined(fromObj[key])) {\n fromObj[key] = {};\n }\n fromObj = fromObj[key];\n }\n return start;\n };\n /**\n * Sort the given data based on the field and comparer.\n * @param {Object[]} ds - Defines the input data.\n * @param {string} field - Defines the field to be sorted.\n * @param {Function} comparer - Defines the comparer function used to sort the records.\n */\n DataUtil.sort = function (ds, field, comparer) {\n if (ds.length <= 1) {\n return ds;\n }\n var middle = parseInt((ds.length / 2).toString(), 10);\n var left = ds.slice(0, middle);\n var right = ds.slice(middle);\n left = this.sort(left, field, comparer);\n right = this.sort(right, field, comparer);\n return this.merge(left, right, field, comparer);\n };\n DataUtil.ignoreDiacritics = function (value) {\n if (typeof value !== 'string') {\n return value;\n }\n var result = value.split('');\n var newValue = result.map(function (temp) { return temp in DataUtil.diacritics ? DataUtil.diacritics[temp] : temp; });\n return newValue.join('');\n };\n DataUtil.merge = function (left, right, fieldName, comparer) {\n var result = [];\n var current;\n while (left.length > 0 || right.length > 0) {\n if (left.length > 0 && right.length > 0) {\n if (comparer) {\n current = comparer(this.getVal(left, 0, fieldName), this.getVal(right, 0, fieldName), left[0], right[0]) <= 0 ? left : right;\n }\n else {\n current = left[0][fieldName] < left[0][fieldName] ? left : right;\n }\n }\n else {\n current = left.length > 0 ? left : right;\n }\n result.push(current.shift());\n }\n return result;\n };\n DataUtil.getVal = function (array, index, field) {\n return field ? this.getObject(field, array[index]) : array[index];\n };\n DataUtil.toLowerCase = function (val) {\n return val ? typeof val === 'string' ? val.toLowerCase() : val.toString() : (val === 0 || val === false) ? val.toString() : '';\n };\n /**\n * To perform the filter operation with specified adaptor and returns the result.\n * @param {Object} adaptor\n * @param {string} fnName\n * @param {Object} param1?\n * @param {Object} param2?\n * @hidden\n */\n DataUtil.callAdaptorFunction = function (adaptor, fnName, param1, param2) {\n if (fnName in adaptor) {\n var res = adaptor[fnName](param1, param2);\n if (!isNullOrUndefined(res)) {\n param1 = res;\n }\n }\n return param1;\n };\n DataUtil.getAddParams = function (adp, dm, query) {\n var req = {};\n DataUtil.callAdaptorFunction(adp, 'addParams', {\n dm: dm,\n query: query,\n params: query.params,\n reqParams: req\n });\n return req;\n };\n /**\n * Checks wheather the given input is a plain object or not.\n * @param {Object|Object[]} obj\n */\n DataUtil.isPlainObject = function (obj) {\n return (!!obj) && (obj.constructor === Object);\n };\n /**\n * Returns true when the browser cross origin request.\n */\n DataUtil.isCors = function () {\n var xhr = null;\n var request = 'XMLHttpRequest';\n try {\n xhr = new window[request]();\n }\n catch (e) {\n // No exception handling\n }\n return !!xhr && ('withCredentials' in xhr);\n };\n /**\n * Generate random GUID value which will be prefixed with the given value.\n * @param {string} prefix\n */\n DataUtil.getGuid = function (prefix) {\n var hexs = '0123456789abcdef';\n var rand;\n return (prefix || '') + '00000000-0000-4000-0000-000000000000'.replace(/0/g, function (val, i) {\n if ('crypto' in window && 'getRandomValues' in crypto) {\n var arr = new Uint8Array(1);\n window.crypto.getRandomValues(arr);\n rand = arr[0] % 16 | 0;\n }\n else {\n rand = Math.random() * 16 | 0;\n }\n return hexs[i === 19 ? rand & 0x3 | 0x8 : rand];\n });\n };\n /**\n * Checks wheather the given value is null or not.\n * @param {string|Object} val\n * @returns boolean\n */\n DataUtil.isNull = function (val) {\n return val === undefined || val === null;\n };\n /**\n * To get the required items from collection of objects.\n * @param {Object[]} array\n * @param {string} field\n * @param {Function} comparer\n * @returns Object\n * @hidden\n */\n DataUtil.getItemFromComparer = function (array, field, comparer) {\n var keyVal;\n var current;\n var key;\n var i = 0;\n var castRequired = typeof DataUtil.getVal(array, 0, field) === 'string';\n if (array.length) {\n while (isNullOrUndefined(keyVal) && i < array.length) {\n keyVal = DataUtil.getVal(array, i, field);\n key = array[i++];\n }\n }\n for (; i < array.length; i++) {\n current = DataUtil.getVal(array, i, field);\n if (isNullOrUndefined(current)) {\n continue;\n }\n if (castRequired) {\n keyVal = +keyVal;\n current = +current;\n }\n if (comparer(keyVal, current) > 0) {\n keyVal = current;\n key = array[i];\n }\n }\n return key;\n };\n /**\n * To get distinct values of Array or Array of Objects.\n * @param {Object[]} json\n * @param {string} field\n * @param {boolean} requiresCompleteRecord\n * @returns Object[]\n * * distinct array of objects is return when requiresCompleteRecord set as true.\n * @hidden\n */\n DataUtil.distinct = function (json, fieldName, requiresCompleteRecord) {\n requiresCompleteRecord = isNullOrUndefined(requiresCompleteRecord) ? false : requiresCompleteRecord;\n var result = [];\n var val;\n var tmp = {};\n json.forEach(function (data, index) {\n val = typeof (json[index]) === 'object' ? DataUtil.getVal(json, index, fieldName) : json[index];\n if (!(val in tmp)) {\n result.push(!requiresCompleteRecord ? val : json[index]);\n tmp[val] = 1;\n }\n });\n return result;\n };\n /**\n * Specifies the value which will be used to adjust the date value to server timezone.\n * @default null\n */\n DataUtil.serverTimezoneOffset = null;\n /**\n * Species whether are not to be parsed with serverTimezoneOffset value.\n * @hidden\n */\n DataUtil.timeZoneHandling = true;\n /**\n * Throw error with the given string as message.\n * @param {string} er\n */\n DataUtil.throwError = function (error) {\n try {\n throw new Error(error);\n }\n catch (e) {\n throw e.message + '\\n' + e.stack;\n }\n };\n DataUtil.aggregates = {\n /**\n * Calculate sum of the given field in the data.\n * @param {Object[]} ds\n * @param {string} field\n */\n sum: function (ds, field) {\n var result = 0;\n var val;\n var castRequired = typeof DataUtil.getVal(ds, 0, field) !== 'number';\n for (var i = 0; i < ds.length; i++) {\n val = DataUtil.getVal(ds, i, field);\n if (!isNaN(val) && val !== null) {\n if (castRequired) {\n val = +val;\n }\n result += val;\n }\n }\n return result;\n },\n /**\n * Calculate average value of the given field in the data.\n * @param {Object[]} ds\n * @param {string} field\n */\n average: function (ds, field) {\n return DataUtil.aggregates.sum(ds, field) / ds.length;\n },\n /**\n * Returns the min value of the data based on the field.\n * @param {Object[]} ds\n * @param {string|Function} field\n */\n min: function (ds, field) {\n var comparer;\n if (typeof field === 'function') {\n comparer = field;\n field = null;\n }\n return DataUtil.getObject(field, DataUtil.getItemFromComparer(ds, field, comparer || DataUtil.fnAscending));\n },\n /**\n * Returns the max value of the data based on the field.\n * @param {Object[]} ds\n * @param {string} field\n * @returns number\n */\n max: function (ds, field) {\n var comparer;\n if (typeof field === 'function') {\n comparer = field;\n field = null;\n }\n return DataUtil.getObject(field, DataUtil.getItemFromComparer(ds, field, comparer || DataUtil.fnDescending));\n },\n /**\n * Returns the total number of true value present in the data based on the given boolean field name.\n * @param {Object[]} ds\n * @param {string} field\n */\n truecount: function (ds, field) {\n return new DataManager(ds).executeLocal(new Query().where(field, 'equal', true, true)).length;\n },\n /**\n * Returns the total number of false value present in the data based on the given boolean field name.\n * @param {Object[]} ds\n * @param {string} field\n */\n falsecount: function (ds, field) {\n return new DataManager(ds).executeLocal(new Query().where(field, 'equal', false, true)).length;\n },\n /**\n * Returns the length of the given data.\n * @param {Object[]} ds\n * @param {string} field?\n * @returns number\n */\n count: function (ds, field) {\n return ds.length;\n }\n };\n /**\n * Specifies the Object with filter operators.\n */\n DataUtil.operatorSymbols = {\n '<': 'lessthan',\n '>': 'greaterthan',\n '<=': 'lessthanorequal',\n '>=': 'greaterthanorequal',\n '==': 'equal',\n '!=': 'notequal',\n '*=': 'contains',\n '$=': 'endswith',\n '^=': 'startswith'\n };\n /**\n * Specifies the Object with filter operators which will be used for OData filter query generation.\n * * It will be used for date/number type filter query.\n */\n DataUtil.odBiOperator = {\n '<': ' lt ',\n '>': ' gt ',\n '<=': ' le ',\n '>=': ' ge ',\n '==': ' eq ',\n '!=': ' ne ',\n 'lessthan': ' lt ',\n 'lessthanorequal': ' le ',\n 'greaterthan': ' gt ',\n 'greaterthanorequal': ' ge ',\n 'equal': ' eq ',\n 'notequal': ' ne '\n };\n /**\n * Specifies the Object with filter operators which will be used for OData filter query generation.\n * It will be used for string type filter query.\n */\n DataUtil.odUniOperator = {\n '$=': 'endswith',\n '^=': 'startswith',\n '*=': 'substringof',\n 'endswith': 'endswith',\n 'startswith': 'startswith',\n 'contains': 'substringof'\n };\n /**\n * Specifies the Object with filter operators which will be used for ODataV4 filter query generation.\n * It will be used for string type filter query.\n */\n DataUtil.odv4UniOperator = {\n '$=': 'endswith',\n '^=': 'startswith',\n '*=': 'contains',\n 'endswith': 'endswith',\n 'startswith': 'startswith',\n 'contains': 'contains'\n };\n DataUtil.diacritics = {\n '\\u24B6': 'A',\n '\\uFF21': 'A',\n '\\u00C0': 'A',\n '\\u00C1': 'A',\n '\\u00C2': 'A',\n '\\u1EA6': 'A',\n '\\u1EA4': 'A',\n '\\u1EAA': 'A',\n '\\u1EA8': 'A',\n '\\u00C3': 'A',\n '\\u0100': 'A',\n '\\u0102': 'A',\n '\\u1EB0': 'A',\n '\\u1EAE': 'A',\n '\\u1EB4': 'A',\n '\\u1EB2': 'A',\n '\\u0226': 'A',\n '\\u01E0': 'A',\n '\\u00C4': 'A',\n '\\u01DE': 'A',\n '\\u1EA2': 'A',\n '\\u00C5': 'A',\n '\\u01FA': 'A',\n '\\u01CD': 'A',\n '\\u0200': 'A',\n '\\u0202': 'A',\n '\\u1EA0': 'A',\n '\\u1EAC': 'A',\n '\\u1EB6': 'A',\n '\\u1E00': 'A',\n '\\u0104': 'A',\n '\\u023A': 'A',\n '\\u2C6F': 'A',\n '\\uA732': 'AA',\n '\\u00C6': 'AE',\n '\\u01FC': 'AE',\n '\\u01E2': 'AE',\n '\\uA734': 'AO',\n '\\uA736': 'AU',\n '\\uA738': 'AV',\n '\\uA73A': 'AV',\n '\\uA73C': 'AY',\n '\\u24B7': 'B',\n '\\uFF22': 'B',\n '\\u1E02': 'B',\n '\\u1E04': 'B',\n '\\u1E06': 'B',\n '\\u0243': 'B',\n '\\u0182': 'B',\n '\\u0181': 'B',\n '\\u24B8': 'C',\n '\\uFF23': 'C',\n '\\u0106': 'C',\n '\\u0108': 'C',\n '\\u010A': 'C',\n '\\u010C': 'C',\n '\\u00C7': 'C',\n '\\u1E08': 'C',\n '\\u0187': 'C',\n '\\u023B': 'C',\n '\\uA73E': 'C',\n '\\u24B9': 'D',\n '\\uFF24': 'D',\n '\\u1E0A': 'D',\n '\\u010E': 'D',\n '\\u1E0C': 'D',\n '\\u1E10': 'D',\n '\\u1E12': 'D',\n '\\u1E0E': 'D',\n '\\u0110': 'D',\n '\\u018B': 'D',\n '\\u018A': 'D',\n '\\u0189': 'D',\n '\\uA779': 'D',\n '\\u01F1': 'DZ',\n '\\u01C4': 'DZ',\n '\\u01F2': 'Dz',\n '\\u01C5': 'Dz',\n '\\u24BA': 'E',\n '\\uFF25': 'E',\n '\\u00C8': 'E',\n '\\u00C9': 'E',\n '\\u00CA': 'E',\n '\\u1EC0': 'E',\n '\\u1EBE': 'E',\n '\\u1EC4': 'E',\n '\\u1EC2': 'E',\n '\\u1EBC': 'E',\n '\\u0112': 'E',\n '\\u1E14': 'E',\n '\\u1E16': 'E',\n '\\u0114': 'E',\n '\\u0116': 'E',\n '\\u00CB': 'E',\n '\\u1EBA': 'E',\n '\\u011A': 'E',\n '\\u0204': 'E',\n '\\u0206': 'E',\n '\\u1EB8': 'E',\n '\\u1EC6': 'E',\n '\\u0228': 'E',\n '\\u1E1C': 'E',\n '\\u0118': 'E',\n '\\u1E18': 'E',\n '\\u1E1A': 'E',\n '\\u0190': 'E',\n '\\u018E': 'E',\n '\\u24BB': 'F',\n '\\uFF26': 'F',\n '\\u1E1E': 'F',\n '\\u0191': 'F',\n '\\uA77B': 'F',\n '\\u24BC': 'G',\n '\\uFF27': 'G',\n '\\u01F4': 'G',\n '\\u011C': 'G',\n '\\u1E20': 'G',\n '\\u011E': 'G',\n '\\u0120': 'G',\n '\\u01E6': 'G',\n '\\u0122': 'G',\n '\\u01E4': 'G',\n '\\u0193': 'G',\n '\\uA7A0': 'G',\n '\\uA77D': 'G',\n '\\uA77E': 'G',\n '\\u24BD': 'H',\n '\\uFF28': 'H',\n '\\u0124': 'H',\n '\\u1E22': 'H',\n '\\u1E26': 'H',\n '\\u021E': 'H',\n '\\u1E24': 'H',\n '\\u1E28': 'H',\n '\\u1E2A': 'H',\n '\\u0126': 'H',\n '\\u2C67': 'H',\n '\\u2C75': 'H',\n '\\uA78D': 'H',\n '\\u24BE': 'I',\n '\\uFF29': 'I',\n '\\u00CC': 'I',\n '\\u00CD': 'I',\n '\\u00CE': 'I',\n '\\u0128': 'I',\n '\\u012A': 'I',\n '\\u012C': 'I',\n '\\u0130': 'I',\n '\\u00CF': 'I',\n '\\u1E2E': 'I',\n '\\u1EC8': 'I',\n '\\u01CF': 'I',\n '\\u0208': 'I',\n '\\u020A': 'I',\n '\\u1ECA': 'I',\n '\\u012E': 'I',\n '\\u1E2C': 'I',\n '\\u0197': 'I',\n '\\u24BF': 'J',\n '\\uFF2A': 'J',\n '\\u0134': 'J',\n '\\u0248': 'J',\n '\\u24C0': 'K',\n '\\uFF2B': 'K',\n '\\u1E30': 'K',\n '\\u01E8': 'K',\n '\\u1E32': 'K',\n '\\u0136': 'K',\n '\\u1E34': 'K',\n '\\u0198': 'K',\n '\\u2C69': 'K',\n '\\uA740': 'K',\n '\\uA742': 'K',\n '\\uA744': 'K',\n '\\uA7A2': 'K',\n '\\u24C1': 'L',\n '\\uFF2C': 'L',\n '\\u013F': 'L',\n '\\u0139': 'L',\n '\\u013D': 'L',\n '\\u1E36': 'L',\n '\\u1E38': 'L',\n '\\u013B': 'L',\n '\\u1E3C': 'L',\n '\\u1E3A': 'L',\n '\\u0141': 'L',\n '\\u023D': 'L',\n '\\u2C62': 'L',\n '\\u2C60': 'L',\n '\\uA748': 'L',\n '\\uA746': 'L',\n '\\uA780': 'L',\n '\\u01C7': 'LJ',\n '\\u01C8': 'Lj',\n '\\u24C2': 'M',\n '\\uFF2D': 'M',\n '\\u1E3E': 'M',\n '\\u1E40': 'M',\n '\\u1E42': 'M',\n '\\u2C6E': 'M',\n '\\u019C': 'M',\n '\\u24C3': 'N',\n '\\uFF2E': 'N',\n '\\u01F8': 'N',\n '\\u0143': 'N',\n '\\u00D1': 'N',\n '\\u1E44': 'N',\n '\\u0147': 'N',\n '\\u1E46': 'N',\n '\\u0145': 'N',\n '\\u1E4A': 'N',\n '\\u1E48': 'N',\n '\\u0220': 'N',\n '\\u019D': 'N',\n '\\uA790': 'N',\n '\\uA7A4': 'N',\n '\\u01CA': 'NJ',\n '\\u01CB': 'Nj',\n '\\u24C4': 'O',\n '\\uFF2F': 'O',\n '\\u00D2': 'O',\n '\\u00D3': 'O',\n '\\u00D4': 'O',\n '\\u1ED2': 'O',\n '\\u1ED0': 'O',\n '\\u1ED6': 'O',\n '\\u1ED4': 'O',\n '\\u00D5': 'O',\n '\\u1E4C': 'O',\n '\\u022C': 'O',\n '\\u1E4E': 'O',\n '\\u014C': 'O',\n '\\u1E50': 'O',\n '\\u1E52': 'O',\n '\\u014E': 'O',\n '\\u022E': 'O',\n '\\u0230': 'O',\n '\\u00D6': 'O',\n '\\u022A': 'O',\n '\\u1ECE': 'O',\n '\\u0150': 'O',\n '\\u01D1': 'O',\n '\\u020C': 'O',\n '\\u020E': 'O',\n '\\u01A0': 'O',\n '\\u1EDC': 'O',\n '\\u1EDA': 'O',\n '\\u1EE0': 'O',\n '\\u1EDE': 'O',\n '\\u1EE2': 'O',\n '\\u1ECC': 'O',\n '\\u1ED8': 'O',\n '\\u01EA': 'O',\n '\\u01EC': 'O',\n '\\u00D8': 'O',\n '\\u01FE': 'O',\n '\\u0186': 'O',\n '\\u019F': 'O',\n '\\uA74A': 'O',\n '\\uA74C': 'O',\n '\\u01A2': 'OI',\n '\\uA74E': 'OO',\n '\\u0222': 'OU',\n '\\u24C5': 'P',\n '\\uFF30': 'P',\n '\\u1E54': 'P',\n '\\u1E56': 'P',\n '\\u01A4': 'P',\n '\\u2C63': 'P',\n '\\uA750': 'P',\n '\\uA752': 'P',\n '\\uA754': 'P',\n '\\u24C6': 'Q',\n '\\uFF31': 'Q',\n '\\uA756': 'Q',\n '\\uA758': 'Q',\n '\\u024A': 'Q',\n '\\u24C7': 'R',\n '\\uFF32': 'R',\n '\\u0154': 'R',\n '\\u1E58': 'R',\n '\\u0158': 'R',\n '\\u0210': 'R',\n '\\u0212': 'R',\n '\\u1E5A': 'R',\n '\\u1E5C': 'R',\n '\\u0156': 'R',\n '\\u1E5E': 'R',\n '\\u024C': 'R',\n '\\u2C64': 'R',\n '\\uA75A': 'R',\n '\\uA7A6': 'R',\n '\\uA782': 'R',\n '\\u24C8': 'S',\n '\\uFF33': 'S',\n '\\u1E9E': 'S',\n '\\u015A': 'S',\n '\\u1E64': 'S',\n '\\u015C': 'S',\n '\\u1E60': 'S',\n '\\u0160': 'S',\n '\\u1E66': 'S',\n '\\u1E62': 'S',\n '\\u1E68': 'S',\n '\\u0218': 'S',\n '\\u015E': 'S',\n '\\u2C7E': 'S',\n '\\uA7A8': 'S',\n '\\uA784': 'S',\n '\\u24C9': 'T',\n '\\uFF34': 'T',\n '\\u1E6A': 'T',\n '\\u0164': 'T',\n '\\u1E6C': 'T',\n '\\u021A': 'T',\n '\\u0162': 'T',\n '\\u1E70': 'T',\n '\\u1E6E': 'T',\n '\\u0166': 'T',\n '\\u01AC': 'T',\n '\\u01AE': 'T',\n '\\u023E': 'T',\n '\\uA786': 'T',\n '\\uA728': 'TZ',\n '\\u24CA': 'U',\n '\\uFF35': 'U',\n '\\u00D9': 'U',\n '\\u00DA': 'U',\n '\\u00DB': 'U',\n '\\u0168': 'U',\n '\\u1E78': 'U',\n '\\u016A': 'U',\n '\\u1E7A': 'U',\n '\\u016C': 'U',\n '\\u00DC': 'U',\n '\\u01DB': 'U',\n '\\u01D7': 'U',\n '\\u01D5': 'U',\n '\\u01D9': 'U',\n '\\u1EE6': 'U',\n '\\u016E': 'U',\n '\\u0170': 'U',\n '\\u01D3': 'U',\n '\\u0214': 'U',\n '\\u0216': 'U',\n '\\u01AF': 'U',\n '\\u1EEA': 'U',\n '\\u1EE8': 'U',\n '\\u1EEE': 'U',\n '\\u1EEC': 'U',\n '\\u1EF0': 'U',\n '\\u1EE4': 'U',\n '\\u1E72': 'U',\n '\\u0172': 'U',\n '\\u1E76': 'U',\n '\\u1E74': 'U',\n '\\u0244': 'U',\n '\\u24CB': 'V',\n '\\uFF36': 'V',\n '\\u1E7C': 'V',\n '\\u1E7E': 'V',\n '\\u01B2': 'V',\n '\\uA75E': 'V',\n '\\u0245': 'V',\n '\\uA760': 'VY',\n '\\u24CC': 'W',\n '\\uFF37': 'W',\n '\\u1E80': 'W',\n '\\u1E82': 'W',\n '\\u0174': 'W',\n '\\u1E86': 'W',\n '\\u1E84': 'W',\n '\\u1E88': 'W',\n '\\u2C72': 'W',\n '\\u24CD': 'X',\n '\\uFF38': 'X',\n '\\u1E8A': 'X',\n '\\u1E8C': 'X',\n '\\u24CE': 'Y',\n '\\uFF39': 'Y',\n '\\u1EF2': 'Y',\n '\\u00DD': 'Y',\n '\\u0176': 'Y',\n '\\u1EF8': 'Y',\n '\\u0232': 'Y',\n '\\u1E8E': 'Y',\n '\\u0178': 'Y',\n '\\u1EF6': 'Y',\n '\\u1EF4': 'Y',\n '\\u01B3': 'Y',\n '\\u024E': 'Y',\n '\\u1EFE': 'Y',\n '\\u24CF': 'Z',\n '\\uFF3A': 'Z',\n '\\u0179': 'Z',\n '\\u1E90': 'Z',\n '\\u017B': 'Z',\n '\\u017D': 'Z',\n '\\u1E92': 'Z',\n '\\u1E94': 'Z',\n '\\u01B5': 'Z',\n '\\u0224': 'Z',\n '\\u2C7F': 'Z',\n '\\u2C6B': 'Z',\n '\\uA762': 'Z',\n '\\u24D0': 'a',\n '\\uFF41': 'a',\n '\\u1E9A': 'a',\n '\\u00E0': 'a',\n '\\u00E1': 'a',\n '\\u00E2': 'a',\n '\\u1EA7': 'a',\n '\\u1EA5': 'a',\n '\\u1EAB': 'a',\n '\\u1EA9': 'a',\n '\\u00E3': 'a',\n '\\u0101': 'a',\n '\\u0103': 'a',\n '\\u1EB1': 'a',\n '\\u1EAF': 'a',\n '\\u1EB5': 'a',\n '\\u1EB3': 'a',\n '\\u0227': 'a',\n '\\u01E1': 'a',\n '\\u00E4': 'a',\n '\\u01DF': 'a',\n '\\u1EA3': 'a',\n '\\u00E5': 'a',\n '\\u01FB': 'a',\n '\\u01CE': 'a',\n '\\u0201': 'a',\n '\\u0203': 'a',\n '\\u1EA1': 'a',\n '\\u1EAD': 'a',\n '\\u1EB7': 'a',\n '\\u1E01': 'a',\n '\\u0105': 'a',\n '\\u2C65': 'a',\n '\\u0250': 'a',\n '\\uA733': 'aa',\n '\\u00E6': 'ae',\n '\\u01FD': 'ae',\n '\\u01E3': 'ae',\n '\\uA735': 'ao',\n '\\uA737': 'au',\n '\\uA739': 'av',\n '\\uA73B': 'av',\n '\\uA73D': 'ay',\n '\\u24D1': 'b',\n '\\uFF42': 'b',\n '\\u1E03': 'b',\n '\\u1E05': 'b',\n '\\u1E07': 'b',\n '\\u0180': 'b',\n '\\u0183': 'b',\n '\\u0253': 'b',\n '\\u24D2': 'c',\n '\\uFF43': 'c',\n '\\u0107': 'c',\n '\\u0109': 'c',\n '\\u010B': 'c',\n '\\u010D': 'c',\n '\\u00E7': 'c',\n '\\u1E09': 'c',\n '\\u0188': 'c',\n '\\u023C': 'c',\n '\\uA73F': 'c',\n '\\u2184': 'c',\n '\\u24D3': 'd',\n '\\uFF44': 'd',\n '\\u1E0B': 'd',\n '\\u010F': 'd',\n '\\u1E0D': 'd',\n '\\u1E11': 'd',\n '\\u1E13': 'd',\n '\\u1E0F': 'd',\n '\\u0111': 'd',\n '\\u018C': 'd',\n '\\u0256': 'd',\n '\\u0257': 'd',\n '\\uA77A': 'd',\n '\\u01F3': 'dz',\n '\\u01C6': 'dz',\n '\\u24D4': 'e',\n '\\uFF45': 'e',\n '\\u00E8': 'e',\n '\\u00E9': 'e',\n '\\u00EA': 'e',\n '\\u1EC1': 'e',\n '\\u1EBF': 'e',\n '\\u1EC5': 'e',\n '\\u1EC3': 'e',\n '\\u1EBD': 'e',\n '\\u0113': 'e',\n '\\u1E15': 'e',\n '\\u1E17': 'e',\n '\\u0115': 'e',\n '\\u0117': 'e',\n '\\u00EB': 'e',\n '\\u1EBB': 'e',\n '\\u011B': 'e',\n '\\u0205': 'e',\n '\\u0207': 'e',\n '\\u1EB9': 'e',\n '\\u1EC7': 'e',\n '\\u0229': 'e',\n '\\u1E1D': 'e',\n '\\u0119': 'e',\n '\\u1E19': 'e',\n '\\u1E1B': 'e',\n '\\u0247': 'e',\n '\\u025B': 'e',\n '\\u01DD': 'e',\n '\\u24D5': 'f',\n '\\uFF46': 'f',\n '\\u1E1F': 'f',\n '\\u0192': 'f',\n '\\uA77C': 'f',\n '\\u24D6': 'g',\n '\\uFF47': 'g',\n '\\u01F5': 'g',\n '\\u011D': 'g',\n '\\u1E21': 'g',\n '\\u011F': 'g',\n '\\u0121': 'g',\n '\\u01E7': 'g',\n '\\u0123': 'g',\n '\\u01E5': 'g',\n '\\u0260': 'g',\n '\\uA7A1': 'g',\n '\\u1D79': 'g',\n '\\uA77F': 'g',\n '\\u24D7': 'h',\n '\\uFF48': 'h',\n '\\u0125': 'h',\n '\\u1E23': 'h',\n '\\u1E27': 'h',\n '\\u021F': 'h',\n '\\u1E25': 'h',\n '\\u1E29': 'h',\n '\\u1E2B': 'h',\n '\\u1E96': 'h',\n '\\u0127': 'h',\n '\\u2C68': 'h',\n '\\u2C76': 'h',\n '\\u0265': 'h',\n '\\u0195': 'hv',\n '\\u24D8': 'i',\n '\\uFF49': 'i',\n '\\u00EC': 'i',\n '\\u00ED': 'i',\n '\\u00EE': 'i',\n '\\u0129': 'i',\n '\\u012B': 'i',\n '\\u012D': 'i',\n '\\u00EF': 'i',\n '\\u1E2F': 'i',\n '\\u1EC9': 'i',\n '\\u01D0': 'i',\n '\\u0209': 'i',\n '\\u020B': 'i',\n '\\u1ECB': 'i',\n '\\u012F': 'i',\n '\\u1E2D': 'i',\n '\\u0268': 'i',\n '\\u0131': 'i',\n '\\u24D9': 'j',\n '\\uFF4A': 'j',\n '\\u0135': 'j',\n '\\u01F0': 'j',\n '\\u0249': 'j',\n '\\u24DA': 'k',\n '\\uFF4B': 'k',\n '\\u1E31': 'k',\n '\\u01E9': 'k',\n '\\u1E33': 'k',\n '\\u0137': 'k',\n '\\u1E35': 'k',\n '\\u0199': 'k',\n '\\u2C6A': 'k',\n '\\uA741': 'k',\n '\\uA743': 'k',\n '\\uA745': 'k',\n '\\uA7A3': 'k',\n '\\u24DB': 'l',\n '\\uFF4C': 'l',\n '\\u0140': 'l',\n '\\u013A': 'l',\n '\\u013E': 'l',\n '\\u1E37': 'l',\n '\\u1E39': 'l',\n '\\u013C': 'l',\n '\\u1E3D': 'l',\n '\\u1E3B': 'l',\n '\\u017F': 'l',\n '\\u0142': 'l',\n '\\u019A': 'l',\n '\\u026B': 'l',\n '\\u2C61': 'l',\n '\\uA749': 'l',\n '\\uA781': 'l',\n '\\uA747': 'l',\n '\\u01C9': 'lj',\n '\\u24DC': 'm',\n '\\uFF4D': 'm',\n '\\u1E3F': 'm',\n '\\u1E41': 'm',\n '\\u1E43': 'm',\n '\\u0271': 'm',\n '\\u026F': 'm',\n '\\u24DD': 'n',\n '\\uFF4E': 'n',\n '\\u01F9': 'n',\n '\\u0144': 'n',\n '\\u00F1': 'n',\n '\\u1E45': 'n',\n '\\u0148': 'n',\n '\\u1E47': 'n',\n '\\u0146': 'n',\n '\\u1E4B': 'n',\n '\\u1E49': 'n',\n '\\u019E': 'n',\n '\\u0272': 'n',\n '\\u0149': 'n',\n '\\uA791': 'n',\n '\\uA7A5': 'n',\n '\\u01CC': 'nj',\n '\\u24DE': 'o',\n '\\uFF4F': 'o',\n '\\u00F2': 'o',\n '\\u00F3': 'o',\n '\\u00F4': 'o',\n '\\u1ED3': 'o',\n '\\u1ED1': 'o',\n '\\u1ED7': 'o',\n '\\u1ED5': 'o',\n '\\u00F5': 'o',\n '\\u1E4D': 'o',\n '\\u022D': 'o',\n '\\u1E4F': 'o',\n '\\u014D': 'o',\n '\\u1E51': 'o',\n '\\u1E53': 'o',\n '\\u014F': 'o',\n '\\u022F': 'o',\n '\\u0231': 'o',\n '\\u00F6': 'o',\n '\\u022B': 'o',\n '\\u1ECF': 'o',\n '\\u0151': 'o',\n '\\u01D2': 'o',\n '\\u020D': 'o',\n '\\u020F': 'o',\n '\\u01A1': 'o',\n '\\u1EDD': 'o',\n '\\u1EDB': 'o',\n '\\u1EE1': 'o',\n '\\u1EDF': 'o',\n '\\u1EE3': 'o',\n '\\u1ECD': 'o',\n '\\u1ED9': 'o',\n '\\u01EB': 'o',\n '\\u01ED': 'o',\n '\\u00F8': 'o',\n '\\u01FF': 'o',\n '\\u0254': 'o',\n '\\uA74B': 'o',\n '\\uA74D': 'o',\n '\\u0275': 'o',\n '\\u01A3': 'oi',\n '\\u0223': 'ou',\n '\\uA74F': 'oo',\n '\\u24DF': 'p',\n '\\uFF50': 'p',\n '\\u1E55': 'p',\n '\\u1E57': 'p',\n '\\u01A5': 'p',\n '\\u1D7D': 'p',\n '\\uA751': 'p',\n '\\uA753': 'p',\n '\\uA755': 'p',\n '\\u24E0': 'q',\n '\\uFF51': 'q',\n '\\u024B': 'q',\n '\\uA757': 'q',\n '\\uA759': 'q',\n '\\u24E1': 'r',\n '\\uFF52': 'r',\n '\\u0155': 'r',\n '\\u1E59': 'r',\n '\\u0159': 'r',\n '\\u0211': 'r',\n '\\u0213': 'r',\n '\\u1E5B': 'r',\n '\\u1E5D': 'r',\n '\\u0157': 'r',\n '\\u1E5F': 'r',\n '\\u024D': 'r',\n '\\u027D': 'r',\n '\\uA75B': 'r',\n '\\uA7A7': 'r',\n '\\uA783': 'r',\n '\\u24E2': 's',\n '\\uFF53': 's',\n '\\u00DF': 's',\n '\\u015B': 's',\n '\\u1E65': 's',\n '\\u015D': 's',\n '\\u1E61': 's',\n '\\u0161': 's',\n '\\u1E67': 's',\n '\\u1E63': 's',\n '\\u1E69': 's',\n '\\u0219': 's',\n '\\u015F': 's',\n '\\u023F': 's',\n '\\uA7A9': 's',\n '\\uA785': 's',\n '\\u1E9B': 's',\n '\\u24E3': 't',\n '\\uFF54': 't',\n '\\u1E6B': 't',\n '\\u1E97': 't',\n '\\u0165': 't',\n '\\u1E6D': 't',\n '\\u021B': 't',\n '\\u0163': 't',\n '\\u1E71': 't',\n '\\u1E6F': 't',\n '\\u0167': 't',\n '\\u01AD': 't',\n '\\u0288': 't',\n '\\u2C66': 't',\n '\\uA787': 't',\n '\\uA729': 'tz',\n '\\u24E4': 'u',\n '\\uFF55': 'u',\n '\\u00F9': 'u',\n '\\u00FA': 'u',\n '\\u00FB': 'u',\n '\\u0169': 'u',\n '\\u1E79': 'u',\n '\\u016B': 'u',\n '\\u1E7B': 'u',\n '\\u016D': 'u',\n '\\u00FC': 'u',\n '\\u01DC': 'u',\n '\\u01D8': 'u',\n '\\u01D6': 'u',\n '\\u01DA': 'u',\n '\\u1EE7': 'u',\n '\\u016F': 'u',\n '\\u0171': 'u',\n '\\u01D4': 'u',\n '\\u0215': 'u',\n '\\u0217': 'u',\n '\\u01B0': 'u',\n '\\u1EEB': 'u',\n '\\u1EE9': 'u',\n '\\u1EEF': 'u',\n '\\u1EED': 'u',\n '\\u1EF1': 'u',\n '\\u1EE5': 'u',\n '\\u1E73': 'u',\n '\\u0173': 'u',\n '\\u1E77': 'u',\n '\\u1E75': 'u',\n '\\u0289': 'u',\n '\\u24E5': 'v',\n '\\uFF56': 'v',\n '\\u1E7D': 'v',\n '\\u1E7F': 'v',\n '\\u028B': 'v',\n '\\uA75F': 'v',\n '\\u028C': 'v',\n '\\uA761': 'vy',\n '\\u24E6': 'w',\n '\\uFF57': 'w',\n '\\u1E81': 'w',\n '\\u1E83': 'w',\n '\\u0175': 'w',\n '\\u1E87': 'w',\n '\\u1E85': 'w',\n '\\u1E98': 'w',\n '\\u1E89': 'w',\n '\\u2C73': 'w',\n '\\u24E7': 'x',\n '\\uFF58': 'x',\n '\\u1E8B': 'x',\n '\\u1E8D': 'x',\n '\\u24E8': 'y',\n '\\uFF59': 'y',\n '\\u1EF3': 'y',\n '\\u00FD': 'y',\n '\\u0177': 'y',\n '\\u1EF9': 'y',\n '\\u0233': 'y',\n '\\u1E8F': 'y',\n '\\u00FF': 'y',\n '\\u1EF7': 'y',\n '\\u1E99': 'y',\n '\\u1EF5': 'y',\n '\\u01B4': 'y',\n '\\u024F': 'y',\n '\\u1EFF': 'y',\n '\\u24E9': 'z',\n '\\uFF5A': 'z',\n '\\u017A': 'z',\n '\\u1E91': 'z',\n '\\u017C': 'z',\n '\\u017E': 'z',\n '\\u1E93': 'z',\n '\\u1E95': 'z',\n '\\u01B6': 'z',\n '\\u0225': 'z',\n '\\u0240': 'z',\n '\\u2C6C': 'z',\n '\\uA763': 'z',\n '\\u0386': '\\u0391',\n '\\u0388': '\\u0395',\n '\\u0389': '\\u0397',\n '\\u038A': '\\u0399',\n '\\u03AA': '\\u0399',\n '\\u038C': '\\u039F',\n '\\u038E': '\\u03A5',\n '\\u03AB': '\\u03A5',\n '\\u038F': '\\u03A9',\n '\\u03AC': '\\u03B1',\n '\\u03AD': '\\u03B5',\n '\\u03AE': '\\u03B7',\n '\\u03AF': '\\u03B9',\n '\\u03CA': '\\u03B9',\n '\\u0390': '\\u03B9',\n '\\u03CC': '\\u03BF',\n '\\u03CD': '\\u03C5',\n '\\u03CB': '\\u03C5',\n '\\u03B0': '\\u03C5',\n '\\u03C9': '\\u03C9',\n '\\u03C2': '\\u03C3'\n };\n DataUtil.fnOperators = {\n /**\n * Returns true when the actual input is equal to the given input.\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n * @param {boolean} ignoreAccent?\n */\n equal: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) === DataUtil.toLowerCase(expected);\n }\n return actual === expected;\n },\n /**\n * Returns true when the actual input is not equal to the given input.\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n */\n notequal: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n return !DataUtil.fnOperators.equal(actual, expected, ignoreCase);\n },\n /**\n * Returns true when the actual input is less than to the given input.\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n */\n lessthan: function (actual, expected, ignoreCase) {\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) < DataUtil.toLowerCase(expected);\n }\n return actual < expected;\n },\n /**\n * Returns true when the actual input is greater than to the given input.\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n */\n greaterthan: function (actual, expected, ignoreCase) {\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) > DataUtil.toLowerCase(expected);\n }\n return actual > expected;\n },\n /**\n * Returns true when the actual input is less than or equal to the given input.\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n */\n lessthanorequal: function (actual, expected, ignoreCase) {\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) <= DataUtil.toLowerCase(expected);\n }\n return actual <= expected;\n },\n /**\n * Returns true when the actual input is greater than or equal to the given input.\n * @param {string|number|boolean} actual\n * @param {string|number|boolean} expected\n * @param {boolean} ignoreCase?\n */\n greaterthanorequal: function (actual, expected, ignoreCase) {\n if (ignoreCase) {\n return DataUtil.toLowerCase(actual) >= DataUtil.toLowerCase(expected);\n }\n return actual >= expected;\n },\n /**\n * Returns true when the actual input contains the given string.\n * @param {string|number} actual\n * @param {string|number} expected\n * @param {boolean} ignoreCase?\n */\n contains: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return !isNullOrUndefined(actual) && !isNullOrUndefined(expected) &&\n DataUtil.toLowerCase(actual).indexOf(DataUtil.toLowerCase(expected)) !== -1;\n }\n return !isNullOrUndefined(actual) && !isNullOrUndefined(expected) &&\n actual.toString().indexOf(expected) !== -1;\n },\n /**\n * Returns true when the given input value is not null.\n * @param {string|number} actual\n * @returns boolean\n */\n notnull: function (actual) {\n return actual !== null;\n },\n /**\n * Returns true when the given input value is null.\n * @param {string|number} actual\n * @returns boolean\n */\n isnull: function (actual) {\n return actual === null;\n },\n /**\n * Returns true when the actual input starts with the given string\n * @param {string} actual\n * @param {string} expected\n * @param {boolean} ignoreCase?\n */\n startswith: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return actual && expected && DataUtil.startsWith(DataUtil.toLowerCase(actual), DataUtil.toLowerCase(expected));\n }\n return actual && expected && DataUtil.startsWith(actual, expected);\n },\n /**\n * Returns true when the actual input ends with the given string.\n * @param {string} actual\n * @param {string} expected\n * @param {boolean} ignoreCase?\n */\n endswith: function (actual, expected, ignoreCase, ignoreAccent) {\n if (ignoreAccent) {\n actual = DataUtil.ignoreDiacritics(actual);\n expected = DataUtil.ignoreDiacritics(expected);\n }\n if (ignoreCase) {\n return actual && expected && DataUtil.endsWith(DataUtil.toLowerCase(actual), DataUtil.toLowerCase(expected));\n }\n return actual && expected && DataUtil.endsWith(actual, expected);\n },\n /**\n * It will return the filter operator based on the filter symbol.\n * @param {string} operator\n * @hidden\n */\n processSymbols: function (operator) {\n var fnName = DataUtil.operatorSymbols[operator];\n if (fnName) {\n var fn = DataUtil.fnOperators[fnName];\n return fn;\n }\n return DataUtil.throwError('Query - Process Operator : Invalid operator');\n },\n /**\n * It will return the valid filter operator based on the specified operators.\n * @param {string} operator\n * @hidden\n */\n processOperator: function (operator) {\n var fn = DataUtil.fnOperators[operator];\n if (fn) {\n return fn;\n }\n return DataUtil.fnOperators.processSymbols(operator);\n }\n };\n /**\n * To perform the parse operation on JSON data, like convert to string from JSON or convert to JSON from string.\n */\n DataUtil.parse = {\n /**\n * Parse the given string to the plain JavaScript object.\n * @param {string|Object|Object[]} jsonText\n */\n parseJson: function (jsonText) {\n if (typeof jsonText === 'string') {\n jsonText = JSON.parse(jsonText, DataUtil.parse.jsonReviver);\n }\n else if (jsonText instanceof Array) {\n DataUtil.parse.iterateAndReviveArray(jsonText);\n }\n else if (typeof jsonText === 'object' && jsonText !== null) {\n DataUtil.parse.iterateAndReviveJson(jsonText);\n }\n return jsonText;\n },\n /**\n * It will perform on array of values.\n * @param {string[]|Object[]} array\n * @hidden\n */\n iterateAndReviveArray: function (array) {\n for (var i = 0; i < array.length; i++) {\n if (typeof array[i] === 'object' && array[i] !== null) {\n DataUtil.parse.iterateAndReviveJson(array[i]);\n }\n else if (typeof array[i] === 'string' && !/^[\\s]*\\[|^[\\s]*\\{(.)+:|\\\"/g.test(array[i])) {\n array[i] = DataUtil.parse.jsonReviver('', array[i]);\n }\n else {\n array[i] = DataUtil.parse.parseJson(array[i]);\n }\n }\n },\n /**\n * It will perform on JSON values\n * @param {JSON} json\n * @hidden\n */\n iterateAndReviveJson: function (json) {\n var value;\n var keys = Object.keys(json);\n for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {\n var prop = keys_2[_i];\n if (DataUtil.startsWith(prop, '__')) {\n continue;\n }\n value = json[prop];\n if (typeof value === 'object') {\n if (value instanceof Array) {\n DataUtil.parse.iterateAndReviveArray(value);\n }\n else if (value) {\n DataUtil.parse.iterateAndReviveJson(value);\n }\n }\n else {\n json[prop] = DataUtil.parse.jsonReviver(json[prop], value);\n }\n }\n },\n /**\n * It will perform on JSON values\n * @param {string} field\n * @param {string|Date} value\n * @hidden\n */\n jsonReviver: function (field, value) {\n if (typeof value === 'string') {\n var ms = /^\\/Date\\(([+-]?[0-9]+)([+-][0-9]{4})?\\)\\/$/.exec(value);\n var offSet = DataUtil.timeZoneHandling ? DataUtil.serverTimezoneOffset : null;\n if (ms) {\n return DataUtil.dateParse.toTimeZone(new Date(parseInt(ms[1], 10)), offSet, true);\n }\n else if (/^(\\d{4}\\-\\d\\d\\-\\d\\d([tT][\\d:\\.]*){1})([zZ]|([+\\-])(\\d\\d):?(\\d\\d))?$/.test(value)) {\n var isUTC = value.indexOf('Z') > -1 || value.indexOf('z') > -1;\n var arr = value.split(/[^0-9.]/);\n if (isUTC) {\n value = DataUtil.dateParse\n .toTimeZone(new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), parseInt(arr[4], 10), parseInt(arr[5], 10)), DataUtil.serverTimezoneOffset, false);\n }\n else {\n var utcFormat = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), parseInt(arr[4], 10), parseInt(arr[5], 10));\n var hrs = parseInt(arr[6], 10);\n var mins = parseInt(arr[7], 10);\n if (isNaN(hrs) && isNaN(mins)) {\n return utcFormat;\n }\n if (value.indexOf('+') > -1) {\n utcFormat.setHours(utcFormat.getHours() - hrs, utcFormat.getMinutes() - mins);\n }\n else {\n utcFormat.setHours(utcFormat.getHours() + hrs, utcFormat.getMinutes() + mins);\n }\n value = DataUtil.dateParse\n .toTimeZone(utcFormat, DataUtil.serverTimezoneOffset, false);\n }\n if (DataUtil.serverTimezoneOffset == null) {\n value = DataUtil.dateParse.addSelfOffset(value);\n }\n }\n }\n return value;\n },\n /**\n * Check wheather the given value is JSON or not.\n * @param {Object[]} jsonData\n */\n isJson: function (jsonData) {\n if (typeof jsonData[0] === 'string') {\n return jsonData;\n }\n return DataUtil.parse.parseJson(jsonData);\n },\n /**\n * Checks wheather the given value is GUID or not.\n * @param {string} value\n */\n isGuid: function (value) {\n var regex = /[A-Fa-f0-9]{8}(?:-[A-Fa-f0-9]{4}){3}-[A-Fa-f0-9]{12}/i;\n var match = regex.exec(value);\n return match != null;\n },\n /**\n * The method used to replace the value based on the type.\n * @param {Object} value\n * @param {boolean} stringify\n * @hidden\n */\n replacer: function (value, stringify) {\n if (DataUtil.isPlainObject(value)) {\n return DataUtil.parse.jsonReplacer(value, stringify);\n }\n if (value instanceof Array) {\n return DataUtil.parse.arrayReplacer(value);\n }\n if (value instanceof Date) {\n return DataUtil.parse.jsonReplacer({ val: value }, stringify).val;\n }\n return value;\n },\n /**\n * It will replace the JSON value.\n * @param {string} key\n * @param {Object} val\n * @hidden\n */\n jsonReplacer: function (val, stringify) {\n var value;\n var keys = Object.keys(val);\n for (var _i = 0, keys_3 = keys; _i < keys_3.length; _i++) {\n var prop = keys_3[_i];\n value = val[prop];\n if (!(value instanceof Date)) {\n continue;\n }\n var d = value;\n if (DataUtil.serverTimezoneOffset == null) {\n val[prop] = DataUtil.dateParse.toTimeZone(d, null).toJSON();\n }\n else {\n d = new Date(+d + DataUtil.serverTimezoneOffset * 3600000);\n val[prop] = DataUtil.dateParse.toTimeZone(DataUtil.dateParse.addSelfOffset(d), null).toJSON();\n }\n }\n return val;\n },\n /**\n * It will replace the Array of value.\n * @param {string} key\n * @param {Object[]} val\n * @hidden\n */\n arrayReplacer: function (val) {\n for (var i = 0; i < val.length; i++) {\n if (DataUtil.isPlainObject(val[i])) {\n val[i] = DataUtil.parse.jsonReplacer(val[i]);\n }\n else if (val[i] instanceof Date) {\n val[i] = DataUtil.parse.jsonReplacer({ date: val[i] }).date;\n }\n }\n return val;\n },\n /**\n * It will replace the Date object with respective to UTC format value.\n * @param {string} key\n * @param {any} value\n * @hidden\n */\n /* tslint:disable-next-line:no-any */\n jsonDateReplacer: function (key, value) {\n if (key === 'value' && value) {\n if (typeof value === 'string') {\n var ms = /^\\/Date\\(([+-]?[0-9]+)([+-][0-9]{4})?\\)\\/$/.exec(value);\n if (ms) {\n value = DataUtil.dateParse.toTimeZone(new Date(parseInt(ms[1], 10)), null, true);\n }\n else if (/^(\\d{4}\\-\\d\\d\\-\\d\\d([tT][\\d:\\.]*){1})([zZ]|([+\\-])(\\d\\d):?(\\d\\d))?$/.test(value)) {\n var arr = value.split(/[^0-9]/);\n value = DataUtil.dateParse\n .toTimeZone(new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), parseInt(arr[4], 10), parseInt(arr[5], 10)), null, true);\n }\n }\n if (value instanceof Date) {\n value = DataUtil.dateParse.addSelfOffset(value);\n if (DataUtil.serverTimezoneOffset === null) {\n return DataUtil.dateParse.toTimeZone(DataUtil.dateParse.addSelfOffset(value), null).toJSON();\n }\n else {\n value = DataUtil.dateParse.toTimeZone(value, (((value.getTimezoneOffset() / 60) * 2)\n - DataUtil.serverTimezoneOffset), false);\n return value.toJSON();\n }\n }\n }\n return value;\n }\n };\n /**\n * @hidden\n */\n DataUtil.dateParse = {\n addSelfOffset: function (input) {\n return new Date(+input - (input.getTimezoneOffset() * 60000));\n },\n toUTC: function (input) {\n return new Date(+input + (input.getTimezoneOffset() * 60000));\n },\n toTimeZone: function (input, offset, utc) {\n if (offset === null) {\n return input;\n }\n var unix = utc ? DataUtil.dateParse.toUTC(input) : input;\n return new Date(+unix - (offset * 3600000));\n },\n toLocalTime: function (input) {\n var datefn = input;\n var timeZone = -datefn.getTimezoneOffset();\n var differenceString = timeZone >= 0 ? '+' : '-';\n var localtimefn = function (num) {\n var norm = Math.floor(Math.abs(num));\n return (norm < 10 ? '0' : '') + norm;\n };\n var val = datefn.getFullYear() + '-' + localtimefn(datefn.getMonth() + 1) + '-' + localtimefn(datefn.getDate()) +\n 'T' + localtimefn(datefn.getHours()) +\n ':' + localtimefn(datefn.getMinutes()) +\n ':' + localtimefn(datefn.getSeconds()) +\n differenceString + localtimefn(timeZone / 60) +\n ':' + localtimefn(timeZone % 60);\n return val;\n }\n };\n return DataUtil;\n}());\nexport { DataUtil };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, addClass, append, Property, Event, L10n, compile } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, extend, removeClass, prepend, isNullOrUndefined, detach, getValue } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, rippleEffect, ChildProperty, Complex } from '@syncfusion/ej2-base';\nimport { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';\nimport { ListBase } from '@syncfusion/ej2-lists';\nimport { updateBlazorTemplate, resetBlazorTemplate, isBlazor, remove, select } from '@syncfusion/ej2-base';\nvar FieldSettings = /** @class */ (function (_super) {\n __extends(FieldSettings, _super);\n function FieldSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], FieldSettings.prototype, \"text\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"value\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"iconCss\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"groupBy\", void 0);\n __decorate([\n Property()\n ], FieldSettings.prototype, \"htmlAttributes\", void 0);\n return FieldSettings;\n}(ChildProperty));\nexport { FieldSettings };\nexport var dropDownBaseClasses = {\n root: 'e-dropdownbase',\n rtl: 'e-rtl',\n content: 'e-content',\n selected: 'e-active',\n hover: 'e-hover',\n noData: 'e-nodata',\n fixedHead: 'e-fixed-head',\n focus: 'e-item-focus',\n li: 'e-list-item',\n group: 'e-list-group-item',\n disabled: 'e-disabled',\n grouping: 'e-dd-group'\n};\nvar ITEMTEMPLATE_PROPERTY = 'ItemTemplate';\nvar VALUETEMPLATE_PROPERTY = 'ValueTemplate';\nvar GROUPTEMPLATE_PROPERTY = 'GroupTemplate';\nvar HEADERTEMPLATE_PROPERTY = 'HeaderTemplate';\nvar FOOTERTEMPLATE_PROPERTY = 'FooterTemplate';\nvar NORECORDSTEMPLATE_PROPERTY = 'NoRecordsTemplate';\nvar ACTIONFAILURETEMPLATE_PROPERTY = 'ActionFailureTemplate';\n/**\n * DropDownBase component will generate the list items based on given data and act as base class to drop-down related components\n */\nvar DropDownBase = /** @class */ (function (_super) {\n __extends(DropDownBase, _super);\n /**\n * * Constructor for DropDownBase class\n */\n function DropDownBase(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.preventChange = false;\n _this.isAngular = false;\n _this.isPreventChange = false;\n return _this;\n }\n ;\n DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {\n var newProperty = new Object();\n var oldProperty = new Object();\n // tslint:disable-next-line:no-function-constructor-with-string-args\n var propName = function (prop) {\n return prop;\n };\n newProperty[propName(prop)] = newProp[propName(prop)];\n oldProperty[propName(prop)] = oldProp[propName(prop)];\n var data = new Object();\n data.newProperty = newProperty;\n data.oldProperty = oldProperty;\n return data;\n };\n DropDownBase.prototype.getValueByText = function (text, ignoreCase, ignoreAccent) {\n var value = null;\n if (!isNullOrUndefined(this.listData)) {\n if (ignoreCase) {\n value = this.checkValueCase(text, true, ignoreAccent);\n }\n else {\n value = this.checkValueCase(text, false, ignoreAccent);\n }\n }\n return value;\n };\n ;\n DropDownBase.prototype.checkValueCase = function (text, ignoreCase, ignoreAccent, isTextByValue) {\n var _this = this;\n var value = null;\n if (isTextByValue) {\n value = text;\n }\n var dataSource = this.listData;\n var fields = this.fields;\n var type = this.typeOfData(dataSource).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n for (var _i = 0, dataSource_1 = dataSource; _i < dataSource_1.length; _i++) {\n var item = dataSource_1[_i];\n if (!isNullOrUndefined(item)) {\n if (ignoreAccent) {\n value = this.checkingAccent(String(item), text, ignoreCase);\n }\n else {\n if (ignoreCase) {\n if (this.checkIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n else {\n if (this.checkNonIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase, isTextByValue);\n }\n }\n }\n }\n }\n }\n else {\n if (ignoreCase) {\n dataSource.filter(function (item) {\n var itemValue = getValue(fields.value, item);\n if (!isNullOrUndefined(itemValue) && _this.checkIgnoreCase(getValue(fields.text, item).toString(), text)) {\n value = getValue(fields.value, item);\n }\n });\n }\n else {\n if (isTextByValue) {\n dataSource.filter(function (item) {\n var itemValue = getValue(fields.value, item);\n if (!isNullOrUndefined(itemValue) && !isNullOrUndefined(value) && itemValue.toString() === value.toString()) {\n value = getValue(fields.text, item);\n }\n });\n }\n else {\n dataSource.filter(function (item) {\n if (_this.checkNonIgnoreCase(getValue(fields.text, item), text)) {\n value = getValue(fields.value, item);\n }\n });\n }\n }\n }\n return value;\n };\n DropDownBase.prototype.checkingAccent = function (item, text, ignoreCase) {\n var dataItem = DataUtil.ignoreDiacritics(String(item));\n var textItem = DataUtil.ignoreDiacritics(text.toString());\n var value = null;\n if (ignoreCase) {\n if (this.checkIgnoreCase(dataItem, textItem)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n else {\n if (this.checkNonIgnoreCase(String(item), text)) {\n value = this.getItemValue(String(item), text, ignoreCase);\n }\n }\n return value;\n };\n DropDownBase.prototype.checkIgnoreCase = function (item, text) {\n return String(item).toLowerCase() === text.toString().toLowerCase() ? true : false;\n };\n DropDownBase.prototype.checkNonIgnoreCase = function (item, text) {\n return String(item) === text.toString() ? true : false;\n };\n DropDownBase.prototype.getItemValue = function (dataItem, typedText, ignoreCase, isTextByValue) {\n var value = null;\n var dataSource = this.listData;\n var type = this.typeOfData(dataSource).typeof;\n if (isTextByValue) {\n value = dataItem.toString();\n }\n else {\n if (ignoreCase) {\n value = type === 'string' ? String(dataItem) : this.getFormattedValue(String(dataItem));\n }\n else {\n value = type === 'string' ? typedText : this.getFormattedValue(typedText);\n }\n }\n return value;\n };\n DropDownBase.prototype.templateCompiler = function (baseTemplate) {\n var checkTemplate = false;\n if (baseTemplate) {\n var exception = void 0;\n try {\n checkTemplate = (select(baseTemplate, document).length) ? true : false;\n }\n catch (exception) {\n checkTemplate = false;\n }\n }\n return checkTemplate;\n };\n DropDownBase.prototype.l10nUpdate = function (actionFailure) {\n var ele = this.getModuleName() === 'listbox' ? this.ulElement : this.list;\n if (this.noRecordsTemplate !== 'No records found' || this.actionFailureTemplate !== 'Request failed') {\n this.DropDownBaseresetBlazorTemplates(false, false, true, true);\n var template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;\n var compiledString = void 0;\n var templateId = actionFailure ? this.actionFailureTemplateId : this.noRecordsTemplateId;\n ele.innerHTML = '';\n var tempaltecheck = this.templateCompiler(template);\n if (tempaltecheck) {\n compiledString = compile(select(template, document).innerHTML.trim());\n }\n else {\n compiledString = compile(template);\n }\n var templateName = actionFailure ? 'actionFailureTemplate' : 'noRecordsTemplate';\n // tslint:disable-next-line\n var noDataCompTemp = compiledString({}, this, templateName, templateId, this.isStringTemplate, null, ele);\n if (noDataCompTemp && noDataCompTemp.length > 0) {\n for (var i = 0; i < noDataCompTemp.length; i++) {\n ele.appendChild(noDataCompTemp[i]);\n }\n }\n this.DropDownBaseupdateBlazorTemplates(false, false, !actionFailure, actionFailure, false, false, false, false);\n }\n else {\n var l10nLocale = { noRecordsTemplate: 'No records found', actionFailureTemplate: 'Request failed' };\n var componentLocale = new L10n(this.getLocaleName(), {}, this.locale);\n if (componentLocale.getConstant('actionFailureTemplate') !== '') {\n this.l10n = componentLocale;\n }\n else {\n this.l10n = new L10n(this.getModuleName() === 'listbox' ? 'listbox' : 'dropdowns', l10nLocale, this.locale);\n }\n var content = actionFailure ?\n this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');\n if (this.getModuleName() === 'listbox') {\n var liElem = this.createElement('li');\n liElem.textContent = content;\n ele.appendChild(liElem);\n liElem.classList.add('e-list-nrt');\n }\n else {\n ele.innerHTML = content;\n }\n }\n };\n DropDownBase.prototype.getLocaleName = function () {\n return 'drop-down-base';\n };\n ;\n DropDownBase.prototype.getTextByValue = function (value) {\n var text;\n text = this.checkValueCase(value, false, false, true);\n return text;\n };\n DropDownBase.prototype.getFormattedValue = function (value) {\n if (this.listData && this.listData.length) {\n var item = this.typeOfData(this.listData);\n if (isBlazor() && isNullOrUndefined(value) || value === 'null') {\n return null;\n }\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'number'\n || item.typeof === 'number') {\n return parseFloat(value);\n }\n if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'boolean'\n || item.typeof === 'boolean') {\n return (value === 'true');\n }\n }\n return value;\n };\n /**\n * Sets RTL to dropdownbase wrapper\n */\n DropDownBase.prototype.setEnableRtl = function () {\n if (this.list) {\n this.enableRtlElements.push(this.list);\n }\n this.enableRtl ? addClass(this.enableRtlElements, dropDownBaseClasses.rtl) :\n removeClass(this.enableRtlElements, dropDownBaseClasses.rtl);\n };\n ;\n /**\n * Initialize the Component.\n */\n DropDownBase.prototype.initialize = function () {\n this.bindEvent = true;\n this.actionFailureTemplateId = \"\" + this.element.id + ACTIONFAILURETEMPLATE_PROPERTY;\n if (this.element.tagName === 'UL') {\n var jsonElement = ListBase.createJsonFromElement(this.element);\n this.setProperties({ fields: { text: 'text', value: 'text' } }, true);\n this.resetList(jsonElement, this.fields);\n }\n else if (this.element.tagName === 'SELECT') {\n var dataSource = this.dataSource instanceof Array ? (this.dataSource.length > 0 ? true : false)\n : !isNullOrUndefined(this.dataSource) ? true : false;\n if (!dataSource) {\n this.renderItemsBySelect();\n }\n }\n else {\n this.setListData(this.dataSource, this.fields, this.query);\n }\n };\n ;\n DropDownBase.prototype.DropDownBaseupdateBlazorTemplates = function (item, group, noRecord, action, value, header, footer, isEmpty) {\n if (!this.isStringTemplate) {\n if (this.itemTemplate && item) {\n updateBlazorTemplate(this.itemTemplateId, ITEMTEMPLATE_PROPERTY, this, isEmpty);\n }\n if (this.groupTemplate && group) {\n updateBlazorTemplate(this.groupTemplateId, GROUPTEMPLATE_PROPERTY, this, isEmpty);\n }\n if (this.noRecordsTemplate && noRecord) {\n updateBlazorTemplate(this.noRecordsTemplateId, NORECORDSTEMPLATE_PROPERTY, this, isEmpty);\n }\n if (this.actionFailureTemplate && action) {\n updateBlazorTemplate(this.actionFailureTemplateId, ACTIONFAILURETEMPLATE_PROPERTY, this, isEmpty);\n }\n if (value) {\n updateBlazorTemplate(this.valueTemplateId, VALUETEMPLATE_PROPERTY, this, isEmpty);\n }\n if (header) {\n updateBlazorTemplate(this.headerTemplateId, HEADERTEMPLATE_PROPERTY, this);\n }\n if (footer) {\n updateBlazorTemplate(this.footerTemplateId, FOOTERTEMPLATE_PROPERTY, this);\n }\n }\n };\n DropDownBase.prototype.DropDownBaseresetBlazorTemplates = function (item, group, noRecord, action, value, header, footer) {\n if (!this.isStringTemplate) {\n if (this.itemTemplate && item) {\n resetBlazorTemplate(this.itemTemplateId, ITEMTEMPLATE_PROPERTY);\n }\n if (this.groupTemplate && group) {\n resetBlazorTemplate(this.groupTemplateId, GROUPTEMPLATE_PROPERTY);\n }\n if (this.noRecordsTemplate && noRecord) {\n resetBlazorTemplate(this.noRecordsTemplateId, NORECORDSTEMPLATE_PROPERTY);\n }\n if (this.actionFailureTemplate && action) {\n resetBlazorTemplate(this.actionFailureTemplateId, ACTIONFAILURETEMPLATE_PROPERTY);\n }\n if (value) {\n resetBlazorTemplate(this.valueTemplateId, VALUETEMPLATE_PROPERTY);\n }\n if (header) {\n resetBlazorTemplate(this.headerTemplateId, HEADERTEMPLATE_PROPERTY);\n }\n if (footer) {\n resetBlazorTemplate(this.footerTemplateId, FOOTERTEMPLATE_PROPERTY);\n }\n }\n };\n /**\n * Get the properties to be maintained in persisted state.\n */\n DropDownBase.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n ;\n /**\n * Sets the enabled state to DropDownBase.\n */\n DropDownBase.prototype.setEnabled = function () {\n this.element.setAttribute('aria-disabled', (this.enabled) ? 'false' : 'true');\n };\n ;\n /**\n * Sets the enabled state to DropDownBase.\n */\n DropDownBase.prototype.updateDataAttribute = function (value) {\n var invalidAttr = ['class', 'style', 'id', 'type'];\n var attr = {};\n for (var a = 0; a < this.element.attributes.length; a++) {\n if (invalidAttr.indexOf(this.element.attributes[a].name) === -1 &&\n !(this.getModuleName() === 'dropdownlist' && this.element.attributes[a].name === 'readonly')) {\n attr[this.element.attributes[a].name] = this.element.getAttribute(this.element.attributes[a].name);\n }\n }\n extend(attr, value, attr);\n this.setProperties({ htmlAttributes: attr }, true);\n };\n DropDownBase.prototype.renderItemsBySelect = function () {\n var element = this.element;\n var fields = { value: 'value', text: 'text' };\n var jsonElement = [];\n var group = element.querySelectorAll('select>optgroup');\n var option = element.querySelectorAll('select>option');\n this.getJSONfromOption(jsonElement, option, fields);\n if (group.length) {\n for (var i = 0; i < group.length; i++) {\n var item = group[i];\n var optionGroup = {};\n optionGroup[fields.text] = item.label;\n optionGroup.isHeader = true;\n var child = item.querySelectorAll('option');\n jsonElement.push(optionGroup);\n this.getJSONfromOption(jsonElement, child, fields);\n }\n var items = element.querySelectorAll('select>option');\n }\n this.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] = !isNullOrUndefined(option.getAttribute(fields.value)) ?\n option.getAttribute(fields.value) : option.innerText;\n items.push(json);\n }\n };\n /**\n * Execute before render the list items\n * @private\n */\n DropDownBase.prototype.preRender = function () {\n // there is no event handler\n this.scrollTimer = -1;\n this.enableRtlElements = [];\n this.isRequested = false;\n this.isDataFetched = false;\n this.itemTemplateId = \"\" + this.element.id + ITEMTEMPLATE_PROPERTY;\n this.valueTemplateId = \"\" + this.element.id + VALUETEMPLATE_PROPERTY;\n this.groupTemplateId = \"\" + this.element.id + GROUPTEMPLATE_PROPERTY;\n this.headerTemplateId = \"\" + this.element.id + HEADERTEMPLATE_PROPERTY;\n this.footerTemplateId = \"\" + this.element.id + FOOTERTEMPLATE_PROPERTY;\n this.noRecordsTemplateId = \"\" + this.element.id + NORECORDSTEMPLATE_PROPERTY;\n };\n /**\n * Creates the list items of DropDownBase component.\n */\n DropDownBase.prototype.setListData = function (dataSource, fields, query) {\n var _this = this;\n fields = fields ? fields : this.fields;\n var ulElement;\n this.isActive = true;\n var eventArgs = { cancel: false, data: dataSource, query: query };\n this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;\n this.trigger('actionBegin', eventArgs, function (eventArgs) {\n if (!eventArgs.cancel) {\n _this.showSpinner();\n if (dataSource instanceof DataManager) {\n _this.isRequested = true;\n if (_this.isDataFetched) {\n _this.emptyDataRequest(fields);\n return;\n }\n eventArgs.data.executeQuery(_this.getQuery(eventArgs.query)).then(function (e) {\n _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;\n _this.trigger('actionComplete', e, function (e) {\n if (!e.cancel) {\n var listItems = e.result;\n if (listItems.length === 0) {\n _this.isDataFetched = true;\n }\n ulElement = _this.renderItems(listItems, fields);\n _this.onActionComplete(ulElement, listItems, e);\n if (_this.groupTemplate) {\n _this.renderGroupTemplate(ulElement);\n }\n _this.isRequested = false;\n _this.bindChildItems(listItems, ulElement, fields, e);\n }\n });\n }).catch(function (e) {\n _this.isRequested = false;\n _this.onActionFailure(e);\n _this.hideSpinner();\n });\n }\n else {\n var dataManager = new DataManager(eventArgs.data);\n var listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);\n var localDataArgs = { cancel: false, result: listItems };\n _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;\n _this.trigger('actionComplete', localDataArgs, function (localDataArgs) {\n if (!localDataArgs.cancel) {\n ulElement = _this.renderItems(localDataArgs.result, fields);\n _this.onActionComplete(ulElement, localDataArgs.result);\n if (_this.groupTemplate) {\n _this.renderGroupTemplate(ulElement);\n }\n _this.bindChildItems(localDataArgs.result, ulElement, fields);\n }\n });\n }\n }\n });\n };\n DropDownBase.prototype.bindChildItems = function (listItems, ulElement, fields, e) {\n var _this = this;\n if (listItems.length >= 100 && this.getModuleName() === 'autocomplete') {\n setTimeout(function () {\n var childNode = _this.remainingItems(_this.sortedData, fields);\n append(childNode, ulElement);\n _this.DropDownBaseupdateBlazorTemplates(true, false, false, false);\n _this.liCollections = _this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n _this.updateListValues();\n _this.raiseDataBound(listItems, e);\n }, 0);\n }\n else {\n this.raiseDataBound(listItems, e);\n }\n };\n DropDownBase.prototype.updateListValues = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.findListElement = function (list, findNode, attribute, value) {\n var liElement = null;\n if (list) {\n var listArr = [].slice.call(list.querySelectorAll(findNode));\n for (var index = 0; index < listArr.length; index++) {\n if (listArr[index].getAttribute(attribute) === (value + '')) {\n liElement = listArr[index];\n break;\n }\n }\n }\n return liElement;\n };\n DropDownBase.prototype.raiseDataBound = function (listItems, e) {\n this.hideSpinner();\n var dataBoundEventArgs = {\n items: listItems,\n e: e\n };\n this.trigger('dataBound', dataBoundEventArgs);\n };\n DropDownBase.prototype.remainingItems = function (dataSource, fields) {\n var spliceData = new DataManager(dataSource).executeLocal(new Query().skip(100));\n if (this.itemTemplate) {\n var listElements = this.templateListItem(spliceData, fields);\n return [].slice.call(listElements.childNodes);\n }\n var type = this.typeOfData(spliceData).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n return ListBase.createListItemFromArray(this.createElement, spliceData, true, this.listOption(spliceData, fields), this);\n }\n return ListBase.createListItemFromJson(this.createElement, spliceData, this.listOption(spliceData, fields), 1, true, this);\n };\n DropDownBase.prototype.emptyDataRequest = function (fields) {\n var listItems = [];\n this.onActionComplete(this.renderItems(listItems, fields), listItems);\n this.isRequested = false;\n this.hideSpinner();\n };\n DropDownBase.prototype.showSpinner = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.hideSpinner = function () {\n // Used this method in component side.\n };\n DropDownBase.prototype.onActionFailure = function (e) {\n this.liCollections = [];\n this.trigger('actionFailure', e);\n this.l10nUpdate(true);\n addClass([this.list], dropDownBaseClasses.noData);\n };\n DropDownBase.prototype.onActionComplete = function (ulElement, list, e) {\n this.listData = list;\n if (isBlazor() && this.isServerRendered && this.getModuleName() === 'listbox') {\n remove(this.list.querySelector('.e-list-parent'));\n remove(this.list.querySelector('.e-hidden-select'));\n }\n else {\n // tslint:disable-next-line \n if (this.isReact) {\n this.clearTemplate(['itemTemplate', 'groupTemplate', 'actionFailureTemplate', 'noRecordsTemplate']);\n }\n this.list.innerHTML = '';\n }\n this.fixedHeaderElement = isNullOrUndefined(this.fixedHeaderElement) ? this.fixedHeaderElement : null;\n this.list.appendChild(ulElement);\n this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);\n this.ulElement = this.list.querySelector('ul');\n this.postRender(this.list, list, this.bindEvent);\n };\n DropDownBase.prototype.postRender = function (listElement, list, bindEvent) {\n var focusItem = listElement.querySelector('.' + dropDownBaseClasses.li);\n var selectedItem = listElement.querySelector('.' + dropDownBaseClasses.selected);\n if (focusItem && !selectedItem) {\n focusItem.classList.add(dropDownBaseClasses.focus);\n }\n if (list.length <= 0) {\n this.l10nUpdate();\n addClass([listElement], dropDownBaseClasses.noData);\n }\n else {\n listElement.classList.remove(dropDownBaseClasses.noData);\n }\n };\n /**\n * Get the query to do the data operation before list item generation.\n */\n DropDownBase.prototype.getQuery = function (query) {\n return query ? query : this.query ? this.query : new Query();\n };\n /**\n * To render the template content for group header element.\n */\n DropDownBase.prototype.renderGroupTemplate = function (listEle) {\n if (this.fields.groupBy !== null && this.dataSource || this.element.querySelector('.' + dropDownBaseClasses.group)) {\n var dataSource = this.dataSource;\n var option = { groupTemplateID: this.groupTemplateId, isStringTemplate: this.isStringTemplate };\n var headerItems = listEle.querySelectorAll('.' + dropDownBaseClasses.group);\n var groupcheck = this.templateCompiler(this.groupTemplate);\n if (groupcheck) {\n var groupValue = select(this.groupTemplate, document).innerHTML.trim();\n var tempHeaders = ListBase.renderGroupTemplate(groupValue, dataSource, this.fields.properties, headerItems, option, this);\n }\n else {\n var tempHeaders = ListBase.renderGroupTemplate(this.groupTemplate, dataSource, this.fields.properties, headerItems, option, this);\n }\n this.DropDownBaseupdateBlazorTemplates(false, true, false, false, false, false, false, false);\n }\n };\n /**\n * To create the ul li list items\n */\n DropDownBase.prototype.createListItems = function (dataSource, fields) {\n if (dataSource && fields.groupBy || this.element.querySelector('optgroup')) {\n if (fields.groupBy) {\n if (this.sortOrder !== 'None') {\n dataSource = this.getSortedDataSource(dataSource);\n }\n dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);\n }\n addClass([this.list], dropDownBaseClasses.grouping);\n }\n else {\n dataSource = this.getSortedDataSource(dataSource);\n }\n var options = this.listOption(dataSource, fields);\n var spliceData = (dataSource.length > 100) ?\n new DataManager(dataSource).executeLocal(new Query().take(100))\n : dataSource;\n this.sortedData = dataSource;\n return ListBase.createList(this.createElement, (this.getModuleName() === 'autocomplete') ? spliceData : dataSource, options, true, this);\n };\n ;\n DropDownBase.prototype.listOption = function (dataSource, fields) {\n var iconCss = isNullOrUndefined(fields.iconCss) ? false : true;\n var fieldValues = !isNullOrUndefined(fields.properties) ?\n fields.properties : fields;\n var options = (fields.text !== null || fields.value !== null) ? {\n fields: fieldValues,\n showIcon: iconCss, ariaAttributes: { groupItemRole: 'presentation' }\n } : { fields: { value: 'text' } };\n return extend({}, options, fields, true);\n };\n ;\n DropDownBase.prototype.setFloatingHeader = function (e) {\n if (isNullOrUndefined(this.fixedHeaderElement)) {\n this.fixedHeaderElement = this.createElement('div', { className: dropDownBaseClasses.fixedHead });\n if (!this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {\n this.fixedHeaderElement.style.display = 'none';\n }\n prepend([this.fixedHeaderElement], this.list);\n this.setFixedHeader();\n }\n if (!isNullOrUndefined(this.fixedHeaderElement) && this.fixedHeaderElement.style.zIndex === '0') {\n this.setFixedHeader();\n }\n this.scrollStop(e);\n };\n DropDownBase.prototype.scrollStop = function (e) {\n var target = e.target;\n var liHeight = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);\n var topIndex = Math.round(target.scrollTop / liHeight);\n var liCollections = this.list.querySelectorAll('li');\n for (var i = topIndex; i > -1; i--) {\n if (!isNullOrUndefined(liCollections[i]) && liCollections[i].classList.contains(dropDownBaseClasses.group)) {\n var currentLi = liCollections[i];\n this.fixedHeaderElement.innerHTML = currentLi.innerHTML;\n this.fixedHeaderElement.style.top = e.target.scrollTop + 'px';\n this.fixedHeaderElement.style.display = 'block';\n break;\n }\n else {\n this.fixedHeaderElement.style.display = 'none';\n this.fixedHeaderElement.style.top = 'none';\n }\n }\n };\n /**\n * To render the list items\n */\n DropDownBase.prototype.renderItems = function (listData, fields) {\n var ulElement;\n if (this.itemTemplate && listData) {\n var dataSource = listData;\n if (dataSource && fields.groupBy) {\n if (this.sortOrder !== 'None') {\n dataSource = this.getSortedDataSource(dataSource);\n }\n dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);\n }\n else {\n dataSource = this.getSortedDataSource(dataSource);\n }\n this.sortedData = dataSource;\n var spliceData = (dataSource.length > 100) ?\n new DataManager(dataSource).executeLocal(new Query().take(100))\n : dataSource;\n ulElement = this.templateListItem((this.getModuleName() === 'autocomplete') ? spliceData : dataSource, fields);\n var isTempEmpty = (this.getModuleName() === 'listbox') ? true : false;\n this.DropDownBaseupdateBlazorTemplates(true, false, false, false, false, false, false, isTempEmpty);\n }\n else {\n ulElement = this.createListItems(listData, fields);\n }\n return ulElement;\n };\n ;\n DropDownBase.prototype.templateListItem = function (dataSource, fields) {\n this.DropDownBaseresetBlazorTemplates(true, false, false, false);\n var option = this.listOption(dataSource, fields);\n option.templateID = this.itemTemplateId;\n option.isStringTemplate = this.isStringTemplate;\n var itemcheck = this.templateCompiler(this.itemTemplate);\n if (itemcheck) {\n var itemValue = select(this.itemTemplate, document).innerHTML.trim();\n return ListBase.renderContentTemplate(this.createElement, itemValue, dataSource, fields.properties, option, this);\n }\n else {\n return ListBase.renderContentTemplate(this.createElement, this.itemTemplate, dataSource, fields.properties, option, this);\n }\n };\n ;\n DropDownBase.prototype.typeOfData = function (items) {\n var item = { typeof: null, item: null };\n for (var i = 0; (!isNullOrUndefined(items) && i < items.length); i++) {\n if (!isNullOrUndefined(items[i])) {\n var listDataType = typeof (items[i]) === 'string' ||\n typeof (items[i]) === 'number' || typeof (items[i]) === 'boolean';\n var isNullData = listDataType ? isNullOrUndefined(items[i]) :\n isNullOrUndefined(getValue((this.fields.value ? this.fields.value : 'value'), items[i]));\n if (!isNullData) {\n return item = { typeof: typeof items[i], item: items[i] };\n }\n }\n }\n return item;\n };\n DropDownBase.prototype.setFixedHeader = function () {\n this.list.parentElement.style.display = 'block';\n var borderWidth = 0;\n if (this.list && this.list.parentElement) {\n borderWidth = parseInt(document.defaultView.getComputedStyle(this.list.parentElement, null).getPropertyValue('border-width'), 10);\n }\n var liWidth = this.liCollections[0].offsetWidth - borderWidth;\n this.fixedHeaderElement.style.width = liWidth.toString() + 'px';\n setStyleAttribute(this.fixedHeaderElement, { zIndex: 10 });\n var firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group);\n this.fixedHeaderElement.innerHTML = firstLi.innerHTML;\n };\n DropDownBase.prototype.getSortedDataSource = function (dataSource) {\n if (dataSource && this.sortOrder !== 'None') {\n var textField = this.fields.text ? this.fields.text : 'text';\n if (this.typeOfData(dataSource).typeof === 'string' || this.typeOfData(dataSource).typeof === 'number'\n || this.typeOfData(dataSource).typeof === 'boolean') {\n textField = '';\n }\n dataSource = ListBase.getDataSource(dataSource, ListBase.addSorting(this.sortOrder, textField));\n }\n return dataSource;\n };\n /**\n * Return the index of item which matched with given value in data source\n */\n DropDownBase.prototype.getIndexByValue = function (value) {\n var index;\n var listItems = this.getItems();\n for (var i = 0; i < listItems.length; i++) {\n if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {\n index = i;\n break;\n }\n }\n return index;\n };\n ;\n /**\n * To dispatch the event manually\n */\n DropDownBase.prototype.dispatchEvent = function (element, type) {\n var evt = document.createEvent('HTMLEvents');\n evt.initEvent(type, false, true);\n element.dispatchEvent(evt);\n };\n /**\n * To set the current fields\n */\n DropDownBase.prototype.setFields = function () {\n if (this.fields.value && !this.fields.text) {\n this.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 if ((this.element.tagName === 'SELECT' && this.element.options.length > 0)\n || (this.element.tagName === 'UL' && this.element.childNodes.length > 0)) {\n var data = dataSource instanceof Array ? (dataSource.length > 0)\n : !isNullOrUndefined(dataSource);\n if (!data && this.selectData && this.selectData.length > 0) {\n dataSource = this.selectData;\n }\n }\n this.setListData(dataSource, fields, query);\n }\n };\n DropDownBase.prototype.updateSelectElementData = function (isFiltering) {\n if (isFiltering && isNullOrUndefined(this.selectData) && this.listData && this.listData.length > 0) {\n this.selectData = this.listData;\n }\n };\n DropDownBase.prototype.updateSelection = function () {\n // This is for after added the item, need to update the selected index values.\n };\n DropDownBase.prototype.renderList = function () {\n // This is for render the list items.\n this.render();\n };\n DropDownBase.prototype.updateDataSource = function (props) {\n this.resetList(this.dataSource);\n };\n DropDownBase.prototype.setUpdateInitial = function (props, newProp) {\n this.isDataFetched = false;\n var updateData = {};\n for (var j = 0; props.length > j; j++) {\n if (newProp[props[j]] && props[j] === 'fields') {\n this.setFields();\n }\n else if (newProp[props[j]]) {\n updateData[props[j]] = newProp[props[j]];\n }\n }\n if (Object.keys(updateData).length > 0) {\n if (Object.keys(updateData).indexOf('dataSource') === -1) {\n updateData.dataSource = this.dataSource;\n }\n this.updateDataSource(updateData);\n }\n };\n /**\n * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.\n * @private\n */\n DropDownBase.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (this.getModuleName() === 'dropdownbase') {\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n }\n this.setUpdateInitial(['sortOrder', 'itemTemplate'], newProp);\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'query':\n case 'sortOrder':\n case 'dataSource':\n case 'itemTemplate':\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'enabled':\n this.setEnabled();\n break;\n case 'groupTemplate':\n this.renderGroupTemplate(this.list);\n if (this.ulElement && this.fixedHeaderElement) {\n var firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group);\n this.fixedHeaderElement.innerHTML = firstLi.innerHTML;\n }\n break;\n case 'locale':\n if (this.list && (!isNullOrUndefined(this.liCollections) && this.liCollections.length === 0)) {\n this.l10nUpdate();\n }\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n this.setZIndex();\n break;\n }\n }\n };\n ;\n /**\n * Build and render the component\n * @private\n */\n DropDownBase.prototype.render = function (isEmptyData) {\n this.list = this.createElement('div', { className: dropDownBaseClasses.content, attrs: { 'tabindex': '0' } });\n this.list.classList.add(dropDownBaseClasses.root);\n this.setFields();\n var rippleModel = { duration: 300, selector: '.' + dropDownBaseClasses.li };\n this.rippleFun = rippleEffect(this.list, rippleModel);\n var group = this.element.querySelector('select>optgroup');\n if ((this.fields.groupBy || !isNullOrUndefined(group)) && !this.isGroupChecking) {\n EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);\n }\n if (this.getModuleName() === 'dropdownbase') {\n if (this.element.getAttribute('tabindex')) {\n this.list.setAttribute('tabindex', this.element.getAttribute('tabindex'));\n }\n removeClass([this.element], dropDownBaseClasses.root);\n this.element.style.display = 'none';\n var wrapperElement = this.createElement('div');\n this.element.parentElement.insertBefore(wrapperElement, this.element);\n wrapperElement.appendChild(this.element);\n wrapperElement.appendChild(this.list);\n }\n this.setEnableRtl();\n this.setEnabled();\n if (!isEmptyData) {\n this.initialize();\n }\n };\n ;\n /**\n * Return the module name of this component.\n * @private\n */\n DropDownBase.prototype.getModuleName = function () {\n return 'dropdownbase';\n };\n ;\n /**\n * Gets all the list items bound on this component.\n * @returns Element[].\n */\n DropDownBase.prototype.getItems = function () {\n return this.ulElement.querySelectorAll('.' + dropDownBaseClasses.li);\n };\n ;\n /**\n * Adds a new item to the popup list. By default, new item appends to the list as the last item,\n * but you can insert based on the index parameter.\n * @param { Object[] } items - Specifies an array of JSON data or a JSON data.\n * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.\n * @return {void}.\n\n */\n DropDownBase.prototype.addItem = function (items, itemIndex) {\n if (!this.list || (this.list.textContent === this.noRecordsTemplate && this.getModuleName() !== 'listbox')) {\n this.renderList();\n }\n if (this.sortOrder !== 'None' && isNullOrUndefined(itemIndex)) {\n var newList = [].slice.call(this.listData);\n newList.push(items);\n newList = this.getSortedDataSource(newList);\n if (this.fields.groupBy) {\n newList = ListBase.groupDataSource(newList, this.fields.properties, this.sortOrder);\n itemIndex = newList.indexOf(items);\n }\n else {\n itemIndex = newList.indexOf(items);\n }\n }\n this.DropDownBaseresetBlazorTemplates(true, false, false, false);\n var itemsCount = this.getItems().length;\n var selectedItemValue = this.list.querySelector('.' + dropDownBaseClasses.selected);\n items = (items instanceof Array ? items : [items]);\n var index;\n index = (isNullOrUndefined(itemIndex) || itemIndex < 0 || itemIndex > itemsCount - 1) ? itemsCount : itemIndex;\n var fields = this.fields;\n if (items && fields.groupBy) {\n items = ListBase.groupDataSource(items, fields.properties);\n }\n var liCollections = [];\n for (var i = 0; i < items.length; i++) {\n var item = items[i];\n var isHeader = item.isHeader;\n var li = this.createElement('li', { className: isHeader ? dropDownBaseClasses.group : dropDownBaseClasses.li, id: 'option-add-' + i });\n var itemText = item instanceof Object ? getValue(fields.text, item) : item;\n if (isHeader) {\n li.innerText = itemText;\n }\n if (this.itemTemplate && !isHeader) {\n var compiledString = compile(this.itemTemplate);\n // tslint:disable-next-line\n var addItemTemplate = compiledString(item, this, 'itemTemplate', this.itemTemplateId, this.isStringTemplate, null, li);\n if (addItemTemplate) {\n append(addItemTemplate, li);\n }\n this.DropDownBaseupdateBlazorTemplates(true, false, false, false);\n }\n else if (!isHeader) {\n li.appendChild(document.createTextNode(itemText));\n }\n li.setAttribute('data-value', item instanceof Object ? getValue(fields.value, item) : item);\n li.setAttribute('role', 'option');\n this.notify('addItem', { module: 'CheckBoxSelection', item: li });\n liCollections.push(li);\n this.listData.push(item);\n if (this.sortOrder === 'None' && isNullOrUndefined(itemIndex) && index === 0) {\n index = null;\n }\n this.updateActionCompleteData(li, item, index);\n //Listbox event\n this.trigger('beforeItemRender', { element: li, item: item });\n }\n if (itemsCount === 0 && isNullOrUndefined(this.list.querySelector('ul'))) {\n this.list.innerHTML = '';\n this.list.classList.remove(dropDownBaseClasses.noData);\n this.list.appendChild(this.ulElement);\n this.liCollections = liCollections;\n append(liCollections, this.ulElement);\n this.updateAddItemList(this.list, itemsCount);\n }\n else {\n if (this.getModuleName() === 'listbox' && itemsCount === 0) {\n this.ulElement.innerHTML = '';\n }\n var attr = [];\n for (var i = 0; i < items.length; i++) {\n var listGroupItem = this.ulElement.querySelectorAll('.e-list-group-item');\n for (var j = 0; j < listGroupItem.length; j++) {\n attr[j] = listGroupItem[j].innerText;\n }\n if (attr.indexOf(liCollections[i].innerText) > -1 && fields.groupBy) {\n for (var j = 0; j < listGroupItem.length; j++) {\n if (attr[j] === liCollections[i].innerText) {\n if (this.sortOrder === 'None') {\n this.ulElement.insertBefore(liCollections[i + 1], listGroupItem[j + 1]);\n }\n else {\n this.ulElement.insertBefore(liCollections[i + 1], this.ulElement.childNodes[itemIndex]);\n }\n i = i + 1;\n break;\n }\n }\n }\n else {\n if (this.liCollections[index]) {\n this.liCollections[index].parentNode.insertBefore(liCollections[i], this.liCollections[index]);\n }\n else {\n this.ulElement.appendChild(liCollections[i]);\n }\n }\n var tempLi = [].slice.call(this.liCollections);\n tempLi.splice(index, 0, liCollections[i]);\n this.liCollections = tempLi;\n index += 1;\n if (this.getModuleName() === 'multiselect') {\n this.updateDataList();\n }\n }\n }\n if (selectedItemValue || itemIndex === 0) {\n this.updateSelection();\n }\n };\n DropDownBase.prototype.validationAttribute = function (target, hidden) {\n var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');\n hidden.setAttribute('name', name);\n target.removeAttribute('name');\n var attributes = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attributes.length; i++) {\n if (!target.getAttribute(attributes[i])) {\n continue;\n }\n var attr = target.getAttribute(attributes[i]);\n hidden.setAttribute(attributes[i], attr);\n target.removeAttribute(attributes[i]);\n }\n };\n DropDownBase.prototype.setZIndex = function () {\n // this is for component wise\n };\n DropDownBase.prototype.updateActionCompleteData = function (li, item, index) {\n // this is for ComboBox custom value\n };\n DropDownBase.prototype.updateAddItemList = function (list, itemCount) {\n // this is for multiselect add item\n };\n DropDownBase.prototype.updateDataList = function () {\n // this is for multiselect update list items\n };\n /**\n * Gets the data Object that matches the given value.\n * @param { string | number } value - Specifies the value of the list item.\n * @returns Object.\n * @blazorType object\n */\n DropDownBase.prototype.getDataByValue = function (value) {\n if (!isNullOrUndefined(this.listData)) {\n var type = this.typeOfData(this.listData).typeof;\n if (type === 'string' || type === 'number' || type === 'boolean') {\n for (var _i = 0, _a = this.listData; _i < _a.length; _i++) {\n var item = _a[_i];\n if (!isNullOrUndefined(item) && item === value) {\n return item;\n }\n }\n }\n else {\n for (var _b = 0, _c = this.listData; _b < _c.length; _b++) {\n var item = _c[_b];\n if (!isNullOrUndefined(item) && getValue((this.fields.value ? this.fields.value : 'value'), item) === value) {\n return item;\n }\n }\n }\n }\n return null;\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers. It also removes the attributes and classes.\n * @method destroy\n * @return {void}.\n */\n DropDownBase.prototype.destroy = function () {\n if (document.body.contains(this.list)) {\n EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);\n if (!isNullOrUndefined(this.rippleFun)) {\n this.rippleFun();\n }\n detach(this.list);\n }\n _super.prototype.destroy.call(this);\n };\n ;\n __decorate([\n Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)\n ], DropDownBase.prototype, \"fields\", void 0);\n __decorate([\n Property(false)\n ], DropDownBase.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"itemTemplate\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"groupTemplate\", void 0);\n __decorate([\n Property('No records found')\n ], DropDownBase.prototype, \"noRecordsTemplate\", void 0);\n __decorate([\n Property('Request failed')\n ], DropDownBase.prototype, \"actionFailureTemplate\", void 0);\n __decorate([\n Property('None')\n ], DropDownBase.prototype, \"sortOrder\", void 0);\n __decorate([\n Property(true)\n ], DropDownBase.prototype, \"enabled\", void 0);\n __decorate([\n Property([])\n ], DropDownBase.prototype, \"dataSource\", void 0);\n __decorate([\n Property(null)\n ], DropDownBase.prototype, \"query\", void 0);\n __decorate([\n Property('StartsWith')\n ], DropDownBase.prototype, \"filterType\", void 0);\n __decorate([\n Property(true)\n ], DropDownBase.prototype, \"ignoreCase\", void 0);\n __decorate([\n Property(1000)\n ], DropDownBase.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], DropDownBase.prototype, \"ignoreAccent\", void 0);\n __decorate([\n Property()\n ], DropDownBase.prototype, \"locale\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionBegin\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionComplete\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"actionFailure\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"select\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"dataBound\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DropDownBase.prototype, \"destroyed\", void 0);\n DropDownBase = __decorate([\n NotifyPropertyChanges\n ], DropDownBase);\n return DropDownBase;\n}(Component));\nexport { DropDownBase };\n","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/// \n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Popup = /** @class */ (function (_super) {\n __extends(Popup, _super);\n function Popup(element, options) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Called internally if any of the property value changed.\n * @private\n */\n Popup.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });\n break;\n case 'height':\n setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'zIndex':\n setStyleAttribute(this.element, { 'zIndex': newProp.zIndex });\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'position':\n case 'relateTo':\n this.refreshPosition();\n break;\n case 'offsetX':\n var x = newProp.offsetX - oldProp.offsetX;\n this.element.style.left = (parseInt(this.element.style.left, 10) + (x)).toString() + 'px';\n break;\n case 'offsetY':\n var y = newProp.offsetY - oldProp.offsetY;\n this.element.style.top = (parseInt(this.element.style.top, 10) + (y)).toString() + 'px';\n break;\n case 'content':\n this.setContent();\n break;\n case 'actionOnScroll':\n if (newProp.actionOnScroll !== 'none') {\n this.wireScrollEvents();\n }\n else {\n this.unwireScrollEvents();\n }\n break;\n }\n }\n };\n /**\n * gets the Component module name.\n * @private\n */\n Popup.prototype.getModuleName = function () {\n return 'popup';\n };\n /**\n * To resolve if any collision occurs.\n */\n Popup.prototype.resolveCollision = function () {\n this.checkCollision();\n };\n /**\n * gets the persisted state properties of the Component.\n */\n Popup.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * To destroy the control.\n */\n Popup.prototype.destroy = function () {\n this.element.classList.remove(CLASSNAMES.ROOT, CLASSNAMES.RTL, CLASSNAMES.OPEN, CLASSNAMES.CLOSE);\n this.unwireEvents();\n _super.prototype.destroy.call(this);\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n Popup.prototype.render = function () {\n this.element.classList.add(CLASSNAMES.ROOT);\n var styles = {};\n if (this.zIndex !== 1000) {\n styles.zIndex = this.zIndex;\n }\n if (this.width !== 'auto') {\n styles.width = formatUnit(this.width);\n }\n if (this.height !== 'auto') {\n styles.height = formatUnit(this.height);\n }\n setStyleAttribute(this.element, styles);\n this.fixedParent = false;\n this.setEnableRtl();\n this.setContent();\n };\n Popup.prototype.wireEvents = function () {\n if (Browser.isDevice) {\n EventHandler.add(window, 'orientationchange', this.orientationOnChange, this);\n }\n if (this.actionOnScroll !== 'none') {\n this.wireScrollEvents();\n }\n };\n Popup.prototype.wireScrollEvents = function () {\n if (this.getRelateToElement()) {\n for (var _i = 0, _a = this.getScrollableParent(this.getRelateToElement()); _i < _a.length; _i++) {\n var parent_1 = _a[_i];\n EventHandler.add(parent_1, 'scroll', this.scrollRefresh, this);\n }\n }\n };\n Popup.prototype.unwireEvents = function () {\n if (Browser.isDevice) {\n EventHandler.remove(window, 'orientationchange', this.orientationOnChange);\n }\n if (this.actionOnScroll !== 'none') {\n this.unwireScrollEvents();\n }\n };\n Popup.prototype.unwireScrollEvents = function () {\n if (this.getRelateToElement()) {\n for (var _i = 0, _a = this.getScrollableParent(this.getRelateToElement()); _i < _a.length; _i++) {\n var parent_2 = _a[_i];\n EventHandler.remove(parent_2, 'scroll', this.scrollRefresh);\n }\n }\n };\n Popup.prototype.getRelateToElement = function () {\n var relateToElement = this.relateTo === '' || isNullOrUndefined(this.relateTo) ?\n document.body : this.relateTo;\n this.setProperties({ relateTo: relateToElement }, true);\n return ((typeof this.relateTo) === 'string') ?\n document.querySelector(this.relateTo) : this.relateTo;\n };\n Popup.prototype.scrollRefresh = function (e) {\n if (this.actionOnScroll === 'reposition') {\n if (!(this.element.offsetParent === e.target ||\n (this.element.offsetParent && this.element.offsetParent.tagName === 'BODY' &&\n e.target.parentElement == null))) {\n this.refreshPosition();\n }\n }\n else if (this.actionOnScroll === 'hide') {\n this.hide();\n }\n if (this.actionOnScroll !== 'none') {\n if (this.getRelateToElement()) {\n var targetVisible = this.isElementOnViewport(this.getRelateToElement(), e.target);\n if (!targetVisible && !this.targetInvisibleStatus) {\n this.trigger('targetExitViewport');\n this.targetInvisibleStatus = true;\n }\n else if (targetVisible) {\n this.targetInvisibleStatus = false;\n }\n }\n }\n };\n /**\n * This method is to get the element visibility on viewport when scroll\n * the page. This method will returns true even though 1 px of element\n * part is in visible.\n */\n Popup.prototype.isElementOnViewport = function (relateToElement, scrollElement) {\n var scrollParents = this.getScrollableParent(relateToElement);\n for (var parent_3 = 0; parent_3 < scrollParents.length; parent_3++) {\n if (this.isElementVisible(relateToElement, scrollParents[parent_3])) {\n continue;\n }\n else {\n return false;\n }\n }\n return true;\n };\n Popup.prototype.isElementVisible = function (relateToElement, scrollElement) {\n var rect = this.checkGetBoundingClientRect(relateToElement);\n if (!rect.height || !rect.width) {\n return false;\n }\n if (!isNullOrUndefined(this.checkGetBoundingClientRect(scrollElement))) {\n var parent_4 = scrollElement.getBoundingClientRect();\n return !(rect.bottom < parent_4.top) &&\n (!(rect.bottom > parent_4.bottom) &&\n (!(rect.right > parent_4.right) &&\n !(rect.left < parent_4.left)));\n }\n else {\n var win = window;\n var windowView = {\n top: win.scrollY,\n left: win.scrollX,\n right: win.scrollX + win.outerWidth,\n bottom: win.scrollY + win.outerHeight\n };\n var off = calculatePosition(relateToElement);\n var ele = {\n top: off.top,\n left: off.left,\n right: off.left + rect.width,\n bottom: off.top + rect.height\n };\n var elementView = {\n top: windowView.bottom - ele.top,\n left: windowView.right - ele.left,\n bottom: ele.bottom - windowView.top,\n right: ele.right - windowView.left\n };\n return elementView.top > 0\n && elementView.left > 0\n && elementView.right > 0\n && elementView.bottom > 0;\n }\n };\n /**\n * Initialize the event handler\n * @private\n */\n Popup.prototype.preRender = function () {\n //There is no event handler\n };\n Popup.prototype.setEnableRtl = function () {\n this.reposition();\n this.enableRtl ? this.element.classList.add(CLASSNAMES.RTL) : this.element.classList.remove(CLASSNAMES.RTL);\n };\n Popup.prototype.setContent = function () {\n if (!isNullOrUndefined(this.content)) {\n this.element.innerHTML = '';\n if (typeof (this.content) === 'string') {\n this.element.textContent = this.content;\n }\n else {\n this.element.appendChild(this.content);\n }\n }\n };\n Popup.prototype.orientationOnChange = function () {\n var _this = this;\n setTimeout(function () {\n _this.refreshPosition();\n }, 200);\n };\n /**\n * Based on the `relative` element and `offset` values, `Popup` element position will refreshed.\n */\n Popup.prototype.refreshPosition = function (target, collision) {\n if (!isNullOrUndefined(target)) {\n this.checkFixedParent(target);\n }\n this.reposition();\n if (!collision) {\n this.checkCollision();\n }\n };\n Popup.prototype.reposition = function () {\n var pos;\n var position;\n var relateToElement = this.getRelateToElement();\n if (typeof this.position.X === 'number' && typeof this.position.Y === 'number') {\n pos = { left: this.position.X, top: this.position.Y };\n }\n else if ((typeof this.position.X === 'string' && typeof this.position.Y === 'number') ||\n (typeof this.position.X === 'number' && typeof this.position.Y === 'string')) {\n var display = this.element.style.display;\n var parentDisplay = void 0;\n this.element.style.display = 'block';\n if (this.element.classList.contains('e-dlg-modal')) {\n parentDisplay = this.element.parentElement.style.display;\n this.element.parentElement.style.display = 'block';\n }\n position = this.getAnchorPosition(relateToElement, this.element, this.position, this.offsetX, this.offsetY);\n if (typeof this.position.X === 'string') {\n pos = { left: position.left, top: this.position.Y };\n }\n else {\n pos = { left: this.position.X, top: position.top };\n }\n this.element.style.display = display;\n if (this.element.classList.contains('e-dlg-modal')) {\n this.element.parentElement.style.display = parentDisplay;\n }\n }\n else if (relateToElement) {\n var display = this.element.style.display;\n this.element.style.display = 'block';\n pos = this.getAnchorPosition(relateToElement, this.element, this.position, this.offsetX, this.offsetY);\n this.element.style.display = display;\n }\n else {\n pos = { left: 0, top: 0 };\n }\n if (!isNullOrUndefined(pos)) {\n this.element.style.left = pos.left + 'px';\n this.element.style.top = pos.top + 'px';\n }\n };\n Popup.prototype.checkGetBoundingClientRect = function (ele) {\n var eleRect;\n try {\n eleRect = ele.getBoundingClientRect();\n return eleRect;\n }\n catch (error) {\n return null;\n }\n };\n Popup.prototype.getAnchorPosition = function (anchorEle, ele, position, offsetX, offsetY) {\n var eleRect = this.checkGetBoundingClientRect(ele);\n var anchorRect = this.checkGetBoundingClientRect(anchorEle);\n if (isNullOrUndefined(eleRect) || isNullOrUndefined(anchorRect)) {\n return null;\n }\n var anchor = anchorEle;\n var anchorPos = { left: 0, top: 0 };\n if (ele.offsetParent && ele.offsetParent.tagName === 'BODY' && anchorEle.tagName === 'BODY') {\n anchorPos = calculatePosition(anchorEle);\n }\n else {\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName !== 'BODY')) {\n ele = ele.parentElement;\n }\n anchorPos = calculateRelativeBasedPosition(anchor, ele);\n }\n switch (position.X) {\n default:\n case 'left':\n break;\n case 'center':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.left += (window.innerWidth / 2 - eleRect.width / 2);\n }\n else if (this.targetType === 'container') {\n anchorPos.left += (anchorRect.width / 2 - eleRect.width / 2);\n }\n else {\n anchorPos.left += (anchorRect.width / 2);\n }\n break;\n case 'right':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.left += (window.innerWidth - eleRect.width);\n }\n else if (this.targetType === 'container') {\n anchorPos.left += (anchorRect.width - eleRect.width);\n }\n else {\n anchorPos.left += (anchorRect.width);\n }\n break;\n }\n switch (position.Y) {\n default:\n case 'top':\n break;\n case 'center':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.top += (window.innerHeight / 2 - eleRect.height / 2);\n }\n else if (this.targetType === 'container') {\n anchorPos.top += (anchorRect.height / 2 - eleRect.height / 2);\n }\n else {\n anchorPos.top += (anchorRect.height / 2);\n }\n break;\n case 'bottom':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.top += (window.innerHeight - eleRect.height);\n }\n else if (this.targetType === 'container') {\n anchorPos.top += (anchorRect.height - eleRect.height);\n }\n else {\n anchorPos.top += (anchorRect.height);\n }\n break;\n }\n anchorPos.left += offsetX;\n anchorPos.top += offsetY;\n return anchorPos;\n };\n Popup.prototype.callFlip = function (param) {\n var relateToElement = this.getRelateToElement();\n flip(this.element, relateToElement, this.offsetX, this.offsetY, this.position.X, this.position.Y, this.viewPortElement, param, this.fixedParent);\n };\n Popup.prototype.callFit = function (param) {\n if (isCollide(this.element, this.viewPortElement).length !== 0) {\n if (isNullOrUndefined(this.viewPortElement)) {\n var data = fit(this.element, this.viewPortElement, param);\n if (param.X) {\n this.element.style.left = data.left + 'px';\n }\n if (param.Y) {\n this.element.style.top = data.top + 'px';\n }\n }\n else {\n var elementRect = this.checkGetBoundingClientRect(this.element);\n var viewPortRect = this.checkGetBoundingClientRect(this.viewPortElement);\n if (isNullOrUndefined(elementRect) || isNullOrUndefined(viewPortRect)) {\n return null;\n }\n if (param && param.Y === true) {\n if (viewPortRect.top > elementRect.top) {\n this.element.style.top = '0px';\n }\n else if (viewPortRect.bottom < elementRect.bottom) {\n this.element.style.top = parseInt(this.element.style.top, 10) - (elementRect.bottom - viewPortRect.bottom) + 'px';\n }\n }\n if (param && param.X === true) {\n if (viewPortRect.right < elementRect.right) {\n this.element.style.left = parseInt(this.element.style.left, 10) - (elementRect.right - viewPortRect.right) + 'px';\n }\n else if (viewPortRect.left > elementRect.left) {\n this.element.style.left = parseInt(this.element.style.left, 10) + (viewPortRect.left - elementRect.left) + 'px';\n }\n }\n }\n }\n };\n Popup.prototype.checkCollision = function () {\n var horz = this.collision.X;\n var vert = this.collision.Y;\n if (horz === 'none' && vert === 'none') {\n return;\n }\n if (horz === 'flip' && vert === 'flip') {\n this.callFlip({ X: true, Y: true });\n }\n else if (horz === 'fit' && vert === 'fit') {\n this.callFit({ X: true, Y: true });\n }\n else {\n if (horz === 'flip') {\n this.callFlip({ X: true, Y: false });\n }\n else if (vert === 'flip') {\n this.callFlip({ Y: true, X: false });\n }\n if (horz === 'fit') {\n this.callFit({ X: true, Y: false });\n }\n else if (vert === 'fit') {\n this.callFit({ X: false, Y: true });\n }\n }\n };\n /**\n * Shows the popup element from screen.\n * @param { AnimationModel | Function } collisionOrAnimationOptions? - To pass animation options or collision function.\n * @param { Function } collision? - To pass the collision function.\n * @param { HTMLElement } relativeElement? - To calculate the zIndex value dynamically.\n */\n Popup.prototype.show = function (animationOptions, relativeElement) {\n var _this = this;\n this.wireEvents();\n if (this.zIndex === 1000 || !isNullOrUndefined(relativeElement)) {\n var zIndexElement = (isNullOrUndefined(relativeElement)) ? this.element : relativeElement;\n this.zIndex = getZindexPartial(zIndexElement);\n setStyleAttribute(this.element, { 'zIndex': this.zIndex });\n }\n animationOptions = (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?\n animationOptions : this.showAnimation;\n if (this.collision.X !== 'none' || this.collision.Y !== 'none') {\n removeClass([this.element], CLASSNAMES.CLOSE);\n addClass([this.element], CLASSNAMES.OPEN);\n this.checkCollision();\n removeClass([this.element], CLASSNAMES.OPEN);\n addClass([this.element], CLASSNAMES.CLOSE);\n }\n if (!isNullOrUndefined(animationOptions)) {\n animationOptions.begin = function () {\n if (!_this.isDestroyed) {\n removeClass([_this.element], CLASSNAMES.CLOSE);\n addClass([_this.element], CLASSNAMES.OPEN);\n }\n };\n animationOptions.end = function () {\n if (!_this.isDestroyed) {\n _this.trigger('open');\n }\n };\n new Animation(animationOptions).animate(this.element);\n }\n else {\n removeClass([this.element], CLASSNAMES.CLOSE);\n addClass([this.element], CLASSNAMES.OPEN);\n this.trigger('open');\n }\n };\n /**\n * Hides the popup element from screen.\n * @param { AnimationModel } animationOptions? - To give the animation options.\n */\n Popup.prototype.hide = function (animationOptions) {\n var _this = this;\n animationOptions = (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?\n animationOptions : this.hideAnimation;\n if (!isNullOrUndefined(animationOptions)) {\n animationOptions.end = function () {\n if (!_this.isDestroyed) {\n removeClass([_this.element], CLASSNAMES.OPEN);\n addClass([_this.element], CLASSNAMES.CLOSE);\n _this.trigger('close');\n }\n };\n new Animation(animationOptions).animate(this.element);\n }\n else {\n removeClass([this.element], CLASSNAMES.OPEN);\n addClass([this.element], CLASSNAMES.CLOSE);\n this.trigger('close');\n }\n this.unwireEvents();\n };\n /**\n * Gets scrollable parent elements for the given element.\n * @param { HTMLElement } element - Specify the element to get the scrollable parents of it.\n */\n Popup.prototype.getScrollableParent = function (element) {\n this.checkFixedParent(element);\n return getScrollableParent(element, this.fixedParent);\n };\n Popup.prototype.checkFixedParent = function (element) {\n var parent = element.parentElement;\n while (parent && parent.tagName !== 'HTML') {\n var parentStyle = getComputedStyle(parent);\n if (parentStyle.position === 'fixed' && this.element.offsetParent && this.element.offsetParent.tagName === 'BODY') {\n this.element.style.position = 'fixed';\n this.fixedParent = true;\n }\n parent = parent.parentElement;\n if (isNullOrUndefined(this.element.offsetParent) && parentStyle.position === 'fixed'\n && this.element.style.position === 'fixed') {\n this.fixedParent = true;\n }\n }\n };\n __decorate([\n Property('auto')\n ], Popup.prototype, \"height\", void 0);\n __decorate([\n Property('auto')\n ], Popup.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"content\", void 0);\n __decorate([\n Property('container')\n ], Popup.prototype, \"targetType\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"viewPortElement\", void 0);\n __decorate([\n Property({ X: 'none', Y: 'none' })\n ], Popup.prototype, \"collision\", void 0);\n __decorate([\n Property('')\n ], Popup.prototype, \"relateTo\", void 0);\n __decorate([\n Complex({}, PositionData)\n ], Popup.prototype, \"position\", void 0);\n __decorate([\n Property(0)\n ], Popup.prototype, \"offsetX\", void 0);\n __decorate([\n Property(0)\n ], Popup.prototype, \"offsetY\", void 0);\n __decorate([\n Property(1000)\n ], Popup.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], Popup.prototype, \"enableRtl\", void 0);\n __decorate([\n Property('reposition')\n ], Popup.prototype, \"actionOnScroll\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"showAnimation\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"hideAnimation\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"targetExitViewport\", void 0);\n Popup = __decorate([\n NotifyPropertyChanges\n ], Popup);\n return Popup;\n}(Component));\nexport { Popup };\n/**\n * Gets scrollable parent elements for the given element.\n * @param { HTMLElement } element - Specify the element to get the scrollable parents of it.\n * @private\n */\nexport function getScrollableParent(element, fixedParent) {\n var eleStyle = getComputedStyle(element);\n var scrollParents = [];\n var overflowRegex = /(auto|scroll)/;\n var parent = element.parentElement;\n while (parent && parent.tagName !== 'HTML') {\n var parentStyle = getComputedStyle(parent);\n if (!(eleStyle.position === 'absolute' && parentStyle.position === 'static')\n && overflowRegex.test(parentStyle.overflow + parentStyle.overflowY + parentStyle.overflowX)) {\n scrollParents.push(parent);\n }\n parent = parent.parentElement;\n }\n if (!fixedParent) {\n scrollParents.push(document);\n }\n return scrollParents;\n}\n/**\n * Gets the maximum z-index of the given element.\n * @param { HTMLElement } element - Specify the element to get the maximum z-index of it.\n * @private\n */\nexport function getZindexPartial(element) {\n // upto body traversal\n var parent = element.parentElement;\n var parentZindex = [];\n while (parent) {\n if (parent.tagName !== 'BODY') {\n var index = document.defaultView.getComputedStyle(parent, null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(parent, null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n parentZindex.push(index);\n }\n parent = parent.parentElement;\n }\n else {\n break;\n }\n }\n //Body direct children element traversal\n var childrenZindex = [];\n for (var i = 0; i < document.body.children.length; i++) {\n if (!element.isEqualNode(document.body.children[i])) {\n var index = document.defaultView.getComputedStyle(document.body.children[i], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(document.body.children[i], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n childrenZindex.push(index);\n }\n }\n }\n childrenZindex.push('999');\n var siblingsZindex = [];\n if (!isNullOrUndefined(element.parentElement) && element.parentElement.tagName !== 'BODY') {\n var childNodes = [].slice.call(element.parentElement.children);\n for (var i = 0; i < childNodes.length; i++) {\n var index = document.defaultView.getComputedStyle(childNodes[i], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(childNodes[i], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n siblingsZindex.push(index);\n }\n }\n }\n var finalValue = parentZindex.concat(childrenZindex, siblingsZindex);\n var currentZindexValue = Math.max.apply(Math, finalValue) + 1;\n // Checking the max-zindex value\n return currentZindexValue > 2147483647 ? 2147483647 : currentZindexValue;\n}\n/**\n * Gets the maximum z-index of the page.\n * @param { HTMLElement } tagName - Specify the tagName to get the maximum z-index of it.\n * @private\n */\nexport function getMaxZindex(tagName) {\n if (tagName === void 0) { tagName = ['*']; }\n var maxZindex = [];\n for (var i = 0; i < tagName.length; i++) {\n var elements = document.getElementsByTagName(tagName[i]);\n for (var i_1 = 0; i_1 < elements.length; i_1++) {\n var index = document.defaultView.getComputedStyle(elements[i_1], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(elements[i_1], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n maxZindex.push(index);\n }\n }\n }\n var currentZindexValue = Math.max.apply(Math, maxZindex) + 1;\n return currentZindexValue > 2147483647 ? 2147483647 : currentZindexValue;\n}\n","import { detach, getUniqueID, rippleEffect, setValue, attributes } from '@syncfusion/ej2-base';\nimport { getValue, addClass, deleteObject } from '@syncfusion/ej2-base';\n/**\n * Initialize wrapper element for angular.\n * @private\n */\nexport function wrapperInitialize(createElement, tag, type, element, WRAPPER, role) {\n var input = element;\n if (element.tagName === tag) {\n var ejInstance = getValue('ej2_instances', element);\n input = createElement('input', { attrs: { 'type': type } });\n var props = ['change', 'cssClass', 'label', 'labelPosition', 'id'];\n for (var index = 0, len = element.attributes.length; index < len; index++) {\n if (props.indexOf(element.attributes[index].nodeName) === -1) {\n input.setAttribute(element.attributes[index].nodeName, element.attributes[index].nodeValue);\n }\n }\n attributes(element, { 'class': WRAPPER, 'role': role, 'aria-checked': 'false' });\n element.appendChild(input);\n setValue('ej2_instances', ejInstance, input);\n deleteObject(element, 'ej2_instances');\n }\n return input;\n}\nexport function getTextNode(element) {\n var node;\n var childnode = element.childNodes;\n for (var i = 0; i < childnode.length; i++) {\n node = childnode[i];\n if (node.nodeType === 3) {\n return node;\n }\n }\n return null;\n}\n/**\n * Destroy the button components.\n * @private\n */\nexport function destroy(ejInst, wrapper, tagName) {\n if (tagName === 'INPUT') {\n wrapper.parentNode.insertBefore(ejInst.element, wrapper);\n detach(wrapper);\n ejInst.element.checked = false;\n ['name', 'value', 'disabled'].forEach(function (key) {\n ejInst.element.removeAttribute(key);\n });\n }\n else {\n ['role', 'aria-checked', 'class'].forEach(function (key) {\n wrapper.removeAttribute(key);\n });\n wrapper.innerHTML = '';\n }\n}\nexport function preRender(proxy, control, wrapper, element, moduleName) {\n element = wrapperInitialize(proxy.createElement, control, 'checkbox', element, wrapper, moduleName);\n proxy.element = element;\n if (proxy.element.getAttribute('type') !== 'checkbox') {\n proxy.element.setAttribute('type', 'checkbox');\n }\n if (!proxy.element.id) {\n proxy.element.id = getUniqueID('e-' + moduleName);\n }\n}\n/**\n * Creates CheckBox component UI with theming and ripple support.\n * @private\n */\nexport function createCheckBox(createElement, enableRipple, options) {\n if (enableRipple === void 0) { enableRipple = false; }\n if (options === void 0) { options = {}; }\n var wrapper = createElement('div', { className: 'e-checkbox-wrapper e-css' });\n if (options.cssClass) {\n addClass([wrapper], options.cssClass.split(' '));\n }\n if (options.enableRtl) {\n wrapper.classList.add('e-rtl');\n }\n if (enableRipple) {\n var rippleSpan = createElement('span', { className: 'e-ripple-container' });\n rippleEffect(rippleSpan, { isCenterRipple: true, duration: 400 });\n wrapper.appendChild(rippleSpan);\n }\n var frameSpan = createElement('span', { className: 'e-frame e-icons' });\n if (options.checked) {\n frameSpan.classList.add('e-check');\n }\n wrapper.appendChild(frameSpan);\n if (options.label) {\n var labelSpan = createElement('span', { className: 'e-label', innerHTML: options.label });\n wrapper.appendChild(labelSpan);\n }\n return wrapper;\n}\nexport function rippleMouseHandler(e, rippleSpan) {\n if (rippleSpan) {\n var event_1 = document.createEvent('MouseEvents');\n event_1.initEvent(e.type, false, true);\n rippleSpan.dispatchEvent(event_1);\n }\n}\n/**\n * Append hidden input to given element\n * @private\n */\nexport function setHiddenInput(proxy, wrap) {\n if (proxy.element.getAttribute('ejs-for')) {\n wrap.appendChild(proxy.createElement('input', {\n attrs: { 'name': proxy.name || proxy.element.name, 'value': 'false', 'type': 'hidden' }\n }));\n }\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, NotifyPropertyChanges, Component, isBlazor, isRippleEnabled } from '@syncfusion/ej2-base';\nimport { addClass, Event, detach, removeClass } from '@syncfusion/ej2-base';\nimport { rippleEffect, EventHandler, Observer, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { getTextNode } from '../common/common';\nexport var buttonObserver = new Observer();\nvar cssClassName = {\n RTL: 'e-rtl',\n BUTTON: 'e-btn',\n PRIMARY: 'e-primary',\n ICONBTN: 'e-icon-btn'\n};\n/**\n * The Button is a graphical user interface element that triggers an event on its click action. It can contain a text, an image, or both.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Button = /** @class */ (function (_super) {\n __extends(Button, _super);\n /**\n * Constructor for creating the widget\n * @param {ButtonModel} options?\n * @param {string|HTMLButtonElement} element?\n */\n function Button(options, element) {\n return _super.call(this, options, element) || this;\n }\n Button.prototype.preRender = function () {\n // pre render code snippets\n };\n /**\n * Initialize the control rendering\n * @returns void\n * @private\n */\n Button.prototype.render = function () {\n this.initialize();\n this.removeRippleEffect = rippleEffect(this.element, { selector: '.' + cssClassName.BUTTON });\n this.renderComplete();\n };\n Button.prototype.initialize = function () {\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n if (this.isPrimary) {\n this.element.classList.add(cssClassName.PRIMARY);\n }\n if (!isBlazor() || (isBlazor() && this.getModuleName() !== 'progress-btn')) {\n if (this.content) {\n var tempContent = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(this.content) : this.content;\n this.element.innerHTML = tempContent;\n }\n this.setIconCss();\n }\n if (this.enableRtl) {\n this.element.classList.add(cssClassName.RTL);\n }\n if (this.disabled) {\n this.controlStatus(this.disabled);\n }\n else {\n this.wireEvents();\n }\n };\n Button.prototype.controlStatus = function (disabled) {\n this.element.disabled = disabled;\n };\n Button.prototype.setIconCss = function () {\n if (this.iconCss) {\n var span = this.createElement('span', { className: 'e-btn-icon ' + this.iconCss });\n if (!this.element.textContent.trim()) {\n this.element.classList.add(cssClassName.ICONBTN);\n }\n else {\n span.classList.add('e-icon-' + this.iconPosition.toLowerCase());\n if (this.iconPosition === 'Top' || this.iconPosition === 'Bottom') {\n this.element.classList.add('e-' + this.iconPosition.toLowerCase() + '-icon-btn');\n }\n }\n var node = this.element.childNodes[0];\n if (node && (this.iconPosition === 'Left' || this.iconPosition === 'Top')) {\n this.element.insertBefore(span, node);\n }\n else {\n this.element.appendChild(span);\n }\n }\n };\n Button.prototype.wireEvents = function () {\n if (this.isToggle) {\n EventHandler.add(this.element, 'click', this.btnClickHandler, this);\n }\n };\n Button.prototype.unWireEvents = function () {\n if (this.isToggle) {\n EventHandler.remove(this.element, 'click', this.btnClickHandler);\n }\n };\n Button.prototype.btnClickHandler = function () {\n if (this.element.classList.contains('e-active')) {\n this.element.classList.remove('e-active');\n }\n else {\n this.element.classList.add('e-active');\n }\n };\n /**\n * Destroys the widget.\n * @returns void\n */\n Button.prototype.destroy = function () {\n var span;\n var classList = [cssClassName.PRIMARY, cssClassName.RTL, cssClassName.ICONBTN, 'e-success', 'e-info', 'e-danger',\n 'e-warning', 'e-flat', 'e-outline', 'e-small', 'e-bigger', 'e-active', 'e-round',\n 'e-top-icon-btn', 'e-bottom-icon-btn'];\n if (this.cssClass) {\n classList = classList.concat(this.cssClass.split(' '));\n }\n _super.prototype.destroy.call(this);\n removeClass([this.element], classList);\n if (!this.element.getAttribute('class')) {\n this.element.removeAttribute('class');\n }\n if (this.disabled) {\n this.element.removeAttribute('disabled');\n }\n if (this.content) {\n this.element.innerHTML = this.element.innerHTML.replace(this.content, '');\n }\n span = this.element.querySelector('span.e-btn-icon');\n if (span) {\n detach(span);\n }\n this.unWireEvents();\n if (isRippleEnabled) {\n this.removeRippleEffect();\n }\n };\n /**\n * Get component name.\n * @returns string\n * @private\n */\n Button.prototype.getModuleName = function () {\n return 'btn';\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @returns string\n * @private\n */\n Button.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Dynamically injects the required modules to the component.\n * @private\n */\n Button.Inject = function () {\n // Inject code snippets\n };\n /**\n * Called internally if any of the property value changed.\n * @param {ButtonModel} newProp\n * @param {ButtonModel} oldProp\n * @returns void\n * @private\n */\n Button.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 'isPrimary':\n if (newProp.isPrimary) {\n this.element.classList.add(cssClassName.PRIMARY);\n }\n else {\n this.element.classList.remove(cssClassName.PRIMARY);\n }\n break;\n case 'disabled':\n this.controlStatus(newProp.disabled);\n break;\n case 'iconCss':\n var span = this.element.querySelector('span.e-btn-icon');\n if (span) {\n if (newProp.iconCss) {\n span.className = 'e-btn-icon ' + newProp.iconCss;\n if (this.element.textContent.trim()) {\n if (this.iconPosition === 'Left') {\n span.classList.add('e-icon-left');\n }\n else {\n span.classList.add('e-icon-right');\n }\n }\n }\n else {\n detach(span);\n }\n }\n else {\n this.setIconCss();\n }\n break;\n case 'iconPosition':\n removeClass([this.element], ['e-top-icon-btn', 'e-bottom-icon-btn']);\n span = this.element.querySelector('span.e-btn-icon');\n if (span) {\n detach(span);\n }\n this.setIconCss();\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([this.element], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.element], newProp.cssClass.split(' '));\n }\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n this.element.classList.add(cssClassName.RTL);\n }\n else {\n this.element.classList.remove(cssClassName.RTL);\n }\n break;\n case 'content':\n var node = getTextNode(this.element);\n if (!node) {\n this.element.classList.remove(cssClassName.ICONBTN);\n }\n if (!isBlazor() || (isBlazor() && !this.isServerRendered && this.getModuleName() !== 'progress-btn')) {\n if (this.enableHtmlSanitizer) {\n newProp.content = SanitizeHtmlHelper.sanitize(newProp.content);\n }\n this.element.innerHTML = newProp.content;\n this.setIconCss();\n }\n break;\n case 'isToggle':\n if (newProp.isToggle) {\n EventHandler.add(this.element, 'click', this.btnClickHandler, this);\n }\n else {\n EventHandler.remove(this.element, 'click', this.btnClickHandler);\n removeClass([this.element], ['e-active']);\n }\n break;\n }\n }\n };\n /**\n * Click the button element\n * its native method\n * @public\n */\n Button.prototype.click = function () {\n this.element.click();\n };\n /**\n * Sets the focus to Button\n * its native method\n * @public\n */\n Button.prototype.focusIn = function () {\n this.element.focus();\n };\n __decorate([\n Property('Left')\n ], Button.prototype, \"iconPosition\", void 0);\n __decorate([\n Property('')\n ], Button.prototype, \"iconCss\", void 0);\n __decorate([\n Property(false)\n ], Button.prototype, \"disabled\", void 0);\n __decorate([\n Property(false)\n ], Button.prototype, \"isPrimary\", void 0);\n __decorate([\n Property('')\n ], Button.prototype, \"cssClass\", void 0);\n __decorate([\n Property('')\n ], Button.prototype, \"content\", void 0);\n __decorate([\n Property(false)\n ], Button.prototype, \"isToggle\", void 0);\n __decorate([\n Property()\n ], Button.prototype, \"locale\", void 0);\n __decorate([\n Property(false)\n ], Button.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Event()\n ], Button.prototype, \"created\", void 0);\n Button = __decorate([\n NotifyPropertyChanges\n ], Button);\n return Button;\n}(Component));\nexport { Button };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Touch, Component, EventHandler, selectAll, getUniqueID } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, Property, Browser, detach } from '@syncfusion/ej2-base';\nimport { classList, isNullOrUndefined } from '@syncfusion/ej2-base';\nvar CLS_ROOT = 'e-hscroll';\nvar CLS_RTL = 'e-rtl';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_HSCROLLBAR = 'e-hscroll-bar';\nvar CLS_HSCROLLCON = 'e-hscroll-content';\nvar CLS_NAVARROW = 'e-nav-arrow';\nvar CLS_NAVRIGHTARROW = 'e-nav-right-arrow';\nvar CLS_NAVLEFTARROW = 'e-nav-left-arrow';\nvar CLS_HSCROLLNAV = 'e-scroll-nav';\nvar CLS_HSCROLLNAVRIGHT = 'e-scroll-right-nav';\nvar CLS_HSCROLLNAVLEFT = 'e-scroll-left-nav';\nvar CLS_DEVICE = 'e-scroll-device';\nvar CLS_OVERLAY = 'e-scroll-overlay';\nvar CLS_RIGHTOVERLAY = 'e-scroll-right-overlay';\nvar CLS_LEFTOVERLAY = 'e-scroll-left-overlay';\nvar OVERLAY_MAXWID = 40;\n/**\n * HScroll module is introduces horizontal scroller when content exceeds the current viewing area.\n * It can be useful for the components like Toolbar, Tab which needs horizontal scrolling alone.\n * Hidden content can be view by touch moving or icon click.\n * ```html\n * Popup Content
\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 this.setScrollState();\n };\n HScroll.prototype.setScrollState = function () {\n if (isNullOrUndefined(this.scrollStep) || this.scrollStep < 0) {\n this.scrollStep = this.scrollEle.offsetWidth;\n this.customStep = false;\n }\n else {\n this.customStep = true;\n }\n };\n HScroll.prototype.initialize = function () {\n var scrollEle = this.createElement('div', { className: CLS_HSCROLLCON });\n var scrollDiv = this.createElement('div', { className: CLS_HSCROLLBAR });\n scrollDiv.setAttribute('tabindex', '-1');\n var ele = this.element;\n var innerEle = [].slice.call(ele.children);\n for (var _i = 0, innerEle_1 = innerEle; _i < innerEle_1.length; _i++) {\n var ele_1 = innerEle_1[_i];\n scrollEle.appendChild(ele_1);\n }\n scrollDiv.appendChild(scrollEle);\n ele.appendChild(scrollDiv);\n scrollDiv.style.overflowX = 'hidden';\n this.scrollEle = scrollDiv;\n this.scrollItems = scrollEle;\n };\n HScroll.prototype.getPersistData = function () {\n var keyEntity = ['scrollStep'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Returns the current module name.\n * @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 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.5;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n HScroll.prototype.scrollUpdating = function (scrollVal, action) {\n if (action === 'add') {\n this.scrollEle.scrollLeft += scrollVal;\n }\n else {\n this.scrollEle.scrollLeft -= scrollVal;\n }\n };\n HScroll.prototype.frameScrollRequest = function (scrollVal, action, isContinuous) {\n var _this = this;\n var step = 10;\n if (isContinuous) {\n this.scrollUpdating(scrollVal, action);\n return;\n }\n if (!this.customStep) {\n [].slice.call(selectAll('.' + CLS_OVERLAY, this.element)).forEach(function (el) {\n scrollVal -= el.offsetWidth;\n });\n }\n var animate = function () {\n var scrollValue;\n var scrollStep;\n if (_this.contains(_this.element, CLS_RTL) && _this.browserCheck) {\n scrollValue = -scrollVal;\n scrollStep = -step;\n }\n else {\n scrollValue = scrollVal;\n scrollStep = step;\n }\n if (scrollValue < step) {\n window.cancelAnimationFrame(scrollStep);\n }\n else {\n _this.scrollUpdating(scrollStep, action);\n scrollVal -= scrollStep;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n HScroll.prototype.touchHandler = function (e) {\n var ele = this.scrollEle;\n var distance;\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 this.setScrollState();\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.element.classList.add(CLS_RTL) : this.element.classList.remove(CLS_RTL);\n break;\n }\n }\n };\n __decorate([\n Property(null)\n ], HScroll.prototype, \"scrollStep\", void 0);\n HScroll = __decorate([\n NotifyPropertyChanges\n ], HScroll);\n return HScroll;\n}(Component));\nexport { HScroll };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Touch, Component, EventHandler, selectAll, getUniqueID, removeClass } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, Property, Browser, detach, createElement as buildTag } from '@syncfusion/ej2-base';\nimport { classList, isNullOrUndefined } from '@syncfusion/ej2-base';\nvar CLS_ROOT = 'e-vscroll';\nvar CLS_RTL = 'e-rtl';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_VSCROLLBAR = 'e-vscroll-bar';\nvar CLS_VSCROLLCON = 'e-vscroll-content';\nvar CLS_NAVARROW = 'e-nav-arrow';\nvar CLS_NAVUPARROW = 'e-nav-up-arrow';\nvar CLS_NAVDOWNARROW = 'e-nav-down-arrow';\nvar CLS_VSCROLLNAV = 'e-scroll-nav';\nvar CLS_VSCROLLNAVUP = 'e-scroll-up-nav';\nvar CLS_VSCROLLNAVDOWN = 'e-scroll-down-nav';\nvar CLS_DEVICE = 'e-scroll-device';\nvar CLS_OVERLAY = 'e-scroll-overlay';\nvar CLS_UPOVERLAY = 'e-scroll-up-overlay';\nvar CLS_DOWNOVERLAY = 'e-scroll-down-overlay';\nvar OVERLAY_MAXWID = 40;\n/**\n * VScroll module is introduces vertical scroller when content exceeds the current viewing area.\n * It can be useful for the components like Toolbar, Tab which needs vertical scrolling alone.\n * Hidden content can be view by touch moving or icon click.\n * ```html\n *
\n * \n * ```\n */\nvar VScroll = /** @class */ (function (_super) {\n __extends(VScroll, _super);\n /**\n * Initializes a new instance of the VScroll class.\n * @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 this.setScrollState();\n EventHandler.add(this.element, 'wheel', this.wheelEventHandler, this);\n };\n VScroll.prototype.setScrollState = function () {\n if (isNullOrUndefined(this.scrollStep) || this.scrollStep < 0) {\n this.scrollStep = this.scrollEle.offsetHeight;\n this.customStep = false;\n }\n else {\n this.customStep = true;\n }\n };\n VScroll.prototype.initialize = function () {\n var scrollCnt = buildTag('div', { className: CLS_VSCROLLCON });\n var scrollBar = buildTag('div', { className: CLS_VSCROLLBAR });\n scrollBar.setAttribute('tabindex', '-1');\n var ele = this.element;\n var innerEle = [].slice.call(ele.children);\n for (var _i = 0, innerEle_1 = innerEle; _i < innerEle_1.length; _i++) {\n var ele_1 = innerEle_1[_i];\n scrollCnt.appendChild(ele_1);\n }\n scrollBar.appendChild(scrollCnt);\n ele.appendChild(scrollBar);\n scrollBar.style.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 this.setScrollState();\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.element.classList.add(CLS_RTL) : this.element.classList.remove(CLS_RTL);\n break;\n }\n }\n };\n __decorate([\n Property(null)\n ], 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, EventHandler, Property, Event } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { selectAll, setStyleAttribute as setStyle } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined as isNOU, getUniqueID, formatUnit, Collection, compile as templateCompiler } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty, Browser, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { calculatePosition } from '@syncfusion/ej2-popups';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { HScroll } from '../common/h-scroll';\nimport { VScroll } from '../common/v-scroll';\nvar CLS_VERTICAL = 'e-vertical';\nvar CLS_ITEMS = 'e-toolbar-items';\nvar CLS_ITEM = 'e-toolbar-item';\nvar CLS_RTL = 'e-rtl';\nvar CLS_SEPARATOR = 'e-separator';\nvar CLS_POPUPICON = 'e-popup-up-icon';\nvar CLS_POPUPDOWN = 'e-popup-down-icon';\nvar CLS_POPUPOPEN = 'e-popup-open';\nvar CLS_TEMPLATE = 'e-template';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_POPUPTEXT = 'e-toolbar-text';\nvar CLS_TBARTEXT = 'e-popup-text';\nvar CLS_TBAROVERFLOW = 'e-overflow-show';\nvar CLS_POPOVERFLOW = 'e-overflow-hide';\nvar CLS_TBARBTN = 'e-tbar-btn';\nvar CLS_TBARNAV = 'e-hor-nav';\nvar CLS_TBARSCRLNAV = 'e-scroll-nav';\nvar CLS_TBARRIGHT = 'e-toolbar-right';\nvar CLS_TBARLEFT = 'e-toolbar-left';\nvar CLS_TBARCENTER = 'e-toolbar-center';\nvar CLS_TBARPOS = 'e-tbar-pos';\nvar CLS_HSCROLLCNT = 'e-hscroll-content';\nvar CLS_VSCROLLCNT = 'e-vscroll-content';\nvar CLS_HSCROLLBAR = 'e-hscroll-bar';\nvar CLS_POPUPNAV = 'e-hor-nav';\nvar CLS_POPUPCLASS = 'e-toolbar-pop';\nvar CLS_POPUP = 'e-toolbar-popup';\nvar CLS_TBARBTNTEXT = 'e-tbar-btn-text';\nvar CLS_TBARNAVACT = 'e-nav-active';\nvar CLS_TBARIGNORE = 'e-ignore';\nvar CLS_POPPRI = 'e-popup-alone';\nvar CLS_HIDDEN = 'e-hidden';\nvar CLS_MULTIROW = 'e-toolbar-multirow';\nvar CLS_MULTIROWPOS = 'e-multirow-pos';\nvar CLS_MULTIROW_SEPARATOR = 'e-multirow-separator';\nvar CLS_EXTENDABLE_SEPARATOR = 'e-extended-separator';\nvar CLS_EXTEANDABLE_TOOLBAR = 'e-extended-toolbar';\nvar CLS_EXTENDABLECLASS = 'e-toolbar-extended';\nvar CLS_EXTENDPOPUP = 'e-expended-nav';\nvar CLS_EXTENDEDPOPOPEN = 'e-tbar-extended';\n/**\n * An item object that is used to configure Toolbar commands.\n */\nvar Item = /** @class */ (function (_super) {\n __extends(Item, _super);\n function Item() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Item.prototype, \"id\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"text\", void 0);\n __decorate([\n Property('auto')\n ], Item.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"showAlwaysInPopup\", void 0);\n __decorate([\n Property(false)\n ], Item.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"prefixIcon\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"suffixIcon\", void 0);\n __decorate([\n Property(true)\n ], Item.prototype, \"visible\", void 0);\n __decorate([\n Property('None')\n ], Item.prototype, \"overflow\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"template\", void 0);\n __decorate([\n Property('Button')\n ], Item.prototype, \"type\", void 0);\n __decorate([\n Property('Both')\n ], Item.prototype, \"showTextOn\", void 0);\n __decorate([\n Property(null)\n ], Item.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property('')\n ], Item.prototype, \"tooltipText\", void 0);\n __decorate([\n Property('Left')\n ], Item.prototype, \"align\", void 0);\n __decorate([\n Event()\n ], Item.prototype, \"click\", void 0);\n return Item;\n}(ChildProperty));\nexport { Item };\n/**\n * The Toolbar control contains a group of commands that are aligned horizontally.\n * ```html\n *
\n * \n * ```\n */\nvar Toolbar = /** @class */ (function (_super) {\n __extends(Toolbar, _super);\n /**\n * Initializes a new instance of the Toolbar class.\n * @param options - Specifies Toolbar model properties as options.\n * @param element - Specifies the element that is rendered as a Toolbar.\n */\n function Toolbar(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.resizeContext = _this.resize.bind(_this);\n /**\n * Contains the keyboard configuration of the Toolbar.\n */\n _this.keyConfigs = {\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n moveUp: 'uparrow',\n moveDown: 'downarrow',\n popupOpen: 'enter',\n popupClose: 'escape',\n tab: 'tab',\n home: 'home',\n end: 'end',\n };\n return _this;\n }\n /**\n * Removes the control from the DOM and also removes all its related events.\n * @returns void.\n */\n Toolbar.prototype.destroy = function () {\n var _this = this;\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.clearTemplate();\n }\n _super.prototype.destroy.call(this);\n this.unwireEvents();\n this.tempId.forEach(function (ele) {\n if (!isNOU(_this.element.querySelector(ele))) {\n document.body.appendChild(_this.element.querySelector(ele)).style.display = 'none';\n }\n });\n while (this.element.lastElementChild) {\n this.element.removeChild(this.element.lastElementChild);\n }\n if (this.trgtEle) {\n this.element.appendChild(this.ctrlTem);\n }\n this.clearProperty();\n this.popObj = null;\n this.tbarAlign = null;\n this.remove(this.element, 'e-toolpop');\n if (this.cssClass) {\n removeClass([this.element], this.cssClass.split(' '));\n }\n this.element.removeAttribute('style');\n ['aria-disabled', 'aria-orientation', 'aria-haspopup', 'role'].forEach(function (attrb) {\n return _this.element.removeAttribute(attrb);\n });\n };\n /**\n * Initialize the event handler\n * @private\n */\n Toolbar.prototype.preRender = function () {\n var eventArgs = { enableCollision: this.enableCollision, scrollStep: this.scrollStep };\n this.trigger('beforeCreate', eventArgs);\n this.enableCollision = eventArgs.enableCollision;\n this.scrollStep = eventArgs.scrollStep;\n this.scrollModule = null;\n this.popObj = null;\n this.tempId = [];\n this.tbarItemsCol = this.items;\n this.isVertical = this.element.classList.contains(CLS_VERTICAL) ? true : false;\n this.isExtendedOpen = false;\n this.popupPriCount = 0;\n if (this.enableRtl) {\n this.add(this.element, CLS_RTL);\n }\n };\n Toolbar.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n window.addEventListener('resize', this.resizeContext);\n if (this.allowKeyboard) {\n this.wireKeyboardEvent();\n }\n };\n Toolbar.prototype.wireKeyboardEvent = function () {\n this.keyModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs\n });\n EventHandler.add(this.element, 'keydown', this.docKeyDown, this);\n this.element.setAttribute('tabIndex', '0');\n };\n Toolbar.prototype.unwireKeyboardEvent = function () {\n if (this.keyModule) {\n EventHandler.remove(this.element, 'keydown', this.docKeyDown);\n this.keyModule.destroy();\n this.keyModule = null;\n }\n };\n Toolbar.prototype.docKeyDown = function (e) {\n if (e.target.tagName === 'INPUT') {\n return;\n }\n var popCheck = !isNOU(this.popObj) && isVisible(this.popObj.element) && this.overflowMode !== 'Extended';\n if (e.keyCode === 9 && e.target.classList.contains('e-hor-nav') === true && popCheck) {\n this.popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n var keyCheck = (e.keyCode === 40 || e.keyCode === 38 || e.keyCode === 35 || e.keyCode === 36);\n if (keyCheck) {\n e.preventDefault();\n }\n };\n Toolbar.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'click', this.clickHandler);\n this.destroyScroll();\n this.unwireKeyboardEvent();\n window.removeEventListener('resize', this.resizeContext);\n EventHandler.remove(document, 'scroll', this.docEvent);\n EventHandler.remove(document, 'click', this.docEvent);\n };\n Toolbar.prototype.clearProperty = function () {\n this.tbarEle = [];\n this.tbarAlgEle = { lefts: [], centers: [], rights: [] };\n };\n Toolbar.prototype.docEvent = function (e) {\n var popEle = closest(e.target, '.e-popup');\n if (this.popObj && isVisible(this.popObj.element) && !popEle && this.overflowMode === 'Popup') {\n this.popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n };\n Toolbar.prototype.destroyScroll = function () {\n if (this.scrollModule) {\n if (this.tbarAlign) {\n this.add(this.scrollModule.element, CLS_TBARPOS);\n }\n this.scrollModule.destroy();\n this.scrollModule = null;\n }\n };\n Toolbar.prototype.destroyItems = function () {\n [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) {\n detach(el);\n });\n var tbarItems = this.element.querySelector('.' + CLS_ITEMS);\n if (this.tbarAlign) {\n [].slice.call(tbarItems.children).forEach(function (el) {\n detach(el);\n });\n this.tbarAlign = false;\n this.remove(tbarItems, CLS_TBARPOS);\n }\n this.clearProperty();\n };\n Toolbar.prototype.destroyMode = function () {\n if (this.scrollModule) {\n this.remove(this.scrollModule.element, CLS_RTL);\n this.destroyScroll();\n }\n this.remove(this.element, CLS_EXTENDEDPOPOPEN);\n this.remove(this.element, CLS_EXTEANDABLE_TOOLBAR);\n var tempEle = this.element.querySelector('.e-toolbar-multirow');\n if (tempEle) {\n this.remove(tempEle, CLS_MULTIROW);\n }\n if (this.popObj) {\n this.popupRefresh(this.popObj.element, true);\n }\n };\n Toolbar.prototype.add = function (ele, val) {\n ele.classList.add(val);\n };\n Toolbar.prototype.remove = function (ele, val) {\n ele.classList.remove(val);\n };\n Toolbar.prototype.elementFocus = function (ele) {\n var fChild = ele.firstElementChild;\n if (fChild) {\n fChild.focus();\n this.activeEleSwitch(ele);\n }\n else {\n ele.focus();\n }\n };\n Toolbar.prototype.clstElement = function (tbrNavChk, trgt) {\n var clst;\n if (tbrNavChk && this.popObj && isVisible(this.popObj.element)) {\n clst = this.popObj.element.querySelector('.' + CLS_ITEM);\n }\n else if (this.element === trgt || tbrNavChk) {\n // tslint:disable-next-line:max-line-length\n clst = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');\n }\n else {\n clst = closest(trgt, '.' + CLS_ITEM);\n }\n return clst;\n };\n Toolbar.prototype.keyHandling = function (clst, e, trgt, navChk, scrollChk) {\n var popObj = this.popObj;\n var rootEle = this.element;\n var popAnimate = { name: 'FadeOut', duration: 100 };\n switch (e.action) {\n case 'moveRight':\n if (this.isVertical) {\n return;\n }\n if (rootEle === trgt) {\n this.elementFocus(clst);\n }\n else if (!navChk) {\n this.eleFocus(clst, 'next');\n }\n break;\n case 'moveLeft':\n if (this.isVertical) {\n return;\n }\n if (!navChk) {\n this.eleFocus(clst, 'previous');\n }\n break;\n case 'home':\n case 'end':\n var ele = void 0;\n var nodes = void 0;\n if (clst) {\n var popupCheck = closest(clst, '.e-popup');\n if (popupCheck) {\n if (isVisible(this.popObj.element)) {\n nodes = [].slice.call(popupCheck.children);\n if (e.action === 'home') {\n ele = nodes[0];\n }\n else {\n ele = nodes[nodes.length - 1];\n }\n }\n }\n else {\n nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM);\n if (e.action === 'home') {\n ele = nodes[0];\n }\n else {\n ele = nodes[nodes.length - 1];\n }\n }\n if (ele) {\n this.elementFocus(ele);\n }\n }\n break;\n case 'moveUp':\n case 'moveDown':\n var value = e.action === 'moveUp' ? 'previous' : 'next';\n if (!this.isVertical) {\n if (popObj && closest(trgt, '.e-popup')) {\n var popEle = popObj.element;\n var popFrstEle = popEle.firstElementChild;\n if ((value === 'previous' && popFrstEle === clst) || (value === 'next' && popEle.lastElementChild === clst)) {\n return;\n }\n else {\n this.eleFocus(clst, value);\n }\n }\n else if (e.action === 'moveDown' && popObj && isVisible(popObj.element)) {\n this.elementFocus(clst);\n }\n }\n else {\n if (e.action === 'moveUp') {\n this.eleFocus(clst, 'previous');\n }\n else {\n this.eleFocus(clst, 'next');\n }\n }\n break;\n case 'tab':\n if (!scrollChk && !navChk) {\n var ele_1 = clst.firstElementChild;\n if (rootEle === trgt) {\n if (this.activeEle) {\n this.activeEle.focus();\n }\n else {\n this.activeEleRemove(ele_1);\n ele_1.focus();\n }\n this.element.removeAttribute('tabindex');\n }\n }\n break;\n case 'popupClose':\n if (popObj && this.overflowMode !== 'Extended') {\n popObj.hide(popAnimate);\n }\n break;\n case 'popupOpen':\n if (!navChk) {\n return;\n }\n if (popObj && !isVisible(popObj.element)) {\n popObj.element.style.top = rootEle.offsetHeight + 'px';\n popObj.show({ name: 'FadeIn', duration: 100 });\n }\n else {\n popObj.hide(popAnimate);\n }\n break;\n }\n };\n Toolbar.prototype.keyActionHandler = function (e) {\n var trgt = e.target;\n if (trgt.tagName === 'INPUT' || trgt.tagName === 'TEXTAREA' || this.element.classList.contains(CLS_DISABLE)) {\n return;\n }\n e.preventDefault();\n var clst;\n var tbrNavChk = trgt.classList.contains(CLS_TBARNAV);\n var tbarScrollChk = trgt.classList.contains(CLS_TBARSCRLNAV);\n clst = this.clstElement(tbrNavChk, trgt);\n if (clst || tbarScrollChk) {\n this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);\n }\n };\n /**\n * Specifies the value to disable/enable the Toolbar component.\n * When set to `true`, the component will be disabled.\n * @param {boolean} value - Based on this Boolean value, Toolbar will be enabled (false) or disabled (true).\n * @returns void.\n */\n Toolbar.prototype.disable = function (value) {\n var rootEle = this.element;\n value ? rootEle.classList.add(CLS_DISABLE) : rootEle.classList.remove(CLS_DISABLE);\n rootEle.setAttribute('tabindex', !value ? '0' : '-1');\n if (this.activeEle) {\n this.activeEle.setAttribute('tabindex', !value ? '0' : '-1');\n }\n if (this.scrollModule) {\n this.scrollModule.disable(value);\n }\n if (this.popObj) {\n if (isVisible(this.popObj.element) && this.overflowMode !== 'Extended') {\n this.popObj.hide();\n }\n rootEle.querySelector('#' + rootEle.id + '_nav').setAttribute('tabindex', !value ? '0' : '-1');\n }\n };\n Toolbar.prototype.eleContains = function (el) {\n // tslint:disable-next-line:max-line-length\n return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el);\n // tslint:enable-next-line:max-line-length\n };\n Toolbar.prototype.eleFocus = function (closest, pos) {\n var sib = Object(closest)[pos + 'ElementSibling'];\n if (sib) {\n var skipEle = this.eleContains(sib);\n if (skipEle) {\n this.eleFocus(sib, pos);\n return;\n }\n this.elementFocus(sib);\n }\n else if (this.tbarAlign) {\n var elem = Object(closest.parentElement)[pos + 'ElementSibling'];\n if (!isNOU(elem) && elem.children.length === 0) {\n elem = Object(elem)[pos + 'ElementSibling'];\n }\n if (!isNOU(elem) && elem.children.length > 0) {\n if (pos === 'next') {\n var el = elem.querySelector('.' + CLS_ITEM);\n if (this.eleContains(el)) {\n this.eleFocus(el, pos);\n }\n else {\n el.firstElementChild.focus();\n this.activeEleSwitch(el);\n }\n }\n else {\n var el = elem.lastElementChild;\n if (this.eleContains(el)) {\n this.eleFocus(el, pos);\n }\n else {\n this.elementFocus(el);\n }\n }\n }\n }\n };\n Toolbar.prototype.clickHandler = function (e) {\n var _this = this;\n var trgt = e.target;\n var clsList = trgt.classList;\n var ele = this.element;\n var isPopupElement = !isNOU(closest(trgt, '.' + CLS_POPUPCLASS));\n var popupNav = closest(trgt, ('.' + CLS_TBARNAV));\n if (!popupNav) {\n popupNav = trgt;\n }\n if (!ele.children[0].classList.contains('e-hscroll') && !ele.children[0].classList.contains('e-vscroll')\n && (clsList.contains(CLS_TBARNAV))) {\n clsList = trgt.querySelector('.e-icons').classList;\n }\n if (clsList.contains(CLS_POPUPICON) || clsList.contains(CLS_POPUPDOWN)) {\n this.popupClickHandler(ele, popupNav, CLS_RTL);\n }\n var itemObj;\n var clst = closest(e.target, '.' + CLS_ITEM);\n if ((isNOU(clst) || clst.classList.contains(CLS_DISABLE)) && !popupNav.classList.contains(CLS_TBARNAV)) {\n return;\n }\n if (clst) {\n var tempItem = this.items[this.tbarEle.indexOf(clst)];\n itemObj = tempItem;\n }\n var eventArgs = { originalEvent: e, item: itemObj };\n if (itemObj && !isNOU(itemObj.click)) {\n this.trigger('items[' + this.tbarEle.indexOf(clst) + '].click', eventArgs);\n }\n if (!eventArgs.cancel) {\n this.trigger('clicked', eventArgs, function (clickedArgs) {\n if (!isNOU(_this.popObj) && isPopupElement && !clickedArgs.cancel && _this.overflowMode === 'Popup' &&\n clickedArgs.item && clickedArgs.item.type !== 'Input') {\n _this.popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n });\n }\n };\n ;\n Toolbar.prototype.popupClickHandler = function (ele, popupNav, CLS_RTL) {\n var popObj = this.popObj;\n if (isVisible(popObj.element)) {\n popupNav.classList.remove(CLS_TBARNAVACT);\n popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n else {\n if (ele.classList.contains(CLS_RTL)) {\n popObj.enableRtl = true;\n popObj.position = { X: 'left', Y: 'top' };\n }\n if (popObj.offsetX === 0 && !ele.classList.contains(CLS_RTL)) {\n popObj.enableRtl = false;\n popObj.position = { X: 'right', Y: 'top' };\n }\n popObj.dataBind();\n popObj.refreshPosition();\n popObj.element.style.top = this.getElementOffsetY() + 'px';\n if (this.overflowMode === 'Extended') {\n popObj.element.style.minHeight = '0px';\n }\n popupNav.classList.add(CLS_TBARNAVACT);\n popObj.show({ name: 'FadeIn', duration: 100 });\n }\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n Toolbar.prototype.render = function () {\n this.initialize();\n this.renderControl();\n this.wireEvents();\n this.renderComplete();\n };\n Toolbar.prototype.initialize = function () {\n var width = formatUnit(this.width);\n var height = formatUnit(this.height);\n if (Browser.info.name !== 'msie' || this.height !== 'auto' || this.overflowMode === 'MultiRow') {\n setStyle(this.element, { 'height': height });\n }\n setStyle(this.element, { 'width': width });\n var ariaAttr = {\n 'role': 'toolbar', 'aria-disabled': 'false', 'aria-haspopup': 'false',\n 'aria-orientation': !this.isVertical ? 'horizontal' : 'vertical',\n };\n attributes(this.element, ariaAttr);\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n };\n Toolbar.prototype.renderControl = function () {\n var ele = this.element;\n this.trgtEle = (ele.children.length > 0) ? ele.querySelector('div') : null;\n this.tbarAlgEle = { lefts: [], centers: [], rights: [] };\n this.renderItems();\n this.renderLayout();\n };\n Toolbar.prototype.renderLayout = function () {\n this.renderOverflowMode();\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n if (this.popObj && this.popObj.element.childElementCount > 1 && this.checkPopupRefresh(this.element, this.popObj.element)) {\n this.popupRefresh(this.popObj.element, false);\n }\n this.separator();\n };\n Toolbar.prototype.itemsAlign = function (items, itemEleDom) {\n var innerItem;\n var innerPos;\n if (!this.tbarEle) {\n this.tbarEle = [];\n }\n for (var i = 0; i < items.length; i++) {\n innerItem = this.renderSubComponent(items[i], i);\n if (this.tbarEle.indexOf(innerItem) === -1) {\n this.tbarEle.push(innerItem);\n }\n if (!this.tbarAlign) {\n this.tbarItemAlign(items[i], itemEleDom, i);\n }\n innerPos = itemEleDom.querySelector('.e-toolbar-' + items[i].align.toLowerCase());\n if (innerPos) {\n if (!(items[i].showAlwaysInPopup && items[i].overflow !== 'Show')) {\n this.tbarAlgEle[(items[i].align + 's').toLowerCase()].push(innerItem);\n }\n innerPos.appendChild(innerItem);\n }\n else {\n itemEleDom.appendChild(innerItem);\n }\n }\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n var portals = 'portals';\n // tslint:disable-next-line:no-any\n this.notify('render-react-toolbar-template', this[portals]);\n this.renderReactTemplates();\n }\n };\n /** @hidden */\n Toolbar.prototype.changeOrientation = function () {\n var ele = this.element;\n if (this.isVertical) {\n ele.classList.remove(CLS_VERTICAL);\n this.isVertical = false;\n if (this.height === 'auto' || this.height === '100%') {\n ele.style.height = this.height;\n }\n ele.setAttribute('aria-orientation', 'horizontal');\n }\n else {\n ele.classList.add(CLS_VERTICAL);\n this.isVertical = true;\n ele.setAttribute('aria-orientation', 'vertical');\n setStyle(this.element, { 'height': formatUnit(this.height), 'width': formatUnit(this.width) });\n }\n this.destroyMode();\n this.refreshOverflow();\n };\n Toolbar.prototype.initScroll = function (element, innerItems) {\n if (!this.scrollModule && this.checkOverflow(element, innerItems[0])) {\n if (this.tbarAlign) {\n this.element.querySelector('.' + CLS_ITEMS + ' .' + CLS_TBARCENTER).removeAttribute('style');\n }\n if (this.isVertical) {\n this.scrollModule = new VScroll({ scrollStep: this.scrollStep, enableRtl: this.enableRtl }, innerItems[0]);\n }\n else {\n this.scrollModule = new HScroll({ scrollStep: this.scrollStep, enableRtl: this.enableRtl }, innerItems[0]);\n }\n this.remove(this.scrollModule.element, CLS_TBARPOS);\n setStyle(this.element, { overflow: 'hidden' });\n }\n };\n Toolbar.prototype.itemWidthCal = function (items) {\n var _this = this;\n var width = 0;\n var style;\n [].slice.call(selectAll('.' + CLS_ITEM, items)).forEach(function (el) {\n if (isVisible(el)) {\n style = window.getComputedStyle(el);\n width += _this.isVertical ? el.offsetHeight : el.offsetWidth;\n width += parseFloat(_this.isVertical ? style.marginTop : style.marginRight);\n width += parseFloat(_this.isVertical ? style.marginBottom : style.marginLeft);\n }\n });\n return width;\n };\n Toolbar.prototype.getScrollCntEle = function (innerItem) {\n var trgClass = (this.isVertical) ? '.e-vscroll-content' : '.e-hscroll-content';\n return innerItem.querySelector(trgClass);\n };\n Toolbar.prototype.checkOverflow = function (element, innerItem) {\n if (isNOU(element) || isNOU(innerItem) || !isVisible(element)) {\n return false;\n }\n var eleWidth = this.isVertical ? element.offsetHeight : element.offsetWidth;\n var itemWidth = this.isVertical ? innerItem.offsetHeight : innerItem.offsetWidth;\n if (this.tbarAlign || this.scrollModule || (eleWidth === itemWidth)) {\n itemWidth = this.itemWidthCal(this.scrollModule ? this.getScrollCntEle(innerItem) : innerItem);\n }\n var popNav = element.querySelector('.' + CLS_TBARNAV);\n var scrollNav = element.querySelector('.' + CLS_TBARSCRLNAV);\n var navEleWidth = 0;\n if (popNav) {\n navEleWidth = this.isVertical ? popNav.offsetHeight : popNav.offsetWidth;\n }\n else if (scrollNav) {\n navEleWidth = this.isVertical ? (scrollNav.offsetHeight * (2)) : (scrollNav.offsetWidth * 2);\n }\n if (itemWidth > eleWidth - navEleWidth) {\n return true;\n }\n else {\n return false;\n }\n };\n /**\n * Refresh the whole Toolbar component without re-rendering.\n * - It is used to manually refresh the Toolbar overflow modes such as scrollable, popup, multi row, and extended.\n * - It will refresh the Toolbar component after loading items dynamically.\n * @returns void.\n */\n Toolbar.prototype.refreshOverflow = function () {\n this.resize();\n };\n Toolbar.prototype.toolbarAlign = function (innerItems) {\n if (this.tbarAlign) {\n this.add(innerItems, CLS_TBARPOS);\n this.itemPositioning();\n }\n };\n Toolbar.prototype.renderOverflowMode = function () {\n var ele = this.element;\n var innerItems = ele.querySelector('.' + CLS_ITEMS);\n var priorityCheck = this.popupPriCount > 0;\n if (ele && ele.children.length > 0) {\n this.offsetWid = ele.offsetWidth;\n this.remove(this.element, 'e-toolpop');\n if (Browser.info.name === 'msie' && this.height === 'auto') {\n ele.style.height = '';\n }\n switch (this.overflowMode) {\n case 'Scrollable':\n if (isNOU(this.scrollModule)) {\n this.initScroll(ele, [].slice.call(ele.getElementsByClassName(CLS_ITEMS)));\n }\n break;\n case 'Popup':\n this.add(this.element, 'e-toolpop');\n if (this.tbarAlign) {\n this.removePositioning();\n }\n if (this.checkOverflow(ele, innerItems) || priorityCheck) {\n this.setOverflowAttributes(ele);\n }\n this.toolbarAlign(innerItems);\n break;\n case 'MultiRow':\n this.add(innerItems, CLS_MULTIROW);\n if (this.checkOverflow(ele, innerItems) && this.tbarAlign) {\n this.removePositioning();\n this.add(innerItems, CLS_MULTIROWPOS);\n }\n if (ele.style.overflow === 'hidden') {\n ele.style.overflow = '';\n }\n if (Browser.info.name === 'msie' || ele.style.height !== 'auto') {\n ele.style.height = 'auto';\n }\n break;\n case 'Extended':\n this.add(this.element, CLS_EXTEANDABLE_TOOLBAR);\n if (this.checkOverflow(ele, innerItems) || priorityCheck) {\n if (this.tbarAlign) {\n this.removePositioning();\n }\n this.setOverflowAttributes(ele);\n }\n this.toolbarAlign(innerItems);\n }\n }\n };\n Toolbar.prototype.setOverflowAttributes = function (ele) {\n this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));\n this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');\n this.element.querySelector('.' + CLS_TBARNAV).setAttribute('role', 'list');\n };\n Toolbar.prototype.separator = function () {\n var element = this.element;\n var eleItem = [].slice.call(element.querySelectorAll('.' + CLS_SEPARATOR));\n var eleInlineItem;\n var multiVar = element.querySelector('.' + CLS_MULTIROW_SEPARATOR);\n var extendVar = element.querySelector('.' + CLS_EXTENDABLE_SEPARATOR);\n eleInlineItem = this.overflowMode === 'MultiRow' ? multiVar : extendVar;\n if (eleInlineItem !== null) {\n if (this.overflowMode === 'MultiRow') {\n eleInlineItem.classList.remove(CLS_MULTIROW_SEPARATOR);\n }\n else if (this.overflowMode === 'Extended') {\n eleInlineItem.classList.remove(CLS_EXTENDABLE_SEPARATOR);\n }\n }\n for (var i = 0; i <= eleItem.length - 1; i++) {\n if (eleItem[i].offsetLeft < 30 && eleItem[i].offsetLeft !== 0) {\n if (this.overflowMode === 'MultiRow') {\n eleItem[i].classList.add(CLS_MULTIROW_SEPARATOR);\n }\n else if (this.overflowMode === 'Extended') {\n eleItem[i].classList.add(CLS_EXTENDABLE_SEPARATOR);\n }\n }\n }\n };\n Toolbar.prototype.createPopupEle = function (ele, innerEle) {\n var innerNav = ele.querySelector('.' + CLS_TBARNAV);\n var vertical = this.isVertical;\n if (!innerNav) {\n this.createPopupIcon(ele);\n }\n innerNav = ele.querySelector('.' + CLS_TBARNAV);\n var innerNavDom = (vertical ? innerNav.offsetHeight : innerNav.offsetWidth);\n var eleWidth = ((vertical ? ele.offsetHeight : ele.offsetWidth) - (innerNavDom));\n this.element.classList.remove('e-rtl');\n setStyle(this.element, { direction: 'initial' });\n this.checkPriority(ele, innerEle, eleWidth, true);\n if (this.enableRtl) {\n this.element.classList.add('e-rtl');\n }\n this.element.style.removeProperty('direction');\n this.createPopup();\n };\n Toolbar.prototype.pushingPoppedEle = function (tbarObj, popupPri, ele, eleHeight, sepHeight) {\n var element = tbarObj.element;\n var nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);\n var nodeIndex = 0;\n var poppedEle = [].slice.call(selectAll('.' + CLS_POPUP, element.querySelector('.' + CLS_ITEMS)));\n var nodePri = 0;\n poppedEle.forEach(function (el, index) {\n nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);\n if (el.classList.contains(CLS_TBAROVERFLOW) && nodes.length > 0) {\n if (tbarObj.tbResize && nodes.length > index) {\n ele.insertBefore(el, nodes[index]);\n ++nodePri;\n }\n else {\n ele.insertBefore(el, ele.children[nodes.length]);\n ++nodePri;\n }\n }\n else if (el.classList.contains(CLS_TBAROVERFLOW)) {\n ele.insertBefore(el, ele.firstChild);\n ++nodePri;\n }\n else if (tbarObj.tbResize && el.classList.contains(CLS_POPOVERFLOW) && ele.children.length > 0 && nodes.length === 0) {\n ele.insertBefore(el, ele.firstChild);\n ++nodePri;\n }\n else if (el.classList.contains(CLS_POPOVERFLOW)) {\n popupPri.push(el);\n }\n else if (tbarObj.tbResize) {\n ele.insertBefore(el, ele.childNodes[nodeIndex + nodePri]);\n ++nodeIndex;\n }\n else {\n ele.appendChild(el);\n }\n if (el.classList.contains(CLS_SEPARATOR)) {\n setStyle(el, { display: '', height: sepHeight + 'px' });\n }\n else {\n setStyle(el, { display: '', height: eleHeight + 'px' });\n }\n });\n popupPri.forEach(function (el) {\n ele.appendChild(el);\n });\n var tbarEle = selectAll('.' + CLS_ITEM, element.querySelector('.' + CLS_ITEMS));\n for (var i = tbarEle.length - 1; i >= 0; i--) {\n var tbarElement = tbarEle[i];\n if (tbarElement.classList.contains(CLS_SEPARATOR) && this.overflowMode !== 'Extended') {\n setStyle(tbarElement, { display: 'none' });\n }\n else {\n break;\n }\n }\n };\n Toolbar.prototype.createPopup = function () {\n var element = this.element;\n var eleHeight;\n var eleItem;\n var sepHeight;\n var sepItem;\n if (this.overflowMode === 'Extended') {\n sepItem = element.querySelector('.' + CLS_SEPARATOR + ':not(.' + CLS_POPUP + ')');\n sepHeight = (element.style.height === 'auto' || element.style.height === '') ? null : sepItem.offsetHeight;\n }\n eleItem = element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_POPUP + ')');\n eleHeight = (element.style.height === 'auto' || element.style.height === '') ? null : (eleItem && eleItem.offsetHeight);\n var ele;\n var popupPri = [];\n if (element.querySelector('#' + element.id + '_popup.' + CLS_POPUPCLASS)) {\n ele = element.querySelector('#' + element.id + '_popup.' + CLS_POPUPCLASS);\n }\n else {\n var extendEle = this.createElement('div', {\n id: element.id + '_popup', className: CLS_POPUPCLASS + ' ' + CLS_EXTENDABLECLASS\n });\n var popupEle = this.createElement('div', { id: element.id + '_popup', className: CLS_POPUPCLASS });\n ele = this.overflowMode === 'Extended' ? extendEle : popupEle;\n }\n this.pushingPoppedEle(this, popupPri, ele, eleHeight, sepHeight);\n this.popupInit(element, ele);\n };\n Toolbar.prototype.getElementOffsetY = function () {\n return (this.overflowMode === 'Extended' && window.getComputedStyle(this.element).getPropertyValue('box-sizing') === 'border-box' ?\n this.element.clientHeight : this.element.offsetHeight);\n };\n Toolbar.prototype.popupInit = function (element, ele) {\n if (!this.popObj) {\n element.appendChild(ele);\n setStyle(this.element, { overflow: '' });\n var eleStyles = window.getComputedStyle(this.element);\n var popup = new Popup(null, {\n relateTo: this.element,\n offsetY: (this.isVertical) ? 0 : this.getElementOffsetY(),\n enableRtl: this.enableRtl,\n open: this.popupOpen.bind(this),\n close: this.popupClose.bind(this),\n collision: { Y: this.enableCollision ? 'flip' : 'none' },\n position: this.enableRtl ? { X: 'left', Y: 'top' } : { X: 'right', Y: 'top' }\n });\n popup.appendTo(ele);\n if (this.overflowMode === 'Extended') {\n popup.width = parseFloat(eleStyles.width) + ((parseFloat(eleStyles.borderRightWidth)) * 2);\n popup.offsetX = 0;\n }\n EventHandler.add(document, 'scroll', this.docEvent.bind(this));\n EventHandler.add(document, 'click ', this.docEvent.bind(this));\n popup.element.style.maxHeight = popup.element.offsetHeight + 'px';\n if (this.isVertical) {\n popup.element.style.visibility = 'hidden';\n }\n if (this.isExtendedOpen) {\n var popupNav = this.element.querySelector('.' + CLS_TBARNAV);\n popupNav.classList.add(CLS_TBARNAVACT);\n classList(popupNav.firstElementChild, [CLS_POPUPICON], [CLS_POPUPDOWN]);\n this.element.querySelector('.' + CLS_EXTENDABLECLASS).classList.add(CLS_POPUPOPEN);\n }\n else {\n popup.hide();\n }\n this.popObj = popup;\n this.element.setAttribute('aria-haspopup', 'true');\n }\n else {\n var popupEle = this.popObj.element;\n setStyle(popupEle, { maxHeight: '', display: 'block' });\n setStyle(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });\n }\n };\n Toolbar.prototype.tbarPopupHandler = function (isOpen) {\n if (this.overflowMode === 'Extended') {\n isOpen ? this.add(this.element, CLS_EXTENDEDPOPOPEN) : this.remove(this.element, CLS_EXTENDEDPOPOPEN);\n }\n };\n Toolbar.prototype.popupOpen = function (e) {\n var popObj = this.popObj;\n if (!this.isVertical) {\n popObj.offsetY = this.getElementOffsetY();\n popObj.dataBind();\n }\n var popupEle = this.popObj.element;\n var toolEle = this.popObj.element.parentElement;\n var popupNav = toolEle.querySelector('.' + CLS_TBARNAV);\n setStyle(popObj.element, { height: 'auto', maxHeight: '' });\n popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';\n if (this.overflowMode === 'Extended') {\n popObj.element.style.minHeight = '';\n }\n var popupElePos = popupEle.offsetTop + popupEle.offsetHeight + calculatePosition(toolEle).top;\n var popIcon = popupNav.firstElementChild;\n popupNav.classList.add(CLS_TBARNAVACT);\n classList(popIcon, [CLS_POPUPICON], [CLS_POPUPDOWN]);\n this.tbarPopupHandler(true);\n var scrollVal = isNOU(window.scrollY) ? 0 : window.scrollY;\n if (!this.isVertical && ((window.innerHeight + scrollVal) < popupElePos) && (this.element.offsetTop < popupEle.offsetHeight)) {\n var overflowHeight = (popupEle.offsetHeight - ((popupElePos - window.innerHeight - scrollVal) + 5));\n popObj.height = overflowHeight + 'px';\n for (var i = 0; i <= popupEle.childElementCount; i++) {\n var ele = popupEle.children[i];\n if (ele.offsetTop + ele.offsetHeight > overflowHeight) {\n overflowHeight = ele.offsetTop;\n break;\n }\n }\n setStyle(popObj.element, { maxHeight: overflowHeight + 'px' });\n }\n else if (this.isVertical) {\n var tbEleData = this.element.getBoundingClientRect();\n setStyle(popObj.element, { maxHeight: (tbEleData.top + this.element.offsetHeight) + 'px', bottom: 0, visibility: '' });\n }\n if (popObj) {\n popObj.refreshPosition();\n }\n };\n Toolbar.prototype.popupClose = function (e) {\n var element = this.element;\n var popupNav = element.querySelector('.' + CLS_TBARNAV);\n var popIcon = popupNav.firstElementChild;\n popupNav.classList.remove(CLS_TBARNAVACT);\n classList(popIcon, [CLS_POPUPDOWN], [CLS_POPUPICON]);\n this.tbarPopupHandler(false);\n };\n Toolbar.prototype.checkPriority = function (ele, inEle, eleWidth, pre) {\n var popPriority = this.popupPriCount > 0;\n var len = inEle.length;\n var eleWid = eleWidth;\n var eleOffset;\n var checkoffset;\n var sepCheck = 0;\n var itemCount = 0;\n var itemPopCount = 0;\n var checkClass = function (ele, val) {\n var rVal = false;\n val.forEach(function (cls) {\n if (ele.classList.contains(cls)) {\n rVal = true;\n }\n });\n return rVal;\n };\n for (var i = len - 1; i >= 0; i--) {\n var mrgn = void 0;\n var compuStyle = window.getComputedStyle(inEle[i]);\n if (this.isVertical) {\n mrgn = parseFloat((compuStyle).marginTop);\n mrgn += parseFloat((compuStyle).marginBottom);\n }\n else {\n mrgn = parseFloat((compuStyle).marginRight);\n mrgn += parseFloat((compuStyle).marginLeft);\n }\n var fstEleCheck = inEle[i] === this.tbarEle[0];\n if (fstEleCheck) {\n this.tbarEleMrgn = mrgn;\n }\n eleOffset = this.isVertical ? inEle[i].offsetHeight : inEle[i].offsetWidth;\n var eleWid_1 = fstEleCheck ? (eleOffset + mrgn) : eleOffset;\n if (checkClass(inEle[i], [CLS_POPPRI]) && popPriority) {\n inEle[i].classList.add(CLS_POPUP);\n if (this.isVertical) {\n setStyle(inEle[i], { display: 'none', minHeight: eleWid_1 + 'px' });\n }\n else {\n setStyle(inEle[i], { display: 'none', minWidth: eleWid_1 + 'px' });\n }\n itemPopCount++;\n }\n if (this.isVertical) {\n checkoffset = (inEle[i].offsetTop + inEle[i].offsetHeight + mrgn) > eleWidth;\n }\n else {\n checkoffset = (inEle[i].offsetLeft + inEle[i].offsetWidth + mrgn) > eleWidth;\n }\n if (checkoffset) {\n if (inEle[i].classList.contains(CLS_SEPARATOR)) {\n if (this.overflowMode === 'Extended') {\n if (itemCount === itemPopCount) {\n var sepEle = inEle[i];\n if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n inEle[i].classList.add(CLS_POPUP);\n itemPopCount++;\n }\n }\n itemCount++;\n }\n else if (this.overflowMode === 'Popup') {\n if (sepCheck > 0 && itemCount === itemPopCount) {\n var sepEle = inEle[i + itemCount + (sepCheck - 1)];\n if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n setStyle(sepEle, { display: 'none' });\n }\n }\n sepCheck++;\n itemCount = 0;\n itemPopCount = 0;\n }\n }\n else {\n itemCount++;\n }\n if (inEle[i].classList.contains(CLS_TBAROVERFLOW) && pre) {\n eleWidth -= ((this.isVertical ? inEle[i].offsetHeight : inEle[i].offsetWidth) + (mrgn));\n }\n else if (!checkClass(inEle[i], [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n inEle[i].classList.add(CLS_POPUP);\n if (this.isVertical) {\n setStyle(inEle[i], { display: 'none', minHeight: eleWid_1 + 'px' });\n }\n else {\n setStyle(inEle[i], { display: 'none', minWidth: eleWid_1 + 'px' });\n }\n itemPopCount++;\n }\n else {\n eleWidth -= ((this.isVertical ? inEle[i].offsetHeight : inEle[i].offsetWidth) + (mrgn));\n }\n }\n }\n if (pre) {\n var popedEle = selectAll('.' + CLS_ITEM + ':not(.' + CLS_POPUP + ')', this.element);\n this.checkPriority(ele, popedEle, eleWid, false);\n }\n };\n Toolbar.prototype.createPopupIcon = function (element) {\n var id = element.id.concat('_nav');\n var className = 'e-' + element.id.concat('_nav ' + CLS_POPUPNAV);\n className = this.overflowMode === 'Extended' ? className + ' ' + CLS_EXTENDPOPUP : className;\n var nav = this.createElement('div', { id: id, className: className });\n if (Browser.info.name === 'msie' || Browser.info.name === 'edge') {\n nav.classList.add('e-ie-align');\n }\n var navItem = this.createElement('div', { className: CLS_POPUPDOWN + ' e-icons' });\n nav.appendChild(navItem);\n nav.setAttribute('tabindex', '0');\n nav.setAttribute('role', 'list');\n element.appendChild(nav);\n };\n Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid, ig) {\n var ignoreCount = ig;\n var popEle = this.popObj.element;\n var query = '.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_TBAROVERFLOW + ')';\n var priEleCnt = selectAll('.' + CLS_POPUP + ':not(.' + CLS_TBAROVERFLOW + ')', popEle).length;\n var checkClass = function (ele, val) {\n return ele.classList.contains(val);\n };\n if (selectAll(query, inEle).length === 0) {\n var eleSep = inEle.children[indx - (indx - sepPri) - 1];\n var ignoreCheck = (!isNOU(eleSep) && checkClass(eleSep, CLS_TBARIGNORE));\n if ((!isNOU(eleSep) && checkClass(eleSep, CLS_SEPARATOR) && !isVisible(eleSep)) || ignoreCheck) {\n var sepDisplay = 'none';\n eleSep.style.display = 'inherit';\n var eleSepWidth = eleSep.offsetWidth + (parseFloat(window.getComputedStyle(eleSep).marginRight) * 2);\n var prevSep = eleSep.previousElementSibling;\n if ((elWid + eleSepWidth) < wid || des) {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - (indx - sepPri)]);\n if (!isNOU(prevSep)) {\n prevSep.style.display = '';\n }\n }\n else {\n if (prevSep.classList.contains(CLS_SEPARATOR)) {\n prevSep.style.display = sepDisplay;\n }\n }\n eleSep.style.display = '';\n }\n else {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - (indx - sepPri)]);\n }\n }\n else {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - priEleCnt]);\n }\n };\n Toolbar.prototype.popupRefresh = function (popupEle, destroy) {\n var _this = this;\n var ele = this.element;\n var isVer = this.isVertical;\n var popNav = ele.querySelector('.' + CLS_TBARNAV);\n var innerEle = ele.querySelector('.' + CLS_ITEMS);\n if (isNOU(popNav)) {\n return;\n }\n innerEle.removeAttribute('style');\n popupEle.style.display = 'block';\n var dimension;\n if (isVer) {\n dimension = ele.offsetHeight - (popNav.offsetHeight + innerEle.offsetHeight);\n }\n else {\n dimension = ele.offsetWidth - (popNav.offsetWidth + innerEle.offsetWidth);\n }\n var popupEleWidth = 0;\n [].slice.call(popupEle.children).forEach(function (el) {\n popupEleWidth += _this.popupEleWidth(el);\n setStyle(el, { 'position': '' });\n });\n if ((dimension + (isVer ? popNav.offsetHeight : popNav.offsetWidth)) > (popupEleWidth) && this.popupPriCount === 0) {\n destroy = true;\n }\n this.popupEleRefresh(dimension, popupEle, destroy);\n popupEle.style.display = '';\n if (popupEle.children.length === 0 && popNav && this.popObj) {\n detach(popNav);\n popNav = null;\n this.popObj.destroy();\n detach(this.popObj.element);\n this.popObj = null;\n ele.setAttribute('aria-haspopup', 'false');\n }\n };\n Toolbar.prototype.ignoreEleFetch = function (index, innerEle) {\n var ignoreEle = [].slice.call(innerEle.querySelectorAll('.' + CLS_TBARIGNORE));\n var ignoreInx = [];\n var count = 0;\n if (ignoreEle.length > 0) {\n ignoreEle.forEach(function (ele) {\n ignoreInx.push([].slice.call(innerEle.children).indexOf(ele));\n });\n }\n else {\n return 0;\n }\n ignoreInx.forEach(function (val) {\n if (val <= index) {\n count++;\n }\n });\n return count;\n };\n Toolbar.prototype.checkPopupRefresh = function (root, popEle) {\n popEle.style.display = 'block';\n var elWid = this.popupEleWidth(popEle.firstElementChild);\n popEle.firstElementChild.style.removeProperty('Position');\n var tbarWidth = root.offsetWidth - root.querySelector('.' + CLS_TBARNAV).offsetWidth;\n var tbarItemsWid = root.querySelector('.' + CLS_ITEMS).offsetWidth;\n popEle.style.removeProperty('display');\n if (tbarWidth > (elWid + tbarItemsWid)) {\n return true;\n }\n return false;\n };\n Toolbar.prototype.popupEleWidth = function (el) {\n el.style.position = 'absolute';\n var elWidth = this.isVertical ? el.offsetHeight : el.offsetWidth;\n var btnText = el.querySelector('.' + CLS_TBARBTNTEXT);\n if (el.classList.contains('e-tbtn-align') || el.classList.contains(CLS_TBARTEXT)) {\n var btn = el.children[0];\n if (!isNOU(btnText) && el.classList.contains(CLS_TBARTEXT)) {\n btnText.style.display = 'none';\n }\n else if (!isNOU(btnText) && el.classList.contains(CLS_POPUPTEXT)) {\n btnText.style.display = 'block';\n }\n btn.style.minWidth = '0%';\n elWidth = parseFloat(!this.isVertical ? el.style.minWidth : el.style.minHeight);\n btn.style.minWidth = '';\n btn.style.minHeight = '';\n if (!isNOU(btnText)) {\n btnText.style.display = '';\n }\n }\n return elWidth;\n };\n Toolbar.prototype.popupEleRefresh = function (width, popupEle, destroy) {\n var popPriority = this.popupPriCount > 0;\n var eleSplice = this.tbarEle;\n var priEleCnt;\n var index;\n var checkOverflow;\n var innerEle = this.element.querySelector('.' + CLS_ITEMS);\n var ignoreCount = 0;\n var _loop_1 = function (el) {\n if (el.classList.contains(CLS_POPPRI) && popPriority && !destroy) {\n return \"continue\";\n }\n var elWidth = this_1.popupEleWidth(el);\n if (el === this_1.tbarEle[0]) {\n elWidth += this_1.tbarEleMrgn;\n }\n el.style.position = '';\n if (elWidth < width || destroy) {\n setStyle(el, { minWidth: '', height: '', minHeight: '' });\n if (!el.classList.contains(CLS_POPOVERFLOW)) {\n el.classList.remove(CLS_POPUP);\n }\n index = this_1.tbarEle.indexOf(el);\n if (this_1.tbarAlign) {\n var pos = this_1.items[index].align;\n index = this_1.tbarAlgEle[(pos + 's').toLowerCase()].indexOf(el);\n eleSplice = this_1.tbarAlgEle[(pos + 's').toLowerCase()];\n innerEle = this_1.element.querySelector('.' + CLS_ITEMS + ' .' + 'e-toolbar-' + pos.toLowerCase());\n }\n var sepBeforePri_1 = 0;\n if (this_1.overflowMode !== 'Extended') {\n eleSplice.slice(0, index).forEach(function (el) {\n if (el.classList.contains(CLS_TBAROVERFLOW) || el.classList.contains(CLS_SEPARATOR)) {\n if (el.classList.contains(CLS_SEPARATOR)) {\n el.style.display = '';\n width -= el.offsetWidth;\n }\n sepBeforePri_1++;\n }\n });\n }\n ignoreCount = this_1.ignoreEleFetch(index, innerEle);\n if (el.classList.contains(CLS_TBAROVERFLOW)) {\n this_1.tbarPriRef(innerEle, index, sepBeforePri_1, el, destroy, elWidth, width, ignoreCount);\n width -= el.offsetWidth;\n }\n else if (index === 0) {\n innerEle.insertBefore(el, innerEle.firstChild);\n width -= el.offsetWidth;\n }\n else {\n priEleCnt = selectAll('.' + CLS_TBAROVERFLOW, this_1.popObj.element).length;\n innerEle.insertBefore(el, innerEle.children[(index + ignoreCount) - priEleCnt]);\n width -= el.offsetWidth;\n }\n el.style.height = '';\n }\n else {\n return \"break\";\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = [].slice.call(popupEle.children); _i < _a.length; _i++) {\n var el = _a[_i];\n var state_1 = _loop_1(el);\n if (state_1 === \"break\")\n break;\n }\n checkOverflow = this.checkOverflow(this.element, this.element.getElementsByClassName(CLS_ITEMS)[0]);\n if (checkOverflow && !destroy) {\n this.renderOverflowMode();\n }\n };\n Toolbar.prototype.removePositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n if (isNOU(item) || !item.classList.contains(CLS_TBARPOS)) {\n return;\n }\n this.remove(item, CLS_TBARPOS);\n var innerItem = [].slice.call(item.childNodes);\n innerItem[1].removeAttribute('style');\n innerItem[2].removeAttribute('style');\n };\n Toolbar.prototype.refreshPositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n this.add(item, CLS_TBARPOS);\n this.itemPositioning();\n };\n Toolbar.prototype.itemPositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n var margin;\n if (isNOU(item) || !item.classList.contains(CLS_TBARPOS)) {\n return;\n }\n var popupNav = this.element.querySelector('.' + CLS_TBARNAV);\n var innerItem;\n if (this.scrollModule) {\n var trgClass = (this.isVertical) ? CLS_VSCROLLCNT : CLS_HSCROLLCNT;\n innerItem = [].slice.call(item.querySelector('.' + trgClass).children);\n }\n else {\n innerItem = [].slice.call(item.childNodes);\n }\n if (this.isVertical) {\n margin = innerItem[0].offsetHeight + innerItem[2].offsetHeight;\n }\n else {\n margin = innerItem[0].offsetWidth + innerItem[2].offsetWidth;\n }\n var tbarWid = this.isVertical ? this.element.offsetHeight : this.element.offsetWidth;\n if (popupNav) {\n tbarWid -= (this.isVertical ? popupNav.offsetHeight : popupNav.offsetWidth);\n var popWid = (this.isVertical ? popupNav.offsetHeight : popupNav.offsetWidth) + 'px';\n innerItem[2].removeAttribute('style');\n if (this.isVertical) {\n this.enableRtl ? innerItem[2].style.top = popWid : innerItem[2].style.bottom = popWid;\n }\n else {\n this.enableRtl ? innerItem[2].style.left = popWid : innerItem[2].style.right = popWid;\n }\n }\n if (tbarWid <= margin) {\n return;\n }\n var value = (((tbarWid - margin)) - (!this.isVertical ? innerItem[1].offsetWidth : innerItem[1].offsetHeight)) / 2;\n innerItem[1].removeAttribute('style');\n var mrgn = ((!this.isVertical ? innerItem[0].offsetWidth : innerItem[0].offsetHeight) + value) + 'px';\n if (this.isVertical) {\n this.enableRtl ? innerItem[1].style.marginBottom = mrgn : innerItem[1].style.marginTop = mrgn;\n }\n else {\n this.enableRtl ? innerItem[1].style.marginRight = mrgn : innerItem[1].style.marginLeft = mrgn;\n }\n };\n Toolbar.prototype.tbarItemAlign = function (item, itemEle, pos) {\n var _this = this;\n if (item.showAlwaysInPopup && item.overflow !== 'Show') {\n return;\n }\n var alignDiv = [];\n alignDiv.push(this.createElement('div', { className: CLS_TBARLEFT }));\n alignDiv.push(this.createElement('div', { className: CLS_TBARCENTER }));\n alignDiv.push(this.createElement('div', { className: CLS_TBARRIGHT }));\n if (pos === 0 && item.align !== 'Left') {\n alignDiv.forEach(function (ele) {\n itemEle.appendChild(ele);\n });\n this.tbarAlign = true;\n this.add(itemEle, CLS_TBARPOS);\n }\n else if (item.align !== 'Left') {\n var alignEle = itemEle.childNodes;\n var leftAlign_1 = alignDiv[0];\n [].slice.call(alignEle).forEach(function (el) {\n _this.tbarAlgEle.lefts.push(el);\n leftAlign_1.appendChild(el);\n });\n itemEle.appendChild(leftAlign_1);\n itemEle.appendChild(alignDiv[1]);\n itemEle.appendChild(alignDiv[2]);\n this.tbarAlign = true;\n this.add(itemEle, CLS_TBARPOS);\n }\n };\n Toolbar.prototype.ctrlTemplate = function () {\n var _this = this;\n this.ctrlTem = this.trgtEle.cloneNode(true);\n this.add(this.trgtEle, CLS_ITEMS);\n this.tbarEle = [];\n var innerEle = [].slice.call(this.trgtEle.children);\n innerEle.forEach(function (ele) {\n if (ele.tagName === 'DIV') {\n _this.tbarEle.push(ele);\n ele.setAttribute('aria-disabled', 'false');\n _this.add(ele, CLS_ITEM);\n }\n });\n };\n Toolbar.prototype.renderItems = function () {\n var ele = this.element;\n var items = this.items;\n if (this.trgtEle != null) {\n this.ctrlTemplate();\n }\n else if (ele && items.length > 0) {\n var itemEleDom = void 0;\n if (ele && ele.children.length > 0) {\n itemEleDom = ele.querySelector('.' + CLS_ITEMS);\n }\n if (!itemEleDom) {\n itemEleDom = this.createElement('div', { className: CLS_ITEMS });\n }\n this.itemsAlign(items, itemEleDom);\n ele.appendChild(itemEleDom);\n }\n };\n Toolbar.prototype.setAttr = function (attr, element) {\n var key = Object.keys(attr);\n var keyVal;\n for (var i = 0; i < key.length; i++) {\n keyVal = key[i];\n keyVal === 'class' ? this.add(element, attr[keyVal]) : element.setAttribute(keyVal, attr[keyVal]);\n }\n };\n /**\n * Enables or disables the specified Toolbar item.\n * @param {number|HTMLElement|NodeList} items - DOM element or an array of items to be enabled or disabled.\n * @param {boolean} isEnable - Boolean value that determines whether the command should be enabled or disabled.\n * By default, `isEnable` is set to true.\n * @returns void.\n */\n Toolbar.prototype.enableItems = function (items, isEnable) {\n var elements = items;\n var len = elements.length;\n var ele;\n if (isNOU(isEnable)) {\n isEnable = true;\n }\n var enable = function (isEnable, ele) {\n if (isEnable) {\n ele.classList.remove(CLS_DISABLE);\n ele.setAttribute('aria-disabled', 'false');\n }\n else {\n ele.classList.add(CLS_DISABLE);\n ele.setAttribute('aria-disabled', 'true');\n }\n };\n if (!isNOU(len) && len >= 1) {\n for (var a = 0, element = [].slice.call(elements); a < len; a++) {\n var itemElement = element[a];\n if (typeof (itemElement) === 'number') {\n ele = this.getElementByIndex(itemElement);\n if (isNOU(ele)) {\n return;\n }\n else {\n elements[a] = ele;\n }\n }\n else {\n ele = itemElement;\n }\n enable(isEnable, ele);\n }\n isEnable ? removeClass(elements, CLS_DISABLE) : addClass(elements, CLS_DISABLE);\n }\n else {\n if (typeof (elements) === 'number') {\n ele = this.getElementByIndex(elements);\n if (isNOU(ele)) {\n return;\n }\n }\n else {\n ele = items;\n }\n enable(isEnable, ele);\n }\n };\n Toolbar.prototype.getElementByIndex = function (index) {\n if (this.tbarEle[index]) {\n return this.tbarEle[index];\n }\n return null;\n };\n /**\n * Adds new items to the Toolbar that accepts an array as Toolbar items.\n * @param {ItemsModel[]} items - DOM element or an array of items to be added to the Toolbar.\n * @param {number} index - Number value that determines where the command is to be added. By default, index is 0.\n * @returns void.\n\n */\n Toolbar.prototype.addItems = function (items, index) {\n var innerItems;\n this.extendedOpen();\n var itemsDiv = this.element.querySelector('.' + CLS_ITEMS);\n if (isNOU(itemsDiv)) {\n this.itemsRerender(items);\n return;\n }\n var innerEle;\n var itemAgn = 'Left';\n if (isNOU(index)) {\n index = 0;\n }\n items.forEach(function (e) {\n if (!isNOU(e.align) && e.align !== 'Left' && itemAgn === 'Left') {\n itemAgn = e.align;\n }\n });\n for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {\n var item = items_1[_i];\n if (isNOU(item.type)) {\n item.type = 'Button';\n }\n innerItems = selectAll('.' + CLS_ITEM, this.element);\n item.align = itemAgn;\n innerEle = this.renderSubComponent(item, index);\n if (this.tbarEle.length >= index && innerItems.length >= 0) {\n if (isNOU(this.scrollModule)) {\n this.destroyMode();\n }\n var algIndex = item.align[0] === 'L' ? 0 : item.align[0] === 'C' ? 1 : 2;\n var ele = void 0;\n if (!this.tbarAlign && itemAgn !== 'Left') {\n this.tbarItemAlign(item, itemsDiv, 1);\n this.tbarAlign = true;\n ele = closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];\n ele.appendChild(innerEle);\n this.tbarAlgEle[(item.align + 's').toLowerCase()].push(innerEle);\n this.refreshPositioning();\n }\n else if (this.tbarAlign) {\n ele = closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];\n ele.insertBefore(innerEle, ele.children[index]);\n this.tbarAlgEle[(item.align + 's').toLowerCase()].splice(index, 0, innerEle);\n this.refreshPositioning();\n }\n else if (innerItems.length === 0) {\n innerItems = selectAll('.' + CLS_ITEMS, this.element);\n innerItems[0].appendChild(innerEle);\n }\n else {\n innerItems[0].parentNode.insertBefore(innerEle, innerItems[index]);\n }\n this.items.splice(index, 0, item);\n this.tbarEle.splice(index, 0, innerEle);\n index++;\n this.offsetWid = itemsDiv.offsetWidth;\n }\n }\n itemsDiv.style.width = '';\n this.renderOverflowMode();\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * Removes the items from the Toolbar. Acceptable arguments are index of item/HTMLElement/node list.\n * @param {number|HTMLElement|NodeList|HTMLElement[]} args\n * Index or DOM element or an Array of item which is to be removed from the Toolbar.\n * @returns void.\n\n */\n Toolbar.prototype.removeItems = function (args) {\n var elements = args;\n var index;\n var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (typeof (elements) === 'number') {\n index = parseInt(args.toString(), 10);\n this.removeItemByIndex(index, innerItems);\n }\n else {\n if (elements && elements.length > 1) {\n for (var _i = 0, _a = [].slice.call(elements); _i < _a.length; _i++) {\n var ele = _a[_i];\n index = this.tbarEle.indexOf(ele);\n this.removeItemByIndex(index, innerItems);\n innerItems = selectAll('.' + CLS_ITEM, this.element);\n }\n }\n else {\n var ele = (elements && elements.length && elements.length === 1) ? elements[0] : args;\n index = innerItems.indexOf(ele);\n this.removeItemByIndex(index, innerItems);\n }\n }\n this.resize();\n };\n Toolbar.prototype.removeItemByIndex = function (index, innerItems) {\n if (this.tbarEle[index] && innerItems[index]) {\n var eleIdx = this.tbarEle.indexOf(innerItems[index]);\n if (this.tbarAlign) {\n var indexAgn = void 0;\n indexAgn = this.tbarAlgEle[(this.items[eleIdx].align + 's').toLowerCase()].indexOf(this.tbarEle[eleIdx]);\n this.tbarAlgEle[(this.items[eleIdx].align + 's').toLowerCase()].splice(indexAgn, 1);\n }\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.clearTemplate();\n }\n detach(innerItems[index]);\n this.items.splice(eleIdx, 1);\n this.tbarEle.splice(eleIdx, 1);\n }\n };\n Toolbar.prototype.templateRender = function (templateProp, innerEle, item, index) {\n var itemType = item.type;\n var eleObj = templateProp;\n var isComponent;\n if (typeof (templateProp) === 'object') {\n isComponent = typeof (eleObj.appendTo) === 'function';\n }\n if (typeof (templateProp) === 'string' || !isComponent) {\n var templateFn = void 0;\n var val = templateProp;\n val = (typeof (templateProp) === 'string') ? templateProp.trim() : templateProp;\n var e = void 0;\n try {\n if (typeof (templateProp) === 'object' && !isNOU(templateProp.tagName)) {\n innerEle.appendChild(templateProp);\n }\n else if (document.querySelectorAll(val).length) {\n var ele = document.querySelector(val);\n var tempStr = ele.outerHTML.trim();\n innerEle.appendChild(ele);\n ele.style.display = '';\n if (!isNOU(tempStr)) {\n this.tempId.push(val);\n }\n }\n }\n catch (e) {\n templateFn = templateCompiler(val);\n }\n var tempArray = void 0;\n if (!isNOU(templateFn)) {\n var toolbarTemplateID = this.element.id + index + '_template';\n tempArray = templateFn({}, this, 'template', toolbarTemplateID, this.isStringTemplate);\n }\n if (!isNOU(tempArray) && tempArray.length > 0) {\n [].slice.call(tempArray).forEach(function (ele) {\n if (!isNOU(ele.tagName)) {\n ele.style.display = '';\n }\n innerEle.appendChild(ele);\n });\n }\n }\n else if (itemType === 'Input') {\n var ele = this.createElement('input');\n item.id ? (ele.id = item.id) : (ele.id = getUniqueID('tbr-ipt'));\n innerEle.appendChild(ele);\n eleObj.appendTo(ele);\n }\n this.add(innerEle, CLS_TEMPLATE);\n this.tbarEle.push(innerEle);\n };\n Toolbar.prototype.buttonRendering = function (item, innerEle) {\n var dom = this.createElement('button', { className: CLS_TBARBTN });\n dom.setAttribute('type', 'button');\n var textStr = item.text;\n var iconCss;\n var iconPos;\n item.id ? (dom.id = item.id) : dom.id = getUniqueID('e-tbr-btn');\n var btnTxt = this.createElement('span', { className: 'e-tbar-btn-text' });\n if (textStr) {\n btnTxt.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(textStr) : textStr;\n dom.appendChild(btnTxt);\n dom.classList.add('e-tbtn-txt');\n }\n else {\n this.add(innerEle, 'e-tbtn-align');\n }\n if (item.prefixIcon || item.suffixIcon) {\n if ((item.prefixIcon && item.suffixIcon) || item.prefixIcon) {\n iconCss = item.prefixIcon + ' e-icons';\n iconPos = 'Left';\n }\n else {\n iconCss = item.suffixIcon + ' e-icons';\n iconPos = 'Right';\n }\n }\n var btnObj = new Button({ iconCss: iconCss, iconPosition: iconPos });\n btnObj.createElement = this.createElement;\n btnObj.appendTo(dom);\n if (item.width) {\n setStyle(dom, { 'width': formatUnit(item.width) });\n }\n return dom;\n };\n Toolbar.prototype.renderSubComponent = function (item, index) {\n var innerEle;\n var dom;\n innerEle = this.createElement('div', { className: CLS_ITEM });\n innerEle.setAttribute('aria-disabled', 'false');\n var tempDom = this.createElement('div', {\n innerHTML: this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(item.tooltipText) : item.tooltipText\n });\n if (!this.tbarEle) {\n this.tbarEle = [];\n }\n if (item.htmlAttributes) {\n this.setAttr(item.htmlAttributes, innerEle);\n }\n if (item.tooltipText) {\n innerEle.setAttribute('title', tempDom.textContent);\n }\n if (item.cssClass) {\n innerEle.className = innerEle.className + ' ' + item.cssClass;\n }\n if (item.template) {\n this.templateRender(item.template, innerEle, item, index);\n }\n else {\n switch (item.type) {\n case 'Button':\n dom = this.buttonRendering(item, innerEle);\n dom.setAttribute('tabindex', '-1');\n dom.setAttribute('aria-label', (item.text || item.tooltipText));\n innerEle.appendChild(dom);\n innerEle.addEventListener('click', this.itemClick.bind(this));\n break;\n case 'Separator':\n this.add(innerEle, CLS_SEPARATOR);\n break;\n }\n }\n if (item.showTextOn) {\n var sTxt = item.showTextOn;\n if (sTxt === 'Toolbar') {\n this.add(innerEle, CLS_POPUPTEXT);\n this.add(innerEle, 'e-tbtn-align');\n }\n else if (sTxt === 'Overflow') {\n this.add(innerEle, CLS_TBARTEXT);\n }\n }\n if (item.overflow) {\n var overflow = item.overflow;\n if (overflow === 'Show') {\n this.add(innerEle, CLS_TBAROVERFLOW);\n }\n else if (overflow === 'Hide') {\n if (!innerEle.classList.contains(CLS_SEPARATOR)) {\n this.add(innerEle, CLS_POPOVERFLOW);\n }\n }\n }\n if (item.overflow !== 'Show' && item.showAlwaysInPopup && !innerEle.classList.contains(CLS_SEPARATOR)) {\n this.add(innerEle, CLS_POPPRI);\n this.popupPriCount++;\n }\n if (item.disabled) {\n this.add(innerEle, CLS_DISABLE);\n }\n if (item.visible === false) {\n this.add(innerEle, CLS_HIDDEN);\n }\n return innerEle;\n };\n Toolbar.prototype.itemClick = function (e) {\n this.activeEleSwitch(e.currentTarget);\n };\n Toolbar.prototype.activeEleSwitch = function (ele) {\n this.activeEleRemove(ele.firstElementChild);\n this.activeEle.focus();\n };\n Toolbar.prototype.activeEleRemove = function (curEle) {\n if (!isNOU(this.activeEle)) {\n this.activeEle.setAttribute('tabindex', '-1');\n }\n this.activeEle = curEle;\n if (isNOU(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {\n curEle.removeAttribute('tabindex');\n }\n else {\n this.activeEle.setAttribute('tabindex', '0');\n }\n };\n Toolbar.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Returns the current module name.\n * @returns string\n * @private\n */\n Toolbar.prototype.getModuleName = function () {\n return 'toolbar';\n };\n Toolbar.prototype.itemsRerender = function (newProp) {\n this.items = this.tbarItemsCol;\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.clearTemplate();\n }\n this.destroyMode();\n this.destroyItems();\n this.items = newProp;\n this.tbarItemsCol = this.items;\n this.renderItems();\n this.renderOverflowMode();\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Toolbar.prototype.resize = function () {\n var ele = this.element;\n this.tbResize = true;\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n if (this.popObj && this.overflowMode === 'Popup') {\n this.popObj.hide();\n }\n var checkOverflow = this.checkOverflow(ele, ele.getElementsByClassName(CLS_ITEMS)[0]);\n if (!checkOverflow) {\n this.destroyScroll();\n var multirowele = ele.querySelector('.' + CLS_ITEMS);\n if (!isNOU(multirowele)) {\n this.remove(multirowele, CLS_MULTIROWPOS);\n if (this.tbarAlign) {\n this.add(multirowele, CLS_TBARPOS);\n }\n }\n }\n if (checkOverflow && this.scrollModule && (this.offsetWid === ele.offsetWidth)) {\n return;\n }\n if (this.offsetWid > ele.offsetWidth || checkOverflow) {\n this.renderOverflowMode();\n }\n if (this.popObj) {\n if (this.overflowMode === 'Extended') {\n var eleStyles = window.getComputedStyle(this.element);\n this.popObj.width = parseFloat(eleStyles.width) + ((parseFloat(eleStyles.borderRightWidth)) * 2);\n }\n if (this.tbarAlign) {\n this.removePositioning();\n }\n this.popupRefresh(this.popObj.element, false);\n if (this.tbarAlign) {\n this.refreshPositioning();\n }\n }\n if (this.element.querySelector('.' + CLS_HSCROLLBAR)) {\n this.scrollStep = this.element.querySelector('.' + CLS_HSCROLLBAR).offsetWidth;\n }\n this.offsetWid = ele.offsetWidth;\n this.tbResize = false;\n this.separator();\n };\n Toolbar.prototype.extendedOpen = function () {\n var sib = this.element.querySelector('.' + CLS_EXTENDABLECLASS);\n if (this.overflowMode === 'Extended' && sib) {\n this.isExtendedOpen = sib.classList.contains(CLS_POPUPOPEN);\n }\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of the property that changed.\n * @param {ToolbarModel} newProp\n * @param {ToolbarModel} oldProp\n * @returns void\n * @private\n */\n Toolbar.prototype.onPropertyChanged = function (newProp, oldProp) {\n var tEle = this.element;\n this.extendedOpen();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'items':\n if (!(newProp.items instanceof Array && oldProp.items instanceof Array) && !this.isServerRendered) {\n var changedProb = Object.keys(newProp.items);\n for (var i = 0; i < changedProb.length; i++) {\n var index = parseInt(Object.keys(newProp.items)[i], 10);\n var property = Object.keys(newProp.items[index])[0];\n var newProperty = Object(newProp.items[index])[property];\n if (this.tbarAlign || property === 'align') {\n this.refresh();\n this.trigger('created');\n break;\n }\n var popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;\n var booleanCheck = property === 'overflow' && this.popupPriCount !== 0;\n if ((popupPriCheck) || (this.items[index].showAlwaysInPopup) && booleanCheck) {\n --this.popupPriCount;\n }\n if (isNOU(this.scrollModule)) {\n this.destroyMode();\n }\n var itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.clearTemplate();\n }\n detach(itemCol[index]);\n this.tbarEle.splice(index, 1);\n this.addItems([this.items[index]], index);\n this.items.splice(index, 1);\n if (this.items[index].template) {\n this.tbarEle.splice(this.items.length, 1);\n }\n }\n }\n else {\n this.itemsRerender(newProp.items);\n }\n break;\n case 'width':\n var wid = tEle.offsetWidth;\n setStyle(tEle, { 'width': formatUnit(newProp.width) });\n this.renderOverflowMode();\n if (this.popObj && wid < tEle.offsetWidth) {\n this.popupRefresh(this.popObj.element, false);\n }\n break;\n case 'height':\n setStyle(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'overflowMode':\n this.destroyMode();\n this.renderOverflowMode();\n if (this.enableRtl) {\n this.add(tEle, CLS_RTL);\n }\n this.refreshOverflow();\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.add(tEle, CLS_RTL) : this.remove(tEle, CLS_RTL);\n if (!isNOU(this.scrollModule)) {\n newProp.enableRtl ? this.add(this.scrollModule.element, CLS_RTL) : this.remove(this.scrollModule.element, CLS_RTL);\n }\n if (!isNOU(this.popObj)) {\n newProp.enableRtl ? this.add(this.popObj.element, CLS_RTL) : this.remove(this.popObj.element, CLS_RTL);\n }\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n break;\n case 'scrollStep':\n if (this.scrollModule) {\n this.scrollModule.scrollStep = this.scrollStep;\n }\n break;\n case 'enableCollision':\n if (this.popObj) {\n this.popObj.collision = { Y: this.enableCollision ? 'flip' : 'none' };\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([this.element], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.element], newProp.cssClass.split(' '));\n }\n break;\n case 'allowKeyboard':\n this.unwireKeyboardEvent();\n if (newProp.allowKeyboard) {\n this.wireKeyboardEvent();\n }\n break;\n }\n }\n };\n /**\n * Shows or hides the Toolbar item that is in the specified index.\n * @param {number | HTMLElement} index - Index value of target item or DOM element of items to be hidden or shown.\n * @param {boolean} value - Based on this Boolean value, item will be hide (true) or show (false). By default, value is false.\n * @returns void.\n */\n Toolbar.prototype.hideItem = function (index, value) {\n var isElement = (typeof (index) === 'object') ? true : false;\n var eleIndex = index;\n var initIndex;\n var ele;\n var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (isElement) {\n ele = index;\n }\n else if (this.tbarEle[eleIndex]) {\n var innerItems_1 = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n ele = innerItems_1[eleIndex];\n }\n if (ele) {\n value ? ele.classList.add(CLS_HIDDEN) : ele.classList.remove(CLS_HIDDEN);\n if (value && isNOU(this.element.getAttribute('tabindex')) && !ele.classList.contains(CLS_SEPARATOR)) {\n if (isNOU(ele.firstElementChild.getAttribute('tabindex'))) {\n ele.firstElementChild.setAttribute('tabindex', '-1');\n var innerItems_2 = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (isElement) {\n eleIndex = innerItems_2.indexOf(ele);\n }\n var nextEle = innerItems_2[++eleIndex];\n while (nextEle) {\n var skipEle = this.eleContains(nextEle);\n if (!skipEle) {\n nextEle.firstElementChild.removeAttribute('tabindex');\n break;\n }\n nextEle = innerItems_2[++eleIndex];\n }\n }\n }\n else if (isNOU(this.element.getAttribute('tabindex')) && !ele.classList.contains(CLS_SEPARATOR)) {\n initIndex = 0;\n var setFlag = false;\n var removeFlag = false;\n var initELe = innerItems[initIndex];\n while (initELe) {\n if (!initELe.classList.contains(CLS_SEPARATOR)) {\n if (isNOU(initELe.firstElementChild.getAttribute('tabindex'))) {\n initELe.firstElementChild.setAttribute('tabindex', '-1');\n setFlag = true;\n }\n else {\n if (setFlag && removeFlag) {\n break;\n }\n var skipEle = this.eleContains(initELe);\n if (!skipEle) {\n initELe.firstElementChild.removeAttribute('tabindex');\n removeFlag = true;\n }\n initELe = innerItems[++initIndex];\n }\n }\n else {\n initELe = innerItems[++initIndex];\n }\n }\n }\n this.refreshOverflow();\n }\n };\n __decorate([\n Collection([], Item)\n ], Toolbar.prototype, \"items\", void 0);\n __decorate([\n Property('auto')\n ], Toolbar.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Toolbar.prototype, \"height\", void 0);\n __decorate([\n Property('')\n ], Toolbar.prototype, \"cssClass\", void 0);\n __decorate([\n Property('Scrollable')\n ], Toolbar.prototype, \"overflowMode\", void 0);\n __decorate([\n Property()\n ], Toolbar.prototype, \"scrollStep\", void 0);\n __decorate([\n Property(true)\n ], Toolbar.prototype, \"enableCollision\", void 0);\n __decorate([\n Property(true)\n ], Toolbar.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property(true)\n ], Toolbar.prototype, \"allowKeyboard\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"clicked\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"beforeCreate\", void 0);\n Toolbar = __decorate([\n NotifyPropertyChanges\n ], Toolbar);\n return Toolbar;\n}(Component));\nexport { Toolbar };\n","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, closest, Collection, Complex, attributes, detach } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, Browser, formatUnit, L10n } from '@syncfusion/ej2-base';\nimport { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass, remove } from '@syncfusion/ej2-base';\nimport { EventHandler, rippleEffect, Touch, compile, Animation } from '@syncfusion/ej2-base';\nimport { getRandomId, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { Toolbar } from '../toolbar/toolbar';\nvar CLS_TAB = 'e-tab';\nvar CLS_HEADER = 'e-tab-header';\nvar CLS_BLA_TEM = 'blazor-template';\nvar CLS_CONTENT = 'e-content';\nvar CLS_NEST = 'e-nested';\nvar CLS_ITEMS = 'e-items';\nvar CLS_ITEM = 'e-item';\nvar CLS_TEMPLATE = 'e-template';\nvar CLS_RTL = 'e-rtl';\nvar CLS_ACTIVE = 'e-active';\nvar CLS_DISABLE = 'e-disable';\nvar CLS_HIDDEN = 'e-hidden';\nvar CLS_FOCUS = 'e-focused';\nvar CLS_ICONS = 'e-icons';\nvar CLS_ICON = 'e-icon';\nvar CLS_ICON_TAB = 'e-icon-tab';\nvar CLS_ICON_CLOSE = 'e-close-icon';\nvar CLS_CLOSE_SHOW = 'e-close-show';\nvar CLS_TEXT = 'e-tab-text';\nvar CLS_INDICATOR = 'e-indicator';\nvar CLS_WRAP = 'e-tab-wrap';\nvar CLS_TEXT_WRAP = 'e-text-wrap';\nvar CLS_TAB_ICON = 'e-tab-icon';\nvar CLS_TB_ITEMS = 'e-toolbar-items';\nvar CLS_TB_ITEM = 'e-toolbar-item';\nvar CLS_TB_POP = 'e-toolbar-pop';\nvar CLS_TB_POPUP = 'e-toolbar-popup';\nvar CLS_HOR_NAV = 'e-hor-nav';\nvar CLS_POPUP_OPEN = 'e-popup-open';\nvar CLS_POPUP_CLOSE = 'e-popup-close';\nvar CLS_PROGRESS = 'e-progress';\nvar CLS_IGNORE = 'e-ignore';\nvar CLS_OVERLAY = 'e-overlay';\nvar CLS_HSCRCNT = 'e-hscroll-content';\nvar CLS_VSCRCNT = 'e-vscroll-content';\nvar CLS_HORIZONTAL = 'e-horizontal';\nvar CLS_VTAB = 'e-vertical-tab';\nvar CLS_VERTICAL = 'e-vertical';\nvar CLS_VLEFT = 'e-vertical-left';\nvar CLS_VRIGHT = 'e-vertical-right';\nvar CLS_HBOTTOM = 'e-horizontal-bottom';\nvar CLS_FILL = 'e-fill-mode';\n/**\n * Objects used for configuring the Tab selecting item action properties.\n */\nvar TabActionSettings = /** @class */ (function (_super) {\n __extends(TabActionSettings, _super);\n function TabActionSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('SlideLeftIn')\n ], TabActionSettings.prototype, \"effect\", void 0);\n __decorate([\n Property(600)\n ], TabActionSettings.prototype, \"duration\", void 0);\n __decorate([\n Property('ease')\n ], TabActionSettings.prototype, \"easing\", void 0);\n return TabActionSettings;\n}(ChildProperty));\nexport { TabActionSettings };\n/**\n * Objects used for configuring the Tab animation properties.\n */\nvar TabAnimationSettings = /** @class */ (function (_super) {\n __extends(TabAnimationSettings, _super);\n function TabAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({ effect: 'SlideLeftIn', duration: 600, easing: 'ease' }, TabActionSettings)\n ], TabAnimationSettings.prototype, \"previous\", void 0);\n __decorate([\n Complex({ effect: 'SlideRightIn', duration: 600, easing: 'ease' }, TabActionSettings)\n ], TabAnimationSettings.prototype, \"next\", void 0);\n return TabAnimationSettings;\n}(ChildProperty));\nexport { TabAnimationSettings };\n/**\n * Objects used for configuring the Tab item header properties.\n */\nvar Header = /** @class */ (function (_super) {\n __extends(Header, _super);\n function Header() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('')\n ], Header.prototype, \"text\", void 0);\n __decorate([\n Property('')\n ], Header.prototype, \"iconCss\", void 0);\n __decorate([\n Property('left')\n ], Header.prototype, \"iconPosition\", void 0);\n return Header;\n}(ChildProperty));\nexport { Header };\n/**\n * An array of object that is used to configure the Tab.\n */\nvar TabItem = /** @class */ (function (_super) {\n __extends(TabItem, _super);\n function TabItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({}, Header)\n ], TabItem.prototype, \"header\", void 0);\n __decorate([\n Property(null)\n ], TabItem.prototype, \"headerTemplate\", void 0);\n __decorate([\n Property('')\n ], TabItem.prototype, \"content\", void 0);\n __decorate([\n Property('')\n ], TabItem.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], TabItem.prototype, \"disabled\", void 0);\n __decorate([\n Property(true)\n ], TabItem.prototype, \"visible\", void 0);\n return TabItem;\n}(ChildProperty));\nexport { TabItem };\n/**\n * Tab is a content panel to show multiple contents in a single space, one at a time.\n * Each Tab item has an associated content, that will be displayed based on the active Tab header item.\n * ```html\n * \n * \n * ```\n */\nvar Tab = /** @class */ (function (_super) {\n __extends(Tab, _super);\n /**\n * Initializes a new instance of the Tab class.\n * @param options - Specifies Tab model properties as options.\n * @param element - Specifies the element that is rendered as a Tab.\n */\n function Tab(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.show = {};\n _this.hide = {};\n _this.maxHeight = 0;\n _this.title = 'Close';\n _this.lastIndex = 0;\n _this.isAdd = false;\n _this.isIconAlone = false;\n _this.resizeContext = _this.refreshActElePosition.bind(_this);\n /**\n * Contains the keyboard configuration of the Tab.\n */\n _this.keyConfigs = {\n tab: 'tab',\n home: 'home',\n end: 'end',\n enter: 'enter',\n space: 'space',\n delete: 'delete',\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n moveUp: 'uparrow',\n moveDown: 'downarrow'\n };\n return _this;\n }\n /**\n * Removes the component from the DOM and detaches all its related event handlers, attributes and classes.\n * @returns void\n */\n Tab.prototype.destroy = function () {\n var _this = this;\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.clearTemplate();\n }\n if (!isNOU(this.tbObj)) {\n this.tbObj.destroy();\n }\n this.unWireEvents();\n ['role', 'aria-disabled', 'aria-activedescendant', 'tabindex', 'aria-orientation'].forEach(function (val) {\n _this.element.removeAttribute(val);\n });\n this.expTemplateContent();\n if (!this.isTemplate) {\n while (this.element.firstElementChild) {\n remove(this.element.firstElementChild);\n }\n }\n else {\n var cntEle = select('.' + CLS_TAB + ' > .' + CLS_CONTENT, this.element);\n this.element.classList.remove(CLS_TEMPLATE);\n if (!isNOU(cntEle)) {\n cntEle.innerHTML = this.cnt;\n }\n }\n _super.prototype.destroy.call(this);\n this.trigger('destroyed');\n };\n /**\n * Refresh the tab component\n */\n Tab.prototype.refresh = function () {\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.clearTemplate();\n }\n if (!this.isServerRendered) {\n _super.prototype.refresh.call(this);\n }\n else if (this.isServerRendered && this.loadOn !== 'Dynamic') {\n this.setActiveBorder();\n }\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * Initialize component\n * @private\n */\n Tab.prototype.preRender = function () {\n var nested = closest(this.element, '.' + CLS_CONTENT);\n this.prevIndex = 0;\n this.isNested = false;\n this.isPopup = false;\n this.initRender = true;\n this.isSwipeed = false;\n this.itemIndexArray = [];\n this.templateEle = [];\n if (!isNOU(nested)) {\n nested.parentElement.classList.add(CLS_NEST);\n this.isNested = true;\n }\n var name = Browser.info.name;\n var css = (name === 'msie') ? 'e-ie' : (name === 'edge') ? 'e-edge' : (name === 'safari') ? 'e-safari' : '';\n setStyle(this.element, { 'width': formatUnit(this.width), 'height': formatUnit(this.height) });\n this.setCssClass(this.element, this.cssClass, true);\n attributes(this.element, { role: 'tablist', 'aria-disabled': 'false', 'aria-activedescendant': '' });\n this.setCssClass(this.element, css, true);\n this.updatePopAnimationConfig();\n };\n /**\n * Initialize the component rendering\n * @private\n */\n Tab.prototype.render = function () {\n this.btnCls = this.createElement('span', { className: CLS_ICONS + ' ' + CLS_ICON_CLOSE, attrs: { title: this.title } });\n this.tabId = this.element.id.length > 0 ? ('-' + this.element.id) : getRandomId();\n this.renderContainer();\n this.wireEvents();\n this.initRender = false;\n };\n Tab.prototype.renderContainer = function () {\n if (this.isServerRendered) {\n this.isTemplate = false;\n return;\n }\n var ele = this.element;\n if (this.items.length > 0 && ele.children.length === 0) {\n ele.appendChild(this.createElement('div', { className: CLS_CONTENT }));\n this.setOrientation(this.headerPlacement, this.createElement('div', { className: CLS_HEADER }));\n this.isTemplate = false;\n }\n else if (this.element.children.length > 0) {\n this.isTemplate = true;\n ele.classList.add(CLS_TEMPLATE);\n var header = ele.querySelector('.' + CLS_HEADER);\n if (header && this.headerPlacement === 'Bottom') {\n this.setOrientation(this.headerPlacement, header);\n }\n }\n if (!isNOU(select('.' + CLS_HEADER, this.element)) && !isNOU(select('.' + CLS_CONTENT, this.element))) {\n this.renderHeader();\n this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);\n if (!isNOU(this.tbItems)) {\n rippleEffect(this.tbItems, { selector: '.e-tab-wrap' });\n }\n this.renderContent();\n if (selectAll('.' + CLS_TB_ITEM, this.element).length > 0) {\n var scrCnt = void 0;\n this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);\n this.bdrLine = this.createElement('div', { className: CLS_INDICATOR + ' ' + CLS_HIDDEN + ' ' + CLS_IGNORE });\n scrCnt = select('.' + this.scrCntClass, this.tbItems);\n if (!isNOU(scrCnt)) {\n scrCnt.insertBefore(this.bdrLine, scrCnt.firstChild);\n }\n else {\n this.tbItems.insertBefore(this.bdrLine, this.tbItems.firstChild);\n }\n this.setContentHeight(true);\n this.select(this.selectedItem);\n }\n this.setRTL(this.enableRtl);\n }\n };\n Tab.prototype.serverItemsChanged = function () {\n this.enableAnimation = false;\n this.setActive(this.selectedItem, true);\n if (this.loadOn !== 'Dynamic' && !isNOU(this.cntEle)) {\n var itemCollection = [].slice.call(this.cntEle.children);\n var content_1 = CLS_CONTENT + this.tabId + '_' + this.selectedItem;\n itemCollection.forEach(function (item) {\n if (item.classList.contains(CLS_ACTIVE) && item.id !== content_1) {\n item.classList.remove(CLS_ACTIVE);\n }\n if (item.id === content_1) {\n item.classList.add(CLS_ACTIVE);\n }\n });\n this.prevIndex = this.selectedItem;\n this.triggerAnimation(CLS_ITEM + this.tabId + '_' + this.selectedItem, false);\n }\n this.enableAnimation = true;\n };\n Tab.prototype.headerReady = function () {\n this.initRender = true;\n this.hdrEle = this.getTabHeader();\n this.setOrientation(this.headerPlacement, this.hdrEle);\n if (!isNOU(this.hdrEle)) {\n this.tbObj = (this.hdrEle && this.hdrEle.ej2_instances[0]);\n }\n this.tbObj.clicked = this.clickHandler.bind(this);\n this.tbObj.on('onItemsChanged', this.serverItemsChanged.bind(this));\n this.tbItems = select('.' + CLS_HEADER + ' .' + CLS_TB_ITEMS, this.element);\n if (!isNOU(this.tbItems)) {\n rippleEffect(this.tbItems, { selector: '.e-tab-wrap' });\n }\n if (selectAll('.' + CLS_TB_ITEM, this.element).length > 0) {\n var scrollCnt = void 0;\n this.bdrLine = select('.' + CLS_INDICATOR + '.' + CLS_IGNORE, this.element);\n scrollCnt = select('.' + this.scrCntClass, this.tbItems);\n if (!isNOU(scrollCnt)) {\n scrollCnt.insertBefore(this.bdrLine, scrollCnt.firstElementChild);\n }\n else {\n this.tbItems.insertBefore(this.bdrLine, this.tbItems.firstElementChild);\n }\n this.select(this.selectedItem);\n }\n this.cntEle = select('.' + CLS_TAB + ' > .' + CLS_CONTENT, this.element);\n if (!isNOU(this.cntEle)) {\n this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });\n }\n if (this.loadOn === 'Demand') {\n var id = this.setActiveContent();\n this.triggerAnimation(id, false);\n }\n this.initRender = false;\n this.renderComplete();\n };\n Tab.prototype.setActiveContent = function () {\n var id = CLS_ITEM + this.tabId + '_' + this.selectedItem;\n var item = this.getTrgContent(this.cntEle, this.extIndex(id));\n if (!isNOU(item)) {\n item.classList.add(CLS_ACTIVE);\n }\n return id;\n };\n Tab.prototype.renderHeader = function () {\n var _this = this;\n var hdrPlace = this.headerPlacement;\n var tabItems = [];\n this.hdrEle = this.getTabHeader();\n this.addVerticalClass();\n if (!this.isTemplate) {\n tabItems = this.parseObject(this.items, 0);\n }\n else {\n if (this.element.children.length > 1 && this.element.children[1].classList.contains(CLS_HEADER)) {\n this.setProperties({ headerPlacement: 'Bottom' }, true);\n }\n var count = this.hdrEle.children.length;\n var hdrItems = [];\n for (var i = 0; i < count; i++) {\n hdrItems.push(this.hdrEle.children.item(i).innerHTML);\n }\n if (count > 0) {\n while (this.hdrEle.firstElementChild) {\n detach(this.hdrEle.firstElementChild);\n }\n var tabItems_1 = this.createElement('div', { className: CLS_ITEMS });\n this.hdrEle.appendChild(tabItems_1);\n hdrItems.forEach(function (item, index) {\n _this.lastIndex = index;\n var attr = {\n className: CLS_ITEM, id: CLS_ITEM + _this.tabId + '_' + index,\n attrs: { role: 'tab', 'aria-controls': CLS_CONTENT + _this.tabId + '_' + index, 'aria-selected': 'false' }\n };\n var txt = _this.createElement('span', {\n className: CLS_TEXT, innerHTML: item, attrs: { 'role': 'presentation' }\n }).outerHTML;\n var cont = _this.createElement('div', {\n className: CLS_TEXT_WRAP, innerHTML: txt + _this.btnCls.outerHTML\n }).outerHTML;\n var wrap = _this.createElement('div', { className: CLS_WRAP, innerHTML: cont, attrs: { tabIndex: '-1' } });\n tabItems_1.appendChild(_this.createElement('div', attr));\n selectAll('.' + CLS_ITEM, tabItems_1)[index].appendChild(wrap);\n });\n }\n }\n this.tbObj = new Toolbar({\n width: (hdrPlace === 'Left' || hdrPlace === 'Right') ? 'auto' : '100%',\n height: (hdrPlace === 'Left' || hdrPlace === 'Right') ? '100%' : 'auto',\n overflowMode: this.overflowMode,\n items: (tabItems.length !== 0) ? tabItems : [],\n clicked: this.clickHandler.bind(this),\n scrollStep: this.scrollStep,\n enableHtmlSanitizer: this.enableHtmlSanitizer\n });\n this.tbObj.isStringTemplate = true;\n this.tbObj.createElement = this.createElement;\n this.tbObj.appendTo(this.hdrEle);\n attributes(this.hdrEle, { 'aria-label': 'tab-header' });\n this.updateOrientationAttribute();\n this.setCloseButton(this.showCloseButton);\n };\n Tab.prototype.renderContent = function () {\n this.cntEle = select('.' + CLS_CONTENT, this.element);\n var hdrItem = selectAll('.' + CLS_TB_ITEM, this.element);\n if (this.isTemplate) {\n this.cnt = (this.cntEle.children.length > 0) ? this.cntEle.innerHTML : '';\n var contents = this.cntEle.children;\n for (var i = 0; i < hdrItem.length; i++) {\n if (contents.length - 1 >= i) {\n contents.item(i).className += CLS_ITEM;\n attributes(contents.item(i), { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM + this.tabId + '_' + i });\n contents.item(i).id = CLS_CONTENT + this.tabId + '_' + i;\n }\n }\n }\n };\n Tab.prototype.reRenderItems = function () {\n this.renderContainer();\n if (!isNOU(this.cntEle)) {\n this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });\n }\n };\n Tab.prototype.parseObject = function (items, index) {\n var _this = this;\n var tbCount = selectAll('.' + CLS_TB_ITEM, this.element).length;\n var tItems = [];\n var txtWrapEle;\n var spliceArray = [];\n var i = 0;\n items.forEach(function (item, i) {\n var pos = (isNOU(item.header) || isNOU(item.header.iconPosition)) ? '' : item.header.iconPosition;\n var css = (isNOU(item.header) || isNOU(item.header.iconCss)) ? '' : item.header.iconCss;\n if ((isNOU(item.headerTemplate)) && (isNOU(item.header) || isNOU(item.header.text) ||\n ((item.header.text.length === 0)) && (css === ''))) {\n spliceArray.push(i);\n return;\n }\n var txt = item.headerTemplate || item.header.text;\n if (typeof txt === 'string' && _this.enableHtmlSanitizer) {\n txt = SanitizeHtmlHelper.sanitize(txt);\n }\n _this.lastIndex = ((tbCount === 0) ? i : ((_this.isReplace) ? (index + i) : (_this.lastIndex + 1)));\n var disabled = (item.disabled) ? ' ' + CLS_DISABLE + ' ' + CLS_OVERLAY : '';\n var hidden = (item.visible === false) ? ' ' + CLS_HIDDEN : '';\n txtWrapEle = _this.createElement('div', { className: CLS_TEXT, attrs: { 'role': 'presentation' } });\n var tHtml = ((txt instanceof Object) ? txt.outerHTML : txt);\n var txtEmpty = (!isNOU(tHtml) && tHtml !== '');\n if (!isNOU(txt.tagName)) {\n txtWrapEle.appendChild(txt);\n }\n else {\n _this.headerTextCompile(txtWrapEle, txt, i);\n }\n var tEle;\n var icon = _this.createElement('span', {\n className: CLS_ICONS + ' ' + CLS_TAB_ICON + ' ' + CLS_ICON + '-' + pos + ' ' + css\n });\n var tCont = _this.createElement('div', { className: CLS_TEXT_WRAP });\n tCont.appendChild(txtWrapEle);\n if ((txt !== '' && txt !== undefined) && css !== '') {\n if ((pos === 'left' || pos === 'top')) {\n tCont.insertBefore(icon, tCont.firstElementChild);\n }\n else {\n tCont.appendChild(icon);\n }\n tEle = txtWrapEle;\n _this.isIconAlone = false;\n }\n else {\n tEle = ((css === '') ? txtWrapEle : icon);\n if (tEle === icon) {\n detach(txtWrapEle);\n tCont.appendChild(icon);\n _this.isIconAlone = true;\n }\n }\n var wrapAttrs = (item.disabled) ? {} : { tabIndex: '-1' };\n tCont.appendChild(_this.btnCls.cloneNode(true));\n var wrap = _this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });\n wrap.appendChild(tCont);\n if (_this.itemIndexArray === []) {\n _this.itemIndexArray.push(CLS_ITEM + _this.tabId + '_' + _this.lastIndex);\n }\n else {\n _this.itemIndexArray.splice((index + i), 0, CLS_ITEM + _this.tabId + '_' + _this.lastIndex);\n }\n var attrObj = {\n id: CLS_ITEM + _this.tabId + '_' + _this.lastIndex, role: 'tab', 'aria-selected': 'false'\n };\n var tItem = { htmlAttributes: attrObj, template: wrap };\n tItem.cssClass = ((item.cssClass !== undefined) ? item.cssClass : ' ') + ' ' + disabled + ' ' + hidden\n + ((css !== '') ? 'e-i' + pos : '') + ' ' + ((!txtEmpty) ? CLS_ICON : '');\n if (pos === 'top' || pos === 'bottom') {\n _this.element.classList.add('e-vertical-icon');\n }\n tItems.push(tItem);\n i++;\n });\n if (!this.isAdd) {\n spliceArray.forEach(function (spliceItemIndex) {\n _this.items.splice(spliceItemIndex, 1);\n });\n }\n (this.isIconAlone) ? this.element.classList.add(CLS_ICON_TAB) : this.element.classList.remove(CLS_ICON_TAB);\n return tItems;\n };\n Tab.prototype.removeActiveClass = function () {\n var tabHeader = this.getTabHeader();\n if (tabHeader) {\n var tabItems = selectAll('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, tabHeader);\n [].slice.call(tabItems).forEach(function (node) { return node.classList.remove(CLS_ACTIVE); });\n }\n };\n Tab.prototype.checkPopupOverflow = function (ele) {\n this.tbPop = select('.' + CLS_TB_POP, this.element);\n var popIcon = select('.e-hor-nav', this.element);\n var tbrItems = select('.' + CLS_TB_ITEMS, this.element);\n var lastChild = tbrItems.lastChild;\n var isOverflow = false;\n if (!this.isVertical() && ((this.enableRtl && ((popIcon.offsetLeft + popIcon.offsetWidth) > tbrItems.offsetLeft))\n || (!this.enableRtl && popIcon.offsetLeft < tbrItems.offsetWidth))) {\n isOverflow = true;\n }\n else if (this.isVertical() && (popIcon.offsetTop < lastChild.offsetTop + lastChild.offsetHeight)) {\n isOverflow = true;\n }\n if (isOverflow) {\n ele.classList.add(CLS_TB_POPUP);\n this.tbPop.insertBefore(ele, selectAll('.' + CLS_TB_POPUP, this.tbPop)[0]);\n }\n return true;\n };\n Tab.prototype.popupHandler = function (target) {\n var ripEle = target.querySelector('.e-ripple-element');\n if (!isNOU(ripEle)) {\n ripEle.outerHTML = '';\n target.querySelector('.' + CLS_WRAP).classList.remove('e-ripple');\n }\n this.tbItem = selectAll('.' + CLS_TB_ITEMS + ' .' + CLS_TB_ITEM, this.hdrEle);\n var lastChild = this.tbItem[this.tbItem.length - 1];\n if (this.tbItem.length !== 0) {\n target.classList.remove(CLS_TB_POPUP);\n target.removeAttribute('style');\n this.tbItems.appendChild(target);\n this.actEleId = target.id;\n if (this.checkPopupOverflow(lastChild)) {\n var prevEle = this.tbItems.lastChild.previousElementSibling;\n this.checkPopupOverflow(prevEle);\n }\n this.isPopup = true;\n }\n return selectAll('.' + CLS_TB_ITEM, this.tbItems).length - 1;\n };\n Tab.prototype.updateOrientationAttribute = function () {\n attributes(this.element, { 'aria-orientation': (this.isVertical() ? 'vertical' : 'horizontal') });\n };\n Tab.prototype.setCloseButton = function (val) {\n var trg = select('.' + CLS_HEADER, this.element);\n (val === true) ? trg.classList.add(CLS_CLOSE_SHOW) : trg.classList.remove(CLS_CLOSE_SHOW);\n this.tbObj.refreshOverflow();\n this.refreshActElePosition();\n };\n Tab.prototype.prevCtnAnimation = function (prev, current) {\n var animation;\n var checkRTL = this.enableRtl || this.element.classList.contains(CLS_RTL);\n if (this.isPopup || prev <= current) {\n if (this.animation.previous.effect === 'SlideLeftIn') {\n animation = {\n name: 'SlideLeftOut',\n duration: this.animation.previous.duration, timingFunction: this.animation.previous.easing\n };\n }\n else {\n animation = null;\n }\n }\n else {\n if (this.animation.next.effect === 'SlideRightIn') {\n animation = {\n name: 'SlideRightOut',\n duration: this.animation.next.duration, timingFunction: this.animation.next.easing\n };\n }\n else {\n animation = null;\n }\n }\n return animation;\n };\n Tab.prototype.triggerPrevAnimation = function (oldCnt, prevIndex) {\n var _this = this;\n var animateObj = this.prevCtnAnimation(prevIndex, this.selectedItem);\n if (!isNOU(animateObj)) {\n animateObj.begin = function () {\n setStyle(oldCnt, { 'position': 'absolute' });\n oldCnt.classList.add(CLS_PROGRESS);\n oldCnt.classList.add('e-view');\n };\n animateObj.end = function () {\n oldCnt.style.display = 'none';\n oldCnt.classList.remove(CLS_ACTIVE);\n oldCnt.classList.remove(CLS_PROGRESS);\n oldCnt.classList.remove('e-view');\n setStyle(oldCnt, { 'display': '', 'position': '' });\n if (oldCnt.childNodes.length === 0 && !_this.isTemplate) {\n detach(oldCnt);\n }\n };\n new Animation(animateObj).animate(oldCnt);\n }\n else {\n oldCnt.classList.remove(CLS_ACTIVE);\n }\n };\n Tab.prototype.triggerAnimation = function (id, value) {\n var _this = this;\n var prevIndex = this.prevIndex;\n var oldCnt;\n var newCnt;\n if (!this.isServerRendered || (this.isServerRendered && this.loadOn !== 'Dynamic')) {\n var itemCollection = [].slice.call(this.element.querySelector('.' + CLS_CONTENT).children);\n itemCollection.forEach(function (item) {\n if (item.id === _this.prevActiveEle) {\n oldCnt = item;\n }\n });\n var prevEle = this.tbItem[prevIndex];\n newCnt = this.getTrgContent(this.cntEle, this.extIndex(id));\n if (isNOU(oldCnt) && !isNOU(prevEle)) {\n var idNo = this.extIndex(prevEle.id);\n oldCnt = this.getTrgContent(this.cntEle, idNo);\n }\n }\n else {\n newCnt = this.cntEle.firstElementChild;\n }\n if (!isNOU(newCnt)) {\n this.prevActiveEle = newCnt.id;\n }\n if (this.initRender || value === false || this.animation === {} || isNOU(this.animation)) {\n if (oldCnt && oldCnt !== newCnt) {\n oldCnt.classList.remove(CLS_ACTIVE);\n }\n return;\n }\n var cnt = select('.' + CLS_CONTENT, this.element);\n var animateObj;\n if (this.prevIndex > this.selectedItem && !this.isPopup) {\n var openEff = this.animation.previous.effect;\n animateObj = {\n name: ((openEff === 'None') ? '' : ((openEff !== 'SlideLeftIn') ? openEff : 'SlideLeftIn')),\n duration: this.animation.previous.duration,\n timingFunction: this.animation.previous.easing\n };\n }\n else if (this.isPopup || this.prevIndex < this.selectedItem || this.prevIndex === this.selectedItem) {\n var clsEff = this.animation.next.effect;\n animateObj = {\n name: ((clsEff === 'None') ? '' : ((clsEff !== 'SlideRightIn') ? clsEff : 'SlideRightIn')),\n duration: this.animation.next.duration,\n timingFunction: this.animation.next.easing\n };\n }\n animateObj.progress = function () {\n cnt.classList.add(CLS_PROGRESS);\n _this.setActiveBorder();\n };\n animateObj.end = function () {\n cnt.classList.remove(CLS_PROGRESS);\n newCnt.classList.add(CLS_ACTIVE);\n };\n if (!this.initRender && !isNOU(oldCnt)) {\n this.triggerPrevAnimation(oldCnt, prevIndex);\n }\n this.isPopup = false;\n if (animateObj.name === '') {\n newCnt.classList.add(CLS_ACTIVE);\n }\n else {\n new Animation(animateObj).animate(newCnt);\n }\n };\n Tab.prototype.keyPressed = function (trg) {\n var trgParent = closest(trg, '.' + CLS_HEADER + ' .' + CLS_TB_ITEM);\n var trgIndex = this.getEleIndex(trgParent);\n if (!isNOU(this.popEle) && trg.classList.contains('e-hor-nav')) {\n (this.popEle.classList.contains(CLS_POPUP_OPEN)) ? this.popObj.hide(this.hide) : this.popObj.show(this.show);\n }\n else if (trg.classList.contains('e-scroll-nav')) {\n trg.click();\n }\n else {\n if (!isNOU(trgParent) && trgParent.classList.contains(CLS_ACTIVE) === false) {\n this.select(trgIndex);\n if (!isNOU(this.popEle)) {\n this.popObj.hide(this.hide);\n }\n }\n }\n };\n Tab.prototype.getTabHeader = function () {\n var headers = [].slice.call(this.element.children).filter(function (e) { return e.classList.contains(CLS_HEADER); });\n if (headers.length > 0) {\n return headers[0];\n }\n else {\n var wrap = [].slice.call(this.element.children).filter(function (e) { return !e.classList.contains(CLS_BLA_TEM); })[0];\n if (!wrap) {\n return undefined;\n }\n return [].slice.call(wrap.children).filter(function (e) { return e.classList.contains(CLS_HEADER); })[0];\n }\n };\n Tab.prototype.getEleIndex = function (item) {\n return Array.prototype.indexOf.call(selectAll('.' + CLS_TB_ITEM, this.getTabHeader()), item);\n };\n Tab.prototype.extIndex = function (id) {\n return id.replace(CLS_ITEM + this.tabId + '_', '');\n };\n Tab.prototype.expTemplateContent = function () {\n var _this = this;\n this.templateEle.forEach(function (eleStr) {\n if (!isNOU(_this.element.querySelector(eleStr))) {\n document.body.appendChild(_this.element.querySelector(eleStr)).style.display = 'none';\n }\n });\n };\n Tab.prototype.templateCompile = function (ele, cnt, index) {\n var tempEle = this.createElement('div');\n this.compileElement(tempEle, cnt, 'content', index);\n if (tempEle.childNodes.length !== 0) {\n ele.appendChild(tempEle);\n }\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Tab.prototype.compileElement = function (ele, val, prop, index) {\n var templateFn;\n if (typeof val === 'string') {\n val = val.trim();\n ele.innerHTML = SanitizeHtmlHelper.sanitize(val);\n }\n else {\n templateFn = compile(val);\n }\n var templateFUN;\n if (!isNOU(templateFn)) {\n templateFUN = templateFn({}, this, prop);\n }\n if (!isNOU(templateFn) && templateFUN.length > 0) {\n [].slice.call(templateFUN).forEach(function (el) {\n ele.appendChild(el);\n });\n }\n };\n Tab.prototype.headerTextCompile = function (element, text, index) {\n this.compileElement(element, text, 'headerTemplate', index);\n };\n Tab.prototype.getContent = function (ele, cnt, callType, index) {\n var eleStr;\n if (typeof cnt === 'string' || isNOU(cnt.innerHTML)) {\n if (typeof cnt === 'string' && this.enableHtmlSanitizer) {\n cnt = SanitizeHtmlHelper.sanitize(cnt);\n }\n if (cnt[0] === '.' || cnt[0] === '#') {\n if (document.querySelectorAll(cnt).length) {\n var eleVal = document.querySelector(cnt);\n eleStr = eleVal.outerHTML.trim();\n if (callType === 'clone') {\n ele.appendChild(eleVal.cloneNode(true));\n }\n else {\n ele.appendChild(eleVal);\n eleVal.style.display = '';\n }\n }\n else {\n this.templateCompile(ele, cnt, index);\n }\n }\n else {\n this.templateCompile(ele, cnt, index);\n }\n }\n else {\n ele.appendChild(cnt);\n }\n if (!isNOU(eleStr)) {\n if (this.templateEle.indexOf(cnt.toString()) === -1) {\n this.templateEle.push(cnt.toString());\n }\n }\n };\n Tab.prototype.getTrgContent = function (cntEle, no) {\n var ele;\n if (this.element.classList.contains(CLS_NEST)) {\n ele = select('.' + CLS_NEST + '> .' + CLS_CONTENT + ' > #' + CLS_CONTENT + this.tabId + '_' + no, this.element);\n }\n else {\n ele = this.findEle(cntEle.children, CLS_CONTENT + this.tabId + '_' + no);\n }\n return ele;\n };\n Tab.prototype.findEle = function (items, key) {\n var ele;\n for (var i = 0; i < items.length; i++) {\n if (items[i].id === key) {\n ele = items[i];\n break;\n }\n }\n return ele;\n };\n Tab.prototype.isVertical = function () {\n var isVertical = (this.headerPlacement === 'Left' || this.headerPlacement === 'Right') ? true : false;\n this.scrCntClass = (isVertical) ? CLS_VSCRCNT : CLS_HSCRCNT;\n return isVertical;\n };\n Tab.prototype.addVerticalClass = function () {\n if (this.isVertical()) {\n var tbPos = (this.headerPlacement === 'Left') ? CLS_VLEFT : CLS_VRIGHT;\n addClass([this.hdrEle], [CLS_VERTICAL, tbPos]);\n if (!this.element.classList.contains(CLS_NEST)) {\n addClass([this.element], [CLS_VTAB, tbPos]);\n }\n else {\n addClass([this.hdrEle], [CLS_VTAB, tbPos]);\n }\n }\n if (this.headerPlacement === 'Bottom') {\n addClass([this.hdrEle], [CLS_HBOTTOM]);\n }\n };\n Tab.prototype.updatePopAnimationConfig = function () {\n this.show = { name: (this.isVertical() ? 'FadeIn' : 'SlideDown'), duration: 100 };\n this.hide = { name: (this.isVertical() ? 'FadeOut' : 'SlideUp'), duration: 100 };\n };\n Tab.prototype.changeOrientation = function (place) {\n this.setOrientation(place, this.hdrEle);\n var isVertical = this.hdrEle.classList.contains(CLS_VERTICAL) ? true : false;\n removeClass([this.element], [CLS_VTAB]);\n removeClass([this.hdrEle], [CLS_VERTICAL, CLS_VLEFT, CLS_VRIGHT]);\n if (isVertical !== this.isVertical()) {\n this.changeToolbarOrientation();\n }\n this.addVerticalClass();\n this.updateOrientationAttribute();\n this.setActiveBorder();\n this.focusItem();\n };\n Tab.prototype.focusItem = function () {\n var curActItem = select(' #' + CLS_ITEM + this.tabId + '_' + this.selectedItem, this.hdrEle);\n if (!isNOU(curActItem)) {\n curActItem.firstElementChild.focus();\n }\n };\n Tab.prototype.serverChangeOrientation = function (newProp, oldProp) {\n this.setOrientation(newProp, this.hdrEle);\n removeClass([this.element], [CLS_VTAB]);\n var newValue = newProp === 'Left' || newProp === 'Right';\n var oldValue = oldProp === 'Left' || oldProp === 'Right';\n if (newValue !== oldValue) {\n this.changeToolbarOrientation();\n }\n if (this.isVertical()) {\n addClass([this.element], [CLS_VTAB]);\n }\n this.updateOrientationAttribute();\n this.setActiveBorder();\n this.focusItem();\n };\n Tab.prototype.changeToolbarOrientation = function () {\n this.tbObj.setProperties({ height: (this.isVertical() ? '100%' : 'auto'), width: (this.isVertical() ? 'auto' : '100%') }, true);\n this.tbObj.changeOrientation();\n this.updatePopAnimationConfig();\n };\n Tab.prototype.setOrientation = function (place, ele) {\n var headerPos = Array.prototype.indexOf.call(this.element.children, ele);\n var contentPos = Array.prototype.indexOf.call(this.element.children, this.element.querySelector('.' + CLS_CONTENT));\n if (place === 'Bottom' && (contentPos > headerPos)) {\n this.element.appendChild(ele);\n }\n else {\n removeClass([ele], [CLS_HBOTTOM]);\n this.element.insertBefore(ele, select('.' + CLS_CONTENT, this.element));\n }\n };\n Tab.prototype.setCssClass = function (ele, cls, val) {\n if (cls === '') {\n return;\n }\n var list = cls.split(' ');\n for (var i = 0; i < list.length; i++) {\n if (val) {\n ele.classList.add(list[i]);\n }\n else {\n ele.classList.remove(list[i]);\n }\n }\n };\n Tab.prototype.setContentHeight = function (val) {\n if (this.element.classList.contains(CLS_FILL)) {\n removeClass([this.element], [CLS_FILL]);\n }\n if (isNOU(this.cntEle)) {\n return;\n }\n var hdrEle = this.getTabHeader();\n if (this.heightAdjustMode === 'None') {\n if (this.height === 'auto') {\n return;\n }\n else {\n if (!this.isVertical()) {\n setStyle(this.cntEle, { 'height': (this.element.offsetHeight - hdrEle.offsetHeight) + 'px' });\n }\n }\n }\n else if (this.heightAdjustMode === 'Fill') {\n addClass([this.element], [CLS_FILL]);\n setStyle(this.element, { 'height': '100%' });\n setStyle(this.cntEle, { 'height': (this.element.offsetHeight - hdrEle.offsetHeight) + 'px' });\n }\n else if (this.heightAdjustMode === 'Auto') {\n if (this.isTemplate === true) {\n var cnt = selectAll('.' + CLS_CONTENT + ' > .' + CLS_ITEM, this.element);\n for (var i = 0; i < cnt.length; i++) {\n cnt[i].setAttribute('style', 'display:block; visibility: visible');\n this.maxHeight = Math.max(this.maxHeight, this.getHeight(cnt[i]));\n cnt[i].style.removeProperty('display');\n cnt[i].style.removeProperty('visibility');\n }\n }\n else {\n this.cntEle = select('.' + CLS_CONTENT, this.element);\n if (val === true) {\n this.cntEle.appendChild(this.createElement('div', {\n id: (CLS_CONTENT + this.tabId + '_' + 0), className: CLS_ITEM + ' ' + CLS_ACTIVE,\n attrs: { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM + this.tabId + '_' + 0 }\n }));\n }\n var ele = this.cntEle.children.item(0);\n for (var i = 0; i < this.items.length; i++) {\n this.getContent(ele, this.items[i].content, 'clone', i);\n this.maxHeight = Math.max(this.maxHeight, this.getHeight(ele));\n while (ele.firstChild) {\n ele.removeChild(ele.firstChild);\n }\n }\n this.clearTemplate(['content']);\n this.templateEle = [];\n this.getContent(ele, this.items[0].content, 'render', 0);\n ele.classList.remove(CLS_ACTIVE);\n }\n setStyle(this.cntEle, { 'height': this.maxHeight + 'px' });\n }\n else {\n setStyle(this.cntEle, { 'height': 'auto' });\n }\n };\n Tab.prototype.getHeight = function (ele) {\n var cs = window.getComputedStyle(ele);\n return ele.offsetHeight + parseFloat(cs.getPropertyValue('padding-top')) + parseFloat(cs.getPropertyValue('padding-bottom')) +\n parseFloat(cs.getPropertyValue('margin-top')) + parseFloat(cs.getPropertyValue('margin-bottom'));\n };\n Tab.prototype.setActiveBorder = function () {\n var bar;\n var scrollCnt;\n var trgHdrEle = this.getTabHeader();\n var trg = select('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, trgHdrEle);\n if (trg === null) {\n return;\n }\n if (this.isServerRendered && trg.classList.contains(CLS_TB_POPUP)) {\n this.popupHandler(trg);\n }\n var root = closest(trg, '.' + CLS_TAB);\n if (this.element !== root) {\n return;\n }\n this.tbItems = select('.' + CLS_TB_ITEMS, trgHdrEle);\n bar = select('.' + CLS_INDICATOR, trgHdrEle);\n scrollCnt = select('.' + CLS_TB_ITEMS + ' .' + this.scrCntClass, trgHdrEle);\n if (this.isVertical()) {\n setStyle(bar, { 'left': '', 'right': '' });\n var tbHeight = (isNOU(scrollCnt)) ? this.tbItems.offsetHeight : scrollCnt.offsetHeight;\n if (tbHeight !== 0) {\n setStyle(bar, { 'top': trg.offsetTop + 'px', 'height': trg.offsetHeight + 'px' });\n }\n else {\n setStyle(bar, { 'top': 0, 'height': 0 });\n }\n }\n else {\n setStyle(bar, { 'top': '', 'height': '' });\n var tbWidth = (isNOU(scrollCnt)) ? this.tbItems.offsetWidth : scrollCnt.offsetWidth;\n if (tbWidth !== 0) {\n setStyle(bar, { 'left': trg.offsetLeft + 'px', 'right': tbWidth - (trg.offsetLeft + trg.offsetWidth) + 'px' });\n }\n else {\n setStyle(bar, { 'left': 'auto', 'right': 'auto' });\n }\n }\n if (!isNOU(this.bdrLine)) {\n this.bdrLine.classList.remove(CLS_HIDDEN);\n }\n };\n Tab.prototype.setActive = function (value, skipDataBind) {\n if (skipDataBind === void 0) { skipDataBind = false; }\n this.tbItem = selectAll('.' + CLS_TB_ITEM, this.getTabHeader());\n var trg = this.tbItem[value];\n if (this.isServerRendered && trg) {\n value = parseInt(trg.getAttribute('data-index'), 10);\n }\n if (value < 0 || isNaN(value) || this.tbItem.length === 0) {\n return;\n }\n if (value >= 0 && !skipDataBind) {\n this.allowServerDataBinding = false;\n this.setProperties({ selectedItem: value }, true);\n this.allowServerDataBinding = true;\n if (!this.initRender) {\n this.serverDataBind();\n }\n }\n if (trg.classList.contains(CLS_ACTIVE)) {\n this.setActiveBorder();\n return;\n }\n if (!this.isTemplate) {\n var prev = this.tbItem[this.prevIndex];\n if (!isNOU(prev)) {\n prev.removeAttribute('aria-controls');\n }\n attributes(trg, { 'aria-controls': CLS_CONTENT + this.tabId + '_' + value });\n }\n var id = trg.id;\n this.removeActiveClass();\n trg.classList.add(CLS_ACTIVE);\n trg.setAttribute('aria-selected', 'true');\n var no = Number(this.extIndex(id));\n if (isNOU(this.prevActiveEle)) {\n this.prevActiveEle = CLS_CONTENT + this.tabId + '_' + no;\n }\n attributes(this.element, { 'aria-activedescendant': id });\n if (this.isTemplate) {\n if (select('.' + CLS_CONTENT, this.element).children.length > 0) {\n var trg_1 = this.findEle(select('.' + CLS_CONTENT, this.element).children, CLS_CONTENT + this.tabId + '_' + no);\n if (!isNOU(trg_1)) {\n trg_1.classList.add(CLS_ACTIVE);\n }\n this.triggerAnimation(id, this.enableAnimation);\n }\n }\n else if (!this.isServerRendered || (this.isServerRendered && this.loadOn === 'Init')) {\n this.cntEle = select('.' + CLS_TAB + ' > .' + CLS_CONTENT, this.element);\n var item = this.getTrgContent(this.cntEle, this.extIndex(id));\n if (isNOU(item)) {\n this.cntEle.appendChild(this.createElement('div', {\n id: CLS_CONTENT + this.tabId + '_' + this.extIndex(id), className: CLS_ITEM + ' ' + CLS_ACTIVE,\n attrs: { role: 'tabpanel', 'aria-labelledby': CLS_ITEM + this.tabId + '_' + this.extIndex(id) }\n }));\n var eleTrg = this.getTrgContent(this.cntEle, this.extIndex(id));\n var itemIndex = Array.prototype.indexOf.call(this.itemIndexArray, id);\n this.getContent(eleTrg, this.items[itemIndex].content, 'render', itemIndex);\n }\n else {\n item.classList.add(CLS_ACTIVE);\n }\n this.triggerAnimation(id, this.enableAnimation);\n }\n this.setActiveBorder();\n this.refreshItemVisibility(trg);\n if (!this.initRender && !skipDataBind) {\n trg.firstElementChild.focus();\n var eventArg = {\n previousItem: this.prevItem,\n previousIndex: this.prevIndex,\n selectedItem: trg,\n selectedIndex: value,\n selectedContent: select('#' + CLS_CONTENT + this.tabId + '_' + this.selectingID, this.content),\n isSwiped: this.isSwipeed\n };\n this.trigger('selected', eventArg);\n }\n };\n Tab.prototype.contentReady = function () {\n var id = this.setActiveContent();\n this.triggerAnimation(id, this.enableAnimation);\n };\n Tab.prototype.setItems = function (items) {\n this.isReplace = true;\n this.tbItems = select('.' + CLS_TB_ITEMS, this.getTabHeader());\n this.tbObj.items = this.parseObject(items, 0);\n this.tbObj.dataBind();\n this.isReplace = false;\n };\n Tab.prototype.setRTL = function (value) {\n this.tbObj.enableRtl = value;\n this.tbObj.dataBind();\n this.setCssClass(this.element, CLS_RTL, value);\n this.refreshActiveBorder();\n };\n Tab.prototype.refreshActiveBorder = function () {\n if (!isNOU(this.bdrLine)) {\n this.bdrLine.classList.add(CLS_HIDDEN);\n }\n this.setActiveBorder();\n };\n Tab.prototype.showPopup = function (config) {\n var tbPop = select('.e-popup.e-toolbar-pop', this.hdrEle);\n if (tbPop.classList.contains('e-popup-close')) {\n var tbPopObj = (tbPop && tbPop.ej2_instances[0]);\n tbPopObj.position.X = (this.headerPlacement === 'Left') ? 'left' : 'right';\n tbPopObj.dataBind();\n tbPopObj.show(config);\n }\n };\n Tab.prototype.wireEvents = function () {\n window.addEventListener('resize', this.resizeContext);\n EventHandler.add(this.element, 'mouseover', this.hoverHandler, this);\n EventHandler.add(this.element, 'keydown', this.spaceKeyDown, this);\n if (!isNOU(this.cntEle)) {\n this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });\n }\n this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });\n this.tabKeyModule = new KeyboardEvents(this.element, {\n keyAction: this.keyHandler.bind(this),\n keyConfigs: { openPopup: 'shift+f10', tab: 'tab', shiftTab: 'shift+tab' },\n eventName: 'keydown'\n });\n };\n Tab.prototype.unWireEvents = function () {\n this.keyModule.destroy();\n this.tabKeyModule.destroy();\n if (!isNOU(this.cntEle)) {\n this.touchModule.destroy();\n }\n window.removeEventListener('resize', this.resizeContext);\n EventHandler.remove(this.element, 'mouseover', this.hoverHandler);\n EventHandler.remove(this.element, 'keydown', this.spaceKeyDown);\n this.element.classList.remove(CLS_RTL);\n this.element.classList.remove(CLS_FOCUS);\n };\n Tab.prototype.clickHandler = function (args) {\n this.element.classList.remove(CLS_FOCUS);\n var trg = args.originalEvent.target;\n var trgParent = closest(trg, '.' + CLS_TB_ITEM);\n var trgIndex = this.getEleIndex(trgParent);\n if (trg.classList.contains(CLS_ICON_CLOSE)) {\n this.removeTab(trgIndex);\n }\n else if (this.isVertical() && closest(trg, '.' + CLS_HOR_NAV)) {\n this.showPopup(this.show);\n }\n else {\n this.isPopup = false;\n if (this.isServerRendered && !isNOU(trgParent)) {\n if (parseInt(trgParent.getAttribute('data-index'), 10) !== this.selectedItem) {\n this.select(trgIndex);\n }\n }\n else if (!isNOU(trgParent) && (trgIndex !== this.selectedItem || trgIndex !== this.prevIndex)) {\n this.select(trgIndex, args.originalEvent);\n }\n }\n };\n Tab.prototype.swipeHandler = function (e) {\n if (e.velocity < 3 && isNOU(e.originalEvent.changedTouches)) {\n return;\n }\n if (e.originalEvent) {\n e.originalEvent.stopPropagation();\n }\n this.isSwipeed = true;\n if (e.swipeDirection === 'Right' && this.selectedItem !== 0) {\n for (var k = this.selectedItem - 1; k >= 0; k--) {\n if (!this.tbItem[k].classList.contains(CLS_HIDDEN)) {\n this.select(k);\n break;\n }\n }\n }\n else if (e.swipeDirection === 'Left' && (this.selectedItem !== selectAll('.' + CLS_TB_ITEM, this.element).length - 1)) {\n for (var i = this.selectedItem + 1; i < this.tbItem.length; i++) {\n if (!this.tbItem[i].classList.contains(CLS_HIDDEN)) {\n this.select(i);\n break;\n }\n }\n }\n this.isSwipeed = false;\n };\n Tab.prototype.spaceKeyDown = function (e) {\n if ((e.keyCode === 32 && e.which === 32) || (e.keyCode === 35 && e.which === 35)) {\n var clstHead = closest(e.target, '.' + CLS_HEADER);\n if (!isNOU(clstHead)) {\n e.preventDefault();\n }\n }\n };\n Tab.prototype.keyHandler = function (e) {\n if (this.element.classList.contains(CLS_DISABLE)) {\n return;\n }\n this.element.classList.add(CLS_FOCUS);\n var trg = e.target;\n var tabHeader = this.getTabHeader();\n var actEle = select('.' + CLS_ACTIVE, tabHeader);\n this.popEle = select('.' + CLS_TB_POP, tabHeader);\n if (!isNOU(this.popEle)) {\n this.popObj = this.popEle.ej2_instances[0];\n }\n switch (e.action) {\n case 'space':\n case 'enter':\n if (trg.parentElement.classList.contains(CLS_DISABLE)) {\n return;\n }\n if (e.action === 'enter' && trg.classList.contains('e-hor-nav')) {\n this.showPopup(this.show);\n break;\n }\n this.keyPressed(trg);\n break;\n case 'tab':\n case 'shiftTab':\n if (trg.classList.contains(CLS_WRAP)\n && closest(trg, '.' + CLS_TB_ITEM).classList.contains(CLS_ACTIVE) === false) {\n trg.setAttribute('tabindex', '-1');\n }\n if (this.popObj && isVisible(this.popObj.element)) {\n this.popObj.hide(this.hide);\n }\n actEle.children.item(0).setAttribute('tabindex', '0');\n break;\n case 'moveLeft':\n case 'moveRight':\n var item = closest(document.activeElement, '.' + CLS_TB_ITEM);\n if (!isNOU(item)) {\n this.refreshItemVisibility(item);\n }\n break;\n case 'openPopup':\n e.preventDefault();\n if (!isNOU(this.popEle) && this.popEle.classList.contains(CLS_POPUP_CLOSE)) {\n this.popObj.show(this.show);\n }\n break;\n case 'delete':\n var trgParent = closest(trg, '.' + CLS_TB_ITEM);\n if (this.showCloseButton === true && !isNOU(trgParent)) {\n var nxtSib = trgParent.nextSibling;\n if (!isNOU(nxtSib) && nxtSib.classList.contains(CLS_TB_ITEM)) {\n nxtSib.firstElementChild.focus();\n }\n this.removeTab(this.getEleIndex(trgParent));\n }\n this.setActiveBorder();\n break;\n }\n };\n Tab.prototype.refreshActElePosition = function () {\n var activeEle = select('.' + CLS_TB_ITEM + '.' + CLS_TB_POPUP + '.' + CLS_ACTIVE, this.element);\n if (!isNOU(activeEle)) {\n this.select(this.getEleIndex(activeEle));\n }\n this.refreshActiveBorder();\n };\n Tab.prototype.refreshItemVisibility = function (target) {\n var scrCnt = select('.' + this.scrCntClass, this.tbItems);\n if (!this.isVertical() && !isNOU(scrCnt)) {\n var scrBar = select('.e-hscroll-bar', this.tbItems);\n var scrStart = scrBar.scrollLeft;\n var scrEnd = scrStart + scrBar.offsetWidth;\n var eleStart = target.offsetLeft;\n var eleWidth = target.offsetWidth;\n var eleEnd = target.offsetLeft + target.offsetWidth;\n if ((scrStart < eleStart) && (scrEnd < eleEnd)) {\n var eleViewRange = scrEnd - eleStart;\n scrBar.scrollLeft = scrStart + (eleWidth - eleViewRange);\n }\n else {\n if ((scrStart > eleStart) && (scrEnd > eleEnd)) {\n var eleViewRange = eleEnd - scrStart;\n scrBar.scrollLeft = scrStart - (eleWidth - eleViewRange);\n }\n }\n }\n else {\n return;\n }\n };\n Tab.prototype.hoverHandler = function (e) {\n var trg = e.target;\n if (!isNOU(trg.classList) && trg.classList.contains(CLS_ICON_CLOSE)) {\n trg.setAttribute('title', new L10n('tab', { closeButtonTitle: this.title }, this.locale).getConstant('closeButtonTitle'));\n }\n };\n Tab.prototype.evalOnPropertyChangeItems = function (newProp, oldProp) {\n if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {\n var changedProp = Object.keys(newProp.items);\n for (var i = 0; i < changedProp.length; i++) {\n var index = parseInt(Object.keys(newProp.items)[i], 10);\n var property = Object.keys(newProp.items[index])[0];\n var oldVal = Object(oldProp.items[index])[property];\n var newVal = Object(newProp.items[index])[property];\n var hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM + this.tabId + '_' + index, this.element);\n var cntItem = select('.' + CLS_CONTENT + ' #' + CLS_CONTENT + this.tabId + '_' + index, this.element);\n if (property === 'header' || property === 'headerTemplate') {\n var icon = (isNOU(this.items[index].header) ||\n isNOU(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;\n var textVal = this.items[index].headerTemplate || this.items[index].header.text;\n if ((textVal === '') && (icon === '')) {\n this.removeTab(index);\n }\n else {\n var arr = [];\n arr.push(this.items[index]);\n this.items.splice(index, 1);\n this.itemIndexArray.splice(index, 1);\n this.tbObj.items.splice(index, 1);\n var isHiddenEle = hdrItem.classList.contains(CLS_HIDDEN);\n detach(hdrItem);\n this.isReplace = true;\n this.addTab(arr, index);\n if (isHiddenEle) {\n this.hideTab(index);\n }\n this.isReplace = false;\n }\n }\n if (property === 'content' && !isNOU(cntItem)) {\n var strVal = typeof newVal === 'string' || isNOU(newVal.innerHTML);\n if (strVal && (newVal[0] === '.' || newVal[0] === '#') && newVal.length) {\n var eleVal = document.querySelector(newVal);\n cntItem.appendChild(eleVal);\n eleVal.style.display = '';\n }\n else if (newVal === '' && oldVal[0] === '#') {\n document.body.appendChild(this.element.querySelector(oldVal)).style.display = 'none';\n cntItem.innerHTML = newVal;\n }\n else if (typeof newVal !== 'function') {\n cntItem.innerHTML = newVal;\n }\n }\n if (property === 'cssClass') {\n if (!isNOU(hdrItem)) {\n hdrItem.classList.remove(oldVal);\n hdrItem.classList.add(newVal);\n }\n if (!isNOU(cntItem)) {\n cntItem.classList.remove(oldVal);\n cntItem.classList.add(newVal);\n }\n }\n if (property === 'disabled') {\n this.enableTab(index, ((newVal === true) ? false : true));\n }\n if (property === 'visible') {\n this.hideTab(index, ((newVal === true) ? false : true));\n }\n }\n }\n else {\n this.lastIndex = 0;\n if (isNOU(this.tbObj)) {\n this.reRenderItems();\n }\n else {\n // tslint:disable-next-line:no-any\n if (this.isRect) {\n this.clearTemplate();\n }\n this.setItems(newProp.items);\n if (this.templateEle.length > 0) {\n this.expTemplateContent();\n }\n this.templateEle = [];\n var selectElement = select('.' + CLS_TAB + ' > .' + CLS_CONTENT, this.element);\n while (selectElement.firstElementChild) {\n detach(selectElement.firstElementChild);\n }\n this.select(this.selectedItem);\n }\n }\n };\n /**\n * Enables or disables the specified Tab item. On passing value as `false`, the item will be disabled.\n * @param {number} index - Index value of target Tab item.\n * @param {boolean} value - Boolean value that determines whether the command should be enabled or disabled.\n * By default, isEnable is true.\n * @returns void.\n */\n Tab.prototype.enableTab = function (index, value) {\n var tbItems = selectAll('.' + CLS_TB_ITEM, this.element)[index];\n if (isNOU(tbItems)) {\n return;\n }\n if (value === true) {\n tbItems.classList.remove(CLS_DISABLE, CLS_OVERLAY);\n tbItems.firstElementChild.setAttribute('tabindex', '-1');\n }\n else {\n tbItems.classList.add(CLS_DISABLE, CLS_OVERLAY);\n tbItems.firstElementChild.removeAttribute('tabindex');\n if (tbItems.classList.contains(CLS_ACTIVE)) {\n this.select(index + 1);\n }\n }\n if (!isNOU(this.items[index])) {\n this.items[index].disabled = !value;\n this.dataBind();\n }\n tbItems.setAttribute('aria-disabled', (value === true) ? 'false' : 'true');\n };\n /**\n * Adds new items to the Tab that accepts an array as Tab items.\n * @param {TabItemsModel[]} items - An array of item that is added to the Tab.\n * @param {number} index - Number value that determines where the items to be added. By default, index is 0.\n * @returns void.\n */\n Tab.prototype.addTab = function (items, index) {\n var _this = this;\n var addArgs = { addedItems: items, cancel: false };\n if (!this.isReplace) {\n this.trigger('adding', addArgs, function (tabAddingArgs) {\n if (!tabAddingArgs.cancel) {\n _this.addingTabContent(items, index);\n }\n });\n }\n else {\n this.addingTabContent(items, index);\n }\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Tab.prototype.addingTabContent = function (items, index) {\n var _this = this;\n var lastEleIndex = 0;\n this.hdrEle = select('.' + CLS_HEADER, this.element);\n if (isNOU(this.hdrEle)) {\n this.items = items;\n this.reRenderItems();\n }\n else {\n var itemsCount = selectAll('.' + CLS_TB_ITEM, this.element).length;\n if (itemsCount !== 0) {\n lastEleIndex = this.lastIndex + 1;\n }\n if (isNOU(index)) {\n index = itemsCount - 1;\n }\n if (itemsCount < index || index < 0 || isNaN(index)) {\n return;\n }\n if (itemsCount === 0 && !isNOU(this.hdrEle)) {\n this.hdrEle.style.display = '';\n }\n if (!isNOU(this.bdrLine)) {\n this.bdrLine.classList.add(CLS_HIDDEN);\n }\n this.tbItems = select('.' + CLS_TB_ITEMS, this.getTabHeader());\n this.isAdd = true;\n var tabItems = this.parseObject(items, index);\n this.isAdd = false;\n var i_1 = 0;\n var textValue_1;\n items.forEach(function (item, place) {\n textValue_1 = item.headerTemplate || item.header.text;\n if (!(isNOU(item.headerTemplate || item.header) ||\n isNOU(textValue_1) || (textValue_1.length === 0) && isNOU(item.header.iconCss))) {\n _this.items.splice((index + i_1), 0, item);\n i_1++;\n }\n if (_this.isTemplate && !isNOU(item.header) && !isNOU(item.header.text)) {\n var no = lastEleIndex + place;\n var ele = _this.createElement('div', {\n id: CLS_CONTENT + _this.tabId + '_' + no, className: CLS_ITEM,\n attrs: { role: 'tabpanel', 'aria-labelledby': CLS_ITEM + '_' + no }\n });\n _this.cntEle.insertBefore(ele, _this.cntEle.children[(index + place)]);\n var eleTrg = _this.getTrgContent(_this.cntEle, no.toString());\n _this.getContent(eleTrg, item.content, 'render', index);\n }\n });\n this.tbObj.addItems(tabItems, index);\n if (!this.isReplace) {\n this.trigger('added', { addedItems: items });\n }\n if (this.selectedItem === index) {\n this.select(index);\n }\n else {\n this.setActiveBorder();\n }\n }\n };\n /**\n * Removes the items in the Tab from the specified index.\n * @param {number} index - Index of target item that is going to be removed.\n * @returns void.\n */\n Tab.prototype.removeTab = function (index) {\n var _this = this;\n var trg = selectAll('.' + CLS_TB_ITEM, this.element)[index];\n if (isNOU(trg)) {\n return;\n }\n var removeArgs = { removedItem: trg, removedIndex: index, cancel: false };\n this.trigger('removing', removeArgs, function (tabRemovingArgs) {\n if (!tabRemovingArgs.cancel) {\n _this.tbObj.removeItems(index);\n _this.items.splice(index, 1);\n _this.itemIndexArray.splice(index, 1);\n _this.refreshActiveBorder();\n var cntTrg = select('#' + CLS_CONTENT + _this.tabId + '_' + _this.extIndex(trg.id), select('.' + CLS_CONTENT, _this.element));\n if (!isNOU(cntTrg)) {\n detach(cntTrg);\n }\n _this.trigger('removed', tabRemovingArgs);\n if (trg.classList.contains(CLS_ACTIVE)) {\n // tslint:disable-next-line:max-line-length\n index = (index > selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_TB_POPUP + ')', _this.element).length - 1) ? index - 1 : index;\n _this.enableAnimation = false;\n _this.selectedItem = index;\n _this.select(index);\n }\n if (selectAll('.' + CLS_TB_ITEM, _this.element).length === 0) {\n _this.hdrEle.style.display = 'none';\n }\n _this.enableAnimation = true;\n }\n });\n };\n /**\n * Shows or hides the Tab that is in the specified index.\n * @param {number} index - Index value of target item.\n * @param {boolean} value - Based on this Boolean value, item will be hide (false) or show (true). By default, value is true.\n * @returns void.\n */\n Tab.prototype.hideTab = function (index, value) {\n var items;\n var item = selectAll('.' + CLS_TB_ITEM, this.element)[index];\n if (isNOU(item)) {\n return;\n }\n if (isNOU(value)) {\n value = true;\n }\n this.bdrLine.classList.add(CLS_HIDDEN);\n if (value === true) {\n item.classList.add(CLS_HIDDEN);\n items = selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_HIDDEN + ')', this.tbItems);\n if (items.length !== 0 && item.classList.contains(CLS_ACTIVE)) {\n if (index !== 0) {\n for (var i = index - 1; i >= 0; i--) {\n if (!this.tbItem[i].classList.contains(CLS_HIDDEN)) {\n this.select(i);\n break;\n }\n else if (i === 0) {\n for (var k = index + 1; k < this.tbItem.length; k++) {\n if (!this.tbItem[k].classList.contains(CLS_HIDDEN)) {\n this.select(k);\n break;\n }\n }\n }\n }\n }\n else {\n for (var k = index + 1; k < this.tbItem.length; k++) {\n if (!this.tbItem[k].classList.contains(CLS_HIDDEN)) {\n this.select(k);\n break;\n }\n }\n }\n }\n else if (items.length === 0) {\n this.element.classList.add(CLS_HIDDEN);\n }\n }\n else {\n this.element.classList.remove(CLS_HIDDEN);\n items = selectAll('.' + CLS_TB_ITEM + ':not(.' + CLS_HIDDEN + ')', this.tbItems);\n item.classList.remove(CLS_HIDDEN);\n if (items.length === 0) {\n this.select(index);\n }\n }\n this.setActiveBorder();\n item.setAttribute('aria-hidden', '' + value);\n if (!this.isServerRendered && this.overflowMode === 'Popup' && this.tbObj) {\n this.tbObj.refreshOverflow();\n }\n };\n /**\n * Specifies the index or HTMLElement to select an item from the Tab.\n * @param {number | HTMLElement} args - Index or DOM element is used for selecting an item from the Tab.\n * @returns void.\n */\n Tab.prototype.select = function (args, event) {\n var _this = this;\n var tabHeader = this.getTabHeader();\n this.tbItems = select('.' + CLS_TB_ITEMS, tabHeader);\n this.tbItem = selectAll('.' + CLS_TB_ITEM, tabHeader);\n this.content = select('.' + CLS_CONTENT, this.element);\n this.prevItem = this.tbItem[this.prevIndex];\n if (isNOU(this.selectedItem) || (this.selectedItem < 0) || (this.tbItem.length <= this.selectedItem) || isNaN(this.selectedItem)) {\n this.selectedItem = 0;\n }\n else {\n this.selectedID = this.extIndex(this.tbItem[this.selectedItem].id);\n }\n var trg = this.tbItem[args];\n if (isNOU(trg)) {\n this.selectedID = '0';\n }\n else {\n this.selectingID = this.extIndex(trg.id);\n }\n if (!isNOU(this.prevItem) && !this.prevItem.classList.contains(CLS_DISABLE)) {\n this.prevItem.children.item(0).setAttribute('tabindex', '-1');\n }\n var eventArg = {\n event: event,\n previousItem: this.prevItem,\n previousIndex: this.prevIndex,\n selectedItem: this.tbItem[this.selectedItem],\n selectedIndex: this.selectedItem,\n selectedContent: !isNOU(this.content) ?\n select('#' + CLS_CONTENT + this.tabId + '_' + this.selectedID, this.content) : null,\n selectingItem: trg,\n selectingIndex: args,\n selectingContent: !isNOU(this.content) ?\n select('#' + CLS_CONTENT + this.tabId + '_' + this.selectingID, this.content) : null,\n isSwiped: this.isSwipeed,\n cancel: false\n };\n if (!this.initRender) {\n this.trigger('selecting', eventArg, function (selectArgs) {\n if (!selectArgs.cancel) {\n _this.selectingContent(args);\n }\n });\n }\n else {\n this.selectingContent(args);\n }\n };\n Tab.prototype.selectingContent = function (args) {\n if (typeof args === 'number') {\n if (!isNOU(this.tbItem[args]) && (this.tbItem[args].classList.contains(CLS_DISABLE) ||\n this.tbItem[args].classList.contains(CLS_HIDDEN))) {\n for (var i = args + 1; i < this.items.length; i++) {\n if (this.items[i].disabled === false && this.items[i].visible === true) {\n args = i;\n break;\n }\n else {\n args = 0;\n }\n }\n }\n if (this.tbItem.length > args && args >= 0 && !isNaN(args)) {\n this.prevIndex = this.selectedItem;\n if (this.tbItem[args].classList.contains(CLS_TB_POPUP)) {\n this.setActive(this.popupHandler(this.tbItem[args]));\n }\n else {\n this.setActive(args);\n }\n }\n else {\n this.setActive(0);\n }\n }\n else if (args instanceof (HTMLElement)) {\n this.setActive(this.getEleIndex(args));\n }\n };\n /**\n * Specifies the value to disable/enable the Tab component.\n * When set to `true`, the component will be disabled.\n * @param {boolean} value - Based on this Boolean value, Tab will be enabled (false) or disabled (true).\n * @returns void.\n */\n Tab.prototype.disable = function (value) {\n this.setCssClass(this.element, CLS_DISABLE, value);\n this.element.setAttribute('aria-disabled', '' + value);\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @returns string\n */\n Tab.prototype.getPersistData = function () {\n return this.addOnPersist(['selectedItem', 'actEleId']);\n };\n /**\n * Returns the current module name.\n * @returns string\n * @private\n */\n Tab.prototype.getModuleName = function () {\n return 'tab';\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of the property that changed.\n * @param {TabModel} newProp\n * @param {TabModel} oldProp\n * @returns void\n * @private\n */\n Tab.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n setStyle(this.element, { width: formatUnit(newProp.width) });\n break;\n case 'height':\n setStyle(this.element, { height: formatUnit(newProp.height) });\n if (!this.isServerRendered) {\n this.setContentHeight(false);\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass !== '') {\n this.setCssClass(this.element, oldProp.cssClass, false);\n this.setCssClass(this.element, newProp.cssClass, true);\n }\n else {\n this.setCssClass(this.element, newProp.cssClass, true);\n }\n break;\n case 'items':\n if (!this.isServerRendered) {\n this.evalOnPropertyChangeItems(newProp, oldProp);\n }\n break;\n case 'showCloseButton':\n this.setCloseButton(newProp.showCloseButton);\n break;\n case 'selectedItem':\n if (!this.isServerRendered) {\n this.selectedItem = oldProp.selectedItem;\n this.select(newProp.selectedItem);\n }\n break;\n case 'headerPlacement':\n if (this.isServerRendered) {\n this.serverChangeOrientation(newProp.headerPlacement, oldProp.headerPlacement);\n }\n else {\n this.changeOrientation(newProp.headerPlacement);\n }\n break;\n case 'enableRtl':\n this.setRTL(newProp.enableRtl);\n break;\n case 'overflowMode':\n this.tbObj.overflowMode = newProp.overflowMode;\n this.tbObj.dataBind();\n this.refreshActElePosition();\n break;\n case 'heightAdjustMode':\n if (!this.isServerRendered) {\n this.setContentHeight(false);\n this.select(this.selectedItem);\n }\n break;\n case 'scrollStep':\n if (this.tbObj) {\n this.tbObj.scrollStep = this.scrollStep;\n }\n break;\n }\n }\n };\n Tab.prototype.refreshActiveTab = function () {\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.clearTemplate();\n }\n if (!this.isTemplate) {\n if (this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE)) {\n detach(this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE).children[0]);\n detach(this.element.querySelector('.' + CLS_CONTENT).querySelector('.' + CLS_ACTIVE).children[0]);\n var item = this.items[this.selectedItem];\n var txtWrap = void 0;\n var pos = (isNOU(item.header) || isNOU(item.header.iconPosition)) ? '' : item.header.iconPosition;\n var css = (isNOU(item.header) || isNOU(item.header.iconCss)) ? '' : item.header.iconCss;\n var text = item.headerTemplate || item.header.text;\n txtWrap = this.createElement('div', { className: CLS_TEXT, attrs: { 'role': 'presentation' } });\n if (!isNOU(text.tagName)) {\n txtWrap.appendChild(text);\n }\n else {\n this.headerTextCompile(txtWrap, text, this.selectedItem);\n }\n var tEle = void 0;\n var icon = this.createElement('span', {\n className: CLS_ICONS + ' ' + CLS_TAB_ICON + ' ' + CLS_ICON + '-' + pos + ' ' + css\n });\n var tConts = this.createElement('div', { className: CLS_TEXT_WRAP });\n tConts.appendChild(txtWrap);\n if ((text !== '' && text !== undefined) && css !== '') {\n if ((pos === 'left' || pos === 'top')) {\n tConts.insertBefore(icon, tConts.firstElementChild);\n }\n else {\n tConts.appendChild(icon);\n }\n tEle = txtWrap;\n this.isIconAlone = false;\n }\n else {\n tEle = ((css === '') ? txtWrap : icon);\n if (tEle === icon) {\n detach(txtWrap);\n tConts.appendChild(icon);\n this.isIconAlone = true;\n }\n }\n var wrapAtt = (item.disabled) ? {} : { tabIndex: '-1' };\n tConts.appendChild(this.btnCls.cloneNode(true));\n var wraper = this.createElement('div', { className: CLS_WRAP, attrs: wrapAtt });\n wraper.appendChild(tConts);\n if (pos === 'top' || pos === 'bottom') {\n this.element.classList.add('e-vertical-icon');\n }\n this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE).appendChild(wraper);\n var crElem = this.createElement('div');\n var cnt = item.content;\n var eleStr = void 0;\n if (typeof cnt === 'string' || isNOU(cnt.innerHTML)) {\n if (typeof cnt === 'string' && this.enableHtmlSanitizer) {\n cnt = SanitizeHtmlHelper.sanitize(cnt);\n }\n if (cnt[0] === '.' || cnt[0] === '#') {\n if (document.querySelectorAll(cnt).length) {\n var eleVal = document.querySelector(cnt);\n eleStr = eleVal.outerHTML.trim();\n crElem.appendChild(eleVal);\n eleVal.style.display = '';\n }\n else {\n this.compileElement(crElem, cnt, 'content', this.selectedItem);\n }\n }\n else {\n this.compileElement(crElem, cnt, 'content', this.selectedItem);\n }\n }\n else {\n crElem.appendChild(cnt);\n }\n if (!isNOU(eleStr)) {\n if (this.templateEle.indexOf(cnt.toString()) === -1) {\n this.templateEle.push(cnt.toString());\n }\n }\n this.element.querySelector('.' + CLS_ITEM + '.' + CLS_ACTIVE).appendChild(crElem);\n }\n }\n else {\n var tabItems = this.element.querySelector('.' + CLS_TB_ITEMS);\n var element = this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE);\n var id = element.id;\n var num = (id.indexOf('_'));\n var index = parseInt(id.substring(num + 1), 10);\n var header = element.innerText;\n var detachContent = this.element.querySelector('.' + CLS_CONTENT).querySelector('.' + CLS_ACTIVE).children[0];\n var mainContents = detachContent.innerHTML;\n detach(element);\n detach(detachContent);\n var attr = {\n className: CLS_TB_ITEM + ' ' + CLS_TEMPLATE + ' ' + CLS_ACTIVE, id: CLS_ITEM + this.tabId + '_' + index,\n attrs: {\n role: 'tab', 'aria-controls': CLS_CONTENT + this.tabId + '_' + index,\n 'aria-disabled': 'false', 'aria-selected': 'true'\n }\n };\n var txtString = this.createElement('span', {\n className: CLS_TEXT, innerHTML: header, attrs: { 'role': 'presentation' }\n }).outerHTML;\n var conte = this.createElement('div', {\n className: CLS_TEXT_WRAP, innerHTML: txtString + this.btnCls.outerHTML\n }).outerHTML;\n var wrap = this.createElement('div', { className: CLS_WRAP, innerHTML: conte, attrs: { tabIndex: '-1' } });\n tabItems.insertBefore(this.createElement('div', attr), tabItems.children[index + 1]);\n this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE).appendChild(wrap);\n var crElem = this.createElement('div', { innerHTML: mainContents });\n this.element.querySelector('.' + CLS_CONTENT).querySelector('.' + CLS_ACTIVE).appendChild(crElem);\n }\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n __decorate([\n Collection([], TabItem)\n ], Tab.prototype, \"items\", void 0);\n __decorate([\n Property('100%')\n ], Tab.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Tab.prototype, \"height\", void 0);\n __decorate([\n Property('')\n ], Tab.prototype, \"cssClass\", void 0);\n __decorate([\n Property(0)\n ], Tab.prototype, \"selectedItem\", void 0);\n __decorate([\n Property('Top')\n ], Tab.prototype, \"headerPlacement\", void 0);\n __decorate([\n Property('Content')\n ], Tab.prototype, \"heightAdjustMode\", void 0);\n __decorate([\n Property('Scrollable')\n ], Tab.prototype, \"overflowMode\", void 0);\n __decorate([\n Property('Dynamic')\n ], Tab.prototype, \"loadOn\", void 0);\n __decorate([\n Property(false)\n ], Tab.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(false)\n ], Tab.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property(false)\n ], Tab.prototype, \"showCloseButton\", void 0);\n __decorate([\n Property()\n ], Tab.prototype, \"scrollStep\", void 0);\n __decorate([\n Complex({}, TabAnimationSettings)\n ], Tab.prototype, \"animation\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"adding\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"added\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"selecting\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"selected\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"removing\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"removed\", void 0);\n __decorate([\n Event()\n ], Tab.prototype, \"destroyed\", void 0);\n Tab = __decorate([\n NotifyPropertyChanges\n ], Tab);\n return Tab;\n}(Component));\nexport { Tab };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport * as React from 'react';\nimport { Tab } from '@syncfusion/ej2-navigations';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * Represents the React Tab Component.\n * ```html\n *
\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar Popup = /** @class */ (function (_super) {\n __extends(Popup, _super);\n function Popup(element, options) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Called internally if any of the property value changed.\n * @private\n */\n Popup.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });\n break;\n case 'height':\n setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'zIndex':\n setStyleAttribute(this.element, { 'zIndex': newProp.zIndex });\n break;\n case 'enableRtl':\n this.setEnableRtl();\n break;\n case 'position':\n case 'relateTo':\n this.refreshPosition();\n break;\n case 'offsetX':\n var x = newProp.offsetX - oldProp.offsetX;\n this.element.style.left = (parseInt(this.element.style.left, 10) + (x)).toString() + 'px';\n break;\n case 'offsetY':\n var y = newProp.offsetY - oldProp.offsetY;\n this.element.style.top = (parseInt(this.element.style.top, 10) + (y)).toString() + 'px';\n break;\n case 'content':\n this.setContent();\n break;\n case 'actionOnScroll':\n if (newProp.actionOnScroll !== 'none') {\n this.wireScrollEvents();\n }\n else {\n this.unwireScrollEvents();\n }\n break;\n }\n }\n };\n /**\n * gets the Component module name.\n * @private\n */\n Popup.prototype.getModuleName = function () {\n return 'popup';\n };\n /**\n * To resolve if any collision occurs.\n */\n Popup.prototype.resolveCollision = function () {\n this.checkCollision();\n };\n /**\n * gets the persisted state properties of the Component.\n */\n Popup.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * To destroy the control.\n */\n Popup.prototype.destroy = function () {\n this.element.classList.remove(CLASSNAMES.ROOT, CLASSNAMES.RTL, CLASSNAMES.OPEN, CLASSNAMES.CLOSE);\n this.unwireEvents();\n _super.prototype.destroy.call(this);\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n Popup.prototype.render = function () {\n this.element.classList.add(CLASSNAMES.ROOT);\n var styles = {};\n if (this.zIndex !== 1000) {\n styles.zIndex = this.zIndex;\n }\n if (this.width !== 'auto') {\n styles.width = formatUnit(this.width);\n }\n if (this.height !== 'auto') {\n styles.height = formatUnit(this.height);\n }\n setStyleAttribute(this.element, styles);\n this.fixedParent = false;\n this.setEnableRtl();\n this.setContent();\n };\n Popup.prototype.wireEvents = function () {\n if (Browser.isDevice) {\n EventHandler.add(window, 'orientationchange', this.orientationOnChange, this);\n }\n if (this.actionOnScroll !== 'none') {\n this.wireScrollEvents();\n }\n };\n Popup.prototype.wireScrollEvents = function () {\n if (this.getRelateToElement()) {\n for (var _i = 0, _a = this.getScrollableParent(this.getRelateToElement()); _i < _a.length; _i++) {\n var parent_1 = _a[_i];\n EventHandler.add(parent_1, 'scroll', this.scrollRefresh, this);\n }\n }\n };\n Popup.prototype.unwireEvents = function () {\n if (Browser.isDevice) {\n EventHandler.remove(window, 'orientationchange', this.orientationOnChange);\n }\n if (this.actionOnScroll !== 'none') {\n this.unwireScrollEvents();\n }\n };\n Popup.prototype.unwireScrollEvents = function () {\n if (this.getRelateToElement()) {\n for (var _i = 0, _a = this.getScrollableParent(this.getRelateToElement()); _i < _a.length; _i++) {\n var parent_2 = _a[_i];\n EventHandler.remove(parent_2, 'scroll', this.scrollRefresh);\n }\n }\n };\n Popup.prototype.getRelateToElement = function () {\n var relateToElement = this.relateTo === '' || isNullOrUndefined(this.relateTo) ?\n document.body : this.relateTo;\n this.setProperties({ relateTo: relateToElement }, true);\n return ((typeof this.relateTo) === 'string') ?\n document.querySelector(this.relateTo) : this.relateTo;\n };\n Popup.prototype.scrollRefresh = function (e) {\n if (this.actionOnScroll === 'reposition') {\n if (!(this.element.offsetParent === e.target ||\n (this.element.offsetParent && this.element.offsetParent.tagName === 'BODY' &&\n e.target.parentElement == null))) {\n this.refreshPosition();\n }\n }\n else if (this.actionOnScroll === 'hide') {\n this.hide();\n }\n if (this.actionOnScroll !== 'none') {\n if (this.getRelateToElement()) {\n var targetVisible = this.isElementOnViewport(this.getRelateToElement(), e.target);\n if (!targetVisible && !this.targetInvisibleStatus) {\n this.trigger('targetExitViewport');\n this.targetInvisibleStatus = true;\n }\n else if (targetVisible) {\n this.targetInvisibleStatus = false;\n }\n }\n }\n };\n /**\n * This method is to get the element visibility on viewport when scroll\n * the page. This method will returns true even though 1 px of element\n * part is in visible.\n */\n Popup.prototype.isElementOnViewport = function (relateToElement, scrollElement) {\n var scrollParents = this.getScrollableParent(relateToElement);\n for (var parent_3 = 0; parent_3 < scrollParents.length; parent_3++) {\n if (this.isElementVisible(relateToElement, scrollParents[parent_3])) {\n continue;\n }\n else {\n return false;\n }\n }\n return true;\n };\n Popup.prototype.isElementVisible = function (relateToElement, scrollElement) {\n var rect = this.checkGetBoundingClientRect(relateToElement);\n if (!rect.height || !rect.width) {\n return false;\n }\n if (!isNullOrUndefined(this.checkGetBoundingClientRect(scrollElement))) {\n var parent_4 = scrollElement.getBoundingClientRect();\n return !(rect.bottom < parent_4.top) &&\n (!(rect.bottom > parent_4.bottom) &&\n (!(rect.right > parent_4.right) &&\n !(rect.left < parent_4.left)));\n }\n else {\n var win = window;\n var windowView = {\n top: win.scrollY,\n left: win.scrollX,\n right: win.scrollX + win.outerWidth,\n bottom: win.scrollY + win.outerHeight\n };\n var off = calculatePosition(relateToElement);\n var ele = {\n top: off.top,\n left: off.left,\n right: off.left + rect.width,\n bottom: off.top + rect.height\n };\n var elementView = {\n top: windowView.bottom - ele.top,\n left: windowView.right - ele.left,\n bottom: ele.bottom - windowView.top,\n right: ele.right - windowView.left\n };\n return elementView.top > 0\n && elementView.left > 0\n && elementView.right > 0\n && elementView.bottom > 0;\n }\n };\n /**\n * Initialize the event handler\n * @private\n */\n Popup.prototype.preRender = function () {\n //There is no event handler\n };\n Popup.prototype.setEnableRtl = function () {\n this.reposition();\n this.enableRtl ? this.element.classList.add(CLASSNAMES.RTL) : this.element.classList.remove(CLASSNAMES.RTL);\n };\n Popup.prototype.setContent = function () {\n if (!isNullOrUndefined(this.content)) {\n this.element.innerHTML = '';\n if (typeof (this.content) === 'string') {\n this.element.textContent = this.content;\n }\n else {\n this.element.appendChild(this.content);\n }\n }\n };\n Popup.prototype.orientationOnChange = function () {\n var _this = this;\n setTimeout(function () {\n _this.refreshPosition();\n }, 200);\n };\n /**\n * Based on the `relative` element and `offset` values, `Popup` element position will refreshed.\n */\n Popup.prototype.refreshPosition = function (target, collision) {\n if (!isNullOrUndefined(target)) {\n this.checkFixedParent(target);\n }\n this.reposition();\n if (!collision) {\n this.checkCollision();\n }\n };\n Popup.prototype.reposition = function () {\n var pos;\n var position;\n var relateToElement = this.getRelateToElement();\n if (typeof this.position.X === 'number' && typeof this.position.Y === 'number') {\n pos = { left: this.position.X, top: this.position.Y };\n }\n else if ((typeof this.position.X === 'string' && typeof this.position.Y === 'number') ||\n (typeof this.position.X === 'number' && typeof this.position.Y === 'string')) {\n var display = this.element.style.display;\n var parentDisplay = void 0;\n this.element.style.display = 'block';\n if (this.element.classList.contains('e-dlg-modal')) {\n parentDisplay = this.element.parentElement.style.display;\n this.element.parentElement.style.display = 'block';\n }\n position = this.getAnchorPosition(relateToElement, this.element, this.position, this.offsetX, this.offsetY);\n if (typeof this.position.X === 'string') {\n pos = { left: position.left, top: this.position.Y };\n }\n else {\n pos = { left: this.position.X, top: position.top };\n }\n this.element.style.display = display;\n if (this.element.classList.contains('e-dlg-modal')) {\n this.element.parentElement.style.display = parentDisplay;\n }\n }\n else if (relateToElement) {\n var display = this.element.style.display;\n this.element.style.display = 'block';\n pos = this.getAnchorPosition(relateToElement, this.element, this.position, this.offsetX, this.offsetY);\n this.element.style.display = display;\n }\n else {\n pos = { left: 0, top: 0 };\n }\n if (!isNullOrUndefined(pos)) {\n this.element.style.left = pos.left + 'px';\n this.element.style.top = pos.top + 'px';\n }\n };\n Popup.prototype.checkGetBoundingClientRect = function (ele) {\n var eleRect;\n try {\n eleRect = ele.getBoundingClientRect();\n return eleRect;\n }\n catch (error) {\n return null;\n }\n };\n Popup.prototype.getAnchorPosition = function (anchorEle, ele, position, offsetX, offsetY) {\n var eleRect = this.checkGetBoundingClientRect(ele);\n var anchorRect = this.checkGetBoundingClientRect(anchorEle);\n if (isNullOrUndefined(eleRect) || isNullOrUndefined(anchorRect)) {\n return null;\n }\n var anchor = anchorEle;\n var anchorPos = { left: 0, top: 0 };\n if (ele.offsetParent && ele.offsetParent.tagName === 'BODY' && anchorEle.tagName === 'BODY') {\n anchorPos = calculatePosition(anchorEle);\n }\n else {\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName !== 'BODY')) {\n ele = ele.parentElement;\n }\n anchorPos = calculateRelativeBasedPosition(anchor, ele);\n }\n switch (position.X) {\n default:\n case 'left':\n break;\n case 'center':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.left += (window.innerWidth / 2 - eleRect.width / 2);\n }\n else if (this.targetType === 'container') {\n anchorPos.left += (anchorRect.width / 2 - eleRect.width / 2);\n }\n else {\n anchorPos.left += (anchorRect.width / 2);\n }\n break;\n case 'right':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.left += (window.innerWidth - eleRect.width);\n }\n else if (this.targetType === 'container') {\n anchorPos.left += (anchorRect.width - eleRect.width);\n }\n else {\n anchorPos.left += (anchorRect.width);\n }\n break;\n }\n switch (position.Y) {\n default:\n case 'top':\n break;\n case 'center':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.top += (window.innerHeight / 2 - eleRect.height / 2);\n }\n else if (this.targetType === 'container') {\n anchorPos.top += (anchorRect.height / 2 - eleRect.height / 2);\n }\n else {\n anchorPos.top += (anchorRect.height / 2);\n }\n break;\n case 'bottom':\n if ((ele.classList.contains('e-dlg-modal') && anchor.tagName === 'BODY' && this.targetType === 'container')) {\n anchorPos.top += (window.innerHeight - eleRect.height);\n }\n else if (this.targetType === 'container') {\n anchorPos.top += (anchorRect.height - eleRect.height);\n }\n else {\n anchorPos.top += (anchorRect.height);\n }\n break;\n }\n anchorPos.left += offsetX;\n anchorPos.top += offsetY;\n return anchorPos;\n };\n Popup.prototype.callFlip = function (param) {\n var relateToElement = this.getRelateToElement();\n flip(this.element, relateToElement, this.offsetX, this.offsetY, this.position.X, this.position.Y, this.viewPortElement, param, this.fixedParent);\n };\n Popup.prototype.callFit = function (param) {\n if (isCollide(this.element, this.viewPortElement).length !== 0) {\n if (isNullOrUndefined(this.viewPortElement)) {\n var data = fit(this.element, this.viewPortElement, param);\n if (param.X) {\n this.element.style.left = data.left + 'px';\n }\n if (param.Y) {\n this.element.style.top = data.top + 'px';\n }\n }\n else {\n var elementRect = this.checkGetBoundingClientRect(this.element);\n var viewPortRect = this.checkGetBoundingClientRect(this.viewPortElement);\n if (isNullOrUndefined(elementRect) || isNullOrUndefined(viewPortRect)) {\n return null;\n }\n if (param && param.Y === true) {\n if (viewPortRect.top > elementRect.top) {\n this.element.style.top = '0px';\n }\n else if (viewPortRect.bottom < elementRect.bottom) {\n this.element.style.top = parseInt(this.element.style.top, 10) - (elementRect.bottom - viewPortRect.bottom) + 'px';\n }\n }\n if (param && param.X === true) {\n if (viewPortRect.right < elementRect.right) {\n this.element.style.left = parseInt(this.element.style.left, 10) - (elementRect.right - viewPortRect.right) + 'px';\n }\n else if (viewPortRect.left > elementRect.left) {\n this.element.style.left = parseInt(this.element.style.left, 10) + (viewPortRect.left - elementRect.left) + 'px';\n }\n }\n }\n }\n };\n Popup.prototype.checkCollision = function () {\n var horz = this.collision.X;\n var vert = this.collision.Y;\n if (horz === 'none' && vert === 'none') {\n return;\n }\n if (horz === 'flip' && vert === 'flip') {\n this.callFlip({ X: true, Y: true });\n }\n else if (horz === 'fit' && vert === 'fit') {\n this.callFit({ X: true, Y: true });\n }\n else {\n if (horz === 'flip') {\n this.callFlip({ X: true, Y: false });\n }\n else if (vert === 'flip') {\n this.callFlip({ Y: true, X: false });\n }\n if (horz === 'fit') {\n this.callFit({ X: true, Y: false });\n }\n else if (vert === 'fit') {\n this.callFit({ X: false, Y: true });\n }\n }\n };\n /**\n * Shows the popup element from screen.\n * @param { AnimationModel | Function } collisionOrAnimationOptions? - To pass animation options or collision function.\n * @param { Function } collision? - To pass the collision function.\n * @param { HTMLElement } relativeElement? - To calculate the zIndex value dynamically.\n */\n Popup.prototype.show = function (animationOptions, relativeElement) {\n var _this = this;\n this.wireEvents();\n if (this.zIndex === 1000 || !isNullOrUndefined(relativeElement)) {\n var zIndexElement = (isNullOrUndefined(relativeElement)) ? this.element : relativeElement;\n this.zIndex = getZindexPartial(zIndexElement);\n setStyleAttribute(this.element, { 'zIndex': this.zIndex });\n }\n animationOptions = (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?\n animationOptions : this.showAnimation;\n if (this.collision.X !== 'none' || this.collision.Y !== 'none') {\n removeClass([this.element], CLASSNAMES.CLOSE);\n addClass([this.element], CLASSNAMES.OPEN);\n this.checkCollision();\n removeClass([this.element], CLASSNAMES.OPEN);\n addClass([this.element], CLASSNAMES.CLOSE);\n }\n if (!isNullOrUndefined(animationOptions)) {\n animationOptions.begin = function () {\n if (!_this.isDestroyed) {\n removeClass([_this.element], CLASSNAMES.CLOSE);\n addClass([_this.element], CLASSNAMES.OPEN);\n }\n };\n animationOptions.end = function () {\n if (!_this.isDestroyed) {\n _this.trigger('open');\n }\n };\n new Animation(animationOptions).animate(this.element);\n }\n else {\n removeClass([this.element], CLASSNAMES.CLOSE);\n addClass([this.element], CLASSNAMES.OPEN);\n this.trigger('open');\n }\n };\n /**\n * Hides the popup element from screen.\n * @param { AnimationModel } animationOptions? - To give the animation options.\n */\n Popup.prototype.hide = function (animationOptions) {\n var _this = this;\n animationOptions = (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?\n animationOptions : this.hideAnimation;\n if (!isNullOrUndefined(animationOptions)) {\n animationOptions.end = function () {\n if (!_this.isDestroyed) {\n removeClass([_this.element], CLASSNAMES.OPEN);\n addClass([_this.element], CLASSNAMES.CLOSE);\n _this.trigger('close');\n }\n };\n new Animation(animationOptions).animate(this.element);\n }\n else {\n removeClass([this.element], CLASSNAMES.OPEN);\n addClass([this.element], CLASSNAMES.CLOSE);\n this.trigger('close');\n }\n this.unwireEvents();\n };\n /**\n * Gets scrollable parent elements for the given element.\n * @param { HTMLElement } element - Specify the element to get the scrollable parents of it.\n */\n Popup.prototype.getScrollableParent = function (element) {\n this.checkFixedParent(element);\n return getScrollableParent(element, this.fixedParent);\n };\n Popup.prototype.checkFixedParent = function (element) {\n var parent = element.parentElement;\n while (parent && parent.tagName !== 'HTML') {\n var parentStyle = getComputedStyle(parent);\n if (parentStyle.position === 'fixed' && this.element.offsetParent && this.element.offsetParent.tagName === 'BODY') {\n this.element.style.position = 'fixed';\n this.fixedParent = true;\n }\n parent = parent.parentElement;\n if (isNullOrUndefined(this.element.offsetParent) && parentStyle.position === 'fixed'\n && this.element.style.position === 'fixed') {\n this.fixedParent = true;\n }\n }\n };\n __decorate([\n Property('auto')\n ], Popup.prototype, \"height\", void 0);\n __decorate([\n Property('auto')\n ], Popup.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"content\", void 0);\n __decorate([\n Property('container')\n ], Popup.prototype, \"targetType\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"viewPortElement\", void 0);\n __decorate([\n Property({ X: 'none', Y: 'none' })\n ], Popup.prototype, \"collision\", void 0);\n __decorate([\n Property('')\n ], Popup.prototype, \"relateTo\", void 0);\n __decorate([\n Complex({}, PositionData)\n ], Popup.prototype, \"position\", void 0);\n __decorate([\n Property(0)\n ], Popup.prototype, \"offsetX\", void 0);\n __decorate([\n Property(0)\n ], Popup.prototype, \"offsetY\", void 0);\n __decorate([\n Property(1000)\n ], Popup.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], Popup.prototype, \"enableRtl\", void 0);\n __decorate([\n Property('reposition')\n ], Popup.prototype, \"actionOnScroll\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"showAnimation\", void 0);\n __decorate([\n Property(null)\n ], Popup.prototype, \"hideAnimation\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], Popup.prototype, \"targetExitViewport\", void 0);\n Popup = __decorate([\n NotifyPropertyChanges\n ], Popup);\n return Popup;\n}(Component));\nexport { Popup };\n/**\n * Gets scrollable parent elements for the given element.\n * @param { HTMLElement } element - Specify the element to get the scrollable parents of it.\n * @private\n */\nexport function getScrollableParent(element, fixedParent) {\n var eleStyle = getComputedStyle(element);\n var scrollParents = [];\n var overflowRegex = /(auto|scroll)/;\n var parent = element.parentElement;\n while (parent && parent.tagName !== 'HTML') {\n var parentStyle = getComputedStyle(parent);\n if (!(eleStyle.position === 'absolute' && parentStyle.position === 'static')\n && overflowRegex.test(parentStyle.overflow + parentStyle.overflowY + parentStyle.overflowX)) {\n scrollParents.push(parent);\n }\n parent = parent.parentElement;\n }\n if (!fixedParent) {\n scrollParents.push(document);\n }\n return scrollParents;\n}\n/**\n * Gets the maximum z-index of the given element.\n * @param { HTMLElement } element - Specify the element to get the maximum z-index of it.\n * @private\n */\nexport function getZindexPartial(element) {\n // upto body traversal\n var parent = element.parentElement;\n var parentZindex = [];\n while (parent) {\n if (parent.tagName !== 'BODY') {\n var index = document.defaultView.getComputedStyle(parent, null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(parent, null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n parentZindex.push(index);\n }\n parent = parent.parentElement;\n }\n else {\n break;\n }\n }\n //Body direct children element traversal\n var childrenZindex = [];\n for (var i = 0; i < document.body.children.length; i++) {\n if (!element.isEqualNode(document.body.children[i])) {\n var index = document.defaultView.getComputedStyle(document.body.children[i], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(document.body.children[i], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n childrenZindex.push(index);\n }\n }\n }\n childrenZindex.push('999');\n var siblingsZindex = [];\n if (!isNullOrUndefined(element.parentElement) && element.parentElement.tagName !== 'BODY') {\n var childNodes = [].slice.call(element.parentElement.children);\n for (var i = 0; i < childNodes.length; i++) {\n var index = document.defaultView.getComputedStyle(childNodes[i], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(childNodes[i], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n siblingsZindex.push(index);\n }\n }\n }\n var finalValue = parentZindex.concat(childrenZindex, siblingsZindex);\n var currentZindexValue = Math.max.apply(Math, finalValue) + 1;\n // Checking the max-zindex value\n return currentZindexValue > 2147483647 ? 2147483647 : currentZindexValue;\n}\n/**\n * Gets the maximum z-index of the page.\n * @param { HTMLElement } tagName - Specify the tagName to get the maximum z-index of it.\n * @private\n */\nexport function getMaxZindex(tagName) {\n if (tagName === void 0) { tagName = ['*']; }\n var maxZindex = [];\n for (var i = 0; i < tagName.length; i++) {\n var elements = document.getElementsByTagName(tagName[i]);\n for (var i_1 = 0; i_1 < elements.length; i_1++) {\n var index = document.defaultView.getComputedStyle(elements[i_1], null).getPropertyValue('z-index');\n var position = document.defaultView.getComputedStyle(elements[i_1], null).getPropertyValue('position');\n if (index !== 'auto' && position !== 'static') {\n maxZindex.push(index);\n }\n }\n }\n var currentZindexValue = Math.max.apply(Math, maxZindex) + 1;\n return currentZindexValue > 2147483647 ? 2147483647 : currentZindexValue;\n}\n","/**\n * Resize library\n */\nimport { isNullOrUndefined as isNOU, createElement, EventHandler, detach, Browser } from '@syncfusion/ej2-base';\nvar elementClass = ['north-west', 'north', 'north-east', 'west', 'east', 'south-west', 'south', 'south-east'];\nvar targetElement;\nvar selectedHandler;\nvar originalWidth = 0;\nvar originalHeight = 0;\nvar originalX = 0;\nvar originalY = 0;\nvar originalMouseX = 0;\nvar originalMouseY = 0;\nvar RESIZE_HANDLER = 'e-resize-handle';\nvar FOCUSED_HANDLER = 'e-focused-handle';\nvar RESTRICT_LEFT = ['e-restrict-left'];\nvar RESIZE_WITHIN_VIEWPORT = 'e-resize-viewport';\nvar minHeight;\nvar maxHeight;\nvar minWidth;\nvar maxWidth;\nvar containerElement;\nvar resizeStart = null;\nvar resize = null;\nvar resizeEnd = null;\nvar resizeWestWidth;\nvar setLeft = true;\nvar previousWidth = 0;\nvar setWidth = true;\n// tslint:disable-next-line\nvar proxy;\nvar dialogBorderResize = ['north', 'west', 'east', 'south'];\nexport function createResize(args) {\n resizeStart = args.resizeBegin;\n resize = args.resizing;\n resizeEnd = args.resizeComplete;\n targetElement = getDOMElement(args.element);\n containerElement = getDOMElement(args.boundary);\n var directions = args.direction.split(' ');\n for (var i = 0; i < directions.length; i++) {\n if (dialogBorderResize.indexOf(directions[i]) >= 0 && directions[i]) {\n setBorderResizeElm(directions[i]);\n }\n else if (directions[i].trim() !== '') {\n var resizeHandler = createElement('div', { className: 'e-icons ' + RESIZE_HANDLER + ' ' + 'e-' + directions[i] });\n targetElement.appendChild(resizeHandler);\n }\n }\n minHeight = args.minHeight;\n minWidth = args.minWidth;\n maxWidth = args.maxWidth;\n maxHeight = args.maxHeight;\n if (args.proxy && args.proxy.element && args.proxy.element.classList.contains('e-dialog')) {\n wireEvents(args.proxy);\n }\n else {\n wireEvents();\n }\n}\nfunction setBorderResizeElm(direction) {\n calculateValues();\n var borderBottom = createElement('span', {\n attrs: {\n 'unselectable': 'on', 'contenteditable': 'false'\n }\n });\n borderBottom.setAttribute('class', 'e-dialog-border-resize e-' + direction);\n if (direction === 'south') {\n borderBottom.style.height = '2px';\n borderBottom.style.width = '100%';\n borderBottom.style.bottom = '0px';\n borderBottom.style.left = '0px';\n }\n if (direction === 'north') {\n borderBottom.style.height = '2px';\n borderBottom.style.width = '100%';\n borderBottom.style.top = '0px';\n borderBottom.style.left = '0px';\n }\n if (direction === 'east') {\n borderBottom.style.height = '100%';\n borderBottom.style.width = '2px';\n borderBottom.style.right = '0px';\n borderBottom.style.top = '0px';\n }\n if (direction === 'west') {\n borderBottom.style.height = '100%';\n borderBottom.style.width = '2px';\n borderBottom.style.left = '0px';\n borderBottom.style.top = '0px';\n }\n targetElement.appendChild(borderBottom);\n}\nfunction getDOMElement(element) {\n var domElement;\n if (!isNOU(element)) {\n if (typeof (element) === 'string') {\n domElement = document.querySelector(element);\n }\n else {\n domElement = element;\n }\n }\n return domElement;\n}\n// tslint:disable-next-line\nfunction wireEvents(args) {\n if (isNOU(args)) {\n args = this;\n }\n var resizers = targetElement.querySelectorAll('.' + RESIZE_HANDLER);\n for (var i = 0; i < resizers.length; i++) {\n selectedHandler = resizers[i];\n EventHandler.add(selectedHandler, 'mousedown', onMouseDown, args);\n var eventName = (Browser.info.name === 'msie') ? 'pointerdown' : 'touchstart';\n EventHandler.add(selectedHandler, eventName, onTouchStart, args);\n }\n var borderResizers = targetElement.querySelectorAll('.e-dialog-border-resize');\n if (!isNOU(borderResizers)) {\n for (var i = 0; i < borderResizers.length; i++) {\n selectedHandler = borderResizers[i];\n EventHandler.add(selectedHandler, 'mousedown', onMouseDown, args);\n var eventName = (Browser.info.name === 'msie') ? 'pointerdown' : 'touchstart';\n EventHandler.add(selectedHandler, eventName, onTouchStart, args);\n }\n }\n}\n/* istanbul ignore next */\nfunction getEventType(e) {\n return (e.indexOf('mouse') > -1) ? 'mouse' : 'touch';\n}\n/* istanbul ignore next */\nfunction onMouseDown(e) {\n e.preventDefault();\n targetElement = e.target.parentElement;\n calculateValues();\n originalMouseX = e.pageX;\n originalMouseY = e.pageY;\n e.target.classList.add(FOCUSED_HANDLER);\n if (!isNOU(resizeStart)) {\n proxy = this;\n if (resizeStart(e, proxy) === true) {\n return;\n }\n }\n var target = (isNOU(containerElement)) ? document : containerElement;\n EventHandler.add(target, 'mousemove', onMouseMove, this);\n EventHandler.add(document, 'mouseup', onMouseUp, this);\n for (var i = 0; i < RESTRICT_LEFT.length; i++) {\n if (targetElement.classList.contains(RESTRICT_LEFT[i])) {\n setLeft = false;\n }\n else {\n setLeft = true;\n }\n }\n}\n/* istanbul ignore next */\nfunction onMouseUp(e) {\n var touchMoveEvent = (Browser.info.name === 'msie') ? 'pointermove' : 'touchmove';\n var touchEndEvent = (Browser.info.name === 'msie') ? 'pointerup' : 'touchend';\n var target = (isNOU(containerElement)) ? document : containerElement;\n EventHandler.remove(target, 'mousemove', onMouseMove);\n EventHandler.remove(target, touchMoveEvent, onMouseMove);\n var eventName = (Browser.info.name === 'msie') ? 'pointerdown' : 'touchstart';\n EventHandler.remove(target, eventName, onMouseMove);\n if (!isNOU(document.body.querySelector('.' + FOCUSED_HANDLER))) {\n document.body.querySelector('.' + FOCUSED_HANDLER).classList.remove(FOCUSED_HANDLER);\n }\n if (!isNOU(resizeEnd)) {\n proxy = this;\n resizeEnd(e, proxy);\n }\n EventHandler.remove(document, 'mouseup', onMouseUp);\n EventHandler.remove(document, touchEndEvent, onMouseUp);\n}\n/* istanbul ignore next */\nfunction calculateValues() {\n originalWidth = parseFloat(getComputedStyle(targetElement, null).getPropertyValue('width').replace('px', ''));\n originalHeight = parseFloat(getComputedStyle(targetElement, null).getPropertyValue('height').replace('px', ''));\n originalX = targetElement.getBoundingClientRect().left;\n originalY = targetElement.getBoundingClientRect().top;\n}\n/* istanbul ignore next */\nfunction onTouchStart(e) {\n targetElement = e.target.parentElement;\n calculateValues();\n var coordinates = e.touches ? e.changedTouches[0] : e;\n originalMouseX = coordinates.pageX;\n originalMouseY = coordinates.pageY;\n if (!isNOU(resizeStart)) {\n proxy = this;\n if (resizeStart(e, proxy) === true) {\n return;\n }\n }\n var touchMoveEvent = (Browser.info.name === 'msie') ? 'pointermove' : 'touchmove';\n var touchEndEvent = (Browser.info.name === 'msie') ? 'pointerup' : 'touchend';\n var target = (isNOU(containerElement)) ? document : containerElement;\n EventHandler.add(target, touchMoveEvent, onMouseMove, this);\n EventHandler.add(document, touchEndEvent, onMouseUp);\n}\n/* istanbul ignore next */\nfunction onMouseMove(e) {\n if (e.target.classList.contains(RESIZE_HANDLER) && e.target.classList.contains(FOCUSED_HANDLER)) {\n selectedHandler = e.target;\n }\n else if (!isNOU(document.body.querySelector('.' + FOCUSED_HANDLER))) {\n selectedHandler = document.body.querySelector('.' + FOCUSED_HANDLER);\n }\n if (!isNOU(selectedHandler)) {\n var resizeTowards = '';\n for (var i = 0; i < elementClass.length; i++) {\n if (selectedHandler.classList.contains('e-' + elementClass[i])) {\n resizeTowards = elementClass[i];\n }\n }\n if (!isNOU(resize)) {\n proxy = this;\n resize(e, proxy);\n }\n switch (resizeTowards) {\n case 'south':\n resizeSouth(e);\n break;\n case 'north':\n resizeNorth(e);\n break;\n case 'west':\n resizeWest(e);\n break;\n case 'east':\n resizeEast(e);\n break;\n case 'south-east':\n resizeSouth(e);\n resizeEast(e);\n break;\n case 'south-west':\n resizeSouth(e);\n resizeWest(e);\n break;\n case 'north-east':\n resizeNorth(e);\n resizeEast(e);\n break;\n case 'north-west':\n resizeNorth(e);\n resizeWest(e);\n break;\n default: break;\n }\n }\n}\n/* istanbul ignore next */\nfunction getClientRectValues(element) {\n return element.getBoundingClientRect();\n}\n/* istanbul ignore next */\n// tslint:disable-next-line\nfunction resizeSouth(e) {\n var documentHeight = document.documentElement.clientHeight;\n var calculateValue = false;\n var containerRectValues;\n var coordinates = e.touches ? e.changedTouches[0] : e;\n var currentpageY = coordinates.pageY;\n var targetRectValues = getClientRectValues(targetElement);\n if (!isNOU(containerElement)) {\n containerRectValues = getClientRectValues(containerElement);\n }\n if (!isNOU(containerElement)) {\n calculateValue = true;\n }\n else if (isNOU(containerElement) && ((documentHeight - currentpageY) >= 0 || (targetRectValues.top < 0))) {\n calculateValue = true;\n }\n var calculatedHeight = originalHeight + (currentpageY - originalMouseY);\n calculatedHeight = (calculatedHeight > minHeight) ? calculatedHeight : minHeight;\n var containerTop = 0;\n if (!isNOU(containerElement)) {\n containerTop = containerRectValues.top;\n }\n var borderValue = isNOU(containerElement) ? 0 : containerElement.offsetHeight - containerElement.clientHeight;\n var topWithoutborder = (targetRectValues.top - containerTop) - (borderValue / 2);\n topWithoutborder = (topWithoutborder < 0) ? 0 : topWithoutborder;\n if (targetRectValues.top > 0 && (topWithoutborder + calculatedHeight) > maxHeight) {\n calculateValue = false;\n if (targetElement.classList.contains(RESIZE_WITHIN_VIEWPORT)) {\n return;\n }\n targetElement.style.height = (maxHeight - parseInt(topWithoutborder.toString(), 10)) + 'px';\n return;\n }\n var targetTop = 0;\n if (calculateValue) {\n if (targetRectValues.top < 0 && (documentHeight + (targetRectValues.height + targetRectValues.top) > 0)) {\n targetTop = targetRectValues.top;\n if ((calculatedHeight + targetTop) <= 30) {\n calculatedHeight = (targetRectValues.height - (targetRectValues.height + targetRectValues.top)) + 30;\n }\n }\n if (((calculatedHeight + targetRectValues.top) >= maxHeight)) {\n targetElement.style.height = targetRectValues.height +\n (documentHeight - (targetRectValues.height + targetRectValues.top)) + 'px';\n }\n var calculatedTop = (isNOU(containerElement)) ? targetTop : topWithoutborder;\n if (calculatedHeight >= minHeight && ((calculatedHeight + calculatedTop) <= maxHeight)) {\n targetElement.style.height = calculatedHeight + 'px';\n }\n }\n}\n/* istanbul ignore next */\n// tslint:disable-next-line\nfunction resizeNorth(e) {\n var calculateValue = false;\n var boundaryRectValues;\n var pageY = (getEventType(e.type) === 'mouse') ? e.pageY : e.touches[0].pageY;\n var targetRectValues = getClientRectValues(targetElement);\n if (!isNOU(containerElement)) {\n boundaryRectValues = getClientRectValues(containerElement);\n }\n if (!isNOU(containerElement) && (targetRectValues.top - boundaryRectValues.top) > 0) {\n calculateValue = true;\n }\n else if (isNOU(containerElement) && pageY > 0) {\n calculateValue = true;\n }\n var currentHeight = originalHeight - (pageY - originalMouseY);\n if (calculateValue) {\n if (currentHeight >= minHeight && currentHeight <= maxHeight) {\n var containerTop = 0;\n if (!isNOU(containerElement)) {\n containerTop = boundaryRectValues.top;\n }\n var top_1 = (originalY - containerTop) + (pageY - originalMouseY);\n top_1 = top_1 > 0 ? top_1 : 1;\n targetElement.style.height = currentHeight + 'px';\n targetElement.style.top = top_1 + 'px';\n }\n }\n}\n/* istanbul ignore next */\n// tslint:disable-next-line\nfunction resizeWest(e) {\n var documentWidth = document.documentElement.clientWidth;\n var calculateValue = false;\n var rectValues;\n if (!isNOU(containerElement)) {\n rectValues = getClientRectValues(containerElement);\n }\n var pageX = (getEventType(e.type) === 'mouse') ? e.pageX : e.touches[0].pageX;\n var targetRectValues = getClientRectValues(targetElement);\n var borderValue = isNOU(containerElement) ? 0 : containerElement.offsetWidth - containerElement.clientWidth;\n var left = isNOU(containerElement) ? 0 : rectValues.left;\n var containerWidth = isNOU(containerElement) ? 0 : rectValues.width;\n if (isNOU(resizeWestWidth)) {\n if (!isNOU(containerElement)) {\n resizeWestWidth = (((targetRectValues.left - left) - borderValue / 2)) + targetRectValues.width;\n resizeWestWidth = resizeWestWidth + (containerWidth - borderValue - resizeWestWidth);\n }\n else {\n resizeWestWidth = documentWidth;\n }\n }\n if (!isNOU(containerElement) &&\n (Math.floor((targetRectValues.left - rectValues.left) + targetRectValues.width +\n (rectValues.right - targetRectValues.right)) - borderValue) <= maxWidth) {\n calculateValue = true;\n }\n else if (isNOU(containerElement) && pageX >= 0) {\n calculateValue = true;\n }\n var calculatedWidth = originalWidth - (pageX - originalMouseX);\n if (setLeft) {\n calculatedWidth = (calculatedWidth > resizeWestWidth) ? resizeWestWidth : calculatedWidth;\n }\n if (calculateValue) {\n if (calculatedWidth >= minWidth && calculatedWidth <= maxWidth) {\n var containerLeft = 0;\n if (!isNOU(containerElement)) {\n containerLeft = rectValues.left;\n }\n var left_1 = (originalX - containerLeft) + (pageX - originalMouseX);\n left_1 = (left_1 > 0) ? left_1 : 1;\n if (calculatedWidth !== previousWidth && setWidth) {\n targetElement.style.width = calculatedWidth + 'px';\n }\n if (setLeft) {\n targetElement.style.left = left_1 + 'px';\n if (left_1 === 1) {\n setWidth = false;\n }\n else {\n setWidth = true;\n }\n }\n }\n }\n previousWidth = calculatedWidth;\n}\n/* istanbul ignore next */\n// tslint:disable-next-line\nfunction resizeEast(e) {\n var documentWidth = document.documentElement.clientWidth;\n var calculateValue = false;\n var containerRectValues;\n if (!isNOU(containerElement)) {\n containerRectValues = getClientRectValues(containerElement);\n }\n var coordinates = e.touches ? e.changedTouches[0] : e;\n var pageX = coordinates.pageX;\n var targetRectValues = getClientRectValues(targetElement);\n if (!isNOU(containerElement) && (((targetRectValues.left - containerRectValues.left) + targetRectValues.width) < maxWidth\n || (targetRectValues.right - containerRectValues.left) > targetRectValues.width)) {\n calculateValue = true;\n }\n else if (isNOU(containerElement) && (documentWidth - pageX) > 0) {\n calculateValue = true;\n }\n var calculatedWidth = originalWidth + (pageX - originalMouseX);\n var containerLeft = 0;\n if (!isNOU(containerElement)) {\n containerLeft = containerRectValues.left;\n }\n if (((targetRectValues.left - containerLeft) + calculatedWidth) > maxWidth) {\n calculateValue = false;\n if (targetElement.classList.contains(RESIZE_WITHIN_VIEWPORT)) {\n return;\n }\n targetElement.style.width = maxWidth - (targetRectValues.left - containerLeft) + 'px';\n }\n if (calculateValue) {\n if (calculatedWidth >= minWidth && calculatedWidth <= maxWidth) {\n targetElement.style.width = calculatedWidth + 'px';\n }\n }\n}\n/* istanbul ignore next */\nexport function setMinHeight(minimumHeight) {\n minHeight = minimumHeight;\n}\nexport function setMaxWidth(value) {\n maxWidth = value;\n}\nexport function setMaxHeight(value) {\n maxHeight = value;\n}\nexport function removeResize() {\n var handlers = targetElement.querySelectorAll('.' + RESIZE_HANDLER);\n for (var i = 0; i < handlers.length; i++) {\n detach(handlers[i]);\n }\n var borderResizers = targetElement.querySelectorAll('.e-dialog-border-resize');\n if (!isNOU(borderResizers)) {\n for (var i = 0; i < borderResizers.length; i++) {\n detach(borderResizers[i]);\n }\n }\n}\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, Event, Collection, L10n, Complex, compile, createElement } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty, isBlazor } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit, append, EventHandler, Draggable, extend } from '@syncfusion/ej2-base';\nimport { SanitizeHtmlHelper, Browser } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { Popup, PositionData, getZindexPartial } from '../popup/popup';\nimport { createResize, removeResize, setMinHeight, setMaxWidth, setMaxHeight } from '../common/resize';\nvar ButtonProps = /** @class */ (function (_super) {\n __extends(ButtonProps, _super);\n function ButtonProps() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], ButtonProps.prototype, \"buttonModel\", void 0);\n __decorate([\n Property('Button')\n ], ButtonProps.prototype, \"type\", void 0);\n __decorate([\n Event()\n ], ButtonProps.prototype, \"click\", void 0);\n return ButtonProps;\n}(ChildProperty));\nexport { ButtonProps };\n/**\n * Configures the animation properties for both open and close the dialog.\n */\nvar AnimationSettings = /** @class */ (function (_super) {\n __extends(AnimationSettings, _super);\n function AnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Fade')\n ], AnimationSettings.prototype, \"effect\", void 0);\n __decorate([\n Property(400)\n ], AnimationSettings.prototype, \"duration\", void 0);\n __decorate([\n Property(0)\n ], AnimationSettings.prototype, \"delay\", void 0);\n return AnimationSettings;\n}(ChildProperty));\nexport { AnimationSettings };\nvar ROOT = 'e-dialog';\nvar RTL = 'e-rtl';\nvar DLG_HEADER_CONTENT = 'e-dlg-header-content';\nvar DLG_HEADER = 'e-dlg-header';\nvar DLG_FOOTER_CONTENT = 'e-footer-content';\nvar MODAL_DLG = 'e-dlg-modal';\nvar DLG_CONTENT = 'e-dlg-content';\nvar DLG_CLOSE_ICON = 'e-icon-dlg-close';\nvar DLG_OVERLAY = 'e-dlg-overlay';\nvar DLG_TARGET = 'e-dlg-target';\nvar DLG_CONTAINER = 'e-dlg-container';\nvar SCROLL_DISABLED = 'e-scroll-disabled';\nvar DLG_PRIMARY_BUTTON = 'e-primary';\nvar ICON = 'e-icons';\nvar POPUP_ROOT = 'e-popup';\nvar DEVICE = 'e-device';\nvar FULLSCREEN = 'e-dlg-fullscreen';\nvar DLG_CLOSE_ICON_BTN = 'e-dlg-closeicon-btn';\nvar DLG_HIDE = 'e-popup-close';\nvar DLG_SHOW = 'e-popup-open';\nvar DLG_UTIL_DEFAULT_TITLE = 'Information';\nvar DLG_UTIL_ROOT = 'e-scroll-disabled';\nvar DLG_UTIL_ALERT = 'e-alert-dialog';\nvar DLG_UTIL_CONFIRM = 'e-confirm-dialog';\nvar DLG_RESIZABLE = 'e-dlg-resizable';\nvar DLG_RESTRICT_LEFT_VALUE = 'e-restrict-left';\nvar DLG_RESTRICT_WIDTH_VALUE = 'e-resize-viewport';\nvar DLG_REF_ELEMENT = 'e-dlg-ref-element';\n/**\n * Represents the dialog component that displays the information and get input from the user.\n * Two types of dialog components are `Modal and Modeless (non-modal)` depending on its interaction with parent application.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar Dialog = /** @class */ (function (_super) {\n __extends(Dialog, _super);\n /**\n * Constructor for creating the widget\n * @hidden\n */\n function Dialog(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the control rendering\n * @private\n */\n Dialog.prototype.render = function () {\n this.initialize();\n this.initRender();\n this.wireEvents();\n if (this.width === '100%') {\n this.element.style.width = '';\n }\n if (this.minHeight !== '') {\n this.element.style.minHeight = this.minHeight.toString();\n }\n if (this.enableResize) {\n this.setResize();\n if (this.animationSettings.effect === 'None') {\n this.getMinHeight();\n }\n }\n this.renderComplete();\n };\n /**\n * Initialize the event handler\n * @private\n */\n Dialog.prototype.preRender = function () {\n var _this = this;\n this.headerContent = null;\n this.allowMaxHeight = true;\n this.preventVisibility = true;\n this.clonedEle = this.element.cloneNode(true);\n this.closeIconClickEventHandler = function (event) {\n _this.hide(event);\n };\n this.dlgOverlayClickEventHandler = function (event) {\n _this.trigger('overlayClick', event);\n _this.focusContent();\n };\n var localeText = { close: 'Close' };\n this.l10n = new L10n('dialog', localeText, this.locale);\n this.checkPositionData();\n if (isNullOrUndefined(this.target)) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.target = document.body;\n this.isProtectedOnChange = prevOnChange;\n }\n };\n ;\n Dialog.prototype.isNumberValue = function (value) {\n var isNumber = /^[-+]?\\d*\\.?\\d+$/.test(value);\n return isNumber;\n };\n Dialog.prototype.checkPositionData = function () {\n if (!isNullOrUndefined(this.position)) {\n if (!isNullOrUndefined(this.position.X) && (typeof (this.position.X) !== 'number')) {\n var isNumber = this.isNumberValue(this.position.X);\n if (isNumber) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.position.X = parseFloat(this.position.X);\n this.isProtectedOnChange = prevOnChange;\n }\n }\n if (!isNullOrUndefined(this.position.Y) && (typeof (this.position.Y) !== 'number')) {\n var isNumber = this.isNumberValue(this.position.Y);\n if (isNumber) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.position.Y = parseFloat(this.position.Y);\n this.isProtectedOnChange = prevOnChange;\n }\n }\n }\n };\n Dialog.prototype.getEle = function (list, selector) {\n var element = undefined;\n for (var i = 0; i < list.length; i++) {\n if (list[i].classList.contains(selector)) {\n element = list[i];\n break;\n }\n }\n return element;\n };\n /* istanbul ignore next */\n Dialog.prototype.getMinHeight = function () {\n var computedHeaderHeight = '0px';\n var computedFooterHeight = '0px';\n if (!isNullOrUndefined(this.element.querySelector('.' + DLG_HEADER_CONTENT))) {\n computedHeaderHeight = getComputedStyle(this.headerContent).height;\n }\n var footerEle = this.getEle(this.element.children, DLG_FOOTER_CONTENT);\n if (!isNullOrUndefined(footerEle)) {\n computedFooterHeight = getComputedStyle(footerEle).height;\n }\n var headerHeight = parseInt(computedHeaderHeight.slice(0, computedHeaderHeight.indexOf('p')), 10);\n var footerHeight = parseInt(computedFooterHeight.slice(0, computedFooterHeight.indexOf('p')), 10);\n setMinHeight(headerHeight + 30 + (isNaN(footerHeight) ? 0 : footerHeight));\n return (headerHeight + 30 + footerHeight);\n };\n Dialog.prototype.onResizeStart = function (args, dialogObj) {\n dialogObj.trigger('resizeStart', args);\n return args.cancel;\n };\n Dialog.prototype.onResizing = function (args, dialogObj) {\n dialogObj.trigger('resizing', args);\n };\n Dialog.prototype.onResizeComplete = function (args, dialogObj) {\n dialogObj.trigger('resizeStop', args);\n };\n Dialog.prototype.setResize = function () {\n if (this.enableResize) {\n if (this.isBlazorServerRender() && !isNullOrUndefined(this.element.querySelector('.e-icons.e-resize-handle'))) {\n return;\n }\n this.element.classList.add(DLG_RESIZABLE);\n var computedHeight = getComputedStyle(this.element).minHeight;\n var computedWidth = getComputedStyle(this.element).minWidth;\n var direction = '';\n for (var i = 0; i < this.resizeHandles.length; i++) {\n if (this.resizeHandles[i] === 'All') {\n direction = 'south north east west north-east north-west south-east south-west';\n break;\n }\n else {\n var directionValue = '';\n switch (this.resizeHandles[i].toString()) {\n case 'SouthEast':\n directionValue = 'south-east';\n break;\n case 'SouthWest':\n directionValue = 'south-west';\n break;\n case 'NorthEast':\n directionValue = 'north-east';\n break;\n case 'NorthWest':\n directionValue = 'north-west';\n break;\n default:\n directionValue = this.resizeHandles[i].toString();\n break;\n }\n direction += directionValue.toLocaleLowerCase() + ' ';\n }\n }\n if (this.enableRtl && direction.trim() === 'south-east') {\n direction = 'south-west';\n }\n else if (this.enableRtl && direction.trim() === 'south-west') {\n direction = 'south-east';\n }\n if (this.isModal && this.enableRtl) {\n this.element.classList.add(DLG_RESTRICT_LEFT_VALUE);\n }\n else if (this.isModal && this.target === document.body) {\n this.element.classList.add(DLG_RESTRICT_WIDTH_VALUE);\n }\n createResize({\n element: this.element,\n direction: direction,\n minHeight: parseInt(computedHeight.slice(0, computedWidth.indexOf('p')), 10),\n maxHeight: this.targetEle.clientHeight,\n minWidth: parseInt(computedWidth.slice(0, computedWidth.indexOf('p')), 10),\n maxWidth: this.targetEle.clientWidth,\n boundary: this.target === document.body ? null : this.targetEle,\n resizeBegin: this.onResizeStart.bind(this),\n resizeComplete: this.onResizeComplete.bind(this),\n resizing: this.onResizing.bind(this),\n proxy: this\n });\n this.wireWindowResizeEvent();\n }\n else {\n removeResize();\n this.unWireWindowResizeEvent();\n if (this.isModal) {\n this.element.classList.remove(DLG_RESTRICT_LEFT_VALUE);\n }\n else {\n this.element.classList.remove(DLG_RESTRICT_WIDTH_VALUE);\n }\n this.element.classList.remove(DLG_RESIZABLE);\n }\n };\n /* istanbul ignore next */\n Dialog.prototype.keyDown = function (event) {\n var _this = this;\n if (event.keyCode === 9) {\n if (this.isModal) {\n var buttonObj = void 0;\n if (!isNullOrUndefined(this.btnObj)) {\n buttonObj = this.btnObj[this.btnObj.length - 1];\n }\n if ((isNullOrUndefined(this.btnObj)) && (!isNullOrUndefined(this.ftrTemplateContent))) {\n var value = 'input,select,textarea,button,a,[contenteditable=\"true\"],[tabindex]';\n var items = this.ftrTemplateContent.querySelectorAll(value);\n buttonObj = { element: items[items.length - 1] };\n }\n if (!isNullOrUndefined(buttonObj) && document.activeElement === buttonObj.element && !event.shiftKey) {\n event.preventDefault();\n this.focusableElements(this.element).focus();\n }\n if (document.activeElement === this.focusableElements(this.element) && event.shiftKey) {\n event.preventDefault();\n if (!isNullOrUndefined(buttonObj)) {\n buttonObj.element.focus();\n }\n }\n }\n }\n var element = document.activeElement;\n var isTagName = (['input', 'textarea'].indexOf(element.tagName.toLowerCase()) > -1);\n var isContentEdit = false;\n if (!isTagName) {\n isContentEdit = element.hasAttribute('contenteditable') && element.getAttribute('contenteditable') === 'true';\n }\n if (event.keyCode === 27 && this.closeOnEscape) {\n this.hide(event);\n }\n if ((event.keyCode === 13 && !event.ctrlKey && element.tagName.toLowerCase() !== 'textarea' &&\n isTagName && !isNullOrUndefined(this.primaryButtonEle)) ||\n (event.keyCode === 13 && event.ctrlKey && (element.tagName.toLowerCase() === 'textarea' ||\n isContentEdit)) && !isNullOrUndefined(this.primaryButtonEle)) {\n var buttonIndex_1;\n var firstPrimary = this.buttons.some(function (data, index) {\n buttonIndex_1 = index;\n var buttonModel = data.buttonModel;\n return !isNullOrUndefined(buttonModel) && buttonModel.isPrimary === true;\n });\n if (firstPrimary && typeof (this.buttons[buttonIndex_1].click) === 'function') {\n setTimeout(function () {\n _this.buttons[buttonIndex_1].click.call(_this, event);\n });\n }\n }\n };\n /**\n * Initialize the control rendering\n * @private\n */\n Dialog.prototype.initialize = function () {\n if (!isNullOrUndefined(this.target)) {\n this.targetEle = ((typeof this.target) === 'string') ?\n document.querySelector(this.target) : this.target;\n }\n if (!this.isBlazorServerRender()) {\n addClass([this.element], ROOT);\n }\n if (Browser.isDevice) {\n addClass([this.element], DEVICE);\n }\n if (!this.isBlazorServerRender()) {\n this.setCSSClass();\n }\n this.setMaxHeight();\n };\n /**\n * Initialize the rendering\n * @private\n */\n Dialog.prototype.initRender = function () {\n var _this = this;\n this.initialRender = true;\n if (!this.isBlazorServerRender()) {\n attributes(this.element, { role: 'dialog' });\n }\n if (this.zIndex === 1000) {\n this.setzIndex(this.element, false);\n this.calculatezIndex = true;\n }\n else {\n this.calculatezIndex = false;\n }\n if (this.isBlazorServerRender() && isNullOrUndefined(this.headerContent)) {\n this.headerContent = this.element.getElementsByClassName('e-dlg-header-content')[0];\n }\n if (this.isBlazorServerRender() && isNullOrUndefined(this.contentEle)) {\n this.contentEle = this.element.querySelector('#' + this.element.id + '_dialog-content');\n }\n if (!this.isBlazorServerRender()) {\n this.setTargetContent();\n if (this.header !== '' && !isNullOrUndefined(this.header)) {\n this.setHeader();\n }\n if (this.showCloseIcon) {\n this.renderCloseIcon();\n }\n this.setContent();\n if (this.footerTemplate !== '' && !isNullOrUndefined(this.footerTemplate)) {\n this.setFooterTemplate();\n }\n else if (!isNullOrUndefined(this.buttons[0].buttonModel)) {\n this.setButton();\n }\n }\n if (this.isBlazorServerRender()) {\n if (!isNullOrUndefined(this.buttons[0].buttonModel) && this.footerTemplate === '') {\n this.setButton();\n }\n }\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n if (!this.isBlazorServerRender()) {\n attributes(this.element, { 'aria-modal': (this.isModal ? 'true' : 'false') });\n if (this.isModal) {\n this.setIsModal();\n }\n }\n if (this.isBlazorServerRender() && isNullOrUndefined(this.dlgContainer)) {\n this.dlgContainer = this.element.parentElement;\n for (var i = 0, childNodes = this.dlgContainer.children; i < childNodes.length; i++) {\n if (childNodes[i].classList.contains('e-dlg-overlay')) {\n this.dlgOverlay = childNodes[i];\n }\n }\n }\n if (this.element.classList.contains(DLG_UTIL_ALERT) !== true && this.element.classList.contains(DLG_UTIL_CONFIRM) !== true\n && !isNullOrUndefined(this.element.parentElement)) {\n var parentEle = this.isModal ? this.dlgContainer.parentElement : this.element.parentElement;\n this.refElement = this.createElement('div', { className: DLG_REF_ELEMENT });\n parentEle.insertBefore(this.refElement, (this.isModal ? this.dlgContainer : this.element));\n }\n if (!isNullOrUndefined(this.targetEle)) {\n this.isModal ? this.targetEle.appendChild(this.dlgContainer) : this.targetEle.appendChild(this.element);\n }\n this.popupObj = new Popup(this.element, {\n height: this.height,\n width: this.width,\n zIndex: this.zIndex,\n relateTo: this.target,\n actionOnScroll: 'none',\n enableRtl: this.enableRtl,\n open: function (event) {\n var eventArgs = {\n container: _this.isModal ? _this.dlgContainer : _this.element,\n element: _this.element,\n target: _this.target,\n preventFocus: false\n };\n if (_this.enableResize) {\n _this.resetResizeIcon();\n }\n _this.trigger('open', eventArgs, function (openEventArgs) {\n if (!openEventArgs.preventFocus) {\n _this.focusContent();\n }\n });\n },\n close: function (event) {\n if (_this.isModal) {\n addClass([_this.dlgOverlay], 'e-fade');\n }\n _this.unBindEvent(_this.element);\n if (_this.isModal) {\n _this.dlgContainer.style.display = 'none';\n }\n _this.trigger('close', _this.closeArgs);\n var activeEle = document.activeElement;\n if (!isNullOrUndefined(activeEle) && !isNullOrUndefined((activeEle).blur)) {\n activeEle.blur();\n }\n if (!isNullOrUndefined(_this.storeActiveElement) && !isNullOrUndefined(_this.storeActiveElement.focus)) {\n _this.storeActiveElement.focus();\n }\n }\n });\n this.positionChange();\n this.setEnableRTL();\n if (!this.isBlazorServerRender()) {\n addClass([this.element], DLG_HIDE);\n if (this.isModal) {\n this.setOverlayZindex();\n }\n }\n if (this.visible) {\n this.show();\n }\n else {\n if (this.isModal) {\n this.dlgOverlay.style.display = 'none';\n }\n }\n this.initialRender = false;\n };\n Dialog.prototype.resetResizeIcon = function () {\n var dialogConHeight = this.getMinHeight();\n if (this.targetEle.offsetHeight < dialogConHeight) {\n var className = this.enableRtl ? 'e-south-west' : 'e-south-east';\n var resizeIcon = this.element.querySelector('.' + className);\n if (!isNullOrUndefined(resizeIcon)) {\n resizeIcon.style.bottom = '-' + dialogConHeight.toString() + 'px';\n }\n }\n };\n Dialog.prototype.setOverlayZindex = function (zIndexValue) {\n var zIndex;\n if (isNullOrUndefined(zIndexValue)) {\n zIndex = parseInt(this.element.style.zIndex, 10) ? parseInt(this.element.style.zIndex, 10) : this.zIndex;\n }\n else {\n zIndex = zIndexValue;\n }\n this.dlgOverlay.style.zIndex = (zIndex - 1).toString();\n this.dlgContainer.style.zIndex = zIndex.toString();\n };\n Dialog.prototype.positionChange = function () {\n if (this.isModal) {\n if (!isNaN(parseFloat(this.position.X)) && !isNaN(parseFloat(this.position.Y))) {\n this.setPopupPosition();\n }\n else if ((!isNaN(parseFloat(this.position.X)) && isNaN(parseFloat(this.position.Y)))\n || (isNaN(parseFloat(this.position.X)) && !isNaN(parseFloat(this.position.Y)))) {\n this.setPopupPosition();\n }\n else {\n this.element.style.top = '0px';\n this.element.style.left = '0px';\n this.dlgContainer.classList.add('e-dlg-' + this.position.X + '-' + this.position.Y);\n }\n }\n else {\n this.setPopupPosition();\n }\n };\n Dialog.prototype.setPopupPosition = function () {\n this.popupObj.setProperties({\n position: {\n X: this.position.X, Y: this.position.Y\n }\n });\n };\n Dialog.prototype.setAllowDragging = function () {\n var _this = this;\n var handleContent = '.' + DLG_HEADER_CONTENT;\n this.dragObj = new Draggable(this.element, {\n clone: false,\n isDragScroll: true,\n abort: '.e-dlg-closeicon-btn',\n handle: handleContent,\n dragStart: function (event) {\n _this.trigger('dragStart', event, function (dragEventArgs) {\n if (isBlazor()) {\n dragEventArgs.bindEvents(event.dragElement);\n }\n });\n },\n dragStop: function (event) {\n if (_this.isModal) {\n if (!isNullOrUndefined(_this.position)) {\n _this.dlgContainer.classList.remove('e-dlg-' + _this.position.X + '-' + _this.position.Y);\n }\n // Reset the dialog position after drag completion.\n _this.element.style.position = 'relative';\n }\n _this.trigger('dragStop', event);\n _this.element.classList.remove(DLG_RESTRICT_LEFT_VALUE);\n },\n drag: function (event) {\n _this.trigger('drag', event);\n }\n });\n if (!isNullOrUndefined(this.targetEle)) {\n this.dragObj.dragArea = this.targetEle;\n }\n };\n Dialog.prototype.setButton = function () {\n if (!this.isBlazorServerRender()) {\n this.buttonContent = [];\n this.btnObj = [];\n var primaryBtnFlag = true;\n for (var i = 0; i < this.buttons.length; i++) {\n var buttonType = !isNullOrUndefined(this.buttons[i].type) ? this.buttons[i].type.toLowerCase() : 'button';\n var btn = this.createElement('button', { attrs: { type: buttonType } });\n this.buttonContent.push(btn.outerHTML);\n }\n this.setFooterTemplate();\n }\n var footerBtn;\n for (var i = 0, childNodes = this.element.children; i < childNodes.length; i++) {\n if (childNodes[i].classList.contains(DLG_FOOTER_CONTENT)) {\n footerBtn = childNodes[i].querySelectorAll('button');\n }\n }\n for (var i = 0; i < this.buttons.length; i++) {\n if (!this.isBlazorServerRender()) {\n this.btnObj[i] = new Button(this.buttons[i].buttonModel);\n }\n if (this.isBlazorServerRender()) {\n this.ftrTemplateContent = this.element.querySelector('.' + DLG_FOOTER_CONTENT);\n }\n if (!isNullOrUndefined(this.ftrTemplateContent) && typeof (this.buttons[i].click) === 'function' && footerBtn.length > 0) {\n EventHandler.add(footerBtn[i], 'click', this.buttons[i].click, this);\n }\n if (!this.isBlazorServerRender() && !isNullOrUndefined(this.ftrTemplateContent)) {\n this.btnObj[i].appendTo(this.ftrTemplateContent.children[i]);\n this.btnObj[i].element.classList.add('e-flat');\n this.primaryButtonEle = this.element.getElementsByClassName('e-primary')[0];\n }\n }\n };\n Dialog.prototype.setContent = function () {\n attributes(this.element, { 'aria-describedby': this.element.id + '_dialog-content' });\n this.contentEle = this.createElement('div', { className: DLG_CONTENT, id: this.element.id + '_dialog-content' });\n if (this.innerContentElement) {\n this.contentEle.appendChild(this.innerContentElement);\n }\n else if (!isNullOrUndefined(this.content) && this.content !== '' || !this.initialRender) {\n var blazorContain = Object.keys(window);\n if (typeof (this.content) === 'string' && !isBlazor()) {\n this.contentEle.innerHTML = this.sanitizeHelper(this.content);\n }\n else if (this.content instanceof HTMLElement) {\n this.contentEle.appendChild(this.content);\n }\n else {\n this.setTemplate(this.content, this.contentEle, 'content');\n }\n }\n if (!isNullOrUndefined(this.headerContent)) {\n this.element.insertBefore(this.contentEle, this.element.children[1]);\n }\n else {\n this.element.insertBefore(this.contentEle, this.element.children[0]);\n }\n if (this.height === 'auto') {\n if (!this.isBlazorServerRender() && Browser.isIE && this.element.style.width === '' && !isNullOrUndefined(this.width)) {\n this.element.style.width = formatUnit(this.width);\n }\n this.setMaxHeight();\n }\n };\n Dialog.prototype.setTemplate = function (template, toElement, prop) {\n var templateFn;\n var templateProps;\n var blazorContain = Object.keys(window);\n if (toElement.classList.contains(DLG_HEADER)) {\n templateProps = this.element.id + 'header';\n }\n else if (toElement.classList.contains(DLG_FOOTER_CONTENT)) {\n templateProps = this.element.id + 'footerTemplate';\n }\n else {\n templateProps = this.element.id + 'content';\n }\n var templateValue;\n if (!isNullOrUndefined(template.outerHTML)) {\n toElement.appendChild(template);\n }\n else if ((typeof template !== 'string') || (isBlazor() && !this.isStringTemplate)) {\n templateFn = compile(template);\n templateValue = template;\n }\n else {\n toElement.innerHTML = this.sanitizeHelper(template);\n }\n var fromElements = [];\n if (!isNullOrUndefined(templateFn)) {\n var isString = (isBlazor() &&\n !this.isStringTemplate && (templateValue).indexOf('Popup Content
Blazor') === 0) ?\n this.isStringTemplate : true;\n for (var _i = 0, _a = templateFn({}, this, prop, templateProps, isString); _i < _a.length; _i++) {\n var item = _a[_i];\n fromElements.push(item);\n }\n append([].slice.call(fromElements), toElement);\n }\n };\n /**\n * @hidden\n */\n Dialog.prototype.sanitizeHelper = function (value) {\n if (this.enableHtmlSanitizer) {\n var dialogItem = SanitizeHtmlHelper.beforeSanitize();\n var beforeEvent = {\n cancel: false,\n helper: null\n };\n extend(dialogItem, dialogItem, beforeEvent);\n this.trigger('beforeSanitizeHtml', dialogItem);\n if (dialogItem.cancel && !isNullOrUndefined(dialogItem.helper)) {\n value = dialogItem.helper(value);\n }\n else if (!dialogItem.cancel) {\n value = SanitizeHtmlHelper.serializeValue(dialogItem, value);\n }\n }\n return value;\n };\n Dialog.prototype.setMaxHeight = function () {\n if (!this.allowMaxHeight) {\n return;\n }\n var display = this.element.style.display;\n this.element.style.display = 'none';\n this.element.style.maxHeight = (!isNullOrUndefined(this.target)) && (this.targetEle.offsetHeight < window.innerHeight) ?\n (this.targetEle.offsetHeight - 20) + 'px' : (window.innerHeight - 20) + 'px';\n this.element.style.display = display;\n if (Browser.isIE && this.height === 'auto' && !isNullOrUndefined(this.contentEle)\n && this.element.offsetHeight < this.contentEle.offsetHeight) {\n this.element.style.height = 'inherit';\n }\n };\n Dialog.prototype.setEnableRTL = function () {\n if (!this.isBlazorServerRender()) {\n this.enableRtl ? addClass([this.element], RTL) : removeClass([this.element], RTL);\n }\n if (!isNullOrUndefined(this.element.querySelector('.e-resize-handle'))) {\n removeResize();\n this.setResize();\n }\n };\n Dialog.prototype.setTargetContent = function () {\n var _this = this;\n if (isNullOrUndefined(this.content) || this.content === '') {\n var isContent = this.element.innerHTML.replace(/\\s|<(\\/?|\\!?)(!--!--)>/g, '') !== '';\n if (this.element.children.length > 0 || isContent) {\n this.innerContentElement = document.createDocumentFragment();\n [].slice.call(this.element.childNodes).forEach(function (el) {\n if (el.nodeType !== 8) {\n _this.innerContentElement.appendChild(el);\n }\n });\n }\n }\n };\n Dialog.prototype.setHeader = function () {\n if (this.headerEle) {\n this.headerEle.innerHTML = '';\n }\n else {\n this.headerEle = this.createElement('div', { id: this.element.id + '_title', className: DLG_HEADER });\n }\n this.createHeaderContent();\n this.headerContent.appendChild(this.headerEle);\n this.setTemplate(this.header, this.headerEle, 'header');\n attributes(this.element, { 'aria-labelledby': this.element.id + '_title' });\n this.element.insertBefore(this.headerContent, this.element.children[0]);\n };\n Dialog.prototype.setFooterTemplate = function () {\n if (this.ftrTemplateContent) {\n this.ftrTemplateContent.innerHTML = '';\n }\n else {\n this.ftrTemplateContent = this.createElement('div', {\n className: DLG_FOOTER_CONTENT\n });\n }\n if (this.footerTemplate !== '' && !isNullOrUndefined(this.footerTemplate)) {\n this.setTemplate(this.footerTemplate, this.ftrTemplateContent, 'footerTemplate');\n }\n else {\n this.ftrTemplateContent.innerHTML = this.buttonContent.join('');\n }\n this.element.appendChild(this.ftrTemplateContent);\n };\n Dialog.prototype.createHeaderContent = function () {\n if (isNullOrUndefined(this.headerContent)) {\n this.headerContent = this.createElement('div', { id: this.element.id + '_dialog-header', className: DLG_HEADER_CONTENT });\n }\n };\n Dialog.prototype.renderCloseIcon = function () {\n this.closeIcon = this.createElement('button', { className: DLG_CLOSE_ICON_BTN, attrs: { type: 'button' } });\n this.closeIconBtnObj = new Button({ cssClass: 'e-flat', iconCss: DLG_CLOSE_ICON + ' ' + ICON });\n this.closeIconTitle();\n if (!isNullOrUndefined(this.headerContent)) {\n prepend([this.closeIcon], this.headerContent);\n }\n else {\n this.createHeaderContent();\n prepend([this.closeIcon], this.headerContent);\n this.element.insertBefore(this.headerContent, this.element.children[0]);\n }\n this.closeIconBtnObj.appendTo(this.closeIcon);\n };\n Dialog.prototype.closeIconTitle = function () {\n this.l10n.setLocale(this.locale);\n var closeIconTitle = this.l10n.getConstant('close');\n this.closeIcon.setAttribute('title', closeIconTitle);\n this.closeIcon.setAttribute('aria-label', closeIconTitle);\n };\n Dialog.prototype.setCSSClass = function (oldCSSClass) {\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n if (oldCSSClass) {\n removeClass([this.element], oldCSSClass.split(' '));\n }\n };\n Dialog.prototype.setIsModal = function () {\n this.dlgContainer = this.createElement('div', { className: DLG_CONTAINER });\n this.element.classList.remove(DLG_SHOW);\n this.element.parentNode.insertBefore(this.dlgContainer, this.element);\n this.dlgContainer.appendChild(this.element);\n addClass([this.element], MODAL_DLG);\n this.dlgOverlay = this.createElement('div', { className: DLG_OVERLAY });\n this.dlgOverlay.style.zIndex = (this.zIndex - 1).toString();\n this.dlgContainer.appendChild(this.dlgOverlay);\n };\n Dialog.prototype.getValidFocusNode = function (items) {\n var node;\n for (var u = 0; u < items.length; u++) {\n node = items[u];\n if ((node.clientHeight > 0 || (node.tagName.toLowerCase() === 'a' && node.hasAttribute('href'))) && node.tabIndex > -1 &&\n !node.disabled && !this.disableElement(node, '[disabled],[aria-disabled=\"true\"],[type=\"hidden\"]')) {\n return node;\n }\n else {\n node = null;\n }\n }\n return node;\n };\n Dialog.prototype.focusableElements = function (content) {\n if (!isNullOrUndefined(content)) {\n var value = 'input,select,textarea,button,a,[contenteditable=\"true\"],[tabindex]';\n var items = content.querySelectorAll(value);\n return this.getValidFocusNode(items);\n }\n return null;\n };\n Dialog.prototype.getAutoFocusNode = function (container) {\n var node = container.querySelector('.' + DLG_CLOSE_ICON_BTN);\n var value = '[autofocus]';\n var items = container.querySelectorAll(value);\n var validNode = this.getValidFocusNode(items);\n if (isBlazor()) {\n this.primaryButtonEle = this.element.getElementsByClassName('e-primary')[0];\n }\n if (!isNullOrUndefined(validNode)) {\n node = validNode;\n }\n else {\n validNode = this.focusableElements(this.contentEle);\n if (!isNullOrUndefined(validNode)) {\n return node = validNode;\n }\n else if (!isNullOrUndefined(this.primaryButtonEle)) {\n return this.element.querySelector('.' + DLG_PRIMARY_BUTTON);\n }\n }\n return node;\n };\n Dialog.prototype.disableElement = function (element, t) {\n var elementMatch = element ? element.matches || element.webkitMatchesSelector || element.msMatchesSelector : null;\n if (elementMatch) {\n for (; element; element = element.parentNode) {\n if (element instanceof Element && elementMatch.call(element, t)) {\n /* istanbul ignore next */\n return element;\n }\n }\n }\n return null;\n };\n Dialog.prototype.focusContent = function () {\n var element = this.getAutoFocusNode(this.element);\n var node = !isNullOrUndefined(element) ? element : this.element;\n var userAgent = Browser.userAgent;\n if (userAgent.indexOf('MSIE ') > 0 || userAgent.indexOf('Trident/') > 0) {\n this.element.focus();\n }\n node.focus();\n this.bindEvent(this.element);\n };\n Dialog.prototype.bindEvent = function (element) {\n EventHandler.add(element, 'keydown', this.keyDown, this);\n };\n Dialog.prototype.unBindEvent = function (element) {\n EventHandler.remove(element, 'keydown', this.keyDown);\n };\n Dialog.prototype.updateSanitizeContent = function () {\n if (!this.isBlazorServerRender()) {\n this.contentEle.innerHTML = this.sanitizeHelper(this.content);\n }\n };\n Dialog.prototype.isBlazorServerRender = function () {\n return isBlazor() && this.isServerRendered;\n };\n /**\n * Module required function\n * @private\n */\n Dialog.prototype.getModuleName = function () {\n return 'dialog';\n };\n /**\n * Called internally if any of the property value changed\n * @private\n */\n Dialog.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'content':\n if (!isNullOrUndefined(this.content) && this.content !== '') {\n if (this.isBlazorServerRender()) {\n this.contentEle = this.element.querySelector('.e-dlg-content');\n }\n if (!isNullOrUndefined(this.contentEle) && this.contentEle.getAttribute('role') !== 'dialog') {\n if (!this.isBlazorServerRender()) {\n this.contentEle.innerHTML = '';\n }\n typeof (this.content) === 'string' ? (this.isBlazorServerRender()\n && (this.contentEle.innerText === '')) ?\n this.contentEle.insertAdjacentHTML('beforeend', this.sanitizeHelper(this.content)) :\n this.updateSanitizeContent() :\n this.contentEle.appendChild(this.content);\n this.setMaxHeight();\n }\n else {\n if (!this.isBlazorServerRender() ||\n isNullOrUndefined(this.element.querySelector('.e-dlg-content'))) {\n this.setContent();\n }\n }\n }\n else if (!isNullOrUndefined(this.contentEle)) {\n detach(this.contentEle);\n this.contentEle = null;\n }\n break;\n case 'header':\n if (this.header === '' || isNullOrUndefined(this.header)) {\n if (this.headerEle) {\n detach(this.headerEle);\n this.headerEle = null;\n }\n }\n else {\n if (!this.isBlazorServerRender() ||\n isNullOrUndefined(this.element.querySelector('.e-dlg-header-content'))) {\n this.setHeader();\n }\n }\n break;\n case 'footerTemplate':\n if (this.footerTemplate === '' || isNullOrUndefined(this.footerTemplate)) {\n if (!this.ftrTemplateContent) {\n return;\n }\n detach(this.ftrTemplateContent);\n this.ftrTemplateContent = null;\n this.buttons = [{}];\n }\n else {\n if (!this.isBlazorServerRender() ||\n isNullOrUndefined(this.element.querySelector('.e-footer-content'))) {\n this.setFooterTemplate();\n }\n this.buttons = [{}];\n }\n break;\n case 'showCloseIcon':\n if (this.element.getElementsByClassName(DLG_CLOSE_ICON).length > 0) {\n if (!this.showCloseIcon && (this.header === '' || isNullOrUndefined(this.header))) {\n detach(this.headerContent);\n this.headerContent = null;\n }\n else if (!this.showCloseIcon) {\n detach(this.closeIcon);\n }\n else {\n if (this.isBlazorServerRender()) {\n this.wireEvents();\n }\n }\n }\n else {\n if (!this.isBlazorServerRender()) {\n this.renderCloseIcon();\n }\n this.wireEvents();\n }\n break;\n case 'locale':\n if (this.showCloseIcon) {\n this.closeIconTitle();\n }\n break;\n case 'visible':\n this.visible ? this.show() : this.hide();\n break;\n case 'isModal':\n this.updateIsModal();\n break;\n case 'height':\n setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'width':\n setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });\n break;\n case 'zIndex':\n this.popupObj.zIndex = this.zIndex;\n if (this.isModal) {\n this.setOverlayZindex(this.zIndex);\n }\n if (this.element.style.zIndex !== this.zIndex.toString()) {\n this.calculatezIndex = false;\n }\n break;\n case 'cssClass':\n this.setCSSClass(oldProp.cssClass);\n break;\n case 'buttons':\n var buttonCount = this.buttons.length;\n if (!isNullOrUndefined(this.ftrTemplateContent) && !this.isBlazorServerRender()) {\n detach(this.ftrTemplateContent);\n this.ftrTemplateContent = null;\n }\n for (var i = 0; i < buttonCount; i++) {\n if (!isNullOrUndefined(this.buttons[i].buttonModel)) {\n this.footerTemplate = '';\n this.setButton();\n }\n }\n break;\n case 'allowDragging':\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n else {\n this.dragObj.destroy();\n }\n break;\n case 'target':\n this.setTarget(newProp.target);\n break;\n case 'position':\n this.checkPositionData();\n if (this.isModal) {\n var positionX = isNullOrUndefined(oldProp.position.X) ? this.position.X : oldProp.position.X;\n var positionY = isNullOrUndefined(oldProp.position.Y) ? this.position.Y : oldProp.position.Y;\n if (this.dlgContainer.classList.contains('e-dlg-' + positionX + '-' + positionY)) {\n this.dlgContainer.classList.remove('e-dlg-' + positionX + '-' + positionY);\n }\n }\n this.positionChange();\n break;\n case 'enableRtl':\n this.setEnableRTL();\n break;\n case 'enableResize':\n this.setResize();\n break;\n }\n }\n };\n Dialog.prototype.setTarget = function (target) {\n this.popupObj.relateTo = target;\n this.target = target;\n this.targetEle = ((typeof this.target) === 'string') ?\n document.querySelector(this.target) : this.target;\n if (this.dragObj) {\n this.dragObj.dragArea = this.targetEle;\n }\n this.setMaxHeight();\n if (this.isModal) {\n this.updateIsModal();\n }\n if (this.enableResize) {\n this.setResize();\n }\n };\n Dialog.prototype.updateIsModal = function () {\n this.element.setAttribute('aria-modal', this.isModal ? 'true' : 'false');\n if (this.isModal) {\n this.setIsModal();\n this.element.style.top = '0px';\n this.element.style.left = '0px';\n if (!isNullOrUndefined(this.targetEle)) {\n this.targetEle.appendChild(this.dlgContainer);\n }\n }\n else {\n removeClass([this.element], MODAL_DLG);\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n detach(this.dlgOverlay);\n while (this.dlgContainer.firstChild) {\n this.dlgContainer.parentElement.insertBefore(this.dlgContainer.firstChild, this.dlgContainer);\n }\n this.dlgContainer.parentElement.removeChild(this.dlgContainer);\n }\n if (this.visible) {\n this.show();\n }\n this.positionChange();\n if (this.isModal && this.dlgOverlay) {\n EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);\n }\n };\n Dialog.prototype.setzIndex = function (zIndexElement, setPopupZindex) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.zIndex = getZindexPartial(zIndexElement);\n this.isProtectedOnChange = prevOnChange;\n if (setPopupZindex) {\n this.popupObj.zIndex = this.zIndex;\n }\n };\n Dialog.prototype.windowResizeHandler = function () {\n setMaxWidth(this.targetEle.clientWidth);\n setMaxHeight(this.targetEle.clientHeight);\n this.setMaxHeight();\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @private\n */\n Dialog.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * To destroy the widget\n * @method destroy\n * @return {void}\n * @memberof dialog\n */\n Dialog.prototype.destroy = function () {\n if (this.isDestroyed) {\n return;\n }\n var classArray = [RTL, MODAL_DLG, DLG_RESIZABLE, DLG_RESTRICT_LEFT_VALUE, FULLSCREEN, DEVICE];\n var attrs = ['role', 'aria-modal', 'aria-labelledby', 'aria-describedby', 'aria-grabbed', 'tabindex', 'style'];\n removeClass([this.targetEle], [DLG_TARGET, SCROLL_DISABLED]);\n if (this.element.classList.contains(FULLSCREEN)) {\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n if (this.isModal) {\n removeClass([(!isNullOrUndefined(this.targetEle) ? this.targetEle : document.body)], SCROLL_DISABLED);\n }\n this.unWireEvents();\n if (!isNullOrUndefined(this.btnObj)) {\n for (var i = 0; i < this.btnObj.length; i++) {\n this.btnObj[i].destroy();\n }\n }\n if (!isNullOrUndefined(this.dragObj)) {\n this.dragObj.destroy();\n }\n if (this.popupObj.element.classList.contains(POPUP_ROOT)) {\n this.popupObj.destroy();\n }\n removeClass([this.element], classArray);\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n removeClass([this.element], this.cssClass.split(' '));\n }\n if (!isNullOrUndefined(this.refElement) && !isNullOrUndefined(this.refElement.parentElement)) {\n this.refElement.parentElement.insertBefore((this.isModal ? this.dlgContainer : this.element), this.refElement);\n detach(this.refElement);\n this.refElement = undefined;\n }\n if (this.isModal && !this.isBlazorServerRender()) {\n detach(this.dlgOverlay);\n this.dlgContainer.parentNode.insertBefore(this.element, this.dlgContainer);\n detach(this.dlgContainer);\n }\n if (!this.isBlazorServerRender()) {\n this.element.innerHTML = this.clonedEle.innerHTML;\n }\n if (this.isBlazorServerRender()) {\n if (!isNullOrUndefined(this.element.children)) {\n for (var i = 0; i <= this.element.children.length; i++) {\n i = i - i;\n detach(this.element.children[i]);\n }\n }\n }\n for (var i = 0; i < attrs.length; i++) {\n this.element.removeAttribute(attrs[i]);\n }\n if (!this.isBlazorServerRender()) {\n _super.prototype.destroy.call(this);\n }\n else {\n this.isDestroyed = true;\n }\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.clearTemplate();\n }\n };\n Dialog.prototype.wireWindowResizeEvent = function () {\n window.addEventListener('resize', this.windowResizeHandler.bind(this));\n };\n Dialog.prototype.unWireWindowResizeEvent = function () {\n window.removeEventListener('resize', this.windowResizeHandler.bind(this));\n };\n /**\n * Binding event to the element while widget creation\n * @hidden\n */\n Dialog.prototype.wireEvents = function () {\n if (this.isBlazorServerRender() && this.showCloseIcon) {\n this.closeIcon = this.element.getElementsByClassName('e-dlg-closeicon-btn')[0];\n }\n if (this.showCloseIcon) {\n EventHandler.add(this.closeIcon, 'click', this.closeIconClickEventHandler, this);\n }\n if (this.isModal && this.dlgOverlay) {\n EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);\n }\n };\n /**\n * Unbinding event to the element while widget destroy\n * @hidden\n */\n Dialog.prototype.unWireEvents = function () {\n if (this.showCloseIcon) {\n EventHandler.remove(this.closeIcon, 'click', this.closeIconClickEventHandler);\n }\n if (this.isModal) {\n EventHandler.remove(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler);\n }\n if (this.buttons.length > 0 && !isNullOrUndefined(this.buttons[0].buttonModel) && this.footerTemplate === '') {\n for (var i = 0; i < this.buttons.length; i++) {\n if (typeof (this.buttons[i].click) === 'function') {\n EventHandler.remove(this.ftrTemplateContent.children[i], 'click', this.buttons[i].click);\n }\n }\n }\n };\n /**\n * Refreshes the dialog's position when the user changes its header and footer height/width dynamically.\n * @return {void}\n */\n Dialog.prototype.refreshPosition = function () {\n this.popupObj.refreshPosition();\n };\n /**\n * Opens the dialog if it is in hidden state.\n * To open the dialog with full screen width, set the parameter to true.\n * @param { boolean } isFullScreen - Enable the fullScreen Dialog.\n * @return {void}\n */\n Dialog.prototype.show = function (isFullScreen) {\n var _this = this;\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n if (!this.element.classList.contains(DLG_SHOW) || (!isNullOrUndefined(isFullScreen))) {\n if (!isNullOrUndefined(isFullScreen)) {\n this.fullScreen(isFullScreen);\n }\n var eventArgs_1 = isBlazor() ? {\n cancel: false,\n element: this.element,\n container: this.isModal ? this.dlgContainer : this.element,\n maxHeight: this.element.style.maxHeight\n } : {\n cancel: false,\n element: this.element,\n container: this.isModal ? this.dlgContainer : this.element,\n target: this.target,\n maxHeight: this.element.style.maxHeight\n };\n this.trigger('beforeOpen', eventArgs_1, function (beforeOpenArgs) {\n if (!beforeOpenArgs.cancel) {\n if (_this.element.style.maxHeight !== eventArgs_1.maxHeight) {\n _this.allowMaxHeight = false;\n _this.element.style.maxHeight = eventArgs_1.maxHeight;\n }\n _this.storeActiveElement = document.activeElement;\n _this.element.tabIndex = -1;\n if (_this.isModal && (!isNullOrUndefined(_this.dlgOverlay))) {\n _this.dlgOverlay.style.display = 'block';\n _this.dlgContainer.style.display = 'flex';\n removeClass([_this.dlgOverlay], 'e-fade');\n if (!isNullOrUndefined(_this.targetEle)) {\n if (_this.targetEle === document.body) {\n _this.dlgContainer.style.position = 'fixed';\n }\n else {\n _this.dlgContainer.style.position = 'absolute';\n }\n _this.dlgOverlay.style.position = 'absolute';\n _this.element.style.position = 'relative';\n addClass([_this.targetEle], [DLG_TARGET, SCROLL_DISABLED]);\n }\n else {\n addClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n }\n var openAnimation = {\n name: _this.animationSettings.effect + 'In',\n duration: _this.animationSettings.duration,\n delay: _this.animationSettings.delay\n };\n var zIndexElement = (_this.isModal) ? _this.element.parentElement : _this.element;\n if (_this.calculatezIndex) {\n _this.setzIndex(zIndexElement, true);\n setStyleAttribute(_this.element, { 'zIndex': _this.zIndex });\n if (_this.isModal) {\n _this.setOverlayZindex(_this.zIndex);\n }\n }\n _this.animationSettings.effect === 'None' ? _this.popupObj.show() : _this.popupObj.show(openAnimation);\n _this.dialogOpen = true;\n var prevOnChange = _this.isProtectedOnChange;\n _this.isProtectedOnChange = true;\n _this.visible = true;\n _this.preventVisibility = true;\n _this.isProtectedOnChange = prevOnChange;\n }\n });\n }\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * Closes the dialog if it is in visible state.\n * @return {void}\n */\n Dialog.prototype.hide = function (event) {\n var _this = this;\n if (!this.element.classList.contains(ROOT)) {\n return;\n }\n if (this.preventVisibility) {\n var eventArgs = isBlazor() ? {\n cancel: false,\n isInteracted: event ? true : false,\n element: this.element,\n container: this.isModal ? this.dlgContainer : this.element,\n event: event\n } : {\n cancel: false,\n isInteracted: event ? true : false,\n element: this.element,\n target: this.target,\n container: this.isModal ? this.dlgContainer : this.element,\n event: event\n };\n this.closeArgs = eventArgs;\n this.trigger('beforeClose', eventArgs, function (beforeCloseArgs) {\n if (!beforeCloseArgs.cancel) {\n if (_this.isModal) {\n !isNullOrUndefined(_this.targetEle) ? removeClass([_this.targetEle], [DLG_TARGET, SCROLL_DISABLED]) :\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n }\n var closeAnimation = {\n name: _this.animationSettings.effect + 'Out',\n duration: _this.animationSettings.duration,\n delay: _this.animationSettings.delay\n };\n _this.animationSettings.effect === 'None' ? _this.popupObj.hide() : _this.popupObj.hide(closeAnimation);\n _this.dialogOpen = false;\n var prevOnChange = _this.isProtectedOnChange;\n _this.isProtectedOnChange = true;\n _this.visible = false;\n _this.preventVisibility = false;\n _this.isProtectedOnChange = prevOnChange;\n }\n });\n }\n };\n /**\n * Specifies to view the Full screen Dialog.\n * @private\n */\n Dialog.prototype.fullScreen = function (args) {\n var top = this.element.offsetTop;\n var left = this.element.offsetLeft;\n if (args) {\n addClass([this.element], FULLSCREEN);\n var display = this.element.style.display;\n this.element.style.display = 'none';\n this.element.style.maxHeight = (!isNullOrUndefined(this.target)) ?\n (this.targetEle.offsetHeight) + 'px' : (window.innerHeight) + 'px';\n this.element.style.display = display;\n addClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n if (this.allowDragging && !isNullOrUndefined(this.dragObj)) {\n this.dragObj.destroy();\n }\n }\n else {\n removeClass([this.element], FULLSCREEN);\n removeClass([document.body], [DLG_TARGET, SCROLL_DISABLED]);\n if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {\n this.setAllowDragging();\n }\n }\n return args;\n };\n /**\n * Returns the dialog button instances.\n * Based on that, you can dynamically change the button states.\n * @param { number } index - Index of the button.\n * @return {Button}\n */\n Dialog.prototype.getButtons = function (index) {\n if (!isNullOrUndefined(index)) {\n return this.btnObj[index];\n }\n return this.btnObj;\n };\n __decorate([\n Property('')\n ], Dialog.prototype, \"content\", void 0);\n __decorate([\n Property(true)\n ], Dialog.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"showCloseIcon\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"isModal\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"header\", void 0);\n __decorate([\n Property(true)\n ], Dialog.prototype, \"visible\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"enableResize\", void 0);\n __decorate([\n Property(['South-East'])\n ], Dialog.prototype, \"resizeHandles\", void 0);\n __decorate([\n Property('auto')\n ], Dialog.prototype, \"height\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"minHeight\", void 0);\n __decorate([\n Property('100%')\n ], Dialog.prototype, \"width\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"cssClass\", void 0);\n __decorate([\n Property(1000)\n ], Dialog.prototype, \"zIndex\", void 0);\n __decorate([\n Property(null)\n ], Dialog.prototype, \"target\", void 0);\n __decorate([\n Property('')\n ], Dialog.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property(false)\n ], Dialog.prototype, \"allowDragging\", void 0);\n __decorate([\n Collection([{}], ButtonProps)\n ], Dialog.prototype, \"buttons\", void 0);\n __decorate([\n Property(true)\n ], Dialog.prototype, \"closeOnEscape\", void 0);\n __decorate([\n Complex({}, AnimationSettings)\n ], Dialog.prototype, \"animationSettings\", void 0);\n __decorate([\n Complex({ X: 'center', Y: 'center' }, PositionData)\n ], Dialog.prototype, \"position\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"beforeSanitizeHtml\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"dragStart\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"dragStop\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"drag\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"overlayClick\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"resizeStart\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"resizing\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"resizeStop\", void 0);\n __decorate([\n Event()\n ], Dialog.prototype, \"destroyed\", void 0);\n Dialog = __decorate([\n NotifyPropertyChanges\n ], Dialog);\n return Dialog;\n}(Component));\nexport { Dialog };\n/**\n * Base for creating Alert and Confirmation Dialog through util method.\n */\nexport var DialogUtility;\n(function (DialogUtility) {\n /**\n * An alert dialog box is used to display warning like messages to the users.\n * ```\n * Eg : DialogUtility.alert('Alert message');\n *\n * ```\n */\n /* istanbul ignore next */\n function alert(args) {\n var dialogComponent;\n var dialogElement = createElement('div', { 'className': DLG_UTIL_ALERT });\n document.body.appendChild(dialogElement);\n var alertDialogObj;\n var okButtonModel = [{\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n }];\n if (typeof (args) === 'string') {\n alertDialogObj = createDialog({ content: args,\n position: { X: 'center', Y: 'top' },\n isModal: true, header: DLG_UTIL_DEFAULT_TITLE,\n buttons: okButtonModel }, dialogElement);\n }\n else {\n alertDialogObj = createDialog(alertOptions(args), dialogElement);\n }\n alertDialogObj.close = function () {\n if (args && args.close) {\n args.close.apply(alertDialogObj);\n }\n alertDialogObj.destroy();\n if (alertDialogObj.element.classList.contains('e-dlg-modal')) {\n alertDialogObj.element.parentElement.remove();\n alertDialogObj.target.classList.remove(DLG_UTIL_ROOT);\n }\n else {\n alertDialogObj.element.remove();\n }\n };\n return alertDialogObj;\n }\n DialogUtility.alert = alert;\n /**\n * A confirm dialog displays a specified message along with ‘OK’ and ‘Cancel’ button.\n * ```\n * Eg : DialogUtility.confirm('Confirm dialog message');\n *\n * ```\n */\n /* istanbul ignore next */\n function confirm(args) {\n var dialogComponent;\n var dialogElement = createElement('div', { 'className': DLG_UTIL_CONFIRM });\n document.body.appendChild(dialogElement);\n var confirmDialogObj;\n var okCancelButtonModel = [{\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n }, {\n buttonModel: { content: 'Cancel' },\n click: function () {\n this.hide();\n }\n }];\n if (typeof (args) === 'string') {\n confirmDialogObj = createDialog({ position: { X: 'center', Y: 'top' }, content: args, isModal: true,\n header: DLG_UTIL_DEFAULT_TITLE, buttons: okCancelButtonModel\n }, dialogElement);\n }\n else {\n confirmDialogObj = createDialog(confirmOptions(args), dialogElement);\n }\n confirmDialogObj.close = function () {\n if (args && args.close) {\n args.close.apply(confirmDialogObj);\n }\n confirmDialogObj.destroy();\n if (confirmDialogObj.element.classList.contains('e-dlg-modal')) {\n confirmDialogObj.element.parentElement.remove();\n confirmDialogObj.target.classList.remove(DLG_UTIL_ROOT);\n }\n else {\n confirmDialogObj.element.remove();\n }\n };\n return confirmDialogObj;\n }\n DialogUtility.confirm = confirm;\n function createDialog(options, element) {\n var dialogObject = new Dialog(options);\n dialogObject.appendTo(element);\n return dialogObject;\n }\n function alertOptions(option) {\n var options = {};\n options.buttons = [];\n options = formOptions(options, option);\n options = setAlertButtonModel(options, option);\n return options;\n }\n function confirmOptions(option) {\n var options = {};\n options.buttons = [];\n options = formOptions(options, option);\n options = setConfirmButtonModel(options, option);\n return options;\n }\n function formOptions(options, option) {\n options.header = !isNullOrUndefined(option.title) ? option.title : DLG_UTIL_DEFAULT_TITLE;\n options.content = !isNullOrUndefined(option.content) ? option.content : '';\n options.isModal = !isNullOrUndefined(option.isModal) ? option.isModal : true;\n options.showCloseIcon = !isNullOrUndefined(option.showCloseIcon) ? option.showCloseIcon : false;\n options.allowDragging = !isNullOrUndefined(option.isDraggable) ? option.isDraggable : false;\n options.closeOnEscape = !isNullOrUndefined(option.closeOnEscape) ? option.closeOnEscape : false;\n options.position = !isNullOrUndefined(option.position) ? option.position : { X: 'center', Y: 'top' };\n options.animationSettings = !isNullOrUndefined(option.animationSettings) ? option.animationSettings :\n { effect: 'Fade', duration: 400, delay: 0 };\n options.cssClass = !isNullOrUndefined(option.cssClass) ? option.cssClass : '';\n options.zIndex = !isNullOrUndefined(option.zIndex) ? option.zIndex : 1000;\n options.open = !isNullOrUndefined(option.open) ? option.open : null;\n return options;\n }\n function setAlertButtonModel(options, option) {\n var alertButtonModel = [{\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n }];\n if (!isNullOrUndefined(option.okButton)) {\n options.buttons[0] = formButtonModel(options.buttons[0], option.okButton, alertButtonModel[0]);\n }\n else {\n options.buttons = alertButtonModel;\n }\n return options;\n }\n function setConfirmButtonModel(options, option) {\n var okButtonModel = {\n buttonModel: { isPrimary: true, content: 'OK' },\n click: function () {\n this.hide();\n }\n };\n var cancelButtonModel = {\n buttonModel: { content: 'Cancel' },\n click: function () {\n this.hide();\n }\n };\n if (!isNullOrUndefined(option.okButton)) {\n options.buttons[0] = formButtonModel(options.buttons[0], option.okButton, okButtonModel);\n }\n else {\n options.buttons[0] = okButtonModel;\n }\n if (!isNullOrUndefined(option.cancelButton)) {\n options.buttons[1] = formButtonModel(options.buttons[1], option.cancelButton, cancelButtonModel);\n }\n else {\n options.buttons[1] = cancelButtonModel;\n }\n return options;\n }\n function formButtonModel(buttonModel, option, buttonPropModel) {\n var buttonProps = buttonPropModel;\n if (!isNullOrUndefined(option.text)) {\n buttonProps.buttonModel.content = option.text;\n }\n if (!isNullOrUndefined(option.icon)) {\n buttonProps.buttonModel.iconCss = option.icon;\n }\n if (!isNullOrUndefined(option.cssClass)) {\n buttonProps.buttonModel.cssClass = option.cssClass;\n }\n if (!isNullOrUndefined(option.click)) {\n buttonProps.click = option.click;\n }\n return buttonProps;\n }\n})(DialogUtility || (DialogUtility = {}));\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport * as React from 'react';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * Represents the React Dialog Component\n * ```html\n * \n * ```\n */\nvar DialogComponent = /** @class */ (function (_super) {\n __extends(DialogComponent, _super);\n function DialogComponent(props) {\n var _this = _super.call(this, props) || this;\n _this.initRenderCalled = false;\n _this.checkInjectedModules = false;\n _this.directivekeys = { 'buttons': 'dialogButton' };\n _this.immediateRender = false;\n _this.portals = [];\n return _this;\n }\n DialogComponent.prototype.render = function () {\n if (((this.element && !this.initRenderCalled) || this.refreshing) && !this.isReactForeceUpdate) {\n _super.prototype.render.call(this);\n this.initRenderCalled = true;\n }\n else {\n return React.createElement('div', this.getDefaultAttributes(), [].concat(this.props.children, this.portals));\n }\n };\n return DialogComponent;\n}(Dialog));\nexport { DialogComponent };\napplyMixins(DialogComponent, [ComponentBase, React.Component]);\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Property, Event, KeyboardEvents, rippleEffect } from '@syncfusion/ej2-base';\nimport { getUniqueID, compile as templateCompiler } from '@syncfusion/ej2-base';\nimport { isVisible, closest, attributes, detach, select, addClass, append } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, ChildProperty, Collection, Animation } from '@syncfusion/ej2-base';\nimport { setStyleAttribute as setStyle, Complex } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined as isNOU, formatUnit, selectAll, SanitizeHtmlHelper, isRippleEnabled } from '@syncfusion/ej2-base';\nvar CLS_ACRDN_ROOT = 'e-acrdn-root';\nvar CLS_ROOT = 'e-accordion';\nvar CLS_ITEM = 'e-acrdn-item';\nvar CLS_ITEMFOCUS = 'e-item-focus';\nvar CLS_ITEMHIDE = 'e-hide';\nvar CLS_HEADER = 'e-acrdn-header';\nvar CLS_HEADERICN = 'e-acrdn-header-icon';\nvar CLS_HEADERCTN = 'e-acrdn-header-content';\nvar CLS_CONTENT = 'e-acrdn-panel';\nvar CLS_CTENT = 'e-acrdn-content';\nvar CLS_TOOGLEICN = 'e-toggle-icon';\nvar CLS_COLLAPSEICN = 'e-tgl-collapse-icon e-icons';\nvar CLS_EXPANDICN = 'e-expand-icon';\nvar CLS_RTL = 'e-rtl';\nvar CLS_CTNHIDE = 'e-content-hide';\nvar CLS_SLCT = 'e-select';\nvar CLS_SLCTED = 'e-selected';\nvar CLS_ACTIVE = 'e-active';\nvar CLS_ANIMATE = 'e-animate';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_TOGANIMATE = 'e-toggle-animation';\nvar CLS_NEST = 'e-nested';\nvar CLS_EXPANDSTATE = 'e-expand-state';\nvar CLS_CONTAINER = 'e-accordion-container';\n/**\n * Objects used for configuring the Accordion expanding item action properties.\n */\nvar AccordionActionSettings = /** @class */ (function (_super) {\n __extends(AccordionActionSettings, _super);\n function AccordionActionSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('SlideDown')\n ], AccordionActionSettings.prototype, \"effect\", void 0);\n __decorate([\n Property(400)\n ], AccordionActionSettings.prototype, \"duration\", void 0);\n __decorate([\n Property('linear')\n ], AccordionActionSettings.prototype, \"easing\", void 0);\n return AccordionActionSettings;\n}(ChildProperty));\nexport { AccordionActionSettings };\n/**\n * Objects used for configuring the Accordion animation properties.\n */\nvar AccordionAnimationSettings = /** @class */ (function (_super) {\n __extends(AccordionAnimationSettings, _super);\n function AccordionAnimationSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Complex({ effect: 'SlideUp', duration: 400, easing: 'linear' }, AccordionActionSettings)\n ], AccordionAnimationSettings.prototype, \"collapse\", void 0);\n __decorate([\n Complex({ effect: 'SlideDown', duration: 400, easing: 'linear' }, AccordionActionSettings)\n ], AccordionAnimationSettings.prototype, \"expand\", void 0);\n return AccordionAnimationSettings;\n}(ChildProperty));\nexport { AccordionAnimationSettings };\n/**\n * An item object that is used to configure Accordion items.\n */\nvar AccordionItem = /** @class */ (function (_super) {\n __extends(AccordionItem, _super);\n function AccordionItem() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(null)\n ], AccordionItem.prototype, \"content\", void 0);\n __decorate([\n Property(null)\n ], AccordionItem.prototype, \"header\", void 0);\n __decorate([\n Property(null)\n ], AccordionItem.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], AccordionItem.prototype, \"iconCss\", void 0);\n __decorate([\n Property(false)\n ], AccordionItem.prototype, \"expanded\", void 0);\n __decorate([\n Property(true)\n ], AccordionItem.prototype, \"visible\", void 0);\n __decorate([\n Property(false)\n ], AccordionItem.prototype, \"disabled\", void 0);\n return AccordionItem;\n}(ChildProperty));\nexport { AccordionItem };\n/**\n * The Accordion is a vertically collapsible content panel that displays one or more panels at a time within the available space.\n * ```html\n * \n * \n * ```\n */\nvar Accordion = /** @class */ (function (_super) {\n __extends(Accordion, _super);\n /**\n * Initializes a new instance of the Accordion class.\n * @param options - Specifies Accordion model properties as options.\n * @param element - Specifies the element that is rendered as an Accordion.\n */\n function Accordion(options, element) {\n var _this = _super.call(this, options, element) || this;\n /**\n * Contains the keyboard configuration of the Accordion.\n */\n _this.keyConfigs = {\n moveUp: 'uparrow',\n moveDown: 'downarrow',\n enter: 'enter',\n space: 'space',\n home: 'home',\n end: 'end',\n };\n return _this;\n }\n /**\n * Removes the control from the DOM and also removes all its related events.\n * @returns void\n */\n Accordion.prototype.destroy = function () {\n var _this = this;\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.clearTemplate();\n }\n var ele = this.element;\n _super.prototype.destroy.call(this);\n this.unwireEvents();\n this.isDestroy = true;\n this.restoreContent(null);\n [].slice.call(ele.children).forEach(function (el) {\n ele.removeChild(el);\n });\n if (this.trgtEle) {\n while (this.ctrlTem.firstElementChild) {\n ele.appendChild(this.ctrlTem.firstElementChild);\n }\n }\n ele.classList.remove(CLS_ACRDN_ROOT);\n ele.removeAttribute('style');\n ['aria-disabled', 'aria-multiselectable', 'role', 'data-ripple'].forEach(function (attrb) {\n _this.element.removeAttribute(attrb);\n });\n if (!this.isNested && isRippleEnabled) {\n this.removeRippleEffect();\n }\n };\n Accordion.prototype.preRender = function () {\n var nested = closest(this.element, '.' + CLS_CONTENT);\n this.isNested = false;\n this.templateEle = [];\n if (!this.isDestroy) {\n this.isDestroy = false;\n }\n if (!isNOU(nested)) {\n nested.classList.add(CLS_NEST);\n this.isNested = true;\n }\n else {\n this.element.classList.add(CLS_ACRDN_ROOT);\n }\n if (this.enableRtl) {\n this.add(this.element, CLS_RTL);\n }\n };\n Accordion.prototype.add = function (ele, val) {\n ele.classList.add(val);\n };\n Accordion.prototype.remove = function (ele, val) {\n ele.classList.remove(val);\n };\n /**\n * To initialize the control rendering\n * @private\n */\n Accordion.prototype.render = function () {\n if (!this.isServerRendered) {\n this.initializeheaderTemplate();\n this.initializeItemTemplate();\n this.initialize();\n this.renderControl();\n }\n else {\n this.wireFocusEvents();\n }\n this.wireEvents();\n this.renderComplete();\n };\n Accordion.prototype.initialize = function () {\n var width = formatUnit(this.width);\n var height = formatUnit(this.height);\n setStyle(this.element, { 'width': width, 'height': height });\n var ariaAttr = {\n 'aria-disabled': 'false', 'role': 'presentation', 'aria-multiselectable': 'true'\n };\n if (isNOU(this.initExpand)) {\n this.initExpand = [];\n }\n if (this.expandedIndices.length > 0) {\n this.initExpand = this.expandedIndices;\n }\n attributes(this.element, ariaAttr);\n if (this.expandMode === 'Single') {\n this.element.setAttribute('aria-multiselectable', 'false');\n }\n };\n Accordion.prototype.renderControl = function () {\n this.trgtEle = (this.element.children.length > 0) ? select('div', this.element) : null;\n this.renderItems();\n this.initItemExpand();\n };\n Accordion.prototype.wireFocusEvents = function () {\n var acrdItem = [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM));\n for (var _i = 0, acrdItem_1 = acrdItem; _i < acrdItem_1.length; _i++) {\n var item = acrdItem_1[_i];\n var headerEle = item.querySelector('.' + CLS_HEADER);\n if (item.childElementCount > 0 && headerEle) {\n EventHandler.clearEvents(headerEle);\n EventHandler.add(headerEle, 'focus', this.focusIn, this);\n EventHandler.add(headerEle, 'blur', this.focusOut, this);\n }\n }\n };\n Accordion.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'click', this.clickHandler);\n if (!isNOU(this.keyModule)) {\n this.keyModule.destroy();\n }\n };\n Accordion.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n if (!this.isNested && !this.isDestroy) {\n this.removeRippleEffect = rippleEffect(this.element, { selector: '.' + CLS_HEADER });\n }\n if (!this.isNested) {\n this.keyModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown'\n });\n }\n };\n Accordion.prototype.templateParser = function (template) {\n if (template) {\n try {\n if (document.querySelectorAll(template).length) {\n return templateCompiler(document.querySelector(template).innerHTML.trim());\n }\n }\n catch (error) {\n return templateCompiler(template);\n }\n }\n return undefined;\n };\n Accordion.prototype.initializeheaderTemplate = function () {\n if (this.headerTemplate) {\n this.headerTemplateFn = this.templateParser(this.headerTemplate);\n }\n };\n Accordion.prototype.initializeItemTemplate = function () {\n if (this.itemTemplate) {\n this.itemTemplateFn = this.templateParser(this.itemTemplate);\n }\n };\n Accordion.prototype.getheaderTemplate = function () {\n return this.headerTemplateFn;\n };\n Accordion.prototype.getItemTemplate = function () {\n return this.itemTemplateFn;\n };\n Accordion.prototype.focusIn = function (e) {\n e.target.parentElement.classList.add(CLS_ITEMFOCUS);\n };\n Accordion.prototype.focusOut = function (e) {\n e.target.parentElement.classList.remove(CLS_ITEMFOCUS);\n };\n Accordion.prototype.ctrlTemplate = function () {\n this.ctrlTem = this.element.cloneNode(true);\n var innerEles;\n var rootEle = select('.' + CLS_CONTAINER, this.element);\n if (rootEle) {\n innerEles = rootEle.children;\n }\n else {\n innerEles = this.element.children;\n }\n var items = [];\n /* tslint:disable */\n [].slice.call(innerEles).forEach(function (el) {\n items.push({\n header: (el.childElementCount > 0 && el.children[0]) ? (el.children[0]) : '',\n content: (el.childElementCount > 1 && el.children[1]) ? (el.children[1]) : ''\n });\n el.parentNode.removeChild(el);\n });\n /* tslint:enable */\n if (rootEle) {\n this.element.removeChild(rootEle);\n }\n this.setProperties({ items: items }, true);\n };\n Accordion.prototype.toggleIconGenerate = function () {\n var tglIcon = this.createElement('div', { className: CLS_TOOGLEICN });\n var hdrColIcon = this.createElement('span', { className: CLS_COLLAPSEICN });\n tglIcon.appendChild(hdrColIcon);\n return tglIcon;\n };\n Accordion.prototype.initItemExpand = function () {\n var len = this.initExpand.length;\n if (len === 0) {\n return;\n }\n if (this.expandMode === 'Single') {\n this.expandItem(true, this.initExpand[len - 1]);\n }\n else {\n for (var i = 0; i < len; i++) {\n this.expandItem(true, this.initExpand[i]);\n }\n }\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Accordion.prototype.renderItems = function () {\n var _this = this;\n var ele = this.element;\n var innerItem;\n var innerDataSourceItem;\n if (!isNOU(this.trgtEle)) {\n this.ctrlTemplate();\n }\n if (this.dataSource.length > 0) {\n this.dataSource.forEach(function (item, index) {\n innerDataSourceItem = _this.renderInnerItem(item, index);\n ele.appendChild(innerDataSourceItem);\n if (innerDataSourceItem.childElementCount > 0) {\n EventHandler.add(innerDataSourceItem.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);\n EventHandler.add(innerDataSourceItem.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);\n }\n });\n }\n else {\n var items = this.items;\n if (ele && items.length > 0) {\n items.forEach(function (item, index) {\n innerItem = _this.renderInnerItem(item, index);\n ele.appendChild(innerItem);\n if (innerItem.childElementCount > 0) {\n EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);\n EventHandler.add(innerItem.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);\n }\n });\n }\n }\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Accordion.prototype.clickHandler = function (e) {\n var _this = this;\n var trgt = e.target;\n var items = this.getItems();\n var eventArgs = {};\n var index;\n var tglIcon;\n var acrdEle = closest(trgt, '.' + CLS_ROOT);\n if (acrdEle !== this.element) {\n return;\n }\n trgt.classList.add('e-target');\n var acrdnItem = closest(trgt, '.' + CLS_ITEM);\n var acrdnHdr = closest(trgt, '.' + CLS_HEADER);\n var acrdnCtn = closest(trgt, '.' + CLS_CONTENT);\n if (acrdnItem && (isNOU(acrdnHdr) || isNOU(acrdnCtn))) {\n acrdnHdr = acrdnItem.children[0];\n acrdnCtn = acrdnItem.children[1];\n }\n if (acrdnHdr) {\n tglIcon = select('.' + CLS_TOOGLEICN, acrdnHdr);\n }\n var acrdnCtnItem;\n if (acrdnHdr) {\n acrdnCtnItem = closest(acrdnHdr, '.' + CLS_ITEM);\n }\n else if (acrdnCtn) {\n acrdnCtnItem = closest(acrdnCtn, '.' + CLS_ITEM);\n }\n index = this.getIndexByItem(acrdnItem);\n if (acrdnCtnItem) {\n eventArgs.item = items[this.getIndexByItem(acrdnCtnItem)];\n }\n eventArgs.originalEvent = e;\n var ctnCheck = !isNOU(tglIcon) && acrdnItem.childElementCount <= 1;\n if (ctnCheck && (isNOU(acrdnCtn) || !isNOU(select('.' + CLS_HEADER + ' .' + CLS_TOOGLEICN, acrdnCtnItem)))) {\n if (!this.isServerRendered) {\n acrdnItem.appendChild(this.contentRendering(index));\n this.ariaAttrUpdate(acrdnItem);\n this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);\n }\n else {\n var id = acrdnItem.id;\n if (this.items.length > 0) {\n // tslint:disable-next-line:no-any\n this.interopAdaptor.invokeMethodAsync('OnItemClick', index).then(function () {\n if (_this.isDestroyed) {\n return;\n }\n _this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);\n });\n }\n else {\n // tslint:disable-next-line:no-any\n this.interopAdaptor.invokeMethodAsync('OnDataClick', id).then(function () {\n if (_this.isDestroyed) {\n return;\n }\n _this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);\n });\n }\n }\n }\n else {\n this.afterContentRender(trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem);\n }\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Accordion.prototype.afterContentRender = function (trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem) {\n var _this = this;\n var acrdActive = [];\n this.trigger('clicked', eventArgs);\n var cntclkCheck = (acrdnCtn && !isNOU(select('.e-target', acrdnCtn)));\n var inlineAcrdnSel = '.' + CLS_CONTENT + ' .' + CLS_ROOT;\n var inlineEleAcrdn = acrdnCtn && !isNOU(select('.' + CLS_ROOT, acrdnCtn)) && isNOU(closest(trgt, inlineAcrdnSel));\n var nestContCheck = acrdnCtn && isNOU(select('.' + CLS_ROOT, acrdnCtn)) || !(closest(trgt, '.' + CLS_ROOT) === this.element);\n cntclkCheck = cntclkCheck && (inlineEleAcrdn || nestContCheck);\n trgt.classList.remove('e-target');\n if (trgt.classList.contains(CLS_CONTENT) || trgt.classList.contains(CLS_CTENT) || cntclkCheck) {\n return;\n }\n var acrdcontainer = this.element.querySelector('.' + CLS_CONTAINER);\n var acrdnchild = (acrdcontainer) ? acrdcontainer.children : this.element.children;\n [].slice.call(acrdnchild).forEach(function (el) {\n if (el.classList.contains(CLS_ACTIVE)) {\n acrdActive.push(el);\n }\n });\n var acrdAniEle = [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM + ' [' + CLS_ANIMATE + ']'));\n if (acrdAniEle.length > 0) {\n for (var _i = 0, acrdAniEle_1 = acrdAniEle; _i < acrdAniEle_1.length; _i++) {\n var el = acrdAniEle_1[_i];\n acrdActive.push(el.parentElement);\n }\n }\n var sameContentCheck = acrdActive.indexOf(acrdnCtnItem) !== -1 && acrdnCtn.getAttribute('e-animate') === 'true';\n var sameHeader = false;\n if (!isNOU(acrdnItem) && !isNOU(acrdnHdr)) {\n var acrdnCtn_1 = select('.' + CLS_CONTENT, acrdnItem);\n var acrdnRoot = closest(acrdnItem, '.' + CLS_ACRDN_ROOT);\n var expandState = acrdnRoot.querySelector('.' + CLS_EXPANDSTATE);\n if (isNOU(acrdnCtn_1)) {\n return;\n }\n sameHeader = (expandState === acrdnItem);\n if (isVisible(acrdnCtn_1) && (!sameContentCheck || acrdnCtnItem.classList.contains(CLS_SLCTED))) {\n this.collapse(acrdnCtn_1);\n }\n else {\n if ((acrdActive.length > 0) && this.expandMode === 'Single' && !sameContentCheck) {\n acrdActive.forEach(function (el) {\n _this.collapse(select('.' + CLS_CONTENT, el));\n el.classList.remove(CLS_EXPANDSTATE);\n });\n }\n this.expand(acrdnCtn_1);\n }\n if (!isNOU(expandState) && !sameHeader) {\n expandState.classList.remove(CLS_EXPANDSTATE);\n }\n }\n };\n Accordion.prototype.eleMoveFocus = function (action, root, trgt) {\n var clst;\n var clstItem = closest(trgt, '.' + CLS_ITEM);\n if (trgt === root) {\n clst = ((action === 'moveUp' ? trgt.lastElementChild : trgt).querySelector('.' + CLS_HEADER));\n }\n else if (trgt.classList.contains(CLS_HEADER)) {\n clstItem = (action === 'moveUp' ? clstItem.previousElementSibling : clstItem.nextElementSibling);\n if (clstItem) {\n clst = select('.' + CLS_HEADER, clstItem);\n }\n }\n if (clst) {\n clst.focus();\n }\n };\n Accordion.prototype.keyActionHandler = function (e) {\n var trgt = e.target;\n var header = closest(e.target, CLS_HEADER);\n if (isNOU(header) && !trgt.classList.contains(CLS_ROOT) && !trgt.classList.contains(CLS_HEADER)) {\n return;\n }\n var clst;\n var root = this.element;\n var content;\n switch (e.action) {\n case 'moveUp':\n this.eleMoveFocus(e.action, root, trgt);\n break;\n case 'moveDown':\n this.eleMoveFocus(e.action, root, trgt);\n break;\n case 'space':\n case 'enter':\n content = trgt.nextElementSibling;\n if (!isNOU(content) && content.classList.contains(CLS_CONTENT)) {\n if (content.getAttribute('e-animate') !== 'true') {\n trgt.click();\n }\n }\n else {\n trgt.click();\n }\n break;\n case 'home':\n case 'end':\n clst = e.action === 'home' ? root.firstElementChild.children[0] : root.lastElementChild.children[0];\n clst.focus();\n break;\n }\n };\n Accordion.prototype.headerEleGenerate = function () {\n var header = this.createElement('div', { className: CLS_HEADER, id: getUniqueID('acrdn_header') });\n var items = this.getItems();\n var ariaAttr = {\n 'tabindex': '0', 'role': 'heading', 'aria-selected': 'false',\n 'aria-disabled': 'false', 'aria-level': items.length.toString()\n };\n attributes(header, ariaAttr);\n return header;\n };\n Accordion.prototype.renderInnerItem = function (item, index) {\n var innerEle;\n innerEle = this.createElement('div', { className: CLS_ITEM });\n innerEle.id = getUniqueID('acrdn_item');\n attributes(innerEle, { 'aria-expanded': 'false' });\n if (this.headerTemplate) {\n var ctnEle = this.headerEleGenerate();\n var hdrEle = this.createElement('div', { className: CLS_HEADERCTN });\n ctnEle.appendChild(hdrEle);\n append(this.getheaderTemplate()(item, this, 'headerTemplate', this.element.id + '_headerTemplate', false), hdrEle);\n innerEle.appendChild(ctnEle);\n ctnEle.appendChild(this.toggleIconGenerate());\n this.add(innerEle, CLS_SLCT);\n return innerEle;\n }\n if (item.header && this.angularnativeCondiCheck(item, 'header')) {\n if (this.enableHtmlSanitizer && typeof (item.header) === 'string') {\n item.header = SanitizeHtmlHelper.sanitize(item.header);\n }\n var ctnEle = this.headerEleGenerate();\n var hdrEle = this.createElement('div', { className: CLS_HEADERCTN });\n ctnEle.appendChild(hdrEle);\n ctnEle.appendChild(this.fetchElement(hdrEle, item.header, index, true));\n innerEle.appendChild(ctnEle);\n }\n var hdr = select('.' + CLS_HEADER, innerEle);\n if (item.expanded && !isNOU(index) && (!this.enablePersistence)) {\n if (this.initExpand.indexOf(index) === -1) {\n this.initExpand.push(index);\n }\n }\n if (item.cssClass) {\n addClass([innerEle], item.cssClass.split(' '));\n }\n if (item.disabled) {\n addClass([innerEle], CLS_DISABLE);\n }\n if (item.visible === false) {\n addClass([innerEle], CLS_ITEMHIDE);\n }\n if (item.iconCss) {\n var hdrIcnEle = this.createElement('div', { className: CLS_HEADERICN });\n var icon = this.createElement('span', { className: item.iconCss + ' e-icons' });\n hdrIcnEle.appendChild(icon);\n if (isNOU(hdr)) {\n hdr = this.headerEleGenerate();\n hdr.appendChild(hdrIcnEle);\n innerEle.appendChild(hdr);\n }\n else {\n hdr.insertBefore(hdrIcnEle, hdr.childNodes[0]);\n }\n }\n if (item.content && this.angularnativeCondiCheck(item, 'content')) {\n var hdrIcon = this.toggleIconGenerate();\n if (isNOU(hdr)) {\n hdr = this.headerEleGenerate();\n innerEle.appendChild(hdr);\n }\n hdr.appendChild(hdrIcon);\n this.add(innerEle, CLS_SLCT);\n }\n return innerEle;\n };\n Accordion.prototype.angularnativeCondiCheck = function (item, prop) {\n var property = prop === 'content' ? item.content : item.header;\n var content = property;\n if (this.isAngular && !isNOU(content.elementRef)) {\n var data = content.elementRef.nativeElement.data;\n if (isNOU(data) || data === '' || (data.indexOf('bindings=') === -1)) {\n return true;\n }\n var parseddata = JSON.parse(content.elementRef.nativeElement.data.replace('bindings=', ''));\n if (!isNOU(parseddata) && parseddata['ng-reflect-ng-if'] === 'false') {\n return false;\n }\n else {\n return true;\n }\n }\n else {\n return true;\n }\n };\n Accordion.prototype.fetchElement = function (ele, value, index, isHeader) {\n var templateFn;\n var temString;\n try {\n if (document.querySelectorAll(value).length && value !== 'Button') {\n var eleVal = document.querySelector(value);\n temString = eleVal.outerHTML.trim();\n ele.appendChild(eleVal);\n eleVal.style.display = '';\n }\n }\n catch (e) {\n if (typeof (value) === 'string') {\n ele.innerHTML = SanitizeHtmlHelper.sanitize(value);\n /* tslint:disable */\n }\n else if (!isNOU(this.trgtEle) && (value instanceof (HTMLElement))) {\n ele.appendChild(value);\n ele.firstElementChild.style.display = '';\n /* tslint:enable */\n }\n else {\n templateFn = templateCompiler(value);\n }\n }\n var tempArray;\n if (!isNOU(templateFn)) {\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n var templateProps = void 0;\n var templateName = void 0;\n if (ele.classList.contains(CLS_HEADERCTN)) {\n templateProps = this.element.id + index + '_header';\n templateName = 'header';\n }\n else if (ele.classList.contains(CLS_CTENT)) {\n templateProps = this.element.id + index + '_content';\n templateName = 'content';\n }\n tempArray = templateFn({}, this, templateName, templateProps, this.isStringTemplate);\n }\n if (!isNOU(tempArray) && tempArray.length > 0 && !(isNOU(tempArray[0].tagName) && tempArray.length === 1)) {\n [].slice.call(tempArray).forEach(function (el) {\n if (!isNOU(el.tagName)) {\n el.style.display = '';\n }\n ele.appendChild(el);\n });\n }\n else if (ele.childElementCount === 0) {\n ele.innerHTML = SanitizeHtmlHelper.sanitize(value);\n }\n if (!isNOU(temString)) {\n if (this.templateEle.indexOf(value) === -1) {\n this.templateEle.push(value);\n }\n }\n return ele;\n };\n Accordion.prototype.ariaAttrUpdate = function (itemEle) {\n var header = select('.' + CLS_HEADER, itemEle);\n var content = select('.' + CLS_CONTENT, itemEle);\n header.setAttribute('aria-controls', content.id);\n content.setAttribute('aria-labelledby', header.id);\n content.setAttribute('role', 'definition');\n };\n Accordion.prototype.contentRendering = function (index) {\n var itemcnt = this.createElement('div', { className: CLS_CONTENT + ' ' + CLS_CTNHIDE, id: getUniqueID('acrdn_panel') });\n attributes(itemcnt, { 'aria-hidden': 'true' });\n var ctn = this.createElement('div', { className: CLS_CTENT });\n if (this.dataSource.length > 0) {\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n append(this.getItemTemplate()(this.dataSource[index], this, 'itemTemplate', this.element.id + '_itemTemplate', false), ctn);\n itemcnt.appendChild(ctn);\n }\n else {\n if (this.enableHtmlSanitizer && typeof (this.items[index].content)) {\n this.items[index].content = SanitizeHtmlHelper.sanitize(this.items[index].content);\n }\n itemcnt.appendChild(this.fetchElement(ctn, this.items[index].content, index, false));\n }\n return itemcnt;\n };\n Accordion.prototype.expand = function (trgt) {\n var _this = this;\n var eventArgs;\n var items = this.getItems();\n var trgtItemEle = closest(trgt, '.' + CLS_ITEM);\n if (isNOU(trgt) || (isVisible(trgt) && trgt.getAttribute('e-animate') !== 'true') || trgtItemEle.classList.contains(CLS_DISABLE)) {\n return;\n }\n var acrdnRoot = closest(trgtItemEle, '.' + CLS_ACRDN_ROOT);\n var expandState = acrdnRoot.querySelector('.' + CLS_EXPANDSTATE);\n var animation = {\n name: this.animation.expand.effect,\n duration: this.animation.expand.duration,\n timingFunction: this.animation.expand.easing\n };\n var icon = select('.' + CLS_TOOGLEICN, trgtItemEle).firstElementChild;\n eventArgs = {\n element: trgtItemEle,\n item: items[this.getIndexByItem(trgtItemEle)],\n index: this.getIndexByItem(trgtItemEle),\n content: trgtItemEle.querySelector('.' + CLS_CONTENT),\n isExpanded: true\n };\n this.trigger('expanding', eventArgs, function (expandArgs) {\n if (!expandArgs.cancel) {\n icon.classList.add(CLS_TOGANIMATE);\n _this.expandedItemsPush(trgtItemEle);\n if (!isNOU(expandState)) {\n expandState.classList.remove(CLS_EXPANDSTATE);\n }\n trgtItemEle.classList.add(CLS_EXPANDSTATE);\n if ((animation.name === 'None')) {\n _this.expandProgress('begin', icon, trgt, trgtItemEle, expandArgs);\n _this.expandProgress('end', icon, trgt, trgtItemEle, expandArgs);\n }\n else {\n _this.expandAnimation(animation.name, icon, trgt, trgtItemEle, animation, expandArgs);\n }\n }\n });\n };\n Accordion.prototype.expandAnimation = function (ef, icn, trgt, trgtItemEle, animate, args) {\n var _this = this;\n var height;\n this.lastActiveItemId = trgtItemEle.id;\n if (ef === 'SlideDown') {\n animate.begin = function () {\n _this.expandProgress('begin', icn, trgt, trgtItemEle, args);\n trgt.style.position = 'absolute';\n height = trgtItemEle.offsetHeight;\n trgt.style.maxHeight = (trgt.offsetHeight) + 'px';\n trgtItemEle.style.maxHeight = '';\n };\n animate.progress = function () {\n trgtItemEle.style.minHeight = (height + trgt.offsetHeight) + 'px';\n };\n animate.end = function () {\n setStyle(trgt, { 'position': '', 'maxHeight': '' });\n trgtItemEle.style.minHeight = '';\n _this.expandProgress('end', icn, trgt, trgtItemEle, args);\n };\n }\n else {\n animate.begin = function () {\n _this.expandProgress('begin', icn, trgt, trgtItemEle, args);\n };\n animate.end = function () {\n _this.expandProgress('end', icn, trgt, trgtItemEle, args);\n };\n }\n new Animation(animate).animate(trgt);\n };\n Accordion.prototype.expandProgress = function (progress, icon, trgt, trgtItemEle, eventArgs) {\n this.remove(trgt, CLS_CTNHIDE);\n this.add(trgtItemEle, CLS_SLCTED);\n this.add(icon, CLS_EXPANDICN);\n if (progress === 'end') {\n this.add(trgtItemEle, CLS_ACTIVE);\n trgt.setAttribute('aria-hidden', 'false');\n attributes(trgtItemEle, { 'aria-expanded': 'true' });\n attributes(trgt.previousElementSibling, { 'aria-selected': 'true' });\n icon.classList.remove(CLS_TOGANIMATE);\n this.trigger('expanded', eventArgs);\n }\n };\n Accordion.prototype.expandedItemsPush = function (item) {\n var index = this.getIndexByItem(item);\n if (this.expandedIndices.indexOf(index) === -1) {\n var temp = [].slice.call(this.expandedIndices);\n temp.push(index);\n this.setProperties({ expandedIndices: temp }, true);\n }\n };\n Accordion.prototype.getIndexByItem = function (item) {\n var itemEle = this.getItemElements();\n return [].slice.call(itemEle).indexOf(item);\n };\n Accordion.prototype.getItemElements = function () {\n var itemEle = [];\n var itemCollection = this.element.children;\n [].slice.call(itemCollection).forEach(function (el) {\n if (el.classList.contains(CLS_ITEM)) {\n itemEle.push(el);\n }\n });\n return itemEle;\n };\n Accordion.prototype.expandedItemsPop = function (item) {\n var index = this.getIndexByItem(item);\n var temp = [].slice.call(this.expandedIndices);\n temp.splice(temp.indexOf(index), 1);\n this.setProperties({ expandedIndices: temp }, true);\n };\n Accordion.prototype.collapse = function (trgt) {\n var _this = this;\n var eventArgs;\n var items = this.getItems();\n var trgtItemEle = closest(trgt, '.' + CLS_ITEM);\n if (isNOU(trgt) || !isVisible(trgt) || trgtItemEle.classList.contains(CLS_DISABLE)) {\n return;\n }\n var animation = {\n name: this.animation.collapse.effect,\n duration: this.animation.collapse.duration,\n timingFunction: this.animation.collapse.easing,\n };\n var icon = select('.' + CLS_TOOGLEICN, trgtItemEle).firstElementChild;\n eventArgs = {\n element: trgtItemEle,\n item: items[this.getIndexByItem(trgtItemEle)],\n index: this.getIndexByItem(trgtItemEle),\n content: trgtItemEle.querySelector('.' + CLS_CONTENT),\n isExpanded: false\n };\n this.trigger('expanding', eventArgs, function (expandArgs) {\n if (!expandArgs.cancel) {\n _this.expandedItemsPop(trgtItemEle);\n trgtItemEle.classList.add(CLS_EXPANDSTATE);\n icon.classList.add(CLS_TOGANIMATE);\n if ((animation.name === 'None')) {\n _this.collapseProgress('begin', icon, trgt, trgtItemEle, expandArgs);\n _this.collapseProgress('end', icon, trgt, trgtItemEle, expandArgs);\n }\n else {\n _this.collapseAnimation(animation.name, trgt, trgtItemEle, icon, animation, expandArgs);\n }\n }\n });\n };\n Accordion.prototype.collapseAnimation = function (ef, trgt, trgtItEl, icn, animate, args) {\n var _this = this;\n var height;\n var trgtHeight;\n var itemHeight;\n var remain;\n this.lastActiveItemId = trgtItEl.id;\n if (ef === 'SlideUp') {\n animate.begin = function () {\n itemHeight = trgtItEl.offsetHeight;\n trgtItEl.style.minHeight = itemHeight + 'px';\n trgt.style.position = 'absolute';\n height = trgtItEl.offsetHeight;\n trgtHeight = trgt.offsetHeight;\n trgt.style.maxHeight = trgtHeight + 'px';\n _this.collapseProgress('begin', icn, trgt, trgtItEl, args);\n };\n animate.progress = function () {\n remain = ((height - (trgtHeight - trgt.offsetHeight)));\n if (remain < itemHeight) {\n trgtItEl.style.minHeight = remain + 'px';\n }\n };\n animate.end = function () {\n trgt.style.display = 'none';\n _this.collapseProgress('end', icn, trgt, trgtItEl, args);\n trgtItEl.style.minHeight = '';\n setStyle(trgt, { 'position': '', 'maxHeight': '', 'display': '' });\n };\n }\n else {\n animate.begin = function () {\n _this.collapseProgress('begin', icn, trgt, trgtItEl, args);\n };\n animate.end = function () {\n _this.collapseProgress('end', icn, trgt, trgtItEl, args);\n };\n }\n new Animation(animate).animate(trgt);\n };\n Accordion.prototype.collapseProgress = function (progress, icon, trgt, trgtItemEle, eventArgs) {\n this.remove(icon, CLS_EXPANDICN);\n this.remove(trgtItemEle, CLS_SLCTED);\n if (progress === 'end') {\n this.add(trgt, CLS_CTNHIDE);\n icon.classList.remove(CLS_TOGANIMATE);\n this.remove(trgtItemEle, CLS_ACTIVE);\n trgt.setAttribute('aria-hidden', 'true');\n attributes(trgtItemEle, { 'aria-expanded': 'false' });\n attributes(trgt.previousElementSibling, { 'aria-selected': 'false' });\n this.trigger('expanded', eventArgs);\n }\n };\n /**\n * Returns the current module name.\n * @returns string\n * @private\n */\n Accordion.prototype.getModuleName = function () {\n return 'accordion';\n };\n Accordion.prototype.itemAttribUpdate = function () {\n var items = this.getItems();\n var itemEle = this.getItemElements();\n var itemLen = items.length;\n itemEle.forEach(function (ele) {\n select('.' + CLS_HEADER, ele).setAttribute('aria-level', '' + itemLen);\n });\n };\n Accordion.prototype.getItems = function () {\n var items;\n if (this.itemTemplate && this.headerTemplate) {\n items = this.dataSource;\n }\n else {\n items = this.items;\n }\n return items;\n };\n /**\n * Adds new item to the Accordion with the specified index of the Accordion.\n * @param {AccordionItemModel | AccordionItemModel[] | Object | Object[]} item - Item array that is to be added to the Accordion.\n * @param {number} index - Number value that determines where the item should be added.\n * By default, item is added at the last index if the index is not specified.\n * @returns void\n */\n Accordion.prototype.addItem = function (item, index) {\n var _this = this;\n var ele = this.element;\n var itemEle = this.getItemElements();\n var items = this.getItems();\n if (isNOU(index)) {\n index = items.length;\n }\n if (ele.childElementCount >= index) {\n var addItems = (item instanceof Array) ? item : [item];\n addItems.forEach(function (addItem, i) {\n var itemIndex = index + i;\n items.splice(itemIndex, 0, addItem);\n var innerItemEle = _this.renderInnerItem(addItem, itemIndex);\n if (ele.childElementCount === itemIndex) {\n ele.appendChild(innerItemEle);\n }\n else {\n ele.insertBefore(innerItemEle, itemEle[itemIndex]);\n }\n EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);\n EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);\n _this.itemAttribUpdate();\n _this.expandedIndices = [];\n _this.expandedItemRefresh(ele);\n if (addItem && addItem.expanded) {\n _this.expandItem(true, itemIndex);\n }\n });\n }\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Accordion.prototype.expandedItemRefresh = function (ele) {\n var _this = this;\n var itemEle = this.getItemElements();\n [].slice.call(itemEle).forEach(function (el) {\n if (el.classList.contains(CLS_SLCTED)) {\n _this.expandedItemsPush(el);\n }\n });\n };\n /**\n * Dynamically removes item from Accordion.\n * @param {number} index - Number value that determines which item should be removed.\n * @returns void.\n */\n Accordion.prototype.removeItem = function (index) {\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.clearTemplate(['headerTemplate', 'itemTemplate'], index);\n }\n var itemEle = this.getItemElements();\n var ele = itemEle[index];\n var items = this.getItems();\n if (isNOU(ele)) {\n return;\n }\n this.restoreContent(index);\n detach(ele);\n items.splice(index, 1);\n this.itemAttribUpdate();\n this.expandedIndices = [];\n this.expandedItemRefresh(this.element);\n };\n /**\n * Sets focus to the specified index item header in Accordion.\n * @param {number} index - Number value that determines which item should be focused.\n * @returns void.\n */\n Accordion.prototype.select = function (index) {\n var itemEle = this.getItemElements();\n var ele = itemEle[index];\n if (isNOU(ele) || isNOU(select('.' + CLS_HEADER, ele))) {\n return;\n }\n ele.children[0].focus();\n };\n /**\n * Shows or hides the specified item from Accordion.\n * @param {number} index - Number value that determines which item should be hidden/shown.\n * @param {Boolean} isHidden - Boolean value that determines the action either hide (true) or show (false). Default value is false.\n * If the `isHidden` value is false, the item is shown or else item it is hidden.\n * @returns void.\n */\n Accordion.prototype.hideItem = function (index, isHidden) {\n var itemEle = this.getItemElements();\n var ele = itemEle[index];\n if (isNOU(ele)) {\n return;\n }\n if (isNOU(isHidden)) {\n isHidden = true;\n }\n isHidden ? this.add(ele, CLS_ITEMHIDE) : this.remove(ele, CLS_ITEMHIDE);\n };\n /**\n * Enables/Disables the specified Accordion item.\n * @param {number} index - Number value that determines which item should be enabled/disabled.\n * @param {boolean} isEnable - Boolean value that determines the action as enable (true) or disable (false).\n * If the `isEnable` value is true, the item is enabled or else it is disabled.\n * @returns void.\n */\n Accordion.prototype.enableItem = function (index, isEnable) {\n var itemEle = this.getItemElements();\n var ele = itemEle[index];\n if (isNOU(ele)) {\n return;\n }\n var eleHeader = ele.firstElementChild;\n if (isEnable) {\n this.remove(ele, CLS_DISABLE);\n attributes(eleHeader, { 'tabindex': '0', 'aria-disabled': 'false' });\n eleHeader.focus();\n }\n else {\n if (ele.classList.contains(CLS_ACTIVE)) {\n this.expandItem(false, index);\n this.eleMoveFocus('movedown', this.element, eleHeader);\n }\n this.add(ele, CLS_DISABLE);\n eleHeader.setAttribute('aria-disabled', 'true');\n eleHeader.removeAttribute('tabindex');\n }\n };\n /**\n * Refresh the Accordion component.\n * @returns void.\n */\n Accordion.prototype.refresh = function () {\n if (!this.isServerRendered) {\n _super.prototype.refresh.call(this);\n }\n };\n /**\n * Expands/Collapses the specified Accordion item.\n * @param {boolean} isExpand - Boolean value that determines the action as expand or collapse.\n * @param {number} index - Number value that determines which item should be expanded/collapsed.`index` is optional parameter.\n * Without Specifying index, based on the `isExpand` value all Accordion item can be expanded or collapsed.\n * @returns void.\n */\n Accordion.prototype.expandItem = function (isExpand, index) {\n var _this = this;\n var itemEle = this.getItemElements();\n if (isNOU(index)) {\n if (this.expandMode === 'Single' && isExpand) {\n var ele = itemEle[itemEle.length - 1];\n this.itemExpand(isExpand, ele, this.getIndexByItem(ele));\n }\n else {\n var item = select('#' + this.lastActiveItemId, this.element);\n [].slice.call(itemEle).forEach(function (el) {\n _this.itemExpand(isExpand, el, _this.getIndexByItem(el));\n el.classList.remove(CLS_EXPANDSTATE);\n });\n var expandedItem = select('.' + CLS_EXPANDSTATE, this.element);\n if (expandedItem) {\n expandedItem.classList.remove(CLS_EXPANDSTATE);\n }\n if (item) {\n item.classList.add(CLS_EXPANDSTATE);\n }\n }\n }\n else {\n var ele = itemEle[index];\n if (isNOU(ele) || !ele.classList.contains(CLS_SLCT) || (ele.classList.contains(CLS_ACTIVE) && isExpand)) {\n return;\n }\n else {\n if (this.expandMode === 'Single') {\n this.expandItem(false);\n }\n this.itemExpand(isExpand, ele, index);\n }\n }\n };\n Accordion.prototype.itemExpand = function (isExpand, ele, index) {\n var _this = this;\n var ctn = ele.children[1];\n if (ele.classList.contains(CLS_DISABLE)) {\n return;\n }\n if (isNOU(ctn) && isExpand) {\n if (!this.isServerRendered) {\n ctn = this.contentRendering(index);\n ele.appendChild(ctn);\n this.ariaAttrUpdate(ele);\n this.expand(ctn);\n }\n else {\n var id = ele.id;\n if (this.items.length > 0) {\n // tslint:disable-next-line:no-any\n this.interopAdaptor.invokeMethodAsync('OnItemClick', index).then(function () {\n if (_this.isDestroyed) {\n return;\n }\n ctn = ele.children[1];\n _this.expand(ctn);\n });\n }\n else {\n // tslint:disable-next-line:no-any\n this.interopAdaptor.invokeMethodAsync('OnDataClick', id).then(function () {\n if (_this.isDestroyed) {\n return;\n }\n ctn = ele.children[1];\n _this.expand(ctn);\n });\n }\n }\n }\n else if (!isNOU(ctn)) {\n isExpand ? this.expand(ctn) : this.collapse(ctn);\n }\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Accordion.prototype.destroyItems = function () {\n this.restoreContent(null);\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.clearTemplate();\n }\n [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) { detach(el); });\n };\n Accordion.prototype.restoreContent = function (index) {\n var ctnElePos;\n if (isNOU(index)) {\n ctnElePos = this.element;\n }\n else {\n ctnElePos = this.element.querySelectorAll('.' + CLS_ITEM)[index];\n }\n this.templateEle.forEach(function (eleStr) {\n if (!isNOU(ctnElePos.querySelector(eleStr))) {\n document.body.appendChild(ctnElePos.querySelector(eleStr)).style.display = 'none';\n }\n });\n };\n Accordion.prototype.updateItem = function (item, index) {\n if (!isNOU(item)) {\n var items = this.getItems();\n var itemObj = items[index];\n items.splice(index, 1);\n this.restoreContent(index);\n detach(item);\n this.addItem(itemObj, index);\n }\n };\n Accordion.prototype.setTemplate = function (template, toElement, index) {\n toElement.innerHTML = '';\n this.templateCompile(toElement, template, index);\n // tslint:disable-next-line:no-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n // tslint:disable-next-line\n Accordion.prototype.templateCompile = function (ele, cnt, index) {\n var tempEle = this.createElement('div');\n this.fetchElement(tempEle, cnt, index, false);\n if (tempEle.childNodes.length !== 0) {\n [].slice.call(tempEle.childNodes).forEach(function (childEle) {\n ele.appendChild(childEle);\n });\n }\n };\n Accordion.prototype.getPersistData = function () {\n var keyEntity = ['expandedIndices'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of the property that changed.\n * @param {AccordionModel} newProp\n * @param {AccordionModel} oldProp\n * @returns void\n * @private\n */\n Accordion.prototype.onPropertyChanged = function (newProp, oldProp) {\n var acrdn = this.element;\n var isRefresh = false;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'items':\n if (this.isServerRendered) {\n this.wireFocusEvents();\n break;\n }\n if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {\n var changedProp = Object.keys(newProp.items);\n for (var j = 0; j < changedProp.length; j++) {\n var index = parseInt(Object.keys(newProp.items)[j], 10);\n var property = Object.keys(newProp.items[index])[0];\n var item = selectAll('.' + CLS_ITEM, this.element)[index];\n var oldVal = Object(oldProp.items[index])[property];\n var newVal = Object(newProp.items[index])[property];\n var temp = property;\n if (temp === 'header' || temp === 'iconCss' || temp === 'expanded' || ((temp === 'content') && (oldVal === ''))) {\n this.updateItem(item, index);\n }\n if (property === 'cssClass' && !isNOU(item)) {\n item.classList.remove(oldVal);\n item.classList.add(newVal);\n }\n if (property === 'visible' && !isNOU(item)) {\n (Object(newProp.items[index])[property] === false) ? item.classList.add(CLS_ITEMHIDE) : item.classList.remove(CLS_ITEMHIDE);\n }\n if (property === 'disabled' && !isNOU(item)) {\n this.enableItem(index, !newVal);\n }\n if (property === 'content' && !isNOU(item) && item.children.length === 2) {\n if (typeof newVal === 'function') {\n var activeContent = item.querySelector('.' + CLS_CTENT);\n activeContent.innerHTML = '';\n this.setTemplate(newVal, activeContent, index);\n }\n else {\n if (item.classList.contains(CLS_SLCTED)) {\n this.expandItem(false, index);\n }\n detach(item.querySelector('.' + CLS_CONTENT));\n }\n }\n }\n }\n else {\n isRefresh = true;\n }\n break;\n case 'dataSource':\n case 'expandedIndices':\n if (this.expandedIndices === null) {\n this.expandedIndices = [];\n }\n isRefresh = true;\n break;\n case 'headerTemplate':\n this.initializeheaderTemplate();\n isRefresh = true;\n break;\n case 'itemTemplate':\n this.initializeItemTemplate();\n isRefresh = true;\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.add(acrdn, CLS_RTL) : this.remove(acrdn, CLS_RTL);\n break;\n case 'height':\n setStyle(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'width':\n setStyle(this.element, { 'width': formatUnit(newProp.width) });\n break;\n case 'expandMode':\n if (newProp.expandMode === 'Single') {\n this.element.setAttribute('aria-multiselectable', 'false');\n if (this.expandedIndices.length > 1) {\n this.expandItem(false);\n }\n }\n else {\n this.element.setAttribute('aria-multiselectable', 'true');\n }\n break;\n }\n }\n if (isRefresh && !this.isServerRendered) {\n this.initExpand = [];\n if (this.expandedIndices.length > 0) {\n this.initExpand = this.expandedIndices;\n }\n this.destroyItems();\n this.renderItems();\n this.initItemExpand();\n }\n };\n __decorate([\n Collection([], AccordionItem)\n ], Accordion.prototype, \"items\", void 0);\n __decorate([\n Property([])\n ], Accordion.prototype, \"dataSource\", void 0);\n __decorate([\n Property()\n ], Accordion.prototype, \"itemTemplate\", void 0);\n __decorate([\n Property()\n ], Accordion.prototype, \"headerTemplate\", void 0);\n __decorate([\n Property('100%')\n ], Accordion.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Accordion.prototype, \"height\", void 0);\n __decorate([\n Property([])\n ], Accordion.prototype, \"expandedIndices\", void 0);\n __decorate([\n Property('Multiple')\n ], Accordion.prototype, \"expandMode\", void 0);\n __decorate([\n Property(false)\n ], Accordion.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Complex({}, AccordionAnimationSettings)\n ], Accordion.prototype, \"animation\", void 0);\n __decorate([\n Event()\n ], Accordion.prototype, \"clicked\", void 0);\n __decorate([\n Event()\n ], Accordion.prototype, \"expanding\", void 0);\n __decorate([\n Event()\n ], Accordion.prototype, \"expanded\", void 0);\n __decorate([\n Event()\n ], Accordion.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Accordion.prototype, \"destroyed\", void 0);\n Accordion = __decorate([\n NotifyPropertyChanges\n ], Accordion);\n return Accordion;\n}(Component));\nexport { Accordion };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport * as React from 'react';\nimport { Accordion } from '@syncfusion/ej2-navigations';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * Represents the React Accordion Component.\n * ```html\n * = 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, Property, Event, EventHandler, L10n, setValue, getValue, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, detach, Internationalization, getUniqueID, closest } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, isBlazor } from '@syncfusion/ej2-base';\nimport { Input } from '../input/input';\nvar ROOT = 'e-textbox';\nvar CONTROL = 'e-control';\nvar HIDE_CLEAR = 'e-clear-icon-hide';\nvar TEXTBOX_FOCUS = 'e-input-focus';\nvar containerAttr = ['title', 'style', 'class'];\n/**\n * Represents the TextBox component that allows the user to enter the values based on it's type.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar TextBox = /** @class */ (function (_super) {\n __extends(TextBox, _super);\n function TextBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.previousValue = null;\n _this.isAngular = false;\n _this.isHiddenInput = false;\n _this.isForm = false;\n _this.inputPreviousValue = null;\n _this.isVue = false;\n _this.textboxOptions = options;\n return _this;\n }\n /**\n * Calls internally if any of the property value is changed.\n * @private\n */\n TextBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'floatLabelType':\n Input.removeFloating(this.textboxWrapper);\n Input.addFloating(this.respectiveElement, this.floatLabelType, this.placeholder);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.respectiveElement, this.floatLabelType, this.textboxWrapper.container);\n this.bindClearEvent();\n break;\n case 'width':\n Input.setWidth(newProp.width, this.textboxWrapper.container);\n break;\n case 'value':\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n if (!this.isBlank(this.value)) {\n this.value = this.value.toString();\n }\n this.isProtectedOnChange = prevOnChange;\n Input.setValue(this.value, this.respectiveElement, this.floatLabelType, this.showClearButton);\n if (this.isHiddenInput) {\n this.element.value = this.respectiveElement.value;\n }\n this.inputPreviousValue = this.respectiveElement.value;\n /* istanbul ignore next */\n if ((this.isAngular || this.isVue) && this.preventChange === true) {\n this.previousValue = this.isAngular ? this.value : this.previousValue;\n this.preventChange = false;\n }\n else if (isNullOrUndefined(this.isAngular) || !this.isAngular\n || (this.isAngular && !this.preventChange) || (this.isAngular && isNullOrUndefined(this.preventChange))) {\n this.raiseChangeEvent();\n }\n break;\n case 'htmlAttributes':\n this.updateHTMLAttrToElement();\n this.updateHTMLAttrToWrapper();\n var attributes = this.element.attributes;\n this.checkAttributes(true);\n Input.validateInputType(this.textboxWrapper.container, this.element);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.respectiveElement);\n break;\n case 'type':\n if (this.respectiveElement.tagName !== 'TEXTAREA') {\n this.respectiveElement.setAttribute('type', this.type);\n Input.validateInputType(this.textboxWrapper.container, this.element);\n this.raiseChangeEvent();\n }\n break;\n case 'showClearButton':\n if (this.respectiveElement.tagName !== 'TEXTAREA') {\n Input.setClearButton(this.showClearButton, this.respectiveElement, this.textboxWrapper);\n this.bindClearEvent();\n }\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.textboxWrapper.container]);\n break;\n case 'placeholder':\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n break;\n case 'autocomplete':\n if (this.autocomplete !== 'on' && this.autocomplete !== '') {\n this.respectiveElement.autocomplete = this.autocomplete;\n }\n else {\n this.removeAttributes(['autocomplete']);\n }\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n break;\n }\n }\n };\n /**\n * Gets the component name\n * @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 if (!(isBlazor() && this.isServerRendered)) {\n this.cloneElement = this.element.cloneNode(true);\n this.formElement = closest(this.element, 'form');\n if (!isNullOrUndefined(this.formElement)) {\n this.isForm = true;\n }\n /* istanbul ignore next */\n if (this.element.tagName === 'EJS-TEXTBOX') {\n var ejInstance = getValue('ej2_instances', this.element);\n var inputElement = this.multiline ?\n this.createElement('textarea') :\n this.createElement('input');\n var index = 0;\n for (index; index < this.element.attributes.length; index++) {\n var attributeName = this.element.attributes[index].nodeName;\n if (attributeName !== 'id') {\n inputElement.setAttribute(attributeName, this.element.attributes[index].nodeValue);\n inputElement.innerHTML = this.element.innerHTML;\n if (attributeName === 'name') {\n this.element.removeAttribute('name');\n }\n }\n }\n this.element.appendChild(inputElement);\n this.element = inputElement;\n setValue('ej2_instances', ejInstance, this.element);\n }\n this.updateHTMLAttrToElement();\n this.checkAttributes(false);\n if (this.element.tagName !== 'TEXTAREA') {\n this.element.setAttribute('type', this.type);\n }\n this.element.setAttribute('role', 'textbox');\n this.globalize = new Internationalization(this.locale);\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('textbox', localeText, this.locale);\n if (this.l10n.getConstant('placeholder') !== '') {\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n }\n if (!this.element.hasAttribute('id')) {\n this.element.setAttribute('id', getUniqueID('textbox'));\n }\n if (!this.element.hasAttribute('name')) {\n this.element.setAttribute('name', this.element.getAttribute('id'));\n }\n if (this.element.tagName === 'INPUT' && this.multiline) {\n this.isHiddenInput = true;\n this.textarea = this.createElement('textarea');\n this.element.parentNode.insertBefore(this.textarea, this.element);\n this.element.setAttribute('type', 'hidden');\n this.textarea.setAttribute('name', this.element.getAttribute('name'));\n this.element.removeAttribute('name');\n this.textarea.setAttribute('role', this.element.getAttribute('role'));\n this.element.removeAttribute('role');\n var attribute = ['required', 'minlength', 'maxlength'];\n for (var i = 0; i < attribute.length; i++) {\n if (this.element.hasAttribute(attribute[i])) {\n var attr = this.element.getAttribute(attribute[i]);\n this.textarea.setAttribute(attribute[i], attr);\n this.element.removeAttribute(attribute[i]);\n }\n }\n }\n }\n };\n TextBox.prototype.checkAttributes = function (isDynamic) {\n var attrs = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['placeholder', 'disabled', 'value', 'readonly', 'type', 'autocomplete'];\n for (var _i = 0, attrs_1 = attrs; _i < attrs_1.length; _i++) {\n var key = attrs_1[_i];\n if (!isNullOrUndefined(this.element.getAttribute(key))) {\n switch (key) {\n case 'disabled':\n // tslint:disable-next-line\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.element.getAttribute(key) === 'disabled' || this.element.getAttribute(key) === '' ||\n this.element.getAttribute(key) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'readonly':\n // tslint:disable-next-line\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.element.getAttribute(key) === 'readonly' || this.element.getAttribute(key) === ''\n || this.element.getAttribute(key) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n // tslint:disable-next-line\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.element.placeholder }, !isDynamic);\n }\n break;\n case 'autocomplete':\n // tslint:disable-next-line\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['autocomplete'] === undefined)) || isDynamic) {\n var autoCompleteTxt = this.element.autocomplete === 'off' ? 'off' : 'on';\n this.setProperties({ autocomplete: autoCompleteTxt }, !isDynamic);\n }\n break;\n case 'value':\n // tslint:disable-next-line\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['value'] === undefined)) || isDynamic) {\n this.setProperties({ value: this.element.value }, !isDynamic);\n }\n break;\n case 'type':\n // tslint:disable-next-line\n if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['type'] === undefined)) || isDynamic) {\n this.setProperties({ type: this.element.type }, !isDynamic);\n }\n break;\n }\n }\n }\n };\n /**\n * To Initialize the control rendering\n * @private\n */\n TextBox.prototype.render = function () {\n var updatedCssClassValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValue = this.getInputValidClassList(this.cssClass);\n }\n if (!(isBlazor() && this.isServerRendered)) {\n this.respectiveElement = (this.isHiddenInput) ? this.textarea : this.element;\n this.textboxWrapper = Input.createInput({\n element: this.respectiveElement,\n floatLabelType: this.floatLabelType,\n properties: {\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n cssClass: updatedCssClassValue,\n readonly: this.readonly,\n placeholder: this.placeholder,\n showClearButton: this.showClearButton\n }\n });\n this.updateHTMLAttrToWrapper();\n if (this.isHiddenInput) {\n this.respectiveElement.parentNode.insertBefore(this.element, this.respectiveElement);\n }\n }\n else {\n this.respectiveElement = this.element;\n this.textboxWrapper = { container: this.element.parentElement };\n if (this.showClearButton && !this.multiline) {\n this.textboxWrapper.clearButton = this.textboxWrapper.container.querySelector('.e-clear-icon');\n Input.wireClearBtnEvents(this.respectiveElement, this.textboxWrapper.clearButton, this.textboxWrapper.container);\n }\n if (this.floatLabelType === 'Auto') {\n Input.wireFloatingEvents(this.respectiveElement);\n }\n // tslint:disable-next-line\n Input.bindInitialEvent({ element: this.respectiveElement, buttons: null, customTag: null, floatLabelType: this.floatLabelType, properties: this.properties });\n }\n this.wireEvents();\n if (!isNullOrUndefined(this.value)) {\n Input.setValue(this.value, this.respectiveElement, this.floatLabelType, this.showClearButton);\n if (this.isHiddenInput) {\n this.element.value = this.respectiveElement.value;\n }\n }\n if (!isNullOrUndefined(this.value)) {\n this.initialValue = this.value;\n this.setInitialValue();\n }\n if (this.autocomplete !== 'on' && this.autocomplete !== '') {\n this.respectiveElement.autocomplete = this.autocomplete;\n // tslint:disable-next-line\n }\n else if (!isNullOrUndefined(this.textboxOptions) && (this.textboxOptions['autocomplete'] !== undefined)) {\n this.removeAttributes(['autocomplete']);\n }\n this.previousValue = this.value;\n this.inputPreviousValue = this.value;\n this.respectiveElement.defaultValue = this.respectiveElement.value;\n Input.setWidth(this.width, this.textboxWrapper.container);\n this.renderComplete();\n };\n TextBox.prototype.updateHTMLAttrToWrapper = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (containerAttr.indexOf(key) > -1) {\n if (key === 'class') {\n var updatedClassValues = this.getInputValidClassList(this.htmlAttributes[key]);\n if (updatedClassValues !== '') {\n addClass([this.textboxWrapper.container], updatedClassValues.split(' '));\n }\n }\n else if (key === 'style') {\n var setStyle = this.textboxWrapper.container.getAttribute(key);\n setStyle = !isNullOrUndefined(setStyle) ? (setStyle + this.htmlAttributes[key]) :\n this.htmlAttributes[key];\n this.textboxWrapper.container.setAttribute(key, setStyle);\n }\n else {\n this.textboxWrapper.container.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n };\n TextBox.prototype.updateHTMLAttrToElement = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (containerAttr.indexOf(key) < 0) {\n this.element.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n };\n TextBox.prototype.updateCssClass = function (newClass, oldClass) {\n Input.setCssClass(this.getInputValidClassList(newClass), [this.textboxWrapper.container], this.getInputValidClassList(oldClass));\n };\n TextBox.prototype.getInputValidClassList = function (inputClassName) {\n var result = inputClassName;\n if (!isNullOrUndefined(inputClassName) && inputClassName !== '') {\n result = (inputClassName.replace(/\\s+/g, ' ')).trim();\n }\n return result;\n };\n TextBox.prototype.setInitialValue = function () {\n if (!this.isAngular) {\n this.respectiveElement.setAttribute('value', this.initialValue);\n }\n };\n TextBox.prototype.wireEvents = function () {\n EventHandler.add(this.respectiveElement, 'focus', this.focusHandler, this);\n EventHandler.add(this.respectiveElement, 'blur', this.focusOutHandler, this);\n EventHandler.add(this.respectiveElement, 'input', this.inputHandler, this);\n EventHandler.add(this.respectiveElement, 'change', this.changeHandler, this);\n if (this.isForm) {\n EventHandler.add(this.formElement, 'reset', this.resetForm, this);\n }\n this.bindClearEvent();\n if (!isNullOrUndefined(this.textboxWrapper.container.querySelector('.e-float-text')) && this.floatLabelType === 'Auto'\n && this.textboxWrapper.container.classList.contains('e-autofill') &&\n this.textboxWrapper.container.classList.contains('e-outline')) {\n EventHandler.add((this.textboxWrapper.container.querySelector('.e-float-text')), 'animationstart', this.animationHandler, this);\n }\n };\n TextBox.prototype.animationHandler = function () {\n this.textboxWrapper.container.classList.add('e-valid-input');\n var label = this.textboxWrapper.container.querySelector('.e-float-text');\n if (!isNullOrUndefined(label)) {\n label.classList.add('e-label-top');\n if (label.classList.contains('e-label-bottom')) {\n label.classList.remove('e-label-bottom');\n }\n }\n };\n TextBox.prototype.resetValue = function (value) {\n var prevOnChange = this.isProtectedOnChange;\n this.isProtectedOnChange = true;\n this.value = value;\n this.isProtectedOnChange = prevOnChange;\n };\n TextBox.prototype.resetForm = function () {\n if (this.isAngular) {\n this.resetValue('');\n }\n else {\n this.resetValue(this.initialValue);\n }\n if (!isNullOrUndefined(this.textboxWrapper)) {\n var label = this.textboxWrapper.container.querySelector('.e-float-text');\n if (!isNullOrUndefined(label)) {\n if ((isNullOrUndefined(this.initialValue) || this.initialValue === '')) {\n label.classList.add('e-label-bottom');\n label.classList.remove('e-label-top');\n }\n else if (this.initialValue !== '') {\n label.classList.add('e-label-top');\n label.classList.remove('e-label-bottom');\n }\n }\n }\n };\n TextBox.prototype.focusHandler = function (args) {\n var eventArgs = {\n container: this.textboxWrapper.container,\n event: args,\n value: this.value\n };\n this.trigger('focus', eventArgs);\n };\n TextBox.prototype.focusOutHandler = function (args) {\n if (!(this.previousValue === null && this.value === null && this.respectiveElement.value === '') &&\n (this.previousValue !== this.respectiveElement.value)) {\n this.raiseChangeEvent(args, true);\n }\n var eventArgs = {\n container: this.textboxWrapper.container,\n event: args,\n value: this.value\n };\n this.trigger('blur', eventArgs);\n };\n TextBox.prototype.inputHandler = function (args) {\n // tslint:disable-next-line\n var textboxObj = this;\n var eventArgs = {\n event: args,\n value: this.respectiveElement.value,\n previousValue: this.inputPreviousValue,\n container: this.textboxWrapper.container\n };\n this.inputPreviousValue = this.respectiveElement.value;\n /* istanbul ignore next */\n if (this.isAngular) {\n textboxObj.localChange({ value: this.respectiveElement.value });\n this.preventChange = true;\n }\n if (this.isVue) {\n this.preventChange = true;\n }\n this.trigger('input', eventArgs);\n args.stopPropagation();\n };\n TextBox.prototype.changeHandler = function (args) {\n this.setProperties({ value: this.respectiveElement.value }, true);\n this.raiseChangeEvent(args, true);\n args.stopPropagation();\n };\n TextBox.prototype.raiseChangeEvent = function (event, interaction) {\n var eventArgs = {\n event: event,\n value: this.value,\n previousValue: this.previousValue,\n container: this.textboxWrapper.container,\n isInteraction: interaction ? interaction : false,\n isInteracted: interaction ? interaction : false\n };\n this.preventChange = false;\n this.trigger('change', eventArgs);\n this.previousValue = this.value;\n };\n TextBox.prototype.bindClearEvent = function () {\n if (this.showClearButton && this.respectiveElement.tagName !== 'TEXTAREA') {\n if (this.enabled) {\n EventHandler.add(this.textboxWrapper.clearButton, 'mousedown touchstart', this.resetInputHandler, this);\n }\n else {\n EventHandler.remove(this.textboxWrapper.clearButton, 'mousedown touchstart', this.resetInputHandler);\n }\n }\n };\n TextBox.prototype.resetInputHandler = function (event) {\n event.preventDefault();\n if (!(this.textboxWrapper.clearButton.classList.contains(HIDE_CLEAR))) {\n var previousValue = this.value;\n Input.setValue('', this.respectiveElement, this.floatLabelType, this.showClearButton);\n if (this.isHiddenInput) {\n this.element.value = this.respectiveElement.value;\n }\n this.setProperties({ value: this.respectiveElement.value }, true);\n var eventArgs = {\n event: event,\n value: this.respectiveElement.value,\n previousValue: this.inputPreviousValue,\n container: this.textboxWrapper.container\n };\n this.trigger('input', eventArgs);\n this.inputPreviousValue = this.respectiveElement.value;\n this.raiseChangeEvent(event, true);\n }\n };\n TextBox.prototype.unWireEvents = function () {\n EventHandler.remove(this.respectiveElement, 'focus', this.focusHandler);\n EventHandler.remove(this.respectiveElement, 'blur', this.focusOutHandler);\n EventHandler.remove(this.respectiveElement, 'input', this.inputHandler);\n EventHandler.remove(this.respectiveElement, 'change', this.changeHandler);\n if (this.isForm) {\n EventHandler.remove(this.formElement, 'reset', this.resetForm);\n }\n if (!isNullOrUndefined(this.textboxWrapper.container.querySelector('.e-float-text')) && this.floatLabelType === 'Auto'\n && this.textboxWrapper.container.classList.contains('e-outline') &&\n this.textboxWrapper.container.classList.contains('e-autofill')) {\n EventHandler.remove((this.textboxWrapper.container.querySelector('.e-float-text')), 'animationstart', this.animationHandler);\n }\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also, it maintains the initial TextBox element from the DOM.\n * @method destroy\n * @return {void}\n */\n TextBox.prototype.destroy = function () {\n this.unWireEvents();\n if (!(isBlazor() && this.isServerRendered)) {\n if (this.element.tagName === 'INPUT' && this.multiline) {\n detach(this.textboxWrapper.container.getElementsByTagName('textarea')[0]);\n this.respectiveElement = this.element;\n this.element.removeAttribute('type');\n }\n this.respectiveElement.value = this.respectiveElement.defaultValue;\n this.respectiveElement.classList.remove('e-input');\n this.removeAttributes(['aria-placeholder', 'aria-disabled', 'aria-readonly', 'aria-labelledby']);\n if (!isNullOrUndefined(this.textboxWrapper)) {\n this.textboxWrapper.container.insertAdjacentElement('afterend', this.respectiveElement);\n detach(this.textboxWrapper.container);\n }\n this.textboxWrapper = null;\n _super.prototype.destroy.call(this);\n }\n else {\n this.textboxWrapper = null;\n }\n };\n /**\n * Adding the icons to the TextBox component.\n * @param { string } position - Specify the icon placement on the TextBox. Possible values are append and prepend.\n * @param { string | string[] } iconClass - Icon classes which are need to add to the span element which is going to created.\n * Span element acts as icon or button element for TextBox.\n * @return {void}\n */\n TextBox.prototype.addIcon = function (position, icons) {\n Input.addIcon(position, icons, this.textboxWrapper.container, this.respectiveElement, this.createElement);\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.respectiveElement, this.floatLabelType, this.textboxWrapper.container);\n }\n else if (key === 'readonly') {\n this.setProperties({ readonly: true }, true);\n Input.setReadonly(this.readonly, this.respectiveElement);\n }\n else if (key === 'class') {\n this.respectiveElement.classList.add(attributes[key]);\n }\n else if (key === 'placeholder') {\n this.setProperties({ placeholder: attributes[key] }, true);\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n }\n else if (key === 'rows' && this.respectiveElement.tagName === 'TEXTAREA') {\n this.respectiveElement.setAttribute(key, attributes[key]);\n }\n else {\n this.respectiveElement.setAttribute(key, attributes[key]);\n }\n }\n };\n /**\n * Removing the multiple attributes as key-value pair to the TextBox element.\n * @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.respectiveElement, this.floatLabelType, this.textboxWrapper.container);\n }\n else if (key === 'readonly') {\n this.setProperties({ readonly: false }, true);\n Input.setReadonly(this.readonly, this.respectiveElement);\n }\n else if (key === 'placeholder') {\n this.setProperties({ placeholder: null }, true);\n Input.setPlaceholder(this.placeholder, this.respectiveElement);\n }\n else {\n this.respectiveElement.removeAttribute(key);\n }\n }\n };\n /**\n * Sets the focus to widget for interaction.\n * @returns void\n */\n TextBox.prototype.focusIn = function () {\n if (document.activeElement !== this.respectiveElement && this.enabled) {\n this.respectiveElement.focus();\n if (this.textboxWrapper.container.classList.contains('e-input-group')\n || this.textboxWrapper.container.classList.contains('e-outline')\n || this.textboxWrapper.container.classList.contains('e-filled')) {\n addClass([this.textboxWrapper.container], [TEXTBOX_FOCUS]);\n }\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n * @returns void\n */\n TextBox.prototype.focusOut = function () {\n if (document.activeElement === this.respectiveElement && this.enabled) {\n this.respectiveElement.blur();\n if (this.textboxWrapper.container.classList.contains('e-input-group')\n || this.textboxWrapper.container.classList.contains('e-outline')\n || this.textboxWrapper.container.classList.contains('e-filled')) {\n removeClass([this.textboxWrapper.container], [TEXTBOX_FOCUS]);\n }\n }\n };\n __decorate([\n Property('text')\n ], TextBox.prototype, \"type\", void 0);\n __decorate([\n Property(false)\n ], TextBox.prototype, \"readonly\", void 0);\n __decorate([\n Property(null)\n ], TextBox.prototype, \"value\", void 0);\n __decorate([\n Property('Never')\n ], TextBox.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property('')\n ], TextBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], TextBox.prototype, \"placeholder\", void 0);\n __decorate([\n Property('on')\n ], TextBox.prototype, \"autocomplete\", void 0);\n __decorate([\n Property({})\n ], TextBox.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(false)\n ], TextBox.prototype, \"multiline\", void 0);\n __decorate([\n Property(true)\n ], TextBox.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], TextBox.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(false)\n ], TextBox.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(null)\n ], TextBox.prototype, \"width\", void 0);\n __decorate([\n Event()\n ], TextBox.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], TextBox.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], TextBox.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], TextBox.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], TextBox.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], TextBox.prototype, \"input\", void 0);\n TextBox = __decorate([\n NotifyPropertyChanges\n ], TextBox);\n return TextBox;\n}(Component));\nexport { TextBox };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport * as React from 'react';\nimport { TextBox } from '@syncfusion/ej2-inputs';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * Represents the React TextBox Component\n * ```html\n *