\n * \n * ```\n */\nvar Toolbar = /** @class */ (function (_super) {\n __extends(Toolbar, _super);\n /**\n * Initializes a new instance of the Toolbar class.\n *\n * @param {ToolbarModel} options - Specifies Toolbar model properties as options.\n * @param { string | HTMLElement} element - Specifies the element that is rendered as a Toolbar.\n */\n function Toolbar(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.resizeContext = _this.resize.bind(_this);\n _this.orientationChangeContext = _this.orientationChange.bind(_this);\n /**\n * Contains the keyboard configuration of the Toolbar.\n */\n _this.keyConfigs = {\n moveLeft: 'leftarrow',\n moveRight: 'rightarrow',\n moveUp: 'uparrow',\n moveDown: 'downarrow',\n popupOpen: 'enter',\n popupClose: 'escape',\n tab: 'tab',\n home: 'home',\n end: 'end'\n };\n return _this;\n }\n /**\n * Removes the control from the DOM and also removes all its related events.\n *\n * @returns {void}.\n */\n Toolbar.prototype.destroy = function () {\n var _this = this;\n if (this.isReact || this.isAngular) {\n this.clearTemplate();\n }\n var btnItems = this.element.querySelectorAll('.e-control.e-btn');\n [].slice.call(btnItems).forEach(function (el) {\n if (!isNOU(el) && !isNOU(el.ej2_instances) && !isNOU(el.ej2_instances[0]) && !(el.ej2_instances[0].isDestroyed)) {\n el.ej2_instances[0].destroy();\n }\n });\n this.unwireEvents();\n this.tempId.forEach(function (ele) {\n if (!isNOU(_this.element.querySelector(ele))) {\n document.body.appendChild(_this.element.querySelector(ele)).style.display = 'none';\n }\n });\n this.destroyItems();\n while (this.element.lastElementChild) {\n this.element.removeChild(this.element.lastElementChild);\n }\n if (this.trgtEle) {\n this.element.appendChild(this.ctrlTem);\n this.trgtEle = null;\n this.ctrlTem = null;\n }\n if (this.popObj) {\n this.popObj.destroy();\n detach(this.popObj.element);\n }\n if (this.activeEle) {\n this.activeEle = null;\n }\n this.popObj = null;\n this.tbarAlign = null;\n this.tbarItemsCol = [];\n this.remove(this.element, 'e-toolpop');\n if (this.cssClass) {\n removeClass([this.element], this.cssClass.split(' '));\n }\n this.element.removeAttribute('style');\n ['aria-disabled', 'aria-orientation', 'role'].forEach(function (attrb) {\n return _this.element.removeAttribute(attrb);\n });\n _super.prototype.destroy.call(this);\n };\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\n */\n Toolbar.prototype.preRender = function () {\n var eventArgs = { enableCollision: this.enableCollision, scrollStep: this.scrollStep };\n this.trigger('beforeCreate', eventArgs);\n this.enableCollision = eventArgs.enableCollision;\n this.scrollStep = eventArgs.scrollStep;\n this.scrollModule = null;\n this.popObj = null;\n this.tempId = [];\n this.tbarItemsCol = this.items;\n this.isVertical = this.element.classList.contains(CLS_VERTICAL) ? true : false;\n this.isExtendedOpen = false;\n this.popupPriCount = 0;\n if (this.enableRtl) {\n this.add(this.element, CLS_RTL);\n }\n };\n Toolbar.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.clickHandler, this);\n window.addEventListener('resize', this.resizeContext);\n window.addEventListener('orientationchange', this.orientationChangeContext);\n if (this.allowKeyboard) {\n this.wireKeyboardEvent();\n }\n };\n Toolbar.prototype.wireKeyboardEvent = function () {\n this.keyModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs\n });\n EventHandler.add(this.element, 'keydown', this.docKeyDown, this);\n this.updateTabIndex('0');\n };\n Toolbar.prototype.updateTabIndex = function (tabIndex) {\n var ele = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');\n if (!isNOU(ele) && !isNOU(ele.firstElementChild)) {\n var dataTabIndex = ele.firstElementChild.getAttribute('data-tabindex');\n if (dataTabIndex && dataTabIndex === '-1' && ele.firstElementChild.tagName !== 'INPUT') {\n ele.firstElementChild.setAttribute('tabindex', tabIndex);\n }\n }\n };\n Toolbar.prototype.unwireKeyboardEvent = function () {\n if (this.keyModule) {\n EventHandler.remove(this.element, 'keydown', this.docKeyDown);\n this.keyModule.destroy();\n this.keyModule = null;\n }\n };\n Toolbar.prototype.docKeyDown = function (e) {\n if (e.target.tagName === 'INPUT') {\n return;\n }\n var popCheck = !isNOU(this.popObj) && isVisible(this.popObj.element) && this.overflowMode !== 'Extended';\n if (e.keyCode === 9 && e.target.classList.contains('e-hor-nav') === true && popCheck) {\n this.popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n var keyCheck = (e.keyCode === 40 || e.keyCode === 38 || e.keyCode === 35 || e.keyCode === 36);\n if (keyCheck) {\n e.preventDefault();\n }\n };\n Toolbar.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'click', this.clickHandler);\n this.destroyScroll();\n this.unwireKeyboardEvent();\n window.removeEventListener('resize', this.resizeContext);\n window.removeEventListener('orientationchange', this.orientationChangeContext);\n EventHandler.remove(document, 'scroll', this.docEvent);\n EventHandler.remove(document, 'click', this.docEvent);\n };\n Toolbar.prototype.clearProperty = function () {\n this.tbarEle = [];\n this.tbarAlgEle = { lefts: [], centers: [], rights: [] };\n };\n Toolbar.prototype.docEvent = function (e) {\n var popEle = closest(e.target, '.e-popup');\n if (this.popObj && isVisible(this.popObj.element) && !popEle && this.overflowMode === 'Popup') {\n this.popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n };\n Toolbar.prototype.destroyScroll = function () {\n if (this.scrollModule) {\n if (this.tbarAlign) {\n this.add(this.scrollModule.element, CLS_TBARPOS);\n }\n this.scrollModule.destroy();\n this.scrollModule = null;\n }\n };\n Toolbar.prototype.destroyItems = function () {\n if (this.element) {\n [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) { detach(el); });\n }\n if (this.tbarAlign) {\n var tbarItems = this.element.querySelector('.' + CLS_ITEMS);\n [].slice.call(tbarItems.children).forEach(function (el) {\n detach(el);\n });\n this.tbarAlign = false;\n this.remove(tbarItems, CLS_TBARPOS);\n }\n this.clearProperty();\n };\n Toolbar.prototype.destroyMode = function () {\n if (this.scrollModule) {\n this.remove(this.scrollModule.element, CLS_RTL);\n this.destroyScroll();\n }\n this.remove(this.element, CLS_EXTENDEDPOPOPEN);\n this.remove(this.element, CLS_EXTEANDABLE_TOOLBAR);\n var tempEle = this.element.querySelector('.e-toolbar-multirow');\n if (tempEle) {\n this.remove(tempEle, CLS_MULTIROW);\n }\n if (this.popObj) {\n this.popupRefresh(this.popObj.element, true);\n }\n };\n Toolbar.prototype.add = function (ele, val) {\n ele.classList.add(val);\n };\n Toolbar.prototype.remove = function (ele, val) {\n ele.classList.remove(val);\n };\n Toolbar.prototype.elementFocus = function (ele) {\n var fChild = ele.firstElementChild;\n if (fChild) {\n fChild.focus();\n this.activeEleSwitch(ele);\n }\n else {\n ele.focus();\n }\n };\n Toolbar.prototype.clstElement = function (tbrNavChk, trgt) {\n var clst;\n if (tbrNavChk && this.popObj && isVisible(this.popObj.element)) {\n clst = this.popObj.element.querySelector('.' + CLS_ITEM);\n }\n else if (this.element === trgt || tbrNavChk) {\n clst = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');\n }\n else {\n clst = closest(trgt, '.' + CLS_ITEM);\n }\n return clst;\n };\n Toolbar.prototype.keyHandling = function (clst, e, trgt, navChk, scrollChk) {\n var popObj = this.popObj;\n var rootEle = this.element;\n var popAnimate = { name: 'FadeOut', duration: 100 };\n var value = e.action === 'moveUp' ? 'previous' : 'next';\n var ele;\n var nodes;\n switch (e.action) {\n case 'moveRight':\n if (this.isVertical) {\n return;\n }\n if (rootEle === trgt) {\n this.elementFocus(clst);\n }\n else if (!navChk) {\n this.eleFocus(clst, 'next');\n }\n break;\n case 'moveLeft':\n if (this.isVertical) {\n return;\n }\n if (!navChk) {\n this.eleFocus(clst, 'previous');\n }\n break;\n case 'home':\n case 'end':\n if (clst) {\n var popupCheck = closest(clst, '.e-popup');\n var extendedPopup = this.element.querySelector('.' + CLS_EXTENDABLECLASS);\n if (this.overflowMode === 'Extended' && extendedPopup && extendedPopup.classList.contains('e-popup-open')) {\n popupCheck = e.action === 'end' ? extendedPopup : null;\n }\n if (popupCheck) {\n if (isVisible(this.popObj.element)) {\n nodes = [].slice.call(popupCheck.children);\n if (e.action === 'home') {\n ele = this.focusFirstVisibleEle(nodes);\n }\n else {\n ele = this.focusLastVisibleEle(nodes);\n }\n }\n }\n else {\n nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')');\n if (e.action === 'home') {\n ele = this.focusFirstVisibleEle(nodes);\n }\n else {\n ele = this.focusLastVisibleEle(nodes);\n }\n }\n if (ele) {\n this.elementFocus(ele);\n }\n }\n break;\n case 'moveUp':\n case 'moveDown':\n if (!this.isVertical) {\n if (popObj && closest(trgt, '.e-popup')) {\n var popEle = popObj.element;\n var popFrstEle = popEle.firstElementChild;\n if ((value === 'previous' && popFrstEle === clst)) {\n popEle.lastElementChild.firstChild.focus();\n }\n else if (value === 'next' && popEle.lastElementChild === clst) {\n popFrstEle.firstChild.focus();\n }\n else {\n this.eleFocus(clst, value);\n }\n }\n else if (e.action === 'moveDown' && popObj && isVisible(popObj.element)) {\n this.elementFocus(clst);\n }\n }\n else {\n if (e.action === 'moveUp') {\n this.eleFocus(clst, 'previous');\n }\n else {\n this.eleFocus(clst, 'next');\n }\n }\n break;\n case 'tab':\n if (!scrollChk && !navChk) {\n var ele_1 = clst.firstElementChild;\n if (rootEle === trgt) {\n if (this.activeEle) {\n this.activeEle.focus();\n }\n else {\n this.activeEleRemove(ele_1);\n ele_1.focus();\n }\n }\n }\n break;\n case 'popupClose':\n if (popObj && this.overflowMode !== 'Extended') {\n popObj.hide(popAnimate);\n }\n break;\n case 'popupOpen':\n if (!navChk) {\n return;\n }\n if (popObj && !isVisible(popObj.element)) {\n popObj.element.style.top = rootEle.offsetHeight + 'px';\n popObj.show({ name: 'FadeIn', duration: 100 });\n }\n else {\n popObj.hide(popAnimate);\n }\n break;\n }\n };\n Toolbar.prototype.keyActionHandler = function (e) {\n var trgt = e.target;\n if (trgt.tagName === 'INPUT' || trgt.tagName === 'TEXTAREA' || this.element.classList.contains(CLS_DISABLE)) {\n return;\n }\n e.preventDefault();\n var tbrNavChk = trgt.classList.contains(CLS_TBARNAV);\n var tbarScrollChk = trgt.classList.contains(CLS_TBARSCRLNAV);\n var clst = this.clstElement(tbrNavChk, trgt);\n if (clst || tbarScrollChk) {\n this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);\n }\n };\n /**\n * Specifies the value to disable/enable the Toolbar component.\n * When set to `true`, the component will be disabled.\n *\n * @param {boolean} value - Based on this Boolean value, Toolbar will be enabled (false) or disabled (true).\n * @returns {void}.\n */\n Toolbar.prototype.disable = function (value) {\n var rootEle = this.element;\n if (value) {\n rootEle.classList.add(CLS_DISABLE);\n }\n else {\n rootEle.classList.remove(CLS_DISABLE);\n }\n if (this.activeEle) {\n this.activeEle.setAttribute('tabindex', this.activeEle.getAttribute('data-tabindex'));\n }\n if (this.scrollModule) {\n this.scrollModule.disable(value);\n }\n if (this.popObj) {\n if (isVisible(this.popObj.element) && this.overflowMode !== 'Extended') {\n this.popObj.hide();\n }\n rootEle.querySelector('#' + rootEle.id + '_nav').setAttribute('tabindex', !value ? '0' : '-1');\n }\n };\n Toolbar.prototype.eleContains = function (el) {\n return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el) || !el.classList.contains(CLS_ITEM);\n };\n Toolbar.prototype.focusFirstVisibleEle = function (nodes) {\n var element;\n var index = 0;\n while (index < nodes.length) {\n var ele = nodes[parseInt(index.toString(), 10)];\n if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE)) {\n return ele;\n }\n index++;\n }\n return element;\n };\n Toolbar.prototype.focusLastVisibleEle = function (nodes) {\n var element;\n var index = nodes.length - 1;\n while (index >= 0) {\n var ele = nodes[parseInt(index.toString(), 10)];\n if (!ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE)) {\n return ele;\n }\n index--;\n }\n return element;\n };\n Toolbar.prototype.eleFocus = function (closest, pos) {\n var sib = Object(closest)[pos + 'ElementSibling'];\n if (sib) {\n var skipEle = this.eleContains(sib);\n if (skipEle) {\n this.eleFocus(sib, pos);\n return;\n }\n this.elementFocus(sib);\n }\n else if (this.tbarAlign) {\n var elem = Object(closest.parentElement)[pos + 'ElementSibling'];\n if (!isNOU(elem) && elem.children.length === 0) {\n elem = Object(elem)[pos + 'ElementSibling'];\n }\n if (!isNOU(elem) && elem.children.length > 0) {\n if (pos === 'next') {\n var el = elem.querySelector('.' + CLS_ITEM);\n if (this.eleContains(el)) {\n this.eleFocus(el, pos);\n }\n else {\n el.firstElementChild.focus();\n this.activeEleSwitch(el);\n }\n }\n else {\n var el = elem.lastElementChild;\n if (this.eleContains(el)) {\n this.eleFocus(el, pos);\n }\n else {\n this.elementFocus(el);\n }\n }\n }\n }\n else if (!isNOU(closest)) {\n var tbrItems = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')' + ':not(.' + CLS_DISABLE + ')' + ':not(.' + CLS_HIDDEN + ')');\n if (pos === 'next' && tbrItems) {\n this.elementFocus(tbrItems[0]);\n }\n else if (pos === 'previous' && tbrItems) {\n this.elementFocus(tbrItems[tbrItems.length - 1]);\n }\n }\n };\n Toolbar.prototype.clickHandler = function (e) {\n var _this = this;\n var trgt = e.target;\n var ele = this.element;\n var isPopupElement = !isNOU(closest(trgt, '.' + CLS_POPUPCLASS));\n var clsList = trgt.classList;\n var popupNav = closest(trgt, ('.' + CLS_TBARNAV));\n if (!popupNav) {\n popupNav = trgt;\n }\n if (!ele.children[0].classList.contains('e-hscroll') && !ele.children[0].classList.contains('e-vscroll')\n && (clsList.contains(CLS_TBARNAV))) {\n clsList = trgt.querySelector('.e-icons').classList;\n }\n if (clsList.contains(CLS_POPUPICON) || clsList.contains(CLS_POPUPDOWN)) {\n this.popupClickHandler(ele, popupNav, CLS_RTL);\n }\n var itemObj;\n var clst = closest(e.target, '.' + CLS_ITEM);\n if ((isNOU(clst) || clst.classList.contains(CLS_DISABLE)) && !popupNav.classList.contains(CLS_TBARNAV)) {\n return;\n }\n if (clst) {\n var tempItem = this.items[this.tbarEle.indexOf(clst)];\n itemObj = tempItem;\n }\n var eventArgs = { originalEvent: e, item: itemObj };\n if (itemObj && !isNOU(itemObj.click)) {\n this.trigger('items[' + this.tbarEle.indexOf(clst) + '].click', eventArgs);\n }\n if (!eventArgs.cancel) {\n this.trigger('clicked', eventArgs, function (clickedArgs) {\n if (!isNOU(_this.popObj) && isPopupElement && !clickedArgs.cancel && _this.overflowMode === 'Popup' &&\n clickedArgs.item && clickedArgs.item.type !== 'Input') {\n _this.popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n });\n }\n };\n Toolbar.prototype.popupClickHandler = function (ele, popupNav, CLS_RTL) {\n var popObj = this.popObj;\n if (isVisible(popObj.element)) {\n popupNav.classList.remove(CLS_TBARNAVACT);\n popObj.hide({ name: 'FadeOut', duration: 100 });\n }\n else {\n if (ele.classList.contains(CLS_RTL)) {\n popObj.enableRtl = true;\n popObj.position = { X: 'left', Y: 'top' };\n }\n if (popObj.offsetX === 0 && !ele.classList.contains(CLS_RTL)) {\n popObj.enableRtl = false;\n popObj.position = { X: 'right', Y: 'top' };\n }\n popObj.dataBind();\n popObj.refreshPosition();\n popObj.element.style.top = this.getElementOffsetY() + 'px';\n if (this.overflowMode === 'Extended') {\n popObj.element.style.minHeight = '0px';\n }\n popupNav.classList.add(CLS_TBARNAVACT);\n popObj.show({ name: 'FadeIn', duration: 100 });\n }\n };\n /**\n * To Initialize the control rendering\n *\n * @private\n * @returns {void}\n */\n Toolbar.prototype.render = function () {\n var _this = this;\n this.initialize();\n this.renderControl();\n this.wireEvents();\n this.renderComplete();\n if (this.isReact && this.portals && this.portals.length > 0) {\n this.renderReactTemplates(function () {\n _this.refreshOverflow();\n });\n }\n };\n Toolbar.prototype.initialize = function () {\n var width = formatUnit(this.width);\n var height = formatUnit(this.height);\n if (Browser.info.name !== 'msie' || this.height !== 'auto' || this.overflowMode === 'MultiRow') {\n setStyle(this.element, { 'height': height });\n }\n setStyle(this.element, { 'width': width });\n var ariaAttr = {\n 'role': 'toolbar', 'aria-disabled': 'false',\n 'aria-orientation': !this.isVertical ? 'horizontal' : 'vertical'\n };\n attributes(this.element, ariaAttr);\n if (this.cssClass) {\n addClass([this.element], this.cssClass.split(' '));\n }\n };\n Toolbar.prototype.renderControl = function () {\n var ele = this.element;\n this.trgtEle = (ele.children.length > 0) ? ele.querySelector('div') : null;\n this.tbarAlgEle = { lefts: [], centers: [], rights: [] };\n this.renderItems();\n this.renderLayout();\n };\n Toolbar.prototype.renderLayout = function () {\n this.renderOverflowMode();\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n if (this.popObj && this.popObj.element.childElementCount > 1 && this.checkPopupRefresh(this.element, this.popObj.element)) {\n this.popupRefresh(this.popObj.element, false);\n }\n this.separator();\n };\n Toolbar.prototype.itemsAlign = function (items, itemEleDom) {\n var innerItem;\n var innerPos;\n if (!this.tbarEle) {\n this.tbarEle = [];\n }\n for (var i = 0; i < items.length; i++) {\n innerItem = this.renderSubComponent(items[parseInt(i.toString(), 10)], i);\n if (this.tbarEle.indexOf(innerItem) === -1) {\n this.tbarEle.push(innerItem);\n }\n if (!this.tbarAlign) {\n this.tbarItemAlign(items[parseInt(i.toString(), 10)], itemEleDom, i);\n }\n innerPos = itemEleDom.querySelector('.e-toolbar-' + items[parseInt(i.toString(), 10)].align.toLowerCase());\n if (innerPos) {\n if (!(items[parseInt(i.toString(), 10)].showAlwaysInPopup && items[parseInt(i.toString(), 10)].overflow !== 'Show')) {\n this.tbarAlgEle[(items[parseInt(i.toString(), 10)].align + 's').toLowerCase()].push(innerItem);\n }\n innerPos.appendChild(innerItem);\n }\n else {\n itemEleDom.appendChild(innerItem);\n }\n }\n if (this.isReact) {\n var portals = 'portals';\n this.notify('render-react-toolbar-template', this[\"\" + portals]);\n this.renderReactTemplates();\n }\n };\n /**\n * @hidden\n * @returns {void}\n */\n Toolbar.prototype.changeOrientation = function () {\n var ele = this.element;\n if (this.isVertical) {\n ele.classList.remove(CLS_VERTICAL);\n this.isVertical = false;\n if (this.height === 'auto' || this.height === '100%') {\n ele.style.height = this.height;\n }\n ele.setAttribute('aria-orientation', 'horizontal');\n }\n else {\n ele.classList.add(CLS_VERTICAL);\n this.isVertical = true;\n ele.setAttribute('aria-orientation', 'vertical');\n setStyle(this.element, { 'height': formatUnit(this.height), 'width': formatUnit(this.width) });\n }\n this.destroyMode();\n this.refreshOverflow();\n };\n Toolbar.prototype.initScroll = function (element, innerItems) {\n if (!this.scrollModule && this.checkOverflow(element, innerItems[0])) {\n if (this.tbarAlign) {\n this.element.querySelector('.' + CLS_ITEMS + ' .' + CLS_TBARCENTER).removeAttribute('style');\n }\n if (this.isVertical) {\n this.scrollModule = new VScroll({ scrollStep: this.scrollStep, enableRtl: this.enableRtl }, innerItems[0]);\n }\n else {\n this.scrollModule = new HScroll({ scrollStep: this.scrollStep, enableRtl: this.enableRtl }, innerItems[0]);\n }\n if (this.cssClass) {\n addClass([innerItems[0]], this.cssClass.split(' '));\n }\n var scrollEle = this.scrollModule.element.querySelector('.' + CLS_HSCROLLBAR + ', .' + 'e-vscroll-bar');\n if (scrollEle) {\n scrollEle.removeAttribute('tabindex');\n }\n this.remove(this.scrollModule.element, CLS_TBARPOS);\n setStyle(this.element, { overflow: 'hidden' });\n }\n };\n Toolbar.prototype.itemWidthCal = function (items) {\n var _this = this;\n var width = 0;\n var style;\n [].slice.call(selectAll('.' + CLS_ITEM, items)).forEach(function (el) {\n if (isVisible(el)) {\n style = window.getComputedStyle(el);\n width += _this.isVertical ? el.offsetHeight : el.offsetWidth;\n width += parseFloat(_this.isVertical ? style.marginTop : style.marginRight);\n width += parseFloat(_this.isVertical ? style.marginBottom : style.marginLeft);\n }\n });\n return width;\n };\n Toolbar.prototype.getScrollCntEle = function (innerItem) {\n var trgClass = (this.isVertical) ? '.e-vscroll-content' : '.e-hscroll-content';\n return innerItem.querySelector(trgClass);\n };\n Toolbar.prototype.checkOverflow = function (element, innerItem) {\n if (isNOU(element) || isNOU(innerItem) || !isVisible(element)) {\n return false;\n }\n var eleWidth = this.isVertical ? element.offsetHeight : element.offsetWidth;\n var itemWidth = this.isVertical ? innerItem.offsetHeight : innerItem.offsetWidth;\n if (this.tbarAlign || this.scrollModule || (eleWidth === itemWidth)) {\n itemWidth = this.itemWidthCal(this.scrollModule ? this.getScrollCntEle(innerItem) : innerItem);\n }\n var popNav = element.querySelector('.' + CLS_TBARNAV);\n var scrollNav = element.querySelector('.' + CLS_TBARSCRLNAV);\n var navEleWidth = 0;\n if (popNav) {\n navEleWidth = this.isVertical ? popNav.offsetHeight : popNav.offsetWidth;\n }\n else if (scrollNav) {\n navEleWidth = this.isVertical ? (scrollNav.offsetHeight * (2)) : (scrollNav.offsetWidth * 2);\n }\n if (itemWidth > eleWidth - navEleWidth) {\n return true;\n }\n else {\n return false;\n }\n };\n /**\n * Refresh the whole Toolbar component without re-rendering.\n * - It is used to manually refresh the Toolbar overflow modes such as scrollable, popup, multi row, and extended.\n * - It will refresh the Toolbar component after loading items dynamically.\n *\n * @returns {void}.\n */\n Toolbar.prototype.refreshOverflow = function () {\n this.resize();\n };\n Toolbar.prototype.toolbarAlign = function (innerItems) {\n if (this.tbarAlign) {\n this.add(innerItems, CLS_TBARPOS);\n this.itemPositioning();\n }\n };\n Toolbar.prototype.renderOverflowMode = function () {\n var ele = this.element;\n var innerItems = ele.querySelector('.' + CLS_ITEMS);\n var priorityCheck = this.popupPriCount > 0;\n if (ele && ele.children.length > 0) {\n this.offsetWid = ele.offsetWidth;\n this.remove(this.element, 'e-toolpop');\n if (Browser.info.name === 'msie' && this.height === 'auto') {\n ele.style.height = '';\n }\n switch (this.overflowMode) {\n case 'Scrollable':\n if (isNOU(this.scrollModule)) {\n this.initScroll(ele, [].slice.call(ele.getElementsByClassName(CLS_ITEMS)));\n }\n break;\n case 'Popup':\n this.add(this.element, 'e-toolpop');\n if (this.tbarAlign) {\n this.removePositioning();\n }\n if (this.checkOverflow(ele, innerItems) || priorityCheck) {\n this.setOverflowAttributes(ele);\n }\n this.toolbarAlign(innerItems);\n break;\n case 'MultiRow':\n this.add(innerItems, CLS_MULTIROW);\n if (this.checkOverflow(ele, innerItems) && this.tbarAlign) {\n this.removePositioning();\n this.add(innerItems, CLS_MULTIROWPOS);\n }\n if (ele.style.overflow === 'hidden') {\n ele.style.overflow = '';\n }\n if (Browser.info.name === 'msie' || ele.style.height !== 'auto') {\n ele.style.height = 'auto';\n }\n break;\n case 'Extended':\n this.add(this.element, CLS_EXTEANDABLE_TOOLBAR);\n if (this.checkOverflow(ele, innerItems) || priorityCheck) {\n if (this.tbarAlign) {\n this.removePositioning();\n }\n this.setOverflowAttributes(ele);\n }\n this.toolbarAlign(innerItems);\n }\n }\n };\n Toolbar.prototype.setOverflowAttributes = function (ele) {\n this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));\n var ariaAttr = {\n 'tabindex': '0', 'role': 'button', 'aria-haspopup': 'true',\n 'aria-label': 'overflow'\n };\n attributes(this.element.querySelector('.' + CLS_TBARNAV), ariaAttr);\n };\n Toolbar.prototype.separator = function () {\n var element = this.element;\n var eleItem = [].slice.call(element.querySelectorAll('.' + CLS_SEPARATOR));\n var multiVar = element.querySelector('.' + CLS_MULTIROW_SEPARATOR);\n var extendVar = element.querySelector('.' + CLS_EXTENDABLE_SEPARATOR);\n var eleInlineItem = this.overflowMode === 'MultiRow' ? multiVar : extendVar;\n if (eleInlineItem !== null) {\n if (this.overflowMode === 'MultiRow') {\n eleInlineItem.classList.remove(CLS_MULTIROW_SEPARATOR);\n }\n else if (this.overflowMode === 'Extended') {\n eleInlineItem.classList.remove(CLS_EXTENDABLE_SEPARATOR);\n }\n }\n for (var i = 0; i <= eleItem.length - 1; i++) {\n if (eleItem[parseInt(i.toString(), 10)].offsetLeft < 30 && eleItem[parseInt(i.toString(), 10)].offsetLeft !== 0) {\n if (this.overflowMode === 'MultiRow') {\n eleItem[parseInt(i.toString(), 10)].classList.add(CLS_MULTIROW_SEPARATOR);\n }\n else if (this.overflowMode === 'Extended') {\n eleItem[parseInt(i.toString(), 10)].classList.add(CLS_EXTENDABLE_SEPARATOR);\n }\n }\n }\n };\n Toolbar.prototype.createPopupEle = function (ele, innerEle) {\n var innerNav = ele.querySelector('.' + CLS_TBARNAV);\n var vertical = this.isVertical;\n if (!innerNav) {\n this.createPopupIcon(ele);\n }\n innerNav = ele.querySelector('.' + CLS_TBARNAV);\n var innerNavDom = (vertical ? innerNav.offsetHeight : innerNav.offsetWidth);\n var eleWidth = ((vertical ? ele.offsetHeight : ele.offsetWidth) - (innerNavDom));\n this.element.classList.remove('e-rtl');\n setStyle(this.element, { direction: 'initial' });\n this.checkPriority(ele, innerEle, eleWidth, true);\n if (this.enableRtl) {\n this.element.classList.add('e-rtl');\n }\n this.element.style.removeProperty('direction');\n this.createPopup();\n };\n Toolbar.prototype.pushingPoppedEle = function (tbarObj, popupPri, ele, eleHeight, sepHeight) {\n var element = tbarObj.element;\n var poppedEle = [].slice.call(selectAll('.' + CLS_POPUP, element.querySelector('.' + CLS_ITEMS)));\n var nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);\n var nodeIndex = 0;\n var nodePri = 0;\n poppedEle.forEach(function (el, index) {\n nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);\n if (el.classList.contains(CLS_TBAROVERFLOW) && nodes.length > 0) {\n if (tbarObj.tbResize && nodes.length > index) {\n ele.insertBefore(el, nodes[parseInt(index.toString(), 10)]);\n ++nodePri;\n }\n else {\n ele.insertBefore(el, ele.children[nodes.length]);\n ++nodePri;\n }\n }\n else if (el.classList.contains(CLS_TBAROVERFLOW)) {\n ele.insertBefore(el, ele.firstChild);\n ++nodePri;\n }\n else if (tbarObj.tbResize && el.classList.contains(CLS_POPOVERFLOW) && ele.children.length > 0 && nodes.length === 0) {\n ele.insertBefore(el, ele.firstChild);\n ++nodePri;\n }\n else if (el.classList.contains(CLS_POPOVERFLOW)) {\n popupPri.push(el);\n }\n else if (tbarObj.tbResize) {\n ele.insertBefore(el, ele.childNodes[nodeIndex + nodePri]);\n ++nodeIndex;\n }\n else {\n ele.appendChild(el);\n }\n if (el.classList.contains(CLS_SEPARATOR)) {\n setStyle(el, { display: '', height: sepHeight + 'px' });\n }\n else {\n setStyle(el, { display: '', height: eleHeight + 'px' });\n }\n });\n popupPri.forEach(function (el) {\n ele.appendChild(el);\n });\n var tbarEle = selectAll('.' + CLS_ITEM, element.querySelector('.' + CLS_ITEMS));\n for (var i = tbarEle.length - 1; i >= 0; i--) {\n var tbarElement = tbarEle[parseInt(i.toString(), 10)];\n if (tbarElement.classList.contains(CLS_SEPARATOR) && this.overflowMode !== 'Extended') {\n setStyle(tbarElement, { display: 'none' });\n }\n else {\n break;\n }\n }\n };\n Toolbar.prototype.createPopup = function () {\n var element = this.element;\n var sepHeight;\n var sepItem;\n if (this.overflowMode === 'Extended') {\n sepItem = element.querySelector('.' + CLS_SEPARATOR);\n sepHeight =\n (element.style.height === 'auto' || element.style.height === '') ? null : (sepItem && sepItem.offsetHeight);\n }\n var eleItem = element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_POPUP + ')');\n var eleHeight = (element.style.height === 'auto' || element.style.height === '') ? null : (eleItem && eleItem.offsetHeight);\n var ele;\n var popupPri = [];\n if (select('#' + element.id + '_popup.' + CLS_POPUPCLASS, element)) {\n ele = select('#' + element.id + '_popup.' + CLS_POPUPCLASS, element);\n }\n else {\n var extendEle = this.createElement('div', {\n id: element.id + '_popup', className: CLS_POPUPCLASS + ' ' + CLS_EXTENDABLECLASS\n });\n var popupEle = this.createElement('div', { id: element.id + '_popup', className: CLS_POPUPCLASS });\n ele = this.overflowMode === 'Extended' ? extendEle : popupEle;\n }\n this.pushingPoppedEle(this, popupPri, ele, eleHeight, sepHeight);\n this.popupInit(element, ele);\n };\n Toolbar.prototype.getElementOffsetY = function () {\n return (this.overflowMode === 'Extended' && window.getComputedStyle(this.element).getPropertyValue('box-sizing') === 'border-box' ?\n this.element.clientHeight : this.element.offsetHeight);\n };\n Toolbar.prototype.popupInit = function (element, ele) {\n if (!this.popObj) {\n element.appendChild(ele);\n if (this.cssClass) {\n addClass([ele], this.cssClass.split(' '));\n }\n setStyle(this.element, { overflow: '' });\n var eleStyles = window.getComputedStyle(this.element);\n var popup = new Popup(null, {\n relateTo: this.element,\n offsetY: (this.isVertical) ? 0 : this.getElementOffsetY(),\n enableRtl: this.enableRtl,\n open: this.popupOpen.bind(this),\n close: this.popupClose.bind(this),\n collision: { Y: this.enableCollision ? 'flip' : 'none' },\n position: this.enableRtl ? { X: 'left', Y: 'top' } : { X: 'right', Y: 'top' }\n });\n if (this.overflowMode === 'Extended') {\n popup.width = parseFloat(eleStyles.width) + ((parseFloat(eleStyles.borderRightWidth)) * 2);\n popup.offsetX = 0;\n }\n popup.appendTo(ele);\n EventHandler.add(document, 'scroll', this.docEvent.bind(this));\n EventHandler.add(document, 'click ', this.docEvent.bind(this));\n popup.element.style.maxHeight = popup.element.offsetHeight + 'px';\n if (this.isVertical) {\n popup.element.style.visibility = 'hidden';\n }\n if (this.isExtendedOpen) {\n var popupNav = this.element.querySelector('.' + CLS_TBARNAV);\n popupNav.classList.add(CLS_TBARNAVACT);\n classList(popupNav.firstElementChild, [CLS_POPUPICON], [CLS_POPUPDOWN]);\n this.element.querySelector('.' + CLS_EXTENDABLECLASS).classList.add(CLS_POPUPOPEN);\n }\n else {\n popup.hide();\n }\n this.popObj = popup;\n }\n else {\n var popupEle = this.popObj.element;\n setStyle(popupEle, { maxHeight: '', display: 'block' });\n setStyle(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });\n }\n };\n Toolbar.prototype.tbarPopupHandler = function (isOpen) {\n if (this.overflowMode === 'Extended') {\n if (isOpen) {\n this.add(this.element, CLS_EXTENDEDPOPOPEN);\n }\n else {\n this.remove(this.element, CLS_EXTENDEDPOPOPEN);\n }\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Toolbar.prototype.popupOpen = function (e) {\n var popObj = this.popObj;\n if (!this.isVertical) {\n popObj.offsetY = this.getElementOffsetY();\n popObj.dataBind();\n }\n var popupEle = this.popObj.element;\n var toolEle = this.popObj.element.parentElement;\n var popupNav = toolEle.querySelector('.' + CLS_TBARNAV);\n popupNav.setAttribute('aria-expanded', 'true');\n setStyle(popObj.element, { height: 'auto', maxHeight: '' });\n popObj.element.style.maxHeight = popObj.element.offsetHeight + 'px';\n if (this.overflowMode === 'Extended') {\n popObj.element.style.minHeight = '';\n }\n var popupElePos = popupEle.offsetTop + popupEle.offsetHeight + calculatePosition(toolEle).top;\n var popIcon = popupNav.firstElementChild;\n popupNav.classList.add(CLS_TBARNAVACT);\n classList(popIcon, [CLS_POPUPICON], [CLS_POPUPDOWN]);\n this.tbarPopupHandler(true);\n var scrollVal = isNOU(window.scrollY) ? 0 : window.scrollY;\n if (!this.isVertical && ((window.innerHeight + scrollVal) < popupElePos) && (this.element.offsetTop < popupEle.offsetHeight)) {\n var overflowHeight = (popupEle.offsetHeight - ((popupElePos - window.innerHeight - scrollVal) + 5));\n popObj.height = overflowHeight + 'px';\n for (var i = 0; i <= popupEle.childElementCount; i++) {\n var ele = popupEle.children[parseInt(i.toString(), 10)];\n if (ele.offsetTop + ele.offsetHeight > overflowHeight) {\n overflowHeight = ele.offsetTop;\n break;\n }\n }\n setStyle(popObj.element, { maxHeight: overflowHeight + 'px' });\n }\n else if (this.isVertical) {\n var tbEleData = this.element.getBoundingClientRect();\n setStyle(popObj.element, { maxHeight: (tbEleData.top + this.element.offsetHeight) + 'px', bottom: 0, visibility: '' });\n }\n if (popObj) {\n var popupOffset = popupEle.getBoundingClientRect();\n if (popupOffset.right > document.documentElement.clientWidth && popupOffset.width > toolEle.getBoundingClientRect().width) {\n popObj.collision = { Y: 'none' };\n popObj.dataBind();\n }\n popObj.refreshPosition();\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n Toolbar.prototype.popupClose = function (e) {\n var element = this.element;\n var popupNav = element.querySelector('.' + CLS_TBARNAV);\n popupNav.setAttribute('aria-expanded', 'false');\n var popIcon = popupNav.firstElementChild;\n popupNav.classList.remove(CLS_TBARNAVACT);\n classList(popIcon, [CLS_POPUPDOWN], [CLS_POPUPICON]);\n this.tbarPopupHandler(false);\n };\n Toolbar.prototype.checkPriority = function (ele, inEle, eleWidth, pre) {\n var popPriority = this.popupPriCount > 0;\n var len = inEle.length;\n var eleWid = eleWidth;\n var eleOffset;\n var checkoffset;\n var sepCheck = 0;\n var itemCount = 0;\n var itemPopCount = 0;\n var checkClass = function (ele, val) {\n var rVal = false;\n val.forEach(function (cls) {\n if (ele.classList.contains(cls)) {\n rVal = true;\n }\n });\n return rVal;\n };\n for (var i = len - 1; i >= 0; i--) {\n var mrgn = void 0;\n var compuStyle = window.getComputedStyle(inEle[parseInt(i.toString(), 10)]);\n if (this.isVertical) {\n mrgn = parseFloat((compuStyle).marginTop);\n mrgn += parseFloat((compuStyle).marginBottom);\n }\n else {\n mrgn = parseFloat((compuStyle).marginRight);\n mrgn += parseFloat((compuStyle).marginLeft);\n }\n var fstEleCheck = inEle[parseInt(i.toString(), 10)] === this.tbarEle[0];\n if (fstEleCheck) {\n this.tbarEleMrgn = mrgn;\n }\n eleOffset = this.isVertical ? inEle[parseInt(i.toString(), 10)].offsetHeight : inEle[parseInt(i.toString(), 10)].offsetWidth;\n var eleWid_1 = fstEleCheck ? (eleOffset + mrgn) : eleOffset;\n if (checkClass(inEle[parseInt(i.toString(), 10)], [CLS_POPPRI]) && popPriority) {\n inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);\n if (this.isVertical) {\n setStyle(inEle[parseInt(i.toString(), 10)], { display: 'none', minHeight: eleWid_1 + 'px' });\n }\n else {\n setStyle(inEle[parseInt(i.toString(), 10)], { display: 'none', minWidth: eleWid_1 + 'px' });\n }\n itemPopCount++;\n }\n if (this.isVertical) {\n checkoffset =\n (inEle[parseInt(i.toString(), 10)].offsetTop + inEle[parseInt(i.toString(), 10)].offsetHeight + mrgn) > eleWidth;\n }\n else {\n checkoffset =\n (inEle[parseInt(i.toString(), 10)].offsetLeft + inEle[parseInt(i.toString(), 10)].offsetWidth + mrgn) > eleWidth;\n }\n if (checkoffset) {\n if (inEle[parseInt(i.toString(), 10)].classList.contains(CLS_SEPARATOR)) {\n if (this.overflowMode === 'Extended') {\n var sepEle = inEle[parseInt(i.toString(), 10)];\n if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);\n itemPopCount++;\n }\n itemCount++;\n }\n else if (this.overflowMode === 'Popup') {\n if (sepCheck > 0 && itemCount === itemPopCount) {\n var sepEle = inEle[i + itemCount + (sepCheck - 1)];\n if (checkClass(sepEle, [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n setStyle(sepEle, { display: 'none' });\n }\n }\n sepCheck++;\n itemCount = 0;\n itemPopCount = 0;\n }\n }\n else {\n itemCount++;\n }\n if (inEle[parseInt(i.toString(), 10)].classList.contains(CLS_TBAROVERFLOW) && pre) {\n eleWidth -= ((this.isVertical ? inEle[parseInt(i.toString(), 10)].offsetHeight :\n inEle[parseInt(i.toString(), 10)].offsetWidth) + (mrgn));\n }\n else if (!checkClass(inEle[parseInt(i.toString(), 10)], [CLS_SEPARATOR, CLS_TBARIGNORE])) {\n inEle[parseInt(i.toString(), 10)].classList.add(CLS_POPUP);\n if (this.isVertical) {\n setStyle(inEle[parseInt(i.toString(), 10)], { display: 'none', minHeight: eleWid_1 + 'px' });\n }\n else {\n setStyle(inEle[parseInt(i.toString(), 10)], { display: 'none', minWidth: eleWid_1 + 'px' });\n }\n itemPopCount++;\n }\n else {\n eleWidth -= ((this.isVertical ? inEle[parseInt(i.toString(), 10)].offsetHeight :\n inEle[parseInt(i.toString(), 10)].offsetWidth) + (mrgn));\n }\n }\n }\n if (pre) {\n var popedEle = selectAll('.' + CLS_ITEM + ':not(.' + CLS_POPUP + ')', this.element);\n this.checkPriority(ele, popedEle, eleWid, false);\n }\n };\n Toolbar.prototype.createPopupIcon = function (element) {\n var id = element.id.concat('_nav');\n var className = 'e-' + element.id.concat('_nav ' + CLS_POPUPNAV);\n className = this.overflowMode === 'Extended' ? className + ' ' + CLS_EXTENDPOPUP : className;\n var nav = this.createElement('div', { id: id, className: className });\n if (Browser.info.name === 'msie' || Browser.info.name === 'edge') {\n nav.classList.add('e-ie-align');\n }\n var navItem = this.createElement('div', { className: CLS_POPUPDOWN + ' e-icons' });\n nav.appendChild(navItem);\n nav.setAttribute('tabindex', '0');\n nav.setAttribute('role', 'button');\n element.appendChild(nav);\n };\n Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid, ig, eleStyles) {\n var ignoreCount = ig;\n var popEle = this.popObj.element;\n var query = '.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_TBAROVERFLOW + ')';\n var priEleCnt = selectAll('.' + CLS_POPUP + ':not(.' + CLS_TBAROVERFLOW + ')', popEle).length;\n var checkClass = function (ele, val) {\n return ele.classList.contains(val);\n };\n if (selectAll(query, inEle).length === 0) {\n var eleSep = inEle.children[indx - (indx - sepPri) - 1];\n var ignoreCheck = (!isNOU(eleSep) && checkClass(eleSep, CLS_TBARIGNORE));\n if ((!isNOU(eleSep) && checkClass(eleSep, CLS_SEPARATOR) && !isVisible(eleSep)) || ignoreCheck) {\n eleSep.style.display = 'unset';\n var eleSepWidth = eleSep.offsetWidth + (parseFloat(window.getComputedStyle(eleSep).marginRight) * 2);\n var prevSep = eleSep.previousElementSibling;\n if ((elWid + eleSepWidth) < wid || des) {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - (indx - sepPri)]);\n if (!isNOU(prevSep)) {\n prevSep.style.display = '';\n }\n }\n else {\n setStyle(el, eleStyles);\n if (prevSep.classList.contains(CLS_SEPARATOR)) {\n prevSep.style.display = 'none';\n }\n }\n eleSep.style.display = '';\n }\n else {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - (indx - sepPri)]);\n }\n }\n else {\n inEle.insertBefore(el, inEle.children[(indx + ignoreCount) - priEleCnt]);\n }\n };\n Toolbar.prototype.popupRefresh = function (popupEle, destroy) {\n var _this = this;\n var ele = this.element;\n var isVer = this.isVertical;\n var innerEle = ele.querySelector('.' + CLS_ITEMS);\n var popNav = ele.querySelector('.' + CLS_TBARNAV);\n if (isNOU(popNav)) {\n return;\n }\n innerEle.removeAttribute('style');\n popupEle.style.display = 'block';\n var dimension;\n if (isVer) {\n dimension = ele.offsetHeight - (popNav.offsetHeight + innerEle.offsetHeight);\n }\n else {\n dimension = ele.offsetWidth - (popNav.offsetWidth + innerEle.offsetWidth);\n }\n var popupEleWidth = 0;\n [].slice.call(popupEle.children).forEach(function (el) {\n popupEleWidth += _this.popupEleWidth(el);\n setStyle(el, { 'position': '' });\n });\n if ((dimension + (isVer ? popNav.offsetHeight : popNav.offsetWidth)) > (popupEleWidth) && this.popupPriCount === 0) {\n destroy = true;\n }\n this.popupEleRefresh(dimension, popupEle, destroy);\n popupEle.style.display = '';\n if (popupEle.children.length === 0 && popNav && this.popObj) {\n detach(popNav);\n popNav = null;\n this.popObj.destroy();\n detach(this.popObj.element);\n this.popObj = null;\n }\n };\n Toolbar.prototype.ignoreEleFetch = function (index, innerEle) {\n var ignoreEle = [].slice.call(innerEle.querySelectorAll('.' + CLS_TBARIGNORE));\n var ignoreInx = [];\n var count = 0;\n if (ignoreEle.length > 0) {\n ignoreEle.forEach(function (ele) {\n ignoreInx.push([].slice.call(innerEle.children).indexOf(ele));\n });\n }\n else {\n return 0;\n }\n ignoreInx.forEach(function (val) {\n if (val <= index) {\n count++;\n }\n });\n return count;\n };\n Toolbar.prototype.checkPopupRefresh = function (root, popEle) {\n popEle.style.display = 'block';\n var elWid = this.popupEleWidth(popEle.firstElementChild);\n popEle.firstElementChild.style.removeProperty('Position');\n var tbarWidth = root.offsetWidth - root.querySelector('.' + CLS_TBARNAV).offsetWidth;\n var tbarItemsWid = root.querySelector('.' + CLS_ITEMS).offsetWidth;\n popEle.style.removeProperty('display');\n if (tbarWidth > (elWid + tbarItemsWid)) {\n return true;\n }\n return false;\n };\n Toolbar.prototype.popupEleWidth = function (el) {\n el.style.position = 'absolute';\n var elWidth = this.isVertical ? el.offsetHeight : el.offsetWidth;\n var btnText = el.querySelector('.' + CLS_TBARBTNTEXT);\n if (el.classList.contains('e-tbtn-align') || el.classList.contains(CLS_TBARTEXT)) {\n var btn = el.children[0];\n if (!isNOU(btnText) && el.classList.contains(CLS_TBARTEXT)) {\n btnText.style.display = 'none';\n }\n else if (!isNOU(btnText) && el.classList.contains(CLS_POPUPTEXT)) {\n btnText.style.display = 'block';\n }\n btn.style.minWidth = '0%';\n elWidth = parseFloat(!this.isVertical ? el.style.minWidth : el.style.minHeight);\n btn.style.minWidth = '';\n btn.style.minHeight = '';\n if (!isNOU(btnText)) {\n btnText.style.display = '';\n }\n }\n return elWidth;\n };\n Toolbar.prototype.popupEleRefresh = function (width, popupEle, destroy) {\n var popPriority = this.popupPriCount > 0;\n var eleSplice = this.tbarEle;\n var priEleCnt;\n var index;\n var innerEle = this.element.querySelector('.' + CLS_ITEMS);\n var ignoreCount = 0;\n var _loop_1 = function (el) {\n if (el.classList.contains(CLS_POPPRI) && popPriority && !destroy) {\n return \"continue\";\n }\n var elWidth = this_1.popupEleWidth(el);\n if (el === this_1.tbarEle[0]) {\n elWidth += this_1.tbarEleMrgn;\n }\n el.style.position = '';\n if (elWidth < width || destroy) {\n var inlineStyles = { minWidth: el.style.minWidth, height: el.style.height, minHeight: el.style.minHeight };\n setStyle(el, { minWidth: '', height: '', minHeight: '' });\n if (!el.classList.contains(CLS_POPOVERFLOW)) {\n el.classList.remove(CLS_POPUP);\n }\n index = this_1.tbarEle.indexOf(el);\n if (this_1.tbarAlign) {\n var pos = this_1.items[parseInt(index.toString(), 10)].align;\n index = this_1.tbarAlgEle[(pos + 's').toLowerCase()].indexOf(el);\n eleSplice = this_1.tbarAlgEle[(pos + 's').toLowerCase()];\n innerEle = this_1.element.querySelector('.' + CLS_ITEMS + ' .' + 'e-toolbar-' + pos.toLowerCase());\n }\n var sepBeforePri_1 = 0;\n if (this_1.overflowMode !== 'Extended') {\n eleSplice.slice(0, index).forEach(function (el) {\n if (el.classList.contains(CLS_TBAROVERFLOW) || el.classList.contains(CLS_SEPARATOR)) {\n if (el.classList.contains(CLS_SEPARATOR)) {\n el.style.display = '';\n width -= el.offsetWidth;\n }\n sepBeforePri_1++;\n }\n });\n }\n ignoreCount = this_1.ignoreEleFetch(index, innerEle);\n if (el.classList.contains(CLS_TBAROVERFLOW)) {\n this_1.tbarPriRef(innerEle, index, sepBeforePri_1, el, destroy, elWidth, width, ignoreCount, inlineStyles);\n width -= el.offsetWidth;\n }\n else if (index === 0) {\n innerEle.insertBefore(el, innerEle.firstChild);\n width -= el.offsetWidth;\n }\n else {\n priEleCnt = selectAll('.' + CLS_TBAROVERFLOW, this_1.popObj.element).length;\n innerEle.insertBefore(el, innerEle.children[(index + ignoreCount) - priEleCnt]);\n width -= el.offsetWidth;\n }\n el.style.height = '';\n }\n else {\n return \"break\";\n }\n };\n var this_1 = this;\n for (var _i = 0, _a = [].slice.call(popupEle.children); _i < _a.length; _i++) {\n var el = _a[_i];\n var state_1 = _loop_1(el);\n if (state_1 === \"break\")\n break;\n }\n var checkOverflow = this.checkOverflow(this.element, this.element.getElementsByClassName(CLS_ITEMS)[0]);\n if (checkOverflow && !destroy) {\n this.renderOverflowMode();\n }\n };\n Toolbar.prototype.removePositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n if (isNOU(item) || !item.classList.contains(CLS_TBARPOS)) {\n return;\n }\n this.remove(item, CLS_TBARPOS);\n var innerItem = [].slice.call(item.childNodes);\n innerItem[1].removeAttribute('style');\n innerItem[2].removeAttribute('style');\n };\n Toolbar.prototype.refreshPositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n this.add(item, CLS_TBARPOS);\n this.itemPositioning();\n };\n Toolbar.prototype.itemPositioning = function () {\n var item = this.element.querySelector('.' + CLS_ITEMS);\n var margin;\n if (isNOU(item) || !item.classList.contains(CLS_TBARPOS)) {\n return;\n }\n var popupNav = this.element.querySelector('.' + CLS_TBARNAV);\n var innerItem;\n if (this.scrollModule) {\n var trgClass = (this.isVertical) ? CLS_VSCROLLCNT : CLS_HSCROLLCNT;\n innerItem = [].slice.call(item.querySelector('.' + trgClass).children);\n }\n else {\n innerItem = [].slice.call(item.childNodes);\n }\n if (this.isVertical) {\n margin = innerItem[0].offsetHeight + innerItem[2].offsetHeight;\n }\n else {\n margin = innerItem[0].offsetWidth + innerItem[2].offsetWidth;\n }\n var tbarWid = this.isVertical ? this.element.offsetHeight : this.element.offsetWidth;\n if (popupNav) {\n tbarWid -= (this.isVertical ? popupNav.offsetHeight : popupNav.offsetWidth);\n var popWid = (this.isVertical ? popupNav.offsetHeight : popupNav.offsetWidth) + 'px';\n innerItem[2].removeAttribute('style');\n if (this.isVertical) {\n if (this.enableRtl) {\n innerItem[2].style.top = popWid;\n }\n else {\n innerItem[2].style.bottom = popWid;\n }\n }\n else {\n if (this.enableRtl) {\n innerItem[2].style.left = popWid;\n }\n else {\n innerItem[2].style.right = popWid;\n }\n }\n }\n if (tbarWid <= margin) {\n return;\n }\n var value = (((tbarWid - margin)) - (!this.isVertical ? innerItem[1].offsetWidth : innerItem[1].offsetHeight)) / 2;\n innerItem[1].removeAttribute('style');\n var mrgn = ((!this.isVertical ? innerItem[0].offsetWidth : innerItem[0].offsetHeight) + value) + 'px';\n if (this.isVertical) {\n if (this.enableRtl) {\n innerItem[1].style.marginBottom = mrgn;\n }\n else {\n innerItem[1].style.marginTop = mrgn;\n }\n }\n else {\n if (this.enableRtl) {\n innerItem[1].style.marginRight = mrgn;\n }\n else {\n innerItem[1].style.marginLeft = mrgn;\n }\n }\n };\n Toolbar.prototype.tbarItemAlign = function (item, itemEle, pos) {\n var _this = this;\n if (item.showAlwaysInPopup && item.overflow !== 'Show') {\n return;\n }\n var alignDiv = [];\n alignDiv.push(this.createElement('div', { className: CLS_TBARLEFT }));\n alignDiv.push(this.createElement('div', { className: CLS_TBARCENTER }));\n alignDiv.push(this.createElement('div', { className: CLS_TBARRIGHT }));\n if (pos === 0 && item.align !== 'Left') {\n alignDiv.forEach(function (ele) {\n itemEle.appendChild(ele);\n });\n this.tbarAlign = true;\n this.add(itemEle, CLS_TBARPOS);\n }\n else if (item.align !== 'Left') {\n var alignEle = itemEle.childNodes;\n var leftAlign_1 = alignDiv[0];\n [].slice.call(alignEle).forEach(function (el) {\n _this.tbarAlgEle.lefts.push(el);\n leftAlign_1.appendChild(el);\n });\n itemEle.appendChild(leftAlign_1);\n itemEle.appendChild(alignDiv[1]);\n itemEle.appendChild(alignDiv[2]);\n this.tbarAlign = true;\n this.add(itemEle, CLS_TBARPOS);\n }\n };\n Toolbar.prototype.ctrlTemplate = function () {\n var _this = this;\n this.ctrlTem = this.trgtEle.cloneNode(true);\n this.add(this.trgtEle, CLS_ITEMS);\n this.tbarEle = [];\n var innerEle = [].slice.call(this.trgtEle.children);\n innerEle.forEach(function (ele) {\n if (ele.tagName === 'DIV') {\n _this.tbarEle.push(ele);\n if (!isNOU(ele.firstElementChild)) {\n ele.firstElementChild.setAttribute('aria-disabled', 'false');\n }\n _this.add(ele, CLS_ITEM);\n }\n });\n };\n Toolbar.prototype.renderItems = function () {\n var ele = this.element;\n var items = this.items;\n if (this.trgtEle != null) {\n this.ctrlTemplate();\n }\n else if (ele && items.length > 0) {\n var itemEleDom = void 0;\n if (ele && ele.children.length > 0) {\n itemEleDom = ele.querySelector('.' + CLS_ITEMS);\n }\n if (!itemEleDom) {\n itemEleDom = this.createElement('div', { className: CLS_ITEMS });\n }\n this.itemsAlign(items, itemEleDom);\n ele.appendChild(itemEleDom);\n }\n };\n Toolbar.prototype.setAttr = function (attr, element) {\n var key = Object.keys(attr);\n var keyVal;\n for (var i = 0; i < key.length; i++) {\n keyVal = key[parseInt(i.toString(), 10)];\n if (keyVal === 'class') {\n this.add(element, attr[\"\" + keyVal]);\n }\n else {\n element.setAttribute(keyVal, attr[\"\" + keyVal]);\n }\n }\n };\n /**\n * Enables or disables the specified Toolbar item.\n *\n * @param {number|HTMLElement|NodeList} items - DOM element or an array of items to be enabled or disabled.\n * @param {boolean} isEnable - Boolean value that determines whether the command should be enabled or disabled.\n * By default, `isEnable` is set to true.\n * @returns {void}.\n */\n Toolbar.prototype.enableItems = function (items, isEnable) {\n var elements = items;\n var len = elements.length;\n var ele;\n if (isNOU(isEnable)) {\n isEnable = true;\n }\n var enable = function (isEnable, ele) {\n if (isEnable) {\n ele.classList.remove(CLS_DISABLE);\n if (!isNOU(ele.firstElementChild)) {\n ele.firstElementChild.setAttribute('aria-disabled', 'false');\n }\n }\n else {\n ele.classList.add(CLS_DISABLE);\n if (!isNOU(ele.firstElementChild)) {\n ele.firstElementChild.setAttribute('aria-disabled', 'true');\n }\n }\n };\n if (!isNOU(len) && len >= 1) {\n for (var a = 0, element = [].slice.call(elements); a < len; a++) {\n var itemElement = element[parseInt(a.toString(), 10)];\n if (typeof (itemElement) === 'number') {\n ele = this.getElementByIndex(itemElement);\n if (isNOU(ele)) {\n return;\n }\n else {\n elements[parseInt(a.toString(), 10)] = ele;\n }\n }\n else {\n ele = itemElement;\n }\n enable(isEnable, ele);\n }\n if (isEnable) {\n removeClass(elements, CLS_DISABLE);\n }\n else {\n addClass(elements, CLS_DISABLE);\n }\n }\n else {\n if (typeof (elements) === 'number') {\n ele = this.getElementByIndex(elements);\n if (isNOU(ele)) {\n return;\n }\n }\n else {\n ele = items;\n }\n enable(isEnable, ele);\n }\n };\n Toolbar.prototype.getElementByIndex = function (index) {\n if (this.tbarEle[parseInt(index.toString(), 10)]) {\n return this.tbarEle[parseInt(index.toString(), 10)];\n }\n return null;\n };\n /**\n * Adds new items to the Toolbar that accepts an array as Toolbar items.\n *\n * @param {ItemModel[]} items - DOM element or an array of items to be added to the Toolbar.\n * @param {number} index - Number value that determines where the command is to be added. By default, index is 0.\n * @returns {void}.\n */\n Toolbar.prototype.addItems = function (items, index) {\n var innerItems;\n this.extendedOpen();\n var itemsDiv = this.element.querySelector('.' + CLS_ITEMS);\n if (isNOU(itemsDiv)) {\n this.itemsRerender(items);\n return;\n }\n var innerEle;\n var itemAgn = 'Left';\n if (isNOU(index)) {\n index = 0;\n }\n items.forEach(function (e) {\n if (!isNOU(e.align) && e.align !== 'Left' && itemAgn === 'Left') {\n itemAgn = e.align;\n }\n });\n for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {\n var item = items_1[_i];\n if (isNOU(item.type)) {\n item.type = 'Button';\n }\n innerItems = selectAll('.' + CLS_ITEM, this.element);\n item.align = itemAgn;\n innerEle = this.renderSubComponent(item, index);\n if (this.tbarEle.length >= index && innerItems.length >= 0) {\n if (isNOU(this.scrollModule)) {\n this.destroyMode();\n }\n var algIndex = item.align[0] === 'L' ? 0 : item.align[0] === 'C' ? 1 : 2;\n var ele = void 0;\n if (!this.tbarAlign && itemAgn !== 'Left') {\n this.tbarItemAlign(item, itemsDiv, 1);\n this.tbarAlign = true;\n ele = closest(innerItems[0], '.' + CLS_ITEMS).children[parseInt(algIndex.toString(), 10)];\n ele.appendChild(innerEle);\n this.tbarAlgEle[(item.align + 's').toLowerCase()].push(innerEle);\n this.refreshPositioning();\n }\n else if (this.tbarAlign) {\n ele = closest(innerItems[0], '.' + CLS_ITEMS).children[parseInt(algIndex.toString(), 10)];\n ele.insertBefore(innerEle, ele.children[parseInt(index.toString(), 10)]);\n this.tbarAlgEle[(item.align + 's').toLowerCase()].splice(index, 0, innerEle);\n this.refreshPositioning();\n }\n else if (innerItems.length === 0) {\n innerItems = selectAll('.' + CLS_ITEMS, this.element);\n innerItems[0].appendChild(innerEle);\n }\n else {\n innerItems[0].parentNode.insertBefore(innerEle, innerItems[parseInt(index.toString(), 10)]);\n }\n this.items.splice(index, 0, item);\n if (item.template) {\n this.tbarEle.splice(this.tbarEle.length - 1, 1);\n }\n this.tbarEle.splice(index, 0, innerEle);\n index++;\n this.offsetWid = itemsDiv.offsetWidth;\n }\n }\n itemsDiv.style.width = '';\n this.renderOverflowMode();\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n /**\n * Removes the items from the Toolbar. Acceptable arguments are index of item/HTMLElement/node list.\n *\n * @param {number|HTMLElement|NodeList|HTMLElement[]} args\n * Index or DOM element or an Array of item which is to be removed from the Toolbar.\n * @returns {void}.\n */\n Toolbar.prototype.removeItems = function (args) {\n var elements = args;\n var index;\n var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (typeof (elements) === 'number') {\n index = parseInt(args.toString(), 10);\n this.removeItemByIndex(index, innerItems);\n }\n else {\n if (elements && elements.length > 1) {\n for (var _i = 0, _a = [].slice.call(elements); _i < _a.length; _i++) {\n var ele = _a[_i];\n index = this.tbarEle.indexOf(ele);\n this.removeItemByIndex(index, innerItems);\n innerItems = selectAll('.' + CLS_ITEM, this.element);\n }\n }\n else {\n var ele = (elements && elements.length && elements.length === 1) ? elements[0] : args;\n index = innerItems.indexOf(ele);\n this.removeItemByIndex(index, innerItems);\n }\n }\n this.resize();\n };\n Toolbar.prototype.removeItemByIndex = function (index, innerItems) {\n if (this.tbarEle[parseInt(index.toString(), 10)] && innerItems[parseInt(index.toString(), 10)]) {\n var eleIdx = this.tbarEle.indexOf(innerItems[parseInt(index.toString(), 10)]);\n if (this.tbarAlign) {\n var indexAgn = this.tbarAlgEle[(this.items[parseInt(eleIdx.toString(), 10)].align + 's').toLowerCase()].indexOf(this.tbarEle[parseInt(eleIdx.toString(), 10)]);\n this.tbarAlgEle[(this.items[parseInt(eleIdx.toString(), 10)].align + 's').toLowerCase()].splice(parseInt(indexAgn.toString(), 10), 1);\n }\n if (this.isReact) {\n this.clearToolbarTemplate(innerItems[parseInt(index.toString(), 10)]);\n }\n var btnItem = innerItems[parseInt(index.toString(), 10)].querySelector('.e-control.e-btn');\n if (!isNOU(btnItem) && !isNOU(btnItem.ej2_instances[0]) && !(btnItem.ej2_instances[0].isDestroyed)) {\n btnItem.ej2_instances[0].destroy();\n }\n detach(innerItems[parseInt(index.toString(), 10)]);\n this.items.splice(eleIdx, 1);\n this.tbarEle.splice(eleIdx, 1);\n }\n };\n Toolbar.prototype.templateRender = function (templateProp, innerEle, item, index) {\n var itemType = item.type;\n var eleObj = templateProp;\n var isComponent;\n if (typeof (templateProp) === 'object') {\n isComponent = typeof (eleObj.appendTo) === 'function';\n }\n if (typeof (templateProp) === 'string' || !isComponent) {\n var templateFn = void 0;\n var val = templateProp;\n var regEx = new RegExp(/<(?=.*? .*?\\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\\/\\1>/i);\n val = (typeof (templateProp) === 'string') ? templateProp.trim() : templateProp;\n try {\n if (typeof (templateProp) === 'object' && !isNOU(templateProp.tagName)) {\n innerEle.appendChild(templateProp);\n }\n else if (typeof (templateProp) === 'string' && regEx.test(val)) {\n innerEle.innerHTML = val;\n }\n else if (document.querySelectorAll(val).length) {\n var ele = document.querySelector(val);\n var tempStr = ele.outerHTML.trim();\n innerEle.appendChild(ele);\n ele.style.display = '';\n if (!isNOU(tempStr)) {\n this.tempId.push(val);\n }\n }\n else {\n templateFn = templateCompiler(val);\n }\n }\n catch (e) {\n templateFn = templateCompiler(val);\n }\n var tempArray = void 0;\n if (!isNOU(templateFn)) {\n var toolbarTemplateID = this.element.id + index + '_template';\n tempArray = templateFn({}, this, 'template', toolbarTemplateID, this.isStringTemplate, undefined, undefined, this.root);\n }\n if (!isNOU(tempArray) && tempArray.length > 0) {\n [].slice.call(tempArray).forEach(function (ele) {\n if (!isNOU(ele.tagName)) {\n ele.style.display = '';\n }\n innerEle.appendChild(ele);\n });\n }\n }\n else if (itemType === 'Input') {\n var ele = this.createElement('input');\n if (item.id) {\n ele.id = item.id;\n }\n else {\n ele.id = getUniqueID('tbr-ipt');\n }\n innerEle.appendChild(ele);\n eleObj.appendTo(ele);\n }\n this.add(innerEle, CLS_TEMPLATE);\n var firstChild = innerEle.firstElementChild;\n if (!isNOU(firstChild)) {\n firstChild.setAttribute('tabindex', isNOU(firstChild.getAttribute(\"tabIndex\")) ? '-1' : this.getDataTabindex(firstChild));\n firstChild.setAttribute('data-tabindex', isNOU(firstChild.getAttribute(\"tabIndex\")) ? '-1' : this.getDataTabindex(firstChild));\n }\n this.tbarEle.push(innerEle);\n };\n Toolbar.prototype.buttonRendering = function (item, innerEle) {\n var dom = this.createElement('button', { className: CLS_TBARBTN });\n dom.setAttribute('type', 'button');\n var textStr = item.text;\n var iconCss;\n var iconPos;\n if (item.id) {\n dom.id = item.id;\n }\n else {\n dom.id = getUniqueID('e-tbr-btn');\n }\n var btnTxt = this.createElement('span', { className: 'e-tbar-btn-text' });\n if (textStr) {\n btnTxt.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(textStr) : textStr;\n dom.appendChild(btnTxt);\n dom.classList.add('e-tbtn-txt');\n }\n else {\n this.add(innerEle, 'e-tbtn-align');\n }\n if (item.prefixIcon || item.suffixIcon) {\n if ((item.prefixIcon && item.suffixIcon) || item.prefixIcon) {\n iconCss = item.prefixIcon + ' e-icons';\n iconPos = 'Left';\n }\n else {\n iconCss = item.suffixIcon + ' e-icons';\n iconPos = 'Right';\n }\n }\n var btnObj = new Button({ iconCss: iconCss, iconPosition: iconPos });\n btnObj.createElement = this.createElement;\n btnObj.appendTo(dom);\n if (item.width) {\n setStyle(dom, { 'width': formatUnit(item.width) });\n }\n return dom;\n };\n Toolbar.prototype.renderSubComponent = function (item, index) {\n var dom;\n var innerEle = this.createElement('div', { className: CLS_ITEM });\n var tempDom = this.createElement('div', {\n innerHTML: this.enableHtmlSanitizer && !isNOU(item.tooltipText) ?\n SanitizeHtmlHelper.sanitize(item.tooltipText) : item.tooltipText\n });\n if (!this.tbarEle) {\n this.tbarEle = [];\n }\n if (item.htmlAttributes) {\n this.setAttr(item.htmlAttributes, innerEle);\n }\n if (item.tooltipText) {\n innerEle.setAttribute('title', tempDom.textContent);\n }\n if (item.cssClass) {\n innerEle.className = innerEle.className + ' ' + item.cssClass;\n }\n if (item.template) {\n this.templateRender(item.template, innerEle, item, index);\n }\n else {\n switch (item.type) {\n case 'Button':\n dom = this.buttonRendering(item, innerEle);\n dom.setAttribute('tabindex', isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString());\n dom.setAttribute('data-tabindex', isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString());\n dom.setAttribute('aria-label', (item.text || item.tooltipText));\n dom.setAttribute('aria-disabled', 'false');\n innerEle.appendChild(dom);\n innerEle.addEventListener('click', this.itemClick.bind(this));\n break;\n case 'Separator':\n this.add(innerEle, CLS_SEPARATOR);\n break;\n }\n }\n if (item.showTextOn) {\n var sTxt = item.showTextOn;\n if (sTxt === 'Toolbar') {\n this.add(innerEle, CLS_POPUPTEXT);\n this.add(innerEle, 'e-tbtn-align');\n }\n else if (sTxt === 'Overflow') {\n this.add(innerEle, CLS_TBARTEXT);\n }\n }\n if (item.overflow) {\n var overflow = item.overflow;\n if (overflow === 'Show') {\n this.add(innerEle, CLS_TBAROVERFLOW);\n }\n else if (overflow === 'Hide') {\n if (!innerEle.classList.contains(CLS_SEPARATOR)) {\n this.add(innerEle, CLS_POPOVERFLOW);\n }\n }\n }\n if (item.overflow !== 'Show' && item.showAlwaysInPopup && !innerEle.classList.contains(CLS_SEPARATOR)) {\n this.add(innerEle, CLS_POPPRI);\n this.popupPriCount++;\n }\n if (item.disabled) {\n this.add(innerEle, CLS_DISABLE);\n }\n if (item.visible === false) {\n this.add(innerEle, CLS_HIDDEN);\n }\n return innerEle;\n };\n Toolbar.prototype.getDataTabindex = function (ele) {\n return isNOU(ele.getAttribute('data-tabindex')) ? '-1' : ele.getAttribute('data-tabindex');\n };\n Toolbar.prototype.itemClick = function (e) {\n this.activeEleSwitch(e.currentTarget);\n };\n Toolbar.prototype.activeEleSwitch = function (ele) {\n this.activeEleRemove(ele.firstElementChild);\n this.activeEle.focus();\n };\n Toolbar.prototype.activeEleRemove = function (curEle) {\n if (!isNOU(this.activeEle)) {\n this.activeEle.setAttribute('tabindex', this.getDataTabindex(this.activeEle));\n }\n this.activeEle = curEle;\n if (this.getDataTabindex(this.activeEle) === '-1') {\n if (isNOU(this.trgtEle) && !curEle.parentElement.classList.contains(CLS_TEMPLATE)) {\n this.updateTabIndex('-1');\n curEle.removeAttribute('tabindex');\n }\n else {\n var tabIndex = parseInt(this.getDataTabindex(this.activeEle)) + 1;\n this.activeEle.setAttribute('tabindex', tabIndex.toString());\n }\n }\n };\n Toolbar.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Returns the current module name.\n *\n * @returns {string} - Returns the module name as string.\n * @private\n */\n Toolbar.prototype.getModuleName = function () {\n return 'toolbar';\n };\n Toolbar.prototype.itemsRerender = function (newProp) {\n this.items = this.tbarItemsCol;\n if (this.isReact || this.isAngular) {\n this.clearTemplate();\n }\n this.destroyMode();\n this.destroyItems();\n this.items = newProp;\n this.tbarItemsCol = this.items;\n this.renderItems();\n this.renderOverflowMode();\n if (this.isReact) {\n this.renderReactTemplates();\n }\n };\n Toolbar.prototype.resize = function () {\n var ele = this.element;\n this.tbResize = true;\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n if (this.popObj && this.overflowMode === 'Popup') {\n this.popObj.hide();\n }\n var checkOverflow = this.checkOverflow(ele, ele.getElementsByClassName(CLS_ITEMS)[0]);\n if (!checkOverflow) {\n this.destroyScroll();\n var multirowele = ele.querySelector('.' + CLS_ITEMS);\n if (!isNOU(multirowele)) {\n this.remove(multirowele, CLS_MULTIROWPOS);\n if (this.tbarAlign) {\n this.add(multirowele, CLS_TBARPOS);\n }\n }\n }\n if (checkOverflow && this.scrollModule && (this.offsetWid === ele.offsetWidth)) {\n return;\n }\n if (this.offsetWid > ele.offsetWidth || checkOverflow) {\n this.renderOverflowMode();\n }\n if (this.popObj) {\n if (this.overflowMode === 'Extended') {\n var eleStyles = window.getComputedStyle(this.element);\n this.popObj.width = parseFloat(eleStyles.width) + ((parseFloat(eleStyles.borderRightWidth)) * 2);\n }\n if (this.tbarAlign) {\n this.removePositioning();\n }\n this.popupRefresh(this.popObj.element, false);\n if (this.tbarAlign) {\n this.refreshPositioning();\n }\n }\n if (this.element.querySelector('.' + CLS_HSCROLLBAR)) {\n this.scrollStep = this.element.querySelector('.' + CLS_HSCROLLBAR).offsetWidth;\n }\n this.offsetWid = ele.offsetWidth;\n this.tbResize = false;\n this.separator();\n };\n Toolbar.prototype.orientationChange = function () {\n var _this = this;\n setTimeout(function () {\n _this.resize();\n }, 500);\n };\n Toolbar.prototype.extendedOpen = function () {\n var sib = this.element.querySelector('.' + CLS_EXTENDABLECLASS);\n if (this.overflowMode === 'Extended' && sib) {\n this.isExtendedOpen = sib.classList.contains(CLS_POPUPOPEN);\n }\n };\n Toolbar.prototype.updateHideEleTabIndex = function (ele, isHidden, isElement, eleIndex, innerItems) {\n if (isElement) {\n eleIndex = innerItems.indexOf(ele);\n }\n var nextEle = innerItems[++eleIndex];\n while (nextEle) {\n var skipEle = this.eleContains(nextEle);\n if (!skipEle) {\n var dataTabIndex = nextEle.firstElementChild.getAttribute('data-tabindex');\n if (isHidden && dataTabIndex === '-1') {\n nextEle.firstElementChild.setAttribute('tabindex', '0');\n }\n else if (dataTabIndex !== nextEle.firstElementChild.getAttribute('tabindex')) {\n nextEle.firstElementChild.setAttribute('tabindex', dataTabIndex);\n }\n break;\n }\n nextEle = innerItems[++eleIndex];\n }\n };\n Toolbar.prototype.clearToolbarTemplate = function (templateEle) {\n if (this.registeredTemplate && this.registeredTemplate[\"\" + 'template']) {\n var registeredTemplates = this.registeredTemplate;\n for (var index = 0; index < registeredTemplates[\"\" + 'template'].length; index++) {\n var registeredItem = registeredTemplates[\"\" + 'template'][parseInt(index.toString(), 10)].rootNodes[0];\n var closestItem = closest(registeredItem, '.' + CLS_ITEM);\n if (!isNOU(closestItem) && closestItem === templateEle) {\n this.clearTemplate(['template'], [registeredTemplates[\"\" + 'template'][parseInt(index.toString(), 10)]]);\n break;\n }\n }\n }\n else if (this.portals && this.portals.length > 0) {\n var portals = this.portals;\n for (var index = 0; index < portals.length; index++) {\n var portalItem = portals[parseInt(index.toString(), 10)];\n var closestItem = closest(portalItem.containerInfo, '.' + CLS_ITEM);\n if (!isNOU(closestItem) && closestItem === templateEle) {\n this.clearTemplate(['template'], index);\n break;\n }\n }\n }\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of the property that changed.\n *\n * @param {ToolbarModel} newProp - It contains new value of the data.\n * @param {ToolbarModel} oldProp - It contains old value of the data.\n * @returns {void}\n * @private\n */\n Toolbar.prototype.onPropertyChanged = function (newProp, oldProp) {\n var tEle = this.element;\n var wid = tEle.offsetWidth;\n this.extendedOpen();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'items':\n if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {\n var changedProb = Object.keys(newProp.items);\n for (var i = 0; i < changedProb.length; i++) {\n var index = parseInt(Object.keys(newProp.items)[parseInt(i.toString(), 10)], 10);\n var property = Object.keys(newProp.items[parseInt(index.toString(), 10)])[0];\n var newProperty = Object(newProp.items[parseInt(index.toString(), 10)])[\"\" + property];\n if (this.tbarAlign || property === 'align') {\n this.refresh();\n this.trigger('created');\n break;\n }\n var popupPriCheck = property === 'showAlwaysInPopup' && !newProperty;\n var booleanCheck = property === 'overflow' && this.popupPriCount !== 0;\n if ((popupPriCheck) || (this.items[parseInt(index.toString(), 10)].showAlwaysInPopup) && booleanCheck) {\n --this.popupPriCount;\n }\n if (isNOU(this.scrollModule)) {\n this.destroyMode();\n }\n var itemCol = [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, tEle));\n if (this.isReact && this.items[parseInt(index.toString(), 10)].template) {\n this.clearToolbarTemplate(itemCol[parseInt(index.toString(), 10)]);\n }\n detach(itemCol[parseInt(index.toString(), 10)]);\n this.tbarEle.splice(index, 1);\n this.addItems([this.items[parseInt(index.toString(), 10)]], index);\n this.items.splice(index, 1);\n if (this.items[parseInt(index.toString(), 10)].template) {\n this.tbarEle.splice(this.items.length, 1);\n }\n }\n }\n else {\n this.itemsRerender(newProp.items);\n }\n break;\n case 'width':\n setStyle(tEle, { 'width': formatUnit(newProp.width) });\n this.refreshOverflow();\n break;\n case 'height':\n setStyle(this.element, { 'height': formatUnit(newProp.height) });\n break;\n case 'overflowMode':\n this.destroyMode();\n this.renderOverflowMode();\n if (this.enableRtl) {\n this.add(tEle, CLS_RTL);\n }\n this.refreshOverflow();\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n this.add(tEle, CLS_RTL);\n }\n else {\n this.remove(tEle, CLS_RTL);\n }\n if (!isNOU(this.scrollModule)) {\n if (newProp.enableRtl) {\n this.add(this.scrollModule.element, CLS_RTL);\n }\n else {\n this.remove(this.scrollModule.element, CLS_RTL);\n }\n }\n if (!isNOU(this.popObj)) {\n if (newProp.enableRtl) {\n this.add(this.popObj.element, CLS_RTL);\n }\n else {\n this.remove(this.popObj.element, CLS_RTL);\n }\n }\n if (this.tbarAlign) {\n this.itemPositioning();\n }\n break;\n case 'scrollStep':\n if (this.scrollModule) {\n this.scrollModule.scrollStep = this.scrollStep;\n }\n break;\n case 'enableCollision':\n if (this.popObj) {\n this.popObj.collision = { Y: this.enableCollision ? 'flip' : 'none' };\n }\n break;\n case 'cssClass':\n if (oldProp.cssClass) {\n removeClass([this.element], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.element], newProp.cssClass.split(' '));\n }\n break;\n case 'allowKeyboard':\n this.unwireKeyboardEvent();\n if (newProp.allowKeyboard) {\n this.wireKeyboardEvent();\n }\n break;\n }\n }\n };\n /**\n * Shows or hides the Toolbar item that is in the specified index.\n *\n * @param {number | HTMLElement} index - Index value of target item or DOM element of items to be hidden or shown.\n * @param {boolean} value - Based on this Boolean value, item will be hide (true) or show (false). By default, value is false.\n * @returns {void}.\n */\n Toolbar.prototype.hideItem = function (index, value) {\n var isElement = (typeof (index) === 'object') ? true : false;\n var eleIndex = index;\n var ele;\n if (!isElement && isNOU(eleIndex)) {\n return;\n }\n var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n if (isElement) {\n ele = index;\n }\n else if (this.tbarEle[parseInt(eleIndex.toString(), 10)]) {\n var innerItems_1 = [].slice.call(selectAll('.' + CLS_ITEM, this.element));\n ele = innerItems_1[parseInt(eleIndex.toString(), 10)];\n }\n if (ele) {\n if (value) {\n ele.classList.add(CLS_HIDDEN);\n if (!ele.classList.contains(CLS_SEPARATOR)) {\n if (isNOU(ele.firstElementChild.getAttribute('tabindex')) ||\n ele.firstElementChild.getAttribute('tabindex') !== '-1') {\n this.updateHideEleTabIndex(ele, value, isElement, eleIndex, innerItems);\n }\n }\n }\n else {\n ele.classList.remove(CLS_HIDDEN);\n if (!ele.classList.contains(CLS_SEPARATOR)) {\n this.updateHideEleTabIndex(ele, value, isElement, eleIndex, innerItems);\n }\n }\n this.refreshOverflow();\n }\n };\n __decorate([\n Collection([], Item)\n ], Toolbar.prototype, \"items\", void 0);\n __decorate([\n Property('auto')\n ], Toolbar.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Toolbar.prototype, \"height\", void 0);\n __decorate([\n Property('')\n ], Toolbar.prototype, \"cssClass\", void 0);\n __decorate([\n Property('Scrollable')\n ], Toolbar.prototype, \"overflowMode\", void 0);\n __decorate([\n Property()\n ], Toolbar.prototype, \"scrollStep\", void 0);\n __decorate([\n Property(true)\n ], Toolbar.prototype, \"enableCollision\", void 0);\n __decorate([\n Property(true)\n ], Toolbar.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Property(true)\n ], Toolbar.prototype, \"allowKeyboard\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"clicked\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], Toolbar.prototype, \"beforeCreate\", void 0);\n Toolbar = __decorate([\n NotifyPropertyChanges\n ], Toolbar);\n return Toolbar;\n}(Component));\nexport { Toolbar };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Touch, Component, EventHandler, selectAll, getUniqueID } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, Property, Browser, detach } from '@syncfusion/ej2-base';\nimport { classList, isNullOrUndefined } from '@syncfusion/ej2-base';\nvar CLS_ROOT = 'e-hscroll';\nvar CLS_RTL = 'e-rtl';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_HSCROLLBAR = 'e-hscroll-bar';\nvar CLS_HSCROLLCON = 'e-hscroll-content';\nvar CLS_NAVARROW = 'e-nav-arrow';\nvar CLS_NAVRIGHTARROW = 'e-nav-right-arrow';\nvar CLS_NAVLEFTARROW = 'e-nav-left-arrow';\nvar CLS_HSCROLLNAV = 'e-scroll-nav';\nvar CLS_HSCROLLNAVRIGHT = 'e-scroll-right-nav';\nvar CLS_HSCROLLNAVLEFT = 'e-scroll-left-nav';\nvar CLS_DEVICE = 'e-scroll-device';\nvar CLS_OVERLAY = 'e-scroll-overlay';\nvar CLS_RIGHTOVERLAY = 'e-scroll-right-overlay';\nvar CLS_LEFTOVERLAY = 'e-scroll-left-overlay';\nvar OVERLAY_MAXWID = 40;\n/**\n * HScroll module is introduces horizontal scroller when content exceeds the current viewing area.\n * It can be useful for the components like Toolbar, Tab which needs horizontal scrolling alone.\n * Hidden content can be view by touch moving or icon click.\n * ```html\n *
\n * \n * ```\n */\nvar HScroll = /** @class */ (function (_super) {\n __extends(HScroll, _super);\n /**\n * Initializes a new instance of the HScroll class.\n *\n * @param {HScrollModel} options - Specifies HScroll model properties as options.\n * @param {string | HTMLElement} element - Specifies the element for which horizontal scrolling applies.\n */\n function HScroll(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\n */\n HScroll.prototype.preRender = function () {\n this.browser = Browser.info.name;\n this.browserCheck = this.browser === 'mozilla';\n this.isDevice = Browser.isDevice;\n this.customStep = true;\n var element = this.element;\n this.ieCheck = this.browser === 'edge' || this.browser === 'msie';\n this.initialize();\n if (element.id === '') {\n element.id = getUniqueID('hscroll');\n this.uniqueId = true;\n }\n element.style.display = 'block';\n if (this.enableRtl) {\n element.classList.add(CLS_RTL);\n }\n };\n /**\n * To Initialize the horizontal scroll rendering\n *\n * @private\n * @returns {void}\n */\n HScroll.prototype.render = function () {\n this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this), swipe: this.swipeHandler.bind(this) });\n EventHandler.add(this.scrollEle, 'scroll', this.scrollHandler, this);\n if (!this.isDevice) {\n this.createNavIcon(this.element);\n }\n else {\n this.element.classList.add(CLS_DEVICE);\n this.createOverlay(this.element);\n }\n this.setScrollState();\n };\n HScroll.prototype.setScrollState = function () {\n if (isNullOrUndefined(this.scrollStep) || this.scrollStep < 0) {\n this.scrollStep = this.scrollEle.offsetWidth;\n this.customStep = false;\n }\n else {\n this.customStep = true;\n }\n };\n HScroll.prototype.initialize = function () {\n var scrollEle = this.createElement('div', { className: CLS_HSCROLLCON });\n var scrollDiv = this.createElement('div', { className: CLS_HSCROLLBAR });\n scrollDiv.setAttribute('tabindex', '-1');\n var ele = this.element;\n var innerEle = [].slice.call(ele.children);\n for (var _i = 0, innerEle_1 = innerEle; _i < innerEle_1.length; _i++) {\n var ele_1 = innerEle_1[_i];\n scrollEle.appendChild(ele_1);\n }\n scrollDiv.appendChild(scrollEle);\n ele.appendChild(scrollDiv);\n scrollDiv.style.overflowX = 'hidden';\n this.scrollEle = scrollDiv;\n this.scrollItems = scrollEle;\n };\n HScroll.prototype.getPersistData = function () {\n var keyEntity = ['scrollStep'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Returns the current module name.\n *\n * @returns {string} - It returns the current module name.\n * @private\n */\n HScroll.prototype.getModuleName = function () {\n return 'hScroll';\n };\n /**\n * Removes the control from the DOM and also removes all its related events.\n *\n * @returns {void}\n */\n HScroll.prototype.destroy = function () {\n var ele = this.element;\n ele.style.display = '';\n ele.classList.remove(CLS_ROOT);\n ele.classList.remove(CLS_DEVICE);\n ele.classList.remove(CLS_RTL);\n var nav = selectAll('.e-' + ele.id + '_nav.' + CLS_HSCROLLNAV, ele);\n var overlay = selectAll('.' + CLS_OVERLAY, ele);\n [].slice.call(overlay).forEach(function (ele) {\n detach(ele);\n });\n for (var _i = 0, _a = [].slice.call(this.scrollItems.children); _i < _a.length; _i++) {\n var elem = _a[_i];\n ele.appendChild(elem);\n }\n if (this.uniqueId) {\n this.element.removeAttribute('id');\n }\n detach(this.scrollEle);\n if (nav.length > 0) {\n detach(nav[0]);\n if (!isNullOrUndefined(nav[1])) {\n detach(nav[1]);\n }\n }\n EventHandler.remove(this.scrollEle, 'scroll', this.scrollHandler);\n this.touchModule.destroy();\n this.touchModule = null;\n _super.prototype.destroy.call(this);\n };\n /**\n * Specifies the value to disable/enable the HScroll component.\n * When set to `true` , the component will be disabled.\n *\n * @param {boolean} value - Based on this Boolean value, HScroll will be enabled (false) or disabled (true).\n * @returns {void}.\n */\n HScroll.prototype.disable = function (value) {\n var navEles = selectAll('.e-scroll-nav:not(.' + CLS_DISABLE + ')', this.element);\n if (value) {\n this.element.classList.add(CLS_DISABLE);\n }\n else {\n this.element.classList.remove(CLS_DISABLE);\n }\n [].slice.call(navEles).forEach(function (el) {\n el.setAttribute('tabindex', !value ? '0' : '-1');\n });\n };\n HScroll.prototype.createOverlay = function (element) {\n var id = element.id.concat('_nav');\n var rightOverlayEle = this.createElement('div', { className: CLS_OVERLAY + ' ' + CLS_RIGHTOVERLAY });\n var clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);\n var rightEle = this.createElement('div', { id: id.concat('_right'), className: clsRight });\n var navItem = this.createElement('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n rightEle.appendChild(navItem);\n var leftEle = this.createElement('div', { className: CLS_OVERLAY + ' ' + CLS_LEFTOVERLAY });\n if (this.ieCheck) {\n rightEle.classList.add('e-ie-align');\n }\n element.appendChild(rightOverlayEle);\n element.appendChild(rightEle);\n element.insertBefore(leftEle, element.firstChild);\n this.eventBinding([rightEle]);\n };\n HScroll.prototype.createNavIcon = function (element) {\n var id = element.id.concat('_nav');\n var clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);\n var rightAttributes = { 'role': 'button', 'id': id.concat('_right'), 'aria-label': 'Scroll right' };\n var nav = this.createElement('div', { className: clsRight, attrs: rightAttributes });\n nav.setAttribute('aria-disabled', 'false');\n var navItem = this.createElement('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n var clsLeft = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVLEFT);\n var leftAttributes = { 'role': 'button', 'id': id.concat('_left'), 'aria-label': 'Scroll left' };\n var navEle = this.createElement('div', { className: clsLeft + ' ' + CLS_DISABLE, attrs: leftAttributes });\n navEle.setAttribute('aria-disabled', 'true');\n var navLeftItem = this.createElement('div', { className: CLS_NAVLEFTARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n navEle.appendChild(navLeftItem);\n nav.appendChild(navItem);\n element.appendChild(nav);\n element.insertBefore(navEle, element.firstChild);\n if (this.ieCheck) {\n nav.classList.add('e-ie-align');\n navEle.classList.add('e-ie-align');\n }\n this.eventBinding([nav, navEle]);\n };\n HScroll.prototype.onKeyPress = function (e) {\n var _this = this;\n if (e.key === 'Enter') {\n var timeoutFun_1 = function () {\n _this.keyTimeout = true;\n _this.eleScrolling(10, e.target, true);\n };\n this.keyTimer = window.setTimeout(function () {\n timeoutFun_1();\n }, 100);\n }\n };\n HScroll.prototype.onKeyUp = function (e) {\n if (e.key !== 'Enter') {\n return;\n }\n if (this.keyTimeout) {\n this.keyTimeout = false;\n }\n else {\n e.target.click();\n }\n clearTimeout(this.keyTimer);\n };\n HScroll.prototype.eventBinding = function (ele) {\n var _this = this;\n [].slice.call(ele).forEach(function (el) {\n new Touch(el, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });\n el.addEventListener('keydown', _this.onKeyPress.bind(_this));\n el.addEventListener('keyup', _this.onKeyUp.bind(_this));\n el.addEventListener('mouseup', _this.repeatScroll.bind(_this));\n el.addEventListener('touchend', _this.repeatScroll.bind(_this));\n el.addEventListener('contextmenu', function (e) {\n e.preventDefault();\n });\n EventHandler.add(el, 'click', _this.clickEventHandler, _this);\n });\n };\n HScroll.prototype.repeatScroll = function () {\n clearInterval(this.timeout);\n };\n HScroll.prototype.tabHoldHandler = function (e) {\n var _this = this;\n var trgt = e.originalEvent.target;\n trgt = this.contains(trgt, CLS_HSCROLLNAV) ? trgt.firstElementChild : trgt;\n var scrollDis = 10;\n var timeoutFun = function () {\n _this.eleScrolling(scrollDis, trgt, true);\n };\n this.timeout = window.setInterval(function () {\n timeoutFun();\n }, 50);\n };\n HScroll.prototype.contains = function (ele, className) {\n return ele.classList.contains(className);\n };\n HScroll.prototype.eleScrolling = function (scrollDis, trgt, isContinuous) {\n var rootEle = this.element;\n var classList = trgt.classList;\n if (classList.contains(CLS_HSCROLLNAV)) {\n classList = trgt.querySelector('.' + CLS_NAVARROW).classList;\n }\n if (this.contains(rootEle, CLS_RTL) && this.browserCheck) {\n scrollDis = -scrollDis;\n }\n if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {\n if (classList.contains(CLS_NAVRIGHTARROW)) {\n this.frameScrollRequest(scrollDis, 'add', isContinuous);\n }\n else {\n this.frameScrollRequest(scrollDis, '', isContinuous);\n }\n }\n else {\n if (classList.contains(CLS_NAVLEFTARROW)) {\n this.frameScrollRequest(scrollDis, 'add', isContinuous);\n }\n else {\n this.frameScrollRequest(scrollDis, '', isContinuous);\n }\n }\n };\n HScroll.prototype.clickEventHandler = function (e) {\n this.eleScrolling(this.scrollStep, e.target, false);\n };\n HScroll.prototype.swipeHandler = function (e) {\n var swipeEle = this.scrollEle;\n var distance;\n if (e.velocity <= 1) {\n distance = e.distanceX / (e.velocity * 10);\n }\n else {\n distance = e.distanceX / e.velocity;\n }\n var start = 0.5;\n var animate = function () {\n var step = Math.sin(start);\n if (step <= 0) {\n window.cancelAnimationFrame(step);\n }\n else {\n if (e.swipeDirection === 'Left') {\n swipeEle.scrollLeft += distance * step;\n }\n else if (e.swipeDirection === 'Right') {\n swipeEle.scrollLeft -= distance * step;\n }\n start -= 0.5;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n HScroll.prototype.scrollUpdating = function (scrollVal, action) {\n if (action === 'add') {\n this.scrollEle.scrollLeft += scrollVal;\n }\n else {\n this.scrollEle.scrollLeft -= scrollVal;\n }\n if (this.enableRtl && this.scrollEle.scrollLeft > 0) {\n this.scrollEle.scrollLeft = 0;\n }\n };\n HScroll.prototype.frameScrollRequest = function (scrollVal, action, isContinuous) {\n var _this = this;\n var step = 10;\n if (isContinuous) {\n this.scrollUpdating(scrollVal, action);\n return;\n }\n if (!this.customStep) {\n [].slice.call(selectAll('.' + CLS_OVERLAY, this.element)).forEach(function (el) {\n scrollVal -= el.offsetWidth;\n });\n }\n var animate = function () {\n var scrollValue;\n var scrollStep;\n if (_this.contains(_this.element, CLS_RTL) && _this.browserCheck) {\n scrollValue = -scrollVal;\n scrollStep = -step;\n }\n else {\n scrollValue = scrollVal;\n scrollStep = step;\n }\n if (scrollValue < step) {\n window.cancelAnimationFrame(scrollStep);\n }\n else {\n _this.scrollUpdating(scrollStep, action);\n scrollVal -= scrollStep;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n HScroll.prototype.touchHandler = function (e) {\n var ele = this.scrollEle;\n var distance = e.distanceX;\n if ((this.ieCheck) && this.contains(this.element, CLS_RTL)) {\n distance = -distance;\n }\n if (e.scrollDirection === 'Left') {\n ele.scrollLeft = ele.scrollLeft + distance;\n }\n else if (e.scrollDirection === 'Right') {\n ele.scrollLeft = ele.scrollLeft - distance;\n }\n };\n HScroll.prototype.arrowDisabling = function (addDisable, removeDisable) {\n if (this.isDevice) {\n var arrowEle = isNullOrUndefined(addDisable) ? removeDisable : addDisable;\n var arrowIcon = arrowEle.querySelector('.' + CLS_NAVARROW);\n if (isNullOrUndefined(addDisable)) {\n classList(arrowIcon, [CLS_NAVRIGHTARROW], [CLS_NAVLEFTARROW]);\n }\n else {\n classList(arrowIcon, [CLS_NAVLEFTARROW], [CLS_NAVRIGHTARROW]);\n }\n }\n else if (addDisable && removeDisable) {\n addDisable.classList.add(CLS_DISABLE);\n addDisable.setAttribute('aria-disabled', 'true');\n addDisable.removeAttribute('tabindex');\n removeDisable.classList.remove(CLS_DISABLE);\n removeDisable.setAttribute('aria-disabled', 'false');\n removeDisable.setAttribute('tabindex', '0');\n }\n this.repeatScroll();\n };\n HScroll.prototype.scrollHandler = function (e) {\n var target = e.target;\n var width = target.offsetWidth;\n var rootEle = this.element;\n var navLeftEle = this.element.querySelector('.' + CLS_HSCROLLNAVLEFT);\n var navRightEle = this.element.querySelector('.' + CLS_HSCROLLNAVRIGHT);\n var leftOverlay = this.element.querySelector('.' + CLS_LEFTOVERLAY);\n var rightOverlay = this.element.querySelector('.' + CLS_RIGHTOVERLAY);\n var scrollLeft = target.scrollLeft;\n if (scrollLeft <= 0) {\n scrollLeft = -scrollLeft;\n }\n if (this.isDevice) {\n if (this.enableRtl && !(this.browserCheck || this.ieCheck)) {\n leftOverlay = this.element.querySelector('.' + CLS_RIGHTOVERLAY);\n rightOverlay = this.element.querySelector('.' + CLS_LEFTOVERLAY);\n }\n if (scrollLeft < OVERLAY_MAXWID) {\n leftOverlay.style.width = scrollLeft + 'px';\n }\n else {\n leftOverlay.style.width = '40px';\n }\n if ((target.scrollWidth - Math.ceil(width + scrollLeft)) < OVERLAY_MAXWID) {\n rightOverlay.style.width = (target.scrollWidth - Math.ceil(width + scrollLeft)) + 'px';\n }\n else {\n rightOverlay.style.width = '40px';\n }\n }\n if (scrollLeft === 0) {\n this.arrowDisabling(navLeftEle, navRightEle);\n }\n else if (Math.ceil(width + scrollLeft + .1) >= target.scrollWidth) {\n this.arrowDisabling(navRightEle, navLeftEle);\n }\n else {\n var disEle = this.element.querySelector('.' + CLS_HSCROLLNAV + '.' + CLS_DISABLE);\n if (disEle) {\n disEle.classList.remove(CLS_DISABLE);\n disEle.setAttribute('aria-disabled', 'false');\n disEle.setAttribute('tabindex', '0');\n }\n }\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of property that changed.\n *\n * @param {HScrollModel} newProp - It contains the new value of data.\n * @param {HScrollModel} oldProp - It contains the old value of data.\n * @returns {void}\n * @private\n */\n HScroll.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'scrollStep':\n this.setScrollState();\n break;\n case 'enableRtl':\n newProp.enableRtl ? this.element.classList.add(CLS_RTL) : this.element.classList.remove(CLS_RTL);\n break;\n }\n }\n };\n __decorate([\n Property(null)\n ], HScroll.prototype, \"scrollStep\", void 0);\n HScroll = __decorate([\n NotifyPropertyChanges\n ], HScroll);\n return HScroll;\n}(Component));\nexport { HScroll };\n","import { extend, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { closest as closestElement, removeClass, classList, remove } from '@syncfusion/ej2-base';\nimport { getElementIndex, inArray, parentsUntil, getPosition, isActionPrevent } from '../base/util';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\n/**\n *\n * The `Reorder` module is used for reordering columns.\n */\nvar Reorder = /** @class */ (function () {\n /**\n * Constructor for the Grid reorder module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @hidden\n */\n function Reorder(parent) {\n this.idx = 0;\n this.parent = parent;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.headerDrop, this.headerDrop, this);\n this.parent.on(events.uiUpdate, this.enableAfterRender, this);\n this.parent.on(events.reorderComplete, this.onActionComplete, this);\n this.parent.on(events.columnDrag, this.drag, this);\n this.parent.on(events.columnDragStart, this.dragStart, this);\n this.parent.on(events.columnDragStop, this.dragStop, this);\n this.parent.on(events.headerDrop, this.headerDrop, this);\n this.parent.on(events.headerRefreshed, this.createReorderElement, this);\n this.parent.on(events.keyPressed, this.keyPressHandler, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n Reorder.prototype.chkDropPosition = function (srcElem, destElem) {\n var col = this.parent.getColumnByUid(destElem.firstElementChild.getAttribute('e-mappinguid'));\n var bool = col ? !col.lockColumn : true;\n return ((srcElem.parentElement.isEqualNode(destElem.parentElement) || this.parent.enableColumnVirtualization)\n || (this.parent.isFrozenGrid()\n && Array.prototype.indexOf.call(closestElement(srcElem, 'thead').children, srcElem.parentElement)\n === Array.prototype.indexOf.call(closestElement(destElem, 'thead').children, destElem.parentElement)))\n && this.targetParentContainerIndex(srcElem, destElem) > -1 && bool;\n };\n Reorder.prototype.chkDropAllCols = function (srcElem, destElem) {\n var isFound;\n var headers = this.getHeaderCells();\n var header;\n while (!isFound && headers.length > 0) {\n header = headers.pop();\n isFound = srcElem !== header && this.targetParentContainerIndex(srcElem, destElem) > -1;\n }\n return isFound;\n };\n Reorder.prototype.findColParent = function (col, cols, parent) {\n // eslint-disable-next-line no-self-assign\n parent = parent;\n for (var i = 0, len = cols.length; i < len; i++) {\n if (col === cols[parseInt(i.toString(), 10)]) {\n return true;\n }\n else if (cols[parseInt(i.toString(), 10)].columns) {\n var cnt = parent.length;\n parent.push(cols[parseInt(i.toString(), 10)]);\n if (!this.findColParent(col, cols[parseInt(i.toString(), 10)].columns, parent)) {\n parent.splice(cnt, parent.length - cnt);\n }\n else {\n return true;\n }\n }\n }\n return false;\n };\n Reorder.prototype.getColumnsModel = function (cols, isNotStackedHeader) {\n var columnModel = [];\n var subCols = [];\n for (var i = 0, len = cols.length; i < len; i++) {\n if (!isNullOrUndefined(cols[parseInt(i.toString(), 10)])) {\n if (cols[parseInt(i.toString(), 10)].visible) {\n columnModel.push(cols[parseInt(i.toString(), 10)]);\n }\n else if (isNotStackedHeader) {\n columnModel.push(cols[parseInt(i.toString(), 10)]);\n }\n if (cols[parseInt(i.toString(), 10)].columns) {\n subCols = subCols.concat(cols[parseInt(i.toString(), 10)].columns);\n }\n }\n }\n if (subCols.length) {\n columnModel = columnModel.concat(this.getColumnsModel(subCols));\n }\n return columnModel;\n };\n Reorder.prototype.headerDrop = function (e) {\n var gObj = this.parent;\n var dropElement = this.element.querySelector('.e-headercelldiv') || this.element.querySelector('.e-stackedheadercelldiv');\n var uId = dropElement.getAttribute('e-mappinguid');\n var column = gObj.getColumnByUid(uId);\n if (!closestElement(e.target, 'th') || (!isNullOrUndefined(column) && (!column.allowReordering || column.lockColumn))) {\n this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), column: column });\n return;\n }\n var destElem = closestElement(e.target, '.e-headercell');\n var destElemDiv = destElem.querySelector('.e-headercelldiv') || destElem.querySelector('.e-stackedheadercelldiv');\n var destElemUid = destElemDiv.getAttribute('e-mappinguid');\n if (!isNullOrUndefined(destElemUid)) {\n var destColumn = gObj.getColumnByUid(destElemUid);\n if (isNullOrUndefined(destColumn) || !destColumn.allowReordering || destColumn.lockColumn) {\n this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), column: column, destColumn: destColumn });\n return;\n }\n }\n if (destElem && !(!this.chkDropPosition(this.element, destElem) || !this.chkDropAllCols(this.element, destElem))) {\n if (this.parent.enableColumnVirtualization) {\n var columns = this.parent.columns;\n var sourceUid_1 = this.element.querySelector('.e-headercelldiv').getAttribute('e-mappinguid');\n var col = this.parent.columns.filter(function (col) { return col.uid === sourceUid_1; });\n var colMatchIndex_1 = null;\n var column_1 = col[0];\n var destUid_1 = destElem.querySelector('.e-headercelldiv').getAttribute('e-mappinguid');\n columns.some(function (col, index) {\n if (col.uid === destUid_1) {\n colMatchIndex_1 = index;\n return col.uid === destUid_1;\n }\n return false;\n });\n if (!isNullOrUndefined(colMatchIndex_1)) {\n this.moveColumns(colMatchIndex_1, column_1);\n }\n }\n else {\n var newIndex = this.targetParentContainerIndex(this.element, destElem);\n var uid = this.element.firstElementChild.getAttribute('e-mappinguid');\n this.destElement = destElem;\n this.parent.notify(events.setReorderDestinationElement, { ele: destElem });\n if (uid) {\n this.moveColumns(newIndex, this.parent.getColumnByUid(uid));\n }\n else {\n var headers = this.getHeaderCells();\n var oldIdx = getElementIndex(this.element, headers);\n var columns = this.getColumnsModel(this.parent.columns);\n this.moveColumns(newIndex, columns[parseInt(oldIdx.toString(), 10)]);\n }\n }\n }\n };\n Reorder.prototype.isActionPrevent = function (gObj) {\n return isActionPrevent(gObj);\n };\n Reorder.prototype.moveColumns = function (destIndex, column, reorderByColumn, preventRefresh) {\n var gObj = this.parent;\n if (this.isActionPrevent(gObj)) {\n gObj.notify(events.preventBatch, { instance: this, handler: this.moveColumns, arg1: destIndex, arg2: column });\n return;\n }\n var parent = this.getColParent(column, this.parent.columns);\n var cols = parent ? parent.columns : this.parent.columns;\n var srcIdx = inArray(column, cols);\n if ((parent || this.parent.lockcolPositionCount) && !reorderByColumn &&\n !this.parent.enableColumnVirtualization) {\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].field === column.field) {\n srcIdx = i;\n break;\n }\n }\n var col = this.parent.getColumnByUid(this.destElement.firstElementChild.getAttribute('e-mappinguid'));\n if (col) {\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].field === col.field) {\n destIndex = i;\n break;\n }\n }\n }\n else {\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].headerText === this.destElement.innerText.trim()) {\n destIndex = i;\n }\n }\n }\n }\n if (!gObj.allowReordering || srcIdx === destIndex || srcIdx === -1 || destIndex === -1) {\n return;\n }\n cols.splice(destIndex, 0, cols.splice(srcIdx, 1)[0]);\n var args = { column: column, destIndex: destIndex, columns: cols, parent: parent, cancel: false };\n gObj.notify(events.refreshFrozenColumns, args);\n if (args.cancel) {\n return;\n }\n if (this.parent.isFrozenGrid()) {\n if (this.parent.frozenColumns) {\n for (var i = 0; i < cols.length; i++) {\n if (cols[parseInt(i.toString(), 10)].freeze === 'Left') {\n cols[parseInt(i.toString(), 10)].freeze = undefined;\n }\n }\n }\n else {\n if (this.parent.getFrozenLeftCount() > destIndex) {\n column.freeze = 'Left';\n }\n else if ((cols.length - this.parent.getFrozenRightColumnsCount()) <= destIndex) {\n column.freeze = 'Right';\n }\n else {\n column.freeze = column.freeze === 'Fixed' ? 'Fixed' : undefined;\n }\n }\n }\n gObj.getColumns(true);\n gObj.notify(events.columnPositionChanged, { fromIndex: destIndex, toIndex: srcIdx });\n if (preventRefresh !== false) {\n gObj.notify(events.modelChanged, {\n type: events.actionBegin, requestType: 'reorder', fromIndex: destIndex, toIndex: srcIdx, toColumnUid: column.uid\n });\n }\n if (this.parent.isFrozenGrid()) {\n var cols_1 = this.parent.columns;\n this.idx = 0;\n this.refreshColumnIndex(cols_1);\n this.parent.notify(events.refreshFrozenPosition, {});\n }\n };\n Reorder.prototype.refreshColumnIndex = function (cols) {\n for (var i = 0; i < cols.length; i++) {\n cols[parseInt(i.toString(), 10)].index = this.idx;\n this.idx++;\n if (cols[parseInt(i.toString(), 10)].columns && cols[parseInt(i.toString(), 10)].columns.length) {\n this.refreshColumnIndex(cols[parseInt(i.toString(), 10)].columns);\n }\n }\n };\n Reorder.prototype.targetParentContainerIndex = function (srcElem, destElem) {\n var cols = this.parent.columns;\n var headers = this.getHeaderCells();\n var stackedHdrColumn = this.parent.getStackedColumns(cols);\n var stackedCols = [];\n if (stackedHdrColumn.length) {\n stackedCols = this.getAllStackedheaderParentColumns(headers);\n }\n var flatColumns = stackedHdrColumn.length && stackedCols.length ?\n this.getColumnsModel(stackedCols) : this.getColumnsModel(cols, true);\n var parent = this.getColParent(flatColumns[getElementIndex(srcElem, headers)], cols);\n cols = parent ? parent.columns : cols;\n return inArray(flatColumns[getElementIndex(destElem, headers)], cols);\n };\n Reorder.prototype.getAllStackedheaderParentColumns = function (headers) {\n var stackedCols = [];\n for (var i = 0; i < headers.length; i++) {\n if (headers[parseInt(i.toString(), 10)].classList.contains('e-hide')) {\n headers.splice(i, 1);\n i--;\n }\n else if (headers[parseInt(i.toString(), 10)].closest('thead').firstChild === headers[parseInt(i.toString(), 10)].parentElement) {\n stackedCols.push(this.parent.getColumnByUid(headers[parseInt(i.toString(), 10)].firstElementChild.getAttribute('e-mappinguid')));\n }\n }\n return stackedCols;\n };\n Reorder.prototype.getHeaderCells = function () {\n return [].slice.call(this.parent.element.getElementsByClassName('e-headercell'));\n };\n Reorder.prototype.getColParent = function (column, columns) {\n var parents = [];\n this.findColParent(column, columns, parents);\n return parents[parents.length - 1];\n };\n Reorder.prototype.reorderSingleColumn = function (fromFName, toFName) {\n var fColumn = this.parent.enableColumnVirtualization ?\n this.parent.columns.filter(function (col) { return col.field === fromFName; })[0]\n : this.parent.getColumnByField(fromFName);\n var toColumn = this.parent.enableColumnVirtualization ?\n this.parent.columns.filter(function (col) { return col.field === toFName; })[0]\n : this.parent.getColumnByField(toFName);\n if ((!isNullOrUndefined(fColumn) && (!fColumn.allowReordering || fColumn.lockColumn)) ||\n (!isNullOrUndefined(toColumn) && (!toColumn.allowReordering || toColumn.lockColumn))) {\n this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), column: fColumn, destColumn: toColumn });\n return;\n }\n var column = toColumn;\n var parent = this.getColParent(column, this.parent.columns);\n var columns = parent ? parent.columns : this.parent.columns;\n var destIndex = inArray(column, columns);\n if (destIndex > -1) {\n this.moveColumns(destIndex, fColumn, true);\n }\n };\n Reorder.prototype.reorderMultipleColumns = function (fromFNames, toFName) {\n var toIndex = this.parent.getColumnIndexByField(toFName);\n var toColumn = this.parent.getColumnByField(toFName);\n if (toIndex < 0 || (!isNullOrUndefined(toColumn) && (!toColumn.allowReordering || toColumn.lockColumn))) {\n return;\n }\n for (var i = 0; i < fromFNames.length; i++) {\n var column = this.parent.getColumnByField(fromFNames[parseInt(i.toString(), 10)]);\n if (!isNullOrUndefined(column) && (!column.allowReordering || column.lockColumn)) {\n return;\n }\n }\n for (var i = 0; i < fromFNames.length; i++) {\n var column = this.parent.getColumnByIndex(toIndex);\n var parent_1 = this.getColParent(column, this.parent.columns);\n var columns = parent_1 ? parent_1.columns : this.parent.columns;\n var destIndex = inArray(column, columns);\n if (destIndex > -1) {\n this.moveColumns(destIndex, this.parent.getColumnByField(fromFNames[parseInt(i.toString(), 10)]), true, true);\n }\n if (this.parent.getColumnIndexByField(fromFNames[i + 1]) >= destIndex) {\n toIndex++; //R to L\n }\n }\n };\n Reorder.prototype.moveTargetColumn = function (column, toIndex) {\n if (toIndex > -1) {\n this.moveColumns(toIndex, column, true);\n }\n };\n Reorder.prototype.reorderSingleColumnByTarget = function (fieldName, toIndex) {\n this.moveTargetColumn(this.parent.getColumnByField(fieldName), toIndex);\n };\n Reorder.prototype.reorderMultipleColumnByTarget = function (fieldName, toIndex) {\n for (var i = 0; i < fieldName.length; i++) {\n this.reorderSingleColumnByTarget(fieldName[parseInt(i.toString(), 10)], toIndex);\n }\n };\n /**\n * Changes the position of the Grid columns by field names.\n *\n * @param {string | string[]} fromFName - Defines the origin field names.\n * @param {string} toFName - Defines the destination field name.\n * @returns {void}\n */\n Reorder.prototype.reorderColumns = function (fromFName, toFName) {\n if (typeof fromFName === 'string') {\n this.reorderSingleColumn(fromFName, toFName);\n this.fromCol = fromFName;\n }\n else {\n this.reorderMultipleColumns(fromFName, toFName);\n this.fromCol = fromFName[0];\n }\n };\n /**\n * Changes the position of the Grid columns by field index.\n *\n * @param {number} fromIndex - Defines the origin field index.\n * @param {number} toIndex - Defines the destination field index.\n * @returns {void}\n */\n Reorder.prototype.reorderColumnByIndex = function (fromIndex, toIndex) {\n this.moveTargetColumn(this.parent.getColumnByIndex(fromIndex), toIndex);\n };\n /**\n * Changes the position of the Grid columns by field index.\n *\n * @param {string | string[]} fieldName - Defines the field name.\n * @param {number} toIndex - Defines the destination field index.\n * @returns {void}\n */\n Reorder.prototype.reorderColumnByTargetIndex = function (fieldName, toIndex) {\n if (typeof fieldName === 'string') {\n this.reorderSingleColumnByTarget(fieldName, toIndex);\n }\n else {\n this.reorderMultipleColumnByTarget(fieldName, toIndex);\n }\n };\n Reorder.prototype.enableAfterRender = function (e) {\n if (e.module === this.getModuleName() && e.enable) {\n this.createReorderElement();\n }\n };\n Reorder.prototype.createReorderElement = function (e) {\n if (e && e.args && e.args.isXaxis) {\n this.setDisplay('none');\n }\n var header = this.parent.element.querySelector('.' + literals.headerContent);\n this.upArrow = header.appendChild(this.parent\n .createElement('div', { className: 'e-icons e-icon-reorderuparrow e-reorderuparrow', attrs: { style: 'display:none' } }));\n this.downArrow = header.appendChild(this.parent\n .createElement('div', { className: 'e-icons e-icon-reorderdownarrow e-reorderdownarrow', attrs: { style: 'display:none' } }));\n };\n /**\n * The function used to trigger onActionComplete\n *\n * @param {NotifyArgs} e - specified the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Reorder.prototype.onActionComplete = function (e) {\n this.parent.trigger(events.actionComplete, extend(e, { type: events.actionComplete }));\n var target = this.fromCol && this.parent.getColumnHeaderByField(this.fromCol);\n if (target) {\n this.parent.focusModule.onClick({ target: target }, true);\n }\n };\n /**\n * To destroy the reorder\n *\n * @returns {void}\n * @hidden\n */\n Reorder.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (this.parent.isDestroyed || !gridElement || (!gridElement.querySelector('.' + literals.gridHeader) &&\n !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n if (this.upArrow.parentNode) {\n remove(this.upArrow);\n }\n if (this.downArrow.parentNode) {\n remove(this.downArrow);\n }\n this.parent.off(events.headerDrop, this.headerDrop);\n this.parent.off(events.uiUpdate, this.enableAfterRender);\n this.parent.off(events.reorderComplete, this.onActionComplete);\n this.parent.off(events.columnDrag, this.drag);\n this.parent.off(events.columnDragStart, this.dragStart);\n this.parent.off(events.columnDragStop, this.dragStop);\n this.parent.off(events.headerRefreshed, this.createReorderElement);\n this.parent.off(events.keyPressed, this.keyPressHandler);\n this.parent.off(events.destroy, this.destroy);\n //call ejdrag and drop destroy\n };\n Reorder.prototype.keyPressHandler = function (e) {\n var gObj = this.parent;\n var isMacLike = /(Mac)/i.test(navigator.platform);\n if (isMacLike && e.metaKey) {\n if (e.action === 'leftArrow') {\n e.action = 'ctrlLeftArrow';\n }\n else if (e.action === 'rightArrow') {\n e.action = 'ctrlRightArrow';\n }\n }\n switch (e.action) {\n case 'ctrlLeftArrow':\n case 'ctrlRightArrow':\n // eslint-disable-next-line no-case-declarations\n var element = gObj.focusModule.currentInfo.element;\n if (element && element.classList.contains('e-headercell')) {\n var column = gObj.getColumnByUid(element.firstElementChild.getAttribute('e-mappinguid'));\n var visibleCols = gObj.getVisibleColumns();\n var index = visibleCols.indexOf(column);\n var toCol = e.action === 'ctrlLeftArrow' ? visibleCols[index - 1] : visibleCols[index + 1];\n if (toCol && toCol.field && column.field) {\n this.reorderColumns(column.field, toCol.field);\n }\n }\n break;\n }\n };\n Reorder.prototype.drag = function (e) {\n var gObj = this.parent;\n var target = e.target;\n var closest = closestElement(target, '.e-headercell:not(.e-stackedHeaderCell)');\n var cloneElement = gObj.element.querySelector('.e-cloneproperties');\n var content = gObj.getContent().firstElementChild;\n var isLeft = this.x > getPosition(e.event).x + content.scrollLeft;\n removeClass([].slice.call(gObj.getHeaderTable().getElementsByClassName('e-reorderindicate')), ['e-reorderindicate']);\n this.setDisplay('none');\n this.stopTimer();\n classList(cloneElement, ['e-defaultcur'], ['e-notallowedcur']);\n this.updateScrollPostion(e.event);\n if (closest && !closest.isEqualNode(this.element)) {\n target = closest;\n //consider stacked, detail header cell\n var uid = target.querySelector('.e-headercelldiv, .e-stackedheadercelldiv').getAttribute('e-mappinguid');\n if (!(!this.chkDropPosition(this.element, target) || !this.chkDropAllCols(this.element, target)) &&\n gObj.getColumnByUid(uid).allowReordering && e.column.allowReordering) {\n this.updateArrowPosition(target, isLeft);\n classList(target, ['e-allowDrop', 'e-reorderindicate'], []);\n }\n else if (!(gObj.allowGrouping && parentsUntil(e.target, 'e-groupdroparea'))) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n }\n }\n else {\n if (closest && closest.isEqualNode(this.element) &&\n !((gObj.allowGrouping && e.column.allowGrouping) || e.column.allowReordering)) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n }\n else if (!closest && !(gObj.allowGrouping && parentsUntil(e.target, 'e-groupdroparea'))) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n }\n }\n if (!e.column.allowReordering || e.column.lockColumn) {\n return;\n }\n gObj.trigger(events.columnDrag, { target: target, draggableType: 'headercell', column: e.column });\n };\n Reorder.prototype.updateScrollPostion = function (e) {\n var _this = this;\n var x = getPosition(e).x;\n var cliRect = this.parent.element.getBoundingClientRect();\n var cliRectBaseRight = cliRect.right;\n var cliRectBaseLeft = cliRect.left;\n var scrollElem = this.parent.getContent().firstElementChild;\n if (x > cliRectBaseLeft && x < cliRectBaseLeft + 35) {\n this.timer = window.setInterval(function () { _this.setScrollLeft(scrollElem, true); }, 50);\n }\n else if (x < cliRectBaseRight && x > cliRectBaseRight - 35) {\n this.timer = window.setInterval(function () { _this.setScrollLeft(scrollElem, false); }, 50);\n }\n };\n Reorder.prototype.setScrollLeft = function (scrollElem, isLeft) {\n var scrollLeft = scrollElem.scrollLeft;\n scrollElem.scrollLeft = scrollElem.scrollLeft + (isLeft ? -5 : 5);\n if (scrollLeft !== scrollElem.scrollLeft) {\n this.setDisplay('none');\n }\n };\n Reorder.prototype.stopTimer = function () {\n window.clearInterval(this.timer);\n };\n Reorder.prototype.updateArrowPosition = function (target, isLeft) {\n var cliRect = target.getBoundingClientRect();\n var cliRectBase = this.parent.element.getBoundingClientRect();\n if ((isLeft && cliRect.left < cliRectBase.left) || (!isLeft && cliRect.right > cliRectBase.right)) {\n return;\n }\n var isSticky = this.parent.getHeaderContent().classList.contains('e-sticky');\n this.upArrow.style.top = isSticky ? cliRect.top + cliRect.height + 'px' : cliRect.top + cliRect.height - cliRectBase.top + 'px';\n this.downArrow.style.top = isSticky ? cliRect.top - 7 + 'px' : cliRect.top - cliRectBase.top - 7 + 'px';\n this.upArrow.style.left = this.downArrow.style.left = isSticky ? (isLeft ? cliRect.left : cliRect.right) - 4 + 'px' :\n (isLeft ? cliRect.left : cliRect.right) - cliRectBase.left - 4 + 'px';\n this.setDisplay('');\n };\n Reorder.prototype.dragStart = function (e) {\n var gObj = this.parent;\n var target = e.target;\n this.element = target.classList.contains('e-headercell') ? target :\n parentsUntil(target, 'e-headercell');\n if (!e.column.allowReordering || e.column.lockColumn) {\n return;\n }\n var content = gObj.getContent().firstElementChild;\n this.x = getPosition(e.event).x + content.scrollLeft;\n gObj.trigger(events.columnDragStart, {\n target: target, draggableType: 'headercell', column: e.column\n });\n };\n Reorder.prototype.dragStop = function (e) {\n var gObj = this.parent;\n this.setDisplay('none');\n this.stopTimer();\n if (!e.cancel) {\n gObj.trigger(events.columnDrop, { target: e.target, draggableType: 'headercell', column: e.column });\n }\n removeClass([].slice.call(gObj.getHeaderTable().getElementsByClassName('e-reorderindicate')), ['e-reorderindicate']);\n };\n Reorder.prototype.setDisplay = function (display) {\n this.upArrow.style.display = display;\n this.downArrow.style.display = display;\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} return the module name\n * @private\n */\n Reorder.prototype.getModuleName = function () {\n return 'reorder';\n };\n return Reorder;\n}());\nexport { Reorder };\n","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./MarketShape.vue?vue&type=style&index=0&id=2f3a6821&prod&lang=css\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('ejs-tab',{ref:\"productsTab\",attrs:{\"id\":\"element\",\"selected\":_vm.onTabProdSpecSelected}},[_c('e-tabitems',[_c('e-tabitem',{attrs:{\"header\":_vm.headerText1,\"content\":_vm.productTemplate}}),_c('e-tabitem',{attrs:{\"header\":_vm.headerText2,\"content\":_vm.tradePeriodTemplate}}),_c('e-tabitem',{attrs:{\"header\":_vm.headerText3,\"content\":_vm.spotEchangeTemplate}}),_c('e-tabitem',{attrs:{\"header\":_vm.headerText12,\"content\":_vm.spotConfigurationTemplate}}),_c('e-tabitem',{attrs:{\"header\":_vm.headerText13,\"content\":_vm.spotConfigurationLogsTemplate}}),_c('e-tabitem',{attrs:{\"header\":_vm.headerText4,\"content\":_vm.futureExhangeTemplate}}),_c('e-tabitem',{attrs:{\"header\":_vm.headerText5,\"content\":_vm.ricTemplate}}),_c('e-tabitem',{attrs:{\"header\":_vm.headerText9,\"content\":_vm.ricLogsTemplate}}),_c('e-tabitem',{attrs:{\"header\":_vm.headerText8,\"content\":_vm.ricOtherTemplate}}),_c('e-tabitem',{attrs:{\"header\":_vm.headerText10,\"content\":_vm.ricOtherLogsTemplate}}),_c('e-tabitem',{attrs:{\"header\":_vm.headerText6,\"content\":_vm.ccTemplate}}),_c('e-tabitem',{attrs:{\"header\":_vm.headerText11,\"content\":_vm.ccLogsTemplate}}),_c('e-tabitem',{attrs:{\"header\":_vm.headerText7,\"content\":_vm.shapeTemplate}})],1)],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('CRow',[_c('CCol',{attrs:{\"col\":\"\"}},[_c('div',{staticStyle:{\"width\":\"100%\",\"height\":\"75vh\"}},[_c('ejs-grid',{ref:\"gridcc\",attrs:{\"dataSource\":_vm.ccData,\"allowFiltering\":true,\"allowPaging\":true,\"allowResizing\":true,\"toolbarClick\":_vm.toolbarClick,\"allowExcelExport\":true,\"excelExportComplete\":_vm.excelExportComplete,\"allowReordering\":true,\"enablePersistence\":true,\"allowSorting\":true,\"editSettings\":_vm.editSettings,\"toolbar\":_vm.toolbar,\"pageSettings\":_vm.pageSettings,\"actionBegin\":_vm.actionBegin,\"actionComplete\":_vm.actionComplete,\"actionFailure\":_vm.actionFailure,\"filterSettings\":_vm.filterOptions,\"width\":\"100%\",\"height\":\"100%\"}},[_c('e-columns',[_c('e-column',{attrs:{\"field\":\"id\",\"headerText\":\"Id\",\"width\":\"120\",\"isPrimaryKey\":true,\"visible\":false}}),_c('e-column',{attrs:{\"field\":\"code\",\"headerText\":\"Conversion Ric Root\",\"validationRules\":_vm.codeRules,\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"currencyIdFrom\",\"headerText\":\"Currency From\",\"validationRules\":_vm.requiredRules,\"textAlign\":\"Right\",\"foreignKeyField\":\"currencyId\",\"foreignKeyValue\":\"name\",\"dataSource\":_vm.currencies,\"editType\":\"dropdownedit\",\"edit\":_vm.currencyFromParams,\"width\":\"90\"}}),_c('e-column',{attrs:{\"field\":\"currencyIdTo\",\"headerText\":\"Currency To\",\"textAlign\":\"Right\",\"validationRules\":_vm.requiredRules,\"foreignKeyField\":\"currencyId\",\"foreignKeyValue\":\"name\",\"dataSource\":_vm.currencies,\"editType\":\"dropdownedit\",\"edit\":_vm.currencyToParams,\"width\":\"90\"}})],1)],1)],1)])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n \r\n \r\n\r\n\r\n\r\n","
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n\r\n\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CurrencyConversion.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CurrencyConversion.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./CurrencyConversion.vue?vue&type=template&id=f098cf74\"\nimport script from \"./CurrencyConversion.vue?vue&type=script&lang=js\"\nexport * from \"./CurrencyConversion.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('CRow',[_c('CCol',[_c('div',{staticStyle:{\"width\":\"100%\",\"height\":\"75vh\"}},[_c('ejs-grid',{ref:\"gridfe\",attrs:{\"dataSource\":_vm.futureData,\"allowFiltering\":true,\"allowPaging\":true,\"allowResizing\":true,\"allowReordering\":true,\"allowSorting\":true,\"toolbar\":_vm.toolbar,\"editSettings\":_vm.editSettings,\"pageSettings\":_vm.pageSettings,\"filterSettings\":_vm.filterOptions,\"toolbarClick\":_vm.toolbarClick,\"enablePersistence\":true,\"allowExcelExport\":true,\"excelExportComplete\":_vm.excelExportComplete,\"actionComplete\":_vm.actionComplete,\"actionBegin\":_vm.actionBegin,\"actionFailure\":_vm.actionFailure,\"width\":\"100%\",\"height\":\"100%\"}},[_c('e-columns',[_c('e-column',{attrs:{\"field\":\"id\",\"headerText\":\"\",\"isPrimaryKey\":true,\"visible\":false}}),_c('e-column',{attrs:{\"field\":\"name\",\"headerText\":\"Name\",\"validationRules\":_vm.requiredRules,\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"stateId\",\"headerText\":\"Country\",\"validationRules\":_vm.requiredRules,\"visible\":false,\"width\":\"120\",\"edit\":_vm.stateParams,\"foreignKeyField\":\"stateId\",\"foreignKeyValue\":\"stateName\",\"dataSource\":_vm.state,\"editType\":\"dropdownedit\"}}),_c('e-column',{attrs:{\"field\":\"stateName\",\"headerText\":\"Country\",\"textAlign\":\"Left\",\"width\":\"180\",\"type\":\"string\"}})],1)],1)],1)])],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FutureExchange.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FutureExchange.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./FutureExchange.vue?vue&type=template&id=5ddf2e8b&scoped=true\"\nimport script from \"./FutureExchange.vue?vue&type=script&lang=js\"\nexport * from \"./FutureExchange.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"5ddf2e8b\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('CRow',[_c('CCol',{attrs:{\"col\":\"\"}},[_c('div',{staticStyle:{\"width\":\"100%\",\"height\":\"75vh\"}},[_c('ejs-grid',{ref:\"gridms\",attrs:{\"dataSource\":_vm.shapeData,\"allowFiltering\":true,\"allowPaging\":true,\"allowResizing\":true,\"toolbarClick\":_vm.toolbarClick,\"allowExcelExport\":true,\"excelExportComplete\":_vm.excelExportComplete,\"allowReordering\":true,\"allowSorting\":true,\"editSettings\":_vm.editSettings,\"toolbar\":_vm.toolbar,\"pageSettings\":_vm.pageSettings,\"actionBegin\":_vm.actionBegin,\"actionComplete\":_vm.actionComplete,\"actionFailure\":_vm.actionFailure,\"filterSettings\":_vm.filterOptions,\"queryCellInfo\":_vm.customiseCell,\"width\":\"100%\",\"height\":\"100%\"}},[_c('e-columns',[_c('e-column',{attrs:{\"field\":\"marketShapeId\",\"headerText\":\"Id\",\"width\":\"120\",\"isPrimaryKey\":true,\"visible\":false}}),_c('e-column',{attrs:{\"field\":\"name\",\"headerText\":\"Name\",\"validationRules\":_vm.nameRules,\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"period\",\"headerText\":\"Period Indicator\",\"validationRules\":_vm.requiredRules,\"textAlign\":\"Right\",\"foreignKeyField\":\"periodId\",\"foreignKeyValue\":\"name\",\"dataSource\":_vm.periods,\"editType\":\"dropdownedit\",\"edit\":_vm.periodIndicatorParams,\"width\":\"90\"}}),_c('e-column',{attrs:{\"field\":\"periodName\",\"headerText\":\"Period Indicator\",\"textAlign\":\"Right\",\"visible\":false,\"width\":\"90\"}}),_c('e-column',{attrs:{\"field\":\"periodSpan\",\"headerText\":\"Period\",\"textAlign\":\"Right\",\"validationRules\":_vm.requiredRules,\"foreignKeyField\":\"periodSpanId\",\"foreignKeyValue\":\"name\",\"dataSource\":_vm.periodSpans,\"editType\":\"dropdownedit\",\"edit\":_vm.periodParams,\"width\":\"90\"}}),_c('e-column',{attrs:{\"field\":\"periodSpanName\",\"headerText\":\"Period\",\"textAlign\":\"Right\",\"visible\":false,\"width\":\"90\"}}),_c('e-column',{attrs:{\"field\":\"percentage\",\"headerText\":\"Percentage\",\"textAlign\":\"Right\",\"validationRules\":_vm.percentageRules,\"format\":\"n4\",\"editType\":\"numericedit\",\"edit\":_vm.numericParams,\"width\":\"90\"}}),_c('e-column',{attrs:{\"field\":\"year\",\"headerText\":\"Year\",\"textAlign\":\"Right\",\"validationRules\":_vm.yearRules,\"editType\":\"numericedit\",\"edit\":_vm.yearParams,\"width\":\"90\"}}),_c('e-column',{attrs:{\"field\":\"ricId\",\"headerText\":\"RIC\",\"textAlign\":\"Right\",\"validationRules\":_vm.requiredRules,\"editType\":\"dropdownedit\",\"edit\":_vm.ricParams,\"foreignKeyField\":\"id\",\"foreignKeyValue\":\"fullRic\",\"dataSource\":_vm.rics,\"width\":\"90\"}}),_c('e-column',{attrs:{\"field\":\"ricName\",\"headerText\":\"RIC\",\"textAlign\":\"Right\",\"visible\":false,\"width\":\"90\"}}),_c('e-column',{attrs:{\"field\":\"stateName\",\"headerText\":\"Country\",\"textAlign\":\"Right\",\"allowEditing\":false,\"width\":\"90\"}}),_c('e-column',{attrs:{\"field\":\"pricingAreaName\",\"headerText\":\"Price Area\",\"textAlign\":\"Right\",\"allowEditing\":false,\"width\":\"90\"}}),_c('e-column',{attrs:{\"field\":\"utilityTypeName\",\"headerText\":\"Commodity\",\"textAlign\":\"Right\",\"allowEditing\":false,\"width\":\"90\"}}),_c('e-column',{attrs:{\"field\":\"product\",\"headerText\":\"Product\",\"textAlign\":\"Right\",\"allowEditing\":false,\"width\":\"90\"}})],1)],1)],1),_c('div',{staticClass:\"control-section; position:relative\",staticStyle:{\"height\":\"350px\"},attrs:{\"id\":\"modalTarget\"}},[_c('ejs-uploader',{ref:\"uploadObj\",attrs:{\"id\":\"defaultfileupload\",\"name\":\"uploadFile\",\"uploading\":_vm.addHeaders,\"allowedExtensions\":_vm.extensions,\"asyncSettings\":_vm.path,\"success\":_vm.onUploadSuccess,\"failure\":_vm.onUploadFailed,\"multiple\":_vm.multiple}})],1)])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n\r\n\r\n\r\n","
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n\r\n\r\n\r\n\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./MarketShape.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./MarketShape.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./MarketShape.vue?vue&type=template&id=2f3a6821\"\nimport script from \"./MarketShape.vue?vue&type=script&lang=js\"\nexport * from \"./MarketShape.vue?vue&type=script&lang=js\"\nimport style0 from \"./MarketShape.vue?vue&type=style&index=0&id=2f3a6821&prod&lang=css\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('CRow',[_c('CCol',[_c('ejs-grid',{ref:\"gridp\",attrs:{\"dataSource\":_vm.productData,\"allowFiltering\":true,\"allowPaging\":true,\"allowResizing\":true,\"allowReordering\":true,\"allowSorting\":true,\"toolbar\":_vm.toolbar,\"editSettings\":_vm.editSettings,\"pageSettings\":_vm.pageSettings,\"filterSettings\":_vm.filterOptions,\"toolbarClick\":_vm.toolbarClick,\"allowExcelExport\":true,\"actionBegin\":_vm.actionBegin,\"actionComplete\":_vm.actionComplete,\"actionFailure\":_vm.actionFailure,\"enablePersistence\":true,\"excelExportComplete\":_vm.excelExportComplete}},[_c('e-columns',[_c('e-column',{attrs:{\"field\":\"id\",\"headerText\":\"Id\",\"isPrimaryKey\":true,\"visible\":false}}),_c('e-column',{attrs:{\"field\":\"name\",\"headerText\":\"Name\",\"validationRules\":_vm.requiredRules,\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"utilityTypeId\",\"headerText\":\"Commodity\",\"validationRules\":_vm.requiredRules,\"width\":\"120\",\"edit\":_vm.utilitiesParams,\"foreignKeyField\":\"utilityTypeId\",\"foreignKeyValue\":\"utilityTypeName\",\"dataSource\":_vm.utilities,\"editType\":\"dropdownedit\"}}),_c('e-column',{attrs:{\"field\":\"tradable\",\"headerText\":\"Tradable\",\"width\":\"120\",\"displayAsCheckBox\":\"true\",\"editType\":\"booleanedit\",\"type\":\"boolean\"}})],1)],1)],1)],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Product.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Product.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./Product.vue?vue&type=template&id=5b89390b&scoped=true\"\nimport script from \"./Product.vue?vue&type=script&lang=js\"\nexport * from \"./Product.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"5b89390b\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('CRow',[_c('CCol',[_c('div',{staticStyle:{\"width\":\"100%\",\"height\":\"75vh\"}},[_c('ejs-grid',{ref:\"gridr\",attrs:{\"dataSource\":_vm.ricData,\"allowFiltering\":true,\"allowPaging\":true,\"allowResizing\":true,\"allowReordering\":true,\"allowSorting\":true,\"toolbar\":_vm.toolbar,\"editSettings\":_vm.editSettings,\"enablePersistence\":true,\"pageSettings\":_vm.pageSettings,\"filterSettings\":_vm.filterOptions,\"toolbarClick\":_vm.toolbarClick,\"actionBegin\":_vm.actionBegin,\"actionFailure\":_vm.actionFailure,\"actionComplete\":_vm.actionComplete,\"allowExcelExport\":true,\"excelExportComplete\":_vm.excelExportComplete,\"width\":\"100%\",\"height\":\"100%\"}},[_c('e-columns',[_c('e-column',{attrs:{\"field\":\"id\",\"headerText\":\"Id\",\"isPrimaryKey\":true,\"visible\":false}}),_c('e-column',{attrs:{\"field\":\"stateId\",\"headerText\":\"Country\",\"validationRules\":_vm.requiredRules,\"width\":\"120\",\"visible\":false,\"edit\":_vm.stateParams,\"foreignKeyField\":\"stateId\",\"foreignKeyValue\":\"stateName\",\"dataSource\":_vm.states,\"editType\":\"dropdownedit\"}}),_c('e-column',{attrs:{\"field\":\"stateName\",\"headerText\":\"Country\",\"textAlign\":\"Left\",\"width\":\"180\",\"type\":\"string\"}}),_c('e-column',{attrs:{\"field\":\"pricingAreaId\",\"headerText\":\"Pricing Area\",\"width\":\"180\",\"edit\":_vm.pricingAreaParams,\"foreignKeyField\":\"id\",\"foreignKeyValue\":\"name\",\"dataSource\":_vm.pricingAreas,\"editType\":\"dropdownedit\"}}),_c('e-column',{attrs:{\"field\":\"utilityTypeId\",\"headerText\":\"Commodity\",\"validationRules\":_vm.requiredRules,\"width\":\"180\",\"edit\":_vm.utilitiesParams,\"foreignKeyField\":\"utilityTypeId\",\"foreignKeyValue\":\"utilityTypeName\",\"dataSource\":_vm.utilities,\"editType\":\"dropdownedit\"}}),_c('e-column',{attrs:{\"field\":\"activeMonth\",\"headerText\":\"Active Month\",\"displayAsCheckBox\":\"true\",\"width\":\"180\",\"editType\":\"booleanedit\",\"type\":\"boolean\"}}),_c('e-column',{attrs:{\"field\":\"core\",\"headerText\":\"RIC Root\",\"validationRules\":_vm.requiredRules,\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"coreExtension\",\"headerText\":\"RIC Extension\",\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"productId\",\"headerText\":\"Product\",\"validationRules\":_vm.requiredRules,\"width\":\"180\",\"edit\":_vm.productParams,\"foreignKeyField\":\"id\",\"foreignKeyValue\":\"name\",\"dataSource\":_vm.products,\"editType\":\"dropdownedit\"}}),_c('e-column',{attrs:{\"field\":\"monthsAhead\",\"headerText\":\"Months Ahead\",\"textAlign\":\"Right\",\"validationRules\":_vm.numericRules,\"editType\":\"numericedit\",\"edit\":_vm.numericParams,\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"quartersAhead\",\"headerText\":\"Quarters Ahead\",\"textAlign\":\"Right\",\"validationRules\":_vm.numericRules,\"editType\":\"numericedit\",\"edit\":_vm.numericParams,\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"seasonssAhead\",\"headerText\":\"Seasons Ahead\",\"textAlign\":\"Right\",\"validationRules\":_vm.numericRules,\"editType\":\"numericedit\",\"edit\":_vm.numericParams,\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"yearsAhead\",\"headerText\":\"Years Ahead\",\"textAlign\":\"Right\",\"validationRules\":_vm.numericRules,\"editType\":\"numericedit\",\"edit\":_vm.numericParams,\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"parentId\",\"headerText\":\"Parent Ric\",\"textAlign\":\"Right\",\"editType\":\"dropdownedit\",\"edit\":_vm.ricParams,\"foreignKeyField\":\"id\",\"foreignKeyValue\":\"core\",\"dataSource\":_vm.rics,\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"benchmarkId\",\"headerText\":\"Benchmark Ric\",\"textAlign\":\"Right\",\"editType\":\"dropdownedit\",\"edit\":_vm.benchmarkRicParams,\"foreignKeyField\":\"id\",\"foreignKeyValue\":\"core\",\"dataSource\":_vm.rics,\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"description\",\"headerText\":\"Description\",\"width\":\"180\"}})],1)],1)],1)])],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Ric.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Ric.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./Ric.vue?vue&type=template&id=502cf647\"\nimport script from \"./Ric.vue?vue&type=script&lang=js\"\nexport * from \"./Ric.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('CRow',[_c('CCol',[_c('div',{staticStyle:{\"width\":\"100%\",\"height\":\"75vh\"}},[_c('ejs-grid',{ref:\"gridro\",attrs:{\"dataSource\":_vm.ricData,\"allowFiltering\":true,\"allowPaging\":true,\"allowResizing\":true,\"allowReordering\":true,\"allowSorting\":true,\"toolbar\":_vm.toolbar,\"editSettings\":_vm.editSettings,\"enablePersistence\":true,\"pageSettings\":_vm.pageSettings,\"filterSettings\":_vm.filterOptions,\"toolbarClick\":_vm.toolbarClick,\"actionBegin\":_vm.actionBegin,\"actionFailure\":_vm.actionFailure,\"actionComplete\":_vm.actionComplete,\"allowExcelExport\":true,\"excelExportComplete\":_vm.excelExportComplete,\"width\":\"100%\",\"height\":\"100%\"}},[_c('e-columns',[_c('e-column',{attrs:{\"field\":\"id\",\"headerText\":\"Id\",\"isPrimaryKey\":true,\"visible\":false}}),_c('e-column',{attrs:{\"field\":\"core\",\"headerText\":\"Core\",\"validationRules\":_vm.requiredRules,\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"utilityType\",\"headerText\":\"Commodity\",\"validationRules\":_vm.requiredRules,\"width\":\"120\",\"edit\":_vm.utilitiesOtherParams,\"foreignKeyField\":\"id\",\"foreignKeyValue\":\"name\",\"dataSource\":_vm.utilitiesOther,\"editType\":\"dropdownedit\"}}),_c('e-column',{attrs:{\"field\":\"periodType\",\"headerText\":\"Period Type\",\"validationRules\":_vm.requiredRules,\"width\":\"120\",\"edit\":_vm.periodTypeParams,\"foreignKeyField\":\"id\",\"foreignKeyValue\":\"name\",\"dataSource\":_vm.otherPeriodTypes,\"editType\":\"dropdownedit\"}}),_c('e-column',{attrs:{\"field\":\"periodCodeType\",\"headerText\":\"Period Code Type\",\"textAlign\":\"Right\",\"validationRules\":_vm.numericRules,\"editType\":\"numericedit\",\"edit\":_vm.numericParams,\"width\":\"90\"}}),_c('e-column',{attrs:{\"field\":\"description\",\"headerText\":\"Description\",\"validationRules\":_vm.requiredRules,\"width\":\"120\"}})],1)],1)],1)])],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n\r\n\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./RicOther.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./RicOther.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./RicOther.vue?vue&type=template&id=11f5c3ba\"\nimport script from \"./RicOther.vue?vue&type=script&lang=js\"\nexport * from \"./RicOther.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('CRow',[_c('CCol',[_c('div',{staticStyle:{\"width\":\"100%\",\"height\":\"75vh\"}},[_c('ejs-grid',{ref:\"gridse\",attrs:{\"dataSource\":_vm.spotData,\"allowFiltering\":true,\"allowPaging\":true,\"allowResizing\":true,\"allowReordering\":true,\"allowSorting\":true,\"toolbar\":_vm.toolbar,\"editSettings\":_vm.editSettings,\"pageSettings\":_vm.pageSettings,\"enablePersistence\":true,\"filterSettings\":_vm.filterOptions,\"toolbarClick\":_vm.toolbarClick,\"allowExcelExport\":true,\"excelExportComplete\":_vm.excelExportComplete,\"actionBegin\":_vm.actionBegin,\"actionComplete\":_vm.actionComplete,\"actionFailure\":_vm.actionFailure,\"width\":\"100%\",\"height\":\"100%\"}},[_c('e-columns',[_c('e-column',{attrs:{\"field\":\"id\",\"headerText\":\"\",\"isPrimaryKey\":true,\"visible\":false}}),_c('e-column',{attrs:{\"field\":\"name\",\"headerText\":\"Name\",\"validationRules\":_vm.requiredRules,\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"stateId\",\"headerText\":\"Country\",\"validationRules\":_vm.requiredRules,\"visible\":false,\"width\":\"120\",\"edit\":_vm.stateParams,\"foreignKeyField\":\"stateId\",\"foreignKeyValue\":\"stateName\",\"dataSource\":_vm.state,\"editType\":\"dropdownedit\"}}),_c('e-column',{attrs:{\"field\":\"stateName\",\"headerText\":\"Country\",\"textAlign\":\"Left\",\"width\":\"180\",\"type\":\"string\"}})],1)],1)],1)])],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SpotExchange.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SpotExchange.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./SpotExchange.vue?vue&type=template&id=085a5269&scoped=true\"\nimport script from \"./SpotExchange.vue?vue&type=script&lang=js\"\nexport * from \"./SpotExchange.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"085a5269\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('CRow',[_c('CCol',[_c('div',{staticStyle:{\"width\":\"100%\",\"height\":\"75vh\"}},[_c('ejs-grid',{ref:\"gridsc\",attrs:{\"dataSource\":_vm.spotConfigData,\"allowFiltering\":true,\"allowPaging\":true,\"allowResizing\":true,\"allowReordering\":true,\"allowSorting\":true,\"toolbar\":_vm.toolbar,\"editSettings\":_vm.editSettings,\"pageSettings\":_vm.pageSettings,\"filterSettings\":_vm.filterOptions,\"toolbarClick\":_vm.toolbarClick,\"actionBegin\":_vm.actionBegin,\"actionFailure\":_vm.actionFailure,\"actionComplete\":_vm.actionComplete,\"allowExcelExport\":true,\"excelExportComplete\":_vm.excelExportComplete,\"width\":\"100%\",\"height\":\"100%\"}},[_c('e-columns',[_c('e-column',{attrs:{\"field\":\"id\",\"headerText\":\"Id\",\"isPrimaryKey\":true,\"visible\":false}}),_c('e-column',{attrs:{\"field\":\"ric\",\"headerText\":\"RIC Root\",\"validationRules\":_vm.requiredRules,\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"stateId\",\"headerText\":\"Country\",\"visible\":false,\"validationRules\":_vm.requiredRules,\"width\":\"120\",\"edit\":_vm.stateParams,\"foreignKeyField\":\"stateId\",\"foreignKeyValue\":\"stateName\",\"dataSource\":_vm.states,\"editType\":\"dropdownedit\"}}),_c('e-column',{attrs:{\"field\":\"stateName\",\"headerText\":\"Country\",\"textAlign\":\"Left\",\"width\":\"180\",\"type\":\"string\"}}),_c('e-column',{attrs:{\"field\":\"priceAreaId\",\"headerText\":\"Price Area\",\"width\":\"120\",\"visible\":false,\"foreignKeyField\":\"id\",\"foreignKeyValue\":\"name\",\"edit\":_vm.priceAreaParams,\"dataSource\":_vm.priceArea,\"editType\":\"dropdownedit\"}}),_c('e-column',{attrs:{\"field\":\"priceAreaName\",\"headerText\":\"PriceArea\",\"textAlign\":\"Left\",\"width\":\"180\",\"type\":\"string\"}}),_c('e-column',{attrs:{\"field\":\"utilityTypeId\",\"headerText\":\"Commodity\",\"validationRules\":_vm.requiredRules,\"width\":\"180\",\"edit\":_vm.utilitiesParams,\"foreignKeyField\":\"utilityTypeId\",\"foreignKeyValue\":\"utilityTypeName\",\"dataSource\":_vm.utilities,\"editType\":\"dropdownedit\"}}),_c('e-column',{attrs:{\"field\":\"productId\",\"headerText\":\"Product\",\"validationRules\":_vm.requiredRules,\"width\":\"180\",\"edit\":_vm.productParams,\"foreignKeyField\":\"id\",\"foreignKeyValue\":\"name\",\"dataSource\":_vm.products,\"editType\":\"dropdownedit\"}}),_c('e-column',{attrs:{\"field\":\"description\",\"headerText\":\"Description\",\"width\":\"180\"}})],1)],1)],1)])],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SpotConfiguration.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SpotConfiguration.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./SpotConfiguration.vue?vue&type=template&id=50ecbb94\"\nimport script from \"./SpotConfiguration.vue?vue&type=script&lang=js\"\nexport * from \"./SpotConfiguration.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('CRow',[_c('CCol',[_c('div',{staticStyle:{\"width\":\"100%\",\"height\":\"75vh\"}},[_c('ejs-grid',{ref:\"gridscl\",attrs:{\"dataSource\":_vm.spotConfigLogsData,\"allowFiltering\":true,\"allowPaging\":true,\"allowResizing\":true,\"allowReordering\":true,\"allowSorting\":true,\"toolbar\":_vm.toolbar,\"enablePersistence\":true,\"pageSettings\":_vm.pageSettings,\"filterSettings\":_vm.filterOptions,\"toolbarClick\":_vm.toolbarClick,\"actionBegin\":_vm.actionBegin,\"actionFailure\":_vm.actionFailure,\"actionComplete\":_vm.actionComplete,\"excelQueryCellInfo\":_vm.excelQueryCell,\"queryCellInfo\":_vm.queryCell,\"allowExcelExport\":true,\"excelExportComplete\":_vm.excelExportComplete,\"width\":\"100%\",\"height\":\"100%\"}},[_c('e-columns',[_c('e-column',{attrs:{\"field\":\"id\",\"headerText\":\"Id\",\"width\":\"120\",\"isPrimaryKey\":true,\"visible\":false}}),_c('e-column',{attrs:{\"field\":\"spotConfigId\",\"headerText\":\"Spot Congfig Id\",\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"ric\",\"headerText\":\"RIC Root\",\"textAlign\":\"Left\",\"width\":\"130\",\"type\":\"string\"}}),_c('e-column',{attrs:{\"field\":\"stateName\",\"headerText\":\"Country\",\"textAlign\":\"Left\",\"width\":\"150\",\"type\":\"string\"}}),_c('e-column',{attrs:{\"field\":\"priceAreaName\",\"headerText\":\"Price Area\",\"textAlign\":\"Left\",\"width\":\"150\",\"type\":\"string\"}}),_c('e-column',{attrs:{\"field\":\"utilityTypeName\",\"headerText\":\"Commodity\",\"textAlign\":\"Left\",\"width\":\"150\",\"type\":\"string\"}}),_c('e-column',{attrs:{\"field\":\"productName\",\"headerText\":\"Product\",\"textAlign\":\"Left\",\"width\":\"150\",\"type\":\"string\"}}),_c('e-column',{attrs:{\"field\":\"description\",\"headerText\":\"Description\",\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"logDate\",\"headerText\":\"Log Date\",\"textAlign\":\"Left\",\"width\":\"190\",\"type\":\"date\",\"format\":_vm.dateFormatOptions}}),_c('e-column',{attrs:{\"field\":\"logTime\",\"headerText\":\"Log Time\",\"textAlign\":\"Left\",\"type\":\"string\",\"width\":\"150\"}}),_c('e-column',{attrs:{\"field\":\"userName\",\"headerText\":\"User\",\"textAlign\":\"Left\",\"width\":\"150\",\"type\":\"string\"}})],1)],1)],1)])],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SpotConfigurationLogs.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SpotConfigurationLogs.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./SpotConfigurationLogs.vue?vue&type=template&id=0d6fb51a\"\nimport script from \"./SpotConfigurationLogs.vue?vue&type=script&lang=js\"\nexport * from \"./SpotConfigurationLogs.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('CRow',[_c('CCol',{attrs:{\"col\":\"\"}},[_c('ejs-grid',{ref:\"gridtp\",attrs:{\"dataSource\":_vm.tradeData,\"allowFiltering\":true,\"allowPaging\":true,\"allowResizing\":true,\"enablePersistence\":true,\"toolbarClick\":_vm.toolbarClick,\"allowExcelExport\":true,\"excelExportComplete\":_vm.excelExportComplete,\"allowReordering\":true,\"allowSorting\":true,\"editSettings\":_vm.editSettings,\"toolbar\":_vm.toolbar,\"pageSettings\":_vm.pageSettings,\"actionComplete\":_vm.actionComplete,\"actionFailure\":_vm.actionFailure,\"actionBegin\":_vm.actionBegin,\"filterSettings\":_vm.filterOptions}},[_c('e-columns',[_c('e-column',{attrs:{\"field\":\"tradePeriodId\",\"headerText\":\"Id\",\"width\":\"120\",\"isPrimaryKey\":true,\"visible\":false}}),_c('e-column',{attrs:{\"field\":\"name\",\"headerText\":\"Name\",\"validationRules\":_vm.nameRules,\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"code\",\"headerText\":\"Code\",\"validationRules\":_vm.codeRules,\"textAlign\":\"Right\",\"width\":\"90\"}}),_c('e-column',{attrs:{\"field\":\"indicator\",\"headerText\":\"Indicator\",\"textAlign\":\"Right\",\"allowEditing\":false,\"validationRules\":_vm.indicatorRules,\"width\":\"90\"}}),_c('e-column',{attrs:{\"field\":\"shaped\",\"headerText\":\"Shaped\",\"textAlign\":\"Right\",\"displayAsCheckBox\":\"true\",\"allowEditing\":false,\"editType\":\"booleanedit\",\"width\":\"90\"}})],1)],1)],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TradePeriod.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./TradePeriod.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./TradePeriod.vue?vue&type=template&id=048dbeb1\"\nimport script from \"./TradePeriod.vue?vue&type=script&lang=js\"\nexport * from \"./TradePeriod.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('CRow',[_c('CCol',[_c('div',{staticStyle:{\"width\":\"100%\",\"height\":\"75vh\"}},[_c('ejs-grid',{ref:\"gridrl\",attrs:{\"dataSource\":_vm.ricLogData,\"allowFiltering\":true,\"allowPaging\":true,\"allowResizing\":true,\"allowReordering\":true,\"allowSorting\":true,\"toolbar\":_vm.toolbar,\"toolbarClick\":_vm.toolbarClick,\"allowExcelExport\":true,\"excelExportComplete\":_vm.excelExportComplete,\"excelQueryCellInfo\":_vm.excelQueryCellInfo,\"pageSettings\":_vm.pageSettings,\"filterSettings\":_vm.filterOptions,\"actionBegin\":_vm.actionBegin,\"actionFailure\":_vm.actionFailure,\"actionComplete\":_vm.actionComplete,\"queryCellInfo\":_vm.queryCellInfo,\"width\":\"100%\",\"height\":\"100%\"}},[_c('e-columns',[_c('e-column',{attrs:{\"field\":\"ricLogid\",\"headerText\":\"Ric Log Id\",\"isPrimaryKey\":true,\"visible\":false}}),_c('e-column',{attrs:{\"field\":\"ricId\",\"headerText\":\"Ric Id\",\"visible\":true}}),_c('e-column',{attrs:{\"field\":\"stateName\",\"headerText\":\"Country\",\"textAlign\":\"Left\",\"width\":\"180\",\"type\":\"string\"}}),_c('e-column',{attrs:{\"field\":\"priceAreaName\",\"headerText\":\"Price Area\",\"textAlign\":\"Left\",\"width\":\"150\",\"type\":\"string\"}}),_c('e-column',{attrs:{\"field\":\"utilityTypeName\",\"headerText\":\"Commodity\"}}),_c('e-column',{attrs:{\"field\":\"activeMonth\",\"headerText\":\"Active Month\",\"displayAsCheckBox\":\"true\",\"type\":\"boolean\"}}),_c('e-column',{attrs:{\"field\":\"core\",\"headerText\":\"RIC Root\",\"typeof\":\"string\",\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"coreExtension\",\"headerText\":\"RIC Extension\",\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"product\",\"headerText\":\"Product\",\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"monthsAhead\",\"headerText\":\"Months Ahead\",\"textAlign\":\"Right\",\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"quartersAhead\",\"headerText\":\"Quarters Ahead\",\"textAlign\":\"Right\",\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"seasonssAhead\",\"headerText\":\"Seasons Ahead\",\"textAlign\":\"Right\",\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"yearsAhead\",\"headerText\":\"Years Ahead\",\"textAlign\":\"Right\",\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"parentName\",\"headerText\":\"Parent Ric\",\"textAlign\":\"Right\",\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"benchmarkName\",\"headerText\":\"Benchmark Ric\",\"textAlign\":\"Right\",\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"isDeleted\",\"headerText\":\"Deleted\",\"textAlign\":\"Right\",\"width\":\"180\"}}),_c('e-column',{attrs:{\"field\":\"logDate\",\"headerText\":\"Log Date\",\"textAlign\":\"Left\",\"width\":\"190\",\"type\":\"date\",\"format\":_vm.dateFormatOptions}}),_c('e-column',{attrs:{\"field\":\"logTime\",\"headerText\":\"Log Time\",\"textAlign\":\"Left\",\"type\":\"string\",\"width\":\"150\"}}),_c('e-column',{attrs:{\"field\":\"userName\",\"headerText\":\"User\",\"textAlign\":\"Left\",\"width\":\"150\",\"type\":\"string\"}})],1)],1)],1)])],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./RicLogs.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./RicLogs.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./RicLogs.vue?vue&type=template&id=fd5fbdd6\"\nimport script from \"./RicLogs.vue?vue&type=script&lang=js\"\nexport * from \"./RicLogs.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('CRow',[_c('CCol',[_c('div',{staticStyle:{\"width\":\"100%\",\"height\":\"75vh\"}},[_c('ejs-grid',{ref:\"gridrol\",attrs:{\"dataSource\":_vm.ricsLogsData,\"allowFiltering\":true,\"allowPaging\":true,\"allowResizing\":true,\"allowReordering\":true,\"allowSorting\":true,\"toolbar\":_vm.toolbar,\"pageSettings\":_vm.pageSettings,\"filterSettings\":_vm.filterOptions,\"toolbarClick\":_vm.toolbarClick,\"actionBegin\":_vm.actionBegin,\"actionFailure\":_vm.actionFailure,\"actionComplete\":_vm.actionComplete,\"queryCellInfo\":_vm.queryCellInfo,\"excelQueryCellInfo\":_vm.excelQueryCellInfo,\"allowExcelExport\":true,\"excelExportComplete\":_vm.excelExportComplete,\"width\":\"100%\",\"height\":\"100%\"}},[_c('e-columns',[_c('e-column',{attrs:{\"field\":\"ricOtherInstrumentsLogId\",\"headerText\":\"Id\",\"isPrimaryKey\":true,\"visible\":false}}),_c('e-column',{attrs:{\"field\":\"ricOtherInstrumentsId\",\"headerText\":\"Other Instrument Id\",\"visible\":true,\"width\":\"90\"}}),_c('e-column',{attrs:{\"field\":\"core\",\"headerText\":\"Core\",\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"utilityTypeName\",\"headerText\":\"Commodity\",\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"periodTypeName\",\"headerText\":\"Period Type\",\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"periodCodeType\",\"headerText\":\"Period Code Type\",\"textAlign\":\"Left\",\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"description\",\"headerText\":\"Description\",\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"logDate\",\"headerText\":\"Log Date\",\"textAlign\":\"Left\",\"width\":\"120\",\"type\":\"date\",\"format\":_vm.dateFormatOptions}}),_c('e-column',{attrs:{\"field\":\"logTime\",\"headerText\":\"Log Time\",\"textAlign\":\"Left\",\"type\":\"string\",\"width\":\"150\"}}),_c('e-column',{attrs:{\"field\":\"userName\",\"headerText\":\"User\",\"textAlign\":\"Left\",\"width\":\"150\",\"type\":\"string\"}})],1)],1)],1)])],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./RicOtherLogs.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./RicOtherLogs.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./RicOtherLogs.vue?vue&type=template&id=859767c0\"\nimport script from \"./RicOtherLogs.vue?vue&type=script&lang=js\"\nexport * from \"./RicOtherLogs.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('CRow',[_c('CCol',{attrs:{\"col\":\"\"}},[_c('div',{staticStyle:{\"width\":\"100%\",\"height\":\"75vh\"}},[_c('ejs-grid',{ref:\"gridccl\",attrs:{\"dataSource\":_vm.ccLogsData,\"allowFiltering\":true,\"allowPaging\":true,\"allowResizing\":true,\"toolbarClick\":_vm.toolbarClick,\"allowExcelExport\":true,\"excelExportComplete\":_vm.excelExportComplete,\"allowReordering\":true,\"excelQueryCellInfo\":_vm.excelQueryCellInfo,\"allowSorting\":true,\"toolbar\":_vm.toolbar,\"pageSettings\":_vm.pageSettings,\"actionBegin\":_vm.actionBegin,\"queryCellInfo\":_vm.queryCellInfo,\"actionComplete\":_vm.actionComplete,\"actionFailure\":_vm.actionFailure,\"filterSettings\":_vm.filterOptions,\"width\":\"100%\",\"height\":\"100%\"}},[_c('e-columns',[_c('e-column',{attrs:{\"field\":\"currencyConversionLogId\",\"headerText\":\"Log Id\",\"width\":\"120\",\"isPrimaryKey\":true,\"visible\":false}}),_c('e-column',{attrs:{\"field\":\"currencyConversionId\",\"headerText\":\"Currency Conversion Id\",\"width\":\"120\",\"visible\":true}}),_c('e-column',{attrs:{\"field\":\"code\",\"headerText\":\"Conversion Ric Root\",\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"currencyFrom\",\"headerText\":\"Currency From\",\"textAlign\":\"Left\",\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"currencyTo\",\"headerText\":\"Currency To\",\"textAlign\":\"Left\",\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"logDate\",\"headerText\":\"Log Date\",\"textAlign\":\"Left\",\"width\":\"120\",\"type\":\"date\",\"format\":_vm.dateFormatOptions}}),_c('e-column',{attrs:{\"field\":\"logTime\",\"headerText\":\"Log Time\",\"textAlign\":\"Left\",\"type\":\"string\",\"width\":\"120\"}}),_c('e-column',{attrs:{\"field\":\"userName\",\"headerText\":\"User\",\"textAlign\":\"Left\",\"width\":\"150\",\"type\":\"string\"}})],1)],1)],1)])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n\r\n\r\n\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CurrencyConversionLogs.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CurrencyConversionLogs.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./CurrencyConversionLogs.vue?vue&type=template&id=02563424\"\nimport script from \"./CurrencyConversionLogs.vue?vue&type=script&lang=js\"\nexport * from \"./CurrencyConversionLogs.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n\r\n\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProductSpecificationMain.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProductSpecificationMain.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./ProductSpecificationMain.vue?vue&type=template&id=1bfa8f32\"\nimport script from \"./ProductSpecificationMain.vue?vue&type=script&lang=js\"\nexport * from \"./ProductSpecificationMain.vue?vue&type=script&lang=js\"\nimport style0 from \"./ProductSpecificationMain.vue?vue&type=style&index=0&id=1bfa8f32&prod&lang=css\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nexport var TabItemsDirective = vueDefineComponent({\n inject: { custom: { default: null } },\n render: function (createElement) {\n if (!isExecute) {\n var h = !isExecute ? gh : createElement;\n var slots = null;\n if (!isNullOrUndefined(this.$slots.default)) {\n slots = !isExecute ? this.$slots.default() : this.$slots.default;\n }\n return h('div', { class: 'e-directive' }, slots);\n }\n return;\n },\n updated: function () {\n if (!isExecute && this.custom) {\n this.custom();\n }\n },\n methods: {\n getTag: function () {\n return 'e-tabitems';\n }\n }\n});\nexport var TabItemsPlugin = {\n name: 'e-tabitems',\n install: function (Vue) {\n Vue.component(TabItemsPlugin.name, TabItemsDirective);\n }\n};\n/**\n * 'e-tabitem' directive represent a item of the Vue Tab\n * It must be contained in a Tab component(`ejs-tab`).\n * ```html\n *
\n * \n * \n * \n * \n * \n * ```\n */\nexport var TabItemDirective = vueDefineComponent({\n render: function () {\n return;\n },\n methods: {\n getTag: function () {\n return 'e-tabitem';\n }\n }\n});\nexport var TabItemPlugin = {\n name: 'e-tabitem',\n install: function (Vue) {\n Vue.component(TabItemPlugin.name, TabItemDirective);\n }\n};\n","import { ComponentBase, gh, getProps, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { Tab } from '@syncfusion/ej2-navigations';\nimport { TabItemsDirective, TabItemDirective, TabItemsPlugin, TabItemPlugin } from './items.directive';\nexport var properties = ['isLazyUpdate', 'plugins', 'allowDragAndDrop', 'animation', 'clearTemplates', 'cssClass', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'headerPlacement', 'height', 'heightAdjustMode', 'items', 'loadOn', 'locale', 'overflowMode', 'reorderActiveTab', 'scrollStep', 'selectedItem', 'showCloseButton', 'width', 'added', 'adding', 'created', 'destroyed', 'dragged', 'dragging', 'onDragStart', 'removed', 'removing', 'selected', 'selecting'];\nexport var modelProps = [];\nexport var testProp = getProps({ props: properties });\nexport var props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);\nemitProbs.push('modelchanged', 'update:modelValue');\nfor (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {\n var props_1 = modelProps_1[_i];\n emitProbs.push('update:' + props_1);\n}\n/**\n * Represents the VueJS Tab Component.\n * ```html\n *
\n * ```\n */\nexport var TabComponent = vueDefineComponent({\n name: 'TabComponent',\n mixins: [ComponentBase],\n props: props,\n watch: watch,\n emits: emitProbs,\n provide: function () { return { custom: this.custom }; },\n data: function () {\n return {\n ej2Instances: new Tab({}),\n propKeys: properties,\n models: modelProps,\n hasChildDirective: true,\n hasInjectedModules: false,\n tagMapper: { \"e-tabitems\": \"e-tabitem\" },\n tagNameMapper: { \"e-tabitems\": \"e-items\" },\n isVue3: !isExecute,\n templateCollection: {},\n };\n },\n created: function () {\n this.bindProperties();\n this.ej2Instances._setProperties = this.ej2Instances.setProperties;\n this.ej2Instances.setProperties = this.setProperties;\n this.ej2Instances.clearTemplate = this.clearTemplate;\n this.updated = this.updated;\n },\n render: function (createElement) {\n var h = !isExecute ? gh : createElement;\n var slots = null;\n if (!isNullOrUndefined(this.$slots.default)) {\n slots = !isExecute ? this.$slots.default() : this.$slots.default;\n }\n return h('div', slots);\n },\n methods: {\n clearTemplate: function (templateNames) {\n if (!templateNames) {\n templateNames = Object.keys(this.templateCollection || {});\n }\n if (templateNames.length && this.templateCollection) {\n for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {\n var tempName = templateNames_1[_i];\n var elementCollection = this.templateCollection[tempName];\n if (elementCollection && elementCollection.length) {\n for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {\n var ele = elementCollection_1[_a];\n var destroy = getValue('__vue__.$destroy', ele);\n if (destroy) {\n ele.__vue__.$destroy();\n }\n if (ele.innerHTML) {\n ele.innerHTML = '';\n }\n }\n delete this.templateCollection[tempName];\n }\n }\n }\n },\n setProperties: function (prop, muteOnChange) {\n var _this = this;\n if (this.isVue3) {\n this.models = !this.models ? this.ej2Instances.referModels : this.models;\n }\n if (this.ej2Instances && this.ej2Instances._setProperties) {\n this.ej2Instances._setProperties(prop, muteOnChange);\n }\n if (prop && this.models && this.models.length) {\n Object.keys(prop).map(function (key) {\n _this.models.map(function (model) {\n if ((key === model) && !(/datasource/i.test(key))) {\n if (_this.isVue3) {\n _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);\n }\n else {\n _this.$emit('update:' + key, prop[key]);\n _this.$emit('modelchanged', prop[key]);\n }\n }\n });\n });\n }\n },\n custom: function () {\n this.updated();\n },\n addTab: function (items, index) {\n return this.ej2Instances.addTab(items, index);\n },\n disable: function (value) {\n return this.ej2Instances.disable(value);\n },\n enableTab: function (index, value) {\n return this.ej2Instances.enableTab(index, value);\n },\n getItemIndex: function (tabItemId) {\n return this.ej2Instances.getItemIndex(tabItemId);\n },\n hideTab: function (index, value) {\n return this.ej2Instances.hideTab(index, value);\n },\n refresh: function () {\n return this.ej2Instances.refresh();\n },\n refreshActiveTab: function () {\n return this.ej2Instances.refreshActiveTab();\n },\n refreshActiveTabBorder: function () {\n return this.ej2Instances.refreshActiveTabBorder();\n },\n removeTab: function (index) {\n return this.ej2Instances.removeTab(index);\n },\n select: function (args, event) {\n return this.ej2Instances.select(args, event);\n },\n }\n});\nexport var TabPlugin = {\n name: 'ejs-tab',\n install: function (Vue) {\n Vue.component(TabPlugin.name, TabComponent);\n Vue.component(TabItemPlugin.name, TabItemDirective);\n Vue.component(TabItemsPlugin.name, TabItemsDirective);\n }\n};\n","import { Row } from './../models/row';\nimport { CellType } from '../base/enum';\nimport { isNullOrUndefined, Internationalization, getValue, createElement } from '@syncfusion/ej2-base';\nimport { Cell } from '../models/cell';\nimport { ValueFormatter } from './../services/value-formatter';\nimport { Query, DataManager } from '@syncfusion/ej2-data';\nimport { getForeignData, measureColumnDepth, getUid } from '../base/util';\nimport { Grid } from '../base/grid';\n/**\n * @hidden\n * `ExportHelper` for `PdfExport` & `ExcelExport`\n */\nvar ExportHelper = /** @class */ (function () {\n function ExportHelper(parent, foreignKeyData) {\n this.hideColumnInclude = false;\n this.foreignKeyData = {};\n this.parent = parent;\n if (!parent.parentDetails && foreignKeyData) {\n this.foreignKeyData = foreignKeyData;\n }\n }\n ExportHelper.getQuery = function (parent, data) {\n var query = data.generateQuery(true).requiresCount();\n if (data.isRemote()) {\n if (parent.groupSettings.enableLazyLoading && parent.groupSettings.columns.length) {\n query.lazyLoad = [];\n }\n else {\n query.take(parent.pageSettings.totalRecordsCount);\n }\n }\n return query;\n };\n ExportHelper.prototype.getFData = function (value, column) {\n var foreignKeyData = getForeignData(column, {}, value, this.foreignKeyData[column.field])[0];\n return foreignKeyData;\n };\n ExportHelper.prototype.getGridRowModel = function (columns, dataSource, gObj, startIndex) {\n if (startIndex === void 0) { startIndex = 0; }\n var rows = [];\n var length = dataSource.length;\n if (length) {\n for (var i = 0; i < length; i++, startIndex++) {\n var options = { isExpand: false };\n options.data = dataSource[parseInt(i.toString(), 10)];\n options.index = startIndex;\n if (gObj.childGrid || gObj.detailTemplate) {\n if (gObj.hierarchyPrintMode === 'All') {\n options.isExpand = true;\n }\n else if (gObj.hierarchyPrintMode === 'Expanded' &&\n this.parent.expandedRows && this.parent.expandedRows[parseInt(startIndex.toString(), 10)]) {\n options.isExpand = gObj.expandedRows[parseInt(startIndex.toString(), 10)].isExpand;\n }\n }\n var row = new Row(options);\n row.cells = this.generateCells(columns, gObj);\n rows.push(row);\n }\n this.processColumns(rows);\n }\n return rows;\n };\n ExportHelper.prototype.generateCells = function (columns, gObj) {\n var cells = [];\n if (gObj.childGridLevel) {\n var len = gObj.childGridLevel;\n for (var i = 0; len > i; i++) {\n cells.push(this.generateCell({}, CellType.Indent));\n }\n }\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var col = columns_1[_i];\n cells.push(this.generateCell(col, CellType.Data));\n }\n return cells;\n };\n ExportHelper.prototype.getColumnData = function (gridObj) {\n var _this = this;\n var columnPromise = [];\n var promise;\n var fColumns = gridObj.getForeignKeyColumns();\n if (fColumns.length) {\n for (var i = 0; i < fColumns.length; i++) {\n var colData = ('result' in fColumns[parseInt(i.toString(), 10)].dataSource) ?\n new DataManager(fColumns[parseInt(i.toString(), 10)].dataSource.result) :\n fColumns[parseInt(i.toString(), 10)].dataSource;\n columnPromise.push(colData.executeQuery(new Query()));\n }\n promise = Promise.all(columnPromise).then(function (e) {\n for (var j = 0; j < fColumns.length; j++) {\n _this.foreignKeyData[fColumns[parseInt(j.toString(), 10)].field] = e[parseInt(j.toString(), 10)].result;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n });\n }\n return promise;\n };\n ExportHelper.prototype.getHeaders = function (columns, isHideColumnInclude) {\n if (isHideColumnInclude) {\n this.hideColumnInclude = true;\n }\n else {\n this.hideColumnInclude = false;\n }\n this.colDepth = measureColumnDepth(columns);\n var rows = [];\n for (var i = 0; i < this.colDepth; i++) {\n rows[parseInt(i.toString(), 10)] = new Row({});\n rows[parseInt(i.toString(), 10)].cells = [];\n }\n rows = this.processColumns(rows);\n rows = this.processHeaderCells(rows, columns);\n return { rows: rows, columns: this.generateActualColumns(columns) };\n };\n ExportHelper.prototype.getConvertedWidth = function (input) {\n var value = parseFloat(input);\n return (input.indexOf('%') !== -1) ? (this.parent.element.getBoundingClientRect().width * value / 100) : value;\n };\n ExportHelper.prototype.generateActualColumns = function (columns, actualColumns) {\n if (actualColumns === void 0) { actualColumns = []; }\n for (var _i = 0, columns_2 = columns; _i < columns_2.length; _i++) {\n var column = columns_2[_i];\n if (column.commands) {\n continue;\n }\n if (!column.columns) {\n if (column.visible || this.hideColumnInclude) {\n actualColumns.push(column);\n }\n }\n else {\n if (column.visible || this.hideColumnInclude) {\n var colSpan = this.getCellCount(column, 0);\n if (colSpan !== 0) {\n this.generateActualColumns(column.columns, actualColumns);\n }\n }\n }\n }\n return actualColumns;\n };\n ExportHelper.prototype.processHeaderCells = function (rows, cols) {\n var columns = cols;\n for (var i = 0; i < columns.length; i++) {\n if (!columns[parseInt(i.toString(), 10)].commands) {\n rows = this.appendGridCells(columns[parseInt(i.toString(), 10)], rows, 0);\n }\n }\n return rows;\n };\n ExportHelper.prototype.appendGridCells = function (cols, gridRows, index) {\n if (!cols.columns && (cols.visible !== false || this.hideColumnInclude) && !cols.commands) {\n gridRows[parseInt(index.toString(), 10)].cells.push(this.generateCell(cols, CellType.Header, this.colDepth - index, index));\n }\n else if (cols.columns) {\n var colSpan = this.getCellCount(cols, 0);\n if (colSpan) {\n gridRows[parseInt(index.toString(), 10)].cells.push(new Cell({\n cellType: CellType.StackedHeader, column: cols, colSpan: colSpan\n }));\n }\n var isIgnoreFirstCell = void 0;\n for (var i = 0, len = cols.columns.length; i < len; i++) {\n if (cols.columns[parseInt(i.toString(), 10)].visible && !isIgnoreFirstCell) {\n isIgnoreFirstCell = true;\n }\n gridRows = this.appendGridCells(cols.columns[parseInt(i.toString(), 10)], gridRows, index + 1);\n }\n }\n return gridRows;\n };\n ExportHelper.prototype.generateCell = function (gridColumn, cellType, rowSpan, rowIndex) {\n var option = {\n 'visible': gridColumn.visible,\n 'isDataCell': cellType === CellType.Data,\n 'column': gridColumn,\n 'cellType': cellType,\n 'rowSpan': rowSpan,\n 'index': rowIndex\n };\n if (!option.rowSpan || option.rowSpan < 2) {\n delete option.rowSpan;\n }\n return new Cell(option);\n };\n ExportHelper.prototype.processColumns = function (rows) {\n //TODO: generate dummy column for group, detail, stacked row here; ensureColumns here\n var gridObj = this.parent;\n var columnIndexes = [];\n if (gridObj.enableColumnVirtualization) {\n columnIndexes = gridObj.getColumnIndexesInView();\n }\n for (var i = 0, len = rows.length; i < len; i++) {\n if (gridObj.allowGrouping) {\n for (var j = 0, len_1 = gridObj.groupSettings.columns.length - 1; j < len_1; j++) {\n if (gridObj.enableColumnVirtualization && columnIndexes.indexOf(j) === -1) {\n continue;\n }\n rows[parseInt(i.toString(), 10)].cells.splice(0, 0, this.generateCell({}, CellType.HeaderIndent));\n }\n }\n }\n return rows;\n };\n ExportHelper.prototype.getCellCount = function (column, count) {\n if (column.columns) {\n for (var i = 0; i < column.columns.length; i++) {\n count = this.getCellCount(column.columns[parseInt(i.toString(), 10)], count);\n }\n }\n else {\n if (column.visible || this.hideColumnInclude) {\n count++;\n }\n }\n return count;\n };\n ExportHelper.prototype.checkAndExport = function (gridPool, globalResolve) {\n var bool = Object.keys(gridPool).some(function (key) {\n return !gridPool[\"\" + key];\n });\n if (!bool) {\n globalResolve();\n }\n };\n ExportHelper.prototype.failureHandler = function (gridPool, childGridObj, resolve) {\n var _this = this;\n return function () {\n gridPool[childGridObj.id] = true;\n _this.checkAndExport(gridPool, resolve);\n };\n };\n ExportHelper.prototype.createChildGrid = function (gObj, row, exportType, gridPool) {\n var childGridObj = new Grid(this.parent.detailRowModule.getGridModel(gObj, row, exportType));\n gObj.isPrinting = false;\n var parent = 'parentDetails';\n childGridObj[\"\" + parent] = {\n parentID: gObj.element.id,\n parentPrimaryKeys: gObj.getPrimaryKeyFieldNames(),\n parentKeyField: gObj.childGrid.queryString,\n parentKeyFieldValue: getValue(childGridObj.queryString, row.data),\n parentRowData: row.data\n };\n var exportId = getUid('child-grid');\n var element = createElement('div', {\n id: exportId, styles: 'display: none'\n });\n document.body.appendChild(element);\n childGridObj.id = exportId;\n gridPool[\"\" + exportId] = false;\n childGridObj.isExportGrid = true;\n return { childGrid: childGridObj, element: element };\n };\n ExportHelper.prototype.getGridExportColumns = function (columns) {\n var actualGridColumns = [];\n for (var i = 0, gridColumns = columns; i < gridColumns.length; i++) {\n if (gridColumns[parseInt(i.toString(), 10)].type !== 'checkbox') {\n actualGridColumns.push(gridColumns[parseInt(i.toString(), 10)]);\n }\n }\n return actualGridColumns;\n };\n /**\n * Gets the foreignkey data.\n *\n * @returns {ForeignKeyFormat} returns the foreignkey data\n * @hidden\n */\n ExportHelper.prototype.getForeignKeyData = function () {\n return this.foreignKeyData;\n };\n return ExportHelper;\n}());\nexport { ExportHelper };\n/**\n * @hidden\n * `ExportValueFormatter` for `PdfExport` & `ExcelExport`\n */\nvar ExportValueFormatter = /** @class */ (function () {\n function ExportValueFormatter(culture) {\n this.valueFormatter = new ValueFormatter(culture);\n this.internationalization = new Internationalization(culture);\n }\n ExportValueFormatter.prototype.returnFormattedValue = function (args, customFormat) {\n if (!isNullOrUndefined(args.value) && args.value) {\n return this.valueFormatter.getFormatFunction(customFormat)(args.value);\n }\n else {\n return '';\n }\n };\n /**\n * Used to format the exporting cell value\n *\n * @param {ExportHelperArgs} args - Specifies cell details.\n * @returns {string} returns formated value\n * @hidden\n */\n ExportValueFormatter.prototype.formatCellValue = function (args) {\n if (args.isForeignKey) {\n args.value = getValue(args.column.foreignKeyValue, getForeignData(args.column, {}, args.value)[0]);\n }\n if (args.column.type === 'number' && args.column.format !== undefined && args.column.format !== '') {\n if (typeof args.column.format === 'string') {\n args.column.format = { format: args.column.format };\n }\n return args.value || args.value === 0 ?\n this.internationalization.getNumberFormat(args.column.format)(args.value) : '';\n }\n else if (args.column.type === 'boolean' && args.value !== '') {\n return args.value ? 'true' : 'false';\n /* tslint:disable-next-line:max-line-length */\n }\n else if ((args.column.type === 'date' || args.column.type === 'dateonly' || args.column.type === 'datetime' || args.column.type === 'time') && args.column.format !== undefined) {\n if (typeof args.value === 'string') {\n args.value = new Date(args.value);\n }\n if (typeof args.column.format === 'string') {\n var format = void 0;\n var cFormat = args.column.format;\n if (args.column.type === 'date' || args.column.type === 'dateonly') {\n format = { type: 'date', skeleton: cFormat };\n }\n else if (args.column.type === 'time') {\n format = { type: 'time', skeleton: cFormat };\n }\n else {\n format = { type: 'dateTime', skeleton: cFormat };\n }\n return this.returnFormattedValue(args, format);\n }\n else {\n if (args.column.format instanceof Object && args.column.format.type === undefined) {\n return (args.value.toString());\n }\n else {\n var customFormat = void 0;\n if (args.column.type === 'date' || args.column.type === 'dateonly') {\n customFormat = {\n type: args.column.format.type,\n format: args.column.format.format, skeleton: args.column.format.skeleton\n };\n }\n else if (args.column.type === 'time') {\n customFormat = { type: 'time', format: args.column.format.format, skeleton: args.column.format.skeleton };\n }\n else {\n customFormat = { type: 'dateTime', format: args.column.format.format, skeleton: args.column.format.skeleton };\n }\n return this.returnFormattedValue(args, customFormat);\n }\n }\n }\n else {\n if ((!isNullOrUndefined(args.column.type) && !isNullOrUndefined(args.value)) || !isNullOrUndefined(args.value)) {\n return (args.value).toString();\n }\n else {\n return '';\n }\n }\n };\n return ExportValueFormatter;\n}());\nexport { ExportValueFormatter };\n","import * as events from '../base/constant';\nimport { Workbook } from '@syncfusion/ej2-excel-export';\nimport { isNullOrUndefined, getEnumValue, compile, getValue, detach, extend } from '@syncfusion/ej2-base';\nimport { Data } from '../actions/data';\nimport { ExportHelper, ExportValueFormatter } from './export-helper';\nimport { SummaryModelGenerator, GroupSummaryModelGenerator, CaptionSummaryModelGenerator } from '../services/summary-model-generator';\nimport { CellType } from '../base/enum';\nimport { Query, DataManager } from '@syncfusion/ej2-data';\nimport { getPrintGridModel, getUid, isExportColumns, updateColumnTypeForExportColumns, prepareColumns, measureColumnDepth } from '../base/util';\nimport { defaultCurrencyCode } from '@syncfusion/ej2-base';\n/**\n * @hidden\n * `ExcelExport` module is used to handle the Excel export action.\n */\nvar ExcelExport = /** @class */ (function () {\n /**\n * Constructor for the Grid Excel Export module.\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {ServiceLocator} locator - specifies the ServiceLocator\n * @hidden\n */\n function ExcelExport(parent, locator) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.book = {};\n this.workSheet = [];\n this.rows = [];\n this.columns = [];\n this.styles = [];\n this.rowLength = 1;\n this.expType = 'AppendToSheet';\n this.includeHiddenColumn = false;\n this.isCsvExport = false;\n this.isChild = false;\n this.isElementIdChanged = false;\n this.gridPool = {};\n this.sheet = {};\n this.grpFooterTemplates = [];\n this.footerTemplates = [];\n this.aggIndex = 0;\n this.totalAggregates = 0;\n this.parent = parent;\n this.helper = new ExportHelper(parent);\n this.locator = locator;\n this.l10n = this.locator.getService('localization');\n }\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n */\n ExcelExport.prototype.getModuleName = function () {\n return 'ExcelExport';\n };\n ExcelExport.prototype.init = function (gObj) {\n if (gObj.element !== null && gObj.element.id === '') {\n gObj.element.id = new Date().toISOString();\n this.isElementIdChanged = true;\n }\n this.parent = gObj;\n if (this.parent.isDestroyed) {\n return;\n }\n this.isExporting = undefined;\n this.book = {};\n this.workSheet = [];\n this.rows = [];\n this.columns = [];\n this.styles = [];\n this.rowLength = 1;\n this.footer = undefined;\n this.expType = 'AppendToSheet';\n this.includeHiddenColumn = false;\n this.exportValueFormatter = new ExportValueFormatter(gObj.locale);\n gObj.id = getUid('main-grid');\n this.gridPool[gObj.id] = false;\n };\n /**\n * Export Grid to Excel file.\n *\n * @param {IGrid} grid - Defines the grid.\n * @param {exportProperties} exportProperties - Defines the export properties of the Grid.\n * @param {isMultipleExport} isMultipleExport - Defines is multiple Grid's are exported.\n * @param {Workbook} workbook - Defined the Workbook if multiple Grid is exported.\n * @param {boolean} isCsv - true if export to CSV.\n * @param {boolean} isBlob - true if isBlob is enabled.\n * @returns {Promise
} - Returns the map for export.\n */\n // eslint-disable-next-line\n ExcelExport.prototype.Map = function (grid, exportProperties, isMultipleExport, workbook, isCsv, isBlob) {\n var gObj = grid;\n var cancel = 'cancel';\n var isBlb = 'isBlob';\n var Child = 'isChild';\n var csv = 'isCsv';\n var workbk = 'workbook';\n var isMultiEx = 'isMultipleExport';\n this.gridPool = {};\n if ((grid.childGrid || grid.detailTemplate) && !(!isNullOrUndefined(exportProperties) && exportProperties.hierarchyExportMode === 'None')) {\n grid.expandedRows = getPrintGridModel(grid).expandedRows;\n }\n var args = {\n requestType: 'beforeExcelExport', gridObject: gObj, cancel: false,\n isMultipleExport: isMultipleExport, workbook: workbook, isCsv: isCsv, isBlob: isBlob, isChild: this.isChild,\n grpFooterTemplates: this.grpFooterTemplates\n };\n gObj.trigger(events.beforeExcelExport, args);\n if (args[\"\" + cancel]) {\n return new Promise(function (resolve) {\n return resolve();\n });\n }\n this.parent.log('exporting_begin', this.getModuleName());\n this.data = new Data(gObj);\n this.isExporting = true;\n this.isBlob = args[\"\" + isBlb];\n this.isChild = args[\"\" + Child];\n this.grpFooterTemplates = args['grpFooterTemplates'];\n if (args[\"\" + csv]) {\n this.isCsvExport = args[\"\" + csv];\n }\n else {\n this.isCsvExport = false;\n }\n if (isExportColumns(exportProperties)) {\n updateColumnTypeForExportColumns(exportProperties, gObj);\n }\n return this.processRecords(gObj, exportProperties, args[\"\" + isMultiEx], args[\"\" + workbk]);\n };\n ExcelExport.prototype.exportingSuccess = function (resolve) {\n this.isExporting = false;\n this.parent.trigger(events.excelExportComplete, this.isBlob ? { promise: this.blobPromise } : { gridInstance: this.parent });\n this.parent.log('exporting_complete', this.getModuleName());\n resolve(this.book);\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ExcelExport.prototype.processRecords = function (gObj, exportProperties, isMultipleExport, workbook) {\n var _this = this;\n if (gObj.allowGrouping && gObj.groupSettings.enableLazyLoading && gObj.groupSettings.columns.length) {\n if (isNullOrUndefined(exportProperties)) {\n exportProperties = { hierarchyExportMode: 'All' };\n }\n else {\n exportProperties.hierarchyExportMode = exportProperties.hierarchyExportMode || 'All';\n }\n }\n if (!isNullOrUndefined(exportProperties) && !isNullOrUndefined(exportProperties.dataSource)) {\n exportProperties.dataSource = exportProperties.dataSource instanceof DataManager ?\n exportProperties.dataSource : new DataManager(exportProperties.dataSource);\n var query_1 = exportProperties.query ? exportProperties.query : new Query();\n if (isNullOrUndefined(query_1.isCountRequired) || gObj.aggregates) {\n query_1.isCountRequired = true;\n }\n return new Promise(function (resolve) {\n var dataManager = exportProperties.dataSource.executeQuery(query_1);\n dataManager.then(function (r) {\n _this.init(gObj);\n _this.processInnerRecords(gObj, exportProperties, isMultipleExport, workbook, r).then(function () {\n _this.exportingSuccess(resolve);\n });\n });\n });\n }\n else if (!isNullOrUndefined(exportProperties) && exportProperties.exportType === 'CurrentPage') {\n return new Promise(function (resolve) {\n _this.init(gObj);\n _this.processInnerRecords(gObj, exportProperties, isMultipleExport, workbook, _this.parent.getCurrentViewRecords());\n _this.exportingSuccess(resolve);\n });\n }\n else {\n var allPromise_1 = [];\n allPromise_1.push(this.data.getData({}, ExportHelper.getQuery(gObj, this.data)));\n allPromise_1.push(this.helper.getColumnData(gObj));\n return new Promise(function (resolve, reject) {\n Promise.all(allPromise_1).then(function (e) {\n _this.init(gObj);\n _this.processInnerRecords(gObj, exportProperties, isMultipleExport, workbook, e[0]).then(function () {\n _this.exportingSuccess(resolve);\n });\n }).catch(function (e) {\n reject(_this.book);\n _this.parent.trigger(events.actionFailure, e);\n });\n });\n }\n };\n ExcelExport.prototype.processInnerRecords = function (gObj, exportProperties, \n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n isMultipleExport, workbook, r) {\n var _this = this;\n this.groupedColLength = gObj.groupSettings.columns.length;\n var blankRows = 5;\n var separator;\n var rows = [];\n var colDepth = measureColumnDepth(gObj.columns);\n var isExportPropertiesPresent = !isNullOrUndefined(exportProperties);\n if (isExportPropertiesPresent && !isNullOrUndefined(exportProperties.multipleExport)) {\n this.expType = (!isNullOrUndefined(exportProperties.multipleExport.type) ? exportProperties.multipleExport.type : 'AppendToSheet');\n if (!isNullOrUndefined(exportProperties.multipleExport.blankRows)) {\n blankRows = exportProperties.multipleExport.blankRows;\n }\n }\n if (isNullOrUndefined(workbook)) {\n this.workSheet = [];\n this.rows = [];\n this.columns = [];\n this.styles = [];\n this.sheet.images = [];\n }\n else if (this.expType === 'NewSheet') {\n this.workSheet = workbook.worksheets;\n this.rows = [];\n this.columns = [];\n this.sheet.images = [];\n this.styles = workbook.styles;\n }\n else {\n this.workSheet = [];\n this.rows = workbook.worksheets[0].rows;\n this.columns = workbook.worksheets[0].columns;\n this.styles = workbook.styles;\n this.sheet.images = workbook.worksheets[0].images;\n this.rowLength = (this.rows[this.rows.length - 1].index + blankRows);\n this.rowLength++;\n }\n if (isExportPropertiesPresent) {\n if (!isNullOrUndefined(isMultipleExport)) {\n if (!isNullOrUndefined(exportProperties.header) && (isMultipleExport || this.expType === 'NewSheet')) {\n this.processExcelHeader(JSON.parse(JSON.stringify(exportProperties.header)));\n }\n if (!isNullOrUndefined(exportProperties.footer)) {\n if (this.expType === 'AppendToSheet') {\n if (!isMultipleExport) {\n this.footer = JSON.parse(JSON.stringify(exportProperties.footer));\n }\n }\n else {\n this.footer = JSON.parse(JSON.stringify(exportProperties.footer));\n }\n }\n }\n else {\n if (!isNullOrUndefined(exportProperties.header)) {\n this.processExcelHeader(JSON.parse(JSON.stringify(exportProperties.header)));\n }\n if (!isNullOrUndefined(exportProperties.footer)) {\n this.footer = JSON.parse(JSON.stringify(exportProperties.footer));\n }\n }\n }\n this.includeHiddenColumn = (isExportPropertiesPresent ? exportProperties.includeHiddenColumn : false);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n return new Promise(function (resolve, reject) {\n gObj.childGridLevel = 0;\n rows = _this.processGridExport(gObj, exportProperties, r);\n _this.globalResolve = resolve;\n _this.gridPool[gObj.id] = true;\n _this.helper.checkAndExport(_this.gridPool, _this.globalResolve);\n }).then(function () {\n var organisedRows = [];\n _this.organiseRows(rows, rows[0].index, organisedRows);\n _this.rows = _this.rows.concat(organisedRows);\n //footer template add\n if (!isNullOrUndefined(_this.footer)) {\n if ((_this.expType === 'AppendToSheet' && !isMultipleExport) || (_this.expType === 'NewSheet')) {\n _this.processExcelFooter(_this.footer);\n }\n }\n if (_this.columns.length > 0) {\n _this.sheet.columns = _this.columns;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _this.sheet.rows = _this.rows;\n _this.sheet.enableRtl = _this.parent.enableRtl;\n if (_this.parent.allowFiltering && gObj.getVisibleColumns().length && isExportPropertiesPresent &&\n exportProperties.enableFilter) {\n var headerRowLen = exportProperties.header ? exportProperties.header.headerRows ||\n exportProperties.header.rows.length : 0;\n var autoFilters = {\n row: colDepth + headerRowLen, column: _this.groupedColLength ? _this.groupedColLength + 1 :\n _this.sheet.columns[0].index, lastRow: _this.sheet.rows.length, lastColumn: _this.sheet.columns.length\n };\n _this.sheet.autoFilters = autoFilters;\n }\n _this.workSheet.push(_this.sheet);\n _this.book.worksheets = _this.workSheet;\n _this.book.styles = _this.styles;\n gObj.notify('finalPageSetup', _this.book);\n if (!isMultipleExport) {\n if (_this.isCsvExport) {\n if (isExportPropertiesPresent && !isNullOrUndefined(exportProperties.separator)\n && exportProperties.separator !== ',') {\n separator = exportProperties.separator;\n }\n var book = new Workbook(_this.book, 'csv', gObj.locale, defaultCurrencyCode, separator);\n if (!_this.isBlob) {\n if (isExportPropertiesPresent && exportProperties.fileName) {\n book.save(exportProperties.fileName);\n }\n else {\n book.save('Export.csv');\n }\n }\n else {\n _this.blobPromise = book.saveAsBlob('text/csv');\n }\n }\n else {\n var book = new Workbook(_this.book, 'xlsx', gObj.locale, defaultCurrencyCode);\n if (!_this.isBlob) {\n if (isExportPropertiesPresent && exportProperties.fileName) {\n book.save(exportProperties.fileName);\n }\n else {\n book.save('Export.xlsx');\n }\n }\n else {\n _this.blobPromise = book.saveAsBlob('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');\n }\n }\n if (_this.isElementIdChanged) {\n gObj.element.id = '';\n }\n delete gObj.expandedRows;\n }\n return workbook;\n });\n };\n ExcelExport.prototype.organiseRows = function (rows, initialIndex, organisedRows) {\n if (!rows.length) {\n return initialIndex;\n }\n for (var i = 0; i < rows.length; i++) {\n var row = rows[parseInt(i.toString(), 10)];\n var childRows = row.childRows;\n if (childRows) {\n row.index = initialIndex++;\n delete row.childRows;\n organisedRows.push(row);\n initialIndex = this.organiseRows(childRows, initialIndex, organisedRows);\n }\n else {\n row.index = initialIndex++;\n organisedRows.push(row);\n }\n }\n return initialIndex;\n };\n ExcelExport.prototype.processGridExport = function (gObj, exportProperties, r) {\n var excelRows = [];\n if (!isNullOrUndefined(exportProperties) && !isNullOrUndefined(exportProperties.theme)) {\n this.theme = exportProperties.theme;\n }\n if ((gObj.childGrid || gObj.detailTemplate) && !isNullOrUndefined(exportProperties)) {\n gObj.hierarchyPrintMode = exportProperties.hierarchyExportMode || 'Expanded';\n }\n var helper = new ExportHelper(gObj, this.helper.getForeignKeyData());\n var gColumns = isExportColumns(exportProperties) ?\n prepareColumns(exportProperties.columns, gObj.enableColumnVirtualization) :\n helper.getGridExportColumns(gObj.columns);\n var headerRow = helper.getHeaders(gColumns, this.includeHiddenColumn);\n var groupIndent = gObj.groupSettings.columns.length ? gObj.groupSettings.columns.length - 1 : 0;\n excelRows = this.processHeaderContent(gObj, headerRow, groupIndent, excelRows);\n if (!isNullOrUndefined(exportProperties) && Object.keys(exportProperties).length &&\n isNullOrUndefined(exportProperties.dataSource)) {\n if (exportProperties.exportType === 'CurrentPage' && (!gObj.groupSettings.enableLazyLoading\n || gObj.getDataModule().isRemote())) {\n excelRows = this.processRecordContent(gObj, r, headerRow, exportProperties, gObj.currentViewData, excelRows, helper);\n }\n else if (gObj.groupSettings.enableLazyLoading && !gObj.getDataModule().isRemote()) {\n var groupData = void 0;\n if (!isNullOrUndefined(exportProperties) && Object.keys(exportProperties).length) {\n var isAllPage = exportProperties.exportType === 'CurrentPage'\n ? false : true;\n var groupQuery = gObj.getDataModule().generateQuery(isAllPage);\n var lazyloadData = gObj.getDataModule().dataManager.executeLocal(groupQuery);\n groupQuery.lazyLoad = [];\n var fName = 'fn';\n if (!isAllPage) {\n for (var i = 0; i < groupQuery.queries.length; i++) {\n if (groupQuery.queries[parseInt(i.toString(), 10)]['' + fName] === 'onPage') {\n groupQuery.queries[parseInt(i.toString(), 10)].e.pageSize = lazyloadData.reduce(function (acc, curr) { return acc + curr['count']; }, 0);\n }\n }\n }\n if (exportProperties.hierarchyExportMode === 'All') {\n groupData = gObj.getDataModule().dataManager.executeLocal(groupQuery);\n }\n else if (exportProperties.hierarchyExportMode === 'Expanded' || exportProperties.hierarchyExportMode === 'None' ||\n isNullOrUndefined(exportProperties.hierarchyExportMode)) {\n groupData = gObj.getDataModule().dataManager.executeLocal(groupQuery);\n var lazQuery = this.parent.contentModule.lazyLoadQuery;\n for (var i = 0; i < lazQuery.length; i++) {\n var query = lazQuery[parseInt(i.toString(), 10)];\n var where = query[0];\n for (var j = 0; j < groupData.length; j++) {\n var data = groupData[parseInt(j.toString(), 10)];\n if (data['key'] === where['value']) {\n lazyloadData[parseInt(i.toString(), 10)] = groupData[parseInt(j.toString(), 10)];\n }\n }\n }\n groupData = lazyloadData;\n }\n }\n else {\n groupData = gObj.currentViewData;\n }\n excelRows = this.processRecordContent(gObj, r, headerRow, exportProperties, groupData, excelRows, helper);\n }\n else {\n excelRows = this.processRecordContent(gObj, r, headerRow, exportProperties, undefined, excelRows, helper);\n }\n }\n else {\n excelRows = this.processRecordContent(gObj, r, headerRow, exportProperties, undefined, excelRows, helper);\n }\n gObj.notify(events.exportDataBound, { excelRows: excelRows, type: 'excel' });\n this.capTemplate = undefined;\n this.footerTemplates = [];\n this.grpFooterTemplates = [];\n this.aggIndex = 0;\n this.totalAggregates = 0;\n return excelRows;\n };\n ExcelExport.prototype.processRecordContent = function (gObj, returnType, headerRow, exportProperties, currentViewRecords, excelRow, helper) {\n var record;\n if (!isNullOrUndefined(currentViewRecords) && currentViewRecords.length) {\n record = currentViewRecords;\n }\n else {\n record = returnType.result;\n }\n if (!isNullOrUndefined(record.level)) {\n this.processGroupedRows(gObj, record, headerRow, record.level, 0, exportProperties, excelRow, helper);\n }\n else {\n this.processRecordRows(gObj, record, headerRow, 0, 0, exportProperties, excelRow, helper);\n }\n if (!isNullOrUndefined(returnType.aggregates)) {\n if (!isNullOrUndefined(currentViewRecords) && !this.parent.groupSettings.enableLazyLoading) {\n this.processAggregates(gObj, returnType.result, excelRow, currentViewRecords);\n }\n else {\n var result = returnType.result.GroupGuid ?\n returnType.result.records : returnType.result;\n this.processAggregates(gObj, result, excelRow);\n }\n }\n return excelRow;\n };\n ExcelExport.prototype.processGroupedRows = function (\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n gObj, dataSource, headerRow, level, startIndex, excelExportProperties, excelRows, helper) {\n for (var _i = 0, dataSource_1 = dataSource; _i < dataSource_1.length; _i++) {\n var item = dataSource_1[_i];\n var cells = [];\n var index = 1;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var cell = {};\n cell.index = (index + level) - 1;\n var col = gObj.getColumnByField(item.field);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var args = {\n value: item.key,\n column: col,\n style: undefined,\n isForeignKey: col.isForeignColumn()\n };\n var value = gObj.getColumnByField(item.field).headerText +\n ': ' + (!col.enableGroupByFormat ? this.exportValueFormatter.formatCellValue(args) : item.key) + ' - ';\n if (item.count > 1) {\n value += item.count + ' items';\n }\n else {\n value += item.count + ' item';\n }\n var cArgs = { captionText: value, type: this.isCsvExport ? 'CSV' : 'Excel', data: item };\n this.parent.trigger(events.exportGroupCaption, cArgs);\n cell.value = cArgs.captionText;\n cell.style = this.getCaptionThemeStyle(this.theme);\n if (!isNullOrUndefined(cArgs.style)) {\n cell.style = this.mergeOptions(cell.style, cArgs.style);\n }\n var captionModelGen = new CaptionSummaryModelGenerator(gObj);\n var groupCaptionSummaryRows = captionModelGen.generateRows(item);\n this.fillAggregates(gObj, groupCaptionSummaryRows, (dataSource.level + dataSource.childLevels) - 1, excelRows, this.rowLength);\n cells.push(cell);\n if (excelRows[excelRows.length - 1].cells.length > 0) {\n var lIndex = dataSource.level + dataSource.childLevels + groupCaptionSummaryRows[0].cells.length;\n var hIndex = 0;\n for (var _a = 0, _b = excelRows[excelRows.length - 1].cells; _a < _b.length; _a++) {\n var tCell = _b[_a];\n if (tCell.index < lIndex) {\n lIndex = tCell.index;\n }\n if (tCell.index > hIndex) {\n hIndex = tCell.index;\n }\n if (cells[cells.length - 1].index !== tCell.index) {\n cells.push(tCell);\n }\n }\n if ((lIndex - cell.index) > 1) {\n cell.colSpan = lIndex - cell.index;\n }\n while (hIndex < (headerRow.columns.length + level + dataSource.childLevels)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var sCell = {};\n sCell.index = (hIndex + 1);\n sCell.style = this.getCaptionThemeStyle(this.theme);\n cells.push(sCell);\n hIndex++;\n }\n }\n else {\n var span = 0;\n //Calculation for column span when group caption dont have aggregates\n for (var _c = 0, _d = headerRow.columns; _c < _d.length; _c++) {\n var col_1 = _d[_c];\n if (col_1.visible) {\n span++;\n }\n }\n cell.colSpan = (dataSource.childLevels + span);\n }\n excelRows[excelRows.length - 1].cells = cells;\n this.rowLength++;\n if (this.groupedColLength < 8 && level > 1) {\n var grouping = { outlineLevel: level - 1, isCollapsed: true };\n excelRows[excelRows.length - 1].grouping = grouping;\n }\n if (!isNullOrUndefined(dataSource.childLevels) && dataSource.childLevels > 0) {\n this.processGroupedRows(gObj, item.items, headerRow, item.items.level, startIndex, excelExportProperties, excelRows, helper);\n this.processAggregates(gObj, item, excelRows, undefined, (level - 1) + dataSource.childLevels, true);\n }\n else {\n startIndex = this.processRecordRows(gObj, item.items, headerRow, (level - 1), startIndex, excelExportProperties, excelRows, helper);\n this.processAggregates(gObj, item, excelRows, undefined, (level - 1), true);\n }\n }\n };\n ExcelExport.prototype.processRecordRows = function (gObj, record, headerRow, level, startIndex, excelExportProperties, excelRows, helper) {\n var index = 1;\n var cells = [];\n var columns = headerRow.columns;\n var rows = helper.getGridRowModel(columns, record, gObj, startIndex);\n for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {\n var row = rows_1[_i];\n cells = [];\n startIndex++;\n index = 1;\n var templateRowHeight = void 0;\n for (var c = 0, len = row.cells.length; c < len; c++) {\n var gCell = row.cells[parseInt(c.toString(), 10)];\n if (gCell.cellType !== CellType.Data) {\n continue;\n }\n var column = gCell.column;\n var field = column.field;\n var cellValue = !isNullOrUndefined(field) ? column.valueAccessor(field, row.data, column) : '';\n var value = !isNullOrUndefined(cellValue) ? cellValue : '';\n if (column.type === 'dateonly' && typeof value === 'string' && value) {\n var arr = value.split(/[^0-9.]/);\n value = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10));\n }\n var fkData = void 0;\n if (column.isForeignColumn && column.isForeignColumn()) {\n fkData = helper.getFData(value, column);\n value = getValue(column.foreignKeyValue, fkData);\n }\n if (!isNullOrUndefined(value)) {\n var cell = {};\n var idx = index + level + gObj.childGridLevel;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var excelCellArgs = {\n data: row.data, column: column, foreignKeyData: fkData,\n value: value, style: undefined, colSpan: 1, cell: cell\n };\n gObj.trigger(events.excelQueryCellInfo, excelCellArgs);\n if (!isNullOrUndefined(excelCellArgs.image) && !isNullOrUndefined(excelCellArgs.image.base64)) {\n templateRowHeight = this.setImage(excelCellArgs, idx);\n if (excelCellArgs.image.height && excelCellArgs.value !== '') {\n templateRowHeight += 30;\n }\n }\n if (!isNullOrUndefined(excelCellArgs.hyperLink)) {\n excelCellArgs.cell.hyperlink = { target: excelCellArgs.hyperLink.target };\n excelCellArgs.value = excelCellArgs.hyperLink.displayText || excelCellArgs.value;\n }\n cell = excelCellArgs.cell;\n cell.index = idx;\n cell.value = excelCellArgs.value;\n if (excelCellArgs.data === '' && gObj.childGridLevel && index === 1) {\n var style = {};\n style.hAlign = 'left';\n excelCellArgs = { style: style };\n cell.colSpan = gObj.getVisibleColumns().length;\n cell.value = this.l10n.getConstant('EmptyRecord');\n }\n if (excelCellArgs.colSpan > 1) {\n cell.colSpan = excelCellArgs.colSpan;\n }\n if (!isNullOrUndefined(excelCellArgs.style)) {\n var styleIndex = this.getColumnStyle(gObj, index + level);\n cell.style = this.mergeOptions(this.styles[parseInt(styleIndex.toString(), 10)], excelCellArgs.style);\n }\n else {\n cell.style = { name: gObj.element.id + 'column' + (index + level) };\n }\n cells.push(cell);\n }\n index++;\n }\n var excelRow = { index: this.rowLength++, cells: cells };\n if (!isNullOrUndefined(templateRowHeight)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n excelRow.height = templateRowHeight;\n }\n if (this.groupedColLength && this.groupedColLength < 8 && (level + 1) > 0) {\n excelRow.grouping = { outlineLevel: (level + 1), isCollapsed: true };\n excelRows.push(excelRow);\n }\n else {\n excelRows.push(excelRow);\n }\n if ((row.isExpand || this.isChild) && (!isNullOrUndefined(gObj.childGrid) || !isNullOrUndefined(gObj.detailTemplate))) {\n if (!isNullOrUndefined(gObj.childGrid)) {\n gObj.isPrinting = true;\n var exportType = (!isNullOrUndefined(excelExportProperties) && excelExportProperties.exportType) ?\n excelExportProperties.exportType : 'AllPages';\n var returnVal = this.helper.createChildGrid(gObj, row, exportType, this.gridPool);\n var childGridObj = returnVal.childGrid;\n var element = returnVal.element;\n childGridObj.actionFailure =\n helper.failureHandler(this.gridPool, childGridObj, this.globalResolve);\n childGridObj.childGridLevel = gObj.childGridLevel + 1;\n var args = { childGrid: childGridObj, row: row, exportProperties: excelExportProperties };\n this.parent.trigger(events.exportDetailDataBound, args);\n childGridObj.beforeDataBound = this.childGridCell(excelRow, childGridObj, excelExportProperties, row);\n childGridObj.appendTo(element);\n }\n else {\n var args = { parentRow: row, row: excelRow, value: {}, action: 'excelexport', gridInstance: gObj };\n this.parent.trigger(events.exportDetailTemplate, args);\n excelRow.childRows = this.processDetailTemplate(args);\n }\n }\n gObj.notify(events.exportRowDataBound, { rowObj: row, type: 'excel', excelRows: excelRows });\n }\n return startIndex;\n };\n ExcelExport.prototype.processDetailTemplate = function (templateData) {\n var _this = this;\n var rows = [];\n var templateRowHeight;\n var detailIndent = 2;\n var detailCellIndex;\n if (templateData.value.columnHeader || templateData.value.rows) {\n var processCell_1 = function (currentCell, isHeader) {\n var cell = {};\n if (isNullOrUndefined(currentCell.index)) {\n currentCell.index = detailCellIndex;\n detailCellIndex++;\n }\n cell.index = currentCell.index + detailIndent;\n if (!isNullOrUndefined(currentCell.value)) {\n cell.value = currentCell.value;\n }\n if (!isNullOrUndefined(currentCell.colSpan)) {\n cell.colSpan = currentCell.colSpan;\n }\n if (!isNullOrUndefined(currentCell.rowSpan)) {\n cell.rowSpan = currentCell.rowSpan;\n }\n if (isHeader) {\n cell.style = _this.getHeaderThemeStyle(_this.theme);\n }\n else {\n cell.style = _this.getRecordThemeStyle(_this.theme);\n }\n if (!isNullOrUndefined(currentCell.style)) {\n var cellStyle = {\n fontColor: currentCell.style.fontColor,\n fontName: currentCell.style.fontName,\n fontSize: currentCell.style.fontSize,\n hAlign: currentCell.style.excelHAlign,\n vAlign: currentCell.style.excelVAlign,\n rotation: currentCell.style.excelRotation,\n bold: currentCell.style.bold,\n indent: currentCell.style.indent,\n italic: currentCell.style.italic,\n underline: currentCell.style.underline,\n backColor: currentCell.style.backColor,\n wrapText: currentCell.style.wrapText,\n borders: currentCell.style.excelBorders,\n numberFormat: currentCell.style.excelNumberFormat,\n type: currentCell.style.excelType,\n strikeThrough: currentCell.style.strikeThrough\n };\n cell.style = _this.mergeOptions(cellStyle, cell.style);\n }\n if (!isNullOrUndefined(currentCell.image) && !isNullOrUndefined(currentCell.image.base64)) {\n if (currentCell.rowSpan > 1) {\n _this.setImage(currentCell, cell.index);\n }\n else {\n templateRowHeight = _this.setImage(currentCell, cell.index);\n if (currentCell.image.height && currentCell.value !== '') {\n templateRowHeight += 30;\n }\n }\n }\n if (!isNullOrUndefined(currentCell.hyperLink)) {\n cell.hyperlink = { target: currentCell.hyperLink.target };\n cell.value = currentCell.hyperLink.displayText;\n }\n return cell;\n };\n var processRow = function (currentRow, isHeader) {\n var excelDetailCells = [];\n detailCellIndex = 0;\n for (var j = 0; j < currentRow.cells.length; j++) {\n var currentCell = currentRow.cells[parseInt(j.toString(), 10)];\n var detailCell = processCell_1(currentCell, isHeader);\n excelDetailCells.push(detailCell);\n }\n var row = { index: _this.rowLength++, cells: excelDetailCells };\n if (!isNullOrUndefined(templateRowHeight)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n row.height = templateRowHeight;\n templateRowHeight = null;\n }\n rows.push(row);\n };\n if (templateData.value.columnHeader) {\n for (var i = 0; i < templateData.value.columnHeader.length; i++) {\n processRow(templateData.value.columnHeader[parseInt(i.toString(), 10)], true);\n }\n }\n if (templateData.value.rows) {\n for (var i = 0; i < templateData.value.rows.length; i++) {\n processRow(templateData.value.rows[parseInt(i.toString(), 10)]);\n }\n }\n }\n else if (templateData.value.image) {\n templateRowHeight = this.setImage(templateData.value, detailIndent);\n var row = {\n index: this.rowLength++,\n cells: [{\n index: detailIndent,\n style: this.getRecordThemeStyle(this.theme)\n }]\n };\n if (!isNullOrUndefined(templateRowHeight)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n row.height = templateRowHeight;\n templateRowHeight = null;\n }\n rows.push(row);\n }\n else if (templateData.value.text) {\n var row = {\n index: this.rowLength++,\n cells: [{\n index: detailIndent,\n value: templateData.value.text,\n style: this.getRecordThemeStyle(this.theme)\n }]\n };\n rows.push(row);\n }\n else if (templateData.value.hyperLink) {\n var row = {\n index: this.rowLength++,\n cells: [{\n index: 2,\n hyperlink: { target: templateData.value.hyperLink.target },\n value: templateData.value.hyperLink.displayText,\n style: this.getRecordThemeStyle(this.theme)\n }]\n };\n rows.push(row);\n }\n for (var i = 0; i < rows.length; i++) {\n rows[parseInt(i.toString(), 10)].grouping = {\n outlineLevel: 1, isCollapsed: !templateData.parentRow.isExpand, isHidden: !templateData.parentRow.isExpand\n };\n }\n return rows;\n };\n ExcelExport.prototype.setImage = function (args, idx) {\n if (isNullOrUndefined(this.sheet.images)) {\n this.sheet.images = [];\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var excelImage = {\n image: args.image.base64, row: this.rowLength, column: idx,\n lastRow: this.rowLength, lastColumn: idx\n };\n if (args.image.width && args.image.height) {\n excelImage.width = args.image.width;\n excelImage.height = args.image.height;\n }\n this.sheet.images.push(excelImage);\n this.columns[idx - 1].width = args.image.width || this.columns[idx - 1].width;\n return args.image.height || 50;\n };\n ExcelExport.prototype.childGridCell = function (excelRow, childGridObj, excelExportProps, gRow) {\n var _this = this;\n return function (result) {\n childGridObj.beforeDataBound = null;\n result.cancel = true;\n if (result.result.length === 0) {\n result.result = [''];\n }\n excelRow.childRows = _this.processGridExport(childGridObj, excelExportProps, result);\n var intent = _this.parent.groupSettings.columns.length;\n var rows = excelRow.childRows;\n for (var i = 0; i < rows.length; i++) {\n rows[parseInt(i.toString(), 10)].grouping = { outlineLevel: intent + childGridObj\n .childGridLevel, isCollapsed: !gRow.isExpand, isHidden: !gRow.isExpand };\n }\n childGridObj.destroy();\n detach(childGridObj.element);\n _this.gridPool[childGridObj.id] = true;\n _this.helper.checkAndExport(_this.gridPool, _this.globalResolve);\n return excelRow;\n };\n };\n ExcelExport.prototype.processAggregates = function (gObj, rec, excelRows, currentViewRecords, indent, byGroup) {\n var summaryModel = new SummaryModelGenerator(gObj);\n var columns = summaryModel.getColumns();\n columns = columns.filter(function (col) { return isNullOrUndefined(col.commands) && col.type !== 'checkbox'; });\n if (gObj.aggregates.length && this.parent !== gObj) {\n gObj.aggregateModule.prepareSummaryInfo();\n }\n var data = undefined;\n if (!isNullOrUndefined(currentViewRecords)) {\n data = currentViewRecords;\n }\n else {\n data = rec;\n }\n if (indent === undefined) {\n indent = 0;\n }\n if (gObj.groupSettings.columns.length > 0 && byGroup) {\n var groupSummaryModel = new GroupSummaryModelGenerator(gObj);\n var groupSummaryRows = groupSummaryModel.generateRows(data, { level: data.level });\n if (groupSummaryRows.length > 0) {\n excelRows = this.fillAggregates(gObj, groupSummaryRows, indent, excelRows);\n }\n }\n else {\n indent = gObj.groupSettings.columns.length > 0 && !byGroup ? gObj.groupSettings.columns.length : indent;\n var sRows = summaryModel.generateRows(data, rec.aggregates, null, null, columns);\n if (sRows.length > 0 && !byGroup) {\n indent = gObj.groupSettings.columns.length ? indent - 1 : indent;\n excelRows = this.fillAggregates(gObj, sRows, indent, excelRows);\n }\n }\n return excelRows;\n };\n ExcelExport.prototype.fillAggregates = function (gObj, rows, indent, excelRows, customIndex) {\n for (var _i = 0, rows_2 = rows; _i < rows_2.length; _i++) {\n var row = rows_2[_i];\n var cells = [];\n var isEmpty = true;\n var index = 0;\n for (var _a = 0, _b = row.cells; _a < _b.length; _a++) {\n var cell = _b[_a];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var eCell = {};\n var columnsDetails = {};\n if (!isNullOrUndefined(cell.attributes.index)) {\n columnsDetails = this.parent.getColumnByIndex(cell.attributes.index);\n }\n if (cell.cellType === CellType.DetailFooterIntent || columnsDetails.type === 'checkbox') {\n continue;\n }\n if ((cell.visible || this.includeHiddenColumn)) {\n index++;\n if (cell.isDataCell) {\n isEmpty = false;\n var footerTemplate = !isNullOrUndefined(cell.column.footerTemplate);\n var groupFooterTemplate = !isNullOrUndefined(cell.column.groupFooterTemplate);\n var groupCaptionTemplate = !isNullOrUndefined(cell.column.groupCaptionTemplate);\n eCell.index = index + indent + gObj.childGridLevel;\n if (footerTemplate) {\n eCell.value = this.getAggreateValue(gObj, CellType.Summary, cell.column.footerTemplate, cell, row);\n }\n else if (groupFooterTemplate) {\n eCell.value = this.getAggreateValue(gObj, CellType.GroupSummary, cell.column.groupFooterTemplate, cell, row);\n }\n else if (groupCaptionTemplate) {\n eCell.value = this.getAggreateValue(gObj, CellType.CaptionSummary, cell.column.groupCaptionTemplate, cell, row);\n }\n else {\n for (var _c = 0, _d = Object.keys(row.data[cell.column.field]); _c < _d.length; _c++) {\n var key = _d[_c];\n if (key === cell.column.type) {\n if (!isNullOrUndefined(row.data[cell.column.field].Sum)) {\n eCell.value = row.data[cell.column.field][cell.column.field + \" - sum\"];\n }\n else if (!isNullOrUndefined(row.data[cell.column.field].Average)) {\n eCell.value = row.data[cell.column.field][cell.column.field + \" - average\"];\n }\n else if (!isNullOrUndefined(row.data[cell.column.field].Max)) {\n eCell.value = row.data[cell.column.field][cell.column.field + \" - max\"];\n }\n else if (!isNullOrUndefined(row.data[cell.column.field].Min)) {\n eCell.value = row.data[cell.column.field][cell.column.field + \" - min\"];\n }\n else if (!isNullOrUndefined(row.data[cell.column.field].Count)) {\n eCell.value = row.data[cell.column.field][cell.column.field + \" - count\"];\n }\n else if (!isNullOrUndefined(row.data[cell.column.field].TrueCount)) {\n eCell.value = row.data[cell.column.field][cell.column.field + \" - truecount\"];\n }\n else if (!isNullOrUndefined(row.data[cell.column.field].FalseCount)) {\n eCell.value = row.data[cell.column.field][cell.column.field + \" - falsecount\"];\n }\n else if (!isNullOrUndefined(row.data[cell.column.field].Custom)) {\n eCell.value = row.data[cell.column.field].Custom;\n }\n }\n }\n }\n eCell.style = this.getCaptionThemeStyle(this.theme); //{ name: gObj.element.id + 'column' + index };\n this.aggregateStyle(cell.column, eCell.style, cell.column.field);\n var gridCellStyle = cell.attributes.style;\n if (gridCellStyle.textAlign) {\n eCell.style.hAlign = gridCellStyle.textAlign.toLowerCase();\n }\n var args = {\n row: row,\n type: footerTemplate ? 'Footer' : groupFooterTemplate ? 'GroupFooter' : 'GroupCaption',\n style: eCell,\n cell: cell\n };\n this.parent.trigger(events.excelAggregateQueryCellInfo, args);\n cells.push(eCell);\n }\n else {\n if (customIndex === undefined) {\n eCell.index = index + indent + gObj.childGridLevel;\n eCell.style = this.getCaptionThemeStyle(this.theme); //{ name: gObj.element.id + 'column' + index };\n cells.push(eCell);\n }\n }\n }\n }\n if (!isNullOrUndefined(customIndex)) {\n excelRows.push({ index: customIndex, cells: cells });\n }\n else {\n var row_1 = {};\n var dummyOutlineLevel = 'outlineLevel';\n var dummyGrouping = 'grouping';\n if (this.groupedColLength < 8 && this.groupedColLength > 0 && !(gObj.groupSettings.enableLazyLoading && isNullOrUndefined(excelRows[excelRows.length - 1][\"\" + dummyGrouping]))) {\n var level = excelRows[excelRows.length - 1][\"\" + dummyGrouping][\"\" + dummyOutlineLevel];\n var grouping = { outlineLevel: level, isCollapsed: true };\n row_1 = { index: this.rowLength++, cells: cells, grouping: grouping };\n }\n else {\n row_1 = { index: this.rowLength++, cells: cells };\n }\n if (!isEmpty) {\n excelRows.push(row_1);\n }\n }\n }\n return excelRows;\n };\n ExcelExport.prototype.aggregateStyle = function (col, style, field) {\n var column = this.parent.getColumnByField(field);\n if (typeof col.format === 'object') {\n var format = col.format;\n style.numberFormat = !isNullOrUndefined(format.format) ? format.format : format.skeleton;\n if (!isNullOrUndefined(format.type)) {\n style.type = format.type.toLowerCase();\n }\n }\n else {\n style.numberFormat = col.format;\n }\n if (!isNullOrUndefined(column) && isNullOrUndefined(style.type)) {\n style.type = column.type.toLowerCase();\n }\n };\n ExcelExport.prototype.getAggreateValue = function (gObj, cellType, template, cell, row) {\n var templateFn = {};\n templateFn[getEnumValue(CellType, cell.cellType)] = compile(template);\n var txt;\n var data = row.data[cell.column.field ? cell.column.field : cell.column.columnName];\n if ((this.parent.isReact || this.parent.isVue || this.parent.isVue3 || this.parent.isAngular) &&\n !(typeof cell.column.footerTemplate === 'string' || typeof cell.column.groupFooterTemplate === 'string' || typeof cell.column.groupCaptionTemplate === 'string')) {\n txt = data[(cell.column.type)];\n return !isNullOrUndefined(txt) ? (txt) : '';\n }\n else {\n txt = (templateFn[getEnumValue(CellType, cell.cellType)](data));\n }\n return !isNullOrUndefined(txt[0]) ? txt[0].textContent : '';\n };\n ExcelExport.prototype.mergeOptions = function (JSON1, JSON2) {\n var result = {};\n var attrname = Object.keys(JSON1);\n for (var index = 0; index < attrname.length; index++) {\n if (attrname[parseInt(index.toString(), 10)] !== 'name') {\n result[attrname[parseInt(index.toString(), 10)]] = JSON1[attrname[parseInt(index.toString(), 10)]];\n }\n }\n attrname = Object.keys(JSON2);\n for (var index = 0; index < attrname.length; index++) {\n if (attrname[parseInt(index.toString(), 10)] !== 'name') {\n result[attrname[parseInt(index.toString(), 10)]] = JSON2[attrname[parseInt(index.toString(), 10)]];\n }\n }\n return result;\n };\n ExcelExport.prototype.getColumnStyle = function (gObj, columnIndex) {\n var index = 0;\n for (var _i = 0, _a = this.styles; _i < _a.length; _i++) {\n var style = _a[_i];\n if (style.name === gObj.element.id + 'column' + columnIndex) {\n return index;\n }\n index++;\n }\n return undefined;\n };\n ExcelExport.prototype.headerRotation = function (args) {\n var degree = args.style.rotation;\n if (degree <= 90 && degree >= 0) {\n args.style.hAlign = 'Left';\n }\n else if (degree > 90 && degree <= 180) {\n args.style.hAlign = 'Right';\n }\n else {\n degree = 180;\n args.style.hAlign = 'Right';\n }\n args.style.rotation = degree;\n };\n ExcelExport.prototype.processHeaderContent = function (gObj, headerRow, indent, excelRows) {\n var rowIndex = 1;\n var gridRows = headerRow.rows;\n // Column collection with respect to the records in the grid\n var gridColumns = headerRow.columns;\n var spannedCells = [];\n if (indent > 0) {\n var index = 0;\n while (index !== indent) {\n this.columns.push({ index: index + 1, width: 30 });\n index++;\n }\n }\n for (var col = 0; col < gridColumns.length; col++) {\n this.parseStyles(gObj, gridColumns[parseInt(col.toString(), 10)], this.getRecordThemeStyle(this.theme), indent + col + 1);\n }\n var templateRowHeight;\n for (var row = 0; row < gridRows.length; row++) {\n var currentCellIndex = 1 + indent;\n var cells = [];\n for (var column = 0; column < gridRows[parseInt(row.toString(), 10)].cells.length; column++) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var style = {};\n var cell = {};\n var gridCell = gridRows[parseInt(row.toString(), 10)].cells[parseInt(column.toString(), 10)];\n if (gridCell.cellType === CellType.HeaderIndent || gridCell.cellType === CellType.DetailHeader) {\n continue;\n }\n var result = { contains: true, index: 1 };\n while (result.contains) {\n result = this.getIndex(spannedCells, rowIndex, currentCellIndex);\n currentCellIndex = result.index;\n if (!result.contains) {\n cell.index = result.index + gObj.childGridLevel;\n break;\n }\n }\n if (!isNullOrUndefined(gridCell.rowSpan) && gridCell.rowSpan !== 1) {\n cell.rowSpan = gridCell.rowSpan;\n for (var i = rowIndex; i < gridCell.rowSpan + rowIndex; i++) {\n var spannedCell = { rowIndex: 0, columnIndex: 0 };\n spannedCell.rowIndex = i;\n spannedCell.columnIndex = currentCellIndex;\n spannedCells.push(spannedCell);\n }\n }\n if (!isNullOrUndefined(gridCell.colSpan) && gridCell.colSpan !== 1) {\n cell.colSpan = gridCell.colSpan;\n currentCellIndex = currentCellIndex + cell.colSpan - 1;\n }\n cell.value = gridCell.column.headerText;\n style = this.getHeaderThemeStyle(this.theme);\n if (!isNullOrUndefined(gridCell.column.textAlign)) {\n style.hAlign = gridCell.column.textAlign.toLowerCase();\n }\n if (!isNullOrUndefined(gridCell.column.headerTextAlign)) {\n style.hAlign = gridCell.column.headerTextAlign.toLowerCase();\n }\n var excelHeaderCellArgs = { cell: cell, gridCell: gridCell, style: style };\n gObj.trigger(events.excelHeaderQueryCellInfo, excelHeaderCellArgs);\n if (excelHeaderCellArgs.style.rotation) {\n this.headerRotation(excelHeaderCellArgs);\n }\n if (!isNullOrUndefined(excelHeaderCellArgs.image) && !isNullOrUndefined(excelHeaderCellArgs.image.base64)) {\n templateRowHeight = this.setImage(excelHeaderCellArgs, currentCellIndex);\n }\n if (!isNullOrUndefined(excelHeaderCellArgs.hyperLink)) {\n excelHeaderCellArgs.cell.hyperlink = { target: excelHeaderCellArgs.hyperLink.target };\n cell.value = excelHeaderCellArgs.hyperLink.displayText || cell.value;\n }\n cell.style = excelHeaderCellArgs.style;\n cells.push(cell);\n currentCellIndex++;\n }\n var excelRow = { index: this.rowLength++, cells: cells };\n if (!isNullOrUndefined(templateRowHeight)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n excelRow.height = templateRowHeight;\n }\n excelRows.push(excelRow);\n }\n return excelRows;\n };\n ExcelExport.prototype.getHeaderThemeStyle = function (theme) {\n var style = {};\n style.fontSize = 12;\n style.borders = { color: '#E0E0E0' };\n style.bold = true;\n if (!isNullOrUndefined(theme) && !isNullOrUndefined(theme.header)) {\n style = this.updateThemeStyle(theme.header, style);\n }\n return style;\n };\n ExcelExport.prototype.updateThemeStyle = function (themestyle, style) {\n return extend(style, themestyle);\n };\n ExcelExport.prototype.getCaptionThemeStyle = function (theme) {\n var style = {};\n style.fontSize = 13;\n style.backColor = '#F6F6F6';\n if (!isNullOrUndefined(theme) && !isNullOrUndefined(theme.caption)) {\n style = this.updateThemeStyle(theme.caption, style);\n }\n return style;\n };\n ExcelExport.prototype.getRecordThemeStyle = function (theme) {\n var style = {};\n style.fontSize = 13;\n style.borders = { color: '#E0E0E0' };\n if (!isNullOrUndefined(theme) && !isNullOrUndefined(theme.record)) {\n style = this.updateThemeStyle(theme.record, style);\n }\n return style;\n };\n ExcelExport.prototype.processExcelHeader = function (header) {\n if (!isNullOrUndefined(header.rows) && (this.expType === 'NewSheet' || this.rowLength === 1)) {\n var noRows = void 0;\n if (header.headerRows === undefined) {\n this.rowLength = header.rows.length;\n }\n else {\n this.rowLength = header.headerRows;\n }\n if (this.rowLength < header.rows.length) {\n noRows = this.rowLength;\n }\n else {\n noRows = header.rows.length;\n }\n this.rowLength++;\n for (var row = 0; row < noRows; row++) {\n var json = header.rows[parseInt(row.toString(), 10)];\n //Row index\n if (!(json.index !== null && !isNullOrUndefined(json.index))) {\n json.index = (row + 1);\n }\n this.updatedCellIndex(json);\n }\n }\n };\n ExcelExport.prototype.updatedCellIndex = function (json) {\n var cellsLength = json.cells.length;\n for (var cellId = 0; cellId < cellsLength; cellId++) {\n var jsonCell = json.cells[parseInt(cellId.toString(), 10)];\n //cell index\n if (!(jsonCell.index !== null && !isNullOrUndefined(jsonCell.index))) {\n jsonCell.index = (cellId + 1);\n }\n }\n this.rows.push(json);\n };\n ExcelExport.prototype.processExcelFooter = function (footer) {\n if (!isNullOrUndefined(footer.rows)) {\n var noRows = void 0;\n if (footer.footerRows === undefined) {\n this.rowLength += footer.rows.length;\n }\n else {\n if (footer.footerRows > footer.rows.length) {\n this.rowLength += (footer.footerRows - footer.rows.length);\n noRows = footer.rows.length;\n }\n else {\n noRows = footer.footerRows;\n }\n }\n for (var row = 0; row < noRows; row++) {\n var json = footer.rows[parseInt(row.toString(), 10)];\n //Row index\n if (json.index === null || json.index === undefined) {\n json.index = this.rowLength++;\n }\n else {\n json.index += this.rowLength;\n }\n this.updatedCellIndex(json);\n }\n }\n };\n ExcelExport.prototype.getIndex = function (spannedCells, rowIndex, columnIndex) {\n for (var _i = 0, spannedCells_1 = spannedCells; _i < spannedCells_1.length; _i++) {\n var spannedCell = spannedCells_1[_i];\n if ((spannedCell.rowIndex === rowIndex) && (spannedCell.columnIndex === columnIndex)) {\n columnIndex = columnIndex + 1;\n return { contains: true, index: columnIndex };\n }\n }\n return { contains: false, index: columnIndex };\n };\n ExcelExport.prototype.parseStyles = function (gObj, col, style, index) {\n if (!isNullOrUndefined(col.format)) {\n if (typeof col.format === 'object') {\n var format = col.format;\n style.numberFormat = !isNullOrUndefined(format.format) ? format.format : format.skeleton;\n if (!isNullOrUndefined(format.type)) {\n style.type = format.type === 'dateonly' ? 'date' : format.type.toLowerCase();\n }\n }\n else {\n style.numberFormat = col.format;\n style.type = col.type === 'dateonly' ? 'date' : col.type;\n }\n }\n if (!isNullOrUndefined(col.textAlign)) {\n style.hAlign = col.textAlign.toLowerCase();\n }\n if (Object.keys(style).length > 0) {\n style.name = gObj.element.id + 'column' + index;\n this.styles.push(style);\n }\n if (!isNullOrUndefined(col.width) && col.width !== 'auto' && !gObj.childGridLevel) {\n this.columns.push({ index: index + gObj.childGridLevel, width: typeof col.width === 'number' ?\n col.width : this.helper.getConvertedWidth(col.width) });\n }\n };\n ExcelExport.prototype.destroy = function () {\n //destroy for exporting\n };\n return ExcelExport;\n}());\nexport { ExcelExport };\n","import { print as printWindow, createElement, detach, classList, selectAll, extend } from '@syncfusion/ej2-base';\nimport { getPrintGridModel } from '../base/util';\nimport { Grid } from '../base/grid';\nimport * as events from '../base/constant';\nimport { Deferred } from '@syncfusion/ej2-data';\nimport * as literals from '../base/string-literals';\n/**\n * @returns {string[]} returns the cloned property\n * @hidden\n */\nexport function getCloneProperties() {\n return ['aggregates', 'allowGrouping', 'allowFiltering', 'allowMultiSorting', 'allowReordering', 'allowSorting',\n 'allowTextWrap', 'childGrid', 'columns', 'currentViewData', 'dataSource', 'detailTemplate', 'enableAltRow',\n 'enableColumnVirtualization', 'filterSettings', 'gridLines',\n 'groupSettings', 'height', 'locale', 'pageSettings', 'printMode', 'query', 'queryString', 'enableRtl',\n 'rowHeight', 'rowTemplate', 'sortSettings', 'textWrapSettings', 'allowPaging', 'hierarchyPrintMode', 'searchSettings',\n 'queryCellInfo', 'beforeDataBound'];\n}\n/**\n *\n * The `Print` module is used to handle print action.\n */\nvar Print = /** @class */ (function () {\n /**\n * Constructor for the Grid print module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {Scroll} scrollModule - specifies the scroll module\n * @hidden\n */\n function Print(parent, scrollModule) {\n this.isAsyncPrint = false;\n this.defered = new Deferred();\n this.parent = parent;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.contentReady, this.isContentReady(), this);\n this.actionBeginFunction = this.actionBegin.bind(this);\n this.parent.addEventListener(events.actionBegin, this.actionBeginFunction);\n this.parent.on(events.onEmpty, this.onEmpty.bind(this));\n this.parent.on(events.hierarchyPrint, this.hierarchyPrint, this);\n this.scrollModule = scrollModule;\n }\n Print.prototype.isContentReady = function () {\n var _this = this;\n if (this.isPrintGrid() && (this.parent.hierarchyPrintMode === 'None' || !this.parent.childGrid)) {\n return this.contentReady;\n }\n return function () {\n _this.defered.promise.then(function () {\n _this.contentReady();\n });\n if (_this.isPrintGrid()) {\n _this.hierarchyPrint();\n }\n };\n };\n Print.prototype.hierarchyPrint = function () {\n this.removeColGroup(this.parent);\n var printGridObj = window.printGridObj;\n if (printGridObj && !printGridObj.element.querySelector('[aria-busy=true')) {\n printGridObj.printModule.defered.resolve();\n }\n };\n /**\n * By default, prints all the Grid pages and hides the pager.\n * > You can customize print options using the\n * [`printMode`](./printmode/).\n *\n * @returns {void}\n */\n Print.prototype.print = function () {\n this.renderPrintGrid();\n };\n Print.prototype.onEmpty = function () {\n if (this.isPrintGrid()) {\n this.contentReady();\n }\n };\n Print.prototype.actionBegin = function () {\n if (this.isPrintGrid()) {\n this.isAsyncPrint = true;\n }\n };\n Print.prototype.renderPrintGrid = function () {\n var gObj = this.parent;\n var element = createElement('div', {\n id: this.parent.element.id + '_print', className: gObj.element.className + ' e-print-grid'\n });\n element.classList.remove('e-gridhover');\n document.body.appendChild(element);\n var printGrid = new Grid(getPrintGridModel(gObj, gObj.hierarchyPrintMode));\n for (var i = 0; i < printGrid.columns.length; i++) {\n printGrid.columns[parseInt(i.toString(), 10)] = extend({}, printGrid.columns[parseInt(i.toString(), 10)]);\n if (gObj.isFrozenGrid() && !gObj.getFrozenColumns()) {\n printGrid.columns[parseInt(i.toString(), 10)].freeze = undefined;\n }\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.parent.isAngular) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n printGrid.viewContainerRef = this.parent.viewContainerRef;\n }\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n printGrid.load = function () { };\n printGrid.query = gObj.getQuery().clone();\n window.printGridObj = printGrid;\n printGrid.isPrinting = true;\n var modules = printGrid.getInjectedModules();\n var injectedModues = gObj.getInjectedModules();\n if (!modules || modules.length !== injectedModues.length) {\n printGrid.setInjectedModules(injectedModues);\n }\n gObj.notify(events.printGridInit, { element: element, printgrid: printGrid });\n this.parent.log('exporting_begin', this.getModuleName());\n printGrid.registeredTemplate = this.parent.registeredTemplate;\n printGrid.isVue = this.parent.isVue;\n printGrid.appendTo(element);\n if (!gObj.isVue3) {\n printGrid.trigger = gObj.trigger;\n }\n };\n Print.prototype.contentReady = function () {\n if (this.isPrintGrid()) {\n var gObj = this.parent;\n if (this.isAsyncPrint) {\n this.printGrid();\n return;\n }\n var args = {\n requestType: 'print',\n element: gObj.element,\n selectedRows: gObj.getContentTable().querySelectorAll('tr[aria-selected=\"true\"]'),\n cancel: false,\n hierarchyPrintMode: gObj.hierarchyPrintMode\n };\n if (!this.isAsyncPrint) {\n gObj.trigger(events.beforePrint, args);\n }\n if (args.cancel) {\n detach(gObj.element);\n return;\n }\n if (!this.isAsyncPrint) {\n this.printGrid();\n }\n }\n };\n Print.prototype.printGrid = function () {\n var gObj = this.parent;\n // Height adjustment on print grid\n if (gObj.height !== 'auto') { // if scroller enabled\n var cssProps = this.scrollModule.getCssProperties();\n var contentDiv = gObj.element.querySelector('.' + literals.content);\n var headerDiv = gObj.element.querySelector('.' + literals.gridHeader);\n contentDiv.style.height = 'auto';\n contentDiv.style.overflowY = 'auto';\n headerDiv.style[cssProps.padding] = '';\n headerDiv.firstElementChild.style[cssProps.border] = '';\n }\n // Grid alignment adjustment on grouping\n if (gObj.allowGrouping) {\n if (!gObj.groupSettings.columns.length) {\n gObj.element.querySelector('.e-groupdroparea').style.display = 'none';\n }\n else {\n this.removeColGroup(gObj);\n }\n }\n // hide horizontal scroll\n for (var _i = 0, _a = [].slice.call(gObj.element.getElementsByClassName(literals.content)); _i < _a.length; _i++) {\n var element = _a[_i];\n element.style.overflowX = 'hidden';\n }\n // Hide the waiting popup\n var waitingPop = [].slice.call(gObj.element.getElementsByClassName('e-spin-show'));\n for (var _b = 0, _c = [].slice.call(waitingPop); _b < _c.length; _b++) {\n var element = _c[_b];\n classList(element, ['e-spin-hide'], ['e-spin-show']);\n }\n this.printGridElement(gObj);\n gObj.isPrinting = false;\n delete window.printGridObj;\n var args = {\n element: gObj.element\n };\n gObj.trigger(events.printComplete, args);\n gObj.destroy();\n this.parent.log('exporting_complete', this.getModuleName());\n };\n Print.prototype.printGridElement = function (gObj) {\n classList(gObj.element, ['e-print-grid-layout'], ['e-print-grid']);\n if (gObj.isPrinting) {\n detach(gObj.element);\n }\n this.printWind = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');\n this.printWind.moveTo(0, 0);\n this.printWind.resizeTo(screen.availWidth, screen.availHeight);\n this.printWind = printWindow(gObj.element, this.printWind);\n };\n Print.prototype.removeColGroup = function (gObj) {\n var depth = gObj.groupSettings.columns.length;\n var element = gObj.element;\n var id = '#' + gObj.element.id;\n if (!depth) {\n return;\n }\n var groupCaption = selectAll('.e-groupcaption', element);\n var colSpan = groupCaption[depth - 1].getAttribute('colspan');\n for (var i = 0; i < groupCaption.length; i++) {\n groupCaption[parseInt(i.toString(), 10)].setAttribute('colspan', colSpan);\n }\n var colGroups = selectAll(\"colgroup\" + id + \"colgroup\", element);\n var contentColGroups = selectAll('.e-content colgroup', element);\n var footerColGroups = selectAll('.e-summarycontent colgroup', element);\n this.hideColGroup(colGroups, depth);\n this.hideColGroup(contentColGroups, depth);\n this.hideColGroup(footerColGroups, depth);\n };\n Print.prototype.hideColGroup = function (colGroups, depth) {\n for (var i = 0; i < colGroups.length; i++) {\n for (var j = 0; j < depth; j++) {\n colGroups[parseInt(i.toString(), 10)].children[parseInt(j.toString(), 10)].style.display = 'none';\n }\n }\n };\n /**\n * To destroy the print\n *\n * @returns {boolean} returns the isPrintGrid or not\n * @hidden\n */\n Print.prototype.isPrintGrid = function () {\n return this.parent.element.id.indexOf('_print') > 0 && this.parent.isPrinting;\n };\n /**\n * To destroy the print\n *\n * @returns {void}\n * @hidden\n */\n Print.prototype.destroy = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.contentReady, this.contentReady.bind(this));\n this.parent.removeEventListener(events.actionBegin, this.actionBeginFunction);\n this.parent.off(events.onEmpty, this.onEmpty.bind(this));\n this.parent.off(events.hierarchyPrint, this.hierarchyPrint);\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Print.prototype.getModuleName = function () {\n return 'print';\n };\n Print.printGridProp = getCloneProperties().concat([events.beforePrint, events.printComplete, events.load]);\n return Print;\n}());\nexport { Print };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { EventHandler, Property, Internationalization, NotifyPropertyChanges } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, Animation, Browser } from '@syncfusion/ej2-base';\nimport { cldrData, L10n, Component, getDefaultDateObject, rippleEffect, Event } from '@syncfusion/ej2-base';\nimport { remove, addClass, detach, removeClass, closest, append, attributes, setStyleAttribute } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, formatUnit, getValue, extend, getUniqueID, ChildProperty } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { ListBase } from '@syncfusion/ej2-lists';\nvar WRAPPERCLASS = 'e-time-wrapper';\nvar POPUP = 'e-popup';\nvar ERROR = 'e-error';\nvar POPUPDIMENSION = '240px';\nvar DAY = new Date().getDate();\nvar MONTH = new Date().getMonth();\nvar YEAR = new Date().getFullYear();\nvar ROOT = 'e-timepicker';\nvar LIBRARY = 'e-lib';\nvar CONTROL = 'e-control';\nvar CONTENT = 'e-content';\nvar SELECTED = 'e-active';\nvar HOVER = 'e-hover';\nvar NAVIGATION = 'e-navigation';\nvar DISABLED = 'e-disabled';\nvar ICONANIMATION = 'e-icon-anim';\nvar TIMEICON = 'e-time-icon';\nvar CLEARICON = 'e-clear-icon';\nvar FOCUS = 'e-input-focus';\nvar LISTCLASS = 'e-list-item';\nvar HALFPOSITION = 2;\nvar ANIMATIONDURATION = 50;\nvar OVERFLOW = 'e-time-overflow';\nvar OFFSETVAL = 4;\nvar EDITABLE = 'e-non-edit';\nvar wrapperAttributes = ['title', 'class', 'style'];\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport var TimePickerBase;\n(function (TimePickerBase) {\n // eslint-disable-next-line max-len, jsdoc/require-jsdoc\n function createListItems(createdEl, min, max, globalize, timeFormat, step) {\n var formatOptions;\n if (this.calendarMode === 'Gregorian') {\n formatOptions = { format: timeFormat, type: 'time' };\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n formatOptions = { format: timeFormat, type: 'time', calendar: 'islamic' };\n }\n var start;\n var interval = step * 60000;\n var listItems = [];\n var timeCollections = [];\n start = +(min.setMilliseconds(0));\n var end = +(max.setMilliseconds(0));\n while (end >= start) {\n timeCollections.push(start);\n listItems.push(globalize.formatDate(new Date(start), { format: timeFormat, type: 'time' }));\n start += interval;\n }\n var listTag = ListBase.createList(createdEl, listItems, null, true);\n return { collection: timeCollections, list: listTag };\n }\n TimePickerBase.createListItems = createListItems;\n})(TimePickerBase || (TimePickerBase = {}));\nvar TimeMaskPlaceholder = /** @class */ (function (_super) {\n __extends(TimeMaskPlaceholder, _super);\n function TimeMaskPlaceholder() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('day')\n ], TimeMaskPlaceholder.prototype, \"day\", void 0);\n __decorate([\n Property('month')\n ], TimeMaskPlaceholder.prototype, \"month\", void 0);\n __decorate([\n Property('year')\n ], TimeMaskPlaceholder.prototype, \"year\", void 0);\n __decorate([\n Property('day of the week')\n ], TimeMaskPlaceholder.prototype, \"dayOfTheWeek\", void 0);\n __decorate([\n Property('hour')\n ], TimeMaskPlaceholder.prototype, \"hour\", void 0);\n __decorate([\n Property('minute')\n ], TimeMaskPlaceholder.prototype, \"minute\", void 0);\n __decorate([\n Property('second')\n ], TimeMaskPlaceholder.prototype, \"second\", void 0);\n return TimeMaskPlaceholder;\n}(ChildProperty));\nexport { TimeMaskPlaceholder };\n/**\n * TimePicker is an intuitive interface component which provides an options to select a time value\n * from popup list or to set a desired time value.\n * ```\n * \n * \n * ```\n */\nvar TimePicker = /** @class */ (function (_super) {\n __extends(TimePicker, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {TimePickerModel} options - Specifies the TimePicker model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function TimePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.liCollections = [];\n _this.timeCollections = [];\n _this.disableItemCollection = [];\n _this.invalidValueString = null;\n _this.isAngular = false;\n _this.preventChange = false;\n _this.maskedDateValue = '';\n _this.moduleName = _this.getModuleName();\n _this.timeOptions = options;\n return _this;\n }\n /**\n * Initialize the event handler\n *\n * @returns {void}\n * @private\n */\n TimePicker.prototype.preRender = function () {\n this.keyConfigure = {\n enter: 'enter',\n escape: 'escape',\n end: 'end',\n tab: 'tab',\n home: 'home',\n down: 'downarrow',\n up: 'uparrow',\n left: 'leftarrow',\n right: 'rightarrow',\n open: 'alt+downarrow',\n close: 'alt+uparrow'\n };\n this.cloneElement = this.element.cloneNode(true);\n removeClass([this.cloneElement], [ROOT, CONTROL, LIBRARY]);\n this.inputElement = this.element;\n this.angularTag = null;\n this.formElement = closest(this.element, 'form');\n if (this.element.tagName === 'EJS-TIMEPICKER') {\n this.angularTag = this.element.tagName;\n this.inputElement = this.createElement('input');\n this.element.appendChild(this.inputElement);\n }\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n this.openPopupEventArgs = {\n appendTo: document.body\n };\n };\n // element creation\n TimePicker.prototype.render = function () {\n this.initialize();\n this.createInputElement();\n this.updateHtmlAttributeToWrapper();\n this.setTimeAllowEdit();\n this.setEnable();\n this.validateInterval();\n this.bindEvents();\n this.validateDisable();\n this.setTimeZone();\n this.setValue(this.getFormattedValue(this.value));\n if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType === 'Always' || !this.floatLabelType || !this.placeholder)) {\n this.updateInputValue(this.maskedDateValue);\n this.checkErrorState(this.maskedDateValue);\n }\n this.anchor = this.inputElement;\n this.inputElement.setAttribute('value', this.inputElement.value);\n this.inputEleValue = this.getDateObject(this.inputElement.value);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {\n this.enabled = false;\n }\n this.renderComplete();\n };\n TimePicker.prototype.setTimeZone = function () {\n if (!isNullOrUndefined(this.serverTimezoneOffset) && this.value) {\n var clientTimeZoneDiff = new Date().getTimezoneOffset() / 60;\n var serverTimezoneDiff = this.serverTimezoneOffset;\n var timeZoneDiff = serverTimezoneDiff + clientTimeZoneDiff;\n timeZoneDiff = this.isDayLightSaving() ? timeZoneDiff-- : timeZoneDiff;\n this.value = new Date((this.value).getTime() + (timeZoneDiff * 60 * 60 * 1000));\n }\n };\n TimePicker.prototype.isDayLightSaving = function () {\n var firstOffset = new Date(this.value.getFullYear(), 0, 1).getTimezoneOffset();\n var secondOffset = new Date(this.value.getFullYear(), 6, 1).getTimezoneOffset();\n return (this.value.getTimezoneOffset() < Math.max(firstOffset, secondOffset));\n };\n 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 if (!isNullOrUndefined(this.value)) {\n this.popupCreation();\n this.popupObj.destroy();\n this.popupWrapper = this.popupObj = null;\n }\n if ((!isNaN(+this.value) && this.value !== null)) {\n if (!this.valueIsDisable(this.value)) {\n //disable value given in value property so reset the date based on current date\n if (this.strictMode) {\n this.resetState();\n }\n this.initValue = null;\n this.initMax = this.getDateObject(this.initMax);\n this.initMin = this.getDateObject(this.initMin);\n this.timeCollections = this.liCollections = [];\n this.setMinMax(this.initMin, this.initMax);\n }\n }\n };\n TimePicker.prototype.validationAttribute = function (target, input) {\n var name = target.getAttribute('name') ? target.getAttribute('name') : target.getAttribute('id');\n input.setAttribute('name', name);\n target.removeAttribute('name');\n var attributes = ['required', 'aria-required', 'form'];\n for (var i = 0; i < attributes.length; i++) {\n if (isNullOrUndefined(target.getAttribute(attributes[i]))) {\n continue;\n }\n var attr = target.getAttribute(attributes[i]);\n input.setAttribute(attributes[i], attr);\n target.removeAttribute(attributes[i]);\n }\n };\n TimePicker.prototype.initialize = function () {\n this.globalize = new Internationalization(this.locale);\n this.defaultCulture = new Internationalization('en');\n this.checkTimeFormat();\n this.checkInvalidValue(this.value);\n // persist the value property.\n this.setProperties({ value: this.checkDateValue(new Date(this.checkInValue(this.value))) }, true);\n this.setProperties({ min: this.checkDateValue(new Date(this.checkInValue(this.min))) }, true);\n this.setProperties({ max: this.checkDateValue(new Date(this.checkInValue(this.max))) }, true);\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkInValue(this.scrollTo))) }, true);\n if (this.angularTag !== null) {\n this.validationAttribute(this.element, this.inputElement);\n }\n this.updateHtmlAttributeToElement();\n this.checkAttributes(false); //check the input element attributes\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('timepicker', localeText, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n this.initValue = this.checkDateValue(this.value);\n this.initMin = this.checkDateValue(this.min);\n this.initMax = this.checkDateValue(this.max);\n this.isNavigate = this.isPreventBlur = this.isTextSelected = false;\n this.activeIndex = this.valueWithMinutes = this.prevDate = null;\n if (!isNullOrUndefined(this.element.getAttribute('id'))) {\n if (this.angularTag !== null) {\n this.inputElement.id = this.element.getAttribute('id') + '_input';\n }\n }\n else {\n //for angular case\n this.element.id = getUniqueID('ej2_timepicker');\n if (this.angularTag !== null) {\n attributes(this.inputElement, { 'id': this.element.id + '_input' });\n }\n }\n if (isNullOrUndefined(this.inputElement.getAttribute('name'))) {\n attributes(this.inputElement, { 'name': this.element.id });\n }\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n }\n };\n TimePicker.prototype.checkTimeFormat = function () {\n if (this.format) {\n if (typeof this.format === 'string') {\n this.formatString = this.format;\n }\n else if (!isNullOrUndefined(this.format.skeleton) && this.format.skeleton !== '') {\n var skeletonString = this.format.skeleton;\n this.formatString = this.globalize.getDatePattern({ type: 'time', skeleton: skeletonString });\n }\n else {\n this.formatString = this.globalize.getDatePattern({ type: 'time', skeleton: 'short' });\n }\n }\n else {\n this.formatString = null;\n }\n };\n TimePicker.prototype.checkDateValue = function (value) {\n return (!isNullOrUndefined(value) && value instanceof Date && !isNaN(+value)) ? value : null;\n };\n TimePicker.prototype.createInputElement = function () {\n if (this.fullScreenMode && Browser.isDevice) {\n this.cssClass += ' ' + \"e-popup-expand\";\n }\n var updatedCssClassesValue = this.cssClass;\n var isBindClearAction = this.enableMask ? false : true;\n if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {\n updatedCssClassesValue = (this.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n this.inputWrapper = Input.createInput({\n element: this.inputElement,\n bindClearAction: isBindClearAction,\n floatLabelType: this.floatLabelType,\n properties: {\n readonly: this.readonly,\n placeholder: this.placeholder,\n cssClass: updatedCssClassesValue,\n enabled: this.enabled,\n enableRtl: this.enableRtl,\n showClearButton: this.showClearButton\n },\n buttons: [' e-input-group-icon e-time-icon e-icons']\n }, this.createElement);\n this.inputWrapper.container.style.width = this.setWidth(this.width);\n attributes(this.inputElement, {\n 'aria-autocomplete': 'list', 'tabindex': '0',\n 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',\n 'aria-disabled': 'false', 'aria-invalid': 'false'\n });\n if (!this.isNullOrEmpty(this.inputStyle)) {\n Input.addAttributes({ 'style': this.inputStyle }, this.inputElement);\n }\n addClass([this.inputWrapper.container], WRAPPERCLASS);\n };\n TimePicker.prototype.getCldrDateTimeFormat = function () {\n var culture = new Internationalization(this.locale);\n var cldrTime;\n var dateFormat = culture.getDatePattern({ skeleton: 'yMd' });\n if (this.isNullOrEmpty(this.formatString)) {\n cldrTime = dateFormat + ' ' + this.cldrFormat('time');\n }\n else {\n cldrTime = this.formatString;\n }\n return cldrTime;\n };\n TimePicker.prototype.checkInvalidValue = function (value) {\n var isInvalid = false;\n if (typeof value !== 'object' && !isNullOrUndefined(value)) {\n var valueString = value;\n if (typeof valueString === 'string') {\n valueString = valueString.trim();\n }\n var valueExpression = null;\n var valueExp = null;\n if (typeof value === 'number') {\n valueString = value.toString();\n }\n else if (typeof value === 'string') {\n if (!(/^[a-zA-Z0-9- ]*$/).test(value)) {\n valueExpression = this.setCurrentDate(this.getDateObject(value));\n if (isNullOrUndefined(valueExpression)) {\n valueExpression = this.checkDateValue(this.globalize.parseDate(valueString, {\n format: this.getCldrDateTimeFormat(), type: 'datetime'\n }));\n if (isNullOrUndefined(valueExpression)) {\n valueExpression = this.checkDateValue(this.globalize.parseDate(valueString, {\n format: this.formatString, type: 'dateTime', skeleton: 'yMd'\n }));\n }\n }\n }\n }\n valueExp = this.globalize.parseDate(valueString, {\n format: this.getCldrDateTimeFormat(), type: 'datetime'\n });\n valueExpression = (!isNullOrUndefined(valueExp) && valueExp instanceof Date && !isNaN(+valueExp)) ? valueExp : null;\n if (isNullOrUndefined(valueExpression) && valueString.replace(/\\s/g, '').length) {\n var extISOString = null;\n var basicISOString = null;\n // eslint-disable-next-line\n extISOString = /^\\s*((?:[+-]\\d{6}|\\d{4})-(?:\\d\\d-\\d\\d|W\\d\\d-\\d|W\\d\\d|\\d\\d\\d|\\d\\d))(?:(T| )(\\d\\d(?::\\d\\d(?::\\d\\d(?:[.,]\\d+)?)?)?)([\\+\\-]\\d\\d(?::?\\d\\d)?|\\s*Z)?)?/;\n // eslint-disable-next-line\n basicISOString = /^\\s*((?:[+-]\\d{6}|\\d{4})(?:\\d\\d\\d\\d|W\\d\\d\\d|W\\d\\d|\\d\\d\\d|\\d\\d))(?:(T| )(\\d\\d(?:\\d\\d(?:\\d\\d(?:[.,]\\d+)?)?)?)([\\+\\-]\\d\\d(?::?\\d\\d)?|\\s*Z)?)?/;\n if ((!extISOString.test(valueString) && !basicISOString.test(valueString))\n || ((/^[a-zA-Z0-9- ]*$/).test(value)) || isNaN(+new Date('' + valueString))) {\n isInvalid = true;\n }\n else {\n valueExpression = new Date('' + valueString);\n }\n }\n if (isInvalid) {\n if (!this.strictMode) {\n this.invalidValueString = valueString;\n }\n this.setProperties({ value: null }, true);\n this.initValue = null;\n }\n else {\n this.setProperties({ value: valueExpression }, true);\n this.initValue = this.value;\n }\n }\n };\n TimePicker.prototype.requiredModules = function () {\n var modules = [];\n if (this.enableMask) {\n modules.push({ args: [this], member: 'MaskedDateTime' });\n }\n return modules;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n TimePicker.prototype.cldrFormat = function (type) {\n var cldrDateTimeString;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDateTimeString = (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDateTimeString = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n return cldrDateTimeString;\n };\n // destroy function\n TimePicker.prototype.destroy = function () {\n this.hide();\n this.unBindEvents();\n var ariaAttribute = {\n 'aria-autocomplete': 'list', 'tabindex': '0',\n 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',\n 'aria-disabled': 'true', 'aria-invalid': 'false'\n };\n if (this.inputElement) {\n Input.removeAttributes(ariaAttribute, this.inputElement);\n if (this.angularTag === null) {\n this.inputWrapper.container.parentElement.appendChild(this.inputElement);\n }\n if (!isNullOrUndefined(this.cloneElement.getAttribute('tabindex'))) {\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.inputElement.removeAttribute('tabindex');\n }\n this.ensureInputAttribute();\n this.enableElement([this.inputElement]);\n this.inputElement.classList.remove('e-input');\n if (isNullOrUndefined(this.cloneElement.getAttribute('disabled'))) {\n Input.setEnabled(true, this.inputElement, this.floatLabelType);\n }\n }\n if (this.inputWrapper.container) {\n detach(this.inputWrapper.container);\n }\n this.inputWrapper = this.popupWrapper = this.cloneElement = undefined;\n this.liCollections = this.timeCollections = this.disableItemCollection = [];\n if (!isNullOrUndefined(this.rippleFn)) {\n this.rippleFn();\n }\n _super.prototype.destroy.call(this);\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n this.rippleFn = null;\n this.openPopupEventArgs = null;\n this.selectedElement = null;\n this.listTag = null;\n this.liCollections = null;\n };\n TimePicker.prototype.ensureInputAttribute = function () {\n var propertyList = [];\n for (var i = 0; i < this.inputElement.attributes.length; i++) {\n propertyList[i] = this.inputElement.attributes[i].name;\n }\n for (var i = 0; i < propertyList.length; i++) {\n if (!isNullOrUndefined(this.cloneElement.getAttribute(propertyList[i]))) {\n this.inputElement.setAttribute(propertyList[i], this.cloneElement.getAttribute(propertyList[i]));\n if (propertyList[i].toLowerCase() === 'value') {\n this.inputElement.value = this.cloneElement.getAttribute(propertyList[i]);\n }\n }\n else {\n this.inputElement.removeAttribute(propertyList[i]);\n if (propertyList[i].toLowerCase() === 'value') {\n this.inputElement.value = '';\n }\n }\n }\n };\n //popup creation\n TimePicker.prototype.popupCreation = function () {\n this.popupWrapper = this.createElement('div', {\n className: ROOT + ' ' + POPUP,\n attrs: { 'id': this.element.id + '_popup', 'style': 'visibility:hidden' }\n });\n this.popupWrapper.setAttribute('aria-label', this.element.id);\n this.popupWrapper.setAttribute('role', 'dialog');\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.addSelection();\n this.renderPopup();\n detach(this.popupWrapper);\n };\n TimePicker.prototype.getPopupHeight = function () {\n var height = parseInt(POPUPDIMENSION, 10);\n var popupHeight = this.popupWrapper.getBoundingClientRect().height;\n return popupHeight > height ? height : popupHeight;\n };\n TimePicker.prototype.generateList = function () {\n this.createListItems();\n this.wireListEvents();\n var rippleModel = { duration: 300, selector: '.' + LISTCLASS };\n this.rippleFn = rippleEffect(this.listWrapper, rippleModel);\n this.liCollections = this.listWrapper.querySelectorAll('.' + LISTCLASS);\n };\n TimePicker.prototype.renderPopup = function () {\n var _this = this;\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n this.popupObj = new Popup(this.popupWrapper, {\n width: this.setPopupWidth(this.width),\n zIndex: this.zIndex,\n targetType: 'relative',\n position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },\n collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },\n enableRtl: this.enableRtl,\n relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,\n offsetY: OFFSETVAL,\n open: function () {\n _this.popupWrapper.style.visibility = 'visible';\n addClass([_this.inputWrapper.buttons[0]], SELECTED);\n }, close: function () {\n removeClass([_this.inputWrapper.buttons[0]], SELECTED);\n _this.unWireListEvents();\n _this.inputElement.removeAttribute('aria-activedescendant');\n remove(_this.popupObj.element);\n _this.popupObj.destroy();\n _this.popupWrapper.innerHTML = '';\n _this.listWrapper = _this.popupWrapper = _this.listTag = undefined;\n }, targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hide();\n }\n }\n });\n if (!Browser.isDevice) {\n this.popupObj.collision = { X: 'none', Y: 'flip' };\n }\n if (Browser.isDevice && this.fullScreenMode) {\n this.popupObj.element.style.maxHeight = \"100%\";\n this.popupObj.element.style.width = \"100%\";\n }\n else {\n this.popupObj.element.style.maxHeight = POPUPDIMENSION;\n }\n if (Browser.isDevice && this.fullScreenMode) {\n var modelHeader = this.createElement('div', { className: 'e-model-header' });\n var modelTitleSpan = this.createElement(\"span\", { className: \"e-model-title\" });\n modelTitleSpan.textContent = \"Select time\";\n var modelCloseIcon = this.createElement(\"span\", { className: \"e-popup-close\" });\n EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.timePopupCloseHandler, this);\n modelHeader.appendChild(modelCloseIcon);\n modelHeader.appendChild(modelTitleSpan);\n this.popupWrapper.insertBefore(modelHeader, this.popupWrapper.firstElementChild);\n }\n };\n TimePicker.prototype.timePopupCloseHandler = function (e) {\n this.hide();\n };\n //util function\n TimePicker.prototype.getFormattedValue = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n else {\n return this.globalize.formatDate(value, { skeleton: 'medium', type: 'time' });\n }\n };\n TimePicker.prototype.getDateObject = function (text) {\n if (!this.isNullOrEmpty(text)) {\n var dateValue = this.createDateObj(text);\n var value = !this.isNullOrEmpty(this.initValue);\n if (this.checkDateValue(dateValue)) {\n var date = value ? this.initValue.getDate() : DAY;\n var month = value ? this.initValue.getMonth() : MONTH;\n var year = value ? this.initValue.getFullYear() : YEAR;\n return new Date(year, month, date, dateValue.getHours(), dateValue.getMinutes(), dateValue.getSeconds());\n }\n }\n return null;\n };\n TimePicker.prototype.updateHtmlAttributeToWrapper = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (wrapperAttributes.indexOf(key) > -1) {\n if (key === 'class') {\n var updatedClassesValue = (this.htmlAttributes[\"\" + key].replace(/\\s+/g, ' ')).trim();\n if (updatedClassesValue !== '') {\n addClass([this.inputWrapper.container], updatedClassesValue.split(' '));\n }\n }\n else if (key === 'style') {\n var timeStyle = this.inputWrapper.container.getAttribute(key);\n timeStyle = !isNullOrUndefined(timeStyle) ? (timeStyle + this.htmlAttributes[\"\" + key]) :\n this.htmlAttributes[\"\" + key];\n this.inputWrapper.container.setAttribute(key, timeStyle);\n }\n else {\n this.inputWrapper.container.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n }\n };\n TimePicker.prototype.updateHtmlAttributeToElement = function () {\n if (!isNullOrUndefined(this.htmlAttributes)) {\n for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {\n var key = _a[_i];\n if (wrapperAttributes.indexOf(key) < 0) {\n this.inputElement.setAttribute(key, this.htmlAttributes[\"\" + key]);\n }\n }\n }\n };\n TimePicker.prototype.updateCssClass = function (cssClassNew, cssClassOld) {\n if (!isNullOrUndefined(cssClassOld)) {\n cssClassOld = (cssClassOld.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(cssClassNew)) {\n cssClassNew = (cssClassNew.replace(/\\s+/g, ' ')).trim();\n }\n Input.setCssClass(cssClassNew, [this.inputWrapper.container], cssClassOld);\n if (this.popupWrapper) {\n Input.setCssClass(cssClassNew, [this.popupWrapper], cssClassOld);\n }\n };\n TimePicker.prototype.removeErrorClass = function () {\n removeClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'false' });\n };\n TimePicker.prototype.checkErrorState = function (val) {\n var value = this.getDateObject(val);\n if ((this.validateState(value) && !this.invalidValueString) ||\n (this.enableMask && this.inputElement.value === this.maskedDateValue)) {\n this.removeErrorClass();\n }\n else {\n addClass([this.inputWrapper.container], ERROR);\n attributes(this.inputElement, { 'aria-invalid': 'true' });\n }\n };\n TimePicker.prototype.validateInterval = function () {\n if (!isNullOrUndefined(this.step) && this.step > 0) {\n this.enableElement([this.inputWrapper.buttons[0]]);\n }\n else {\n this.disableTimeIcon();\n }\n };\n TimePicker.prototype.disableTimeIcon = function () {\n this.disableElement([this.inputWrapper.buttons[0]]);\n this.hide();\n };\n TimePicker.prototype.disableElement = function (element) {\n addClass(element, DISABLED);\n };\n TimePicker.prototype.enableElement = function (element) {\n removeClass(element, DISABLED);\n };\n TimePicker.prototype.selectInputText = function () {\n this.inputElement.setSelectionRange(0, (this.inputElement).value.length);\n };\n TimePicker.prototype.setCursorToEnd = function () {\n this.inputElement.setSelectionRange((this.inputElement).value.length, (this.inputElement).value.length);\n };\n TimePicker.prototype.getMeridianText = function () {\n var meridian;\n if (this.locale === 'en' || this.locale === 'en-US') {\n meridian = getValue('dayPeriods.format.wide', getDefaultDateObject());\n }\n else {\n var gregorianFormat = '.dates.calendars.gregorian.dayPeriods.format.abbreviated';\n var mainVal = 'main.';\n meridian = getValue(mainVal + '' + this.locale + gregorianFormat, cldrData);\n }\n return meridian;\n };\n TimePicker.prototype.getCursorSelection = function () {\n var input = (this.inputElement);\n var start = 0;\n var end = 0;\n if (!isNaN(input.selectionStart)) {\n start = input.selectionStart;\n end = input.selectionEnd;\n }\n return { start: Math.abs(start), end: Math.abs(end) };\n };\n TimePicker.prototype.getActiveElement = function () {\n if (!isNullOrUndefined(this.popupWrapper)) {\n return this.popupWrapper.querySelectorAll('.' + SELECTED);\n }\n else {\n return null;\n }\n };\n TimePicker.prototype.isNullOrEmpty = function (value) {\n if (isNullOrUndefined(value) || (typeof value === 'string' && value.trim() === '')) {\n return true;\n }\n else {\n return false;\n }\n };\n TimePicker.prototype.setWidth = function (width) {\n if (typeof width === 'number') {\n width = formatUnit(width);\n }\n else if (typeof width === 'string') {\n width = (width.match(/px|%|em/)) ? width : formatUnit(width);\n }\n else {\n width = '100%';\n }\n return width;\n };\n TimePicker.prototype.setPopupWidth = function (width) {\n width = this.setWidth(width);\n if (width.indexOf('%') > -1) {\n var inputWidth = this.containerStyle.width * parseFloat(width) / 100;\n width = inputWidth.toString() + 'px';\n }\n return width;\n };\n TimePicker.prototype.setScrollPosition = function () {\n var element = this.selectedElement;\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else if (this.popupWrapper && this.checkDateValue(this.scrollTo)) {\n this.setScrollTo();\n }\n };\n TimePicker.prototype.findScrollTop = function (element) {\n var listHeight = this.getPopupHeight();\n var nextEle = element.nextElementSibling;\n var height = nextEle ? nextEle.offsetTop : element.offsetTop;\n var liHeight = element.getBoundingClientRect().height;\n if ((height + element.offsetTop) > listHeight) {\n this.popupWrapper.scrollTop = nextEle ? (height - (listHeight / HALFPOSITION + liHeight / HALFPOSITION)) : height;\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n };\n TimePicker.prototype.setScrollTo = function () {\n var element;\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n var initialTime = this.timeCollections[0];\n var scrollTime = this.getDateObject(this.checkDateValue(this.scrollTo)).getTime();\n element = items[Math.round((scrollTime - initialTime) / (this.step * 60000))];\n }\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else {\n this.popupWrapper.scrollTop = 0;\n }\n };\n TimePicker.prototype.getText = function () {\n return (isNullOrUndefined(this.checkDateValue(this.value))) ? '' : this.getValue(this.value);\n };\n TimePicker.prototype.getValue = function (value) {\n return (isNullOrUndefined(this.checkDateValue(value))) ? null : this.globalize.formatDate(value, {\n format: this.cldrTimeFormat(), type: 'time'\n });\n };\n TimePicker.prototype.cldrDateFormat = function () {\n var cldrDate;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDate = (getValue('dateFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDate = (this.getCultureDateObject(cldrData, '' + this.locale));\n }\n return cldrDate;\n };\n TimePicker.prototype.cldrTimeFormat = function () {\n var cldrTime;\n if (this.isNullOrEmpty(this.formatString)) {\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n }\n else {\n cldrTime = this.formatString;\n }\n return cldrTime;\n };\n TimePicker.prototype.dateToNumeric = function () {\n var cldrTime;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = (getValue('timeFormats.medium', getDefaultDateObject()));\n }\n else {\n cldrTime = (getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.medium', cldrData));\n }\n return cldrTime;\n };\n TimePicker.prototype.getExactDateTime = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n else {\n return this.globalize.formatDate(value, { format: this.dateToNumeric(), type: 'time' });\n }\n };\n TimePicker.prototype.setValue = function (value) {\n var time = this.checkValue(value);\n if (!this.strictMode && !this.validateState(time)) {\n if (this.checkDateValue(this.valueWithMinutes) === null) {\n this.initValue = this.valueWithMinutes = null;\n }\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n if (this.isNullOrEmpty(time)) {\n this.initValue = null;\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n this.initValue = this.compareFormatChange(time);\n }\n }\n this.updateInput(true, this.initValue);\n };\n TimePicker.prototype.compareFormatChange = function (value) {\n if (isNullOrUndefined(value)) {\n return null;\n }\n return (value !== this.getText()) ? this.getDateObject(value) : this.getDateObject(this.value);\n };\n TimePicker.prototype.updatePlaceHolder = function () {\n Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);\n };\n //event related functions\n TimePicker.prototype.updateInputValue = function (value) {\n Input.setValue(value, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n TimePicker.prototype.preventEventBubbling = function (e) {\n e.preventDefault();\n this.interopAdaptor.invokeMethodAsync('OnTimeIconClick');\n };\n TimePicker.prototype.popupHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n if (Browser.isDevice) {\n this.inputElement.setAttribute('readonly', '');\n }\n e.preventDefault();\n if (this.isPopupOpen()) {\n this.closePopup(0, e);\n }\n else {\n this.inputElement.focus();\n this.show(e);\n }\n };\n TimePicker.prototype.mouseDownHandler = function () {\n if (!this.enabled) {\n return;\n }\n if (!this.readonly) {\n this.inputElement.setSelectionRange(0, 0);\n EventHandler.add(this.inputElement, 'mouseup', this.mouseUpHandler, this);\n }\n };\n TimePicker.prototype.mouseUpHandler = function (event) {\n if (!this.readonly) {\n event.preventDefault();\n if (this.enableMask) {\n event.preventDefault();\n this.notify('setMaskSelection', {\n module: 'MaskedDateTime'\n });\n return;\n }\n else {\n EventHandler.remove(this.inputElement, 'mouseup', this.mouseUpHandler);\n var curPos = this.getCursorSelection();\n if (!(curPos.start === 0 && curPos.end === this.inputElement.value.length)) {\n if (this.inputElement.value.length > 0) {\n this.cursorDetails = this.focusSelection();\n }\n this.inputElement.setSelectionRange(this.cursorDetails.start, this.cursorDetails.end);\n }\n }\n }\n };\n TimePicker.prototype.focusSelection = function () {\n var regex = new RegExp('^[a-zA-Z0-9]+$');\n var split = this.inputElement.value.split('');\n split.push(' ');\n var curPos = this.getCursorSelection();\n var start = 0;\n var end = 0;\n var isSeparator = false;\n if (!this.isTextSelected) {\n for (var i = 0; i < split.length; i++) {\n if (!regex.test(split[i])) {\n end = i;\n isSeparator = true;\n }\n if (isSeparator) {\n if (curPos.start >= start && curPos.end <= end) {\n // eslint-disable-next-line no-self-assign\n end = end;\n this.isTextSelected = true;\n break;\n }\n else {\n start = i + 1;\n isSeparator = false;\n }\n }\n }\n }\n else {\n start = curPos.start;\n end = curPos.end;\n this.isTextSelected = false;\n }\n return { start: start, end: end };\n };\n TimePicker.prototype.inputHandler = function (event) {\n if (!this.readonly && this.enabled) {\n if (!((event.action == 'right' || event.action == 'left' || event.action == 'tab') || ((event.action == 'home' || event.action == 'end' || event.action == 'up' || event.action == 'down') && !this.isPopupOpen() && !this.enableMask))) {\n event.preventDefault();\n }\n switch (event.action) {\n case 'home':\n case 'end':\n case 'up':\n case 'down':\n if (!this.isPopupOpen()) {\n this.popupCreation();\n this.popupObj.destroy();\n this.popupObj = this.popupWrapper = null;\n }\n if (this.enableMask && !this.readonly && !this.isPopupOpen()) {\n event.preventDefault();\n this.notify('keyDownHandler', {\n module: 'MaskedDateTime',\n e: event\n });\n }\n if (this.isPopupOpen()) {\n this.keyHandler(event);\n }\n break;\n case 'enter':\n if (this.isNavigate) {\n this.selectedElement = this.liCollections[this.activeIndex];\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n this.updateValue(this.valueWithMinutes, event);\n }\n else {\n this.updateValue(this.inputElement.value, event);\n }\n this.hide();\n this.isNavigate = false;\n if (this.isPopupOpen()) {\n event.stopPropagation();\n }\n break;\n case 'open':\n this.show(event);\n break;\n case 'escape':\n this.updateInputValue(this.objToString(this.value));\n if (this.enableMask) {\n if (!this.value) {\n this.updateInputValue(this.maskedDateValue);\n }\n this.createMask();\n }\n this.previousState(this.value);\n this.hide();\n break;\n case 'close':\n this.hide();\n break;\n case 'right':\n case 'left':\n case 'tab':\n case 'shiftTab':\n if (!this.isPopupOpen() && this.enableMask && !this.readonly) {\n if ((this.inputElement.selectionStart === 0 && this.inputElement.selectionEnd === this.inputElement.value.length) ||\n (this.inputElement.selectionEnd !== this.inputElement.value.length && event.action === 'tab') ||\n (this.inputElement.selectionStart !== 0 && event.action === 'shiftTab') || (event.action === 'left' || event.action === 'right')) {\n event.preventDefault();\n }\n this.notify('keyDownHandler', { module: 'MaskedDateTime',\n e: event\n });\n }\n break;\n default:\n this.isNavigate = false;\n break;\n }\n }\n };\n TimePicker.prototype.onMouseClick = function (event) {\n var target = event.target;\n var li = this.selectedElement = closest(target, '.' + LISTCLASS);\n this.setSelection(li, event);\n if (li && li.classList.contains(LISTCLASS)) {\n this.hide();\n }\n };\n TimePicker.prototype.closePopup = function (delay, e) {\n var _this = this;\n if (this.isPopupOpen() && this.popupWrapper) {\n var args = {\n popup: this.popupObj,\n event: e || null,\n cancel: false,\n name: 'open'\n };\n removeClass([document.body], OVERFLOW);\n this.trigger('close', args, function (args) {\n if (!args.cancel) {\n var animModel = {\n name: 'FadeOut',\n duration: ANIMATIONDURATION,\n delay: delay ? delay : 0\n };\n _this.popupObj.hide(new Animation(animModel));\n removeClass([_this.inputWrapper.container], [ICONANIMATION]);\n attributes(_this.inputElement, { 'aria-expanded': 'false' });\n _this.inputElement.removeAttribute('aria-owns');\n _this.inputElement.removeAttribute('aria-controls');\n _this.inputElement.removeAttribute('aria-activedescendant');\n EventHandler.remove(document, 'mousedown touchstart', _this.documentClickHandler);\n }\n if (Browser.isDevice && _this.modal) {\n _this.modal.style.display = 'none';\n _this.modal.outerHTML = '';\n _this.modal = null;\n }\n if (Browser.isDevice) {\n if (!isNullOrUndefined(_this.mobileTimePopupWrap)) {\n _this.mobileTimePopupWrap.remove();\n _this.mobileTimePopupWrap = null;\n }\n }\n if (Browser.isDevice && _this.allowEdit && !_this.readonly) {\n _this.inputElement.removeAttribute('readonly');\n }\n });\n }\n else {\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n }\n };\n TimePicker.prototype.disposeServerPopup = function () {\n if (this.popupWrapper) {\n this.popupWrapper.style.visibility = 'hidden';\n this.popupWrapper.style.top = '-9999px';\n this.popupWrapper.style.left = '-9999px';\n this.popupWrapper.style.width = '0px';\n this.popupWrapper.style.height = '0px';\n }\n };\n TimePicker.prototype.checkValueChange = function (event, isNavigation) {\n if (!this.strictMode && !this.validateState(this.valueWithMinutes)) {\n if (this.checkDateValue(this.valueWithMinutes) === null) {\n this.initValue = this.valueWithMinutes = null;\n }\n this.setProperties({ value: this.compareFormatChange(this.inputElement.value) }, true);\n this.initValue = this.valueWithMinutes = this.compareFormatChange(this.inputElement.value);\n this.prevValue = this.inputElement.value;\n if (+this.prevDate !== +this.value) {\n this.changeEvent(event);\n }\n }\n else {\n if (!isNavigation) {\n if ((this.prevValue !== this.inputElement.value) || isNullOrUndefined(this.checkDateValue(this.value))) {\n this.valueProcess(event, this.compareFormatChange(this.inputElement.value));\n }\n }\n else {\n var value = this.getDateObject(new Date(this.timeCollections[this.activeIndex]));\n if (+this.prevDate !== +value) {\n this.valueProcess(event, value);\n }\n }\n }\n };\n TimePicker.prototype.onMouseOver = function (event) {\n var currentLi = closest(event.target, '.' + LISTCLASS);\n this.setHover(currentLi, HOVER);\n };\n TimePicker.prototype.setHover = function (li, className) {\n if (this.enabled && this.isValidLI(li) && !li.classList.contains(className)) {\n this.removeHover(className);\n addClass([li], className);\n if (className === NAVIGATION) {\n li.setAttribute('aria-selected', 'true');\n }\n }\n };\n TimePicker.prototype.setSelection = function (li, event) {\n if (this.isValidLI(li)) {\n this.checkValue(li.getAttribute('data-value'));\n if (this.enableMask) {\n this.createMask();\n }\n this.selectedElement = li;\n this.activeIndex = Array.prototype.slice.call(this.liCollections).indexOf(li);\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n addClass([this.selectedElement], SELECTED);\n this.selectedElement.setAttribute('aria-selected', 'true');\n this.checkValueChange(event, true);\n }\n };\n TimePicker.prototype.onMouseLeave = function () {\n this.removeHover(HOVER);\n };\n TimePicker.prototype.scrollHandler = function () {\n if (this.getModuleName() === 'timepicker' && Browser.isDevice) {\n return;\n }\n else {\n this.hide();\n }\n };\n TimePicker.prototype.setMinMax = function (minVal, maxVal) {\n if (isNullOrUndefined(this.checkDateValue(minVal))) {\n this.initMin = this.getDateObject('12:00:00 AM');\n }\n if (isNullOrUndefined(this.checkDateValue(maxVal))) {\n this.initMax = this.getDateObject('11:59:59 PM');\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n TimePicker.prototype.validateMinMax = function (dateVal, minVal, maxVal) {\n var value = dateVal instanceof Date ? dateVal : this.getDateObject(dateVal);\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n dateVal = this.strictOperation(this.initMin, this.initMax, dateVal, value);\n }\n else if (+(this.createDateObj(this.getFormattedValue(this.initMin))) >\n +(this.createDateObj(this.getFormattedValue(this.initMax)))) {\n this.disableTimeIcon();\n }\n if (this.strictMode) {\n dateVal = this.valueIsDisable(dateVal) ? dateVal : null;\n }\n this.checkErrorState(dateVal);\n return dateVal;\n };\n TimePicker.prototype.valueIsDisable = function (value) {\n if (this.disableItemCollection.length > 0) {\n if (this.disableItemCollection.length === this.timeCollections.length) {\n return false;\n }\n var time = value instanceof Date ? this.objToString(value) : value;\n for (var index = 0; index < this.disableItemCollection.length; index++) {\n if (time === this.disableItemCollection[index]) {\n return false;\n }\n }\n }\n return true;\n };\n TimePicker.prototype.validateState = function (val) {\n if (!this.strictMode) {\n if (this.valueIsDisable(val)) {\n var value = typeof val === 'string' ? this.setCurrentDate(this.getDateObject(val)) :\n this.setCurrentDate(this.getDateObject(val));\n var maxValue = this.setCurrentDate(this.getDateObject(this.initMax));\n var minValue = this.setCurrentDate(this.getDateObject(this.initMin));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n if ((+(value) > +(maxValue)) || (+(value) < +(minValue))) {\n return false;\n }\n }\n else {\n if ((+(maxValue) < +(minValue)) || this.inputElement.value !== '') {\n return false;\n }\n }\n }\n else {\n return false;\n }\n }\n return true;\n };\n TimePicker.prototype.strictOperation = function (minimum, maximum, dateVal, val) {\n var maxValue = this.createDateObj(this.getFormattedValue(maximum));\n var minValue = this.createDateObj(this.getFormattedValue(minimum));\n var value = this.createDateObj(this.getFormattedValue(val));\n if (this.strictMode) {\n if (+minValue > +maxValue) {\n this.disableTimeIcon();\n this.initValue = this.getDateObject(maxValue);\n this.updateInputValue(this.getValue(this.initValue));\n if (this.enableMask) {\n this.createMask();\n }\n return this.inputElement.value;\n }\n else if (+minValue >= +value) {\n return this.getDateObject(minValue);\n }\n else if (+value >= +maxValue || +minValue === +maxValue) {\n return this.getDateObject(maxValue);\n }\n }\n else {\n if (+minValue > +maxValue) {\n this.disableTimeIcon();\n if (!isNaN(+this.createDateObj(dateVal))) {\n return dateVal;\n }\n }\n }\n return dateVal;\n };\n TimePicker.prototype.bindEvents = function () {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.popupHandler, this);\n EventHandler.add(this.inputElement, 'blur', this.inputBlurHandler, this);\n EventHandler.add(this.inputElement, 'focus', this.inputFocusHandler, this);\n EventHandler.add(this.inputElement, 'change', this.inputChangeHandler, this);\n EventHandler.add(this.inputElement, 'input', this.inputEventHandler, this);\n if (this.enableMask) {\n EventHandler.add(this.inputElement, 'keydown', this.keydownHandler, this);\n }\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.clearHandler, this);\n }\n if (this.formElement) {\n EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);\n }\n if (!Browser.isDevice) {\n this.keyConfigure = extend(this.keyConfigure, this.keyConfigs);\n this.inputEvent = new KeyboardEvents(this.inputWrapper.container, {\n keyAction: this.inputHandler.bind(this),\n keyConfigs: this.keyConfigure,\n eventName: 'keydown'\n });\n if (this.showClearButton && this.inputElement) {\n EventHandler.add(this.inputElement, 'mousedown', this.mouseDownHandler, this);\n }\n }\n };\n TimePicker.prototype.keydownHandler = function (e) {\n switch (e.code) {\n case 'Delete':\n if (this.enableMask && !this.popupObj && !this.readonly) {\n this.notify('keyDownHandler', {\n module: 'MaskedDateTime',\n e: e\n });\n }\n break;\n default:\n break;\n }\n };\n TimePicker.prototype.formResetHandler = function () {\n if (!this.enabled) {\n return;\n }\n if (!this.inputElement.disabled) {\n var timeValue = this.inputElement.getAttribute('value');\n var val = this.checkDateValue(this.inputEleValue);\n if (this.element.tagName === 'EJS-TIMEPICKER') {\n val = null;\n timeValue = '';\n this.inputElement.setAttribute('value', '');\n }\n this.setProperties({ value: val }, true);\n this.prevDate = this.value;\n this.valueWithMinutes = this.value;\n this.initValue = this.value;\n if (this.inputElement) {\n this.updateInputValue(timeValue);\n if (this.enableMask) {\n if (!timeValue) {\n this.updateInputValue(this.maskedDateValue);\n }\n this.createMask();\n }\n this.checkErrorState(timeValue);\n this.prevValue = this.inputElement.value;\n }\n }\n };\n TimePicker.prototype.inputChangeHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n e.stopPropagation();\n };\n TimePicker.prototype.inputEventHandler = function () {\n if (this.enableMask) {\n this.notify('inputHandler', {\n module: 'MaskedDateTime'\n });\n }\n };\n TimePicker.prototype.unBindEvents = function () {\n if (this.inputWrapper) {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.popupHandler);\n }\n EventHandler.remove(this.inputElement, 'blur', this.inputBlurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.inputFocusHandler);\n EventHandler.remove(this.inputElement, 'change', this.inputChangeHandler);\n EventHandler.remove(this.inputElement, 'input', this.inputEventHandler);\n if (this.inputEvent) {\n this.inputEvent.destroy();\n }\n EventHandler.remove(this.inputElement, 'mousedown touchstart', this.mouseDownHandler);\n if (this.showClearButton && !isNullOrUndefined(this.inputWrapper) && !isNullOrUndefined(this.inputWrapper.clearButton)) {\n EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.clearHandler);\n }\n if (this.formElement) {\n EventHandler.remove(this.formElement, 'reset', this.formResetHandler);\n }\n };\n TimePicker.prototype.bindClearEvent = function () {\n if (this.showClearButton && this.inputWrapper.clearButton) {\n EventHandler.add(this.inputWrapper.clearButton, 'mousedown', this.clearHandler, this);\n }\n };\n TimePicker.prototype.raiseClearedEvent = function (e) {\n var clearedArgs = {\n event: e\n };\n this.trigger('cleared', clearedArgs);\n };\n TimePicker.prototype.clearHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n e.preventDefault();\n if (!isNullOrUndefined(this.value)) {\n this.clear(e);\n }\n else {\n this.resetState();\n this.raiseClearedEvent(e);\n }\n if (this.popupWrapper) {\n this.popupWrapper.scrollTop = 0;\n }\n if (this.enableMask) {\n this.notify('clearHandler', {\n module: 'MaskedDateTime'\n });\n }\n if (closest(this.element, 'form')) {\n var element = this.element;\n var keyupEvent = document.createEvent('KeyboardEvent');\n keyupEvent.initEvent('keyup', false, true);\n element.dispatchEvent(keyupEvent);\n }\n };\n TimePicker.prototype.clear = function (event) {\n this.setProperties({ value: null }, true);\n this.initValue = null;\n this.resetState();\n this.raiseClearedEvent(event);\n this.changeEvent(event);\n };\n TimePicker.prototype.setZIndex = function () {\n if (this.popupObj) {\n this.popupObj.zIndex = this.zIndex;\n this.popupObj.dataBind();\n }\n };\n TimePicker.prototype.checkAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['step', 'disabled', 'readonly', 'style', 'name', 'value', 'min', 'max', 'placeholder'];\n var value;\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {\n switch (prop) {\n case 'disabled':\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '' || this.inputElement.getAttribute(prop) === 'true' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'style':\n this.inputStyle = this.inputElement.getAttribute(prop);\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.inputElement.getAttribute(prop) === 'readonly' ||\n this.inputElement.getAttribute(prop) === '' || this.inputElement.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'name':\n this.inputElement.setAttribute('name', this.inputElement.getAttribute(prop));\n break;\n case 'step':\n this.step = parseInt(this.inputElement.getAttribute(prop), 10);\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, !isDynamic);\n }\n break;\n case 'min':\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['min'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.setProperties({ min: value }, !isDynamic);\n }\n }\n break;\n case 'max':\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['max'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.setProperties({ max: value }, !isDynamic);\n }\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.timeOptions) || (this.timeOptions['value'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.initValue = value;\n this.updateInput(false, this.initValue);\n this.setProperties({ value: value }, !isDynamic);\n }\n }\n break;\n }\n }\n }\n };\n TimePicker.prototype.setCurrentDate = function (value) {\n if (isNullOrUndefined(this.checkDateValue(value))) {\n return null;\n }\n return new Date(YEAR, MONTH, DAY, value.getHours(), value.getMinutes(), value.getSeconds());\n };\n TimePicker.prototype.getTextFormat = function () {\n var time = 0;\n if (this.cldrTimeFormat().split(' ')[0] === 'a' || this.cldrTimeFormat().indexOf('a') === 0) {\n time = 1;\n }\n else if (this.cldrTimeFormat().indexOf('a') < 0) {\n var strArray = this.cldrTimeFormat().split(' ');\n for (var i = 0; i < strArray.length; i++) {\n if (strArray[i].toLowerCase().indexOf('h') >= 0) {\n time = i;\n break;\n }\n }\n }\n return time;\n };\n TimePicker.prototype.updateValue = function (value, event) {\n var val;\n if (this.isNullOrEmpty(value)) {\n this.resetState();\n }\n else {\n val = this.checkValue(value);\n if (this.strictMode) {\n // this case set previous value to the text box when set invalid date\n var inputVal = (val === null && value.trim().length > 0) ?\n this.previousState(this.prevDate) : this.inputElement.value;\n this.updateInputValue(inputVal);\n if (this.enableMask) {\n if (!inputVal) {\n this.updateInputValue(this.maskedDateValue);\n }\n if (isNullOrUndefined(val) && value !== this.maskedDateValue) {\n this.createMask();\n }\n if (isNullOrUndefined(val) && value === this.maskedDateValue) {\n this.updateInputValue(this.maskedDateValue);\n }\n }\n }\n }\n this.checkValueChange(event, typeof value === 'string' ? false : true);\n };\n TimePicker.prototype.previousState = function (date) {\n var value = this.getDateObject(date);\n for (var i = 0; i < this.timeCollections.length; i++) {\n if (+value === this.timeCollections[i]) {\n this.activeIndex = i;\n this.selectedElement = this.liCollections[i];\n this.valueWithMinutes = new Date(this.timeCollections[i]);\n break;\n }\n }\n return this.prevValue;\n };\n TimePicker.prototype.resetState = function () {\n this.removeSelection();\n Input.setValue('', this.inputElement, this.floatLabelType, false);\n this.valueWithMinutes = this.activeIndex = null;\n if (!this.strictMode) {\n this.checkErrorState(null);\n }\n };\n TimePicker.prototype.objToString = function (val) {\n if (isNullOrUndefined(this.checkDateValue(val))) {\n return null;\n }\n else {\n return this.globalize.formatDate(val, { format: this.cldrTimeFormat(), type: 'time' });\n }\n };\n TimePicker.prototype.checkValue = function (value) {\n if (!this.isNullOrEmpty(value)) {\n var date = value instanceof Date ? value : this.getDateObject(value);\n return this.validateValue(date, value);\n }\n this.resetState();\n return this.valueWithMinutes = null;\n };\n TimePicker.prototype.validateValue = function (date, value) {\n var time;\n var val = this.validateMinMax(value, this.min, this.max);\n var newval = this.getDateObject(val);\n if (this.getFormattedValue(newval) !== this.getFormattedValue(this.value)) {\n this.valueWithMinutes = isNullOrUndefined(newval) ? null : newval;\n time = this.objToString(this.valueWithMinutes);\n }\n else {\n if (this.strictMode) {\n //for strict mode case, when value not present within a range. Reset the nearest range value.\n date = newval;\n }\n this.valueWithMinutes = this.checkDateValue(date);\n time = this.objToString(this.valueWithMinutes);\n }\n if (!this.strictMode && isNullOrUndefined(time)) {\n var value_1 = val.trim().length > 0 ? val : '';\n this.updateInputValue(value_1);\n if (this.enableMask) {\n if (!value_1) {\n this.updateInputValue(this.maskedDateValue);\n }\n }\n }\n else {\n this.updateInputValue(time);\n if (this.enableMask) {\n if (time === '') {\n this.updateInputValue(this.maskedDateValue);\n }\n if (isNullOrUndefined(time) && value !== this.maskedDateValue) {\n this.createMask();\n }\n if (isNullOrUndefined(time) && value === this.maskedDateValue) {\n this.updateInputValue(this.maskedDateValue);\n }\n }\n }\n return time;\n };\n TimePicker.prototype.createMask = function () {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n };\n TimePicker.prototype.findNextElement = function (event) {\n var textVal = (this.inputElement).value;\n var value = isNullOrUndefined(this.valueWithMinutes) ? this.createDateObj(textVal) :\n this.getDateObject(this.valueWithMinutes);\n var timeVal = null;\n var count = this.liCollections.length;\n var collections = this.timeCollections;\n if (!isNullOrUndefined(this.checkDateValue(value)) || !isNullOrUndefined(this.activeIndex)) {\n if (event.action === 'home') {\n var index = this.validLiElement(0);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n }\n else if (event.action === 'end') {\n var index = this.validLiElement(collections.length - 1, true);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n }\n else {\n if (event.action === 'down') {\n for (var i = 0; i < count; i++) {\n if (+value < this.timeCollections[i]) {\n var index = this.validLiElement(i);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n break;\n }\n else if (i === count - 1) {\n var index = this.validLiElement(0);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n break;\n }\n }\n }\n else {\n for (var i = count - 1; i >= 0; i--) {\n if (+value > this.timeCollections[i]) {\n var index = this.validLiElement(i, true);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n break;\n }\n else if (i === 0) {\n var index = this.validLiElement(count - 1);\n timeVal = +(this.createDateObj(new Date(this.timeCollections[index])));\n this.activeIndex = index;\n break;\n }\n }\n }\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.elementValue(isNullOrUndefined(timeVal) ? null : new Date(timeVal));\n }\n else {\n this.selectNextItem(event);\n }\n };\n TimePicker.prototype.selectNextItem = function (event) {\n var index = this.validLiElement(0, event.action === 'down' ? false : true);\n this.activeIndex = index;\n this.selectedElement = this.liCollections[index];\n this.elementValue(new Date(this.timeCollections[index]));\n };\n TimePicker.prototype.elementValue = function (value) {\n if (!isNullOrUndefined(this.checkDateValue(value))) {\n this.checkValue(value);\n }\n };\n TimePicker.prototype.validLiElement = function (index, backward) {\n var elementIndex = null;\n var items = isNullOrUndefined(this.popupWrapper) ? this.liCollections :\n this.popupWrapper.querySelectorAll('.' + LISTCLASS);\n var isCheck = true;\n if (items.length) {\n if (backward) {\n for (var i = index; i >= 0; i--) {\n if (!items[i].classList.contains(DISABLED)) {\n elementIndex = i;\n break;\n }\n else if (i === 0) {\n if (isCheck) {\n index = i = items.length;\n isCheck = false;\n }\n }\n }\n }\n else {\n for (var i = index; i <= items.length - 1; i++) {\n if (!items[i].classList.contains(DISABLED)) {\n elementIndex = i;\n break;\n }\n else if (i === items.length - 1) {\n if (isCheck) {\n index = i = -1;\n isCheck = false;\n }\n }\n }\n }\n }\n return elementIndex;\n };\n TimePicker.prototype.keyHandler = function (event) {\n if (isNullOrUndefined(this.step) || this.step <= 0 || !isNullOrUndefined(this.inputWrapper)\n && this.inputWrapper.buttons[0].classList.contains(DISABLED)) {\n return;\n }\n var count = this.timeCollections.length;\n if (isNullOrUndefined(this.getActiveElement()) || this.getActiveElement().length === 0) {\n if (this.liCollections.length > 0) {\n if (isNullOrUndefined(this.value) && isNullOrUndefined(this.activeIndex)) {\n var index = this.validLiElement(0, event.action === 'down' ? false : true);\n this.activeIndex = index;\n this.selectedElement = this.liCollections[index];\n this.elementValue(new Date(this.timeCollections[index]));\n }\n else {\n this.findNextElement(event);\n }\n }\n else {\n this.findNextElement(event);\n }\n }\n else {\n var nextItem = void 0;\n if ((event.keyCode >= 37) && (event.keyCode <= 40)) {\n var index = (event.keyCode === 40 || event.keyCode === 39) ? ++this.activeIndex : --this.activeIndex;\n this.activeIndex = index = this.activeIndex === (count) ? 0 : this.activeIndex;\n this.activeIndex = index = this.activeIndex < 0 ? (count - 1) : this.activeIndex;\n this.activeIndex = index = this.validLiElement(this.activeIndex, (event.keyCode === 40 || event.keyCode === 39) ?\n false : true);\n nextItem = isNullOrUndefined(this.timeCollections[index]) ?\n this.timeCollections[0] : this.timeCollections[index];\n }\n else if (event.action === 'home') {\n var index = this.validLiElement(0);\n this.activeIndex = index;\n nextItem = this.timeCollections[index];\n }\n else if (event.action === 'end') {\n var index = this.validLiElement(count - 1, true);\n this.activeIndex = index;\n nextItem = this.timeCollections[index];\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.elementValue(new Date(nextItem));\n }\n this.isNavigate = true;\n this.setHover(this.selectedElement, NAVIGATION);\n this.setActiveDescendant();\n if (this.enableMask) {\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 getValue('main.' + c + '.dates.calendars.gregorian.timeFormats.short', ld);\n };\n TimePicker.prototype.getCultureDateObject = function (ld, c) {\n return getValue('main.' + c + '.dates.calendars.gregorian.dateFormats.short', ld);\n };\n TimePicker.prototype.wireListEvents = function () {\n EventHandler.add(this.listWrapper, 'click', this.onMouseClick, this);\n if (!Browser.isDevice) {\n EventHandler.add(this.listWrapper, 'mouseover', this.onMouseOver, this);\n EventHandler.add(this.listWrapper, 'mouseout', this.onMouseLeave, this);\n }\n };\n TimePicker.prototype.unWireListEvents = function () {\n if (this.listWrapper) {\n EventHandler.remove(this.listWrapper, 'click', this.onMouseClick);\n if (!Browser.isDevice) {\n EventHandler.remove(this.listWrapper, 'mouseover', this.onMouseOver);\n EventHandler.remove(this.listWrapper, 'mouseout', this.onMouseLeave);\n }\n }\n };\n TimePicker.prototype.valueProcess = function (event, value) {\n var result = (isNullOrUndefined(this.checkDateValue(value))) ? null : value;\n if (+this.prevDate !== +result) {\n this.initValue = result;\n this.changeEvent(event);\n }\n };\n TimePicker.prototype.changeEvent = function (e) {\n this.addSelection();\n this.updateInput(true, this.initValue);\n var eventArgs = {\n event: (e || null),\n value: this.value,\n text: (this.inputElement).value,\n isInteracted: !isNullOrUndefined(e),\n element: this.element\n };\n eventArgs.value = this.valueWithMinutes || this.getDateObject(this.inputElement.value);\n this.prevDate = this.valueWithMinutes || this.getDateObject(this.inputElement.value);\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n else {\n this.trigger('change', eventArgs);\n }\n this.invalidValueString = null;\n this.checkErrorState(this.value);\n };\n TimePicker.prototype.updateInput = function (isUpdate, date) {\n if (isUpdate) {\n this.prevValue = this.getValue(date);\n }\n this.prevDate = this.valueWithMinutes = date;\n if ((typeof date !== 'number') || (this.value && +new Date(+this.value).setMilliseconds(0)) !== +date) {\n this.setProperties({ value: date }, true);\n if (this.enableMask && this.value) {\n this.createMask();\n }\n }\n if (!this.strictMode && isNullOrUndefined(this.value) && this.invalidValueString) {\n this.checkErrorState(this.invalidValueString);\n this.updateInputValue(this.invalidValueString);\n }\n this.clearIconState();\n };\n TimePicker.prototype.setActiveDescendant = function () {\n if (!isNullOrUndefined(this.selectedElement) && this.value) {\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });\n }\n else {\n this.inputElement.removeAttribute('aria-activedescendant');\n }\n };\n TimePicker.prototype.removeSelection = function () {\n this.removeHover(HOVER);\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + SELECTED);\n if (items.length) {\n removeClass(items, SELECTED);\n items[0].removeAttribute('aria-selected');\n }\n }\n };\n TimePicker.prototype.removeHover = function (className) {\n var hoveredItem = this.getHoverItem(className);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, className);\n if (className === NAVIGATION) {\n hoveredItem[0].removeAttribute('aria-selected');\n }\n }\n };\n TimePicker.prototype.getHoverItem = function (className) {\n var hoveredItem;\n if (!isNullOrUndefined(this.popupWrapper)) {\n hoveredItem = this.popupWrapper.querySelectorAll('.' + className);\n }\n return hoveredItem;\n };\n TimePicker.prototype.setActiveClass = function () {\n if (!isNullOrUndefined(this.popupWrapper)) {\n var items = this.popupWrapper.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n for (var i = 0; i < items.length; i++) {\n if ((this.timeCollections[i] === +this.getDateObject(this.valueWithMinutes))) {\n items[i].setAttribute('aria-selected', 'true');\n this.selectedElement = items[i];\n this.activeIndex = i;\n break;\n }\n }\n }\n }\n };\n TimePicker.prototype.addSelection = function () {\n this.selectedElement = null;\n this.removeSelection();\n this.setActiveClass();\n if (!isNullOrUndefined(this.selectedElement)) {\n addClass([this.selectedElement], SELECTED);\n this.selectedElement.setAttribute('aria-selected', 'true');\n }\n };\n TimePicker.prototype.isValidLI = function (li) {\n return (li && li.classList.contains(LISTCLASS) && !li.classList.contains(DISABLED));\n };\n TimePicker.prototype.createDateObj = function (val) {\n var formatStr = null;\n var today = this.globalize.formatDate(new Date(), { format: formatStr, skeleton: 'short', type: 'date' });\n var value = null;\n if (typeof val === 'string') {\n if (val.toUpperCase().indexOf('AM') > -1 || val.toUpperCase().indexOf('PM') > -1) {\n today = this.defaultCulture.formatDate(new Date(), { format: formatStr, skeleton: 'short', type: 'date' });\n value = isNaN(+new Date(today + ' ' + val)) ? null : new Date(new Date(today + ' ' + val).setMilliseconds(0));\n if (isNullOrUndefined(value)) {\n value = this.timeParse(today, val);\n }\n }\n else {\n value = this.timeParse(today, val);\n }\n }\n else if (val instanceof Date) {\n value = val;\n }\n return value;\n };\n TimePicker.prototype.timeParse = function (today, val) {\n var value;\n value = this.globalize.parseDate(today + ' ' + val, {\n format: this.cldrDateFormat() + ' ' + this.cldrTimeFormat(), type: 'datetime'\n });\n value = isNullOrUndefined(value) ? this.globalize.parseDate(today + ' ' + val, {\n format: this.cldrDateFormat() + ' ' + this.dateToNumeric(), type: 'datetime'\n }) : value;\n value = isNullOrUndefined(value) ? value : new Date(value.setMilliseconds(0));\n return value;\n };\n TimePicker.prototype.createListItems = function () {\n var _this = this;\n this.listWrapper = this.createElement('div', { className: CONTENT, attrs: { 'tabindex': '-1' } });\n var start;\n var interval = this.step * 60000;\n var listItems = [];\n this.timeCollections = [];\n this.disableItemCollection = [];\n start = +(this.getDateObject(this.initMin).setMilliseconds(0));\n var end = +(this.getDateObject(this.initMax).setMilliseconds(0));\n while (end >= start) {\n this.timeCollections.push(start);\n listItems.push(this.globalize.formatDate(new Date(start), { format: this.cldrTimeFormat(), type: 'time' }));\n start += interval;\n }\n var listBaseOptions = {\n itemCreated: function (args) {\n var eventArgs = {\n element: args.item,\n text: args.text, value: _this.getDateObject(args.text), isDisabled: false\n };\n _this.trigger('itemRender', eventArgs, function (eventArgs) {\n if (eventArgs.isDisabled) {\n eventArgs.element.classList.add(DISABLED);\n }\n if (eventArgs.element.classList.contains(DISABLED)) {\n _this.disableItemCollection.push(eventArgs.element.getAttribute('data-value'));\n }\n });\n }\n };\n this.listTag = ListBase.createList(this.createElement, listItems, listBaseOptions, true);\n attributes(this.listTag, { 'role': 'listbox', 'aria-hidden': 'false', 'id': this.element.id + '_options', 'tabindex': '0' });\n append([this.listTag], this.listWrapper);\n };\n TimePicker.prototype.documentClickHandler = function (event) {\n var target = event.target;\n if ((!isNullOrUndefined(this.popupObj) && !isNullOrUndefined(this.inputWrapper) && (this.inputWrapper.container.contains(target) && event.type !== 'mousedown' ||\n (this.popupObj.element && this.popupObj.element.contains(target)))) && event.type !== 'touchstart') {\n event.preventDefault();\n }\n if (!(closest(target, '[id=\"' + this.popupObj.element.id + '\"]')) && target !== this.inputElement\n && target !== (this.inputWrapper && this.inputWrapper.buttons[0]) &&\n target !== (this.inputWrapper && this.inputWrapper.clearButton) &&\n target !== (this.inputWrapper && this.inputWrapper.container)\n && (!target.classList.contains('e-dlg-overlay'))) {\n if (this.isPopupOpen()) {\n this.hide();\n this.focusOut();\n }\n }\n else if (target !== this.inputElement) {\n if (!Browser.isDevice) {\n this.isPreventBlur = (Browser.isIE || Browser.info.name === 'edge') && (document.activeElement === this.inputElement)\n && (target === this.popupWrapper);\n }\n }\n };\n TimePicker.prototype.setEnableRtl = function () {\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n if (this.popupObj) {\n this.popupObj.enableRtl = this.enableRtl;\n this.popupObj.dataBind();\n }\n };\n TimePicker.prototype.setEnable = function () {\n Input.setEnabled(this.enabled, this.inputElement, this.floatLabelType);\n if (this.enabled) {\n removeClass([this.inputWrapper.container], DISABLED);\n attributes(this.inputElement, { 'aria-disabled': 'false' });\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.hide();\n addClass([this.inputWrapper.container], DISABLED);\n attributes(this.inputElement, { 'aria-disabled': 'true' });\n this.inputElement.tabIndex = -1;\n }\n };\n TimePicker.prototype.getProperty = function (date, val) {\n if (val === 'min') {\n this.initMin = this.checkDateValue(new Date(this.checkInValue(date.min)));\n this.setProperties({ min: this.initMin }, true);\n }\n else {\n this.initMax = this.checkDateValue(new Date(this.checkInValue(date.max)));\n this.setProperties({ max: this.initMax }, true);\n }\n if (this.inputElement.value === '') {\n this.validateMinMax(this.value, this.min, this.max);\n }\n else {\n this.checkValue(this.inputElement.value);\n }\n this.checkValueChange(null, false);\n };\n TimePicker.prototype.inputBlurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n // IE popup closing issue when click over the scrollbar\n if (this.isPreventBlur && this.isPopupOpen()) {\n this.inputElement.focus();\n return;\n }\n this.closePopup(0, e);\n if (this.enableMask && this.maskedDateValue && this.placeholder && this.floatLabelType !== 'Always') {\n if (this.inputElement.value === this.maskedDateValue && !this.value && (this.floatLabelType === 'Auto' || this.floatLabelType === 'Never' || this.placeholder)) {\n this.updateInputValue('');\n }\n }\n removeClass([this.inputWrapper.container], [FOCUS]);\n if (this.getText() !== this.inputElement.value) {\n this.updateValue((this.inputElement).value, e);\n }\n else if (this.inputElement.value.trim().length === 0) {\n this.resetState();\n }\n this.cursorDetails = null;\n this.isNavigate = false;\n if (this.inputElement.value === '') {\n this.invalidValueString = null;\n }\n var blurArguments = {\n model: this\n };\n this.trigger('blur', blurArguments);\n };\n /**\n * Focuses out the TimePicker textbox element.\n *\n * @returns {void}\n */\n TimePicker.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement) {\n this.inputElement.blur();\n removeClass([this.inputWrapper.container], [FOCUS]);\n var blurArguments = {\n model: this\n };\n this.trigger('blur', blurArguments);\n }\n };\n TimePicker.prototype.isPopupOpen = function () {\n if (this.popupWrapper && this.popupWrapper.classList.contains('' + ROOT)) {\n return true;\n }\n return false;\n };\n TimePicker.prototype.inputFocusHandler = function () {\n if (!this.enabled) {\n return;\n }\n var focusArguments = {\n model: this\n };\n if (!this.readonly && !Browser.isDevice && !this.enableMask) {\n this.selectInputText();\n }\n if (this.enableMask && !this.inputElement.value && this.placeholder) {\n if (this.maskedDateValue && !this.value && (this.floatLabelType === 'Auto' || this.floatLabelType === 'Never' || this.placeholder)) {\n this.updateInputValue(this.maskedDateValue);\n this.inputElement.selectionStart = 0;\n this.inputElement.selectionEnd = this.inputElement.value.length;\n }\n }\n this.trigger('focus', focusArguments);\n this.clearIconState();\n if (this.openOnFocus) {\n this.show();\n }\n };\n /**\n * Focused the TimePicker textbox element.\n *\n * @returns {void}\n */\n TimePicker.prototype.focusIn = function () {\n if (document.activeElement !== this.inputElement && this.enabled) {\n this.inputElement.focus();\n }\n };\n /**\n * Hides the TimePicker popup.\n *\n * @returns {void}\n\n */\n TimePicker.prototype.hide = function () {\n this.closePopup(100, null);\n this.clearIconState();\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Opens the popup to show the list items.\n *\n * @returns {void}\n\n */\n TimePicker.prototype.show = function (event) {\n var _this = this;\n if ((this.enabled && this.readonly) || !this.enabled || this.popupWrapper) {\n return;\n }\n else {\n this.popupCreation();\n if (Browser.isDevice && this.listWrapper) {\n this.modal = this.createElement('div');\n this.modal.className = '' + ROOT + ' e-time-modal';\n document.body.className += ' ' + OVERFLOW;\n document.body.appendChild(this.modal);\n }\n if (Browser.isDevice) {\n this.mobileTimePopupWrap = this.createElement('div', { className: 'e-timepicker-mob-popup-wrap' });\n document.body.appendChild(this.mobileTimePopupWrap);\n }\n this.openPopupEventArgs = {\n popup: this.popupObj || null,\n cancel: false,\n event: event || null,\n name: 'open',\n appendTo: Browser.isDevice ? this.mobileTimePopupWrap : document.body\n };\n var eventArgs = this.openPopupEventArgs;\n this.trigger('open', eventArgs, function (eventArgs) {\n _this.openPopupEventArgs = eventArgs;\n if (!_this.openPopupEventArgs.cancel && !_this.inputWrapper.buttons[0].classList.contains(DISABLED)) {\n _this.openPopupEventArgs.appendTo.appendChild(_this.popupWrapper);\n _this.popupAlignment(_this.openPopupEventArgs);\n _this.setScrollPosition();\n if (!Browser.isDevice) {\n _this.inputElement.focus();\n }\n var openAnimation = {\n name: 'FadeIn',\n duration: ANIMATIONDURATION\n };\n _this.popupObj.refreshPosition(_this.anchor);\n if (_this.zIndex === 1000) {\n _this.popupObj.show(new Animation(openAnimation), _this.element);\n }\n else {\n _this.popupObj.show(new Animation(openAnimation), null);\n }\n _this.setActiveDescendant();\n attributes(_this.inputElement, { 'aria-expanded': 'true' });\n attributes(_this.inputElement, { 'aria-owns': _this.inputElement.id + '_options' });\n attributes(_this.inputElement, { 'aria-controls': _this.inputElement.id });\n addClass([_this.inputWrapper.container], FOCUS);\n EventHandler.add(document, 'mousedown touchstart', _this.documentClickHandler, _this);\n _this.setOverlayIndex(_this.mobileTimePopupWrap, _this.popupObj.element, _this.modal, Browser.isDevice);\n }\n else {\n _this.popupObj.destroy();\n _this.popupWrapper = _this.listTag = undefined;\n _this.liCollections = _this.timeCollections = _this.disableItemCollection = [];\n _this.popupObj = null;\n }\n });\n if (Browser.isDevice) {\n var dlgOverlay = this.createElement('div', { className: 'e-dlg-overlay' });\n dlgOverlay.style.zIndex = (this.zIndex - 1).toString();\n this.mobileTimePopupWrap.appendChild(dlgOverlay);\n }\n }\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n TimePicker.prototype.setOverlayIndex = function (popupWrapper, timePopupElement, modal, isDevice) {\n if (isDevice && !isNullOrUndefined(timePopupElement) && !isNullOrUndefined(modal) && !isNullOrUndefined(popupWrapper)) {\n var index = parseInt(timePopupElement.style.zIndex, 10) ? parseInt(timePopupElement.style.zIndex, 10) : 1000;\n modal.style.zIndex = (index - 1).toString();\n popupWrapper.style.zIndex = index.toString();\n }\n };\n TimePicker.prototype.formatValues = function (type) {\n var value;\n if (typeof type === 'number') {\n value = formatUnit(type);\n }\n else if (typeof type === 'string') {\n value = (type.match(/px|%|em/)) ? type : isNaN(parseInt(type, 10)) ? type : formatUnit(type);\n }\n return value;\n };\n TimePicker.prototype.popupAlignment = function (args) {\n args.popup.position.X = this.formatValues(args.popup.position.X);\n args.popup.position.Y = this.formatValues(args.popup.position.Y);\n if (!isNaN(parseFloat(args.popup.position.X)) || !isNaN(parseFloat(args.popup.position.Y))) {\n this.popupObj.relateTo = this.anchor = document.body;\n this.popupObj.targetType = 'container';\n }\n if (!isNaN(parseFloat(args.popup.position.X))) {\n this.popupObj.offsetX = parseFloat(args.popup.position.X);\n }\n if (!isNaN(parseFloat(args.popup.position.Y))) {\n this.popupObj.offsetY = parseFloat(args.popup.position.Y);\n }\n if (!Browser.isDevice) {\n switch (args.popup.position.X) {\n case 'left':\n break;\n case 'right':\n args.popup.offsetX = this.containerStyle.width;\n break;\n case 'center':\n args.popup.offsetX = -(this.containerStyle.width / 2);\n break;\n }\n switch (args.popup.position.Y) {\n case 'top':\n break;\n case 'bottom':\n break;\n case 'center':\n args.popup.offsetY = -(this.containerStyle.height / 2);\n break;\n }\n if (args.popup.position.X === 'center' && args.popup.position.Y === 'center') {\n this.popupObj.relateTo = this.inputWrapper.container;\n this.anchor = this.inputElement;\n this.popupObj.targetType = 'relative';\n }\n }\n else {\n if (args.popup.position.X === 'center' && args.popup.position.Y === 'center') {\n this.popupObj.relateTo = this.anchor = document.body;\n this.popupObj.offsetY = 0;\n this.popupObj.targetType = 'container';\n this.popupObj.collision = { X: 'fit', Y: 'fit' };\n }\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets the properties to be maintained upon browser refresh.\n *\n * @returns {string}\n */\n TimePicker.prototype.getPersistData = function () {\n var keyEntity = ['value'];\n return this.addOnPersist(keyEntity);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * To get component name\n *\n * @returns {string} Returns the component name.\n * @private\n */\n TimePicker.prototype.getModuleName = function () {\n return 'timepicker';\n };\n /**\n * Called internally if any of the property value changed.\n *\n * @param {TimePickerModel} newProp - Returns the dynamic property value of the component.\n * @param {TimePickerModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n TimePicker.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement, this.floatLabelType);\n if (this.readonly) {\n this.hide();\n }\n this.setTimeAllowEdit();\n break;\n case 'enabled':\n this.setProperties({ enabled: newProp.enabled }, true);\n this.setEnable();\n break;\n case 'allowEdit':\n this.setTimeAllowEdit();\n break;\n case 'enableRtl':\n this.setProperties({ enableRtl: newProp.enableRtl }, true);\n this.setEnableRtl();\n break;\n case 'cssClass':\n this.updateCssClass(newProp.cssClass, oldProp.cssClass);\n break;\n case 'zIndex':\n this.setProperties({ zIndex: newProp.zIndex }, true);\n this.setZIndex();\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToElement();\n this.updateHtmlAttributeToWrapper();\n this.checkAttributes(true);\n break;\n case 'min':\n case 'max':\n this.getProperty(newProp, prop);\n break;\n case 'showClearButton':\n Input.setClearButton(this.showClearButton, this.inputElement, this.inputWrapper);\n this.bindClearEvent();\n break;\n case 'locale':\n this.setProperties({ locale: newProp.locale }, true);\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n if (this.timeOptions && this.timeOptions.placeholder == null) {\n this.updatePlaceHolder();\n }\n this.setValue(this.value);\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n }\n break;\n case 'width':\n setStyleAttribute(this.inputWrapper.container, { 'width': this.setWidth(newProp.width) });\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n break;\n case 'format':\n this.setProperties({ format: newProp.format }, true);\n this.checkTimeFormat();\n this.setValue(this.value);\n if (this.enableMask) {\n this.createMask();\n if (!this.value) {\n this.updateInputValue(this.maskedDateValue);\n }\n }\n break;\n case 'value':\n this.invalidValueString = null;\n this.checkInvalidValue(newProp.value);\n newProp.value = this.value;\n if (!this.invalidValueString) {\n if (typeof newProp.value === 'string') {\n this.setProperties({ value: this.checkDateValue(new Date(newProp.value)) }, true);\n newProp.value = this.value;\n }\n else {\n if ((newProp.value && +new Date(+newProp.value).setMilliseconds(0)) !== +this.value) {\n newProp.value = this.checkDateValue(new Date('' + newProp.value));\n }\n }\n this.initValue = newProp.value;\n newProp.value = this.compareFormatChange(this.checkValue(newProp.value));\n }\n else {\n this.updateInputValue(this.invalidValueString);\n this.checkErrorState(this.invalidValueString);\n }\n if (this.enableMask && isNullOrUndefined(newProp.value)) {\n this.updateInputValue(this.maskedDateValue);\n this.checkErrorState(this.maskedDateValue);\n }\n this.checkValueChange(null, false);\n if (this.isPopupOpen()) {\n this.setScrollPosition();\n }\n if (this.isAngular && this.preventChange) {\n this.preventChange = false;\n }\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n }\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');\n }\n break;\n case 'strictMode':\n this.invalidValueString = null;\n if (newProp.strictMode) {\n this.checkErrorState(null);\n }\n this.setProperties({ strictMode: newProp.strictMode }, true);\n this.checkValue((this.inputElement).value);\n this.checkValueChange(null, false);\n break;\n case 'scrollTo':\n if (this.checkDateValue(new Date(this.checkInValue(newProp.scrollTo)))) {\n if (this.popupWrapper) {\n this.setScrollTo();\n }\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkInValue(newProp.scrollTo))) }, true);\n }\n else {\n this.setProperties({ scrollTo: null }, true);\n }\n break;\n case 'enableMask':\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n this.updateInputValue(this.maskedDateValue);\n }\n else {\n if (this.inputElement.value === this.maskedDateValue) {\n this.updateInputValue('');\n }\n }\n break;\n }\n }\n };\n TimePicker.prototype.checkInValue = function (inValue) {\n if (inValue instanceof Date) {\n return (inValue.toUTCString());\n }\n else {\n return ('' + inValue);\n }\n };\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"width\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"strictMode\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"keyConfigs\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"format\", void 0);\n __decorate([\n Property(true)\n ], TimePicker.prototype, \"enabled\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"fullScreenMode\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"readonly\", void 0);\n __decorate([\n Property({})\n ], TimePicker.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property('Never')\n ], TimePicker.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"placeholder\", void 0);\n __decorate([\n Property(1000)\n ], TimePicker.prototype, \"zIndex\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"enablePersistence\", void 0);\n __decorate([\n Property(true)\n ], TimePicker.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(30)\n ], TimePicker.prototype, \"step\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"scrollTo\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"value\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"min\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"max\", void 0);\n __decorate([\n Property(true)\n ], TimePicker.prototype, \"allowEdit\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"openOnFocus\", void 0);\n __decorate([\n Property(false)\n ], TimePicker.prototype, \"enableMask\", void 0);\n __decorate([\n Property({ day: 'day', month: 'month', year: 'year', hour: 'hour', minute: 'minute', second: 'second', dayOfTheWeek: 'day of the week' })\n ], TimePicker.prototype, \"maskPlaceholder\", void 0);\n __decorate([\n Property(null)\n ], TimePicker.prototype, \"serverTimezoneOffset\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"destroyed\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"itemRender\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"cleared\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], TimePicker.prototype, \"focus\", void 0);\n TimePicker = __decorate([\n NotifyPropertyChanges\n ], TimePicker);\n return TimePicker;\n}(Component));\nexport { TimePicker };\n/* eslint-enable @typescript-eslint/no-explicit-any */\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n///\nimport { EventHandler, Internationalization, Property, NotifyPropertyChanges, Browser } from '@syncfusion/ej2-base';\nimport { Animation, Event, cldrData, getDefaultDateObject, detach } from '@syncfusion/ej2-base';\nimport { createElement, remove, addClass, L10n, removeClass, closest, append, attributes } from '@syncfusion/ej2-base';\nimport { KeyboardEvents, isNullOrUndefined, formatUnit, getValue, rippleEffect } from '@syncfusion/ej2-base';\nimport { extend } from '@syncfusion/ej2-base';\nimport { Popup } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { DatePicker } from '../datepicker/datepicker';\nimport { TimePickerBase } from '../timepicker/timepicker';\n//class constant defination\nvar DATEWRAPPER = 'e-date-wrapper';\nvar DATEPICKERROOT = 'e-datepicker';\nvar DATETIMEWRAPPER = 'e-datetime-wrapper';\nvar DAY = new Date().getDate();\nvar MONTH = new Date().getMonth();\nvar YEAR = new Date().getFullYear();\nvar HOUR = new Date().getHours();\nvar MINUTE = new Date().getMinutes();\nvar SECOND = new Date().getSeconds();\nvar MILLISECOND = new Date().getMilliseconds();\nvar ROOT = 'e-datetimepicker';\nvar DATETIMEPOPUPWRAPPER = 'e-datetimepopup-wrapper';\nvar INPUTWRAPPER = 'e-input-group-icon';\nvar POPUP = 'e-popup';\nvar TIMEICON = 'e-time-icon';\nvar INPUTFOCUS = 'e-input-focus';\nvar POPUPDIMENSION = '250px';\nvar ICONANIMATION = 'e-icon-anim';\nvar DISABLED = 'e-disabled';\nvar ERROR = 'e-error';\nvar CONTENT = 'e-content';\nvar NAVIGATION = 'e-navigation';\nvar ACTIVE = 'e-active';\nvar HOVER = 'e-hover';\nvar ICONS = 'e-icons';\nvar HALFPOSITION = 2;\nvar LISTCLASS = 'e-list-item';\nvar ANIMATIONDURATION = 100;\nvar OVERFLOW = 'e-time-overflow';\n/**\n * Represents the DateTimePicker component that allows user to select\n * or enter a date time value.\n * ```html\n * \n * ```\n * ```typescript\n * \n * ```\n */\nvar DateTimePicker = /** @class */ (function (_super) {\n __extends(DateTimePicker, _super);\n /**\n * Constructor for creating the widget\n *\n * @param {DateTimePickerModel} options - Specifies the DateTimePicker model.\n * @param {string | HTMLInputElement} element - Specifies the element to render as component.\n * @private\n */\n function DateTimePicker(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.valueWithMinutes = null;\n _this.scrollInvoked = false;\n _this.moduleName = _this.getModuleName();\n _this.formatRegex = /dddd|ddd|dd|d|MMMM|MMM|MM|M|yyyy|yyy|yy|y|'[^']*'|'[^']*'/g;\n _this.dateFormatString = '';\n _this.dateTimeOptions = options;\n return _this;\n }\n DateTimePicker.prototype.focusHandler = function () {\n if (!this.enabled) {\n return;\n }\n addClass([this.inputWrapper.container], INPUTFOCUS);\n };\n /**\n * Sets the focus to widget for interaction.\n *\n * @returns {void}\n */\n DateTimePicker.prototype.focusIn = function () {\n _super.prototype.focusIn.call(this);\n };\n /**\n * Remove the focus from widget, if the widget is in focus state.\n *\n * @returns {void}\n */\n DateTimePicker.prototype.focusOut = function () {\n if (document.activeElement === this.inputElement) {\n this.inputElement.blur();\n removeClass([this.inputWrapper.container], [INPUTFOCUS]);\n }\n };\n DateTimePicker.prototype.blurHandler = function (e) {\n if (!this.enabled) {\n return;\n }\n // IE popup closing issue when click over the scrollbar\n if (this.isTimePopupOpen() && this.isPreventBlur) {\n this.inputElement.focus();\n return;\n }\n removeClass([this.inputWrapper.container], INPUTFOCUS);\n var blurArguments = {\n model: this\n };\n if (this.isTimePopupOpen()) {\n this.hide(e);\n }\n this.trigger('blur', blurArguments);\n };\n /**\n * To destroy the widget.\n *\n * @returns {void}\n */\n DateTimePicker.prototype.destroy = function () {\n if (this.popupObject && this.popupObject.element.classList.contains(POPUP)) {\n this.popupObject.destroy();\n detach(this.dateTimeWrapper);\n this.dateTimeWrapper = undefined;\n this.liCollections = this.timeCollections = [];\n if (!isNullOrUndefined(this.rippleFn)) {\n this.rippleFn();\n }\n }\n var ariaAttribute = {\n 'aria-live': 'assertive', 'aria-atomic': 'true', 'aria-invalid': 'false',\n 'autocorrect': 'off', 'autocapitalize': 'off', 'spellcheck': 'false',\n 'aria-expanded': 'false', 'role': 'combobox', 'autocomplete': 'off'\n };\n if (this.inputElement) {\n Input.removeAttributes(ariaAttribute, this.inputElement);\n }\n if (this.isCalendar()) {\n if (this.popupWrapper) {\n detach(this.popupWrapper);\n }\n this.popupObject = this.popupWrapper = null;\n this.keyboardHandler.destroy();\n }\n this.unBindInputEvents();\n this.liCollections = null;\n this.rippleFn = null;\n this.selectedElement = null;\n this.listTag = null;\n this.timeIcon = null;\n this.popupObject = null;\n this.preventArgs = null;\n this.keyboardModule = null;\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 if (typeof (this.min) === 'string') {\n this.min = this.checkDateValue(new Date(this.min));\n }\n if (typeof (this.max) === 'string') {\n this.max = this.checkDateValue(new Date(this.max));\n }\n if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {\n this.enabled = false;\n }\n _super.prototype.updateHtmlAttributeToElement.call(this);\n this.checkAttributes(false);\n var localeText = { placeholder: this.placeholder };\n this.l10n = new L10n('datetimepicker', localeText, this.locale);\n this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);\n _super.prototype.render.call(this);\n this.createInputElement();\n _super.prototype.updateHtmlAttributeToWrapper.call(this);\n this.bindInputEvents();\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n }\n this.setValue(true);\n if (this.enableMask && !this.value && this.maskedDateValue && (this.floatLabelType === 'Always' || !this.floatLabelType || !this.placeholder)) {\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkValue(this.scrollTo))) }, true);\n this.previousDateTime = this.value && new Date(+this.value);\n if (this.element.tagName === 'EJS-DATETIMEPICKER') {\n this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';\n this.element.removeAttribute('tabindex');\n if (!this.enabled) {\n this.inputElement.tabIndex = -1;\n }\n }\n if (this.floatLabelType === 'Auto') {\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n }\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-date-time-icon');\n }\n this.renderComplete();\n };\n DateTimePicker.prototype.setValue = function (isDynamic) {\n if (isDynamic === void 0) { isDynamic = false; }\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, isDynamic);\n };\n DateTimePicker.prototype.validateMinMaxRange = function (value) {\n var result = value;\n if (this.isDateObject(value)) {\n result = this.validateValue(value);\n }\n else {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n }\n }\n this.checkValidState(result);\n return result;\n };\n DateTimePicker.prototype.checkValidState = function (value) {\n this.isValidState = true;\n if (!this.strictMode) {\n if ((+(value) > +(this.max)) || (+(value) < +(this.min))) {\n this.isValidState = false;\n }\n }\n this.checkErrorState();\n };\n DateTimePicker.prototype.checkErrorState = function () {\n if (this.isValidState) {\n removeClass([this.inputWrapper.container], ERROR);\n }\n else {\n addClass([this.inputWrapper.container], ERROR);\n }\n attributes(this.inputElement, { 'aria-invalid': this.isValidState ? 'false' : 'true' });\n };\n DateTimePicker.prototype.validateValue = function (value) {\n var dateVal = value;\n if (this.strictMode) {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n dateVal = this.max;\n }\n else if (+value < +this.min) {\n dateVal = this.min;\n }\n else if (+value > +this.max) {\n dateVal = this.max;\n }\n }\n else {\n if (+this.min > +this.max) {\n this.disablePopupButton(true);\n dateVal = value;\n }\n }\n return dateVal;\n };\n DateTimePicker.prototype.disablePopupButton = function (isDisable) {\n if (isDisable) {\n addClass([this.inputWrapper.buttons[0], this.timeIcon], DISABLED);\n this.hide();\n }\n else {\n removeClass([this.inputWrapper.buttons[0], this.timeIcon], DISABLED);\n }\n };\n DateTimePicker.prototype.getFormattedValue = function (value) {\n var dateOptions;\n if (!isNullOrUndefined(value)) {\n if (this.calendarMode === 'Gregorian') {\n dateOptions = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: 'yMd' };\n }\n else {\n dateOptions = { format: this.cldrDateTimeFormat(), type: 'dateTime', skeleton: 'yMd', calendar: 'islamic' };\n }\n return this.globalize.formatDate(value, dateOptions);\n }\n else {\n return null;\n }\n };\n DateTimePicker.prototype.isDateObject = function (value) {\n return (!isNullOrUndefined(value) && !isNaN(+value)) ? true : false;\n };\n DateTimePicker.prototype.createInputElement = function () {\n removeClass([this.inputElement], DATEPICKERROOT);\n removeClass([this.inputWrapper.container], DATEWRAPPER);\n addClass([this.inputWrapper.container], DATETIMEWRAPPER);\n addClass([this.inputElement], ROOT);\n this.renderTimeIcon();\n };\n DateTimePicker.prototype.renderTimeIcon = function () {\n this.timeIcon = Input.appendSpan(INPUTWRAPPER + ' ' + TIMEICON + ' ' + ICONS, this.inputWrapper.container);\n };\n DateTimePicker.prototype.bindInputEvents = function () {\n EventHandler.add(this.timeIcon, 'mousedown', this.timeHandler, this);\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.dateHandler, this);\n EventHandler.add(this.inputElement, 'blur', this.blurHandler, this);\n EventHandler.add(this.inputElement, 'focus', this.focusHandler, this);\n this.defaultKeyConfigs = extend(this.defaultKeyConfigs, this.keyConfigs);\n this.keyboardHandler = new KeyboardEvents(this.inputElement, {\n eventName: 'keydown',\n keyAction: this.inputKeyAction.bind(this),\n keyConfigs: this.defaultKeyConfigs\n });\n };\n DateTimePicker.prototype.unBindInputEvents = function () {\n EventHandler.remove(this.timeIcon, 'mousedown touchstart', this.timeHandler);\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown touchstart', this.dateHandler);\n if (this.inputElement) {\n EventHandler.remove(this.inputElement, 'blur', this.blurHandler);\n EventHandler.remove(this.inputElement, 'focus', this.focusHandler);\n }\n if (this.keyboardHandler) {\n this.keyboardHandler.destroy();\n }\n };\n DateTimePicker.prototype.cldrTimeFormat = function () {\n var cldrTime;\n if (this.isNullOrEmpty(this.timeFormat)) {\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrTime = (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n }\n else {\n cldrTime = this.timeFormat;\n }\n return cldrTime;\n };\n DateTimePicker.prototype.cldrDateTimeFormat = function () {\n var cldrTime;\n var culture = new Internationalization(this.locale);\n var dateFormat = culture.getDatePattern({ skeleton: 'yMd' });\n if (this.isNullOrEmpty(this.formatString)) {\n cldrTime = dateFormat + ' ' + this.getCldrFormat('time');\n }\n else {\n cldrTime = this.formatString;\n }\n return cldrTime;\n };\n DateTimePicker.prototype.getCldrFormat = function (type) {\n var cldrDateTime;\n if (this.locale === 'en' || this.locale === 'en-US') {\n cldrDateTime = (getValue('timeFormats.short', getDefaultDateObject()));\n }\n else {\n cldrDateTime = (this.getCultureTimeObject(cldrData, '' + this.locale));\n }\n return cldrDateTime;\n };\n DateTimePicker.prototype.isNullOrEmpty = function (value) {\n if (isNullOrUndefined(value) || (typeof value === 'string' && value.trim() === '')) {\n return true;\n }\n else {\n return false;\n }\n };\n DateTimePicker.prototype.getCultureTimeObject = function (ld, c) {\n if (this.calendarMode === 'Gregorian') {\n return getValue('main.' + '' + this.locale + '.dates.calendars.gregorian.timeFormats.short', ld);\n }\n else {\n return getValue('main.' + '' + this.locale + '.dates.calendars.islamic.timeFormats.short', ld);\n }\n };\n DateTimePicker.prototype.timeHandler = function (e) {\n if (!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 this.cldrDateTimeFormat().replace(this.formatRegex, this.TimePopupFormat());\n dateObject = this.globalize.parseDate(this.inputElement.value, {\n format: this.dateFormatString, 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 : 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 + '_options' });\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 if (!Browser.isDevice || (Browser.isDevice && !this.fullScreenMode)) {\n this.popupObject.refreshPosition(this.inputElement);\n }\n if (Browser.isDevice && this.fullScreenMode) {\n this.dateTimeWrapper.style.left = '0px';\n }\n if (Browser.isDevice) {\n var dlgOverlay = this.createElement('div', { className: 'e-dlg-overlay' });\n dlgOverlay.style.zIndex = (this.zIndex - 1).toString();\n this.timeModal.appendChild(dlgOverlay);\n }\n }\n }\n };\n DateTimePicker.prototype.openPopup = function (e) {\n var _this = this;\n this.preventArgs = {\n cancel: false,\n popup: this.popupObject,\n event: e || null\n };\n var eventArgs = this.preventArgs;\n this.trigger('open', eventArgs, function (eventArgs) {\n _this.preventArgs = eventArgs;\n if (!_this.preventArgs.cancel && !_this.readonly) {\n var openAnimation = {\n name: 'FadeIn',\n duration: ANIMATIONDURATION,\n };\n if (_this.zIndex === 1000) {\n _this.popupObject.show(new Animation(openAnimation), _this.element);\n }\n else {\n _this.popupObject.show(new Animation(openAnimation), null);\n }\n addClass([_this.inputWrapper.container], [ICONANIMATION]);\n attributes(_this.inputElement, { 'aria-expanded': 'true' });\n attributes(_this.inputElement, { 'aria-owns': _this.inputElement.id + '_options' });\n attributes(_this.inputElement, { 'aria-controls': _this.inputElement.id });\n EventHandler.add(document, 'mousedown touchstart', _this.documentClickHandler, _this);\n }\n });\n };\n DateTimePicker.prototype.documentClickHandler = function (event) {\n var target = event.target;\n if ((!isNullOrUndefined(this.popupObject) && (this.inputWrapper.container.contains(target) && event.type !== 'mousedown' ||\n (this.popupObject.element && this.popupObject.element.contains(target)))) && event.type !== 'touchstart') {\n event.preventDefault();\n }\n if (!(closest(target, '[id=\"' + (this.popupObject && this.popupObject.element.id + '\"]'))) && target !== this.inputElement\n && target !== this.timeIcon && !isNullOrUndefined(this.inputWrapper) && target !== this.inputWrapper.container && !target.classList.contains('e-dlg-overlay')) {\n if (this.isTimePopupOpen()) {\n this.hide(event);\n this.focusOut();\n }\n }\n else if (target !== this.inputElement) {\n if (!Browser.isDevice) {\n this.isPreventBlur = ((document.activeElement === this.inputElement) && (Browser.isIE || Browser.info.name === 'edge')\n && target === this.popupObject.element);\n }\n }\n };\n DateTimePicker.prototype.isTimePopupOpen = function () {\n return (this.dateTimeWrapper && this.dateTimeWrapper.classList.contains('' + ROOT)) ? true : false;\n };\n DateTimePicker.prototype.isDatePopupOpen = function () {\n return (this.popupWrapper && this.popupWrapper.classList.contains('' + DATETIMEPOPUPWRAPPER)) ? true : false;\n };\n DateTimePicker.prototype.renderPopup = function () {\n var _this = this;\n this.containerStyle = this.inputWrapper.container.getBoundingClientRect();\n if (Browser.isDevice) {\n this.timeModal = createElement('div');\n this.timeModal.className = '' + ROOT + ' e-time-modal';\n document.body.className += ' ' + OVERFLOW;\n this.timeModal.style.display = 'block';\n document.body.appendChild(this.timeModal);\n }\n var offset = 4;\n this.popupObject = new Popup(this.dateTimeWrapper, {\n width: this.setPopupWidth(),\n zIndex: this.zIndex,\n targetType: 'container',\n collision: Browser.isDevice ? { X: 'fit', Y: 'fit' } : { X: 'flip', Y: 'flip' },\n relateTo: Browser.isDevice ? document.body : this.inputWrapper.container,\n position: Browser.isDevice ? { X: 'center', Y: 'center' } : { X: 'left', Y: 'bottom' },\n enableRtl: this.enableRtl,\n offsetY: offset,\n open: function () {\n _this.dateTimeWrapper.style.visibility = 'visible';\n addClass([_this.timeIcon], ACTIVE);\n if (!Browser.isDevice) {\n _this.timekeyConfigure = extend(_this.timekeyConfigure, _this.keyConfigs);\n _this.inputEvent = new KeyboardEvents(_this.inputWrapper.container, {\n keyAction: _this.timeKeyActionHandle.bind(_this),\n keyConfigs: _this.timekeyConfigure,\n eventName: 'keydown'\n });\n }\n }, close: function () {\n removeClass([_this.timeIcon], ACTIVE);\n _this.unWireTimeListEvents();\n _this.inputElement.removeAttribute('aria-activedescendant');\n remove(_this.popupObject.element);\n _this.popupObject.destroy();\n _this.dateTimeWrapper.innerHTML = '';\n _this.listWrapper = _this.dateTimeWrapper = undefined;\n if (_this.inputEvent) {\n _this.inputEvent.destroy();\n }\n }, targetExitViewport: function () {\n if (!Browser.isDevice) {\n _this.hide();\n }\n }\n });\n if (Browser.isDevice && this.fullScreenMode) {\n this.popupObject.element.style.display = \"flex\";\n this.popupObject.element.style.maxHeight = \"100%\";\n this.popupObject.element.style.width = \"100%\";\n }\n else {\n this.popupObject.element.style.maxHeight = POPUPDIMENSION;\n }\n if (Browser.isDevice && this.fullScreenMode) {\n var modelWrapper = createElement('div', { className: 'e-datetime-mob-popup-wrap' });\n var modelHeader = this.createElement('div', { className: 'e-model-header' });\n var modelTitleSpan = this.createElement(\"span\", { className: \"e-model-title\" });\n modelTitleSpan.textContent = \"Select time\";\n var modelCloseIcon = this.createElement(\"span\", { className: \"e-popup-close\" });\n EventHandler.add(modelCloseIcon, 'mousedown touchstart', this.dateTimeCloseHandler, this);\n var timeContent = this.dateTimeWrapper.querySelector(\".e-content\");\n modelHeader.appendChild(modelCloseIcon);\n modelHeader.appendChild(modelTitleSpan);\n modelWrapper.appendChild(modelHeader);\n modelWrapper.appendChild(timeContent);\n this.dateTimeWrapper.insertBefore(modelWrapper, this.dateTimeWrapper.firstElementChild);\n }\n };\n DateTimePicker.prototype.dateTimeCloseHandler = function (e) {\n this.hide();\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 if (Browser.isDevice && this.fullScreenMode) {\n return popupHeight;\n }\n else {\n return popupHeight > height ? height : popupHeight;\n }\n };\n DateTimePicker.prototype.changeEvent = function (e) {\n _super.prototype.changeEvent.call(this, e);\n if ((this.value && this.value.valueOf()) !== (this.previousDateTime && +this.previousDateTime.valueOf())) {\n this.valueWithMinutes = this.value;\n this.setInputValue('date');\n this.previousDateTime = this.value && new Date(+this.value);\n }\n };\n DateTimePicker.prototype.updateValue = function (e) {\n this.setInputValue('time');\n if (+this.previousDateTime !== +this.value) {\n this.changedArgs = {\n value: this.value, event: e || null,\n isInteracted: !isNullOrUndefined(e),\n element: this.element\n };\n this.addTimeSelection();\n this.trigger('change', this.changedArgs);\n this.previousDateTime = this.previousDate = this.value;\n }\n };\n DateTimePicker.prototype.setTimeScrollPosition = function () {\n var popupElement = this.selectedElement;\n if (!isNullOrUndefined(popupElement)) {\n this.findScrollTop(popupElement);\n }\n else if (this.dateTimeWrapper && this.checkDateValue(this.scrollTo)) {\n this.setScrollTo();\n }\n };\n DateTimePicker.prototype.findScrollTop = function (element) {\n var listHeight = this.getPopupHeight();\n var nextElement = element.nextElementSibling;\n var height = nextElement ? nextElement.offsetTop : element.offsetTop;\n var lineHeight = element.getBoundingClientRect().height;\n if ((height + element.offsetTop) > listHeight) {\n if (Browser.isDevice && this.fullScreenMode) {\n var listContent = this.dateTimeWrapper.querySelector('.e-content');\n listContent.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION + lineHeight / HALFPOSITION)) : height;\n }\n else {\n this.dateTimeWrapper.scrollTop = nextElement ? (height - (listHeight / HALFPOSITION + lineHeight / HALFPOSITION)) : height;\n }\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n };\n DateTimePicker.prototype.setScrollTo = function () {\n var element;\n var items = this.dateTimeWrapper.querySelectorAll('.' + LISTCLASS);\n if (items.length >= 0) {\n this.scrollInvoked = true;\n var initialTime = this.timeCollections[0];\n var scrollTime = this.getDateObject(this.checkDateValue(this.scrollTo)).getTime();\n element = items[Math.round((scrollTime - initialTime) / (this.step * 60000))];\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n if (!isNullOrUndefined(element)) {\n this.findScrollTop(element);\n }\n else {\n this.dateTimeWrapper.scrollTop = 0;\n }\n };\n DateTimePicker.prototype.setInputValue = function (type) {\n if (type === 'date') {\n this.inputElement.value = this.previousElementValue = this.getFormattedValue(this.getFullDateTime());\n this.setProperties({ value: this.getFullDateTime() }, true);\n }\n else {\n var tempVal = this.getFormattedValue(new Date(this.timeCollections[this.activeIndex]));\n Input.setValue(tempVal, this.inputElement, this.floatLabelType, this.showClearButton);\n this.previousElementValue = this.inputElement.value;\n this.setProperties({ value: new Date(this.timeCollections[this.activeIndex]) }, true);\n if (this.enableMask) {\n this.createMask();\n }\n }\n this.updateIconState();\n };\n DateTimePicker.prototype.getFullDateTime = function () {\n var value = null;\n if (this.isDateObject(this.valueWithMinutes)) {\n value = this.combineDateTime(this.valueWithMinutes);\n }\n else {\n value = this.previousDate;\n }\n return this.validateMinMaxRange(value);\n };\n DateTimePicker.prototype.createMask = function () {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n };\n DateTimePicker.prototype.combineDateTime = function (value) {\n if (this.isDateObject(value)) {\n var day = this.previousDate.getDate();\n var month = this.previousDate.getMonth();\n var year = this.previousDate.getFullYear();\n var hour = value.getHours();\n var minutes = value.getMinutes();\n var seconds = value.getSeconds();\n return new Date(year, month, day, hour, minutes, seconds);\n }\n else {\n return this.previousDate;\n }\n };\n DateTimePicker.prototype.onMouseClick = function (event) {\n var target = event.target;\n var li = this.selectedElement = closest(target, '.' + LISTCLASS);\n if (li && li.classList.contains(LISTCLASS)) {\n this.timeValue = li.getAttribute('data-value');\n this.hide(event);\n }\n this.setSelection(li, event);\n };\n DateTimePicker.prototype.setSelection = function (li, event) {\n if (this.isValidLI(li) && !li.classList.contains(ACTIVE)) {\n this.selectedElement = li;\n var index = Array.prototype.slice.call(this.liCollections).indexOf(li);\n this.activeIndex = index;\n this.valueWithMinutes = new Date(this.timeCollections[this.activeIndex]);\n addClass([this.selectedElement], ACTIVE);\n this.selectedElement.setAttribute('aria-selected', 'true');\n this.updateValue(event);\n }\n };\n DateTimePicker.prototype.setTimeActiveClass = function () {\n var collections = isNullOrUndefined(this.dateTimeWrapper) ? this.listWrapper : this.dateTimeWrapper;\n if (!isNullOrUndefined(collections)) {\n var items = collections.querySelectorAll('.' + LISTCLASS);\n if (items.length) {\n for (var i = 0; i < items.length; i++) {\n if (this.timeCollections[i] === +(this.valueWithMinutes)) {\n items[i].setAttribute('aria-selected', 'true');\n this.selectedElement = items[i];\n this.activeIndex = i;\n this.setTimeActiveDescendant();\n break;\n }\n }\n }\n }\n };\n DateTimePicker.prototype.setTimeActiveDescendant = function () {\n if (!isNullOrUndefined(this.selectedElement) && this.value) {\n attributes(this.inputElement, { 'aria-activedescendant': this.selectedElement.getAttribute('id') });\n }\n else {\n this.inputElement.removeAttribute('aria-activedescendant');\n }\n };\n DateTimePicker.prototype.addTimeSelection = function () {\n this.selectedElement = null;\n this.removeTimeSelection();\n this.setTimeActiveClass();\n if (!isNullOrUndefined(this.selectedElement)) {\n addClass([this.selectedElement], ACTIVE);\n this.selectedElement.setAttribute('aria-selected', 'true');\n }\n };\n DateTimePicker.prototype.removeTimeSelection = function () {\n this.removeTimeHover(HOVER);\n if (!isNullOrUndefined(this.dateTimeWrapper)) {\n var items = this.dateTimeWrapper.querySelectorAll('.' + ACTIVE);\n if (items.length) {\n removeClass(items, ACTIVE);\n items[0].removeAttribute('aria-selected');\n }\n }\n };\n DateTimePicker.prototype.removeTimeHover = function (className) {\n var hoveredItem = this.getTimeHoverItem(className);\n if (hoveredItem && hoveredItem.length) {\n removeClass(hoveredItem, className);\n }\n };\n DateTimePicker.prototype.getTimeHoverItem = function (className) {\n var collections = isNullOrUndefined(this.dateTimeWrapper) ? this.listWrapper : this.dateTimeWrapper;\n var hoveredItem;\n if (!isNullOrUndefined(collections)) {\n hoveredItem = collections.querySelectorAll('.' + className);\n }\n return hoveredItem;\n };\n DateTimePicker.prototype.isValidLI = function (li) {\n return (li && li.classList.contains(LISTCLASS) && !li.classList.contains(DISABLED));\n };\n DateTimePicker.prototype.calculateStartEnd = function (value, range, method) {\n var day = value.getDate();\n var month = value.getMonth();\n var year = value.getFullYear();\n var hours = value.getHours();\n var minutes = value.getMinutes();\n var seconds = value.getSeconds();\n var milliseconds = value.getMilliseconds();\n if (range) {\n if (method === 'starttime') {\n return new Date(year, month, day, 0, 0, 0);\n }\n else {\n return new Date(year, month, day, 23, 59, 59);\n }\n }\n else {\n return new Date(year, month, day, hours, minutes, seconds, milliseconds);\n }\n };\n DateTimePicker.prototype.startTime = function (date) {\n var tempStartValue;\n var start;\n var tempMin = this.min;\n var value = date === null ? new Date() : date;\n if ((+value.getDate() === +tempMin.getDate() && +value.getMonth() === +tempMin.getMonth() &&\n +value.getFullYear() === +tempMin.getFullYear()) || ((+new Date(value.getFullYear(), value.getMonth(), value.getDate())) <=\n +new Date(tempMin.getFullYear(), tempMin.getMonth(), tempMin.getDate()))) {\n start = false;\n tempStartValue = this.min;\n }\n else if (+value < +this.max && +value > +this.min) {\n start = true;\n tempStartValue = value;\n }\n else if (+value >= +this.max) {\n start = true;\n tempStartValue = this.max;\n }\n return this.calculateStartEnd(tempStartValue, start, 'starttime');\n };\n DateTimePicker.prototype.TimePopupFormat = function () {\n var format = '';\n var formatCount = 0;\n var proxy = this;\n function formatValueSpecifier(formattext) {\n switch (formattext) {\n case 'd':\n case 'dd':\n case 'ddd':\n case 'dddd':\n case 'M':\n case 'MM':\n case 'MMM':\n case 'MMMM':\n case 'y':\n case 'yy':\n case 'yyy':\n case 'yyyy':\n if (format == '') {\n format = format + formattext;\n }\n else {\n format = format + \"/\" + formattext;\n }\n formatCount = formatCount + 1;\n break;\n }\n if (formatCount > 2) {\n proxy.dateFormatString = format;\n }\n return format;\n }\n return formatValueSpecifier;\n };\n DateTimePicker.prototype.endTime = function (date) {\n var tempEndValue;\n var end;\n var tempMax = this.max;\n var value = date === null ? new Date() : date;\n if ((+value.getDate() === +tempMax.getDate() && +value.getMonth() === +tempMax.getMonth() &&\n +value.getFullYear() === +tempMax.getFullYear()) || (+new Date(value.getUTCFullYear(), value.getMonth(), value.getDate()) >=\n +new Date(tempMax.getFullYear(), tempMax.getMonth(), tempMax.getDate()))) {\n end = false;\n tempEndValue = this.max;\n }\n else if (+value < +this.max && +value > +this.min) {\n end = true;\n tempEndValue = value;\n }\n else if (+value <= +this.min) {\n end = true;\n tempEndValue = this.min;\n }\n return this.calculateStartEnd(tempEndValue, end, 'endtime');\n };\n DateTimePicker.prototype.hide = function (e) {\n var _this = this;\n if (this.popupObj || this.dateTimeWrapper) {\n this.preventArgs = {\n cancel: false,\n popup: this.popupObj || this.popupObject,\n event: e || null\n };\n var eventArgs = this.preventArgs;\n if (isNullOrUndefined(this.popupObj)) {\n this.trigger('close', eventArgs, function (eventArgs) {\n _this.dateTimeCloseEventCallback(e, eventArgs);\n });\n }\n else {\n this.dateTimeCloseEventCallback(e, eventArgs);\n }\n }\n else {\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n this.setAllowEdit();\n }\n };\n DateTimePicker.prototype.dateTimeCloseEventCallback = function (e, eventArgs) {\n this.preventArgs = eventArgs;\n if (!this.preventArgs.cancel) {\n if (this.isDatePopupOpen()) {\n _super.prototype.hide.call(this, e);\n }\n else if (this.isTimePopupOpen()) {\n this.closePopup(e);\n removeClass([document.body], OVERFLOW);\n if (Browser.isDevice && this.timeModal) {\n this.timeModal.style.display = 'none';\n this.timeModal.outerHTML = '';\n this.timeModal = null;\n }\n this.setTimeActiveDescendant();\n }\n }\n if (Browser.isDevice && this.allowEdit && !this.readonly) {\n this.inputElement.removeAttribute('readonly');\n }\n this.setAllowEdit();\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DateTimePicker.prototype.closePopup = function (e) {\n if (this.isTimePopupOpen() && this.popupObject) {\n var animModel = {\n name: 'FadeOut',\n duration: ANIMATIONDURATION,\n delay: 0\n };\n this.popupObject.hide(new Animation(animModel));\n this.inputWrapper.container.classList.remove(ICONANIMATION);\n attributes(this.inputElement, { 'aria-expanded': 'false' });\n this.inputElement.removeAttribute('aria-owns');\n this.inputElement.removeAttribute('aria-controls');\n EventHandler.remove(document, 'mousedown touchstart', this.documentClickHandler);\n }\n };\n DateTimePicker.prototype.preRender = function () {\n this.checkFormat();\n this.dateTimeFormat = this.cldrDateTimeFormat();\n _super.prototype.preRender.call(this);\n removeClass([this.inputElementCopy], [ROOT]);\n };\n DateTimePicker.prototype.getProperty = function (date, val) {\n if (val === 'min') {\n this.setProperties({ min: this.validateValue(date.min) }, true);\n }\n else {\n this.setProperties({ max: this.validateValue(date.max) }, true);\n }\n };\n DateTimePicker.prototype.checkAttributes = function (isDynamic) {\n var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :\n ['style', 'name', 'step', 'disabled', 'readonly', 'value', 'min', 'max', 'placeholder', 'type'];\n var value;\n for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {\n var prop = attributes_1[_i];\n if (!isNullOrUndefined(this.inputElement.getAttribute(prop))) {\n switch (prop) {\n case 'name':\n this.inputElement.setAttribute('name', this.inputElement.getAttribute(prop));\n break;\n case 'step':\n this.step = parseInt(this.inputElement.getAttribute(prop), 10);\n break;\n case 'readonly':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['readonly'] === undefined)) || isDynamic) {\n var readonly = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === '' ||\n this.inputElement.getAttribute(prop) === 'true' ? true : false;\n this.setProperties({ readonly: readonly }, !isDynamic);\n }\n break;\n case 'placeholder':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['placeholder'] === undefined)) || isDynamic) {\n this.setProperties({ placeholder: this.inputElement.getAttribute(prop) }, !isDynamic);\n }\n break;\n case 'min':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['min'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ min: value }, !isDynamic);\n }\n }\n break;\n case 'disabled':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['enabled'] === undefined)) || isDynamic) {\n var enabled = this.inputElement.getAttribute(prop) === 'disabled' ||\n this.inputElement.getAttribute(prop) === 'true' ||\n this.inputElement.getAttribute(prop) === '' ? false : true;\n this.setProperties({ enabled: enabled }, !isDynamic);\n }\n break;\n case 'value':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['value'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ value: value }, !isDynamic);\n }\n }\n break;\n case 'max':\n if ((isNullOrUndefined(this.dateTimeOptions) || (this.dateTimeOptions['max'] === undefined)) || isDynamic) {\n value = new Date(this.inputElement.getAttribute(prop));\n if (!this.isNullOrEmpty(value) && !isNaN(+value)) {\n this.setProperties({ max: value }, !isDynamic);\n }\n }\n break;\n }\n }\n }\n };\n DateTimePicker.prototype.requiredModules = function () {\n var modules = [];\n if (this) {\n modules.push({ args: [this], member: 'islamic' });\n }\n if (this.enableMask) {\n modules.push(this.maskedDateModule());\n }\n return modules;\n };\n DateTimePicker.prototype.maskedDateModule = function () {\n var modules = { args: [this], member: 'MaskedDateTime' };\n return modules;\n };\n DateTimePicker.prototype.getTimeActiveElement = function () {\n if (!isNullOrUndefined(this.dateTimeWrapper)) {\n return this.dateTimeWrapper.querySelectorAll('.' + ACTIVE);\n }\n else {\n return null;\n }\n };\n DateTimePicker.prototype.createDateObj = function (val) {\n return val instanceof Date ? val : null;\n };\n DateTimePicker.prototype.getDateObject = function (text) {\n if (!this.isNullOrEmpty(text)) {\n var dateValue = this.createDateObj(text);\n var value = this.valueWithMinutes;\n var status_1 = !isNullOrUndefined(value);\n if (this.checkDateValue(dateValue)) {\n var date = status_1 ? value.getDate() : DAY;\n var month = status_1 ? value.getMonth() : MONTH;\n var year = status_1 ? value.getFullYear() : YEAR;\n var hour = status_1 ? value.getHours() : HOUR;\n var minute = status_1 ? value.getMinutes() : MINUTE;\n var second = status_1 ? value.getSeconds() : SECOND;\n var millisecond = status_1 ? value.getMilliseconds() : MILLISECOND;\n if (!this.scrollInvoked) {\n return new Date(year, month, date, hour, minute, second, millisecond);\n }\n else {\n this.scrollInvoked = false;\n return new Date(year, month, date, dateValue.getHours(), dateValue.getMinutes(), dateValue.getSeconds(), dateValue.getMilliseconds());\n }\n }\n }\n return null;\n };\n DateTimePicker.prototype.findNextTimeElement = function (event) {\n var textVal = (this.inputElement).value;\n var value = isNullOrUndefined(this.valueWithMinutes) ? this.createDateObj(textVal) :\n this.getDateObject(this.valueWithMinutes);\n var dateTimeVal = null;\n var listCount = this.liCollections.length;\n if (!isNullOrUndefined(this.activeIndex) || !isNullOrUndefined(this.checkDateValue(value))) {\n if (event.action === 'home') {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[0])));\n this.activeIndex = 0;\n }\n else if (event.action === 'end') {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[this.timeCollections.length - 1])));\n this.activeIndex = this.timeCollections.length - 1;\n }\n else {\n if (event.action === 'down') {\n for (var i = 0; i < listCount; i++) {\n if (+value < this.timeCollections[i]) {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[i])));\n this.activeIndex = i;\n break;\n }\n }\n }\n else {\n for (var i = listCount - 1; i >= 0; i--) {\n if (+value > this.timeCollections[i]) {\n dateTimeVal = +(this.createDateObj(new Date(this.timeCollections[i])));\n this.activeIndex = i;\n break;\n }\n }\n }\n }\n this.selectedElement = this.liCollections[this.activeIndex];\n this.timeElementValue(isNullOrUndefined(dateTimeVal) ? null : new Date(dateTimeVal));\n }\n };\n DateTimePicker.prototype.setTimeValue = function (date, value) {\n var dateString;\n var time;\n var val = this.validateMinMaxRange(value);\n var newval = this.createDateObj(val);\n if (this.getFormattedValue(newval) !== (!isNullOrUndefined(this.value) ? this.getFormattedValue(this.value) : null)) {\n this.valueWithMinutes = isNullOrUndefined(newval) ? null : newval;\n time = new Date(+this.valueWithMinutes);\n }\n else {\n if (this.strictMode) {\n //for strict mode case, when value not present within a range. Reset the nearest range value.\n date = newval;\n }\n this.valueWithMinutes = this.checkDateValue(date);\n time = new Date(+this.valueWithMinutes);\n }\n if (this.calendarMode === 'Gregorian') {\n dateString = this.globalize.formatDate(time, {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.cldrDateTimeFormat(),\n type: 'dateTime', skeleton: 'yMd'\n });\n }\n else {\n dateString = this.globalize.formatDate(time, {\n format: !isNullOrUndefined(this.formatString) ? this.formatString : this.cldrDateTimeFormat(),\n type: 'dateTime', skeleton: 'yMd', calendar: 'islamic'\n });\n }\n if (!this.strictMode && isNullOrUndefined(time)) {\n Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(dateString, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n return time;\n };\n DateTimePicker.prototype.timeElementValue = function (value) {\n if (!isNullOrUndefined(this.checkDateValue(value)) && !this.isNullOrEmpty(value)) {\n var date = value instanceof Date ? value : this.getDateObject(value);\n return this.setTimeValue(date, value);\n }\n return null;\n };\n DateTimePicker.prototype.timeKeyHandler = function (event) {\n if (isNullOrUndefined(this.step) || this.step <= 0) {\n return;\n }\n var listCount = this.timeCollections.length;\n if (isNullOrUndefined(this.getTimeActiveElement()) || this.getTimeActiveElement().length === 0) {\n if (this.liCollections.length > 0) {\n if (isNullOrUndefined(this.value) && isNullOrUndefined(this.activeIndex)) {\n this.activeIndex = 0;\n this.selectedElement = this.liCollections[0];\n this.timeElementValue(new Date(this.timeCollections[0]));\n }\n else {\n this.findNextTimeElement(event);\n }\n }\n }\n else {\n var nextItemValue = void 0;\n if ((event.keyCode >= 37) && (event.keyCode <= 40)) {\n var index = (event.keyCode === 40 || event.keyCode === 39) ? ++this.activeIndex : --this.activeIndex;\n this.activeIndex = index = this.activeIndex === (listCount) ? 0 : this.activeIndex;\n this.activeIndex = index = this.activeIndex < 0 ? (listCount - 1) : this.activeIndex;\n nextItemValue = isNullOrUndefined(this.timeCollections[index]) ?\n 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 if (this.enableMask) {\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n Input.setValue(this.getFormattedValue(newProp.value), this.inputElement, this.floatLabelType, this.showClearButton);\n }\n this.valueWithMinutes = newProp.value;\n this.setProperties({ value: newProp.value }, true);\n if (this.popupObj) {\n this.popupUpdate();\n }\n this.previousDateTime = new Date(this.inputElement.value);\n this.updateInput();\n this.changeTrigger(null);\n this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;\n if (this.enableMask && this.value) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n }\n break;\n case 'min':\n case 'max':\n this.getProperty(newProp, prop);\n this.updateInput();\n break;\n case 'enableRtl':\n Input.setEnableRtl(this.enableRtl, [this.inputWrapper.container]);\n break;\n case 'cssClass':\n if (!isNullOrUndefined(oldProp.cssClass)) {\n oldProp.cssClass = (oldProp.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n if (!isNullOrUndefined(newProp.cssClass)) {\n newProp.cssClass = (newProp.cssClass.replace(/\\s+/g, ' ')).trim();\n }\n Input.setCssClass(newProp.cssClass, [this.inputWrapper.container], oldProp.cssClass);\n if (this.dateTimeWrapper) {\n Input.setCssClass(newProp.cssClass, [this.dateTimeWrapper], oldProp.cssClass);\n }\n break;\n case 'locale':\n this.globalize = new Internationalization(this.locale);\n this.l10n.setLocale(this.locale);\n if (this.dateTimeOptions && this.dateTimeOptions.placeholder == null) {\n this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);\n Input.setPlaceholder(this.l10n.getConstant('placeholder'), this.inputElement);\n }\n this.dateTimeFormat = this.cldrDateTimeFormat();\n _super.prototype.updateInput.call(this);\n break;\n case 'htmlAttributes':\n this.updateHtmlAttributeToElement();\n this.updateHtmlAttributeToWrapper();\n this.checkAttributes(true);\n break;\n case 'format':\n this.setProperties({ format: newProp.format }, true);\n this.checkFormat();\n this.dateTimeFormat = this.formatString;\n this.setValue();\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n if (!this.value) {\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n }\n break;\n case 'placeholder':\n Input.setPlaceholder(newProp.placeholder, this.inputElement);\n break;\n case 'enabled':\n Input.setEnabled(this.enabled, this.inputElement);\n if (this.enabled) {\n this.inputElement.setAttribute('tabindex', this.tabIndex);\n }\n else {\n this.inputElement.tabIndex = -1;\n }\n break;\n case 'strictMode':\n this.invalidValueString = null;\n this.updateInput();\n break;\n case 'width':\n this.setWidth(newProp.width);\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-date-time-icon');\n }\n break;\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n break;\n case 'floatLabelType':\n this.floatLabelType = newProp.floatLabelType;\n Input.removeFloating(this.inputWrapper);\n Input.addFloating(this.inputElement, this.floatLabelType, this.placeholder);\n if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {\n this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-date-time-icon');\n }\n break;\n case 'scrollTo':\n if (this.checkDateValue(new Date(this.checkValue(newProp.scrollTo)))) {\n if (this.dateTimeWrapper) {\n this.setScrollTo();\n }\n this.setProperties({ scrollTo: this.checkDateValue(new Date(this.checkValue(newProp.scrollTo))) }, true);\n }\n else {\n this.setProperties({ scrollTo: null }, true);\n }\n break;\n case 'enableMask':\n if (this.enableMask) {\n this.notify('createMask', {\n module: 'MaskedDateTime'\n });\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n else {\n if (this.inputElement.value === this.maskedDateValue) {\n this.maskedDateValue = '';\n Input.setValue(this.maskedDateValue, this.inputElement, this.floatLabelType, this.showClearButton);\n }\n }\n break;\n default:\n _super.prototype.onPropertyChanged.call(this, newProp, oldProp);\n break;\n }\n if (!this.isDynamicValueChanged) {\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(false)\n ], DateTimePicker.prototype, \"fullScreenMode\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"serverTimezoneOffset\", void 0);\n __decorate([\n Property(new Date(1900, 0, 1))\n ], DateTimePicker.prototype, \"min\", void 0);\n __decorate([\n Property(new Date(2099, 11, 31))\n ], DateTimePicker.prototype, \"max\", void 0);\n __decorate([\n Property(null)\n ], DateTimePicker.prototype, \"firstDayOfWeek\", void 0);\n __decorate([\n Property('Gregorian')\n ], DateTimePicker.prototype, \"calendarMode\", void 0);\n __decorate([\n Property('Month')\n ], DateTimePicker.prototype, \"start\", void 0);\n __decorate([\n Property('Month')\n ], DateTimePicker.prototype, \"depth\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"weekNumber\", void 0);\n __decorate([\n Property(true)\n ], DateTimePicker.prototype, \"showTodayButton\", void 0);\n __decorate([\n Property('Short')\n ], DateTimePicker.prototype, \"dayHeaderFormat\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"openOnFocus\", void 0);\n __decorate([\n Property(false)\n ], DateTimePicker.prototype, \"enableMask\", void 0);\n __decorate([\n Property({ day: 'day', month: 'month', year: 'year', hour: 'hour', minute: 'minute', second: 'second', dayOfTheWeek: 'day of the week' })\n ], DateTimePicker.prototype, \"maskPlaceholder\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"open\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"close\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"cleared\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"blur\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"focus\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], DateTimePicker.prototype, \"destroyed\", void 0);\n DateTimePicker = __decorate([\n NotifyPropertyChanges\n ], DateTimePicker);\n return DateTimePicker;\n}(DatePicker));\nexport { DateTimePicker };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Internationalization, setCulture } from '@syncfusion/ej2-base';\n/**\n * ValueFormatter class to globalize the value.\n *\n * @hidden\n */\nvar ValueFormatter = /** @class */ (function () {\n function ValueFormatter(cultureName) {\n this.intl = new Internationalization();\n if (!isNullOrUndefined(cultureName)) {\n this.intl.culture = cultureName;\n }\n }\n ValueFormatter.prototype.getFormatFunction = function (format) {\n if (format.type) {\n return this.intl.getDateFormat(format);\n }\n else {\n return this.intl.getNumberFormat(format);\n }\n };\n ValueFormatter.prototype.getParserFunction = function (format) {\n if (format.type) {\n return this.intl.getDateParser(format);\n }\n else {\n return this.intl.getNumberParser(format);\n }\n };\n ValueFormatter.prototype.fromView = function (value, format, type) {\n if ((type === 'date' || type === 'datetime' || type === 'number') && (!isNullOrUndefined(format))) {\n return format(value);\n }\n else {\n return value;\n }\n };\n ValueFormatter.prototype.toView = function (value, format) {\n var result = value;\n if (!isNullOrUndefined(format) && !isNullOrUndefined(value)) {\n result = format(value);\n }\n return result;\n };\n ValueFormatter.prototype.setCulture = function (cultureName) {\n if (!isNullOrUndefined(cultureName)) {\n setCulture(cultureName);\n }\n };\n return ValueFormatter;\n}());\nexport { ValueFormatter };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined, getValue, closest } from '@syncfusion/ej2-base';\nimport { attributes } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { appendChildren, addStickyColumnPosition } from '../base/util';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport * as events from '../base/constant';\n/**\n * FilterCellRenderer class which responsible for building filter cell.\n *\n * @hidden\n */\nvar FilterCellRenderer = /** @class */ (function (_super) {\n __extends(FilterCellRenderer, _super);\n function FilterCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', { className: 'e-filterbarcell', attrs: { role: 'columnheader' } });\n return _this;\n }\n /**\n * Function to return the wrapper for the TH content.\n *\n * @returns {string} returns the gui\n */\n FilterCellRenderer.prototype.getGui = function () {\n return this.parent.createElement('div');\n };\n /**\n * Function to render the cell content based on Column object.\n *\n * @param {Cell} cell\n * @param {Object} data\n */\n /* tslint:disable-next-line:max-func-body-length */\n FilterCellRenderer.prototype.render = function (cell, data) {\n var tr = this.parent.element.querySelector('.e-filterbar');\n var node = this.element.cloneNode();\n var innerDIV = this.getGui();\n var input;\n var column = cell.column;\n tr.appendChild(node);\n node.setAttribute('e-mappinguid', column.uid);\n if (column.filterTemplate) {\n var fltrData = {};\n if (data) {\n fltrData[column.field] = data[column.field];\n }\n var col = 'column';\n fltrData[\"\" + col] = column;\n if (column.visible) {\n var isReactCompiler = this.parent.isReact && typeof (column.filterTemplate) !== 'string';\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n var tempID = this.parent.element.id + column.uid + 'filterTemplate';\n if (isReactCompiler || isReactChild) {\n column.getFilterTemplate()(fltrData, this.parent, 'filterTemplate', tempID, null, null, node);\n this.parent.renderTemplates();\n }\n else {\n var element = column.getFilterTemplate()(fltrData, this.parent, 'filterTemplate', tempID);\n appendChildren(node, element);\n }\n }\n else {\n node.classList.add('e-hide');\n }\n }\n else {\n if (column.type !== 'checkbox') {\n if ((isNullOrUndefined(column.allowFiltering) || column.allowFiltering) && !isNullOrUndefined(column.filterBarTemplate)) {\n node.classList.add('e-fltrtemp');\n attributes(innerDIV, {\n 'class': 'e-fltrtempdiv'\n });\n if (isNullOrUndefined(column.filterBarTemplate.create)) {\n input = this.parent.createElement('input', {\n id: column.field + '_filterBarcell', className: 'e-filterUi_input e-filtertext e-fltrTemp',\n attrs: { type: 'search', title: column.headerText }\n });\n innerDIV.appendChild(input);\n }\n else {\n var args = { column: column, node: Element };\n var temp = column.filterBarTemplate.create;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n input = temp(args);\n if (typeof input === 'string') {\n var div = this.parent.createElement('div');\n div.innerHTML = input;\n input = div.firstChild;\n }\n attributes(innerDIV, {\n class: 'e-filterUi_input e-filtertext e-fltrTemp',\n title: column.headerText,\n id: column.field + '_filterBarcell'\n });\n innerDIV.appendChild(input);\n }\n }\n else {\n attributes(innerDIV, {\n 'class': 'e-filterdiv e-fltrinputdiv'\n });\n input = this.parent.createElement('input', {\n id: column.field + '_filterBarcell', className: 'e-filtertext',\n attrs: {\n type: 'search', title: column.headerText + cell.attributes.title,\n value: data[cell.column.field] ? data[cell.column.field] : ''\n }\n });\n innerDIV.appendChild(input);\n var args = {\n element: input, floatLabelType: 'Never',\n properties: {\n enableRtl: this.parent.enableRtl, showClearButton: true, cssClass: this.parent.cssClass\n }\n };\n Input.createInput(args, this.parent.createElement);\n }\n //TODO: apply intial filtering\n if (column.allowFiltering === false || column.field === '' || isNullOrUndefined(column.field)) {\n input.setAttribute('disabled', 'true');\n input.classList.add('e-disable');\n }\n var clearIconElem = innerDIV.querySelector('.e-clear-icon');\n if (clearIconElem) {\n clearIconElem.setAttribute('title', this.parent.localeObj.getConstant('ClearButton'));\n }\n if (!column.visible) {\n node.classList.add('e-hide');\n }\n this.appendHtml(node, innerDIV);\n // render's the dropdownlist component if showFilterBarOperator sets to true\n if (this.parent.filterSettings.showFilterBarOperator && this.parent.filterSettings.type === 'FilterBar' &&\n !this.parent.isPrinting && isNullOrUndefined(column.filterTemplate) && isNullOrUndefined(column.filterBarTemplate)) {\n this.operatorIconRender(innerDIV, column, cell);\n }\n if ((isNullOrUndefined(column.allowFiltering) || column.allowFiltering) && !isNullOrUndefined(column.filterBarTemplate)) {\n var templateWrite = column.filterBarTemplate.write;\n var args = { element: input, column: column };\n if (typeof templateWrite === 'string') {\n templateWrite = getValue(templateWrite, window);\n }\n templateWrite.call(this, args);\n }\n }\n }\n if (this.parent.isFrozenGrid()) {\n addStickyColumnPosition(this.parent, column, node);\n }\n return node;\n };\n /**\n * Function to specifies how the result content to be placed in the cell.\n *\n * @param {Element} node - specifies the node\n * @param {string|Element} innerHtml - specifies the innerHTML\n * @returns {Element} retruns the element\n */\n FilterCellRenderer.prototype.appendHtml = function (node, innerHtml) {\n node.appendChild(innerHtml);\n return node;\n };\n FilterCellRenderer.prototype.operatorIconRender = function (innerDIV, column, cell) {\n var gObj = this.parent;\n var operators;\n var fbicon = this.parent.createElement('input', {\n className: ' e-filterbaroperator e-icons e-icon-filter',\n id: cell.column.uid\n });\n innerDIV.querySelector('span').appendChild(fbicon);\n if (column.filter && column.filter.operator) {\n operators = column.filter.operator;\n }\n else if (gObj.filterSettings.columns.length) {\n for (var i = 0, a = gObj.filterSettings.columns; i < a.length; i++) {\n var col = a[parseInt(i.toString(), 10)];\n if (col.field === column.field) {\n operators = col.operator;\n break;\n }\n else {\n operators = 'equal';\n }\n }\n }\n else {\n operators = 'equal';\n }\n if (!isNullOrUndefined(gObj.filterModule.operators[column.field])) {\n operators = gObj.filterModule.operators[column.field];\n }\n this.dropOptr = new DropDownList({\n fields: { text: 'text', value: 'value' },\n popupHeight: 'auto',\n value: operators,\n width: '0px',\n enabled: column.allowFiltering,\n popupWidth: 'auto',\n enableRtl: this.parent.enableRtl,\n change: this.internalEvent.bind(this),\n beforeOpen: function () {\n var operator = gObj.filterModule.customOperators;\n this.dataSource = operator[gObj.getColumnByUid(this.element.id).type + 'Operator'];\n for (var i = 0; i < this.dataSource.length; i++) {\n if (column.filter && column.filter.operator && isNullOrUndefined(gObj.filterModule.operators[column.field]) &&\n this.dataSource[parseInt(i.toString(), 10)].value === column.filter.operator) {\n this.value = column.filter.operator;\n }\n }\n },\n cssClass: this.parent.cssClass ? 'e-popup-flbar' + ' ' + this.parent.cssClass : 'e-popup-flbar'\n });\n this.dropOptr.appendTo(fbicon);\n var spanElmt = closest(this.dropOptr.element, 'span');\n spanElmt.classList.add('e-filterbardropdown');\n spanElmt.removeAttribute('tabindex');\n };\n FilterCellRenderer.prototype.internalEvent = function (e) {\n var gObj = this.parent;\n var col = gObj.getColumnByUid(e.element.getAttribute('id'));\n e.column = col;\n gObj.filterModule.operators[col.field] = e.value;\n gObj.notify(events.getFilterBarOperator, e);\n };\n return FilterCellRenderer;\n}(CellRenderer));\nexport { FilterCellRenderer };\n","import { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Query, DataManager } from '@syncfusion/ej2-data';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\n/**\n * `filter operators` render boolean column.\n *\n * @hidden\n */\nvar FlMenuOptrUI = /** @class */ (function () {\n function FlMenuOptrUI(parent, customFltrOperators, serviceLocator, filterSettings) {\n this.ddOpen = this.dropDownOpen.bind(this);\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.filterSettings = filterSettings;\n this.customFilterOperators = customFltrOperators;\n if (this.parent) {\n this.parent.on(events.filterMenuClose, this.destroyDropDownList, this);\n this.parent.on(events.destroy, this.destroyDropDownList, this);\n }\n }\n /**\n * @param {Element} dlgConetntEle - specifies the content element\n * @param {Element} target - specifies the target\n * @param {Column} column - specifies the column\n * @param {Dialog} dlgObj - specifies the dialog\n * @param {Object[]} operator - specifies the operator list\n * @returns {void}\n * @hidden\n */\n // eslint-disable-next-line max-len\n FlMenuOptrUI.prototype.renderOperatorUI = function (dlgConetntEle, target, column, dlgObj, operator) {\n this.dialogObj = dlgObj;\n var optr = column.type + 'Operator';\n this.optrData = this.customOptr = !isNullOrUndefined(operator) ? operator :\n (!isNullOrUndefined(this.parent.filterSettings.operators) && !isNullOrUndefined(this.parent.filterSettings.operators[\"\" + optr])) ?\n this.parent.filterSettings.operators[\"\" + optr] : this.customFilterOperators[\"\" + optr];\n var dropDatasource = this.customOptr;\n var selectedValue = this.dropSelectedVal(column, optr);\n var optrDiv = this.parent.createElement('div', { className: 'e-flm_optrdiv' });\n dlgConetntEle.appendChild(optrDiv);\n var optrInput = this.parent.createElement('input', { id: column.uid + '-floptr' });\n optrDiv.appendChild(optrInput);\n this.dropOptr = new DropDownList({\n dataSource: dropDatasource,\n fields: { text: 'text', value: 'value' },\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n enableRtl: this.parent.enableRtl,\n text: selectedValue,\n // eslint-disable-next-line @typescript-eslint/tslint/config\n change: function () {\n var valInput = document.querySelector('.e-flmenu-valuediv').querySelector('input');\n if (this.value === 'isempty' || this.value === 'isnotempty' ||\n this.value === 'isnull' || this.value === 'isnotnull') {\n valInput['ej2_instances'][0]['enabled'] = false;\n }\n else if (!isNullOrUndefined(valInput.getAttribute('disabled'))) {\n valInput['ej2_instances'][0]['enabled'] = true;\n }\n }\n });\n this.dropOptr.addEventListener(literals['open'], this.ddOpen);\n this.dropOptr.appendTo('#' + column.uid + '-floptr');\n };\n FlMenuOptrUI.prototype.renderResponsiveDropDownList = function (args) {\n args.popup.element.style.width = '100%';\n };\n FlMenuOptrUI.prototype.dropDownOpen = function (args) {\n args.popup.element.style.zIndex = (this.dialogObj.zIndex + 1).toString();\n if (this.parent.enableAdaptiveUI) {\n this.renderResponsiveDropDownList(args);\n }\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n FlMenuOptrUI.prototype.dropSelectedVal = function (col, optr) {\n var selValue = '';\n var columns = this.parent.filterSettings.columns;\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var column = columns_1[_i];\n if (col.field === column.field || (col.isForeignColumn() && col.foreignKeyValue === column.field)) {\n var selectedField = new DataManager(this.optrData).executeLocal(new Query().where('value', 'equal', column.operator));\n selValue = !isNullOrUndefined(selectedField[0]) ? selectedField[0].text : '';\n }\n }\n if (selValue === '') { // rewuired or not\n if (col.filter.operator) {\n var optrLen = Object.keys(this.optrData).length;\n for (var i = 0; i < optrLen; i++) {\n if (this.optrData[parseInt(i.toString(), 10)].value === col.filter.operator) {\n selValue = this.optrData[parseInt(i.toString(), 10)].text;\n }\n }\n }\n else {\n selValue = this.optrData[0].text;\n }\n }\n return selValue;\n };\n /**\n * @returns {string} returns the operator\n * @hidden\n */\n FlMenuOptrUI.prototype.getFlOperator = function () {\n return this.dropOptr.value;\n };\n FlMenuOptrUI.prototype.destroyDropDownList = function () {\n if (this.dropOptr.isDestroyed) {\n return;\n }\n this.dropOptr.removeEventListener(literals['open'], this.ddOpen);\n this.dropOptr.destroy();\n this.parent.off(events.filterMenuClose, this.destroyDropDownList);\n this.parent.off(events.destroy, this.destroyDropDownList);\n };\n return FlMenuOptrUI;\n}());\nexport { FlMenuOptrUI };\n","import { AutoComplete } from '@syncfusion/ej2-dropdowns';\nimport { DataManager, Query, Predicate } from '@syncfusion/ej2-data';\nimport { Browser, isNullOrUndefined, extend, getValue } from '@syncfusion/ej2-base';\nimport { getZIndexCalcualtion, eventPromise } from '../base/util';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\n/**\n * `string filterui` render string column.\n *\n * @hidden\n */\nvar StringFilterUI = /** @class */ (function () {\n function StringFilterUI(parent, serviceLocator, filterSettings) {\n this.parent = parent;\n this.serLocator = serviceLocator;\n this.filterSettings = filterSettings;\n if (this.parent) {\n this.parent.on(events.filterMenuClose, this.destroy, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n }\n StringFilterUI.prototype.create = function (args) {\n this.instance = this.parent.createElement('input', { className: 'e-flmenu-input', id: 'strui-' + args.column.uid });\n args.target.appendChild(this.instance);\n this.dialogObj = args.dialogObj;\n this.processDataOperation(args);\n };\n StringFilterUI.prototype.processDataOperation = function (args) {\n var _this = this;\n if (args.column.isForeignColumn()) {\n this.parent.getDataModule().dataManager.executeQuery(this.parent.getDataModule().generateQuery(true))\n .then(function (result) { _this.getAutoCompleteOptions(args, result); });\n return;\n }\n this.getAutoCompleteOptions(args);\n };\n StringFilterUI.prototype.getAutoCompleteOptions = function (args, result) {\n var isForeignColumn = args.column.isForeignColumn();\n var foreignColumnQuery;\n if (isForeignColumn) {\n var filteredData = CheckBoxFilterBase.getDistinct(result.result, args.column.field)\n .records || [];\n var filterQuery = void 0;\n for (var i = 0; i < filteredData.length; i++) {\n if (filterQuery) {\n filterQuery = filterQuery.or(args.column.field, 'contains', filteredData[parseInt(i.toString(), 10)][args.column.field], this.parent\n .filterSettings.enableCaseSensitivity, this.parent.filterSettings.ignoreAccent);\n }\n else {\n filterQuery = new Predicate(args.column.field, 'contains', filteredData[parseInt(i.toString(), 10)][args.column.field], this.parent\n .filterSettings.enableCaseSensitivity, this.parent.filterSettings.ignoreAccent);\n }\n }\n foreignColumnQuery = new Query().where(filterQuery);\n foreignColumnQuery.params = this.parent.query.params;\n }\n var dataSource = isForeignColumn ? args.column.dataSource : this.parent.dataSource;\n var fields = { value: isForeignColumn ? args.column.foreignKeyValue : args.column.field };\n var autoComplete = new AutoComplete(extend({\n dataSource: dataSource instanceof DataManager ? dataSource : new DataManager(dataSource),\n fields: fields,\n locale: this.parent.locale,\n enableRtl: this.parent.enableRtl,\n query: isForeignColumn ? foreignColumnQuery : this.parent.getDataModule().generateQuery(true, true),\n sortOrder: 'Ascending',\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n autofill: true,\n placeholder: args.localizeText.getConstant('EnterValue'),\n actionBegin: function () {\n if (this.query.queries.length && this.query.queries[0].fn === 'onWhere' && this.query.queries[0].e\n && this.query.queries[0].e.predicates) {\n for (var i = 0; i < this.query.queries[0].e.predicates.length; i++) {\n if (this.properties.fields.value === this.query.queries[0].e.predicates[\"\" + i].field) {\n this.query.queries[0].e.predicates.splice(i, 1);\n i = i - 1;\n }\n }\n if (!this.query.queries[0].e.predicates.length) {\n this.query.queries.splice(0, 1);\n }\n }\n }\n }, args.column.filter.params));\n this.acFocus = this.focus(autoComplete, args);\n this.acComplete = this.actionComplete(autoComplete);\n this.acOpen = this.openPopup.bind(this);\n autoComplete.addEventListener(literals.focus, this.acFocus);\n autoComplete.addEventListener(literals['open'], this.acOpen);\n autoComplete.addEventListener(events.actionComplete, this.acComplete);\n if (dataSource && 'result' in dataSource) {\n var query = this.parent.getQuery ? this.parent.getQuery().clone() : new Query();\n var defObj = eventPromise({ requestType: 'stringfilterrequest' }, query);\n this.parent.trigger(events.dataStateChange, defObj.state);\n var def = defObj.deffered;\n def.promise.then(function (e) {\n autoComplete.dataSource = new DataManager(e);\n });\n }\n this.actObj = autoComplete;\n this.actObj.appendTo(this.instance);\n if (isForeignColumn) {\n this.parent.filterModule.filterModule.afterRenderFilterUI();\n }\n };\n StringFilterUI.prototype.write = function (args) {\n if (args.filteredValue !== '' && !isNullOrUndefined(args.filteredValue)) {\n var struiObj = document.querySelector('#strui-' + args.column.uid).ej2_instances[0];\n struiObj.value = args.filteredValue;\n }\n };\n StringFilterUI.prototype.read = function (element, column, filterOptr, filterObj) {\n var actuiObj = document.querySelector('#strui-' + column.uid).ej2_instances[0];\n if (Browser.isDevice) {\n actuiObj.hidePopup();\n actuiObj.focusOut();\n }\n var filterValue = actuiObj.value;\n if (isNullOrUndefined(filterValue) || filterValue === '') {\n filterValue = null;\n }\n filterObj.filterByColumn(column.field, filterOptr, filterValue, 'and', this.parent.filterSettings.enableCaseSensitivity);\n };\n StringFilterUI.prototype.openPopup = function (args) {\n getZIndexCalcualtion(args, this.dialogObj);\n };\n StringFilterUI.prototype.focus = function (actObj, args) {\n return function () {\n actObj.filterType = args.getOptrInstance.getFlOperator();\n };\n };\n StringFilterUI.prototype.actionComplete = function (actObj) {\n return function (e) {\n e.result = e.result.filter(function (obj, index, arr) {\n return arr.map(function (mapObj) {\n return (getValue(actObj.fields.value, mapObj));\n }).indexOf(getValue((actObj.fields.value), obj)) === index;\n });\n };\n };\n StringFilterUI.prototype.destroy = function () {\n if (!this.actObj || this.actObj.isDestroyed) {\n return;\n }\n this.actObj.removeEventListener(literals.focus, this.acFocus);\n this.actObj.removeEventListener(literals['open'], this.acOpen);\n this.actObj.removeEventListener(events.actionComplete, this.acComplete);\n this.actObj.destroy();\n this.parent.off(events.filterMenuClose, this.destroy);\n this.parent.off(events.destroy, this.destroy);\n };\n return StringFilterUI;\n}());\nexport { StringFilterUI };\n","import { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { extend, isUndefined } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\n/**\n * `numberfilterui` render number column.\n *\n * @hidden\n */\nvar NumberFilterUI = /** @class */ (function () {\n function NumberFilterUI(parent, serviceLocator, filterSettings) {\n this.filterSettings = filterSettings;\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n if (this.parent) {\n this.parent.on(events.filterMenuClose, this.destroy, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n }\n NumberFilterUI.prototype.keyEventHandler = function (args) {\n if (args.keyCode === 13 || args.keyCode === 9) {\n var evt = document.createEvent('HTMLEvents');\n evt.initEvent('change', false, true);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.dispatchEvent(evt);\n }\n };\n NumberFilterUI.prototype.create = function (args) {\n this.instance = this.parent.createElement('input', { className: 'e-flmenu-input', id: 'numberui-' + args.column.uid });\n args.target.appendChild(this.instance);\n this.numericTxtObj = new NumericTextBox(extend({\n format: typeof (args.column.format) === 'string' || isUndefined(args.column.format) ? args.column.format :\n args.column.format.format,\n locale: this.parent.locale,\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n placeholder: args.localizeText.getConstant('EnterValue'),\n enableRtl: this.parent.enableRtl\n }, args.column.filter.params));\n this.numericTxtObj.appendTo(this.instance);\n };\n NumberFilterUI.prototype.write = function (args) {\n var numberuiObj = document.querySelector('#numberui-' + args.column.uid).ej2_instances[0];\n numberuiObj.element.addEventListener('keydown', this.keyEventHandler);\n numberuiObj.value = args.filteredValue;\n };\n NumberFilterUI.prototype.read = function (element, column, filterOptr, filterObj) {\n var numberuiObj = document.querySelector('#numberui-' + column.uid).ej2_instances[0];\n var filterValue = numberuiObj.value;\n filterObj.filterByColumn(column.field, filterOptr, filterValue, 'and', true);\n };\n NumberFilterUI.prototype.destroy = function () {\n if (!this.numericTxtObj || this.numericTxtObj.isDestroyed) {\n return;\n }\n this.numericTxtObj.destroy();\n this.parent.off(events.filterMenuClose, this.destroy);\n this.parent.off(events.destroy, this.destroy);\n };\n return NumberFilterUI;\n}());\nexport { NumberFilterUI };\n","import { getZIndexCalcualtion } from '../base/util';\nimport { Query, DataManager, DataUtil } from '@syncfusion/ej2-data';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\n/**\n * `boolfilterui` render boolean column.\n *\n * @hidden\n */\nvar BooleanFilterUI = /** @class */ (function () {\n function BooleanFilterUI(parent, serviceLocator, filterSettings) {\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.filterSettings = filterSettings;\n if (this.parent) {\n this.parent.on(events.filterMenuClose, this.destroy, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n }\n BooleanFilterUI.prototype.create = function (args) {\n var isForeignColumn = args.column.isForeignColumn();\n var dataSource = isForeignColumn ? args.column.dataSource : this.parent.dataSource;\n var fields = isForeignColumn ? args.column.foreignKeyValue : args.column.field;\n this.elem = this.parent.createElement('input', { className: 'e-flmenu-input', id: 'bool-ui-' + args.column.uid });\n args.target.appendChild(this.elem);\n this.dialogObj = args.dialogObj;\n this.dropInstance = new DropDownList(extend({\n dataSource: dataSource instanceof DataManager ?\n dataSource : new DataManager(dataSource),\n query: new Query().select(fields),\n fields: { text: fields, value: fields },\n placeholder: args.localizeText.getConstant('SelectValue'),\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n locale: this.parent.locale,\n enableRtl: this.parent.enableRtl\n }, args.column.filter.params));\n this.ddOpen = this.openPopup.bind(this);\n this.ddComplete = this.actionComplete(fields);\n this.dropInstance.addEventListener(literals['open'], this.ddOpen);\n this.dropInstance.addEventListener(events.actionComplete, this.ddComplete);\n this.dropInstance.appendTo(this.elem);\n };\n BooleanFilterUI.prototype.write = function (args) {\n var drpuiObj = document.querySelector('#bool-ui-' + args.column.uid).ej2_instances[0];\n if (!isNullOrUndefined(args.filteredValue)) {\n drpuiObj.value = args.filteredValue;\n }\n };\n BooleanFilterUI.prototype.read = function (element, column, filterOptr, filterObj) {\n var drpuiObj = document.querySelector('#bool-ui-' + column.uid).ej2_instances[0];\n var filterValue = drpuiObj.value;\n filterObj.filterByColumn(column.field, filterOptr, filterValue, 'and', false);\n };\n BooleanFilterUI.prototype.openPopup = function (args) {\n getZIndexCalcualtion(args, this.dialogObj);\n };\n BooleanFilterUI.prototype.actionComplete = function (fields) {\n return function (e) {\n e.result = DataUtil.distinct(e.result, fields, true);\n };\n };\n BooleanFilterUI.prototype.destroy = function () {\n if (!this.dropInstance || this.dropInstance.isDestroyed) {\n return;\n }\n this.dropInstance.removeEventListener(literals['open'], this.ddOpen);\n this.dropInstance.removeEventListener(events.actionComplete, this.ddComplete);\n this.dropInstance.destroy();\n this.parent.off(events.filterMenuClose, this.destroy);\n this.parent.off(events.destroy, this.destroy);\n };\n return BooleanFilterUI;\n}());\nexport { BooleanFilterUI };\n","import { DatePicker, DateTimePicker } from '@syncfusion/ej2-calendars';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { getCustomDateFormat } from '../base/util';\nimport * as events from '../base/constant';\nimport * as literals from '../base/string-literals';\n/**\n * `datefilterui` render date column.\n *\n * @hidden\n */\nvar DateFilterUI = /** @class */ (function () {\n function DateFilterUI(parent, serviceLocator, filterSettings) {\n this.dpOpen = this.openPopup.bind(this);\n this.parent = parent;\n this.locator = serviceLocator;\n this.fltrSettings = filterSettings;\n if (this.parent) {\n this.parent.on(events.filterMenuClose, this.destroy, this);\n this.parent.on(events.destroy, this.destroy, this);\n }\n }\n DateFilterUI.prototype.create = function (args) {\n var format = getCustomDateFormat(args.column.format, args.column.type);\n this.dialogObj = args.dialogObj;\n this.inputElem = this.parent.createElement('input', { className: 'e-flmenu-input', id: 'dateui-' + args.column.uid });\n args.target.appendChild(this.inputElem);\n if (args.column.type === 'date' || args.column.type === 'dateonly') {\n this.datePickerObj = new DatePicker(extend({\n format: format,\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n placeholder: args.localizeText.getConstant('ChooseDate'),\n width: '100%',\n locale: this.parent.locale,\n enableRtl: this.parent.enableRtl\n }, args.column.filter.params));\n }\n else if (args.column.type === 'datetime') {\n this.datePickerObj = new DateTimePicker(extend({\n format: format,\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n placeholder: args.localizeText.getConstant('ChooseDate'),\n width: '100%',\n locale: this.parent.locale,\n enableRtl: this.parent.enableRtl\n }, args.column.filter.params));\n }\n this.datePickerObj.addEventListener(literals['open'], this.dpOpen);\n this.datePickerObj.appendTo(this.inputElem);\n };\n DateFilterUI.prototype.write = function (args) {\n var dateuiObj = document.querySelector('#dateui-' + args.column.uid).ej2_instances[0];\n dateuiObj.value = !isNullOrUndefined(args.filteredValue) ? new Date(args.filteredValue) : null;\n };\n DateFilterUI.prototype.read = function (element, column, filterOptr, filterObj) {\n var dateuiObj = document.querySelector('#dateui-' + column.uid).ej2_instances[0];\n var filterValue = dateuiObj.value;\n filterValue = isNullOrUndefined(filterValue) ? null : filterValue;\n filterObj.filterByColumn(column.field, filterOptr, filterValue, 'and', true);\n };\n DateFilterUI.prototype.openPopup = function (args) {\n args.popup.element.style.zIndex = (this.dialogObj.zIndex + 1).toString();\n };\n DateFilterUI.prototype.destroy = function () {\n this.parent.off(events.filterMenuClose, this.destroy);\n this.parent.off(events.destroy, this.destroy);\n if (isNullOrUndefined(this.datePickerObj) || this.datePickerObj.isDestroyed) {\n return;\n }\n this.datePickerObj.removeEventListener(literals['open'], this.dpOpen);\n this.datePickerObj.destroy();\n };\n return DateFilterUI;\n}());\nexport { DateFilterUI };\n","import { isNullOrUndefined, getValue, remove } from '@syncfusion/ej2-base';\nimport { Browser } from '@syncfusion/ej2-base';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { FlMenuOptrUI } from './filter-menu-operator';\nimport { StringFilterUI } from './string-filter-ui';\nimport { NumberFilterUI } from './number-filter-ui';\nimport { BooleanFilterUI } from './boolean-filter-ui';\nimport { DateFilterUI } from './date-filter-ui';\nimport { getFilterMenuPostion, parentsUntil, appendChildren, clearReactVueTemplates } from '../base/util';\nimport * as events from '../base/constant';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\n/**\n * `filter menu` render boolean column.\n *\n * @hidden\n */\nvar FilterMenuRenderer = /** @class */ (function () {\n function FilterMenuRenderer(parent, filterSettings, serviceLocator, customFltrOperators, fltrObj) {\n this.isDialogOpen = false;\n this.maxHeight = '350px';\n this.isMenuCheck = false;\n this.colTypes = {\n 'string': StringFilterUI, 'number': NumberFilterUI, 'date': DateFilterUI, 'dateonly': DateFilterUI, 'boolean': BooleanFilterUI, 'datetime': DateFilterUI\n };\n this.parent = parent;\n this.filterSettings = filterSettings;\n this.serviceLocator = serviceLocator;\n this.customFilterOperators = customFltrOperators;\n this.filterObj = fltrObj;\n this.flMuiObj = new FlMenuOptrUI(this.parent, this.customFilterOperators, this.serviceLocator);\n this.l10n = this.serviceLocator.getService('localization');\n this.menuFilterBase = new CheckBoxFilterBase(parent);\n }\n FilterMenuRenderer.prototype.clearCustomFilter = function (col) {\n this.clearBtnClick(col);\n };\n FilterMenuRenderer.prototype.applyCustomFilter = function (args) {\n this.filterBtnClick(args.col);\n };\n FilterMenuRenderer.prototype.openDialog = function (args) {\n this.options = args;\n this.col = this.parent.getColumnByField(args.field);\n if (isNullOrUndefined(this.col.filter) || (isNullOrUndefined(this.col.filter.type) || this.col.filter.type === 'Menu')) { ///\n this.renderDlgContent(args.target, this.col);\n }\n };\n FilterMenuRenderer.prototype.closeDialog = function (target) {\n if (!this.dlgObj) {\n return;\n }\n if (this.parent.isReact || this.parent.isVue) {\n clearReactVueTemplates(this.parent, ['filterTemplate']);\n }\n var elem = document.getElementById(this.dlgObj.element.id);\n if (this.dlgObj && !this.dlgObj.isDestroyed && elem) {\n var argument = { cancel: false, column: this.col, target: target, element: elem };\n this.parent.notify(events.filterMenuClose, argument);\n if (argument.cancel) {\n return;\n }\n this.isDialogOpen = false;\n if (this.isMenuCheck) {\n this.menuFilterBase.unWireEvents();\n this.parent.off(events.cBoxFltrComplete, this.actionComplete);\n this.isMenuCheck = false;\n }\n this.dlgObj.destroy();\n remove(elem);\n }\n this.parent.notify(events.filterDialogClose, {});\n };\n FilterMenuRenderer.prototype.renderDlgContent = function (target, column) {\n var args = {\n requestType: events.filterBeforeOpen,\n columnName: column.field, columnType: column.type\n };\n var filterModel = 'filterModel';\n args[\"\" + filterModel] = this;\n this.parent.trigger(events.actionBegin, args);\n var mainDiv = this.parent.createElement('div', { className: 'e-flmenu-maindiv', id: column.uid + '-flmenu' });\n this.dlgDiv = this.parent.createElement('div', { className: 'e-flmenu', id: column.uid + '-flmdlg' });\n this.dlgDiv.setAttribute('aria-label', this.l10n.getConstant('FilterMenuDialogARIA'));\n if (this.parent.enableAdaptiveUI) {\n var responsiveCnt = document.querySelector('.e-resfilter > .e-dlg-content > .e-mainfilterdiv');\n responsiveCnt.appendChild(this.dlgDiv);\n }\n else {\n this.parent.element.appendChild(this.dlgDiv);\n }\n this.dlgObj = new Dialog({\n showCloseIcon: false,\n closeOnEscape: false,\n locale: this.parent.locale,\n visible: false,\n enableRtl: this.parent.enableRtl,\n created: this.dialogCreated.bind(this, target, column),\n position: this.parent.element.classList.contains('e-device') ? { X: 'center', Y: 'center' } : { X: '', Y: '' },\n target: this.parent.element.classList.contains('e-device') ? document.body : this.parent.element,\n buttons: [{\n click: this.filterBtnClick.bind(this, column),\n buttonModel: {\n content: this.l10n.getConstant('FilterButton'), isPrimary: true,\n cssClass: this.parent.cssClass ? 'e-flmenu-okbtn' + ' ' + this.parent.cssClass : 'e-flmenu-okbtn'\n }\n },\n {\n click: this.clearBtnClick.bind(this, column),\n buttonModel: { content: this.l10n.getConstant('ClearButton'),\n cssClass: this.parent.cssClass ? 'e-flmenu-cancelbtn' + ' ' + this.parent.cssClass : 'e-flmenu-cancelbtn' }\n }],\n content: mainDiv,\n width: (!isNullOrUndefined(parentsUntil(target, 'e-bigger'))) || this.parent.element.classList.contains('e-device') ? 260 : 250,\n animationSettings: { effect: 'None' },\n cssClass: this.parent.cssClass ? 'e-filter-popup' + ' ' + this.parent.cssClass : 'e-filter-popup'\n });\n var isStringTemplate = 'isStringTemplate';\n this.dlgObj[\"\" + isStringTemplate] = true;\n this.renderResponsiveDialog();\n this.dlgObj.appendTo(this.dlgDiv);\n };\n FilterMenuRenderer.prototype.renderResponsiveDialog = function () {\n var gObj = this.parent;\n if (gObj.enableAdaptiveUI) {\n this.dlgObj.position = { X: '', Y: '' };\n this.dlgObj.target = document.querySelector('.e-resfilter > .e-dlg-content > .e-mainfilterdiv');\n this.dlgObj.width = '100%';\n this.dlgObj.isModal = false;\n this.dlgObj.buttons = [{}];\n }\n };\n FilterMenuRenderer.prototype.dialogCreated = function (target, column) {\n if (!Browser.isDevice && target) {\n getFilterMenuPostion(target, this.dlgObj);\n }\n this.currentDialogCreatedColumn = column;\n this.renderFilterUI(target, column);\n if (!(column.isForeignColumn() && !(!isNullOrUndefined(column.filter) && !isNullOrUndefined(column.filter.ui)\n && !isNullOrUndefined(column.filter.ui.create)))) {\n this.afterRenderFilterUI();\n }\n if (!isNullOrUndefined(column.filterTemplate)) {\n this.dlgDiv.querySelector('.e-flmenu-valuediv').firstElementChild.focus();\n this.dlgDiv.querySelector('.e-flmenu-valuediv').firstElementChild.classList.add('e-input-focus');\n }\n else if (!isNullOrUndefined(this.dlgDiv.querySelector('.e-flmenu-input'))) {\n this.dlgDiv.querySelector('.e-flmenu-input').focus();\n this.dlgDiv.querySelector('.e-flmenu-input').parentElement.classList.add('e-input-focus');\n }\n };\n /**\n * Function to notify filterDialogCreated and trigger actionComplete\n *\n * @returns {void}\n * @hidden\n */\n FilterMenuRenderer.prototype.afterRenderFilterUI = function () {\n var column = this.currentDialogCreatedColumn;\n if (column.showColumnMenu) {\n this.parent.notify(events.filterDialogCreated, {});\n }\n if (this.parent.enableAdaptiveUI) {\n this.dlgObj.element.style.left = '0px';\n this.dlgObj.element.style.maxHeight = 'none';\n }\n else {\n this.dlgObj.element.style.maxHeight = this.maxHeight;\n }\n this.dlgObj.show();\n var optrInput = this.dlgObj.element.querySelector('.e-flm_optrdiv').querySelector('input');\n var valInput = this.dlgObj.element.querySelector('.e-flmenu-valuediv').querySelector('input');\n if (optrInput.value === 'Empty' || optrInput.value === 'Not Empty' ||\n optrInput.value === 'Null' || optrInput.value === 'Not Null') {\n valInput['ej2_instances'][0]['enabled'] = false;\n }\n else if (!isNullOrUndefined(valInput && valInput.getAttribute('disabled'))) {\n valInput['ej2_instances'][0]['enabled'] = true;\n }\n if (!column.filterTemplate) {\n this.writeMethod(column, this.dlgObj.element.querySelector('#' + column.uid + '-flmenu'));\n }\n var args = {\n requestType: events.filterAfterOpen,\n columnName: column.field, columnType: column.type\n };\n var filterModel = 'filterModel';\n args[\"\" + filterModel] = this;\n this.isDialogOpen = true;\n if (!this.isMenuCheck) {\n this.parent.trigger(events.actionComplete, args);\n }\n };\n FilterMenuRenderer.prototype.renderFilterUI = function (target, col) {\n var dlgConetntEle = this.dlgObj.element.querySelector('.e-flmenu-maindiv');\n this.parent.log('column_type_missing', { column: col });\n this.renderOperatorUI(dlgConetntEle, target, col);\n this.renderFlValueUI(dlgConetntEle, target, col);\n };\n FilterMenuRenderer.prototype.renderOperatorUI = function (dlgConetntEle, target, column) {\n this.flMuiObj.renderOperatorUI(dlgConetntEle, target, column, this.dlgObj, this.filterObj.menuOperator);\n };\n FilterMenuRenderer.prototype.renderFlValueUI = function (dlgConetntEle, target, column) {\n var valueDiv = this.parent.createElement('div', { className: 'e-flmenu-valuediv' });\n var fObj = this.filterObj;\n dlgConetntEle.appendChild(valueDiv);\n var instanceofFilterUI = new this.colTypes[column.type](this.parent, this.serviceLocator, this.parent.filterSettings);\n if (column.filterTemplate) {\n var fltrData = {};\n var valueInString = 'value';\n fltrData[column.field] = fltrData[\"\" + valueInString] = fObj.values[column.field];\n if (column.foreignKeyValue) {\n fltrData[column.foreignKeyValue] = fObj.values[column.field];\n fltrData[column.field] = undefined;\n }\n var col = 'column';\n fltrData[\"\" + col] = column;\n var isReactCompiler = this.parent.isReact && typeof (column.filterTemplate) !== 'string';\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n var tempID = this.parent.element.id + column.uid + 'filterTemplate';\n if (isReactCompiler || isReactChild) {\n column.getFilterTemplate()(fltrData, this.parent, 'filterTemplate', tempID, null, null, valueDiv);\n this.parent.renderTemplates();\n }\n else {\n var compElement = column.getFilterTemplate()(fltrData, this.parent, 'filterTemplate', tempID);\n appendChildren(valueDiv, compElement);\n }\n if (this.isMenuCheck) {\n this.menuFilterBase.cBox = this.dlgObj.element.querySelector('.e-checkboxlist.e-fields');\n this.menuFilterBase.wireEvents();\n this.parent.on(events.cBoxFltrComplete, this.actionComplete, this);\n this.menuFilterBase.getAllData();\n }\n }\n else {\n if (!isNullOrUndefined(column.filter) && !isNullOrUndefined(column.filter.ui)\n && !isNullOrUndefined(column.filter.ui.create)) {\n var temp = column.filter.ui.create;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n temp({\n column: column, target: valueDiv,\n getOptrInstance: this.flMuiObj, dialogObj: this.dlgObj\n });\n }\n else {\n instanceofFilterUI.create({\n column: column, target: valueDiv,\n getOptrInstance: this.flMuiObj, localizeText: this.l10n, dialogObj: this.dlgObj\n });\n }\n }\n };\n FilterMenuRenderer.prototype.writeMethod = function (col, dlgContentEle) {\n var flValue;\n var target = dlgContentEle.querySelector('.e-flmenu-valinput');\n var instanceofFilterUI = new this.colTypes[col.type](this.parent, this.serviceLocator, this.parent.filterSettings);\n var columns = this.filterSettings.columns;\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var column = columns_1[_i];\n if (col.uid === column.uid) {\n flValue = column.value;\n }\n }\n if (!isNullOrUndefined(col.filter) && !isNullOrUndefined(col.filter.ui)\n && !isNullOrUndefined(col.filter.ui.write)) {\n var temp = col.filter.ui.write;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n temp({ column: col, target: target, parent: this.parent, filteredValue: flValue });\n }\n else {\n instanceofFilterUI.write({ column: col, target: target, parent: this.parent, filteredValue: flValue });\n }\n };\n FilterMenuRenderer.prototype.filterBtnClick = function (col) {\n var flValue;\n var targ = this.dlgObj.element.querySelector('.e-flmenu-valuediv input');\n var flOptrValue = this.flMuiObj.getFlOperator();\n var instanceofFilterUI = new this.colTypes[col.type](this.parent, this.serviceLocator, this.parent.filterSettings);\n if (col.filterTemplate) {\n var element = this.dlgDiv.querySelector('.e-flmenu-valuediv');\n var fltrValue = void 0;\n if (element.children[0].value) {\n fltrValue = element.children[0].value;\n }\n else {\n if (!isNullOrUndefined(element.children[0].ej2_instances)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n fltrValue = (this.parent.isAngular ? element.children[0] :\n element.querySelector('input')).ej2_instances[0].value;\n }\n else {\n var eControl = element.querySelector('.e-control');\n if (!isNullOrUndefined(eControl)) {\n fltrValue = col.type === 'boolean' ? eControl.checked :\n !isNullOrUndefined(eControl.ej2_instances) ?\n eControl.ej2_instances[0].value :\n eControl.value;\n }\n }\n }\n this.filterObj.filterByColumn(col.field, flOptrValue, fltrValue);\n }\n else {\n if (!isNullOrUndefined(col.filter) &&\n !isNullOrUndefined(col.filter.ui) && !isNullOrUndefined(col.filter.ui.read)) {\n var temp = col.filter.ui.read;\n if (typeof temp === 'string') {\n temp = getValue(temp, window);\n }\n // eslint-disable-next-line\n flValue = temp({ element: targ, column: col, operator: flOptrValue, fltrObj: this.filterObj });\n }\n else {\n instanceofFilterUI.read(targ, col, flOptrValue, this.filterObj);\n }\n }\n this.closeDialog();\n if (this.parent.showColumnMenu) {\n this.parent.notify(events.afterFilterColumnMenuClose, {});\n }\n };\n FilterMenuRenderer.prototype.closeResponsiveDialog = function () {\n this.closeDialog();\n };\n FilterMenuRenderer.prototype.clearBtnClick = function (column) {\n this.filterObj.removeFilteredColsByField(column.field);\n this.closeDialog();\n };\n FilterMenuRenderer.prototype.destroy = function () {\n this.closeDialog();\n };\n /**\n * @returns {FilterUI} returns the filterUI\n * @hidden\n */\n FilterMenuRenderer.prototype.getFilterUIInfo = function () {\n return { field: this.col.field, operator: this.flMuiObj.getFlOperator() };\n };\n FilterMenuRenderer.prototype.renderCheckBoxMenu = function () {\n this.isMenuCheck = true;\n this.menuFilterBase.updateModel(this.options);\n this.menuFilterBase.getAndSetChkElem(this.options);\n this.dlgObj.buttons = [{\n click: this.menuFilterBase.btnClick.bind(this.menuFilterBase),\n buttonModel: {\n content: this.menuFilterBase.getLocalizedLabel('FilterButton'),\n cssClass: 'e-primary', isPrimary: true\n }\n },\n {\n click: this.menuFilterBase.btnClick.bind(this.menuFilterBase),\n buttonModel: { cssClass: 'e-flat', content: this.menuFilterBase.getLocalizedLabel('ClearButton') }\n }];\n this.menuFilterBase.dialogObj = this.dlgObj;\n this.menuFilterBase.dlg = this.dlgObj.element;\n this.menuFilterBase.dlg.classList.add('e-menucheckbox');\n this.menuFilterBase.dlg.classList.remove('e-checkboxfilter');\n this.maxHeight = '800px';\n return this.menuFilterBase.sBox.innerHTML;\n };\n FilterMenuRenderer.prototype.actionComplete = function (args) {\n if (this.isMenuCheck) {\n this.parent.trigger(events.actionComplete, args);\n }\n };\n return FilterMenuRenderer;\n}());\nexport { FilterMenuRenderer };\n","import * as events from '../base/constant';\nimport { isActionPrevent } from '../base/util';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\n/**\n * @hidden\n * `CheckBoxFilter` module is used to handle filtering action.\n */\nvar CheckBoxFilter = /** @class */ (function () {\n /**\n * Constructor for checkbox filtering module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {FilterSettings} filterSettings - specifies the filtersettings\n * @param {ServiceLocator} serviceLocator - specifies the ServiceLocator\n * @hidden\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n function CheckBoxFilter(parent, filterSettings, serviceLocator) {\n this.parent = parent;\n this.isresetFocus = true;\n this.checkBoxBase = new CheckBoxFilterBase(parent);\n this.addEventListener();\n }\n /**\n * To destroy the check box filter.\n *\n * @returns {void}\n * @hidden\n */\n CheckBoxFilter.prototype.destroy = function () {\n this.removeEventListener();\n this.checkBoxBase.closeDialog();\n };\n CheckBoxFilter.prototype.openDialog = function (options) {\n this.checkBoxBase.openDialog(options);\n this.parent.log('column_type_missing', { column: options.column });\n };\n CheckBoxFilter.prototype.closeDialog = function () {\n this.destroy();\n if (this.isresetFocus) {\n this.parent.notify(events.restoreFocus, {});\n }\n };\n CheckBoxFilter.prototype.closeResponsiveDialog = function () {\n this.checkBoxBase.closeDialog();\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} - returns the module name\n * @private\n */\n CheckBoxFilter.prototype.getModuleName = function () {\n return 'checkboxFilter';\n };\n CheckBoxFilter.prototype.actionBegin = function (args) {\n this.parent.trigger(events.actionBegin, args);\n };\n CheckBoxFilter.prototype.actionComplete = function (args) {\n this.parent.trigger(events.actionComplete, args);\n };\n CheckBoxFilter.prototype.actionPrevent = function (args) {\n if (isActionPrevent(this.parent)) {\n this.parent.notify(events.preventBatch, args);\n args.cancel = true;\n }\n };\n CheckBoxFilter.prototype.clearCustomFilter = function (col) {\n this.checkBoxBase.clearFilter(col);\n };\n CheckBoxFilter.prototype.applyCustomFilter = function () {\n this.checkBoxBase.fltrBtnHandler();\n this.checkBoxBase.closeDialog();\n };\n CheckBoxFilter.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.cBoxFltrBegin, this.actionBegin, this);\n this.parent.on(events.cBoxFltrComplete, this.actionComplete, this);\n this.parent.on(events.fltrPrevent, this.actionPrevent, this);\n };\n CheckBoxFilter.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.cBoxFltrBegin, this.actionBegin);\n this.parent.off(events.cBoxFltrComplete, this.actionComplete);\n this.parent.off(events.fltrPrevent, this.actionPrevent);\n };\n return CheckBoxFilter;\n}());\nexport { CheckBoxFilter };\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 { EventHandler, remove, Browser } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { Query, DataManager, Predicate } from '@syncfusion/ej2-data';\nimport { Dialog } from '@syncfusion/ej2-popups';\nimport { DropDownList, AutoComplete } from '@syncfusion/ej2-dropdowns';\nimport { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { RadioButton, CheckBox } from '@syncfusion/ej2-buttons';\nimport { distinctStringValues, isComplexField, getComplexFieldID, getCustomDateFormat, applyBiggerTheme, performComplexDataOperation, registerEventHandlers, removeEventHandlers, clearReactVueTemplates } from '../base/util';\nimport { DatePicker, DateTimePicker } from '@syncfusion/ej2-calendars';\nimport { parentsUntil, appendChildren, extend, eventPromise } from '../base/util';\nimport * as events from '../base/constant';\nimport { ContextMenu } from '@syncfusion/ej2-navigations';\nimport { CheckBoxFilterBase } from '../common/checkbox-filter-base';\nimport * as literals from '../base/string-literals';\n/**\n * @hidden\n * `ExcelFilter` module is used to handle filtering action.\n */\nvar ExcelFilterBase = /** @class */ (function (_super) {\n __extends(ExcelFilterBase, _super);\n /**\n * Constructor for excel filtering module\n *\n * @param {IXLFilter} parent - parent details\n * @param {Object} customFltrOperators - operator details\n * @hidden\n */\n function ExcelFilterBase(parent, customFltrOperators) {\n var _this = _super.call(this, parent) || this;\n _this.childRefs = [];\n _this.eventHandlers = {};\n _this.isDevice = false;\n _this.focusedMenuItem = null;\n _this.customFilterOperators = customFltrOperators;\n _this.isExcel = true;\n return _this;\n }\n ExcelFilterBase.prototype.getCMenuDS = function (type, operator) {\n var options = {\n number: ['Equal', 'NotEqual', '', 'LessThan', 'LessThanOrEqual', 'GreaterThan',\n 'GreaterThanOrEqual', 'Between', '', 'CustomFilter'],\n string: ['Equal', 'NotEqual', '', 'StartsWith', 'EndsWith', '', 'Contains', 'NotContains', '', 'CustomFilter']\n };\n options.date = options.number;\n options.datetime = options.number;\n options.dateonly = options.number;\n var model = [];\n for (var i = 0; i < options[\"\" + type].length; i++) {\n if (options[\"\" + type][parseInt(i.toString(), 10)].length) {\n if (operator) {\n model.push({\n text: this.getLocalizedLabel(options[\"\" + type][parseInt(i.toString(), 10)]) + '...',\n iconCss: 'e-icons e-icon-check ' + (operator === options[\"\" + type][parseInt(i.toString(), 10)].toLowerCase() ? '' : 'e-emptyicon')\n });\n }\n else {\n model.push({\n text: this.getLocalizedLabel(options[\"\" + type][parseInt(i.toString(), 10)]) + '...'\n });\n }\n }\n else {\n model.push({ separator: true });\n }\n }\n return model;\n };\n /**\n * To destroy the filter bar.\n *\n * @returns {void}\n * @hidden\n */\n ExcelFilterBase.prototype.destroy = function () {\n if (this.dlg) {\n this.unwireExEvents();\n _super.prototype.closeDialog.call(this);\n }\n if (!this.isDevice && this.menuObj) {\n var li = this.menuObj.element.querySelector('li.e-focused');\n if (!(li && parentsUntil(li, 'e-excel-menu'))) {\n this.destroyCMenu();\n }\n }\n if (this.dlgObj && !this.dlgObj.isDestroyed) {\n this.removeDialog();\n }\n };\n ExcelFilterBase.prototype.createMenu = function (type, isFiltered, isCheckIcon, eleOptions) {\n var options = { string: 'TextFilter', date: 'DateFilter', dateonly: 'DateFilter', datetime: 'DateTimeFilter', number: 'NumberFilter' };\n this.menu = this.parent.createElement('div', { className: 'e-contextmenu-wrapper' });\n if (this.parent.enableRtl) {\n this.menu.classList.add('e-rtl');\n }\n else {\n this.menu.classList.remove('e-rtl');\n }\n if (this.parent.cssClass) {\n this.menu.classList.add(this.parent.cssClass);\n }\n var ul = this.parent.createElement('ul');\n var icon = isFiltered ? 'e-excl-filter-icon e-filtered' : 'e-excl-filter-icon';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this.parent.allowSorting && this.parent.getModuleName() === 'grid'\n && !this.options.isResponsiveFilter) {\n var hdrele = this.parent.getColumnHeaderByUid(eleOptions.uid).getAttribute('aria-sort');\n var colIsSort = this.parent.getColumnByField(eleOptions.field).allowSorting;\n var isAsc = (!colIsSort || hdrele === 'ascending') ? 'e-disabled e-excel-ascending' : 'e-excel-ascending';\n var isDesc = (!colIsSort || hdrele === 'descending') ? 'e-disabled e-excel-descending' : 'e-excel-descending';\n var ascName = (type === 'string') ? this.getLocalizedLabel('SortAtoZ') : (type === 'datetime' || type === 'date') ?\n this.getLocalizedLabel('SortByOldest') : this.getLocalizedLabel('SortSmallestToLargest');\n var descName = (type === 'string') ? this.getLocalizedLabel('SortZtoA') : (type === 'datetime' || type === 'date') ?\n this.getLocalizedLabel('SortByNewest') : this.getLocalizedLabel('SortLargestToSmallest');\n ul.appendChild(this.createMenuElem(ascName, isAsc, 'e-sortascending'));\n ul.appendChild(this.createMenuElem(descName, isDesc, 'e-sortdescending'));\n var separator = this.parent.createElement('li', { className: 'e-separator e-menu-item e-excel-separator' });\n ul.appendChild(separator);\n }\n if (!this.options.isResponsiveFilter) {\n ul.appendChild(this.createMenuElem(this.getLocalizedLabel('ClearFilter'), isFiltered ? '' : 'e-disabled', icon));\n }\n if (type !== 'boolean') {\n ul.appendChild(this.createMenuElem(this.getLocalizedLabel(options[\"\" + type]), 'e-submenu', isCheckIcon && this.ensureTextFilter() ? 'e-icon-check' : icon + ' e-emptyicon', true));\n }\n this.menu.appendChild(ul);\n this.parent.notify(events.beforeFltrcMenuOpen, { element: this.menu });\n this.parent.notify(events.refreshCustomFilterClearBtn, { isFiltered: isFiltered });\n };\n ExcelFilterBase.prototype.createMenuElem = function (val, className, iconName, isSubMenu) {\n var li = this.parent.createElement('li', { className: className + ' e-menu-item' });\n li.innerHTML = val;\n li.tabIndex = li.classList.contains('e-disabled') ? -1 : 0;\n li.insertBefore(this.parent.createElement('span', { className: 'e-menu-icon e-icons ' + iconName, attrs: { 'aria-hidden': 'true' } }), li.firstChild);\n if (isSubMenu) {\n li.appendChild(this.parent.createElement('span', { className: 'e-icons e-caret' }));\n }\n return li;\n };\n ExcelFilterBase.prototype.wireExEvents = function () {\n if (!Browser.isDevice) {\n EventHandler.add(this.dlg, 'mouseover', this.hoverHandler, this);\n }\n EventHandler.add(this.dlg, 'click', this.clickExHandler, this);\n EventHandler.add(this.dlg, 'keyup', this.keyUp, this);\n EventHandler.add(this.dlg, 'keydown', this.keyDown, this);\n };\n ExcelFilterBase.prototype.unwireExEvents = function () {\n if (!Browser.isDevice) {\n EventHandler.remove(this.dlg, 'mouseover', this.hoverHandler);\n }\n EventHandler.remove(this.dlg, 'click', this.clickExHandler);\n EventHandler.remove(this.dlg, 'keyup', this.keyUp);\n EventHandler.remove(this.dlg, 'keydown', this.keyDown);\n };\n ExcelFilterBase.prototype.clickExHandler = function (e) {\n var options = { string: 'TextFilter', date: 'DateFilter', datetime: 'DateTimeFilter', number: 'NumberFilter' };\n var menuItem = parentsUntil(e.target, 'e-menu-item');\n if (menuItem) {\n if (this.getLocalizedLabel('ClearFilter') === menuItem.innerText.trim()) {\n this.clearFilter();\n this.closeDialog();\n }\n else if ((this.options.isResponsiveFilter || Browser.isDevice)\n && this.getLocalizedLabel(options[this.options.type]) === menuItem.innerText.trim()) {\n this.hoverHandler(e);\n }\n }\n };\n ExcelFilterBase.prototype.focusNextOrPrevElement = function (e, focusableElements, focusClassName) {\n var nextIndex = (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) ? focusableElements.indexOf(document.activeElement) - 1\n : focusableElements.indexOf(document.activeElement) + 1;\n var nextElement = focusableElements[((nextIndex + focusableElements.length) % focusableElements.length)];\n // Set focus on the next / previous element\n if (nextElement) {\n nextElement.focus();\n var focusClass = nextElement.classList.contains('e-chk-hidden') ? 'e-chkfocus' : focusClassName;\n var target = nextElement.classList.contains('e-chk-hidden') ? parentsUntil(nextElement, 'e-ftrchk') : parentsUntil(nextElement, 'e-menu-item');\n this.excelSetFocus(target, focusClass);\n }\n };\n ExcelFilterBase.prototype.keyUp = function (e) {\n if ((e.key === 'Tab' && e.shiftKey) || e.key === 'Tab') {\n var focusClass = e.target.classList.contains('e-chk-hidden') ? 'e-chkfocus' : 'e-menufocus';\n var target = e.target.classList.contains('e-menu-item')\n ? parentsUntil(e.target, 'e-menu-item') : parentsUntil(e.target, 'e-ftrchk');\n this.excelSetFocus(target, focusClass);\n }\n else if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !e.altKey) {\n e.preventDefault();\n var focusableElements = Array.from(this.dlg.querySelectorAll('input, button, [tabindex]:not([tabindex=\"-1\"]), .e-menu-item:not(.e-disabled):not(.e-separator)'));\n this.focusNextOrPrevElement(e, focusableElements, 'e-menufocus');\n }\n else if ((e.key === 'Enter' || e.code === 'ArrowRight') && e.target.classList.contains('e-menu-item')) {\n e.preventDefault();\n e.target.click();\n if (e.target.classList.contains('e-submenu')) {\n this.hoverHandler(e);\n this.menuObj.element.querySelector('.e-menu-item').focus();\n this.excelSetFocus(parentsUntil(this.menuObj.element.querySelector('.e-menu-item'), 'e-menu-item'), 'e-focused');\n this.focusedMenuItem = this.menuObj.element.querySelector('.e-menu-item');\n }\n }\n };\n ExcelFilterBase.prototype.keyDown = function (e) {\n //prevented up and down arrow key press default functionality to prevent the browser scroll when performing keyboard navigation in excel filter element.\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n }\n };\n ExcelFilterBase.prototype.excelSetFocus = function (elem, className) {\n var prevElem = document.querySelector('.' + className);\n if (prevElem) {\n prevElem.classList.remove(className);\n }\n if (elem) {\n elem.classList.add(className);\n }\n };\n ExcelFilterBase.prototype.destroyCMenu = function () {\n this.isCMenuOpen = false;\n if (this.menuObj && !this.menuObj.isDestroyed) {\n this.menuObj.destroy();\n EventHandler.remove(this.menuObj.element, 'keydown', this.contextKeyDownHandler);\n remove(this.cmenu);\n this.parent.notify(events.renderResponsiveCmenu, { target: null, header: '', isOpen: false, col: this.options.column });\n }\n };\n ExcelFilterBase.prototype.hoverHandler = function (e) {\n if (this.options.isResponsiveFilter && e.type === 'mouseover') {\n return;\n }\n var target = e.target.querySelector('.e-contextmenu');\n var li = parentsUntil(e.target, 'e-menu-item');\n var focused = this.menu.querySelector('.e-focused');\n var isSubMenu;\n if (focused) {\n focused.classList.remove('e-focused');\n }\n if (li) {\n li.classList.add('e-focused');\n isSubMenu = li.classList.contains('e-submenu');\n }\n if (target) {\n return;\n }\n if (!isSubMenu) {\n var submenu = this.menu.querySelector('.e-submenu');\n if (!isNullOrUndefined(submenu)) {\n submenu.classList.remove('e-selected');\n }\n this.destroyCMenu();\n }\n var selectedMenu = this.ensureTextFilter();\n if (!this.isCMenuOpen && isSubMenu) {\n li.classList.add('e-selected');\n this.isCMenuOpen = true;\n var menuOptions = {\n items: this.getCMenuDS(this.options.type, selectedMenu ? selectedMenu.replace(/\\s/g, '') : undefined),\n select: this.selectHandler.bind(this),\n onClose: this.destroyCMenu.bind(this),\n enableRtl: this.parent.enableRtl,\n animationSettings: { effect: 'None' },\n beforeClose: this.preventClose.bind(this),\n cssClass: this.options.isResponsiveFilter && this.parent.cssClass ?\n 'e-res-contextmenu-wrapper' + ' ' + this.parent.cssClass : this.options.isResponsiveFilter ?\n 'e-res-contextmenu-wrapper' : this.parent.cssClass ? this.parent.cssClass : ''\n };\n this.parent.element.appendChild(this.cmenu);\n this.menuObj = new ContextMenu(menuOptions, this.cmenu);\n EventHandler.add(this.menuObj.element, 'keydown', this.contextKeyDownHandler, this);\n var client = this.menu.querySelector('.e-submenu').getBoundingClientRect();\n var pos = { top: 0, left: 0 };\n if (this.options.isResponsiveFilter) {\n var options = { string: 'TextFilter', date: 'DateFilter', datetime: 'DateTimeFilter', number: 'NumberFilter' };\n var content = document.querySelector('.e-responsive-dialog > .e-dlg-header-content');\n var height = content.offsetHeight + 4;\n this.menuObj.element.style.height = 'calc(100% - ' + height + 'px)';\n this.menuObj['open'](height, 0, document.body);\n var header = this.getLocalizedLabel(options[this.options.type]);\n this.parent.notify(events.renderResponsiveCmenu, {\n target: this.menuObj.element.parentElement, header: header, isOpen: true\n });\n }\n else {\n if (Browser.isDevice) {\n this.isDevice = true;\n var contextRect = this.getContextBounds();\n pos.top = (window.innerHeight - contextRect.height) / 2;\n pos.left = (window.innerWidth - contextRect.width) / 2;\n this.closeDialog();\n this.isDevice = false;\n }\n else {\n pos.top = Browser.isIE ? window.pageYOffset + client.top : window.scrollY + client.top;\n pos.left = this.getCMenuYPosition(this.dlg);\n }\n this.menuObj['open'](pos.top, pos.left, e.target);\n }\n applyBiggerTheme(this.parent.element, this.menuObj.element.parentElement);\n }\n };\n ExcelFilterBase.prototype.contextKeyDownHandler = function (e) {\n if ((e.key === 'Tab' && e.shiftKey) || e.key === 'Tab') {\n e.preventDefault();\n var focusableElements = Array.from(this.menuObj.element.querySelectorAll('[tabindex]:not([tabindex=\"-1\"]), .e-menu-item:not(.e-disabled):not(.e-separator)'));\n // Focus the next / previous context menu item\n this.focusNextOrPrevElement(e, focusableElements, 'e-focused');\n }\n else if (e.key === 'ArrowLeft' || e.key === 'Escape') {\n e.preventDefault();\n this.menuObj.close();\n this.focusedMenuItem = null;\n document.querySelector('.e-submenu.e-menu-item').classList.remove('e-selected');\n document.querySelector('.e-submenu.e-menu-item').focus();\n }\n };\n ExcelFilterBase.prototype.ensureTextFilter = function () {\n var selectedMenu;\n var predicates = this.existingPredicate[this.options.field];\n if (predicates && predicates.length === 2) {\n if (predicates[0].operator === 'greaterthanorequal' && predicates[1].operator === 'lessthanorequal') {\n selectedMenu = 'between';\n }\n else {\n selectedMenu = 'customfilter';\n }\n }\n else {\n if (predicates && predicates.length === 1) {\n this.optrData = this.customFilterOperators[this.options.type + 'Operator'];\n selectedMenu = predicates[0].operator;\n }\n }\n return selectedMenu;\n };\n ExcelFilterBase.prototype.preventClose = function (args) {\n if (this.options && this.options.isResponsiveFilter && args.event) {\n var target = args.event.target;\n var isFilterBack = target.classList.contains('e-resfilterback')\n || target.classList.contains('e-res-back-btn') || target.classList.contains('e-menu-item');\n args.cancel = !isFilterBack;\n }\n else {\n if (args.event instanceof MouseEvent && args.event.target.classList.contains('e-submenu')) {\n args.cancel = true;\n }\n }\n };\n ExcelFilterBase.prototype.getContextBounds = function () {\n this.menuObj.element.style.display = 'block';\n return this.menuObj.element.getBoundingClientRect();\n };\n ExcelFilterBase.prototype.getCMenuYPosition = function (target) {\n var contextWidth = this.getContextBounds().width;\n var targetPosition = target.getBoundingClientRect();\n var leftPos = targetPosition.right + contextWidth - this.parent.element.clientWidth;\n var targetBorder = target.offsetWidth - target.clientWidth;\n targetBorder = targetBorder ? targetBorder + 1 : 0;\n return (leftPos < 1) ? (targetPosition.right + 1 - targetBorder) : (targetPosition.left - contextWidth - 1 + targetBorder);\n };\n ExcelFilterBase.prototype.openDialog = function (options) {\n var _this = this;\n this.updateModel(options);\n this.getAndSetChkElem(options);\n this.showDialog(options);\n if (options.cancel) {\n return;\n }\n this.dialogObj.dataBind();\n var filterLength = (this.existingPredicate[options.field] && this.existingPredicate[options.field].length) ||\n this.options.filteredColumns.filter(function (col) {\n return _this.options.field === col.field;\n }).length;\n this.createMenu(options.type, filterLength > 0, (filterLength === 1 || filterLength === 2), options);\n this.dlg.insertBefore(this.menu, this.dlg.firstChild);\n this.dlg.classList.add('e-excelfilter');\n if (this.parent.enableRtl) {\n this.dlg.classList.add('e-rtl');\n }\n this.dlg.classList.remove('e-checkboxfilter');\n this.cmenu = this.parent.createElement('ul', { className: 'e-excel-menu' });\n if (options.column.showColumnMenu) {\n this.parent.notify(events.filterDialogCreated, {});\n }\n this.wireExEvents();\n };\n ExcelFilterBase.prototype.closeDialog = function () {\n this.destroy();\n };\n ExcelFilterBase.prototype.selectHandler = function (e) {\n if (e.item) {\n this.parent.notify(events.filterCmenuSelect, {});\n this.menuItem = e.item;\n this.closeDialog();\n this.renderDialogue(e);\n }\n };\n /**\n * @hidden\n * @param {MenuEventArgs} e - event args\n * @returns {void}\n */\n ExcelFilterBase.prototype.renderDialogue = function (e) {\n var _this = this;\n var target = e ? e.element : undefined;\n var column = this.options.field;\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var mainDiv = this.parent.createElement('div', {\n className: 'e-xlfl-maindiv',\n id: isComplex ? complexFieldName + '-xlflmenu' : column + '-xlflmenu'\n });\n this.dlgDiv = this.parent.createElement('div', {\n className: 'e-xlflmenu',\n id: isComplex ? complexFieldName + '-xlfldlg' : column + '-xlfldlg'\n });\n if (this.options.isResponsiveFilter) {\n var responsiveCnt = document.querySelector('.e-resfilter > .e-dlg-content > .e-xl-customfilterdiv');\n responsiveCnt.appendChild(this.dlgDiv);\n }\n else {\n this.parent.element.appendChild(this.dlgDiv);\n }\n this.dlgObj = new Dialog({\n header: this.getLocalizedLabel('CustomFilter'),\n isModal: true,\n overlayClick: this.removeDialog.bind(this),\n showCloseIcon: true,\n locale: this.parent.locale,\n closeOnEscape: true,\n target: document.body,\n // target: this.parent.element,\n visible: false,\n enableRtl: this.parent.enableRtl,\n open: function () {\n var rows = [].slice.call(_this.dlgObj.element.querySelectorAll('table.e-xlfl-table tr.e-xlfl-fields'));\n for (var i = 0; i < rows.length; i++) {\n var valInput = rows[i].children[1].querySelector('.e-control');\n var dropDownList = rows[i]\n .querySelector('.e-dropdownlist.e-control')['ej2_instances'][0];\n if (dropDownList.value === 'isempty' || dropDownList.value === 'isnotempty' ||\n dropDownList.value === 'isnull' || dropDownList.value === 'isnotnull') {\n valInput['ej2_instances'][0]['enabled'] = false;\n }\n else if (valInput && !isNullOrUndefined(valInput.getAttribute('disabled'))) {\n valInput['ej2_instances'][0]['enabled'] = true;\n }\n }\n var row = _this.dlgObj.element.querySelector('table.e-xlfl-table>tr');\n if (_this.options.column.filterTemplate) {\n var templateField_1 = isComplexField(_this.options.column.field) ?\n getComplexFieldID(_this.options.column.field) : _this.options.column.field;\n var isReactCompiler = _this.parent.isReact && typeof (_this.options.column.filterTemplate) !== 'string';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var isReactChild = _this.parent.parentDetails && _this.parent.parentDetails.parentInstObj &&\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _this.parent.parentDetails.parentInstObj.isReact;\n if (isReactCompiler || isReactChild) {\n _this.parent.renderTemplates(function () {\n row.querySelector('#' + templateField_1 + '-xlfl-frstvalue').focus();\n });\n }\n else {\n row.querySelector('#' + templateField_1 + '-xlfl-frstvalue').focus();\n }\n }\n else {\n //(row.cells[1].querySelector('input:not([type=hidden])') as HTMLElement).focus();\n }\n },\n close: this.removeDialog.bind(this),\n created: this.createdDialog.bind(this, target, column),\n buttons: [{\n click: this.filterBtnClick.bind(this, column),\n buttonModel: {\n content: this.getLocalizedLabel('OKButton'), isPrimary: true,\n cssClass: this.parent.cssClass ? 'e-xlfl-okbtn' + ' ' + this.parent.cssClass : 'e-xlfl-okbtn'\n }\n },\n {\n click: this.removeDialog.bind(this),\n buttonModel: { content: this.getLocalizedLabel('CancelButton'),\n cssClass: this.parent.cssClass ? 'e-xlfl-cancelbtn' + ' ' + this.parent.cssClass : 'e-xlfl-cancelbtn' }\n }],\n content: mainDiv,\n width: 430,\n animationSettings: { effect: 'None' },\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n var isStringTemplate = 'isStringTemplate';\n this.dlgObj[\"\" + isStringTemplate] = true;\n this.renderResponsiveDialog();\n this.dlgDiv.setAttribute('aria-label', this.getLocalizedLabel('CustomFilterDialogARIA'));\n this.childRefs.push(this.dlgObj);\n this.dlgObj.appendTo(this.dlgDiv);\n };\n ExcelFilterBase.prototype.renderResponsiveDialog = function () {\n if (this.options.isResponsiveFilter) {\n var rowResponsiveDlg = document.querySelector('.e-row-responsive-filter');\n if (rowResponsiveDlg) {\n rowResponsiveDlg.classList.remove('e-row-responsive-filter');\n }\n this.dlgObj.buttons = [{}];\n this.dlgObj.header = undefined;\n this.dlgObj.position = { X: '', Y: '' };\n this.dlgObj.target = document.querySelector('.e-resfilter > .e-dlg-content > .e-xl-customfilterdiv');\n this.dlgObj.width = '100%';\n this.dlgObj.isModal = false;\n this.dlgObj.showCloseIcon = false;\n }\n };\n /**\n * @hidden\n * @returns {void}\n */\n ExcelFilterBase.prototype.removeDialog = function () {\n this.parent.notify(events.customFilterClose, {});\n if ((this.parent.isReact || this.parent.isVue) && this.parent.destroyTemplate !== undefined) {\n clearReactVueTemplates(this.parent, ['filterTemplate']);\n }\n this.removeObjects(this.childRefs);\n remove(this.dlgDiv);\n this.parent.notify(events.filterDialogClose, {});\n };\n ExcelFilterBase.prototype.createdDialog = function (target, column) {\n this.renderCustomFilter(target, column);\n this.dlgObj.element.style.left = '0px';\n if (!this.options.isResponsiveFilter) {\n this.dlgObj.element.style.top = '0px';\n }\n else {\n var content = document.querySelector('.e-responsive-dialog > .e-dlg-header-content');\n var height = content.offsetHeight + 4;\n this.dlgObj.element.style.top = height + 'px';\n }\n if (!this.options.isResponsiveFilter && Browser.isDevice && window.innerWidth < 440) {\n this.dlgObj.element.style.width = '90%';\n }\n this.parent.notify(events.beforeCustomFilterOpen, { column: column, dialog: this.dialogObj });\n this.dlgObj.show();\n applyBiggerTheme(this.parent.element, this.dlgObj.element.parentElement);\n };\n ExcelFilterBase.prototype.renderCustomFilter = function (target, column) {\n var dlgConetntEle = this.dlgObj.element.querySelector('.e-xlfl-maindiv');\n var dlgFields = this.parent.createElement('div', { innerHTML: this.getLocalizedLabel('ShowRowsWhere'), className: 'e-xlfl-dlgfields' });\n dlgConetntEle.appendChild(dlgFields);\n //column name\n var fieldSet = this.parent.createElement('div', { innerHTML: this.options.displayName, className: 'e-xlfl-fieldset' });\n dlgConetntEle.appendChild(fieldSet);\n this.renderFilterUI(column, dlgConetntEle);\n };\n /**\n * @hidden\n * @param {string} col - Defines column details\n * @returns {void}\n */\n ExcelFilterBase.prototype.filterBtnClick = function (col) {\n var isComplex = !isNullOrUndefined(col) && isComplexField(col);\n var complexFieldName = !isNullOrUndefined(col) && getComplexFieldID(col);\n var colValue = isComplex ? complexFieldName : col;\n var fValue = this.dlgDiv.querySelector('#' + colValue + '-xlfl-frstvalue').ej2_instances[0];\n var fOperator = this.dlgDiv.querySelector('#' + colValue + '-xlfl-frstoptr').ej2_instances[0];\n var sValue = this.dlgDiv.querySelector('#' + colValue + '-xlfl-secndvalue').ej2_instances[0];\n var sOperator = this.dlgDiv.querySelector('#' + colValue + '-xlfl-secndoptr').ej2_instances[0];\n var checkBoxValue;\n if (this.options.type === 'string') {\n var checkBox = this.dlgDiv.querySelector('#' + colValue + '-xlflmtcase').ej2_instances[0];\n checkBoxValue = checkBox.checked;\n }\n var andRadio = this.dlgDiv.querySelector('#' + colValue + 'e-xlfl-frstpredicate').ej2_instances[0];\n var predicate = (andRadio.checked ? 'and' : 'or');\n if (sValue.value === null) {\n predicate = 'or';\n }\n this.filterByColumn(this.options.field, fOperator.value, fValue.value, predicate, checkBoxValue, this.options.ignoreAccent, sOperator.value, sValue.value);\n this.removeDialog();\n };\n /**\n * @hidden\n * Filters grid row by column name with given options.\n *\n * @param {string} fieldName - Defines the field name of the filter column.\n * @param {string} firstOperator - Defines the first operator by how to filter records.\n * @param {string | number | Date | boolean} firstValue - Defines the first value which is used to filter records.\n * @param {string} predicate - Defines the relationship between one filter query with another by using AND or OR predicate.\n * @param {boolean} matchCase - If ignore case set to true, then filter records with exact match or else\n * filter records with case insensitive(uppercase and lowercase letters treated as same).\n * @param {boolean} ignoreAccent - If ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.\n * @param {string} secondOperator - Defines the second operator by how to filter records.\n * @param {string | number | Date | boolean} secondValue - Defines the first value which is used to filter records.\n * @returns {void}\n */\n ExcelFilterBase.prototype.filterByColumn = function (fieldName, firstOperator, firstValue, predicate, matchCase, ignoreAccent, secondOperator, secondValue) {\n var col = this.parent.getColumnByField ? this.parent.getColumnByField(fieldName) : this.options.column;\n var field = this.isForeignColumn(col) ? col.foreignKeyValue : fieldName;\n var fColl = [];\n var mPredicate;\n var arg = {\n instance: this, handler: this.filterByColumn, arg1: fieldName, arg2: firstOperator, arg3: firstValue, arg4: predicate,\n arg5: matchCase, arg6: ignoreAccent, arg7: secondOperator, arg8: secondValue, cancel: false\n };\n this.parent.notify(events.fltrPrevent, arg);\n if (arg.cancel) {\n return;\n }\n fColl.push({\n field: field,\n predicate: predicate,\n matchCase: matchCase,\n ignoreAccent: ignoreAccent,\n operator: firstOperator,\n value: arg.arg3,\n type: this.options.type\n });\n mPredicate = new Predicate(field, firstOperator.toLowerCase(), arg.arg3, !matchCase, ignoreAccent);\n if (!isNullOrUndefined(secondValue) && !isNullOrUndefined(secondOperator)) {\n fColl.push({\n field: field,\n predicate: predicate,\n matchCase: matchCase,\n ignoreAccent: ignoreAccent,\n operator: secondOperator,\n value: arg.arg8,\n type: this.options.type\n });\n mPredicate = mPredicate[\"\" + predicate](field, secondOperator.toLowerCase(), secondValue, !matchCase, ignoreAccent);\n }\n var args = {\n action: 'filtering', filterCollection: fColl, field: this.options.field,\n ejpredicate: mPredicate, actualPredicate: fColl\n };\n if (this.isForeignColumn(col)) {\n this.foreignKeyFilter(args, fColl, mPredicate);\n }\n else {\n this.options.handler(args);\n }\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderOperatorUI = function (column, table, elementID, predicates, isFirst) {\n var fieldElement = this.parent.createElement('tr', { className: 'e-xlfl-fields', attrs: { role: 'row' } });\n table.appendChild(fieldElement);\n var xlfloptr = this.parent.createElement('td', { className: 'e-xlfl-optr' });\n fieldElement.appendChild(xlfloptr);\n var optrDiv = this.parent.createElement('div', { className: 'e-xlfl-optrdiv' });\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var optrInput = this.parent\n .createElement('input', { id: isComplex ? complexFieldName + elementID : column + elementID });\n optrDiv.appendChild(optrInput);\n xlfloptr.appendChild(optrDiv);\n var optr = this.options.type + 'Operator';\n var dropDatasource = this.customFilterOperators[\"\" + optr];\n this.optrData = dropDatasource;\n var selectedValue = this.dropSelectedVal(this.options.column, predicates, isFirst);\n //Trailing three dots are sliced.\n var menuText = '';\n if (this.menuItem) {\n menuText = this.menuItem.text.slice(0, -3);\n if (menuText !== this.getLocalizedLabel('CustomFilter')) {\n selectedValue = isFirst ? menuText : undefined;\n }\n if (menuText === this.getLocalizedLabel('Between')) {\n selectedValue = this.getLocalizedLabel(isFirst ? 'GreaterThanOrEqual' : 'LessThanOrEqual');\n }\n }\n var col = this.options.column;\n var dropOptr = new DropDownList(extend({\n dataSource: dropDatasource,\n fields: { text: 'text', value: 'value' },\n text: selectedValue,\n enableRtl: this.parent.enableRtl,\n cssClass: this.parent.cssClass ? this.parent.cssClass : null\n }, col.filter.params));\n this.childRefs.push(dropOptr);\n var evt = { 'open': this.dropDownOpen.bind(this), 'change': this.dropDownValueChange.bind(this) };\n registerEventHandlers(optrInput.id, [literals.open, literals.change], evt, this);\n dropOptr.addEventListener(literals['open'], this.eventHandlers[optrInput.id][literals.open]);\n dropOptr.addEventListener(literals.change, this.eventHandlers[optrInput.id][literals.change]);\n dropOptr.appendTo(optrInput);\n var operator = this.getSelectedValue(selectedValue);\n return { fieldElement: fieldElement, operator: operator };\n };\n ExcelFilterBase.prototype.removeHandlersFromComponent = function (component) {\n if (component.element.classList.contains('e-dropdownlist')) {\n removeEventHandlers(component, [literals.open, literals.change], this);\n }\n else if (component.element.classList.contains('e-autocomplete')) {\n removeEventHandlers(component, [events.actionComplete, literals.focus], this);\n }\n };\n ExcelFilterBase.prototype.dropDownOpen = function (args) {\n args.popup.element.style.zIndex = (this.dialogObj.zIndex + 1).toString();\n };\n ExcelFilterBase.prototype.dropDownValueChange = function (args) {\n if (args.element.id.includes('-xlfl-frstoptr')) {\n this.firstOperator = args.value.toString();\n }\n else {\n this.secondOperator = args.value.toString();\n }\n var valInput = args.element.closest('.e-xlfl-fields').children[1].querySelector('.e-control');\n var dropDownList = args.element['ej2_instances'][0];\n if (dropDownList.value === 'isempty' || dropDownList.value === 'isnotempty' ||\n dropDownList.value === 'isnull' || dropDownList.value === 'isnotnull') {\n valInput['ej2_instances'][0]['enabled'] = false;\n }\n else if (!isNullOrUndefined(valInput.getAttribute('disabled'))) {\n valInput['ej2_instances'][0]['enabled'] = true;\n }\n };\n /**\n * @hidden\n * @returns {FilterUI} returns filter UI\n */\n ExcelFilterBase.prototype.getFilterUIInfo = function () {\n return { firstOperator: this.firstOperator, secondOperator: this.secondOperator, field: this.options.field };\n };\n ExcelFilterBase.prototype.getSelectedValue = function (text) {\n var selectedField = new DataManager(this.optrData).executeLocal(new Query().where('text', 'equal', text));\n return !isNullOrUndefined(selectedField[0]) ? selectedField[0].value : '';\n };\n ExcelFilterBase.prototype.dropSelectedVal = function (col, predicates, isFirst) {\n var operator;\n if (predicates && predicates.length > 0) {\n operator = predicates.length === 2 ?\n (isFirst ? predicates[0].operator : predicates[1].operator) :\n (isFirst ? predicates[0].operator : undefined);\n }\n else if (isFirst && col.type === 'string' && !col.filter.operator) {\n operator = 'startswith';\n }\n else {\n operator = isFirst ? col.filter.operator || 'equal' : undefined;\n }\n return this.getSelectedText(operator);\n };\n ExcelFilterBase.prototype.getSelectedText = function (operator) {\n var selectedField = new DataManager(this.optrData).executeLocal(new Query().where('value', 'equal', operator));\n return !isNullOrUndefined(selectedField[0]) ? selectedField[0].text : '';\n };\n ExcelFilterBase.prototype.renderFilterUI = function (column, dlgConetntEle) {\n var predicates = this.existingPredicate[\"\" + column];\n var table = this.parent.createElement('table', { className: 'e-xlfl-table', attrs: { role: 'grid' } });\n dlgConetntEle.appendChild(table);\n var colGroup = this.parent.createElement(literals.colGroup);\n colGroup.innerHTML = '';\n table.appendChild(colGroup);\n //Renders first dropdown\n var optr = this.renderOperatorUI(column, table, '-xlfl-frstoptr', predicates, true);\n this.firstOperator = optr.operator;\n //Renders first value\n this.renderFlValueUI(column, optr, '-xlfl-frstvalue', predicates, true);\n var predicate = this.parent.createElement('tr', { className: 'e-xlfl-predicate', attrs: { role: 'row' } });\n table.appendChild(predicate);\n //Renders first radion button\n this.renderRadioButton(column, predicate, predicates);\n //Renders second dropdown\n optr = this.renderOperatorUI(column, table, '-xlfl-secndoptr', predicates, false);\n this.secondOperator = optr.operator;\n //Renders second text box\n this.renderFlValueUI(column, optr, '-xlfl-secndvalue', predicates, false);\n };\n ExcelFilterBase.prototype.renderRadioButton = function (column, tr, predicates) {\n var td = this.parent.createElement('td', { className: 'e-xlfl-radio', attrs: { 'colSpan': '2' } });\n tr.appendChild(td);\n var radioDiv = this.parent\n .createElement('div', { className: 'e-xlfl-radiodiv', attrs: { 'style': 'display: inline-block' } });\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var frstpredicate = this.parent.createElement('input', { id: isComplex ? complexFieldName + 'e-xlfl-frstpredicate' : column + 'e-xlfl-frstpredicate', attrs: { 'type': 'radio' } });\n var secndpredicate = this.parent.createElement('input', { id: isComplex ? complexFieldName + 'e-xlfl-secndpredicate' : column + 'e-xlfl-secndpredicate', attrs: { 'type': 'radio' } });\n //appends into div\n radioDiv.appendChild(frstpredicate);\n radioDiv.appendChild(secndpredicate);\n td.appendChild(radioDiv);\n if (this.options.type === 'string') {\n this.renderMatchCase(column, tr, td, '-xlflmtcase', predicates);\n }\n // Initialize AND RadioButton component.\n var andRadio = new RadioButton({\n label: this.getLocalizedLabel('AND'),\n name: 'default', checked: true,\n enableRtl: this.parent.enableRtl,\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n this.childRefs.push(andRadio);\n // Initialize OR RadioButton component.\n var orRadio = new RadioButton({\n label: this.getLocalizedLabel('OR'),\n name: 'default',\n enableRtl: this.parent.enableRtl,\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n this.childRefs.push(orRadio);\n var flValue = predicates && predicates.length === 2 ? predicates[1].predicate : 'and';\n if (flValue === 'and') {\n andRadio.checked = true;\n orRadio.checked = false;\n }\n else {\n orRadio.checked = true;\n andRadio.checked = false;\n }\n // Render initialized RadioButton.\n andRadio.appendTo(frstpredicate);\n orRadio.appendTo(secndpredicate);\n andRadio.element.nextElementSibling.classList.add('e-xlfl-radio-and');\n orRadio.element.nextElementSibling.classList.add('e-xlfl-radio-or');\n };\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ExcelFilterBase.prototype.removeObjects = function (elements) {\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var obj = elements_1[_i];\n if (obj && !obj.isDestroyed) {\n this.removeHandlersFromComponent(obj);\n obj.destroy();\n }\n }\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderFlValueUI = function (column, optr, elementId, predicates, isFirst) {\n var value = this.parent.createElement('td', { className: 'e-xlfl-value' });\n optr.fieldElement.appendChild(value);\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var valueDiv = this.parent.createElement('div', { className: 'e-xlfl-valuediv' });\n var isFilteredCol = this.options.filteredColumns.some(function (col) { return column === col.field; });\n var fltrPredicates = this.options.filteredColumns.filter(function (col) { return col.field === column; });\n if (this.options.column.filterTemplate) {\n var data = {};\n var columnObj = this.options.column;\n if (isFilteredCol && elementId) {\n data = this.getExcelFilterData(elementId, data, columnObj, predicates, fltrPredicates);\n }\n var isReactCompiler = this.parent.isReact && typeof (this.options.column.filterTemplate) !== 'string';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.parent.parentDetails.parentInstObj.isReact;\n var tempID = this.parent.element.id + columnObj.uid + 'filterTemplate';\n if (isReactCompiler || isReactChild) {\n this.options.column.getFilterTemplate()(data, this.parent, 'filterTemplate', tempID, null, null, valueDiv);\n }\n else {\n var element = this.options.column.getFilterTemplate()(data, this.parent, 'filterTemplate', tempID);\n appendChildren(valueDiv, element);\n }\n if (isReactCompiler || isReactChild) {\n this.parent.renderTemplates(function () {\n valueDiv.querySelector('input').id = isComplex ? complexFieldName + elementId : column + elementId;\n value.appendChild(valueDiv);\n });\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (this.parent.isAngular ? valueDiv.children[0] : valueDiv.querySelector('input')).id = isComplex ?\n complexFieldName + elementId : column + elementId;\n value.appendChild(valueDiv);\n }\n }\n else {\n var valueInput = this.parent\n .createElement('input', { id: isComplex ? complexFieldName + elementId : column + elementId });\n valueDiv.appendChild(valueInput);\n value.appendChild(valueDiv);\n var flValue = void 0;\n var predicate = void 0;\n if (predicates && predicates.length > 0) {\n predicate = predicates.length === 2 ?\n (isFirst ? predicates[0] : predicates[1]) :\n (isFirst ? predicates[0] : undefined);\n flValue = (predicate && predicate.operator === optr.operator) ? predicate.value : undefined;\n if (isNullOrUndefined(flValue)) {\n flValue = undefined;\n }\n }\n var types = {\n 'string': this.renderAutoComplete.bind(this),\n 'number': this.renderNumericTextBox.bind(this),\n 'date': this.renderDate.bind(this),\n 'dateonly': this.renderDate.bind(this),\n 'datetime': this.renderDateTime.bind(this)\n };\n types[this.options.type](this.options, column, valueInput, flValue, this.parent.enableRtl);\n }\n };\n ExcelFilterBase.prototype.getExcelFilterData = function (elementId, data, columnObj, predicates, fltrPredicates) {\n var predIndex = elementId === '-xlfl-frstvalue' ? 0 : 1;\n if (elementId === '-xlfl-frstvalue' || fltrPredicates.length > 1) {\n data = { column: predicates instanceof Array ? predicates[parseInt(predIndex.toString(), 10)] : predicates };\n var indx = this.options.column.columnData && fltrPredicates.length > 1 ?\n (this.options.column.columnData.length === 1 ? 0 : 1) : predIndex;\n data[this.options.field] = columnObj.foreignKeyValue ?\n this.options.column.columnData[parseInt(indx.toString(), 10)][columnObj.foreignKeyValue] :\n fltrPredicates[parseInt(indx.toString(), 10)].value;\n if (this.options.foreignKeyValue) {\n data[this.options.foreignKeyValue] = this.options.column\n .columnData[parseInt(indx.toString(), 10)][columnObj.foreignKeyValue];\n }\n }\n return data;\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderMatchCase = function (column, tr, matchCase, elementId, predicates) {\n var matchCaseDiv = this.parent.createElement('div', { className: 'e-xlfl-matchcasediv', attrs: { 'style': 'display: inline-block' } });\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var matchCaseInput = this.parent.createElement('input', { id: isComplex ? complexFieldName + elementId : column + elementId, attrs: { 'type': 'checkbox' } });\n matchCaseDiv.appendChild(matchCaseInput);\n matchCase.appendChild(matchCaseDiv);\n var flValue = predicates && predicates.length > 0 ?\n (predicates && predicates.length === 2 ? predicates[1].matchCase : predicates[0].matchCase) :\n false;\n // Initialize Match Case check box.\n var checkbox = new CheckBox({\n label: this.getLocalizedLabel('MatchCase'),\n enableRtl: this.parent.enableRtl, checked: flValue,\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n this.childRefs.push(checkbox);\n // Render initialized CheckBox.\n checkbox.appendTo(matchCaseInput);\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderDate = function (options, column, inputValue, fValue, isRtl) {\n var format = getCustomDateFormat(options.format, options.type) || options.format;\n var datePicker = new DatePicker(extend({\n format: format,\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n placeholder: this.getLocalizedLabel('CustomFilterDatePlaceHolder'),\n width: '100%',\n enableRtl: isRtl,\n value: new Date(fValue),\n locale: this.parent.locale\n }, options.column.filter.params));\n this.childRefs.push(datePicker);\n datePicker.appendTo(inputValue);\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderDateTime = function (options, column, inputValue, fValue, isRtl) {\n var format = getCustomDateFormat(options.format, options.type);\n var dateTimePicker = new DateTimePicker(extend({\n format: format,\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n placeholder: this.getLocalizedLabel('CustomFilterDatePlaceHolder'),\n width: '100%',\n enableRtl: isRtl,\n value: new Date(fValue),\n locale: this.parent.locale\n }, options.column.filter.params));\n this.childRefs.push(dateTimePicker);\n dateTimePicker.appendTo(inputValue);\n };\n ExcelFilterBase.prototype.completeAction = function (e) {\n e.result = distinctStringValues(e.result);\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderNumericTextBox = function (options, column, inputValue, fValue, isRtl) {\n var numericTextBox = new NumericTextBox(extend({\n format: options.format,\n placeholder: this.getLocalizedLabel('CustomFilterPlaceHolder'),\n enableRtl: isRtl,\n value: fValue,\n locale: this.parent.locale,\n cssClass: this.parent.cssClass ? this.parent.cssClass : null\n }, options.column.filter.params));\n this.childRefs.push(numericTextBox);\n numericTextBox.appendTo(inputValue);\n };\n // eslint-disable-next-line max-len\n ExcelFilterBase.prototype.renderAutoComplete = function (options, column, inputValue, fValue, isRtl) {\n var colObj = this.options.column;\n var isForeignColumn = this.isForeignColumn(colObj);\n var dataSource = isForeignColumn ? colObj.dataSource : options.dataSource;\n var fields = { value: isForeignColumn ? colObj.foreignKeyValue : column };\n var actObj = new AutoComplete(extend({\n dataSource: dataSource instanceof DataManager ? dataSource : new DataManager(dataSource),\n fields: fields,\n query: this.getQuery(),\n sortOrder: 'Ascending',\n locale: this.parent.locale,\n cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',\n autofill: true,\n placeholder: this.getLocalizedLabel('CustomFilterPlaceHolder'),\n enableRtl: isRtl,\n text: fValue\n }, colObj.filter.params));\n if (dataSource && 'result' in dataSource) {\n var defObj = eventPromise({ requestType: 'stringfilterrequest' }, this.getQuery());\n this.parent.trigger(events.dataStateChange, defObj.state);\n var def = defObj.deffered;\n def.promise.then(function (e) {\n actObj.dataSource = new DataManager(e);\n });\n }\n this.childRefs.push(actObj);\n var evt = { 'actionComplete': this.acActionComplete(actObj, column), 'focus': this.acFocus(actObj, column, options, inputValue) };\n registerEventHandlers(inputValue.id, [events.actionComplete, literals.focus], evt, this);\n actObj.addEventListener(literals.focus, this.eventHandlers[inputValue.id][literals.focus]);\n actObj.addEventListener(events.actionComplete, this.eventHandlers[inputValue.id][events.actionComplete]);\n actObj.appendTo(inputValue);\n };\n ExcelFilterBase.prototype.acActionComplete = function (actObj, column) {\n return function (e) {\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n e.result = e.result.filter(function (obj, index, arr) {\n return arr.map(function (mapObject) {\n return isComplex ? performComplexDataOperation(actObj.fields.value, mapObject)\n : mapObject[actObj.fields.value];\n }).indexOf(isComplex ? performComplexDataOperation(actObj.fields.value, obj) :\n obj[actObj.fields.value]) === index;\n });\n };\n };\n ExcelFilterBase.prototype.acFocus = function (actObj, column, options, inputValue) {\n var _this = this;\n return function () {\n var isComplex = !isNullOrUndefined(column) && isComplexField(column);\n var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);\n var columnvalue = isComplex ? complexFieldName : column;\n actObj.filterType = _this.dlgDiv.querySelector('#' + columnvalue +\n (inputValue.id === (columnvalue + '-xlfl-frstvalue') ?\n '-xlfl-frstoptr' :\n '-xlfl-secndoptr')).ej2_instances[0].value;\n actObj.ignoreCase = options.type === 'string' ?\n !_this.dlgDiv.querySelector('#' + columnvalue + '-xlflmtcase').ej2_instances[0].checked :\n true;\n actObj.filterType = !isNullOrUndefined(actObj.filterType) ? actObj.filterType :\n 'equal';\n };\n };\n return ExcelFilterBase;\n}(CheckBoxFilterBase));\nexport { ExcelFilterBase };\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 { ExcelFilterBase } from '../common/excel-filter-base';\nimport { CheckBoxFilter } from './checkbox-filter';\nimport * as events from '../base/constant';\n/**\n * @hidden\n * `ExcelFilter` module is used to handle filtering action.\n */\nvar ExcelFilter = /** @class */ (function (_super) {\n __extends(ExcelFilter, _super);\n /**\n * Constructor for excelbox filtering module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {FilterSettings} filterSettings - specifies the Filtersettings\n * @param {ServiceLocator} serviceLocator - specifies the serviceLocator\n * @param {object} customFltrOperators - specifies the customFltrOperators\n * @hidden\n */\n function ExcelFilter(parent, filterSettings, serviceLocator, customFltrOperators) {\n var _this = _super.call(this, parent, filterSettings, serviceLocator) || this;\n _this.parent = parent;\n _this.isresetFocus = true;\n _this.excelFilterBase = new ExcelFilterBase(parent, customFltrOperators);\n return _this;\n }\n /**\n * To destroy the excel filter.\n *\n * @returns {void}\n * @hidden\n */\n ExcelFilter.prototype.destroy = function () {\n this.excelFilterBase.closeDialog();\n };\n ExcelFilter.prototype.openDialog = function (options) {\n this.excelFilterBase.openDialog(options);\n };\n ExcelFilter.prototype.closeDialog = function () {\n this.excelFilterBase.closeDialog();\n if (this.isresetFocus) {\n this.parent.notify(events.restoreFocus, {});\n }\n };\n ExcelFilter.prototype.clearCustomFilter = function (col) {\n this.excelFilterBase.clearFilter(col);\n };\n ExcelFilter.prototype.closeResponsiveDialog = function (isCustomFilter) {\n if (isCustomFilter) {\n this.excelFilterBase.removeDialog();\n }\n else {\n this.closeDialog();\n }\n };\n ExcelFilter.prototype.applyCustomFilter = function (args) {\n if (!args.isCustomFilter) {\n this.excelFilterBase.fltrBtnHandler();\n this.excelFilterBase.closeDialog();\n }\n else {\n this.excelFilterBase.filterBtnClick(args.col.field);\n }\n };\n ExcelFilter.prototype.filterByColumn = function (fieldName, firstOperator, firstValue, predicate, matchCase, ignoreAccent, secondOperator, secondValue) {\n this.excelFilterBase.filterByColumn(fieldName, firstOperator, firstValue, predicate, matchCase, ignoreAccent, secondOperator, secondValue);\n };\n /**\n * @returns {FilterUI} returns the filterUI\n * @hidden\n */\n ExcelFilter.prototype.getFilterUIInfo = function () {\n return this.excelFilterBase.getFilterUIInfo();\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n ExcelFilter.prototype.getModuleName = function () {\n return 'excelFilter';\n };\n return ExcelFilter;\n}(CheckBoxFilter));\nexport { ExcelFilter };\n","import { EventHandler, isNullOrUndefined, extend, closest, getValue } from '@syncfusion/ej2-base';\nimport { getActualPropFromColl, isActionPrevent, getColumnByForeignKeyValue } from '../base/util';\nimport { remove, matches } from '@syncfusion/ej2-base';\nimport { DataUtil, Query, DataManager } from '@syncfusion/ej2-data';\nimport * as events from '../base/constant';\nimport { CellType, ResponsiveDialogAction } from '../base/enum';\nimport { RowRenderer } from '../renderer/row-renderer';\nimport { Cell } from '../models/cell';\nimport { Row } from '../models/row';\nimport { FilterCellRenderer } from '../renderer/filter-cell-renderer';\nimport { parentsUntil, addFixedColumnBorder, applyStickyLeftRightPosition } from '../base/util';\nimport { FilterMenuRenderer } from '../renderer/filter-menu-renderer';\nimport { CheckBoxFilter } from '../actions/checkbox-filter';\nimport { ExcelFilter } from '../actions/excel-filter';\nimport * as literals from '../base/string-literals';\nimport { Input } from '@syncfusion/ej2-inputs';\n/**\n *\n * The `Filter` module is used to handle filtering action.\n */\nvar Filter = /** @class */ (function () {\n /**\n * Constructor for Grid filtering module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {FilterSettings} filterSettings - specifies the filterSettings\n * @param {ServiceLocator} serviceLocator - specifes the serviceLocator\n * @hidden\n */\n function Filter(parent, filterSettings, serviceLocator) {\n this.predicate = 'and';\n this.contentRefresh = true;\n this.filterByMethod = true;\n this.refresh = true;\n this.values = {};\n this.operators = {};\n this.cellText = {};\n this.nextFlMenuOpen = '';\n this.type = { 'Menu': FilterMenuRenderer, 'CheckBox': CheckBoxFilter, 'Excel': ExcelFilter };\n /** @hidden */\n this.filterOperators = {\n contains: 'contains', endsWith: 'endswith', equal: 'equal', greaterThan: 'greaterthan', greaterThanOrEqual: 'greaterthanorequal',\n lessThan: 'lessthan', lessThanOrEqual: 'lessthanorequal', notEqual: 'notequal', startsWith: 'startswith', wildCard: 'wildcard',\n isNull: 'isnull', notNull: 'notnull', like: 'like'\n };\n this.fltrDlgDetails = { field: '', isOpen: false };\n /** @hidden */\n this.skipNumberInput = ['=', ' ', '!'];\n this.skipStringInput = ['>', '<', '='];\n this.actualPredicate = {};\n this.parent = parent;\n this.filterSettings = filterSettings;\n this.serviceLocator = serviceLocator;\n this.addEventListener();\n this.setFullScreenDialog();\n }\n /**\n * To render filter bar when filtering enabled.\n *\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Filter.prototype.render = function (e) {\n if (DataUtil.getObject('args.isFrozen', e)) {\n return;\n }\n var gObj = this.parent;\n this.l10n = this.serviceLocator.getService('localization');\n this.getLocalizedCustomOperators();\n if (this.parent.filterSettings.type === 'FilterBar') {\n if (gObj.columns.length) {\n var fltrElem = this.parent.element.querySelector('.e-filterbar');\n if (fltrElem) {\n remove(fltrElem);\n }\n var rowRenderer = new RowRenderer(this.serviceLocator, CellType.Filter, gObj);\n var cellrender = this.serviceLocator.getService('cellRendererFactory');\n cellrender.addCellRenderer(CellType.Filter, new FilterCellRenderer(this.parent, this.serviceLocator));\n this.valueFormatter = this.serviceLocator.getService('valueFormatter');\n rowRenderer.element = this.parent.createElement('tr', { className: 'e-filterbar', attrs: { role: 'row' } });\n var row = this.generateRow();\n row.data = this.values;\n this.parent.getHeaderContent().querySelector('thead:not(.e-masked-thead)').appendChild(rowRenderer.element);\n var rowdrag = this.parent.element.querySelector('.e-rowdragheader');\n this.element = rowRenderer.render(row, gObj.getColumns(), null, null, rowRenderer.element);\n if (this.element.querySelectorAll('.e-leftfreeze').length &&\n (this.element.querySelectorAll('.e-indentcell').length || this.element.querySelectorAll('.e-grouptopleftcell').length)) {\n var td = this.element.querySelectorAll('.e-indentcell, .e-grouptopleftcell');\n for (var i = 0; i < td.length; i++) {\n td[parseInt(i.toString(), 10)].classList.add('e-leftfreeze');\n applyStickyLeftRightPosition(td[parseInt(i.toString(), 10)], i * 30, this.parent.enableRtl, 'Left');\n }\n }\n addFixedColumnBorder(this.element);\n var detail = this.element.querySelector('.e-detailheadercell');\n if (detail) {\n detail.className = 'e-filterbarcell e-mastercell';\n }\n if (rowdrag) {\n if (rowdrag.classList.contains('e-leftfreeze')) {\n rowdrag.className = 'e-dragheadercell e-mastercell e-leftfreeze';\n }\n else {\n rowdrag.className = 'e-filterbarcell e-mastercell';\n }\n }\n var gCells = [].slice.call(this.element.getElementsByClassName('e-grouptopleftcell'));\n if (gCells.length) {\n gCells[gCells.length - 1].classList.add('e-lastgrouptopleftcell');\n }\n this.wireEvents();\n this.parent.notify(events.freezeRender, { case: 'filter' });\n }\n }\n };\n /**\n * To show the responsive custom filter dialog\n *\n * @param {boolean} enable - specifes dialog open\n * @returns {void}\n * @hidden\n */\n Filter.prototype.showCustomFilter = function (enable) {\n this.responsiveDialogRenderer.isCustomDialog = enable;\n this.responsiveDialogRenderer.showResponsiveDialog(this.column);\n };\n Filter.prototype.renderResponsiveChangeAction = function (args) {\n this.responsiveDialogRenderer.action = args.action;\n };\n /**\n * To create the filter module.\n *\n * @param {Column} col - specifies the filtering column name\n * @returns {void}\n * @hidden\n */\n Filter.prototype.setFilterModel = function (col) {\n var type = col.filter.type || this.parent.filterSettings.type;\n this.filterModule = new this.type[\"\" + type](this.parent, this.parent.filterSettings, this.serviceLocator, this.customOperators, this);\n };\n /**\n * To destroy the filter bar.\n *\n * @returns {void}\n * @hidden\n */\n Filter.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (!gridElement || (!gridElement.querySelector('.' + literals.gridHeader) && !gridElement.querySelector('.' + literals.gridContent))) {\n return;\n }\n if (this.filterModule) {\n this.filterModule.destroy();\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (!this.parent.refreshing && (this.parent.isDestroyed || !this.parent.allowFiltering)) {\n this.filterSettings.columns = [];\n }\n this.updateFilterMsg();\n this.removeEventListener();\n this.unWireEvents();\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.showFilterBarOperator) {\n var dropdownlist = [].slice.call(this.element.getElementsByClassName('e-filterbaroperator'));\n for (var i = 0; i < dropdownlist.length; i++) {\n if (dropdownlist[parseInt(i.toString(), 10)].ej2_instances[0]) {\n dropdownlist[parseInt(i.toString(), 10)].ej2_instances[0].destroy();\n }\n }\n }\n if (this.element) {\n if (this.element.parentElement) {\n remove(this.element);\n }\n var filterBarElement = this.parent.getHeaderContent().querySelector('.e-filterbar');\n if (filterBarElement) {\n remove(filterBarElement);\n }\n }\n };\n Filter.prototype.setFullScreenDialog = function () {\n if (this.serviceLocator) {\n this.serviceLocator.registerAdaptiveService(this, this.parent.enableAdaptiveUI, ResponsiveDialogAction.isFilter);\n }\n };\n Filter.prototype.generateRow = function () {\n var options = {};\n var row = new Row(options);\n row.cells = this.generateCells();\n return row;\n };\n Filter.prototype.generateCells = function () {\n //TODO: generate dummy column for group, detail, stacked row here for filtering;\n var cells = [];\n if (this.parent.allowGrouping) {\n for (var c = 0, len = this.parent.groupSettings.columns.length; c < len; c++) {\n cells.push(this.generateCell({}, CellType.HeaderIndent));\n }\n }\n if (this.parent.detailTemplate || this.parent.childGrid) {\n cells.push(this.generateCell({}, CellType.DetailHeader));\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() !== 'Right') {\n cells.push(this.generateCell({}, CellType.RowDragHIcon));\n }\n for (var _i = 0, _a = this.parent.getColumns(); _i < _a.length; _i++) {\n var dummy = _a[_i];\n cells.push(this.generateCell(dummy));\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() === 'Right') {\n cells.push(this.generateCell({}, CellType.RowDragHIcon));\n }\n return cells;\n };\n Filter.prototype.generateCell = function (column, cellType) {\n var opt = {\n 'visible': column.visible,\n 'isDataCell': false,\n 'rowId': '',\n 'column': column,\n 'cellType': cellType ? cellType : CellType.Filter,\n 'attributes': { title: this.l10n.getConstant('FilterbarTitle') }\n };\n return new Cell(opt);\n };\n /**\n * To update filterSettings when applying filter.\n *\n * @returns {void}\n * @hidden\n */\n Filter.prototype.updateModel = function () {\n var col = this.column.isForeignColumn() ? this.parent.getColumnByUid(this.column.uid) :\n this.parent.getColumnByField(this.fieldName);\n this.filterObjIndex = this.getFilteredColsIndexByField(col);\n this.prevFilterObject = this.filterSettings.columns[this.filterObjIndex];\n var arrayVal = Array.isArray(this.value) ? this.value : [this.value];\n var moduleName = this.parent.dataSource.adaptor && this.parent.dataSource.adaptor.getModuleName ? this.parent.dataSource.adaptor.getModuleName() : undefined;\n for (var i = 0, len = arrayVal.length; i < len; i++) {\n var field = col.isForeignColumn() ? col.foreignKeyValue : this.fieldName;\n var isMenuNotEqual = this.operator === 'notequal';\n this.currentFilterObject = {\n field: field, uid: col.uid, isForeignKey: col.isForeignColumn(), operator: this.operator,\n value: arrayVal[parseInt(i.toString(), 10)], predicate: this.predicate,\n matchCase: this.matchCase, ignoreAccent: this.ignoreAccent, actualFilterValue: {}, actualOperator: {}\n };\n var index = this.getFilteredColsIndexByField(col);\n if (index > -1 && !Array.isArray(this.value)) {\n this.filterSettings.columns[parseInt(index.toString(), 10)] = this.currentFilterObject;\n }\n else {\n this.filterSettings.columns.push(this.currentFilterObject);\n }\n if (!this.column.isForeignColumn() && isNullOrUndefined(this.value) && (this.operator === 'equal' ||\n this.operator === 'notequal') && (moduleName !== 'ODataAdaptor' && moduleName !== 'ODataV4Adaptor')) {\n for (var i_1 = 0; i_1 < this.filterSettings.columns.length; i_1++) {\n if (this.filterSettings.columns[\"\" + i_1].field === field &&\n (this.filterSettings.columns[\"\" + i_1].operator === 'equal' || this.filterSettings.columns[\"\" + i_1].operator === 'notequal')\n && isNullOrUndefined(this.filterSettings.columns[\"\" + i_1].value)) {\n this.filterSettings.columns.splice(i_1, 1);\n i_1 = i_1 - 1;\n }\n }\n if (col.type === 'string') {\n this.filterSettings.columns.push({\n field: field, ignoreAccent: this.ignoreAccent, matchCase: this.matchCase,\n operator: this.operator, predicate: isMenuNotEqual ? 'and' : 'or', value: ''\n });\n }\n this.filterSettings.columns.push({\n field: field, ignoreAccent: this.ignoreAccent, matchCase: this.matchCase,\n operator: this.operator, predicate: isMenuNotEqual ? 'and' : 'or', value: undefined\n });\n this.filterSettings.columns.push({\n field: field, ignoreAccent: this.ignoreAccent, matchCase: this.matchCase,\n operator: this.operator, predicate: isMenuNotEqual ? 'and' : 'or', value: null\n });\n }\n }\n // eslint-disable-next-line no-self-assign\n this.filterSettings.columns = this.filterSettings.columns;\n this.parent.dataBind();\n };\n Filter.prototype.getFilteredColsIndexByField = function (col) {\n var cols = this.filterSettings.columns;\n for (var i = 0, len = cols.length; i < len; i++) {\n if (cols[parseInt(i.toString(), 10)].uid === col.uid || (col.isForeignColumn()\n && this.parent.getColumnByUid(col.uid).field === col.foreignKeyValue)) {\n return i;\n }\n }\n return -1;\n };\n /**\n * To trigger action complete event.\n *\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n * @hidden\n */\n Filter.prototype.onActionComplete = function (e) {\n var args = !this.isRemove ? {\n currentFilterObject: this.currentFilterObject,\n /* tslint:disable:no-string-literal */\n currentFilteringColumn: !isNullOrUndefined(this.column) ? this.column.field : undefined,\n /* tslint:enable:no-string-literal */\n columns: this.filterSettings.columns, requestType: 'filtering', type: events.actionComplete\n } : {\n requestType: 'filtering', type: events.actionComplete\n };\n this.parent.trigger(events.actionComplete, extend(e, args));\n this.isRemove = false;\n };\n Filter.prototype.wireEvents = function () {\n EventHandler.add(this.parent.getHeaderContent(), 'keyup', this.keyUpHandlerImmediate, this);\n };\n Filter.prototype.unWireEvents = function () {\n EventHandler.remove(this.parent.getHeaderContent(), 'keyup', this.keyUpHandlerImmediate);\n };\n Filter.prototype.enableAfterRender = function (e) {\n if (e.module === this.getModuleName() && e.enable) {\n this.parent.getHeaderTable().classList.add('e-sortfilter');\n this.render();\n }\n };\n Filter.prototype.refreshFilterValue = function () {\n this.parent.removeEventListener(events.beforeDataBound, this.refreshFilterValueFn);\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.columns.length &&\n !this.parent.getCurrentViewRecords().length) {\n this.initialEnd();\n }\n };\n Filter.prototype.initialEnd = function () {\n this.parent.off(events.contentReady, this.initialEnd);\n if (this.parent.getColumns().length && this.filterSettings.columns.length) {\n var gObj = this.parent;\n this.contentRefresh = false;\n this.initialLoad = true;\n for (var _i = 0, _a = gObj.filterSettings.columns; _i < _a.length; _i++) {\n var col = _a[_i];\n this.filterByColumn(col.field, col.operator, col.value, col.predicate, col.matchCase, col.ignoreAccent, col.actualFilterValue, col.actualOperator, col.isForeignKey);\n }\n this.initialLoad = false;\n this.updateFilterMsg();\n this.contentRefresh = true;\n }\n };\n /**\n * @returns {void}\n * @hidden\n */\n Filter.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.setFullScreenDialog, this.setFullScreenDialog, this);\n this.parent.on(events.uiUpdate, this.enableAfterRender, this);\n this.parent.on(events.filterComplete, this.onActionComplete, this);\n this.parent.on(events.inBoundModelChanged, this.onPropertyChanged, this);\n this.parent.on(events.keyPressed, this.keyUpHandler, this);\n this.parent.on(events.columnPositionChanged, this.columnPositionChanged, this);\n this.parent.on(events.headerRefreshed, this.render, this);\n this.parent.on(events.contentReady, this.initialEnd, this);\n this.parent.on(events.filterMenuClose, this.filterMenuClose, this);\n this.parent.on(events.renderResponsiveChangeAction, this.renderResponsiveChangeAction, this);\n this.docClickHandler = this.clickHandler.bind(this);\n EventHandler.add(document, 'click', this.docClickHandler, this);\n EventHandler.add(this.parent.element, 'mousedown', this.refreshClearIcon, this);\n this.parent.on(events.filterOpen, this.columnMenuFilter, this);\n this.parent.on(events.click, this.filterIconClickHandler, this);\n this.parent.on('persist-data-changed', this.initialEnd, this);\n this.parent.on(events.closeFilterDialog, this.clickHandler, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.refreshFilterValueFn = this.refreshFilterValue.bind(this);\n this.parent.addEventListener(events.beforeDataBound, this.refreshFilterValueFn);\n };\n /**\n * @returns {void}\n * @hidden\n */\n Filter.prototype.removeEventListener = function () {\n EventHandler.remove(document, 'click', this.docClickHandler);\n EventHandler.remove(this.parent.element, 'mousedown', this.refreshClearIcon);\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.setFullScreenDialog, this.setFullScreenDialog);\n this.parent.off(events.uiUpdate, this.enableAfterRender);\n this.parent.off(events.filterComplete, this.onActionComplete);\n this.parent.off(events.inBoundModelChanged, this.onPropertyChanged);\n this.parent.off(events.keyPressed, this.keyUpHandler);\n this.parent.off(events.columnPositionChanged, this.columnPositionChanged);\n this.parent.off(events.headerRefreshed, this.render);\n this.parent.off(events.filterOpen, this.columnMenuFilter);\n this.parent.off(events.filterMenuClose, this.filterMenuClose);\n this.parent.off(events.renderResponsiveChangeAction, this.renderResponsiveChangeAction);\n this.parent.off(events.click, this.filterIconClickHandler);\n this.parent.off(events.closeFilterDialog, this.clickHandler);\n this.parent.off(events.destroy, this.destroy);\n };\n Filter.prototype.refreshClearIcon = function (e) {\n if (this.parent.allowFiltering && this.parent.filterSettings.type === 'FilterBar' &&\n e.target.closest('th') && e.target.closest('th').classList.contains('e-filterbarcell') &&\n e.target.classList.contains('e-clear-icon')) {\n var targetText = e.target.previousElementSibling;\n Input.setValue(null, targetText, 'Never', true);\n if (this.filterSettings.mode === 'Immediate') {\n this.removeFilteredColsByField(targetText.id.slice(0, -14)); //Length of _filterBarcell = 14\n }\n }\n };\n Filter.prototype.filterMenuClose = function () {\n this.fltrDlgDetails.isOpen = false;\n };\n /**\n * Filters the Grid row by fieldName, filterOperator, and filterValue.\n *\n * @param {string} fieldName - Defines the field name of the filter column.\n * @param {string} filterOperator - Defines the operator to filter records.\n * @param {string | number | Date | boolean} filterValue - Defines the value which is used to filter records.\n * @param {string} predicate - Defines the relationship of one filter query with another by using AND or OR predicate.\n * @param {boolean} matchCase - If match case is set to true, then the filter records\n * the exact match or
filters records that are case insensitive (uppercase and lowercase letters treated the same).\n * @param {boolean} ignoreAccent - If ignoreAccent set to true, then filter ignores the diacritic characters or accents while filtering.\n * @param {string} actualFilterValue - Defines the actual filter value for the filter column.\n * @param {string} actualOperator - Defines the actual filter operator for the filter column.\n * @param {boolean} isForeignColumn - Defines whether it is a foreign key column.\n * @returns {void}\n */\n Filter.prototype.filterByColumn = function (fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator, isForeignColumn) {\n var _this = this;\n var gObj = this.parent;\n var filterCell;\n this.column = gObj.grabColumnByFieldFromAllCols(fieldName, isForeignColumn);\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.showFilterBarOperator\n && isNullOrUndefined(this.column.filterBarTemplate) && isNullOrUndefined(this.column.filterTemplate)) {\n filterOperator = this.getOperatorName(fieldName);\n }\n if (filterOperator === 'like' && filterValue && filterValue.indexOf('%') === -1) {\n filterValue = '%' + filterValue + '%';\n }\n if (!this.column) {\n return;\n }\n if (this.filterSettings.type === 'FilterBar') {\n filterCell = gObj.getHeaderContent().querySelector('[id=\\'' + this.column.field + '_filterBarcell\\']');\n }\n if (!isNullOrUndefined(this.column.allowFiltering) && !this.column.allowFiltering) {\n this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), columnName: this.column.headerText });\n return;\n }\n if (isActionPrevent(gObj)) {\n gObj.notify(events.preventBatch, {\n instance: this, handler: this.filterByColumn, arg1: fieldName, arg2: filterOperator, arg3: filterValue, arg4: predicate,\n arg5: matchCase, arg6: ignoreAccent, arg7: actualFilterValue, arg8: actualOperator\n });\n return;\n }\n this.predicate = predicate ? predicate : Array.isArray(filterValue) ? 'or' : 'and';\n this.value = filterValue;\n this.matchCase = matchCase || false;\n this.ignoreAccent = this.ignoreAccent = !isNullOrUndefined(ignoreAccent) ? ignoreAccent : this.parent.filterSettings.ignoreAccent;\n this.fieldName = fieldName;\n this.operator = filterOperator;\n filterValue = !isNullOrUndefined(filterValue) ? filterValue.toString() : filterValue;\n if (filterValue === '') {\n filterValue = null;\n }\n if (this.column.type === 'number' || this.column.type === 'date') {\n this.matchCase = true;\n }\n if (filterCell && this.filterSettings.type === 'FilterBar') {\n if ((filterValue && filterValue.length < 1) || (!this.filterByMethod &&\n this.checkForSkipInput(this.column, filterValue))) {\n this.filterStatusMsg = (filterValue && filterValue.length < 1) ? '' : this.l10n.getConstant('InvalidFilterMessage');\n this.updateFilterMsg();\n return;\n }\n if (filterCell.value !== filterValue) {\n filterCell.value = filterValue;\n }\n }\n if (!isNullOrUndefined(this.column.format)) {\n this.applyColumnFormat(filterValue);\n if (this.initialLoad && this.filterSettings.type === 'FilterBar') {\n filterCell.value = this.values[this.column.field];\n }\n }\n else {\n this.values[this.column.field] = filterValue; //this line should be above updateModel\n }\n var predObj = {\n field: this.fieldName,\n predicate: predicate,\n matchCase: matchCase,\n ignoreAccent: ignoreAccent,\n operator: this.operator,\n value: this.value,\n type: this.column.type\n };\n var filterColumn = this.parent.filterSettings.columns.filter(function (fColumn) {\n return (fColumn.field === _this.fieldName);\n });\n if (filterColumn.length > 1 && !isNullOrUndefined(this.actualPredicate[this.fieldName])) {\n this.actualPredicate[this.fieldName].push(predObj);\n }\n else {\n this.actualPredicate[this.fieldName] = [predObj];\n }\n if (this.checkAlreadyColFiltered(this.column.field)) {\n return;\n }\n this.updateModel();\n };\n Filter.prototype.applyColumnFormat = function (filterValue) {\n var _this = this;\n var getFlvalue = (this.column.type === 'date' || this.column.type === 'datetime' || this.column.type === 'dateonly') ?\n new Date(filterValue) : parseFloat(filterValue);\n if ((this.column.type === 'date' || this.column.type === 'datetime' || this.column.type === 'dateonly') && filterValue &&\n Array.isArray(this.value) && filterValue.split(',').length > 1) {\n this.values[this.column.field] = ((filterValue).split(',')).map(function (val) {\n if (val === '') {\n val = null;\n }\n return _this.setFormatForFlColumn(new Date(val), _this.column);\n });\n }\n else {\n this.values[this.column.field] = this.setFormatForFlColumn(getFlvalue, this.column);\n }\n };\n // To skip the second time request to server while applying initial filtering - EJ2-44361\n Filter.prototype.skipUid = function (col) {\n var flag = true;\n var colLen = Object.keys((col));\n for (var i = 0; i < colLen.length; i++) {\n var key = Object.keys(col[colLen[parseInt(i.toString(), 10)]]);\n if (key.length === 1 && key[0] === 'uid') {\n flag = false;\n }\n }\n return flag;\n };\n Filter.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n for (var _i = 0, _a = Object.keys(e.properties); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'columns':\n // eslint-disable-next-line no-case-declarations\n var col = 'columns';\n // eslint-disable-next-line no-case-declarations\n var args = {\n currentFilterObject: this.currentFilterObject, currentFilteringColumn: this.column ?\n this.column.field : undefined, action: 'filter', columns: this.filterSettings.columns,\n requestType: 'filtering', type: events.actionBegin, cancel: false\n };\n if (this.contentRefresh && this.skipUid(e.properties[\"\" + col])) {\n this.parent.notify(events.modelChanged, args);\n if (args.cancel) {\n if ((this.filterSettings.type === 'CheckBox' || this.filterSettings.type === 'Excel')) {\n this.filterSettings.columns = (this.actualData.length <= 1) ? this.checkboxPrevFilterObject :\n this.checkboxFilterObject;\n this.actualPredicate[this.column.field] = this.filterSettings.columns;\n var col_1 = this.parent.getColumnByField(this.column.field);\n var iconClass = this.parent.showColumnMenu && col_1.showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';\n var filterIconElement = this.parent.getColumnHeaderByField(this.column.field)\n .querySelector(iconClass);\n if (this.checkboxPrevFilterObject.length === 0) {\n filterIconElement.classList.remove('e-filtered');\n }\n else {\n filterIconElement.classList.add('e-filtered');\n }\n }\n else {\n if (isNullOrUndefined(this.prevFilterObject)) {\n this.filterSettings.columns.splice(this.filterSettings.columns.length - 1, 1);\n }\n else {\n this.filterSettings.columns[this.filterObjIndex] = this.prevFilterObject;\n }\n }\n return;\n }\n this.updateFilterIcon();\n this.refreshFilterSettings();\n this.updateFilterMsg();\n this.updateFilter();\n }\n break;\n case 'showFilterBarStatus':\n if (e.properties[\"\" + prop]) {\n this.updateFilterMsg();\n }\n else if (this.parent.allowPaging) {\n this.parent.updateExternalMessage('');\n }\n break;\n case 'showFilterBarOperator':\n case 'type':\n this.parent.refreshHeader();\n this.refreshFilterSettings();\n if (this.parent.height === '100%') {\n this.parent.scrollModule.refresh();\n }\n break;\n }\n }\n };\n Filter.prototype.refreshFilterSettings = function () {\n if (this.filterSettings.type === 'FilterBar') {\n for (var i = 0; i < this.filterSettings.columns.length; i++) {\n this.column = this.parent.grabColumnByUidFromAllCols(this.filterSettings.columns[parseInt(i.toString(), 10)].uid);\n var filterValue = this.filterSettings.columns[parseInt(i.toString(), 10)].value;\n filterValue = !isNullOrUndefined(filterValue) && filterValue.toString();\n if (!isNullOrUndefined(this.column.format)) {\n this.applyColumnFormat(filterValue);\n }\n else {\n var key = this.filterSettings.columns[parseInt(i.toString(), 10)].field;\n this.values[\"\" + key] = this.filterSettings.columns[parseInt(i.toString(), 10)].value;\n }\n var filterElement = this.getFilterBarElement(this.column.field);\n if (filterElement) {\n if (this.cellText[this.filterSettings.columns[parseInt(i.toString(), 10)].field] !== ''\n && !isNullOrUndefined(this.cellText[this.filterSettings.columns[parseInt(i.toString(), 10)].field])) {\n filterElement.value = this.cellText[this.column.field];\n }\n else {\n filterElement.value = this.filterSettings.columns[parseInt(i.toString(), 10)].value;\n }\n }\n }\n if (this.filterSettings.columns.length === 0) {\n var col = this.parent.getColumns();\n for (var i = 0; i < col.length; i++) {\n var filterElement = this.getFilterBarElement(col[parseInt(i.toString(), 10)].field);\n if (filterElement && filterElement.value !== '') {\n filterElement.value = '';\n delete this.values[col[parseInt(i.toString(), 10)].field];\n }\n }\n }\n }\n };\n Filter.prototype.updateFilterIcon = function () {\n if (this.filterSettings.columns.length === 0 && this.parent.element.querySelector('.e-filtered')) {\n var fltrIconElement = [].slice.call(this.parent.element.getElementsByClassName('e-filtered'));\n for (var i = 0, len = fltrIconElement.length; i < len; i++) {\n fltrIconElement[parseInt(i.toString(), 10)].classList.remove('e-filtered');\n }\n }\n };\n Filter.prototype.getFilterBarElement = function (col) {\n var selector = '[id=\\'' + col + '_filterBarcell\\']';\n var filterElement;\n if (selector && !isNullOrUndefined(this.element)) {\n filterElement = this.element.querySelector(selector);\n }\n return filterElement;\n };\n /**\n * @private\n * @returns {void}\n */\n Filter.prototype.refreshFilter = function () {\n this.refreshFilterSettings();\n this.updateFilterMsg();\n };\n /**\n * Clears all the filtered rows of the Grid.\n *\n * @param {string[]} fields - returns the fields\n * @returns {void}\n */\n Filter.prototype.clearFiltering = function (fields) {\n var _this = this;\n var cols = getActualPropFromColl(this.filterSettings.columns);\n if (!isNullOrUndefined(fields)) {\n this.refresh = false;\n fields.forEach(function (field) { _this.removeFilteredColsByField(field, false); });\n this.parent.setProperties({ filterSettings: { columns: this.filterSettings.columns } }, true);\n this.parent.renderModule.refresh();\n this.refresh = true;\n return;\n }\n if (isActionPrevent(this.parent)) {\n this.parent.notify(events.preventBatch, { instance: this, handler: this.clearFiltering });\n return;\n }\n for (var i = 0; i < cols.length; i++) {\n cols[parseInt(i.toString(), 10)].uid = cols[parseInt(i.toString(), 10)].uid\n || this.parent.getColumnByField(cols[parseInt(i.toString(), 10)].field).uid;\n }\n var colUid = cols.map(function (f) { return f.uid; });\n var filteredcols = colUid.filter(function (item, pos) { return colUid.indexOf(item) === pos; });\n this.refresh = false;\n for (var i = 0, len = filteredcols.length; i < len; i++) {\n this.removeFilteredColsByField(this.parent.getColumnByUid(filteredcols[parseInt(i.toString(), 10)]).field, false);\n }\n this.refresh = true;\n if (filteredcols.length) {\n this.parent.renderModule.refresh();\n }\n if (this.parent.filterSettings.columns.length === 0 && this.parent.element.querySelector('.e-filtered')) {\n var fltrElement = [].slice.call(this.parent.element.getElementsByClassName('e-filtered'));\n for (var i = 0, len = fltrElement.length; i < len; i++) {\n fltrElement[0].classList.remove('e-filtered');\n }\n }\n this.isRemove = true;\n this.filterStatusMsg = '';\n this.updateFilterMsg();\n };\n Filter.prototype.checkAlreadyColFiltered = function (field) {\n var columns = this.filterSettings.columns;\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var col = columns_1[_i];\n if (col.field === field && col.value === this.value &&\n col.operator === this.operator && col.predicate === this.predicate) {\n return true;\n }\n }\n return false;\n };\n Filter.prototype.columnMenuFilter = function (args) {\n this.column = args.col;\n var ele = closest(args.target, '#' + args.id);\n if (args.isClose && !ele) {\n this.filterModule.closeDialog();\n }\n else if (ele) {\n this.filterDialogOpen(this.column, args.target);\n }\n };\n Filter.prototype.filterDialogOpen = function (col, target, left, top) {\n if (this.filterModule) {\n this.filterModule.isresetFocus = false;\n this.filterModule.closeDialog();\n }\n this.setFilterModel(col);\n this.filterModule.openDialog(this.createOptions(col, target, left, top));\n };\n /**\n * Create filter dialog options\n *\n * @param {Column} col - Filtering column detail.\n * @param {Element} target - Filter dialog target.\n * @param {number} left - Filter dialog left position.\n * @param {number} top - Filter dialog top position.\n * @returns {Object} returns the created dialog options\n * @hidden\n */\n Filter.prototype.createOptions = function (col, target, left, top) {\n var gObj = this.parent;\n var dataSource = col.filter.dataSource || gObj.dataSource && 'result' in gObj.dataSource ? gObj.dataSource :\n gObj.getDataModule().dataManager;\n var type = col.filter.type || this.parent.filterSettings.type;\n var options = {\n type: col.type, field: col.field, displayName: col.headerText,\n dataSource: dataSource, format: col.format, height: 800, columns: gObj.getColumns(),\n filteredColumns: gObj.filterSettings.columns, target: target, dataManager: gObj.getDataModule().dataManager,\n formatFn: col.getFormatter(), ignoreAccent: gObj.filterSettings.ignoreAccent,\n parserFn: col.getParser(), query: gObj.query, template: col.getFilterItemTemplate(),\n hideSearchbox: isNullOrUndefined(col.filter.hideSearchbox) ? false : col.filter.hideSearchbox,\n handler: this.filterHandler.bind(this), localizedStrings: gObj.getLocaleConstants(),\n position: { X: left, Y: top }, column: col, foreignKeyValue: col.foreignKeyValue,\n actualPredicate: this.actualPredicate, localeObj: gObj.localeObj,\n isRemote: gObj.getDataModule().isRemote(), allowCaseSensitive: this.filterSettings.enableCaseSensitivity,\n isResponsiveFilter: this.parent.enableAdaptiveUI,\n operator: this.actualPredicate[col.field] && type === 'Menu' ? this.actualPredicate[col.field][0].operator : 'equal',\n parentTotalDataCount: gObj.getDataModule().isRemote() && gObj.allowPaging ? gObj.pagerModule.pagerObj.totalRecordsCount :\n gObj.getDataModule().isRemote() ? gObj.totalDataRecordsCount : gObj.getFilteredRecords().length,\n parentCurrentViewDataCount: gObj.currentViewData.length,\n parentFilteredLocalRecords: !gObj.getDataModule().isRemote() ? gObj.getFilteredRecords() : []\n };\n return options;\n };\n /**\n * Removes filtered column by field name.\n *\n * @param {string} field - Defines column field name to remove filter.\n * @param {boolean} isClearFilterBar - Specifies whether the filter bar value needs to be cleared.\n * @returns {void}\n * @hidden\n */\n Filter.prototype.removeFilteredColsByField = function (field, isClearFilterBar) {\n var fCell;\n var cols = this.filterSettings.columns;\n if (isActionPrevent(this.parent)) {\n var args = { instance: this, handler: this.removeFilteredColsByField, arg1: field, arg2: isClearFilterBar };\n this.parent.notify(events.preventBatch, args);\n return;\n }\n var colUid = cols.map(function (f) { return f.uid; });\n var filteredColsUid = colUid.filter(function (item, pos) { return colUid.indexOf(item) === pos; });\n if (!isNullOrUndefined(this.column)) {\n var col = this.column.isForeignColumn() ? this.parent.getColumnByUid(this.column.uid) :\n this.parent.getColumnByField(field);\n this.filterObjIndex = this.getFilteredColsIndexByField(col);\n this.prevFilterObject = this.filterSettings.columns[this.filterObjIndex];\n }\n var _loop_1 = function (i, len) {\n cols[parseInt(i.toString(), 10)].uid = cols[parseInt(i.toString(), 10)].uid\n || this_1.parent.getColumnByField(cols[parseInt(i.toString(), 10)].field).uid;\n var len_1 = cols.length;\n var column = this_1.parent.grabColumnByUidFromAllCols(filteredColsUid[parseInt(i.toString(), 10)]);\n if (column.field === field || (column.field === column.foreignKeyValue && column.isForeignColumn())) {\n var currentPred = this_1.filterSettings.columns.filter(function (e) {\n return e.uid === column.uid;\n })[0];\n if (this_1.filterSettings.type === 'FilterBar' && !isClearFilterBar) {\n var selector = '[id=\\'' + column.field + '_filterBarcell\\']';\n fCell = this_1.parent.getHeaderContent().querySelector(selector);\n if (fCell) {\n fCell.value = '';\n delete this_1.values[\"\" + field];\n }\n }\n while (len_1--) {\n if (cols[parseInt(len_1.toString(), 10)].uid === column.uid) {\n cols.splice(len_1, 1);\n }\n }\n var fltrElement = this_1.parent.getColumnHeaderByField(column.field);\n if (this_1.filterSettings.type !== 'FilterBar' || this_1.parent.showColumnMenu) {\n var iconClass = this_1.parent.showColumnMenu && column.showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';\n fltrElement.querySelector(iconClass).classList.remove('e-filtered');\n }\n this_1.isRemove = true;\n if (this_1.actualPredicate[\"\" + field]) {\n delete this_1.actualPredicate[\"\" + field];\n }\n if (this_1.values[\"\" + field]) {\n delete this_1.values[\"\" + field];\n }\n if (this_1.refresh) {\n this_1.parent.notify(events.modelChanged, {\n requestType: 'filtering', type: events.actionBegin, currentFilterObject: currentPred,\n currentFilterColumn: column, action: 'clearFilter'\n });\n }\n return \"break\";\n }\n };\n var this_1 = this;\n for (var i = 0, len = filteredColsUid.length; i < len; i++) {\n var state_1 = _loop_1(i, len);\n if (state_1 === \"break\")\n break;\n }\n this.updateFilterMsg();\n };\n /**\n * For internal use only - Get the module name.\n *\n * @returns {string} returns the module name\n * @private\n */\n Filter.prototype.getModuleName = function () {\n return 'filter';\n };\n Filter.prototype.keyUpHandlerImmediate = function (e) {\n if (e.keyCode !== 13) {\n this.keyUpHandler(e);\n }\n };\n Filter.prototype.keyUpHandler = function (e) {\n var gObj = this.parent;\n var target = e.target;\n if (target && matches(target, '.e-filterbar input')) {\n var closeHeaderEle = closest(target, 'th.e-filterbarcell');\n this.column = gObj.getColumnByUid(closeHeaderEle.getAttribute('e-mappinguid'));\n if (!this.column) {\n return;\n }\n if (e.action === 'altDownArrow' && this.parent.filterSettings.showFilterBarOperator) {\n var dropDownListInput = closest(target, 'span').querySelector('.e-filterbaroperator');\n dropDownListInput.ej2_instances[0].showPopup();\n dropDownListInput.focus();\n }\n if ((this.filterSettings.mode === 'Immediate' || (e.keyCode === 13 &&\n !e.target.classList.contains('e-filterbaroperator')))\n && e.keyCode !== 9 && !this.column.filterTemplate) {\n this.value = target.value.trim();\n this.processFilter(e);\n }\n }\n if (e.action === 'altDownArrow' && this.filterSettings.type !== 'FilterBar' && !parentsUntil(e.target, 'e-toolbar')\n && isNullOrUndefined(this.parent.element.querySelector('.e-filter-popup'))) {\n var element = gObj.focusModule.currentInfo.element;\n if (element && element.classList.contains('e-headercell')) {\n var column = gObj.getColumnByUid(element.firstElementChild.getAttribute('e-mappinguid'));\n this.openMenuByField(column.field);\n this.parent.focusModule.clearIndicator();\n }\n }\n if (e.action === 'escape' && this.filterSettings.type === 'Menu' && this.filterModule) {\n this.filterModule.closeDialog();\n gObj.notify(events.restoreFocus, {});\n }\n };\n Filter.prototype.updateCrossIcon = function (element) {\n if (element.value.length) {\n element.nextElementSibling.classList.remove('e-hide');\n }\n };\n Filter.prototype.updateFilterMsg = function () {\n if (this.filterSettings.type === 'FilterBar') {\n var gObj = this.parent;\n var getFormatFlValue = void 0;\n var columns = this.filterSettings.columns;\n var column = void 0;\n if (!this.filterSettings.showFilterBarStatus) {\n return;\n }\n if (columns.length > 0 && this.filterStatusMsg !== this.l10n.getConstant('InvalidFilterMessage')) {\n this.filterStatusMsg = '';\n for (var index = 0; index < columns.length; index++) {\n column = gObj.grabColumnByUidFromAllCols(columns[parseInt(index.toString(), 10)].uid)\n || gObj.grabColumnByFieldFromAllCols(columns[parseInt(index.toString(), 10)].field, columns[parseInt(index.toString(), 10)].isForeignKey);\n if (index) {\n this.filterStatusMsg += ' && ';\n }\n if (!isNullOrUndefined(column.format)) {\n var flValue = (column.type === 'date' || column.type === 'datetime' || column.type === 'dateonly') ?\n this.valueFormatter.fromView(this.values[column.field], column.getParser(), (column.type === 'dateonly' ? 'date' : column.type)) :\n this.values[column.field];\n if (!(column.type === 'date' || column.type === 'datetime' || column.type === 'dateonly')) {\n var formater = this.serviceLocator.getService('valueFormatter');\n getFormatFlValue = formater.toView(flValue, column.getParser()).toString();\n }\n else {\n getFormatFlValue = this.setFormatForFlColumn(flValue, column);\n }\n this.filterStatusMsg += column.headerText + ': ' + getFormatFlValue;\n }\n else {\n this.filterStatusMsg += column.headerText + ': ' + this.values[column.field];\n }\n }\n }\n if (gObj.allowPaging) {\n gObj.updateExternalMessage(this.filterStatusMsg);\n }\n //TODO: virtual paging\n this.filterStatusMsg = '';\n }\n };\n Filter.prototype.setFormatForFlColumn = function (value, column) {\n var formater = this.serviceLocator.getService('valueFormatter');\n return formater.toView(value, column.getFormatter()).toString();\n };\n Filter.prototype.checkForSkipInput = function (column, value) {\n var isSkip;\n if (column.type === 'number') {\n if (DataUtil.operatorSymbols[\"\" + value] || this.skipNumberInput.indexOf(value) > -1) {\n isSkip = true;\n }\n }\n else if (column.type === 'string') {\n for (var _i = 0, value_1 = value; _i < value_1.length; _i++) {\n var val = value_1[_i];\n if (this.skipStringInput.indexOf(val) > -1) {\n isSkip = true;\n }\n }\n }\n return isSkip;\n };\n Filter.prototype.processFilter = function (e) {\n this.stopTimer();\n this.startTimer(e);\n };\n Filter.prototype.startTimer = function (e) {\n var _this = this;\n this.timer = window.setInterval(function () { _this.onTimerTick(); }, e.keyCode === 13 ? 0 : this.filterSettings.immediateModeDelay);\n };\n Filter.prototype.stopTimer = function () {\n window.clearInterval(this.timer);\n };\n Filter.prototype.onTimerTick = function () {\n var selector = '[id=\\'' + this.column.field + '_filterBarcell\\']';\n var filterElement = this.element.querySelector(selector);\n if (!filterElement) {\n filterElement = this.parent.getHeaderContent().querySelector(selector);\n }\n var filterValue;\n this.cellText[this.column.field] = filterElement.value;\n this.stopTimer();\n if (!isNullOrUndefined(this.column.filterBarTemplate)) {\n var templateRead = this.column.filterBarTemplate.read;\n if (typeof templateRead === 'string') {\n templateRead = getValue(templateRead, window);\n }\n if (!isNullOrUndefined(templateRead)) {\n this.value = templateRead.call(this, filterElement);\n }\n }\n else {\n filterValue = JSON.parse(JSON.stringify(filterElement.value));\n }\n if (isNullOrUndefined(this.value) || this.value === '') {\n this.removeFilteredColsByField(this.column.field);\n return;\n }\n this.validateFilterValue(this.value);\n this.filterByMethod = false;\n this.filterByColumn(this.column.field, this.operator, this.value, this.predicate, this.filterSettings.enableCaseSensitivity, this.ignoreAccent, this.column.isForeignColumn());\n this.filterByMethod = true;\n filterElement.value = filterValue;\n this.updateFilterMsg();\n };\n Filter.prototype.validateFilterValue = function (value) {\n var skipInput;\n var index;\n this.matchCase = this.filterSettings.enableCaseSensitivity;\n switch (this.column.type) {\n case 'number':\n if (this.column.filter.operator) {\n this.operator = this.column.filter.operator;\n }\n else {\n this.operator = this.filterOperators.equal;\n }\n skipInput = ['>', '<', '=', '!'];\n for (var i = 0; i < value.length; i++) {\n if (skipInput.indexOf(value[parseInt(i.toString(), 10)]) > -1) {\n index = i;\n break;\n }\n }\n this.getOperator(value.substring(index));\n if (index !== 0) {\n this.value = value.substring(0, index);\n }\n if (this.value !== '' && value.length >= 1) {\n this.value = this.valueFormatter.fromView(this.value, this.column.getParser(), this.column.type);\n }\n if (isNaN(this.value)) {\n this.filterStatusMsg = this.l10n.getConstant('InvalidFilterMessage');\n }\n break;\n case 'date':\n case 'datetime':\n this.operator = this.filterOperators.equal;\n if (this.value !== '' && !(this.value instanceof Date)) {\n this.getOperator(value);\n this.value = this.valueFormatter.fromView(this.value, this.column.getParser(), this.column.type);\n if (isNullOrUndefined(this.value)) {\n this.filterStatusMsg = this.l10n.getConstant('InvalidFilterMessage');\n }\n }\n break;\n case 'string':\n this.matchCase = false;\n if (this.column.filter.operator) {\n this.operator = this.column.filter.operator;\n }\n else {\n if (value.indexOf('*') !== -1 || value.indexOf('?') !== -1 || value.indexOf('%3f') !== -1) {\n this.operator = this.filterOperators.wildCard;\n }\n else if (value.indexOf('%') !== -1) {\n this.operator = this.filterOperators.like;\n }\n else {\n this.operator = this.filterOperators.startsWith;\n }\n }\n break;\n case 'boolean':\n if (value.toLowerCase() === 'true' || value === '1') {\n this.value = true;\n }\n else if (value.toLowerCase() === 'false' || value === '0') {\n this.value = false;\n }\n else if (value.length) {\n this.filterStatusMsg = this.l10n.getConstant('InvalidFilterMessage');\n }\n this.operator = this.filterOperators.equal;\n break;\n default:\n if (this.column.filter.operator) {\n this.operator = this.column.filter.operator;\n }\n else {\n this.operator = this.filterOperators.equal;\n }\n }\n };\n Filter.prototype.getOperator = function (value) {\n var singleOp = value.charAt(0);\n var multipleOp = value.slice(0, 2);\n var operators = extend({ '=': this.filterOperators.equal, '!': this.filterOperators.notEqual }, DataUtil.operatorSymbols);\n // eslint-disable-next-line no-prototype-builtins\n if (operators.hasOwnProperty(singleOp) || operators.hasOwnProperty(multipleOp)) {\n this.operator = operators[\"\" + singleOp];\n this.value = value.substring(1);\n if (!this.operator) {\n this.operator = operators[\"\" + multipleOp];\n this.value = value.substring(2);\n }\n }\n if (this.operator === this.filterOperators.lessThan || this.operator === this.filterOperators.greaterThan) {\n if (this.value.charAt(0) === '=') {\n this.operator = this.operator + 'orequal';\n this.value = this.value.substring(1);\n }\n }\n };\n Filter.prototype.columnPositionChanged = function () {\n if (this.parent.filterSettings.type !== 'FilterBar') {\n return;\n }\n };\n Filter.prototype.getLocalizedCustomOperators = function () {\n var numOptr = [\n { value: 'equal', text: this.l10n.getConstant('Equal') },\n { value: 'greaterthan', text: this.l10n.getConstant('GreaterThan') },\n { value: 'greaterthanorequal', text: this.l10n.getConstant('GreaterThanOrEqual') },\n { value: 'lessthan', text: this.l10n.getConstant('LessThan') },\n { value: 'lessthanorequal', text: this.l10n.getConstant('LessThanOrEqual') },\n { value: 'notequal', text: this.l10n.getConstant('NotEqual') },\n { value: 'isnull', text: this.l10n.getConstant('IsNull') },\n { value: 'isnotnull', text: this.l10n.getConstant('NotNull') }\n ];\n this.customOperators = {\n stringOperator: [\n { value: 'startswith', text: this.l10n.getConstant('StartsWith') },\n { value: 'endswith', text: this.l10n.getConstant('EndsWith') },\n { value: 'contains', text: this.l10n.getConstant('Contains') },\n { value: 'equal', text: this.l10n.getConstant('Equal') },\n { value: 'isempty', text: this.l10n.getConstant('IsEmpty') },\n { value: 'doesnotstartwith', text: this.l10n.getConstant('NotStartsWith') },\n { value: 'doesnotendwith', text: this.l10n.getConstant('NotEndsWith') },\n { value: 'doesnotcontain', text: this.l10n.getConstant('NotContains') },\n { value: 'notequal', text: this.l10n.getConstant('NotEqual') },\n { value: 'isnotempty', text: this.l10n.getConstant('IsNotEmpty') },\n { value: 'like', text: this.l10n.getConstant('Like') }\n ],\n numberOperator: numOptr,\n dateOperator: numOptr,\n datetimeOperator: numOptr,\n dateonlyOperator: numOptr,\n booleanOperator: [\n { value: 'equal', text: this.l10n.getConstant('Equal') },\n { value: 'notequal', text: this.l10n.getConstant('NotEqual') }\n ]\n };\n };\n /**\n * @param {string} field - specifies the field name\n * @returns {void}\n * @hidden\n */\n Filter.prototype.openMenuByField = function (field) {\n var gObj = this.parent;\n if (gObj.enableAdaptiveUI) {\n this.showCustomFilter(false);\n return;\n }\n var column = gObj.getColumnByField(field);\n var header = gObj.getColumnHeaderByField(field);\n var target = header.querySelector('.e-filtermenudiv');\n if (!target) {\n return;\n }\n var gClient = gObj.element.getBoundingClientRect();\n var fClient = target.getBoundingClientRect();\n this.filterDialogOpen(column, target, fClient.right - gClient.left, fClient.bottom - gClient.top);\n };\n Filter.prototype.filterIconClickHandler = function (e) {\n var target = e.target;\n if (target.classList.contains('e-filtermenudiv') && (this.parent.filterSettings.type === 'Menu' ||\n this.parent.filterSettings.type === 'CheckBox' || this.parent.filterSettings.type === 'Excel')) {\n var gObj = this.parent;\n var col = gObj.getColumnByUid(parentsUntil(target, 'e-headercell').firstElementChild.getAttribute('e-mappinguid'));\n this.column = col;\n if (this.fltrDlgDetails.field === col.field && this.fltrDlgDetails.isOpen) {\n return;\n }\n if (this.filterModule) {\n this.filterModule.closeDialog();\n }\n this.fltrDlgDetails = { field: col.field, isOpen: true };\n this.openMenuByField(col.field);\n }\n };\n Filter.prototype.clickHandler = function (e) {\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.showFilterBarOperator) {\n if (parentsUntil(e.target, 'e-filterbarcell') &&\n e.target.classList.contains('e-input-group-icon')) {\n var filterOperatorElement = closest(e.target, 'div').\n querySelector('.e-filterbaroperator');\n if (filterOperatorElement) {\n filterOperatorElement.focus();\n }\n else {\n e.target.focus();\n }\n }\n if (e.target.classList.contains('e-list-item')) {\n var inputId = document.querySelector('.e-popup-open').getAttribute('id').replace('_popup', '');\n if (inputId.indexOf('grid-column') !== -1) {\n closest(document.getElementById(inputId), 'div').querySelector('.e-filtertext').focus();\n }\n }\n }\n if (this.filterSettings.mode === 'Immediate' || this.parent.filterSettings.type === 'Menu' ||\n this.parent.filterSettings.type === 'CheckBox' || this.parent.filterSettings.type === 'Excel') {\n var target = e.target;\n var datepickerEle = target.classList.contains('e-day'); // due to datepicker popup cause\n var dialog = parentsUntil(this.parent.element, 'e-dialog');\n var hasDialog = false;\n var popupEle = parentsUntil(target, 'e-popup');\n var hasDialogClosed = this.parent.element.classList.contains('e-device') ? document.querySelector('.e-filter-popup')\n : this.parent.element.querySelector('.e-filter-popup');\n if (dialog && popupEle) {\n hasDialog = dialog.id === popupEle.id;\n }\n if ((this.filterModule && hasDialogClosed && (parentsUntil(target, 'e-excel-ascending') ||\n parentsUntil(target, 'e-excel-descending')))) {\n this.filterModule.closeDialog(target);\n }\n if (parentsUntil(target, 'e-filter-popup') || target.classList.contains('e-filtermenudiv')) {\n return;\n }\n else if (this.filterModule && !parentsUntil(target, 'e-date-overflow') && (!parentsUntil(target, 'e-popup-wrapper')\n && (!closest(target, '.e-filter-item.e-menu-item'))) && !datepickerEle\n && !(parentsUntil(target, 'e-search-wrapper') && !hasDialogClosed)) {\n if ((hasDialog && (!parentsUntil(target, 'e-filter-popup'))\n && (!parentsUntil(target, 'e-popup-flmenu'))) || (!popupEle && hasDialogClosed)) {\n this.filterModule.isresetFocus = parentsUntil(target, 'e-grid') &&\n parentsUntil(target, 'e-grid').id === this.parent.element.id && !(parentsUntil(target, 'e-search-wrapper')\n && hasDialogClosed);\n this.filterModule.closeDialog(target);\n }\n }\n }\n };\n Filter.prototype.filterHandler = function (args) {\n this.actualPredicate[args.field] = args.actualPredicate;\n this.actualData = Object.keys(this.actualPredicate);\n var dataManager = new DataManager(this.filterSettings.columns);\n var query = new Query().where('field', this.filterOperators.equal, args.field);\n this.checkboxFilterObject = dataManager.dataSource.json;\n this.checkboxPrevFilterObject = dataManager.executeLocal(query);\n for (var i = 0; i < this.checkboxPrevFilterObject.length; i++) {\n var index = -1;\n for (var j = 0; j < this.filterSettings.columns.length; j++) {\n if (this.checkboxPrevFilterObject[parseInt(i.toString(), 10)].field ===\n this.filterSettings.columns[parseInt(j.toString(), 10)].field) {\n index = j;\n break;\n }\n }\n if (index !== -1) {\n this.filterSettings.columns.splice(index, 1);\n }\n }\n if (this.values[args.field]) {\n delete this.values[args.field];\n }\n var col = this.parent.getColumnByField(args.field);\n var iconClass = this.parent.showColumnMenu && col.showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';\n var filterIconElement = this.parent.getColumnHeaderByField(args.field).querySelector(iconClass);\n if (args.action === 'filtering') {\n this.filterSettings.columns = this.filterSettings.columns.concat(args.filterCollection);\n if (this.filterSettings.columns.length && filterIconElement) {\n filterIconElement.classList.add('e-filtered');\n }\n }\n else {\n if (filterIconElement) {\n filterIconElement.classList.remove('e-filtered');\n }\n args.requestType = 'filtering';\n this.parent.renderModule.refresh(args); //hot-fix onpropertychanged not working for object { array }\n }\n this.parent.dataBind();\n };\n Filter.prototype.updateFilter = function () {\n var cols = this.filterSettings.columns;\n this.actualPredicate = {};\n for (var i = 0; i < cols.length; i++) {\n this.column = this.parent.getColumnByField(cols[parseInt(i.toString(), 10)].field) ||\n getColumnByForeignKeyValue(cols[parseInt(i.toString(), 10)].field, this.parent.getForeignKeyColumns());\n var fieldName = cols[parseInt(i.toString(), 10)].field;\n if (!this.parent.getColumnByField(cols[parseInt(i.toString(), 10)].field)) {\n fieldName = getColumnByForeignKeyValue(cols[parseInt(i.toString(), 10)].field, this.parent.getForeignKeyColumns()).field;\n }\n this.refreshFilterIcon(fieldName, cols[parseInt(i.toString(), 10)].operator, cols[parseInt(i.toString(), 10)].value, cols[parseInt(i.toString(), 10)].type, cols[parseInt(i.toString(), 10)].predicate, cols[parseInt(i.toString(), 10)].matchCase, cols[parseInt(i.toString(), 10)].ignoreAccent, cols[parseInt(i.toString(), 10)].uid);\n }\n };\n Filter.prototype.refreshFilterIcon = function (fieldName, operator, value, type, predicate, matchCase, ignoreAccent, uid) {\n var obj = {\n field: fieldName,\n predicate: predicate,\n matchCase: matchCase,\n ignoreAccent: ignoreAccent,\n operator: operator,\n value: value,\n type: type\n };\n if (this.actualPredicate[\"\" + fieldName]) {\n this.actualPredicate[\"\" + fieldName].push(obj);\n }\n else {\n this.actualPredicate[\"\" + fieldName] = [obj];\n }\n var field = uid ? this.parent.grabColumnByUidFromAllCols(uid).field : fieldName;\n this.addFilteredClass(field);\n };\n Filter.prototype.addFilteredClass = function (fieldName) {\n var filterIconElement;\n var col = this.parent.getColumnByField(fieldName);\n if (this.parent.showColumnMenu && col.showColumnMenu) {\n filterIconElement = this.parent.getColumnHeaderByField(fieldName).querySelector('.e-columnmenu');\n }\n else if (col) {\n filterIconElement = this.parent.getColumnHeaderByField(fieldName).querySelector('.e-icon-filter');\n }\n if (filterIconElement) {\n filterIconElement.classList.add('e-filtered');\n }\n };\n /**\n * @hidden\n * @returns {FilterUI} returns the FilterUI\n */\n Filter.prototype.getFilterUIInfo = function () {\n return this.filterModule ? this.filterModule.getFilterUIInfo() : {};\n };\n /**\n * @param {string} field - specifies the field name\n * @returns {string} returns the operator name\n * @hidden\n */\n Filter.prototype.getOperatorName = function (field) {\n return document.getElementById(this.parent.getColumnByField(field).uid).ej2_instances[0].value;\n };\n /**\n * Renders checkbox items in Menu filter dialog.\n *\n * @returns {void}\n */\n Filter.prototype.renderCheckboxOnFilterMenu = function () {\n return this.filterModule.renderCheckBoxMenu();\n };\n return Filter;\n}());\nexport { Filter };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n// eslint-disable-next-line @typescript-eslint/triple-slash-reference\n/// \nimport { EventHandler, Property, Event, addClass, Browser, removeClass, detach } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, NotifyPropertyChanges, getValue, setValue } from '@syncfusion/ej2-base';\nimport { DropDownList, dropDownListClasses } from '../drop-down-list/drop-down-list';\nimport { Search } from '../common/incremental-search';\nimport { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';\nimport { Input } from '@syncfusion/ej2-inputs';\nimport { DataManager, Predicate, Query } from '@syncfusion/ej2-data';\nvar SPINNER_CLASS = 'e-atc-spinner-icon';\ndropDownListClasses.root = 'e-combobox';\nvar inputObject = {\n container: null,\n buttons: []\n};\n/**\n * The ComboBox component allows the user to type a value or choose an option from the list of predefined options.\n * ```html\n * \n * ```\n * ```typescript\n * let games:ComboBox = new ComboBox();\n * games.appendTo(\"#list\");\n * ```\n */\nvar ComboBox = /** @class */ (function (_super) {\n __extends(ComboBox, _super);\n /**\n * *Constructor for creating the component\n *\n * @param {ComboBoxModel} options - Specifies the ComboBox model.\n * @param {string | HTMLElement} element - Specifies the element to render as component.\n * @private\n */\n function ComboBox(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\n */\n ComboBox.prototype.preRender = function () {\n _super.prototype.preRender.call(this);\n };\n ComboBox.prototype.getLocaleName = function () {\n return 'combo-box';\n };\n ComboBox.prototype.wireEvent = function () {\n if (this.getModuleName() === 'combobox') {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.preventBlur, this);\n EventHandler.add(this.inputWrapper.container, 'blur', this.onBlurHandler, this);\n }\n if (!isNullOrUndefined(this.inputWrapper.buttons[0])) {\n EventHandler.add(this.inputWrapper.buttons[0], 'mousedown', this.dropDownClick, this);\n }\n EventHandler.add(this.inputElement, 'focus', this.targetFocus, this);\n if (!this.readonly) {\n EventHandler.add(this.inputElement, 'input', this.onInput, this);\n EventHandler.add(this.inputElement, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.inputElement, 'keydown', this.onFilterDown, this);\n EventHandler.add(this.inputElement, 'paste', this.pasteHandler, this);\n EventHandler.add(window, 'resize', this.windowResize, this);\n }\n this.bindCommonEvent();\n };\n ComboBox.prototype.preventBlur = function (e) {\n if ((!this.allowFiltering && document.activeElement !== this.inputElement &&\n !document.activeElement.classList.contains(dropDownListClasses.input) && Browser.isDevice || !Browser.isDevice)) {\n e.preventDefault();\n }\n };\n ComboBox.prototype.onBlurHandler = function (e) {\n var inputValue = this.inputElement && this.inputElement.value === '' ?\n null : this.inputElement && this.inputElement.value;\n if (!isNullOrUndefined(this.listData) && !isNullOrUndefined(inputValue) && inputValue !== this.text) {\n this.customValue(e);\n }\n _super.prototype.onBlurHandler.call(this, e);\n };\n ComboBox.prototype.targetElement = function () {\n return this.inputElement;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n ComboBox.prototype.setOldText = function (text) {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.customValue();\n this.removeSelection();\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n ComboBox.prototype.setOldValue = function (value) {\n if (this.allowCustom) {\n this.valueMuteChange(this.value);\n }\n else {\n this.valueMuteChange(null);\n }\n this.removeSelection();\n this.setHiddenValue();\n };\n ComboBox.prototype.valueMuteChange = function (value) {\n var inputValue = isNullOrUndefined(value) ? null : value.toString();\n Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);\n this.setProperties({ value: value, text: value, index: null }, true);\n this.activeIndex = this.index;\n var fields = this.fields;\n var dataItem = {};\n dataItem[fields.text] = isNullOrUndefined(value) ? null : value.toString();\n dataItem[fields.value] = isNullOrUndefined(value) ? null : value.toString();\n this.itemData = dataItem;\n this.item = null;\n if (this.previousValue !== this.value) {\n this.detachChangeEvent(null);\n }\n };\n ComboBox.prototype.updateValues = function () {\n if (!isNullOrUndefined(this.value)) {\n var li = this.getElementByValue(this.value);\n var isExistItem = !isNullOrUndefined(li) ? true : false;\n if (this.enableVirtualization && this.value) {\n var fields = (this.fields.value) ? this.fields.value : '';\n if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {\n var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));\n if (getItem && getItem.length > 0) {\n this.itemData = getItem[0];\n isExistItem = true;\n var dataItem = this.getItemData();\n if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {\n this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });\n }\n }\n }\n else {\n var getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));\n if (getItem && getItem.length > 0) {\n this.itemData = getItem[0];\n isExistItem = true;\n var dataItem = this.getItemData();\n if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {\n this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });\n }\n }\n }\n }\n if (li) {\n this.setSelection(li, null);\n }\n else if ((!this.enableVirtualization && this.allowCustom) || (this.allowCustom && this.enableVirtualization && !isExistItem)) {\n this.valueMuteChange(this.value);\n }\n else if (!this.enableVirtualization || (this.enableVirtualization && !isExistItem)) {\n this.valueMuteChange(null);\n }\n }\n else if (this.text && isNullOrUndefined(this.value)) {\n var li = this.getElementByText(this.text);\n if (li) {\n this.setSelection(li, null);\n }\n else {\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n this.customValue();\n }\n }\n else {\n this.setSelection(this.liCollections[this.activeIndex], null);\n }\n this.setHiddenValue();\n Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);\n };\n ComboBox.prototype.updateIconState = function () {\n if (this.showClearButton) {\n if (this.inputElement && this.inputElement.value !== '' && !this.readonly) {\n removeClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n else {\n addClass([this.inputWrapper.clearButton], dropDownListClasses.clearIconHide);\n }\n }\n };\n ComboBox.prototype.getAriaAttributes = function () {\n var ariaAttributes = {\n 'role': 'combobox',\n 'aria-autocomplete': 'both',\n 'aria-labelledby': this.hiddenElement.id,\n 'aria-expanded': 'false',\n 'aria-readonly': this.readonly.toString(),\n 'autocomplete': 'off',\n 'autocapitalize': 'off',\n 'spellcheck': 'false'\n };\n return ariaAttributes;\n };\n ComboBox.prototype.searchLists = function (e) {\n this.isTyped = true;\n if (this.isFiltering()) {\n _super.prototype.searchLists.call(this, e);\n if (this.ulElement && this.filterInput.value.trim() === '') {\n this.setHoverList(this.ulElement.querySelector('.' + dropDownListClasses.li));\n }\n }\n else {\n if (this.ulElement && this.inputElement.value === '' && this.preventAutoFill) {\n this.setHoverList(this.ulElement.querySelector('.' + dropDownListClasses.li));\n }\n this.incrementalSearch(e);\n }\n };\n ComboBox.prototype.getNgDirective = function () {\n return 'EJS-COMBOBOX';\n };\n ComboBox.prototype.setSearchBox = function () {\n this.filterInput = this.inputElement;\n var searchBoxContainer = (this.isFiltering() || (this.isReact && this.getModuleName() === 'combobox')) ? this.inputWrapper : inputObject;\n return searchBoxContainer;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n ComboBox.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {\n var _this = this;\n _super.prototype.onActionComplete.call(this, ulElement, list, e);\n if (this.isSelectCustom) {\n this.removeSelection();\n }\n if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped && !this.enableVirtualization) {\n setTimeout(function () {\n _this.inlineSearch();\n });\n }\n };\n ComboBox.prototype.getFocusElement = function () {\n var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();\n var selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : this.list;\n var isSelected = dataItem.text && dataItem.text.toString() === this.inputElement.value && !isNullOrUndefined(selected);\n if (isSelected) {\n return selected;\n }\n if ((Browser.isDevice && !this.isDropDownClick || !Browser.isDevice) &&\n !isNullOrUndefined(this.liCollections) && this.liCollections.length > 0) {\n var inputValue = this.inputElement.value;\n var dataSource = this.sortedData;\n var type = this.typeOfData(dataSource).typeof;\n var activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type);\n if (this.enableVirtualization && inputValue !== '' && this.getModuleName() !== 'autocomplete' && this.isTyped && !this.allowFiltering) {\n var updatingincrementalindex = false;\n if ((this.viewPortInfo.endIndex >= this.incrementalEndIndex && this.incrementalEndIndex <= this.totalItemCount) || this.incrementalEndIndex == 0) {\n updatingincrementalindex = true;\n this.incrementalStartIndex = this.incrementalEndIndex;\n if (this.incrementalEndIndex == 0) {\n this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;\n }\n else {\n this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;\n }\n this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);\n updatingincrementalindex = true;\n }\n if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {\n this.updateIncrementalView(0, this.itemCount);\n }\n activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);\n while (isNullOrUndefined(activeItem) && this.incrementalEndIndex < this.totalItemCount) {\n this.incrementalStartIndex = this.incrementalEndIndex;\n this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;\n this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);\n updatingincrementalindex = true;\n if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {\n this.updateIncrementalView(0, this.itemCount);\n }\n activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);\n if (!isNullOrUndefined(activeItem)) {\n break;\n }\n if (isNullOrUndefined(activeItem) && this.incrementalEndIndex >= this.totalItemCount) {\n this.incrementalStartIndex = 0;\n this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;\n break;\n }\n }\n if (activeItem.index) {\n if ((!(this.viewPortInfo.startIndex >= activeItem.index)) || (!(activeItem.index >= this.viewPortInfo.endIndex))) {\n var startIndex = activeItem.index - ((this.itemCount / 2) - 2) > 0 ? activeItem.index - ((this.itemCount / 2) - 2) : 0;\n var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;\n if (startIndex != this.viewPortInfo.startIndex) {\n this.updateIncrementalView(startIndex, endIndex);\n }\n }\n }\n if (!isNullOrUndefined(activeItem.item)) {\n var index_1 = this.getIndexByValue(activeItem.item.getAttribute('data-value')) - this.skeletonCount;\n if (index_1 > this.itemCount / 2) {\n var startIndex = this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) < this.totalItemCount ? this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) : this.totalItemCount;\n var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;\n this.updateIncrementalView(startIndex, endIndex);\n }\n activeItem.item = this.getElementByValue(activeItem.item.getAttribute('data-value'));\n }\n else {\n this.updateIncrementalView(0, this.itemCount);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();\n this.list.scrollTop = 0;\n }\n if (activeItem && activeItem.item) {\n activeItem.item = this.getElementByValue(activeItem.item.getAttribute('data-value'));\n }\n }\n var activeElement = activeItem.item;\n if (!isNullOrUndefined(activeElement)) {\n var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;\n var height = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);\n if (!isNaN(height) && this.getModuleName() !== 'autocomplete') {\n this.removeFocus();\n var fixedHead = this.fields.groupBy ? this.liCollections[0].offsetHeight : 0;\n if (!this.enableVirtualization) {\n this.list.scrollTop = count * height + fixedHead;\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();\n if (this.enableVirtualization && !this.fields.groupBy) {\n var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? activeElement.offsetTop + (this.virtualListInfo.startIndex * activeElement.offsetHeight) : activeElement.offsetTop;\n this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * activeElement.offsetHeight);\n }\n }\n addClass([activeElement], dropDownListClasses.focus);\n }\n }\n else {\n if (this.isSelectCustom && this.inputElement.value.trim() !== '') {\n this.removeFocus();\n if (!this.enableVirtualization) {\n this.list.scrollTop = 0;\n }\n }\n }\n return activeElement;\n }\n else {\n return null;\n }\n };\n ComboBox.prototype.setValue = function (e) {\n if (e && e.type === 'keydown' && e.action === 'enter') {\n this.removeFillSelection();\n }\n if (this.autofill && this.getModuleName() === 'combobox' && e && e.type === 'keydown' && e.action !== 'enter') {\n this.preventAutoFill = false;\n this.inlineSearch(e);\n return false;\n }\n else {\n return _super.prototype.setValue.call(this, e);\n }\n };\n ComboBox.prototype.checkCustomValue = function () {\n this.itemData = this.getDataByValue(this.value);\n var dataItem = this.getItemData();\n if (!(this.allowCustom && isNullOrUndefined(dataItem.value) && isNullOrUndefined(dataItem.text))) {\n this.setProperties({ 'value': dataItem.value }, !this.allowCustom);\n }\n };\n /**\n * Shows the spinner loader.\n *\n * @returns {void}\n\n */\n ComboBox.prototype.showSpinner = function () {\n if (isNullOrUndefined(this.spinnerElement)) {\n this.spinnerElement = (this.getModuleName() === 'autocomplete') ? (this.inputWrapper.buttons[0] ||\n this.inputWrapper.clearButton ||\n Input.appendSpan('e-input-group-icon ' + SPINNER_CLASS, this.inputWrapper.container, this.createElement)) :\n (this.inputWrapper.buttons[0] || this.inputWrapper.clearButton);\n addClass([this.spinnerElement], dropDownListClasses.disableIcon);\n createSpinner({\n target: this.spinnerElement,\n width: Browser.isDevice ? '16px' : '14px'\n }, this.createElement);\n showSpinner(this.spinnerElement);\n }\n };\n /**\n * Hides the spinner loader.\n *\n * @returns {void}\n\n */\n ComboBox.prototype.hideSpinner = function () {\n if (!isNullOrUndefined(this.spinnerElement)) {\n hideSpinner(this.spinnerElement);\n removeClass([this.spinnerElement], dropDownListClasses.disableIcon);\n if (this.spinnerElement.classList.contains(SPINNER_CLASS)) {\n detach(this.spinnerElement);\n }\n else {\n this.spinnerElement.innerHTML = '';\n }\n this.spinnerElement = null;\n }\n };\n ComboBox.prototype.setAutoFill = function (activeElement, isHover) {\n if (!isHover) {\n this.setHoverList(activeElement);\n }\n if (this.autofill && !this.preventAutoFill) {\n var currentValue = this.getTextByValue(activeElement.getAttribute('data-value')).toString();\n var currentFillValue = this.getFormattedValue(activeElement.getAttribute('data-value'));\n if (this.getModuleName() === 'combobox') {\n if (!this.isSelected && this.previousValue !== currentFillValue) {\n this.updateSelectedItem(activeElement, null);\n this.isSelected = true;\n this.previousValue = this.getFormattedValue(activeElement.getAttribute('data-value'));\n }\n else {\n this.updateSelectedItem(activeElement, null, true);\n }\n }\n if (!this.isAndroidAutoFill(currentValue)) {\n this.setAutoFillSelection(currentValue, isHover);\n }\n }\n };\n ComboBox.prototype.isAndroidAutoFill = function (value) {\n if (Browser.isAndroid) {\n var currentPoints = this.getSelectionPoints();\n var prevEnd = this.prevSelectPoints.end;\n var curEnd = currentPoints.end;\n var prevStart = this.prevSelectPoints.start;\n var curStart = currentPoints.start;\n if (prevEnd !== 0 && ((prevEnd === value.length && prevStart === value.length) ||\n (prevStart > curStart && prevEnd > curEnd) || (prevEnd === curEnd && prevStart === curStart))) {\n return true;\n }\n else {\n return false;\n }\n }\n else {\n return false;\n }\n };\n ComboBox.prototype.clearAll = function (e, property) {\n if (isNullOrUndefined(property) || (!isNullOrUndefined(property) && isNullOrUndefined(property.dataSource))) {\n _super.prototype.clearAll.call(this, e);\n }\n if (this.isFiltering() && !isNullOrUndefined(e) && e.target === this.inputWrapper.clearButton) {\n this.searchLists(e);\n }\n };\n ComboBox.prototype.isSelectFocusItem = function (element) {\n return !isNullOrUndefined(element);\n };\n ComboBox.prototype.inlineSearch = function (e) {\n var isKeyNavigate = (e && (e.action === 'down' || e.action === 'up' ||\n e.action === 'home' || e.action === 'end' || e.action === 'pageUp' || e.action === 'pageDown'));\n var activeElement = isKeyNavigate ? this.liCollections[this.activeIndex] : this.getFocusElement();\n if (!isNullOrUndefined(activeElement)) {\n if (!isKeyNavigate) {\n var value = this.getFormattedValue(activeElement.getAttribute('data-value'));\n this.activeIndex = this.getIndexByValue(value);\n this.activeIndex = !isNullOrUndefined(this.activeIndex) ? this.activeIndex : null;\n }\n this.preventAutoFill = this.inputElement.value === '' ? false : this.preventAutoFill;\n this.setAutoFill(activeElement, isKeyNavigate);\n }\n else if (this.inputElement.value === '') {\n this.activeIndex = null;\n if (!isNullOrUndefined(this.list)) {\n if (!this.enableVirtualization) {\n this.list.scrollTop = 0;\n }\n var focusItem = this.list.querySelector('.' + dropDownListClasses.li);\n this.setHoverList(focusItem);\n }\n }\n else {\n this.activeIndex = null;\n this.removeSelection();\n if (this.liCollections && this.liCollections.length > 0 && !this.isCustomFilter) {\n this.removeFocus();\n }\n }\n };\n ComboBox.prototype.incrementalSearch = function (e) {\n this.showPopup(e);\n if (!isNullOrUndefined(this.listData)) {\n this.inlineSearch(e);\n e.preventDefault();\n }\n };\n ComboBox.prototype.setAutoFillSelection = function (currentValue, isKeyNavigate) {\n if (isKeyNavigate === void 0) { isKeyNavigate = false; }\n var selection = this.getSelectionPoints();\n var value = this.inputElement.value.substr(0, selection.start);\n if (value && (value.toLowerCase() === currentValue.substr(0, selection.start).toLowerCase())) {\n var inputValue = value + currentValue.substr(value.length, currentValue.length);\n Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);\n this.inputElement.setSelectionRange(selection.start, this.inputElement.value.length);\n }\n else if (isKeyNavigate) {\n Input.setValue(currentValue, this.inputElement, this.floatLabelType, this.showClearButton);\n this.inputElement.setSelectionRange(0, this.inputElement.value.length);\n }\n };\n ComboBox.prototype.getValueByText = function (text) {\n return _super.prototype.getValueByText.call(this, text, true, this.ignoreAccent);\n };\n ComboBox.prototype.unWireEvent = function () {\n if (this.getModuleName() === 'combobox') {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.preventBlur);\n EventHandler.remove(this.inputWrapper.container, 'blur', this.onBlurHandler);\n }\n if (!isNullOrUndefined(this.inputWrapper.buttons[0])) {\n EventHandler.remove(this.inputWrapper.buttons[0], 'mousedown', this.dropDownClick);\n }\n if (this.inputElement) {\n EventHandler.remove(this.inputElement, 'focus', this.targetFocus);\n if (!this.readonly) {\n EventHandler.remove(this.inputElement, 'input', this.onInput);\n EventHandler.remove(this.inputElement, 'keyup', this.onFilterUp);\n EventHandler.remove(this.inputElement, 'keydown', this.onFilterDown);\n EventHandler.remove(this.inputElement, 'paste', this.pasteHandler);\n EventHandler.remove(window, 'resize', this.windowResize);\n }\n }\n this.unBindCommonEvent();\n };\n ComboBox.prototype.setSelection = function (li, e) {\n _super.prototype.setSelection.call(this, li, e);\n if (!isNullOrUndefined(li) && !this.autofill && !this.isDropDownClick) {\n this.removeFocus();\n }\n };\n ComboBox.prototype.selectCurrentItem = function (e) {\n var li;\n if (this.isPopupOpen) {\n if (this.isSelected) {\n li = this.list.querySelector('.' + dropDownListClasses.selected);\n }\n else {\n li = this.list.querySelector('.' + dropDownListClasses.focus);\n }\n if (li) {\n this.setSelection(li, e);\n this.isTyped = false;\n }\n if (this.isSelected) {\n this.isSelectCustom = false;\n this.onChangeEvent(e);\n }\n }\n if (e.action === 'enter' && this.inputElement.value.trim() === '') {\n this.clearAll(e);\n }\n else if (this.isTyped && !this.isSelected && isNullOrUndefined(li)) {\n this.customValue(e);\n }\n this.hidePopup(e);\n };\n ComboBox.prototype.setHoverList = function (li) {\n this.removeSelection();\n if (this.isValidLI(li) && !li.classList.contains(dropDownListClasses.selected)) {\n this.removeFocus();\n li.classList.add(dropDownListClasses.focus);\n }\n };\n ComboBox.prototype.targetFocus = function (e) {\n if (Browser.isDevice && !this.allowFiltering) {\n this.preventFocus = false;\n }\n this.onFocus(e);\n Input.calculateWidth(this.inputElement, this.inputWrapper.container);\n };\n ComboBox.prototype.dropDownClick = function (e) {\n e.preventDefault();\n if (Browser.isDevice && !this.isFiltering()) {\n this.preventFocus = true;\n }\n _super.prototype.dropDownClick.call(this, e);\n };\n ComboBox.prototype.customValue = function (e) {\n var _this = this;\n var value = this.getValueByText(this.inputElement.value);\n if (!this.allowCustom && this.inputElement.value !== '') {\n var previousValue = this.previousValue;\n var currentValue = this.value;\n this.setProperties({ value: value });\n if (isNullOrUndefined(this.value)) {\n Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);\n }\n if (this.autofill && previousValue === this.value && currentValue !== this.value) {\n this.onChangeEvent(null);\n }\n }\n else if (this.inputElement.value.trim() !== '') {\n var previousValue_1 = this.value;\n if (isNullOrUndefined(value)) {\n var value_1 = this.inputElement.value === '' ? null : this.inputElement.value;\n // eslint-disable-next-line max-len\n var eventArgs = { text: value_1, item: {} };\n if (!this.initial) {\n this.trigger('customValueSpecifier', eventArgs, function (eventArgs) {\n _this.updateCustomValueCallback(value_1, eventArgs, previousValue_1, e);\n });\n }\n else {\n this.updateCustomValueCallback(value_1, eventArgs, previousValue_1);\n }\n }\n else {\n this.isSelectCustom = false;\n this.setProperties({ value: value });\n if (previousValue_1 !== this.value) {\n this.onChangeEvent(e);\n }\n }\n }\n else if (this.allowCustom) {\n this.isSelectCustom = true;\n }\n };\n ComboBox.prototype.updateCustomValueCallback = function (value, eventArgs, previousValue, e) {\n var fields = this.fields;\n var item = eventArgs.item;\n var dataItem = {};\n if (item && getValue(fields.text, item) && getValue(fields.value, item)) {\n dataItem = item;\n }\n else {\n setValue(fields.text, value, dataItem);\n setValue(fields.value, value, dataItem);\n }\n this.itemData = dataItem;\n var changeData = {\n text: getValue(fields.text, this.itemData),\n value: getValue(fields.value, this.itemData),\n index: null\n };\n this.setProperties(changeData, true);\n this.setSelection(null, null);\n this.isSelectCustom = true;\n if (previousValue !== this.value) {\n this.onChangeEvent(e);\n }\n };\n /**\n * Dynamically change the value of properties.\n *\n * @param {ComboBoxModel} newProp - Returns the dynamic property value of the component.\n * @param {ComboBoxModel} oldProp - Returns the previous property value of the component.\n * @private\n * @returns {void}\n */\n ComboBox.prototype.onPropertyChanged = function (newProp, oldProp) {\n if (this.getModuleName() === 'combobox') {\n this.checkData(newProp);\n this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);\n }\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'readonly':\n Input.setReadonly(this.readonly, this.inputElement);\n if (this.readonly) {\n EventHandler.remove(this.inputElement, 'input', this.onInput);\n EventHandler.remove(this.inputElement, 'keyup', this.onFilterUp);\n EventHandler.remove(this.inputElement, 'keydown', this.onFilterDown);\n }\n else {\n EventHandler.add(this.inputElement, 'input', this.onInput, this);\n EventHandler.add(this.inputElement, 'keyup', this.onFilterUp, this);\n EventHandler.add(this.inputElement, 'keydown', this.onFilterDown, this);\n }\n this.setReadOnly();\n break;\n case 'allowFiltering':\n this.setSearchBox();\n if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {\n _super.prototype.renderList.call(this);\n }\n break;\n case 'allowCustom':\n break;\n default: {\n // eslint-disable-next-line max-len\n var comboProps = this.getPropObject(prop, newProp, oldProp);\n _super.prototype.onPropertyChanged.call(this, comboProps.newProperty, comboProps.oldProperty);\n if (this.isFiltering() && prop === 'dataSource' && isNullOrUndefined(this.list) && this.itemTemplate &&\n this.getModuleName() === 'combobox') {\n _super.prototype.renderList.call(this);\n }\n break;\n }\n }\n }\n };\n /**\n * To initialize the control rendering.\n *\n * @private\n * @returns {void}\n */\n ComboBox.prototype.render = function () {\n _super.prototype.render.call(this);\n this.setSearchBox();\n if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {\n _super.prototype.renderList.call(this);\n }\n this.renderComplete();\n };\n /**\n * Return the module name of this component.\n *\n * @private\n * @returns {string} Return the module name of this component.\n */\n ComboBox.prototype.getModuleName = function () {\n return 'combobox';\n };\n /**\n * Adds a new item to the combobox popup list. By default, new item appends to the list as the last item,\n * but you can insert based on the index parameter.\n *\n * @param { Object[] } items - Specifies an array of JSON data or a JSON data.\n * @param { number } itemIndex - Specifies the index to place the newly added item in the popup list.\n * @returns {void}\n\n */\n ComboBox.prototype.addItem = function (items, itemIndex) {\n _super.prototype.addItem.call(this, items, itemIndex);\n };\n /**\n * To filter the data from given data source by using query\n *\n * @param {Object[] | DataManager } dataSource - Set the data source to filter.\n * @param {Query} query - Specify the query to filter the data.\n * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.\n * @returns {void}\n\n */\n ComboBox.prototype.filter = function (dataSource, query, fields) {\n _super.prototype.filter.call(this, dataSource, query, fields);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Opens the popup that displays the list of items.\n *\n * @returns {void}\n\n */\n ComboBox.prototype.showPopup = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n _super.prototype.showPopup.call(this, e);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Hides the popup if it is in open state.\n *\n * @returns {void}\n\n */\n ComboBox.prototype.hidePopup = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n var inputValue = this.inputElement && this.inputElement.value === '' ? null\n : this.inputElement && this.inputElement.value;\n if (!isNullOrUndefined(this.listData)) {\n var isEscape = this.isEscapeKey;\n if (this.isEscapeKey) {\n Input.setValue(this.typedString, this.inputElement, this.floatLabelType, this.showClearButton);\n this.isEscapeKey = false;\n }\n if (this.autofill) {\n this.removeFillSelection();\n }\n var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();\n var selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : null;\n if (this.inputElement && dataItem.text === this.inputElement.value && !isNullOrUndefined(selected)) {\n if (this.isSelected) {\n this.onChangeEvent(e);\n this.isSelectCustom = false;\n }\n _super.prototype.hidePopup.call(this, e);\n return;\n }\n if (this.getModuleName() === 'combobox' && this.inputElement.value.trim() !== '') {\n var dataSource = this.sortedData;\n var type = this.typeOfData(dataSource).typeof;\n var searchItem = Search(this.inputElement.value, this.liCollections, 'Equal', true, dataSource, this.fields, type);\n this.selectedLI = searchItem.item;\n if (isNullOrUndefined(searchItem.index)) {\n searchItem.index = Search(this.inputElement.value, this.liCollections, 'StartsWith', true, dataSource, this.fields, type).index;\n }\n this.activeIndex = searchItem.index;\n if (!isNullOrUndefined(this.selectedLI)) {\n this.updateSelectedItem(this.selectedLI, null, true);\n }\n else if (isEscape) {\n this.isSelectCustom = true;\n this.removeSelection();\n }\n }\n if (!this.isEscapeKey && this.isTyped && !this.isInteracted) {\n this.customValue(e);\n }\n }\n if (isNullOrUndefined(this.listData) && this.allowCustom && !isNullOrUndefined(inputValue) && inputValue !== this.value) {\n this.customValue();\n }\n _super.prototype.hidePopup.call(this, e);\n };\n /**\n * Sets the focus to the component for interaction.\n *\n * @returns {void}\n */\n ComboBox.prototype.focusIn = function () {\n if (!this.enabled) {\n return;\n }\n if (Browser.isDevice && !this.isFiltering()) {\n this.preventFocus = true;\n }\n _super.prototype.focusIn.call(this);\n };\n /**\n * Allows you to clear the selected values from the component.\n *\n * @returns {void}\n\n */\n ComboBox.prototype.clear = function () {\n this.value = null;\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-param */\n /**\n * Moves the focus from the component if the component is already focused.\n *\n * @returns {void}\n\n */\n ComboBox.prototype.focusOut = function (e) {\n /* eslint-enable valid-jsdoc, jsdoc/require-param */\n _super.prototype.focusOut.call(this, e);\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Gets all the list items bound on this component.\n *\n * @returns {Element[]}\n\n */\n ComboBox.prototype.getItems = function () {\n return _super.prototype.getItems.call(this);\n };\n /**\n * Gets the data Object that matches the given value.\n *\n * @param { string | number } value - Specifies the value of the list item.\n * @returns {Object}\n\n */\n ComboBox.prototype.getDataByValue = function (value) {\n return _super.prototype.getDataByValue.call(this, value);\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n ComboBox.prototype.renderHightSearch = function () {\n // update high light search\n };\n __decorate([\n Property(false)\n ], ComboBox.prototype, \"autofill\", void 0);\n __decorate([\n Property(true)\n ], ComboBox.prototype, \"allowCustom\", void 0);\n __decorate([\n Property({})\n ], ComboBox.prototype, \"htmlAttributes\", void 0);\n __decorate([\n Property(false)\n ], ComboBox.prototype, \"allowFiltering\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"query\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"index\", void 0);\n __decorate([\n Property(true)\n ], ComboBox.prototype, \"showClearButton\", void 0);\n __decorate([\n Property(false)\n ], ComboBox.prototype, \"enableRtl\", void 0);\n __decorate([\n Event()\n ], ComboBox.prototype, \"customValueSpecifier\", void 0);\n __decorate([\n Event()\n ], ComboBox.prototype, \"filtering\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"valueTemplate\", void 0);\n __decorate([\n Property('Never')\n ], ComboBox.prototype, \"floatLabelType\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"filterBarPlaceholder\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"cssClass\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"headerTemplate\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"placeholder\", void 0);\n __decorate([\n Property('100%')\n ], ComboBox.prototype, \"width\", void 0);\n __decorate([\n Property('300px')\n ], ComboBox.prototype, \"popupHeight\", void 0);\n __decorate([\n Property('100%')\n ], ComboBox.prototype, \"popupWidth\", void 0);\n __decorate([\n Property(false)\n ], ComboBox.prototype, \"readonly\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"text\", void 0);\n __decorate([\n Property(null)\n ], ComboBox.prototype, \"value\", void 0);\n ComboBox = __decorate([\n NotifyPropertyChanges\n ], ComboBox);\n return ComboBox;\n}(DropDownList));\nexport { ComboBox };\n","import { isNullOrUndefined, extend, addClass, removeClass } from '@syncfusion/ej2-base';\nimport { attributes as addAttributes } from '@syncfusion/ej2-base';\nimport { rowDataBound, queryCellInfo } from '../base/constant';\nimport { setStyleAndAttributes, getObject, extendObjWithFn, applyStickyLeftRightPosition, groupCaptionRowLeftRightPos, resetColspanGroupCaption } from '../base/util';\nimport { CellType } from '../base/enum';\nimport { CellMergeRender } from './cell-merge-renderer';\nimport * as literals from '../base/string-literals';\n/**\n * RowRenderer class which responsible for building row content.\n *\n * @hidden\n */\nvar RowRenderer = /** @class */ (function () {\n function RowRenderer(serviceLocator, cellType, parent) {\n this.isSpan = false;\n this.cellType = cellType;\n this.serviceLocator = serviceLocator;\n this.parent = parent;\n this.element = this.parent.createElement('tr', { attrs: { role: 'row' } });\n }\n /* eslint-disable */\n /**\n * Function to render the row content based on Column[] and data.\n *\n * @param {Row} row - specifies the row\n * @param {Column[]} columns - specifies the columns\n * @param {Object} attributes - specifies the attributes\n * @param {string} rowTemplate - specifies the rowTemplate\n * @param {Element} cloneNode - specifies the cloneNode\n * @returns {Element} returns the element\n */\n /* eslint-enable */\n RowRenderer.prototype.render = function (row, columns, attributes, rowTemplate, cloneNode) {\n return this.refreshRow(row, columns, attributes, rowTemplate, cloneNode);\n };\n /* eslint-disable */\n /**\n * Function to refresh the row content based on Column[] and data.\n *\n * @param {Row} row - specifies the row\n * @param {Column[]} columns - specifies the column\n * @param {boolean} isChanged - specifies isChanged\n * @param {Object} attributes - specifies the attributes\n * @param {string} rowTemplate - specifies the rowTemplate\n * @returns {void}\n */\n /* eslint-enable */\n RowRenderer.prototype.refresh = function (row, columns, isChanged, attributes, rowTemplate) {\n var _this = this;\n if (isChanged) {\n row.data = extendObjWithFn({}, row.changes);\n this.refreshMergeCells(row);\n }\n var node = this.parent.element.querySelector('[data-uid=' + row.uid + ']');\n var tr = this.refreshRow(row, columns, attributes, rowTemplate, null, isChanged);\n var cells = [].slice.call(tr.cells);\n var tempCells = [].slice.call(node.querySelectorAll('.e-templatecell'));\n if (this.parent.isReact && tempCells.length) {\n var _loop_1 = function (col) {\n if (col.template) {\n setTimeout(function () {\n _this.parent.refreshReactColumnTemplateByUid(col.uid, true);\n }, 0);\n return \"break\";\n }\n };\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var col = columns_1[_i];\n var state_1 = _loop_1(col);\n if (state_1 === \"break\")\n break;\n }\n }\n var attr = [].slice.call(tr.attributes);\n attr.map(function (item) {\n node.setAttribute(item['name'], item['value']);\n });\n node.innerHTML = '';\n for (var _a = 0, cells_1 = cells; _a < cells_1.length; _a++) {\n var cell = cells_1[_a];\n node.appendChild(cell);\n }\n };\n // tslint:disable-next-line:max-func-body-length\n RowRenderer.prototype.refreshRow = function (row, columns, attributes, rowTemplate, cloneNode, isEdit) {\n var tr = !isNullOrUndefined(cloneNode) ? cloneNode : this.element.cloneNode();\n var rowArgs = { data: row.data };\n var cellArgs = { data: row.data };\n var chekBoxEnable = this.parent.getColumns().filter(function (col) { return col.type === 'checkbox' && col.field; })[0];\n var value = false;\n if (chekBoxEnable) {\n value = getObject(chekBoxEnable.field, rowArgs.data);\n }\n var selIndex = this.parent.getSelectedRowIndexes();\n if (row.isDataRow) {\n row.isSelected = selIndex.indexOf(row.index) > -1 || value;\n }\n if (row.isDataRow && this.parent.isCheckBoxSelection\n && this.parent.checkAllRows === 'Check' && (this.parent.enableVirtualization || this.parent.enableInfiniteScrolling)) {\n row.isSelected = true;\n if (selIndex.indexOf(row.index) === -1) {\n selIndex.push(row.index);\n }\n }\n this.buildAttributeFromRow(tr, row);\n addAttributes(tr, extend({}, attributes, {}));\n setStyleAndAttributes(tr, row.attributes);\n var cellRendererFact = this.serviceLocator.getService('cellRendererFactory');\n var _loop_2 = function (i, len) {\n var cell = row.cells[parseInt(i.toString(), 10)];\n cell.isSelected = row.isSelected;\n cell.isColumnSelected = cell.column.isSelected;\n var cellRenderer = cellRendererFact.getCellRenderer(row.cells[parseInt(i.toString(), 10)].cellType\n || CellType.Data);\n var attrs = { 'index': !isNullOrUndefined(row.index) ? row.index.toString() : '' };\n if (row.isExpand && row.cells[parseInt(i.toString(), 10)].cellType === CellType.DetailExpand) {\n attrs['class'] = this_1.parent.isPrinting ? 'e-detailrowcollapse' : 'e-detailrowexpand';\n }\n var td = cellRenderer.render(row.cells[parseInt(i.toString(), 10)], row.data, attrs, row.isExpand, isEdit);\n if (row.cells[parseInt(i.toString(), 10)].cellType !== CellType.Filter) {\n if (row.cells[parseInt(i.toString(), 10)].cellType === CellType.Data\n || row.cells[parseInt(i.toString(), 10)].cellType === CellType.CommandColumn) {\n var isReactChild = this_1.parent.parentDetails && this_1.parent.parentDetails.parentInstObj &&\n this_1.parent.parentDetails.parentInstObj.isReact;\n if (((this_1.parent.isReact && this_1.parent.requireTemplateRef) || (isReactChild &&\n this_1.parent.parentDetails.parentInstObj.requireTemplateRef)) && cell.isTemplate) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var thisRef_1 = this_1;\n thisRef_1.parent.renderTemplates(function () {\n if (typeof (cell.column.template) !== 'string') {\n var ariaAttr = td.getAttribute('aria-label');\n td.setAttribute('aria-label', td.innerText + ariaAttr);\n }\n thisRef_1.parent.trigger(queryCellInfo, extend(cellArgs, {\n cell: td, column: cell.column, colSpan: 1,\n rowSpan: 1, foreignKeyData: row.cells[parseInt(i.toString(), 10)].foreignKeyData,\n requestType: thisRef_1.parent.requestTypeAction\n }));\n });\n }\n else {\n this_1.parent.trigger(queryCellInfo, extend(cellArgs, {\n cell: td, column: cell.column, colSpan: 1,\n rowSpan: 1, foreignKeyData: row.cells[parseInt(i.toString(), 10)].foreignKeyData,\n requestType: this_1.parent.requestTypeAction\n }));\n }\n var isRowSpanned = false;\n if (row.index > 0 && this_1.isSpan) {\n var rowsObject = this_1.parent.getRowsObject();\n var prevRowCells = this_1.parent.groupSettings.columns.length > 0 &&\n !rowsObject[row.index - 1].isDataRow ? rowsObject[row.index].cells : rowsObject[row.index - 1].cells;\n var uid_1 = 'uid';\n var prevRowCell = prevRowCells.filter(function (cell) {\n return cell.column.uid === row.cells[parseInt(i.toString(), 10)].column[\"\" + uid_1];\n })[0];\n isRowSpanned = prevRowCell.isRowSpanned ? prevRowCell.isRowSpanned : prevRowCell.rowSpanRange > 1;\n }\n if (cellArgs.colSpan > 1 || row.cells[parseInt(i.toString(), 10)].cellSpan > 1 || cellArgs.rowSpan > 1\n || isRowSpanned) {\n this_1.isSpan = true;\n var cellMerge = new CellMergeRender(this_1.serviceLocator, this_1.parent);\n td = cellMerge.render(cellArgs, row, i, td);\n }\n }\n if (!row.cells[parseInt(i.toString(), 10)].isSpanned) {\n tr.appendChild(td);\n }\n }\n };\n var this_1 = this;\n for (var i = 0, len = row.cells.length; i < len; i++) {\n _loop_2(i, len);\n }\n var emptyColspan = 0;\n if (this.parent.groupSettings.columns.length && this.parent.getFrozenLeftColumnsCount()) {\n if (tr.classList.contains('e-groupcaptionrow')) {\n var freezeCells = [].slice.call(tr.querySelectorAll('.e-leftfreeze,.e-unfreeze,.e-rightfreeze,.e-fixedfreeze,.e-freezerightborder,.e-freezeleftborder'));\n if (freezeCells.length) {\n removeClass(freezeCells, ['e-leftfreeze', 'e-unfreeze', 'e-rightfreeze', 'e-fixedfreeze', 'e-freezerightborder', 'e-freezeleftborder']);\n }\n if (tr.querySelector('.e-summarycell')) {\n groupCaptionRowLeftRightPos(tr, this.parent);\n }\n else {\n for (var j = 0; j < tr.childNodes.length; j++) {\n var td = tr.childNodes[parseInt(j.toString(), 10)];\n td.classList.add('e-leftfreeze');\n applyStickyLeftRightPosition(td, j * 30, this.parent.enableRtl, 'Left');\n if (td.classList.contains('e-groupcaption')) {\n var oldColspan = parseInt(td.getAttribute('colspan'), 10);\n var colspan = resetColspanGroupCaption(this.parent, j);\n td.setAttribute('colspan', colspan.toString());\n emptyColspan = oldColspan - colspan;\n }\n }\n if (emptyColspan) {\n var td = this.parent.createElement('TD', {\n className: 'e-groupcaption',\n attrs: { colspan: emptyColspan.toString(), id: this.parent.element.id + 'captioncell', tabindex: '-1' }\n });\n tr.appendChild(td);\n }\n }\n }\n if (tr.querySelectorAll('.e-leftfreeze').length &&\n (tr.querySelectorAll('.e-indentcell').length || tr.querySelectorAll('.e-grouptopleftcell').length)) {\n var td = tr.querySelectorAll('.e-indentcell, .e-grouptopleftcell');\n for (var i = 0; i < td.length; i++) {\n td[parseInt(i.toString(), 10)].classList.add('e-leftfreeze');\n applyStickyLeftRightPosition(td[parseInt(i.toString(), 10)], i * 30, this.parent.enableRtl, 'Left');\n }\n }\n }\n var args = { row: tr, rowHeight: this.parent.rowHeight };\n if (row.isDataRow) {\n var eventArg_1 = extend(rowArgs, args);\n eventArg_1.isSelectable = true;\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n var cellTemplate = eventArg_1.row.querySelectorAll('.e-templatecell');\n if (((this.parent.isReact && this.parent.requireTemplateRef) || (isReactChild &&\n this.parent.parentDetails.parentInstObj.requireTemplateRef)) && cellTemplate.length) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var thisRef_2 = this;\n thisRef_2.parent.renderTemplates(function () {\n thisRef_2.parent.trigger(rowDataBound, eventArg_1);\n if (!eventArg_1.isSelectable) {\n row.isSelectable = eventArg_1.isSelectable;\n thisRef_2.disableRowSelection(thisRef_2, row, args, eventArg_1);\n }\n });\n }\n else {\n this.parent.trigger(rowDataBound, eventArg_1);\n }\n row.isSelectable = eventArg_1.isSelectable;\n var isDraggable = this.parent.isRowDragable();\n if (this.parent.allowPaging && this.parent.selectionSettings.persistSelection) {\n var primaryKey_1 = this.parent.getPrimaryKeyFieldNames()[0];\n var pKey_1 = row.data ? row.data[\"\" + primaryKey_1] : null;\n var SelectedRecords = eventArg_1.isSelectable ? this.parent.partialSelectedRecords :\n this.parent.disableSelectedRecords;\n if (!SelectedRecords.some(function (data) { return data[\"\" + primaryKey_1] === pKey_1; })) {\n SelectedRecords.push(row.data);\n }\n }\n if (!eventArg_1.isSelectable) {\n this.disableRowSelection(this, row, args, eventArg_1);\n }\n if (this.parent.childGrid || isDraggable || this.parent.detailTemplate) {\n var td = tr.querySelectorAll('.e-rowcell:not(.e-hide)')[0];\n if (td) {\n td.classList.add('e-detailrowvisible');\n }\n }\n }\n if (this.parent.enableVirtualization) {\n rowArgs.rowHeight = this.parent.rowHeight;\n }\n if (rowArgs.rowHeight) {\n tr.style.height = rowArgs.rowHeight + 'px';\n }\n else if (this.parent.rowHeight && (tr.querySelector('.e-headercell') || tr.querySelector('.e-groupcaption'))) {\n tr.style.height = this.parent.rowHeight + 'px';\n }\n if (row.cssClass) {\n tr.classList.add(row.cssClass);\n }\n if (row.lazyLoadCssClass) {\n tr.classList.add(row.lazyLoadCssClass);\n }\n if (this.parent.rowRenderingMode === 'Vertical' && this.parent.allowTextWrap && (this.parent.textWrapSettings.wrapMode === 'Header'\n || this.parent.textWrapSettings.wrapMode === 'Both')) {\n tr.classList.add('e-verticalwrap');\n }\n var vFTable = this.parent.enableColumnVirtualization;\n if (!vFTable && this.parent.aggregates.length && this.parent.element.scrollHeight > this.parent.height) {\n for (var i = 0; i < this.parent.aggregates.length; i++) {\n var property = 'properties';\n var column = 'columns';\n if (this.parent.aggregates[parseInt(i.toString(), 10)][\"\" + property][\"\" + column][0].footerTemplate) {\n var summarycell = [].slice.call(tr.getElementsByClassName('e-summarycell'));\n if (summarycell.length) {\n var lastSummaryCell = (summarycell[summarycell.length - 1]);\n addClass([lastSummaryCell], ['e-lastsummarycell']);\n var firstSummaryCell = (summarycell[0]);\n addClass([firstSummaryCell], ['e-firstsummarycell']);\n }\n }\n }\n }\n return tr;\n };\n RowRenderer.prototype.disableRowSelection = function (thisRef, row, args, eventArg) {\n var selIndex = this.parent.getSelectedRowIndexes();\n this.parent.selectionModule.isPartialSelection = true;\n row.isSelected = false;\n var selRowIndex = selIndex.indexOf(row.index);\n if (selRowIndex > -1) {\n selIndex.splice(selRowIndex, 1);\n }\n var chkBox = args.row.querySelectorAll('.e-rowcell.e-gridchkbox');\n var isDrag = eventArg.row.querySelector('.e-rowdragdrop');\n var cellIdx = thisRef.parent.groupSettings.columns.length + (isDrag || thisRef.parent.isDetail() ? 1 : 0);\n for (var i = 0; i < chkBox.length; i++) {\n chkBox[parseInt(i.toString(), 10)].firstElementChild.classList.add('e-checkbox-disabled');\n chkBox[parseInt(i.toString(), 10)].querySelector('.e-frame').classList.remove('e-check');\n }\n if (row.cells.length) {\n for (var i = cellIdx; i < row.cells.length; i++) {\n var cell = eventArg.row.querySelector('.e-rowcell[data-colindex=\"' + row.cells[parseInt(i.toString(), 10)].index + '\"]');\n if (cell) {\n removeClass([cell], ['e-selectionbackground', 'e-active']);\n }\n }\n }\n if (isDrag) {\n removeClass([isDrag], ['e-selectionbackground', 'e-active']);\n }\n };\n ;\n RowRenderer.prototype.refreshMergeCells = function (row) {\n for (var _i = 0, _a = row.cells; _i < _a.length; _i++) {\n var cell = _a[_i];\n cell.isSpanned = false;\n }\n return row;\n };\n /* eslint-disable */\n /**\n * Function to check and add alternative row css class.\n *\n * @param {Element} tr - specifies the tr element\n * @param {Row} row - specifies the row\n * @returns {void}\n */\n /* eslint-enable */\n RowRenderer.prototype.buildAttributeFromRow = function (tr, row) {\n var attr = {};\n var prop = { 'rowindex': literals.dataRowIndex, 'dataUID': 'data-uid', 'ariaSelected': 'aria-selected' };\n var classes = [];\n if (row.isDataRow) {\n classes.push(literals.row);\n }\n if (row.isAltRow) {\n classes.push('e-altrow');\n }\n if (row.isCaptionRow) {\n classes.push('e-groupcaptionrow');\n }\n if (row.isAggregateRow && row.parentUid) {\n classes.push('e-groupfooterrow');\n }\n if (!isNullOrUndefined(row.index)) {\n attr[literals.ariaRowIndex] = row.index + 1;\n attr[prop.rowindex] = row.index;\n }\n if (row.rowSpan) {\n attr.rowSpan = row.rowSpan;\n }\n if (row.uid) {\n attr[prop.dataUID] = row.uid;\n }\n if (row.isSelected) {\n attr[prop.ariaSelected] = true;\n }\n if (row.visible === false) {\n classes.push('e-hide');\n }\n attr.class = classes;\n setStyleAndAttributes(tr, attr);\n };\n return RowRenderer;\n}());\nexport { RowRenderer };\n","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProductSpecificationMain.vue?vue&type=style&index=0&id=1bfa8f32&prod&lang=css\"","import { isNullOrUndefined, getValue, setValue } from '@syncfusion/ej2-base';\nimport { Row } from '../models/row';\nimport { CellType } from '../base/enum';\nimport { Cell } from '../models/cell';\nimport { getUid } from '../base/util';\nimport { getForeignData } from '../../grid/base/util';\nimport * as events from '../base/constant';\n/**\n * RowModelGenerator is used to generate grid data rows.\n *\n * @hidden\n */\nvar RowModelGenerator = /** @class */ (function () {\n /**\n * Constructor for header renderer module\n *\n * @param {IGrid} parent - specifies the IGrid\n */\n function RowModelGenerator(parent) {\n this.parent = parent;\n }\n RowModelGenerator.prototype.generateRows = function (data, args) {\n var rows = [];\n var startIndex = this.parent.enableVirtualization && args ? args.startIndex : 0;\n startIndex = this.parent.enableInfiniteScrolling && args ? this.getInfiniteIndex(args) : startIndex;\n if (this.parent.enableImmutableMode && args && args.startIndex) {\n startIndex = args.startIndex;\n }\n for (var i = 0, len = Object.keys(data).length; i < len; i++, startIndex++) {\n rows[parseInt(i.toString(), 10)] = this.generateRow(data[parseInt(i.toString(), 10)], startIndex);\n }\n return rows;\n };\n RowModelGenerator.prototype.ensureColumns = function () {\n //TODO: generate dummy column for group, detail here;\n var cols = [];\n if (this.parent.detailTemplate || this.parent.childGrid) {\n var args = {};\n this.parent.notify(events.detailIndentCellInfo, args);\n cols.push(this.generateCell(args, null, CellType.DetailExpand));\n }\n if (this.parent.isRowDragable()) {\n cols.push(this.generateCell({}, null, CellType.RowDragIcon));\n }\n return cols;\n };\n RowModelGenerator.prototype.generateRow = function (data, index, cssClass, indent, pid, tIndex, parentUid) {\n var options = {};\n options.foreignKeyData = {};\n options.uid = getUid('grid-row');\n options.data = data;\n options.index = index;\n options.indent = indent;\n options.tIndex = tIndex;\n options.isDataRow = true;\n options.parentGid = pid;\n options.parentUid = parentUid;\n if (this.parent.isPrinting) {\n if (this.parent.hierarchyPrintMode === 'All') {\n options.isExpand = true;\n }\n else if (this.parent.hierarchyPrintMode === 'Expanded' && this.parent.expandedRows && this.parent.expandedRows[parseInt(index.toString(), 10)]) {\n options.isExpand = this.parent.expandedRows[parseInt(index.toString(), 10)].isExpand;\n }\n }\n options.cssClass = cssClass;\n options.isAltRow = this.parent.enableAltRow ? index % 2 !== 0 : false;\n options.isAltRow = this.parent.enableAltRow ? index % 2 !== 0 : false;\n options.isSelected = this.parent.getSelectedRowIndexes().indexOf(index) > -1;\n this.refreshForeignKeyRow(options);\n var cells = this.ensureColumns();\n var row = new Row(options, this.parent);\n row.cells = this.parent.getFrozenMode() === 'Right' ? this.generateCells(options).concat(cells)\n : cells.concat(this.generateCells(options));\n return row;\n };\n RowModelGenerator.prototype.refreshForeignKeyRow = function (options) {\n var foreignKeyColumns = this.parent.getForeignKeyColumns();\n for (var i = 0; i < foreignKeyColumns.length; i++) {\n setValue(foreignKeyColumns[parseInt(i.toString(), 10)].field, getForeignData(foreignKeyColumns[parseInt(i.toString(), 10)], options.data), options.foreignKeyData);\n }\n };\n RowModelGenerator.prototype.generateCells = function (options) {\n var dummies = this.parent.getColumns();\n var tmp = [];\n for (var i = 0; i < dummies.length; i++) {\n tmp.push(this.generateCell(dummies[parseInt(i.toString(), 10)], options.uid, isNullOrUndefined(dummies[parseInt(i.toString(), 10)].commands) ? undefined : CellType.CommandColumn, null, i, options.foreignKeyData));\n }\n return tmp;\n };\n /**\n *\n * @param {Column} column - Defines column details\n * @param {string} rowId - Defines row id\n * @param {CellType} cellType - Defines cell type\n * @param {number} colSpan - Defines colSpan\n * @param {number} oIndex - Defines index\n * @param {Object} foreignKeyData - Defines foreign key data\n * @returns {Cell} returns cell model\n * @hidden\n */\n RowModelGenerator.prototype.generateCell = function (column, rowId, cellType, colSpan, oIndex, foreignKeyData) {\n var opt = {\n 'visible': column.visible,\n 'isDataCell': !isNullOrUndefined(column.field || column.template),\n 'isTemplate': !isNullOrUndefined(column.template),\n 'rowID': rowId,\n 'column': column,\n 'cellType': !isNullOrUndefined(cellType) ? cellType : CellType.Data,\n 'colSpan': colSpan,\n 'commands': column.commands,\n 'isForeignKey': column.isForeignColumn && column.isForeignColumn(),\n 'foreignKeyData': column.isForeignColumn && column.isForeignColumn() && getValue(column.field, foreignKeyData)\n };\n if (opt.isDataCell || opt.column.type === 'checkbox' || opt.commands) {\n opt.index = oIndex;\n }\n return new Cell(opt);\n };\n RowModelGenerator.prototype.refreshRows = function (input) {\n for (var i = 0; i < input.length; i++) {\n this.refreshForeignKeyRow(input[parseInt(i.toString(), 10)]);\n input[parseInt(i.toString(), 10)].cells = this.generateCells(input[parseInt(i.toString(), 10)]);\n }\n return input;\n };\n RowModelGenerator.prototype.getInfiniteIndex = function (args) {\n return args.requestType === 'infiniteScroll' || args.requestType === 'delete' || args.action === 'add'\n ? (isNullOrUndefined(args.startIndex) ? args['index'] : args.startIndex) : 0;\n };\n return RowModelGenerator;\n}());\nexport { RowModelGenerator };\n","/**\n * Defines types of Cell\n *\n * @hidden\n */\nexport var CellType;\n(function (CellType) {\n /** Defines CellType as Data */\n CellType[CellType[\"Data\"] = 0] = \"Data\";\n /** Defines CellType as Header */\n CellType[CellType[\"Header\"] = 1] = \"Header\";\n /** Defines CellType as Summary */\n CellType[CellType[\"Summary\"] = 2] = \"Summary\";\n /** Defines CellType as GroupSummary */\n CellType[CellType[\"GroupSummary\"] = 3] = \"GroupSummary\";\n /** Defines CellType as CaptionSummary */\n CellType[CellType[\"CaptionSummary\"] = 4] = \"CaptionSummary\";\n /** Defines CellType as Filter */\n CellType[CellType[\"Filter\"] = 5] = \"Filter\";\n /** Defines CellType as Indent */\n CellType[CellType[\"Indent\"] = 6] = \"Indent\";\n /** Defines CellType as GroupCaption */\n CellType[CellType[\"GroupCaption\"] = 7] = \"GroupCaption\";\n /** Defines CellType as GroupCaptionEmpty */\n CellType[CellType[\"GroupCaptionEmpty\"] = 8] = \"GroupCaptionEmpty\";\n /** Defines CellType as Expand */\n CellType[CellType[\"Expand\"] = 9] = \"Expand\";\n /** Defines CellType as HeaderIndent */\n CellType[CellType[\"HeaderIndent\"] = 10] = \"HeaderIndent\";\n /** Defines CellType as StackedHeader */\n CellType[CellType[\"StackedHeader\"] = 11] = \"StackedHeader\";\n /** Defines CellType as DetailHeader */\n CellType[CellType[\"DetailHeader\"] = 12] = \"DetailHeader\";\n /** Defines CellType as DetailExpand */\n CellType[CellType[\"DetailExpand\"] = 13] = \"DetailExpand\";\n /** Defines CellType as CommandColumn */\n CellType[CellType[\"CommandColumn\"] = 14] = \"CommandColumn\";\n /** Defines CellType as DetailFooterIntent */\n CellType[CellType[\"DetailFooterIntent\"] = 15] = \"DetailFooterIntent\";\n /** Defines CellType as RowDrag */\n CellType[CellType[\"RowDragIcon\"] = 16] = \"RowDragIcon\";\n /** Defines CellType as RowDragHeader */\n CellType[CellType[\"RowDragHIcon\"] = 17] = \"RowDragHIcon\";\n})(CellType || (CellType = {}));\n/**\n * Defines types of Render\n *\n * @hidden\n */\nexport var RenderType;\n(function (RenderType) {\n /** Defines RenderType as Header */\n RenderType[RenderType[\"Header\"] = 0] = \"Header\";\n /** Defines RenderType as Content */\n RenderType[RenderType[\"Content\"] = 1] = \"Content\";\n /** Defines RenderType as Summary */\n RenderType[RenderType[\"Summary\"] = 2] = \"Summary\";\n})(RenderType || (RenderType = {}));\n/**\n * Defines Predefined toolbar items.\n *\n * @hidden\n */\nexport var ToolbarItem;\n(function (ToolbarItem) {\n ToolbarItem[ToolbarItem[\"Add\"] = 0] = \"Add\";\n ToolbarItem[ToolbarItem[\"Edit\"] = 1] = \"Edit\";\n ToolbarItem[ToolbarItem[\"Update\"] = 2] = \"Update\";\n ToolbarItem[ToolbarItem[\"Delete\"] = 3] = \"Delete\";\n ToolbarItem[ToolbarItem[\"Cancel\"] = 4] = \"Cancel\";\n ToolbarItem[ToolbarItem[\"Print\"] = 5] = \"Print\";\n ToolbarItem[ToolbarItem[\"Search\"] = 6] = \"Search\";\n ToolbarItem[ToolbarItem[\"ColumnChooser\"] = 7] = \"ColumnChooser\";\n ToolbarItem[ToolbarItem[\"PdfExport\"] = 8] = \"PdfExport\";\n ToolbarItem[ToolbarItem[\"ExcelExport\"] = 9] = \"ExcelExport\";\n ToolbarItem[ToolbarItem[\"CsvExport\"] = 10] = \"CsvExport\";\n ToolbarItem[ToolbarItem[\"WordExport\"] = 11] = \"WordExport\";\n})(ToolbarItem || (ToolbarItem = {}));\n/**\n * Defines types of responsive dialogs\n *\n * @hidden\n */\nexport var ResponsiveDialogAction;\n(function (ResponsiveDialogAction) {\n /** Defines dialog type as Edit */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isEdit\"] = 0] = \"isEdit\";\n /** Defines dialog type as Add */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isAdd\"] = 1] = \"isAdd\";\n /** Defines dialog type as Sort */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isSort\"] = 2] = \"isSort\";\n /** Defines dialog type as Filter */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isFilter\"] = 3] = \"isFilter\";\n /** Defines dialog type as ColMenu */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isColMenu\"] = 4] = \"isColMenu\";\n /** Defines dialog type as ColumChooser */\n ResponsiveDialogAction[ResponsiveDialogAction[\"isColumnChooser\"] = 5] = \"isColumnChooser\";\n})(ResponsiveDialogAction || (ResponsiveDialogAction = {}));\n/**\n * Defines responsive toolbar actions\n *\n * @hidden\n */\nexport var ResponsiveToolbarAction;\n(function (ResponsiveToolbarAction) {\n /** Defines initial responsive toolbar buttons */\n ResponsiveToolbarAction[ResponsiveToolbarAction[\"isInitial\"] = 0] = \"isInitial\";\n /** Defines responsive toolbar search */\n ResponsiveToolbarAction[ResponsiveToolbarAction[\"isSearch\"] = 1] = \"isSearch\";\n})(ResponsiveToolbarAction || (ResponsiveToolbarAction = {}));\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Touch, Component, EventHandler, selectAll, getUniqueID, removeClass } from '@syncfusion/ej2-base';\nimport { NotifyPropertyChanges, Property, Browser, detach, createElement as buildTag } from '@syncfusion/ej2-base';\nimport { classList, isNullOrUndefined } from '@syncfusion/ej2-base';\nvar CLS_ROOT = 'e-vscroll';\nvar CLS_RTL = 'e-rtl';\nvar CLS_DISABLE = 'e-overlay';\nvar CLS_VSCROLLBAR = 'e-vscroll-bar';\nvar CLS_VSCROLLCON = 'e-vscroll-content';\nvar CLS_NAVARROW = 'e-nav-arrow';\nvar CLS_NAVUPARROW = 'e-nav-up-arrow';\nvar CLS_NAVDOWNARROW = 'e-nav-down-arrow';\nvar CLS_VSCROLLNAV = 'e-scroll-nav';\nvar CLS_VSCROLLNAVUP = 'e-scroll-up-nav';\nvar CLS_VSCROLLNAVDOWN = 'e-scroll-down-nav';\nvar CLS_DEVICE = 'e-scroll-device';\nvar CLS_OVERLAY = 'e-scroll-overlay';\nvar CLS_UPOVERLAY = 'e-scroll-up-overlay';\nvar CLS_DOWNOVERLAY = 'e-scroll-down-overlay';\nvar OVERLAY_MAXWID = 40;\n/**\n * VScroll module is introduces vertical scroller when content exceeds the current viewing area.\n * It can be useful for the components like Toolbar, Tab which needs vertical scrolling alone.\n * Hidden content can be view by touch moving or icon click.\n * ```html\n * \n * \n * ```\n */\nvar VScroll = /** @class */ (function (_super) {\n __extends(VScroll, _super);\n /**\n * Initializes a new instance of the VScroll class.\n *\n * @param {VScrollModel} options - Specifies VScroll model properties as options.\n * @param {string | HTMLElement} element - Specifies the element for which vertical scrolling applies.\n */\n function VScroll(options, element) {\n return _super.call(this, options, element) || this;\n }\n /**\n * Initialize the event handler\n *\n * @private\n * @returns {void}\n */\n VScroll.prototype.preRender = function () {\n this.browser = Browser.info.name;\n this.browserCheck = this.browser === 'mozilla';\n this.isDevice = Browser.isDevice;\n this.customStep = true;\n var ele = this.element;\n this.ieCheck = this.browser === 'edge' || this.browser === 'msie';\n this.initialize();\n if (ele.id === '') {\n ele.id = getUniqueID('vscroll');\n this.uniqueId = true;\n }\n ele.style.display = 'block';\n if (this.enableRtl) {\n ele.classList.add(CLS_RTL);\n }\n };\n /**\n * To Initialize the vertical scroll rendering\n *\n * @private\n * @returns {void}\n */\n VScroll.prototype.render = function () {\n this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this), swipe: this.swipeHandler.bind(this) });\n EventHandler.add(this.scrollEle, 'scroll', this.scrollEventHandler, this);\n if (!this.isDevice) {\n this.createNavIcon(this.element);\n }\n else {\n this.element.classList.add(CLS_DEVICE);\n this.createOverlayElement(this.element);\n }\n this.setScrollState();\n EventHandler.add(this.element, 'wheel', this.wheelEventHandler, this);\n };\n VScroll.prototype.setScrollState = function () {\n if (isNullOrUndefined(this.scrollStep) || this.scrollStep < 0) {\n this.scrollStep = this.scrollEle.offsetHeight;\n this.customStep = false;\n }\n else {\n this.customStep = true;\n }\n };\n VScroll.prototype.initialize = function () {\n var scrollCnt = buildTag('div', { className: CLS_VSCROLLCON });\n var scrollBar = buildTag('div', { className: CLS_VSCROLLBAR });\n scrollBar.setAttribute('tabindex', '-1');\n var ele = this.element;\n var innerEle = [].slice.call(ele.children);\n for (var _i = 0, innerEle_1 = innerEle; _i < innerEle_1.length; _i++) {\n var ele_1 = innerEle_1[_i];\n scrollCnt.appendChild(ele_1);\n }\n scrollBar.appendChild(scrollCnt);\n ele.appendChild(scrollBar);\n scrollBar.style.overflow = 'hidden';\n this.scrollEle = scrollBar;\n this.scrollItems = scrollCnt;\n };\n VScroll.prototype.getPersistData = function () {\n var keyEntity = ['scrollStep'];\n return this.addOnPersist(keyEntity);\n };\n /**\n * Returns the current module name.\n *\n * @returns {string} - It returns the current module name.\n * @private\n */\n VScroll.prototype.getModuleName = function () {\n return 'vScroll';\n };\n /**\n * Removes the control from the DOM and also removes all its related events.\n *\n * @returns {void}\n */\n VScroll.prototype.destroy = function () {\n var el = this.element;\n el.style.display = '';\n removeClass([this.element], [CLS_ROOT, CLS_DEVICE, CLS_RTL]);\n var navs = selectAll('.e-' + el.id + '_nav.' + CLS_VSCROLLNAV, el);\n var overlays = selectAll('.' + CLS_OVERLAY, el);\n [].slice.call(overlays).forEach(function (ele) {\n detach(ele);\n });\n for (var _i = 0, _a = [].slice.call(this.scrollItems.children); _i < _a.length; _i++) {\n var elem = _a[_i];\n el.appendChild(elem);\n }\n if (this.uniqueId) {\n this.element.removeAttribute('id');\n }\n detach(this.scrollEle);\n if (navs.length > 0) {\n detach(navs[0]);\n if (!isNullOrUndefined(navs[1])) {\n detach(navs[1]);\n }\n }\n EventHandler.remove(this.scrollEle, 'scroll', this.scrollEventHandler);\n this.touchModule.destroy();\n this.touchModule = null;\n _super.prototype.destroy.call(this);\n };\n /**\n * Specifies the value to disable/enable the VScroll component.\n * When set to `true` , the component will be disabled.\n *\n * @param {boolean} value - Based on this Boolean value, VScroll will be enabled (false) or disabled (true).\n * @returns {void}.\n */\n VScroll.prototype.disable = function (value) {\n var navEle = selectAll('.e-scroll-nav:not(.' + CLS_DISABLE + ')', this.element);\n if (value) {\n this.element.classList.add(CLS_DISABLE);\n }\n else {\n this.element.classList.remove(CLS_DISABLE);\n }\n [].slice.call(navEle).forEach(function (el) {\n el.setAttribute('tabindex', !value ? '0' : '-1');\n });\n };\n VScroll.prototype.createOverlayElement = function (element) {\n var id = element.id.concat('_nav');\n var downOverlayEle = buildTag('div', { className: CLS_OVERLAY + ' ' + CLS_DOWNOVERLAY });\n var clsDown = 'e-' + element.id.concat('_nav ' + CLS_VSCROLLNAV + ' ' + CLS_VSCROLLNAVDOWN);\n var downEle = buildTag('div', { id: id.concat('down'), className: clsDown });\n var navItem = buildTag('div', { className: CLS_NAVDOWNARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n downEle.appendChild(navItem);\n var upEle = buildTag('div', { className: CLS_OVERLAY + ' ' + CLS_UPOVERLAY });\n if (this.ieCheck) {\n downEle.classList.add('e-ie-align');\n }\n element.appendChild(downOverlayEle);\n element.appendChild(downEle);\n element.insertBefore(upEle, element.firstChild);\n this.eventBinding([downEle]);\n };\n VScroll.prototype.createNavIcon = function (element) {\n var id = element.id.concat('_nav');\n var clsDown = 'e-' + element.id.concat('_nav ' + CLS_VSCROLLNAV + ' ' + CLS_VSCROLLNAVDOWN);\n var nav = buildTag('div', { id: id.concat('_down'), className: clsDown });\n nav.setAttribute('aria-disabled', 'false');\n var navItem = buildTag('div', { className: CLS_NAVDOWNARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n var clsUp = 'e-' + element.id.concat('_nav ' + CLS_VSCROLLNAV + ' ' + CLS_VSCROLLNAVUP);\n var navElement = buildTag('div', { id: id.concat('_up'), className: clsUp + ' ' + CLS_DISABLE });\n navElement.setAttribute('aria-disabled', 'true');\n var navUpItem = buildTag('div', { className: CLS_NAVUPARROW + ' ' + CLS_NAVARROW + ' e-icons' });\n navElement.appendChild(navUpItem);\n nav.appendChild(navItem);\n nav.setAttribute('tabindex', '0');\n element.appendChild(nav);\n element.insertBefore(navElement, element.firstChild);\n if (this.ieCheck) {\n nav.classList.add('e-ie-align');\n navElement.classList.add('e-ie-align');\n }\n this.eventBinding([nav, navElement]);\n };\n VScroll.prototype.onKeyPress = function (ev) {\n var _this = this;\n if (ev.key === 'Enter') {\n var timeoutFun_1 = function () {\n _this.keyTimeout = true;\n _this.eleScrolling(10, ev.target, true);\n };\n this.keyTimer = window.setTimeout(function () {\n timeoutFun_1();\n }, 100);\n }\n };\n VScroll.prototype.onKeyUp = function (ev) {\n if (ev.key !== 'Enter') {\n return;\n }\n if (this.keyTimeout) {\n this.keyTimeout = false;\n }\n else {\n ev.target.click();\n }\n clearTimeout(this.keyTimer);\n };\n VScroll.prototype.eventBinding = function (element) {\n var _this = this;\n [].slice.call(element).forEach(function (ele) {\n new Touch(ele, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });\n ele.addEventListener('keydown', _this.onKeyPress.bind(_this));\n ele.addEventListener('keyup', _this.onKeyUp.bind(_this));\n ele.addEventListener('mouseup', _this.repeatScroll.bind(_this));\n ele.addEventListener('touchend', _this.repeatScroll.bind(_this));\n ele.addEventListener('contextmenu', function (e) {\n e.preventDefault();\n });\n EventHandler.add(ele, 'click', _this.clickEventHandler, _this);\n });\n };\n VScroll.prototype.repeatScroll = function () {\n clearInterval(this.timeout);\n };\n VScroll.prototype.tabHoldHandler = function (ev) {\n var _this = this;\n var trgt = ev.originalEvent.target;\n trgt = this.contains(trgt, CLS_VSCROLLNAV) ? trgt.firstElementChild : trgt;\n var scrollDistance = 10;\n var timeoutFun = function () {\n _this.eleScrolling(scrollDistance, trgt, true);\n };\n this.timeout = window.setInterval(function () {\n timeoutFun();\n }, 50);\n };\n VScroll.prototype.contains = function (element, className) {\n return element.classList.contains(className);\n };\n VScroll.prototype.eleScrolling = function (scrollDis, trgt, isContinuous) {\n var classList = trgt.classList;\n if (classList.contains(CLS_VSCROLLNAV)) {\n classList = trgt.querySelector('.' + CLS_NAVARROW).classList;\n }\n if (classList.contains(CLS_NAVDOWNARROW)) {\n this.frameScrollRequest(scrollDis, 'add', isContinuous);\n }\n else if (classList.contains(CLS_NAVUPARROW)) {\n this.frameScrollRequest(scrollDis, '', isContinuous);\n }\n };\n VScroll.prototype.clickEventHandler = function (event) {\n this.eleScrolling(this.scrollStep, event.target, false);\n };\n VScroll.prototype.wheelEventHandler = function (e) {\n e.preventDefault();\n this.frameScrollRequest(this.scrollStep, (e.deltaY > 0 ? 'add' : ''), false);\n };\n VScroll.prototype.swipeHandler = function (e) {\n var swipeElement = this.scrollEle;\n var distance;\n if (e.velocity <= 1) {\n distance = e.distanceY / (e.velocity * 10);\n }\n else {\n distance = e.distanceY / e.velocity;\n }\n var start = 0.5;\n var animate = function () {\n var step = Math.sin(start);\n if (step <= 0) {\n window.cancelAnimationFrame(step);\n }\n else {\n if (e.swipeDirection === 'Up') {\n swipeElement.scrollTop += distance * step;\n }\n else if (e.swipeDirection === 'Down') {\n swipeElement.scrollTop -= distance * step;\n }\n start -= 0.02;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n VScroll.prototype.scrollUpdating = function (scrollVal, action) {\n if (action === 'add') {\n this.scrollEle.scrollTop += scrollVal;\n }\n else {\n this.scrollEle.scrollTop -= scrollVal;\n }\n };\n VScroll.prototype.frameScrollRequest = function (scrollValue, action, isContinuous) {\n var _this = this;\n var step = 10;\n if (isContinuous) {\n this.scrollUpdating(scrollValue, action);\n return;\n }\n if (!this.customStep) {\n [].slice.call(selectAll('.' + CLS_OVERLAY, this.element)).forEach(function (el) {\n scrollValue -= el.offsetHeight;\n });\n }\n var animate = function () {\n if (scrollValue < step) {\n window.cancelAnimationFrame(step);\n }\n else {\n _this.scrollUpdating(step, action);\n scrollValue -= step;\n window.requestAnimationFrame(animate);\n }\n };\n animate();\n };\n VScroll.prototype.touchHandler = function (e) {\n var el = this.scrollEle;\n var distance = e.distanceY;\n if (e.scrollDirection === 'Up') {\n el.scrollTop = el.scrollTop + distance;\n }\n else if (e.scrollDirection === 'Down') {\n el.scrollTop = el.scrollTop - distance;\n }\n };\n VScroll.prototype.arrowDisabling = function (addDisableCls, removeDisableCls) {\n if (this.isDevice) {\n var arrowEle = isNullOrUndefined(addDisableCls) ? removeDisableCls : addDisableCls;\n var arrowIcon = arrowEle.querySelector('.' + CLS_NAVARROW);\n if (isNullOrUndefined(addDisableCls)) {\n classList(arrowIcon, [CLS_NAVDOWNARROW], [CLS_NAVUPARROW]);\n }\n else {\n classList(arrowIcon, [CLS_NAVUPARROW], [CLS_NAVDOWNARROW]);\n }\n }\n else {\n addDisableCls.classList.add(CLS_DISABLE);\n addDisableCls.setAttribute('aria-disabled', 'true');\n addDisableCls.removeAttribute('tabindex');\n removeDisableCls.classList.remove(CLS_DISABLE);\n removeDisableCls.setAttribute('aria-disabled', 'false');\n removeDisableCls.setAttribute('tabindex', '0');\n }\n this.repeatScroll();\n };\n VScroll.prototype.scrollEventHandler = function (e) {\n var target = e.target;\n var height = target.offsetHeight;\n var navUpEle = this.element.querySelector('.' + CLS_VSCROLLNAVUP);\n var navDownEle = this.element.querySelector('.' + CLS_VSCROLLNAVDOWN);\n var upOverlay = this.element.querySelector('.' + CLS_UPOVERLAY);\n var downOverlay = this.element.querySelector('.' + CLS_DOWNOVERLAY);\n var scrollTop = target.scrollTop;\n if (scrollTop <= 0) {\n scrollTop = -scrollTop;\n }\n if (this.isDevice) {\n if (scrollTop < OVERLAY_MAXWID) {\n upOverlay.style.height = scrollTop + 'px';\n }\n else {\n upOverlay.style.height = '40px';\n }\n if ((target.scrollHeight - Math.ceil(height + scrollTop)) < OVERLAY_MAXWID) {\n downOverlay.style.height = (target.scrollHeight - Math.ceil(height + scrollTop)) + 'px';\n }\n else {\n downOverlay.style.height = '40px';\n }\n }\n if (scrollTop === 0) {\n this.arrowDisabling(navUpEle, navDownEle);\n }\n else if (Math.ceil(height + scrollTop + .1) >= target.scrollHeight) {\n this.arrowDisabling(navDownEle, navUpEle);\n }\n else {\n var disEle = this.element.querySelector('.' + CLS_VSCROLLNAV + '.' + CLS_DISABLE);\n if (disEle) {\n disEle.classList.remove(CLS_DISABLE);\n disEle.setAttribute('aria-disabled', 'false');\n disEle.setAttribute('tabindex', '0');\n }\n }\n };\n /**\n * Gets called when the model property changes.The data that describes the old and new values of property that changed.\n *\n * @param {VScrollModel} newProp - It contains the new value of data.\n * @param {VScrollModel} oldProp - It contains the old value of data.\n * @returns {void}\n * @private\n */\n VScroll.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'scrollStep':\n this.setScrollState();\n break;\n case 'enableRtl':\n if (newProp.enableRtl) {\n this.element.classList.add(CLS_RTL);\n }\n else {\n this.element.classList.remove(CLS_RTL);\n }\n break;\n }\n }\n };\n __decorate([\n Property(null)\n ], VScroll.prototype, \"scrollStep\", void 0);\n VScroll = __decorate([\n NotifyPropertyChanges\n ], VScroll);\n return VScroll;\n}(Component));\nexport { VScroll };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { selectAll, select, createElement, Base, detach } from '@syncfusion/ej2-base';\nimport { extend, isNullOrUndefined, EventHandler } from '@syncfusion/ej2-base';\nimport { Property, NotifyPropertyChanges, Event, onIntlChange } from '@syncfusion/ej2-base';\nimport { Internationalization, L10n } from '@syncfusion/ej2-base';\n/**\n * global declarations\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport var regex = {\n /* eslint-disable no-useless-escape */\n EMAIL: new RegExp('^[A-Za-z0-9._%+-]{1,}@[A-Za-z0-9._%+-]{1,}([.]{1}[a-zA-Z0-9]{2,}' +\n '|[.]{1}[a-zA-Z0-9]{2,4}[.]{1}[a-zA-Z0-9]{2,4})$'),\n /* eslint-disable-next-line security/detect-unsafe-regex */\n URL: /^(?:http(s)?:\\/\\/)?[\\w.-]+(?:\\.[\\w\\.-]+)+[\\w\\-\\._~:/?#[\\]@!\\$&'\\(\\)\\*\\+,;=.]+$/m,\n DATE_ISO: new RegExp('^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$'),\n DIGITS: new RegExp('^[0-9]*$'),\n PHONE: new RegExp('^[+]?[0-9]{9,13}$'),\n CREDITCARD: new RegExp('^\\\\d{13,16}$')\n /* eslint-enable no-useless-escape */\n};\n/**\n * ErrorOption values\n *\n * @private\n */\nexport var ErrorOption;\n(function (ErrorOption) {\n /**\n * Defines the error message.\n */\n ErrorOption[ErrorOption[\"Message\"] = 0] = \"Message\";\n /**\n * Defines the error element type.\n */\n ErrorOption[ErrorOption[\"Label\"] = 1] = \"Label\";\n})(ErrorOption || (ErrorOption = {}));\n/**\n * FormValidator class enables you to validate the form fields based on your defined rules\n * ```html\n *
\n * \n * ```\n */\nvar FormValidator = /** @class */ (function (_super) {\n __extends(FormValidator, _super);\n /**\n * Initializes the FormValidator.\n *\n * @param {string | HTMLFormElement} element - Specifies the element to render as component.\n * @param {FormValidatorModel} options - Specifies the FormValidator model.\n * @private\n */\n function FormValidator(element, options) {\n var _this = _super.call(this, options, element) || this;\n _this.validated = [];\n _this.errorRules = [];\n _this.allowSubmit = false;\n _this.required = 'required';\n _this.infoElement = null;\n _this.inputElement = null;\n _this.selectQuery = 'input:not([type=reset]):not([type=button]), select, textarea';\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n _this.localyMessage = {};\n /**\n * Specifies the default messages for validation rules.\n *\n * @default { List of validation message }\n */\n _this.defaultMessages = {\n required: 'This field is required.',\n email: 'Please enter a valid email address.',\n url: 'Please enter a valid URL.',\n date: 'Please enter a valid date.',\n dateIso: 'Please enter a valid date ( ISO ).',\n creditcard: 'Please enter valid card number',\n number: 'Please enter a valid number.',\n digits: 'Please enter only digits.',\n maxLength: 'Please enter no more than {0} characters.',\n minLength: 'Please enter at least {0} characters.',\n rangeLength: 'Please enter a value between {0} and {1} characters long.',\n range: 'Please enter a value between {0} and {1}.',\n max: 'Please enter a value less than or equal to {0}.',\n min: 'Please enter a value greater than or equal to {0}.',\n regex: 'Please enter a correct value.',\n tel: 'Please enter a valid phone number.',\n pattern: 'Please enter a correct pattern value.',\n equalTo: 'Please enter the valid match text'\n };\n if (typeof _this.rules === 'undefined') {\n _this.rules = {};\n }\n _this.l10n = new L10n('formValidator', _this.defaultMessages, _this.locale);\n if (_this.locale) {\n _this.localeFunc();\n }\n onIntlChange.on('notifyExternalChange', _this.afterLocalization, _this);\n element = typeof element === 'string' ? select(element, document) : element;\n // Set novalidate to prevent default HTML5 form validation\n if (_this.element != null) {\n _this.element.setAttribute('novalidate', '');\n _this.inputElements = selectAll(_this.selectQuery, _this.element);\n _this.createHTML5Rules();\n _this.wireEvents();\n }\n else {\n return undefined;\n }\n return _this;\n }\n FormValidator_1 = FormValidator;\n /* eslint-enable @typescript-eslint/no-explicit-any */\n /**\n * Add validation rules to the corresponding input element based on `name` attribute.\n *\n * @param {string} name `name` of form field.\n * @param {Object} rules Validation rules for the corresponding element.\n * @returns {void}\n */\n FormValidator.prototype.addRules = function (name, rules) {\n if (name) {\n // eslint-disable-next-line no-prototype-builtins\n if (this.rules.hasOwnProperty(name)) {\n extend(this.rules[\"\" + name], rules, {});\n }\n else {\n this.rules[\"\" + name] = rules;\n }\n }\n };\n /**\n * Remove validation to the corresponding field based on name attribute.\n * When no parameter is passed, remove all the validations in the form.\n *\n * @param {string} name Input name attribute value.\n * @param {string[]} rules List of validation rules need to be remove from the corresponding element.\n * @returns {void}\n */\n FormValidator.prototype.removeRules = function (name, rules) {\n if (!name && !rules) {\n this.rules = {};\n }\n else if (this.rules[\"\" + name] && !rules) {\n delete this.rules[\"\" + name];\n }\n else if (!isNullOrUndefined(this.rules[\"\" + name] && rules)) {\n for (var i = 0; i < rules.length; i++) {\n delete this.rules[\"\" + name][rules[parseInt(i.toString())]];\n }\n }\n else {\n return;\n }\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Validate the current form values using defined rules.\n * Returns `true` when the form is valid otherwise `false`\n *\n * @param {string} selected - Optional parameter to validate specified element.\n * @returns {boolean}\n */\n FormValidator.prototype.validate = function (selected) {\n var rules = Object.keys(this.rules);\n if (selected && rules.length) {\n this.validateRules(selected);\n //filter the selected element it don't have any valid input element\n return rules.indexOf(selected) !== -1 && this.errorRules.filter(function (data) {\n return data.name === selected;\n }).length === 0;\n }\n else {\n this.errorRules = [];\n for (var _i = 0, rules_1 = rules; _i < rules_1.length; _i++) {\n var name_1 = rules_1[_i];\n this.validateRules(name_1);\n }\n return this.errorRules.length === 0;\n }\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Reset the value of all the fields in form.\n *\n * @returns {void}\n */\n FormValidator.prototype.reset = function () {\n this.element.reset();\n this.clearForm();\n };\n /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Get input element by name.\n *\n * @param {string} name - Input element name attribute value.\n * @returns {HTMLInputElement}\n */\n FormValidator.prototype.getInputElement = function (name) {\n this.inputElement = (select('[name=\"' + name + '\"]', this.element));\n return this.inputElement;\n };\n /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */\n /**\n * Destroy the form validator object and error elements.\n *\n * @returns {void}\n */\n FormValidator.prototype.destroy = function () {\n this.reset();\n this.unwireEvents();\n this.rules = {};\n var elements = selectAll('.' + this.errorClass + ', .' + this.validClass, this.element);\n for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {\n var element = elements_1[_i];\n detach(element);\n }\n _super.prototype.destroy.call(this);\n this.infoElement = null;\n onIntlChange.off('notifyExternalChange', this.afterLocalization);\n };\n /**\n * @param {FormValidatorModel} newProp - Returns the dynamic property value of the component.\n * @param {FormValidatorModel} oldProp - Returns the previous property value of the component.\n * @returns {void}\n * @private\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n FormValidator.prototype.onPropertyChanged = function (newProp, oldProp) {\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'locale':\n this.localeFunc();\n break;\n }\n }\n };\n /**\n * @private\n * @returns {void}\n */\n FormValidator.prototype.localeFunc = function () {\n for (var _i = 0, _a = Object.keys(this.defaultMessages); _i < _a.length; _i++) {\n var key = _a[_i];\n this.l10n.setLocale(this.locale);\n var value = this.l10n.getConstant(key);\n this.localyMessage[\"\" + key] = value;\n }\n };\n /**\n * @private\n * @returns {string} - Returns the component name.\n */\n FormValidator.prototype.getModuleName = function () {\n return 'formvalidator';\n };\n /**\n * @param {any} args - Specifies the culture name.\n * @private\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types\n FormValidator.prototype.afterLocalization = function (args) {\n this.locale = args.locale;\n this.localeFunc();\n };\n /**\n * Allows you to refresh the form validator base events to the elements inside the form.\n *\n * @returns {void}\n */\n FormValidator.prototype.refresh = function () {\n this.unwireEvents();\n this.inputElements = selectAll(this.selectQuery, this.element);\n this.wireEvents();\n };\n FormValidator.prototype.clearForm = function () {\n this.errorRules = [];\n this.validated = [];\n var elements = selectAll(this.selectQuery, this.element);\n for (var _i = 0, elements_2 = elements; _i < elements_2.length; _i++) {\n var element = elements_2[_i];\n var input = element;\n input.removeAttribute('aria-invalid');\n var inputParent = input.parentElement;\n var grandParent = inputParent.parentElement;\n if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (input.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {\n inputParent.classList.remove(this.errorClass);\n }\n else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {\n grandParent.classList.remove(this.errorClass);\n }\n else {\n input.classList.remove(this.errorClass);\n }\n if (input.name.length > 0) {\n this.getInputElement(input.name);\n this.getErrorElement(input.name);\n this.hideMessage(input.name);\n }\n if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (input.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {\n inputParent.classList.remove(this.validClass);\n }\n else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {\n grandParent.classList.remove(this.validClass);\n }\n else {\n input.classList.remove(this.validClass);\n }\n }\n };\n FormValidator.prototype.createHTML5Rules = function () {\n var defRules = ['required', 'validateHidden', 'regex', 'rangeLength', 'maxLength', 'minLength', 'dateIso', 'digits',\n 'pattern', 'data-val-required', 'type', 'data-validation', 'min', 'max', 'range', 'equalTo', 'data-val-minlength-min',\n 'data-val-equalto-other', 'data-val-maxlength-max', 'data-val-range-min', 'data-val-regex-pattern', 'data-val-length-max',\n 'data-val-creditcard', 'data-val-phone'];\n var acceptedTypes = ['hidden', 'email', 'url', 'date', 'number', 'tel'];\n for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {\n var input = _a[_i];\n // Default attribute rules\n var allRule = {};\n for (var _b = 0, defRules_1 = defRules; _b < defRules_1.length; _b++) {\n var rule = defRules_1[_b];\n if (input.getAttribute(rule) !== null) {\n switch (rule) {\n case 'required':\n this.defRule(input, allRule, rule, input.required);\n break;\n case 'data-validation':\n rule = input.getAttribute(rule);\n this.defRule(input, allRule, rule, true);\n break;\n case 'type':\n if (acceptedTypes.indexOf(input.type) !== -1) {\n this.defRule(input, allRule, input.type, true);\n }\n break;\n case 'rangeLength':\n case 'range':\n this.defRule(input, allRule, rule, JSON.parse(input.getAttribute(rule)));\n break;\n case 'equalTo':\n {\n var id = input.getAttribute(rule);\n this.defRule(input, allRule, rule, id);\n }\n break;\n default:\n if (input.getAttribute('data-val') === 'true') {\n this.annotationRule(input, allRule, rule, input.getAttribute(rule));\n }\n else {\n this.defRule(input, allRule, rule, input.getAttribute(rule));\n }\n }\n }\n }\n //adding pattern type validation\n if (Object.keys(allRule).length !== 0) {\n this.addRules(input.name, allRule);\n }\n }\n };\n FormValidator.prototype.annotationRule = function (input, ruleCon, ruleName, value) {\n var annotationRule = ruleName.split('-');\n var rulesList = ['required', 'creditcard', 'phone', 'maxlength', 'minlength', 'range', 'regex', 'equalto'];\n var ruleFirstName = annotationRule[annotationRule.length - 1];\n var ruleSecondName = annotationRule[annotationRule.length - 2];\n if (rulesList.indexOf(ruleFirstName) !== -1) {\n switch (ruleFirstName) {\n case 'required':\n this.defRule(input, ruleCon, 'required', value);\n break;\n case 'creditcard':\n this.defRule(input, ruleCon, 'creditcard', value);\n break;\n case 'phone':\n this.defRule(input, ruleCon, 'tel', value);\n break;\n }\n }\n else if (rulesList.indexOf(ruleSecondName) !== -1) {\n switch (ruleSecondName) {\n case 'maxlength':\n this.defRule(input, ruleCon, 'maxLength', value);\n break;\n case 'minlength':\n this.defRule(input, ruleCon, 'minLength', value);\n break;\n case 'range':\n {\n var minvalue = input.getAttribute('data-val-range-min');\n var maxvalue = input.getAttribute('data-val-range-max');\n this.defRule(input, ruleCon, 'range', [minvalue, maxvalue]);\n }\n break;\n case 'equalto':\n {\n var id = input.getAttribute(ruleName).split('.');\n this.defRule(input, ruleCon, 'equalTo', id[id.length - 1]);\n }\n break;\n case 'regex':\n this.defRule(input, ruleCon, 'regex', value);\n break;\n }\n }\n };\n FormValidator.prototype.defRule = function (input, ruleCon, ruleName, value) {\n var message = input.getAttribute('data-' + ruleName + '-message');\n var annotationMessage = input.getAttribute('data-val-' + ruleName);\n var customMessage;\n if (this.rules[input.name] && ruleName !== 'validateHidden' && ruleName !== 'hidden') {\n this.getInputElement(input.name);\n customMessage = this.getErrorMessage(this.rules[input.name][\"\" + ruleName], ruleName);\n }\n if (message) {\n value = [value, message];\n }\n else if (annotationMessage) {\n value = [value, annotationMessage];\n }\n else if (customMessage) {\n value = [value, customMessage];\n }\n ruleCon[\"\" + ruleName] = value;\n };\n // Wire events to the form elements\n FormValidator.prototype.wireEvents = function () {\n for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {\n var input = _a[_i];\n if (FormValidator_1.isCheckable(input)) {\n EventHandler.add(input, 'click', this.clickHandler, this);\n }\n else if (input.tagName === 'SELECT') {\n EventHandler.add(input, 'change', this.changeHandler, this);\n }\n else {\n EventHandler.add(input, 'focusout', this.focusOutHandler, this);\n EventHandler.add(input, 'keyup', this.keyUpHandler, this);\n }\n }\n EventHandler.add(this.element, 'submit', this.submitHandler, this);\n EventHandler.add(this.element, 'reset', this.resetHandler, this);\n };\n // UnWire events to the form elements\n FormValidator.prototype.unwireEvents = function () {\n for (var _i = 0, _a = (this.inputElements); _i < _a.length; _i++) {\n var input = _a[_i];\n EventHandler.clearEvents(input);\n }\n EventHandler.remove(this.element, 'submit', this.submitHandler);\n EventHandler.remove(this.element, 'reset', this.resetHandler);\n };\n // Handle input element focusout event\n FormValidator.prototype.focusOutHandler = function (e) {\n this.trigger('focusout', e);\n //FormValidator.triggerCallback(this.focusout, e);\n var element = e.target;\n if (this.rules[element.name]) {\n if (this.rules[element.name][this.required] || element.value.length > 0) {\n this.validate(element.name);\n }\n else if (this.validated.indexOf(element.name) === -1) {\n this.validated.push(element.name);\n }\n }\n };\n // Handle input element keyup event\n FormValidator.prototype.keyUpHandler = function (e) {\n this.trigger('keyup', e);\n var element = e.target;\n // List of keys need to prevent while validation\n var excludeKeys = [16, 17, 18, 20, 35, 36, 37, 38, 39, 40, 45, 144, 225];\n if (e.which === 9 && (!this.rules[element.name] || (this.rules[element.name] && !this.rules[element.name][this.required]))) {\n return;\n }\n if (this.validated.indexOf(element.name) !== -1 && this.rules[element.name] && excludeKeys.indexOf(e.which) === -1) {\n this.validate(element.name);\n }\n };\n // Handle input click event\n FormValidator.prototype.clickHandler = function (e) {\n this.trigger('click', e);\n var element = e.target;\n // If element type is not submit allow validation\n if (element.type !== 'submit') {\n this.validate(element.name);\n }\n else if (element.getAttribute('formnovalidate') !== null) {\n // Prevent form validation, if submit button has formnovalidate attribute\n this.allowSubmit = true;\n }\n };\n // Handle input change event\n FormValidator.prototype.changeHandler = function (e) {\n this.trigger('change', e);\n var element = e.target;\n this.validate(element.name);\n };\n // Handle form submit event\n FormValidator.prototype.submitHandler = function (e) {\n this.trigger('submit', e);\n //FormValidator.triggerCallback(this.submit, e);\n // Prevent form submit if validation failed\n if (!this.allowSubmit && !this.validate()) {\n e.preventDefault();\n }\n else {\n this.allowSubmit = false;\n }\n };\n // Handle form reset\n FormValidator.prototype.resetHandler = function () {\n this.clearForm();\n };\n // Validate each rule based on input element name\n FormValidator.prototype.validateRules = function (name) {\n if (!this.rules[\"\" + name]) {\n return;\n }\n var rules = Object.keys(this.rules[\"\" + name]);\n var hiddenType = false;\n var validateHiddenType = false;\n var vhPos = rules.indexOf('validateHidden');\n var hPos = rules.indexOf('hidden');\n this.getInputElement(name);\n if (hPos !== -1) {\n hiddenType = true;\n }\n if (vhPos !== -1) {\n validateHiddenType = true;\n }\n if (!hiddenType || (hiddenType && validateHiddenType)) {\n if (vhPos !== -1) {\n rules.splice(vhPos, 1);\n }\n if (hPos !== -1) {\n rules.splice((hPos - 1), 1);\n }\n this.getErrorElement(name);\n for (var _i = 0, rules_2 = rules; _i < rules_2.length; _i++) {\n var rule = rules_2[_i];\n var errorMessage = this.getErrorMessage(this.rules[\"\" + name][\"\" + rule], rule);\n var errorRule = { name: name, message: errorMessage };\n var eventArgs = {\n inputName: name,\n element: this.inputElement,\n message: errorMessage\n };\n if (!this.isValid(name, rule) && !this.inputElement.classList.contains(this.ignore)) {\n this.removeErrorRules(name);\n this.errorRules.push(errorRule);\n // Set aria attributes to invalid elements\n this.inputElement.setAttribute('aria-invalid', 'true');\n this.inputElement.setAttribute('aria-describedby', this.inputElement.id + '-info');\n var inputParent = this.inputElement.parentElement;\n var grandParent = inputParent.parentElement;\n if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {\n inputParent.classList.add(this.errorClass);\n inputParent.classList.remove(this.validClass);\n }\n else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {\n grandParent.classList.add(this.errorClass);\n grandParent.classList.remove(this.validClass);\n }\n else {\n this.inputElement.classList.add(this.errorClass);\n this.inputElement.classList.remove(this.validClass);\n }\n if (!this.infoElement) {\n this.createErrorElement(name, errorRule.message, this.inputElement);\n }\n else {\n this.showMessage(errorRule);\n }\n eventArgs.errorElement = this.infoElement;\n eventArgs.status = 'failure';\n if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {\n inputParent.classList.add(this.errorClass);\n inputParent.classList.remove(this.validClass);\n }\n else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {\n grandParent.classList.add(this.errorClass);\n grandParent.classList.remove(this.validClass);\n }\n else {\n this.inputElement.classList.add(this.errorClass);\n this.inputElement.classList.remove(this.validClass);\n }\n this.optionalValidationStatus(name, eventArgs);\n this.trigger('validationComplete', eventArgs);\n // Set aria-required to required rule elements\n if (rule === 'required') {\n this.inputElement.setAttribute('aria-required', 'true');\n }\n break;\n }\n else {\n this.hideMessage(name);\n eventArgs.status = 'success';\n this.trigger('validationComplete', eventArgs);\n }\n }\n }\n else {\n return;\n }\n };\n // Update the optional validation status\n FormValidator.prototype.optionalValidationStatus = function (name, refer) {\n if (!this.rules[\"\" + name][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {\n this.infoElement.innerHTML = this.inputElement.value;\n this.infoElement.setAttribute('aria-invalid', 'false');\n refer.status = '';\n this.hideMessage(name);\n }\n };\n // Check the input element whether it's value satisfy the validation rule or not\n FormValidator.prototype.isValid = function (name, rule) {\n var params = this.rules[\"\" + name][\"\" + rule];\n var param = (params instanceof Array && typeof params[1] === 'string') ? params[0] : params;\n var currentRule = this.rules[\"\" + name][\"\" + rule];\n var args = { value: this.inputElement.value, param: param, element: this.inputElement, formElement: this.element };\n this.trigger('validationBegin', args);\n if (!args.param && rule === 'required') {\n return true;\n }\n if (currentRule && typeof currentRule[0] === 'function') {\n var fn = currentRule[0];\n return fn.call(this, { element: this.inputElement, value: this.inputElement.value });\n }\n else if (FormValidator_1.isCheckable(this.inputElement)) {\n if (rule !== 'required') {\n return true;\n }\n return selectAll('input[name=\"' + name + '\"]:checked', this.element).length > 0;\n }\n else {\n return FormValidator_1.checkValidator[\"\" + rule](args);\n }\n };\n // Return default error message or custom error message\n FormValidator.prototype.getErrorMessage = function (ruleValue, rule) {\n var message = this.inputElement.getAttribute('data-' + rule + '-message') ?\n this.inputElement.getAttribute('data-' + rule + '-message') :\n (ruleValue instanceof Array && typeof ruleValue[1] === 'string') ? ruleValue[1] :\n (Object.keys(this.localyMessage).length !== 0) ? this.localyMessage[\"\" + rule] : this.defaultMessages[\"\" + rule];\n var formats = message.match(/{(\\d)}/g);\n if (!isNullOrUndefined(formats)) {\n for (var i = 0; i < formats.length; i++) {\n var value = ruleValue instanceof Array ? ruleValue[parseInt(i.toString())] : ruleValue;\n message = message.replace(formats[parseInt(i.toString())], value);\n }\n }\n return message;\n };\n // Create error element based on name and error message\n FormValidator.prototype.createErrorElement = function (name, message, input) {\n var errorElement = createElement(this.errorElement, {\n className: this.errorClass,\n innerHTML: message,\n attrs: { for: name }\n });\n // Create message design if errorOption is message\n if (this.errorOption === ErrorOption.Message) {\n errorElement.classList.remove(this.errorClass);\n errorElement.classList.add('e-message');\n errorElement = createElement(this.errorContainer, { className: this.errorClass, innerHTML: errorElement.outerHTML });\n }\n errorElement.id = this.inputElement.name + '-info';\n // Append error message into MVC error message element\n if (this.element.querySelector('[data-valmsg-for=\"' + input.id + '\"]')) {\n this.element.querySelector('[data-valmsg-for=\"' + input.id + '\"]').appendChild(errorElement);\n }\n else if (input.hasAttribute('data-msg-containerid') === true) {\n // Append error message into custom div element\n var containerId = input.getAttribute('data-msg-containerid');\n var divElement = select('#' + containerId, this.element);\n divElement.appendChild(errorElement);\n }\n else if (this.customPlacement != null) {\n // Call custom placement function if customPlacement is not null\n this.customPlacement.call(this, this.inputElement, errorElement);\n }\n else {\n var inputParent = this.inputElement.parentElement;\n var grandParent = inputParent.parentElement;\n if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {\n grandParent.insertBefore(errorElement, inputParent.nextSibling);\n }\n else if (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper')) {\n grandParent.parentElement.insertBefore(errorElement, grandParent.nextSibling);\n }\n else {\n inputParent.insertBefore(errorElement, this.inputElement.nextSibling);\n }\n }\n errorElement.style.display = 'block';\n this.getErrorElement(name);\n this.validated.push(name);\n this.checkRequired(name);\n };\n // Get error element by name\n FormValidator.prototype.getErrorElement = function (name) {\n this.infoElement = select(this.errorElement + '.' + this.errorClass, this.inputElement.parentElement);\n if (!this.infoElement) {\n this.infoElement = select(this.errorElement + '.' + this.errorClass + '[for=\"' + name + '\"]', this.element);\n }\n return this.infoElement;\n };\n // Remove existing rule from errorRules object\n FormValidator.prototype.removeErrorRules = function (name) {\n for (var i = 0; i < this.errorRules.length; i++) {\n var rule = this.errorRules[parseInt(i.toString())];\n if (rule.name === name) {\n this.errorRules.splice(i, 1);\n }\n }\n };\n // Show error message to the input element\n FormValidator.prototype.showMessage = function (errorRule) {\n this.infoElement.style.display = 'block';\n this.infoElement.innerHTML = errorRule.message;\n this.checkRequired(errorRule.name);\n };\n // Hide error message based on input name\n FormValidator.prototype.hideMessage = function (name) {\n if (this.infoElement) {\n this.infoElement.style.display = 'none';\n this.removeErrorRules(name);\n var inputParent = this.inputElement.parentElement;\n var grandParent = inputParent.parentElement;\n if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {\n inputParent.classList.add(this.validClass);\n inputParent.classList.remove(this.errorClass);\n }\n else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {\n grandParent.classList.add(this.validClass);\n grandParent.classList.remove(this.errorClass);\n }\n else {\n this.inputElement.classList.add(this.validClass);\n this.inputElement.classList.remove(this.errorClass);\n }\n this.inputElement.setAttribute('aria-invalid', 'false');\n }\n };\n // Check whether the input element have required rule and its value is not empty\n FormValidator.prototype.checkRequired = function (name) {\n if (!this.rules[\"\" + name][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {\n this.infoElement.innerHTML = this.inputElement.value;\n this.infoElement.setAttribute('aria-invalid', 'false');\n this.hideMessage(name);\n }\n };\n // Return boolean result if the input have chekcable or submit types\n FormValidator.isCheckable = function (input) {\n var inputType = input.getAttribute('type');\n return inputType && (inputType === 'checkbox' || inputType === 'radio' || inputType === 'submit');\n };\n var FormValidator_1;\n // List of function to validate the rules\n FormValidator.checkValidator = {\n required: function (option) {\n return !isNaN(Date.parse(option.value)) ? !isNaN(new Date(option.value).getTime()) : option.value.toString().length > 0;\n },\n email: function (option) {\n return regex.EMAIL.test(option.value);\n },\n url: function (option) {\n return regex.URL.test(option.value);\n },\n dateIso: function (option) {\n return regex.DATE_ISO.test(option.value);\n },\n tel: function (option) {\n return regex.PHONE.test(option.value);\n },\n creditcard: function (option) {\n return regex.CREDITCARD.test(option.value);\n },\n number: function (option) {\n return !isNaN(Number(option.value)) && option.value.indexOf(' ') === -1;\n },\n digits: function (option) {\n return regex.DIGITS.test(option.value);\n },\n maxLength: function (option) {\n return option.value.length <= option.param;\n },\n minLength: function (option) {\n return option.value.length >= option.param;\n },\n rangeLength: function (option) {\n var param = option.param;\n return option.value.length >= param[0] && option.value.length <= param[1];\n },\n range: function (option) {\n var param = option.param;\n return !isNaN(Number(option.value)) && Number(option.value) >= param[0] && Number(option.value) <= param[1];\n },\n date: function (option) {\n if (!isNullOrUndefined(option.param) && (typeof (option.param) === 'string' && option.param !== '')) {\n var globalize = new Internationalization;\n var dateOptions = { format: option.param.toString(), type: 'dateTime', skeleton: 'yMd' };\n var dateValue = globalize.parseDate(option.value, dateOptions);\n return (!isNullOrUndefined(dateValue) && dateValue instanceof Date && !isNaN(+dateValue));\n }\n else {\n return !isNaN(new Date(option.value).getTime());\n }\n },\n max: function (option) {\n if (!isNaN(Number(option.value))) {\n // Maximum rule validation for number\n return +option.value <= option.param;\n }\n // Maximum rule validation for date\n return new Date(option.value).getTime() <= new Date(JSON.parse(JSON.stringify(option.param))).getTime();\n },\n min: function (option) {\n if (!isNaN(Number(option.value))) {\n // Minimum rule validation for number\n return +option.value >= option.param;\n }\n else if ((option.value).indexOf(',') !== -1) {\n var uNum = (option.value).replace(/,/g, '');\n return parseFloat(uNum) >= option.param;\n }\n else {\n // Minimum rule validation for date\n return new Date(option.value).getTime() >= new Date(JSON.parse(JSON.stringify(option.param))).getTime();\n }\n },\n regex: function (option) {\n /* eslint-disable-next-line security/detect-non-literal-regexp */\n return new RegExp(option.param).test(option.value);\n },\n equalTo: function (option) {\n var compareTo = option.formElement.querySelector('#' + option.param);\n option.param = compareTo.value;\n return option.param === option.value;\n }\n };\n __decorate([\n Property('')\n ], FormValidator.prototype, \"locale\", void 0);\n __decorate([\n Property('e-hidden')\n ], FormValidator.prototype, \"ignore\", void 0);\n __decorate([\n Property()\n ], FormValidator.prototype, \"rules\", void 0);\n __decorate([\n Property('e-error')\n ], FormValidator.prototype, \"errorClass\", void 0);\n __decorate([\n Property('e-valid')\n ], FormValidator.prototype, \"validClass\", void 0);\n __decorate([\n Property('label')\n ], FormValidator.prototype, \"errorElement\", void 0);\n __decorate([\n Property('div')\n ], FormValidator.prototype, \"errorContainer\", void 0);\n __decorate([\n Property(ErrorOption.Label)\n ], FormValidator.prototype, \"errorOption\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"focusout\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"keyup\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"click\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"change\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"submit\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"validationBegin\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"validationComplete\", void 0);\n __decorate([\n Event()\n ], FormValidator.prototype, \"customPlacement\", void 0);\n FormValidator = FormValidator_1 = __decorate([\n NotifyPropertyChanges\n ], FormValidator);\n return FormValidator;\n}(Base));\nexport { FormValidator };\n","import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, closest as getClosest, remove } from '@syncfusion/ej2-base';\nimport { classList } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\nimport { RowRenderer } from './row-renderer';\nimport { Cell } from '../models/cell';\nimport { Row } from '../models/row';\nimport * as events from '../base/constant';\nimport { Draggable, Droppable } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { parentsUntil, wrap, measureColumnDepth, appendChildren, addFixedColumnBorder } from '../base/util';\nimport * as literals from '../base/string-literals';\n// eslint-disable-next-line valid-jsdoc\n/**\n * Content module is used to render grid content\n *\n * @hidden\n */\nvar HeaderRender = /** @class */ (function () {\n /**\n * Constructor for header renderer module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {ServiceLocator} serviceLocator - specifies the serviceLocator\n */\n function HeaderRender(parent, serviceLocator) {\n var _this = this;\n this.frzIdx = 0;\n this.notfrzIdx = 0;\n this.isFirstCol = false;\n this.isReplaceDragEle = true;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n this.helper = function (e) {\n var gObj = _this.parent;\n var target = _this.draggable.currentStateTarget;\n var parentEle = parentsUntil(target, 'e-headercell');\n if (!(gObj.allowReordering || gObj.allowGrouping) || (!isNullOrUndefined(parentEle)\n && parentEle.getElementsByClassName('e-checkselectall').length > 0)) {\n return false;\n }\n var visualElement = _this.parent.createElement('div', { className: 'e-cloneproperties e-dragclone e-headerclone' });\n var element = target.classList.contains('e-headercell') ? target : parentEle;\n if (!element || (!gObj.allowReordering && element.classList.contains('e-stackedheadercell'))) {\n return false;\n }\n var height = element.offsetHeight;\n var headercelldiv = element.querySelector('.e-headercelldiv') || element.querySelector('.e-stackedheadercelldiv');\n var col;\n if (headercelldiv) {\n if (element.querySelector('.e-stackedheadercelldiv')) {\n col = gObj.getStackedHeaderColumnByHeaderText(headercelldiv.innerText.trim(), gObj.columns);\n }\n else {\n col = gObj.getColumnByUid(headercelldiv.getAttribute('e-mappinguid'));\n }\n _this.column = col;\n if (_this.column.lockColumn) {\n return false;\n }\n visualElement.setAttribute('e-mappinguid', _this.column.uid);\n }\n if (col && !isNullOrUndefined(col.headerTemplate)) {\n if (!isNullOrUndefined(col.headerTemplate)) {\n var colIndex = gObj.getColumnIndexByField(col.field);\n var result = col.getHeaderTemplate()(extend({ 'index': colIndex }, col), gObj, 'headerTemplate');\n var isReactCompiler = gObj.isReact && typeof (col.headerTemplate) !== 'string';\n var isReactChild = gObj.parentDetails && gObj.parentDetails.parentInstObj &&\n gObj.parentDetails.parentInstObj.isReact;\n if (isReactCompiler || isReactChild) {\n gObj.renderTemplates();\n }\n appendChildren(visualElement, result);\n }\n else {\n visualElement.innerHTML = col.headerTemplate;\n }\n if (!isNullOrUndefined(visualElement.firstChild) && visualElement.firstChild.nodeType === 1) {\n visualElement.firstChild.style.pointerEvents = 'none';\n }\n }\n else {\n visualElement.innerHTML = headercelldiv ?\n col.headerText : element.firstElementChild.innerHTML;\n }\n visualElement.style.width = element.offsetWidth + 'px';\n visualElement.style.height = element.offsetHeight + 'px';\n visualElement.style.lineHeight = (height - 6).toString() + 'px';\n gObj.element.appendChild(visualElement);\n return visualElement;\n };\n this.dragStart = function (e) {\n var gObj = _this.parent;\n gObj.element.querySelector('.e-gridpopup').style.display = 'none';\n gObj.notify(events.columnDragStart, { target: _this.draggable.currentStateTarget, column: _this.column, event: e.event });\n };\n this.drag = function (e) {\n var gObj = _this.parent;\n var target = e.target;\n if (target) {\n var closest = getClosest(target, '.e-grid');\n var cloneElement = _this.parent.element.querySelector('.e-cloneproperties');\n if (!closest || closest.getAttribute('id') !== gObj.element.getAttribute('id')) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n if (gObj.allowReordering) {\n gObj.element.querySelector('.e-reorderuparrow').style.display = 'none';\n gObj.element.querySelector('.e-reorderdownarrow').style.display = 'none';\n }\n if (!gObj.groupSettings.allowReordering) {\n return;\n }\n }\n gObj.notify(events.columnDrag, { target: e.target, column: _this.column, event: e.event });\n }\n };\n this.dragStop = function (e) {\n var gObj = _this.parent;\n var cancel;\n gObj.element.querySelector('.e-gridpopup').style.display = 'none';\n if ((!parentsUntil(e.target, 'e-headercell') && !parentsUntil(e.target, 'e-groupdroparea')) ||\n (!gObj.allowReordering && parentsUntil(e.target, 'e-headercell')) ||\n (!e.helper.getAttribute('e-mappinguid') && parentsUntil(e.target, 'e-groupdroparea'))) {\n remove(e.helper);\n cancel = true;\n }\n gObj.notify(events.columnDragStop, { target: e.target, event: e.event, column: _this.column, cancel: cancel });\n };\n this.drop = function (e) {\n var gObj = _this.parent;\n var uid = e.droppedElement.getAttribute('e-mappinguid');\n var closest = getClosest(e.target, '.e-grid');\n remove(e.droppedElement);\n if (closest && closest.getAttribute('id') !== gObj.element.getAttribute('id') ||\n !(gObj.allowReordering || gObj.allowGrouping)) {\n return;\n }\n gObj.notify(events.headerDrop, { target: e.target, uid: uid, droppedElement: e.droppedElement });\n };\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.ariaService = this.serviceLocator.getService('ariaService');\n this.widthService = this.serviceLocator.getService('widthService');\n if (this.parent.isDestroyed) {\n return;\n }\n if (!this.parent.enableColumnVirtualization) {\n this.parent.on(events.columnVisibilityChanged, this.setVisible, this);\n }\n this.parent.on(events.columnPositionChanged, this.colPosRefresh, this);\n this.parent.on(events.initialEnd, this.renderCustomToolbar, this);\n if (this.parent.rowRenderingMode === 'Vertical') {\n this.parent.on(events.uiUpdate, this.updateCustomResponsiveToolbar, this);\n }\n }\n /**\n * The function is used to render grid header div\n *\n * @returns {void}\n */\n HeaderRender.prototype.renderPanel = function () {\n var div = this.parent.element.querySelector('.' + literals.gridHeader);\n var isRendered = (div != null);\n div = isRendered ? div : this.parent.createElement('div', { className: 'e-gridheader' });\n var innerDiv = isRendered ? div.querySelector('.' + literals.headerContent) :\n this.parent.createElement('div', { className: literals.headerContent });\n this.toggleStackClass(div);\n div.appendChild(innerDiv);\n this.setPanel(div);\n if (!isRendered) {\n this.parent.element.appendChild(div);\n }\n };\n /**\n * The function is used to render grid header div\n *\n * @returns {void}\n */\n HeaderRender.prototype.renderTable = function () {\n var headerDiv = this.getPanel();\n headerDiv.appendChild(this.createHeaderTable());\n this.setTable(headerDiv.querySelector('.' + literals.table));\n this.initializeHeaderDrag();\n this.initializeHeaderDrop();\n this.parent.notify(events.headerRefreshed, { rows: this.rows });\n };\n /**\n * Get the header content div element of grid\n *\n * @returns {Element} returns the element\n */\n HeaderRender.prototype.getPanel = function () {\n return this.headerPanel;\n };\n /**\n * Set the header content div element of grid\n *\n * @param {Element} panel - specifies the panel element\n * @returns {void}\n */\n HeaderRender.prototype.setPanel = function (panel) {\n this.headerPanel = panel;\n };\n /**\n * Get the header table element of grid\n *\n * @returns {Element} returns the element\n */\n HeaderRender.prototype.getTable = function () {\n return this.headerTable;\n };\n /**\n * Set the header table element of grid\n *\n * @param {Element} table - specifies the table element\n * @returns {void}\n */\n HeaderRender.prototype.setTable = function (table) {\n this.headerTable = table;\n };\n /**\n * Get the header colgroup element\n *\n * @returns {Element} returns the element\n */\n HeaderRender.prototype.getColGroup = function () {\n return this.colgroup;\n };\n /**\n * Set the header colgroup element\n *\n * @param {Element} colGroup - specifies the colgroup\n * @returns {Element} returns the element\n */\n HeaderRender.prototype.setColGroup = function (colGroup) {\n return this.colgroup = colGroup;\n };\n /**\n * Get the header row element collection.\n *\n * @returns {Element[]} returns the element\n */\n HeaderRender.prototype.getRows = function () {\n var table = this.getTable();\n return table.tHead.rows;\n };\n /**\n * The function is used to create header table elements\n *\n * @returns {Element} returns the element\n * @hidden\n */\n HeaderRender.prototype.createHeaderTable = function () {\n var table = this.createTable();\n var innerDiv = this.getPanel().querySelector('.' + literals.headerContent);\n innerDiv.appendChild(table);\n return innerDiv;\n };\n /**\n * The function is used to create header table elements\n *\n * @param {Element} tableEle - specifies the table Element\n * @param {freezeTable} tableName - specifies the table name\n * @returns {Element} returns the element\n * @hidden\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n HeaderRender.prototype.createHeader = function (tableEle, tableName) {\n if (tableEle === void 0) { tableEle = null; }\n var gObj = this.parent;\n if (this.getTable()) {\n remove(this.getTable());\n }\n var table = this.parent.createElement('table', { className: literals.table, attrs: { cellspacing: '0.25px', role: 'presentation' } });\n var findHeaderRow = this.createHeaderContent(tableName);\n var thead = findHeaderRow.thead;\n var tbody = this.parent.createElement(literals.tbody, { className: this.parent.frozenRows ? '' : 'e-hide', attrs: { role: 'rowgroup' } });\n this.caption = this.parent.createElement('caption', { innerHTML: this.parent.element.id + '_header_table', className: 'e-hide' });\n var colGroup = this.parent.createElement(literals.colGroup);\n var rowBody = this.parent.createElement('tr', { attrs: { role: 'row' } });\n var bodyCell;\n var rows = this.rows = findHeaderRow.rows;\n for (var i = 0, len = rows.length; i < len; i++) {\n for (var j = 0, len_1 = rows[parseInt(i.toString(), 10)].cells.length; j < len_1; j++) {\n bodyCell = this.parent.createElement('td');\n rowBody.appendChild(bodyCell);\n }\n }\n if (gObj.allowFiltering || gObj.allowSorting || gObj.allowGrouping) {\n table.classList.add('e-sortfilter');\n }\n this.updateColGroup(colGroup);\n tbody.appendChild(rowBody);\n table.appendChild(this.setColGroup(colGroup));\n table.appendChild(thead);\n table.appendChild(tbody);\n table.appendChild(this.caption);\n return table;\n };\n /**\n * @param {Element} tableEle - specifies the column\n * @returns {Element} returns the element\n * @hidden\n */\n HeaderRender.prototype.createTable = function (tableEle) {\n if (tableEle === void 0) { tableEle = null; }\n return this.createHeader(tableEle);\n };\n HeaderRender.prototype.createHeaderContent = function (tableName) {\n var gObj = this.parent;\n var columns = gObj.getColumns();\n var thead = this.parent.createElement('thead', { attrs: { 'role': 'rowgroup' } });\n var colHeader = this.parent.createElement('tr', { className: 'e-columnheader', attrs: { role: 'row' } });\n var rowRenderer = new RowRenderer(this.serviceLocator, CellType.Header, gObj);\n rowRenderer.element = colHeader;\n var rows = [];\n var headerRow;\n this.colDepth = measureColumnDepth(gObj.columns);\n for (var i = 0, len = this.colDepth; i < len; i++) {\n rows[parseInt(i.toString(), 10)] = this.generateRow(i);\n rows[parseInt(i.toString(), 10)].cells = [];\n }\n rows = this.ensureColumns(rows);\n rows = this.getHeaderCells(rows, tableName);\n if (gObj.isRowDragable() && this.parent.getFrozenMode() === 'Right') {\n for (var i = 0, len = rows.length; i < len; i++) {\n rows[parseInt(i.toString(), 10)].cells.push(this.generateCell({}, CellType.RowDragHIcon));\n }\n }\n for (var i = 0, len = this.colDepth; i < len; i++) {\n headerRow = rowRenderer.render(rows[parseInt(i.toString(), 10)], columns);\n if (this.parent.rowHeight && headerRow.querySelector('.e-headercell')) {\n headerRow.style.height = this.parent.rowHeight + 'px';\n }\n addFixedColumnBorder(headerRow);\n thead.appendChild(headerRow);\n }\n var findHeaderRow = {\n thead: thead,\n rows: rows\n };\n return findHeaderRow;\n };\n HeaderRender.prototype.updateColGroup = function (colGroup) {\n var cols = this.parent.getColumns();\n var col;\n var indexes = this.parent.getColumnIndexesInView();\n colGroup.id = this.parent.element.id + literals.colGroup;\n if (this.parent.allowGrouping) {\n for (var i = 0, len = this.parent.groupSettings.columns.length; i < len; i++) {\n if (this.parent.enableColumnVirtualization && indexes.indexOf(i) === -1) {\n continue;\n }\n col = this.parent.createElement('col', { className: 'e-group-intent' });\n colGroup.appendChild(col);\n }\n }\n if (this.parent.detailTemplate || this.parent.childGrid) {\n col = this.parent.createElement('col', { className: 'e-detail-intent' });\n colGroup.appendChild(col);\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() !== 'Right') {\n col = this.parent.createElement('col', { className: 'e-drag-intent' });\n colGroup.appendChild(col);\n }\n for (var i = 0, len = cols.length; i < len; i++) {\n col = this.parent.createElement('col');\n if (cols[parseInt(i.toString(), 10)].visible === false) {\n setStyleAttribute(col, { 'display': 'none' });\n }\n colGroup.appendChild(col);\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() === 'Right') {\n col = this.parent.createElement('col', { className: 'e-drag-intent' });\n colGroup.appendChild(col);\n }\n return colGroup;\n };\n HeaderRender.prototype.ensureColumns = function (rows) {\n //TODO: generate dummy column for group, detail, stacked row here; ensureColumns here\n var gObj = this.parent;\n var indexes = this.parent.getColumnIndexesInView();\n for (var i = 0, len = rows.length; i < len; i++) {\n if (gObj.allowGrouping) {\n for (var c = 0, len_2 = gObj.groupSettings.columns.length; c < len_2; c++) {\n if (this.parent.enableColumnVirtualization && indexes.indexOf(c) === -1) {\n continue;\n }\n rows[parseInt(i.toString(), 10)].cells.push(this.generateCell({}, CellType.HeaderIndent));\n }\n }\n if (gObj.detailTemplate || gObj.childGrid) {\n var args = {};\n this.parent.notify(events.detailIndentCellInfo, args);\n rows[parseInt(i.toString(), 10)].cells.push(this.generateCell(args, CellType.DetailHeader));\n }\n if (gObj.isRowDragable() && this.parent.getFrozenMode() !== 'Right') {\n rows[parseInt(i.toString(), 10)].cells.push(this.generateCell({}, CellType.RowDragHIcon));\n }\n }\n return rows;\n };\n HeaderRender.prototype.getHeaderCells = function (rows, tableName) {\n var thead = this.parent.getHeaderTable() && this.parent.getHeaderTable().querySelector('thead');\n var cols = this.parent.enableColumnVirtualization ?\n this.parent.getColumns(this.parent.enablePersistence) : this.parent.columns;\n this.frzIdx = 0;\n this.notfrzIdx = 0;\n if (this.parent.lockcolPositionCount) {\n for (var i = 0; i < cols.length; i++) {\n this.lockColsRendered = false;\n rows = this.appendCells(cols[parseInt(i.toString(), 10)], rows, 0, i === 0, false, i === (cols.length - 1), thead, tableName, false);\n }\n }\n for (var i = 0, len = cols.length; i < len; i++) {\n this.notfrzIdx = 0;\n this.lockColsRendered = true;\n rows = this.appendCells(cols[parseInt(i.toString(), 10)], rows, 0, i === 0, false, i === (len - 1), thead, tableName, false);\n }\n return rows;\n };\n HeaderRender.prototype.appendCells = function (cols, rows, index, isFirstObj, isFirstCol, isLastCol, isMovable, tableName, isStackLastCol) {\n var lastCol = isLastCol ? isStackLastCol ? 'e-laststackcell' : 'e-lastcell' : '';\n var isLockColumn = !this.parent.lockcolPositionCount\n || (cols.lockColumn && !this.lockColsRendered) || (!cols.lockColumn && this.lockColsRendered);\n if (!cols.columns) {\n if (isLockColumn) {\n rows[parseInt(index.toString(), 10)].cells.push(this.generateCell(cols, CellType.Header, this.colDepth - index, (isFirstObj ? '' : (isFirstCol ? 'e-firstcell' : '')) + lastCol, index, this.parent.getColumnIndexByUid(cols.uid)));\n }\n if (this.parent.lockcolPositionCount) {\n if ((this.frzIdx + this.notfrzIdx < this.parent.frozenColumns) &&\n ((cols.lockColumn && !this.lockColsRendered) || (!cols.lockColumn && this.lockColsRendered))) {\n this.frzIdx++;\n }\n else {\n this.notfrzIdx++;\n }\n }\n else {\n this.frzIdx++;\n }\n }\n else {\n this.isFirstCol = false;\n var colSpan = this.getCellCnt(cols, 0);\n if (colSpan) {\n var stackedLockColsCount = this.getStackedLockColsCount(cols, 0);\n var isStackedLockColumn = this.parent.lockcolPositionCount === 0\n || (!this.lockColsRendered && stackedLockColsCount !== 0)\n || (this.lockColsRendered && (colSpan - stackedLockColsCount) !== 0);\n if (isStackedLockColumn) {\n rows[parseInt(index.toString(), 10)].cells.push(new Cell({\n cellType: CellType.StackedHeader, column: cols,\n colSpan: this.getColSpan(colSpan, stackedLockColsCount),\n className: isFirstObj ? '' : (isFirstCol ? 'e-firstcell' : '')\n }));\n }\n }\n if (this.parent.lockcolPositionCount && !this.lockColsRendered) {\n for (var i = 0; i < cols.columns.length; i++) {\n rows = this.appendCells(cols.columns[parseInt(i.toString(), 10)], rows, index + 1, isFirstObj, i === 0, i === (cols.columns.length - 1) && isLastCol, isMovable, tableName, false);\n }\n }\n if (this.lockColsRendered) {\n for (var i = 0, len = cols.columns.length; i < len; i++) {\n isFirstObj = isFirstObj && i === 0;\n var isFirstCol_1 = this.isFirstCol = cols.columns[parseInt(i.toString(), 10)].visible\n && !isFirstObj;\n var isLaststackedCol = i === (len - 1) && isLastCol;\n rows = this.appendCells(cols.columns[parseInt(i.toString(), 10)], rows, index + 1, isFirstObj, isFirstCol_1 && !isLaststackedCol, isLaststackedCol, isMovable, tableName, true);\n }\n }\n }\n return rows;\n };\n HeaderRender.prototype.getStackedLockColsCount = function (col, lockColsCount) {\n if (col.columns) {\n for (var i = 0; i < col.columns.length; i++) {\n lockColsCount = this.getStackedLockColsCount(col.columns[parseInt(i.toString(), 10)], lockColsCount);\n }\n }\n else if (col.lockColumn) {\n lockColsCount++;\n }\n return lockColsCount;\n };\n HeaderRender.prototype.getColSpan = function (colSpan, stackedLockColsCount) {\n colSpan = !this.lockColsRendered ? stackedLockColsCount : colSpan - stackedLockColsCount;\n return colSpan;\n };\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n HeaderRender.prototype.generateRow = function (index) {\n return new Row({});\n };\n HeaderRender.prototype.generateCell = function (column, cellType, rowSpan, className, rowIndex, colIndex) {\n var opt = {\n 'visible': column.visible,\n 'isDataCell': false,\n 'isTemplate': !isNullOrUndefined(column.headerTemplate),\n 'rowID': '',\n 'column': column,\n 'cellType': cellType,\n 'rowSpan': rowSpan,\n 'className': className,\n 'index': rowIndex,\n 'colIndex': colIndex\n };\n if (!opt.rowSpan || opt.rowSpan < 2) {\n delete opt.rowSpan;\n }\n return new Cell(opt);\n };\n /**\n * Function to hide header table column based on visible property\n *\n * @param {Column[]} columns - specifies the column\n * @returns {void}\n */\n HeaderRender.prototype.setVisible = function (columns) {\n var gObj = this.parent;\n var displayVal;\n var idx;\n for (var c = 0, clen = columns.length; c < clen; c++) {\n var column = columns[parseInt(c.toString(), 10)];\n idx = gObj.getNormalizedColumnIndex(column.uid);\n displayVal = column.visible ? '' : 'none';\n setStyleAttribute(this.getColGroup().children[parseInt(idx.toString(), 10)], { 'display': displayVal });\n }\n this.refreshUI();\n };\n HeaderRender.prototype.colPosRefresh = function () {\n this.refreshUI();\n };\n /**\n * Refresh the header of the Grid.\n *\n * @returns {void}\n */\n HeaderRender.prototype.refreshUI = function () {\n var headerDiv = this.getPanel();\n this.toggleStackClass(headerDiv);\n var table = this.freezeReorder ? this.headerPanel.querySelector('.' + literals.movableHeader).querySelector('.' + literals.table)\n : this.getTable();\n var tableName = undefined;\n if (table) {\n remove(table);\n table.removeChild(table.firstChild);\n table.removeChild(table.childNodes[0]);\n var colGroup = this.parent.createElement(literals.colGroup);\n var findHeaderRow = this.createHeaderContent(tableName);\n this.rows = findHeaderRow.rows;\n table.insertBefore(findHeaderRow.thead, table.firstChild);\n this.updateColGroup(colGroup);\n table.insertBefore(this.setColGroup(colGroup), table.firstChild);\n this.appendContent(table);\n this.parent.notify(events.colGroupRefresh, {});\n this.widthService.setWidthToColumns();\n this.parent.updateDefaultCursor();\n this.initializeHeaderDrag();\n var rows = [].slice.call(headerDiv.querySelectorAll('tr.e-columnheader'));\n for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {\n var row = rows_1[_i];\n var gCells = [].slice.call(row.getElementsByClassName('e-grouptopleftcell'));\n if (gCells.length) {\n gCells[gCells.length - 1].classList.add('e-lastgrouptopleftcell');\n }\n }\n this.parent.notify(events.headerRefreshed, { rows: this.rows });\n if (this.parent.enableColumnVirtualization && parentsUntil(table, literals.movableHeader)) {\n this.parent.notify(events.headerRefreshed, { rows: this.rows, args: { isFrozen: false, isXaxis: true } });\n }\n if (this.parent.allowTextWrap && this.parent.textWrapSettings.wrapMode === 'Header') {\n wrap(rows, true);\n }\n }\n var firstHeaderCell = this.parent.getHeaderContent().querySelector('.e-headercell:not(.e-hide)');\n if (!isNullOrUndefined(firstHeaderCell)) {\n firstHeaderCell.tabIndex = 0;\n }\n };\n HeaderRender.prototype.toggleStackClass = function (div) {\n var column = this.parent.columns;\n var stackedHdr = column.some(function (column) { return !isNullOrUndefined(column.columns); });\n if (stackedHdr) {\n div.classList.add('e-stackedheader');\n }\n else {\n div.classList.remove('e-stackedheader');\n }\n };\n HeaderRender.prototype.appendContent = function (table) {\n this.getPanel().querySelector('.' + literals.headerContent).appendChild(table);\n };\n HeaderRender.prototype.getCellCnt = function (col, cnt) {\n if (col.columns) {\n for (var i = 0, len = col.columns.length; i < len; i++) {\n cnt = this.getCellCnt(col.columns[parseInt(i.toString(), 10)], cnt);\n }\n }\n else {\n if (col.visible) {\n cnt++;\n }\n }\n return cnt;\n };\n HeaderRender.prototype.initializeHeaderDrag = function () {\n var gObj = this.parent;\n if (!(this.parent.allowReordering || (this.parent.allowGrouping && this.parent.groupSettings.showDropArea))) {\n return;\n }\n this.draggable = new Draggable(gObj.getHeaderContent(), {\n dragTarget: '.e-headercell',\n distance: 5,\n helper: this.helper,\n dragStart: this.dragStart,\n drag: this.drag,\n dragStop: this.dragStop,\n abort: '.e-rhandler',\n isReplaceDragEle: this.isReplaceDragEle\n });\n this.parent.on(events.destroy, this.droppableDestroy, this);\n };\n HeaderRender.prototype.initializeHeaderDrop = function () {\n var gObj = this.parent;\n this.droppable = new Droppable(gObj.getHeaderContent(), {\n accept: '.e-dragclone',\n drop: this.drop\n });\n this.parent.on(events.destroy, this.droppableDestroy, this);\n };\n HeaderRender.prototype.droppableDestroy = function () {\n if (this.droppable && !this.droppable.isDestroyed) {\n this.droppable.destroy();\n }\n if (this.draggable && !this.draggable.isDestroyed) {\n this.draggable.destroy();\n }\n };\n HeaderRender.prototype.renderCustomToolbar = function () {\n var _this = this;\n var gObj = this.parent;\n if (gObj.rowRenderingMode === 'Vertical' && !gObj.toolbar\n && (gObj.allowSorting || (gObj.allowFiltering && gObj.filterSettings.type !== 'FilterBar'))) {\n var div = gObj.createElement('div', { className: 'e-res-toolbar e-toolbar' });\n var toolbarItems = gObj.createElement('div', { className: 'e-toolbar-items' });\n var toolbarLeft = gObj.createElement('div', { className: 'e-toolbar-left' });\n var count = this.parent.allowFiltering && this.parent.allowSorting ? 2 : 1;\n for (var i = 0; i < count; i++) {\n var toolbarItem = gObj.createElement('div', { className: 'e-toolbar-item e-gridresponsiveicons e-icons e-tbtn-align' });\n var cls = count === 1 ? this.parent.allowSorting ? 'sort'\n : 'filter' : i === 1 ? 'sort' : 'filter';\n var button = gObj.createElement('button', { className: 'e-tbar-btn e-control e-btn e-lib e-icon-btn' });\n var span = gObj.createElement('span', { className: 'e-btn-icon e-res' + cls + '-icon e-icons' });\n button.appendChild(span);\n var btnObj = new Button({\n cssClass: this.parent.cssClass ? this.parent.cssClass : ''\n });\n btnObj.appendTo(button);\n button.onclick = function (e) {\n if (e.target.classList.contains('e-ressort-btn')\n || e.target.classList.contains('e-ressort-icon')) {\n _this.parent.showResponsiveCustomSort();\n }\n else {\n _this.parent.showResponsiveCustomFilter();\n }\n };\n toolbarItem.appendChild(button);\n toolbarLeft.appendChild(toolbarItem);\n }\n toolbarItems.appendChild(toolbarLeft);\n div.appendChild(toolbarItems);\n gObj.element.insertBefore(div, this.parent.element.querySelector('.' + literals.gridHeader));\n }\n else {\n if (gObj.enableAdaptiveUI && !gObj.toolbar) {\n gObj.getContent().classList.add('e-responsive-header');\n }\n }\n };\n HeaderRender.prototype.updateCustomResponsiveToolbar = function (args) {\n var resToolbar = this.parent.element.querySelector('.e-responsive-toolbar');\n if (args.module === 'toolbar') {\n if (resToolbar) {\n remove(resToolbar);\n }\n else {\n this.renderCustomToolbar();\n }\n }\n };\n return HeaderRender;\n}());\nexport { HeaderRender };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined, extend, addClass } from '@syncfusion/ej2-base';\nimport { attributes } from '@syncfusion/ej2-base';\nimport { setStyleAndAttributes, appendChildren, addStickyColumnPosition } from '../base/util';\nimport { CellRenderer } from './cell-renderer';\nimport { AriaService } from '../services/aria-service';\nimport { createCheckBox } from '@syncfusion/ej2-buttons';\nimport { headerCellInfo } from '../base/constant';\n/**\n * HeaderCellRenderer class which responsible for building header cell content.\n *\n * @hidden\n */\nvar HeaderCellRenderer = /** @class */ (function (_super) {\n __extends(HeaderCellRenderer, _super);\n function HeaderCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent\n .createElement('TH', { className: 'e-headercell', attrs: { tabindex: '-1', role: 'columnheader' } });\n _this.ariaService = new AriaService();\n _this.hTxtEle = _this.parent.createElement('span', { className: 'e-headertext' });\n _this.sortEle = _this.parent.createElement('div', { className: 'e-sortfilterdiv e-icons', attrs: { 'aria-hidden': 'true' } });\n _this.gui = _this.parent.createElement('div');\n _this.chkAllBox = _this.parent.createElement('input', { className: 'e-checkselectall', attrs: { 'type': 'checkbox', 'aria-label': _this.localizer.getConstant('SelectAllCheckbox') } });\n return _this;\n }\n /**\n * Function to return the wrapper for the TH content.\n *\n * @returns {string | Element} returns the element\n */\n HeaderCellRenderer.prototype.getGui = function () {\n return this.gui.cloneNode();\n };\n /**\n * Function to render the cell content based on Column object.\n *\n * @param {Cell} cell - specifies the column\n * @param {Object} data - specifies the data\n * @param {object} attributes - specifies the aattributes\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n HeaderCellRenderer.prototype.render = function (cell, data, attributes) {\n var node = this.element.cloneNode();\n var fltrMenuEle = this.parent.createElement('div', { className: 'e-filtermenudiv e-icons e-icon-filter', attrs: { 'aria-hidden': 'true' } });\n return this.prepareHeader(cell, node, fltrMenuEle);\n };\n /**\n * Function to refresh the cell content based on Column object.\n *\n * @param {Cell} cell - specifies the cell\n * @param {Element} node - specifies the noe\n * @returns {Element} returns the element\n */\n HeaderCellRenderer.prototype.refresh = function (cell, node) {\n this.clean(node);\n var fltrMenuEle = this.parent.createElement('div', { className: 'e-filtermenudiv e-icons e-icon-filter', attrs: { 'aria-hidden': 'true' } });\n return this.prepareHeader(cell, node, fltrMenuEle);\n };\n HeaderCellRenderer.prototype.clean = function (node) {\n node.innerHTML = '';\n };\n /* tslint:disable-next-line:max-func-body-length */\n HeaderCellRenderer.prototype.prepareHeader = function (cell, node, fltrMenuEle) {\n var column = cell.column;\n var ariaAttr = {};\n var elementDesc = '';\n //Prepare innerHtml\n var innerDIV = this.getGui();\n var hValueAccer;\n attributes(innerDIV, {\n 'e-mappinguid': column.uid,\n 'class': 'e-headercelldiv'\n });\n if (!isNullOrUndefined(column.headerValueAccessor)) {\n hValueAccer = this.getValue(column.headerText, column);\n }\n if (column.type !== 'checkbox') {\n var value = column.headerText;\n if (!isNullOrUndefined(hValueAccer)) {\n value = hValueAccer;\n }\n var headerText = this.hTxtEle.cloneNode();\n headerText[column.getDomSetter()] = this.parent.sanitize(value);\n innerDIV.appendChild(headerText);\n }\n else {\n column.editType = 'booleanedit';\n var checkAllWrap = createCheckBox(this.parent.createElement, false, { checked: false, label: ' ' });\n this.chkAllBox.id = 'checkbox-' + column.uid;\n checkAllWrap.insertBefore(this.chkAllBox.cloneNode(), checkAllWrap.firstChild);\n if (this.parent.cssClass) {\n addClass([checkAllWrap], [this.parent.cssClass]);\n }\n innerDIV.appendChild(checkAllWrap);\n innerDIV.classList.add('e-headerchkcelldiv');\n }\n this.buildAttributeFromCell(node, cell);\n this.appendHtml(node, innerDIV);\n node.appendChild(this.sortEle.cloneNode());\n if ((this.parent.allowFiltering && this.parent.filterSettings.type !== 'FilterBar') &&\n (column.allowFiltering && !isNullOrUndefined(column.field)) &&\n !(this.parent.showColumnMenu && column.showColumnMenu)) {\n attributes(fltrMenuEle, {\n 'e-mappinguid': 'e-flmenu-' + column.uid\n });\n elementDesc = elementDesc.length ? elementDesc + '. ' + this.localizer.getConstant('FilterDescription') : this.localizer.getConstant('FilterDescription');\n node.classList.add('e-fltr-icon');\n var matchFlColumns = [];\n if (this.parent.filterSettings.columns.length && this.parent.filterSettings.columns.length !== matchFlColumns.length) {\n var foreignColumn = this.parent.getForeignKeyColumns();\n for (var index = 0; index < this.parent.columns.length; index++) {\n for (var count = 0; count < this.parent.filterSettings.columns.length; count++) {\n if (this.parent.filterSettings.columns[parseInt(count.toString(), 10)].field === column.field\n || (foreignColumn.length\n && column.foreignKeyValue === this.parent.filterSettings.columns[parseInt(count.toString(), 10)].field)) {\n fltrMenuEle.classList.add('e-filtered');\n matchFlColumns.push(column.field);\n break;\n }\n }\n }\n }\n node.appendChild(fltrMenuEle.cloneNode());\n }\n if (cell.className) {\n node.classList.add(cell.className);\n }\n if (column.customAttributes) {\n setStyleAndAttributes(node, column.customAttributes);\n }\n if (this.parent.allowSorting && column.allowSorting) {\n ariaAttr.sort = 'none';\n elementDesc = elementDesc.length ? elementDesc + '. ' + this.localizer.getConstant('SortDescription') : this.localizer.getConstant('SortDescription');\n }\n if ((this.parent.allowGrouping && column.allowGrouping) || this.parent.allowReordering && column.allowReordering) {\n ariaAttr.grabbed = false;\n elementDesc = elementDesc.length ? elementDesc + '. ' + this.localizer.getConstant('GroupDescription') : this.localizer.getConstant('GroupDescription');\n }\n if (this.parent.showColumnMenu && column.type !== 'checkbox' && !column.template) {\n elementDesc = elementDesc.length ? elementDesc + '. ' + this.localizer.getConstant('ColumnMenuDescription') : this.localizer.getConstant('ColumnMenuDescription');\n }\n node = this.extendPrepareHeader(column, node);\n var result;\n var gridObj = this.parent;\n var colIndex = gridObj.getColumnIndexByField(column.field);\n if (!isNullOrUndefined(column.headerTemplate)) {\n //need to pass the template id for blazor headertemplate\n var headerTempID = gridObj.element.id + column.uid + 'headerTemplate';\n var str = 'isStringTemplate';\n var col = column;\n var isReactCompiler = this.parent.isReact && typeof (column.headerTemplate) !== 'string';\n var isReactChild_1 = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n if (isReactCompiler || isReactChild_1) {\n var copied = { 'index': colIndex };\n node.firstElementChild.innerHTML = '';\n column.getHeaderTemplate()(extend(copied, col), gridObj, 'headerTemplate', headerTempID, this.parent[\"\" + str], null, node.firstElementChild);\n this.parent.renderTemplates();\n }\n else {\n result = column.getHeaderTemplate()(extend({ 'index': colIndex }, col), gridObj, 'headerTemplate', headerTempID, this.parent[\"\" + str], undefined, undefined, this.parent['root']);\n node.firstElementChild.innerHTML = '';\n appendChildren(node.firstElementChild, result);\n }\n }\n this.ariaService.setOptions(node, ariaAttr);\n if (!isNullOrUndefined(column.headerTextAlign) || !isNullOrUndefined(column.textAlign)) {\n var alignment = column.headerTextAlign || column.textAlign;\n innerDIV.style.textAlign = alignment;\n if (alignment === 'Right' || alignment === 'Left') {\n node.classList.add(alignment === 'Right' ? 'e-rightalign' : 'e-leftalign');\n }\n else if (alignment === 'Center') {\n node.classList.add('e-centeralign');\n }\n }\n if (column.clipMode === 'Clip' || (!column.clipMode && this.parent.clipMode === 'Clip')) {\n node.classList.add('e-gridclip');\n }\n else if ((column.clipMode === 'EllipsisWithTooltip' || (!column.clipMode && this.parent.clipMode === 'EllipsisWithTooltip'))\n && !(gridObj.allowTextWrap && (gridObj.textWrapSettings.wrapMode === 'Header'\n || gridObj.textWrapSettings.wrapMode === 'Both'))) {\n if (column.type !== 'checkbox') {\n node.classList.add('e-ellipsistooltip');\n }\n }\n if (elementDesc) {\n var titleElem = (this.parent.createElement('span', { id: 'headerTitle-' + column.uid, innerHTML: elementDesc, attrs: { style: 'display:none' } }));\n node.appendChild(titleElem);\n node.setAttribute('aria-describedby', titleElem.id);\n }\n node.setAttribute('aria-rowspan', (!isNullOrUndefined(cell.rowSpan) ? cell.rowSpan : 1).toString());\n node.setAttribute('aria-colspan', '1');\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n if (((this.parent.isReact && this.parent.requireTemplateRef)\n || (isReactChild && this.parent.parentDetails.parentInstObj.requireTemplateRef))\n && !isNullOrUndefined(column.headerTemplate)) {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n var thisRef_1 = this;\n thisRef_1.parent.renderTemplates(function () {\n thisRef_1.parent.trigger(headerCellInfo, { cell: cell, node: node });\n });\n }\n else {\n this.parent.trigger(headerCellInfo, { cell: cell, node: node });\n }\n if (this.parent.isFrozenGrid()) {\n addStickyColumnPosition(this.parent, column, node);\n }\n return node;\n };\n HeaderCellRenderer.prototype.getValue = function (field, column) {\n return column.headerValueAccessor(field, column);\n };\n HeaderCellRenderer.prototype.extendPrepareHeader = function (column, node) {\n if (this.parent.showColumnMenu && column.showColumnMenu && !isNullOrUndefined(column.field)) {\n var element = (this.parent.createElement('div', { className: 'e-icons e-columnmenu', attrs: { 'aria-hidden': 'true' } }));\n var matchFilteredColumns = [];\n if (this.parent.filterSettings.columns.length && this.parent.filterSettings.columns.length !== matchFilteredColumns.length) {\n for (var i = 0; i < this.parent.columns.length; i++) {\n for (var j = 0; j < this.parent.filterSettings.columns.length; j++) {\n if (this.parent.filterSettings.columns[parseInt(j.toString(), 10)].field === column.field) {\n element.classList.add('e-filtered');\n matchFilteredColumns.push(column.field);\n break;\n }\n }\n }\n }\n node.classList.add('e-fltr-icon');\n node.appendChild(element);\n }\n if (this.parent.allowResizing) {\n var handler = this.parent.createElement('div');\n handler.className = column.allowResizing ? 'e-rhandler e-rcursor' : 'e-rsuppress';\n node.appendChild(handler);\n }\n return node;\n };\n /**\n * Function to specifies how the result content to be placed in the cell.\n *\n * @param {Element} node - specifies the node\n * @param {string|Element} innerHtml - specifies the innerHtml\n * @returns {Element} returns the element\n */\n HeaderCellRenderer.prototype.appendHtml = function (node, innerHtml) {\n node.appendChild(innerHtml);\n return node;\n };\n return HeaderCellRenderer;\n}(CellRenderer));\nexport { HeaderCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\nimport { headerCellInfo } from '../base/constant';\nimport { setStyleAndAttributes, appendChildren, frozenDirection, isChildColumn, applyStickyLeftRightPosition } from '../base/util';\n/**\n * StackedHeaderCellRenderer class which responsible for building stacked header cell content.\n *\n * @hidden\n */\nvar StackedHeaderCellRenderer = /** @class */ (function (_super) {\n __extends(StackedHeaderCellRenderer, _super);\n function StackedHeaderCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', {\n className: 'e-headercell e-stackedheadercell', attrs: {\n tabindex: '-1', role: 'columnheader'\n }\n });\n return _this;\n }\n /**\n * Function to render the cell content based on Column object.\n *\n * @param {Cell
} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @param {object} attributes - specifies the attributes\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n StackedHeaderCellRenderer.prototype.render = function (cell, data, attributes) {\n var node = this.element.cloneNode();\n var div = this.parent.createElement('div', {\n className: 'e-stackedheadercelldiv',\n attrs: { 'e-mappinguid': cell.column.uid }\n });\n var column = cell.column;\n node.appendChild(div);\n if (!isNullOrUndefined(column.headerTemplate)) {\n appendChildren(div, column.getHeaderTemplate()(column, this.parent, 'headerTemplate'));\n }\n else {\n this.appendHtml(div, this.parent.sanitize(column.headerText), column.getDomSetter());\n }\n if (cell.column.toolTip) {\n node.setAttribute('title', cell.column.toolTip);\n }\n if (column.clipMode === 'Clip' || (!column.clipMode && this.parent.clipMode === 'Clip')) {\n node.classList.add('e-gridclip');\n }\n else if (column.clipMode === 'EllipsisWithTooltip' || (!column.clipMode && this.parent.clipMode === 'EllipsisWithTooltip')) {\n node.classList.add('e-ellipsistooltip');\n }\n if (!isNullOrUndefined(cell.column.textAlign)) {\n div.style.textAlign = cell.column.textAlign;\n }\n if (cell.column.customAttributes) {\n setStyleAndAttributes(node, cell.column.customAttributes);\n }\n node.setAttribute('colspan', cell.colSpan.toString());\n node.setAttribute('aria-colspan', cell.colSpan.toString());\n node.setAttribute('aria-rowspan', '1');\n if (this.parent.allowResizing) {\n var handler = this.parent.createElement('div');\n handler.className = cell.column.allowResizing ? 'e-rhandler e-rcursor' : 'e-rsuppress';\n node.appendChild(handler);\n }\n if (cell.className) {\n node.classList.add(cell.className);\n }\n this.parent.trigger(headerCellInfo, { cell: cell, node: node });\n if (frozenDirection(column) === 'Left') {\n node.classList.add('e-leftfreeze');\n if (column.border === 'Left') {\n node.classList.add('e-freezeleftborder');\n }\n if (column.index === 0) {\n applyStickyLeftRightPosition(node, (this.parent.getIndentCount() * 30), this.parent.enableRtl, 'Left');\n }\n else {\n var cols = this.parent.getColumns();\n var width = this.parent.getIndentCount() * 30;\n for (var i = 0; i < cols.length; i++) {\n if (column.index < cols[parseInt(i.toString(), 10)].index) {\n break;\n }\n if (cols[parseInt(i.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(i.toString(), 10)].width.toString());\n }\n }\n applyStickyLeftRightPosition(node, width, this.parent.enableRtl, 'Left');\n }\n }\n else if (frozenDirection(column) === 'Right') {\n node.classList.add('e-rightfreeze');\n var cols = this.parent.getColumns();\n var width = this.parent.getFrozenMode() === 'Right' && this.parent.isRowDragable() ? 30 : 0;\n for (var i = cols.length - 1; i >= 0; i--) {\n if (isChildColumn(column, cols[parseInt(i.toString(), 10)].uid) || column.index > cols[parseInt(i.toString(), 10)].index) {\n break;\n }\n if (cols[parseInt(i.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(i.toString(), 10)].width.toString());\n }\n }\n applyStickyLeftRightPosition(node, width, this.parent.enableRtl, 'Right');\n if (column.border === 'Right') {\n node.classList.add('e-freezerightborder');\n }\n }\n else if (frozenDirection(column) === 'Fixed') {\n node.classList.add('e-fixedfreeze');\n var cols = this.parent.getColumns();\n var width = 0;\n if (this.parent.getVisibleFrozenLeftCount()) {\n width = this.parent.getIndentCount() * 30;\n }\n else if (this.parent.getFrozenMode() === 'Right') {\n width = this.parent.groupSettings.columns.length * 30;\n }\n for (var i = 0; i < cols.length; i++) {\n if (column.index > cols[parseInt(i.toString(), 10)].index) {\n if ((cols[parseInt(i.toString(), 10)].freeze === 'Left' || cols[parseInt(i.toString(), 10)].isFrozen) ||\n cols[parseInt(i.toString(), 10)].freeze === 'Fixed') {\n if (cols[parseInt(i.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(i.toString(), 10)].width.toString());\n }\n }\n }\n }\n applyStickyLeftRightPosition(node, width - 1, this.parent.enableRtl, 'Left');\n width = this.parent.getFrozenMode() === 'Right' && this.parent.isRowDragable() ? 30 : 0;\n for (var i = cols.length - 1; i >= 0; i--) {\n if (column.index < cols[parseInt(i.toString(), 10)].index) {\n if (isChildColumn(column, cols[parseInt(i.toString(), 10)].uid) ||\n column.index > cols[parseInt(i.toString(), 10)].index) {\n break;\n }\n if (cols[parseInt(i.toString(), 10)].freeze === 'Right' || cols[parseInt(i.toString(), 10)].freeze === 'Fixed') {\n if (cols[parseInt(i.toString(), 10)].visible) {\n width += parseFloat(cols[parseInt(i.toString(), 10)].width.toString());\n }\n }\n }\n }\n applyStickyLeftRightPosition(node, width - 1, this.parent.enableRtl, 'Right');\n }\n else {\n node.classList.add('e-unfreeze');\n }\n return node;\n };\n return StackedHeaderCellRenderer;\n}(CellRenderer));\nexport { StackedHeaderCellRenderer };\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 { setStyleAndAttributes } from '../base/util';\nimport { CellRenderer } from './cell-renderer';\n/**\n * IndentCellRenderer class which responsible for building group indent cell.\n *\n * @hidden\n */\nvar IndentCellRenderer = /** @class */ (function (_super) {\n __extends(IndentCellRenderer, _super);\n function IndentCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TD', { className: 'e-indentcell' });\n return _this;\n }\n /**\n * Function to render the indent cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n IndentCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n setStyleAndAttributes(node, cell.attributes);\n return node;\n };\n return IndentCellRenderer;\n}(CellRenderer));\nexport { IndentCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\nimport { appendChildren, templateCompiler } from '../base/util';\nimport { CellType } from '../base/enum';\n/**\n * GroupCaptionCellRenderer class which responsible for building group caption cell.\n *\n * @hidden\n */\nvar GroupCaptionCellRenderer = /** @class */ (function (_super) {\n __extends(GroupCaptionCellRenderer, _super);\n function GroupCaptionCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.cellUid = 0;\n _this.element = _this.parent\n .createElement('TD', { className: 'e-groupcaption',\n attrs: { id: _this.parent.element.id + 'captioncell', tabindex: '-1' } });\n return _this;\n }\n /**\n * Function to render the cell content based on Column object.\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the GroupedData\n * @returns {Element} returns the element\n */\n GroupCaptionCellRenderer.prototype.render = function (cell, data) {\n this.element.id = this.parent.element.id + 'captioncell' + this.cellUid++;\n var node = this.element.cloneNode();\n var gObj = this.parent;\n var column = cell.column;\n var domSetter = column.getDomSetter ? column.getDomSetter() : 'innerHTML';\n var result;\n var fKeyValue;\n var gTemplateValue;\n data.headerText = cell.column.headerText;\n if (cell.isForeignKey) {\n fKeyValue = this.format(cell.column, cell.column.valueAccessor('foreignKey', data, cell.column));\n }\n var value = cell.isForeignKey ? fKeyValue : cell.column.enableGroupByFormat ? data.key :\n this.format(cell.column, cell.column.valueAccessor('key', data, cell.column));\n for (var j = 0; j < gObj.aggregates.length; j++) {\n var _loop_1 = function (i) {\n if (gObj.getVisibleColumns()[0].field === gObj.aggregates[parseInt(j.toString(), 10)].columns[parseInt(i.toString(), 10)]\n .field && gObj.aggregates[parseInt(j.toString(), 10)].columns[parseInt(i.toString(), 10)].groupCaptionTemplate) {\n var gCaptionTemp = gObj.aggregates[parseInt(j.toString(), 10)]\n .columns[parseInt(i.toString(), 10)].groupCaptionTemplate;\n if (typeof gCaptionTemp === 'string' && gCaptionTemp.includes('$')) {\n gTemplateValue = gObj.aggregates[parseInt(j.toString(), 10)].columns[parseInt(i.toString(), 10)]\n .groupCaptionTemplate.split('$')[0] + data[gObj.getVisibleColumns()[0].field][gObj\n .aggregates[parseInt(j.toString(), 10)].columns[parseInt(i.toString(), 10)].type] +\n gObj.aggregates[parseInt(j.toString(), 10)].columns[parseInt(i.toString(), 10)]\n .groupCaptionTemplate.split('}')[1];\n }\n else {\n var column_1 = (gObj.aggregates[parseInt(j.toString(), 10)]\n .columns[parseInt(i.toString(), 10)]);\n var tempObj = column_1.getTemplate(CellType.CaptionSummary);\n var tempID = '';\n if (!isNullOrUndefined(tempObj)) {\n var tempValue_1 = tempObj.fn(data[column_1.columnName], this_1.parent, tempObj.property, tempID);\n if (this_1.parent.isReact && typeof column_1.groupCaptionTemplate !== 'string') {\n this_1.parent.renderTemplates(function () {\n if (tempValue_1 && tempValue_1.length) {\n if (!isNullOrUndefined(gObj.groupSettings.captionTemplate)) {\n node.appendChild(tempValue_1[0]);\n }\n else {\n node.innerText += ' ' + tempValue_1[0].textContent;\n }\n }\n });\n }\n else {\n if (tempValue_1 && tempValue_1.length) {\n if (!isNullOrUndefined(gObj.groupSettings.captionTemplate)) {\n gTemplateValue = tempValue_1;\n }\n else {\n gTemplateValue = tempValue_1[0].textContent;\n }\n }\n }\n }\n }\n return \"break\";\n }\n };\n var this_1 = this;\n for (var i = 0; i < gObj.aggregates[parseInt(j.toString(), 10)].columns.length; i++) {\n var state_1 = _loop_1(i);\n if (state_1 === \"break\")\n break;\n }\n }\n if (!isNullOrUndefined(gObj.groupSettings.captionTemplate)) {\n var isReactCompiler = this.parent.isReact && typeof (gObj.groupSettings.captionTemplate) !== 'string';\n var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&\n this.parent.parentDetails.parentInstObj.isReact;\n if (isReactCompiler || isReactChild) {\n var tempID = gObj.element.id + 'captionTemplate';\n templateCompiler(gObj.groupSettings.captionTemplate)(data, this.parent, 'captionTemplate', tempID, null, null, node);\n this.parent.renderTemplates();\n }\n else if (this.parent.isVue) {\n result = templateCompiler(gObj.groupSettings.captionTemplate)(data, this.parent);\n }\n else {\n result = templateCompiler(gObj.groupSettings.captionTemplate)(data);\n }\n if (!isReactCompiler && !isReactChild) {\n appendChildren(node, result);\n if (gTemplateValue && gTemplateValue.length && gTemplateValue[0].textContent) {\n node.appendChild(gTemplateValue[0]);\n }\n }\n }\n else {\n if (gObj.groupSettings.enableLazyLoading) {\n node[\"\" + domSetter] = this.parent.sanitize(cell.column.headerText) + ': ' + this.parent.sanitize(value) +\n (gTemplateValue ? ' ' + gTemplateValue : '');\n }\n else {\n node[\"\" + domSetter] = this.parent.sanitize(cell.column.headerText) + ': ' + this.parent.sanitize(value) +\n ' - ' + data.count + ' ' + (data.count < 2 ? this.localizer.getConstant('Item') : this.localizer.getConstant('Items'))\n + (gTemplateValue ? ' ' + gTemplateValue : '');\n }\n }\n node.setAttribute('colspan', cell.colSpan.toString());\n node.setAttribute('aria-label', node.innerHTML + this.localizer.getConstant('GroupCaption'));\n node.setAttribute('title', node.textContent);\n return node;\n };\n return GroupCaptionCellRenderer;\n}(CellRenderer));\nexport { GroupCaptionCellRenderer };\n/**\n * GroupCaptionEmptyCellRenderer class which responsible for building group caption empty cell.\n *\n * @hidden\n */\nvar GroupCaptionEmptyCellRenderer = /** @class */ (function (_super) {\n __extends(GroupCaptionEmptyCellRenderer, _super);\n function GroupCaptionEmptyCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TD', { className: 'e-groupcaption' });\n return _this;\n }\n /**\n * Function to render the cell content based on Column object.\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the Object\n * @param {string} data.field - Defines the field\n * @param {string} data.key - Defines the key\n * @param {number} data.count - Defines the count\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n GroupCaptionEmptyCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.innerHTML = ' ';\n node.setAttribute('colspan', cell.colSpan.toString());\n return node;\n };\n return GroupCaptionEmptyCellRenderer;\n}(CellRenderer));\nexport { GroupCaptionEmptyCellRenderer };\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 { IndentCellRenderer } from './indent-cell-renderer';\nimport { CellType } from '../base/enum';\n/**\n * ExpandCellRenderer class which responsible for building group expand cell.\n *\n * @hidden\n */\nvar ExpandCellRenderer = /** @class */ (function (_super) {\n __extends(ExpandCellRenderer, _super);\n function ExpandCellRenderer() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Function to render the expand cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @param {string} data.field - Defines the field\n * @param {string} data.key - Defines the key\n * @param {Object} attr - specifies the attribute\n * @param {boolean} isExpand - specifies isexpand\n * @returns {Element} returns the element\n */\n ExpandCellRenderer.prototype.render = function (cell, data, attr, isExpand) {\n var node = this.element.cloneNode();\n node.setAttribute('ej-mappingname', data.field);\n node.setAttribute('ej-mappingvalue', data.key);\n node.setAttribute('aria-expanded', isExpand ? 'true' : 'false');\n node.setAttribute('tabindex', '-1');\n if (this.parent.infiniteScrollSettings && this.parent.infiniteScrollSettings.enableCache) {\n cell.cellType = CellType.Indent;\n node.className = isExpand ? 'e-recordplusexpand e-disablepointer' : 'e-recordpluscollapse e-disablepointer';\n }\n else {\n node.className = isExpand ? 'e-recordplusexpand' : 'e-recordpluscollapse';\n node.appendChild(this.parent.createElement('a', {\n className: isExpand ? 'e-icons e-gdiagonaldown e-icon-gdownarrow' : 'e-icons e-gnextforward e-icon-grightarrow',\n attrs: { href: '#', 'title': isExpand ? 'expanded' : 'collapsed' }\n }));\n }\n return node;\n };\n return ExpandCellRenderer;\n}(IndentCellRenderer));\nexport { ExpandCellRenderer };\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 { CellRenderer } from './cell-renderer';\n/**\n * HeaderIndentCellRenderer class which responsible for building header indent cell.\n *\n * @hidden\n */\nvar HeaderIndentCellRenderer = /** @class */ (function (_super) {\n __extends(HeaderIndentCellRenderer, _super);\n function HeaderIndentCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', { className: 'e-grouptopleftcell' });\n return _this;\n }\n /**\n * Function to render the indent cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n HeaderIndentCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.appendChild(this.parent.createElement('div', { className: 'e-headercelldiv e-emptycell', innerHTML: '' }));\n return node;\n };\n return HeaderIndentCellRenderer;\n}(CellRenderer));\nexport { HeaderIndentCellRenderer };\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 { CellRenderer } from './cell-renderer';\n/**\n * DetailHeaderIndentCellRenderer class which responsible for building detail header indent cell.\n *\n * @hidden\n */\nvar DetailHeaderIndentCellRenderer = /** @class */ (function (_super) {\n __extends(DetailHeaderIndentCellRenderer, _super);\n function DetailHeaderIndentCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', { className: 'e-detailheadercell' });\n return _this;\n }\n /**\n * Function to render the detail indent cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n DetailHeaderIndentCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.appendChild(this.parent.createElement('div', { className: 'e-emptycell' }));\n return node;\n };\n return DetailHeaderIndentCellRenderer;\n}(CellRenderer));\nexport { DetailHeaderIndentCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\n/**\n * ExpandCellRenderer class which responsible for building group expand cell.\n *\n * @hidden\n */\nvar DetailExpandCellRenderer = /** @class */ (function (_super) {\n __extends(DetailExpandCellRenderer, _super);\n function DetailExpandCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TD', {\n className: 'e-detailrowcollapse',\n attrs: { 'aria-expanded': 'false', tabindex: '-1' }\n });\n return _this;\n }\n /**\n * Function to render the detail expand cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @param {Object} attributes - specifies the attributes\n * @returns {Element} returns the element\n */\n DetailExpandCellRenderer.prototype.render = function (cell, data, attributes) {\n var node = this.element.cloneNode();\n if (attributes && !isNullOrUndefined(attributes['class'])) {\n node.className = '';\n node.className = attributes['class'];\n node.appendChild(this.parent.createElement('a', { className: 'e-icons e-dtdiagonaldown e-icon-gdownarrow', attrs: {\n href: '#', 'title': this.localizer.getConstant('Expanded')\n } }));\n }\n else {\n node.appendChild(this.parent.createElement('a', { className: 'e-icons e-dtdiagonalright e-icon-grightarrow', attrs: {\n href: '#', 'title': this.localizer.getConstant('Collapsed')\n } }));\n }\n if (cell.isSelected) {\n node.classList.add('e-selectionbackground', 'e-active');\n }\n return node;\n };\n return DetailExpandCellRenderer;\n}(CellRenderer));\nexport { DetailExpandCellRenderer };\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 { CellRenderer } from './cell-renderer';\nimport { applyStickyLeftRightPosition } from '../base/util';\n/**\n * ExpandCellRenderer class which responsible for building group expand cell.\n *\n * @hidden\n */\nvar RowDragDropRenderer = /** @class */ (function (_super) {\n __extends(RowDragDropRenderer, _super);\n function RowDragDropRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TD', {\n className: 'e-rowdragdrop e-rowdragdropcell',\n attrs: { tabindex: '-1', role: 'gridcell' }\n });\n return _this;\n }\n /**\n * Function to render the detail expand cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n RowDragDropRenderer.prototype.render = function (cell, data) {\n var nodeElement = this.element.cloneNode();\n nodeElement.appendChild(this.parent.createElement('div', {\n className: 'e-icons e-rowcelldrag e-dtdiagonalright e-icon-rowdragicon',\n attrs: { 'aria-hidden': 'true' }\n }));\n if (cell.isSelected) {\n nodeElement.classList.add('e-selectionbackground');\n nodeElement.classList.add('e-active');\n }\n if (this.parent.getVisibleFrozenRightCount() || this.parent.getVisibleFrozenLeftCount()) {\n nodeElement.classList.add('e-leftfreeze');\n var width = this.parent.getFrozenMode() === 'Right' ? 0 : this.parent.groupSettings.columns.length * 30;\n applyStickyLeftRightPosition(nodeElement, width, this.parent.enableRtl, this.parent.getFrozenMode() === 'Right' ? 'Right' : 'Left');\n }\n return nodeElement;\n };\n return RowDragDropRenderer;\n}(CellRenderer));\nexport { RowDragDropRenderer };\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 { createElement } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\nimport { applyStickyLeftRightPosition } from '../base/util';\n/**\n * DetailHeaderIndentCellRenderer class which responsible for building detail header indent cell.\n *\n * @hidden\n */\nvar RowDragDropHeaderRenderer = /** @class */ (function (_super) {\n __extends(RowDragDropHeaderRenderer, _super);\n function RowDragDropHeaderRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', { className: 'e-rowdragheader' });\n return _this;\n }\n /**\n * Function to render the detail indent cell\n *\n * @param {Cell} cell - specifies the cell\n * @param {Object} data - specifies the data\n * @returns {Element} returns the element\n */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n RowDragDropHeaderRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.appendChild(createElement('div', { className: 'e-emptycell' }));\n if (this.parent.getVisibleFrozenRightCount() || this.parent.getVisibleFrozenLeftCount()) {\n node.classList.add('e-leftfreeze');\n var width = this.parent.getFrozenMode() === 'Right' ? 0 : this.parent.groupSettings.columns.length * 30;\n applyStickyLeftRightPosition(node, width, this.parent.enableRtl, this.parent.getFrozenMode() === 'Right' ? 'Right' : 'Left');\n }\n return node;\n };\n return RowDragDropHeaderRenderer;\n}(CellRenderer));\nexport { RowDragDropHeaderRenderer };\n","import { remove, resetBlazorTemplate, blazorTemplates, getValue } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { DataManager, Query, Deferred, Predicate, DataUtil } from '@syncfusion/ej2-data';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { RenderType, CellType } from '../base/enum';\nimport { Data } from '../actions/data';\nimport { Column } from '../models/column';\nimport { Row } from '../models/row';\nimport { Cell } from '../models/cell';\nimport * as events from '../base/constant';\nimport { prepareColumns, setFormatter, isGroupAdaptive, getDatePredicate, getObject, clearReactVueTemplates } from '../base/util';\nimport { ContentRender } from '../renderer/content-renderer';\nimport { HeaderRender } from '../renderer/header-renderer';\nimport { CellRenderer } from '../renderer/cell-renderer';\nimport { HeaderCellRenderer } from '../renderer/header-cell-renderer';\nimport { StackedHeaderCellRenderer } from '../renderer/stacked-cell-renderer';\nimport { IndentCellRenderer } from '../renderer/indent-cell-renderer';\nimport { GroupCaptionCellRenderer, GroupCaptionEmptyCellRenderer } from '../renderer/caption-cell-renderer';\nimport { ExpandCellRenderer } from '../renderer/expand-cell-renderer';\nimport { HeaderIndentCellRenderer } from '../renderer/header-indent-renderer';\nimport { DetailHeaderIndentCellRenderer } from '../renderer/detail-header-indent-renderer';\nimport { DetailExpandCellRenderer } from '../renderer/detail-expand-cell-renderer';\nimport { RowDragDropRenderer } from './row-drag-drop-renderer';\nimport { RowDragDropHeaderRenderer } from '../renderer/row-drag-header-indent-render';\nimport * as literals from '../base/string-literals';\n/**\n * Content module is used to render grid content\n *\n * @hidden\n */\nvar Render = /** @class */ (function () {\n /**\n * Constructor for render module\n *\n * @param {IGrid} parent - specifies the IGrid\n * @param {ServiceLocator} locator - specifies the serviceLocator\n */\n function Render(parent, locator) {\n this.emptyGrid = false;\n this.counter = 0;\n this.parent = parent;\n this.locator = locator;\n this.data = new Data(parent, locator);\n this.l10n = locator.getService('localization');\n this.ariaService = this.locator.getService('ariaService');\n this.renderer = this.locator.getService('rendererFactory');\n this.addEventListener();\n }\n /**\n * To initialize grid header, content and footer rendering\n *\n * @returns {void}\n */\n Render.prototype.render = function () {\n var gObj = this.parent;\n this.headerRenderer = this.renderer.getRenderer(RenderType.Header);\n this.contentRenderer = this.renderer.getRenderer(RenderType.Content);\n this.headerRenderer.renderPanel();\n this.contentRenderer.renderPanel();\n if (gObj.getColumns().length) {\n this.isLayoutRendered = true;\n this.headerRenderer.renderTable();\n this.contentRenderer.renderTable();\n this.emptyRow(false);\n }\n this.parent.scrollModule.setWidth();\n this.parent.scrollModule.setHeight();\n if (this.parent.height !== 'auto') {\n this.parent.scrollModule.setPadding();\n }\n this.refreshDataManager();\n };\n /**\n * Refresh the entire Grid.\n *\n * @param {NotifyArgs} e - specifies the NotifyArgs\n * @returns {void}\n */\n Render.prototype.refresh = function (e) {\n var _this = this;\n if (e === void 0) { e = { requestType: 'refresh' }; }\n var gObj = this.parent;\n gObj.notify(e.requestType + \"-begin\", e);\n gObj.trigger(events.actionBegin, e, function (args) {\n if (args === void 0) { args = { requestType: 'refresh' }; }\n if (args.cancel) {\n gObj.notify(events.cancelBegin, args);\n if (args.action === 'clearFilter' && _this.parent.filterSettings.type === 'Menu') {\n _this.parent.filterSettings.columns[_this.parent.filterModule.filterObjIndex] = _this.parent.filterModule.prevFilterObject;\n var iconClass = _this.parent.showColumnMenu && _this.parent.filterModule['column'].showColumnMenu ? '.e-columnmenu' : '.e-icon-filter';\n var col = _this.parent.element.querySelector('[e-mappinguid=\"' + _this.parent.filterModule['column'].uid + '\"]').parentElement;\n var flIcon = col.querySelector(iconClass);\n if (!isNullOrUndefined(_this.parent.filterModule.prevFilterObject)) {\n flIcon.classList.add('e-filtered');\n }\n }\n if (args.action === 'clear-filter' && (_this.parent.filterSettings.type === 'CheckBox' || _this.parent.filterSettings.type === 'Excel')) {\n _this.parent.filterSettings.columns = _this.parent.filterModule.checkboxPrevFilterObject;\n }\n if (args.requestType === 'grouping') {\n // Remove the dropped column name from groupsettings.columns if args.cancel is true \n var index = gObj.groupSettings.columns.indexOf(args.columnName);\n if (index !== -1) {\n gObj.setProperties({ groupSettings: { Columns: gObj.groupSettings.columns.splice(index, 1) } }, true);\n gObj.setProperties({ sortSettings: { Columns: gObj.sortSettings.columns.splice(index, 1) } }, true);\n var column = gObj.getColumnByField(args.columnName);\n var headerCell = gObj.getColumnHeaderByField(column.field);\n column.visible = (!isNullOrUndefined(headerCell) && !headerCell.classList.contains('e-hide'));\n }\n }\n return;\n }\n if (gObj.allowSelection && (args.action === 'clearFilter' || args.action === 'clear-filter' ||\n (args.requestType === 'searching' && args.searchString === '') || args.action === 'add')) {\n gObj.selectionModule['rmtHdrChkbxClicked'] = false;\n }\n if (gObj.allowPaging && gObj.pageSettings.pageSizes && gObj.pagerModule.pagerObj.isAllPage &&\n (args.action === 'add' && args.requestType === 'save') && gObj.pagerModule.pagerObj.checkAll) {\n gObj.setProperties({ pageSettings: { pageSize: gObj.pageSettings.pageSize + 1 } }, true);\n }\n if (args.requestType === 'delete' && gObj.allowPaging) {\n var dataLength = args.data.length;\n var count = gObj.pageSettings.totalRecordsCount - dataLength;\n var currentViewData = gObj.getCurrentViewRecords().length;\n // eslint-disable-next-line max-len\n if ((!(currentViewData - dataLength) && count && ((gObj.pageSettings.currentPage - 1) * gObj.pageSettings.pageSize) === count) || (count && count <= dataLength)) {\n gObj.prevPageMoving = true;\n gObj.setProperties({\n pageSettings: {\n totalRecordsCount: count, currentPage: Math.ceil(count / gObj.pageSettings.pageSize)\n }\n }, true);\n gObj.pagerModule.pagerObj.totalRecordsCount = count;\n }\n }\n if (args.requestType === 'reorder' && _this.parent.dataSource && 'result' in _this.parent.dataSource) {\n _this.contentRenderer.refreshContentRows(args);\n }\n else if ((args.requestType === 'paging' || args.requestType === 'columnstate' || args.requestType === 'reorder')\n && _this.parent.groupSettings.enableLazyLoading && _this.parent.groupSettings.columns.length\n && (_this.parent.enableVirtualization ? _this.parent.lazyLoadRender :\n _this.parent.contentModule).getGroupCache()[_this.parent.pageSettings.currentPage]) {\n _this.contentRenderer.refreshContentRows(args);\n }\n else {\n _this.refreshDataManager(args);\n }\n });\n };\n /**\n * @returns {void}\n * @hidden\n */\n Render.prototype.resetTemplates = function () {\n var gObj = this.parent;\n var gridColumns = gObj.getColumns();\n if (gObj.detailTemplate) {\n var detailTemplateID = gObj.element.id + 'detailTemplate';\n blazorTemplates[\"\" + detailTemplateID] = [];\n resetBlazorTemplate(detailTemplateID, 'DetailTemplate');\n }\n if (gObj.groupSettings.captionTemplate) {\n resetBlazorTemplate(gObj.element.id + 'captionTemplate', 'CaptionTemplate');\n }\n if (gObj.rowTemplate) {\n resetBlazorTemplate(gObj.element.id + 'rowTemplate', 'RowTemplate');\n }\n if (gObj.toolbarTemplate) {\n resetBlazorTemplate(gObj.element.id + 'toolbarTemplate', 'ToolbarTemplate');\n }\n if (gObj.pageSettings.template) {\n resetBlazorTemplate(gObj.element.id + '_template', 'pageSettings');\n }\n for (var i = 0; i < gridColumns.length; i++) {\n if (gridColumns[parseInt(i.toString(), 10)].template) {\n blazorTemplates[gObj.element.id + gridColumns[parseInt(i.toString(), 10)].uid] = [];\n resetBlazorTemplate(gObj.element.id + gridColumns[parseInt(i.toString(), 10)].uid, 'Template');\n }\n if (gridColumns[parseInt(i.toString(), 10)].headerTemplate) {\n resetBlazorTemplate(gObj.element.id + gridColumns[parseInt(i.toString(), 10)].uid + 'headerTemplate', 'HeaderTemplate');\n }\n if (gridColumns[parseInt(i.toString(), 10)].filterTemplate) {\n resetBlazorTemplate(gObj.element.id + gridColumns[parseInt(i.toString(), 10)].uid + 'filterTemplate', 'FilterTemplate');\n }\n }\n var guid = 'guid';\n for (var k = 0; k < gObj.aggregates.length; k++) {\n for (var j = 0; j < gObj.aggregates[parseInt(k.toString(), 10)].columns.length; j++) {\n if (gObj.aggregates[parseInt(k.toString(), 10)].columns[parseInt(j.toString(), 10)].footerTemplate) {\n var tempID = gObj.element.id + gObj.aggregates[parseInt(k.toString(), 10)].columns[parseInt(j.toString(), 10)][\"\" + guid] + 'footerTemplate';\n resetBlazorTemplate(tempID, 'FooterTemplate');\n }\n if (gObj.aggregates[parseInt(k.toString(), 10)].columns[parseInt(j.toString(), 10)].groupFooterTemplate) {\n var tempID = gObj.element.id + gObj.aggregates[parseInt(k.toString(), 10)].columns[parseInt(j.toString(), 10)][\"\" + guid] + 'groupFooterTemplate';\n resetBlazorTemplate(tempID, 'GroupFooterTemplate');\n }\n if (gObj.aggregates[parseInt(k.toString(), 10)].columns[parseInt(j.toString(), 10)].groupCaptionTemplate) {\n var tempID = gObj.element.id + gObj.aggregates[parseInt(k.toString(), 10)].columns[parseInt(j.toString(), 10)][\"\" + guid] + 'groupCaptionTemplate';\n resetBlazorTemplate(tempID, 'GroupCaptionTemplate');\n }\n }\n }\n };\n Render.prototype.refreshComplete = function (e) {\n this.parent.trigger(events.actionComplete, e);\n };\n /**\n * The function is used to refresh the dataManager\n *\n * @param {NotifyArgs} args - specifies the args\n * @returns {void}\n */\n Render.prototype.refreshDataManager = function (args) {\n var _this = this;\n if (args === void 0) { args = {}; }\n var gObj = this.parent;\n var maskRow = (gObj.loadingIndicator.indicatorType === 'Shimmer' && args.requestType !== 'virtualscroll'\n && args.requestType !== 'infiniteScroll') || ((args.requestType === 'virtualscroll' || args.requestType === 'infiniteScroll')\n && gObj.enableVirtualMaskRow);\n if (args.requestType !== 'virtualscroll' && !args.isCaptionCollapse && !maskRow) {\n this.parent.showSpinner();\n }\n if (maskRow) {\n gObj.showMaskRow(args.requestType === 'virtualscroll' ? args.virtualInfo.sentinelInfo.axis\n : args.requestType === 'infiniteScroll' ? args.direction : undefined);\n }\n this.parent.notify(events.resetInfiniteBlocks, args);\n this.emptyGrid = false;\n var dataManager;\n var isFActon = this.isNeedForeignAction();\n this.ariaService.setBusy(this.parent.getContent().querySelector('.' + literals.content), true);\n if (isFActon) {\n var deffered = new Deferred();\n dataManager = this.getFData(deffered, args);\n }\n if (!dataManager) {\n if (gObj.allowPaging && !gObj.getDataModule().dataManager.dataSource.offline && gObj.pageSettings\n && gObj.pageSettings.pageSizes && gObj.pagerModule && gObj.pagerModule.pagerObj && gObj.pagerModule.pagerObj.isAllPage) {\n gObj.pagerModule.pagerObj.isAllPage = undefined;\n }\n dataManager = this.data.getData(args, this.data.generateQuery().requiresCount());\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n dataManager = dataManager.then(function (e) {\n var query = _this.data.generateQuery().requiresCount();\n if (_this.emptyGrid) {\n var def = new Deferred();\n def.resolve({ result: [], count: 0 });\n return def.promise;\n }\n return _this.data.getData(args, query);\n });\n }\n if (this.parent.getForeignKeyColumns().length && (!isFActon || this.parent.searchSettings.key.length)) {\n var deffered_1 = new Deferred();\n dataManager = dataManager.then(function (e) {\n _this.parent.notify(events.getForeignKeyData, { dataManager: dataManager, result: e, promise: deffered_1, action: args });\n return deffered_1.promise;\n });\n }\n if (this.parent.groupSettings.disablePageWiseAggregates && this.parent.groupSettings.columns.length) {\n dataManager = dataManager.then(function (e) { return _this.validateGroupRecords(e); });\n }\n dataManager.then(function (e) { return _this.dataManagerSuccess(e, args); })\n .catch(function (e) { return _this.dataManagerFailure(e, args); });\n };\n Render.prototype.getFData = function (deferred, args) {\n this.parent.notify(events.getForeignKeyData, { isComplex: true, promise: deferred, action: args });\n return deferred.promise;\n };\n Render.prototype.isNeedForeignAction = function () {\n var gObj = this.parent;\n return !!((gObj.allowFiltering && gObj.filterSettings.columns.length) ||\n (gObj.searchSettings.key.length)) && this.foreignKey(this.parent.getForeignKeyColumns());\n };\n Render.prototype.foreignKey = function (columns) {\n var _this = this;\n return columns.some(function (col) {\n var fbool = false;\n fbool = _this.parent.filterSettings.columns.some(function (value) {\n return col.uid === value.uid;\n });\n return !!(fbool || _this.parent.searchSettings.key.length);\n });\n };\n Render.prototype.sendBulkRequest = function (args) {\n var _this = this;\n args.requestType = 'batchsave';\n var gObj = this.parent;\n if (gObj.allowPaging && gObj.pageSettings.pageSizes && gObj.pagerModule.pagerObj.isAllPage && gObj.pagerModule.pagerObj.checkAll) {\n var dataLength = args['changes'].addedRecords.length;\n if (dataLength) {\n gObj.setProperties({ pageSettings: { pageSize: gObj.pageSettings.pageSize + dataLength } }, true);\n }\n }\n if (gObj.allowPaging && (args.changes.addedRecords.length ||\n args.changes.deletedRecords.length ||\n args.changes.changedRecords.length) && gObj.pageSettings\n && gObj.pageSettings.pageSizes && gObj.pagerModule && gObj.pagerModule.pagerObj\n && !gObj.getDataModule().dataManager.dataSource.offline && gObj.pagerModule.pagerObj.isAllPage) {\n gObj.pagerModule.pagerObj.isAllPage = undefined;\n }\n var promise = this.data.saveChanges(args.changes, this.parent.getPrimaryKeyFieldNames()[0], args.original);\n var query = this.data.generateQuery().requiresCount();\n if (this.data.dataManager.dataSource.offline) {\n this.refreshDataManager({ requestType: 'batchsave' });\n return;\n }\n else {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n promise.then(function (e) {\n _this.data.getData(args, query)\n .then(function (e) { return _this.dmSuccess(e, args); })\n .catch(function (e) { return _this.dmFailure(e, args); });\n })\n .catch(function (e) { return _this.dmFailure(e, args); });\n }\n };\n Render.prototype.dmSuccess = function (e, args) {\n this.dataManagerSuccess(e, args);\n };\n Render.prototype.dmFailure = function (e, args) {\n this.dataManagerFailure(e, args);\n };\n /**\n * Render empty row to Grid which is used at the time to represent to no records.\n *\n * @returns {void}\n * @hidden\n */\n Render.prototype.renderEmptyRow = function () {\n this.emptyRow(true);\n };\n Render.prototype.emptyRow = function (isTrigger) {\n var gObj = this.parent;\n var tbody = this.contentRenderer.getTable().querySelector(literals.tbody);\n if (!isNullOrUndefined(tbody)) {\n remove(tbody);\n }\n tbody = this.parent.createElement(literals.tbody, { attrs: { role: 'rowgroup' } });\n var spanCount = gObj.allowRowDragAndDrop && isNullOrUndefined(gObj.rowDropSettings.targetID) ? 1 : 0;\n if (gObj.detailTemplate || gObj.childGrid) {\n ++spanCount;\n }\n var tr = this.parent.createElement('tr', { className: 'e-emptyrow', attrs: { role: 'row' } });\n var td;\n if (gObj.emptyRecordTemplate) {\n var emptyRecordTemplateID = gObj.element.id + 'emptyRecordTemplate';\n td = this.parent.createElement('td', { attrs: { colspan: (gObj.getVisibleColumns().length + spanCount + gObj.groupSettings.columns.length).toString() } });\n if (gObj.isVue) {\n td.appendChild(gObj.getEmptyRecordTemplate()(gObj.dataSource, gObj, 'emptyRecordTemplate', emptyRecordTemplateID, undefined, undefined, undefined, this.parent['root'])[1]);\n }\n else {\n td.appendChild(gObj.getEmptyRecordTemplate()(gObj.dataSource, gObj, 'emptyRecordTemplate', emptyRecordTemplateID, undefined, undefined, undefined, this.parent['root'])[0]);\n }\n if (gObj.isReact) {\n this.parent.renderTemplates();\n }\n }\n else {\n td = this.parent.createElement('td', {\n innerHTML: this.l10n.getConstant('EmptyRecord'),\n attrs: { colspan: (gObj.getVisibleColumns().length + spanCount + gObj.groupSettings.columns.length).toString() }\n });\n }\n if (gObj.isFrozenGrid()) {\n td.classList.add('e-leftfreeze');\n td.style.left = 0 + 'px';\n }\n if (gObj.frozenRows && gObj.element.querySelector('.e-frozenrow-border')) {\n this.parent.element.querySelector('.e-frozenrow-border').classList.add('e-frozenrow-empty');\n }\n tr.appendChild(td);\n tbody.appendChild(tr);\n this.contentRenderer.renderEmpty(tbody);\n if (isTrigger) {\n this.parent.trigger(events.dataBound, {});\n this.parent.notify(events.onEmpty, { rows: [new Row({ isDataRow: true, cells: [new Cell({ isDataCell: true, visible: true })] })] });\n }\n };\n Render.prototype.dynamicColumnChange = function () {\n if (this.parent.getCurrentViewRecords().length) {\n this.updateColumnType(this.parent.getCurrentViewRecords()[0]);\n }\n };\n Render.prototype.updateColumnType = function (record) {\n var columns = this.parent.getColumns();\n var value;\n var cFormat = 'customFormat';\n var equalTo = 'equalTo';\n var data = record && record.items ? record.items[0] : record;\n var fmtr = this.locator.getService('valueFormatter');\n for (var i = 0, len = columns.length; i < len; i++) {\n value = getObject(columns[parseInt(i.toString(), 10)].field || '', data);\n if (!isNullOrUndefined(columns[parseInt(i.toString(), 10)][\"\" + cFormat])) {\n columns[parseInt(i.toString(), 10)].format = columns[parseInt(i.toString(), 10)][\"\" + cFormat];\n }\n if (!isNullOrUndefined(columns[parseInt(i.toString(), 10)].validationRules)\n && !isNullOrUndefined(columns[parseInt(i.toString(), 10)].validationRules[\"\" + equalTo])) {\n columns[parseInt(i.toString(), 10)].validationRules[\"\" + equalTo][0] = this.parent.element.id + columns[parseInt(i.toString(), 10)].validationRules[\"\" + equalTo][0];\n }\n if (columns[parseInt(i.toString(), 10)].isForeignColumn() && columns[parseInt(i.toString(), 10)].columnData) {\n value = getObject(columns[parseInt(i.toString(), 10)].foreignKeyValue || '', columns[parseInt(i.toString(), 10)].columnData[0]);\n }\n if (!isNullOrUndefined(value)) {\n this.isColTypeDef = true;\n if (!columns[parseInt(i.toString(), 10)].type) {\n columns[parseInt(i.toString(), 10)].type = value.getDay ? (value.getHours() > 0 || value.getMinutes() > 0 ||\n value.getSeconds() > 0 || value.getMilliseconds() > 0 ? 'datetime' : 'date') : typeof (value);\n }\n }\n else {\n columns[parseInt(i.toString(), 10)].type = columns[parseInt(i.toString(), 10)].type || null;\n }\n var valueFormatter = new ValueFormatter();\n if (columns[parseInt(i.toString(), 10)].format && (columns[parseInt(i.toString(), 10)].format.skeleton\n || (columns[parseInt(i.toString(), 10)].format.format &&\n typeof columns[parseInt(i.toString(), 10)].format.format === 'string'))) {\n columns[parseInt(i.toString(), 10)].setFormatter(valueFormatter.getFormatFunction(extend({}, columns[parseInt(i.toString(), 10)].format)));\n columns[parseInt(i.toString(), 10)].setParser(valueFormatter.getParserFunction(columns[parseInt(i.toString(), 10)].format));\n }\n if (typeof (columns[parseInt(i.toString(), 10)].format) === 'string') {\n setFormatter(this.locator, columns[parseInt(i.toString(), 10)]);\n }\n else if (!columns[parseInt(i.toString(), 10)].format && columns[parseInt(i.toString(), 10)].type === 'number') {\n columns[parseInt(i.toString(), 10)].setParser(fmtr.getParserFunction({ format: 'n2' }));\n }\n if (columns[parseInt(i.toString(), 10)].type === 'dateonly' && !columns[parseInt(i.toString(), 10)].format) {\n columns[parseInt(i.toString(), 10)].format = 'yMd';\n setFormatter(this.locator, columns[parseInt(i.toString(), 10)]);\n }\n }\n };\n /**\n * @param {ReturnType} e - specifies the return type\n * @param {NotifyArgs} args - specifies the Notifyargs\n * @returns {void}\n * @hidden\n */\n // tslint:disable-next-line:max-func-body-length\n Render.prototype.dataManagerSuccess = function (e, args) {\n var _this = this;\n var gObj = this.parent;\n this.contentRenderer = this.renderer.getRenderer(RenderType.Content);\n this.headerRenderer = this.renderer.getRenderer(RenderType.Header);\n e.actionArgs = args;\n var isInfiniteDelete = this.parent.enableInfiniteScrolling && !this.parent.infiniteScrollSettings.enableCache &&\n !gObj.groupSettings.enableLazyLoading && (args.requestType === 'delete' || (args.requestType === 'save' &&\n this.parent.infiniteScrollModule.requestType === 'add' && !(gObj.sortSettings.columns.length ||\n gObj.filterSettings.columns.length || this.parent.groupSettings.columns.length || gObj.searchSettings.key)));\n // tslint:disable-next-line:max-func-body-length\n gObj.trigger(events.beforeDataBound, e, function (dataArgs) {\n if (dataArgs.cancel) {\n return;\n }\n dataArgs.result = isNullOrUndefined(dataArgs.result) ? [] : dataArgs.result;\n var len = Object.keys(dataArgs.result).length;\n if (_this.parent.isDestroyed) {\n return;\n }\n if ((!gObj.getColumns().length && !len) && !(gObj.columns.length && gObj.columns[0] instanceof Column)) {\n gObj.hideSpinner();\n return;\n }\n if (_this.isInfiniteEnd(args) && !len) {\n _this.parent.notify(events.infiniteEditHandler, { e: args, result: e.result, count: e.count, agg: e.aggregates });\n return;\n }\n _this.parent.isEdit = false;\n _this.parent.notify(events.editReset, {});\n _this.parent.notify(events.tooltipDestroy, {});\n if (args && args.requestType !== 'infiniteScroll') {\n _this.parent.notify(events.commandColumnDestroy, { type: 'refreshCommandColumn' });\n }\n _this.contentRenderer.prevCurrentView = _this.parent.currentViewData.slice();\n gObj.currentViewData = dataArgs.result;\n gObj.notify(events.refreshInfiniteCurrentViewData, { args: args, data: dataArgs.result });\n if (dataArgs.count && !gObj.allowPaging && (gObj.enableVirtualization || gObj.enableInfiniteScrolling)) {\n gObj.totalDataRecordsCount = dataArgs.count;\n }\n if (!len && dataArgs.count && gObj.allowPaging && args && args.requestType !== 'delete') {\n if (_this.parent.groupSettings.enableLazyLoading\n && (args.requestType === 'grouping' || args.requestType === 'ungrouping')) {\n _this.parent.notify(events.groupComplete, args);\n }\n gObj.prevPageMoving = true;\n gObj.pageSettings.totalRecordsCount = dataArgs.count;\n if (args.requestType !== 'paging') {\n gObj.pageSettings.currentPage = Math.ceil(dataArgs.count / gObj.pageSettings.pageSize);\n }\n gObj.dataBind();\n return;\n }\n if ((!gObj.getColumns().length && len || !_this.isLayoutRendered) && !isGroupAdaptive(gObj)) {\n gObj.removeMaskRow();\n _this.updatesOnInitialRender(dataArgs);\n }\n if (!_this.isColTypeDef && gObj.getCurrentViewRecords()) {\n if (_this.data.dataManager.dataSource.offline && gObj.dataSource && gObj.dataSource.length) {\n _this.updateColumnType(gObj.dataSource[0]);\n }\n else {\n _this.updateColumnType(gObj.getCurrentViewRecords()[0]);\n }\n }\n if (!_this.parent.isInitialLoad && _this.parent.groupSettings.disablePageWiseAggregates &&\n !_this.parent.groupSettings.columns.length) {\n dataArgs.result = _this.parent.dataSource instanceof Array ? _this.parent.dataSource : _this.parent.currentViewData;\n }\n if ((_this.parent.isReact || _this.parent.isVue) && !isNullOrUndefined(args) && args.requestType !== 'infiniteScroll' && !args.isFrozen) {\n clearReactVueTemplates(_this.parent, ['footerTemplate']);\n }\n if (_this.parent.isAngular && _this.parent.allowGrouping && _this.parent.groupSettings.captionTemplate\n && !(!isNullOrUndefined(args) && args.requestType === 'infiniteScroll')) {\n _this.parent.destroyTemplate(['groupSettings_captionTemplate']);\n }\n _this.parent.notify(events.dataReady, extend({ count: dataArgs.count, result: dataArgs.result, aggregates: dataArgs.aggregates }, args));\n if ((gObj.groupSettings.columns.length || (args && args.requestType === 'ungrouping'))\n && (args && args.requestType !== 'filtering')) {\n _this.headerRenderer.refreshUI();\n }\n if (len) {\n if (isGroupAdaptive(gObj)) {\n var content = 'content';\n args.scrollTop = { top: _this.contentRenderer[\"\" + content].scrollTop };\n }\n if (!isInfiniteDelete) {\n if (_this.parent.enableImmutableMode) {\n _this.contentRenderer.immutableModeRendering(args);\n }\n else {\n _this.contentRenderer.refreshContentRows(args);\n }\n }\n else {\n _this.parent.notify(events.infiniteEditHandler, { e: args, result: e.result, count: e.count, agg: e.aggregates });\n }\n }\n else {\n if (args && args.isCaptionCollapse) {\n return;\n }\n if (!gObj.getColumns().length) {\n gObj.element.innerHTML = '';\n alert(_this.l10n.getConstant('EmptyDataSourceError')); //ToDO: change this alert as dialog\n return;\n }\n _this.contentRenderer.setRowElements([]);\n _this.contentRenderer.setRowObjects([]);\n _this.ariaService.setBusy(_this.parent.getContent().querySelector('.' + literals.content), false);\n gObj.removeMaskRow();\n _this.renderEmptyRow();\n if (gObj.enableColumnVirtualization && !len) {\n _this.parent.notify(events.contentReady, { rows: gObj.getRowsObject(), args: {} });\n }\n if (args) {\n var action = (args.requestType || '').toLowerCase() + '-complete';\n _this.parent.notify(action, args);\n if (args.requestType === 'batchsave') {\n args.cancel = false;\n args.rows = [];\n args.isFrozen = !args.isFrozen;\n _this.parent.trigger(events.actionComplete, args);\n }\n }\n if (_this.parent.autoFit) {\n _this.parent.preventAdjustColumns();\n }\n _this.parent.hideSpinner();\n }\n _this.parent.notify(events.toolbarRefresh, {});\n _this.setRowCount(_this.parent.getCurrentViewRecords().length);\n if ('query' in e) {\n _this.parent.getDataModule().isQueryInvokedFromData = false;\n }\n });\n };\n /**\n * @param {object} e - specifies the object\n * @param {Object[]} e.result - specifies the result\n * @param {NotifyArgs} args - specifies the args\n * @returns {void}\n * @hidden\n */\n Render.prototype.dataManagerFailure = function (e, args) {\n if (!isNullOrUndefined(this.parent.contentModule)) {\n this.ariaService.setOptions(this.parent.getContent().querySelector('.' + literals.content), { busy: false, invalid: true });\n this.setRowCount(1);\n }\n this.parent.trigger(events.actionFailure, { error: e });\n this.parent.hideSpinner();\n this.parent.removeMaskRow();\n if (args.requestType === 'save' || args.requestType === 'delete'\n || args.name === 'bulk-save') {\n return;\n }\n this.parent.currentViewData = [];\n this.renderEmptyRow();\n if (!this.parent.isInitialLoad) {\n this.parent.focusModule.setFirstFocusableTabIndex();\n }\n this.parent.log('actionfailure', { error: e });\n };\n Render.prototype.setRowCount = function (dataRowCount) {\n this.ariaService.setOptions(this.parent.element, {\n rowcount: dataRowCount ? dataRowCount.toString() : '1'\n });\n };\n Render.prototype.isInfiniteEnd = function (args) {\n return this.parent.enableInfiniteScrolling && !this.parent.infiniteScrollSettings.enableCache && args.requestType === 'delete';\n };\n Render.prototype.updatesOnInitialRender = function (e) {\n this.isLayoutRendered = true;\n var isEmptyCol = false;\n if (this.parent.columns.length < 1) {\n this.buildColumns(e.result[0]);\n isEmptyCol = true;\n }\n prepareColumns(this.parent.columns, null, this.parent);\n if (isEmptyCol) {\n this.parent.notify(events.refreshSplitFrozenColumn, {});\n }\n this.headerRenderer.renderTable();\n this.contentRenderer.renderTable();\n this.parent.isAutoGen = true;\n this.parent.notify(events.autoCol, {});\n };\n Render.prototype.iterateComplexColumns = function (obj, field, split) {\n var keys = Object.keys(obj);\n for (var i = 0; i < keys.length; i++) {\n var childKeys = typeof obj[keys[parseInt(i.toString(), 10)]] === 'object'\n && obj[keys[parseInt(i.toString(), 10)]] && !(obj[keys[parseInt(i.toString(), 10)]] instanceof Date) ?\n Object.keys(obj[keys[parseInt(i.toString(), 10)]]) : [];\n if (childKeys.length) {\n this.iterateComplexColumns(obj[keys[parseInt(i.toString(), 10)]], field + (keys[parseInt(i.toString(), 10)] + '.'), split);\n }\n else {\n split[this.counter] = field + keys[parseInt(i.toString(), 10)];\n this.counter++;\n }\n }\n };\n Render.prototype.buildColumns = function (record) {\n var cols = [];\n var complexCols = {};\n this.iterateComplexColumns(record, '', complexCols);\n var columns = Object.keys(complexCols).filter(function (e) { return complexCols[\"\" + e] !== 'BlazId'; }).\n map(function (field) { return complexCols[\"\" + field]; });\n for (var i = 0, len = columns.length; i < len; i++) {\n cols[parseInt(i.toString(), 10)] = { 'field': columns[parseInt(i.toString(), 10)] };\n if (this.parent.enableColumnVirtualization) {\n cols[parseInt(i.toString(), 10)].width = !isNullOrUndefined(cols[parseInt(i.toString(), 10)].width) ?\n cols[parseInt(i.toString(), 10)].width : 200;\n }\n }\n this.parent.setProperties({ 'columns': cols }, true);\n };\n Render.prototype.instantiateRenderer = function () {\n this.renderer.addRenderer(RenderType.Header, new HeaderRender(this.parent, this.locator));\n this.renderer.addRenderer(RenderType.Content, new ContentRender(this.parent, this.locator));\n var cellrender = this.locator.getService('cellRendererFactory');\n cellrender.addCellRenderer(CellType.Header, new HeaderCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.Data, new CellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.StackedHeader, new StackedHeaderCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.Indent, new IndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.GroupCaption, new GroupCaptionCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.GroupCaptionEmpty, new GroupCaptionEmptyCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.Expand, new ExpandCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.HeaderIndent, new HeaderIndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.StackedHeader, new StackedHeaderCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.DetailHeader, new DetailHeaderIndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.RowDragHIcon, new RowDragDropHeaderRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.DetailExpand, new DetailExpandCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.DetailFooterIntent, new IndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.RowDragIcon, new RowDragDropRenderer(this.parent, this.locator));\n };\n Render.prototype.addEventListener = function () {\n var _this = this;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.initialLoad, this.instantiateRenderer, this);\n this.parent.on('refreshdataSource', this.dataManagerSuccess, this);\n this.parent.on(events.modelChanged, this.refresh, this);\n this.parent.on(events.refreshComplete, this.refreshComplete, this);\n this.parent.on(events.bulkSave, this.sendBulkRequest, this);\n this.parent.on(events.showEmptyGrid, function () { _this.emptyGrid = true; }, this);\n this.parent.on(events.autoCol, this.dynamicColumnChange, this);\n };\n /**\n * @param {ReturnType} e - specifies the Return type\n * @returns {Promise