Blazor') < 0) {\n if (this.enableHtmlSanitizer) {\n this.setProperties({ content: SanitizeHtmlHelper.sanitize(this.content) }, true);\n }\n tooltipContent[this.enableHtmlParse ? 'innerHTML' : 'textContent'] = this.content;\n }\n else {\n // eslint-disable-next-line\n var templateFunction = compile(this.content);\n var tempArr = templateFunction({}, this, 'content', this.element.id + 'content', undefined, undefined, tooltipContent);\n if (tempArr) {\n append(tempArr, tooltipContent);\n }\n this.renderReactTemplates();\n if (typeof this.content === 'string' && this.content.indexOf('
Blazor') >= 0) {\n this.isBlazorTemplate = true;\n updateBlazorTemplate(this.element.id + 'content', 'Content', this);\n }\n }\n }\n }\n else {\n if (target && !isNullOrUndefined(target.getAttribute('data-content'))) {\n tooltipContent.innerHTML = target.getAttribute('data-content');\n }\n }\n };\n Tooltip.prototype.renderCloseIcon = function () {\n if (!this.isSticky) {\n return;\n }\n var tipClose = this.createElement('div', { className: ICON + ' ' + CLOSE });\n this.tooltipEle.appendChild(tipClose);\n EventHandler.add(tipClose, Browser.touchStartEvent, this.onStickyClose, this);\n };\n Tooltip.prototype.addDescribedBy = function (target, id) {\n var describedby = (target.getAttribute('aria-describedby') || '').split(/\\s+/);\n if (describedby.indexOf(id) < 0) {\n describedby.push(id);\n }\n attributes(target, { 'aria-describedby': describedby.join(' ').trim(), 'data-tooltip-id': id });\n };\n Tooltip.prototype.removeDescribedBy = function (target) {\n var id = target.getAttribute('data-tooltip-id');\n var describedby = (target.getAttribute('aria-describedby') || '').split(/\\s+/);\n var index = describedby.indexOf(id);\n if (index !== -1) {\n describedby.splice(index, 1);\n }\n target.removeAttribute('data-tooltip-id');\n var orgdescribedby = describedby.join(' ').trim();\n if (orgdescribedby) {\n target.setAttribute('aria-describedby', orgdescribedby);\n }\n else {\n target.removeAttribute('aria-describedby');\n }\n };\n Tooltip.prototype.tapHoldHandler = function (evt) {\n clearTimeout(this.autoCloseTimer);\n this.targetHover(evt.originalEvent);\n };\n Tooltip.prototype.touchEndHandler = function (e) {\n var _this = this;\n if (this.isSticky) {\n return;\n }\n // eslint-disable-next-line\n var close = function () {\n _this.close();\n };\n this.autoCloseTimer = setTimeout(close, TOUCHEND_HIDE_DELAY);\n };\n Tooltip.prototype.targetClick = function (e) {\n var target;\n if (this.target) {\n target = closest(e.target, this.target);\n }\n else {\n target = this.element;\n }\n if (isNullOrUndefined(target)) {\n return;\n }\n if (target.getAttribute('data-tooltip-id') === null) {\n this.targetHover(e);\n }\n else if (!this.isSticky) {\n this.hideTooltip(this.animation.close, e, target);\n }\n };\n Tooltip.prototype.targetHover = function (e) {\n var target;\n if (this.target) {\n target = closest(e.target, this.target);\n }\n else {\n target = this.element;\n }\n if (isNullOrUndefined(target) || (target.getAttribute('data-tooltip-id') !== null && this.closeDelay === 0)) {\n return;\n }\n var targetList = [].slice.call(document.querySelectorAll('[data-tooltip-id= ' + this.ctrlId + '_content]'));\n for (var _i = 0, targetList_1 = targetList; _i < targetList_1.length; _i++) {\n var target_1 = targetList_1[_i];\n this.restoreElement(target_1);\n }\n this.showTooltip(target, this.animation.open, e);\n };\n Tooltip.prototype.showTooltip = function (target, showAnimation, e) {\n var _this = this;\n clearTimeout(this.showTimer);\n clearTimeout(this.hideTimer);\n this.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: this.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n // eslint-disable-next-line\n var observeCallback = function (beforeRenderArgs) {\n _this.beforeRenderCallback(beforeRenderArgs, target, e, showAnimation);\n };\n this.trigger('beforeRender', this.tooltipEventArgs, observeCallback.bind(this));\n };\n Tooltip.prototype.beforeRenderCallback = function (beforeRenderArgs, target, e, showAnimation) {\n var isBlazorTooltipRendered = false;\n if (beforeRenderArgs.cancel) {\n this.isHidden = true;\n this.clear();\n }\n else {\n this.isHidden = false;\n if (isNullOrUndefined(this.tooltipEle)) {\n if (this.isServerRender()) {\n this.contentTargetValue = target;\n this.contentEvent = e;\n this.contentAnimation = showAnimation;\n // eslint-disable-next-line\n var args = { 'enableTooltip': 'true' };\n /* eslint-disable */\n this.interopAdaptor.invokeMethodAsync('OnTooltipServerCall', args);\n /* eslint-enable */\n isBlazorTooltipRendered = true;\n }\n else {\n this.ctrlId = this.element.getAttribute('id') ?\n getUniqueID(this.element.getAttribute('id')) : getUniqueID('tooltip');\n this.tooltipEle = this.createElement('div', {\n className: TOOLTIP_WRAP + ' ' + POPUP_ROOT + ' ' + POPUP_LIB, attrs: {\n role: 'tooltip', 'aria-hidden': 'false', 'id': this.ctrlId + '_content'\n }, styles: 'width:' +\n formatUnit(this.width) + ';height:' + formatUnit(this.height) + ';position:absolute;'\n });\n this.beforeRenderBlazor(target, this);\n }\n if (!isBlazorTooltipRendered) {\n this.afterRenderBlazor(target, e, showAnimation, this);\n }\n }\n else {\n if (this.isServerRender()) {\n addClass([this.tooltipEle], POPUP_OPEN);\n document.body.appendChild(this.tooltipEle);\n this.renderCloseIcon();\n this.renderPopup(target);\n }\n if (target) {\n this.adjustArrow(target, this.position, this.tooltipPositionX, this.tooltipPositionY);\n this.addDescribedBy(target, this.ctrlId + '_content');\n this.renderContent(target);\n PopupAnimation.stop(this.tooltipEle);\n this.reposition(target);\n this.afterRenderBlazor(target, e, showAnimation, this);\n }\n }\n }\n };\n Tooltip.prototype.contentUpdated = function (args) {\n if (isNullOrUndefined(this.tooltipEle)) {\n if (this.isServerRender()) {\n this.ctrlId = this.element.id;\n this.tooltipEle = document.querySelector('#' + this.ctrlId + '_content');\n if (this.tooltipEle) {\n this.tooltipEle.setAttribute('style', 'width:' + formatUnit(this.width) +\n ';height:' + formatUnit(this.height) + ';position:absolute;');\n this.beforeRenderBlazor(this.contentTargetValue, this);\n this.afterRenderBlazor(this.contentTargetValue, this.contentEvent, this.contentAnimation, this);\n this.contentTargetValue = this.contentEvent = this.contentAnimation = null;\n }\n }\n }\n };\n Tooltip.prototype.beforeRenderBlazor = function (target, ctrlObj) {\n if (target) {\n if (Browser.isDevice) {\n addClass([ctrlObj.tooltipEle], DEVICE);\n }\n if (ctrlObj.width !== 'auto') {\n ctrlObj.tooltipEle.style.maxWidth = formatUnit(ctrlObj.width);\n }\n if (!(this.isServerRender())) {\n ctrlObj.tooltipEle.appendChild(ctrlObj.createElement('div', { className: CONTENT }));\n }\n document.body.appendChild(ctrlObj.tooltipEle);\n removeClass([ctrlObj.tooltipEle], HIDE_POPUP);\n ctrlObj.addDescribedBy(target, ctrlObj.ctrlId + '_content');\n ctrlObj.renderContent(target);\n addClass([ctrlObj.tooltipEle], POPUP_OPEN);\n if (ctrlObj.showTipPointer) {\n ctrlObj.renderArrow();\n }\n ctrlObj.renderCloseIcon();\n ctrlObj.renderPopup(target);\n ctrlObj.adjustArrow(target, ctrlObj.position, ctrlObj.tooltipPositionX, ctrlObj.tooltipPositionY);\n PopupAnimation.stop(ctrlObj.tooltipEle);\n ctrlObj.reposition(target);\n }\n };\n Tooltip.prototype.afterRenderBlazor = function (target, e, showAnimation, ctrlObj) {\n if (target) {\n removeClass([ctrlObj.tooltipEle], POPUP_OPEN);\n addClass([ctrlObj.tooltipEle], POPUP_CLOSE);\n ctrlObj.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: ctrlObj.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n if (ctrlObj.needTemplateReposition() && !ctrlObj.mouseTrail) {\n ctrlObj.tooltipEle.style.display = 'none';\n }\n // eslint-disable-next-line\n var observeCallback = function (observedArgs) {\n ctrlObj.beforeOpenCallback(observedArgs, target, showAnimation, e);\n };\n ctrlObj.trigger('beforeOpen', ctrlObj.tooltipEventArgs, observeCallback.bind(ctrlObj));\n }\n };\n Tooltip.prototype.beforeOpenCallback = function (observedArgs, target, showAnimation, e) {\n var _this = this;\n if (observedArgs.cancel) {\n this.isHidden = true;\n this.clear();\n this.restoreElement(target);\n }\n else {\n // eslint-disable-next-line\n var openAnimation_1 = {\n name: showAnimation.effect,\n duration: showAnimation.duration,\n delay: showAnimation.delay,\n timingFunction: 'easeOut'\n };\n if (showAnimation.effect === 'None') {\n openAnimation_1 = undefined;\n }\n if (this.openDelay > 0) {\n // eslint-disable-next-line\n var show = function () {\n if (_this.mouseTrail) {\n EventHandler.add(target, 'mousemove touchstart mouseenter', _this.onMouseMove, _this);\n }\n if (_this.popupObj) {\n _this.popupObj.show(openAnimation_1, target);\n }\n };\n this.showTimer = setTimeout(show, this.openDelay);\n }\n else {\n if (this.popupObj) {\n this.popupObj.show(openAnimation_1, target);\n }\n }\n }\n if (e) {\n this.wireMouseEvents(e, target);\n }\n };\n Tooltip.prototype.needTemplateReposition = function () {\n // eslint-disable-next-line\n var tooltip = this;\n return !isNullOrUndefined(tooltip.viewContainerRef)\n && typeof tooltip.viewContainerRef !== 'string'\n || (this.isServerRender()) && this.isBlazorTemplate;\n };\n Tooltip.prototype.checkCollision = function (target, x, y) {\n var elePos = {\n left: x, top: y, position: this.position,\n horizontal: this.tooltipPositionX, vertical: this.tooltipPositionY\n };\n var affectedPos = isCollide(this.tooltipEle, this.checkCollideTarget(), x, y);\n if (affectedPos.length > 0) {\n elePos.horizontal = affectedPos.indexOf('left') >= 0 ? 'Right' : affectedPos.indexOf('right') >= 0 ? 'Left' :\n this.tooltipPositionX;\n elePos.vertical = affectedPos.indexOf('top') >= 0 ? 'Bottom' : affectedPos.indexOf('bottom') >= 0 ? 'Top' :\n this.tooltipPositionY;\n }\n return elePos;\n };\n Tooltip.prototype.collisionFlipFit = function (target, x, y) {\n var elePos = this.checkCollision(target, x, y);\n var newpos = elePos.position;\n if (this.tooltipPositionY !== elePos.vertical) {\n newpos = ((this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?\n elePos.vertical + this.tooltipPositionX : this.tooltipPositionX + elePos.vertical);\n }\n if (this.tooltipPositionX !== elePos.horizontal) {\n if (newpos.indexOf('Left') === 0) {\n elePos.vertical = (newpos === 'LeftTop' || newpos === 'LeftCenter') ? 'Top' : 'Bottom';\n newpos = (elePos.vertical + 'Left');\n }\n if (newpos.indexOf('Right') === 0) {\n elePos.vertical = (newpos === 'RightTop' || newpos === 'RightCenter') ? 'Top' : 'Bottom';\n newpos = (elePos.vertical + 'Right');\n }\n elePos.horizontal = this.tooltipPositionX;\n }\n this.tooltipEventArgs = {\n type: null, cancel: false, target: target, event: null,\n element: this.tooltipEle, collidedPosition: newpos\n };\n this.trigger('beforeCollision', this.tooltipEventArgs);\n if (elePos.position !== newpos) {\n var pos = calculatePosition(target, elePos.horizontal, elePos.vertical);\n this.adjustArrow(target, newpos, elePos.horizontal, elePos.vertical);\n var offsetPos = this.calculateTooltipOffset(newpos);\n offsetPos.top -= (('TopBottom'.indexOf(this.position.split(/(?=[A-Z])/)[0]) !== -1) &&\n ('TopBottom'.indexOf(newpos.split(/(?=[A-Z])/)[0]) !== -1)) ? (2 * this.offsetY) : 0;\n offsetPos.left -= (('RightLeft'.indexOf(this.position.split(/(?=[A-Z])/)[0]) !== -1) &&\n ('RightLeft'.indexOf(newpos.split(/(?=[A-Z])/)[0]) !== -1)) ? (2 * this.offsetX) : 0;\n elePos.position = newpos;\n elePos.left = pos.left + offsetPos.left;\n elePos.top = pos.top + offsetPos.top;\n }\n else {\n this.adjustArrow(target, newpos, elePos.horizontal, elePos.vertical);\n }\n var eleOffset = { left: elePos.left, top: elePos.top };\n var left = fit(this.tooltipEle, this.checkCollideTarget(), { X: true, Y: false }, eleOffset).left;\n this.tooltipEle.style.display = 'block';\n if (this.showTipPointer && (newpos.indexOf('Bottom') === 0 || newpos.indexOf('Top') === 0)) {\n var arrowEle = this.tooltipEle.querySelector('.' + ARROW_TIP);\n var arrowleft = parseInt(arrowEle.style.left, 10) - (left - elePos.left);\n if (arrowleft < 0) {\n arrowleft = 0;\n }\n else if ((arrowleft + arrowEle.offsetWidth) > this.tooltipEle.clientWidth) {\n arrowleft = this.tooltipEle.clientWidth - arrowEle.offsetWidth;\n }\n arrowEle.style.left = arrowleft.toString() + 'px';\n }\n this.tooltipEle.style.display = '';\n eleOffset.left = left;\n return eleOffset;\n };\n Tooltip.prototype.checkCollideTarget = function () {\n return !this.windowCollision && this.target ? this.element : null;\n };\n Tooltip.prototype.hideTooltip = function (hideAnimation, e, targetElement) {\n var _this = this;\n if (this.closeDelay > 0) {\n clearTimeout(this.hideTimer);\n clearTimeout(this.showTimer);\n // eslint-disable-next-line\n var hide = function () {\n if (_this.closeDelay && _this.tooltipEle && _this.isTooltipOpen) {\n return;\n }\n _this.tooltipHide(hideAnimation, e, targetElement);\n };\n this.hideTimer = setTimeout(hide, this.closeDelay);\n }\n else {\n this.tooltipHide(hideAnimation, e, targetElement);\n }\n };\n Tooltip.prototype.tooltipHide = function (hideAnimation, e, targetElement) {\n var _this = this;\n var target;\n if (e) {\n target = this.target ? (targetElement || e.target) : this.element;\n }\n else {\n target = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');\n }\n this.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: this.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n // this line commented for close the tooltip popup element even the target element destroyed in a page.\n //if (isNullOrUndefined(target)) { return; }\n this.trigger('beforeClose', this.tooltipEventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n if (_this.isServerRender()) {\n _this.blazorHide(hideAnimation, target);\n }\n else {\n _this.popupHide(hideAnimation, target);\n }\n }\n else {\n _this.isHidden = false;\n }\n });\n };\n /* istanbul ignore next */\n Tooltip.prototype.blazorHide = function (hideAnimation, target) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var proxy = this;\n // eslint-disable-next-line\n var hide = function () {\n proxy.popupHide(hideAnimation, target);\n };\n if (this.popupObj) {\n this.popupHide(hideAnimation, target);\n }\n else {\n setTimeout(hide, 200);\n }\n };\n Tooltip.prototype.popupHide = function (hideAnimation, target) {\n if (target) {\n this.restoreElement(target);\n }\n this.isHidden = true;\n // eslint-disable-next-line\n var closeAnimation = {\n name: hideAnimation.effect,\n duration: hideAnimation.duration,\n delay: hideAnimation.delay,\n timingFunction: 'easeIn'\n };\n if (hideAnimation.effect === 'None') {\n closeAnimation = undefined;\n }\n if (this.popupObj) {\n this.popupObj.hide(closeAnimation);\n }\n };\n Tooltip.prototype.restoreElement = function (target) {\n this.unwireMouseEvents(target);\n if (!isNullOrUndefined(target.getAttribute('data-content'))) {\n target.setAttribute('title', target.getAttribute('data-content'));\n target.removeAttribute('data-content');\n }\n this.removeDescribedBy(target);\n };\n Tooltip.prototype.clear = function () {\n if (this.tooltipEle) {\n removeClass([this.tooltipEle], POPUP_CLOSE);\n addClass([this.tooltipEle], POPUP_OPEN);\n }\n if (this.isHidden) {\n if (this.popupObj) {\n this.popupObj.destroy();\n }\n if (this.isServerRender() && this.tooltipEle) {\n this.tooltipEle.style.display = 'none';\n // eslint-disable-next-line\n var args = { 'enableTooltip': 'false' };\n /* eslint-disable */\n this.interopAdaptor.invokeMethodAsync('OnTooltipServerCall', args);\n /* eslint-enable */\n remove(this.tooltipEle);\n }\n else if (this.tooltipEle) {\n remove(this.tooltipEle);\n }\n this.tooltipEle = null;\n this.popupObj = null;\n }\n };\n Tooltip.prototype.tooltipHover = function (e) {\n if (this.tooltipEle) {\n this.isTooltipOpen = true;\n }\n };\n Tooltip.prototype.tooltipMouseOut = function (e) {\n this.isTooltipOpen = false;\n this.hideTooltip(this.animation.close, e, this.findTarget());\n };\n Tooltip.prototype.onMouseOut = function (e) {\n var enteredElement = e.relatedTarget;\n // don't close the tooltip only if it is tooltip content element\n if (enteredElement && !this.mouseTrail) {\n var checkForTooltipElement = closest(enteredElement, \".\" + TOOLTIP_WRAP + \".\" + POPUP_LIB + \".\" + POPUP_ROOT);\n if (checkForTooltipElement) {\n EventHandler.add(checkForTooltipElement, 'mouseleave', this.tooltipElementMouseOut, this);\n }\n else {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n if (this.closeDelay === 0) {\n this.clear();\n }\n }\n }\n else {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n this.clear();\n }\n };\n Tooltip.prototype.tooltipElementMouseOut = function (e) {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n EventHandler.remove(this.element, 'mouseleave', this.tooltipElementMouseOut);\n this.clear();\n };\n Tooltip.prototype.onStickyClose = function (e) {\n this.close();\n };\n Tooltip.prototype.onMouseMove = function (event) {\n var eventPageX = 0;\n var eventPageY = 0;\n if (event.type.indexOf('touch') > -1) {\n event.preventDefault();\n eventPageX = event.touches[0].pageX;\n eventPageY = event.touches[0].pageY;\n }\n else {\n eventPageX = event.pageX;\n eventPageY = event.pageY;\n }\n PopupAnimation.stop(this.tooltipEle);\n removeClass([this.tooltipEle], POPUP_CLOSE);\n addClass([this.tooltipEle], POPUP_OPEN);\n this.adjustArrow(event.target, this.position, this.tooltipPositionX, this.tooltipPositionY);\n var pos = this.calculateTooltipOffset(this.position);\n var x = eventPageX + pos.left + this.offsetX;\n var y = eventPageY + pos.top + this.offsetY;\n var elePos = this.checkCollision(event.target, x, y);\n if (this.tooltipPositionX !== elePos.horizontal || this.tooltipPositionY !== elePos.vertical) {\n var newpos = (this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?\n elePos.vertical + elePos.horizontal : elePos.horizontal + elePos.vertical;\n elePos.position = newpos;\n this.adjustArrow(event.target, elePos.position, elePos.horizontal, elePos.vertical);\n var colpos = this.calculateTooltipOffset(elePos.position);\n elePos.left = eventPageX + colpos.left - this.offsetX;\n elePos.top = eventPageY + colpos.top - this.offsetY;\n }\n this.tooltipEle.style.left = elePos.left + 'px';\n this.tooltipEle.style.top = elePos.top + 'px';\n };\n Tooltip.prototype.keyDown = function (event) {\n if (this.tooltipEle && event.keyCode === 27) {\n this.close();\n }\n };\n Tooltip.prototype.touchEnd = function (e) {\n if (this.tooltipEle && closest(e.target, '.' + ROOT) === null && !this.isSticky) {\n this.close();\n }\n };\n Tooltip.prototype.scrollHandler = function (e) {\n if (this.tooltipEle) {\n if (!(closest(e.target, \".\" + TOOLTIP_WRAP + \".\" + POPUP_LIB + \".\" + POPUP_ROOT))) {\n this.close();\n }\n }\n };\n /**\n * Core method that initializes the control rendering.\n *\n * @private\n * @returns {void}\n */\n Tooltip.prototype.render = function () {\n this.initialize();\n this.wireEvents(this.opensOn);\n this.renderComplete();\n };\n /**\n * Initializes the values of private members.\n *\n * @private\n * @returns {void}\n */\n Tooltip.prototype.preRender = function () {\n this.tipClass = TIP_BOTTOM;\n this.tooltipPositionX = 'Center';\n this.tooltipPositionY = 'Top';\n this.isHidden = true;\n };\n /**\n * Binding events to the Tooltip element.\n *\n * @hidden\n * @param {string} trigger - specify the trigger string to the function\n * @returns {void}\n *\n */\n Tooltip.prototype.wireEvents = function (trigger) {\n var triggerList = this.getTriggerList(trigger);\n for (var _i = 0, triggerList_1 = triggerList; _i < triggerList_1.length; _i++) {\n var opensOn = triggerList_1[_i];\n if (opensOn === 'Custom') {\n return;\n }\n if (opensOn === 'Focus') {\n this.wireFocusEvents();\n }\n if (opensOn === 'Click') {\n EventHandler.add(this.element, Browser.touchStartEvent, this.targetClick, this);\n }\n if (opensOn === 'Hover') {\n if (Browser.isDevice) {\n this.touchModule = new Touch(this.element, {\n tapHoldThreshold: TAPHOLD_THRESHOLD,\n tapHold: this.tapHoldHandler.bind(this)\n });\n EventHandler.add(this.element, Browser.touchEndEvent, this.touchEndHandler, this);\n }\n else {\n EventHandler.add(this.element, 'mouseover', this.targetHover, this);\n if (this.isServerRender() && !this.isSticky) {\n EventHandler.add(this.element, 'mouseleave', this.onMouseOut, this);\n }\n }\n }\n }\n EventHandler.add(document, 'touchend', this.touchEnd, this);\n EventHandler.add(document, 'scroll wheel', this.scrollHandler, this);\n EventHandler.add(document, 'keydown', this.keyDown, this);\n };\n Tooltip.prototype.getTriggerList = function (trigger) {\n if (trigger === 'Auto') {\n trigger = (Browser.isDevice) ? 'Hover' : 'Hover Focus';\n }\n return trigger.split(' ');\n };\n Tooltip.prototype.wireFocusEvents = function () {\n if (!isNullOrUndefined(this.target)) {\n var targetList = [].slice.call(this.element.querySelectorAll(this.target));\n for (var _i = 0, targetList_2 = targetList; _i < targetList_2.length; _i++) {\n var target = targetList_2[_i];\n EventHandler.add(target, 'focus', this.targetHover, this);\n }\n }\n else {\n EventHandler.add(this.element, 'focus', this.targetHover, this);\n }\n };\n Tooltip.prototype.wireMouseEvents = function (e, target) {\n if (this.tooltipEle) {\n if (!this.isSticky) {\n if (e.type === 'focus') {\n EventHandler.add(target, 'blur', this.onMouseOut, this);\n }\n if (e.type === 'mouseover') {\n if (!this.isServerRender()) {\n EventHandler.add(target, 'mouseleave', this.onMouseOut, this);\n }\n }\n if (this.closeDelay) {\n EventHandler.add(this.tooltipEle, 'mouseenter', this.tooltipHover, this);\n EventHandler.add(this.tooltipEle, 'mouseleave', this.tooltipMouseOut, this);\n }\n }\n if (this.mouseTrail && this.openDelay === 0) {\n EventHandler.add(target, 'mousemove touchstart mouseenter', this.onMouseMove, this);\n }\n }\n };\n /**\n * Unbinding events from the element on widget destroy.\n *\n * @hidden\n *\n * @param {string} trigger - specify the trigger string to the function\n * @returns {void}\n *\n */\n Tooltip.prototype.unwireEvents = function (trigger) {\n var triggerList = this.getTriggerList(trigger);\n for (var _i = 0, triggerList_2 = triggerList; _i < triggerList_2.length; _i++) {\n var opensOn = triggerList_2[_i];\n if (opensOn === 'Custom') {\n return;\n }\n if (opensOn === 'Focus') {\n this.unwireFocusEvents();\n }\n if (opensOn === 'Click') {\n EventHandler.remove(this.element, Browser.touchStartEvent, this.targetClick);\n }\n if (opensOn === 'Hover') {\n if (Browser.isDevice) {\n if (this.touchModule) {\n this.touchModule.destroy();\n }\n EventHandler.remove(this.element, Browser.touchEndEvent, this.touchEndHandler);\n }\n else {\n EventHandler.remove(this.element, 'mouseover', this.targetHover);\n if (this.isServerRender() && !this.isSticky) {\n EventHandler.remove(this.element, 'mouseleave', this.onMouseOut);\n }\n }\n }\n }\n EventHandler.remove(document, 'touchend', this.touchEnd);\n EventHandler.remove(document, 'scroll wheel', this.scrollHandler);\n EventHandler.remove(document, 'keydown', this.keyDown);\n };\n Tooltip.prototype.unwireFocusEvents = function () {\n if (!isNullOrUndefined(this.target)) {\n var targetList = [].slice.call(this.element.querySelectorAll(this.target));\n for (var _i = 0, targetList_3 = targetList; _i < targetList_3.length; _i++) {\n var target = targetList_3[_i];\n EventHandler.remove(target, 'focus', this.targetHover);\n }\n }\n else {\n EventHandler.remove(this.element, 'focus', this.targetHover);\n }\n };\n Tooltip.prototype.unwireMouseEvents = function (target) {\n if (!this.isSticky) {\n var triggerList = this.getTriggerList(this.opensOn);\n for (var _i = 0, triggerList_3 = triggerList; _i < triggerList_3.length; _i++) {\n var opensOn = triggerList_3[_i];\n if (opensOn === 'Focus') {\n EventHandler.remove(target, 'blur', this.onMouseOut);\n }\n if (opensOn === 'Hover' && !Browser.isDevice) {\n if (!this.isServerRender()) {\n EventHandler.remove(target, 'mouseleave', this.onMouseOut);\n }\n }\n }\n if (this.closeDelay) {\n EventHandler.remove(target, 'mouseenter', this.tooltipHover);\n EventHandler.remove(target, 'mouseleave', this.tooltipMouseOut);\n }\n }\n if (this.mouseTrail) {\n EventHandler.remove(target, 'mousemove touchstart mouseenter', this.onMouseMove);\n }\n };\n Tooltip.prototype.findTarget = function () {\n var target = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');\n return target;\n };\n /**\n * Core method to return the component name.\n *\n * @private\n *\n * @returns {string} - this method returns module name.\n */\n Tooltip.prototype.getModuleName = function () {\n return 'tooltip';\n };\n /**\n * Returns the properties to be maintained in the persisted state.\n *\n * @private\n *\n * @returns {string} - this method returns persisted data.\n */\n Tooltip.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Called internally, if any of the property value changed.\n *\n * @private\n *\n * @param {TooltipModel} newProp - this param gives new property values to the method\n * @param {TooltipModel} oldProp - this param gives old property values to the method\n * @returns {void}\n *\n */\n Tooltip.prototype.onPropertyChanged = function (newProp, oldProp) {\n var targetElement = this.findTarget();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n if (this.tooltipEle && targetElement) {\n this.tooltipEle.style.width = this.tooltipEle.style.maxWidth = formatUnit(newProp.width);\n this.reposition(targetElement);\n }\n break;\n case 'height':\n if (this.tooltipEle && targetElement) {\n this.tooltipEle.style.height = formatUnit(newProp.height);\n this.reposition(targetElement);\n }\n break;\n case 'content':\n if (this.tooltipEle) {\n if (this.isServerRender()) {\n this.isBlazorTooltip = true;\n }\n this.renderContent();\n }\n else if (this.isServerRender()) {\n // eslint-disable-next-line\n var args = { 'content': newProp.content };\n /* eslint-disable */\n this.interopAdaptor.invokeMethodAsync('OnTooltipServerCall', args);\n /* eslint-enable */\n }\n break;\n case 'opensOn':\n this.unwireEvents(oldProp.opensOn);\n this.wireEvents(newProp.opensOn);\n break;\n case 'position':\n this.formatPosition();\n if (this.tooltipEle && targetElement) {\n var arrowInnerELe = this.tooltipEle.querySelector('.' + ARROW_TIP_INNER);\n arrowInnerELe.style.top = arrowInnerELe.style.left = null;\n this.reposition(targetElement);\n }\n break;\n case 'tipPointerPosition':\n if (this.tooltipEle && targetElement) {\n this.reposition(targetElement);\n }\n break;\n case 'offsetX':\n if (this.tooltipEle) {\n var x = newProp.offsetX - oldProp.offsetX;\n this.tooltipEle.style.left = (parseInt(this.tooltipEle.style.left, 10) + (x)).toString() + 'px';\n }\n break;\n case 'offsetY':\n if (this.tooltipEle) {\n var y = newProp.offsetY - oldProp.offsetY;\n this.tooltipEle.style.top = (parseInt(this.tooltipEle.style.top, 10) + (y)).toString() + 'px';\n }\n break;\n case 'cssClass':\n if (this.tooltipEle) {\n if (oldProp.cssClass) {\n removeClass([this.tooltipEle], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.tooltipEle], newProp.cssClass.split(' '));\n }\n }\n break;\n case 'enableRtl':\n if (this.tooltipEle) {\n if (this.enableRtl) {\n addClass([this.tooltipEle], RTL);\n }\n else {\n removeClass([this.tooltipEle], RTL);\n }\n }\n break;\n }\n }\n };\n /**\n * It is used to show the Tooltip on the specified target with specific animation settings.\n *\n * @param {HTMLElement} element - Target element where the Tooltip is to be displayed. (It is an optional parameter)\n * @param {TooltipAnimationSettings} animation - Sets the specific animation, while showing the Tooltip on the screen. (It is an optional parameter)\n * @returns {void}\n */\n Tooltip.prototype.open = function (element, animation) {\n if (isNullOrUndefined(animation)) {\n animation = this.animation.open;\n }\n if (isNullOrUndefined(element)) {\n element = this.element;\n }\n if (element.style.display === 'none') {\n return;\n }\n this.showTooltip(element, animation);\n };\n /**\n * It is used to hide the Tooltip with specific animation effect.\n *\n * @param {TooltipAnimationSettings} animation - Sets the specific animation when hiding Tooltip from the screen. (It is an optional parameter)\n * @returns {void}\n */\n Tooltip.prototype.close = function (animation) {\n if (!animation) {\n animation = this.animation.close;\n }\n this.hideTooltip(animation);\n };\n /**\n * It is used to refresh the Tooltip content and its position.\n *\n * @param {HTMLElement} target - Target element where the Tooltip content or position needs to be refreshed.\n * @returns {void}\n */\n Tooltip.prototype.refresh = function (target) {\n if (this.tooltipEle) {\n this.renderContent(target);\n }\n if (this.popupObj && target) {\n this.reposition(target);\n }\n };\n /**\n * It is used to destroy the Tooltip component.\n * @method destroy\n * @returns {void}\n * @memberof Tooltip\n */\n Tooltip.prototype.destroy = function () {\n if (!this.isServerRender()) {\n _super.prototype.destroy.call(this);\n if (this.tooltipEle) {\n remove(this.tooltipEle);\n }\n }\n if (this.isServerRender() && this.tooltipEle) {\n var placeholder = document.querySelector('#' + this.ctrlId + '_content_placeholder');\n if (placeholder) {\n placeholder.appendChild(this.tooltipEle);\n }\n }\n if (this.popupObj) {\n this.popupObj.destroy();\n }\n removeClass([this.element], ROOT);\n this.unwireEvents(this.opensOn);\n this.unwireMouseEvents(this.element);\n this.tooltipEle = null;\n this.popupObj = null;\n };\n __decorate([\n Property('auto')\n ], Tooltip.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Tooltip.prototype, \"height\", void 0);\n __decorate([\n Property()\n ], Tooltip.prototype, \"content\", void 0);\n __decorate([\n Property()\n ], Tooltip.prototype, \"target\", void 0);\n __decorate([\n Property('TopCenter')\n ], Tooltip.prototype, \"position\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"offsetX\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"offsetY\", void 0);\n __decorate([\n Property(true)\n ], Tooltip.prototype, \"showTipPointer\", void 0);\n __decorate([\n Property(true)\n ], Tooltip.prototype, \"enableHtmlParse\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"windowCollision\", void 0);\n __decorate([\n Property('Auto')\n ], Tooltip.prototype, \"tipPointerPosition\", void 0);\n __decorate([\n Property('Auto')\n ], Tooltip.prototype, \"opensOn\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"mouseTrail\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"isSticky\", void 0);\n __decorate([\n Complex({}, Animation)\n ], Tooltip.prototype, \"animation\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"openDelay\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"closeDelay\", void 0);\n __decorate([\n Property()\n ], Tooltip.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeRender\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"afterOpen\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"afterClose\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeCollision\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"destroyed\", void 0);\n Tooltip = __decorate([\n NotifyPropertyChanges\n ], Tooltip);\n return Tooltip;\n}(Component));\nexport { Tooltip };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, EventHandler, Property, Event, Browser, L10n } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { attributes, addClass, removeClass, detach, closest } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, getValue, formatUnit, setValue, merge } from '@syncfusion/ej2-base';\nimport { Internationalization, getNumericObject, isBlazor } from '@syncfusion/ej2-base';\nimport { Input } from '../input/input';\nvar ROOT = 'e-control-wrapper e-numeric';\nvar SPINICON = 'e-input-group-icon';\nvar SPINUP = 'e-spin-up';\nvar SPINDOWN = 'e-spin-down';\nvar ERROR = 'e-error';\nvar INCREMENT = 'increment';\nvar DECREMENT = 'decrement';\nvar INTREGEXP = new RegExp('^(-)?(\\\\d*)$');\nvar DECIMALSEPARATOR = '.';\nvar COMPONENT = 'e-numerictextbox';\nvar CONTROL = 'e-control';\nvar NUMERIC_FOCUS = 'e-input-focus';\nvar HIDDENELEMENT = 'e-numeric-hidden';\nvar wrapperAttributes = ['title', 'style', 'class'];\n/**\n * Represents the NumericTextBox component that allows the user to enter only numeric values.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar NumericTextBox = /** @class */ (function (_super) {\n __extends(NumericTextBox, _super);\n /**\n *\n * @param {NumericTextBoxModel} options - Specifies the NumericTextBox model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function NumericTextBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isVue = false;\n _this.preventChange = false;\n _this.isAngular = false;\n _this.isDynamicChange = false;\n _this.numericOptions = options;\n return _this;\n }\n NumericTextBox.prototype.preRender = function () {\n this.isPrevFocused = false;\n this.decimalSeparator = '.';\n // eslint-disable-next-line no-useless-escape\n this.intRegExp = new RegExp('/^(-)?(\\d*)$/');\n this.isCalled = false;\n var ejInstance = getValue('ej2_instances', this.element);\n this.cloneElement = this.element.cloneNode(true);\n removeClass([this.cloneElement], [CONTROL, COMPONENT, 'e-lib']);\n this.angularTagName = null;\n this.formEle = closest(this.element, 'form');\n if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {\n this.angularTagName = this.element.tagName;\n var input = this.createElement('input');\n var index = 0;\n for (index; index < this.element.attributes.length; index++) {\n var attributeName = this.element.attributes[index].nodeName;\n if (attributeName !== 'id') {\n input.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);\n input.innerHTML = this.element.innerHTML;\n }\n }\n if (this.element.hasAttribute('name')) {\n this.element.removeAttribute('name');\n }\n this.element.classList.remove('e-control', 'e-numerictextbox');\n this.element.appendChild(input);\n this.element = input;\n setValue('ej2_instances', ejInstance, this.element);\n }\n if (!(isBlazor() && this.isServerRendered)) {\n attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off', 'aria-live': 'assertive' });\n var localeText = {\n incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: this.placeholder\n };\n this.l10n = new L10n('numerictextbox', localeText, this.locale);\n if (this.l10n.getConstant('placeholder') !== '') {\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n }\n }\n this.isValidState = true;\n this.inputStyle = null;\n this.inputName = null;\n this.cultureInfo = {};\n this.initCultureInfo();\n this.initCultureFunc();\n this.prevValue = this.value;\n if (!(isBlazor() && this.isServerRendered)) {\n this.updateHTMLAttrToElement();\n this.checkAttributes(false);\n if (this.formEle) {\n this.inputEleValue = this.value;\n }\n }\n this.validateMinMax();\n this.validateStep();\n if (this.placeholder === null && !(isBlazor() && this.isServerRendered)) {\n this.updatePlaceholder();\n }\n };\n /**\n * To Initialize the control rendering\n *\n * @returns {void}\n * @private\n */\n NumericTextBox.prototype.render = function () {\n if (this.element.tagName.toLowerCase() === 'input') {\n if (!(isBlazor() && this.isServerRendered)) {\n this.createWrapper();\n if (this.showSpinButton) {\n this.spinBtnCreation();\n }\n this.setElementWidth(this.width);\n if (!this.container.classList.contains('e-input-group')) {\n this.container.classList.add('e-input-group');\n }\n this.changeValue(this.value === null || isNaN(this.value) ?\n null : this.strictMode ? this.trimValue(this.value) : this.value);\n }\n else {\n this.container = this.element.parentElement;\n this.inputWrapper = { container: this.container };\n this.hiddenInput = this.container.querySelector('input[type=\"hidden\"]');\n if (this.showClearButton) {\n this.inputWrapper.clearButton = this.container.querySelector('.e-clear-icon');\n Input.wireClearBtnEvents(this.element, this.inputWrapper.clearButton, this.inputWrapper.container);\n }\n if (this.showSpinButton) {\n this.spinDown = this.container.querySelector('.' + SPINDOWN);\n this.spinUp = this.container.querySelector('.' + SPINUP);\n this.wireSpinBtnEvents();\n }\n Input.bindInitialEvent({\n element: this.element, buttons: null, customTag: null, floatLabelType: this.floatLabelType, properties: this.properties\n });\n }\n this.wireEvents();\n if (!(isBlazor() && this.isServerRendered)) {\n if (this.value !== null && !isNaN(this.value)) {\n if (this.decimals) {\n this.setProperties({ value: this.roundNumber(this.value, this.decimals) }, true);\n }\n }\n if (this.element.getAttribute('value') || this.value) {\n this.element.setAttribute('value', this.element.value);\n this.hiddenInput.setAttribute('value', this.hiddenInput.value);\n }\n }\n this.elementPrevValue = this.element.value;\n if (this.element.hasAttribute('data-val')) {\n this.element.setAttribute('data-val', 'false');\n }\n this.renderComplete();\n }\n };\n NumericTextBox.prototype.checkAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['value', 'min', 'max', 'step', 'disabled', 'readonly', 'style', 'name', 'placeholder'];\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.element.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.element.getAttribute(prop) === 'disabled' || this.element.getAttribute(prop) === ''\n || this.element.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.element.getAttribute(prop) === 'readonly' || this.element.getAttribute(prop) === ''\n || this.element.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.element.placeholder }, !isDynamic);\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['value'] === undefined)) || isDynamic) {\n var setNumber = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n this.setProperties(setValue(prop, setNumber, {}), !isDynamic);\n }\n break;\n case 'min':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['min'] === undefined)) || isDynamic) {\n var minValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (minValue !== null && !isNaN(minValue)) {\n this.setProperties(setValue(prop, minValue, {}), !isDynamic);\n }\n }\n break;\n case 'max':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['max'] === undefined)) || isDynamic) {\n var maxValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (maxValue !== null && !isNaN(maxValue)) {\n this.setProperties(setValue(prop, maxValue, {}), !isDynamic);\n }\n }\n break;\n case 'step':\n if ((isNullOrUndefined(this.numericOptions) || (this.numericOptions['step'] === undefined)) || isDynamic) {\n var stepValue = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if (stepValue !== null && !isNaN(stepValue)) {\n this.setProperties(setValue(prop, stepValue, {}), !isDynamic);\n }\n }\n break;\n case 'style':\n this.inputStyle = this.element.getAttribute(prop);\n break;\n case 'name':\n this.inputName = this.element.getAttribute(prop);\n break;\n default:\n {\n var value = this.instance.getNumberParser({ format: 'n' })(this.element.getAttribute(prop));\n if ((value !== null && !isNaN(value)) || (prop === 'value')) {\n this.setProperties(setValue(prop, value, {}), true);\n }\n }\n break;\n }\n }\n }\n };\n NumericTextBox.prototype.updatePlaceholder = function () {\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n };\n NumericTextBox.prototype.initCultureFunc = function () {\n this.instance = new Internationalization(this.locale);\n };\n NumericTextBox.prototype.initCultureInfo = function () {\n this.cultureInfo.format = this.format;\n if (getValue('currency', this) !== null) {\n setValue('currency', this.currency, this.cultureInfo);\n this.setProperties({ currencyCode: this.currency }, true);\n }\n };\n /* Wrapper creation */\n NumericTextBox.prototype.createWrapper = function () {\n var updatedCssClassValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassValue = this.getNumericValidClassList(this.cssClass);\n }\n var inputObj = Input.createInput({\n element: this.element,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassValue,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton,\n enabled: this.enabled\n }\n }, this.createElement);\n this.inputWrapper = inputObj;\n this.container = inputObj.container;\n this.container.setAttribute('class', ROOT + ' ' + this.container.getAttribute('class'));\n this.updateHTMLAttrToWrapper();\n if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n this.hiddenInput = (this.createElement('input', { attrs: { type: 'text',\n 'validateHidden': 'true', 'class': HIDDENELEMENT } }));\n this.inputName = this.inputName !== null ? this.inputName : this.element.id;\n this.element.removeAttribute('name');\n attributes(this.hiddenInput, { 'name': this.inputName });\n this.container.insertBefore(this.hiddenInput, this.container.childNodes[1]);\n this.updateDataAttribute(false);\n if (this.inputStyle !== null) {\n attributes(this.container, { 'style': this.inputStyle });\n }\n };\n NumericTextBox.prototype.updateDataAttribute = function (isDynamic) {\n var attr = {};\n if (!isDynamic) {\n for (var a = 0; a < this.element.attributes.length; a++) {\n attr[this.element.attributes[a].name] = this.element.getAttribute(this.element.attributes[a].name);\n }\n }\n else {\n attr = this.htmlAttributes;\n }\n for (var _i = 0, _a = Object.keys(attr); _i < _a.length; _i++) {\n var key = _a[_i];\n if (key.indexOf('data') === 0) {\n this.hiddenInput.setAttribute(key, attr[key]);\n }\n }\n };\n NumericTextBox.prototype.updateHTMLAttrToElement = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var pro = _a[_i];\n if (wrapperAttributes.indexOf(pro) < 0) {\n this.element.setAttribute(pro, this.htmlAttributes[pro]);\n }\n }\n }\n };\n NumericTextBox.prototype.updateCssClass = function (newClass, oldClass) {\n Input.setCssClass(this.getNumericValidClassList(newClass), [this.container], this.getNumericValidClassList(oldClass));\n };\n NumericTextBox.prototype.getNumericValidClassList = function (numericClassName) {\n var result = numericClassName;\n if (!isNullOrUndefined(numericClassName) && numericClassName !== '') {\n result = (numericClassName.replace(/\\s+/g, ' ')).trim();\n }\n return result;\n };\n NumericTextBox.prototype.updateHTMLAttrToWrapper = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var pro = _a[_i];\n if (wrapperAttributes.indexOf(pro) > -1) {\n if (pro === 'class') {\n var updatedClassValue = this.getNumericValidClassList(this.htmlAttributes[pro]);\n if (updatedClassValue !== '') {\n addClass([this.container], updatedClassValue.split(' '));\n }\n }\n else if (pro === 'style') {\n var numericStyle = this.container.getAttribute(pro);\n numericStyle = !isNullOrUndefined(numericStyle) ? (numericStyle + this.htmlAttributes[pro]) :\n this.htmlAttributes[pro];\n this.container.setAttribute(pro, numericStyle);\n }\n else {\n this.container.setAttribute(pro, this.htmlAttributes[pro]);\n }\n }\n }\n }\n };\n NumericTextBox.prototype.setElementWidth = function (width) {\n if (!isNullOrUndefined(width)) {\n if (typeof width === 'number') {\n this.container.style.width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n this.container.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));\n }\n }\n };\n /* Spinner creation */\n NumericTextBox.prototype.spinBtnCreation = function () {\n this.spinDown = Input.appendSpan(SPINICON + ' ' + SPINDOWN, this.container, this.createElement);\n attributes(this.spinDown, {\n 'title': this.l10n.getConstant('decrementTitle'),\n 'aria-label': this.l10n.getConstant('decrementTitle')\n });\n this.spinUp = Input.appendSpan(SPINICON + ' ' + SPINUP, this.container, this.createElement);\n attributes(this.spinUp, {\n 'title': this.l10n.getConstant('incrementTitle'),\n 'aria-label': this.l10n.getConstant('incrementTitle')\n });\n this.wireSpinBtnEvents();\n };\n NumericTextBox.prototype.validateMinMax = function () {\n if (!(typeof (this.min) === 'number' && !isNaN(this.min))) {\n this.setProperties({ min: -(Number.MAX_VALUE) }, true);\n }\n if (!(typeof (this.max) === 'number' && !isNaN(this.max))) {\n this.setProperties({ max: Number.MAX_VALUE }, true);\n }\n if (this.decimals !== null) {\n if (this.min !== -(Number.MAX_VALUE)) {\n this.setProperties({ min: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.min)) }, true);\n }\n if (this.max !== (Number.MAX_VALUE)) {\n this.setProperties({ max: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.max)) }, true);\n }\n }\n this.setProperties({ min: this.min > this.max ? this.max : this.min }, true);\n attributes(this.element, { 'aria-valuemin': this.min.toString(), 'aria-valuemax': this.max.toString() });\n };\n NumericTextBox.prototype.formattedValue = function (decimals, value) {\n return this.instance.getNumberFormat({\n maximumFractionDigits: decimals,\n minimumFractionDigits: decimals, useGrouping: false\n })(value);\n };\n NumericTextBox.prototype.validateStep = function () {\n if (this.decimals !== null) {\n this.setProperties({ step: this.instance.getNumberParser({ format: 'n' })(this.formattedValue(this.decimals, this.step)) }, true);\n }\n };\n NumericTextBox.prototype.action = function (operation, event) {\n this.isInteract = true;\n var value = this.isFocused ? this.instance.getNumberParser({ format: 'n' })(this.element.value) : this.value;\n this.changeValue(this.performAction(value, this.step, operation));\n this.raiseChangeEvent(event);\n };\n NumericTextBox.prototype.checkErrorClass = function () {\n if (this.isValidState) {\n removeClass([this.container], ERROR);\n }\n else {\n addClass([this.container], ERROR);\n }\n attributes(this.element, { 'aria-invalid': this.isValidState ? 'false' : 'true' });\n };\n NumericTextBox.prototype.bindClearEvent = function () {\n if (this.showClearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown touchstart', this.resetHandler, this);\n }\n };\n NumericTextBox.prototype.resetHandler = function (e) {\n e.preventDefault();\n if (!(this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide'))) {\n this.clear(e);\n }\n this.isInteract = true;\n this.raiseChangeEvent(e);\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n NumericTextBox.prototype.clear = function (event) {\n this.setProperties({ value: null }, true);\n this.setElementValue('');\n this.hiddenInput.value = '';\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.resetFormHandler = function () {\n if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {\n this.updateValue(null);\n }\n else {\n this.updateValue(this.inputEleValue);\n }\n };\n NumericTextBox.prototype.setSpinButton = function () {\n if (!isNullOrUndefined(this.spinDown)) {\n attributes(this.spinDown, {\n 'title': this.l10n.getConstant('decrementTitle'),\n 'aria-label': this.l10n.getConstant('decrementTitle')\n });\n }\n if (!isNullOrUndefined(this.spinUp)) {\n attributes(this.spinUp, {\n 'title': this.l10n.getConstant('incrementTitle'),\n 'aria-label': this.l10n.getConstant('incrementTitle')\n });\n }\n };\n NumericTextBox.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'blur', this.focusOutHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'input', this.inputHandler, this);\n EventHandler.add(this.element, 'keypress', this.keyPressHandler, this);\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n EventHandler.add(this.element, 'paste', this.pasteHandler, this);\n if (this.enabled) {\n this.bindClearEvent();\n if (this.formEle) {\n EventHandler.add(this.formEle, 'reset', this.resetFormHandler, this);\n }\n }\n };\n NumericTextBox.prototype.wireSpinBtnEvents = function () {\n /* bind spin button events */\n EventHandler.add(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner, this);\n EventHandler.add(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner, this);\n EventHandler.add(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);\n EventHandler.add(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner, this);\n };\n NumericTextBox.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'blur', this.focusOutHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n EventHandler.remove(this.element, 'input', this.inputHandler);\n EventHandler.remove(this.element, 'keydown', this.keyDownHandler);\n EventHandler.remove(this.element, 'keypress', this.keyPressHandler);\n EventHandler.remove(this.element, 'change', this.changeHandler);\n EventHandler.remove(this.element, 'paste', this.pasteHandler);\n if (this.formEle) {\n EventHandler.remove(this.formEle, 'reset', this.resetFormHandler);\n }\n };\n NumericTextBox.prototype.unwireSpinBtnEvents = function () {\n /* unbind spin button events */\n EventHandler.remove(this.spinUp, Browser.touchStartEvent, this.mouseDownOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchStartEvent, this.mouseDownOnSpinner);\n EventHandler.remove(this.spinUp, Browser.touchEndEvent, this.mouseUpOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchEndEvent, this.mouseUpOnSpinner);\n EventHandler.remove(this.spinUp, Browser.touchMoveEvent, this.touchMoveOnSpinner);\n EventHandler.remove(this.spinDown, Browser.touchMoveEvent, this.touchMoveOnSpinner);\n };\n NumericTextBox.prototype.changeHandler = function (event) {\n event.stopPropagation();\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n }\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput, event);\n };\n NumericTextBox.prototype.raiseChangeEvent = function (event) {\n if (this.prevValue !== this.value) {\n var eventArgs = {};\n this.changeEventArgs = { value: this.value, previousValue: this.prevValue, isInteracted: this.isInteract,\n isInteraction: this.isInteract, event: event };\n if (event) {\n this.changeEventArgs.event = event;\n }\n if (this.changeEventArgs.event === undefined) {\n this.changeEventArgs.isInteracted = false;\n this.changeEventArgs.isInteraction = false;\n }\n merge(eventArgs, this.changeEventArgs);\n this.prevValue = this.value;\n this.isInteract = false;\n this.elementPrevValue = this.element.value;\n this.preventChange = false;\n this.trigger('change', eventArgs);\n }\n };\n NumericTextBox.prototype.pasteHandler = function () {\n var _this = this;\n if (!this.enabled || this.readonly) {\n return;\n }\n var beforeUpdate = this.element.value;\n setTimeout(function () {\n if (!_this.numericRegex().test(_this.element.value)) {\n _this.setElementValue(beforeUpdate);\n }\n });\n };\n NumericTextBox.prototype.preventHandler = function () {\n var _this = this;\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n setTimeout(function () {\n if (_this.element.selectionStart > 0) {\n var currentPos = _this.element.selectionStart;\n var prevPos = _this.element.selectionStart - 1;\n var start = 0;\n var valArray = _this.element.value.split('');\n var numericObject = getNumericObject(_this.locale);\n var decimalSeparator = getValue('decimal', numericObject);\n var ignoreKeyCode = decimalSeparator.charCodeAt(0);\n if (_this.element.value[prevPos] === ' ' && _this.element.selectionStart > 0 && !iOS) {\n if (isNullOrUndefined(_this.prevVal)) {\n _this.element.value = _this.element.value.trim();\n }\n else if (prevPos !== 0) {\n _this.element.value = _this.prevVal;\n }\n else if (prevPos === 0) {\n _this.element.value = _this.element.value.trim();\n }\n _this.element.setSelectionRange(prevPos, prevPos);\n }\n else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) &&\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== 45) {\n if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 1]) !==\n valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 1]) &&\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === ignoreKeyCode) ||\n _this.element.value[_this.element.selectionStart - 1].charCodeAt(0) !== ignoreKeyCode) {\n _this.element.value = _this.element.value.substring(0, prevPos) +\n _this.element.value.substring(currentPos, _this.element.value.length);\n _this.element.setSelectionRange(prevPos, prevPos);\n if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1])) && _this.element.selectionStart > 0\n && _this.element.value.length) {\n _this.preventHandler();\n }\n }\n }\n else if (isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 2])) && _this.element.selectionStart > 1 &&\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== 45) {\n if ((valArray.indexOf(_this.element.value[_this.element.selectionStart - 2]) !==\n valArray.lastIndexOf(_this.element.value[_this.element.selectionStart - 2]) &&\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) === ignoreKeyCode) ||\n _this.element.value[_this.element.selectionStart - 2].charCodeAt(0) !== ignoreKeyCode) {\n _this.element.setSelectionRange(prevPos, prevPos);\n _this.nextEle = _this.element.value[_this.element.selectionStart];\n _this.cursorPosChanged = true;\n _this.preventHandler();\n }\n }\n if (_this.cursorPosChanged === true && _this.element.value[_this.element.selectionStart] === _this.nextEle &&\n isNaN(parseFloat(_this.element.value[_this.element.selectionStart - 1]))) {\n _this.element.setSelectionRange(_this.element.selectionStart + 1, _this.element.selectionStart + 1);\n _this.cursorPosChanged = false;\n _this.nextEle = null;\n }\n if (_this.element.value.trim() === '') {\n _this.element.setSelectionRange(start, start);\n }\n if (_this.element.selectionStart > 0) {\n if ((_this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === 45) && _this.element.selectionStart > 1) {\n if (isNullOrUndefined(_this.prevVal)) {\n // eslint-disable-next-line no-self-assign\n _this.element.value = _this.element.value;\n }\n else {\n _this.element.value = _this.prevVal;\n }\n _this.element.setSelectionRange(_this.element.selectionStart, _this.element.selectionStart);\n }\n }\n _this.prevVal = _this.element.value;\n }\n });\n };\n NumericTextBox.prototype.keyUpHandler = function () {\n if (!this.enabled || this.readonly) {\n return;\n }\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n if (!iOS && Browser.isDevice) {\n this.preventHandler();\n }\n var parseValue = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n parseValue = parseValue === null || isNaN(parseValue) ? null : parseValue;\n this.hiddenInput.value = parseValue || parseValue === 0 ? parseValue.toString() : null;\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.inputHandler = function (event) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias\n var numerictextboxObj = this;\n if (!this.enabled || this.readonly) {\n return;\n }\n var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);\n var fireFox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n if ((fireFox || iOS) && Browser.isDevice) {\n this.preventHandler();\n }\n /* istanbul ignore next */\n if (this.isAngular\n && this.element.value !== getValue('decimal', getNumericObject(this.locale))\n && this.element.value !== getValue('minusSign', getNumericObject(this.locale))) {\n var parsedValue = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n parsedValue = isNaN(parsedValue) ? null : parsedValue;\n numerictextboxObj.localChange({ value: parsedValue });\n this.preventChange = true;\n }\n if (this.isVue) {\n var current = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n var previous = this.instance.getNumberParser({ format: 'n' })(this.elementPrevValue);\n var eventArgs = {\n event: event,\n value: (current === null || isNaN(current) ? null : current),\n previousValue: (previous === null || isNaN(previous) ? null : previous)\n };\n this.preventChange = true;\n this.elementPrevValue = this.element.value;\n this.trigger('input', eventArgs);\n }\n };\n NumericTextBox.prototype.keyDownHandler = function (event) {\n if (!this.readonly) {\n switch (event.keyCode) {\n case 38:\n event.preventDefault();\n this.action(INCREMENT, event);\n break;\n case 40:\n event.preventDefault();\n this.action(DECREMENT, event);\n break;\n default: break;\n }\n }\n };\n NumericTextBox.prototype.performAction = function (value, step, operation) {\n if (value === null || isNaN(value)) {\n value = 0;\n }\n var updatedValue = operation === INCREMENT ? value + step : value - step;\n updatedValue = this.correctRounding(value, step, updatedValue);\n return this.strictMode ? this.trimValue(updatedValue) : updatedValue;\n };\n NumericTextBox.prototype.correctRounding = function (value, step, result) {\n var floatExp = new RegExp('[,.](.*)');\n var floatValue = floatExp.test(value.toString());\n var floatStep = floatExp.test(step.toString());\n if (floatValue || floatStep) {\n var valueCount = floatValue ? floatExp.exec(value.toString())[0].length : 0;\n var stepCount = floatStep ? floatExp.exec(step.toString())[0].length : 0;\n var max = Math.max(valueCount, stepCount);\n return value = this.roundValue(result, max);\n }\n return result;\n };\n NumericTextBox.prototype.roundValue = function (result, precision) {\n precision = precision || 0;\n var divide = Math.pow(10, precision);\n return result *= divide, result = Math.round(result) / divide;\n };\n NumericTextBox.prototype.updateValue = function (value, event) {\n if (event) {\n this.isInteract = true;\n }\n if (value !== null && !isNaN(value)) {\n if (this.decimals) {\n value = this.roundNumber(value, this.decimals);\n }\n }\n this.changeValue(value === null || isNaN(value) ? null : this.strictMode ? this.trimValue(value) : value);\n /* istanbul ignore next */\n if (!this.isDynamicChange) {\n this.raiseChangeEvent(event);\n }\n };\n NumericTextBox.prototype.updateCurrency = function (prop, propVal) {\n setValue(prop, propVal, this.cultureInfo);\n this.updateValue(this.value);\n };\n NumericTextBox.prototype.changeValue = function (value) {\n if (!(value || value === 0)) {\n value = null;\n this.setProperties({ value: value }, true);\n }\n else {\n var numberOfDecimals = this.getNumberOfDecimals(value);\n this.setProperties({ value: this.roundNumber(value, numberOfDecimals) }, true);\n }\n this.modifyText();\n if (!this.strictMode) {\n this.validateState();\n }\n };\n NumericTextBox.prototype.modifyText = function () {\n if (this.value || this.value === 0) {\n var value = this.formatNumber();\n var elementValue = this.isFocused ? value : this.instance.getNumberFormat(this.cultureInfo)(this.value);\n this.setElementValue(elementValue);\n attributes(this.element, { 'aria-valuenow': value });\n this.hiddenInput.value = this.value.toString();\n if (this.value !== null && this.serverDecimalSeparator) {\n this.hiddenInput.value = this.hiddenInput.value.replace('.', this.serverDecimalSeparator);\n }\n }\n else {\n this.setElementValue('');\n this.element.removeAttribute('aria-valuenow');\n this.hiddenInput.value = null;\n }\n };\n NumericTextBox.prototype.setElementValue = function (val, element) {\n Input.setValue(val, (element ? element : this.element), this.floatLabelType, this.showClearButton);\n };\n NumericTextBox.prototype.validateState = function () {\n this.isValidState = true;\n if (this.value || this.value === 0) {\n this.isValidState = !(this.value > this.max || this.value < this.min);\n }\n this.checkErrorClass();\n };\n NumericTextBox.prototype.getNumberOfDecimals = function (value) {\n var numberOfDecimals;\n // eslint-disable-next-line no-useless-escape\n var EXPREGEXP = new RegExp('[eE][\\-+]?([0-9]+)');\n var valueString = value.toString();\n if (EXPREGEXP.test(valueString)) {\n var result = EXPREGEXP.exec(valueString);\n if (!isNullOrUndefined(result)) {\n valueString = value.toFixed(Math.min(parseInt(result[1], 10), 20));\n }\n }\n var decimalPart = valueString.split('.')[1];\n numberOfDecimals = !decimalPart || !decimalPart.length ? 0 : decimalPart.length;\n if (this.decimals !== null) {\n numberOfDecimals = numberOfDecimals < this.decimals ? numberOfDecimals : this.decimals;\n }\n return numberOfDecimals;\n };\n NumericTextBox.prototype.formatNumber = function () {\n var numberOfDecimals = this.getNumberOfDecimals(this.value);\n return this.instance.getNumberFormat({\n maximumFractionDigits: numberOfDecimals,\n minimumFractionDigits: numberOfDecimals, useGrouping: false\n })(this.value);\n };\n NumericTextBox.prototype.trimValue = function (value) {\n if (value > this.max) {\n return this.max;\n }\n if (value < this.min) {\n return this.min;\n }\n return value;\n };\n NumericTextBox.prototype.roundNumber = function (value, precision) {\n var result = value;\n var decimals = precision || 0;\n var result1 = result.toString().split('e');\n result = Math.round(Number(result1[0] + 'e' + (result1[1] ? (Number(result1[1]) + decimals) : decimals)));\n var result2 = result.toString().split('e');\n result = Number(result2[0] + 'e' + (result2[1] ? (Number(result2[1]) - decimals) : -decimals));\n return Number(result.toFixed(decimals));\n };\n NumericTextBox.prototype.cancelEvent = function (event) {\n event.preventDefault();\n return false;\n };\n NumericTextBox.prototype.keyPressHandler = function (event) {\n if (!this.enabled || this.readonly) {\n return true;\n }\n if (!Browser.isDevice && Browser.info.version === '11.0' && event.keyCode === 13) {\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput, event);\n return true;\n }\n if (event.which === 0 || event.metaKey || event.ctrlKey || event.keyCode === 8 || event.keyCode === 13) {\n return true;\n }\n var currentChar = String.fromCharCode(event.which);\n var text = this.element.value;\n text = text.substring(0, this.element.selectionStart) + currentChar + text.substring(this.element.selectionEnd);\n if (!this.numericRegex().test(text)) {\n event.preventDefault();\n event.stopPropagation();\n return false;\n }\n else {\n return true;\n }\n };\n NumericTextBox.prototype.numericRegex = function () {\n var numericObject = getNumericObject(this.locale);\n var decimalSeparator = getValue('decimal', numericObject);\n var fractionRule = '*';\n if (decimalSeparator === DECIMALSEPARATOR) {\n decimalSeparator = '\\\\' + decimalSeparator;\n }\n if (this.decimals === 0 && this.validateDecimalOnType) {\n return INTREGEXP;\n }\n if (this.decimals && this.validateDecimalOnType) {\n fractionRule = '{0,' + this.decimals + '}';\n }\n return new RegExp('^(-)?(((\\\\d+(' + decimalSeparator + '\\\\d' + fractionRule +\n ')?)|(' + decimalSeparator + '\\\\d' + fractionRule + ')))?$');\n };\n NumericTextBox.prototype.mouseWheel = function (event) {\n event.preventDefault();\n var delta;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var rawEvent = event;\n if (rawEvent.wheelDelta) {\n delta = rawEvent.wheelDelta / 120;\n }\n else if (rawEvent.detail) {\n delta = -rawEvent.detail / 3;\n }\n if (delta > 0) {\n this.action(INCREMENT, event);\n }\n else if (delta < 0) {\n this.action(DECREMENT, event);\n }\n this.cancelEvent(event);\n };\n NumericTextBox.prototype.focusHandler = function (event) {\n var _this = this;\n this.focusEventArgs = { event: event, value: this.value, container: this.container };\n this.trigger('focus', this.focusEventArgs);\n if (!this.enabled || this.readonly) {\n return;\n }\n this.isFocused = true;\n removeClass([this.container], ERROR);\n this.prevValue = this.value;\n if ((this.value || this.value === 0)) {\n var formatValue_1 = this.formatNumber();\n this.setElementValue(formatValue_1);\n if (!this.isPrevFocused) {\n if (!Browser.isDevice && Browser.info.version === '11.0') {\n this.element.setSelectionRange(0, formatValue_1.length);\n }\n else {\n var delay = (Browser.isDevice && Browser.isIos) ? 600 : 0;\n setTimeout(function () {\n _this.element.setSelectionRange(0, formatValue_1.length);\n }, delay);\n }\n }\n }\n if (!Browser.isDevice) {\n EventHandler.add(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel, this);\n }\n };\n NumericTextBox.prototype.focusOutHandler = function (event) {\n var _this = this;\n this.blurEventArgs = { event: event, value: this.value, container: this.container };\n this.trigger('blur', this.blurEventArgs);\n if (!this.enabled || this.readonly) {\n return;\n }\n if (this.isPrevFocused) {\n event.preventDefault();\n if (Browser.isDevice) {\n var value_1 = this.element.value;\n this.element.focus();\n this.isPrevFocused = false;\n var ele_1 = this.element;\n setTimeout(function () {\n _this.setElementValue(value_1, ele_1);\n }, 200);\n }\n }\n else {\n this.isFocused = false;\n if (!this.element.value.length) {\n this.setProperties({ value: null }, true);\n }\n var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);\n this.updateValue(parsedInput);\n if (!Browser.isDevice) {\n EventHandler.remove(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel);\n }\n }\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var focusEvent = document.createEvent('FocusEvent');\n focusEvent.initEvent('focusout', false, true);\n element.dispatchEvent(focusEvent);\n }\n };\n NumericTextBox.prototype.mouseDownOnSpinner = function (event) {\n var _this = this;\n if (this.isFocused) {\n this.isPrevFocused = true;\n event.preventDefault();\n }\n if (!this.getElementData(event)) {\n return;\n }\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n var result = this.getElementData(event);\n var target = event.currentTarget;\n var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;\n EventHandler.add(target, 'mouseleave', this.mouseUpClick, this);\n this.timeOut = setInterval(function () {\n _this.isCalled = true;\n _this.action(action, event);\n }, 150);\n EventHandler.add(document, 'mouseup', this.mouseUpClick, this);\n };\n NumericTextBox.prototype.touchMoveOnSpinner = function (event) {\n var target;\n if (event.type === \"touchmove\") {\n var touchEvent = event.touches;\n target = touchEvent.length && document.elementFromPoint(touchEvent[0].pageX, touchEvent[0].pageY);\n }\n else {\n target = document.elementFromPoint(event.clientX, event.clientY);\n }\n if (!(target.classList.contains(SPINICON))) {\n clearInterval(this.timeOut);\n }\n };\n NumericTextBox.prototype.mouseUpOnSpinner = function (event) {\n if (this.isPrevFocused) {\n this.element.focus();\n if (!Browser.isDevice) {\n this.isPrevFocused = false;\n }\n }\n if (!Browser.isDevice) {\n event.preventDefault();\n }\n if (!this.getElementData(event)) {\n return;\n }\n var target = event.currentTarget;\n var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;\n EventHandler.remove(target, 'mouseleave', this.mouseUpClick);\n if (!this.isCalled) {\n this.action(action, event);\n }\n this.isCalled = false;\n EventHandler.remove(document, 'mouseup', this.mouseUpClick);\n var formElement = closest(this.element, 'form');\n if (formElement) {\n var element = this.element.nextElementSibling;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n NumericTextBox.prototype.getElementData = function (event) {\n if ((event.which && event.which === 3) || (event.button && event.button === 2)\n || !this.enabled || this.readonly) {\n return false;\n }\n clearInterval(this.timeOut);\n return true;\n };\n NumericTextBox.prototype.floatLabelTypeUpdate = function () {\n Input.removeFloating(this.inputWrapper);\n var hiddenInput = this.hiddenInput;\n this.hiddenInput.remove();\n Input.addFloating(this.element, this.floatLabelType, this.placeholder, this.createElement);\n this.container.insertBefore(hiddenInput, this.container.childNodes[1]);\n };\n NumericTextBox.prototype.mouseUpClick = function (event) {\n event.stopPropagation();\n clearInterval(this.timeOut);\n this.isCalled = false;\n EventHandler.remove(this.spinUp, 'mouseleave', this.mouseUpClick);\n EventHandler.remove(this.spinDown, 'mouseleave', this.mouseUpClick);\n };\n /**\n * Increments the NumericTextBox value with the specified step value.\n *\n * @param {number} step - Specifies the value used to increment the NumericTextBox value.\n * if its not given then numeric value will be incremented based on the step property value.\n * @returns {void}\n */\n NumericTextBox.prototype.increment = function (step) {\n if (step === void 0) { step = this.step; }\n this.isInteract = false;\n this.changeValue(this.performAction(this.value, step, INCREMENT));\n this.raiseChangeEvent();\n };\n /**\n * Decrements the NumericTextBox value with specified step value.\n *\n * @param {number} step - Specifies the value used to decrement the NumericTextBox value.\n * if its not given then numeric value will be decremented based on the step property value.\n * @returns {void}\n */\n NumericTextBox.prototype.decrement = function (step) {\n if (step === void 0) { step = this.step; }\n this.isInteract = false;\n this.changeValue(this.performAction(this.value, step, DECREMENT));\n this.raiseChangeEvent();\n };\n /**\n * Removes the component from the DOM and detaches all its related event handlers.\n * Also it maintains the initial input element from the DOM.\n *\n * @method destroy\n * @returns {void}\n */\n NumericTextBox.prototype.destroy = function () {\n this.unwireEvents();\n if (!(isBlazor() && this.isServerRendered)) {\n detach(this.hiddenInput);\n if (this.showSpinButton) {\n this.unwireSpinBtnEvents();\n detach(this.spinUp);\n detach(this.spinDown);\n }\n var attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',\n 'autocorrect', 'aria-disabled', 'aria-placeholder', 'autocapitalize',\n 'spellcheck', 'aria-autocomplete', 'tabindex', 'aria-valuemin',\n 'aria-valuemax', 'aria-live', 'aria-valuenow', 'aria-invalid'];\n for (var i = 0; i < attrArray.length; i++) {\n this.element.removeAttribute(attrArray[i]);\n }\n this.element.classList.remove('e-input');\n this.container.insertAdjacentElement('afterend', this.element);\n detach(this.container);\n _super.prototype.destroy.call(this);\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns */\n /**\n * Returns the value of NumericTextBox with the format applied to the NumericTextBox.\n *\n */\n NumericTextBox.prototype.getText = function () {\n return this.element.value;\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns */\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n NumericTextBox.prototype.focusIn = function () {\n if (document.activeElement !== this.element && this.enabled) {\n this.element.focus();\n addClass([this.container], [NUMERIC_FOCUS]);\n }\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n NumericTextBox.prototype.focusOut = function () {\n if (document.activeElement === this.element && this.enabled) {\n this.element.blur();\n removeClass([this.container], [NUMERIC_FOCUS]);\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the properties to be maintained in the persisted state.\n *\n * @returns {string}\n */\n NumericTextBox.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Calls internally if any of the property value is changed.\n *\n * @param {NumericTextBoxModel} newProp - Returns the dynamic property value of the component.\n * @param {NumericTextBoxModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n NumericTextBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n this.setElementWidth(newProp.width);\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'enabled':\n Input.setEnabled(newProp.enabled, this.element);\n break;\n case 'enableRtl':\n Input.setEnableRtl(newProp.enableRtl, [this.container]);\n break;\n case 'readonly':\n Input.setReadonly(newProp.readonly, this.element);\n if (this.readonly) {\n attributes(this.element, { 'aria-readonly': 'true' });\n }\n else {\n this.element.removeAttribute('aria-readonly');\n }\n break;\n case 'htmlAttributes':\n this.updateHTMLAttrToElement();\n this.updateHTMLAttrToWrapper();\n this.updateDataAttribute(true);\n this.checkAttributes(true);\n Input.validateInputType(this.container, this.element);\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.element);\n break;\n case 'step':\n this.step = newProp.step;\n this.validateStep();\n break;\n case 'showSpinButton':\n this.updateSpinButton(newProp);\n break;\n case 'showClearButton':\n this.updateClearButton(newProp);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n this.floatLabelTypeUpdate();\n break;\n case 'value':\n this.isDynamicChange = (this.isAngular || this.isVue) && this.preventChange;\n this.updateValue(newProp.value);\n if (this.isDynamicChange) {\n this.preventChange = false;\n this.isDynamicChange = false;\n }\n break;\n case 'min':\n case 'max':\n setValue(prop, getValue(prop, newProp), this);\n this.validateMinMax();\n this.updateValue(this.value);\n break;\n case 'strictMode':\n this.strictMode = newProp.strictMode;\n this.updateValue(this.value);\n this.validateState();\n break;\n case 'locale':\n this.initCultureFunc();\n this.l10n.setLocale(this.locale);\n this.setSpinButton();\n this.updatePlaceholder();\n Input.setPlaceholder(this.placeholder, this.element);\n this.updateValue(this.value);\n break;\n case 'currency':\n {\n var propVal = getValue(prop, newProp);\n this.setProperties({ currencyCode: propVal }, true);\n this.updateCurrency(prop, propVal);\n }\n break;\n case 'currencyCode':\n {\n var propValue = getValue(prop, newProp);\n this.setProperties({ currency: propValue }, true);\n this.updateCurrency('currency', propValue);\n }\n break;\n case 'format':\n setValue(prop, getValue(prop, newProp), this);\n this.initCultureInfo();\n this.updateValue(this.value);\n break;\n case 'decimals':\n this.decimals = newProp.decimals;\n this.updateValue(this.value);\n }\n }\n };\n NumericTextBox.prototype.updateClearButton = function (newProp) {\n if (isBlazor()) {\n if (this.showClearButton) {\n this.inputWrapper.clearButton = this.container.querySelector('.e-clear-icon');\n Input.wireClearBtnEvents(this.element, this.inputWrapper.clearButton, this.inputWrapper.container);\n }\n }\n else {\n Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper, undefined, this.createElement);\n this.bindClearEvent();\n }\n };\n NumericTextBox.prototype.updateSpinButton = function (newProp) {\n if (isBlazor()) {\n if (this.showSpinButton) {\n this.spinDown = this.container.querySelector('.' + SPINDOWN);\n this.spinUp = this.container.querySelector('.' + SPINUP);\n this.wireSpinBtnEvents();\n }\n }\n else {\n if (newProp.showSpinButton) {\n this.spinBtnCreation();\n }\n else {\n detach(this.spinUp);\n detach(this.spinDown);\n }\n }\n };\n /**\n * Gets the component name\n *\n * @returns {string} Returns the component name.\n * @private\n */\n NumericTextBox.prototype.getModuleName = function () {\n return 'numerictextbox';\n };\n __decorate([\n Property('')\n ], NumericTextBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"value\", void 0);\n __decorate([\n Property(-(Number.MAX_VALUE))\n ], NumericTextBox.prototype, \"min\", void 0);\n __decorate([\n Property(Number.MAX_VALUE)\n ], NumericTextBox.prototype, \"max\", void 0);\n __decorate([\n Property(1)\n ], NumericTextBox.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"placeholder\", void 0);\n __decorate([\n Property({})\n ], NumericTextBox.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"showSpinButton\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"readonly\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property('n2')\n ], NumericTextBox.prototype, \"format\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"decimals\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"currency\", void 0);\n __decorate([\n Property(null)\n ], NumericTextBox.prototype, \"currencyCode\", void 0);\n __decorate([\n Property(true)\n ], NumericTextBox.prototype, \"strictMode\", void 0);\n __decorate([\n Property(false)\n ], NumericTextBox.prototype, \"validateDecimalOnType\", void 0);\n __decorate([\n Property('Never')\n ], NumericTextBox.prototype, \"floatLabelType\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], NumericTextBox.prototype, \"blur\", void 0);\n NumericTextBox = __decorate([\n NotifyPropertyChanges\n ], NumericTextBox);\n return NumericTextBox;\n}(Component));\nexport { NumericTextBox };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';\nimport { Event, EventHandler, isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { addClass, detach, getUniqueID, isRippleEnabled, removeClass, rippleEffect, closest } from '@syncfusion/ej2-base';\nimport { wrapperInitialize, rippleMouseHandler, setHiddenInput } from './../common/common';\nvar CHECK = 'e-check';\nvar DISABLED = 'e-checkbox-disabled';\nvar FRAME = 'e-frame';\nvar INDETERMINATE = 'e-stop';\nvar LABEL = 'e-label';\nvar RIPPLE = 'e-ripple-container';\nvar RIPPLECHECK = 'e-ripple-check';\nvar RIPPLEINDETERMINATE = 'e-ripple-stop';\nvar RTL = 'e-rtl';\nvar WRAPPER = 'e-checkbox-wrapper';\nvar containerAttr = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value'];\n/**\n * The CheckBox is a graphical user interface element that allows you to select one or more options from the choices.\n * It contains checked, unchecked, and indeterminate states.\n * ```html\n *
\n * \n * ```\n */\nvar CheckBox = /** @class */ (function (_super) {\n __extends(CheckBox, _super);\n /**\n * Constructor for creating the widget\n *\n * @private\n * @param {CheckBoxModel} options - Specifies checkbox model\n * @param {string | HTMLInputElement} element - Specifies target element\n */\n function CheckBox(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isFocused = false;\n _this.isMouseClick = false;\n return _this;\n }\n CheckBox.prototype.changeState = function (state) {\n var ariaState;\n var rippleSpan;\n var frameSpan = this.getWrapper().getElementsByClassName(FRAME)[0];\n if (isRippleEnabled) {\n rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n }\n if (state === 'check') {\n frameSpan.classList.remove(INDETERMINATE);\n frameSpan.classList.add(CHECK);\n if (rippleSpan) {\n rippleSpan.classList.remove(RIPPLEINDETERMINATE);\n rippleSpan.classList.add(RIPPLECHECK);\n }\n ariaState = 'true';\n this.element.checked = true;\n }\n else if (state === 'uncheck') {\n removeClass([frameSpan], [CHECK, INDETERMINATE]);\n if (rippleSpan) {\n removeClass([rippleSpan], [RIPPLECHECK, RIPPLEINDETERMINATE]);\n }\n ariaState = 'false';\n this.element.checked = false;\n }\n else {\n frameSpan.classList.remove(CHECK);\n frameSpan.classList.add(INDETERMINATE);\n if (rippleSpan) {\n rippleSpan.classList.remove(RIPPLECHECK);\n rippleSpan.classList.add(RIPPLEINDETERMINATE);\n }\n ariaState = 'mixed';\n this.element.indeterminate = true;\n }\n this.getWrapper().setAttribute('aria-checked', ariaState);\n };\n CheckBox.prototype.clickHandler = function (event) {\n if (this.isMouseClick) {\n this.focusOutHandler();\n this.isMouseClick = false;\n }\n if (this.indeterminate) {\n this.changeState(this.checked ? 'check' : 'uncheck');\n this.indeterminate = false;\n this.element.indeterminate = false;\n }\n else if (this.checked) {\n this.changeState('uncheck');\n this.checked = false;\n }\n else {\n this.changeState('check');\n this.checked = true;\n }\n var changeEventArgs = { checked: this.updateVueArrayModel(false), event: event };\n this.trigger('change', changeEventArgs);\n event.stopPropagation();\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n CheckBox.prototype.destroy = function () {\n var _this = this;\n var wrapper = this.getWrapper();\n _super.prototype.destroy.call(this);\n if (this.wrapper) {\n wrapper = this.wrapper;\n if (!this.disabled) {\n this.unWireEvents();\n }\n if (this.tagName === 'INPUT') {\n if (this.getWrapper() && wrapper.parentNode) {\n wrapper.parentNode.insertBefore(this.element, wrapper);\n }\n detach(wrapper);\n this.element.checked = false;\n if (this.indeterminate) {\n this.element.indeterminate = false;\n }\n ['name', 'value', 'disabled'].forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n }\n else {\n ['role', 'aria-checked', 'class'].forEach(function (key) {\n wrapper.removeAttribute(key);\n });\n wrapper.innerHTML = '';\n }\n }\n };\n CheckBox.prototype.focusHandler = function () {\n this.isFocused = true;\n };\n CheckBox.prototype.focusOutHandler = function () {\n var wrapper = this.getWrapper();\n if (wrapper) {\n wrapper.classList.remove('e-focus');\n }\n this.isFocused = false;\n };\n /**\n * Gets the module name.\n *\n * @private\n * @returns {string} - Module Name\n */\n CheckBox.prototype.getModuleName = function () {\n return 'checkbox';\n };\n /**\n * Gets the properties to be maintained in the persistence state.\n *\n * @private\n * @returns {string} - Persist Data\n */\n CheckBox.prototype.getPersistData = function () {\n return this.addOnPersist(['checked', 'indeterminate']);\n };\n CheckBox.prototype.getWrapper = function () {\n if (this.element && this.element.parentElement) {\n return this.element.parentElement.parentElement;\n }\n else {\n return null;\n }\n };\n CheckBox.prototype.initialize = function () {\n if (isNullOrUndefined(this.initialCheckedValue)) {\n this.initialCheckedValue = this.checked;\n }\n if (this.name) {\n this.element.setAttribute('name', this.name);\n }\n if (this.value) {\n this.element.setAttribute('value', this.value);\n if (this.isVue && typeof this.value === 'boolean' && this.value === true) {\n this.setProperties({ 'checked': true }, true);\n }\n }\n if (this.checked) {\n this.changeState('check');\n }\n if (this.indeterminate) {\n this.changeState();\n }\n if (this.disabled) {\n this.setDisabled();\n }\n };\n CheckBox.prototype.initWrapper = function () {\n var wrapper = this.element.parentElement;\n if (!wrapper.classList.contains(WRAPPER)) {\n wrapper = this.createElement('div', {\n className: WRAPPER, attrs: { 'role': 'checkbox', 'aria-checked': 'false' }\n });\n this.element.parentNode.insertBefore(wrapper, this.element);\n }\n var label = this.createElement('label', { attrs: { for: this.element.id } });\n var frameSpan = this.createElement('span', { className: 'e-icons ' + FRAME });\n wrapper.classList.add('e-wrapper');\n if (this.enableRtl) {\n wrapper.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([wrapper], this.cssClass.split(' '));\n }\n wrapper.appendChild(label);\n label.appendChild(this.element);\n setHiddenInput(this, label);\n label.appendChild(frameSpan);\n if (isRippleEnabled) {\n var rippleSpan = this.createElement('span', { className: RIPPLE });\n if (this.labelPosition === 'Before') {\n label.appendChild(rippleSpan);\n }\n else {\n label.insertBefore(rippleSpan, frameSpan);\n }\n rippleEffect(rippleSpan, { duration: 400, isCenterRipple: true });\n }\n if (this.label) {\n this.setText(this.label);\n }\n };\n CheckBox.prototype.keyUpHandler = function () {\n if (this.isFocused) {\n this.getWrapper().classList.add('e-focus');\n }\n };\n CheckBox.prototype.labelMouseDownHandler = function (e) {\n this.isMouseClick = true;\n var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n rippleMouseHandler(e, rippleSpan);\n };\n CheckBox.prototype.labelMouseUpHandler = function (e) {\n this.isMouseClick = true;\n var rippleSpan = this.getWrapper().getElementsByClassName(RIPPLE)[0];\n if (rippleSpan) {\n var rippleElem = rippleSpan.querySelectorAll('.e-ripple-element');\n for (var i = 0; i < rippleElem.length - 1; i++) {\n rippleSpan.removeChild(rippleSpan.childNodes[i]);\n }\n rippleMouseHandler(e, rippleSpan);\n }\n };\n /**\n * Called internally if any of the property value changes.\n *\n * @private\n * @param {CheckBoxModel} newProp - Specifies new Properties\n * @param {CheckBoxModel} oldProp - Specifies old Properties\n *\n * @returns {void}\n */\n CheckBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n var wrapper = this.getWrapper();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'checked':\n this.indeterminate = false;\n this.element.indeterminate = false;\n this.changeState(newProp.checked ? 'check' : 'uncheck');\n break;\n case 'indeterminate':\n if (newProp.indeterminate) {\n this.changeState();\n }\n else {\n this.element.indeterminate = false;\n this.changeState(this.checked ? 'check' : 'uncheck');\n }\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.setDisabled();\n this.wrapper = this.getWrapper();\n this.unWireEvents();\n }\n else {\n this.element.disabled = false;\n wrapper.classList.remove(DISABLED);\n wrapper.setAttribute('aria-disabled', 'false');\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([wrapper], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([wrapper], newProp.cssClass.split(' '));\n }\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n wrapper.classList.add(RTL);\n }\n else {\n wrapper.classList.remove(RTL);\n }\n break;\n case 'label':\n this.setText(newProp.label);\n break;\n case 'labelPosition': {\n var label = wrapper.getElementsByClassName(LABEL)[0];\n var labelWrap = wrapper.getElementsByTagName('label')[0];\n detach(label);\n if (newProp.labelPosition === 'After') {\n labelWrap.appendChild(label);\n }\n else {\n labelWrap.insertBefore(label, wrapper.getElementsByClassName(FRAME)[0]);\n }\n break;\n }\n case 'name':\n this.element.setAttribute('name', newProp.name);\n break;\n case 'value':\n if (this.isVue && typeof newProp.value === 'object') {\n break;\n }\n this.element.setAttribute('value', newProp.value);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToWrapper();\n break;\n }\n }\n };\n /**\n * Initialize Angular, React and Unique ID support.\n *\n * @private\n * @returns {void}\n */\n CheckBox.prototype.preRender = function () {\n var element = this.element;\n this.formElement = closest(this.element, 'form');\n this.tagName = this.element.tagName;\n element = wrapperInitialize(this.createElement, 'EJS-CHECKBOX', 'checkbox', element, WRAPPER, 'checkbox');\n this.element = element;\n if (this.element.getAttribute('type') !== 'checkbox') {\n this.element.setAttribute('type', 'checkbox');\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n };\n /**\n * Initialize the control rendering.\n *\n * @private\n * @returns {void}\n */\n CheckBox.prototype.render = function () {\n this.initWrapper();\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.updateHtmlAttributeToWrapper();\n this.updateVueArrayModel(true);\n this.renderComplete();\n this.wrapper = this.getWrapper();\n };\n CheckBox.prototype.setDisabled = function () {\n var wrapper = this.getWrapper();\n this.element.disabled = true;\n wrapper.classList.add(DISABLED);\n wrapper.setAttribute('aria-disabled', 'true');\n };\n CheckBox.prototype.setText = function (text) {\n var wrapper = this.getWrapper();\n if (!wrapper) {\n return;\n }\n var label = wrapper.getElementsByClassName(LABEL)[0];\n if (label) {\n label.textContent = text;\n }\n else {\n text = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(text) : text;\n label = this.createElement('span', { className: LABEL, innerHTML: text });\n var labelWrap = wrapper.getElementsByTagName('label')[0];\n if (this.labelPosition === 'Before') {\n labelWrap.insertBefore(label, wrapper.getElementsByClassName(FRAME)[0]);\n }\n else {\n labelWrap.appendChild(label);\n }\n }\n };\n CheckBox.prototype.changeHandler = function (e) {\n e.stopPropagation();\n };\n CheckBox.prototype.formResetHandler = function () {\n this.checked = this.initialCheckedValue;\n this.element.checked = this.initialCheckedValue;\n };\n CheckBox.prototype.unWireEvents = function () {\n var wrapper = this.wrapper;\n EventHandler.remove(this.element, 'click', this.clickHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n var label = wrapper.getElementsByTagName('label')[0];\n EventHandler.remove(label, 'mousedown', this.labelMouseDownHandler);\n EventHandler.remove(label, 'mouseup', this.labelMouseUpHandler);\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n if (this.tagName === 'EJS-CHECKBOX') {\n EventHandler.remove(this.element, 'change', this.changeHandler);\n }\n };\n CheckBox.prototype.wireEvents = function () {\n var wrapper = this.getWrapper();\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n var label = wrapper.getElementsByTagName('label')[0];\n EventHandler.add(label, 'mousedown', this.labelMouseDownHandler, this);\n EventHandler.add(label, 'mouseup', this.labelMouseUpHandler, this);\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n if (this.tagName === 'EJS-CHECKBOX') {\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n }\n };\n CheckBox.prototype.updateVueArrayModel = function (init) {\n if (this.isVue && typeof this.value === 'object') {\n var value = this.element.value;\n if (value && this.value) {\n if (init) {\n for (var i = 0; i < this.value.length; i++) {\n if (value === this.value[i]) {\n this.changeState('check');\n this.setProperties({ 'checked': true }, true);\n }\n }\n }\n else {\n var index = this.value.indexOf(value);\n if (this.checked) {\n if (index < 0) {\n this.value.push(value);\n }\n }\n else {\n if (index > -1) {\n this.value.splice(index, 1);\n }\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return this.value;\n }\n }\n }\n return this.element.checked;\n };\n CheckBox.prototype.updateHtmlAttributeToWrapper = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (containerAttr.indexOf(key) > -1) {\n var wrapper = this.getWrapper();\n if (key === 'class') {\n addClass([wrapper], this.htmlAttributes[key].split(' '));\n }\n else if (key === 'title') {\n wrapper.setAttribute(key, this.htmlAttributes[key]);\n }\n else if (key === 'style') {\n var frameSpan = this.getWrapper().getElementsByClassName(FRAME)[0];\n frameSpan.setAttribute(key, this.htmlAttributes[key]);\n }\n else {\n this.element.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n };\n /**\n * Click the CheckBox element\n * its native method\n *\n * @public\n * @returns {void}\n */\n CheckBox.prototype.click = function () {\n this.element.click();\n };\n /**\n * Sets the focus to CheckBox\n * its native method\n *\n * @public\n * @returns {void}\n */\n CheckBox.prototype.focusIn = function () {\n this.element.focus();\n };\n __decorate([\n Event()\n ], CheckBox.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], CheckBox.prototype, \"created\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"checked\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"disabled\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"indeterminate\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"label\", void 0);\n __decorate([\n Property('After')\n ], CheckBox.prototype, \"labelPosition\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"name\", void 0);\n __decorate([\n Property('')\n ], CheckBox.prototype, \"value\", void 0);\n __decorate([\n Property(false)\n ], CheckBox.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property({})\n ], CheckBox.prototype, \"htmlAttributes\", void 0);\n CheckBox = __decorate([\n NotifyPropertyChanges\n ], CheckBox);\n return CheckBox;\n}(Component));\nexport { CheckBox };\n","import { createElement, isNullOrUndefined, addClass, removeClass, closest, isBlazor, select, remove } from '@syncfusion/ej2-base';\nimport { EventHandler, setStyleAttribute, extend } from '@syncfusion/ej2-base';\nimport * as cls from '../../common/base/css-constant';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { Button, CheckBox } from '@syncfusion/ej2-buttons';\nimport { Tab } from '@syncfusion/ej2-navigations';\nimport * as events from '../../common/base/constant';\nimport { PivotUtil } from '../../base/util';\n/**\n * Module to render Pivot Field List Dialog\n */\n/** @hidden */\nvar DialogRenderer = /** @class */ (function () {\n /** Constructor for render module\n * @param {PivotFieldList} parent - Instance of field list.\n */\n function DialogRenderer(parent) {\n this.parent = parent;\n }\n /**\n * Initialize the field list layout rendering\n * @returns {void}\n * @private\n */\n DialogRenderer.prototype.render = function () {\n var fieldListWrappper = createElement('div', {\n id: this.parent.element.id + '_Wrapper',\n className: cls.WRAPPER_CLASS + ' ' + (this.parent.dataType === 'olap' ? cls.OLAP_WRAPPER_CLASS : ''),\n styles: 'width:' + this.parent.element.style.width\n });\n if (this.parent.isAdaptive) {\n addClass([fieldListWrappper], cls.DEVICE);\n }\n else {\n removeClass([fieldListWrappper], cls.DEVICE);\n }\n if (this.parent.enableRtl) {\n addClass([fieldListWrappper], cls.RTL);\n }\n else {\n removeClass([fieldListWrappper], cls.RTL);\n }\n if (this.parent.cssClass) {\n addClass([fieldListWrappper], this.parent.cssClass);\n }\n this.parentElement = createElement('div', { className: cls.CONTAINER_CLASS });\n this.parent.element.appendChild(fieldListWrappper);\n if (this.parent.isAdaptive) {\n fieldListWrappper.removeAttribute('style');\n this.parentElement = createElement('div', { className: cls.ADAPTIVE_CONTAINER_CLASS });\n this.renderAdaptiveLayout(fieldListWrappper);\n }\n if (this.parent.renderMode === 'Popup') {\n this.renderFieldListDialog(fieldListWrappper);\n this.unWireDialogEvent(this.parent.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS));\n this.wireDialogEvent(this.parent.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS));\n }\n else {\n this.renderStaticLayout(fieldListWrappper);\n }\n };\n DialogRenderer.prototype.renderStaticLayout = function (fieldListWrappper) {\n if (!this.parent.isAdaptive) {\n var layoutHeader = createElement('div', {\n className: cls.FIELD_LIST_TITLE_CLASS\n });\n var headerContent = createElement('div', {\n className: cls.FIELD_LIST_TITLE_CONTENT_CLASS,\n innerHTML: this.parent.localeObj.getConstant('staticFieldList')\n });\n layoutHeader.appendChild(headerContent);\n layoutHeader.appendChild(this.createCalculatedButton());\n addClass([fieldListWrappper], cls.STATIC_FIELD_LIST_CLASS);\n fieldListWrappper.appendChild(layoutHeader);\n fieldListWrappper.appendChild(this.parentElement);\n addClass([fieldListWrappper], cls.STATIC_FIELD_LIST_CLASS);\n if (this.parent.allowDeferLayoutUpdate) {\n fieldListWrappper.appendChild(this.createDeferUpdateButtons());\n this.renderDeferUpdateButtons();\n }\n }\n };\n DialogRenderer.prototype.renderDeferUpdateButtons = function () {\n if (this.parent.allowDeferLayoutUpdate) {\n this.deferUpdateCheckBox = new CheckBox({\n label: this.parent.localeObj.getConstant('deferLayoutUpdate'),\n checked: true,\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n change: this.onCheckChange.bind(this)\n });\n this.deferUpdateCheckBox.isStringTemplate = true;\n this.deferUpdateCheckBox.appendTo('#' + this.parent.element.id + 'DeferUpdateCheckBox');\n this.deferUpdateApplyButton = new Button({\n cssClass: cls.DEFER_APPLY_BUTTON + ' ' + cls.DEFER_UPDATE_BUTTON + (this.parent.renderMode === 'Popup' ?\n (' ' + cls.BUTTON_FLAT_CLASS) : ''),\n content: this.parent.localeObj.getConstant('apply'),\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n isPrimary: true\n });\n this.deferUpdateApplyButton.isStringTemplate = true;\n this.deferUpdateApplyButton.appendTo('#' + this.parent.element.id + '_DeferUpdateButton1');\n this.deferUpdateApplyButton.element.onclick = this.parent.renderMode === 'Fixed' ? this.applyButtonClick.bind(this) :\n this.onDeferUpdateClick.bind(this);\n }\n this.deferUpdateCancelButton = new Button({\n cssClass: cls.DEFER_CANCEL_BUTTON + ' ' + cls.CANCEL_BUTTON_CLASS + (this.parent.renderMode === 'Popup' ?\n (' ' + cls.BUTTON_FLAT_CLASS) : ''),\n content: this.parent.allowDeferLayoutUpdate ? this.parent.localeObj.getConstant('cancel') :\n this.parent.localeObj.getConstant('close'),\n enableRtl: this.parent.enableRtl, isPrimary: !this.parent.allowDeferLayoutUpdate, locale: this.parent.locale\n });\n this.deferUpdateCancelButton.isStringTemplate = true;\n this.deferUpdateCancelButton.appendTo('#' + this.parent.element.id + '_DeferUpdateButton2');\n this.deferUpdateCancelButton.element.onclick = this.parent.renderMode === 'Fixed' ? this.cancelButtonClick.bind(this) :\n this.onCloseFieldList.bind(this);\n };\n DialogRenderer.prototype.createDeferUpdateButtons = function () {\n var layoutFooter = createElement('div', {\n className: cls.LAYOUT_FOOTER\n });\n if (this.parent.allowDeferLayoutUpdate) {\n var checkBoxLayout = createElement('div', {\n className: cls.CHECKBOX_LAYOUT,\n attrs: { 'title': this.parent.localeObj.getConstant('deferLayoutUpdate') }\n });\n var deferUpdateCheckBox = createElement('input', {\n id: this.parent.element.id + 'DeferUpdateCheckBox'\n });\n checkBoxLayout.appendChild(deferUpdateCheckBox);\n layoutFooter.appendChild(checkBoxLayout);\n }\n var buttonLayout = createElement('div', {\n className: cls.BUTTON_LAYOUT\n });\n if (this.parent.allowDeferLayoutUpdate) {\n var deferUpdateButton1 = createElement('button', {\n id: this.parent.element.id + '_DeferUpdateButton1', attrs: { 'type': 'button', 'title': this.parent.localeObj.getConstant('apply') }\n });\n buttonLayout.appendChild(deferUpdateButton1);\n }\n var deferUpdateButton2 = createElement('button', {\n id: this.parent.element.id + '_DeferUpdateButton2', attrs: { 'type': 'button', 'title': this.parent.localeObj.getConstant('cancel') }\n });\n buttonLayout.appendChild(deferUpdateButton2);\n layoutFooter.appendChild(buttonLayout);\n return layoutFooter;\n };\n DialogRenderer.prototype.onCheckChange = function (args) {\n if (args.checked) {\n this.parent.clonedDataSource = extend({}, this.parent.dataSourceSettings, null, true);\n this.parent.clonedFieldList = extend({}, this.parent.pivotFieldList, null, true);\n }\n this.parent.allowDeferLayoutUpdate = !this.parent.allowDeferLayoutUpdate;\n if (this.parent.renderMode === 'Fixed') {\n this.deferUpdateApplyButton.setProperties({ disabled: !this.parent.allowDeferLayoutUpdate });\n this.deferUpdateCancelButton.setProperties({ disabled: !this.parent.allowDeferLayoutUpdate });\n }\n else {\n if (this.parent.allowDeferLayoutUpdate) {\n this.deferUpdateApplyButton.element.style.display = '';\n this.deferUpdateCancelButton.setProperties({ content: this.parent.localeObj.getConstant('cancel') });\n this.deferUpdateCancelButton.isPrimary = false;\n }\n else {\n this.deferUpdateApplyButton.element.style.display = 'none';\n this.deferUpdateCancelButton.setProperties({ content: this.parent.localeObj.getConstant('close') });\n this.deferUpdateCancelButton.isPrimary = true;\n }\n }\n this.cancelButtonClick();\n };\n DialogRenderer.prototype.applyButtonClick = function () {\n if (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.allowDeferLayoutUpdate) {\n this.parent.pivotChange = false;\n }\n this.parent.updateDataSource(false);\n var parent = this.parent;\n parent.axisFieldModule.render();\n parent.clonedDataSource = extend({}, parent.dataSourceSettings, null, true);\n parent.clonedFieldList = extend({}, parent.pivotFieldList, null, true);\n };\n DialogRenderer.prototype.cancelButtonClick = function () {\n if (isBlazor() && !this.parent.isPopupView) {\n PivotUtil.updateDataSourceSettings(this.parent, PivotUtil.getClonedDataSourceSettings(this.parent.clonedDataSource.properties)); /* eslint-disable-line */\n }\n else {\n this.parent.\n setProperties({\n dataSourceSettings: this.parent.clonedDataSource.properties /* eslint-disable-line */\n }, true);\n }\n /* eslint-enable @typescript-eslint/indent */\n if (this.parent.dataType === 'olap') {\n this.parent.olapEngineModule.fieldList = extend({}, this.parent.clonedFieldList, null, true);\n for (var _i = 0, _a = Object.keys(this.parent.clonedFieldList); _i < _a.length; _i++) {\n var name_1 = _a[_i];\n var item = this.parent.clonedFieldList[name_1];\n this.parent.olapEngineModule.updateFieldlistData(item.id, item.isSelected);\n }\n }\n else {\n this.parent.engineModule.fieldList = extend({}, this.parent.clonedFieldList, null, true);\n }\n this.parent.updateDataSource(false, true);\n };\n DialogRenderer.prototype.renderFieldListDialog = function (fieldListWrappper) {\n var toggleFieldList = createElement('div', {\n className: cls.TOGGLE_FIELD_LIST_CLASS + ' ' + cls.ICON + ' ' + cls.TOGGLE_SELECT_CLASS,\n attrs: {\n 'tabindex': '0',\n title: this.parent.localeObj.getConstant('fieldList'),\n 'aria-disabled': 'false',\n 'aria-label': this.parent.localeObj.getConstant('fieldList')\n }\n });\n this.parent.element.appendChild(toggleFieldList);\n if (this.parent.isAdaptive) {\n var headerTemplate = '';\n var buttons = [{\n click: this.showFieldListDialog.bind(this),\n buttonModel: {\n cssClass: cls.ADAPTIVE_FIELD_LIST_BUTTON_CLASS + ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS,\n iconCss: cls.ICON + ' ' + cls.ADD_ICON_CLASS,\n isPrimary: true\n }\n }, {\n click: this.showCalculatedField.bind(this),\n buttonModel: {\n cssClass: cls.ADAPTIVE_CALCULATED_FIELD_BUTTON_CLASS +\n ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS + ' ' + cls.ICON_DISABLE,\n iconCss: cls.ICON + ' ' + cls.ADD_ICON_CLASS, enableRtl: this.parent.enableRtl,\n isPrimary: true\n }\n }];\n this.fieldListDialog = new Dialog({\n animationSettings: { effect: this.parent.enableRtl ? 'SlideRight' : 'SlideLeft' },\n header: headerTemplate,\n content: this.parentElement,\n isModal: true,\n showCloseIcon: false,\n visible: false,\n allowDragging: false,\n closeOnEscape: false,\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n width: '100%',\n height: '100%',\n position: { X: 'center', Y: 'center' },\n buttons: buttons,\n target: document.body,\n close: this.removeFieldListIcon.bind(this),\n open: this.dialogOpen.bind(this)\n });\n this.fieldListDialog.isStringTemplate = true;\n this.fieldListDialog.appendTo(fieldListWrappper);\n // this.fieldListDialog.element.querySelector('.e-dlg-header').innerHTML = headerTemplate;\n setStyleAttribute(select('#' + fieldListWrappper.id + '_dialog-content', fieldListWrappper), {\n 'padding': '0'\n });\n var footer = fieldListWrappper.querySelector('.' + cls.FOOTER_CONTENT_CLASS);\n addClass([footer], cls.FIELD_LIST_FOOTER_CLASS);\n removeClass([footer.querySelector('.' + cls.ADAPTIVE_CALCULATED_FIELD_BUTTON_CLASS)], cls.BUTTON_FLAT_CLASS);\n removeClass([footer.querySelector('.' + cls.ADAPTIVE_FIELD_LIST_BUTTON_CLASS)], cls.BUTTON_FLAT_CLASS);\n this.fieldListDialog.element.querySelector('.' + cls.BACK_ICON).onclick =\n this.parent.allowDeferLayoutUpdate ? this.onDeferUpdateClick.bind(this) : this.onCloseFieldList.bind(this);\n }\n else {\n var template = this.createDeferUpdateButtons().outerHTML;\n var headerTemplate = '';\n this.fieldListDialog = new Dialog({\n animationSettings: { effect: 'Zoom' },\n header: headerTemplate,\n content: this.parentElement,\n isModal: false,\n showCloseIcon: false,\n visible: false,\n allowDragging: true,\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n width: this.parent.element.style.width,\n position: { X: 'center', Y: this.parent.element.offsetTop },\n footerTemplate: template,\n closeOnEscape: false,\n target: !isNullOrUndefined(this.parent.target) ? ((typeof this.parent.target) === 'string') ?\n document.querySelector(this.parent.target) : this.parent.target : document.body,\n close: this.removeFieldListIcon.bind(this)\n });\n this.fieldListDialog.isStringTemplate = true;\n this.fieldListDialog.appendTo(fieldListWrappper);\n // this.fieldListDialog.element.querySelector('.e-dlg-header').innerHTML = headerTemplate;\n // this.fieldListDialog.element.querySelector('.e-footer-content').innerHTML = template;\n this.renderDeferUpdateButtons();\n setStyleAttribute(select('#' + fieldListWrappper.id + '_title', fieldListWrappper), { 'width': '100%' });\n fieldListWrappper.querySelector('.' + cls.TITLE_HEADER_CLASS).appendChild(this.createCalculatedButton());\n }\n };\n DialogRenderer.prototype.dialogOpen = function () {\n this.adaptiveElement.refresh();\n };\n /**\n * Called internally if any of the field added to axis.\n * @param {string[]} selectedNodes - selectedNodes\n * @returns {void}\n * @hidden\n */\n DialogRenderer.prototype.updateDataSource = function (selectedNodes) {\n var axis = ['filters', 'columns', 'rows', 'values'];\n for (var _i = 0, selectedNodes_1 = selectedNodes; _i < selectedNodes_1.length; _i++) {\n var field = selectedNodes_1[_i];\n var fieldName = field;\n var droppedClass = axis[this.adaptiveElement.selectedItem];\n this.parent.pivotCommon.dataSourceUpdate.control = this.parent.getModuleName() === 'pivotview' ?\n this.parent : (this.parent.pivotGridModule ?\n this.parent.pivotGridModule : this.parent);\n this.parent.pivotCommon.dataSourceUpdate.updateDataSource(fieldName, droppedClass, -1);\n }\n this.parent.axisFieldModule.render();\n if (!this.parent.allowDeferLayoutUpdate) {\n this.parent.updateDataSource(true);\n }\n else {\n this.parent.triggerPopulateEvent();\n }\n };\n DialogRenderer.prototype.onDeferUpdateClick = function () {\n this.parent.updateDataSource();\n this.parent.dialogRenderer.fieldListDialog.hide();\n };\n DialogRenderer.prototype.renderAdaptiveLayout = function (fieldListWrappper) {\n var layoutFooter = createElement('div', {\n className: cls.FIELD_LIST_FOOTER_CLASS\n });\n fieldListWrappper.appendChild(this.parentElement);\n var items = [\n {\n header: { 'text': this.parent.localeObj.getConstant('filters') },\n content: this.createAxisTable('filters')\n },\n {\n header: { 'text': this.parent.localeObj.getConstant('columns') },\n content: this.createAxisTable('columns')\n },\n {\n header: { 'text': this.parent.localeObj.getConstant('rows') },\n content: this.createAxisTable('rows')\n },\n {\n header: { 'text': this.parent.localeObj.getConstant('values') },\n content: this.createAxisTable('values')\n },\n {\n header: { 'text': this.parent.localeObj.getConstant('createCalculatedField') },\n content: 'Calculated Field Related UI'\n }\n ];\n if (!this.parent.allowCalculatedField) {\n items.pop();\n }\n this.adaptiveElement = new Tab({\n heightAdjustMode: 'Auto',\n items: items,\n height: '100%',\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n selected: this.tabSelect.bind(this)\n });\n if (this.parent.renderMode === 'Fixed') {\n layoutFooter.appendChild(this.createAddButton());\n addClass([fieldListWrappper], cls.STATIC_FIELD_LIST_CLASS);\n this.adaptiveElement.isStringTemplate = true;\n this.adaptiveElement.appendTo(this.parentElement);\n this.parentElement.appendChild(layoutFooter);\n }\n else {\n this.adaptiveElement.isStringTemplate = true;\n this.adaptiveElement.appendTo(this.parentElement);\n }\n };\n DialogRenderer.prototype.tabSelect = function (e) {\n var fieldWrapper = closest(this.parentElement, '.' + cls.WRAPPER_CLASS);\n if (fieldWrapper && fieldWrapper.querySelector('.' + cls.ADAPTIVE_FIELD_LIST_BUTTON_CLASS)) {\n if (e.selectedIndex !== 4) {\n addClass([fieldWrapper.querySelector('.' + cls.ADAPTIVE_CALCULATED_FIELD_BUTTON_CLASS)], cls.ICON_DISABLE);\n removeClass([fieldWrapper.querySelector('.' + cls.ADAPTIVE_FIELD_LIST_BUTTON_CLASS)], cls.ICON_DISABLE);\n }\n else {\n removeClass([fieldWrapper.querySelector('.' + cls.ADAPTIVE_CALCULATED_FIELD_BUTTON_CLASS)], cls.ICON_DISABLE);\n addClass([fieldWrapper.querySelector('.' + cls.ADAPTIVE_FIELD_LIST_BUTTON_CLASS)], cls.ICON_DISABLE);\n }\n }\n if (e.selectedIndex === 4) {\n this.adaptiveElement.items[4].content = '';\n this.adaptiveElement.dataBind();\n this.parent.notify(events.initCalculatedField, {});\n }\n else {\n this.parent.axisFieldModule.render();\n }\n };\n DialogRenderer.prototype.createCalculatedButton = function () {\n var calculatedButton = createElement('button', {\n id: this.parent.element.id + '_CalculatedField',\n attrs: {\n 'type': 'button',\n 'tabindex': '0',\n 'aria-disabled': 'false',\n 'aria-label': this.parent.localeObj.getConstant('CalculatedField')\n }\n });\n var calculateField = new Button({\n cssClass: cls.CALCULATED_FIELD_CLASS + ' ' + cls.ICON_DISABLE,\n content: this.parent.localeObj.getConstant('CalculatedField'),\n enableRtl: this.parent.enableRtl, locale: this.parent.locale\n });\n calculateField.isStringTemplate = true;\n calculateField.appendTo(calculatedButton);\n if (this.parent.calculatedFieldModule) {\n removeClass([calculatedButton], cls.ICON_DISABLE);\n }\n calculateField.element.onclick = this.showCalculatedField.bind(this);\n return calculatedButton;\n };\n DialogRenderer.prototype.createAddButton = function () {\n var footerContainer = createElement('div', {\n className: cls.FIELD_LIST_FOOTER_CLASS + '-content'\n });\n var fieldListButton = createElement('div', {});\n var calculatedButton = createElement('div', {});\n var calculateField = new Button({\n cssClass: cls.ADAPTIVE_CALCULATED_FIELD_BUTTON_CLASS +\n ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS + ' ' + cls.ICON_DISABLE,\n iconCss: cls.ICON + ' ' + cls.ADD_ICON_CLASS,\n enableRtl: this.parent.enableRtl, locale: this.parent.locale\n });\n var fieldList = new Button({\n cssClass: cls.ADAPTIVE_FIELD_LIST_BUTTON_CLASS + ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS,\n iconCss: cls.ICON + ' ' + cls.ADD_ICON_CLASS,\n enableRtl: this.parent.enableRtl, locale: this.parent.locale\n });\n fieldList.isStringTemplate = true;\n fieldList.appendTo(fieldListButton);\n calculateField.isStringTemplate = true;\n calculateField.appendTo(calculatedButton);\n footerContainer.appendChild(fieldListButton);\n footerContainer.appendChild(calculatedButton);\n calculateField.element.onclick = this.showCalculatedField.bind(this);\n fieldList.element.onclick = this.showFieldListDialog.bind(this);\n return footerContainer;\n };\n DialogRenderer.prototype.createAxisTable = function (axis) {\n var axisWrapper = createElement('div', {\n className: cls.FIELD_LIST_CLASS + '-' + axis\n });\n var axisContent = createElement('div', { className: cls.AXIS_CONTENT_CLASS + ' ' + 'e-' + axis });\n var axisPrompt = createElement('span', {\n className: cls.AXIS_PROMPT_CLASS,\n innerHTML: this.parent.localeObj.getConstant('addPrompt')\n });\n axisWrapper.appendChild(axisContent);\n axisWrapper.appendChild(axisPrompt);\n return axisWrapper;\n };\n DialogRenderer.prototype.showCalculatedField = function (event) {\n if (!this.parent.isAdaptive) {\n if (this.parent.dialogRenderer.fieldListDialog) {\n this.parent.dialogRenderer.fieldListDialog.hide();\n addClass([this.parent.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS)], cls.ICON_HIDDEN);\n }\n }\n this.parent.notify(events.initCalculatedField, {});\n };\n DialogRenderer.prototype.showFieldListDialog = function (event) {\n var activeindex = this.adaptiveElement.selectedItem;\n this.parent.treeViewModule.render(activeindex);\n };\n DialogRenderer.prototype.onShowFieldList = function () {\n if (this.parent.allowDeferLayoutUpdate) {\n if (this.parent.isAdaptive) {\n this.parent.axisFieldModule.render();\n }\n this.parent.clonedDataSource = extend({}, this.parent.dataSourceSettings, null, true);\n this.parent.clonedFieldList = extend({}, this.parent.pivotFieldList, null, true);\n }\n addClass([this.parent.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS)], cls.ICON_HIDDEN);\n this.parent.dialogRenderer.fieldListDialog.show();\n this.parent.dialogRenderer.fieldListDialog.element.style.top =\n parseInt(this.parent.dialogRenderer.fieldListDialog.element.style.top, 10) < 0 ?\n '0px' : this.parent.dialogRenderer.fieldListDialog.element.style.top;\n };\n DialogRenderer.prototype.onCloseFieldList = function () {\n if (this.parent.allowDeferLayoutUpdate) {\n this.parent.dataSourceSettings =\n extend({}, this.parent.clonedDataSource.properties, null, true); /* eslint-disable-line */\n if (this.parent.isPopupView && this.parent.pivotGridModule) {\n this.parent.pivotGridModule.engineModule = this.parent.engineModule;\n this.parent.pivotGridModule.olapEngineModule = this.parent.olapEngineModule;\n this.parent.pivotGridModule.\n setProperties({\n dataSourceSettings: this.parent.clonedDataSource.properties /* eslint-disable-line */\n }, true);\n }\n if (Object.keys(this.parent.clonedFieldList).length > 0) {\n this.parent.dataType === 'olap' ? this.parent.olapEngineModule.fieldList = /* eslint-disable-line */\n extend({}, this.parent.clonedFieldList, null, true) :\n this.parent.engineModule.fieldList = extend({}, this.parent.clonedFieldList, null, true);\n }\n if (this.parent.isPopupView && this.parent.pivotGridModule) {\n this.parent.pivotGridModule.notify(events.uiUpdate, this);\n this.parent.pivotGridModule.notify(events.contentReady, this);\n }\n else {\n this.cancelButtonClick();\n }\n }\n this.parent.dialogRenderer.fieldListDialog.hide();\n };\n DialogRenderer.prototype.removeFieldListIcon = function () {\n if (this.parent.isAdaptive && this.parent.allowCalculatedField && this.parent.calculatedFieldModule) {\n if (this.adaptiveElement && this.adaptiveElement.selectedItem === 4) {\n if (select('#' + this.parent.element.id + 'droppable', this.adaptiveElement.element)) {\n /* eslint-disable */\n this.parent.calculatedFieldModule\n .updateAdaptiveCalculatedField(false);\n /* eslint-enable */\n }\n else {\n this.parent.notify(events.initCalculatedField, { edit: false });\n }\n }\n }\n if (!document.getElementById(this.parent.element.id + 'calculateddialog')) {\n removeClass([this.parent.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS)], cls.ICON_HIDDEN);\n }\n };\n DialogRenderer.prototype.keyPress = function (e) {\n if (e.keyCode === 13 && e.target) {\n e.target.click();\n e.preventDefault();\n return;\n }\n };\n DialogRenderer.prototype.wireDialogEvent = function (element) {\n EventHandler.add(element, 'keydown', this.keyPress, this);\n EventHandler.add(element, 'click', this.onShowFieldList, this);\n };\n DialogRenderer.prototype.unWireDialogEvent = function (element) {\n EventHandler.remove(element, 'keydown', this.keyPress);\n EventHandler.remove(element, 'click', this.onShowFieldList);\n };\n /**\n * Destroys the Field Table component.\n * @function destroy\n * @returns {void}\n */\n DialogRenderer.prototype.destroy = function () {\n if (this.parent.renderMode === 'Popup') {\n this.unWireDialogEvent(this.parent.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS));\n }\n if (this.deferUpdateCheckBox && !this.deferUpdateCheckBox.isDestroyed) {\n this.deferUpdateCheckBox.destroy();\n this.deferUpdateCheckBox = null;\n }\n if (this.deferUpdateApplyButton && !this.deferUpdateApplyButton.isDestroyed) {\n this.deferUpdateApplyButton.destroy();\n this.deferUpdateApplyButton = null;\n }\n if (this.deferUpdateCancelButton && !this.deferUpdateCancelButton.isDestroyed) {\n this.deferUpdateCancelButton.destroy();\n this.deferUpdateCancelButton = null;\n }\n if (this.parent.renderMode === 'Popup') {\n if (this.fieldListDialog && !this.fieldListDialog.isDestroyed) {\n this.fieldListDialog.destroy();\n this.fieldListDialog = null;\n }\n if (document.getElementById(this.parent.element.id + '_Wrapper')) {\n remove(document.getElementById(this.parent.element.id + '_Wrapper'));\n }\n }\n };\n return DialogRenderer;\n}());\nexport { DialogRenderer };\n","import { createElement, addClass, removeClass, remove, EventHandler, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { closest } from '@syncfusion/ej2-base';\nimport * as cls from '../../common/base/css-constant';\nimport * as events from '../../common/base/constant';\nimport { TreeView } from '@syncfusion/ej2-navigations';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { MaskedTextBox } from '@syncfusion/ej2-inputs';\nimport { PivotUtil } from '../../base/util';\n/**\n * Module to render Field List\n */\n/** @hidden */\nvar TreeViewRenderer = /** @class */ (function () {\n /** Constructor for render module\n * @param {PivotFieldList} parent - Instance of field list.\n */\n function TreeViewRenderer(parent) {\n this.selectedNodes = [];\n this.parent = parent;\n this.addEventListener();\n }\n /**\n * Initialize the field list tree rendering\n * @param {number} axis - Axis position.\n * @returns {void}\n * @private\n */\n TreeViewRenderer.prototype.render = function (axis) {\n this.parentElement = this.parent.dialogRenderer.parentElement;\n this.fieldListSort = 'None';\n if (!this.parent.isAdaptive) {\n var fieldTable = createElement('div', {\n className: cls.FIELD_TABLE_CLASS + ' ' + (this.parent.dataType === 'olap' ? cls.OLAP_FIELD_TABLE_CLASS : '')\n });\n var treeHeader = createElement('div', {\n className: cls.FIELD_HEADER_CLASS,\n innerHTML: this.parent.localeObj.getConstant('allFields')\n });\n var treeOuterDiv = createElement('div', { className: cls.FIELD_LIST_TREE_CLASS + '-outer-div' });\n this.treeViewElement = createElement('div', {\n id: this.parent.element.id + '_TreeView',\n className: cls.FIELD_LIST_CLASS + ' ' + (this.parent.dataType === 'olap' ? cls.OLAP_FIELD_LIST_CLASS : '')\n });\n var fieldHeaderWrappper = createElement('div', { className: 'e-field-header-wrapper' });\n fieldHeaderWrappper.appendChild(treeHeader);\n fieldTable.appendChild(fieldHeaderWrappper);\n this.updateSortElements(fieldHeaderWrappper);\n treeOuterDiv.appendChild(this.treeViewElement);\n fieldTable.appendChild(treeOuterDiv);\n this.parentElement.appendChild(fieldTable);\n if (this.parent.renderMode === 'Fixed') {\n var centerDiv = createElement('div', { className: cls.STATIC_CENTER_DIV_CLASS });\n var axisHeader = createElement('div', {\n className: cls.STATIC_CENTER_HEADER_CLASS,\n innerHTML: this.parent.localeObj.getConstant('centerHeader')\n });\n this.parentElement.appendChild(centerDiv);\n this.parentElement.appendChild(axisHeader);\n }\n this.renderTreeView();\n }\n else {\n this.renderTreeDialog(axis);\n }\n };\n TreeViewRenderer.prototype.updateSortElements = function (headerWrapper) {\n var options = { 'None': 'sortNone', 'Ascend': 'sortAscending', 'Descend': 'sortDescending' }; /* eslint-disable-line */\n var keys = Object.keys(options);\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var option = keys_1[_i];\n var spanElement = createElement('span', {\n attrs: {\n 'tabindex': '0',\n 'aria-disabled': 'false',\n 'aria-label': 'Sort ' + option,\n 'data-sort': option,\n 'title': this.parent.localeObj.getConstant(options[option])\n },\n className: cls.ICON + ' ' + 'e-sort-' + option.toLowerCase() + ' ' +\n (this.fieldListSort === option ? 'e-selected' : '')\n });\n headerWrapper.appendChild(spanElement);\n this.unWireFieldListEvent(spanElement);\n this.wireFieldListEvent(spanElement);\n }\n };\n TreeViewRenderer.prototype.renderTreeView = function () {\n this.fieldTable = new TreeView({\n fields: { dataSource: this.getTreeData(), id: 'id', text: 'caption', isChecked: 'isSelected', parentID: 'pid', iconCss: 'spriteCssClass' },\n nodeChecked: this.nodeStateChange.bind(this),\n cssClass: cls.FIELD_LIST_TREE_CLASS,\n showCheckBox: true,\n allowDragAndDrop: true,\n sortOrder: 'None',\n autoCheck: false,\n loadOnDemand: this.parent.dataType === 'olap' ? false : true,\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n nodeDragStart: this.dragStart.bind(this),\n nodeDragStop: this.dragStop.bind(this),\n drawNode: this.updateTreeNode.bind(this),\n nodeExpanding: this.updateNodeIcon.bind(this),\n nodeCollapsed: this.updateNodeIcon.bind(this),\n nodeSelected: function (args) {\n removeClass([args.node], 'e-active');\n args.cancel = true;\n }\n });\n this.treeViewElement.innerHTML = '';\n this.fieldTable.isStringTemplate = true;\n this.fieldTable.appendTo(this.treeViewElement);\n /* eslint-disable */\n var dragEle = this.parent.renderMode === \"Fixed\" ? this.parent.element : this.parentElement;\n if (!isNullOrUndefined(dragEle.querySelector('.' + cls.FIELD_LIST_CLASS))) {\n dragEle.querySelector('.' + cls.FIELD_LIST_CLASS).ej2_instances[0].dragObj.enableAutoScroll = false;\n }\n /* eslint-enable */\n };\n TreeViewRenderer.prototype.updateNodeIcon = function (args) {\n if (this.parent.dataType === 'olap') {\n if (args.node && args.node.querySelector('.e-list-icon') &&\n (args.node.querySelector('.e-list-icon').className.indexOf('e-folderCDB-icon') > -1)) {\n var node = args.node.querySelector('.e-list-icon');\n removeClass([node], 'e-folderCDB-icon');\n addClass([node], 'e-folderCDB-open-icon');\n }\n else if (args.node && args.node.querySelector('.e-list-icon') &&\n (args.node.querySelector('.e-list-icon').className.indexOf('e-folderCDB-open-icon') > -1)) {\n var node = args.node.querySelector('.e-list-icon');\n removeClass([node], 'e-folderCDB-open-icon');\n addClass([node], 'e-folderCDB-icon');\n }\n }\n };\n TreeViewRenderer.prototype.updateTreeNode = function (args) {\n var allowDrag = false;\n if (this.parent.dataType === 'olap') {\n allowDrag = this.updateOlapTreeNode(args);\n }\n else {\n allowDrag = true;\n }\n var liTextElement = args.node.querySelector('.' + cls.TEXT_CONTENT_CLASS);\n if (args.node.querySelector('.e-list-icon') && liTextElement) {\n var liIconElement = args.node.querySelector('.e-list-icon');\n liTextElement.insertBefore(liIconElement, args.node.querySelector('.e-list-text'));\n }\n if (allowDrag && !this.parent.isAdaptive) {\n /* eslint-disable */\n var field = PivotUtil.getFieldInfo(args.nodeData.id, this.parent);\n /* eslint-enable */\n allowDrag = false;\n var dragElement = createElement('span', {\n attrs: {\n 'tabindex': '-1',\n title: (field.fieldItem ? field.fieldItem.allowDragAndDrop ?\n this.parent.localeObj.getConstant('drag') : '' : this.parent.localeObj.getConstant('drag')),\n 'aria-disabled': 'false'\n },\n className: cls.ICON + ' ' + cls.DRAG_CLASS + ' ' +\n (field.fieldItem ? field.fieldItem.allowDragAndDrop ? '' : cls.DRAG_DISABLE_CLASS : '')\n });\n if (args.node.querySelector('.e-checkbox-wrapper') &&\n !args.node.querySelector('.cls.DRAG_CLASS') && liTextElement) {\n liTextElement.insertBefore(dragElement, args.node.querySelector('.e-checkbox-wrapper'));\n }\n }\n if (args.node.querySelector('.' + cls.NODE_CHECK_CLASS)) {\n addClass([args.node.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.LIST_SELECT_CLASS);\n }\n };\n TreeViewRenderer.prototype.updateOlapTreeNode = function (args) {\n var allowDrag = false;\n if (this.parent.dataType === 'olap') {\n if (args.node && args.node.querySelector('.e-calcMemberGroupCDB,.e-measureGroupCDB-icon,.e-folderCDB-icon,.e-folderCDB-open-icon,.e-dimensionCDB-icon,.e-kpiCDB-icon')) {\n args.node.querySelector('.e-checkbox-wrapper').style.display = 'none';\n }\n if (args.node && args.node.querySelector('.e-list-icon') &&\n (args.node.querySelector('.e-list-icon').className.indexOf('e-level-members') > -1)) {\n if (this.parent.isAdaptive) {\n args.node.querySelector('.e-checkbox-wrapper').style.display = 'none';\n }\n else {\n args.node.querySelector('.e-checkbox-wrapper').style.visibility = 'hidden';\n }\n }\n if (args.node && (args.node.querySelector('.e-hierarchyCDB-icon,.e-attributeCDB-icon,.e-namedSetCDB-icon') ||\n args.node.querySelector('.e-measure-icon,.e-kpiGoal-icon,.e-kpiStatus-icon,.e-kpiTrend-icon,.e-kpiValue-icon') ||\n args.node.querySelector('.e-calc-measure-icon,.e-calc-dimension-icon'))) {\n if (args.node.querySelector('.e-measure-icon')) {\n args.node.querySelector('.e-list-icon').style.display = 'none';\n allowDrag = true;\n }\n else {\n allowDrag = true;\n }\n }\n }\n else {\n allowDrag = true;\n }\n return allowDrag;\n };\n TreeViewRenderer.prototype.renderTreeDialog = function (axis) {\n var fieldListDialog = createElement('div', {\n id: this.parent.element.id + '_FieldListTreeView',\n className: cls.ADAPTIVE_FIELD_LIST_DIALOG_CLASS + ' ' + (this.parent.dataType === 'olap' ? 'e-olap-editor-dialog' : '')\n });\n this.parentElement.appendChild(fieldListDialog);\n this.fieldDialog = new Dialog({\n animationSettings: { effect: 'Fade' },\n allowDragging: false,\n header: this.parent.localeObj.getConstant('adaptiveFieldHeader'),\n content: this.createTreeView(this.getTreeData(axis)),\n isModal: true,\n visible: true,\n showCloseIcon: false,\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n width: 'auto',\n height: '350px',\n position: { X: 'center', Y: 'center' },\n buttons: [{\n click: this.closeTreeDialog.bind(this),\n buttonModel: {\n cssClass: cls.CANCEL_BUTTON_CLASS, content: this.parent.localeObj.getConstant('cancel')\n }\n }, {\n click: this.onFieldAdd.bind(this),\n buttonModel: {\n cssClass: cls.OK_BUTTON_CLASS, content: this.parent.localeObj.getConstant('add'),\n isPrimary: true\n }\n }],\n closeOnEscape: false,\n target: this.parentElement.parentElement,\n close: this.dialogClose.bind(this)\n });\n this.fieldDialog.isStringTemplate = true;\n this.fieldDialog.appendTo(fieldListDialog);\n // this.fieldDialog.element.querySelector('.e-dlg-header').innerHTML = this.parent.localeObj.getConstant('adaptiveFieldHeader');\n };\n TreeViewRenderer.prototype.dialogClose = function () {\n if (document.getElementById(this.parent.element.id + '_FieldListTreeView')) {\n remove(document.getElementById(this.parent.element.id + '_FieldListTreeView'));\n }\n };\n TreeViewRenderer.prototype.createTreeView = function (treeData) {\n var editorTreeWrapper = createElement('div', {\n id: this.parent.element.id + 'EditorDiv',\n className: cls.EDITOR_TREE_WRAPPER_CLASS\n });\n var searchWrapper = createElement('div', {\n id: this.parent.element.id + '_SearchDiv', attrs: { 'tabindex': '-1' },\n className: cls.EDITOR_SEARCH_WRAPPER_CLASS\n });\n var editorSearch = createElement('input', { attrs: { 'type': 'text' } });\n searchWrapper.appendChild(editorSearch);\n var treeOuterDiv = createElement('div', { className: cls.EDITOR_TREE_CONTAINER_CLASS + '-outer-div' });\n var treeViewContainer = createElement('div', {\n className: cls.EDITOR_TREE_CONTAINER_CLASS + ' ' + (this.parent.dataType === 'olap' ? 'e-olap-field-list-tree' : '')\n });\n editorTreeWrapper.appendChild(searchWrapper);\n this.editorSearch = new MaskedTextBox({\n showClearButton: true,\n placeholder: this.parent.localeObj.getConstant('search'),\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n cssClass: cls.EDITOR_SEARCH_CLASS,\n change: this.textChange.bind(this)\n });\n this.editorSearch.isStringTemplate = true;\n this.editorSearch.appendTo(editorSearch);\n var promptDiv = createElement('div', {\n className: cls.EMPTY_MEMBER_CLASS + ' ' + cls.ICON_DISABLE,\n innerHTML: this.parent.localeObj.getConstant('noMatches')\n });\n editorTreeWrapper.appendChild(promptDiv);\n treeOuterDiv.appendChild(treeViewContainer);\n editorTreeWrapper.appendChild(treeOuterDiv);\n this.fieldTable = new TreeView({\n fields: { dataSource: treeData, id: 'id', text: 'caption', isChecked: 'isSelected', parentID: 'pid', iconCss: 'spriteCssClass' },\n showCheckBox: true,\n autoCheck: false,\n loadOnDemand: this.parent.dataType === 'olap' ? false : true,\n sortOrder: this.parent.dataType === 'olap' ? 'None' : 'Ascending',\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n nodeChecked: this.addNode.bind(this),\n drawNode: this.updateTreeNode.bind(this),\n nodeExpanding: this.updateNodeIcon.bind(this),\n nodeCollapsed: this.updateNodeIcon.bind(this),\n nodeSelected: function (args) {\n removeClass([args.node], 'e-active');\n args.cancel = true;\n }\n });\n this.fieldTable.isStringTemplate = true;\n this.fieldTable.appendTo(treeViewContainer);\n return editorTreeWrapper;\n };\n TreeViewRenderer.prototype.textChange = function (e) {\n this.parent.pivotCommon.eventBase.searchTreeNodes(e, this.fieldTable, true);\n var promptDiv = this.fieldDialog.element.querySelector('.' + cls.EMPTY_MEMBER_CLASS);\n var liList = [].slice.call(this.fieldTable.element.querySelectorAll('li'));\n var disabledList = [].slice.call(this.fieldTable.element.querySelectorAll('li.' + cls.ICON_DISABLE));\n if (liList.length === disabledList.length) {\n removeClass([promptDiv], cls.ICON_DISABLE);\n }\n else {\n addClass([promptDiv], cls.ICON_DISABLE);\n }\n };\n TreeViewRenderer.prototype.dragStart = function (args) {\n var _this = this;\n if (args.event.target.classList.contains(cls.DRAG_CLASS) &&\n !args.event.target.classList.contains(cls.DRAG_DISABLE_CLASS)) {\n var fieldInfo = PivotUtil.getFieldInfo(args.draggedNode.getAttribute('data-uid'), this.parent);\n var dragEventArgs = {\n fieldName: fieldInfo.fieldName, fieldItem: fieldInfo.fieldItem, axis: fieldInfo.axis,\n dataSourceSettings: this.parent.dataSourceSettings, cancel: false\n };\n var control = this.parent.isPopupView ? this.parent.pivotGridModule : this.parent;\n control.trigger(events.fieldDragStart, dragEventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.parent.isDragging = true;\n addClass([args.draggedNode.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.SELECTED_NODE_CLASS);\n var data = void 0;\n if (_this.parent.dataType === 'olap') {\n data = _this.parent.olapEngineModule.fieldList[args.draggedNode.getAttribute('data-uid')];\n }\n else {\n data = _this.parent.engineModule.fieldList[args.draggedNode.getAttribute('data-uid')];\n }\n var axis = [cls.ROW_AXIS_CLASS, cls.COLUMN_AXIS_CLASS, cls.FILTER_AXIS_CLASS];\n if (data && data.aggregateType === 'CalculatedField') {\n for (var _i = 0, axis_1 = axis; _i < axis_1.length; _i++) {\n var axisContent = axis_1[_i];\n addClass([_this.parentElement.querySelector('.' + axisContent)], cls.NO_DRAG_CLASS);\n }\n }\n var dragItem = args.clonedNode;\n if (dragItem && (_this.parent.getModuleName() === 'pivotfieldlist' &&\n _this.parent.renderMode) === 'Popup') {\n dragItem.style.zIndex = (_this.parent.dialogRenderer.fieldListDialog.zIndex + 1).toString();\n }\n }\n else {\n _this.parent.isDragging = false;\n args.cancel = true;\n }\n });\n }\n else {\n this.parent.isDragging = false;\n args.cancel = true;\n }\n };\n // private getFieldDragArgs(args: DragAndDropEventArgs): FieldDragStartEventArgs {\n // let fieldInfo: FieldItemInfo = PivotUtil.getFieldInfo(args.draggedNode.getAttribute('data-uid'), this.parent);\n // let dragEventArgs: any = {\n // fieldName: fieldInfo.fieldName, fieldItem: fieldInfo.fieldItem, axis: fieldInfo.axis,\n // dataSourceSettings: this.parent.dataSourceSettings, cancel: false\n // }\n // let treeModule: TreeViewRenderer = this;\n // if (isBlazor()) {\n // dragEventArgs = this.getFieldDragEventArgs(dragEventArgs);\n // dragEventArgs.then((e: any) => {\n // return e;\n // });\n // }\n // let control: PivotView | PivotFieldList = this.parent.isPopupView ? this.parent.pivotGridModule : this.parent;\n // control.trigger(events.fieldDragStart, dragEventArgs);\n // return dragEventArgs;\n // }\n // private getFieldDragEventArgs(dragEventArgs: FieldDragStartEventArgs): FieldDragStartEventArgs | Deferred {\n // let callbackPromise: Deferred = new Deferred();\n // let control: PivotView | PivotFieldList = this.parent.isPopupView ? this.parent.pivotGridModule : this.parent;\n // control.trigger(events.fieldDragStart, dragEventArgs, (observedArgs: FieldDragStartEventArgs) => {\n // callbackPromise.resolve(observedArgs);\n // });\n // return callbackPromise;\n // }\n TreeViewRenderer.prototype.dragStop = function (args) {\n args.cancel = true;\n this.parent.isDragging = false;\n var axis = [cls.ROW_AXIS_CLASS, cls.COLUMN_AXIS_CLASS, cls.FILTER_AXIS_CLASS];\n for (var _i = 0, axis_2 = axis; _i < axis_2.length; _i++) {\n var axisElement = axis_2[_i];\n removeClass([this.parentElement.querySelector('.' + axisElement)], cls.NO_DRAG_CLASS);\n }\n removeClass([args.draggedNode.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.SELECTED_NODE_CLASS);\n if (this.parent.pivotCommon.filterDialog.dialogPopUp) {\n this.parent.pivotCommon.filterDialog.dialogPopUp.close();\n }\n var fieldName = args.draggedNodeData.id.toString();\n /* eslint-disable */\n if (!this.isNodeDropped(args, fieldName)) {\n return;\n }\n var list = this.parent.pivotFieldList;\n var selectedNode = list[fieldName];\n /* eslint-enable */\n this.parent.pivotCommon.dataSourceUpdate.control = this.parent.getModuleName() === 'pivotview' ? this.parent :\n (this.parent.pivotGridModule ? this.parent.pivotGridModule : this.parent);\n if (this.parent.pivotCommon.nodeStateModified.onStateModified(args, fieldName)) {\n if (this.parent.allowDeferLayoutUpdate) {\n selectedNode.isSelected = true;\n this.updateDataSource();\n }\n else {\n this.parent.updateDataSource();\n }\n var parent_1 = this.parent;\n //setTimeout(() => {\n parent_1.axisFieldModule.render();\n //});\n }\n };\n TreeViewRenderer.prototype.isNodeDropped = function (args, targetID) {\n var isDropped = true;\n if (args.draggedNodeData.isChecked === 'true') {\n var target = this.getButton(targetID);\n var axisPanel = closest(target, '.' + cls.DROPPABLE_CLASS);\n var droppableElement = closest(args.target, '.' + cls.DROPPABLE_CLASS);\n if (target && axisPanel === droppableElement) {\n var pivotButtons = [].slice.call(axisPanel.querySelectorAll('.' + cls.PIVOT_BUTTON_CLASS));\n var dropTarget = closest(args.target, '.' + cls.PIVOT_BUTTON_WRAPPER_CLASS);\n var sourcePosition = void 0;\n var dropPosition = -1;\n for (var i = 0, n = pivotButtons.length; i < n; i++) {\n if (pivotButtons[i].id === target.id) {\n sourcePosition = i;\n }\n if (dropTarget) {\n var droppableButton = dropTarget.querySelector('.' + cls.PIVOT_BUTTON_CLASS);\n if (pivotButtons[i].id === droppableButton.id) {\n dropPosition = i;\n }\n }\n }\n if (sourcePosition === dropPosition || (sourcePosition === (pivotButtons.length - 1) && dropPosition === -1)) {\n var parentElement = document.getElementById(this.parent.element.id + '_Wrapper');\n removeClass([].slice.call(parentElement.querySelectorAll('.' + cls.DROP_INDICATOR_CLASS)), cls.INDICATOR_HOVER_CLASS);\n isDropped = false;\n }\n }\n }\n return isDropped;\n };\n TreeViewRenderer.prototype.getButton = function (fieldName) {\n var wrapperElement = document.getElementById(this.parent.element.id + '_Wrapper');\n var pivotButtons = [].slice.call(wrapperElement.querySelectorAll('.' + cls.PIVOT_BUTTON_CLASS));\n var buttonElement;\n for (var i = 0, n = pivotButtons.length; i < n; i++) {\n if (pivotButtons[i].id === fieldName) {\n buttonElement = pivotButtons[i];\n break;\n }\n }\n return buttonElement;\n };\n TreeViewRenderer.prototype.nodeStateChange = function (args) {\n var _this = this;\n var node = closest(args.node, '.' + cls.TEXT_CONTENT_CLASS);\n if (!isNullOrUndefined(node)) {\n var li_1 = closest(node, 'li');\n var id_1 = li_1.getAttribute('data-uid');\n if (this.parent.pivotCommon.filterDialog.dialogPopUp) {\n this.parent.pivotCommon.filterDialog.dialogPopUp.close();\n }\n /* eslint-disable */\n var list = this.parent.pivotFieldList;\n var selectedNode_1 = list[id_1];\n /* eslint-enable */\n var fieldInfo_1 = PivotUtil.getFieldInfo(id_1, this.parent);\n var control = this.parent.isPopupView ? this.parent.pivotGridModule : this.parent;\n if (args.action === 'check') {\n var eventdrop = {\n fieldName: id_1, dropField: fieldInfo_1.fieldItem,\n dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings),\n dropAxis: (selectedNode_1.type === 'number' || (selectedNode_1.type === 'CalculatedField' &&\n selectedNode_1.formula && selectedNode_1.formula.indexOf('Measure') > -1 &&\n this.parent.dataType === 'olap')) ? 'values' : 'rows',\n dropPosition: fieldInfo_1.position, draggedAxis: 'fieldlist', cancel: false\n };\n control.trigger(events.fieldDrop, eventdrop, function (observedArgs) {\n if (!observedArgs.cancel) {\n addClass([node.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.LIST_SELECT_CLASS);\n _this.updateSelectedNodes(li_1, args.action);\n var addNode = _this.parent.pivotCommon.dataSourceUpdate.getNewField(id_1, fieldInfo_1.fieldItem);\n _this.updateReportSettings(addNode, observedArgs);\n _this.updateNodeStateChange(id_1, args, selectedNode_1);\n }\n else {\n _this.updateCheckState(selectedNode_1);\n }\n });\n }\n else {\n var removeFieldArgs = {\n cancel: false, fieldName: id_1,\n dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings),\n fieldItem: fieldInfo_1.fieldItem, axis: fieldInfo_1.axis\n };\n control.trigger(events.fieldRemove, removeFieldArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n removeClass([node.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.LIST_SELECT_CLASS);\n _this.updateSelectedNodes(li_1, args.action);\n _this.parent.pivotCommon.dataSourceUpdate.removeFieldFromReport(id_1);\n if (_this.parent.dataType === 'olap' && _this.parent.dataSourceSettings.values.length === 0) {\n _this.parent.pivotCommon.dataSourceUpdate.removeFieldFromReport('[Measures]');\n }\n _this.updateNodeStateChange(id_1, args, selectedNode_1);\n }\n else {\n _this.updateCheckState(selectedNode_1);\n }\n });\n }\n }\n };\n TreeViewRenderer.prototype.updateReportSettings = function (newField, dropArgs) {\n var dropPosition = dropArgs.dropPosition;\n var dropClass = dropArgs.dropAxis;\n switch (dropClass) {\n case 'filters':\n dropPosition !== -1 ? /* eslint-disable-line */\n this.parent.dataSourceSettings.filters.splice(dropPosition, 0, newField) :\n this.parent.dataSourceSettings.filters.push(newField);\n break;\n case 'rows':\n dropPosition !== -1 ? /* eslint-disable-line */\n this.parent.dataSourceSettings.rows.splice(dropPosition, 0, newField) :\n this.parent.dataSourceSettings.rows.push(newField);\n break;\n case 'columns':\n dropPosition !== -1 ? /* eslint-disable-line */\n this.parent.dataSourceSettings.columns.splice(dropPosition, 0, newField) :\n this.parent.dataSourceSettings.columns.push(newField);\n break;\n case 'values':\n dropPosition !== -1 ? /* eslint-disable-line */\n this.parent.dataSourceSettings.values.splice(dropPosition, 0, newField) :\n this.parent.dataSourceSettings.values.push(newField);\n if (this.parent.dataType === 'olap' && this.parent.olapEngineModule &&\n !(this.parent.olapEngineModule).isMeasureAvail) {\n var measureField = {\n name: '[Measures]', caption: 'Measures', baseField: undefined, baseItem: undefined\n };\n var fieldAxis = this.parent.dataSourceSettings.valueAxis === 'row' ?\n this.parent.dataSourceSettings.rows : this.parent.dataSourceSettings.columns;\n fieldAxis.push(measureField);\n }\n break;\n }\n };\n TreeViewRenderer.prototype.updateCheckState = function (selectedNode) {\n var chkState = this.fieldTable.element.querySelectorAll('.e-checkbox-wrapper');\n var innerText = this.fieldTable.element.querySelectorAll('.e-list-text');\n var checkClass = this.fieldTable.element.querySelectorAll('.e-frame');\n for (var i = 0; i < chkState.length; i++) {\n if (selectedNode.caption === innerText[i].textContent) {\n if (chkState[i].getAttribute('aria-checked') === 'false') {\n chkState[i].setAttribute('aria-checked', 'false');\n checkClass[i].classList.add(cls.NODE_CHECK_CLASS);\n }\n else {\n chkState[i].setAttribute('aria-checked', 'true');\n checkClass[i].classList.remove(cls.NODE_CHECK_CLASS);\n }\n }\n }\n };\n TreeViewRenderer.prototype.updateNodeStateChange = function (id, args, selectedNode) {\n if (!this.parent.allowDeferLayoutUpdate) {\n this.parent.updateDataSource(true);\n }\n else {\n selectedNode.isSelected = args.action === 'check';\n if (this.parent.dataType === 'olap') {\n this.parent.olapEngineModule.updateFieldlistData(id, args.action === 'check');\n }\n this.updateDataSource();\n }\n var parent = this.parent;\n setTimeout(function () {\n parent.axisFieldModule.render();\n });\n };\n TreeViewRenderer.prototype.updateSelectedNodes = function (li, state) {\n if (li && li.querySelector('ul')) {\n for (var _i = 0, _a = [].slice.call(li.querySelectorAll('li')); _i < _a.length; _i++) {\n var element = _a[_i];\n if (state === 'check') {\n addClass([element.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.LIST_SELECT_CLASS);\n }\n else {\n removeClass([element.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.LIST_SELECT_CLASS);\n }\n }\n }\n };\n TreeViewRenderer.prototype.updateDataSource = function () {\n if (this.parent.isPopupView) {\n if (this.parent.dataType === 'olap') {\n this.parent.pivotGridModule.olapEngineModule = this.parent.olapEngineModule;\n }\n else {\n this.parent.pivotGridModule.engineModule = this.parent.engineModule;\n }\n this.parent.pivotGridModule.setProperties({ dataSourceSettings: this.parent.dataSourceSettings.properties }, true); /* eslint-disable-line */\n this.parent.pivotGridModule.notify(events.uiUpdate, this);\n }\n else {\n this.parent.triggerPopulateEvent();\n }\n };\n TreeViewRenderer.prototype.addNode = function (args) {\n var _this = this;\n /* eslint-disable */\n var fieldList = this.parent.pivotFieldList;\n var selectedNode = fieldList[args.data[0].id.toString()];\n /* eslint-enable */\n var fieldInfo = PivotUtil.getFieldInfo(selectedNode.id.toString(), this.parent);\n var control = this.parent.isPopupView ? this.parent.pivotGridModule : this.parent;\n if (args.action === 'check') {\n var eventdrop = {\n fieldName: fieldInfo.fieldName, dropField: fieldInfo.fieldItem,\n dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings),\n dropAxis: 'rows', draggedAxis: 'fieldlist', cancel: false\n };\n control.trigger(events.fieldDrop, eventdrop, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.selectedNodes.push(selectedNode.id.toString());\n }\n else {\n _this.updateCheckState(selectedNode);\n }\n });\n }\n else {\n var removeFieldArgs = {\n cancel: false, fieldName: fieldInfo.fieldName,\n dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings),\n fieldItem: fieldInfo.fieldItem, axis: fieldInfo.axis\n };\n control.trigger(events.fieldRemove, removeFieldArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n var count = _this.selectedNodes.length;\n while (count--) {\n if (_this.selectedNodes[count] === selectedNode.id.toString()) {\n _this.selectedNodes.splice(count, 1);\n break;\n }\n }\n }\n else {\n _this.updateCheckState(selectedNode);\n }\n });\n }\n };\n TreeViewRenderer.prototype.refreshTreeView = function () {\n if (this.fieldTable) {\n var treeData = this.getUpdatedData(); /* eslint-disable-line */\n this.fieldTable.fields = {\n dataSource: treeData, id: 'id', text: 'caption', isChecked: 'isSelected', parentID: 'pid', iconCss: 'spriteCssClass'\n };\n this.fieldTable.dataBind();\n }\n };\n /* eslint-disable */\n TreeViewRenderer.prototype.getUpdatedData = function () {\n var treeData = this.getTreeData();\n /* eslint-enable */\n var expandedNodes = this.fieldTable.expandedNodes;\n this.updateExpandedNodes(treeData, expandedNodes);\n return this.applySorting(treeData, this.fieldListSort);\n };\n /* eslint-disable */\n TreeViewRenderer.prototype.getTreeData = function (axis) {\n var data = [];\n /* eslint-enable */\n if (this.parent.dataType === 'olap') {\n data = this.getOlapTreeData(axis);\n }\n else {\n var keys = this.parent.pivotFieldList ? Object.keys(this.parent.pivotFieldList) : [];\n var fieldList = {};\n for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {\n var key = keys_2[_i];\n var member = this.parent.pivotFieldList[key];\n fieldList[key] = { id: member.id, caption: member.caption, isSelected: member.isSelected };\n }\n if (this.parent.isAdaptive) {\n var fields = [this.parent.dataSourceSettings.filters, this.parent.dataSourceSettings.columns,\n this.parent.dataSourceSettings.rows,\n this.parent.dataSourceSettings.values];\n var currentFieldSet = fields[axis];\n var len = keys.length;\n while (len--) {\n fieldList[keys[len]].isSelected = false;\n }\n for (var _a = 0, currentFieldSet_1 = currentFieldSet; _a < currentFieldSet_1.length; _a++) {\n var item = currentFieldSet_1[_a];\n fieldList[item.name].isSelected = true;\n }\n }\n /* eslint-disable */\n var list = fieldList;\n for (var _b = 0, keys_3 = keys; _b < keys_3.length; _b++) {\n var member = keys_3[_b];\n var obj = list[member];\n /* eslint-enable */\n data.push(obj);\n }\n }\n return data;\n };\n /* eslint-disable */\n TreeViewRenderer.prototype.getOlapTreeData = function (axis) {\n var data = [];\n /* eslint-enable */\n var fieldListData = this.parent.olapEngineModule.fieldListData ? this.parent.olapEngineModule.fieldListData : [];\n if (this.parent.isAdaptive) {\n var fields = [\n this.parent.dataSourceSettings.filters, this.parent.dataSourceSettings.columns,\n this.parent.dataSourceSettings.rows, this.parent.dataSourceSettings.values\n ];\n var currentFieldSet = fields[axis];\n var i = 0;\n while (i < fieldListData.length) {\n var item = fieldListData[i];\n /* eslint-disable */\n var framedSet = void 0;\n /* eslint-enable */\n if (axis === 3) {\n if (item.id.toLowerCase() !== '[measures]' &&\n (item.id.toLowerCase().indexOf('[measures]') === 0 ||\n (item.spriteCssClass && item.spriteCssClass.indexOf('e-measureCDB') !== -1)) ||\n (item.id.toLowerCase() === '[calculated members].[_0]' ||\n (item.spriteCssClass && item.spriteCssClass.indexOf('e-calc-measure-icon') !== -1))) {\n framedSet = {\n id: item.id, caption: item.caption, hasChildren: item.hasChildren,\n type: item.type, aggregateType: item.aggregateType,\n isSelected: item.isSelected, pid: item.pid, spriteCssClass: item.spriteCssClass\n };\n framedSet.isSelected = false;\n if (framedSet.spriteCssClass && framedSet.spriteCssClass.indexOf('e-measureCDB') !== -1) {\n framedSet.spriteCssClass = framedSet.spriteCssClass.replace('e-folderCDB-icon', 'e-measureGroupCDB-icon');\n framedSet.pid = undefined;\n }\n for (var _i = 0, currentFieldSet_2 = currentFieldSet; _i < currentFieldSet_2.length; _i++) {\n var field = currentFieldSet_2[_i];\n if (framedSet.id === field.name) {\n framedSet.isSelected = true;\n break;\n }\n }\n data.push(framedSet);\n }\n }\n else {\n if (!(item.id.toLowerCase().indexOf('[measures]') === 0) &&\n !(item.spriteCssClass && item.spriteCssClass.indexOf('e-measureCDB') !== -1) &&\n !(item.spriteCssClass && item.spriteCssClass.indexOf('e-calc-measure-icon') !== -1)) {\n framedSet = {\n id: item.id, caption: item.caption, hasChildren: item.hasChildren,\n type: item.type, aggregateType: item.aggregateType,\n isSelected: item.isSelected, pid: item.pid, spriteCssClass: item.spriteCssClass\n };\n framedSet.isSelected = false;\n for (var _a = 0, currentFieldSet_3 = currentFieldSet; _a < currentFieldSet_3.length; _a++) {\n var item_1 = currentFieldSet_3[_a];\n if (framedSet.id === item_1.name) {\n framedSet.isSelected = true;\n break;\n }\n }\n data.push(framedSet);\n }\n }\n i++;\n }\n }\n else {\n data = PivotUtil.getClonedData(this.parent.olapEngineModule.fieldListData); /* eslint-disable-line */\n }\n return data;\n };\n TreeViewRenderer.prototype.updateExpandedNodes = function (data, expandedNodes) {\n if (expandedNodes.length > 0) {\n var i = 0;\n for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {\n var field = data_1[_i];\n if (expandedNodes.indexOf(field.id) > -1) {\n i++;\n field.expanded = true;\n field.spriteCssClass = (field.spriteCssClass &&\n field.spriteCssClass.toString().indexOf('e-folderCDB-icon') > -1 ?\n field.spriteCssClass.toString().replace('e-folderCDB-icon', 'e-folderCDB-open-icon') :\n field.spriteCssClass);\n if (i === (expandedNodes.length)) {\n break;\n }\n }\n }\n }\n };\n TreeViewRenderer.prototype.updateSorting = function (args) {\n var target = args.target;\n var option = target.getAttribute('data-sort');\n if (target.className.indexOf('e-selected') === -1) {\n switch (option) {\n case 'None':\n this.fieldListSort = 'None';\n addClass([target], 'e-selected');\n removeClass([this.parentElement.querySelector('.e-sort-ascend')], 'e-selected');\n removeClass([this.parentElement.querySelector('.e-sort-descend')], 'e-selected');\n break;\n case 'Ascend':\n this.fieldListSort = 'Ascend';\n addClass([target], 'e-selected');\n removeClass([this.parentElement.querySelector('.e-sort-none')], 'e-selected');\n removeClass([this.parentElement.querySelector('.e-sort-descend')], 'e-selected');\n break;\n case 'Descend':\n this.fieldListSort = 'Descend';\n addClass([target], 'e-selected');\n removeClass([this.parentElement.querySelector('.e-sort-ascend')], 'e-selected');\n removeClass([this.parentElement.querySelector('.e-sort-none')], 'e-selected');\n break;\n }\n this.refreshTreeView();\n }\n };\n /* eslint-disable */\n TreeViewRenderer.prototype.applySorting = function (treeData, sortOrder) {\n if (this.parent.dataType === 'olap') {\n var measure = void 0;\n var calcMember = void 0;\n /* eslint-enable */\n if (this.parent.dataSourceSettings.calculatedFieldSettings.length > 0 &&\n treeData[0].id.toLowerCase() === '[calculated members].[_0]') {\n calcMember = treeData[0];\n measure = treeData[1];\n treeData.splice(0, 2);\n }\n else {\n measure = treeData[0];\n treeData.splice(0, 1);\n }\n /* eslint-disable */\n treeData = sortOrder === 'Ascend' ?\n (treeData.sort(function (a, b) { return (a.caption > b.caption) ? 1 : ((b.caption > a.caption) ? -1 : 0); })) :\n sortOrder === 'Descend' ?\n (treeData.sort(function (a, b) { return (a.caption < b.caption) ? 1 : ((b.caption < a.caption) ? -1 : 0); })) :\n treeData;\n /* eslint-enable */\n if (calcMember) {\n treeData.splice(0, 0, calcMember, measure);\n }\n else {\n treeData.splice(0, 0, measure);\n }\n }\n else {\n this.fieldTable.sortOrder = ((sortOrder === 'Ascend' ? 'Ascending' : (sortOrder === 'Descend' ? 'Descending' : 'None')));\n }\n return treeData;\n };\n TreeViewRenderer.prototype.onFieldAdd = function (e) {\n this.parent.dialogRenderer.updateDataSource(this.selectedNodes);\n this.closeTreeDialog();\n };\n TreeViewRenderer.prototype.closeTreeDialog = function () {\n this.selectedNodes = [];\n this.fieldDialog.hide();\n };\n TreeViewRenderer.prototype.keyPress = function (e) {\n if (e.keyCode === 13 && e.target) {\n e.target.click();\n e.preventDefault();\n return;\n }\n };\n TreeViewRenderer.prototype.wireFieldListEvent = function (element) {\n EventHandler.add(element, 'keydown', this.keyPress, this);\n EventHandler.add(element, 'click', this.updateSorting, this);\n };\n TreeViewRenderer.prototype.unWireFieldListEvent = function (element) {\n EventHandler.remove(element, 'keydown', this.keyPress);\n EventHandler.remove(element, 'click', this.updateSorting);\n };\n /* eslint-disable-next-line */\n /**\n * @hidden\n */\n TreeViewRenderer.prototype.addEventListener = function () {\n this.parent.on(events.treeViewUpdate, this.refreshTreeView, this);\n };\n /* eslint-disable-next-line */\n /**\n * @hidden\n */\n TreeViewRenderer.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.treeViewUpdate, this.refreshTreeView);\n };\n /**\n * To destroy the tree view event listener\n * @returns {void}\n * @hidden\n */\n TreeViewRenderer.prototype.destroy = function () {\n this.removeEventListener();\n if (this.fieldTable && !this.fieldTable.isDestroyed) {\n this.fieldTable.destroy();\n this.fieldTable = null;\n }\n if (this.fieldDialog && !this.fieldDialog.isDestroyed) {\n this.fieldDialog.destroy();\n this.fieldDialog = null;\n }\n if (this.editorSearch && !this.editorSearch.isDestroyed) {\n this.editorSearch.destroy();\n this.editorSearch = null;\n }\n };\n return TreeViewRenderer;\n}());\nexport { TreeViewRenderer };\n","import { createElement, EventHandler, removeClass, addClass, Droppable } from '@syncfusion/ej2-base';\nimport * as cls from '../../common/base/css-constant';\n/**\n * Module to render Axis Field Table\n */\n/** @hidden */\nvar AxisTableRenderer = /** @class */ (function () {\n /* eslint-disable-next-line */\n /** Constructor for render module */\n function AxisTableRenderer(parent) {\n this.parent = parent;\n }\n /**\n * Initialize the axis table rendering\n * @returns {void}\n * @private\n */\n AxisTableRenderer.prototype.render = function () {\n if (!this.parent.isAdaptive) {\n var axisTable = createElement('div', {\n className: cls.AXIS_TABLE_CLASS + ' ' + (this.parent.dataType === 'olap' ? cls.OLAP_AXIS_TABLE_CLASS : '')\n });\n this.leftAxisPanel = createElement('div', { className: cls.LEFT_AXIS_PANEL_CLASS });\n this.rightAxisPanel = createElement('div', { className: cls.RIGHT_AXIS_PANEL_CLASS });\n this.parent.dialogRenderer.parentElement.appendChild(axisTable);\n axisTable.appendChild(this.leftAxisPanel);\n axisTable.appendChild(this.rightAxisPanel);\n this.axisTable = axisTable;\n this.renderAxisTable();\n }\n this.parent.axisFieldModule.render();\n };\n AxisTableRenderer.prototype.renderAxisTable = function () {\n var fieldLabels = ['filters', 'rows', 'columns', 'values'];\n for (var len = 0, lnt = fieldLabels.length; len < lnt; len++) {\n var axis = createElement('div', {\n className: cls.FIELD_LIST_CLASS + '-' + fieldLabels[len]\n });\n var axisTitleWrapper = createElement('div', {\n className: cls.AXIS_ICON_CLASS + '-wrapper'\n });\n var axisTitle = createElement('div', {\n className: cls.AXIS_HEADER_CLASS,\n attrs: { title: this.parent.localeObj.getConstant(fieldLabels[len]) },\n innerHTML: this.parent.localeObj.getConstant(fieldLabels[len])\n });\n axisTitleWrapper.appendChild(this.getIconupdate(fieldLabels[len]));\n axisTitleWrapper.appendChild(axisTitle);\n var axisContent = createElement('div', { className: cls.AXIS_CONTENT_CLASS + ' ' + 'e-' + fieldLabels[len] });\n var localePrompt = void 0;\n if (fieldLabels[len] === 'rows') {\n localePrompt = this.parent.localeObj.getConstant('dropRowPrompt');\n }\n else if (fieldLabels[len] === 'columns') {\n localePrompt = this.parent.localeObj.getConstant('dropColPrompt');\n }\n else if (fieldLabels[len] === 'values') {\n localePrompt = this.parent.localeObj.getConstant('dropValPrompt');\n }\n else {\n localePrompt = this.parent.localeObj.getConstant('dropFilterPrompt');\n }\n var axisPrompt = createElement('span', {\n className: cls.AXIS_PROMPT_CLASS,\n innerHTML: localePrompt\n });\n var droppable = new Droppable(axisContent, {}); /* eslint-disable-line */\n axis.appendChild(axisTitleWrapper);\n axis.appendChild(axisContent);\n axis.appendChild(axisPrompt);\n if (len <= 1) {\n this.leftAxisPanel.appendChild(axis);\n }\n else {\n this.rightAxisPanel.appendChild(axis);\n }\n this.unWireEvent(axisContent);\n this.wireEvent(axisContent);\n }\n };\n AxisTableRenderer.prototype.getIconupdate = function (axis) {\n var axisWrapper = createElement('span', {\n attrs: { 'tabindex': '-1', 'aria-disabled': 'false' },\n className: cls.AXIS_ICON_CLASS + '-icon-wrapper'\n });\n var axisElement = createElement('span', {\n attrs: {\n 'tabindex': '-1', 'aria-disabled': 'false'\n },\n className: cls.ICON + ' ' + cls.AXIS_ICON_CLASS + '-' + axis\n });\n axisWrapper.appendChild(axisElement);\n return axisWrapper;\n };\n AxisTableRenderer.prototype.wireEvent = function (element) {\n EventHandler.add(element, 'mouseover', this.updateDropIndicator, this);\n EventHandler.add(element, 'mouseleave', this.updateDropIndicator, this);\n };\n AxisTableRenderer.prototype.unWireEvent = function (element) {\n EventHandler.remove(element, 'mouseover', this.updateDropIndicator);\n EventHandler.remove(element, 'mouseleave', this.updateDropIndicator);\n };\n AxisTableRenderer.prototype.updateDropIndicator = function (e) {\n var parentElement = this.parent.dialogRenderer.parentElement;\n if (this.parent.isDragging && e.target.classList.contains(cls.AXIS_CONTENT_CLASS) && e.type === 'mouseover') {\n removeClass([].slice.call(parentElement.querySelectorAll('.' + cls.DROP_INDICATOR_CLASS)), cls.INDICATOR_HOVER_CLASS);\n removeClass([].slice.call(parentElement.querySelectorAll('.' + cls.DROP_INDICATOR_CLASS + '-last')), cls.INDICATOR_HOVER_CLASS);\n var element = [].slice.call(e.target.querySelectorAll('.' + cls.PIVOT_BUTTON_WRAPPER_CLASS));\n if (element.length > 0) {\n addClass([element[element.length - 1].querySelector('.' + cls.DROP_INDICATOR_CLASS + '-last')], cls.INDICATOR_HOVER_CLASS);\n }\n }\n else if (e.type === 'mouseleave') {\n removeClass([].slice.call(parentElement.querySelectorAll('.' + cls.DROP_INDICATOR_CLASS)), cls.INDICATOR_HOVER_CLASS);\n removeClass([].slice.call(parentElement.querySelectorAll('.' + cls.DROP_INDICATOR_CLASS + '-last')), cls.INDICATOR_HOVER_CLASS);\n }\n };\n return AxisTableRenderer;\n}());\nexport { AxisTableRenderer };\n","import { createElement, Draggable, remove, extend, detach, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { EventHandler, isBlazor, select } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined as isNOU, addClass, removeClass, closest, Browser } from '@syncfusion/ej2-base';\nimport { PivotFieldList } from '../../pivotfieldlist/base/field-list';\nimport * as cls from '../../common/base/css-constant';\nimport * as events from '../../common/base/constant';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nimport { AggregateMenu } from '../popups/aggregate-menu';\nimport { AxisFieldRenderer } from '../../pivotfieldlist/renderer/axis-field-renderer';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { PivotUtil } from '../../base/util';\n/**\n * Module to render Pivot button\n */\n/** @hidden */\nvar PivotButton = /** @class */ (function () {\n /**\n * Constructor for render module.\n * @param {PivotView | PivotFieldList} parent - Component instance.\n */\n function PivotButton(parent) {\n this.parent = parent;\n this.menuOption = new AggregateMenu(this.parent);\n this.parent.pivotButtonModule = this;\n this.addEventListener();\n if (this.parent instanceof PivotFieldList) {\n this.axisField = new AxisFieldRenderer(this.parent);\n }\n this.isDestroyed = false;\n }\n /* eslint-disable */\n PivotButton.prototype.renderPivotButton = function (args) {\n var _this = this;\n var _a;\n var field = extend([], args.field, null, true);\n var axis = args.axis;\n var axisElement;\n var valuePos = -1;\n var showValuesButton = (this.parent.dataType === 'pivot' ? (this.parent.getModuleName() === 'pivotfieldlist' &&\n this.parent.pivotGridModule) ?\n this.parent.pivotGridModule.showValuesButton : this.parent.showValuesButton : false);\n if (((this.parent.dataSourceSettings.valueAxis === 'row' && args.axis === 'rows') ||\n (this.parent.dataSourceSettings.valueAxis === 'column' && args.axis === 'columns')) && showValuesButton && this.parent.dataSourceSettings.values.length > 1) {\n valuePos = field.length;\n if (isNullOrUndefined(PivotUtil.getFieldByName(this.parent.localeObj.getConstant('values'), field))) {\n field.push({\n name: this.parent.localeObj.getConstant('values'), caption: this.parent.localeObj.getConstant('values'),\n axis: args.axis, showRemoveIcon: true, allowDragAndDrop: true\n });\n }\n }\n this.parentElement = this.parent.getModuleName() === 'pivotview' ? this.parent.element :\n document.getElementById(this.parent.element.id + '_Wrapper');\n if (this.parent.getModuleName() === 'pivotfieldlist') {\n this.parentElement = document.getElementById(this.parent.element.id + '_Wrapper');\n if (this.parentElement.querySelector('.' + cls.FIELD_LIST_CLASS + '-' + axis)) {\n var axisPrompt = this.parentElement.querySelector('.' + cls.FIELD_LIST_CLASS + '-' + axis)\n .querySelector('.' + cls.AXIS_PROMPT_CLASS);\n if (field.length === 0) {\n removeClass([axisPrompt], cls.ICON_DISABLE);\n }\n else {\n addClass([axisPrompt], cls.ICON_DISABLE);\n }\n axisElement =\n this.parentElement.querySelector('.' + cls.FIELD_LIST_CLASS + '-' + axis).querySelector('.' + cls.AXIS_CONTENT_CLASS);\n }\n else {\n return;\n }\n }\n else {\n this.parentElement = this.parent.element;\n axisElement = this.parentElement.querySelector('.e-group-' + axis);\n }\n if (axisElement) {\n if (this.parent.getModuleName() === 'pivotview' && field.length === 0) {\n for (var _i = 0, _b = this.parentElement.querySelectorAll('.e-group-' + axis); _i < _b.length; _i++) {\n var element = _b[_i];\n if (!element.classList.contains(cls.GROUP_CHART_VALUE) && !element.classList.contains(cls.GROUP_CHART_COLUMN)) {\n var axisPrompt = createElement('span', {\n className: cls.AXIS_PROMPT_CLASS,\n innerHTML: (this.parent.groupingBarSettings.allowDragAndDrop ? axis === 'rows' ? this.parent.localeObj.getConstant('rowAxisPrompt') :\n axis === 'columns' ? this.parent.localeObj.getConstant('columnAxisPrompt') :\n axis === 'values' ? this.parent.localeObj.getConstant('valueAxisPrompt') :\n this.parent.localeObj.getConstant('filterAxisPrompt') : '')\n });\n element.appendChild(axisPrompt);\n }\n }\n }\n else {\n for (var i = 0, cnt = field.length; i < cnt; i++) {\n for (var _c = 0, _d = (this.parent.getModuleName() === 'pivotfieldlist' ? [axisElement] : this.parentElement.querySelectorAll('.e-group-' + axis)); _c < _d.length; _c++) {\n var element = _d[_c];\n element = element;\n var isMeasureAvail = (this.parent.dataType === 'olap' && (field[i].name.toLowerCase() === '[measures]' || axis === 'values'));\n var isMeasureFieldsAvail = (this.parent.dataType === 'olap' && axis === 'values');\n if (!element.classList.contains(cls.GROUP_CHART_VALUE) && !element.classList.contains(cls.GROUP_CHART_COLUMN)) {\n var buttonWrapper = createElement('div', {\n className: cls.PIVOT_BUTTON_WRAPPER_CLASS + (i === 0 ? ' e-first-btn' : ''),\n attrs: { 'data-tag': axis + ':' + field[i].name }\n });\n var buttonElement = createElement('div', {\n id: field[i].name, className: cls.PIVOT_BUTTON_CLASS + ' ' + field[i].name.replace(/[^A-Z0-9]/ig, ''),\n attrs: {\n 'data-uid': field[i].name,\n 'tabindex': (this.parent.getModuleName() === 'pivotview' && this.parent.grid && axis === 'rows' && !element.classList.contains(cls.GROUP_CHART_ROW)) ? '-1' : '0',\n 'isvalue': (i === valuePos || isMeasureAvail && !isMeasureFieldsAvail) ? 'true' : 'false',\n 'aria-disabled': 'false', 'aria-label': field[i].caption ? field[i].caption : field[i].name,\n 'data-type': (this.parent.dataType === 'olap' ? isMeasureFieldsAvail ? 'isMeasureFieldsAvail' : isMeasureAvail ? 'isMeasureAvail' : field[i].type : field[i].type),\n 'data-caption': field[i].caption ? field[i].caption : field[i].name,\n 'data-basefield': field[i].baseField,\n 'data-baseitem': field[i].baseItem\n }\n });\n var dropIndicatorElement = createElement('span', {\n attrs: { 'tabindex': '-1', 'aria-disabled': 'false' },\n className: cls.DROP_INDICATOR_CLASS\n });\n var dropLastIndicatorElement = createElement('span', {\n attrs: { 'tabindex': '-1', 'aria-disabled': 'false' },\n className: cls.DROP_INDICATOR_CLASS + '-last'\n });\n var dragWrapper = this.createButtonDragIcon(field[i], buttonElement);\n var contentElement = this.createButtonText(field, i, axis, valuePos);\n buttonElement.appendChild(contentElement);\n if (!isMeasureAvail && !field[i].isNamedSet && !field[i].isCalculatedField) {\n if (['filters', 'values'].indexOf(axis) === -1 && valuePos !== i &&\n !(this.parent.dataType === 'olap' && ((this.parent.getModuleName() === 'pivotview' &&\n this.parent.enableVirtualization) || (this.parent.getModuleName() === 'pivotfieldlist' &&\n this.parent.pivotGridModule !== undefined &&\n this.parent.pivotGridModule.enableVirtualization)))) {\n this.createSortOption(buttonElement, field[i].name, field[i]);\n }\n if (axis !== 'values' && valuePos !== i) {\n this.createFilterOption(buttonElement, field[i].name, axis, field[i]);\n }\n if (axis === 'values') {\n this.getTypeStatus(field, i, buttonElement);\n }\n }\n if ((field[i].isCalculatedField || field[i].type === 'CalculatedField')) {\n var calcElement = createElement('span', {\n attrs: { 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('editCalculatedField') },\n className: cls.ICON + ' ' + cls.CALC_EDIT\n });\n if (this.parent.allowCalculatedField && this.parent.calculatedFieldModule && field[i].showEditIcon) {\n removeClass([calcElement], cls.ICON_DISABLE);\n }\n else {\n addClass([calcElement], cls.ICON_DISABLE);\n }\n buttonElement.appendChild(calcElement);\n }\n var removeElement = createElement('span', {\n attrs: { 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('remove') },\n className: cls.ICON + ' ' + cls.REMOVE_CLASS\n });\n if (this.parent.getModuleName() === 'pivotview') {\n if ((this.parent.groupingBarSettings.showRemoveIcon && field[i].showRemoveIcon)) {\n removeClass([removeElement], cls.ICON_DISABLE);\n }\n else {\n addClass([removeElement], cls.ICON_DISABLE);\n }\n }\n else {\n if (field[i].showRemoveIcon) {\n removeClass([removeElement], cls.ICON_DISABLE);\n }\n else {\n addClass([removeElement], cls.ICON_DISABLE);\n }\n }\n buttonElement.appendChild(removeElement);\n buttonWrapper.appendChild(dropIndicatorElement);\n buttonWrapper.appendChild(buttonElement);\n buttonWrapper.appendChild(dropLastIndicatorElement);\n element.appendChild(buttonWrapper);\n var pivotButton = new Button({ enableRtl: this.parent.enableRtl, locale: this.parent.locale });\n pivotButton.isStringTemplate = true;\n pivotButton.appendTo(buttonElement);\n this.unWireEvent(buttonWrapper, i === valuePos ? 'values' : axis, isMeasureAvail);\n this.wireEvent(buttonWrapper, i === valuePos ? 'values' : axis, isMeasureAvail);\n if ((this.parent.getModuleName() === 'pivotview' && !this.parent.isAdaptive) ||\n this.parent.getModuleName() === 'pivotfieldlist') {\n this.createDraggable(field[i], this.parent.getModuleName() === 'pivotview' ? contentElement : dragWrapper);\n buttonElement.querySelector('.' + cls.BUTTON_DRAGGABLE).ej2_instances[0].enableAutoScroll = false;\n }\n }\n }\n }\n if (axis === 'values') {\n var _loop_1 = function (element) {\n if (element.classList.contains(cls.GROUP_CHART_VALUE) && this_1.parent.chartModule) {\n var valueData = field.map(function (item) { return { text: item.caption ? item.caption : item.name, value: item.name }; });\n var parent_1 = this_1.parent;\n if (this_1.valueFiedDropDownList && element.querySelector('.' + cls.GROUP_CHART_VALUE_DROPDOWN_DIV)) {\n this_1.valueFiedDropDownList.dataSource = valueData;\n this_1.valueFiedDropDownList.value = !parent_1.chartSettings.enableMultipleAxis ?\n parent_1.chartModule.currentMeasure : valueData[0].value;\n }\n else {\n var ddlDiv = createElement('div', { className: cls.GROUP_CHART_VALUE_DROPDOWN_DIV });\n element.appendChild(ddlDiv);\n this_1.valueFiedDropDownList = new DropDownList({\n dataSource: valueData,\n enableRtl: this_1.parent.enableRtl,\n locale: this_1.parent.locale,\n value: !parent_1.chartSettings.enableMultipleAxis ?\n parent_1.chartModule.currentMeasure : valueData[0].value,\n width: 200,\n fields: { value: 'value', text: 'text' },\n cssClass: cls.GROUP_CHART_VALUE_DROPDOWN,\n change: function (args) {\n if (args.e && args.e !== null) {\n parent_1.chartSettings.value = args.value;\n }\n }\n });\n this_1.valueFiedDropDownList.isStringTemplate = true;\n this_1.valueFiedDropDownList.appendTo(ddlDiv);\n }\n }\n };\n var this_1 = this;\n for (var _e = 0, _f = this.parentElement.querySelectorAll('.e-group-' + axis); _e < _f.length; _e++) {\n var element = _f[_e];\n _loop_1(element);\n }\n }\n else if (axis === 'columns') {\n var availColindex = undefined;\n for (var _g = 0, _h = this.parentElement.querySelectorAll('.e-group-' + axis); _g < _h.length; _g++) {\n var element = _h[_g];\n if (element.classList.contains(cls.GROUP_CHART_COLUMN) && this.parent.chartModule) {\n var currentMeasure = this.parent.chartModule.currentMeasure;\n var delimiter = this.parent.chartSettings.columnDelimiter ? this.parent.chartSettings.columnDelimiter : '-';\n var columnHeader = (this.parent.chartSettings.columnHeader && this.parent.chartSettings.columnHeader !== '') ?\n this.parent.chartSettings.columnHeader.split(delimiter).join(' - ') : '';\n var engineModule = this.parent.dataType === 'olap' ? this.parent.olapEngineModule : this.parent.engineModule;\n var pivotValues = engineModule.pivotValues;\n var totColIndex = this.parent.chartModule.getColumnTotalIndex(pivotValues);\n var rKeys = Object.keys(pivotValues);\n var columnData = [];\n var firstValueRow = false;\n for (var _j = 0, rKeys_1 = rKeys; _j < rKeys_1.length; _j++) {\n var rKey = rKeys_1[_j];\n if (firstValueRow) {\n break;\n }\n var rowIndex = Number(rKey);\n if (pivotValues[rowIndex][0] && pivotValues[rowIndex][0].axis === 'row' &&\n (this.parent.dataSourceSettings.rows.length === 0 ? true : pivotValues[rowIndex][0].type !== 'grand sum')) {\n var firstRowCell = pivotValues[rowIndex][0];\n var tupInfo = this.parent.dataType === 'olap' ?\n engineModule.tupRowInfo[firstRowCell.ordinal] : undefined;\n var rows = pivotValues[rowIndex];\n var cKeys = Object.keys(rows);\n for (var _k = 0, cKeys_1 = cKeys; _k < cKeys_1.length; _k++) {\n var cKey = cKeys_1[_k];\n var cellIndex = Number(cKey);\n var cell = pivotValues[rowIndex][cellIndex];\n var actualText = (this.parent.dataType === 'olap' && tupInfo && tupInfo.measureName) ?\n tupInfo.measureName : cell.actualText;\n if (!totColIndex[cell.colIndex] && cell.axis === 'value' && firstRowCell.type !== 'header' &&\n actualText !== '' && actualText === currentMeasure) {\n firstValueRow = true;\n var columnSeries = this.parent.dataType === 'olap' ? cell.columnHeaders.toString().split(/~~|::/).join(' - ')\n : cell.columnHeaders.toString().split(this.parent.dataSourceSettings.valueSortSettings.headerDelimiter).join(' - ');\n columnData.push({ value: columnSeries, text: columnSeries, title: (_a = {}, _a['title'] = columnSeries, _a) });\n if (columnSeries === columnHeader) {\n availColindex = columnData.length;\n }\n }\n }\n }\n }\n if (this.columnFieldDropDownList && element.querySelector('.' + cls.GROUP_CHART_COLUMN_DROPDOWN_DIV)) {\n this.columnFieldDropDownList.dataSource = columnData;\n if (availColindex !== undefined) {\n this.columnFieldDropDownList.value = columnData[availColindex - 1].value;\n }\n else {\n this.columnFieldDropDownList.value = columnData[0].value;\n }\n }\n else {\n var ddlDiv = createElement('div', { className: cls.GROUP_CHART_COLUMN_DROPDOWN_DIV });\n element.appendChild(ddlDiv);\n this.columnFieldDropDownList = new DropDownList({\n dataSource: columnData,\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n value: availColindex ? columnData[availColindex - 1].value : (columnData[0] ? columnData[0].value : ''),\n width: '200',\n fields: { value: 'value', text: 'text', htmlAttributes: 'title' },\n cssClass: cls.GROUP_CHART_COLUMN_DROPDOWN,\n change: function (args) {\n if (args.e && args.e !== null) {\n var delimiter_1 = _this.parent.chartSettings.columnDelimiter ? _this.parent.chartSettings.columnDelimiter : '-';\n _this.parent.chartSettings.columnHeader = args.value.split(' - ').join(delimiter_1);\n }\n }\n });\n this.columnFieldDropDownList.isStringTemplate = true;\n this.columnFieldDropDownList.appendTo(ddlDiv);\n }\n }\n }\n }\n }\n }\n else {\n return;\n }\n };\n PivotButton.prototype.createButtonText = function (field, i, axis, valuePos) {\n var buttonText;\n var aggregation;\n var filterMem;\n if (axis === 'filters') {\n filterMem = this.updateButtontext(field[i].name);\n }\n var engineModule;\n if (this.parent.dataType === 'olap') {\n engineModule = this.parent.olapEngineModule;\n }\n else {\n engineModule = this.parent.engineModule;\n }\n if (engineModule.fieldList[field[i].name] !== undefined) {\n aggregation = engineModule.fieldList[field[i].name].aggregateType;\n if ((aggregation !== 'DistinctCount') && (engineModule.fieldList[field[i].name].type !== 'number' || engineModule.fieldList[field[i].name].type === 'include' ||\n engineModule.fieldList[field[i].name].type === 'exclude')) {\n aggregation = 'Count';\n }\n else {\n aggregation = aggregation === undefined ? 'Sum' :\n engineModule.fieldList[field[i].name].aggregateType;\n }\n }\n var text = field[i].caption ? field[i].caption : field[i].name;\n buttonText = createElement('span', {\n attrs: {\n title: axis === 'filters' ? (this.parent.dataType === 'olap' && engineModule.fieldList[field[i].name].type === 'CalculatedField') ?\n text : (text + ' (' + filterMem + ')') : (this.parent.dataType === 'olap' ?\n text : (((!this.parent.dataSourceSettings.showAggregationOnValueField || axis !== 'values' || aggregation === 'CalculatedField') ?\n text : this.parent.localeObj.getConstant(aggregation) + ' ' + this.parent.localeObj.getConstant('of') + ' ' + text))),\n 'tabindex': '-1', 'aria-disabled': 'false', 'oncontextmenu': 'return false;',\n 'data-type': valuePos === i ? '' : aggregation\n },\n className: cls.PIVOT_BUTTON_CONTENT_CLASS + ' ' +\n (this.parent.getModuleName() === 'pivotview' ?\n this.parent.groupingBarSettings.allowDragAndDrop && field[i].allowDragAndDrop ? '' : cls.DRAG_DISABLE_CLASS : ''),\n innerHTML: axis === 'filters' ? (this.parent.dataType === 'olap' && engineModule.fieldList[field[i].name].type === 'CalculatedField') ?\n text : (text + ' (' + filterMem + ')') : (this.parent.dataType === 'olap' ?\n text : (!this.parent.dataSourceSettings.showAggregationOnValueField || axis !== 'values' || aggregation === 'CalculatedField' ?\n text : this.parent.localeObj.getConstant(aggregation) + ' ' + this.parent.localeObj.getConstant('of') + ' ' + text))\n });\n return buttonText;\n };\n /* eslint-enable */\n PivotButton.prototype.getTypeStatus = function (field, i, buttonElement) {\n var engineModule;\n if (this.parent.dataType === 'olap') {\n engineModule = this.parent.olapEngineModule;\n }\n else {\n engineModule = this.parent.engineModule;\n }\n var fieldListItem = engineModule.fieldList[field[i].name];\n if (fieldListItem.aggregateType !== 'CalculatedField' && this.validateDropdown(fieldListItem.type)) {\n this.createSummaryType(buttonElement, field[i].name, field[i]);\n }\n };\n PivotButton.prototype.validateDropdown = function (type) {\n var aggregateType = this.parent.aggregateTypes;\n if (type !== 'number') {\n return (aggregateType.indexOf('Count') > -1 || aggregateType.indexOf('DistinctCount') > -1);\n }\n else {\n for (var i = 0; i < aggregateType.length; i++) {\n if (this.parent.getAllSummaryType().indexOf(aggregateType[i]) > -1) {\n return true;\n }\n }\n return false;\n }\n };\n PivotButton.prototype.createSummaryType = function (pivotButton, fieldName, field) {\n var spanElement = createElement('span', {\n attrs: { 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('format') },\n className: cls.ICON + ' ' + cls.AXISFIELD_ICON_CLASS\n });\n if (this.parent.getModuleName() === 'pivotview') {\n if (this.parent.groupingBarSettings.showValueTypeIcon && field.showValueTypeIcon) {\n removeClass([spanElement], cls.ICON_DISABLE);\n }\n else {\n addClass([spanElement], cls.ICON_DISABLE);\n }\n }\n else {\n if (field.showValueTypeIcon) {\n removeClass([spanElement], cls.ICON_DISABLE);\n }\n else {\n addClass([spanElement], cls.ICON_DISABLE);\n }\n }\n pivotButton.appendChild(spanElement);\n return spanElement;\n };\n PivotButton.prototype.createMenuOption = function (args) {\n this.menuOption.render(args, this.parentElement);\n this.parent.pivotButtonModule = this;\n };\n PivotButton.prototype.openCalculatedFieldDialog = function (args) {\n var fieldName = args.target.parentElement.id;\n if (this.parent.getModuleName() === 'pivotview') {\n if (this.parent.isAdaptive && (this.parent.showFieldList &&\n this.parent.pivotFieldListModule &&\n !this.parent.pivotFieldListModule.isDestroyed)) {\n this.parent.pivotFieldListModule.element\n .querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS).click();\n this.parent.pivotFieldListModule.dialogRenderer.adaptiveElement.select(4);\n /* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n this.parent.pivotFieldListModule.calculatedFieldModule\n .updateAdaptiveCalculatedField(true, fieldName);\n }\n else {\n if (!this.parent.isAdaptive) {\n this.parent.calculatedFieldModule.buttonCall = true;\n }\n this.parent.notify(events.initCalculatedField, { edit: true, fieldName: fieldName });\n }\n }\n else if (this.parent.getModuleName() === 'pivotfieldlist') {\n if (this.parent.isAdaptive) {\n this.parent.dialogRenderer.adaptiveElement.select(4);\n /* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n this.parent.calculatedFieldModule\n .updateAdaptiveCalculatedField(true, fieldName);\n this.parent.calculatedFieldModule.buttonCall = true;\n }\n else {\n if (this.parent.dialogRenderer.fieldListDialog) {\n this.parent.dialogRenderer.fieldListDialog.hide();\n addClass([this.parent.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS)], cls.ICON_HIDDEN);\n }\n this.parent.notify(events.initCalculatedField, { edit: true, fieldName: fieldName });\n if (this.parent.calculatedFieldModule) {\n this.parent.calculatedFieldModule.buttonCall = true;\n }\n }\n }\n };\n PivotButton.prototype.createDraggable = function (field, target) {\n this.draggable = new Draggable(target, {\n clone: true,\n enableTailMode: true,\n enableAutoScroll: true,\n helper: this.createDragClone.bind(this),\n dragStart: this.onDragStart.bind(this),\n drag: this.onDragging.bind(this),\n dragStop: this.onDragStop.bind(this),\n abort: (this.parent.getModuleName() === 'pivotview' ?\n !(this.parent.groupingBarSettings.allowDragAndDrop && field.allowDragAndDrop) ?\n '.' + cls.PIVOT_BUTTON_CLASS : '' : !field.allowDragAndDrop ? '.' + cls.PIVOT_BUTTON_CLASS : '')\n });\n };\n PivotButton.prototype.createButtonDragIcon = function (field, pivotButton) {\n var dragWrapper = createElement('span', {\n attrs: { 'tabindex': '-1', 'aria-disabled': 'false' }\n });\n var dragElement = createElement('span', {\n attrs: {\n 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('drag')\n },\n className: cls.ICON + ' ' + cls.DRAG_CLASS + ' ' + (field.allowDragAndDrop ? '' : cls.DRAG_DISABLE_CLASS)\n });\n dragWrapper.appendChild(dragElement);\n pivotButton.appendChild(dragWrapper);\n return dragWrapper;\n };\n PivotButton.prototype.createSortOption = function (pivotButton, fieldName, field) {\n var sortCLass;\n var spanElement;\n var engineModule;\n if (this.parent.dataType === 'olap') {\n engineModule = this.parent.olapEngineModule;\n }\n else {\n engineModule = this.parent.engineModule;\n }\n if (!this.parent.allowDeferLayoutUpdate) {\n sortCLass = engineModule.fieldList[fieldName].sort === 'Descending' ? cls.SORT_DESCEND_CLASS : '';\n }\n else {\n sortCLass = '';\n for (var i = 0; i < this.parent.dataSourceSettings.sortSettings.length; i++) {\n if (this.parent.dataSourceSettings.sortSettings[i].name === fieldName) {\n sortCLass = this.parent.dataSourceSettings.sortSettings[i].order === 'Descending' ? cls.SORT_DESCEND_CLASS : '';\n }\n }\n }\n if (engineModule.fieldList[fieldName].sort === 'None') {\n spanElement = createElement('span', {\n attrs: { 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('sort') },\n className: cls.ICON\n });\n }\n else {\n spanElement = createElement('span', {\n attrs: { 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('sort') },\n className: cls.ICON + ' ' + cls.SORT_CLASS + ' ' + sortCLass\n });\n }\n if (this.parent.dataSourceSettings.enableSorting) {\n if (this.parent.getModuleName() === 'pivotview') {\n if (field.showSortIcon && this.parent.groupingBarSettings.showSortIcon) {\n removeClass([spanElement], cls.ICON_DISABLE);\n }\n else {\n addClass([spanElement], cls.ICON_DISABLE);\n }\n }\n else {\n if (field.showSortIcon) {\n removeClass([spanElement], cls.ICON_DISABLE);\n }\n else {\n addClass([spanElement], cls.ICON_DISABLE);\n }\n }\n }\n else {\n addClass([spanElement], cls.ICON_DISABLE);\n }\n pivotButton.appendChild(spanElement);\n return spanElement;\n };\n PivotButton.prototype.createFilterOption = function (pivotButton, fieldName, axis, field) {\n var filterCLass;\n var engineModule;\n if (this.parent.dataType === 'olap') {\n engineModule = this.parent.olapEngineModule;\n }\n else {\n engineModule = this.parent.engineModule;\n }\n if (!this.parent.allowDeferLayoutUpdate) {\n engineModule.fieldList[fieldName].filter = engineModule.fieldList[fieldName].filter === null ?\n [] : engineModule.fieldList[fieldName].filter;\n filterCLass = engineModule.fieldList[fieldName].filter.length === 0 ?\n !engineModule.fieldList[fieldName].isExcelFilter ? cls.FILTER_CLASS : cls.FILTERED_CLASS : cls.FILTERED_CLASS;\n }\n else {\n filterCLass = cls.FILTER_CLASS;\n for (var i = 0; i < this.parent.dataSourceSettings.filterSettings.length; i++) {\n if (this.parent.dataSourceSettings.filterSettings[i].name === fieldName) {\n filterCLass = cls.FILTERED_CLASS;\n }\n }\n }\n var spanElement = createElement('span', {\n attrs: {\n 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('filter')\n },\n className: cls.FILTER_COMMON_CLASS + ' ' + cls.ICON + ' ' + filterCLass\n });\n if ((((this.parent.dataSourceSettings.allowLabelFilter || this.parent.dataSourceSettings.allowValueFilter) &&\n axis !== 'filters') || this.parent.dataSourceSettings.allowMemberFilter)) {\n removeClass([spanElement], cls.ICON_DISABLE);\n }\n else {\n addClass([spanElement], cls.ICON_DISABLE);\n }\n if (this.parent.getModuleName() === 'pivotview') {\n if ((((this.parent.dataSourceSettings.allowLabelFilter || this.parent.dataSourceSettings.allowValueFilter) &&\n axis !== 'filters') || this.parent.dataSourceSettings.allowMemberFilter) &&\n this.parent.groupingBarSettings.showFilterIcon && field.showFilterIcon) {\n removeClass([spanElement], cls.ICON_DISABLE);\n }\n else {\n addClass([spanElement], cls.ICON_DISABLE);\n }\n }\n else {\n if (field.showFilterIcon && (((this.parent.dataSourceSettings.allowLabelFilter ||\n this.parent.dataSourceSettings.allowValueFilter) && axis !== 'filters') ||\n this.parent.dataSourceSettings.allowMemberFilter)) {\n removeClass([spanElement], cls.ICON_DISABLE);\n }\n else {\n addClass([spanElement], cls.ICON_DISABLE);\n }\n }\n pivotButton.appendChild(spanElement);\n return spanElement;\n };\n // To update button text\n PivotButton.prototype.updateButtontext = function (fieldName) {\n var engineModule;\n if (this.parent.dataType === 'olap') {\n engineModule = this.parent.olapEngineModule;\n }\n else {\n engineModule = this.parent.engineModule;\n }\n var filterCount = engineModule.fieldList[fieldName].filter.length;\n var filterType = engineModule.fieldList[fieldName].filterType;\n var memLen = engineModule.fieldList[fieldName].dateMember.length;\n var filterMem;\n var firstNode = engineModule.fieldList[fieldName].filter[0];\n if (this.parent.dataType === 'olap') {\n filterMem = this.updateOlapButtonText(engineModule, fieldName, firstNode, filterCount);\n }\n else if (filterType === 'include') {\n if (filterCount === 1) {\n filterMem = firstNode;\n }\n else if (filterCount > 1) {\n if (filterCount === memLen) {\n filterMem = this.parent.localeObj.getConstant('all');\n }\n else {\n filterMem = this.parent.localeObj.getConstant('multipleItems');\n }\n }\n }\n else if (filterType === 'exclude') {\n if (filterCount === 1) {\n if (memLen === 2) {\n if (firstNode !== engineModule.fieldList[fieldName].dateMember[0].actualText) {\n filterMem = firstNode;\n }\n else {\n filterMem = engineModule.fieldList[fieldName].dateMember[0].actualText;\n }\n }\n else {\n filterMem = this.parent.localeObj.getConstant('multipleItems');\n }\n }\n else if (filterCount > 1) {\n var j = void 0;\n var allNodes = Object.keys(engineModule.fieldList[fieldName].members);\n var filteredItems = engineModule.fieldList[fieldName].filter;\n if (filterCount === (allNodes.length - 1)) {\n /* eslint-disable */\n loop: for (j = 0; j < allNodes.length; j++) {\n var test = allNodes[j];\n var x = filteredItems.indexOf(test);\n if (x === -1) {\n filterMem = allNodes[j];\n break loop;\n /* eslint-enable */\n }\n }\n }\n else {\n filterMem = this.parent.localeObj.getConstant('multipleItems');\n }\n }\n }\n else {\n filterMem = this.parent.localeObj.getConstant('all');\n }\n return filterMem;\n };\n PivotButton.prototype.updateOlapButtonText = function (engineModule, fieldName, firstNode, filterCount) {\n var filterMem;\n var filterItems = engineModule.fieldList[fieldName].actualFilter;\n if (filterItems.length > 0) {\n var cMembers = engineModule.fieldList[fieldName].members;\n var actualFilterItems = [];\n if (engineModule.fieldList[fieldName].filterMembers.length > 0) {\n var dummyfilterItems = {};\n for (var _i = 0, filterItems_1 = filterItems; _i < filterItems_1.length; _i++) {\n var item = filterItems_1[_i];\n dummyfilterItems[item] = item;\n if (cMembers[item]) {\n dummyfilterItems = this.parent.pivotCommon.eventBase.getParentNode(fieldName, item, dummyfilterItems);\n }\n }\n var updatedFilterItems = dummyfilterItems ? Object.keys(dummyfilterItems) : [];\n for (var _a = 0, updatedFilterItems_1 = updatedFilterItems; _a < updatedFilterItems_1.length; _a++) {\n var item = updatedFilterItems_1[_a];\n if (cMembers[item].isSelected) {\n if (!(cMembers[item].parent && cMembers[cMembers[item].parent].isSelected)) {\n actualFilterItems.push(item);\n }\n }\n }\n firstNode = actualFilterItems.length === 1 ? cMembers[actualFilterItems[0]].caption : firstNode;\n }\n filterCount = actualFilterItems.length === 0 ? filterCount : actualFilterItems.length;\n }\n if (filterCount === 0) {\n filterMem = (engineModule.fieldList[fieldName].allMember ?\n engineModule.fieldList[fieldName].allMember : this.parent.localeObj.getConstant('all'));\n }\n else if (filterCount === 1) {\n filterMem = firstNode;\n }\n else if (filterCount > 1) {\n filterMem = this.parent.localeObj.getConstant('multipleItems');\n }\n return filterMem;\n };\n PivotButton.prototype.createDragClone = function (args) {\n var element = closest(args.element, '.' + cls.PIVOT_BUTTON_CLASS);\n var cloneElement = createElement('div', {\n id: this.parent.element.id + '_DragClone',\n className: cls.DRAG_CLONE_CLASS\n });\n var contentElement = createElement('span', {\n className: cls.TEXT_CONTENT_CLASS,\n innerHTML: element.textContent\n });\n cloneElement.appendChild(contentElement);\n document.body.appendChild(cloneElement);\n return cloneElement;\n };\n PivotButton.prototype.onDragStart = function (e) {\n var _this = this;\n var element = closest(e.element, '.' + cls.PIVOT_BUTTON_CLASS);\n var dragItem = document.getElementById(this.parent.element.id + '_DragClone');\n var fieldInfo = PivotUtil.getFieldInfo(element.getAttribute('data-uid'), this.parent);\n var dragEventArgs = {\n fieldName: fieldInfo.fieldName,\n fieldItem: fieldInfo.fieldItem,\n axis: fieldInfo.axis,\n dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings),\n cancel: false\n };\n var control = this.parent.getModuleName() === 'pivotfieldlist' &&\n this.parent.isPopupView ? this.parent.pivotGridModule : this.parent;\n control.trigger(events.fieldDragStart, dragEventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n _this.parent.isDragging = true;\n var engineModule = void 0;\n if (_this.parent.dataType === 'olap') {\n engineModule = _this.parent.olapEngineModule;\n }\n else {\n engineModule = _this.parent.engineModule;\n }\n var data = engineModule.fieldList[element.getAttribute('data-uid')];\n var axis = [cls.ROW_AXIS_CLASS, cls.COLUMN_AXIS_CLASS, cls.FILTER_AXIS_CLASS];\n addClass([element], cls.SELECTED_NODE_CLASS);\n if (dragItem && (_this.parent.getModuleName() === 'pivotfieldlist' &&\n _this.parent.renderMode) === 'Popup') {\n var fieldListPopup = _this.parent;\n dragItem.style.zIndex = (fieldListPopup.dialogRenderer.fieldListDialog.zIndex + 1).toString();\n }\n if (data && data.aggregateType === 'CalculatedField') {\n for (var _i = 0, axis_1 = axis; _i < axis_1.length; _i++) {\n var axisContent = axis_1[_i];\n addClass([_this.parentElement.querySelector('.' + axisContent)], cls.NO_DRAG_CLASS);\n }\n }\n if (isBlazor()) {\n e.bindEvents(e.dragElement);\n }\n }\n else {\n _this.parent.isDragging = false;\n _this.draggable.intDestroy(e.event);\n detach(dragItem);\n }\n });\n };\n PivotButton.prototype.onDragging = function (e) {\n this.draggable.setProperties({ cursorAt: { top: (!isNOU(e.event.targetTouches) || Browser.isDevice) ? 60 : -20 } });\n };\n PivotButton.prototype.onDragStop = function (args) {\n this.parent.isDragging = false;\n if (args.target.classList && (args.target.classList.contains(cls.GROUP_CHART_VALUE) || args.target.classList.contains(cls.GROUP_CHART_VALUE_DROPDOWN))) { /* eslint-disable-line */\n args.target = this.parent.element.querySelector('.' + cls.GROUP_CHART_ROW);\n }\n if (args.target.classList && args.element && (args.target.classList.contains(cls.GROUP_CHART_COLUMN) || args.target.classList.contains(cls.GROUP_CHART_COLUMN_DROPDOWN))) { /* eslint-disable-line */\n args.cancel = true;\n }\n var element = closest(args.element, '.' + cls.PIVOT_BUTTON_CLASS);\n removeClass([].slice.call(this.parentElement.querySelectorAll('.' + cls.PIVOT_BUTTON_CLASS)), cls.SELECTED_NODE_CLASS);\n removeClass([].slice.call(this.parentElement.querySelectorAll('.' + cls.DROP_INDICATOR_CLASS)), cls.INDICATOR_HOVER_CLASS);\n var axis = [cls.ROW_AXIS_CLASS, cls.COLUMN_AXIS_CLASS, cls.FILTER_AXIS_CLASS];\n for (var _i = 0, axis_2 = axis; _i < axis_2.length; _i++) {\n var axisContent = axis_2[_i];\n removeClass([this.parentElement.querySelector('.' + axisContent)], cls.NO_DRAG_CLASS);\n }\n if (this.parent.pivotCommon.filterDialog.dialogPopUp) {\n this.parent.pivotCommon.filterDialog.dialogPopUp.close();\n }\n if (document.getElementById(this.parent.element.id + '_DragClone')) {\n remove(document.getElementById(this.parent.element.id + '_DragClone'));\n }\n document.body.style.cursor = 'auto';\n if (!this.isButtonDropped(args.target, element) || args.cancel) {\n return;\n }\n this.parent.pivotCommon.dataSourceUpdate.control = this.parent.getModuleName() === 'pivotview' ? this.parent :\n (this.parent.pivotGridModule ? this.parent.pivotGridModule : this.parent);\n if (this.parent.pivotCommon.nodeStateModified.onStateModified(args, element.id)) {\n this.updateDataSource();\n /* eslint-disable */\n var thisObj = this;\n /* eslint-enable */\n thisObj.parent.axisFieldModule.render();\n }\n };\n PivotButton.prototype.isButtonDropped = function (dropTarget, target) {\n var axisPanel = closest(target, '.' + cls.DROPPABLE_CLASS);\n var droppableElement = closest(dropTarget, '.' + cls.DROPPABLE_CLASS);\n var isDropped = true;\n if (axisPanel === droppableElement) {\n var pivotButtons = [].slice.call(axisPanel.querySelectorAll('.' + cls.PIVOT_BUTTON_CLASS));\n var droppableTarget = closest(dropTarget, '.' + cls.PIVOT_BUTTON_WRAPPER_CLASS);\n var sourcePosition = void 0;\n var droppedPosition = -1;\n for (var i = 0, n = pivotButtons.length; i < n; i++) {\n if (pivotButtons[i].id === target.id) {\n sourcePosition = i;\n }\n if (droppableTarget) {\n var droppableButton = droppableTarget.querySelector('.' + cls.PIVOT_BUTTON_CLASS);\n if (pivotButtons[i].id === droppableButton.id) {\n droppedPosition = i;\n }\n }\n }\n if (sourcePosition === droppedPosition || (sourcePosition === (pivotButtons.length - 1) && droppedPosition === -1)) {\n removeClass([].slice.call(this.parentElement.querySelectorAll('.' + cls.DROP_INDICATOR_CLASS)), cls.INDICATOR_HOVER_CLASS);\n isDropped = false;\n }\n }\n return isDropped;\n };\n PivotButton.prototype.updateSorting = function (args) {\n var buttonElement = closest(args.target, '.' + cls.PIVOT_BUTTON_CLASS);\n var fieldInfo = PivotUtil.getFieldInfo((buttonElement ? buttonElement.id : ''), this.parent);\n if (!(args.target.classList.contains(cls.FILTER_COMMON_CLASS)) &&\n !(args.target.classList.contains(cls.REMOVE_CLASS)) &&\n !(args.target.classList.contains(cls.DRAG_CLASS)) &&\n (buttonElement && fieldInfo.fieldItem && (fieldInfo.fieldItem.showSortIcon ||\n isNullOrUndefined(fieldInfo.fieldItem.showSortIcon)))) {\n if ((this.parent instanceof PivotFieldList || this.parent.groupingBarSettings.showSortIcon) &&\n this.parent.dataSourceSettings.enableSorting &&\n !(this.parent.dataType === 'olap' && ((this.parent.getModuleName() === 'pivotfieldlist' &&\n this.parent.pivotGridModule !== undefined &&\n this.parent.pivotGridModule.enableVirtualization) ||\n (this.parent.getModuleName() === 'pivotview' && this.parent.enableVirtualization)))) {\n if (((this.parent.getModuleName() === 'pivotview' && this.parent.enableValueSorting) ||\n (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.pivotGridModule !== undefined &&\n this.parent.pivotGridModule.enableValueSorting))) {\n if (this.parent.enableValueSorting || this.parent.pivotGridModule.enableValueSorting) { /* eslint-disable-line */\n if (args.target.classList.contains('e-pivot-button')) {\n if (args.target.parentElement.getAttribute('data-tag').split(':')[0] === 'rows') {\n this.parent.setProperties({ dataSourceSettings: { valueSortSettings: { headerText: '' } } }, true);\n }\n }\n else {\n if (args.target.parentElement.parentElement.getAttribute('data-tag').split(':')[0] === 'rows') {\n this.parent.setProperties({ dataSourceSettings: { valueSortSettings: { headerText: '' } } }, true);\n }\n }\n }\n }\n this.parent.pivotCommon.eventBase.updateSorting(args);\n if (!this.parent.allowDeferLayoutUpdate || this.parent.getModuleName() !== 'pivotfieldlist') {\n this.updateDataSource(true);\n }\n /* eslint-disable */\n var thisObj = this;\n /* eslint-enable */\n if (thisObj.parent instanceof PivotFieldList) {\n thisObj.axisField.render();\n }\n }\n }\n };\n /* eslint-disable-next-line */\n /** @hidden */\n PivotButton.prototype.updateDataSource = function (isRefreshGrid) {\n if (!this.parent.allowDeferLayoutUpdate || this.parent.getModuleName() === 'pivotview') {\n this.parent.updateDataSource(isRefreshGrid);\n }\n else {\n if (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.isPopupView && this.parent.pivotGridModule) {\n if (this.parent.dataType === 'olap') {\n this.parent.pivotGridModule.olapEngineModule = this.parent.olapEngineModule;\n }\n else {\n this.parent.pivotGridModule.engineModule = this.parent.engineModule;\n }\n /* eslint-disable */\n this.parent.pivotGridModule.notify(events.uiUpdate, this);\n this.parent.\n pivotGridModule.setProperties({ dataSourceSettings: this.parent.dataSourceSettings.properties }, true);\n /* eslint-enable */\n }\n else {\n this.parent.triggerPopulateEvent();\n }\n }\n };\n PivotButton.prototype.updateFiltering = function (args) {\n /* eslint-disable */\n var pivotObj = this.parent.pivotGridModule ? this.parent.pivotGridModule : this.parent;\n if (pivotObj.getModuleName() === 'pivotfieldlist') {\n showSpinner(pivotObj.fieldListSpinnerElement);\n }\n else {\n pivotObj.showWaitingPopup();\n }\n pivotObj.mouseEventArgs = args;\n pivotObj.filterTargetID = this.parent.pivotCommon.moduleName !== 'pivotfieldlist' ?\n this.parent.element : document.getElementById(this.parent.pivotCommon.parentID + '_Wrapper');\n var fieldName = args.target.parentElement.id;\n if (pivotObj && pivotObj.enableVirtualization && isBlazor() && pivotObj.dataType === 'pivot') {\n var $this_1 = this;\n pivotObj.interopAdaptor.invokeMethodAsync(\"PivotInteropMethod\", 'fetchFieldMembers', fieldName).then(function (data) {\n var parsedData = JSON.parse(data.dateMembers);\n var dateMembers = [];\n var formattedMembers = {};\n var members = {};\n for (var i = 0; i < parsedData.length; i++) {\n dateMembers.push({ formattedText: parsedData[i].FormattedText, actualText: parsedData[i].ActualText });\n formattedMembers[parsedData[i].FormattedText] = {};\n members[parsedData[i].ActualText] = {};\n }\n $this_1.parent.engineModule.fieldList[fieldName].dateMember = dateMembers;\n $this_1.parent.engineModule.fieldList[fieldName].formattedMembers = formattedMembers;\n $this_1.parent.engineModule.fieldList[fieldName].members = members;\n $this_1.updateFilterEvents();\n });\n }\n else if (pivotObj.dataSourceSettings.mode === 'Server') {\n if (this.parent.engineModule.fieldList[fieldName].members && Object.keys(this.parent.engineModule.fieldList[fieldName].members).length > 0) {\n this.updateFilterEvents();\n }\n else {\n pivotObj.getEngine('fetchFieldMembers', null, null, null, null, null, fieldName);\n }\n }\n else {\n this.updateFilterEvents();\n }\n /* eslint-enable */\n };\n /* eslint-disable-next-line */\n /** @hidden */\n PivotButton.prototype.updateFilterEvents = function () {\n /* eslint-disable */\n var pivotObj = this.parent.pivotGridModule ? this.parent.pivotGridModule : this.parent;\n this.parent.pivotCommon.eventBase.updateFiltering(pivotObj.mouseEventArgs);\n var target = pivotObj.mouseEventArgs.target;\n this.fieldName = target.parentElement.id;\n if (this.parent.pivotCommon.filterDialog.dialogPopUp) {\n this.dialogPopUp = this.parent.pivotCommon.filterDialog.dialogPopUp;\n this.parent.pivotCommon.filterDialog.dialogPopUp.close = this.removeFilterDialog.bind(this);\n // this.memberTreeView = this.parent.pivotCommon.filterDialog.memberTreeView;\n // this.parent.pivotCommon.filterDialog.memberTreeView.nodeChecked = this.nodeStateModified.bind(this);\n // this.parent.pivotCommon.filterDialog.allMemberSelect.nodeChecked = this.nodeStateModified.bind(this);\n this.bindDialogEvents();\n }\n if (pivotObj.getModuleName() === 'pivotfieldlist') {\n hideSpinner(pivotObj.fieldListSpinnerElement);\n }\n else {\n pivotObj.hideWaitingPopup();\n }\n };\n PivotButton.prototype.bindDialogEvents = function () {\n if (this.parent.pivotCommon.filterDialog.allowExcelLikeFilter && this.parent.pivotCommon.filterDialog.tabObj) {\n this.index = this.parent.pivotCommon.filterDialog.tabObj.selectedItem;\n this.updateDialogButtonEvents();\n this.dialogPopUp.buttons = this.buttonModel();\n this.dialogPopUp.dataBind();\n this.parent.pivotCommon.filterDialog.tabObj.selected = this.tabSelect.bind(this);\n }\n else if (this.parent.dataSourceSettings.allowMemberFilter) {\n this.index = 0;\n this.updateDialogButtonEvents();\n }\n };\n PivotButton.prototype.buttonModel = function () {\n return [\n {\n buttonModel: {\n cssClass: 'e-clear-filter-button' + (this.parent.pivotCommon.filterDialog.allowExcelLikeFilter ? '' : ' ' + cls.ICON_DISABLE),\n iconCss: 'e-icons e-clear-filter-icon', enableRtl: this.parent.enableRtl,\n content: this.parent.localeObj.getConstant('clearFilter'), disabled: (this.parent.pivotCommon.filterDialog.filterObject ? false : true)\n },\n click: this.ClearFilter.bind(this)\n },\n {\n buttonModel: {\n cssClass: cls.OK_BUTTON_CLASS, content: this.parent.localeObj.getConstant('ok'), isPrimary: true\n },\n click: (this.index === 0 ? this.updateFilterState.bind(this, this.fieldName) : this.updateCustomFilter.bind(this))\n },\n {\n click: this.parent.pivotCommon.filterDialog.closeFilterDialog.bind(this),\n buttonModel: { cssClass: cls.CANCEL_BUTTON_CLASS, content: this.parent.localeObj.getConstant('cancel') }\n }\n ];\n };\n PivotButton.prototype.tabSelect = function (e) {\n this.index = e.selectedIndex;\n this.updateDialogButtonEvents();\n removeClass([].slice.call(this.dialogPopUp.element.querySelectorAll('.e-selected-tab')), 'e-selected-tab');\n if (e.selectedIndex > 0) {\n addClass([this.dialogPopUp.element.querySelector('.e-filter-div-content' + '.' + (e.selectedIndex === 1 && this.parent.dataSourceSettings.allowLabelFilter ? 'e-label-filter' : 'e-value-filter'))], 'e-selected-tab');\n }\n if (e.selectedIndex === 0) {\n this.parent.pivotCommon.filterDialog.updateCheckedState();\n }\n else {\n this.dialogPopUp.buttons[0].buttonModel.disabled = false;\n this.dialogPopUp.element.querySelector('.' + cls.OK_BUTTON_CLASS).removeAttribute('disabled');\n }\n };\n PivotButton.prototype.updateDialogButtonEvents = function () {\n this.dialogPopUp.buttons = this.buttonModel();\n this.dialogPopUp.dataBind();\n };\n PivotButton.prototype.updateCustomFilter = function (args) {\n var _this = this;\n var dialogElement = this.dialogPopUp.element.querySelector('.e-selected-tab');\n var fieldName = dialogElement.getAttribute('data-fieldname');\n var levelName = dialogElement.getAttribute('data-selectedField');\n var filterType = dialogElement.getAttribute('data-type');\n var measure = dialogElement.getAttribute('data-measure');\n var operator = dialogElement.getAttribute('data-operator');\n var operand1 = dialogElement.getAttribute('data-value1');\n var operand2 = dialogElement.getAttribute('data-value2');\n var type = ((filterType === 'value') ? 'Value' : (filterType === 'date') ? 'Date' :\n (filterType === 'number') ? 'Number' : 'Label');\n var filterItem = {\n name: fieldName,\n type: type,\n measure: measure,\n condition: operator,\n value1: filterType === 'date' && !isBlazor() ? new Date(operand1) : operand1,\n value2: filterType === 'date' && !isBlazor() ? new Date(operand2) : operand2\n };\n var filterObject;\n if (this.parent.dataType === 'olap') {\n filterItem.selectedField = levelName;\n this.removeDataSourceSettings(fieldName, levelName, type);\n var filterItems = this.parent.dataSourceSettings.filterSettings;\n for (var _i = 0, filterItems_2 = filterItems; _i < filterItems_2.length; _i++) {\n var item = filterItems_2[_i];\n if (item.name === fieldName && item.selectedField === levelName) {\n filterObject = item;\n }\n }\n }\n else {\n filterObject = PivotUtil.getFilterItemByName(fieldName, this.parent.dataSourceSettings.filterSettings);\n }\n if ((isNOU(operand1) || operand1 === '') ||\n (['Between', 'NotBetween'].indexOf(operator) > -1 && (isNOU(operand2) || operand2 === ''))) {\n var inputElementString = (type.toLowerCase() + ((isNOU(operand1) || operand1 === '') ? '_input_option_1' : '_input_option_2'));\n var focusElement = select('#' + this.parent.element.id + '_' + inputElementString, dialogElement);\n addClass([focusElement], cls.EMPTY_FIELD);\n focusElement.focus();\n return;\n }\n var filterEventArgs = {\n cancel: false,\n filterSettings: filterItem,\n dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings)\n };\n var control = this.parent.getModuleName() === 'pivotfieldlist' &&\n this.parent.isPopupView ? this.parent.pivotGridModule : this.parent;\n control.trigger(events.memberFiltering, filterEventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n filterItem = observedArgs.filterSettings;\n if (filterObject) {\n // this.removeDataSourceSettings(fieldName);\n filterObject = filterObject.properties ?\n filterObject.properties : filterObject;\n filterObject.type = filterItem.type;\n filterObject.measure = filterItem.measure;\n filterObject.condition = filterItem.condition;\n filterObject.value1 = filterItem.value1;\n filterObject.value2 = filterItem.value2;\n if (_this.parent.dataType === 'olap') {\n filterObject.selectedField = filterItem.selectedField;\n }\n }\n else {\n _this.parent.dataSourceSettings.filterSettings.push(filterItem);\n }\n }\n if (type !== 'Value') {\n _this.parent.lastFilterInfo = PivotUtil.getFilterItemByName(fieldName, _this.parent.dataSourceSettings.filterSettings);\n }\n _this.dialogPopUp.close();\n if (!observedArgs.cancel) {\n _this.refreshPivotButtonState(fieldName, true);\n _this.updateDataSource(true);\n }\n });\n };\n PivotButton.prototype.removeFilterDialog = function () {\n if (this.dialogPopUp && !this.dialogPopUp.isDestroyed) {\n this.dialogPopUp.destroy();\n setTimeout(this.setFocus.bind(this));\n }\n if (document.getElementById(this.parentElement.id + '_EditorTreeView')) {\n remove(document.getElementById(this.parentElement.id + '_EditorTreeView'));\n }\n };\n PivotButton.prototype.setFocus = function () {\n if (this.parentElement) {\n var pivotButtons = [].slice.call(this.parentElement.querySelectorAll('.e-pivot-button'));\n for (var _i = 0, pivotButtons_1 = pivotButtons; _i < pivotButtons_1.length; _i++) {\n var item = pivotButtons_1[_i];\n if (item.getAttribute('data-uid') === this.fieldName) {\n item.focus();\n break;\n }\n }\n }\n };\n PivotButton.prototype.ClearFilter = function (e) {\n var dialogElement = this.dialogPopUp.element;\n var fieldName = dialogElement.getAttribute('data-fieldname');\n var tabElement = dialogElement.querySelector('.e-selected-tab');\n this.dialogPopUp.close();\n if (this.parent.dataType === 'olap' && tabElement) {\n var levelName = tabElement.getAttribute('data-selectedField');\n this.removeDataSourceSettings(fieldName, levelName);\n }\n else {\n this.removeDataSourceSettings(fieldName);\n }\n var filterObject = PivotUtil.getFilterItemByName(fieldName, this.parent.dataSourceSettings.filterSettings);\n this.refreshPivotButtonState(fieldName, filterObject ? true : false);\n this.updateDataSource(true);\n };\n PivotButton.prototype.removeButton = function (args) {\n var _this = this;\n var target = args.target;\n var fieldName = target.parentElement.id;\n var fieldInfo = PivotUtil.getFieldInfo(fieldName, this.parent);\n var removeFieldArgs = {\n cancel: false, fieldName: fieldName,\n dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings),\n fieldItem: fieldInfo.fieldItem, axis: fieldInfo.axis\n };\n var control = this.parent.getModuleName() === 'pivotfieldlist' &&\n this.parent.isPopupView ? this.parent.pivotGridModule : this.parent;\n control.trigger(events.fieldRemove, removeFieldArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n if (target.parentElement.getAttribute('isvalue') === 'true') {\n _this.parent.setProperties({ dataSourceSettings: { values: [] } }, true);\n if (_this.parent.dataType === 'olap') {\n _this.parent.pivotCommon.dataSourceUpdate.removeFieldFromReport('[measures]');\n }\n }\n else {\n _this.parent.pivotCommon.dataSourceUpdate.removeFieldFromReport(fieldName);\n if (_this.parent.dataType === 'olap' && _this.parent.dataSourceSettings.values.length === 0) {\n _this.parent.pivotCommon.dataSourceUpdate.removeFieldFromReport('[measures]');\n }\n }\n if (_this.parent.getModuleName() === 'pivotfieldlist') {\n _this.parent.axisFieldModule.render();\n }\n _this.updateDataSource();\n }\n });\n };\n /** @hidden */\n PivotButton.prototype.nodeStateModified = function (args) {\n var target = closest(args.node, 'li');\n var fieldName = target.getAttribute('data-fieldname');\n if (target.getAttribute('data-memberId') === 'all') {\n this.memberTreeView.nodeChecked = null;\n if (args.action === 'check') {\n this.memberTreeView.checkAll();\n }\n else {\n this.memberTreeView.uncheckAll();\n }\n if (this.parent.dataType === 'olap' && this.parent.olapEngineModule &&\n !this.parent.olapEngineModule.fieldList[fieldName].isHierarchy) {\n this.updateNodeStates(this.memberTreeView.getAllCheckedNodes(), fieldName, args.action);\n }\n this.checkedStateAll(args.action);\n this.memberTreeView.nodeChecked = this.nodeStateModified.bind(this);\n }\n else {\n if (this.parent.dataType === 'olap' && this.parent.olapEngineModule &&\n !this.parent.olapEngineModule.fieldList[fieldName].isHierarchy) {\n // let st1: number = new Date().getTime();\n var checkedNodes = this.memberTreeView.getAllCheckedNodes();\n // let st2: number = (new Date().getTime() - st1) / 1000;\n // console.log('getAllCheckedNodes:' + st2);\n this.updateNodeStates(checkedNodes, fieldName, args.action);\n }\n var pos = this.parent.pivotCommon.currentTreeItemsPos[target.getAttribute('data-memberId')].index;\n if (this.parent.pivotCommon.currentTreeItems[pos]) {\n this.parent.pivotCommon.currentTreeItems[pos].isSelected = args.action === 'check';\n this.parent.pivotCommon.currentTreeItemsPos[target.getAttribute('data-memberId')].isSelected = args.action === 'check';\n }\n }\n this.parent.pivotCommon.filterDialog.updateCheckedState();\n };\n PivotButton.prototype.checkedStateAll = function (state) {\n var searchItemObj = {};\n /* eslint-disable @typescript-eslint/no-explicit-any */\n for (var _i = 0, _a = this.parent.pivotCommon.searchTreeItems; _i < _a.length; _i++) {\n var item = _a[_i];\n item.isSelected = state === 'check';\n searchItemObj[item.htmlAttributes['data-memberId']] = item.htmlAttributes['data-memberId'];\n }\n for (var _b = 0, _c = this.parent.pivotCommon.currentTreeItems; _b < _c.length; _b++) {\n var item = _c[_b];\n if (searchItemObj[item.htmlAttributes['data-memberId']] !== undefined) {\n item.isSelected = state === 'check';\n this.parent.pivotCommon.currentTreeItemsPos[item.htmlAttributes['data-memberId']].isSelected = state === 'check';\n }\n }\n /* eslint-enable @typescript-eslint/no-explicit-any */\n };\n PivotButton.prototype.updateNodeStates = function (checkedNodes, fieldName, state) {\n var fieldList = this.parent.pivotCommon.engineModule.fieldList[fieldName];\n var currentMembers = fieldList.members;\n var searchMembers = fieldList.currrentMembers;\n if (fieldList.searchMembers.length > 0) {\n var members = Object.keys(searchMembers);\n for (var _i = 0, members_1 = members; _i < members_1.length; _i++) {\n var member = members_1[_i];\n if (searchMembers[member]) {\n searchMembers[member].isSelected = false;\n }\n if (currentMembers[member]) {\n currentMembers[member].isSelected = false;\n if (this.memberTreeView.element.querySelector('li[data-memberId=\"' + member + '\"]')) {\n var element = this.memberTreeView.element.querySelector('li[data-memberId=\"' + member + '\"]');\n if (element && !element.querySelector('ul')) {\n this.parent.pivotCommon.eventBase.updateChildNodeStates(fieldList.filterMembers, fieldName, member, false);\n }\n }\n }\n }\n for (var _a = 0, checkedNodes_1 = checkedNodes; _a < checkedNodes_1.length; _a++) {\n var node = checkedNodes_1[_a];\n if (currentMembers[node]) {\n if (this.memberTreeView.element.querySelector('li[data-memberId=\"' + node + '\"]')) {\n var element = this.memberTreeView.element.querySelector('li[data-memberId=\"' + node + '\"]');\n if (element && !element.querySelector('ul')) {\n currentMembers[node].isSelected = true;\n this.parent.pivotCommon.eventBase.updateChildNodeStates(fieldList.filterMembers, fieldName, node, true);\n }\n }\n }\n if (searchMembers[node]) {\n searchMembers[node].isSelected = true;\n }\n }\n }\n else {\n var members = Object.keys(currentMembers);\n for (var _b = 0, members_2 = members; _b < members_2.length; _b++) {\n var member = members_2[_b];\n if (currentMembers[member].isSelected) {\n currentMembers[member].isSelected = false;\n }\n }\n for (var _c = 0, checkedNodes_2 = checkedNodes; _c < checkedNodes_2.length; _c++) {\n var node = checkedNodes_2[_c];\n if (currentMembers[node]) {\n currentMembers[node].isSelected = true;\n this.parent.pivotCommon.eventBase.updateChildNodeStates(fieldList.filterMembers, fieldName, node, true);\n }\n }\n }\n };\n PivotButton.prototype.updateFilterState = function (fieldName, args) {\n var _this = this;\n var isNodeUnChecked = false;\n var filterItem = { items: [], name: fieldName, type: 'Include' };\n var engineModule = this.parent.olapEngineModule;\n if (this.parent.dataType === 'olap' && engineModule &&\n !engineModule.fieldList[fieldName].isHierarchy) {\n var cMembers = engineModule.fieldList[fieldName].members;\n var sMembers = engineModule.fieldList[fieldName].currrentMembers;\n filterItem.items = this.memberTreeView.getAllCheckedNodes();\n filterItem.levelCount = engineModule.fieldList[fieldName].levelCount;\n isNodeUnChecked = (filterItem.items.length ===\n this.memberTreeView.fields.dataSource.length ? false : true);\n if (engineModule.fieldList[fieldName].searchMembers.length > 0 && !isNodeUnChecked) {\n var cNodeLength = Object.keys(cMembers).length;\n var sNodeLength = Object.keys(sMembers).length;\n isNodeUnChecked = cNodeLength === sNodeLength && cNodeLength === filterItem.items.length ? false : true;\n }\n var filterItems = filterItem.items;\n for (var _i = 0, filterItems_3 = filterItems; _i < filterItems_3.length; _i++) {\n var node = filterItems_3[_i];\n if (engineModule.fieldList[fieldName].searchMembers.length > 0 && sMembers[node]) {\n sMembers[node].isSelected = true;\n }\n else if (cMembers[node]) {\n cMembers[node].isSelected = true;\n }\n }\n }\n else {\n for (var _a = 0, _b = this.parent.pivotCommon.searchTreeItems; _a < _b.length; _a++) {\n var item = _b[_a];\n if (item.isSelected) {\n if (this.parent.pivotCommon.isDateField) {\n filterItem.items.push(item.name);\n }\n else {\n filterItem.items.push(item.htmlAttributes['data-memberId']);\n }\n }\n }\n isNodeUnChecked = (filterItem.items.length === this.parent.pivotCommon.currentTreeItems.length ?\n false : true);\n }\n if (this.parent.dataType === 'olap') {\n this.removeDataSourceSettings(fieldName);\n }\n if (this.parent.allowDeferLayoutUpdate) {\n this.parent.engineModule.fieldList[filterItem.name].filterType = filterItem.type.toLowerCase();\n this.parent.engineModule.fieldList[filterItem.name].filter = [];\n for (var i = 0; i < filterItem.items.length; i++) {\n this.parent.engineModule.fieldList[filterItem.name].filter.push(filterItem.items[i]);\n }\n }\n var filterEventArgs = {\n filterSettings: filterItem,\n dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings),\n cancel: false\n };\n var control = this.parent.getModuleName() === 'pivotfieldlist' &&\n this.parent.isPopupView ? this.parent.pivotGridModule : this.parent;\n control.trigger(events.memberFiltering, filterEventArgs, function (observedArgs) {\n filterItem = observedArgs.filterSettings;\n if (!observedArgs.cancel) {\n var filterObject = PivotUtil.getFilterItemByName(fieldName, _this.parent.dataSourceSettings.filterSettings);\n if (filterObject) {\n for (var i = 0; i < _this.parent.dataSourceSettings.filterSettings.length; i++) {\n if (_this.parent.dataSourceSettings.filterSettings[i].name === fieldName) {\n _this.parent.dataSourceSettings.filterSettings.splice(i, 1);\n break;\n }\n }\n }\n _this.parent.dataSourceSettings.filterSettings.push(filterItem);\n }\n _this.dialogPopUp.close();\n if (!observedArgs.cancel) {\n _this.refreshPivotButtonState(fieldName, isNodeUnChecked);\n if (!isNodeUnChecked) {\n _this.removeDataSourceSettings(fieldName);\n }\n _this.parent.lastFilterInfo = filterItem;\n _this.updateDataSource(true);\n var thisObj = _this;\n //setTimeout(() => {\n if (thisObj.parent instanceof PivotFieldList) {\n thisObj.axisField.render();\n }\n //});\n }\n var pivotButtons = [].slice.call(_this.parentElement.querySelectorAll('.e-pivot-button'));\n for (var _i = 0, pivotButtons_2 = pivotButtons; _i < pivotButtons_2.length; _i++) {\n var item = pivotButtons_2[_i];\n if (item.getAttribute('data-uid') === fieldName) {\n item.focus();\n break;\n }\n }\n });\n };\n PivotButton.prototype.refreshPivotButtonState = function (fieldName, isFiltered) {\n var pivotButtons = [].slice.call(this.parentElement.querySelectorAll('.e-pivot-button'));\n var selectedButton;\n for (var _i = 0, pivotButtons_3 = pivotButtons; _i < pivotButtons_3.length; _i++) {\n var item = pivotButtons_3[_i];\n if (item.getAttribute('data-uid') === fieldName) {\n selectedButton = item.querySelector('.' + cls.FILTER_COMMON_CLASS);\n break;\n }\n }\n if (isFiltered) {\n removeClass([selectedButton], cls.FILTER_CLASS);\n addClass([selectedButton], cls.FILTERED_CLASS);\n }\n else {\n removeClass([selectedButton], cls.FILTERED_CLASS);\n addClass([selectedButton], cls.FILTER_CLASS);\n }\n };\n PivotButton.prototype.removeDataSourceSettings = function (fieldName, selectedField, type) {\n var filterSettings = this.parent.dataSourceSettings.filterSettings;\n for (var len = 0, lnt = filterSettings.length; len < lnt; len++) {\n if (this.parent.dataType === 'olap' && selectedField) {\n if (!type && filterSettings[len].name === fieldName &&\n filterSettings[len].selectedField === selectedField) {\n filterSettings.splice(len, 1);\n break;\n }\n else if (type) {\n if (filterSettings[len].type !== type &&\n filterSettings[len].name === fieldName) {\n filterSettings.splice(len, 1);\n lnt--;\n len--;\n }\n }\n }\n else {\n if (filterSettings[len].name === fieldName) {\n filterSettings.splice(len, 1);\n if (this.parent.dataType !== 'olap') {\n break;\n }\n lnt--;\n len--;\n }\n }\n }\n };\n PivotButton.prototype.updateDropIndicator = function (e) {\n if (this.parent.isDragging) {\n removeClass([].slice.call(this.parentElement.querySelectorAll('.' + cls.DROP_INDICATOR_CLASS + '-last')), cls.INDICATOR_HOVER_CLASS);\n removeClass([].slice.call(this.parentElement.querySelectorAll('.' + cls.DROP_INDICATOR_CLASS)), cls.INDICATOR_HOVER_CLASS);\n var element = closest(e.target, '.' + cls.PIVOT_BUTTON_WRAPPER_CLASS);\n addClass([element.querySelector('.' + cls.DROP_INDICATOR_CLASS)], cls.INDICATOR_HOVER_CLASS);\n }\n };\n PivotButton.prototype.wireEvent = function (element, axis, isMeasureAvail) {\n EventHandler.add(element, 'mouseover', this.updateDropIndicator, this);\n if (!isMeasureAvail) {\n if (['filters', 'values'].indexOf(axis) === -1 && element.querySelector('.' + cls.PIVOT_BUTTON_CLASS) !== null) {\n EventHandler.add(element.querySelector('.' + cls.PIVOT_BUTTON_CLASS), 'click', this.updateSorting, this);\n }\n if (axis !== 'values' && element.querySelector('.' + cls.FILTER_COMMON_CLASS) !== null) {\n EventHandler.add(element.querySelector('.' + cls.FILTER_COMMON_CLASS), 'click', this.updateFiltering, this);\n }\n if (axis === 'values' && element.querySelector('.' + cls.AXISFIELD_ICON_CLASS) !== null) {\n EventHandler.add(element.querySelector('.' + cls.AXISFIELD_ICON_CLASS), 'click', this.createMenuOption, this);\n }\n }\n if (element.querySelector('.' + cls.CALC_EDIT) !== null) {\n EventHandler.add(element.querySelector('.' + cls.CALC_EDIT), 'click', this.openCalculatedFieldDialog, this);\n }\n EventHandler.add(element.querySelector('.' + cls.REMOVE_CLASS), 'click', this.removeButton, this);\n };\n PivotButton.prototype.unWireEvent = function (element, axis, isMeasureAvail) {\n EventHandler.remove(element, 'mouseover', this.updateDropIndicator);\n if (!isMeasureAvail) {\n if (['filters', 'values'].indexOf(axis) === -1 && element.querySelector('.' + cls.PIVOT_BUTTON_CLASS) !== null) {\n EventHandler.remove(element.querySelector('.' + cls.PIVOT_BUTTON_CLASS), 'click', this.updateSorting);\n }\n if (axis !== 'values' && element.querySelector('.' + cls.FILTER_COMMON_CLASS) !== null) {\n EventHandler.remove(element.querySelector('.' + cls.FILTER_COMMON_CLASS), 'click', this.updateFiltering);\n }\n if (axis === 'values' && element.querySelector('.' + cls.AXISFIELD_ICON_CLASS) !== null) {\n EventHandler.remove(element.querySelector('.' + cls.AXISFIELD_ICON_CLASS), 'click', this.createMenuOption);\n }\n }\n if (element.querySelector('.' + cls.CALC_EDIT) !== null) {\n EventHandler.remove(element.querySelector('.' + cls.CALC_EDIT), 'click', this.openCalculatedFieldDialog);\n }\n EventHandler.remove(element.querySelector('.' + cls.REMOVE_CLASS), 'click', this.removeButton);\n };\n /**\n * @hidden\n */\n PivotButton.prototype.addEventListener = function () {\n this.handlers = {\n load: this.renderPivotButton\n };\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.pivotButtonUpdate, this.handlers.load, this);\n };\n /**\n * @hidden\n */\n PivotButton.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.pivotButtonUpdate, this.handlers.load);\n };\n /**\n * To destroy the pivot button event listener\n * @returns {void}\n * @hidden\n */\n PivotButton.prototype.destroy = function () {\n if (this.menuOption) {\n this.menuOption.destroy();\n }\n if (this.valueFiedDropDownList && !this.valueFiedDropDownList.isDestroyed) {\n this.valueFiedDropDownList.destroy();\n this.valueFiedDropDownList = null;\n }\n if (this.columnFieldDropDownList && !this.columnFieldDropDownList.isDestroyed) {\n this.columnFieldDropDownList.destroy();\n this.columnFieldDropDownList = null;\n }\n if (this.memberTreeView && !this.memberTreeView.isDestroyed) {\n this.memberTreeView.destroy();\n this.memberTreeView = null;\n }\n if (this.dialogPopUp && !this.dialogPopUp.isDestroyed) {\n this.dialogPopUp.destroy();\n this.dialogPopUp = null;\n }\n if (this.draggable && !this.draggable.isDestroyed) {\n this.draggable.destroy();\n this.draggable = null;\n }\n if (this.axisField) {\n this.axisField = null;\n }\n this.removeEventListener();\n this.isDestroyed = true;\n };\n return PivotButton;\n}());\nexport { PivotButton };\n","import * as cls from '../../common/base/css-constant';\nimport * as events from '../../common/base/constant';\nimport { PivotButton } from '../../common/actions/pivot-button';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n/**\n * Module to render Axis Fields\n */\n/** @hidden */\nvar AxisFieldRenderer = /** @class */ (function () {\n /* eslint-disable-next-line */\n /** Constructor for render module */\n function AxisFieldRenderer(parent) {\n this.parent = parent;\n }\n /**\n * Initialize the pivot button rendering\n * @returns {void}\n * @private\n */\n AxisFieldRenderer.prototype.render = function () {\n /* eslint-disable */\n var pivotButtonModule = ((!this.parent.pivotButtonModule || (this.parent.pivotButtonModule && this.parent.pivotButtonModule.isDestroyed)) ?\n new PivotButton(this.parent) : this.parent.pivotButtonModule);\n /* eslint-enable */\n this.createPivotButtons();\n };\n AxisFieldRenderer.prototype.createPivotButtons = function () {\n if (isNullOrUndefined(this.parent.dataSourceSettings.dataSource) && isNullOrUndefined(this.parent.dataSourceSettings.url)) {\n this.parent.setProperties({ dataSourceSettings: { columns: [], rows: [], values: [], filters: [] } }, true);\n }\n var rows = this.parent.dataSourceSettings.rows;\n var columns = this.parent.dataSourceSettings.columns;\n var values = this.parent.dataSourceSettings.values;\n var filters = this.parent.dataSourceSettings.filters;\n var fields = [rows, columns, values, filters];\n var parentElement = this.parent.dialogRenderer.parentElement;\n if (parentElement.querySelector('.' + cls.FIELD_LIST_CLASS + '-filters')) {\n parentElement.querySelector('.' + cls.FIELD_LIST_CLASS + '-filters').querySelector('.' + cls.AXIS_CONTENT_CLASS).innerHTML = '';\n }\n if (parentElement.querySelector('.' + cls.FIELD_LIST_CLASS + '-rows')) {\n parentElement.querySelector('.' + cls.FIELD_LIST_CLASS + '-rows').querySelector('.' + cls.AXIS_CONTENT_CLASS).innerHTML = '';\n }\n if (parentElement.querySelector('.' + cls.FIELD_LIST_CLASS + '-columns')) {\n parentElement.querySelector('.' + cls.FIELD_LIST_CLASS + '-columns').querySelector('.' + cls.AXIS_CONTENT_CLASS).innerHTML = '';\n }\n if (parentElement.querySelector('.' + cls.FIELD_LIST_CLASS + '-values')) {\n parentElement.querySelector('.' + cls.FIELD_LIST_CLASS + '-values').querySelector('.' + cls.AXIS_CONTENT_CLASS).innerHTML = '';\n }\n var axis = ['rows', 'columns', 'values', 'filters'];\n for (var len = 0, lnt = fields.length; len < lnt; len++) {\n if (fields[len]) {\n var args = {\n field: fields[len],\n axis: axis[len].toString()\n };\n this.parent.notify(events.pivotButtonUpdate, args);\n }\n }\n };\n return AxisFieldRenderer;\n}());\nexport { AxisFieldRenderer };\n","import { DialogRenderer } from '../renderer/dialog-renderer';\nimport { TreeViewRenderer } from '../renderer/tree-renderer';\nimport { AxisTableRenderer } from '../renderer/axis-table-renderer';\nimport { AxisFieldRenderer } from './axis-field-renderer';\n/**\n * Module to render Pivot Table component\n */\n/** @hidden */\nvar Render = /** @class */ (function () {\n /** Constructor for render module\n * @param {PivotFieldList} parent - Instance of field list.\n */\n function Render(parent) {\n this.parent = parent;\n this.parent.dialogRenderer = new DialogRenderer(this.parent);\n this.parent.treeViewModule = new TreeViewRenderer(this.parent);\n this.parent.axisTableModule = new AxisTableRenderer(this.parent);\n this.parent.axisFieldModule = new AxisFieldRenderer(this.parent);\n }\n /**\n * Initialize the pivot table rendering\n * @returns {void}\n * @private\n */\n Render.prototype.render = function () {\n this.parent.dialogRenderer.render();\n if (!this.parent.isAdaptive) {\n this.parent.treeViewModule.render();\n }\n this.parent.axisTableModule.render();\n };\n return Render;\n}());\nexport { Render };\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, Event, Component, Internationalization, extend, isBlazor } from '@syncfusion/ej2-base';\nimport { L10n, remove, addClass, Browser, Complex, getInstance } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, removeClass, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { DataManager, Query } from '@syncfusion/ej2-data';\nimport { PivotEngine } from '../../base/engine';\nimport * as events from '../../common/base/constant';\nimport * as cls from '../../common/base/css-constant';\nimport { PivotCommon } from '../../common/base/pivot-common';\nimport { Render } from '../renderer/renderer';\nimport { PivotView } from '../../pivotview/base/pivotview';\nimport { DataSourceSettings } from '../../pivotview/model/datasourcesettings';\nimport { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nimport { PivotUtil } from '../../base/util';\nimport { OlapEngine } from '../../base/olap/engine';\n/**\n * Represents the PivotFieldList component.\n * ```html\n *
\n * \n * ```\n */\nvar PivotFieldList = /** @class */ (function (_super) {\n __extends(PivotFieldList, _super);\n /**\n * Constructor for creating the widget\n * @param {PivotFieldListModel} options - options\n * @param {string|HTMLElement} element - element\n */\n function PivotFieldList(options, element) {\n var _this = _super.call(this, options, element) || this;\n /** @hidden */\n _this.pivotChange = false;\n _this.isRequiredUpdate = true;\n /** @hidden */\n _this.lastSortInfo = {};\n /** @hidden */\n _this.lastFilterInfo = {};\n /** @hidden */\n _this.lastAggregationInfo = {};\n /** @hidden */\n _this.lastCalcFieldInfo = {};\n /** @hidden */\n _this.isPopupView = false;\n /** @hidden */\n _this.enableValueSorting = false;\n _this.request = new XMLHttpRequest();\n _this.remoteData = [];\n return _this;\n }\n /**\n * To provide the array of modules needed for control rendering\n * @returns {ModuleDeclaration[]} - ModuleDeclaration[]\n * @hidden\n */\n PivotFieldList.prototype.requiredModules = function () {\n var modules = [];\n if (this.allowCalculatedField) {\n modules.push({ args: [this], member: 'calculatedField' });\n }\n return modules;\n };\n /**\n * @returns {AggregateTypes[]}- AggregateTypes[]\n * @hidden\n */\n PivotFieldList.prototype.getAllSummaryType = function () {\n return ['Sum', 'Count', 'DistinctCount', 'Product', 'Min', 'Max', 'Avg', 'Median', 'Index',\n 'PopulationVar', 'SampleVar', 'PopulationStDev', 'SampleStDev', 'RunningTotals', 'PercentageOfGrandTotal',\n 'PercentageOfColumnTotal', 'PercentageOfRowTotal', 'PercentageOfParentColumnTotal', 'PercentageOfParentRowTotal',\n 'DifferenceFrom', 'PercentageOfDifferenceFrom', 'PercentageOfParentTotal'];\n };\n /* eslint-disable-next-line */\n /**\n * For internal use only - Initialize the event handler;\n * @private\n */\n PivotFieldList.prototype.preRender = function () {\n if (this.dataSourceSettings && this.dataSourceSettings.providerType === 'SSAS') {\n this.olapEngineModule = new OlapEngine();\n this.dataType = 'olap';\n }\n else {\n this.engineModule = new PivotEngine();\n this.dataType = 'pivot';\n }\n this.isAdaptive = Browser.isDevice;\n this.globalize = new Internationalization(this.locale);\n this.renderModule = new Render(this);\n /* eslint-disable */\n this.defaultLocale = {\n staticFieldList: 'Pivot Field List',\n fieldList: 'Field List',\n dropFilterPrompt: 'Drop filter here',\n dropColPrompt: 'Drop column here',\n dropRowPrompt: 'Drop row here',\n dropValPrompt: 'Drop value here',\n addPrompt: 'Add field here',\n adaptiveFieldHeader: 'Choose field',\n centerHeader: 'Drag fields between axes below:',\n add: 'add',\n drag: 'Drag',\n filter: 'Filter',\n filtered: 'Filtered',\n sort: 'Sort',\n remove: 'Remove',\n filters: 'Filters',\n rows: 'Rows',\n columns: 'Columns',\n values: 'Values',\n CalculatedField: 'Calculated Field',\n createCalculatedField: 'Create Calculated Field',\n fieldName: 'Enter the field name',\n error: 'Error',\n invalidFormula: 'Invalid formula.',\n dropText: 'Example: (\"Sum(Order_Count)\" + \"Sum(In_Stock)\") * 250',\n dropTextMobile: 'Add fields and edit formula here.',\n dropAction: 'Calculated field cannot be place in any other region except value axis.',\n search: 'Search',\n close: 'Close',\n cancel: 'Cancel',\n delete: 'Delete',\n alert: 'Alert',\n warning: 'Warning',\n ok: 'OK',\n allFields: 'All Fields',\n formula: 'Formula',\n fieldExist: 'A field already exists in this name. Please enter a different name.',\n confirmText: 'A calculation field already exists in this name. Do you want to replace it?',\n noMatches: 'No matches',\n format: 'Summaries values by',\n edit: 'Edit',\n clear: 'Clear',\n clearCalculatedField: 'Clear edited field info',\n editCalculatedField: 'Edit calculated field',\n sortAscending: 'Sort ascending order',\n sortDescending: 'Sort descending order',\n sortNone: 'Sort data order',\n formulaField: 'Drag and drop fields to formula',\n dragField: 'Drag field to formula',\n clearFilter: 'Clear',\n by: 'by',\n enterValue: 'Enter value',\n chooseDate: 'Enter date',\n all: 'All',\n multipleItems: 'Multiple items',\n Equals: 'Equals',\n DoesNotEquals: 'Does Not Equal',\n BeginWith: 'Begins With',\n DoesNotBeginWith: 'Does Not Begin With',\n EndsWith: 'Ends With',\n DoesNotEndsWith: 'Does Not End With',\n Contains: 'Contains',\n DoesNotContains: 'Does Not Contain',\n GreaterThan: 'Greater Than',\n GreaterThanOrEqualTo: 'Greater Than Or Equal To',\n LessThan: 'Less Than',\n LessThanOrEqualTo: 'Less Than Or Equal To',\n Between: 'Between',\n NotBetween: 'Not Between',\n Before: 'Before',\n BeforeOrEqualTo: 'Before Or Equal To',\n After: 'After',\n AfterOrEqualTo: 'After Or Equal To',\n member: 'Member',\n label: 'Label',\n date: 'Date',\n value: 'Value',\n labelTextContent: 'Show the items for which the label',\n dateTextContent: 'Show the items for which the date',\n valueTextContent: 'Show the items for which',\n And: 'and',\n Sum: 'Sum',\n Count: 'Count',\n DistinctCount: 'Distinct Count',\n Product: 'Product',\n Avg: 'Avg',\n Median: 'Median',\n Min: 'Min',\n Max: 'Max',\n Index: 'Index',\n SampleStDev: 'Sample StDev',\n PopulationStDev: 'Population StDev',\n SampleVar: 'Sample Var',\n PopulationVar: 'Population Var',\n RunningTotals: 'Running Totals',\n DifferenceFrom: 'Difference From',\n PercentageOfDifferenceFrom: '% of Difference From',\n PercentageOfGrandTotal: '% of Grand Total',\n PercentageOfColumnTotal: '% of Column Total',\n PercentageOfRowTotal: '% of Row Total',\n PercentageOfParentTotal: '% of Parent Total',\n PercentageOfParentColumnTotal: '% of Parent Column Total',\n PercentageOfParentRowTotal: '% of Parent Row Total',\n MoreOption: 'More...',\n Years: 'Years',\n Quarters: 'Quarters',\n Months: 'Months',\n Days: 'Days',\n Hours: 'Hours',\n Minutes: 'Minutes',\n Seconds: 'Seconds',\n apply: 'Apply',\n valueFieldSettings: 'Value field settings',\n sourceName: 'Field name :',\n sourceCaption: 'Field caption',\n summarizeValuesBy: 'Summarize values by',\n baseField: 'Base field',\n baseItem: 'Base item',\n example: 'e.g:',\n editorDataLimitMsg: ' more items. Search to refine further.',\n deferLayoutUpdate: 'Defer Layout Update',\n null: 'null',\n undefined: 'undefined',\n groupOutOfRange: 'Out of Range',\n fieldDropErrorAction: 'The field you are moving cannot be placed in that area of the report',\n memberType: 'Field Type',\n selectedHierarchy: 'Parent Hierarchy',\n formatString: 'Format',\n expressionField: 'Expression',\n olapDropText: 'Example: [Measures].[Order Quantity] + ([Measures].[Order Quantity] * 0.10)',\n customFormat: 'Enter custom format string',\n numberFormatString: 'Example: C, P, 0000 %, ###0.##0#, etc.',\n Measure: 'Measure',\n Dimension: 'Dimension',\n Standard: 'Standard',\n Currency: 'Currency',\n Percent: 'Percent',\n Custom: 'Custom',\n blank: '(Blank)',\n fieldTooltip: 'Drag and drop fields to create an expression. ' +\n 'And, if you want to edit the existing calculated fields! ' +\n 'You can achieve it by simply selecting the field under \"Calculated Members\".',\n fieldTitle: 'Field Name',\n QuarterYear: 'Quarter Year',\n caption: 'Field Caption',\n copy: 'Copy',\n of: 'of',\n group: 'Group',\n removeCalculatedField: 'Are you sure you want to delete this calculated field?',\n yes: 'Yes',\n no: 'No'\n };\n /* eslint-enable */\n this.localeObj = new L10n(this.getModuleName(), this.defaultLocale, this.locale);\n this.isDragging = false;\n this.captionData = [];\n this.wireEvent();\n };\n PivotFieldList.prototype.frameCustomProperties = function (fieldListData, fieldList) {\n if (this.pivotGridModule) {\n this.pivotGridModule.updatePageSettings(false);\n }\n var pageSettings = this.pivotGridModule ? this.pivotGridModule.pageSettings : this.pageSettings;\n var localeObj = this.pivotGridModule ? this.pivotGridModule.localeObj :\n (this.staticPivotGridModule ? this.staticPivotGridModule.localeObj : this.localeObj);\n var isDrillThrough = this.pivotGridModule ?\n (this.pivotGridModule.allowDrillThrough || this.pivotGridModule.editSettings.allowEditing) : true;\n var enableValueSorting = this.pivotGridModule ? this.pivotGridModule.enableValueSorting : undefined;\n var customProperties;\n if (this.dataType === 'olap') {\n customProperties = {\n mode: '',\n savedFieldList: fieldList ? fieldList : undefined,\n savedFieldListData: fieldListData ? fieldListData : undefined,\n pageSettings: pageSettings,\n enableValueSorting: enableValueSorting,\n isDrillThrough: isDrillThrough,\n localeObj: localeObj\n };\n }\n else {\n customProperties = {\n mode: '',\n savedFieldList: undefined,\n pageSettings: pageSettings,\n enableValueSorting: enableValueSorting,\n isDrillThrough: isDrillThrough,\n localeObj: localeObj,\n clonedReport: this.clonedReport\n };\n }\n return customProperties;\n };\n /* eslint-disable */\n /**\n * Initialize the control rendering\n * @returns {void}\n * @private\n */\n PivotFieldList.prototype.render = function () {\n if (this.dataType === 'pivot' && this.dataSourceSettings.url && this.dataSourceSettings.url !== '') {\n if (this.dataSourceSettings.mode === 'Server') {\n this.guid = PivotUtil.generateUUID();\n this.getEngine('initialRender', null, null, null, null, null, null);\n }\n else {\n this.request.open(\"GET\", this.dataSourceSettings.url, true);\n this.request.withCredentials = false;\n this.request.onreadystatechange = this.onReadyStateChange.bind(this);\n this.request.setRequestHeader(\"Content-type\", \"text/plain\");\n this.request.send(null);\n }\n }\n else {\n this.initialLoad();\n }\n };\n /**\n * @hidden\n */\n PivotFieldList.prototype.getEngine = function (action, drillItem, sortItem, aggField, cField, filterItem, memberName, rawDataArgs, editArgs) {\n var _this = this;\n this.currentAction = action;\n if (this.pivotGridModule) {\n this.pivotGridModule.updatePageSettings(false);\n }\n var customProperties = {\n pageSettings: this.pivotGridModule ? this.pivotGridModule.pageSettings : undefined,\n enableValueSorting: this.pivotGridModule ? this.pivotGridModule.enableValueSorting : undefined,\n enableDrillThrough: this.pivotGridModule ?\n (this.pivotGridModule.allowDrillThrough || this.pivotGridModule.editSettings.allowEditing) : true,\n locale: JSON.stringify(PivotUtil.getLocalizedObject(this))\n };\n this.request.open(\"POST\", this.dataSourceSettings.url, true);\n var params = {\n request: this.request,\n dataSourceSettings: JSON.parse(this.getPersistData()).dataSourceSettings,\n action: action,\n customProperties: {},\n internalProperties: customProperties,\n drillItem: drillItem,\n sortItem: sortItem,\n aggregatedItem: aggField,\n calculatedItem: cField,\n filterItem: filterItem,\n memberName: memberName,\n fetchRawDataArgs: rawDataArgs,\n editArgs: editArgs,\n hash: this.guid\n };\n this.trigger(events.beforeServiceInvoke, params, function (observedArgs) {\n _this.request = observedArgs.request;\n params.internalProperties = observedArgs.internalProperties;\n params.customProperties = observedArgs.customProperties;\n params.dataSourceSettings = observedArgs.dataSourceSettings;\n params.calculatedItem = observedArgs.calculatedItem;\n params.drillItem = observedArgs.drillItem;\n params.editArgs = observedArgs.editArgs;\n params.fetchRawDataArgs = observedArgs.fetchRawDataArgs;\n params.filterItem = observedArgs.filterItem;\n params.hash = observedArgs.hash;\n params.memberName = observedArgs.memberName;\n params.sortItem = observedArgs.sortItem;\n });\n this.request.withCredentials = false;\n this.request.onreadystatechange = this.onSuccess.bind(this);\n this.request.setRequestHeader(\"Content-type\", \"application/json\");\n this.request.send(JSON.stringify(params));\n };\n PivotFieldList.prototype.onSuccess = function () {\n if (this.request.readyState === XMLHttpRequest.DONE) {\n try {\n var engine = JSON.parse(this.request.responseText);\n if (this.currentAction === 'fetchFieldMembers') {\n var currentMembers = JSON.parse(engine.members);\n var dateMembers = [];\n var formattedMembers = {};\n var members = {};\n for (var i = 0; i < currentMembers.length; i++) {\n dateMembers.push({ formattedText: currentMembers[i].FormattedText, actualText: currentMembers[i].ActualText });\n formattedMembers[currentMembers[i].FormattedText] = {};\n members[currentMembers[i].ActualText] = {};\n }\n this.engineModule.fieldList[engine.memberName].dateMember = dateMembers;\n this.engineModule.fieldList[engine.memberName].formattedMembers = formattedMembers;\n this.engineModule.fieldList[engine.memberName].members = members;\n this.pivotButtonModule.updateFilterEvents();\n }\n else {\n var fList = PivotUtil.formatFieldList(JSON.parse(engine.fieldList));\n if (this.engineModule.fieldList) {\n var keys = Object.keys(this.engineModule.fieldList);\n for (var i = 0; i < keys.length; i++) {\n if (this.engineModule.fieldList[keys[i]] && fList[keys[i]]) {\n fList[keys[i]].dateMember = this.engineModule.fieldList[keys[i]].dateMember;\n fList[keys[i]].formattedMembers = this.engineModule.fieldList[keys[i]].formattedMembers;\n fList[keys[i]].members = this.engineModule.fieldList[keys[i]].members;\n }\n }\n }\n this.engineModule.fieldList = fList;\n this.engineModule.fields = JSON.parse(engine.fields);\n this.engineModule.rowCount = JSON.parse(engine.pivotCount).RowCount;\n this.engineModule.columnCount = JSON.parse(engine.pivotCount).ColumnCount;\n this.engineModule.rowStartPos = JSON.parse(engine.pivotCount).RowStartPosition;\n this.engineModule.colStartPos = JSON.parse(engine.pivotCount).ColumnStartPosition;\n this.engineModule.rowFirstLvl = JSON.parse(engine.pivotCount).RowFirstLevel;\n this.engineModule.colFirstLvl = JSON.parse(engine.pivotCount).ColumnFirstLevel;\n var rowPos = void 0;\n var pivotValues = PivotUtil.formatPivotValues(JSON.parse(engine.pivotValue));\n for (var rCnt = 0; rCnt < pivotValues.length; rCnt++) {\n if (pivotValues[rCnt] && pivotValues[rCnt][0] && pivotValues[rCnt][0].axis === 'row') {\n rowPos = rCnt;\n break;\n }\n }\n this.engineModule.headerContent = PivotUtil.frameContent(pivotValues, 'header', rowPos, this);\n this.engineModule.pageSettings = this.pivotGridModule ? this.pivotGridModule.pageSettings : undefined;\n var valueSort = JSON.parse(engine.dataSourceSettings).ValueSortSettings;\n this.engineModule.valueSortSettings = {\n headerText: valueSort.HeaderText,\n headerDelimiter: valueSort.HeaderDelimiter,\n sortOrder: valueSort.SortOrder,\n columnIndex: valueSort.ColumnIndex\n };\n this.engineModule.pivotValues = pivotValues;\n }\n }\n catch (error) {\n this.engineModule.pivotValues = [];\n }\n if (this.currentAction !== 'fetchFieldMembers') {\n this.initEngine();\n if (this.calculatedFieldModule && this.calculatedFieldModule.isRequireUpdate) {\n this.calculatedFieldModule.endDialog();\n this.calculatedFieldModule.isRequireUpdate = false;\n }\n if (this.pivotGridModule && this.pivotGridModule.calculatedFieldModule && this.pivotGridModule.calculatedFieldModule.isRequireUpdate) {\n this.pivotGridModule.calculatedFieldModule.endDialog();\n this.pivotGridModule.calculatedFieldModule.isRequireUpdate = false;\n }\n }\n }\n };\n PivotFieldList.prototype.onReadyStateChange = function () {\n if (this.request.readyState === XMLHttpRequest.DONE) {\n var dataSource = [];\n if (this.dataSourceSettings.type === 'CSV') {\n var jsonObject = this.request.responseText.split(/\\r?\\n|\\r/);\n for (var i = 0; i < jsonObject.length; i++) {\n if (!isNullOrUndefined(jsonObject[i]) && jsonObject[i] !== '') {\n dataSource.push(jsonObject[i].split(','));\n }\n }\n }\n else {\n try {\n dataSource = JSON.parse(this.request.responseText);\n }\n catch (error) {\n dataSource = [];\n }\n }\n if (isBlazor() && dataSource && dataSource.length > 0) {\n this.remoteData = dataSource;\n }\n else if (dataSource && dataSource.length > 0) {\n this.setProperties({ dataSourceSettings: { dataSource: dataSource } }, true);\n }\n this.initialLoad();\n }\n };\n PivotFieldList.prototype.initialLoad = function () {\n var _this = this;\n this.trigger(events.load, { dataSourceSettings: isBlazor() ? PivotUtil.getClonedDataSourceSettings(this.dataSourceSettings) : this.dataSourceSettings }, function (observedArgs) {\n if (isBlazor()) {\n observedArgs.dataSourceSettings.dataSource = _this.dataSourceSettings.dataSource;\n }\n _this.dataSourceSettings = observedArgs.dataSourceSettings;\n addClass([_this.element], cls.ROOT);\n if (_this.enableRtl) {\n addClass([_this.element], cls.RTL);\n }\n else {\n removeClass([_this.element], cls.RTL);\n }\n if (_this.isAdaptive) {\n addClass([_this.element], cls.DEVICE);\n }\n else {\n removeClass([_this.element], cls.DEVICE);\n }\n if (_this.cssClass) {\n addClass([_this.element], _this.cssClass);\n }\n _this.notify(events.initialLoad, {});\n });\n if (isBlazor()) {\n this.renderComplete();\n }\n };\n /**\n * Binding events to the Pivot Field List element.\n * @hidden\n */\n PivotFieldList.prototype.wireEvent = function () {\n this.on(events.initialLoad, this.generateData, this);\n this.on(events.dataReady, this.fieldListRender, this);\n };\n /**\n * Unbinding events from the element on widget destroy.\n * @hidden\n */\n PivotFieldList.prototype.unWireEvent = function () {\n if (this.pivotGridModule && this.pivotGridModule.isDestroyed) {\n return;\n }\n this.off(events.initialLoad, this.generateData);\n this.off(events.dataReady, this.fieldListRender);\n };\n /**\n * Get the properties to be maintained in the persisted state.\n * @returns {string}\n */\n PivotFieldList.prototype.getPersistData = function () {\n var keyEntity = ['dataSourceSettings'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Get component name.\n * @returns string\n * @private\n */\n PivotFieldList.prototype.getModuleName = function () {\n return 'pivotfieldlist';\n };\n /**\n * Called internally if any of the property value changed.\n * @hidden\n */\n PivotFieldList.prototype.onPropertyChanged = function (newProp, oldProp) {\n var requireRefresh = false;\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'locale':\n if (isBlazor()) {\n break;\n }\n else {\n _super.prototype.refresh.call(this);\n }\n break;\n case 'dataSourceSettings':\n if (!isNullOrUndefined(newProp.dataSourceSettings.dataSource)) {\n if (!isNullOrUndefined(this.savedDataSourceSettings)) {\n PivotUtil.updateDataSourceSettings(this.staticPivotGridModule, this.savedDataSourceSettings);\n this.savedDataSourceSettings = undefined;\n }\n if (newProp.dataSourceSettings.dataSource && newProp.dataSourceSettings.dataSource.length === 0 && !isNullOrUndefined(this.staticPivotGridModule)) {\n this.savedDataSourceSettings = PivotUtil.getClonedDataSourceSettings(this.staticPivotGridModule.dataSourceSettings);\n this.staticPivotGridModule.setProperties({ dataSourceSettings: { rows: [] } }, true);\n this.staticPivotGridModule.setProperties({ dataSourceSettings: { columns: [] } }, true);\n this.staticPivotGridModule.setProperties({ dataSourceSettings: { values: [] } }, true);\n this.staticPivotGridModule.setProperties({ dataSourceSettings: { filters: [] } }, true);\n }\n this.engineModule.fieldList = null;\n if (!isNullOrUndefined(this.staticPivotGridModule)) {\n this.staticPivotGridModule.pivotValues = [];\n }\n this.initEngine();\n }\n if (PivotUtil.isButtonIconRefesh(prop, oldProp, newProp)) {\n if (this.isPopupView && this.pivotGridModule &&\n this.pivotGridModule.showGroupingBar && this.pivotGridModule.groupingBarModule) {\n var filters = PivotUtil.cloneFieldSettings(this.dataSourceSettings.filters);\n var values = PivotUtil.cloneFieldSettings(this.dataSourceSettings.values);\n var rows = PivotUtil.cloneFieldSettings(this.dataSourceSettings.rows);\n var columns = PivotUtil.cloneFieldSettings(this.dataSourceSettings.columns);\n this.pivotGridModule.setProperties({ dataSourceSettings: { rows: rows, columns: columns, values: values, filters: filters } }, true);\n this.pivotGridModule.axisFieldModule.render();\n }\n else if (!this.isPopupView && this.staticPivotGridModule && !this.staticPivotGridModule.isDestroyed) {\n var pivot = this.staticPivotGridModule;\n if (pivot.showGroupingBar && pivot.groupingBarModule) {\n pivot.axisFieldModule.render();\n }\n if (pivot.showFieldList && pivot.pivotFieldListModule) {\n var rows = PivotUtil.cloneFieldSettings(pivot.dataSourceSettings.rows);\n var columns = PivotUtil.cloneFieldSettings(pivot.dataSourceSettings.columns);\n var values = PivotUtil.cloneFieldSettings(pivot.dataSourceSettings.values);\n var filters = PivotUtil.cloneFieldSettings(pivot.dataSourceSettings.filters);\n pivot.pivotFieldListModule.setProperties({ dataSourceSettings: { rows: rows, columns: columns, values: values, filters: filters } }, true);\n pivot.pivotFieldListModule.axisFieldModule.render();\n if (pivot.pivotFieldListModule.treeViewModule.fieldTable && !pivot.isAdaptive) {\n pivot.pivotFieldListModule.notify(events.treeViewUpdate, {});\n }\n }\n }\n this.axisFieldModule.render();\n if (this.treeViewModule.fieldTable && !this.isAdaptive) {\n this.notify(events.treeViewUpdate, {});\n }\n }\n break;\n case 'aggregateTypes':\n if (this.axisFieldModule) {\n this.axisFieldModule.render();\n }\n if (this.pivotGridModule && this.pivotGridModule.axisFieldModule) {\n this.pivotGridModule.setProperties({ aggregateTypes: newProp.aggregateTypes }, true);\n this.pivotGridModule.axisFieldModule.render();\n }\n break;\n case 'enableRtl':\n if (this.enableRtl) {\n addClass([this.element], cls.RTL);\n }\n else {\n removeClass([this.element], cls.RTL);\n }\n requireRefresh = true;\n break;\n }\n if (requireRefresh) {\n this.fieldListRender();\n }\n }\n };\n /* eslint-disable */\n PivotFieldList.prototype.initEngine = function () {\n var _this = this;\n if (this.dataType === 'pivot') {\n var data = !isNullOrUndefined(this.dataSourceSettings.dataSource) ? this.dataSourceSettings.dataSource[0] :\n !isNullOrUndefined(this.engineModule.data) ? this.engineModule.data[0] : undefined;\n if (data && this.pivotCommon) {\n var isArray = Object.prototype.toString.call(data) == '[object Array]';\n if (isArray && this.dataSourceSettings.type === 'JSON') {\n this.pivotCommon.errorDialog.createErrorDialog(this.localeObj.getConstant('error'), this.localeObj.getConstant('invalidJSON'));\n return;\n }\n else if (!isArray && this.dataSourceSettings.type === 'CSV') {\n this.pivotCommon.errorDialog.createErrorDialog(this.localeObj.getConstant('error'), this.localeObj.getConstant('invalidCSV'));\n return;\n }\n }\n }\n var args = {\n dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.dataSourceSettings)\n };\n var control = this.isPopupView ? this.pivotGridModule : this;\n control.trigger(events.enginePopulating, args, function (observedArgs) {\n PivotUtil.updateDataSourceSettings(_this, observedArgs.dataSourceSettings);\n if (_this.dataType === 'pivot') {\n if (_this.dataSourceSettings.groupSettings && _this.dataSourceSettings.groupSettings.length > 0) {\n var pivotDataSet = void 0;\n if (isBlazor()) {\n pivotDataSet = _this.engineModule.data;\n }\n else {\n pivotDataSet = _this.dataSourceSettings.dataSource;\n }\n _this.clonedDataSet = (_this.clonedDataSet ? _this.clonedDataSet : PivotUtil.getClonedData(pivotDataSet));\n if (isBlazor()) {\n _this.clonedReport = _this.clonedReport ? _this.clonedReport : extend({}, _this.dataSourceSettings, null, true);\n }\n else {\n var dataSourceSettings = JSON.parse(_this.getPersistData()).dataSourceSettings;\n dataSourceSettings.dataSource = [];\n _this.clonedReport = _this.clonedReport ? _this.clonedReport : dataSourceSettings;\n }\n }\n var customProperties = _this.frameCustomProperties();\n customProperties.enableValueSorting = _this.staticPivotGridModule ?\n _this.staticPivotGridModule.enableValueSorting : _this.enableValueSorting;\n if (_this.dataSourceSettings.mode !== 'Server') {\n _this.engineModule.renderEngine(_this.dataSourceSettings, customProperties, _this.getValueCellInfo.bind(_this));\n }\n _this.pivotFieldList = _this.engineModule.fieldList;\n var eventArgs = {\n pivotFieldList: _this.pivotFieldList,\n pivotValues: _this.engineModule.pivotValues\n };\n var this$_1 = _this;\n control.trigger(events.enginePopulated, eventArgs, function (observedArgs) {\n this$_1.pivotFieldList = observedArgs.pivotFieldList;\n this$_1.engineModule.pivotValues = isBlazor() ? _this.engineModule.pivotValues : observedArgs.pivotValues;\n this$_1.notify(events.dataReady, {});\n this$_1.trigger(events.dataBound);\n });\n }\n else if (_this.dataType === 'olap') {\n _this.olapEngineModule.renderEngine(_this.dataSourceSettings, _this.frameCustomProperties(_this.olapEngineModule.fieldListData, _this.olapEngineModule.fieldList));\n _this.pivotFieldList = _this.olapEngineModule.fieldList;\n var eventArgs = {\n pivotFieldList: _this.pivotFieldList,\n pivotValues: _this.olapEngineModule.pivotValues\n };\n var this$_2 = _this;\n control.trigger(events.enginePopulated, eventArgs, function (observedArgs) {\n this$_2.pivotFieldList = observedArgs.pivotFieldList;\n this$_2.olapEngineModule.pivotValues = isBlazor() ? _this.olapEngineModule.pivotValues : observedArgs.pivotValues;\n this$_2.notify(events.dataReady, {});\n this$_2.trigger(events.dataBound);\n });\n }\n });\n };\n /* eslint-enable */\n PivotFieldList.prototype.generateData = function () {\n this.pivotFieldList = {};\n if (this.dataSourceSettings && (this.dataSourceSettings.dataSource || this.dataSourceSettings.url)) {\n if ((this.dataSourceSettings.url !== '' && this.dataType === 'olap') ||\n this.dataSourceSettings.dataSource.length > 0) {\n if (this.dataType === 'pivot') {\n this.engineModule.data = this.dataSourceSettings.dataSource;\n }\n this.initEngine();\n }\n else if (this.dataSourceSettings.dataSource instanceof DataManager) {\n if (this.dataType === 'pivot' && this.remoteData.length > 0) {\n this.engineModule.data = this.remoteData;\n this.initEngine();\n }\n else {\n setTimeout(this.getData.bind(this), 100);\n }\n }\n }\n else if (isBlazor() && this.dataType === 'pivot' &&\n this.engineModule.data && this.engineModule.data.length > 0) {\n this.initEngine();\n }\n else {\n this.notify(events.dataReady, {});\n this.trigger(events.dataBound);\n }\n };\n PivotFieldList.prototype.getValueCellInfo = function (aggregateObj) {\n var args = aggregateObj;\n this.trigger(events.aggregateCellInfo, args);\n return args;\n };\n PivotFieldList.prototype.getData = function () {\n this.dataSourceSettings.dataSource.executeQuery(new Query()).then(this.executeQuery.bind(this));\n };\n PivotFieldList.prototype.executeQuery = function (e) {\n this.engineModule.data = e.result;\n this.initEngine();\n };\n PivotFieldList.prototype.fieldListRender = function () {\n this.element.innerHTML = '';\n var showDialog;\n if (this.renderMode === 'Popup' && this.dialogRenderer.fieldListDialog && !this.dialogRenderer.fieldListDialog.isDestroyed) {\n showDialog = this.dialogRenderer.fieldListDialog.visible;\n this.dialogRenderer.fieldListDialog.destroy();\n remove(document.getElementById(this.element.id + '_Wrapper'));\n }\n this.renderModule.render();\n if (this.renderMode === 'Popup') {\n this.fieldListSpinnerElement = this.dialogRenderer.fieldListDialog.element;\n if (showDialog) {\n this.dialogRenderer.fieldListDialog.show();\n }\n }\n else {\n this.fieldListSpinnerElement = this.element.querySelector('.e-pivotfieldlist-wrapper');\n }\n if (this.spinnerTemplate) {\n createSpinner({ target: this.fieldListSpinnerElement, template: this.spinnerTemplate }, this.createElement);\n }\n else {\n createSpinner({ target: this.fieldListSpinnerElement }, this.createElement);\n }\n var args;\n args = {\n pivotEngine: this.dataType === 'olap' ? this.olapEngineModule : this.engineModule,\n dataSourceSettings: this.dataSourceSettings,\n id: this.element.id,\n element: document.getElementById(this.element.id + '_Wrapper'),\n moduleName: this.getModuleName(),\n enableRtl: this.enableRtl,\n isAdaptive: this.isAdaptive,\n renderMode: this.renderMode,\n localeObj: this.localeObj,\n dataType: this.dataType\n };\n this.pivotCommon = new PivotCommon(args);\n this.pivotCommon.control = this;\n if (this.allowDeferLayoutUpdate) {\n this.clonedDataSource = extend({}, this.dataSourceSettings, null, true);\n this.clonedFieldList = extend({}, this.pivotFieldList, null, true);\n }\n };\n PivotFieldList.prototype.getFieldCaption = function (dataSourceSettings) {\n this.getFields(dataSourceSettings);\n if (this.captionData.length > 0) {\n var lnt = this.captionData.length;\n var engineModule = this.dataType === 'olap' ? this.olapEngineModule : this.engineModule;\n while (lnt--) {\n if (this.captionData[lnt]) {\n for (var _i = 0, _a = this.captionData[lnt]; _i < _a.length; _i++) {\n var obj = _a[_i];\n if (obj) {\n if (engineModule.fieldList[obj.name]) {\n if (obj.caption) {\n engineModule.fieldList[obj.name].caption = obj.caption;\n }\n else {\n engineModule.fieldList[obj.name].caption = obj.name;\n }\n }\n }\n }\n }\n }\n }\n else {\n return;\n }\n };\n PivotFieldList.prototype.getFields = function (dataSourceSettings) {\n this.captionData =\n [dataSourceSettings.rows, dataSourceSettings.columns, dataSourceSettings.values, dataSourceSettings.filters]; /* eslint-disable-line */\n };\n /* eslint-disable */\n /**\n * Updates the PivotEngine using dataSource from Pivot Field List component.\n * @function updateDataSource\n * @returns {void}\n * @hidden\n */\n PivotFieldList.prototype.updateDataSource = function (isTreeViewRefresh, isEngineRefresh) {\n var _this = this;\n if (this.pivotGridModule) {\n this.pivotGridModule.showWaitingPopup();\n }\n showSpinner(this.fieldListSpinnerElement);\n var pivot = this;\n var control = pivot.isPopupView ? pivot.pivotGridModule : pivot;\n //setTimeout(() => {\n var isOlapDataRefreshed = false;\n var pageSettings = pivot.pivotGridModule && pivot.pivotGridModule.enableVirtualization ?\n pivot.pivotGridModule.pageSettings : undefined;\n var isCalcChange = Object.keys(pivot.lastCalcFieldInfo).length > 0 ? true : false;\n var isSorted = Object.keys(pivot.lastSortInfo).length > 0 ? true : false;\n var isAggChange = Object.keys(pivot.lastAggregationInfo).length > 0 ? true : false;\n var isFiltered = Object.keys(pivot.lastFilterInfo).length > 0 ? true : false;\n var args = {\n dataSourceSettings: PivotUtil.getClonedDataSourceSettings(pivot.dataSourceSettings)\n };\n control.trigger(events.enginePopulating, args, function (observedArgs) {\n if (!(pageSettings && (isSorted || isFiltered || isAggChange || isCalcChange))) {\n PivotUtil.updateDataSourceSettings(pivot, observedArgs.dataSourceSettings);\n PivotUtil.updateDataSourceSettings(pivot.pivotGridModule, observedArgs.dataSourceSettings);\n }\n if (isNullOrUndefined(isEngineRefresh)) {\n if (pivot.dataType === 'pivot') {\n var customProperties = pivot.frameCustomProperties();\n if (!isSorted) {\n customProperties.enableValueSorting = pivot.staticPivotGridModule ?\n pivot.staticPivotGridModule.enableValueSorting : pivot.enableValueSorting;\n }\n else {\n pivot.setProperties({ dataSourceSettings: { valueSortSettings: { headerText: '' } } }, true);\n customProperties.enableValueSorting = false;\n }\n customProperties.savedFieldList = pivot.pivotFieldList;\n if (pageSettings && (isSorted || isFiltered || isAggChange || isCalcChange)) {\n var interopArguments = {};\n if (isSorted) {\n pivot.pivotGridModule.setProperties({ dataSourceSettings: { valueSortSettings: { headerText: '' } } }, true);\n if ((isBlazor())) {\n interopArguments = { 'key': 'onSort', 'arg': pivot.lastSortInfo };\n }\n else if (control.dataSourceSettings.mode === 'Server') {\n control.getEngine('onSort', null, pivot.lastSortInfo, null, null, null, null);\n }\n else {\n pivot.engineModule.onSort(pivot.lastSortInfo);\n }\n pivot.lastSortInfo = {};\n }\n if (isFiltered) {\n if (isBlazor()) {\n var dataArgs = window['sfBlazor'].copyWithoutCircularReferences([pivot.dataSourceSettings.filterSettings], pivot.dataSourceSettings.filterSettings);\n interopArguments = {\n 'key': 'onFilter',\n 'arg': { 'lastFilterInfo': pivot.lastFilterInfo, 'filterSettings': dataArgs }\n };\n }\n else if (control.dataSourceSettings.mode === 'Server') {\n control.getEngine('onFilter', null, null, null, null, pivot.lastFilterInfo, null);\n }\n else {\n pivot.engineModule.onFilter(pivot.lastFilterInfo, pivot.dataSourceSettings);\n }\n pivot.lastFilterInfo = {};\n }\n if (isAggChange) {\n if (isBlazor()) {\n interopArguments = { 'key': 'onAggregation', 'arg': pivot.lastAggregationInfo };\n }\n else if (control.dataSourceSettings.mode === 'Server') {\n control.getEngine('onAggregation', null, null, pivot.lastAggregationInfo, null, null, null);\n }\n else {\n pivot.engineModule.onAggregation(pivot.lastAggregationInfo);\n }\n pivot.lastAggregationInfo = {};\n }\n if (isCalcChange) {\n if (isBlazor()) {\n interopArguments = {\n 'key': 'onCalcOperation',\n 'arg': {\n lastCalcFieldInfo: pivot.lastCalcFieldInfo,\n values: pivot.dataSourceSettings.values,\n calculatedFieldSettings: pivot.dataSourceSettings.calculatedFieldSettings\n }\n };\n }\n else if (control.dataSourceSettings.mode === 'Server') {\n control.getEngine('onCalcOperation', null, null, null, pivot.lastCalcFieldInfo, null, null);\n }\n else {\n pivot.engineModule.onCalcOperation(pivot.lastCalcFieldInfo);\n }\n pivot.lastCalcFieldInfo = {};\n }\n if (isBlazor()) {\n var args_1 = window['sfBlazor'].copyWithoutCircularReferences([interopArguments['arg']], interopArguments['arg']);\n pivot.pivotGridModule.interopAdaptor.invokeMethodAsync(\"PivotInteropMethod\", interopArguments['key'], args_1).then(function (data) {\n if (data === 0) {\n _this.pivotCommon.errorDialog.createErrorDialog(_this.localeObj.getConstant('error'), (pivot.dataSourceSettings.type === 'CSV' ?\n _this.localeObj.getConstant('invalidCSV') : _this.localeObj.getConstant('invalidJSON')));\n return;\n }\n else {\n pivot.pivotGridModule.updateBlazorData(data, pivot.pivotGridModule);\n pivot.getFieldCaption(pivot.dataSourceSettings);\n pivot.enginePopulatedEventMethod(pivot, isTreeViewRefresh, isOlapDataRefreshed);\n if (pivot.calculatedFieldModule && pivot.calculatedFieldModule.isRequireUpdate) {\n pivot.calculatedFieldModule.endDialog();\n pivot.calculatedFieldModule.isRequireUpdate = false;\n }\n }\n });\n }\n }\n else {\n if (isBlazor() && pageSettings) {\n var dataArgs = window['sfBlazor'].copyWithoutCircularReferences([pivot.dataSourceSettings.properties], pivot.dataSourceSettings.properties);\n pivot.pivotGridModule.interopAdaptor.invokeMethodAsync(\"PivotInteropMethod\", 'renderEngine', { 'dataSourceSettings': dataArgs, 'customProperties': customProperties }).then(function (data) {\n if (data === 0) {\n _this.pivotCommon.errorDialog.createErrorDialog(_this.localeObj.getConstant('error'), (pivot.dataSourceSettings.type === 'CSV' ?\n _this.localeObj.getConstant('invalidCSV') : _this.localeObj.getConstant('invalidJSON')));\n return;\n }\n else {\n pivot.pivotGridModule.updateBlazorData(data, pivot.pivotGridModule);\n pivot.getFieldCaption(pivot.dataSourceSettings);\n pivot.enginePopulatedEventMethod(pivot, isTreeViewRefresh, isOlapDataRefreshed);\n }\n });\n }\n else if (pivot.dataSourceSettings.mode === 'Server') {\n if (isSorted)\n control.getEngine('onSort', null, pivot.lastSortInfo, null, null, null, null);\n else if (isAggChange)\n control.getEngine('onAggregation', null, null, pivot.lastAggregationInfo, null, null, null);\n else if (isCalcChange)\n control.getEngine('onCalcOperation', null, null, null, pivot.lastCalcFieldInfo, null, null);\n else if (isFiltered)\n control.getEngine('onFilter', null, null, null, null, pivot.lastFilterInfo, null);\n else\n control.getEngine('onDrop', null, null, null, null, null, null);\n pivot.lastSortInfo = {};\n pivot.lastAggregationInfo = {};\n pivot.lastCalcFieldInfo = {};\n pivot.lastFilterInfo = {};\n }\n else {\n pivot.engineModule.renderEngine(pivot.dataSourceSettings, customProperties, pivot.getValueCellInfo.bind(pivot));\n }\n }\n }\n else {\n isOlapDataRefreshed = pivot.updateOlapDataSource(pivot, isSorted, isCalcChange, isOlapDataRefreshed);\n }\n if (!(isBlazor() && pageSettings)) {\n pivot.getFieldCaption(pivot.dataSourceSettings);\n }\n }\n else {\n pivot.axisFieldModule.render();\n pivot.isRequiredUpdate = false;\n }\n if (!(isBlazor() && pageSettings)) {\n pivot.enginePopulatedEventMethod(pivot, isTreeViewRefresh, isOlapDataRefreshed);\n }\n });\n //});\n };\n /* eslint-enable */\n PivotFieldList.prototype.enginePopulatedEventMethod = function (pivot, isTreeViewRefresh, isOlapDataRefreshed) {\n var _this = this;\n var control = pivot.isPopupView ? pivot.pivotGridModule : pivot;\n var eventArgs = {\n dataSourceSettings: pivot.dataSourceSettings,\n pivotFieldList: pivot.dataType === 'pivot' ? pivot.engineModule.fieldList : pivot.olapEngineModule.fieldList,\n pivotValues: pivot.dataType === 'pivot' ? pivot.engineModule.pivotValues : pivot.olapEngineModule.pivotValues\n };\n control.trigger(events.enginePopulated, eventArgs, function (observedArgs) {\n var dataSource = pivot.dataSourceSettings.dataSource;\n if (isBlazor() && observedArgs.dataSourceSettings.dataSource instanceof Object) {\n observedArgs.dataSourceSettings.dataSource = dataSource;\n }\n pivot.dataSourceSettings = observedArgs.dataSourceSettings;\n pivot.pivotCommon.dataSourceSettings = pivot.dataSourceSettings;\n pivot.pivotFieldList = observedArgs.pivotFieldList;\n if (pivot.dataType === 'olap') {\n pivot.olapEngineModule.pivotValues = isBlazor() ? pivot.olapEngineModule.pivotValues : observedArgs.pivotValues;\n pivot.pivotCommon.engineModule = pivot.olapEngineModule;\n }\n else {\n pivot.engineModule.pivotValues = isBlazor() ? pivot.engineModule.pivotValues : observedArgs.pivotValues;\n pivot.pivotCommon.engineModule = pivot.engineModule;\n }\n if (!isTreeViewRefresh && pivot.treeViewModule.fieldTable && !pivot.isAdaptive) {\n pivot.notify(events.treeViewUpdate, {});\n }\n if (pivot.isRequiredUpdate) {\n if (pivot.allowDeferLayoutUpdate) {\n pivot.clonedDataSource = extend({}, pivot.dataSourceSettings, null, true);\n pivot.clonedFieldList = extend({}, pivot.pivotFieldList, null, true);\n }\n pivot.updateView(pivot.pivotGridModule);\n }\n else if (_this.isPopupView && pivot.allowDeferLayoutUpdate) {\n pivot.pivotGridModule.engineModule = pivot.engineModule;\n pivot.pivotGridModule.setProperties({\n dataSourceSettings: pivot.dataSourceSettings.properties /* eslint-disable-line */\n }, true);\n pivot.pivotGridModule.notify(events.uiUpdate, pivot);\n hideSpinner(pivot.fieldListSpinnerElement);\n }\n if (_this.isPopupView && pivot.pivotGridModule &&\n pivot.pivotGridModule.allowDeferLayoutUpdate && !pivot.isRequiredUpdate) {\n hideSpinner(pivot.fieldListSpinnerElement);\n pivot.pivotGridModule.hideWaitingPopup();\n }\n pivot.isRequiredUpdate = true;\n if (!pivot.pivotGridModule || isOlapDataRefreshed) {\n hideSpinner(pivot.fieldListSpinnerElement);\n }\n else {\n pivot.pivotGridModule.fieldListSpinnerElement = pivot.fieldListSpinnerElement;\n }\n });\n };\n PivotFieldList.prototype.updateOlapDataSource = function (pivot, isSorted, isCalcChange, isOlapDataRefreshed) {\n var customProperties = pivot.frameCustomProperties(pivot.olapEngineModule.fieldListData, pivot.olapEngineModule.fieldList);\n customProperties.savedFieldList = pivot.pivotFieldList;\n if (isCalcChange || isSorted) {\n pivot.olapEngineModule.savedFieldList = pivot.pivotFieldList;\n pivot.olapEngineModule.savedFieldListData = pivot.olapEngineModule.fieldListData;\n if (isCalcChange) {\n pivot.olapEngineModule.updateCalcFields(pivot.dataSourceSettings, pivot.lastCalcFieldInfo);\n pivot.lastCalcFieldInfo = {};\n isOlapDataRefreshed = pivot.olapEngineModule.dataFields[pivot.lastCalcFieldInfo.name] ? false : true;\n if (pivot.pivotGridModule) {\n pivot.pivotGridModule.hideWaitingPopup();\n }\n }\n else {\n pivot.olapEngineModule.onSort(pivot.dataSourceSettings);\n }\n }\n else {\n pivot.olapEngineModule.renderEngine(pivot.dataSourceSettings, customProperties);\n }\n return isOlapDataRefreshed;\n };\n /**\n * Updates the Pivot Field List component using dataSource from PivotView component.\n * @function update\n * @param {PivotView} control - Pass the instance of pivot table component.\n * @returns {void}\n */\n PivotFieldList.prototype.update = function (control) {\n if (isBlazor() && control !== undefined) {\n /* eslint-disable */\n var pivotId = control.ID;\n var pivotInstance = getInstance('#' + pivotId, PivotView);\n control = pivotInstance;\n /* eslint-enable */\n }\n if (control) {\n this.clonedDataSet = control.clonedDataSet;\n if (isBlazor() && !this.isPopupView) {\n PivotUtil.updateDataSourceSettings(this, PivotUtil.getClonedDataSourceSettings(control.dataSourceSettings));\n }\n else {\n this.setProperties({ dataSourceSettings: control.dataSourceSettings }, true);\n }\n this.engineModule = control.engineModule;\n this.olapEngineModule = control.olapEngineModule;\n this.dataType = control.dataType;\n this.pivotFieldList = this.dataType === 'olap' ? control.olapEngineModule.fieldList : control.engineModule.fieldList;\n if (this.isPopupView) {\n this.pivotGridModule = control;\n }\n else {\n this.staticPivotGridModule = control;\n }\n this.getFieldCaption(control.dataSourceSettings);\n this.pivotCommon.engineModule = this.dataType === 'olap' ? this.olapEngineModule : this.engineModule;\n this.pivotCommon.dataSourceSettings = this.dataSourceSettings;\n this.pivotCommon.control = this;\n if (this.treeViewModule.fieldTable && !this.isAdaptive) {\n this.notify(events.treeViewUpdate, {});\n }\n this.axisFieldModule.render();\n if (!this.isPopupView && this.allowDeferLayoutUpdate) {\n this.clonedDataSource = extend({}, this.dataSourceSettings, null, true);\n this.clonedFieldList = extend({}, this.pivotFieldList, null, true);\n }\n }\n };\n /**\n * Updates the PivotView component using dataSource from Pivot Field List component.\n * @function updateView\n * @param {PivotView} control - Pass the instance of pivot table component.\n * @returns {void}\n */\n PivotFieldList.prototype.updateView = function (control) {\n if (isBlazor() && control !== undefined) {\n /* eslint-disable */\n var pivotId = control.ID;\n var pivotInstance = getInstance('#' + pivotId, PivotView);\n control = pivotInstance;\n /* eslint-enable */\n }\n if (control) {\n control.clonedDataSet = this.clonedDataSet;\n if (isBlazor()) {\n PivotUtil.updateDataSourceSettings(control, PivotUtil.getClonedDataSourceSettings(this.dataSourceSettings));\n }\n else {\n control.setProperties({ dataSourceSettings: this.dataSourceSettings }, true);\n }\n control.engineModule = this.engineModule;\n control.olapEngineModule = this.olapEngineModule;\n control.dataType = this.dataType;\n if (!this.pivotChange) {\n control.pivotValues = this.dataType === 'olap' ? this.olapEngineModule.pivotValues : this.engineModule.pivotValues;\n }\n var eventArgs = {\n dataSourceSettings: PivotUtil.getClonedDataSourceSettings(control.dataSourceSettings),\n pivotValues: control.pivotValues\n };\n control.trigger(events.fieldListRefreshed, eventArgs);\n if (!this.isPopupView) {\n this.staticPivotGridModule = control;\n control.isStaticRefresh = true;\n }\n if (control.enableVirtualization && isBlazor()) {\n control.renderPivotGrid();\n }\n else {\n control.dataBind();\n }\n }\n };\n /* eslint-disable-next-line */\n /**\n * Called internally to trigger populate event.\n * @hidden\n */\n PivotFieldList.prototype.triggerPopulateEvent = function () {\n var _this = this;\n var control = this.isPopupView ? this.pivotGridModule : this;\n var eventArgs = {\n dataSourceSettings: this.dataSourceSettings,\n pivotFieldList: this.dataType === 'olap' ? this.olapEngineModule.fieldList : this.engineModule.fieldList,\n pivotValues: this.dataType === 'olap' ? this.olapEngineModule.pivotValues : this.engineModule.pivotValues\n };\n control.trigger(events.enginePopulated, eventArgs, function (observedArgs) {\n _this.dataSourceSettings = observedArgs.dataSourceSettings;\n _this.pivotFieldList = observedArgs.pivotFieldList;\n if (_this.dataType === 'olap') {\n _this.olapEngineModule.pivotValues = isBlazor() ? _this.olapEngineModule.pivotValues : observedArgs.pivotValues;\n }\n else {\n _this.engineModule.pivotValues = isBlazor() ? _this.engineModule.pivotValues : observedArgs.pivotValues;\n }\n });\n };\n /**\n * Destroys the Field Table component.\n * @function destroy\n * @returns {void}\n */\n PivotFieldList.prototype.destroy = function () {\n this.unWireEvent();\n if (this.engineModule) {\n this.engineModule.fieldList = {};\n this.engineModule.rMembers = null;\n this.engineModule.cMembers = null;\n this.engineModule.valueMatrix = null;\n this.engineModule.indexMatrix = null;\n this.engineModule = {};\n }\n if (this.olapEngineModule) {\n this.olapEngineModule.fieldList = {};\n this.olapEngineModule = {};\n }\n if (this.pivotFieldList) {\n this.pivotFieldList = {};\n }\n if (this.captionData) {\n this.captionData = null;\n }\n if (this.contextMenuModule) {\n this.contextMenuModule.destroy();\n }\n if (this.treeViewModule) {\n this.treeViewModule.destroy();\n }\n if (this.pivotButtonModule) {\n this.pivotButtonModule.destroy();\n }\n if (this.pivotCommon) {\n this.pivotCommon.destroy();\n }\n if (this.dialogRenderer) {\n this.dialogRenderer.destroy();\n }\n if (this.calculatedFieldModule) {\n this.calculatedFieldModule.destroy();\n }\n _super.prototype.destroy.call(this);\n if (this.contextMenuModule) {\n this.contextMenuModule = null;\n }\n if (this.treeViewModule) {\n this.treeViewModule = null;\n }\n if (this.pivotButtonModule) {\n this.pivotButtonModule = null;\n }\n if (this.pivotCommon) {\n this.pivotCommon = null;\n }\n if (this.dialogRenderer) {\n this.dialogRenderer = null;\n }\n if (this.calculatedFieldModule) {\n this.calculatedFieldModule = null;\n }\n if (this.axisFieldModule) {\n this.axisFieldModule = null;\n }\n if (this.axisTableModule) {\n this.axisTableModule = null;\n }\n if (this.renderModule) {\n this.renderModule = null;\n }\n if (this.clonedDataSet) {\n this.clonedDataSet = null;\n }\n if (this.clonedFieldList) {\n this.clonedFieldList = null;\n }\n if (this.localeObj) {\n this.localeObj = null;\n }\n if (this.defaultLocale) {\n this.defaultLocale = null;\n }\n this.element.innerHTML = '';\n removeClass([this.element], cls.ROOT);\n removeClass([this.element], cls.RTL);\n removeClass([this.element], cls.DEVICE);\n };\n __decorate([\n Complex({}, DataSourceSettings)\n ], PivotFieldList.prototype, \"dataSourceSettings\", void 0);\n __decorate([\n Property('Popup')\n ], PivotFieldList.prototype, \"renderMode\", void 0);\n __decorate([\n Property()\n ], PivotFieldList.prototype, \"target\", void 0);\n __decorate([\n Property('')\n ], PivotFieldList.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], PivotFieldList.prototype, \"allowCalculatedField\", void 0);\n __decorate([\n Property(false)\n ], PivotFieldList.prototype, \"showValuesButton\", void 0);\n __decorate([\n Property(false)\n ], PivotFieldList.prototype, \"allowDeferLayoutUpdate\", void 0);\n __decorate([\n Property(1000)\n ], PivotFieldList.prototype, \"maxNodeLimitInMemberEditor\", void 0);\n __decorate([\n Property(true)\n ], PivotFieldList.prototype, \"loadOnDemandInMemberEditor\", void 0);\n __decorate([\n Property()\n ], PivotFieldList.prototype, \"spinnerTemplate\", void 0);\n __decorate([\n Property(['Sum', 'Count', 'DistinctCount', 'Product', 'Min', 'Max', 'Avg', 'Median', 'Index', 'PopulationVar', 'SampleVar', 'PopulationStDev', 'SampleStDev', 'RunningTotals', 'PercentageOfGrandTotal', 'PercentageOfColumnTotal', 'PercentageOfRowTotal', 'PercentageOfParentColumnTotal', 'PercentageOfParentRowTotal', 'DifferenceFrom', 'PercentageOfDifferenceFrom', 'PercentageOfParentTotal'])\n ], PivotFieldList.prototype, \"aggregateTypes\", void 0);\n __decorate([\n Event()\n ], PivotFieldList.prototype, \"load\", void 0);\n __decorate([\n Event()\n ], PivotFieldList.prototype, \"enginePopulating\", void 0);\n __decorate([\n Event()\n ], PivotFieldList.prototype, \"memberFiltering\", void 0);\n __decorate([\n Event()\n ], PivotFieldList.prototype, \"enginePopulated\", void 0);\n __decorate([\n Event()\n ], PivotFieldList.prototype, \"onFieldDropped\", void 0);\n __decorate([\n Event()\n ], PivotFieldList.prototype, \"fieldDrop\", void 0);\n __decorate([\n Event()\n ], PivotFieldList.prototype, \"fieldDragStart\", void 0);\n __decorate([\n Event()\n ], PivotFieldList.prototype, \"aggregateCellInfo\", void 0);\n __decorate([\n Event()\n ], PivotFieldList.prototype, \"memberEditorOpen\", void 0);\n __decorate([\n Event()\n ], PivotFieldList.prototype, \"calculatedFieldCreate\", void 0);\n __decorate([\n Event()\n ], PivotFieldList.prototype, \"aggregateMenuOpen\", void 0);\n __decorate([\n Event()\n ], PivotFieldList.prototype, \"fieldRemove\", void 0);\n __decorate([\n Event()\n ], PivotFieldList.prototype, \"dataBound\", void 0);\n __decorate([\n Event()\n ], PivotFieldList.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], PivotFieldList.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], PivotFieldList.prototype, \"beforeServiceInvoke\", void 0);\n PivotFieldList = __decorate([\n NotifyPropertyChanges\n ], PivotFieldList);\n return PivotFieldList;\n}(Component));\nexport { PivotFieldList };\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 { PivotFieldList } from '@syncfusion/ej2-pivotview';\nimport { ComponentBase, applyMixins } from '@syncfusion/ej2-react-base';\n/**\n * `PivotFieldListComponent` represents the react PivotFieldList.\n * ```tsx\n *
\n * ```\n */\nvar PivotFieldListComponent = /** @class */ (function (_super) {\n __extends(PivotFieldListComponent, _super);\n function PivotFieldListComponent(props) {\n var _this = _super.call(this, props) || this;\n _this.initRenderCalled = false;\n _this.checkInjectedModules = true;\n _this.immediateRender = true;\n _this.portals = [];\n return _this;\n }\n PivotFieldListComponent.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 PivotFieldListComponent;\n}(PivotFieldList));\nexport { PivotFieldListComponent };\napplyMixins(PivotFieldListComponent, [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, rippleEffect, NotifyPropertyChanges, Property, closest } from '@syncfusion/ej2-base';\nimport { addClass, getInstance, getUniqueID, isRippleEnabled, removeClass, attributes, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { detach, Event, EventHandler, SanitizeHtmlHelper } from '@syncfusion/ej2-base';\nimport { wrapperInitialize, rippleMouseHandler } from './../common/common';\nvar LABEL = 'e-label';\nvar RIPPLE = 'e-ripple-container';\nvar RTL = 'e-rtl';\nvar WRAPPER = 'e-radio-wrapper';\nvar ATTRIBUTES = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value'];\n/**\n * The RadioButton is a graphical user interface element that allows you to select one option from the choices.\n * It contains checked and unchecked states.\n * ```html\n *
\n * \n * ```\n */\nvar RadioButton = /** @class */ (function (_super) {\n __extends(RadioButton, _super);\n /**\n * Constructor for creating the widget\n *\n * @private\n * @param {RadioButtonModel} options - Specifies Radio button model\n * @param {string | HTMLInputElement} element - Specifies target element\n */\n function RadioButton(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isFocused = false;\n return _this;\n }\n RadioButton_1 = RadioButton;\n RadioButton.prototype.changeHandler = function (event) {\n this.checked = true;\n this.dataBind();\n var value = this.element.getAttribute('value');\n value = this.isVue && value ? this.element.value : this.value;\n this.trigger('change', { value: value, event: event });\n if (this.tagName === 'EJS-RADIOBUTTON') {\n event.stopPropagation();\n }\n };\n RadioButton.prototype.updateChange = function () {\n var input;\n var instance;\n var radioGrp = this.getRadioGroup();\n for (var i = 0; i < radioGrp.length; i++) {\n input = radioGrp[i];\n if (input !== this.element) {\n instance = getInstance(input, RadioButton_1);\n instance.checked = false;\n if (this.tagName === 'EJS-RADIOBUTTON') {\n instance.angularValue = this.value;\n }\n }\n }\n };\n /**\n * Destroys the widget.\n *\n * @returns {void}\n */\n RadioButton.prototype.destroy = function () {\n var _this = this;\n var radioWrap = this.element.parentElement;\n _super.prototype.destroy.call(this);\n if (!this.disabled) {\n this.unWireEvents();\n }\n if (this.tagName === 'INPUT') {\n if (radioWrap.parentNode) {\n radioWrap.parentNode.insertBefore(this.element, radioWrap);\n }\n detach(radioWrap);\n this.element.checked = false;\n ['name', 'value', 'disabled'].forEach(function (key) {\n _this.element.removeAttribute(key);\n });\n }\n else {\n ['role', 'aria-checked', 'class'].forEach(function (key) {\n radioWrap.removeAttribute(key);\n });\n radioWrap.innerHTML = '';\n }\n };\n RadioButton.prototype.focusHandler = function () {\n this.isFocused = true;\n };\n RadioButton.prototype.focusOutHandler = function () {\n var label = this.getLabel();\n if (label) {\n label.classList.remove('e-focus');\n }\n };\n RadioButton.prototype.getModuleName = function () {\n return 'radio';\n };\n /**\n * To get the value of selected radio button in a group.\n *\n * @method getSelectedValue\n * @returns {string} - Selected Value\n */\n RadioButton.prototype.getSelectedValue = function () {\n var input;\n var radioGrp = this.getRadioGroup();\n for (var i = 0, len = radioGrp.length; i < len; i++) {\n input = radioGrp[i];\n if (input.checked) {\n return input.value;\n }\n }\n return '';\n };\n RadioButton.prototype.getRadioGroup = function () {\n return document.querySelectorAll('input.e-radio[name=\"' + this.element.getAttribute('name') + '\"]');\n };\n /**\n * Gets the properties to be maintained in the persistence state.\n *\n * @private\n * @returns {string} - Persist Data\n */\n RadioButton.prototype.getPersistData = function () {\n return this.addOnPersist(['checked']);\n };\n RadioButton.prototype.getLabel = function () {\n if (this.element) {\n return this.element.nextElementSibling;\n }\n else {\n return null;\n }\n };\n RadioButton.prototype.initialize = function () {\n if (isNullOrUndefined(this.initialCheckedValue)) {\n this.initialCheckedValue = this.checked;\n }\n this.initWrapper();\n this.updateHtmlAttribute();\n if (this.name) {\n this.element.setAttribute('name', this.name);\n }\n var value = this.element.getAttribute('value');\n if (this.isVue && value && value === this.value) {\n this.checked = true;\n }\n if (this.isVue ? this.value && !value : this.value) {\n this.element.setAttribute('value', this.value);\n }\n if (this.checked) {\n this.element.checked = true;\n }\n if (this.disabled) {\n this.setDisabled();\n }\n };\n RadioButton.prototype.initWrapper = function () {\n var rippleSpan;\n var wrapper = this.element.parentElement;\n if (!wrapper.classList.contains(WRAPPER)) {\n wrapper = this.createElement('div', { className: WRAPPER });\n this.element.parentNode.insertBefore(wrapper, this.element);\n }\n var label = this.createElement('label', { attrs: { for: this.element.id } });\n wrapper.appendChild(this.element);\n wrapper.appendChild(label);\n if (isRippleEnabled) {\n rippleSpan = this.createElement('span', { className: (RIPPLE) });\n label.appendChild(rippleSpan);\n rippleEffect(rippleSpan, {\n duration: 400,\n isCenterRipple: true\n });\n }\n wrapper.classList.add('e-wrapper');\n if (this.enableRtl) {\n label.classList.add(RTL);\n }\n if (this.cssClass) {\n addClass([label], this.cssClass.split(' '));\n }\n if (this.label) {\n this.setText(this.label);\n }\n };\n RadioButton.prototype.keyUpHandler = function () {\n if (this.isFocused) {\n this.getLabel().classList.add('e-focus');\n }\n };\n RadioButton.prototype.labelRippleHandler = function (e) {\n var ripple = this.getLabel().getElementsByClassName(RIPPLE)[0];\n rippleMouseHandler(e, ripple);\n };\n RadioButton.prototype.formResetHandler = function () {\n this.checked = this.initialCheckedValue;\n if (this.initialCheckedValue) {\n attributes(this.element, { 'checked': 'true' });\n }\n };\n /**\n * Called internally if any of the property value changes.\n *\n * @private\n * @param {RadioButtonModel} newProp - Specifies New Properties\n * @param {RadioButtonModel} oldProp - Specifies Old Properties\n * @returns {void}\n */\n RadioButton.prototype.onPropertyChanged = function (newProp, oldProp) {\n var label = this.getLabel();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'checked':\n if (newProp.checked) {\n this.updateChange();\n }\n this.element.checked = newProp.checked;\n break;\n case 'disabled':\n if (newProp.disabled) {\n this.setDisabled();\n this.unWireEvents();\n }\n else {\n this.element.disabled = false;\n this.wireEvents();\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([label], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([label], newProp.cssClass.split(' '));\n }\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n label.classList.add(RTL);\n }\n else {\n label.classList.remove(RTL);\n }\n break;\n case 'label':\n this.setText(newProp.label);\n break;\n case 'labelPosition':\n if (newProp.labelPosition === 'Before') {\n label.classList.add('e-right');\n }\n else {\n label.classList.remove('e-right');\n }\n break;\n case 'name':\n this.element.setAttribute('name', newProp.name);\n break;\n case 'value':\n if (!isNullOrUndefined(this.htmlAttributes) && this.htmlAttributes.value) {\n break;\n }\n this.element.setAttribute('value', newProp.value);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttribute();\n break;\n }\n }\n };\n /**\n * Initialize checked Property, Angular and React and Unique ID support.\n *\n * @private\n * @returns {void}\n */\n RadioButton.prototype.preRender = function () {\n var element = this.element;\n this.formElement = closest(this.element, 'form');\n this.tagName = this.element.tagName;\n element = wrapperInitialize(this.createElement, 'EJS-RADIOBUTTON', 'radio', element, WRAPPER, 'radio');\n this.element = element;\n if (this.element.getAttribute('type') !== 'radio') {\n this.element.setAttribute('type', 'radio');\n }\n if (!this.element.id) {\n this.element.id = getUniqueID('e-' + this.getModuleName());\n }\n if (this.tagName === 'EJS-RADIOBUTTON') {\n var formControlName = this.element.getAttribute('formcontrolname');\n if (formControlName) {\n this.setProperties({ 'name': formControlName }, true);\n this.element.setAttribute('name', formControlName);\n }\n }\n };\n /**\n * Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n RadioButton.prototype.render = function () {\n this.initialize();\n if (!this.disabled) {\n this.wireEvents();\n }\n this.renderComplete();\n };\n RadioButton.prototype.setDisabled = function () {\n this.element.disabled = true;\n };\n RadioButton.prototype.setText = function (text) {\n var label = this.getLabel();\n var textLabel = label.getElementsByClassName(LABEL)[0];\n if (textLabel) {\n textLabel.textContent = text;\n }\n else {\n text = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(text) : text;\n textLabel = this.createElement('span', { className: LABEL, innerHTML: text });\n label.appendChild(textLabel);\n }\n if (this.labelPosition === 'Before') {\n this.getLabel().classList.add('e-right');\n }\n else {\n this.getLabel().classList.remove('e-right');\n }\n };\n RadioButton.prototype.updateHtmlAttribute = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (ATTRIBUTES.indexOf(key) > -1) {\n var wrapper = this.element.parentElement;\n if (key === 'class') {\n addClass([wrapper], this.htmlAttributes[key].split(' '));\n }\n else if (key === 'title' || key === 'style') {\n wrapper.setAttribute(key, this.htmlAttributes[key]);\n }\n else {\n this.element.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n };\n RadioButton.prototype.unWireEvents = function () {\n var label = this.getLabel();\n EventHandler.remove(this.element, 'change', this.changeHandler);\n EventHandler.remove(this.element, 'focus', this.focusHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n EventHandler.remove(this.element, 'keyup', this.keyUpHandler);\n var rippleLabel = label.getElementsByClassName(LABEL)[0];\n if (rippleLabel) {\n EventHandler.remove(rippleLabel, 'mousedown', this.labelRippleHandler);\n EventHandler.remove(rippleLabel, 'mouseup', this.labelRippleHandler);\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n };\n RadioButton.prototype.wireEvents = function () {\n var label = this.getLabel();\n EventHandler.add(this.element, 'change', this.changeHandler, this);\n EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);\n EventHandler.add(this.element, 'focus', this.focusHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n var rippleLabel = label.getElementsByClassName(LABEL)[0];\n if (rippleLabel) {\n EventHandler.add(rippleLabel, 'mousedown', this.labelRippleHandler, this);\n EventHandler.add(rippleLabel, 'mouseup', this.labelRippleHandler, this);\n }\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n };\n /**\n * Click the RadioButton element\n * its native method\n *\n * @public\n * @returns {void}\n */\n RadioButton.prototype.click = function () {\n this.element.click();\n };\n /**\n * Sets the focus to RadioButton\n * its native method\n *\n * @public\n * @returns {void}\n */\n RadioButton.prototype.focusIn = function () {\n this.element.focus();\n };\n var RadioButton_1;\n __decorate([\n Event()\n ], RadioButton.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], RadioButton.prototype, \"created\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"checked\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"disabled\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"label\", void 0);\n __decorate([\n Property('After')\n ], RadioButton.prototype, \"labelPosition\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"name\", void 0);\n __decorate([\n Property('')\n ], RadioButton.prototype, \"value\", void 0);\n __decorate([\n Property(false)\n ], RadioButton.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property({})\n ], RadioButton.prototype, \"htmlAttributes\", void 0);\n RadioButton = RadioButton_1 = __decorate([\n NotifyPropertyChanges\n ], RadioButton);\n return RadioButton;\n}(Component));\nexport { RadioButton };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { 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 __decorate([\n Property()\n ], AccordionItem.prototype, \"id\", 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 *\n * @param {AccordionModel} options - Specifies Accordion model properties as options.\n * @param {string | HTMLElement} 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 *\n * @returns {void}\n */\n Accordion.prototype.destroy = function () {\n var _this = this;\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 *\n * @private\n * @returns {void}\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 /* eslint-disable */\n Accordion.prototype.getheaderTemplate = function () {\n return this.headerTemplateFn;\n };\n /* eslint-disable */\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 /* eslint-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 /* eslint-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 // eslint-disable-next-line @typescript-eslint/no-explicit-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 // eslint-disable-next-line @typescript-eslint/no-explicit-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 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 var 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 // eslint-disable-next-line @typescript-eslint/no-explicit-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 // eslint-disable-next-line @typescript-eslint/no-explicit-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 // eslint-disable-next-line @typescript-eslint/no-explicit-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', 'aria-label': 'collapsed',\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 = this.createElement('div', { className: CLS_ITEM });\n innerEle.id = getUniqueID('acrdn_item');\n if (isNOU(item.id)) {\n item.id = innerEle.id;\n }\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 // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Accordion.prototype.fetchElement = function (ele, value, index, isHeader) {\n /* eslint-disable */\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 /* eslint-disable */\n }\n else if (!isNOU(this.trgtEle) && (value instanceof (HTMLElement))) {\n ele.appendChild(value);\n ele.firstElementChild.style.display = '';\n /* eslint-enable */\n }\n else {\n templateFn = templateCompiler(value);\n }\n }\n var tempArray;\n if (!isNOU(templateFn)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-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 // eslint-disable-next-line @typescript-eslint/no-explicit-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 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 var 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', 'aria-label': 'expanded' });\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 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 var 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', 'aria-label': 'collapsed' });\n this.trigger('expanded', eventArgs);\n }\n };\n /**\n * Returns the current module name.\n *\n * @returns {string} - It returns the current module name.\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 *\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 // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\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 *\n * @param {number} index - Number value that determines which item should be removed.\n * @returns {void}.\n */\n Accordion.prototype.removeItem = function (index) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-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 *\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 *\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 if (isHidden) {\n this.add(ele, CLS_ITEMHIDE);\n }\n else {\n this.remove(ele, CLS_ITEMHIDE);\n }\n };\n /**\n * Enables/Disables the specified Accordion item.\n *\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 *\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 *\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 // eslint-disable-next-line @typescript-eslint/no-explicit-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 // eslint-disable-next-line @typescript-eslint/no-explicit-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 if (isExpand) {\n this.expand(ctn);\n }\n else {\n this.collapse(ctn);\n }\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Accordion.prototype.destroyItems = function () {\n this.restoreContent(null);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.clearTemplate();\n }\n [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) {\n detach(el);\n });\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 // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n // eslint-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 *\n * @param {AccordionModel} newProp - It contains the new value of data.\n * @param {AccordionModel} oldProp - It contains the old value of data.\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 if (Object(newProp.items[index])[property] === false) {\n item.classList.add(CLS_ITEMHIDE);\n }\n else {\n item.classList.remove(CLS_ITEMHIDE);\n }\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 if (newProp.enableRtl) {\n this.add(acrdn, CLS_RTL);\n }\n else {\n this.remove(acrdn, CLS_RTL);\n }\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","import { Dialog, Tooltip } from '@syncfusion/ej2-popups';\nimport { Droppable, createElement, extend, remove, addClass, closest, getInstance, isBlazor, select } from '@syncfusion/ej2-base';\nimport { prepend, append, KeyboardEvents, removeClass, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Button, RadioButton, CheckBox } from '@syncfusion/ej2-buttons';\nimport { MaskedTextBox } from '@syncfusion/ej2-inputs';\nimport * as cls from '../../common/base/css-constant';\nimport { TreeView } from '@syncfusion/ej2-navigations';\nimport { ContextMenu as Menu } from '@syncfusion/ej2-navigations';\nimport * as events from '../../common/base/constant';\nimport { Accordion } from '@syncfusion/ej2-navigations';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { PivotUtil } from '../../base/util';\n/**\n * Module to render Calculated Field Dialog\n */\nvar COUNT = 'Count';\nvar AVG = 'Avg';\nvar MEDIAN = 'Median';\nvar MIN = 'Min';\nvar MAX = 'Max';\nvar SUM = 'Sum';\nvar DISTINCTCOUNT = 'DistinctCount';\nvar PRODUCT = 'Product';\nvar STDEV = 'SampleStDev';\nvar STDEVP = 'PopulationStDev';\nvar VAR = 'SampleVar';\nvar VARP = 'PopulationVar';\nvar CALC = 'CalculatedField';\nvar AGRTYPE = 'AggregateType';\n/** @hidden */\nvar CalculatedField = /** @class */ (function () {\n /**\n * Constructor for calculatedfield module.\n * @param {PivotView | PivotFieldList} parent - Component instance.\n */\n function CalculatedField(parent) {\n /** @hidden */\n this.isFormula = false;\n /** @hidden */\n this.isRequireUpdate = false;\n this.parent = parent;\n this.existingReport = null;\n this.parent.calculatedFieldModule = this;\n this.removeEventListener();\n this.addEventListener();\n this.parentID = this.parent.element.id;\n this.dialog = null;\n this.inputObj = null;\n this.treeObj = null;\n this.droppable = null;\n this.menuObj = null;\n this.newFields = null;\n this.isFieldExist = true;\n this.formulaText = null;\n this.fieldText = null;\n this.formatText = null;\n this.formatType = null;\n this.fieldType = null;\n this.parentHierarchy = null;\n this.isEdit = false;\n this.currentFieldName = null;\n this.confirmPopUp = null;\n }\n /**\n * To get module name.\n * @returns {string} - Module name.\n */\n CalculatedField.prototype.getModuleName = function () {\n return 'calculatedField';\n };\n CalculatedField.prototype.keyActionHandler = function (e) {\n var node = e.currentTarget.querySelector('.e-hover.e-node-focus');\n if (node) {\n switch (e.action) {\n case 'moveRight':\n case 'shiftE':\n if (this.parent.dataType === 'pivot') {\n this.displayMenu(node);\n }\n break;\n case 'delete':\n if (node.tagName === 'LI' && !node.querySelector('.e-list-icon.e-format') && !node.querySelector('.e-list-icon').classList.contains('.e-icons') && (node.querySelector('.' + cls.GRID_REMOVE) &&\n node.querySelector('.' + cls.GRID_REMOVE).classList.contains('e-list-icon'))) {\n this.createConfirmDialog(this.parent.localeObj.getConstant('alert'), this.parent.localeObj.getConstant('removeCalculatedField'), {}, true, node);\n }\n break;\n case 'enter':\n var field = node.getAttribute('data-field');\n var type = node.getAttribute('data-type');\n var dropField = select('#' + this.parentID + 'droppable', this.dialog.element);\n if (this.parent.dataType === 'pivot') {\n if (dropField.value === '') {\n if (type === CALC) {\n dropField.value = node.getAttribute('data-uid');\n }\n else {\n dropField.value = '\"' + type + '(' + field + ')' + '\"';\n }\n }\n else if (dropField.value !== '') {\n if (type === CALC) {\n dropField.value = dropField.value + node.getAttribute('data-uid');\n }\n else {\n dropField.value = dropField.value + '\"' + type + '(' + field + ')' + '\"';\n }\n }\n }\n else {\n if (this.parent.olapEngineModule && this.parent.olapEngineModule.fieldList[field] &&\n this.parent.olapEngineModule.fieldList[field].isCalculatedField) {\n field = this.parent.olapEngineModule.fieldList[field].tag;\n }\n if (dropField.value === '') {\n dropField.value = field;\n }\n else if (dropField.value !== '') {\n dropField.value = dropField.value + field;\n }\n }\n break;\n }\n }\n };\n /**\n * Trigger while click treeview icon.\n * @param {NodeClickEventArgs} e - Click event argument.\n * @returns {void}\n */\n CalculatedField.prototype.fieldClickHandler = function (e) {\n var node = closest(e.event.target, 'li');\n if (e.event.target.classList.contains(cls.FORMAT) ||\n e.event.target.classList.contains(cls.CALC_EDIT) ||\n e.event.target.classList.contains(cls.CALC_EDITED) ||\n e.event.target.classList.contains(cls.GRID_REMOVE)) {\n if (!this.parent.isAdaptive) {\n this.displayMenu(node, e.node, e.event.target);\n }\n else if (this.parent.dataType === 'olap' && this.parent.isAdaptive) {\n if (node.tagName === 'LI' && node.querySelector('.e-list-edit-icon').classList.contains(cls.CALC_EDIT) && e.event.target.classList.contains(cls.CALC_EDIT)) {\n this.isEdit = true;\n this.currentFieldName = node.getAttribute('data-field');\n this.fieldText = node.getAttribute('data-caption');\n this.formulaText = node.getAttribute('data-formula');\n this.formatType = node.getAttribute('data-formatString');\n this.formatText = this.formatType === 'Custom' ? node.getAttribute('data-customString') : null;\n this.fieldType = node.getAttribute('data-membertype');\n this.parentHierarchy = this.fieldType === 'Dimension' ? node.getAttribute('data-hierarchy') : null;\n addClass([node.querySelector('.e-list-edit-icon')], cls.CALC_EDITED);\n removeClass([node.querySelector('.e-list-edit-icon')], cls.CALC_EDIT);\n this.renderMobileLayout(this.parent.dialogRenderer.adaptiveElement);\n }\n else if (node.tagName === 'LI' && node.querySelector('.e-list-edit-icon').classList.contains(cls.CALC_EDITED) && e.event.target.classList.contains(cls.CALC_EDITED)) {\n this.isEdit = false;\n this.fieldText = this.formatText = this.formulaText = this.currentFieldName = null;\n this.parentHierarchy = this.fieldType = this.formatType = null;\n addClass([node.querySelector('.e-list-edit-icon')], cls.CALC_EDIT);\n removeClass([node.querySelector('.e-list-edit-icon')], cls.CALC_EDITED);\n }\n else if (node.tagName === 'LI' && node.querySelector('.' + cls.GRID_REMOVE).classList.contains('e-icons') && e.event.target.classList.contains(cls.GRID_REMOVE)) {\n this.createConfirmDialog(this.parent.localeObj.getConstant('alert'), this.parent.localeObj.getConstant('removeCalculatedField'), {}, true, e.node);\n }\n }\n }\n };\n /**\n * Trigger while click treeview icon.\n * @param {AccordionClickArgs} e - Click event argument.\n * @returns {void}\n */\n CalculatedField.prototype.accordionClickHandler = function (e) {\n if (e.item && e.item.iconCss.indexOf('e-list-icon') !== -1 &&\n closest(e.originalEvent.target, '.e-acrdn-header-icon')) {\n var node = closest(e.originalEvent.target, '.e-acrdn-header').querySelector('.' + cls.CALCCHECK);\n var fieldName = node.getAttribute('data-field');\n var formatObj = PivotUtil.getFieldByName(fieldName, this.parent.dataSourceSettings.formatSettings);\n var optionElement = closest(e.originalEvent.target, '.e-acrdn-header-icon');\n if (optionElement.querySelector('.' + cls.CALC_EDIT) && e.originalEvent.target.classList.contains(cls.CALC_EDIT)) {\n this.isEdit = true;\n this.currentFieldName = this.fieldText = fieldName;\n this.formulaText = this.parent.engineModule.fieldList[fieldName].formula;\n this.formatText = formatObj ? formatObj.format : '';\n addClass([optionElement.querySelector('.e-list-icon')], cls.CALC_EDITED);\n removeClass([optionElement.querySelector('.e-list-icon')], cls.CALC_EDIT);\n this.renderMobileLayout(this.parent.dialogRenderer.adaptiveElement);\n }\n else if (optionElement.querySelector('.' + cls.CALC_EDITED) &&\n e.originalEvent.target.classList.contains(cls.CALC_EDITED)) {\n this.isEdit = false;\n this.fieldText = this.formatText = this.formulaText = this.currentFieldName = null;\n addClass([optionElement.querySelector('.e-list-icon')], cls.CALC_EDIT);\n removeClass([optionElement.querySelector('.e-list-icon')], cls.CALC_EDITED);\n }\n else if (optionElement.querySelector('.' + cls.GRID_REMOVE) &&\n e.originalEvent.target.classList.contains(cls.GRID_REMOVE)) {\n this.createConfirmDialog(this.parent.localeObj.getConstant('alert'), this.parent.localeObj.getConstant('removeCalculatedField'), {}, true, node);\n }\n }\n };\n CalculatedField.prototype.accordionCreated = function () {\n var allElement = this.accordion.element.querySelectorAll('.e-acrdn-item');\n for (var i = 0; i < allElement.length; i++) {\n if (allElement[i].querySelector('.' + cls.CALC_EDIT) || allElement[i].querySelector('.' + cls.CALC_EDITED)) {\n var element = createElement('span', {\n className: 'e-list-icon ' + cls.GRID_REMOVE + ' e-icons'\n });\n append([element], allElement[i].querySelector('.e-acrdn-header-icon'));\n }\n }\n };\n CalculatedField.prototype.clearFormula = function () {\n if (this.treeObj && this.treeObj.element.querySelector('li')) {\n removeClass(this.treeObj.element.querySelectorAll('li'), 'e-active');\n this.displayMenu(this.treeObj.element.querySelector('li'));\n }\n };\n /**\n * To display context menu.\n * @param {HTMLElement} node\n * @returns {void}\n */\n /* eslint-disable */\n CalculatedField.prototype.displayMenu = function (node, treeNode, target) {\n var edit = target ? target.classList.contains(cls.CALC_EDIT) : true;\n var edited = target ? target.classList.contains(cls.CALC_EDITED) : true;\n if (this.parent.dataType === 'pivot' && node.querySelector('.e-list-icon.e-format') &&\n node.querySelector('.e-list-icon.e-format').classList.contains(cls.ICON) &&\n !node.querySelector('.e-list-icon').classList.contains(cls.CALC_EDITED) &&\n !node.querySelector('.e-list-icon').classList.contains(cls.GRID_REMOVE) &&\n !node.querySelector('.e-list-icon').classList.contains(cls.CALC_EDIT) && node.tagName === 'LI') {\n if (this.menuObj && !this.menuObj.isDestroyed) {\n this.menuObj.destroy();\n }\n this.curMenu = node.querySelector('.' + cls.LIST_TEXT_CLASS);\n this.openContextMenu(node);\n }\n else if (node.tagName === 'LI' && (node.querySelector('.' + cls.CALC_EDIT) &&\n node.querySelector('.' + cls.CALC_EDIT).classList.contains('e-list-icon') && edit ||\n (this.parent.dataType === 'olap' && node.getAttribute('data-type') === CALC && node.classList.contains('e-active') && ((target && !target.classList.contains(cls.GRID_REMOVE)) || !target)))) {\n this.isEdit = true;\n var fieldName = node.getAttribute('data-field');\n var caption = node.getAttribute('data-caption');\n this.currentFieldName = fieldName;\n this.inputObj.value = caption;\n this.inputObj.dataBind();\n var formatString = node.getAttribute('data-formatString');\n var dialogElement = this.dialog.element;\n var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);\n if (this.parent.dataType === 'olap') {\n var memberType = node.getAttribute('data-membertype');\n var parentHierarchy = node.getAttribute('data-hierarchy');\n var expression = node.getAttribute('data-formula');\n var customString = node.getAttribute('data-customString');\n var fieldTitle = select('#' + this.parentID + '_' + 'FieldNameTitle', dialogElement);\n var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);\n var hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);\n var formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);\n /* eslint-enable max-len */\n fieldTitle.innerHTML = this.parent.localeObj.getConstant('caption');\n select('#' + this.parentID + 'droppable', document).value = expression;\n memberTypeDrop.readonly = true;\n memberTypeDrop.value = memberType;\n memberTypeDrop.dataBind();\n if (memberType === 'Dimension') {\n hierarchyDrop.value = parentHierarchy;\n }\n if (formatString !== '') {\n formatDrop.value = formatString;\n formatDrop.dataBind();\n }\n customFormat.value = customString;\n }\n else {\n customFormat.value = formatString;\n addClass(this.treeObj.element.querySelectorAll('.' + cls.CALC_EDITED), cls.CALC_EDIT);\n removeClass(this.treeObj.element.querySelectorAll('.' + cls.CALC_EDITED), cls.CALC_EDITED);\n addClass([node.querySelector('.e-list-icon')], cls.CALC_EDITED);\n removeClass([node.querySelector('.e-list-icon')], cls.CALC_EDIT);\n node.querySelector('.' + cls.CALC_EDITED).setAttribute('title', this.parent.localeObj.getConstant('clearCalculatedField'));\n select('#' + this.parentID + 'droppable', document).value = node.getAttribute('data-uid');\n }\n customFormat.dataBind();\n }\n else if (node.tagName === 'LI' && (node.querySelector('.' + cls.CALC_EDITED) &&\n node.querySelector('.' + cls.CALC_EDITED).classList.contains('e-list-icon') && edited ||\n (this.parent.dataType === 'olap' && !node.classList.contains('e-active')))) {\n this.isEdit = false;\n this.inputObj.value = '';\n this.inputObj.dataBind();\n var dialogElement = this.dialog.element;\n var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);\n customFormat.value = '';\n customFormat.dataBind();\n if (this.parent.dataType === 'olap') {\n var hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);\n var formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);\n var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);\n var fieldTitle = select('#' + this.parentID + '_' + 'FieldNameTitle', dialogElement);\n /* eslint-enable max-len */\n fieldTitle.innerHTML = this.parent.localeObj.getConstant('fieldTitle');\n hierarchyDrop.index = 0;\n hierarchyDrop.dataBind();\n formatDrop.index = 0;\n formatDrop.dataBind();\n memberTypeDrop.index = 0;\n memberTypeDrop.readonly = false;\n memberTypeDrop.dataBind();\n }\n else {\n addClass(this.treeObj.element.querySelectorAll('.' + cls.CALC_EDITED), cls.CALC_EDIT);\n removeClass(this.treeObj.element.querySelectorAll('.' + cls.CALC_EDITED), cls.CALC_EDITED);\n node.querySelector('.' + cls.CALC_EDIT).setAttribute('title', this.parent.localeObj.getConstant('edit'));\n }\n select('#' + this.parentID + 'droppable', document).value = '';\n }\n else if (node.tagName === 'LI' && (node.querySelector('.' + cls.GRID_REMOVE) &&\n node.querySelector('.' + cls.GRID_REMOVE).classList.contains('e-list-icon')) && !edit && !edited) {\n var dropField = select('#' + this.parentID + 'droppable', document);\n var field = {\n name: this.isEdit ? this.currentFieldName : this.inputObj.value,\n caption: this.inputObj.value,\n formula: dropField.value\n };\n this.createConfirmDialog(this.parent.localeObj.getConstant('alert'), this.parent.localeObj.getConstant('removeCalculatedField'), field, true, treeNode);\n }\n };\n CalculatedField.prototype.removeCalcField = function (node) {\n var dataSourceSettings = this.parent.dataSourceSettings;\n var fieldName = node.getAttribute('data-field');\n var calcfields = dataSourceSettings.calculatedFieldSettings;\n var engineModule;\n if (this.parent.dataType === 'pivot') {\n if (!this.parent.isAdaptive) {\n this.treeObj.removeNodes([node]);\n }\n else {\n var index = parseInt(node.getAttribute('id').split(this.parentID + '_')[1], 10);\n if (typeof index === 'number') {\n this.accordion.removeItem(index);\n }\n }\n }\n for (var i = 0; i < calcfields.length; i++) {\n if (calcfields[i] && calcfields[i].name === fieldName) {\n calcfields.splice(i, 1);\n break;\n }\n }\n if (this.parent.dataType === 'olap') {\n engineModule = this.parent.olapEngineModule;\n var fields_1 = engineModule.fieldListData ? engineModule.fieldListData : [];\n /* eslint-disable @typescript-eslint/no-explicit-any */\n for (var _i = 0, _a = Object.keys(fields_1); _i < _a.length; _i++) {\n var item = _a[_i];\n if (fields_1[item].name === fieldName) {\n var index = parseInt(item, 10);\n if (typeof (index) === 'number') {\n fields_1.splice(index, 1);\n break;\n }\n }\n }\n /* eslint-enable @typescript-eslint/no-explicit-any */\n var parentID = this.treeObj.getNode(node).parentID;\n this.treeObj.removeNodes([node]);\n if (calcfields.length <= 0) {\n this.treeObj.removeNodes([parentID]);\n }\n }\n else {\n engineModule = this.parent.engineModule;\n }\n if (engineModule.fields) {\n for (var i = 0; i < engineModule.fields.length; i++) {\n if (engineModule.fields[i] === fieldName) {\n engineModule.fields.splice(i, 1);\n break;\n }\n }\n }\n if (engineModule.savedFieldList && engineModule.savedFieldList[fieldName]) {\n delete engineModule.savedFieldList[fieldName];\n }\n if (engineModule.fieldList && engineModule.fieldList[fieldName]) {\n delete engineModule.fieldList[fieldName];\n }\n var formatFields = dataSourceSettings.formatSettings;\n for (var i = 0; i < formatFields.length; i++) {\n if (formatFields[i] && formatFields[i].name === fieldName) {\n formatFields.splice(i, 1);\n break;\n }\n }\n var fields = [dataSourceSettings.values, dataSourceSettings.rows, dataSourceSettings.columns, dataSourceSettings.filters];\n for (var i = 0, n = fields.length; i < n; i++) {\n for (var j = 0, length_1 = fields[i].length; j < length_1; j++) {\n if (fields[i][j].name === fieldName) {\n fields[i].splice(j, 1);\n break;\n }\n }\n }\n /* eslint-enable max-len */\n if (this.isEdit && this.currentFieldName === fieldName) {\n this.isEdit = false;\n this.inputObj.value = '';\n this.currentFieldName = this.formatText = this.fieldText = this.formatType = null;\n this.formulaText = this.fieldType = this.parentHierarchy = null;\n }\n if (!this.parent.allowDeferLayoutUpdate || this.parent.getModuleName() !== 'pivotfieldlist') {\n this.parent.updateDataSource();\n }\n this.removeErrorDialog();\n };\n /**\n * To set position for context menu.\n * @returns {void}\n */\n CalculatedField.prototype.openContextMenu = function (node) {\n var _this = this;\n var fieldName = node.getAttribute('data-field');\n var type = this.parent.engineModule.fieldList[fieldName].type !== 'number' ? 'string' : 'number';\n var validSummaryTypes = (type === 'string' ? this.getValidSummaryType().slice(0, 2) : this.getValidSummaryType());\n var eventArgs = {\n cancel: false, fieldName: fieldName,\n aggregateTypes: this.getMenuItems(type).slice()\n };\n var control = this.parent.getModuleName() === 'pivotfieldlist' && this.parent.isPopupView ?\n this.parent.pivotGridModule : this.parent;\n control.trigger(events.aggregateMenuOpen, eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n var duplicateTypes = [];\n var items = [];\n for (var _i = 0, _a = observedArgs.aggregateTypes; _i < _a.length; _i++) {\n var option = _a[_i];\n if (validSummaryTypes.indexOf(option) > -1 && duplicateTypes.indexOf(option) === -1) {\n duplicateTypes.push(option);\n items.push({\n id: _this.parent.element.id + 'Calc_' + option,\n text: _this.parent.localeObj.getConstant(option)\n });\n }\n }\n _this.createMenu(items, node);\n var pos = node.getBoundingClientRect();\n var offset = window.scrollY || document.documentElement.scrollTop;\n if (_this.parent.enableRtl) {\n _this.menuObj.open(pos.top + offset, pos.left - 100);\n }\n else {\n _this.menuObj.open(pos.top + offset, pos.left + 150);\n }\n }\n });\n };\n /**\n * Triggers while select menu.\n * @param {MenuEventArgs} menu\n * @returns {void}\n */\n CalculatedField.prototype.selectContextMenu = function (menu) {\n if (menu.element.textContent !== null) {\n var field = closest(this.curMenu, '.e-list-item').getAttribute('data-caption');\n closest(this.curMenu, '.e-list-item').setAttribute('data-type', menu.element.id.split('_').pop());\n this.curMenu.textContent = field + ' (' + menu.element.textContent + ')';\n addClass([this.curMenu.parentElement.parentElement], ['e-node-focus', 'e-hover']);\n this.curMenu.parentElement.parentElement.setAttribute('tabindex', '-1');\n this.curMenu.parentElement.parentElement.focus();\n }\n };\n /**\n * To create context menu.\n * @returns {void}\n */\n CalculatedField.prototype.createMenu = function (menuItems, node) {\n var _this = this;\n var menuOptions = {\n cssClass: this.parentID + 'calculatedmenu',\n items: menuItems,\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n // beforeOpen: this.beforeMenuOpen.bind(this),\n select: this.selectContextMenu.bind(this),\n onClose: function () {\n _this.treeObj.element.focus();\n addClass([node], ['e-hover', 'e-node-focus']);\n }\n };\n var contextMenu;\n if (select('#' + this.parentID + 'CalcContextmenu', document)) {\n contextMenu = select('#' + this.parentID + 'CalcContextmenu', document);\n }\n else {\n contextMenu = createElement('ul', {\n id: this.parentID + 'CalcContextmenu'\n });\n }\n this.dialog.element.appendChild(contextMenu);\n this.menuObj = new Menu(menuOptions);\n this.menuObj.isStringTemplate = true;\n this.menuObj.appendTo(contextMenu);\n };\n /**\n * Triggers while click OK button.\n * @returns {void}\n */\n /* eslint-disable */\n CalculatedField.prototype.applyFormula = function () {\n var _this = this;\n var currentObj = this;\n var isExist = false;\n removeClass([document.getElementById(this.parentID + 'ddlelement')], cls.EMPTY_FIELD);\n this.newFields =\n extend([], this.parent.dataSourceSettings.calculatedFieldSettings, null, true);\n var eventArgs = {\n fieldName: this.isEdit ? this.currentFieldName : this.inputObj.value,\n calculatedField: this.getCalculatedFieldInfo(),\n calculatedFieldSettings: PivotUtil.cloneCalculatedFieldSettings(this.parent.dataSourceSettings.calculatedFieldSettings),\n cancel: false\n };\n var control = this.parent.getModuleName() === 'pivotfieldlist' &&\n this.parent.isPopupView ? this.parent.pivotGridModule : this.parent;\n control.trigger(events.calculatedFieldCreate, eventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n var calcInfo = observedArgs.calculatedField;\n if (!_this.isEdit) {\n if (currentObj.parent.dataType === 'olap') {\n var field = calcInfo.name;\n if (currentObj.parent.olapEngineModule.fieldList[field] &&\n currentObj.parent.olapEngineModule.fieldList[field].type !== 'CalculatedField') {\n isExist = true;\n }\n }\n else {\n for (var _i = 0, _a = Object.keys(currentObj.parent.engineModule.fieldList); _i < _a.length; _i++) {\n var key = _a[_i];\n if (calcInfo.name && calcInfo.name === key &&\n currentObj.parent.engineModule.fieldList[key].aggregateType !== 'CalculatedField') {\n isExist = true;\n }\n }\n }\n }\n if (isExist) {\n currentObj.parent.pivotCommon.errorDialog.createErrorDialog(currentObj.parent.localeObj.getConstant('error'), currentObj.parent.localeObj.getConstant('fieldExist'));\n return;\n }\n _this.existingReport = extend({}, _this.parent.dataSourceSettings, null, true);\n var report = _this.parent.dataSourceSettings;\n if (!isNullOrUndefined(calcInfo.name) && calcInfo.name !== '' &&\n !isNullOrUndefined(calcInfo.caption) && calcInfo.caption !== '' && calcInfo.formula && calcInfo.formula !== '') {\n var field = void 0;\n if (_this.parent.dataType === 'olap') {\n field = {\n name: calcInfo.name,\n formula: calcInfo.formula,\n formatString: calcInfo.formatString\n };\n if (!isNullOrUndefined(calcInfo.hierarchyUniqueName)) {\n field.hierarchyUniqueName = calcInfo.hierarchyUniqueName;\n }\n _this.isFieldExist = false;\n if (!_this.isEdit) {\n for (var i = 0; i < report.calculatedFieldSettings.length; i++) {\n if (report.calculatedFieldSettings[i].name === field.name) {\n _this.createConfirmDialog(currentObj.parent.localeObj.getConstant('alert'), currentObj.parent.localeObj.getConstant('confirmText'), calcInfo);\n return;\n }\n }\n }\n else {\n for (var i = 0; i < report.calculatedFieldSettings.length; i++) {\n if (report.calculatedFieldSettings[i].name === field.name && _this.isEdit) {\n report.calculatedFieldSettings[i].hierarchyUniqueName = calcInfo.hierarchyUniqueName;\n _this.parent.olapEngineModule.fieldList[field.name].caption = calcInfo.caption;\n report.calculatedFieldSettings[i].formatString = field.formatString;\n report.calculatedFieldSettings[i].formula = field.formula;\n field = report.calculatedFieldSettings[i];\n _this.isFieldExist = true;\n break;\n }\n }\n var axisFields = [report.rows, report.columns, report.values, report.filters];\n var isFieldExist = false;\n for (var _b = 0, axisFields_1 = axisFields; _b < axisFields_1.length; _b++) {\n var fields = axisFields_1[_b];\n for (var _c = 0, fields_2 = fields; _c < fields_2.length; _c++) {\n var item = fields_2[_c];\n if (item.isCalculatedField && field.name !== null &&\n item.name === field.name && _this.isEdit) {\n item.caption = calcInfo.caption;\n _this.isFieldExist = true;\n isFieldExist = true;\n break;\n }\n }\n if (isFieldExist) {\n break;\n }\n }\n }\n if (!_this.isFieldExist) {\n report.calculatedFieldSettings.push(field);\n }\n _this.parent.lastCalcFieldInfo = field;\n }\n else {\n field = {\n name: calcInfo.name,\n caption: calcInfo.caption,\n type: 'CalculatedField'\n };\n var cField = {\n name: calcInfo.name,\n formula: calcInfo.formula\n };\n if (!isNullOrUndefined(calcInfo.formatString)) {\n cField.formatString = calcInfo.formatString;\n }\n _this.isFieldExist = true;\n if (!_this.isEdit) {\n for (var i = 0; i < report.values.length; i++) {\n if (report.values[i].type === CALC && report.values[i].name === field.name) {\n for (var j = 0; j < report.calculatedFieldSettings.length; j++) {\n if (report.calculatedFieldSettings[j].name === field.name) {\n _this.createConfirmDialog(currentObj.parent.localeObj.getConstant('alert'), currentObj.parent.localeObj.getConstant('confirmText'), calcInfo);\n return;\n }\n }\n _this.isFieldExist = false;\n }\n }\n }\n else {\n for (var i = 0; i < report.values.length; i++) {\n if (report.values[i].type === CALC && field.name !== null &&\n report.values[i].name === field.name && _this.isEdit) {\n for (var j = 0; j < report.calculatedFieldSettings.length; j++) {\n if (report.calculatedFieldSettings[j].name === field.name) {\n report.values[i].caption = calcInfo.caption;\n _this.currentFormula = report.calculatedFieldSettings[j].formula;\n report.calculatedFieldSettings[j].formula = calcInfo.formula;\n _this.parent.engineModule.fieldList[field.name].caption = calcInfo.caption;\n _this.updateFormatSettings(report, field.name, calcInfo.formatString);\n _this.isFieldExist = false;\n }\n }\n }\n }\n }\n if (_this.isFieldExist) {\n report.values.push(field);\n report.calculatedFieldSettings.push(cField);\n _this.updateFormatSettings(report, field.name, calcInfo.formatString);\n }\n _this.parent.lastCalcFieldInfo = cField;\n }\n _this.addFormula(report, field.name);\n }\n else {\n if (isNullOrUndefined(calcInfo.name) || calcInfo.name === '' ||\n isNullOrUndefined(calcInfo.caption) || calcInfo.caption === '') {\n _this.inputObj.value = '';\n addClass([document.getElementById(_this.parentID + 'ddlelement')], cls.EMPTY_FIELD);\n document.getElementById(_this.parentID + 'ddlelement').focus();\n }\n else {\n _this.parent.pivotCommon.errorDialog.createErrorDialog(_this.parent.localeObj.getConstant('error'), _this.parent.localeObj.getConstant('invalidFormula'));\n }\n }\n }\n else {\n _this.endDialog();\n _this.parent.lastCalcFieldInfo = {};\n _this.isFormula = false;\n }\n });\n };\n CalculatedField.prototype.getCalculatedFieldInfo = function () {\n var field;\n var dropField = select('#' + this.parentID + 'droppable', document);\n var dialogElement = this.parent.isAdaptive ? this.parent.dialogRenderer.adaptiveElement.element : this.dialog.element;\n var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);\n field = {\n name: this.isEdit ? this.currentFieldName : this.inputObj.value,\n caption: this.inputObj.value,\n formula: dropField.value\n };\n if (this.parent.dataType === 'olap') {\n var formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);\n var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);\n var hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);\n field.formatString = (formatDrop.value === 'Custom' ? customFormat.value : formatDrop.value);\n if (memberTypeDrop.value === 'Dimension') {\n field.hierarchyUniqueName = hierarchyDrop.value;\n }\n }\n else {\n field.formatString = customFormat.value;\n }\n return field;\n };\n /* eslint-enable max-len */\n CalculatedField.prototype.updateFormatSettings = function (report, fieldName, formatString) {\n var newFormat = { name: fieldName, format: formatString, useGrouping: true };\n var isFormatExist = false;\n for (var i = 0; i < report.formatSettings.length; i++) {\n if (report.formatSettings[i].name === fieldName) {\n if (formatString === 'undefined' || formatString === undefined || formatString === '') {\n report.formatSettings.splice(i, 1);\n isFormatExist = true;\n break;\n }\n else {\n var formatObj = report.formatSettings[i].properties ?\n report.formatSettings[i].properties : report.formatSettings[i];\n formatObj.format = formatString;\n report.formatSettings.splice(i, 1, formatObj);\n isFormatExist = true;\n break;\n }\n }\n }\n if (!isFormatExist && formatString !== '') {\n report.formatSettings.push(newFormat);\n }\n };\n CalculatedField.prototype.addFormula = function (report, field) {\n this.isFormula = true;\n this.field = field;\n if (isBlazor() || this.parent.dataSourceSettings.mode === 'Server') {\n PivotUtil.updateDataSourceSettings(this.parent, PivotUtil.getClonedDataSourceSettings(report));\n }\n else {\n this.parent.setProperties({ dataSourceSettings: report }, true);\n }\n if (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.allowDeferLayoutUpdate) {\n this.parent.isRequiredUpdate = false;\n }\n try {\n this.parent.updateDataSource(false);\n var pivot = (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.pivotGridModule) ?\n this.parent.pivotGridModule : this.parent;\n if (!(isBlazor() && pivot && pivot.enableVirtualization) && (pivot && pivot.dataSourceSettings.mode !== 'Server')) {\n this.endDialog();\n }\n else {\n this.isRequireUpdate = true;\n }\n if (this.parent.getModuleName() === 'pivotfieldlist' &&\n this.parent.renderMode === 'Fixed' && this.parent.allowDeferLayoutUpdate) {\n this.parent.pivotChange = true;\n }\n }\n catch (exception) {\n this.showError();\n }\n };\n /** @hidden */\n CalculatedField.prototype.endDialog = function () {\n this.isEdit = false;\n if (this.dialog) {\n this.dialog.close();\n }\n else {\n this.inputObj.value = '';\n this.currentFieldName = this.formatText = this.fieldText = this.formatType = null;\n this.formulaText = this.fieldType = this.parentHierarchy = null;\n var dialogElement = this.parent.isAdaptive ?\n this.parent.dialogRenderer.parentElement : this.dialog.element;\n this.parent.dialogRenderer.parentElement.querySelector('.' + cls.CALCINPUT).value = '';\n select('#' + this.parentID + 'droppable', this.parent.dialogRenderer.parentElement).value = '';\n select('#' + this.parentID + 'Custom_Format_Element', this.parent.dialogRenderer.parentElement).value = '';\n if (this.parent.dataType === 'olap') {\n var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);\n var formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);\n var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);\n var hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);\n formatDrop.index = 0;\n formatDrop.dataBind();\n memberTypeDrop.index = 0;\n memberTypeDrop.readonly = false;\n memberTypeDrop.dataBind();\n hierarchyDrop.index = 0;\n hierarchyDrop.enabled = false;\n hierarchyDrop.dataBind();\n customFormat.enabled = false;\n customFormat.dataBind();\n }\n /* eslint-enable max-len */\n }\n };\n /** @hidden */\n CalculatedField.prototype.showError = function () {\n if (this.parent.engineModule.fieldList[this.field]) {\n delete this.parent.engineModule.fieldList[this.field];\n }\n this.parent.pivotCommon.errorDialog.createErrorDialog(this.parent.localeObj.getConstant('error'), this.parent.localeObj.getConstant('invalidFormula'));\n if (isBlazor()) {\n PivotUtil.updateDataSourceSettings(this.parent, PivotUtil.getClonedDataSourceSettings(this.existingReport));\n }\n else {\n this.parent.setProperties({ dataSourceSettings: this.existingReport }, true);\n }\n if (this.isEdit) {\n var calcFields = this.parent.dataSourceSettings.calculatedFieldSettings;\n for (var i = 0; calcFields && i < calcFields.length; i++) {\n if (calcFields[i].name === this.field) {\n calcFields[i].formula = this.currentFormula;\n break;\n }\n }\n }\n else if (this.parent.engineModule.fields) {\n for (var i = 0; i < this.parent.engineModule.fields.length; i++) {\n if (this.parent.engineModule.fields[i] === this.field) {\n this.parent.engineModule.fields.splice(i, 1);\n break;\n }\n }\n }\n this.parent.lastCalcFieldInfo = {};\n this.parent.updateDataSource(false);\n this.isFormula = false;\n };\n /**\n * To get treeview data\n * @param {PivotGrid|PivotFieldList} parent\n * @returns Object\n */\n CalculatedField.prototype.getFieldListData = function (parent) {\n var fields = [];\n if (this.parent.dataType === 'olap') {\n fields =\n PivotUtil.getClonedData(parent.olapEngineModule.fieldListData ?\n parent.olapEngineModule.fieldListData : []);\n for (var _i = 0, _a = fields; _i < _a.length; _i++) {\n var item = _a[_i];\n if (item.spriteCssClass &&\n (item.spriteCssClass.indexOf('e-attributeCDB-icon') > -1 ||\n item.spriteCssClass.indexOf('e-level-members') > -1)) {\n item.hasChildren = true;\n }\n else if (item.spriteCssClass &&\n (item.spriteCssClass.indexOf('e-namedSetCDB-icon') > -1)) {\n item.hasChildren = false;\n }\n else if (item.spriteCssClass &&\n (item.spriteCssClass.indexOf('e-calcMemberGroupCDB') > -1)) {\n item.expanded = this.isEdit;\n }\n }\n }\n else {\n for (var _b = 0, _c = (parent.engineModule.fieldList ? Object.keys(parent.engineModule.fieldList) : []); _b < _c.length; _b++) {\n var key = _c[_b];\n var type = null;\n var typeVal = null;\n if ((parent.engineModule.fieldList[key].type !== 'number' || parent.engineModule.fieldList[key].type === 'include' ||\n parent.engineModule.fieldList[key].type === 'exclude') &&\n (parent.engineModule.fieldList[key].aggregateType !== 'DistinctCount')) {\n typeVal = COUNT;\n }\n else {\n typeVal = parent.engineModule.fieldList[key].aggregateType !== undefined ?\n (parent.engineModule.fieldList[key].aggregateType) : SUM;\n }\n type = this.parent.localeObj.getConstant(typeVal);\n fields.push({\n index: parent.engineModule.fieldList[key].index,\n name: parent.engineModule.fieldList[key].caption + ' (' + type + ')',\n type: typeVal,\n icon: cls.FORMAT + ' ' + cls.ICON,\n formula: parent.engineModule.fieldList[key].formula,\n field: key,\n caption: parent.engineModule.fieldList[key].caption ? parent.engineModule.fieldList[key].caption : key\n });\n }\n }\n return fields;\n };\n /**\n * Triggers before menu opens.\n * @param {BeforeOpenCloseMenuEventArgs} args\n * @returns {void}\n */\n /**\n * Trigger while drop node in formula field.\n * @param {DragAndDropEventArgs} args\n * @returns {void}\n */\n CalculatedField.prototype.fieldDropped = function (args) {\n args.cancel = true;\n var dropField = select('#' + this.parentID + 'droppable', this.dialog.element);\n removeClass([dropField], 'e-copy-drop');\n removeClass([args.draggedNode.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.SELECTED_NODE_CLASS);\n var field = args.draggedNode.getAttribute('data-field');\n if (this.parent.dataType === 'olap') {\n if (this.parent.olapEngineModule.fieldList[field] &&\n this.parent.olapEngineModule.fieldList[field].isCalculatedField) {\n field = this.parent.olapEngineModule.fieldList[field].tag;\n }\n if (args.target.id === this.parentID + 'droppable' && dropField.value === '') {\n dropField.value = field;\n dropField.focus();\n }\n else if (args.target.id === (this.parentID + 'droppable') && dropField.value !== '') {\n var textCovered = void 0;\n var currentValue = dropField.value;\n var cursorPos = dropField.selectionStart;\n var textAfterText = currentValue.substring(cursorPos, currentValue.length);\n var textBeforeText = currentValue.substring(0, cursorPos);\n textCovered = textBeforeText + field;\n dropField.value = textBeforeText + field + textAfterText;\n dropField.focus();\n dropField.setSelectionRange(textCovered.length, textCovered.length);\n }\n else {\n args.cancel = true;\n }\n }\n else {\n var type = args.draggedNode.getAttribute('data-type');\n if (args.target.id === this.parentID + 'droppable' && dropField.value === '') {\n if (type === CALC) {\n dropField.value = args.draggedNodeData.id.toString();\n }\n else {\n dropField.value = '\"' + type + '(' + field + ')' + '\"';\n }\n dropField.focus();\n }\n else if (args.target.id === (this.parentID + 'droppable') && dropField.value !== '') {\n var textCovered = void 0;\n var cursorPos = dropField.selectionStart;\n var currentValue = dropField.value;\n var textBeforeText = currentValue.substring(0, cursorPos);\n var textAfterText = currentValue.substring(cursorPos, currentValue.length);\n if (type === CALC) {\n textCovered = textBeforeText + args.draggedNodeData.id.toString();\n dropField.value = textBeforeText + args.draggedNodeData.id.toString() + textAfterText;\n }\n else {\n textCovered = textBeforeText + '\"' + type + '(' + field + ')' + '\"';\n dropField.value = textBeforeText + '\"' + type + '(' + field + ')' + '\"' + textAfterText;\n }\n dropField.focus();\n dropField.setSelectionRange(textCovered.length, textCovered.length);\n }\n else {\n args.cancel = true;\n }\n }\n };\n /**\n * To create dialog.\n * @returns {void}\n */\n CalculatedField.prototype.createDialog = function () {\n var _this = this;\n if (select('#' + this.parentID + 'calculateddialog', document) !== null) {\n remove(select('#' + this.parentID + 'calculateddialog', document));\n while (!isNullOrUndefined(document.querySelector('.' + this.parentID + 'calculatedmenu'))) {\n remove(document.querySelector('.' + this.parentID + 'calculatedmenu'));\n }\n }\n this.parent.element.appendChild(createElement('div', {\n id: this.parentID + 'calculateddialog',\n className: cls.CALCDIALOG + ' ' + (this.parent.dataType === 'olap' ? cls.OLAP_CALCDIALOG : '')\n }));\n var calcButtons = [\n {\n click: this.applyFormula.bind(this),\n buttonModel: {\n content: this.parent.localeObj.getConstant('ok'),\n isPrimary: true\n }\n },\n {\n click: this.cancelClick.bind(this),\n buttonModel: {\n content: this.parent.localeObj.getConstant('cancel')\n }\n }\n ];\n if (this.parent.dataType === 'olap') {\n var clearButton = {\n click: this.clearFormula.bind(this),\n buttonModel: {\n cssClass: 'e-calc-clear-btn',\n content: this.parent.localeObj.getConstant('clear'),\n }\n };\n calcButtons.splice(0, 0, clearButton);\n }\n this.dialog = new Dialog({\n allowDragging: true,\n position: { X: 'center', Y: 'center' },\n buttons: calcButtons,\n close: this.closeDialog.bind(this),\n beforeOpen: this.beforeOpen.bind(this),\n open: function () {\n if (select('#' + _this.parentID + 'ddlelement', _this.dialog.element)) {\n select('#' + _this.parentID + 'ddlelement', _this.dialog.element).focus();\n }\n },\n animationSettings: { effect: 'Zoom' },\n width: '25%',\n isModal: false,\n closeOnEscape: true,\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n showCloseIcon: true,\n header: this.parent.localeObj.getConstant('createCalculatedField'),\n target: document.body\n });\n this.dialog.isStringTemplate = true;\n this.dialog.appendTo('#' + this.parentID + 'calculateddialog');\n };\n CalculatedField.prototype.cancelClick = function () {\n this.dialog.close();\n this.isEdit = false;\n };\n CalculatedField.prototype.beforeOpen = function (args) {\n // this.dialog.element.querySelector('.e-dlg-header').innerHTML = this.parent.localeObj.getConstant('createCalculatedField');\n this.dialog.element.querySelector('.e-dlg-header').\n setAttribute('title', this.parent.localeObj.getConstant('createCalculatedField'));\n };\n CalculatedField.prototype.closeDialog = function (args) {\n if (this.parent.getModuleName() === 'pivotfieldlist') {\n this.parent.axisFieldModule.render();\n if (this.parent.renderMode !== 'Fixed') {\n addClass([this.parent.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS)], cls.ICON_HIDDEN);\n this.parent.dialogRenderer.fieldListDialog.show();\n }\n }\n this.treeObj.destroy();\n this.dialog.destroy();\n this.newFields = null;\n if (this.menuObj && !this.menuObj.isDestroyed) {\n this.menuObj.destroy();\n }\n remove(document.getElementById(this.parentID + 'calculateddialog'));\n if (!isNullOrUndefined(document.querySelector('.' + this.parentID + 'calculatedmenu'))) {\n remove(document.querySelector('.' + this.parentID + 'calculatedmenu'));\n }\n var timeOut = ((this.parent.getModuleName() === 'pivotview') ||\n ((this.parent.getModuleName() === 'pivotfieldlist') &&\n this.parent.renderMode === 'Fixed')) ? 0 : 500;\n if (this.buttonCall) {\n this.buttonCall = false;\n setTimeout(this.setFocus.bind(this), timeOut);\n }\n };\n CalculatedField.prototype.setFocus = function () {\n var parentElement;\n if (this.parent.getModuleName() === 'pivotview' && this.parent.element) {\n parentElement = this.parent.element;\n }\n else if (document.getElementById(this.parent.element.id + '_Wrapper')) {\n parentElement = document.getElementById(this.parent.element.id + '_Wrapper');\n }\n if (parentElement) {\n var pivotButtons = [].slice.call(parentElement.querySelectorAll('.e-pivot-button'));\n for (var _i = 0, pivotButtons_1 = pivotButtons; _i < pivotButtons_1.length; _i++) {\n var item = pivotButtons_1[_i];\n if (item.getAttribute('data-uid') === this.currentFieldName) {\n item.focus();\n break;\n }\n }\n }\n };\n /**\n * To render dialog elements.\n * @returns {void}\n */\n CalculatedField.prototype.renderDialogElements = function () {\n var outerDiv = createElement('div', {\n id: this.parentID + 'outerDiv',\n className: (this.parent.dataType === 'olap' ? cls.OLAP_CALCOUTERDIV + ' ' : '') + cls.CALCOUTERDIV\n });\n var olapFieldTreeDiv = createElement('div', { id: this.parentID + 'Olap_Tree_Div', className: 'e-olap-field-tree-div' });\n var olapCalcDiv = createElement('div', { id: this.parentID + 'Olap_Calc_Div', className: 'e-olap-calculated-div' });\n if (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.\n dialogRenderer.parentElement.querySelector('.' + cls.FORMULA) !== null && this.parent.isAdaptive) {\n var accordDiv = createElement('div', { id: this.parentID + 'accordDiv', className: cls.CALCACCORD });\n outerDiv.appendChild(accordDiv);\n var buttonDiv = createElement('div', { id: this.parentID + 'buttonDiv', className: cls.CALCBUTTONDIV });\n var addBtn = createElement('button', {\n id: this.parentID + 'addBtn', innerHTML: this.parent.localeObj.getConstant('add'),\n className: cls.CALCADDBTN, attrs: { 'type': 'button' }\n });\n var cancelBtn = createElement('button', {\n id: this.parentID + 'cancelBtn', innerHTML: this.parent.localeObj.getConstant('cancel'),\n className: cls.CALCCANCELBTN, attrs: { 'type': 'button' }\n });\n buttonDiv.appendChild(cancelBtn);\n buttonDiv.appendChild(addBtn);\n outerDiv.appendChild(buttonDiv);\n }\n else {\n if (!this.parent.isAdaptive && this.parent.dataType === 'olap') {\n var formulaTitle = createElement('div', {\n className: cls.PIVOT_FIELD_TITLE_CLASS, id: this.parentID + '_' + 'FieldNameTitle',\n innerHTML: this.parent.localeObj.getConstant('fieldTitle')\n });\n olapCalcDiv.appendChild(formulaTitle);\n }\n var inputDiv = createElement('div', { id: this.parentID + 'outerDiv', className: cls.CALCINPUTDIV });\n var inputObj = createElement('input', {\n id: this.parentID + 'ddlelement',\n attrs: { 'type': 'text' },\n className: cls.CALCINPUT\n });\n inputDiv.appendChild(inputObj);\n (this.parent.dataType === 'olap' && !this.parent.isAdaptive ? olapCalcDiv.appendChild(inputDiv) : outerDiv.appendChild(inputDiv));\n var wrapDiv = createElement('div', { id: this.parentID + 'control_wrapper', className: cls.TREEVIEWOUTER });\n if (!this.parent.isAdaptive) {\n var fieldTitle = createElement('div', {\n className: cls.PIVOT_ALL_FIELD_TITLE_CLASS,\n innerHTML: (this.parent.dataType === 'olap' ? this.parent.localeObj.getConstant('allFields') :\n this.parent.localeObj.getConstant('formulaField'))\n });\n if (this.parent.dataType === 'olap') {\n var headerWrapperDiv = createElement('div', { className: cls.PIVOT_ALL_FIELD_TITLE_CLASS + '-wrapper' });\n headerWrapperDiv.appendChild(fieldTitle);\n var spanElement = createElement('span', {\n attrs: {\n 'tabindex': '0',\n 'aria-disabled': 'false',\n 'aria-label': this.parent.localeObj.getConstant('fieldTooltip'),\n },\n className: cls.ICON + ' ' + cls.CALC_INFO\n });\n headerWrapperDiv.appendChild(spanElement);\n var tooltip = new Tooltip({\n content: this.parent.localeObj.getConstant('fieldTooltip'),\n position: (this.parent.enableRtl ? 'RightCenter' : 'LeftCenter'),\n target: '.' + cls.CALC_INFO,\n offsetY: (this.parent.enableRtl ? -10 : -10),\n locale: this.parent.locale,\n enableRtl: this.parent.enableRtl,\n width: 220\n });\n tooltip.appendTo(headerWrapperDiv);\n wrapDiv.appendChild(headerWrapperDiv);\n }\n else {\n outerDiv.appendChild(fieldTitle);\n }\n }\n var treeOuterDiv = createElement('div', { className: cls.TREEVIEW + '-outer-div' });\n wrapDiv.appendChild(treeOuterDiv);\n treeOuterDiv.appendChild(createElement('div', { id: this.parentID + 'tree', className: cls.TREEVIEW }));\n (this.parent.dataType === 'olap' && !this.parent.isAdaptive ? olapFieldTreeDiv.appendChild(wrapDiv) : outerDiv.appendChild(wrapDiv));\n if (!this.parent.isAdaptive) {\n var formulaTitle = createElement('div', {\n className: cls.PIVOT_FORMULA_TITLE_CLASS,\n innerHTML: (this.parent.dataType === 'olap' ? this.parent.localeObj.getConstant('expressionField') :\n this.parent.localeObj.getConstant('formula'))\n });\n (this.parent.dataType === 'olap' ? olapCalcDiv.appendChild(formulaTitle) : outerDiv.appendChild(formulaTitle));\n }\n var dropDiv = createElement('textarea', {\n id: this.parentID + 'droppable',\n className: cls.FORMULA + ' e-control e-textbox e-input',\n attrs: {\n 'placeholder': this.parent.isAdaptive ? this.parent.localeObj.getConstant('dropTextMobile') :\n (this.parent.dataType === 'olap' ? this.parent.localeObj.getConstant('olapDropText') :\n this.parent.localeObj.getConstant('dropText'))\n }\n });\n (this.parent.dataType === 'olap' && !this.parent.isAdaptive ? olapCalcDiv.appendChild(dropDiv) : outerDiv.appendChild(dropDiv));\n if (this.parent.isAdaptive) {\n var buttonDiv = createElement('div', { id: this.parentID + 'buttonDiv', className: cls.CALCBUTTONDIV });\n var okBtn = createElement('button', {\n id: this.parentID + 'okBtn', innerHTML: this.parent.localeObj.getConstant('apply'),\n className: cls.CALCOKBTN, attrs: { 'type': 'button' }\n });\n buttonDiv.appendChild(okBtn);\n outerDiv.appendChild(buttonDiv);\n }\n if (this.parent.dataType === 'olap') {\n if (!this.parent.isAdaptive) {\n var memberTypeTitle = createElement('div', {\n className: cls.OLAP_MEMBER_TITLE_CLASS,\n innerHTML: this.parent.localeObj.getConstant('memberType')\n });\n olapCalcDiv.appendChild(memberTypeTitle);\n }\n var memberTypeDrop = createElement('div', { id: this.parentID + 'Member_Type_Div', className: cls.CALC_MEMBER_TYPE_DIV });\n (this.parent.isAdaptive ? outerDiv.appendChild(memberTypeDrop) : olapCalcDiv.appendChild(memberTypeDrop));\n if (!this.parent.isAdaptive) {\n var hierarchyTitle = createElement('div', {\n className: cls.OLAP_HIERARCHY_TITLE_CLASS,\n innerHTML: this.parent.localeObj.getConstant('selectedHierarchy')\n });\n olapCalcDiv.appendChild(hierarchyTitle);\n }\n var hierarchyDrop = createElement('div', { id: this.parentID + 'Hierarchy_List_Div', className: cls.CALC_HIERARCHY_LIST_DIV });\n (this.parent.isAdaptive ? outerDiv.appendChild(hierarchyDrop) : olapCalcDiv.appendChild(hierarchyDrop));\n if (!this.parent.isAdaptive) {\n var formatTitle = createElement('div', {\n className: cls.OLAP_FORMAT_TITLE_CLASS,\n innerHTML: this.parent.localeObj.getConstant('formatString')\n });\n olapCalcDiv.appendChild(formatTitle);\n }\n var formatDrop = createElement('div', { id: this.parentID + 'Format_Div', className: cls.CALC_FORMAT_TYPE_DIV });\n (this.parent.isAdaptive ? outerDiv.appendChild(formatDrop) : olapCalcDiv.appendChild(formatDrop));\n var customFormatDiv = createElement('div', { id: this.parentID + 'custom_Format_Div', className: cls.OLAP_CALC_CUSTOM_FORMAT_INPUTDIV });\n var customFormatObj = createElement('input', {\n id: this.parentID + 'Custom_Format_Element',\n attrs: { 'type': 'text' },\n className: cls.CALC_FORMAT_INPUT\n });\n customFormatDiv.appendChild(customFormatObj);\n olapCalcDiv.appendChild(customFormatDiv);\n (this.parent.isAdaptive ? outerDiv.appendChild(customFormatDiv) : olapCalcDiv.appendChild(customFormatDiv));\n if (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.\n dialogRenderer.parentElement.querySelector('.' + cls.FORMULA) === null && this.parent.isAdaptive) {\n var okBtn = outerDiv.querySelector('.' + cls.CALCOKBTN);\n outerDiv.appendChild(okBtn);\n }\n else {\n outerDiv.appendChild(olapFieldTreeDiv);\n outerDiv.appendChild(olapCalcDiv);\n }\n }\n else {\n var customFormatDiv = createElement('div', { id: this.parentID + 'custom_Format_Div', className: cls.CALC_CUSTOM_FORMAT_INPUTDIV });\n if (!this.parent.isAdaptive) {\n var formatTitle = createElement('div', {\n className: cls.OLAP_FORMAT_TITLE_CLASS,\n innerHTML: this.parent.localeObj.getConstant('formatString')\n });\n customFormatDiv.appendChild(formatTitle);\n }\n var customFormatObj = createElement('input', {\n id: this.parentID + 'Custom_Format_Element',\n attrs: { 'type': 'text' },\n className: cls.CALC_FORMAT_INPUT\n });\n customFormatDiv.appendChild(customFormatObj);\n (this.parent.isAdaptive ? outerDiv.insertBefore(customFormatDiv, select('#' + this.parentID + 'buttonDiv', outerDiv)) : outerDiv.appendChild(customFormatDiv));\n }\n }\n return outerDiv;\n };\n /**\n * To create calculated field adaptive layout.\n * @returns {void}\n */\n CalculatedField.prototype.renderAdaptiveLayout = function (isEdit) {\n var dialogElement = this.parent.dialogRenderer.adaptiveElement;\n if (isEdit) {\n if (select('#' + this.parentID + 'droppable', dialogElement.element)) {\n this.formulaText = select('#' + this.parentID + 'droppable', document).value;\n this.fieldText = this.inputObj.value;\n }\n if (dialogElement.element.querySelector('.' + cls.CALC_MEMBER_TYPE_DIV)) {\n var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement.element), DropDownList);\n this.fieldType = memberTypeDrop.value;\n }\n if (dialogElement.element.querySelector('.' + cls.CALC_HIERARCHY_LIST_DIV)) {\n var hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement.element), DropDownList);\n this.parentHierarchy = this.fieldType === 'Dimension' ? hierarchyDrop.value : null;\n }\n if (dialogElement.element.querySelector('.' + cls.CALC_FORMAT_TYPE_DIV)) {\n var formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement.element), DropDownList);\n this.formatType = formatDrop.value;\n }\n if (dialogElement.element.querySelector('.' + cls.CALC_FORMAT_INPUT)) {\n var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement.element), MaskedTextBox);\n this.formatText = this.parent.dataType === 'olap' ? this.formatType === 'Custom' ? customFormat.value : null : customFormat.value;\n }\n }\n else {\n this.currentFieldName = this.formulaText = this.fieldText = this.formatText = null;\n this.fieldType = this.formatType = this.parentHierarchy = null;\n }\n this.renderMobileLayout(dialogElement);\n };\n /**\n * To update calculated field info in adaptive layout.\n * @returns {void}\n */\n CalculatedField.prototype.updateAdaptiveCalculatedField = function (isEdit, fieldName) {\n var dialogElement = this.parent.dialogRenderer.adaptiveElement.element;\n this.isEdit = isEdit;\n var calcInfo = (isEdit ? (this.parent.dataType === 'pivot' ?\n this.parent.engineModule.fieldList[fieldName] : this.parent.olapEngineModule.fieldList[fieldName]) :\n {\n id: null, caption: null, formula: null, fieldType: 'Measure',\n formatString: (this.parent.dataType === 'pivot' ? null : 'Standard'), parentHierarchy: null\n });\n this.currentFieldName = calcInfo.id;\n if (select('#' + this.parentID + 'droppable', document)) {\n this.formulaText = select('#' + this.parentID + 'droppable', document).value = calcInfo.formula;\n this.fieldText = this.inputObj.value = calcInfo.caption;\n this.inputObj.dataBind();\n }\n if (dialogElement.querySelector('.' + cls.CALC_MEMBER_TYPE_DIV)) {\n var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);\n this.fieldType = memberTypeDrop.value = calcInfo.fieldType;\n memberTypeDrop.readonly = isEdit ? true : false;\n memberTypeDrop.dataBind();\n }\n if (dialogElement.querySelector('.' + cls.CALC_HIERARCHY_LIST_DIV)) {\n var hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);\n if (this.fieldType === 'Dimension') {\n this.parentHierarchy = hierarchyDrop.value = calcInfo.parentHierarchy;\n }\n else {\n this.parentHierarchy = null;\n hierarchyDrop.index = 0;\n }\n hierarchyDrop.dataBind();\n }\n if (dialogElement.querySelector('.' + cls.CALC_FORMAT_TYPE_DIV)) {\n var formatStringData = ['Standard', 'Currency', 'Percent'];\n var formatDrop = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);\n this.formatType = formatDrop.value = (formatStringData.indexOf(calcInfo.formatString) > -1 ? calcInfo.formatString : 'Custom');\n }\n if (dialogElement.querySelector('.' + cls.CALC_FORMAT_INPUT)) {\n var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);\n var formatObj = PivotUtil.getFieldByName(fieldName, this.parent.dataSourceSettings.formatSettings);\n if (this.parent.dataType === 'pivot') {\n this.formatText = customFormat.value = formatObj ? formatObj.format : null;\n }\n else {\n this.formatText = customFormat.value = (this.formatType === 'Custom' ? calcInfo.formatString : null);\n }\n customFormat.dataBind();\n }\n };\n /* eslint-enable max-len */\n /**\n * To create treeview.\n * @returns {void}\n */\n CalculatedField.prototype.createOlapDropElements = function () {\n var _this = this;\n var dialogElement = (this.parent.isAdaptive ?\n this.parent.dialogRenderer.parentElement : this.dialog.element);\n var mData = [];\n var fData = [];\n var fieldData = [];\n var memberTypeData = ['Measure', 'Dimension'];\n var formatStringData = ['Standard', 'Currency', 'Percent', 'Custom'];\n for (var _i = 0, memberTypeData_1 = memberTypeData; _i < memberTypeData_1.length; _i++) {\n var type = memberTypeData_1[_i];\n mData.push({ value: type, text: this.parent.localeObj.getConstant(type) });\n }\n for (var _a = 0, formatStringData_1 = formatStringData; _a < formatStringData_1.length; _a++) {\n var format = formatStringData_1[_a];\n fData.push({ value: format, text: this.parent.localeObj.getConstant(format) });\n }\n var fields = PivotUtil.getClonedData(this.parent.olapEngineModule.fieldListData);\n for (var _b = 0, _c = fields; _b < _c.length; _b++) {\n var item = _c[_b];\n if (item.spriteCssClass &&\n (item.spriteCssClass.indexOf('e-attributeCDB-icon') > -1 ||\n item.spriteCssClass.indexOf('e-hierarchyCDB-icon') > -1)) {\n fieldData.push({ value: item.id, text: item.caption });\n }\n }\n var memberTypeObj = new DropDownList({\n dataSource: mData, enableRtl: this.parent.enableRtl, locale: this.parent.locale,\n fields: { value: 'value', text: 'text' },\n value: this.fieldType !== null ? this.fieldType : mData[0].value,\n readonly: this.isEdit,\n cssClass: cls.MEMBER_OPTIONS_CLASS, width: '100%',\n change: function (args) {\n hierarchyListObj.enabled = args.value === 'Dimension' ? true : false;\n _this.fieldType = args.value;\n _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;\n hierarchyListObj.dataBind();\n }\n });\n memberTypeObj.isStringTemplate = true;\n memberTypeObj.appendTo(select('#' + this.parentID + 'Member_Type_Div', dialogElement));\n var hierarchyListObj = new DropDownList({\n dataSource: fieldData, enableRtl: this.parent.enableRtl, locale: this.parent.locale,\n allowFiltering: true,\n enabled: memberTypeObj.value === 'Dimension' ? true : false,\n filterBarPlaceholder: this.parent.localeObj.getConstant('example') + ' ' + fieldData[0].text.toString(),\n fields: { value: 'value', text: 'text' },\n value: this.parentHierarchy !== null && memberTypeObj.value === 'Dimension' ?\n this.parentHierarchy : fieldData[0].value,\n cssClass: cls.MEMBER_OPTIONS_CLASS, width: '100%',\n change: function (args) {\n _this.parentHierarchy = args.value;\n _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;\n }\n });\n hierarchyListObj.isStringTemplate = true;\n hierarchyListObj.appendTo(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement));\n var formatStringObj = new DropDownList({\n dataSource: fData, enableRtl: this.parent.enableRtl, locale: this.parent.locale,\n fields: { value: 'value', text: 'text' },\n value: this.formatType !== null ? this.formatType : fData[0].value,\n cssClass: cls.MEMBER_OPTIONS_CLASS, width: '100%',\n change: function (args) {\n customerFormatObj.enabled = args.value === 'Custom' ? true : false;\n _this.formatType = args.value;\n _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;\n customerFormatObj.dataBind();\n }\n });\n formatStringObj.isStringTemplate = true;\n formatStringObj.appendTo(select('#' + this.parentID + 'Format_Div', dialogElement));\n var customerFormatObj = new MaskedTextBox({\n placeholder: this.parent.localeObj.getConstant('customFormat'),\n locale: this.parent.locale, enableRtl: this.parent.enableRtl,\n value: this.formatText !== null && formatStringObj.value === 'Custom' ? this.formatText : null,\n enabled: formatStringObj.value === 'Custom' ? true : false,\n change: function (args) {\n _this.formatText = args.value;\n _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;\n }\n });\n customerFormatObj.isStringTemplate = true;\n customerFormatObj.appendTo('#' + this.parentID + 'Custom_Format_Element');\n };\n /**\n * To create treeview.\n * @returns {void}\n */\n CalculatedField.prototype.createTreeView = function () {\n var _this = this;\n if (this.parent.dataType === 'olap') {\n this.treeObj = new TreeView({\n fields: { dataSource: this.getFieldListData(this.parent), id: 'id', text: 'caption', parentID: 'pid', iconCss: 'spriteCssClass' },\n allowDragAndDrop: true,\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n nodeDragStart: this.dragStart.bind(this),\n nodeDragging: function (e) {\n if (e.event.target && e.event.target.classList.contains(cls.FORMULA)) {\n removeClass([e.clonedNode], cls.NO_DRAG_CLASS);\n addClass([e.event.target], 'e-copy-drop');\n }\n else {\n addClass([e.clonedNode], cls.NO_DRAG_CLASS);\n removeClass([e.event.target], 'e-copy-drop');\n e.dropIndicator = 'e-no-drop';\n addClass([e.clonedNode.querySelector('.' + cls.ICON)], 'e-icon-expandable');\n removeClass([e.clonedNode.querySelector('.' + cls.ICON)], 'e-list-icon');\n }\n },\n nodeClicked: this.fieldClickHandler.bind(this),\n nodeSelected: function (args) {\n if (args.node.getAttribute('data-type') === CALC) {\n _this.displayMenu(args.node);\n }\n else {\n removeClass([args.node], 'e-active');\n args.cancel = true;\n }\n },\n nodeDragStop: this.fieldDropped.bind(this),\n drawNode: this.drawTreeNode.bind(this),\n nodeExpanding: this.updateNodeIcon.bind(this),\n nodeCollapsed: this.updateNodeIcon.bind(this),\n sortOrder: 'None'\n });\n }\n else {\n this.treeObj = new TreeView({\n fields: { dataSource: this.getFieldListData(this.parent), id: 'formula', text: 'name', iconCss: 'icon' },\n allowDragAndDrop: true,\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n nodeCollapsing: this.nodeCollapsing.bind(this),\n nodeDragStart: this.dragStart.bind(this),\n nodeClicked: this.fieldClickHandler.bind(this),\n nodeDragStop: this.fieldDropped.bind(this),\n drawNode: this.drawTreeNode.bind(this),\n keyPress: function (args) {\n if (args.event.keyCode === 39) {\n args.cancel = true;\n }\n },\n sortOrder: 'Ascending'\n });\n }\n this.treeObj.isStringTemplate = true;\n this.treeObj.appendTo('#' + this.parentID + 'tree');\n };\n CalculatedField.prototype.updateNodeIcon = function (args) {\n if (args.node && args.node.querySelector('.e-list-icon') &&\n args.node.querySelector('.e-icon-expandable.e-process') &&\n (args.node.querySelector('.e-list-icon').className.indexOf('e-folderCDB-icon') > -1)) {\n var node = args.node.querySelector('.e-list-icon');\n removeClass([node], 'e-folderCDB-icon');\n addClass([node], 'e-folderCDB-open-icon');\n }\n else if (args.node && args.node.querySelector('.e-list-icon') &&\n args.node.querySelector('.e-icon-expandable') &&\n (args.node.querySelector('.e-list-icon').className.indexOf('e-folderCDB-open-icon') > -1)) {\n var node = args.node.querySelector('.e-list-icon');\n removeClass([node], 'e-folderCDB-open-icon');\n addClass([node], 'e-folderCDB-icon');\n }\n else {\n var curTreeData = this.treeObj.fields.dataSource;\n var fieldListData = curTreeData;\n var childNodes = [];\n for (var _i = 0, fieldListData_1 = fieldListData; _i < fieldListData_1.length; _i++) {\n var item = fieldListData_1[_i];\n if (item.pid === args.nodeData.id.toString()) {\n childNodes.push(item);\n }\n }\n if (childNodes.length === 0) {\n this.parent.olapEngineModule.calcChildMembers = [];\n this.parent.olapEngineModule.getCalcChildMembers(this.parent.dataSourceSettings, args.nodeData.id.toString());\n childNodes = this.parent.olapEngineModule.calcChildMembers;\n this.parent.olapEngineModule.calcChildMembers = [];\n for (var _a = 0, childNodes_1 = childNodes; _a < childNodes_1.length; _a++) {\n var node = childNodes_1[_a];\n node.pid = args.nodeData.id.toString();\n node.hasChildren = false;\n node.spriteCssClass = 'e-level-members';\n node.caption = (node.caption === '' ? this.parent.localeObj.getConstant('blank') : node.caption);\n curTreeData.push(node);\n }\n this.treeObj.addNodes(childNodes, args.node);\n }\n else {\n return;\n }\n }\n };\n CalculatedField.prototype.nodeCollapsing = function (args) {\n args.cancel = true;\n };\n CalculatedField.prototype.dragStart = function (args) {\n var isDrag = false;\n var dragItem = args.clonedNode;\n if (dragItem && ((this.parent.dataType === 'olap' &&\n (dragItem.querySelector('.e-calc-dimension-icon,.e-calc-measure-icon,.e-measure-icon') ||\n dragItem.querySelector('.e-dimensionCDB-icon,.e-attributeCDB-icon,.e-hierarchyCDB-icon') ||\n dragItem.querySelector('.e-level-members,.e-namedSetCDB-icon'))) || (this.parent.dataType === 'pivot' &&\n args.event.target.classList.contains(cls.DRAG_CLASS)))) {\n isDrag = true;\n }\n if (isDrag) {\n addClass([args.draggedNode.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.SELECTED_NODE_CLASS);\n addClass([dragItem], cls.PIVOTCALC);\n dragItem.style.zIndex = (this.dialog.zIndex + 1).toString();\n dragItem.style.display = 'inline';\n }\n else {\n args.cancel = true;\n }\n };\n /**\n * Trigger before treeview text append.\n * @param {DrawNodeEventArgs} args\n * @returns {void}\n */\n CalculatedField.prototype.drawTreeNode = function (args) {\n if (this.parent.dataType === 'olap') {\n if (args.node.querySelector('.e-measure-icon')) {\n args.node.querySelector('.e-list-icon').style.display = 'none';\n }\n var field = args.nodeData;\n args.node.setAttribute('data-field', field.id);\n args.node.setAttribute('data-caption', field.caption);\n var liTextElement = args.node.querySelector('.' + cls.TEXT_CONTENT_CLASS);\n if (args.nodeData && args.nodeData.type === CALC &&\n liTextElement && args.node.querySelector('.e-list-icon.e-calc-member')) {\n args.node.setAttribute('data-type', field.type);\n args.node.setAttribute('data-membertype', field.fieldType);\n args.node.setAttribute('data-hierarchy', field.parentHierarchy ? field.parentHierarchy : '');\n args.node.setAttribute('data-formula', field.formula);\n var formatStringData = ['Standard', 'Currency', 'Percent'];\n var formatString = void 0;\n formatString = (field.formatString ? formatStringData.indexOf(field.formatString) > -1 ?\n field.formatString : 'Custom' : '');\n args.node.setAttribute('data-formatString', formatString);\n args.node.setAttribute('data-customString', (formatString === 'Custom' ? field.formatString : ''));\n var removeElement = createElement('span', {\n className: cls.GRID_REMOVE + ' e-icons e-list-icon'\n });\n liTextElement.classList.add('e-calcfieldmember');\n if (this.parent.isAdaptive) {\n var editElement = createElement('span', {\n className: 'e-list-edit-icon' + (this.isEdit && this.currentFieldName === field.id ?\n ' e-edited ' : ' e-edit ') + cls.ICON\n });\n var editWrapper = createElement('div', { className: 'e-list-header-icon' });\n editWrapper.appendChild(editElement);\n editWrapper.appendChild(removeElement);\n liTextElement.appendChild(editWrapper);\n }\n else {\n liTextElement.appendChild(removeElement);\n }\n }\n if (this.parent.isAdaptive) {\n var liTextElement_1 = args.node.querySelector('.' + cls.TEXT_CONTENT_CLASS);\n if (args.node && args.node.querySelector('.e-list-icon') && liTextElement_1) {\n var liIconElement = args.node.querySelector('.e-list-icon');\n liTextElement_1.insertBefore(liIconElement, args.node.querySelector('.e-list-text'));\n }\n if (args.node && args.node.querySelector('.e-calcMemberGroupCDB,.e-measureGroupCDB-icon,.e-folderCDB-icon')) {\n args.node.querySelector('.e-checkbox-wrapper').style.display = 'none';\n }\n if (args.node && args.node.querySelector('.e-level-members')) {\n args.node.querySelector('.e-list-icon').style.display = 'none';\n }\n }\n }\n else {\n var field = args.nodeData.field;\n args.node.setAttribute('data-field', field);\n args.node.setAttribute('data-caption', args.nodeData.caption);\n args.node.setAttribute('data-type', args.nodeData.type);\n var formatObj = PivotUtil.getFieldByName(field, this.parent.dataSourceSettings.formatSettings);\n args.node.setAttribute('data-formatString', formatObj ? formatObj.format : '');\n var dragElement = createElement('span', {\n attrs: { 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('dragField') },\n className: cls.ICON + ' e-drag'\n });\n var spaceElement = createElement('div', {\n className: ' e-iconspace'\n });\n prepend([dragElement], args.node.querySelector('.' + cls.TEXT_CONTENT_CLASS));\n append([spaceElement, args.node.querySelector('.' + cls.FORMAT)], args.node.querySelector('.' + cls.TEXT_CONTENT_CLASS));\n if (this.getMenuItems(this.parent.engineModule.fieldList[field].type).length <= 0) {\n removeClass([args.node.querySelector('.' + cls.FORMAT)], cls.ICON);\n }\n else {\n args.node.querySelector('.' + cls.FORMAT).setAttribute('title', this.parent.localeObj.getConstant('format'));\n }\n if (this.parent.engineModule.fieldList[field].aggregateType === CALC) {\n args.node.querySelector('.' + cls.FORMAT).setAttribute('title', this.parent.localeObj.getConstant('remove'));\n addClass([args.node.querySelector('.' + cls.FORMAT)], cls.GRID_REMOVE);\n addClass([args.node.querySelector('.' + 'e-iconspace')], [cls.CALC_EDIT, cls.ICON, 'e-list-icon']);\n args.node.querySelector('.' + cls.CALC_EDIT).setAttribute('title', this.parent.localeObj.getConstant('edit'));\n args.node.querySelector('.' + cls.CALC_EDIT).setAttribute('aria-disabled', 'false');\n args.node.querySelector('.' + cls.CALC_EDIT).setAttribute('tabindex', '-1');\n removeClass([args.node.querySelector('.' + cls.FORMAT)], cls.FORMAT);\n removeClass([args.node.querySelector('.e-iconspace')], 'e-iconspace');\n }\n }\n };\n /**\n * To create radio buttons.\n * @param {string} key\n * @returns HTMLElement\n */\n CalculatedField.prototype.createTypeContainer = function (key) {\n var wrapDiv = createElement('div', { id: this.parentID + 'control_wrapper', className: cls.TREEVIEWOUTER });\n var type = this.getMenuItems(this.parent.engineModule.fieldList[key].type);\n for (var i = 0; i < type.length; i++) {\n var input = createElement('input', {\n id: this.parentID + 'radio' + key + type[i],\n attrs: { 'type': 'radio', 'data-ftxt': key, 'data-value': type[i] },\n className: cls.CALCRADIO\n });\n wrapDiv.appendChild(input);\n }\n return wrapDiv;\n };\n CalculatedField.prototype.getMenuItems = function (fieldType, summaryType) {\n var menuItems = !isNullOrUndefined(summaryType) ? summaryType : this.parent.aggregateTypes;\n var type = [];\n var menuTypes = this.getValidSummaryType();\n for (var i = 0; i < menuItems.length; i++) {\n if ((menuTypes.indexOf(menuItems[i]) > -1) && (type.indexOf(menuItems[i]) < 0)) {\n if (((menuItems[i] === COUNT || menuItems[i] === DISTINCTCOUNT) && fieldType !== 'number')\n || (fieldType === 'number')) {\n type.push(menuItems[i]);\n }\n }\n }\n return type;\n };\n CalculatedField.prototype.getValidSummaryType = function () {\n return [COUNT, DISTINCTCOUNT,\n SUM, AVG, MEDIAN,\n MIN, MAX, PRODUCT,\n STDEV, STDEVP,\n VAR, VARP];\n };\n /**\n * To get Accordion Data.\n * @param {PivotView | PivotFieldList} parent\n * @returns AccordionItemModel\n */\n CalculatedField.prototype.getAccordionData = function (parent) {\n var data = [];\n var keys = Object.keys(parent.engineModule.fieldList);\n for (var index = 0, i = keys.length; index < i; index++) {\n var key = keys[index];\n data.push({\n header: '
',\n content: (this.parent.engineModule.fieldList[key].aggregateType === CALC ||\n (this.getMenuItems(this.parent.engineModule.fieldList[key].type).length < 1)) ? '' :\n this.createTypeContainer(key).outerHTML,\n iconCss: this.parent.engineModule.fieldList[key].aggregateType === CALC ? 'e-list-icon' + ' ' +\n (this.isEdit && this.currentFieldName === key ? 'e-edited' : 'e-edit') : ''\n });\n }\n return data;\n };\n /**\n * To render mobile layout.\n * @param {Tab} tabObj\n * @returns {void}\n */\n CalculatedField.prototype.renderMobileLayout = function (tabObj) {\n var _this = this;\n tabObj.items[4].content = this.renderDialogElements().outerHTML;\n tabObj.dataBind();\n if (this.parent.dataType === 'olap' && this.parent.isAdaptive && this.parent.\n dialogRenderer.parentElement.querySelector('.' + cls.FORMULA) !== null) {\n this.createOlapDropElements();\n }\n var cancelBtn = new Button({ cssClass: cls.FLAT, isPrimary: true, locale: this.parent.locale, enableRtl: this.parent.enableRtl });\n cancelBtn.isStringTemplate = true;\n cancelBtn.appendTo('#' + this.parentID + 'cancelBtn');\n if (cancelBtn.element) {\n cancelBtn.element.onclick = this.cancelBtnClick.bind(this);\n }\n if (this.parent.\n dialogRenderer.parentElement.querySelector('.' + cls.FORMULA) !== null && this.parent.isAdaptive) {\n var okBtn = new Button({ cssClass: cls.FLAT + ' ' + cls.OUTLINE_CLASS, isPrimary: true, locale: this.parent.locale, enableRtl: this.parent.enableRtl });\n okBtn.isStringTemplate = true;\n okBtn.appendTo('#' + this.parentID + 'okBtn');\n this.inputObj = new MaskedTextBox({\n placeholder: this.parent.localeObj.getConstant('fieldName'),\n locale: this.parent.locale, enableRtl: this.parent.enableRtl,\n change: function (args) {\n _this.fieldText = args.value;\n _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;\n }\n });\n this.inputObj.isStringTemplate = true;\n this.inputObj.appendTo('#' + this.parentID + 'ddlelement');\n if (this.parent.dataType === 'pivot') {\n var formatInputObj = new MaskedTextBox({\n locale: this.parent.locale, enableRtl: this.parent.enableRtl,\n placeholder: this.parent.localeObj.getConstant('numberFormatString'),\n change: function (args) {\n _this.formatText = args.value;\n _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;\n }\n });\n formatInputObj.isStringTemplate = true;\n formatInputObj.appendTo('#' + this.parentID + 'Custom_Format_Element');\n if (this.formatText !== null && this.parent.\n dialogRenderer.parentElement.querySelector('.' + cls.CALC_FORMAT_INPUT) !== null) {\n this.parent.\n dialogRenderer.parentElement.querySelector('.' + cls.CALC_FORMAT_INPUT).value = this.formatText;\n formatInputObj.value = this.formatText;\n }\n }\n if (this.formulaText !== null && select('#' + this.parentID + 'droppable', this.parent.dialogRenderer.parentElement) !== null) {\n var drop = select('#' + this.parentID + 'droppable', this.parent.dialogRenderer.parentElement);\n drop.value = this.formulaText;\n }\n if (this.fieldText !== null && this.parent.\n dialogRenderer.parentElement.querySelector('.' + cls.CALCINPUT) !== null) {\n this.parent.\n dialogRenderer.parentElement.querySelector('.' + cls.CALCINPUT).value = this.fieldText;\n this.inputObj.value = this.fieldText;\n }\n if (okBtn.element) {\n okBtn.element.onclick = this.applyFormula.bind(this);\n }\n }\n else if (this.parent.isAdaptive) {\n var addBtn = new Button({ cssClass: cls.FLAT, isPrimary: true, locale: this.parent.locale, enableRtl: this.parent.enableRtl });\n addBtn.isStringTemplate = true;\n addBtn.appendTo('#' + this.parentID + 'addBtn');\n if (this.parent.dataType === 'olap') {\n this.treeObj = new TreeView({\n fields: { dataSource: this.getFieldListData(this.parent), id: 'id', text: 'caption', parentID: 'pid', iconCss: 'spriteCssClass' },\n showCheckBox: true,\n autoCheck: false,\n sortOrder: 'None',\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n nodeClicked: this.fieldClickHandler.bind(this),\n drawNode: this.drawTreeNode.bind(this),\n nodeExpanding: this.updateNodeIcon.bind(this),\n nodeCollapsed: this.updateNodeIcon.bind(this),\n nodeSelected: function (args) {\n removeClass([args.node], 'e-active');\n args.cancel = true;\n }\n });\n this.treeObj.isStringTemplate = true;\n this.treeObj.appendTo('#' + this.parentID + 'accordDiv');\n }\n else {\n this.accordion = new Accordion({\n items: this.getAccordionData(this.parent),\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n expanding: this.accordionExpand.bind(this),\n clicked: this.accordionClickHandler.bind(this),\n created: this.accordionCreated.bind(this)\n });\n this.accordion.isStringTemplate = true;\n this.accordion.appendTo('#' + this.parentID + 'accordDiv');\n this.updateType();\n }\n if (addBtn.element) {\n addBtn.element.onclick = this.addBtnClick.bind(this);\n }\n }\n };\n CalculatedField.prototype.accordionExpand = function (args) {\n if (args.element.querySelectorAll('.e-radio-wrapper').length === 0) {\n var keys = Object.keys(this.parent.engineModule.fieldList);\n for (var index = 0, i = keys.length; index < i; index++) {\n var key = keys[index];\n var type = this.parent.engineModule.fieldList[key].type !== 'number' ? [COUNT, DISTINCTCOUNT] :\n [SUM, COUNT, AVG, MEDIAN, MIN, MAX, DISTINCTCOUNT, PRODUCT, STDEV, STDEVP, VAR, VARP];\n var radiobutton = void 0;\n if (key === args.element.querySelector('[data-field').getAttribute('data-field')) {\n for (var i_1 = 0; i_1 < type.length; i_1++) {\n radiobutton = new RadioButton({\n label: this.parent.localeObj.getConstant(type[i_1]),\n name: AGRTYPE + key,\n checked: args.element.querySelector('[data-type').getAttribute('data-type') === type[i_1],\n change: this.onChange.bind(this),\n locale: this.parent.locale, enableRtl: this.parent.enableRtl\n });\n radiobutton.isStringTemplate = true;\n radiobutton.appendTo('#' + this.parentID + 'radio' + key + type[i_1]);\n }\n }\n }\n }\n };\n CalculatedField.prototype.onChange = function (args) {\n var type = args.event.target.parentElement.querySelector('.e-label')\n .innerText;\n var field = args.event.target.closest('.e-acrdn-item').\n querySelector('[data-field').getAttribute('data-caption');\n args.event.target.\n closest('.e-acrdn-item').querySelector('.e-label').\n innerText = field + ' (' + type + ')';\n args.event.target.closest('.e-acrdn-item').\n querySelector('[data-type').setAttribute('data-type', args.event.target.getAttribute('data-value'));\n };\n CalculatedField.prototype.updateType = function () {\n var keys = Object.keys(this.parent.engineModule.fieldList);\n for (var index = 0, i = keys.length; index < i; index++) {\n var key = keys[index];\n var type = null;\n if ((this.parent.engineModule.fieldList[key].type !== 'number' ||\n this.parent.engineModule.fieldList[key].type === 'include' ||\n this.parent.engineModule.fieldList[key].type === 'exclude') &&\n (this.parent.engineModule.fieldList[key].aggregateType !== 'DistinctCount')) {\n type = COUNT;\n }\n else {\n type = this.parent.engineModule.fieldList[key].aggregateType !== undefined ?\n this.parent.engineModule.fieldList[key].aggregateType : SUM;\n }\n var checkbox = new CheckBox({\n label: this.parent.engineModule.fieldList[key].caption + ' (' + this.parent.localeObj.getConstant(type) + ')',\n locale: this.parent.locale, enableRtl: this.parent.enableRtl\n });\n checkbox.isStringTemplate = true;\n checkbox.appendTo('#' + this.parentID + '_' + index);\n select('#' + this.parentID + '_' + index, document).setAttribute('data-field', key);\n select('#' + this.parentID + '_' + index, document).setAttribute('data-type', type);\n }\n };\n /**\n * Trigger while click cancel button.\n * @returns {void}\n */\n CalculatedField.prototype.cancelBtnClick = function () {\n this.renderMobileLayout(this.parent.dialogRenderer.adaptiveElement);\n };\n /**\n * Trigger while click add button.\n * @returns {void}\n */\n CalculatedField.prototype.addBtnClick = function () {\n var fieldText = '';\n var field = null;\n var type = null;\n if (this.parent.dataType === 'pivot') {\n var node = document.querySelectorAll('.e-accordion .e-check');\n for (var i = 0; i < node.length; i++) {\n field = node[i].parentElement.querySelector('[data-field]').getAttribute('data-field');\n type = node[i].parentElement.querySelector('[data-field]').getAttribute('data-type');\n if (type.indexOf(CALC) === -1) {\n fieldText = fieldText + ('\"' + type + '(' + field + ')' + '\"');\n }\n else {\n for (var j = 0; j < this.parent.dataSourceSettings.calculatedFieldSettings.length; j++) {\n if (this.parent.dataSourceSettings.calculatedFieldSettings[j].name === field) {\n fieldText = fieldText + this.parent.dataSourceSettings.calculatedFieldSettings[j].formula;\n break;\n }\n }\n }\n }\n }\n else {\n var nodes = this.treeObj.getAllCheckedNodes();\n var olapEngine = this.parent.olapEngineModule;\n for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {\n var item = nodes_1[_i];\n fieldText = fieldText + (olapEngine.fieldList[item] &&\n olapEngine.fieldList[item].type === CALC ? olapEngine.fieldList[item].tag : item);\n }\n }\n this.formulaText = this.formulaText !== null ? (this.formulaText + fieldText) : fieldText;\n this.renderMobileLayout(this.parent.dialogRenderer.adaptiveElement);\n };\n /**\n * To create calculated field dialog elements.\n * @returns {void}\n * @hidden\n */\n CalculatedField.prototype.createCalculatedFieldDialog = function (args) {\n if (this.parent.isAdaptive && this.parent.getModuleName() === 'pivotfieldlist') {\n this.renderAdaptiveLayout(args && args.edit !== undefined ? args.edit : true);\n this.isEdit = (args && args.edit !== undefined ? args.edit : this.isEdit);\n }\n else if (!this.parent.isAdaptive) {\n this.isEdit = (args && args.edit !== undefined ? args.edit : false);\n this.renderDialogLayout();\n if (args && args.edit) {\n var target = this.treeObj.element.querySelector('li[data-field=\"' + args.fieldName + '\"]');\n if (target) {\n addClass([target], ['e-active', 'e-node-focus']);\n target.setAttribute('aria-selected', 'true');\n target.id = this.treeObj.element.id + '_active';\n if (this.parent.dataType === 'pivot') {\n var e = { event: { target: target.querySelector('.e-list-icon.e-edit.e-icons') } };\n this.fieldClickHandler(e);\n }\n else {\n this.displayMenu(target);\n }\n }\n }\n this.dialog.element.style.top = parseInt(this.dialog.element.style.top, 10) < 0 ? '0px' : this.dialog.element.style.top;\n }\n };\n /**\n * To create calculated field desktop layout.\n * @returns {void}\n */\n CalculatedField.prototype.renderDialogLayout = function () {\n this.newFields =\n extend([], this.parent.dataSourceSettings.calculatedFieldSettings, null, true);\n this.createDialog();\n this.dialog.content = this.renderDialogElements();\n this.dialog.refresh();\n this.inputObj = new MaskedTextBox({\n placeholder: this.parent.localeObj.getConstant('fieldName'),\n locale: this.parent.locale, enableRtl: this.parent.enableRtl\n });\n this.inputObj.isStringTemplate = true;\n this.inputObj.appendTo('#' + this.parentID + 'ddlelement');\n if (this.parent.dataType === 'pivot') {\n var customerFormatObj = new MaskedTextBox({\n placeholder: this.parent.localeObj.getConstant('numberFormatString'),\n locale: this.parent.locale, enableRtl: this.parent.enableRtl\n });\n customerFormatObj.isStringTemplate = true;\n customerFormatObj.appendTo('#' + this.parentID + 'Custom_Format_Element');\n }\n if (this.parent.dataType === 'olap' && !this.parent.isAdaptive) {\n this.createOlapDropElements();\n }\n this.createTreeView();\n this.droppable = new Droppable(select('#' + this.parentID + 'droppable'));\n this.keyboardEvents = new KeyboardEvents(this.parent.calculatedFieldModule.dialog.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: { moveRight: 'rightarrow', enter: 'enter', shiftE: 'shift+E', delete: 'delete' },\n eventName: 'keydown'\n });\n };\n /**\n * Creates the error dialog for the unexpected action done.\n * @function createConfirmDialog\n * @returns {void}\n * @hidden\n */\n CalculatedField.prototype.createConfirmDialog = function (title, description, calcInfo, isRemove, node) {\n var errorDialog = createElement('div', {\n id: this.parentID + '_ErrorDialog',\n className: cls.ERROR_DIALOG_CLASS\n });\n this.parent.element.appendChild(errorDialog);\n this.confirmPopUp = new Dialog({\n animationSettings: { effect: 'Fade' },\n allowDragging: false,\n showCloseIcon: true,\n enableRtl: this.parent.enableRtl,\n locale: this.parent.locale,\n width: 'auto',\n height: 'auto',\n position: { X: 'center', Y: 'center' },\n buttons: [\n {\n click: isRemove ? this.removeCalcField.bind(this, node) : this.replaceFormula.bind(this, calcInfo),\n buttonModel: {\n cssClass: cls.OK_BUTTON_CLASS + ' ' + cls.FLAT_CLASS,\n content: isRemove ? this.parent.localeObj.getConstant('yes') : this.parent.localeObj.getConstant('ok'), isPrimary: true\n }\n },\n {\n click: this.removeErrorDialog.bind(this),\n buttonModel: {\n cssClass: cls.CANCEL_BUTTON_CLASS,\n content: isRemove ? this.parent.localeObj.getConstant('no') : this.parent.localeObj.getConstant('cancel'), isPrimary: true\n }\n }\n ],\n header: title,\n content: description,\n isModal: true,\n visible: true,\n closeOnEscape: true,\n target: document.body,\n close: this.removeErrorDialog.bind(this),\n });\n /* eslint-enable max-len */\n this.confirmPopUp.isStringTemplate = true;\n this.confirmPopUp.appendTo(errorDialog);\n // this.confirmPopUp.element.querySelector('.e-dlg-header').innerHTML = title;\n };\n CalculatedField.prototype.replaceFormula = function (calcInfo) {\n var report = this.parent.dataSourceSettings;\n if (this.parent.dataType === 'olap') {\n for (var j = 0; j < report.calculatedFieldSettings.length; j++) {\n if (report.calculatedFieldSettings[j].name === calcInfo.name) {\n if (!isNullOrUndefined(calcInfo.hierarchyUniqueName)) {\n report.calculatedFieldSettings[j].hierarchyUniqueName = calcInfo.hierarchyUniqueName;\n }\n report.calculatedFieldSettings[j].formatString = calcInfo.formatString;\n report.calculatedFieldSettings[j].formula = calcInfo.formula;\n this.parent.lastCalcFieldInfo = report.calculatedFieldSettings[j];\n break;\n }\n }\n }\n else {\n for (var i = 0; i < report.values.length; i++) {\n if (report.values[i].type === CALC && report.values[i].name === calcInfo.name) {\n for (var j = 0; j < report.calculatedFieldSettings.length; j++) {\n if (report.calculatedFieldSettings[j].name === calcInfo.name) {\n report.calculatedFieldSettings[j].formula = calcInfo.formula;\n this.parent.lastCalcFieldInfo = report.calculatedFieldSettings[j];\n this.updateFormatSettings(report, calcInfo.name, calcInfo.formatString);\n }\n }\n }\n }\n }\n this.addFormula(report, calcInfo.name);\n this.removeErrorDialog();\n };\n CalculatedField.prototype.removeErrorDialog = function () {\n if (document.getElementById(this.parentID + '_ErrorDialog')) {\n remove(document.getElementById(this.parentID + '_ErrorDialog').parentElement);\n }\n };\n /**\n * To add event listener.\n * @returns {void}\n * @hidden\n */\n CalculatedField.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.initCalculatedField, this.createCalculatedFieldDialog, this);\n };\n /**\n * To remove event listener.\n * @returns {void}\n * @hidden\n */\n CalculatedField.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.initCalculatedField, this.createCalculatedFieldDialog);\n };\n /**\n * To destroy the calculated field dialog\n * @returns {void}\n * @hidden\n */\n CalculatedField.prototype.destroy = function () {\n this.removeEventListener();\n };\n return CalculatedField;\n}());\nexport { CalculatedField };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { EventHandler, Property, Internationalization, NotifyPropertyChanges, isBlazor } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, Animation, Browser } from '@syncfusion/ej2-base';\nimport { cldrData, L10n, Component, getDefaultDateObject, rippleEffect, Event } from '@syncfusion/ej2-base';\nimport { remove, addClass, detach, removeClass, closest, append, attributes, setStyleAttribute } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit, getValue, extend, getUniqueID, blazorCultureFormats } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { ListBase } from '@syncfusion/ej2-lists';\nvar WRAPPERCLASS = 'e-time-wrapper';\nvar POPUP = 'e-popup';\nvar ERROR = 'e-error';\nvar POPUPDIMENSION = '240px';\nvar DAY = new Date().getDate();\nvar MONTH = new Date().getMonth();\nvar YEAR = new Date().getFullYear();\nvar ROOT = 'e-timepicker';\nvar LIBRARY = 'e-lib';\nvar CONTROL = 'e-control';\nvar CONTENT = 'e-content';\nvar SELECTED = 'e-active';\nvar HOVER = 'e-hover';\nvar NAVIGATION = 'e-navigation';\nvar DISABLED = 'e-disabled';\nvar ICONANIMATION = 'e-icon-anim';\nvar TIMEICON = 'e-time-icon';\nvar CLEARICON = 'e-clear-icon';\nvar FOCUS = 'e-input-focus';\nvar LISTCLASS = 'e-list-item';\nvar HALFPOSITION = 2;\nvar ANIMATIONDURATION = 50;\nvar OVERFLOW = 'e-time-overflow';\nvar OFFSETVAL = 4;\nvar EDITABLE = 'e-non-edit';\nvar wrapperAttributes = ['title', 'class', 'style'];\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport var TimePickerBase;\n(function (TimePickerBase) {\n // eslint-disable-next-line max-len, jsdoc/require-jsdoc\n function createListItems(createdEl, min, max, globalize, timeFormat, step) {\n var formatOptions;\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: timeFormat, type: 'time' };\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n formatOptions = { format: timeFormat, type: 'time', calendar: 'islamic' };\n }\n var start;\n var interval = step * 60000;\n var listItems = [];\n var timeCollections = [];\n start = +(min.setMilliseconds(0));\n var end = +(max.setMilliseconds(0));\n while (end >= start) {\n timeCollections.push(start);\n listItems.push(globalize.formatDate(new Date(start), { format: timeFormat, type: 'time' }));\n start += interval;\n }\n var listTag = ListBase.createList(createdEl, listItems, null, true);\n return { collection: timeCollections, list: listTag };\n }\n TimePickerBase.createListItems = createListItems;\n})(TimePickerBase || (TimePickerBase = {}));\n/**\n * TimePicker is an intuitive interface component which provides an options to select a time value\n * from popup list or to set a desired time value.\n * ```\n *
\n * \n * ```\n */\nvar TimePicker = /** @class */ (function (_super) {\n __extends(TimePicker, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {TimePickerModel} options - Specifies the TimePicker model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function TimePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.liCollections = [];\n _this.timeCollections = [];\n _this.blazorTimeCollections = [];\n _this.disableItemCollection = [];\n _this.invalidValueString = null;\n _this.isBlazorServer = false;\n _this.isAngular = false;\n _this.preventChange = false;\n _this.timeOptions = options;\n return _this;\n }\n /**\n * Initialize the event handler\n *\n * @returns {void}\n * @private\n */\n TimePicker.prototype.preRender = function () {\n this.keyConfigure = {\n enter: 'enter',\n escape: 'escape',\n end: 'end',\n tab: 'tab',\n home: 'home',\n down: 'downarrow',\n up: 'uparrow',\n left: 'leftarrow',\n right: 'rightarrow',\n open: 'alt+downarrow',\n close: 'alt+uparrow'\n };\n this.cloneElement = this.element.cloneNode(true);\n removeClass([this.cloneElement], [ROOT, CONTROL, LIBRARY]);\n this.inputElement = this.element;\n this.angularTag = null;\n this.formElement = closest(this.element, 'form');\n this.isBlazorServer = (isBlazor() && this.isServerRendered && this.getModuleName() === 'timepicker') ? true : false;\n if (!this.isBlazorServer) {\n if (this.element.tagName === 'EJS-TIMEPICKER') {\n this.angularTag = this.element.tagName;\n this.inputElement = this.createElement('input');\n this.element.appendChild(this.inputElement);\n }\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n this.openPopupEventArgs = {\n appendTo: document.body\n };\n }\n };\n // element creation\n TimePicker.prototype.render = function () {\n if (!this.isBlazorServer) {\n this.initialize();\n this.createInputElement();\n this.updateHtmlAttributeToWrapper();\n this.setTimeAllowEdit();\n this.setEnable();\n this.validateInterval();\n }\n else {\n this.globalize = new Internationalization(this.locale);\n this.defaultCulture = new Internationalization('en');\n this.checkTimeFormat();\n var parentElement = this.element.parentElement;\n this.inputWrapper = {\n container: parentElement,\n clearButton: parentElement.querySelector('.' + CLEARICON),\n buttons: [parentElement.querySelector('.' + TIMEICON)]\n };\n Input.bindInitialEvent({\n element: this.inputElement,\n floatLabelType: this.floatLabelType\n });\n if (this.showClearButton && this.inputWrapper.clearButton) {\n Input.wireClearBtnEvents(this.inputElement, this.inputWrapper.clearButton, this.inputWrapper.container);\n }\n }\n this.bindEvents();\n if (!this.isBlazorServer) {\n this.validateDisable();\n this.setValue(this.getFormattedValue(this.value));\n }\n this.anchor = this.inputElement;\n this.inputElement.setAttribute('value', this.inputElement.value);\n if (!this.isBlazorServer) {\n this.inputEleValue = this.getDateObject(this.inputElement.value);\n }\n this.renderComplete();\n };\n TimePicker.prototype.setTimeAllowEdit = function () {\n if (this.allowEdit) {\n if (!this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n }\n else {\n attributes(this.inputElement, { 'readonly': '' });\n }\n this.clearIconState();\n };\n TimePicker.prototype.clearIconState = function () {\n if (!this.allowEdit && this.inputWrapper && !this.readonly) {\n if (this.inputElement.value === '') {\n removeClass([this.inputWrapper.container], [EDITABLE]);\n }\n else {\n addClass([this.inputWrapper.container], [EDITABLE]);\n }\n }\n else if (this.inputWrapper) {\n removeClass([this.inputWrapper.container], [EDITABLE]);\n }\n };\n TimePicker.prototype.validateDisable = function () {\n this.setMinMax(this.initMin, this.initMax);\n this.popupCreation();\n this.popupObj.destroy();\n this.popupWrapper = this.popupObj = null;\n if ((!isNaN(+this.value) && this.value !== null)) {\n if (!this.valueIsDisable(this.value)) {\n //disable value given in value property so reset the date based on current date\n if (this.strictMode) {\n this.resetState();\n }\n this.initValue = null;\n this.initMax = this.getDateObject(this.initMax);\n this.initMin = this.getDateObject(this.initMin);\n this.timeCollections = this.liCollections = [];\n this.setMinMax(this.initMin, this.initMax);\n }\n }\n };\n TimePicker.prototype.validationAttribute = function (target, input) {\n var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');\n input.setAttribute('name', name);\n target.removeAttribute('name');\n var attributes = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attributes.length; i++) {\n if (isNullOrUndefined(target.getAttribute(attributes[i]))) {\n continue;\n }\n var attr = target.getAttribute(attributes[i]);\n input.setAttribute(attributes[i], attr);\n target.removeAttribute(attributes[i]);\n }\n };\n TimePicker.prototype.initialize = function () {\n this.globalize = new Internationalization(this.locale);\n this.defaultCulture = new Internationalization('en');\n this.checkTimeFormat();\n this.checkInvalidValue(this.value);\n // persist the value property.\n this.setProperties({ value: this.checkDateValue(new Date(this.checkInValue(this.value))) }, true);\n this.setProperties({ min: this.checkDateValue(new Date(this.checkInValue(this.min))) }, true);\n this.setProperties({ max: this.checkDateValue(new Date(this.checkInValue(this.max))) }, true);\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkInValue(this.scrollTo))) }, true);\n if (this.angularTag !== null) {\n this.validationAttribute(this.element, this.inputElement);\n }\n this.updateHtmlAttributeToElement();\n this.checkAttributes(false); //check the input element attributes\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('timepicker', localeText, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n this.initValue = this.checkDateValue(this.value);\n this.initMin = this.checkDateValue(this.min);\n this.initMax = this.checkDateValue(this.max);\n this.isNavigate = this.isPreventBlur = this.isTextSelected = false;\n this.activeIndex = this.valueWithMinutes = this.prevDate = null;\n if (!isNullOrUndefined(this.element.getAttribute('id'))) {\n if (this.angularTag !== null) {\n this.inputElement.id = this.element.getAttribute('id') + '_input';\n }\n }\n else {\n //for angular case\n this.element.id = getUniqueID('ej2_timepicker');\n if (this.angularTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n if (isNullOrUndefined(this.inputElement.getAttribute('name'))) {\n attributes(this.inputElement, { 'name': this.element.id });\n }\n };\n TimePicker.prototype.checkTimeFormat = function () {\n if (this.format) {\n if (typeof this.format === 'string') {\n this.formatString = this.format;\n }\n else if (!isNullOrUndefined(this.format.skeleton) && this.format.skeleton !== '') {\n var skeletonString = this.format.skeleton;\n this.formatString = this.globalize.getDatePattern({ type: 'time', skeleton: skeletonString });\n }\n else {\n this.formatString = this.globalize.getDatePattern({ type: 'time', skeleton: 'short' });\n }\n }\n else {\n this.formatString = null;\n }\n };\n TimePicker.prototype.checkDateValue = function (value) {\n return (!isNullOrUndefined(value) && value instanceof Date && !isNaN(+value)) ? value : null;\n };\n TimePicker.prototype.createInputElement = function () {\n var updatedCssClassesValue = this.cssClass;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassesValue = (this.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n this.inputWrapper = Input.createInput({\n element: this.inputElement,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassesValue,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton\n },\n buttons: [' e-input-group-icon e-time-icon e-icons']\n }, this.createElement);\n this.inputWrapper.container.style.width = this.setWidth(this.width);\n attributes(this.inputElement, {\n 'aria-haspopup': 'true', 'aria-autocomplete': 'list', 'tabindex': '0', 'aria-activedescendant': 'null',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-disabled': 'false', 'aria-invalid': 'false'\n });\n if (!this.isNullOrEmpty(this.inputStyle)) {\n Input.addAttributes({ 'style': this.inputStyle }, this.inputElement);\n }\n addClass([this.inputWrapper.container], WRAPPERCLASS);\n };\n TimePicker.prototype.getCldrDateTimeFormat = function () {\n var culture = new Internationalization(this.locale);\n var cldrTime;\n var dateFormat = culture.getDatePattern({ skeleton: isBlazor() ? 'd' : 'yMd' });\n if (this.isNullOrEmpty(this.formatString)) {\n cldrTime = dateFormat + ' ' + this.cldrFormat('time');\n }\n else {\n cldrTime = this.formatString;\n }\n return cldrTime;\n };\n TimePicker.prototype.checkInvalidValue = function (value) {\n var isInvalid = false;\n if (typeof value !== 'object' && !isNullOrUndefined(value)) {\n var valueString = value;\n if (typeof valueString === 'string') {\n valueString = valueString.trim();\n }\n var valueExpression = null;\n var valueExp = null;\n if (typeof value === 'number') {\n valueString = value.toString();\n }\n else if (typeof value === 'string') {\n if (!(/^[a-zA-Z0-9- ]*$/).test(value)) {\n valueExpression = this.setCurrentDate(this.getDateObject(value));\n if (isNullOrUndefined(valueExpression)) {\n valueExpression = this.checkDateValue(this.globalize.parseDate(valueString, {\n format: this.getCldrDateTimeFormat(), type: 'datetime'\n }));\n if (isNullOrUndefined(valueExpression)) {\n valueExpression = this.checkDateValue(this.globalize.parseDate(valueString, {\n format: this.formatString, type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'\n }));\n }\n }\n }\n }\n valueExp = this.globalize.parseDate(valueString, {\n format: this.getCldrDateTimeFormat(), type: 'datetime'\n });\n valueExpression = (!isNullOrUndefined(valueExp) && valueExp instanceof Date && !isNaN(+valueExp)) ? valueExp : null;\n if (isNullOrUndefined(valueExpression) && valueString.replace(/\\s/g, '').length) {\n var extISOString = null;\n var basicISOString = null;\n // eslint-disable-next-line\n extISOString = /^\\s*((?:[+-]\\d{6}|\\d{4})-(?:\\d\\d-\\d\\d|W\\d\\d-\\d|W\\d\\d|\\d\\d\\d|\\d\\d))(?:(T| )(\\d\\d(?::\\d\\d(?::\\d\\d(?:[.,]\\d+)?)?)?)([\\+\\-]\\d\\d(?::?\\d\\d)?|\\s*Z)?)?/;\n // eslint-disable-next-line\n basicISOString = /^\\s*((?:[+-]\\d{6}|\\d{4})(?:\\d\\d\\d\\d|W\\d\\d\\d|W\\d\\d|\\d\\d\\d|\\d\\d))(?:(T| )(\\d\\d(?:\\d\\d(?:\\d\\d(?:[.,]\\d+)?)?)?)([\\+\\-]\\d\\d(?::?\\d\\d)?|\\s*Z)?)?/;\n if ((!extISOString.test(valueString) && !basicISOString.test(valueString))\n || ((/^[a-zA-Z0-9- ]*$/).test(value)) || isNaN(+new Date('' + valueString))) {\n isInvalid = true;\n }\n else {\n valueExpression = new Date('' + valueString);\n }\n }\n if (isInvalid) {\n if (!this.strictMode) {\n this.invalidValueString = valueString;\n }\n this.setProperties({ value: null }, true);\n this.initValue = null;\n }\n else {\n this.setProperties({ value: valueExpression }, true);\n this.initValue = this.value;\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n TimePicker.prototype.cldrFormat = function (type) {\n var cldrDateTimeString;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDateTimeString = isBlazor() ? this.getBlazorCultureFormat('t') :\n (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDateTimeString = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n return cldrDateTimeString;\n };\n // destroy function\n TimePicker.prototype.destroy = function () {\n if (this.isBlazorServer) {\n this.unBindEvents();\n }\n else {\n this.hide();\n this.unBindEvents();\n var ariaAttribute = {\n 'aria-haspopup': 'true', 'aria-autocomplete': 'list', 'tabindex': '0', 'aria-activedescendant': 'null',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false', 'aria-disabled': 'true', 'aria-invalid': 'false'\n };\n if (this.inputElement) {\n Input.removeAttributes(ariaAttribute, this.inputElement);\n if (this.angularTag === null) {\n this.inputWrapper.container.parentElement.appendChild(this.inputElement);\n }\n if (!isNullOrUndefined(this.cloneElement.getAttribute('tabindex'))) {\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.inputElement.removeAttribute('tabindex');\n }\n this.ensureInputAttribute();\n this.enableElement([this.inputElement]);\n this.inputElement.classList.remove('e-input');\n if (isNullOrUndefined(this.cloneElement.getAttribute('disabled'))) {\n Input.setEnabled(true, this.inputElement, this.floatLabelType);\n }\n }\n if (this.inputWrapper.container) {\n detach(this.inputWrapper.container);\n }\n this.inputWrapper = this.popupWrapper = this.cloneElement = undefined;\n this.liCollections = this.timeCollections = this.disableItemCollection = [];\n if (!isNullOrUndefined(this.rippleFn)) {\n this.rippleFn();\n }\n _super.prototype.destroy.call(this);\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n }\n };\n TimePicker.prototype.ensureInputAttribute = function () {\n var propertyList = [];\n for (var i = 0; i < this.inputElement.attributes.length; i++) {\n propertyList[i] = this.inputElement.attributes[i].name;\n }\n for (var i = 0; i < propertyList.length; i++) {\n if (!isNullOrUndefined(this.cloneElement.getAttribute(propertyList[i]))) {\n this.inputElement.setAttribute(propertyList[i], this.cloneElement.getAttribute(propertyList[i]));\n if (propertyList[i].toLowerCase() === 'value') {\n this.inputElement.value = this.cloneElement.getAttribute(propertyList[i]);\n }\n }\n else {\n this.inputElement.removeAttribute(propertyList[i]);\n if (propertyList[i].toLowerCase() === 'value') {\n this.inputElement.value = '';\n }\n }\n }\n };\n //popup creation\n TimePicker.prototype.popupCreation = function () {\n if (!this.isBlazorServer) {\n this.popupWrapper = this.createElement('div', {\n className: ROOT + ' ' + POPUP,\n attrs: { 'id': this.element.id + '_popup', 'style': 'visibility:hidden' }\n });\n if (!isNullOrUndefined(this.cssClass)) {\n this.popupWrapper.className += ' ' + this.cssClass;\n }\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.generateList();\n append([this.listWrapper], this.popupWrapper);\n }\n this.openPopupEventArgs.appendTo.appendChild(this.popupWrapper);\n }\n else {\n this.popupWrapper = this.inputWrapper.container.nextElementSibling;\n this.generateList();\n }\n this.addSelection();\n this.renderPopup();\n detach(this.popupWrapper);\n };\n TimePicker.prototype.getPopupHeight = function () {\n var height = parseInt(POPUPDIMENSION, 10);\n var popupHeight = this.popupWrapper.getBoundingClientRect().height;\n return popupHeight > height ? height : popupHeight;\n };\n TimePicker.prototype.generateList = function () {\n if (!this.isBlazorServer) {\n this.createListItems();\n }\n else {\n this.listWrapper = this.popupWrapper.querySelector('.e-content');\n }\n this.wireListEvents();\n var rippleModel = { duration: 300, selector: '.' + LISTCLASS };\n this.rippleFn = rippleEffect(this.listWrapper, rippleModel);\n this.liCollections = this.listWrapper.querySelectorAll('.' + LISTCLASS);\n if (this.isBlazorServer) {\n this.blazorTimeCollections = [];\n for (var index = 0; index < this.liCollections.length; index++) {\n this.blazorTimeCollections.push(this.liCollections[index].getAttribute('data-value'));\n }\n }\n };\n TimePicker.prototype.renderPopup = function () {\n var _this = this;\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n this.popupObj = new Popup(this.popupWrapper, {\n width: this.setPopupWidth(this.width),\n zIndex: this.zIndex,\n targetType: 'relative',\n position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },\n collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },\n enableRtl: this.enableRtl,\n relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,\n offsetY: OFFSETVAL,\n open: function () {\n _this.popupWrapper.style.visibility = 'visible';\n addClass([_this.inputWrapper.buttons[0]], SELECTED);\n }, close: function () {\n removeClass([_this.inputWrapper.buttons[0]], SELECTED);\n _this.unWireListEvents();\n _this.inputElement.setAttribute('aria-activedescendant', 'null');\n if (!_this.isBlazorServer) {\n remove(_this.popupObj.element);\n _this.popupObj.destroy();\n _this.popupWrapper.innerHTML = '';\n }\n _this.listWrapper = _this.popupWrapper = _this.listTag = undefined;\n }, targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hide();\n }\n }\n });\n if (!Browser.isDevice) {\n this.popupObj.collision = { X: 'none', Y: 'flip' };\n }\n this.popupObj.element.style.maxHeight = POPUPDIMENSION;\n };\n //util function\n TimePicker.prototype.getFormattedValue = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n else {\n return this.globalize.formatDate(value, { skeleton: isBlazor() ? 't' : 'medium', type: 'time' });\n }\n };\n TimePicker.prototype.getDateObject = function (text) {\n if (!this.isNullOrEmpty(text)) {\n var dateValue = this.createDateObj(text);\n var value = !this.isNullOrEmpty(this.initValue);\n if (this.checkDateValue(dateValue)) {\n var date = value ? this.initValue.getDate() : DAY;\n var month = value ? this.initValue.getMonth() : MONTH;\n var year = value ? this.initValue.getFullYear() : YEAR;\n return new Date(year, month, date, dateValue.getHours(), dateValue.getMinutes(), dateValue.getSeconds());\n }\n }\n return null;\n };\n TimePicker.prototype.updateHtmlAttributeToWrapper = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (wrapperAttributes.indexOf(key) > -1) {\n if (key === 'class') {\n var updatedClassesValue = (this.htmlAttributes[key].replace(/\\s+/g, ' ')).trim();\n if (updatedClassesValue !== '') {\n addClass([this.inputWrapper.container], updatedClassesValue.split(' '));\n }\n }\n else if (key === 'style') {\n var timeStyle = this.inputWrapper.container.getAttribute(key);\n timeStyle = !isNullOrUndefined(timeStyle) ? (timeStyle + this.htmlAttributes[key]) :\n this.htmlAttributes[key];\n this.inputWrapper.container.setAttribute(key, timeStyle);\n }\n else {\n this.inputWrapper.container.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n }\n };\n TimePicker.prototype.updateHtmlAttributeToElement = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (wrapperAttributes.indexOf(key) < 0) {\n this.inputElement.setAttribute(key, this.htmlAttributes[key]);\n }\n }\n }\n };\n TimePicker.prototype.updateCssClass = function (cssClassNew, cssClassOld) {\n if (!isNullOrUndefined(cssClassOld)) {\n cssClassOld = (cssClassOld.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(cssClassNew)) {\n cssClassNew = (cssClassNew.replace(/\\s+/g, ' ')).trim();\n }\n Input.setCssClass(cssClassNew, [this.inputWrapper.container], cssClassOld);\n if (this.popupWrapper) {\n Input.setCssClass(cssClassNew, [this.popupWrapper], cssClassOld);\n }\n };\n TimePicker.prototype.removeErrorClass = function () {\n removeClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'false' });\n };\n TimePicker.prototype.checkErrorState = function (val) {\n var value = this.getDateObject(val);\n if (this.validateState(value) && !this.invalidValueString) {\n this.removeErrorClass();\n }\n else {\n addClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'true' });\n }\n };\n TimePicker.prototype.validateInterval = function () {\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.enableElement([this.inputWrapper.buttons[0]]);\n }\n else {\n this.disableTimeIcon();\n }\n };\n TimePicker.prototype.disableTimeIcon = function () {\n this.disableElement([this.inputWrapper.buttons[0]]);\n this.hide();\n };\n TimePicker.prototype.disableElement = function (element) {\n addClass(element, DISABLED);\n };\n TimePicker.prototype.enableElement = function (element) {\n removeClass(element, DISABLED);\n };\n TimePicker.prototype.selectInputText = function () {\n this.inputElement.setSelectionRange(0, (this.inputElement).value.length);\n };\n TimePicker.prototype.setCursorToEnd = function () {\n this.inputElement.setSelectionRange((this.inputElement).value.length, (this.inputElement).value.length);\n };\n TimePicker.prototype.getMeridianText = function () {\n var meridian;\n if (this.locale === 'en' || this.locale === 'en-US') {\n meridian = getValue((isBlazor() ? 'dayPeriods.wide' : 'dayPeriods.format.wide'), getDefaultDateObject());\n }\n else {\n var gregorianFormat = (isBlazor() ? '.dates.dayPeriods.abbreviated' :\n '.dates.calendars.gregorian.dayPeriods.format.abbreviated');\n var mainVal = isBlazor() ? '' : 'main.';\n meridian = getValue(mainVal + '' + this.locale + gregorianFormat, cldrData);\n }\n return meridian;\n };\n TimePicker.prototype.getCursorSelection = function () {\n var input = (this.inputElement);\n var start = 0;\n var end = 0;\n if (!isNaN(input.selectionStart)) {\n start = input.selectionStart;\n end = input.selectionEnd;\n }\n return { start: Math.abs(start), end: Math.abs(end) };\n };\n TimePicker.prototype.getActiveElement = function () {\n if (!isNullOrUndefined(this.popupWrapper)) {\n return this.popupWrapper.querySelectorAll('.' + SELECTED);\n }\n else {\n return null;\n }\n };\n TimePicker.prototype.isNullOrEmpty = function (value) {\n if (isNullOrUndefined(value) || (typeof value === 'string' && value.trim() === '')) {\n return true;\n }\n else {\n return false;\n }\n };\n TimePicker.prototype.setWidth = function (width) {\n if (typeof width === 'number') {\n width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n width = (width.match(/px|%|em/)) ? width : formatUnit(width);\n }\n else {\n width = '100%';\n }\n return width;\n };\n TimePicker.prototype.setPopupWidth = function (width) {\n width = this.setWidth(width);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.containerStyle.width * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n return width;\n };\n TimePicker.prototype.setScrollPosition = function () {\n var element = this.selectedElement;\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else if (this.popupWrapper && this.checkDateValue(this.scrollTo)) {\n this.setScrollTo();\n }\n };\n TimePicker.prototype.findScrollTop = function (element) {\n var listHeight = this.getPopupHeight();\n var nextEle = element.nextElementSibling;\n var height = nextEle ? nextEle.offsetTop : element.offsetTop;\n var liHeight = element.getBoundingClientRect().height;\n if ((height + element.offsetTop) > listHeight) {\n this.popupWrapper.scrollTop = nextEle ? (height - (listHeight / HALFPOSITION + liHeight / HALFPOSITION)) : height;\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n };\n TimePicker.prototype.setScrollTo = function () {\n var element;\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n var initialTime = this.isBlazorServer ? new Date(new Date().toDateString() + ' ' +\n this.blazorTimeCollections[0]).setMilliseconds(0) : this.timeCollections[0];\n var scrollTime = this.isBlazorServer ? new Date(new Date().toDateString() + ' ' +\n this.scrollTo.toLocaleTimeString()).setMilliseconds(0) :\n this.getDateObject(this.checkDateValue(this.scrollTo)).getTime();\n element = items[Math.round((scrollTime - initialTime) / (this.step * 60000))];\n }\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n };\n TimePicker.prototype.getText = function () {\n return (isNullOrUndefined(this.checkDateValue(this.value))) ? '' : this.getValue(this.value);\n };\n TimePicker.prototype.getValue = function (value) {\n return (isNullOrUndefined(this.checkDateValue(value))) ? null : this.globalize.formatDate(value, {\n format: this.cldrTimeFormat(), type: 'time'\n });\n };\n TimePicker.prototype.cldrDateFormat = function () {\n var cldrDate;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDate = isBlazor() ? (getValue('d', getValue(this.locale, blazorCultureFormats))) :\n (getValue('dateFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDate = (this.getCultureDateObject(cldrData, '' + this.locale));\n }\n return cldrDate;\n };\n TimePicker.prototype.getBlazorCultureFormat = function (formatVal) {\n return (getValue(formatVal, getValue(this.locale, blazorCultureFormats))).replace(/tt/, 'a');\n };\n TimePicker.prototype.cldrTimeFormat = function () {\n var cldrTime;\n if (this.isNullOrEmpty(this.formatString)) {\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = isBlazor() ? this.getBlazorCultureFormat('t') :\n (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n }\n else {\n cldrTime = this.formatString;\n }\n return cldrTime;\n };\n TimePicker.prototype.dateToNumeric = function () {\n var cldrTime;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = isBlazor() ? this.getBlazorCultureFormat('T') :\n (getValue('timeFormats.medium', getDefaultDateObject()));\n }\n else {\n cldrTime = isBlazor() ? this.getBlazorCultureFormat('T') :\n (getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.medium', cldrData));\n }\n return cldrTime;\n };\n TimePicker.prototype.getExactDateTime = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n else {\n return this.globalize.formatDate(value, { format: this.dateToNumeric(), type: 'time' });\n }\n };\n TimePicker.prototype.setValue = function (value) {\n var time = this.checkValue(value);\n if (!this.strictMode && !this.validateState(time)) {\n if (this.checkDateValue(this.valueWithMinutes) === null) {\n this.initValue = this.valueWithMinutes = null;\n }\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n if (this.isNullOrEmpty(time)) {\n this.initValue = null;\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n this.initValue = this.compareFormatChange(time);\n }\n }\n this.updateInput(true, this.initValue);\n };\n TimePicker.prototype.compareFormatChange = function (value) {\n if (isNullOrUndefined(value)) {\n return null;\n }\n return (value !== this.getText()) ? this.getDateObject(value) : this.getDateObject(this.value);\n };\n TimePicker.prototype.updatePlaceHolder = function () {\n Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);\n };\n //event related functions\n TimePicker.prototype.updateInputValue = function (value) {\n Input.setValue(value, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n TimePicker.prototype.preventEventBubbling = function (e) {\n e.preventDefault();\n this.interopAdaptor.invokeMethodAsync('OnTimeIconClick');\n };\n TimePicker.prototype.updateBlazorTimeCollections = function (listData) {\n this.blazorTimeCollections = listData;\n };\n TimePicker.prototype.popupHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n if (Browser.isDevice) {\n this.inputElement.setAttribute('readonly', '');\n }\n if (!this.isBlazorServer) {\n e.preventDefault();\n }\n if (this.isPopupOpen() && !this.isBlazorServer) {\n this.closePopup(0, e);\n }\n else {\n this.inputElement.focus();\n this.show(e);\n }\n };\n TimePicker.prototype.mouseDownHandler = function () {\n if (!this.enabled) {\n return;\n }\n if (!this.readonly) {\n this.inputElement.setSelectionRange(0, 0);\n EventHandler.add(this.inputElement, 'mouseup', this.mouseUpHandler, this);\n }\n };\n TimePicker.prototype.mouseUpHandler = function (event) {\n if (!this.readonly) {\n event.preventDefault();\n EventHandler.remove(this.inputElement, 'mouseup', this.mouseUpHandler);\n var curPos = this.getCursorSelection();\n if (!(curPos.start === 0 && curPos.end === this.inputElement.value.length)) {\n if (this.inputElement.value.length > 0) {\n this.cursorDetails = this.focusSelection();\n }\n this.inputElement.setSelectionRange(this.cursorDetails.start, this.cursorDetails.end);\n }\n }\n };\n TimePicker.prototype.focusSelection = function () {\n var regex = new RegExp('^[a-zA-Z0-9]+$');\n var split = this.inputElement.value.split('');\n split.push(' ');\n var curPos = this.getCursorSelection();\n var start = 0;\n var end = 0;\n var isSeparator = false;\n if (!this.isTextSelected) {\n for (var i = 0; i < split.length; i++) {\n if (!regex.test(split[i])) {\n end = i;\n isSeparator = true;\n }\n if (isSeparator) {\n if (curPos.start >= start && curPos.end <= end) {\n // eslint-disable-next-line no-self-assign\n end = end;\n this.isTextSelected = true;\n break;\n }\n else {\n start = i + 1;\n isSeparator = false;\n }\n }\n }\n }\n else {\n start = curPos.start;\n end = curPos.end;\n this.isTextSelected = false;\n }\n return { start: start, end: end };\n };\n TimePicker.prototype.inputHandler = function (event) {\n if (!this.readonly && this.enabled) {\n if (event.action !== 'right' && event.action !== 'left' && event.action !== 'tab') {\n event.preventDefault();\n }\n switch (event.action) {\n case 'home':\n case 'end':\n case 'up':\n case 'down':\n this.keyHandler(event);\n break;\n case 'enter':\n if (this.isNavigate) {\n this.selectedElement = this.liCollections[this.activeIndex];\n if (!this.isBlazorServer) {\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n this.updateValue(this.valueWithMinutes, event);\n }\n else {\n this.inputElement.setAttribute('value', this.selectedElement.getAttribute('data-value'));\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, true);\n }\n }\n else {\n if (!this.isBlazorServer) {\n this.updateValue(this.inputElement.value, event);\n }\n else {\n this.interopAdaptor.invokeMethodAsync('OnStrictMode', this.inputElement.value);\n }\n }\n this.hide();\n this.isNavigate = false;\n if (this.isPopupOpen()) {\n event.stopPropagation();\n }\n break;\n case 'open':\n if (this.isBlazorServer) {\n this.interopAdaptor.invokeMethodAsync('OnPopupHide', true);\n }\n else {\n this.show(event);\n }\n break;\n case 'escape':\n if (!this.isBlazorServer) {\n this.updateInputValue(this.objToString(this.value));\n this.previousState(this.value);\n }\n this.hide();\n break;\n case 'close':\n this.hide();\n break;\n default:\n this.isNavigate = false;\n break;\n }\n }\n };\n TimePicker.prototype.onMouseClick = function (event) {\n var target = event.target;\n var li = this.selectedElement = closest(target, '.' + LISTCLASS);\n this.setSelection(li, event);\n if (li && li.classList.contains(LISTCLASS)) {\n this.hide();\n }\n };\n TimePicker.prototype.closePopup = function (delay, e) {\n var _this = this;\n if (this.isPopupOpen() && this.popupWrapper) {\n var args = {\n popup: this.isBlazorServer ? null : this.popupObj,\n event: e || null,\n cancel: false,\n name: 'open'\n };\n removeClass([document.body], OVERFLOW);\n this.trigger('close', args, function (args) {\n if (!args.cancel) {\n var animModel = {\n name: 'FadeOut',\n duration: ANIMATIONDURATION,\n delay: delay ? delay : 0\n };\n _this.popupObj.hide(new Animation(animModel));\n removeClass([_this.inputWrapper.container], [ICONANIMATION]);\n attributes(_this.inputElement, { 'aria-expanded': 'false' });\n EventHandler.remove(document, 'mousedown touchstart', _this.documentClickHandler);\n if (_this.isBlazorServer) {\n _this.disposeServerPopup();\n _this.inputWrapper.container.parentElement.insertBefore(_this.popupWrapper, _this.inputWrapper.container.nextElementSibling);\n _this.interopAdaptor.invokeMethodAsync('OnPopupHide', false);\n _this.popupWrapper = _this.popupObj = null;\n }\n }\n if (Browser.isDevice && _this.modal) {\n _this.modal.style.display = 'none';\n _this.modal.outerHTML = '';\n _this.modal = null;\n }\n if (Browser.isDevice) {\n if (!isNullOrUndefined(_this.mobileTimePopupWrap)) {\n _this.mobileTimePopupWrap.remove();\n _this.mobileTimePopupWrap = null;\n }\n }\n if (Browser.isDevice && _this.allowEdit && !_this.readonly) {\n _this.inputElement.removeAttribute('readonly');\n }\n });\n }\n else {\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n }\n };\n TimePicker.prototype.disposeServerPopup = function () {\n if (this.popupWrapper) {\n this.popupWrapper.style.visibility = 'hidden';\n this.popupWrapper.style.top = '-9999px';\n this.popupWrapper.style.left = '-9999px';\n this.popupWrapper.style.width = '0px';\n this.popupWrapper.style.height = '0px';\n }\n };\n TimePicker.prototype.checkValueChange = function (event, isNavigation) {\n if (!this.strictMode && !this.validateState(this.valueWithMinutes)) {\n if (this.checkDateValue(this.valueWithMinutes) === null) {\n this.initValue = this.valueWithMinutes = null;\n }\n this.setProperties({ value: this.compareFormatChange(this.inputElement.value) }, true);\n this.initValue = this.valueWithMinutes = this.compareFormatChange(this.inputElement.value);\n this.prevValue = this.inputElement.value;\n if (+this.prevDate !== +this.value) {\n this.changeEvent(event);\n }\n }\n else {\n if (!isNavigation) {\n if ((this.prevValue !== this.inputElement.value) || isNullOrUndefined(this.checkDateValue(this.value))) {\n this.valueProcess(event, this.compareFormatChange(this.inputElement.value));\n }\n }\n else {\n var value = this.getDateObject(new Date(this.timeCollections[this.activeIndex]));\n if (+this.prevDate !== +value) {\n this.valueProcess(event, value);\n }\n }\n }\n };\n TimePicker.prototype.onMouseOver = function (event) {\n var currentLi = closest(event.target, '.' + LISTCLASS);\n this.setHover(currentLi, HOVER);\n };\n TimePicker.prototype.setHover = function (li, className) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(className)) {\n this.removeHover(className);\n addClass([li], className);\n if (className === NAVIGATION) {\n li.setAttribute('aria-selected', 'true');\n }\n }\n };\n TimePicker.prototype.setSelection = function (li, event) {\n if (this.isValidLI(li) && !li.classList.contains(SELECTED)) {\n if (!this.isBlazorServer) {\n this.checkValue(li.getAttribute('data-value'));\n this.selectedElement = li;\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n addClass([this.selectedElement], SELECTED);\n this.selectedElement.setAttribute('aria-selected', 'true');\n this.checkValueChange(event, true);\n }\n else {\n this.selectedElement = li;\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);\n addClass([this.selectedElement], SELECTED);\n this.selectedElement.setAttribute('aria-selected', 'true');\n this.inputElement.setAttribute('value', li.getAttribute('data-value'));\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, false);\n this.addSelection();\n }\n }\n };\n TimePicker.prototype.onMouseLeave = function () {\n this.removeHover(HOVER);\n };\n TimePicker.prototype.scrollHandler = function () {\n if (this.getModuleName() === 'timepicker' && Browser.isDevice) {\n return;\n }\n else {\n this.hide();\n }\n };\n TimePicker.prototype.setMinMax = function (minVal, maxVal) {\n if (isNullOrUndefined(this.checkDateValue(minVal))) {\n this.initMin = this.getDateObject('12:00:00 AM');\n }\n if (isNullOrUndefined(this.checkDateValue(maxVal))) {\n this.initMax = this.getDateObject('11:59:59 PM');\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n TimePicker.prototype.validateMinMax = function (dateVal, minVal, maxVal) {\n var value = dateVal instanceof Date ? dateVal : this.getDateObject(dateVal);\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n dateVal = this.strictOperation(this.initMin, this.initMax, dateVal, value);\n }\n else if (+(this.createDateObj(this.getFormattedValue(this.initMin))) >\n +(this.createDateObj(this.getFormattedValue(this.initMax)))) {\n this.disableTimeIcon();\n }\n if (this.strictMode) {\n dateVal = this.valueIsDisable(dateVal) ? dateVal : null;\n }\n this.checkErrorState(dateVal);\n return dateVal;\n };\n TimePicker.prototype.valueIsDisable = function (value) {\n if (this.disableItemCollection.length > 0) {\n if (this.disableItemCollection.length === this.timeCollections.length) {\n return false;\n }\n var time = value instanceof Date ? this.objToString(value) : value;\n for (var index = 0; index < this.disableItemCollection.length; index++) {\n if (time === this.disableItemCollection[index]) {\n return false;\n }\n }\n }\n return true;\n };\n TimePicker.prototype.validateState = function (val) {\n if (!this.strictMode) {\n if (this.valueIsDisable(val)) {\n var value = typeof val === 'string' ? this.setCurrentDate(this.getDateObject(val)) :\n this.setCurrentDate(this.getDateObject(val));\n var maxValue = this.setCurrentDate(this.getDateObject(this.initMax));\n var minValue = this.setCurrentDate(this.getDateObject(this.initMin));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n if ((+(value) > +(maxValue)) || (+(value) < +(minValue))) {\n return false;\n }\n }\n else {\n if ((+(maxValue) < +(minValue)) || this.inputElement.value !== '') {\n return false;\n }\n }\n }\n else {\n return false;\n }\n }\n return true;\n };\n TimePicker.prototype.strictOperation = function (minimum, maximum, dateVal, val) {\n var maxValue = this.createDateObj(this.getFormattedValue(maximum));\n var minValue = this.createDateObj(this.getFormattedValue(minimum));\n var value = this.createDateObj(this.getFormattedValue(val));\n if (this.strictMode) {\n if (+minValue > +maxValue) {\n this.disableTimeIcon();\n this.initValue = this.getDateObject(maxValue);\n this.updateInputValue(this.getValue(this.initValue));\n return this.inputElement.value;\n }\n else if (+minValue >= +value) {\n return this.getDateObject(minValue);\n }\n else if (+value >= +maxValue || +minValue === +maxValue) {\n return this.getDateObject(maxValue);\n }\n }\n else {\n if (+minValue > +maxValue) {\n this.disableTimeIcon();\n if (!isNaN(+this.createDateObj(dateVal))) {\n return dateVal;\n }\n }\n }\n return dateVal;\n };\n TimePicker.prototype.bindEvents = function () {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', (this.isBlazorServer ? this.preventEventBubbling : this.popupHandler), this);\n EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);\n EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);\n EventHandler.add(this.inputElement, 'change', this.inputChangeHandler, this);\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.clearHandler, this);\n }\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n if (!Browser.isDevice) {\n this.keyConfigure = extend(this.keyConfigure, this.keyConfigs);\n this.inputEvent = new KeyboardEvents(this.inputWrapper.container, {\n keyAction: this.inputHandler.bind(this),\n keyConfigs: this.keyConfigure,\n eventName: 'keydown'\n });\n if (this.showClearButton && this.inputElement) {\n EventHandler.add(this.inputElement, 'mousedown', this.mouseDownHandler, this);\n }\n }\n };\n TimePicker.prototype.formResetHandler = function () {\n if (!this.enabled) {\n return;\n }\n if (!this.inputElement.disabled) {\n var timeValue = this.inputElement.getAttribute('value');\n var val = this.isBlazorServer ? this.inputEleValue : this.checkDateValue(this.inputEleValue);\n if (this.element.tagName === 'EJS-TIMEPICKER') {\n val = null;\n timeValue = '';\n this.inputElement.setAttribute('value', '');\n }\n if (!this.isBlazorServer) {\n this.setProperties({ value: val }, true);\n this.prevDate = this.value;\n this.valueWithMinutes = this.value;\n this.initValue = this.value;\n }\n if (this.inputElement) {\n this.updateInputValue(timeValue);\n if (!this.isBlazorServer) {\n this.checkErrorState(timeValue);\n }\n this.prevValue = this.inputElement.value;\n }\n }\n };\n TimePicker.prototype.inputChangeHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n e.stopPropagation();\n };\n TimePicker.prototype.unBindEvents = function () {\n if (this.inputWrapper) {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', (this.isBlazorServer ? this.preventEventBubbling : this.popupHandler));\n }\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);\n EventHandler.remove(this.inputElement, 'change', this.inputChangeHandler);\n if (this.inputEvent) {\n this.inputEvent.destroy();\n }\n EventHandler.remove(this.inputElement, 'mousedown touchstart', this.mouseDownHandler);\n if (this.showClearButton && !isNullOrUndefined(this.inputWrapper.clearButton)) {\n EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.clearHandler);\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n };\n TimePicker.prototype.bindClearEvent = function () {\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.clearHandler, this);\n }\n };\n TimePicker.prototype.raiseClearedEvent = function (e) {\n var clearedArgs = {\n event: e\n };\n this.trigger('cleared', clearedArgs);\n };\n TimePicker.prototype.clearHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n e.preventDefault();\n if (!isNullOrUndefined(this.value)) {\n this.clear(e);\n }\n else {\n this.resetState();\n this.raiseClearedEvent(e);\n }\n if (this.isBlazorServer) {\n this.interopAdaptor.invokeMethodAsync('OnValueCleared');\n }\n if (this.popupWrapper) {\n this.popupWrapper.scrollTop = 0;\n }\n };\n TimePicker.prototype.clear = function (event) {\n if (!this.isBlazorServer) {\n this.setProperties({ value: null }, true);\n }\n this.initValue = null;\n this.resetState();\n this.raiseClearedEvent(event);\n if (!this.isBlazorServer) {\n this.changeEvent(event);\n }\n };\n TimePicker.prototype.setZIndex = function () {\n if (this.popupObj) {\n this.popupObj.zIndex = this.zIndex;\n this.popupObj.dataBind();\n }\n };\n TimePicker.prototype.checkAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['step', 'disabled', 'readonly', 'style', 'name', 'value', 'min', 'max', 'placeholder'];\n var value;\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '' || this.inputElement.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'style':\n this.inputStyle = this.inputElement.getAttribute(prop);\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.inputElement.getAttribute(prop) === 'readonly' ||\n this.inputElement.getAttribute(prop) === '' || this.inputElement.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'name':\n this.inputElement.setAttribute('name', this.inputElement.getAttribute(prop));\n break;\n case 'step':\n this.step = parseInt(this.inputElement.getAttribute(prop), 10);\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, !isDynamic);\n }\n break;\n case 'min':\n if (!this.isBlazorServer) {\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['min'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.setProperties({ min: value }, !isDynamic);\n }\n }\n }\n break;\n case 'max':\n if (!this.isBlazorServer) {\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['max'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.setProperties({ max: value }, !isDynamic);\n }\n }\n }\n break;\n case 'value':\n if (!this.isBlazorServer) {\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['value'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.initValue = value;\n this.updateInput(false, this.initValue);\n this.setProperties({ value: value }, !isDynamic);\n }\n }\n }\n break;\n }\n }\n }\n };\n TimePicker.prototype.setCurrentDate = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n return new Date(YEAR, MONTH, DAY, value.getHours(), value.getMinutes(), value.getSeconds());\n };\n TimePicker.prototype.getTextFormat = function () {\n var time = 0;\n if (this.cldrTimeFormat().split(' ')[0] === 'a' || this.cldrTimeFormat().indexOf('a') === 0) {\n time = 1;\n }\n else if (this.cldrTimeFormat().indexOf('a') < 0) {\n var strArray = this.cldrTimeFormat().split(' ');\n for (var i = 0; i < strArray.length; i++) {\n if (strArray[i].toLowerCase().indexOf('h') >= 0) {\n time = i;\n break;\n }\n }\n }\n return time;\n };\n TimePicker.prototype.updateValue = function (value, event) {\n var val;\n if (this.isNullOrEmpty(value)) {\n this.resetState();\n }\n else {\n val = this.checkValue(value);\n if (this.strictMode) {\n // this case set previous value to the text box when set invalid date\n var inputVal = (val === null && value.trim().length > 0) ?\n this.previousState(this.prevDate) : this.inputElement.value;\n this.updateInputValue(inputVal);\n }\n }\n this.checkValueChange(event, typeof value === 'string' ? false : true);\n };\n TimePicker.prototype.previousState = function (date) {\n var value = this.getDateObject(date);\n for (var i = 0; i < this.timeCollections.length; i++) {\n if (+value === this.timeCollections[i]) {\n this.activeIndex = i;\n this.selectedElement = this.liCollections[i];\n this.valueWithMinutes = new Date(this.timeCollections[i]);\n break;\n }\n }\n return this.prevValue;\n };\n TimePicker.prototype.resetState = function () {\n this.removeSelection();\n Input.setValue('', this.inputElement, this.floatLabelType, false);\n this.valueWithMinutes = this.activeIndex = null;\n if (!this.strictMode && !this.isBlazorServer) {\n this.checkErrorState(null);\n }\n };\n TimePicker.prototype.objToString = function (val) {\n if (isNullOrUndefined(this.checkDateValue(val))) {\n return null;\n }\n else {\n return this.globalize.formatDate(val, { format: this.cldrTimeFormat(), type: 'time' });\n }\n };\n TimePicker.prototype.checkValue = function (value) {\n if (!this.isNullOrEmpty(value)) {\n var date = value instanceof Date ? value : this.getDateObject(value);\n return this.validateValue(date, value);\n }\n this.resetState();\n return this.valueWithMinutes = null;\n };\n TimePicker.prototype.validateValue = function (date, value) {\n var time;\n var val = this.validateMinMax(value, this.min, this.max);\n var newval = this.createDateObj(val);\n if (this.getFormattedValue(newval) !== this.getFormattedValue(this.value)) {\n this.valueWithMinutes = isNullOrUndefined(newval) ? null : newval;\n time = this.objToString(this.valueWithMinutes);\n }\n else {\n if (this.strictMode) {\n //for strict mode case, when value not present within a range. Reset the nearest range value.\n date = newval;\n }\n this.valueWithMinutes = this.checkDateValue(date);\n time = this.objToString(this.valueWithMinutes);\n }\n if (!this.strictMode && isNullOrUndefined(time)) {\n var value_1 = val.trim().length > 0 ? val : '';\n this.updateInputValue(value_1);\n }\n else {\n this.updateInputValue(time);\n }\n return time;\n };\n TimePicker.prototype.findNextElement = function (event) {\n var textVal = (this.inputElement).value;\n var value = isNullOrUndefined(this.valueWithMinutes) || this.isBlazorServer ? this.createDateObj(textVal) :\n this.getDateObject(this.valueWithMinutes);\n var timeVal = null;\n var count = this.liCollections.length;\n var collections = this.isBlazorServer ? (isNullOrUndefined(this.blazorTimeCollections) ? [] :\n this.blazorTimeCollections) : this.timeCollections;\n if (!isNullOrUndefined(this.checkDateValue(value)) || !isNullOrUndefined(this.activeIndex)) {\n if (event.action === 'home') {\n var index = this.validLiElement(0);\n if (!this.isBlazorServer) {\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n }\n this.activeIndex = index;\n }\n else if (event.action === 'end') {\n var index = this.validLiElement(collections.length - 1, true);\n if (!this.isBlazorServer) {\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n }\n this.activeIndex = index;\n }\n else {\n if (event.action === 'down') {\n for (var i = 0; i < count; i++) {\n if (this.isBlazorServer ? (+value < +this.createDateObj(this.blazorTimeCollections[i])) :\n (+value < this.timeCollections[i])) {\n var index = this.validLiElement(i);\n if (!this.isBlazorServer) {\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n }\n this.activeIndex = index;\n break;\n }\n else if (i === count - 1) {\n var index = this.validLiElement(0);\n if (!this.isBlazorServer) {\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n }\n this.activeIndex = index;\n break;\n }\n }\n }\n else {\n for (var i = count - 1; i >= 0; i--) {\n if (this.isBlazorServer ? (+value > +this.createDateObj(this.blazorTimeCollections[i])) :\n (+value > this.timeCollections[i])) {\n var index = this.validLiElement(i, true);\n if (!this.isBlazorServer) {\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n }\n this.activeIndex = index;\n break;\n }\n else if (i === 0) {\n var index = this.validLiElement(count - 1);\n if (!this.isBlazorServer) {\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n }\n this.activeIndex = index;\n break;\n }\n }\n }\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n if (this.isBlazorServer) {\n this.inputElement.setAttribute('value', this.selectedElement.getAttribute('data-value'));\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, true);\n }\n else {\n this.elementValue(isNullOrUndefined(timeVal) ? null : new Date(timeVal));\n }\n }\n else {\n this.selectNextItem(event);\n }\n };\n TimePicker.prototype.selectNextItem = function (event) {\n var index = this.validLiElement(0, event.action === 'down' ? false : true);\n this.activeIndex = index;\n this.selectedElement = this.liCollections[index];\n if (this.isBlazorServer) {\n this.inputElement.setAttribute('value', this.selectedElement.getAttribute('data-value'));\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', index, true);\n }\n else {\n this.elementValue(new Date(this.timeCollections[index]));\n }\n };\n TimePicker.prototype.findNextInBlazor = function (event) {\n var count = isNullOrUndefined(this.blazorTimeCollections) ? 0 : this.blazorTimeCollections.length;\n var index = 0;\n var value = this.createDateObj(this.inputElement.value);\n switch (event.action) {\n case 'home':\n this.activeIndex = index;\n break;\n case 'end':\n index = count - 1;\n this.activeIndex = index;\n break;\n case 'down':\n for (var i = 0; i < count; i++) {\n if (this.isBlazorServer ? (+value < +this.createDateObj(this.blazorTimeCollections[i])) :\n (+value < this.timeCollections[i])) {\n var index_1 = this.validLiElement(i);\n this.activeIndex = index_1;\n break;\n }\n else if (i === count - 1) {\n var index_2 = this.validLiElement(0);\n this.activeIndex = index_2;\n break;\n }\n }\n break;\n case 'up':\n for (var i = count - 1; i >= 0; i--) {\n if (this.isBlazorServer ? (+value > +this.createDateObj(this.blazorTimeCollections[i])) :\n (+value > this.timeCollections[i])) {\n var index_3 = this.validLiElement(i, true);\n this.activeIndex = index_3;\n break;\n }\n else if (i === 0) {\n var index_4 = this.validLiElement(count - 1);\n this.activeIndex = index_4;\n break;\n }\n }\n break;\n }\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, true);\n };\n TimePicker.prototype.elementValue = function (value) {\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.checkValue(value);\n }\n };\n TimePicker.prototype.validLiElement = function (index, backward) {\n var elementIndex = null;\n if (this.isBlazorServer && isNullOrUndefined(this.popupWrapper)) {\n var items = this.blazorTimeCollections;\n if (items.length) {\n if (backward) {\n for (var i = index; i >= 0; i--) {\n elementIndex = i;\n break;\n }\n }\n else {\n for (var i = index; i <= items.length - 1; i++) {\n elementIndex = i;\n break;\n }\n }\n }\n }\n else {\n var items = isNullOrUndefined(this.popupWrapper) ? this.liCollections :\n this.popupWrapper.querySelectorAll('.' + LISTCLASS);\n var isCheck = true;\n if (items.length) {\n if (backward) {\n for (var i = index; i >= 0; i--) {\n if (!items[i].classList.contains(DISABLED)) {\n elementIndex = i;\n break;\n }\n else if (i === 0) {\n if (isCheck) {\n index = i = items.length;\n isCheck = false;\n }\n }\n }\n }\n else {\n for (var i = index; i <= items.length - 1; i++) {\n if (!items[i].classList.contains(DISABLED)) {\n elementIndex = i;\n break;\n }\n else if (i === items.length - 1) {\n if (isCheck) {\n index = i = -1;\n isCheck = false;\n }\n }\n }\n }\n }\n }\n return elementIndex;\n };\n TimePicker.prototype.keyHandler = function (event) {\n if (isNullOrUndefined(this.step) || this.step <= 0 || this.inputWrapper.buttons[0].classList.contains(DISABLED)) {\n return;\n }\n var count = this.isBlazorServer ? (isNullOrUndefined(this.blazorTimeCollections) ? 0 :\n this.blazorTimeCollections.length) : this.timeCollections.length;\n if (isNullOrUndefined(this.getActiveElement()) || this.getActiveElement().length === 0) {\n if (isNullOrUndefined(this.popupObj) && this.isBlazorServer) {\n if (isNullOrUndefined(this.activeIndex)) {\n var index = this.validLiElement(0, event.action === 'down' ? false : true);\n this.activeIndex = index;\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', index, true);\n }\n else {\n this.findNextInBlazor(event);\n }\n }\n else {\n if (this.liCollections.length > 0) {\n if (this.isBlazorServer ? (isNullOrUndefined(this.activeIndex)) : (isNullOrUndefined(this.value) &&\n isNullOrUndefined(this.activeIndex))) {\n this.selectNextItem(event);\n }\n else {\n this.findNextElement(event);\n }\n }\n else {\n this.findNextElement(event);\n }\n }\n }\n else {\n var nextItem = void 0;\n if ((event.keyCode >= 37) && (event.keyCode <= 40)) {\n var index = (event.keyCode === 40 || event.keyCode === 39) ? ++this.activeIndex : --this.activeIndex;\n this.activeIndex = index = this.activeIndex === (count) ? 0 : this.activeIndex;\n this.activeIndex = index = this.activeIndex < 0 ? (count - 1) : this.activeIndex;\n this.activeIndex = index = this.validLiElement(this.activeIndex, (event.keyCode === 40 || event.keyCode === 39) ?\n false : true);\n if (!this.isBlazorServer) {\n nextItem = isNullOrUndefined(this.timeCollections[index]) ? this.timeCollections[0] : this.timeCollections[index];\n }\n }\n else if (event.action === 'home') {\n var index = this.validLiElement(0);\n this.activeIndex = index;\n if (!this.isBlazorServer) {\n nextItem = this.timeCollections[index];\n }\n }\n else if (event.action === 'end') {\n var index = this.validLiElement(count - 1, true);\n this.activeIndex = index;\n if (!this.isBlazorServer) {\n nextItem = this.timeCollections[index];\n }\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n if (this.isBlazorServer) {\n this.inputElement.setAttribute('value', this.selectedElement.getAttribute('data-value'));\n this.interopAdaptor.invokeMethodAsync('OnListItemClick', this.activeIndex, true);\n }\n else {\n this.elementValue(new Date(nextItem));\n }\n }\n this.isNavigate = true;\n this.setHover(this.selectedElement, NAVIGATION);\n this.setActiveDescendant();\n if (!this.isBlazorServer) {\n this.selectInputText();\n }\n if (this.isPopupOpen() && this.selectedElement !== null && (!event || event.type !== 'click')) {\n this.setScrollPosition();\n }\n };\n TimePicker.prototype.getCultureTimeObject = function (ld, c) {\n return isBlazor() ? (getValue('t', getValue(c, blazorCultureFormats))).replace(/tt/, 'a') :\n getValue('main.' + c + '.dates.calendars.gregorian.timeFormats.short', ld);\n };\n TimePicker.prototype.getCultureDateObject = function (ld, c) {\n return isBlazor() ? (getValue('d', getValue(c, blazorCultureFormats))) :\n getValue('main.' + c + '.dates.calendars.gregorian.dateFormats.short', ld);\n };\n TimePicker.prototype.wireListEvents = function () {\n EventHandler.add(this.listWrapper, 'click', this.onMouseClick, this);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n };\n TimePicker.prototype.unWireListEvents = function () {\n if (this.listWrapper) {\n EventHandler.remove(this.listWrapper, 'click', this.onMouseClick);\n if (!Browser.isDevice) {\n EventHandler.remove(this.listWrapper, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.listWrapper, 'mouseout', this.onMouseLeave);\n }\n }\n };\n TimePicker.prototype.valueProcess = function (event, value) {\n var result = (isNullOrUndefined(this.checkDateValue(value))) ? null : value;\n if (+this.prevDate !== +result) {\n this.initValue = result;\n this.changeEvent(event);\n }\n };\n TimePicker.prototype.changeEvent = function (e) {\n this.addSelection();\n this.updateInput(true, this.initValue);\n var eventArgs = {\n event: (e || null),\n value: this.value,\n text: (this.inputElement).value,\n isInteracted: !isNullOrUndefined(e),\n element: this.element\n };\n eventArgs.value = this.valueWithMinutes || this.getDateObject(this.inputElement.value);\n this.prevDate = this.valueWithMinutes || this.getDateObject(this.inputElement.value);\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', eventArgs);\n }\n this.invalidValueString = null;\n this.checkErrorState(this.value);\n };\n TimePicker.prototype.updateInput = function (isUpdate, date) {\n if (isUpdate) {\n this.prevValue = this.getValue(date);\n }\n this.prevDate = this.valueWithMinutes = date;\n if ((typeof date !== 'number') || (this.value && +new Date(+this.value).setMilliseconds(0)) !== +date) {\n this.setProperties({ value: date }, true);\n }\n if (!this.strictMode && isNullOrUndefined(this.value) && this.invalidValueString) {\n this.checkErrorState(this.invalidValueString);\n this.updateInputValue(this.invalidValueString);\n }\n this.clearIconState();\n };\n TimePicker.prototype.setActiveDescendant = function () {\n if (!isNullOrUndefined(this.selectedElement)) {\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });\n }\n else {\n attributes(this.inputElement, { 'aria-activedescendant': 'null' });\n }\n };\n TimePicker.prototype.removeSelection = function () {\n this.removeHover(HOVER);\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + SELECTED);\n if (items.length) {\n removeClass(items, SELECTED);\n items[0].removeAttribute('aria-selected');\n }\n }\n };\n TimePicker.prototype.removeHover = function (className) {\n var hoveredItem = this.getHoverItem(className);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, className);\n if (className === NAVIGATION) {\n hoveredItem[0].removeAttribute('aria-selected');\n }\n }\n };\n TimePicker.prototype.getHoverItem = function (className) {\n var hoveredItem;\n if (!isNullOrUndefined(this.popupWrapper)) {\n hoveredItem = this.popupWrapper.querySelectorAll('.' + className);\n }\n return hoveredItem;\n };\n TimePicker.prototype.setActiveClass = function () {\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n for (var i = 0; i < items.length; i++) {\n if ((!this.isBlazorServer && this.timeCollections[i] === +this.getDateObject(this.valueWithMinutes))\n || (this.isBlazorServer && this.blazorTimeCollections[i] === this.blazorTimeCollections[this.activeIndex])) {\n items[i].setAttribute('aria-selected', 'true');\n this.selectedElement = items[i];\n this.activeIndex = i;\n break;\n }\n }\n }\n }\n };\n TimePicker.prototype.addSelection = function () {\n this.selectedElement = null;\n this.removeSelection();\n this.setActiveClass();\n if (!isNullOrUndefined(this.selectedElement)) {\n addClass([this.selectedElement], SELECTED);\n this.selectedElement.setAttribute('aria-selected', 'true');\n }\n };\n TimePicker.prototype.isValidLI = function (li) {\n return (li && li.classList.contains(LISTCLASS) && !li.classList.contains(DISABLED));\n };\n TimePicker.prototype.createDateObj = function (val) {\n var formatStr = isBlazor() ?\n 'M' + getDefaultDateObject().dateSeperator + 'd' + getDefaultDateObject().dateSeperator + 'yy'\n : null;\n var today = this.globalize.formatDate(new Date(), { format: formatStr, skeleton: 'short', type: 'date' });\n var value = null;\n if (typeof val === 'string') {\n if (val.toUpperCase().indexOf('AM') > -1 || val.toUpperCase().indexOf('PM') > -1) {\n today = this.defaultCulture.formatDate(new Date(), { format: formatStr, skeleton: 'short', type: 'date' });\n value = isNaN(+new Date(today + ' ' + val)) ? null : new Date(new Date(today + ' ' + val).setMilliseconds(0));\n if (isNullOrUndefined(value)) {\n value = this.timeParse(today, val);\n }\n }\n else {\n value = this.timeParse(today, val);\n }\n }\n else if (val instanceof Date) {\n value = val;\n }\n return value;\n };\n TimePicker.prototype.timeParse = function (today, val) {\n var value;\n value = this.globalize.parseDate(today + ' ' + val, {\n format: this.cldrDateFormat() + ' ' + this.cldrTimeFormat(), type: 'datetime'\n });\n value = isNullOrUndefined(value) ? this.globalize.parseDate(today + ' ' + val, {\n format: this.cldrDateFormat() + ' ' + this.dateToNumeric(), type: 'datetime'\n }) : value;\n value = isNullOrUndefined(value) ? value : new Date(value.setMilliseconds(0));\n return value;\n };\n TimePicker.prototype.createListItems = function () {\n var _this = this;\n this.listWrapper = this.createElement('div', { className: CONTENT, attrs: { 'tabindex': '0' } });\n var start;\n var interval = this.step * 60000;\n var listItems = [];\n this.timeCollections = [];\n this.disableItemCollection = [];\n start = +(this.getDateObject(this.initMin).setMilliseconds(0));\n var end = +(this.getDateObject(this.initMax).setMilliseconds(0));\n while (end >= start) {\n this.timeCollections.push(start);\n listItems.push(this.globalize.formatDate(new Date(start), { format: this.cldrTimeFormat(), type: 'time' }));\n start += interval;\n }\n var listBaseOptions = {\n itemCreated: function (args) {\n var eventArgs = {\n element: args.item,\n text: args.text, value: _this.getDateObject(args.text), isDisabled: false\n };\n _this.trigger('itemRender', eventArgs, function (eventArgs) {\n if (eventArgs.isDisabled) {\n eventArgs.element.classList.add(DISABLED);\n }\n if (eventArgs.element.classList.contains(DISABLED)) {\n _this.disableItemCollection.push(eventArgs.element.getAttribute('data-value'));\n }\n });\n }\n };\n this.listTag = ListBase.createList(this.createElement, listItems, listBaseOptions, true);\n attributes(this.listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options' });\n append([this.listTag], this.listWrapper);\n };\n TimePicker.prototype.documentClickHandler = function (event) {\n var target = event.target;\n if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(target) ||\n (this.popupObj.element && this.popupObj.element.contains(target)))) && event.type !== 'touchstart') {\n event.preventDefault();\n }\n if (!(closest(target, '[id=\"' + this.popupObj.element.id + '\"]')) && target !== this.inputElement\n && target !== (this.inputWrapper && this.inputWrapper.buttons[0]) &&\n target !== (this.inputWrapper && this.inputWrapper.clearButton) &&\n target !== (this.inputWrapper && this.inputWrapper.container)) {\n if (this.isPopupOpen()) {\n this.hide();\n this.focusOut();\n }\n }\n else if (target !== this.inputElement) {\n if (!Browser.isDevice) {\n this.isPreventBlur = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.inputElement)\n && (target === this.popupWrapper);\n }\n }\n };\n TimePicker.prototype.setEnableRtl = function () {\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n if (this.popupObj) {\n this.popupObj.enableRtl = this.enableRtl;\n this.popupObj.dataBind();\n }\n };\n TimePicker.prototype.setEnable = function () {\n Input.setEnabled(this.enabled, this.inputElement, this.floatLabelType);\n if (this.enabled) {\n removeClass([this.inputWrapper.container], DISABLED);\n attributes(this.inputElement, { 'aria-disabled': 'false' });\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.hide();\n addClass([this.inputWrapper.container], DISABLED);\n attributes(this.inputElement, { 'aria-disabled': 'true' });\n this.inputElement.tabIndex = -1;\n }\n };\n TimePicker.prototype.getProperty = function (date, val) {\n if (val === 'min') {\n this.initMin = this.checkDateValue(new Date(this.checkInValue(date.min)));\n this.setProperties({ min: this.initMin }, true);\n }\n else {\n this.initMax = this.checkDateValue(new Date(this.checkInValue(date.max)));\n this.setProperties({ max: this.initMax }, true);\n }\n if (this.inputElement.value === '') {\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n this.checkValue(this.inputElement.value);\n }\n this.checkValueChange(null, false);\n };\n TimePicker.prototype.inputBlurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n // IE popup closing issue when click over the scrollbar\n if (this.isPreventBlur && this.isPopupOpen()) {\n this.inputElement.focus();\n return;\n }\n this.closePopup(0, e);\n removeClass([this.inputWrapper.container], [FOCUS]);\n var blurArguments = {\n model: this.isBlazorServer ? null : this\n };\n this.trigger('blur', blurArguments);\n if (!this.isBlazorServer && this.getText() !== this.inputElement.value) {\n this.updateValue((this.inputElement).value, e);\n }\n else if (this.inputElement.value.trim().length === 0) {\n this.resetState();\n }\n if (this.isBlazorServer) {\n this.interopAdaptor.invokeMethodAsync('OnStrictMode', this.inputElement.value);\n }\n this.cursorDetails = null;\n this.isNavigate = false;\n if (this.inputElement.value === '') {\n this.invalidValueString = null;\n }\n };\n /**\n * Focuses out the TimePicker textbox element.\n *\n * @returns {void}\n */\n TimePicker.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement) {\n this.inputElement.blur();\n removeClass([this.inputWrapper.container], [FOCUS]);\n var blurArguments = {\n model: this.isBlazorServer ? null : this\n };\n this.trigger('blur', blurArguments);\n }\n };\n TimePicker.prototype.isPopupOpen = function () {\n if (this.popupWrapper && this.popupWrapper.classList.contains('' + ROOT)) {\n return true;\n }\n return false;\n };\n TimePicker.prototype.inputFocusHandler = function () {\n if (!this.enabled) {\n return;\n }\n var focusArguments = {\n model: this.isBlazorServer ? null : this\n };\n if (!this.readonly && !Browser.isDevice) {\n this.selectInputText();\n }\n this.trigger('focus', focusArguments);\n this.clearIconState();\n if (this.openOnFocus) {\n this.show();\n }\n };\n /**\n * Focused the TimePicker textbox element.\n *\n * @returns {void}\n */\n TimePicker.prototype.focusIn = function () {\n if (document.activeElement !== this.inputElement && this.enabled) {\n this.inputElement.focus();\n }\n };\n /**\n * Hides the TimePicker popup.\n *\n * @returns {void}\n\n */\n TimePicker.prototype.hide = function () {\n this.closePopup(100, null);\n this.clearIconState();\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Opens the popup to show the list items.\n *\n * @returns {void}\n\n */\n TimePicker.prototype.show = function (event) {\n var _this = this;\n if ((this.enabled && this.readonly) || !this.enabled || this.popupWrapper) {\n return;\n }\n else {\n this.popupCreation();\n if (Browser.isDevice && this.listWrapper) {\n this.modal = this.createElement('div');\n this.modal.className = '' + ROOT + ' e-time-modal';\n document.body.className += ' ' + OVERFLOW;\n document.body.appendChild(this.modal);\n }\n if (Browser.isDevice) {\n this.mobileTimePopupWrap = this.createElement('div', { className: 'e-timepicker-mob-popup-wrap' });\n document.body.appendChild(this.mobileTimePopupWrap);\n }\n this.openPopupEventArgs = {\n popup: this.isBlazorServer ? null : (this.popupObj || null),\n cancel: false,\n event: event || null,\n name: 'open',\n appendTo: Browser.isDevice ? this.mobileTimePopupWrap : document.body\n };\n var eventArgs = this.openPopupEventArgs;\n this.trigger('open', eventArgs, function (eventArgs) {\n if ((isBlazor() && _this.isServerRendered)) {\n eventArgs.popup = _this.popupObj || null;\n }\n _this.openPopupEventArgs = eventArgs;\n if (!_this.openPopupEventArgs.cancel && !_this.inputWrapper.buttons[0].classList.contains(DISABLED)) {\n if (_this.isBlazorServer) {\n _this.popupWrapper.style.visibility = '';\n _this.popupWrapper.style.width = _this.inputWrapper.container.offsetWidth + 'px';\n _this.popupWrapper.style.height = 'auto';\n }\n if (_this.isBlazorServer) {\n _this.openPopupEventArgs.popup = _this.popupObj;\n }\n _this.openPopupEventArgs.appendTo.appendChild(_this.popupWrapper);\n _this.popupAlignment(_this.openPopupEventArgs);\n _this.setScrollPosition();\n if (!Browser.isDevice) {\n _this.inputElement.focus();\n }\n var openAnimation = {\n name: 'FadeIn',\n duration: ANIMATIONDURATION\n };\n _this.popupObj.refreshPosition(_this.anchor);\n if (_this.zIndex === 1000) {\n _this.popupObj.show(new Animation(openAnimation), _this.element);\n }\n else {\n _this.popupObj.show(new Animation(openAnimation), null);\n }\n _this.setActiveDescendant();\n attributes(_this.inputElement, { 'aria-expanded': 'true' });\n addClass([_this.inputWrapper.container], FOCUS);\n EventHandler.add(document, 'mousedown touchstart', _this.documentClickHandler, _this);\n _this.setOverlayIndex(_this.mobileTimePopupWrap, _this.popupObj.element, _this.modal, Browser.isDevice);\n }\n else {\n _this.popupObj.destroy();\n if (_this.isBlazorServer) {\n _this.disposeServerPopup();\n _this.inputWrapper.container.parentElement.insertBefore(_this.popupWrapper, _this.inputWrapper.container.nextElementSibling);\n _this.interopAdaptor.invokeMethodAsync('OnPopupHide', false);\n }\n _this.popupWrapper = _this.listTag = undefined;\n _this.liCollections = _this.timeCollections = _this.disableItemCollection = [];\n _this.popupObj = null;\n }\n });\n }\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n TimePicker.prototype.setOverlayIndex = function (popupWrapper, timePopupElement, modal, isDevice) {\n if (isDevice && !isNullOrUndefined(timePopupElement) && !isNullOrUndefined(modal) && !isNullOrUndefined(popupWrapper)) {\n var index = parseInt(timePopupElement.style.zIndex, 10) ? parseInt(timePopupElement.style.zIndex, 10) : 1000;\n modal.style.zIndex = (index - 1).toString();\n popupWrapper.style.zIndex = index.toString();\n }\n };\n TimePicker.prototype.formatValues = function (type) {\n var value;\n if (typeof type === 'number') {\n value = formatUnit(type);\n }\n else if (typeof type === 'string') {\n value = (type.match(/px|%|em/)) ? type : isNaN(parseInt(type, 10)) ? type : formatUnit(type);\n }\n return value;\n };\n TimePicker.prototype.popupAlignment = function (args) {\n args.popup.position.X = this.formatValues(args.popup.position.X);\n args.popup.position.Y = this.formatValues(args.popup.position.Y);\n if (!isNaN(parseFloat(args.popup.position.X)) || !isNaN(parseFloat(args.popup.position.Y))) {\n this.popupObj.relateTo = this.anchor = document.body;\n this.popupObj.targetType = 'container';\n }\n if (!isNaN(parseFloat(args.popup.position.X))) {\n this.popupObj.offsetX = parseFloat(args.popup.position.X);\n }\n if (!isNaN(parseFloat(args.popup.position.Y))) {\n this.popupObj.offsetY = parseFloat(args.popup.position.Y);\n }\n if (!Browser.isDevice) {\n switch (args.popup.position.X) {\n case 'left':\n break;\n case 'right':\n args.popup.offsetX = this.containerStyle.width;\n break;\n case 'center':\n args.popup.offsetX = -(this.containerStyle.width / 2);\n break;\n }\n switch (args.popup.position.Y) {\n case 'top':\n break;\n case 'bottom':\n break;\n case 'center':\n args.popup.offsetY = -(this.containerStyle.height / 2);\n break;\n }\n if (args.popup.position.X === 'center' && args.popup.position.Y === 'center') {\n this.popupObj.relateTo = this.inputWrapper.container;\n this.anchor = this.inputElement;\n this.popupObj.targetType = 'relative';\n }\n }\n else {\n if (args.popup.position.X === 'center' && args.popup.position.Y === 'center') {\n this.popupObj.relateTo = this.anchor = document.body;\n this.popupObj.offsetY = 0;\n this.popupObj.targetType = 'container';\n this.popupObj.collision = { X: 'fit', Y: 'fit' };\n }\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the properties to be maintained upon browser refresh.\n *\n * @returns {string}\n */\n TimePicker.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * To get component name\n *\n * @returns {string} Returns the component name.\n * @private\n */\n TimePicker.prototype.getModuleName = function () {\n return 'timepicker';\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {TimePickerModel} newProp - Returns the dynamic property value of the component.\n * @param {TimePickerModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n TimePicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n this.inputElement.setAttribute('aria-placeholder', newProp.placeholder);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement, this.floatLabelType);\n if (this.readonly) {\n this.hide();\n }\n this.setTimeAllowEdit();\n break;\n case 'enabled':\n this.setProperties({ enabled: newProp.enabled }, true);\n this.setEnable();\n break;\n case 'allowEdit':\n this.setTimeAllowEdit();\n break;\n case 'enableRtl':\n if (!this.isBlazorServer) {\n this.setProperties({ enableRtl: newProp.enableRtl }, true);\n this.setEnableRtl();\n }\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n this.setZIndex();\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToElement();\n this.updateHtmlAttributeToWrapper();\n this.checkAttributes(true);\n break;\n case 'min':\n case 'max':\n if (!this.isBlazorServer) {\n this.getProperty(newProp, prop);\n }\n break;\n case 'showClearButton':\n Input.setClearButton(this.showClearButton, this.inputElement, this.inputWrapper);\n this.bindClearEvent();\n break;\n case 'locale':\n this.setProperties({ locale: newProp.locale }, true);\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n this.updatePlaceHolder();\n if (!this.isBlazorServer) {\n this.setValue(this.value);\n }\n break;\n case 'width':\n setStyleAttribute(this.inputWrapper.container, { 'width': this.setWidth(newProp.width) });\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n break;\n case 'format':\n this.setProperties({ format: newProp.format }, true);\n this.checkTimeFormat();\n if (!this.isBlazorServer) {\n this.setValue(this.value);\n }\n break;\n case 'value':\n if (!this.isBlazorServer) {\n this.invalidValueString = null;\n this.checkInvalidValue(newProp.value);\n newProp.value = this.value;\n if (!this.invalidValueString) {\n if (typeof newProp.value === 'string') {\n this.setProperties({ value: this.checkDateValue(new Date(newProp.value)) }, true);\n newProp.value = this.value;\n }\n else {\n if ((newProp.value && +new Date(+newProp.value).setMilliseconds(0)) !== +this.value) {\n newProp.value = this.checkDateValue(new Date('' + newProp.value));\n }\n }\n this.initValue = newProp.value;\n newProp.value = this.compareFormatChange(this.checkValue(newProp.value));\n }\n else {\n this.updateInputValue(this.invalidValueString);\n this.checkErrorState(this.invalidValueString);\n }\n this.checkValueChange(null, false);\n if (this.isPopupOpen()) {\n this.setScrollPosition();\n }\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n }\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);\n break;\n case 'strictMode':\n if (!this.isBlazorServer) {\n this.invalidValueString = null;\n if (newProp.strictMode) {\n this.checkErrorState(null);\n }\n this.setProperties({ strictMode: newProp.strictMode }, true);\n this.checkValue((this.inputElement).value);\n this.checkValueChange(null, false);\n }\n break;\n case 'scrollTo':\n if (!this.isBlazorServer) {\n if (this.checkDateValue(new Date(this.checkInValue(newProp.scrollTo)))) {\n if (this.popupWrapper) {\n this.setScrollTo();\n }\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkInValue(newProp.scrollTo))) }, true);\n }\n else {\n this.setProperties({ scrollTo: null }, true);\n }\n }\n else {\n if (this.popupWrapper) {\n this.setScrollTo();\n }\n }\n break;\n }\n }\n };\n TimePicker.prototype.checkInValue = function (inValue) {\n if (inValue instanceof Date) {\n return (inValue.toUTCString());\n }\n else {\n return ('' + inValue);\n }\n };\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"strictMode\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"keyConfigs\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"format\", void 0);\n __decorate([\n Property(true)\n ], TimePicker.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"readonly\", void 0);\n __decorate([\n Property({})\n ], TimePicker.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property('Never')\n ], TimePicker.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"placeholder\", void 0);\n __decorate([\n Property(1000)\n ], TimePicker.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(true)\n ], TimePicker.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(30)\n ], TimePicker.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"scrollTo\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"min\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"max\", void 0);\n __decorate([\n Property(true)\n ], TimePicker.prototype, \"allowEdit\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"openOnFocus\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"itemRender\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"cleared\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"focus\", void 0);\n TimePicker = __decorate([\n NotifyPropertyChanges\n ], TimePicker);\n return TimePicker;\n}(Component));\nexport { TimePicker };\n/* eslint-enable @typescript-eslint/no-explicit-any */\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n///
\nimport { EventHandler, Internationalization, Property, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';\nimport { Animation, Event, cldrData, getDefaultDateObject, detach } from '@syncfusion/ej2-base';\nimport { createElement, remove, addClass, L10n, removeClass, closest, append, attributes } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, isNullOrUndefined, formatUnit, getValue, rippleEffect } from '@syncfusion/ej2-base';\nimport { extend, isBlazor, blazorCultureFormats } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { DatePicker } from '../datepicker/datepicker';\nimport { TimePickerBase } from '../timepicker/timepicker';\n//class constant defination\nvar DATEWRAPPER = 'e-date-wrapper';\nvar DATEPICKERROOT = 'e-datepicker';\nvar DATETIMEWRAPPER = 'e-datetime-wrapper';\nvar DAY = new Date().getDate();\nvar MONTH = new Date().getMonth();\nvar YEAR = new Date().getFullYear();\nvar HOUR = new Date().getHours();\nvar MINUTE = new Date().getMinutes();\nvar SECOND = new Date().getSeconds();\nvar MILLISECOND = new Date().getMilliseconds();\nvar ROOT = 'e-datetimepicker';\nvar DATETIMEPOPUPWRAPPER = 'e-datetimepopup-wrapper';\nvar INPUTWRAPPER = 'e-input-group-icon';\nvar POPUP = 'e-popup';\nvar TIMEICON = 'e-time-icon';\nvar INPUTFOCUS = 'e-input-focus';\nvar POPUPDIMENSION = '250px';\nvar ICONANIMATION = 'e-icon-anim';\nvar DISABLED = 'e-disabled';\nvar ERROR = 'e-error';\nvar CONTENT = 'e-content';\nvar NAVIGATION = 'e-navigation';\nvar ACTIVE = 'e-active';\nvar HOVER = 'e-hover';\nvar ICONS = 'e-icons';\nvar HALFPOSITION = 2;\nvar LISTCLASS = 'e-list-item';\nvar ANIMATIONDURATION = 100;\nvar OVERFLOW = 'e-time-overflow';\n/**\n * Represents the DateTimePicker component that allows user to select\n * or enter a date time value.\n * ```html\n *
\n * ```\n * ```typescript\n * \n * ```\n */\nvar DateTimePicker = /** @class */ (function (_super) {\n __extends(DateTimePicker, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {DateTimePickerModel} options - Specifies the DateTimePicker model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function DateTimePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.valueWithMinutes = null;\n _this.scrollInvoked = false;\n _this.dateTimeOptions = options;\n return _this;\n }\n DateTimePicker.prototype.focusHandler = function () {\n if (!this.enabled) {\n return;\n }\n addClass([this.inputWrapper.container], INPUTFOCUS);\n };\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n DateTimePicker.prototype.focusIn = function () {\n _super.prototype.focusIn.call(this);\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n DateTimePicker.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement) {\n this.inputElement.blur();\n removeClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n };\n DateTimePicker.prototype.blurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n // IE popup closing issue when click over the scrollbar\n if (this.isTimePopupOpen() && this.isPreventBlur) {\n this.inputElement.focus();\n return;\n }\n removeClass([this.inputWrapper.container], INPUTFOCUS);\n var blurArguments = {\n model: (isBlazor() && this.isServerRendered) ? null : this\n };\n if (this.isTimePopupOpen()) {\n this.hide(e);\n }\n this.trigger('blur', blurArguments);\n };\n /**\n * To destroy the widget.\n *\n * @returns {void}\n */\n DateTimePicker.prototype.destroy = function () {\n if (this.popupObject && this.popupObject.element.classList.contains(POPUP)) {\n this.popupObject.destroy();\n detach(this.dateTimeWrapper);\n this.dateTimeWrapper = undefined;\n this.liCollections = this.timeCollections = [];\n if (!isNullOrUndefined(this.rippleFn)) {\n this.rippleFn();\n }\n }\n var ariaAttribute = {\n 'aria-live': 'assertive', 'aria-atomic': 'true', 'aria-invalid': 'false',\n 'aria-haspopup': 'true', 'aria-activedescendant': 'null',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',\n 'aria-owns': this.element.id + '_options', 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off'\n };\n if (this.inputElement) {\n Input.removeAttributes(ariaAttribute, this.inputElement);\n this.inputElement.removeAttribute('aria-placeholder');\n }\n if (this.isCalendar()) {\n if (this.popupWrapper) {\n detach(this.popupWrapper);\n }\n this.popupObject = this.popupWrapper = null;\n this.keyboardHandler.destroy();\n }\n this.unBindInputEvents();\n _super.prototype.destroy.call(this);\n };\n /**\n * To Initialize the control rendering.\n *\n * @returns {void}\n * @private\n */\n DateTimePicker.prototype.render = function () {\n this.timekeyConfigure = {\n enter: 'enter',\n escape: 'escape',\n end: 'end',\n tab: 'tab',\n home: 'home',\n down: 'downarrow',\n up: 'uparrow',\n left: 'leftarrow',\n right: 'rightarrow',\n open: 'alt+downarrow',\n close: 'alt+uparrow'\n };\n this.valueWithMinutes = null;\n this.previousDateTime = null;\n this.isPreventBlur = false;\n this.cloneElement = this.element.cloneNode(true);\n this.dateTimeFormat = this.cldrDateTimeFormat();\n this.initValue = this.value;\n _super.prototype.updateHtmlAttributeToElement.call(this);\n this.checkAttributes(false);\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('datetimepicker', localeText, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n _super.prototype.render.call(this);\n this.createInputElement();\n _super.prototype.updateHtmlAttributeToWrapper.call(this);\n this.bindInputEvents();\n this.setValue();\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkValue(this.scrollTo))) }, true);\n this.previousDateTime = this.value && new Date(+this.value);\n if (this.element.tagName === 'EJS-DATETIMEPICKER') {\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n if (!this.enabled) {\n this.inputElement.tabIndex = -1;\n }\n }\n this.renderComplete();\n };\n DateTimePicker.prototype.setValue = function () {\n this.initValue = this.validateMinMaxRange(this.value);\n if (!this.strictMode && this.isDateObject(this.initValue)) {\n var value = this.validateMinMaxRange(this.initValue);\n Input.setValue(this.getFormattedValue(value), this.inputElement, this.floatLabelType, this.showClearButton);\n this.setProperties({ value: value }, true);\n }\n else {\n if (isNullOrUndefined(this.value)) {\n this.initValue = null;\n this.setProperties({ value: null }, true);\n }\n }\n this.valueWithMinutes = this.value;\n _super.prototype.updateInput.call(this);\n };\n DateTimePicker.prototype.validateMinMaxRange = function (value) {\n var result = value;\n if (this.isDateObject(value)) {\n result = this.validateValue(value);\n }\n else {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n }\n }\n this.checkValidState(result);\n return result;\n };\n DateTimePicker.prototype.checkValidState = function (value) {\n this.isValidState = true;\n if (!this.strictMode) {\n if ((+(value) > +(this.max)) || (+(value) < +(this.min))) {\n this.isValidState = false;\n }\n }\n this.checkErrorState();\n };\n DateTimePicker.prototype.checkErrorState = function () {\n if (this.isValidState) {\n removeClass([this.inputWrapper.container], ERROR);\n }\n else {\n addClass([this.inputWrapper.container], ERROR);\n }\n attributes(this.inputElement, { 'aria-invalid': this.isValidState ? 'false' : 'true' });\n };\n DateTimePicker.prototype.validateValue = function (value) {\n var dateVal = value;\n if (this.strictMode) {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n dateVal = this.max;\n }\n else if (+value < +this.min) {\n dateVal = this.min;\n }\n else if (+value > +this.max) {\n dateVal = this.max;\n }\n }\n else {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n dateVal = value;\n }\n }\n return dateVal;\n };\n DateTimePicker.prototype.disablePopupButton = function (isDisable) {\n if (isDisable) {\n addClass([this.inputWrapper.buttons[0], this.timeIcon], DISABLED);\n this.hide();\n }\n else {\n removeClass([this.inputWrapper.buttons[0], this.timeIcon], DISABLED);\n }\n };\n DateTimePicker.prototype.getFormattedValue = function (value) {\n var dateOptions;\n if (!isNullOrUndefined(value)) {\n if (this.calendarMode === 'Gregorian') {\n dateOptions = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd' };\n }\n else {\n dateOptions = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n return this.globalize.formatDate(value, dateOptions);\n }\n else {\n return null;\n }\n };\n DateTimePicker.prototype.isDateObject = function (value) {\n return (!isNullOrUndefined(value) && !isNaN(+value)) ? true : false;\n };\n DateTimePicker.prototype.createInputElement = function () {\n removeClass([this.inputElement], DATEPICKERROOT);\n removeClass([this.inputWrapper.container], DATEWRAPPER);\n addClass([this.inputWrapper.container], DATETIMEWRAPPER);\n addClass([this.inputElement], ROOT);\n this.renderTimeIcon();\n };\n DateTimePicker.prototype.renderTimeIcon = function () {\n this.timeIcon = Input.appendSpan(INPUTWRAPPER + ' ' + TIMEICON + ' ' + ICONS, this.inputWrapper.container);\n };\n DateTimePicker.prototype.bindInputEvents = function () {\n EventHandler.add(this.timeIcon, 'mousedown', this.timeHandler, this);\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.dateHandler, this);\n EventHandler.add(this.inputElement, 'blur', this.blurHandler, this);\n EventHandler.add(this.inputElement, 'focus', this.focusHandler, this);\n this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);\n this.keyboardHandler = new KeyboardEvents(this.inputElement, {\n eventName: 'keydown',\n keyAction: this.inputKeyAction.bind(this),\n keyConfigs: this.defaultKeyConfigs\n });\n };\n DateTimePicker.prototype.unBindInputEvents = function () {\n EventHandler.remove(this.timeIcon, 'mousedown touchstart', this.timeHandler);\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateHandler);\n if (this.inputElement) {\n EventHandler.remove(this.inputElement, 'blur', this.blurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.focusHandler);\n }\n if (this.keyboardHandler) {\n this.keyboardHandler.destroy();\n }\n };\n DateTimePicker.prototype.cldrTimeFormat = function () {\n var cldrTime;\n if (this.isNullOrEmpty(this.timeFormat)) {\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = isBlazor() ? (getValue('t', getValue(this.locale, blazorCultureFormats))).replace(/tt/, 'a') :\n (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n }\n else {\n cldrTime = this.timeFormat;\n }\n return cldrTime;\n };\n DateTimePicker.prototype.cldrDateTimeFormat = function () {\n var cldrTime;\n var culture = new Internationalization(this.locale);\n var dateFormat = culture.getDatePattern({ skeleton: isBlazor() ? 'd' : 'yMd' });\n if (this.isNullOrEmpty(this.formatString)) {\n cldrTime = dateFormat + ' ' + this.getCldrFormat('time');\n }\n else {\n cldrTime = this.formatString;\n }\n return cldrTime;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DateTimePicker.prototype.getCldrFormat = function (type) {\n var cldrDateTime;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDateTime = isBlazor() ? (getValue('t', getValue(this.locale, blazorCultureFormats))).replace(/tt/, 'a') :\n (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDateTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n return cldrDateTime;\n };\n DateTimePicker.prototype.isNullOrEmpty = function (value) {\n if (isNullOrUndefined(value) || (typeof value === 'string' && value.trim() === '')) {\n return true;\n }\n else {\n return false;\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DateTimePicker.prototype.getCultureTimeObject = function (ld, c) {\n if (this.calendarMode === 'Gregorian') {\n return isBlazor() ? (getValue('t', getValue(this.locale, blazorCultureFormats))).replace(/tt/, 'a') :\n (getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.short', ld));\n }\n else {\n return getValue('main.' + '' + this.locale + '.dates.calendars.islamic.timeFormats.short', ld);\n }\n };\n DateTimePicker.prototype.timeHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n this.isIconClicked = true;\n if (Browser.isDevice) {\n this.inputElement.setAttribute('readonly', '');\n }\n if (e.currentTarget === this.timeIcon) {\n e.preventDefault();\n }\n if (this.enabled && !this.readonly) {\n if (this.isDatePopupOpen()) {\n _super.prototype.hide.call(this, e);\n }\n if (this.isTimePopupOpen()) {\n this.closePopup(e);\n }\n else {\n this.inputElement.focus();\n this.popupCreation('time', e);\n addClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n }\n this.isIconClicked = false;\n };\n DateTimePicker.prototype.dateHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n if (e.currentTarget === this.inputWrapper.buttons[0]) {\n e.preventDefault();\n }\n if (this.enabled && !this.readonly) {\n if (this.isTimePopupOpen()) {\n this.closePopup(e);\n }\n if (!isNullOrUndefined(this.popupWrapper)) {\n this.popupCreation('date', e);\n }\n }\n };\n DateTimePicker.prototype.show = function (type, e) {\n if ((this.enabled && this.readonly) || !this.enabled) {\n return;\n }\n else {\n if (type === 'time' && !this.dateTimeWrapper) {\n if (this.isDatePopupOpen()) {\n this.hide(e);\n }\n this.popupCreation('time', e);\n }\n else if (!this.popupObj) {\n if (this.isTimePopupOpen()) {\n this.hide(e);\n }\n _super.prototype.show.call(this);\n this.popupCreation('date', e);\n }\n }\n };\n DateTimePicker.prototype.toggle = function (e) {\n if (this.isDatePopupOpen()) {\n _super.prototype.hide.call(this, e);\n this.show('time', null);\n }\n else if (this.isTimePopupOpen()) {\n this.hide(e);\n _super.prototype.show.call(this, null, e);\n this.popupCreation('date', null);\n }\n else {\n this.show(null, e);\n }\n };\n DateTimePicker.prototype.listCreation = function () {\n var dateObject;\n if (this.calendarMode === 'Gregorian') {\n dateObject = this.globalize.parseDate(this.inputElement.value, {\n format: this.cldrDateTimeFormat(), type: 'datetime'\n });\n }\n else {\n dateObject = this.globalize.parseDate(this.inputElement.value, {\n format: this.cldrDateTimeFormat(), type: 'datetime', calendar: 'islamic'\n });\n }\n var value = isNullOrUndefined(this.value) ? this.inputElement.value !== '' ?\n dateObject :\n new Date() : this.value;\n this.valueWithMinutes = value;\n this.listWrapper = createElement('div', { className: CONTENT, attrs: { 'tabindex': '0' } });\n var min = this.startTime(value);\n var max = this.endTime(value);\n var listDetails = TimePickerBase.createListItems(this.createElement, min, max, this.globalize, this.cldrTimeFormat(), this.step);\n this.timeCollections = listDetails.collection;\n this.listTag = listDetails.list;\n attributes(this.listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options' });\n append([listDetails.list], this.listWrapper);\n this.wireTimeListEvents();\n var rippleModel = { duration: 300, selector: '.' + LISTCLASS };\n this.rippleFn = rippleEffect(this.listWrapper, rippleModel);\n this.liCollections = this.listWrapper.querySelectorAll('.' + LISTCLASS);\n };\n DateTimePicker.prototype.popupCreation = function (type, e) {\n if (Browser.isDevice) {\n this.element.setAttribute('readonly', 'readonly');\n }\n if (type === 'date') {\n if (!this.readonly && this.popupWrapper) {\n addClass([this.popupWrapper], DATETIMEPOPUPWRAPPER);\n attributes(this.popupWrapper, { 'id': this.element.id + '_datepopup' });\n }\n }\n else {\n if (!this.readonly) {\n this.dateTimeWrapper = createElement('div', {\n className: ROOT + ' ' + POPUP,\n attrs: { 'id': this.element.id + '_timepopup', 'style': 'visibility:hidden ; display:block' }\n });\n if (!isNullOrUndefined(this.cssClass)) {\n this.dateTimeWrapper.className += ' ' + this.cssClass;\n }\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.listCreation();\n append([this.listWrapper], this.dateTimeWrapper);\n }\n document.body.appendChild(this.dateTimeWrapper);\n this.addTimeSelection();\n this.renderPopup();\n this.setTimeScrollPosition();\n this.openPopup(e);\n this.popupObject.refreshPosition(this.inputElement);\n }\n }\n };\n DateTimePicker.prototype.openPopup = function (e) {\n var _this = this;\n this.preventArgs = {\n cancel: false,\n popup: (isBlazor() && this.isServerRendered) ? null : this.popupObject,\n event: e || null\n };\n var eventArgs = this.preventArgs;\n this.trigger('open', eventArgs, function (eventArgs) {\n _this.preventArgs = eventArgs;\n if (!_this.preventArgs.cancel && !_this.readonly) {\n var openAnimation = {\n name: 'FadeIn',\n duration: ANIMATIONDURATION\n };\n if (_this.zIndex === 1000) {\n _this.popupObject.show(new Animation(openAnimation), _this.element);\n }\n else {\n _this.popupObject.show(new Animation(openAnimation), null);\n }\n addClass([_this.inputWrapper.container], [ICONANIMATION]);\n attributes(_this.inputElement, { 'aria-expanded': 'true' });\n EventHandler.add(document, 'mousedown touchstart', _this.documentClickHandler, _this);\n }\n });\n };\n DateTimePicker.prototype.documentClickHandler = function (event) {\n var target = event.target;\n if ((!isNullOrUndefined(this.popupObject) && (this.inputWrapper.container.contains(target) ||\n (this.popupObject.element && this.popupObject.element.contains(target)))) && event.type !== 'touchstart') {\n event.preventDefault();\n }\n if (!(closest(target, '[id=\"' + (this.popupObject && this.popupObject.element.id + '\"]'))) && target !== this.inputElement\n && target !== this.timeIcon && target !== this.inputWrapper.container) {\n if (this.isTimePopupOpen()) {\n this.hide(event);\n this.focusOut();\n }\n }\n else if (target !== this.inputElement) {\n if (!Browser.isDevice) {\n this.isPreventBlur = ((document.activeElement === this.inputElement) && (Browser.isIE || Browser.info.name === 'edge')\n && target === this.popupObject.element);\n }\n }\n };\n DateTimePicker.prototype.isTimePopupOpen = function () {\n return (this.dateTimeWrapper && this.dateTimeWrapper.classList.contains('' + ROOT)) ? true : false;\n };\n DateTimePicker.prototype.isDatePopupOpen = function () {\n return (this.popupWrapper && this.popupWrapper.classList.contains('' + DATETIMEPOPUPWRAPPER)) ? true : false;\n };\n DateTimePicker.prototype.renderPopup = function () {\n var _this = this;\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n if (Browser.isDevice) {\n this.timeModal = createElement('div');\n this.timeModal.className = '' + ROOT + ' e-time-modal';\n document.body.className += ' ' + OVERFLOW;\n this.timeModal.style.display = 'block';\n document.body.appendChild(this.timeModal);\n }\n var offset = 4;\n this.popupObject = new Popup(this.dateTimeWrapper, {\n width: this.setPopupWidth(),\n zIndex: this.zIndex,\n targetType: 'container',\n collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },\n relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,\n position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },\n enableRtl: this.enableRtl,\n offsetY: offset,\n open: function () {\n _this.dateTimeWrapper.style.visibility = 'visible';\n addClass([_this.timeIcon], ACTIVE);\n if (!Browser.isDevice) {\n _this.timekeyConfigure = extend(_this.timekeyConfigure, _this.keyConfigs);\n _this.inputEvent = new KeyboardEvents(_this.inputWrapper.container, {\n keyAction: _this.timeKeyActionHandle.bind(_this),\n keyConfigs: _this.timekeyConfigure,\n eventName: 'keydown'\n });\n }\n }, close: function () {\n removeClass([_this.timeIcon], ACTIVE);\n _this.unWireTimeListEvents();\n _this.inputElement.setAttribute('aria-activedescendant', 'null');\n remove(_this.popupObject.element);\n _this.popupObject.destroy();\n _this.dateTimeWrapper.innerHTML = '';\n _this.listWrapper = _this.dateTimeWrapper = undefined;\n if (_this.inputEvent) {\n _this.inputEvent.destroy();\n }\n }, targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hide();\n }\n }\n });\n this.popupObject.element.style.maxHeight = POPUPDIMENSION;\n };\n DateTimePicker.prototype.setDimension = function (width) {\n if (typeof width === 'number') {\n width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n // eslint-disable-next-line no-self-assign\n width = width;\n }\n else {\n width = '100%';\n }\n return width;\n };\n DateTimePicker.prototype.setPopupWidth = function () {\n var width = this.setDimension(this.width);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.containerStyle.width * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n return width;\n };\n DateTimePicker.prototype.wireTimeListEvents = function () {\n EventHandler.add(this.listWrapper, 'click', this.onMouseClick, this);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n };\n DateTimePicker.prototype.unWireTimeListEvents = function () {\n if (this.listWrapper) {\n EventHandler.remove(this.listWrapper, 'click', this.onMouseClick);\n EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n }\n };\n DateTimePicker.prototype.onMouseOver = function (event) {\n var currentLi = closest(event.target, '.' + LISTCLASS);\n this.setTimeHover(currentLi, HOVER);\n };\n DateTimePicker.prototype.onMouseLeave = function () {\n this.removeTimeHover(HOVER);\n };\n DateTimePicker.prototype.setTimeHover = function (li, className) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(className)) {\n this.removeTimeHover(className);\n addClass([li], className);\n }\n };\n DateTimePicker.prototype.getPopupHeight = function () {\n var height = parseInt(POPUPDIMENSION, 10);\n var popupHeight = this.dateTimeWrapper.getBoundingClientRect().height;\n return popupHeight > height ? height : popupHeight;\n };\n DateTimePicker.prototype.changeEvent = function (e) {\n if ((this.value && this.value.valueOf()) !== (this.previousDateTime && +this.previousDateTime.valueOf())) {\n _super.prototype.changeEvent.call(this, e);\n this.valueWithMinutes = this.value;\n this.setInputValue('date');\n this.previousDateTime = this.value && new Date(+this.value);\n }\n };\n DateTimePicker.prototype.updateValue = function (e) {\n this.setInputValue('time');\n if (+this.previousDateTime !== +this.value) {\n this.changedArgs = {\n value: this.value, event: e || null,\n isInteracted: !isNullOrUndefined(e),\n element: this.element\n };\n this.addTimeSelection();\n this.trigger('change', this.changedArgs);\n this.previousDateTime = this.value;\n }\n };\n DateTimePicker.prototype.setTimeScrollPosition = function () {\n var popupElement = this.selectedElement;\n if (!isNullOrUndefined(popupElement)) {\n this.findScrollTop(popupElement);\n }\n else if (this.dateTimeWrapper && this.checkDateValue(this.scrollTo)) {\n this.setScrollTo();\n }\n };\n DateTimePicker.prototype.findScrollTop = function (element) {\n var listHeight = this.getPopupHeight();\n var nextElement = element.nextElementSibling;\n var height = nextElement ? nextElement.offsetTop : element.offsetTop;\n var lineHeight = element.getBoundingClientRect().height;\n if ((height + element.offsetTop) > listHeight) {\n this.dateTimeWrapper.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION + lineHeight / HALFPOSITION)) : height;\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n };\n DateTimePicker.prototype.setScrollTo = function () {\n var element;\n var items = this.dateTimeWrapper.querySelectorAll('.' + LISTCLASS);\n if (items.length >= 0) {\n this.scrollInvoked = true;\n var initialTime = this.timeCollections[0];\n var scrollTime = this.getDateObject(this.checkDateValue(this.scrollTo)).getTime();\n element = items[Math.round((scrollTime - initialTime) / (this.step * 60000))];\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n };\n DateTimePicker.prototype.setInputValue = function (type) {\n if (type === 'date') {\n this.inputElement.value = this.previousElementValue = this.getFormattedValue(this.getFullDateTime());\n this.setProperties({ value: this.getFullDateTime() }, true);\n }\n else {\n var tempVal = this.getFormattedValue(new Date(this.timeCollections[this.activeIndex]));\n Input.setValue(tempVal, this.inputElement, this.floatLabelType, this.showClearButton);\n this.previousElementValue = this.inputElement.value;\n this.setProperties({ value: new Date(this.timeCollections[this.activeIndex]) }, true);\n }\n this.updateIconState();\n };\n DateTimePicker.prototype.getFullDateTime = function () {\n var value = null;\n if (this.isDateObject(this.valueWithMinutes)) {\n value = this.combineDateTime(this.valueWithMinutes);\n }\n else {\n value = this.previousDate;\n }\n return this.validateMinMaxRange(value);\n };\n DateTimePicker.prototype.combineDateTime = function (value) {\n if (this.isDateObject(value)) {\n var day = this.previousDate.getDate();\n var month = this.previousDate.getMonth();\n var year = this.previousDate.getFullYear();\n var hour = value.getHours();\n var minutes = value.getMinutes();\n var seconds = value.getSeconds();\n return new Date(year, month, day, hour, minutes, seconds);\n }\n else {\n return this.previousDate;\n }\n };\n DateTimePicker.prototype.onMouseClick = function (event) {\n var target = event.target;\n var li = this.selectedElement = closest(target, '.' + LISTCLASS);\n if (li && li.classList.contains(LISTCLASS)) {\n this.timeValue = li.getAttribute('data-value');\n this.hide(event);\n }\n this.setSelection(li, event);\n };\n DateTimePicker.prototype.setSelection = function (li, event) {\n if (this.isValidLI(li) && !li.classList.contains(ACTIVE)) {\n this.selectedElement = li;\n var index = Array.prototype.slice.call(this.liCollections).indexOf(li);\n this.activeIndex = index;\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n addClass([this.selectedElement], ACTIVE);\n this.selectedElement.setAttribute('aria-selected', 'true');\n this.updateValue(event);\n }\n };\n DateTimePicker.prototype.setTimeActiveClass = function () {\n var collections = isNullOrUndefined(this.dateTimeWrapper) ? this.listWrapper : this.dateTimeWrapper;\n if (!isNullOrUndefined(collections)) {\n var items = collections.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n for (var i = 0; i < items.length; i++) {\n if (this.timeCollections[i] === +(this.valueWithMinutes)) {\n items[i].setAttribute('aria-selected', 'true');\n this.selectedElement = items[i];\n this.activeIndex = i;\n this.setTimeActiveDescendant();\n break;\n }\n }\n }\n }\n };\n DateTimePicker.prototype.setTimeActiveDescendant = function () {\n if (!isNullOrUndefined(this.selectedElement)) {\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });\n }\n else {\n attributes(this.inputElement, { 'aria-activedescendant': 'null' });\n }\n };\n DateTimePicker.prototype.addTimeSelection = function () {\n this.selectedElement = null;\n this.removeTimeSelection();\n this.setTimeActiveClass();\n if (!isNullOrUndefined(this.selectedElement)) {\n addClass([this.selectedElement], ACTIVE);\n this.selectedElement.setAttribute('aria-selected', 'true');\n }\n };\n DateTimePicker.prototype.removeTimeSelection = function () {\n this.removeTimeHover(HOVER);\n if (!isNullOrUndefined(this.dateTimeWrapper)) {\n var items = this.dateTimeWrapper.querySelectorAll('.' + ACTIVE);\n if (items.length) {\n removeClass(items, ACTIVE);\n items[0].removeAttribute('aria-selected');\n }\n }\n };\n DateTimePicker.prototype.removeTimeHover = function (className) {\n var hoveredItem = this.getTimeHoverItem(className);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, className);\n }\n };\n DateTimePicker.prototype.getTimeHoverItem = function (className) {\n var collections = isNullOrUndefined(this.dateTimeWrapper) ? this.listWrapper : this.dateTimeWrapper;\n var hoveredItem;\n if (!isNullOrUndefined(collections)) {\n hoveredItem = collections.querySelectorAll('.' + className);\n }\n return hoveredItem;\n };\n DateTimePicker.prototype.isValidLI = function (li) {\n return (li && li.classList.contains(LISTCLASS) && !li.classList.contains(DISABLED));\n };\n DateTimePicker.prototype.calculateStartEnd = function (value, range, method) {\n var day = value.getDate();\n var month = value.getMonth();\n var year = value.getFullYear();\n var hours = value.getHours();\n var minutes = value.getMinutes();\n var seconds = value.getSeconds();\n var milliseconds = value.getMilliseconds();\n if (range) {\n if (method === 'starttime') {\n return new Date(year, month, day, 0, 0, 0);\n }\n else {\n return new Date(year, month, day, 23, 59, 59);\n }\n }\n else {\n return new Date(year, month, day, hours, minutes, seconds, milliseconds);\n }\n };\n DateTimePicker.prototype.startTime = function (date) {\n var tempStartValue;\n var start;\n var tempMin = this.min;\n var value = date === null ? new Date() : date;\n if ((+value.getDate() === +tempMin.getDate() && +value.getMonth() === +tempMin.getMonth() &&\n +value.getFullYear() === +tempMin.getFullYear()) || ((+new Date(value.getFullYear(), value.getMonth(), value.getDate())) <=\n +new Date(tempMin.getFullYear(), tempMin.getMonth(), tempMin.getDate()))) {\n start = false;\n tempStartValue = this.min;\n }\n else if (+value < +this.max && +value > +this.min) {\n start = true;\n tempStartValue = value;\n }\n else if (+value >= +this.max) {\n start = true;\n tempStartValue = this.max;\n }\n return this.calculateStartEnd(tempStartValue, start, 'starttime');\n };\n DateTimePicker.prototype.endTime = function (date) {\n var tempEndValue;\n var end;\n var tempMax = this.max;\n var value = date === null ? new Date() : date;\n if ((+value.getDate() === +tempMax.getDate() && +value.getMonth() === +tempMax.getMonth() &&\n +value.getFullYear() === +tempMax.getFullYear()) || (+new Date(value.getUTCFullYear(), value.getMonth(), value.getDate()) >=\n +new Date(tempMax.getFullYear(), tempMax.getMonth(), tempMax.getDate()))) {\n end = false;\n tempEndValue = this.max;\n }\n else if (+value < +this.max && +value > +this.min) {\n end = true;\n tempEndValue = value;\n }\n else if (+value <= +this.min) {\n end = true;\n tempEndValue = this.min;\n }\n return this.calculateStartEnd(tempEndValue, end, 'endtime');\n };\n DateTimePicker.prototype.hide = function (e) {\n var _this = this;\n if (this.popupObj || this.dateTimeWrapper) {\n this.preventArgs = {\n cancel: false,\n popup: (isBlazor() && this.isServerRendered) ? null : this.popupObj || this.popupObject,\n event: e || null\n };\n var eventArgs = this.preventArgs;\n if (isNullOrUndefined(this.popupObj)) {\n this.trigger('close', eventArgs, function (eventArgs) {\n _this.dateTimeCloseEventCallback(e, eventArgs);\n });\n }\n else {\n this.dateTimeCloseEventCallback(e, eventArgs);\n }\n }\n else {\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n this.setAllowEdit();\n }\n };\n DateTimePicker.prototype.dateTimeCloseEventCallback = function (e, eventArgs) {\n this.preventArgs = eventArgs;\n if (!this.preventArgs.cancel) {\n if (this.isDatePopupOpen()) {\n _super.prototype.hide.call(this, e);\n }\n else if (this.isTimePopupOpen()) {\n this.closePopup(e);\n removeClass([document.body], OVERFLOW);\n if (Browser.isDevice && this.timeModal) {\n this.timeModal.style.display = 'none';\n this.timeModal.outerHTML = '';\n this.timeModal = null;\n }\n this.setTimeActiveDescendant();\n }\n }\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n this.setAllowEdit();\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DateTimePicker.prototype.closePopup = function (e) {\n if (this.isTimePopupOpen() && this.popupObject) {\n var animModel = {\n name: 'FadeOut',\n duration: ANIMATIONDURATION,\n delay: 0\n };\n this.popupObject.hide(new Animation(animModel));\n this.inputWrapper.container.classList.remove(ICONANIMATION);\n attributes(this.inputElement, { 'aria-expanded': 'false' });\n EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);\n }\n };\n DateTimePicker.prototype.preRender = function () {\n this.checkFormat();\n this.dateTimeFormat = this.cldrDateTimeFormat();\n _super.prototype.preRender.call(this);\n removeClass([this.inputElementCopy], [ROOT]);\n };\n DateTimePicker.prototype.getProperty = function (date, val) {\n if (val === 'min') {\n this.setProperties({ min: this.validateValue(date.min) }, true);\n }\n else {\n this.setProperties({ max: this.validateValue(date.max) }, true);\n }\n };\n DateTimePicker.prototype.checkAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['style', 'name', 'step', 'disabled', 'readonly', 'value', 'min', 'max', 'placeholder', 'type'];\n var value;\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {\n switch (prop) {\n case 'name':\n this.inputElement.setAttribute('name', this.inputElement.getAttribute(prop));\n break;\n case 'step':\n this.step = parseInt(this.inputElement.getAttribute(prop), 10);\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '' ||\n this.inputElement.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, !isDynamic);\n }\n break;\n case 'min':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['min'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ min: value }, !isDynamic);\n }\n }\n break;\n case 'disabled':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === 'true' ||\n this.inputElement.getAttribute(prop) === '' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['value'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ value: value }, !isDynamic);\n }\n }\n break;\n case 'max':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['max'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ max: value }, !isDynamic);\n }\n }\n break;\n }\n }\n }\n };\n DateTimePicker.prototype.requiredModules = function () {\n var modules = [];\n if (this) {\n modules.push({ args: [this], member: 'islamic' });\n }\n return modules;\n };\n DateTimePicker.prototype.getTimeActiveElement = function () {\n if (!isNullOrUndefined(this.dateTimeWrapper)) {\n return this.dateTimeWrapper.querySelectorAll('.' + ACTIVE);\n }\n else {\n return null;\n }\n };\n DateTimePicker.prototype.createDateObj = function (val) {\n return val instanceof Date ? val : null;\n };\n DateTimePicker.prototype.getDateObject = function (text) {\n if (!this.isNullOrEmpty(text)) {\n var dateValue = this.createDateObj(text);\n var value = this.valueWithMinutes;\n var status_1 = !isNullOrUndefined(value);\n if (this.checkDateValue(dateValue)) {\n var date = status_1 ? value.getDate() : DAY;\n var month = status_1 ? value.getMonth() : MONTH;\n var year = status_1 ? value.getFullYear() : YEAR;\n var hour = status_1 ? value.getHours() : HOUR;\n var minute = status_1 ? value.getMinutes() : MINUTE;\n var second = status_1 ? value.getSeconds() : SECOND;\n var millisecond = status_1 ? value.getMilliseconds() : MILLISECOND;\n if (!this.scrollInvoked) {\n return new Date(year, month, date, hour, minute, second, millisecond);\n }\n else {\n this.scrollInvoked = false;\n return new Date(year, month, date, dateValue.getHours(), dateValue.getMinutes(), dateValue.getSeconds(), dateValue.getMilliseconds());\n }\n }\n }\n return null;\n };\n DateTimePicker.prototype.findNextTimeElement = function (event) {\n var textVal = (this.inputElement).value;\n var value = isNullOrUndefined(this.valueWithMinutes) ? this.createDateObj(textVal) :\n this.getDateObject(this.valueWithMinutes);\n var dateTimeVal = null;\n var listCount = this.liCollections.length;\n if (!isNullOrUndefined(this.activeIndex) || !isNullOrUndefined(this.checkDateValue(value))) {\n if (event.action === 'home') {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[0])));\n this.activeIndex = 0;\n }\n else if (event.action === 'end') {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[this.timeCollections.length - 1])));\n this.activeIndex = this.timeCollections.length - 1;\n }\n else {\n if (event.action === 'down') {\n for (var i = 0; i < listCount; i++) {\n if (+value < this.timeCollections[i]) {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[i])));\n this.activeIndex = i;\n break;\n }\n }\n }\n else {\n for (var i = listCount - 1; i >= 0; i--) {\n if (+value > this.timeCollections[i]) {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[i])));\n this.activeIndex = i;\n break;\n }\n }\n }\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.timeElementValue(isNullOrUndefined(dateTimeVal) ? null : new Date(dateTimeVal));\n }\n };\n DateTimePicker.prototype.setTimeValue = function (date, value) {\n var dateString;\n var time;\n var val = this.validateMinMaxRange(value);\n var newval = this.createDateObj(val);\n if (this.getFormattedValue(newval) !== (!isNullOrUndefined(this.value) ? this.getFormattedValue(this.value) : null)) {\n this.valueWithMinutes = isNullOrUndefined(newval) ? null : newval;\n time = new Date(+this.valueWithMinutes);\n }\n else {\n if (this.strictMode) {\n //for strict mode case, when value not present within a range. Reset the nearest range value.\n date = newval;\n }\n this.valueWithMinutes = this.checkDateValue(date);\n time = new Date(+this.valueWithMinutes);\n }\n if (this.calendarMode === 'Gregorian') {\n dateString = this.globalize.formatDate(time, {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.cldrDateTimeFormat(),\n type: 'dateTime', skeleton: isBlazor() ? 'd' : 'yMd'\n });\n }\n else {\n dateString = this.globalize.formatDate(time, {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.cldrDateTimeFormat(),\n type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n });\n }\n if (!this.strictMode && isNullOrUndefined(time)) {\n Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n return time;\n };\n DateTimePicker.prototype.timeElementValue = function (value) {\n if (!isNullOrUndefined(this.checkDateValue(value)) && !this.isNullOrEmpty(value)) {\n var date = value instanceof Date ? value : this.getDateObject(value);\n return this.setTimeValue(date, value);\n }\n return null;\n };\n DateTimePicker.prototype.timeKeyHandler = function (event) {\n if (isNullOrUndefined(this.step) || this.step <= 0) {\n return;\n }\n var listCount = this.timeCollections.length;\n if (isNullOrUndefined(this.getTimeActiveElement()) || this.getTimeActiveElement().length === 0) {\n if (this.liCollections.length > 0) {\n if (isNullOrUndefined(this.value) && isNullOrUndefined(this.activeIndex)) {\n this.activeIndex = 0;\n this.selectedElement = this.liCollections[0];\n this.timeElementValue(new Date(this.timeCollections[0]));\n }\n else {\n this.findNextTimeElement(event);\n }\n }\n }\n else {\n var nextItemValue = void 0;\n if ((event.keyCode >= 37) && (event.keyCode <= 40)) {\n var index = (event.keyCode === 40 || event.keyCode === 39) ? ++this.activeIndex : --this.activeIndex;\n this.activeIndex = index = this.activeIndex === (listCount) ? 0 : this.activeIndex;\n this.activeIndex = index = this.activeIndex < 0 ? (listCount - 1) : this.activeIndex;\n nextItemValue = isNullOrUndefined(this.timeCollections[index]) ? this.timeCollections[0] : this.timeCollections[index];\n }\n else if (event.action === 'home') {\n this.activeIndex = 0;\n nextItemValue = this.timeCollections[0];\n }\n else if (event.action === 'end') {\n this.activeIndex = listCount - 1;\n nextItemValue = this.timeCollections[listCount - 1];\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.timeElementValue(new Date(nextItemValue));\n }\n this.isNavigate = true;\n this.setTimeHover(this.selectedElement, NAVIGATION);\n this.setTimeActiveDescendant();\n if (this.isTimePopupOpen() && this.selectedElement !== null && (!event || event.type !== 'click')) {\n this.setTimeScrollPosition();\n }\n };\n DateTimePicker.prototype.timeKeyActionHandle = function (event) {\n if (this.enabled) {\n if (event.action !== 'right' && event.action !== 'left' && event.action !== 'tab') {\n event.preventDefault();\n }\n switch (event.action) {\n case 'up':\n case 'down':\n case 'home':\n case 'end':\n this.timeKeyHandler(event);\n break;\n case 'enter':\n if (this.isNavigate) {\n this.selectedElement = this.liCollections[this.activeIndex];\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n this.setInputValue('time');\n if (+this.previousDateTime !== +this.value) {\n this.changedArgs.value = this.value;\n this.addTimeSelection();\n this.previousDateTime = this.value;\n }\n }\n else {\n this.updateValue(event);\n }\n this.hide(event);\n addClass([this.inputWrapper.container], INPUTFOCUS);\n this.isNavigate = false;\n event.stopPropagation();\n break;\n case 'escape':\n this.hide(event);\n break;\n default:\n this.isNavigate = false;\n break;\n }\n }\n };\n DateTimePicker.prototype.inputKeyAction = function (event) {\n switch (event.action) {\n case 'altDownArrow':\n this.strictModeUpdate();\n this.updateInput();\n this.toggle(event);\n break;\n }\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {DateTimePickerModel} newProp - Returns the dynamic property value of the component.\n * @param {DateTimePickerModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n\n */\n DateTimePicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'value':\n this.isDynamicValueChanged = true;\n this.invalidValueString = null;\n this.checkInvalidValue(newProp.value);\n newProp.value = this.value;\n newProp.value = this.validateValue(newProp.value);\n Input.setValue(this.getFormattedValue(newProp.value), this.inputElement, this.floatLabelType, this.showClearButton);\n this.valueWithMinutes = newProp.value;\n this.setProperties({ value: newProp.value }, true);\n if (this.popupObj) {\n this.popupUpdate();\n }\n this.previousDateTime = new Date(this.inputElement.value);\n this.updateInput();\n this.changeTrigger(null);\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n break;\n case 'min':\n case 'max':\n this.getProperty(newProp, prop);\n this.updateInput();\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n break;\n case 'cssClass':\n if (!isNullOrUndefined(oldProp.cssClass)) {\n oldProp.cssClass = (oldProp.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(newProp.cssClass)) {\n newProp.cssClass = (newProp.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n Input.setCssClass(newProp.cssClass, [this.inputWrapper.container], oldProp.cssClass);\n if (this.dateTimeWrapper) {\n Input.setCssClass(newProp.cssClass, [this.dateTimeWrapper], oldProp.cssClass);\n }\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);\n this.dateTimeFormat = this.cldrDateTimeFormat();\n _super.prototype.updateInput.call(this);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToElement();\n this.updateHtmlAttributeToWrapper();\n this.checkAttributes(true);\n break;\n case 'format':\n this.setProperties({ format: newProp.format }, true);\n this.checkFormat();\n this.dateTimeFormat = this.formatString;\n this.setValue();\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n this.inputElement.setAttribute('aria-placeholder', newProp.placeholder);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.inputElement);\n if (!this.enabled) {\n this.inputElement.tabIndex = -1;\n }\n break;\n case 'strictMode':\n this.invalidValueString = null;\n this.updateInput();\n break;\n case 'width':\n this.setWidth(newProp.width);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);\n break;\n case 'scrollTo':\n if (this.checkDateValue(new Date(this.checkValue(newProp.scrollTo)))) {\n if (this.dateTimeWrapper) {\n this.setScrollTo();\n }\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkValue(newProp.scrollTo))) }, true);\n }\n else {\n this.setProperties({ scrollTo: null }, true);\n }\n break;\n default:\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n break;\n }\n if (!this.isDynamicValueChanged) {\n this.hide(null);\n }\n this.isDynamicValueChanged = false;\n }\n };\n /**\n * To get component name.\n *\n * @returns {string} Returns the component name.\n * @private\n */\n DateTimePicker.prototype.getModuleName = function () {\n return 'datetimepicker';\n };\n DateTimePicker.prototype.restoreValue = function () {\n this.previousDateTime = this.previousDate;\n this.currentDate = this.value ? this.value : new Date();\n this.valueWithMinutes = this.value;\n this.previousDate = this.value;\n this.previousElementValue = this.previousElementValue = (isNullOrUndefined(this.inputValueCopy)) ? '' :\n this.getFormattedValue(this.inputValueCopy);\n };\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"timeFormat\", void 0);\n __decorate([\n Property(30)\n ], DateTimePicker.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"scrollTo\", void 0);\n __decorate([\n Property(1000)\n ], DateTimePicker.prototype, \"zIndex\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"keyConfigs\", void 0);\n __decorate([\n Property({})\n ], DateTimePicker.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(true)\n ], DateTimePicker.prototype, \"allowEdit\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"isMultiSelection\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"values\", void 0);\n __decorate([\n Property(true)\n ], DateTimePicker.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"placeholder\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"strictMode\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"serverTimezoneOffset\", void 0);\n __decorate([\n Property(new Date(1900, 0, 1))\n ], DateTimePicker.prototype, \"min\", void 0);\n __decorate([\n Property(new Date(2099, 11, 31))\n ], DateTimePicker.prototype, \"max\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"firstDayOfWeek\", void 0);\n __decorate([\n Property('Gregorian')\n ], DateTimePicker.prototype, \"calendarMode\", void 0);\n __decorate([\n Property('Month')\n ], DateTimePicker.prototype, \"start\", void 0);\n __decorate([\n Property('Month')\n ], DateTimePicker.prototype, \"depth\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"weekNumber\", void 0);\n __decorate([\n Property(true)\n ], DateTimePicker.prototype, \"showTodayButton\", void 0);\n __decorate([\n Property('Short')\n ], DateTimePicker.prototype, \"dayHeaderFormat\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"openOnFocus\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"cleared\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"destroyed\", void 0);\n DateTimePicker = __decorate([\n NotifyPropertyChanges\n ], DateTimePicker);\n return DateTimePicker;\n}(DatePicker));\nexport { DateTimePicker };\n"],"sourceRoot":""}